@windmorph/react 0.0.0-stage → 0.1.1

package/dist/components/icon-button/IconButton.js

@@ -0,0 +1,112 @@
+"use client";
+import { densityAttribute } from "../../tokens/density.js";
+import { cn } from "../../utils/cn.js";
+import { ButtonBase } from "../../primitives/ButtonBase.js";
+import { TouchTarget } from "../../primitives/TouchTarget.js";
+import { ButtonContext } from "../button/ButtonContext.js";
+import { mergeDataTokens } from "../../utils/merge-data-tokens.js";
+import { pendingClasses, useButtonPending } from "../button/button-pending.js";
+import { iconFacesStyles } from "../../primitives/icon-faces-styles.js";
+import { IconFaces } from "../../primitives/IconFaces.js";
+import { useWarnOnce } from "../../utils/warn-once.js";
+import { ToolbarContext } from "../../primitives/ToolbarContext.js";
+import { TooltipTrigger, WithoutDescription, useInTooltipTrigger } from "../tooltip/tooltip-trigger.js";
+import { LazyTooltip } from "../tooltip/lazy-tooltip.js";
+import { iconButtonStyles } from "./icon-button-styles.js";
+import { useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/icon-button/IconButton.tsx
+/**
+* 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} />
+*/
+function IconButton(props) {
+	const { variant: variantProp, size: sizeProp, width = "default", shape: shapeProp, density: densityProp, disabled: disabledProp, icon, tooltip = true, pendingIndicator, labels, classNames, className, selectedIcon, iconTransition = "swap", ...base } = props;
+	const rotates = iconTransition === "rotate" && selectedIcon !== void 0;
+	const context = useContext(ButtonContext);
+	const toolbar = useContext(ToolbarContext);
+	const inTooltipTrigger = useInTooltipTrigger();
+	const size = sizeProp ?? context.size ?? "sm";
+	const shape = shapeProp ?? context.shape ?? "round";
+	const squareInFloatingToolbar = toolbar?.kind === "floating" && shape === "square";
+	useWarnOnce(squareInFloatingToolbar, "[@windmorph/react] Avoid square icon buttons in a floating toolbar (M3): their shape conflicts with its fully rounded container.");
+	useWarnOnce(toolbar?.orientation === "vertical" && width === "wide", "[@windmorph/react] Avoid wide icon buttons in a vertical toolbar (M3): use the default or narrow width.");
+	const variant = variantProp ?? context.iconButtonVariant ?? "filled";
+	const density = densityProp ?? context.density;
+	const styles = iconButtonStyles({
+		variant,
+		size,
+		width,
+		shape,
+		toggle: base.toggle === true,
+		connected: context.connected ?? "none",
+		toolbar: toolbar?.color ?? "none"
+	});
+	const tokenAttributes = {
+		"data-tokens": mergeDataTokens("md-comp-icon-button", base),
+		"data-variant": variant,
+		"data-size": size,
+		"data-width": width
+	};
+	const pending = useButtonPending({
+		pending: base.pending,
+		pendingIndicator,
+		labels,
+		size,
+		ariaLabel: base["aria-label"],
+		ariaLabelledby: base["aria-labelledby"],
+		ref: base.ref,
+		indicatorClassName: cn(pendingClasses.indicator, classNames?.pendingIndicator)
+	});
+	const baseProps = {
+		...base,
+		...tokenAttributes,
+		...pending.rootProps,
+		...densityAttribute(density),
+		disabled: disabledProp ?? context.disabled ?? false,
+		className: styles.root({ class: cn(classNames?.root, className) })
+	};
+	const button = /* @__PURE__ */ jsx(ButtonBase, {
+		...baseProps,
+		children: ({ isSelected }) => /* @__PURE__ */ jsxs("span", {
+			...pending.contentProps,
+			className: styles.content({ class: cn(pending.takesPending && pendingClasses.content, classNames?.content) }),
+			children: [
+				(size === "xs" || size === "sm") && /* @__PURE__ */ jsx(TouchTarget, {}),
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: styles.icon({ class: cn(rotates && iconFacesStyles().cell(), pending.takesPending && pendingClasses.replaced, classNames?.icon) }),
+					children: rotates ? /* @__PURE__ */ jsx(IconFaces, {
+						icon,
+						alternateIcon: selectedIcon,
+						alternate: isSelected,
+						transition: "rotate"
+					}) : isSelected && selectedIcon ? selectedIcon : icon
+				}),
+				pending.indicator,
+				pending.hiddenName
+			]
+		})
+	});
+	const label = base["aria-label"];
+	if (!tooltip || inTooltipTrigger || !label || base["aria-labelledby"]) return button;
+	return /* @__PURE__ */ jsxs(TooltipTrigger, { children: [/* @__PURE__ */ jsx(WithoutDescription, { children: button }), /* @__PURE__ */ jsx(LazyTooltip, {
+		classNames: { panel: classNames?.tooltip },
+		children: label
+	})] });
+}
+//#endregion
+export { IconButton };
+
+//# sourceMappingURL=IconButton.js.map

