@windmorph/react 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,97 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/slider/slider-styles.ts
+/** Variant definitions for {@link Slider} and {@link RangeSlider}; extend them to add sizes. */
+const sliderStyles = tv({
+	slots: {
+		root: [
+			"group/slider flex shrink-0 select-none",
+			"[--m3-slider-gap-0:6px] [--m3-slider-gap-1:6px]",
+			"has-[[data-thumb=\"0\"][data-focus-visible]]:[--m3-slider-gap-0:10px]",
+			"has-[[data-thumb=\"1\"][data-focus-visible]]:[--m3-slider-gap-1:10px]"
+		],
+		track: ["relative isolate grid flex-1 cursor-pointer grid-cols-1 grid-rows-1 items-center justify-items-start group-data-disabled/slider:cursor-default", "before:absolute before:-z-10 before:[inset-inline:0] before:[inset-block:min(0px,calc((100%_-_48px)/2))] before:content-['']"],
+		segment: [
+			"col-start-1 row-start-1 flex [block-size:var(--m3-slider-track)] items-center overflow-hidden",
+			"data-[tone=active]:bg-[var(--_md-comp-slider-active-track-color)]",
+			"data-[tone=inactive]:bg-[var(--_md-comp-slider-inactive-track-color)]",
+			"group-data-disabled/slider:data-[tone=active]:bg-on-surface/38",
+			"group-data-disabled/slider:data-[tone=inactive]:bg-on-surface/12",
+			"forced-colors:forced-color-adjust-none",
+			"forced-colors:data-[tone=active]:bg-[Highlight]!",
+			"forced-colors:data-[tone=inactive]:bg-[Canvas]! forced-colors:data-[tone=inactive]:border forced-colors:data-[tone=inactive]:border-solid forced-colors:data-[tone=inactive]:border-[CanvasText]",
+			"forced-colors:group-data-disabled/slider:data-[tone=active]:bg-[GrayText]!",
+			"forced-colors:group-data-disabled/slider:data-[tone=inactive]:border-[GrayText]"
+		],
+		stop: [
+			"size-[4px] shrink-0 rounded-full",
+			"in-data-[tone=active]:bg-on-primary",
+			"in-data-[tone=inactive]:bg-[var(--_md-comp-slider-stop-indicator-color)]",
+			"group-data-disabled/slider:in-data-[tone=active]:bg-inverse-on-surface",
+			"group-data-disabled/slider:in-data-[tone=inactive]:bg-on-surface/38",
+			"forced-colors:in-data-[tone=active]:bg-[HighlightText]! forced-colors:in-data-[tone=inactive]:bg-[CanvasText]!",
+			"forced-colors:group-data-disabled/slider:in-data-[tone=active]:bg-[Canvas]! forced-colors:group-data-disabled/slider:in-data-[tone=inactive]:bg-[GrayText]!"
+		],
+		tick: [
+			"col-start-1 row-start-1 size-[4px] rounded-full",
+			"data-active:bg-on-primary not-data-active:bg-[var(--_md-comp-slider-stop-indicator-color)]",
+			"group-data-disabled/slider:data-active:bg-inverse-on-surface",
+			"group-data-disabled/slider:not-data-active:bg-on-surface/38",
+			"forced-colors:forced-color-adjust-none",
+			"forced-colors:data-active:bg-[HighlightText]! forced-colors:not-data-active:bg-[CanvasText]!",
+			"forced-colors:group-data-disabled/slider:data-active:bg-[Canvas]! forced-colors:group-data-disabled/slider:not-data-active:bg-[GrayText]!"
+		],
+		icon: [
+			"flex shrink-0 items-center justify-center overflow-hidden",
+			"in-data-[tone=active]:text-on-primary in-data-[tone=inactive]:text-on-secondary-container",
+			"forced-colors:in-data-[tone=active]:text-[HighlightText]! forced-colors:in-data-[tone=inactive]:text-[CanvasText]!",
+			"[&>svg]:[block-size:var(--m3-slider-icon)] [&>svg]:[inline-size:var(--m3-slider-icon)] [&>svg]:shrink-0"
+		],
+		movedIcon: [
+			"col-start-1 row-start-1 flex shrink-0 items-center justify-center overflow-hidden",
+			"text-on-secondary-container forced-colors:forced-color-adjust-none forced-colors:text-[CanvasText]!",
+			"[&>svg]:[block-size:var(--m3-slider-icon)] [&>svg]:[inline-size:var(--m3-slider-icon)] [&>svg]:shrink-0"
+		],
+		thumb: ["col-start-1 row-start-1 flex [inline-size:4px] [block-size:var(--m3-slider-handle)] cursor-pointer justify-center", "rounded-full focus-ring group-data-disabled/slider:cursor-default"],
+		handle: [
+			"[inline-size:4px] [block-size:100%] rounded-full bg-[var(--_md-comp-slider-handle-color)]",
+			"data-active:[inline-size:2px]",
+			"group-data-disabled/slider:bg-[color-mix(in_srgb,var(--md-sys-color-on-surface)_38%,var(--md-sys-color-surface))]",
+			"forced-colors:forced-color-adjust-none forced-colors:bg-[CanvasText]! forced-colors:group-data-disabled/slider:bg-[GrayText]!"
+		],
+		labelAnchor: "col-start-1 row-start-1 flex [inline-size:0] [block-size:0] items-end justify-center self-start [margin-block-start:-12px]",
+		label: [
+			"flex h-[44px] min-w-[48px] items-center justify-center rounded-full ps-[16px] pe-[16px]",
+			"bg-[var(--_md-comp-slider-value-indicator-container-color)] text-label-large whitespace-nowrap",
+			"text-[color:var(--_md-comp-slider-value-indicator-label-label-text-color)]",
+			"[direction:ltr] [writing-mode:horizontal-tb]",
+			"forced-colors:outline forced-colors:outline-1 forced-colors:outline-solid forced-colors:outline-[CanvasText]"
+		]
+	},
+	variants: {
+		orientation: {
+			horizontal: {
+				root: "h-(--m3-slider-handle) w-full touch-pan-y flex-row items-center",
+				track: "ms-[2px] me-[2px] self-stretch"
+			},
+			vertical: {
+				root: "h-[240px] w-(--m3-slider-handle) touch-pan-x flex-col items-center",
+				track: "mt-[2px] mb-[2px] self-stretch [direction:rtl] [writing-mode:vertical-lr]"
+			}
+		},
+		size: {
+			xs: { root: "[--m3-slider-track:16px] [--m3-slider-corner:8px] [--m3-slider-handle:44px]" },
+			sm: { root: "[--m3-slider-track:24px] [--m3-slider-corner:8px] [--m3-slider-handle:44px]" },
+			md: { root: "[--m3-slider-track:40px] [--m3-slider-corner:12px] [--m3-slider-handle:52px] [--m3-slider-icon:24px]" },
+			lg: { root: "[--m3-slider-track:56px] [--m3-slider-corner:16px] [--m3-slider-handle:68px] [--m3-slider-icon:24px]" },
+			xl: { root: "[--m3-slider-track:96px] [--m3-slider-corner:28px] [--m3-slider-handle:108px] [--m3-slider-icon:32px]" }
+		}
+	},
+	defaultVariants: {
+		orientation: "horizontal",
+		size: "xs"
+	}
+});
+//#endregion
+export { sliderStyles };
+
+//# sourceMappingURL=slider-styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slider-styles.js","names":[],"sources":["../../../src/components/slider/slider-styles.ts"],"sourcesContent":["import { tv, type VariantProps } from '../../utils/tv';\n\n/*\n * Values follow Compose Material 3 (Slider.kt, SliderTokens) and, for the Expressive sizes\n * Compose doesn't ship, the M3 spec's measurements table (handle heights) and the M3 token\n * values in Material Components Android (`m3_comp_slider_{xsmall…xlarge}_*`):\n *\n * | size | track | corner | handle | inset icon |\n * | xs   | 16px  | 8px    | 44px   | —          |\n * | sm   | 24px  | 8px    | 44px   | —          |\n * | md   | 40px  | 12px   | 52px   | 24px       |\n * | lg   | 56px  | 16px   | 68px   | 24px       |\n * | xl   | 96px  | 28px   | 108px  | 32px       |\n *\n * Active track and handle `primary`, inactive track `secondary-container`; the handle is\n * 4px wide, 2px while pressed, dragged or focused, with a 6px gap to the track (10px while\n * keyboard-focused, for the focus ring). Stop indicators and ticks are 4px dots,\n * `on-primary` on the active track and `on-secondary-container` on the inactive one\n * (`inverse-on-surface` / `on-surface` 38% disabled; m3.material.io tokens). Disabled:\n * active track `on-surface` 38%, inactive 12%, handle `on-surface` 38% over `surface`.\n * Inset icons sit 10px inside the track, `on-primary` / `on-secondary-container` (MDC);\n * when the active track is too short for the start icon, it moves to the inactive track\n * (M3 spec).\n * The value indicator is a 44px `inverse-surface` pill with `label-large`\n * `inverse-on-surface` text, 12px above the handle.\n *\n * The track is one grid cell: segments, ticks and thumbs are placed with logical margins,\n * so nothing is positioned. A vertical slider writes its track bottom-to-top\n * (`writing-mode: vertical-lr` + `direction: rtl`), so the same geometry serves both\n * orientations and RTL. The track, handle, inactive stop and value indicator colours come\n * from the slider's component tokens (`slider-tokens.ts`, `--md-comp-slider-*`); the root\n * carries `data-tokens` and `data-size`. Every class is written out in full so Tailwind can\n * find it.\n */\n\n/** Variant definitions for {@link Slider} and {@link RangeSlider}; extend them to add sizes. */\nexport const sliderStyles = tv({\n  slots: {\n    root: [\n      'group/slider flex shrink-0 select-none',\n      '[--m3-slider-gap-0:6px] [--m3-slider-gap-1:6px]',\n      'has-[[data-thumb=\"0\"][data-focus-visible]]:[--m3-slider-gap-0:10px]',\n      'has-[[data-thumb=\"1\"][data-focus-visible]]:[--m3-slider-gap-1:10px]',\n    ],\n    // The track takes the presses. Its hit area is at least 48px across (M3's touch target)\n    // without changing the layout: a transparent layer under its parts reaches 2px past an\n    // xs or sm slider's 44px on each side. The block axis is the cross axis in both\n    // orientations (a vertical track's writing mode is vertical).\n    track: [\n      'relative isolate grid flex-1 cursor-pointer grid-cols-1 grid-rows-1 items-center justify-items-start group-data-disabled/slider:cursor-default',\n      \"before:absolute before:-z-10 before:[inset-inline:0] before:[inset-block:min(0px,calc((100%_-_48px)/2))] before:content-['']\",\n    ],\n    segment: [\n      'col-start-1 row-start-1 flex [block-size:var(--m3-slider-track)] items-center overflow-hidden',\n      'data-[tone=active]:bg-[var(--_md-comp-slider-active-track-color)]',\n      'data-[tone=inactive]:bg-[var(--_md-comp-slider-inactive-track-color)]',\n      'group-data-disabled/slider:data-[tone=active]:bg-on-surface/38',\n      'group-data-disabled/slider:data-[tone=inactive]:bg-on-surface/12',\n      // Forced colours: tracks, stops and the handle are backgrounds, which forced colours\n      // drop, so they take system colours: the active track `Highlight`, the inactive one an\n      // outlined `Canvas` track, `GrayText` when disabled.\n      'forced-colors:forced-color-adjust-none',\n      'forced-colors:data-[tone=active]:bg-[Highlight]!',\n      'forced-colors:data-[tone=inactive]:bg-[Canvas]! forced-colors:data-[tone=inactive]:border forced-colors:data-[tone=inactive]:border-solid forced-colors:data-[tone=inactive]:border-[CanvasText]',\n      'forced-colors:group-data-disabled/slider:data-[tone=active]:bg-[GrayText]!',\n      'forced-colors:group-data-disabled/slider:data-[tone=inactive]:border-[GrayText]',\n    ],\n    // Stop indicators follow the live m3.material.io token table (2026-10-13): on the active\n    // track `on-primary`, on the inactive track `on-secondary-container`; disabled,\n    // `inverse-on-surface` and `on-surface` at the table's 0.38 disabled stop opacity.\n    stop: [\n      'size-[4px] shrink-0 rounded-full',\n      'in-data-[tone=active]:bg-on-primary',\n      'in-data-[tone=inactive]:bg-[var(--_md-comp-slider-stop-indicator-color)]',\n      'group-data-disabled/slider:in-data-[tone=active]:bg-inverse-on-surface',\n      'group-data-disabled/slider:in-data-[tone=inactive]:bg-on-surface/38',\n      'forced-colors:in-data-[tone=active]:bg-[HighlightText]! forced-colors:in-data-[tone=inactive]:bg-[CanvasText]!',\n      'forced-colors:group-data-disabled/slider:in-data-[tone=active]:bg-[Canvas]! forced-colors:group-data-disabled/slider:in-data-[tone=inactive]:bg-[GrayText]!',\n    ],\n    tick: [\n      'col-start-1 row-start-1 size-[4px] rounded-full',\n      'data-active:bg-on-primary not-data-active:bg-[var(--_md-comp-slider-stop-indicator-color)]',\n      'group-data-disabled/slider:data-active:bg-inverse-on-surface',\n      'group-data-disabled/slider:not-data-active:bg-on-surface/38',\n      'forced-colors:forced-color-adjust-none',\n      'forced-colors:data-active:bg-[HighlightText]! forced-colors:not-data-active:bg-[CanvasText]!',\n      'forced-colors:group-data-disabled/slider:data-active:bg-[Canvas]! forced-colors:group-data-disabled/slider:not-data-active:bg-[GrayText]!',\n    ],\n    icon: [\n      'flex shrink-0 items-center justify-center overflow-hidden',\n      'in-data-[tone=active]:text-on-primary in-data-[tone=inactive]:text-on-secondary-container',\n      'forced-colors:in-data-[tone=active]:text-[HighlightText]! forced-colors:in-data-[tone=inactive]:text-[CanvasText]!',\n      '[&>svg]:[block-size:var(--m3-slider-icon)] [&>svg]:[inline-size:var(--m3-slider-icon)] [&>svg]:shrink-0',\n    ],\n    // The start icon, moved to the inactive track while the active one is too short for it.\n    movedIcon: [\n      'col-start-1 row-start-1 flex shrink-0 items-center justify-center overflow-hidden',\n      'text-on-secondary-container forced-colors:forced-color-adjust-none forced-colors:text-[CanvasText]!',\n      '[&>svg]:[block-size:var(--m3-slider-icon)] [&>svg]:[inline-size:var(--m3-slider-icon)] [&>svg]:shrink-0',\n    ],\n    thumb: [\n      'col-start-1 row-start-1 flex [inline-size:4px] [block-size:var(--m3-slider-handle)] cursor-pointer justify-center',\n      'rounded-full focus-ring group-data-disabled/slider:cursor-default',\n    ],\n    handle: [\n      '[inline-size:4px] [block-size:100%] rounded-full bg-[var(--_md-comp-slider-handle-color)]',\n      'data-active:[inline-size:2px]',\n      'group-data-disabled/slider:bg-[color-mix(in_srgb,var(--md-sys-color-on-surface)_38%,var(--md-sys-color-surface))]',\n      'forced-colors:forced-color-adjust-none forced-colors:bg-[CanvasText]! forced-colors:group-data-disabled/slider:bg-[GrayText]!',\n    ],\n    // A zero-size box at the thumb that the value indicator hangs from.\n    // It sits 12px before the row's block start (above, or left of a vertical slider).\n    labelAnchor:\n      'col-start-1 row-start-1 flex [inline-size:0] [block-size:0] items-end justify-center self-start [margin-block-start:-12px]',\n    label: [\n      'flex h-[44px] min-w-[48px] items-center justify-center rounded-full ps-[16px] pe-[16px]',\n      'bg-[var(--_md-comp-slider-value-indicator-container-color)] text-label-large whitespace-nowrap',\n      'text-[color:var(--_md-comp-slider-value-indicator-label-label-text-color)]',\n      '[direction:ltr] [writing-mode:horizontal-tb]',\n      // Forced colours repaint the pill as `Canvas`; an outline gives it its edge.\n      'forced-colors:outline forced-colors:outline-1 forced-colors:outline-solid forced-colors:outline-[CanvasText]',\n    ],\n  },\n  variants: {\n    orientation: {\n      horizontal: {\n        // A swipe across the slider scrolls the page (Compose drags only along the track).\n        root: 'h-(--m3-slider-handle) w-full touch-pan-y flex-row items-center',\n        track: 'ms-[2px] me-[2px] self-stretch',\n      },\n      vertical: {\n        root: 'h-[240px] w-(--m3-slider-handle) touch-pan-x flex-col items-center',\n        // Inline axis runs bottom-to-top, so the geometry and logical properties carry over.\n        track: 'mt-[2px] mb-[2px] self-stretch [direction:rtl] [writing-mode:vertical-lr]',\n      },\n    },\n    size: {\n      xs: { root: '[--m3-slider-track:16px] [--m3-slider-corner:8px] [--m3-slider-handle:44px]' },\n      sm: { root: '[--m3-slider-track:24px] [--m3-slider-corner:8px] [--m3-slider-handle:44px]' },\n      md: {\n        root: '[--m3-slider-track:40px] [--m3-slider-corner:12px] [--m3-slider-handle:52px] [--m3-slider-icon:24px]',\n      },\n      lg: {\n        root: '[--m3-slider-track:56px] [--m3-slider-corner:16px] [--m3-slider-handle:68px] [--m3-slider-icon:24px]',\n      },\n      xl: {\n        root: '[--m3-slider-track:96px] [--m3-slider-corner:28px] [--m3-slider-handle:108px] [--m3-slider-icon:32px]',\n      },\n    },\n  },\n  defaultVariants: { orientation: 'horizontal', size: 'xs' },\n});\n\n/**\n * The variants of {@link sliderStyles}, 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 SliderStyleProps = VariantProps<typeof sliderStyles>;\nexport type SliderSize = NonNullable<SliderStyleProps['size']>;\nexport type SliderOrientation = NonNullable<SliderStyleProps['orientation']>;\n"],"mappings":";;;AAoCA,MAAa,eAAe,GAAG;CAC7B,OAAO;EACL,MAAM;GACJ;GACA;GACA;GACA;EACF;EAKA,OAAO,CACL,kJACA,8HACF;EACA,SAAS;GACP;GACA;GACA;GACA;GACA;GAIA;GACA;GACA;GACA;GACA;EACF;EAIA,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EACA,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EACA,MAAM;GACJ;GACA;GACA;GACA;EACF;EAEA,WAAW;GACT;GACA;GACA;EACF;EACA,OAAO,CACL,qHACA,mEACF;EACA,QAAQ;GACN;GACA;GACA;GACA;EACF;EAGA,aACE;EACF,OAAO;GACL;GACA;GACA;GACA;GAEA;EACF;CACF;CACA,UAAU;EACR,aAAa;GACX,YAAY;IAEV,MAAM;IACN,OAAO;GACT;GACA,UAAU;IACR,MAAM;IAEN,OAAO;GACT;EACF;EACA,MAAM;GACJ,IAAI,EAAE,MAAM,8EAA8E;GAC1F,IAAI,EAAE,MAAM,8EAA8E;GAC1F,IAAI,EACF,MAAM,uGACR;GACA,IAAI,EACF,MAAM,uGACR;GACA,IAAI,EACF,MAAM,wGACR;EACF;CACF;CACA,iBAAiB;EAAE,aAAa;EAAc,MAAM;CAAK;AAC3D,CAAC"}

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

