@ds-mo/ui 8.3.1 → 9.1.0

package/dist/mcp-data/registry/swatch-picker.json

@@ -0,0 +1,231 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "swatch-picker",
+  "title": "SwatchPicker",
+  "description": "Compact one-of-many picker for curated flat-color, gradient, or visually absent presets with optional section separators and roving radio-group interaction.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/swatch-picker",
+    "source": "src/wc/components/SwatchPicker/SwatchPicker.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "stable",
+      "summary": "Compact one-of-many picker for curated flat-color, gradient, or visually absent presets with optional section separators and roving radio-group interaction.",
+      "useWhen": [
+        "Users choose exactly one visual preset from a small curated set.",
+        "Options are best compared through compact flat-color or gradient previews.",
+        "A settings surface or richer menu needs an immediately applied visual preference."
+      ],
+      "avoidWhen": [
+        "Users need an unrestricted spectrum, numeric channels, opacity editing, or custom CSS gradient construction.",
+        "Text labels are the primary distinction between choices; use Radio instead.",
+        "The choice is a submitted form value with validation or a long compact list; use Radio or Select.",
+        "Color or gradient is the only indication of status, meaning, or required action."
+      ],
+      "alternatives": [
+        {
+          "when": "The user needs an arbitrary color rather than a curated preset.",
+          "component": "component:ds-input",
+          "reason": "SwatchPicker intentionally does not provide spectrum, channel, or free-form value editing."
+        },
+        {
+          "when": "Visible text labels are more important than visual previews.",
+          "component": "component:ds-radio",
+          "reason": "Radio presents explicit one-of-many option labels and native form behavior."
+        },
+        {
+          "when": "The option set is long or must remain compact.",
+          "component": "component:ds-select",
+          "reason": "Select scales a larger named choice set into an anchored listbox."
+        }
+      ],
+      "commonlyComposedWith": [
+        "component:ds-menu",
+        "component:ds-app-shell"
+      ],
+      "accessibility": [
+        "Provide a localized groupLabel describing the complete choice.",
+        "Give every option a meaningful label because its visual preview is never its accessible name.",
+        "The options form one radio group with one Tab stop; Arrow keys wrap across active options while Home and End select the boundaries.",
+        "Inactive options remain named and disabled, and keyboard movement skips them."
+      ],
+      "states": [
+        "value is the selected option value and updates when the user chooses an active option.",
+        "options provides one flat list; sections takes precedence and adds visual separators while preserving one radio group.",
+        "A preview may use a token-based backgroundColor, a CSS gradient backgroundImage, and an optional opacity from zero through one.",
+        "The parent owns persistence and application of the selected value; SwatchPicker owns only choice interaction and dsChange."
+      ],
+      "responsiveBehavior": [
+        "Options wrap within the width supplied by the parent while retaining compact fixed swatch geometry.",
+        "Keep the set small enough for direct visual comparison; switch to a named list when wrapping harms comprehension."
+      ],
+      "frameworkCaveats": {
+        "customElements": [
+          "Assign options or sections as JavaScript properties, bind value, and listen for dsChange."
+        ],
+        "react": [
+          "Use DsSwatchPicker, pass option arrays as props, and handle onDsChange."
+        ],
+        "angular": [
+          "Use property bindings for options or sections and handle dsChange to update application state."
+        ]
+      },
+      "references": [
+        {
+          "label": "Executable stories",
+          "path": "src/wc/components/SwatchPicker/SwatchPicker.stories.ts"
+        }
+      ]
+    },
+    "api": {
+      "props": {
+        "groupLabel": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "group-label",
+          "default": "'Swatch options'",
+          "required": false,
+          "mutable": false,
+          "description": "Accessible name for the complete one-of-many choice."
+        },
+        "options": {
+          "type": "SwatchPickerOption[]",
+          "resolvedType": "SwatchPickerOption[]",
+          "default": "[]",
+          "required": false,
+          "mutable": false,
+          "description": "Flat option list. Sections take precedence when supplied. Assign as a JavaScript property."
+        },
+        "sections": {
+          "type": "SwatchPickerSection[]",
+          "resolvedType": "SwatchPickerSection[]",
+          "default": "[]",
+          "required": false,
+          "mutable": false,
+          "description": "Visually separated option groups that remain one radio group. Assign as a JavaScript property."
+        },
+        "value": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "value",
+          "default": "''",
+          "required": false,
+          "mutable": true,
+          "description": "Selected option value."
+        }
+      },
+      "events": [
+        {
+          "name": "dsChange",
+          "detail": "string",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true
+        }
+      ],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "groupLabel": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "group-label",
+        "default": "'Swatch options'",
+        "required": false,
+        "mutable": false,
+        "description": "Accessible name for the complete one-of-many choice."
+      },
+      "options": {
+        "type": "SwatchPickerOption[]",
+        "resolvedType": "SwatchPickerOption[]",
+        "default": "[]",
+        "required": false,
+        "mutable": false,
+        "description": "Flat option list. Sections take precedence when supplied. Assign as a JavaScript property."
+      },
+      "sections": {
+        "type": "SwatchPickerSection[]",
+        "resolvedType": "SwatchPickerSection[]",
+        "default": "[]",
+        "required": false,
+        "mutable": false,
+        "description": "Visually separated option groups that remain one radio group. Assign as a JavaScript property."
+      },
+      "value": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "value",
+        "default": "''",
+        "required": false,
+        "mutable": true,
+        "description": "Selected option value."
+      }
+    },
+    "events": [
+      {
+        "name": "dsChange",
+        "detail": "string",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true
+      }
+    ],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-swatch-picker",
+      "react": "DsSwatchPicker",
+      "angular": "DsSwatchPicker"
+    },
+    "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-swatch-picker.js';",
+        "example": "<ds-swatch-picker></ds-swatch-picker>"
+      },
+      "react": {
+        "import": "import { DsSwatchPicker } from '@ds-mo/ui/react';",
+        "example": "<DsSwatchPicker />"
+      },
+      "angular": {
+        "import": "import { DsSwatchPicker } from '@ds-mo/ui/angular/ds-swatch-picker';",
+        "example": "<ds-swatch-picker></ds-swatch-picker>"
+      },
+      "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: options, sections.",
+      "peerDependencies": {
+        "required": [
+          "@ds-mo/tokens ^3.1.1",
+          "@ds-mo/icons ^6.2.0"
+        ],
+        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
+      }
+    }
+  },
+  "dependencies": [
+    "@ds-mo/ui",
+    "@ds-mo/tokens"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "src/wc/components/SwatchPicker/SwatchPicker.css",
+      "content": "@import '../../utils/focus-ring.css';\n@import '../../utils/control-inactive.css';\n\n:host {\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  --_swatch-inner-inset: calc(\n    var(--dimension-stroke-width-025) + var(--dimension-space-025)\n  );\n  --_swatch-ring-bg: var(--color-background-primary);\n  --_swatch-select-motion: var(--effect-motion-short-3);\n}\n\n.swatch-picker {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  width: 100%;\n  min-height: var(--dimension-size-400);\n  gap: var(--dimension-space-100);\n  padding: var(--dimension-space-100);\n}\n\n.swatch-picker__option {\n  position: relative;\n  box-sizing: border-box;\n  flex: 0 0 auto;\n  width: var(--dimension-size-300);\n  height: var(--dimension-size-300);\n  padding: 0;\n  border: none;\n  border-radius: var(--dimension-radius-half);\n  background: transparent;\n  cursor: pointer;\n  isolation: isolate;\n}\n\n.swatch-picker__fill,\n.swatch-picker__border,\n.swatch-picker__interaction,\n.swatch-picker__halo,\n.swatch-picker__stroke {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n}\n\n.swatch-picker__fill {\n  z-index: 1;\n  background-color: var(--_swatch-preview-color);\n  background-image: var(--_swatch-preview-image);\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: cover;\n  opacity: var(--_swatch-preview-opacity);\n  transition:\n    inset var(--_swatch-select-motion);\n}\n\n.swatch-picker__border {\n  z-index: 2;\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-secondary);\n  transition:\n    inset var(--_swatch-select-motion);\n}\n\n.swatch-picker__interaction {\n  z-index: 3;\n  background-color: transparent;\n  transition:\n    inset var(--_swatch-select-motion),\n    background-color 0s;\n}\n\n.swatch-picker__option:hover:not(:disabled) .swatch-picker__interaction {\n  background-color: var(--color-interaction-hover);\n}\n\n.swatch-picker__option:active:not(:disabled) .swatch-picker__interaction {\n  background-color: var(--color-interaction-pressed);\n}\n\n.swatch-picker__halo,\n.swatch-picker__stroke {\n  opacity: 0;\n  transform: scale(1.2);\n  transform-origin: center;\n  transition:\n    opacity var(--_swatch-select-motion),\n    transform var(--_swatch-select-motion);\n}\n\n.swatch-picker__halo {\n  z-index: 4;\n  box-shadow: inset 0 0 0 var(--_swatch-inner-inset) var(--_swatch-ring-bg);\n}\n\n.swatch-picker__stroke {\n  z-index: 5;\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);\n}\n\n.swatch-picker__option--selected .swatch-picker__fill,\n.swatch-picker__option--selected .swatch-picker__border,\n.swatch-picker__option--selected .swatch-picker__interaction {\n  inset: var(--_swatch-inner-inset);\n}\n\n.swatch-picker__option--selected .swatch-picker__halo,\n.swatch-picker__option--selected .swatch-picker__stroke {\n  opacity: 1;\n  transform: scale(1);\n}\n\n.swatch-picker__divider {\n  flex: 0 0 auto;\n  align-self: center;\n  width: var(--dimension-stroke-width-012);\n  height: var(--dimension-size-300);\n  background-color: var(--color-border-tertiary);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .swatch-picker__fill,\n  .swatch-picker__border,\n  .swatch-picker__interaction,\n  .swatch-picker__halo,\n  .swatch-picker__stroke {\n    transition: none;\n  }\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/SwatchPicker/SwatchPicker.tsx",
+      "content": "import { Component, Element, Event, EventEmitter, Prop, h, Host } from '@stencil/core';\nimport {\n  flattenSwatchPickerOptions,\n  normalizeSwatchPickerOpacity,\n  resolveSwatchPickerNavigationIndex,\n  resolveSwatchPickerTabIndex,\n  type SwatchPickerNavigationKey,\n  type SwatchPickerOption,\n  type SwatchPickerSection,\n} from './swatch-picker-types';\n\n@Component({\n  tag: 'ds-swatch-picker',\n  styleUrl: 'SwatchPicker.css',\n  scoped: true,\n})\nexport class SwatchPicker {\n  @Element() el!: HTMLElement;\n\n  /** Selected option value. */\n  @Prop({ mutable: true, reflect: true }) value: string = '';\n\n  /** Flat option list. Sections take precedence when supplied. Assign as a JavaScript property. */\n  @Prop() options: SwatchPickerOption[] = [];\n\n  /** Visually separated option groups that remain one radio group. Assign as a JavaScript property. */\n  @Prop() sections: SwatchPickerSection[] = [];\n\n  /** Accessible name for the complete one-of-many choice. */\n  @Prop() groupLabel: string = 'Swatch options';\n\n  @Event() dsChange!: EventEmitter<string>;\n\n  private get activeOptions(): SwatchPickerOption[] {\n    return flattenSwatchPickerOptions(this.options, this.sections);\n  }\n\n  private selectOption(option: SwatchPickerOption) {\n    if (option.isInactive || option.value === this.value) return;\n    this.value = option.value;\n    this.dsChange.emit(option.value);\n  }\n\n  private focusOption(index: number) {\n    requestAnimationFrame(() => {\n      const optionButtons = this.el\n        .querySelectorAll<HTMLButtonElement>('.swatch-picker__option');\n      optionButtons[index]?.focus();\n    });\n  }\n\n  private handleOptionKeyDown(\n    event: KeyboardEvent,\n    currentIndex: number,\n  ) {\n    const key = event.key as SwatchPickerNavigationKey;\n    if (!['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'Home', 'End'].includes(key)) {\n      return;\n    }\n\n    const nextIndex = resolveSwatchPickerNavigationIndex(\n      this.activeOptions,\n      currentIndex,\n      key,\n    );\n    if (nextIndex === null) return;\n\n    event.preventDefault();\n    const nextOption = this.activeOptions[nextIndex];\n    this.selectOption(nextOption);\n    this.focusOption(nextIndex);\n  }\n\n  private renderOption(\n    option: SwatchPickerOption,\n    index: number,\n    tabIndex: number,\n  ) {\n    const selected = option.value === this.value;\n    const opacity = normalizeSwatchPickerOpacity(option.preview.opacity);\n\n    return (\n      <button\n        key={option.value}\n        type=\"button\"\n        class={{\n          'swatch-picker__option': true,\n          'swatch-picker__option--selected': selected,\n          'ds-focus-ring-inset': true,\n          'ds-control-inactive': !!option.isInactive,\n        }}\n        style={{\n          '--_swatch-preview-color': option.preview.backgroundColor ?? 'var(--color-background-secondary)',\n          '--_swatch-preview-image': option.preview.backgroundImage ?? 'none',\n          '--_swatch-preview-opacity': String(opacity),\n        }}\n        role=\"radio\"\n        aria-label={option.label}\n        aria-checked={selected ? 'true' : 'false'}\n        tabIndex={index === tabIndex ? 0 : -1}\n        disabled={option.isInactive}\n        onClick={() => this.selectOption(option)}\n        onKeyDown={(event: KeyboardEvent) => this.handleOptionKeyDown(event, index)}\n      >\n        <span class=\"swatch-picker__fill\" aria-hidden=\"true\" />\n        <span class=\"swatch-picker__border\" aria-hidden=\"true\" />\n        <span class=\"swatch-picker__interaction\" aria-hidden=\"true\" />\n        <span class=\"swatch-picker__halo\" aria-hidden=\"true\" />\n        <span class=\"swatch-picker__stroke\" aria-hidden=\"true\" />\n      </button>\n    );\n  }\n\n  render() {\n    const activeOptions = this.activeOptions;\n    const tabIndex = resolveSwatchPickerTabIndex(activeOptions, this.value);\n    let optionIndex = 0;\n\n    return (\n      <Host>\n        <div\n          class=\"swatch-picker\"\n          role=\"radiogroup\"\n          aria-label={this.groupLabel}\n        >\n          {(this.sections.length > 0 ? this.sections : [{ options: this.options }]).map((section, sectionIndex) => [\n            section.options.map(option => {\n              const currentIndex = optionIndex++;\n              return this.renderOption(option, currentIndex, tabIndex);\n            }),\n            sectionIndex < (this.sections.length > 0 ? this.sections.length : 1) - 1 && (\n              <span class=\"swatch-picker__divider\" aria-hidden=\"true\" />\n            ),\n          ])}\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/SwatchPicker/swatch-picker-types.ts",
+      "content": "export interface SwatchPickerPreview {\n  /** CSS color used as the swatch base or as a complete flat-color preview. */\n  backgroundColor?: string;\n  /** CSS gradient used as the swatch image. */\n  backgroundImage?: string;\n  /** Optional preview-layer opacity, clamped to the inclusive 0–1 range. */\n  opacity?: number;\n}\n\nexport interface SwatchPickerOption {\n  /** Stable value emitted when this option is selected. */\n  value: string;\n  /** Accessible option name; the visual preview never replaces this label. */\n  label: string;\n  preview: SwatchPickerPreview;\n  isInactive?: boolean;\n}\n\nexport interface SwatchPickerSection {\n  /** Sections remain one radio group and are separated visually. */\n  options: SwatchPickerOption[];\n}\n\nexport type SwatchPickerNavigationKey =\n  | 'ArrowDown'\n  | 'ArrowLeft'\n  | 'ArrowRight'\n  | 'ArrowUp'\n  | 'Home'\n  | 'End';\n\nexport function flattenSwatchPickerOptions(\n  options: readonly SwatchPickerOption[],\n  sections: readonly SwatchPickerSection[],\n): SwatchPickerOption[] {\n  return sections.length > 0\n    ? sections.flatMap(section => section.options)\n    : [...options];\n}\n\nexport function resolveSwatchPickerTabIndex(\n  options: readonly SwatchPickerOption[],\n  value: string,\n): number {\n  const selectedIndex = options.findIndex(option => (\n    option.value === value && !option.isInactive\n  ));\n  if (selectedIndex >= 0) return selectedIndex;\n  return options.findIndex(option => !option.isInactive);\n}\n\nexport function resolveSwatchPickerNavigationIndex(\n  options: readonly SwatchPickerOption[],\n  currentIndex: number,\n  key: SwatchPickerNavigationKey,\n): number | null {\n  const enabledIndexes = options\n    .map((option, index) => ({ option, index }))\n    .filter(({ option }) => !option.isInactive)\n    .map(({ index }) => index);\n\n  if (enabledIndexes.length === 0) return null;\n  if (key === 'Home') return enabledIndexes[0];\n  if (key === 'End') return enabledIndexes[enabledIndexes.length - 1];\n\n  const direction = key === 'ArrowRight' || key === 'ArrowDown' ? 1 : -1;\n  const currentEnabledIndex = enabledIndexes.indexOf(currentIndex);\n  if (currentEnabledIndex < 0) {\n    return direction > 0\n      ? enabledIndexes[0]\n      : enabledIndexes[enabledIndexes.length - 1];\n  }\n\n  return enabledIndexes[\n    (currentEnabledIndex + direction + enabledIndexes.length) % enabledIndexes.length\n  ];\n}\n\nexport function normalizeSwatchPickerOpacity(opacity: number | undefined): number {\n  if (opacity === undefined || !Number.isFinite(opacity)) return 1;\n  return Math.min(1, Math.max(0, opacity));\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

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

@@ -0,0 +1,361 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "switch",
+  "title": "Switch",
+  "description": "Compact on/off setting control for changes that take effect immediately, with three sizes and form-associated behavior.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/switch",
+    "source": "src/wc/components/Switch/Switch.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "stable",
+      "summary": "Compact on/off setting control for changes that take effect immediately, with three sizes and form-associated behavior.",
+      "useWhen": [
+        "A binary setting takes effect immediately when the user turns it on or off.",
+        "A settings, form, or menu row needs a compact on/off control.",
+        "The checked value needs native form submission, required validation, reset, or external form association."
+      ],
+      "avoidWhen": [
+        "The user is providing consent, acknowledging a statement, or selecting multiple independent choices.",
+        "The user must choose one option from a mutually exclusive set.",
+        "The interaction triggers a one-time action instead of maintaining an on/off state."
+      ],
+      "alternatives": [
+        {
+          "when": "The interaction represents consent, acknowledgment, or multi-select choices.",
+          "component": "component:ds-checkbox",
+          "reason": "Checkbox semantics communicate selection or agreement rather than an immediately applied setting."
+        },
+        {
+          "when": "The user must choose one option from a mutually exclusive group.",
+          "component": "component:ds-radio",
+          "reason": "Radio communicates one-of-many selection."
+        },
+        {
+          "when": "The control triggers a one-time command or submission.",
+          "component": "component:ds-button-filled",
+          "reason": "Button semantics communicate an action rather than persistent state."
+        }
+      ],
+      "commonlyComposedWith": [
+        "component:ds-field",
+        "component:ds-menu",
+        "component:ds-text"
+      ],
+      "accessibility": [
+        "Every standalone switch requires an accessible name from a native label, aria-label, or aria-labelledby.",
+        "Checked state is exposed through switch semantics and thumb position, so state does not rely on color alone.",
+        "Read-only switches remain focusable and submitted but cannot change; inactive or disabled switches leave the tab order and are omitted from form submission.",
+        "Required and invalid state are exposed explicitly on the switch role; focused, filled, dirty, touched, valid, and invalid data hooks support form diagnostics without imposing visual validation timing.",
+        "Use presentation mode only when a composite owner such as a menuitemcheckbox provides the interaction and accessible state."
+      ],
+      "states": [
+        "Activation updates checked immediately and emits dsChange with the new boolean value.",
+        "The initial checked value is the form-reset baseline; unchecked switches submit nothing unless uncheckedValue is provided.",
+        "Sizes are md 32×20 with a 12px thumb and 4px body inset, sm 24×16 with a 10px thumb and 3px inset, and xs 20×12 with an 8px thumb and 2px inset.",
+        "Unchecked uses a transparent track with a density-specific tertiary-foreground inset stroke and a solid tertiary-foreground thumb without a border. Checked uses a brand track and primary-background thumb with no strokes.",
+        "Presentation mode removes switch semantics, focus, interaction, and form submission while retaining the checked visual."
+      ],
+      "responsiveBehavior": [
+        "Choose size from the density of the containing row; do not enlarge the switch to the full control height.",
+        "Keep the switch from shrinking when adjacent labels wrap.",
+        "Thumb movement is left-to-right; the design system does not author RTL-specific component behavior."
+      ],
+      "frameworkCaveats": {
+        "customElements": [
+          "Set checked as a property for application state updates and listen for dsChange.",
+          "Use the form attribute to associate a switch rendered outside its owning form."
+        ],
+        "react": [
+          "Use DsSwitch and handle onDsChange; checked is mutable and updates immediately when the component is activated."
+        ],
+        "angular": [
+          "Use DsSwitch with checked binding and dsChange, or the generated boolean value accessor in Angular forms."
+        ]
+      },
+      "references": [
+        {
+          "label": "Storybook examples",
+          "path": "src/wc/components/Switch/Switch.stories.ts"
+        },
+        {
+          "label": "Cross-browser form and accessibility coverage",
+          "path": "tests/e2e/forms.spec.ts"
+        }
+      ]
+    },
+    "api": {
+      "props": {
+        "checked": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "checked",
+          "default": "false",
+          "required": false,
+          "mutable": true,
+          "description": "Current on/off state. The initial value is restored when the owning form resets."
+        },
+        "disabled": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "disabled",
+          "default": "false",
+          "required": false,
+          "mutable": false
+        },
+        "form": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "form",
+          "required": false,
+          "mutable": false,
+          "description": "Associates the switch with a form by id when it is rendered outside that form."
+        },
+        "isInactive": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "is-inactive",
+          "default": "false",
+          "required": false,
+          "mutable": false
+        },
+        "name": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "name",
+          "required": false,
+          "mutable": false
+        },
+        "presentation": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "presentation",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Removes standalone control semantics so a composite owner such as a\n`menuitemcheckbox` can use the switch as an aria-hidden visual indicator."
+        },
+        "readOnly": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "read-only",
+          "default": "false",
+          "required": false,
+          "mutable": false
+        },
+        "required": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "required",
+          "default": "false",
+          "required": false,
+          "mutable": false
+        },
+        "requiredMessage": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "required-message",
+          "default": "'This field is required.'",
+          "required": false,
+          "mutable": false
+        },
+        "size": {
+          "type": "SwitchSize",
+          "resolvedType": "\"md\" | \"sm\" | \"xs\"",
+          "attribute": "size",
+          "default": "'md'",
+          "required": false,
+          "mutable": false,
+          "description": "Compact track size for placement inside controls, menus, and form rows."
+        },
+        "uncheckedValue": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "unchecked-value",
+          "required": false,
+          "mutable": false,
+          "description": "Optional value submitted when unchecked; omitted by default like a native checkbox."
+        },
+        "value": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "value",
+          "default": "'on'",
+          "required": false,
+          "mutable": false
+        }
+      },
+      "events": [
+        {
+          "name": "dsChange",
+          "detail": "boolean",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true
+        }
+      ],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "checked": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "checked",
+        "default": "false",
+        "required": false,
+        "mutable": true,
+        "description": "Current on/off state. The initial value is restored when the owning form resets."
+      },
+      "disabled": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "disabled",
+        "default": "false",
+        "required": false,
+        "mutable": false
+      },
+      "form": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "form",
+        "required": false,
+        "mutable": false,
+        "description": "Associates the switch with a form by id when it is rendered outside that form."
+      },
+      "isInactive": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "is-inactive",
+        "default": "false",
+        "required": false,
+        "mutable": false
+      },
+      "name": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "name",
+        "required": false,
+        "mutable": false
+      },
+      "presentation": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "presentation",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Removes standalone control semantics so a composite owner such as a\n`menuitemcheckbox` can use the switch as an aria-hidden visual indicator."
+      },
+      "readOnly": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "read-only",
+        "default": "false",
+        "required": false,
+        "mutable": false
+      },
+      "required": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "required",
+        "default": "false",
+        "required": false,
+        "mutable": false
+      },
+      "requiredMessage": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "required-message",
+        "default": "'This field is required.'",
+        "required": false,
+        "mutable": false
+      },
+      "size": {
+        "type": "SwitchSize",
+        "resolvedType": "\"md\" | \"sm\" | \"xs\"",
+        "attribute": "size",
+        "default": "'md'",
+        "required": false,
+        "mutable": false,
+        "description": "Compact track size for placement inside controls, menus, and form rows."
+      },
+      "uncheckedValue": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "unchecked-value",
+        "required": false,
+        "mutable": false,
+        "description": "Optional value submitted when unchecked; omitted by default like a native checkbox."
+      },
+      "value": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "value",
+        "default": "'on'",
+        "required": false,
+        "mutable": false
+      }
+    },
+    "events": [
+      {
+        "name": "dsChange",
+        "detail": "boolean",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true
+      }
+    ],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-switch",
+      "react": "DsSwitch",
+      "angular": "DsSwitch"
+    },
+    "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-switch.js';",
+        "example": "<ds-switch></ds-switch>"
+      },
+      "react": {
+        "import": "import { DsSwitch } from '@ds-mo/ui/react';",
+        "example": "<DsSwitch />"
+      },
+      "angular": {
+        "import": "import { DsSwitch } from '@ds-mo/ui/angular/ds-switch';",
+        "example": "<ds-switch></ds-switch>"
+      },
+      "peerDependencies": {
+        "required": [
+          "@ds-mo/tokens ^3.1.1",
+          "@ds-mo/icons ^6.2.0"
+        ],
+        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
+      }
+    }
+  },
+  "dependencies": [
+    "@ds-mo/ui",
+    "@ds-mo/tokens"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "src/wc/components/Switch/Switch.css",
+      "content": "@import '../../utils/focus-ring.css';\n@import '../../utils/control-inactive.css';\n\n:host {\n  --ds-switch-width: var(--dimension-size-400);\n  --ds-switch-height: var(--dimension-size-250);\n  --ds-switch-thumb-size: var(--dimension-size-150);\n  --ds-switch-gap: var(--dimension-space-050);\n  --ds-switch-stroke: var(--dimension-stroke-width-015);\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: pointer;\n  user-select: none;\n  outline: none;\n  background-color: transparent;\n  box-shadow: inset 0 0 0 var(--ds-switch-stroke) var(--color-foreground-tertiary);\n  transition:\n    background-color var(--effect-motion-short-3),\n    box-shadow var(--effect-motion-short-3);\n}\n\n:host(.switch--sm) {\n  --ds-switch-width: var(--dimension-size-300);\n  --ds-switch-height: var(--dimension-size-200);\n  --ds-switch-thumb-size: calc(var(--dimension-size-base) * 5 / 4);\n  --ds-switch-gap: calc(var(--dimension-space-025) + var(--dimension-space-012));\n  --ds-switch-stroke: var(--dimension-stroke-width-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  --ds-switch-stroke: calc(var(--dimension-stroke-width-base) * 3 / 32);\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` (25% opacity). */\n\n.thumb {\n  position: absolute;\n  top: 50%;\n  left: var(--ds-switch-inset);\n  width: var(--ds-switch-thumb-size);\n  height: var(--ds-switch-thumb-size);\n  border-radius: var(--dimension-radius-half);\n  background-color: var(--color-foreground-tertiary);\n  box-shadow: none;\n  transform: translateY(-50%);\n  transition:\n    background-color var(--effect-motion-short-3),\n    transform var(--effect-motion-short-3);\n  pointer-events: none;\n}\n\n.thumb::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: transparent;\n  pointer-events: none;\n}\n\n:host(:hover:not(:disabled):not(.ds-control-inactive):not(.switch--readonly):not(.switch--presentation))\n  .thumb::after {\n  background: var(--ds-switch-thumb-hover);\n}\n\n:host(:active:not(:disabled):not(.ds-control-inactive):not(.switch--readonly):not(.switch--presentation))\n  .thumb::after {\n  background: var(--ds-switch-thumb-pressed);\n}\n\n:host(.checked) .thumb {\n  background-color: var(--color-background-primary);\n  box-shadow: none;\n  transform: translate3d(var(--ds-switch-travel), -50%, 0);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    transition: none;\n  }\n\n  .thumb {\n    transition: none;\n  }\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/Switch/Switch.tsx",
+      "content": "import { AttachInternals, Component, Element, Prop, State, Event, EventEmitter, Watch, h, Host } from '@stencil/core';\n\nexport type SwitchSize = 'md' | 'sm' | 'xs';\n\nlet generatedLabelId = 0;\n\n@Component({\n  tag: 'ds-switch',\n  styleUrl: 'Switch.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Switch {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Current on/off state. The initial value is restored when the owning form resets. */\n  @Prop({ mutable: true }) checked: boolean = false;\n\n  @Prop({ reflect: true }) name: string | undefined;\n  @Prop() value: string = 'on';\n\n  /** Optional value submitted when unchecked; omitted by default like a native checkbox. */\n  @Prop() uncheckedValue: string | undefined;\n\n  /** Associates the switch with a form by id when it is rendered outside that form. */\n  @Prop({ reflect: true }) form: string | undefined;\n\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) readOnly: boolean = false;\n  @Prop({ reflect: true }) required: boolean = false;\n  @Prop() requiredMessage: string = 'This field is required.';\n  @Prop() isInactive: boolean = false;\n\n  /** Compact track size for placement inside controls, menus, and form rows. */\n  @Prop() size: SwitchSize = 'md';\n\n  /**\n   * Removes standalone control semantics so a composite owner such as a\n   * `menuitemcheckbox` can use the switch as an aria-hidden visual indicator.\n   */\n  @Prop() presentation: boolean = false;\n\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private initialChecked = false;\n  @State() private formDisabled = false;\n  @State() private focused = false;\n  @State() private touched = false;\n\n  componentWillLoad() {\n    this.initialChecked = this.checked;\n    this.syncFormValue();\n  }\n\n  componentDidLoad() {\n    this.syncNativeLabels();\n  }\n\n  @Watch('checked')\n  @Watch('value')\n  @Watch('uncheckedValue')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('presentation')\n  @Watch('required')\n  syncFormValue() {\n    const inactive = this.presentation || this.isInactive || this.disabled || this.formDisabled;\n    const submissionValue = this.checked ? this.value : this.uncheckedValue ?? null;\n    const state = this.checked ? 'checked' : 'unchecked';\n    this.internals.setFormValue(inactive ? null : submissionValue, state);\n\n    const missing = this.required && !inactive && !this.checked;\n    this.internals.setValidity(missing ? { valueMissing: true } : {}, missing ? this.requiredMessage : '');\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.checked = this.initialChecked;\n    this.focused = false;\n    this.touched = false;\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this.checked = state === 'checked';\n  }\n\n  private syncNativeLabels() {\n    if (this.presentation) return;\n    if (this.el.hasAttribute('aria-label') || this.el.hasAttribute('aria-labelledby')) return;\n\n    const labelIds = (Array.from(this.internals.labels) as HTMLLabelElement[]).map(label => {\n      if (!label.id) label.id = `ds-switch-label-${++generatedLabelId}`;\n      return label.id;\n    });\n    if (labelIds.length) this.el.setAttribute('aria-labelledby', labelIds.join(' '));\n  }\n\n  private handleClick = () => {\n    if (this.presentation || this.readOnly || this.isInactive || this.disabled || this.formDisabled) return;\n    this.checked = !this.checked;\n    this.dsChange.emit(this.checked);\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.presentation || this.readOnly || this.isInactive || this.disabled || this.formDisabled) return;\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      this.handleClick();\n    }\n  };\n\n  private handleFocus = () => {\n    if (!this.presentation) this.focused = true;\n  };\n\n  private handleBlur = () => {\n    if (this.presentation) return;\n    this.focused = false;\n    this.touched = true;\n  };\n\n  render() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    const invalid = this.required && !inactive && !this.checked;\n    const dirty = this.checked !== this.initialChecked;\n    // Switch owns its structural track and thumb strokes so nested interaction layers cannot cover them.\n    return (\n      <Host\n        role={this.presentation ? undefined : 'switch'}\n        aria-checked={this.presentation ? undefined : String(this.checked)}\n        aria-disabled={!this.presentation && inactive ? 'true' : undefined}\n        aria-readonly={!this.presentation && this.readOnly ? 'true' : undefined}\n        aria-required={!this.presentation && this.required ? 'true' : undefined}\n        aria-invalid={!this.presentation && invalid ? 'true' : undefined}\n        aria-hidden={this.presentation ? 'true' : undefined}\n        data-checked={this.checked ? '' : undefined}\n        data-unchecked={!this.checked ? '' : undefined}\n        data-disabled={inactive ? '' : undefined}\n        data-readonly={this.readOnly ? '' : undefined}\n        data-required={this.required ? '' : undefined}\n        data-focused={!this.presentation && this.focused ? '' : undefined}\n        data-filled={!this.presentation && this.checked ? '' : undefined}\n        data-dirty={!this.presentation && dirty ? '' : undefined}\n        data-touched={!this.presentation && this.touched ? '' : undefined}\n        data-valid={!this.presentation && !inactive && !invalid ? '' : undefined}\n        data-invalid={!this.presentation && invalid ? '' : undefined}\n        tabIndex={this.presentation || inactive ? -1 : 0}\n        class={{\n          switch: true,\n          checked: this.checked,\n          'switch--md': this.size === 'md',\n          'switch--sm': this.size === 'sm',\n          'switch--xs': this.size === 'xs',\n          'switch--readonly': this.readOnly,\n          'switch--presentation': this.presentation,\n          'ds-focus-ring': true,\n          'ds-control-inactive': inactive,\n        }}\n        onClick={this.handleClick}\n        onKeyDown={this.handleKeyDown}\n        onFocus={this.handleFocus}\n        onBlur={this.handleBlur}\n      >\n        <span class=\"thumb\" />\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}