@ds-mo/ui 15.11.1 → 15.12.0

package/dist/mcp-data/registry/setting-row-toggle.json

@@ -34,7 +34,8 @@
         "The application accepts or rejects change requests by updating the controlled checked value and owns persistence and errors.",
         "Name the enabled setting consistently; the label must not change when the switch is toggled.",
         "Non-emphasis rows without supporting copy use ds-text color secondary (foreground-secondary) on the title. Non-emphasis rows with description keep a primary title.",
-        "Supporting copy is text-body-small in every variant."
+        "Supporting copy is text-body-small in every variant.",
+        "isLoading preserves the copy wrapping and switch footprint, replaces them with skeletons, and prevents value changes."
       ],
       "responsiveBehavior": [
         "The copy wraps while the switch keeps its natural size in the trailing column, including at narrow widths."
@@ -88,6 +89,15 @@
           "mutable": false,
           "description": "Prevent changes while the setting is unavailable."
         },
+        "isLoading": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "is-loading",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Preserve the real row geometry while replacing copy and switch with skeletons."
+        },
         "label": {
           "type": "string",
           "resolvedType": "string",
@@ -146,6 +156,15 @@
         "mutable": false,
         "description": "Prevent changes while the setting is unavailable."
       },
+      "isLoading": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "is-loading",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Preserve the real row geometry while replacing copy and switch with skeletons."
+      },
       "label": {
         "type": "string",
         "resolvedType": "string",
@@ -203,8 +222,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.0",
-          "@ds-mo/icons ^8.1.1"
+          "@ds-mo/tokens ^8.0.1",
+          "@ds-mo/icons ^8.1.2"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }
@@ -215,18 +234,19 @@
     "@ds-mo/tokens"
   ],
   "registryDependencies": [
+    "skeleton",
     "switch",
     "text"
   ],
   "files": [
     {
       "path": "src/wc/components/SettingRowToggle/SettingRowToggle.css",
-      "content": "@import '../../utils/settings-row.css';\n\n:host {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: start;\n  gap: var(--dimension-space-200);\n}\n\n.setting-row-toggle__copy {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  gap: var(--dimension-space-050);\n  overflow-wrap: anywhere;\n  -webkit-user-select: none;\n  user-select: none;\n}\n",
+      "content": "@import '../../utils/settings-row.css';\n\n:host {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: start;\n  gap: var(--dimension-space-200);\n}\n\n.setting-row-toggle__copy {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  gap: var(--dimension-space-050);\n  overflow-wrap: anywhere;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.setting-row-toggle__line,\n.setting-row-toggle__control {\n  display: grid;\n  min-width: 0;\n  align-items: center;\n}\n\n.setting-row-toggle__line > *,\n.setting-row-toggle__control > * {\n  grid-area: 1 / 1;\n}\n\n:host(.setting-row-toggle--loading) ds-text,\n:host(.setting-row-toggle--loading) ds-switch {\n  visibility: hidden;\n}\n\n.setting-row-toggle__control > ds-skeleton {\n  height: 100%;\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/SettingRowToggle/SettingRowToggle.tsx",
-      "content": "import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { CONTROL_SUPPORTING_TEXT_VARIANT } from '../../utils';\n\nlet settingRowToggleSequence = 0;\n\nexport type SettingRowToggleVariant = 'emphasis' | 'non-emphasis';\n\n/** A labeled binary setting that applies immediately through its application owner. */\n@Component({\n  tag: 'ds-setting-row-toggle',\n  styleUrl: 'SettingRowToggle.css',\n  scoped: true,\n})\nexport class SettingRowToggle {\n  /** Name of the enabled setting. */\n  @Prop() label!: string;\n  /** Supporting copy explaining the setting and its alternative. */\n  @Prop() description?: string;\n  /** Controlled enabled state. */\n  @Prop() checked = false;\n  /** Prevent changes while the setting is unavailable. */\n  @Prop() disabled = false;\n  /** Typography recipe for the setting copy. */\n  @Prop() variant: SettingRowToggleVariant = 'emphasis';\n\n  /** Requests the next value; the application owns acceptance and persistence. */\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private readonly rowId = `ds-setting-row-toggle-${++settingRowToggleSequence}`;\n\n  private handleChange = (event: CustomEvent<boolean>) => {\n    event.stopPropagation();\n    // Keep the composed switch controlled until the owner accepts this request.\n    (event.target as HTMLDsSwitchElement).checked = this.checked;\n    this.dsChange.emit(event.detail);\n  };\n\n  render() {\n    const hasDescription = Boolean(this.description?.trim());\n    const titleColor = this.variant === 'non-emphasis' && !hasDescription ? 'secondary' : 'primary';\n\n    return (\n      <Host>\n        <div class=\"setting-row-toggle__copy\">\n          <ds-text\n            textId={`${this.rowId}-label`}\n            variant=\"text-body-medium\"\n            color={titleColor}\n            emphasis={this.variant === 'emphasis'}\n          >\n            {this.label}\n          </ds-text>\n          {hasDescription && (\n            <ds-text\n              textId={`${this.rowId}-description`}\n              variant={CONTROL_SUPPORTING_TEXT_VARIANT.md}\n              color=\"secondary\"\n            >\n              {this.description}\n            </ds-text>\n          )}\n        </div>\n        <ds-switch\n          checked={this.checked}\n          disabled={this.disabled}\n          aria-labelledby={`${this.rowId}-label`}\n          aria-describedby={hasDescription ? `${this.rowId}-description` : undefined}\n          onDsChange={this.handleChange}\n        />\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { CONTROL_SUPPORTING_TEXT_VARIANT } from '../../utils';\n\nlet settingRowToggleSequence = 0;\n\nexport type SettingRowToggleVariant = 'emphasis' | 'non-emphasis';\n\n/** A labeled binary setting that applies immediately through its application owner. */\n@Component({\n  tag: 'ds-setting-row-toggle',\n  styleUrl: 'SettingRowToggle.css',\n  scoped: true,\n})\nexport class SettingRowToggle {\n  /** Name of the enabled setting. */\n  @Prop() label!: string;\n  /** Supporting copy explaining the setting and its alternative. */\n  @Prop() description?: string;\n  /** Controlled enabled state. */\n  @Prop() checked = false;\n  /** Prevent changes while the setting is unavailable. */\n  @Prop() disabled = false;\n  /** Preserve the real row geometry while replacing copy and switch with skeletons. */\n  @Prop() isLoading = false;\n  /** Typography recipe for the setting copy. */\n  @Prop() variant: SettingRowToggleVariant = 'emphasis';\n\n  /** Requests the next value; the application owns acceptance and persistence. */\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private readonly rowId = `ds-setting-row-toggle-${++settingRowToggleSequence}`;\n\n  private handleChange = (event: CustomEvent<boolean>) => {\n    event.stopPropagation();\n    // Keep the composed switch controlled until the owner accepts this request.\n    (event.target as HTMLDsSwitchElement).checked = this.checked;\n    if (!this.isLoading) this.dsChange.emit(event.detail);\n  };\n\n  render() {\n    const hasDescription = Boolean(this.description?.trim());\n    const titleColor = this.variant === 'non-emphasis' && !hasDescription ? 'secondary' : 'primary';\n\n    return (\n      <Host\n        aria-busy={this.isLoading ? 'true' : undefined}\n        class={{ 'setting-row-toggle--loading': this.isLoading }}\n      >\n        <div class=\"setting-row-toggle__copy\">\n          <div class=\"setting-row-toggle__line\">\n            <ds-text\n              textId={`${this.rowId}-label`}\n              variant=\"text-body-medium\"\n              color={titleColor}\n              emphasis={this.variant === 'emphasis'}\n            >\n              {this.label}\n            </ds-text>\n            {this.isLoading && <ds-skeleton width=\"75%\" />}\n          </div>\n          {hasDescription && (\n            <div class=\"setting-row-toggle__line\">\n              <ds-text\n                textId={`${this.rowId}-description`}\n                variant={CONTROL_SUPPORTING_TEXT_VARIANT.md}\n                color=\"secondary\"\n              >\n                {this.description}\n              </ds-text>\n              {this.isLoading && (\n                <ds-skeleton width=\"95%\" textVariant={CONTROL_SUPPORTING_TEXT_VARIANT.md} />\n              )}\n            </div>\n          )}\n        </div>\n        <div class=\"setting-row-toggle__control\" inert={this.isLoading}>\n          <ds-switch\n            checked={this.checked}\n            disabled={this.disabled}\n            aria-labelledby={`${this.rowId}-label`}\n            aria-describedby={hasDescription ? `${this.rowId}-description` : undefined}\n            onDsChange={this.handleChange}\n          />\n          {this.isLoading && <ds-skeleton variant=\"control\" width=\"100%\" rounded={true} />}\n        </div>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

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

@@ -105,7 +105,8 @@
         "Managed page-header capacity follows only the fixed shell breakpoint: roomy on desktop and compact on tablet. Opening PanelTools does not compact or constrain BarTitle.",
         "Mobile keeps at most the first eligible ordered icon command visible and moves labeled buttons, menu choices, split actions, and explicit overflow commands into one shell-owned text-only page-actions menu.",
         "The bottom bar remains visible at all route and tool depths in the foundation release.",
-        "A mobile shell banner paints a fixed top edge with its resolved background through exit motion. Color variants and theme changes follow the banner automatically; native Safari status-area tint remains a device-verified browser behavior."
+        "A mobile shell banner paints a fixed top edge with its resolved background through exit motion. Color variants and theme changes follow the banner automatically; native Safari status-area tint remains a device-verified browser behavior.",
+        "The routed content lane owns a size-query container. Full-height page compositions consume --ds-shell-content-block-size and subtract their page-local header; banners and desktop or mobile navigation resize that lane automatically."
       ],
       "frameworkCaveats": {
         "customElements": [
@@ -691,8 +692,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: navigation, pageChrome, paperTexture, tools.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.0",
-          "@ds-mo/icons ^8.1.1"
+          "@ds-mo/tokens ^8.0.1",
+          "@ds-mo/icons ^8.1.2"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }
@@ -721,7 +722,7 @@
   "files": [
     {
       "path": "src/wc/components/ShellApp/ShellApp.css",
-      "content": ":host {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n  overflow: hidden;\n  overscroll-behavior: none;\n  font-family: var(--typography-font-family-ui, system-ui);\n  --ds-shell-panel-tools-width: var(--dimension-panel-width-xs);\n  --ds-shell-gradient-context: flat;\n}\n\n:host {\n  /* Shared solid Chrome base; gradient and paper layers composite above it. */\n  --_shell-chrome-bg: var(--color-chrome-background-theme);\n}\n\n:host(.shell-app--gradient) {\n  --ds-shell-gradient-context: gradient;\n}\n\n.shell-app__row {\n  display: flex;\n  flex: 1 1 0;\n  min-height: 0;\n  position: relative;\n}\n\n.shell-app__banner {\n  --_shell-banner-edge-display: none;\n  flex: 0 0 auto;\n  min-width: 0;\n  position: relative;\n  z-index: 5;\n}\n\n.shell-app__banner ::slotted(ds-banner) {\n  display: grid;\n  width: 100%;\n}\n\n/*\n * One chrome layer behind the shell row. Wash uses background-attachment: fixed\n * so the pattern is locked to the viewport — panel/tools collapse only changes the\n * transparent window, not the pattern phase. JS sets wash background-size from\n * readShellViewportDimensions(), not the shell element box.\n */\n.shell-app__chrome {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 0;\n  overflow: hidden;\n  background-color: var(--_shell-chrome-bg);\n}\n\n:host(.shell-app--gradient) .shell-app__chrome::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  background-position: 0 0;\n  background-attachment: fixed;\n  z-index: 1;\n  opacity: var(--ds-shell-gradient-opacity, 1);\n  background-image: var(--ds-shell-gradient-image, none);\n  background-size: var(--ds-shell-gradient-size, auto);\n  background-repeat: no-repeat;\n}\n\n.shell-app__paper-texture {\n  z-index: 2;\n}\n\n.shell-app__panel {\n  flex: 0 0 auto;\n  min-height: 0;\n  height: 100%;\n  position: relative;\n  /* Above main so resize handle line can paint over the workspace edge */\n  z-index: 2;\n}\n\n.shell-app__panel ::slotted(ds-panel-nav) {\n  display: block;\n  height: 100%;\n}\n\n.shell-app__panel > ds-panel-nav {\n  display: block;\n  height: 100%;\n}\n\n.shell-app__main {\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  grid-template-rows: auto minmax(0, 1fr);\n  grid-template-areas:\n    'bar tools'\n    'content tools';\n  position: relative;\n  z-index: 1;\n}\n\n.shell-app__mobile-sheet-nav,\n.shell-app__mobile-bar-nav {\n  display: none;\n}\n\n.shell-app__bar {\n  grid-area: bar;\n  flex: 0 0 auto;\n  min-width: 0;\n}\n\n.shell-app__bar ::slotted(ds-bar-nav) {\n  display: block;\n}\n\n.shell-app__bar ::slotted(ds-bar-title),\n.shell-app__bar ::slotted(ds-bar-page-title) {\n  display: block;\n}\n\n.shell-app__bar > ds-bar-nav {\n  display: block;\n}\n\n.shell-app__bar > ds-bar-title,\n.shell-app__bar > ds-bar-page-title {\n  display: block;\n}\n\n.shell-app__content {\n  grid-area: content;\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n  overflow: auto;\n  overscroll-behavior: none;\n  /* Limit reflow to the page column — not on __main (breaks tools flex shrink). */\n  contain: layout;\n}\n\n/* Layout scroller, not a control: keep it keyboard-focusable without a page-sized ring. */\n.shell-app__content:focus,\n.shell-app__content:focus-visible {\n  outline: none;\n}\n\n/* Opaque page surface — masks the fixed chrome layer in the content column. */\n.shell-app__content {\n  position: relative;\n  z-index: 1;\n  background-color: var(--color-background-primary);\n}\n\n.shell-app__tools {\n  grid-area: tools;\n  flex: 0 0 auto;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n  display: flex;\n  position: relative;\n  z-index: 0;\n  overflow: hidden;\n  /* Chrome surface context inherited by PanelTools and its slotted products. */\n  --_shell-tools-border: var(--color-chrome-border-tertiary);\n  --_shell-tools-border-secondary: var(--color-chrome-border-secondary);\n  --_shell-tools-divider: var(--color-chrome-divider);\n  --_shell-tools-background-theme: var(--color-chrome-background-theme);\n  --_shell-tools-fg-primary: var(--color-chrome-foreground-primary);\n  --_shell-tools-fg-secondary: var(--color-chrome-foreground-secondary);\n}\n\n.shell-app__tools ::slotted(ds-panel-tools) {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n\n.shell-app__tools ::slotted(ds-shell-tools) {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n\n.shell-app__tools > ds-shell-tools {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n\n.shell-app__tool-slot-proxy {\n  display: block;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n}\n\n.shell-app__content > ds-shell-page {\n  display: block;\n  min-height: 100%;\n}\n\n:host(.shell-app--tools-fullscreen) .shell-app__row {\n  /* Anchor fixed fullscreen tools to the available stage below the banner. */\n  contain: layout;\n}\n\n:host(.shell-app--tools-fullscreen) .shell-app__main {\n  /* Above panel chrome while remaining below the global banner layer. */\n  z-index: 3;\n}\n\n:host(.shell-app--tools-fullscreen) .shell-app__tools {\n  /* Fullscreen tools must outrank retained page-owned overlays in content. */\n  z-index: 2;\n}\n\n:host(.shell-app--tools-fullscreen) .shell-app__panel,\n:host(.shell-app--tools-fullscreen) .shell-app__bar,\n:host(.shell-app--tools-fullscreen) .shell-app__content {\n  visibility: hidden;\n  /* Descendants can override visibility, but must not paint through tools. */\n  content-visibility: hidden;\n}\n\n:host(.shell-app--mobile) {\n  --_shell-chrome-bg: var(--color-background-primary);\n  padding-block-start: env(safe-area-inset-top);\n  background: var(--ds-shell-safe-area-background, var(--color-background-primary));\n}\n\n:host(.shell-app--mobile) .shell-app__banner {\n  --_shell-banner-edge-display: block;\n}\n\n/* Refresh the Mobile WebKit stage layer without remounting app content. */\n:host(.shell-app--mobile.shell-app--foreground-refresh) .shell-app__main {\n  transform: translateZ(0);\n}\n\n:host(.shell-app--mobile) .shell-app__chrome,\n:host(.shell-app--mobile) .shell-app__panel,\n:host(.shell-app--mobile) .shell-app__bar {\n  display: none;\n}\n\n:host(.shell-app--mobile) .shell-app__main {\n  width: 100%;\n  box-sizing: border-box;\n  grid-template-columns: minmax(0, 1fr);\n  grid-template-rows: minmax(0, 1fr) auto;\n  grid-template-areas:\n    'stage'\n    'mobile-bar-nav';\n  background: var(--color-background-primary);\n}\n\n:host(.shell-app--mobile) .shell-app__content,\n:host(.shell-app--mobile) .shell-app__tools,\n:host(.shell-app--mobile) .shell-app__mobile-sheet-nav {\n  grid-area: stage;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n  position: relative;\n}\n\n:host(.shell-app--mobile) .shell-app__content {\n  z-index: 1;\n  overflow: auto;\n}\n\n:host(.shell-app--mobile) .shell-app__tools {\n  z-index: 2;\n  width: 100%;\n  overflow: hidden;\n  background: var(--color-background-primary);\n}\n\n:host(.shell-app--mobile) .shell-app__mobile-sheet-nav {\n  display: block;\n  z-index: 3;\n  overflow: hidden;\n  background: var(--color-background-primary);\n}\n\n:host(.shell-app--mobile) .shell-app__mobile-bar-nav {\n  grid-area: mobile-bar-nav;\n  display: block;\n  min-width: 0;\n  position: relative;\n  z-index: 4;\n}\n\n:host(.shell-app--mobile) .shell-app__tools[hidden],\n:host(.shell-app--mobile) .shell-app__mobile-sheet-nav[hidden],\n:host(.shell-app--mobile) .shell-app__mobile-bar-nav[hidden] {\n  display: none;\n}\n\n:host(.shell-app--mobile-tool-active) .shell-app__content,\n:host(.shell-app--mobile-sheet-nav-open) .shell-app__content,\n:host(.shell-app--mobile-sheet-nav-open) .shell-app__tools {\n  visibility: hidden;\n}\n",
+      "content": ":host {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n  overflow: hidden;\n  overscroll-behavior: none;\n  font-family: var(--typography-font-family-ui, system-ui);\n  --ds-shell-panel-tools-width: var(--dimension-panel-width-xs);\n  --ds-shell-gradient-context: flat;\n}\n\n:host {\n  /* Shared solid Chrome base; gradient and paper layers composite above it. */\n  --_shell-chrome-bg: var(--color-chrome-background-theme);\n}\n\n:host(.shell-app--gradient) {\n  --ds-shell-gradient-context: gradient;\n}\n\n.shell-app__row {\n  display: flex;\n  flex: 1 1 0;\n  min-height: 0;\n  position: relative;\n}\n\n.shell-app__banner {\n  --_shell-banner-edge-display: none;\n  flex: 0 0 auto;\n  min-width: 0;\n  position: relative;\n  z-index: 5;\n}\n\n.shell-app__banner ::slotted(ds-banner) {\n  display: grid;\n  width: 100%;\n}\n\n/*\n * One chrome layer behind the shell row. Wash uses background-attachment: fixed\n * so the pattern is locked to the viewport — panel/tools collapse only changes the\n * transparent window, not the pattern phase. JS sets wash background-size from\n * readShellViewportDimensions(), not the shell element box.\n */\n.shell-app__chrome {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 0;\n  overflow: hidden;\n  background-color: var(--_shell-chrome-bg);\n}\n\n:host(.shell-app--gradient) .shell-app__chrome::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  background-position: 0 0;\n  background-attachment: fixed;\n  z-index: 1;\n  opacity: var(--ds-shell-gradient-opacity, 1);\n  background-image: var(--ds-shell-gradient-image, none);\n  background-size: var(--ds-shell-gradient-size, auto);\n  background-repeat: no-repeat;\n}\n\n.shell-app__paper-texture {\n  z-index: 2;\n}\n\n.shell-app__panel {\n  flex: 0 0 auto;\n  min-height: 0;\n  height: 100%;\n  position: relative;\n  /* Above main so resize handle line can paint over the workspace edge */\n  z-index: 2;\n}\n\n.shell-app__panel ::slotted(ds-panel-nav) {\n  display: block;\n  height: 100%;\n}\n\n.shell-app__panel > ds-panel-nav {\n  display: block;\n  height: 100%;\n}\n\n.shell-app__main {\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  grid-template-rows: auto minmax(0, 1fr);\n  grid-template-areas:\n    'bar tools'\n    'content tools';\n  position: relative;\n  z-index: 1;\n}\n\n.shell-app__mobile-sheet-nav,\n.shell-app__mobile-bar-nav {\n  display: none;\n}\n\n.shell-app__bar {\n  grid-area: bar;\n  flex: 0 0 auto;\n  min-width: 0;\n}\n\n.shell-app__bar ::slotted(ds-bar-nav) {\n  display: block;\n}\n\n.shell-app__bar ::slotted(ds-bar-title),\n.shell-app__bar ::slotted(ds-bar-page-title) {\n  display: block;\n}\n\n.shell-app__bar > ds-bar-nav {\n  display: block;\n}\n\n.shell-app__bar > ds-bar-title,\n.shell-app__bar > ds-bar-page-title {\n  display: block;\n}\n\n.shell-app__content {\n  grid-area: content;\n  /* Full-height pages use this lane, including banner and mobile navigation reflow. */\n  container-type: size;\n  container-name: ds-shell-content;\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n  overflow: auto;\n  overscroll-behavior: none;\n  /* Limit reflow to the page column — not on __main (breaks tools flex shrink). */\n  contain: layout;\n}\n\n/* Layout scroller, not a control: keep it keyboard-focusable without a page-sized ring. */\n.shell-app__content:focus,\n.shell-app__content:focus-visible {\n  outline: none;\n}\n\n/* Opaque page surface — masks the fixed chrome layer in the content column. */\n.shell-app__content {\n  position: relative;\n  z-index: 1;\n  background-color: var(--color-background-primary);\n}\n\n.shell-app__tools {\n  grid-area: tools;\n  flex: 0 0 auto;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n  display: flex;\n  position: relative;\n  z-index: 0;\n  overflow: hidden;\n  /* Chrome surface context inherited by PanelTools and its slotted products. */\n  --_shell-tools-border: var(--color-chrome-border-tertiary);\n  --_shell-tools-border-secondary: var(--color-chrome-border-secondary);\n  --_shell-tools-divider: var(--color-chrome-divider);\n  --_shell-tools-background-theme: var(--color-chrome-background-theme);\n  --_shell-tools-fg-primary: var(--color-chrome-foreground-primary);\n  --_shell-tools-fg-secondary: var(--color-chrome-foreground-secondary);\n}\n\n.shell-app__tools ::slotted(ds-panel-tools) {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n\n.shell-app__tools ::slotted(ds-shell-tools) {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n\n.shell-app__tools > ds-shell-tools {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n\n.shell-app__tool-slot-proxy {\n  display: block;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n}\n\n.shell-app__content > ds-shell-page {\n  --ds-shell-content-block-size: 100cqh;\n  display: block;\n  min-height: 100%;\n}\n\n:host(.shell-app--tools-fullscreen) .shell-app__row {\n  /* Anchor fixed fullscreen tools to the available stage below the banner. */\n  contain: layout;\n}\n\n:host(.shell-app--tools-fullscreen) .shell-app__main {\n  /* Above panel chrome while remaining below the global banner layer. */\n  z-index: 3;\n}\n\n:host(.shell-app--tools-fullscreen) .shell-app__tools {\n  /* Fullscreen tools must outrank retained page-owned overlays in content. */\n  z-index: 2;\n}\n\n:host(.shell-app--tools-fullscreen) .shell-app__panel,\n:host(.shell-app--tools-fullscreen) .shell-app__bar,\n:host(.shell-app--tools-fullscreen) .shell-app__content {\n  visibility: hidden;\n  /* Descendants can override visibility, but must not paint through tools. */\n  content-visibility: hidden;\n}\n\n:host(.shell-app--mobile) {\n  --_shell-chrome-bg: var(--color-background-primary);\n  padding-block-start: env(safe-area-inset-top);\n  background: var(--ds-shell-safe-area-background, var(--color-background-primary));\n}\n\n:host(.shell-app--mobile) .shell-app__banner {\n  --_shell-banner-edge-display: block;\n}\n\n/* Refresh the Mobile WebKit stage layer without remounting app content. */\n:host(.shell-app--mobile.shell-app--foreground-refresh) .shell-app__main {\n  transform: translateZ(0);\n}\n\n:host(.shell-app--mobile) .shell-app__chrome,\n:host(.shell-app--mobile) .shell-app__panel,\n:host(.shell-app--mobile) .shell-app__bar {\n  display: none;\n}\n\n:host(.shell-app--mobile) .shell-app__main {\n  width: 100%;\n  box-sizing: border-box;\n  grid-template-columns: minmax(0, 1fr);\n  grid-template-rows: minmax(0, 1fr) auto;\n  grid-template-areas:\n    'stage'\n    'mobile-bar-nav';\n  background: var(--color-background-primary);\n}\n\n:host(.shell-app--mobile) .shell-app__content,\n:host(.shell-app--mobile) .shell-app__tools,\n:host(.shell-app--mobile) .shell-app__mobile-sheet-nav {\n  grid-area: stage;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n  position: relative;\n}\n\n:host(.shell-app--mobile) .shell-app__content {\n  z-index: 1;\n  overflow: auto;\n}\n\n:host(.shell-app--mobile) .shell-app__tools {\n  z-index: 2;\n  width: 100%;\n  overflow: hidden;\n  background: var(--color-background-primary);\n}\n\n:host(.shell-app--mobile) .shell-app__mobile-sheet-nav {\n  display: block;\n  z-index: 3;\n  overflow: hidden;\n  background: var(--color-background-primary);\n}\n\n:host(.shell-app--mobile) .shell-app__mobile-bar-nav {\n  grid-area: mobile-bar-nav;\n  display: block;\n  min-width: 0;\n  position: relative;\n  z-index: 4;\n}\n\n:host(.shell-app--mobile) .shell-app__tools[hidden],\n:host(.shell-app--mobile) .shell-app__mobile-sheet-nav[hidden],\n:host(.shell-app--mobile) .shell-app__mobile-bar-nav[hidden] {\n  display: none;\n}\n\n:host(.shell-app--mobile-tool-active) .shell-app__content,\n:host(.shell-app--mobile-sheet-nav-open) .shell-app__content,\n:host(.shell-app--mobile-sheet-nav-open) .shell-app__tools {\n  visibility: hidden;\n}\n",
       "type": "registry:ui"
     },
     {

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

@@ -332,8 +332,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.0",
-          "@ds-mo/icons ^8.1.1"
+          "@ds-mo/tokens ^8.0.1",
+          "@ds-mo/icons ^8.1.2"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -457,8 +457,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: accessories, headers, items.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.0",
-          "@ds-mo/icons ^8.1.1"
+          "@ds-mo/tokens ^8.0.1",
+          "@ds-mo/icons ^8.1.2"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -59,7 +59,9 @@
         "Shimmer is on by default and may be disabled for a static placeholder. Reduced motion always produces the static final shape.",
         "Rounded is an optional visual treatment for icon and control atoms rather than a semantic state.",
         "Omitted background is for primary and secondary surfaces. Explicit faint documents a faint parent while using the same standard base and shimmer tokens; other contexts use matching surface tokens.",
-        "The owner decides whether to delay initial visibility and when to replace the complete composition."
+        "The owner decides whether to delay initial visibility and when to replace the complete composition.",
+        "preserveLayout uses projected text or a control as the hidden, inert size source, retaining wrapping and responsive dimensions; set isLoading false to reveal that same mounted content. Use one atom per text or control, not a whole page.",
+        "Control appearance mirrors the pending control: filled masks the entire container; outlined retains its border with icon or text atoms; borderless masks only those contents. Set controlContent to match the control anatomy and preserveLayout to retain its exact footprint."
       ],
       "responsiveBehavior": [
         "The owning layout changes placeholder count, width, visibility, and arrangement to match its real responsive content.",
@@ -103,7 +105,11 @@
               "textVariant",
               "iconSize",
               "controlSize",
-              "rounded"
+              "rounded",
+              "preserveLayout",
+              "isLoading",
+              "controlAppearance",
+              "controlContent"
             ]
           },
           {
@@ -116,7 +122,9 @@
             "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
             "props": [
               "background",
-              "variant"
+              "variant",
+              "controlAppearance",
+              "controlContent"
             ]
           }
         ],
@@ -133,6 +141,24 @@
           "mutable": false,
           "description": "Actual parent surface context. Omit on primary and secondary surfaces."
         },