@@ -0,0 +1,7 @@
+import { ComponentTokenSet } from "../../tokens/component.js";
+import "../../index.js";
+//#region src/components/slider/slider-tokens.d.ts
+/** The tokens of {@link Slider} and {@link RangeSlider}: `--md-comp-slider-<part>`. */
+export declare const sliderTokenSet: ComponentTokenSet<"stop-indicator-color" | "active-track-color" | "inactive-track-color" | "handle-color" | "value-indicator-container-color" | "value-indicator-label-label-text-color">;
+//#endregion
+//# sourceMappingURL=slider-tokens.d.ts.map

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

@@ -0,0 +1,66 @@
+import { color, defineComponentTokens } from "../../tokens/component.js";
+//#region src/components/slider/slider-tokens.ts
+/** The tokens of {@link Slider} and {@link RangeSlider}: `--md-comp-slider-<part>`. */
+const sliderTokenSet = defineComponentTokens({
+	name: "md-comp-slider",
+	tokens: {
+		"active-track-color": {
+			value: color("primary"),
+			description: "The track between the start (or the other thumb) and the handle.",
+			compose: "SliderTokens.ActiveTrackColor",
+			paints: {
+				property: "background-color",
+				slot: "active-track"
+			}
+		},
+		"inactive-track-color": {
+			value: color("secondary-container"),
+			description: "The rest of the track.",
+			compose: "SliderTokens.InactiveTrackColor",
+			paints: {
+				property: "background-color",
+				slot: "inactive-track"
+			}
+		},
+		"handle-color": {
+			value: color("primary"),
+			description: "The handle.",
+			compose: "SliderTokens.HandleColor",
+			paints: {
+				property: "background-color",
+				slot: "handle"
+			}
+		},
+		"stop-indicator-color": {
+			value: color("on-secondary-container"),
+			description: "The stop indicators and tick marks on the inactive track.",
+			compose: "SliderTokens.StopIndicatorColor",
+			paints: {
+				property: "background-color",
+				slot: "stop-indicator"
+			}
+		},
+		"value-indicator-container-color": {
+			value: color("inverse-surface"),
+			description: "The value indicator’s container.",
+			compose: "SliderTokens.ValueIndicatorContainerColor",
+			paints: {
+				property: "background-color",
+				slot: "value-indicator"
+			}
+		},
+		"value-indicator-label-label-text-color": {
+			value: color("inverse-on-surface"),
+			description: "The value indicator’s text.",
+			compose: "SliderTokens.ValueIndicatorLabelTextColor",
+			paints: {
+				property: "color",
+				slot: "value-indicator"
+			}
+		}
+	}
+});
+//#endregion
+export { sliderTokenSet };
+
+//# sourceMappingURL=slider-tokens.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slider-tokens.js","names":[],"sources":["../../../src/components/slider/slider-tokens.ts"],"sourcesContent":["import { color, defineComponentTokens } from '../../tokens/component';\n\n/*\n * The slider's component tokens, M3's `md.comp.slider.*` names (checked against\n * m3.material.io's token tables, 2026-10-14), with Compose's SliderTokens defaults. One set\n * for every size and both orientations. Disabled values, the stop indicators on the active\n * track and the inset icons stay classes.\n */\n\n/** The tokens of {@link Slider} and {@link RangeSlider}: `--md-comp-slider-<part>`. */\nexport const sliderTokenSet = defineComponentTokens({\n  name: 'md-comp-slider',\n  tokens: {\n    'active-track-color': {\n      value: color('primary'),\n      description: 'The track between the start (or the other thumb) and the handle.',\n      compose: 'SliderTokens.ActiveTrackColor',\n      paints: { property: 'background-color', slot: 'active-track' },\n    },\n    'inactive-track-color': {\n      value: color('secondary-container'),\n      description: 'The rest of the track.',\n      compose: 'SliderTokens.InactiveTrackColor',\n      paints: { property: 'background-color', slot: 'inactive-track' },\n    },\n    'handle-color': {\n      value: color('primary'),\n      description: 'The handle.',\n      compose: 'SliderTokens.HandleColor',\n      paints: { property: 'background-color', slot: 'handle' },\n    },\n    'stop-indicator-color': {\n      value: color('on-secondary-container'),\n      description: 'The stop indicators and tick marks on the inactive track.',\n      compose: 'SliderTokens.StopIndicatorColor',\n      paints: { property: 'background-color', slot: 'stop-indicator' },\n    },\n    'value-indicator-container-color': {\n      value: color('inverse-surface'),\n      description: 'The value indicator’s container.',\n      compose: 'SliderTokens.ValueIndicatorContainerColor',\n      paints: { property: 'background-color', slot: 'value-indicator' },\n    },\n    'value-indicator-label-label-text-color': {\n      value: color('inverse-on-surface'),\n      description: 'The value indicator’s text.',\n      compose: 'SliderTokens.ValueIndicatorLabelTextColor',\n      paints: { property: 'color', slot: 'value-indicator' },\n    },\n  },\n});\n"],"mappings":";;;AAUA,MAAa,iBAAiB,sBAAsB;CAClD,MAAM;CACN,QAAQ;EACN,sBAAsB;GACpB,OAAO,MAAM,SAAS;GACtB,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAoB,MAAM;GAAe;EAC/D;EACA,wBAAwB;GACtB,OAAO,MAAM,qBAAqB;GAClC,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAoB,MAAM;GAAiB;EACjE;EACA,gBAAgB;GACd,OAAO,MAAM,SAAS;GACtB,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAoB,MAAM;GAAS;EACzD;EACA,wBAAwB;GACtB,OAAO,MAAM,wBAAwB;GACrC,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAoB,MAAM;GAAiB;EACjE;EACA,mCAAmC;GACjC,OAAO,MAAM,iBAAiB;GAC9B,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAoB,MAAM;GAAkB;EAClE;EACA,0CAA0C;GACxC,OAAO,MAAM,oBAAoB;GACjC,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAS,MAAM;GAAkB;EACvD;CACF;AACF,CAAC"}

