@windmorph/react 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,166 @@
+import { VariantProps } from "../../utils/tv.js";
+//#region src/components/fab-menu/fab-menu-styles.d.ts
+/** Variant definitions for {@link FabMenu}; extend them to add colour styles. */
+export declare const fabMenuStyles: import("tailwind-variants").TVReturnType<{
+  color: {
+    readonly primary: {};
+    readonly secondary: {};
+    readonly tertiary: {};
+  };
+  /** Like `Fab`: level 3 (the spec), level 1, or level 0 for a flat menu. */
+  elevation: {
+    default: {
+      button: string;
+      item: string;
+    };
+    lowered: {
+      button: string;
+      item: string;
+    };
+    flat: {
+      button: string;
+      item: string;
+    };
+  };
+  size: {
+    default: {
+      anchor: string;
+      list: string;
+      button: string;
+      icon: string;
+    };
+    md: {
+      anchor: string;
+      list: string;
+      button: string;
+      icon: string;
+    };
+    lg: {
+      anchor: string;
+      list: string;
+      button: string;
+      icon: string;
+    };
+  };
+}, {
+  root: string;
+  anchor: string[];
+  button: string[];
+  icon: string[];
+  list: string[];
+  item: string[];
+  itemContent: string;
+  itemIcon: string;
+  menu: string;
+}, undefined, {
+  color: {
+    readonly primary: {};
+    readonly secondary: {};
+    readonly tertiary: {};
+  };
+  /** Like `Fab`: level 3 (the spec), level 1, or level 0 for a flat menu. */
+  elevation: {
+    default: {
+      button: string;
+      item: string;
+    };
+    lowered: {
+      button: string;
+      item: string;
+    };
+    flat: {
+      button: string;
+      item: string;
+    };
+  };
+  size: {
+    default: {
+      anchor: string;
+      list: string;
+      button: string;
+      icon: string;
+    };
+    md: {
+      anchor: string;
+      list: string;
+      button: string;
+      icon: string;
+    };
+    lg: {
+      anchor: string;
+      list: string;
+      button: string;
+      icon: string;
+    };
+  };
+}, {
+  root: string;
+  anchor: string[];
+  button: string[];
+  icon: string[];
+  list: string[];
+  item: string[];
+  itemContent: string;
+  itemIcon: string;
+  menu: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  color: {
+    readonly primary: {};
+    readonly secondary: {};
+    readonly tertiary: {};
+  };
+  /** Like `Fab`: level 3 (the spec), level 1, or level 0 for a flat menu. */
+  elevation: {
+    default: {
+      button: string;
+      item: string;
+    };
+    lowered: {
+      button: string;
+      item: string;
+    };
+    flat: {
+      button: string;
+      item: string;
+    };
+  };
+  size: {
+    default: {
+      anchor: string;
+      list: string;
+      button: string;
+      icon: string;
+    };
+    md: {
+      anchor: string;
+      list: string;
+      button: string;
+      icon: string;
+    };
+    lg: {
+      anchor: string;
+      list: string;
+      button: string;
+      icon: string;
+    };
+  };
+}, {
+  root: string;
+  anchor: string[];
+  button: string[];
+  icon: string[];
+  list: string[];
+  item: string[];
+  itemContent: string;
+  itemIcon: string;
+  menu: string;
+}>>;
+/**
+ * The variants of {@link fabMenuStyles}, 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 FabMenuStyleProps = VariantProps<typeof fabMenuStyles>;
+export type FabMenuColor = NonNullable<FabMenuStyleProps['color']>;
+export type FabMenuSize = NonNullable<FabMenuStyleProps['size']>;
+//#endregion
+//# sourceMappingURL=fab-menu-styles.d.ts.map

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

@@ -0,0 +1,107 @@
+import { tv } from "../../utils/tv.js";
+/** Variant definitions for {@link FabMenu}; extend them to add colour styles. */
+const fabMenuStyles = tv({
+	slots: {
+		root: "inline-flex flex-col-reverse items-end gap-[8px] [overflow-anchor:none]",
+		anchor: [
+			"relative z-[1] inline-flex shrink-0 items-start justify-end",
+			"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]",
+			"[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]"
+		],
+		button: [
+			"group/fab-menu inline-flex shrink-0 cursor-pointer items-center justify-center select-none",
+			"state-layer focus-ring",
+			"forced-colors:border forced-colors:border-solid forced-colors:border-[CanvasText]",
+			"bg-[var(--_md-comp-fab-container-color)] text-[color:var(--_md-comp-fab-icon-color)]",
+			"data-open:bg-[var(--_md-comp-fab-menu-close-button-container-color)] data-open:text-[color:var(--_md-comp-fab-menu-close-button-icon-color)]",
+			"data-open:size-[56px] data-open:rounded-[var(--_md-comp-fab-menu-close-button-container-shape)]",
+			"[--m3-transition-property:width,height,border-radius,background-color,color]",
+			"[--m3-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),var(--md-sys-motion-spring-effects-fast-duration)]",
+			"[--m3-transition-easing: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),var(--md-sys-motion-spring-effects-fast-easing)]",
+			"[--m3-transition-delay:0s,0s,0s,0s,0s]"
+		],
+		icon: [
+			"inline-grid shrink-0 place-items-center [&>svg]:size-full",
+			"group-data-open/fab-menu:size-[20px]",
+			"[transition-property:width,height]",
+			"[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration)]",
+			"[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing)]"
+		],
+		list: [
+			"flex flex-col items-end gap-[4px] overflow-y-auto overscroll-contain",
+			"-ms-[16px] -me-[16px] -mt-[16px] ps-[16px] pe-[16px] pt-[16px] pointer-events-none",
+			"max-h-[calc(100dvh-16px)]"
+		],
+		item: [
+			"pointer-events-auto flex h-[56px] shrink-0 cursor-pointer justify-end overflow-hidden select-none",
+			"rounded-[var(--_md-comp-fab-menu-menu-item-container-shape)]",
+			"bg-[var(--_md-comp-fab-menu-list-item-container-color)] text-[color:var(--_md-comp-fab-menu-list-item-label-text-color)]",
+			"opacity-0 data-visible:opacity-100",
+			"motion-reduce:data-visible:starting:opacity-0",
+			"state-layer focus-ring",
+			"forced-colors:border forced-colors:border-solid forced-colors:border-[CanvasText]",
+			"[--m3-transition-property:width,opacity]",
+			"[--m3-transition-duration:var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-effects-fast-duration)]",
+			"[--m3-transition-easing:var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-effects-fast-easing)]",
+			"[--m3-transition-delay:0s,0s]"
+		],
+		itemContent: "flex h-[56px] min-w-[56px] shrink-0 items-center justify-center gap-[8px] ps-[24px] pe-[24px] font-plain text-title-medium whitespace-nowrap",
+		itemIcon: "inline-flex size-[24px] shrink-0 items-center justify-center text-[color:var(--_md-comp-fab-menu-list-item-icon-color)] [&>svg]:size-full",
+		menu: ""
+	},
+	variants: {
+		color: {
+			primary: {},
+			secondary: {},
+			tertiary: {}
+		},
+		/** Like `Fab`: level 3 (the spec), level 1, or level 0 for a flat menu. */
+		elevation: {
+			default: {
+				button: "shadow-elevation-3",
+				item: "shadow-elevation-3"
+			},
+			lowered: {
+				button: "shadow-elevation-1",
+				item: "shadow-elevation-1"
+			},
+			flat: {
+				button: "shadow-elevation-0",
+				item: "shadow-elevation-0"
+			}
+		},
+		size: {
+			default: {
+				anchor: "size-[56px]",
+				list: "-mb-[64px] pb-[64px]",
+				button: "size-[56px] rounded-corner-large",
+				icon: "size-[24px]"
+			},
+			md: {
+				anchor: "size-[80px]",
+				list: "-mb-[88px] pb-[88px]",
+				button: "size-[80px] rounded-corner-large-increased",
+				icon: "size-[28px]"
+			},
+			lg: {
+				anchor: "size-[96px]",
+				list: "-mb-[104px] pb-[104px]",
+				button: "size-[96px] rounded-corner-extra-large",
+				icon: "size-[32px]"
+			}
+		}
+	},
+	defaultVariants: {
+		color: "primary",
+		elevation: "default",
+		size: "default"
+	}
+});
+//#endregion
+export { fabMenuStyles };
+
+//# sourceMappingURL=fab-menu-styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fab-menu-styles.js","names":[],"sources":["../../../src/components/fab-menu/fab-menu-styles.ts"],"sourcesContent":["import { tv, type VariantProps } from '../../utils/tv';\n\n/*\n * Values follow the M3 Expressive spec and its tokens (FabMenuBaselineTokens), with\n * Compose Material 3's FloatingActionButtonMenu.kt as the recipe:\n *\n * - The toggle button keeps its FAB's layout box (56 / 80 / 96px) and, when open, shrinks to\n *   the 56px close button with full corners and a 20px icon, its container going from the\n *   `*-container` role to the vibrant role. Size, corners and icon follow the fast spatial\n *   spring, as Compose's `checkedProgress` does; the colours move on the fast effects spring,\n *   which the motion spec asks for colour (no overshoot).\n * - Items are 56px pills (min width 56px, 24px side padding, 8px icon gap, 24px icon,\n *   `title-medium`), 4px apart, 8px above the button. Item width springs on fast spatial\n *   and opacity on fast effects. Under reduced motion the spatial springs are instant\n *   (architecture §6): the button changes at once and the items only fade, together.\n * - Elevation, as on `Fab`, is the `elevation` variant, on the button and the items alike:\n *   `default` is level 3 (the spec's ListItemContainerElevation token, and the FAB's),\n *   `lowered` level 1 and `flat` level 0.\n * - The menu sits on the window's trailing edge (logical, so it mirrors in RTL).\n * - On short windows the list scrolls behind the close button: it extends under the\n *   button's box (a negative margin cancelled by padding, so nothing moves) and the box\n *   paints above it. 16px of padding on the other sides keeps the items' shadows and focus\n *   rings inside the scroll container; that ring lets clicks through.\n *\n * Colour styles are m3.material.io's primary / secondary / tertiary sets; Compose's\n * defaults are the primary set. The close button's and the items' colours and corners come\n * from the component tokens (`fab-menu-tokens.ts`, `--md-comp-fab-menu-*`), resolved on the\n * root; the closed button's colours from the FAB's (`fab-tokens.ts`).\n * Every class is written out in full so Tailwind can find it.\n */\n\n/*\n * Colours come from the tokens: the closed button is a FAB (the FAB's tokens, resolved on\n * the button), the open close button and the items read the menu's set. The `color`\n * variant picks which set the attributes name; its classes are empty, for extension.\n */\nconst colors = { primary: {}, secondary: {}, tertiary: {} } as const;\n\n/** Variant definitions for {@link FabMenu}; extend them to add colour styles. */\nexport const fabMenuStyles = tv({\n  slots: {\n    // Opening grows the menu toward the start of the page from its FAB, so it is never the\n    // browser's scroll anchor: chosen as one, its move would scroll the page with it.\n    root: 'inline-flex flex-col-reverse items-end gap-[8px] [overflow-anchor:none]',\n    // Library-owned box that keeps the FAB's size while the button shrinks inside it. It\n    // paints above the list, which scrolls behind it, and carries the show / hide motion\n    // (the FAB's: scale from the centre on fast spatial, fade on fast effects).\n    anchor: [\n      'relative z-[1] inline-flex shrink-0 items-start justify-end',\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      '[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    button: [\n      'group/fab-menu inline-flex shrink-0 cursor-pointer items-center justify-center select-none',\n      'state-layer focus-ring',\n      // Forced colours paint containers as Canvas: the button and items draw a 1px\n      // CanvasText boundary there, as a FAB does (2026-10-15).\n      'forced-colors:border forced-colors:border-solid forced-colors:border-[CanvasText]',\n      'bg-[var(--_md-comp-fab-container-color)] text-[color:var(--_md-comp-fab-icon-color)]',\n      'data-open:bg-[var(--_md-comp-fab-menu-close-button-container-color)] data-open:text-[color:var(--_md-comp-fab-menu-close-button-icon-color)]',\n      // Open: the 56px close button, its corners half its size (a length, so they interpolate).\n      'data-open:size-[56px] data-open:rounded-[var(--_md-comp-fab-menu-close-button-container-shape)]',\n      '[--m3-transition-property:width,height,border-radius,background-color,color]',\n      // Size and corners on the fast spatial spring; colours on fast effects (no overshoot).\n      '[--m3-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),var(--md-sys-motion-spring-effects-fast-duration)]',\n      '[--m3-transition-easing: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),var(--md-sys-motion-spring-effects-fast-easing)]',\n      '[--m3-transition-delay:0s,0s,0s,0s,0s]',\n    ],\n    // The FAB \"transforms into the close button\" (M3): with `openIcon`, both icons share\n    // this cell as faces (primitives/icon-faces-styles.ts) and hand over with `iconTransition`.\n    icon: [\n      'inline-grid shrink-0 place-items-center [&>svg]:size-full',\n      'group-data-open/fab-menu:size-[20px]',\n      '[transition-property:width,height]',\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    list: [\n      'flex flex-col items-end gap-[4px] overflow-y-auto overscroll-contain',\n      '-ms-[16px] -me-[16px] -mt-[16px] ps-[16px] pe-[16px] pt-[16px] pointer-events-none',\n      // The list's box ends at the bottom of the button's box, 16px above the window edge.\n      'max-h-[calc(100dvh-16px)]',\n    ],\n    item: [\n      'pointer-events-auto flex h-[56px] shrink-0 cursor-pointer justify-end overflow-hidden select-none',\n      'rounded-[var(--_md-comp-fab-menu-menu-item-container-shape)]',\n      'bg-[var(--_md-comp-fab-menu-list-item-container-color)] text-[color:var(--_md-comp-fab-menu-list-item-label-text-color)]',\n      'opacity-0 data-visible:opacity-100',\n      // Under reduced motion the items show with the list, which was hidden: fade them in.\n      'motion-reduce:data-visible:starting:opacity-0',\n      'state-layer focus-ring',\n      'forced-colors:border forced-colors:border-solid forced-colors:border-[CanvasText]',\n      '[--m3-transition-property:width,opacity]',\n      '[--m3-transition-duration: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-spatial-fast-easing),var(--md-sys-motion-spring-effects-fast-easing)]',\n      '[--m3-transition-delay:0s,0s]',\n    ],\n    // Natural-width content; the item clips it while its width animates.\n    itemContent:\n      'flex h-[56px] min-w-[56px] shrink-0 items-center justify-center gap-[8px] ps-[24px] pe-[24px] font-plain text-title-medium whitespace-nowrap',\n    itemIcon:\n      'inline-flex size-[24px] shrink-0 items-center justify-center text-[color:var(--_md-comp-fab-menu-list-item-icon-color)] [&>svg]:size-full',\n    // presentation=\"menu\": a standard Menu 4px from the FAB, on whichever side it opened\n    // (the menu list already cancels its own 8px shadow room with -8px).\n    // The web menu's 4px gap comes from `offset` on the Menu; this slot is for consumers.\n    menu: '',\n  },\n  variants: {\n    color: colors,\n    /** Like `Fab`: level 3 (the spec), level 1, or level 0 for a flat menu. */\n    elevation: {\n      default: { button: 'shadow-elevation-3', item: 'shadow-elevation-3' },\n      lowered: { button: 'shadow-elevation-1', item: 'shadow-elevation-1' },\n      flat: { button: 'shadow-elevation-0', item: 'shadow-elevation-0' },\n    },\n    size: {\n      default: {\n        anchor: 'size-[56px]',\n        list: '-mb-[64px] pb-[64px]',\n        button: 'size-[56px] rounded-corner-large',\n        icon: 'size-[24px]',\n      },\n      md: {\n        anchor: 'size-[80px]',\n        list: '-mb-[88px] pb-[88px]',\n        button: 'size-[80px] rounded-corner-large-increased',\n        icon: 'size-[28px]',\n      },\n      lg: {\n        anchor: 'size-[96px]',\n        list: '-mb-[104px] pb-[104px]',\n        button: 'size-[96px] rounded-corner-extra-large',\n        icon: 'size-[32px]',\n      },\n    },\n  },\n  defaultVariants: { color: 'primary', elevation: 'default', size: 'default' },\n});\n\n/**\n * The variants of {@link fabMenuStyles}, 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 FabMenuStyleProps = VariantProps<typeof fabMenuStyles>;\nexport type FabMenuColor = NonNullable<FabMenuStyleProps['color']>;\nexport type FabMenuSize = NonNullable<FabMenuStyleProps['size']>;\n"],"mappings":";;AAuCA,MAAa,gBAAgB,GAAG;CAC9B,OAAO;EAGL,MAAM;EAIN,QAAQ;GACN;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EACA,QAAQ;GACN;GACA;GAGA;GACA;GACA;GAEA;GACA;GAEA;GACA;GACA;EACF;EAGA,MAAM;GACJ;GACA;GACA;GACA;GACA;EACF;EACA,MAAM;GACJ;GACA;GAEA;EACF;EACA,MAAM;GACJ;GACA;GACA;GACA;GAEA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,aACE;EACF,UACE;EAIF,MAAM;CACR;CACA,UAAU;EACR,OAAO;GA5EM,SAAS,CAAC;GAAG,WAAW,CAAC;GAAG,UAAU,CAAC;EA4E7C;;EAEP,WAAW;GACT,SAAS;IAAE,QAAQ;IAAsB,MAAM;GAAqB;GACpE,SAAS;IAAE,QAAQ;IAAsB,MAAM;GAAqB;GACpE,MAAM;IAAE,QAAQ;IAAsB,MAAM;GAAqB;EACnE;EACA,MAAM;GACJ,SAAS;IACP,QAAQ;IACR,MAAM;IACN,QAAQ;IACR,MAAM;GACR;GACA,IAAI;IACF,QAAQ;IACR,MAAM;IACN,QAAQ;IACR,MAAM;GACR;GACA,IAAI;IACF,QAAQ;IACR,MAAM;IACN,QAAQ;IACR,MAAM;GACR;EACF;CACF;CACA,iBAAiB;EAAE,OAAO;EAAW,WAAW;EAAW,MAAM;CAAU;AAC7E,CAAC"}

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

