@windmorph/react 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,92 @@
+import { color, defineComponentTokens } from "../../tokens/component.js";
+//#region src/components/list/list-tokens.ts
+/** The tokens of {@link List}: `--md-comp-list-list-item-<part>`. */
+const listTokenSet = defineComponentTokens({
+	name: "md-comp-list",
+	tokens: {
+		"list-item-label-text-color": {
+			value: color("on-surface"),
+			description: "The headline.",
+			compose: "ListTokens.ItemLabelTextColor",
+			paints: {
+				property: "color",
+				slot: "headline"
+			}
+		},
+		"list-item-supporting-text-color": {
+			value: color("on-surface-variant"),
+			description: "The supporting text.",
+			compose: "ListTokens.ItemSupportingTextColor",
+			paints: {
+				property: "color",
+				slot: "supporting"
+			}
+		},
+		"list-item-overline-color": {
+			value: color("on-surface-variant"),
+			description: "The overline.",
+			compose: "ListTokens.ItemOverlineColor",
+			paints: {
+				property: "color",
+				slot: "overline"
+			}
+		},
+		"list-item-leading-icon-color": {
+			value: color("on-surface-variant"),
+			description: "The leading content: an icon, or text.",
+			compose: "ListTokens.ItemLeadingIconColor",
+			paints: {
+				property: "color",
+				slot: "leading"
+			}
+		},
+		"list-item-trailing-icon-color": {
+			value: color("on-surface-variant"),
+			description: "The trailing content: an icon, or supporting text.",
+			compose: "ListTokens.ItemTrailingIconColor",
+			paints: {
+				property: "color",
+				slot: "trailing"
+			}
+		},
+		"list-item-selected-container-color": {
+			value: color("secondary-container"),
+			description: "A selected item.",
+			compose: "ListTokens.ItemSelectedContainerColor",
+			paints: {
+				property: "background-color",
+				state: "selected"
+			}
+		}
+	},
+	scopes: { variant: {
+		standard: {
+			prefix: "md-comp-list-list-item",
+			tokens: { "container-color": {
+				value: "transparent",
+				description: "An item in a standard list: see-through, on its container's colour.",
+				compose: "ListTokens.ItemContainerColor",
+				paints: {
+					property: "background-color",
+					slot: "item"
+				}
+			} }
+		},
+		segmented: {
+			prefix: "md-comp-list-list-item-segmented",
+			tokens: { "container-color": {
+				value: color("surface"),
+				description: "An item in a segmented list.",
+				compose: "ListTokens.ItemSegmentedContainerColor",
+				paints: {
+					property: "background-color",
+					slot: "item"
+				}
+			} }
+		}
+	} }
+});
+//#endregion
+export { listTokenSet };
+
+//# sourceMappingURL=list-tokens.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list-tokens.js","names":[],"sources":["../../../src/components/list/list-tokens.ts"],"sourcesContent":["import { color, defineComponentTokens } from '../../tokens/component';\n\n/*\n * The list's component tokens, M3's `md.comp.list.list-item.*` names (checked against\n * m3.material.io's token tables, 2026-10-14), with the defaults of `list-styles.ts`.\n *\n * The list's root and each item carry `data-tokens=\"md-comp-list\"` and `data-variant`, so an\n * item's own state (`data-selected`) picks its colours. A standard item is see-through by\n * default (it takes its container's colour: a sheet, a card); a segmented item is `surface`.\n * Selected content, hover, focus, press, disabled and the item shapes stay classes.\n */\n\n/** The tokens of {@link List}: `--md-comp-list-list-item-<part>`. */\nexport const listTokenSet = defineComponentTokens({\n  name: 'md-comp-list',\n  tokens: {\n    'list-item-label-text-color': {\n      value: color('on-surface'),\n      description: 'The headline.',\n      compose: 'ListTokens.ItemLabelTextColor',\n      paints: { property: 'color', slot: 'headline' },\n    },\n    'list-item-supporting-text-color': {\n      value: color('on-surface-variant'),\n      description: 'The supporting text.',\n      compose: 'ListTokens.ItemSupportingTextColor',\n      paints: { property: 'color', slot: 'supporting' },\n    },\n    'list-item-overline-color': {\n      value: color('on-surface-variant'),\n      description: 'The overline.',\n      compose: 'ListTokens.ItemOverlineColor',\n      paints: { property: 'color', slot: 'overline' },\n    },\n    'list-item-leading-icon-color': {\n      value: color('on-surface-variant'),\n      description: 'The leading content: an icon, or text.',\n      compose: 'ListTokens.ItemLeadingIconColor',\n      paints: { property: 'color', slot: 'leading' },\n    },\n    'list-item-trailing-icon-color': {\n      value: color('on-surface-variant'),\n      description: 'The trailing content: an icon, or supporting text.',\n      compose: 'ListTokens.ItemTrailingIconColor',\n      paints: { property: 'color', slot: 'trailing' },\n    },\n    'list-item-selected-container-color': {\n      value: color('secondary-container'),\n      description: 'A selected item.',\n      compose: 'ListTokens.ItemSelectedContainerColor',\n      paints: { property: 'background-color', state: 'selected' },\n    },\n  },\n  scopes: {\n    variant: {\n      standard: {\n        prefix: 'md-comp-list-list-item',\n        tokens: {\n          'container-color': {\n            value: 'transparent',\n            description: \"An item in a standard list: see-through, on its container's colour.\",\n            compose: 'ListTokens.ItemContainerColor',\n            paints: { property: 'background-color', slot: 'item' },\n          },\n        },\n      },\n      segmented: {\n        prefix: 'md-comp-list-list-item-segmented',\n        tokens: {\n          'container-color': {\n            value: color('surface'),\n            description: 'An item in a segmented list.',\n            compose: 'ListTokens.ItemSegmentedContainerColor',\n            paints: { property: 'background-color', slot: 'item' },\n          },\n        },\n      },\n    },\n  },\n});\n"],"mappings":";;;AAaA,MAAa,eAAe,sBAAsB;CAChD,MAAM;CACN,QAAQ;EACN,8BAA8B;GAC5B,OAAO,MAAM,YAAY;GACzB,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAS,MAAM;GAAW;EAChD;EACA,mCAAmC;GACjC,OAAO,MAAM,oBAAoB;GACjC,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAS,MAAM;GAAa;EAClD;EACA,4BAA4B;GAC1B,OAAO,MAAM,oBAAoB;GACjC,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAS,MAAM;GAAW;EAChD;EACA,gCAAgC;GAC9B,OAAO,MAAM,oBAAoB;GACjC,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAS,MAAM;GAAU;EAC/C;EACA,iCAAiC;GAC/B,OAAO,MAAM,oBAAoB;GACjC,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAS,MAAM;GAAW;EAChD;EACA,sCAAsC;GACpC,OAAO,MAAM,qBAAqB;GAClC,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAoB,OAAO;GAAW;EAC5D;CACF;CACA,QAAQ,EACN,SAAS;EACP,UAAU;GACR,QAAQ;GACR,QAAQ,EACN,mBAAmB;IACjB,OAAO;IACP,aAAa;IACb,SAAS;IACT,QAAQ;KAAE,UAAU;KAAoB,MAAM;IAAO;GACvD,EACF;EACF;EACA,WAAW;GACT,QAAQ;GACR,QAAQ,EACN,mBAAmB;IACjB,OAAO,MAAM,SAAS;IACtB,aAAa;IACb,SAAS;IACT,QAAQ;KAAE,UAAU;KAAoB,MAAM;IAAO;GACvD,EACF;EACF;CACF,EACF;AACF,CAAC"}