package/dist/components/slider/use-touch-track.js

@@ -0,0 +1,138 @@
+"use client";
+import { useEffect, useRef } from "react";
+/** The thumb nearest to `value`, picked as React Aria's track press picks it. */
+function closestThumb(state, value) {
+	const split = state.values.findIndex((v) => value - v < 0);
+	if (split === 0) return 0;
+	if (split === -1) return state.values.length - 1;
+	const before = state.values[split - 1];
+	const after = state.values[split];
+	return Math.abs(before - value) < Math.abs(after - value) ? split - 1 : split;
+}
+/**
+* Touch and pen presses on a slider's track, as Compose's slider takes them
+* (`Slider.kt`: `draggable(orientation)` and a tap that sets the value on release).
+* React Aria sets the value on pointer down and claims every move, so a vertical swipe that
+* started on a horizontal slider changed its value and never scrolled the page. Here a touch
+* changes nothing until it either lifts (a tap: the nearest thumb jumps there) or moves
+* `TOUCH_SLOP` along the track (a drag: the nearest thumb follows the finger). A swipe across
+* the track is left to the browser, which scrolls (the slider's `touch-action` allows the
+* cross axis) and cancels the pointer. Mouse presses keep React Aria's handling.
+*
+* With drawn stops (`discrete`), every press, the mouse's too, maps through the corner inset
+* the stops and thumb are drawn with (`(offset − corner) / (length − 2 × corner)`), so a tap
+* on a drawn stop selects that stop: React Aria's linear mapping picked the next one near the
+* ends of a large slider, whose corners are wider than half a step (2026-10-17).
+*
+* Returns handlers that wrap React Aria's `trackProps`.
+*/
+function useTouchTrack(trackProps, { state, trackRef, orientation, direction, disabled, discrete = false }) {
+	const vertical = orientation === "vertical";
+	const cleanup = useRef(null);
+	useEffect(() => () => cleanup.current?.(), []);
+	/** The track's corner in px (`--m3-slider-corner`, which a token may set as any length). */
+	const cornerOf = (track) => {
+		if (!discrete) return 0;
+		const probe = track.ownerDocument.createElement("div");
+		probe.style.cssText = "position:absolute;visibility:hidden;width:var(--m3-slider-corner)";
+		track.append(probe);
+		const corner = probe.getBoundingClientRect().width;
+		probe.remove();
+		return corner;
+	};
+	const percentAt = (clientX, clientY, corner) => {
+		const rect = trackRef.current.getBoundingClientRect();
+		const size = vertical ? rect.height : rect.width;
+		const offset = vertical ? rect.bottom - clientY : direction === "rtl" ? rect.right - clientX : clientX - rect.left;
+		const span = size - 2 * corner;
+		const percent = span > 0 ? (offset - corner) / span : 0;
+		return Math.min(1, Math.max(0, percent));
+	};
+	const onPointerDown = (event) => {
+		const mouse = event.pointerType === "mouse";
+		const onThumb = event.target.closest?.("[data-thumb]");
+		if (mouse && (!discrete || event.button !== 0) || onThumb || disabled || !trackRef.current || state.values.some((_, index) => state.isThumbDragging(index))) {
+			trackProps.onPointerDown?.(event);
+			return;
+		}
+		event.preventDefault();
+		cleanup.current?.();
+		const { pointerId, clientX: startX, clientY: startY } = event;
+		const track = trackRef.current;
+		const corner = cornerOf(track);
+		let dragging = null;
+		const startDragging = (index, percent) => {
+			dragging = index;
+			try {
+				track.setPointerCapture(pointerId);
+			} catch {}
+			state.setFocusedThumb(index);
+			state.setThumbDragging(index, true);
+			state.setThumbPercent(index, percent);
+		};
+		if (mouse) {
+			const percent = percentAt(startX, startY, corner);
+			const index = closestThumb(state, state.getPercentValue(percent));
+			if (!state.isThumbEditable(index)) return;
+			startDragging(index, percent);
+		}
+		const move = (e) => {
+			if (e.pointerId !== pointerId) return;
+			if (dragging === null) {
+				const along = Math.abs(vertical ? e.clientY - startY : e.clientX - startX);
+				const across = Math.abs(vertical ? e.clientX - startX : e.clientY - startY);
+				if (across >= 8 && across >= along) return end();
+				if (along < 8 || along <= across) return;
+				const percent = percentAt(e.clientX, e.clientY, corner);
+				const index = closestThumb(state, state.getPercentValue(percent));
+				if (!state.isThumbEditable(index)) return end();
+				startDragging(index, percent);
+				return;
+			}
+			state.setThumbPercent(dragging, percentAt(e.clientX, e.clientY, corner));
+		};
+		const up = (e) => {
+			if (e.pointerId !== pointerId) return;
+			if (dragging !== null) state.setThumbDragging(dragging, false);
+			else {
+				const value = state.getPercentValue(percentAt(e.clientX, e.clientY, corner));
+				const index = closestThumb(state, value);
+				if (state.isThumbEditable(index)) {
+					state.setFocusedThumb(index);
+					state.setThumbDragging(index, true);
+					state.setThumbValue(index, value);
+					state.setThumbDragging(index, false);
+				}
+			}
+			end();
+		};
+		const cancel = (e) => {
+			if (e.pointerId !== pointerId) return;
+			if (dragging !== null) state.setThumbDragging(dragging, false);
+			end();
+		};
+		function end() {
+			window.removeEventListener("pointermove", move);
+			window.removeEventListener("pointerup", up);
+			window.removeEventListener("pointercancel", cancel);
+			cleanup.current = null;
+		}
+		window.addEventListener("pointermove", move);
+		window.addEventListener("pointerup", up);
+		window.addEventListener("pointercancel", cancel);
+		cleanup.current = end;
+	};
+	return {
+		...trackProps,
+		onPointerDown,
+		onTouchStart: typeof PointerEvent === "undefined" ? trackProps.onTouchStart : void 0,
+		style: {
+			...trackProps.style,
+			touchAction: vertical ? "pan-x" : "pan-y"
+		}
+	};
+}
+//#endregion
+export { useTouchTrack };
+
+//# sourceMappingURL=use-touch-track.js.map

