@windmorph/react 0.0.0-stage → 0.1.0

package/dist/components/button/button-pending.js

@@ -0,0 +1,166 @@
+"use client";
+import { usePresence } from "../../primitives/use-presence.js";
+import { announcePolite, prepareAnnouncer } from "../../utils/announce.js";
+import { usePreloadOnIntent } from "../../utils/load-on-demand.js";
+import { LazyLoadingIndicator, preloadLoadingIndicator } from "../loading-indicator/lazy-loading-indicator.js";
+import { useEffect, useId, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useObjectRef } from "react-aria";
+//#region src/components/button/button-pending.tsx
+const DEFAULT_LABELS = { pending: "Loading" };
+/**
+* The indicator's size per button size: the icon's size, but never under M3's 24px minimum
+* for a loading indicator ("It should be between 24dp to 240dp").
+*/
+const PENDING_INDICATOR_SIZE = {
+	xs: 24,
+	sm: 24,
+	md: 24,
+	lg: 32,
+	xl: 40
+};
+/**
+* The swap between the content and the indicator: a crossfade on the fast effects spring
+* (opacity never overshoots), held back 200ms on the way in (M3's lower bound for a loading
+* indicator) so a quick action never flashes, and immediate on the way out. Both share the
+* content wrapper's one grid cell, so the button keeps its width.
+*/
+const fade = "transition-opacity duration-(--md-sys-motion-spring-effects-fast-duration) ease-(--md-sys-motion-spring-effects-fast-easing)";
+const pendingClasses = {
+	/** The content wrapper, once the button takes a `pending` prop: one grid cell. */
+	content: "inline-grid",
+	/** What the indicator replaces (an icon button's icon), in the cell; hidden once it shows. */
+	replaced: `[grid-area:1/1] ${fade} [[data-pending-shown]>&]:opacity-0 [[data-pending-shown]>&]:delay-200`,
+	/** A button's icon and label, laid out as the content was, in the cell. */
+	faces: "inline-flex items-center justify-center gap-[inherit]",
+	/**
+	* The indicator's slot, in the same cell: a zero-size box centred in it, so the indicator
+	* (as big as the icon, at least 24px) never changes the button's size, even where it's larger
+	* than the icon. Its colour is the content colour (M3's 3:1 rule for an indicator in a button).
+	*/
+	indicator: `pointer-events-none flex size-0 items-center justify-center self-center justify-self-center overflow-visible opacity-0 [grid-area:1/1] ${fade} [[data-pending-shown]>&]:opacity-100 [[data-pending-shown]>&]:delay-200`
+};
+/**
+* The indicator takes the content colour, so it reads wherever the label does (M3: an indicator
+* in a button needs 3:1 against it). A progress indicator given as `pendingIndicator` gets M3's
+* "Progress indicators in buttons" treatment too: the label's colour, and no track.
+*/
+const indicatorColor = {
+	"--md-comp-loading-indicator-active-indicator-color": "currentColor",
+	"--md-comp-progress-indicator-active-indicator-color": "currentColor",
+	"--md-comp-progress-indicator-track-color": "transparent"
+};
+/** The name suffix's style: text that takes no room (see `nameSuffix`). */
+const HIDDEN_SUFFIX = {
+	fontSize: 0,
+	lineHeight: 0,
+	letterSpacing: 0,
+	wordSpacing: 0
+};
+/** Text of `node` as a screen reader reads it: `aria-hidden` subtrees left out. */
+function readableText(node) {
+	if (node.nodeType === Node.TEXT_NODE) return node.textContent ?? "";
+	if (node instanceof Element && node.getAttribute("aria-hidden") === "true") return "";
+	return Array.from(node.childNodes, readableText).join("");
+}
+/** The element's accessible name, for the cases a button can be named by. */
+function accessibleName(element) {
+	const labelledby = element.getAttribute("aria-labelledby");
+	if (labelledby) return labelledby.split(/\s+/).map((id) => document.getElementById(id)?.textContent?.trim() ?? "").filter(Boolean).join(" ");
+	return element.getAttribute("aria-label") ?? readableText(element).trim();
+}
+/**
+* The pending state of `Button` and `IconButton` (React Aria's pending `Button`): the props for
+* the root, the accessible-name suffix, and the indicator's slot.
+*
+* - The name gains `labels.pending` while pending, from the first frame: appended to an
+*   `aria-label`, an extra id on `aria-labelledby`, or a visually hidden suffix at the end of the label.
+* - When it turns on while focus is in the button, the new name is announced politely, once.
+* - The indicator (the core's `LoadingIndicator`, loaded on demand, or `pendingIndicator`) is
+*   preloaded once the button takes a `pending` prop at all, when the browser is idle or the
+*   pointer or focus arrives. The content hides only once the indicator is mounted
+*   (`data-pending-shown`), so a server-rendered pending button shows its label until then.
+*/
+function useButtonPending({ pending: pendingProp, pendingIndicator, labels: labelsProp, size, ariaLabel, ariaLabelledby, ref: refProp, indicatorClassName }) {
+	const takesPending = pendingProp !== void 0;
+	const pending = pendingProp === true;
+	const custom = pendingIndicator !== void 0;
+	const labels = {
+		...DEFAULT_LABELS,
+		...labelsProp
+	};
+	const hiddenId = useId();
+	const ref = useObjectRef(refProp);
+	usePreloadOnIntent(ref, preloadLoadingIndicator, takesPending && !custom);
+	useEffect(() => {
+		if (takesPending) prepareAnnouncer();
+	}, [takesPending]);
+	const [loaded, setLoaded] = useState(false);
+	useEffect(() => {
+		if (!pending || custom || loaded) return;
+		let live = true;
+		preloadLoadingIndicator().then(() => live && setLoaded(true), () => void 0);
+		return () => {
+			live = false;
+		};
+	}, [
+		pending,
+		custom,
+		loaded
+	]);
+	const shown = pending && (custom || loaded);
+	const { isPresent, exitProps } = usePresence(shown);
+	useEffect(() => {
+		const element = ref.current;
+		if (!pending || !element || !element.contains(document.activeElement)) return;
+		const name = accessibleName(element);
+		if (name) announcePolite(name);
+	}, [ref, pending]);
+	let nameProps = {};
+	let hiddenName = null;
+	let nameSuffix = null;
+	if (pending) {
+		if (ariaLabelledby) {
+			nameProps = { "aria-labelledby": `${ariaLabelledby} ${hiddenId}` };
+			hiddenName = /* @__PURE__ */ jsx("span", {
+				id: hiddenId,
+				hidden: true,
+				children: labels.pending
+			});
+		} else if (ariaLabel) nameProps = { "aria-label": `${ariaLabel}, ${labels.pending}` };
+		else nameSuffix = /* @__PURE__ */ jsx("span", {
+			style: HIDDEN_SUFFIX,
+			children: `, ${labels.pending}`
+		});
+	}
+	const indicator = takesPending ? /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		"data-slot": "pending-indicator",
+		className: indicatorClassName,
+		style: indicatorColor,
+		...exitProps,
+		children: isPresent && (pendingIndicator ?? /* @__PURE__ */ jsx(LazyLoadingIndicator, {
+			size: PENDING_INDICATOR_SIZE[size],
+			"aria-label": labels.pending
+		}))
+	}) : null;
+	return {
+		/** Whether the content wrapper holds the grid cell (the button takes `pending`). */
+		takesPending,
+		rootProps: {
+			ref,
+			...nameProps,
+			"data-pending": pending || void 0
+		},
+		contentProps: { "data-pending-shown": shown || void 0 },
+		/** The element `aria-labelledby` adds while pending, anywhere in the button. */
+		hiddenName,
+		/** The suffix of a name taken from the content, to put at the end of the label's text. */
+		nameSuffix,
+		indicator
+	};
+}
+//#endregion
+export { PENDING_INDICATOR_SIZE, pendingClasses, useButtonPending };
+
+//# sourceMappingURL=button-pending.js.map

