@windmorph/react 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,403 @@
+import { VariantProps } from "../../utils/tv.js";
+//#region src/components/toolbar/toolbar-styles.d.ts
+/** Variant definitions for {@link DockedToolbar}; extend them to add variants. */
+export declare const dockedToolbarStyles: import("tailwind-variants").TVReturnType<{
+  arrangement: {
+    'space-between': {
+      root: string;
+    };
+    centered: {
+      root: string;
+    };
+  };
+  color: {
+    standard: {
+      root: string;
+    };
+    vibrant: {
+      root: string;
+    };
+  };
+}, {
+  root: string[];
+}, undefined, {
+  arrangement: {
+    'space-between': {
+      root: string;
+    };
+    centered: {
+      root: string;
+    };
+  };
+  color: {
+    standard: {
+      root: string;
+    };
+    vibrant: {
+      root: string;
+    };
+  };
+}, {
+  root: string[];
+}, import("tailwind-variants").TVReturnTypeLike<{
+  arrangement: {
+    'space-between': {
+      root: string;
+    };
+    centered: {
+      root: string;
+    };
+  };
+  color: {
+    standard: {
+      root: string;
+    };
+    vibrant: {
+      root: string;
+    };
+  };
+}, {
+  root: string[];
+}>>;
+/** Variant definitions for {@link FloatingToolbar}; extend them to add colour styles. */
+export declare const floatingToolbarStyles: import("tailwind-variants").TVReturnType<{
+  orientation: {
+    horizontal: {
+      root: string;
+      items: string;
+      collapsibleItems: string;
+      collapse: string;
+      clip: string;
+      toolbarSlot: string;
+      surface: string;
+      content: string;
+      fabSlot: string;
+    };
+    vertical: {
+      root: string;
+      items: string;
+      collapsibleItems: string;
+      collapse: string;
+      clip: string;
+      toolbarSlot: string;
+      surface: string;
+      content: string;
+      fabSlot: string;
+    };
+  };
+  color: {
+    standard: {
+      root: string;
+    };
+    vibrant: {
+      root: string;
+    };
+  };
+  /** Level 1 by default; turn it off over visually distinct content. */
+  elevated: {
+    true: {};
+    false: {};
+  };
+  exitEdge: {
+    readonly bottom: {
+      readonly root: "data-hidden:[transform:translateY(calc(100%+24px))]";
+    };
+    readonly top: {
+      readonly root: "data-hidden:[transform:translateY(calc(-100%-24px))]";
+    };
+    readonly start: {
+      readonly root: "data-hidden:[transform:translateX(calc(-100%-24px))] rtl:data-hidden:[transform:translateX(calc(100%+24px))]";
+    };
+    readonly end: {
+      readonly root: "data-hidden:[transform:translateX(calc(100%+24px))] rtl:data-hidden:[transform:translateX(calc(-100%-24px))]";
+    };
+  };
+  /** Paints the container on the root (no FAB) or on the toolbar surface (with a FAB). */
+  hasFab: {
+    false: {
+      root: string[];
+    };
+    true: {
+      root: string;
+      surface: string;
+    };
+  };
+  /** The side of the toolbar the FAB sits on (logical: start / top or end / bottom). */
+  fabAt: {
+    start: {
+      toolbarSlot: string;
+      fabSlot: string;
+    };
+    end: {
+      toolbarSlot: string;
+      fabSlot: string;
+    };
+  };
+}, {
+  root: string[];
+  items: string;
+  collapsibleItems: string;
+  collapse: string[];
+  clip: string[];
+  toolbarSlot: string;
+  surface: string[];
+  content: string;
+  fabSlot: string;
+  fabBox: string[];
+}, undefined, {
+  orientation: {
+    horizontal: {
+      root: string;
+      items: string;
+      collapsibleItems: string;
+      collapse: string;
+      clip: string;
+      toolbarSlot: string;
+      surface: string;
+      content: string;
+      fabSlot: string;
+    };
+    vertical: {
+      root: string;
+      items: string;
+      collapsibleItems: string;
+      collapse: string;
+      clip: string;
+      toolbarSlot: string;
+      surface: string;
+      content: string;
+      fabSlot: string;
+    };
+  };
+  color: {
+    standard: {
+      root: string;
+    };
+    vibrant: {
+      root: string;
+    };
+  };
+  /** Level 1 by default; turn it off over visually distinct content. */
+  elevated: {
+    true: {};
+    false: {};
+  };
+  exitEdge: {
+    readonly bottom: {
+      readonly root: "data-hidden:[transform:translateY(calc(100%+24px))]";
+    };
+    readonly top: {
+      readonly root: "data-hidden:[transform:translateY(calc(-100%-24px))]";
+    };
+    readonly start: {
+      readonly root: "data-hidden:[transform:translateX(calc(-100%-24px))] rtl:data-hidden:[transform:translateX(calc(100%+24px))]";
+    };
+    readonly end: {
+      readonly root: "data-hidden:[transform:translateX(calc(100%+24px))] rtl:data-hidden:[transform:translateX(calc(-100%-24px))]";
+    };
+  };
+  /** Paints the container on the root (no FAB) or on the toolbar surface (with a FAB). */
+  hasFab: {
+    false: {
+      root: string[];
+    };
+    true: {
+      root: string;
+      surface: string;
+    };
+  };
+  /** The side of the toolbar the FAB sits on (logical: start / top or end / bottom). */
+  fabAt: {
+    start: {
+      toolbarSlot: string;
+      fabSlot: string;
+    };
+    end: {
+      toolbarSlot: string;
+      fabSlot: string;
+    };
+  };
+}, {
+  root: string[];
+  items: string;
+  collapsibleItems: string;
+  collapse: string[];
+  clip: string[];
+  toolbarSlot: string;
+  surface: string[];
+  content: string;
+  fabSlot: string;
+  fabBox: string[];
+}, import("tailwind-variants").TVReturnTypeLike<{
+  orientation: {
+    horizontal: {
+      root: string;
+      items: string;
+      collapsibleItems: string;
+      collapse: string;
+      clip: string;
+      toolbarSlot: string;
+      surface: string;
+      content: string;
+      fabSlot: string;
+    };
+    vertical: {
+      root: string;
+      items: string;
+      collapsibleItems: string;
+      collapse: string;
+      clip: string;
+      toolbarSlot: string;
+      surface: string;
+      content: string;
+      fabSlot: string;
+    };
+  };
+  color: {
+    standard: {
+      root: string;
+    };
+    vibrant: {
+      root: string;
+    };
+  };
+  /** Level 1 by default; turn it off over visually distinct content. */
+  elevated: {
+    true: {};
+    false: {};
+  };
+  exitEdge: {
+    readonly bottom: {
+      readonly root: "data-hidden:[transform:translateY(calc(100%+24px))]";
+    };
+    readonly top: {
+      readonly root: "data-hidden:[transform:translateY(calc(-100%-24px))]";
+    };
+    readonly start: {
+      readonly root: "data-hidden:[transform:translateX(calc(-100%-24px))] rtl:data-hidden:[transform:translateX(calc(100%+24px))]";
+    };
+    readonly end: {
+      readonly root: "data-hidden:[transform:translateX(calc(100%+24px))] rtl:data-hidden:[transform:translateX(calc(-100%-24px))]";
+    };
+  };
+  /** Paints the container on the root (no FAB) or on the toolbar surface (with a FAB). */
+  hasFab: {
+    false: {
+      root: string[];
+    };
+    true: {
+      root: string;
+      surface: string;
+    };
+  };
+  /** The side of the toolbar the FAB sits on (logical: start / top or end / bottom). */
+  fabAt: {
+    start: {
+      toolbarSlot: string;
+      fabSlot: string;
+    };
+    end: {
+      toolbarSlot: string;
+      fabSlot: string;
+    };
+  };
+}, {
+  root: string[];
+  items: string;
+  collapsibleItems: string;
+  collapse: string[];
+  clip: string[];
+  toolbarSlot: string;
+  surface: string[];
+  content: string;
+  fabSlot: string;
+  fabBox: string[];
+}>>;
+/** Variant definitions for {@link ToolbarFab}. */
+export declare const toolbarFabStyles: import("tailwind-variants").TVReturnType<{
+  color: {
+    standard: {};
+    vibrant: {};
+  };
+  /**
+   * Like `Fab`: level 2 (Compose's toolbar FAB: hover 3, pressed 2), level 1 (hover 2,
+   * pressed 1), or level 0 for a flat FAB. The hover level never applies while pressed.
+   */
+  elevation: {
+    default: {
+      root: string;
+    };
+    lowered: {
+      root: string;
+    };
+    flat: {
+      root: string;
+    };
+  };
+}, {
+  root: string[];
+  icon: string;
+}, undefined, {
+  color: {
+    standard: {};
+    vibrant: {};
+  };
+  /**
+   * Like `Fab`: level 2 (Compose's toolbar FAB: hover 3, pressed 2), level 1 (hover 2,
+   * pressed 1), or level 0 for a flat FAB. The hover level never applies while pressed.
+   */
+  elevation: {
+    default: {
+      root: string;
+    };
+    lowered: {
+      root: string;
+    };
+    flat: {
+      root: string;
+    };
+  };
+}, {
+  root: string[];
+  icon: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  color: {
+    standard: {};
+    vibrant: {};
+  };
+  /**
+   * Like `Fab`: level 2 (Compose's toolbar FAB: hover 3, pressed 2), level 1 (hover 2,
+   * pressed 1), or level 0 for a flat FAB. The hover level never applies while pressed.
+   */
+  elevation: {
+    default: {
+      root: string;
+    };
+    lowered: {
+      root: string;
+    };
+    flat: {
+      root: string;
+    };
+  };
+}, {
+  root: string[];
+  icon: string;
+}>>;
+/**
+ * The variants of {@link dockedToolbarStyles}, 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 DockedToolbarStyleProps = VariantProps<typeof dockedToolbarStyles>;
+export type DockedToolbarArrangement = NonNullable<DockedToolbarStyleProps['arrangement']>;
+export type DockedToolbarColor = NonNullable<DockedToolbarStyleProps['color']>;
+/**
+ * The variants of {@link floatingToolbarStyles}, 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 FloatingToolbarStyleProps = VariantProps<typeof floatingToolbarStyles>;
+export type FloatingToolbarColor = NonNullable<FloatingToolbarStyleProps['color']>;
+export type ToolbarOrientation = NonNullable<FloatingToolbarStyleProps['orientation']>;
+export type ToolbarExitEdge = NonNullable<FloatingToolbarStyleProps['exitEdge']>;
+//#endregion
+//# sourceMappingURL=toolbar-styles.d.ts.map

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

@@ -0,0 +1,253 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/toolbar/toolbar-styles.ts
+const spatialFast = ["[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration)]", "[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing)]"];
+/** The root's exit-on-scroll motion; each edge variant sets the hidden transform. */
+const exitMotion = [
+	"data-hidden:invisible motion-reduce:data-hidden:opacity-0 motion-reduce:data-hidden:[transform:none]",
+	"[transition-property:transform,opacity,visibility]",
+	"[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-effects-fast-duration),max(var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-effects-fast-duration))]",
+	"[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-effects-fast-easing),linear]"
+];
+/** Where a hidden toolbar goes: past its edge plus the 24px margin of a vertical toolbar. */
+const exitEdges = {
+	bottom: { root: "data-hidden:[transform:translateY(calc(100%+24px))]" },
+	top: { root: "data-hidden:[transform:translateY(calc(-100%-24px))]" },
+	start: { root: "data-hidden:[transform:translateX(calc(-100%-24px))] rtl:data-hidden:[transform:translateX(calc(100%+24px))]" },
+	end: { root: "data-hidden:[transform:translateX(calc(100%+24px))] rtl:data-hidden:[transform:translateX(calc(-100%-24px))]" }
+};
+/** Variant definitions for {@link DockedToolbar}; extend them to add variants. */
+const dockedToolbarStyles = tv({
+	slots: { root: [
+		"flex h-[64px] w-full items-center bg-[var(--_md-comp-toolbar-docked-container-color)] ps-[16px] pe-[16px]",
+		"forced-colors:border-t forced-colors:border-solid forced-colors:border-[CanvasText]",
+		...exitMotion,
+		"data-hidden:[transform:translateY(100%)]"
+	] },
+	variants: {
+		arrangement: {
+			"space-between": { root: "justify-between" },
+			centered: { root: "justify-center gap-[32px]" }
+		},
+		color: {
+			standard: { root: "text-on-surface-variant" },
+			vibrant: { root: "text-on-primary-container [--md-comp-icon-button-icon-color:currentColor]" }
+		}
+	},
+	defaultVariants: {
+		arrangement: "centered",
+		color: "standard"
+	}
+});
+/** Variant definitions for {@link FloatingToolbar}; extend them to add colour styles. */
+const floatingToolbarStyles = tv({
+	slots: {
+		root: ["inline-flex shrink-0 items-center justify-center [overflow-anchor:auto] **:[overflow-anchor:none]", ...exitMotion],
+		items: "flex shrink-0 items-center",
+		collapsibleItems: "",
+		collapse: [
+			"flex shrink-0",
+			"[transition-property:width,height]",
+			"[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration)]",
+			"[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing)]",
+			"data-collapsed:[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-effects-fast-easing)]",
+			"data-resized:[transition-duration:0s]"
+		],
+		clip: [
+			"flex min-h-0 min-w-0 data-collapsed:[clip-path:inset(50%)]",
+			"[transition-property:clip-path] [transition-duration:0s]",
+			"data-collapsed:[transition-delay:var(--md-sys-motion-spring-effects-fast-duration)]",
+			"motion-reduce:data-collapsed:[transition-delay:0s]"
+		],
+		toolbarSlot: "flex shrink-0",
+		surface: [
+			"overflow-hidden rounded-[var(--_md-comp-toolbar-floating-container-shape)] opacity-100",
+			"forced-colors:border forced-colors:border-solid forced-colors:border-[CanvasText]",
+			"data-collapsed:opacity-0 data-collapsed:shadow-elevation-0",
+			"data-resized:[transition-duration:0s]",
+			"[transition-property:width,height,box-shadow,opacity]",
+			"[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-effects-fast-duration)]",
+			"[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-effects-fast-easing)]",
+			"data-collapsed:[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-effects-fast-easing)]"
+		],
+		content: "flex items-center",
+		fabSlot: "flex shrink-0 items-center",
+		fabBox: [
+			"flex size-[56px] shrink-0 data-collapsed:size-[80px]",
+			"[transition-property:width,height]",
+			...spatialFast
+		]
+	},
+	variants: {
+		orientation: {
+			horizontal: {
+				root: "min-h-[64px] flex-row",
+				items: "flex-row gap-[8px] ps-[4px] pe-[4px]",
+				collapsibleItems: "w-max shrink-0",
+				collapse: "data-collapsed:w-0",
+				clip: "w-full flex-row [clip-path:inset(-12px_-2px)]",
+				toolbarSlot: "h-[64px] w-(--m3-toolbar-size) flex-row",
+				surface: "h-[64px] w-(--m3-toolbar-size) shrink-0 data-collapsed:w-0",
+				content: "h-full w-max flex-row gap-[8px] ps-[12px] pe-[12px]",
+				fabSlot: "w-[56px] flex-row"
+			},
+			vertical: {
+				root: "min-w-[64px] flex-col",
+				items: "flex-col gap-[8px] pt-[4px] pb-[4px]",
+				collapsibleItems: "h-max shrink-0",
+				collapse: "flex-col data-collapsed:h-0",
+				clip: "h-full flex-col [clip-path:inset(-2px_-12px)]",
+				toolbarSlot: "h-(--m3-toolbar-size) w-[64px] flex-col",
+				surface: "h-(--m3-toolbar-size) w-[64px] shrink-0 data-collapsed:h-0",
+				content: "h-max w-full flex-col gap-[8px] pt-[12px] pb-[12px]",
+				fabSlot: "h-[56px] flex-col"
+			}
+		},
+		color: {
+			standard: { root: "text-on-surface-variant" },
+			vibrant: { root: "text-on-primary-container [--md-comp-icon-button-icon-color:currentColor]" }
+		},
+		/** Level 1 by default; turn it off over visually distinct content. */
+		elevated: {
+			true: {},
+			false: {}
+		},
+		exitEdge: exitEdges,
+		/** Paints the container on the root (no FAB) or on the toolbar surface (with a FAB). */
+		hasFab: {
+			false: { root: ["rounded-[var(--_md-comp-toolbar-floating-container-shape)] bg-[var(--_md-comp-toolbar-floating-container-color)] p-[8px]", "forced-colors:border forced-colors:border-solid forced-colors:border-[CanvasText]"] },
+			true: {
+				root: "gap-[8px]",
+				surface: "bg-[var(--_md-comp-toolbar-floating-container-color)]"
+			}
+		},
+		/** The side of the toolbar the FAB sits on (logical: start / top or end / bottom). */
+		fabAt: {
+			start: {
+				toolbarSlot: "justify-start",
+				fabSlot: "justify-start"
+			},
+			end: {
+				toolbarSlot: "justify-end",
+				fabSlot: "justify-end"
+			}
+		}
+	},
+	compoundVariants: [
+		{
+			hasFab: false,
+			elevated: true,
+			class: { root: "shadow-elevation-1" }
+		},
+		{
+			hasFab: true,
+			elevated: true,
+			class: { surface: "shadow-elevation-1" }
+		},
+		{
+			hasFab: true,
+			orientation: "horizontal",
+			class: { root: "h-[80px]" }
+		},
+		{
+			hasFab: true,
+			orientation: "vertical",
+			class: { root: "w-[80px]" }
+		},
+		{
+			hasFab: true,
+			fabAt: "start",
+			orientation: "horizontal",
+			class: { root: "flex-row-reverse" }
+		},
+		{
+			hasFab: true,
+			fabAt: "start",
+			orientation: "vertical",
+			class: { root: "flex-col-reverse" }
+		}
+	],
+	defaultVariants: {
+		orientation: "horizontal",
+		color: "standard",
+		elevated: true,
+		exitEdge: "bottom",
+		hasFab: false,
+		fabAt: "end"
+	}
+});
+/**
+* Collapsing content is anchored like Compose's AnimatedVisibility: horizontally, leading
+* content expands from the start and shrinks towards the end (trailing: the reverse);
+* vertically, leading content stays at the bottom and trailing content at the top.
+*/
+const toolbarCollapseAnchor = tv({
+	base: "",
+	variants: {
+		slot: {
+			leading: "",
+			trailing: ""
+		},
+		orientation: {
+			horizontal: "",
+			vertical: ""
+		}
+	},
+	compoundVariants: [
+		{
+			slot: "leading",
+			orientation: "horizontal",
+			class: "justify-start data-collapsed:justify-end"
+		},
+		{
+			slot: "trailing",
+			orientation: "horizontal",
+			class: "justify-end data-collapsed:justify-start"
+		},
+		{
+			slot: "leading",
+			orientation: "vertical",
+			class: "justify-end"
+		},
+		{
+			slot: "trailing",
+			orientation: "vertical",
+			class: "justify-start"
+		}
+	]
+});
+/** Variant definitions for {@link ToolbarFab}. */
+const toolbarFabStyles = tv({
+	slots: {
+		root: [
+			"inline-flex size-full cursor-pointer items-center justify-center select-none",
+			"rounded-[var(--_md-comp-toolbar-floating-fab-container-shape)]",
+			"bg-[var(--_md-comp-toolbar-floating-fab-container-color)] text-[color:var(--_md-comp-toolbar-floating-fab-icon-color)]",
+			"state-layer focus-ring container-motion",
+			"forced-colors:border forced-colors:border-solid forced-colors:border-[CanvasText]"
+		],
+		icon: "inline-flex size-[24px] shrink-0 items-center justify-center [&>svg]:size-full"
+	},
+	variants: {
+		color: {
+			standard: {},
+			vibrant: {}
+		},
+		/**
+		* Like `Fab`: level 2 (Compose's toolbar FAB: hover 3, pressed 2), level 1 (hover 2,
+		* pressed 1), or level 0 for a flat FAB. The hover level never applies while pressed.
+		*/
+		elevation: {
+			default: { root: "shadow-elevation-2 data-hovered:not-data-pressed:shadow-elevation-3" },
+			lowered: { root: "shadow-elevation-1 data-hovered:not-data-pressed:shadow-elevation-2" },
+			flat: { root: "shadow-elevation-0" }
+		}
+	},
+	defaultVariants: {
+		color: "standard",
+		elevation: "default"
+	}
+});
+//#endregion
+export { dockedToolbarStyles, floatingToolbarStyles, toolbarCollapseAnchor, toolbarFabStyles };
+
+//# sourceMappingURL=toolbar-styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-styles.js","names":[],"sources":["../../../src/components/toolbar/toolbar-styles.ts"],"sourcesContent":["import { tv, type VariantProps } from '../../utils/tv';\n\n/*\n * Values follow the M3 Expressive spec and its tokens (the FloatingToolbar / DockedToolbar\n * token files), with Compose Material 3's FloatingToolbar.kt and AppBar.kt's\n * FlexibleBottomAppBar as the recipe.\n *\n * Docked: 64px, `surface-container`, square corners, no elevation, 16px at each end; items\n * sit 32px apart in the centre (the default) or spread out (space-between, for compact\n * windows).\n *\n * Floating: at least 64px across, full corners, 8px padding, `surface-container` (standard)\n * or `primary-container` (vibrant), level 1 by default (M3: floating toolbars have\n * elevation by default). Content is `on-surface-variant` (standard, the icon-button role)\n * or `on-primary-container` (vibrant). Compose's icon buttons take up 48px of layout while\n * ours take 40px (the 48px touch target is overlaid), so every content group adds 4px at\n * its ends and 8px between items, which reproduces Compose's spacing for icon buttons.\n * Leading / trailing content expands on the fast spatial spring and collapses on the fast\n * effects curve, its box's width (or height) in px between 0 and the content's measured\n * size, so the root's size follows it without transforms. Collapsed content stays in the tab order and\n * the accessibility tree, clipped to nothing, and focusing it expands the toolbar.\n *\n * Exiting on scroll (`visible={false}`): the toolbar slides off its edge on the fast\n * spatial spring (a `transform` set only while hidden, so it composes with Tailwind's\n * `translate-*` utilities); reduced motion fades it instead.\n *\n * With a FAB: the toolbar is level 1 expanded and level 0 collapsed, 8px from the FAB.\n * Collapsing shrinks the toolbar's width to 0 towards the FAB while the FAB grows from 56px\n * to 80px; the component keeps its expanded size, as Compose's layout does.\n *\n * Container colours and the floating toolbar's corners come from the component tokens\n * (`toolbar-tokens.ts`, `--md-comp-toolbar-docked-*` and `--md-comp-toolbar-floating-*`):\n * the roots carry `data-tokens`, the floating one also `data-color`. A consumer class still\n * wins in `cn()`.\n *\n * Every class is written out in full so Tailwind can find it.\n */\n\nconst spatialFast = [\n  '[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration)]',\n  '[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing)]',\n];\n\n/** The root's exit-on-scroll motion; each edge variant sets the hidden transform. */\nconst exitMotion = [\n  'data-hidden:invisible motion-reduce:data-hidden:opacity-0 motion-reduce:data-hidden:[transform:none]',\n  '[transition-property:transform,opacity,visibility]',\n  '[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-effects-fast-duration),max(var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-effects-fast-duration))]',\n  '[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-effects-fast-easing),linear]',\n];\n\n/** Where a hidden toolbar goes: past its edge plus the 24px margin of a vertical toolbar. */\nconst exitEdges = {\n  bottom: { root: 'data-hidden:[transform:translateY(calc(100%+24px))]' },\n  top: { root: 'data-hidden:[transform:translateY(calc(-100%-24px))]' },\n  start: {\n    root: 'data-hidden:[transform:translateX(calc(-100%-24px))] rtl:data-hidden:[transform:translateX(calc(100%+24px))]',\n  },\n  end: {\n    root: 'data-hidden:[transform:translateX(calc(100%+24px))] rtl:data-hidden:[transform:translateX(calc(-100%-24px))]',\n  },\n} as const;\n\n/** Variant definitions for {@link DockedToolbar}; extend them to add variants. */\nexport const dockedToolbarStyles = tv({\n  slots: {\n    root: [\n      'flex h-[64px] w-full items-center bg-[var(--_md-comp-toolbar-docked-container-color)] ps-[16px] pe-[16px]',\n      // Forced colours paint the container as Canvas: a CanvasText line marks its top edge\n      // against the page (2026-10-15).\n      'forced-colors:border-t forced-colors:border-solid forced-colors:border-[CanvasText]',\n      ...exitMotion,\n      'data-hidden:[transform:translateY(100%)]',\n    ],\n  },\n  variants: {\n    arrangement: {\n      'space-between': { root: 'justify-between' },\n      centered: { root: 'justify-center gap-[32px]' },\n    },\n    // As the floating toolbar's (2026-10-15): vibrant is primary-container (its own token,\n    // scoped by `data-color`, 2026-10-17), and standard icon buttons take its content colour.\n    color: {\n      standard: { root: 'text-on-surface-variant' },\n      vibrant: {\n        root: 'text-on-primary-container [--md-comp-icon-button-icon-color:currentColor]',\n      },\n    },\n  },\n  defaultVariants: { arrangement: 'centered', color: 'standard' },\n});\n\n/** Variant definitions for {@link FloatingToolbar}; extend them to add colour styles. */\nexport const floatingToolbarStyles = tv({\n  slots: {\n    // Collapsing and expanding resize its parts in place, so none of them is ever the\n    // browser's scroll anchor (which would scroll the page to follow it). The root itself\n    // may be: its start edge stays put while it resizes, whereas excluding it hands the\n    // anchor to the content after it, which moves by the whole change (2026-10-15).\n    root: [\n      'inline-flex shrink-0 items-center justify-center [overflow-anchor:auto] **:[overflow-anchor:none]',\n      ...exitMotion,\n    ],\n    // A group of items (main, leading or trailing content).\n    items: 'flex shrink-0 items-center',\n    collapsibleItems: '',\n    // Collapsible leading / trailing content: a box that animates its width (or height) in\n    // px between 0 and the content's measured size (2026-10-17, as Compose's\n    // `expandHorizontally`), so expanding shows the spatial spring's overshoot, which a\n    // 0fr ↔ 1fr track couldn't. Collapsing uses the effects spring, which doesn't\n    // overshoot, because a size can't overshoot below 0 and would bounce back open by a\n    // pixel or two. Before it is measured (on the server) the box takes the content's\n    // natural size, or 0 collapsed. Collapsed content stays focusable and in the\n    // accessibility tree.\n    collapse: [\n      'flex shrink-0',\n      '[transition-property:width,height]',\n      '[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration)]',\n      '[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing)]',\n      'data-collapsed:[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-effects-fast-easing)]',\n      // The content itself changed size (a web font arriving): follow it at once.\n      'data-resized:[transition-duration:0s]',\n    ],\n    // Clips the content horizontally (or vertically) while it collapses, leaving room for\n    // focus rings and touch targets on the other axis. Once the track has closed (a delay\n    // as long as the collapse) it clips everything, so no sliver stays visible.\n    clip: [\n      'flex min-h-0 min-w-0 data-collapsed:[clip-path:inset(50%)]',\n      '[transition-property:clip-path] [transition-duration:0s]',\n      'data-collapsed:[transition-delay:var(--md-sys-motion-spring-effects-fast-duration)]',\n      // Under reduced motion the track closes at once, and so does the clip.\n      'motion-reduce:data-collapsed:[transition-delay:0s]',\n    ],\n    // FAB layout: the toolbar's slot keeps the expanded width while the surface shrinks,\n    // collapsing on the effects spring for the same reason as `collapse`.\n    toolbarSlot: 'flex shrink-0',\n    surface: [\n      'overflow-hidden rounded-[var(--_md-comp-toolbar-floating-container-shape)] opacity-100',\n      // Forced colours drop the container and its shadow: a 1px CanvasText boundary instead,\n      // as menus and FABs (2026-10-15).\n      'forced-colors:border forced-colors:border-solid forced-colors:border-[CanvasText]',\n      'data-collapsed:opacity-0 data-collapsed:shadow-elevation-0',\n      'data-resized:[transition-duration:0s]',\n      // Width, height and shadow move on the spatial spring; the surface also fades on the\n      // fast effects spring, so the last pixels of a collapse never show as a thin line.\n      // Collapsed, it stays focusable and in the accessibility tree, clipped to nothing.\n      '[transition-property:width,height,box-shadow,opacity]',\n      '[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-effects-fast-duration)]',\n      '[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-effects-fast-easing)]',\n      'data-collapsed:[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-effects-fast-easing)]',\n    ],\n    content: 'flex items-center',\n    fabSlot: 'flex shrink-0 items-center',\n    fabBox: [\n      'flex size-[56px] shrink-0 data-collapsed:size-[80px]',\n      '[transition-property:width,height]',\n      ...spatialFast,\n    ],\n  },\n  variants: {\n    orientation: {\n      horizontal: {\n        root: 'min-h-[64px] flex-row',\n        items: 'flex-row gap-[8px] ps-[4px] pe-[4px]',\n        // Collapsible content keeps its natural width while its box closes (it's measured).\n        collapsibleItems: 'w-max shrink-0',\n        collapse: 'data-collapsed:w-0',\n        clip: 'w-full flex-row [clip-path:inset(-12px_-2px)]',\n        toolbarSlot: 'h-[64px] w-(--m3-toolbar-size) flex-row',\n        surface: 'h-[64px] w-(--m3-toolbar-size) shrink-0 data-collapsed:w-0',\n        content: 'h-full w-max flex-row gap-[8px] ps-[12px] pe-[12px]',\n        fabSlot: 'w-[56px] flex-row',\n      },\n      vertical: {\n        root: 'min-w-[64px] flex-col',\n        items: 'flex-col gap-[8px] pt-[4px] pb-[4px]',\n        collapsibleItems: 'h-max shrink-0',\n        collapse: 'flex-col data-collapsed:h-0',\n        clip: 'h-full flex-col [clip-path:inset(-2px_-12px)]',\n        toolbarSlot: 'h-(--m3-toolbar-size) w-[64px] flex-col',\n        surface: 'h-(--m3-toolbar-size) w-[64px] shrink-0 data-collapsed:h-0',\n        content: 'h-max w-full flex-col gap-[8px] pt-[12px] pb-[12px]',\n        fabSlot: 'h-[56px] flex-col',\n      },\n    },\n    color: {\n      standard: { root: 'text-on-surface-variant' },\n      // Standard and outlined icon buttons take the vibrant content colour.\n      vibrant: {\n        root: 'text-on-primary-container [--md-comp-icon-button-icon-color:currentColor]',\n      },\n    },\n    /** Level 1 by default; turn it off over visually distinct content. */\n    elevated: { true: {}, false: {} },\n    exitEdge: exitEdges,\n    /** Paints the container on the root (no FAB) or on the toolbar surface (with a FAB). */\n    hasFab: {\n      false: {\n        root: [\n          'rounded-[var(--_md-comp-toolbar-floating-container-shape)] bg-[var(--_md-comp-toolbar-floating-container-color)] p-[8px]',\n          'forced-colors:border forced-colors:border-solid forced-colors:border-[CanvasText]',\n        ],\n      },\n      true: {\n        root: 'gap-[8px]',\n        surface: 'bg-[var(--_md-comp-toolbar-floating-container-color)]',\n      },\n    },\n    /** The side of the toolbar the FAB sits on (logical: start / top or end / bottom). */\n    fabAt: {\n      start: { toolbarSlot: 'justify-start', fabSlot: 'justify-start' },\n      end: { toolbarSlot: 'justify-end', fabSlot: 'justify-end' },\n    },\n  },\n  compoundVariants: [\n    { hasFab: false, elevated: true, class: { root: 'shadow-elevation-1' } },\n    // With a FAB, the toolbar's own surface is level 1 expanded and level 0 collapsed.\n    { hasFab: true, elevated: true, class: { surface: 'shadow-elevation-1' } },\n    // Fixed at the FAB's largest size, as Compose's layout: the FAB's spring overshoot\n    // (80 → 82px) spills over the edges instead of resizing the root and moving the page.\n    { hasFab: true, orientation: 'horizontal', class: { root: 'h-[80px]' } },\n    { hasFab: true, orientation: 'vertical', class: { root: 'w-[80px]' } },\n    // The FAB comes first visually but after the toolbar in reading order, as in Compose.\n    {\n      hasFab: true,\n      fabAt: 'start',\n      orientation: 'horizontal',\n      class: { root: 'flex-row-reverse' },\n    },\n    { hasFab: true, fabAt: 'start', orientation: 'vertical', class: { root: 'flex-col-reverse' } },\n  ],\n  defaultVariants: {\n    orientation: 'horizontal',\n    color: 'standard',\n    elevated: true,\n    exitEdge: 'bottom',\n    hasFab: false,\n    fabAt: 'end',\n  },\n});\n\n/**\n * Collapsing content is anchored like Compose's AnimatedVisibility: horizontally, leading\n * content expands from the start and shrinks towards the end (trailing: the reverse);\n * vertically, leading content stays at the bottom and trailing content at the top.\n */\nexport const toolbarCollapseAnchor = tv({\n  base: '',\n  variants: {\n    slot: { leading: '', trailing: '' },\n    orientation: { horizontal: '', vertical: '' },\n  },\n  compoundVariants: [\n    {\n      slot: 'leading',\n      orientation: 'horizontal',\n      class: 'justify-start data-collapsed:justify-end',\n    },\n    {\n      slot: 'trailing',\n      orientation: 'horizontal',\n      class: 'justify-end data-collapsed:justify-start',\n    },\n    { slot: 'leading', orientation: 'vertical', class: 'justify-end' },\n    { slot: 'trailing', orientation: 'vertical', class: 'justify-start' },\n  ],\n});\n\n/** Variant definitions for {@link ToolbarFab}. */\nexport const toolbarFabStyles = tv({\n  slots: {\n    root: [\n      'inline-flex size-full cursor-pointer items-center justify-center select-none',\n      'rounded-[var(--_md-comp-toolbar-floating-fab-container-shape)]',\n      'bg-[var(--_md-comp-toolbar-floating-fab-container-color)] text-[color:var(--_md-comp-toolbar-floating-fab-icon-color)]',\n      'state-layer focus-ring container-motion',\n      'forced-colors:border forced-colors:border-solid forced-colors:border-[CanvasText]',\n    ],\n    icon: 'inline-flex size-[24px] shrink-0 items-center justify-center [&>svg]:size-full',\n  },\n  variants: {\n    // The colours come from the FAB's tokens (`toolbarFabTokenSet`), picked by `data-color`.\n    color: { standard: {}, vibrant: {} },\n    /**\n     * Like `Fab`: level 2 (Compose's toolbar FAB: hover 3, pressed 2), level 1 (hover 2,\n     * pressed 1), or level 0 for a flat FAB. The hover level never applies while pressed.\n     */\n    elevation: {\n      default: { root: 'shadow-elevation-2 data-hovered:not-data-pressed:shadow-elevation-3' },\n      lowered: { root: 'shadow-elevation-1 data-hovered:not-data-pressed:shadow-elevation-2' },\n      flat: { root: 'shadow-elevation-0' },\n    },\n  },\n  defaultVariants: { color: 'standard', elevation: 'default' },\n});\n\n/**\n * The variants of {@link dockedToolbarStyles}, 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 DockedToolbarStyleProps = VariantProps<typeof dockedToolbarStyles>;\nexport type DockedToolbarArrangement = NonNullable<DockedToolbarStyleProps['arrangement']>;\nexport type DockedToolbarColor = NonNullable<DockedToolbarStyleProps['color']>;\n/**\n * The variants of {@link floatingToolbarStyles}, 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 FloatingToolbarStyleProps = VariantProps<typeof floatingToolbarStyles>;\nexport type FloatingToolbarColor = NonNullable<FloatingToolbarStyleProps['color']>;\nexport type ToolbarOrientation = NonNullable<FloatingToolbarStyleProps['orientation']>;\nexport type ToolbarExitEdge = NonNullable<FloatingToolbarStyleProps['exitEdge']>;\n"],"mappings":"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"}