@windmorph/react 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,257 @@
+import { color, corner, defineComponentTokens, elevation, px } from "../../tokens/component.js";
+//#region src/components/button/button-tokens.ts
+const container = { property: "background-color" };
+const label = { property: "color" };
+const selectedContainer = {
+	property: "background-color",
+	state: "selected"
+};
+const selectedLabel = {
+	property: "color",
+	state: "selected"
+};
+const unselectedContainer = {
+	property: "background-color",
+	state: "unselected"
+};
+const unselectedLabel = {
+	property: "color",
+	state: "unselected"
+};
+const roundShape = { property: "border-top-left-radius" };
+const squareShape = {
+	property: "border-top-left-radius",
+	state: "selected"
+};
+/** The private parts every variant without its own token takes from its resting colours. */
+const followsResting = { "unselected-label-text-color": "var(--_md-comp-button-label-text-color)" };
+/** The six colour tokens of a variant with a full toggle set. */
+function toggleColors(compose, colors) {
+	return {
+		"container-color": {
+			value: colors.container,
+			description: "The container.",
+			compose: `${compose}.ContainerColor`,
+			paints: container
+		},
+		"label-text-color": {
+			value: colors.label,
+			description: "The label and icon.",
+			compose: `${compose}.LabelTextColor`,
+			paints: label
+		},
+		"selected-container-color": {
+			value: colors.selectedContainer,
+			description: "The container of a selected toggle.",
+			compose: `${compose}.SelectedContainerColor`,
+			paints: selectedContainer
+		},
+		"selected-label-text-color": {
+			value: colors.selectedLabel,
+			description: "The label and icon of a selected toggle.",
+			compose: `${compose}.SelectedLabelTextColor`,
+			paints: selectedLabel
+		},
+		"unselected-container-color": {
+			value: colors.unselectedContainer,
+			description: "The container of an unselected toggle.",
+			compose: `${compose}.UnselectedContainerColor`,
+			paints: unselectedContainer
+		},
+		"unselected-label-text-color": {
+			value: colors.unselectedLabel,
+			description: "The label and icon of an unselected toggle.",
+			compose: `${compose}.UnselectedLabelTextColor`,
+			paints: unselectedLabel
+		}
+	};
+}
+/** A size's round and square corners; round is full, capped at half the height. */
+function shapes(compose, square) {
+	return {
+		"container-shape-round": {
+			value: corner("full"),
+			description: "The round shape: full corners, at most half the height.",
+			compose: `${compose}.ContainerShapeRound`,
+			paints: roundShape
+		},
+		"container-shape-square": {
+			value: square,
+			description: "The square shape, which a selected round toggle also takes.",
+			compose: `${compose}.ContainerShapeSquare`,
+			paints: squareShape
+		}
+	};
+}
+/**
+* The tokens of {@link Button}: `--md-comp-button-<variant>-<part>` per variant and
+* `--md-comp-button-<size>-container-shape-<round|square>` per size.
+*/
+const buttonTokenSet = defineComponentTokens({
+	name: "md-comp-button",
+	tokens: {},
+	scopes: {
+		variant: {
+			filled: {
+				prefix: "md-comp-button-filled",
+				tokens: toggleColors("FilledButtonTokens", {
+					container: color("primary"),
+					label: color("on-primary"),
+					selectedContainer: color("primary"),
+					selectedLabel: color("on-primary"),
+					unselectedContainer: color("surface-container"),
+					unselectedLabel: color("on-surface-variant")
+				}),
+				fixed: {
+					"container-elevation": elevation(0),
+					"outline-color": "transparent"
+				}
+			},
+			elevated: {
+				prefix: "md-comp-button-elevated",
+				tokens: {
+					"container-color": {
+						value: color("surface-container-low"),
+						description: "The container.",
+						compose: "ElevatedButtonTokens.ContainerColor",
+						paints: container
+					},
+					"label-text-color": {
+						value: color("primary"),
+						description: "The label and icon, and an unselected toggle’s.",
+						compose: "ElevatedButtonTokens.LabelTextColor",
+						paints: label
+					},
+					"container-elevation": {
+						value: elevation(1),
+						description: "The shadow at rest.",
+						compose: "ElevatedButtonTokens.ContainerElevation",
+						paints: { property: "box-shadow" }
+					},
+					"selected-container-color": {
+						value: color("primary"),
+						description: "The container of a selected toggle.",
+						compose: "ElevatedButtonTokens.SelectedContainerColor",
+						paints: selectedContainer
+					},
+					"selected-label-text-color": {
+						value: color("on-primary"),
+						description: "The label and icon of a selected toggle.",
+						compose: "ElevatedButtonTokens.SelectedLabelTextColor",
+						paints: selectedLabel
+					},
+					"unselected-container-color": {
+						value: color("surface-container-low"),
+						description: "The container of an unselected toggle.",
+						compose: "ElevatedButtonTokens.UnselectedContainerColor",
+						paints: unselectedContainer
+					}
+				},
+				fixed: {
+					...followsResting,
+					"outline-color": "transparent"
+				}
+			},
+			tonal: {
+				prefix: "md-comp-button-tonal",
+				tokens: toggleColors("TonalButtonTokens", {
+					container: color("secondary-container"),
+					label: color("on-secondary-container"),
+					selectedContainer: color("secondary"),
+					selectedLabel: color("on-secondary"),
+					unselectedContainer: color("secondary-container"),
+					unselectedLabel: color("on-secondary-container")
+				}),
+				fixed: {
+					"container-elevation": elevation(0),
+					"outline-color": "transparent"
+				}
+			},
+			outlined: {
+				prefix: "md-comp-button-outlined",
+				tokens: {
+					"outline-color": {
+						value: color("outline-variant"),
+						description: "The outline.",
+						compose: "OutlinedButtonTokens.OutlineColor",
+						paints: { property: "border-top-color" }
+					},
+					"label-text-color": {
+						value: color("on-surface-variant"),
+						description: "The label and icon, and an unselected toggle’s.",
+						compose: "OutlinedButtonTokens.LabelTextColor",
+						paints: label
+					},
+					"selected-container-color": {
+						value: color("inverse-surface"),
+						description: "The container of a selected toggle, which has no outline.",
+						compose: "OutlinedButtonTokens.SelectedContainerColor",
+						paints: selectedContainer
+					},
+					"selected-label-text-color": {
+						value: color("inverse-on-surface"),
+						description: "The label and icon of a selected toggle.",
+						compose: "OutlinedButtonTokens.SelectedLabelTextColor",
+						paints: selectedLabel
+					}
+				},
+				fixed: {
+					...followsResting,
+					"container-color": "transparent",
+					"container-elevation": elevation(0),
+					"unselected-container-color": "transparent"
+				}
+			},
+			text: {
+				prefix: "md-comp-button-text",
+				tokens: { "label-text-color": {
+					value: color("primary"),
+					description: "The label and icon.",
+					compose: "TextButtonTokens.LabelTextColor",
+					paints: label
+				} },
+				fixed: {
+					...followsResting,
+					"container-color": "transparent",
+					"container-elevation": elevation(0),
+					"outline-color": "transparent",
+					"selected-container-color": "transparent",
+					"selected-label-text-color": "var(--_md-comp-button-label-text-color)",
+					"unselected-container-color": "transparent"
+				}
+			}
+		},
+		size: {
+			xs: {
+				prefix: "md-comp-button-xsmall",
+				tokens: shapes("ButtonXSmallTokens", corner("medium")),
+				fixed: { "half-height": px(16) }
+			},
+			sm: {
+				prefix: "md-comp-button-small",
+				tokens: shapes("ButtonSmallTokens", corner("medium")),
+				fixed: { "half-height": px(20) }
+			},
+			md: {
+				prefix: "md-comp-button-medium",
+				tokens: shapes("ButtonMediumTokens", corner("large")),
+				fixed: { "half-height": px(28) }
+			},
+			lg: {
+				prefix: "md-comp-button-large",
+				tokens: shapes("ButtonLargeTokens", corner("extra-large")),
+				fixed: { "half-height": px(48) }
+			},
+			xl: {
+				prefix: "md-comp-button-xlarge",
+				tokens: shapes("ButtonXLargeTokens", corner("extra-large")),
+				fixed: { "half-height": px(68) }
+			}
+		}
+	},
+	derived: { "container-shape-round-capped": "min(var(--_md-comp-button-container-shape-round), var(--_md-comp-button-half-height))" }
+});
+//#endregion
+export { buttonTokenSet };
+
+//# sourceMappingURL=button-tokens.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button-tokens.js","names":[],"sources":["../../../src/components/button/button-tokens.ts"],"sourcesContent":["import {\n  color,\n  corner,\n  defineComponentTokens,\n  elevation,\n  px,\n  type ComponentToken,\n  type TokenPaints,\n  type TokenValue,\n} from '../../tokens/component';\n\n/*\n * Button's component tokens, M3 Expressive's `md.comp.button.<variant>.*` and\n * `md.comp.button.<size>.*` names (checked against m3.material.io's token tables,\n * 2026-10-14), with Compose's defaults. `button-styles.ts` reads one private variable per\n * part; the root's `data-variant` and `data-size` pick the public names and defaults. The\n * split button's halves read the same colours (`buttonVariantClasses`), so a variant's\n * tokens restyle them too.\n *\n * A toggle's unselected colours default to M3's own values. Where M3 has no unselected\n * token for a variant (the elevated and outlined label, the outlined container), the\n * unselected part follows the resting one. Hover, focus, pressed and disabled values, the\n * pressed shape, outline widths and sizes stay classes.\n */\n\nconst container: TokenPaints = { property: 'background-color' };\nconst label: TokenPaints = { property: 'color' };\nconst selectedContainer: TokenPaints = { property: 'background-color', state: 'selected' };\nconst selectedLabel: TokenPaints = { property: 'color', state: 'selected' };\n// An unselected toggle has no attribute of its own, so the probe story marks its instance.\nconst unselectedContainer: TokenPaints = { property: 'background-color', state: 'unselected' };\nconst unselectedLabel: TokenPaints = { property: 'color', state: 'unselected' };\nconst roundShape: TokenPaints = { property: 'border-top-left-radius' };\n// A selected round toggle takes the square shape, so that's where the square token shows.\nconst squareShape: TokenPaints = { property: 'border-top-left-radius', state: 'selected' };\n\n/** The private parts every variant without its own token takes from its resting colours. */\nconst followsResting = {\n  'unselected-label-text-color': 'var(--_md-comp-button-label-text-color)',\n} as const;\n\n/** The six colour tokens of a variant with a full toggle set. */\nfunction toggleColors(\n  compose: string,\n  colors: {\n    container: TokenValue;\n    label: TokenValue;\n    selectedContainer: TokenValue;\n    selectedLabel: TokenValue;\n    unselectedContainer: TokenValue;\n    unselectedLabel: TokenValue;\n  },\n) {\n  return {\n    'container-color': {\n      value: colors.container,\n      description: 'The container.',\n      compose: `${compose}.ContainerColor`,\n      paints: container,\n    },\n    'label-text-color': {\n      value: colors.label,\n      description: 'The label and icon.',\n      compose: `${compose}.LabelTextColor`,\n      paints: label,\n    },\n    'selected-container-color': {\n      value: colors.selectedContainer,\n      description: 'The container of a selected toggle.',\n      compose: `${compose}.SelectedContainerColor`,\n      paints: selectedContainer,\n    },\n    'selected-label-text-color': {\n      value: colors.selectedLabel,\n      description: 'The label and icon of a selected toggle.',\n      compose: `${compose}.SelectedLabelTextColor`,\n      paints: selectedLabel,\n    },\n    'unselected-container-color': {\n      value: colors.unselectedContainer,\n      description: 'The container of an unselected toggle.',\n      compose: `${compose}.UnselectedContainerColor`,\n      paints: unselectedContainer,\n    },\n    'unselected-label-text-color': {\n      value: colors.unselectedLabel,\n      description: 'The label and icon of an unselected toggle.',\n      compose: `${compose}.UnselectedLabelTextColor`,\n      paints: unselectedLabel,\n    },\n  } satisfies Record<string, ComponentToken>;\n}\n\n/** A size's round and square corners; round is full, capped at half the height. */\nfunction shapes(compose: string, square: TokenValue) {\n  return {\n    'container-shape-round': {\n      value: corner('full'),\n      description: 'The round shape: full corners, at most half the height.',\n      compose: `${compose}.ContainerShapeRound`,\n      paints: roundShape,\n    },\n    'container-shape-square': {\n      value: square,\n      description: 'The square shape, which a selected round toggle also takes.',\n      compose: `${compose}.ContainerShapeSquare`,\n      paints: squareShape,\n    },\n  } satisfies Record<string, ComponentToken>;\n}\n\n/**\n * The tokens of {@link Button}: `--md-comp-button-<variant>-<part>` per variant and\n * `--md-comp-button-<size>-container-shape-<round|square>` per size.\n */\nexport const buttonTokenSet = defineComponentTokens({\n  name: 'md-comp-button',\n  tokens: {},\n  scopes: {\n    variant: {\n      filled: {\n        prefix: 'md-comp-button-filled',\n        tokens: toggleColors('FilledButtonTokens', {\n          container: color('primary'),\n          label: color('on-primary'),\n          selectedContainer: color('primary'),\n          selectedLabel: color('on-primary'),\n          unselectedContainer: color('surface-container'),\n          unselectedLabel: color('on-surface-variant'),\n        }),\n        fixed: { 'container-elevation': elevation(0), 'outline-color': 'transparent' },\n      },\n      elevated: {\n        prefix: 'md-comp-button-elevated',\n        tokens: {\n          'container-color': {\n            value: color('surface-container-low'),\n            description: 'The container.',\n            compose: 'ElevatedButtonTokens.ContainerColor',\n            paints: container,\n          },\n          'label-text-color': {\n            value: color('primary'),\n            description: 'The label and icon, and an unselected toggle’s.',\n            compose: 'ElevatedButtonTokens.LabelTextColor',\n            paints: label,\n          },\n          'container-elevation': {\n            value: elevation(1),\n            description: 'The shadow at rest.',\n            compose: 'ElevatedButtonTokens.ContainerElevation',\n            paints: { property: 'box-shadow' },\n          },\n          'selected-container-color': {\n            value: color('primary'),\n            description: 'The container of a selected toggle.',\n            compose: 'ElevatedButtonTokens.SelectedContainerColor',\n            paints: selectedContainer,\n          },\n          'selected-label-text-color': {\n            value: color('on-primary'),\n            description: 'The label and icon of a selected toggle.',\n            compose: 'ElevatedButtonTokens.SelectedLabelTextColor',\n            paints: selectedLabel,\n          },\n          'unselected-container-color': {\n            value: color('surface-container-low'),\n            description: 'The container of an unselected toggle.',\n            compose: 'ElevatedButtonTokens.UnselectedContainerColor',\n            paints: unselectedContainer,\n          },\n        },\n        fixed: { ...followsResting, 'outline-color': 'transparent' },\n      },\n      tonal: {\n        prefix: 'md-comp-button-tonal',\n        tokens: toggleColors('TonalButtonTokens', {\n          container: color('secondary-container'),\n          label: color('on-secondary-container'),\n          selectedContainer: color('secondary'),\n          selectedLabel: color('on-secondary'),\n          unselectedContainer: color('secondary-container'),\n          unselectedLabel: color('on-secondary-container'),\n        }),\n        fixed: { 'container-elevation': elevation(0), 'outline-color': 'transparent' },\n      },\n      outlined: {\n        prefix: 'md-comp-button-outlined',\n        tokens: {\n          'outline-color': {\n            value: color('outline-variant'),\n            description: 'The outline.',\n            compose: 'OutlinedButtonTokens.OutlineColor',\n            paints: { property: 'border-top-color' },\n          },\n          'label-text-color': {\n            value: color('on-surface-variant'),\n            description: 'The label and icon, and an unselected toggle’s.',\n            compose: 'OutlinedButtonTokens.LabelTextColor',\n            paints: label,\n          },\n          'selected-container-color': {\n            value: color('inverse-surface'),\n            description: 'The container of a selected toggle, which has no outline.',\n            compose: 'OutlinedButtonTokens.SelectedContainerColor',\n            paints: selectedContainer,\n          },\n          'selected-label-text-color': {\n            value: color('inverse-on-surface'),\n            description: 'The label and icon of a selected toggle.',\n            compose: 'OutlinedButtonTokens.SelectedLabelTextColor',\n            paints: selectedLabel,\n          },\n        },\n        fixed: {\n          ...followsResting,\n          'container-color': 'transparent',\n          'container-elevation': elevation(0),\n          'unselected-container-color': 'transparent',\n        },\n      },\n      text: {\n        prefix: 'md-comp-button-text',\n        tokens: {\n          'label-text-color': {\n            value: color('primary'),\n            description: 'The label and icon.',\n            compose: 'TextButtonTokens.LabelTextColor',\n            paints: label,\n          },\n        },\n        // Text buttons have no toggle form; the toggle parts only complete the scope.\n        fixed: {\n          ...followsResting,\n          'container-color': 'transparent',\n          'container-elevation': elevation(0),\n          'outline-color': 'transparent',\n          'selected-container-color': 'transparent',\n          'selected-label-text-color': 'var(--_md-comp-button-label-text-color)',\n          'unselected-container-color': 'transparent',\n        },\n      },\n    },\n    size: {\n      xs: {\n        prefix: 'md-comp-button-xsmall',\n        tokens: shapes('ButtonXSmallTokens', corner('medium')),\n        fixed: { 'half-height': px(16) },\n      },\n      sm: {\n        prefix: 'md-comp-button-small',\n        tokens: shapes('ButtonSmallTokens', corner('medium')),\n        fixed: { 'half-height': px(20) },\n      },\n      md: {\n        prefix: 'md-comp-button-medium',\n        tokens: shapes('ButtonMediumTokens', corner('large')),\n        fixed: { 'half-height': px(28) },\n      },\n      lg: {\n        prefix: 'md-comp-button-large',\n        tokens: shapes('ButtonLargeTokens', corner('extra-large')),\n        fixed: { 'half-height': px(48) },\n      },\n      xl: {\n        prefix: 'md-comp-button-xlarge',\n        tokens: shapes('ButtonXLargeTokens', corner('extra-large')),\n        fixed: { 'half-height': px(68) },\n      },\n    },\n  },\n  derived: {\n    // Full corners stop at half the height, so the press morph interpolates smoothly.\n    'container-shape-round-capped':\n      'min(var(--_md-comp-button-container-shape-round), var(--_md-comp-button-half-height))',\n  },\n});\n"],"mappings":"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"}

