@windmorph/react 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,286 @@
+import { VariantProps } from "../../utils/tv.js";
+//#region src/components/fab/fab-styles.d.ts
+/** Variant definitions for {@link Fab}; extend them to add colour styles. */
+export declare const fabStyles: import("tailwind-variants").TVReturnType<{
+  color: {
+    readonly 'primary-container': {};
+    readonly 'secondary-container': {};
+    readonly 'tertiary-container': {};
+    readonly primary: {};
+    readonly secondary: {};
+    readonly tertiary: {};
+  };
+  elevation: {
+    readonly default: {
+      readonly root: "shadow-elevation-3 data-hovered:not-data-pressed:shadow-elevation-4";
+    };
+    readonly lowered: {
+      readonly root: "shadow-elevation-1 data-hovered:not-data-pressed:shadow-elevation-2";
+    };
+    readonly flat: {
+      readonly root: "shadow-elevation-0";
+    };
+  };
+  size: {
+    default: {
+      root: string;
+      icon: string;
+    };
+    md: {
+      root: string;
+      icon: string;
+    };
+    lg: {
+      root: string;
+      icon: string;
+    };
+  };
+}, {
+  root: string[];
+  icon: string;
+}, undefined, {
+  color: {
+    readonly 'primary-container': {};
+    readonly 'secondary-container': {};
+    readonly 'tertiary-container': {};
+    readonly primary: {};
+    readonly secondary: {};
+    readonly tertiary: {};
+  };
+  elevation: {
+    readonly default: {
+      readonly root: "shadow-elevation-3 data-hovered:not-data-pressed:shadow-elevation-4";
+    };
+    readonly lowered: {
+      readonly root: "shadow-elevation-1 data-hovered:not-data-pressed:shadow-elevation-2";
+    };
+    readonly flat: {
+      readonly root: "shadow-elevation-0";
+    };
+  };
+  size: {
+    default: {
+      root: string;
+      icon: string;
+    };
+    md: {
+      root: string;
+      icon: string;
+    };
+    lg: {
+      root: string;
+      icon: string;
+    };
+  };
+}, {
+  root: string[];
+  icon: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  color: {
+    readonly 'primary-container': {};
+    readonly 'secondary-container': {};
+    readonly 'tertiary-container': {};
+    readonly primary: {};
+    readonly secondary: {};
+    readonly tertiary: {};
+  };
+  elevation: {
+    readonly default: {
+      readonly root: "shadow-elevation-3 data-hovered:not-data-pressed:shadow-elevation-4";
+    };
+    readonly lowered: {
+      readonly root: "shadow-elevation-1 data-hovered:not-data-pressed:shadow-elevation-2";
+    };
+    readonly flat: {
+      readonly root: "shadow-elevation-0";
+    };
+  };
+  size: {
+    default: {
+      root: string;
+      icon: string;
+    };
+    md: {
+      root: string;
+      icon: string;
+    };
+    lg: {
+      root: string;
+      icon: string;
+    };
+  };
+}, {
+  root: string[];
+  icon: string;
+}>>;
+/** Variant definitions for {@link ExtendedFab}. */
+export declare const extendedFabStyles: import("tailwind-variants").TVReturnType<{
+  color: {
+    readonly 'primary-container': {};
+    readonly 'secondary-container': {};
+    readonly 'tertiary-container': {};
+    readonly primary: {};
+    readonly secondary: {};
+    readonly tertiary: {};
+  };
+  elevation: {
+    readonly default: {
+      readonly root: "shadow-elevation-3 data-hovered:not-data-pressed:shadow-elevation-4";
+    };
+    readonly lowered: {
+      readonly root: "shadow-elevation-1 data-hovered:not-data-pressed:shadow-elevation-2";
+    };
+    readonly flat: {
+      readonly root: "shadow-elevation-0";
+    };
+  };
+  size: {
+    sm: {
+      root: string;
+      icon: string;
+      text: string;
+    };
+    md: {
+      root: string;
+      icon: string;
+      text: string;
+    };
+    lg: {
+      root: string;
+      content: string[];
+      icon: string;
+      text: string;
+    };
+  };
+  hasIcon: {
+    true: {};
+    false: {
+      text: string;
+    };
+  };
+}, {
+  root: string[];
+  content: string;
+  icon: string;
+  collapse: string[];
+  label: string;
+  text: string;
+}, undefined, {
+  color: {
+    readonly 'primary-container': {};
+    readonly 'secondary-container': {};
+    readonly 'tertiary-container': {};
+    readonly primary: {};
+    readonly secondary: {};
+    readonly tertiary: {};
+  };
+  elevation: {
+    readonly default: {
+      readonly root: "shadow-elevation-3 data-hovered:not-data-pressed:shadow-elevation-4";
+    };
+    readonly lowered: {
+      readonly root: "shadow-elevation-1 data-hovered:not-data-pressed:shadow-elevation-2";
+    };
+    readonly flat: {
+      readonly root: "shadow-elevation-0";
+    };
+  };
+  size: {
+    sm: {
+      root: string;
+      icon: string;
+      text: string;
+    };
+    md: {
+      root: string;
+      icon: string;
+      text: string;
+    };
+    lg: {
+      root: string;
+      content: string[];
+      icon: string;
+      text: string;
+    };
+  };
+  hasIcon: {
+    true: {};
+    false: {
+      text: string;
+    };
+  };
+}, {
+  root: string[];
+  content: string;
+  icon: string;
+  collapse: string[];
+  label: string;
+  text: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  color: {
+    readonly 'primary-container': {};
+    readonly 'secondary-container': {};
+    readonly 'tertiary-container': {};
+    readonly primary: {};
+    readonly secondary: {};
+    readonly tertiary: {};
+  };
+  elevation: {
+    readonly default: {
+      readonly root: "shadow-elevation-3 data-hovered:not-data-pressed:shadow-elevation-4";
+    };
+    readonly lowered: {
+      readonly root: "shadow-elevation-1 data-hovered:not-data-pressed:shadow-elevation-2";
+    };
+    readonly flat: {
+      readonly root: "shadow-elevation-0";
+    };
+  };
+  size: {
+    sm: {
+      root: string;
+      icon: string;
+      text: string;
+    };
+    md: {
+      root: string;
+      icon: string;
+      text: string;
+    };
+    lg: {
+      root: string;
+      content: string[];
+      icon: string;
+      text: string;
+    };
+  };
+  hasIcon: {
+    true: {};
+    false: {
+      text: string;
+    };
+  };
+}, {
+  root: string[];
+  content: string;
+  icon: string;
+  collapse: string[];
+  label: string;
+  text: string;
+}>>;
+/**
+ * The variants of {@link fabStyles}, 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 FabStyleProps = VariantProps<typeof fabStyles>;
+/**
+ * The variants of {@link extendedFabStyles}, 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 ExtendedFabStyleProps = VariantProps<typeof extendedFabStyles>;
+export type FabColor = NonNullable<FabStyleProps['color']>;
+export type FabSize = NonNullable<FabStyleProps['size']>;
+export type FabElevation = NonNullable<FabStyleProps['elevation']>;
+export type ExtendedFabSize = NonNullable<ExtendedFabStyleProps['size']>;
+//#endregion
+//# sourceMappingURL=fab-styles.d.ts.map

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

@@ -0,0 +1,131 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/fab/fab-styles.ts
+/**
+* Colour styles: the three tonal containers (Compose tokens) and the three vibrant roles.
+* Their colours are the tokens' defaults; extend them with classes to add a style.
+*/
+const colors = {
+	"primary-container": {},
+	"secondary-container": {},
+	"tertiary-container": {},
+	primary: {},
+	secondary: {},
+	tertiary: {}
+};
+const elevation = {
+	default: { root: "shadow-elevation-3 data-hovered:not-data-pressed:shadow-elevation-4" },
+	lowered: { root: "shadow-elevation-1 data-hovered:not-data-pressed:shadow-elevation-2" },
+	flat: { root: "shadow-elevation-0" }
+};
+const base = [
+	"inline-flex shrink-0 cursor-pointer items-center justify-center align-middle select-none",
+	"font-plain whitespace-nowrap",
+	"state-layer focus-ring",
+	"forced-colors:border forced-colors:border-solid forced-colors:border-[CanvasText]",
+	"data-hidden:invisible data-hidden:[transform:scale(0.2)] data-hidden:opacity-0",
+	"data-appear:starting:[transform:scale(0.2)] data-appear:starting:opacity-0",
+	"motion-reduce:data-hidden:[transform:none] motion-reduce:data-appear:starting:[transform:none]",
+	"[--m3-transition-property:background-color,color,box-shadow,transform,opacity,visibility]",
+	"[--m3-transition-duration:var(--md-sys-motion-spring-effects-fast-duration),var(--md-sys-motion-spring-effects-fast-duration),var(--md-sys-motion-spring-effects-fast-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))]",
+	"[--m3-transition-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),var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-effects-fast-easing),linear]",
+	"[--m3-transition-delay:0s,0s,0s,0s,0s,0s]"
+];
+/** Variant definitions for {@link Fab}; extend them to add colour styles. */
+const fabStyles = tv({
+	slots: {
+		root: [
+			...base,
+			"bg-[var(--_md-comp-fab-container-color)] text-[color:var(--_md-comp-fab-icon-color)]",
+			"rounded-[var(--_md-comp-fab-container-shape)]"
+		],
+		icon: "inline-flex shrink-0 items-center justify-center [&>svg]:size-full"
+	},
+	variants: {
+		color: colors,
+		elevation,
+		size: {
+			default: {
+				root: "size-[56px]",
+				icon: "size-[24px]"
+			},
+			md: {
+				root: "size-[80px]",
+				icon: "size-[28px]"
+			},
+			lg: {
+				root: "size-[96px]",
+				icon: "size-[32px]"
+			}
+		}
+	},
+	defaultVariants: {
+		color: "primary-container",
+		elevation: "default",
+		size: "default"
+	}
+});
+/** Variant definitions for {@link ExtendedFab}. */
+const extendedFabStyles = tv({
+	slots: {
+		root: [
+			...base,
+			"[overflow-anchor:none]",
+			"bg-[var(--_md-comp-extended-fab-container-color)]",
+			"text-[color:var(--_md-comp-extended-fab-label-text-color)]",
+			"rounded-[var(--_md-comp-extended-fab-container-shape)]"
+		],
+		content: "inline-flex items-center",
+		icon: "inline-flex shrink-0 items-center justify-center [&>svg]:size-full",
+		collapse: [
+			"flex overflow-hidden opacity-100",
+			"[transition-property:width,opacity]",
+			"[transition-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-effects-fast-easing)]",
+			"data-collapsed:w-0 data-collapsed:opacity-0",
+			"data-resized:[transition-duration:0s]"
+		],
+		label: "w-max shrink-0",
+		text: ""
+	},
+	variants: {
+		color: colors,
+		elevation,
+		size: {
+			sm: {
+				root: "h-[56px] min-w-[56px] ps-[16px] pe-[16px] text-title-medium",
+				icon: "size-[24px]",
+				text: "ps-[8px]"
+			},
+			md: {
+				root: "h-[80px] min-w-[80px] ps-[26px] pe-[26px] text-title-large",
+				icon: "size-[28px]",
+				text: "ps-[16px]"
+			},
+			lg: {
+				root: "h-[96px] min-w-[96px] ps-[28px] pe-[28px] font-brand text-headline-small",
+				content: [
+					"[[data-expanded=false]>&]:px-[4px]",
+					"[transition-property:padding-inline]",
+					"[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration)]",
+					"[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing)]"
+				],
+				icon: "size-[32px]",
+				text: "ps-[20px]"
+			}
+		},
+		hasIcon: {
+			true: {},
+			false: { text: "ps-0" }
+		}
+	},
+	defaultVariants: {
+		color: "primary-container",
+		elevation: "default",
+		size: "sm",
+		hasIcon: true
+	}
+});
+//#endregion
+export { extendedFabStyles, fabStyles };
+
+//# sourceMappingURL=fab-styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fab-styles.js","names":[],"sources":["../../../src/components/fab/fab-styles.ts"],"sourcesContent":["import { tv, type VariantProps } from '../../utils/tv';\n\n/*\n * Values follow the M3 Expressive spec and its tokens (the Fab* / ExtendedFab* token\n * files): medium FABs use the large-increased corner (20px), the large FAB icon is 32px,\n * and extended FABs put 8 / 16 / 20px between icon and label. FABs have no press morph\n * and no disabled state.\n *\n * The container colour, content colour and corners come from the component tokens\n * (`fab-tokens.ts`, `--md-comp-fab-*` and `--md-comp-extended-fab-*`): the root carries\n * `data-tokens`, `data-color` and `data-size`, and the classes read one private variable per\n * part. A consumer class (`bg-tertiary`, `rounded-corner-small`) still wins in `cn()`.\n *\n * Every class is written out in full so Tailwind can find it.\n */\n\n/**\n * Colour styles: the three tonal containers (Compose tokens) and the three vibrant roles.\n * Their colours are the tokens' defaults; extend them with classes to add a style.\n */\nconst colors = {\n  'primary-container': {},\n  'secondary-container': {},\n  'tertiary-container': {},\n  primary: {},\n  secondary: {},\n  tertiary: {},\n} as const;\n\nconst elevation = {\n  // FabPrimaryContainerTokens: level 3, hover 4, pressed 3 (the hover level never applies\n  // while pressed, even with the pointer still over the FAB).\n  default: { root: 'shadow-elevation-3 data-hovered:not-data-pressed:shadow-elevation-4' },\n  // loweredElevation(): level 1, hover 2, pressed 1.\n  lowered: { root: 'shadow-elevation-1 data-hovered:not-data-pressed:shadow-elevation-2' },\n  // Nested in another component, such as the navigation rail: level 0 in every state.\n  flat: { root: 'shadow-elevation-0' },\n} as const;\n\nconst base = [\n  'inline-flex shrink-0 cursor-pointer items-center justify-center align-middle select-none',\n  'font-plain whitespace-nowrap',\n  'state-layer focus-ring',\n  // Forced colours paint the container as Canvas and drop its shadow, so a FAB draws a 1px\n  // CanvasText boundary there, as Material Web's (2026-10-15).\n  'forced-colors:border forced-colors:border-solid forced-colors:border-[CanvasText]',\n  /*\n   * Appearing and disappearing: the FAB expands from its centre (scale 0.2 → 1, as\n   * Compose's animateFloatingActionButton) on the fast spatial spring and fades on the fast\n   * effects spring. The scale is a `transform` set only while hidden or appearing, so it\n   * composes with Tailwind's `translate-*` / `scale-*` utilities (separate properties) and\n   * the root is never a containing block at rest. Reduced motion keeps only the fade.\n   */\n  'data-hidden:invisible data-hidden:[transform:scale(0.2)] data-hidden:opacity-0',\n  'data-appear:starting:[transform:scale(0.2)] data-appear:starting:opacity-0',\n  'motion-reduce:data-hidden:[transform:none] motion-reduce:data-appear:starting:[transform:none]',\n  '[--m3-transition-property:background-color,color,box-shadow,transform,opacity,visibility]',\n  '[--m3-transition-duration:var(--md-sys-motion-spring-effects-fast-duration),var(--md-sys-motion-spring-effects-fast-duration),var(--md-sys-motion-spring-effects-fast-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  '[--m3-transition-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),var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-effects-fast-easing),linear]',\n  '[--m3-transition-delay:0s,0s,0s,0s,0s,0s]',\n];\n\n/** Variant definitions for {@link Fab}; extend them to add colour styles. */\nexport const fabStyles = tv({\n  slots: {\n    root: [\n      ...base,\n      'bg-[var(--_md-comp-fab-container-color)] text-[color:var(--_md-comp-fab-icon-color)]',\n      'rounded-[var(--_md-comp-fab-container-shape)]',\n    ],\n    icon: 'inline-flex shrink-0 items-center justify-center [&>svg]:size-full',\n  },\n  variants: {\n    color: colors,\n    elevation,\n    size: {\n      default: { root: 'size-[56px]', icon: 'size-[24px]' },\n      md: { root: 'size-[80px]', icon: 'size-[28px]' },\n      lg: { root: 'size-[96px]', icon: 'size-[32px]' },\n    },\n  },\n  defaultVariants: { color: 'primary-container', elevation: 'default', size: 'default' },\n});\n\n/** Variant definitions for {@link ExtendedFab}. */\nexport const extendedFabStyles = tv({\n  slots: {\n    root: [\n      ...base,\n      // The label collapsing and expanding resizes it in place, so it is never the\n      // browser's scroll anchor (which would scroll the page to follow it).\n      '[overflow-anchor:none]',\n      'bg-[var(--_md-comp-extended-fab-container-color)]',\n      'text-[color:var(--_md-comp-extended-fab-label-text-color)]',\n      'rounded-[var(--_md-comp-extended-fab-container-shape)]',\n    ],\n    // Library-owned inner wrapper for the icon and the collapsing label.\n    content: 'inline-flex items-center',\n    icon: 'inline-flex shrink-0 items-center justify-center [&>svg]:size-full',\n    // The label's box animates its width in px between 0 and the label's measured width\n    // (2026-10-17, as Compose lerps the width), so the FAB's width follows it with the fast\n    // spatial spring's overshoot, which a 0fr ↔ 1fr track couldn't show. Before it is\n    // measured (on the server) it takes the label's natural width, or 0 collapsed.\n    collapse: [\n      'flex overflow-hidden opacity-100',\n      '[transition-property:width,opacity]',\n      // All component motion runs on the fast spatial and fast effects springs.\n      '[transition-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-effects-fast-easing)]',\n      'data-collapsed:w-0 data-collapsed:opacity-0',\n      // The label itself changed size (a web font arriving): follow it at once.\n      'data-resized:[transition-duration:0s]',\n    ],\n    // Keeps its natural width while its box closes (it is the measured element); the icon\n    // gap lives on `text` so it clips too.\n    label: 'w-max shrink-0',\n    text: '',\n  },\n  variants: {\n    color: colors,\n    elevation,\n    size: {\n      sm: {\n        root: 'h-[56px] min-w-[56px] ps-[16px] pe-[16px] text-title-medium',\n        icon: 'size-[24px]',\n        text: 'ps-[8px]',\n      },\n      md: {\n        root: 'h-[80px] min-w-[80px] ps-[26px] pe-[26px] text-title-large',\n        icon: 'size-[28px]',\n        text: 'ps-[16px]',\n      },\n      lg: {\n        root: 'h-[96px] min-w-[96px] ps-[28px] pe-[28px] font-brand text-headline-small',\n        /*\n         * Collapsed, the icon and padding (28 + 32 + 28px) fall 8px short of the 96px minimum,\n         * so the icon is centred 4px further in. The content takes those 4px a side as padding\n         * on the label's spring, so the icon slides there with the width instead of jumping as\n         * the minimum takes over (2026-10-24).\n         */\n        content: [\n          '[[data-expanded=false]>&]:px-[4px]',\n          '[transition-property:padding-inline]',\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        icon: 'size-[32px]',\n        text: 'ps-[20px]',\n      },\n    },\n    hasIcon: {\n      true: {},\n      // Text-only extended FABs have no icon gap.\n      false: { text: 'ps-0' },\n    },\n  },\n  defaultVariants: { color: 'primary-container', elevation: 'default', size: 'sm', hasIcon: true },\n});\n\n/**\n * The variants of {@link fabStyles}, 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 FabStyleProps = VariantProps<typeof fabStyles>;\n/**\n * The variants of {@link extendedFabStyles}, 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 ExtendedFabStyleProps = VariantProps<typeof extendedFabStyles>;\nexport type FabColor = NonNullable<FabStyleProps['color']>;\nexport type FabSize = NonNullable<FabStyleProps['size']>;\nexport type FabElevation = NonNullable<FabStyleProps['elevation']>;\nexport type ExtendedFabSize = NonNullable<ExtendedFabStyleProps['size']>;\n"],"mappings":";;;;;;AAoBA,MAAM,SAAS;CACb,qBAAqB,CAAC;CACtB,uBAAuB,CAAC;CACxB,sBAAsB,CAAC;CACvB,SAAS,CAAC;CACV,WAAW,CAAC;CACZ,UAAU,CAAC;AACb;AAEA,MAAM,YAAY;CAGhB,SAAS,EAAE,MAAM,sEAAsE;CAEvF,SAAS,EAAE,MAAM,sEAAsE;CAEvF,MAAM,EAAE,MAAM,qBAAqB;AACrC;AAEA,MAAM,OAAO;CACX;CACA;CACA;CAGA;CAQA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;;AAGA,MAAa,YAAY,GAAG;CAC1B,OAAO;EACL,MAAM;GACJ,GAAG;GACH;GACA;EACF;EACA,MAAM;CACR;CACA,UAAU;EACR,OAAO;EACP;EACA,MAAM;GACJ,SAAS;IAAE,MAAM;IAAe,MAAM;GAAc;GACpD,IAAI;IAAE,MAAM;IAAe,MAAM;GAAc;GAC/C,IAAI;IAAE,MAAM;IAAe,MAAM;GAAc;EACjD;CACF;CACA,iBAAiB;EAAE,OAAO;EAAqB,WAAW;EAAW,MAAM;CAAU;AACvF,CAAC;;AAGD,MAAa,oBAAoB,GAAG;CAClC,OAAO;EACL,MAAM;GACJ,GAAG;GAGH;GACA;GACA;GACA;EACF;EAEA,SAAS;EACT,MAAM;EAKN,UAAU;GACR;GACA;GAEA;GACA;GACA;GAEA;EACF;EAGA,OAAO;EACP,MAAM;CACR;CACA,UAAU;EACR,OAAO;EACP;EACA,MAAM;GACJ,IAAI;IACF,MAAM;IACN,MAAM;IACN,MAAM;GACR;GACA,IAAI;IACF,MAAM;IACN,MAAM;IACN,MAAM;GACR;GACA,IAAI;IACF,MAAM;IAON,SAAS;KACP;KACA;KACA;KACA;IACF;IACA,MAAM;IACN,MAAM;GACR;EACF;EACA,SAAS;GACP,MAAM,CAAC;GAEP,OAAO,EAAE,MAAM,OAAO;EACxB;CACF;CACA,iBAAiB;EAAE,OAAO;EAAqB,WAAW;EAAW,MAAM;EAAM,SAAS;CAAK;AACjG,CAAC"}

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

