@ds-mo/ui 15.12.0 → 16.0.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -12,8 +12,8 @@
     "themeSetup": "Set data-theme=\"dark\" on <html> for dark mode. Light is default.",
     "peerDependencies": {
       "required": [
-        "@ds-mo/tokens ^8.0.1",
-        "@ds-mo/icons ^8.1.2"
+        "@ds-mo/tokens ^9.0.0",
+        "@ds-mo/icons ^8.2.1"
       ],
       "optional": [],
       "frameworks": "None required for Custom Elements; generated React, Vue, and Angular adapters are included."
@@ -4179,7 +4179,7 @@
             "The shared text-action recipe supplies brand foreground, hover underline, and keyboard focus indication."
           ],
           "states": [
-            "Loading retains the card surface, sentence wrapping, and control footprints while replacing each fragment with an inert skeleton.",
+            "Loading retains the card surface, sentence wrapping, and control footprints while replacing each fragment with an inert text skeleton. Text actions mask only their labels, preserving the surrounding button's hit area.",
             "The application owns the selected area, profile, available choices, permissions, and empty-state copy. Existing complete area-trigger labels remain compatible. Applications that separate the localizable settings noun from the control supply the area-only trigger label and noun together.",
             "The card reports popup requests without changing selection or expanded state.",
             "The surface follows the active theme rather than imposing always-dark colors."
@@ -14926,7 +14926,8 @@
           ],
           "responsiveBehavior": [
             "The owning layout changes placeholder count, width, visibility, and arrangement to match its real responsive content.",
-            "Skeleton does not infer breakpoints or rearrange sibling atoms."
+            "Set collapseLabel on a control skeleton when its real control opts into compact table-caption behavior. It follows the same table or standalone data-toolbar measurement, replacing icon-and-label anatomy with a centered icon while preserving the enclosing control footprint.",
+            "Other skeletons do not infer breakpoints or rearrange sibling atoms. Icon canvases retain their square geometry in flex layouts."
           ],
           "frameworkCaveats": {
             "customElements": [
@@ -14997,6 +14998,10 @@
             "type": "SkeletonBackground | undefined",
             "required": false
           },
+          "collapseLabel": {
+            "type": "boolean",
+            "required": false
+          },
           "controlAppearance": {
             "type": "SkeletonControlAppearance",
             "required": false

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -332,8 +332,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.1",
-          "@ds-mo/icons ^8.1.2"
+          "@ds-mo/tokens ^9.0.0",
+          "@ds-mo/icons ^8.2.1"
         ],
         "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.1",
-          "@ds-mo/icons ^8.1.2"
+          "@ds-mo/tokens ^9.0.0",
+          "@ds-mo/icons ^8.2.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -65,7 +65,8 @@
       ],
       "responsiveBehavior": [
         "The owning layout changes placeholder count, width, visibility, and arrangement to match its real responsive content.",
-        "Skeleton does not infer breakpoints or rearrange sibling atoms."
+        "Set collapseLabel on a control skeleton when its real control opts into compact table-caption behavior. It follows the same table or standalone data-toolbar measurement, replacing icon-and-label anatomy with a centered icon while preserving the enclosing control footprint.",
+        "Other skeletons do not infer breakpoints or rearrange sibling atoms. Icon canvases retain their square geometry in flex layouts."
       ],
       "frameworkCaveats": {
         "customElements": [
@@ -141,6 +142,15 @@
           "mutable": false,
           "description": "Actual parent surface context. Omit on primary and secondary surfaces."
         },
+        "collapseLabel": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "collapse-label",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Follow the owning table or data toolbar's compact icon-only control presentation."
+        },
         "controlAppearance": {
           "type": "SkeletonControlAppearance",
           "resolvedType": "\"borderless\" | \"filled\" | \"outlined\"",
@@ -257,6 +267,15 @@
         "mutable": false,
         "description": "Actual parent surface context. Omit on primary and secondary surfaces."
       },