package/dist/components/loading-indicator/LoadingIndicator.d.ts

@@ -0,0 +1,65 @@
+import { MorphShape } from "../../primitives/morph-path.js";
+import { LoadingIndicatorVariant } from "./loading-indicator-styles.js";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/loading-indicator/LoadingIndicator.d.ts
+export interface LoadingIndicatorClassNames {
+  /** The box the shape is drawn in (`contained`: the circle behind it). */
+  root?: string;
+  /** The `<svg>` drawing the shape; it fills with `currentColor`. */
+  indicator?: string;
+}
+type Naming = {
+  /** Names the indicator ("Loading messages"). Required unless `aria-labelledby` is set. */
+  'aria-label': string;
+  /** The id of the visible text that names the indicator. Required unless `aria-label` is set. */
+  'aria-labelledby'?: string;
+} | {
+  /** Names the indicator ("Loading messages"). Required unless `aria-labelledby` is set. */
+  'aria-label'?: string;
+  /** The id of the visible text that names the indicator. Required unless `aria-label` is set. */
+  'aria-labelledby': string;
+};
+interface LoadingIndicatorOwnProps {
+  /**
+   * Progress from 0 to 1, for a progress-driven gesture such as pull to refresh. Leave it out
+   * (the usual case) for an indeterminate indicator, which morphs through its shapes while
+   * rotating. Don't switch one indicator from indeterminate to determinate: the spec says a
+   * loading indicator never turns into a progress indicator; use a progress indicator instead.
+   */
+  value?: number;
+  /** `contained` draws the indicator on a `primary-container` circle. @default "default" */
+  variant?: LoadingIndicatorVariant;
+  /**
+   * At least two shapes (`MaterialShapes` names or `RoundedPolygon`s). Defaults to
+   * Compose's sequences: seven shapes when indeterminate, circle → soft burst when
+   * determinate.
+   */
+  shapes?: readonly [MorphShape, MorphShape, ...MorphShape[]];
+  /**
+   * The box's size in px. The spec: "Loading indicators default to 48dp, but the size is
+   * flexible. It should be between 24dp to 240dp"; the shape keeps its ratio to the box.
+   * Values outside that range are clamped. @default 48
+   */
+  size?: number;
+  /** Classes for each part, by slot. `classNames.root` is merged with `className`. */
+  classNames?: LoadingIndicatorClassNames;
+}
+export type LoadingIndicatorProps = LoadingIndicatorOwnProps & Naming & Omit<ComponentPropsWithRef<'div'>, 'children' | 'role' | 'aria-label' | 'aria-labelledby' | keyof LoadingIndicatorOwnProps>;
+/**
+ * M3 Expressive loading indicator: a shape that morphs through Material shapes while it
+ * rotates, for short indeterminate waits (under 5 seconds). `value` (0–1) makes it follow a
+ * gesture's progress, morphing from a circle to a soft burst; never switch one instance from
+ * indeterminate to determinate (use a progress indicator for work whose progress becomes
+ * known). Rendered as `role="progressbar"`, so it needs a name. Under
+ * `prefers-reduced-motion` the indeterminate indicator only rotates.
+ *
+ * The box is 48px; set `size` (24–240px, the spec's range) or a `size-*` class, and the shape
+ * scales with it.
+ *
+ * @example
+ * <LoadingIndicator aria-label="Loading messages" />
+ * <LoadingIndicator variant="contained" aria-label="Refreshing" />
+ */
+export declare function LoadingIndicator({ value, variant, shapes, size, classNames, className, style, ref, ...rest }: LoadingIndicatorProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=LoadingIndicator.d.ts.map

package/dist/components/loading-indicator/LoadingIndicator.js

@@ -0,0 +1,92 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { mergeDataTokens } from "../../utils/merge-data-tokens.js";
+import { INDETERMINATE_SHAPES, determinateFrame, framePath, frameTransform, getDeterminateShapes, indeterminateFrame, prepareShapes, reducedMotionFrame } from "./loading-indicator-frames.js";
+import { loadingIndicatorStyles } from "./loading-indicator-styles.js";
+import { useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useAnimationFrame, useReducedMotion } from "motion/react";
+import { mergeProps, useProgressBar } from "react-aria";
+//#region src/components/loading-indicator/LoadingIndicator.tsx
+/** The spec's range for a loading indicator's size, in px. */
+const MIN_SIZE = 24;
+const MAX_SIZE = 240;
+const polygonIds = /* @__PURE__ */ new WeakMap();
+let nextPolygonId = 0;
+const shapeKey = (shape) => {
+	if (typeof shape === "string") return shape;
+	let id = polygonIds.get(shape);
+	if (id === void 0) polygonIds.set(shape, id = nextPolygonId++);
+	return `#${id}`;
+};
+/**
+* M3 Expressive loading indicator: a shape that morphs through Material shapes while it
+* rotates, for short indeterminate waits (under 5 seconds). `value` (0–1) makes it follow a
+* gesture's progress, morphing from a circle to a soft burst; never switch one instance from
+* indeterminate to determinate (use a progress indicator for work whose progress becomes
+* known). Rendered as `role="progressbar"`, so it needs a name. Under
+* `prefers-reduced-motion` the indeterminate indicator only rotates.
+*
+* The box is 48px; set `size` (24–240px, the spec's range) or a `size-*` class, and the shape
+* scales with it.
+*
+* @example
+* <LoadingIndicator aria-label="Loading messages" />
+* <LoadingIndicator variant="contained" aria-label="Refreshing" />
+*/
+function LoadingIndicator({ value, variant, shapes, size, classNames, className, style, ref, ...rest }) {
+	const indeterminate = value === void 0;
+	const sequence = shapes ?? (indeterminate ? INDETERMINATE_SHAPES : getDeterminateShapes());
+	const key = sequence.map(shapeKey).join();
+	const prepared = useMemo(() => prepareShapes(sequence, indeterminate), [key, indeterminate]);
+	const reduceMotion = useReducedMotion() ?? false;
+	const { progressBarProps } = useProgressBar({
+		...rest,
+		value: indeterminate ? void 0 : Number.isNaN(value) ? 0 : value,
+		minValue: 0,
+		maxValue: 1,
+		isIndeterminate: indeterminate
+	});
+	const frameAt = (elapsedMs) => !indeterminate ? determinateFrame(value ?? 0, prepared.morphs.length) : reduceMotion ? reducedMotionFrame(elapsedMs) : indeterminateFrame(elapsedMs, prepared.morphs.length);
+	const groupRef = useRef(null);
+	const pathRef = useRef(null);
+	useAnimationFrame((elapsedMs) => {
+		if (!indeterminate) return;
+		const frame = frameAt(elapsedMs);
+		groupRef.current?.setAttribute("transform", frameTransform(frame));
+		pathRef.current?.setAttribute("d", framePath(prepared, frame));
+	});
+	const initial = frameAt(0);
+	const styles = loadingIndicatorStyles({ variant });
+	return /* @__PURE__ */ jsx("div", {
+		...mergeProps(rest, progressBarProps),
+		ref,
+		"data-tokens": mergeDataTokens("md-comp-loading-indicator", rest),
+		"data-variant": variant ?? "default",
+		"data-indeterminate": indeterminate || void 0,
+		style: size === void 0 ? style : {
+			"--m3-loading-indicator-size": `${Math.min(Math.max(size, MIN_SIZE), MAX_SIZE)}px`,
+			...style
+		},
+		className: styles.root({ class: cn(classNames?.root, className) }),
+		children: /* @__PURE__ */ jsx("svg", {
+			viewBox: `0 0 48 48`,
+			"aria-hidden": "true",
+			overflow: "visible",
+			"data-slot": "indicator",
+			className: styles.indicator({ class: classNames?.indicator }),
+			children: /* @__PURE__ */ jsx("g", {
+				ref: groupRef,
+				transform: frameTransform(initial),
+				children: /* @__PURE__ */ jsx("path", {
+					ref: pathRef,
+					d: framePath(prepared, initial)
+				})
+			})
+		})
+	});
+}
+//#endregion
+export { LoadingIndicator };
+
+//# sourceMappingURL=LoadingIndicator.js.map

package/dist/components/loading-indicator/LoadingIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingIndicator.js","names":[],"sources":["../../../src/components/loading-indicator/LoadingIndicator.tsx"],"sourcesContent":["'use client';\n\nimport { useAnimationFrame, useReducedMotion } from 'motion/react';\nimport { useMemo, useRef, type ComponentPropsWithRef, type CSSProperties } from 'react';\nimport { mergeProps, useProgressBar } from 'react-aria';\nimport type { MorphShape } from '../../primitives/morph-path';\nimport type { RoundedPolygon } from '../../shapes/rounded-polygon';\nimport { cn } from '../../utils/cn';\nimport {\n  CONTAINER_SIZE,\n  INDETERMINATE_SHAPES,\n  determinateFrame,\n  framePath,\n  frameTransform,\n  getDeterminateShapes,\n  indeterminateFrame,\n  prepareShapes,\n  reducedMotionFrame,\n  type Frame,\n} from './loading-indicator-frames';\nimport { loadingIndicatorStyles, type LoadingIndicatorVariant } from './loading-indicator-styles';\nimport { mergeDataTokens } from '../../utils/merge-data-tokens';\n\n/** The spec's range for a loading indicator's size, in px. */\nconst MIN_SIZE = 24;\nconst MAX_SIZE = 240;\n\nexport interface LoadingIndicatorClassNames {\n  /** The box the shape is drawn in (`contained`: the circle behind it). */\n  root?: string;\n  /** The `<svg>` drawing the shape; it fills with `currentColor`. */\n  indicator?: string;\n}\n\ntype Naming =\n  | {\n      /** Names the indicator (\"Loading messages\"). Required unless `aria-labelledby` is set. */\n      'aria-label': string;\n      /** The id of the visible text that names the indicator. Required unless `aria-label` is set. */\n      'aria-labelledby'?: string;\n    }\n  | {\n      /** Names the indicator (\"Loading messages\"). Required unless `aria-labelledby` is set. */\n      'aria-label'?: string;\n      /** The id of the visible text that names the indicator. Required unless `aria-label` is set. */\n      'aria-labelledby': string;\n    };\n\ninterface LoadingIndicatorOwnProps {\n  /**\n   * Progress from 0 to 1, for a progress-driven gesture such as pull to refresh. Leave it out\n   * (the usual case) for an indeterminate indicator, which morphs through its shapes while\n   * rotating. Don't switch one indicator from indeterminate to determinate: the spec says a\n   * loading indicator never turns into a progress indicator; use a progress indicator instead.\n   */\n  value?: number;\n  /** `contained` draws the indicator on a `primary-container` circle. @default \"default\" */\n  variant?: LoadingIndicatorVariant;\n  /**\n   * At least two shapes (`MaterialShapes` names or `RoundedPolygon`s). Defaults to\n   * Compose's sequences: seven shapes when indeterminate, circle → soft burst when\n   * determinate.\n   */\n  shapes?: readonly [MorphShape, MorphShape, ...MorphShape[]];\n  /**\n   * The box's size in px. The spec: \"Loading indicators default to 48dp, but the size is\n   * flexible. It should be between 24dp to 240dp\"; the shape keeps its ratio to the box.\n   * Values outside that range are clamped. @default 48\n   */\n  size?: number;\n  /** Classes for each part, by slot. `classNames.root` is merged with `className`. */\n  classNames?: LoadingIndicatorClassNames;\n}\n\nexport type LoadingIndicatorProps = LoadingIndicatorOwnProps &\n  Naming &\n  Omit<\n    ComponentPropsWithRef<'div'>,\n    'children' | 'role' | 'aria-label' | 'aria-labelledby' | keyof LoadingIndicatorOwnProps\n  >;\n\nconst polygonIds = new WeakMap<RoundedPolygon, number>();\nlet nextPolygonId = 0;\nconst shapeKey = (shape: MorphShape) => {\n  if (typeof shape === 'string') return shape;\n  let id = polygonIds.get(shape);\n  if (id === undefined) polygonIds.set(shape, (id = nextPolygonId++));\n  return `#${id}`;\n};\n\n/**\n * M3 Expressive loading indicator: a shape that morphs through Material shapes while it\n * rotates, for short indeterminate waits (under 5 seconds). `value` (0–1) makes it follow a\n * gesture's progress, morphing from a circle to a soft burst; never switch one instance from\n * indeterminate to determinate (use a progress indicator for work whose progress becomes\n * known). Rendered as `role=\"progressbar\"`, so it needs a name. Under\n * `prefers-reduced-motion` the indeterminate indicator only rotates.\n *\n * The box is 48px; set `size` (24–240px, the spec's range) or a `size-*` class, and the shape\n * scales with it.\n *\n * @example\n * <LoadingIndicator aria-label=\"Loading messages\" />\n * <LoadingIndicator variant=\"contained\" aria-label=\"Refreshing\" />\n */\nexport function LoadingIndicator({\n  value,\n  variant,\n  shapes,\n  size,\n  classNames,\n  className,\n  style,\n  ref,\n  ...rest\n}: LoadingIndicatorProps) {\n  const indeterminate = value === undefined;\n  const sequence = shapes ?? (indeterminate ? INDETERMINATE_SHAPES : getDeterminateShapes());\n  const key = sequence.map(shapeKey).join();\n  // The key captures the sequence's contents, so inline arrays don't re-prepare.\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const prepared = useMemo(() => prepareShapes(sequence, indeterminate), [key, indeterminate]);\n  const reduceMotion = useReducedMotion() ?? false;\n\n  const { progressBarProps } = useProgressBar({\n    ...rest,\n    value: indeterminate ? undefined : Number.isNaN(value) ? 0 : value,\n    minValue: 0,\n    maxValue: 1,\n    isIndeterminate: indeterminate,\n  });\n\n  const frameAt = (elapsedMs: number): Frame =>\n    !indeterminate\n      ? determinateFrame(value ?? 0, prepared.morphs.length)\n      : reduceMotion\n        ? reducedMotionFrame(elapsedMs)\n        : indeterminateFrame(elapsedMs, prepared.morphs.length);\n\n  const groupRef = useRef<SVGGElement>(null);\n  const pathRef = useRef<SVGPathElement>(null);\n  // Indeterminate frames are written straight to the DOM; React renders only the first.\n  useAnimationFrame((elapsedMs) => {\n    if (!indeterminate) return;\n    const frame = frameAt(elapsedMs);\n    groupRef.current?.setAttribute('transform', frameTransform(frame));\n    pathRef.current?.setAttribute('d', framePath(prepared, frame));\n  });\n\n  const initial = frameAt(0);\n  const styles = loadingIndicatorStyles({ variant });\n\n  return (\n    <div\n      {...mergeProps(rest, progressBarProps)}\n      ref={ref}\n      // The component tokens' hooks (loading-indicator-tokens.ts); `data-variant` is also public.\n      data-tokens={mergeDataTokens('md-comp-loading-indicator', rest)}\n      data-variant={variant ?? 'default'}\n      data-indeterminate={indeterminate || undefined}\n      style={\n        size === undefined\n          ? style\n          : ({\n              '--m3-loading-indicator-size': `${Math.min(Math.max(size, MIN_SIZE), MAX_SIZE)}px`,\n              ...style,\n            } as CSSProperties)\n      }\n      className={styles.root({ class: cn(classNames?.root, className) })}\n    >\n      <svg\n        viewBox={`0 0 ${CONTAINER_SIZE} ${CONTAINER_SIZE}`}\n        aria-hidden=\"true\"\n        overflow=\"visible\"\n        data-slot=\"indicator\"\n        className={styles.indicator({ class: classNames?.indicator })}\n      >\n        <g ref={groupRef} transform={frameTransform(initial)}>\n          <path ref={pathRef} d={framePath(prepared, initial)} />\n        </g>\n      </svg>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAwBA,MAAM,WAAW;AACjB,MAAM,WAAW;AAwDjB,MAAM,6BAAa,IAAI,QAAgC;AACvD,IAAI,gBAAgB;AACpB,MAAM,YAAY,UAAsB;CACtC,IAAI,OAAO,UAAU,UAAU,OAAO;CACtC,IAAI,KAAK,WAAW,IAAI,KAAK;CAC7B,IAAI,OAAO,KAAA,GAAW,WAAW,IAAI,OAAQ,KAAK,eAAgB;CAClE,OAAO,IAAI;AACb;;;;;;;;;;;;;;;;AAiBA,SAAgB,iBAAiB,EAC/B,OACA,SACA,QACA,MACA,YACA,WACA,OACA,KACA,GAAG,QACqB;CACxB,MAAM,gBAAgB,UAAU,KAAA;CAChC,MAAM,WAAW,WAAW,gBAAgB,uBAAuB,qBAAqB;CACxF,MAAM,MAAM,SAAS,IAAI,QAAQ,CAAC,CAAC,KAAK;CAGxC,MAAM,WAAW,cAAc,cAAc,UAAU,aAAa,GAAG,CAAC,KAAK,aAAa,CAAC;CAC3F,MAAM,eAAe,iBAAiB,KAAK;CAE3C,MAAM,EAAE,qBAAqB,eAAe;EAC1C,GAAG;EACH,OAAO,gBAAgB,KAAA,IAAY,OAAO,MAAM,KAAK,IAAI,IAAI;EAC7D,UAAU;EACV,UAAU;EACV,iBAAiB;CACnB,CAAC;CAED,MAAM,WAAW,cACf,CAAC,gBACG,iBAAiB,SAAS,GAAG,SAAS,OAAO,MAAM,IACnD,eACE,mBAAmB,SAAS,IAC5B,mBAAmB,WAAW,SAAS,OAAO,MAAM;CAE5D,MAAM,WAAW,OAAoB,IAAI;CACzC,MAAM,UAAU,OAAuB,IAAI;CAE3C,mBAAmB,cAAc;EAC/B,IAAI,CAAC,eAAe;EACpB,MAAM,QAAQ,QAAQ,SAAS;EAC/B,SAAS,SAAS,aAAa,aAAa,eAAe,KAAK,CAAC;EACjE,QAAQ,SAAS,aAAa,KAAK,UAAU,UAAU,KAAK,CAAC;CAC/D,CAAC;CAED,MAAM,UAAU,QAAQ,CAAC;CACzB,MAAM,SAAS,uBAAuB,EAAE,QAAQ,CAAC;CAEjD,OACE,oBAAC,OAAD;EACE,GAAI,WAAW,MAAM,gBAAgB;EAChC;EAEL,eAAa,gBAAgB,6BAA6B,IAAI;EAC9D,gBAAc,WAAW;EACzB,sBAAoB,iBAAiB,KAAA;EACrC,OACE,SAAS,KAAA,IACL,QACC;GACC,+BAA+B,GAAG,KAAK,IAAI,KAAK,IAAI,MAAM,QAAQ,GAAG,QAAQ,EAAE;GAC/E,GAAG;EACL;EAEN,WAAW,OAAO,KAAK,EAAE,OAAO,GAAG,YAAY,MAAM,SAAS,EAAE,CAAC;EAEjE,UAAA,oBAAC,OAAD;GACE,SAAS;GACT,eAAY;GACZ,UAAS;GACT,aAAU;GACV,WAAW,OAAO,UAAU,EAAE,OAAO,YAAY,UAAU,CAAC;GAE5D,UAAA,oBAAC,KAAD;IAAG,KAAK;IAAU,WAAW,eAAe,OAAO;IACjD,UAAA,oBAAC,QAAD;KAAM,KAAK;KAAS,GAAG,UAAU,UAAU,OAAO;IAAI,CAAA;GACrD,CAAA;EACA,CAAA;CACF,CAAA;AAET"}

package/dist/components/loading-indicator/lazy-loading-indicator.js

@@ -0,0 +1,25 @@
+"use client";
+import { onDemand, usePreloadOnIntent } from "../../utils/load-on-demand.js";
+//#region src/components/loading-indicator/lazy-loading-indicator.tsx
+const indicator = onDemand(() => import("./LoadingIndicator.js").then((module) => module.LoadingIndicator));
+/** Starts loading the `LoadingIndicator` module, once; later calls return the same promise. */
+const preloadLoadingIndicator = indicator.preload;
+/**
+* A `LoadingIndicator` whose module (its shapes and morphing) loads the first time it renders,
+* for components that show one only sometimes: an option list shows it only while `loading`.
+* Render it only while it should show. Until the module arrives it renders nothing, so place
+* it in a box that keeps its room; once loaded it renders at once.
+*/
+const LazyLoadingIndicator = indicator.Component;
+/**
+* Preloads the loading indicator when the pointer moves over `ref`'s element or focus enters
+* it, while `enabled` (the component may show one, e.g. it takes a `loading` prop), so it's
+* usually ready by the time it shows.
+*/
+function usePreloadLoadingIndicator(ref, enabled) {
+	usePreloadOnIntent(ref, indicator.preload, enabled);
+}
+//#endregion
+export { LazyLoadingIndicator, preloadLoadingIndicator, usePreloadLoadingIndicator };
+
+//# sourceMappingURL=lazy-loading-indicator.js.map

package/dist/components/loading-indicator/lazy-loading-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lazy-loading-indicator.js","names":[],"sources":["../../../src/components/loading-indicator/lazy-loading-indicator.tsx"],"sourcesContent":["'use client';\n\nimport type { RefObject } from 'react';\nimport { onDemand, usePreloadOnIntent } from '../../utils/load-on-demand';\nimport type { LoadingIndicatorProps } from './LoadingIndicator';\n\nconst indicator = onDemand<LoadingIndicatorProps>(() =>\n  import('./LoadingIndicator').then((module) => module.LoadingIndicator),\n);\n\n/** Starts loading the `LoadingIndicator` module, once; later calls return the same promise. */\nexport const preloadLoadingIndicator = indicator.preload;\n\n/**\n * A `LoadingIndicator` whose module (its shapes and morphing) loads the first time it renders,\n * for components that show one only sometimes: an option list shows it only while `loading`.\n * Render it only while it should show. Until the module arrives it renders nothing, so place\n * it in a box that keeps its room; once loaded it renders at once.\n */\nexport const LazyLoadingIndicator = indicator.Component;\n\n/**\n * Preloads the loading indicator when the pointer moves over `ref`'s element or focus enters\n * it, while `enabled` (the component may show one, e.g. it takes a `loading` prop), so it's\n * usually ready by the time it shows.\n */\nexport function usePreloadLoadingIndicator(ref: RefObject<HTMLElement | null>, enabled: boolean) {\n  usePreloadOnIntent(ref, indicator.preload, enabled);\n}\n"],"mappings":";;;AAMA,MAAM,YAAY,eAChB,OAAO,wBAAqB,CAAC,MAAM,WAAW,OAAO,gBAAgB,CACvE;;AAGA,MAAa,0BAA0B,UAAU;;;;;;;AAQjD,MAAa,uBAAuB,UAAU;;;;;;AAO9C,SAAgB,2BAA2B,KAAoC,SAAkB;CAC/F,mBAAmB,KAAK,UAAU,SAAS,OAAO;AACpD"}

package/dist/components/loading-indicator/loading-indicator-frames.js

@@ -0,0 +1,149 @@
+import { MaterialShapes } from "../../shapes/material-shapes.js";
+import { cubicsToPath } from "../../shapes/path.js";
+import { getMorph } from "../../primitives/morph-path.js";
+const ACTIVE_SIZE = 38;
+const CENTER = 24;
+const GLOBAL_ROTATION_MS = 4666;
+const QUARTER_ROTATION = 90;
+/** Compose `LoadingIndicatorDefaults.IndeterminateIndicatorPolygons`. */
+const INDETERMINATE_SHAPES = [
+	"SoftBurst",
+	"Cookie9Sided",
+	"Pentagon",
+	"Pill",
+	"Sunny",
+	"Cookie4Sided",
+	"Oval"
+];
+let determinateShapes;
+/**
+* Compose `DeterminateIndicatorPolygons`: a circle rotated by 18° (so it morphs smoothly
+* into the soft burst, rotated the same way), then the soft burst.
+*/
+function getDeterminateShapes() {
+	if (!determinateShapes) {
+		const a = 18 * Math.PI / 180;
+		const c = Math.cos(a);
+		const s = Math.sin(a);
+		determinateShapes = [MaterialShapes.Circle.transformed((x, y) => [x * c - y * s, x * s + y * c]), MaterialShapes.SoftBurst];
+	}
+	return determinateShapes;
+}
+const DAMPING_RATIO = .6;
+const STIFFNESS = 200;
+const VISIBILITY_THRESHOLD = .1;
+const OMEGA = Math.sqrt(STIFFNESS);
+const DECAY = DAMPING_RATIO * OMEGA;
+const OMEGA_D = OMEGA * Math.sqrt(1 - DAMPING_RATIO * DAMPING_RATIO);
+const ENVELOPE = Math.hypot(1, DECAY / OMEGA_D);
+const MORPH_DURATION_MS = Math.trunc(1e3 * Math.log(VISIBILITY_THRESHOLD / ENVELOPE) / -DECAY);
+/** The morph spring's value `ms` after starting from 0 towards 1 at rest. */
+function morphSpring(ms) {
+	const t = ms / 1e3;
+	return 1 - Math.exp(-DECAY * t) * (Math.cos(OMEGA_D * t) + DECAY / OMEGA_D * Math.sin(OMEGA_D * t));
+}
+/**
+* Compose's indeterminate loop at `elapsedMs`. Every 650ms a morph springs to the next shape;
+* when it finishes, the next morph starts at 0 and the target angle gains a quarter turn
+* (starting from a quarter turn). The shape turns by `progress × 90°` plus that angle plus a
+* linear full turn every 4666ms.
+*/
+function indeterminateFrame(elapsedMs, morphCount) {
+	const cycle = Math.floor(elapsedMs / 650);
+	const local = elapsedMs - cycle * 650;
+	const finished = local >= MORPH_DURATION_MS;
+	const index = (cycle + (finished ? 1 : 0)) % morphCount;
+	const progress = finished ? 0 : morphSpring(local);
+	const target = QUARTER_ROTATION * (cycle + (finished ? 2 : 1)) % 360;
+	const global = elapsedMs % GLOBAL_ROTATION_MS / GLOBAL_ROTATION_MS * 360;
+	return {
+		index,
+		progress,
+		rotation: (progress * QUARTER_ROTATION + target + global) % 360
+	};
+}
+/**
+* Reduced motion: the first shape turns at the global rate, without morphing or the
+* springy quarter turns.
+*/
+function reducedMotionFrame(elapsedMs) {
+	return {
+		index: 0,
+		progress: 0,
+		rotation: elapsedMs % GLOBAL_ROTATION_MS / GLOBAL_ROTATION_MS * 360
+	};
+}
+/**
+* Compose's determinate drawing: `value` (0–1) walks the morph sequence and turns the shape
+* counter-clockwise by up to 180°.
+*/
+function determinateFrame(value, morphCount) {
+	const v = Number.isNaN(value) ? 0 : Math.min(Math.max(value, 0), 1);
+	const index = Math.min(Math.floor(morphCount * v), morphCount - 1);
+	return {
+		index,
+		progress: v === 1 && index === morphCount - 1 ? 1 : v * morphCount % 1,
+		rotation: -v * 180
+	};
+}
+const resolve = (shape) => typeof shape === "string" ? MaterialShapes[shape] : shape;
+const normalizedCache = /* @__PURE__ */ new WeakMap();
+function normalized(polygon) {
+	let result = normalizedCache.get(polygon);
+	if (!result) normalizedCache.set(polygon, result = polygon.normalized());
+	return result;
+}
+/**
+* Compose `calculateScaleFactor`: shrinks the shapes so none clips as it rotates (a pill
+* counts by its longer side), times the 38/48 active-indicator scale.
+*/
+function scaleFactor(polygons) {
+	let factor = 1;
+	for (const polygon of polygons) {
+		const [l, t, r, b] = polygon.calculateBounds();
+		const [ml, mt, mr, mb] = polygon.calculateMaxBounds();
+		factor = Math.min(factor, Math.max((r - l) / (mr - ml), (b - t) / (mb - mt)));
+	}
+	return factor * ACTIVE_SIZE / 48;
+}
+/** The morph sequence (wrapping back to the start when `circular`) and the path scale. */
+function prepareShapes(shapes, circular) {
+	if (shapes.length < 2) throw new Error("LoadingIndicator needs at least two shapes");
+	const polygons = shapes.map(resolve);
+	const unit = polygons.map(normalized);
+	const morphs = [];
+	for (let i = 0; i < unit.length; i++) if (i + 1 < unit.length) morphs.push(getMorph(unit[i], unit[i + 1]));
+	else if (circular) morphs.push(getMorph(unit[i], unit[0]));
+	return {
+		morphs,
+		scale: 48 * scaleFactor(polygons)
+	};
+}
+/**
+* Compose `processPath`: the morph frame scaled and centred in the 48px box by its
+* control-point bounds (what Compose's `Path.getBounds()` measures).
+*/
+function framePath({ morphs, scale }, frame) {
+	const cubics = morphs[frame.index].asCubics(frame.progress);
+	let minX = Infinity;
+	let minY = Infinity;
+	let maxX = -Infinity;
+	let maxY = -Infinity;
+	for (const { points } of cubics) for (let i = 0; i < 8; i += 2) {
+		minX = Math.min(minX, points[i]);
+		maxX = Math.max(maxX, points[i]);
+		minY = Math.min(minY, points[i + 1]);
+		maxY = Math.max(maxY, points[i + 1]);
+	}
+	return cubicsToPath(cubics, {
+		scale,
+		translateX: CENTER - (minX + maxX) / 2 * scale,
+		translateY: CENTER - (minY + maxY) / 2 * scale
+	});
+}
+/** SVG rotation about the box centre. */
+const frameTransform = ({ rotation }) => `rotate(${Math.round(rotation * 100) / 100} ${CENTER} ${CENTER})`;
+//#endregion
+export { GLOBAL_ROTATION_MS, INDETERMINATE_SHAPES, MORPH_DURATION_MS, determinateFrame, framePath, frameTransform, getDeterminateShapes, indeterminateFrame, morphSpring, prepareShapes, reducedMotionFrame, scaleFactor };
+
+//# sourceMappingURL=loading-indicator-frames.js.map

package/dist/components/loading-indicator/loading-indicator-frames.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-indicator-frames.js","names":[],"sources":["../../../src/components/loading-indicator/loading-indicator-frames.ts"],"sourcesContent":["import { getMorph, type MorphShape } from '../../primitives/morph-path';\nimport { MaterialShapes, type MaterialShapeName } from '../../shapes/material-shapes';\nimport type { Morph } from '../../shapes/morph';\nimport { cubicsToPath } from '../../shapes/path';\nimport type { RoundedPolygon } from '../../shapes/rounded-polygon';\n\n/*\n * Geometry and timing of Compose's LoadingIndicator.kt (LoadingIndicatorTokens: 48px\n * container, 38px active indicator). Kept as pure functions so frames can be tested.\n */\n\nexport const CONTAINER_SIZE = 48;\nconst ACTIVE_SIZE = 38;\nconst CENTER = CONTAINER_SIZE / 2;\n\nexport const GLOBAL_ROTATION_MS = 4666;\nexport const MORPH_INTERVAL_MS = 650;\nconst QUARTER_ROTATION = 90;\n\n/** Compose `LoadingIndicatorDefaults.IndeterminateIndicatorPolygons`. */\nexport const INDETERMINATE_SHAPES: readonly MaterialShapeName[] = [\n  'SoftBurst',\n  'Cookie9Sided',\n  'Pentagon',\n  'Pill',\n  'Sunny',\n  'Cookie4Sided',\n  'Oval',\n];\n\nlet determinateShapes: readonly RoundedPolygon[] | undefined;\n\n/**\n * Compose `DeterminateIndicatorPolygons`: a circle rotated by 18° (so it morphs smoothly\n * into the soft burst, rotated the same way), then the soft burst.\n */\nexport function getDeterminateShapes(): readonly RoundedPolygon[] {\n  if (!determinateShapes) {\n    const a = (18 * Math.PI) / 180;\n    const c = Math.cos(a);\n    const s = Math.sin(a);\n    const circle = MaterialShapes.Circle.transformed((x, y) => [x * c - y * s, x * s + y * c]);\n    determinateShapes = [circle, MaterialShapes.SoftBurst];\n  }\n  return determinateShapes;\n}\n\n/*\n * The indeterminate morph spring: dampingRatio 0.6, stiffness 200, visibilityThreshold 0.1.\n * Compose ends a spring at its estimated duration (SpringEstimation.kt: the time the\n * oscillation envelope falls to the threshold, truncated to whole milliseconds), ~297ms.\n */\nconst DAMPING_RATIO = 0.6;\nconst STIFFNESS = 200;\nconst VISIBILITY_THRESHOLD = 0.1;\nconst OMEGA = Math.sqrt(STIFFNESS);\nconst DECAY = DAMPING_RATIO * OMEGA;\nconst OMEGA_D = OMEGA * Math.sqrt(1 - DAMPING_RATIO * DAMPING_RATIO);\nconst ENVELOPE = Math.hypot(1, DECAY / OMEGA_D);\n\nexport const MORPH_DURATION_MS = Math.trunc(\n  (1000 * Math.log(VISIBILITY_THRESHOLD / ENVELOPE)) / -DECAY,\n);\n\n/** The morph spring's value `ms` after starting from 0 towards 1 at rest. */\nexport function morphSpring(ms: number): number {\n  const t = ms / 1000;\n  return (\n    1 - Math.exp(-DECAY * t) * (Math.cos(OMEGA_D * t) + (DECAY / OMEGA_D) * Math.sin(OMEGA_D * t))\n  );\n}\n\nexport interface Frame {\n  /** Index of the active morph. */\n  index: number;\n  /** Progress of the active morph; the indeterminate spring overshoots past 1. */\n  progress: number;\n  /** Clockwise rotation in degrees. */\n  rotation: number;\n}\n\n/**\n * Compose's indeterminate loop at `elapsedMs`. Every 650ms a morph springs to the next shape;\n * when it finishes, the next morph starts at 0 and the target angle gains a quarter turn\n * (starting from a quarter turn). The shape turns by `progress × 90°` plus that angle plus a\n * linear full turn every 4666ms.\n */\nexport function indeterminateFrame(elapsedMs: number, morphCount: number): Frame {\n  const cycle = Math.floor(elapsedMs / MORPH_INTERVAL_MS);\n  const local = elapsedMs - cycle * MORPH_INTERVAL_MS;\n  const finished = local >= MORPH_DURATION_MS;\n  const index = (cycle + (finished ? 1 : 0)) % morphCount;\n  const progress = finished ? 0 : morphSpring(local);\n  const target = (QUARTER_ROTATION * (cycle + (finished ? 2 : 1))) % 360;\n  const global = ((elapsedMs % GLOBAL_ROTATION_MS) / GLOBAL_ROTATION_MS) * 360;\n  return { index, progress, rotation: (progress * QUARTER_ROTATION + target + global) % 360 };\n}\n\n/**\n * Reduced motion: the first shape turns at the global rate, without morphing or the\n * springy quarter turns.\n */\nexport function reducedMotionFrame(elapsedMs: number): Frame {\n  return {\n    index: 0,\n    progress: 0,\n    rotation: ((elapsedMs % GLOBAL_ROTATION_MS) / GLOBAL_ROTATION_MS) * 360,\n  };\n}\n\n/**\n * Compose's determinate drawing: `value` (0–1) walks the morph sequence and turns the shape\n * counter-clockwise by up to 180°.\n */\nexport function determinateFrame(value: number, morphCount: number): Frame {\n  const v = Number.isNaN(value) ? 0 : Math.min(Math.max(value, 0), 1);\n  const index = Math.min(Math.floor(morphCount * v), morphCount - 1);\n  const progress = v === 1 && index === morphCount - 1 ? 1 : (v * morphCount) % 1;\n  return { index, progress, rotation: -v * 180 };\n}\n\nexport interface PreparedShapes {\n  morphs: readonly Morph[];\n  /** Path scale: the container size × Compose's scale factor. */\n  scale: number;\n}\n\nconst resolve = (shape: MorphShape) => (typeof shape === 'string' ? MaterialShapes[shape] : shape);\nconst normalizedCache = new WeakMap<RoundedPolygon, RoundedPolygon>();\n\nfunction normalized(polygon: RoundedPolygon): RoundedPolygon {\n  let result = normalizedCache.get(polygon);\n  if (!result) normalizedCache.set(polygon, (result = polygon.normalized()));\n  return result;\n}\n\n/**\n * Compose `calculateScaleFactor`: shrinks the shapes so none clips as it rotates (a pill\n * counts by its longer side), times the 38/48 active-indicator scale.\n */\nexport function scaleFactor(polygons: readonly RoundedPolygon[]): number {\n  let factor = 1;\n  for (const polygon of polygons) {\n    const [l, t, r, b] = polygon.calculateBounds();\n    const [ml, mt, mr, mb] = polygon.calculateMaxBounds();\n    factor = Math.min(factor, Math.max((r! - l!) / (mr! - ml!), (b! - t!) / (mb! - mt!)));\n  }\n  return (factor * ACTIVE_SIZE) / CONTAINER_SIZE;\n}\n\n/** The morph sequence (wrapping back to the start when `circular`) and the path scale. */\nexport function prepareShapes(shapes: readonly MorphShape[], circular: boolean): PreparedShapes {\n  if (shapes.length < 2) throw new Error('LoadingIndicator needs at least two shapes');\n  const polygons = shapes.map(resolve);\n  const unit = polygons.map(normalized);\n  const morphs: Morph[] = [];\n  for (let i = 0; i < unit.length; i++) {\n    if (i + 1 < unit.length) morphs.push(getMorph(unit[i]!, unit[i + 1]!));\n    else if (circular) morphs.push(getMorph(unit[i]!, unit[0]!));\n  }\n  return { morphs, scale: CONTAINER_SIZE * scaleFactor(polygons) };\n}\n\n/**\n * Compose `processPath`: the morph frame scaled and centred in the 48px box by its\n * control-point bounds (what Compose's `Path.getBounds()` measures).\n */\nexport function framePath({ morphs, scale }: PreparedShapes, frame: Frame): string {\n  const cubics = morphs[frame.index]!.asCubics(frame.progress);\n  let minX = Infinity;\n  let minY = Infinity;\n  let maxX = -Infinity;\n  let maxY = -Infinity;\n  for (const { points } of cubics) {\n    for (let i = 0; i < 8; i += 2) {\n      minX = Math.min(minX, points[i]!);\n      maxX = Math.max(maxX, points[i]!);\n      minY = Math.min(minY, points[i + 1]!);\n      maxY = Math.max(maxY, points[i + 1]!);\n    }\n  }\n  return cubicsToPath(cubics, {\n    scale,\n    translateX: CENTER - ((minX + maxX) / 2) * scale,\n    translateY: CENTER - ((minY + maxY) / 2) * scale,\n  });\n}\n\n/** SVG rotation about the box centre. */\nexport const frameTransform = ({ rotation }: Frame) =>\n  `rotate(${Math.round(rotation * 100) / 100} ${CENTER} ${CENTER})`;\n"],"mappings":"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"}

package/dist/components/loading-indicator/loading-indicator-styles.d.ts

@@ -0,0 +1,36 @@
+import { VariantProps } from "../../utils/tv.js";
+//#region src/components/loading-indicator/loading-indicator-styles.d.ts
+/** Variant definitions for {@link LoadingIndicator}; extend them to add variants. */
+export declare const loadingIndicatorStyles: import("tailwind-variants").TVReturnType<{
+  variant: {
+    default: {};
+    contained: {};
+  };
+}, {
+  root: string[];
+  indicator: string;
+}, undefined, {
+  variant: {
+    default: {};
+    contained: {};
+  };
+}, {
+  root: string[];
+  indicator: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  variant: {
+    default: {};
+    contained: {};
+  };
+}, {
+  root: string[];
+  indicator: string;
+}>>;
+/**
+ * The variants of {@link loadingIndicatorStyles}, 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 LoadingIndicatorStyleProps = VariantProps<typeof loadingIndicatorStyles>;
+export type LoadingIndicatorVariant = NonNullable<LoadingIndicatorStyleProps['variant']>;
+//#endregion
+//# sourceMappingURL=loading-indicator-styles.d.ts.map

package/dist/components/loading-indicator/loading-indicator-styles.js

@@ -0,0 +1,22 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/loading-indicator/loading-indicator-styles.ts
+/** Variant definitions for {@link LoadingIndicator}; extend them to add variants. */
+const loadingIndicatorStyles = tv({
+	slots: {
+		root: [
+			"inline-flex size-(--m3-loading-indicator-size,48px) shrink-0 items-center justify-center rounded-corner-full",
+			"bg-[var(--_md-comp-loading-indicator-container-color)]",
+			"text-[color:var(--_md-comp-loading-indicator-active-indicator-color)]"
+		],
+		indicator: "size-full fill-current"
+	},
+	variants: { variant: {
+		default: {},
+		contained: {}
+	} },
+	defaultVariants: { variant: "default" }
+});
+//#endregion
+export { loadingIndicatorStyles };
+
+//# sourceMappingURL=loading-indicator-styles.js.map

package/dist/components/loading-indicator/loading-indicator-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-indicator-styles.js","names":[],"sources":["../../../src/components/loading-indicator/loading-indicator-styles.ts"],"sourcesContent":["import { tv, type VariantProps } from '../../utils/tv';\n\n/*\n * Values follow Compose Material 3 (LoadingIndicator.kt, LoadingIndicatorTokens): a 48px\n * box with full corners; the indicator is `primary`, or `on-primary-container` on a\n * `primary-container` container when contained. The SVG scales with the box, keeping a\n * square aspect. The colours come from the component tokens (`loading-indicator-tokens.ts`,\n * `--md-comp-loading-indicator-[contained-]*`); the root carries\n * `data-tokens=\"md-comp-loading-indicator\"` and `data-variant`, and reads one private variable\n * per part. A consumer class (`text-tertiary`) still wins. Every class is written out in full so Tailwind can find it.\n */\n\n/** Variant definitions for {@link LoadingIndicator}; extend them to add variants. */\nexport const loadingIndicatorStyles = tv({\n  slots: {\n    // 48px by default; `size` sets --m3-loading-indicator-size (24–240px, the spec's range).\n    root: [\n      'inline-flex size-(--m3-loading-indicator-size,48px) shrink-0 items-center justify-center rounded-corner-full',\n      'bg-[var(--_md-comp-loading-indicator-container-color)]',\n      'text-[color:var(--_md-comp-loading-indicator-active-indicator-color)]',\n    ],\n    indicator: 'size-full fill-current',\n  },\n  variants: {\n    variant: {\n      default: {},\n      contained: {},\n    },\n  },\n  defaultVariants: { variant: 'default' },\n});\n\n/**\n * The variants of {@link loadingIndicatorStyles}, 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 LoadingIndicatorStyleProps = VariantProps<typeof loadingIndicatorStyles>;\nexport type LoadingIndicatorVariant = NonNullable<LoadingIndicatorStyleProps['variant']>;\n"],"mappings":";;;AAaA,MAAa,yBAAyB,GAAG;CACvC,OAAO;EAEL,MAAM;GACJ;GACA;GACA;EACF;EACA,WAAW;CACb;CACA,UAAU,EACR,SAAS;EACP,SAAS,CAAC;EACV,WAAW,CAAC;CACd,EACF;CACA,iBAAiB,EAAE,SAAS,UAAU;AACxC,CAAC"}

package/dist/components/loading-indicator/loading-indicator-tokens.d.ts

@@ -0,0 +1,7 @@
+import { ComponentTokenSet } from "../../tokens/component.js";
+import "../../index.js";
+//#region src/components/loading-indicator/loading-indicator-tokens.d.ts
+/** The tokens of {@link LoadingIndicator}: `--md-comp-loading-indicator-[contained-]<part>`. */
+export declare const loadingIndicatorTokenSet: ComponentTokenSet<never>;
+//#endregion
+//# sourceMappingURL=loading-indicator-tokens.d.ts.map

package/dist/components/loading-indicator/loading-indicator-tokens.js

@@ -0,0 +1,44 @@
+import { color, defineComponentTokens } from "../../tokens/component.js";
+//#region src/components/loading-indicator/loading-indicator-tokens.ts
+const paintsIndicator = {
+	property: "fill",
+	slot: "indicator"
+};
+/** The tokens of {@link LoadingIndicator}: `--md-comp-loading-indicator-[contained-]<part>`. */
+const loadingIndicatorTokenSet = defineComponentTokens({
+	name: "md-comp-loading-indicator",
+	tokens: {},
+	scopes: { variant: {
+		default: {
+			prefix: "md-comp-loading-indicator",
+			tokens: { "active-indicator-color": {
+				value: color("primary"),
+				description: "The morphing shape.",
+				compose: "LoadingIndicatorTokens.ActiveIndicatorColor",
+				paints: paintsIndicator
+			} },
+			fixed: { "container-color": "transparent" }
+		},
+		contained: {
+			prefix: "md-comp-loading-indicator-contained",
+			tokens: {
+				"active-indicator-color": {
+					value: color("on-primary-container"),
+					description: "The morphing shape of a contained indicator.",
+					compose: "LoadingIndicatorTokens.ContainedActiveColor",
+					paints: paintsIndicator
+				},
+				"container-color": {
+					value: color("primary-container"),
+					description: "The round container behind it.",
+					compose: "LoadingIndicatorTokens.ContainedContainerColor",
+					paints: { property: "background-color" }
+				}
+			}
+		}
+	} }
+});
+//#endregion
+export { loadingIndicatorTokenSet };
+
+//# sourceMappingURL=loading-indicator-tokens.js.map

package/dist/components/loading-indicator/loading-indicator-tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-indicator-tokens.js","names":[],"sources":["../../../src/components/loading-indicator/loading-indicator-tokens.ts"],"sourcesContent":["import { color, defineComponentTokens } from '../../tokens/component';\n\n/*\n * The loading indicator's component tokens, M3's `md.comp.loading-indicator.*` names\n * (checked against m3.material.io's token tables, 2026-10-14), with Compose's\n * LoadingIndicatorTokens defaults. The root's `data-variant` (`default` or `contained`)\n * picks the public names; `loading-indicator-styles.ts` reads one private variable per part.\n * The size and the full corners stay classes.\n */\n\nconst paintsIndicator = { property: 'fill', slot: 'indicator' } as const;\n\n/** The tokens of {@link LoadingIndicator}: `--md-comp-loading-indicator-[contained-]<part>`. */\nexport const loadingIndicatorTokenSet = defineComponentTokens({\n  name: 'md-comp-loading-indicator',\n  tokens: {},\n  scopes: {\n    variant: {\n      default: {\n        prefix: 'md-comp-loading-indicator',\n        tokens: {\n          'active-indicator-color': {\n            value: color('primary'),\n            description: 'The morphing shape.',\n            compose: 'LoadingIndicatorTokens.ActiveIndicatorColor',\n            paints: paintsIndicator,\n          },\n        },\n        fixed: { 'container-color': 'transparent' },\n      },\n      contained: {\n        prefix: 'md-comp-loading-indicator-contained',\n        tokens: {\n          'active-indicator-color': {\n            value: color('on-primary-container'),\n            description: 'The morphing shape of a contained indicator.',\n            compose: 'LoadingIndicatorTokens.ContainedActiveColor',\n            paints: paintsIndicator,\n          },\n          'container-color': {\n            value: color('primary-container'),\n            description: 'The round container behind it.',\n            compose: 'LoadingIndicatorTokens.ContainedContainerColor',\n            paints: { property: 'background-color' },\n          },\n        },\n      },\n    },\n  },\n});\n"],"mappings":";;AAUA,MAAM,kBAAkB;CAAE,UAAU;CAAQ,MAAM;AAAY;;AAG9D,MAAa,2BAA2B,sBAAsB;CAC5D,MAAM;CACN,QAAQ,CAAC;CACT,QAAQ,EACN,SAAS;EACP,SAAS;GACP,QAAQ;GACR,QAAQ,EACN,0BAA0B;IACxB,OAAO,MAAM,SAAS;IACtB,aAAa;IACb,SAAS;IACT,QAAQ;GACV,EACF;GACA,OAAO,EAAE,mBAAmB,cAAc;EAC5C;EACA,WAAW;GACT,QAAQ;GACR,QAAQ;IACN,0BAA0B;KACxB,OAAO,MAAM,sBAAsB;KACnC,aAAa;KACb,SAAS;KACT,QAAQ;IACV;IACA,mBAAmB;KACjB,OAAO,MAAM,mBAAmB;KAChC,aAAa;KACb,SAAS;KACT,QAAQ,EAAE,UAAU,mBAAmB;IACzC;GACF;EACF;CACF,EACF;AACF,CAAC"}