package/dist/components/button/connected-shapes.js

@@ -0,0 +1,152 @@
+//#region src/components/button/connected-shapes.ts
+const connectedShapeVariants = [
+	{
+		size: "xs",
+		connected: "leading",
+		shape: "round",
+		class: { root: "rounded-s-[min(var(--md-sys-shape-corner-full),16px)] rounded-e-corner-extra-small data-pressed:rounded-e-[2px] data-selected:not-data-pressed:not-data-disabled:rounded-e-[min(var(--md-sys-shape-corner-full),16px)]" }
+	},
+	{
+		size: "xs",
+		connected: "leading",
+		shape: "square",
+		class: { root: "rounded-corner-extra-small data-pressed:rounded-e-[2px] data-selected:not-data-pressed:not-data-disabled:rounded-[min(var(--md-sys-shape-corner-full),16px)]" }
+	},
+	{
+		size: "xs",
+		connected: "middle",
+		class: { root: "rounded-corner-extra-small data-pressed:rounded-[2px] data-selected:not-data-pressed:not-data-disabled:rounded-[min(var(--md-sys-shape-corner-full),16px)]" }
+	},
+	{
+		size: "xs",
+		connected: "trailing",
+		shape: "round",
+		class: { root: "rounded-e-[min(var(--md-sys-shape-corner-full),16px)] rounded-s-corner-extra-small data-pressed:rounded-s-[2px] data-selected:not-data-pressed:not-data-disabled:rounded-s-[min(var(--md-sys-shape-corner-full),16px)]" }
+	},
+	{
+		size: "xs",
+		connected: "trailing",
+		shape: "square",
+		class: { root: "rounded-corner-extra-small data-pressed:rounded-s-[2px] data-selected:not-data-pressed:not-data-disabled:rounded-[min(var(--md-sys-shape-corner-full),16px)]" }
+	},
+	{
+		size: "sm",
+		connected: "leading",
+		shape: "round",
+		class: { root: "rounded-s-[min(var(--md-sys-shape-corner-full),20px)] rounded-e-corner-small data-pressed:rounded-e-corner-extra-small data-selected:not-data-pressed:not-data-disabled:rounded-e-[min(var(--md-sys-shape-corner-full),20px)]" }
+	},
+	{
+		size: "sm",
+		connected: "leading",
+		shape: "square",
+		class: { root: "rounded-corner-small data-pressed:rounded-e-corner-extra-small data-selected:not-data-pressed:not-data-disabled:rounded-[min(var(--md-sys-shape-corner-full),20px)]" }
+	},
+	{
+		size: "sm",
+		connected: "middle",
+		class: { root: "rounded-corner-small data-pressed:rounded-corner-extra-small data-selected:not-data-pressed:not-data-disabled:rounded-[min(var(--md-sys-shape-corner-full),20px)]" }
+	},
+	{
+		size: "sm",
+		connected: "trailing",
+		shape: "round",
+		class: { root: "rounded-e-[min(var(--md-sys-shape-corner-full),20px)] rounded-s-corner-small data-pressed:rounded-s-corner-extra-small data-selected:not-data-pressed:not-data-disabled:rounded-s-[min(var(--md-sys-shape-corner-full),20px)]" }
+	},
+	{
+		size: "sm",
+		connected: "trailing",
+		shape: "square",
+		class: { root: "rounded-corner-small data-pressed:rounded-s-corner-extra-small data-selected:not-data-pressed:not-data-disabled:rounded-[min(var(--md-sys-shape-corner-full),20px)]" }
+	},
+	{
+		size: "md",
+		connected: "leading",
+		shape: "round",
+		class: { root: "rounded-s-[min(var(--md-sys-shape-corner-full),28px)] rounded-e-corner-small data-pressed:rounded-e-corner-extra-small data-selected:not-data-pressed:not-data-disabled:rounded-e-[min(var(--md-sys-shape-corner-full),28px)]" }
+	},
+	{
+		size: "md",
+		connected: "leading",
+		shape: "square",
+		class: { root: "rounded-corner-small data-pressed:rounded-e-corner-extra-small data-selected:not-data-pressed:not-data-disabled:rounded-[min(var(--md-sys-shape-corner-full),28px)]" }
+	},
+	{
+		size: "md",
+		connected: "middle",
+		class: { root: "rounded-corner-small data-pressed:rounded-corner-extra-small data-selected:not-data-pressed:not-data-disabled:rounded-[min(var(--md-sys-shape-corner-full),28px)]" }
+	},
+	{
+		size: "md",
+		connected: "trailing",
+		shape: "round",
+		class: { root: "rounded-e-[min(var(--md-sys-shape-corner-full),28px)] rounded-s-corner-small data-pressed:rounded-s-corner-extra-small data-selected:not-data-pressed:not-data-disabled:rounded-s-[min(var(--md-sys-shape-corner-full),28px)]" }
+	},
+	{
+		size: "md",
+		connected: "trailing",
+		shape: "square",
+		class: { root: "rounded-corner-small data-pressed:rounded-s-corner-extra-small data-selected:not-data-pressed:not-data-disabled:rounded-[min(var(--md-sys-shape-corner-full),28px)]" }
+	},
+	{
+		size: "lg",
+		connected: "leading",
+		shape: "round",
+		class: { root: "rounded-s-[min(var(--md-sys-shape-corner-full),48px)] rounded-e-corner-large data-pressed:rounded-e-corner-extra-small data-selected:not-data-pressed:not-data-disabled:rounded-e-[min(var(--md-sys-shape-corner-full),48px)]" }
+	},
+	{
+		size: "lg",
+		connected: "leading",
+		shape: "square",
+		class: { root: "rounded-corner-large data-pressed:rounded-e-corner-extra-small data-selected:not-data-pressed:not-data-disabled:rounded-[min(var(--md-sys-shape-corner-full),48px)]" }
+	},
+	{
+		size: "lg",
+		connected: "middle",
+		class: { root: "rounded-corner-large data-pressed:rounded-corner-extra-small data-selected:not-data-pressed:not-data-disabled:rounded-[min(var(--md-sys-shape-corner-full),48px)]" }
+	},
+	{
+		size: "lg",
+		connected: "trailing",
+		shape: "round",
+		class: { root: "rounded-e-[min(var(--md-sys-shape-corner-full),48px)] rounded-s-corner-large data-pressed:rounded-s-corner-extra-small data-selected:not-data-pressed:not-data-disabled:rounded-s-[min(var(--md-sys-shape-corner-full),48px)]" }
+	},
+	{
+		size: "lg",
+		connected: "trailing",
+		shape: "square",
+		class: { root: "rounded-corner-large data-pressed:rounded-s-corner-extra-small data-selected:not-data-pressed:not-data-disabled:rounded-[min(var(--md-sys-shape-corner-full),48px)]" }
+	},
+	{
+		size: "xl",
+		connected: "leading",
+		shape: "round",
+		class: { root: "rounded-s-[min(var(--md-sys-shape-corner-full),68px)] rounded-e-corner-large-increased data-pressed:rounded-e-corner-extra-small data-selected:not-data-pressed:not-data-disabled:rounded-e-[min(var(--md-sys-shape-corner-full),68px)]" }
+	},
+	{
+		size: "xl",
+		connected: "leading",
+		shape: "square",
+		class: { root: "rounded-corner-large-increased data-pressed:rounded-e-corner-extra-small data-selected:not-data-pressed:not-data-disabled:rounded-[min(var(--md-sys-shape-corner-full),68px)]" }
+	},
+	{
+		size: "xl",
+		connected: "middle",
+		class: { root: "rounded-corner-large-increased data-pressed:rounded-corner-extra-small data-selected:not-data-pressed:not-data-disabled:rounded-[min(var(--md-sys-shape-corner-full),68px)]" }
+	},
+	{
+		size: "xl",
+		connected: "trailing",
+		shape: "round",
+		class: { root: "rounded-e-[min(var(--md-sys-shape-corner-full),68px)] rounded-s-corner-large-increased data-pressed:rounded-s-corner-extra-small data-selected:not-data-pressed:not-data-disabled:rounded-s-[min(var(--md-sys-shape-corner-full),68px)]" }
+	},
+	{
+		size: "xl",
+		connected: "trailing",
+		shape: "square",
+		class: { root: "rounded-corner-large-increased data-pressed:rounded-s-corner-extra-small data-selected:not-data-pressed:not-data-disabled:rounded-[min(var(--md-sys-shape-corner-full),68px)]" }
+	}
+];
+//#endregion
+export { connectedShapeVariants };
+
+//# sourceMappingURL=connected-shapes.js.map

