@windmorph/react 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,360 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/chip/chip-styles.ts
+/** Transitions: padding on fast spatial, colours and elevation on fast effects. */
+const motion = [
+	"[--m3-transition-property:padding-inline-start,background-color,color,box-shadow,border-color]",
+	"[--m3-transition-duration:var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-effects-fast-duration),var(--md-sys-motion-spring-effects-fast-duration),var(--md-sys-motion-spring-effects-fast-duration),var(--md-sys-motion-spring-effects-fast-duration)]",
+	"[--m3-transition-easing:var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-effects-fast-easing)]",
+	"[--m3-transition-delay:0s,0s,0s,0s,0s]"
+];
+/** A container of buttons shows the state layer of whichever one is interacted with. */
+const containerStates = [
+	"min-w-[88px] cursor-default",
+	"has-data-hovered:[--m3-state-opacity:var(--md-sys-state-hover-state-layer-opacity)]",
+	"has-data-focus-visible:[--m3-state-opacity:var(--md-sys-state-focus-state-layer-opacity)]",
+	"has-data-pressed:[--m3-state-opacity:var(--md-sys-state-pressed-state-layer-opacity)]"
+];
+/** Variant definitions for the chips; extend them to add variants. */
+const chipStyles = tv({
+	slots: {
+		root: [
+			"group/chip inline-flex h-fit min-h-[var(--m3-chip-height)] max-w-full shrink-0 cursor-pointer items-center align-middle",
+			"[--m3-chip-height:max(24px,calc(32px+var(--md-sys-density,0)*4px))]",
+			"[--m3-chip-slot:min(24px,calc(var(--m3-chip-height)-2*var(--m3-chip-border)))]",
+			"font-plain text-label-large whitespace-nowrap select-none",
+			"state-layer focus-ring",
+			...motion,
+			"data-disabled:cursor-default data-disabled:text-on-surface/38"
+		],
+		content: "relative inline-flex min-w-0 items-center",
+		leading: "inline-flex shrink-0 items-center justify-center [&>svg]:size-[18px] group-data-disabled/chip:text-on-surface/38",
+		label: "min-w-0 truncate",
+		trailing: "inline-flex size-[18px] shrink-0 items-center justify-center [&>svg]:size-full group-data-disabled/chip:text-on-surface/38",
+		check: [
+			"grid grid-cols-[0fr] opacity-0 in-data-selected:grid-cols-[1fr] in-data-selected:opacity-100",
+			"[transition-property:grid-template-columns,opacity]",
+			"[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-effects-fast-duration)]",
+			"[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-effects-fast-easing)]"
+		],
+		checkInner: "flex min-w-0 overflow-hidden",
+		checkIcon: "inline-flex size-[18px] shrink-0 me-[8px] [&>svg]:size-full",
+		avatar: "size-[var(--m3-chip-slot)] shrink-0 overflow-hidden rounded-corner-medium [&>img]:size-full [&>img]:object-cover group-data-disabled/chip:opacity-38",
+		remove: [
+			"relative ms-[calc(8px-(var(--m3-chip-slot)-18px)/2)] -me-[calc((var(--m3-chip-slot)-18px)/2)] inline-flex size-[var(--m3-chip-slot)] shrink-0 cursor-pointer items-center justify-center rounded-full",
+			"state-layer [&>svg]:size-[18px]",
+			"data-disabled:cursor-default"
+		],
+		primary: "inline-flex min-w-0 flex-1 cursor-pointer items-center self-stretch rounded-[inherit] focus-ring data-disabled:cursor-default"
+	},
+	variants: {
+		kind: {
+			assist: {
+				root: ["rounded-[var(--_md-comp-assist-chip-container-shape)]", "text-[color:var(--_md-comp-assist-chip-label-text-color)]"],
+				leading: "text-[color:var(--_md-comp-assist-chip-with-icon-icon-color)]"
+			},
+			suggestion: {
+				root: ["rounded-[var(--_md-comp-suggestion-chip-container-shape)]", "text-[color:var(--_md-comp-suggestion-chip-label-text-color)]"],
+				leading: "text-[color:var(--_md-comp-suggestion-chip-with-leading-icon-leading-icon-color)]"
+			},
+			filter: {
+				root: [
+					"rounded-[var(--_md-comp-filter-chip-container-shape)]",
+					"text-[color:var(--_md-comp-filter-chip-unselected-label-text-color)]",
+					"data-selected:text-[color:var(--_md-comp-filter-chip-selected-label-text-color)]",
+					"data-selected:data-disabled:bg-on-surface/12 data-selected:data-disabled:text-on-surface/38"
+				],
+				leading: [
+					"text-[color:var(--_md-comp-filter-chip-with-leading-icon-unselected-leading-icon-color)]",
+					"group-data-selected/chip:text-on-secondary-container",
+					"group-data-disabled/chip:group-data-selected/chip:text-on-surface/38"
+				]
+			},
+			input: {
+				root: [
+					"cursor-default rounded-[var(--_md-comp-input-chip-container-shape)]",
+					"text-[color:var(--_md-comp-input-chip-unselected-label-text-color)]",
+					"data-selected:bg-[var(--_md-comp-input-chip-selected-container-color)]",
+					"data-selected:text-[color:var(--_md-comp-input-chip-selected-label-text-color)]",
+					"data-selected:data-disabled:bg-on-surface/12 data-selected:data-disabled:text-on-surface/38"
+				],
+				leading: "group-data-selected/chip:text-primary group-data-disabled/chip:group-data-selected/chip:text-on-surface/38"
+			}
+		},
+		/**
+		* How the chip is built: one element (`none`); a container of two buttons, its main
+		* part and the remove button (`two`); or a remove-only input chip, whose one focus stop
+		* is the remove button, so its focus ring circles the whole chip (`removeOnly`).
+		*/
+		split: {
+			none: {},
+			two: {
+				root: containerStates,
+				remove: "focus-ring"
+			},
+			removeOnly: {
+				root: [
+					...containerStates,
+					"has-data-focus-visible:[outline:var(--md-sys-focus-indicator-thickness)_solid_var(--md-sys-color-secondary)]",
+					"has-data-focus-visible:[outline-offset:var(--md-sys-focus-indicator-offset)]"
+				],
+				remove: "outline-none",
+				primary: "cursor-default"
+			}
+		},
+		elevated: {
+			true: { root: [
+				"[--m3-chip-border:0px] shadow-elevation-1",
+				"data-hovered:not-data-pressed:not-data-focus-visible:not-data-dragged:shadow-elevation-2",
+				"data-dragged:shadow-elevation-4 data-disabled:bg-on-surface/12 data-disabled:shadow-elevation-0",
+				"forced-colors:[--m3-chip-border:1px] forced-colors:border forced-colors:border-solid forced-colors:border-[CanvasText]"
+			] },
+			false: { root: "[--m3-chip-border:1px] border border-solid bg-transparent data-dragged:shadow-elevation-4 data-disabled:border-on-surface/12" }
+		},
+		/** `strong` draws the border in `outline` for 3:1 contrast (M3's accessibility guidance). */
+		outline: {
+			standard: {},
+			strong: {}
+		},
+		leading: {
+			none: {},
+			icon: {},
+			avatar: {}
+		},
+		trailing: {
+			true: {},
+			false: {}
+		}
+	},
+	compoundVariants: [
+		{
+			kind: "assist",
+			elevated: false,
+			outline: "standard",
+			class: { root: "border-[color:var(--_md-comp-assist-chip-flat-outline-color)]" }
+		},
+		{
+			kind: "suggestion",
+			elevated: false,
+			outline: "standard",
+			class: { root: "border-[color:var(--_md-comp-suggestion-chip-flat-outline-color)]" }
+		},
+		{
+			kind: "filter",
+			elevated: false,
+			outline: "standard",
+			class: { root: "border-[color:var(--_md-comp-filter-chip-flat-unselected-outline-color)]" }
+		},
+		{
+			kind: "input",
+			elevated: false,
+			outline: "standard",
+			class: { root: "border-[color:var(--_md-comp-input-chip-unselected-outline-color)]" }
+		},
+		{
+			elevated: false,
+			outline: "strong",
+			class: { root: "border-outline" }
+		},
+		{
+			kind: "assist",
+			elevated: true,
+			class: { root: "bg-[var(--_md-comp-assist-chip-elevated-container-color)]" }
+		},
+		{
+			kind: "suggestion",
+			elevated: true,
+			class: { root: "bg-[var(--_md-comp-suggestion-chip-elevated-container-color)]" }
+		},
+		{
+			kind: ["filter", "input"],
+			elevated: false,
+			class: { root: "data-selected:border-transparent" }
+		},
+		{
+			kind: ["filter", "input"],
+			class: { root: "forced-colors:data-selected:[--m3-chip-border:2px] forced-colors:data-selected:border-2 forced-colors:data-selected:border-solid forced-colors:data-selected:border-[Highlight]!" }
+		},
+		{
+			kind: "filter",
+			elevated: false,
+			class: { root: "data-selected:bg-[var(--_md-comp-filter-chip-flat-selected-container-color)]" }
+		},
+		{
+			kind: "filter",
+			elevated: true,
+			class: { root: ["bg-[var(--_md-comp-filter-chip-elevated-unselected-container-color)]", "data-selected:bg-secondary-container"] }
+		},
+		{
+			kind: "filter",
+			elevated: false,
+			class: { root: "data-selected:data-hovered:not-data-pressed:not-data-focus-visible:not-data-dragged:shadow-elevation-1" }
+		},
+		{
+			split: "two",
+			elevated: true,
+			class: { root: "has-data-hovered:not-has-data-pressed:not-has-data-focus-visible:not-data-dragged:shadow-elevation-2" }
+		},
+		{
+			kind: "filter",
+			split: "two",
+			elevated: false,
+			class: { root: "data-selected:has-data-hovered:not-has-data-pressed:not-has-data-focus-visible:not-data-dragged:shadow-elevation-1" }
+		},
+		{
+			kind: ["assist", "suggestion"],
+			elevated: false,
+			class: { root: "data-focus-visible:border-on-surface" }
+		},
+		{
+			kind: ["filter", "input"],
+			split: "none",
+			elevated: false,
+			class: { root: "data-focus-visible:not-data-selected:border-on-surface-variant" }
+		},
+		{
+			kind: ["filter", "input"],
+			split: ["two", "removeOnly"],
+			elevated: false,
+			class: { root: "has-data-focus-visible:not-data-selected:border-on-surface-variant" }
+		},
+		{
+			kind: [
+				"assist",
+				"suggestion",
+				"filter"
+			],
+			split: "none",
+			leading: "none",
+			class: { root: "ps-[calc(16px-var(--m3-chip-border))]" }
+		},
+		{
+			kind: "filter",
+			split: "none",
+			leading: "none",
+			class: { root: "data-selected:ps-[calc(8px-var(--m3-chip-border))]" }
+		},
+		{
+			kind: [
+				"assist",
+				"suggestion",
+				"filter"
+			],
+			split: "none",
+			leading: "icon",
+			class: { root: "ps-[calc(8px-var(--m3-chip-border))]" }
+		},
+		{
+			kind: [
+				"assist",
+				"suggestion",
+				"filter"
+			],
+			split: "none",
+			trailing: false,
+			class: { root: "pe-[calc(16px-var(--m3-chip-border))]" }
+		},
+		{
+			kind: [
+				"assist",
+				"suggestion",
+				"filter"
+			],
+			split: "none",
+			trailing: true,
+			class: { root: "pe-[calc(8px-var(--m3-chip-border))]" }
+		},
+		{
+			kind: [
+				"assist",
+				"suggestion",
+				"filter"
+			],
+			leading: "icon",
+			class: { leading: "me-[8px]" }
+		},
+		{
+			kind: [
+				"assist",
+				"suggestion",
+				"filter"
+			],
+			trailing: true,
+			class: { trailing: "ms-[8px]" }
+		},
+		{
+			kind: "filter",
+			split: "two",
+			leading: "none",
+			class: {
+				primary: "ps-[calc(16px-var(--m3-chip-border))] data-selected:ps-[calc(8px-var(--m3-chip-border))]",
+				root: "pe-[calc(8px-var(--m3-chip-border))]"
+			}
+		},
+		{
+			kind: "filter",
+			split: "two",
+			leading: "icon",
+			class: {
+				primary: "ps-[calc(8px-var(--m3-chip-border))]",
+				root: "pe-[calc(8px-var(--m3-chip-border))]"
+			}
+		},
+		{
+			kind: "input",
+			leading: "none",
+			class: { primary: "ps-[calc(12px-var(--m3-chip-border))]" }
+		},
+		{
+			kind: "input",
+			leading: "icon",
+			class: {
+				primary: "ps-[calc(8px-var(--m3-chip-border))]",
+				leading: "me-[8px]"
+			}
+		},
+		{
+			kind: "input",
+			leading: "avatar",
+			class: {
+				primary: "ps-[calc(4px-var(--m3-chip-border))]",
+				leading: "me-[8px]"
+			}
+		},
+		{
+			kind: "input",
+			trailing: false,
+			class: { primary: "pe-[calc(12px-var(--m3-chip-border))]" }
+		},
+		{
+			kind: "input",
+			trailing: true,
+			class: { root: "pe-[calc(8px-var(--m3-chip-border))]" }
+		}
+	],
+	defaultVariants: {
+		kind: "assist",
+		split: "none",
+		elevated: false,
+		outline: "standard",
+		leading: "none",
+		trailing: false
+	}
+});
+/**
+* Variant definitions for {@link ChipSet}. Chips are 8px apart (M3: "Keep an 8dp minimum
+* space between chips"). With web density, rows come 2px further apart per step, half of what
+* each chip loses (8 → 10 → 12px; 12px at -3, where chips stay 24px), so a chip's 48px touch
+* target never reaches the chips in the rows above and below.
+*/
+const chipSetStyles = tv({
+	slots: { root: "flex max-w-full gap-x-[8px] gap-y-[calc(8px-max(-4px,var(--md-sys-density,0)*2px))]" },
+	variants: { layout: {
+		wrap: { root: "flex-wrap" },
+		scroll: { root: ["flex-nowrap overflow-x-auto overscroll-x-contain ps-[4px] pe-[4px] pt-[calc(8px-max(-4px,var(--md-sys-density,0)*2px))] pb-[calc(8px-max(-4px,var(--md-sys-density,0)*2px))]", "[scrollbar-width:thin] [scrollbar-color:var(--md-sys-color-outline)_transparent]"] }
+	} },
+	defaultVariants: { layout: "wrap" }
+});
+//#endregion
+export { chipSetStyles, chipStyles };
+
+//# sourceMappingURL=chip-styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chip-styles.js","names":[],"sources":["../../../src/components/chip/chip-styles.ts"],"sourcesContent":["import { tv, type VariantProps } from '../../utils/tv';\n\n/*\n * Values follow the M3 chips spec (m3.material.io, Specs and Accessibility tabs), with\n * Compose Material 3's chip token files for what the spec leaves out (2026-10-13):\n *\n * - At least 32px tall (a minimum, so a chip grows around text at a large browser font\n *   size, as Compose's `defaultMinSize` does; `h-fit` keeps a stretching parent from making\n *   it taller; 2026-10-13), 8px corners for every chip, `label-large`, 18px icons, 24px avatars with\n *   12px corners, a 1px `outline-variant` border when flat (`outline` with the strong\n *   outline). Elevated chips are `surface-container-low` at level 1 (hover 2, dragged 4).\n * - Padding: 16px at an edge without an icon, 8px beside an icon (4px beside an avatar),\n *   and 8px between elements. Input chips without a leading element keep Compose's 12px.\n *   Padding counts from the container's edge, as Compose's border overlays the content:\n *   a flat chip's 1px border is taken out of its edge padding (`--m3-chip-border`).\n * - Elevation never shows a press: hover raises a chip (elevated 1 → 2, a flat selected\n *   filter chip 0 → 1) only while it isn't pressed, keyboard-focused or dragged.\n * - A keyboard-focused flat chip's border is `on-surface` (assist, suggestion) or\n *   `on-surface-variant` (unselected filter and input chips).\n * - Leading icons are `primary`; a selected filter chip's is `on-secondary-container`, a\n *   selected input chip's `primary`, an unselected input chip's `on-surface-variant`.\n * - The remove button has a 48px target, and a chip with one is at least 88px wide.\n * - Web density (`--md-sys-density`): each step takes 4px off the minimum height, 32 → 28 →\n *   24px, and -3 stays at 24px (Material Components Web's chip density: 32px, 24px at its\n *   densest, -2). `--m3-chip-height` holds it; the avatar and the remove button's state layer\n *   are at most the height inside the border (24px, 22px in a flat 24px chip), so they never\n *   make a dense chip taller. The 48px touch target stays (M3: \"a minimum 48dp target size,\n *   regardless of placement or density\"), extending beyond the chip.\n * - Disabled: content `on-surface` 38%, borders `on-surface` 12%, containers `on-surface`\n *   12% at level 0.\n *\n * The resting corners, label and leading-icon colours, flat borders, elevated containers and\n * the flat selected containers and labels come from the component tokens (`chip-tokens.ts`,\n * `--md-comp-<kind>-chip-*`). Each kind is its own M3 token set, so each kind's classes read\n * its own private variables. A consumer class (`bg-tertiary`, `rounded-corner-medium`)\n * still wins in `cn()`.\n *\n * Every class is written out in full so Tailwind can find it.\n */\n\n/** Transitions: padding on fast spatial, colours and elevation on fast effects. */\nconst motion = [\n  '[--m3-transition-property:padding-inline-start,background-color,color,box-shadow,border-color]',\n  '[--m3-transition-duration:var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-effects-fast-duration),var(--md-sys-motion-spring-effects-fast-duration),var(--md-sys-motion-spring-effects-fast-duration),var(--md-sys-motion-spring-effects-fast-duration)]',\n  '[--m3-transition-easing:var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-effects-fast-easing)]',\n  '[--m3-transition-delay:0s,0s,0s,0s,0s]',\n];\n\n/** A container of buttons shows the state layer of whichever one is interacted with. */\nconst containerStates = [\n  'min-w-[88px] cursor-default',\n  'has-data-hovered:[--m3-state-opacity:var(--md-sys-state-hover-state-layer-opacity)]',\n  'has-data-focus-visible:[--m3-state-opacity:var(--md-sys-state-focus-state-layer-opacity)]',\n  'has-data-pressed:[--m3-state-opacity:var(--md-sys-state-pressed-state-layer-opacity)]',\n];\n\n/** Variant definitions for the chips; extend them to add variants. */\nexport const chipStyles = tv({\n  slots: {\n    root: [\n      'group/chip inline-flex h-fit min-h-[var(--m3-chip-height)] max-w-full shrink-0 cursor-pointer items-center align-middle',\n      '[--m3-chip-height:max(24px,calc(32px+var(--md-sys-density,0)*4px))]',\n      // An avatar's or the remove button's size: 24px, or the height inside a dense chip's border.\n      '[--m3-chip-slot:min(24px,calc(var(--m3-chip-height)-2*var(--m3-chip-border)))]',\n      'font-plain text-label-large whitespace-nowrap select-none',\n      'state-layer focus-ring',\n      ...motion,\n      'data-disabled:cursor-default data-disabled:text-on-surface/38',\n    ],\n    // Library-owned inner wrapper: holds the touch target.\n    content: 'relative inline-flex min-w-0 items-center',\n    // Icons: disabled beats their own colours through the named group's specificity.\n    leading:\n      'inline-flex shrink-0 items-center justify-center [&>svg]:size-[18px] group-data-disabled/chip:text-on-surface/38',\n    label: 'min-w-0 truncate',\n    trailing:\n      'inline-flex size-[18px] shrink-0 items-center justify-center [&>svg]:size-full group-data-disabled/chip:text-on-surface/38',\n    // Filter chips: the built-in check grows in when selected.\n    check: [\n      'grid grid-cols-[0fr] opacity-0 in-data-selected:grid-cols-[1fr] in-data-selected:opacity-100',\n      '[transition-property:grid-template-columns,opacity]',\n      '[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-effects-fast-duration)]',\n      '[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-effects-fast-easing)]',\n    ],\n    checkInner: 'flex min-w-0 overflow-hidden',\n    checkIcon: 'inline-flex size-[18px] shrink-0 me-[8px] [&>svg]:size-full',\n    avatar:\n      'size-[var(--m3-chip-slot)] shrink-0 overflow-hidden rounded-corner-medium [&>img]:size-full [&>img]:object-cover group-data-disabled/chip:opacity-38',\n    // The remove button: an 18px icon in a 24px round state layer (less in a dense flat chip),\n    // with a 48px target. Its margins put the icon 8px from the label and from the chip's end.\n    remove: [\n      'relative ms-[calc(8px-(var(--m3-chip-slot)-18px)/2)] -me-[calc((var(--m3-chip-slot)-18px)/2)] inline-flex size-[var(--m3-chip-slot)] shrink-0 cursor-pointer items-center justify-center rounded-full',\n      'state-layer [&>svg]:size-[18px]',\n      'data-disabled:cursor-default',\n    ],\n    // A two-part chip's main part (its action, selection or label) fills the chip.\n    primary:\n      'inline-flex min-w-0 flex-1 cursor-pointer items-center self-stretch rounded-[inherit] focus-ring data-disabled:cursor-default',\n  },\n  variants: {\n    kind: {\n      assist: {\n        root: [\n          'rounded-[var(--_md-comp-assist-chip-container-shape)]',\n          'text-[color:var(--_md-comp-assist-chip-label-text-color)]',\n        ],\n        leading: 'text-[color:var(--_md-comp-assist-chip-with-icon-icon-color)]',\n      },\n      suggestion: {\n        root: [\n          'rounded-[var(--_md-comp-suggestion-chip-container-shape)]',\n          'text-[color:var(--_md-comp-suggestion-chip-label-text-color)]',\n        ],\n        leading:\n          'text-[color:var(--_md-comp-suggestion-chip-with-leading-icon-leading-icon-color)]',\n      },\n      filter: {\n        root: [\n          'rounded-[var(--_md-comp-filter-chip-container-shape)]',\n          'text-[color:var(--_md-comp-filter-chip-unselected-label-text-color)]',\n          'data-selected:text-[color:var(--_md-comp-filter-chip-selected-label-text-color)]',\n          'data-selected:data-disabled:bg-on-surface/12 data-selected:data-disabled:text-on-surface/38',\n        ],\n        leading: [\n          'text-[color:var(--_md-comp-filter-chip-with-leading-icon-unselected-leading-icon-color)]',\n          'group-data-selected/chip:text-on-secondary-container',\n          'group-data-disabled/chip:group-data-selected/chip:text-on-surface/38',\n        ],\n      },\n      input: {\n        root: [\n          'cursor-default rounded-[var(--_md-comp-input-chip-container-shape)]',\n          'text-[color:var(--_md-comp-input-chip-unselected-label-text-color)]',\n          'data-selected:bg-[var(--_md-comp-input-chip-selected-container-color)]',\n          'data-selected:text-[color:var(--_md-comp-input-chip-selected-label-text-color)]',\n          'data-selected:data-disabled:bg-on-surface/12 data-selected:data-disabled:text-on-surface/38',\n        ],\n        leading:\n          'group-data-selected/chip:text-primary group-data-disabled/chip:group-data-selected/chip:text-on-surface/38',\n      },\n    },\n    /**\n     * How the chip is built: one element (`none`); a container of two buttons, its main\n     * part and the remove button (`two`); or a remove-only input chip, whose one focus stop\n     * is the remove button, so its focus ring circles the whole chip (`removeOnly`).\n     */\n    split: {\n      none: {},\n      two: { root: containerStates, remove: 'focus-ring' },\n      removeOnly: {\n        root: [\n          ...containerStates,\n          'has-data-focus-visible:[outline:var(--md-sys-focus-indicator-thickness)_solid_var(--md-sys-color-secondary)]',\n          'has-data-focus-visible:[outline-offset:var(--md-sys-focus-indicator-offset)]',\n        ],\n        remove: 'outline-none',\n        primary: 'cursor-default',\n      },\n    },\n    elevated: {\n      true: {\n        root: [\n          '[--m3-chip-border:0px] shadow-elevation-1',\n          'data-hovered:not-data-pressed:not-data-focus-visible:not-data-dragged:shadow-elevation-2',\n          'data-dragged:shadow-elevation-4 data-disabled:bg-on-surface/12 data-disabled:shadow-elevation-0',\n          // Forced colours drop the shadow and the container, so the chip takes a 1px border\n          // (counted out of its padding, as a flat chip's).\n          'forced-colors:[--m3-chip-border:1px] forced-colors:border forced-colors:border-solid forced-colors:border-[CanvasText]',\n        ],\n      },\n      false: {\n        root: '[--m3-chip-border:1px] border border-solid bg-transparent data-dragged:shadow-elevation-4 data-disabled:border-on-surface/12',\n      },\n    },\n    /** `strong` draws the border in `outline` for 3:1 contrast (M3's accessibility guidance). */\n    outline: {\n      standard: {},\n      strong: {},\n    },\n    leading: { none: {}, icon: {}, avatar: {} },\n    trailing: { true: {}, false: {} },\n  },\n  compoundVariants: [\n    // The flat border and the elevated container: each kind's own tokens.\n    {\n      kind: 'assist',\n      elevated: false,\n      outline: 'standard',\n      class: { root: 'border-[color:var(--_md-comp-assist-chip-flat-outline-color)]' },\n    },\n    {\n      kind: 'suggestion',\n      elevated: false,\n      outline: 'standard',\n      class: { root: 'border-[color:var(--_md-comp-suggestion-chip-flat-outline-color)]' },\n    },\n    {\n      kind: 'filter',\n      elevated: false,\n      outline: 'standard',\n      class: { root: 'border-[color:var(--_md-comp-filter-chip-flat-unselected-outline-color)]' },\n    },\n    {\n      kind: 'input',\n      elevated: false,\n      outline: 'standard',\n      class: { root: 'border-[color:var(--_md-comp-input-chip-unselected-outline-color)]' },\n    },\n    { elevated: false, outline: 'strong', class: { root: 'border-outline' } },\n    {\n      kind: 'assist',\n      elevated: true,\n      class: { root: 'bg-[var(--_md-comp-assist-chip-elevated-container-color)]' },\n    },\n    {\n      kind: 'suggestion',\n      elevated: true,\n      class: { root: 'bg-[var(--_md-comp-suggestion-chip-elevated-container-color)]' },\n    },\n    // Selected filter and input chips drop their border (Compose: 0dp, transparent).\n    {\n      kind: ['filter', 'input'],\n      elevated: false,\n      class: { root: 'data-selected:border-transparent' },\n    },\n    // Forced colours drop the selected container, so a selected chip shows a 2px `Highlight`\n    // border instead (counted out of its padding).\n    {\n      kind: ['filter', 'input'],\n      class: {\n        root: 'forced-colors:data-selected:[--m3-chip-border:2px] forced-colors:data-selected:border-2 forced-colors:data-selected:border-solid forced-colors:data-selected:border-[Highlight]!',\n      },\n    },\n    {\n      kind: 'filter',\n      elevated: false,\n      class: {\n        root: 'data-selected:bg-[var(--_md-comp-filter-chip-flat-selected-container-color)]',\n      },\n    },\n    {\n      kind: 'filter',\n      elevated: true,\n      class: {\n        root: [\n          'bg-[var(--_md-comp-filter-chip-elevated-unselected-container-color)]',\n          'data-selected:bg-secondary-container',\n        ],\n      },\n    },\n    // A flat selected filter chip rises to level 1 on hover only (focus and press stay at 0).\n    {\n      kind: 'filter',\n      elevated: false,\n      class: {\n        root: 'data-selected:data-hovered:not-data-pressed:not-data-focus-visible:not-data-dragged:shadow-elevation-1',\n      },\n    },\n    // A two-part chip's container is a plain element that never gets `data-hovered`; it rises\n    // while either of its buttons is hovered, and not while one is pressed or keyboard-focused.\n    {\n      split: 'two',\n      elevated: true,\n      class: {\n        root: 'has-data-hovered:not-has-data-pressed:not-has-data-focus-visible:not-data-dragged:shadow-elevation-2',\n      },\n    },\n    {\n      kind: 'filter',\n      split: 'two',\n      elevated: false,\n      class: {\n        root: 'data-selected:has-data-hovered:not-has-data-pressed:not-has-data-focus-visible:not-data-dragged:shadow-elevation-1',\n      },\n    },\n    // A keyboard-focused flat chip's border darkens (Compose's Flat*FocusOutlineColor).\n    {\n      kind: ['assist', 'suggestion'],\n      elevated: false,\n      class: { root: 'data-focus-visible:border-on-surface' },\n    },\n    {\n      kind: ['filter', 'input'],\n      split: 'none',\n      elevated: false,\n      class: { root: 'data-focus-visible:not-data-selected:border-on-surface-variant' },\n    },\n    {\n      kind: ['filter', 'input'],\n      split: ['two', 'removeOnly'],\n      elevated: false,\n      class: { root: 'has-data-focus-visible:not-data-selected:border-on-surface-variant' },\n    },\n\n    // One-part chips: 16px at an edge without an icon, 8px beside one, 8px between, each\n    // edge padding less the flat chip's border.\n    // A filter chip without a leading icon grows a check when selected (8 · check · 8).\n    {\n      kind: ['assist', 'suggestion', 'filter'],\n      split: 'none',\n      leading: 'none',\n      class: { root: 'ps-[calc(16px-var(--m3-chip-border))]' },\n    },\n    {\n      kind: 'filter',\n      split: 'none',\n      leading: 'none',\n      class: { root: 'data-selected:ps-[calc(8px-var(--m3-chip-border))]' },\n    },\n    {\n      kind: ['assist', 'suggestion', 'filter'],\n      split: 'none',\n      leading: 'icon',\n      class: { root: 'ps-[calc(8px-var(--m3-chip-border))]' },\n    },\n    {\n      kind: ['assist', 'suggestion', 'filter'],\n      split: 'none',\n      trailing: false,\n      class: { root: 'pe-[calc(16px-var(--m3-chip-border))]' },\n    },\n    {\n      kind: ['assist', 'suggestion', 'filter'],\n      split: 'none',\n      trailing: true,\n      class: { root: 'pe-[calc(8px-var(--m3-chip-border))]' },\n    },\n    { kind: ['assist', 'suggestion', 'filter'], leading: 'icon', class: { leading: 'me-[8px]' } },\n    { kind: ['assist', 'suggestion', 'filter'], trailing: true, class: { trailing: 'ms-[8px]' } },\n    // A filter chip with a remove button: its toggle holds the start padding.\n    {\n      kind: 'filter',\n      split: 'two',\n      leading: 'none',\n      class: {\n        primary:\n          'ps-[calc(16px-var(--m3-chip-border))] data-selected:ps-[calc(8px-var(--m3-chip-border))]',\n        root: 'pe-[calc(8px-var(--m3-chip-border))]',\n      },\n    },\n    {\n      kind: 'filter',\n      split: 'two',\n      leading: 'icon',\n      class: {\n        primary: 'ps-[calc(8px-var(--m3-chip-border))]',\n        root: 'pe-[calc(8px-var(--m3-chip-border))]',\n      },\n    },\n\n    // Input: 12px without a leading element, 8px beside an icon, 4px beside an avatar;\n    // 8px between elements and at the end beside the remove button, 12px without one.\n    { kind: 'input', leading: 'none', class: { primary: 'ps-[calc(12px-var(--m3-chip-border))]' } },\n    {\n      kind: 'input',\n      leading: 'icon',\n      class: { primary: 'ps-[calc(8px-var(--m3-chip-border))]', leading: 'me-[8px]' },\n    },\n    {\n      kind: 'input',\n      leading: 'avatar',\n      class: { primary: 'ps-[calc(4px-var(--m3-chip-border))]', leading: 'me-[8px]' },\n    },\n    { kind: 'input', trailing: false, class: { primary: 'pe-[calc(12px-var(--m3-chip-border))]' } },\n    { kind: 'input', trailing: true, class: { root: 'pe-[calc(8px-var(--m3-chip-border))]' } },\n  ],\n  defaultVariants: {\n    kind: 'assist',\n    split: 'none',\n    elevated: false,\n    outline: 'standard',\n    leading: 'none',\n    trailing: false,\n  },\n});\n\n/**\n * Variant definitions for {@link ChipSet}. Chips are 8px apart (M3: \"Keep an 8dp minimum\n * space between chips\"). With web density, rows come 2px further apart per step, half of what\n * each chip loses (8 → 10 → 12px; 12px at -3, where chips stay 24px), so a chip's 48px touch\n * target never reaches the chips in the rows above and below.\n */\nexport const chipSetStyles = tv({\n  slots: {\n    root: 'flex max-w-full gap-x-[8px] gap-y-[calc(8px-max(-4px,var(--md-sys-density,0)*2px))]',\n  },\n  variants: {\n    layout: {\n      // Rows wrap, 8px apart.\n      wrap: { root: 'flex-wrap' },\n      // One row that scrolls sideways. The padding keeps the chips' 48px targets and focus\n      // rings inside the scroll area (more above and below as density makes chips shorter).\n      // The scrollbar stays, thin and in `outline` (2026-10-17): hidden, nothing showed a\n      // mouse user that more chips lay beyond the edge, or gave them a way to reach them.\n      scroll: {\n        root: [\n          'flex-nowrap overflow-x-auto overscroll-x-contain ps-[4px] pe-[4px] pt-[calc(8px-max(-4px,var(--md-sys-density,0)*2px))] pb-[calc(8px-max(-4px,var(--md-sys-density,0)*2px))]',\n          '[scrollbar-width:thin] [scrollbar-color:var(--md-sys-color-outline)_transparent]',\n        ],\n      },\n    },\n  },\n  defaultVariants: { layout: 'wrap' },\n});\n\n/**\n * The variants of {@link chipStyles}, 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 ChipStyleProps = VariantProps<typeof chipStyles>;\nexport type ChipOutline = NonNullable<ChipStyleProps['outline']>;\nexport type ChipSetLayout = NonNullable<VariantProps<typeof chipSetStyles>['layout']>;\n"],"mappings":"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"}

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