package/dist/components/button/button-pending.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-pending.js","names":[],"sources":["../../../src/components/button/button-pending.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useEffect,\n  useId,\n  useState,\n  type CSSProperties,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport { useObjectRef } from 'react-aria';\nimport { usePresence } from '../../primitives/use-presence';\nimport { announcePolite, prepareAnnouncer } from '../../utils/announce';\nimport { usePreloadOnIntent } from '../../utils/load-on-demand';\nimport {\n  LazyLoadingIndicator,\n  preloadLoadingIndicator,\n} from '../loading-indicator/lazy-loading-indicator';\nimport type { ButtonSize } from './button-styles';\n\n/** Words a `Button` or `IconButton` announces. */\nexport interface ButtonLabels {\n  /** Added to the accessible name while `pending` (\"Save, Loading\"). @default \"Loading\" */\n  pending: string;\n}\n\nconst DEFAULT_LABELS: ButtonLabels = { pending: 'Loading' };\n\n/**\n * The indicator's size per button size: the icon's size, but never under M3's 24px minimum\n * for a loading indicator (\"It should be between 24dp to 240dp\").\n */\nexport const PENDING_INDICATOR_SIZE: Record<ButtonSize, number> = {\n  xs: 24,\n  sm: 24,\n  md: 24,\n  lg: 32,\n  xl: 40,\n};\n\n/**\n * The swap between the content and the indicator: a crossfade on the fast effects spring\n * (opacity never overshoots), held back 200ms on the way in (M3's lower bound for a loading\n * indicator) so a quick action never flashes, and immediate on the way out. Both share the\n * content wrapper's one grid cell, so the button keeps its width.\n */\nconst fade =\n  'transition-opacity duration-(--md-sys-motion-spring-effects-fast-duration) ease-(--md-sys-motion-spring-effects-fast-easing)';\n\nexport const pendingClasses = {\n  /** The content wrapper, once the button takes a `pending` prop: one grid cell. */\n  content: 'inline-grid',\n  /** What the indicator replaces (an icon button's icon), in the cell; hidden once it shows. */\n  replaced: `[grid-area:1/1] ${fade} [[data-pending-shown]>&]:opacity-0 [[data-pending-shown]>&]:delay-200`,\n  /** A button's icon and label, laid out as the content was, in the cell. */\n  faces: 'inline-flex items-center justify-center gap-[inherit]',\n  /**\n   * The indicator's slot, in the same cell: a zero-size box centred in it, so the indicator\n   * (as big as the icon, at least 24px) never changes the button's size, even where it's larger\n   * than the icon. Its colour is the content colour (M3's 3:1 rule for an indicator in a button).\n   */\n  indicator: `pointer-events-none flex size-0 items-center justify-center self-center justify-self-center overflow-visible opacity-0 [grid-area:1/1] ${fade} [[data-pending-shown]>&]:opacity-100 [[data-pending-shown]>&]:delay-200`,\n} as const;\n\n/**\n * The indicator takes the content colour, so it reads wherever the label does (M3: an indicator\n * in a button needs 3:1 against it). A progress indicator given as `pendingIndicator` gets M3's\n * \"Progress indicators in buttons\" treatment too: the label's colour, and no track.\n */\nconst indicatorColor = {\n  '--md-comp-loading-indicator-active-indicator-color': 'currentColor',\n  '--md-comp-progress-indicator-active-indicator-color': 'currentColor',\n  '--md-comp-progress-indicator-track-color': 'transparent',\n} as CSSProperties;\n\n/** The name suffix's style: text that takes no room (see `nameSuffix`). */\nconst HIDDEN_SUFFIX: CSSProperties = {\n  fontSize: 0,\n  lineHeight: 0,\n  letterSpacing: 0,\n  wordSpacing: 0,\n};\n\ninterface PendingOptions<E extends HTMLElement> {\n  pending: boolean | undefined;\n  pendingIndicator: ReactElement | undefined;\n  labels: Partial<ButtonLabels> | undefined;\n  size: ButtonSize;\n  ariaLabel: string | undefined;\n  ariaLabelledby: string | undefined;\n  ref: Ref<E> | undefined;\n  /** Classes for the indicator's slot (`classNames.pendingIndicator`). */\n  indicatorClassName: string | undefined;\n}\n\n/** Text of `node` as a screen reader reads it: `aria-hidden` subtrees left out. */\nfunction readableText(node: Node): string {\n  if (node.nodeType === Node.TEXT_NODE) return node.textContent ?? '';\n  if (node instanceof Element && node.getAttribute('aria-hidden') === 'true') return '';\n  return Array.from(node.childNodes, readableText).join('');\n}\n\n/** The element's accessible name, for the cases a button can be named by. */\nfunction accessibleName(element: HTMLElement): string {\n  const labelledby = element.getAttribute('aria-labelledby');\n  if (labelledby) {\n    return labelledby\n      .split(/\\s+/)\n      .map((id) => document.getElementById(id)?.textContent?.trim() ?? '')\n      .filter(Boolean)\n      .join(' ');\n  }\n  return element.getAttribute('aria-label') ?? readableText(element).trim();\n}\n\n/**\n * The pending state of `Button` and `IconButton` (React Aria's pending `Button`): the props for\n * the root, the accessible-name suffix, and the indicator's slot.\n *\n * - The name gains `labels.pending` while pending, from the first frame: appended to an\n *   `aria-label`, an extra id on `aria-labelledby`, or a visually hidden suffix at the end of the label.\n * - When it turns on while focus is in the button, the new name is announced politely, once.\n * - The indicator (the core's `LoadingIndicator`, loaded on demand, or `pendingIndicator`) is\n *   preloaded once the button takes a `pending` prop at all, when the browser is idle or the\n *   pointer or focus arrives. The content hides only once the indicator is mounted\n *   (`data-pending-shown`), so a server-rendered pending button shows its label until then.\n */\nexport function useButtonPending<E extends HTMLElement>({\n  pending: pendingProp,\n  pendingIndicator,\n  labels: labelsProp,\n  size,\n  ariaLabel,\n  ariaLabelledby,\n  ref: refProp,\n  indicatorClassName,\n}: PendingOptions<E>) {\n  const takesPending = pendingProp !== undefined;\n  const pending = pendingProp === true;\n  const custom = pendingIndicator !== undefined;\n  const labels = { ...DEFAULT_LABELS, ...labelsProp };\n  const hiddenId = useId();\n\n  // The element, for the announcement and the preload; it also forwards to the app's ref.\n  const ref = useObjectRef(refProp);\n\n  usePreloadOnIntent(ref, preloadLoadingIndicator, takesPending && !custom);\n  useEffect(() => {\n    if (takesPending) prepareAnnouncer();\n  }, [takesPending]);\n\n  const [loaded, setLoaded] = useState(false);\n  useEffect(() => {\n    if (!pending || custom || loaded) return;\n    let live = true;\n    preloadLoadingIndicator().then(\n      () => live && setLoaded(true),\n      () => undefined,\n    );\n    return () => {\n      live = false;\n    };\n  }, [pending, custom, loaded]);\n\n  const shown = pending && (custom || loaded);\n  const { isPresent, exitProps } = usePresence(shown);\n\n  useEffect(() => {\n    const element = ref.current;\n    if (!pending || !element || !element.contains(document.activeElement)) return;\n    // The name already carries the suffix, as it does for a screen reader.\n    const name = accessibleName(element);\n    if (name) announcePolite(name);\n  }, [ref, pending]);\n\n  let nameProps: { 'aria-label'?: string; 'aria-labelledby'?: string } = {};\n  let hiddenName: ReactNode = null;\n  let nameSuffix: ReactNode = null;\n  if (pending) {\n    if (ariaLabelledby) {\n      nameProps = { 'aria-labelledby': `${ariaLabelledby} ${hiddenId}` };\n      hiddenName = (\n        <span id={hiddenId} hidden>\n          {labels.pending}\n        </span>\n      );\n    } else if (ariaLabel) {\n      nameProps = { 'aria-label': `${ariaLabel}, ${labels.pending}` };\n    } else {\n      // Inline text at the label's end, sized to nothing: browsers join the text of a block,\n      // a grid item or an absolutely positioned box (`sr-only`) to the label with a space\n      // (\"Save , Loading\"), but run inline text on (\"Save, Loading\"). No tracking either (the\n      // label's is in rem, so it would still space each hidden letter out), nor line height\n      // (its half-leading, centred on the zero-size text, would grow the label's line).\n      nameSuffix = <span style={HIDDEN_SUFFIX}>{`, ${labels.pending}`}</span>;\n    }\n  }\n\n  const indicator = takesPending ? (\n    <span\n      aria-hidden=\"true\"\n      data-slot=\"pending-indicator\"\n      className={indicatorClassName}\n      style={indicatorColor}\n      {...exitProps}\n    >\n      {isPresent &&\n        (pendingIndicator ?? (\n          <LazyLoadingIndicator size={PENDING_INDICATOR_SIZE[size]} aria-label={labels.pending} />\n        ))}\n    </span>\n  ) : null;\n\n  return {\n    /** Whether the content wrapper holds the grid cell (the button takes `pending`). */\n    takesPending,\n    rootProps: { ref, ...nameProps, 'data-pending': pending || undefined },\n    contentProps: { 'data-pending-shown': shown || undefined },\n    /** The element `aria-labelledby` adds while pending, anywhere in the button. */\n    hiddenName,\n    /** The suffix of a name taken from the content, to put at the end of the label's text. */\n    nameSuffix,\n    indicator,\n  };\n}\n"],"mappings":";;;;;;;;;AA2BA,MAAM,iBAA+B,EAAE,SAAS,UAAU;;;;;AAM1D,MAAa,yBAAqD;CAChE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;;;AAQA,MAAM,OACJ;AAEF,MAAa,iBAAiB;;CAE5B,SAAS;;CAET,UAAU,mBAAmB,KAAK;;CAElC,OAAO;;;;;;CAMP,WAAW,0IAA0I,KAAK;AAC5J;;;;;;AAOA,MAAM,iBAAiB;CACrB,sDAAsD;CACtD,uDAAuD;CACvD,4CAA4C;AAC9C;;AAGA,MAAM,gBAA+B;CACnC,UAAU;CACV,YAAY;CACZ,eAAe;CACf,aAAa;AACf;;AAeA,SAAS,aAAa,MAAoB;CACxC,IAAI,KAAK,aAAa,KAAK,WAAW,OAAO,KAAK,eAAe;CACjE,IAAI,gBAAgB,WAAW,KAAK,aAAa,aAAa,MAAM,QAAQ,OAAO;CACnF,OAAO,MAAM,KAAK,KAAK,YAAY,YAAY,CAAC,CAAC,KAAK,EAAE;AAC1D;;AAGA,SAAS,eAAe,SAA8B;CACpD,MAAM,aAAa,QAAQ,aAAa,iBAAiB;CACzD,IAAI,YACF,OAAO,WACJ,MAAM,KAAK,CAAC,CACZ,KAAK,OAAO,SAAS,eAAe,EAAE,CAAC,EAAE,aAAa,KAAK,KAAK,EAAE,CAAC,CACnE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEb,OAAO,QAAQ,aAAa,YAAY,KAAK,aAAa,OAAO,CAAC,CAAC,KAAK;AAC1E;;;;;;;;;;;;;AAcA,SAAgB,iBAAwC,EACtD,SAAS,aACT,kBACA,QAAQ,YACR,MACA,WACA,gBACA,KAAK,SACL,sBACoB;CACpB,MAAM,eAAe,gBAAgB,KAAA;CACrC,MAAM,UAAU,gBAAgB;CAChC,MAAM,SAAS,qBAAqB,KAAA;CACpC,MAAM,SAAS;EAAE,GAAG;EAAgB,GAAG;CAAW;CAClD,MAAM,WAAW,MAAM;CAGvB,MAAM,MAAM,aAAa,OAAO;CAEhC,mBAAmB,KAAK,yBAAyB,gBAAgB,CAAC,MAAM;CACxE,gBAAgB;EACd,IAAI,cAAc,iBAAiB;CACrC,GAAG,CAAC,YAAY,CAAC;CAEjB,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,gBAAgB;EACd,IAAI,CAAC,WAAW,UAAU,QAAQ;EAClC,IAAI,OAAO;EACX,wBAAwB,CAAC,CAAC,WAClB,QAAQ,UAAU,IAAI,SACtB,KAAA,CACR;EACA,aAAa;GACX,OAAO;EACT;CACF,GAAG;EAAC;EAAS;EAAQ;CAAM,CAAC;CAE5B,MAAM,QAAQ,YAAY,UAAU;CACpC,MAAM,EAAE,WAAW,cAAc,YAAY,KAAK;CAElD,gBAAgB;EACd,MAAM,UAAU,IAAI;EACpB,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,QAAQ,SAAS,SAAS,aAAa,GAAG;EAEvE,MAAM,OAAO,eAAe,OAAO;EACnC,IAAI,MAAM,eAAe,IAAI;CAC/B,GAAG,CAAC,KAAK,OAAO,CAAC;CAEjB,IAAI,YAAmE,CAAC;CACxE,IAAI,aAAwB;CAC5B,IAAI,aAAwB;CAC5B,IAAI,SAAS;EACX,IAAI,gBAAgB;GAClB,YAAY,EAAE,mBAAmB,GAAG,eAAe,GAAG,WAAW;GACjE,aACE,oBAAC,QAAD;IAAM,IAAI;IAAU,QAAA;IACjB,UAAA,OAAO;GACJ,CAAA;EAEV,OAAO,IAAI,WACT,YAAY,EAAE,cAAc,GAAG,UAAU,IAAI,OAAO,UAAU;OAO9D,aAAa,oBAAC,QAAD;GAAM,OAAO;GAAgB,UAAA,KAAK,OAAO;EAAgB,CAAA;CAE1E;CAEA,MAAM,YAAY,eAChB,oBAAC,QAAD;EACE,eAAY;EACZ,aAAU;EACV,WAAW;EACX,OAAO;EACP,GAAI;EAEH,UAAA,cACE,oBACC,oBAAC,sBAAD;GAAsB,MAAM,uBAAuB;GAAO,cAAY,OAAO;EAAU,CAAA;CAEvF,CAAA,IACJ;CAEJ,OAAO;;EAEL;EACA,WAAW;GAAE;GAAK,GAAG;GAAW,gBAAgB,WAAW,KAAA;EAAU;EACrE,cAAc,EAAE,sBAAsB,SAAS,KAAA,EAAU;;EAEzD;;EAEA;EACA;CACF;AACF"}

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

@@ -0,0 +1,216 @@
+import { VariantProps } from "../../utils/tv.js";
+//#region src/components/button/button-styles.d.ts
+export declare const buttonVariantClasses: {
+  readonly filled: string;
+  readonly elevated: string;
+  readonly tonal: string;
+  readonly outlined: "[--m3-button-border:1px] border-(length:--m3-button-border) border-solid border-[color:var(--_md-comp-button-outline-color)] bg-[var(--_md-comp-button-container-color)] text-[color:var(--_md-comp-button-label-text-color)] shadow-[shadow:var(--_md-comp-button-container-elevation)] data-disabled:not-data-selected:border-outline-variant/10";
+  readonly text: string;
+};
+/** Variant definitions for {@link Button}; extend them to add variants. */
+export declare const buttonStyles: import("tailwind-variants").TVReturnType<{
+  variant: {
+    filled: {
+      root: string;
+    };
+    elevated: {
+      root: string;
+    };
+    tonal: {
+      root: string;
+    };
+    outlined: {
+      root: "[--m3-button-border:1px] border-(length:--m3-button-border) border-solid border-[color:var(--_md-comp-button-outline-color)] bg-[var(--_md-comp-button-container-color)] text-[color:var(--_md-comp-button-label-text-color)] shadow-[shadow:var(--_md-comp-button-container-elevation)] data-disabled:not-data-selected:border-outline-variant/10";
+    };
+    text: {
+      root: string;
+    };
+  };
+  size: {
+    xs: {
+      root: string;
+      content: string;
+      icon: string;
+    };
+    sm: {
+      root: string;
+      content: string;
+      icon: string;
+    };
+    md: {
+      root: string;
+      content: string;
+      icon: string;
+    };
+    lg: {
+      root: string;
+      content: string;
+      icon: string;
+    };
+    xl: {
+      root: string;
+      content: string;
+      icon: string;
+    };
+  };
+  shape: {
+    round: {};
+    square: {};
+  };
+  toggle: {
+    true: {};
+    false: {};
+  };
+  /** Position in a connected button group, set by `ButtonGroup`. */
+  connected: {
+    none: {};
+    leading: {};
+    middle: {};
+    trailing: {};
+  };
+}, {
+  root: string[];
+  content: string;
+  label: string;
+  icon: string;
+}, undefined, {
+  variant: {
+    filled: {
+      root: string;
+    };
+    elevated: {
+      root: string;
+    };
+    tonal: {
+      root: string;
+    };
+    outlined: {
+      root: "[--m3-button-border:1px] border-(length:--m3-button-border) border-solid border-[color:var(--_md-comp-button-outline-color)] bg-[var(--_md-comp-button-container-color)] text-[color:var(--_md-comp-button-label-text-color)] shadow-[shadow:var(--_md-comp-button-container-elevation)] data-disabled:not-data-selected:border-outline-variant/10";
+    };
+    text: {
+      root: string;
+    };
+  };
+  size: {
+    xs: {
+      root: string;
+      content: string;
+      icon: string;
+    };
+    sm: {
+      root: string;
+      content: string;
+      icon: string;
+    };
+    md: {
+      root: string;
+      content: string;
+      icon: string;
+    };
+    lg: {
+      root: string;
+      content: string;
+      icon: string;
+    };
+    xl: {
+      root: string;
+      content: string;
+      icon: string;
+    };
+  };
+  shape: {
+    round: {};
+    square: {};
+  };
+  toggle: {
+    true: {};
+    false: {};
+  };
+  /** Position in a connected button group, set by `ButtonGroup`. */
+  connected: {
+    none: {};
+    leading: {};
+    middle: {};
+    trailing: {};
+  };
+}, {
+  root: string[];
+  content: string;
+  label: string;
+  icon: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  variant: {
+    filled: {
+      root: string;
+    };
+    elevated: {
+      root: string;
+    };
+    tonal: {
+      root: string;
+    };
+    outlined: {
+      root: "[--m3-button-border:1px] border-(length:--m3-button-border) border-solid border-[color:var(--_md-comp-button-outline-color)] bg-[var(--_md-comp-button-container-color)] text-[color:var(--_md-comp-button-label-text-color)] shadow-[shadow:var(--_md-comp-button-container-elevation)] data-disabled:not-data-selected:border-outline-variant/10";
+    };
+    text: {
+      root: string;
+    };
+  };
+  size: {
+    xs: {
+      root: string;
+      content: string;
+      icon: string;
+    };
+    sm: {
+      root: string;
+      content: string;
+      icon: string;
+    };
+    md: {
+      root: string;
+      content: string;
+      icon: string;
+    };
+    lg: {
+      root: string;
+      content: string;
+      icon: string;
+    };
+    xl: {
+      root: string;
+      content: string;
+      icon: string;
+    };
+  };
+  shape: {
+    round: {};
+    square: {};
+  };
+  toggle: {
+    true: {};
+    false: {};
+  };
+  /** Position in a connected button group, set by `ButtonGroup`. */
+  connected: {
+    none: {};
+    leading: {};
+    middle: {};
+    trailing: {};
+  };
+}, {
+  root: string[];
+  content: string;
+  label: string;
+  icon: string;
+}>>;
+/**
+ * The variants of {@link buttonStyles}, 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 ButtonStyleProps = VariantProps<typeof buttonStyles>;
+export type ButtonVariant = NonNullable<ButtonStyleProps['variant']>;
+export type ButtonSize = NonNullable<ButtonStyleProps['size']>;
+export type ButtonShape = NonNullable<ButtonStyleProps['shape']>;
+//#endregion
+//# sourceMappingURL=button-styles.d.ts.map

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

@@ -0,0 +1,199 @@
+import { tv } from "../../utils/tv.js";
+import { connectedShapeVariants } from "./connected-shapes.js";
+//#region src/components/button/button-styles.ts
+const round = "rounded-[var(--_md-comp-button-container-shape-round-capped)]";
+const square = "rounded-[var(--_md-comp-button-container-shape-square)]";
+const pressed = {
+	xs: "data-pressed:rounded-corner-small",
+	sm: "data-pressed:rounded-corner-small",
+	md: "data-pressed:rounded-corner-medium",
+	lg: "data-pressed:rounded-corner-large",
+	xl: "data-pressed:rounded-corner-large"
+};
+const SIZES = Object.keys(pressed);
+/** Toggle, selected: round buttons become square… */
+const selectedSquare = "data-selected:not-data-pressed:not-data-disabled:rounded-[var(--_md-comp-button-container-shape-square)]";
+/** …and square buttons become round. */
+const selectedRound = "data-selected:not-data-pressed:not-data-disabled:rounded-[var(--_md-comp-button-container-shape-round-capped)]";
+const shapeVariants = [
+	{
+		connected: "none",
+		shape: "round",
+		class: { root: round }
+	},
+	{
+		connected: "none",
+		shape: "square",
+		class: { root: square }
+	},
+	...SIZES.map((size) => ({
+		size,
+		connected: "none",
+		class: { root: pressed[size] }
+	})),
+	{
+		connected: "none",
+		toggle: true,
+		shape: "round",
+		class: { root: selectedSquare }
+	},
+	{
+		connected: "none",
+		toggle: true,
+		shape: "square",
+		class: { root: selectedRound }
+	}
+];
+/**
+* Colours and elevation of each button variant, shared with the split button's halves.
+* The resting, selected and unselected colours, the elevated button's resting elevation and
+* the outline colour come from the component tokens (`button-tokens.ts`), so the element
+* needs `data-tokens="md-comp-button"` and `data-variant`, as Button and the split button's
+* halves render them. A consumer class (`bg-tertiary`) still wins in `cn()`. Disabled is `on-surface` 10% / `on-surface-variant` 38% for every variant.
+*
+* Hover raises a button only while it isn't pressed, so a press shows the pressed level
+* (elevated 1, filled and tonal 0) even under the pointer (2026-10-13).
+*
+* The outlined style's outline is drawn inside the container's edge spacing: its width is
+* `--m3-button-border` (1px; 2px at L, 3px at XL), and the padding subtracts it, so an
+* outlined button is the same size as the other styles with the same content (2026-10-13).
+* A selected outlined toggle has no outline, disabled or not, as on IconButton (2026-10-13).
+*
+* XS and S take a minimum height (32 / 40px) rather than a fixed one, so they grow around
+* text at a large browser font size, as Compose's `defaultMinSize` does; `h-fit` keeps a
+* stretching flex or grid parent from making them taller (2026-10-13).
+*/
+/**
+* The press morph on the default effects spring, which never bounces (`container-motion`
+* reads these). Shared with the split button's halves (2026-10-15).
+*/
+const nonBouncingMorph = "[--m3-shape-spring-duration:var(--md-sys-motion-spring-effects-default-duration)] [--m3-shape-spring-easing:var(--md-sys-motion-spring-effects-default-easing)]";
+/**
+* Forced colours (Windows high contrast), as Material Web's buttons: the browser paints
+* every container as `Canvas`, so a filled, elevated, tonal or text button draws a 1px
+* `CanvasText` boundary. It takes the outlined style's `--m3-button-border`, which the
+* padding already subtracts, so the button keeps its size (2026-10-15).
+*/
+const forcedBoundary = "forced-colors:[--m3-button-border:1px] forced-colors:border-(length:--m3-button-border) forced-colors:border-solid forced-colors:border-[CanvasText]";
+/**
+* Forced colours for every button, its split button halves and icon buttons: disabled
+* ones are `GrayText`, and a selected toggle is filled with `Highlight` (and opts out of
+* the forced palette to keep it), so it can be told from an unselected one (2026-10-15).
+* They're `!important` to win over the selected and disabled colours, whose selectors are
+* as specific; they apply only in forced colours.
+*/
+const forcedColorClasses = {
+	disabled: "forced-colors:data-disabled:border-[GrayText]! forced-colors:data-disabled:text-[GrayText]!",
+	selected: "forced-colors:data-selected:not-data-disabled:border-[Highlight]! forced-colors:data-selected:not-data-disabled:bg-[Highlight]! forced-colors:data-selected:not-data-disabled:text-[HighlightText]! forced-colors:data-selected:not-data-disabled:forced-color-adjust-none"
+};
+const buttonVariantClasses = {
+	filled: "bg-[var(--_md-comp-button-container-color)] text-[color:var(--_md-comp-button-label-text-color)] shadow-[shadow:var(--_md-comp-button-container-elevation)] data-hovered:not-data-pressed:shadow-elevation-1 data-disabled:bg-on-surface/10 " + forcedBoundary,
+	elevated: "bg-[var(--_md-comp-button-container-color)] text-[color:var(--_md-comp-button-label-text-color)] shadow-[shadow:var(--_md-comp-button-container-elevation)] data-hovered:not-data-pressed:shadow-elevation-2 data-disabled:bg-on-surface/10 " + forcedBoundary,
+	tonal: "bg-[var(--_md-comp-button-container-color)] text-[color:var(--_md-comp-button-label-text-color)] shadow-[shadow:var(--_md-comp-button-container-elevation)] data-hovered:not-data-pressed:shadow-elevation-1 data-disabled:bg-on-surface/10 " + forcedBoundary,
+	outlined: "[--m3-button-border:1px] border-(length:--m3-button-border) border-solid border-[color:var(--_md-comp-button-outline-color)] bg-[var(--_md-comp-button-container-color)] text-[color:var(--_md-comp-button-label-text-color)] shadow-[shadow:var(--_md-comp-button-container-elevation)] data-disabled:not-data-selected:border-outline-variant/10",
+	text: "bg-[var(--_md-comp-button-container-color)] text-[color:var(--_md-comp-button-label-text-color)] shadow-[shadow:var(--_md-comp-button-container-elevation)] " + forcedBoundary
+};
+/** Variant definitions for {@link Button}; extend them to add variants. */
+const buttonStyles = tv({
+	slots: {
+		root: [
+			"inline-flex shrink-0 cursor-pointer items-center justify-center align-middle",
+			"font-plain whitespace-nowrap select-none",
+			"state-layer focus-ring container-motion",
+			"data-disabled:cursor-default data-disabled:text-on-surface-variant/38 data-disabled:shadow-elevation-0",
+			forcedColorClasses.disabled
+		],
+		content: "relative inline-flex shrink-0 items-center justify-center",
+		label: "min-w-0",
+		icon: "inline-flex shrink-0 items-center justify-center [&>svg]:size-full"
+	},
+	variants: {
+		variant: {
+			filled: { root: buttonVariantClasses.filled },
+			elevated: { root: buttonVariantClasses.elevated },
+			tonal: { root: buttonVariantClasses.tonal },
+			outlined: { root: buttonVariantClasses.outlined },
+			text: { root: buttonVariantClasses.text }
+		},
+		size: {
+			xs: {
+				root: "h-fit min-h-[32px] min-w-[58px] px-[calc(16px-var(--m3-button-border,0px))] text-label-large",
+				content: "gap-[8px]",
+				icon: "size-[20px]"
+			},
+			sm: {
+				root: "h-fit min-h-[40px] min-w-[58px] px-[calc(16px-var(--m3-button-border,0px))] text-label-large",
+				content: "gap-[8px]",
+				icon: "size-[20px]"
+			},
+			md: {
+				root: "h-[56px] px-[calc(24px-var(--m3-button-border,0px))] text-title-medium",
+				content: "gap-[8px]",
+				icon: "size-[24px]"
+			},
+			lg: {
+				root: "h-[96px] px-[calc(48px-var(--m3-button-border,0px))] font-brand text-headline-small",
+				content: "gap-[12px]",
+				icon: "size-[32px]"
+			},
+			xl: {
+				root: "h-[136px] px-[calc(64px-var(--m3-button-border,0px))] font-brand text-headline-large",
+				content: "gap-[16px]",
+				icon: "size-[40px]"
+			}
+		},
+		shape: {
+			round: {},
+			square: {}
+		},
+		toggle: {
+			true: {},
+			false: {}
+		},
+		/** Position in a connected button group, set by `ButtonGroup`. */
+		connected: {
+			none: {},
+			leading: {},
+			middle: {},
+			trailing: {}
+		}
+	},
+	compoundVariants: [
+		...shapeVariants,
+		{
+			toggle: false,
+			class: { root: nonBouncingMorph }
+		},
+		...connectedShapeVariants,
+		{
+			variant: "outlined",
+			size: "lg",
+			class: { root: "[--m3-button-border:2px]" }
+		},
+		{
+			variant: "outlined",
+			size: "xl",
+			class: { root: "[--m3-button-border:3px]" }
+		},
+		{
+			toggle: true,
+			class: { root: ["bg-[var(--_md-comp-button-unselected-container-color)] text-[color:var(--_md-comp-button-unselected-label-text-color)] data-selected:not-data-disabled:bg-[var(--_md-comp-button-selected-container-color)] data-selected:not-data-disabled:text-[color:var(--_md-comp-button-selected-label-text-color)]", forcedColorClasses.selected] }
+		},
+		{
+			variant: "outlined",
+			toggle: true,
+			class: { root: "data-disabled:not-data-selected:bg-outline-variant/10 data-disabled:data-selected:bg-on-surface/10 data-selected:border-transparent" }
+		}
+	],
+	defaultVariants: {
+		variant: "filled",
+		size: "sm",
+		shape: "round",
+		toggle: false,
+		connected: "none"
+	}
+});
+//#endregion
+export { buttonStyles, buttonVariantClasses, forcedColorClasses, nonBouncingMorph };
+
+//# sourceMappingURL=button-styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button-styles.js","names":[],"sources":["../../../src/components/button/button-styles.ts"],"sourcesContent":["import { tv, type VariantProps } from '../../utils/tv';\nimport { connectedShapeVariants } from './connected-shapes';\n\n/*\n * Values follow the M3 Expressive button specs and Compose's Button*Tokens files\n * (2026-10-13): text buttons use `primary`; XS buttons have 16px padding and an 8px icon\n * gap (`ButtonXSmallTokens`); small text buttons have the same 16px padding as the other\n * small buttons (\"24dp: Not recommended. Use 16dp\"); and every button, toggles included,\n * presses to 8 / 8 / 12 / 16 / 16px (\"Both round and square buttons should have the same\n * pressed shape\").\n *\n * The resting round and square corners come from the component tokens (`button-tokens.ts`,\n * `--md-comp-button-<size>-container-shape-*`). \"Full\" corners are capped at half the\n * container height instead of 9999px so the corner transition interpolates smoothly: the\n * set's derived `container-shape-round-capped`. Every class is written out in full:\n * Tailwind finds classes by scanning for literal strings.\n */\nconst round = 'rounded-[var(--_md-comp-button-container-shape-round-capped)]';\nconst square = 'rounded-[var(--_md-comp-button-container-shape-square)]';\n\nconst pressed = {\n  xs: 'data-pressed:rounded-corner-small',\n  sm: 'data-pressed:rounded-corner-small',\n  md: 'data-pressed:rounded-corner-medium',\n  lg: 'data-pressed:rounded-corner-large',\n  xl: 'data-pressed:rounded-corner-large',\n} as const;\n\ntype Size = keyof typeof pressed;\nconst SIZES = Object.keys(pressed) as Size[];\n\n/** Toggle, selected: round buttons become square… */\nconst selectedSquare =\n  'data-selected:not-data-pressed:not-data-disabled:rounded-[var(--_md-comp-button-container-shape-square)]';\n\n/** …and square buttons become round. */\nconst selectedRound =\n  'data-selected:not-data-pressed:not-data-disabled:rounded-[var(--_md-comp-button-container-shape-round-capped)]';\n\nconst shapeVariants = [\n  { connected: 'none' as const, shape: 'round' as const, class: { root: round } },\n  { connected: 'none' as const, shape: 'square' as const, class: { root: square } },\n  ...SIZES.map((size) => ({ size, connected: 'none' as const, class: { root: pressed[size] } })),\n  // Selected toggle buttons swap shape: round becomes square and square becomes round.\n  {\n    connected: 'none' as const,\n    toggle: true,\n    shape: 'round' as const,\n    class: { root: selectedSquare },\n  },\n  {\n    connected: 'none' as const,\n    toggle: true,\n    shape: 'square' as const,\n    class: { root: selectedRound },\n  },\n];\n\n/**\n * Colours and elevation of each button variant, shared with the split button's halves.\n * The resting, selected and unselected colours, the elevated button's resting elevation and\n * the outline colour come from the component tokens (`button-tokens.ts`), so the element\n * needs `data-tokens=\"md-comp-button\"` and `data-variant`, as Button and the split button's\n * halves render them. A consumer class (`bg-tertiary`) still wins in `cn()`. Disabled is `on-surface` 10% / `on-surface-variant` 38% for every variant.\n *\n * Hover raises a button only while it isn't pressed, so a press shows the pressed level\n * (elevated 1, filled and tonal 0) even under the pointer (2026-10-13).\n *\n * The outlined style's outline is drawn inside the container's edge spacing: its width is\n * `--m3-button-border` (1px; 2px at L, 3px at XL), and the padding subtracts it, so an\n * outlined button is the same size as the other styles with the same content (2026-10-13).\n * A selected outlined toggle has no outline, disabled or not, as on IconButton (2026-10-13).\n *\n * XS and S take a minimum height (32 / 40px) rather than a fixed one, so they grow around\n * text at a large browser font size, as Compose's `defaultMinSize` does; `h-fit` keeps a\n * stretching flex or grid parent from making them taller (2026-10-13).\n */\n/**\n * The press morph on the default effects spring, which never bounces (`container-motion`\n * reads these). Shared with the split button's halves (2026-10-15).\n */\nexport const nonBouncingMorph =\n  '[--m3-shape-spring-duration:var(--md-sys-motion-spring-effects-default-duration)] [--m3-shape-spring-easing:var(--md-sys-motion-spring-effects-default-easing)]';\n\n/**\n * Forced colours (Windows high contrast), as Material Web's buttons: the browser paints\n * every container as `Canvas`, so a filled, elevated, tonal or text button draws a 1px\n * `CanvasText` boundary. It takes the outlined style's `--m3-button-border`, which the\n * padding already subtracts, so the button keeps its size (2026-10-15).\n */\nconst forcedBoundary =\n  'forced-colors:[--m3-button-border:1px] forced-colors:border-(length:--m3-button-border) forced-colors:border-solid forced-colors:border-[CanvasText]';\n\n/**\n * Forced colours for every button, its split button halves and icon buttons: disabled\n * ones are `GrayText`, and a selected toggle is filled with `Highlight` (and opts out of\n * the forced palette to keep it), so it can be told from an unselected one (2026-10-15).\n * They're `!important` to win over the selected and disabled colours, whose selectors are\n * as specific; they apply only in forced colours.\n */\nexport const forcedColorClasses = {\n  disabled:\n    'forced-colors:data-disabled:border-[GrayText]! forced-colors:data-disabled:text-[GrayText]!',\n  selected:\n    'forced-colors:data-selected:not-data-disabled:border-[Highlight]! forced-colors:data-selected:not-data-disabled:bg-[Highlight]! forced-colors:data-selected:not-data-disabled:text-[HighlightText]! forced-colors:data-selected:not-data-disabled:forced-color-adjust-none',\n} as const;\n\nexport const buttonVariantClasses = {\n  filled:\n    'bg-[var(--_md-comp-button-container-color)] text-[color:var(--_md-comp-button-label-text-color)] shadow-[shadow:var(--_md-comp-button-container-elevation)] data-hovered:not-data-pressed:shadow-elevation-1 data-disabled:bg-on-surface/10 ' +\n    forcedBoundary,\n  elevated:\n    'bg-[var(--_md-comp-button-container-color)] text-[color:var(--_md-comp-button-label-text-color)] shadow-[shadow:var(--_md-comp-button-container-elevation)] data-hovered:not-data-pressed:shadow-elevation-2 data-disabled:bg-on-surface/10 ' +\n    forcedBoundary,\n  tonal:\n    'bg-[var(--_md-comp-button-container-color)] text-[color:var(--_md-comp-button-label-text-color)] shadow-[shadow:var(--_md-comp-button-container-elevation)] data-hovered:not-data-pressed:shadow-elevation-1 data-disabled:bg-on-surface/10 ' +\n    forcedBoundary,\n  outlined:\n    '[--m3-button-border:1px] border-(length:--m3-button-border) border-solid border-[color:var(--_md-comp-button-outline-color)] bg-[var(--_md-comp-button-container-color)] text-[color:var(--_md-comp-button-label-text-color)] shadow-[shadow:var(--_md-comp-button-container-elevation)] data-disabled:not-data-selected:border-outline-variant/10',\n  text:\n    'bg-[var(--_md-comp-button-container-color)] text-[color:var(--_md-comp-button-label-text-color)] shadow-[shadow:var(--_md-comp-button-container-elevation)] ' +\n    forcedBoundary,\n} as const;\n\n/** Variant definitions for {@link Button}; extend them to add variants. */\nexport const buttonStyles = tv({\n  slots: {\n    root: [\n      'inline-flex shrink-0 cursor-pointer items-center justify-center align-middle',\n      'font-plain whitespace-nowrap select-none',\n      'state-layer focus-ring container-motion',\n      'data-disabled:cursor-default data-disabled:text-on-surface-variant/38 data-disabled:shadow-elevation-0',\n      forcedColorClasses.disabled,\n    ],\n    // Library-owned inner wrapper: holds the touch target, never receives consumer layout. It\n    // never shrinks: in a button narrower than its content (a button group's compressed\n    // neighbour) the content stays centred, giving up the padding equally on both sides\n    // (2026-10-15).\n    content: 'relative inline-flex shrink-0 items-center justify-center',\n    label: 'min-w-0',\n    icon: 'inline-flex shrink-0 items-center justify-center [&>svg]:size-full',\n  },\n  variants: {\n    variant: {\n      filled: { root: buttonVariantClasses.filled },\n      elevated: { root: buttonVariantClasses.elevated },\n      tonal: { root: buttonVariantClasses.tonal },\n      outlined: { root: buttonVariantClasses.outlined },\n      text: { root: buttonVariantClasses.text },\n    },\n    size: {\n      xs: {\n        root: 'h-fit min-h-[32px] min-w-[58px] px-[calc(16px-var(--m3-button-border,0px))] text-label-large',\n        content: 'gap-[8px]',\n        icon: 'size-[20px]',\n      },\n      sm: {\n        root: 'h-fit min-h-[40px] min-w-[58px] px-[calc(16px-var(--m3-button-border,0px))] text-label-large',\n        content: 'gap-[8px]',\n        icon: 'size-[20px]',\n      },\n      md: {\n        root: 'h-[56px] px-[calc(24px-var(--m3-button-border,0px))] text-title-medium',\n        content: 'gap-[8px]',\n        icon: 'size-[24px]',\n      },\n      lg: {\n        root: 'h-[96px] px-[calc(48px-var(--m3-button-border,0px))] font-brand text-headline-small',\n        content: 'gap-[12px]',\n        icon: 'size-[32px]',\n      },\n      xl: {\n        root: 'h-[136px] px-[calc(64px-var(--m3-button-border,0px))] font-brand text-headline-large',\n        content: 'gap-[16px]',\n        icon: 'size-[40px]',\n      },\n    },\n    shape: {\n      round: {},\n      square: {},\n    },\n    toggle: {\n      true: {},\n      false: {},\n    },\n    /** Position in a connected button group, set by `ButtonGroup`. */\n    connected: { none: {}, leading: {}, middle: {}, trailing: {} },\n  },\n  compoundVariants: [\n    ...shapeVariants,\n    // A plain button's press morph runs on the default effects spring, which never bounces\n    // (Compose's Button: \"DefaultEffects is intentional here\"); a toggle's selection morph\n    // keeps the fast spatial spring, as Compose's ToggleButton (2026-10-15).\n    { toggle: false, class: { root: nonBouncingMorph } },\n    ...connectedShapeVariants,\n    // Outline width grows with size.\n    { variant: 'outlined', size: 'lg', class: { root: '[--m3-button-border:2px]' } },\n    { variant: 'outlined', size: 'xl', class: { root: '[--m3-button-border:3px]' } },\n    // Toggle colours: unselected → selected, from the component tokens.\n    {\n      toggle: true,\n      class: {\n        root: [\n          'bg-[var(--_md-comp-button-unselected-container-color)] text-[color:var(--_md-comp-button-unselected-label-text-color)] data-selected:not-data-disabled:bg-[var(--_md-comp-button-selected-container-color)] data-selected:not-data-disabled:text-[color:var(--_md-comp-button-selected-label-text-color)]',\n          forcedColorClasses.selected,\n        ],\n      },\n    },\n    {\n      variant: 'outlined',\n      toggle: true,\n      // Disabled: unselected outline-variant at 10%; selected on-surface at 10%, as\n      // `OutlinedButtonTokens.SelectedDisabledContainerColor` and the outlined icon button\n      // (2026-10-15).\n      class: {\n        root: 'data-disabled:not-data-selected:bg-outline-variant/10 data-disabled:data-selected:bg-on-surface/10 data-selected:border-transparent',\n      },\n    },\n  ],\n  defaultVariants: {\n    variant: 'filled',\n    size: 'sm',\n    shape: 'round',\n    toggle: false,\n    connected: 'none',\n  },\n});\n\n/**\n * The variants of {@link buttonStyles}, 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 ButtonStyleProps = VariantProps<typeof buttonStyles>;\nexport type ButtonVariant = NonNullable<ButtonStyleProps['variant']>;\nexport type ButtonSize = NonNullable<ButtonStyleProps['size']>;\nexport type ButtonShape = NonNullable<ButtonStyleProps['shape']>;\n"],"mappings":";;;AAiBA,MAAM,QAAQ;AACd,MAAM,SAAS;AAEf,MAAM,UAAU;CACd,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAGA,MAAM,QAAQ,OAAO,KAAK,OAAO;;AAGjC,MAAM,iBACJ;;AAGF,MAAM,gBACJ;AAEF,MAAM,gBAAgB;CACpB;EAAE,WAAW;EAAiB,OAAO;EAAkB,OAAO,EAAE,MAAM,MAAM;CAAE;CAC9E;EAAE,WAAW;EAAiB,OAAO;EAAmB,OAAO,EAAE,MAAM,OAAO;CAAE;CAChF,GAAG,MAAM,KAAK,UAAU;EAAE;EAAM,WAAW;EAAiB,OAAO,EAAE,MAAM,QAAQ,MAAM;CAAE,EAAE;CAE7F;EACE,WAAW;EACX,QAAQ;EACR,OAAO;EACP,OAAO,EAAE,MAAM,eAAe;CAChC;CACA;EACE,WAAW;EACX,QAAQ;EACR,OAAO;EACP,OAAO,EAAE,MAAM,cAAc;CAC/B;AACF;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,MAAa,mBACX;;;;;;;AAQF,MAAM,iBACJ;;;;;;;;AASF,MAAa,qBAAqB;CAChC,UACE;CACF,UACE;AACJ;AAEA,MAAa,uBAAuB;CAClC,QACE,iPACA;CACF,UACE,iPACA;CACF,OACE,iPACA;CACF,UACE;CACF,MACE,iKACA;AACJ;;AAGA,MAAa,eAAe,GAAG;CAC7B,OAAO;EACL,MAAM;GACJ;GACA;GACA;GACA;GACA,mBAAmB;EACrB;EAKA,SAAS;EACT,OAAO;EACP,MAAM;CACR;CACA,UAAU;EACR,SAAS;GACP,QAAQ,EAAE,MAAM,qBAAqB,OAAO;GAC5C,UAAU,EAAE,MAAM,qBAAqB,SAAS;GAChD,OAAO,EAAE,MAAM,qBAAqB,MAAM;GAC1C,UAAU,EAAE,MAAM,qBAAqB,SAAS;GAChD,MAAM,EAAE,MAAM,qBAAqB,KAAK;EAC1C;EACA,MAAM;GACJ,IAAI;IACF,MAAM;IACN,SAAS;IACT,MAAM;GACR;GACA,IAAI;IACF,MAAM;IACN,SAAS;IACT,MAAM;GACR;GACA,IAAI;IACF,MAAM;IACN,SAAS;IACT,MAAM;GACR;GACA,IAAI;IACF,MAAM;IACN,SAAS;IACT,MAAM;GACR;GACA,IAAI;IACF,MAAM;IACN,SAAS;IACT,MAAM;GACR;EACF;EACA,OAAO;GACL,OAAO,CAAC;GACR,QAAQ,CAAC;EACX;EACA,QAAQ;GACN,MAAM,CAAC;GACP,OAAO,CAAC;EACV;;EAEA,WAAW;GAAE,MAAM,CAAC;GAAG,SAAS,CAAC;GAAG,QAAQ,CAAC;GAAG,UAAU,CAAC;EAAE;CAC/D;CACA,kBAAkB;EAChB,GAAG;EAIH;GAAE,QAAQ;GAAO,OAAO,EAAE,MAAM,iBAAiB;EAAE;EACnD,GAAG;EAEH;GAAE,SAAS;GAAY,MAAM;GAAM,OAAO,EAAE,MAAM,2BAA2B;EAAE;EAC/E;GAAE,SAAS;GAAY,MAAM;GAAM,OAAO,EAAE,MAAM,2BAA2B;EAAE;EAE/E;GACE,QAAQ;GACR,OAAO,EACL,MAAM,CACJ,6SACA,mBAAmB,QACrB,EACF;EACF;EACA;GACE,SAAS;GACT,QAAQ;GAIR,OAAO,EACL,MAAM,sIACR;EACF;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;EACN,OAAO;EACP,QAAQ;EACR,WAAW;CACb;AACF,CAAC"}

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

@@ -0,0 +1,10 @@
+import { ComponentTokenSet } from "../../tokens/component.js";
+import "../../index.js";
+//#region src/components/button/button-tokens.d.ts
+/**
+ * The tokens of {@link Button}: `--md-comp-button-<variant>-<part>` per variant and
+ * `--md-comp-button-<size>-container-shape-<round|square>` per size.
+ */
+export declare const buttonTokenSet: ComponentTokenSet<never>;
+//#endregion
+//# sourceMappingURL=button-tokens.d.ts.map