@ds-mo/ui 14.31.3 → 14.32.0

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

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

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

@@ -56,8 +56,9 @@
         "Semantic state describes the represented value; active does not mean selected or pressed.",
         "The dismiss action is the chip's only interaction, and the parent owns data mutation after dsRemove.",
         "Long labels remain on one line and truncate only when the consuming layout supplies a maximum width; otherwise the chip sizes to its content.",
+        "When the chip is wider than its label, the dismiss control stays on the trailing edge.",
         "Rounded shape is a visual choice and does not change semantics or interaction.",
-        "isInset opts into reduced outer geometry only when Chip is nested inside a control of the same density. The dismiss button applies the same inset depth again inside the Chip's already-reduced height, and its trailing padding matches the resulting top and bottom space. The default single inset removes 4px overall; insetDepth double removes 8px overall and falls back to single at xs.",
+        "The dismiss orb is 4px smaller than the chip on every recipe, including single and double inset, with 2px on top, bottom, and the trailing edge. isInset opts into reduced outer geometry only when Chip is nested inside a control of the same density. The default single inset removes 4px overall; insetDepth double removes 8px overall and falls back to single at xs.",
         "Chip is designed only for primary surfaces and has no surface-context API."
       ],
       "responsiveBehavior": [
@@ -306,7 +307,7 @@
   "files": [
     {
       "path": "src/wc/components/Chip/Chip.css",
-      "content": "@import '../../utils/tag-chip.css';\n@import '../../utils/control-density-inset.css';\n\n/*\n * Semantic state colors — Chip’s differentiator from Tag.\n * All states use the faint contrast weight; hue comes from the state.\n */\n:host(.chip--default) {\n  background-color: var(--color-background-faint-neutral);\n  color: var(--color-foreground-bold-neutral);\n}\n\n:host(.chip--active) {\n  background-color: var(--color-background-faint-brand);\n  color: var(--color-foreground-bold-brand);\n}\n\n:host(.chip--error) {\n  background-color: var(--color-background-faint-negative);\n  color: var(--color-foreground-bold-negative);\n}\n\n:host(.chip--caution) {\n  background-color: var(--color-background-faint-caution);\n  color: var(--color-foreground-bold-caution);\n}\n\n/*\n * Label↔dismiss uses host gap, mirroring Tag icon↔label spacing:\n * [inset][text][inset][gap][icon].\n */\n.tag__remove {\n  --ds-chip-remove-size: var(--ds-control-height);\n\n  padding: 0;\n  margin: 0;\n  border: none;\n  box-sizing: border-box;\n  background: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--ds-chip-remove-size);\n  height: var(--ds-chip-remove-size);\n  cursor: default;\n  color: inherit;\n  flex-shrink: 0;\n  position: relative;\n  z-index: 2;\n  border-radius: var(--dimension-radius-half);\n}\n\n/* The dismiss action nests inside the already-inset chip, so its reduction is additive. */\n:host(.ds-control--inset) .tag__remove {\n  --ds-chip-remove-size: calc(var(--ds-control-height) - var(--dimension-space-050));\n}\n\n:host(.ds-control--inset) {\n  padding-inline-end: var(--dimension-space-025);\n}\n\n:host(.ds-control--inset-double) .tag__remove {\n  --ds-chip-remove-size: calc(var(--ds-control-height) - var(--dimension-space-100));\n}\n\n:host(.ds-control--inset-double) {\n  padding-inline-end: var(--dimension-space-050);\n}\n\n.tag__remove::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: var(--dimension-radius-half);\n  background-color: transparent;\n  transition: var(--effect-transition-interaction-background-short-2);\n  pointer-events: none;\n}\n\n@media (hover: hover) and (pointer: fine) {\n  .tag__remove:hover::before {\n    background-color: var(--color-interaction-hover);\n  }\n}\n\n.tag__remove:active::before {\n  background-color: var(--color-interaction-pressed);\n}\n\n.tag__remove-x {\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@import '../../utils/control-density-inset.css';\n\n/*\n * Semantic state colors — Chip’s differentiator from Tag.\n * All states use the faint contrast weight; hue comes from the state.\n */\n:host(.chip--default) {\n  background-color: var(--color-background-faint-neutral);\n  color: var(--color-foreground-bold-neutral);\n}\n\n:host(.chip--active) {\n  background-color: var(--color-background-faint-brand);\n  color: var(--color-foreground-bold-brand);\n}\n\n:host(.chip--error) {\n  background-color: var(--color-background-faint-negative);\n  color: var(--color-foreground-bold-negative);\n}\n\n:host(.chip--caution) {\n  background-color: var(--color-background-faint-caution);\n  color: var(--color-foreground-bold-caution);\n}\n\n/*\n * Label↔dismiss uses host gap, mirroring Tag icon↔label spacing:\n * [inset][text][inset][gap][icon].\n *\n * The dismiss orb is 4px smaller than the chip on every recipe, including\n * single and double inset, with 2px on top, bottom, and the trailing edge.\n * Extra inline space keeps the label at the start and the orb at the end.\n */\n.tag__remove {\n  --ds-chip-remove-size: calc(var(--ds-control-height) - var(--dimension-space-050));\n\n  padding: 0;\n  margin-block: 0;\n  margin-inline-end: 0;\n  margin-inline-start: auto;\n  border: none;\n  box-sizing: border-box;\n  background: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--ds-chip-remove-size);\n  height: var(--ds-chip-remove-size);\n  cursor: default;\n  color: inherit;\n  flex-shrink: 0;\n  position: relative;\n  z-index: 2;\n  border-radius: var(--dimension-radius-half);\n}\n\n:host {\n  justify-content: flex-start;\n  padding-inline-end: var(--dimension-space-025);\n}\n\n.tag__label {\n  flex: 1 1 auto;\n}\n\n.tag__remove::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: var(--dimension-radius-half);\n  background-color: transparent;\n  transition: var(--effect-transition-interaction-background-short-2);\n  pointer-events: none;\n}\n\n@media (hover: hover) and (pointer: fine) {\n  .tag__remove:hover::before {\n    background-color: var(--color-interaction-hover);\n  }\n}\n\n.tag__remove:active::before {\n  background-color: var(--color-interaction-pressed);\n}\n\n.tag__remove-x {\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/mcp-data/registry/conversation-list-item.json

@@ -277,7 +277,7 @@
   "files": [
     {
       "path": "src/wc/components/ConversationListItem/ConversationListItem.css",
-      "content": "@import '../../utils/choice-list.css';\n@import '../../utils/visually-hidden.css';\n@import '../../styles/control-elevation.css';\n\n:host {\n  display: block;\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n:host(:focus-within),\n:host(.conversation-list-item--actions-open) {\n  position: relative;\n  z-index: var(--dimension-z-index-floating);\n}\n\n.conversation-list-item__row {\n  position: relative;\n  isolation: isolate;\n}\n\n.conversation-list-item {\n  color: var(--color-foreground-primary);\n}\n\n.conversation-list-item--error {\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--color-border-bold-negative);\n}\n\n.conversation-list-item__leading:empty,\n.conversation-list-item__trailing:empty {\n  display: none;\n}\n\n.conversation-list-item__leading,\n.conversation-list-item__trailing,\n.conversation-list-item__preview-row {\n  display: flex;\n  align-items: center;\n}\n\n.conversation-list-item__leading {\n  align-self: center;\n  width: auto;\n  height: auto;\n  margin-inline-start: var(--ds-control-label-inset, var(--dimension-space-025));\n  margin-inline-end: var(--dimension-space-050);\n}\n\n.conversation-list-item__content {\n  min-width: 0;\n}\n\n.conversation-list-item__title-row {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n}\n\n.conversation-list-item__preview-row {\n  min-width: 0;\n  gap: var(--dimension-space-050);\n}\n\nds-text.conversation-list-item__title,\nds-text.conversation-list-item__preview {\n  display: block;\n  min-width: 0;\n}\n\nds-text.conversation-list-item__title {\n  flex: 1;\n}\n\n.conversation-list-item__unread {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--dimension-size-200);\n  margin-inline-end: var(--dimension-space-025);\n}\n\nds-text.conversation-list-item__preview.ds-choice-item__subtext {\n  -webkit-line-clamp: 1;\n}\n\n.conversation-list-item__actions {\n  position: absolute;\n  top: 50%;\n  right: var(--dimension-space-100);\n  z-index: var(--dimension-z-index-floating);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--dimension-radius-half);\n  background: var(--color-background-transparent);\n  -webkit-backdrop-filter: blur(var(--effect-blur-sm));\n  backdrop-filter: blur(var(--effect-blur-sm));\n  opacity: 0;\n  pointer-events: none;\n  transform: translateY(-50%);\n}\n\n.conversation-list-item__row:has(:focus-visible) .conversation-list-item__actions,\n:host(.conversation-list-item--actions-open) .conversation-list-item__actions {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n:host(.conversation-list-item--actions-open) .conversation-list-item::after {\n  background: var(--ds-interaction-hover);\n}\n\n.conversation-list-item__row:active .conversation-list-item::after {\n  background: var(--ds-interaction-pressed);\n}\n\n@media (hover: hover) and (pointer: fine) {\n  :host(:hover) {\n    position: relative;\n    z-index: var(--dimension-z-index-floating);\n  }\n\n  .conversation-list-item__row:hover .conversation-list-item__actions {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  /* Keep the row wash continuous while the pointer moves onto its sibling action. */\n  .conversation-list-item__row:hover .conversation-list-item::after {\n    background: var(--ds-interaction-hover);\n  }\n}\n\n@media (hover: none) {\n  .conversation-list-item__actions {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  :host(.conversation-list-item--has-actions) .conversation-list-item__title-row {\n    padding-inline-end: var(--dimension-size-400);\n  }\n}\n",
+      "content": "@import '../../utils/radius.css';\n@import '../../utils/choice-list.css';\n@import '../../utils/visually-hidden.css';\n@import '../../styles/control-elevation.css';\n\n:host {\n  display: block;\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n:host(:focus-within),\n:host(.conversation-list-item--actions-open) {\n  position: relative;\n  z-index: var(--dimension-z-index-floating);\n}\n\n.conversation-list-item__row {\n  position: relative;\n  isolation: isolate;\n}\n\n.conversation-list-item {\n  color: var(--color-foreground-primary);\n}\n\n.conversation-list-item--error {\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--color-border-bold-negative);\n}\n\n.conversation-list-item__leading:empty,\n.conversation-list-item__trailing:empty {\n  display: none;\n}\n\n.conversation-list-item__leading,\n.conversation-list-item__trailing,\n.conversation-list-item__preview-row {\n  display: flex;\n  align-items: center;\n}\n\n.conversation-list-item__leading {\n  align-self: center;\n  width: auto;\n  height: auto;\n  margin-inline-start: var(--ds-control-label-inset, var(--dimension-space-025));\n  margin-inline-end: var(--dimension-space-050);\n}\n\n.conversation-list-item__content {\n  min-width: 0;\n}\n\n.conversation-list-item__title-row {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n}\n\n.conversation-list-item__preview-row {\n  min-width: 0;\n  gap: var(--dimension-space-050);\n}\n\nds-text.conversation-list-item__title,\nds-text.conversation-list-item__preview {\n  display: block;\n  min-width: 0;\n}\n\nds-text.conversation-list-item__title {\n  flex: 1;\n}\n\n.conversation-list-item__unread {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--dimension-size-200);\n  margin-inline-end: var(--dimension-space-025);\n}\n\nds-text.conversation-list-item__preview.ds-choice-item__subtext {\n  -webkit-line-clamp: 1;\n}\n\n.conversation-list-item__actions {\n  position: absolute;\n  top: 50%;\n  right: var(--dimension-space-100);\n  z-index: var(--dimension-z-index-floating);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--dimension-radius-half);\n  background: var(--color-background-transparent);\n  -webkit-backdrop-filter: blur(var(--effect-blur-sm));\n  backdrop-filter: blur(var(--effect-blur-sm));\n  opacity: 0;\n  pointer-events: none;\n  transform: translateY(-50%);\n}\n\n.conversation-list-item__row:has(:focus-visible) .conversation-list-item__actions,\n:host(.conversation-list-item--actions-open) .conversation-list-item__actions {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n:host(.conversation-list-item--actions-open) .conversation-list-item::after {\n  background: var(--ds-interaction-hover);\n}\n\n.conversation-list-item__row:active .conversation-list-item::after {\n  background: var(--ds-interaction-pressed);\n}\n\n@media (hover: hover) and (pointer: fine) {\n  :host(:hover) {\n    position: relative;\n    z-index: var(--dimension-z-index-floating);\n  }\n\n  .conversation-list-item__row:hover .conversation-list-item__actions {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  /* Keep the row wash continuous while the pointer moves onto its sibling action. */\n  .conversation-list-item__row:hover .conversation-list-item::after {\n    background: var(--ds-interaction-hover);\n  }\n}\n\n@media (hover: none) {\n  .conversation-list-item__actions {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  :host(.conversation-list-item--has-actions) .conversation-list-item__title-row {\n    padding-inline-end: var(--dimension-size-400);\n  }\n}\n",
       "type": "registry:ui"
     },
     {

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

@@ -791,7 +791,7 @@
   "files": [
     {
       "path": "src/wc/components/FilterMenu/FilterMenu.css",
-      "content": "@import '../../utils/choice-list.css';\n@import '../../utils/chrome-header.css';\n@import '../../utils/control-parts.css';\n@import '../../utils/control-width.css';\n@import '../../utils/select-trigger.css';\n@import '../../utils/search-control.css';\n@import '../../utils/table-caption-control.css';\n\n:host(.filter-menu-host--external-trigger) {\n  display: contents;\n}\n\n.filter-menu {\n  display: flex;\n  min-height: 0;\n  flex-direction: column;\n  color: var(--color-foreground-secondary);\n}\n\n.filter-menu__body {\n  display: grid;\n  grid-template-columns: var(--dimension-menu-width-xs) var(--dimension-menu-width-sm);\n  min-height: calc(var(--dimension-size-800) * 4 + var(--dimension-space-150));\n  max-height: calc(100vh - var(--dimension-size-800) - var(--dimension-size-600));\n}\n\n.filter-menu__category-pane {\n  display: flex;\n  min-width: 0;\n  min-height: 0;\n  flex-direction: column;\n  border-inline-end: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n.filter-menu__categories {\n  flex: 1 1 auto;\n  min-width: 0;\n}\n\n.filter-menu__category-section {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n}\n\n.filter-menu__category-section.ds-choice-section--divided {\n  padding-block-end: var(--dimension-space-050);\n}\n\n.filter-menu__category {\n  justify-content: space-between;\n  width: 100%;\n  border: 0;\n  background: transparent;\n  color: var(--color-foreground-secondary);\n  cursor: default;\n  text-align: start;\n}\n\n.filter-menu__category--active {\n  color: var(--color-foreground-primary);\n}\n\n.filter-menu__category-dot-box {\n  display: flex;\n  align-items: center;\n  justify-content: center;\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  pointer-events: none;\n}\n\n.filter-menu__options {\n  display: flex;\n  min-width: 0;\n  min-height: 0;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.filter-menu__options-content {\n  display: flex;\n  min-width: 0;\n  min-height: 0;\n  flex: 1 1 auto;\n  flex-direction: column;\n  overflow: auto;\n}\n\n.filter-menu__option-search {\n  position: relative;\n  flex: 0 0 var(--dimension-size-500);\n  min-width: 0;\n  min-height: var(--dimension-size-500);\n  background: transparent;\n}\n\n.filter-menu__option-search::after {\n  content: '';\n  position: absolute;\n  inset: auto 0 0;\n  height: var(--dimension-stroke-width-012);\n  background-color: var(--color-border-tertiary);\n  pointer-events: none;\n}\n\n.filter-menu__option-search .select-search {\n  height: 100%;\n  background: transparent;\n}\n\n.filter-menu__options--date,\n.filter-menu__option-list--date,\n.filter-menu__date {\n  display: flex;\n  min-width: 0;\n  min-height: 0;\n  flex-direction: column;\n}\n\n.filter-menu__option-list--date,\n.filter-menu__date {\n  flex: 1 1 auto;\n}\n\n.filter-menu__date-header {\n  flex: 0 0 var(--dimension-size-500);\n  justify-content: center;\n  min-block-size: var(--dimension-size-500);\n  padding: var(--dimension-space-050);\n  background: var(--color-background-secondary);\n}\n\n.filter-menu__date-body {\n  display: flex;\n  flex: 1 1 auto;\n  min-height: 0;\n  flex-direction: column;\n}\n\n.filter-menu__date-relative {\n  flex: 1 1 auto;\n}\n\n.filter-menu__calendar {\n  display: flex;\n  min-height: 0;\n  flex-direction: column;\n  padding: var(--dimension-space-100);\n}\n\n.filter-menu__calendar-heading {\n  display: grid;\n  grid-template-columns: var(--dimension-size-400) minmax(0, 1fr) var(--dimension-size-400);\n  align-items: center;\n  text-align: center;\n}\n\n.filter-menu__calendar-nav--previous {\n  justify-self: start;\n}\n\n.filter-menu__calendar-nav--next {\n  justify-self: end;\n}\n\n.filter-menu__calendar-weekdays,\n.filter-menu__calendar-grid {\n  display: grid;\n  grid-template-columns: repeat(7, minmax(0, 1fr));\n  column-gap: var(--dimension-space-050);\n}\n\n.filter-menu__calendar-grid {\n  row-gap: var(--dimension-space-050);\n}\n\n.filter-menu__calendar-weekdays {\n  align-items: center;\n  min-height: var(--dimension-size-400);\n  margin-block-start: var(--dimension-space-050);\n  color: var(--color-foreground-secondary);\n  text-align: center;\n}\n\n.filter-menu__calendar-day {\n  appearance: none;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 0;\n  width: 100%;\n  height: var(--dimension-size-400);\n  padding: 0;\n  border: 0;\n  border-radius: var(--dimension-radius-025);\n  background: transparent;\n  color: var(--color-foreground-primary);\n  cursor: default;\n}\n\n.filter-menu__calendar-day--outside {\n  color: var(--color-foreground-tertiary);\n}\n\n.filter-menu__calendar-day--in-range {\n  background: var(--color-background-faint-brand);\n  color: var(--color-foreground-primary);\n}\n\n/* Pending range preview stays faint while the already-selected start keeps its bold edge. */\n.filter-menu__calendar-day--range-preview {\n  background: var(--color-background-faint-brand);\n}\n\n.filter-menu__calendar-day--today {\n  color: var(--color-foreground-primary);\n}\n\n.filter-menu__calendar-day--range-edge {\n  background: var(--color-background-bold-brand);\n  color: var(--color-foreground-on-bold-background-primary);\n}\n\n.filter-menu__footer {\n  flex: 0 0 auto;\n}\n\n.filter-menu__footer--categories-clear .ds-choice-footer__content {\n  justify-content: flex-start;\n}\n\n.filter-menu__footer--categories-clear[aria-hidden='true']::before {\n  visibility: hidden;\n}\n\n.filter-menu__clear {\n  color: var(--color-foreground-bold-brand);\n}\n\n.filter-menu__match-mode-footer {\n  flex: 0 0 auto;\n}\n\n.filter-menu__match-mode-content {\n  justify-content: flex-start;\n  padding-inline: calc(\n    var(--dimension-space-050) + var(--ds-control-padding-inline, var(--dimension-space-075)) +\n      var(--ds-control-label-inset, var(--dimension-space-025))\n  );\n}\n\n.filter-menu__match-mode-toggle {\n  appearance: none;\n  display: inline-flex;\n  align-items: center;\n  padding: 0;\n  border: 0;\n  border-radius: var(--dimension-radius-025);\n  background: transparent;\n  cursor: default;\n}\n\n@media (forced-colors: active) {\n  .filter-menu__category-pane {\n    border-inline-end-color: var(--ds-forced-color-content);\n  }\n\n  .filter-menu__calendar-day--range-edge {\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n  }\n}\n",
+      "content": "@import '../../utils/radius.css';\n@import '../../utils/choice-list.css';\n@import '../../utils/chrome-header.css';\n@import '../../utils/control-parts.css';\n@import '../../utils/control-width.css';\n@import '../../utils/select-trigger.css';\n@import '../../utils/search-control.css';\n@import '../../utils/table-caption-control.css';\n\n:host(.filter-menu-host--external-trigger) {\n  display: contents;\n}\n\n.filter-menu {\n  display: flex;\n  min-height: 0;\n  flex-direction: column;\n  color: var(--color-foreground-secondary);\n}\n\n.filter-menu__body {\n  display: grid;\n  grid-template-columns: var(--dimension-menu-width-xs) var(--dimension-menu-width-sm);\n  min-height: calc(var(--dimension-size-800) * 4 + var(--dimension-space-150));\n  max-height: calc(100vh - var(--dimension-size-800) - var(--dimension-size-600));\n}\n\n.filter-menu__category-pane {\n  display: flex;\n  min-width: 0;\n  min-height: 0;\n  flex-direction: column;\n  border-inline-end: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n.filter-menu__categories {\n  flex: 1 1 auto;\n  min-width: 0;\n}\n\n.filter-menu__category-section {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n}\n\n.filter-menu__category-section.ds-choice-section--divided {\n  padding-block-end: var(--dimension-space-050);\n}\n\n.filter-menu__category {\n  justify-content: space-between;\n  width: 100%;\n  border: 0;\n  background: transparent;\n  color: var(--color-foreground-secondary);\n  cursor: default;\n  text-align: start;\n}\n\n.filter-menu__category--active {\n  color: var(--color-foreground-primary);\n}\n\n.filter-menu__category-dot-box {\n  display: flex;\n  align-items: center;\n  justify-content: center;\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  pointer-events: none;\n}\n\n.filter-menu__options {\n  display: flex;\n  min-width: 0;\n  min-height: 0;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.filter-menu__options-content {\n  display: flex;\n  min-width: 0;\n  min-height: 0;\n  flex: 1 1 auto;\n  flex-direction: column;\n  overflow: auto;\n}\n\n.filter-menu__option-search {\n  position: relative;\n  flex: 0 0 var(--dimension-size-500);\n  min-width: 0;\n  min-height: var(--dimension-size-500);\n  background: transparent;\n}\n\n.filter-menu__option-search::after {\n  content: '';\n  position: absolute;\n  inset: auto 0 0;\n  height: var(--dimension-stroke-width-012);\n  background-color: var(--color-border-tertiary);\n  pointer-events: none;\n}\n\n.filter-menu__option-search .select-search {\n  height: 100%;\n  background: transparent;\n}\n\n.filter-menu__options--date,\n.filter-menu__option-list--date,\n.filter-menu__date {\n  display: flex;\n  min-width: 0;\n  min-height: 0;\n  flex-direction: column;\n}\n\n.filter-menu__option-list--date,\n.filter-menu__date {\n  flex: 1 1 auto;\n}\n\n.filter-menu__date-header {\n  flex: 0 0 var(--dimension-size-500);\n  justify-content: center;\n  min-block-size: var(--dimension-size-500);\n  padding: var(--dimension-space-050);\n  background: var(--color-background-secondary);\n}\n\n.filter-menu__date-body {\n  display: flex;\n  flex: 1 1 auto;\n  min-height: 0;\n  flex-direction: column;\n}\n\n.filter-menu__date-relative {\n  flex: 1 1 auto;\n}\n\n.filter-menu__calendar {\n  display: flex;\n  min-height: 0;\n  flex-direction: column;\n  padding: var(--dimension-space-100);\n}\n\n.filter-menu__calendar-heading {\n  display: grid;\n  grid-template-columns: var(--dimension-size-400) minmax(0, 1fr) var(--dimension-size-400);\n  align-items: center;\n  text-align: center;\n}\n\n.filter-menu__calendar-nav--previous {\n  justify-self: start;\n}\n\n.filter-menu__calendar-nav--next {\n  justify-self: end;\n}\n\n.filter-menu__calendar-weekdays,\n.filter-menu__calendar-grid {\n  display: grid;\n  grid-template-columns: repeat(7, minmax(0, 1fr));\n  column-gap: var(--dimension-space-050);\n}\n\n.filter-menu__calendar-grid {\n  row-gap: var(--dimension-space-050);\n}\n\n.filter-menu__calendar-weekdays {\n  align-items: center;\n  min-height: var(--dimension-size-400);\n  margin-block-start: var(--dimension-space-050);\n  color: var(--color-foreground-secondary);\n  text-align: center;\n}\n\n.filter-menu__calendar-day {\n  appearance: none;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 0;\n  width: 100%;\n  height: var(--dimension-size-400);\n  padding: 0;\n  border: 0;\n  border-radius: var(--dimension-radius-025);\n  background: transparent;\n  color: var(--color-foreground-primary);\n  cursor: default;\n}\n\n.filter-menu__calendar-day--outside {\n  color: var(--color-foreground-tertiary);\n}\n\n.filter-menu__calendar-day--in-range {\n  background: var(--color-background-faint-brand);\n  color: var(--color-foreground-primary);\n}\n\n/* Pending range preview stays faint while the already-selected start keeps its bold edge. */\n.filter-menu__calendar-day--range-preview {\n  background: var(--color-background-faint-brand);\n}\n\n.filter-menu__calendar-day--today {\n  color: var(--color-foreground-primary);\n}\n\n.filter-menu__calendar-day--range-edge {\n  background: var(--color-background-bold-brand);\n  color: var(--color-foreground-on-bold-background-primary);\n}\n\n.filter-menu__footer {\n  flex: 0 0 auto;\n}\n\n.filter-menu__footer--categories-clear .ds-choice-footer__content {\n  justify-content: flex-start;\n}\n\n.filter-menu__footer--categories-clear[aria-hidden='true']::before {\n  visibility: hidden;\n}\n\n.filter-menu__clear {\n  color: var(--color-foreground-bold-brand);\n}\n\n.filter-menu__match-mode-footer {\n  flex: 0 0 auto;\n}\n\n.filter-menu__match-mode-content {\n  justify-content: flex-start;\n  padding-inline: calc(\n    var(--dimension-space-050) + var(--ds-control-padding-inline, var(--dimension-space-075)) +\n      var(--ds-control-label-inset, var(--dimension-space-025))\n  );\n}\n\n.filter-menu__match-mode-toggle {\n  appearance: none;\n  display: inline-flex;\n  align-items: center;\n  padding: 0;\n  border: 0;\n  border-radius: var(--dimension-radius-025);\n  background: transparent;\n  cursor: default;\n}\n\n@media (forced-colors: active) {\n  .filter-menu__category-pane {\n    border-inline-end-color: var(--ds-forced-color-content);\n  }\n\n  .filter-menu__calendar-day--range-edge {\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n  }\n}\n",
       "type": "registry:ui"
     },
     {

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

@@ -715,7 +715,7 @@
   "files": [
     {
       "path": "src/wc/components/Input/Input.css",
-      "content": "@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-parts.css';\n@import '../../utils/control-width.css';\n@import '../../utils/field-stack.css';\n@import '../../utils/typography.css';\n@import '../../utils/forced-colors.css';\n\n:host(.input-host) {\n  display: inline-flex;\n  --ds-input-fg: var(--color-foreground-primary);\n  --ds-input-placeholder: var(--color-foreground-secondary);\n  --ds-input-placeholder-active: var(--color-foreground-quaternary);\n  --ds-input-adornment-fg: var(--color-foreground-secondary);\n  --ds-input-border: var(--color-border-secondary);\n  --ds-input-stepper-fg: var(--color-foreground-secondary);\n}\n\n:host(.ds-control-width--fill),\n:host(.ds-control-width--fill) .input-control {\n  width: 100%;\n}\n\n.input-control {\n  overflow: hidden;\n  background: transparent;\n  border: none;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  color: var(--ds-input-fg);\n}\n\n.input-control--bordered {\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--ds-input-border);\n}\n\n.input-control--error {\n  --ds-interaction-border-width: var(--dimension-stroke-width-018);\n  --ds-interaction-border-color: var(--color-border-bold-negative);\n}\n\n.input-control--bordered:focus-within:not(.input-control--error) {\n  --ds-interaction-border-width: var(--dimension-stroke-width-018);\n  --ds-interaction-border-color: var(--color-border-bold-brand);\n}\n\n:host(.ds-control-inactive) .input-control::after {\n  background: transparent;\n}\n\n.native-input {\n  position: relative;\n  z-index: 2;\n  flex: 1 1 auto;\n  min-width: 0;\n  height: 100%;\n  background: transparent;\n  border: none;\n  border-radius: inherit;\n  outline: none;\n  color: var(--ds-input-fg);\n  font-family: inherit;\n  text-overflow: ellipsis;\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n.native-input--align-start {\n  text-align: start;\n}\n\n.native-input--align-end {\n  text-align: end;\n}\n\n/* Replace engine-specific number arrows with one density-aware inset stepper. */\n.native-input[type='number'] {\n  -moz-appearance: textfield;\n}\n\n.native-input[type='number']::-webkit-inner-spin-button,\n.native-input[type='number']::-webkit-outer-spin-button {\n  margin: 0;\n  -webkit-appearance: none;\n}\n\n.input-control--number.input-control--align-start {\n  padding-inline-end: var(--dimension-space-025);\n}\n\n.input-control--number.input-control--align-end {\n  padding-inline-start: var(--dimension-space-025);\n}\n\n.input-control__number-stepper {\n  position: relative;\n  z-index: 2;\n  display: grid;\n  grid-template-rows: repeat(2, minmax(0, 1fr));\n  flex: 0 0 var(--ds-control-icon);\n  width: var(--ds-control-icon);\n  height: calc(var(--ds-control-height) - var(--dimension-space-050));\n  overflow: hidden;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  color: var(--ds-input-stepper-fg);\n}\n\n.input-control__number-step {\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  min-height: 0;\n  overflow: hidden;\n  color: inherit;\n  cursor: default;\n}\n\n.input-control__number-step--increment {\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025))\n    var(--ds-control-radius, var(--dimension-radius-025)) 0 0;\n}\n\n.input-control__number-step--decrement {\n  border-radius: 0 0 var(--ds-control-radius, var(--dimension-radius-025))\n    var(--ds-control-radius, var(--dimension-radius-025));\n}\n\n.input-control__number-step:disabled {\n  color: var(--color-foreground-quaternary);\n}\n\n.input-control__number-step-icon {\n  flex-shrink: 0;\n}\n\n.native-input:disabled {\n  cursor: not-allowed;\n}\n\n.native-input:read-only:not(:disabled) {\n  cursor: default;\n}\n\n.native-input::placeholder {\n  color: var(--ds-input-placeholder);\n}\n\n.native-input:focus::placeholder {\n  color: var(--ds-input-placeholder-active);\n}\n\n.native-input[type='search']::-webkit-search-cancel-button,\n.native-input[type='search']::-webkit-search-decoration {\n  display: none;\n}\n\n.input-control__prefix,\n.input-control__suffix {\n  position: relative;\n  z-index: 2;\n  color: var(--ds-input-adornment-fg);\n}\n\n.input-control__suffix--empty {\n  display: none;\n}\n\n/* The input frame owns the nested clear action's cross-axis alignment. */\n.input-control > .input-control__clear {\n  position: relative;\n  z-index: 2;\n  flex-shrink: 0;\n  align-self: center;\n}\n\n.input-control.ds-control--lg:has(.input-control__clear),\n.input-control.ds-control--md:has(.input-control__clear),\n.input-control.ds-control--sm:has(.input-control__clear) {\n  padding-right: var(--dimension-space-050);\n}\n\n.input-control.ds-control--xs:has(.input-control__clear) {\n  padding-right: 0;\n}\n\n.error-text {\n  width: 100%;\n}\n\n@media (forced-colors: active) {\n  .input-control__number-step:disabled {\n    color: var(--ds-forced-color-disabled);\n  }\n\n  .input-control--bordered:focus-within:not(.input-control--error)::after {\n    outline-color: var(--ds-forced-color-selected);\n  }\n\n  .input-control--error::after {\n    outline-style: dashed;\n  }\n}\n",
+      "content": "@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-parts.css';\n@import '../../utils/control-width.css';\n@import '../../utils/field-stack.css';\n@import '../../utils/typography.css';\n@import '../../utils/forced-colors.css';\n\n:host(.input-host) {\n  display: inline-flex;\n  --ds-input-fg: var(--color-foreground-primary);\n  --ds-input-placeholder: var(--color-foreground-secondary);\n  --ds-input-placeholder-active: var(--color-foreground-quaternary);\n  --ds-input-adornment-fg: var(--color-foreground-secondary);\n  --ds-input-border: var(--color-border-secondary);\n  --ds-input-stepper-fg: var(--color-foreground-secondary);\n}\n\n:host(.ds-control-width--fill),\n:host(.ds-control-width--fill) .input-control {\n  width: 100%;\n}\n\n.input-control {\n  overflow: hidden;\n  background: transparent;\n  border: none;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  color: var(--ds-input-fg);\n}\n\n.input-control--bordered {\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--ds-input-border);\n}\n\n.input-control--error {\n  --ds-interaction-border-width: var(--dimension-stroke-width-018);\n  --ds-interaction-border-color: var(--color-border-bold-negative);\n}\n\n.input-control--bordered:focus-within:not(.input-control--error) {\n  --ds-interaction-border-width: var(--dimension-stroke-width-018);\n  --ds-interaction-border-color: var(--color-border-bold-brand);\n}\n\n:host(.ds-control-inactive) .input-control::after {\n  background: transparent;\n}\n\n.native-input {\n  position: relative;\n  z-index: 2;\n  flex: 1 1 auto;\n  min-width: 0;\n  height: 100%;\n  background: transparent;\n  border: none;\n  border-radius: inherit;\n  outline: none;\n  color: var(--ds-input-fg);\n  font-family: inherit;\n  text-overflow: ellipsis;\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n.native-input--align-start {\n  text-align: start;\n}\n\n.native-input--align-end {\n  text-align: end;\n}\n\n/* Replace engine-specific number arrows with one density-aware inset stepper. */\n.native-input[type='number'] {\n  -moz-appearance: textfield;\n}\n\n.native-input[type='number']::-webkit-inner-spin-button,\n.native-input[type='number']::-webkit-outer-spin-button {\n  margin: 0;\n  -webkit-appearance: none;\n}\n\n.input-control--number.input-control--align-start {\n  padding-inline-end: var(--dimension-space-025);\n}\n\n.input-control--number.input-control--align-end {\n  padding-inline-start: var(--dimension-space-025);\n}\n\n.input-control__number-stepper {\n  position: relative;\n  z-index: 2;\n  display: grid;\n  grid-template-rows: repeat(2, minmax(0, 1fr));\n  flex: 0 0 var(--ds-control-icon);\n  width: var(--ds-control-icon);\n  height: calc(var(--ds-control-height) - var(--dimension-space-050));\n  overflow: hidden;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  color: var(--ds-input-stepper-fg);\n}\n\n.input-control__number-step {\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  min-height: 0;\n  overflow: hidden;\n  color: inherit;\n  cursor: default;\n}\n\n.input-control__number-step--increment {\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025))\n    var(--ds-control-radius, var(--dimension-radius-025)) 0 0;\n}\n\n.input-control__number-step--decrement {\n  border-radius: 0 0 var(--ds-control-radius, var(--dimension-radius-025))\n    var(--ds-control-radius, var(--dimension-radius-025));\n}\n\n.input-control__number-step:disabled {\n  color: var(--color-foreground-quaternary);\n}\n\n.input-control__number-step-icon {\n  flex-shrink: 0;\n}\n\n.native-input:disabled {\n  cursor: not-allowed;\n}\n\n.native-input:read-only:not(:disabled) {\n  cursor: default;\n}\n\n.native-input::placeholder {\n  color: var(--ds-input-placeholder);\n}\n\n.native-input:focus::placeholder {\n  color: var(--ds-input-placeholder-active);\n}\n\n.native-input[type='search']::-webkit-search-cancel-button,\n.native-input[type='search']::-webkit-search-decoration {\n  display: none;\n}\n\n.input-control__prefix,\n.input-control__suffix {\n  position: relative;\n  z-index: 2;\n  color: var(--ds-input-adornment-fg);\n}\n\n.input-control__suffix--empty {\n  display: none;\n}\n\n/* The input frame owns the nested clear action's cross-axis alignment. */\n.input-control > .input-control__clear {\n  position: relative;\n  z-index: 2;\n  flex-shrink: 0;\n  align-self: center;\n}\n\n.input-control.ds-control--lg:has(.input-control__clear),\n.input-control.ds-control--md:has(.input-control__clear),\n.input-control.ds-control--sm:has(.input-control__clear) {\n  padding-right: var(--dimension-space-050);\n}\n\n.input-control.ds-control--xs:has(.input-control__clear) {\n  padding-right: 0;\n}\n\n.error-text {\n  width: 100%;\n}\n\n@media (forced-colors: active) {\n  .input-control__number-step:disabled {\n    color: var(--ds-forced-color-disabled);\n  }\n\n  .input-control--bordered:focus-within:not(.input-control--error)::after {\n    outline-color: var(--ds-forced-color-selected);\n  }\n\n  .input-control--error::after {\n    outline-style: dashed;\n  }\n}\n",
       "type": "registry:ui"
     },
     {

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

@@ -542,7 +542,7 @@
   "files": [
     {
       "path": "src/wc/components/Menu/Menu.css",
-      "content": "@import '../../utils/choice-list.css';\n@import '../../utils/visually-hidden.css';\n@import '../../utils/forced-colors.css';\n\n/* Inactive: `.ds-control-inactive` (50% opacity). */\n\n.menu-empty {\n  padding: var(--dimension-space-200);\n  box-sizing: border-box;\n  overflow-wrap: anywhere;\n}\n\n.menu-item--destructive .menu-item__label {\n  /* Beat ds-text color-* host classes for destructive rows. */\n  color: var(--color-foreground-bold-negative) !important;\n}\n\n/* Standard md icon zone keeps the dot aligned with other control suffixes. */\n.menu-item__dot-box {\n  display: flex;\n  align-items: center;\n  justify-content: center;\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  pointer-events: none;\n}\n\n/* Switch suffix keeps an 8px label-to-control gap without changing the\n   density gap between a prefix icon or drag handle and the label. */\n.menu-item__switch {\n  flex-shrink: 0;\n  margin-inline-start: calc(\n    var(--dimension-space-100) - var(--ds-control-gap, var(--dimension-space-050))\n  );\n}\n\n/* ── Prefix icon / reorder handle ────────────────────────────────────────── */\n\n.menu-item > .menu-item__handle {\n  pointer-events: auto;\n  cursor: grab;\n  touch-action: none;\n}\n\n.menu-item > .menu-item__handle:active,\n.menu-item--dragging > .menu-item__handle {\n  cursor: grabbing;\n}\n\n.menu-item--dragging {\n  opacity: var(--effect-opacity-medium);\n}\n\n.menu-item__drop-rail {\n  position: absolute;\n  z-index: var(--dimension-z-index-raised);\n  inset-inline: var(--dimension-space-050);\n  block-size: var(--dimension-stroke-width-025);\n  border-radius: var(--dimension-radius-half);\n  background: var(--color-border-bold-brand);\n  pointer-events: none;\n}\n\n.menu-item__drop-rail--before {\n  inset-block-start: calc(-1 * var(--dimension-space-025));\n  transform: translateY(-50%);\n}\n\n.menu-item__drop-rail--after {\n  inset-block-end: calc(-1 * var(--dimension-space-025));\n  transform: translateY(50%);\n}\n\n@media (forced-colors: active) {\n  .menu-item__drop-rail {\n    background: var(--ds-forced-color-selected);\n  }\n}\n",
+      "content": "@import '../../utils/radius.css';\n@import '../../utils/choice-list.css';\n@import '../../utils/visually-hidden.css';\n@import '../../utils/forced-colors.css';\n\n/* Inactive: `.ds-control-inactive` (50% opacity). */\n\n.menu-empty {\n  padding: var(--dimension-space-200);\n  box-sizing: border-box;\n  overflow-wrap: anywhere;\n}\n\n.menu-item--destructive .menu-item__label {\n  /* Beat ds-text color-* host classes for destructive rows. */\n  color: var(--color-foreground-bold-negative) !important;\n}\n\n/* Standard md icon zone keeps the dot aligned with other control suffixes. */\n.menu-item__dot-box {\n  display: flex;\n  align-items: center;\n  justify-content: center;\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  pointer-events: none;\n}\n\n/* Switch suffix keeps an 8px label-to-control gap without changing the\n   density gap between a prefix icon or drag handle and the label. */\n.menu-item__switch {\n  flex-shrink: 0;\n  margin-inline-start: calc(\n    var(--dimension-space-100) - var(--ds-control-gap, var(--dimension-space-050))\n  );\n}\n\n/* ── Prefix icon / reorder handle ────────────────────────────────────────── */\n\n.menu-item > .menu-item__handle {\n  pointer-events: auto;\n  cursor: grab;\n  touch-action: none;\n}\n\n.menu-item > .menu-item__handle:active,\n.menu-item--dragging > .menu-item__handle {\n  cursor: grabbing;\n}\n\n.menu-item--dragging {\n  opacity: var(--effect-opacity-medium);\n}\n\n.menu-item__drop-rail {\n  position: absolute;\n  z-index: var(--dimension-z-index-raised);\n  inset-inline: var(--dimension-space-050);\n  block-size: var(--dimension-stroke-width-025);\n  border-radius: var(--dimension-radius-half);\n  background: var(--color-border-bold-brand);\n  pointer-events: none;\n}\n\n.menu-item__drop-rail--before {\n  inset-block-start: calc(-1 * var(--dimension-space-025));\n  transform: translateY(-50%);\n}\n\n.menu-item__drop-rail--after {\n  inset-block-end: calc(-1 * var(--dimension-space-025));\n  transform: translateY(50%);\n}\n\n@media (forced-colors: active) {\n  .menu-item__drop-rail {\n    background: var(--ds-forced-color-selected);\n  }\n}\n",
       "type": "registry:ui"
     },
     {

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

@@ -221,7 +221,7 @@
   "files": [
     {
       "path": "src/wc/components/MobileSectionSwitcher/MobileSectionSwitcher.css",
-      "content": "@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-density.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__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\n.mobile-section-switcher--sheet {\n  grid-template-columns: minmax(0, auto);\n  min-height: var(--dimension-size-500);\n  padding-inline: var(--dimension-space-150);\n  border-radius: var(--dimension-radius-half);\n  background: transparent;\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--color-border-tertiary);\n}\n\n.mobile-section-switcher--combined {\n  display: flex;\n}\n\n.mobile-section-switcher__page-label {\n  flex: 0 1 auto;\n  min-width: 0;\n}\n\n.mobile-section-switcher__separator {\n  flex: 0 0 auto;\n}\n\n.mobile-section-switcher--combined .mobile-section-switcher__label {\n  flex: 0 0 auto;\n  max-width: 50%;\n}\n\n.mobile-section-sheet {\n  position: fixed;\n  inset: 0 0 auto;\n  width: 100%;\n  max-width: none;\n  max-height: calc(100dvh - var(--dimension-size-500) - var(--dimension-space-200));\n  margin: 0;\n  padding: 0;\n  border: 0;\n  border-radius: 0;\n  box-sizing: border-box;\n  overflow: visible;\n  background: transparent;\n  color: var(--color-foreground-secondary);\n  outline: none;\n}\n\n.mobile-section-sheet[open] {\n  display: flex;\n  flex-direction: column;\n}\n\n.mobile-section-sheet[open] .mobile-section-sheet__items {\n  animation: mobileSectionSheetIn var(--effect-motion-short-2) both;\n}\n\n.mobile-section-sheet::backdrop {\n  background: var(--color-background-shade);\n  animation: mobileSectionShadeIn var(--effect-motion-short-2) both;\n}\n\n.mobile-section-sheet--closing[open] .mobile-section-sheet__items {\n  animation-name: mobileSectionSheetOut;\n}\n\n.mobile-section-sheet--closing::backdrop {\n  animation-name: mobileSectionShadeOut;\n}\n\n.mobile-section-sheet__items {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-100);\n  min-height: 0;\n  max-height: inherit;\n  box-sizing: border-box;\n  background: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  padding: var(--dimension-space-100);\n  padding-block-start: max(var(--dimension-space-100), env(safe-area-inset-top, 0px));\n  overflow-y: auto;\n  overscroll-behavior: contain;\n}\n\n.mobile-section-sheet__item {\n  appearance: none;\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  height: var(--ds-control-height);\n  width: 100%;\n  min-width: 0;\n  padding: 0 var(--ds-control-padding-inline);\n  box-sizing: border-box;\n  border: 0;\n  border-radius: var(--ds-control-radius);\n  background: transparent;\n  color: inherit;\n  text-align: start;\n}\n\n.mobile-section-sheet__item[aria-current='page'] {\n  color: var(--color-foreground-primary);\n}\n\n.mobile-section-sheet__item:disabled {\n  color: var(--color-foreground-tertiary);\n}\n\n.mobile-section-sheet__label {\n  min-width: 0;\n  padding-inline: var(--ds-control-label-inset);\n}\n\n.mobile-section-sheet__divider {\n  flex: 0 0 auto;\n  height: var(--dimension-stroke-width-012);\n  margin-inline: var(--dimension-space-100);\n  background: var(--color-border-tertiary);\n}\n\n@keyframes mobileSectionSheetIn {\n  from {\n    transform: translateY(-100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n\n@keyframes mobileSectionSheetOut {\n  from {\n    transform: translateY(0);\n  }\n  to {\n    transform: translateY(-100%);\n  }\n}\n\n@keyframes mobileSectionShadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes mobileSectionShadeOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n/* Safari can preserve :focus-visible across modal entry and focus return after\n * a tap. Track the actual input, while leaving focus and keyboard access intact. */\n:host(.mobile-section-switcher--pointer-focus) .ds-focus-ring-inset::after {\n  outline: none;\n}\n\n/* Keep this opaque strip in the modal top layer, outside the moving sheet.\n * Safari samples fixed edge backgrounds to tint its browser controls. */\n.mobile-section-sheet__browser-edge {\n  position: fixed;\n  inset: auto 0 0;\n  height: max(var(--dimension-space-200), env(safe-area-inset-bottom, 0px));\n  pointer-events: none;\n  color: var(--color-background-primary);\n  background-color: var(--_mobile-section-edge-color, var(--color-background-primary));\n}\n\n.mobile-section-sheet[open] .mobile-section-sheet__browser-edge {\n  animation: mobileSectionEdgeIn var(--effect-motion-short-2) both;\n}\n\n.mobile-section-sheet--closing[open] .mobile-section-sheet__browser-edge {\n  animation-name: mobileSectionEdgeOut;\n}\n\n/* Animate the opaque color, not opacity: the backdrop is already fading below. */\n@keyframes mobileSectionEdgeIn {\n  from {\n    background-color: var(--color-background-primary);\n  }\n  to {\n    background-color: var(--_mobile-section-edge-color, var(--color-background-primary));\n  }\n}\n\n@keyframes mobileSectionEdgeOut {\n  from {\n    background-color: var(--_mobile-section-edge-color, var(--color-background-primary));\n  }\n  to {\n    background-color: var(--color-background-primary);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .mobile-section-sheet[open] .mobile-section-sheet__items,\n  .mobile-section-sheet[open] .mobile-section-sheet__browser-edge,\n  .mobile-section-sheet::backdrop {\n    animation: none;\n  }\n}\n",
+      "content": "@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/radius.css';\n@import '../../utils/control-density.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__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\n.mobile-section-switcher--sheet {\n  grid-template-columns: minmax(0, auto);\n  min-height: var(--dimension-size-500);\n  padding-inline: var(--dimension-space-150);\n  border-radius: var(--dimension-radius-half);\n  background: transparent;\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--color-border-tertiary);\n}\n\n.mobile-section-switcher--combined {\n  display: flex;\n}\n\n.mobile-section-switcher__page-label {\n  flex: 0 1 auto;\n  min-width: 0;\n}\n\n.mobile-section-switcher__separator {\n  flex: 0 0 auto;\n}\n\n.mobile-section-switcher--combined .mobile-section-switcher__label {\n  flex: 0 0 auto;\n  max-width: 50%;\n}\n\n.mobile-section-sheet {\n  position: fixed;\n  inset: 0 0 auto;\n  width: 100%;\n  max-width: none;\n  max-height: calc(100dvh - var(--dimension-size-500) - var(--dimension-space-200));\n  margin: 0;\n  padding: 0;\n  border: 0;\n  border-radius: 0;\n  box-sizing: border-box;\n  overflow: visible;\n  background: transparent;\n  color: var(--color-foreground-secondary);\n  outline: none;\n}\n\n.mobile-section-sheet[open] {\n  display: flex;\n  flex-direction: column;\n}\n\n.mobile-section-sheet[open] .mobile-section-sheet__items {\n  animation: mobileSectionSheetIn var(--effect-motion-short-2) both;\n}\n\n.mobile-section-sheet::backdrop {\n  background: var(--color-background-shade);\n  animation: mobileSectionShadeIn var(--effect-motion-short-2) both;\n}\n\n.mobile-section-sheet--closing[open] .mobile-section-sheet__items {\n  animation-name: mobileSectionSheetOut;\n}\n\n.mobile-section-sheet--closing::backdrop {\n  animation-name: mobileSectionShadeOut;\n}\n\n.mobile-section-sheet__items {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-100);\n  min-height: 0;\n  max-height: inherit;\n  box-sizing: border-box;\n  background: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  padding: var(--dimension-space-100);\n  padding-block-start: max(var(--dimension-space-100), env(safe-area-inset-top, 0px));\n  overflow-y: auto;\n  overscroll-behavior: contain;\n}\n\n.mobile-section-sheet__item {\n  appearance: none;\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  height: var(--ds-control-height);\n  width: 100%;\n  min-width: 0;\n  padding: 0 var(--ds-control-padding-inline);\n  box-sizing: border-box;\n  border: 0;\n  border-radius: var(--ds-control-radius);\n  background: transparent;\n  color: inherit;\n  text-align: start;\n}\n\n.mobile-section-sheet__item[aria-current='page'] {\n  color: var(--color-foreground-primary);\n}\n\n.mobile-section-sheet__item:disabled {\n  color: var(--color-foreground-tertiary);\n}\n\n.mobile-section-sheet__label {\n  min-width: 0;\n  padding-inline: var(--ds-control-label-inset);\n}\n\n.mobile-section-sheet__divider {\n  flex: 0 0 auto;\n  height: var(--dimension-stroke-width-012);\n  margin-inline: var(--dimension-space-100);\n  background: var(--color-border-tertiary);\n}\n\n@keyframes mobileSectionSheetIn {\n  from {\n    transform: translateY(-100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n\n@keyframes mobileSectionSheetOut {\n  from {\n    transform: translateY(0);\n  }\n  to {\n    transform: translateY(-100%);\n  }\n}\n\n@keyframes mobileSectionShadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes mobileSectionShadeOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n/* Safari can preserve :focus-visible across modal entry and focus return after\n * a tap. Track the actual input, while leaving focus and keyboard access intact. */\n:host(.mobile-section-switcher--pointer-focus) .ds-focus-ring-inset::after {\n  outline: none;\n}\n\n/* Keep this opaque strip in the modal top layer, outside the moving sheet.\n * Safari samples fixed edge backgrounds to tint its browser controls. */\n.mobile-section-sheet__browser-edge {\n  position: fixed;\n  inset: auto 0 0;\n  height: max(var(--dimension-space-200), env(safe-area-inset-bottom, 0px));\n  pointer-events: none;\n  color: var(--color-background-primary);\n  background-color: var(--_mobile-section-edge-color, var(--color-background-primary));\n}\n\n.mobile-section-sheet[open] .mobile-section-sheet__browser-edge {\n  animation: mobileSectionEdgeIn var(--effect-motion-short-2) both;\n}\n\n.mobile-section-sheet--closing[open] .mobile-section-sheet__browser-edge {\n  animation-name: mobileSectionEdgeOut;\n}\n\n/* Animate the opaque color, not opacity: the backdrop is already fading below. */\n@keyframes mobileSectionEdgeIn {\n  from {\n    background-color: var(--color-background-primary);\n  }\n  to {\n    background-color: var(--_mobile-section-edge-color, var(--color-background-primary));\n  }\n}\n\n@keyframes mobileSectionEdgeOut {\n  from {\n    background-color: var(--_mobile-section-edge-color, var(--color-background-primary));\n  }\n  to {\n    background-color: var(--color-background-primary);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .mobile-section-sheet[open] .mobile-section-sheet__items,\n  .mobile-section-sheet[open] .mobile-section-sheet__browser-edge,\n  .mobile-section-sheet::backdrop {\n    animation: none;\n  }\n}\n",
       "type": "registry:ui"
     },
     {

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

@@ -388,7 +388,7 @@
   "files": [
     {
       "path": "src/wc/components/MobileSheetNav/MobileSheetNav.css",
-      "content": "@import '../../utils/control-density.css';\n@import '../../utils/chrome-layout.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/nav-disclosure.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  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n}\n\n.mobile-sheet-nav__header--expanded-context {\n  grid-template-columns:\n    minmax(var(--dimension-size-500), 1fr)\n    minmax(0, 4fr)\n    minmax(var(--dimension-size-500), 1fr);\n}\n\n.mobile-sheet-nav__header--expanded-context .mobile-sheet-nav__context {\n  width: 100%;\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}\n\n.mobile-sheet-nav__sections {\n  display: grid;\n  gap: var(--dimension-space-400);\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\n.mobile-sheet-nav__children {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-100);\n  min-height: 0;\n  overflow: hidden;\n}\n\n.mobile-sheet-nav__child {\n  flex: 0 0 var(--ds-control-height);\n  padding-inline-start: calc(\n    var(--ds-control-padding-inline) + var(--dimension-iconography-lg) + var(--ds-control-gap)\n  );\n}\n\n.mobile-sheet-nav__child:first-child {\n  margin-block-start: var(--dimension-space-100);\n}\n\n.mobile-sheet-nav__child:disabled {\n  color: var(--color-foreground-tertiary);\n}\n\n.mobile-sheet-nav__parent--muted {\n  color: var(--color-foreground-secondary);\n}\n\n.mobile-sheet-nav__divider-line {\n  display: block;\n  height: var(--dimension-stroke-width-012);\n  margin-inline: var(--dimension-space-100);\n  background: var(--color-border-tertiary);\n}\n\n.mobile-sheet-nav__divider--before .mobile-sheet-nav__divider-line {\n  margin-block: var(--dimension-space-050) var(--dimension-space-150);\n}\n\n.mobile-sheet-nav__divider--after .mobile-sheet-nav__divider-line {\n  margin-block: var(--dimension-space-150) var(--dimension-space-050);\n}\n",
+      "content": "@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n@import '../../utils/chrome-layout.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/nav-disclosure.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  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n}\n\n.mobile-sheet-nav__header--expanded-context {\n  grid-template-columns:\n    minmax(var(--dimension-size-500), 1fr)\n    minmax(0, 4fr)\n    minmax(var(--dimension-size-500), 1fr);\n}\n\n.mobile-sheet-nav__header--expanded-context .mobile-sheet-nav__context {\n  width: 100%;\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}\n\n.mobile-sheet-nav__sections {\n  display: grid;\n  gap: var(--dimension-space-400);\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\n.mobile-sheet-nav__children {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-100);\n  min-height: 0;\n  overflow: hidden;\n}\n\n.mobile-sheet-nav__child {\n  flex: 0 0 var(--ds-control-height);\n  padding-inline-start: calc(\n    var(--ds-control-padding-inline) + var(--dimension-iconography-lg) + var(--ds-control-gap)\n  );\n}\n\n.mobile-sheet-nav__child:first-child {\n  margin-block-start: var(--dimension-space-100);\n}\n\n.mobile-sheet-nav__child:disabled {\n  color: var(--color-foreground-tertiary);\n}\n\n.mobile-sheet-nav__parent--muted {\n  color: var(--color-foreground-secondary);\n}\n\n.mobile-sheet-nav__divider-line {\n  display: block;\n  height: var(--dimension-stroke-width-012);\n  margin-inline: var(--dimension-space-100);\n  background: var(--color-border-tertiary);\n}\n\n.mobile-sheet-nav__divider--before .mobile-sheet-nav__divider-line {\n  margin-block: var(--dimension-space-050) var(--dimension-space-150);\n}\n\n.mobile-sheet-nav__divider--after .mobile-sheet-nav__divider-line {\n  margin-block: var(--dimension-space-150) var(--dimension-space-050);\n}\n",
       "type": "registry:ui"
     },
     {

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

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

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

@@ -2,7 +2,7 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "pagination",
   "title": "Pagination",
-  "description": "Controlled fixed or fitted page-size, compact range, adjacent-page navigation, and optional first/last controls for application-owned data windows.",
+  "description": "Controlled fixed or fitted page-size, page position, adjacent-page navigation, and optional first/last controls for application-owned data windows.",
   "type": "registry:ui",
   "meta": {
     "library": "@ds-mo/ui",
@@ -13,10 +13,10 @@
     "intent": {
       "audience": "general",
       "status": "stable",
-      "summary": "Controlled fixed or fitted page-size, compact range, adjacent-page navigation, and optional first/last controls for application-owned data windows.",
+      "summary": "Controlled fixed or fitted page-size, page position, adjacent-page navigation, and optional first/last controls for application-owned data windows.",
       "useWhen": [
         "A result set is divided into discrete pages and the application owns fetching or slicing each page.",
-        "A table or list needs a compact page-size selector, result range, and boundary-aware navigation.",
+        "A table or list needs a compact page-size selector, page position, and boundary-aware navigation.",
         "Direct first-page and last-page navigation is useful enough to opt into alongside the default Previous and Next controls."
       ],
       "avoidWhen": [
@@ -30,7 +30,7 @@
       ],
       "accessibility": [
         "The component renders a named navigation region, gives its compact page-size noun a complete accessible label, and gives every icon-only boundary control an explicit page action name.",
-        "The visible page-size cluster states the localized noun, selected size, and current-page count of total, for example Rows: [25] 25 of 500. The page position uses compact ‘of’ phrasing, for example 1 of 20. A polite atomic status update retains the complete current range and ‘Page’ phrasing with the localized item noun.",
+        "The visible page-size cluster states the localized noun and selected size, then a vertical divider, then page position, for example Rows: [25] | 1 of 20. A polite atomic status update retains the complete current range and ‘Page’ phrasing with the localized item noun.",
         "Left and Right Arrow request the adjacent page while focus is within pagination navigation controls. The page-size combobox retains its own arrow-key behavior.",
         "Inactive boundary controls and every control during loading remain non-interactive while retaining their accessible names.",
         "showFirstLastButtons adds explicitly named First page and Last page controls; Previous and Next remain present in either mode."
@@ -38,14 +38,14 @@
       "states": [
         "pageIndex, numeric effective pageSize, pageSizeMode, totalItems, and pageSizeOptions are controlled inputs. dsChange reports the complete next pagination state, previous index, size, and mode, and whether the request changed the page, page size, or fitted capacity; it never mutates controlled inputs.",
         "Page-size changes request the first page. Out-of-range page indexes and invalid numeric inputs normalize only for presentation; the owner remains authoritative.",
-        "Zero results display 0–0 of 0 and Page 1 of 1. A partial final page caps the visible range at totalItems.",
+        "Zero results display Page 1 of 1. A partial final page still derives from totalItems. Assistive status keeps the complete item range.",
         "loading preserves the full pagination surface, applies aria-busy to the navigation region, and prevents page or page-size requests.",
-        "fitToPage appends a Fit to page choice. fitPageSize supplies its effective whole-item capacity; the closed trigger says Fit while the range continues to expose the resulting count. fitToPageInactive keeps that choice visible but unavailable when fitting is not meaningful for the current data shape. Pagination does not measure layouts itself.",
+        "fitToPage appends a Fit to page choice. fitPageSize supplies its effective whole-item capacity; the closed trigger says Fit while page position reflects the resulting window. fitToPageInactive keeps that choice visible but unavailable when fitting is not meaningful for the current data shape. Pagination does not measure layouts itself.",
         "showFirstLastButtons defaults to false. Enable it when direct jumps to both result boundaries materially help the workflow."
       ],
       "responsiveBehavior": [
-        "The full-width controls remain on one line with noun, selected size, current-page count of total, a vertical divider, page position, Previous and Next, plus optional First and Last navigation.",
-        "Inside a ds-table container narrower than 900px, pagination hides the visible current-page count and any opted-in first/last controls while retaining the page-size noun and selector plus Previous, page position, and Next. The complete current range remains available to assistive technology."
+        "The full-width controls remain on one line with noun, selected size, a vertical divider, page position, Previous and Next, plus optional First and Last navigation.",
+        "Inside a ds-table container narrower than 900px, pagination hides any opted-in first/last controls while retaining the page-size noun and selector plus Previous, page position, and Next. The complete current range remains available to assistive technology."
       ],
       "frameworkCaveats": {
         "customElements": [
@@ -425,12 +425,12 @@
   "files": [
     {
       "path": "src/wc/components/Pagination/Pagination.css",
-      "content": "@import '../../utils/visually-hidden.css';\n\n:host {\n  display: block;\n  box-sizing: border-box;\n  min-width: 0;\n  max-width: 100%;\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n\n:host::-webkit-scrollbar {\n  display: none;\n}\n\n.pagination,\n.pagination__page-size,\n.pagination__navigation {\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n}\n\n.pagination {\n  width: max-content;\n  min-width: 100%;\n  gap: var(--dimension-space-200);\n}\n\n.pagination__page-size,\n.pagination__navigation {\n  flex: 0 0 auto;\n}\n\n.pagination__page-size {\n  gap: 0;\n  padding-inline-end: var(--dimension-space-100);\n}\n\n.pagination__navigation {\n  gap: var(--dimension-space-050);\n}\n\n.pagination__total,\n.pagination__page,\n.pagination__label {\n  display: inline-flex;\n  align-items: center;\n  flex: 0 0 auto;\n  white-space: nowrap;\n}\n\n.pagination__total {\n  margin-inline-start: var(--dimension-space-100);\n}\n\n.pagination .pagination__page-size-select {\n  --ds-select-fg-active: var(--color-foreground-secondary);\n}\n\n.pagination__page {\n  justify-content: center;\n  min-inline-size: 0;\n  padding-inline: var(--dimension-space-100);\n}\n\n.pagination--table-compact .pagination__total,\n.pagination--table-compact .pagination__boundary {\n  display: none;\n}\n\n.pagination--table-compact {\n  gap: var(--dimension-space-100);\n}\n\n.pagination--table-compact .pagination__page-size {\n  padding-inline-end: 0;\n}\n",
+      "content": "@import '../../utils/visually-hidden.css';\n\n:host {\n  display: block;\n  box-sizing: border-box;\n  min-width: 0;\n  max-width: 100%;\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n\n:host::-webkit-scrollbar {\n  display: none;\n}\n\n.pagination,\n.pagination__page-size,\n.pagination__navigation {\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n}\n\n.pagination {\n  width: max-content;\n  min-width: 100%;\n  gap: var(--dimension-space-100);\n}\n\n.pagination__page-size,\n.pagination__navigation {\n  flex: 0 0 auto;\n}\n\n.pagination__page-size {\n  gap: 0;\n}\n\n.pagination__navigation {\n  gap: var(--dimension-space-050);\n}\n\n.pagination__page,\n.pagination__label {\n  display: inline-flex;\n  align-items: center;\n  flex: 0 0 auto;\n  white-space: nowrap;\n}\n\n.pagination .pagination__page-size-select {\n  --ds-select-fg-active: var(--color-foreground-secondary);\n}\n\n.pagination__page {\n  justify-content: center;\n  min-inline-size: 0;\n  padding-inline: var(--dimension-space-100);\n}\n\n.pagination--table-compact .pagination__boundary {\n  display: none;\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/Pagination/Pagination.tsx",
-      "content": "import { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\nimport { observeTableCaptionCompact } from '../../utils/table-caption-compact';\nimport { resolvePaginationState } from './pagination-model';\nimport type { PaginationChangeDetail, PaginationPageSizeMode } from './pagination-types';\n\nlet paginationId = 0;\n\n@Component({\n  tag: 'ds-pagination',\n  styleUrl: 'Pagination.css',\n  scoped: true,\n})\nexport class Pagination {\n  @Element() el!: HTMLElement;\n\n  /** Controlled zero-based page index. */\n  @Prop() pageIndex: number = 0;\n  /** Controlled number of top-level items on a full page. */\n  @Prop() pageSize: number = 25;\n  /** Whether pageSize is a fixed choice or a measured Fit snapshot. */\n  @Prop() pageSizeMode: PaginationPageSizeMode = 'fixed';\n  /** Controlled total number of top-level items across every page. */\n  @Prop() totalItems: number = 0;\n  /** Available page sizes. Assign arrays through JavaScript. */\n  @Prop() pageSizeOptions: number[] = [25, 50, 100, 200];\n  /** Include the Fit to page choice. */\n  @Prop() fitToPage: boolean = false;\n  /** Keep the Fit to page choice visible but unavailable. */\n  @Prop() fitToPageInactive: boolean = false;\n  /** Effective whole-item capacity to request when Fit is selected. */\n  @Prop() fitPageSize: number | undefined;\n  /** Full choice-list label for Fit. */\n  @Prop() fitPageSizeLabel: string = 'Fit to page';\n  /** Compact closed-trigger label while Fit is selected. */\n  @Prop() fitPageSizeTriggerLabel: string = 'Fit';\n  /** Localized plural noun used by assistive range announcements. */\n  @Prop() itemLabel: string = 'items';\n  /** Visible page-size control label. */\n  @Prop() pageSizeLabel: string = 'Items';\n  /** Accessible page-size control label. Defaults to “{pageSizeLabel} per page”. */\n  @Prop() pageSizeAriaLabel: string | undefined;\n  /** Accessible name for the pagination navigation region. */\n  @Prop() label: string = 'Pagination';\n  /** Include direct first-page and last-page controls. */\n  @Prop() showFirstLastButtons: boolean = false;\n  /** Prevent interaction while the owner replaces the current data page. */\n  @Prop() loading: boolean = false;\n\n  /** Emits the complete next controlled state after a page or page-size request. */\n  @Event() dsChange!: EventEmitter<PaginationChangeDetail>;\n\n  @State() private tableCompact = false;\n\n  private readonly pageSizeControlId = `ds-pagination-${++paginationId}-page-size`;\n  private tableCompactDisconnect: (() => void) | undefined;\n  private hasLoaded = false;\n\n  componentDidLoad(): void {\n    this.hasLoaded = true;\n    this.syncTableCompactObserver();\n  }\n\n  connectedCallback(): void {\n    if (this.hasLoaded) this.syncTableCompactObserver();\n  }\n\n  disconnectedCallback(): void {\n    this.tableCompactDisconnect?.();\n    this.tableCompactDisconnect = undefined;\n  }\n\n  private syncTableCompactObserver(): void {\n    this.tableCompactDisconnect?.();\n    this.tableCompactDisconnect = observeTableCaptionCompact(this.el, compact => {\n      if (this.tableCompact !== compact) this.tableCompact = compact;\n    });\n  }\n\n  private requestPage(pageIndex: number): void {\n    const state = this.resolvedState;\n    if (\n      this.loading ||\n      pageIndex === state.pageIndex ||\n      pageIndex < 0 ||\n      pageIndex >= state.totalPages\n    ) {\n      return;\n    }\n    this.dsChange.emit({\n      pageIndex,\n      pageSize: state.pageSize,\n      pageSizeMode: state.pageSizeMode,\n      totalItems: state.totalItems,\n      pageSizeOptions: state.pageSizeOptions,\n      fitToPage: this.fitToPage,\n      fitToPageInactive: this.fitToPageInactive,\n      fitPageSize: this.resolvedFitPageSize,\n      fitPageSizeLabel: this.fitPageSizeLabel,\n      fitPageSizeTriggerLabel: this.fitPageSizeTriggerLabel,\n      itemLabel: this.itemLabel,\n      pageSizeLabel: this.pageSizeLabel,\n      ariaLabel: this.label,\n      showFirstLastButtons: this.showFirstLastButtons,\n      previousPageIndex: state.pageIndex,\n      previousPageSize: state.pageSize,\n      previousPageSizeMode: state.pageSizeMode,\n      reason: 'page',\n    });\n  }\n\n  private requestPageSize(value: string | string[]): void {\n    if (this.loading || typeof value !== 'string' || (value === 'fit' && this.fitToPageInactive))\n      return;\n    const state = this.resolvedState;\n    const nextMode: PaginationPageSizeMode = value === 'fit' ? 'fit' : 'fixed';\n    const pageSize = nextMode === 'fit' ? this.resolvedFitPageSize : Number(value);\n    if (!pageSize || (pageSize === state.pageSize && nextMode === state.pageSizeMode)) return;\n    this.dsChange.emit({\n      pageIndex: 0,\n      pageSize: Math.trunc(pageSize),\n      pageSizeMode: nextMode,\n      totalItems: state.totalItems,\n      pageSizeOptions: state.pageSizeOptions,\n      fitToPage: this.fitToPage,\n      fitToPageInactive: this.fitToPageInactive,\n      fitPageSize: this.resolvedFitPageSize,\n      fitPageSizeLabel: this.fitPageSizeLabel,\n      fitPageSizeTriggerLabel: this.fitPageSizeTriggerLabel,\n      itemLabel: this.itemLabel,\n      pageSizeLabel: this.pageSizeLabel,\n      ariaLabel: this.label,\n      showFirstLastButtons: this.showFirstLastButtons,\n      previousPageIndex: state.pageIndex,\n      previousPageSize: state.pageSize,\n      previousPageSizeMode: state.pageSizeMode,\n      reason: 'page-size',\n    });\n  }\n\n  private handleKeyDown(event: KeyboardEvent): void {\n    if (\n      event.defaultPrevented ||\n      event.altKey ||\n      event.ctrlKey ||\n      event.metaKey ||\n      event.shiftKey\n    ) {\n      return;\n    }\n    const fromChoiceControl = event\n      .composedPath()\n      .some(\n        node =>\n          node instanceof HTMLElement &&\n          (node.tagName === 'DS-SELECT' || ['INPUT', 'SELECT', 'TEXTAREA'].includes(node.tagName))\n      );\n    if (fromChoiceControl || (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight')) return;\n    const state = this.resolvedState;\n    const pageIndex = event.key === 'ArrowLeft' ? state.pageIndex - 1 : state.pageIndex + 1;\n    if (this.loading || pageIndex < 0 || pageIndex >= state.totalPages) return;\n    event.preventDefault();\n    this.requestPage(pageIndex);\n  }\n\n  private get resolvedFitPageSize(): number | undefined {\n    return Number.isFinite(this.fitPageSize) && Number(this.fitPageSize) > 0\n      ? Math.trunc(Number(this.fitPageSize))\n      : undefined;\n  }\n\n  private get resolvedState() {\n    return resolvePaginationState({\n      pageIndex: this.pageIndex,\n      pageSize: this.pageSize,\n      pageSizeMode: this.pageSizeMode,\n      totalItems: this.totalItems,\n      pageSizeOptions: this.pageSizeOptions,\n    });\n  }\n\n  render() {\n    const state = this.resolvedState;\n    const atStart = state.pageIndex === 0;\n    const atEnd = state.pageIndex === state.totalPages - 1;\n    const visibleItems = state.totalItems === 0 ? 0 : state.lastItem - state.firstItem + 1;\n    const total = `${visibleItems} of ${state.totalItems}`;\n    const page = `${state.pageIndex + 1} of ${state.totalPages}`;\n    const announcedRange = `${state.firstItem}–${state.lastItem} of ${state.totalItems}`;\n    const announcedPage = `Page ${state.pageIndex + 1} of ${state.totalPages}`;\n    const pageSizeAriaLabel = this.pageSizeAriaLabel ?? `${this.pageSizeLabel} per page`;\n    const options: Array<{ label: string; value: string; isInactive?: boolean }> =\n      state.pageSizeOptions.map(value => ({ label: String(value), value: String(value) }));\n    if (this.fitToPage) {\n      options.push({\n        label: this.fitPageSizeLabel,\n        value: 'fit',\n        isInactive: this.fitToPageInactive || this.resolvedFitPageSize === undefined,\n      });\n    }\n\n    return (\n      <Host>\n        <nav\n          class={{\n            pagination: true,\n            'pagination--table-compact': this.tableCompact,\n          }}\n          aria-label={this.label}\n          aria-busy={this.loading ? 'true' : undefined}\n          onKeyDown={event => this.handleKeyDown(event)}\n        >\n          <div class=\"pagination__page-size\">\n            <ds-text\n              class=\"pagination__label\"\n              as=\"span\"\n              variant=\"text-body-medium\"\n              color=\"secondary\"\n              aria-hidden=\"true\"\n            >\n              {this.pageSizeLabel}:\n            </ds-text>\n            <span id={`${this.pageSizeControlId}-label`} class=\"ds-visually-hidden\">\n              {pageSizeAriaLabel}\n            </span>\n            <ds-select\n              class=\"pagination__page-size-select\"\n              size=\"md\"\n              inputId={this.pageSizeControlId}\n              ariaLabelledby={`${this.pageSizeControlId}-label`}\n              options={options}\n              value={state.pageSizeMode === 'fit' ? 'fit' : String(state.pageSize)}\n              triggerLabel={state.pageSizeMode === 'fit' ? this.fitPageSizeTriggerLabel : undefined}\n              indicator=\"up-down\"\n              allowClear={false}\n              activeFill={false}\n              hasBorder={false}\n              isInactive={this.loading}\n              onDsChange={event => {\n                event.stopPropagation();\n                this.requestPageSize(event.detail);\n              }}\n            />\n            <ds-text\n              class=\"pagination__total\"\n              as=\"span\"\n              variant=\"text-body-medium\"\n              color=\"secondary\"\n              fontFeature=\"tabular-nums\"\n            >\n              {total}\n            </ds-text>\n          </div>\n          <ds-divider\n            class=\"pagination__divider\"\n            orientation=\"vertical\"\n            length=\"var(--dimension-size-250)\"\n          />\n          <div class=\"pagination__navigation\">\n            {this.showFirstLastButtons ? (\n              <ds-button-unfilled\n                class=\"pagination__boundary\"\n                variant=\"icon\"\n                size=\"md\"\n                icon=\"ChevronLeftDouble\"\n                ariaLabel=\"First page\"\n                hasBorder={false}\n                isInactive={this.loading || atStart}\n                onDsClick={() => this.requestPage(0)}\n              />\n            ) : null}\n            <ds-button-unfilled\n              variant=\"icon\"\n              size=\"md\"\n              icon=\"ChevronLeft\"\n              ariaLabel=\"Previous page\"\n              hasBorder={false}\n              isInactive={this.loading || atStart}\n              onDsClick={() => this.requestPage(state.pageIndex - 1)}\n            />\n            <ds-text\n              class=\"pagination__page\"\n              as=\"span\"\n              variant=\"text-body-medium\"\n              color=\"secondary\"\n              fontFeature=\"tabular-nums\"\n            >\n              {page}\n            </ds-text>\n            <ds-button-unfilled\n              variant=\"icon\"\n              size=\"md\"\n              icon=\"ChevronRight\"\n              ariaLabel=\"Next page\"\n              hasBorder={false}\n              isInactive={this.loading || atEnd}\n              onDsClick={() => this.requestPage(state.pageIndex + 1)}\n            />\n            {this.showFirstLastButtons ? (\n              <ds-button-unfilled\n                class=\"pagination__boundary\"\n                variant=\"icon\"\n                size=\"md\"\n                icon=\"ChevronRightDouble\"\n                ariaLabel=\"Last page\"\n                hasBorder={false}\n                isInactive={this.loading || atEnd}\n                onDsClick={() => this.requestPage(state.totalPages - 1)}\n              />\n            ) : null}\n          </div>\n          <span class=\"ds-visually-hidden\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n            {announcedRange} {this.itemLabel}. {announcedPage}.\n          </span>\n        </nav>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\nimport { observeTableCaptionCompact } from '../../utils/table-caption-compact';\nimport { resolvePaginationState } from './pagination-model';\nimport type { PaginationChangeDetail, PaginationPageSizeMode } from './pagination-types';\n\nlet paginationId = 0;\n\n@Component({\n  tag: 'ds-pagination',\n  styleUrl: 'Pagination.css',\n  scoped: true,\n})\nexport class Pagination {\n  @Element() el!: HTMLElement;\n\n  /** Controlled zero-based page index. */\n  @Prop() pageIndex: number = 0;\n  /** Controlled number of top-level items on a full page. */\n  @Prop() pageSize: number = 25;\n  /** Whether pageSize is a fixed choice or a measured Fit snapshot. */\n  @Prop() pageSizeMode: PaginationPageSizeMode = 'fixed';\n  /** Controlled total number of top-level items across every page. */\n  @Prop() totalItems: number = 0;\n  /** Available page sizes. Assign arrays through JavaScript. */\n  @Prop() pageSizeOptions: number[] = [25, 50, 100, 200];\n  /** Include the Fit to page choice. */\n  @Prop() fitToPage: boolean = false;\n  /** Keep the Fit to page choice visible but unavailable. */\n  @Prop() fitToPageInactive: boolean = false;\n  /** Effective whole-item capacity to request when Fit is selected. */\n  @Prop() fitPageSize: number | undefined;\n  /** Full choice-list label for Fit. */\n  @Prop() fitPageSizeLabel: string = 'Fit to page';\n  /** Compact closed-trigger label while Fit is selected. */\n  @Prop() fitPageSizeTriggerLabel: string = 'Fit';\n  /** Localized plural noun used by assistive range announcements. */\n  @Prop() itemLabel: string = 'items';\n  /** Visible page-size control label. */\n  @Prop() pageSizeLabel: string = 'Items';\n  /** Accessible page-size control label. Defaults to “{pageSizeLabel} per page”. */\n  @Prop() pageSizeAriaLabel: string | undefined;\n  /** Accessible name for the pagination navigation region. */\n  @Prop() label: string = 'Pagination';\n  /** Include direct first-page and last-page controls. */\n  @Prop() showFirstLastButtons: boolean = false;\n  /** Prevent interaction while the owner replaces the current data page. */\n  @Prop() loading: boolean = false;\n\n  /** Emits the complete next controlled state after a page or page-size request. */\n  @Event() dsChange!: EventEmitter<PaginationChangeDetail>;\n\n  @State() private tableCompact = false;\n\n  private readonly pageSizeControlId = `ds-pagination-${++paginationId}-page-size`;\n  private tableCompactDisconnect: (() => void) | undefined;\n  private hasLoaded = false;\n\n  componentDidLoad(): void {\n    this.hasLoaded = true;\n    this.syncTableCompactObserver();\n  }\n\n  connectedCallback(): void {\n    if (this.hasLoaded) this.syncTableCompactObserver();\n  }\n\n  disconnectedCallback(): void {\n    this.tableCompactDisconnect?.();\n    this.tableCompactDisconnect = undefined;\n  }\n\n  private syncTableCompactObserver(): void {\n    this.tableCompactDisconnect?.();\n    this.tableCompactDisconnect = observeTableCaptionCompact(this.el, compact => {\n      if (this.tableCompact !== compact) this.tableCompact = compact;\n    });\n  }\n\n  private requestPage(pageIndex: number): void {\n    const state = this.resolvedState;\n    if (\n      this.loading ||\n      pageIndex === state.pageIndex ||\n      pageIndex < 0 ||\n      pageIndex >= state.totalPages\n    ) {\n      return;\n    }\n    this.dsChange.emit({\n      pageIndex,\n      pageSize: state.pageSize,\n      pageSizeMode: state.pageSizeMode,\n      totalItems: state.totalItems,\n      pageSizeOptions: state.pageSizeOptions,\n      fitToPage: this.fitToPage,\n      fitToPageInactive: this.fitToPageInactive,\n      fitPageSize: this.resolvedFitPageSize,\n      fitPageSizeLabel: this.fitPageSizeLabel,\n      fitPageSizeTriggerLabel: this.fitPageSizeTriggerLabel,\n      itemLabel: this.itemLabel,\n      pageSizeLabel: this.pageSizeLabel,\n      ariaLabel: this.label,\n      showFirstLastButtons: this.showFirstLastButtons,\n      previousPageIndex: state.pageIndex,\n      previousPageSize: state.pageSize,\n      previousPageSizeMode: state.pageSizeMode,\n      reason: 'page',\n    });\n  }\n\n  private requestPageSize(value: string | string[]): void {\n    if (this.loading || typeof value !== 'string' || (value === 'fit' && this.fitToPageInactive))\n      return;\n    const state = this.resolvedState;\n    const nextMode: PaginationPageSizeMode = value === 'fit' ? 'fit' : 'fixed';\n    const pageSize = nextMode === 'fit' ? this.resolvedFitPageSize : Number(value);\n    if (!pageSize || (pageSize === state.pageSize && nextMode === state.pageSizeMode)) return;\n    this.dsChange.emit({\n      pageIndex: 0,\n      pageSize: Math.trunc(pageSize),\n      pageSizeMode: nextMode,\n      totalItems: state.totalItems,\n      pageSizeOptions: state.pageSizeOptions,\n      fitToPage: this.fitToPage,\n      fitToPageInactive: this.fitToPageInactive,\n      fitPageSize: this.resolvedFitPageSize,\n      fitPageSizeLabel: this.fitPageSizeLabel,\n      fitPageSizeTriggerLabel: this.fitPageSizeTriggerLabel,\n      itemLabel: this.itemLabel,\n      pageSizeLabel: this.pageSizeLabel,\n      ariaLabel: this.label,\n      showFirstLastButtons: this.showFirstLastButtons,\n      previousPageIndex: state.pageIndex,\n      previousPageSize: state.pageSize,\n      previousPageSizeMode: state.pageSizeMode,\n      reason: 'page-size',\n    });\n  }\n\n  private handleKeyDown(event: KeyboardEvent): void {\n    if (\n      event.defaultPrevented ||\n      event.altKey ||\n      event.ctrlKey ||\n      event.metaKey ||\n      event.shiftKey\n    ) {\n      return;\n    }\n    const fromChoiceControl = event\n      .composedPath()\n      .some(\n        node =>\n          node instanceof HTMLElement &&\n          (node.tagName === 'DS-SELECT' || ['INPUT', 'SELECT', 'TEXTAREA'].includes(node.tagName))\n      );\n    if (fromChoiceControl || (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight')) return;\n    const state = this.resolvedState;\n    const pageIndex = event.key === 'ArrowLeft' ? state.pageIndex - 1 : state.pageIndex + 1;\n    if (this.loading || pageIndex < 0 || pageIndex >= state.totalPages) return;\n    event.preventDefault();\n    this.requestPage(pageIndex);\n  }\n\n  private get resolvedFitPageSize(): number | undefined {\n    return Number.isFinite(this.fitPageSize) && Number(this.fitPageSize) > 0\n      ? Math.trunc(Number(this.fitPageSize))\n      : undefined;\n  }\n\n  private get resolvedState() {\n    return resolvePaginationState({\n      pageIndex: this.pageIndex,\n      pageSize: this.pageSize,\n      pageSizeMode: this.pageSizeMode,\n      totalItems: this.totalItems,\n      pageSizeOptions: this.pageSizeOptions,\n    });\n  }\n\n  render() {\n    const state = this.resolvedState;\n    const atStart = state.pageIndex === 0;\n    const atEnd = state.pageIndex === state.totalPages - 1;\n    const page = `${state.pageIndex + 1} of ${state.totalPages}`;\n    const announcedRange = `${state.firstItem}–${state.lastItem} of ${state.totalItems}`;\n    const announcedPage = `Page ${state.pageIndex + 1} of ${state.totalPages}`;\n    const pageSizeAriaLabel = this.pageSizeAriaLabel ?? `${this.pageSizeLabel} per page`;\n    const options: Array<{ label: string; value: string; isInactive?: boolean }> =\n      state.pageSizeOptions.map(value => ({ label: String(value), value: String(value) }));\n    if (this.fitToPage) {\n      options.push({\n        label: this.fitPageSizeLabel,\n        value: 'fit',\n        isInactive: this.fitToPageInactive || this.resolvedFitPageSize === undefined,\n      });\n    }\n\n    return (\n      <Host>\n        <nav\n          class={{\n            pagination: true,\n            'pagination--table-compact': this.tableCompact,\n          }}\n          aria-label={this.label}\n          aria-busy={this.loading ? 'true' : undefined}\n          onKeyDown={event => this.handleKeyDown(event)}\n        >\n          <div class=\"pagination__page-size\">\n            <ds-text\n              class=\"pagination__label\"\n              as=\"span\"\n              variant=\"text-body-medium\"\n              color=\"secondary\"\n              aria-hidden=\"true\"\n            >\n              {this.pageSizeLabel}:\n            </ds-text>\n            <span id={`${this.pageSizeControlId}-label`} class=\"ds-visually-hidden\">\n              {pageSizeAriaLabel}\n            </span>\n            <ds-select\n              class=\"pagination__page-size-select\"\n              size=\"md\"\n              inputId={this.pageSizeControlId}\n              ariaLabelledby={`${this.pageSizeControlId}-label`}\n              options={options}\n              value={state.pageSizeMode === 'fit' ? 'fit' : String(state.pageSize)}\n              triggerLabel={state.pageSizeMode === 'fit' ? this.fitPageSizeTriggerLabel : undefined}\n              indicator=\"up-down\"\n              allowClear={false}\n              activeFill={false}\n              hasBorder={false}\n              isInactive={this.loading}\n              onDsChange={event => {\n                event.stopPropagation();\n                this.requestPageSize(event.detail);\n              }}\n            />\n          </div>\n          <ds-divider\n            class=\"pagination__divider\"\n            orientation=\"vertical\"\n            length=\"var(--dimension-size-250)\"\n          />\n          <div class=\"pagination__navigation\">\n            {this.showFirstLastButtons ? (\n              <ds-button-unfilled\n                class=\"pagination__boundary\"\n                variant=\"icon\"\n                size=\"md\"\n                icon=\"ChevronLeftDouble\"\n                ariaLabel=\"First page\"\n                hasBorder={false}\n                isInactive={this.loading || atStart}\n                onDsClick={() => this.requestPage(0)}\n              />\n            ) : null}\n            <ds-button-unfilled\n              variant=\"icon\"\n              size=\"md\"\n              icon=\"ChevronLeft\"\n              ariaLabel=\"Previous page\"\n              hasBorder={false}\n              isInactive={this.loading || atStart}\n              onDsClick={() => this.requestPage(state.pageIndex - 1)}\n            />\n            <ds-text\n              class=\"pagination__page\"\n              as=\"span\"\n              variant=\"text-body-medium\"\n              color=\"secondary\"\n              fontFeature=\"tabular-nums\"\n            >\n              {page}\n            </ds-text>\n            <ds-button-unfilled\n              variant=\"icon\"\n              size=\"md\"\n              icon=\"ChevronRight\"\n              ariaLabel=\"Next page\"\n              hasBorder={false}\n              isInactive={this.loading || atEnd}\n              onDsClick={() => this.requestPage(state.pageIndex + 1)}\n            />\n            {this.showFirstLastButtons ? (\n              <ds-button-unfilled\n                class=\"pagination__boundary\"\n                variant=\"icon\"\n                size=\"md\"\n                icon=\"ChevronRightDouble\"\n                ariaLabel=\"Last page\"\n                hasBorder={false}\n                isInactive={this.loading || atEnd}\n                onDsClick={() => this.requestPage(state.totalPages - 1)}\n              />\n            ) : null}\n          </div>\n          <span class=\"ds-visually-hidden\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n            {announcedRange} {this.itemLabel}. {announcedPage}.\n          </span>\n        </nav>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     },
     {

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

@@ -708,7 +708,7 @@
   "files": [
     {
       "path": "src/wc/components/PanelNav/PanelNav.css",
-      "content": "@import '../../utils/control-density.css';\n@import '../../utils/chrome-layout.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/scrollbar-hidden.css';\n@import '../../utils/nav-disclosure.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(\n    var(--dimension-space-075, 6px) * 2 + var(--dimension-iconography-md, 20px)\n  );\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)\n    var(--effect-animation-easing-ease-in-out, ease);\n  --_nav-label-fade-out-dur: calc(\n    var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms)\n  );\n  --_nav-label-fade-out-motion: var(--_nav-label-fade-out-dur)\n    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:host-context(ds-shell-app.shell-app--paper-texture) .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-ui, 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  height: var(--dimension-size-600, 48px);\n  flex-shrink: 0;\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@media (hover: hover) and (pointer: fine) {\n  .panel-nav:not(.panel-nav--breakpoint-locked)\n    .panel-nav__header-btn:hover\n    .panel-nav__header-logo {\n    opacity: 0;\n  }\n\n  .panel-nav:not(.panel-nav--breakpoint-locked)\n    .panel-nav__header-btn:hover\n    .panel-nav__header-toggle {\n    opacity: 1;\n  }\n}\n/* ── Scrollable body ─────────────────────────────────────────────────────── */\n\n.panel-nav__body {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n/* The collapsed rail's outer width includes its 1px divider. Return that pixel\n   to the content box so body items match the other 32px rail controls. */\n.panel-nav--collapsed .panel-nav__body {\n  padding-inline-end: calc(var(--_nav-padding-x) - var(--dimension-stroke-width-012));\n}\n\n.panel-nav__sections {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-200, 16px);\n  width: 100%;\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.panel-nav__branch {\n  display: flex;\n  flex-direction: column;\n}\n\n.panel-nav__branch-divider-line {\n  display: block;\n  height: var(--dimension-stroke-width-012);\n  margin-inline: var(--dimension-space-075);\n  background: var(--_nav-divider);\n}\n\n.panel-nav__branch-divider--before .panel-nav__branch-divider-line {\n  margin-block: var(--dimension-space-050) var(--dimension-space-100);\n}\n\n.panel-nav__branch-divider--after .panel-nav__branch-divider-line {\n  margin-block: var(--dimension-space-100) var(--dimension-space-050);\n}\n\n.panel-nav__children-accordion,\n.panel-nav__branch-divider {\n  --ds-nav-disclosure-duration: var(\n    --_panel-nav-nested-section-duration,\n    calc(var(--effect-animation-duration-short-3) * 2 + var(--effect-animation-duration-short-2))\n  );\n  --ds-nav-disclosure-wait: var(\n    --_panel-nav-nested-transition-wait,\n    calc(var(--effect-animation-duration-short-3) + var(--effect-animation-duration-short-1))\n  );\n  --ds-nav-disclosure-fade: var(\n    --_panel-nav-nested-child-fade-duration,\n    var(--ds-nav-disclosure-duration)\n  );\n  --ds-nav-disclosure-stagger: var(\n    --_panel-nav-nested-child-stagger,\n    var(--effect-animation-duration-short-1)\n  );\n}\n\n.panel-nav__children {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050, 4px);\n  min-height: 0;\n  overflow: hidden;\n}\n\n/* Margin lives on the first child so closed 0fr accordions still collapse to 0. */\n.panel-nav__children > .panel-nav__child:first-child {\n  margin-block-start: 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.panel-nav__parent--muted {\n  color: var(--_nav-fg-secondary);\n}\n\n.panel-nav__child {\n  flex: 0 0 var(--_nav-item-height);\n  padding-inline-start: calc(\n    var(--dimension-space-075, 6px) + var(--dimension-iconography-md) + var(--dimension-space-050)\n  );\n}\n\n.panel-nav__children-accordion:not(.panel-nav__children-accordion--open) .panel-nav__child {\n  color: var(--_nav-fg-secondary);\n}\n\n.panel-nav__child-dot {\n  position: relative;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 var(--dimension-iconography-md);\n  width: var(--dimension-iconography-md);\n  height: var(--dimension-iconography-md);\n}\n\n.panel-nav__child--inactive {\n  color: var(--_nav-fg-tertiary);\n}\n\n.panel-nav__child--inactive::after {\n  display: none;\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: 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.panel-nav--animating .panel-nav__children-accordion {\n  transition-duration: var(--_nav-expand-dur);\n  transition-delay: var(--effect-animation-duration-instant);\n}\n\n.panel-nav--animating .panel-nav__branch-divider {\n  transition-duration: var(--_nav-expand-dur), var(--_nav-expand-dur);\n  transition-delay:\n    var(--effect-animation-duration-instant), var(--effect-animation-duration-instant);\n}\n\n.panel-nav--collapsed:not(.panel-nav--animating) .panel-nav__children {\n  display: none;\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(\n    var(--_nav-padding-y) * 2 + var(--_nav-item-height) * 2 + var(--dimension-space-050, 4px)\n  );\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.panel-nav--collapsed .panel-nav__footer-user {\n  /* Resolve one shared square control while keeping both inline edges animatable. */\n  left: var(--_nav-padding-x);\n  right: calc(100% - var(--_nav-padding-x) - var(--_nav-item-height));\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(\n    var(--dimension-space-075, 6px) + var(--dimension-iconography-md, 20px) +\n      var(--dimension-space-050, 4px)\n  );\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/radius.css';\n@import '../../utils/control-density.css';\n@import '../../utils/chrome-layout.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/scrollbar-hidden.css';\n@import '../../utils/nav-disclosure.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(\n    var(--dimension-space-075, 6px) * 2 + var(--dimension-iconography-md, 20px)\n  );\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)\n    var(--effect-animation-easing-ease-in-out, ease);\n  --_nav-label-fade-out-dur: calc(\n    var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms)\n  );\n  --_nav-label-fade-out-motion: var(--_nav-label-fade-out-dur)\n    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:host-context(ds-shell-app.shell-app--paper-texture) .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-ui, 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  height: var(--dimension-size-600, 48px);\n  flex-shrink: 0;\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@media (hover: hover) and (pointer: fine) {\n  .panel-nav:not(.panel-nav--breakpoint-locked)\n    .panel-nav__header-btn:hover\n    .panel-nav__header-logo {\n    opacity: 0;\n  }\n\n  .panel-nav:not(.panel-nav--breakpoint-locked)\n    .panel-nav__header-btn:hover\n    .panel-nav__header-toggle {\n    opacity: 1;\n  }\n}\n/* ── Scrollable body ─────────────────────────────────────────────────────── */\n\n.panel-nav__body {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n/* The collapsed rail's outer width includes its 1px divider. Return that pixel\n   to the content box so body items match the other 32px rail controls. */\n.panel-nav--collapsed .panel-nav__body {\n  padding-inline-end: calc(var(--_nav-padding-x) - var(--dimension-stroke-width-012));\n}\n\n.panel-nav__sections {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-200, 16px);\n  width: 100%;\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.panel-nav__branch {\n  display: flex;\n  flex-direction: column;\n}\n\n.panel-nav__branch-divider-line {\n  display: block;\n  height: var(--dimension-stroke-width-012);\n  margin-inline: var(--dimension-space-075);\n  background: var(--_nav-divider);\n}\n\n.panel-nav__branch-divider--before .panel-nav__branch-divider-line {\n  margin-block: var(--dimension-space-050) var(--dimension-space-100);\n}\n\n.panel-nav__branch-divider--after .panel-nav__branch-divider-line {\n  margin-block: var(--dimension-space-100) var(--dimension-space-050);\n}\n\n.panel-nav__children-accordion,\n.panel-nav__branch-divider {\n  --ds-nav-disclosure-duration: var(\n    --_panel-nav-nested-section-duration,\n    calc(var(--effect-animation-duration-short-3) * 2 + var(--effect-animation-duration-short-2))\n  );\n  --ds-nav-disclosure-wait: var(\n    --_panel-nav-nested-transition-wait,\n    calc(var(--effect-animation-duration-short-3) + var(--effect-animation-duration-short-1))\n  );\n  --ds-nav-disclosure-fade: var(\n    --_panel-nav-nested-child-fade-duration,\n    var(--ds-nav-disclosure-duration)\n  );\n  --ds-nav-disclosure-stagger: var(\n    --_panel-nav-nested-child-stagger,\n    var(--effect-animation-duration-short-1)\n  );\n}\n\n.panel-nav__children {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050, 4px);\n  min-height: 0;\n  overflow: hidden;\n}\n\n/* Margin lives on the first child so closed 0fr accordions still collapse to 0. */\n.panel-nav__children > .panel-nav__child:first-child {\n  margin-block-start: 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.panel-nav__parent--muted {\n  color: var(--_nav-fg-secondary);\n}\n\n.panel-nav__child {\n  flex: 0 0 var(--_nav-item-height);\n  padding-inline-start: calc(\n    var(--dimension-space-075, 6px) + var(--dimension-iconography-md) + var(--dimension-space-050)\n  );\n}\n\n.panel-nav__children-accordion:not(.panel-nav__children-accordion--open) .panel-nav__child {\n  color: var(--_nav-fg-secondary);\n}\n\n.panel-nav__child-dot {\n  position: relative;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 var(--dimension-iconography-md);\n  width: var(--dimension-iconography-md);\n  height: var(--dimension-iconography-md);\n}\n\n.panel-nav__child--inactive {\n  color: var(--_nav-fg-tertiary);\n}\n\n.panel-nav__child--inactive::after {\n  display: none;\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: 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.panel-nav--animating .panel-nav__children-accordion {\n  transition-duration: var(--_nav-expand-dur);\n  transition-delay: var(--effect-animation-duration-instant);\n}\n\n.panel-nav--animating .panel-nav__branch-divider {\n  transition-duration: var(--_nav-expand-dur), var(--_nav-expand-dur);\n  transition-delay:\n    var(--effect-animation-duration-instant), var(--effect-animation-duration-instant);\n}\n\n.panel-nav--collapsed:not(.panel-nav--animating) .panel-nav__children {\n  display: none;\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(\n    var(--_nav-padding-y) * 2 + var(--_nav-item-height) * 2 + var(--dimension-space-050, 4px)\n  );\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.panel-nav--collapsed .panel-nav__footer-user {\n  /* Resolve one shared square control while keeping both inline edges animatable. */\n  left: var(--_nav-padding-x);\n  right: calc(100% - var(--_nav-padding-x) - var(--_nav-item-height));\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(\n    var(--dimension-space-075, 6px) + var(--dimension-iconography-md, 20px) +\n      var(--dimension-space-050, 4px)\n  );\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

@@ -237,7 +237,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: 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",
+      "content": "@import '../../utils/radius.css';\n@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/panel-tool-header.json

@@ -357,7 +357,7 @@
   "files": [
     {
       "path": "src/wc/components/PanelToolHeader/PanelToolHeader.css",
-      "content": "@import '../../utils/control-density.css';\n@import '../../utils/chrome-header.css';\n\n:host {\n  display: block;\n  flex: 0 0 auto;\n  box-sizing: border-box;\n}\n\n.panel-tool-header {\n  height: var(--dimension-size-600);\n  color: var(--color-foreground-primary);\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.panel-tool-header__leading:empty,\n.panel-tool-header__trailing:empty {\n  display: none;\n}\n\n.panel-tool-header__trailing {\n  gap: var(--dimension-space-050);\n  justify-content: flex-end;\n}\n\nds-text.panel-tool-header__heading {\n  display: inline-flex;\n  flex: 1 1 0;\n  align-items: center;\n  width: auto;\n  min-width: 0;\n  height: var(--ds-control-height);\n  padding-inline: calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));\n  box-sizing: border-box;\n  text-align: left;\n  -webkit-user-select: none;\n  user-select: none;\n}\n",
+      "content": "@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n@import '../../utils/chrome-header.css';\n\n:host {\n  display: block;\n  flex: 0 0 auto;\n  box-sizing: border-box;\n}\n\n.panel-tool-header {\n  height: var(--dimension-size-600);\n  color: var(--color-foreground-primary);\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.panel-tool-header__leading:empty,\n.panel-tool-header__trailing:empty {\n  display: none;\n}\n\n.panel-tool-header__trailing {\n  gap: var(--dimension-space-050);\n  justify-content: flex-end;\n}\n\nds-text.panel-tool-header__heading {\n  display: inline-flex;\n  flex: 1 1 0;\n  align-items: center;\n  width: auto;\n  min-width: 0;\n  height: var(--ds-control-height);\n  padding-inline: calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));\n  box-sizing: border-box;\n  text-align: left;\n  -webkit-user-select: none;\n  user-select: none;\n}\n",
       "type": "registry:ui"
     },
     {

package/dist/mcp-data/registry/panel-tool-search.json

@@ -401,7 +401,7 @@
   "files": [
     {
       "path": "src/wc/components/PanelToolSearch/PanelToolSearch.css",
-      "content": "@import '../../utils/control-density.css';\n@import '../../utils/chrome-layout.css';\n@import '../../utils/search-control.css';\n\n:host {\n  display: block;\n  flex: 0 0 var(--dimension-size-600);\n  width: 100%;\n  min-width: 0;\n  height: var(--dimension-size-600);\n  box-sizing: border-box;\n  background: transparent;\n}\n\n.panel-tool-search {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  background: transparent;\n}\n\n.panel-tool-search::after {\n  content: '';\n  position: absolute;\n  inset: auto 0 0;\n  height: var(--dimension-stroke-width-012);\n  background-color: var(--color-border-tertiary);\n  pointer-events: none;\n}\n\n.select-search {\n  flex: 1 1 auto;\n  width: auto;\n  min-width: 0;\n  height: var(--dimension-size-400);\n  padding: 0;\n}\n\n.panel-tool-search__filter-group {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  gap: var(--dimension-space-100);\n}\n\n.panel-tool-search__divider,\n.panel-tool-search__filter {\n  flex: 0 0 auto;\n}\n",
+      "content": "@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n@import '../../utils/chrome-layout.css';\n@import '../../utils/search-control.css';\n\n:host {\n  display: block;\n  flex: 0 0 var(--dimension-size-600);\n  width: 100%;\n  min-width: 0;\n  height: var(--dimension-size-600);\n  box-sizing: border-box;\n  background: transparent;\n}\n\n.panel-tool-search {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  background: transparent;\n}\n\n.panel-tool-search::after {\n  content: '';\n  position: absolute;\n  inset: auto 0 0;\n  height: var(--dimension-stroke-width-012);\n  background-color: var(--color-border-tertiary);\n  pointer-events: none;\n}\n\n.select-search {\n  flex: 1 1 auto;\n  width: auto;\n  min-width: 0;\n  height: var(--dimension-size-400);\n  padding: 0;\n}\n\n.panel-tool-search__filter-group {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  gap: var(--dimension-space-100);\n}\n\n.panel-tool-search__divider,\n.panel-tool-search__filter {\n  flex: 0 0 auto;\n}\n",
       "type": "registry:ui"
     },
     {