@@ -0,0 +1,13 @@
+import { ComponentTokenSet } from "../../tokens/component.js";
+import "../../index.js";
+//#region src/components/chip/chip-tokens.d.ts
+/** The tokens of {@link AssistChip}: `--md-comp-assist-chip-*`. */
+export declare const assistChipTokenSet: ComponentTokenSet<"container-shape" | "label-text-color" | "with-icon-icon-color" | "flat-outline-color" | "elevated-container-color">;
+/** The tokens of {@link SuggestionChip}: `--md-comp-suggestion-chip-*`. */
+export declare const suggestionChipTokenSet: ComponentTokenSet<"container-shape" | "label-text-color" | "flat-outline-color" | "elevated-container-color" | "with-leading-icon-leading-icon-color">;
+/** The tokens of {@link FilterChip}: `--md-comp-filter-chip-*`. */
+export declare const filterChipTokenSet: ComponentTokenSet<"container-shape" | "selected-label-text-color" | "unselected-label-text-color" | "with-leading-icon-unselected-leading-icon-color" | "flat-unselected-outline-color" | "flat-selected-container-color" | "elevated-unselected-container-color">;
+/** The tokens of {@link InputChip}: `--md-comp-input-chip-*`. */
+export declare const inputChipTokenSet: ComponentTokenSet<"selected-container-color" | "container-shape" | "selected-label-text-color" | "unselected-label-text-color" | "unselected-outline-color">;
+//#endregion
+//# sourceMappingURL=chip-tokens.d.ts.map

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

