@ds-mo/ui 13.2.0 → 13.3.0

package/dist/components/{p-BbMJTilO.js.map → p-z6c6TMlA.js.map}

@@ -1 +1 @@
-{"version":3,"names":["mobileBarNavCss","MINIMUM_DIRECT_PRESS_MS","MobileBarNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","activeDestination","currentArea","id","icon","label","sheetNavExpanded","menuLabel","searchLabel","agentsLabel","inboxLabel","helpLabel","searchDot","agentsDot","inboxDot","pressedItemId","activePointerId","pressedAt","pressClearTimer","disconnectedCallback","clearPressedItem","clearPressTimer","clearTimeout","beginDirectPress","itemId","event","isPrimary","pointerType","button","pointerId","performance","now","target","currentTarget","setPointerCapture","finishDirectPress","remaining","Math","max","setTimeout","cancelDirectPress","pressHandlers","onPointerDown","onPointerUp","onPointerCancel","onLostPointerCapture","destinationConfig","dot","selectDestination","destination","shouldEmitMobileDestinationChange","dsDestinationChange","emit","requestAnimationFrame","focusDestination","el","querySelector","focus","preventScroll","renderDestination","item","selected","h","type","class","undefined","onClick","name","size","color","variant","render","tools","Host","key","String","dsSheetNavToggle","map"],"sources":["src/wc/components/MobileBarNav/MobileBarNav.css?tag=ds-mobile-bar-nav&encapsulation=scoped","src/wc/components/MobileBarNav/MobileBarNav.tsx"],"sourcesContent":["@import '../../utils/chrome-layout.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  background: var(--color-background-secondary);\n  color: var(--color-foreground-tertiary);\n  -webkit-user-select: none;\n  user-select: none;\n  -webkit-touch-callout: none;\n}\n\n.mobile-bar-nav {\n  justify-content: space-between;\n  min-width: 0;\n  padding-block-end: max(var(--ds-chrome-padding), env(safe-area-inset-bottom));\n  border-top: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  background: var(--color-background-secondary);\n  -webkit-user-select: none;\n  user-select: none;\n  -webkit-touch-callout: none;\n}\n\n.mobile-bar-nav__group {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-100);\n}\n\n.mobile-bar-nav__item {\n  appearance: none;\n  flex: 0 0 var(--dimension-size-500);\n  width: var(--dimension-size-500);\n  height: var(--dimension-size-500);\n  padding: var(--dimension-space-100);\n  border: 0;\n  border-radius: var(--dimension-radius-025);\n  background: transparent;\n  color: inherit;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: default;\n}\n\n.mobile-bar-nav__item--selected {\n  color: var(--color-foreground-primary);\n}\n\n/*\n * Safari can retain its native :active state after a direct touch. On coarse\n * touch-only pointers, the component-owned class provides one deterministic\n * press frame and clears it after release/cancel.\n */\n@media (hover: none) and (pointer: coarse) {\n  .mobile-bar-nav__item.ds-interaction-fill:active:not(:disabled)::after {\n    background: transparent;\n  }\n\n  .mobile-bar-nav__item--pressed.ds-interaction-fill::after,\n  .mobile-bar-nav__item--pressed.ds-interaction-fill:active:not(:disabled)::after {\n    background: var(--ds-interaction-pressed);\n  }\n}\n\n.mobile-bar-nav__divider {\n  flex: 0 0 var(--dimension-stroke-width-012);\n  width: var(--dimension-stroke-width-012);\n  height: var(--dimension-iconography-lg);\n  background: var(--color-border-tertiary);\n  pointer-events: none;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.mobile-bar-nav__icon {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dimension-iconography-lg);\n  height: var(--dimension-iconography-lg);\n}\n\n.mobile-bar-nav__dot {\n  position: absolute;\n  inset-block-start: calc(var(--dimension-space-025) * -1);\n  inset-inline-end: calc(var(--dimension-space-025) * -1);\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport {\n  shouldEmitMobileDestinationChange,\n  type MobileDestination,\n} from '../../shell/shell-responsive';\nimport type { PanelNavItem } from '../PanelNav/panel-nav-types';\nimport type { MobileBarNavDestinationDetail } from './mobile-bar-nav-types';\n\ninterface DestinationConfig {\n  id: MobileDestination;\n  icon: string;\n  label: string;\n  dot: boolean;\n}\n\nconst MINIMUM_DIRECT_PRESS_MS = 120;\n\n@Component({\n  tag: 'ds-mobile-bar-nav',\n  styleUrl: 'MobileBarNav.css',\n  scoped: true,\n})\nexport class MobileBarNav {\n  @Element() el!: HTMLElement;\n\n  @Prop() activeDestination: MobileDestination = 'area';\n  @Prop() currentArea: PanelNavItem = {\n    id: 'tracking',\n    icon: 'MapPage',\n    label: 'Tracking',\n  };\n  @Prop() sheetNavExpanded: boolean = false;\n  @Prop() menuLabel: string = 'Menu';\n  @Prop() searchLabel: string = 'Search';\n  @Prop() agentsLabel: string = 'Agents';\n  @Prop() inboxLabel: string = 'Inbox';\n  @Prop() helpLabel: string = 'Help & Support';\n  @Prop() searchDot: boolean = false;\n  @Prop() agentsDot: boolean = false;\n  @Prop() inboxDot: boolean = false;\n\n  @State() private pressedItemId: string | null = null;\n\n  @Event() dsSheetNavToggle!: EventEmitter<boolean>;\n  @Event() dsDestinationChange!: EventEmitter<MobileBarNavDestinationDetail>;\n\n  private activePointerId: number | null = null;\n  private pressedAt = 0;\n  private pressClearTimer: ReturnType<typeof setTimeout> | null = null;\n\n  disconnectedCallback() {\n    this.clearPressedItem();\n  }\n\n  private clearPressTimer() {\n    if (this.pressClearTimer === null) return;\n    clearTimeout(this.pressClearTimer);\n    this.pressClearTimer = null;\n  }\n\n  private clearPressedItem() {\n    this.clearPressTimer();\n    this.activePointerId = null;\n    this.pressedItemId = null;\n  }\n\n  private beginDirectPress(itemId: string, event: PointerEvent) {\n    if (!event.isPrimary || event.pointerType === 'mouse' || event.button !== 0) return;\n\n    this.clearPressTimer();\n    this.activePointerId = event.pointerId;\n    this.pressedAt = performance.now();\n    this.pressedItemId = itemId;\n\n    const target = event.currentTarget as HTMLElement;\n    try {\n      target.setPointerCapture(event.pointerId);\n    } catch {\n      // Pointer capture can fail if Safari has already cancelled the stream.\n    }\n  }\n\n  private finishDirectPress(event: PointerEvent) {\n    if (event.pointerId !== this.activePointerId) return;\n\n    this.activePointerId = null;\n    const remaining = Math.max(\n      0,\n      MINIMUM_DIRECT_PRESS_MS - (performance.now() - this.pressedAt)\n    );\n\n    this.clearPressTimer();\n    this.pressClearTimer = setTimeout(() => {\n      this.pressClearTimer = null;\n      this.pressedItemId = null;\n    }, remaining);\n  }\n\n  private cancelDirectPress(event: PointerEvent) {\n    if (event.pointerId !== this.activePointerId) return;\n    this.clearPressedItem();\n  }\n\n  private pressHandlers(itemId: string) {\n    return {\n      onPointerDown: (event: PointerEvent) => this.beginDirectPress(itemId, event),\n      onPointerUp: (event: PointerEvent) => this.finishDirectPress(event),\n      onPointerCancel: (event: PointerEvent) => this.cancelDirectPress(event),\n      onLostPointerCapture: (event: PointerEvent) => this.finishDirectPress(event),\n    };\n  }\n\n  private destinationConfig(): DestinationConfig[] {\n    const currentArea =\n      this.activeDestination === 'help'\n        ? {\n            id: 'help' as const,\n            icon: 'CircleQuestion',\n            label: this.helpLabel,\n            dot: false,\n          }\n        : {\n            id: 'area' as const,\n            icon: this.currentArea.icon || 'MapPage',\n            label: this.currentArea.label || 'Area',\n            dot: false,\n          };\n\n    return [\n      currentArea,\n      { id: 'search', icon: 'MagnifyingGlass', label: this.searchLabel, dot: this.searchDot },\n      { id: 'inbox', icon: 'Inbox', label: this.inboxLabel, dot: this.inboxDot },\n      { id: 'agents', icon: 'AI', label: this.agentsLabel, dot: this.agentsDot },\n    ];\n  }\n\n  private selectDestination(destination: MobileDestination) {\n    if (\n      !shouldEmitMobileDestinationChange(\n        this.activeDestination,\n        destination,\n        this.sheetNavExpanded\n      )\n    ) {\n      return;\n    }\n    this.dsDestinationChange.emit({ destination });\n    // Owners may replace the visible mobile stage (and transiently drop focus\n    // in WebKit) while handling the controlled destination change.\n    requestAnimationFrame(() => {\n      void this.focusDestination(destination);\n    });\n  }\n\n  @Method()\n  async focusDestination(destination: MobileDestination | 'sheet-nav') {\n    const target = this.el.querySelector<HTMLElement>(\n      `#${\n        destination === 'sheet-nav'\n          ? 'ds-mobile-sheet-nav-trigger'\n          : `ds-mobile-bar-${destination}-trigger`\n      }`\n    );\n    target?.focus({ preventScroll: true });\n  }\n\n  private renderDestination(item: DestinationConfig) {\n    const selected = !this.sheetNavExpanded && item.id === this.activeDestination;\n    return (\n      <button\n        id={`ds-mobile-bar-${item.id}-trigger`}\n        type=\"button\"\n        class={{\n          'mobile-bar-nav__item': true,\n          'mobile-bar-nav__item--selected': selected,\n          'mobile-bar-nav__item--pressed': this.pressedItemId === item.id,\n          'ds-focus-ring-inset': true,\n          'ds-interaction-fill': true,\n        }}\n        aria-label={item.label}\n        aria-current={selected ? 'page' : undefined}\n        onClick={() => this.selectDestination(item.id)}\n        {...this.pressHandlers(item.id)}\n      >\n        <span class=\"mobile-bar-nav__icon ds-interaction-fill__content\">\n          <ds-icon name={item.icon} size=\"lg\" color=\"inherit\" />\n          {item.dot && (\n            <ds-badge class=\"mobile-bar-nav__dot\" variant=\"dot\" label=\"\" aria-hidden=\"true\" />\n          )}\n        </span>\n      </button>\n    );\n  }\n\n  render() {\n    const [currentArea, ...tools] = this.destinationConfig();\n\n    return (\n      <Host>\n        <nav class=\"mobile-bar-nav ds-chrome-row ds-chrome-space--md\" aria-label=\"Primary\">\n          <div class=\"mobile-bar-nav__group mobile-bar-nav__group--context\">\n            <button\n              id=\"ds-mobile-sheet-nav-trigger\"\n              type=\"button\"\n              class={{\n                'mobile-bar-nav__item': true,\n                'mobile-bar-nav__item--selected': this.sheetNavExpanded,\n                'mobile-bar-nav__item--pressed':\n                  this.pressedItemId === 'sheet-nav',\n                'ds-focus-ring-inset': true,\n                'ds-interaction-fill': true,\n              }}\n              aria-label={this.menuLabel}\n              aria-expanded={String(this.sheetNavExpanded)}\n              aria-controls=\"ds-mobile-sheet-nav\"\n              onClick={() => this.dsSheetNavToggle.emit(!this.sheetNavExpanded)}\n              {...this.pressHandlers('sheet-nav')}\n            >\n              <span class=\"mobile-bar-nav__icon ds-interaction-fill__content\">\n                <ds-icon\n                  name={this.sheetNavExpanded ? 'Cross' : 'Hamburger'}\n                  size=\"lg\"\n                  color=\"inherit\"\n                />\n              </span>\n            </button>\n            <span class=\"mobile-bar-nav__divider\" aria-hidden=\"true\" />\n            {this.renderDestination(currentArea)}\n          </div>\n          <div class=\"mobile-bar-nav__group mobile-bar-nav__group--tools\">\n            {tools.map(item => this.renderDestination(item))}\n          </div>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["mobileBarNavCss","MINIMUM_DIRECT_PRESS_MS","MobileBarNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","activeDestination","currentArea","id","icon","label","sheetNavExpanded","menuLabel","searchLabel","agentsLabel","inboxLabel","helpLabel","searchDot","agentsDot","inboxDot","pressedItemId","activePointerId","pressedAt","pressClearTimer","disconnectedCallback","clearPressedItem","clearPressTimer","clearTimeout","beginDirectPress","itemId","event","isPrimary","pointerType","button","pointerId","performance","now","target","currentTarget","setPointerCapture","finishDirectPress","remaining","Math","max","setTimeout","cancelDirectPress","pressHandlers","onPointerDown","onPointerUp","onPointerCancel","onLostPointerCapture","destinationConfig","dot","selectDestination","destination","shouldEmitMobileDestinationChange","dsDestinationChange","emit","requestAnimationFrame","focusDestination","el","querySelector","focus","preventScroll","renderDestination","item","selected","h","type","class","undefined","onClick","name","size","color","variant","render","tools","Host","key","String","dsSheetNavToggle","map"],"sources":["src/wc/components/MobileBarNav/MobileBarNav.css?tag=ds-mobile-bar-nav&encapsulation=scoped","src/wc/components/MobileBarNav/MobileBarNav.tsx"],"sourcesContent":["@import '../../utils/chrome-layout.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  background: var(--color-background-secondary);\n  color: var(--color-foreground-tertiary);\n  -webkit-user-select: none;\n  user-select: none;\n  -webkit-touch-callout: none;\n}\n\n.mobile-bar-nav {\n  justify-content: space-between;\n  min-width: 0;\n  padding-block-end: max(var(--ds-chrome-padding), env(safe-area-inset-bottom));\n  border-top: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  background: var(--color-background-secondary);\n  -webkit-user-select: none;\n  user-select: none;\n  -webkit-touch-callout: none;\n}\n\n.mobile-bar-nav__group {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-100);\n}\n\n.mobile-bar-nav__item {\n  appearance: none;\n  flex: 0 0 var(--dimension-size-500);\n  width: var(--dimension-size-500);\n  height: var(--dimension-size-500);\n  padding: var(--dimension-space-100);\n  border: 0;\n  border-radius: var(--dimension-radius-025);\n  background: transparent;\n  color: inherit;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: default;\n}\n\n.mobile-bar-nav__item--selected {\n  color: var(--color-foreground-primary);\n}\n\n/*\n * Safari can retain its native :active state after a direct touch. On coarse\n * touch-only pointers, the component-owned class provides one deterministic\n * press frame and clears it after release/cancel.\n */\n@media (hover: none) and (pointer: coarse) {\n  .mobile-bar-nav__item.ds-interaction-fill:active:not(:disabled)::after {\n    background: transparent;\n  }\n\n  .mobile-bar-nav__item--pressed.ds-interaction-fill::after,\n  .mobile-bar-nav__item--pressed.ds-interaction-fill:active:not(:disabled)::after {\n    background: var(--ds-interaction-pressed);\n  }\n}\n\n.mobile-bar-nav__divider {\n  flex: 0 0 var(--dimension-stroke-width-012);\n  width: var(--dimension-stroke-width-012);\n  height: var(--dimension-iconography-lg);\n  background: var(--color-border-tertiary);\n  pointer-events: none;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.mobile-bar-nav__icon {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dimension-iconography-lg);\n  height: var(--dimension-iconography-lg);\n}\n\n.mobile-bar-nav__dot {\n  position: absolute;\n  inset-block-start: calc(var(--dimension-space-025) * -1);\n  inset-inline-end: calc(var(--dimension-space-025) * -1);\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport {\n  shouldEmitMobileDestinationChange,\n  type MobileDestination,\n} from '../../shell/shell-responsive';\nimport type { PanelNavItem } from '../PanelNav/panel-nav-types';\nimport type { MobileBarNavDestinationDetail } from './mobile-bar-nav-types';\n\ninterface DestinationConfig {\n  id: MobileDestination;\n  icon: string;\n  label: string;\n  dot: boolean;\n}\n\nconst MINIMUM_DIRECT_PRESS_MS = 120;\n\n@Component({\n  tag: 'ds-mobile-bar-nav',\n  styleUrl: 'MobileBarNav.css',\n  scoped: true,\n})\nexport class MobileBarNav {\n  @Element() el!: HTMLElement;\n\n  @Prop() activeDestination: MobileDestination = 'area';\n  @Prop() currentArea: PanelNavItem = {\n    id: 'tracking',\n    icon: 'MapPage',\n    label: 'Tracking',\n  };\n  @Prop() sheetNavExpanded: boolean = false;\n  @Prop() menuLabel: string = 'Menu';\n  @Prop() searchLabel: string = 'Search';\n  @Prop() agentsLabel: string = 'Agents';\n  @Prop() inboxLabel: string = 'Inbox';\n  @Prop() helpLabel: string = 'Help & Support';\n  @Prop() searchDot: boolean = false;\n  @Prop() agentsDot: boolean = false;\n  @Prop() inboxDot: boolean = false;\n\n  @State() private pressedItemId: string | null = null;\n\n  @Event() dsSheetNavToggle!: EventEmitter<boolean>;\n  @Event() dsDestinationChange!: EventEmitter<MobileBarNavDestinationDetail>;\n\n  private activePointerId: number | null = null;\n  private pressedAt = 0;\n  private pressClearTimer: ReturnType<typeof setTimeout> | null = null;\n\n  disconnectedCallback() {\n    this.clearPressedItem();\n  }\n\n  private clearPressTimer() {\n    if (this.pressClearTimer === null) return;\n    clearTimeout(this.pressClearTimer);\n    this.pressClearTimer = null;\n  }\n\n  private clearPressedItem() {\n    this.clearPressTimer();\n    this.activePointerId = null;\n    this.pressedItemId = null;\n  }\n\n  private beginDirectPress(itemId: string, event: PointerEvent) {\n    if (!event.isPrimary || event.pointerType === 'mouse' || event.button !== 0) return;\n\n    this.clearPressTimer();\n    this.activePointerId = event.pointerId;\n    this.pressedAt = performance.now();\n    this.pressedItemId = itemId;\n\n    const target = event.currentTarget as HTMLElement;\n    try {\n      target.setPointerCapture(event.pointerId);\n    } catch {\n      // Pointer capture can fail if Safari has already cancelled the stream.\n    }\n  }\n\n  private finishDirectPress(event: PointerEvent) {\n    if (event.pointerId !== this.activePointerId) return;\n\n    this.activePointerId = null;\n    const remaining = Math.max(\n      0,\n      MINIMUM_DIRECT_PRESS_MS - (performance.now() - this.pressedAt)\n    );\n\n    this.clearPressTimer();\n    this.pressClearTimer = setTimeout(() => {\n      this.pressClearTimer = null;\n      this.pressedItemId = null;\n    }, remaining);\n  }\n\n  private cancelDirectPress(event: PointerEvent) {\n    if (event.pointerId !== this.activePointerId) return;\n    this.clearPressedItem();\n  }\n\n  private pressHandlers(itemId: string) {\n    return {\n      onPointerDown: (event: PointerEvent) => this.beginDirectPress(itemId, event),\n      onPointerUp: (event: PointerEvent) => this.finishDirectPress(event),\n      onPointerCancel: (event: PointerEvent) => this.cancelDirectPress(event),\n      onLostPointerCapture: (event: PointerEvent) => this.finishDirectPress(event),\n    };\n  }\n\n  private destinationConfig(): DestinationConfig[] {\n    const currentArea =\n      this.activeDestination === 'help'\n        ? {\n            id: 'help' as const,\n            icon: 'CircleQuestion',\n            label: this.helpLabel,\n            dot: false,\n          }\n        : {\n            id: 'area' as const,\n            icon: this.currentArea.icon || 'MapPage',\n            label: this.currentArea.label || 'Area',\n            dot: false,\n          };\n\n    return [\n      currentArea,\n      { id: 'search', icon: 'MagnifyingGlass', label: this.searchLabel, dot: this.searchDot },\n      { id: 'inbox', icon: 'Inbox', label: this.inboxLabel, dot: this.inboxDot },\n      { id: 'agents', icon: 'AI', label: this.agentsLabel, dot: this.agentsDot },\n    ];\n  }\n\n  private selectDestination(destination: MobileDestination) {\n    if (\n      !shouldEmitMobileDestinationChange(\n        this.activeDestination,\n        destination,\n        this.sheetNavExpanded\n      )\n    ) {\n      return;\n    }\n    this.dsDestinationChange.emit({ destination });\n    // Owners may replace the visible mobile stage (and transiently drop focus\n    // in WebKit) while handling the controlled destination change.\n    requestAnimationFrame(() => {\n      void this.focusDestination(destination);\n    });\n  }\n\n  @Method()\n  async focusDestination(destination: MobileDestination | 'sheet-nav') {\n    const target = this.el.querySelector<HTMLElement>(\n      `#${\n        destination === 'sheet-nav'\n          ? 'ds-mobile-sheet-nav-trigger'\n          : `ds-mobile-bar-${destination}-trigger`\n      }`\n    );\n    target?.focus({ preventScroll: true });\n  }\n\n  private renderDestination(item: DestinationConfig) {\n    const selected = !this.sheetNavExpanded && item.id === this.activeDestination;\n    return (\n      <button\n        id={`ds-mobile-bar-${item.id}-trigger`}\n        type=\"button\"\n        class={{\n          'mobile-bar-nav__item': true,\n          'mobile-bar-nav__item--selected': selected,\n          'mobile-bar-nav__item--pressed': this.pressedItemId === item.id,\n          'ds-focus-ring-inset': true,\n          'ds-interaction-fill': true,\n        }}\n        aria-label={item.label}\n        aria-current={selected ? 'page' : undefined}\n        onClick={() => this.selectDestination(item.id)}\n        {...this.pressHandlers(item.id)}\n      >\n        <span class=\"mobile-bar-nav__icon ds-interaction-fill__content\">\n          <ds-icon name={item.icon} size=\"lg\" color=\"inherit\" />\n          {item.dot && (\n            <ds-badge class=\"mobile-bar-nav__dot\" variant=\"dot\" label=\"\" aria-hidden=\"true\" />\n          )}\n        </span>\n      </button>\n    );\n  }\n\n  render() {\n    const [currentArea, ...tools] = this.destinationConfig();\n\n    return (\n      <Host>\n        <nav class=\"mobile-bar-nav ds-chrome-row ds-chrome-space--md\" aria-label=\"Primary\">\n          <div class=\"mobile-bar-nav__group mobile-bar-nav__group--context\">\n            <button\n              id=\"ds-mobile-sheet-nav-trigger\"\n              type=\"button\"\n              class={{\n                'mobile-bar-nav__item': true,\n                'mobile-bar-nav__item--selected': this.sheetNavExpanded,\n                'mobile-bar-nav__item--pressed':\n                  this.pressedItemId === 'sheet-nav',\n                'ds-focus-ring-inset': true,\n                'ds-interaction-fill': true,\n              }}\n              aria-label={this.menuLabel}\n              aria-expanded={String(this.sheetNavExpanded)}\n              aria-controls=\"ds-mobile-sheet-nav\"\n              onClick={() => this.dsSheetNavToggle.emit(!this.sheetNavExpanded)}\n              {...this.pressHandlers('sheet-nav')}\n            >\n              <span class=\"mobile-bar-nav__icon ds-interaction-fill__content\">\n                <ds-icon\n                  name={this.sheetNavExpanded ? 'Cross' : 'Hamburger'}\n                  size=\"lg\"\n                  color=\"inherit\"\n                />\n              </span>\n            </button>\n            <span class=\"mobile-bar-nav__divider\" aria-hidden=\"true\" />\n            {this.renderDestination(currentArea)}\n          </div>\n          <div class=\"mobile-bar-nav__group mobile-bar-nav__group--tools\">\n            {tools.map(item => this.renderDestination(item))}\n          </div>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/docs/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-07-31T02:45:23",
+  "timestamp": "2026-07-31T03:23:14",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.5",

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

@@ -277,7 +277,7 @@
   "files": [
     {
       "path": "src/wc/components/Badge/Badge.css",
-      "content": "@import '../../utils/visually-hidden.css';\n\n:host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  vertical-align: middle;\n\n  --_badge-bg: var(--color-background-bold-brand);\n  --_badge-fg: var(--color-foreground-on-bold-background-primary);\n  --_badge-ring: var(--color-background-secondary);\n  --_badge-ring-width: var(--dimension-stroke-width-018);\n}\n\n.badge__mark {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  color: var(--_badge-fg);\n  background: var(--_badge-bg);\n  box-shadow: 0 0 0 var(--_badge-ring-width) var(--_badge-ring);\n  white-space: nowrap;\n}\n\n:host(.badge--no-ring) {\n  --_badge-ring-width: 0;\n}\n\n\n:host(.badge--dot) .badge__mark {\n  width: var(--dimension-size-075);\n  height: var(--dimension-size-075);\n  border-radius: var(--dimension-radius-half);\n}\n\n:host(.badge--counter) .badge__mark {\n  width: auto;\n  min-width: var(--dimension-size-150);\n  height: var(--dimension-size-150);\n  padding: 0 var(--dimension-space-025);\n  border-radius: var(--dimension-radius-half);\n}\n\n/* Shell gradient ring — base fill + wash donut (option 3). */\n:host(.badge--on-gradient-background) .badge__mark {\n  position: relative;\n  z-index: 0;\n  box-shadow: none;\n  isolation: isolate;\n}\n\n:host(.badge--on-gradient-background) .badge__mark::before,\n:host(.badge--on-gradient-background) .badge__mark::after {\n  content: '';\n  position: absolute;\n  inset: calc(-1 * var(--_badge-ring-width));\n  border-radius: inherit;\n  box-sizing: border-box;\n  padding: var(--_badge-ring-width);\n  pointer-events: none;\n  /* stylelint-disable color-no-hex -- mask luminance stops for ring cutout, not theme colors */\n  -webkit-mask:\n    linear-gradient(#fff 0 0) content-box,\n    linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask:\n    linear-gradient(#fff 0 0) content-box,\n    linear-gradient(#fff 0 0);\n  /* stylelint-enable color-no-hex */\n  mask-composite: exclude;\n}\n\n:host(.badge--on-gradient-background) .badge__mark::before {\n  z-index: -2;\n  background-color: var(--_badge-ring);\n}\n\n:host(.badge--on-gradient-background) .badge__mark::after {\n  z-index: -1;\n  background-image: var(--ds-shell-gradient-image, none);\n  background-size: var(--ds-shell-gradient-size, auto);\n  background-position: 0 0;\n  background-repeat: no-repeat;\n  background-attachment: fixed;\n  opacity: var(--ds-shell-gradient-opacity, 1);\n}\n",
+      "content": "@import '../../utils/visually-hidden.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  vertical-align: middle;\n\n  --_badge-bg: var(--color-background-bold-brand);\n  --_badge-fg: var(--color-foreground-on-bold-background-primary);\n  --_badge-ring: var(--color-background-secondary);\n  --_badge-ring-width: var(--dimension-stroke-width-018);\n}\n\n.badge__mark {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  color: var(--_badge-fg);\n  background: var(--_badge-bg);\n  box-shadow: 0 0 0 var(--_badge-ring-width) var(--_badge-ring);\n  white-space: nowrap;\n}\n\n:host(.badge--no-ring) {\n  --_badge-ring-width: 0;\n}\n\n\n:host(.badge--dot) .badge__mark {\n  width: var(--dimension-size-075);\n  height: var(--dimension-size-075);\n  border-radius: var(--dimension-radius-half);\n}\n\n:host(.badge--counter) .badge__mark {\n  width: auto;\n  min-width: var(--dimension-size-150);\n  height: var(--dimension-size-150);\n  padding: 0 var(--dimension-space-025);\n  border-radius: var(--dimension-radius-half);\n}\n\n/* Shell gradient ring — base fill + wash donut (option 3). */\n:host(.badge--on-gradient-background) .badge__mark {\n  position: relative;\n  z-index: 0;\n  box-shadow: none;\n  isolation: isolate;\n}\n\n:host(.badge--on-gradient-background) .badge__mark::before,\n:host(.badge--on-gradient-background) .badge__mark::after {\n  content: '';\n  position: absolute;\n  inset: calc(-1 * var(--_badge-ring-width));\n  border-radius: inherit;\n  box-sizing: border-box;\n  padding: var(--_badge-ring-width);\n  pointer-events: none;\n  /* stylelint-disable color-no-hex -- mask luminance stops for ring cutout, not theme colors */\n  -webkit-mask:\n    linear-gradient(#fff 0 0) content-box,\n    linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask:\n    linear-gradient(#fff 0 0) content-box,\n    linear-gradient(#fff 0 0);\n  /* stylelint-enable color-no-hex */\n  mask-composite: exclude;\n}\n\n:host(.badge--on-gradient-background) .badge__mark::before {\n  z-index: -2;\n  background-color: var(--_badge-ring);\n}\n\n:host(.badge--on-gradient-background) .badge__mark::after {\n  z-index: -1;\n  background-image: var(--ds-shell-gradient-image, none);\n  background-size: var(--ds-shell-gradient-size, auto);\n  background-position: 0 0;\n  background-repeat: no-repeat;\n  background-attachment: fixed;\n  opacity: var(--ds-shell-gradient-opacity, 1);\n}\n\n@media (forced-colors: active) {\n  .badge__mark {\n    color: var(--ds-forced-color-on-selected);\n    background: var(--ds-forced-color-selected);\n    box-shadow: none;\n    outline: var(--_badge-ring-width) solid var(--ds-forced-color-surface);\n  }\n\n  :host(.badge--on-gradient-background) .badge__mark::before,\n  :host(.badge--on-gradient-background) .badge__mark::after {\n    display: none;\n  }\n}\n",
       "type": "registry:ui"
     },
     {

package/dist/mcp-data/registry/card-data-viz.json

@@ -229,7 +229,7 @@
   "files": [
     {
       "path": "src/wc/components/CardDataViz/CardDataViz.css",
-      "content": "@import '../../utils/chrome-layout.css';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: var(--_card-data-viz-width);\n  min-height: var(--_card-data-viz-min-height);\n  max-width: 100%;\n  overflow: hidden;\n  border: none;\n  border-radius: var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n}\n\n.card-data-viz__header {\n  flex-shrink: 0;\n  justify-content: space-between;\n  height: var(--dimension-size-600);\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  background-color: var(--color-background-secondary);\n}\n\nds-text.card-data-viz__title {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  box-sizing: border-box;\n  min-width: 0;\n  padding: calc(var(--dimension-space-075) + var(--dimension-space-025));\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.card-data-viz__actions {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: var(--dimension-space-100);\n}\n\n.card-data-viz__actions:empty {\n  display: none;\n}\n\n.card-data-viz__body,\n.card-data-viz__layout {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  box-sizing: border-box;\n  min-height: 0;\n}\n\n.card-data-viz__body {\n  border-radius: 0 0 var(--dimension-radius-025) var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n}\n\n.card-data-viz__layout {\n  height: 100%;\n  gap: var(--dimension-space-200);\n}\n\n.card-data-viz__chart {\n  display: grid;\n  flex: 1 1 auto;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 0;\n  padding: var(--dimension-space-400) var(--dimension-space-400) 0\n    var(--dimension-space-400);\n}\n\n.card-data-viz__chart > * {\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n  max-width: 100%;\n  max-height: 100%;\n}\n\n.card-data-viz__chart--fill > * {\n  height: 100%;\n  min-height: 0;\n  max-height: 100%;\n}\n\n.card-data-viz__legend {\n  flex: 0 0 auto;\n  box-sizing: border-box;\n  padding: 0 var(--dimension-space-100) var(--dimension-space-100)\n    var(--dimension-space-100);\n}\n",
+      "content": "@import '../../utils/chrome-layout.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: var(--_card-data-viz-width);\n  min-height: var(--_card-data-viz-min-height);\n  max-width: 100%;\n  overflow: hidden;\n  border: none;\n  border-radius: var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n}\n\n.card-data-viz__header {\n  flex-shrink: 0;\n  justify-content: space-between;\n  height: var(--dimension-size-600);\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  background-color: var(--color-background-secondary);\n}\n\nds-text.card-data-viz__title {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  box-sizing: border-box;\n  min-width: 0;\n  padding: calc(var(--dimension-space-075) + var(--dimension-space-025));\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.card-data-viz__actions {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: var(--dimension-space-100);\n}\n\n.card-data-viz__actions:empty {\n  display: none;\n}\n\n.card-data-viz__body,\n.card-data-viz__layout {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  box-sizing: border-box;\n  min-height: 0;\n}\n\n.card-data-viz__body {\n  border-radius: 0 0 var(--dimension-radius-025) var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n}\n\n.card-data-viz__layout {\n  height: 100%;\n  gap: var(--dimension-space-200);\n}\n\n.card-data-viz__chart {\n  display: grid;\n  flex: 1 1 auto;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 0;\n  padding: var(--dimension-space-400) var(--dimension-space-400) 0\n    var(--dimension-space-400);\n}\n\n.card-data-viz__chart > * {\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n  max-width: 100%;\n  max-height: 100%;\n}\n\n.card-data-viz__chart--fill > * {\n  height: 100%;\n  min-height: 0;\n  max-height: 100%;\n}\n\n.card-data-viz__legend {\n  flex: 0 0 auto;\n  box-sizing: border-box;\n  padding: 0 var(--dimension-space-100) var(--dimension-space-100)\n    var(--dimension-space-100);\n}\n\n@media (forced-colors: active) {\n  :host {\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",
       "type": "registry:ui"
     },
     {

package/dist/mcp-data/registry/chart-bar.json

@@ -233,7 +233,7 @@
   "files": [
     {
       "path": "src/wc/components/ChartBar/ChartBar.css",
-      "content": ":host {\n  display: inline-block;\n  max-width: 100%;\n  font-family: var(--typography-font-family);\n}\n\n.chart-bar__svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.chart-bar__gridline {\n  stroke: var(--color-border-tertiary);\n  stroke-width: var(--dimension-stroke-width-012);\n  vector-effect: non-scaling-stroke;\n}\n\n/* Matches ds-text text-caption regular (SVG cannot host ds-text). */\n.chart-bar__axis-label {\n  fill: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-xs);\n  font-weight: var(--typography-weight-medium);\n  letter-spacing: var(--typography-letterspacing-positive);\n  text-transform: uppercase;\n}\n\n.chart-bar__bar--rounded {\n  rx: var(--dimension-radius-025);\n}\n\n.chart-bar__segment-shape--rounded {\n  rx: var(--dimension-radius-025);\n}\n\n.chart-bar__segment-separator {\n  stroke: var(--color-background-primary);\n  stroke-width: var(--dimension-stroke-width-012);\n  stroke-linecap: butt;\n  vector-effect: non-scaling-stroke;\n}\n",
+      "content": "@import '../../utils/forced-colors.css';\n\n:host {\n  display: inline-block;\n  max-width: 100%;\n  font-family: var(--typography-font-family);\n}\n\n.chart-bar__svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.chart-bar__gridline {\n  stroke: var(--color-border-tertiary);\n  stroke-width: var(--dimension-stroke-width-012);\n  vector-effect: non-scaling-stroke;\n}\n\n/* Matches ds-text text-caption regular (SVG cannot host ds-text). */\n.chart-bar__axis-label {\n  fill: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-xs);\n  font-weight: var(--typography-weight-medium);\n  letter-spacing: var(--typography-letterspacing-positive);\n  text-transform: uppercase;\n}\n\n.chart-bar__bar--rounded {\n  rx: var(--dimension-radius-025);\n}\n\n.chart-bar__segment-shape--rounded {\n  rx: var(--dimension-radius-025);\n}\n\n.chart-bar__segment-separator {\n  stroke: var(--color-background-primary);\n  stroke-width: var(--dimension-stroke-width-012);\n  stroke-linecap: butt;\n  vector-effect: non-scaling-stroke;\n}\n\n@media (forced-colors: active) {\n  .chart-bar__bar,\n  .chart-bar__segment-shape,\n  .chart-bar__segment-square-base {\n    forced-color-adjust: none;\n  }\n\n  .chart-bar__segment-separator {\n    stroke: var(--ds-forced-color-surface);\n  }\n}\n",
       "type": "registry:ui"
     },
     {

package/dist/mcp-data/registry/chart-donut.json

@@ -332,7 +332,7 @@
   "files": [
     {
       "path": "src/wc/components/ChartDonut/ChartDonut.css",
-      "content": ":host {\n  display: inline-block;\n  font-family: var(--typography-font-family);\n  user-select: none;\n}\n\n:host(.chart-donut--fill) {\n  display: block;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n}\n\n.chart-donut__wrapper {\n  position: relative;\n  overflow: visible;\n}\n\n:host(.chart-donut--fill) .chart-donut__wrapper {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.chart-donut__svg path {\n  cursor: default;\n  transition: opacity var(--effect-motion-short-2);\n}\n\n.chart-donut__slice--dimmed {\n  opacity: var(--effect-opacity-medium);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .chart-donut__svg path {\n    transition: none;\n  }\n}\n\n.chart-donut__svg path:focus-visible {\n  outline: none;\n  stroke: var(--color-interaction-focus);\n  stroke-width: var(--dimension-stroke-width-025);\n  vector-effect: non-scaling-stroke;\n}\n\n/* Matches ds-text text-title-large + emphasis (SVG cannot host ds-text). */\n.chart-donut__center-value {\n  fill: var(--color-foreground-primary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-xl);\n  line-height: var(--typography-lineheight-xl);\n  font-weight: var(--typography-weight-semibold);\n  letter-spacing: var(--typography-letterspacing-negative-double);\n  cursor: default;\n  pointer-events: none;\n}\n\n/* Matches ds-text text-body-medium regular. */\n.chart-donut__center-caption {\n  fill: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n  font-weight: var(--typography-weight-regular);\n  letter-spacing: var(--typography-letterspacing-negative-half);\n  cursor: default;\n  pointer-events: none;\n}\n",
+      "content": "@import '../../utils/forced-colors.css';\n\n:host {\n  display: inline-block;\n  font-family: var(--typography-font-family);\n  user-select: none;\n}\n\n:host(.chart-donut--fill) {\n  display: block;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n}\n\n.chart-donut__wrapper {\n  position: relative;\n  overflow: visible;\n}\n\n:host(.chart-donut--fill) .chart-donut__wrapper {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.chart-donut__svg path {\n  cursor: default;\n  transition: opacity var(--effect-motion-short-2);\n}\n\n.chart-donut__slice--dimmed {\n  opacity: var(--effect-opacity-medium);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .chart-donut__svg path {\n    transition: none;\n  }\n}\n\n.chart-donut__svg path:focus-visible {\n  outline: none;\n  stroke: var(--color-interaction-focus);\n  stroke-width: var(--dimension-stroke-width-025);\n  vector-effect: non-scaling-stroke;\n}\n\n/* Matches ds-text text-title-large + emphasis (SVG cannot host ds-text). */\n.chart-donut__center-value {\n  fill: var(--color-foreground-primary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-xl);\n  line-height: var(--typography-lineheight-xl);\n  font-weight: var(--typography-weight-semibold);\n  letter-spacing: var(--typography-letterspacing-negative-double);\n  cursor: default;\n  pointer-events: none;\n}\n\n/* Matches ds-text text-body-medium regular. */\n.chart-donut__center-caption {\n  fill: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n  font-weight: var(--typography-weight-regular);\n  letter-spacing: var(--typography-letterspacing-negative-half);\n  cursor: default;\n  pointer-events: none;\n}\n\n@media (forced-colors: active) {\n  .chart-donut__svg path {\n    forced-color-adjust: none;\n  }\n\n  .chart-donut__svg path:focus-visible {\n    stroke: var(--ds-forced-color-selected);\n  }\n}\n",
       "type": "registry:ui"
     },
     {

package/dist/mcp-data/registry/chart-legend.json

@@ -291,7 +291,7 @@
   "files": [
     {
       "path": "src/wc/components/ChartLegend/ChartLegend.css",
-      "content": "@import '../../utils/control-density.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n\n:host {\n  display: block;\n  font-family: var(--typography-font-family);\n  user-select: none;\n}\n\n.chart-legend__list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n/* Non-visual wrapper — the real box is .chart-legend__item so optional highlight/link\n   affordances cover the whole row while children align to the shared grid columns. */\n.chart-legend__list-item {\n  display: contents;\n}\n\n:host(.chart-legend--vertical) .chart-legend__list {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr) var(--dimension-size-600);\n  column-gap: var(--dimension-space-075);\n  row-gap: var(--dimension-space-050);\n}\n\n:host(.chart-legend--vertical.chart-legend--show-percentage) .chart-legend__list {\n  grid-template-columns: auto minmax(0, 1fr) var(--dimension-size-600) var(--dimension-size-800);\n}\n\n:host(.chart-legend--vertical) .chart-legend__item {\n  grid-column: 1 / -1;\n  display: grid;\n  grid-template-columns: subgrid;\n}\n\n:host(.chart-legend--horizontal) .chart-legend__list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--dimension-space-200);\n}\n\n:host(.chart-legend--horizontal) .chart-legend__item {\n  display: flex;\n  gap: var(--dimension-space-100);\n}\n\n/*\n * Density: md control recipe (height / pad / radius / label inset).\n * Hover/press: `.ds-interaction-fill` (token overlay on ::after).\n */\n.chart-legend__item {\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  align-items: center;\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  text-decoration: none;\n  color: inherit;\n  transition: opacity var(--effect-motion-short-2);\n}\n\n.chart-legend__item--dimmed {\n  opacity: var(--effect-opacity-medium);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .chart-legend__item {\n    transition: none;\n  }\n}\n\n.chart-legend__item--interactive {\n  cursor: pointer;\n}\n\n/* Raise row content above interaction fills (positive z-index on util layers). */\n.chart-legend__item > * {\n  position: relative;\n  z-index: 2;\n}\n\n.chart-legend__swatch-box {\n  width: var(--dimension-size-250);\n  height: var(--dimension-size-250);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.chart-legend__swatch {\n  width: var(--dimension-space-150);\n  height: var(--dimension-space-150);\n  border-radius: var(--dimension-radius-025);\n  flex-shrink: 0;\n}\n\n.chart-legend__label {\n  min-width: 0;\n}\n\n.chart-legend__percentage {\n  width: 100%;\n  min-width: 0;\n  text-align: right;\n}\n\n.chart-legend__value {\n  width: 100%;\n  text-align: right;\n  min-width: 0;\n}\n",
+      "content": "@import '../../utils/control-density.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  display: block;\n  font-family: var(--typography-font-family);\n  user-select: none;\n}\n\n.chart-legend__list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n/* Non-visual wrapper — the real box is .chart-legend__item so optional highlight/link\n   affordances cover the whole row while children align to the shared grid columns. */\n.chart-legend__list-item {\n  display: contents;\n}\n\n:host(.chart-legend--vertical) .chart-legend__list {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr) var(--dimension-size-600);\n  column-gap: var(--dimension-space-075);\n  row-gap: var(--dimension-space-050);\n}\n\n:host(.chart-legend--vertical.chart-legend--show-percentage) .chart-legend__list {\n  grid-template-columns: auto minmax(0, 1fr) var(--dimension-size-600) var(--dimension-size-800);\n}\n\n:host(.chart-legend--vertical) .chart-legend__item {\n  grid-column: 1 / -1;\n  display: grid;\n  grid-template-columns: subgrid;\n}\n\n:host(.chart-legend--horizontal) .chart-legend__list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--dimension-space-200);\n}\n\n:host(.chart-legend--horizontal) .chart-legend__item {\n  display: flex;\n  gap: var(--dimension-space-100);\n}\n\n/*\n * Density: md control recipe (height / pad / radius / label inset).\n * Hover/press: `.ds-interaction-fill` (token overlay on ::after).\n */\n.chart-legend__item {\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  align-items: center;\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  text-decoration: none;\n  color: inherit;\n  transition: opacity var(--effect-motion-short-2);\n}\n\n.chart-legend__item--dimmed {\n  opacity: var(--effect-opacity-medium);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .chart-legend__item {\n    transition: none;\n  }\n}\n\n.chart-legend__item--interactive {\n  cursor: pointer;\n}\n\n/* Raise row content above interaction fills (positive z-index on util layers). */\n.chart-legend__item > * {\n  position: relative;\n  z-index: 2;\n}\n\n.chart-legend__swatch-box {\n  width: var(--dimension-size-250);\n  height: var(--dimension-size-250);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.chart-legend__swatch {\n  width: var(--dimension-space-150);\n  height: var(--dimension-space-150);\n  border-radius: var(--dimension-radius-025);\n  flex-shrink: 0;\n}\n\n.chart-legend__label {\n  min-width: 0;\n}\n\n.chart-legend__percentage {\n  width: 100%;\n  min-width: 0;\n  text-align: right;\n}\n\n.chart-legend__value {\n  width: 100%;\n  text-align: right;\n  min-width: 0;\n}\n\n@media (forced-colors: active) {\n  .chart-legend__swatch {\n    forced-color-adjust: none;\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n  }\n}\n",
       "type": "registry:ui"
     },
     {

package/dist/mcp-data/registry/chart-line.json

@@ -211,7 +211,7 @@
   "files": [
     {
       "path": "src/wc/components/ChartLine/ChartLine.css",
-      "content": ":host {\n  display: inline-block;\n  max-width: 100%;\n  font-family: var(--typography-font-family);\n}\n\n.chart-line__svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.chart-line__gridline {\n  stroke: var(--color-border-tertiary);\n  stroke-width: var(--dimension-stroke-width-012);\n  vector-effect: non-scaling-stroke;\n}\n\n/* Matches ds-text text-caption regular (SVG cannot host ds-text). */\n.chart-line__axis-label {\n  fill: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-xs);\n  font-weight: var(--typography-weight-medium);\n  letter-spacing: var(--typography-letterspacing-positive);\n  text-transform: uppercase;\n}\n\n.chart-line__path {\n  fill: none;\n  stroke-width: var(--dimension-stroke-width-025);\n  vector-effect: non-scaling-stroke;\n}\n\n.chart-line__point {\n  stroke: var(--color-background-primary);\n  stroke-width: var(--dimension-stroke-width-018);\n  r: calc(var(--dimension-size-075) / 2);\n  vector-effect: non-scaling-stroke;\n}\n",
+      "content": "@import '../../utils/forced-colors.css';\n\n:host {\n  display: inline-block;\n  max-width: 100%;\n  font-family: var(--typography-font-family);\n}\n\n.chart-line__svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.chart-line__gridline {\n  stroke: var(--color-border-tertiary);\n  stroke-width: var(--dimension-stroke-width-012);\n  vector-effect: non-scaling-stroke;\n}\n\n/* Matches ds-text text-caption regular (SVG cannot host ds-text). */\n.chart-line__axis-label {\n  fill: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-xs);\n  font-weight: var(--typography-weight-medium);\n  letter-spacing: var(--typography-letterspacing-positive);\n  text-transform: uppercase;\n}\n\n.chart-line__path {\n  fill: none;\n  stroke-width: var(--dimension-stroke-width-025);\n  vector-effect: non-scaling-stroke;\n}\n\n.chart-line__point {\n  stroke: var(--color-background-primary);\n  stroke-width: var(--dimension-stroke-width-018);\n  r: calc(var(--dimension-size-075) / 2);\n  vector-effect: non-scaling-stroke;\n}\n\n@media (forced-colors: active) {\n  .chart-line__path,\n  .chart-line__point {\n    forced-color-adjust: none;\n  }\n\n  .chart-line__point {\n    stroke: var(--ds-forced-color-surface);\n  }\n}\n",
       "type": "registry:ui"
     },
     {

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

@@ -349,7 +349,7 @@
   "files": [
     {
       "path": "src/wc/components/Checkbox/Checkbox.css",
-      "content": "@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n\n:host {\n  display: inline-flex;\n  align-items: center;\n  box-sizing: border-box;\n  gap: var(--ds-control-gap);\n  height: var(--ds-control-height);\n  padding: 0 var(--ds-control-padding-inline);\n  border-radius: var(--ds-control-radius);\n  cursor: default;\n  user-select: none;\n}\n\n:host(.checkbox--presentation) {\n  width: var(--ds-control-icon);\n  height: var(--ds-control-icon);\n  padding: 0;\n  gap: 0;\n  pointer-events: none;\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity). */\n\n:host(.checkbox--lg) {\n  --_checkbox-box: var(--dimension-iconography-md);\n  --_checkbox-stroke: var(--dimension-stroke-width-018);\n}\n\n:host(.checkbox--md) {\n  --_checkbox-box: var(--dimension-iconography-sm);\n  --_checkbox-stroke: var(--dimension-stroke-width-015);\n}\n\n:host(.checkbox--sm) {\n  --_checkbox-box: var(--dimension-iconography-xs);\n  --_checkbox-stroke: var(--dimension-stroke-width-012);\n}\n\n:host(.checkbox--xs) {\n  --_checkbox-box: var(--dimension-size-100);\n  --_checkbox-stroke: calc(var(--dimension-stroke-width-base) * 3 / 32);\n}\n\n.checkbox__placement {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--ds-control-icon);\n  height: var(--ds-control-icon);\n}\n\n.box {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--_checkbox-box);\n  height: var(--_checkbox-box);\n  border: 0;\n  border-radius: var(--dimension-radius-025);\n  box-shadow: inset 0 0 0 var(--_checkbox-stroke) var(--color-foreground-tertiary);\n  transition:\n    background-color var(--effect-motion-short-2),\n    box-shadow var(--effect-motion-short-2);\n}\n\n.box--marked {\n  color: var(--color-foreground-on-bold-background-primary);\n  background-color: var(--color-background-bold-brand);\n  box-shadow: none;\n}\n\n.checkbox__mark {\n  width: 100%;\n  height: 100%;\n  flex-shrink: 0;\n  stroke: currentColor;\n  stroke-width: var(--_checkbox-stroke);\n  stroke-linecap: butt;\n  stroke-linejoin: round;\n}\n\n.checkbox__mark--checked {\n  transform: translateY(-0.5px);\n}\n\n.checkbox__label {\n  flex: 1;\n  min-width: 0;\n  padding: 0 var(--ds-control-label-inset);\n}\n",
+      "content": "@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  display: inline-flex;\n  align-items: center;\n  box-sizing: border-box;\n  gap: var(--ds-control-gap);\n  height: var(--ds-control-height);\n  padding: 0 var(--ds-control-padding-inline);\n  border-radius: var(--ds-control-radius);\n  cursor: default;\n  user-select: none;\n}\n\n:host(.checkbox--presentation) {\n  width: var(--ds-control-icon);\n  height: var(--ds-control-icon);\n  padding: 0;\n  gap: 0;\n  pointer-events: none;\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity). */\n\n:host(.checkbox--lg) {\n  --_checkbox-box: var(--dimension-iconography-md);\n  --_checkbox-stroke: var(--dimension-stroke-width-018);\n}\n\n:host(.checkbox--md) {\n  --_checkbox-box: var(--dimension-iconography-sm);\n  --_checkbox-stroke: var(--dimension-stroke-width-015);\n}\n\n:host(.checkbox--sm) {\n  --_checkbox-box: var(--dimension-iconography-xs);\n  --_checkbox-stroke: var(--dimension-stroke-width-012);\n}\n\n:host(.checkbox--xs) {\n  --_checkbox-box: var(--dimension-size-100);\n  --_checkbox-stroke: calc(var(--dimension-stroke-width-base) * 3 / 32);\n}\n\n.checkbox__placement {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--ds-control-icon);\n  height: var(--ds-control-icon);\n}\n\n.box {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--_checkbox-box);\n  height: var(--_checkbox-box);\n  border: 0;\n  border-radius: var(--dimension-radius-025);\n  box-shadow: inset 0 0 0 var(--_checkbox-stroke) var(--color-foreground-tertiary);\n  transition:\n    background-color var(--effect-motion-short-2),\n    box-shadow var(--effect-motion-short-2);\n}\n\n.box--marked {\n  color: var(--color-foreground-on-bold-background-primary);\n  background-color: var(--color-background-bold-brand);\n  box-shadow: none;\n}\n\n.checkbox__mark {\n  width: 100%;\n  height: 100%;\n  flex-shrink: 0;\n  stroke: currentColor;\n  stroke-width: var(--_checkbox-stroke);\n  stroke-linecap: butt;\n  stroke-linejoin: round;\n}\n\n.checkbox__mark--checked {\n  transform: translateY(-0.5px);\n}\n\n.checkbox__label {\n  flex: 1;\n  min-width: 0;\n  padding: 0 var(--ds-control-label-inset);\n}\n\n@media (forced-colors: active) {\n  .box {\n    border: var(--_checkbox-stroke) solid var(--ds-forced-color-content);\n    box-shadow: none;\n  }\n\n  .box--marked {\n    color: var(--ds-forced-color-on-selected);\n    background-color: var(--ds-forced-color-selected);\n    border-color: var(--ds-forced-color-selected);\n  }\n}\n",
       "type": "registry:ui"
     },
     {

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

@@ -213,7 +213,7 @@
   "files": [
     {
       "path": "src/wc/components/Divider/Divider.css",
-      "content": ":host {\n  --_divider-color: var(--color-divider-divider);\n  --_divider-inset: 0;\n  --_divider-length: 100%;\n\n  display: block;\n  flex-shrink: 0;\n  width: var(--_divider-length);\n  height: var(--dimension-stroke-width-012);\n  margin: 0 var(--_divider-inset);\n  border: none;\n  background-color: var(--_divider-color);\n}\n\n:host(.divider--vertical) {\n  width: var(--dimension-stroke-width-012);\n  height: var(--_divider-length);\n  min-height: var(--dimension-stroke-width-012);\n  margin: var(--_divider-inset) 0;\n  align-self: stretch;\n}\n\n:host(.divider--vertical.divider--custom-length) {\n  align-self: center;\n}\n\n:host([background='bold']),\n:host(.divider--background-bold) {\n  --_divider-color: var(--color-divider-divider-on-bold-background);\n}\n\n:host([background='strong']),\n:host(.divider--background-strong) {\n  --_divider-color: var(--color-divider-divider-on-strong-background);\n}\n\n:host([background='medium']),\n:host(.divider--background-medium) {\n  --_divider-color: var(--color-divider-divider-on-medium-background);\n}\n\n:host([background='translucent']),\n:host(.divider--background-translucent) {\n  --_divider-color: var(--color-translucent-divider);\n}\n\n:host([background='navigation']),\n:host(.divider--background-navigation) {\n  --_divider-color: var(--color-navigation-divider);\n}\n\n:host([background='media']),\n:host(.divider--background-media) {\n  --_divider-color: var(--color-media-divider);\n}\n\n:host([background='always-dark']),\n:host(.divider--background-always-dark) {\n  --_divider-color: var(--color-always-dark-divider);\n}\n\n:host([background='inverted']),\n:host(.divider--background-inverted) {\n  --_divider-color: var(--color-inverted-divider);\n}\n",
+      "content": "@import '../../utils/forced-colors.css';\n\n:host {\n  --_divider-color: var(--color-divider-divider);\n  --_divider-inset: 0;\n  --_divider-length: 100%;\n\n  display: block;\n  flex-shrink: 0;\n  width: var(--_divider-length);\n  height: var(--dimension-stroke-width-012);\n  margin: 0 var(--_divider-inset);\n  border: none;\n  background-color: var(--_divider-color);\n}\n\n:host(.divider--vertical) {\n  width: var(--dimension-stroke-width-012);\n  height: var(--_divider-length);\n  min-height: var(--dimension-stroke-width-012);\n  margin: var(--_divider-inset) 0;\n  align-self: stretch;\n}\n\n:host(.divider--vertical.divider--custom-length) {\n  align-self: center;\n}\n\n:host([background='bold']),\n:host(.divider--background-bold) {\n  --_divider-color: var(--color-divider-divider-on-bold-background);\n}\n\n:host([background='strong']),\n:host(.divider--background-strong) {\n  --_divider-color: var(--color-divider-divider-on-strong-background);\n}\n\n:host([background='medium']),\n:host(.divider--background-medium) {\n  --_divider-color: var(--color-divider-divider-on-medium-background);\n}\n\n:host([background='translucent']),\n:host(.divider--background-translucent) {\n  --_divider-color: var(--color-translucent-divider);\n}\n\n:host([background='navigation']),\n:host(.divider--background-navigation) {\n  --_divider-color: var(--color-navigation-divider);\n}\n\n:host([background='media']),\n:host(.divider--background-media) {\n  --_divider-color: var(--color-media-divider);\n}\n\n:host([background='always-dark']),\n:host(.divider--background-always-dark) {\n  --_divider-color: var(--color-always-dark-divider);\n}\n\n:host([background='inverted']),\n:host(.divider--background-inverted) {\n  --_divider-color: var(--color-inverted-divider);\n}\n\n@media (forced-colors: active) {\n  :host {\n    background-color: var(--ds-forced-color-content);\n  }\n}\n",
       "type": "registry:ui"
     },
     {

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

@@ -586,7 +586,7 @@
   "files": [
     {
       "path": "src/wc/components/Input/Input.css",
-      "content": "@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-parts.css';\n@import '../../utils/control-width.css';\n@import '../../utils/field-stack.css';\n@import '../../utils/typography.css';\n\n:host(.input-host) {\n  display: inline-flex;\n  --ds-input-fg: var(--color-foreground-primary);\n  --ds-input-placeholder: var(--color-foreground-secondary);\n  --ds-input-placeholder-active: var(--color-foreground-quaternary);\n  --ds-input-adornment-fg: var(--color-foreground-secondary);\n  --ds-input-border: var(--color-border-secondary);\n}\n\n:host(.ds-control-width--fill),\n:host(.ds-control-width--fill) .input-control {\n  width: 100%;\n}\n\n.input-control {\n  overflow: hidden;\n  background: transparent;\n  border: none;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  color: var(--ds-input-fg);\n}\n\n.input-control--bordered {\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--ds-input-border);\n}\n\n.input-control--error {\n  --ds-interaction-border-width: var(--dimension-stroke-width-018);\n  --ds-interaction-border-color: var(--color-border-bold-negative);\n}\n\n.input-control:focus-within:not(.input-control--error) {\n  --ds-interaction-border-width: var(--dimension-stroke-width-018);\n  --ds-interaction-border-color: var(--color-border-bold-brand);\n}\n\n:host(.ds-control-inactive) .input-control::after {\n  background: transparent;\n}\n\n.native-input {\n  position: relative;\n  z-index: 2;\n  flex: 1 1 auto;\n  min-width: 0;\n  height: 100%;\n  background: transparent;\n  border: none;\n  border-radius: inherit;\n  outline: none;\n  color: var(--ds-input-fg);\n  font-family: inherit;\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n.native-input:disabled {\n  cursor: not-allowed;\n}\n\n.native-input:read-only:not(:disabled) {\n  cursor: default;\n}\n\n.native-input::placeholder {\n  color: var(--ds-input-placeholder);\n}\n\n.native-input:focus::placeholder {\n  color: var(--ds-input-placeholder-active);\n}\n\n.native-input[type='search']::-webkit-search-cancel-button,\n.native-input[type='search']::-webkit-search-decoration {\n  display: none;\n}\n\n.input-control__prefix,\n.input-control__suffix {\n  position: relative;\n  z-index: 2;\n  color: var(--ds-input-adornment-fg);\n}\n\n.input-control__suffix--empty {\n  display: none;\n}\n\n.input-control__clear {\n  position: relative;\n  z-index: 2;\n  flex-shrink: 0;\n  align-self: center;\n}\n\n.input-control.ds-control--lg:has(.input-control__clear),\n.input-control.ds-control--md:has(.input-control__clear),\n.input-control.ds-control--sm:has(.input-control__clear) {\n  padding-right: var(--dimension-space-050);\n}\n\n.input-control.ds-control--xs:has(.input-control__clear) {\n  padding-right: 0;\n}\n\n.error-text {\n  width: 100%;\n}\n",
+      "content": "@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-parts.css';\n@import '../../utils/control-width.css';\n@import '../../utils/field-stack.css';\n@import '../../utils/typography.css';\n@import '../../utils/forced-colors.css';\n\n:host(.input-host) {\n  display: inline-flex;\n  --ds-input-fg: var(--color-foreground-primary);\n  --ds-input-placeholder: var(--color-foreground-secondary);\n  --ds-input-placeholder-active: var(--color-foreground-quaternary);\n  --ds-input-adornment-fg: var(--color-foreground-secondary);\n  --ds-input-border: var(--color-border-secondary);\n}\n\n:host(.ds-control-width--fill),\n:host(.ds-control-width--fill) .input-control {\n  width: 100%;\n}\n\n.input-control {\n  overflow: hidden;\n  background: transparent;\n  border: none;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  color: var(--ds-input-fg);\n}\n\n.input-control--bordered {\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--ds-input-border);\n}\n\n.input-control--error {\n  --ds-interaction-border-width: var(--dimension-stroke-width-018);\n  --ds-interaction-border-color: var(--color-border-bold-negative);\n}\n\n.input-control:focus-within:not(.input-control--error) {\n  --ds-interaction-border-width: var(--dimension-stroke-width-018);\n  --ds-interaction-border-color: var(--color-border-bold-brand);\n}\n\n:host(.ds-control-inactive) .input-control::after {\n  background: transparent;\n}\n\n.native-input {\n  position: relative;\n  z-index: 2;\n  flex: 1 1 auto;\n  min-width: 0;\n  height: 100%;\n  background: transparent;\n  border: none;\n  border-radius: inherit;\n  outline: none;\n  color: var(--ds-input-fg);\n  font-family: inherit;\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n.native-input:disabled {\n  cursor: not-allowed;\n}\n\n.native-input:read-only:not(:disabled) {\n  cursor: default;\n}\n\n.native-input::placeholder {\n  color: var(--ds-input-placeholder);\n}\n\n.native-input:focus::placeholder {\n  color: var(--ds-input-placeholder-active);\n}\n\n.native-input[type='search']::-webkit-search-cancel-button,\n.native-input[type='search']::-webkit-search-decoration {\n  display: none;\n}\n\n.input-control__prefix,\n.input-control__suffix {\n  position: relative;\n  z-index: 2;\n  color: var(--ds-input-adornment-fg);\n}\n\n.input-control__suffix--empty {\n  display: none;\n}\n\n.input-control__clear {\n  position: relative;\n  z-index: 2;\n  flex-shrink: 0;\n  align-self: center;\n}\n\n.input-control.ds-control--lg:has(.input-control__clear),\n.input-control.ds-control--md:has(.input-control__clear),\n.input-control.ds-control--sm:has(.input-control__clear) {\n  padding-right: var(--dimension-space-050);\n}\n\n.input-control.ds-control--xs:has(.input-control__clear) {\n  padding-right: 0;\n}\n\n.error-text {\n  width: 100%;\n}\n\n@media (forced-colors: active) {\n  .input-control:focus-within:not(.input-control--error)::after {\n    outline-color: var(--ds-forced-color-selected);\n  }\n\n  .input-control--error::after {\n    outline-style: dashed;\n  }\n}\n",
       "type": "registry:ui"
     },
     {

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

@@ -269,7 +269,7 @@
   "files": [
     {
       "path": "src/wc/components/Modal/Modal.css",
-      "content": "@import '../../utils/chrome-layout.css';\n\n:host {\n  display: contents;\n}\n\n.modal-dialog {\n  display: none;\n  flex-direction: column;\n  max-width: none;\n  max-height: calc(100vh - 2 * var(--dimension-space-200));\n  margin: auto;\n  padding: 0;\n  overflow: hidden;\n  color: var(--color-foreground-primary);\n  background-color: var(--color-background-primary);\n  border: 0;\n  border-radius: var(--dimension-radius-050);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  outline: none;\n  box-sizing: border-box;\n}\n\n.modal-dialog[open] {\n  display: flex;\n  animation: modalDialogIn var(--effect-motion-short-2) forwards;\n}\n\n.modal-dialog::backdrop {\n  background-color: var(--color-background-shade);\n  animation: modalBackdropIn var(--effect-motion-short-2) forwards;\n}\n\n.modal-dialog--closing {\n  animation: modalDialogOut var(--effect-motion-short-3) forwards;\n}\n\n.modal-dialog--closing::backdrop {\n  animation: modalBackdropOut var(--effect-motion-short-3) forwards;\n}\n\n@keyframes modalBackdropIn {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n@keyframes modalBackdropOut {\n  from { opacity: 1; }\n  to   { opacity: 0; }\n}\n\n@keyframes modalDialogIn {\n  from { opacity: 0; transform: scale(0.97) translateY(4px); }\n  to   { opacity: 1; transform: scale(1) translateY(0); }\n}\n\n@keyframes modalDialogOut {\n  from { opacity: 1; transform: scale(1) translateY(0); }\n  to   { opacity: 0; transform: scale(0.97) translateY(4px); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .modal-dialog[open],\n  .modal-dialog--closing {\n    animation: none;\n    transform: none;\n  }\n\n  .modal-dialog::backdrop {\n    animation: none;\n    opacity: 1;\n  }\n\n  .modal-dialog--closing,\n  .modal-dialog--closing::backdrop {\n    opacity: 0;\n  }\n}\n\n.modal-header {\n  height: var(--dimension-size-800);\n  flex: 0 0 auto;\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  color: var(--color-foreground-primary);\n}\n\nds-text.modal-heading {\n  flex: 1 1 0;\n  width: auto;\n  min-width: 0;\n  text-align: left;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.modal-close-tooltip {\n  flex: 0 0 auto;\n}\n\n.modal-content {\n  min-height: 0;\n  padding: var(--dimension-space-200);\n  overflow-y: auto;\n  flex: 1 1 auto;\n  box-sizing: border-box;\n}\n\n.modal-footer {\n  justify-content: flex-start;\n  height: var(--dimension-size-800);\n  flex: 0 0 auto;\n  border-top: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n.modal-footer__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-100);\n  min-width: 0;\n}\n\n.modal-footer--empty {\n  display: none;\n}\n\n.modal-footer__actions slot {\n  display: contents;\n}\n",
+      "content": "@import '../../utils/chrome-layout.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  display: contents;\n}\n\n.modal-dialog {\n  display: none;\n  flex-direction: column;\n  max-width: none;\n  max-height: calc(100vh - 2 * var(--dimension-space-200));\n  margin: auto;\n  padding: 0;\n  overflow: hidden;\n  color: var(--color-foreground-primary);\n  background-color: var(--color-background-primary);\n  border: 0;\n  border-radius: var(--dimension-radius-050);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  outline: none;\n  box-sizing: border-box;\n}\n\n.modal-dialog[open] {\n  display: flex;\n  animation: modalDialogIn var(--effect-motion-short-2) forwards;\n}\n\n.modal-dialog::backdrop {\n  background-color: var(--color-background-shade);\n  animation: modalBackdropIn var(--effect-motion-short-2) forwards;\n}\n\n.modal-dialog--closing {\n  animation: modalDialogOut var(--effect-motion-short-3) forwards;\n}\n\n.modal-dialog--closing::backdrop {\n  animation: modalBackdropOut var(--effect-motion-short-3) forwards;\n}\n\n@keyframes modalBackdropIn {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n@keyframes modalBackdropOut {\n  from { opacity: 1; }\n  to   { opacity: 0; }\n}\n\n@keyframes modalDialogIn {\n  from { opacity: 0; transform: scale(0.97) translateY(4px); }\n  to   { opacity: 1; transform: scale(1) translateY(0); }\n}\n\n@keyframes modalDialogOut {\n  from { opacity: 1; transform: scale(1) translateY(0); }\n  to   { opacity: 0; transform: scale(0.97) translateY(4px); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .modal-dialog[open],\n  .modal-dialog--closing {\n    animation: none;\n    transform: none;\n  }\n\n  .modal-dialog::backdrop {\n    animation: none;\n    opacity: 1;\n  }\n\n  .modal-dialog--closing,\n  .modal-dialog--closing::backdrop {\n    opacity: 0;\n  }\n}\n\n.modal-header {\n  height: var(--dimension-size-800);\n  flex: 0 0 auto;\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  color: var(--color-foreground-primary);\n}\n\nds-text.modal-heading {\n  flex: 1 1 0;\n  width: auto;\n  min-width: 0;\n  text-align: left;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.modal-close-tooltip {\n  flex: 0 0 auto;\n}\n\n.modal-content {\n  min-height: 0;\n  padding: var(--dimension-space-200);\n  overflow-y: auto;\n  flex: 1 1 auto;\n  box-sizing: border-box;\n}\n\n.modal-footer {\n  justify-content: flex-start;\n  height: var(--dimension-size-800);\n  flex: 0 0 auto;\n  border-top: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n.modal-footer__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-100);\n  min-width: 0;\n}\n\n.modal-footer--empty {\n  display: none;\n}\n\n.modal-footer__actions slot {\n  display: contents;\n}\n\n@media (forced-colors: active) {\n  .modal-dialog {\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",
       "type": "registry:ui"
     },
     {

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

@@ -362,7 +362,7 @@
   "files": [
     {
       "path": "src/wc/components/Radio/Radio.css",
-      "content": "@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-025);\n}\n\n:host(.radio--horizontal) {\n  flex-direction: row;\n  gap: var(--dimension-space-100);\n}\n\n:host(.radio--lg) {\n  --_radio-circle: var(--dimension-iconography-md);\n  --_radio-dot: calc(var(--dimension-size-base) * 5 / 4);\n  --_radio-stroke: var(--dimension-stroke-width-018);\n}\n\n:host(.radio--md) {\n  --_radio-circle: var(--dimension-iconography-sm);\n  --_radio-dot: var(--dimension-size-100);\n  --_radio-stroke: var(--dimension-stroke-width-015);\n}\n\n:host(.radio--sm) {\n  --_radio-circle: var(--dimension-iconography-xs);\n  --_radio-dot: var(--dimension-size-075);\n  --_radio-stroke: var(--dimension-stroke-width-012);\n}\n\n:host(.radio--xs) {\n  --_radio-circle: var(--dimension-size-100);\n  --_radio-dot: var(--dimension-size-050);\n  --_radio-stroke: calc(var(--dimension-stroke-width-base) * 3 / 32);\n}\n\n.radio__item {\n  display: inline-flex;\n  align-items: center;\n  box-sizing: border-box;\n  gap: var(--ds-control-gap);\n  height: var(--ds-control-height);\n  padding: 0 var(--ds-control-padding-inline);\n  border-radius: var(--ds-control-radius);\n  cursor: default;\n  user-select: none;\n}\n\n.radio__placement {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--ds-control-icon);\n  height: var(--ds-control-icon);\n}\n\n.radio__circle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--_radio-circle);\n  height: var(--_radio-circle);\n  border: 0;\n  border-radius: var(--dimension-radius-half);\n  box-shadow: inset 0 0 0 var(--_radio-stroke) var(--color-foreground-tertiary);\n  transition:\n    background-color var(--effect-motion-short-2),\n    box-shadow var(--effect-motion-short-2);\n}\n\n.radio__circle--checked {\n  background-color: var(--color-background-bold-brand);\n  box-shadow: none;\n}\n\n.radio__dot {\n  width: var(--_radio-dot);\n  height: var(--_radio-dot);\n  border-radius: var(--dimension-radius-half);\n  background-color: var(--color-foreground-on-bold-background-primary);\n}\n\n.radio__label {\n  flex: 1;\n  min-width: 0;\n  padding: 0 var(--ds-control-label-inset);\n}\n",
+      "content": "@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-025);\n}\n\n:host(.radio--horizontal) {\n  flex-direction: row;\n  gap: var(--dimension-space-100);\n}\n\n:host(.radio--lg) {\n  --_radio-circle: var(--dimension-iconography-md);\n  --_radio-dot: calc(var(--dimension-size-base) * 5 / 4);\n  --_radio-stroke: var(--dimension-stroke-width-018);\n}\n\n:host(.radio--md) {\n  --_radio-circle: var(--dimension-iconography-sm);\n  --_radio-dot: var(--dimension-size-100);\n  --_radio-stroke: var(--dimension-stroke-width-015);\n}\n\n:host(.radio--sm) {\n  --_radio-circle: var(--dimension-iconography-xs);\n  --_radio-dot: var(--dimension-size-075);\n  --_radio-stroke: var(--dimension-stroke-width-012);\n}\n\n:host(.radio--xs) {\n  --_radio-circle: var(--dimension-size-100);\n  --_radio-dot: var(--dimension-size-050);\n  --_radio-stroke: calc(var(--dimension-stroke-width-base) * 3 / 32);\n}\n\n.radio__item {\n  display: inline-flex;\n  align-items: center;\n  box-sizing: border-box;\n  gap: var(--ds-control-gap);\n  height: var(--ds-control-height);\n  padding: 0 var(--ds-control-padding-inline);\n  border-radius: var(--ds-control-radius);\n  cursor: default;\n  user-select: none;\n}\n\n.radio__placement {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--ds-control-icon);\n  height: var(--ds-control-icon);\n}\n\n.radio__circle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--_radio-circle);\n  height: var(--_radio-circle);\n  border: 0;\n  border-radius: var(--dimension-radius-half);\n  box-shadow: inset 0 0 0 var(--_radio-stroke) var(--color-foreground-tertiary);\n  transition:\n    background-color var(--effect-motion-short-2),\n    box-shadow var(--effect-motion-short-2);\n}\n\n.radio__circle--checked {\n  background-color: var(--color-background-bold-brand);\n  box-shadow: none;\n}\n\n.radio__dot {\n  width: var(--_radio-dot);\n  height: var(--_radio-dot);\n  border-radius: var(--dimension-radius-half);\n  background-color: var(--color-foreground-on-bold-background-primary);\n}\n\n.radio__label {\n  flex: 1;\n  min-width: 0;\n  padding: 0 var(--ds-control-label-inset);\n}\n\n@media (forced-colors: active) {\n  .radio__circle {\n    border: var(--_radio-stroke) solid var(--ds-forced-color-content);\n    box-shadow: none;\n  }\n\n  .radio__circle--checked {\n    background-color: var(--ds-forced-color-selected);\n    border-color: var(--ds-forced-color-selected);\n  }\n\n  .radio__dot {\n    background-color: var(--ds-forced-color-on-selected);\n  }\n}\n",
       "type": "registry:ui"
     },
     {

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

@@ -270,7 +270,7 @@
   "files": [
     {
       "path": "src/wc/components/Skeleton/Skeleton.css",
-      "content": "@import '../../utils/control-density.css';\n@import '../../utils/shimmer.css';\n\n:host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  min-width: 0;\n  vertical-align: middle;\n  --ds-skeleton-base: var(--color-foreground-quaternary);\n  --ds-shimmer: var(--color-shimmer-shimmer);\n}\n\n.skeleton__shape {\n  --ds-shimmer-surface-base: var(--ds-skeleton-base);\n\n  display: block;\n  width: 100%;\n  height: 100%;\n  flex: 0 0 auto;\n  background-color: var(--ds-skeleton-base);\n  border-radius: var(--dimension-radius-025);\n}\n\n/* ── Background context ────────────────────────────────────────────────── */\n\n:host(.skeleton--background-medium) {\n  --ds-skeleton-base: var(--color-foreground-on-medium-background-quaternary);\n  --ds-shimmer: var(--color-shimmer-shimmer-on-medium-background);\n}\n\n:host(.skeleton--background-bold) {\n  --ds-skeleton-base: var(--color-foreground-on-bold-background-quaternary);\n  --ds-shimmer: var(--color-shimmer-shimmer-on-bold-background);\n}\n\n:host(.skeleton--background-strong) {\n  --ds-skeleton-base: var(--color-foreground-on-strong-background-quaternary);\n  --ds-shimmer: var(--color-shimmer-shimmer-on-strong-background);\n}\n\n:host(.skeleton--background-translucent) {\n  --ds-skeleton-base: var(--color-translucent-foreground-quaternary);\n  --ds-shimmer: var(--color-translucent-shimmer);\n}\n\n:host(.skeleton--background-inverted) {\n  --ds-skeleton-base: var(--color-inverted-foreground-quaternary);\n  --ds-shimmer: var(--color-inverted-shimmer);\n}\n\n:host(.skeleton--background-media) {\n  --ds-skeleton-base: var(--color-media-foreground-quaternary);\n  --ds-shimmer: var(--color-media-shimmer);\n}\n\n:host(.skeleton--background-always-dark) {\n  --ds-skeleton-base: var(--color-always-dark-foreground-quaternary);\n  --ds-shimmer: var(--color-always-dark-shimmer);\n}\n\n:host(.skeleton--background-navigation) {\n  --ds-skeleton-base: var(--color-navigation-foreground-quaternary);\n  --ds-shimmer: var(--color-navigation-shimmer);\n}\n\n/* ── Text ──────────────────────────────────────────────────────────────── */\n\n:host(.skeleton--text) {\n  width: 100%;\n  height: var(--ds-skeleton-canvas-size);\n  padding-block: var(--dimension-space-025);\n}\n\n:host(.skeleton--text) .skeleton__shape {\n  height: calc(var(--ds-skeleton-canvas-size) - var(--dimension-space-050));\n}\n\n:host(.skeleton--text-text-display-medium) { --ds-skeleton-canvas-size: var(--typography-lineheight-3xl); }\n:host(.skeleton--text-text-display-small)  { --ds-skeleton-canvas-size: var(--typography-lineheight-2xl); }\n:host(.skeleton--text-text-title-large)    { --ds-skeleton-canvas-size: var(--typography-lineheight-xl); }\n:host(.skeleton--text-text-title-medium),\n:host(.skeleton--text-text-body-large)     { --ds-skeleton-canvas-size: var(--typography-lineheight-lg); }\n:host(.skeleton--text-text-title-small),\n:host(.skeleton--text-text-body-medium)    { --ds-skeleton-canvas-size: var(--typography-lineheight-md); }\n:host(.skeleton--text-text-body-small)     { --ds-skeleton-canvas-size: var(--typography-lineheight-sm); }\n:host(.skeleton--text-text-caption)        { --ds-skeleton-canvas-size: var(--typography-lineheight-xs); }\n\n/* ── Icon ──────────────────────────────────────────────────────────────── */\n\n:host(.skeleton--icon) {\n  width: var(--ds-skeleton-canvas-size);\n  height: var(--ds-skeleton-canvas-size);\n  padding: var(--dimension-space-025);\n}\n\n:host(.skeleton--icon) .skeleton__shape {\n  width: calc(var(--ds-skeleton-canvas-size) - var(--dimension-space-050));\n  height: calc(var(--ds-skeleton-canvas-size) - var(--dimension-space-050));\n}\n\n:host(.skeleton--icon.skeleton--rounded) .skeleton__shape {\n  border-radius: var(--dimension-radius-half);\n}\n\n:host(.skeleton--icon-xs)  { --ds-skeleton-canvas-size: var(--dimension-iconography-xs); }\n:host(.skeleton--icon-sm)  { --ds-skeleton-canvas-size: var(--dimension-iconography-sm); }\n:host(.skeleton--icon-md)  { --ds-skeleton-canvas-size: var(--dimension-iconography-md); }\n:host(.skeleton--icon-lg)  { --ds-skeleton-canvas-size: var(--dimension-iconography-lg); }\n:host(.skeleton--icon-xl)  { --ds-skeleton-canvas-size: var(--dimension-iconography-xl); }\n:host(.skeleton--icon-2xl) { --ds-skeleton-canvas-size: var(--dimension-iconography-2xl); }\n:host(.skeleton--icon-3xl) { --ds-skeleton-canvas-size: var(--dimension-iconography-3xl); }\n\n/* ── Control ───────────────────────────────────────────────────────────── */\n\n:host(.skeleton--control) {\n  width: 100%;\n  height: var(--ds-control-height);\n}\n\n:host(.skeleton--control) .skeleton__shape {\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n}\n\n:host(.skeleton--control.skeleton--rounded) .skeleton__shape {\n  border-radius: var(--dimension-radius-half);\n}\n",
+      "content": "@import '../../utils/control-density.css';\n@import '../../utils/shimmer.css';\n\n:host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  min-width: 0;\n  vertical-align: middle;\n  --ds-skeleton-base: var(--color-foreground-quaternary);\n  --ds-shimmer: var(--color-shimmer-shimmer);\n}\n\n.skeleton__shape {\n  --ds-shimmer-surface-base: var(--ds-skeleton-base);\n\n  display: block;\n  width: 100%;\n  height: 100%;\n  flex: 0 0 auto;\n  background-color: var(--ds-skeleton-base);\n  border-radius: var(--dimension-radius-025);\n}\n\n/* ── Background context ────────────────────────────────────────────────── */\n\n:host(.skeleton--background-medium) {\n  --ds-skeleton-base: var(--color-foreground-on-medium-background-quaternary);\n  --ds-shimmer: var(--color-shimmer-shimmer-on-medium-background);\n}\n\n:host(.skeleton--background-bold) {\n  --ds-skeleton-base: var(--color-foreground-on-bold-background-quaternary);\n  --ds-shimmer: var(--color-shimmer-shimmer-on-bold-background);\n}\n\n:host(.skeleton--background-strong) {\n  --ds-skeleton-base: var(--color-foreground-on-strong-background-quaternary);\n  --ds-shimmer: var(--color-shimmer-shimmer-on-strong-background);\n}\n\n:host(.skeleton--background-translucent) {\n  --ds-skeleton-base: var(--color-translucent-foreground-quaternary);\n  --ds-shimmer: var(--color-translucent-shimmer);\n}\n\n:host(.skeleton--background-inverted) {\n  --ds-skeleton-base: var(--color-inverted-foreground-quaternary);\n  --ds-shimmer: var(--color-inverted-shimmer);\n}\n\n:host(.skeleton--background-media) {\n  --ds-skeleton-base: var(--color-media-foreground-quaternary);\n  --ds-shimmer: var(--color-media-shimmer);\n}\n\n:host(.skeleton--background-always-dark) {\n  --ds-skeleton-base: var(--color-always-dark-foreground-quaternary);\n  --ds-shimmer: var(--color-always-dark-shimmer);\n}\n\n:host(.skeleton--background-navigation) {\n  --ds-skeleton-base: var(--color-navigation-foreground-quaternary);\n  --ds-shimmer: var(--color-navigation-shimmer);\n}\n\n/* ── Text ──────────────────────────────────────────────────────────────── */\n\n:host(.skeleton--text) {\n  width: 100%;\n  height: var(--ds-skeleton-canvas-size);\n  padding-block: var(--dimension-space-025);\n}\n\n:host(.skeleton--text) .skeleton__shape {\n  height: calc(var(--ds-skeleton-canvas-size) - var(--dimension-space-050));\n}\n\n:host(.skeleton--text-text-display-medium) { --ds-skeleton-canvas-size: var(--typography-lineheight-3xl); }\n:host(.skeleton--text-text-display-small)  { --ds-skeleton-canvas-size: var(--typography-lineheight-2xl); }\n:host(.skeleton--text-text-title-large)    { --ds-skeleton-canvas-size: var(--typography-lineheight-xl); }\n:host(.skeleton--text-text-title-medium),\n:host(.skeleton--text-text-body-large)     { --ds-skeleton-canvas-size: var(--typography-lineheight-lg); }\n:host(.skeleton--text-text-title-small),\n:host(.skeleton--text-text-body-medium)    { --ds-skeleton-canvas-size: var(--typography-lineheight-md); }\n:host(.skeleton--text-text-body-small)     { --ds-skeleton-canvas-size: var(--typography-lineheight-sm); }\n:host(.skeleton--text-text-caption)        { --ds-skeleton-canvas-size: var(--typography-lineheight-xs); }\n\n/* ── Icon ──────────────────────────────────────────────────────────────── */\n\n:host(.skeleton--icon) {\n  width: var(--ds-skeleton-canvas-size);\n  height: var(--ds-skeleton-canvas-size);\n  padding: var(--dimension-space-025);\n}\n\n:host(.skeleton--icon) .skeleton__shape {\n  width: calc(var(--ds-skeleton-canvas-size) - var(--dimension-space-050));\n  height: calc(var(--ds-skeleton-canvas-size) - var(--dimension-space-050));\n}\n\n:host(.skeleton--icon.skeleton--rounded) .skeleton__shape {\n  border-radius: var(--dimension-radius-half);\n}\n\n:host(.skeleton--icon-xs)  { --ds-skeleton-canvas-size: var(--dimension-iconography-xs); }\n:host(.skeleton--icon-sm)  { --ds-skeleton-canvas-size: var(--dimension-iconography-sm); }\n:host(.skeleton--icon-md)  { --ds-skeleton-canvas-size: var(--dimension-iconography-md); }\n:host(.skeleton--icon-lg)  { --ds-skeleton-canvas-size: var(--dimension-iconography-lg); }\n:host(.skeleton--icon-xl)  { --ds-skeleton-canvas-size: var(--dimension-iconography-xl); }\n:host(.skeleton--icon-2xl) { --ds-skeleton-canvas-size: var(--dimension-iconography-2xl); }\n:host(.skeleton--icon-3xl) { --ds-skeleton-canvas-size: var(--dimension-iconography-3xl); }\n\n/* ── Control ───────────────────────────────────────────────────────────── */\n\n:host(.skeleton--control) {\n  width: 100%;\n  height: var(--ds-control-height);\n}\n\n:host(.skeleton--control) .skeleton__shape {\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n}\n\n:host(.skeleton--control.skeleton--rounded) .skeleton__shape {\n  border-radius: var(--dimension-radius-half);\n}\n\n@media (forced-colors: active) {\n  .skeleton__shape {\n    background-color: var(--ds-forced-color-disabled);\n  }\n}\n",
       "type": "registry:ui"
     },
     {

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

@@ -646,7 +646,7 @@
   "files": [
     {
       "path": "src/wc/components/Slider/Slider.css",
-      "content": "@import '../../utils/control-inactive.css';\n@import '../../utils/field-stack.css';\n\n:host {\n  --ds-slider-control-size: var(--dimension-size-400);\n  --ds-slider-thumb-size: var(--dimension-size-200);\n  --ds-slider-track-size: var(--dimension-size-100);\n  --ds-slider-track-stroke: var(--dimension-stroke-width-012);\n  --ds-slider-vertical-length: calc(var(--dimension-size-800) * 3);\n  box-sizing: border-box;\n  width: 100%;\n  color: var(--color-foreground-primary);\n}\n\n:host(.slider--sm) {\n  --ds-slider-control-size: var(--dimension-size-300);\n  --ds-slider-thumb-size: var(--dimension-size-150);\n  --ds-slider-track-size: var(--dimension-size-075);\n}\n\n:host(.slider--xs) {\n  --ds-slider-control-size: var(--dimension-size-200);\n  --ds-slider-thumb-size: var(--dimension-size-100);\n  --ds-slider-track-size: var(--dimension-size-050);\n}\n\n:host(.slider--vertical) {\n  width: fit-content;\n  min-width: var(--dimension-form-width-xs);\n}\n\n.slider__label-row {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--dimension-space-100);\n  min-width: 0;\n}\n\n.slider__label {\n  min-width: 0;\n}\n\n.slider__value {\n  flex-shrink: 0;\n}\n\n.slider__control {\n  position: relative;\n  width: 100%;\n  height: var(--ds-slider-control-size);\n  border-radius: var(--dimension-radius-half);\n  cursor: default;\n  touch-action: none;\n  user-select: none;\n}\n\n:host(.slider--vertical) .slider__control {\n  align-self: center;\n  width: var(--ds-slider-control-size);\n  height: var(--ds-slider-vertical-length);\n}\n\n:host(.slider--readonly) .slider__control {\n  cursor: default;\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity) on the host. */\n:host(.ds-control-inactive) .slider__control {\n  cursor: not-allowed;\n}\n\n.slider__rail {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  left: 0;\n  height: var(--ds-slider-track-size);\n  overflow: hidden;\n  border-radius: var(--dimension-radius-025);\n  background-color: transparent;\n  box-shadow: inset 0 0 0 var(--ds-slider-track-stroke) var(--color-border-secondary);\n  transform: translateY(-50%);\n  pointer-events: none;\n}\n\n:host(.slider--thumb-center) .slider__rail {\n  right: calc(var(--ds-slider-thumb-size) / 2);\n  left: calc(var(--ds-slider-thumb-size) / 2);\n}\n\n.slider__indicator {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: calc(\n    var(--ds-slider-thumb-size) / 2 +\n      (var(--ds-slider-end-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n  );\n  border-radius: inherit;\n  background-color: var(--color-background-bold-brand);\n}\n\n:host(.slider--range) .slider__indicator {\n  left: calc(\n    var(--ds-slider-thumb-size) / 2 +\n      (var(--ds-slider-start-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n  );\n  width: calc(\n    ((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) / 100) *\n      (100% - var(--ds-slider-thumb-size))\n  );\n}\n\n:host(.slider--thumb-center) .slider__indicator {\n  left: calc(var(--ds-slider-start-pct, 0) * 1%);\n  width: calc((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) * 1%);\n}\n\n.slider__thumb {\n  position: absolute;\n  top: 50%;\n  left: calc((var(--ds-slider-thumb-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)));\n  width: var(--ds-slider-thumb-size);\n  height: var(--ds-slider-thumb-size);\n  transform: translateY(-50%);\n  z-index: 1;\n}\n\n.slider__thumb--active {\n  z-index: 2;\n}\n\n.slider__input {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  opacity: 0;\n  appearance: none;\n  pointer-events: none;\n  z-index: 2;\n}\n\n.slider__thumb-visual {\n  position: absolute;\n  inset: 0;\n  box-sizing: border-box;\n  overflow: visible;\n  border-radius: var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-elevated-sm);\n  pointer-events: none;\n  transition:\n    background-color var(--effect-motion-short-2),\n    box-shadow var(--effect-motion-short-2);\n}\n\n.slider__thumb-wash {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background-color: transparent;\n  transition: background-color var(--effect-motion-short-2);\n}\n\n:host(:not(.slider--readonly):not(.ds-control-inactive)) .slider__thumb:hover .slider__thumb-wash {\n  background-color: var(--color-interaction-hover);\n}\n\n:host([data-dragging]:not(.slider--readonly):not(.ds-control-inactive))\n  .slider__thumb--active .slider__thumb-wash {\n  background-color: var(--color-interaction-pressed);\n}\n\n.slider__input:focus-visible + .slider__thumb-visual,\n:host([data-review-focus]) .slider__thumb[data-index='0'] .slider__thumb-visual {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n:host(.slider--vertical) .slider__rail {\n  top: 0;\n  right: auto;\n  bottom: 0;\n  left: 50%;\n  width: var(--ds-slider-track-size);\n  height: auto;\n  transform: translateX(-50%);\n}\n\n:host(.slider--vertical.slider--thumb-center) .slider__rail {\n  top: calc(var(--ds-slider-thumb-size) / 2);\n  bottom: calc(var(--ds-slider-thumb-size) / 2);\n}\n\n:host(.slider--vertical) .slider__indicator {\n  top: auto;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  width: auto;\n  height: calc(\n    var(--ds-slider-thumb-size) / 2 +\n      (var(--ds-slider-end-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n  );\n}\n\n:host(.slider--vertical.slider--range) .slider__indicator {\n  bottom: calc(\n    var(--ds-slider-thumb-size) / 2 +\n      (var(--ds-slider-start-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n  );\n  height: calc(\n    ((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) / 100) *\n      (100% - var(--ds-slider-thumb-size))\n  );\n}\n\n:host(.slider--vertical.slider--thumb-center) .slider__indicator {\n  bottom: calc(var(--ds-slider-start-pct, 0) * 1%);\n  height: calc((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) * 1%);\n}\n\n:host(.slider--vertical) .slider__thumb {\n  top: auto;\n  bottom: calc((var(--ds-slider-thumb-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)));\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .slider__thumb-visual,\n  .slider__thumb-wash {\n    transition: none;\n  }\n}\n",
+      "content": "@import '../../utils/control-inactive.css';\n@import '../../utils/field-stack.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  --ds-slider-control-size: var(--dimension-size-400);\n  --ds-slider-thumb-size: var(--dimension-size-200);\n  --ds-slider-track-size: var(--dimension-size-100);\n  --ds-slider-track-stroke: var(--dimension-stroke-width-012);\n  --ds-slider-vertical-length: calc(var(--dimension-size-800) * 3);\n  box-sizing: border-box;\n  width: 100%;\n  color: var(--color-foreground-primary);\n}\n\n:host(.slider--sm) {\n  --ds-slider-control-size: var(--dimension-size-300);\n  --ds-slider-thumb-size: var(--dimension-size-150);\n  --ds-slider-track-size: var(--dimension-size-075);\n}\n\n:host(.slider--xs) {\n  --ds-slider-control-size: var(--dimension-size-200);\n  --ds-slider-thumb-size: var(--dimension-size-100);\n  --ds-slider-track-size: var(--dimension-size-050);\n}\n\n:host(.slider--vertical) {\n  width: fit-content;\n  min-width: var(--dimension-form-width-xs);\n}\n\n.slider__label-row {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--dimension-space-100);\n  min-width: 0;\n}\n\n.slider__label {\n  min-width: 0;\n}\n\n.slider__value {\n  flex-shrink: 0;\n}\n\n.slider__control {\n  position: relative;\n  width: 100%;\n  height: var(--ds-slider-control-size);\n  border-radius: var(--dimension-radius-half);\n  cursor: default;\n  touch-action: none;\n  user-select: none;\n}\n\n:host(.slider--vertical) .slider__control {\n  align-self: center;\n  width: var(--ds-slider-control-size);\n  height: var(--ds-slider-vertical-length);\n}\n\n:host(.slider--readonly) .slider__control {\n  cursor: default;\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity) on the host. */\n:host(.ds-control-inactive) .slider__control {\n  cursor: not-allowed;\n}\n\n.slider__rail {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  left: 0;\n  height: var(--ds-slider-track-size);\n  overflow: hidden;\n  border-radius: var(--dimension-radius-025);\n  background-color: transparent;\n  box-shadow: inset 0 0 0 var(--ds-slider-track-stroke) var(--color-border-secondary);\n  transform: translateY(-50%);\n  pointer-events: none;\n}\n\n:host(.slider--thumb-center) .slider__rail {\n  right: calc(var(--ds-slider-thumb-size) / 2);\n  left: calc(var(--ds-slider-thumb-size) / 2);\n}\n\n.slider__indicator {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: calc(\n    var(--ds-slider-thumb-size) / 2 +\n      (var(--ds-slider-end-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n  );\n  border-radius: inherit;\n  background-color: var(--color-background-bold-brand);\n}\n\n:host(.slider--range) .slider__indicator {\n  left: calc(\n    var(--ds-slider-thumb-size) / 2 +\n      (var(--ds-slider-start-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n  );\n  width: calc(\n    ((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) / 100) *\n      (100% - var(--ds-slider-thumb-size))\n  );\n}\n\n:host(.slider--thumb-center) .slider__indicator {\n  left: calc(var(--ds-slider-start-pct, 0) * 1%);\n  width: calc((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) * 1%);\n}\n\n.slider__thumb {\n  position: absolute;\n  top: 50%;\n  left: calc((var(--ds-slider-thumb-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)));\n  width: var(--ds-slider-thumb-size);\n  height: var(--ds-slider-thumb-size);\n  transform: translateY(-50%);\n  z-index: 1;\n}\n\n.slider__thumb--active {\n  z-index: 2;\n}\n\n.slider__input {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  opacity: 0;\n  appearance: none;\n  pointer-events: none;\n  z-index: 2;\n}\n\n.slider__thumb-visual {\n  position: absolute;\n  inset: 0;\n  box-sizing: border-box;\n  overflow: visible;\n  border-radius: var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-elevated-sm);\n  pointer-events: none;\n  transition:\n    background-color var(--effect-motion-short-2),\n    box-shadow var(--effect-motion-short-2);\n}\n\n.slider__thumb-wash {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background-color: transparent;\n  transition: background-color var(--effect-motion-short-2);\n}\n\n:host(:not(.slider--readonly):not(.ds-control-inactive)) .slider__thumb:hover .slider__thumb-wash {\n  background-color: var(--color-interaction-hover);\n}\n\n:host([data-dragging]:not(.slider--readonly):not(.ds-control-inactive))\n  .slider__thumb--active .slider__thumb-wash {\n  background-color: var(--color-interaction-pressed);\n}\n\n.slider__input:focus-visible + .slider__thumb-visual,\n:host([data-review-focus]) .slider__thumb[data-index='0'] .slider__thumb-visual {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n:host(.slider--vertical) .slider__rail {\n  top: 0;\n  right: auto;\n  bottom: 0;\n  left: 50%;\n  width: var(--ds-slider-track-size);\n  height: auto;\n  transform: translateX(-50%);\n}\n\n:host(.slider--vertical.slider--thumb-center) .slider__rail {\n  top: calc(var(--ds-slider-thumb-size) / 2);\n  bottom: calc(var(--ds-slider-thumb-size) / 2);\n}\n\n:host(.slider--vertical) .slider__indicator {\n  top: auto;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  width: auto;\n  height: calc(\n    var(--ds-slider-thumb-size) / 2 +\n      (var(--ds-slider-end-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n  );\n}\n\n:host(.slider--vertical.slider--range) .slider__indicator {\n  bottom: calc(\n    var(--ds-slider-thumb-size) / 2 +\n      (var(--ds-slider-start-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n  );\n  height: calc(\n    ((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) / 100) *\n      (100% - var(--ds-slider-thumb-size))\n  );\n}\n\n:host(.slider--vertical.slider--thumb-center) .slider__indicator {\n  bottom: calc(var(--ds-slider-start-pct, 0) * 1%);\n  height: calc((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) * 1%);\n}\n\n:host(.slider--vertical) .slider__thumb {\n  top: auto;\n  bottom: calc((var(--ds-slider-thumb-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)));\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .slider__thumb-visual,\n  .slider__thumb-wash {\n    transition: none;\n  }\n}\n\n@media (forced-colors: active) {\n  .slider__rail {\n    border: var(--ds-slider-track-stroke) solid var(--ds-forced-color-content);\n    box-shadow: none;\n  }\n\n  .slider__indicator {\n    background-color: var(--ds-forced-color-selected);\n  }\n\n  .slider__thumb-visual {\n    border:\n      var(--dimension-stroke-width-012) solid\n      var(--ds-forced-color-control-boundary);\n    background-color: var(--ds-forced-color-surface);\n    box-shadow: none;\n  }\n\n  .slider__input:focus-visible + .slider__thumb-visual,\n  :host([data-review-focus]) .slider__thumb[data-index='0'] .slider__thumb-visual {\n    outline-color: var(--ds-forced-color-selected);\n  }\n}\n",
       "type": "registry:ui"
     },
     {

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

@@ -214,7 +214,7 @@
   "files": [
     {
       "path": "src/wc/components/SwatchPicker/SwatchPicker.css",
-      "content": "@import '../../utils/focus-ring.css';\n@import '../../utils/control-inactive.css';\n\n:host {\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  --_swatch-inner-inset: calc(\n    var(--dimension-stroke-width-025) + var(--dimension-space-025)\n  );\n  --_swatch-ring-bg: var(--color-background-primary);\n  --_swatch-select-motion: var(--effect-motion-short-3);\n}\n\n.swatch-picker {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  width: 100%;\n  min-height: var(--dimension-size-400);\n  gap: var(--dimension-space-100);\n  padding: var(--dimension-space-100);\n}\n\n.swatch-picker__option {\n  position: relative;\n  box-sizing: border-box;\n  flex: 0 0 auto;\n  width: var(--dimension-size-300);\n  height: var(--dimension-size-300);\n  padding: 0;\n  border: none;\n  border-radius: var(--dimension-radius-half);\n  background: transparent;\n  cursor: 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.swatch-picker__option:hover:not(:disabled) .swatch-picker__interaction {\n  background-color: var(--color-interaction-hover);\n}\n\n.swatch-picker__option:active:not(:disabled) .swatch-picker__interaction {\n  background-color: var(--color-interaction-pressed);\n}\n\n.swatch-picker__halo,\n.swatch-picker__stroke {\n  opacity: 0;\n  transform: scale(1.2);\n  transform-origin: center;\n  transition:\n    opacity var(--_swatch-select-motion),\n    transform var(--_swatch-select-motion);\n}\n\n.swatch-picker__halo {\n  z-index: 4;\n  box-shadow: inset 0 0 0 var(--_swatch-inner-inset) var(--_swatch-ring-bg);\n}\n\n.swatch-picker__stroke {\n  z-index: 5;\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);\n}\n\n.swatch-picker__option--selected .swatch-picker__fill,\n.swatch-picker__option--selected .swatch-picker__border,\n.swatch-picker__option--selected .swatch-picker__interaction {\n  inset: var(--_swatch-inner-inset);\n}\n\n.swatch-picker__option--selected .swatch-picker__halo,\n.swatch-picker__option--selected .swatch-picker__stroke {\n  opacity: 1;\n  transform: scale(1);\n}\n\n.swatch-picker__divider {\n  flex: 0 0 auto;\n  align-self: center;\n  width: var(--dimension-stroke-width-012);\n  height: var(--dimension-size-300);\n  background-color: var(--color-border-tertiary);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .swatch-picker__fill,\n  .swatch-picker__border,\n  .swatch-picker__interaction,\n  .swatch-picker__halo,\n  .swatch-picker__stroke {\n    transition: none;\n  }\n}\n",
+      "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.swatch-picker__option:hover:not(:disabled) .swatch-picker__interaction {\n  background-color: var(--color-interaction-hover);\n}\n\n.swatch-picker__option:active:not(:disabled) .swatch-picker__interaction {\n  background-color: var(--color-interaction-pressed);\n}\n\n.swatch-picker__halo,\n.swatch-picker__stroke {\n  opacity: 0;\n  transform: scale(1.2);\n  transform-origin: center;\n  transition:\n    opacity var(--_swatch-select-motion),\n    transform var(--_swatch-select-motion);\n}\n\n.swatch-picker__halo {\n  z-index: 4;\n  box-shadow: inset 0 0 0 var(--_swatch-inner-inset) var(--_swatch-ring-bg);\n}\n\n.swatch-picker__stroke {\n  z-index: 5;\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);\n}\n\n.swatch-picker__option--selected .swatch-picker__fill,\n.swatch-picker__option--selected .swatch-picker__border,\n.swatch-picker__option--selected .swatch-picker__interaction {\n  inset: var(--_swatch-inner-inset);\n}\n\n.swatch-picker__option--selected .swatch-picker__halo,\n.swatch-picker__option--selected .swatch-picker__stroke {\n  opacity: 1;\n  transform: scale(1);\n}\n\n.swatch-picker__divider {\n  flex: 0 0 auto;\n  align-self: center;\n  width: var(--dimension-stroke-width-012);\n  height: var(--dimension-size-300);\n  background-color: var(--color-border-tertiary);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .swatch-picker__fill,\n  .swatch-picker__border,\n  .swatch-picker__interaction,\n  .swatch-picker__halo,\n  .swatch-picker__stroke {\n    transition: none;\n  }\n}\n\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"
     },
     {

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

@@ -349,7 +349,7 @@
   "files": [
     {
       "path": "src/wc/components/Switch/Switch.css",
-      "content": "@import '../../utils/focus-ring.css';\n@import '../../utils/control-inactive.css';\n\n:host {\n  --ds-switch-width: var(--dimension-size-400);\n  --ds-switch-height: var(--dimension-size-250);\n  --ds-switch-thumb-size: var(--dimension-size-150);\n  --ds-switch-gap: var(--dimension-space-050);\n  --ds-switch-stroke: var(--dimension-stroke-width-012);\n  --ds-switch-inset: var(--ds-switch-gap);\n  --ds-switch-thumb-hover: var(--color-interaction-hover);\n  --ds-switch-thumb-pressed: var(--color-interaction-pressed);\n  --ds-switch-travel: calc(\n    var(--ds-switch-width) - var(--ds-switch-thumb-size) - var(--ds-switch-inset) -\n      var(--ds-switch-inset)\n  );\n  position: relative;\n  display: inline-flex;\n  width: var(--ds-switch-width);\n  height: var(--ds-switch-height);\n  padding: 0;\n  border: none;\n  border-radius: var(--dimension-radius-half);\n  box-sizing: border-box;\n  flex-shrink: 0;\n  overflow: visible;\n  cursor: default;\n  user-select: none;\n  outline: none;\n  background-color: transparent;\n  box-shadow: inset 0 0 0 var(--ds-switch-stroke) var(--color-border-secondary);\n  transition:\n    background-color var(--effect-motion-short-3),\n    box-shadow var(--effect-motion-short-3);\n}\n\n:host(.switch--lg) {\n  --ds-switch-width: var(--dimension-size-500);\n  --ds-switch-height: var(--dimension-size-300);\n  --ds-switch-thumb-size: var(--dimension-iconography-sm);\n  --ds-switch-gap: var(--dimension-space-050);\n}\n\n:host(.switch--sm) {\n  --ds-switch-width: var(--dimension-size-300);\n  --ds-switch-height: var(--dimension-size-200);\n  --ds-switch-thumb-size: calc(var(--dimension-size-base) * 5 / 4);\n  --ds-switch-gap: calc(var(--dimension-space-025) + var(--dimension-space-012));\n}\n\n:host(.switch--xs) {\n  --ds-switch-width: var(--dimension-size-250);\n  --ds-switch-height: var(--dimension-size-150);\n  --ds-switch-thumb-size: var(--dimension-size-100);\n  --ds-switch-gap: var(--dimension-space-025);\n}\n\n:host(.checked) {\n  background-color: var(--color-background-bold-brand);\n  box-shadow: none;\n}\n\n:host(.switch--readonly),\n:host(.switch--presentation) {\n  cursor: default;\n}\n\n:host(.switch--presentation) {\n  pointer-events: none;\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity). */\n\n.thumb {\n  position: absolute;\n  top: 50%;\n  left: var(--ds-switch-inset);\n  width: var(--ds-switch-thumb-size);\n  height: var(--ds-switch-thumb-size);\n  border-radius: var(--dimension-radius-half);\n  background-color: var(--color-foreground-tertiary);\n  box-shadow: none;\n  transform: translateY(-50%);\n  transition:\n    background-color var(--effect-motion-short-3),\n    transform var(--effect-motion-short-3);\n  pointer-events: none;\n}\n\n.thumb::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: transparent;\n  pointer-events: none;\n}\n\n:host(:hover:not(:disabled):not(.ds-control-inactive):not(.switch--readonly):not(.switch--presentation))\n  .thumb::after {\n  background: var(--ds-switch-thumb-hover);\n}\n\n:host(:active:not(:disabled):not(.ds-control-inactive):not(.switch--readonly):not(.switch--presentation))\n  .thumb::after {\n  background: var(--ds-switch-thumb-pressed);\n}\n\n:host(.checked) .thumb {\n  background-color: var(--color-background-primary);\n  box-shadow: none;\n  transform: translate3d(var(--ds-switch-travel), -50%, 0);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    transition: none;\n  }\n\n  .thumb {\n    transition: none;\n  }\n}\n",
+      "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:host(:hover:not(:disabled):not(.ds-control-inactive):not(.switch--readonly):not(.switch--presentation))\n  .thumb::after {\n  background: var(--ds-switch-thumb-hover);\n}\n\n:host(:active:not(:disabled):not(.ds-control-inactive):not(.switch--readonly):not(.switch--presentation))\n  .thumb::after {\n  background: var(--ds-switch-thumb-pressed);\n}\n\n:host(.checked) .thumb {\n  background-color: var(--color-background-primary);\n  box-shadow: none;\n  transform: translate3d(var(--ds-switch-travel), -50%, 0);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    transition: none;\n  }\n\n  .thumb {\n    transition: none;\n  }\n}\n\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"
     },
     {

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

@@ -325,7 +325,7 @@
   "files": [
     {
       "path": "src/wc/components/Toast/Toast.css",
-      "content": "@import '../../utils/visually-hidden.css';\n\n:host {\n  display: contents;\n}\n\n.toast-region {\n  position: fixed;\n  inset: 0;\n  z-index: var(--dimension-z-index-floating);\n  pointer-events: none;\n  outline: none;\n}\n\n.toast-viewport {\n  position: absolute;\n  right: var(--dimension-space-200);\n  bottom: var(--dimension-space-200);\n  display: grid;\n  width: min(\n    var(--dimension-card-width-sm),\n    calc(100vw - 2 * var(--dimension-space-200))\n  );\n}\n\n@media (max-width: 767px) {\n  :host([avoid-mobile-shell-bar]) .toast-viewport {\n    bottom: calc(\n      var(--dimension-space-200) +\n      var(--dimension-stroke-width-012) +\n      var(--dimension-space-100) +\n      var(--dimension-size-500) +\n      max(var(--dimension-space-100), env(safe-area-inset-bottom))\n    );\n  }\n}\n\n.toast-positioner {\n  grid-area: 1 / 1;\n  align-self: end;\n  justify-self: center;\n  width: 100%;\n  pointer-events: auto;\n  transform: translateY(\n    calc(-1 * var(--toast-index) * var(--dimension-space-100))\n  );\n  transition:\n    transform var(--effect-motion-short-3),\n    width var(--effect-motion-short-3);\n}\n\n.toast-viewport:not([data-expanded]) .toast-positioner {\n  width: calc(\n    100% - 2 * var(--toast-index) * var(--dimension-space-100)\n  );\n}\n\n.toast-viewport[data-expanded] .toast-positioner {\n  transform: translateY(calc(-1 * var(--toast-offset-y)));\n}\n\n.toast-positioner[data-limited] {\n  visibility: hidden;\n  pointer-events: none;\n}\n\n.toast-positioner--anchored {\n  position: fixed;\n  width: min(\n    var(--dimension-card-width-sm),\n    calc(100vw - 2 * var(--dimension-space-200))\n  );\n  transform: none;\n}\n\n.toast-positioner--anchored[data-positioned='false'] {\n  visibility: hidden;\n}\n\n.toast-surface {\n  position: relative;\n  display: block;\n  box-sizing: border-box;\n  width: 100%;\n  height: var(--toast-height, auto);\n  padding: var(--dimension-space-200);\n  overflow: hidden;\n  color: var(--color-foreground-primary);\n  background-color: var(--color-background-primary);\n  border-radius: var(--dimension-radius-050);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  transform: translate(\n    var(--toast-swipe-movement-x),\n    var(--toast-swipe-movement-y)\n  );\n  animation: toast-enter var(--effect-motion-short-2) both;\n}\n\n.toast-positioner--ending .toast-surface {\n  animation: toast-exit var(--effect-motion-short-3) both;\n}\n\n.toast-surface--swiping {\n  transition: none;\n  user-select: none;\n}\n\n.toast-content {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  padding-inline-end: var(--dimension-size-500);\n  transition: opacity var(--effect-motion-short-3);\n}\n\n.toast-copy {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  min-height: var(--typography-lineheight-md);\n  margin-block: calc(-1 * var(--dimension-space-025));\n  gap: var(--dimension-space-050);\n}\n\n.toast-title,\n.toast-description {\n  min-width: 0;\n}\n\n.toast-action {\n  align-self: start;\n  margin-top: calc(\n    var(--dimension-space-200) + var(--dimension-space-025)\n  );\n}\n\n.toast-close {\n  position: absolute;\n  top: var(--dimension-space-100);\n  right: var(--dimension-space-100);\n  transition: opacity var(--effect-motion-short-3);\n}\n\n.toast-viewport:not([data-expanded]) .toast-positioner[data-behind] .toast-content,\n.toast-viewport:not([data-expanded]) .toast-positioner[data-behind] .toast-close {\n  opacity: 0;\n}\n\n\n@keyframes toast-enter {\n  from {\n    opacity: 0;\n    transform: translateY(var(--dimension-space-100));\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes toast-exit {\n  from {\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .toast-positioner,\n  .toast-surface,\n  .toast-content,\n  .toast-close,\n  .toast-positioner--ending .toast-surface {\n    transition: none;\n    animation: none;\n  }\n\n  .toast-positioner--ending .toast-surface {\n    opacity: 0;\n  }\n}\n",
+      "content": "@import '../../utils/visually-hidden.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  display: contents;\n}\n\n.toast-region {\n  position: fixed;\n  inset: 0;\n  z-index: var(--dimension-z-index-floating);\n  pointer-events: none;\n  outline: none;\n}\n\n.toast-viewport {\n  position: absolute;\n  right: var(--dimension-space-200);\n  bottom: var(--dimension-space-200);\n  display: grid;\n  width: min(\n    var(--dimension-card-width-sm),\n    calc(100vw - 2 * var(--dimension-space-200))\n  );\n}\n\n@media (max-width: 767px) {\n  :host([avoid-mobile-shell-bar]) .toast-viewport {\n    bottom: calc(\n      var(--dimension-space-200) +\n      var(--dimension-stroke-width-012) +\n      var(--dimension-space-100) +\n      var(--dimension-size-500) +\n      max(var(--dimension-space-100), env(safe-area-inset-bottom))\n    );\n  }\n}\n\n.toast-positioner {\n  grid-area: 1 / 1;\n  align-self: end;\n  justify-self: center;\n  width: 100%;\n  pointer-events: auto;\n  transform: translateY(\n    calc(-1 * var(--toast-index) * var(--dimension-space-100))\n  );\n  transition:\n    transform var(--effect-motion-short-3),\n    width var(--effect-motion-short-3);\n}\n\n.toast-viewport:not([data-expanded]) .toast-positioner {\n  width: calc(\n    100% - 2 * var(--toast-index) * var(--dimension-space-100)\n  );\n}\n\n.toast-viewport[data-expanded] .toast-positioner {\n  transform: translateY(calc(-1 * var(--toast-offset-y)));\n}\n\n.toast-positioner[data-limited] {\n  visibility: hidden;\n  pointer-events: none;\n}\n\n.toast-positioner--anchored {\n  position: fixed;\n  width: min(\n    var(--dimension-card-width-sm),\n    calc(100vw - 2 * var(--dimension-space-200))\n  );\n  transform: none;\n}\n\n.toast-positioner--anchored[data-positioned='false'] {\n  visibility: hidden;\n}\n\n.toast-surface {\n  position: relative;\n  display: block;\n  box-sizing: border-box;\n  width: 100%;\n  height: var(--toast-height, auto);\n  padding: var(--dimension-space-200);\n  overflow: hidden;\n  color: var(--color-foreground-primary);\n  background-color: var(--color-background-primary);\n  border-radius: var(--dimension-radius-050);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  transform: translate(\n    var(--toast-swipe-movement-x),\n    var(--toast-swipe-movement-y)\n  );\n  animation: toast-enter var(--effect-motion-short-2) both;\n}\n\n.toast-positioner--ending .toast-surface {\n  animation: toast-exit var(--effect-motion-short-3) both;\n}\n\n.toast-surface--swiping {\n  transition: none;\n  user-select: none;\n}\n\n.toast-content {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  padding-inline-end: var(--dimension-size-500);\n  transition: opacity var(--effect-motion-short-3);\n}\n\n.toast-copy {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  min-height: var(--typography-lineheight-md);\n  margin-block: calc(-1 * var(--dimension-space-025));\n  gap: var(--dimension-space-050);\n}\n\n.toast-title,\n.toast-description {\n  min-width: 0;\n}\n\n.toast-action {\n  align-self: start;\n  margin-top: calc(\n    var(--dimension-space-200) + var(--dimension-space-025)\n  );\n}\n\n.toast-close {\n  position: absolute;\n  top: var(--dimension-space-100);\n  right: var(--dimension-space-100);\n  transition: opacity var(--effect-motion-short-3);\n}\n\n.toast-viewport:not([data-expanded]) .toast-positioner[data-behind] .toast-content,\n.toast-viewport:not([data-expanded]) .toast-positioner[data-behind] .toast-close {\n  opacity: 0;\n}\n\n\n@keyframes toast-enter {\n  from {\n    opacity: 0;\n    transform: translateY(var(--dimension-space-100));\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes toast-exit {\n  from {\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .toast-positioner,\n  .toast-surface,\n  .toast-content,\n  .toast-close,\n  .toast-positioner--ending .toast-surface {\n    transition: none;\n    animation: none;\n  }\n\n  .toast-positioner--ending .toast-surface {\n    opacity: 0;\n  }\n}\n\n@media (forced-colors: active) {\n  .toast-surface {\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",
       "type": "registry:ui"
     },
     {

package/dist/mcp-data/registry/tooltip-data-viz.json

@@ -212,7 +212,7 @@
   "files": [
     {
       "path": "src/wc/components/TooltipDataViz/TooltipDataViz.css",
-      "content": "@import '../../utils/control-density.css';\n\n/* No padding here — the item div below owns all the spacing, so there's exactly one padding\n   box instead of stacking the host's padding on top of the item's. */\n:host {\n  position: absolute;\n  z-index: var(--dimension-z-index-tooltip);\n  display: block;\n  box-sizing: border-box;\n  background-color: var(--color-translucent-translucent);\n  backdrop-filter: blur(var(--effect-blur-md));\n  -webkit-backdrop-filter: blur(var(--effect-blur-md));\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  box-shadow: var(--effect-elevation-elevated-floating);\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: 0;\n}\n\n:host(.tooltip-data-viz--visible) {\n  animation: tooltip-data-viz-fade-in var(--effect-motion-short-2) forwards;\n}\n\n/* Density: md control recipe (height / pad / label inset) — non-interactive, no interaction-fill. */\n.tooltip-data-viz__item {\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-025);\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n}\n\n.tooltip-data-viz__label,\n.tooltip-data-viz__value {\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n}\n\n@keyframes tooltip-data-viz-fade-in {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host(.tooltip-data-viz--visible) {\n    animation: none;\n    opacity: 1;\n  }\n}\n",
+      "content": "@import '../../utils/control-density.css';\n@import '../../utils/forced-colors.css';\n\n/* No padding here — the item div below owns all the spacing, so there's exactly one padding\n   box instead of stacking the host's padding on top of the item's. */\n:host {\n  position: absolute;\n  z-index: var(--dimension-z-index-tooltip);\n  display: block;\n  box-sizing: border-box;\n  background-color: var(--color-translucent-translucent);\n  backdrop-filter: blur(var(--effect-blur-md));\n  -webkit-backdrop-filter: blur(var(--effect-blur-md));\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  box-shadow: var(--effect-elevation-elevated-floating);\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: 0;\n}\n\n:host(.tooltip-data-viz--visible) {\n  animation: tooltip-data-viz-fade-in var(--effect-motion-short-2) forwards;\n}\n\n/* Density: md control recipe (height / pad / label inset) — non-interactive, no interaction-fill. */\n.tooltip-data-viz__item {\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-025);\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n}\n\n.tooltip-data-viz__label,\n.tooltip-data-viz__value {\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n}\n\n@keyframes tooltip-data-viz-fade-in {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host(.tooltip-data-viz--visible) {\n    animation: none;\n    opacity: 1;\n  }\n}\n\n@media (forced-colors: active) {\n  :host {\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",
       "type": "registry:ui"
     },
     {