@@ -0,0 +1,7 @@
+import { ComponentTokenSet } from "../../tokens/component.js";
+import "../../index.js";
+//#region src/components/fab-menu/fab-menu-tokens.d.ts
+/** The tokens of {@link FabMenu}: `--md-comp-fab-menu-*`. */
+export declare const fabMenuTokenSet: ComponentTokenSet<"close-button-container-shape" | "menu-item-container-shape">;
+//#endregion
+//# sourceMappingURL=fab-menu-tokens.d.ts.map

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

@@ -0,0 +1,120 @@
+import { color, corner, defineComponentTokens, px } from "../../tokens/component.js";
+//#region src/components/fab-menu/fab-menu-tokens.ts
+const CLOSE_BUTTON = {
+	primary: {
+		container: "primary",
+		icon: "on-primary"
+	},
+	secondary: {
+		container: "secondary",
+		icon: "on-secondary"
+	},
+	tertiary: {
+		container: "tertiary",
+		icon: "on-tertiary"
+	}
+};
+const ITEM = {
+	primary: {
+		container: "primary-container",
+		content: "on-primary-container"
+	},
+	secondary: {
+		container: "secondary-container",
+		content: "on-secondary-container"
+	},
+	tertiary: {
+		container: "tertiary-container",
+		content: "on-tertiary-container"
+	}
+};
+const closeButtonScope = (name) => ({
+	prefix: `md-comp-fab-menu-${name}`,
+	tokens: {
+		"close-button-container-color": {
+			value: color(CLOSE_BUTTON[name].container),
+			description: "The open close button.",
+			paints: {
+				slot: "button",
+				property: "background-color",
+				state: "open"
+			}
+		},
+		"close-button-icon-color": {
+			value: color(CLOSE_BUTTON[name].icon),
+			description: "The open close button’s icon.",
+			paints: {
+				slot: "button",
+				property: "color",
+				state: "open"
+			}
+		}
+	}
+});
+const itemScope = (name) => ({
+	prefix: `md-comp-fab-menu-${name}-container`,
+	tokens: {
+		"list-item-container-color": {
+			value: color(ITEM[name].container),
+			description: "The list’s items.",
+			paints: {
+				slot: "item",
+				property: "background-color"
+			}
+		},
+		"list-item-label-text-color": {
+			value: color(ITEM[name].content),
+			description: "The items’ labels.",
+			paints: {
+				slot: "item",
+				property: "color"
+			}
+		},
+		"list-item-icon-color": {
+			value: color(ITEM[name].content),
+			description: "The items’ icons.",
+			paints: {
+				slot: "item-icon",
+				property: "color"
+			}
+		}
+	}
+});
+const COLORS = [
+	"primary",
+	"secondary",
+	"tertiary"
+];
+/** The tokens of {@link FabMenu}: `--md-comp-fab-menu-*`. */
+const fabMenuTokenSet = defineComponentTokens({
+	name: "md-comp-fab-menu",
+	tokens: {
+		"close-button-container-shape": {
+			value: px(28),
+			description: "The open close button’s corners (half its 56px size, so they animate).",
+			compose: "FabMenuBaselineTokens.CloseButtonContainerShape",
+			paints: {
+				slot: "button",
+				property: "border-top-left-radius",
+				state: "open"
+			}
+		},
+		"menu-item-container-shape": {
+			value: corner("full"),
+			description: "The corners of the list’s items.",
+			compose: "FabMenuBaselineTokens.ListItemContainerShape",
+			paints: {
+				slot: "item",
+				property: "border-top-left-radius"
+			}
+		}
+	},
+	scopes: {
+		color: Object.fromEntries(COLORS.map((name) => [name, closeButtonScope(name)])),
+		"item-color": Object.fromEntries(COLORS.map((name) => [`${name}-container`, itemScope(name)]))
+	}
+});
+//#endregion
+export { fabMenuTokenSet };
+
+//# sourceMappingURL=fab-menu-tokens.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fab-menu-tokens.js","names":[],"sources":["../../../src/components/fab-menu/fab-menu-tokens.ts"],"sourcesContent":["import type { ColorRole } from '../../tokens/color';\nimport {\n  color,\n  corner,\n  defineComponentTokens,\n  px,\n  type ComponentTokenScope,\n} from '../../tokens/component';\nimport type { FabMenuColor } from './fab-menu-styles';\n\n/*\n * The FAB menu's component tokens, M3's `md.comp.fab-menu.*` names (checked against\n * m3.material.io's token tables, 2026-10-14), with Compose's FabMenuBaselineTokens. The\n * root carries `data-tokens=\"md-comp-fab-menu\"`, and the button and the list's items read\n * the private variables it resolves. Elevation follows the `elevation` prop; sizes stay\n * classes.\n *\n * Colours (2026-10-17; they were classes): the root's `data-color` picks the open close\n * button's set (`md.comp.fab-menu.primary.close-button.*`) and its `data-item-color` the\n * items' (`md.comp.fab-menu.primary-container.list-item.*`), as M3 names them. The closed\n * button is a FAB of the `<color>-container` style and joins the FAB's set\n * (`--md-comp-fab-<color>-container-*`, `fab-tokens.ts`).\n */\n\nconst CLOSE_BUTTON: Record<FabMenuColor, { container: ColorRole; icon: ColorRole }> = {\n  primary: { container: 'primary', icon: 'on-primary' },\n  secondary: { container: 'secondary', icon: 'on-secondary' },\n  tertiary: { container: 'tertiary', icon: 'on-tertiary' },\n};\n\nconst ITEM: Record<FabMenuColor, { container: ColorRole; content: ColorRole }> = {\n  primary: { container: 'primary-container', content: 'on-primary-container' },\n  secondary: { container: 'secondary-container', content: 'on-secondary-container' },\n  tertiary: { container: 'tertiary-container', content: 'on-tertiary-container' },\n};\n\nconst closeButtonScope = (name: FabMenuColor): ComponentTokenScope => ({\n  prefix: `md-comp-fab-menu-${name}`,\n  tokens: {\n    'close-button-container-color': {\n      value: color(CLOSE_BUTTON[name].container),\n      description: 'The open close button.',\n      paints: { slot: 'button', property: 'background-color', state: 'open' },\n    },\n    'close-button-icon-color': {\n      value: color(CLOSE_BUTTON[name].icon),\n      description: 'The open close button’s icon.',\n      paints: { slot: 'button', property: 'color', state: 'open' },\n    },\n  },\n});\n\nconst itemScope = (name: FabMenuColor): ComponentTokenScope => ({\n  prefix: `md-comp-fab-menu-${name}-container`,\n  tokens: {\n    'list-item-container-color': {\n      value: color(ITEM[name].container),\n      description: 'The list’s items.',\n      paints: { slot: 'item', property: 'background-color' },\n    },\n    'list-item-label-text-color': {\n      value: color(ITEM[name].content),\n      description: 'The items’ labels.',\n      paints: { slot: 'item', property: 'color' },\n    },\n    'list-item-icon-color': {\n      value: color(ITEM[name].content),\n      description: 'The items’ icons.',\n      paints: { slot: 'item-icon', property: 'color' },\n    },\n  },\n});\n\nconst COLORS: FabMenuColor[] = ['primary', 'secondary', 'tertiary'];\n\n/** The tokens of {@link FabMenu}: `--md-comp-fab-menu-*`. */\nexport const fabMenuTokenSet = defineComponentTokens({\n  name: 'md-comp-fab-menu',\n  tokens: {\n    'close-button-container-shape': {\n      // M3's full corners, written as half the 56px close button so the corners interpolate\n      // from the FAB's while the button shrinks.\n      value: px(28),\n      description: 'The open close button’s corners (half its 56px size, so they animate).',\n      compose: 'FabMenuBaselineTokens.CloseButtonContainerShape',\n      paints: { slot: 'button', property: 'border-top-left-radius', state: 'open' },\n    },\n    'menu-item-container-shape': {\n      value: corner('full'),\n      description: 'The corners of the list’s items.',\n      compose: 'FabMenuBaselineTokens.ListItemContainerShape',\n      paints: { slot: 'item', property: 'border-top-left-radius' },\n    },\n  },\n  scopes: {\n    color: Object.fromEntries(COLORS.map((name) => [name, closeButtonScope(name)])),\n    'item-color': Object.fromEntries(COLORS.map((name) => [`${name}-container`, itemScope(name)])),\n  },\n});\n"],"mappings":";;AAwBA,MAAM,eAAgF;CACpF,SAAS;EAAE,WAAW;EAAW,MAAM;CAAa;CACpD,WAAW;EAAE,WAAW;EAAa,MAAM;CAAe;CAC1D,UAAU;EAAE,WAAW;EAAY,MAAM;CAAc;AACzD;AAEA,MAAM,OAA2E;CAC/E,SAAS;EAAE,WAAW;EAAqB,SAAS;CAAuB;CAC3E,WAAW;EAAE,WAAW;EAAuB,SAAS;CAAyB;CACjF,UAAU;EAAE,WAAW;EAAsB,SAAS;CAAwB;AAChF;AAEA,MAAM,oBAAoB,UAA6C;CACrE,QAAQ,oBAAoB;CAC5B,QAAQ;EACN,gCAAgC;GAC9B,OAAO,MAAM,aAAa,KAAK,CAAC,SAAS;GACzC,aAAa;GACb,QAAQ;IAAE,MAAM;IAAU,UAAU;IAAoB,OAAO;GAAO;EACxE;EACA,2BAA2B;GACzB,OAAO,MAAM,aAAa,KAAK,CAAC,IAAI;GACpC,aAAa;GACb,QAAQ;IAAE,MAAM;IAAU,UAAU;IAAS,OAAO;GAAO;EAC7D;CACF;AACF;AAEA,MAAM,aAAa,UAA6C;CAC9D,QAAQ,oBAAoB,KAAK;CACjC,QAAQ;EACN,6BAA6B;GAC3B,OAAO,MAAM,KAAK,KAAK,CAAC,SAAS;GACjC,aAAa;GACb,QAAQ;IAAE,MAAM;IAAQ,UAAU;GAAmB;EACvD;EACA,8BAA8B;GAC5B,OAAO,MAAM,KAAK,KAAK,CAAC,OAAO;GAC/B,aAAa;GACb,QAAQ;IAAE,MAAM;IAAQ,UAAU;GAAQ;EAC5C;EACA,wBAAwB;GACtB,OAAO,MAAM,KAAK,KAAK,CAAC,OAAO;GAC/B,aAAa;GACb,QAAQ;IAAE,MAAM;IAAa,UAAU;GAAQ;EACjD;CACF;AACF;AAEA,MAAM,SAAyB;CAAC;CAAW;CAAa;AAAU;;AAGlE,MAAa,kBAAkB,sBAAsB;CACnD,MAAM;CACN,QAAQ;EACN,gCAAgC;GAG9B,OAAO,GAAG,EAAE;GACZ,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,MAAM;IAAU,UAAU;IAA0B,OAAO;GAAO;EAC9E;EACA,6BAA6B;GAC3B,OAAO,OAAO,MAAM;GACpB,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,MAAM;IAAQ,UAAU;GAAyB;EAC7D;CACF;CACA,QAAQ;EACN,OAAO,OAAO,YAAY,OAAO,KAAK,SAAS,CAAC,MAAM,iBAAiB,IAAI,CAAC,CAAC,CAAC;EAC9E,cAAc,OAAO,YAAY,OAAO,KAAK,SAAS,CAAC,GAAG,KAAK,aAAa,UAAU,IAAI,CAAC,CAAC,CAAC;CAC/F;AACF,CAAC"}

