entasis 0.11.0 → 0.12.0

package/dist/components/Form/Slider/Slider.svelte

@@ -2,13 +2,13 @@
 	import { untrack } from 'svelte';
 	import Slot from '../../Slot/Slot.svelte';
 	import Field from '../Field/Field.svelte';
-	import { createFieldState } from '../Field/field.state.svelte.js';
+	import { createFieldState, type FieldState } from '../Field/field.state.svelte.js';
 	import SliderTrack from './SliderTrack.svelte';
 	import SliderValueLabels from './SliderValueLabels.svelte';
 	import type { SliderProps } from './slider.props.js';
 	import { SliderState } from './slider.state.svelte.js';
 	import { useSliderTheme } from './slider.theme.js';
-	import { useI18n } from '../../../i18n/context.svelte.js';
+	import { useI18n, useI18nDirection } from '../../../i18n/context.svelte.js';
 	import { useDefaultColor } from '../../Theme/theme.state.svelte.js';
 
 	let {
@@ -22,10 +22,13 @@
 		required = false,
 		theme,
 		disabled,
+		readOnly,
+		messages,
 		name,
 		onValidate,
 		visible,
 		onValueChange,
+		onValueCommit,
 		color,
 		marks = [],
 		showValue = false,
@@ -37,27 +40,39 @@
 		thumbs,
 		orientation = 'horizontal',
 		minStepsBetweenThumbs = 0,
+		thumbCollisionBehavior = 'none',
+		thumbDisabled,
+		largeStep,
 		dragRange = false,
 		thumbLabels = [],
 		size = 'normal',
 		i18n,
 		label,
+		fieldAttrs,
 		...rest
 	}: SliderProps = $props();
 	if (value === undefined) value = untrack(() => defaultValue);
 
 	const t = $derived(useI18n(i18n));
+	// An i18n direction that the document does not carry still has to mirror the whole field, so
+	// the label lines up with the track and the thumbs' logical positions agree with the arrow
+	// keys and the pointer reading, which follow that direction too.
+	const contextualDirection = $derived(useI18nDirection());
+	const directionAttributes = $derived(contextualDirection ? { dir: contextualDirection } : {});
 	const resolvedColor = $derived(useDefaultColor(color));
 
 	const id = $props.id();
 