+        "controlAppearance": {
+          "type": "SkeletonControlAppearance",
+          "resolvedType": "\"borderless\" | \"filled\" | \"outlined\"",
+          "attribute": "control-appearance",
+          "default": "'filled'",
+          "required": false,
+          "mutable": false,
+          "description": "Filled controls replace the entire shape; other appearances retain the frame and mask its contents."
+        },
+        "controlContent": {
+          "type": "SkeletonControlContent",
+          "resolvedType": "\"icon\" | \"icon-label\" | \"icon-label-icon\" | \"label\" | \"label-icon\"",
+          "attribute": "control-content",
+          "default": "'label'",
+          "required": false,
+          "mutable": false,
+          "description": "Content anatomy for outlined and borderless control placeholders."
+        },
         "controlSize": {
           "type": "ControlSize",
           "resolvedType": "\"lg\" | \"md\" | \"sm\" | \"xs\"",
@@ -151,6 +177,24 @@
           "mutable": false,
           "description": "Iconography token whose square canvas defines the icon canvas."
         },
+        "isLoading": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "is-loading",
+          "default": "true",
+          "required": false,
+          "mutable": false,
+          "description": "With preserveLayout, reveal the same projected content when loading completes."
+        },
+        "preserveLayout": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "preserve-layout",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Derive geometry from a projected control or text instead of estimating its footprint."
+        },
         "rounded": {
           "type": "boolean",
           "resolvedType": "boolean",
@@ -197,7 +241,12 @@
       },
       "events": [],
       "methods": [],
