Behaviours

Interaction in Milda is modelled, not coded. A small set of atoms, each a formal state machine, is composed by every archetype, and the states those machines emit are what paint keys on. This page lists the vocabulary, read off the prelude, and says what the file can say about it and what the React target does with it.

#Three layers

#The atom model

An atom is not a widget. It is an abstract interaction state machine: a few named states, the events that move between them, and the outputs it emits along the way. A toggle is two states, one event that flips them, and a change output, with nothing about checkboxes or tap targets. Three properties make atoms platform-neutral invariants:

• They emit states, not pseudo-classes. Paint keys on checked, open, selected, never on :hover.
• They gate on capabilities, not platforms. An atom that needs a keyboard declares input.keyboard; a target without it drops or substitutes the atom. No atom mentions a platform by name.
• They compose through a small algebra. Wire one machine's output to another's input, listen only under a condition, fan out to a set, arbitrate a race. A select is activation opening a presentation, browse moving the highlight, selection committing the value, dismiss closing the surface: five stock machines and a few wires. The iOS wheel changes one wire.

#The atoms

19 indivisible machines. For each: what it does, the states it exposes for paint, what it requires, and the archetypes that compose it.

#Composites

7 familiar behaviours are not atoms. They are compositions, kept as first-class conveniences that compile down to their canonical form:

• disclosure = toggle + presentation - ≈ toggle(expanded) + presentation(inline); exposes expanded
• typeahead = scheduler + browse - jump to a member by typed prefix; requires input.keyboard
• dnd = gesture + ordering - drag-and-drop move/reorder across containers; ordering is a non-behavior (collection mutation)
• resize = gesture - drag-resize a region/panel; requires input.pointer
• auto-dismiss = scheduler - self-close after a timeout (toast)
• stepping-nav = navigation - ≈ navigation(ordered) + constraint; ordered progress through steps; exposes active, complete
• pressability = gesture - press/hover/active feedback (ripple, highlight); contributes pressed/hovered feedback states ONLY - does not fire the action (that is activation)

#Decorations

Decorations shape how something happens or is presented without adding states of their own; they decorate machines and surfaces the way paint decorates parts:

• motion - decorates existing transitions (spring/flip/fade+slide); adds no states
• masking - format/constrain entry (date/phone/currency) - decorates value-entry draft
• anchoring - position a surface relative to a reference (placement/flip/offset/match-size) - decorates presentation(popover|menu)
• backdrop - scrim / blur behind a layer - decorates a modal presentation; painted via the `backdrop` facet on the backdrop anatomy part
• momentum-scroll - inertial scroll with snap / detent - decorates scroll/browse on touch surfaces

#Non-behaviours

Four things that look like behaviours are deliberately excluded. They transform data or the render, not interaction, and belong to the data layer or the generator:

• filter - derived view over a collection (data, not interaction)
• virtualization - render windowing
• ordering - collection mutation (reorder/sort)
• aggregation - data transformation (grouping/totals) - DataGrid math

#The states

The vocabulary paint keys on: the atom states every target can draw, plus ambient gates, collection-position pseudo-states and the calendar's cell states. It is a closed list, and a word outside it is reported. A machine state no target draws yet, such as validation's invalid, is reached through a bound prop instead. Each one, and the atom or source that contributes it:

• hoveredpressability
• pressedpressability
• focusedvalue-entry
• focus-visiblevalue-entry (keyboard focus)
• activebrowse
• selectedselection
• checkedtoggle
• indeterminatetoggle (tristate)
• expandeddisclosure
• openpresentation
• disabledambient (global gate)
• readonlyambient
• loadingasync-state
• errorasync-state
• successasync-state
• firstcollection-position
• lastcollection-position
• oddcollection-position
• evencollection-position
• todaythe calendar core (DatePicker day)
• outside-monththe calendar core (DatePicker day)
• range-startthe calendar core (range mode)
• range-endthe calendar core (range mode)
• in-rangethe calendar core (range mode)
• highlightedbrowse (the calendar cursor)

How a part uses them: Facets, under “States and conditions”.

#What a file says about behaviour

A component names its archetype and gets its composition. Beyond that, the file speaks about behaviour in four places, all on parts or in the contract:

• emits { change on input payload bind value } - which declared event an interaction raises, with what.
• bind value value, bind state open open - a prop as the part's value; a prop driving a state.
• a11y { labelled-by label }, control switch, group segmented, the per-archetype config blocks - naming and realization choices the archetype offers.
• behavior roving-tabindex { orientation vertical } - a free behaviour attached to a part, from a closed list: focus-trap, typeahead, cursor-navigation, clickaway, overlay-management, scroll-lock, roving-tabindex, filter.

#Authored composition

A component may also write its composition in the algebra the prelude uses, under aliases that wire and gate refer to:

archetype SingleSelect
props {
  options : array<string> required
  value : string bind selected
  placeholder : string = "Choose"
}
events {
  change from S.change
}

uses presentation(surface: dialog) as P
uses dismiss as D
wire D.dismissRequested -> P.close
gate D active when open

The reader lowers this into the document and the file round-trips it. No target reads it yet: a component's behaviour today is its archetype's canonical composition, which for every archetype is the same wiring the spec writes down. The statement is in the language because the spec is, and because an agent proposing a new interaction needs a place to say it.

See it built in the tour8. Inputs and behaviour4. Variants and states