@ds-mo/ui 15.11.2 → 15.12.1

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

@@ -59,11 +59,14 @@
         "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.",
-        "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": [
@@ -103,7 +106,11 @@
               "textVariant",
               "iconSize",
               "controlSize",
-              "rounded"
+              "rounded",
+              "preserveLayout",
+              "isLoading",
+              "controlAppearance",
+              "controlContent"
             ]
           },
           {
@@ -116,7 +123,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 +142,33 @@
           "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\"",
+          "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 +187,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 +251,12 @@
       },
       "events": [],
       "methods": [],
-      "slots": []
+      "slots": [
+        {
+          "name": "",
+          "description": "Real text or a control whose footprint is retained with preserveLayout."
+        }
+      ]
     },
     "props": {
       "background": {
@@ -208,6 +267,33 @@
         "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\"",
+        "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 +312,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 +376,12 @@
     },
     "events": [],
     "methods": [],
-    "slots": [],
+    "slots": [
+      {
+        "name": "",
+        "description": "Real text or a control whose footprint is retained with preserveLayout."
+      }
+    ],
     "exports": {
       "customElement": "ds-skeleton",
       "react": "DsSkeleton",
@@ -311,16 +420,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  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 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, 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"
     }
   ]