@windmorph/react 0.0.0-stage → 0.1.0

package/dist/components/app-bar/app-bar-styles.d.ts

@@ -0,0 +1,280 @@
+import { VariantProps } from "../../utils/tv.js";
+//#region src/components/app-bar/app-bar-styles.d.ts
+/** Variant definitions for {@link TopAppBar}; extend them to add variants. */
+export declare const topAppBarStyles: import("tailwind-variants").TVReturnType<{
+  variant: {
+    small: {
+      titleText: string;
+      subtitleText: string;
+    };
+    medium: {
+      titleText: string;
+      subtitleText: string;
+      expandedTitle: string;
+      expandedSubtitle: string;
+    };
+    large: {
+      titleText: string;
+      subtitleText: string;
+      expandedTitle: string;
+      expandedSubtitle: string;
+    };
+  };
+  titleAlign: {
+    start: {
+      row: string;
+      title: string;
+    };
+    center: {
+      row: string;
+      title: string;
+      expandedRow: string;
+    };
+  };
+  hasNavigation: {
+    true: {};
+    false: {
+      title: string;
+    };
+  };
+  hasSubtitle: {
+    true: {};
+    false: {};
+  };
+  /**
+   * Set for `scrollBehavior="pinned"`: a two-row bar never collapses, so it changes colour
+   * as a whole once content scrolls under it, like a single row.
+   */
+  pinned: {
+    true: {};
+    false: {};
+  };
+  /**
+   * The colour content scrolls under: `surface-container`, or `transparent` (the bar fades
+   * from `surface` to see-through).
+   */
+  scrolledColor: {
+    container: {};
+    transparent: {
+      root: string;
+    };
+  };
+  /** Set when the bar responds to scrolling: it sticks, and its offset follows the scroll. */
+  scrolling: {
+    true: {
+      root: string;
+    };
+    false: {};
+  };
+  twoRows: {
+    true: {
+      row: string;
+      titleText: string;
+      subtitleText: string;
+      expandedRow: string;
+    };
+    false: {
+      root: string[];
+      row: string;
+    };
+  };
+}, {
+  root: string[];
+  row: string[];
+  navigation: string;
+  title: string;
+  titleText: string;
+  subtitleText: string;
+  actions: string;
+  expandedRow: string;
+  expandedTitle: string;
+  expandedSubtitle: string;
+  bottom: string;
+}, undefined, {
+  variant: {
+    small: {
+      titleText: string;
+      subtitleText: string;
+    };
+    medium: {
+      titleText: string;
+      subtitleText: string;
+      expandedTitle: string;
+      expandedSubtitle: string;
+    };
+    large: {
+      titleText: string;
+      subtitleText: string;
+      expandedTitle: string;
+      expandedSubtitle: string;
+    };
+  };
+  titleAlign: {
+    start: {
+      row: string;
+      title: string;
+    };
+    center: {
+      row: string;
+      title: string;
+      expandedRow: string;
+    };
+  };
+  hasNavigation: {
+    true: {};
+    false: {
+      title: string;
+    };
+  };
+  hasSubtitle: {
+    true: {};
+    false: {};
+  };
+  /**
+   * Set for `scrollBehavior="pinned"`: a two-row bar never collapses, so it changes colour
+   * as a whole once content scrolls under it, like a single row.
+   */
+  pinned: {
+    true: {};
+    false: {};
+  };
+  /**
+   * The colour content scrolls under: `surface-container`, or `transparent` (the bar fades
+   * from `surface` to see-through).
+   */
+  scrolledColor: {
+    container: {};
+    transparent: {
+      root: string;
+    };
+  };
+  /** Set when the bar responds to scrolling: it sticks, and its offset follows the scroll. */
+  scrolling: {
+    true: {
+      root: string;
+    };
+    false: {};
+  };
+  twoRows: {
+    true: {
+      row: string;
+      titleText: string;
+      subtitleText: string;
+      expandedRow: string;
+    };
+    false: {
+      root: string[];
+      row: string;
+    };
+  };
+}, {
+  root: string[];
+  row: string[];
+  navigation: string;
+  title: string;
+  titleText: string;
+  subtitleText: string;
+  actions: string;
+  expandedRow: string;
+  expandedTitle: string;
+  expandedSubtitle: string;
+  bottom: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  variant: {
+    small: {
+      titleText: string;
+      subtitleText: string;
+    };
+    medium: {
+      titleText: string;
+      subtitleText: string;
+      expandedTitle: string;
+      expandedSubtitle: string;
+    };
+    large: {
+      titleText: string;
+      subtitleText: string;
+      expandedTitle: string;
+      expandedSubtitle: string;
+    };
+  };
+  titleAlign: {
+    start: {
+      row: string;
+      title: string;
+    };
+    center: {
+      row: string;
+      title: string;
+      expandedRow: string;
+    };
+  };
+  hasNavigation: {
+    true: {};
+    false: {
+      title: string;
+    };
+  };
+  hasSubtitle: {
+    true: {};
+    false: {};
+  };
+  /**
+   * Set for `scrollBehavior="pinned"`: a two-row bar never collapses, so it changes colour
+   * as a whole once content scrolls under it, like a single row.
+   */
+  pinned: {
+    true: {};
+    false: {};
+  };
+  /**
+   * The colour content scrolls under: `surface-container`, or `transparent` (the bar fades
+   * from `surface` to see-through).
+   */
+  scrolledColor: {
+    container: {};
+    transparent: {
+      root: string;
+    };
+  };
+  /** Set when the bar responds to scrolling: it sticks, and its offset follows the scroll. */
+  scrolling: {
+    true: {
+      root: string;
+    };
+    false: {};
+  };
+  twoRows: {
+    true: {
+      row: string;
+      titleText: string;
+      subtitleText: string;
+      expandedRow: string;
+    };
+    false: {
+      root: string[];
+      row: string;
+    };
+  };
+}, {
+  root: string[];
+  row: string[];
+  navigation: string;
+  title: string;
+  titleText: string;
+  subtitleText: string;
+  actions: string;
+  expandedRow: string;
+  expandedTitle: string;
+  expandedSubtitle: string;
+  bottom: string;
+}>>;
+/**
+ * The variants of {@link topAppBarStyles}, for building on its styles. They are the recipe's keys, not
+ * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.
+ */
+export type TopAppBarStyleProps = VariantProps<typeof topAppBarStyles>;
+export type TopAppBarVariant = NonNullable<TopAppBarStyleProps['variant']>;
+export type TopAppBarTitleAlign = NonNullable<TopAppBarStyleProps['titleAlign']>;
+//#endregion
+//# sourceMappingURL=app-bar-styles.d.ts.map