package/dist/components/icon-button/IconButton.d.ts

@@ -0,0 +1,125 @@
+import { Density } from "../../tokens/density.js";
+import { ButtonBaseActionProps, ButtonBaseLinkProps, ButtonBaseToggleProps } from "../../primitives/ButtonBase.js";
+import { ButtonShape, ButtonSize } from "../button/button-styles.js";
+import { ButtonLabels } from "../button/button-pending.js";
+import { IconButtonVariant, IconButtonWidth } from "./icon-button-styles.js";
+import { IconTransition } from "../../primitives/icon-faces-styles.js";
+import { ReactElement } from "react";
+//#region src/components/icon-button/IconButton.d.ts
+export interface IconButtonClassNames {
+  /** The button element itself; merged with `className`. */
+  root?: string;
+  /** Inner wrapper around the icon. */
+  content?: string;
+  /** The icon. */
+  icon?: string;
+  /** The built-in plain tooltip that shows the label (`tooltip`). */
+  tooltip?: string;
+  /** The slot holding the loading indicator while `pending`, centred over the hidden icon. */
+  pendingIndicator?: string;
+}
+/** Icon buttons have no visible text, so an accessible name is required. */
+type AccessibleName = {
+  /** The button's accessible name, also shown in its tooltip. Required without `aria-labelledby`. */
+  'aria-label': string;
+  /** The id of an element that names the button, instead of `aria-label`. */
+  'aria-labelledby'?: string;
+} | {
+  /** The button's accessible name, also shown in its tooltip. Required without `aria-labelledby`. */
+  'aria-label'?: string;
+  /** The id of an element that names the button, instead of `aria-label`. */
+  'aria-labelledby': string;
+};
+interface IconButtonOwnProps {
+  /**
+   * Colour style. Filled is the M3 default; toolbars and app bars default their icon
+   * buttons to `standard` through `ButtonContext`.
+   * @default "filled"
+   */
+  variant?: IconButtonVariant;
+  /** Container and icon size, from extra small to extra large. @default "sm" */
+  size?: ButtonSize;
+  /** Container width: narrow, default or wide, at the same height. @default "default" */
+  width?: IconButtonWidth;
+  /** Fully round corners, or square ones (still rounded, but less). @default "round" */
+  shape?: ButtonShape;
+  /**
+   * Web density, `0` to `-3`: each step takes 4px off the container's height and width (an
+   * S button: 40px at 0, 28px at -3), never below the icon plus 4px; the touch target stays
+   * 48 × 48px. Left out, the button takes the density of the nearest `ThemeProvider` or
+   * `ThemeScope`; icon buttons in a field's icon slots, and in app bars, toolbars, search bars,
+   * a navigation rail's header and dialog and sheet headers, keep their size. M3 asks for density
+   * to be the reader's choice rather than a default, so prefer setting it there.
+   * @default 0
+   */
+  density?: Density;
+  /** The icon, e.g. a Material Symbols SVG. Hidden from assistive tech; `aria-label` names the button. */
+  icon: ReactElement;
+  /**
+   * Shows the `aria-label` in a plain tooltip on hover and keyboard focus, as M3 asks of
+   * icon buttons on the web. The tooltip only repeats the name, so it isn't linked as a
+   * description (no double announcement). It steps aside when the button is already inside a
+   * `TooltipTrigger` or `RichTooltipTrigger`, and when it's named by `aria-labelledby`.
+   * @default true
+   */
+  tooltip?: boolean;
+  /** Classes for each part. `classNames.root` is merged with `className`. */
+  classNames?: IconButtonClassNames;
+  /** Words the button announces. */
+  labels?: Partial<ButtonLabels>;
+}
+interface IconButtonPendingProps {
+  /**
+   * Shows a loading indicator in place of the icon while an action runs, and blocks presses.
+   * The button keeps its size, its colours and keyboard focus; its accessible name gains
+   * `labels.pending` (the tooltip keeps showing only the `aria-label`), and a focused button
+   * announces it. The indicator appears after 200ms, so a quick action doesn't flash. Use it
+   * for actions that take a moment, not for every button in a list.
+   * @default false
+   */
+  pending?: boolean;
+  /**
+   * Replaces the loading indicator shown while `pending`, e.g. a `CircularProgressIndicator`
+   * for a wait that may pass five seconds. It's centred over the icon and takes the content
+   * colour; a progress indicator also loses its track, as M3 asks inside a button.
+   */
+  pendingIndicator?: ReactElement;
+}
+type OmitOwn<T> = Omit<T, keyof IconButtonOwnProps | keyof IconButtonPendingProps | 'children' | 'aria-label' | 'aria-labelledby'>;
+export type IconButtonActionProps = IconButtonOwnProps & IconButtonPendingProps & OmitOwn<ButtonBaseActionProps> & AccessibleName;
+export type IconButtonLinkProps = IconButtonOwnProps & IconButtonPendingProps & OmitOwn<ButtonBaseLinkProps> & AccessibleName;
+export type IconButtonToggleProps = IconButtonOwnProps & OmitOwn<ButtonBaseToggleProps> & AccessibleName & {
+  /** Toggle buttons have no pending state. */
+  pending?: never;
+  /** Toggle buttons have no pending state. */
+  pendingIndicator?: never;
+  /** Icon shown while selected, e.g. the filled form of `icon`. */
+  selectedIcon?: ReactElement;
+  /**
+   * How `icon` hands over to `selectedIcon`: `swap` changes it at once, `rotate` turns and
+   * crossfades the two (counter-clockwise as it selects, in LTR). `rotate` is an extension
+   * beyond the M3 spec, matching Google's Expressive showcase, like the FAB menu's.
+   * Reduced motion keeps only the crossfade. Needs `selectedIcon`.
+   * @default "swap"
+   */
+  iconTransition?: IconTransition;
+};
+export type IconButtonProps = IconButtonActionProps | IconButtonLinkProps | IconButtonToggleProps;
+/**
+ * M3 Expressive icon button: filled (default), tonal, outlined and standard variants;
+ * XS–XL sizes; narrow, default or wide widths; round or square shape; an optional toggle
+ * form; a press morph; and its label as a tooltip on hover and keyboard focus.
+ *
+ * Shares `size`, `shape` and `disabled` with `ButtonContext`, so it fits in button groups,
+ * and takes its default variant from it (`iconButtonVariant`).
+ *
+ * @example
+ * <IconButton icon={<SearchIcon />} aria-label="Search" onPress={openSearch} />
+ * <IconButton variant="standard" icon={<MoreIcon />} aria-label="More options" />
+ * <IconButton toggle variant="filled" icon={<StarIcon />} selectedIcon={<StarFilledIcon />}
+ *   aria-label="Favourite" selected={isFavourite} onSelectedChange={setFavourite} />
+ * <IconButton icon={<RefreshIcon />} aria-label="Refresh" pending={refreshing} onPress={refresh} />
+ */
+export declare function IconButton(props: IconButtonProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=IconButton.d.ts.map