@ds-mo/ui 14.19.0 → 14.20.0

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

@@ -219,17 +219,17 @@
   "files": [
     {
       "path": "src/wc/components/SwatchPicker/SwatchPicker.css",
-      "content": "@import '../../utils/focus-ring.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/forced-colors.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: default;\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@media (hover: hover) and (pointer: fine) {\n  .swatch-picker__option:hover:not(:disabled) .swatch-picker__interaction {\n    background-color: var(--color-interaction-hover);\n  }\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\n@media (forced-colors: active) {\n  .swatch-picker__fill {\n    forced-color-adjust: none;\n  }\n\n  .swatch-picker__border {\n    box-shadow: none;\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n  }\n\n  .swatch-picker__halo {\n    box-shadow: none;\n  }\n\n  .swatch-picker__stroke {\n    box-shadow: none;\n    outline: var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);\n    outline-offset: calc(-1 * var(--dimension-stroke-width-025));\n  }\n\n  .swatch-picker__divider {\n    background-color: var(--ds-forced-color-content);\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  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  --_swatch-inner-inset: calc(var(--dimension-stroke-width-025) + var(--dimension-space-025));\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: default;\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: 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: 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@media (hover: hover) and (pointer: fine) {\n  .swatch-picker__option:hover:not(:disabled) .swatch-picker__interaction {\n    background-color: var(--color-interaction-hover);\n  }\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\n@media (forced-colors: active) {\n  .swatch-picker__fill {\n    forced-color-adjust: none;\n  }\n\n  .swatch-picker__border {\n    box-shadow: none;\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n  }\n\n  .swatch-picker__halo {\n    box-shadow: none;\n  }\n\n  .swatch-picker__stroke {\n    box-shadow: none;\n    outline: var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);\n    outline-offset: calc(-1 * var(--dimension-stroke-width-025));\n  }\n\n  .swatch-picker__divider {\n    background-color: var(--ds-forced-color-content);\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",
+      "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.querySelectorAll<HTMLButtonElement>('.swatch-picker__option');\n      optionButtons[index]?.focus();\n    });\n  }\n\n  private handleOptionKeyDown(event: KeyboardEvent, currentIndex: number) {\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(this.activeOptions, currentIndex, key);\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(option: SwatchPickerOption, index: number, tabIndex: number) {\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':\n            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 class=\"swatch-picker\" role=\"radiogroup\" aria-label={this.groupLabel}>\n          {(this.sections.length > 0 ? this.sections : [{ options: this.options }]).map(\n            (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          )}\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",
+      "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 ? sections.flatMap(section => section.options) : [...options];\n}\n\nexport function resolveSwatchPickerTabIndex(\n  options: readonly SwatchPickerOption[],\n  value: string\n): number {\n  const selectedIndex = options.findIndex(option => option.value === value && !option.isInactive);\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 ? enabledIndexes[0] : 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

@@ -357,12 +357,12 @@
   "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:\n    background-color var(--effect-motion-short-3),\n    box-shadow var(--effect-motion-short-3);\n}\n\n:host(.switch--lg) {\n  --ds-switch-width: var(--dimension-size-500);\n  --ds-switch-height: var(--dimension-size-300);\n  --ds-switch-thumb-size: var(--dimension-iconography-sm);\n  --ds-switch-gap: var(--dimension-space-050);\n}\n\n:host(.switch--sm) {\n  --ds-switch-width: var(--dimension-size-300);\n  --ds-switch-height: var(--dimension-size-200);\n  --ds-switch-thumb-size: calc(var(--dimension-size-base) * 5 / 4);\n  --ds-switch-gap: calc(var(--dimension-space-025) + var(--dimension-space-012));\n}\n\n:host(.switch--xs) {\n  --ds-switch-width: var(--dimension-size-250);\n  --ds-switch-height: var(--dimension-size-150);\n  --ds-switch-thumb-size: var(--dimension-size-100);\n  --ds-switch-gap: var(--dimension-space-025);\n}\n\n:host(.checked) {\n  background-color: var(--color-background-bold-brand);\n  box-shadow: none;\n}\n\n:host(.switch--readonly),\n:host(.switch--presentation) {\n  cursor: default;\n}\n\n:host(.switch--presentation) {\n  pointer-events: none;\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity). */\n\n.thumb {\n  position: absolute;\n  top: 50%;\n  left: var(--ds-switch-inset);\n  width: var(--ds-switch-thumb-size);\n  height: var(--ds-switch-thumb-size);\n  border-radius: var(--dimension-radius-half);\n  background-color: var(--color-foreground-tertiary);\n  box-shadow: none;\n  transform: translateY(-50%);\n  transition:\n    background-color var(--effect-motion-short-3),\n    transform var(--effect-motion-short-3);\n  pointer-events: none;\n}\n\n.thumb::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: transparent;\n  pointer-events: none;\n}\n\n@media (hover: hover) and (pointer: fine) {\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\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\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: transparent;\n  box-shadow: inset 0 0 0 var(--ds-switch-stroke) var(--color-border-secondary);\n  transition:\n    background-color var(--effect-motion-short-3),\n    box-shadow var(--effect-motion-short-3);\n}\n\n:host(.switch--lg) {\n  --ds-switch-width: var(--dimension-size-500);\n  --ds-switch-height: var(--dimension-size-300);\n  --ds-switch-thumb-size: var(--dimension-iconography-sm);\n  --ds-switch-gap: var(--dimension-space-050);\n}\n\n:host(.switch--sm) {\n  --ds-switch-width: var(--dimension-size-300);\n  --ds-switch-height: var(--dimension-size-200);\n  --ds-switch-thumb-size: calc(var(--dimension-size-base) * 5 / 4);\n  --ds-switch-gap: calc(var(--dimension-space-025) + var(--dimension-space-012));\n}\n\n:host(.switch--xs) {\n  --ds-switch-width: var(--dimension-size-250);\n  --ds-switch-height: var(--dimension-size-150);\n  --ds-switch-thumb-size: var(--dimension-size-100);\n  --ds-switch-gap: var(--dimension-space-025);\n}\n\n:host(.checked) {\n  background-color: var(--color-background-bold-brand);\n  box-shadow: none;\n}\n\n:host(.switch--readonly),\n:host(.switch--presentation) {\n  cursor: default;\n}\n\n:host(.switch--presentation) {\n  pointer-events: none;\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity). */\n\n.thumb {\n  position: absolute;\n  top: 50%;\n  left: var(--ds-switch-inset);\n  width: var(--ds-switch-thumb-size);\n  height: var(--ds-switch-thumb-size);\n  border-radius: var(--dimension-radius-half);\n  background-color: var(--color-foreground-tertiary);\n  box-shadow: none;\n  transform: translateY(-50%);\n  transition:\n    background-color var(--effect-motion-short-3),\n    transform var(--effect-motion-short-3);\n  pointer-events: none;\n}\n\n.thumb::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: transparent;\n  pointer-events: none;\n}\n\n@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    transition: none;\n  }\n\n  .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",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/Switch/Switch.tsx",
-      "content": "import { AttachInternals, Component, Element, Prop, State, Event, EventEmitter, Watch, h, Host } from '@stencil/core';\nimport { DEFAULT_REQUIRED_MESSAGE, setFormControlValue, setRequiredValidity } from '../../utils';\n\nexport type SwitchSize = 'lg' | 'md' | 'sm' | 'xs';\n\nlet generatedLabelId = 0;\n\n@Component({\n  tag: 'ds-switch',\n  styleUrl: 'Switch.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Switch {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Current on/off state. The initial value is restored when the owning form resets. */\n  @Prop({ mutable: true }) checked: boolean = false;\n\n  @Prop({ reflect: true }) name: string | undefined;\n  @Prop() value: string = 'on';\n\n  /** Optional value submitted when unchecked; omitted by default like a native checkbox. */\n  @Prop() uncheckedValue: string | undefined;\n\n  /** Associates the switch with a form by id when it is rendered outside that form. */\n  @Prop({ reflect: true }) form: string | undefined;\n\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) readOnly: boolean = false;\n  @Prop({ reflect: true }) required: boolean = false;\n  @Prop() requiredMessage: string = DEFAULT_REQUIRED_MESSAGE;\n  @Prop() isInactive: boolean = false;\n\n  /** Compact track size for placement inside controls, menus, and form rows. */\n  @Prop() size: SwitchSize = 'md';\n\n  /**\n   * Removes standalone control semantics so a composite owner such as a\n   * `menuitemcheckbox` can use the switch as an aria-hidden visual indicator.\n   */\n  @Prop() presentation: boolean = false;\n\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private initialChecked = false;\n  @State() private formDisabled = false;\n  @State() private focused = false;\n  @State() private touched = false;\n\n  componentWillLoad() {\n    this.initialChecked = this.checked;\n    this.syncFormValue();\n  }\n\n  componentDidLoad() {\n    this.syncNativeLabels();\n  }\n\n  @Watch('checked')\n  @Watch('value')\n  @Watch('uncheckedValue')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('presentation')\n  @Watch('required')\n  syncFormValue() {\n    const inactive = this.presentation || this.isInactive || this.disabled || this.formDisabled;\n    const submissionValue = this.checked ? this.value : this.uncheckedValue ?? null;\n    const state = this.checked ? 'checked' : 'unchecked';\n    setFormControlValue(this.internals, submissionValue, { inactive, state });\n\n    const missing = this.required && !inactive && !this.checked;\n    setRequiredValidity(this.internals, missing, this.requiredMessage);\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.checked = this.initialChecked;\n    this.focused = false;\n    this.touched = false;\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this.checked = state === 'checked';\n  }\n\n  private syncNativeLabels() {\n    if (this.presentation) return;\n    if (this.el.hasAttribute('aria-label') || this.el.hasAttribute('aria-labelledby')) return;\n\n    const labelIds = (Array.from(this.internals.labels) as HTMLLabelElement[]).map(label => {\n      if (!label.id) label.id = `ds-switch-label-${++generatedLabelId}`;\n      return label.id;\n    });\n    if (labelIds.length) this.el.setAttribute('aria-labelledby', labelIds.join(' '));\n  }\n\n  private handleClick = () => {\n    if (this.presentation || this.readOnly || this.isInactive || this.disabled || this.formDisabled) return;\n    this.checked = !this.checked;\n    this.dsChange.emit(this.checked);\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.presentation || this.readOnly || this.isInactive || this.disabled || this.formDisabled) return;\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      this.handleClick();\n    }\n  };\n\n  private handleFocus = () => {\n    if (!this.presentation) this.focused = true;\n  };\n\n  private handleBlur = () => {\n    if (this.presentation) return;\n    this.focused = false;\n    this.touched = true;\n  };\n\n  render() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    const invalid = this.required && !inactive && !this.checked;\n    const dirty = this.checked !== this.initialChecked;\n    // Switch owns its structural track and thumb strokes so nested interaction layers cannot cover them.\n    return (\n      <Host\n        role={this.presentation ? undefined : 'switch'}\n        aria-checked={this.presentation ? undefined : String(this.checked)}\n        aria-disabled={!this.presentation && inactive ? 'true' : undefined}\n        aria-readonly={!this.presentation && this.readOnly ? 'true' : undefined}\n        aria-required={!this.presentation && this.required ? 'true' : undefined}\n        aria-invalid={!this.presentation && invalid ? 'true' : undefined}\n        aria-hidden={this.presentation ? 'true' : undefined}\n        data-checked={this.checked ? '' : undefined}\n        data-unchecked={!this.checked ? '' : undefined}\n        data-disabled={inactive ? '' : undefined}\n        data-readonly={this.readOnly ? '' : undefined}\n        data-required={this.required ? '' : undefined}\n        data-focused={!this.presentation && this.focused ? '' : undefined}\n        data-filled={!this.presentation && this.checked ? '' : undefined}\n        data-dirty={!this.presentation && dirty ? '' : undefined}\n        data-touched={!this.presentation && this.touched ? '' : undefined}\n        data-valid={!this.presentation && !inactive && !invalid ? '' : undefined}\n        data-invalid={!this.presentation && invalid ? '' : undefined}\n        tabIndex={this.presentation || inactive ? -1 : 0}\n        class={{\n          switch: true,\n          checked: this.checked,\n          'switch--lg': this.size === 'lg',\n          'switch--md': this.size === 'md',\n          'switch--sm': this.size === 'sm',\n          'switch--xs': this.size === 'xs',\n          'switch--readonly': this.readOnly,\n          'switch--presentation': this.presentation,\n          'ds-focus-ring': true,\n          'ds-control-inactive': inactive,\n        }}\n        onClick={this.handleClick}\n        onKeyDown={this.handleKeyDown}\n        onFocus={this.handleFocus}\n        onBlur={this.handleBlur}\n      >\n        <span class=\"thumb\" />\n      </Host>\n    );\n  }\n}\n",
+      "content": "import {\n  AttachInternals,\n  Component,\n  Element,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport { DEFAULT_REQUIRED_MESSAGE, setFormControlValue, setRequiredValidity } from '../../utils';\n\nexport type SwitchSize = 'lg' | 'md' | 'sm' | 'xs';\n\nlet generatedLabelId = 0;\n\n@Component({\n  tag: 'ds-switch',\n  styleUrl: 'Switch.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Switch {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Current on/off state. The initial value is restored when the owning form resets. */\n  @Prop({ mutable: true }) checked: boolean = false;\n\n  @Prop({ reflect: true }) name: string | undefined;\n  @Prop() value: string = 'on';\n\n  /** Optional value submitted when unchecked; omitted by default like a native checkbox. */\n  @Prop() uncheckedValue: string | undefined;\n\n  /** Associates the switch with a form by id when it is rendered outside that form. */\n  @Prop({ reflect: true }) form: string | undefined;\n\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) readOnly: boolean = false;\n  @Prop({ reflect: true }) required: boolean = false;\n  @Prop() requiredMessage: string = DEFAULT_REQUIRED_MESSAGE;\n  @Prop() isInactive: boolean = false;\n\n  /** Compact track size for placement inside controls, menus, and form rows. */\n  @Prop() size: SwitchSize = 'md';\n\n  /**\n   * Removes standalone control semantics so a composite owner such as a\n   * `menuitemcheckbox` can use the switch as an aria-hidden visual indicator.\n   */\n  @Prop() presentation: boolean = false;\n\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private initialChecked = false;\n  @State() private formDisabled = false;\n  @State() private focused = false;\n  @State() private touched = false;\n\n  componentWillLoad() {\n    this.initialChecked = this.checked;\n    this.syncFormValue();\n  }\n\n  componentDidLoad() {\n    this.syncNativeLabels();\n  }\n\n  @Watch('checked')\n  @Watch('value')\n  @Watch('uncheckedValue')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('presentation')\n  @Watch('required')\n  syncFormValue() {\n    const inactive = this.presentation || this.isInactive || this.disabled || this.formDisabled;\n    const submissionValue = this.checked ? this.value : (this.uncheckedValue ?? null);\n    const state = this.checked ? 'checked' : 'unchecked';\n    setFormControlValue(this.internals, submissionValue, { inactive, state });\n\n    const missing = this.required && !inactive && !this.checked;\n    setRequiredValidity(this.internals, missing, this.requiredMessage);\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.checked = this.initialChecked;\n    this.focused = false;\n    this.touched = false;\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this.checked = state === 'checked';\n  }\n\n  private syncNativeLabels() {\n    if (this.presentation) return;\n    if (this.el.hasAttribute('aria-label') || this.el.hasAttribute('aria-labelledby')) return;\n\n    const labelIds = (Array.from(this.internals.labels) as HTMLLabelElement[]).map(label => {\n      if (!label.id) label.id = `ds-switch-label-${++generatedLabelId}`;\n      return label.id;\n    });\n    if (labelIds.length) this.el.setAttribute('aria-labelledby', labelIds.join(' '));\n  }\n\n  private handleClick = () => {\n    if (this.presentation || this.readOnly || this.isInactive || this.disabled || this.formDisabled)\n      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)\n      return;\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      this.handleClick();\n    }\n  };\n\n  private handleFocus = () => {\n    if (!this.presentation) this.focused = true;\n  };\n\n  private handleBlur = () => {\n    if (this.presentation) return;\n    this.focused = false;\n    this.touched = true;\n  };\n\n  render() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    const invalid = this.required && !inactive && !this.checked;\n    const dirty = this.checked !== this.initialChecked;\n    // Switch owns its structural track and thumb strokes so nested interaction layers cannot cover them.\n    return (\n      <Host\n        role={this.presentation ? undefined : 'switch'}\n        aria-checked={this.presentation ? undefined : String(this.checked)}\n        aria-disabled={!this.presentation && inactive ? 'true' : undefined}\n        aria-readonly={!this.presentation && this.readOnly ? 'true' : undefined}\n        aria-required={!this.presentation && this.required ? 'true' : undefined}\n        aria-invalid={!this.presentation && invalid ? 'true' : undefined}\n        aria-hidden={this.presentation ? 'true' : undefined}\n        data-checked={this.checked ? '' : undefined}\n        data-unchecked={!this.checked ? '' : undefined}\n        data-disabled={inactive ? '' : undefined}\n        data-readonly={this.readOnly ? '' : undefined}\n        data-required={this.required ? '' : undefined}\n        data-focused={!this.presentation && this.focused ? '' : undefined}\n        data-filled={!this.presentation && this.checked ? '' : undefined}\n        data-dirty={!this.presentation && dirty ? '' : undefined}\n        data-touched={!this.presentation && this.touched ? '' : undefined}\n        data-valid={!this.presentation && !inactive && !invalid ? '' : undefined}\n        data-invalid={!this.presentation && invalid ? '' : undefined}\n        tabIndex={this.presentation || inactive ? -1 : 0}\n        class={{\n          switch: true,\n          checked: this.checked,\n          'switch--lg': this.size === 'lg',\n          'switch--md': this.size === 'md',\n          'switch--sm': this.size === 'sm',\n          'switch--xs': this.size === 'xs',\n          'switch--readonly': this.readOnly,\n          'switch--presentation': this.presentation,\n          'ds-focus-ring': true,\n          'ds-control-inactive': inactive,\n        }}\n        onClick={this.handleClick}\n        onKeyDown={this.handleKeyDown}\n        onFocus={this.handleFocus}\n        onBlur={this.handleBlur}\n      >\n        <span class=\"thumb\" />\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

package/dist/mcp-data/registry/tab-group.json

@@ -282,12 +282,12 @@
   "files": [
     {
       "path": "src/wc/components/TabGroup/TabGroup.css",
-      "content": "@import '../../utils/control-density.css';\n@import '../../utils/control-density-inset.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: block;\n  --_tab-group-surface-border: var(--color-border-tertiary);\n  --_tab-group-divider: var(--color-border-secondary);\n}\n\n:host(.tab-group-host--on-faint) {\n  --_tab-group-selected-fill: var(--color-interaction-active);\n}\n\n:host(.tab-group-host--on-medium) {\n  --_tab-group-surface-border: var(--color-border-on-medium-background-tertiary);\n  --_tab-group-divider: var(--color-border-on-medium-background-secondary);\n  --_tab-group-selected-fill: var(--color-interaction-on-medium-background-active);\n}\n\n:host(.tab-group-host--on-bold) {\n  --_tab-group-surface-border: var(--color-border-on-bold-background-tertiary);\n  --_tab-group-divider: var(--color-border-on-bold-background-secondary);\n  --_tab-group-selected-fill: var(--color-interaction-on-bold-background-active);\n}\n\n:host(.tab-group-host--on-strong) {\n  --_tab-group-surface-border: var(--color-border-on-strong-background-tertiary);\n  --_tab-group-divider: var(--color-border-on-strong-background-secondary);\n  --_tab-group-selected-fill: var(--color-interaction-on-strong-background-active);\n}\n\n:host(.tab-group-host--on-translucent) {\n  --_tab-group-surface-border: var(--color-translucent-border-tertiary);\n  --_tab-group-divider: var(--color-translucent-border-secondary);\n  --_tab-group-selected-fill: var(--color-translucent-interaction-active);\n}\n\n:host(.tab-group-host--on-inverted) {\n  --_tab-group-surface-border: var(--color-inverted-border-tertiary);\n  --_tab-group-divider: var(--color-inverted-border-secondary);\n  --_tab-group-selected-fill: var(--color-inverted-interaction-active);\n}\n\n:host(.tab-group-host--on-media) {\n  --_tab-group-surface-border: var(--color-media-border-tertiary);\n  --_tab-group-divider: var(--color-media-border-secondary);\n  --_tab-group-selected-fill: var(--color-media-interaction-active);\n}\n\n:host(.tab-group-host--on-always-dark) {\n  --_tab-group-surface-border: var(--color-always-dark-border-tertiary);\n  --_tab-group-divider: var(--color-always-dark-border-secondary);\n  --_tab-group-selected-fill: var(--color-always-dark-interaction-active);\n}\n\n.tab-list {\n  display: flex;\n  align-items: center;\n  gap: var(--ds-control-gap);\n  position: relative;\n  width: max-content;\n  max-width: 100%;\n  height: var(--ds-control-height);\n  padding: calc(var(--dimension-space-025) - var(--dimension-stroke-width-012));\n  background-color: var(--color-background-secondary);\n  border: var(--dimension-stroke-width-012) solid var(--_tab-group-surface-border);\n  border-radius: var(--dimension-radius-half);\n  box-sizing: border-box;\n}\n\n:host(.ds-control-width--fill) .tab-list {\n  width: 100%;\n}\n\n:host(.tab-group-host--surface) .tab-list {\n  background-color: transparent;\n}\n\n.tab {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--ds-control-gap);\n  padding: 0 var(--ds-control-padding-inline);\n  background-color: transparent;\n  border: none;\n  border-radius: var(--dimension-radius-half);\n  cursor: default;\n  -webkit-user-select: none;\n  user-select: none;\n  color: var(--color-foreground-secondary);\n  transition: color var(--effect-motion-short-2);\n  flex-shrink: 0;\n  height: var(--ds-control-height);\n  min-width: var(--ds-control-height);\n  box-sizing: border-box;\n  --_dot: var(--color-foreground-bold-brand);\n  /* Hover/press: `.ds-interaction-fill` fills cover the complete segment. */\n}\n\n:host(.ds-control-width--fill) .tab {\n  flex: 1 1 0;\n  min-width: 0;\n  overflow: hidden;\n}\n\n:host(.ds-control-width--fill) .tab__content {\n  max-width: 100%;\n  overflow: hidden;\n}\n\n:host(.ds-control-width--fill) .tab__label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.tab--selected {\n  color: var(--color-foreground-primary);\n  background-color: var(--color-background-primary);\n  /* Inset stroke on interaction-fill ::after — stays above hover wash. */\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--_tab-group-surface-border);\n}\n\n:host(.tab-group-host--surface) .tab--selected {\n  background-color: var(--_tab-group-selected-fill);\n}\n\n.tab--selected:not(.ds-interaction-fill) {\n  box-shadow: inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color);\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity) — applied via class in TSX. */\n\n.tab__content {\n  position: relative;\n  z-index: 2;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--ds-control-gap);\n  min-width: 0;\n}\n\n.tab__content--dot {\n  padding-right: var(--dimension-space-050);\n}\n\n.tab__label {\n  padding: 0 var(--ds-control-label-inset);\n  white-space: nowrap;\n}\n\n.tab__icon {\n  flex-shrink: 0;\n}\n\n.tab__dot {\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 2;\n  pointer-events: none;\n}\n\n.on-medium {\n  color: var(--color-foreground-on-medium-background-secondary);\n}\n\n.on-medium.tab--selected { color: var(--color-foreground-on-medium-background-primary); }\n\n.on-bold {\n  color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.on-bold.tab--selected { color: var(--color-foreground-on-bold-background-primary); }\n\n.on-strong {\n  color: var(--color-foreground-on-strong-background-secondary);\n}\n\n.on-strong.tab--selected { color: var(--color-foreground-on-strong-background-primary); }\n\n.on-translucent { color: var(--color-translucent-foreground-secondary); }\n\n.on-translucent.tab--selected { color: var(--color-translucent-foreground-primary); }\n\n.on-inverted { color: var(--color-inverted-foreground-secondary); }\n\n.on-inverted.tab--selected { color: var(--color-inverted-foreground-primary); }\n\n.on-media { color: var(--color-media-foreground-secondary); }\n\n.on-media.tab--selected { color: var(--color-media-foreground-primary); }\n\n.on-always-dark {\n  color: var(--color-always-dark-foreground-secondary);\n}\n\n.on-always-dark.tab--selected { color: var(--color-always-dark-foreground-primary); }\n\n.tab-divider {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--dimension-stroke-width-012);\n  align-self: center;\n  padding: 0;\n  flex-shrink: 0;\n  pointer-events: none;\n}\n\n.tab-divider__line {\n  width: var(--dimension-stroke-width-012);\n  height: var(--typography-lineheight-sm);\n  flex-shrink: 0;\n  background-color: var(--_tab-group-divider);\n}\n",
+      "content": "@import '../../utils/control-density.css';\n@import '../../utils/control-density-inset.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: block;\n  --_tab-group-surface-border: var(--color-border-tertiary);\n  --_tab-group-divider: var(--color-border-secondary);\n}\n\n:host(.tab-group-host--on-faint) {\n  --_tab-group-selected-fill: var(--color-interaction-active);\n}\n\n:host(.tab-group-host--on-medium) {\n  --_tab-group-surface-border: var(--color-border-on-medium-background-tertiary);\n  --_tab-group-divider: var(--color-border-on-medium-background-secondary);\n  --_tab-group-selected-fill: var(--color-interaction-on-medium-background-active);\n}\n\n:host(.tab-group-host--on-bold) {\n  --_tab-group-surface-border: var(--color-border-on-bold-background-tertiary);\n  --_tab-group-divider: var(--color-border-on-bold-background-secondary);\n  --_tab-group-selected-fill: var(--color-interaction-on-bold-background-active);\n}\n\n:host(.tab-group-host--on-strong) {\n  --_tab-group-surface-border: var(--color-border-on-strong-background-tertiary);\n  --_tab-group-divider: var(--color-border-on-strong-background-secondary);\n  --_tab-group-selected-fill: var(--color-interaction-on-strong-background-active);\n}\n\n:host(.tab-group-host--on-translucent) {\n  --_tab-group-surface-border: var(--color-translucent-border-tertiary);\n  --_tab-group-divider: var(--color-translucent-border-secondary);\n  --_tab-group-selected-fill: var(--color-translucent-interaction-active);\n}\n\n:host(.tab-group-host--on-inverted) {\n  --_tab-group-surface-border: var(--color-inverted-border-tertiary);\n  --_tab-group-divider: var(--color-inverted-border-secondary);\n  --_tab-group-selected-fill: var(--color-inverted-interaction-active);\n}\n\n:host(.tab-group-host--on-media) {\n  --_tab-group-surface-border: var(--color-media-border-tertiary);\n  --_tab-group-divider: var(--color-media-border-secondary);\n  --_tab-group-selected-fill: var(--color-media-interaction-active);\n}\n\n:host(.tab-group-host--on-always-dark) {\n  --_tab-group-surface-border: var(--color-always-dark-border-tertiary);\n  --_tab-group-divider: var(--color-always-dark-border-secondary);\n  --_tab-group-selected-fill: var(--color-always-dark-interaction-active);\n}\n\n.tab-list {\n  display: flex;\n  align-items: center;\n  gap: var(--ds-control-gap);\n  position: relative;\n  width: max-content;\n  max-width: 100%;\n  height: var(--ds-control-height);\n  padding: calc(var(--dimension-space-025) - var(--dimension-stroke-width-012));\n  background-color: var(--color-background-secondary);\n  border: var(--dimension-stroke-width-012) solid var(--_tab-group-surface-border);\n  border-radius: var(--dimension-radius-half);\n  box-sizing: border-box;\n}\n\n:host(.ds-control-width--fill) .tab-list {\n  width: 100%;\n}\n\n:host(.tab-group-host--surface) .tab-list {\n  background-color: transparent;\n}\n\n.tab {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--ds-control-gap);\n  padding: 0 var(--ds-control-padding-inline);\n  background-color: transparent;\n  border: none;\n  border-radius: var(--dimension-radius-half);\n  cursor: default;\n  -webkit-user-select: none;\n  user-select: none;\n  color: var(--color-foreground-secondary);\n  transition: color var(--effect-motion-short-2);\n  flex-shrink: 0;\n  height: var(--ds-control-height);\n  min-width: var(--ds-control-height);\n  box-sizing: border-box;\n  --_dot: var(--color-foreground-bold-brand);\n  /* Hover/press: `.ds-interaction-fill` fills cover the complete segment. */\n}\n\n:host(.ds-control-width--fill) .tab {\n  flex: 1 1 0;\n  min-width: 0;\n  overflow: hidden;\n}\n\n:host(.ds-control-width--fill) .tab__content {\n  max-width: 100%;\n  overflow: hidden;\n}\n\n:host(.ds-control-width--fill) .tab__label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.tab--selected {\n  color: var(--color-foreground-primary);\n  background-color: var(--color-background-primary);\n  /* Inset stroke on interaction-fill ::after — stays above hover wash. */\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--_tab-group-surface-border);\n}\n\n:host(.tab-group-host--surface) .tab--selected {\n  background-color: var(--_tab-group-selected-fill);\n}\n\n.tab--selected:not(.ds-interaction-fill) {\n  box-shadow: inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color);\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity) — applied via class in TSX. */\n\n.tab__content {\n  position: relative;\n  z-index: 2;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--ds-control-gap);\n  min-width: 0;\n}\n\n.tab__content--dot {\n  padding-right: var(--dimension-space-050);\n}\n\n.tab__label {\n  padding: 0 var(--ds-control-label-inset);\n  white-space: nowrap;\n}\n\n.tab__icon {\n  flex-shrink: 0;\n}\n\n.tab__dot {\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 2;\n  pointer-events: none;\n}\n\n.on-medium {\n  color: var(--color-foreground-on-medium-background-secondary);\n}\n\n.on-medium.tab--selected {\n  color: var(--color-foreground-on-medium-background-primary);\n}\n\n.on-bold {\n  color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.on-bold.tab--selected {\n  color: var(--color-foreground-on-bold-background-primary);\n}\n\n.on-strong {\n  color: var(--color-foreground-on-strong-background-secondary);\n}\n\n.on-strong.tab--selected {\n  color: var(--color-foreground-on-strong-background-primary);\n}\n\n.on-translucent {\n  color: var(--color-translucent-foreground-secondary);\n}\n\n.on-translucent.tab--selected {\n  color: var(--color-translucent-foreground-primary);\n}\n\n.on-inverted {\n  color: var(--color-inverted-foreground-secondary);\n}\n\n.on-inverted.tab--selected {\n  color: var(--color-inverted-foreground-primary);\n}\n\n.on-media {\n  color: var(--color-media-foreground-secondary);\n}\n\n.on-media.tab--selected {\n  color: var(--color-media-foreground-primary);\n}\n\n.on-always-dark {\n  color: var(--color-always-dark-foreground-secondary);\n}\n\n.on-always-dark.tab--selected {\n  color: var(--color-always-dark-foreground-primary);\n}\n\n.tab-divider {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--dimension-stroke-width-012);\n  align-self: center;\n  padding: 0;\n  flex-shrink: 0;\n  pointer-events: none;\n}\n\n.tab-divider__line {\n  width: var(--dimension-stroke-width-012);\n  height: var(--typography-lineheight-sm);\n  flex-shrink: 0;\n  background-color: var(--_tab-group-divider);\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/TabGroup/TabGroup.tsx",
-      "content": "import { Component, Prop, Event, EventEmitter, Element, Listen, Watch, h, Host } from '@stencil/core';\nimport { controlWidthClass, CONTROL_TEXT_VARIANT, type ControlWidth } from '../../utils';\nimport {\n  getSelectableTabs,\n  isTabDivider,\n  type TabGroupItem,\n  type TabItemTab,\n} from './tab-item-utils';\n\nexport type TabBackground =\n  | 'faint'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'translucent'\n  | 'inverted'\n  | 'media'\n  | 'always-dark';\n\nexport type TabGroupSize = 'sm' | 'md' | 'lg';\nexport type TabGroupWidth = ControlWidth;\n\n@Component({\n  tag: 'ds-tab-group',\n  styleUrl: 'TabGroup.css',\n  scoped: true,\n})\nexport class TabGroup {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() tabs: TabGroupItem[] = [];\n  /** Control density: 24px small, 32px medium, or 40px large track. */\n  @Prop() size: TabGroupSize = 'md';\n  /** Width fit — hug content (default) or fill the parent with equal-width segments. */\n  @Prop() width: TabGroupWidth = 'hug';\n  @Prop() background: TabBackground | undefined;\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n\n  @Event() dsChange!: EventEmitter<string>;\n\n  private get selectableTabs(): TabItemTab[] {\n    return getSelectableTabs(this.tabs);\n  }\n\n  private get focusableTabId(): string {\n    return this.selectableTabs.some(tab => tab.id === this.value && !tab.isInactive)\n      ? this.value\n      : (this.selectableTabs.find(tab => !tab.isInactive)?.id ?? '');\n  }\n\n  private selectTab(id: string, options?: { focus?: boolean }) {\n    this.value = id;\n    this.dsChange.emit(id);\n    if (options?.focus !== false) {\n      this.focusTab(id);\n    }\n  }\n\n  private focusTab(id: string) {\n    const btn = this.el.querySelector(`[data-tab-id=\"${id}\"]`) as HTMLElement | null;\n    btn?.focus({ preventScroll: true });\n  }\n\n  /** Keep focus on the selected tab when value changes externally (e.g. BarNav menu). */\n  @Watch('value')\n  onValueChange(next: string, prev: string | undefined) {\n    if (prev === undefined || next === prev) return;\n\n    requestAnimationFrame(() => {\n      const active = document.activeElement as HTMLElement | null;\n      if (!active || !this.el.contains(active)) return;\n\n      const activeId = active.getAttribute('data-tab-id');\n      if (activeId === next) return;\n\n      const focusId = this.selectableTabs.some(tab => tab.id === next && !tab.isInactive)\n        ? next\n        : this.focusableTabId;\n      const nextTab = this.el.querySelector(`[data-tab-id=\"${focusId}\"]`) as HTMLElement | null;\n      if (nextTab) {\n        nextTab.focus({ preventScroll: true });\n      } else {\n        active.blur();\n      }\n    });\n  }\n\n  /**\n   * Find the next non-inactive tab index relative to `from`, stepping by `step`.\n   * Returns `from` unchanged if no other enabled tab exists.\n   */\n  private findEnabled(from: number, step: 1 | -1): number {\n    const tabs = this.selectableTabs;\n    const len = tabs.length;\n    for (let n = 0; n < len; n++) {\n      const i = (from + step * (n + 1) + len * (n + 1)) % len;\n      if (!tabs[i]?.isInactive) return i;\n    }\n    return from;\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    const tabs = this.selectableTabs;\n    if (!tabs.length) return;\n\n    const focusedId = (e.target as Element | null)?.closest<HTMLElement>('[data-tab-id]')?.dataset['tabId'];\n    const currentIdx = tabs.findIndex(t => t.id === (focusedId ?? this.focusableTabId));\n\n    let nextIdx: number | null = null;\n\n    if (e.key === 'ArrowRight') {\n      nextIdx = this.findEnabled(currentIdx, 1);\n    } else if (e.key === 'ArrowLeft') {\n      nextIdx = this.findEnabled(currentIdx, -1);\n    }\n\n    if (e.key === 'Home') {\n      const first = tabs.findIndex(t => !t.isInactive);\n      nextIdx = first === -1 ? null : first;\n    } else if (e.key === 'End') {\n      const lastEnabled = [...tabs].reverse().findIndex(t => !t.isInactive);\n      nextIdx = lastEnabled === -1 ? null : tabs.length - 1 - lastEnabled;\n    }\n\n    if (nextIdx !== null) {\n      e.preventDefault();\n      const next = tabs[nextIdx];\n      this.selectTab(next.id);\n    }\n  }\n\n  private getBgClass(): string {\n    if (!this.background) return '';\n    if (this.background === 'always-dark') return 'on-always-dark';\n    return `on-${this.background}`;\n  }\n\n  render() {\n    const bgClass = this.getBgClass();\n    const focusableTabId = this.focusableTabId;\n\n    return (\n      <Host\n        class={{\n          'tab-group-host': true,\n          [`tab-group-host--${this.size}`]: true,\n          [`ds-control--${this.size}`]: true,\n          'tab-group-host--surface': !!bgClass,\n          [`tab-group-host--${bgClass}`]: !!bgClass,\n          ...controlWidthClass(this.width),\n        }}\n      >\n        <div\n          role=\"tablist\"\n          class=\"tab-list\"\n          aria-label={this.ariaLabel}\n          aria-labelledby={this.ariaLabelledby}\n        >\n          {this.tabs.map((tab, index) => {\n            if (isTabDivider(tab)) {\n              return (\n                <div\n                  key={`divider-${index}`}\n                  class=\"tab-divider\"\n                  aria-hidden=\"true\"\n                >\n                  <div class=\"tab-divider__line\" />\n                </div>\n              );\n            }\n\n            const isSelected = tab.id === this.value;\n            const variant = tab.variant ?? 'label';\n            const showIcon = variant === 'icon' || variant === 'icon-label';\n            const showLabel = variant === 'label' || variant === 'icon-label';\n            const emphasizeLabel = isSelected && !bgClass;\n            return (\n              <button\n                key={tab.id}\n                type=\"button\"\n                role=\"tab\"\n                data-tab-id={tab.id}\n                class={{\n                  tab: true,\n                  'tab--selected': isSelected,\n                  [`ds-control--${this.size}`]: true,\n                  'ds-control--inset': true,\n                  'ds-focus-ring-inset': true,\n                  'ds-interaction-fill': !tab.isInactive,\n                  'ds-interaction-fill--on-faint': bgClass === 'on-faint',\n                  'ds-interaction-fill--on-medium': bgClass === 'on-medium',\n                  'ds-interaction-fill--on-bold': bgClass === 'on-bold',\n                  'ds-interaction-fill--on-strong': bgClass === 'on-strong',\n                  'ds-interaction-fill--on-translucent': bgClass === 'on-translucent',\n                  'ds-interaction-fill--on-inverted': bgClass === 'on-inverted',\n                  'ds-interaction-fill--on-media': bgClass === 'on-media',\n                  'ds-interaction-fill--on-always-dark': bgClass === 'on-always-dark',\n                  'ds-control-inactive': !!tab.isInactive,\n                  [bgClass]: !!bgClass,\n                }}\n                aria-label={variant === 'icon' ? tab.label : undefined}\n                aria-selected={isSelected}\n                aria-disabled={tab.isInactive ? 'true' : undefined}\n                aria-controls={tab.panelId ?? undefined}\n                disabled={tab.isInactive}\n                tabIndex={tab.id === focusableTabId ? 0 : -1}\n                onClick={() => !tab.isInactive && this.selectTab(tab.id)}\n              >\n                <span class={{\n                  tab__content: true,\n                  [`tab__content--${variant}`]: true,\n                  'tab__content--dot': !!tab.dot,\n                }}>\n                  {showIcon && (\n                    <ds-icon\n                      class=\"tab__icon\"\n                      name={tab.icon}\n                      size={this.size}\n                      color=\"inherit\"\n                    />\n                  )}\n                  {showLabel && (\n                    <ds-text\n                      class=\"tab__label\"\n                      as=\"span\"\n                      variant={CONTROL_TEXT_VARIANT[this.size]}\n                      emphasis={emphasizeLabel}\n                      color=\"inherit\"\n                    >\n                      {tab.label}\n                    </ds-text>\n                  )}\n                  {tab.dot && (\n                    <ds-badge\n                      class=\"tab__dot\"\n                      variant=\"dot\"\n                      hasRing={false}\n                      label=\"\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                </span>\n              </button>\n            );\n          })}\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import {\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Listen,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport { controlWidthClass, CONTROL_TEXT_VARIANT, type ControlWidth } from '../../utils';\nimport {\n  getSelectableTabs,\n  isTabDivider,\n  type TabGroupItem,\n  type TabItemTab,\n} from './tab-item-utils';\n\nexport type TabBackground =\n  | 'faint'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'translucent'\n  | 'inverted'\n  | 'media'\n  | 'always-dark';\n\nexport type TabGroupSize = 'sm' | 'md' | 'lg';\nexport type TabGroupWidth = ControlWidth;\n\n@Component({\n  tag: 'ds-tab-group',\n  styleUrl: 'TabGroup.css',\n  scoped: true,\n})\nexport class TabGroup {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() tabs: TabGroupItem[] = [];\n  /** Control density: 24px small, 32px medium, or 40px large track. */\n  @Prop() size: TabGroupSize = 'md';\n  /** Width fit — hug content (default) or fill the parent with equal-width segments. */\n  @Prop() width: TabGroupWidth = 'hug';\n  @Prop() background: TabBackground | undefined;\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n\n  @Event() dsChange!: EventEmitter<string>;\n\n  private get selectableTabs(): TabItemTab[] {\n    return getSelectableTabs(this.tabs);\n  }\n\n  private get focusableTabId(): string {\n    return this.selectableTabs.some(tab => tab.id === this.value && !tab.isInactive)\n      ? this.value\n      : (this.selectableTabs.find(tab => !tab.isInactive)?.id ?? '');\n  }\n\n  private selectTab(id: string, options?: { focus?: boolean }) {\n    this.value = id;\n    this.dsChange.emit(id);\n    if (options?.focus !== false) {\n      this.focusTab(id);\n    }\n  }\n\n  private focusTab(id: string) {\n    const btn = this.el.querySelector(`[data-tab-id=\"${id}\"]`) as HTMLElement | null;\n    btn?.focus({ preventScroll: true });\n  }\n\n  /** Keep focus on the selected tab when value changes externally (e.g. BarNav menu). */\n  @Watch('value')\n  onValueChange(next: string, prev: string | undefined) {\n    if (prev === undefined || next === prev) return;\n\n    requestAnimationFrame(() => {\n      const active = document.activeElement as HTMLElement | null;\n      if (!active || !this.el.contains(active)) return;\n\n      const activeId = active.getAttribute('data-tab-id');\n      if (activeId === next) return;\n\n      const focusId = this.selectableTabs.some(tab => tab.id === next && !tab.isInactive)\n        ? next\n        : this.focusableTabId;\n      const nextTab = this.el.querySelector(`[data-tab-id=\"${focusId}\"]`) as HTMLElement | null;\n      if (nextTab) {\n        nextTab.focus({ preventScroll: true });\n      } else {\n        active.blur();\n      }\n    });\n  }\n\n  /**\n   * Find the next non-inactive tab index relative to `from`, stepping by `step`.\n   * Returns `from` unchanged if no other enabled tab exists.\n   */\n  private findEnabled(from: number, step: 1 | -1): number {\n    const tabs = this.selectableTabs;\n    const len = tabs.length;\n    for (let n = 0; n < len; n++) {\n      const i = (from + step * (n + 1) + len * (n + 1)) % len;\n      if (!tabs[i]?.isInactive) return i;\n    }\n    return from;\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    const tabs = this.selectableTabs;\n    if (!tabs.length) return;\n\n    const focusedId = (e.target as Element | null)?.closest<HTMLElement>('[data-tab-id]')?.dataset[\n      'tabId'\n    ];\n    const currentIdx = tabs.findIndex(t => t.id === (focusedId ?? this.focusableTabId));\n\n    let nextIdx: number | null = null;\n\n    if (e.key === 'ArrowRight') {\n      nextIdx = this.findEnabled(currentIdx, 1);\n    } else if (e.key === 'ArrowLeft') {\n      nextIdx = this.findEnabled(currentIdx, -1);\n    }\n\n    if (e.key === 'Home') {\n      const first = tabs.findIndex(t => !t.isInactive);\n      nextIdx = first === -1 ? null : first;\n    } else if (e.key === 'End') {\n      const lastEnabled = [...tabs].reverse().findIndex(t => !t.isInactive);\n      nextIdx = lastEnabled === -1 ? null : tabs.length - 1 - lastEnabled;\n    }\n\n    if (nextIdx !== null) {\n      e.preventDefault();\n      const next = tabs[nextIdx];\n      this.selectTab(next.id);\n    }\n  }\n\n  private getBgClass(): string {\n    if (!this.background) return '';\n    if (this.background === 'always-dark') return 'on-always-dark';\n    return `on-${this.background}`;\n  }\n\n  render() {\n    const bgClass = this.getBgClass();\n    const focusableTabId = this.focusableTabId;\n\n    return (\n      <Host\n        class={{\n          'tab-group-host': true,\n          [`tab-group-host--${this.size}`]: true,\n          [`ds-control--${this.size}`]: true,\n          'tab-group-host--surface': !!bgClass,\n          [`tab-group-host--${bgClass}`]: !!bgClass,\n          ...controlWidthClass(this.width),\n        }}\n      >\n        <div\n          role=\"tablist\"\n          class=\"tab-list\"\n          aria-label={this.ariaLabel}\n          aria-labelledby={this.ariaLabelledby}\n        >\n          {this.tabs.map((tab, index) => {\n            if (isTabDivider(tab)) {\n              return (\n                <div key={`divider-${index}`} class=\"tab-divider\" aria-hidden=\"true\">\n                  <div class=\"tab-divider__line\" />\n                </div>\n              );\n            }\n\n            const isSelected = tab.id === this.value;\n            const variant = tab.variant ?? 'label';\n            const showIcon = variant === 'icon' || variant === 'icon-label';\n            const showLabel = variant === 'label' || variant === 'icon-label';\n            const emphasizeLabel = isSelected && !bgClass;\n            return (\n              <button\n                key={tab.id}\n                type=\"button\"\n                role=\"tab\"\n                data-tab-id={tab.id}\n                class={{\n                  tab: true,\n                  'tab--selected': isSelected,\n                  [`ds-control--${this.size}`]: true,\n                  'ds-control--inset': true,\n                  'ds-focus-ring-inset': true,\n                  'ds-interaction-fill': !tab.isInactive,\n                  'ds-interaction-fill--on-faint': bgClass === 'on-faint',\n                  'ds-interaction-fill--on-medium': bgClass === 'on-medium',\n                  'ds-interaction-fill--on-bold': bgClass === 'on-bold',\n                  'ds-interaction-fill--on-strong': bgClass === 'on-strong',\n                  'ds-interaction-fill--on-translucent': bgClass === 'on-translucent',\n                  'ds-interaction-fill--on-inverted': bgClass === 'on-inverted',\n                  'ds-interaction-fill--on-media': bgClass === 'on-media',\n                  'ds-interaction-fill--on-always-dark': bgClass === 'on-always-dark',\n                  'ds-control-inactive': !!tab.isInactive,\n                  [bgClass]: !!bgClass,\n                }}\n                aria-label={variant === 'icon' ? tab.label : undefined}\n                aria-selected={String(isSelected)}\n                aria-disabled={tab.isInactive ? 'true' : undefined}\n                aria-controls={tab.panelId ?? undefined}\n                disabled={tab.isInactive}\n                tabIndex={tab.id === focusableTabId ? 0 : -1}\n                onClick={() => !tab.isInactive && this.selectTab(tab.id)}\n              >\n                <span\n                  class={{\n                    tab__content: true,\n                    [`tab__content--${variant}`]: true,\n                    'tab__content--dot': !!tab.dot,\n                  }}\n                >\n                  {showIcon && (\n                    <ds-icon class=\"tab__icon\" name={tab.icon} size={this.size} color=\"inherit\" />\n                  )}\n                  {showLabel && (\n                    <ds-text\n                      class=\"tab__label\"\n                      as=\"span\"\n                      variant={CONTROL_TEXT_VARIANT[this.size]}\n                      emphasis={emphasizeLabel}\n                      color=\"inherit\"\n                    >\n                      {tab.label}\n                    </ds-text>\n                  )}\n                  {tab.dot && (\n                    <ds-badge\n                      class=\"tab__dot\"\n                      variant=\"dot\"\n                      hasRing={false}\n                      label=\"\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                </span>\n              </button>\n            );\n          })}\n        </div>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     },
     {

package/dist/mcp-data/registry/table-filter.json

@@ -16,7 +16,7 @@
       "summary": "Standard table-toolbar Filter control that owns the shared trigger, filter menu UI, accessible defaults, and compact-caption behavior while the application controls data and values.",
       "useWhen": [
         "A table toolbar should expose the standard singular Filter control and shared filter-menu interaction.",
-        "A product supplies filter definitions and controlled values but should not recreate the toolbar trigger, selected count, category navigation, or responsive treatment."
+        "A product supplies filter definitions and controlled values but should not recreate the toolbar trigger, category navigation, or responsive treatment."
       ],
       "avoidWhen": [
         "Filtering is unrelated to a table or structured result set; use ds-filter-menu directly.",
@@ -47,7 +47,9 @@
       ],
       "states": [
         "filters, values, and activeFilterId are controlled. dsChange, dsClear, and dsActiveFilterChange report intent without changing those inputs; the application applies query consequences and returns replacement values.",
-        "The visible trigger label defaults to singular Filter and appends the selected criterion count. The trigger uses resting secondary chrome at typical widths; active criteria promote only the visible label, without redefining generic button active semantics.",
+        "The visible trigger label stays singular Filter without appending an active-count suffix. Active criteria promote only the visible label from secondary to primary, matching the other table caption controls without redefining generic button active semantics.",
+        "The popup reserves a visually empty footer row inside the category pane for every state. Active criteria reveal its divider and only a left-aligned Clear action, without adding popup height or showing redundant selected-count copy; the option pane retains its full column.",
+        "Date categories use the shared compact-header Range and Relative experience. Persist relative values semantically and resolve them from the product's current date whenever rows or saved views are applied.",
         "Popup visibility follows the same mutable open and dsOpenChange contract as ds-filter-menu."
       ],
       "responsiveBehavior": [
@@ -392,7 +394,7 @@
     },
     {
       "path": "src/wc/components/TableFilter/TableFilter.tsx",
-      "content": "import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport type {\n  FilterMenuChangeDetail,\n  FilterMenuFilter,\n  FilterMenuValues,\n} from '../FilterMenu/FilterMenu';\n\n@Component({\n  tag: 'ds-table-filter',\n  styleUrl: 'TableFilter.css',\n  scoped: true,\n})\nexport class TableFilter {\n  /** Controlled popup visibility. */\n  @Prop({ mutable: true }) open: boolean = false;\n  /** Product-owned filter categories and option definitions. */\n  @Prop() filters: FilterMenuFilter[] = [];\n  /** Controlled values keyed by filter id. */\n  @Prop() values: FilterMenuValues = {};\n  /** Controlled category shown in the option pane. */\n  @Prop() activeFilterId: string | undefined;\n  /** Visible trigger label. */\n  @Prop() label: string = 'Filter';\n  /** Accessible name for the trigger. Defaults to Filter table. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  /** Accessible name for the non-modal filter dialog. Defaults to the trigger name. */\n  @Prop() menuLabel: string | null = null;\n  /** Accessible name for the category tab list. */\n  @Prop() categoriesLabel: string = 'Filter categories';\n  /** Footer action and date-clear accessible label. */\n  @Prop() clearLabel: string = 'Clear';\n\n  /** Requests a controlled value replacement without closing the popup. */\n  @Event() dsChange!: EventEmitter<FilterMenuChangeDetail>;\n  /** Requests that the consumer clear every filter value. */\n  @Event() dsClear!: EventEmitter<void>;\n  /** Requests a controlled active-category replacement. */\n  @Event() dsActiveFilterChange!: EventEmitter<string>;\n  /** Requests that the controlled popup close. */\n  @Event() dsClose!: EventEmitter<void>;\n  /** Emitted whenever trigger activation changes popup visibility. */\n  @Event() dsOpenChange!: EventEmitter<boolean>;\n  /** Emitted after exit motion and rendered popup removal complete. */\n  @Event() dsAfterClose!: EventEmitter<void>;\n\n  render() {\n    const name = this.ariaLabel?.trim() || 'Filter table';\n    const menuName = this.menuLabel?.trim() || name;\n\n    return (\n      <Host>\n        <ds-filter-menu\n          open={this.open}\n          triggerLabel={this.label}\n          icon=\"Filters\"\n          size=\"md\"\n          width=\"hug\"\n          hasBorder={true}\n          activeFill={false}\n          collapseLabel={true}\n          align=\"start\"\n          aria-label={name}\n          filters={this.filters}\n          values={this.values}\n          activeFilterId={this.activeFilterId}\n          menuLabel={menuName}\n          categoriesLabel={this.categoriesLabel}\n          clearLabel={this.clearLabel}\n          onDsChange={event => this.forward(event, this.dsChange)}\n          onDsClear={event => this.forward(event, this.dsClear)}\n          onDsActiveFilterChange={event => this.forward(event, this.dsActiveFilterChange)}\n          onDsClose={event => this.forward(event, this.dsClose)}\n          onDsOpenChange={event => {\n            event.stopPropagation();\n            this.open = event.detail;\n            this.dsOpenChange.emit(event.detail);\n          }}\n          onDsAfterClose={event => this.forward(event, this.dsAfterClose)}\n        />\n      </Host>\n    );\n  }\n\n  private forward<T>(event: CustomEvent<T>, emitter: EventEmitter<T>): void {\n    event.stopPropagation();\n    emitter.emit(event.detail);\n  }\n}\n",
+      "content": "import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport type {\n  FilterMenuChangeDetail,\n  FilterMenuFilter,\n  FilterMenuValues,\n} from '../FilterMenu/FilterMenu';\n\n@Component({\n  tag: 'ds-table-filter',\n  styleUrl: 'TableFilter.css',\n  scoped: true,\n})\nexport class TableFilter {\n  /** Controlled popup visibility. */\n  @Prop({ mutable: true }) open: boolean = false;\n  /** Product-owned filter categories and option definitions. */\n  @Prop() filters: FilterMenuFilter[] = [];\n  /** Controlled values keyed by filter id. */\n  @Prop() values: FilterMenuValues = {};\n  /** Controlled category shown in the option pane. */\n  @Prop() activeFilterId: string | undefined;\n  /** Visible trigger label. */\n  @Prop() label: string = 'Filter';\n  /** Accessible name for the trigger. Defaults to Filter table. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  /** Accessible name for the non-modal filter dialog. Defaults to the trigger name. */\n  @Prop() menuLabel: string | null = null;\n  /** Accessible name for the category tab list. */\n  @Prop() categoriesLabel: string = 'Filter categories';\n  /** Footer action and date-clear accessible label. */\n  @Prop() clearLabel: string = 'Clear';\n\n  /** Requests a controlled value replacement without closing the popup. */\n  @Event() dsChange!: EventEmitter<FilterMenuChangeDetail>;\n  /** Requests that the consumer clear every filter value. */\n  @Event() dsClear!: EventEmitter<void>;\n  /** Requests a controlled active-category replacement. */\n  @Event() dsActiveFilterChange!: EventEmitter<string>;\n  /** Requests that the controlled popup close. */\n  @Event() dsClose!: EventEmitter<void>;\n  /** Emitted whenever trigger activation changes popup visibility. */\n  @Event() dsOpenChange!: EventEmitter<boolean>;\n  /** Emitted after exit motion and rendered popup removal complete. */\n  @Event() dsAfterClose!: EventEmitter<void>;\n\n  render() {\n    const name = this.ariaLabel?.trim() || 'Filter table';\n    const menuName = this.menuLabel?.trim() || name;\n\n    return (\n      <Host>\n        <ds-filter-menu\n          open={this.open}\n          triggerLabel={this.label}\n          showSelectedCount={false}\n          icon=\"Filters\"\n          size=\"md\"\n          width=\"hug\"\n          hasBorder={true}\n          activeFill={false}\n          collapseLabel={true}\n          align=\"start\"\n          aria-label={name}\n          filters={this.filters}\n          values={this.values}\n          activeFilterId={this.activeFilterId}\n          menuLabel={menuName}\n          categoriesLabel={this.categoriesLabel}\n          clearLabel={this.clearLabel}\n          footerLayout=\"categories-clear\"\n          onDsChange={event => this.forward(event, this.dsChange)}\n          onDsClear={event => this.forward(event, this.dsClear)}\n          onDsActiveFilterChange={event => this.forward(event, this.dsActiveFilterChange)}\n          onDsClose={event => this.forward(event, this.dsClose)}\n          onDsOpenChange={event => {\n            event.stopPropagation();\n            this.open = event.detail;\n            this.dsOpenChange.emit(event.detail);\n          }}\n          onDsAfterClose={event => this.forward(event, this.dsAfterClose)}\n        />\n      </Host>\n    );\n  }\n\n  private forward<T>(event: CustomEvent<T>, emitter: EventEmitter<T>): void {\n    event.stopPropagation();\n    emitter.emit(event.detail);\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

package/dist/mcp-data/registry/table-sort.json

@@ -218,7 +218,7 @@
     },
     {
       "path": "src/wc/components/TableSort/TableSort.tsx",
-      "content": "import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport type { MenuItemData } from '../Menu/menu-types';\nimport type { TableColumn, TableSortChangeDetail, TableSortState } from '../Table/table-types';\nimport {\n  nextTableSortStateFromMenuItem,\n  tableSortFields,\n  tableSortMenuSections,\n  tableSortStatesEqual,\n} from './table-sort-menu';\n\nlet tableSortSeq = 0;\n\n@Component({\n  tag: 'ds-table-sort',\n  styleUrl: 'TableSort.css',\n  scoped: true,\n})\nexport class TableSort {\n  @Element() private el!: HTMLElement;\n\n  /** Catalog used to derive sortable fields, including compound header segments. */\n  @Prop() columns: TableColumn[] = [];\n  /** Controlled table sort. Header sorting and this menu share the same value. */\n  @Prop() sort: TableSortState | null = null;\n  /** Accessible name for the trigger and menu. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n\n  @Event({ bubbles: false }) dsSortChange!: EventEmitter<TableSortChangeDetail>;\n\n  @State() private menuOpen = false;\n  @State() private initialFocusVisible = false;\n\n  private readonly componentId = `ds-table-sort-${++tableSortSeq}`;\n  private readonly triggerId = `${this.componentId}-trigger`;\n  private readonly menuId = `${this.componentId}-menu`;\n\n  @Method()\n  async setFocus() {\n    const trigger = this.el.querySelector<HTMLElement & { setFocus?: () => Promise<void> }>(\n      `#${CSS.escape(this.triggerId)}`\n    );\n    await trigger?.setFocus?.();\n  }\n\n  render() {\n    const fields = tableSortFields(this.columns);\n    const name = this.ariaLabel?.trim() || 'Sort table';\n\n    return (\n      <Host hidden={fields.length === 0 ? true : undefined}>\n        {fields.length === 0 ? null : (\n          <ds-button-unfilled\n            id={this.triggerId}\n            variant=\"icon-label\"\n            size=\"md\"\n            icon=\"ArrowsVertical\"\n            label=\"Sort\"\n            labelEmphasis={false}\n            pressScale={false}\n            aria-label={name}\n            hasMenu={true}\n            collapseLabel={true}\n            expanded={this.menuOpen}\n            controls={this.menuId}\n            onDsClick={(event: CustomEvent<MouseEvent>) => {\n              this.toggle(event.detail.detail === 0);\n            }}\n          />\n        )}\n        {fields.length === 0 ? null : (\n          <ds-menu\n            id={this.menuId}\n            open={this.menuOpen}\n            anchorId={this.triggerId}\n            align=\"start\"\n            side=\"bottom\"\n            menuLabel={name}\n            selectionMode=\"none\"\n            initialFocusVisible={this.initialFocusVisible}\n            sections={tableSortMenuSections(this.columns, this.sort)}\n            onDsClose={() => this.close()}\n            onDsSelect={event => this.handleSelect(event.detail)}\n          />\n        )}\n      </Host>\n    );\n  }\n\n  private toggle(fromKeyboard = false): void {\n    if (this.menuOpen) this.close();\n    else this.open(fromKeyboard);\n  }\n\n  private open(fromKeyboard = false): void {\n    if (this.menuOpen) return;\n    this.initialFocusVisible = fromKeyboard;\n    this.menuOpen = true;\n  }\n\n  private close(): void {\n    this.menuOpen = false;\n  }\n\n  private handleSelect(item: MenuItemData): void {\n    const next = nextTableSortStateFromMenuItem(this.columns, this.sort, item);\n    if (tableSortStatesEqual(this.sort, next)) return;\n    this.dsSortChange.emit({ sort: next });\n  }\n}\n",
+      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport type { MenuItemData } from '../Menu/menu-types';\nimport type { TableColumn, TableSortChangeDetail, TableSortState } from '../Table/table-types';\nimport {\n  nextTableSortStateFromMenuItem,\n  tableSortFields,\n  tableSortMenuSections,\n  tableSortStatesEqual,\n} from './table-sort-menu';\n\nlet tableSortSeq = 0;\n\n@Component({\n  tag: 'ds-table-sort',\n  styleUrl: 'TableSort.css',\n  scoped: true,\n})\nexport class TableSort {\n  @Element() private el!: HTMLElement;\n\n  /** Catalog used to derive sortable fields, including compound header segments. */\n  @Prop() columns: TableColumn[] = [];\n  /** Controlled table sort. Header sorting and this menu share the same value. */\n  @Prop() sort: TableSortState | null = null;\n  /** Accessible name for the trigger and menu. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n\n  @Event({ bubbles: false }) dsSortChange!: EventEmitter<TableSortChangeDetail>;\n\n  @State() private menuOpen = false;\n  @State() private initialFocusVisible = false;\n\n  private readonly componentId = `ds-table-sort-${++tableSortSeq}`;\n  private readonly triggerId = `${this.componentId}-trigger`;\n  private readonly menuId = `${this.componentId}-menu`;\n\n  @Method()\n  async setFocus() {\n    const trigger = this.el.querySelector<HTMLElement & { setFocus?: () => Promise<void> }>(\n      `#${CSS.escape(this.triggerId)}`\n    );\n    await trigger?.setFocus?.();\n  }\n\n  render() {\n    const fields = tableSortFields(this.columns);\n    const name = this.ariaLabel?.trim() || 'Sort table';\n\n    return (\n      <Host hidden={fields.length === 0 ? true : undefined}>\n        {fields.length === 0 ? null : (\n          <ds-button-unfilled\n            id={this.triggerId}\n            variant=\"icon-label\"\n            size=\"md\"\n            icon=\"ArrowsVertical\"\n            label=\"Sort\"\n            labelEmphasis={false}\n            pressScale={false}\n            aria-label={name}\n            hasMenu={true}\n            collapseLabel={true}\n            expanded={this.menuOpen}\n            controls={this.menuId}\n            onDsClick={(event: CustomEvent<MouseEvent>) => {\n              this.toggle(event.detail.detail === 0);\n            }}\n          />\n        )}\n        {fields.length === 0 ? null : (\n          <ds-menu\n            id={this.menuId}\n            open={this.menuOpen}\n            anchorId={this.triggerId}\n            align=\"start\"\n            side=\"bottom\"\n            menuLabel={name}\n            selectionMode=\"none\"\n            initialFocusVisible={this.initialFocusVisible}\n            sections={tableSortMenuSections(this.columns, this.sort)}\n            onDsClose={() => this.close()}\n            onDsSelect={event => this.handleSelect(event.detail)}\n          />\n        )}\n      </Host>\n    );\n  }\n\n  private toggle(fromKeyboard = false): void {\n    if (this.menuOpen) this.close();\n    else this.open(fromKeyboard);\n  }\n\n  private open(fromKeyboard = false): void {\n    if (this.menuOpen) return;\n    this.initialFocusVisible = fromKeyboard;\n    this.menuOpen = true;\n  }\n\n  private close(): void {\n    this.menuOpen = false;\n  }\n\n  private handleSelect(item: MenuItemData): void {\n    const next = nextTableSortStateFromMenuItem(this.columns, this.sort, item);\n    if (tableSortStatesEqual(this.sort, next)) return;\n    this.dsSortChange.emit({ sort: next });\n  }\n}\n",
       "type": "registry:ui"
     },
     {