@ds-mo/ui 15.11.1 → 15.12.0

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

@@ -136,8 +136,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: 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/agent-questionnaire.json

@@ -241,8 +241,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: answers, labels, questions.",
       "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/agent-response.json

@@ -239,8 +239,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: parts.",
       "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/agent-source-list.json

@@ -152,8 +152,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: 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/agent-tool-call.json

@@ -232,8 +232,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: input, output.",
       "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/attachment-list.json

@@ -116,8 +116,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: 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/avatar.json

@@ -168,8 +168,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/badge.json

@@ -291,8 +291,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/banner.json

@@ -334,8 +334,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/bar-action.json

@@ -236,8 +236,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/bar-nav.json

@@ -291,8 +291,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."
       }

package/dist/mcp-data/registry/bar-page-title.json

@@ -421,8 +421,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: actionItems, actions, primaryAction, 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/bar-title.json

@@ -564,8 +564,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: actionItems, actions, breadcrumbs, primaryAction, 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/bar-workflow.json

@@ -379,8 +379,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: steps, submitAction.",
       "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/breadcrumb.json

@@ -181,8 +181,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: 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/button-filled.json

@@ -695,8 +695,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/button-inverted.json

@@ -610,8 +610,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/button-unfilled.json

@@ -775,8 +775,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/calendar.json

@@ -251,8 +251,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/card-action-center.json

@@ -51,7 +51,8 @@
       "states": [
         "Rows expose distinct rest, hover, pressed, keyboard-focus, and inactive states.",
         "An empty sections array or groups with no items render the configured empty message.",
-        "The application owns loading, error, permission, routing, and post-activation consequences and reflects availability through the supplied item data."
+        "The application owns data fetching, error, permission, routing, and post-activation consequences and reflects availability through the supplied item data.",
+        "isLoading preserves the section and row layout while skeletonizing all headings, labels, and values; actions become inert and the card exposes its busy state."
       ],
       "responsiveBehavior": [
         "The card fills its parent width and never establishes a product breakpoint.",
@@ -117,6 +118,15 @@
           "mutable": false,
           "description": "Copy shown when no section contains an action."
         },
+        "isLoading": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "is-loading",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Retain sections and rows while replacing their headings, labels, and values with skeletons."
+        },
         "sections": {
           "type": "ReadonlyArray<CardActionCenterSection>",
           "resolvedType": "readonly CardActionCenterSection[]",
@@ -149,6 +159,15 @@
         "mutable": false,
         "description": "Copy shown when no section contains an action."
       },
+      "isLoading": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "is-loading",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Retain sections and rows while replacing their headings, labels, and values with skeletons."
+      },
       "sections": {
         "type": "ReadonlyArray<CardActionCenterSection>",
         "resolvedType": "readonly CardActionCenterSection[]",
@@ -198,8 +217,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: 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."
       }