+      "collapseLabel": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "collapse-label",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Follow the owning table or data toolbar's compact icon-only control presentation."
+      },
       "controlAppearance": {
         "type": "SkeletonControlAppearance",
         "resolvedType": "\"borderless\" | \"filled\" | \"outlined\"",
@@ -390,8 +409,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.1",
-          "@ds-mo/icons ^8.1.2"
+          "@ds-mo/tokens ^9.0.0",
+          "@ds-mo/icons ^8.2.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }
@@ -407,12 +426,12 @@
   "files": [
     {
       "path": "src/wc/components/Skeleton/Skeleton.css",
-      "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",
+      "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  flex-shrink: 0;\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  /* Geometry only: inherited text alpha must not dim the skeleton's own token. */\n  mask-image: repeating-linear-gradient(\n    to bottom,\n    transparent 0,\n    transparent calc(var(--ds-skeleton-canvas-size) * 0.125),\n    rgb(from currentColor r g b / 1) calc(var(--ds-skeleton-canvas-size) * 0.125),\n    rgb(from currentColor r g b / 1) 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 { 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",
+      "content": "import { Component, Element, Prop, State, Watch, 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';\nimport { observeTableCaptionCompact } from '../../utils/table-caption-compact';\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  @Element() el!: HTMLElement;\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  /** Follow the owning table or data toolbar's compact icon-only control presentation. */\n  @Prop() collapseLabel: boolean = false;\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  @State() private captionCompact = false;\n  private captionCompactDisconnect: (() => void) | undefined;\n  private hasLoaded = false;\n\n  componentDidLoad(): void {\n    this.hasLoaded = true;\n    this.syncCaptionCompactObserver();\n  }\n\n  connectedCallback(): void {\n    if (this.hasLoaded) this.syncCaptionCompactObserver();\n  }\n\n  disconnectedCallback(): void {\n    this.disconnectCaptionCompactObserver();\n  }\n\n  private disconnectCaptionCompactObserver(): void {\n    this.captionCompactDisconnect?.();\n    this.captionCompactDisconnect = undefined;\n  }\n\n  @Watch('collapseLabel')\n  syncCaptionCompactObserver(): void {\n    this.disconnectCaptionCompactObserver();\n    if (!this.collapseLabel) {\n      this.captionCompact = false;\n      return;\n    }\n    this.captionCompactDisconnect = observeTableCaptionCompact(this.el, compact => {\n      this.captionCompact = compact;\n    });\n  }\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 =\n      this.controlContent === 'icon' ||\n      (this.collapseLabel && this.captionCompact && this.controlContent.includes('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.1",
-          "@ds-mo/icons ^8.1.2"
+          "@ds-mo/tokens ^9.0.0",
+          "@ds-mo/icons ^8.2.1"
         ],
         "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.1",
-          "@ds-mo/icons ^8.1.2"
+          "@ds-mo/tokens ^9.0.0",
+          "@ds-mo/icons ^8.2.1"
         ],
         "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.1",
-          "@ds-mo/icons ^8.1.2"
+          "@ds-mo/tokens ^9.0.0",
+          "@ds-mo/icons ^8.2.1"
         ],
         "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.1",
-          "@ds-mo/icons ^8.1.2"
+          "@ds-mo/tokens ^9.0.0",
+          "@ds-mo/icons ^8.2.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -1674,8 +1674,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: cellRange, cellSpans, collapsedGroupIds, columns, customizeOptions, fieldOrder, grouping, groups, hiddenFieldIds, highlightFieldIds, highlightTerms, pagination, pinnedFieldIds, rows, selectedRowIds, sort.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.1",
-          "@ds-mo/icons ^8.1.2"
+          "@ds-mo/tokens ^9.0.0",
+          "@ds-mo/icons ^8.2.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

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

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

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

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

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

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

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

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

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

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