-      "slots": []
+      "slots": [
+        {
+          "name": "",
+          "description": "Real text or a control whose footprint is retained with preserveLayout."
+        }
+      ]
     },
     "props": {
       "background": {
@@ -208,6 +257,24 @@
         "mutable": false,
         "description": "Actual parent surface context. Omit on primary and secondary surfaces."
       },
+      "controlAppearance": {
+        "type": "SkeletonControlAppearance",
+        "resolvedType": "\"borderless\" | \"filled\" | \"outlined\"",
+        "attribute": "control-appearance",
+        "default": "'filled'",
+        "required": false,
+        "mutable": false,
+        "description": "Filled controls replace the entire shape; other appearances retain the frame and mask its contents."
+      },
+      "controlContent": {
+        "type": "SkeletonControlContent",
+        "resolvedType": "\"icon\" | \"icon-label\" | \"icon-label-icon\" | \"label\" | \"label-icon\"",
+        "attribute": "control-content",
+        "default": "'label'",
+        "required": false,
+        "mutable": false,
+        "description": "Content anatomy for outlined and borderless control placeholders."
+      },
       "controlSize": {
         "type": "ControlSize",
         "resolvedType": "\"lg\" | \"md\" | \"sm\" | \"xs\"",
@@ -226,6 +293,24 @@
         "mutable": false,
         "description": "Iconography token whose square canvas defines the icon canvas."
       },
+      "isLoading": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "is-loading",
+        "default": "true",
+        "required": false,
+        "mutable": false,
+        "description": "With preserveLayout, reveal the same projected content when loading completes."
+      },
+      "preserveLayout": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "preserve-layout",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Derive geometry from a projected control or text instead of estimating its footprint."
+      },
       "rounded": {
         "type": "boolean",
         "resolvedType": "boolean",
@@ -272,7 +357,12 @@
     },
     "events": [],
     "methods": [],
