@windmorph/react 0.0.0-stage → 0.1.0

package/dist/components/navigation/nav-item-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-item-styles.js","names":[],"sources":["../../../src/components/navigation/nav-item-styles.ts"],"sourcesContent":["import { tv, type VariantProps } from '../../utils/tv';\n\n/*\n * Navigation items shared by the navigation rail and the flexible navigation bar. Values\n * follow Compose Material 3 (NavigationItem.kt, WideNavigationRail.kt, ShortNavigationBar.kt\n * and the NavigationRail* / NavigationBar* token files):\n *\n * - rail-top (collapsed rail): 56×32 pill around a 24px icon, `label-medium` 4px below,\n *   centred in the 96px collapsed width (labels may use all of it), at least 64px tall.\n *   The item is that wide even while the rail's width animates, so its icon never moves.\n * - rail-start (expanded rail): 56px pill holding icon · 8px · `label-large`, 16px inside,\n *   20px item inset, which puts the icon on the same line as when collapsed. The pill hugs\n *   its icon and label, as in M3 Expressive (the full-width pill was the navigation\n *   drawer's), while the whole row stays the link or button: a larger target than Compose's\n *   pill-only one, with the state layer and focus ring still on the pill.\n * - bar-top: 6px · 56×32 pill · 4px · `label-medium` · 6px (64px).\n * - bar-start: 40px pill holding icon · 4px · `label-medium`, 16px inside, centred in an\n *   item as tall as the bar (64px), which is the touch target.\n *\n * Colours: icons `on-surface-variant`, selected `on-secondary-container` on a\n * `secondary-container` pill; labels `on-surface-variant`, selected `secondary` below the\n * icon or `on-secondary-container` beside it; disabled 38%. The state layer is\n * `on-secondary-container` on the pill, and a press ripples through it from the press point\n * (M3: \"a ripple passes through the indicator\"), as on every other M3 control. In every layout the current item's pill expands from\n * the centre of its icon and fades in on the default spatial spring (M3: \"the active\n * indicator expands from the center of the icon\"), and colours change on default effects.\n * The current label is bold (the emphasized label role). With a `selectedIcon`, the two\n * icons cross-fade on default effects.\n *\n * `slide` (the expanded rail's `indicatorMotion=\"slide\"`, an extension beyond the spec that\n * matches Google's Expressive showcase): the pill is whole while current and Motion moves it\n * from the previous current item on the fast spatial spring; the old pill goes at once, and\n * the content sits above every pill so a moving one never covers another item's label.\n * Under reduced motion it fades in place instead.\n *\n * Under reduced motion every pill fades in whole on the default effects spring, without\n * expanding (architecture §6).\n *\n * Labels don't truncate (M3: \"Don't truncate or display an ellipsis in place of label\n * text\"): they wrap between words, and the item grows taller, so the full label stays\n * visible under large text sizes. A word wider than the item may break where the browser\n * hyphenates it for the document's `lang` (`hyphens: auto`), but never bare (\"Searc/h\"):\n * `overflow-wrap: normal` keeps it whole, and a line it still overflows ends with an\n * ellipsis (`overflow: hidden` with `text-overflow: ellipsis`, applied per line), while the\n * other words keep wrapping. The text stays whole in the DOM, so the accessible name is the\n * full label (2026-10-16, refining 2026-10-13 and 2026-10-15).\n *\n * Badges overlap the icon's top end (BadgedBox), except in the expanded rail, where M3 puts\n * them next to the label, 4px after it.\n *\n * Forced colours (2026-10-15): the current pill keeps a `Highlight` fill\n * (`forced-color-adjust: none`), with its icon, and a label inside it, in `HighlightText`;\n * otherwise the pill became Canvas and only the bold label marked the current item. The\n * icon and a label inside the pill opt out of forced colours too (2026-10-17): with\n * `forced-color-adjust: auto` the browser paints a `Canvas` backplate behind text, so a\n * `HighlightText` label read white on white.\n *\n * The pill, its state layer and its content share one grid cell, so nothing is positioned.\n *\n * The pill, icon and label colours come from the bar's or rail's component tokens\n * (`navigation-tokens.ts`, `--md-comp-nav-{bar,rail}-item-*`): each item carries\n * `data-tokens` and `data-layout`, so the bar's layouts read the bar's item parts and the\n * rail's layouts the rail's. Disabled colours stay classes.\n *\n * Every class is written out in full so Tailwind can find it.\n */\n\n/** Variant definitions for navigation items; extend them to add variants. */\nexport const navItemStyles = tv({\n  slots: {\n    root: [\n      'group/nav grid min-w-0 cursor-pointer justify-items-center outline-none select-none',\n      'font-plain text-on-surface-variant',\n      'data-disabled:cursor-default',\n    ],\n    // The pill area: indicator, state layer and content overlap here; it carries the focus ring.\n    pill: [\n      'grid rounded-full outline-offset-(--md-sys-focus-indicator-offset) outline-secondary',\n      'group-data-focus-visible/nav:outline-(length:--md-sys-focus-indicator-thickness) group-data-focus-visible/nav:outline-solid',\n    ],\n    indicator: [\n      'col-start-1 row-start-1 rounded-full opacity-0',\n      'group-data-current/nav:opacity-100 group-data-current/nav:[clip-path:inset(0_0_round_9999px)]',\n      // Forced colours would paint the pill as Canvas: it keeps a Highlight fill instead.\n      'forced-colors:bg-[Highlight] forced-colors:forced-color-adjust-none',\n      '[transition-property:clip-path,opacity]',\n      '[transition-duration:var(--md-sys-motion-spring-spatial-default-duration)]',\n      '[transition-timing-function:var(--md-sys-motion-spring-spatial-default-easing)]',\n      // Reduced motion: the pill fades in whole on the default effects spring.\n      'motion-reduce:[transition-property:opacity]',\n      'motion-reduce:[transition-duration:var(--md-sys-motion-spring-effects-default-duration)]',\n      'motion-reduce:[transition-timing-function:var(--md-sys-motion-spring-effects-default-easing)]',\n    ],\n    // The shared state layer and ripple, on the pill: the item's hover and focus show\n    // through it, and a press ripples from the press point (NavItem sets the origin).\n    stateLayer: [\n      'col-start-1 row-start-1 rounded-full state-layer',\n      '[--m3-state-layer-color:var(--md-sys-color-on-secondary-container)]',\n      'group-data-hovered/nav:[--m3-state-opacity:var(--md-sys-state-hover-state-layer-opacity)]',\n      'group-data-focus-visible/nav:[--m3-state-opacity:var(--md-sys-state-focus-state-layer-opacity)]',\n    ],\n    // `relative` keeps the content above the indicator and state layer: elements with\n    // opacity or clip-path paint in the positioned layer, above plain in-flow content.\n    content: 'relative col-start-1 row-start-1 flex min-w-0 items-center justify-center',\n    icon: [\n      'inline-grid size-[24px] shrink-0 place-items-center [&>svg]:size-full',\n      'group-data-disabled/nav:text-on-surface-variant/38',\n      // HighlightText on the Highlight pill, kept as painted (no Canvas backplate).\n      'forced-colors:group-data-current/nav:text-[HighlightText] forced-colors:group-data-current/nav:forced-color-adjust-none',\n      'transition-colors duration-(--md-sys-motion-spring-effects-default-duration) ease-(--md-sys-motion-spring-effects-default-easing)',\n    ],\n    // An icon and its selected variant share one cell and cross-fade.\n    iconFace: [\n      'col-start-1 row-start-1 size-full opacity-0 data-shown:opacity-100 [&>svg]:size-full',\n      '[transition-property:opacity] duration-(--md-sys-motion-spring-effects-default-duration) ease-(--md-sys-motion-spring-effects-default-easing)',\n    ],\n    // Holds the icon (or both faces) inside a badge's anchor.\n    iconStack: 'inline-grid size-[24px] place-items-center [&>svg]:size-full',\n    // The expanded rail's badge, 4px after the label (the content gap is 8px).\n    badge: 'inline-flex shrink-0 -ms-[4px]',\n    // The `BadgedBox` around a badged icon (its root; `classNames.badge` merges in). The\n    // badge takes forced colours back, which the current icon opts out of.\n    badgedBox: 'forced-colors:[&>span:last-child]:forced-color-adjust-auto',\n    label: [\n      'min-w-0 overflow-hidden text-ellipsis text-balance hyphens-auto wrap-normal group-data-disabled/nav:text-on-surface-variant/38',\n      '[transition-property:color,opacity] duration-(--md-sys-motion-spring-effects-default-duration) ease-(--md-sys-motion-spring-effects-default-easing)',\n    ],\n  },\n  variants: {\n    layout: {\n      'rail-top': {\n        // The 56px pill centres in the collapsed width; labels may use all of it (Compose).\n        // The minimum height springs 64 ↔ 48px with the rail's width (`railMorph`).\n        root: 'min-h-[64px] w-(--m3-rail-collapsed-width) content-start',\n        pill: 'h-[32px] w-[56px]',\n        indicator:\n          '[clip-path:inset(0_50%_round_9999px)] bg-[var(--_md-comp-nav-rail-item-active-indicator-color)]',\n        icon: 'text-[color:var(--_md-comp-nav-rail-item-inactive-icon-color)] group-data-current/nav:text-[color:var(--_md-comp-nav-rail-item-active-icon-color)]',\n        label: [\n          'mt-[4px] max-w-full text-center text-label-medium',\n          'text-[color:var(--_md-comp-nav-rail-item-inactive-label-text-color)]',\n          'group-data-current/nav:text-label-medium-emphasized group-data-current/nav:text-[color:var(--_md-comp-nav-rail-item-active-label-text-color)]',\n        ],\n      },\n      'rail-start': {\n        root: 'min-h-[48px] w-full justify-items-start px-(--m3-rail-item-inset)',\n        pill: 'min-h-[56px] max-w-full',\n        // The icon's centre: 16px padding + half the 24px icon from the start edge.\n        indicator: [\n          '[clip-path:inset(0_calc(100%_-_28px)_0_28px_round_9999px)] rtl:[clip-path:inset(0_28px_0_calc(100%_-_28px)_round_9999px)]',\n          'bg-[var(--_md-comp-nav-rail-item-active-indicator-color)]',\n        ],\n        content: 'justify-start gap-[8px] ps-[16px] pe-[16px] py-[8px]',\n        icon: 'text-[color:var(--_md-comp-nav-rail-item-inactive-icon-color)] group-data-current/nav:text-[color:var(--_md-comp-nav-rail-item-active-icon-color)]',\n        label: [\n          // Inside the Highlight pill: HighlightText, without the Canvas backplate forced\n          // colours paint behind text (white on white otherwise).\n          'forced-colors:group-data-current/nav:text-[HighlightText] forced-colors:group-data-current/nav:forced-color-adjust-none',\n          'text-label-large text-[color:var(--_md-comp-nav-rail-item-inactive-label-text-color)]',\n          'group-data-current/nav:text-label-large-emphasized group-data-current/nav:text-[color:var(--_md-comp-nav-rail-item-active-label-text-color)]',\n        ],\n      },\n      // Bar items stretch to the bar's height (64px, or taller when a label wraps), so the\n      // whole height is the touch target. Stacked items keep their icons on one line at the\n      // top; inline items centre their pill.\n      'bar-top': {\n        root: 'self-stretch content-start py-[6px]',\n        pill: 'h-[32px] w-[56px]',\n        indicator:\n          '[clip-path:inset(0_50%_round_9999px)] bg-[var(--_md-comp-nav-bar-item-active-indicator-color)]',\n        icon: 'text-[color:var(--_md-comp-nav-bar-item-inactive-icon-color)] group-data-current/nav:text-[color:var(--_md-comp-nav-bar-item-active-icon-color)]',\n        label: [\n          'mt-[4px] max-w-full px-[4px] text-center text-label-medium',\n          'text-[color:var(--_md-comp-nav-bar-item-inactive-label-text-color)]',\n          'group-data-current/nav:text-label-medium-emphasized group-data-current/nav:text-[color:var(--_md-comp-nav-bar-item-active-label-text-color)]',\n        ],\n      },\n      'bar-start': {\n        // Content-sized; 4px each side keeps neighbouring pills 8px apart.\n        root: 'self-stretch content-center px-[4px]',\n        pill: 'min-h-[40px] max-w-full',\n        indicator: [\n          '[clip-path:inset(0_calc(100%_-_28px)_0_28px_round_9999px)] rtl:[clip-path:inset(0_28px_0_calc(100%_-_28px)_round_9999px)]',\n          'bg-[var(--_md-comp-nav-bar-item-active-indicator-color)]',\n        ],\n        content: 'gap-[4px] ps-[16px] pe-[16px] py-[4px]',\n        // A large badge reaches past the icon's end edge into the label's place (M3: badges\n        // overlap the icon). Its overhang takes room in the row so the label starts 4px after\n        // the badge (2026-10-15): the icon box grows to the badge, which hangs from a box as\n        // wide as itself, 12px inside the 24px icon, as `BadgedBox` places it.\n        icon: [\n          'text-[color:var(--_md-comp-nav-bar-item-inactive-icon-color)] group-data-current/nav:text-[color:var(--_md-comp-nav-bar-item-active-icon-color)]',\n          'has-[[data-size=large]]:w-auto has-[[data-size=large]]:min-w-[24px] has-[[data-size=large]]:justify-items-start',\n        ],\n        badgedBox: [\n          'has-[[data-size=large]]:grid-cols-[auto]',\n          '[&:has([data-size=large])>span:first-child]:w-[24px] [&:has([data-size=large])>span:first-child]:justify-self-start',\n          '[&>span:last-child:has([data-size=large])]:w-max [&>span:last-child:has([data-size=large])]:ms-[12px]',\n        ],\n        label: [\n          // Inside the Highlight pill: HighlightText, without the Canvas backplate forced\n          // colours paint behind text (white on white otherwise).\n          'forced-colors:group-data-current/nav:text-[HighlightText] forced-colors:group-data-current/nav:forced-color-adjust-none',\n          'text-label-medium text-[color:var(--_md-comp-nav-bar-item-inactive-label-text-color)]',\n          'group-data-current/nav:text-label-medium-emphasized group-data-current/nav:text-[color:var(--_md-comp-nav-bar-item-active-label-text-color)]',\n        ],\n      },\n    },\n    /** Labels that move when the rail changes width fade in at their new place. */\n    enterLabel: { true: { label: 'starting:opacity-0' }, false: {} },\n    /** The pill slides between items (Motion moves it) instead of expanding in place. */\n    slide: {\n      true: {\n        indicator: '[transition-property:none] motion-reduce:[transition-property:opacity]',\n        content: 'z-[1]',\n      },\n      false: {},\n    },\n  },\n  compoundVariants: [\n    // As the rail expands or collapses, an item's minimum height springs between 64px and\n    // 48px on the default spatial spring, as Compose's itemMinHeight (WideNavigationRail.kt;\n    // 2026-10-17: it swapped in one frame, so the icons jumped). Instant under reduced motion.\n    {\n      layout: ['rail-top', 'rail-start'],\n      class: {\n        root: '[transition-property:min-height] [transition-duration:var(--md-sys-motion-spring-spatial-default-duration)] [transition-timing-function:var(--md-sys-motion-spring-spatial-default-easing)]',\n      },\n    },\n  ],\n  defaultVariants: { layout: 'bar-top', enterLabel: false, slide: false },\n});\n\nexport type NavItemLayout = NonNullable<VariantProps<typeof navItemStyles>['layout']>;\n"],"mappings":";;;AAoEA,MAAa,gBAAgB,GAAG;CAC9B,OAAO;EACL,MAAM;GACJ;GACA;GACA;EACF;EAEA,MAAM,CACJ,wFACA,6HACF;EACA,WAAW;GACT;GACA;GAEA;GACA;GACA;GACA;GAEA;GACA;GACA;EACF;EAGA,YAAY;GACV;GACA;GACA;GACA;EACF;EAGA,SAAS;EACT,MAAM;GACJ;GACA;GAEA;GACA;EACF;EAEA,UAAU,CACR,wFACA,+IACF;EAEA,WAAW;EAEX,OAAO;EAGP,WAAW;EACX,OAAO,CACL,kIACA,qJACF;CACF;CACA,UAAU;EACR,QAAQ;GACN,YAAY;IAGV,MAAM;IACN,MAAM;IACN,WACE;IACF,MAAM;IACN,OAAO;KACL;KACA;KACA;IACF;GACF;GACA,cAAc;IACZ,MAAM;IACN,MAAM;IAEN,WAAW,CACT,6HACA,2DACF;IACA,SAAS;IACT,MAAM;IACN,OAAO;KAGL;KACA;KACA;IACF;GACF;GAIA,WAAW;IACT,MAAM;IACN,MAAM;IACN,WACE;IACF,MAAM;IACN,OAAO;KACL;KACA;KACA;IACF;GACF;GACA,aAAa;IAEX,MAAM;IACN,MAAM;IACN,WAAW,CACT,6HACA,0DACF;IACA,SAAS;IAKT,MAAM,CACJ,oJACA,iHACF;IACA,WAAW;KACT;KACA;KACA;IACF;IACA,OAAO;KAGL;KACA;KACA;IACF;GACF;EACF;;EAEA,YAAY;GAAE,MAAM,EAAE,OAAO,qBAAqB;GAAG,OAAO,CAAC;EAAE;;EAE/D,OAAO;GACL,MAAM;IACJ,WAAW;IACX,SAAS;GACX;GACA,OAAO,CAAC;EACV;CACF;CACA,kBAAkB,CAIhB;EACE,QAAQ,CAAC,YAAY,YAAY;EACjC,OAAO,EACL,MAAM,8LACR;CACF,CACF;CACA,iBAAiB;EAAE,QAAQ;EAAW,YAAY;EAAO,OAAO;CAAM;AACxE,CAAC"}

package/dist/components/navigation/navigation-styles.d.ts

@@ -0,0 +1,239 @@
+import { VariantProps } from "../../utils/tv.js";
+//#region src/components/navigation/navigation-styles.d.ts
+/** Variant definitions for {@link NavigationRail}; extend them to add variants. */
+export declare const navigationRailStyles: import("tailwind-variants").TVReturnType<{
+  expanded: {
+    true: {
+      items: string;
+    };
+    false: {
+      items: string;
+    };
+  };
+  /** Auto margins centre the items without hiding any when the rail overflows. */
+  itemAlignment: {
+    top: {};
+    center: {
+      items: string;
+    };
+  };
+  /** A divider on the edge next to the content. */
+  divider: {
+    true: {
+      root: string;
+    };
+    false: {};
+  };
+  /**
+   * `indicatorMotion="slide"` in the expanded rail: the list is isolated, so the items'
+   * raised content stays above a sliding pill and no higher.
+   */
+  slidingIndicator: {
+    true: {
+      items: string;
+    };
+    false: {};
+  };
+  /**
+   * Modal sheet entry: from the collapsed width, or sliding in from the start edge. Under
+   * reduced motion it fades instead.
+   */
+  sheetEntry: {
+    grow: {
+      sheet: string;
+    };
+    slide: {
+      sheet: string[];
+    };
+  };
+}, {
+  root: string[];
+  body: string;
+  header: string;
+  items: string[];
+  scrim: string[];
+  sheet: string[];
+}, undefined, {
+  expanded: {
+    true: {
+      items: string;
+    };
+    false: {
+      items: string;
+    };
+  };
+  /** Auto margins centre the items without hiding any when the rail overflows. */
+  itemAlignment: {
+    top: {};
+    center: {
+      items: string;
+    };
+  };
+  /** A divider on the edge next to the content. */
+  divider: {
+    true: {
+      root: string;
+    };
+    false: {};
+  };
+  /**
+   * `indicatorMotion="slide"` in the expanded rail: the list is isolated, so the items'
+   * raised content stays above a sliding pill and no higher.
+   */
+  slidingIndicator: {
+    true: {
+      items: string;
+    };
+    false: {};
+  };
+  /**
+   * Modal sheet entry: from the collapsed width, or sliding in from the start edge. Under
+   * reduced motion it fades instead.
+   */
+  sheetEntry: {
+    grow: {
+      sheet: string;
+    };
+    slide: {
+      sheet: string[];
+    };
+  };
+}, {
+  root: string[];
+  body: string;
+  header: string;
+  items: string[];
+  scrim: string[];
+  sheet: string[];
+}, import("tailwind-variants").TVReturnTypeLike<{
+  expanded: {
+    true: {
+      items: string;
+    };
+    false: {
+      items: string;
+    };
+  };
+  /** Auto margins centre the items without hiding any when the rail overflows. */
+  itemAlignment: {
+    top: {};
+    center: {
+      items: string;
+    };
+  };
+  /** A divider on the edge next to the content. */
+  divider: {
+    true: {
+      root: string;
+    };
+    false: {};
+  };
+  /**
+   * `indicatorMotion="slide"` in the expanded rail: the list is isolated, so the items'
+   * raised content stays above a sliding pill and no higher.
+   */
+  slidingIndicator: {
+    true: {
+      items: string;
+    };
+    false: {};
+  };
+  /**
+   * Modal sheet entry: from the collapsed width, or sliding in from the start edge. Under
+   * reduced motion it fades instead.
+   */
+  sheetEntry: {
+    grow: {
+      sheet: string;
+    };
+    slide: {
+      sheet: string[];
+    };
+  };
+}, {
+  root: string[];
+  body: string;
+  header: string;
+  items: string[];
+  scrim: string[];
+  sheet: string[];
+}>>;
+/** Variant definitions for {@link NavigationBar}; extend them to add variants. */
+export declare const navigationBarStyles: import("tailwind-variants").TVReturnType<{
+  arrangement: {
+    equal: {
+      item: string;
+    };
+    centered: {
+      root: string;
+      item: string;
+    };
+  };
+  iconPlacement: {
+    top: {};
+    start: {};
+  };
+  hideOnScroll: {
+    true: {
+      root: string[];
+    };
+    false: {};
+  };
+}, {
+  root: string;
+  item: string;
+}, undefined, {
+  arrangement: {
+    equal: {
+      item: string;
+    };
+    centered: {
+      root: string;
+      item: string;
+    };
+  };
+  iconPlacement: {
+    top: {};
+    start: {};
+  };
+  hideOnScroll: {
+    true: {
+      root: string[];
+    };
+    false: {};
+  };
+}, {
+  root: string;
+  item: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  arrangement: {
+    equal: {
+      item: string;
+    };
+    centered: {
+      root: string;
+      item: string;
+    };
+  };
+  iconPlacement: {
+    top: {};
+    start: {};
+  };
+  hideOnScroll: {
+    true: {
+      root: string[];
+    };
+    false: {};
+  };
+}, {
+  root: string;
+  item: string;
+}>>;
+/**
+ * The variants of {@link navigationBarStyles}, 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 NavigationBarStyleProps = VariantProps<typeof navigationBarStyles>;
+export type NavigationBarArrangement = NonNullable<NavigationBarStyleProps['arrangement']>;
+//#endregion
+//# sourceMappingURL=navigation-styles.d.ts.map

package/dist/components/navigation/navigation-styles.js

@@ -0,0 +1,134 @@
+import { tv } from "../../utils/tv.js";
+import { reducedMotionFade } from "../../motion/reduced-motion.js";
+//#region src/components/navigation/navigation-styles.ts
+/** Half of what's left beside a 56px pill in the collapsed rail. */
+const itemInset = "[--m3-rail-item-inset:calc((var(--m3-rail-collapsed-width)_-_56px)/2)]";
+/**
+* While the expanded rail is still widening (`data-widening`), labels stay on one line and
+* the rail clips them, so the items keep their height and the icons their places.
+*/
+const oneLineWhileResizing = "[&[data-widening]_[data-nav-label]]:text-nowrap";
+/** Variant definitions for {@link NavigationRail}; extend them to add variants. */
+const navigationRailStyles = tv({
+	slots: {
+		root: [
+			"flex w-(--m3-rail-width) shrink-0 flex-col text-on-surface",
+			"bg-[var(--_md-comp-nav-rail-collapsed-container-color)] data-expanded:bg-[var(--_md-comp-nav-rail-expanded-container-color)]",
+			itemInset,
+			oneLineWhileResizing,
+			...[
+				"[transition-property:width]",
+				"[transition-duration:var(--md-sys-motion-spring-spatial-default-duration)]",
+				"[transition-timing-function:var(--md-sys-motion-spring-spatial-default-easing)]"
+			]
+		],
+		body: "flex min-h-0 flex-1 flex-col overflow-x-clip overflow-y-auto pt-[44px]",
+		header: "grid grid-cols-[56px] justify-items-center-safe ps-(--m3-rail-item-inset) pb-[40px] [&>*]:min-w-max",
+		items: ["flex flex-col", "[transition-property:gap] [transition-duration:var(--md-sys-motion-spring-spatial-default-duration)] [transition-timing-function:var(--md-sys-motion-spring-spatial-default-easing)]"],
+		scrim: [
+			"fixed inset-0 z-(--md-sys-z-scrim) bg-scrim/32 opacity-100",
+			"[transition-property:opacity]",
+			"[transition-duration:var(--md-sys-motion-spring-effects-default-duration)]",
+			"[transition-timing-function:var(--md-sys-motion-spring-effects-default-easing)]",
+			"starting:opacity-0 data-exiting:opacity-0"
+		],
+		sheet: [
+			"fixed inset-y-0 start-0 z-(--md-sys-z-sheet) flex w-(--m3-rail-width) flex-col overflow-x-clip overflow-y-auto pt-[44px]",
+			"rounded-e-[var(--_md-comp-nav-rail-expanded-modal-container-shape)] bg-[var(--_md-comp-nav-rail-expanded-modal-container-color)]",
+			"text-on-surface shadow-elevation-2 outline-none",
+			itemInset,
+			oneLineWhileResizing,
+			"[&[data-exiting]_[data-nav-label]]:text-nowrap",
+			"[transition-property:width,translate]",
+			"[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration)]",
+			"[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing)]",
+			...reducedMotionFade
+		]
+	},
+	variants: {
+		expanded: {
+			true: { items: "gap-0" },
+			false: { items: "gap-[4px]" }
+		},
+		/** Auto margins centre the items without hiding any when the rail overflows. */
+		itemAlignment: {
+			top: {},
+			center: { items: "my-auto" }
+		},
+		/** A divider on the edge next to the content. */
+		divider: {
+			true: { root: "border-e border-outline-variant" },
+			false: {}
+		},
+		/**
+		* `indicatorMotion="slide"` in the expanded rail: the list is isolated, so the items'
+		* raised content stays above a sliding pill and no higher.
+		*/
+		slidingIndicator: {
+			true: { items: "isolate" },
+			false: {}
+		},
+		/**
+		* Modal sheet entry: from the collapsed width, or sliding in from the start edge. Under
+		* reduced motion it fades instead.
+		*/
+		sheetEntry: {
+			grow: { sheet: "motion-safe:starting:w-(--m3-rail-collapsed-width) motion-safe:data-exiting:w-(--m3-rail-collapsed-width)" },
+			slide: { sheet: [
+				"motion-safe:starting:-translate-x-full motion-safe:data-exiting:-translate-x-full motion-safe:rtl:starting:translate-x-full motion-safe:rtl:data-exiting:translate-x-full",
+				"[transition-duration:var(--md-sys-motion-spring-spatial-default-duration)]",
+				"[transition-timing-function:var(--md-sys-motion-spring-spatial-default-easing)]"
+			] }
+		}
+	},
+	defaultVariants: {
+		expanded: false,
+		sheetEntry: "grow",
+		itemAlignment: "top",
+		divider: false,
+		slidingIndicator: false
+	}
+});
+/** Variant definitions for {@link NavigationBar}; extend them to add variants. */
+const navigationBarStyles = tv({
+	slots: {
+		root: "flex min-h-[64px] w-full bg-[var(--_md-comp-nav-bar-container-color)] text-on-surface",
+		item: "min-w-0"
+	},
+	variants: {
+		arrangement: {
+			equal: { item: "flex-1 basis-0" },
+			centered: {
+				root: "justify-center",
+				item: "flex-1 basis-0"
+			}
+		},
+		iconPlacement: {
+			top: {},
+			start: {}
+		},
+		hideOnScroll: {
+			true: { root: [
+				"sticky bottom-(--m3-nav-bar-offset) z-(--md-sys-z-sticky)",
+				"data-settling:[transition-property:bottom]",
+				"data-settling:[transition-duration:var(--md-sys-motion-spring-effects-default-duration)]",
+				"data-settling:[transition-timing-function:var(--md-sys-motion-spring-effects-default-easing)]"
+			] },
+			false: {}
+		}
+	},
+	compoundVariants: [{
+		arrangement: "centered",
+		iconPlacement: "start",
+		class: { item: "flex-initial basis-auto" }
+	}],
+	defaultVariants: {
+		arrangement: "equal",
+		iconPlacement: "top",
+		hideOnScroll: false
+	}
+});
+//#endregion
+export { navigationBarStyles, navigationRailStyles };
+
+//# sourceMappingURL=navigation-styles.js.map

package/dist/components/navigation/navigation-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-styles.js","names":[],"sources":["../../../src/components/navigation/navigation-styles.ts"],"sourcesContent":["import { reducedMotionFade } from '../../motion/reduced-motion';\nimport { tv, type VariantProps } from '../../utils/tv';\n\n/*\n * Values follow Compose Material 3 (WideNavigationRail.kt, ShortNavigationBar.kt and the\n * NavigationRail* / NavigationBar* token files).\n *\n * Rail: `surface`, 96px collapsed; expanded it is as wide as its widest item plus the 20px\n * insets, 220–360px, and the width springs on the default spatial spring. Content starts\n * 44px down; a header sits 40px above the items, which are 4px apart collapsed and flush\n * expanded. The modal expanded rail is `surface-container` at level 2 with 16px end\n * corners over a 32% scrim; it grows from the collapsed width on the fast spatial spring, or\n * slides in on the default one when the collapsed rail is hidden. It stays mounted until its\n * own width or slide (or, under reduced motion, its fade) has ended.\n *\n * Icons stay on one line in both states, through the middle of the collapsed rail, as in\n * M3's rail motion: only the labels and the rail's edge move. While the width springs open\n * (and while the modal sheet shrinks away) labels stay on one line, clipped by the rail, so\n * none wraps letter by letter in a rail that is still narrow and no item grows taller. So nothing is centred in\n * the animated width. The collapsed width is `--m3-rail-collapsed-width` (96px), and the\n * item inset `--m3-rail-item-inset` is half of what's left beside a 56px pill (20px). The\n * header is a 56px column at that inset: anything up to 56px (the menu button, a FAB) is\n * centred on the icon line, and anything wider (an extended FAB) keeps its width and starts\n * at the column's edge.\n *\n * Items align as a group to the top (default) or, with `itemAlignment=\"center\"`, to the\n * middle of the space below the header (M3: centre alignment on tablets); the header stays\n * at the top. An optional divider (`outline-variant`) marks the edge next to the content.\n *\n * Bar: `surface-container`, at least 64px (it grows when labels wrap), no elevation.\n * Stacked items share the width equally, or, when centred, sit within side padding of\n * (100% − 10% × (items + 3)) / 2 (up to 6 items). Items beside their icons\n * (`iconPlacement=\"start\"`) are centred by default and sized to their content, so the extra\n * space goes to the bar's ends (M3: \"Horizontal navigation items have a fixed width\").\n * With `scrollBehavior=\"hide-on-scroll\"` the bar is sticky at the bottom and its offset\n * (`--m3-nav-bar-offset`, 0 down to minus its height) follows the page scroll.\n *\n * The rail's width is the `--m3-rail-width` variable, so a consumer `w-*` class still wins;\n * a narrower or wider collapsed rail sets `--m3-rail-collapsed-width` instead.\n *\n * Container colours and the modal rail's corners come from the component tokens\n * (`navigation-tokens.ts`, `--md-comp-nav-bar-*` and `--md-comp-nav-rail-*`): the bar, the\n * rail and the modal rail's sheet (`data-modal`) carry `data-tokens`. A consumer class still\n * wins in `cn()`.\n * Every class is written out in full so Tailwind can find it.\n */\n\n/** Half of what's left beside a 56px pill in the collapsed rail. */\nconst itemInset = '[--m3-rail-item-inset:calc((var(--m3-rail-collapsed-width)_-_56px)/2)]';\n\n/**\n * While the expanded rail is still widening (`data-widening`), labels stay on one line and\n * the rail clips them, so the items keep their height and the icons their places.\n */\nconst oneLineWhileResizing = '[&[data-widening]_[data-nav-label]]:text-nowrap';\n\nconst widthMotion = [\n  '[transition-property:width]',\n  '[transition-duration:var(--md-sys-motion-spring-spatial-default-duration)]',\n  '[transition-timing-function:var(--md-sys-motion-spring-spatial-default-easing)]',\n];\n\n/** Variant definitions for {@link NavigationRail}; extend them to add variants. */\nexport const navigationRailStyles = tv({\n  slots: {\n    root: [\n      'flex w-(--m3-rail-width) shrink-0 flex-col text-on-surface',\n      'bg-[var(--_md-comp-nav-rail-collapsed-container-color)] data-expanded:bg-[var(--_md-comp-nav-rail-expanded-container-color)]',\n      itemInset,\n      oneLineWhileResizing,\n      ...widthMotion,\n    ],\n    // Library-owned wrapper: clips labels while the width animates.\n    body: 'flex min-h-0 flex-1 flex-col overflow-x-clip overflow-y-auto pt-[44px]',\n    // Children keep their own width (a centred grid item would shrink to the 56px column).\n    header:\n      'grid grid-cols-[56px] justify-items-center-safe ps-(--m3-rail-item-inset) pb-[40px] [&>*]:min-w-max',\n    // The gap between items springs 4 → 0px as the rail expands (default spatial, as\n    // Compose's itemVerticalSpacedBy; 2026-10-17), instant under reduced motion.\n    items: [\n      'flex flex-col',\n      '[transition-property:gap] [transition-duration:var(--md-sys-motion-spring-spatial-default-duration)] [transition-timing-function:var(--md-sys-motion-spring-spatial-default-easing)]',\n    ],\n    scrim: [\n      'fixed inset-0 z-(--md-sys-z-scrim) bg-scrim/32 opacity-100',\n      '[transition-property:opacity]',\n      '[transition-duration:var(--md-sys-motion-spring-effects-default-duration)]',\n      '[transition-timing-function:var(--md-sys-motion-spring-effects-default-easing)]',\n      // In and out on the default effects spring, as Compose's modal rail scrim (2026-10-15).\n      'starting:opacity-0 data-exiting:opacity-0',\n    ],\n    sheet: [\n      'fixed inset-y-0 start-0 z-(--md-sys-z-sheet) flex w-(--m3-rail-width) flex-col overflow-x-clip overflow-y-auto pt-[44px]',\n      'rounded-e-[var(--_md-comp-nav-rail-expanded-modal-container-shape)] bg-[var(--_md-comp-nav-rail-expanded-modal-container-color)]',\n      'text-on-surface shadow-elevation-2 outline-none',\n      itemInset,\n      oneLineWhileResizing,\n      '[&[data-exiting]_[data-nav-label]]:text-nowrap',\n      '[transition-property:width,translate]',\n      '[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration)]',\n      '[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing)]',\n      // Under reduced motion it fades in and out at its full width.\n      ...reducedMotionFade,\n    ],\n  },\n  variants: {\n    expanded: {\n      true: { items: 'gap-0' },\n      false: { items: 'gap-[4px]' },\n    },\n    /** Auto margins centre the items without hiding any when the rail overflows. */\n    itemAlignment: {\n      top: {},\n      center: { items: 'my-auto' },\n    },\n    /** A divider on the edge next to the content. */\n    divider: {\n      true: { root: 'border-e border-outline-variant' },\n      false: {},\n    },\n    /**\n     * `indicatorMotion=\"slide\"` in the expanded rail: the list is isolated, so the items'\n     * raised content stays above a sliding pill and no higher.\n     */\n    slidingIndicator: {\n      true: { items: 'isolate' },\n      false: {},\n    },\n    /**\n     * Modal sheet entry: from the collapsed width, or sliding in from the start edge. Under\n     * reduced motion it fades instead.\n     */\n    sheetEntry: {\n      grow: {\n        sheet:\n          'motion-safe:starting:w-(--m3-rail-collapsed-width) motion-safe:data-exiting:w-(--m3-rail-collapsed-width)',\n      },\n      // Sliding in, the sheet takes the default spatial spring, as Compose's modal rail\n      // (`WideNavigationRail.kt`): the fast one overshot 21px off the window edge (2026-10-15).\n      slide: {\n        sheet: [\n          'motion-safe:starting:-translate-x-full motion-safe:data-exiting:-translate-x-full motion-safe:rtl:starting:translate-x-full motion-safe:rtl:data-exiting:translate-x-full',\n          '[transition-duration:var(--md-sys-motion-spring-spatial-default-duration)]',\n          '[transition-timing-function:var(--md-sys-motion-spring-spatial-default-easing)]',\n        ],\n      },\n    },\n  },\n  defaultVariants: {\n    expanded: false,\n    sheetEntry: 'grow',\n    itemAlignment: 'top',\n    divider: false,\n    slidingIndicator: false,\n  },\n});\n\n/** Variant definitions for {@link NavigationBar}; extend them to add variants. */\nexport const navigationBarStyles = tv({\n  slots: {\n    root: 'flex min-h-[64px] w-full bg-[var(--_md-comp-nav-bar-container-color)] text-on-surface',\n    item: 'min-w-0',\n  },\n  variants: {\n    arrangement: {\n      equal: { item: 'flex-1 basis-0' },\n      centered: { root: 'justify-center', item: 'flex-1 basis-0' },\n    },\n    iconPlacement: { top: {}, start: {} },\n    hideOnScroll: {\n      // Settling after a scroll ends (`data-settling`), the offset eases to shown or hidden on\n      // the default effects spring; while scrolling it follows the scroll directly.\n      true: {\n        root: [\n          'sticky bottom-(--m3-nav-bar-offset) z-(--md-sys-z-sticky)',\n          'data-settling:[transition-property:bottom]',\n          'data-settling:[transition-duration:var(--md-sys-motion-spring-effects-default-duration)]',\n          'data-settling:[transition-timing-function:var(--md-sys-motion-spring-effects-default-easing)]',\n        ],\n      },\n      false: {},\n    },\n  },\n  compoundVariants: [\n    // Items beside their icons keep their own width; the extra space goes to the ends.\n    { arrangement: 'centered', iconPlacement: 'start', class: { item: 'flex-initial basis-auto' } },\n  ],\n  defaultVariants: { arrangement: 'equal', iconPlacement: 'top', hideOnScroll: false },\n});\n\n/**\n * The variants of {@link navigationBarStyles}, 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 NavigationBarStyleProps = VariantProps<typeof navigationBarStyles>;\nexport type NavigationBarArrangement = NonNullable<NavigationBarStyleProps['arrangement']>;\n"],"mappings":";;;;AAgDA,MAAM,YAAY;;;;;AAMlB,MAAM,uBAAuB;;AAS7B,MAAa,uBAAuB,GAAG;CACrC,OAAO;EACL,MAAM;GACJ;GACA;GACA;GACA;GACA,GAAG;IAbP;IACA;IACA;GAWO;EACL;EAEA,MAAM;EAEN,QACE;EAGF,OAAO,CACL,iBACA,sLACF;EACA,OAAO;GACL;GACA;GACA;GACA;GAEA;EACF;EACA,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GAEA,GAAG;EACL;CACF;CACA,UAAU;EACR,UAAU;GACR,MAAM,EAAE,OAAO,QAAQ;GACvB,OAAO,EAAE,OAAO,YAAY;EAC9B;;EAEA,eAAe;GACb,KAAK,CAAC;GACN,QAAQ,EAAE,OAAO,UAAU;EAC7B;;EAEA,SAAS;GACP,MAAM,EAAE,MAAM,kCAAkC;GAChD,OAAO,CAAC;EACV;;;;;EAKA,kBAAkB;GAChB,MAAM,EAAE,OAAO,UAAU;GACzB,OAAO,CAAC;EACV;;;;;EAKA,YAAY;GACV,MAAM,EACJ,OACE,4GACJ;GAGA,OAAO,EACL,OAAO;IACL;IACA;IACA;GACF,EACF;EACF;CACF;CACA,iBAAiB;EACf,UAAU;EACV,YAAY;EACZ,eAAe;EACf,SAAS;EACT,kBAAkB;CACpB;AACF,CAAC;;AAGD,MAAa,sBAAsB,GAAG;CACpC,OAAO;EACL,MAAM;EACN,MAAM;CACR;CACA,UAAU;EACR,aAAa;GACX,OAAO,EAAE,MAAM,iBAAiB;GAChC,UAAU;IAAE,MAAM;IAAkB,MAAM;GAAiB;EAC7D;EACA,eAAe;GAAE,KAAK,CAAC;GAAG,OAAO,CAAC;EAAE;EACpC,cAAc;GAGZ,MAAM,EACJ,MAAM;IACJ;IACA;IACA;IACA;GACF,EACF;GACA,OAAO,CAAC;EACV;CACF;CACA,kBAAkB,CAEhB;EAAE,aAAa;EAAY,eAAe;EAAS,OAAO,EAAE,MAAM,0BAA0B;CAAE,CAChG;CACA,iBAAiB;EAAE,aAAa;EAAS,eAAe;EAAO,cAAc;CAAM;AACrF,CAAC"}

package/dist/components/navigation/navigation-tokens.d.ts

@@ -0,0 +1,9 @@
+import { ComponentTokenSet } from "../../tokens/component.js";
+import "../../index.js";
+//#region src/components/navigation/navigation-tokens.d.ts
+/** The tokens of {@link NavigationBar}: `--md-comp-nav-bar-<part>`. */
+export declare const navBarTokenSet: ComponentTokenSet<"container-color" | "item-active-indicator-color" | "item-active-icon-color" | "item-inactive-icon-color" | "item-active-label-text-color" | "item-inactive-label-text-color">;
+/** The tokens of {@link NavigationRail}: `--md-comp-nav-rail-<part>`. */
+export declare const navRailTokenSet: ComponentTokenSet<"item-active-indicator-color" | "item-active-icon-color" | "item-inactive-icon-color" | "item-active-label-text-color" | "item-inactive-label-text-color" | "collapsed-container-color" | "expanded-container-color" | "expanded-modal-container-color" | "expanded-modal-container-shape">;
+//#endregion
+//# sourceMappingURL=navigation-tokens.d.ts.map

package/dist/components/navigation/navigation-tokens.js

@@ -0,0 +1,114 @@
+import { color, corner, defineComponentTokens } from "../../tokens/component.js";
+//#region src/components/navigation/navigation-tokens.ts
+/** The item tokens, shared by the bar and the rail. */
+function itemTokens(set) {
+	return {
+		"item-active-indicator-color": {
+			value: color("secondary-container"),
+			description: "The current item's pill.",
+			compose: `${set}Tokens.ItemActiveIndicatorColor`,
+			paints: {
+				property: "background-color",
+				slot: "indicator",
+				state: "current"
+			}
+		},
+		"item-active-icon-color": {
+			value: color("on-secondary-container"),
+			description: "The current item's icon.",
+			compose: `${set}Tokens.ItemActiveIconColor`,
+			paints: {
+				property: "color",
+				slot: "icon",
+				state: "current"
+			}
+		},
+		"item-inactive-icon-color": {
+			value: color("on-surface-variant"),
+			description: "The other items’ icons.",
+			compose: `${set}Tokens.ItemInactiveIconColor`,
+			paints: {
+				property: "color",
+				slot: "icon"
+			}
+		},
+		"item-active-label-text-color": {
+			value: color("secondary"),
+			description: "The current item's label: `secondary` below its icon, `on-secondary-container` beside it (in the pill).",
+			compose: `${set}Tokens.ItemActiveLabelTextColor`,
+			paints: {
+				property: "color",
+				slot: "label",
+				state: "current"
+			}
+		},
+		"item-inactive-label-text-color": {
+			value: color("on-surface-variant"),
+			description: "The other items’ labels.",
+			compose: `${set}Tokens.ItemInactiveLabelTextColor`,
+			paints: {
+				property: "color",
+				slot: "label"
+			}
+		}
+	};
+}
+/** The tokens of {@link NavigationBar}: `--md-comp-nav-bar-<part>`. */
+const navBarTokenSet = defineComponentTokens({
+	name: "md-comp-nav-bar",
+	tokens: {
+		"container-color": {
+			value: color("surface-container"),
+			description: "The bar.",
+			compose: "NavigationBarTokens.ContainerColor",
+			paints: { property: "background-color" }
+		},
+		...itemTokens("NavigationBar")
+	},
+	states: { layout: { "bar-start": { "item-active-label-text-color": color("on-secondary-container") } } }
+});
+/** The tokens of {@link NavigationRail}: `--md-comp-nav-rail-<part>`. */
+const navRailTokenSet = defineComponentTokens({
+	name: "md-comp-nav-rail",
+	tokens: {
+		"collapsed-container-color": {
+			value: color("surface"),
+			description: "The collapsed rail.",
+			compose: "NavigationRailCollapsedTokens.ContainerColor",
+			paints: { property: "background-color" }
+		},
+		"expanded-container-color": {
+			value: color("surface"),
+			description: "The expanded rail, beside the content.",
+			compose: "NavigationRailExpandedTokens.ContainerColor",
+			paints: {
+				property: "background-color",
+				state: "expanded"
+			}
+		},
+		"expanded-modal-container-color": {
+			value: color("surface-container"),
+			description: "The modal expanded rail, over the content.",
+			compose: "NavigationRailExpandedTokens.ModalContainerColor",
+			paints: {
+				property: "background-color",
+				state: "modal"
+			}
+		},
+		"expanded-modal-container-shape": {
+			value: corner("large"),
+			description: "The modal expanded rail's end corners.",
+			compose: "NavigationRailExpandedTokens.ModalContainerShape",
+			paints: {
+				property: "border-top-right-radius",
+				state: "modal"
+			}
+		},
+		...itemTokens("NavigationRail")
+	},
+	states: { layout: { "rail-start": { "item-active-label-text-color": color("on-secondary-container") } } }
+});
+//#endregion
+export { navBarTokenSet, navRailTokenSet };
+
+//# sourceMappingURL=navigation-tokens.js.map

package/dist/components/navigation/navigation-tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-tokens.js","names":[],"sources":["../../../src/components/navigation/navigation-tokens.ts"],"sourcesContent":["import { color, corner, defineComponentTokens, type ComponentToken } from '../../tokens/component';\n\n/*\n * The navigation bar's and rail's component tokens, M3 Expressive's `md.comp.nav-bar.*` and\n * `md.comp.nav-rail.*` names (checked against m3.material.io's token tables, 2026-10-14;\n * `navigation-bar` and `navigation-rail` are the baseline sets), with the defaults of\n * `navigation-styles.ts` and `nav-item-styles.ts`.\n *\n * The bar or rail and each of its items carry `data-tokens`, so an item's own state\n * (`data-current`) and layout (`data-layout`) pick its colours: the current label is\n * `secondary` below its icon and `on-secondary-container` beside it, in the pill. Hover,\n * focus, press and disabled colours stay classes.\n */\n\n/** The item tokens, shared by the bar and the rail. */\nfunction itemTokens(\n  set: 'NavigationBar' | 'NavigationRail',\n): Record<\n  | 'item-active-indicator-color'\n  | 'item-active-icon-color'\n  | 'item-inactive-icon-color'\n  | 'item-active-label-text-color'\n  | 'item-inactive-label-text-color',\n  ComponentToken\n> {\n  return {\n    'item-active-indicator-color': {\n      value: color('secondary-container'),\n      description: \"The current item's pill.\",\n      compose: `${set}Tokens.ItemActiveIndicatorColor`,\n      paints: { property: 'background-color', slot: 'indicator', state: 'current' },\n    },\n    'item-active-icon-color': {\n      value: color('on-secondary-container'),\n      description: \"The current item's icon.\",\n      compose: `${set}Tokens.ItemActiveIconColor`,\n      paints: { property: 'color', slot: 'icon', state: 'current' },\n    },\n    'item-inactive-icon-color': {\n      value: color('on-surface-variant'),\n      description: 'The other items’ icons.',\n      compose: `${set}Tokens.ItemInactiveIconColor`,\n      paints: { property: 'color', slot: 'icon' },\n    },\n    'item-active-label-text-color': {\n      value: color('secondary'),\n      description:\n        \"The current item's label: `secondary` below its icon, `on-secondary-container` beside it (in the pill).\",\n      compose: `${set}Tokens.ItemActiveLabelTextColor`,\n      paints: { property: 'color', slot: 'label', state: 'current' },\n    },\n    'item-inactive-label-text-color': {\n      value: color('on-surface-variant'),\n      description: 'The other items’ labels.',\n      compose: `${set}Tokens.ItemInactiveLabelTextColor`,\n      paints: { property: 'color', slot: 'label' },\n    },\n  };\n}\n\n/** The tokens of {@link NavigationBar}: `--md-comp-nav-bar-<part>`. */\nexport const navBarTokenSet = defineComponentTokens({\n  name: 'md-comp-nav-bar',\n  tokens: {\n    'container-color': {\n      value: color('surface-container'),\n      description: 'The bar.',\n      compose: 'NavigationBarTokens.ContainerColor',\n      paints: { property: 'background-color' },\n    },\n    ...itemTokens('NavigationBar'),\n  },\n  states: {\n    layout: { 'bar-start': { 'item-active-label-text-color': color('on-secondary-container') } },\n  },\n});\n\n/** The tokens of {@link NavigationRail}: `--md-comp-nav-rail-<part>`. */\nexport const navRailTokenSet = defineComponentTokens({\n  name: 'md-comp-nav-rail',\n  tokens: {\n    'collapsed-container-color': {\n      value: color('surface'),\n      description: 'The collapsed rail.',\n      compose: 'NavigationRailCollapsedTokens.ContainerColor',\n      paints: { property: 'background-color' },\n    },\n    'expanded-container-color': {\n      value: color('surface'),\n      description: 'The expanded rail, beside the content.',\n      compose: 'NavigationRailExpandedTokens.ContainerColor',\n      paints: { property: 'background-color', state: 'expanded' },\n    },\n    'expanded-modal-container-color': {\n      value: color('surface-container'),\n      description: 'The modal expanded rail, over the content.',\n      compose: 'NavigationRailExpandedTokens.ModalContainerColor',\n      paints: { property: 'background-color', state: 'modal' },\n    },\n    'expanded-modal-container-shape': {\n      value: corner('large'),\n      description: \"The modal expanded rail's end corners.\",\n      compose: 'NavigationRailExpandedTokens.ModalContainerShape',\n      paints: { property: 'border-top-right-radius', state: 'modal' },\n    },\n    ...itemTokens('NavigationRail'),\n  },\n  states: {\n    layout: { 'rail-start': { 'item-active-label-text-color': color('on-secondary-container') } },\n  },\n});\n"],"mappings":";;;AAeA,SAAS,WACP,KAQA;CACA,OAAO;EACL,+BAA+B;GAC7B,OAAO,MAAM,qBAAqB;GAClC,aAAa;GACb,SAAS,GAAG,IAAI;GAChB,QAAQ;IAAE,UAAU;IAAoB,MAAM;IAAa,OAAO;GAAU;EAC9E;EACA,0BAA0B;GACxB,OAAO,MAAM,wBAAwB;GACrC,aAAa;GACb,SAAS,GAAG,IAAI;GAChB,QAAQ;IAAE,UAAU;IAAS,MAAM;IAAQ,OAAO;GAAU;EAC9D;EACA,4BAA4B;GAC1B,OAAO,MAAM,oBAAoB;GACjC,aAAa;GACb,SAAS,GAAG,IAAI;GAChB,QAAQ;IAAE,UAAU;IAAS,MAAM;GAAO;EAC5C;EACA,gCAAgC;GAC9B,OAAO,MAAM,WAAW;GACxB,aACE;GACF,SAAS,GAAG,IAAI;GAChB,QAAQ;IAAE,UAAU;IAAS,MAAM;IAAS,OAAO;GAAU;EAC/D;EACA,kCAAkC;GAChC,OAAO,MAAM,oBAAoB;GACjC,aAAa;GACb,SAAS,GAAG,IAAI;GAChB,QAAQ;IAAE,UAAU;IAAS,MAAM;GAAQ;EAC7C;CACF;AACF;;AAGA,MAAa,iBAAiB,sBAAsB;CAClD,MAAM;CACN,QAAQ;EACN,mBAAmB;GACjB,OAAO,MAAM,mBAAmB;GAChC,aAAa;GACb,SAAS;GACT,QAAQ,EAAE,UAAU,mBAAmB;EACzC;EACA,GAAG,WAAW,eAAe;CAC/B;CACA,QAAQ,EACN,QAAQ,EAAE,aAAa,EAAE,gCAAgC,MAAM,wBAAwB,EAAE,EAAE,EAC7F;AACF,CAAC;;AAGD,MAAa,kBAAkB,sBAAsB;CACnD,MAAM;CACN,QAAQ;EACN,6BAA6B;GAC3B,OAAO,MAAM,SAAS;GACtB,aAAa;GACb,SAAS;GACT,QAAQ,EAAE,UAAU,mBAAmB;EACzC;EACA,4BAA4B;GAC1B,OAAO,MAAM,SAAS;GACtB,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAoB,OAAO;GAAW;EAC5D;EACA,kCAAkC;GAChC,OAAO,MAAM,mBAAmB;GAChC,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAoB,OAAO;GAAQ;EACzD;EACA,kCAAkC;GAChC,OAAO,OAAO,OAAO;GACrB,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAA2B,OAAO;GAAQ;EAChE;EACA,GAAG,WAAW,gBAAgB;CAChC;CACA,QAAQ,EACN,QAAQ,EAAE,cAAc,EAAE,gCAAgC,MAAM,wBAAwB,EAAE,EAAE,EAC9F;AACF,CAAC"}