package/dist/components/app-bar/app-bar-styles.js

@@ -0,0 +1,142 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/app-bar/app-bar-styles.ts
+/** Variant definitions for {@link TopAppBar}; extend them to add variants. */
+const topAppBarStyles = tv({
+	slots: {
+		root: ["flex w-full flex-col text-on-surface", "bg-[var(--_md-comp-app-bar-container-color-blend)]"],
+		row: ["grid min-h-[64px] shrink-0 items-center", "bg-[var(--_md-comp-app-bar-container-color-blend)]"],
+		navigation: "col-start-1 flex items-center ps-[8px] pe-[4px] text-[color:var(--_md-comp-app-bar-leading-icon-color)] [--md-comp-icon-button-icon-color:currentColor]",
+		title: "col-start-2 flex min-w-0 flex-col ps-[4px] pe-[4px]",
+		titleText: "truncate text-[color:var(--_md-comp-app-bar-title-color)]",
+		subtitleText: "truncate text-[color:var(--_md-comp-app-bar-subtitle-color)]",
+		actions: "col-start-3 flex items-center justify-end gap-[8px] ps-[4px] pe-[8px] text-[color:var(--_md-comp-app-bar-trailing-icon-color)] [--md-comp-icon-button-icon-color:currentColor]",
+		expandedRow: "flex flex-col ps-[16px] pe-[16px]",
+		expandedTitle: "line-clamp-2 text-[color:var(--_md-comp-app-bar-title-color)]",
+		expandedSubtitle: "text-[color:var(--_md-comp-app-bar-subtitle-color)]",
+		bottom: "flex min-w-0 shrink-0 flex-col"
+	},
+	variants: {
+		variant: {
+			small: {
+				titleText: "text-title-large",
+				subtitleText: "text-label-medium"
+			},
+			medium: {
+				titleText: "text-title-large",
+				subtitleText: "text-label-medium",
+				expandedTitle: "text-headline-medium",
+				expandedSubtitle: "text-label-large"
+			},
+			large: {
+				titleText: "text-title-large",
+				subtitleText: "text-label-medium",
+				expandedTitle: "text-display-small",
+				expandedSubtitle: "text-title-medium"
+			}
+		},
+		titleAlign: {
+			start: {
+				row: "grid-cols-[auto_minmax(0,1fr)_auto]",
+				title: "items-start"
+			},
+			center: {
+				row: "grid-cols-[minmax(max-content,1fr)_auto_minmax(max-content,1fr)]",
+				title: "items-center text-center",
+				expandedRow: "items-center text-center"
+			}
+		},
+		hasNavigation: {
+			true: {},
+			false: { title: "ps-[16px]" }
+		},
+		hasSubtitle: {
+			true: {},
+			false: {}
+		},
+		/**
+		* Set for `scrollBehavior="pinned"`: a two-row bar never collapses, so it changes colour
+		* as a whole once content scrolls under it, like a single row.
+		*/
+		pinned: {
+			true: {},
+			false: {}
+		},
+		/**
+		* The colour content scrolls under: `surface-container`, or `transparent` (the bar fades
+		* from `surface` to see-through).
+		*/
+		scrolledColor: {
+			container: {},
+			transparent: { root: "[--m3-app-bar-scrolled-color:transparent]" }
+		},
+		/** Set when the bar responds to scrolling: it sticks, and its offset follows the scroll. */
+		scrolling: {
+			true: { root: "sticky top-(--m3-app-bar-offset) z-(--md-sys-z-sticky)" },
+			false: {}
+		},
+		twoRows: {
+			true: {
+				row: "sticky top-0",
+				titleText: "opacity-[var(--m3-app-bar-top-alpha,0)]",
+				subtitleText: "opacity-[var(--m3-app-bar-top-alpha,0)]",
+				expandedRow: "opacity-[var(--m3-app-bar-bottom-alpha,1)] [clip-path:inset(var(--m3-app-bar-collapse,0px)_0_0_0)]"
+			},
+			false: {
+				root: [
+					"[transition-property:background-color]",
+					"[transition-duration:var(--md-sys-motion-spring-effects-default-duration)]",
+					"[transition-timing-function:var(--md-sys-motion-spring-effects-default-easing)]"
+				],
+				row: "bg-transparent"
+			}
+		}
+	},
+	compoundVariants: [
+		{
+			twoRows: true,
+			pinned: true,
+			class: {
+				root: [
+					"[transition-property:background-color]",
+					"[transition-duration:var(--md-sys-motion-spring-effects-default-duration)]",
+					"[transition-timing-function:var(--md-sys-motion-spring-effects-default-easing)]"
+				],
+				row: "bg-transparent"
+			}
+		},
+		{
+			variant: "medium",
+			hasSubtitle: false,
+			class: { expandedRow: "min-h-[48px]" }
+		},
+		{
+			variant: "medium",
+			hasSubtitle: true,
+			class: { expandedRow: "min-h-[72px]" }
+		},
+		{
+			variant: "large",
+			hasSubtitle: false,
+			class: { expandedRow: "min-h-[56px]" }
+		},
+		{
+			variant: "large",
+			hasSubtitle: true,
+			class: { expandedRow: "min-h-[88px]" }
+		}
+	],
+	defaultVariants: {
+		variant: "small",
+		titleAlign: "start",
+		hasNavigation: false,
+		hasSubtitle: false,
+		scrolling: false,
+		pinned: false,
+		twoRows: false,
+		scrolledColor: "container"
+	}
+});
+//#endregion
+export { topAppBarStyles };
+
+//# sourceMappingURL=app-bar-styles.js.map

package/dist/components/app-bar/app-bar-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-bar-styles.js","names":[],"sources":["../../../src/components/app-bar/app-bar-styles.ts"],"sourcesContent":["import { tv, type VariantProps } from '../../utils/tv';\n\n/*\n * Values follow Compose Material 3 (AppBar.kt: TopAppBar, MediumFlexibleTopAppBar,\n * LargeFlexibleTopAppBar, TopAppBarLayout; AppBar / AppBarSmall / AppBarMediumFlexible /\n * AppBarLargeFlexible tokens).\n *\n * Container `surface`, turning `surface-container` when content scrolls under it (a single\n * row, or a pinned two-row bar: animated on the default effects spring) or as a two-row bar\n * collapses (blended in Oklab with fast-out-linear-in, as Compose's lerp), or turning\n * see-through with `scrolledColor=\"transparent\"`. No elevation.\n *\n * Rows: the top row is 64px. Navigation icon `on-surface`, title `on-surface`, subtitle and\n * actions `on-surface-variant`. Compose's icon buttons take 48px of layout and ours 40px,\n * so the slots add Compose's 4px of slack: the navigation icon sits 8px from the start, the\n * title 56px after it (16px with no icon), and the actions 8px apart and 8px from the end.\n *\n * Two-row bars add a bottom row of expanded height − 64px: medium 48px (72px with a\n * subtitle), large 56px (88px). Compose places the title 24px / 28px above the row's\n * bottom by its baseline, but with the M3 type scale that padding is always clamped, which\n * puts the title at the top of the row, and the row grows to fit a wrapped title. That is\n * reproduced exactly by top-aligning it in a min-height row.\n *\n * Colours come from the app bar's component tokens (`app-bar-tokens.ts`,\n * `--md-comp-app-bar-*`): the root carries `data-tokens=\"md-comp-app-bar\"`, and the\n * container reads the blend of the resting and on-scroll colours. A consumer class still\n * wins in `cn()`.\n *\n * Every class is written out in full so Tailwind can find it.\n */\n\n/** Variant definitions for {@link TopAppBar}; extend them to add variants. */\nexport const topAppBarStyles = tv({\n  slots: {\n    root: [\n      'flex w-full flex-col text-on-surface',\n      'bg-[var(--_md-comp-app-bar-container-color-blend)]',\n    ],\n    // The top row: navigation icon, title and actions.\n    row: [\n      'grid min-h-[64px] shrink-0 items-center',\n      'bg-[var(--_md-comp-app-bar-container-color-blend)]',\n    ],\n    // Icon buttons take each slot's content colour.\n    navigation:\n      'col-start-1 flex items-center ps-[8px] pe-[4px] text-[color:var(--_md-comp-app-bar-leading-icon-color)] [--md-comp-icon-button-icon-color:currentColor]',\n    title: 'col-start-2 flex min-w-0 flex-col ps-[4px] pe-[4px]',\n    titleText: 'truncate text-[color:var(--_md-comp-app-bar-title-color)]',\n    subtitleText: 'truncate text-[color:var(--_md-comp-app-bar-subtitle-color)]',\n    actions:\n      'col-start-3 flex items-center justify-end gap-[8px] ps-[4px] pe-[8px] text-[color:var(--_md-comp-app-bar-trailing-icon-color)] [--md-comp-icon-button-icon-color:currentColor]',\n    // Two-row bars: the expanded title row.\n    expandedRow: 'flex flex-col ps-[16px] pe-[16px]',\n    // M3: a long headline wraps to two lines at most.\n    expandedTitle: 'line-clamp-2 text-[color:var(--_md-comp-app-bar-title-color)]',\n    expandedSubtitle: 'text-[color:var(--_md-comp-app-bar-subtitle-color)]',\n    // The accessory row (`bottom`): on the bar's colour, laid out by its content.\n    bottom: 'flex min-w-0 shrink-0 flex-col',\n  },\n  variants: {\n    variant: {\n      small: {\n        titleText: 'text-title-large',\n        subtitleText: 'text-label-medium',\n      },\n      medium: {\n        titleText: 'text-title-large',\n        subtitleText: 'text-label-medium',\n        expandedTitle: 'text-headline-medium',\n        expandedSubtitle: 'text-label-large',\n      },\n      large: {\n        titleText: 'text-title-large',\n        subtitleText: 'text-label-medium',\n        expandedTitle: 'text-display-small',\n        expandedSubtitle: 'text-title-medium',\n      },\n    },\n    titleAlign: {\n      // The title column takes the free space after the navigation icon.\n      start: { row: 'grid-cols-[auto_minmax(0,1fr)_auto]', title: 'items-start' },\n      // Equal side columns centre the title in the whole bar until a side needs more room.\n      center: {\n        row: 'grid-cols-[minmax(max-content,1fr)_auto_minmax(max-content,1fr)]',\n        title: 'items-center text-center',\n        expandedRow: 'items-center text-center',\n      },\n    },\n    hasNavigation: {\n      true: {},\n      false: { title: 'ps-[16px]' },\n    },\n    hasSubtitle: { true: {}, false: {} },\n    /**\n     * Set for `scrollBehavior=\"pinned\"`: a two-row bar never collapses, so it changes colour\n     * as a whole once content scrolls under it, like a single row.\n     */\n    pinned: { true: {}, false: {} },\n    /**\n     * The colour content scrolls under: `surface-container`, or `transparent` (the bar fades\n     * from `surface` to see-through).\n     */\n    scrolledColor: {\n      container: {},\n      transparent: { root: '[--m3-app-bar-scrolled-color:transparent]' },\n    },\n    /** Set when the bar responds to scrolling: it sticks, and its offset follows the scroll. */\n    scrolling: {\n      true: { root: 'sticky top-(--m3-app-bar-offset) z-(--md-sys-z-sticky)' },\n      false: {},\n    },\n    twoRows: {\n      true: {\n        // The top row stays put while the expanded row scrolls up beneath it.\n        row: 'sticky top-0',\n        titleText: 'opacity-[var(--m3-app-bar-top-alpha,0)]',\n        subtitleText: 'opacity-[var(--m3-app-bar-top-alpha,0)]',\n        // Clipped to the part not yet under the top row (`--m3-app-bar-collapse`, from the\n        // scroll), so it doesn't show through a see-through top row.\n        expandedRow:\n          'opacity-[var(--m3-app-bar-bottom-alpha,1)] [clip-path:inset(var(--m3-app-bar-collapse,0px)_0_0_0)]',\n      },\n      // A single row changes colour as a whole once content scrolls under it.\n      false: {\n        root: [\n          '[transition-property:background-color]',\n          '[transition-duration:var(--md-sys-motion-spring-effects-default-duration)]',\n          '[transition-timing-function:var(--md-sys-motion-spring-effects-default-easing)]',\n        ],\n        row: 'bg-transparent',\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      twoRows: true,\n      pinned: true,\n      class: {\n        root: [\n          '[transition-property:background-color]',\n          '[transition-duration:var(--md-sys-motion-spring-effects-default-duration)]',\n          '[transition-timing-function:var(--md-sys-motion-spring-effects-default-easing)]',\n        ],\n        row: 'bg-transparent',\n      },\n    },\n    { variant: 'medium', hasSubtitle: false, class: { expandedRow: 'min-h-[48px]' } },\n    { variant: 'medium', hasSubtitle: true, class: { expandedRow: 'min-h-[72px]' } },\n    { variant: 'large', hasSubtitle: false, class: { expandedRow: 'min-h-[56px]' } },\n    { variant: 'large', hasSubtitle: true, class: { expandedRow: 'min-h-[88px]' } },\n  ],\n  defaultVariants: {\n    variant: 'small',\n    titleAlign: 'start',\n    hasNavigation: false,\n    hasSubtitle: false,\n    scrolling: false,\n    pinned: false,\n    twoRows: false,\n    scrolledColor: 'container',\n  },\n});\n\n/**\n * The variants of {@link topAppBarStyles}, for building on its styles. They are the recipe's keys, not\n * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.\n */\nexport type TopAppBarStyleProps = VariantProps<typeof topAppBarStyles>;\nexport type TopAppBarVariant = NonNullable<TopAppBarStyleProps['variant']>;\nexport type TopAppBarTitleAlign = NonNullable<TopAppBarStyleProps['titleAlign']>;\n"],"mappings":";;;AAgCA,MAAa,kBAAkB,GAAG;CAChC,OAAO;EACL,MAAM,CACJ,wCACA,oDACF;EAEA,KAAK,CACH,2CACA,oDACF;EAEA,YACE;EACF,OAAO;EACP,WAAW;EACX,cAAc;EACd,SACE;EAEF,aAAa;EAEb,eAAe;EACf,kBAAkB;EAElB,QAAQ;CACV;CACA,UAAU;EACR,SAAS;GACP,OAAO;IACL,WAAW;IACX,cAAc;GAChB;GACA,QAAQ;IACN,WAAW;IACX,cAAc;IACd,eAAe;IACf,kBAAkB;GACpB;GACA,OAAO;IACL,WAAW;IACX,cAAc;IACd,eAAe;IACf,kBAAkB;GACpB;EACF;EACA,YAAY;GAEV,OAAO;IAAE,KAAK;IAAuC,OAAO;GAAc;GAE1E,QAAQ;IACN,KAAK;IACL,OAAO;IACP,aAAa;GACf;EACF;EACA,eAAe;GACb,MAAM,CAAC;GACP,OAAO,EAAE,OAAO,YAAY;EAC9B;EACA,aAAa;GAAE,MAAM,CAAC;GAAG,OAAO,CAAC;EAAE;;;;;EAKnC,QAAQ;GAAE,MAAM,CAAC;GAAG,OAAO,CAAC;EAAE;;;;;EAK9B,eAAe;GACb,WAAW,CAAC;GACZ,aAAa,EAAE,MAAM,4CAA4C;EACnE;;EAEA,WAAW;GACT,MAAM,EAAE,MAAM,yDAAyD;GACvE,OAAO,CAAC;EACV;EACA,SAAS;GACP,MAAM;IAEJ,KAAK;IACL,WAAW;IACX,cAAc;IAGd,aACE;GACJ;GAEA,OAAO;IACL,MAAM;KACJ;KACA;KACA;IACF;IACA,KAAK;GACP;EACF;CACF;CACA,kBAAkB;EAChB;GACE,SAAS;GACT,QAAQ;GACR,OAAO;IACL,MAAM;KACJ;KACA;KACA;IACF;IACA,KAAK;GACP;EACF;EACA;GAAE,SAAS;GAAU,aAAa;GAAO,OAAO,EAAE,aAAa,eAAe;EAAE;EAChF;GAAE,SAAS;GAAU,aAAa;GAAM,OAAO,EAAE,aAAa,eAAe;EAAE;EAC/E;GAAE,SAAS;GAAS,aAAa;GAAO,OAAO,EAAE,aAAa,eAAe;EAAE;EAC/E;GAAE,SAAS;GAAS,aAAa;GAAM,OAAO,EAAE,aAAa,eAAe;EAAE;CAChF;CACA,iBAAiB;EACf,SAAS;EACT,YAAY;EACZ,eAAe;EACf,aAAa;EACb,WAAW;EACX,QAAQ;EACR,SAAS;EACT,eAAe;CACjB;AACF,CAAC"}

package/dist/components/app-bar/app-bar-tokens.d.ts

@@ -0,0 +1,7 @@
+import { ComponentTokenSet } from "../../tokens/component.js";
+import "../../index.js";
+//#region src/components/app-bar/app-bar-tokens.d.ts
+/** The tokens of {@link TopAppBar} and {@link SearchAppBar}: `--md-comp-app-bar-<part>`. */
+export declare const appBarTokenSet: ComponentTokenSet<"container-color" | "leading-icon-color" | "trailing-icon-color" | "title-color" | "subtitle-color" | "on-scroll-container-color">;
+//#endregion
+//# sourceMappingURL=app-bar-tokens.d.ts.map

package/dist/components/app-bar/app-bar-tokens.js

@@ -0,0 +1,64 @@
+import { color, defineComponentTokens } from "../../tokens/component.js";
+//#region src/components/app-bar/app-bar-tokens.ts
+/** The tokens of {@link TopAppBar} and {@link SearchAppBar}: `--md-comp-app-bar-<part>`. */
+const appBarTokenSet = defineComponentTokens({
+	name: "md-comp-app-bar",
+	tokens: {
+		"title-color": {
+			value: color("on-surface"),
+			description: "The title.",
+			compose: "AppBarTokens.TitleColor",
+			paints: {
+				property: "color",
+				slot: "title"
+			}
+		},
+		"subtitle-color": {
+			value: color("on-surface-variant"),
+			description: "The subtitle.",
+			compose: "AppBarTokens.SubtitleColor",
+			paints: {
+				property: "color",
+				slot: "subtitle"
+			}
+		},
+		"leading-icon-color": {
+			value: color("on-surface"),
+			description: "The navigation icon.",
+			compose: "AppBarTokens.LeadingIconColor",
+			paints: {
+				property: "color",
+				slot: "navigation"
+			}
+		},
+		"trailing-icon-color": {
+			value: color("on-surface-variant"),
+			description: "The actions.",
+			compose: "AppBarTokens.TrailingIconColor",
+			paints: {
+				property: "color",
+				slot: "actions"
+			}
+		},
+		"container-color": {
+			value: color("surface"),
+			description: "The bar, with nothing scrolled under it.",
+			compose: "AppBarTokens.ContainerColor",
+			paints: { property: "background-color" }
+		},
+		"on-scroll-container-color": {
+			value: color("surface-container"),
+			description: "The bar once content scrolls under it.",
+			compose: "AppBarTokens.OnScrollContainerColor",
+			paints: {
+				property: "background-color",
+				state: "scrolled"
+			}
+		}
+	},
+	derived: { "container-color-blend": "color-mix(in oklab, var(--m3-app-bar-scrolled-color, var(--_md-comp-app-bar-on-scroll-container-color)) var(--m3-app-bar-scrolled, 0%), var(--_md-comp-app-bar-container-color))" }
+});
+//#endregion
+export { appBarTokenSet };
+
+//# sourceMappingURL=app-bar-tokens.js.map

package/dist/components/app-bar/app-bar-tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-bar-tokens.js","names":[],"sources":["../../../src/components/app-bar/app-bar-tokens.ts"],"sourcesContent":["import { color, defineComponentTokens } from '../../tokens/component';\n\n/*\n * The app bar's component tokens, M3 Expressive's `md.comp.app-bar.*` names (checked against\n * m3.material.io's token tables, 2026-10-14; `top-app-bar` is the deprecated set), with the\n * defaults of `app-bar-styles.ts`. Read by TopAppBar and SearchAppBar, whose roots carry\n * `data-tokens=\"md-comp-app-bar\"`.\n *\n * The container blends from `container-color` to `on-scroll-container-color` as content\n * scrolls under the bar (`container-color-blend`, worked out here so no class puts a private\n * variable after a comma). The icon tokens colour their slot, which standard and outlined\n * icon buttons follow (`--md-comp-icon-button-icon-color: currentColor`).\n */\n\n/** The tokens of {@link TopAppBar} and {@link SearchAppBar}: `--md-comp-app-bar-<part>`. */\nexport const appBarTokenSet = defineComponentTokens({\n  name: 'md-comp-app-bar',\n  tokens: {\n    'title-color': {\n      value: color('on-surface'),\n      description: 'The title.',\n      compose: 'AppBarTokens.TitleColor',\n      paints: { property: 'color', slot: 'title' },\n    },\n    'subtitle-color': {\n      value: color('on-surface-variant'),\n      description: 'The subtitle.',\n      compose: 'AppBarTokens.SubtitleColor',\n      paints: { property: 'color', slot: 'subtitle' },\n    },\n    'leading-icon-color': {\n      value: color('on-surface'),\n      description: 'The navigation icon.',\n      compose: 'AppBarTokens.LeadingIconColor',\n      paints: { property: 'color', slot: 'navigation' },\n    },\n    'trailing-icon-color': {\n      value: color('on-surface-variant'),\n      description: 'The actions.',\n      compose: 'AppBarTokens.TrailingIconColor',\n      paints: { property: 'color', slot: 'actions' },\n    },\n    'container-color': {\n      value: color('surface'),\n      description: 'The bar, with nothing scrolled under it.',\n      compose: 'AppBarTokens.ContainerColor',\n      paints: { property: 'background-color' },\n    },\n    'on-scroll-container-color': {\n      value: color('surface-container'),\n      description: 'The bar once content scrolls under it.',\n      compose: 'AppBarTokens.OnScrollContainerColor',\n      paints: { property: 'background-color', state: 'scrolled' },\n    },\n  },\n  derived: {\n    // `--m3-app-bar-scrolled` (0–100%, set on the root) blends the two; with\n    // `scrolledColor=\"transparent\"`, `--m3-app-bar-scrolled-color` replaces the scrolled one.\n    'container-color-blend':\n      'color-mix(in oklab, var(--m3-app-bar-scrolled-color, var(--_md-comp-app-bar-on-scroll-container-color)) var(--m3-app-bar-scrolled, 0%), var(--_md-comp-app-bar-container-color))',\n  },\n});\n"],"mappings":";;;AAeA,MAAa,iBAAiB,sBAAsB;CAClD,MAAM;CACN,QAAQ;EACN,eAAe;GACb,OAAO,MAAM,YAAY;GACzB,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAS,MAAM;GAAQ;EAC7C;EACA,kBAAkB;GAChB,OAAO,MAAM,oBAAoB;GACjC,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAS,MAAM;GAAW;EAChD;EACA,sBAAsB;GACpB,OAAO,MAAM,YAAY;GACzB,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAS,MAAM;GAAa;EAClD;EACA,uBAAuB;GACrB,OAAO,MAAM,oBAAoB;GACjC,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAS,MAAM;GAAU;EAC/C;EACA,mBAAmB;GACjB,OAAO,MAAM,SAAS;GACtB,aAAa;GACb,SAAS;GACT,QAAQ,EAAE,UAAU,mBAAmB;EACzC;EACA,6BAA6B;GAC3B,OAAO,MAAM,mBAAmB;GAChC,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAoB,OAAO;GAAW;EAC5D;CACF;CACA,SAAS,EAGP,yBACE,mLACJ;AACF,CAAC"}

package/dist/components/app-bar/use-app-bar-scroll.d.ts

@@ -0,0 +1,6 @@
+import { RefObject } from "react";
+//#region src/components/app-bar/use-app-bar-scroll.d.ts
+/** How a top app bar responds to the content scrolling under it (Compose's scroll behaviours). */
+export type TopAppBarScrollBehavior = 'pinned' | 'enter-always' | 'exit-until-collapsed';
+//#endregion
+//# sourceMappingURL=use-app-bar-scroll.d.ts.map

package/dist/components/app-bar/use-app-bar-scroll.js

@@ -0,0 +1,139 @@
+"use client";
+import { hasVisibleFocusWithin } from "../../utils/focus-visible.js";
+import { useEffect, useState } from "react";
+import { cubicBezier, useReducedMotion } from "motion/react";
+//#region src/components/app-bar/use-app-bar-scroll.ts
+/** Compose's `TopTitleAlphaEasing` for the collapsed title of a two-row bar. */
+const topTitleAlpha = cubicBezier(.8, 0, .8, .15);
+/** Compose's `FastOutLinearInEasing`, used to blend the container colour. */
+const fastOutLinearIn = cubicBezier(.4, 0, 1, 1);
+/**
+* Ports Compose's top app bar scroll behaviours to page scrolling. The bar's offset
+* (Compose's `heightOffset`, 0 down to minus the collapsible height) is written to
+* `--m3-app-bar-offset`, which the sticky bar uses as its `top`, so the bar moves without
+* changing its layout height and the content below never shifts. Colour and title alphas
+* are written as custom properties too, so scrolling causes no React renders.
+*
+* - `pinned`: the bar stays; only its colour responds, switching once content is under it
+*   (a two-row bar too, keeping its expanded title).
+* - `enter-always`: scrolling down hides the bar, any scroll up brings it back. A two-row
+*   bar first collapses to its top row, which then hides and comes back on scroll up, but
+*   stays small until the page is back at the top (M3).
+* - `exit-until-collapsed`: scrolling down collapses it; it expands only near the top.
+*
+* Under reduced motion an `enter-always` bar never leaves the screen, like a navigation bar
+* that hides on scroll (architecture §6): a single-row bar stays put and a two-row bar only
+* collapses with the scroll, as `exit-until-collapsed` does.
+*
+* A bar scrolled fully off screen is `inert`, so Tab skips its hidden controls and screen
+* readers leave them out; it's restored as the bar comes back. While keyboard focus is in
+* the bar it stays on screen (M3: people should "maintain access to app bar actions when
+* the content is scrolled"; WCAG 2.4.11 Focus Not Obscured), and focusing a partly hidden
+* bar brings it back.
+*/
+function useAppBarScroll({ behavior: requested, rootRef, collapsibleRef, scrollRef, twoRows }) {
+	const [state, setState] = useState({
+		scrolled: false,
+		collapsed: false
+	});
+	const reducedMotion = useReducedMotion() ?? false;
+	const behavior = requested === "enter-always" && reducedMotion ? twoRows ? "exit-until-collapsed" : "pinned" : requested;
+	useEffect(() => {
+		const root = rootRef.current;
+		if (!behavior || !root) return;
+		const scroller = scrollRef?.current;
+		const target = scroller ?? window;
+		const position = () => Math.max(0, scroller ? scroller.scrollTop : window.scrollY);
+		let last = position();
+		let offset = 0;
+		/** A two-row `enter-always` bar's top-row offset: 0 (shown) to minus its height. */
+		let hide = 0;
+		let frame = 0;
+		let current = {
+			scrolled: false,
+			collapsed: false
+		};
+		let hidden = false;
+		const update = () => {
+			frame = 0;
+			const scroll = position();
+			const previous = last;
+			last = scroll;
+			const limit = collapsibleRef.current?.offsetHeight ?? 0;
+			const focused = hasVisibleFocusWithin(root);
+			let collapse = 0;
+			if (behavior === "pinned") offset = 0;
+			else if (twoRows) {
+				collapse = -Math.min(scroll, limit);
+				if (behavior === "enter-always") {
+					const rowHeight = root.offsetHeight - limit;
+					const beyond = Math.max(scroll, limit) - Math.max(previous, limit);
+					hide = focused ? 0 : Math.min(0, Math.max(-rowHeight, hide - beyond));
+				}
+				offset = collapse + hide;
+			} else if (behavior === "enter-always") offset = focused ? 0 : Math.min(0, Math.max(-limit, offset - (scroll - previous)));
+			else offset = focused && !twoRows ? 0 : -Math.min(scroll, limit);
+			const fraction = limit > 0 ? -(twoRows ? collapse : offset) / limit : 0;
+			root.style.setProperty("--m3-app-bar-offset", `${offset}px`);
+			if (twoRows) root.style.setProperty("--m3-app-bar-collapse", `${-collapse}px`);
+			const height = root.offsetHeight;
+			const offScreen = height > 0 && -offset >= height - .5;
+			if (offScreen !== hidden) {
+				hidden = offScreen;
+				root.toggleAttribute("inert", offScreen);
+			}
+			if (twoRows && behavior !== "pinned") {
+				root.style.setProperty("--m3-app-bar-scrolled", `${fastOutLinearIn(fraction) * 100}%`);
+				root.style.setProperty("--m3-app-bar-top-alpha", String(topTitleAlpha(fraction)));
+				root.style.setProperty("--m3-app-bar-bottom-alpha", String(1 - fraction));
+			} else {
+				root.style.setProperty("--m3-app-bar-scrolled", scroll > 0 ? "100%" : "0%");
+				if (twoRows) {
+					root.style.setProperty("--m3-app-bar-top-alpha", "0");
+					root.style.setProperty("--m3-app-bar-bottom-alpha", "1");
+				}
+			}
+			const next = {
+				scrolled: scroll > 0,
+				collapsed: twoRows && fraction >= .5
+			};
+			if (next.scrolled !== current.scrolled || next.collapsed !== current.collapsed) {
+				current = next;
+				setState(next);
+			}
+		};
+		const onScroll = () => {
+			if (!frame) frame = requestAnimationFrame(update);
+		};
+		update();
+		target.addEventListener("scroll", onScroll, { passive: true });
+		root.addEventListener("focusin", onScroll);
+		return () => {
+			target.removeEventListener("scroll", onScroll);
+			root.removeEventListener("focusin", onScroll);
+			cancelAnimationFrame(frame);
+			if (hidden) root.removeAttribute("inert");
+			for (const name of [
+				"--m3-app-bar-offset",
+				"--m3-app-bar-collapse",
+				"--m3-app-bar-scrolled",
+				"--m3-app-bar-top-alpha",
+				"--m3-app-bar-bottom-alpha"
+			]) root.style.removeProperty(name);
+		};
+	}, [
+		behavior,
+		rootRef,
+		collapsibleRef,
+		scrollRef,
+		twoRows
+	]);
+	return behavior ? state : {
+		scrolled: false,
+		collapsed: false
+	};
+}
+//#endregion
+export { useAppBarScroll };
+
+//# sourceMappingURL=use-app-bar-scroll.js.map