@@ -211,18 +230,19 @@
   ],
   "registryDependencies": [
     "divider",
+    "skeleton",
     "tag",
     "text"
   ],
   "files": [
     {
       "path": "src/wc/components/CardActionCenter/CardActionCenter.css",
-      "content": "@import '../../utils/radius.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n  min-width: 0;\n  padding: calc(var(--dimension-space-100) - var(--dimension-stroke-width-012));\n  box-sizing: border-box;\n  border: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  border-radius: var(--ds-radius-card);\n  background: var(--color-background-primary);\n}\n\n.card-action-center__group,\n.card-action-center__section {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.card-action-center__section {\n  gap: var(--dimension-space-050);\n}\n\n.card-action-center__divider {\n  display: flex;\n  flex: 0 0 var(--dimension-space-400);\n  align-items: center;\n  min-width: 0;\n}\n\n.card-action-center__section-heading {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  min-width: 0;\n  min-height: var(--dimension-size-400);\n  padding-inline: var(--dimension-space-100);\n  box-sizing: border-box;\n  user-select: none;\n}\n\n.card-action-center__list {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.card-action-center__item {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  width: 100%;\n  height: var(--dimension-size-400);\n  padding: 0 var(--dimension-space-075);\n  overflow: hidden;\n  box-sizing: border-box;\n  appearance: none;\n  border: none;\n  border-radius: var(--dimension-radius-025);\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  text-align: start;\n  text-decoration: none;\n}\n\n.card-action-center__item--tagged {\n  padding-inline-end: var(--dimension-space-075);\n}\n\n.card-action-center__item-content {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  gap: var(--dimension-space-025);\n  min-width: 0;\n  padding-inline: var(--dimension-space-025);\n}\n\n.card-action-center__item-label {\n  display: block;\n  min-width: 0;\n}\n\n.card-action-center__item-value {\n  flex: 0 0 auto;\n}\n\nds-tag.card-action-center__item-value {\n  font-variant-numeric: tabular-nums;\n  font-feature-settings: 'tnum';\n}\n\n.card-action-center__empty {\n  margin: 0;\n  padding: var(--dimension-space-100);\n  text-align: center;\n}\n\n@media (forced-colors: active) {\n  :host {\n    border-color: var(--ds-forced-color-content);\n    background: var(--ds-forced-color-surface);\n  }\n}\n",
+      "content": "@import '../../utils/radius.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n  min-width: 0;\n  padding: calc(var(--dimension-space-100) - var(--dimension-stroke-width-012));\n  box-sizing: border-box;\n  border: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  border-radius: var(--ds-radius-card);\n  background: var(--color-background-primary);\n}\n\n.card-action-center__group,\n.card-action-center__section {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.card-action-center__section {\n  gap: var(--dimension-space-050);\n}\n\n.card-action-center__divider {\n  display: flex;\n  flex: 0 0 var(--dimension-space-400);\n  align-items: center;\n  min-width: 0;\n}\n\n.card-action-center__section-heading {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  min-width: 0;\n  min-height: var(--dimension-size-400);\n  padding-inline: var(--dimension-space-100);\n  box-sizing: border-box;\n  user-select: none;\n}\n\n.card-action-center__list {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.card-action-center__item {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  width: 100%;\n  height: var(--dimension-size-400);\n  padding: 0 var(--dimension-space-075);\n  overflow: hidden;\n  box-sizing: border-box;\n  appearance: none;\n  border: none;\n  border-radius: var(--dimension-radius-025);\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  text-align: start;\n  text-decoration: none;\n}\n\n.card-action-center__item--tagged {\n  padding-inline-end: var(--dimension-space-075);\n}\n\n.card-action-center__item-content {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  gap: var(--dimension-space-025);\n  min-width: 0;\n  padding-inline: var(--dimension-space-025);\n}\n\n.card-action-center__item-label {\n  display: block;\n  min-width: 0;\n}\n\n.card-action-center__item-value {\n  flex: 0 0 auto;\n}\n\n.card-action-center__item-value ds-tag {\n  font-variant-numeric: tabular-nums;\n  font-feature-settings: 'tnum';\n}\n\n.card-action-center__section-heading,\n.card-action-center__item-label {\n  position: relative;\n}\n\n:host(.card-action-center--loading) .card-action-center__copy {\n  visibility: hidden;\n}\n\n.card-action-center__copy-skeleton {\n  position: absolute;\n  inset-block-start: 50%;\n  transform: translateY(-50%);\n}\n\n.card-action-center__empty {\n  margin: 0;\n  padding: var(--dimension-space-100);\n  text-align: center;\n}\n\n@media (forced-colors: active) {\n  :host {\n    border-color: var(--ds-forced-color-content);\n    background: var(--ds-forced-color-surface);\n  }\n}\n\n.card-action-center__section-heading .card-action-center__copy-skeleton {\n  inset-inline-start: var(--dimension-space-100);\n}\n.card-action-center__item-label .card-action-center__copy-skeleton {\n  inset-inline-start: var(--dimension-space-025);\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/CardActionCenter/CardActionCenter.tsx",
-      "content": "import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { resolveSafeUrl } from '../../utils';\nimport type { TagContrast, TagIntent } from '../Tag/Tag';\n\nexport interface CardActionCenterTag {\n  intent?: TagIntent;\n  contrast?: TagContrast;\n}\n\nexport interface CardActionCenterItem {\n  id: string;\n  label: string;\n  value?: string | number;\n  tag?: CardActionCenterTag;\n  href?: string;\n  isInactive?: boolean;\n}\n\nexport interface CardActionCenterSection {\n  id: string;\n  heading: string;\n  items: ReadonlyArray<CardActionCenterItem>;\n}\n\nexport interface CardActionCenterActionDetail {\n  sectionId: string;\n  itemId: string;\n  item: CardActionCenterItem;\n  href?: string;\n  originalEvent: MouseEvent;\n}\n\nlet nextCardActionCenterId = 0;\n\n@Component({\n  tag: 'ds-card-action-center',\n  styleUrl: 'CardActionCenter.css',\n  scoped: true,\n})\nexport class CardActionCenter {\n  /** Ordered groups of actions rendered in the card. Empty groups are omitted. */\n  @Prop() sections: ReadonlyArray<CardActionCenterSection> = [];\n\n  /** Copy shown when no section contains an action. */\n  @Prop() emptyMessage: string = 'No actions available';\n\n  /**\n   * Emitted when an available row is activated. When a row has an `href`,\n   * prevent this event to take over navigation with an application router.\n   */\n  @Event({ cancelable: true }) dsAction!: EventEmitter<CardActionCenterActionDetail>;\n\n  private readonly instanceId = ++nextCardActionCenterId;\n\n  private get visibleSections(): ReadonlyArray<CardActionCenterSection> {\n    return this.sections.filter(section => section.items.length > 0);\n  }\n\n  private headingId(section: CardActionCenterSection, index: number): string {\n    const sectionId = section.id.replace(/[^a-zA-Z0-9_-]/g, '-');\n    return `ds-card-action-center-${this.instanceId}-${index}-${sectionId}`;\n  }\n\n  private handleAction(\n    section: CardActionCenterSection,\n    item: CardActionCenterItem,\n    href: string | undefined,\n    originalEvent: MouseEvent\n  ) {\n    if (item.isInactive) return;\n\n    const actionEvent = this.dsAction.emit({\n      sectionId: section.id,\n      itemId: item.id,\n      item,\n      href,\n      originalEvent,\n    });\n    if (href && actionEvent.defaultPrevented) originalEvent.preventDefault();\n  }\n\n  private renderValue(item: CardActionCenterItem) {\n    if (item.value === undefined || item.value === null) return null;\n    const value = String(item.value);\n\n    if (item.tag) {\n      return (\n        <ds-tag\n          class=\"card-action-center__item-value ds-interaction-fill__content\"\n          label={value}\n          intent={item.tag.intent ?? 'neutral'}\n          contrast={item.tag.contrast ?? 'faint'}\n          size=\"sm\"\n          isInset\n          rounded\n        ></ds-tag>\n      );\n    }\n\n    return (\n      <ds-text\n        class=\"card-action-center__item-value ds-interaction-fill__content\"\n        variant=\"text-body-medium\"\n        color=\"secondary\"\n        emphasis\n        wrap=\"nowrap\"\n        fontFeature=\"tabular-nums\"\n        as=\"span\"\n      >\n        {value}\n      </ds-text>\n    );\n  }\n\n  private renderItem(section: CardActionCenterSection, item: CardActionCenterItem) {\n    const href = item.isInactive ? undefined : resolveSafeUrl(item.href);\n    const classes = {\n      'card-action-center__item': true,\n      'card-action-center__item--tagged': !!item.tag && item.value != null,\n      'ds-interaction-fill': true,\n      'ds-focus-ring-inset': true,\n      'ds-control-inactive': !!item.isInactive,\n    };\n    const content = [\n      <ds-text\n        class=\"card-action-center__item-content card-action-center__item-label ds-interaction-fill__content\"\n        variant=\"text-body-medium\"\n        color=\"secondary\"\n        wrap=\"balance\"\n        as=\"span\"\n      >\n        {item.label}\n      </ds-text>,\n      this.renderValue(item),\n    ];\n\n    if (href) {\n      return (\n        <a\n          class={classes}\n          href={href}\n          onClick={(event: MouseEvent) => this.handleAction(section, item, href, event)}\n        >\n          {content}\n        </a>\n      );\n    }\n\n    return (\n      <button\n        type=\"button\"\n        class={classes}\n        disabled={item.isInactive || undefined}\n        onClick={(event: MouseEvent) => this.handleAction(section, item, undefined, event)}\n      >\n        {content}\n      </button>\n    );\n  }\n\n  render() {\n    const sections = this.visibleSections;\n\n    return (\n      <Host>\n        {sections.length ? (\n          sections.map((section, sectionIndex) => (\n            <div class=\"card-action-center__group\">\n              {sectionIndex > 0 ? (\n                <div class=\"card-action-center__divider\">\n                  <ds-divider\n                    inset=\"space-100\"\n                    length=\"calc(100% - var(--dimension-space-200))\"\n                  ></ds-divider>\n                </div>\n              ) : null}\n              <section\n                class=\"card-action-center__section\"\n                aria-labelledby={this.headingId(section, sectionIndex)}\n              >\n                <ds-text\n                  id={this.headingId(section, sectionIndex)}\n                  class=\"card-action-center__section-heading\"\n                  variant=\"text-title-small\"\n                  emphasis\n                  color=\"primary\"\n                  wrap=\"balance\"\n                  as=\"h2\"\n                >\n                  {section.heading}\n                </ds-text>\n                <ul class=\"card-action-center__list\">\n                  {section.items.map(item => (\n                    <li>{this.renderItem(section, item)}</li>\n                  ))}\n                </ul>\n              </section>\n            </div>\n          ))\n        ) : (\n          <ds-text\n            class=\"card-action-center__empty\"\n            variant=\"text-body-medium\"\n            color=\"secondary\"\n            wrap=\"balance\"\n            as=\"p\"\n          >\n            {this.emptyMessage}\n          </ds-text>\n        )}\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { resolveSafeUrl } from '../../utils';\nimport type { TagContrast, TagIntent } from '../Tag/Tag';\n\nexport interface CardActionCenterTag {\n  intent?: TagIntent;\n  contrast?: TagContrast;\n}\n\nexport interface CardActionCenterItem {\n  id: string;\n  label: string;\n  value?: string | number;\n  tag?: CardActionCenterTag;\n  href?: string;\n  isInactive?: boolean;\n}\n\nexport interface CardActionCenterSection {\n  id: string;\n  heading: string;\n  items: ReadonlyArray<CardActionCenterItem>;\n}\n\nexport interface CardActionCenterActionDetail {\n  sectionId: string;\n  itemId: string;\n  item: CardActionCenterItem;\n  href?: string;\n  originalEvent: MouseEvent;\n}\n\nlet nextCardActionCenterId = 0;\n\n@Component({\n  tag: 'ds-card-action-center',\n  styleUrl: 'CardActionCenter.css',\n  scoped: true,\n})\nexport class CardActionCenter {\n  /** Ordered groups of actions rendered in the card. Empty groups are omitted. */\n  @Prop() sections: ReadonlyArray<CardActionCenterSection> = [];\n\n  /** Copy shown when no section contains an action. */\n  @Prop() emptyMessage: string = 'No actions available';\n  /** Retain sections and rows while replacing their headings, labels, and values with skeletons. */\n  @Prop() isLoading: boolean = false;\n\n  /**\n   * Emitted when an available row is activated. When a row has an `href`,\n   * prevent this event to take over navigation with an application router.\n   */\n  @Event({ cancelable: true }) dsAction!: EventEmitter<CardActionCenterActionDetail>;\n\n  private readonly instanceId = ++nextCardActionCenterId;\n\n  private get visibleSections(): ReadonlyArray<CardActionCenterSection> {\n    return this.sections.filter(section => section.items.length > 0);\n  }\n\n  private headingId(section: CardActionCenterSection, index: number): string {\n    const sectionId = section.id.replace(/[^a-zA-Z0-9_-]/g, '-');\n    return `ds-card-action-center-${this.instanceId}-${index}-${sectionId}`;\n  }\n\n  private handleAction(\n    section: CardActionCenterSection,\n    item: CardActionCenterItem,\n    href: string | undefined,\n    originalEvent: MouseEvent\n  ) {\n    if (item.isInactive || this.isLoading) return;\n\n    const actionEvent = this.dsAction.emit({\n      sectionId: section.id,\n      itemId: item.id,\n      item,\n      href,\n      originalEvent,\n    });\n    if (href && actionEvent.defaultPrevented) originalEvent.preventDefault();\n  }\n\n  private renderValue(item: CardActionCenterItem) {\n    if (item.value === undefined || item.value === null) return null;\n    const value = String(item.value);\n\n    if (item.tag) {\n      return (\n        <ds-skeleton\n          class=\"card-action-center__item-value\"\n          preserveLayout\n          isLoading={this.isLoading}\n          variant=\"control\"\n          rounded\n        >\n          <ds-tag\n            class=\"ds-interaction-fill__content\"\n            label={value}\n            intent={item.tag.intent ?? 'neutral'}\n            contrast={item.tag.contrast ?? 'faint'}\n            size=\"sm\"\n            isInset\n            rounded\n          ></ds-tag>\n        </ds-skeleton>\n      );\n    }\n\n    return (\n      <ds-skeleton class=\"card-action-center__item-value\" preserveLayout isLoading={this.isLoading}>\n        <ds-text\n          class=\"ds-interaction-fill__content\"\n          variant=\"text-body-medium\"\n          color=\"secondary\"\n          emphasis\n          wrap=\"nowrap\"\n          fontFeature=\"tabular-nums\"\n          as=\"span\"\n        >\n          {value}\n        </ds-text>\n      </ds-skeleton>\n    );\n  }\n\n  private renderItem(section: CardActionCenterSection, item: CardActionCenterItem) {\n    const href = item.isInactive || this.isLoading ? undefined : resolveSafeUrl(item.href);\n    const classes = {\n      'card-action-center__item': true,\n      'card-action-center__item--tagged': !!item.tag && item.value != null,\n      'ds-interaction-fill': true,\n      'ds-focus-ring-inset': true,\n      'ds-control-inactive': !!item.isInactive && !this.isLoading,\n    };\n    const content = [\n      <ds-text\n        class=\"card-action-center__item-content card-action-center__item-label ds-interaction-fill__content\"\n        variant=\"text-body-medium\"\n        color=\"secondary\"\n        wrap=\"balance\"\n        as=\"span\"\n        aria-hidden={this.isLoading ? 'true' : undefined}\n      >\n        <span class=\"card-action-center__copy\">{item.label}</span>\n        {this.isLoading && <ds-skeleton class=\"card-action-center__copy-skeleton\" width=\"75%\" />}\n      </ds-text>,\n      this.renderValue(item),\n    ];\n\n    if (href) {\n      return (\n        <a\n          class={classes}\n          href={href}\n          onClick={(event: MouseEvent) => this.handleAction(section, item, href, event)}\n        >\n          {content}\n        </a>\n      );\n    }\n\n    return (\n      <button\n        type=\"button\"\n        class={classes}\n        disabled={this.isLoading || item.isInactive || undefined}\n        inert={this.isLoading}\n        aria-hidden={this.isLoading ? 'true' : undefined}\n        onClick={(event: MouseEvent) => this.handleAction(section, item, undefined, event)}\n      >\n        {content}\n      </button>\n    );\n  }\n\n  render() {\n    const sections = this.visibleSections;\n\n    return (\n      <Host\n        class={{ 'card-action-center--loading': this.isLoading }}\n        aria-busy={this.isLoading ? 'true' : undefined}\n      >\n        {sections.length ? (\n          sections.map((section, sectionIndex) => (\n            <div class=\"card-action-center__group\">\n              {sectionIndex > 0 ? (\n                <div class=\"card-action-center__divider\">\n                  <ds-divider\n                    inset=\"space-100\"\n                    length=\"calc(100% - var(--dimension-space-200))\"\n                  ></ds-divider>\n                </div>\n              ) : null}\n              <section\n                class=\"card-action-center__section\"\n                aria-labelledby={this.headingId(section, sectionIndex)}\n              >\n                <ds-text\n                  id={this.headingId(section, sectionIndex)}\n                  class=\"card-action-center__section-heading\"\n                  variant=\"text-title-small\"\n                  emphasis\n                  color=\"primary\"\n                  wrap=\"balance\"\n                  as=\"h2\"\n                  aria-hidden={this.isLoading ? 'true' : undefined}\n                >\n                  <span class=\"card-action-center__copy\">{section.heading}</span>\n                  {this.isLoading && (\n                    <ds-skeleton\n                      class=\"card-action-center__copy-skeleton\"\n                      textVariant=\"text-title-small\"\n                      width=\"min(60%, calc(var(--dimension-size-800) * 2))\"\n                    />\n                  )}\n                </ds-text>\n                <ul class=\"card-action-center__list\">\n                  {section.items.map(item => (\n                    <li>{this.renderItem(section, item)}</li>\n                  ))}\n                </ul>\n              </section>\n            </div>\n          ))\n        ) : (\n          <ds-text\n            class=\"card-action-center__empty\"\n            variant=\"text-body-medium\"\n            color=\"secondary\"\n            wrap=\"balance\"\n            as=\"p\"\n          >\n            {this.emptyMessage}\n          </ds-text>\n        )}\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

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

@@ -45,7 +45,8 @@
       "states": [
         "Custom mode provides flexible body chrome and does not mutate chart or legend interaction.",
         "Chart mode keeps a slotted external legend static by disabling hover emphasis.",
-        "showFilter adds the standard filter action and emits dsFilterClick without owning filter state."
+        "showFilter adds the standard filter action and emits dsFilterClick without owning filter state.",
+        "isLoading preserves card geometry, skeletonizes the heading and standard filter control, and replaces a chart canvas with one quiet placeholder. The owner supplies skeletons for custom body content and slotted actions."
       ],
       "responsiveBehavior": [
         "The sm, md, or lg width sets a matching token-based minimum height and remains constrained by its parent.",
@@ -132,6 +133,15 @@
           "mutable": false,
           "description": "Chart heading shown in the card header."
         },
+        "isLoading": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "is-loading",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Skeletonize the header and chart canvas; custom body content owns its loading atoms."
+        },
         "showFilter": {
           "type": "boolean",
           "resolvedType": "boolean",
@@ -190,6 +200,15 @@
         "mutable": false,
         "description": "Chart heading shown in the card header."
       },
+      "isLoading": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "is-loading",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Skeletonize the header and chart canvas; custom body content owns its loading atoms."
+      },
       "showFilter": {
         "type": "boolean",
         "resolvedType": "boolean",
@@ -248,8 +267,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."
       }