-	const slider = new SliderState({
+	const slider: SliderState = new SliderState({
 		get value() {
 			return value;
 		},
 		set value(v) {
 			field.setValue(v);
 		},
+		get mode() {
+			return mode;
+		},
 		get min() {
 			return min;
 		},
@@ -67,21 +82,38 @@
 		get step() {
 			return step;
 		},
+		get largeStep() {
+			return largeStep;
+		},
 		get thumbs() {
 			return thumbs ?? (mode === 'range' ? 2 : undefined);
 		},
 		get minStepsBetweenThumbs() {
 			return minStepsBetweenThumbs;
 		},
+		get thumbCollisionBehavior() {
+			return thumbCollisionBehavior;
+		},
+		get thumbDisabled() {
+			return thumbDisabled;
+		},
 		get orientation() {
 			return orientation;
 		},
-		get disabled() {
-			return disabled;
+		// The field's effective state: its own, or a disabled Form or group around it.
+		get disabled(): boolean {
+			return field.disabled;
+		},
+		// Refused edits: the field's effective read-only state, or that of a Form around it.
+		get readOnly(): boolean {
+			return field.readOnly;
 		},
 		get dragRange() {
 			return dragRange;
 		},
+		get onValueCommit() {
+			return onValueCommit;
+		},
 		get focused() {
 			return focused;
 		},
@@ -93,10 +125,14 @@
 		}
 	});
 
-	const field = createFieldState<'slider' | 'slider-range'>({
+	// The field reads the slider value only through `fieldValue`, which keeps one plain array while
+	// the numbers are unchanged: a Form that writes the value back as a new proxy is not a change.
+	const hasValue = $derived(value !== undefined);
+
+	const field: FieldState<'slider' | 'slider-range'> = createFieldState<'slider' | 'slider-range'>({
 		id,
 		get value() {
-			return value === undefined ? undefined : slider.fieldValue;
+			return hasValue ? slider.fieldValue : undefined;
 		},
 		set value(v) {
 			value = v;
@@ -120,6 +156,12 @@
 		set disabled(v: boolean | undefined) {
 			disabled = v;
 		},
+		get readOnly() {
+			return readOnly;
+		},
+		get messages() {
+			return messages;
+		},
 		get required() {
 			return required;
 		},
@@ -163,7 +205,7 @@
 				? t.maximumValue
 				: t.sliderThumbValue(index + 1);
 	};
-	const setFirstThumb = (node: HTMLButtonElement | null) => {
+	const setFirstThumb = (node: HTMLInputElement | null) => {
 		field.node = node;
 	};
 </script>
@@ -172,6 +214,7 @@
 	{field}
 	{size}
 	label={hasContainedLayout ? undefined : label}
+	fieldAttrs={{ ...fieldAttrs, ...directionAttributes }}
 	theme={{
 		...(theme || {}),
 		inputContainer: {
@@ -186,10 +229,6 @@
 	{...rest}
 >
 	<div class={classes.root({ orientation: slider.orientationValue, size })}>
-		{#each slider.values as hiddenValue, index (index)}
-			<input type="hidden" name={field.name} value={hiddenValue} disabled={slider.disabled} />
-		{/each}
-
 		<div
 			class={classes.control({
 				orientation: slider.orientationValue,
@@ -201,7 +240,7 @@
 			{#if hasContainedLayout && label}
 				<Slot
 					as="label"
-					attrs={{ for: id }}
+					attrs={{ for: id, id: field.labelId }}
 					render={label}
 					class={classes.containedLabel({
 						size,
@@ -220,7 +259,8 @@
 				{variant}
 				{size}
 				{marks}
-				{groupLabel}
+				{field}
+				groupLabelId={label ? field.labelId : undefined}
 				{getThumbLabel}
 				{t}
 			/>

package/dist/components/Form/Slider/SliderMarks.svelte

@@ -24,7 +24,7 @@
 		if (slider.orientationValue === 'vertical') {
 			return `bottom: ${percentage}%;`;
 		}
-		return `left: ${percentage}%;`;
+		return `inset-inline-start: ${percentage}%;`;
 	};
 </script>
 

package/dist/components/Form/Slider/SliderThumb.svelte

@@ -14,12 +14,16 @@
 		describedBy,
 		orientation,
 		disabled,
+		readOnly,
+		required,
+		name,
 		variant,
 		color,
 		size,
 		classes,
 		onRef,
 		attachment,
+		inputAttachment,
 		hitboxAttachment
 	}: {
 		id: string;
@@ -28,12 +32,18 @@
 		describedBy?: string;
 		orientation: SliderOrientation;
 		disabled?: boolean;
+		readOnly?: boolean;
+		/** A value is required; a range input has no native `required`, so the thumb announces it. */
+		required?: boolean;
+		/** Submitted name of this thumb's range input. */
+		name?: string;
 		variant: SliderVariant;
 		color: Colors;
 		size?: Sizes;
 		classes: SliderClasses;
-		onRef?: (node: HTMLButtonElement | null) => void;
-		attachment: Attachment<HTMLButtonElement>;
+		onRef?: (node: HTMLInputElement | null) => void;
+		attachment: Attachment<HTMLElement>;
+		inputAttachment: Attachment<HTMLInputElement>;
 		hitboxAttachment: Attachment<HTMLElement>;
 	} = $props();
 
@@ -69,12 +79,13 @@
 
 	const thumbPositionStyle = $derived.by(() => {
 		const containedPosition = `clamp(${getThumbMinPosition()}, ${payload.percentage}%, ${getThumbMaxPosition()})`;
+		// inset-inline-start mirrors a horizontal track in RTL, matching the mirrored arrow keys.
 		return orientation === 'vertical'
 			? `bottom: ${containedPosition};`
-			: `left: ${containedPosition};`;
+			: `inset-inline-start: ${containedPosition};`;
 	});
 
-	const registerRef = (node: HTMLButtonElement) => {
+	const registerRef = (node: HTMLInputElement) => {
 		onRef?.(node);
 		return () => onRef?.(null);
 	};
@@ -87,36 +98,55 @@
 	class={classes.thumbHitbox({
 		orientation,
 		disabled,
+		readOnly,
 		variant,
 		size
 	})}
 	style={thumbPositionStyle}
 ></span>
 
-<button
-	{@attach registerRef}
+<span
 	{@attach attachment}
-	{id}
-	type="button"
-	role="slider"
-	data-slider-thumb
-	aria-label={label}
-	aria-describedby={describedBy}
-	aria-orientation={orientation}
-	aria-valuemin={payload.thumbMin}
-	aria-valuemax={payload.thumbMax}
-	aria-valuenow={payload.value}
-	aria-valuetext={payload.formatted}
-	{disabled}
+	data-slider-thumb-root
+	data-disabled={disabled ? '' : undefined}
+	data-readonly={readOnly ? '' : undefined}
 	class={classes.thumb({
 		orientation,
 		disabled,
+		readOnly,
 		variant,
 		color,
 		size
 	})}
 	style={thumbPositionStyle}
 >
+	<!-- The one focus target. Pointer input goes through the thumb around it; assistive technology
+	     adjusts the range input itself, which is what mobile screen-reader gestures need. -->
+	<!-- aria-required on a slider is ARIA 1.3 (axe accepts it); a range input has no native `required`. -->
+	<!-- svelte-ignore a11y_role_supports_aria_props_implicit -->
+	<input
+		{@attach registerRef}
+		{@attach inputAttachment}
+		{id}
+		{name}
+		type="range"
+		data-slider-thumb
+		class="pointer-events-none absolute inset-0 m-0 size-full opacity-0"
+		aria-label={label}
+		aria-describedby={describedBy}
+		aria-orientation={orientation}
+		aria-valuemin={payload.thumbMin}
+		aria-valuemax={payload.thumbMax}
+		aria-valuenow={payload.value}
+		aria-valuetext={payload.formatted}
+		aria-readonly={readOnly || undefined}
+		aria-required={required || undefined}
+		min={payload.thumbMin}
+		max={payload.thumbMax}
+		step={payload.step}
+		value={payload.value}
+		{disabled}
+	/>
 	<span
 		aria-hidden="true"
 		data-slider-thumb-visual
@@ -127,4 +157,4 @@
 			size
 		})}
 	></span>
-</button>
+</span>

package/dist/components/Form/Slider/SliderThumb.svelte.d.ts

@@ -11,12 +11,18 @@ type $$ComponentProps = {
     describedBy?: string;
     orientation: SliderOrientation;
     disabled?: boolean;
+    readOnly?: boolean;
+    /** A value is required; a range input has no native `required`, so the thumb announces it. */
+    required?: boolean;
+    /** Submitted name of this thumb's range input. */
+    name?: string;
     variant: SliderVariant;
     color: Colors;
     size?: Sizes;
     classes: SliderClasses;
-    onRef?: (node: HTMLButtonElement | null) => void;
-    attachment: Attachment<HTMLButtonElement>;
+    onRef?: (node: HTMLInputElement | null) => void;
+    attachment: Attachment<HTMLElement>;
+    inputAttachment: Attachment<HTMLInputElement>;
     hitboxAttachment: Attachment<HTMLElement>;
 };
 declare const SliderThumb: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/Form/Slider/SliderTrack.svelte

@@ -3,6 +3,8 @@
 	import type { Messages } from '../../../i18n/en.js';
 	import type { SliderMark, SliderVariant } from './slider.props.js';
 	import type { SliderState } from './slider.state.svelte.js';
+	import FieldHiddenInputs from '../Field/FieldHiddenInputs.svelte';
+	import type { FieldState } from '../Field/field.state.svelte.js';
 	import SliderMarks from './SliderMarks.svelte';
 	import SliderThumb from './SliderThumb.svelte';
 	import type { useSliderTheme } from './slider.theme.js';
@@ -17,7 +19,8 @@
 		variant,
 		size,
 		marks,
-		groupLabel,
+		field,
+		groupLabelId,
 		getThumbLabel,
 		onFirstThumbRef,
 		t
@@ -29,9 +32,12 @@
 		variant: SliderVariant;
 		size?: Sizes;
 		marks: SliderMark[];
-		groupLabel?: string;
+		/** The field: it names the submitted inputs and says whether edits are refused. */
+		field: FieldState<'slider' | 'slider-range'>;
+		/** Id of the rendered label, which names the track group whatever the label is made of. */
+		groupLabelId?: string;
 		getThumbLabel: (index: number) => string | undefined;
-		onFirstThumbRef?: (node: HTMLButtonElement | null) => void;
+		onFirstThumbRef?: (node: HTMLInputElement | null) => void;
 		t: Messages;
 	} = $props();
 
@@ -40,7 +46,7 @@
 		if (size === 'large') return '18px';
 		return '14px';
 	};
-	const setFirstThumb = (node: HTMLButtonElement | null) => {
+	const setFirstThumb = (node: HTMLInputElement | null) => {
 		onFirstThumbRef?.(node);
 	};
 	const getThickThumbSize = () => {
@@ -58,6 +64,11 @@
 		return '6px';
 	};
 	const getContainedRangeEndOffset = () => getContainedRangeMinimum();
+	// FieldState names an unnamed field `${type}-input-${id}` so Form wiring stays unique. Only a
+	// name the app gave, directly or through Form, is submitted, as for a native control.
+	const submittedName = $derived(
+		field.name === `${field.type}-input-${field.id}` ? undefined : field.name
+	);
 	const instructionsId = $derived(`${id}-instructions`);
 	const instructions = $derived(
 		slider.isRange ? t.sliderInstructionsRange : t.sliderInstructionsSingle
@@ -82,7 +93,7 @@
 	const rangeStyle = $derived(
 		slider.orientationValue === 'vertical'
 			? `bottom: ${rangeStartPercentage}%; height: ${getRangeLength()};`
-			: `left: ${rangeStartPercentage}%; width: ${getRangeLength()};`
+			: `inset-inline-start: ${rangeStartPercentage}%; width: ${getRangeLength()};`
 	);
 </script>
 
@@ -96,10 +107,12 @@
 			size,
 			color,
 			variant,
-			disabled: slider.disabled
+			disabled: slider.disabled,
+			readOnly: field.readOnly
 		})}
-		aria-label={groupLabel}
+		aria-labelledby={groupLabelId}
 		aria-disabled={slider.disabled}
+		data-readonly={field.readOnly ? '' : undefined}
 		aria-describedby={instructionsId}
 	>
 		<div class={classes.trackBackground({ orientation: slider.orientationValue, variant })}></div>
@@ -113,7 +126,7 @@
 						class={classes.containedTick({ orientation: slider.orientationValue, size })}
 						style={slider.orientationValue === 'vertical'
 							? `bottom: ${percentage}%;`
-							: `left: ${percentage}%;`}
+							: `inset-inline-start: ${percentage}%;`}
 					></span>
 				{/each}
 			</div>
@@ -125,27 +138,35 @@
 				orientation: slider.orientationValue,
 				variant,
 				size,
-				dragRange: !!slider.dragRange && slider.isRange
+				dragRange: slider.canDragRange
 			})}
 			style={rangeStyle}
 		></div>
 
 		{#each slider.valuePayloads as payload (payload.index)}
 			<SliderThumb
-				onRef={payload.index === 0 ? setFirstThumb : undefined}
-				id={payload.index === 0 ? id : `${id}-thumb-${payload.index}`}
+				onRef={payload.index === slider.controlIndex ? setFirstThumb : undefined}
+				id={payload.index === slider.controlIndex ? id : `${id}-thumb-${payload.index}`}
 				{payload}
 				label={getThumbLabel(payload.index)}
 				describedBy={instructionsId}
 				orientation={slider.orientationValue}
-				disabled={slider.disabled}
+				disabled={slider.isThumbDisabled(payload.index)}
+				readOnly={field.readOnly}
+				required={field.required}
+				name={submittedName}
 				{variant}
 				{color}
 				{size}
 				{classes}
 				attachment={slider.thumb(payload.index)}
+				inputAttachment={slider.thumbInput(payload.index)}
 				hitboxAttachment={slider.thumbHitbox(payload.index)}
 			/>
+			{#if slider.isThumbLocked(payload.index)}
+				<!-- A disabled range input submits nothing; the thumb keeps its place in the value. -->
+				<FieldHiddenInputs {field} value={payload.value} name={submittedName} />
+			{/if}
 		{/each}
 	</div>
 

package/dist/components/Form/Slider/SliderTrack.svelte.d.ts

@@ -2,6 +2,7 @@ import type { Colors, Sizes } from '../../../types/theme.js';
 import type { Messages } from '../../../i18n/en.js';
 import type { SliderMark, SliderVariant } from './slider.props.js';
 import type { SliderState } from './slider.state.svelte.js';
+import type { FieldState } from '../Field/field.state.svelte.js';
 import type { useSliderTheme } from './slider.theme.js';
 type SliderClasses = ReturnType<typeof useSliderTheme>;
 type $$ComponentProps = {
@@ -12,9 +13,12 @@ type $$ComponentProps = {
     variant: SliderVariant;
     size?: Sizes;
     marks: SliderMark[];
-    groupLabel?: string;
+    /** The field: it names the submitted inputs and says whether edits are refused. */
+    field: FieldState<'slider' | 'slider-range'>;
+    /** Id of the rendered label, which names the track group whatever the label is made of. */
+    groupLabelId?: string;
     getThumbLabel: (index: number) => string | undefined;
-    onFirstThumbRef?: (node: HTMLButtonElement | null) => void;
+    onFirstThumbRef?: (node: HTMLInputElement | null) => void;
     t: Messages;
 };
 declare const SliderTrack: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/Form/Slider/index.d.ts

@@ -1,5 +1,5 @@
 export { default as Slider } from './Slider.svelte';
-export type { SliderMark, SliderMarkPayload, SliderMode, SliderProps, SliderRangeLabelPayload, SliderVariant } from './slider.props.js';
+export type { SliderMark, SliderMarkPayload, SliderMode, SliderProps, SliderRangeLabelPayload, SliderThumbCollisionBehavior, SliderVariant } from './slider.props.js';
 export { SliderState } from './slider.state.svelte.js';
 export type { SliderFormatValue, SliderOrientation, SliderRangePayload, SliderValue, SliderValuePayload } from './slider.state.svelte.js';
 export { sliderTheme, setSliderTheme, useSliderTheme, type SliderTheme, type SliderThemeProps } from './slider.theme.js';

package/dist/components/Form/Slider/slider.mcp.d.ts

@@ -1 +1 @@
-export declare const sliderDescription = "\n# Slider Component\n\nThe Slider component is a Field-based numeric control for scalar values, range tuples, vertical layouts, multi-thumb values, and draggable selected ranges. It renders ARIA slider thumbs instead of relying on a native range input so every mode shares the same state machine and theme parts.\n\n## Basic Usage\n\n```svelte\n<script>\n\tlet volume = $state(40);\n</script>\n\n<Slider label=\"Volume\" bind:value={volume} min={0} max={100} step={5} showValue />\n```\n\n## Range Usage\n\n```svelte\n<script>\n\tlet budget = $state([25, 75]);\n</script>\n\n<Slider\n\tmode=\"range\"\n\tlabel=\"Budget\"\n\tbind:value={budget}\n\tmin={0}\n\tmax={100}\n\tstep={5}\n\tminStepsBetweenThumbs={2}\n\tdragRange\n\tshowValue\n\tformatValue={(value) => `$${value}k`}\n/>\n```\n\n## Props\n\nExtends all Field props plus:\n\n### Core Props\n- **value**: number | number[] | null (bindable) - Current scalar or multi-thumb value\n- **mode**: 'single' | 'range' (default: 'single') - Range mode defaults to two thumbs\n- **variant**: 'default' | 'thick' | 'contained' (default: 'default') - Visual track style; `thick` renders a heavier track with an inset pill thumb, while `contained` places the label and optional value inside an input-like rail\n- **thumbs**: number - Number of thumbs when the value is missing or scalar\n- **min**: number (default: 0) - Minimum selectable value\n- **max**: number (default: 100) - Maximum selectable value\n- **step**: number (default: 1) - Pointer and keyboard increment\n- **minStepsBetweenThumbs**: number (default: 0) - Minimum spacing between neighboring thumbs, in step units\n- **orientation**: 'horizontal' | 'vertical' (default: 'horizontal') - Track direction\n- **dragRange**: boolean (default: false) - Allows dragging the selected range segment as a unit\n- **color**: semantic color (default: 'primary') - Filled track and thumb color\n\n### Display Props\n- **showValue**: boolean (default: false) - Shows value chips beside the track\n- **formatValue**: (value: number, index: number, values: number[]) => string - Formats thumb labels and aria-valuetext\n- **marks**: Array<{ value: number; label?: string | Snippet }> - Optional tick marks along the track\n- **thumbLabels**: string[] - Accessible labels for individual thumbs\n- **i18n**: Partial<Messages> - Per-instance i18n overrides\n\n### Field Props\n- **label**: string | Snippet - Field label\n- **description**: string | Snippet - Helper text\n- **required**: boolean - Validates that a value is present\n- **disabled**: boolean - Disables pointer and keyboard interaction\n- **size**: 'small' | 'normal' | 'large' - Control size\n- **errors**: string[] | boolean (bindable) - Validation errors\n- **focused**: boolean (bindable) - Focus state\n- **onValueChange**: (value: number | number[]) => void - Called when value changes\n- **onValidate**: (value: number | number[]) => string[] | boolean - Custom validation\n\n### Slots\n- **prefix**: Snippet - Content before the slider\n- **suffix**: Snippet - Content after the slider\n- **valueLabel**: Snippet<SliderValuePayload> - Custom per-thumb value label\n- **rangeLabel**: Snippet<SliderRangePayload> - Custom selected range label\n\n### Styling Props\n- **class**: string - Classes for the field root\n- **theme**: SliderThemeProps & FieldThemeProps - Theme overrides\n\n## Form Integration\n\nUse `type: 'slider'` for scalar values and `type: 'slider-range'` for submitted number arrays.\n\n```svelte\n<Form\n\tinputs={{\n\t\tvolume: {\n\t\t\ttype: 'slider',\n\t\t\tlabel: 'Volume',\n\t\t\tvalue: 35,\n\t\t\tmin: 0,\n\t\t\tmax: 100,\n\t\t\tstep: 5,\n\t\t\tshowValue: true\n\t\t},\n\t\tcomfortBand: {\n\t\t\ttype: 'slider-range',\n\t\t\tlabel: 'Comfort band',\n\t\t\tvalue: [18, 24],\n\t\t\tmin: 12,\n\t\t\tmax: 32,\n\t\t\tdragRange: true,\n\t\t\tshowValue: true\n\t\t}\n\t}}\n/>\n```\n\n## Structure\n\n```\n<Field>\n\t<Label />\n\t<InputContainer>\n\t\t<Prefix />\n\t\t<SliderRoot>\n\t\t\t<HiddenInput />\n\t\t\t<Track role=\"group\">\n\t\t\t\t<ScreenReaderInstructions />\n\t\t\t\t<TrackBackground />\n\t\t\t\t<SelectedRange />\n\t\t\t\t<Thumb role=\"slider\" />\n\t\t\t\t<Marks />\n\t\t\t</Track>\n\t\t\t<ValueLabels />\n\t\t</SliderRoot>\n\t\t<Suffix />\n\t</InputContainer>\n\t<Description />\n\t<Error />\n</Field>\n```\n\n## Examples\n\n### Vertical\n```svelte\n<Slider\n\torientation=\"vertical\"\n\tlabel=\"Output\"\n\tbind:value={output}\n\tmin={0}\n\tmax={100}\n\tstep={10}\n\tshowValue\n/>\n```\n\n### Thick Variant\n```svelte\n<Slider\n\tvariant=\"thick\"\n\tsize=\"normal\"\n\tlabel=\"Temperature\"\n\tbind:value={temperature}\n\tmin={16}\n\tmax={30}\n\tstep={1}\n\tshowValue\n/>\n```\n\n### Contained Variant\n\n`contained` is intended for compact settings panels. It keeps the native Field label association while rendering the label inside the rail. Add `showValue` to place the formatted value at the opposite edge.\n\n```svelte\n<Slider\n  variant=\"contained\"\n  label=\"Background glow\"\n  bind:value={glow}\n  min={0}\n  max={3}\n  step={0.1}\n  showValue\n  formatValue={(value) => value.toFixed(1)}\n/>\n```\n\n### Three Thumbs\n```svelte\n<Slider\n\tlabel=\"Distribution\"\n\tbind:value={distribution}\n\tmin={0}\n\tmax={100}\n\tstep={5}\n\tthumbs={3}\n\tshowValue\n/>\n```\n\n### Custom Range Label\n```svelte\n<Slider mode=\"range\" bind:value={range} showValue>\n\t{#snippet rangeLabel(payload)}\n\t\t<span>{payload.startValue} - {payload.endValue}</span>\n\t{/snippet}\n</Slider>\n```\n\n## Accessibility\n\n- Each thumb is a button with `role=\"slider\"`\n- Single-thumb sliders use the visible Field label when present; multi-thumb sliders add per-thumb labels such as \"Budget minimum\" and \"Budget maximum\"\n- The track is exposed as a labelled group when the label is plain text, with hidden keyboard instructions referenced by `aria-describedby`\n- Thumb values expose `aria-valuemin`, `aria-valuemax`, `aria-valuenow`, `aria-valuetext`, and `aria-orientation`\n- Multi-thumb `aria-valuemin`/`aria-valuemax` reflect each thumb's current movement bounds, including minimum thumb spacing\n- Keyboard support: Arrow keys move by one step, Shift+Arrow and PageUp/PageDown move by ten steps, Home/End jump to bounds\n- ArrowLeft / ArrowRight follow the writing direction: in RTL, ArrowLeft increases and ArrowRight decreases (vertical sliders are unaffected)\n- Multi-thumb sliders enforce ordering and optional minimum thumb spacing\n- Disabled state blocks pointer, keyboard, and selected-range dragging\n\n## Theme Customization\n\nTheme parts:\n- **inputContainer**: inherited Field input container wrapper\n- **root**: Slider root layout\n- **control**: Track and value-label layout\n- **track**: Pointer surface and color carrier\n- **trackBackground**: Unselected track\n- **range**: Selected range segment\n- **thumb**: Individual slider thumb button\n- **thumbHitbox**: Invisible thick-variant thumb pointer target\n- **thumbVisual**: Visible thumb shape\n- **valueLabels**: Value chip group\n- **valueLabel**: Individual value chip\n- **containedLabel**: Label rendered inside the contained rail\n- **containedTicks**: Decorative scale wrapper for the contained rail\n- **containedTick**: Individual decorative scale line\n- **marks**: Mark container\n- **mark**: Individual mark positioning wrapper\n- **markDot**: Mark dot\n- **markLabel**: Mark text\n\n## State contract\n\n- **value**: current bindable editable value.\n- **defaultValue**: initial value used only when `value` is omitted.\n- **onValueChange**: called with the new value when the component changes it.\n\n";
+export declare const sliderDescription = "\n# Slider Component\n\nThe Slider component is a Field-based numeric control for scalar values, range tuples, vertical layouts, multi-thumb values, and draggable selected ranges. Each thumb is a visually hidden native `<input type=\"range\">` inside a styled thumb, so every mode shares one state machine and theme parts while mobile screen readers can adjust the value with their own gestures (VoiceOver swipe up and down, TalkBack adjust), which send no key events.\n\n## Basic Usage\n\n```svelte\n<script>\n\tlet volume = $state(40);\n</script>\n\n<Slider label=\"Volume\" bind:value={volume} min={0} max={100} step={5} showValue />\n```\n\n## Range Usage\n\n```svelte\n<script>\n\tlet budget = $state([25, 75]);\n</script>\n\n<Slider\n\tmode=\"range\"\n\tlabel=\"Budget\"\n\tbind:value={budget}\n\tmin={0}\n\tmax={100}\n\tstep={5}\n\tminStepsBetweenThumbs={2}\n\tdragRange\n\tshowValue\n\tformatValue={(value) => `$${value}k`}\n/>\n```\n\n## Props\n\nExtends all Field props plus:\n\n### Core Props\n- **value**: number | number[] | null (bindable) - Current scalar or multi-thumb value; an array keeps its array shape, even with one element (`[25]` stays `[26]` after ArrowRight, never `26`)\n- **mode**: 'single' | 'range' (default: 'single') - Range mode defaults to two thumbs\n- **variant**: 'default' | 'thick' | 'contained' (default: 'default') - Visual track style; `thick` renders a heavier track with an inset pill thumb, while `contained` places the label and optional value inside an input-like rail\n- **thumbs**: number - Number of thumbs when the value is missing or scalar\n- **min**: number (default: 0) - Minimum selectable value\n- **max**: number (default: 100) - Maximum selectable value\n- **step**: number (default: 1) - Pointer and keyboard increment\n- **largeStep**: number (default: 10 \u00D7 step) - Amount PageUp, PageDown and Shift+Arrow change the value by. The result still snaps to `step`\n- **minStepsBetweenThumbs**: number (default: 0) - Minimum spacing between neighboring thumbs, in step units\n- **orientation**: 'horizontal' | 'vertical' (default: 'horizontal') - Track direction\n- **thumbCollisionBehavior**: 'none' | 'push' | 'swap' (default: 'none') - What a thumb does when it meets a neighbour. `none` stops it at the neighbour (and at `minStepsBetweenThumbs`), `push` moves the neighbours along while there is room, `swap` lets it pass: the thumbs trade places, and focus and the drag follow the moving thumb. Each thumb's `aria-valuemin`/`aria-valuemax` follow the mode\n- **thumbDisabled**: boolean[] - Disables thumbs by index. A disabled thumb keeps its value (and its place in the submitted value) but cannot be focused or moved, and it blocks the thumbs next to it in every collision mode. Track presses move the closest free thumb, and dragging the selected range is off while any thumb is disabled\n- **dragRange**: boolean (default: false) - Allows dragging the selected range segment as a unit\n- **color**: semantic color (default: 'primary') - Filled track and thumb color\n\n### Display Props\n- **showValue**: boolean (default: false) - Shows value chips beside the track\n- **formatValue**: (value: number, index: number, values: number[]) => string - Formats thumb labels and aria-valuetext\n- **marks**: Array<{ value: number; label?: string | Snippet }> - Optional tick marks along the track\n- **thumbLabels**: string[] - Accessible labels for individual thumbs\n- **i18n**: Partial<Messages> - Per-instance i18n overrides\n\n### Field Props\n- **label**: string | Snippet - Field label\n- **description**: string | Snippet - Helper text\n- **required**: boolean - Validates that a value is present\n- **disabled**: boolean - Disables pointer and keyboard interaction\n- **size**: 'small' | 'normal' | 'large' - Control size\n- **errors**: string[] | boolean (bindable) - Validation errors\n- **focused**: boolean (bindable) - Focus state\n- **readOnly**: boolean - Refuses every edit (pointer, keys and assistive technology) while thumbs stay focusable, announced with `aria-readonly`, and the value is still submitted. The track and thumbs carry `data-readonly`\n- **onValueChange**: (value: number | number[]) => void - Called when value changes, on every pointer move\n- **onValueCommit**: (value: number | number[]) => void - Called when an interaction ends with a value that differs from the one it started with: on pointer release, on pointer cancel, after each accepted key press, and when assistive technology finishes an adjustment. Never called for a no-op. Use it to save on release\n- **onValidate**: (value: number | number[]) => string[] | boolean - Custom validation\n\n### Slots\n- **prefix**: Snippet - Content before the slider\n- **suffix**: Snippet - Content after the slider\n- **valueLabel**: Snippet<SliderValuePayload> - Custom per-thumb value label\n- **rangeLabel**: Snippet<SliderRangePayload> - Custom selected range label\n\n### Styling Props\n- **class**: string - Classes for the field root\n- **theme**: SliderThemeProps & FieldThemeProps - Theme overrides\n\n## Form Integration\n\nUse `type: 'slider'` for scalar values and `type: 'slider-range'` for submitted number arrays. A `slider-range` holds one or more values, so a one-thumb array value such as `[25]` is submitted as `[25]`.\n\n```svelte\n<Form\n\tinputs={{\n\t\tvolume: {\n\t\t\ttype: 'slider',\n\t\t\tlabel: 'Volume',\n\t\t\tvalue: 35,\n\t\t\tmin: 0,\n\t\t\tmax: 100,\n\t\t\tstep: 5,\n\t\t\tshowValue: true\n\t\t},\n\t\tcomfortBand: {\n\t\t\ttype: 'slider-range',\n\t\t\tlabel: 'Comfort band',\n\t\t\tvalue: [18, 24],\n\t\t\tmin: 12,\n\t\t\tmax: 32,\n\t\t\tdragRange: true,\n\t\t\tshowValue: true\n\t\t}\n\t}}\n/>\n```\n\n## Structure\n\n```\n<Field>\n\t<Label />\n\t<InputContainer>\n\t\t<Prefix />\n\t\t<SliderRoot>\n\t\t\t<Track role=\"group\">\n\t\t\t\t<ScreenReaderInstructions />\n\t\t\t\t<TrackBackground />\n\t\t\t\t<SelectedRange />\n\t\t\t\t<Thumb>\n\t\t\t\t\t<input type=\"range\" />\n\t\t\t\t\t<ThumbVisual />\n\t\t\t\t</Thumb>\n\t\t\t\t<Marks />\n\t\t\t</Track>\n\t\t\t<ValueLabels />\n\t\t</SliderRoot>\n\t\t<Suffix />\n\t</InputContainer>\n\t<Description />\n\t<Error />\n</Field>\n```\n\n## Examples\n\n### Vertical\n```svelte\n<Slider\n\torientation=\"vertical\"\n\tlabel=\"Output\"\n\tbind:value={output}\n\tmin={0}\n\tmax={100}\n\tstep={10}\n\tshowValue\n/>\n```\n\n### Thick Variant\n```svelte\n<Slider\n\tvariant=\"thick\"\n\tsize=\"normal\"\n\tlabel=\"Temperature\"\n\tbind:value={temperature}\n\tmin={16}\n\tmax={30}\n\tstep={1}\n\tshowValue\n/>\n```\n\n### Contained Variant\n\n`contained` is intended for compact settings panels. It keeps the native Field label association while rendering the label inside the rail. Add `showValue` to place the formatted value at the opposite edge.\n\n```svelte\n<Slider\n  variant=\"contained\"\n  label=\"Background glow\"\n  bind:value={glow}\n  min={0}\n  max={3}\n  step={0.1}\n  showValue\n  formatValue={(value) => value.toFixed(1)}\n/>\n```\n\n### Three Thumbs\n```svelte\n<Slider\n\tlabel=\"Distribution\"\n\tbind:value={distribution}\n\tmin={0}\n\tmax={100}\n\tstep={5}\n\tthumbs={3}\n\tshowValue\n/>\n```\n\n### Save On Release\n```svelte\n<Slider\n\tlabel=\"Volume\"\n\tbind:value={volume}\n\tonValueCommit={(value) => saveVolume(value)}\n/>\n```\n\n### Thumb Collisions\n```svelte\n<!-- push: a thumb moves its neighbours along -->\n<Slider label=\"Split\" bind:value={split} thumbs={3} thumbCollisionBehavior=\"push\" />\n\n<!-- swap: a thumb passes its neighbour and the two trade places -->\n<Slider mode=\"range\" label=\"Window\" bind:value={window} thumbCollisionBehavior=\"swap\" />\n```\n\n### Disabled Thumb\n```svelte\n<Slider\n\tmode=\"range\"\n\tlabel=\"Budget\"\n\tbind:value={budget}\n\tthumbDisabled={[true, false]}\n/>\n```\n\n### Read Only\n```svelte\n<Slider label=\"Level\" value={72} readOnly />\n```\n\n### Custom Range Label\n```svelte\n<Slider mode=\"range\" bind:value={range} showValue>\n\t{#snippet rangeLabel(payload)}\n\t\t<span>{payload.startValue} - {payload.endValue}</span>\n\t{/snippet}\n</Slider>\n```\n\n## Accessibility\n\n- Each thumb contains a visually hidden `<input type=\"range\">` (role slider), the one focus target. Clicking the Field label focuses the first thumb. The input also submits the value natively under the field name, once per thumb; a slider without a name submits nothing, and a disabled slider is left out\n- Mobile screen-reader adjust gestures change the input directly: the slider reads the new value from its `input` event and reports one commit on `change`\n- Single-thumb sliders use the visible Field label when present; multi-thumb sliders add per-thumb labels such as \"Budget minimum\" and \"Budget maximum\"\n- The track is exposed as a group named by the rendered label (`aria-labelledby`), whether the label is text or a snippet, with hidden keyboard instructions referenced by `aria-describedby`\n- Thumb values expose `aria-valuemin`, `aria-valuemax`, `aria-valuenow`, `aria-valuetext`, and `aria-orientation`\n- Multi-thumb `aria-valuemin`/`aria-valuemax` reflect each thumb's current movement bounds, including minimum thumb spacing\n- Keyboard support: Arrow keys move by one step, Shift+Arrow and PageUp/PageDown move by `largeStep` (ten steps by default), Home/End jump to bounds. Each accepted key press is one `onValueCommit`\n- Read-only sliders expose `aria-readonly` on every thumb and refuse edits from every source\n- ArrowLeft / ArrowRight follow the writing direction: in RTL, ArrowLeft increases and ArrowRight decreases (vertical sliders are unaffected)\n- In RTL a horizontal track mirrors to match: the minimum sits at the right edge, thumbs, the filled range, marks and contained ticks are placed from the inline start, and a pointer press reads its value from the right edge. An I18n direction that the document does not carry is applied to the whole slider field (label, description, errors and track) through a `dir` attribute on the field root, and it takes precedence over a `dir` in `fieldAttrs`, as it does for the arrow keys and pointer. The slider follows its nearest direction, so an ltr slider inside an rtl page stays ltr; set the direction with I18n or a `dir` attribute rather than CSS `direction` alone\n- Multi-thumb sliders enforce ordering and optional minimum thumb spacing\n- Disabled state blocks pointer, keyboard, and selected-range dragging; a disabled thumb leaves the tab order\n\n## Theme Customization\n\nTheme parts:\n- **inputContainer**: inherited Field input container wrapper\n- **root**: Slider root layout\n- **control**: Track and value-label layout\n- **track**: Pointer surface and color carrier\n- **trackBackground**: Unselected track\n- **range**: Selected range segment\n- **thumb**: Individual slider thumb wrapper; it holds the hidden range input, and the focus ring is drawn on the visual through `group-has-[:focus-visible]`\n- **thumbHitbox**: Invisible thick-variant thumb pointer target\n- **thumbVisual**: Visible thumb shape\n- **valueLabels**: Value chip group\n- **valueLabel**: Individual value chip\n- **containedLabel**: Label rendered inside the contained rail\n- **containedTicks**: Decorative scale wrapper for the contained rail\n- **containedTick**: Individual decorative scale line\n- **marks**: Mark container\n- **mark**: Individual mark positioning wrapper\n- **markDot**: Mark dot\n- **markLabel**: Mark text\n\n## State contract\n\n- **value**: current bindable editable value.\n- **defaultValue**: initial value used only when `value` is omitted.\n- **onValueChange**: called with the new value when the component changes it.\n- **onValueCommit**: called with the settled value when an interaction ends with a different value.\n\n";