package/dist/components/button/connected-shapes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"connected-shapes.js","names":[],"sources":["../../../src/components/button/connected-shapes.ts"],"sourcesContent":["/*\n * Corners of a button or icon button in a connected button group, by size and position\n * (set per child by `ButtonGroup`). From the M3 Expressive button group specs\n * (2026-10-13):\n *\n * - Round groups: the outer corners are full, and the inner corners stay square-ish at\n *   4 / 8 / 8 / 16 / 20px (XS–XL).\n * - Square groups: every corner takes that size, the outer ones too.\n * - Pressed, an inner corner tightens to 4px (Compose's `PressedInnerCornerCornerSize`;\n *   the spec gives no value), and to 2px at XS, whose inner corners already rest at 4px,\n *   so a press always shows a change (2026-10-13). Selected, the whole button becomes\n *   fully round.\n *\n * Corners are logical (`s` / `e`), so they mirror in RTL. Every class is written out in\n * full: Tailwind finds classes by scanning for literal strings.\n */\nexport const connectedShapeVariants = [\n  {\n    size: 'xs',\n    connected: 'leading',\n    shape: 'round',\n    class: {\n      root: 'rounded-s-[min(var(--md-sys-shape-corner-full),16px)] rounded-e-corner-extra-small data-pressed:rounded-e-[2px] data-selected:not-data-pressed:not-data-disabled:rounded-e-[min(var(--md-sys-shape-corner-full),16px)]',\n    },\n  },\n  {\n    size: 'xs',\n    connected: 'leading',\n    shape: 'square',\n    class: {\n      root: 'rounded-corner-extra-small data-pressed:rounded-e-[2px] data-selected:not-data-pressed:not-data-disabled:rounded-[min(var(--md-sys-shape-corner-full),16px)]',\n    },\n  },\n  {\n    size: 'xs',\n    connected: 'middle',\n    class: {\n      root: 'rounded-corner-extra-small data-pressed:rounded-[2px] data-selected:not-data-pressed:not-data-disabled:rounded-[min(var(--md-sys-shape-corner-full),16px)]',\n    },\n  },\n  {\n    size: 'xs',\n    connected: 'trailing',\n    shape: 'round',\n    class: {\n      root: 'rounded-e-[min(var(--md-sys-shape-corner-full),16px)] rounded-s-corner-extra-small data-pressed:rounded-s-[2px] data-selected:not-data-pressed:not-data-disabled:rounded-s-[min(var(--md-sys-shape-corner-full),16px)]',\n    },\n  },\n  {\n    size: 'xs',\n    connected: 'trailing',\n    shape: 'square',\n    class: {\n      root: 'rounded-corner-extra-small data-pressed:rounded-s-[2px] data-selected:not-data-pressed:not-data-disabled:rounded-[min(var(--md-sys-shape-corner-full),16px)]',\n    },\n  },\n  {\n    size: 'sm',\n    connected: 'leading',\n    shape: 'round',\n    class: {\n      root: 'rounded-s-[min(var(--md-sys-shape-corner-full),20px)] rounded-e-corner-small data-pressed:rounded-e-corner-extra-small data-selected:not-data-pressed:not-data-disabled:rounded-e-[min(var(--md-sys-shape-corner-full),20px)]',\n    },\n  },\n  {\n    size: 'sm',\n    connected: 'leading',\n    shape: 'square',\n    class: {\n      root: 'rounded-corner-small data-pressed:rounded-e-corner-extra-small data-selected:not-data-pressed:not-data-disabled:rounded-[min(var(--md-sys-shape-corner-full),20px)]',\n    },\n  },\n  {\n    size: 'sm',\n    connected: 'middle',\n    class: {\n      root: 'rounded-corner-small data-pressed:rounded-corner-extra-small data-selected:not-data-pressed:not-data-disabled:rounded-[min(var(--md-sys-shape-corner-full),20px)]',\n    },\n  },\n  {\n    size: 'sm',\n    connected: 'trailing',\n    shape: 'round',\n    class: {\n      root: 'rounded-e-[min(var(--md-sys-shape-corner-full),20px)] rounded-s-corner-small data-pressed:rounded-s-corner-extra-small data-selected:not-data-pressed:not-data-disabled:rounded-s-[min(var(--md-sys-shape-corner-full),20px)]',\n    },\n  },\n  {\n    size: 'sm',\n    connected: 'trailing',\n    shape: 'square',\n    class: {\n      root: 'rounded-corner-small data-pressed:rounded-s-corner-extra-small data-selected:not-data-pressed:not-data-disabled:rounded-[min(var(--md-sys-shape-corner-full),20px)]',\n    },\n  },\n  {\n    size: 'md',\n    connected: 'leading',\n    shape: 'round',\n    class: {\n      root: 'rounded-s-[min(var(--md-sys-shape-corner-full),28px)] rounded-e-corner-small data-pressed:rounded-e-corner-extra-small data-selected:not-data-pressed:not-data-disabled:rounded-e-[min(var(--md-sys-shape-corner-full),28px)]',\n    },\n  },\n  {\n    size: 'md',\n    connected: 'leading',\n    shape: 'square',\n    class: {\n      root: 'rounded-corner-small data-pressed:rounded-e-corner-extra-small data-selected:not-data-pressed:not-data-disabled:rounded-[min(var(--md-sys-shape-corner-full),28px)]',\n    },\n  },\n  {\n    size: 'md',\n    connected: 'middle',\n    class: {\n      root: 'rounded-corner-small data-pressed:rounded-corner-extra-small data-selected:not-data-pressed:not-data-disabled:rounded-[min(var(--md-sys-shape-corner-full),28px)]',\n    },\n  },\n  {\n    size: 'md',\n    connected: 'trailing',\n    shape: 'round',\n    class: {\n      root: 'rounded-e-[min(var(--md-sys-shape-corner-full),28px)] rounded-s-corner-small data-pressed:rounded-s-corner-extra-small data-selected:not-data-pressed:not-data-disabled:rounded-s-[min(var(--md-sys-shape-corner-full),28px)]',\n    },\n  },\n  {\n    size: 'md',\n    connected: 'trailing',\n    shape: 'square',\n    class: {\n      root: 'rounded-corner-small data-pressed:rounded-s-corner-extra-small data-selected:not-data-pressed:not-data-disabled:rounded-[min(var(--md-sys-shape-corner-full),28px)]',\n    },\n  },\n  {\n    size: 'lg',\n    connected: 'leading',\n    shape: 'round',\n    class: {\n      root: 'rounded-s-[min(var(--md-sys-shape-corner-full),48px)] rounded-e-corner-large data-pressed:rounded-e-corner-extra-small data-selected:not-data-pressed:not-data-disabled:rounded-e-[min(var(--md-sys-shape-corner-full),48px)]',\n    },\n  },\n  {\n    size: 'lg',\n    connected: 'leading',\n    shape: 'square',\n    class: {\n      root: 'rounded-corner-large data-pressed:rounded-e-corner-extra-small data-selected:not-data-pressed:not-data-disabled:rounded-[min(var(--md-sys-shape-corner-full),48px)]',\n    },\n  },\n  {\n    size: 'lg',\n    connected: 'middle',\n    class: {\n      root: 'rounded-corner-large data-pressed:rounded-corner-extra-small data-selected:not-data-pressed:not-data-disabled:rounded-[min(var(--md-sys-shape-corner-full),48px)]',\n    },\n  },\n  {\n    size: 'lg',\n    connected: 'trailing',\n    shape: 'round',\n    class: {\n      root: 'rounded-e-[min(var(--md-sys-shape-corner-full),48px)] rounded-s-corner-large data-pressed:rounded-s-corner-extra-small data-selected:not-data-pressed:not-data-disabled:rounded-s-[min(var(--md-sys-shape-corner-full),48px)]',\n    },\n  },\n  {\n    size: 'lg',\n    connected: 'trailing',\n    shape: 'square',\n    class: {\n      root: 'rounded-corner-large data-pressed:rounded-s-corner-extra-small data-selected:not-data-pressed:not-data-disabled:rounded-[min(var(--md-sys-shape-corner-full),48px)]',\n    },\n  },\n  {\n    size: 'xl',\n    connected: 'leading',\n    shape: 'round',\n    class: {\n      root: 'rounded-s-[min(var(--md-sys-shape-corner-full),68px)] rounded-e-corner-large-increased data-pressed:rounded-e-corner-extra-small data-selected:not-data-pressed:not-data-disabled:rounded-e-[min(var(--md-sys-shape-corner-full),68px)]',\n    },\n  },\n  {\n    size: 'xl',\n    connected: 'leading',\n    shape: 'square',\n    class: {\n      root: 'rounded-corner-large-increased data-pressed:rounded-e-corner-extra-small data-selected:not-data-pressed:not-data-disabled:rounded-[min(var(--md-sys-shape-corner-full),68px)]',\n    },\n  },\n  {\n    size: 'xl',\n    connected: 'middle',\n    class: {\n      root: 'rounded-corner-large-increased data-pressed:rounded-corner-extra-small data-selected:not-data-pressed:not-data-disabled:rounded-[min(var(--md-sys-shape-corner-full),68px)]',\n    },\n  },\n  {\n    size: 'xl',\n    connected: 'trailing',\n    shape: 'round',\n    class: {\n      root: 'rounded-e-[min(var(--md-sys-shape-corner-full),68px)] rounded-s-corner-large-increased data-pressed:rounded-s-corner-extra-small data-selected:not-data-pressed:not-data-disabled:rounded-s-[min(var(--md-sys-shape-corner-full),68px)]',\n    },\n  },\n  {\n    size: 'xl',\n    connected: 'trailing',\n    shape: 'square',\n    class: {\n      root: 'rounded-corner-large-increased data-pressed:rounded-s-corner-extra-small data-selected:not-data-pressed:not-data-disabled:rounded-[min(var(--md-sys-shape-corner-full),68px)]',\n    },\n  },\n] as const;\n"],"mappings":";AAgBA,MAAa,yBAAyB;CACpC;EACE,MAAM;EACN,WAAW;EACX,OAAO;EACP,OAAO,EACL,MAAM,yNACR;CACF;CACA;EACE,MAAM;EACN,WAAW;EACX,OAAO;EACP,OAAO,EACL,MAAM,+JACR;CACF;CACA;EACE,MAAM;EACN,WAAW;EACX,OAAO,EACL,MAAM,6JACR;CACF;CACA;EACE,MAAM;EACN,WAAW;EACX,OAAO;EACP,OAAO,EACL,MAAM,yNACR;CACF;CACA;EACE,MAAM;EACN,WAAW;EACX,OAAO;EACP,OAAO,EACL,MAAM,+JACR;CACF;CACA;EACE,MAAM;EACN,WAAW;EACX,OAAO;EACP,OAAO,EACL,MAAM,gOACR;CACF;CACA;EACE,MAAM;EACN,WAAW;EACX,OAAO;EACP,OAAO,EACL,MAAM,sKACR;CACF;CACA;EACE,MAAM;EACN,WAAW;EACX,OAAO,EACL,MAAM,oKACR;CACF;CACA;EACE,MAAM;EACN,WAAW;EACX,OAAO;EACP,OAAO,EACL,MAAM,gOACR;CACF;CACA;EACE,MAAM;EACN,WAAW;EACX,OAAO;EACP,OAAO,EACL,MAAM,sKACR;CACF;CACA;EACE,MAAM;EACN,WAAW;EACX,OAAO;EACP,OAAO,EACL,MAAM,gOACR;CACF;CACA;EACE,MAAM;EACN,WAAW;EACX,OAAO;EACP,OAAO,EACL,MAAM,sKACR;CACF;CACA;EACE,MAAM;EACN,WAAW;EACX,OAAO,EACL,MAAM,oKACR;CACF;CACA;EACE,MAAM;EACN,WAAW;EACX,OAAO;EACP,OAAO,EACL,MAAM,gOACR;CACF;CACA;EACE,MAAM;EACN,WAAW;EACX,OAAO;EACP,OAAO,EACL,MAAM,sKACR;CACF;CACA;EACE,MAAM;EACN,WAAW;EACX,OAAO;EACP,OAAO,EACL,MAAM,gOACR;CACF;CACA;EACE,MAAM;EACN,WAAW;EACX,OAAO;EACP,OAAO,EACL,MAAM,sKACR;CACF;CACA;EACE,MAAM;EACN,WAAW;EACX,OAAO,EACL,MAAM,oKACR;CACF;CACA;EACE,MAAM;EACN,WAAW;EACX,OAAO;EACP,OAAO,EACL,MAAM,gOACR;CACF;CACA;EACE,MAAM;EACN,WAAW;EACX,OAAO;EACP,OAAO,EACL,MAAM,sKACR;CACF;CACA;EACE,MAAM;EACN,WAAW;EACX,OAAO;EACP,OAAO,EACL,MAAM,0OACR;CACF;CACA;EACE,MAAM;EACN,WAAW;EACX,OAAO;EACP,OAAO,EACL,MAAM,gLACR;CACF;CACA;EACE,MAAM;EACN,WAAW;EACX,OAAO,EACL,MAAM,8KACR;CACF;CACA;EACE,MAAM;EACN,WAAW;EACX,OAAO;EACP,OAAO,EACL,MAAM,0OACR;CACF;CACA;EACE,MAAM;EACN,WAAW;EACX,OAAO;EACP,OAAO,EACL,MAAM,gLACR;CACF;AACF"}