@@ -261,17 +280,18 @@
   ],
   "registryDependencies": [
     "button-unfilled",
+    "skeleton",
     "text"
   ],
   "files": [
     {
       "path": "src/wc/components/CardChart/CardChart.css",
-      "content": "@import '../../utils/radius.css';\n@import '../../utils/chrome-header.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: var(--_card-chart-width);\n  min-height: var(--_card-chart-min-height);\n  max-width: 100%;\n  overflow: visible;\n  border: none;\n  border-radius: var(--ds-radius-card);\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-shadow-elevated-sm);\n}\n\n:host::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  z-index: 4;\n  border-radius: inherit;\n  box-shadow: var(--effect-highlight-elevated-sm);\n  pointer-events: none;\n}\n\n.card-chart__header {\n  flex-shrink: 0;\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n.card-chart__copy {\n  align-items: center;\n}\n\nds-text.card-chart__title {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.card-chart__actions {\n  flex-shrink: 0;\n}\n\n.card-chart__actions:empty {\n  display: none;\n}\n\n.card-chart__body,\n.card-chart__layout {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  box-sizing: border-box;\n  min-height: 0;\n}\n\n.card-chart__body {\n  border-radius: 0 0 var(--ds-radius-card) var(--ds-radius-card);\n  background-color: var(--color-background-primary);\n}\n\n.card-chart__layout {\n  height: 100%;\n  gap: var(--dimension-space-200);\n}\n\n.card-chart__chart {\n  display: grid;\n  flex: 1 1 auto;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 0;\n  padding: var(--dimension-space-200) var(--dimension-space-200) 0 var(--dimension-space-200);\n}\n\n.card-chart__chart > * {\n  width: 100%;\n  min-width: 0;\n  max-width: 100%;\n}\n\n.card-chart__chart > ds-chart {\n  --ds-chart-container-height: 100%;\n}\n\n.card-chart__legend {\n  flex: 0 0 auto;\n  box-sizing: border-box;\n  padding: 0 var(--dimension-space-100) var(--dimension-space-100) var(--dimension-space-100);\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  :host::after {\n    box-shadow: none;\n  }\n}\n",
+      "content": "@import '../../utils/radius.css';\n@import '../../utils/chrome-header.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: var(--_card-chart-width);\n  min-height: var(--_card-chart-min-height);\n  max-width: 100%;\n  overflow: visible;\n  border: none;\n  border-radius: var(--ds-radius-card);\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-shadow-elevated-sm);\n}\n\n:host::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  z-index: 4;\n  border-radius: inherit;\n  box-shadow: var(--effect-highlight-elevated-sm);\n  pointer-events: none;\n}\n\n.card-chart__header {\n  flex-shrink: 0;\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n.card-chart__copy {\n  position: relative;\n  align-items: center;\n}\n\nds-text.card-chart__title {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.card-chart__actions {\n  flex-shrink: 0;\n}\n\n.card-chart__actions:empty {\n  display: none;\n}\n\n.card-chart__body,\n.card-chart__layout {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  box-sizing: border-box;\n  min-height: 0;\n}\n\n.card-chart__body {\n  border-radius: 0 0 var(--ds-radius-card) var(--ds-radius-card);\n  background-color: var(--color-background-primary);\n}\n\n.card-chart__layout {\n  height: 100%;\n  gap: var(--dimension-space-200);\n}\n\n.card-chart__chart {\n  position: relative;\n  display: grid;\n  flex: 1 1 auto;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 0;\n  padding: var(--dimension-space-200) var(--dimension-space-200) 0 var(--dimension-space-200);\n}\n\n.card-chart__chart > * {\n  width: 100%;\n  min-width: 0;\n  max-width: 100%;\n}\n\n.card-chart__chart > ds-chart {\n  --ds-chart-container-height: 100%;\n}\n\n.card-chart__legend {\n  position: relative;\n  flex: 0 0 auto;\n  box-sizing: border-box;\n  padding: 0 var(--dimension-space-100) var(--dimension-space-100) var(--dimension-space-100);\n}\n\n:host(.card-chart--loading) .card-chart__title,\n:host(.card-chart--loading) .card-chart__chart,\n:host(.card-chart--loading) .card-chart__legend {\n  visibility: hidden;\n}\n\n.card-chart__heading-skeleton {\n  position: absolute;\n  inset-inline-start: calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));\n  width: min(60%, calc(var(--dimension-size-800) * 2));\n}\n\n.card-chart__chart > .card-chart__plot-skeleton {\n  visibility: visible;\n  position: absolute;\n  inset: var(--dimension-space-200);\n  width: auto;\n  height: auto;\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  :host::after {\n    box-shadow: none;\n  }\n}\n\n.card-chart__legend-skeleton {\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-start: var(--dimension-space-100);\n  visibility: visible;\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/CardChart/CardChart.tsx",
-      "content": "import { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\n\nexport type CardChartWidth = 'sm' | 'md' | 'lg';\nexport type CardChartVariant = 'custom' | 'chart';\n\ntype LegendSlot = HTMLElement & {\n  activeLabel?: string | null;\n  highlightOnHover?: boolean;\n};\n\nconst CARD_WIDTH_VARS: Record<CardChartWidth, string> = {\n  sm: 'var(--dimension-card-width-sm)',\n  md: 'var(--dimension-card-width-md)',\n  lg: 'var(--dimension-card-width-lg)',\n};\n\nconst CARD_HEIGHT_VARS: Record<CardChartWidth, string> = {\n  sm: 'var(--dimension-card-height-sm)',\n  md: 'var(--dimension-card-height-md)',\n  lg: 'var(--dimension-card-height-lg)',\n};\n\n/**\n * Standard chart card chrome and composition. The variant owns\n * only the chart/legend relationship; applications continue to own data.\n */\n@Component({\n  tag: 'ds-card-chart',\n  styleUrl: 'CardChart.css',\n  scoped: true,\n})\nexport class CardChart {\n  @Element() el!: HTMLElement;\n\n  /** Chart heading shown in the card header. */\n  @Prop() heading!: string;\n  /** Chart composition behavior. */\n  @Prop() variant: CardChartVariant = 'custom';\n  /** Width token with the matching chart-card min-height. */\n  @Prop() cardWidth: CardChartWidth = 'md';\n  /** Renders the standard filter action before custom actions. */\n  @Prop() showFilter: boolean = false;\n  @Prop() filterLabel: string = 'Filter';\n\n  /** Emits when the standard header filter control is activated. */\n  @Event() dsFilterClick!: EventEmitter<void>;\n\n  @State() private hasChartSlot = false;\n  @State() private hasLegendSlot = false;\n\n  componentWillRender() {\n    this.hasChartSlot = !!this.el.querySelector('[slot=\"chart\"]');\n    this.hasLegendSlot = !!this.el.querySelector('[slot=\"legend\"]');\n  }\n\n  componentDidRender() {\n    const legend = this.el.querySelector('ds-chart-legend[slot=\"legend\"]') as LegendSlot | null;\n    if (this.variant === 'chart' && legend) {\n      legend.setAttribute('highlight-on-hover', 'false');\n      if ('highlightOnHover' in legend) legend.highlightOnHover = false;\n    }\n  }\n\n  private handleFilterClick = () => {\n    this.dsFilterClick.emit();\n  };\n\n  render() {\n    const usesChartLayout = this.variant !== 'custom' || this.hasChartSlot;\n    return (\n      <Host\n        class={{\n          'card-chart': true,\n          [`card-chart--${this.variant}`]: true,\n        }}\n        style={{\n          '--_card-chart-width': CARD_WIDTH_VARS[this.cardWidth],\n          '--_card-chart-min-height': CARD_HEIGHT_VARS[this.cardWidth],\n        }}\n      >\n        <header class=\"card-chart__header ds-chrome-header\">\n          {/* eslint-disable-next-line compomo/prefer-direct-ds-text -- Shared header copy owns the control-density geometry around the semantic heading. */}\n          <div class=\"card-chart__copy ds-chrome-header__copy ds-control--md\">\n            <ds-text\n              class=\"card-chart__title ds-chrome-header__heading\"\n              variant=\"text-title-small\"\n              emphasis\n              color=\"primary\"\n              as=\"h2\"\n            >\n              {this.heading}\n            </ds-text>\n          </div>\n          <div class=\"card-chart__actions ds-chrome-header__trailing\">\n            {this.showFilter ? (\n              <ds-button-unfilled\n                variant=\"icon\"\n                type=\"button\"\n                icon=\"Filters\"\n                aria-label={this.filterLabel}\n                onDsClick={this.handleFilterClick}\n              />\n            ) : null}\n            <slot name=\"actions\" />\n          </div>\n        </header>\n        <div class=\"card-chart__body\">\n          {usesChartLayout ? (\n            <div class=\"card-chart__layout\">\n              {this.hasChartSlot ? (\n                <div\n                  class={{\n                    'card-chart__chart': true,\n                  }}\n                >\n                  <slot name=\"chart\" />\n                </div>\n              ) : null}\n              {this.hasLegendSlot ? (\n                <div class=\"card-chart__legend\">\n                  <slot name=\"legend\" />\n                </div>\n              ) : null}\n              <slot />\n            </div>\n          ) : (\n            <slot />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\n\nexport type CardChartWidth = 'sm' | 'md' | 'lg';\nexport type CardChartVariant = 'custom' | 'chart';\n\ntype LegendSlot = HTMLElement & {\n  activeLabel?: string | null;\n  highlightOnHover?: boolean;\n};\n\nconst CARD_WIDTH_VARS: Record<CardChartWidth, string> = {\n  sm: 'var(--dimension-card-width-sm)',\n  md: 'var(--dimension-card-width-md)',\n  lg: 'var(--dimension-card-width-lg)',\n};\n\nconst CARD_HEIGHT_VARS: Record<CardChartWidth, string> = {\n  sm: 'var(--dimension-card-height-sm)',\n  md: 'var(--dimension-card-height-md)',\n  lg: 'var(--dimension-card-height-lg)',\n};\n\n/**\n * Standard chart card chrome and composition. The variant owns\n * only the chart/legend relationship; applications continue to own data.\n */\n@Component({\n  tag: 'ds-card-chart',\n  styleUrl: 'CardChart.css',\n  scoped: true,\n})\nexport class CardChart {\n  @Element() el!: HTMLElement;\n\n  /** Chart heading shown in the card header. */\n  @Prop() heading!: string;\n  /** Chart composition behavior. */\n  @Prop() variant: CardChartVariant = 'custom';\n  /** Width token with the matching chart-card min-height. */\n  @Prop() cardWidth: CardChartWidth = 'md';\n  /** Renders the standard filter action before custom actions. */\n  @Prop() showFilter: boolean = false;\n  @Prop() filterLabel: string = 'Filter';\n  /** Skeletonize the header and chart canvas; custom body content owns its loading atoms. */\n  @Prop() isLoading: boolean = false;\n\n  /** Emits when the standard header filter control is activated. */\n  @Event() dsFilterClick!: EventEmitter<void>;\n\n  @State() private hasChartSlot = false;\n  @State() private hasLegendSlot = false;\n\n  componentWillRender() {\n    this.hasChartSlot = !!this.el.querySelector('[slot=\"chart\"]');\n    this.hasLegendSlot = !!this.el.querySelector('[slot=\"legend\"]');\n  }\n\n  componentDidRender() {\n    const legend = this.el.querySelector('ds-chart-legend[slot=\"legend\"]') as LegendSlot | null;\n    if (this.variant === 'chart' && legend) {\n      legend.setAttribute('highlight-on-hover', 'false');\n      if ('highlightOnHover' in legend) legend.highlightOnHover = false;\n    }\n  }\n\n  private handleFilterClick = () => {\n    if (this.isLoading) return;\n    this.dsFilterClick.emit();\n  };\n\n  render() {\n    const usesChartLayout = this.variant !== 'custom' || this.hasChartSlot;\n    return (\n      <Host\n        class={{\n          'card-chart': true,\n          [`card-chart--${this.variant}`]: true,\n          'card-chart--loading': this.isLoading,\n        }}\n        aria-busy={this.isLoading ? 'true' : undefined}\n        style={{\n          '--_card-chart-width': CARD_WIDTH_VARS[this.cardWidth],\n          '--_card-chart-min-height': CARD_HEIGHT_VARS[this.cardWidth],\n        }}\n      >\n        <header class=\"card-chart__header ds-chrome-header\">\n          <div class=\"card-chart__copy ds-chrome-header__copy ds-control--md\">\n            <ds-text\n              class=\"card-chart__title ds-chrome-header__heading\"\n              variant=\"text-title-small\"\n              emphasis\n              color=\"primary\"\n              as=\"h2\"\n              aria-hidden={this.isLoading ? 'true' : undefined}\n            >\n              {this.heading}\n            </ds-text>\n            {this.isLoading && (\n              <ds-skeleton class=\"card-chart__heading-skeleton\" textVariant=\"text-title-small\" />\n            )}\n          </div>\n          <div class=\"card-chart__actions ds-chrome-header__trailing\">\n            {this.showFilter ? (\n              <ds-skeleton\n                preserveLayout\n                isLoading={this.isLoading}\n                variant=\"control\"\n                controlAppearance=\"outlined\"\n                controlContent=\"icon\"\n              >\n                <ds-button-unfilled\n                  variant=\"icon\"\n                  type=\"button\"\n                  icon=\"Filters\"\n                  aria-label={this.filterLabel}\n                  onDsClick={this.handleFilterClick}\n                />\n              </ds-skeleton>\n            ) : null}\n            <slot name=\"actions\" />\n          </div>\n        </header>\n        <div class=\"card-chart__body\">\n          {usesChartLayout ? (\n            <div class=\"card-chart__layout\">\n              {this.hasChartSlot || this.isLoading ? (\n                <div\n                  class={{\n                    'card-chart__chart': true,\n                  }}\n                >\n                  <slot name=\"chart\" />\n                  {this.isLoading && (\n                    <ds-skeleton class=\"card-chart__plot-skeleton\" variant=\"control\" />\n                  )}\n                </div>\n              ) : null}\n              {this.hasLegendSlot ? (\n                <div class=\"card-chart__legend\">\n                  <slot name=\"legend\" />\n                  {this.isLoading && (\n                    <ds-skeleton\n                      class=\"card-chart__legend-skeleton\"\n                      width=\"min(60%, calc(var(--dimension-size-800) * 2))\"\n                    />\n                  )}\n                </div>\n              ) : null}\n              <slot />\n            </div>\n          ) : (\n            <slot />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

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

@@ -52,7 +52,8 @@
         "In content mode, the native link owns those interaction states only across the header while the body remains application-owned.",
         "An empty or unsafe href renders non-interactive card chrome without a false keyboard target.",
         "Copy is always stacked, so a missing description keeps the heading at the start of the column instead of centering it in the header.",
-        "The application owns destination loading, authorization, not-found, and recovery states after navigation."
+        "The application owns destination loading, authorization, not-found, and recovery states after navigation.",
+        "isLoading preserves card geometry and copy wrapping while showing skeletons and preventing navigation."
       ],
       "responsiveBehavior": [
         "Choose sm, md, or lg from the parent layout; the surface never exceeds its parent width.",
@@ -155,6 +156,15 @@
           "mutable": false,
           "description": "Destination for the card's native link."
         },
+        "isLoading": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "is-loading",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Preserve the card layout while its copy and navigation affordance show skeletons."
+        },
         "variant": {
           "type": "CardNavigationVariant",
           "resolvedType": "\"content\" | \"navigation-only\"",
@@ -212,6 +222,15 @@
         "mutable": false,
         "description": "Destination for the card's native link."
       },
