@ds-mo/ui 15.6.0 → 15.7.0

package/dist/mcp-data/registry/select-toggle.json

@@ -0,0 +1,351 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "select-toggle",
+  "title": "SelectToggle",
+  "description": "Compact cycling choice control with a vertical position indicator.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/select-toggle",
+    "source": "src/wc/components/SelectToggle/SelectToggle.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "experimental",
+      "summary": "Compact cycling choice control with a vertical position indicator.",
+      "useWhen": [
+        "Two or three local view modes should cycle through one compact button without opening a popup.",
+        "The current choice should update its label and/or icon while a small vertical dot indicator shows its position."
+      ],
+      "avoidWhen": [
+        "The full choice set must remain visible at once; use TabGroup instead.",
+        "The user must inspect or search more than three options; use Select instead.",
+        "The value must participate in native form submission; this initial component is a local cycling control, not a form-associated select."
+      ],
+      "alternatives": [
+        {
+          "when": "Every choice should be visible and individually selectable.",
+          "component": "component:ds-tab-group",
+          "reason": "TabGroup exposes all choices and owns segmented keyboard selection."
+        },
+        {
+          "when": "The option list exceeds three choices or needs a dropdown.",
+          "component": "component:ds-select",
+          "reason": "Select provides a popup and the complete form-select contract."
+        }
+      ],
+      "commonlyComposedWith": [
+        "component:ds-text",
+        "component:ds-icon"
+      ],
+      "accessibility": [
+        "A single native button owns focus and activation by pointer, Enter, or Space; the dots are decorative and hidden from assistive technology.",
+        "Each option supplies a nonempty label, including icon-only choices. The button name announces the current label, position, and next choice; aria-label adds stable context.",
+        "An inactive button is natively disabled. Do not use aria-pressed because this is a multi-choice cycle, not a binary toggle."
+      ],
+      "states": [
+        "The application supplies exactly two or three uniquely valued options and may set value; invalid values resolve to the first choice without emitting a user-change event.",
+        "Activation advances to the next choice, wraps after the last, updates the mutable value, and emits dsChange once with the next value.",
+        "Variant selects label, icon, or icon-label content; the trailing slot scales with control density and displays the same number of vertical dots as choices.",
+        "Both treatments use transparent unfilled chrome; hasBorder removes only the inset stroke while preserving control geometry."
+      ],
+      "responsiveBehavior": [
+        "Hug follows the current content; fill uses the parent width and truncates a long label without moving the trailing indicator.",
+        "When collapseLabel is enabled in a table caption or data toolbar narrower than 900px, icon-label choices display only the icon while preserving the changing accessible name. Explicit icon and label variants are unchanged.",
+        "Small, medium, and large use shared control-density heights and matching dot-slot geometry."
+      ],
+      "frameworkCaveats": {
+        "customElements": [
+          "Assign options as a JavaScript property and listen for dsChange to observe user cycling."
+        ],
+        "react": [
+          "Pass options as an array and handle onDsChange to observe user cycling."
+        ],
+        "vue": [
+          "Bind options as an array and handle dsChange to update application state."
+        ],
+        "angular": [
+          "Bind options as an array and handle dsChange to update application state."
+        ]
+      },
+      "references": [
+        {
+          "label": "Storybook examples",
+          "path": "src/wc/components/SelectToggle/SelectToggle.stories.ts"
+        },
+        {
+          "label": "Rendered behavior and geometry",
+          "path": "tests/e2e/select-toggle.spec.ts"
+        }
+      ],
+      "styling": {
+        "rationale": "The component owns one density-sized unfilled button, changing choice content, and a fixed trailing position indicator; applications own surrounding layout and the choice data.",
+        "protected": [
+          {
+            "properties": [
+              "height",
+              "padding",
+              "gap",
+              "border-radius",
+              "background",
+              "border",
+              "color"
+            ],
+            "reason": "Control density and the indicator slot stay aligned across the supported variants.",
+            "props": [
+              "size",
+              "variant",
+              "width",
+              "hasBorder"
+            ]
+          }
+        ],
+        "customProperties": []
+      }
+    },
+    "api": {
+      "props": {
+        "ariaLabel": {
+          "type": "string | null",
+          "resolvedType": "null | string",
+          "attribute": "aria-label",
+          "default": "null",
+          "required": false,
+          "mutable": false,
+          "description": "Optional stable context prepended to the changing accessible choice name."
+        },
+        "collapseLabel": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "collapse-label",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Collapse an icon-label choice to its icon in a narrow table caption or data toolbar."
+        },
+        "hasBorder": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "has-border",
+          "default": "true",
+          "required": false,
+          "mutable": false,
+          "description": "Show an inset border; both treatments keep the transparent unfilled surface."
+        },
+        "isInactive": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "is-inactive",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Prevent interaction."
+        },
+        "options": {
+          "type": "SelectToggleOption[]",
+          "resolvedType": "SelectToggleOption[]",
+          "default": "[]",
+          "required": false,
+          "mutable": false,
+          "description": "Exactly two or three choices, each with a unique value and accessible label."
+        },
+        "size": {
+          "type": "SelectToggleSize",
+          "resolvedType": "\"lg\" | \"md\" | \"sm\"",
+          "attribute": "size",
+          "default": "'md'",
+          "required": false,
+          "mutable": false,
+          "description": "Control density: small, medium, or large; the trailing indicator scales with it."
+        },
+        "value": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "value",
+          "default": "''",
+          "required": false,
+          "mutable": true,
+          "description": "Current choice. User activation updates this value and emits dsChange."
+        },
+        "variant": {
+          "type": "SelectToggleVariant",
+          "resolvedType": "\"icon\" | \"icon-label\" | \"label\"",
+          "attribute": "variant",
+          "default": "'label'",
+          "required": false,
+          "mutable": false,
+          "description": "Show the current label, icon, or both. Icon variants require an icon on each choice."
+        },
+        "width": {
+          "type": "ControlWidth",
+          "resolvedType": "\"fill\" | \"hug\"",
+          "attribute": "width",
+          "default": "'hug'",
+          "required": false,
+          "mutable": false,
+          "description": "Hug the content or fill the parent."
+        }
+      },
+      "events": [
+        {
+          "name": "dsChange",
+          "detail": "string",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true
+        }
+      ],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "ariaLabel": {
+        "type": "string | null",
+        "resolvedType": "null | string",
+        "attribute": "aria-label",
+        "default": "null",
+        "required": false,
+        "mutable": false,
+        "description": "Optional stable context prepended to the changing accessible choice name."
+      },
+      "collapseLabel": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "collapse-label",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Collapse an icon-label choice to its icon in a narrow table caption or data toolbar."
+      },
+      "hasBorder": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "has-border",
+        "default": "true",
+        "required": false,
+        "mutable": false,
+        "description": "Show an inset border; both treatments keep the transparent unfilled surface."
+      },
+      "isInactive": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "is-inactive",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Prevent interaction."
+      },
+      "options": {
+        "type": "SelectToggleOption[]",
+        "resolvedType": "SelectToggleOption[]",
+        "default": "[]",
+        "required": false,
+        "mutable": false,
+        "description": "Exactly two or three choices, each with a unique value and accessible label."
+      },
+      "size": {
+        "type": "SelectToggleSize",
+        "resolvedType": "\"lg\" | \"md\" | \"sm\"",
+        "attribute": "size",
+        "default": "'md'",
+        "required": false,
+        "mutable": false,
+        "description": "Control density: small, medium, or large; the trailing indicator scales with it."
+      },
+      "value": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "value",
+        "default": "''",
+        "required": false,
+        "mutable": true,
+        "description": "Current choice. User activation updates this value and emits dsChange."
+      },
+      "variant": {
+        "type": "SelectToggleVariant",
+        "resolvedType": "\"icon\" | \"icon-label\" | \"label\"",
+        "attribute": "variant",
+        "default": "'label'",
+        "required": false,
+        "mutable": false,
+        "description": "Show the current label, icon, or both. Icon variants require an icon on each choice."
+      },
+      "width": {
+        "type": "ControlWidth",
+        "resolvedType": "\"fill\" | \"hug\"",
+        "attribute": "width",
+        "default": "'hug'",
+        "required": false,
+        "mutable": false,
+        "description": "Hug the content or fill the parent."
+      }
+    },
+    "events": [
+      {
+        "name": "dsChange",
+        "detail": "string",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true
+      }
+    ],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-select-toggle",
+      "react": "DsSelectToggle",
+      "vue": "DsSelectToggle",
+      "angular": "DsSelectToggle"
+    },
+    "consumption": {
+      "install": "npm install @ds-mo/ui @ds-mo/tokens @ds-mo/icons",
+      "cssSetup": "import '@ds-mo/tokens';\nimport '@ds-mo/tokens/reset';\nimport '@ds-mo/tokens/globals';",
+      "customElements": {
+        "import": "import '@ds-mo/ui/dist/components/ds-select-toggle.js';",
+        "example": "<ds-select-toggle></ds-select-toggle>"
+      },
+      "react": {
+        "import": "import { DsSelectToggle } from '@ds-mo/ui/react';",
+        "example": "<DsSelectToggle />"
+      },
+      "vue": {
+        "import": "import { DsSelectToggle } from '@ds-mo/ui/vue';",
+        "example": "<DsSelectToggle />"
+      },
+      "angular": {
+        "import": "import { DsSelectToggle } from '@ds-mo/ui/angular/ds-select-toggle';",
+        "example": "<ds-select-toggle></ds-select-toggle>"
+      },
+      "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: options.",
+      "peerDependencies": {
+        "required": [
+          "@ds-mo/tokens ^6.7.0",
+          "@ds-mo/icons ^8.1.1"
+        ],
+        "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
+      }
+    }
+  },
+  "dependencies": [
+    "@ds-mo/ui",
+    "@ds-mo/tokens",
+    "@ds-mo/icons"
+  ],
+  "registryDependencies": [
+    "icon",
+    "text"
+  ],
+  "files": [
+    {
+      "path": "src/wc/components/SelectToggle/SelectToggle.css",
+      "content": "@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-parts.css';\n@import '../../utils/control-width.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n\n:host {\n  display: inline-flex;\n  min-inline-size: 0;\n  --_select-toggle-dot-position: var(--dimension-size-050);\n  --_select-toggle-dot-idle: var(--dimension-space-025);\n  --_select-toggle-dot-active: var(--_select-toggle-dot-idle);\n  --_select-toggle-dot-gap: var(--dimension-space-012);\n}\n\n:host(.ds-control--sm) {\n  --_select-toggle-dot-position: calc(var(--dimension-size-050) * 3 / 4);\n  --_select-toggle-dot-idle: var(--dimension-space-012);\n}\n\n:host(.ds-control--lg) {\n  --_select-toggle-dot-position: calc(var(--dimension-size-050) * 5 / 4);\n  --_select-toggle-dot-idle: calc(var(--dimension-size-050) * 3 / 4);\n  --_select-toggle-dot-gap: var(--dimension-space-025);\n}\n\n:host(.ds-control-width--fill) {\n  display: flex;\n  width: 100%;\n}\n\n.trigger {\n  appearance: none;\n  min-inline-size: 0;\n  max-inline-size: 100%;\n  justify-content: space-between;\n  background: var(--color-background-transparent);\n  border: 0;\n  color: var(--color-foreground-secondary);\n  font-family: inherit;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.trigger--bordered {\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--color-border-tertiary);\n}\n\n:host(.ds-control-width--fill) .trigger {\n  width: 100%;\n}\n\n.trigger__content {\n  display: inline-flex;\n  align-items: center;\n  flex: 1 1 auto;\n  gap: var(--ds-control-gap);\n  min-width: 0;\n  overflow: hidden;\n}\n\n.trigger__label {\n  min-width: 0;\n  overflow: hidden;\n  text-align: left;\n}\n\n.trigger__indicator {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 calc(var(--ds-control-icon) - var(--dimension-size-100));\n  width: calc(var(--ds-control-icon) - var(--dimension-size-100));\n  height: var(--ds-control-icon);\n  gap: var(--_select-toggle-dot-gap);\n}\n\n.trigger__dot-position {\n  display: grid;\n  place-items: center;\n  flex: 0 0 var(--_select-toggle-dot-position);\n  width: var(--_select-toggle-dot-position);\n  height: var(--_select-toggle-dot-position);\n}\n\n.trigger__dot {\n  width: var(--_select-toggle-dot-idle);\n  height: var(--_select-toggle-dot-idle);\n  border-radius: var(--dimension-radius-half);\n  background: var(--color-foreground-quaternary);\n}\n\n.trigger__dot--active {\n  width: var(--_select-toggle-dot-active);\n  height: var(--_select-toggle-dot-active);\n  background: var(--color-foreground-secondary);\n}\n\n@media (forced-colors: active) {\n  .trigger {\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-control-boundary);\n    outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n  }\n\n  .trigger__dot {\n    background: var(--ds-forced-color-content);\n  }\n\n  .trigger__dot--active {\n    background: var(--ds-forced-color-selected);\n  }\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/SelectToggle/SelectToggle.tsx",
+      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { controlWidthClass, CONTROL_TEXT_VARIANT, type ControlWidth } from '../../utils';\nimport { observeTableCaptionCompact } from '../../utils/table-caption-compact';\n\nexport interface SelectToggleOption {\n  value: string;\n  label: string;\n  icon?: string;\n}\n\nexport type SelectToggleVariant = 'label' | 'icon' | 'icon-label';\nexport type SelectToggleSize = 'sm' | 'md' | 'lg';\n\n@Component({ tag: 'ds-select-toggle', styleUrl: 'SelectToggle.css', scoped: true })\nexport class SelectToggle {\n  @Element() el!: HTMLElement;\n\n  /** Exactly two or three choices, each with a unique value and accessible label. */\n  @Prop() options: SelectToggleOption[] = [];\n\n  /** Current choice. User activation updates this value and emits dsChange. */\n  @Prop({ mutable: true }) value: string = '';\n\n  /** Show the current label, icon, or both. Icon variants require an icon on each choice. */\n  @Prop() variant: SelectToggleVariant = 'label';\n\n  /** Collapse an icon-label choice to its icon in a narrow table caption or data toolbar. */\n  @Prop({ reflect: true }) collapseLabel: boolean = false;\n\n  /** Control density: small, medium, or large; the trailing indicator scales with it. */\n  @Prop() size: SelectToggleSize = 'md';\n\n  /** Hug the content or fill the parent. */\n  @Prop() width: ControlWidth = 'hug';\n\n  /** Show an inset border; both treatments keep the transparent unfilled surface. */\n  @Prop() hasBorder: boolean = true;\n\n  /** Prevent interaction. */\n  @Prop() isInactive: boolean = false;\n\n  /** Optional stable context prepended to the changing accessible choice name. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n\n  @Event() dsChange!: EventEmitter<string>;\n\n  @State() private captionCompact = false;\n\n  private captionCompactDisconnect: (() => void) | undefined;\n  private hasLoaded = false;\n\n  componentWillLoad() {\n    this.reconcileValue();\n  }\n\n  componentDidLoad(): void {\n    this.hasLoaded = true;\n    this.syncCaptionCompactObserver();\n  }\n\n  connectedCallback(): void {\n    if (this.hasLoaded) this.syncCaptionCompactObserver();\n  }\n\n  disconnectedCallback(): void {\n    this.disconnectCaptionCompactObserver();\n  }\n\n  @Watch('collapseLabel')\n  onCollapseLabelChange(): void {\n    this.syncCaptionCompactObserver();\n  }\n\n  @Watch('options')\n  @Watch('value')\n  reconcileValue() {\n    const choices = this.validOptions;\n    if (choices.length && !choices.some(option => option.value === this.value)) {\n      this.value = choices[0].value;\n    }\n  }\n\n  private get validOptions(): SelectToggleOption[] {\n    if (this.options.length < 2 || this.options.length > 3) return [];\n    if (\n      this.options.some(option => !option.value || !option.label) ||\n      new Set(this.options.map(option => option.value)).size !== this.options.length\n    ) {\n      return [];\n    }\n    return this.options;\n  }\n\n  private advance = () => {\n    const choices = this.validOptions;\n    if (this.isInactive || !choices.length) return;\n    const current = Math.max(\n      0,\n      choices.findIndex(option => option.value === this.value)\n    );\n    const next = choices[(current + 1) % choices.length];\n    this.value = next.value;\n    this.dsChange.emit(next.value);\n  };\n\n  private syncCaptionCompactObserver(): void {\n    this.disconnectCaptionCompactObserver();\n    if (!this.collapseLabel) {\n      if (this.captionCompact) this.captionCompact = false;\n      return;\n    }\n    this.captionCompactDisconnect = observeTableCaptionCompact(this.el, compact => {\n      if (this.captionCompact !== compact) this.captionCompact = compact;\n    });\n  }\n\n  private disconnectCaptionCompactObserver(): void {\n    this.captionCompactDisconnect?.();\n    this.captionCompactDisconnect = undefined;\n  }\n\n  render() {\n    const choices = this.validOptions;\n    const activeIndex = Math.max(\n      0,\n      choices.findIndex(option => option.value === this.value)\n    );\n    const active = choices[activeIndex];\n    const next = choices[(activeIndex + 1) % choices.length];\n    const showIcon = this.variant !== 'label';\n    const showLabel =\n      this.variant !== 'icon' &&\n      !(this.collapseLabel && this.captionCompact && this.variant === 'icon-label' && active?.icon);\n    const accessibleName = active\n      ? `${this.ariaLabel ? `${this.ariaLabel}: ` : ''}${active.label}, ${activeIndex + 1} of ${choices.length}. Next: ${next.label}`\n      : undefined;\n\n    return (\n      <Host\n        class={{\n          [`ds-control--${this.size}`]: true,\n          ...controlWidthClass(this.width),\n        }}\n      >\n        {active && (\n          <button\n            type=\"button\"\n            class={{\n              trigger: true,\n              'ds-control-frame': true,\n              'ds-focus-ring-inset': true,\n              'ds-interaction-fill': true,\n              'ds-control-inactive': this.isInactive,\n              'trigger--bordered': this.hasBorder,\n            }}\n            aria-label={accessibleName}\n            disabled={this.isInactive}\n            onClick={this.advance}\n          >\n            <span class=\"trigger__content ds-interaction-fill__content\">\n              {showIcon && active.icon && (\n                <span class=\"trigger__icon ds-control-icon-box\" aria-hidden=\"true\">\n                  <ds-icon name={active.icon} size={this.size} color=\"inherit\" />\n                </span>\n              )}\n              {showLabel && (\n                <ds-text\n                  class=\"trigger__label ds-control-label-box\"\n                  as=\"span\"\n                  variant={CONTROL_TEXT_VARIANT[this.size]}\n                  color=\"inherit\"\n                  lineTruncation={1}\n                >\n                  {active.label}\n                </ds-text>\n              )}\n            </span>\n            <span class=\"trigger__indicator ds-interaction-fill__content\" aria-hidden=\"true\">\n              {choices.map((option, index) => (\n                <span key={option.value} class=\"trigger__dot-position\">\n                  <span\n                    class={{\n                      trigger__dot: true,\n                      'trigger__dot--active': index === activeIndex,\n                    }}\n                  />\n                </span>\n              ))}\n            </span>\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

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

@@ -67,7 +67,8 @@
         "Horizontal Slider fills the width supplied by its parent; the parent chooses an appropriate readable track length.",
         "Vertical Slider owns a token-based default length that may be overridden with --ds-slider-vertical-length in layout-specific compositions.",
         "Use md in ordinary forms and sm or xs only when the surrounding control density uses the same recipe.",
-        "Track thickness scales with density. The unfilled track has a neutral border, the filled range uses brand color, and the thumb uses the primary surface with subtle elevation.",
+        "Track thickness scales with density. The half-rounded unfilled track uses a faint-neutral background and tertiary border, and the filled range uses brand color. The round thumb layers a track-sized bold-brand orb with a tertiary inset border over a larger transparent, blurred, medium-elevation circle.",
+        "Edge alignment places the inner orb edge at each full-width rail endpoint while the transparent outer circle overhangs; center alignment places the orb center at inset rail endpoints.",
         "Horizontal value direction is left-to-right; the design system does not author RTL-specific component behavior."
       ],
       "frameworkCaveats": {
@@ -325,7 +326,7 @@
           "default": "'edge'",
           "required": false,
           "mutable": false,
-          "description": "Align the thumb edge with full-width rail endpoints, or its center with inset rail endpoints."
+          "description": "Align the inner orb edge with full-width rail endpoints, or its center with inset rail endpoints."
         },
         "ticks": {
           "type": "SliderTick[]",
@@ -590,7 +591,7 @@
         "default": "'edge'",
         "required": false,
         "mutable": false,
-        "description": "Align the thumb edge with full-width rail endpoints, or its center with inset rail endpoints."
+        "description": "Align the inner orb edge with full-width rail endpoints, or its center with inset rail endpoints."
       },
       "ticks": {
         "type": "SliderTick[]",
@@ -712,12 +713,12 @@
   "files": [
     {
       "path": "src/wc/components/Slider/Slider.css",
-      "content": "@import '../../utils/control-inactive.css';\n@import '../../utils/field-stack.css';\n@import '../../utils/forced-colors.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 + (var(--ds-slider-end-pct, 0) / 100) *\n      (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 + (var(--ds-slider-start-pct, 0) / 100) *\n      (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@media (hover: hover) and (pointer: fine) {\n  :host(:not(.slider--readonly):not(.ds-control-inactive))\n    .slider__thumb:hover\n    .slider__thumb-wash {\n    background-color: var(--color-interaction-hover);\n  }\n}\n\n:host([data-dragging]:not(.slider--readonly):not(.ds-control-inactive))\n  .slider__thumb--active\n  .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 + (var(--ds-slider-end-pct, 0) / 100) *\n      (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 + (var(--ds-slider-start-pct, 0) / 100) *\n      (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\n@media (forced-colors: active) {\n  .slider__rail {\n    border: var(--ds-slider-track-stroke) solid var(--ds-forced-color-content);\n    box-shadow: none;\n  }\n\n  .slider__indicator {\n    background-color: var(--ds-forced-color-selected);\n  }\n\n  .slider__thumb-visual {\n    border: var(--dimension-stroke-width-012) solid var(--ds-forced-color-control-boundary);\n    background-color: var(--ds-forced-color-surface);\n    box-shadow: none;\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-color: var(--ds-forced-color-selected);\n  }\n}\n\n.slider__tick {\n  position: absolute;\n  top: calc(\n    50% + var(--ds-slider-track-size) / 2 + var(--dimension-space-050) + var(--dimension-space-012)\n  );\n  left: calc(\n    var(--ds-slider-thumb-size) / 2 + (var(--ds-slider-tick-pct) / 100) *\n      (100% - var(--ds-slider-thumb-size))\n  );\n  transform: translateX(-50%);\n  pointer-events: none;\n}\n.slider__tick-mark {\n  display: block;\n  width: var(--dimension-stroke-width-025);\n  height: var(--dimension-stroke-width-025);\n  border-radius: var(--dimension-radius-half);\n  background: var(--color-foreground-tertiary);\n}\n.slider__tick-label {\n  width: max-content;\n  max-width: none;\n  position: absolute;\n  top: calc(100% + var(--dimension-space-050));\n  left: 50%;\n  transform: translateX(-50%);\n  white-space: nowrap;\n}\n:host(:not(.slider--vertical)) .slider__control {\n  container-type: inline-size;\n}\n:host(:not(.slider--vertical)) .slider__tick-label {\n  /* Center on the tick, clamping only when the text reaches the control edges. */\n  --ds-slider-label-anchor: calc(\n    var(--ds-slider-thumb-size) / 2 + (var(--ds-slider-tick-pct) / 100) *\n      (100cqw - var(--ds-slider-thumb-size))\n  );\n  transform: translateX(\n    clamp(\n      calc(-1 * var(--ds-slider-label-anchor)),\n      -50%,\n      calc(100cqw - var(--ds-slider-label-anchor) - 100%)\n    )\n  );\n}\n:host(.slider--tick-labels:not(.slider--vertical)) .slider__control {\n  margin-bottom: var(--dimension-space-200);\n}\n:host(.slider--vertical) .slider__tick {\n  top: auto;\n  bottom: calc(\n    var(--ds-slider-thumb-size) / 2 + (var(--ds-slider-tick-pct) / 100) *\n      (100% - var(--ds-slider-thumb-size))\n  );\n  left: calc(50% + var(--ds-slider-track-size) / 2 + var(--dimension-space-050));\n  transform: translateY(50%);\n}\n:host(.slider--vertical) .slider__tick-label {\n  top: 50%;\n  left: calc(100% + var(--dimension-space-050));\n  transform: translateY(-50%);\n}\n",
+      "content": "@import '../../utils/control-inactive.css';\n@import '../../utils/field-stack.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  --ds-slider-control-size: var(--dimension-size-400);\n  --ds-slider-track-size: var(--dimension-size-100);\n  --ds-slider-thumb-size: calc(\n    var(--ds-slider-track-size) + var(--dimension-space-050) + var(--dimension-space-050)\n  );\n  --ds-slider-endpoint-size: var(--ds-slider-track-size);\n  --ds-slider-thumb-overhang: calc(\n    (var(--ds-slider-thumb-size) - var(--ds-slider-endpoint-size)) / 2\n  );\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-track-size: var(--dimension-size-075);\n}\n\n:host(.slider--xs) {\n  --ds-slider-control-size: var(--dimension-size-200);\n  --ds-slider-track-size: var(--dimension-size-050);\n}\n\n:host(.slider--thumb-center) {\n  --ds-slider-endpoint-size: var(--ds-slider-thumb-size);\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-half);\n  background-color: var(--color-background-faint-neutral);\n  box-shadow: inset 0 0 0 var(--ds-slider-track-stroke) var(--color-border-tertiary);\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-endpoint-size) / 2 + (var(--ds-slider-end-pct, 0) / 100) *\n      (100% - var(--ds-slider-endpoint-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-endpoint-size) / 2 + (var(--ds-slider-start-pct, 0) / 100) *\n      (100% - var(--ds-slider-endpoint-size))\n  );\n  width: calc(\n    ((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) / 100) *\n      (100% - var(--ds-slider-endpoint-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(\n    (var(--ds-slider-thumb-pct, 0) / 100) * (100% - var(--ds-slider-endpoint-size)) -\n      var(--ds-slider-thumb-overhang)\n  );\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-half);\n  background-color: var(--color-background-transparent);\n  -webkit-backdrop-filter: blur(var(--effect-blur-sm));\n  backdrop-filter: blur(var(--effect-blur-sm));\n  box-shadow: var(--effect-elevation-elevated-md);\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.slider__thumb-orb {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  box-sizing: border-box;\n  width: var(--ds-slider-track-size);\n  height: var(--ds-slider-track-size);\n  border-radius: var(--dimension-radius-half);\n  background-color: var(--color-background-bold-brand);\n  box-shadow: inset 0 0 0 var(--ds-slider-track-stroke) var(--color-border-tertiary);\n  transform: translate(-50%, -50%);\n}\n\n@media (hover: hover) and (pointer: fine) {\n  :host(:not(.slider--readonly):not(.ds-control-inactive))\n    .slider__thumb:hover\n    .slider__thumb-wash {\n    background-color: var(--color-interaction-hover);\n  }\n}\n\n:host([data-dragging]:not(.slider--readonly):not(.ds-control-inactive))\n  .slider__thumb--active\n  .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-endpoint-size) / 2 + (var(--ds-slider-end-pct, 0) / 100) *\n      (100% - var(--ds-slider-endpoint-size))\n  );\n}\n\n:host(.slider--vertical.slider--range) .slider__indicator {\n  bottom: calc(\n    var(--ds-slider-endpoint-size) / 2 + (var(--ds-slider-start-pct, 0) / 100) *\n      (100% - var(--ds-slider-endpoint-size))\n  );\n  height: calc(\n    ((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) / 100) *\n      (100% - var(--ds-slider-endpoint-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(\n    (var(--ds-slider-thumb-pct, 0) / 100) * (100% - var(--ds-slider-endpoint-size)) -\n      var(--ds-slider-thumb-overhang)\n  );\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\n@media (forced-colors: active) {\n  .slider__rail {\n    border: var(--ds-slider-track-stroke) solid var(--ds-forced-color-content);\n    box-shadow: none;\n  }\n\n  .slider__indicator {\n    background-color: var(--ds-forced-color-selected);\n  }\n\n  .slider__thumb-visual {\n    border: var(--dimension-stroke-width-012) solid var(--ds-forced-color-control-boundary);\n    background-color: var(--ds-forced-color-surface);\n    -webkit-backdrop-filter: none;\n    backdrop-filter: none;\n    box-shadow: none;\n  }\n\n  .slider__thumb-orb {\n    border: var(--ds-slider-track-stroke) solid var(--ds-forced-color-on-selected);\n    background-color: var(--ds-forced-color-selected);\n    box-shadow: none;\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-color: var(--ds-forced-color-selected);\n  }\n}\n\n.slider__tick {\n  position: absolute;\n  top: calc(\n    50% + var(--ds-slider-track-size) / 2 + var(--dimension-space-050) + var(--dimension-space-012)\n  );\n  left: calc(\n    var(--ds-slider-endpoint-size) / 2 + (var(--ds-slider-tick-pct) / 100) *\n      (100% - var(--ds-slider-endpoint-size))\n  );\n  transform: translateX(-50%);\n  pointer-events: none;\n}\n.slider__tick-mark {\n  display: block;\n  width: var(--dimension-stroke-width-025);\n  height: var(--dimension-stroke-width-025);\n  border-radius: var(--dimension-radius-half);\n  background: var(--color-foreground-tertiary);\n}\n.slider__tick-label {\n  width: max-content;\n  max-width: none;\n  position: absolute;\n  top: calc(100% + var(--dimension-space-050));\n  left: 50%;\n  transform: translateX(-50%);\n  white-space: nowrap;\n}\n:host(:not(.slider--vertical)) .slider__control {\n  container-type: inline-size;\n}\n:host(:not(.slider--vertical)) .slider__tick-label {\n  /* Center on the tick, clamping only when the text reaches the control edges. */\n  --ds-slider-label-anchor: calc(\n    var(--ds-slider-endpoint-size) / 2 + (var(--ds-slider-tick-pct) / 100) *\n      (100cqw - var(--ds-slider-endpoint-size))\n  );\n  transform: translateX(\n    clamp(\n      calc(-1 * var(--ds-slider-label-anchor)),\n      -50%,\n      calc(100cqw - var(--ds-slider-label-anchor) - 100%)\n    )\n  );\n}\n:host(.slider--tick-labels:not(.slider--vertical)) .slider__control {\n  margin-bottom: var(--dimension-space-200);\n}\n:host(.slider--vertical) .slider__tick {\n  top: auto;\n  bottom: calc(\n    var(--ds-slider-endpoint-size) / 2 + (var(--ds-slider-tick-pct) / 100) *\n      (100% - var(--ds-slider-endpoint-size))\n  );\n  left: calc(50% + var(--ds-slider-track-size) / 2 + var(--dimension-space-050));\n  transform: translateY(50%);\n}\n:host(.slider--vertical) .slider__tick-label {\n  top: 50%;\n  left: calc(100% + var(--dimension-space-050));\n  transform: translateY(-50%);\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/Slider/Slider.tsx",
-      "content": "import { numberFormatter } from '../../utils/intl-formatters';\nimport {\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';\nimport {\n  restoreNumberArrayFormState,\n  restoreStringFormState,\n  setFormControlValue,\n  setRepeatedFormControlValue,\n} from '../../utils';\n\nexport interface SliderTick {\n  value: number;\n  label?: string;\n}\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 | 'any' = 1;\n  /** Explicit ticks are the selectable snap points. Empty ticks with step='any' allow smooth adjustment. */\n  @Prop() ticks: SliderTick[] = [];\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 for the visible value. Defaults to English (en-US). */\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('ticks')\n  @Watch('minStepsBetweenValues')\n  @Watch('name')\n  @Watch('disabled')\n  @Watch('isInactive')\n  syncFormValue() {\n    const values = this.resolvedValues;\n    if (this.isRange) {\n      setRepeatedFormControlValue(this.internals, this.name, values, {\n        inactive: this.isDisabled,\n      });\n    } else {\n      const value = String(values[0]);\n      setFormControlValue(this.internals, this.name ? value : null, {\n        inactive: this.isDisabled,\n        state: value,\n      });\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 (this.isRange) {\n      const restored = restoreNumberArrayFormState(state, 2);\n      this.value = restored.length ? restored : this.cloneValue(this.initialValue);\n    } else {\n      const restored = Number(restoreStringFormState(state, 'NaN'));\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    const step = Number(this.step);\n    return Number.isFinite(step) && step > 0 ? step : 1;\n  }\n\n  private get resolvedTicks(): SliderTick[] {\n    const unique = new Map<number, SliderTick>();\n    for (const tick of this.ticks) {\n      if (Number.isFinite(tick.value) && tick.value >= this.safeMin && tick.value <= this.safeMax)\n        unique.set(tick.value, tick);\n    }\n    return [...unique.values()].sort((a, b) => a.value - b.value);\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    const ticks = this.resolvedTicks;\n    const span = ticks.length\n      ? ticks[ticks.length - 1].value - ticks[0].value\n      : this.safeMax - this.safeMin;\n    return Math.min(span, 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      const ticks = this.resolvedTicks;\n      if (ticks.length && upper - lower < gap) {\n        upper =\n          ticks.find(tick => tick.value >= lower + gap)?.value ?? ticks[ticks.length - 1].value;\n        lower =\n          [...ticks].reverse().find(tick => tick.value <= upper - gap)?.value ?? ticks[0].value;\n      }\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, minimum = this.safeMin, maximum = this.safeMax): number {\n    const ticks = this.resolvedTicks.filter(tick => tick.value >= minimum && tick.value <= maximum);\n    if (ticks.length)\n      return ticks.reduce((nearest, tick) =>\n        Math.abs(tick.value - value) < Math.abs(nearest.value - value) ? tick : nearest\n      ).value;\n    if (this.step === 'any')\n      return Math.min(maximum, Math.max(minimum, Number.isFinite(value) ? value : minimum));\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(\n      10,\n      Math.max(\n        this.decimalPlaces(minimum),\n        this.decimalPlaces(maximum),\n        this.decimalPlaces(this.safeStep)\n      )\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(\n      this.allowedMax(index, values),\n      Math.max(\n        this.allowedMin(index, values),\n        this.snap(next, this.allowedMin(index, values), this.allowedMax(index, values))\n      )\n    );\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 =\n      this.valueTexts[index] ??\n      this.valueText ??\n      this.resolvedTicks.find(tick => tick.value === value)?.label;\n    if (authored) return authored;\n    let number: string;\n    try {\n      number = numberFormatter(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 (\n      this.resolvedTicks.some(tick => tick.value === value && tick.label) ||\n      this.valueTexts[index] ||\n      this.valueText ||\n      this.valuePrefix ||\n      this.valueSuffix ||\n      this.formatOptions\n    ) {\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, index: number) => {\n    const keys = [\n      'ArrowLeft',\n      'ArrowRight',\n      'ArrowUp',\n      'ArrowDown',\n      'Home',\n      'End',\n      'PageUp',\n      'PageDown',\n    ];\n    if (!this.readOnly && this.resolvedTicks.length && keys.includes(event.key)) {\n      event.preventDefault();\n      if (this.isDisabled) return;\n      const ticks = this.resolvedTicks.filter(\n        tick => tick.value >= this.allowedMin(index) && tick.value <= this.allowedMax(index)\n      );\n      const current = this.resolvedValues[index];\n      const forward = ['ArrowRight', 'ArrowUp', 'PageUp'].includes(event.key);\n      const next =\n        event.key === 'Home'\n          ? ticks[0]\n          : event.key === 'End'\n            ? ticks[ticks.length - 1]\n            : forward\n              ? ticks.find(tick => tick.value > current)\n              : [...ticks].reverse().find(tick => tick.value < current);\n      if (next && this.setValueAt(index, next.value)) this.commitIfChanged();\n      return;\n    }\n    if (!this.readOnly) return;\n    if (\n      [\n        'ArrowLeft',\n        'ArrowRight',\n        'ArrowUp',\n        'ArrowDown',\n        'Home',\n        'End',\n        'PageUp',\n        'PageDown',\n      ].includes(event.key)\n    ) {\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'\n        ? thumb.offsetWidth\n        : 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 =\n      target instanceof HTMLElement ? target.closest<HTMLElement>('.slider__thumb') : 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(() => {\n      const input = this.el.querySelectorAll<HTMLInputElement>('.slider__input')[index];\n      input?.focus({ preventScroll: true });\n    });\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))\n      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))\n      this.commitIfChanged();\n  }\n\n  private renderThumb(value: number, index: number) {\n    const inputId =\n      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.resolvedTicks.length || this.step === 'any' ? 'any' : 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={event => this.handleKeyDown(event, index)}\n          onFocus={() => this.handleFocus(index)}\n          onBlur={this.handleBlur}\n        />\n        <span class=\"slider__thumb-visual\" aria-hidden=\"true\">\n          <span class=\"slider__thumb-wash\" />\n        </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\n      .map((value, index) => this.formattedValue(value, index))\n      .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--ticks': this.resolvedTicks.length > 0,\n          'slider--tick-labels': this.resolvedTicks.some(tick => Boolean(tick.label)),\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 => {\n            this.controlEl = element ?? null;\n          }}\n          style={\n            {\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          }\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\">\n            <div class=\"slider__indicator\" />\n          </div>\n          {this.resolvedTicks.map(tick => (\n            <span\n              class=\"slider__tick\"\n              data-edge={\n                tick.value === this.safeMin\n                  ? 'start'\n                  : tick.value === this.safeMax\n                    ? 'end'\n                    : undefined\n              }\n              aria-hidden=\"true\"\n              style={{ '--ds-slider-tick-pct': String(this.percent(tick.value)) }}\n            >\n              <span class=\"slider__tick-mark\" />\n              {tick.label && (\n                <ds-text\n                  class=\"slider__tick-label\"\n                  as=\"span\"\n                  variant=\"text-caption\"\n                  color=\"secondary\"\n                >\n                  {tick.label}\n                </ds-text>\n              )}\n            </span>\n          ))}\n          {values.map((value, index) => this.renderThumb(value, index))}\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { numberFormatter } from '../../utils/intl-formatters';\nimport {\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';\nimport {\n  restoreNumberArrayFormState,\n  restoreStringFormState,\n  setFormControlValue,\n  setRepeatedFormControlValue,\n} from '../../utils';\n\nexport interface SliderTick {\n  value: number;\n  label?: string;\n}\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 | 'any' = 1;\n  /** Explicit ticks are the selectable snap points. Empty ticks with step='any' allow smooth adjustment. */\n  @Prop() ticks: SliderTick[] = [];\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 inner orb 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 for the visible value. Defaults to English (en-US). */\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('ticks')\n  @Watch('minStepsBetweenValues')\n  @Watch('name')\n  @Watch('disabled')\n  @Watch('isInactive')\n  syncFormValue() {\n    const values = this.resolvedValues;\n    if (this.isRange) {\n      setRepeatedFormControlValue(this.internals, this.name, values, {\n        inactive: this.isDisabled,\n      });\n    } else {\n      const value = String(values[0]);\n      setFormControlValue(this.internals, this.name ? value : null, {\n        inactive: this.isDisabled,\n        state: value,\n      });\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 (this.isRange) {\n      const restored = restoreNumberArrayFormState(state, 2);\n      this.value = restored.length ? restored : this.cloneValue(this.initialValue);\n    } else {\n      const restored = Number(restoreStringFormState(state, 'NaN'));\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    const step = Number(this.step);\n    return Number.isFinite(step) && step > 0 ? step : 1;\n  }\n\n  private get resolvedTicks(): SliderTick[] {\n    const unique = new Map<number, SliderTick>();\n    for (const tick of this.ticks) {\n      if (Number.isFinite(tick.value) && tick.value >= this.safeMin && tick.value <= this.safeMax)\n        unique.set(tick.value, tick);\n    }\n    return [...unique.values()].sort((a, b) => a.value - b.value);\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    const ticks = this.resolvedTicks;\n    const span = ticks.length\n      ? ticks[ticks.length - 1].value - ticks[0].value\n      : this.safeMax - this.safeMin;\n    return Math.min(span, 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      const ticks = this.resolvedTicks;\n      if (ticks.length && upper - lower < gap) {\n        upper =\n          ticks.find(tick => tick.value >= lower + gap)?.value ?? ticks[ticks.length - 1].value;\n        lower =\n          [...ticks].reverse().find(tick => tick.value <= upper - gap)?.value ?? ticks[0].value;\n      }\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, minimum = this.safeMin, maximum = this.safeMax): number {\n    const ticks = this.resolvedTicks.filter(tick => tick.value >= minimum && tick.value <= maximum);\n    if (ticks.length)\n      return ticks.reduce((nearest, tick) =>\n        Math.abs(tick.value - value) < Math.abs(nearest.value - value) ? tick : nearest\n      ).value;\n    if (this.step === 'any')\n      return Math.min(maximum, Math.max(minimum, Number.isFinite(value) ? value : minimum));\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(\n      10,\n      Math.max(\n        this.decimalPlaces(minimum),\n        this.decimalPlaces(maximum),\n        this.decimalPlaces(this.safeStep)\n      )\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(\n      this.allowedMax(index, values),\n      Math.max(\n        this.allowedMin(index, values),\n        this.snap(next, this.allowedMin(index, values), this.allowedMax(index, values))\n      )\n    );\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 =\n      this.valueTexts[index] ??\n      this.valueText ??\n      this.resolvedTicks.find(tick => tick.value === value)?.label;\n    if (authored) return authored;\n    let number: string;\n    try {\n      number = numberFormatter(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 (\n      this.resolvedTicks.some(tick => tick.value === value && tick.label) ||\n      this.valueTexts[index] ||\n      this.valueText ||\n      this.valuePrefix ||\n      this.valueSuffix ||\n      this.formatOptions\n    ) {\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, index: number) => {\n    const keys = [\n      'ArrowLeft',\n      'ArrowRight',\n      'ArrowUp',\n      'ArrowDown',\n      'Home',\n      'End',\n      'PageUp',\n      'PageDown',\n    ];\n    if (!this.readOnly && this.resolvedTicks.length && keys.includes(event.key)) {\n      event.preventDefault();\n      if (this.isDisabled) return;\n      const ticks = this.resolvedTicks.filter(\n        tick => tick.value >= this.allowedMin(index) && tick.value <= this.allowedMax(index)\n      );\n      const current = this.resolvedValues[index];\n      const forward = ['ArrowRight', 'ArrowUp', 'PageUp'].includes(event.key);\n      const next =\n        event.key === 'Home'\n          ? ticks[0]\n          : event.key === 'End'\n            ? ticks[ticks.length - 1]\n            : forward\n              ? ticks.find(tick => tick.value > current)\n              : [...ticks].reverse().find(tick => tick.value < current);\n      if (next && this.setValueAt(index, next.value)) this.commitIfChanged();\n      return;\n    }\n    if (!this.readOnly) return;\n    if (\n      [\n        'ArrowLeft',\n        'ArrowRight',\n        'ArrowUp',\n        'ArrowDown',\n        'Home',\n        'End',\n        'PageUp',\n        'PageDown',\n      ].includes(event.key)\n    ) {\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 endpoint = this.el.querySelector<HTMLElement>(\n      this.thumbAlignment === 'edge' ? '.slider__thumb-orb' : '.slider__thumb'\n    );\n    const endpointSize = endpoint\n      ? this.orientation === 'horizontal'\n        ? endpoint.offsetWidth\n        : endpoint.offsetHeight\n      : 0;\n    // Edge alignment positions the inner orb at the rail ends; the outer halo\n    // may overhang. Center alignment uses the complete thumb at inset rail ends.\n    const inset = endpointSize / 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 =\n      target instanceof HTMLElement ? target.closest<HTMLElement>('.slider__thumb') : 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(() => {\n      const input = this.el.querySelectorAll<HTMLInputElement>('.slider__input')[index];\n      input?.focus({ preventScroll: true });\n    });\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))\n      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))\n      this.commitIfChanged();\n  }\n\n  private renderThumb(value: number, index: number) {\n    const inputId =\n      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.resolvedTicks.length || this.step === 'any' ? 'any' : 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={event => this.handleKeyDown(event, index)}\n          onFocus={() => this.handleFocus(index)}\n          onBlur={this.handleBlur}\n        />\n        <span class=\"slider__thumb-visual\" aria-hidden=\"true\">\n          <span class=\"slider__thumb-wash\" />\n          <span class=\"slider__thumb-orb\" />\n        </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\n      .map((value, index) => this.formattedValue(value, index))\n      .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--ticks': this.resolvedTicks.length > 0,\n          'slider--tick-labels': this.resolvedTicks.some(tick => Boolean(tick.label)),\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 => {\n            this.controlEl = element ?? null;\n          }}\n          style={\n            {\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          }\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\">\n            <div class=\"slider__indicator\" />\n          </div>\n          {this.resolvedTicks.map(tick => (\n            <span\n              class=\"slider__tick\"\n              data-edge={\n                tick.value === this.safeMin\n                  ? 'start'\n                  : tick.value === this.safeMax\n                    ? 'end'\n                    : undefined\n              }\n              aria-hidden=\"true\"\n              style={{ '--ds-slider-tick-pct': String(this.percent(tick.value)) }}\n            >\n              <span class=\"slider__tick-mark\" />\n              {tick.label && (\n                <ds-text\n                  class=\"slider__tick-label\"\n                  as=\"span\"\n                  variant=\"text-caption\"\n                  color=\"secondary\"\n                >\n                  {tick.label}\n                </ds-text>\n              )}\n            </span>\n          ))}\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

@@ -57,7 +57,7 @@
         "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 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.",
+        "Unchecked uses a faint-neutral track with a density-specific tertiary-border inset stroke and a primary-background thumb with medium elevation. Checked uses a brand track with the same default tertiary-border inset stroke and elevated primary-background thumb.",
         "Presentation mode removes switch semantics, focus, interaction, and form submission while retaining the checked visual."
       ],
       "responsiveBehavior": [
@@ -393,7 +393,7 @@
   "files": [
     {
       "path": "src/wc/components/Switch/Switch.css",
-      "content": "@import '../../utils/focus-ring.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/forced-colors.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: none;\n}\n\n:host(.switch--transitions-enabled) {\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: none;\n  pointer-events: none;\n}\n\n:host(.switch--transitions-enabled) .thumb {\n  transition:\n    background-color var(--effect-motion-short-3),\n    transform var(--effect-motion-short-3);\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@media (hover: hover) and (pointer: fine) {\n  :host(\n      :hover:not(:disabled):not(.ds-control-inactive):not(.switch--readonly):not(\n          .switch--presentation\n        )\n    )\n    .thumb::after {\n    background: var(--ds-switch-thumb-hover);\n  }\n}\n\n:host(\n    :active:not(:disabled):not(.ds-control-inactive):not(.switch--readonly):not(\n        .switch--presentation\n      )\n  )\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  :host(.switch--transitions-enabled) {\n    transition: none;\n  }\n\n  .thumb,\n  :host(.switch--transitions-enabled) .thumb {\n    transition: none;\n  }\n}\n\n@media (forced-colors: active) {\n  :host {\n    border: var(--ds-switch-stroke) solid var(--ds-forced-color-content);\n    box-shadow: none;\n  }\n\n  :host(.checked) {\n    background-color: var(--ds-forced-color-selected);\n    border-color: var(--ds-forced-color-selected);\n  }\n\n  .thumb {\n    background-color: var(--ds-forced-color-content);\n  }\n\n  :host(.checked) .thumb {\n    background-color: var(--ds-forced-color-on-selected);\n  }\n}\n",
+      "content": "@import '../../utils/focus-ring.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/forced-colors.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: var(--color-background-faint-neutral);\n  box-shadow: inset 0 0 0 var(--ds-switch-stroke) var(--color-border-tertiary);\n  transition: none;\n}\n\n:host(.switch--transitions-enabled) {\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: inset 0 0 0 var(--ds-switch-stroke) var(--color-border-tertiary);\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-background-primary);\n  box-shadow: var(--effect-elevation-elevated-md);\n  transform: translateY(-50%);\n  transition: none;\n  pointer-events: none;\n}\n\n:host(.switch--transitions-enabled) .thumb {\n  transition:\n    background-color var(--effect-motion-short-3),\n    transform var(--effect-motion-short-3);\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@media (hover: hover) and (pointer: fine) {\n  :host(\n      :hover:not(:disabled):not(.ds-control-inactive):not(.switch--readonly):not(\n          .switch--presentation\n        )\n    )\n    .thumb::after {\n    background: var(--ds-switch-thumb-hover);\n  }\n}\n\n:host(\n    :active:not(:disabled):not(.ds-control-inactive):not(.switch--readonly):not(\n        .switch--presentation\n      )\n  )\n  .thumb::after {\n  background: var(--ds-switch-thumb-pressed);\n}\n\n:host(.checked) .thumb {\n  background-color: var(--color-background-primary);\n  transform: translate3d(var(--ds-switch-travel), -50%, 0);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host,\n  :host(.switch--transitions-enabled) {\n    transition: none;\n  }\n\n  .thumb,\n  :host(.switch--transitions-enabled) .thumb {\n    transition: none;\n  }\n}\n\n@media (forced-colors: active) {\n  :host {\n    border: var(--ds-switch-stroke) solid var(--ds-forced-color-content);\n    box-shadow: none;\n  }\n\n  :host(.checked) {\n    background-color: var(--ds-forced-color-selected);\n    border-color: var(--ds-forced-color-selected);\n    box-shadow: none;\n  }\n\n  .thumb {\n    background-color: var(--ds-forced-color-content);\n    box-shadow: none;\n  }\n\n  :host(.checked) .thumb {\n    background-color: var(--ds-forced-color-on-selected);\n  }\n}\n",
       "type": "registry:ui"
     },
     {