package/dist/components/card/Card.d.ts

@@ -0,0 +1,60 @@
+import { ButtonBaseDivActionProps, ButtonBaseLinkProps } from "../../primitives/ButtonBase.js";
+import { CardVariant } from "./card-styles.js";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/card/Card.d.ts
+interface CardOwnProps {
+  /** The M3 style: filled, elevated or outlined. @default "filled" */
+  variant?: CardVariant;
+  /**
+   * The card is being dragged (picked up to move it): M3 raises it (filled and outlined
+   * to level 3, elevated to 4) and, on an interactive card, shows the dragged state layer.
+   * Set it from your drag and drop code; it sets `data-dragged`.
+   * @default false
+   */
+  dragged?: boolean;
+  /** Classes for the card, merged with its own; consumer classes win. */
+  className?: string;
+  /** The card's content: its media, headline, text and actions. */
+  children?: ReactNode;
+}
+/**
+ * Button props that don't apply to a card (cards aren't toggles or menu triggers), and the
+ * ones a card describes itself.
+ */
+type NotForCards = 'toggle' | 'preventFocusOnPress' | 'className' | 'children';
+/** A container card. */
+export interface CardStaticProps extends CardOwnProps, Omit<ComponentPropsWithRef<'div'>, 'className' | 'children'> {
+  /** Makes the card a link (`<a>`). It must not contain other buttons or links then. */
+  href?: undefined;
+  /** Makes the card pressable (`<div role="button">`). It must not contain other buttons or links then. */
+  onPress?: undefined;
+  /** Disables a pressable or link card. A container card can't be disabled. @default false */
+  disabled?: undefined;
+}
+/**
+ * A pressable card, rendered as `<div role="button">` because cards hold headings, media
+ * and blocks that a `<button>` may not. It is named by its text, in reading order, as a link
+ * card is: keep the headline first and the text short. Use `aria-label` only for a card that
+ * shows no text. It must not contain other buttons or links.
+ */
+export interface CardActionProps extends CardOwnProps, Omit<ButtonBaseDivActionProps, 'as' | 'onPress' | NotForCards> {
+  onPress: NonNullable<ButtonBaseDivActionProps['onPress']>;
+}
+/** A card that is a link, named by its text. It must not contain other buttons or links. */
+export interface CardLinkProps extends CardOwnProps, Omit<ButtonBaseLinkProps, NotForCards> {}
+export type CardProps = CardStaticProps | CardActionProps | CardLinkProps;
+/**
+ * M3 card: filled, elevated or outlined. Static by default; with `onPress` or `href` the
+ * whole card is pressable, with M3 state layers, hover elevation and a focus ring.
+ * Content is clipped to the 12px corners; add `overflow-visible` to turn that off.
+ *
+ * @example
+ * <Card variant="elevated" className="p-4">…</Card>
+ * <Card href="/trips/kyoto">
+ *   <img src={photo} alt="" />
+ *   <h3 className="p-4 text-title-medium">Kyoto</h3>
+ * </Card>
+ */
+export declare function Card(props: CardProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=Card.d.ts.map

package/dist/components/card/Card.js

@@ -0,0 +1,69 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { ButtonBase } from "../../primitives/ButtonBase.js";
+import { mergeDataTokens } from "../../utils/merge-data-tokens.js";
+import { cardStyles } from "./card-styles.js";
+import { useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useObjectRef } from "react-aria";
+//#region src/components/card/Card.tsx
+const FOCUSABLE = "a[href], button, input, select, textarea, [tabindex]:not([tabindex=\"-1\"])";
+/** Warns in development when an interactive card contains its own interactive content. */
+function useNoNestedInteractive(ref, interactive) {
+	useEffect(() => {
+		if (process.env.NODE_ENV === "production" || !interactive) return;
+		const nested = ref.current?.querySelector(FOCUSABLE);
+		if (nested) console.warn("[@windmorph/react] A pressable or link Card must not contain buttons, links or form fields; use a static Card with its own actions instead.", nested);
+	});
+}
+/**
+* M3 card: filled, elevated or outlined. Static by default; with `onPress` or `href` the
+* whole card is pressable, with M3 state layers, hover elevation and a focus ring.
+* Content is clipped to the 12px corners; add `overflow-visible` to turn that off.
+*
+* @example
+* <Card variant="elevated" className="p-4">…</Card>
+* <Card href="/trips/kyoto">
+*   <img src={photo} alt="" />
+*   <h3 className="p-4 text-title-medium">Kyoto</h3>
+* </Card>
+*/
+function Card(props) {
+	const isLink = props.href !== void 0;
+	const isAction = !isLink && props.onPress !== void 0;
+	const interactive = isLink || isAction;
+	const { variant, dragged = false, className, ref, ...rest } = props;
+	const domRef = useObjectRef(ref);
+	useNoNestedInteractive(domRef, interactive);
+	const classes = cn(cardStyles({
+		variant,
+		interactive
+	}), className);
+	const tokenAttributes = {
+		"data-tokens": mergeDataTokens("md-comp-card", rest),
+		"data-variant": variant ?? "filled"
+	};
+	if (!interactive) {
+		const { href, onPress, disabled, ...div } = rest;
+		return /* @__PURE__ */ jsx("div", {
+			...div,
+			...tokenAttributes,
+			ref: domRef,
+			"data-dragged": dragged || void 0,
+			className: classes
+		});
+	}
+	const baseProps = {
+		...rest,
+		...tokenAttributes,
+		...isAction ? { as: "div" } : {},
+		dragged,
+		ref: domRef,
+		className: classes
+	};
+	return /* @__PURE__ */ jsx(ButtonBase, { ...baseProps });
+}
+//#endregion
+export { Card };
+
+//# sourceMappingURL=Card.js.map

package/dist/components/card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","names":[],"sources":["../../../src/components/card/Card.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useEffect,\n  type ComponentPropsWithRef,\n  type ReactNode,\n  type Ref,\n  type RefObject,\n} from 'react';\nimport { useObjectRef } from 'react-aria';\nimport {\n  ButtonBase,\n  type ButtonBaseDivActionProps,\n  type ButtonBaseLinkProps,\n  type ButtonBaseProps,\n} from '../../primitives/ButtonBase';\nimport { cn } from '../../utils/cn';\nimport { cardStyles, type CardVariant } from './card-styles';\nimport { mergeDataTokens } from '../../utils/merge-data-tokens';\n\ninterface CardOwnProps {\n  /** The M3 style: filled, elevated or outlined. @default \"filled\" */\n  variant?: CardVariant;\n  /**\n   * The card is being dragged (picked up to move it): M3 raises it (filled and outlined\n   * to level 3, elevated to 4) and, on an interactive card, shows the dragged state layer.\n   * Set it from your drag and drop code; it sets `data-dragged`.\n   * @default false\n   */\n  dragged?: boolean;\n  /** Classes for the card, merged with its own; consumer classes win. */\n  className?: string;\n  /** The card's content: its media, headline, text and actions. */\n  children?: ReactNode;\n}\n\n/**\n * Button props that don't apply to a card (cards aren't toggles or menu triggers), and the\n * ones a card describes itself.\n */\ntype NotForCards = 'toggle' | 'preventFocusOnPress' | 'className' | 'children';\n\n/** A container card. */\nexport interface CardStaticProps\n  extends CardOwnProps, Omit<ComponentPropsWithRef<'div'>, 'className' | 'children'> {\n  /** Makes the card a link (`<a>`). It must not contain other buttons or links then. */\n  href?: undefined;\n  /** Makes the card pressable (`<div role=\"button\">`). It must not contain other buttons or links then. */\n  onPress?: undefined;\n  /** Disables a pressable or link card. A container card can't be disabled. @default false */\n  disabled?: undefined;\n}\n\n/**\n * A pressable card, rendered as `<div role=\"button\">` because cards hold headings, media\n * and blocks that a `<button>` may not. It is named by its text, in reading order, as a link\n * card is: keep the headline first and the text short. Use `aria-label` only for a card that\n * shows no text. It must not contain other buttons or links.\n */\nexport interface CardActionProps\n  extends CardOwnProps, Omit<ButtonBaseDivActionProps, 'as' | 'onPress' | NotForCards> {\n  onPress: NonNullable<ButtonBaseDivActionProps['onPress']>;\n}\n\n/** A card that is a link, named by its text. It must not contain other buttons or links. */\nexport interface CardLinkProps extends CardOwnProps, Omit<ButtonBaseLinkProps, NotForCards> {}\n\nexport type CardProps = CardStaticProps | CardActionProps | CardLinkProps;\n\nconst FOCUSABLE = 'a[href], button, input, select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n\n/** Warns in development when an interactive card contains its own interactive content. */\nfunction useNoNestedInteractive(ref: RefObject<HTMLElement | null>, interactive: boolean) {\n  useEffect(() => {\n    if (process.env.NODE_ENV === 'production' || !interactive) return;\n    const nested = ref.current?.querySelector(FOCUSABLE);\n    if (nested) {\n      console.warn(\n        '[@windmorph/react] A pressable or link Card must not contain buttons, links or form fields; ' +\n          'use a static Card with its own actions instead.',\n        nested,\n      );\n    }\n  });\n}\n\n/**\n * M3 card: filled, elevated or outlined. Static by default; with `onPress` or `href` the\n * whole card is pressable, with M3 state layers, hover elevation and a focus ring.\n * Content is clipped to the 12px corners; add `overflow-visible` to turn that off.\n *\n * @example\n * <Card variant=\"elevated\" className=\"p-4\">…</Card>\n * <Card href=\"/trips/kyoto\">\n *   <img src={photo} alt=\"\" />\n *   <h3 className=\"p-4 text-title-medium\">Kyoto</h3>\n * </Card>\n */\nexport function Card(props: CardProps) {\n  const isLink = props.href !== undefined;\n  const isAction = !isLink && props.onPress !== undefined;\n  const interactive = isLink || isAction;\n  const { variant, dragged = false, className, ref, ...rest } = props;\n  const domRef = useObjectRef(ref as Ref<HTMLElement>);\n  useNoNestedInteractive(domRef, interactive);\n\n  const classes = cn(cardStyles({ variant, interactive }), className);\n  // The component tokens' hooks (card-tokens.ts), also public styling hooks for apps.\n  const tokenAttributes = {\n    'data-tokens': mergeDataTokens('md-comp-card', rest),\n    'data-variant': variant ?? 'filled',\n  };\n\n  if (!interactive) {\n    const { href, onPress, disabled, ...div } = rest as CardStaticProps;\n    return (\n      <div\n        {...div}\n        {...tokenAttributes}\n        ref={domRef as Ref<HTMLDivElement>}\n        data-dragged={dragged || undefined}\n        className={classes}\n      />\n    );\n  }\n\n  // Destructuring a union merges its members (see Button); `rest` holds one member's props.\n  const baseProps = {\n    ...rest,\n    ...tokenAttributes,\n    ...(isAction ? { as: 'div' as const } : {}),\n    dragged,\n    ref: domRef,\n    className: classes,\n  } as ButtonBaseProps;\n  return <ButtonBase {...baseProps} />;\n}\n"],"mappings":";;;;;;;;;AAqEA,MAAM,YAAY;;AAGlB,SAAS,uBAAuB,KAAoC,aAAsB;CACxF,gBAAgB;EACd,IAAI,QAAQ,IAAI,aAAa,gBAAgB,CAAC,aAAa;EAC3D,MAAM,SAAS,IAAI,SAAS,cAAc,SAAS;EACnD,IAAI,QACF,QAAQ,KACN,+IAEA,MACF;CAEJ,CAAC;AACH;;;;;;;;;;;;;AAcA,SAAgB,KAAK,OAAkB;CACrC,MAAM,SAAS,MAAM,SAAS,KAAA;CAC9B,MAAM,WAAW,CAAC,UAAU,MAAM,YAAY,KAAA;CAC9C,MAAM,cAAc,UAAU;CAC9B,MAAM,EAAE,SAAS,UAAU,OAAO,WAAW,KAAK,GAAG,SAAS;CAC9D,MAAM,SAAS,aAAa,GAAuB;CACnD,uBAAuB,QAAQ,WAAW;CAE1C,MAAM,UAAU,GAAG,WAAW;EAAE;EAAS;CAAY,CAAC,GAAG,SAAS;CAElE,MAAM,kBAAkB;EACtB,eAAe,gBAAgB,gBAAgB,IAAI;EACnD,gBAAgB,WAAW;CAC7B;CAEA,IAAI,CAAC,aAAa;EAChB,MAAM,EAAE,MAAM,SAAS,UAAU,GAAG,QAAQ;EAC5C,OACE,oBAAC,OAAD;GACE,GAAI;GACJ,GAAI;GACJ,KAAK;GACL,gBAAc,WAAW,KAAA;GACzB,WAAW;EACZ,CAAA;CAEL;CAGA,MAAM,YAAY;EAChB,GAAG;EACH,GAAG;EACH,GAAI,WAAW,EAAE,IAAI,MAAe,IAAI,CAAC;EACzC;EACA,KAAK;EACL,WAAW;CACb;CACA,OAAO,oBAAC,YAAD,EAAY,GAAI,UAAY,CAAA;AACrC"}

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

