Skip to content
m3exp-web
System Light Dark

Changelog

1.4.0

Minor changes

  • Docked toolbar (M6, COMPONENT_SPEC §10; Compose FlexibleBottomAppBar): spread, center, space-around and space-evenly arrangements, standard and vibrant colors, exit-on-scroll on the fast spatial snap spring. New components/docked-toolbar-defaults.css and components/bottom-app-bar-defaults.css tokens (the BottomAppBarDefaults values Compose renders), m3e-css docked-toolbar.css, m3e-elements <m3e-docked-toolbar> plus the docked-toolbar-layout.js (DockedToolbarLayout) entry, and m3e-react <DockedToolbar>. The legacy bottom app bar ships deprecated (D4): m3e-css bottom-app-bar.css and m3e-react <BottomAppBar> (one-time dev warning). The exit-always scroll code is now shared by the floating toolbar, the docked toolbar and the top app bar (no behavior change).

    m3e-cssm3e-elementsm3e-motionm3e-reactm3e-tokensm3exp-web 8a15a95

  • Floating toolbar (M6, COMPONENT_SPEC §9): horizontal and vertical, standard and vibrant, with a FAB, expanded/collapsed and exit-on-scroll. New components/floating-toolbar-defaults.css tokens (the FloatingToolbarDefaults values Compose renders), m3e-css floating-toolbar.css, m3e-motion floating toolbar scroll math and toolbarNavigationTarget, m3e-elements <m3e-floating-toolbar> plus the floating-toolbar-layout.js (FloatingToolbarLayout) and roving-focus.js (RovingFocus) entries, and m3e-react <FloatingToolbar>.

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

  • Progress indicators (COMPONENT_SPEC §8): linear and circular, flat and wavy, determinate and indeterminate, default (4dp) and thick (8dp). m3e-css linear-progress.css / circular-progress.css: flat indicators in CSS only (the value is --m3e-comp-progress-indicator-value, 0–1; indeterminate lines and arcs run Compose's keyframes), modifiers --wavy, --thick. m3e-elements: <m3e-linear-progress> / <m3e-circular-progress> (value, shape, thickness, amplitude, wavelength, wave-speed, label) and the shared @kyralabs/m3e-elements/progress-indicator.js drivers: values spring on ProgressIndicatorDefaults.ProgressAnimationSpec with their velocity kept, wavy indicators draw Compose's wave (linear quadratic wave, circular star morphed from a circle) every frame, travelling one wavelength per second, with the determinate amplitude ramp. m3e-react: <LinearProgress> / <CircularProgress> with the same props. m3e-tokens: components/progress-indicator-defaults.css (the ProgressIndicator / WavyProgressIndicator values Compose renders that are not in the token files, and the indeterminate keyframes). m3e-motion: cubicBezier, the progress timelines and AmplitudeAnimation. m3e-shapes: PathMeasure, LinearWavyPathCache, CircularWavyPathCache and Q path commands.

    m3e-cssm3e-elementsm3e-motionm3e-reactm3e-shapesm3e-tokensm3exp-web fb3fa26

  • Search (M6, COMPONENT_SPEC §12; Compose SearchBar, SearchBarDefaults.InputField, AppBarWithSearch and the four expanded views): the collapsed search bar, the full-screen, full-screen contained, docked and docked-with-gap expanded views (expand / collapse on Compose's SearchBarState springs and fades, interruptible), the ARIA combobox (virtual focus over a results listbox), light dismiss and the full-screen focus trap, and AppBarWithSearch with its enter-always scroll behavior and scrolled colors. New components/search-defaults.css tokens (the SearchBarDefaults / SearchBar.kt values Compose renders), m3e-css search.css, m3e-motion SearchBarAnimation, searchViewFrame and searchNavigationTarget, m3e-elements <m3e-search> / <m3e-search-result> plus the search-layout.js (SearchLayout) entry, and m3e-react <SearchBar>, <SearchResult> and <AppBarWithSearch>.

    m3e-cssm3e-elementsm3e-motionm3e-reactm3e-tokensm3exp-web 0cda9f5

  • Top app bars (M6, COMPONENT_SPEC §11): center-aligned (Compose CenterAlignedTopAppBar, or any bar with titleHorizontalAlignment center), medium and large flexible (MediumFlexibleTopAppBar, LargeFlexibleTopAppBar, with title + subtitle) and two-rows (TwoRowsTopAppBar: custom heights, per-row titles), plus the exit-until-collapsed scroll behavior: the expanded row collapses with the scroll to the 64dp small bar, the titles crossfade and the container color follows the collapsed fraction, as Compose computes them. components/top-app-bar-defaults.css gains the TopAppBarDefaults heights, the title bottom paddings, the snap spring and the two-rows easings; m3e-css adds .m3e-top-app-bar--center-aligned, --medium-flexible, --large-flexible, --two-rows and the __expanded part; m3e-motion adds exit-until-collapsed to scrollAppBar and twoRowsFrame (on the shared cubicBezier); attachTopAppBarScroll accepts behavior: 'exit-until-collapsed' and drives two-rows bars; <TopAppBar> accepts variant 'center-aligned' | 'medium-flexible' | 'large-flexible' | 'two-rows', titleHorizontalAlignment, collapsedHeight / expandedHeight and per-row title / subtitle functions. The small bar's DOM and classes are unchanged; its snap now jumps under prefers-reduced-motion (spatial motion off, CAC) and reads the generated --m3e-comp-top-app-bar-snap-* spring (still default effects).

    m3e-cssm3e-elementsm3e-motionm3e-reactm3e-tokensm3exp-web 38b31d0