@@ -254,8 +254,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: items.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.1",
-          "@ds-mo/icons ^8.1.2"
+          "@ds-mo/tokens ^9.0.0",
+          "@ds-mo/icons ^8.2.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }
@@ -271,7 +271,7 @@
   "files": [
     {
       "path": "src/wc/components/TooltipChart/TooltipChart.css",
-      "content": "@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-parts.css';\n@import '../../utils/chrome-layout.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  position: absolute;\n  z-index: var(--dimension-z-index-tooltip);\n  background-color: var(--color-translucent-translucent);\n  backdrop-filter: blur(var(--effect-blur-md));\n  -webkit-backdrop-filter: blur(var(--effect-blur-md));\n  border-radius: var(--ds-radius-tooltip-menu);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: 0;\n}\n\n:host(.tooltip-chart--visible) {\n  animation: tooltip-chart-fade-in var(--effect-motion-short-2) forwards;\n}\n\n.tooltip-chart__item {\n  width: 100%;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n}\n\n.tooltip-chart__items {\n  display: contents;\n}\n\n.tooltip-chart__swatch-box {\n  pointer-events: none;\n}\n\n.tooltip-chart__swatch {\n  width: var(--dimension-size-100);\n  height: var(--dimension-size-100);\n  flex: none;\n  border-radius: var(--dimension-radius-half);\n  background: var(--ds-tooltip-chart-swatch);\n}\n\n.tooltip-chart__value {\n  margin-inline-start: auto;\n  text-align: end;\n}\n\n.tooltip-chart__label,\n.tooltip-chart__value {\n  flex: none;\n}\n\n@keyframes tooltip-chart-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host(.tooltip-chart--visible) {\n    animation: none;\n    opacity: 1;\n  }\n}\n\n@media (forced-colors: active) {\n  :host {\n    box-shadow: none;\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n  }\n}\n",
+      "content": "@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-parts.css';\n@import '../../utils/chrome-layout.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  position: absolute;\n  z-index: var(--dimension-z-index-tooltip);\n  background-color: var(--color-translucent-background);\n  backdrop-filter: blur(var(--effect-blur-md));\n  -webkit-backdrop-filter: blur(var(--effect-blur-md));\n  border-radius: var(--ds-radius-tooltip-menu);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: 0;\n}\n\n:host(.tooltip-chart--visible) {\n  animation: tooltip-chart-fade-in var(--effect-motion-short-2) forwards;\n}\n\n.tooltip-chart__item {\n  width: 100%;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n}\n\n.tooltip-chart__items {\n  display: contents;\n}\n\n.tooltip-chart__swatch-box {\n  pointer-events: none;\n}\n\n.tooltip-chart__swatch {\n  width: var(--dimension-size-100);\n  height: var(--dimension-size-100);\n  flex: none;\n  border-radius: var(--dimension-radius-half);\n  background: var(--ds-tooltip-chart-swatch);\n}\n\n.tooltip-chart__value {\n  margin-inline-start: auto;\n  text-align: end;\n}\n\n.tooltip-chart__label,\n.tooltip-chart__value {\n  flex: none;\n}\n\n@keyframes tooltip-chart-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host(.tooltip-chart--visible) {\n    animation: none;\n    opacity: 1;\n  }\n}\n\n@media (forced-colors: active) {\n  :host {\n    box-shadow: none;\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n  }\n}\n",
       "type": "registry:ui"
     },
     {

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

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

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

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

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

@@ -7,6 +7,7 @@ export type SkeletonControlContent = 'label' | 'icon' | 'icon-label' | 'label-ic
 export type SkeletonBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'translucent' | 'inverted' | 'media' | 'navigation' | 'always-dark';
 /** @slot - Real text or a control whose footprint is retained with preserveLayout. */
 export declare class Skeleton {
+    el: HTMLElement;
     variant: SkeletonVariant;
     /** Text metric recipe whose line-height defines the text canvas. */
     textVariant: TextVariant;
@@ -18,6 +19,8 @@ export declare class Skeleton {
     controlAppearance: SkeletonControlAppearance;
     /** Content anatomy for outlined and borderless control placeholders. */
     controlContent: SkeletonControlContent;
+    /** Follow the owning table or data toolbar's compact icon-only control presentation. */
+    collapseLabel: boolean;
     /** Width of text and control skeleton canvases. Numbers resolve to px. Ignored for icons. */
     width: string | number | undefined;
     /** Round icon skeletons into circles and control skeletons into pills. Ignored for text. */
@@ -30,6 +33,14 @@ export declare class Skeleton {
     isLoading: boolean;
     /** Actual parent surface context. Omit on primary and secondary surfaces. */
     background: SkeletonBackground | undefined;
+    private captionCompact;
+    private captionCompactDisconnect;
+    private hasLoaded;
+    componentDidLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private disconnectCaptionCompactObserver;
+    syncCaptionCompactObserver(): void;
     private get widthCss();
     private renderControl;
     render(): any;

package/dist/types/components.d.ts

@@ -4242,6 +4242,11 @@ export namespace Components {
           * Actual parent surface context. Omit on primary and secondary surfaces.
          */
         "background": SkeletonBackground | undefined;
+        /**
+          * Follow the owning table or data toolbar's compact icon-only control presentation.
+          * @default false
+         */
+        "collapseLabel": boolean;
         /**
           * Filled controls replace the entire shape; other appearances retain the frame and mask its contents.
           * @default 'filled'
@@ -11688,6 +11693,11 @@ declare namespace LocalJSX {
           * Actual parent surface context. Omit on primary and secondary surfaces.
          */
         "background"?: SkeletonBackground | undefined;
+        /**
+          * Follow the owning table or data toolbar's compact icon-only control presentation.
+          * @default false
+         */
+        "collapseLabel"?: boolean;
         /**
           * Filled controls replace the entire shape; other appearances retain the frame and mask its contents.
           * @default 'filled'
@@ -13673,6 +13683,7 @@ declare namespace LocalJSX {
         "controlSize": ControlSize;
         "controlAppearance": SkeletonControlAppearance;
         "controlContent": SkeletonControlContent;
+        "collapseLabel": boolean;
         "width": string;
         "rounded": boolean;
         "shimmer": boolean;