package/dist/components/slider/use-touch-track.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-touch-track.js","names":[],"sources":["../../../src/components/slider/use-touch-track.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, type HTMLAttributes, type PointerEvent, type RefObject } from 'react';\nimport type { SliderState } from 'react-stately';\n\n/** How far a touch moves along the track before it drags the slider (Android's touch slop). */\nexport const TOUCH_SLOP = 8;\n\ninterface TouchTrackOptions {\n  state: SliderState;\n  trackRef: RefObject<HTMLElement | null>;\n  orientation: 'horizontal' | 'vertical';\n  direction: 'ltr' | 'rtl';\n  disabled: boolean;\n  /**\n   * A discrete slider with drawn stops (`ticks`): its values are spread between the track's\n   * corners (`positionOf`), so a press maps back through the same inset.\n   */\n  discrete?: boolean;\n}\n\n/** The thumb nearest to `value`, picked as React Aria's track press picks it. */\nfunction closestThumb(state: SliderState, value: number): number {\n  const split = state.values.findIndex((v) => value - v < 0);\n  if (split === 0) return 0;\n  if (split === -1) return state.values.length - 1;\n  const before = state.values[split - 1]!;\n  const after = state.values[split]!;\n  return Math.abs(before - value) < Math.abs(after - value) ? split - 1 : split;\n}\n\n/**\n * Touch and pen presses on a slider's track, as Compose's slider takes them\n * (`Slider.kt`: `draggable(orientation)` and a tap that sets the value on release).\n * React Aria sets the value on pointer down and claims every move, so a vertical swipe that\n * started on a horizontal slider changed its value and never scrolled the page. Here a touch\n * changes nothing until it either lifts (a tap: the nearest thumb jumps there) or moves\n * `TOUCH_SLOP` along the track (a drag: the nearest thumb follows the finger). A swipe across\n * the track is left to the browser, which scrolls (the slider's `touch-action` allows the\n * cross axis) and cancels the pointer. Mouse presses keep React Aria's handling.\n *\n * With drawn stops (`discrete`), every press, the mouse's too, maps through the corner inset\n * the stops and thumb are drawn with (`(offset − corner) / (length − 2 × corner)`), so a tap\n * on a drawn stop selects that stop: React Aria's linear mapping picked the next one near the\n * ends of a large slider, whose corners are wider than half a step (2026-10-17).\n *\n * Returns handlers that wrap React Aria's `trackProps`.\n */\nexport function useTouchTrack(\n  trackProps: HTMLAttributes<HTMLElement>,\n  { state, trackRef, orientation, direction, disabled, discrete = false }: TouchTrackOptions,\n): HTMLAttributes<HTMLElement> {\n  const vertical = orientation === 'vertical';\n  const cleanup = useRef<(() => void) | null>(null);\n  useEffect(() => () => cleanup.current?.(), []);\n\n  /** The track's corner in px (`--m3-slider-corner`, which a token may set as any length). */\n  const cornerOf = (track: HTMLElement) => {\n    if (!discrete) return 0;\n    const probe = track.ownerDocument.createElement('div');\n    probe.style.cssText = 'position:absolute;visibility:hidden;width:var(--m3-slider-corner)';\n    track.append(probe);\n    const corner = probe.getBoundingClientRect().width;\n    probe.remove();\n    return corner;\n  };\n\n  const percentAt = (clientX: number, clientY: number, corner: number) => {\n    const rect = trackRef.current!.getBoundingClientRect();\n    const size = vertical ? rect.height : rect.width;\n    // Along the track from its minimum end.\n    const offset = vertical\n      ? rect.bottom - clientY\n      : direction === 'rtl'\n        ? rect.right - clientX\n        : clientX - rect.left;\n    const span = size - 2 * corner;\n    const percent = span > 0 ? (offset - corner) / span : 0;\n    return Math.min(1, Math.max(0, percent));\n  };\n\n  const onPointerDown = (event: PointerEvent<HTMLElement>) => {\n    const mouse = event.pointerType === 'mouse';\n    // A press on a thumb drags that thumb (React Aria's thumb handling).\n    const onThumb = (event.target as Element).closest?.('[data-thumb]');\n    if (\n      (mouse && (!discrete || event.button !== 0)) ||\n      onThumb ||\n      disabled ||\n      !trackRef.current ||\n      state.values.some((_, index) => state.isThumbDragging(index))\n    ) {\n      trackProps.onPointerDown?.(event);\n      return;\n    }\n    // No compatibility mouse events (React Aria's `onMouseDown` would set the value);\n    // `touch-action` still lets the browser scroll.\n    event.preventDefault();\n    cleanup.current?.();\n    const { pointerId, clientX: startX, clientY: startY } = event;\n    const track = trackRef.current;\n    const corner = cornerOf(track);\n    let dragging: number | null = null;\n    const startDragging = (index: number, percent: number) => {\n      dragging = index;\n      try {\n        track.setPointerCapture(pointerId);\n      } catch {\n        // The pointer may already be gone.\n      }\n      state.setFocusedThumb(index);\n      state.setThumbDragging(index, true);\n      state.setThumbPercent(index, percent);\n    };\n    // The mouse (on a discrete slider) sets the value as it goes down and drags from there,\n    // as React Aria does; a touch waits to tell a tap, a drag and a scroll apart.\n    if (mouse) {\n      const percent = percentAt(startX, startY, corner);\n      const index = closestThumb(state, state.getPercentValue(percent));\n      if (!state.isThumbEditable(index)) return;\n      startDragging(index, percent);\n    }\n\n    const move = (e: globalThis.PointerEvent) => {\n      if (e.pointerId !== pointerId) return;\n      if (dragging === null) {\n        const along = Math.abs(vertical ? e.clientY - startY : e.clientX - startX);\n        const across = Math.abs(vertical ? e.clientX - startX : e.clientY - startY);\n        // A move across the track belongs to the page (or a sheet the slider sits in): it's\n        // no longer a tap either.\n        if (across >= TOUCH_SLOP && across >= along) return end();\n        if (along < TOUCH_SLOP || along <= across) return;\n        const percent = percentAt(e.clientX, e.clientY, corner);\n        const index = closestThumb(state, state.getPercentValue(percent));\n        if (!state.isThumbEditable(index)) return end();\n        startDragging(index, percent);\n        return;\n      }\n      state.setThumbPercent(dragging, percentAt(e.clientX, e.clientY, corner));\n    };\n    const up = (e: globalThis.PointerEvent) => {\n      if (e.pointerId !== pointerId) return;\n      if (dragging !== null) {\n        state.setThumbDragging(dragging, false);\n      } else {\n        // A tap: the nearest thumb jumps to it on release.\n        const value = state.getPercentValue(percentAt(e.clientX, e.clientY, corner));\n        const index = closestThumb(state, value);\n        if (state.isThumbEditable(index)) {\n          state.setFocusedThumb(index);\n          state.setThumbDragging(index, true);\n          state.setThumbValue(index, value);\n          state.setThumbDragging(index, false);\n        }\n      }\n      end();\n    };\n    // The browser took the touch to scroll: nothing changes.\n    const cancel = (e: globalThis.PointerEvent) => {\n      if (e.pointerId !== pointerId) return;\n      if (dragging !== null) state.setThumbDragging(dragging, false);\n      end();\n    };\n    function end() {\n      window.removeEventListener('pointermove', move);\n      window.removeEventListener('pointerup', up);\n      window.removeEventListener('pointercancel', cancel);\n      cleanup.current = null;\n    }\n    window.addEventListener('pointermove', move);\n    window.addEventListener('pointerup', up);\n    window.addEventListener('pointercancel', cancel);\n    cleanup.current = end;\n  };\n\n  return {\n    ...trackProps,\n    onPointerDown,\n    // Touches arrive as pointer events; React Aria's touch handler would set the value on\n    // touch start.\n    onTouchStart: typeof PointerEvent === 'undefined' ? trackProps.onTouchStart : undefined,\n    style: { ...trackProps.style, touchAction: vertical ? 'pan-x' : 'pan-y' },\n  };\n}\n"],"mappings":"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"}

package/dist/components/snackbar/Snackbar.d.ts

@@ -0,0 +1,96 @@
+import { SnackbarData, SnackbarHostState } from "./snackbar-state.js";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/snackbar/Snackbar.d.ts
+export interface SnackbarClassNames {
+  /** The snackbar's container. */
+  root?: string;
+  /** The message text. */
+  message?: string;
+  /** The row holding the action and dismiss buttons. */
+  actions?: string;
+  /** The action button. */
+  action?: string;
+  /** The dismiss (×) button. */
+  dismiss?: string;
+}
+export interface SnackbarLabels {
+  /** Name of the dismiss (×) button. @default "Dismiss" */
+  dismiss: string;
+}
+interface SnackbarOwnProps {
+  /** The message. */
+  children: React.ReactNode;
+  /** Label of the action button. */
+  actionLabel?: string;
+  /** Called when the action button is pressed. */
+  onAction?: () => void;
+  /** Shows a dismiss (×) button that calls this. Escape calls it too. */
+  onDismiss?: () => void;
+  /**
+   * Called on Escape while focus is inside, which dismisses a snackbar with or without the ×
+   * button. @default onDismiss
+   */
+  onEscape?: () => void;
+  /** Words the snackbar announces, with English defaults. */
+  labels?: Partial<SnackbarLabels>;
+  /** Put the actions under the message, for long action labels. @default false */
+  actionOnNewLine?: boolean;
+  /** Classes for each part, by slot. `classNames.root` is merged with `className`. */
+  classNames?: SnackbarClassNames;
+}
+export type SnackbarProps = SnackbarOwnProps & Omit<ComponentPropsWithRef<'div'>, keyof SnackbarOwnProps>;
+/**
+ * M3 snackbar: a brief message about an app process, with an optional action and dismiss
+ * button. Usually shown through a {@link SnackbarHost}; render it directly for custom
+ * placement. Escape dismisses it while focus is inside (`onEscape`, or `onDismiss`).
+ *
+ * Outside a host it announces its message politely itself, when it appears and when the
+ * message changes, without moving focus (the host's live region does this inside one).
+ *
+ * @example
+ * <Snackbar actionLabel="Undo" onAction={undo} onDismiss={close}>Message archived</Snackbar>
+ */
+export declare function Snackbar({ children, actionLabel, onAction, onDismiss, onEscape, labels: labelsProp, actionOnNewLine, classNames, className, onKeyDown, ...rest }: SnackbarProps): import("react").JSX.Element;
+/** A {@link SnackbarHostState} that lives as long as the component. */
+export declare function useSnackbarHostState(): SnackbarHostState;
+export interface SnackbarHostProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
+  /** The queue of snackbars to show, from `useSnackbarHostState()`. */
+  state: SnackbarHostState;
+  /** Renders each snackbar; defaults to {@link Snackbar}. */
+  snackbar?: (data: SnackbarData) => React.ReactNode;
+  /** Words each default snackbar announces, with English defaults. */
+  labels?: Partial<SnackbarLabels>;
+  /**
+   * The key combination that moves focus to a snackbar with actions, as the spec asks for on
+   * the web. F6 by default, the key React Aria's toasts take (browsers use it to move between
+   * the window's panes): while a snackbar with a control shows, F6 goes to it from anywhere on
+   * the page, and pressed again there it stays. Document it where your app lists its
+   * shortcuts. `false` turns it off.
+   * @default "F6"
+   */
+  focusShortcut?: string | false;
+}
+/**
+ * Shows the snackbars of a {@link SnackbarHostState} one at a time, in a polite live
+ * region. Position it with `className` (e.g. `fixed inset-x-0 bottom-0`); a snackbar
+ * expands upward from the bottom edge as it enters.
+ *
+ * - Snackbars without an action leave after 4s (`short`) or 10s (`long`); the timer pauses
+ *   while the pointer or focus is on the snackbar. On the web, use an auto-dismissing
+ *   snackbar only alongside inline feedback for the same event: it may be gone before
+ *   someone reads it. Snackbars with an action stay until acted on or dismissed.
+ * - The live region is rendered empty first: a snackbar shown before the host mounts (one
+ *   at launch) appears once the region has been registered, so it's announced.
+ * - `focusShortcut` (F6) moves focus to a snackbar with actions; Escape dismisses it.
+ *   When it leaves, focus returns to where it was before it entered the snackbar; if that
+ *   element is gone (an undone row was removed, say), to the control that followed it in
+ *   the Tab order, or else the one before it.
+ *
+ * @example
+ * const snackbar = useSnackbarHostState();
+ * <SnackbarHost state={snackbar} className="fixed inset-x-0 bottom-0" />
+ * snackbar.showSnackbar({ message: 'Saved' });
+ */
+export declare function SnackbarHost({ state, snackbar, labels, focusShortcut, className, ref, ...rest }: SnackbarHostProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=Snackbar.d.ts.map