package/dist/components/icon-button/IconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.js","names":[],"sources":["../../../src/components/icon-button/IconButton.tsx"],"sourcesContent":["'use client';\n\nimport { useContext, type ReactElement, type Ref } from 'react';\nimport {\n  ButtonBase,\n  type ButtonBaseActionProps,\n  type ButtonBaseLinkProps,\n  type ButtonBaseProps,\n  type ButtonBaseToggleProps,\n} from '../../primitives/ButtonBase';\nimport { IconFaces } from '../../primitives/IconFaces';\nimport { iconFacesStyles, type IconTransition } from '../../primitives/icon-faces-styles';\nimport { TouchTarget } from '../../primitives/TouchTarget';\nimport { densityAttribute, type Density } from '../../tokens/density';\nimport { cn } from '../../utils/cn';\nimport { useWarnOnce } from '../../utils/warn-once';\nimport type { ButtonShape, ButtonSize } from '../button/button-styles';\nimport { ButtonContext } from '../button/ButtonContext';\nimport { ToolbarContext } from '../../primitives/ToolbarContext';\nimport { LazyTooltip } from '../tooltip/lazy-tooltip';\nimport {\n  TooltipTrigger,\n  useInTooltipTrigger,\n  WithoutDescription,\n} from '../tooltip/tooltip-trigger';\nimport {\n  iconButtonStyles,\n  type IconButtonVariant,\n  type IconButtonWidth,\n} from './icon-button-styles';\nimport { mergeDataTokens } from '../../utils/merge-data-tokens';\nimport { pendingClasses, useButtonPending, type ButtonLabels } from '../button/button-pending';\n\nexport interface IconButtonClassNames {\n  /** The button element itself; merged with `className`. */\n  root?: string;\n  /** Inner wrapper around the icon. */\n  content?: string;\n  /** The icon. */\n  icon?: string;\n  /** The built-in plain tooltip that shows the label (`tooltip`). */\n  tooltip?: string;\n  /** The slot holding the loading indicator while `pending`, centred over the hidden icon. */\n  pendingIndicator?: string;\n}\n\n/** Icon buttons have no visible text, so an accessible name is required. */\ntype AccessibleName =\n  | {\n      /** The button's accessible name, also shown in its tooltip. Required without `aria-labelledby`. */\n      'aria-label': string;\n      /** The id of an element that names the button, instead of `aria-label`. */\n      'aria-labelledby'?: string;\n    }\n  | {\n      /** The button's accessible name, also shown in its tooltip. Required without `aria-labelledby`. */\n      'aria-label'?: string;\n      /** The id of an element that names the button, instead of `aria-label`. */\n      'aria-labelledby': string;\n    };\n\ninterface IconButtonOwnProps {\n  /**\n   * Colour style. Filled is the M3 default; toolbars and app bars default their icon\n   * buttons to `standard` through `ButtonContext`.\n   * @default \"filled\"\n   */\n  variant?: IconButtonVariant;\n  /** Container and icon size, from extra small to extra large. @default \"sm\" */\n  size?: ButtonSize;\n  /** Container width: narrow, default or wide, at the same height. @default \"default\" */\n  width?: IconButtonWidth;\n  /** Fully round corners, or square ones (still rounded, but less). @default \"round\" */\n  shape?: ButtonShape;\n  /**\n   * Web density, `0` to `-3`: each step takes 4px off the container's height and width (an\n   * S button: 40px at 0, 28px at -3), never below the icon plus 4px; the touch target stays\n   * 48 × 48px. Left out, the button takes the density of the nearest `ThemeProvider` or\n   * `ThemeScope`; icon buttons in a field's icon slots, and in app bars, toolbars, search bars,\n   * a navigation rail's header and dialog and sheet headers, keep their size. M3 asks for density\n   * to be the reader's choice rather than a default, so prefer setting it there.\n   * @default 0\n   */\n  density?: Density;\n  /** The icon, e.g. a Material Symbols SVG. Hidden from assistive tech; `aria-label` names the button. */\n  icon: ReactElement;\n  /**\n   * Shows the `aria-label` in a plain tooltip on hover and keyboard focus, as M3 asks of\n   * icon buttons on the web. The tooltip only repeats the name, so it isn't linked as a\n   * description (no double announcement). It steps aside when the button is already inside a\n   * `TooltipTrigger` or `RichTooltipTrigger`, and when it's named by `aria-labelledby`.\n   * @default true\n   */\n  tooltip?: boolean;\n  /** Classes for each part. `classNames.root` is merged with `className`. */\n  classNames?: IconButtonClassNames;\n  /** Words the button announces. */\n  labels?: Partial<ButtonLabels>;\n}\n\ninterface IconButtonPendingProps {\n  /**\n   * Shows a loading indicator in place of the icon while an action runs, and blocks presses.\n   * The button keeps its size, its colours and keyboard focus; its accessible name gains\n   * `labels.pending` (the tooltip keeps showing only the `aria-label`), and a focused button\n   * announces it. The indicator appears after 200ms, so a quick action doesn't flash. Use it\n   * for actions that take a moment, not for every button in a list.\n   * @default false\n   */\n  pending?: boolean;\n  /**\n   * Replaces the loading indicator shown while `pending`, e.g. a `CircularProgressIndicator`\n   * for a wait that may pass five seconds. It's centred over the icon and takes the content\n   * colour; a progress indicator also loses its track, as M3 asks inside a button.\n   */\n  pendingIndicator?: ReactElement;\n}\n\ntype OmitOwn<T> = Omit<\n  T,\n  | keyof IconButtonOwnProps\n  | keyof IconButtonPendingProps\n  | 'children'\n  | 'aria-label'\n  | 'aria-labelledby'\n>;\n\nexport type IconButtonActionProps = IconButtonOwnProps &\n  IconButtonPendingProps &\n  OmitOwn<ButtonBaseActionProps> &\n  AccessibleName;\nexport type IconButtonLinkProps = IconButtonOwnProps &\n  IconButtonPendingProps &\n  OmitOwn<ButtonBaseLinkProps> &\n  AccessibleName;\nexport type IconButtonToggleProps = IconButtonOwnProps &\n  OmitOwn<ButtonBaseToggleProps> &\n  AccessibleName & {\n    /** Toggle buttons have no pending state. */\n    pending?: never;\n    /** Toggle buttons have no pending state. */\n    pendingIndicator?: never;\n    /** Icon shown while selected, e.g. the filled form of `icon`. */\n    selectedIcon?: ReactElement;\n    /**\n     * How `icon` hands over to `selectedIcon`: `swap` changes it at once, `rotate` turns and\n     * crossfades the two (counter-clockwise as it selects, in LTR). `rotate` is an extension\n     * beyond the M3 spec, matching Google's Expressive showcase, like the FAB menu's.\n     * Reduced motion keeps only the crossfade. Needs `selectedIcon`.\n     * @default \"swap\"\n     */\n    iconTransition?: IconTransition;\n  };\n\nexport type IconButtonProps = IconButtonActionProps | IconButtonLinkProps | IconButtonToggleProps;\n\n/**\n * M3 Expressive icon button: filled (default), tonal, outlined and standard variants;\n * XS–XL sizes; narrow, default or wide widths; round or square shape; an optional toggle\n * form; a press morph; and its label as a tooltip on hover and keyboard focus.\n *\n * Shares `size`, `shape` and `disabled` with `ButtonContext`, so it fits in button groups,\n * and takes its default variant from it (`iconButtonVariant`).\n *\n * @example\n * <IconButton icon={<SearchIcon />} aria-label=\"Search\" onPress={openSearch} />\n * <IconButton variant=\"standard\" icon={<MoreIcon />} aria-label=\"More options\" />\n * <IconButton toggle variant=\"filled\" icon={<StarIcon />} selectedIcon={<StarFilledIcon />}\n *   aria-label=\"Favourite\" selected={isFavourite} onSelectedChange={setFavourite} />\n * <IconButton icon={<RefreshIcon />} aria-label=\"Refresh\" pending={refreshing} onPress={refresh} />\n */\nexport function IconButton(props: IconButtonProps) {\n  const {\n    variant: variantProp,\n    size: sizeProp,\n    width = 'default',\n    shape: shapeProp,\n    density: densityProp,\n    disabled: disabledProp,\n    icon,\n    tooltip = true,\n    pendingIndicator,\n    labels,\n    classNames,\n    className,\n    // Only toggle props carry `selectedIcon`; the others read it as undefined.\n    selectedIcon,\n    iconTransition = 'swap',\n    ...base\n  } = props as Omit<IconButtonToggleProps, 'pendingIndicator'> &\n    IconButtonProps & { pendingIndicator?: ReactElement };\n  const rotates = iconTransition === 'rotate' && selectedIcon !== undefined;\n\n  const context = useContext(ButtonContext);\n  const toolbar = useContext(ToolbarContext);\n  const inTooltipTrigger = useInTooltipTrigger();\n  const size = sizeProp ?? context.size ?? 'sm';\n  const shape = shapeProp ?? context.shape ?? 'round';\n  const squareInFloatingToolbar = toolbar?.kind === 'floating' && shape === 'square';\n  // Once per button, not on every render.\n  useWarnOnce(\n    squareInFloatingToolbar,\n    '[@windmorph/react] Avoid square icon buttons in a floating toolbar (M3): their shape conflicts with its fully rounded container.',\n  );\n  useWarnOnce(\n    toolbar?.orientation === 'vertical' && width === 'wide',\n    '[@windmorph/react] Avoid wide icon buttons in a vertical toolbar (M3): use the default or narrow width.',\n  );\n  const variant = variantProp ?? context.iconButtonVariant ?? 'filled';\n  const density = densityProp ?? context.density;\n  const styles = iconButtonStyles({\n    variant,\n    size,\n    width,\n    shape,\n    toggle: base.toggle === true,\n    connected: context.connected ?? 'none',\n    toolbar: toolbar?.color ?? 'none',\n  });\n\n  // Destructuring a union merges its members (see Button); `base` holds one member's props.\n  // The component tokens' hooks (icon-button-tokens.ts), also public styling hooks for apps.\n  const tokenAttributes = {\n    'data-tokens': mergeDataTokens('md-comp-icon-button', base),\n    'data-variant': variant,\n    'data-size': size,\n    // Read by a button group, which spaces narrow icon buttons wider apart.\n    'data-width': width,\n  };\n  const pending = useButtonPending<HTMLElement>({\n    pending: base.pending,\n    pendingIndicator,\n    labels,\n    size,\n    ariaLabel: base['aria-label'],\n    ariaLabelledby: base['aria-labelledby'],\n    ref: base.ref as Ref<HTMLElement> | undefined,\n    indicatorClassName: cn(pendingClasses.indicator, classNames?.pendingIndicator),\n  });\n  const baseProps = {\n    ...base,\n    ...tokenAttributes,\n    ...pending.rootProps,\n    ...densityAttribute(density),\n    disabled: disabledProp ?? context.disabled ?? false,\n    className: styles.root({ class: cn(classNames?.root, className) }),\n  } as ButtonBaseProps;\n\n  const button = (\n    <ButtonBase {...baseProps}>\n      {({ isSelected }) => (\n        <span\n          {...pending.contentProps}\n          className={styles.content({\n            class: cn(pending.takesPending && pendingClasses.content, classNames?.content),\n          })}\n        >\n          {(size === 'xs' || size === 'sm') && <TouchTarget />}\n          <span\n            aria-hidden=\"true\"\n            className={styles.icon({\n              class: cn(\n                rotates && iconFacesStyles().cell(),\n                pending.takesPending && pendingClasses.replaced,\n                classNames?.icon,\n              ),\n            })}\n          >\n            {rotates ? (\n              <IconFaces\n                icon={icon}\n                alternateIcon={selectedIcon}\n                alternate={isSelected}\n                transition=\"rotate\"\n              />\n            ) : isSelected && selectedIcon ? (\n              selectedIcon\n            ) : (\n              icon\n            )}\n          </span>\n          {pending.indicator}\n          {pending.hiddenName}\n        </span>\n      )}\n    </ButtonBase>\n  );\n\n  const label = base['aria-label'];\n  if (!tooltip || inTooltipTrigger || !label || base['aria-labelledby']) return button;\n  return (\n    <TooltipTrigger>\n      <WithoutDescription>{button}</WithoutDescription>\n      <LazyTooltip classNames={{ panel: classNames?.tooltip }}>{label}</LazyTooltip>\n    </TooltipTrigger>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2KA,SAAgB,WAAW,OAAwB;CACjD,MAAM,EACJ,SAAS,aACT,MAAM,UACN,QAAQ,WACR,OAAO,WACP,SAAS,aACT,UAAU,cACV,MACA,UAAU,MACV,kBACA,QACA,YACA,WAEA,cACA,iBAAiB,QACjB,GAAG,SACD;CAEJ,MAAM,UAAU,mBAAmB,YAAY,iBAAiB,KAAA;CAEhE,MAAM,UAAU,WAAW,aAAa;CACxC,MAAM,UAAU,WAAW,cAAc;CACzC,MAAM,mBAAmB,oBAAoB;CAC7C,MAAM,OAAO,YAAY,QAAQ,QAAQ;CACzC,MAAM,QAAQ,aAAa,QAAQ,SAAS;CAC5C,MAAM,0BAA0B,SAAS,SAAS,cAAc,UAAU;CAE1E,YACE,yBACA,kIACF;CACA,YACE,SAAS,gBAAgB,cAAc,UAAU,QACjD,yGACF;CACA,MAAM,UAAU,eAAe,QAAQ,qBAAqB;CAC5D,MAAM,UAAU,eAAe,QAAQ;CACvC,MAAM,SAAS,iBAAiB;EAC9B;EACA;EACA;EACA;EACA,QAAQ,KAAK,WAAW;EACxB,WAAW,QAAQ,aAAa;EAChC,SAAS,SAAS,SAAS;CAC7B,CAAC;CAID,MAAM,kBAAkB;EACtB,eAAe,gBAAgB,uBAAuB,IAAI;EAC1D,gBAAgB;EAChB,aAAa;EAEb,cAAc;CAChB;CACA,MAAM,UAAU,iBAA8B;EAC5C,SAAS,KAAK;EACd;EACA;EACA;EACA,WAAW,KAAK;EAChB,gBAAgB,KAAK;EACrB,KAAK,KAAK;EACV,oBAAoB,GAAG,eAAe,WAAW,YAAY,gBAAgB;CAC/E,CAAC;CACD,MAAM,YAAY;EAChB,GAAG;EACH,GAAG;EACH,GAAG,QAAQ;EACX,GAAG,iBAAiB,OAAO;EAC3B,UAAU,gBAAgB,QAAQ,YAAY;EAC9C,WAAW,OAAO,KAAK,EAAE,OAAO,GAAG,YAAY,MAAM,SAAS,EAAE,CAAC;CACnE;CAEA,MAAM,SACJ,oBAAC,YAAD;EAAY,GAAI;EACZ,WAAA,EAAE,iBACF,qBAAC,QAAD;GACE,GAAI,QAAQ;GACZ,WAAW,OAAO,QAAQ,EACxB,OAAO,GAAG,QAAQ,gBAAgB,eAAe,SAAS,YAAY,OAAO,EAC/E,CAAC;GAJH,UAAA;KAMI,SAAS,QAAQ,SAAS,SAAS,oBAAC,aAAD,CAAc,CAAA;IACnD,oBAAC,QAAD;KACE,eAAY;KACZ,WAAW,OAAO,KAAK,EACrB,OAAO,GACL,WAAW,gBAAgB,CAAC,CAAC,KAAK,GAClC,QAAQ,gBAAgB,eAAe,UACvC,YAAY,IACd,EACF,CAAC;KAEA,UAAA,UACC,oBAAC,WAAD;MACQ;MACN,eAAe;MACf,WAAW;MACX,YAAW;KACZ,CAAA,IACC,cAAc,eAChB,eAEA;IAEE,CAAA;IACL,QAAQ;IACR,QAAQ;GACL;;CAEE,CAAA;CAGd,MAAM,QAAQ,KAAK;CACnB,IAAI,CAAC,WAAW,oBAAoB,CAAC,SAAS,KAAK,oBAAoB,OAAO;CAC9E,OACE,qBAAC,gBAAD,EAAA,UAAA,CACE,oBAAC,oBAAD,EAAA,UAAqB,OAA2B,CAAA,GAChD,oBAAC,aAAD;EAAa,YAAY,EAAE,OAAO,YAAY,QAAQ;EAAI,UAAA;CAAmB,CAAA,CAC/D,EAAA,CAAA;AAEpB"}

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

@@ -0,0 +1,217 @@
+import { VariantProps } from "../../utils/tv.js";
+//#region src/components/icon-button/icon-button-styles.d.ts
+/** Variant definitions for {@link IconButton}; extend them to add variants. */
+export declare const iconButtonStyles: import("tailwind-variants").TVReturnType<{
+  variant: {
+    standard: {
+      root: string;
+    };
+    filled: {
+      root: string[];
+    };
+    tonal: {
+      root: string[];
+    };
+    outlined: {
+      root: string;
+    };
+  };
+  size: {
+    xs: {
+      root: string;
+      icon: string;
+    };
+    sm: {
+      root: string;
+      icon: string;
+    };
+    md: {
+      root: string;
+      content: string;
+      icon: string;
+    };
+    lg: {
+      root: string;
+      icon: string;
+    };
+    xl: {
+      root: string;
+      icon: string;
+    };
+  };
+  width: {
+    narrow: {};
+    default: {};
+    wide: {};
+  };
+  shape: {
+    round: {};
+    square: {};
+  };
+  toggle: {
+    true: {};
+    false: {};
+  };
+  /** Position in a connected button group, set by `ButtonGroup`. */
+  connected: {
+    none: {};
+    leading: {};
+    middle: {};
+    trailing: {};
+  };
+  /** The colour scheme of an enclosing toolbar, set from its context. */
+  toolbar: {
+    none: {};
+    standard: {};
+    vibrant: {};
+  };
+}, {
+  root: string[];
+  content: string;
+  icon: string;
+}, undefined, {
+  variant: {
+    standard: {
+      root: string;
+    };
+    filled: {
+      root: string[];
+    };
+    tonal: {
+      root: string[];
+    };
+    outlined: {
+      root: string;
+    };
+  };
+  size: {
+    xs: {
+      root: string;
+      icon: string;
+    };
+    sm: {
+      root: string;
+      icon: string;
+    };
+    md: {
+      root: string;
+      content: string;
+      icon: string;
+    };
+    lg: {
+      root: string;
+      icon: string;
+    };
+    xl: {
+      root: string;
+      icon: string;
+    };
+  };
+  width: {
+    narrow: {};
+    default: {};
+    wide: {};
+  };
+  shape: {
+    round: {};
+    square: {};
+  };
+  toggle: {
+    true: {};
+    false: {};
+  };
+  /** Position in a connected button group, set by `ButtonGroup`. */
+  connected: {
+    none: {};
+    leading: {};
+    middle: {};
+    trailing: {};
+  };
+  /** The colour scheme of an enclosing toolbar, set from its context. */
+  toolbar: {
+    none: {};
+    standard: {};
+    vibrant: {};
+  };
+}, {
+  root: string[];
+  content: string;
+  icon: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  variant: {
+    standard: {
+      root: string;
+    };
+    filled: {
+      root: string[];
+    };
+    tonal: {
+      root: string[];
+    };
+    outlined: {
+      root: string;
+    };
+  };
+  size: {
+    xs: {
+      root: string;
+      icon: string;
+    };
+    sm: {
+      root: string;
+      icon: string;
+    };
+    md: {
+      root: string;
+      content: string;
+      icon: string;
+    };
+    lg: {
+      root: string;
+      icon: string;
+    };
+    xl: {
+      root: string;
+      icon: string;
+    };
+  };
+  width: {
+    narrow: {};
+    default: {};
+    wide: {};
+  };
+  shape: {
+    round: {};
+    square: {};
+  };
+  toggle: {
+    true: {};
+    false: {};
+  };
+  /** Position in a connected button group, set by `ButtonGroup`. */
+  connected: {
+    none: {};
+    leading: {};
+    middle: {};
+    trailing: {};
+  };
+  /** The colour scheme of an enclosing toolbar, set from its context. */
+  toolbar: {
+    none: {};
+    standard: {};
+    vibrant: {};
+  };
+}, {
+  root: string[];
+  content: string;
+  icon: string;
+}>>;
+/**
+ * The variants of {@link iconButtonStyles}, 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 IconButtonStyleProps = VariantProps<typeof iconButtonStyles>;
+export type IconButtonVariant = NonNullable<IconButtonStyleProps['variant']>;
+export type IconButtonWidth = NonNullable<IconButtonStyleProps['width']>;
+//#endregion
+//# sourceMappingURL=icon-button-styles.d.ts.map

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

@@ -0,0 +1,244 @@
+import { tv } from "../../utils/tv.js";
+import { connectedShapeVariants } from "../button/connected-shapes.js";
+import { forcedColorClasses, nonBouncingMorph } from "../button/button-styles.js";
+//#region src/components/icon-button/icon-button-styles.ts
+const round = "rounded-[min(var(--_md-comp-icon-button-container-shape-round-capped),calc(var(--m3-icon-button-height)/2))]";
+const square = "rounded-[var(--_md-comp-icon-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"
+};
+/** Toggle, selected: round becomes square… */
+const selectedSquare = "data-selected:not-data-pressed:not-data-disabled:rounded-[var(--_md-comp-icon-button-container-shape-square)]";
+/** …and square becomes round (Compose `SelectedContainerShapeSquare` = full). */
+const selectedRound = "data-selected:not-data-pressed:not-data-disabled:rounded-[min(var(--_md-comp-icon-button-container-shape-round-capped),calc(var(--m3-icon-button-height)/2))]";
+/** Container widths in px: narrow / default / wide, 4px less per density step. */
+const widths = {
+	xs: {
+		narrow: "w-[max(24px,calc(28px+var(--md-sys-density,0)*4px))]",
+		default: "w-[max(24px,calc(32px+var(--md-sys-density,0)*4px))]",
+		wide: "w-[calc(40px+var(--md-sys-density,0)*4px)]"
+	},
+	sm: {
+		narrow: "w-[max(28px,calc(32px+var(--md-sys-density,0)*4px))]",
+		default: "w-[calc(40px+var(--md-sys-density,0)*4px)]",
+		wide: "w-[calc(52px+var(--md-sys-density,0)*4px)]"
+	},
+	md: {
+		narrow: "w-[calc(48px+var(--md-sys-density,0)*4px)]",
+		default: "w-[calc(56px+var(--md-sys-density,0)*4px)]",
+		wide: "w-[calc(72px+var(--md-sys-density,0)*4px)]"
+	},
+	lg: {
+		narrow: "w-[calc(64px+var(--md-sys-density,0)*4px)]",
+		default: "w-[calc(96px+var(--md-sys-density,0)*4px)]",
+		wide: "w-[calc(128px+var(--md-sys-density,0)*4px)]"
+	},
+	xl: {
+		narrow: "w-[calc(104px+var(--md-sys-density,0)*4px)]",
+		default: "w-[calc(136px+var(--md-sys-density,0)*4px)]",
+		wide: "w-[calc(184px+var(--md-sys-density,0)*4px)]"
+	}
+};
+/**
+* In a connected button group, the width is a minimum: the group's equal columns stretch the
+* button (2026-10-15). Extra small and small connected buttons are at least 48px wide (button
+* group specs).
+*/
+const connectedWidths = {
+	xs: {
+		narrow: "w-auto min-w-[48px]",
+		default: "w-auto min-w-[48px]",
+		wide: "w-auto min-w-[48px]"
+	},
+	sm: {
+		narrow: "w-auto min-w-[48px]",
+		default: "w-auto min-w-[48px]",
+		wide: "w-auto min-w-[52px]"
+	},
+	md: {
+		narrow: "w-auto min-w-[48px]",
+		default: "w-auto min-w-[56px]",
+		wide: "w-auto min-w-[72px]"
+	},
+	lg: {
+		narrow: "w-auto min-w-[64px]",
+		default: "w-auto min-w-[96px]",
+		wide: "w-auto min-w-[128px]"
+	},
+	xl: {
+		narrow: "w-auto min-w-[104px]",
+		default: "w-auto min-w-[136px]",
+		wide: "w-auto min-w-[184px]"
+	}
+};
+const SIZES = Object.keys(pressed);
+const WIDTHS = [
+	"narrow",
+	"default",
+	"wide"
+];
+const shapeVariants = [
+	{
+		connected: "none",
+		shape: "round",
+		class: { root: round }
+	},
+	{
+		connected: "none",
+		shape: "square",
+		class: { root: square }
+	},
+	{
+		connected: "none",
+		toggle: true,
+		shape: "round",
+		class: { root: selectedSquare }
+	},
+	{
+		connected: "none",
+		toggle: true,
+		shape: "square",
+		class: { root: selectedRound }
+	}
+];
+const sizeVariants = SIZES.flatMap((size) => [
+	{
+		size,
+		connected: "none",
+		class: { root: pressed[size] }
+	},
+	...WIDTHS.map((width) => ({
+		size,
+		width,
+		class: { root: widths[size][width] }
+	})),
+	...WIDTHS.map((width) => ({
+		size,
+		width,
+		connected: [
+			"leading",
+			"middle",
+			"trailing"
+		],
+		class: { root: connectedWidths[size][width] }
+	}))
+]);
+/** Variant definitions for {@link IconButton}; extend them to add variants. */
+const iconButtonStyles = tv({
+	slots: {
+		root: [
+			"inline-flex shrink-0 cursor-pointer items-center justify-center p-0 align-middle select-none",
+			"h-[var(--m3-icon-button-height)]",
+			"state-layer focus-ring container-motion",
+			nonBouncingMorph,
+			"data-disabled:cursor-default",
+			forcedColorClasses.disabled
+		],
+		content: "relative inline-flex items-center justify-center",
+		icon: "inline-flex shrink-0 items-center justify-center [&>svg]:size-full"
+	},
+	variants: {
+		variant: {
+			standard: { root: "bg-transparent text-[color:var(--_md-comp-icon-button-icon-color)] data-disabled:text-on-surface/38" },
+			filled: { root: ["bg-[var(--_md-comp-icon-button-container-color)] text-[color:var(--_md-comp-icon-button-icon-color)] data-disabled:bg-on-surface/10 data-disabled:text-on-surface/38", "forced-colors:border forced-colors:border-solid forced-colors:border-[CanvasText]"] },
+			tonal: { root: ["bg-[var(--_md-comp-icon-button-container-color)] text-[color:var(--_md-comp-icon-button-icon-color)] data-disabled:bg-on-surface/10 data-disabled:text-on-surface/38", "forced-colors:border forced-colors:border-solid forced-colors:border-[CanvasText]"] },
+			outlined: { root: "border border-solid border-[color:var(--_md-comp-icon-button-outline-color)] bg-transparent text-[color:var(--_md-comp-icon-button-icon-color)] data-disabled:not-data-selected:border-outline-variant/10 data-disabled:text-on-surface/38" }
+		},
+		size: {
+			xs: {
+				root: "[--m3-icon-button-height:max(24px,calc(32px+var(--md-sys-density,0)*4px))]",
+				icon: "size-[20px]"
+			},
+			sm: {
+				root: "[--m3-icon-button-height:calc(40px+var(--md-sys-density,0)*4px)]",
+				icon: "size-[24px]"
+			},
+			md: {
+				root: "[--m3-icon-button-height:calc(56px+var(--md-sys-density,0)*4px)]",
+				content: "after:absolute after:top-1/2 after:left-1/2 after:h-[48px] after:w-[max(100%,48px)] after:-translate-x-1/2 after:-translate-y-1/2 after:content-['']",
+				icon: "size-[24px]"
+			},
+			lg: {
+				root: "[--m3-icon-button-height:calc(96px+var(--md-sys-density,0)*4px)]",
+				icon: "size-[32px]"
+			},
+			xl: {
+				root: "[--m3-icon-button-height:calc(136px+var(--md-sys-density,0)*4px)]",
+				icon: "size-[40px]"
+			}
+		},
+		width: {
+			narrow: {},
+			default: {},
+			wide: {}
+		},
+		shape: {
+			round: {},
+			square: {}
+		},
+		toggle: {
+			true: {},
+			false: {}
+		},
+		/** Position in a connected button group, set by `ButtonGroup`. */
+		connected: {
+			none: {},
+			leading: {},
+			middle: {},
+			trailing: {}
+		},
+		/** The colour scheme of an enclosing toolbar, set from its context. */
+		toolbar: {
+			none: {},
+			standard: {},
+			vibrant: {}
+		}
+	},
+	compoundVariants: [
+		...shapeVariants,
+		...sizeVariants,
+		...connectedShapeVariants,
+		{
+			variant: "outlined",
+			size: "lg",
+			class: { root: "border-2" }
+		},
+		{
+			variant: "outlined",
+			size: "xl",
+			class: { root: "border-3" }
+		},
+		{
+			toggle: true,
+			class: { root: ["bg-[var(--_md-comp-icon-button-unselected-container-color)] text-[color:var(--_md-comp-icon-button-unselected-icon-color)] data-selected:not-data-disabled:bg-[var(--_md-comp-icon-button-selected-container-color)] data-selected:not-data-disabled:text-[color:var(--_md-comp-icon-button-selected-icon-color)]", forcedColorClasses.selected] }
+		},
+		{
+			variant: "outlined",
+			toggle: true,
+			class: { root: "data-disabled:data-selected:bg-on-surface/10 data-selected:border-transparent" }
+		},
+		{
+			variant: "tonal",
+			toggle: true,
+			toolbar: "vibrant",
+			class: { root: "data-selected:not-data-disabled:bg-surface-container data-selected:not-data-disabled:text-on-surface" }
+		}
+	],
+	defaultVariants: {
+		variant: "filled",
+		size: "sm",
+		width: "default",
+		shape: "round",
+		toggle: false,
+		connected: "none",
+		toolbar: "none"
+	}
+});
+//#endregion
+export { iconButtonStyles };
+
+//# sourceMappingURL=icon-button-styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button-styles.js","names":[],"sources":["../../../src/components/icon-button/icon-button-styles.ts"],"sourcesContent":["import { tv, type VariantProps } from '../../utils/tv';\nimport { forcedColorClasses, nonBouncingMorph } from '../button/button-styles';\nimport { connectedShapeVariants } from '../button/connected-shapes';\n\n/*\n * Values follow the M3 Expressive icon button specs and Compose's *IconButtonTokens files.\n * Width = icon size + leading + trailing space; Compose's \"Uniform\" width option is the\n * default width. Every class is written out in full so Tailwind can find it.\n *\n * Colours (2026-10-13, from the spec's colour table): standard icons are\n * `on-surface-variant` (`primary` when a toggle is selected), and outlined ones have an\n * `outline-variant` outline around an `on-surface-variant` icon. A container that needs\n * another content colour for its standard and outlined icon buttons (a vibrant toolbar, a\n * snackbar) sets `--md-comp-icon-button-icon-color` on an ancestor, e.g. to `currentColor`\n * to inherit its own text colour.\n *\n * The resting, selected and unselected colours, the outline colour and the resting corners\n * come from the component tokens (`icon-button-tokens.ts`): the root carries\n * `data-tokens=\"md-comp-icon-button\"`, `data-variant` and `data-size`, and the classes read\n * one private variable per part. A consumer class (`bg-tertiary`) still wins in `cn()`.\n *\n * A disabled outlined icon button's outline is `outline-variant` at 10%, the same as a\n * disabled outlined Button (the tokens keep `outline-variant` and give no opacity of their\n * own; Button's is the disabled container opacity). A selected outlined toggle has no\n * outline, disabled or not (2026-10-13).\n */\n/*\n * The resting round and square corners come from the component tokens\n * (`icon-button-tokens.ts`, `--md-comp-icon-button-<size>-container-shape-*`); full corners\n * are capped at half the height (the set's derived `container-shape-round-capped`), and at half\n * the dense height too.\n */\nconst round =\n  'rounded-[min(var(--_md-comp-icon-button-container-shape-round-capped),calc(var(--m3-icon-button-height)/2))]';\nconst square = 'rounded-[var(--_md-comp-icon-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\n/** Toggle, selected: round becomes square… */\nconst selectedSquare =\n  'data-selected:not-data-pressed:not-data-disabled:rounded-[var(--_md-comp-icon-button-container-shape-square)]';\n\n/** …and square becomes round (Compose `SelectedContainerShapeSquare` = full). */\nconst selectedRound =\n  'data-selected:not-data-pressed:not-data-disabled:rounded-[min(var(--_md-comp-icon-button-container-shape-round-capped),calc(var(--m3-icon-button-height)/2))]';\n\n/*\n * Web density (`--md-sys-density`, 0 to -3; M3: \"Avoid applying density by default … give\n * people a way to choose a higher density\"): each step takes 4px off the container's height\n * and width, as Material Components Web's icon button density did (48px, 4px a step, to 28px:\n * the 24px icon and 2px on each side). Here every size and width follows, never below its\n * icon plus 4px (24px at XS, 28px at S). The touch target stays 48 × 48px, extending past\n * the container (`TouchTarget` at XS and S, the content's `::after` at M). The round corners'\n * cap follows the height.\n */\n\n/** Container widths in px: narrow / default / wide, 4px less per density step. */\nconst widths = {\n  xs: {\n    narrow: 'w-[max(24px,calc(28px+var(--md-sys-density,0)*4px))]',\n    default: 'w-[max(24px,calc(32px+var(--md-sys-density,0)*4px))]',\n    wide: 'w-[calc(40px+var(--md-sys-density,0)*4px)]',\n  },\n  sm: {\n    narrow: 'w-[max(28px,calc(32px+var(--md-sys-density,0)*4px))]',\n    default: 'w-[calc(40px+var(--md-sys-density,0)*4px)]',\n    wide: 'w-[calc(52px+var(--md-sys-density,0)*4px)]',\n  },\n  md: {\n    narrow: 'w-[calc(48px+var(--md-sys-density,0)*4px)]',\n    default: 'w-[calc(56px+var(--md-sys-density,0)*4px)]',\n    wide: 'w-[calc(72px+var(--md-sys-density,0)*4px)]',\n  },\n  lg: {\n    narrow: 'w-[calc(64px+var(--md-sys-density,0)*4px)]',\n    default: 'w-[calc(96px+var(--md-sys-density,0)*4px)]',\n    wide: 'w-[calc(128px+var(--md-sys-density,0)*4px)]',\n  },\n  xl: {\n    narrow: 'w-[calc(104px+var(--md-sys-density,0)*4px)]',\n    default: 'w-[calc(136px+var(--md-sys-density,0)*4px)]',\n    wide: 'w-[calc(184px+var(--md-sys-density,0)*4px)]',\n  },\n} as const;\n\n/**\n * In a connected button group, the width is a minimum: the group's equal columns stretch the\n * button (2026-10-15). Extra small and small connected buttons are at least 48px wide (button\n * group specs).\n */\nconst connectedWidths = {\n  xs: {\n    narrow: 'w-auto min-w-[48px]',\n    default: 'w-auto min-w-[48px]',\n    wide: 'w-auto min-w-[48px]',\n  },\n  sm: {\n    narrow: 'w-auto min-w-[48px]',\n    default: 'w-auto min-w-[48px]',\n    wide: 'w-auto min-w-[52px]',\n  },\n  md: {\n    narrow: 'w-auto min-w-[48px]',\n    default: 'w-auto min-w-[56px]',\n    wide: 'w-auto min-w-[72px]',\n  },\n  lg: {\n    narrow: 'w-auto min-w-[64px]',\n    default: 'w-auto min-w-[96px]',\n    wide: 'w-auto min-w-[128px]',\n  },\n  xl: {\n    narrow: 'w-auto min-w-[104px]',\n    default: 'w-auto min-w-[136px]',\n    wide: 'w-auto min-w-[184px]',\n  },\n} as const;\n\ntype Size = keyof typeof pressed;\nconst SIZES = Object.keys(pressed) as Size[];\nconst WIDTHS = ['narrow', 'default', 'wide'] as const;\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  {\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\nconst sizeVariants = SIZES.flatMap((size) => [\n  { size, connected: 'none' as const, class: { root: pressed[size] } },\n  ...WIDTHS.map((width) => ({ size, width, class: { root: widths[size][width] } })),\n  ...WIDTHS.map((width) => ({\n    size,\n    width,\n    connected: ['leading' as const, 'middle' as const, 'trailing' as const],\n    class: { root: connectedWidths[size][width] },\n  })),\n]);\n\n/** Variant definitions for {@link IconButton}; extend them to add variants. */\nexport const iconButtonStyles = tv({\n  slots: {\n    root: [\n      'inline-flex shrink-0 cursor-pointer items-center justify-center p-0 align-middle select-none',\n      // The height, per size (`--m3-icon-button-height`).\n      'h-[var(--m3-icon-button-height)]',\n      'state-layer focus-ring container-motion',\n      // Every morph, toggles included, on the default effects spring, which never bounces:\n      // Compose's IconButton \"DefaultEffects is intentional here to prevent any bounce\".\n      nonBouncingMorph,\n      'data-disabled:cursor-default',\n      forcedColorClasses.disabled,\n    ],\n    // Library-owned inner wrapper: holds the icon and the touch target.\n    content: 'relative inline-flex items-center justify-center',\n    icon: 'inline-flex shrink-0 items-center justify-center [&>svg]:size-full',\n  },\n  variants: {\n    variant: {\n      standard: {\n        root: 'bg-transparent text-[color:var(--_md-comp-icon-button-icon-color)] data-disabled:text-on-surface/38',\n      },\n      filled: {\n        root: [\n          'bg-[var(--_md-comp-icon-button-container-color)] text-[color:var(--_md-comp-icon-button-icon-color)] data-disabled:bg-on-surface/10 data-disabled:text-on-surface/38',\n          // Forced colours paint the container as Canvas: a 1px CanvasText boundary keeps it\n          // visible, as Material Web's filled and tonal icon buttons (2026-10-15).\n          'forced-colors:border forced-colors:border-solid forced-colors:border-[CanvasText]',\n        ],\n      },\n      tonal: {\n        root: [\n          'bg-[var(--_md-comp-icon-button-container-color)] text-[color:var(--_md-comp-icon-button-icon-color)] data-disabled:bg-on-surface/10 data-disabled:text-on-surface/38',\n          // Forced colours paint the container as Canvas: a 1px CanvasText boundary keeps it\n          // visible, as Material Web's filled and tonal icon buttons (2026-10-15).\n          'forced-colors:border forced-colors:border-solid forced-colors:border-[CanvasText]',\n        ],\n      },\n      outlined: {\n        root: 'border border-solid border-[color:var(--_md-comp-icon-button-outline-color)] bg-transparent text-[color:var(--_md-comp-icon-button-icon-color)] data-disabled:not-data-selected:border-outline-variant/10 data-disabled:text-on-surface/38',\n      },\n    },\n    // Heights: 32 / 40 / 56 / 96 / 136px, 4px less per density step.\n    size: {\n      xs: {\n        root: '[--m3-icon-button-height:max(24px,calc(32px+var(--md-sys-density,0)*4px))]',\n        icon: 'size-[20px]',\n      },\n      sm: {\n        root: '[--m3-icon-button-height:calc(40px+var(--md-sys-density,0)*4px)]',\n        icon: 'size-[24px]',\n      },\n      md: {\n        root: '[--m3-icon-button-height:calc(56px+var(--md-sys-density,0)*4px)]',\n        // A dense M (narrow from -1, every width at -3) is under 48px: its content's `::after`\n        // is the touch target (`TouchTarget`'s box, without adding an element at density 0).\n        content:\n          \"after:absolute after:top-1/2 after:left-1/2 after:h-[48px] after:w-[max(100%,48px)] after:-translate-x-1/2 after:-translate-y-1/2 after:content-['']\",\n        icon: 'size-[24px]',\n      },\n      lg: {\n        root: '[--m3-icon-button-height:calc(96px+var(--md-sys-density,0)*4px)]',\n        icon: 'size-[32px]',\n      },\n      xl: {\n        root: '[--m3-icon-button-height:calc(136px+var(--md-sys-density,0)*4px)]',\n        icon: 'size-[40px]',\n      },\n    },\n    width: { narrow: {}, default: {}, wide: {} },\n    shape: { round: {}, square: {} },\n    toggle: { true: {}, false: {} },\n    /** Position in a connected button group, set by `ButtonGroup`. */\n    connected: { none: {}, leading: {}, middle: {}, trailing: {} },\n    /** The colour scheme of an enclosing toolbar, set from its context. */\n    toolbar: { none: {}, standard: {}, vibrant: {} },\n  },\n  compoundVariants: [\n    ...shapeVariants,\n    ...sizeVariants,\n    ...connectedShapeVariants,\n    { variant: 'outlined', size: 'lg', class: { root: 'border-2' } },\n    { variant: 'outlined', size: 'xl', class: { root: 'border-3' } },\n    // Toggle colours: unselected → selected, from the component tokens.\n    {\n      toggle: true,\n      class: {\n        root: [\n          'bg-[var(--_md-comp-icon-button-unselected-container-color)] text-[color:var(--_md-comp-icon-button-unselected-icon-color)] data-selected:not-data-disabled:bg-[var(--_md-comp-icon-button-selected-container-color)] data-selected:not-data-disabled:text-[color:var(--_md-comp-icon-button-selected-icon-color)]',\n          forcedColorClasses.selected,\n        ],\n      },\n    },\n    {\n      variant: 'outlined',\n      toggle: true,\n      class: {\n        root: 'data-disabled:data-selected:bg-on-surface/10 data-selected:border-transparent',\n      },\n    },\n    // In a vibrant toolbar (M3 toolbar colour spec, FloatingToolbarTokens.VibrantButton*),\n    // selected tonal toggles turn surface-container / on-surface. Standard icons take the\n    // toolbar's on-primary-container through --md-comp-icon-button-icon-color.\n    {\n      variant: 'tonal',\n      toggle: true,\n      toolbar: 'vibrant',\n      class: {\n        root: 'data-selected:not-data-disabled:bg-surface-container data-selected:not-data-disabled:text-on-surface',\n      },\n    },\n  ],\n  defaultVariants: {\n    variant: 'filled',\n    size: 'sm',\n    width: 'default',\n    shape: 'round',\n    toggle: false,\n    connected: 'none',\n    toolbar: 'none',\n  },\n});\n\n/**\n * The variants of {@link iconButtonStyles}, 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 IconButtonStyleProps = VariantProps<typeof iconButtonStyles>;\nexport type IconButtonVariant = NonNullable<IconButtonStyleProps['variant']>;\nexport type IconButtonWidth = NonNullable<IconButtonStyleProps['width']>;\n"],"mappings":"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"}

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

@@ -0,0 +1,11 @@
+import { ComponentTokenSet } from "../../tokens/component.js";
+import "../../index.js";
+//#region src/components/icon-button/icon-button-tokens.d.ts
+/**
+ * The tokens of {@link IconButton}: `--md-comp-icon-button-<variant>-<part>` per variant
+ * and `--md-comp-icon-button-<size>-container-shape-<round|square>` per size. The standard
+ * and outlined icon colours fall back to `--md-comp-icon-button-icon-color`.
+ */
+export declare const iconButtonTokenSet: ComponentTokenSet<never>;
+//#endregion
+//# sourceMappingURL=icon-button-tokens.d.ts.map