@ds-mo/ui 12.6.2 → 12.7.0

package/dist/mcp-data/registry/slider.json

@@ -53,6 +53,7 @@
         "Read-only sliders remain focusable and submittable; inactive or disabled sliders leave the tab order and form submission."
       ],
       "states": [
+        "The label, slider control, value display, and supporting content follow the shared 4px vertical field flow.",
         "value is mutable: user pointer, keyboard, or assistive-technology input updates it and emits dsChange continuously.",
         "dsCommit emits once a pointer interaction completes or the native range input commits a keyboard or assistive-technology change.",
         "Assign a two-number array through the JavaScript value property to create a range; values are ordered, clamped, stepped, and prevented from crossing.",
@@ -645,12 +646,12 @@
   "files": [
     {
       "path": "src/wc/components/Slider/Slider.css",
-      "content": "@import '../../utils/control-inactive.css';\n\n:host {\n  --ds-slider-control-size: var(--dimension-size-400);\n  --ds-slider-thumb-size: var(--dimension-size-200);\n  --ds-slider-track-size: var(--dimension-size-100);\n  --ds-slider-track-stroke: var(--dimension-stroke-width-012);\n  --ds-slider-vertical-length: calc(var(--dimension-size-800) * 3);\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  gap: var(--dimension-space-050);\n  width: 100%;\n  color: var(--color-foreground-primary);\n}\n\n:host(.slider--sm) {\n  --ds-slider-control-size: var(--dimension-size-300);\n  --ds-slider-thumb-size: var(--dimension-size-150);\n  --ds-slider-track-size: var(--dimension-size-075);\n}\n\n:host(.slider--xs) {\n  --ds-slider-control-size: var(--dimension-size-200);\n  --ds-slider-thumb-size: var(--dimension-size-100);\n  --ds-slider-track-size: var(--dimension-size-050);\n}\n\n:host(.slider--vertical) {\n  width: fit-content;\n  min-width: var(--dimension-form-width-xs);\n}\n\n.slider__label-row {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--dimension-space-100);\n  min-width: 0;\n}\n\n.slider__label {\n  min-width: 0;\n}\n\n.slider__value {\n  flex-shrink: 0;\n}\n\n.slider__control {\n  position: relative;\n  width: 100%;\n  height: var(--ds-slider-control-size);\n  border-radius: var(--dimension-radius-half);\n  cursor: default;\n  touch-action: none;\n  user-select: none;\n}\n\n:host(.slider--vertical) .slider__control {\n  align-self: center;\n  width: var(--ds-slider-control-size);\n  height: var(--ds-slider-vertical-length);\n}\n\n:host(.slider--readonly) .slider__control {\n  cursor: default;\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity) on the host. */\n:host(.ds-control-inactive) .slider__control {\n  cursor: not-allowed;\n}\n\n.slider__rail {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  left: 0;\n  height: var(--ds-slider-track-size);\n  overflow: hidden;\n  border-radius: var(--dimension-radius-025);\n  background-color: transparent;\n  box-shadow: inset 0 0 0 var(--ds-slider-track-stroke) var(--color-border-secondary);\n  transform: translateY(-50%);\n  pointer-events: none;\n}\n\n:host(.slider--thumb-center) .slider__rail {\n  right: calc(var(--ds-slider-thumb-size) / 2);\n  left: calc(var(--ds-slider-thumb-size) / 2);\n}\n\n.slider__indicator {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: calc(\n    var(--ds-slider-thumb-size) / 2 +\n      (var(--ds-slider-end-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n  );\n  border-radius: inherit;\n  background-color: var(--color-background-bold-brand);\n}\n\n:host(.slider--range) .slider__indicator {\n  left: calc(\n    var(--ds-slider-thumb-size) / 2 +\n      (var(--ds-slider-start-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n  );\n  width: calc(\n    ((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) / 100) *\n      (100% - var(--ds-slider-thumb-size))\n  );\n}\n\n:host(.slider--thumb-center) .slider__indicator {\n  left: calc(var(--ds-slider-start-pct, 0) * 1%);\n  width: calc((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) * 1%);\n}\n\n.slider__thumb {\n  position: absolute;\n  top: 50%;\n  left: calc((var(--ds-slider-thumb-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)));\n  width: var(--ds-slider-thumb-size);\n  height: var(--ds-slider-thumb-size);\n  transform: translateY(-50%);\n  z-index: 1;\n}\n\n.slider__thumb--active {\n  z-index: 2;\n}\n\n.slider__input {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  opacity: 0;\n  appearance: none;\n  pointer-events: none;\n  z-index: 2;\n}\n\n.slider__thumb-visual {\n  position: absolute;\n  inset: 0;\n  box-sizing: border-box;\n  overflow: visible;\n  border-radius: var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-elevated-sm);\n  pointer-events: none;\n  transition:\n    background-color var(--effect-motion-short-2),\n    box-shadow var(--effect-motion-short-2);\n}\n\n.slider__thumb-wash {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background-color: transparent;\n  transition: background-color var(--effect-motion-short-2);\n}\n\n:host(:not(.slider--readonly):not(.ds-control-inactive)) .slider__thumb:hover .slider__thumb-wash {\n  background-color: var(--color-interaction-hover);\n}\n\n:host([data-dragging]:not(.slider--readonly):not(.ds-control-inactive))\n  .slider__thumb--active .slider__thumb-wash {\n  background-color: var(--color-interaction-pressed);\n}\n\n.slider__input:focus-visible + .slider__thumb-visual,\n:host([data-review-focus]) .slider__thumb[data-index='0'] .slider__thumb-visual {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n:host(.slider--vertical) .slider__rail {\n  top: 0;\n  right: auto;\n  bottom: 0;\n  left: 50%;\n  width: var(--ds-slider-track-size);\n  height: auto;\n  transform: translateX(-50%);\n}\n\n:host(.slider--vertical.slider--thumb-center) .slider__rail {\n  top: calc(var(--ds-slider-thumb-size) / 2);\n  bottom: calc(var(--ds-slider-thumb-size) / 2);\n}\n\n:host(.slider--vertical) .slider__indicator {\n  top: auto;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  width: auto;\n  height: calc(\n    var(--ds-slider-thumb-size) / 2 +\n      (var(--ds-slider-end-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n  );\n}\n\n:host(.slider--vertical.slider--range) .slider__indicator {\n  bottom: calc(\n    var(--ds-slider-thumb-size) / 2 +\n      (var(--ds-slider-start-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n  );\n  height: calc(\n    ((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) / 100) *\n      (100% - var(--ds-slider-thumb-size))\n  );\n}\n\n:host(.slider--vertical.slider--thumb-center) .slider__indicator {\n  bottom: calc(var(--ds-slider-start-pct, 0) * 1%);\n  height: calc((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) * 1%);\n}\n\n:host(.slider--vertical) .slider__thumb {\n  top: auto;\n  bottom: calc((var(--ds-slider-thumb-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)));\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .slider__thumb-visual,\n  .slider__thumb-wash {\n    transition: none;\n  }\n}\n",
+      "content": "@import '../../utils/control-inactive.css';\n@import '../../utils/field-stack.css';\n\n:host {\n  --ds-slider-control-size: var(--dimension-size-400);\n  --ds-slider-thumb-size: var(--dimension-size-200);\n  --ds-slider-track-size: var(--dimension-size-100);\n  --ds-slider-track-stroke: var(--dimension-stroke-width-012);\n  --ds-slider-vertical-length: calc(var(--dimension-size-800) * 3);\n  box-sizing: border-box;\n  width: 100%;\n  color: var(--color-foreground-primary);\n}\n\n:host(.slider--sm) {\n  --ds-slider-control-size: var(--dimension-size-300);\n  --ds-slider-thumb-size: var(--dimension-size-150);\n  --ds-slider-track-size: var(--dimension-size-075);\n}\n\n:host(.slider--xs) {\n  --ds-slider-control-size: var(--dimension-size-200);\n  --ds-slider-thumb-size: var(--dimension-size-100);\n  --ds-slider-track-size: var(--dimension-size-050);\n}\n\n:host(.slider--vertical) {\n  width: fit-content;\n  min-width: var(--dimension-form-width-xs);\n}\n\n.slider__label-row {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--dimension-space-100);\n  min-width: 0;\n}\n\n.slider__label {\n  min-width: 0;\n}\n\n.slider__value {\n  flex-shrink: 0;\n}\n\n.slider__control {\n  position: relative;\n  width: 100%;\n  height: var(--ds-slider-control-size);\n  border-radius: var(--dimension-radius-half);\n  cursor: default;\n  touch-action: none;\n  user-select: none;\n}\n\n:host(.slider--vertical) .slider__control {\n  align-self: center;\n  width: var(--ds-slider-control-size);\n  height: var(--ds-slider-vertical-length);\n}\n\n:host(.slider--readonly) .slider__control {\n  cursor: default;\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity) on the host. */\n:host(.ds-control-inactive) .slider__control {\n  cursor: not-allowed;\n}\n\n.slider__rail {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  left: 0;\n  height: var(--ds-slider-track-size);\n  overflow: hidden;\n  border-radius: var(--dimension-radius-025);\n  background-color: transparent;\n  box-shadow: inset 0 0 0 var(--ds-slider-track-stroke) var(--color-border-secondary);\n  transform: translateY(-50%);\n  pointer-events: none;\n}\n\n:host(.slider--thumb-center) .slider__rail {\n  right: calc(var(--ds-slider-thumb-size) / 2);\n  left: calc(var(--ds-slider-thumb-size) / 2);\n}\n\n.slider__indicator {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: calc(\n    var(--ds-slider-thumb-size) / 2 +\n      (var(--ds-slider-end-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n  );\n  border-radius: inherit;\n  background-color: var(--color-background-bold-brand);\n}\n\n:host(.slider--range) .slider__indicator {\n  left: calc(\n    var(--ds-slider-thumb-size) / 2 +\n      (var(--ds-slider-start-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n  );\n  width: calc(\n    ((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) / 100) *\n      (100% - var(--ds-slider-thumb-size))\n  );\n}\n\n:host(.slider--thumb-center) .slider__indicator {\n  left: calc(var(--ds-slider-start-pct, 0) * 1%);\n  width: calc((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) * 1%);\n}\n\n.slider__thumb {\n  position: absolute;\n  top: 50%;\n  left: calc((var(--ds-slider-thumb-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)));\n  width: var(--ds-slider-thumb-size);\n  height: var(--ds-slider-thumb-size);\n  transform: translateY(-50%);\n  z-index: 1;\n}\n\n.slider__thumb--active {\n  z-index: 2;\n}\n\n.slider__input {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  opacity: 0;\n  appearance: none;\n  pointer-events: none;\n  z-index: 2;\n}\n\n.slider__thumb-visual {\n  position: absolute;\n  inset: 0;\n  box-sizing: border-box;\n  overflow: visible;\n  border-radius: var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-elevated-sm);\n  pointer-events: none;\n  transition:\n    background-color var(--effect-motion-short-2),\n    box-shadow var(--effect-motion-short-2);\n}\n\n.slider__thumb-wash {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background-color: transparent;\n  transition: background-color var(--effect-motion-short-2);\n}\n\n:host(:not(.slider--readonly):not(.ds-control-inactive)) .slider__thumb:hover .slider__thumb-wash {\n  background-color: var(--color-interaction-hover);\n}\n\n:host([data-dragging]:not(.slider--readonly):not(.ds-control-inactive))\n  .slider__thumb--active .slider__thumb-wash {\n  background-color: var(--color-interaction-pressed);\n}\n\n.slider__input:focus-visible + .slider__thumb-visual,\n:host([data-review-focus]) .slider__thumb[data-index='0'] .slider__thumb-visual {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n:host(.slider--vertical) .slider__rail {\n  top: 0;\n  right: auto;\n  bottom: 0;\n  left: 50%;\n  width: var(--ds-slider-track-size);\n  height: auto;\n  transform: translateX(-50%);\n}\n\n:host(.slider--vertical.slider--thumb-center) .slider__rail {\n  top: calc(var(--ds-slider-thumb-size) / 2);\n  bottom: calc(var(--ds-slider-thumb-size) / 2);\n}\n\n:host(.slider--vertical) .slider__indicator {\n  top: auto;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  width: auto;\n  height: calc(\n    var(--ds-slider-thumb-size) / 2 +\n      (var(--ds-slider-end-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n  );\n}\n\n:host(.slider--vertical.slider--range) .slider__indicator {\n  bottom: calc(\n    var(--ds-slider-thumb-size) / 2 +\n      (var(--ds-slider-start-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n  );\n  height: calc(\n    ((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) / 100) *\n      (100% - var(--ds-slider-thumb-size))\n  );\n}\n\n:host(.slider--vertical.slider--thumb-center) .slider__indicator {\n  bottom: calc(var(--ds-slider-start-pct, 0) * 1%);\n  height: calc((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) * 1%);\n}\n\n:host(.slider--vertical) .slider__thumb {\n  top: auto;\n  bottom: calc((var(--ds-slider-thumb-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)));\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .slider__thumb-visual,\n  .slider__thumb-wash {\n    transition: none;\n  }\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/Slider/Slider.tsx",
-      "content": "import {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\nexport type SliderValue = number | number[];\nexport type SliderSize = 'md' | 'sm' | 'xs';\nexport type SliderOrientation = 'horizontal' | 'vertical';\nexport type SliderThumbAlignment = 'edge' | 'center';\n\nlet sliderId = 0;\nlet sliderExternalLabelId = 0;\n\n@Component({\n  tag: 'ds-slider',\n  styleUrl: 'Slider.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class Slider {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Current value. Assign a two-number array through the JavaScript property for a range slider. */\n  @Prop({ mutable: true }) value: SliderValue = 0;\n  @Prop() min: number = 0;\n  @Prop() max: number = 100;\n  @Prop() step: number = 1;\n  /** Minimum number of steps kept between two range thumbs. */\n  @Prop() minStepsBetweenValues: number = 0;\n  /** Visible field label. Supply aria-label when the label is intentionally hidden. */\n  @Prop() label: string | undefined;\n  /** Show the formatted current value beside the visible label. */\n  @Prop() showValue: boolean = true;\n  @Prop() size: SliderSize = 'md';\n  @Prop() orientation: SliderOrientation = 'horizontal';\n  /** Align the thumb edge with full-width rail endpoints, or its center with inset rail endpoints. */\n  @Prop() thumbAlignment: SliderThumbAlignment = 'edge';\n  @Prop({ reflect: true }) name: string | undefined;\n  @Prop({ reflect: true }) form: string | undefined;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Keep the value focusable and submittable while preventing changes. */\n  @Prop({ reflect: true }) readOnly: boolean = false;\n  @Prop() isInactive: boolean = false;\n  /** Direct accessible name for a single-thumb slider without a visible label. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  /** Id references for a visible single-thumb slider label. */\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n  /** Id references for supporting guidance or error text. */\n  @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n  /** Accessible label for the lower thumb in a range slider. */\n  @Prop() startLabel: string = 'Minimum value';\n  /** Accessible label for the upper thumb in a range slider. */\n  @Prop() endLabel: string = 'Maximum value';\n  /** Human-readable value text for a single slider or both range thumbs. */\n  @Prop() valueText: string | undefined;\n  /** Per-thumb human-readable value text for a range slider. Assign through the JavaScript property. */\n  @Prop() valueTexts: string[] = [];\n  /** Locale used by Intl.NumberFormat for the visible value. */\n  @Prop() locale: string | undefined;\n  /** Intl.NumberFormat options. Assign objects through the JavaScript property. */\n  @Prop() formatOptions: Intl.NumberFormatOptions | undefined;\n  @Prop() valuePrefix: string = '';\n  @Prop() valueSuffix: string = '';\n  @Prop() rangeSeparator: string = '–';\n  /** Id applied to the first native range input. */\n  @Prop() inputId: string | undefined;\n\n  /** Emitted continuously while the value changes. */\n  @Event() dsChange!: EventEmitter<SliderValue>;\n  /** Emitted when a pointer or keyboard value change is committed. */\n  @Event() dsCommit!: EventEmitter<SliderValue>;\n\n  @State() private formDisabled = false;\n  @State() private dragging = false;\n  @State() private focused = false;\n  @State() private touched = false;\n  @State() private activeThumbIndex = 0;\n  @State() private externalLabelledby: string | undefined;\n\n  private readonly generatedId = `ds-slider-${++sliderId}`;\n  private readonly labelId = `${this.generatedId}-label`;\n  private initialValue: SliderValue = 0;\n  private lastCommittedValue: SliderValue = 0;\n  private pointerId: number | null = null;\n  private pointerStartValue: SliderValue = 0;\n  private controlEl: HTMLDivElement | null = null;\n\n  componentWillLoad() {\n    this.initialValue = this.cloneValue(this.publicValue);\n    this.lastCommittedValue = this.cloneValue(this.publicValue);\n    this.syncFormValue();\n  }\n\n  componentDidLoad() {\n    this.syncNativeLabels();\n  }\n\n  @Watch('value')\n  @Watch('min')\n  @Watch('max')\n  @Watch('step')\n  @Watch('minStepsBetweenValues')\n  @Watch('name')\n  @Watch('disabled')\n  @Watch('isInactive')\n  syncFormValue() {\n    const values = this.resolvedValues;\n    if (this.isDisabled || !this.name) {\n      this.internals.setFormValue(null);\n      return;\n    }\n\n    if (this.isRange) {\n      const data = new FormData();\n      values.forEach(value => data.append(this.name as string, String(value)));\n      this.internals.setFormValue(data, JSON.stringify(values));\n    } else {\n      this.internals.setFormValue(String(values[0]), String(values[0]));\n    }\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.value = this.cloneValue(this.initialValue);\n    this.lastCommittedValue = this.cloneValue(this.initialValue);\n    this.dragging = false;\n    this.focused = false;\n    this.touched = false;\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    if (typeof state !== 'string') return;\n    if (this.isRange) {\n      try {\n        const restored = JSON.parse(state);\n        if (Array.isArray(restored)) this.value = restored.map(Number).slice(0, 2);\n      } catch {\n        this.value = this.cloneValue(this.initialValue);\n      }\n    } else {\n      const restored = Number(state);\n      if (Number.isFinite(restored)) this.value = restored;\n    }\n    this.lastCommittedValue = this.cloneValue(this.publicValue);\n  }\n\n  @Method()\n  async setFocus(index: number = 0) {\n    const inputs = this.el.querySelectorAll<HTMLInputElement>('.slider__input');\n    inputs[Math.max(0, Math.min(index, inputs.length - 1))]?.focus();\n  }\n\n  private get isDisabled(): boolean {\n    return this.disabled || this.isInactive || this.formDisabled;\n  }\n\n  private get isRange(): boolean {\n    return Array.isArray(this.value);\n  }\n\n  private get safeStep(): number {\n    return Number.isFinite(this.step) && this.step > 0 ? this.step : 1;\n  }\n\n  private get safeMin(): number {\n    return Number.isFinite(this.min) ? this.min : 0;\n  }\n\n  private get safeMax(): number {\n    const minimum = this.safeMin;\n    return Number.isFinite(this.max) && this.max > minimum ? this.max : minimum + this.safeStep;\n  }\n\n  private get minimumGap(): number {\n    const steps = Number.isFinite(this.minStepsBetweenValues)\n      ? Math.max(0, Math.floor(this.minStepsBetweenValues))\n      : 0;\n    return steps * this.safeStep;\n  }\n\n  private get resolvedValues(): number[] {\n    const minimum = this.safeMin;\n    const maximum = this.safeMax;\n    if (!this.isRange) return [this.snap(Number(this.value))];\n\n    const raw = this.value as number[];\n    let lower = this.snap(Number(raw[0] ?? minimum));\n    let upper = this.snap(Number(raw[1] ?? maximum));\n    if (lower > upper) [lower, upper] = [upper, lower];\n\n    const gap = Math.min(this.minimumGap, maximum - minimum);\n    if (upper - lower < gap) {\n      upper = Math.min(maximum, this.snap(lower + gap));\n      lower = Math.max(minimum, this.snap(upper - gap));\n    }\n    return [lower, upper];\n  }\n\n  private get publicValue(): SliderValue {\n    const values = this.resolvedValues;\n    return this.isRange ? [...values] : values[0];\n  }\n\n  private cloneValue(value: SliderValue): SliderValue {\n    return Array.isArray(value) ? [...value] : value;\n  }\n\n  private valuesEqual(a: SliderValue, b: SliderValue): boolean {\n    if (Array.isArray(a) && Array.isArray(b)) {\n      return a.length === b.length && a.every((value, index) => value === b[index]);\n    }\n    return !Array.isArray(a) && !Array.isArray(b) && a === b;\n  }\n\n  private decimalPlaces(value: number): number {\n    const text = String(value).toLowerCase();\n    if (text.includes('e-')) return Number(text.split('e-')[1]) || 0;\n    return text.includes('.') ? text.split('.')[1].length : 0;\n  }\n\n  private snap(value: number): number {\n    const minimum = this.safeMin;\n    const maximum = this.safeMax;\n    const candidate = Number.isFinite(value) ? value : minimum;\n    const stepped = minimum + Math.round((candidate - minimum) / this.safeStep) * this.safeStep;\n    const precision = Math.min(10, Math.max(\n      this.decimalPlaces(minimum),\n      this.decimalPlaces(maximum),\n      this.decimalPlaces(this.safeStep),\n    ));\n    return Number(Math.min(maximum, Math.max(minimum, stepped)).toFixed(precision));\n  }\n\n  private percent(value: number): number {\n    return ((value - this.safeMin) / (this.safeMax - this.safeMin)) * 100;\n  }\n\n  private allowedMin(index: number, values = this.resolvedValues): number {\n    return this.isRange && index === 1\n      ? Math.min(this.safeMax, values[0] + this.minimumGap)\n      : this.safeMin;\n  }\n\n  private allowedMax(index: number, values = this.resolvedValues): number {\n    return this.isRange && index === 0\n      ? Math.max(this.safeMin, values[1] - this.minimumGap)\n      : this.safeMax;\n  }\n\n  private setValueAt(index: number, next: number): boolean {\n    const previous = this.publicValue;\n    const values = this.resolvedValues;\n    const constrained = Math.min(this.allowedMax(index, values), Math.max(this.allowedMin(index, values), this.snap(next)));\n    values[index] = constrained;\n    const nextValue: SliderValue = this.isRange ? [...values] : values[0];\n    if (this.valuesEqual(previous, nextValue)) return false;\n\n    this.value = nextValue;\n    this.dsChange.emit(this.cloneValue(nextValue));\n    return true;\n  }\n\n  private commitIfChanged() {\n    const current = this.publicValue;\n    if (this.valuesEqual(current, this.lastCommittedValue)) return;\n    this.lastCommittedValue = this.cloneValue(current);\n    this.dsCommit.emit(this.cloneValue(current));\n  }\n\n  private syncNativeLabels() {\n    if (this.label || this.ariaLabel || this.ariaLabelledby || this.isRange) return;\n    const ids = (Array.from(this.internals.labels) as HTMLLabelElement[]).map(label => {\n      if (!label.id) label.id = `ds-slider-label-${++sliderExternalLabelId}`;\n      return label.id;\n    });\n    if (ids.length) this.externalLabelledby = ids.join(' ');\n  }\n\n  private formattedValue(value: number, index: number): string {\n    const authored = this.valueTexts[index] ?? this.valueText;\n    if (authored) return authored;\n    let number: string;\n    try {\n      number = new Intl.NumberFormat(this.locale, this.formatOptions).format(value);\n    } catch {\n      number = String(value);\n    }\n    return `${this.valuePrefix}${number}${this.valueSuffix}`;\n  }\n\n  private ariaValueText(value: number, index: number): string | undefined {\n    if (this.valueTexts[index] || this.valueText || this.valuePrefix || this.valueSuffix || this.formatOptions) {\n      return this.formattedValue(value, index);\n    }\n    return undefined;\n  }\n\n  private handleNativeInput = (event: Event, index: number) => {\n    const input = event.target as HTMLInputElement;\n    this.activeThumbIndex = index;\n    if (this.readOnly || this.isDisabled) {\n      input.value = String(this.resolvedValues[index]);\n      return;\n    }\n    this.setValueAt(index, Number(input.value));\n  };\n\n  private handleNativeChange = () => {\n    if (!this.readOnly && !this.isDisabled) this.commitIfChanged();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (!this.readOnly) return;\n    if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown'].includes(event.key)) {\n      event.preventDefault();\n    }\n  };\n\n  private handleFocus = (index: number) => {\n    this.activeThumbIndex = index;\n    this.focused = true;\n  };\n\n  private handleBlur = (event: FocusEvent) => {\n    const next = event.relatedTarget;\n    if (next instanceof Node && this.el.contains(next)) return;\n    this.focused = false;\n    this.touched = true;\n  };\n\n  private handleHostClick = (event: MouseEvent) => {\n    if (event.target !== this.el || this.isDisabled) return;\n    const inputs = this.el.querySelectorAll<HTMLInputElement>('.slider__input');\n    inputs[Math.min(this.activeThumbIndex, inputs.length - 1)]?.focus();\n  };\n\n  private pointerPercent(event: PointerEvent): number {\n    const control = this.controlEl;\n    if (!control) return 0;\n    const rect = control.getBoundingClientRect();\n    const thumb = this.el.querySelector<HTMLElement>('.slider__thumb');\n    const thumbSize = thumb\n      ? this.orientation === 'horizontal' ? thumb.offsetWidth : thumb.offsetHeight\n      : 0;\n    // Both alignment modes keep the complete thumb inside the control. Edge\n    // alignment lets the rail span the control while center alignment insets\n    // the rail to the same thumb-center travel.\n    const inset = thumbSize / 2;\n\n    if (this.orientation === 'vertical') {\n      const travel = Math.max(1, rect.height - inset * 2);\n      return Math.min(1, Math.max(0, (rect.bottom - inset - event.clientY) / travel));\n    }\n\n    const travel = Math.max(1, rect.width - inset * 2);\n    const percent = (event.clientX - rect.left - inset) / travel;\n    return Math.min(1, Math.max(0, percent));\n  }\n\n  private valueFromPointer(event: PointerEvent): number {\n    return this.snap(this.safeMin + this.pointerPercent(event) * (this.safeMax - this.safeMin));\n  }\n\n  private closestThumbIndex(value: number, target: EventTarget | null): number {\n    const targetElement = target instanceof HTMLElement\n      ? target.closest<HTMLElement>('.slider__thumb')\n      : null;\n    if (targetElement?.dataset['index']) return Number(targetElement.dataset['index']);\n    if (!this.isRange) return 0;\n\n    const values = this.resolvedValues;\n    const lowerDistance = Math.abs(value - values[0]);\n    const upperDistance = Math.abs(value - values[1]);\n    if (lowerDistance === upperDistance) return value >= values[0] ? 1 : 0;\n    return lowerDistance < upperDistance ? 0 : 1;\n  }\n\n  private handlePointerDown = (event: PointerEvent) => {\n    if (event.button !== 0 || this.isDisabled || this.readOnly) return;\n    event.preventDefault();\n    const value = this.valueFromPointer(event);\n    const index = this.closestThumbIndex(value, event.target);\n    this.activeThumbIndex = index;\n    this.pointerId = event.pointerId;\n    this.pointerStartValue = this.cloneValue(this.publicValue);\n    this.dragging = true;\n    this.setValueAt(index, value);\n    this.controlEl?.setPointerCapture(event.pointerId);\n    requestAnimationFrame(() => this.el.querySelectorAll<HTMLInputElement>('.slider__input')[index]?.focus({ preventScroll: true }));\n  };\n\n  private handlePointerMove = (event: PointerEvent) => {\n    if (this.pointerId !== event.pointerId || !this.dragging) return;\n    event.preventDefault();\n    this.setValueAt(this.activeThumbIndex, this.valueFromPointer(event));\n  };\n\n  private endPointerInteraction(event: PointerEvent, canceled: boolean) {\n    if (this.pointerId !== event.pointerId) return;\n    if (this.controlEl?.hasPointerCapture(event.pointerId)) this.controlEl.releasePointerCapture(event.pointerId);\n    this.pointerId = null;\n    this.dragging = false;\n    this.touched = true;\n    if (!canceled && !this.valuesEqual(this.pointerStartValue, this.publicValue)) this.commitIfChanged();\n  }\n\n  private renderThumb(value: number, index: number) {\n    const inputId = index === 0\n      ? this.inputId ?? `${this.generatedId}-input`\n      : `${this.inputId ?? `${this.generatedId}-input`}-end`;\n    const rangeLabel = index === 0 ? this.startLabel : this.endLabel;\n    const labelledby = this.isRange\n      ? undefined\n      : this.ariaLabelledby ?? (this.label ? this.labelId : this.externalLabelledby);\n    const directLabel = this.isRange ? rangeLabel : labelledby ? undefined : this.ariaLabel;\n\n    return (\n      <div\n        class={{\n          slider__thumb: true,\n          'slider__thumb--active': index === this.activeThumbIndex,\n        }}\n        data-index={String(index)}\n        style={{ '--ds-slider-thumb-pct': String(this.percent(value)) } as Record<string, string>}\n      >\n        <input\n          class=\"slider__input\"\n          type=\"range\"\n          id={inputId}\n          min={this.allowedMin(index)}\n          max={this.allowedMax(index)}\n          step={this.safeStep}\n          value={value}\n          disabled={this.isDisabled}\n          aria-label={directLabel}\n          aria-labelledby={labelledby}\n          aria-describedby={this.ariaDescribedby}\n          aria-valuetext={this.ariaValueText(value, index)}\n          aria-orientation={this.orientation === 'vertical' ? 'vertical' : undefined}\n          aria-readonly={this.readOnly ? 'true' : undefined}\n          onInput={(event: Event) => this.handleNativeInput(event, index)}\n          onChange={this.handleNativeChange}\n          onKeyDown={this.handleKeyDown}\n          onFocus={() => this.handleFocus(index)}\n          onBlur={this.handleBlur}\n        />\n        <span class=\"slider__thumb-visual\" aria-hidden=\"true\"><span class=\"slider__thumb-wash\" /></span>\n      </div>\n    );\n  }\n\n  render() {\n    const values = this.resolvedValues;\n    const first = values[0];\n    const last = values[values.length - 1];\n    const firstInputId = this.inputId ?? `${this.generatedId}-input`;\n    const dirty = !this.valuesEqual(this.publicValue, this.initialValue);\n    const valueDisplay = values.map((value, index) => this.formattedValue(value, index)).join(` ${this.rangeSeparator} `);\n\n    return (\n      <Host\n        aria-disabled={this.isDisabled ? 'true' : undefined}\n        class={{\n          slider: true,\n          [`slider--${this.size}`]: true,\n          [`slider--${this.orientation}`]: true,\n          [`slider--thumb-${this.thumbAlignment}`]: true,\n          'slider--range': this.isRange,\n          'slider--readonly': this.readOnly,\n          'ds-control-inactive': this.isDisabled,\n        }}\n        data-orientation={this.orientation}\n        data-disabled={this.isDisabled ? '' : undefined}\n        data-readonly={this.readOnly ? '' : undefined}\n        data-dragging={this.dragging ? '' : undefined}\n        data-focused={this.focused ? '' : undefined}\n        data-filled=\"\"\n        data-dirty={dirty ? '' : undefined}\n        data-touched={this.touched ? '' : undefined}\n        data-valid={!this.isDisabled ? '' : undefined}\n        onClick={this.handleHostClick}\n      >\n        {(this.label || this.showValue) && (\n          <div class=\"slider__label-row\">\n            {this.label && (\n              <ds-text\n                class=\"slider__label\"\n                as=\"label\"\n                variant=\"text-body-small\"\n                color=\"primary\"\n                emphasis\n                for={firstInputId}\n                textId={this.labelId}\n              >\n                {this.label}\n              </ds-text>\n            )}\n            {this.showValue && (\n              <ds-text\n                class=\"slider__value\"\n                as=\"span\"\n                variant=\"text-body-small\"\n                color=\"primary\"\n                fontFeature=\"tabular-nums\"\n              >\n                {valueDisplay}\n              </ds-text>\n            )}\n          </div>\n        )}\n        <div\n          class=\"slider__control\"\n          ref={element => { this.controlEl = element ?? null; }}\n          style={{\n            '--ds-slider-start-pct': String(this.isRange ? this.percent(first) : 0),\n            '--ds-slider-end-pct': String(this.percent(last)),\n          } as Record<string, string>}\n          onPointerDown={this.handlePointerDown}\n          onPointerMove={this.handlePointerMove}\n          onPointerUp={(event: PointerEvent) => this.endPointerInteraction(event, false)}\n          onPointerCancel={(event: PointerEvent) => this.endPointerInteraction(event, true)}\n        >\n          <div class=\"slider__rail\" aria-hidden=\"true\"><div class=\"slider__indicator\" /></div>\n          {values.map((value, index) => this.renderThumb(value, index))}\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\nexport type SliderValue = number | number[];\nexport type SliderSize = 'md' | 'sm' | 'xs';\nexport type SliderOrientation = 'horizontal' | 'vertical';\nexport type SliderThumbAlignment = 'edge' | 'center';\n\nlet sliderId = 0;\nlet sliderExternalLabelId = 0;\n\n@Component({\n  tag: 'ds-slider',\n  styleUrl: 'Slider.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class Slider {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Current value. Assign a two-number array through the JavaScript property for a range slider. */\n  @Prop({ mutable: true }) value: SliderValue = 0;\n  @Prop() min: number = 0;\n  @Prop() max: number = 100;\n  @Prop() step: number = 1;\n  /** Minimum number of steps kept between two range thumbs. */\n  @Prop() minStepsBetweenValues: number = 0;\n  /** Visible field label. Supply aria-label when the label is intentionally hidden. */\n  @Prop() label: string | undefined;\n  /** Show the formatted current value beside the visible label. */\n  @Prop() showValue: boolean = true;\n  @Prop() size: SliderSize = 'md';\n  @Prop() orientation: SliderOrientation = 'horizontal';\n  /** Align the thumb edge with full-width rail endpoints, or its center with inset rail endpoints. */\n  @Prop() thumbAlignment: SliderThumbAlignment = 'edge';\n  @Prop({ reflect: true }) name: string | undefined;\n  @Prop({ reflect: true }) form: string | undefined;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Keep the value focusable and submittable while preventing changes. */\n  @Prop({ reflect: true }) readOnly: boolean = false;\n  @Prop() isInactive: boolean = false;\n  /** Direct accessible name for a single-thumb slider without a visible label. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  /** Id references for a visible single-thumb slider label. */\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n  /** Id references for supporting guidance or error text. */\n  @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n  /** Accessible label for the lower thumb in a range slider. */\n  @Prop() startLabel: string = 'Minimum value';\n  /** Accessible label for the upper thumb in a range slider. */\n  @Prop() endLabel: string = 'Maximum value';\n  /** Human-readable value text for a single slider or both range thumbs. */\n  @Prop() valueText: string | undefined;\n  /** Per-thumb human-readable value text for a range slider. Assign through the JavaScript property. */\n  @Prop() valueTexts: string[] = [];\n  /** Locale used by Intl.NumberFormat for the visible value. */\n  @Prop() locale: string | undefined;\n  /** Intl.NumberFormat options. Assign objects through the JavaScript property. */\n  @Prop() formatOptions: Intl.NumberFormatOptions | undefined;\n  @Prop() valuePrefix: string = '';\n  @Prop() valueSuffix: string = '';\n  @Prop() rangeSeparator: string = '–';\n  /** Id applied to the first native range input. */\n  @Prop() inputId: string | undefined;\n\n  /** Emitted continuously while the value changes. */\n  @Event() dsChange!: EventEmitter<SliderValue>;\n  /** Emitted when a pointer or keyboard value change is committed. */\n  @Event() dsCommit!: EventEmitter<SliderValue>;\n\n  @State() private formDisabled = false;\n  @State() private dragging = false;\n  @State() private focused = false;\n  @State() private touched = false;\n  @State() private activeThumbIndex = 0;\n  @State() private externalLabelledby: string | undefined;\n\n  private readonly generatedId = `ds-slider-${++sliderId}`;\n  private readonly labelId = `${this.generatedId}-label`;\n  private initialValue: SliderValue = 0;\n  private lastCommittedValue: SliderValue = 0;\n  private pointerId: number | null = null;\n  private pointerStartValue: SliderValue = 0;\n  private controlEl: HTMLDivElement | null = null;\n\n  componentWillLoad() {\n    this.initialValue = this.cloneValue(this.publicValue);\n    this.lastCommittedValue = this.cloneValue(this.publicValue);\n    this.syncFormValue();\n  }\n\n  componentDidLoad() {\n    this.syncNativeLabels();\n  }\n\n  @Watch('value')\n  @Watch('min')\n  @Watch('max')\n  @Watch('step')\n  @Watch('minStepsBetweenValues')\n  @Watch('name')\n  @Watch('disabled')\n  @Watch('isInactive')\n  syncFormValue() {\n    const values = this.resolvedValues;\n    if (this.isDisabled || !this.name) {\n      this.internals.setFormValue(null);\n      return;\n    }\n\n    if (this.isRange) {\n      const data = new FormData();\n      values.forEach(value => data.append(this.name as string, String(value)));\n      this.internals.setFormValue(data, JSON.stringify(values));\n    } else {\n      this.internals.setFormValue(String(values[0]), String(values[0]));\n    }\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.value = this.cloneValue(this.initialValue);\n    this.lastCommittedValue = this.cloneValue(this.initialValue);\n    this.dragging = false;\n    this.focused = false;\n    this.touched = false;\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    if (typeof state !== 'string') return;\n    if (this.isRange) {\n      try {\n        const restored = JSON.parse(state);\n        if (Array.isArray(restored)) this.value = restored.map(Number).slice(0, 2);\n      } catch {\n        this.value = this.cloneValue(this.initialValue);\n      }\n    } else {\n      const restored = Number(state);\n      if (Number.isFinite(restored)) this.value = restored;\n    }\n    this.lastCommittedValue = this.cloneValue(this.publicValue);\n  }\n\n  @Method()\n  async setFocus(index: number = 0) {\n    const inputs = this.el.querySelectorAll<HTMLInputElement>('.slider__input');\n    inputs[Math.max(0, Math.min(index, inputs.length - 1))]?.focus();\n  }\n\n  private get isDisabled(): boolean {\n    return this.disabled || this.isInactive || this.formDisabled;\n  }\n\n  private get isRange(): boolean {\n    return Array.isArray(this.value);\n  }\n\n  private get safeStep(): number {\n    return Number.isFinite(this.step) && this.step > 0 ? this.step : 1;\n  }\n\n  private get safeMin(): number {\n    return Number.isFinite(this.min) ? this.min : 0;\n  }\n\n  private get safeMax(): number {\n    const minimum = this.safeMin;\n    return Number.isFinite(this.max) && this.max > minimum ? this.max : minimum + this.safeStep;\n  }\n\n  private get minimumGap(): number {\n    const steps = Number.isFinite(this.minStepsBetweenValues)\n      ? Math.max(0, Math.floor(this.minStepsBetweenValues))\n      : 0;\n    return steps * this.safeStep;\n  }\n\n  private get resolvedValues(): number[] {\n    const minimum = this.safeMin;\n    const maximum = this.safeMax;\n    if (!this.isRange) return [this.snap(Number(this.value))];\n\n    const raw = this.value as number[];\n    let lower = this.snap(Number(raw[0] ?? minimum));\n    let upper = this.snap(Number(raw[1] ?? maximum));\n    if (lower > upper) [lower, upper] = [upper, lower];\n\n    const gap = Math.min(this.minimumGap, maximum - minimum);\n    if (upper - lower < gap) {\n      upper = Math.min(maximum, this.snap(lower + gap));\n      lower = Math.max(minimum, this.snap(upper - gap));\n    }\n    return [lower, upper];\n  }\n\n  private get publicValue(): SliderValue {\n    const values = this.resolvedValues;\n    return this.isRange ? [...values] : values[0];\n  }\n\n  private cloneValue(value: SliderValue): SliderValue {\n    return Array.isArray(value) ? [...value] : value;\n  }\n\n  private valuesEqual(a: SliderValue, b: SliderValue): boolean {\n    if (Array.isArray(a) && Array.isArray(b)) {\n      return a.length === b.length && a.every((value, index) => value === b[index]);\n    }\n    return !Array.isArray(a) && !Array.isArray(b) && a === b;\n  }\n\n  private decimalPlaces(value: number): number {\n    const text = String(value).toLowerCase();\n    if (text.includes('e-')) return Number(text.split('e-')[1]) || 0;\n    return text.includes('.') ? text.split('.')[1].length : 0;\n  }\n\n  private snap(value: number): number {\n    const minimum = this.safeMin;\n    const maximum = this.safeMax;\n    const candidate = Number.isFinite(value) ? value : minimum;\n    const stepped = minimum + Math.round((candidate - minimum) / this.safeStep) * this.safeStep;\n    const precision = Math.min(10, Math.max(\n      this.decimalPlaces(minimum),\n      this.decimalPlaces(maximum),\n      this.decimalPlaces(this.safeStep),\n    ));\n    return Number(Math.min(maximum, Math.max(minimum, stepped)).toFixed(precision));\n  }\n\n  private percent(value: number): number {\n    return ((value - this.safeMin) / (this.safeMax - this.safeMin)) * 100;\n  }\n\n  private allowedMin(index: number, values = this.resolvedValues): number {\n    return this.isRange && index === 1\n      ? Math.min(this.safeMax, values[0] + this.minimumGap)\n      : this.safeMin;\n  }\n\n  private allowedMax(index: number, values = this.resolvedValues): number {\n    return this.isRange && index === 0\n      ? Math.max(this.safeMin, values[1] - this.minimumGap)\n      : this.safeMax;\n  }\n\n  private setValueAt(index: number, next: number): boolean {\n    const previous = this.publicValue;\n    const values = this.resolvedValues;\n    const constrained = Math.min(this.allowedMax(index, values), Math.max(this.allowedMin(index, values), this.snap(next)));\n    values[index] = constrained;\n    const nextValue: SliderValue = this.isRange ? [...values] : values[0];\n    if (this.valuesEqual(previous, nextValue)) return false;\n\n    this.value = nextValue;\n    this.dsChange.emit(this.cloneValue(nextValue));\n    return true;\n  }\n\n  private commitIfChanged() {\n    const current = this.publicValue;\n    if (this.valuesEqual(current, this.lastCommittedValue)) return;\n    this.lastCommittedValue = this.cloneValue(current);\n    this.dsCommit.emit(this.cloneValue(current));\n  }\n\n  private syncNativeLabels() {\n    if (this.label || this.ariaLabel || this.ariaLabelledby || this.isRange) return;\n    const ids = (Array.from(this.internals.labels) as HTMLLabelElement[]).map(label => {\n      if (!label.id) label.id = `ds-slider-label-${++sliderExternalLabelId}`;\n      return label.id;\n    });\n    if (ids.length) this.externalLabelledby = ids.join(' ');\n  }\n\n  private formattedValue(value: number, index: number): string {\n    const authored = this.valueTexts[index] ?? this.valueText;\n    if (authored) return authored;\n    let number: string;\n    try {\n      number = new Intl.NumberFormat(this.locale, this.formatOptions).format(value);\n    } catch {\n      number = String(value);\n    }\n    return `${this.valuePrefix}${number}${this.valueSuffix}`;\n  }\n\n  private ariaValueText(value: number, index: number): string | undefined {\n    if (this.valueTexts[index] || this.valueText || this.valuePrefix || this.valueSuffix || this.formatOptions) {\n      return this.formattedValue(value, index);\n    }\n    return undefined;\n  }\n\n  private handleNativeInput = (event: Event, index: number) => {\n    const input = event.target as HTMLInputElement;\n    this.activeThumbIndex = index;\n    if (this.readOnly || this.isDisabled) {\n      input.value = String(this.resolvedValues[index]);\n      return;\n    }\n    this.setValueAt(index, Number(input.value));\n  };\n\n  private handleNativeChange = () => {\n    if (!this.readOnly && !this.isDisabled) this.commitIfChanged();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (!this.readOnly) return;\n    if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown'].includes(event.key)) {\n      event.preventDefault();\n    }\n  };\n\n  private handleFocus = (index: number) => {\n    this.activeThumbIndex = index;\n    this.focused = true;\n  };\n\n  private handleBlur = (event: FocusEvent) => {\n    const next = event.relatedTarget;\n    if (next instanceof Node && this.el.contains(next)) return;\n    this.focused = false;\n    this.touched = true;\n  };\n\n  private handleHostClick = (event: MouseEvent) => {\n    if (event.target !== this.el || this.isDisabled) return;\n    const inputs = this.el.querySelectorAll<HTMLInputElement>('.slider__input');\n    inputs[Math.min(this.activeThumbIndex, inputs.length - 1)]?.focus();\n  };\n\n  private pointerPercent(event: PointerEvent): number {\n    const control = this.controlEl;\n    if (!control) return 0;\n    const rect = control.getBoundingClientRect();\n    const thumb = this.el.querySelector<HTMLElement>('.slider__thumb');\n    const thumbSize = thumb\n      ? this.orientation === 'horizontal' ? thumb.offsetWidth : thumb.offsetHeight\n      : 0;\n    // Both alignment modes keep the complete thumb inside the control. Edge\n    // alignment lets the rail span the control while center alignment insets\n    // the rail to the same thumb-center travel.\n    const inset = thumbSize / 2;\n\n    if (this.orientation === 'vertical') {\n      const travel = Math.max(1, rect.height - inset * 2);\n      return Math.min(1, Math.max(0, (rect.bottom - inset - event.clientY) / travel));\n    }\n\n    const travel = Math.max(1, rect.width - inset * 2);\n    const percent = (event.clientX - rect.left - inset) / travel;\n    return Math.min(1, Math.max(0, percent));\n  }\n\n  private valueFromPointer(event: PointerEvent): number {\n    return this.snap(this.safeMin + this.pointerPercent(event) * (this.safeMax - this.safeMin));\n  }\n\n  private closestThumbIndex(value: number, target: EventTarget | null): number {\n    const targetElement = target instanceof HTMLElement\n      ? target.closest<HTMLElement>('.slider__thumb')\n      : null;\n    if (targetElement?.dataset['index']) return Number(targetElement.dataset['index']);\n    if (!this.isRange) return 0;\n\n    const values = this.resolvedValues;\n    const lowerDistance = Math.abs(value - values[0]);\n    const upperDistance = Math.abs(value - values[1]);\n    if (lowerDistance === upperDistance) return value >= values[0] ? 1 : 0;\n    return lowerDistance < upperDistance ? 0 : 1;\n  }\n\n  private handlePointerDown = (event: PointerEvent) => {\n    if (event.button !== 0 || this.isDisabled || this.readOnly) return;\n    event.preventDefault();\n    const value = this.valueFromPointer(event);\n    const index = this.closestThumbIndex(value, event.target);\n    this.activeThumbIndex = index;\n    this.pointerId = event.pointerId;\n    this.pointerStartValue = this.cloneValue(this.publicValue);\n    this.dragging = true;\n    this.setValueAt(index, value);\n    this.controlEl?.setPointerCapture(event.pointerId);\n    requestAnimationFrame(() => this.el.querySelectorAll<HTMLInputElement>('.slider__input')[index]?.focus({ preventScroll: true }));\n  };\n\n  private handlePointerMove = (event: PointerEvent) => {\n    if (this.pointerId !== event.pointerId || !this.dragging) return;\n    event.preventDefault();\n    this.setValueAt(this.activeThumbIndex, this.valueFromPointer(event));\n  };\n\n  private endPointerInteraction(event: PointerEvent, canceled: boolean) {\n    if (this.pointerId !== event.pointerId) return;\n    if (this.controlEl?.hasPointerCapture(event.pointerId)) this.controlEl.releasePointerCapture(event.pointerId);\n    this.pointerId = null;\n    this.dragging = false;\n    this.touched = true;\n    if (!canceled && !this.valuesEqual(this.pointerStartValue, this.publicValue)) this.commitIfChanged();\n  }\n\n  private renderThumb(value: number, index: number) {\n    const inputId = index === 0\n      ? this.inputId ?? `${this.generatedId}-input`\n      : `${this.inputId ?? `${this.generatedId}-input`}-end`;\n    const rangeLabel = index === 0 ? this.startLabel : this.endLabel;\n    const labelledby = this.isRange\n      ? undefined\n      : this.ariaLabelledby ?? (this.label ? this.labelId : this.externalLabelledby);\n    const directLabel = this.isRange ? rangeLabel : labelledby ? undefined : this.ariaLabel;\n\n    return (\n      <div\n        class={{\n          slider__thumb: true,\n          'slider__thumb--active': index === this.activeThumbIndex,\n        }}\n        data-index={String(index)}\n        style={{ '--ds-slider-thumb-pct': String(this.percent(value)) } as Record<string, string>}\n      >\n        <input\n          class=\"slider__input\"\n          type=\"range\"\n          id={inputId}\n          min={this.allowedMin(index)}\n          max={this.allowedMax(index)}\n          step={this.safeStep}\n          value={value}\n          disabled={this.isDisabled}\n          aria-label={directLabel}\n          aria-labelledby={labelledby}\n          aria-describedby={this.ariaDescribedby}\n          aria-valuetext={this.ariaValueText(value, index)}\n          aria-orientation={this.orientation === 'vertical' ? 'vertical' : undefined}\n          aria-readonly={this.readOnly ? 'true' : undefined}\n          onInput={(event: Event) => this.handleNativeInput(event, index)}\n          onChange={this.handleNativeChange}\n          onKeyDown={this.handleKeyDown}\n          onFocus={() => this.handleFocus(index)}\n          onBlur={this.handleBlur}\n        />\n        <span class=\"slider__thumb-visual\" aria-hidden=\"true\"><span class=\"slider__thumb-wash\" /></span>\n      </div>\n    );\n  }\n\n  render() {\n    const values = this.resolvedValues;\n    const first = values[0];\n    const last = values[values.length - 1];\n    const firstInputId = this.inputId ?? `${this.generatedId}-input`;\n    const dirty = !this.valuesEqual(this.publicValue, this.initialValue);\n    const valueDisplay = values.map((value, index) => this.formattedValue(value, index)).join(` ${this.rangeSeparator} `);\n\n    return (\n      <Host\n        aria-disabled={this.isDisabled ? 'true' : undefined}\n        class={{\n          slider: true,\n          'ds-field-stack': true,\n          [`slider--${this.size}`]: true,\n          [`slider--${this.orientation}`]: true,\n          [`slider--thumb-${this.thumbAlignment}`]: true,\n          'slider--range': this.isRange,\n          'slider--readonly': this.readOnly,\n          'ds-control-inactive': this.isDisabled,\n        }}\n        data-orientation={this.orientation}\n        data-disabled={this.isDisabled ? '' : undefined}\n        data-readonly={this.readOnly ? '' : undefined}\n        data-dragging={this.dragging ? '' : undefined}\n        data-focused={this.focused ? '' : undefined}\n        data-filled=\"\"\n        data-dirty={dirty ? '' : undefined}\n        data-touched={this.touched ? '' : undefined}\n        data-valid={!this.isDisabled ? '' : undefined}\n        onClick={this.handleHostClick}\n      >\n        {(this.label || this.showValue) && (\n          <div class=\"slider__label-row\">\n            {this.label && (\n              <ds-text\n                class=\"slider__label\"\n                as=\"label\"\n                variant=\"text-body-small\"\n                color=\"primary\"\n                emphasis\n                for={firstInputId}\n                textId={this.labelId}\n              >\n                {this.label}\n              </ds-text>\n            )}\n            {this.showValue && (\n              <ds-text\n                class=\"slider__value\"\n                as=\"span\"\n                variant=\"text-body-small\"\n                color=\"primary\"\n                fontFeature=\"tabular-nums\"\n              >\n                {valueDisplay}\n              </ds-text>\n            )}\n          </div>\n        )}\n        <div\n          class=\"slider__control\"\n          ref={element => { this.controlEl = element ?? null; }}\n          style={{\n            '--ds-slider-start-pct': String(this.isRange ? this.percent(first) : 0),\n            '--ds-slider-end-pct': String(this.percent(last)),\n          } as Record<string, string>}\n          onPointerDown={this.handlePointerDown}\n          onPointerMove={this.handlePointerMove}\n          onPointerUp={(event: PointerEvent) => this.endPointerInteraction(event, false)}\n          onPointerCancel={(event: PointerEvent) => this.endPointerInteraction(event, true)}\n        >\n          <div class=\"slider__rail\" aria-hidden=\"true\"><div class=\"slider__indicator\" /></div>\n          {values.map((value, index) => this.renderThumb(value, index))}\n        </div>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

package/dist/mcp-data/registry/switch.json

@@ -2,7 +2,7 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "switch",
   "title": "Switch",
-  "description": "Compact on/off setting control for changes that take effect immediately, with three sizes and form-associated behavior.",
+  "description": "Compact on/off setting control for changes that take effect immediately, with four sizes and form-associated behavior.",
   "type": "registry:ui",
   "meta": {
     "library": "@ds-mo/ui",
@@ -13,7 +13,7 @@
     "intent": {
       "audience": "general",
       "status": "stable",
-      "summary": "Compact on/off setting control for changes that take effect immediately, with three sizes and form-associated behavior.",
+      "summary": "Compact on/off setting control for changes that take effect immediately, with four sizes and form-associated behavior.",
       "useWhen": [
         "A binary setting takes effect immediately when the user turns it on or off.",
         "A settings, form, or menu row needs a compact on/off control.",
@@ -56,7 +56,7 @@
       "states": [
         "Activation updates checked immediately and emits dsChange with the new boolean value.",
         "The initial checked value is the form-reset baseline; unchecked switches submit nothing unless uncheckedValue is provided.",
-        "Sizes are md 32×20 with a 12px thumb and 4px body inset, sm 24×16 with a 10px thumb and 3px inset, and xs 20×12 with an 8px thumb and 2px inset.",
+        "Sizes are lg 40×24 with a 16px thumb and 4px body inset, md 32×20 with a 12px thumb and 4px inset, sm 24×16 with a 10px thumb and 3px inset, and xs 20×12 with an 8px thumb and 2px inset.",
         "Unchecked uses a transparent track with a density-specific tertiary-foreground inset stroke and a solid tertiary-foreground thumb without a border. Checked uses a brand track and primary-background thumb with no strokes.",
         "Presentation mode removes switch semantics, focus, interaction, and form submission while retaining the checked visual."
       ],
@@ -165,7 +165,7 @@
         },
         "size": {
           "type": "SwitchSize",
-          "resolvedType": "\"md\" | \"sm\" | \"xs\"",
+          "resolvedType": "\"lg\" | \"md\" | \"sm\" | \"xs\"",
           "attribute": "size",
           "default": "'md'",
           "required": false,
@@ -277,7 +277,7 @@
       },
       "size": {
         "type": "SwitchSize",
-        "resolvedType": "\"md\" | \"sm\" | \"xs\"",
+        "resolvedType": "\"lg\" | \"md\" | \"sm\" | \"xs\"",
         "attribute": "size",
         "default": "'md'",
         "required": false,
@@ -349,12 +349,12 @@
   "files": [
     {
       "path": "src/wc/components/Switch/Switch.css",
-      "content": "@import '../../utils/focus-ring.css';\n@import '../../utils/control-inactive.css';\n\n:host {\n  --ds-switch-width: var(--dimension-size-400);\n  --ds-switch-height: var(--dimension-size-250);\n  --ds-switch-thumb-size: var(--dimension-size-150);\n  --ds-switch-gap: var(--dimension-space-050);\n  --ds-switch-stroke: var(--dimension-stroke-width-012);\n  --ds-switch-inset: var(--ds-switch-gap);\n  --ds-switch-thumb-hover: var(--color-interaction-hover);\n  --ds-switch-thumb-pressed: var(--color-interaction-pressed);\n  --ds-switch-travel: calc(\n    var(--ds-switch-width) - var(--ds-switch-thumb-size) - var(--ds-switch-inset) -\n      var(--ds-switch-inset)\n  );\n  position: relative;\n  display: inline-flex;\n  width: var(--ds-switch-width);\n  height: var(--ds-switch-height);\n  padding: 0;\n  border: none;\n  border-radius: var(--dimension-radius-half);\n  box-sizing: border-box;\n  flex-shrink: 0;\n  overflow: visible;\n  cursor: default;\n  user-select: none;\n  outline: none;\n  background-color: transparent;\n  box-shadow: inset 0 0 0 var(--ds-switch-stroke) var(--color-border-secondary);\n  transition:\n    background-color var(--effect-motion-short-3),\n    box-shadow var(--effect-motion-short-3);\n}\n\n:host(.switch--sm) {\n  --ds-switch-width: var(--dimension-size-300);\n  --ds-switch-height: var(--dimension-size-200);\n  --ds-switch-thumb-size: calc(var(--dimension-size-base) * 5 / 4);\n  --ds-switch-gap: calc(var(--dimension-space-025) + var(--dimension-space-012));\n}\n\n:host(.switch--xs) {\n  --ds-switch-width: var(--dimension-size-250);\n  --ds-switch-height: var(--dimension-size-150);\n  --ds-switch-thumb-size: var(--dimension-size-100);\n  --ds-switch-gap: var(--dimension-space-025);\n}\n\n:host(.checked) {\n  background-color: var(--color-background-bold-brand);\n  box-shadow: none;\n}\n\n:host(.switch--readonly),\n:host(.switch--presentation) {\n  cursor: default;\n}\n\n:host(.switch--presentation) {\n  pointer-events: none;\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity). */\n\n.thumb {\n  position: absolute;\n  top: 50%;\n  left: var(--ds-switch-inset);\n  width: var(--ds-switch-thumb-size);\n  height: var(--ds-switch-thumb-size);\n  border-radius: var(--dimension-radius-half);\n  background-color: var(--color-foreground-tertiary);\n  box-shadow: none;\n  transform: translateY(-50%);\n  transition:\n    background-color var(--effect-motion-short-3),\n    transform var(--effect-motion-short-3);\n  pointer-events: none;\n}\n\n.thumb::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: transparent;\n  pointer-events: none;\n}\n\n:host(:hover:not(:disabled):not(.ds-control-inactive):not(.switch--readonly):not(.switch--presentation))\n  .thumb::after {\n  background: var(--ds-switch-thumb-hover);\n}\n\n:host(:active:not(:disabled):not(.ds-control-inactive):not(.switch--readonly):not(.switch--presentation))\n  .thumb::after {\n  background: var(--ds-switch-thumb-pressed);\n}\n\n:host(.checked) .thumb {\n  background-color: var(--color-background-primary);\n  box-shadow: none;\n  transform: translate3d(var(--ds-switch-travel), -50%, 0);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    transition: none;\n  }\n\n  .thumb {\n    transition: none;\n  }\n}\n",
+      "content": "@import '../../utils/focus-ring.css';\n@import '../../utils/control-inactive.css';\n\n:host {\n  --ds-switch-width: var(--dimension-size-400);\n  --ds-switch-height: var(--dimension-size-250);\n  --ds-switch-thumb-size: var(--dimension-size-150);\n  --ds-switch-gap: var(--dimension-space-050);\n  --ds-switch-stroke: var(--dimension-stroke-width-012);\n  --ds-switch-inset: var(--ds-switch-gap);\n  --ds-switch-thumb-hover: var(--color-interaction-hover);\n  --ds-switch-thumb-pressed: var(--color-interaction-pressed);\n  --ds-switch-travel: calc(\n    var(--ds-switch-width) - var(--ds-switch-thumb-size) - var(--ds-switch-inset) -\n      var(--ds-switch-inset)\n  );\n  position: relative;\n  display: inline-flex;\n  width: var(--ds-switch-width);\n  height: var(--ds-switch-height);\n  padding: 0;\n  border: none;\n  border-radius: var(--dimension-radius-half);\n  box-sizing: border-box;\n  flex-shrink: 0;\n  overflow: visible;\n  cursor: default;\n  user-select: none;\n  outline: none;\n  background-color: transparent;\n  box-shadow: inset 0 0 0 var(--ds-switch-stroke) var(--color-border-secondary);\n  transition:\n    background-color var(--effect-motion-short-3),\n    box-shadow var(--effect-motion-short-3);\n}\n\n:host(.switch--lg) {\n  --ds-switch-width: var(--dimension-size-500);\n  --ds-switch-height: var(--dimension-size-300);\n  --ds-switch-thumb-size: var(--dimension-iconography-sm);\n  --ds-switch-gap: var(--dimension-space-050);\n}\n\n:host(.switch--sm) {\n  --ds-switch-width: var(--dimension-size-300);\n  --ds-switch-height: var(--dimension-size-200);\n  --ds-switch-thumb-size: calc(var(--dimension-size-base) * 5 / 4);\n  --ds-switch-gap: calc(var(--dimension-space-025) + var(--dimension-space-012));\n}\n\n:host(.switch--xs) {\n  --ds-switch-width: var(--dimension-size-250);\n  --ds-switch-height: var(--dimension-size-150);\n  --ds-switch-thumb-size: var(--dimension-size-100);\n  --ds-switch-gap: var(--dimension-space-025);\n}\n\n:host(.checked) {\n  background-color: var(--color-background-bold-brand);\n  box-shadow: none;\n}\n\n:host(.switch--readonly),\n:host(.switch--presentation) {\n  cursor: default;\n}\n\n:host(.switch--presentation) {\n  pointer-events: none;\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity). */\n\n.thumb {\n  position: absolute;\n  top: 50%;\n  left: var(--ds-switch-inset);\n  width: var(--ds-switch-thumb-size);\n  height: var(--ds-switch-thumb-size);\n  border-radius: var(--dimension-radius-half);\n  background-color: var(--color-foreground-tertiary);\n  box-shadow: none;\n  transform: translateY(-50%);\n  transition:\n    background-color var(--effect-motion-short-3),\n    transform var(--effect-motion-short-3);\n  pointer-events: none;\n}\n\n.thumb::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: transparent;\n  pointer-events: none;\n}\n\n:host(:hover:not(:disabled):not(.ds-control-inactive):not(.switch--readonly):not(.switch--presentation))\n  .thumb::after {\n  background: var(--ds-switch-thumb-hover);\n}\n\n:host(:active:not(:disabled):not(.ds-control-inactive):not(.switch--readonly):not(.switch--presentation))\n  .thumb::after {\n  background: var(--ds-switch-thumb-pressed);\n}\n\n:host(.checked) .thumb {\n  background-color: var(--color-background-primary);\n  box-shadow: none;\n  transform: translate3d(var(--ds-switch-travel), -50%, 0);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    transition: none;\n  }\n\n  .thumb {\n    transition: none;\n  }\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/Switch/Switch.tsx",
-      "content": "import { AttachInternals, Component, Element, Prop, State, Event, EventEmitter, Watch, h, Host } from '@stencil/core';\nimport { DEFAULT_REQUIRED_MESSAGE, setRequiredValidity } from '../../utils';\n\nexport type SwitchSize = 'md' | 'sm' | 'xs';\n\nlet generatedLabelId = 0;\n\n@Component({\n  tag: 'ds-switch',\n  styleUrl: 'Switch.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Switch {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Current on/off state. The initial value is restored when the owning form resets. */\n  @Prop({ mutable: true }) checked: boolean = false;\n\n  @Prop({ reflect: true }) name: string | undefined;\n  @Prop() value: string = 'on';\n\n  /** Optional value submitted when unchecked; omitted by default like a native checkbox. */\n  @Prop() uncheckedValue: string | undefined;\n\n  /** Associates the switch with a form by id when it is rendered outside that form. */\n  @Prop({ reflect: true }) form: string | undefined;\n\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) readOnly: boolean = false;\n  @Prop({ reflect: true }) required: boolean = false;\n  @Prop() requiredMessage: string = DEFAULT_REQUIRED_MESSAGE;\n  @Prop() isInactive: boolean = false;\n\n  /** Compact track size for placement inside controls, menus, and form rows. */\n  @Prop() size: SwitchSize = 'md';\n\n  /**\n   * Removes standalone control semantics so a composite owner such as a\n   * `menuitemcheckbox` can use the switch as an aria-hidden visual indicator.\n   */\n  @Prop() presentation: boolean = false;\n\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private initialChecked = false;\n  @State() private formDisabled = false;\n  @State() private focused = false;\n  @State() private touched = false;\n\n  componentWillLoad() {\n    this.initialChecked = this.checked;\n    this.syncFormValue();\n  }\n\n  componentDidLoad() {\n    this.syncNativeLabels();\n  }\n\n  @Watch('checked')\n  @Watch('value')\n  @Watch('uncheckedValue')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('presentation')\n  @Watch('required')\n  syncFormValue() {\n    const inactive = this.presentation || this.isInactive || this.disabled || this.formDisabled;\n    const submissionValue = this.checked ? this.value : this.uncheckedValue ?? null;\n    const state = this.checked ? 'checked' : 'unchecked';\n    this.internals.setFormValue(inactive ? null : submissionValue, state);\n\n    const missing = this.required && !inactive && !this.checked;\n    setRequiredValidity(this.internals, missing, this.requiredMessage);\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.checked = this.initialChecked;\n    this.focused = false;\n    this.touched = false;\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this.checked = state === 'checked';\n  }\n\n  private syncNativeLabels() {\n    if (this.presentation) return;\n    if (this.el.hasAttribute('aria-label') || this.el.hasAttribute('aria-labelledby')) return;\n\n    const labelIds = (Array.from(this.internals.labels) as HTMLLabelElement[]).map(label => {\n      if (!label.id) label.id = `ds-switch-label-${++generatedLabelId}`;\n      return label.id;\n    });\n    if (labelIds.length) this.el.setAttribute('aria-labelledby', labelIds.join(' '));\n  }\n\n  private handleClick = () => {\n    if (this.presentation || this.readOnly || this.isInactive || this.disabled || this.formDisabled) return;\n    this.checked = !this.checked;\n    this.dsChange.emit(this.checked);\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.presentation || this.readOnly || this.isInactive || this.disabled || this.formDisabled) return;\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      this.handleClick();\n    }\n  };\n\n  private handleFocus = () => {\n    if (!this.presentation) this.focused = true;\n  };\n\n  private handleBlur = () => {\n    if (this.presentation) return;\n    this.focused = false;\n    this.touched = true;\n  };\n\n  render() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    const invalid = this.required && !inactive && !this.checked;\n    const dirty = this.checked !== this.initialChecked;\n    // Switch owns its structural track and thumb strokes so nested interaction layers cannot cover them.\n    return (\n      <Host\n        role={this.presentation ? undefined : 'switch'}\n        aria-checked={this.presentation ? undefined : String(this.checked)}\n        aria-disabled={!this.presentation && inactive ? 'true' : undefined}\n        aria-readonly={!this.presentation && this.readOnly ? 'true' : undefined}\n        aria-required={!this.presentation && this.required ? 'true' : undefined}\n        aria-invalid={!this.presentation && invalid ? 'true' : undefined}\n        aria-hidden={this.presentation ? 'true' : undefined}\n        data-checked={this.checked ? '' : undefined}\n        data-unchecked={!this.checked ? '' : undefined}\n        data-disabled={inactive ? '' : undefined}\n        data-readonly={this.readOnly ? '' : undefined}\n        data-required={this.required ? '' : undefined}\n        data-focused={!this.presentation && this.focused ? '' : undefined}\n        data-filled={!this.presentation && this.checked ? '' : undefined}\n        data-dirty={!this.presentation && dirty ? '' : undefined}\n        data-touched={!this.presentation && this.touched ? '' : undefined}\n        data-valid={!this.presentation && !inactive && !invalid ? '' : undefined}\n        data-invalid={!this.presentation && invalid ? '' : undefined}\n        tabIndex={this.presentation || inactive ? -1 : 0}\n        class={{\n          switch: true,\n          checked: this.checked,\n          'switch--md': this.size === 'md',\n          'switch--sm': this.size === 'sm',\n          'switch--xs': this.size === 'xs',\n          'switch--readonly': this.readOnly,\n          'switch--presentation': this.presentation,\n          'ds-focus-ring': true,\n          'ds-control-inactive': inactive,\n        }}\n        onClick={this.handleClick}\n        onKeyDown={this.handleKeyDown}\n        onFocus={this.handleFocus}\n        onBlur={this.handleBlur}\n      >\n        <span class=\"thumb\" />\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { AttachInternals, Component, Element, Prop, State, Event, EventEmitter, Watch, h, Host } from '@stencil/core';\nimport { DEFAULT_REQUIRED_MESSAGE, setRequiredValidity } from '../../utils';\n\nexport type SwitchSize = 'lg' | 'md' | 'sm' | 'xs';\n\nlet generatedLabelId = 0;\n\n@Component({\n  tag: 'ds-switch',\n  styleUrl: 'Switch.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Switch {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Current on/off state. The initial value is restored when the owning form resets. */\n  @Prop({ mutable: true }) checked: boolean = false;\n\n  @Prop({ reflect: true }) name: string | undefined;\n  @Prop() value: string = 'on';\n\n  /** Optional value submitted when unchecked; omitted by default like a native checkbox. */\n  @Prop() uncheckedValue: string | undefined;\n\n  /** Associates the switch with a form by id when it is rendered outside that form. */\n  @Prop({ reflect: true }) form: string | undefined;\n\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) readOnly: boolean = false;\n  @Prop({ reflect: true }) required: boolean = false;\n  @Prop() requiredMessage: string = DEFAULT_REQUIRED_MESSAGE;\n  @Prop() isInactive: boolean = false;\n\n  /** Compact track size for placement inside controls, menus, and form rows. */\n  @Prop() size: SwitchSize = 'md';\n\n  /**\n   * Removes standalone control semantics so a composite owner such as a\n   * `menuitemcheckbox` can use the switch as an aria-hidden visual indicator.\n   */\n  @Prop() presentation: boolean = false;\n\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private initialChecked = false;\n  @State() private formDisabled = false;\n  @State() private focused = false;\n  @State() private touched = false;\n\n  componentWillLoad() {\n    this.initialChecked = this.checked;\n    this.syncFormValue();\n  }\n\n  componentDidLoad() {\n    this.syncNativeLabels();\n  }\n\n  @Watch('checked')\n  @Watch('value')\n  @Watch('uncheckedValue')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('presentation')\n  @Watch('required')\n  syncFormValue() {\n    const inactive = this.presentation || this.isInactive || this.disabled || this.formDisabled;\n    const submissionValue = this.checked ? this.value : this.uncheckedValue ?? null;\n    const state = this.checked ? 'checked' : 'unchecked';\n    this.internals.setFormValue(inactive ? null : submissionValue, state);\n\n    const missing = this.required && !inactive && !this.checked;\n    setRequiredValidity(this.internals, missing, this.requiredMessage);\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.checked = this.initialChecked;\n    this.focused = false;\n    this.touched = false;\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this.checked = state === 'checked';\n  }\n\n  private syncNativeLabels() {\n    if (this.presentation) return;\n    if (this.el.hasAttribute('aria-label') || this.el.hasAttribute('aria-labelledby')) return;\n\n    const labelIds = (Array.from(this.internals.labels) as HTMLLabelElement[]).map(label => {\n      if (!label.id) label.id = `ds-switch-label-${++generatedLabelId}`;\n      return label.id;\n    });\n    if (labelIds.length) this.el.setAttribute('aria-labelledby', labelIds.join(' '));\n  }\n\n  private handleClick = () => {\n    if (this.presentation || this.readOnly || this.isInactive || this.disabled || this.formDisabled) return;\n    this.checked = !this.checked;\n    this.dsChange.emit(this.checked);\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.presentation || this.readOnly || this.isInactive || this.disabled || this.formDisabled) return;\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      this.handleClick();\n    }\n  };\n\n  private handleFocus = () => {\n    if (!this.presentation) this.focused = true;\n  };\n\n  private handleBlur = () => {\n    if (this.presentation) return;\n    this.focused = false;\n    this.touched = true;\n  };\n\n  render() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    const invalid = this.required && !inactive && !this.checked;\n    const dirty = this.checked !== this.initialChecked;\n    // Switch owns its structural track and thumb strokes so nested interaction layers cannot cover them.\n    return (\n      <Host\n        role={this.presentation ? undefined : 'switch'}\n        aria-checked={this.presentation ? undefined : String(this.checked)}\n        aria-disabled={!this.presentation && inactive ? 'true' : undefined}\n        aria-readonly={!this.presentation && this.readOnly ? 'true' : undefined}\n        aria-required={!this.presentation && this.required ? 'true' : undefined}\n        aria-invalid={!this.presentation && invalid ? 'true' : undefined}\n        aria-hidden={this.presentation ? 'true' : undefined}\n        data-checked={this.checked ? '' : undefined}\n        data-unchecked={!this.checked ? '' : undefined}\n        data-disabled={inactive ? '' : undefined}\n        data-readonly={this.readOnly ? '' : undefined}\n        data-required={this.required ? '' : undefined}\n        data-focused={!this.presentation && this.focused ? '' : undefined}\n        data-filled={!this.presentation && this.checked ? '' : undefined}\n        data-dirty={!this.presentation && dirty ? '' : undefined}\n        data-touched={!this.presentation && this.touched ? '' : undefined}\n        data-valid={!this.presentation && !inactive && !invalid ? '' : undefined}\n        data-invalid={!this.presentation && invalid ? '' : undefined}\n        tabIndex={this.presentation || inactive ? -1 : 0}\n        class={{\n          switch: true,\n          checked: this.checked,\n          'switch--lg': this.size === 'lg',\n          'switch--md': this.size === 'md',\n          'switch--sm': this.size === 'sm',\n          'switch--xs': this.size === 'xs',\n          'switch--readonly': this.readOnly,\n          'switch--presentation': this.presentation,\n          'ds-focus-ring': true,\n          'ds-control-inactive': inactive,\n        }}\n        onClick={this.handleClick}\n        onKeyDown={this.handleKeyDown}\n        onFocus={this.handleFocus}\n        onBlur={this.handleBlur}\n      >\n        <span class=\"thumb\" />\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

package/dist/styles/control-elevation.css

@@ -3,8 +3,10 @@
  * the inset highlight in a combined `--effect-elevation-*` box shadow.
  *
  * Import `@ds-mo/ui/control-elevation.css`, apply `.ds-control-elevation`, and
- * select one level modifier. The owner still supplies layout, radius, surface,
- * and any backdrop blur. Keep wrapped controls' optional resting borders off.
+ * select one level modifier. Add `--press-scale` when the wrapper contains an
+ * approved press-scaling button so its surface and elevation move as one unit.
+ * The owner still supplies layout, radius, surface, and any backdrop blur.
+ * Keep wrapped controls' optional resting borders off.
  */
 
 .ds-control-elevation {
@@ -38,3 +40,26 @@
   --ds-control-elevation-shadow: var(--effect-shadow-elevated-floating);
   --ds-control-elevation-highlight: var(--effect-highlight-elevated-floating);
 }
+
+/*
+ * Transfer an approved button's physical press feedback to the elevated
+ * wrapper. The inherited override keeps the nested native button at rest so
+ * the wrapper and control do not compound their scale.
+ */
+.ds-control-elevation--press-scale {
+  --ds-control-press-active-scale: var(--dimension-scale-default);
+
+  transition: scale var(--effect-motion-short-2);
+}
+
+.ds-control-elevation--press-scale[data-ds-press-active] {
+  scale: var(--dimension-scale-subtle);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-control-elevation--press-scale,
+  .ds-control-elevation--press-scale[data-ds-press-active] {
+    scale: none;
+    transition: none;
+  }
+}

package/dist/types/components/ButtonFilled/ButtonFilled.d.ts

@@ -5,7 +5,7 @@ export type ButtonFilledIntent = 'neutral' | 'brand' | 'ai' | 'negative' | 'warn
 export type ButtonFilledContrast = 'bold' | 'strong' | 'medium' | 'faint';
 export type ButtonFilledBackground = ChoiceBackground;
 export type ButtonFilledVariant = 'icon' | 'label' | 'icon-label';
-export type ButtonFilledSize = 'md' | 'sm' | 'xs';
+export type ButtonFilledSize = 'lg' | 'md' | 'sm' | 'xs';
 export type ButtonFilledWidth = ControlWidth;
 export declare class ButtonFilled {
     el: HTMLElement;

package/dist/types/components/Checkbox/Checkbox.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-export type CheckboxSize = 'md' | 'sm' | 'xs';
+export type CheckboxSize = 'lg' | 'md' | 'sm' | 'xs';
 export declare class Checkbox {
     internals: ElementInternals;
     private labelId;

package/dist/types/components/Input/Input.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { type ControlWidth } from '../../utils';
 export type InputType = 'text' | 'email' | 'tel' | 'url' | 'search' | 'password';
-export type InputSize = 'md' | 'sm' | 'xs';
+export type InputSize = 'lg' | 'md' | 'sm' | 'xs';
 export type InputWidth = ControlWidth;
 export declare class Input {
     el: HTMLElement;

package/dist/types/components/Menu/Menu.d.ts

@@ -1,13 +1,16 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { type ChoicePopupAnchorAlignment } from '../../utils';
+import { type ChoicePopupAnchorAlignment, type ControlSize } from '../../utils';
 import { type MenuAlign, type MenuSide } from './menu-position';
 import type { MenuItemData, MenuSection } from './menu-types';
 export type MenuSelectionMode = 'none' | 'single';
+export type MenuSize = ControlSize;
 import { type ShellGradientPreset } from '../../shell/shell-gradient-presets';
 export declare class Menu {
     el: HTMLElement;
     open: boolean;
     items: MenuItemData[];
+    /** Choice-row density. */
+    size: MenuSize;
     /** Give ordinary rows mutually-exclusive menu semantics using isSelected. */
     selectionMode: MenuSelectionMode;
     sections: MenuSection[];

package/dist/types/components/MobileSheetNav/MobileSheetNav.d.ts

@@ -17,7 +17,6 @@ export declare class MobileSheetNav {
     dsBrowseContextChange: EventEmitter<NavChromeStyle>;
     dsClose: EventEmitter<void>;
     private get groups();
-    private get items();
     private get activeId();
     handleOpenChange(open: boolean): void;
     handleKeyDown(event: KeyboardEvent): void;

package/dist/types/components/Radio/Radio.d.ts

@@ -4,7 +4,7 @@ export interface RadioOption {
     value: string;
     isInactive?: boolean;
 }
-export type RadioSize = 'md' | 'sm' | 'xs';
+export type RadioSize = 'lg' | 'md' | 'sm' | 'xs';
 export declare class Radio {
     el: HTMLElement;
     internals: ElementInternals;

package/dist/types/components/Select/Select.d.ts

@@ -4,7 +4,7 @@ import { type ChoiceBackground, type ChoiceOption, type ChoiceSection } from '..
 export type SelectOption = ChoiceOption;
 export type SelectSection = ChoiceSection;
 export type SelectBackground = ChoiceBackground;
-export type SelectSize = 'md' | 'sm' | 'xs';
+export type SelectSize = 'lg' | 'md' | 'sm' | 'xs';
 export type SelectWidth = ControlWidth;
 export declare class Select {
     el: HTMLElement;
@@ -82,15 +82,9 @@ export declare class Select {
     private readonly generatedId;
     private readonly listboxId;
     private readonly errorId;
-    private triggerEl;
-    private popupEl;
-    private searchEl;
     private initialValue;
-    private typeahead;
-    private typeaheadTimer;
-    private outsideHandler;
-    private repositionHandler;
-    private positionRetryRaf;
+    private readonly controller;
+    private createController;
     componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
@@ -111,23 +105,12 @@ export declare class Select {
     private get selectedOption();
     private get hasSelection();
     private get activeOptionId();
-    private scrollActiveOptionIntoView;
-    private bindPopupListeners;
-    private unbindPopupListeners;
-    private cancelPositionRetry;
-    /** Retry until the conditionally rendered popup is mounted and measurable. */
-    private schedulePositionUpdate;
-    /** @returns `true` when the current popup was found and positioned. */
-    private updatePosition;
-    private openPopup;
     private closePopup;
+    private openPopup;
     private selectOption;
     private clearSelection;
-    private moveActive;
-    private setActiveEdge;
-    private handleTypeahead;
-    private handleListKeyDown;
-    private handleTriggerKeyDown;
+    private readonly handleListKeyDown;
+    private readonly handleTriggerKeyDown;
     private renderOption;
     render(): any;
 }

package/dist/types/components/SelectMulti/SelectMulti.d.ts

@@ -86,15 +86,9 @@ export declare class SelectMulti {
     private readonly generatedId;
     private readonly listboxId;
     private readonly errorId;
-    private triggerEl;
-    private popupEl;
-    private searchEl;
     private initialValues;
-    private typeahead;
-    private typeaheadTimer;
-    private outsideHandler;
-    private repositionHandler;
-    private positionRetryRaf;
+    private readonly controller;
+    private createController;
     componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
@@ -115,21 +109,12 @@ export declare class SelectMulti {
     private get resolvedValues();
     private get hasSelection();
     private get activeOptionId();
-    private scrollActiveOptionIntoView;
-    private bindPopupListeners;
-    private unbindPopupListeners;
-    private cancelPositionRetry;
-    /** Retry until the conditionally rendered popup is mounted and measurable. */
-    private schedulePositionUpdate;
-    /** @returns `true` when the current popup was found and positioned. */
-    private updatePosition;
-    private openPopup;
     private closePopup;
+    private openPopup;
     private toggleOption;
     private clearSelection;
-    private handleTypeahead;
-    private handleListKeyDown;
-    private handleTriggerKeyDown;
+    private readonly handleListKeyDown;
+    private readonly handleTriggerKeyDown;
     private renderOption;
     render(): any;
 }

package/dist/types/components/ShellTools/ShellTools.d.ts

@@ -18,6 +18,7 @@ export declare class ShellTools {
     toolShortcutsLabel: string;
     inboxLabel: string;
     inboxNavigationLabel: string;
+    presentationChanged(next: 'drawer' | 'fullscreen', previous: 'drawer' | 'fullscreen'): void;
     dsToolChange: EventEmitter<{
         id: PanelToolsToolId;
         selected: boolean;

package/dist/types/components/Switch/Switch.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-export type SwitchSize = 'md' | 'sm' | 'xs';
+export type SwitchSize = 'lg' | 'md' | 'sm' | 'xs';
 export declare class Switch {
     el: HTMLElement;
     internals: ElementInternals;

package/dist/types/components.d.ts

@@ -33,7 +33,7 @@ import { IconColor as IconColor1, IconSize } from "./components/Icon/Icon";
 import { InputSize, InputType, InputWidth } from "./components/Input/Input";
 import { LoaderColor, LoaderSize } from "./components/Loader/Loader";
 import { MenuItemData, MenuSection } from "./components/Menu/menu-types";
-import { MenuSelectionMode } from "./components/Menu/Menu";
+import { MenuSelectionMode, MenuSize } from "./components/Menu/Menu";
 import { MenuAlign, MenuSide } from "./components/Menu/menu-position";
 import { ChoicePopupAnchorAlignment } from "./utils";
 import { ShellGradientPreset } from "./shell/shell-gradient-presets";
@@ -92,7 +92,7 @@ export { IconColor as IconColor1, IconSize } from "./components/Icon/Icon";
 export { InputSize, InputType, InputWidth } from "./components/Input/Input";
 export { LoaderColor, LoaderSize } from "./components/Loader/Loader";
 export { MenuItemData, MenuSection } from "./components/Menu/menu-types";
-export { MenuSelectionMode } from "./components/Menu/Menu";
+export { MenuSelectionMode, MenuSize } from "./components/Menu/Menu";
 export { MenuAlign, MenuSide } from "./components/Menu/menu-position";
 export { ChoicePopupAnchorAlignment } from "./utils";
 export { ShellGradientPreset } from "./shell/shell-gradient-presets";
@@ -1276,6 +1276,11 @@ export namespace Components {
           * @default TOKEN_CSS_LENGTHS.space050
          */
         "sideOffset": number | string;
+        /**
+          * Choice-row density.
+          * @default 'md'
+         */
+        "size": MenuSize;
     }
     interface DsMessage {
         /**
@@ -5350,6 +5355,11 @@ declare namespace LocalJSX {
           * @default TOKEN_CSS_LENGTHS.space050
          */
         "sideOffset"?: number | string;
+        /**
+          * Choice-row density.
+          * @default 'md'
+         */
+        "size"?: MenuSize;
     }
     interface DsMessage {
         /**
@@ -7310,6 +7320,7 @@ declare namespace LocalJSX {
     }
     interface DsMenuAttributes {
         "open": boolean;
+        "size": MenuSize;
         "selectionMode": MenuSelectionMode;
         "side": MenuSide;
         "align": MenuAlign;

package/dist/types/utils/choice-list-parts.d.ts

@@ -1,6 +1,8 @@
 import { FunctionalComponent, VNode } from '../stencil-public-runtime';
 import type { ChoiceOption } from './choice-list';
+import { type ControlSize } from './control-text';
 interface ChoiceSearchProps {
+    size?: ControlSize;
     value: string;
     placeholder: string;
     ariaLabel?: string;
@@ -15,12 +17,14 @@ interface ChoiceSearchProps {
 }
 export declare const ChoiceSearch: FunctionalComponent<ChoiceSearchProps>;
 interface ChoiceFooterProps {
+    size?: ControlSize;
     clearLabel: string;
     summary?: string;
     onClear: (event: MouseEvent) => void;
 }
 export declare const ChoiceFooter: FunctionalComponent<ChoiceFooterProps>;
 interface ChoiceOptionRowProps {
+    size?: ControlSize;
     id: string;
     option: ChoiceOption;
     selected: boolean;

package/dist/types/utils/control-press.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Transfers an eligible button pointer press to its elevated wrapper.
+ *
+ * The wrapper cannot rely on `:active`: Chromium also activates ancestors of a
+ * disabled native button. Window-level release cleanup preserves the native
+ * release-outside behavior without changing pointer capture or click delivery.
+ */
+export declare function beginElevatedControlPress(event: PointerEvent, eligible: boolean): void;
+//# sourceMappingURL=control-press.d.ts.map

package/dist/types/utils/control-text.d.ts

@@ -1,6 +1,8 @@
 import type { TextVariant } from '../components/Text/text-types';
 /** Shared public control sizes. Typography is derived; it is not a separate density API. */
-export type ControlSize = 'md' | 'sm' | 'xs';
+export type ControlSize = 'lg' | 'md' | 'sm' | 'xs';
 /** Complete text variant selected internally by each control size. */
 export declare const CONTROL_TEXT_VARIANT: Record<ControlSize, TextVariant>;
+/** Supporting copy paired with each control density in two-line choice rows. */
+export declare const CONTROL_SUPPORTING_TEXT_VARIANT: Record<ControlSize, TextVariant>;
 //# sourceMappingURL=control-text.d.ts.map

package/dist/types/utils/index.d.ts

@@ -12,7 +12,7 @@ export type { TokenDefaultKey } from './token-defaults';
 export { DEFAULT_REQUIRED_MESSAGE, setRequiredValidity } from './required-validity';
 export { controlWidthClass } from './control-width';
 export type { ControlWidth } from './control-width';
-export { CONTROL_TEXT_VARIANT } from './control-text';
+export { CONTROL_SUPPORTING_TEXT_VARIANT, CONTROL_TEXT_VARIANT } from './control-text';
 export type { ControlSize } from './control-text';
 export { choicePopupMinWidth, resolveChoicePopupAlignOffset, } from './choice-popup-alignment';
 export type { ChoicePopupAnchorAlignment } from './choice-popup-alignment';