@@ -0,0 +1,42 @@
+import { VariantProps } from "../../utils/tv.js";
+//#region src/components/card/card-styles.d.ts
+/** Variant definitions for {@link Card}; extend them to add variants. */
+export declare const cardStyles: import("tailwind-variants").TVReturnType<{
+  variant: {
+    filled: "data-dragged:shadow-elevation-3";
+    elevated: "data-dragged:shadow-elevation-4";
+    outlined: "border border-solid border-[color:var(--_md-comp-card-outline-color)] data-dragged:shadow-elevation-3";
+  };
+  interactive: {
+    true: string[];
+    false: "";
+  };
+}, undefined, string[], {
+  variant: {
+    filled: "data-dragged:shadow-elevation-3";
+    elevated: "data-dragged:shadow-elevation-4";
+    outlined: "border border-solid border-[color:var(--_md-comp-card-outline-color)] data-dragged:shadow-elevation-3";
+  };
+  interactive: {
+    true: string[];
+    false: "";
+  };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+  variant: {
+    filled: "data-dragged:shadow-elevation-3";
+    elevated: "data-dragged:shadow-elevation-4";
+    outlined: "border border-solid border-[color:var(--_md-comp-card-outline-color)] data-dragged:shadow-elevation-3";
+  };
+  interactive: {
+    true: string[];
+    false: "";
+  };
+}, undefined>>;
+/**
+ * The variants of {@link cardStyles}, 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 CardStyleProps = VariantProps<typeof cardStyles>;
+export type CardVariant = NonNullable<CardStyleProps['variant']>;
+//#endregion
+//# sourceMappingURL=card-styles.d.ts.map