@@ -0,0 +1,12 @@
+import { ComponentTokenSet } from "../../tokens/component.js";
+import "../../index.js";
+//#region src/components/fab/fab-tokens.d.ts
+/** The tokens of {@link Fab}: `--md-comp-fab-<colour>-*` and `--md-comp-fab[-<size>]-container-shape`. */
+export declare const fabTokenSet: ComponentTokenSet<never>;
+/**
+ * The tokens of {@link ExtendedFab}: `--md-comp-extended-fab-<colour>-*` and
+ * `--md-comp-extended-fab-<size>-container-shape`.
+ */
+export declare const extendedFabTokenSet: ComponentTokenSet<never>;
+//#endregion
+//# sourceMappingURL=fab-tokens.d.ts.map

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

@@ -0,0 +1,105 @@
+import { color, corner, defineComponentTokens } from "../../tokens/component.js";
+//#region src/components/fab/fab-tokens.ts
+const paintsContainer = { property: "background-color" };
+const paintsContent = { property: "color" };
+const paintsShape = { property: "border-top-left-radius" };
+/** Each colour style's container and content roles, as `fab-styles.ts` painted them. */
+const COLORS = {
+	"primary-container": {
+		container: "primary-container",
+		content: "on-primary-container"
+	},
+	"secondary-container": {
+		container: "secondary-container",
+		content: "on-secondary-container"
+	},
+	"tertiary-container": {
+		container: "tertiary-container",
+		content: "on-tertiary-container"
+	},
+	primary: {
+		container: "primary",
+		content: "on-primary"
+	},
+	secondary: {
+		container: "secondary",
+		content: "on-secondary"
+	},
+	tertiary: {
+		container: "tertiary",
+		content: "on-tertiary"
+	}
+};
+/** Compose's token objects for the colour styles it has (the tonal primary and secondary). */
+const COMPOSE_COLORS = {
+	"primary-container": "FabPrimaryContainerTokens",
+	"secondary-container": "FabSecondaryContainerTokens"
+};
+/** One scope per colour style: its container and its content (`icon` or `label-text`). */
+function colorScopes(component, content) {
+	return Object.fromEntries(Object.keys(COLORS).map((name) => {
+		const roles = COLORS[name];
+		const compose = component === "fab" ? COMPOSE_COLORS[name] : void 0;
+		const tokens = {
+			"container-color": {
+				value: color(roles.container),
+				description: "The container.",
+				...compose && { compose: `${compose}.ContainerColor` },
+				paints: paintsContainer
+			},
+			[`${content}-color`]: {
+				value: color(roles.content),
+				description: content === "icon" ? "The icon." : "The label and the icon, which follows it.",
+				...compose && { compose: `${compose}.IconColor` },
+				paints: paintsContent
+			}
+		};
+		return [name, {
+			prefix: `md-comp-${component}-${name}`,
+			tokens
+		}];
+	}));
+}
+/** A size's container shape: `--md-comp-<prefix>-container-shape`. */
+const shapeScope = (prefix, value, compose) => ({
+	prefix,
+	tokens: { "container-shape": {
+		value: corner(value),
+		description: "The corners.",
+		compose: `${compose}.ContainerShape`,
+		paints: paintsShape
+	} }
+});
+/** The tokens of {@link Fab}: `--md-comp-fab-<colour>-*` and `--md-comp-fab[-<size>]-container-shape`. */
+const fabTokenSet = defineComponentTokens({
+	name: "md-comp-fab",
+	tokens: {},
+	scopes: {
+		color: colorScopes("fab", "icon"),
+		size: {
+			default: shapeScope("md-comp-fab", "large", "FabBaselineTokens"),
+			md: shapeScope("md-comp-fab-medium", "large-increased", "FabMediumTokens"),
+			lg: shapeScope("md-comp-fab-large", "extra-large", "FabLargeTokens")
+		}
+	}
+});
+/**
+* The tokens of {@link ExtendedFab}: `--md-comp-extended-fab-<colour>-*` and
+* `--md-comp-extended-fab-<size>-container-shape`.
+*/
+const extendedFabTokenSet = defineComponentTokens({
+	name: "md-comp-extended-fab",
+	tokens: {},
+	scopes: {
+		color: colorScopes("extended-fab", "label-text"),
+		size: {
+			sm: shapeScope("md-comp-extended-fab-small", "large", "ExtendedFabSmallTokens"),
+			md: shapeScope("md-comp-extended-fab-medium", "large-increased", "ExtendedFabMediumTokens"),
+			lg: shapeScope("md-comp-extended-fab-large", "extra-large", "ExtendedFabLargeTokens")
+		}
+	}
+});
+//#endregion
+export { extendedFabTokenSet, fabTokenSet };
+
+//# sourceMappingURL=fab-tokens.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fab-tokens.js","names":[],"sources":["../../../src/components/fab/fab-tokens.ts"],"sourcesContent":["import type { ColorRole } from '../../tokens/color';\nimport {\n  color,\n  corner,\n  defineComponentTokens,\n  type ComponentToken,\n  type ComponentTokenScope,\n} from '../../tokens/component';\nimport type { CornerName } from '../../tokens/shape';\nimport type { ExtendedFabSize, FabColor, FabSize } from './fab-styles';\n\n/*\n * The FAB's and the extended FAB's component tokens, M3's `md.comp.fab.*` and\n * `md.comp.extended-fab.*` names (checked against m3.material.io's token tables,\n * 2026-10-14). A FAB's `data-color` picks its colour set (`fab-primary-container`, …) and\n * its `data-size` its size set (`fab`, `fab-medium`, `fab-large`); the styles read one\n * private variable per part. The icon and label follow the content colour (`currentColor`).\n * Elevation stays with the `elevation` prop, and sizes stay classes.\n */\n\nconst paintsContainer = { property: 'background-color' } as const;\nconst paintsContent = { property: 'color' } as const;\nconst paintsShape = { property: 'border-top-left-radius' } as const;\n\n/** Each colour style's container and content roles, as `fab-styles.ts` painted them. */\nconst COLORS: Record<FabColor, { container: ColorRole; content: ColorRole }> = {\n  'primary-container': { container: 'primary-container', content: 'on-primary-container' },\n  'secondary-container': { container: 'secondary-container', content: 'on-secondary-container' },\n  'tertiary-container': { container: 'tertiary-container', content: 'on-tertiary-container' },\n  primary: { container: 'primary', content: 'on-primary' },\n  secondary: { container: 'secondary', content: 'on-secondary' },\n  tertiary: { container: 'tertiary', content: 'on-tertiary' },\n};\n\n/** Compose's token objects for the colour styles it has (the tonal primary and secondary). */\nconst COMPOSE_COLORS: Partial<Record<FabColor, string>> = {\n  'primary-container': 'FabPrimaryContainerTokens',\n  'secondary-container': 'FabSecondaryContainerTokens',\n};\n\n/** One scope per colour style: its container and its content (`icon` or `label-text`). */\nfunction colorScopes(component: 'fab' | 'extended-fab', content: 'icon' | 'label-text') {\n  return Object.fromEntries(\n    (Object.keys(COLORS) as FabColor[]).map((name) => {\n      const roles = COLORS[name];\n      const compose = component === 'fab' ? COMPOSE_COLORS[name] : undefined;\n      const tokens: Record<string, ComponentToken> = {\n        'container-color': {\n          value: color(roles.container),\n          description: 'The container.',\n          ...(compose && { compose: `${compose}.ContainerColor` }),\n          paints: paintsContainer,\n        },\n        [`${content}-color`]: {\n          value: color(roles.content),\n          description:\n            content === 'icon' ? 'The icon.' : 'The label and the icon, which follows it.',\n          ...(compose && { compose: `${compose}.IconColor` }),\n          paints: paintsContent,\n        },\n      };\n      return [name, { prefix: `md-comp-${component}-${name}`, tokens }];\n    }),\n  ) as Record<FabColor, ComponentTokenScope>;\n}\n\n/** A size's container shape: `--md-comp-<prefix>-container-shape`. */\nconst shapeScope = (prefix: string, value: CornerName, compose: string): ComponentTokenScope => ({\n  prefix,\n  tokens: {\n    'container-shape': {\n      value: corner(value),\n      description: 'The corners.',\n      compose: `${compose}.ContainerShape`,\n      paints: paintsShape,\n    },\n  },\n});\n\n/** The tokens of {@link Fab}: `--md-comp-fab-<colour>-*` and `--md-comp-fab[-<size>]-container-shape`. */\nexport const fabTokenSet = defineComponentTokens({\n  name: 'md-comp-fab',\n  tokens: {},\n  scopes: {\n    color: colorScopes('fab', 'icon'),\n    size: {\n      default: shapeScope('md-comp-fab', 'large', 'FabBaselineTokens'),\n      md: shapeScope('md-comp-fab-medium', 'large-increased', 'FabMediumTokens'),\n      lg: shapeScope('md-comp-fab-large', 'extra-large', 'FabLargeTokens'),\n    } satisfies Record<FabSize, ComponentTokenScope>,\n  },\n});\n\n/**\n * The tokens of {@link ExtendedFab}: `--md-comp-extended-fab-<colour>-*` and\n * `--md-comp-extended-fab-<size>-container-shape`.\n */\nexport const extendedFabTokenSet = defineComponentTokens({\n  name: 'md-comp-extended-fab',\n  tokens: {},\n  scopes: {\n    color: colorScopes('extended-fab', 'label-text'),\n    size: {\n      sm: shapeScope('md-comp-extended-fab-small', 'large', 'ExtendedFabSmallTokens'),\n      md: shapeScope('md-comp-extended-fab-medium', 'large-increased', 'ExtendedFabMediumTokens'),\n      lg: shapeScope('md-comp-extended-fab-large', 'extra-large', 'ExtendedFabLargeTokens'),\n    } satisfies Record<ExtendedFabSize, ComponentTokenScope>,\n  },\n});\n"],"mappings":";;AAoBA,MAAM,kBAAkB,EAAE,UAAU,mBAAmB;AACvD,MAAM,gBAAgB,EAAE,UAAU,QAAQ;AAC1C,MAAM,cAAc,EAAE,UAAU,yBAAyB;;AAGzD,MAAM,SAAyE;CAC7E,qBAAqB;EAAE,WAAW;EAAqB,SAAS;CAAuB;CACvF,uBAAuB;EAAE,WAAW;EAAuB,SAAS;CAAyB;CAC7F,sBAAsB;EAAE,WAAW;EAAsB,SAAS;CAAwB;CAC1F,SAAS;EAAE,WAAW;EAAW,SAAS;CAAa;CACvD,WAAW;EAAE,WAAW;EAAa,SAAS;CAAe;CAC7D,UAAU;EAAE,WAAW;EAAY,SAAS;CAAc;AAC5D;;AAGA,MAAM,iBAAoD;CACxD,qBAAqB;CACrB,uBAAuB;AACzB;;AAGA,SAAS,YAAY,WAAmC,SAAgC;CACtF,OAAO,OAAO,YACX,OAAO,KAAK,MAAM,CAAC,CAAgB,KAAK,SAAS;EAChD,MAAM,QAAQ,OAAO;EACrB,MAAM,UAAU,cAAc,QAAQ,eAAe,QAAQ,KAAA;EAC7D,MAAM,SAAyC;GAC7C,mBAAmB;IACjB,OAAO,MAAM,MAAM,SAAS;IAC5B,aAAa;IACb,GAAI,WAAW,EAAE,SAAS,GAAG,QAAQ,iBAAiB;IACtD,QAAQ;GACV;IACC,GAAG,QAAQ,UAAU;IACpB,OAAO,MAAM,MAAM,OAAO;IAC1B,aACE,YAAY,SAAS,cAAc;IACrC,GAAI,WAAW,EAAE,SAAS,GAAG,QAAQ,YAAY;IACjD,QAAQ;GACV;EACF;EACA,OAAO,CAAC,MAAM;GAAE,QAAQ,WAAW,UAAU,GAAG;GAAQ;EAAO,CAAC;CAClE,CAAC,CACH;AACF;;AAGA,MAAM,cAAc,QAAgB,OAAmB,aAA0C;CAC/F;CACA,QAAQ,EACN,mBAAmB;EACjB,OAAO,OAAO,KAAK;EACnB,aAAa;EACb,SAAS,GAAG,QAAQ;EACpB,QAAQ;CACV,EACF;AACF;;AAGA,MAAa,cAAc,sBAAsB;CAC/C,MAAM;CACN,QAAQ,CAAC;CACT,QAAQ;EACN,OAAO,YAAY,OAAO,MAAM;EAChC,MAAM;GACJ,SAAS,WAAW,eAAe,SAAS,mBAAmB;GAC/D,IAAI,WAAW,sBAAsB,mBAAmB,iBAAiB;GACzE,IAAI,WAAW,qBAAqB,eAAe,gBAAgB;EACrE;CACF;AACF,CAAC;;;;;AAMD,MAAa,sBAAsB,sBAAsB;CACvD,MAAM;CACN,QAAQ,CAAC;CACT,QAAQ;EACN,OAAO,YAAY,gBAAgB,YAAY;EAC/C,MAAM;GACJ,IAAI,WAAW,8BAA8B,SAAS,wBAAwB;GAC9E,IAAI,WAAW,+BAA+B,mBAAmB,yBAAyB;GAC1F,IAAI,WAAW,8BAA8B,eAAe,wBAAwB;EACtF;CACF;AACF,CAAC"}