Skip to content
m3exp-web
System Light Dark

Changelog

1.6.0

Minor changes

  • Checkbox (M8, COMPONENT_SPEC §22; Compose Checkbox and TriStateCheckbox): a native <input type="checkbox"> in a 48dp target with an 18dp box, checked, unchecked and indeterminate, error (aria-invalid) and disabled. Checking draws the check along Compose's path (stroke-dashoffset on the default spatial spring), the check slides into the indeterminate dash (cross-centre gravitation), unchecking fades it and snaps it away after 100ms, and a dash entered from unchecked draws from its start. New components/checkbox-defaults.css tokens (the Checkbox.kt values Compose renders, both branches of ComposeMaterial3Flags.isCheckboxStylingFixEnabled, selected by --m3e-comp-checkbox-styling-fix: 1 = the flag-on styling, which matches CheckboxTokens and m3.material.io; 0 = Compose's default flag-off styling), m3e-css checkbox.css (.m3e-checkbox with __input, __box, the SVG __mark with two __stroke paths, __state, __label; added to the state-layer / focus-ring lists and the ripple.js triggers), the m3e-elements <m3e-checkbox> entry (the indeterminate attribute, the previous state for the dash, the ripple; attachRipple gains an optional keys argument) and m3e-react <Checkbox isSelected defaultSelected onChange isIndeterminate isDisabled isInvalid isRequired>.

    m3e-cssm3e-elementsm3e-reactm3e-tokensm3exp-web bb0795e

  • Chips (M8, COMPONENT_SPEC §18; Compose FilterChip, ElevatedFilterChip, InputChip, SuggestionChip, ElevatedSuggestionChip): filter, input and suggestion chips on a chip base shared with the assist chip (.m3e-assist-chip and <AssistChip> are unchanged). Filter chips are a native checkbox in a label (.m3e-filter-chip, --elevated, --expressive; __input, __leading with the check icon that expands in when selected, __label); a flat filter chip rises to Level1 on hover, selected or not, as Compose's filterChipElevation. Input chips are rows of a grid (.m3e-input-chip, --expressive; __cell, __avatar, __label, __remove labelled "Remove <label>"). Suggestion chips are buttons or links (.m3e-suggestion-chip, --elevated). --expressive opts into Compose's shapes overload: ChipsTokens corners (12dp, full when selected, 8dp while pressed) morphing on the fast spatial spring, tonal colors and 4dp spacing next to icons. .m3e-chip-set lays chips out in 48dp rows (--single-line: one scrolling row). New components/chips-defaults.css tokens (the Chip.kt values Compose renders: spacing and padding, the flat filter chip's elevations, tonal colors, shape and icon motion, the chip group spacing). New m3e-elements <m3e-chip-set> entry (one tab stop and arrow keys between the chips; for input chips the grid wiring and Backspace / Delete or the remove button emitting a cancelable remove event) and chip-set-layout entry (ChipSetLayout); the ripple.js triggers include the new chips. New m3e-react <FilterChip>, <InputChipGroup> / <InputChip> (React Aria TagGroup), <SuggestionChip> and <ChipSet>; useShapeSpring gains an enabled option.

    m3e-cssm3e-elementsm3e-reactm3e-tokensm3exp-web b83f3b5

  • Lists (M8, COMPONENT_SPEC §20; Compose ListItem and SegmentedListItem): expressive list items with a headline, overline, supporting text and leading / trailing content in one, two or three lines; segmented items (Surface, 2dp apart, 16dp outer corners on the first and last items); interactive lists as a listbox of options (single and multiple selection, actionable options, checkbox / radio button / switch indicators) with the selected colors and the fast-spatial corner morph (4dp rest, 12dp hovered, 16dp focused / selected / pressed / dragged); the dragged style (ReorderListTokens, style only); and the legacy non-expressive list item, deprecated (D4). Arrow keys wrap (Down / Right next, Up / Left previous), with Home / End and typeahead. New components/list-defaults.css tokens (the ListItem.kt / ListItemDefaults.kt values Compose renders: padding, spacing, minimum heights, slot type styles, motion, state shapes, segmented corners and gap, shadows, content colors and the legacy paddings), m3e-css list.css, the m3e-elements <m3e-list> and list-layout entries, m3e-react <List>, <ListItem> (its headlineContent overload is the deprecated legacy item) and <SegmentedListItem> (React Aria useListBox / useOption). Shared helpers: RovingFocus gains a non-breaking wrap option and a both orientation (m3e-motion toolbarNavigationTarget(…, wrap), NavigationOrientation), the menu's typeahead moves to m3e-motion typeSelectTarget (React Aria's search; a miss now resets the typed string), and m3e-react's shape spring can drive the top and bottom corners separately.

    m3e-cssm3e-elementsm3e-motionm3e-reactm3e-tokensm3exp-web f1e2167

  • Radio button (M8, COMPONENT_SPEC §23; Compose RadioButton): native <input type="radio">s in a 48dp target with a 20dp ring, selected, unselected and disabled, grouped in a role="radiogroup" (or a fieldset) so arrow keys move the selection with no JavaScript. Selecting grows the dot on the fast spatial spring (it overshoots under the expressive scheme) while the ring and dot fade to primary on default effects; the state layer shows hover, focus and press in the content color, as Compose's ripple. New components/radio-button-defaults.css tokens (the RadioButton.kt values Compose renders and the RadioGroupSample rows), m3e-css radio-button.css (.m3e-radio-group with an optional --horizontal modifier, .m3e-radio-button with __input, __icon, __state, __label; added to the state-layer / focus-ring lists and the ripple.js triggers, Space only) and m3e-react <RadioGroup value defaultValue onChange orientation isDisabled isReadOnly isRequired name> with <Radio value isDisabled>. No custom element: native radios already select, submit and keyboard.

    m3e-cssm3e-elementsm3e-reactm3e-tokensm3exp-web 13d42fe

  • Slider (M8, COMPONENT_SPEC §25; Compose Slider, VerticalSlider, RangeSlider and SliderDefaults.CenteredTrack): standard, range (two thumbs that meet but never cross), centered and vertical (minimum at the bottom) sliders, continuous or with stops (ticks), in sizes XS (default), S, M, L and XL from the m3.material.io token DB, with an inset icon on M–XL standard sliders, end stop indicators and a value indicator while dragged or keyboard focused; pressing, dragging or keyboard focus halves the handle at once. New components/slider-defaults.css tokens (the Slider.kt values Compose renders, the per-size track, handle, corner and icon values, the value indicator container), m3e-css slider.css (.m3e-slider drawn from --m3e-comp-slider-value, --m3e-comp-slider-start-value and --m3e-comp-slider-steps; the focus ring around the handle), m3e-motion slider math (steps, snapping, thumb bounds, Compose's key steps and pages, the drawTrack geometry), the m3e-elements <m3e-slider> entry (pointer, keyboard, input / change events) and slider-layout entry, and m3e-react <Slider> / <RangeSlider> (React Aria useSlider / useSliderThumb).

    m3e-cssm3e-elementsm3e-motionm3e-reactm3e-tokensm3exp-web 1c7b296

  • Switch (M8, COMPONENT_SPEC §24; Compose Switch): a native <input type="checkbox" role="switch"> with a 52 × 32dp track in a 48dp-high target, checked, unchecked and disabled, with optional icons in the handle. Pressing snaps the handle to 28dp (Compose SnapSpec) and releasing springs it back, or across when the press toggles, on the fast spatial spring; colors do not animate, and disabled colors are composited over surface as Compose does. Space toggles (Enter does not) with no JavaScript, and the state layer shows hover, focus and press around the handle in the content color. New components/switch-defaults.css tokens (the Switch.kt values Compose renders), m3e-css switch.css (.m3e-switch with __input, __track, __handle, __icon (--checked / --unchecked), __state, __label; added to the state-layer / focus-ring lists and the ripple.js triggers, Space only) and m3e-react <Switch isSelected defaultSelected onChange isDisabled isReadOnly checkedIcon uncheckedIcon labelPosition name value>. No custom element: the native input and CSS cover the behavior.

    m3e-cssm3e-elementsm3e-reactm3e-tokensm3exp-web 0d00761

  • Text fields (M8, COMPONENT_SPEC §26; Compose TextField and OutlinedTextField): filled and outlined fields on a native <input> or (multi-line) <textarea> with a <label for>, leading / trailing icons, prefix / suffix, placeholder, supporting text, a character counter, error (aria-invalid), disabled and read-only states, and the Inside, Cutout and Above label positions. The label floats with no JavaScript (:focus / :not(:placeholder-shown)), its type style lerped from body large to body small on the fast spatial spring as Compose lerps the label TextStyle; the outlined notch is a fieldset legend (writing direction and forced colors included). New components/text-field-defaults.css tokens (the TextField.kt / OutlinedTextField.kt / TextFieldDefaults / TextFieldImpl.kt values Compose renders: paddings, min sizes, indicator and outline thicknesses, the cutout, type styles, motion, both color sets and the selection color), m3e-css text-field.css, the m3e-elements <m3e-text-field> entry (live counter, textarea growth where field-sizing is missing) and text-field-layout entry, and m3e-react <TextField> (React Aria useTextField).

    m3e-cssm3e-elementsm3e-reactm3e-tokensm3exp-web ef956b7

Patch changes

  • Checkbox: an unchecked checkbox now shows a state layer on hover, focus and press. With the flag-on styling Compose ripples in the box color, which is transparent while unchecked; by owner decision the unchecked states use the m3.material.io token DB colors instead (md.comp.checkbox.unselected.{hover,focus}.state-layer.color on-surface, unselected.pressed primary; with aria-invalid the error.* colors, error), at the existing state layer opacities. New components/checkbox-defaults.css tokens --m3e-comp-checkbox-state-layer-color-{unselected,error}-{hover,focus,pressed}. Checked and indeterminate checkboxes are unchanged (the box color).

    m3e-cssm3e-elementsm3e-reactm3e-tokensm3exp-web 8a7e6a5