@ds-mo/ui 12.6.1 → 12.6.2

package/dist/mcp-data/registry/mobile-section-switcher.json

@@ -189,7 +189,7 @@
   "files": [
     {
       "path": "src/wc/components/MobileSectionSwitcher/MobileSectionSwitcher.css",
-      "content": "@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  max-width: 100%;\n  color: var(--color-foreground-primary);\n}\n\n.mobile-section-switcher {\n  appearance: none;\n  display: grid;\n  grid-template-columns: var(--dimension-size-100) minmax(0, auto) var(--dimension-size-100);\n  align-items: center;\n  justify-content: center;\n  gap: var(--dimension-space-050);\n  max-width: 100%;\n  min-height: var(--dimension-size-400);\n  padding-inline: var(--dimension-space-100);\n  border: 0;\n  border-radius: var(--dimension-radius-100);\n  background: var(--color-background-secondary);\n  color: inherit;\n  box-sizing: border-box;\n  cursor: pointer;\n}\n\n.mobile-section-switcher--expanded {\n  background: var(--color-background-tertiary);\n}\n\n.mobile-section-switcher__label {\n  min-width: 0;\n  max-width: 100%;\n  text-align: center;\n}\n\n.mobile-section-switcher__position {\n  width: var(--dimension-size-050);\n  height: var(--dimension-size-050);\n  border-radius: var(--dimension-radius-half);\n  background: currentColor;\n  opacity: 0;\n}\n\n.mobile-section-switcher__position--visible {\n  opacity: 1;\n}\n",
+      "content": "@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  max-width: 100%;\n  color: var(--color-foreground-primary);\n}\n\n.mobile-section-switcher {\n  appearance: none;\n  display: grid;\n  grid-template-columns: var(--dimension-size-100) minmax(0, auto) var(--dimension-size-100);\n  align-items: center;\n  justify-content: center;\n  gap: var(--dimension-space-050);\n  max-width: 100%;\n  min-height: var(--dimension-size-400);\n  padding-inline: var(--dimension-space-100);\n  border: 0;\n  border-radius: var(--dimension-radius-100);\n  background: var(--color-background-secondary);\n  color: inherit;\n  box-sizing: border-box;\n  cursor: default;\n}\n\n.mobile-section-switcher--expanded {\n  background: var(--color-background-tertiary);\n}\n\n.mobile-section-switcher__label {\n  min-width: 0;\n  max-width: 100%;\n  text-align: center;\n}\n\n.mobile-section-switcher__position {\n  width: var(--dimension-size-050);\n  height: var(--dimension-size-050);\n  border-radius: var(--dimension-radius-half);\n  background: currentColor;\n  opacity: 0;\n}\n\n.mobile-section-switcher__position--visible {\n  opacity: 1;\n}\n",
       "type": "registry:ui"
     },
     {

package/dist/mcp-data/registry/mobile-sheet-nav.json

@@ -305,7 +305,7 @@
   "files": [
     {
       "path": "src/wc/components/MobileSheetNav/MobileSheetNav.css",
-      "content": "@import '../../utils/control-density.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n  background: var(--color-background-primary);\n}\n\n:host(:not([open])) {\n  display: none;\n}\n\n.mobile-sheet-nav {\n  display: grid;\n  grid-template-rows: auto minmax(0, 1fr);\n  height: 100%;\n  min-height: 0;\n  background: var(--color-background-primary);\n}\n\n.mobile-sheet-nav__header {\n  position: relative;\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n  align-items: center;\n  gap: var(--dimension-space-100);\n  padding: var(--dimension-space-200);\n  box-sizing: border-box;\n}\n\n.mobile-sheet-nav__header::after {\n  content: '';\n  position: absolute;\n  inset-inline: 0;\n  inset-block-end: 0;\n  height: var(--dimension-stroke-width-012);\n  background: var(--color-border-tertiary);\n  pointer-events: none;\n}\n\n.mobile-sheet-nav__brand {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  min-width: 0;\n}\n\n.mobile-sheet-nav__logo {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dimension-size-500);\n  height: var(--dimension-size-500);\n  padding: var(--dimension-space-100);\n  box-sizing: border-box;\n  color: var(--color-foreground-primary);\n}\n\n.mobile-sheet-nav__logo-mark {\n  width: var(--dimension-iconography-lg);\n  height: var(--dimension-iconography-lg);\n  flex: 0 0 auto;\n}\n\n.mobile-sheet-nav__context {\n  justify-self: center;\n}\n\n.mobile-sheet-nav__actions {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n}\n\n.mobile-sheet-nav__body {\n  min-height: 0;\n  overflow: auto;\n  overscroll-behavior: contain;\n  padding: var(--dimension-space-200);\n}\n\n.mobile-sheet-nav__items {\n  display: grid;\n  gap: var(--dimension-space-100);\n}\n\n.mobile-sheet-nav__item {\n  appearance: none;\n  width: 100%;\n  height: var(--ds-control-height);\n  min-height: var(--ds-control-height);\n  padding-inline: var(--ds-control-padding-inline);\n  border: 0;\n  border-radius: var(--ds-control-radius);\n  background: transparent;\n  color: var(--color-foreground-secondary);\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: var(--ds-control-gap);\n  cursor: pointer;\n  text-align: start;\n  box-sizing: border-box;\n}\n\n.mobile-sheet-nav__item--selected {\n  color: var(--color-foreground-primary);\n}\n\n.mobile-sheet-nav__item-label {\n  min-width: 0;\n  padding-inline: var(--ds-control-label-inset);\n}\n\n.mobile-sheet-nav__dot {\n  margin-inline-start: auto;\n}\n",
+      "content": "@import '../../utils/control-density.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n  background: var(--color-background-primary);\n}\n\n:host(:not([open])) {\n  display: none;\n}\n\n.mobile-sheet-nav {\n  display: grid;\n  grid-template-rows: auto minmax(0, 1fr);\n  height: 100%;\n  min-height: 0;\n  background: var(--color-background-primary);\n}\n\n.mobile-sheet-nav__header {\n  position: relative;\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n  align-items: center;\n  gap: var(--dimension-space-100);\n  padding: var(--dimension-space-200);\n  box-sizing: border-box;\n}\n\n.mobile-sheet-nav__header::after {\n  content: '';\n  position: absolute;\n  inset-inline: 0;\n  inset-block-end: 0;\n  height: var(--dimension-stroke-width-012);\n  background: var(--color-border-tertiary);\n  pointer-events: none;\n}\n\n.mobile-sheet-nav__brand {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  min-width: 0;\n}\n\n.mobile-sheet-nav__logo {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dimension-size-500);\n  height: var(--dimension-size-500);\n  padding: var(--dimension-space-100);\n  box-sizing: border-box;\n  color: var(--color-foreground-primary);\n}\n\n.mobile-sheet-nav__logo-mark {\n  width: var(--dimension-iconography-lg);\n  height: var(--dimension-iconography-lg);\n  flex: 0 0 auto;\n}\n\n.mobile-sheet-nav__context {\n  justify-self: center;\n}\n\n.mobile-sheet-nav__actions {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n}\n\n.mobile-sheet-nav__body {\n  min-height: 0;\n  overflow: auto;\n  overscroll-behavior: contain;\n  padding: var(--dimension-space-200);\n}\n\n.mobile-sheet-nav__items {\n  display: grid;\n  gap: var(--dimension-space-100);\n}\n\n.mobile-sheet-nav__item {\n  appearance: none;\n  width: 100%;\n  height: var(--ds-control-height);\n  min-height: var(--ds-control-height);\n  padding-inline: var(--ds-control-padding-inline);\n  border: 0;\n  border-radius: var(--ds-control-radius);\n  background: transparent;\n  color: var(--color-foreground-secondary);\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: var(--ds-control-gap);\n  cursor: default;\n  text-align: start;\n  box-sizing: border-box;\n}\n\n.mobile-sheet-nav__item--selected {\n  color: var(--color-foreground-primary);\n}\n\n.mobile-sheet-nav__item-label {\n  min-width: 0;\n  padding-inline: var(--ds-control-label-inset);\n}\n\n.mobile-sheet-nav__dot {\n  margin-inline-start: auto;\n}\n",
       "type": "registry:ui"
     },
     {

package/dist/mcp-data/registry/panel-nav.json

@@ -619,7 +619,7 @@
   "files": [
     {
       "path": "src/wc/components/PanelNav/PanelNav.css",
-      "content": "@import '../../utils/control-density.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/scrollbar-hidden.css';\n\n/* ── Theme variables ──────────────────────────────────────────────────────── */\n\n.panel-nav {\n  /* ─ Sizes ─ */\n  --_nav-width:              var(--dimension-panel-width-2xs);\n  --_nav-width-collapsed:    var(--dimension-size-600);\n  --_nav-item-height:        var(--dimension-size-400, 32px);\n  --_nav-padding-x:          var(--dimension-space-100, 8px);\n  --_nav-padding-y:          var(--dimension-space-100, 8px);\n  /* gear button outer width = padding*2 + icon */\n  --_nav-footer-btn-w:       calc(var(--dimension-space-075, 6px) * 2 + var(--dimension-iconography-md, 20px));\n\n  /* ─ Motion ─ */\n  /* --ds-panel-nav-speed: unitless multiplier; override in Storybook to slow-mo (e.g. 10 = 10×).\n     *-dur vars are duration-only (needed for calc); *-motion vars add easing for use in transitions. */\n  --_nav-speed:               var(--ds-panel-nav-speed, 1);\n  --_nav-expand-dur:          calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));\n  --_nav-expand-motion:       var(--_nav-expand-dur) var(--effect-animation-easing-ease-in-out, ease);\n  --_nav-label-fade-dur:      calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));\n  --_nav-label-fade-motion:   var(--_nav-label-fade-dur) var(--effect-animation-easing-ease-in-out, ease);\n  --_nav-label-fade-out-dur:  calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));\n  --_nav-label-fade-out-motion: var(--_nav-label-fade-out-dur) var(--effect-animation-easing-ease-in-out, ease);\n\n  /* ─ Colours – default chrome (app surfaces) ─ */\n  --_nav-bg:           var(--color-background-secondary);\n  --_nav-border:       var(--color-border-tertiary);\n  --_nav-divider:      var(--color-border-tertiary);\n  --_nav-fg-primary:   var(--color-foreground-primary);\n  --_nav-fg-secondary: var(--color-foreground-secondary);\n  --_nav-fg-tertiary:  var(--color-foreground-tertiary);\n  --_nav-hover:        var(--color-interaction-hover);\n  --_nav-pressed:      var(--color-interaction-pressed);\n  --_nav-focus:        var(--color-interaction-focus);\n  --_nav-dot:          var(--color-foreground-bold-brand);\n  --ds-interaction-hover: var(--_nav-hover);\n  --ds-interaction-pressed: var(--_nav-pressed);\n  --ds-focus-ring-color: var(--_nav-focus);\n}\n\n/* ── Default chrome overrides ────────────────────────────────────────────── */\n\n/* Shell-owned chrome (bg + wash) — panel is a transparent frame. */\n:host-context(ds-shell-app:not([gradient-preset='none'])) .panel-nav {\n  background-color: transparent;\n}\n\n/* Style slots — same app tokens for now; hook texture/glyph layers on these classes later. */\n.panel-nav--dashboard,\n.panel-nav--settings {\n  --_nav-bg:           var(--color-background-secondary);\n  --_nav-border:       var(--color-border-tertiary);\n  --_nav-divider:      var(--color-border-tertiary);\n  --_nav-fg-primary:   var(--color-foreground-primary);\n  --_nav-fg-secondary: var(--color-foreground-secondary);\n  --_nav-fg-tertiary:  var(--color-foreground-tertiary);\n  --_nav-hover:        var(--color-interaction-hover);\n  --_nav-pressed:      var(--color-interaction-pressed);\n  --_nav-focus:        var(--color-interaction-focus);\n  --_nav-dot:          var(--color-foreground-bold-brand);\n  --ds-interaction-hover: var(--_nav-hover);\n  --ds-interaction-pressed: var(--_nav-pressed);\n  --ds-focus-ring-color: var(--_nav-focus);\n}\n\n/* ── Shell ───────────────────────────────────────────────────────────────── */\n\n.panel-nav {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: var(--_nav-width);\n  min-width: var(--_nav-width);\n  height: 100%;\n  background-color: var(--_nav-bg);\n  border-right: var(--dimension-stroke-width-012, 1px) solid var(--_nav-border);\n  box-sizing: border-box;\n  overflow: visible;\n  transition:\n    width var(--_nav-expand-motion),\n    min-width var(--_nav-expand-motion),\n    background-color var(--effect-motion-short-3, 200ms ease),\n    border-color var(--effect-motion-short-3, 200ms ease);\n  font-family: var(--typography-font-family, system-ui);\n  isolation: isolate;\n}\n\n.panel-nav__header,\n.panel-nav__body,\n.panel-nav__footer {\n  position: relative;\n  z-index: 3;\n}\n\n.panel-nav--collapsed {\n  width: var(--_nav-width-collapsed);\n  min-width: var(--_nav-width-collapsed);\n}\n\n/* ── Header ──────────────────────────────────────────────────────────────── */\n\n.panel-nav__header {\n  display: flex;\n  align-items: center;\n  height: var(--dimension-size-600, 48px);\n  padding: var(--dimension-space-100, 8px);\n  flex-shrink: 0;\n  box-sizing: border-box;\n  border-bottom: var(--dimension-stroke-width-012, 1px) solid var(--_nav-divider);\n  transition: border-color var(--effect-motion-short-3, 200ms ease);\n}\n\n.panel-nav__header-btn {\n  all: unset;\n  /* Re-assert after unset — required for `.ds-interaction-fill` stacking. */\n  position: relative;\n  z-index: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--dimension-space-075, 6px);\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025, 2px));\n  cursor: pointer;\n  color: var(--_nav-fg-primary);\n  flex-shrink: 0;\n  box-sizing: border-box;\n  transition: color var(--effect-motion-short-3, 200ms ease);\n  /* Hover/press: `.ds-interaction-fill` (tokens from --_nav-* via --ds-interaction-*). */\n}\n\n.panel-nav--breakpoint-locked .panel-nav__header-btn {\n  cursor: default;\n}\n\n/* Logo — visible by default; instant swap to toggle on hover (no crossfade overlap) */\n.panel-nav__header-logo {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 2;\n  opacity: 1;\n}\n\n.panel-nav__m-mark {\n  width: var(--dimension-iconography-md, 20px);\n  height: var(--dimension-iconography-md, 20px);\n  display: block;\n}\n\n/* Toggle icon — stacked on logo; under hover wash (::after z-index 3) */\n.panel-nav__header-toggle {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.panel-nav:not(.panel-nav--breakpoint-locked) .panel-nav__header-btn:hover .panel-nav__header-logo { opacity: 0; }\n.panel-nav:not(.panel-nav--breakpoint-locked) .panel-nav__header-btn:hover .panel-nav__header-toggle { opacity: 1; }\n\n/* ── Scrollable body ─────────────────────────────────────────────────────── */\n\n.panel-nav__body {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-200, 16px);\n  padding: var(--dimension-space-100, 8px);\n  box-sizing: border-box;\n}\n\n/* ── Group ───────────────────────────────────────────────────────────────── */\n\n.panel-nav__group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050, 4px);\n}\n\n/*\n * Section headers — typography via ds-text (text-caption + emphasis).\n * Element selector so display:flex beats Text's inline-block, and padding\n * isn't clobbered by sharing `.panel-nav__item-label-text` on the same host.\n */\nds-text.panel-nav__group-label {\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  text-transform: uppercase;\n  color: var(--_nav-fg-secondary);\n  user-select: none;\n  height: var(--dimension-size-300, 24px);\n  /* Former nested pad: group-label (075) + item-label-text (025). */\n  padding: 0 calc(var(--dimension-space-075, 6px) + var(--ds-control-label-inset));\n  white-space: nowrap;\n  overflow: hidden;\n  max-height: var(--dimension-size-300, 24px);\n  opacity: 1;\n  transition:\n    opacity var(--_nav-label-fade-motion) 0ms,\n    max-height var(--_nav-label-fade-motion) 0ms,\n    padding var(--_nav-label-fade-motion) 0ms,\n    color var(--effect-motion-short-3, 200ms ease);\n}\n\n/* ── Item ────────────────────────────────────────────────────────────────── */\n\n.panel-nav__item {\n  all: unset;\n  /* Re-assert after unset — required for `.ds-interaction-fill` stacking. */\n  position: relative;\n  z-index: 0;\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050, 4px);\n  padding: 0 var(--dimension-space-075, 6px);\n  height: var(--dimension-size-400, 32px);\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025, 2px));\n  cursor: pointer;\n  color: var(--_nav-fg-secondary);\n  box-sizing: border-box;\n  width: 100%;\n  user-select: none;\n  transition: color var(--effect-motion-short-1, 50ms ease-in-out);\n  /* Hover/press: `.ds-interaction-fill` — no --selected (icon/type weight only). */\n}\n\n/* ── Active item ─────────────────────────────────────────────────────────── */\n\n.panel-nav__item--active {\n  color: var(--_nav-fg-primary);\n  /* Bold typography via ds-text (text-body-medium + emphasis) on the label */\n}\n\n/* ── Item icon ───────────────────────────────────────────────────────────── */\n\n.panel-nav__item-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--dimension-iconography-md, 20px);\n  height: var(--dimension-iconography-md, 20px);\n  position: relative;\n  z-index: 2;\n}\n\n/* ── Item label ──────────────────────────────────────────────────────────── */\n\n.panel-nav__item-label {\n  position: relative;\n  z-index: 2;\n  flex: 1;\n  min-width: 0;\n  height: var(--typography-lineheight-md, 20px);\n  opacity: 1;\n  /* Gradient wipe: mask sweeps left-to-right on expand, right-to-left on collapse */\n  /* stylelint-disable-next-line color-named -- mask luminance stops, not theme colors */\n  mask-image: linear-gradient(to right, black 50%, transparent 100%);\n  /* stylelint-disable-next-line color-named -- mask luminance stops, not theme colors */\n  -webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%);\n  mask-size: 200% 100%;\n  -webkit-mask-size: 200% 100%;\n  mask-position: 0% 0;\n  -webkit-mask-position: 0% 0;\n  transition:\n    opacity var(--_nav-label-fade-motion) 0ms,\n    mask-position var(--_nav-label-fade-motion) 0ms,\n    -webkit-mask-position var(--_nav-label-fade-motion) 0ms;\n}\n\n.panel-nav__item-label-text {\n  padding: 0 var(--ds-control-label-inset);\n}\n\n/* ── Item notification dot — 20px suffix zone matches the icon geometry ──── */\n\n.panel-nav__item-dot-box {\n  position: absolute;\n  z-index: 2;\n  right: var(--dimension-space-075, 6px);\n  top: var(--dimension-space-075, 6px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dimension-iconography-md, 20px);\n  height: var(--dimension-iconography-md, 20px);\n  pointer-events: none;\n}\n\n.panel-nav__item-dot {\n  transition:\n    transform var(--_nav-expand-motion);\n}\n\n.panel-nav--collapsed .panel-nav__item-dot {\n  transform: translate(\n    calc(var(--dimension-space-075, 6px) + var(--dimension-stroke-width-012, 1px)),\n    calc(0px - var(--dimension-space-075, 6px) - var(--dimension-stroke-width-012, 1px))\n  );\n}\n\n.panel-nav--animating .panel-nav__item-label {\n  text-overflow: clip;\n}\n\n.panel-nav--collapsed .panel-nav__item-label {\n  opacity: 0;\n  pointer-events: none;\n  text-overflow: clip;\n  mask-position: 100% 0;\n  -webkit-mask-position: 100% 0;\n  transition:\n    opacity var(--_nav-label-fade-out-motion) 0ms,\n    mask-position var(--_nav-label-fade-out-motion) 0ms,\n    -webkit-mask-position var(--_nav-label-fade-out-motion) 0ms;\n}\n\n.panel-nav--collapsed ds-text.panel-nav__group-label {\n  opacity: 0;\n  max-height: 0;\n  padding: 0 calc(var(--dimension-space-075, 6px) + var(--ds-control-label-inset));\n  pointer-events: none;\n  transition:\n    opacity var(--_nav-label-fade-out-motion) 0ms,\n    max-height var(--_nav-label-fade-out-motion) 0ms,\n    padding var(--_nav-label-fade-out-motion) 0ms,\n    color var(--effect-motion-short-3, 200ms ease);\n}\n\n/* ── Footer ──────────────────────────────────────────────────────────────── */\n\n.panel-nav__footer {\n  position: relative;\n  flex-shrink: 0;\n  /* single row: padding*2 + item */\n  height: calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height));\n  transition: height var(--_nav-expand-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer {\n  /* two rows: padding*2 + item*2 + gap */\n  height: calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height) * 2 + var(--dimension-space-050, 4px));\n}\n\n/* ── Footer icon button (gear / dashboard) ───────────────────────────────── */\n\n.panel-nav__footer-btn {\n  position: absolute;\n  left: var(--_nav-padding-x);\n  top: var(--_nav-padding-y);\n  --ds-button-unfilled-fg: var(--_nav-fg-secondary);\n  --ds-button-unfilled-fg-active: var(--_nav-fg-primary);\n  --ds-interaction-hover: var(--_nav-hover);\n  --ds-interaction-pressed: var(--_nav-pressed);\n  --ds-focus-ring-color: var(--_nav-focus);\n}\n\n/* ── Footer user — absolutely positioned, slides from row to below gear ───── */\n\n.panel-nav__footer-user {\n  position: absolute;\n  /* Expanded row: balanced shell inset with an 8px gear-to-user gap. */\n  left: calc(var(--_nav-padding-x) + var(--_nav-footer-btn-w) + var(--dimension-space-100, 8px));\n  right: var(--_nav-padding-x);\n  top: var(--_nav-padding-y);\n  width: auto;\n  min-width: 0;\n  transition:\n    left var(--_nav-expand-motion),\n    right var(--_nav-expand-motion),\n    top var(--_nav-expand-motion);\n}\n\n/* Popup-open state keeps the native footer trigger visibly pressed. */\n.panel-nav__footer-user--menu-expanded::after,\n.panel-nav__footer-user--menu-expanded:hover:not(:disabled)::after {\n  background: var(--_nav-pressed);\n}\n\n.panel-nav__footer-user--menu-expanded {\n  color: var(--_nav-fg-primary);\n}\n\n.panel-nav--collapsed .panel-nav__footer-user {\n  /* Compact column keeps the intentionally tighter 4px vertical gap. */\n  left: var(--_nav-padding-x);\n  top: calc(var(--_nav-padding-y) + var(--_nav-item-height) + var(--dimension-space-050, 4px));\n}\n\n/* Label: absolute so it stays in place and only fades — no mask slide */\n.panel-nav__footer-user-label {\n  text-align: right;\n  position: absolute;\n  left: var(--dimension-space-075, 6px);\n  right: calc(var(--dimension-space-075, 6px) + var(--dimension-iconography-md, 20px) + var(--dimension-space-050, 4px));\n  top: 50%;\n  transform: translateY(-50%);\n  flex: none;\n  height: var(--typography-lineheight-md, 20px);\n  mask-image: none;\n  -webkit-mask-image: none;\n  transition: opacity var(--_nav-label-fade-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-user-label {\n  opacity: 0;\n  pointer-events: none;\n  mask-position: 0% 0;\n  -webkit-mask-position: 0% 0;\n}\n\n/* ── Footer user icon — cross-fades chevron ↔ circle+initial ────────────── */\n\n/* Absolute — right-anchored in expanded, left-anchored in collapsed to match regular item icon position */\n.panel-nav__footer-user-icon {\n  position: absolute;\n  left: calc(100% - var(--dimension-iconography-md, 20px) - var(--dimension-space-075, 6px));\n  top: 0;\n  bottom: 0;\n  height: auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: left var(--_nav-expand-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-user-icon {\n  left: var(--dimension-space-075, 6px);\n}\n\n.panel-nav__footer-icon-expanded,\n.panel-nav__footer-icon-collapsed {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.panel-nav__footer-icon-expanded {\n  opacity: 1;\n  transition: opacity var(--_nav-label-fade-motion);\n}\n\n.panel-nav__footer-icon-collapsed {\n  opacity: 0;\n  transition: opacity var(--_nav-label-fade-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-icon-expanded {\n  opacity: 0;\n  transition: opacity var(--_nav-label-fade-out-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-icon-collapsed {\n  opacity: 1;\n  transition: opacity var(--_nav-label-fade-out-motion);\n}\n\n/* ── User initial — overlaid on the circle icon ─────────────────────────── */\n\n/*\n * Center the caption glyph on the Circle icon. Don't use inset:0 + flex — the\n * inner `.ds-text__element { width: 100% }` stretches and left-aligns the letter.\n * Translate-centering keeps the complete caption metric box on the icon center;\n * the caption variant remains the sole owner of its line-height.\n * (Do not set `inset: auto` after top/left — it resets them.)\n */\nds-text.panel-nav__user-initial,\nds-text.panel-nav__user-initial.ds-text--caption {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  right: auto;\n  bottom: auto;\n  transform: translate(-50%, -50%);\n  display: block;\n  width: max-content;\n  max-width: none;\n  min-width: 0;\n  text-align: center;\n  color: inherit;\n  pointer-events: none;\n}\n\n/* ── Drag-to-resize handle ───────────────────────────────────────────────── */\n\n/* The resize overlay line — extends past the right edge; keep above workspace content */\n.panel-nav__resize-handle {\n  position: absolute;\n  top: 0;\n  /* Centered on the right edge: --dimension-space-050 outside + inside = --dimension-space-100 hit zone */\n  right: var(--dimension-space-n050, -4px);\n  bottom: 0;\n  width: var(--dimension-space-100, 8px);\n  z-index: 20;\n  cursor: ew-resize;\n  touch-action: none;\n  /* Needs a real background for Safari hit-testing */\n  background: transparent;\n}\n\n/* Safari requires non-transparent fill for hit testing */\n.panel-nav__resize-handle::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  /* stylelint-disable-next-line color-named -- near-invisible hit-test fill; not a theme color */\n  background: rgba(0, 0, 0, 0.001);\n}\n\n/* Resize overlay line */\n.panel-nav__resize-handle::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  width: var(--dimension-stroke-width-025, 2px);\n  background: var(--color-foreground-primary);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--effect-motion-short-2, 100ms ease-in-out);\n}\n\n.panel-nav__resize-handle--overlay::after {\n  opacity: 1;\n}\n\n/* ── Reduced motion ──────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .panel-nav,\n  .panel-nav *,\n  .panel-nav *::before,\n  .panel-nav *::after,\n  .panel-nav__resize-handle,\n  .panel-nav__resize-handle::before,\n  .panel-nav__resize-handle::after {\n    /* Near-instant — browsers treat 0 as \"no transition\" and can skip the end state. */\n    transition-duration: var(--effect-animation-duration-instant) !important;\n    animation-duration: var(--effect-animation-duration-instant) !important;\n    transition-delay: var(--effect-animation-duration-instant) !important;\n  }\n}\n",
+      "content": "@import '../../utils/control-density.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/scrollbar-hidden.css';\n\n/* ── Theme variables ──────────────────────────────────────────────────────── */\n\n.panel-nav {\n  /* ─ Sizes ─ */\n  --_nav-width:              var(--dimension-panel-width-2xs);\n  --_nav-width-collapsed:    var(--dimension-size-600);\n  --_nav-item-height:        var(--dimension-size-400, 32px);\n  --_nav-padding-x:          var(--dimension-space-100, 8px);\n  --_nav-padding-y:          var(--dimension-space-100, 8px);\n  /* gear button outer width = padding*2 + icon */\n  --_nav-footer-btn-w:       calc(var(--dimension-space-075, 6px) * 2 + var(--dimension-iconography-md, 20px));\n\n  /* ─ Motion ─ */\n  /* --ds-panel-nav-speed: unitless multiplier; override in Storybook to slow-mo (e.g. 10 = 10×).\n     *-dur vars are duration-only (needed for calc); *-motion vars add easing for use in transitions. */\n  --_nav-speed:               var(--ds-panel-nav-speed, 1);\n  --_nav-expand-dur:          calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));\n  --_nav-expand-motion:       var(--_nav-expand-dur) var(--effect-animation-easing-ease-in-out, ease);\n  --_nav-label-fade-dur:      calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));\n  --_nav-label-fade-motion:   var(--_nav-label-fade-dur) var(--effect-animation-easing-ease-in-out, ease);\n  --_nav-label-fade-out-dur:  calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));\n  --_nav-label-fade-out-motion: var(--_nav-label-fade-out-dur) var(--effect-animation-easing-ease-in-out, ease);\n\n  /* ─ Colours – default chrome (app surfaces) ─ */\n  --_nav-bg:           var(--color-background-secondary);\n  --_nav-border:       var(--color-border-tertiary);\n  --_nav-divider:      var(--color-border-tertiary);\n  --_nav-fg-primary:   var(--color-foreground-primary);\n  --_nav-fg-secondary: var(--color-foreground-secondary);\n  --_nav-fg-tertiary:  var(--color-foreground-tertiary);\n  --_nav-hover:        var(--color-interaction-hover);\n  --_nav-pressed:      var(--color-interaction-pressed);\n  --_nav-focus:        var(--color-interaction-focus);\n  --_nav-dot:          var(--color-foreground-bold-brand);\n  --ds-interaction-hover: var(--_nav-hover);\n  --ds-interaction-pressed: var(--_nav-pressed);\n  --ds-focus-ring-color: var(--_nav-focus);\n}\n\n/* ── Default chrome overrides ────────────────────────────────────────────── */\n\n/* Shell-owned chrome (bg + wash) — panel is a transparent frame. */\n:host-context(ds-shell-app:not([gradient-preset='none'])) .panel-nav {\n  background-color: transparent;\n}\n\n/* Style slots — same app tokens for now; hook texture/glyph layers on these classes later. */\n.panel-nav--dashboard,\n.panel-nav--settings {\n  --_nav-bg:           var(--color-background-secondary);\n  --_nav-border:       var(--color-border-tertiary);\n  --_nav-divider:      var(--color-border-tertiary);\n  --_nav-fg-primary:   var(--color-foreground-primary);\n  --_nav-fg-secondary: var(--color-foreground-secondary);\n  --_nav-fg-tertiary:  var(--color-foreground-tertiary);\n  --_nav-hover:        var(--color-interaction-hover);\n  --_nav-pressed:      var(--color-interaction-pressed);\n  --_nav-focus:        var(--color-interaction-focus);\n  --_nav-dot:          var(--color-foreground-bold-brand);\n  --ds-interaction-hover: var(--_nav-hover);\n  --ds-interaction-pressed: var(--_nav-pressed);\n  --ds-focus-ring-color: var(--_nav-focus);\n}\n\n/* ── Shell ───────────────────────────────────────────────────────────────── */\n\n.panel-nav {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: var(--_nav-width);\n  min-width: var(--_nav-width);\n  height: 100%;\n  background-color: var(--_nav-bg);\n  border-right: var(--dimension-stroke-width-012, 1px) solid var(--_nav-border);\n  box-sizing: border-box;\n  overflow: visible;\n  transition:\n    width var(--_nav-expand-motion),\n    min-width var(--_nav-expand-motion),\n    background-color var(--effect-motion-short-3, 200ms ease),\n    border-color var(--effect-motion-short-3, 200ms ease);\n  font-family: var(--typography-font-family, system-ui);\n  isolation: isolate;\n}\n\n.panel-nav__header,\n.panel-nav__body,\n.panel-nav__footer {\n  position: relative;\n  z-index: 3;\n}\n\n.panel-nav--collapsed {\n  width: var(--_nav-width-collapsed);\n  min-width: var(--_nav-width-collapsed);\n}\n\n/* ── Header ──────────────────────────────────────────────────────────────── */\n\n.panel-nav__header {\n  display: flex;\n  align-items: center;\n  height: var(--dimension-size-600, 48px);\n  padding: var(--dimension-space-100, 8px);\n  flex-shrink: 0;\n  box-sizing: border-box;\n  border-bottom: var(--dimension-stroke-width-012, 1px) solid var(--_nav-divider);\n  transition: border-color var(--effect-motion-short-3, 200ms ease);\n}\n\n.panel-nav__header-btn {\n  all: unset;\n  /* Re-assert after unset — required for `.ds-interaction-fill` stacking. */\n  position: relative;\n  z-index: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--dimension-space-075, 6px);\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025, 2px));\n  cursor: default;\n  color: var(--_nav-fg-primary);\n  flex-shrink: 0;\n  box-sizing: border-box;\n  transition: color var(--effect-motion-short-3, 200ms ease);\n  /* Hover/press: `.ds-interaction-fill` (tokens from --_nav-* via --ds-interaction-*). */\n}\n\n.panel-nav--breakpoint-locked .panel-nav__header-btn {\n  cursor: default;\n}\n\n/* Logo — visible by default; instant swap to toggle on hover (no crossfade overlap) */\n.panel-nav__header-logo {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 2;\n  opacity: 1;\n}\n\n.panel-nav__m-mark {\n  width: var(--dimension-iconography-md, 20px);\n  height: var(--dimension-iconography-md, 20px);\n  display: block;\n}\n\n/* Toggle icon — stacked on logo; under hover wash (::after z-index 3) */\n.panel-nav__header-toggle {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.panel-nav:not(.panel-nav--breakpoint-locked) .panel-nav__header-btn:hover .panel-nav__header-logo { opacity: 0; }\n.panel-nav:not(.panel-nav--breakpoint-locked) .panel-nav__header-btn:hover .panel-nav__header-toggle { opacity: 1; }\n\n/* ── Scrollable body ─────────────────────────────────────────────────────── */\n\n.panel-nav__body {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-200, 16px);\n  padding: var(--dimension-space-100, 8px);\n  box-sizing: border-box;\n}\n\n/* ── Group ───────────────────────────────────────────────────────────────── */\n\n.panel-nav__group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050, 4px);\n}\n\n/*\n * Section headers — typography via ds-text (text-caption + emphasis).\n * Element selector so display:flex beats Text's inline-block, and padding\n * isn't clobbered by sharing `.panel-nav__item-label-text` on the same host.\n */\nds-text.panel-nav__group-label {\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  text-transform: uppercase;\n  color: var(--_nav-fg-secondary);\n  user-select: none;\n  height: var(--dimension-size-300, 24px);\n  /* Former nested pad: group-label (075) + item-label-text (025). */\n  padding: 0 calc(var(--dimension-space-075, 6px) + var(--ds-control-label-inset));\n  white-space: nowrap;\n  overflow: hidden;\n  max-height: var(--dimension-size-300, 24px);\n  opacity: 1;\n  transition:\n    opacity var(--_nav-label-fade-motion) 0ms,\n    max-height var(--_nav-label-fade-motion) 0ms,\n    padding var(--_nav-label-fade-motion) 0ms,\n    color var(--effect-motion-short-3, 200ms ease);\n}\n\n/* ── Item ────────────────────────────────────────────────────────────────── */\n\n.panel-nav__item {\n  all: unset;\n  /* Re-assert after unset — required for `.ds-interaction-fill` stacking. */\n  position: relative;\n  z-index: 0;\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050, 4px);\n  padding: 0 var(--dimension-space-075, 6px);\n  height: var(--dimension-size-400, 32px);\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025, 2px));\n  cursor: default;\n  color: var(--_nav-fg-secondary);\n  box-sizing: border-box;\n  width: 100%;\n  user-select: none;\n  transition: color var(--effect-motion-short-1, 50ms ease-in-out);\n  /* Hover/press: `.ds-interaction-fill` — no --selected (icon/type weight only). */\n}\n\n/* ── Active item ─────────────────────────────────────────────────────────── */\n\n.panel-nav__item--active {\n  color: var(--_nav-fg-primary);\n  /* Bold typography via ds-text (text-body-medium + emphasis) on the label */\n}\n\n/* ── Item icon ───────────────────────────────────────────────────────────── */\n\n.panel-nav__item-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--dimension-iconography-md, 20px);\n  height: var(--dimension-iconography-md, 20px);\n  position: relative;\n  z-index: 2;\n}\n\n/* ── Item label ──────────────────────────────────────────────────────────── */\n\n.panel-nav__item-label {\n  position: relative;\n  z-index: 2;\n  flex: 1;\n  min-width: 0;\n  height: var(--typography-lineheight-md, 20px);\n  opacity: 1;\n  /* Gradient wipe: mask sweeps left-to-right on expand, right-to-left on collapse */\n  /* stylelint-disable-next-line color-named -- mask luminance stops, not theme colors */\n  mask-image: linear-gradient(to right, black 50%, transparent 100%);\n  /* stylelint-disable-next-line color-named -- mask luminance stops, not theme colors */\n  -webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%);\n  mask-size: 200% 100%;\n  -webkit-mask-size: 200% 100%;\n  mask-position: 0% 0;\n  -webkit-mask-position: 0% 0;\n  transition:\n    opacity var(--_nav-label-fade-motion) 0ms,\n    mask-position var(--_nav-label-fade-motion) 0ms,\n    -webkit-mask-position var(--_nav-label-fade-motion) 0ms;\n}\n\n.panel-nav__item-label-text {\n  padding: 0 var(--ds-control-label-inset);\n}\n\n/* ── Item notification dot — 20px suffix zone matches the icon geometry ──── */\n\n.panel-nav__item-dot-box {\n  position: absolute;\n  z-index: 2;\n  right: var(--dimension-space-075, 6px);\n  top: var(--dimension-space-075, 6px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dimension-iconography-md, 20px);\n  height: var(--dimension-iconography-md, 20px);\n  pointer-events: none;\n}\n\n.panel-nav__item-dot {\n  transition:\n    transform var(--_nav-expand-motion);\n}\n\n.panel-nav--collapsed .panel-nav__item-dot {\n  transform: translate(\n    calc(var(--dimension-space-075, 6px) + var(--dimension-stroke-width-012, 1px)),\n    calc(0px - var(--dimension-space-075, 6px) - var(--dimension-stroke-width-012, 1px))\n  );\n}\n\n.panel-nav--animating .panel-nav__item-label {\n  text-overflow: clip;\n}\n\n.panel-nav--collapsed .panel-nav__item-label {\n  opacity: 0;\n  pointer-events: none;\n  text-overflow: clip;\n  mask-position: 100% 0;\n  -webkit-mask-position: 100% 0;\n  transition:\n    opacity var(--_nav-label-fade-out-motion) 0ms,\n    mask-position var(--_nav-label-fade-out-motion) 0ms,\n    -webkit-mask-position var(--_nav-label-fade-out-motion) 0ms;\n}\n\n.panel-nav--collapsed ds-text.panel-nav__group-label {\n  opacity: 0;\n  max-height: 0;\n  padding: 0 calc(var(--dimension-space-075, 6px) + var(--ds-control-label-inset));\n  pointer-events: none;\n  transition:\n    opacity var(--_nav-label-fade-out-motion) 0ms,\n    max-height var(--_nav-label-fade-out-motion) 0ms,\n    padding var(--_nav-label-fade-out-motion) 0ms,\n    color var(--effect-motion-short-3, 200ms ease);\n}\n\n/* ── Footer ──────────────────────────────────────────────────────────────── */\n\n.panel-nav__footer {\n  position: relative;\n  flex-shrink: 0;\n  /* single row: padding*2 + item */\n  height: calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height));\n  transition: height var(--_nav-expand-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer {\n  /* two rows: padding*2 + item*2 + gap */\n  height: calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height) * 2 + var(--dimension-space-050, 4px));\n}\n\n/* ── Footer icon button (gear / dashboard) ───────────────────────────────── */\n\n.panel-nav__footer-btn {\n  position: absolute;\n  left: var(--_nav-padding-x);\n  top: var(--_nav-padding-y);\n  --ds-button-unfilled-fg: var(--_nav-fg-secondary);\n  --ds-button-unfilled-fg-active: var(--_nav-fg-primary);\n  --ds-interaction-hover: var(--_nav-hover);\n  --ds-interaction-pressed: var(--_nav-pressed);\n  --ds-focus-ring-color: var(--_nav-focus);\n}\n\n/* ── Footer user — absolutely positioned, slides from row to below gear ───── */\n\n.panel-nav__footer-user {\n  position: absolute;\n  /* Expanded row: balanced shell inset with an 8px gear-to-user gap. */\n  left: calc(var(--_nav-padding-x) + var(--_nav-footer-btn-w) + var(--dimension-space-100, 8px));\n  right: var(--_nav-padding-x);\n  top: var(--_nav-padding-y);\n  width: auto;\n  min-width: 0;\n  transition:\n    left var(--_nav-expand-motion),\n    right var(--_nav-expand-motion),\n    top var(--_nav-expand-motion);\n}\n\n/* Popup-open state keeps the native footer trigger visibly pressed. */\n.panel-nav__footer-user--menu-expanded::after,\n.panel-nav__footer-user--menu-expanded:hover:not(:disabled)::after {\n  background: var(--_nav-pressed);\n}\n\n.panel-nav__footer-user--menu-expanded {\n  color: var(--_nav-fg-primary);\n}\n\n.panel-nav--collapsed .panel-nav__footer-user {\n  /* Compact column keeps the intentionally tighter 4px vertical gap. */\n  left: var(--_nav-padding-x);\n  top: calc(var(--_nav-padding-y) + var(--_nav-item-height) + var(--dimension-space-050, 4px));\n}\n\n/* Label: absolute so it stays in place and only fades — no mask slide */\n.panel-nav__footer-user-label {\n  text-align: right;\n  position: absolute;\n  left: var(--dimension-space-075, 6px);\n  right: calc(var(--dimension-space-075, 6px) + var(--dimension-iconography-md, 20px) + var(--dimension-space-050, 4px));\n  top: 50%;\n  transform: translateY(-50%);\n  flex: none;\n  height: var(--typography-lineheight-md, 20px);\n  mask-image: none;\n  -webkit-mask-image: none;\n  transition: opacity var(--_nav-label-fade-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-user-label {\n  opacity: 0;\n  pointer-events: none;\n  mask-position: 0% 0;\n  -webkit-mask-position: 0% 0;\n}\n\n/* ── Footer user icon — cross-fades chevron ↔ circle+initial ────────────── */\n\n/* Absolute — right-anchored in expanded, left-anchored in collapsed to match regular item icon position */\n.panel-nav__footer-user-icon {\n  position: absolute;\n  left: calc(100% - var(--dimension-iconography-md, 20px) - var(--dimension-space-075, 6px));\n  top: 0;\n  bottom: 0;\n  height: auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: left var(--_nav-expand-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-user-icon {\n  left: var(--dimension-space-075, 6px);\n}\n\n.panel-nav__footer-icon-expanded,\n.panel-nav__footer-icon-collapsed {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.panel-nav__footer-icon-expanded {\n  opacity: 1;\n  transition: opacity var(--_nav-label-fade-motion);\n}\n\n.panel-nav__footer-icon-collapsed {\n  opacity: 0;\n  transition: opacity var(--_nav-label-fade-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-icon-expanded {\n  opacity: 0;\n  transition: opacity var(--_nav-label-fade-out-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-icon-collapsed {\n  opacity: 1;\n  transition: opacity var(--_nav-label-fade-out-motion);\n}\n\n/* ── User initial — overlaid on the circle icon ─────────────────────────── */\n\n/*\n * Center the caption glyph on the Circle icon. Don't use inset:0 + flex — the\n * inner `.ds-text__element { width: 100% }` stretches and left-aligns the letter.\n * Translate-centering keeps the complete caption metric box on the icon center;\n * the caption variant remains the sole owner of its line-height.\n * (Do not set `inset: auto` after top/left — it resets them.)\n */\nds-text.panel-nav__user-initial,\nds-text.panel-nav__user-initial.ds-text--caption {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  right: auto;\n  bottom: auto;\n  transform: translate(-50%, -50%);\n  display: block;\n  width: max-content;\n  max-width: none;\n  min-width: 0;\n  text-align: center;\n  color: inherit;\n  pointer-events: none;\n}\n\n/* ── Drag-to-resize handle ───────────────────────────────────────────────── */\n\n/* The resize overlay line — extends past the right edge; keep above workspace content */\n.panel-nav__resize-handle {\n  position: absolute;\n  top: 0;\n  /* Centered on the right edge: --dimension-space-050 outside + inside = --dimension-space-100 hit zone */\n  right: var(--dimension-space-n050, -4px);\n  bottom: 0;\n  width: var(--dimension-space-100, 8px);\n  z-index: 20;\n  cursor: ew-resize;\n  touch-action: none;\n  /* Needs a real background for Safari hit-testing */\n  background: transparent;\n}\n\n/* Safari requires non-transparent fill for hit testing */\n.panel-nav__resize-handle::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  /* stylelint-disable-next-line color-named -- near-invisible hit-test fill; not a theme color */\n  background: rgba(0, 0, 0, 0.001);\n}\n\n/* Resize overlay line */\n.panel-nav__resize-handle::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  width: var(--dimension-stroke-width-025, 2px);\n  background: var(--color-foreground-primary);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--effect-motion-short-2, 100ms ease-in-out);\n}\n\n.panel-nav__resize-handle--overlay::after {\n  opacity: 1;\n}\n\n/* ── Reduced motion ──────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .panel-nav,\n  .panel-nav *,\n  .panel-nav *::before,\n  .panel-nav *::after,\n  .panel-nav__resize-handle,\n  .panel-nav__resize-handle::before,\n  .panel-nav__resize-handle::after {\n    /* Near-instant — browsers treat 0 as \"no transition\" and can skip the end state. */\n    transition-duration: var(--effect-animation-duration-instant) !important;\n    animation-duration: var(--effect-animation-duration-instant) !important;\n    transition-delay: var(--effect-animation-duration-instant) !important;\n  }\n}\n",
       "type": "registry:ui"
     },
     {

package/dist/mcp-data/registry/panel-sub-nav.json

@@ -232,7 +232,7 @@
   "files": [
     {
       "path": "src/wc/components/PanelSubNav/PanelSubNav.css",
-      "content": "@import '../../utils/control-density.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n\n:host {\n  display: block;\n  width: 100%;\n}\n\n.panel-sub-nav {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  width: 100%;\n}\n\n.panel-sub-nav__item {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: var(--ds-control-gap);\n  width: 100%;\n  height: var(--ds-control-height);\n  padding: 0 var(--ds-control-padding-inline);\n  box-sizing: border-box;\n  border: none;\n  border-radius: var(--ds-control-radius);\n  background: transparent;\n  color: var(--color-foreground-secondary);\n  cursor: pointer;\n  text-align: left;\n  -webkit-user-select: none;\n  user-select: none;\n  transition: color var(--effect-motion-short-2);\n}\n\n.panel-sub-nav__item--selected {\n  color: var(--color-foreground-primary);\n}\n\n.panel-sub-nav__item--on-medium {\n  color: var(--color-foreground-on-medium-background-secondary);\n}\n\n.panel-sub-nav__item--on-medium.panel-sub-nav__item--selected {\n  color: var(--color-foreground-on-medium-background-primary);\n}\n\n.panel-sub-nav__item--on-bold {\n  color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.panel-sub-nav__item--on-bold.panel-sub-nav__item--selected {\n  color: var(--color-foreground-on-bold-background-primary);\n}\n\n.panel-sub-nav__item--on-strong {\n  color: var(--color-foreground-on-strong-background-secondary);\n}\n\n.panel-sub-nav__item--on-strong.panel-sub-nav__item--selected {\n  color: var(--color-foreground-on-strong-background-primary);\n}\n\n.panel-sub-nav__item--on-translucent {\n  color: var(--color-translucent-foreground-secondary);\n}\n\n.panel-sub-nav__item--on-translucent.panel-sub-nav__item--selected {\n  color: var(--color-translucent-foreground-primary);\n}\n\n.panel-sub-nav__item--on-inverted {\n  color: var(--color-inverted-foreground-secondary);\n}\n\n.panel-sub-nav__item--on-inverted.panel-sub-nav__item--selected {\n  color: var(--color-inverted-foreground-primary);\n}\n\n.panel-sub-nav__item--on-media {\n  color: var(--color-media-foreground-secondary);\n}\n\n.panel-sub-nav__item--on-media.panel-sub-nav__item--selected {\n  color: var(--color-media-foreground-primary);\n}\n\n.panel-sub-nav__item--on-always-dark {\n  color: var(--color-always-dark-foreground-secondary);\n}\n\n.panel-sub-nav__item--on-always-dark.panel-sub-nav__item--selected {\n  color: var(--color-always-dark-foreground-primary);\n}\n\nds-text.panel-sub-nav__label {\n  flex: 1;\n  min-width: 0;\n  padding: 0 var(--ds-control-label-inset);\n}\n",
+      "content": "@import '../../utils/control-density.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n\n:host {\n  display: block;\n  width: 100%;\n}\n\n.panel-sub-nav {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  width: 100%;\n}\n\n.panel-sub-nav__item {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: var(--ds-control-gap);\n  width: 100%;\n  height: var(--ds-control-height);\n  padding: 0 var(--ds-control-padding-inline);\n  box-sizing: border-box;\n  border: none;\n  border-radius: var(--ds-control-radius);\n  background: transparent;\n  color: var(--color-foreground-secondary);\n  cursor: default;\n  text-align: left;\n  -webkit-user-select: none;\n  user-select: none;\n  transition: color var(--effect-motion-short-2);\n}\n\n.panel-sub-nav__item--selected {\n  color: var(--color-foreground-primary);\n}\n\n.panel-sub-nav__item--on-medium {\n  color: var(--color-foreground-on-medium-background-secondary);\n}\n\n.panel-sub-nav__item--on-medium.panel-sub-nav__item--selected {\n  color: var(--color-foreground-on-medium-background-primary);\n}\n\n.panel-sub-nav__item--on-bold {\n  color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.panel-sub-nav__item--on-bold.panel-sub-nav__item--selected {\n  color: var(--color-foreground-on-bold-background-primary);\n}\n\n.panel-sub-nav__item--on-strong {\n  color: var(--color-foreground-on-strong-background-secondary);\n}\n\n.panel-sub-nav__item--on-strong.panel-sub-nav__item--selected {\n  color: var(--color-foreground-on-strong-background-primary);\n}\n\n.panel-sub-nav__item--on-translucent {\n  color: var(--color-translucent-foreground-secondary);\n}\n\n.panel-sub-nav__item--on-translucent.panel-sub-nav__item--selected {\n  color: var(--color-translucent-foreground-primary);\n}\n\n.panel-sub-nav__item--on-inverted {\n  color: var(--color-inverted-foreground-secondary);\n}\n\n.panel-sub-nav__item--on-inverted.panel-sub-nav__item--selected {\n  color: var(--color-inverted-foreground-primary);\n}\n\n.panel-sub-nav__item--on-media {\n  color: var(--color-media-foreground-secondary);\n}\n\n.panel-sub-nav__item--on-media.panel-sub-nav__item--selected {\n  color: var(--color-media-foreground-primary);\n}\n\n.panel-sub-nav__item--on-always-dark {\n  color: var(--color-always-dark-foreground-secondary);\n}\n\n.panel-sub-nav__item--on-always-dark.panel-sub-nav__item--selected {\n  color: var(--color-always-dark-foreground-primary);\n}\n\nds-text.panel-sub-nav__label {\n  flex: 1;\n  min-width: 0;\n  padding: 0 var(--ds-control-label-inset);\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--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: pointer;\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\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--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",
       "type": "registry:ui"
     },
     {

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

@@ -4999,11 +4999,13 @@
             "The fixed groups are Menu plus current area, followed by Search, Inbox, and Agents.",
             "Selection promotes foreground to primary without painting a selected fill; unselected destinations use tertiary foreground.",
             "Opening Mobile Sheet Nav replaces the Menu glyph with Cross while preserving its accessible name.",
-            "Reselecting an active destination does not reset its nested state."
+            "Reselecting an active destination does not reset its nested state.",
+            "Direct touch paints the pressed overlay immediately, keeps a quick tap visible for one short frame, and clears it after release or cancellation without relying on Safari's latch-prone active state."
           ],
           "responsiveBehavior": [
             "Render only below the mobile breakpoint and preserve safe-area clearance.",
-            "The secondary-background bar keeps an 8px outer inset; its two icon-only groups anchor to opposite edges while retaining fixed 40px targets and a divider between Menu and current area."
+            "The secondary-background bar keeps an 8px outer inset; its two icon-only groups anchor to opposite edges while retaining fixed 40px targets and a divider between Menu and current area.",
+            "Bar chrome and its divider are not text-selectable and suppress the iOS touch callout."
           ],
           "references": [
             {

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

@@ -729,7 +729,7 @@
   "files": [
     {
       "path": "src/wc/components/Select/Select.css",
-      "content": "@import '../../utils/choice-list.css';\n@import '../../utils/control-width.css';\n@import '../../utils/search-control.css';\n@import '../../utils/typography.css';\n\n:host(.select-host) {\n  display: inline-flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  position: relative;\n  outline: none;\n  --ds-select-fg: var(--color-foreground-secondary);\n  --ds-select-fg-active: var(--color-foreground-primary);\n  --ds-select-prefix-fg: var(--ds-select-fg);\n  --ds-select-chevron-fg: var(--ds-select-fg);\n  --ds-select-border: var(--color-border-secondary);\n}\n\n:host(.ds-control-width--fill),\n:host(.ds-control-width--fill) .trigger {\n  width: 100%;\n}\n\n.trigger {\n  display: inline-flex;\n  align-items: center;\n  justify-content: flex-start;\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n  gap: var(--ds-control-gap, var(--dimension-space-050));\n  background: transparent;\n  border: none;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  color: var(--ds-select-fg);\n  cursor: pointer;\n  font-family: inherit;\n  -webkit-user-select: none;\n  user-select: none;\n  overflow: hidden;\n  transition: color var(--effect-motion-short-2);\n}\n\n.trigger--bordered {\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--ds-select-border);\n}\n\n.trigger--has-value .trigger__label {\n  color: var(--ds-select-fg-active);\n}\n\n.wrapper--error {\n  --ds-interaction-border-width: var(--dimension-stroke-width-018);\n  --ds-interaction-border-color: var(--color-border-bold-negative);\n}\n\n.trigger__prefix,\n.trigger__chevron {\n  position: relative;\n  z-index: 2;\n  flex-shrink: 0;\n  width: var(--ds-control-icon, var(--dimension-iconography-md));\n  height: var(--ds-control-icon, var(--dimension-iconography-md));\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.trigger__prefix {\n  color: var(--ds-select-prefix-fg);\n}\n\n.trigger__chevron {\n  color: var(--ds-select-chevron-fg);\n}\n\n.trigger__label {\n  position: relative;\n  z-index: 2;\n  flex: 1 1 auto;\n  min-width: 0;\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  text-align: left;\n  color: inherit;\n  transition: color var(--effect-motion-short-2);\n}\n\n.select-popup {\n  color: var(--color-foreground-secondary);\n}\n\n.select-option[aria-selected='true'] .ds-choice-item__icon {\n  color: var(--color-foreground-primary);\n}\n\n.error-text {\n  width: 100%;\n}\n\n:host(.select-host--background-medium) {\n  --ds-select-fg: var(--color-foreground-on-medium-background-secondary);\n  --ds-select-fg-active: var(--color-foreground-on-medium-background-primary);\n  --ds-select-border: var(--color-border-on-medium-background-secondary);\n}\n\n:host(.select-host--background-bold) {\n  --ds-select-fg: var(--color-foreground-on-bold-background-secondary);\n  --ds-select-fg-active: var(--color-foreground-on-bold-background-primary);\n  --ds-select-border: var(--color-border-on-bold-background-secondary);\n}\n\n:host(.select-host--background-strong) {\n  --ds-select-fg: var(--color-foreground-on-strong-background-secondary);\n  --ds-select-fg-active: var(--color-foreground-on-strong-background-primary);\n  --ds-select-border: var(--color-border-on-strong-background-secondary);\n}\n\n:host(.select-host--background-translucent) {\n  --ds-select-fg: var(--color-translucent-foreground-secondary);\n  --ds-select-fg-active: var(--color-translucent-foreground-primary);\n  --ds-select-border: var(--color-translucent-border-secondary);\n}\n\n:host(.select-host--background-inverted) {\n  --ds-select-fg: var(--color-inverted-foreground-secondary);\n  --ds-select-fg-active: var(--color-inverted-foreground-primary);\n  --ds-select-border: var(--color-inverted-border-secondary);\n}\n\n:host(.select-host--background-media) {\n  --ds-select-fg: var(--color-media-foreground-secondary);\n  --ds-select-fg-active: var(--color-media-foreground-primary);\n  --ds-select-border: var(--color-media-border-secondary);\n}\n\n:host(.select-host--background-always-dark) {\n  --ds-select-fg: var(--color-always-dark-foreground-secondary);\n  --ds-select-fg-active: var(--color-always-dark-foreground-primary);\n  --ds-select-border: var(--color-always-dark-border-secondary);\n}\n",
+      "content": "@import '../../utils/choice-list.css';\n@import '../../utils/control-width.css';\n@import '../../utils/search-control.css';\n@import '../../utils/typography.css';\n\n:host(.select-host) {\n  display: inline-flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  position: relative;\n  outline: none;\n  --ds-select-fg: var(--color-foreground-secondary);\n  --ds-select-fg-active: var(--color-foreground-primary);\n  --ds-select-prefix-fg: var(--ds-select-fg);\n  --ds-select-chevron-fg: var(--ds-select-fg);\n  --ds-select-border: var(--color-border-secondary);\n}\n\n:host(.ds-control-width--fill),\n:host(.ds-control-width--fill) .trigger {\n  width: 100%;\n}\n\n.trigger {\n  display: inline-flex;\n  align-items: center;\n  justify-content: flex-start;\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n  gap: var(--ds-control-gap, var(--dimension-space-050));\n  background: transparent;\n  border: none;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  color: var(--ds-select-fg);\n  cursor: default;\n  font-family: inherit;\n  -webkit-user-select: none;\n  user-select: none;\n  overflow: hidden;\n  transition: color var(--effect-motion-short-2);\n}\n\n.trigger--bordered {\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--ds-select-border);\n}\n\n.trigger--has-value .trigger__label {\n  color: var(--ds-select-fg-active);\n}\n\n.wrapper--error {\n  --ds-interaction-border-width: var(--dimension-stroke-width-018);\n  --ds-interaction-border-color: var(--color-border-bold-negative);\n}\n\n.trigger__prefix,\n.trigger__chevron {\n  position: relative;\n  z-index: 2;\n  flex-shrink: 0;\n  width: var(--ds-control-icon, var(--dimension-iconography-md));\n  height: var(--ds-control-icon, var(--dimension-iconography-md));\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.trigger__prefix {\n  color: var(--ds-select-prefix-fg);\n}\n\n.trigger__chevron {\n  color: var(--ds-select-chevron-fg);\n}\n\n.trigger__label {\n  position: relative;\n  z-index: 2;\n  flex: 1 1 auto;\n  min-width: 0;\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  text-align: left;\n  color: inherit;\n  transition: color var(--effect-motion-short-2);\n}\n\n.select-popup {\n  color: var(--color-foreground-secondary);\n}\n\n.select-option[aria-selected='true'] .ds-choice-item__icon {\n  color: var(--color-foreground-primary);\n}\n\n.error-text {\n  width: 100%;\n}\n\n:host(.select-host--background-medium) {\n  --ds-select-fg: var(--color-foreground-on-medium-background-secondary);\n  --ds-select-fg-active: var(--color-foreground-on-medium-background-primary);\n  --ds-select-border: var(--color-border-on-medium-background-secondary);\n}\n\n:host(.select-host--background-bold) {\n  --ds-select-fg: var(--color-foreground-on-bold-background-secondary);\n  --ds-select-fg-active: var(--color-foreground-on-bold-background-primary);\n  --ds-select-border: var(--color-border-on-bold-background-secondary);\n}\n\n:host(.select-host--background-strong) {\n  --ds-select-fg: var(--color-foreground-on-strong-background-secondary);\n  --ds-select-fg-active: var(--color-foreground-on-strong-background-primary);\n  --ds-select-border: var(--color-border-on-strong-background-secondary);\n}\n\n:host(.select-host--background-translucent) {\n  --ds-select-fg: var(--color-translucent-foreground-secondary);\n  --ds-select-fg-active: var(--color-translucent-foreground-primary);\n  --ds-select-border: var(--color-translucent-border-secondary);\n}\n\n:host(.select-host--background-inverted) {\n  --ds-select-fg: var(--color-inverted-foreground-secondary);\n  --ds-select-fg-active: var(--color-inverted-foreground-primary);\n  --ds-select-border: var(--color-inverted-border-secondary);\n}\n\n:host(.select-host--background-media) {\n  --ds-select-fg: var(--color-media-foreground-secondary);\n  --ds-select-fg-active: var(--color-media-foreground-primary);\n  --ds-select-border: var(--color-media-border-secondary);\n}\n\n:host(.select-host--background-always-dark) {\n  --ds-select-fg: var(--color-always-dark-foreground-secondary);\n  --ds-select-fg-active: var(--color-always-dark-foreground-primary);\n  --ds-select-border: var(--color-always-dark-border-secondary);\n}\n",
       "type": "registry:ui"
     },
     {

package/dist/mcp-data/registry/shell-gradient-swatch.json

@@ -198,7 +198,7 @@
   "files": [
     {
       "path": "src/wc/components/ShellGradientSwatch/ShellGradientSwatch.css",
-      "content": "@import '../../utils/focus-ring.css';\n@import '../../utils/control-inactive.css';\n\n/**\n * Swatch — 24×24 orb (size-300). Spacing lives on the picker row.\n *\n * Layer stack (bottom → top):\n *   Default:    fill → border → interaction (hover/press)\n *   Selected:   fill → border → interaction → halo → stroke (brand)\n */\n\n:host {\n  box-sizing: border-box;\n  display: inline-flex;\n  flex: 0 0 auto;\n  width: var(--dimension-size-300);\n  height: var(--dimension-size-300);\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.shell-gradient-swatch {\n  position: relative;\n  box-sizing: border-box;\n  width: var(--dimension-size-300);\n  height: var(--dimension-size-300);\n  padding: 0;\n  border: none;\n  border-radius: var(--dimension-radius-half);\n  background: transparent;\n  cursor: pointer;\n  flex-shrink: 0;\n  isolation: isolate;\n}\n\n.shell-gradient-swatch__fill,\n.shell-gradient-swatch__border,\n.shell-gradient-swatch__interaction,\n.shell-gradient-swatch__halo,\n.shell-gradient-swatch__stroke {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  border-radius: inherit;\n  pointer-events: none;\n}\n\n/* 1 — fill */\n.shell-gradient-swatch__fill {\n  z-index: 1;\n  background-color: var(--color-background-secondary);\n  background-image: var(--_swatch-gradient-image);\n  background-repeat: no-repeat;\n  background-size: cover;\n  background-position: 0 0;\n  transition:\n    top var(--_swatch-select-motion),\n    right var(--_swatch-select-motion),\n    bottom var(--_swatch-select-motion),\n    left var(--_swatch-select-motion);\n}\n\n.shell-gradient-swatch--none .shell-gradient-swatch__fill {\n  background-image: none;\n}\n\n.shell-gradient-swatch:not(.shell-gradient-swatch--none) .shell-gradient-swatch__fill {\n  opacity: var(--ds-shell-gradient-opacity, 0.1);\n}\n\n/* 2 — secondary border (matches ds-interaction-fill--bordered) */\n.shell-gradient-swatch__border {\n  z-index: 2;\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-secondary);\n  transition:\n    top var(--_swatch-select-motion),\n    right var(--_swatch-select-motion),\n    bottom var(--_swatch-select-motion),\n    left var(--_swatch-select-motion);\n}\n\n/* 3 — hover / press (over border, under selected chrome) */\n.shell-gradient-swatch__interaction {\n  z-index: 3;\n  background: transparent;\n  transition:\n    top var(--_swatch-select-motion),\n    right var(--_swatch-select-motion),\n    bottom var(--_swatch-select-motion),\n    left var(--_swatch-select-motion),\n    background-color 0s;\n}\n\n.shell-gradient-swatch:hover:not(:disabled) .shell-gradient-swatch__interaction {\n  background: var(--color-interaction-hover);\n}\n\n.shell-gradient-swatch:active:not(:disabled) .shell-gradient-swatch__interaction {\n  background: var(--color-interaction-pressed);\n}\n\n/* 4 — halo gap (selected only) */\n.shell-gradient-swatch__halo {\n  z-index: 4;\n  opacity: 0;\n  transform: scale(1.2);\n  transform-origin: center;\n  box-shadow: inset 0 0 0 var(--_swatch-inner-inset) var(--_swatch-ring-bg);\n  transition:\n    opacity var(--_swatch-select-motion),\n    transform var(--_swatch-select-motion);\n}\n\n/* 5 — brand stroke (selected only) */\n.shell-gradient-swatch__stroke {\n  z-index: 5;\n  opacity: 0;\n  transform: scale(1.2);\n  transform-origin: center;\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);\n  transition:\n    opacity var(--_swatch-select-motion),\n    transform var(--_swatch-select-motion);\n}\n\n.shell-gradient-swatch--selected .shell-gradient-swatch__fill,\n.shell-gradient-swatch--selected .shell-gradient-swatch__border,\n.shell-gradient-swatch--selected .shell-gradient-swatch__interaction {\n  top: var(--_swatch-inner-inset);\n  right: var(--_swatch-inner-inset);\n  bottom: var(--_swatch-inner-inset);\n  left: var(--_swatch-inner-inset);\n}\n\n.shell-gradient-swatch--selected .shell-gradient-swatch__halo,\n.shell-gradient-swatch--selected .shell-gradient-swatch__stroke {\n  opacity: 1;\n  transform: scale(1);\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity). */\n\n@media (prefers-reduced-motion: reduce) {\n  .shell-gradient-swatch__fill,\n  .shell-gradient-swatch__border,\n  .shell-gradient-swatch__interaction,\n  .shell-gradient-swatch__halo,\n  .shell-gradient-swatch__stroke {\n    transition: none;\n  }\n}\n",
+      "content": "@import '../../utils/focus-ring.css';\n@import '../../utils/control-inactive.css';\n\n/**\n * Swatch — 24×24 orb (size-300). Spacing lives on the picker row.\n *\n * Layer stack (bottom → top):\n *   Default:    fill → border → interaction (hover/press)\n *   Selected:   fill → border → interaction → halo → stroke (brand)\n */\n\n:host {\n  box-sizing: border-box;\n  display: inline-flex;\n  flex: 0 0 auto;\n  width: var(--dimension-size-300);\n  height: var(--dimension-size-300);\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.shell-gradient-swatch {\n  position: relative;\n  box-sizing: border-box;\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  flex-shrink: 0;\n  isolation: isolate;\n}\n\n.shell-gradient-swatch__fill,\n.shell-gradient-swatch__border,\n.shell-gradient-swatch__interaction,\n.shell-gradient-swatch__halo,\n.shell-gradient-swatch__stroke {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  border-radius: inherit;\n  pointer-events: none;\n}\n\n/* 1 — fill */\n.shell-gradient-swatch__fill {\n  z-index: 1;\n  background-color: var(--color-background-secondary);\n  background-image: var(--_swatch-gradient-image);\n  background-repeat: no-repeat;\n  background-size: cover;\n  background-position: 0 0;\n  transition:\n    top var(--_swatch-select-motion),\n    right var(--_swatch-select-motion),\n    bottom var(--_swatch-select-motion),\n    left var(--_swatch-select-motion);\n}\n\n.shell-gradient-swatch--none .shell-gradient-swatch__fill {\n  background-image: none;\n}\n\n.shell-gradient-swatch:not(.shell-gradient-swatch--none) .shell-gradient-swatch__fill {\n  opacity: var(--ds-shell-gradient-opacity, 0.1);\n}\n\n/* 2 — secondary border (matches ds-interaction-fill--bordered) */\n.shell-gradient-swatch__border {\n  z-index: 2;\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-secondary);\n  transition:\n    top var(--_swatch-select-motion),\n    right var(--_swatch-select-motion),\n    bottom var(--_swatch-select-motion),\n    left var(--_swatch-select-motion);\n}\n\n/* 3 — hover / press (over border, under selected chrome) */\n.shell-gradient-swatch__interaction {\n  z-index: 3;\n  background: transparent;\n  transition:\n    top var(--_swatch-select-motion),\n    right var(--_swatch-select-motion),\n    bottom var(--_swatch-select-motion),\n    left var(--_swatch-select-motion),\n    background-color 0s;\n}\n\n.shell-gradient-swatch:hover:not(:disabled) .shell-gradient-swatch__interaction {\n  background: var(--color-interaction-hover);\n}\n\n.shell-gradient-swatch:active:not(:disabled) .shell-gradient-swatch__interaction {\n  background: var(--color-interaction-pressed);\n}\n\n/* 4 — halo gap (selected only) */\n.shell-gradient-swatch__halo {\n  z-index: 4;\n  opacity: 0;\n  transform: scale(1.2);\n  transform-origin: center;\n  box-shadow: inset 0 0 0 var(--_swatch-inner-inset) var(--_swatch-ring-bg);\n  transition:\n    opacity var(--_swatch-select-motion),\n    transform var(--_swatch-select-motion);\n}\n\n/* 5 — brand stroke (selected only) */\n.shell-gradient-swatch__stroke {\n  z-index: 5;\n  opacity: 0;\n  transform: scale(1.2);\n  transform-origin: center;\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);\n  transition:\n    opacity var(--_swatch-select-motion),\n    transform var(--_swatch-select-motion);\n}\n\n.shell-gradient-swatch--selected .shell-gradient-swatch__fill,\n.shell-gradient-swatch--selected .shell-gradient-swatch__border,\n.shell-gradient-swatch--selected .shell-gradient-swatch__interaction {\n  top: var(--_swatch-inner-inset);\n  right: var(--_swatch-inner-inset);\n  bottom: var(--_swatch-inner-inset);\n  left: var(--_swatch-inner-inset);\n}\n\n.shell-gradient-swatch--selected .shell-gradient-swatch__halo,\n.shell-gradient-swatch--selected .shell-gradient-swatch__stroke {\n  opacity: 1;\n  transform: scale(1);\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity). */\n\n@media (prefers-reduced-motion: reduce) {\n  .shell-gradient-swatch__fill,\n  .shell-gradient-swatch__border,\n  .shell-gradient-swatch__interaction,\n  .shell-gradient-swatch__halo,\n  .shell-gradient-swatch__stroke {\n    transition: none;\n  }\n}\n",
       "type": "registry:ui"
     },
     {

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

@@ -645,7 +645,7 @@
   "files": [
     {
       "path": "src/wc/components/Slider/Slider.css",
-      "content": "@import '../../utils/control-inactive.css';\n\n:host {\n  --ds-slider-control-size: var(--dimension-size-400);\n  --ds-slider-thumb-size: var(--dimension-size-200);\n  --ds-slider-track-size: var(--dimension-size-100);\n  --ds-slider-track-stroke: var(--dimension-stroke-width-012);\n  --ds-slider-vertical-length: calc(var(--dimension-size-800) * 3);\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  gap: var(--dimension-space-050);\n  width: 100%;\n  color: var(--color-foreground-primary);\n}\n\n:host(.slider--sm) {\n  --ds-slider-control-size: var(--dimension-size-300);\n  --ds-slider-thumb-size: var(--dimension-size-150);\n  --ds-slider-track-size: var(--dimension-size-075);\n}\n\n:host(.slider--xs) {\n  --ds-slider-control-size: var(--dimension-size-200);\n  --ds-slider-thumb-size: var(--dimension-size-100);\n  --ds-slider-track-size: var(--dimension-size-050);\n}\n\n:host(.slider--vertical) {\n  width: fit-content;\n  min-width: var(--dimension-form-width-xs);\n}\n\n.slider__label-row {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--dimension-space-100);\n  min-width: 0;\n}\n\n.slider__label {\n  min-width: 0;\n}\n\n.slider__value {\n  flex-shrink: 0;\n}\n\n.slider__control {\n  position: relative;\n  width: 100%;\n  height: var(--ds-slider-control-size);\n  border-radius: var(--dimension-radius-half);\n  cursor: pointer;\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\n:host {\n  --ds-slider-control-size: var(--dimension-size-400);\n  --ds-slider-thumb-size: var(--dimension-size-200);\n  --ds-slider-track-size: var(--dimension-size-100);\n  --ds-slider-track-stroke: var(--dimension-stroke-width-012);\n  --ds-slider-vertical-length: calc(var(--dimension-size-800) * 3);\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  gap: var(--dimension-space-050);\n  width: 100%;\n  color: var(--color-foreground-primary);\n}\n\n:host(.slider--sm) {\n  --ds-slider-control-size: var(--dimension-size-300);\n  --ds-slider-thumb-size: var(--dimension-size-150);\n  --ds-slider-track-size: var(--dimension-size-075);\n}\n\n:host(.slider--xs) {\n  --ds-slider-control-size: var(--dimension-size-200);\n  --ds-slider-thumb-size: var(--dimension-size-100);\n  --ds-slider-track-size: var(--dimension-size-050);\n}\n\n:host(.slider--vertical) {\n  width: fit-content;\n  min-width: var(--dimension-form-width-xs);\n}\n\n.slider__label-row {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--dimension-space-100);\n  min-width: 0;\n}\n\n.slider__label {\n  min-width: 0;\n}\n\n.slider__value {\n  flex-shrink: 0;\n}\n\n.slider__control {\n  position: relative;\n  width: 100%;\n  height: var(--ds-slider-control-size);\n  border-radius: var(--dimension-radius-half);\n  cursor: default;\n  touch-action: none;\n  user-select: none;\n}\n\n:host(.slider--vertical) .slider__control {\n  align-self: center;\n  width: var(--ds-slider-control-size);\n  height: var(--ds-slider-vertical-length);\n}\n\n:host(.slider--readonly) .slider__control {\n  cursor: default;\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity) on the host. */\n:host(.ds-control-inactive) .slider__control {\n  cursor: not-allowed;\n}\n\n.slider__rail {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  left: 0;\n  height: var(--ds-slider-track-size);\n  overflow: hidden;\n  border-radius: var(--dimension-radius-025);\n  background-color: transparent;\n  box-shadow: inset 0 0 0 var(--ds-slider-track-stroke) var(--color-border-secondary);\n  transform: translateY(-50%);\n  pointer-events: none;\n}\n\n:host(.slider--thumb-center) .slider__rail {\n  right: calc(var(--ds-slider-thumb-size) / 2);\n  left: calc(var(--ds-slider-thumb-size) / 2);\n}\n\n.slider__indicator {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: calc(\n    var(--ds-slider-thumb-size) / 2 +\n      (var(--ds-slider-end-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n  );\n  border-radius: inherit;\n  background-color: var(--color-background-bold-brand);\n}\n\n:host(.slider--range) .slider__indicator {\n  left: calc(\n    var(--ds-slider-thumb-size) / 2 +\n      (var(--ds-slider-start-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n  );\n  width: calc(\n    ((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) / 100) *\n      (100% - var(--ds-slider-thumb-size))\n  );\n}\n\n:host(.slider--thumb-center) .slider__indicator {\n  left: calc(var(--ds-slider-start-pct, 0) * 1%);\n  width: calc((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) * 1%);\n}\n\n.slider__thumb {\n  position: absolute;\n  top: 50%;\n  left: calc((var(--ds-slider-thumb-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)));\n  width: var(--ds-slider-thumb-size);\n  height: var(--ds-slider-thumb-size);\n  transform: translateY(-50%);\n  z-index: 1;\n}\n\n.slider__thumb--active {\n  z-index: 2;\n}\n\n.slider__input {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  opacity: 0;\n  appearance: none;\n  pointer-events: none;\n  z-index: 2;\n}\n\n.slider__thumb-visual {\n  position: absolute;\n  inset: 0;\n  box-sizing: border-box;\n  overflow: visible;\n  border-radius: var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-elevated-sm);\n  pointer-events: none;\n  transition:\n    background-color var(--effect-motion-short-2),\n    box-shadow var(--effect-motion-short-2);\n}\n\n.slider__thumb-wash {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background-color: transparent;\n  transition: background-color var(--effect-motion-short-2);\n}\n\n:host(:not(.slider--readonly):not(.ds-control-inactive)) .slider__thumb:hover .slider__thumb-wash {\n  background-color: var(--color-interaction-hover);\n}\n\n:host([data-dragging]:not(.slider--readonly):not(.ds-control-inactive))\n  .slider__thumb--active .slider__thumb-wash {\n  background-color: var(--color-interaction-pressed);\n}\n\n.slider__input:focus-visible + .slider__thumb-visual,\n:host([data-review-focus]) .slider__thumb[data-index='0'] .slider__thumb-visual {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n:host(.slider--vertical) .slider__rail {\n  top: 0;\n  right: auto;\n  bottom: 0;\n  left: 50%;\n  width: var(--ds-slider-track-size);\n  height: auto;\n  transform: translateX(-50%);\n}\n\n:host(.slider--vertical.slider--thumb-center) .slider__rail {\n  top: calc(var(--ds-slider-thumb-size) / 2);\n  bottom: calc(var(--ds-slider-thumb-size) / 2);\n}\n\n:host(.slider--vertical) .slider__indicator {\n  top: auto;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  width: auto;\n  height: calc(\n    var(--ds-slider-thumb-size) / 2 +\n      (var(--ds-slider-end-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n  );\n}\n\n:host(.slider--vertical.slider--range) .slider__indicator {\n  bottom: calc(\n    var(--ds-slider-thumb-size) / 2 +\n      (var(--ds-slider-start-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n  );\n  height: calc(\n    ((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) / 100) *\n      (100% - var(--ds-slider-thumb-size))\n  );\n}\n\n:host(.slider--vertical.slider--thumb-center) .slider__indicator {\n  bottom: calc(var(--ds-slider-start-pct, 0) * 1%);\n  height: calc((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) * 1%);\n}\n\n:host(.slider--vertical) .slider__thumb {\n  top: auto;\n  bottom: calc((var(--ds-slider-thumb-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)));\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .slider__thumb-visual,\n  .slider__thumb-wash {\n    transition: none;\n  }\n}\n",
       "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: pointer;\n  isolation: isolate;\n}\n\n.swatch-picker__fill,\n.swatch-picker__border,\n.swatch-picker__interaction,\n.swatch-picker__halo,\n.swatch-picker__stroke {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n}\n\n.swatch-picker__fill {\n  z-index: 1;\n  background-color: var(--_swatch-preview-color);\n  background-image: var(--_swatch-preview-image);\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: cover;\n  opacity: var(--_swatch-preview-opacity);\n  transition:\n    inset var(--_swatch-select-motion);\n}\n\n.swatch-picker__border {\n  z-index: 2;\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-secondary);\n  transition:\n    inset var(--_swatch-select-motion);\n}\n\n.swatch-picker__interaction {\n  z-index: 3;\n  background-color: transparent;\n  transition:\n    inset var(--_swatch-select-motion),\n    background-color 0s;\n}\n\n.swatch-picker__option:hover:not(:disabled) .swatch-picker__interaction {\n  background-color: var(--color-interaction-hover);\n}\n\n.swatch-picker__option:active:not(:disabled) .swatch-picker__interaction {\n  background-color: var(--color-interaction-pressed);\n}\n\n.swatch-picker__halo,\n.swatch-picker__stroke {\n  opacity: 0;\n  transform: scale(1.2);\n  transform-origin: center;\n  transition:\n    opacity var(--_swatch-select-motion),\n    transform var(--_swatch-select-motion);\n}\n\n.swatch-picker__halo {\n  z-index: 4;\n  box-shadow: inset 0 0 0 var(--_swatch-inner-inset) var(--_swatch-ring-bg);\n}\n\n.swatch-picker__stroke {\n  z-index: 5;\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);\n}\n\n.swatch-picker__option--selected .swatch-picker__fill,\n.swatch-picker__option--selected .swatch-picker__border,\n.swatch-picker__option--selected .swatch-picker__interaction {\n  inset: var(--_swatch-inner-inset);\n}\n\n.swatch-picker__option--selected .swatch-picker__halo,\n.swatch-picker__option--selected .swatch-picker__stroke {\n  opacity: 1;\n  transform: scale(1);\n}\n\n.swatch-picker__divider {\n  flex: 0 0 auto;\n  align-self: center;\n  width: var(--dimension-stroke-width-012);\n  height: var(--dimension-size-300);\n  background-color: var(--color-border-tertiary);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .swatch-picker__fill,\n  .swatch-picker__border,\n  .swatch-picker__interaction,\n  .swatch-picker__halo,\n  .swatch-picker__stroke {\n    transition: none;\n  }\n}\n",
+      "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",
       "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: pointer;\n  user-select: none;\n  outline: none;\n  background-color: transparent;\n  box-shadow: inset 0 0 0 var(--ds-switch-stroke) var(--color-border-secondary);\n  transition:\n    background-color var(--effect-motion-short-3),\n    box-shadow var(--effect-motion-short-3);\n}\n\n:host(.switch--sm) {\n  --ds-switch-width: var(--dimension-size-300);\n  --ds-switch-height: var(--dimension-size-200);\n  --ds-switch-thumb-size: calc(var(--dimension-size-base) * 5 / 4);\n  --ds-switch-gap: calc(var(--dimension-space-025) + var(--dimension-space-012));\n}\n\n:host(.switch--xs) {\n  --ds-switch-width: var(--dimension-size-250);\n  --ds-switch-height: var(--dimension-size-150);\n  --ds-switch-thumb-size: var(--dimension-size-100);\n  --ds-switch-gap: var(--dimension-space-025);\n}\n\n:host(.checked) {\n  background-color: var(--color-background-bold-brand);\n  box-shadow: none;\n}\n\n:host(.switch--readonly),\n:host(.switch--presentation) {\n  cursor: default;\n}\n\n:host(.switch--presentation) {\n  pointer-events: none;\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity). */\n\n.thumb {\n  position: absolute;\n  top: 50%;\n  left: var(--ds-switch-inset);\n  width: var(--ds-switch-thumb-size);\n  height: var(--ds-switch-thumb-size);\n  border-radius: var(--dimension-radius-half);\n  background-color: var(--color-foreground-tertiary);\n  box-shadow: none;\n  transform: translateY(-50%);\n  transition:\n    background-color var(--effect-motion-short-3),\n    transform var(--effect-motion-short-3);\n  pointer-events: none;\n}\n\n.thumb::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: transparent;\n  pointer-events: none;\n}\n\n:host(:hover:not(:disabled):not(.ds-control-inactive):not(.switch--readonly):not(.switch--presentation))\n  .thumb::after {\n  background: var(--ds-switch-thumb-hover);\n}\n\n:host(:active:not(:disabled):not(.ds-control-inactive):not(.switch--readonly):not(.switch--presentation))\n  .thumb::after {\n  background: var(--ds-switch-thumb-pressed);\n}\n\n:host(.checked) .thumb {\n  background-color: var(--color-background-primary);\n  box-shadow: none;\n  transform: translate3d(var(--ds-switch-travel), -50%, 0);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    transition: none;\n  }\n\n  .thumb {\n    transition: none;\n  }\n}\n",
+      "content": "@import '../../utils/focus-ring.css';\n@import '../../utils/control-inactive.css';\n\n:host {\n  --ds-switch-width: var(--dimension-size-400);\n  --ds-switch-height: var(--dimension-size-250);\n  --ds-switch-thumb-size: var(--dimension-size-150);\n  --ds-switch-gap: var(--dimension-space-050);\n  --ds-switch-stroke: var(--dimension-stroke-width-012);\n  --ds-switch-inset: var(--ds-switch-gap);\n  --ds-switch-thumb-hover: var(--color-interaction-hover);\n  --ds-switch-thumb-pressed: var(--color-interaction-pressed);\n  --ds-switch-travel: calc(\n    var(--ds-switch-width) - var(--ds-switch-thumb-size) - var(--ds-switch-inset) -\n      var(--ds-switch-inset)\n  );\n  position: relative;\n  display: inline-flex;\n  width: var(--ds-switch-width);\n  height: var(--ds-switch-height);\n  padding: 0;\n  border: none;\n  border-radius: var(--dimension-radius-half);\n  box-sizing: border-box;\n  flex-shrink: 0;\n  overflow: visible;\n  cursor: default;\n  user-select: none;\n  outline: none;\n  background-color: transparent;\n  box-shadow: inset 0 0 0 var(--ds-switch-stroke) var(--color-border-secondary);\n  transition:\n    background-color var(--effect-motion-short-3),\n    box-shadow var(--effect-motion-short-3);\n}\n\n:host(.switch--sm) {\n  --ds-switch-width: var(--dimension-size-300);\n  --ds-switch-height: var(--dimension-size-200);\n  --ds-switch-thumb-size: calc(var(--dimension-size-base) * 5 / 4);\n  --ds-switch-gap: calc(var(--dimension-space-025) + var(--dimension-space-012));\n}\n\n:host(.switch--xs) {\n  --ds-switch-width: var(--dimension-size-250);\n  --ds-switch-height: var(--dimension-size-150);\n  --ds-switch-thumb-size: var(--dimension-size-100);\n  --ds-switch-gap: var(--dimension-space-025);\n}\n\n:host(.checked) {\n  background-color: var(--color-background-bold-brand);\n  box-shadow: none;\n}\n\n:host(.switch--readonly),\n:host(.switch--presentation) {\n  cursor: default;\n}\n\n:host(.switch--presentation) {\n  pointer-events: none;\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity). */\n\n.thumb {\n  position: absolute;\n  top: 50%;\n  left: var(--ds-switch-inset);\n  width: var(--ds-switch-thumb-size);\n  height: var(--ds-switch-thumb-size);\n  border-radius: var(--dimension-radius-half);\n  background-color: var(--color-foreground-tertiary);\n  box-shadow: none;\n  transform: translateY(-50%);\n  transition:\n    background-color var(--effect-motion-short-3),\n    transform var(--effect-motion-short-3);\n  pointer-events: none;\n}\n\n.thumb::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: transparent;\n  pointer-events: none;\n}\n\n:host(:hover:not(:disabled):not(.ds-control-inactive):not(.switch--readonly):not(.switch--presentation))\n  .thumb::after {\n  background: var(--ds-switch-thumb-hover);\n}\n\n:host(:active:not(:disabled):not(.ds-control-inactive):not(.switch--readonly):not(.switch--presentation))\n  .thumb::after {\n  background: var(--ds-switch-thumb-pressed);\n}\n\n:host(.checked) .thumb {\n  background-color: var(--color-background-primary);\n  box-shadow: none;\n  transform: translate3d(var(--ds-switch-travel), -50%, 0);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    transition: none;\n  }\n\n  .thumb {\n    transition: none;\n  }\n}\n",
       "type": "registry:ui"
     },
     {

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

@@ -238,7 +238,7 @@
   "files": [
     {
       "path": "src/wc/components/TabGroup/TabGroup.css",
-      "content": "@import '../../utils/control-density.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n\n:host {\n  display: block;\n  --_tab-group-surface-border: var(--color-border-tertiary);\n  --_tab-group-divider: var(--color-border-secondary);\n}\n\n:host(.tab-group-host--on-medium) {\n  --_tab-group-surface-border: var(--color-border-on-medium-background-tertiary);\n  --_tab-group-divider: var(--color-border-on-medium-background-secondary);\n}\n\n:host(.tab-group-host--on-bold) {\n  --_tab-group-surface-border: var(--color-border-on-bold-background-tertiary);\n  --_tab-group-divider: var(--color-border-on-bold-background-secondary);\n}\n\n:host(.tab-group-host--on-strong) {\n  --_tab-group-surface-border: var(--color-border-on-strong-background-tertiary);\n  --_tab-group-divider: var(--color-border-on-strong-background-secondary);\n}\n\n:host(.tab-group-host--on-translucent) {\n  --_tab-group-surface-border: var(--color-translucent-border-tertiary);\n  --_tab-group-divider: var(--color-translucent-border-secondary);\n}\n\n:host(.tab-group-host--on-inverted) {\n  --_tab-group-surface-border: var(--color-inverted-border-tertiary);\n  --_tab-group-divider: var(--color-inverted-border-secondary);\n}\n\n:host(.tab-group-host--on-media) {\n  --_tab-group-surface-border: var(--color-media-border-tertiary);\n  --_tab-group-divider: var(--color-media-border-secondary);\n}\n\n:host(.tab-group-host--on-always-dark) {\n  --_tab-group-surface-border: var(--color-always-dark-border-tertiary);\n  --_tab-group-divider: var(--color-always-dark-border-secondary);\n}\n\n.tab-list {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  position: relative;\n  width: max-content;\n  max-width: 100%;\n  height: var(--dimension-size-400);\n  padding: calc(var(--dimension-space-050) - var(--dimension-stroke-width-012));\n  background-color: var(--color-background-secondary);\n  border: var(--dimension-stroke-width-012) solid var(--_tab-group-surface-border);\n  border-radius: var(--dimension-radius-half);\n  box-sizing: border-box;\n}\n\n:host(.tab-group-host--surface) .tab-list {\n  background-color: transparent;\n}\n\n.tab {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--ds-control-gap);\n  padding: 0 var(--ds-control-padding-inline);\n  background-color: transparent;\n  border: none;\n  border-radius: var(--dimension-radius-half);\n  cursor: pointer;\n  -webkit-user-select: none;\n  user-select: none;\n  color: var(--color-foreground-secondary);\n  transition: color var(--effect-motion-short-2);\n  flex-shrink: 0;\n  height: var(--ds-control-height);\n  min-width: var(--dimension-size-400);\n  box-sizing: border-box;\n  --_dot: var(--color-foreground-bold-brand);\n  /* Hover/press: `.ds-interaction-fill` — fills cover full 24px box (no layout border). */\n}\n\n.tab--selected {\n  color: var(--color-foreground-primary);\n  background-color: var(--color-background-primary);\n  /* Inset stroke on interaction-fill ::after — stays above hover wash. */\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--_tab-group-surface-border);\n}\n\n:host(.tab-group-host--surface) .tab--selected {\n  background-color: var(--ds-interaction-active);\n}\n\n.tab--selected:not(.ds-interaction-fill) {\n  box-shadow: inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color);\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity) — applied via class in TSX. */\n\n.tab__content {\n  position: relative;\n  z-index: 2;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--ds-control-gap);\n  min-width: 0;\n}\n\n.tab__content--dot {\n  padding-right: var(--dimension-space-050);\n}\n\n.tab__label {\n  padding: 0 var(--ds-control-label-inset);\n  white-space: nowrap;\n}\n\n.tab__icon {\n  flex-shrink: 0;\n}\n\n.tab__dot {\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 2;\n  pointer-events: none;\n}\n\n.on-medium {\n  color: var(--color-foreground-on-medium-background-secondary);\n}\n\n.on-medium.tab--selected { color: var(--color-foreground-on-medium-background-primary); }\n\n.on-bold {\n  color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.on-bold.tab--selected { color: var(--color-foreground-on-bold-background-primary); }\n\n.on-strong {\n  color: var(--color-foreground-on-strong-background-secondary);\n}\n\n.on-strong.tab--selected { color: var(--color-foreground-on-strong-background-primary); }\n\n.on-translucent { color: var(--color-translucent-foreground-secondary); }\n\n.on-translucent.tab--selected { color: var(--color-translucent-foreground-primary); }\n\n.on-inverted { color: var(--color-inverted-foreground-secondary); }\n\n.on-inverted.tab--selected { color: var(--color-inverted-foreground-primary); }\n\n.on-media { color: var(--color-media-foreground-secondary); }\n\n.on-media.tab--selected { color: var(--color-media-foreground-primary); }\n\n.on-always-dark {\n  color: var(--color-always-dark-foreground-secondary);\n}\n\n.on-always-dark.tab--selected { color: var(--color-always-dark-foreground-primary); }\n\n.tab-divider {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--dimension-stroke-width-012);\n  align-self: center;\n  padding: 0;\n  flex-shrink: 0;\n  pointer-events: none;\n}\n\n.tab-divider__line {\n  width: var(--dimension-stroke-width-012);\n  height: var(--typography-lineheight-sm);\n  flex-shrink: 0;\n  background-color: var(--_tab-group-divider);\n}\n",
+      "content": "@import '../../utils/control-density.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n\n:host {\n  display: block;\n  --_tab-group-surface-border: var(--color-border-tertiary);\n  --_tab-group-divider: var(--color-border-secondary);\n}\n\n:host(.tab-group-host--on-medium) {\n  --_tab-group-surface-border: var(--color-border-on-medium-background-tertiary);\n  --_tab-group-divider: var(--color-border-on-medium-background-secondary);\n}\n\n:host(.tab-group-host--on-bold) {\n  --_tab-group-surface-border: var(--color-border-on-bold-background-tertiary);\n  --_tab-group-divider: var(--color-border-on-bold-background-secondary);\n}\n\n:host(.tab-group-host--on-strong) {\n  --_tab-group-surface-border: var(--color-border-on-strong-background-tertiary);\n  --_tab-group-divider: var(--color-border-on-strong-background-secondary);\n}\n\n:host(.tab-group-host--on-translucent) {\n  --_tab-group-surface-border: var(--color-translucent-border-tertiary);\n  --_tab-group-divider: var(--color-translucent-border-secondary);\n}\n\n:host(.tab-group-host--on-inverted) {\n  --_tab-group-surface-border: var(--color-inverted-border-tertiary);\n  --_tab-group-divider: var(--color-inverted-border-secondary);\n}\n\n:host(.tab-group-host--on-media) {\n  --_tab-group-surface-border: var(--color-media-border-tertiary);\n  --_tab-group-divider: var(--color-media-border-secondary);\n}\n\n:host(.tab-group-host--on-always-dark) {\n  --_tab-group-surface-border: var(--color-always-dark-border-tertiary);\n  --_tab-group-divider: var(--color-always-dark-border-secondary);\n}\n\n.tab-list {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  position: relative;\n  width: max-content;\n  max-width: 100%;\n  height: var(--dimension-size-400);\n  padding: calc(var(--dimension-space-050) - var(--dimension-stroke-width-012));\n  background-color: var(--color-background-secondary);\n  border: var(--dimension-stroke-width-012) solid var(--_tab-group-surface-border);\n  border-radius: var(--dimension-radius-half);\n  box-sizing: border-box;\n}\n\n:host(.tab-group-host--surface) .tab-list {\n  background-color: transparent;\n}\n\n.tab {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--ds-control-gap);\n  padding: 0 var(--ds-control-padding-inline);\n  background-color: transparent;\n  border: none;\n  border-radius: var(--dimension-radius-half);\n  cursor: default;\n  -webkit-user-select: none;\n  user-select: none;\n  color: var(--color-foreground-secondary);\n  transition: color var(--effect-motion-short-2);\n  flex-shrink: 0;\n  height: var(--ds-control-height);\n  min-width: var(--dimension-size-400);\n  box-sizing: border-box;\n  --_dot: var(--color-foreground-bold-brand);\n  /* Hover/press: `.ds-interaction-fill` — fills cover full 24px box (no layout border). */\n}\n\n.tab--selected {\n  color: var(--color-foreground-primary);\n  background-color: var(--color-background-primary);\n  /* Inset stroke on interaction-fill ::after — stays above hover wash. */\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--_tab-group-surface-border);\n}\n\n:host(.tab-group-host--surface) .tab--selected {\n  background-color: var(--ds-interaction-active);\n}\n\n.tab--selected:not(.ds-interaction-fill) {\n  box-shadow: inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color);\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity) — applied via class in TSX. */\n\n.tab__content {\n  position: relative;\n  z-index: 2;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--ds-control-gap);\n  min-width: 0;\n}\n\n.tab__content--dot {\n  padding-right: var(--dimension-space-050);\n}\n\n.tab__label {\n  padding: 0 var(--ds-control-label-inset);\n  white-space: nowrap;\n}\n\n.tab__icon {\n  flex-shrink: 0;\n}\n\n.tab__dot {\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 2;\n  pointer-events: none;\n}\n\n.on-medium {\n  color: var(--color-foreground-on-medium-background-secondary);\n}\n\n.on-medium.tab--selected { color: var(--color-foreground-on-medium-background-primary); }\n\n.on-bold {\n  color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.on-bold.tab--selected { color: var(--color-foreground-on-bold-background-primary); }\n\n.on-strong {\n  color: var(--color-foreground-on-strong-background-secondary);\n}\n\n.on-strong.tab--selected { color: var(--color-foreground-on-strong-background-primary); }\n\n.on-translucent { color: var(--color-translucent-foreground-secondary); }\n\n.on-translucent.tab--selected { color: var(--color-translucent-foreground-primary); }\n\n.on-inverted { color: var(--color-inverted-foreground-secondary); }\n\n.on-inverted.tab--selected { color: var(--color-inverted-foreground-primary); }\n\n.on-media { color: var(--color-media-foreground-secondary); }\n\n.on-media.tab--selected { color: var(--color-media-foreground-primary); }\n\n.on-always-dark {\n  color: var(--color-always-dark-foreground-secondary);\n}\n\n.on-always-dark.tab--selected { color: var(--color-always-dark-foreground-primary); }\n\n.tab-divider {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--dimension-stroke-width-012);\n  align-self: center;\n  padding: 0;\n  flex-shrink: 0;\n  pointer-events: none;\n}\n\n.tab-divider__line {\n  width: var(--dimension-stroke-width-012);\n  height: var(--typography-lineheight-sm);\n  flex-shrink: 0;\n  background-color: var(--_tab-group-divider);\n}\n",
       "type": "registry:ui"
     },
     {

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

@@ -340,7 +340,7 @@
   "files": [
     {
       "path": "src/wc/components/Tag/Tag.css",
-      "content": "@import '../../utils/tag-chip.css';\n\n/* ── Intent × Contrast — strong ─────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-strong)  { background-color: var(--color-background-strong-neutral);  color: var(--color-foreground-medium-neutral);  }\n:host(.tag--intent-brand.tag--contrast-strong)    { background-color: var(--color-background-strong-brand);    color: var(--color-foreground-on-strong-background-primary); }\n:host(.tag--intent-ai.tag--contrast-strong)       { background-color: var(--color-background-strong-ai);       color: var(--color-foreground-medium-ai);       }\n:host(.tag--intent-negative.tag--contrast-strong) { background-color: var(--color-background-strong-negative); color: var(--color-foreground-medium-negative); }\n:host(.tag--intent-warning.tag--contrast-strong)  { background-color: var(--color-background-strong-warning);  color: var(--color-foreground-medium-warning);  }\n:host(.tag--intent-caution.tag--contrast-strong)  { background-color: var(--color-background-strong-caution);  color: var(--color-foreground-medium-caution);  }\n:host(.tag--intent-positive.tag--contrast-strong) { background-color: var(--color-background-strong-positive); color: var(--color-foreground-medium-positive); }\n\n/* ── Intent × Contrast — bold ───────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-bold)  { background-color: var(--color-background-bold-neutral);  color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-brand.tag--contrast-bold)    { background-color: var(--color-background-bold-brand);    color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-ai.tag--contrast-bold)       { background-color: var(--color-background-bold-ai);       color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-negative.tag--contrast-bold) { background-color: var(--color-background-bold-negative); color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-warning.tag--contrast-bold)  { background-color: var(--color-background-bold-warning);  color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-caution.tag--contrast-bold)  { background-color: var(--color-background-bold-caution);  color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-positive.tag--contrast-bold) { background-color: var(--color-background-bold-positive); color: var(--color-foreground-on-bold-background-primary); }\n\n/* ── Intent × Contrast — medium ─────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-medium)  { background-color: var(--color-background-medium-neutral);  color: var(--color-foreground-strong-neutral);  }\n:host(.tag--intent-brand.tag--contrast-medium)    { background-color: var(--color-background-medium-brand);    color: var(--color-foreground-on-medium-background-primary); }\n:host(.tag--intent-ai.tag--contrast-medium)       { background-color: var(--color-background-medium-ai);       color: var(--color-foreground-strong-ai);       }\n:host(.tag--intent-negative.tag--contrast-medium) { background-color: var(--color-background-medium-negative); color: var(--color-foreground-strong-negative); }\n:host(.tag--intent-warning.tag--contrast-medium)  { background-color: var(--color-background-medium-warning);  color: var(--color-foreground-strong-warning);  }\n:host(.tag--intent-caution.tag--contrast-medium)  { background-color: var(--color-background-medium-caution);  color: var(--color-foreground-strong-caution);  }\n:host(.tag--intent-positive.tag--contrast-medium) { background-color: var(--color-background-medium-positive); color: var(--color-foreground-strong-positive); }\n\n/* ── Intent × Contrast — faint ──────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-faint)  { background-color: var(--color-background-faint-neutral);  color: var(--color-foreground-bold-neutral);  }\n:host(.tag--intent-brand.tag--contrast-faint)    { background-color: var(--color-background-faint-brand);    color: var(--color-foreground-bold-brand);    }\n:host(.tag--intent-ai.tag--contrast-faint)       { background-color: var(--color-background-faint-ai);       color: var(--color-foreground-bold-ai);       }\n:host(.tag--intent-negative.tag--contrast-faint) { background-color: var(--color-background-faint-negative); color: var(--color-foreground-bold-negative); }\n:host(.tag--intent-warning.tag--contrast-faint)  { background-color: var(--color-background-faint-warning);  color: var(--color-foreground-bold-warning);  }\n:host(.tag--intent-caution.tag--contrast-faint)  { background-color: var(--color-background-faint-caution);  color: var(--color-foreground-bold-caution);  }\n:host(.tag--intent-positive.tag--contrast-faint) { background-color: var(--color-background-faint-positive); color: var(--color-foreground-bold-positive); }\n\n/* ── Interactive menu trigger ───────────────────────────────────────────── */\n\n:host(.tag--interactive) {\n  padding: 0;\n  gap: 0;\n}\n\n.tag__button {\n  all: unset;\n  position: relative;\n  z-index: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  min-width: 0;\n  max-width: 100%;\n  height: 100%;\n  padding: 0 var(--ds-control-padding-inline);\n  gap: var(--ds-control-gap);\n  border-radius: inherit;\n  color: inherit;\n  cursor: pointer;\n}\n\n.tag__button:disabled {\n  cursor: not-allowed;\n}\n\n.tag__button--expanded::after {\n  background: var(--ds-interaction-pressed);\n}\n\n/* Hover/press wash stays above the Tag's semantic background. */\n\n/* ── Icons ──────────────────────────────────────────────────────────────── */\n\n.tag__prefix-icon,\n.tag__suffix-icon {\n  position: relative;\n  z-index: 2;\n  display: inline-flex;\n  flex-shrink: 0;\n  width: var(--ds-control-icon);\n  height: var(--ds-control-icon);\n}\n",
+      "content": "@import '../../utils/tag-chip.css';\n\n/* ── Intent × Contrast — strong ─────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-strong)  { background-color: var(--color-background-strong-neutral);  color: var(--color-foreground-medium-neutral);  }\n:host(.tag--intent-brand.tag--contrast-strong)    { background-color: var(--color-background-strong-brand);    color: var(--color-foreground-on-strong-background-primary); }\n:host(.tag--intent-ai.tag--contrast-strong)       { background-color: var(--color-background-strong-ai);       color: var(--color-foreground-medium-ai);       }\n:host(.tag--intent-negative.tag--contrast-strong) { background-color: var(--color-background-strong-negative); color: var(--color-foreground-medium-negative); }\n:host(.tag--intent-warning.tag--contrast-strong)  { background-color: var(--color-background-strong-warning);  color: var(--color-foreground-medium-warning);  }\n:host(.tag--intent-caution.tag--contrast-strong)  { background-color: var(--color-background-strong-caution);  color: var(--color-foreground-medium-caution);  }\n:host(.tag--intent-positive.tag--contrast-strong) { background-color: var(--color-background-strong-positive); color: var(--color-foreground-medium-positive); }\n\n/* ── Intent × Contrast — bold ───────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-bold)  { background-color: var(--color-background-bold-neutral);  color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-brand.tag--contrast-bold)    { background-color: var(--color-background-bold-brand);    color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-ai.tag--contrast-bold)       { background-color: var(--color-background-bold-ai);       color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-negative.tag--contrast-bold) { background-color: var(--color-background-bold-negative); color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-warning.tag--contrast-bold)  { background-color: var(--color-background-bold-warning);  color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-caution.tag--contrast-bold)  { background-color: var(--color-background-bold-caution);  color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-positive.tag--contrast-bold) { background-color: var(--color-background-bold-positive); color: var(--color-foreground-on-bold-background-primary); }\n\n/* ── Intent × Contrast — medium ─────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-medium)  { background-color: var(--color-background-medium-neutral);  color: var(--color-foreground-strong-neutral);  }\n:host(.tag--intent-brand.tag--contrast-medium)    { background-color: var(--color-background-medium-brand);    color: var(--color-foreground-on-medium-background-primary); }\n:host(.tag--intent-ai.tag--contrast-medium)       { background-color: var(--color-background-medium-ai);       color: var(--color-foreground-strong-ai);       }\n:host(.tag--intent-negative.tag--contrast-medium) { background-color: var(--color-background-medium-negative); color: var(--color-foreground-strong-negative); }\n:host(.tag--intent-warning.tag--contrast-medium)  { background-color: var(--color-background-medium-warning);  color: var(--color-foreground-strong-warning);  }\n:host(.tag--intent-caution.tag--contrast-medium)  { background-color: var(--color-background-medium-caution);  color: var(--color-foreground-strong-caution);  }\n:host(.tag--intent-positive.tag--contrast-medium) { background-color: var(--color-background-medium-positive); color: var(--color-foreground-strong-positive); }\n\n/* ── Intent × Contrast — faint ──────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-faint)  { background-color: var(--color-background-faint-neutral);  color: var(--color-foreground-bold-neutral);  }\n:host(.tag--intent-brand.tag--contrast-faint)    { background-color: var(--color-background-faint-brand);    color: var(--color-foreground-bold-brand);    }\n:host(.tag--intent-ai.tag--contrast-faint)       { background-color: var(--color-background-faint-ai);       color: var(--color-foreground-bold-ai);       }\n:host(.tag--intent-negative.tag--contrast-faint) { background-color: var(--color-background-faint-negative); color: var(--color-foreground-bold-negative); }\n:host(.tag--intent-warning.tag--contrast-faint)  { background-color: var(--color-background-faint-warning);  color: var(--color-foreground-bold-warning);  }\n:host(.tag--intent-caution.tag--contrast-faint)  { background-color: var(--color-background-faint-caution);  color: var(--color-foreground-bold-caution);  }\n:host(.tag--intent-positive.tag--contrast-faint) { background-color: var(--color-background-faint-positive); color: var(--color-foreground-bold-positive); }\n\n/* ── Interactive menu trigger ───────────────────────────────────────────── */\n\n:host(.tag--interactive) {\n  padding: 0;\n  gap: 0;\n}\n\n.tag__button {\n  all: unset;\n  position: relative;\n  z-index: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  min-width: 0;\n  max-width: 100%;\n  height: 100%;\n  padding: 0 var(--ds-control-padding-inline);\n  gap: var(--ds-control-gap);\n  border-radius: inherit;\n  color: inherit;\n  cursor: default;\n}\n\n.tag__button:disabled {\n  cursor: not-allowed;\n}\n\n.tag__button--expanded::after {\n  background: var(--ds-interaction-pressed);\n}\n\n/* Hover/press wash stays above the Tag's semantic background. */\n\n/* ── Icons ──────────────────────────────────────────────────────────────── */\n\n.tag__prefix-icon,\n.tag__suffix-icon {\n  position: relative;\n  z-index: 2;\n  display: inline-flex;\n  flex-shrink: 0;\n  width: var(--ds-control-icon);\n  height: var(--ds-control-icon);\n}\n",
       "type": "registry:ui"
     },
     {

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

@@ -15,8 +15,19 @@ export declare class MobileBarNav {
     searchDot: boolean;
     agentsDot: boolean;
     inboxDot: boolean;
+    private pressedItemId;
     dsSheetNavToggle: EventEmitter<boolean>;
     dsDestinationChange: EventEmitter<MobileBarNavDestinationDetail>;
+    private activePointerId;
+    private pressedAt;
+    private pressClearTimer;
+    disconnectedCallback(): void;
+    private clearPressTimer;
+    private clearPressedItem;
+    private beginDirectPress;
+    private finishDirectPress;
+    private cancelDirectPress;
+    private pressHandlers;
     private destinationConfig;
     private selectDestination;
     focusDestination(destination: MobileDestination | 'sheet-nav'): Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "12.6.1",
+  "version": "12.6.2",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",

package/dist/components/p-4h7vAqyJ.js

@@ -1,2 +0,0 @@
-import{p as i,H as e,c as s,h as t,a as o,t as n}from"./index.js";import{g as r,i as c}from"./p-BQq26pt9.js";import{d as a}from"./p-CaRyxTMz.js";import{d}from"./p-BdPaDhDe.js";import{d as l}from"./p-P5BMmQAc.js";import{d as h}from"./p-rsIOpkzV.js";import{d as u}from"./p-BwGnhInj.js";function f(i,e){const s=r(i);const t=s.findIndex((i=>i.id===e));const o=t>=0?t:0;return{selectedIndex:o,selected:s[o],hasPrevious:o>0,hasNext:o<s.length-1}}const b=()=>`.sc-ds-mobile-section-switcher-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-mobile-section-switcher-h,.ds-focus-ring.sc-ds-mobile-section-switcher,.ds-focus-ring-inset.sc-ds-mobile-section-switcher-h,.ds-focus-ring-inset.sc-ds-mobile-section-switcher{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-mobile-section-switcher-h:focus-visible,.ds-focus-ring.sc-ds-mobile-section-switcher:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-mobile-section-switcher-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-mobile-section-switcher{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-mobile-section-switcher-h:focus-visible,.ds-focus-ring-inset.sc-ds-mobile-section-switcher:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-mobile-section-switcher-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-mobile-section-switcher:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-section-switcher-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-section-switcher{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-section-switcher-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-section-switcher::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-mobile-section-switcher-h,.ds-interaction-fill.sc-ds-mobile-section-switcher{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-mobile-section-switcher-h::before,.ds-interaction-fill.sc-ds-mobile-section-switcher::before,.ds-interaction-fill.sc-ds-mobile-section-switcher-h::after,.ds-interaction-fill.sc-ds-mobile-section-switcher::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-mobile-section-switcher-h::before,.ds-interaction-fill.sc-ds-mobile-section-switcher::before{z-index:1}.ds-interaction-fill.sc-ds-mobile-section-switcher-h::after,.ds-interaction-fill.sc-ds-mobile-section-switcher::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--bordered.sc-ds-mobile-section-switcher{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-mobile-section-switcher-h::before,.ds-interaction-fill--selected.sc-ds-mobile-section-switcher::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--selected.sc-ds-mobile-section-switcher{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-mobile-section-switcher-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-mobile-section-switcher:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-mobile-section-switcher-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-mobile-section-switcher:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-mobile-section-switcher-h>.ds-interaction-fill__content.sc-ds-mobile-section-switcher,.ds-interaction-fill.sc-ds-mobile-section-switcher>.ds-interaction-fill__content.sc-ds-mobile-section-switcher,.ds-interaction-fill__content.sc-ds-mobile-section-switcher{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-faint.sc-ds-mobile-section-switcher{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-medium.sc-ds-mobile-section-switcher{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-bold.sc-ds-mobile-section-switcher{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-strong.sc-ds-mobile-section-switcher{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-translucent.sc-ds-mobile-section-switcher{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-inverted.sc-ds-mobile-section-switcher{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-media.sc-ds-mobile-section-switcher{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-always-dark.sc-ds-mobile-section-switcher{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-navigation.sc-ds-mobile-section-switcher{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.sc-ds-mobile-section-switcher-h{display:block;min-width:0;max-width:100%;color:var(--color-foreground-primary)}.mobile-section-switcher.sc-ds-mobile-section-switcher{appearance:none;display:grid;grid-template-columns:var(--dimension-size-100) minmax(0, auto) var(--dimension-size-100);align-items:center;justify-content:center;gap:var(--dimension-space-050);max-width:100%;min-height:var(--dimension-size-400);padding-inline:var(--dimension-space-100);border:0;border-radius:var(--dimension-radius-100);background:var(--color-background-secondary);color:inherit;box-sizing:border-box;cursor:pointer}.mobile-section-switcher--expanded.sc-ds-mobile-section-switcher{background:var(--color-background-tertiary)}.mobile-section-switcher__label.sc-ds-mobile-section-switcher{min-width:0;max-width:100%;text-align:center}.mobile-section-switcher__position.sc-ds-mobile-section-switcher{width:var(--dimension-size-050);height:var(--dimension-size-050);border-radius:var(--dimension-radius-half);background:currentColor;opacity:0}.mobile-section-switcher__position--visible.sc-ds-mobile-section-switcher{opacity:1}`;let m=0;const v=i(class i extends e{constructor(i){super();if(i!==false){this.__registerHost()}this.dsChange=s(this,"dsChange");this.sections=[];this.sectionsJson="";this.value="";this.navigationLabel="Change page section";this.menuOpen=false;this.initialFocusVisible=false;this.instanceId=m++;this.triggerId=`ds-mobile-section-switcher-trigger-${this.instanceId}`;this.menuId=`ds-mobile-section-switcher-menu-${this.instanceId}`;this.triggerEl=null;this.toggleMenu=i=>{if(this.selectableSections.length<=1)return;this.initialFocusVisible=i.detail===0;this.menuOpen=!this.menuOpen};this.closeMenu=()=>{this.menuOpen=false};this.handleSelect=i=>{const e=String(i.detail.value??"");const s=this.selectableSections.find((i=>i.id===e));if(!s||s.isInactive)return;this.closeMenu();if(e!==this.selectedSection?.id)this.dsChange.emit(e);requestAnimationFrame((()=>this.triggerEl?.focus()))}}get resolvedSections(){if(!this.sectionsJson.trim())return this.sections??[];try{const i=JSON.parse(this.sectionsJson);return Array.isArray(i)?i:[]}catch{return[]}}get selectableSections(){return r(this.resolvedSections)}get selectedIndex(){return f(this.resolvedSections,this.value).selectedIndex}get selectedSection(){return this.selectableSections[this.selectedIndex]}get hasPrevious(){return f(this.resolvedSections,this.value).hasPrevious}get hasNext(){return f(this.resolvedSections,this.value).hasNext}get triggerAriaLabel(){return`${this.navigationLabel}. Current section: ${this.selectedSection?.label??""}`}get menuSections(){const i=[];let e=[];const s=()=>{if(e.length)i.push({items:e});e=[]};for(const i of this.resolvedSections){if(c(i)){s();continue}e.push({label:i.label,value:i.id,dot:i.dot,isSelected:i.id===this.selectedSection?.id,isInactive:i.isInactive})}s();return i}handleSectionsChange(){if(this.selectableSections.length<=1)this.closeMenu()}render(){const i=this.selectedSection;if(!i)return t(o,null);return t(o,null,t("button",{ref:i=>{this.triggerEl=i??null},id:this.triggerId,class:{"mobile-section-switcher":true,"mobile-section-switcher--expanded":this.menuOpen,"ds-focus-ring-inset":true,"ds-interaction-fill":true},type:"button","aria-haspopup":"menu","aria-controls":this.menuId,"aria-expanded":String(this.menuOpen),"aria-label":this.triggerAriaLabel,onClick:this.toggleMenu},t("span",{class:{"mobile-section-switcher__position":true,"mobile-section-switcher__position--visible":this.hasPrevious,"ds-interaction-fill__content":true},"aria-hidden":"true"}),t("ds-text",{class:"mobile-section-switcher__label ds-interaction-fill__content",as:"span",variant:"text-body-medium",emphasis:true,color:"inherit",lineTruncation:1},i.label),t("span",{class:{"mobile-section-switcher__position":true,"mobile-section-switcher__position--visible":this.hasNext,"ds-interaction-fill__content":true},"aria-hidden":"true"})),this.selectableSections.length>1?t("ds-menu",{id:this.menuId,anchorId:this.triggerId,align:"center",menuLabel:this.navigationLabel,open:this.menuOpen,initialFocusVisible:this.initialFocusVisible,sections:this.menuSections,onDsClose:this.closeMenu,onDsSelect:this.handleSelect}):null)}get el(){return this}static get watchers(){return{sections:[{handleSectionsChange:0}],sectionsJson:[{handleSectionsChange:0}]}}static get style(){return b()}},[2,"ds-mobile-section-switcher",{sections:[16],sectionsJson:[1,"sections-json"],value:[1],navigationLabel:[1,"navigation-label"],menuOpen:[32],initialFocusVisible:[32]},undefined,{sections:[{handleSectionsChange:0}],sectionsJson:[{handleSectionsChange:0}]}]);function g(){if(typeof customElements==="undefined"){return}const i=["ds-mobile-section-switcher","ds-badge","ds-menu","ds-swatch-picker","ds-switch","ds-text"];i.forEach((i=>{switch(i){case"ds-mobile-section-switcher":if(!customElements.get(n(i))){customElements.define(n(i),v)}break;case"ds-badge":if(!customElements.get(n(i))){a()}break;case"ds-menu":if(!customElements.get(n(i))){d()}break;case"ds-swatch-picker":if(!customElements.get(n(i))){l()}break;case"ds-switch":if(!customElements.get(n(i))){h()}break;case"ds-text":if(!customElements.get(n(i))){u()}break}}))}g();export{v as M,g as d};
-//# sourceMappingURL=p-4h7vAqyJ.js.map

package/dist/components/p-6WdUnsGC.js

@@ -1,2 +0,0 @@
-import{p as s,H as e,c as i,h as r,a as t,t as n}from"./index.js";import{d as a}from"./p-BwGnhInj.js";const d=()=>`.sc-ds-breadcrumb-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-breadcrumb-h,.ds-focus-ring.sc-ds-breadcrumb,.ds-focus-ring-inset.sc-ds-breadcrumb-h,.ds-focus-ring-inset.sc-ds-breadcrumb{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-breadcrumb-h:focus-visible,.ds-focus-ring.sc-ds-breadcrumb:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-breadcrumb-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-breadcrumb{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-breadcrumb-h:focus-visible,.ds-focus-ring-inset.sc-ds-breadcrumb:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-breadcrumb-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-breadcrumb:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-breadcrumb-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-breadcrumb{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-breadcrumb-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-breadcrumb::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-visually-hidden.sc-ds-breadcrumb-h,.ds-visually-hidden.sc-ds-breadcrumb{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.sc-ds-breadcrumb-h{position:relative;display:block;min-width:0;box-sizing:border-box}.breadcrumb.sc-ds-breadcrumb{inline-size:100%;min-width:0}.breadcrumb__list.sc-ds-breadcrumb{display:flex;align-items:center;box-sizing:border-box;inline-size:100%;min-width:0;margin:0;padding:0;overflow:hidden;list-style:none}.breadcrumb__item.sc-ds-breadcrumb{display:flex;flex:0 0 auto;align-items:center;min-width:0}.breadcrumb__separator.sc-ds-breadcrumb{flex:0 0 auto;margin-inline:var(--dimension-space-050);user-select:none}.breadcrumb__link.sc-ds-breadcrumb,.breadcrumb__current.sc-ds-breadcrumb{display:inline-flex;flex:0 0 auto;min-width:0;overflow:hidden;padding:0;border:0;border-radius:var(--dimension-radius-025);background:transparent;color:var(--color-foreground-secondary);font:inherit;text-decoration:none}.breadcrumb__link.sc-ds-breadcrumb{cursor:pointer}.breadcrumb__link.sc-ds-breadcrumb:hover .breadcrumb__label.sc-ds-breadcrumb{text-decoration:underline;text-decoration-color:var(--color-foreground-quaternary);text-underline-offset:var(--dimension-space-025);text-decoration-thickness:var(--dimension-stroke-width-012)}.breadcrumb__label.sc-ds-breadcrumb{display:inline-block;inline-size:var(--breadcrumb-label-width, auto);min-width:0}.breadcrumb__measurements.sc-ds-breadcrumb{position:absolute;inset:0 auto auto 0;visibility:hidden;pointer-events:none;white-space:nowrap}.breadcrumb__measurement.sc-ds-breadcrumb{display:inline-block;inline-size:max-content;max-inline-size:none}`;const c=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsSelect=i(this,"dsSelect");this.items=[];this.ariaLabel="Breadcrumb";this.labelWidths=[];this.collapsedLabels=[];this.measurementElements=[];this.separatorElements=[]}componentDidLoad(){this.observeContainer();this.scheduleMeasurement();void document.fonts?.ready.then((()=>this.scheduleMeasurement()))}componentDidRender(){this.observeContainer();this.scheduleMeasurement()}disconnectedCallback(){this.resizeObserver?.disconnect();this.observedElement=undefined;if(this.measurementFrame!==undefined)cancelAnimationFrame(this.measurementFrame)}handleItemsChange(){this.labelWidths=[];this.collapsedLabels=[];this.scheduleMeasurement()}observeContainer(){if(!this.navElement||this.observedElement===this.navElement)return;this.resizeObserver??(this.resizeObserver=new ResizeObserver((()=>this.scheduleMeasurement())));this.resizeObserver.disconnect();this.resizeObserver.observe(this.navElement);this.observedElement=this.navElement}scheduleMeasurement(){if(this.measurementFrame!==undefined)return;this.measurementFrame=requestAnimationFrame((()=>{this.measurementFrame=undefined;this.measureLabels()}))}measureLabels(){if(!this.navElement||!this.listElement||!this.ellipsisMeasurement||this.items.length===0)return;const s=this.items.map(((s,e)=>this.measurementElements[e]?.getBoundingClientRect().width??0));const e=this.ellipsisMeasurement.getBoundingClientRect().width;if(s.some((s=>s===0))||e===0)return;const i=this.separatorElements.reduce(((s,e)=>{const i=getComputedStyle(e);return s+e.getBoundingClientRect().width+Number.parseFloat(i.marginInlineStart)+Number.parseFloat(i.marginInlineEnd)}),0);const r=Math.max(0,this.navElement.clientWidth-i);const t=s.map((s=>Math.min(s,e)));const n=[...t];let a=Math.max(0,r-t.reduce(((s,e)=>s+e),0));for(let e=s.length-1;e>=0&&a>0;e-=1){const i=Math.min(a,s[e]-t[e]);n[e]+=i;a-=i}const d=n.length!==this.labelWidths.length||n.some(((s,e)=>Math.abs(s-(this.labelWidths[e]??0))>.25));const c=n.map(((e,i)=>s[i]>t[i]&&Math.abs(e-t[i])<=.25));const o=c.length!==this.collapsedLabels.length||c.some(((s,e)=>s!==this.collapsedLabels[e]));if(d)this.labelWidths=n;if(o)this.collapsedLabels=c}handleSelect(s,e){const i=this.dsSelect.emit({item:s,originalEvent:e});if(i.defaultPrevented)e.preventDefault()}renderItem(s,e){const i=this.labelWidths[e];const t=this.collapsedLabels[e]??false;const n=[r("ds-text",{class:"breadcrumb__label",as:"span",variant:"text-caption",color:"inherit",lineTruncation:t?"none":1,"aria-hidden":t?"true":undefined,style:i===undefined?undefined:{"--breadcrumb-label-width":`${i}px`}},t?"…":s.label),t?r("span",{class:"breadcrumb__accessible-label ds-visually-hidden"},s.label):null];if(s.isCurrent){return r("span",{class:"breadcrumb__current","aria-current":"page","aria-label":s.ariaLabel},n)}if(s.href){return r("a",{class:"breadcrumb__link ds-focus-ring",href:s.href,"aria-label":s.ariaLabel,onClick:e=>this.handleSelect(s,e)},n)}return r("button",{class:"breadcrumb__link ds-focus-ring",type:"button","aria-label":s.ariaLabel,onClick:e=>this.handleSelect(s,e)},n)}render(){if(this.items.length===0)return null;this.measurementElements=[];this.separatorElements=[];return r(t,null,r("nav",{class:"breadcrumb","aria-label":this.ariaLabel,ref:s=>{this.navElement=s}},r("div",{class:"breadcrumb__measurements","aria-hidden":"true"},this.items.map(((s,e)=>r("ds-text",{class:"breadcrumb__measurement",as:"span",variant:"text-caption",color:"inherit",ref:s=>{if(s)this.measurementElements[e]=s}},s.label))),r("ds-text",{class:"breadcrumb__measurement",as:"span",variant:"text-caption",color:"inherit",ref:s=>{this.ellipsisMeasurement=s}},"…")),r("ol",{class:"breadcrumb__list",ref:s=>{this.listElement=s}},this.items.map(((s,e)=>r("li",{class:"breadcrumb__item",key:s.id},e>0?r("ds-text",{class:"breadcrumb__separator",as:"span",variant:"text-caption",color:"tertiary","aria-hidden":"true",ref:s=>{if(s)this.separatorElements[e-1]=s}},"/"):null,this.renderItem(s,e)))))))}static get watchers(){return{items:[{handleItemsChange:0}]}}static get style(){return d()}},[2,"ds-breadcrumb",{items:[16],ariaLabel:[1,"aria-label"],labelWidths:[32],collapsedLabels:[32]},undefined,{items:[{handleItemsChange:0}]}]);function o(){if(typeof customElements==="undefined"){return}const s=["ds-breadcrumb","ds-text"];s.forEach((s=>{switch(s){case"ds-breadcrumb":if(!customElements.get(n(s))){customElements.define(n(s),c)}break;case"ds-text":if(!customElements.get(n(s))){a()}break}}))}o();export{c as B,o as d};
-//# sourceMappingURL=p-6WdUnsGC.js.map

package/dist/components/p-6WdUnsGC.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["breadcrumbCss","Breadcrumb","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","items","ariaLabel","labelWidths","collapsedLabels","measurementElements","separatorElements","componentDidLoad","observeContainer","scheduleMeasurement","document","fonts","ready","then","componentDidRender","disconnectedCallback","resizeObserver","disconnect","observedElement","undefined","measurementFrame","cancelAnimationFrame","handleItemsChange","navElement","ResizeObserver","observe","requestAnimationFrame","measureLabels","listElement","ellipsisMeasurement","length","naturalWidths","map","_","index","getBoundingClientRect","width","ellipsisWidth","some","separatorWidth","reduce","total","separator","styles","getComputedStyle","Number","parseFloat","marginInlineStart","marginInlineEnd","availableWidth","Math","max","clientWidth","minimumWidths","min","nextWidths","remainingWidth","extraWidth","widthsChanged","abs","nextCollapsedLabels","collapsedLabelsChanged","isCollapsed","handleSelect","item","originalEvent","event","dsSelect","emit","defaultPrevented","preventDefault","renderItem","allocatedWidth","label","h","class","as","variant","color","lineTruncation","style","isCurrent","href","onClick","type","render","Host","ref","element","key","id"],"sources":["src/wc/components/Breadcrumb/Breadcrumb.css?tag=ds-breadcrumb&encapsulation=scoped","src/wc/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n@import '../../utils/visually-hidden.css';\n\n:host {\n  position: relative;\n  display: block;\n  min-width: 0;\n  box-sizing: border-box;\n}\n\n.breadcrumb {\n  inline-size: 100%;\n  min-width: 0;\n}\n\n.breadcrumb__list {\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  inline-size: 100%;\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  overflow: hidden;\n  list-style: none;\n}\n\n.breadcrumb__item {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  min-width: 0;\n}\n\n.breadcrumb__separator {\n  flex: 0 0 auto;\n  margin-inline: var(--dimension-space-050);\n  user-select: none;\n}\n\n.breadcrumb__link,\n.breadcrumb__current {\n  display: inline-flex;\n  flex: 0 0 auto;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  border: 0;\n  border-radius: var(--dimension-radius-025);\n  background: transparent;\n  color: var(--color-foreground-secondary);\n  font: inherit;\n  text-decoration: none;\n}\n\n.breadcrumb__link {\n  cursor: pointer;\n}\n\n.breadcrumb__link:hover .breadcrumb__label {\n  text-decoration: underline;\n  text-decoration-color: var(--color-foreground-quaternary);\n  text-underline-offset: var(--dimension-space-025);\n  text-decoration-thickness: var(--dimension-stroke-width-012);\n}\n\n.breadcrumb__label {\n  display: inline-block;\n  inline-size: var(--breadcrumb-label-width, auto);\n  min-width: 0;\n}\n\n.breadcrumb__measurements {\n  position: absolute;\n  inset: 0 auto auto 0;\n  visibility: hidden;\n  pointer-events: none;\n  white-space: nowrap;\n}\n\n.breadcrumb__measurement {\n  display: inline-block;\n  inline-size: max-content;\n  max-inline-size: none;\n}\n\n","import { Component, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { BreadcrumbItem, BreadcrumbSelectDetail } from './breadcrumb-types';\n\n@Component({\n  tag: 'ds-breadcrumb',\n  styleUrl: 'Breadcrumb.css',\n  scoped: true,\n})\nexport class Breadcrumb {\n  /** Ordered path from the broadest ancestor to the nearest page. */\n  @Prop() items: BreadcrumbItem[] = [];\n\n  /** Accessible name for the breadcrumb navigation landmark. */\n  @Prop() ariaLabel: string = 'Breadcrumb';\n\n  /** Emitted when an interactive breadcrumb item is activated. Prevent to cancel native navigation. */\n  @Event({ cancelable: true }) dsSelect!: EventEmitter<BreadcrumbSelectDetail>;\n\n  @State() private labelWidths: number[] = [];\n  @State() private collapsedLabels: boolean[] = [];\n\n  private navElement?: HTMLElement;\n  private listElement?: HTMLOListElement;\n  private measurementElements: HTMLElement[] = [];\n  private separatorElements: HTMLElement[] = [];\n  private ellipsisMeasurement?: HTMLElement;\n  private resizeObserver?: ResizeObserver;\n  private observedElement?: HTMLElement;\n  private measurementFrame?: number;\n\n  componentDidLoad() {\n    this.observeContainer();\n    this.scheduleMeasurement();\n    void document.fonts?.ready.then(() => this.scheduleMeasurement());\n  }\n\n  componentDidRender() {\n    this.observeContainer();\n    this.scheduleMeasurement();\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n    this.observedElement = undefined;\n    if (this.measurementFrame !== undefined) cancelAnimationFrame(this.measurementFrame);\n  }\n\n  @Watch('items')\n  handleItemsChange() {\n    this.labelWidths = [];\n    this.collapsedLabels = [];\n    this.scheduleMeasurement();\n  }\n\n  private observeContainer() {\n    if (!this.navElement || this.observedElement === this.navElement) return;\n    this.resizeObserver ??= new ResizeObserver(() => this.scheduleMeasurement());\n    this.resizeObserver.disconnect();\n    this.resizeObserver.observe(this.navElement);\n    this.observedElement = this.navElement;\n  }\n\n  private scheduleMeasurement() {\n    if (this.measurementFrame !== undefined) return;\n    this.measurementFrame = requestAnimationFrame(() => {\n      this.measurementFrame = undefined;\n      this.measureLabels();\n    });\n  }\n\n  private measureLabels() {\n    if (\n      !this.navElement ||\n      !this.listElement ||\n      !this.ellipsisMeasurement ||\n      this.items.length === 0\n    ) return;\n\n    const naturalWidths = this.items.map(\n      (_, index) => this.measurementElements[index]?.getBoundingClientRect().width ?? 0\n    );\n    const ellipsisWidth = this.ellipsisMeasurement.getBoundingClientRect().width;\n    if (naturalWidths.some(width => width === 0) || ellipsisWidth === 0) return;\n\n    const separatorWidth = this.separatorElements.reduce((total, separator) => {\n      const styles = getComputedStyle(separator);\n      return (\n        total +\n        separator.getBoundingClientRect().width +\n        Number.parseFloat(styles.marginInlineStart) +\n        Number.parseFloat(styles.marginInlineEnd)\n      );\n    }, 0);\n    const availableWidth = Math.max(0, this.navElement.clientWidth - separatorWidth);\n    const minimumWidths = naturalWidths.map(width => Math.min(width, ellipsisWidth));\n    const nextWidths = [...minimumWidths];\n    let remainingWidth = Math.max(\n      0,\n      availableWidth - minimumWidths.reduce((total, width) => total + width, 0)\n    );\n\n    // Protect the current/newest location. Extra width is granted newest-to-oldest,\n    // so ancestors collapse in path order as the available space decreases.\n    for (let index = naturalWidths.length - 1; index >= 0 && remainingWidth > 0; index -= 1) {\n      const extraWidth = Math.min(\n        remainingWidth,\n        naturalWidths[index] - minimumWidths[index]\n      );\n      nextWidths[index] += extraWidth;\n      remainingWidth -= extraWidth;\n    }\n\n    const widthsChanged =\n      nextWidths.length !== this.labelWidths.length ||\n      nextWidths.some(\n        (width, index) => Math.abs(width - (this.labelWidths[index] ?? 0)) > 0.25\n      );\n    const nextCollapsedLabels = nextWidths.map(\n      (width, index) =>\n        naturalWidths[index] > minimumWidths[index] &&\n        Math.abs(width - minimumWidths[index]) <= 0.25\n    );\n    const collapsedLabelsChanged =\n      nextCollapsedLabels.length !== this.collapsedLabels.length ||\n      nextCollapsedLabels.some(\n        (isCollapsed, index) => isCollapsed !== this.collapsedLabels[index]\n      );\n    if (widthsChanged) this.labelWidths = nextWidths;\n    if (collapsedLabelsChanged) this.collapsedLabels = nextCollapsedLabels;\n  }\n\n  private handleSelect(item: BreadcrumbItem, originalEvent: MouseEvent) {\n    const event = this.dsSelect.emit({ item, originalEvent });\n    if (event.defaultPrevented) originalEvent.preventDefault();\n  }\n\n  private renderItem(item: BreadcrumbItem, index: number) {\n    const allocatedWidth = this.labelWidths[index];\n    const isCollapsed = this.collapsedLabels[index] ?? false;\n    const label = (\n      [\n        <ds-text\n          class=\"breadcrumb__label\"\n          as=\"span\"\n          variant=\"text-caption\"\n          color=\"inherit\"\n          lineTruncation={isCollapsed ? 'none' : 1}\n          aria-hidden={isCollapsed ? 'true' : undefined}\n          style={\n            allocatedWidth === undefined\n              ? undefined\n              : { '--breadcrumb-label-width': `${allocatedWidth}px` }\n          }\n        >\n          {isCollapsed ? '…' : item.label}\n        </ds-text>,\n        isCollapsed ? <span class=\"breadcrumb__accessible-label ds-visually-hidden\">{item.label}</span> : null,\n      ]\n    );\n\n    if (item.isCurrent) {\n      return (\n        <span class=\"breadcrumb__current\" aria-current=\"page\" aria-label={item.ariaLabel}>\n          {label}\n        </span>\n      );\n    }\n\n    if (item.href) {\n      return (\n        <a\n          class=\"breadcrumb__link ds-focus-ring\"\n          href={item.href}\n          aria-label={item.ariaLabel}\n          onClick={(event: MouseEvent) => this.handleSelect(item, event)}\n        >\n          {label}\n        </a>\n      );\n    }\n\n    return (\n      <button\n        class=\"breadcrumb__link ds-focus-ring\"\n        type=\"button\"\n        aria-label={item.ariaLabel}\n        onClick={(event: MouseEvent) => this.handleSelect(item, event)}\n      >\n        {label}\n      </button>\n    );\n  }\n\n  render() {\n    if (this.items.length === 0) return null;\n\n    this.measurementElements = [];\n    this.separatorElements = [];\n\n    return (\n      <Host>\n        <nav\n          class=\"breadcrumb\"\n          aria-label={this.ariaLabel}\n          ref={element => {\n            this.navElement = element;\n          }}\n        >\n          <div class=\"breadcrumb__measurements\" aria-hidden=\"true\">\n            {this.items.map((item, index) => (\n              <ds-text\n                class=\"breadcrumb__measurement\"\n                as=\"span\"\n                variant=\"text-caption\"\n                color=\"inherit\"\n                ref={element => {\n                  if (element) this.measurementElements[index] = element;\n                }}\n              >\n                {item.label}\n              </ds-text>\n            ))}\n            <ds-text\n              class=\"breadcrumb__measurement\"\n              as=\"span\"\n              variant=\"text-caption\"\n              color=\"inherit\"\n              ref={element => {\n                this.ellipsisMeasurement = element;\n              }}\n            >\n              …\n            </ds-text>\n          </div>\n          <ol\n            class=\"breadcrumb__list\"\n            ref={element => {\n              this.listElement = element;\n            }}\n          >\n            {this.items.map((item, index) => (\n              <li class=\"breadcrumb__item\" key={item.id}>\n                {index > 0 ? (\n                  <ds-text\n                    class=\"breadcrumb__separator\"\n                    as=\"span\"\n                    variant=\"text-caption\"\n                    color=\"tertiary\"\n                    aria-hidden=\"true\"\n                    ref={element => {\n                      if (element) this.separatorElements[index - 1] = element;\n                    }}\n                  >\n                    /\n                  </ds-text>\n                ) : null}\n                {this.renderItem(item, index)}\n              </li>\n            ))}\n          </ol>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sGAAA,MAAMA,EAAgB,IAAM,+tG,MCQfC,EAAUC,EAAA,MAAAD,UAAAE,EALvB,WAAAC,CAAAC,G,6EAOUC,KAAAC,MAA0B,GAG1BD,KAAAE,UAAoB,aAKXF,KAAAG,YAAwB,GACxBH,KAAAI,gBAA6B,GAItCJ,KAAAK,oBAAqC,GACrCL,KAAAM,kBAAmC,EAgP5C,CA1OC,gBAAAC,GACEP,KAAKQ,mBACLR,KAAKS,2BACAC,SAASC,OAAOC,MAAMC,MAAK,IAAMb,KAAKS,uB,CAG7C,kBAAAK,GACEd,KAAKQ,mBACLR,KAAKS,qB,CAGP,oBAAAM,GACEf,KAAKgB,gBAAgBC,aACrBjB,KAAKkB,gBAAkBC,UACvB,GAAInB,KAAKoB,mBAAqBD,UAAWE,qBAAqBrB,KAAKoB,iB,CAIrE,iBAAAE,GACEtB,KAAKG,YAAc,GACnBH,KAAKI,gBAAkB,GACvBJ,KAAKS,qB,CAGC,gBAAAD,GACN,IAAKR,KAAKuB,YAAcvB,KAAKkB,kBAAoBlB,KAAKuB,WAAY,OAClEvB,KAAKgB,iBAALhB,KAAKgB,eAAmB,IAAIQ,gBAAe,IAAMxB,KAAKS,yBACtDT,KAAKgB,eAAeC,aACpBjB,KAAKgB,eAAeS,QAAQzB,KAAKuB,YACjCvB,KAAKkB,gBAAkBlB,KAAKuB,U,CAGtB,mBAAAd,GACN,GAAIT,KAAKoB,mBAAqBD,UAAW,OACzCnB,KAAKoB,iBAAmBM,uBAAsB,KAC5C1B,KAAKoB,iBAAmBD,UACxBnB,KAAK2B,eAAe,G,CAIhB,aAAAA,GACN,IACG3B,KAAKuB,aACLvB,KAAK4B,cACL5B,KAAK6B,qBACN7B,KAAKC,MAAM6B,SAAW,EACtB,OAEF,MAAMC,EAAgB/B,KAAKC,MAAM+B,KAC/B,CAACC,EAAGC,IAAUlC,KAAKK,oBAAoB6B,IAAQC,wBAAwBC,OAAS,IAElF,MAAMC,EAAgBrC,KAAK6B,oBAAoBM,wBAAwBC,MACvE,GAAIL,EAAcO,MAAKF,GAASA,IAAU,KAAMC,IAAkB,EAAG,OAErE,MAAME,EAAiBvC,KAAKM,kBAAkBkC,QAAO,CAACC,EAAOC,KAC3D,MAAMC,EAASC,iBAAiBF,GAChC,OACED,EACAC,EAAUP,wBAAwBC,MAClCS,OAAOC,WAAWH,EAAOI,mBACzBF,OAAOC,WAAWH,EAAOK,gBAAgB,GAE1C,GACH,MAAMC,EAAiBC,KAAKC,IAAI,EAAGnD,KAAKuB,WAAW6B,YAAcb,GACjE,MAAMc,EAAgBtB,EAAcC,KAAII,GAASc,KAAKI,IAAIlB,EAAOC,KACjE,MAAMkB,EAAa,IAAIF,GACvB,IAAIG,EAAiBN,KAAKC,IACxB,EACAF,EAAiBI,EAAcb,QAAO,CAACC,EAAOL,IAAUK,EAAQL,GAAO,IAKzE,IAAK,IAAIF,EAAQH,EAAcD,OAAS,EAAGI,GAAS,GAAKsB,EAAiB,EAAGtB,GAAS,EAAG,CACvF,MAAMuB,EAAaP,KAAKI,IACtBE,EACAzB,EAAcG,GAASmB,EAAcnB,IAEvCqB,EAAWrB,IAAUuB,EACrBD,GAAkBC,C,CAGpB,MAAMC,EACJH,EAAWzB,SAAW9B,KAAKG,YAAY2B,QACvCyB,EAAWjB,MACT,CAACF,EAAOF,IAAUgB,KAAKS,IAAIvB,GAASpC,KAAKG,YAAY+B,IAAU,IAAM,MAEzE,MAAM0B,EAAsBL,EAAWvB,KACrC,CAACI,EAAOF,IACNH,EAAcG,GAASmB,EAAcnB,IACrCgB,KAAKS,IAAIvB,EAAQiB,EAAcnB,KAAW,MAE9C,MAAM2B,EACJD,EAAoB9B,SAAW9B,KAAKI,gBAAgB0B,QACpD8B,EAAoBtB,MAClB,CAACwB,EAAa5B,IAAU4B,IAAgB9D,KAAKI,gBAAgB8B,KAEjE,GAAIwB,EAAe1D,KAAKG,YAAcoD,EACtC,GAAIM,EAAwB7D,KAAKI,gBAAkBwD,C,CAG7C,YAAAG,CAAaC,EAAsBC,GACzC,MAAMC,EAAQlE,KAAKmE,SAASC,KAAK,CAAEJ,OAAMC,kBACzC,GAAIC,EAAMG,iBAAkBJ,EAAcK,gB,CAGpC,UAAAC,CAAWP,EAAsB9B,GACvC,MAAMsC,EAAiBxE,KAAKG,YAAY+B,GACxC,MAAM4B,EAAc9D,KAAKI,gBAAgB8B,IAAU,MACnD,MAAMuC,EAAK,CAEPC,EAAA,WACEC,MAAM,oBACNC,GAAG,OACHC,QAAQ,eACRC,MAAM,UACNC,eAAgBjB,EAAc,OAAS,EAAC,cAC3BA,EAAc,OAAS3C,UACpC6D,MACER,IAAmBrD,UACfA,UACA,CAAE,2BAA4B,GAAGqD,QAGtCV,EAAc,IAAME,EAAKS,OAE5BX,EAAcY,EAAA,QAAMC,MAAM,mDAAmDX,EAAKS,OAAgB,MAItG,GAAIT,EAAKiB,UAAW,CAClB,OACEP,EAAA,QAAMC,MAAM,sBAAqB,eAAc,OAAM,aAAaX,EAAK9D,WACpEuE,E,CAKP,GAAIT,EAAKkB,KAAM,CACb,OACER,EAAA,KACEC,MAAM,iCACNO,KAAMlB,EAAKkB,KAAI,aACHlB,EAAK9D,UACjBiF,QAAUjB,GAAsBlE,KAAK+D,aAAaC,EAAME,IAEvDO,E,CAKP,OACEC,EAAA,UACEC,MAAM,iCACNS,KAAK,SAAQ,aACDpB,EAAK9D,UACjBiF,QAAUjB,GAAsBlE,KAAK+D,aAAaC,EAAME,IAEvDO,E,CAKP,MAAAY,GACE,GAAIrF,KAAKC,MAAM6B,SAAW,EAAG,OAAO,KAEpC9B,KAAKK,oBAAsB,GAC3BL,KAAKM,kBAAoB,GAEzB,OACEoE,EAACY,EAAI,KACHZ,EAAA,OACEC,MAAM,aAAY,aACN3E,KAAKE,UACjBqF,IAAKC,IACHxF,KAAKuB,WAAaiE,CAAO,GAG3Bd,EAAA,OAAKC,MAAM,2BAA0B,cAAa,QAC/C3E,KAAKC,MAAM+B,KAAI,CAACgC,EAAM9B,IACrBwC,EAAA,WACEC,MAAM,0BACNC,GAAG,OACHC,QAAQ,eACRC,MAAM,UACNS,IAAKC,IACH,GAAIA,EAASxF,KAAKK,oBAAoB6B,GAASsD,CAAO,GAGvDxB,EAAKS,SAGVC,EAAA,WACEC,MAAM,0BACNC,GAAG,OACHC,QAAQ,eACRC,MAAM,UACNS,IAAKC,IACHxF,KAAK6B,oBAAsB2D,CAAO,GACnC,MAKLd,EAAA,MACEC,MAAM,mBACNY,IAAKC,IACHxF,KAAK4B,YAAc4D,CAAO,GAG3BxF,KAAKC,MAAM+B,KAAI,CAACgC,EAAM9B,IACrBwC,EAAA,MAAIC,MAAM,mBAAmBc,IAAKzB,EAAK0B,IACpCxD,EAAQ,EACPwC,EAAA,WACEC,MAAM,wBACNC,GAAG,OACHC,QAAQ,eACRC,MAAM,WAAU,cACJ,OACZS,IAAKC,IACH,GAAIA,EAASxF,KAAKM,kBAAkB4B,EAAQ,GAAKsD,CAAO,GACzD,KAID,KACHxF,KAAKuE,WAAWP,EAAM9B,Q","ignoreList":[]}