+      "isLoading": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "is-loading",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Preserve the card layout while its copy and navigation affordance show skeletons."
+      },
       "variant": {
         "type": "CardNavigationVariant",
         "resolvedType": "\"content\" | \"navigation-only\"",
@@ -261,8 +280,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."
       }
@@ -275,17 +294,18 @@
   ],
   "registryDependencies": [
     "icon",
+    "skeleton",
     "text"
   ],
   "files": [
     {
       "path": "src/wc/components/CardNavigation/CardNavigation.css",
-      "content": "@import '../../utils/radius.css';\n@import '../../utils/chrome-header.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: var(--_card-navigation-width);\n  max-width: 100%;\n  overflow: hidden;\n  border: none;\n  border-radius: var(--ds-radius-card);\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-shadow-elevated-sm);\n}\n\n:host(.card-navigation--content) {\n  min-height: var(--_card-navigation-min-height);\n}\n\n:host::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  z-index: 4;\n  border-radius: inherit;\n  box-shadow: var(--effect-highlight-elevated-sm);\n  pointer-events: none;\n}\n\n.card-navigation__target {\n  color: inherit;\n  text-decoration: none;\n  cursor: pointer;\n}\n\n.card-navigation__header {\n  flex: 0 0 auto;\n  align-items: flex-start;\n  border-radius: inherit;\n}\n\n:host(.card-navigation--content) .card-navigation__header {\n  border-radius: var(--ds-radius-card) var(--ds-radius-card) 0 0;\n  --ds-interaction-divider-width: var(--dimension-stroke-width-012);\n  --ds-interaction-divider-color: var(--color-border-tertiary);\n}\n\n.card-navigation__copy {\n  min-height: var(--dimension-size-400);\n  justify-content: flex-start;\n}\n\nds-text.card-navigation__title,\nds-text.card-navigation__description {\n  overflow-wrap: anywhere;\n}\n\n.card-navigation__chevron {\n  align-self: center;\n  justify-content: center;\n  width: var(--dimension-size-400);\n  color: var(--color-foreground-secondary);\n}\n\n.card-navigation__body {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  min-height: 0;\n  box-sizing: border-box;\n  background-color: var(--color-background-primary);\n  border-radius: 0 0 var(--ds-radius-card) var(--ds-radius-card);\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  :host::after {\n    box-shadow: none;\n  }\n}\n",
+      "content": "@import '../../utils/radius.css';\n@import '../../utils/chrome-header.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: var(--_card-navigation-width);\n  max-width: 100%;\n  overflow: hidden;\n  border: none;\n  border-radius: var(--ds-radius-card);\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-shadow-elevated-sm);\n}\n\n:host(.card-navigation--content) {\n  min-height: var(--_card-navigation-min-height);\n}\n\n:host::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  z-index: 4;\n  border-radius: inherit;\n  box-shadow: var(--effect-highlight-elevated-sm);\n  pointer-events: none;\n}\n\n.card-navigation__target {\n  color: inherit;\n  text-decoration: none;\n  cursor: pointer;\n}\n\n.card-navigation__header {\n  flex: 0 0 auto;\n  align-items: flex-start;\n  border-radius: inherit;\n}\n\n:host(.card-navigation--content) .card-navigation__header {\n  border-radius: var(--ds-radius-card) var(--ds-radius-card) 0 0;\n  --ds-interaction-divider-width: var(--dimension-stroke-width-012);\n  --ds-interaction-divider-color: var(--color-border-tertiary);\n}\n\n.card-navigation__copy {\n  min-height: var(--dimension-size-400);\n  justify-content: flex-start;\n}\n\n.card-navigation__line {\n  display: grid;\n  min-width: 0;\n  align-items: start;\n}\n\n.card-navigation__line > * {\n  grid-area: 1 / 1;\n}\n\n:host(.card-navigation--loading) ds-text {\n  visibility: hidden;\n}\n\nds-text.card-navigation__title,\nds-text.card-navigation__description {\n  overflow-wrap: anywhere;\n}\n\n.card-navigation__chevron {\n  align-self: center;\n  justify-content: center;\n  width: var(--dimension-size-400);\n  color: var(--color-foreground-secondary);\n}\n\n.card-navigation__body {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  min-height: 0;\n  box-sizing: border-box;\n  background-color: var(--color-background-primary);\n  border-radius: 0 0 var(--ds-radius-card) var(--ds-radius-card);\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  :host::after {\n    box-shadow: none;\n  }\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/CardNavigation/CardNavigation.tsx",
-      "content": "import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { resolveSafeUrl } from '../../utils';\n\nexport type CardNavigationWidth = 'sm' | 'md' | 'lg';\nexport type CardNavigationVariant = 'navigation-only' | 'content';\n\nexport interface CardNavigationDetail {\n  href: string;\n  originalEvent: MouseEvent;\n}\n\nconst CARD_WIDTH_VARS: Record<CardNavigationWidth, string> = {\n  sm: 'var(--dimension-card-width-sm)',\n  md: 'var(--dimension-card-width-md)',\n  lg: 'var(--dimension-card-width-lg)',\n};\n\nconst CARD_HEIGHT_VARS: Record<CardNavigationWidth, string> = {\n  sm: 'var(--dimension-card-height-sm)',\n  md: 'var(--dimension-card-height-md)',\n  lg: 'var(--dimension-card-height-lg)',\n};\n\n@Component({\n  tag: 'ds-card-navigation',\n  styleUrl: 'CardNavigation.css',\n  scoped: true,\n})\nexport class CardNavigation {\n  /** Destination for the card's native link. */\n  @Prop() href!: string;\n\n  /** Section or destination heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /** Optional supporting copy shown below the heading. */\n  @Prop() description: string | undefined;\n\n  /**\n   * `navigation-only` makes the complete card the link. `content` keeps the\n   * header as the link and exposes a non-interactive body slot below it.\n   */\n  @Prop() variant: CardNavigationVariant = 'navigation-only';\n\n  /** Card width token (`sm` / `md` / `lg`). */\n  @Prop() cardWidth: CardNavigationWidth = 'md';\n\n  /**\n   * Emits before native navigation. Prevent this event to take over routing;\n   * the component will then prevent the original link navigation.\n   */\n  @Event({ cancelable: true }) dsNavigate!: EventEmitter<CardNavigationDetail>;\n\n  private handleNavigation(href: string, originalEvent: MouseEvent) {\n    const navigateEvent = this.dsNavigate.emit({ href, originalEvent });\n    if (navigateEvent.defaultPrevented) originalEvent.preventDefault();\n  }\n\n  private renderHeader(href: string | undefined) {\n    const Target = href ? 'a' : 'div';\n    const description = this.description?.trim();\n\n    return (\n      <Target\n        class={{\n          'card-navigation__target': true,\n          'card-navigation__header': true,\n          'ds-chrome-header': true,\n          'ds-interaction-fill': !!href,\n          'ds-focus-ring-inset': !!href,\n        }}\n        href={href}\n        onClick={href ? (event: MouseEvent) => this.handleNavigation(href, event) : undefined}\n      >\n        <div\n          class={{\n            'card-navigation__copy': true,\n            'ds-chrome-header__copy': true,\n            'ds-chrome-header__copy--stacked': true,\n            'ds-control--md': true,\n            'ds-interaction-fill__content': true,\n          }}\n        >\n          <ds-text\n            class=\"card-navigation__title ds-chrome-header__heading\"\n            variant=\"text-title-small\"\n            emphasis\n            color=\"primary\"\n            as=\"h2\"\n          >\n            {this.heading}\n          </ds-text>\n          {description ? (\n            <ds-text\n              class=\"card-navigation__description ds-chrome-header__description\"\n              variant=\"text-body-small\"\n              color=\"secondary\"\n              as=\"span\"\n            >\n              {description}\n            </ds-text>\n          ) : null}\n        </div>\n        <span class=\"card-navigation__chevron ds-chrome-header__trailing ds-interaction-fill__content\">\n          <ds-icon name=\"ChevronRight\" size=\"md\" color=\"inherit\" aria-hidden=\"true\" />\n        </span>\n      </Target>\n    );\n  }\n\n  render() {\n    const href = resolveSafeUrl(this.href);\n    const hasContent = this.variant === 'content';\n\n    return (\n      <Host\n        class={{\n          'card-navigation': true,\n          'card-navigation--navigation-only': !hasContent,\n          'card-navigation--content': hasContent,\n        }}\n        style={{\n          '--_card-navigation-width': CARD_WIDTH_VARS[this.cardWidth],\n          '--_card-navigation-min-height': CARD_HEIGHT_VARS[this.cardWidth],\n        }}\n      >\n        {this.renderHeader(href)}\n        {hasContent ? (\n          <div class=\"card-navigation__body\">\n            <slot />\n          </div>\n        ) : null}\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { resolveSafeUrl } from '../../utils';\n\nexport type CardNavigationWidth = 'sm' | 'md' | 'lg';\nexport type CardNavigationVariant = 'navigation-only' | 'content';\n\nexport interface CardNavigationDetail {\n  href: string;\n  originalEvent: MouseEvent;\n}\n\nconst CARD_WIDTH_VARS: Record<CardNavigationWidth, string> = {\n  sm: 'var(--dimension-card-width-sm)',\n  md: 'var(--dimension-card-width-md)',\n  lg: 'var(--dimension-card-width-lg)',\n};\n\nconst CARD_HEIGHT_VARS: Record<CardNavigationWidth, string> = {\n  sm: 'var(--dimension-card-height-sm)',\n  md: 'var(--dimension-card-height-md)',\n  lg: 'var(--dimension-card-height-lg)',\n};\n\n@Component({\n  tag: 'ds-card-navigation',\n  styleUrl: 'CardNavigation.css',\n  scoped: true,\n})\nexport class CardNavigation {\n  /** Destination for the card's native link. */\n  @Prop() href!: string;\n\n  /** Section or destination heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /** Optional supporting copy shown below the heading. */\n  @Prop() description: string | undefined;\n  /** Preserve the card layout while its copy and navigation affordance show skeletons. */\n  @Prop() isLoading = false;\n\n  /**\n   * `navigation-only` makes the complete card the link. `content` keeps the\n   * header as the link and exposes a non-interactive body slot below it.\n   */\n  @Prop() variant: CardNavigationVariant = 'navigation-only';\n\n  /** Card width token (`sm` / `md` / `lg`). */\n  @Prop() cardWidth: CardNavigationWidth = 'md';\n\n  /**\n   * Emits before native navigation. Prevent this event to take over routing;\n   * the component will then prevent the original link navigation.\n   */\n  @Event({ cancelable: true }) dsNavigate!: EventEmitter<CardNavigationDetail>;\n\n  private handleNavigation(href: string, originalEvent: MouseEvent) {\n    const navigateEvent = this.dsNavigate.emit({ href, originalEvent });\n    if (navigateEvent.defaultPrevented) originalEvent.preventDefault();\n  }\n\n  private renderHeader(href: string | undefined) {\n    const Target = href ? 'a' : 'div';\n    const description = this.description?.trim();\n\n    return (\n      <Target\n        class={{\n          'card-navigation__target': true,\n          'card-navigation__header': true,\n          'ds-chrome-header': true,\n          'ds-interaction-fill': !!href,\n          'ds-focus-ring-inset': !!href,\n        }}\n        href={href}\n        inert={this.isLoading}\n        onClick={href ? (event: MouseEvent) => this.handleNavigation(href, event) : undefined}\n      >\n        <div\n          class={{\n            'card-navigation__copy': true,\n            'ds-chrome-header__copy': true,\n            'ds-chrome-header__copy--stacked': true,\n            'ds-control--md': true,\n            'ds-interaction-fill__content': true,\n          }}\n        >\n          <div class=\"card-navigation__line\">\n            <ds-text\n              class=\"card-navigation__title ds-chrome-header__heading\"\n              variant=\"text-title-small\"\n              emphasis\n              color=\"primary\"\n              as=\"h2\"\n            >\n              {this.heading}\n            </ds-text>\n            {this.isLoading && (\n              <ds-skeleton\n                width=\"min(60%, calc(var(--dimension-size-800) * 2))\"\n                textVariant=\"text-title-small\"\n              />\n            )}\n          </div>\n          {description ? (\n            <div class=\"card-navigation__line\">\n              <ds-text\n                class=\"card-navigation__description ds-chrome-header__description\"\n                variant=\"text-body-small\"\n                color=\"secondary\"\n                as=\"span\"\n              >\n                {description}\n              </ds-text>\n              {this.isLoading && <ds-skeleton width=\"95%\" textVariant=\"text-body-small\" />}\n            </div>\n          ) : null}\n        </div>\n        <span class=\"card-navigation__chevron ds-chrome-header__trailing ds-interaction-fill__content\">\n          {this.isLoading ? (\n            <ds-skeleton variant=\"icon\" iconSize=\"md\" />\n          ) : (\n            <ds-icon name=\"ChevronRight\" size=\"md\" color=\"inherit\" aria-hidden=\"true\" />\n          )}\n        </span>\n      </Target>\n    );\n  }\n\n  render() {\n    const href = this.isLoading ? undefined : resolveSafeUrl(this.href);\n    const hasContent = this.variant === 'content';\n\n    return (\n      <Host\n        aria-busy={this.isLoading ? 'true' : undefined}\n        class={{\n          'card-navigation': true,\n          'card-navigation--loading': this.isLoading,\n          'card-navigation--navigation-only': !hasContent,\n          'card-navigation--content': hasContent,\n        }}\n        style={{\n          '--_card-navigation-width': CARD_WIDTH_VARS[this.cardWidth],\n          '--_card-navigation-min-height': CARD_HEIGHT_VARS[this.cardWidth],\n        }}\n      >\n        {this.renderHeader(href)}\n        {hasContent ? (\n          <div class=\"card-navigation__body\">\n            <slot />\n          </div>\n        ) : null}\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]