@@ -0,0 +1,185 @@
+import { color, corner, defineComponentTokens } from "../../tokens/component.js";
+//#region src/components/chip/chip-tokens.ts
+const paintsShape = { property: "border-top-left-radius" };
+const paintsLabel = { property: "color" };
+const paintsLeadingIcon = {
+	slot: "leading",
+	property: "color"
+};
+const paintsFlatOutline = { property: "border-top-color" };
+const paintsElevatedContainer = {
+	property: "background-color",
+	state: "elevated"
+};
+/** The tokens of {@link AssistChip}: `--md-comp-assist-chip-*`. */
+const assistChipTokenSet = defineComponentTokens({
+	name: "md-comp-assist-chip",
+	tokens: {
+		"container-shape": {
+			value: corner("small"),
+			description: "The corners.",
+			compose: "AssistChipTokens.ContainerShape",
+			paints: paintsShape
+		},
+		"label-text-color": {
+			value: color("on-surface"),
+			description: "The label.",
+			compose: "AssistChipTokens.LabelTextColor",
+			paints: paintsLabel
+		},
+		"with-icon-icon-color": {
+			value: color("primary"),
+			description: "The leading icon.",
+			compose: "AssistChipTokens.IconColor",
+			paints: paintsLeadingIcon
+		},
+		"flat-outline-color": {
+			value: color("outline-variant"),
+			description: "The flat chip’s border (the strong outline keeps `outline`).",
+			compose: "AssistChipTokens.FlatOutlineColor",
+			paints: paintsFlatOutline
+		},
+		"elevated-container-color": {
+			value: color("surface-container-low"),
+			description: "The elevated chip’s container.",
+			compose: "AssistChipTokens.ElevatedContainerColor",
+			paints: paintsElevatedContainer
+		}
+	}
+});
+/** The tokens of {@link SuggestionChip}: `--md-comp-suggestion-chip-*`. */
+const suggestionChipTokenSet = defineComponentTokens({
+	name: "md-comp-suggestion-chip",
+	tokens: {
+		"container-shape": {
+			value: corner("small"),
+			description: "The corners.",
+			compose: "SuggestionChipTokens.ContainerShape",
+			paints: paintsShape
+		},
+		"label-text-color": {
+			value: color("on-surface-variant"),
+			description: "The label.",
+			compose: "SuggestionChipTokens.LabelTextColor",
+			paints: paintsLabel
+		},
+		"with-leading-icon-leading-icon-color": {
+			value: color("primary"),
+			description: "The leading icon.",
+			compose: "SuggestionChipTokens.LeadingIconColor",
+			paints: paintsLeadingIcon
+		},
+		"flat-outline-color": {
+			value: color("outline-variant"),
+			description: "The flat chip’s border (the strong outline keeps `outline`).",
+			compose: "SuggestionChipTokens.FlatOutlineColor",
+			paints: paintsFlatOutline
+		},
+		"elevated-container-color": {
+			value: color("surface-container-low"),
+			description: "The elevated chip’s container.",
+			compose: "SuggestionChipTokens.ElevatedContainerColor",
+			paints: paintsElevatedContainer
+		}
+	}
+});
+/** The tokens of {@link FilterChip}: `--md-comp-filter-chip-*`. */
+const filterChipTokenSet = defineComponentTokens({
+	name: "md-comp-filter-chip",
+	tokens: {
+		"container-shape": {
+			value: corner("small"),
+			description: "The corners.",
+			compose: "FilterChipTokens.ContainerShape",
+			paints: paintsShape
+		},
+		"unselected-label-text-color": {
+			value: color("on-surface-variant"),
+			description: "The label (and the check), unselected.",
+			compose: "FilterChipTokens.UnselectedLabelTextColor",
+			paints: paintsLabel
+		},
+		"selected-label-text-color": {
+			value: color("on-secondary-container"),
+			description: "The label and the check, selected.",
+			compose: "FilterChipTokens.SelectedLabelTextColor",
+			paints: {
+				property: "color",
+				state: "selected"
+			}
+		},
+		"with-leading-icon-unselected-leading-icon-color": {
+			value: color("primary"),
+			description: "The leading icon, unselected.",
+			compose: "FilterChipTokens.UnselectedLeadingIconColor",
+			paints: paintsLeadingIcon
+		},
+		"flat-unselected-outline-color": {
+			value: color("outline-variant"),
+			description: "The flat chip’s border, unselected (the strong outline keeps `outline`).",
+			compose: "FilterChipTokens.FlatUnselectedOutlineColor",
+			paints: paintsFlatOutline
+		},
+		"flat-selected-container-color": {
+			value: color("secondary-container"),
+			description: "The flat chip’s container, selected.",
+			compose: "FilterChipTokens.FlatSelectedContainerColor",
+			paints: {
+				property: "background-color",
+				state: "selected"
+			}
+		},
+		"elevated-unselected-container-color": {
+			value: color("surface-container-low"),
+			description: "The elevated chip’s container, unselected.",
+			compose: "FilterChipTokens.ElevatedUnselectedContainerColor",
+			paints: paintsElevatedContainer
+		}
+	}
+});
+/** The tokens of {@link InputChip}: `--md-comp-input-chip-*`. */
+const inputChipTokenSet = defineComponentTokens({
+	name: "md-comp-input-chip",
+	tokens: {
+		"container-shape": {
+			value: corner("small"),
+			description: "The corners.",
+			compose: "InputChipTokens.ContainerShape",
+			paints: paintsShape
+		},
+		"unselected-label-text-color": {
+			value: color("on-surface-variant"),
+			description: "The label (and an unselected leading icon), unselected.",
+			compose: "InputChipTokens.UnselectedLabelTextColor",
+			paints: paintsLabel
+		},
+		"selected-label-text-color": {
+			value: color("on-secondary-container"),
+			description: "The label, selected.",
+			compose: "InputChipTokens.SelectedLabelTextColor",
+			paints: {
+				property: "color",
+				state: "selected"
+			}
+		},
+		"unselected-outline-color": {
+			value: color("outline-variant"),
+			description: "The border, unselected (the strong outline keeps `outline`).",
+			compose: "InputChipTokens.UnselectedOutlineColor",
+			paints: paintsFlatOutline
+		},
+		"selected-container-color": {
+			value: color("secondary-container"),
+			description: "The container, selected.",
+			compose: "InputChipTokens.SelectedContainerColor",
+			paints: {
+				property: "background-color",
+				state: "selected"
+			}
+		}
+	}
+});
+//#endregion
+export { assistChipTokenSet, filterChipTokenSet, inputChipTokenSet, suggestionChipTokenSet };
+
+//# sourceMappingURL=chip-tokens.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chip-tokens.js","names":[],"sources":["../../../src/components/chip/chip-tokens.ts"],"sourcesContent":["import { color, corner, defineComponentTokens } from '../../tokens/component';\n\n/*\n * The chips' component tokens, M3's `md.comp.{assist,filter,input,suggestion}-chip.*` names\n * (checked against m3.material.io's token tables, 2026-10-14), with Compose's *ChipTokens\n * defaults. M3 gives each kind its own token set, and their names differ (a filter chip's\n * colours say `unselected`, an assist chip's icon is `with-icon`), so each kind is a set of\n * its own: the root carries `data-tokens=\"md-comp-<kind>-chip\"`, and `chip-styles.ts` reads\n * that kind's private variables. An elevated chip's root carries `data-elevated`.\n *\n * Hover, focus, dragged and disabled values, the elevated filter chip's selected container,\n * the selected leading icons, the strong outline, sizes and elevation stay classes.\n */\n\nconst paintsShape = { property: 'border-top-left-radius' } as const;\nconst paintsLabel = { property: 'color' } as const;\nconst paintsLeadingIcon = { slot: 'leading', property: 'color' } as const;\nconst paintsFlatOutline = { property: 'border-top-color' } as const;\nconst paintsElevatedContainer = { property: 'background-color', state: 'elevated' } as const;\n\n/** The tokens of {@link AssistChip}: `--md-comp-assist-chip-*`. */\nexport const assistChipTokenSet = defineComponentTokens({\n  name: 'md-comp-assist-chip',\n  tokens: {\n    'container-shape': {\n      value: corner('small'),\n      description: 'The corners.',\n      compose: 'AssistChipTokens.ContainerShape',\n      paints: paintsShape,\n    },\n    'label-text-color': {\n      value: color('on-surface'),\n      description: 'The label.',\n      compose: 'AssistChipTokens.LabelTextColor',\n      paints: paintsLabel,\n    },\n    'with-icon-icon-color': {\n      value: color('primary'),\n      description: 'The leading icon.',\n      compose: 'AssistChipTokens.IconColor',\n      paints: paintsLeadingIcon,\n    },\n    'flat-outline-color': {\n      value: color('outline-variant'),\n      description: 'The flat chip’s border (the strong outline keeps `outline`).',\n      compose: 'AssistChipTokens.FlatOutlineColor',\n      paints: paintsFlatOutline,\n    },\n    'elevated-container-color': {\n      value: color('surface-container-low'),\n      description: 'The elevated chip’s container.',\n      compose: 'AssistChipTokens.ElevatedContainerColor',\n      paints: paintsElevatedContainer,\n    },\n  },\n});\n\n/** The tokens of {@link SuggestionChip}: `--md-comp-suggestion-chip-*`. */\nexport const suggestionChipTokenSet = defineComponentTokens({\n  name: 'md-comp-suggestion-chip',\n  tokens: {\n    'container-shape': {\n      value: corner('small'),\n      description: 'The corners.',\n      compose: 'SuggestionChipTokens.ContainerShape',\n      paints: paintsShape,\n    },\n    'label-text-color': {\n      value: color('on-surface-variant'),\n      description: 'The label.',\n      compose: 'SuggestionChipTokens.LabelTextColor',\n      paints: paintsLabel,\n    },\n    'with-leading-icon-leading-icon-color': {\n      value: color('primary'),\n      description: 'The leading icon.',\n      compose: 'SuggestionChipTokens.LeadingIconColor',\n      paints: paintsLeadingIcon,\n    },\n    'flat-outline-color': {\n      value: color('outline-variant'),\n      description: 'The flat chip’s border (the strong outline keeps `outline`).',\n      compose: 'SuggestionChipTokens.FlatOutlineColor',\n      paints: paintsFlatOutline,\n    },\n    'elevated-container-color': {\n      value: color('surface-container-low'),\n      description: 'The elevated chip’s container.',\n      compose: 'SuggestionChipTokens.ElevatedContainerColor',\n      paints: paintsElevatedContainer,\n    },\n  },\n});\n\n/** The tokens of {@link FilterChip}: `--md-comp-filter-chip-*`. */\nexport const filterChipTokenSet = defineComponentTokens({\n  name: 'md-comp-filter-chip',\n  tokens: {\n    'container-shape': {\n      value: corner('small'),\n      description: 'The corners.',\n      compose: 'FilterChipTokens.ContainerShape',\n      paints: paintsShape,\n    },\n    'unselected-label-text-color': {\n      value: color('on-surface-variant'),\n      description: 'The label (and the check), unselected.',\n      compose: 'FilterChipTokens.UnselectedLabelTextColor',\n      paints: paintsLabel,\n    },\n    'selected-label-text-color': {\n      value: color('on-secondary-container'),\n      description: 'The label and the check, selected.',\n      compose: 'FilterChipTokens.SelectedLabelTextColor',\n      paints: { property: 'color', state: 'selected' },\n    },\n    'with-leading-icon-unselected-leading-icon-color': {\n      value: color('primary'),\n      description: 'The leading icon, unselected.',\n      compose: 'FilterChipTokens.UnselectedLeadingIconColor',\n      paints: paintsLeadingIcon,\n    },\n    'flat-unselected-outline-color': {\n      value: color('outline-variant'),\n      description: 'The flat chip’s border, unselected (the strong outline keeps `outline`).',\n      compose: 'FilterChipTokens.FlatUnselectedOutlineColor',\n      paints: paintsFlatOutline,\n    },\n    'flat-selected-container-color': {\n      value: color('secondary-container'),\n      description: 'The flat chip’s container, selected.',\n      compose: 'FilterChipTokens.FlatSelectedContainerColor',\n      paints: { property: 'background-color', state: 'selected' },\n    },\n    'elevated-unselected-container-color': {\n      value: color('surface-container-low'),\n      description: 'The elevated chip’s container, unselected.',\n      compose: 'FilterChipTokens.ElevatedUnselectedContainerColor',\n      paints: paintsElevatedContainer,\n    },\n  },\n});\n\n/** The tokens of {@link InputChip}: `--md-comp-input-chip-*`. */\nexport const inputChipTokenSet = defineComponentTokens({\n  name: 'md-comp-input-chip',\n  tokens: {\n    'container-shape': {\n      value: corner('small'),\n      description: 'The corners.',\n      compose: 'InputChipTokens.ContainerShape',\n      paints: paintsShape,\n    },\n    'unselected-label-text-color': {\n      value: color('on-surface-variant'),\n      description: 'The label (and an unselected leading icon), unselected.',\n      compose: 'InputChipTokens.UnselectedLabelTextColor',\n      paints: paintsLabel,\n    },\n    'selected-label-text-color': {\n      value: color('on-secondary-container'),\n      description: 'The label, selected.',\n      compose: 'InputChipTokens.SelectedLabelTextColor',\n      paints: { property: 'color', state: 'selected' },\n    },\n    'unselected-outline-color': {\n      value: color('outline-variant'),\n      description: 'The border, unselected (the strong outline keeps `outline`).',\n      compose: 'InputChipTokens.UnselectedOutlineColor',\n      paints: paintsFlatOutline,\n    },\n    'selected-container-color': {\n      value: color('secondary-container'),\n      description: 'The container, selected.',\n      compose: 'InputChipTokens.SelectedContainerColor',\n      paints: { property: 'background-color', state: 'selected' },\n    },\n  },\n});\n"],"mappings":"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"}