-    "slots": [],
+    "slots": [
+      {
+        "name": "",
+        "description": "Real text or a control whose footprint is retained with preserveLayout."
+      }
+    ],
     "exports": {
       "customElement": "ds-skeleton",
       "react": "DsSkeleton",
@@ -300,8 +390,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.0",
-          "@ds-mo/icons ^8.1.1"
+          "@ds-mo/tokens ^8.0.1",
+          "@ds-mo/icons ^8.1.2"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }
@@ -311,16 +401,18 @@
     "@ds-mo/ui",
     "@ds-mo/tokens"
   ],
-  "registryDependencies": [],
+  "registryDependencies": [
+    "skeleton"
+  ],
   "files": [
     {
       "path": "src/wc/components/Skeleton/Skeleton.css",
-      "content": "@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n@import '../../utils/shimmer.css';\n\n:host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  min-width: 0;\n  vertical-align: middle;\n  --ds-skeleton-base: var(--color-foreground-quaternary);\n  --ds-shimmer: var(--color-shimmer-shimmer);\n}\n\n.skeleton__shape {\n  --ds-shimmer-surface-base: var(--ds-skeleton-base);\n\n  display: block;\n  width: 100%;\n  height: 100%;\n  flex: 0 0 auto;\n  background-color: var(--ds-skeleton-base);\n  border-radius: var(--dimension-radius-025);\n}\n\n/* ── Background context ────────────────────────────────────────────────── */\n\n:host(.skeleton--background-medium) {\n  --ds-skeleton-base: var(--color-foreground-on-medium-background-quaternary);\n  --ds-shimmer: var(--color-shimmer-shimmer-on-medium-background);\n}\n\n:host(.skeleton--background-bold) {\n  --ds-skeleton-base: var(--color-foreground-on-bold-background-quaternary);\n  --ds-shimmer: var(--color-shimmer-shimmer-on-bold-background);\n}\n\n:host(.skeleton--background-strong) {\n  --ds-skeleton-base: var(--color-foreground-on-strong-background-quaternary);\n  --ds-shimmer: var(--color-shimmer-shimmer-on-strong-background);\n}\n\n:host(.skeleton--background-translucent) {\n  --ds-skeleton-base: var(--color-translucent-foreground-quaternary);\n  --ds-shimmer: var(--color-translucent-shimmer);\n}\n\n:host(.skeleton--background-inverted) {\n  --ds-skeleton-base: var(--color-inverted-foreground-quaternary);\n  --ds-shimmer: var(--color-inverted-shimmer);\n}\n\n:host(.skeleton--background-media) {\n  --ds-skeleton-base: var(--color-media-foreground-quaternary);\n  --ds-shimmer: var(--color-media-shimmer);\n}\n\n:host(.skeleton--background-always-dark) {\n  --ds-skeleton-base: var(--color-always-dark-foreground-quaternary);\n  --ds-shimmer: var(--color-always-dark-shimmer);\n}\n\n:host(.skeleton--background-navigation) {\n  --ds-skeleton-base: var(--color-navigation-foreground-quaternary);\n  --ds-shimmer: var(--color-navigation-shimmer);\n}\n\n/* ── Text ──────────────────────────────────────────────────────────────── */\n\n:host(.skeleton--text) {\n  width: 100%;\n  height: var(--ds-skeleton-canvas-size);\n  padding-block: 0;\n}\n\n:host(.skeleton--text) .skeleton__shape {\n  height: 75%;\n}\n\n:host(.skeleton--text-text-display-medium) {\n  --ds-skeleton-canvas-size: var(--typography-lineheight-3xl);\n}\n:host(.skeleton--text-text-display-small) {\n  --ds-skeleton-canvas-size: var(--typography-lineheight-2xl);\n}\n:host(.skeleton--text-text-title-large) {\n  --ds-skeleton-canvas-size: var(--typography-lineheight-xl);\n}\n:host(.skeleton--text-text-title-medium),\n:host(.skeleton--text-text-body-large) {\n  --ds-skeleton-canvas-size: var(--typography-lineheight-lg);\n}\n:host(.skeleton--text-text-title-small),\n:host(.skeleton--text-text-body-medium) {\n  --ds-skeleton-canvas-size: var(--typography-lineheight-md);\n}\n:host(.skeleton--text-text-body-small) {\n  --ds-skeleton-canvas-size: var(--typography-lineheight-sm);\n}\n:host(.skeleton--text-text-caption) {\n  --ds-skeleton-canvas-size: var(--typography-lineheight-xs);\n}\n\n/* ── Icon ──────────────────────────────────────────────────────────────── */\n\n:host(.skeleton--icon) {\n  width: var(--ds-skeleton-canvas-size);\n  height: var(--ds-skeleton-canvas-size);\n  padding: 0;\n}\n\n:host(.skeleton--icon) .skeleton__shape {\n  width: 75%;\n  height: 75%;\n}\n\n:host(.skeleton--icon.skeleton--rounded) .skeleton__shape {\n  border-radius: var(--dimension-radius-half);\n}\n\n:host(.skeleton--icon-xs) {\n  --ds-skeleton-canvas-size: var(--dimension-iconography-xs);\n}\n:host(.skeleton--icon-sm) {\n  --ds-skeleton-canvas-size: var(--dimension-iconography-sm);\n}\n:host(.skeleton--icon-md) {\n  --ds-skeleton-canvas-size: var(--dimension-iconography-md);\n}\n:host(.skeleton--icon-lg) {\n  --ds-skeleton-canvas-size: var(--dimension-iconography-lg);\n}\n:host(.skeleton--icon-xl) {\n  --ds-skeleton-canvas-size: var(--dimension-iconography-xl);\n}\n:host(.skeleton--icon-2xl) {\n  --ds-skeleton-canvas-size: var(--dimension-iconography-2xl);\n}\n:host(.skeleton--icon-3xl) {\n  --ds-skeleton-canvas-size: var(--dimension-iconography-3xl);\n}\n\n/* ── Control ───────────────────────────────────────────────────────────── */\n\n:host(.skeleton--control) {\n  width: 100%;\n  height: var(--ds-control-height);\n}\n\n:host(.skeleton--control) .skeleton__shape {\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n}\n\n:host(.skeleton--control.skeleton--rounded) .skeleton__shape {\n  border-radius: var(--dimension-radius-half);\n}\n\n@media (forced-colors: active) {\n  .skeleton__shape {\n    background-color: var(--ds-forced-color-disabled);\n  }\n}\n",
+      "content": "@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-parts.css';\n@import '../../utils/shimmer.css';\n\n:host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  min-width: 0;\n  vertical-align: middle;\n  --ds-skeleton-base: var(--color-foreground-quaternary);\n  --ds-shimmer: var(--color-shimmer-shimmer);\n  --ds-skeleton-border: var(--color-border-secondary);\n}\n\n.skeleton__shape {\n  --ds-shimmer-surface-base: var(--ds-skeleton-base);\n\n  display: block;\n  width: 100%;\n  height: 100%;\n  flex: 0 0 auto;\n  background-color: var(--ds-skeleton-base);\n  border-radius: var(--dimension-radius-025);\n}\n\n/* ── Background context ────────────────────────────────────────────────── */\n\n:host(.skeleton--background-medium) {\n  --ds-skeleton-border: var(--color-border-on-medium-background-secondary);\n  --ds-skeleton-base: var(--color-foreground-on-medium-background-quaternary);\n  --ds-shimmer: var(--color-shimmer-shimmer-on-medium-background);\n}\n\n:host(.skeleton--background-bold) {\n  --ds-skeleton-border: var(--color-border-on-bold-background-secondary);\n  --ds-skeleton-base: var(--color-foreground-on-bold-background-quaternary);\n  --ds-shimmer: var(--color-shimmer-shimmer-on-bold-background);\n}\n\n:host(.skeleton--background-strong) {\n  --ds-skeleton-border: var(--color-border-on-strong-background-secondary);\n  --ds-skeleton-base: var(--color-foreground-on-strong-background-quaternary);\n  --ds-shimmer: var(--color-shimmer-shimmer-on-strong-background);\n}\n\n:host(.skeleton--background-translucent) {\n  --ds-skeleton-border: var(--color-translucent-border-secondary);\n  --ds-skeleton-base: var(--color-translucent-foreground-quaternary);\n  --ds-shimmer: var(--color-translucent-shimmer);\n}\n\n:host(.skeleton--background-inverted) {\n  --ds-skeleton-border: var(--color-inverted-border-secondary);\n  --ds-skeleton-base: var(--color-inverted-foreground-quaternary);\n  --ds-shimmer: var(--color-inverted-shimmer);\n}\n\n:host(.skeleton--background-media) {\n  --ds-skeleton-border: var(--color-media-border-secondary);\n  --ds-skeleton-base: var(--color-media-foreground-quaternary);\n  --ds-shimmer: var(--color-media-shimmer);\n}\n\n:host(.skeleton--background-always-dark) {\n  --ds-skeleton-border: var(--color-always-dark-border-secondary);\n  --ds-skeleton-base: var(--color-always-dark-foreground-quaternary);\n  --ds-shimmer: var(--color-always-dark-shimmer);\n}\n\n:host(.skeleton--background-navigation) {\n  --ds-skeleton-base: var(--color-navigation-foreground-quaternary);\n  --ds-shimmer: var(--color-navigation-shimmer);\n}\n\n/* ── Text ──────────────────────────────────────────────────────────────── */\n\n:host(.skeleton--text) {\n  width: 100%;\n  height: var(--ds-skeleton-canvas-size);\n  padding-block: 0;\n}\n\n:host(.skeleton--text) .skeleton__shape {\n  height: 75%;\n}\n\n:host(.skeleton--text-text-display-medium) {\n  --ds-skeleton-canvas-size: var(--typography-lineheight-3xl);\n}\n:host(.skeleton--text-text-display-small) {\n  --ds-skeleton-canvas-size: var(--typography-lineheight-2xl);\n}\n:host(.skeleton--text-text-title-large) {\n  --ds-skeleton-canvas-size: var(--typography-lineheight-xl);\n}\n:host(.skeleton--text-text-title-medium),\n:host(.skeleton--text-text-body-large) {\n  --ds-skeleton-canvas-size: var(--typography-lineheight-lg);\n}\n:host(.skeleton--text-text-title-small),\n:host(.skeleton--text-text-body-medium) {\n  --ds-skeleton-canvas-size: var(--typography-lineheight-md);\n}\n:host(.skeleton--text-text-body-small) {\n  --ds-skeleton-canvas-size: var(--typography-lineheight-sm);\n}\n:host(.skeleton--text-text-caption) {\n  --ds-skeleton-canvas-size: var(--typography-lineheight-xs);\n}\n\n/* ── Icon ──────────────────────────────────────────────────────────────── */\n\n:host(.skeleton--icon) {\n  width: var(--ds-skeleton-canvas-size);\n  height: var(--ds-skeleton-canvas-size);\n  padding: 0;\n}\n\n:host(.skeleton--icon) .skeleton__shape {\n  width: 75%;\n  height: 75%;\n}\n\n:host(.skeleton--icon.skeleton--rounded) .skeleton__shape {\n  border-radius: var(--dimension-radius-half);\n}\n\n:host(.skeleton--icon-xs) {\n  --ds-skeleton-canvas-size: var(--dimension-iconography-xs);\n}\n:host(.skeleton--icon-sm) {\n  --ds-skeleton-canvas-size: var(--dimension-iconography-sm);\n}\n:host(.skeleton--icon-md) {\n  --ds-skeleton-canvas-size: var(--dimension-iconography-md);\n}\n:host(.skeleton--icon-lg) {\n  --ds-skeleton-canvas-size: var(--dimension-iconography-lg);\n}\n:host(.skeleton--icon-xl) {\n  --ds-skeleton-canvas-size: var(--dimension-iconography-xl);\n}\n:host(.skeleton--icon-2xl) {\n  --ds-skeleton-canvas-size: var(--dimension-iconography-2xl);\n}\n:host(.skeleton--icon-3xl) {\n  --ds-skeleton-canvas-size: var(--dimension-iconography-3xl);\n}\n\n/* ── Control ───────────────────────────────────────────────────────────── */\n\n:host(.skeleton--control) {\n  width: 100%;\n  height: var(--ds-control-height);\n}\n\n:host(.skeleton--control) .skeleton__shape {\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n}\n\n:host(.skeleton--control.skeleton--rounded) .skeleton__shape {\n  border-radius: var(--dimension-radius-half);\n}\n\n.skeleton__control {\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n}\n\n.skeleton__control--icon {\n  justify-content: center;\n  padding: 0;\n}\n\n.skeleton__control-label {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  overflow: hidden;\n}\n\n:host(.skeleton--control-outlined) .skeleton__control {\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-012) var(--ds-skeleton-border);\n}\n\n:host(.skeleton--rounded) .skeleton__control {\n  border-radius: var(--dimension-radius-half);\n}\n\n@media (forced-colors: active) {\n  .skeleton__shape {\n    background-color: var(--ds-forced-color-disabled);\n  }\n  :host(.skeleton--control-outlined) .skeleton__control {\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-disabled);\n    outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n  }\n}\n\n/* Projected content supplies its intrinsic size, wrapping and responsive metrics. */\n:host(.skeleton--preserve-layout) {\n  display: grid;\n  width: auto;\n  height: auto;\n  align-items: stretch;\n  justify-content: stretch;\n  padding: 0;\n}\n\n:host(.skeleton--preserve-layout) .skeleton__source,\n:host(.skeleton--preserve-layout) .skeleton__control,\n:host(.skeleton--preserve-layout) .skeleton__shape {\n  grid-area: 1 / 1;\n  min-width: 0;\n}\n\n.skeleton__source {\n  display: grid;\n  visibility: hidden;\n}\n\n:host(.skeleton--preserve-layout) .skeleton__shape {\n  height: 100%;\n  width: 100%;\n}\n\n:host(.skeleton--preserve-layout.skeleton--text) .skeleton__shape {\n  /* Alpha mask only: each retained line uses the atomic text skeleton's inset. */\n  mask-image: repeating-linear-gradient(\n    to bottom,\n    transparent 0,\n    transparent calc(var(--ds-skeleton-canvas-size) * 0.125),\n    currentColor calc(var(--ds-skeleton-canvas-size) * 0.125),\n    currentColor calc(var(--ds-skeleton-canvas-size) * 0.875),\n    transparent calc(var(--ds-skeleton-canvas-size) * 0.875),\n    transparent var(--ds-skeleton-canvas-size)\n  );\n}\n\n:host(.skeleton--content-ready) .skeleton__source {\n  visibility: inherit;\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/Skeleton/Skeleton.tsx",
-      "content": "import { Component, Prop, h, Host } from '@stencil/core';\nimport type { IconSize } from '../Icon/Icon';\nimport type { TextVariant } from '../Text/text-types';\nimport type { ControlSize } from '../../utils/control-text';\n\nexport type SkeletonVariant = 'text' | 'icon' | 'control';\nexport type SkeletonBackground =\n  | 'faint'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'translucent'\n  | 'inverted'\n  | 'media'\n  | 'navigation'\n  | 'always-dark';\n\n@Component({\n  tag: 'ds-skeleton',\n  styleUrl: 'Skeleton.css',\n  shadow: true,\n})\nexport class Skeleton {\n  @Prop() variant: SkeletonVariant = 'text';\n  /** Text metric recipe whose line-height defines the text canvas. */\n  @Prop() textVariant: TextVariant = 'text-body-medium';\n  /** Iconography token whose square canvas defines the icon canvas. */\n  @Prop() iconSize: IconSize = 'md';\n  /** Shared control-density size whose height defines the control canvas. */\n  @Prop() controlSize: ControlSize = 'md';\n  /** Width of text and control skeleton canvases. Numbers resolve to px. Ignored for icons. */\n  @Prop() width: string | number | undefined;\n  /** Round icon skeletons into circles and control skeletons into pills. Ignored for text. */\n  @Prop() rounded: boolean = false;\n  /** Whether to show the shimmer animation. */\n  @Prop() shimmer: boolean = true;\n  /** Actual parent surface context. Omit on primary and secondary surfaces. */\n  @Prop() background: SkeletonBackground | undefined;\n\n  private get widthCss() {\n    const v = this.width;\n    if (v == null) return undefined;\n    return typeof v === 'number' ? `${v}px` : v;\n  }\n\n  render() {\n    return (\n      <Host\n        aria-hidden=\"true\"\n        class={{\n          skeleton: true,\n          [`skeleton--${this.variant}`]: true,\n          [`skeleton--text-${this.textVariant}`]: this.variant === 'text',\n          [`skeleton--icon-${this.iconSize}`]: this.variant === 'icon',\n          [`ds-control--${this.controlSize}`]: this.variant === 'control',\n          [`skeleton--background-${this.background}`]: !!this.background,\n          'skeleton--rounded': this.variant !== 'text' && this.rounded,\n        }}\n        style={this.variant === 'icon' ? undefined : { width: this.widthCss }}\n      >\n        <span\n          class={{\n            skeleton__shape: true,\n            'ds-shimmer-surface': this.shimmer,\n          }}\n        />\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Prop, h, Host } from '@stencil/core';\nimport type { IconSize } from '../Icon/Icon';\nimport type { TextVariant } from '../Text/text-types';\nimport { CONTROL_TEXT_VARIANT, type ControlSize } from '../../utils/control-text';\n\nexport type SkeletonVariant = 'text' | 'icon' | 'control';\nexport type SkeletonControlAppearance = 'filled' | 'outlined' | 'borderless';\nexport type SkeletonControlContent =\n  | 'label'\n  | 'icon'\n  | 'icon-label'\n  | 'label-icon'\n  | 'icon-label-icon';\nexport type SkeletonBackground =\n  | 'faint'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'translucent'\n  | 'inverted'\n  | 'media'\n  | 'navigation'\n  | 'always-dark';\n\n/** @slot - Real text or a control whose footprint is retained with preserveLayout. */\n@Component({\n  tag: 'ds-skeleton',\n  styleUrl: 'Skeleton.css',\n  shadow: true,\n})\nexport class Skeleton {\n  @Prop() variant: SkeletonVariant = 'text';\n  /** Text metric recipe whose line-height defines the text canvas. */\n  @Prop() textVariant: TextVariant = 'text-body-medium';\n  /** Iconography token whose square canvas defines the icon canvas. */\n  @Prop() iconSize: IconSize = 'md';\n  /** Shared control-density size whose height defines the control canvas. */\n  @Prop() controlSize: ControlSize = 'md';\n  /** Filled controls replace the entire shape; other appearances retain the frame and mask its contents. */\n  @Prop() controlAppearance: SkeletonControlAppearance = 'filled';\n  /** Content anatomy for outlined and borderless control placeholders. */\n  @Prop() controlContent: SkeletonControlContent = 'label';\n  /** Width of text and control skeleton canvases. Numbers resolve to px. Ignored for icons. */\n  @Prop() width: string | number | undefined;\n  /** Round icon skeletons into circles and control skeletons into pills. Ignored for text. */\n  @Prop() rounded: boolean = false;\n  /** Whether to show the shimmer animation. */\n  @Prop() shimmer: boolean = true;\n  /** Derive geometry from a projected control or text instead of estimating its footprint. */\n  @Prop() preserveLayout: boolean = false;\n  /** With preserveLayout, reveal the same projected content when loading completes. */\n  @Prop() isLoading: boolean = true;\n  /** Actual parent surface context. Omit on primary and secondary surfaces. */\n  @Prop() background: SkeletonBackground | undefined;\n\n  private get widthCss() {\n    const v = this.width;\n    if (v == null) return undefined;\n    return typeof v === 'number' ? `${v}px` : v;\n  }\n\n  private renderControl() {\n    const iconOnly = this.controlContent === 'icon';\n    const icon = () => (\n      <ds-skeleton\n        variant=\"icon\"\n        iconSize={this.controlSize}\n        background={this.background}\n        shimmer={this.shimmer}\n      />\n    );\n    return (\n      <span\n        class={{\n          skeleton__control: true,\n          'ds-control-frame': true,\n          'skeleton__control--icon': iconOnly,\n        }}\n      >\n        {(iconOnly || this.controlContent.startsWith('icon-')) && icon()}\n        {!iconOnly && (\n          <span class=\"skeleton__control-label ds-control-label-box\">\n            <ds-skeleton\n              textVariant={CONTROL_TEXT_VARIANT[this.controlSize]}\n              background={this.background}\n              shimmer={this.shimmer}\n            />\n          </span>\n        )}\n        {!iconOnly && this.controlContent.endsWith('-icon') && icon()}\n      </span>\n    );\n  }\n\n  render() {\n    return (\n      <Host\n        aria-hidden={this.isLoading ? 'true' : undefined}\n        class={{\n          skeleton: true,\n          [`skeleton--${this.variant}`]: true,\n          [`skeleton--text-${this.textVariant}`]: this.variant === 'text',\n          [`skeleton--icon-${this.iconSize}`]: this.variant === 'icon',\n          [`ds-control--${this.controlSize}`]: this.variant === 'control',\n          [`skeleton--control-${this.controlAppearance}`]: this.variant === 'control',\n          [`skeleton--background-${this.background}`]: !!this.background,\n          'skeleton--rounded': this.variant !== 'text' && this.rounded,\n          'skeleton--preserve-layout': this.preserveLayout,\n          'skeleton--content-ready': this.preserveLayout && !this.isLoading,\n        }}\n        style={this.variant === 'icon' ? undefined : { width: this.widthCss }}\n      >\n        {this.preserveLayout && (\n          <span class=\"skeleton__source\" inert={this.isLoading}>\n            <slot />\n          </span>\n        )}\n        {this.isLoading &&\n          (this.variant === 'control' && this.controlAppearance !== 'filled' ? (\n            this.renderControl()\n          ) : (\n            <span\n              class={{\n                skeleton__shape: true,\n                'ds-shimmer-surface': this.shimmer,\n              }}\n            />\n          ))}\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

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

@@ -696,8 +696,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: formatOptions, ticks, valueTexts.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.0",
-          "@ds-mo/icons ^8.1.1"
+          "@ds-mo/tokens ^8.0.1",
+          "@ds-mo/icons ^8.1.2"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -227,8 +227,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: options, sections.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.0",
-          "@ds-mo/icons ^8.1.1"
+          "@ds-mo/tokens ^8.0.1",
+          "@ds-mo/icons ^8.1.2"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -378,8 +378,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.0",
-          "@ds-mo/icons ^8.1.1"
+          "@ds-mo/tokens ^8.0.1",
+          "@ds-mo/icons ^8.1.2"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -352,8 +352,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: tabs.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.0",
-          "@ds-mo/icons ^8.1.1"
+          "@ds-mo/tokens ^8.0.1",
+          "@ds-mo/icons ^8.1.2"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }