@ds-mo/ui 15.11.1 → 15.12.0

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

@@ -56,7 +56,7 @@
         "Trend is supplied already resolved as a direction, a formatted value, and a tone. Whether a rise reads well is a product decision, so the component never infers tone from the numbers. Derive it with resolveMetricTrend.",
         "Omit a trend when there is nothing to report; resolveMetricTrend returns null in that case so no zero change is rendered.",
         "Omit score to render a centered Score unavailable cell with a tertiary border and no score fill. Set scoreErrorMessage to replace that copy while the measures remain readable.",
-        "Loading replaces the score and measures with skeletons and does not alter the slotted period control. Score loading replaces only the fill figure; the overview still skeletons the score-copy spacer and trend. When measures are already supplied, their count preserves the resolved grid shape; otherwise five measure placeholders join the score in the standard six-cell grid.",
+        "Loading replaces the score, measures, and fixed period copy with skeletons. The owner supplies loading atoms for slotted controls. Score loading replaces only the fill figure; the overview still skeletons the score-copy spacer and trend. When measures are already supplied, their count preserves the resolved grid shape; otherwise five measure placeholders join the score in the standard six-cell grid.",
         "At most seven measures are shown. Keep larger collections outside the summary bar rather than turning it into a dense dashboard.",
         "The period and filter controls are slotted rather than owned. Use the period slot when the current range is selectable; otherwise periodLabel supplies fixed current copy in the same md control-frame and label-inset anatomy. Use the filter slot for the application-owned comparison-window control. Slotted Selects use hasBorder false so the 48px bar owns their surrounding boundary and allowClear false because both controls always require one selected reporting period.",
         "A numeric safety score infers fair from 0–50, good from 51–80, and excellent from 81–100. The level can be supplied explicitly when the displayed value is not numeric. The deprecated band field is ignored.",
@@ -376,8 +376,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: metrics, score.",
       "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."
       }
@@ -401,7 +401,7 @@
     },
     {
       "path": "src/wc/components/CardOverview/CardOverview.tsx",
-      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  forceUpdate,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { resolveCssLengthPx, TOKEN_DEFAULTS } from '../../utils';\nimport { ConnectionTasks } from '../../utils/connection-tasks';\nimport type { TextColor, TextVariant } from '../Text/text-types';\nimport type { MetricTrend } from '../../utils/metric-change';\nimport type {\n  CardOverviewLayout,\n  CardOverviewVariant,\n  OverviewMetric,\n  OverviewScore,\n} from './card-overview-types';\nimport {\n  findNextOverviewMetricIndex,\n  resolveCardOverviewCollapseGeometry,\n  resolveOverviewGridColumns,\n  resolveOverviewRovingIndex,\n} from './card-overview-controller';\n\n/**\n * Metric cells below this width drop a grid column rather than compress further.\n *\n * A literal rather than a token: this is a layout threshold for a grid cell, and\n * the dimension scale has no token for that. The 200px tokens it could borrow\n * (`menu-width-xs`, `form-width-xs`, `panel-width-2xs`) all name other\n * components, so binding to one would couple this grid to an unrelated contract.\n * Consumers override with the `metricMinWidth` prop.\n */\nconst DEFAULT_METRIC_MIN_WIDTH = '200px';\n\n/** Skeleton cells rendered while loading with no metrics supplied yet. */\nconst DEFAULT_LOADING_METRIC_COUNT = 5;\n\n/** Maximum number of comparable measures the summary bar presents at once. */\nconst MAX_METRIC_COUNT = 7;\n\nconst TREND_COLORS: Record<MetricTrend['tone'], TextColor> = {\n  positive: 'var(--color-always-dark-foreground-positive)',\n  negative: 'var(--color-always-dark-foreground-negative)',\n  neutral: 'var(--color-always-dark-foreground-secondary)',\n};\n\nconst ALWAYS_DARK_PRIMARY: TextColor = 'var(--color-always-dark-foreground-primary)';\nconst ALWAYS_DARK_SECONDARY: TextColor = 'var(--color-always-dark-foreground-secondary)';\n\n@Component({\n  tag: 'ds-card-overview',\n  styleUrl: 'CardOverview.css',\n  scoped: true,\n})\nexport class CardOverview {\n  @Element() el!: HTMLElement;\n\n  /** Full summary card, or the condensed 48px summary bar. */\n  @Prop() variant: CardOverviewVariant = 'default';\n\n  /** Intrinsic responsive layout, or a page-owned single-column stack. */\n  @Prop() layout: CardOverviewLayout = 'auto';\n\n  /** Optional nonselectable safety score rendered as the first grid cell. */\n  @Prop() score: OverviewScore | undefined;\n\n  /** Fixed current date or range. Replaced by content in the `period` slot. */\n  @Prop() periodLabel: string = '';\n\n  /** Copy between the current period and comparison control, usually `vs.`. */\n  @Prop() comparisonLabel: string = '';\n\n  /** Measures rendered in the responsive grid. Only the first seven are shown. */\n  @Prop() metrics: OverviewMetric[] = [];\n\n  /**\n   * Width a metric cell may shrink to before the grid drops a column. The grid\n   * uses this threshold while choosing an evenly distributed column count.\n   */\n  @Prop() metricMinWidth: string = DEFAULT_METRIC_MIN_WIDTH;\n\n  /** Replace the score and metrics with skeletons while data resolves. */\n  @Prop() isLoading: boolean = false;\n\n  /** Message shown in place of the score when its figure cannot be resolved. */\n  @Prop() scoreErrorMessage: string | undefined;\n\n  /** Accessible name for the region. */\n  @Prop() overviewLabel: string = 'Overview';\n\n  /**\n   * Page-controlled visual collapse from the full card (`0`) toward its 48px\n   * compact handoff height (`1`). The component preserves its expanded flow\n   * height, keeps the period bar stationary, and moves/clips the grid beneath\n   * it. The page still owns sticky positioning and the final compact handoff.\n   */\n  @Prop() scrollCollapseProgress: number = 0;\n\n  /** Emitted when a metric that is not inactive is activated. */\n  @Event() dsMetricSelect!: EventEmitter<OverviewMetric>;\n\n  /** Roving tab stop across selectable metrics. */\n  @State() private focusedMetricIndex: number = 0;\n  @State() private expandedHeight: number = 0;\n  @State() private gridColumns: number | undefined;\n\n  private layoutEl?: HTMLElement;\n  private layoutResizeObserver: ResizeObserver | null = null;\n  private layoutResizeFrame: number | undefined;\n  private hasLoaded = false;\n  private readonly connectionTasks = new ConnectionTasks(() => this.el.isConnected);\n  /** The node the observer is bound to, which a later render can replace. */\n  private observedLayoutEl?: HTMLElement;\n\n  connectedCallback() {\n    if (this.hasLoaded) this.observeLayout();\n  }\n\n  componentDidLoad() {\n    this.hasLoaded = true;\n    this.observeLayout();\n  }\n\n  componentDidRender() {\n    if (!this.el.isConnected) return;\n    // Re-bind after HMR when DidLoad's observer was dropped, and whenever a\n    // render swapped the layout node out from under the observer: the ref points\n    // at the new node while the observer still watches the detached one, which\n    // never resizes again. The grid would then keep its first measured column\n    // count for the life of the component.\n    if (!this.layoutResizeObserver || this.observedLayoutEl !== this.layoutEl) {\n      this.observeLayout();\n    } else {\n      this.updateLayoutGeometry();\n    }\n  }\n\n  disconnectedCallback() {\n    this.connectionTasks.cancel();\n    this.layoutResizeObserver?.disconnect();\n    this.layoutResizeObserver = null;\n    this.layoutResizeFrame = undefined;\n    this.observedLayoutEl = undefined;\n  }\n\n  private get visibleMetrics(): OverviewMetric[] {\n    return this.metrics.slice(0, MAX_METRIC_COUNT);\n  }\n\n  private get visibleCellCount(): number {\n    const metricCount = this.isLoading ? this.loadingMetricCount : this.visibleMetrics.length;\n    return 1 + metricCount;\n  }\n\n  /** Preserve an authored data shape while loading, or use the standard six-cell grid. */\n  private get loadingMetricCount(): number {\n    return this.visibleMetrics.length || DEFAULT_LOADING_METRIC_COUNT;\n  }\n\n  private get resolvedScrollCollapseProgress(): number {\n    if (this.variant === 'compact' || !Number.isFinite(this.scrollCollapseProgress)) return 0;\n    return Math.min(1, Math.max(0, this.scrollCollapseProgress));\n  }\n\n  private get scrollCollapseGeometry() {\n    const compactHeight = resolveCssLengthPx(TOKEN_DEFAULTS.size600, 48);\n    return resolveCardOverviewCollapseGeometry({\n      variant: this.variant,\n      progress: this.resolvedScrollCollapseProgress,\n      expandedHeight: this.expandedHeight,\n      compactHeight,\n    });\n  }\n\n  private observeLayout() {\n    const layout = this.layoutEl;\n    if (!this.el.isConnected || !layout) return;\n\n    this.connectionTasks.cancelFrame(this.layoutResizeFrame);\n    this.layoutResizeFrame = undefined;\n\n    const bounds = layout.getBoundingClientRect();\n    this.updateLayoutGeometry(bounds.width, bounds.height);\n    if (typeof ResizeObserver === 'undefined') return;\n\n    this.layoutResizeObserver?.disconnect();\n    this.layoutResizeObserver = new ResizeObserver(entries => {\n      const rect = entries[0]?.contentRect;\n      if (!rect) return;\n      this.connectionTasks.cancelFrame(this.layoutResizeFrame);\n      this.layoutResizeFrame = this.connectionTasks.frame(() => {\n        this.layoutResizeFrame = undefined;\n        if (this.layoutEl !== layout) return;\n        this.updateLayoutGeometry(rect.width, rect.height);\n      });\n    });\n    this.layoutResizeObserver.observe(layout);\n    this.observedLayoutEl = layout;\n  }\n\n  private updateLayoutGeometry(width?: number, height?: number) {\n    const layout = this.layoutEl;\n    if (!this.el.isConnected || !layout) return;\n\n    const bounds =\n      width === undefined || height === undefined ? layout.getBoundingClientRect() : null;\n    const resolvedWidth = width ?? bounds?.width ?? 0;\n    const resolvedHeight = height ?? bounds?.height ?? 0;\n\n    let changed = false;\n\n    if (resolvedHeight > 0 && Math.abs(resolvedHeight - this.expandedHeight) >= 0.5) {\n      this.expandedHeight = resolvedHeight;\n      changed = true;\n    }\n\n    const columns = resolveOverviewGridColumns({\n      cellCount: this.visibleCellCount,\n      availableWidth: resolvedWidth,\n      minCellWidth: resolveCssLengthPx(this.metricMinWidth, DEFAULT_METRIC_MIN_WIDTH),\n    });\n    if (columns !== this.gridColumns) {\n      this.gridColumns = columns;\n      changed = true;\n    }\n\n    // The column count is written straight to the host rather than through the\n    // rendered style object. Measurement happens in `componentDidLoad` and in the\n    // ResizeObserver callback, both outside a render cycle, and the host's style\n    // is not patched again after the first render — so a rendered value would stay\n    // pinned to whatever the first paint produced, before any width was known.\n    if (this.gridColumns) {\n      this.el.style.setProperty('--ds-card-overview-grid-columns', String(this.gridColumns));\n    } else {\n      this.el.style.removeProperty('--ds-card-overview-grid-columns');\n    }\n\n    if (changed) forceUpdate(this);\n  }\n\n  /** Index of the roving tab stop, skipping inactive metrics. */\n  private get rovingIndex(): number {\n    return resolveOverviewRovingIndex(this.visibleMetrics, this.focusedMetricIndex);\n  }\n\n  private selectMetric(metric: OverviewMetric, index: number) {\n    if (metric.isInactive) return;\n    this.focusedMetricIndex = index;\n    this.dsMetricSelect.emit(metric);\n  }\n\n  /** Move the roving tab stop, wrapping and skipping inactive metrics. */\n  private moveFocus(from: number, step: number) {\n    const metrics = this.visibleMetrics;\n    const next = findNextOverviewMetricIndex(metrics, from, step < 0 ? -1 : 1);\n    if (next < 0) return;\n\n    this.focusedMetricIndex = next;\n    const cells = this.el.querySelectorAll<HTMLElement>('.card-overview__metric-action');\n    cells[next]?.focus();\n  }\n\n  private handleMetricKeyDown = (event: KeyboardEvent, index: number) => {\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        event.preventDefault();\n        this.moveFocus(index, 1);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        event.preventDefault();\n        this.moveFocus(index, -1);\n        break;\n      default:\n        break;\n    }\n  };\n\n  /**\n   * A skeleton bar matching the type metrics of the text it stands in for, so the\n   * loading state holds the same shape and rhythm as the resolved content.\n   *\n   * `background` is always passed so the base and shimmer follow the card's\n   * permanently dark surface in both themes.\n   */\n  private bar(textVariant: TextVariant, width: string, className?: string) {\n    return (\n      <ds-skeleton\n        class={className}\n        variant=\"text\"\n        textVariant={textVariant}\n        width={width}\n        background=\"always-dark\"\n      />\n    );\n  }\n\n  /**\n   * Arrow and change in one text node.\n   *\n   * The arrow is a typeface glyph rather than an icon so it inherits the exact\n   * size, weight, and baseline of the value beside it; an icon would need its\n   * own size scale and would drift whenever the type scale changed.\n   *\n   * Tone is supplied by the caller and never inferred here.\n   */\n  private renderTrend(trend: MetricTrend | undefined, variant: TextVariant) {\n    if (!trend) return null;\n    return (\n      <ds-text\n        as=\"span\"\n        class={{\n          'card-overview__trend': true,\n          'ds-control-label-box': true,\n          [`card-overview__trend--${trend.tone}`]: true,\n        }}\n        variant={variant}\n        color={TREND_COLORS[trend.tone]}\n        fontFeature=\"tabular-nums\"\n      >\n        {trend.direction === 'up' ? '↑' : '↓'} {trend.value}\n      </ds-text>\n    );\n  }\n\n  private renderScore() {\n    if (this.isLoading) {\n      return (\n        <div class=\"card-overview__score\" part=\"score\">\n          <div class=\"card-overview__score-content\">\n            <ds-score size=\"lg\" variant=\"dense\" isLoading></ds-score>\n            <div class=\"card-overview__score-copy\">\n              {this.bar(\n                'text-body-small',\n                'var(--dimension-size-800)',\n                'card-overview__score-label-spacer'\n              )}\n              {this.bar(\n                'text-body-medium',\n                'calc(var(--dimension-size-300) + var(--dimension-space-050))'\n              )}\n            </div>\n          </div>\n        </div>\n      );\n    }\n\n    const unavailableMessage =\n      this.scoreErrorMessage || (!this.score ? 'Score unavailable' : undefined);\n    if (unavailableMessage) {\n      return (\n        /* eslint-disable-next-line compomo/prefer-direct-ds-text -- The score track owns the grid divider and 8px outer inset. */\n        <div class=\"card-overview__score\" part=\"score\">\n          <ds-text\n            as=\"span\"\n            class=\"card-overview__score-content card-overview__score-content--error\"\n            variant=\"text-body-medium\"\n            color=\"inherit\"\n            role=\"alert\"\n          >\n            {unavailableMessage}\n          </ds-text>\n        </div>\n      );\n    }\n\n    const score = this.score;\n    if (!score) return null;\n\n    return (\n      <div class=\"card-overview__score\" part=\"score\">\n        <div class=\"card-overview__score-content\">\n          <ds-score\n            size=\"lg\"\n            variant=\"dense\"\n            value={score.value}\n            level={score.level}\n            label=\"Safety score\"\n          />\n          <div class=\"card-overview__score-copy\">\n            <ds-text\n              as=\"span\"\n              class=\"card-overview__score-label-spacer ds-control-label-box\"\n              variant=\"text-body-small\"\n              color={ALWAYS_DARK_SECONDARY}\n              aria-hidden=\"true\"\n            >\n              &nbsp;\n            </ds-text>\n            {this.renderTrend(score.trend, 'text-body-medium')}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  private renderMetric(metric: OverviewMetric, index: number) {\n    const selectable = !metric.isInactive;\n    const label = (\n      <ds-text\n        as=\"span\"\n        class=\"card-overview__metric-label ds-control-label-box\"\n        variant=\"text-body-small\"\n        color={ALWAYS_DARK_SECONDARY}\n        wrap=\"nowrap\"\n      >\n        {metric.label}\n      </ds-text>\n    );\n\n    return (\n      <div class=\"card-overview__metric\" part=\"metric\">\n        <div\n          class={{\n            'card-overview__metric-action': true,\n            'card-overview__metric-action--inactive': !selectable,\n            // Selection targets get the shared wash; press scaling is not used here\n            // so the grid keeps its columns aligned. See docs/control-press-policy.md.\n            'ds-interaction-fill': selectable,\n            'ds-interaction-fill--on-always-dark': selectable,\n            'ds-focus-ring-inset': selectable,\n          }}\n          role={selectable ? 'button' : undefined}\n          tabIndex={selectable && index === this.rovingIndex ? 0 : -1}\n          onClick={() => this.selectMetric(metric, index)}\n          onKeyDown={event => this.handleMetricKeyDown(event, index)}\n          onFocusin={() => {\n            if (selectable) this.focusedMetricIndex = index;\n          }}\n        >\n          <div class=\"ds-interaction-fill__content card-overview__metric-content\">\n            {metric.labelTooltip ? (\n              <ds-tooltip label={metric.labelTooltip} side=\"top\" size=\"sm\">\n                {label}\n              </ds-tooltip>\n            ) : (\n              label\n            )}\n            <div class=\"card-overview__metric-figure\">\n              <ds-text\n                as=\"span\"\n                class=\"card-overview__metric-value ds-control-label-box\"\n                variant=\"text-body-medium\"\n                color={ALWAYS_DARK_PRIMARY}\n                wrap=\"nowrap\"\n                fontFeature=\"tabular-nums\"\n              >\n                {metric.value}\n              </ds-text>\n              {this.renderTrend(metric.trend, 'text-body-medium')}\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  private renderMetrics() {\n    if (this.isLoading) {\n      return [\n        this.renderScore(),\n        ...Array.from({ length: this.loadingMetricCount }, (_, index) => (\n          <div class=\"card-overview__metric\" key={`loading-${index}`}>\n            <div class=\"card-overview__metric-action card-overview__metric-action--inactive\">\n              <div class=\"card-overview__metric-content\">\n                {this.bar('text-body-small', '35%', 'card-overview__metric-label')}\n                <div class=\"card-overview__metric-figure\">\n                  {this.bar('text-body-medium', 'var(--dimension-size-500)')}\n                  {/* Match renderTrend's type canvas and the score trend's 28px width. */}\n                  {this.bar(\n                    'text-body-medium',\n                    'calc(var(--dimension-size-300) + var(--dimension-space-050))'\n                  )}\n                </div>\n              </div>\n            </div>\n          </div>\n        )),\n      ];\n    }\n\n    return [\n      this.renderScore(),\n      ...this.visibleMetrics.map((metric, index) => this.renderMetric(metric, index)),\n    ];\n  }\n\n  render() {\n    const compact = this.variant === 'compact';\n    const collapse = this.scrollCollapseGeometry;\n\n    // Omit absent custom properties rather than handing them an undefined value.\n    // Stencil serialises undefined to the string \"undefined\", which is invalid in\n    // `repeat()` and voids the whole grid-template-columns declaration — the grid\n    // then collapses to one implicit column instead of using the `auto-fit`\n    // fallback baked into the stylesheet.\n    const customProperties: Record<string, string> = {\n      '--ds-card-overview-metric-min': this.metricMinWidth,\n    };\n    if (this.gridColumns) {\n      customProperties['--ds-card-overview-grid-columns'] = String(this.gridColumns);\n    }\n    if (collapse.active) {\n      customProperties['--ds-card-overview-expanded-height'] = `${collapse.expandedHeight}px`;\n      customProperties['--ds-card-overview-visible-height'] = `${collapse.visibleHeight}px`;\n      customProperties['--ds-card-overview-content-offset'] = `${collapse.offset}px`;\n    }\n\n    return (\n      <Host\n        class={{\n          'card-overview': true,\n          'card-overview--compact': compact,\n          'card-overview--stacked': !compact && this.layout === 'stacked',\n          'card-overview--scroll-collapsing': collapse.active,\n        }}\n        role=\"region\"\n        aria-label={this.overviewLabel}\n        aria-busy={this.isLoading ? 'true' : undefined}\n        style={customProperties}\n      >\n        <div\n          class={{\n            'card-overview__surface': true,\n            // Split shadow and inset highlight, so the opaque surface cannot cover\n            // the highlight the way a combined elevation shadow would.\n            'ds-control-elevation': true,\n            'ds-control-elevation--sm': !compact,\n            'ds-control-elevation--floating': compact,\n          }}\n        >\n          <div class=\"card-overview__clip\">\n            <div\n              ref={element => {\n                this.layoutEl = (element as HTMLElement) ?? undefined;\n              }}\n              class={{\n                'card-overview__layout': true,\n              }}\n            >\n              <div class=\"card-overview__summary\">\n                <div class=\"card-overview__header ds-control--md\">\n                  <div class=\"card-overview__period\">\n                    <div class=\"card-overview__period-current\">\n                      <slot name=\"period\">\n                        {this.periodLabel && (\n                          /* eslint-disable-next-line compomo/prefer-direct-ds-text -- Fixed copy uses the same structural frame and label inset as a slotted Select. */\n                          <div class=\"card-overview__period-fixed ds-control-frame\">\n                            <ds-text\n                              as=\"span\"\n                              class=\"ds-control-label-box\"\n                              variant=\"text-body-medium\"\n                              emphasis\n                              color={ALWAYS_DARK_PRIMARY}\n                            >\n                              {this.periodLabel}\n                            </ds-text>\n                          </div>\n                        )}\n                      </slot>\n                    </div>\n                    {this.comparisonLabel && (\n                      <ds-text\n                        as=\"span\"\n                        class=\"card-overview__period-comparison ds-control-label-box\"\n                        variant=\"text-body-medium\"\n                        color={ALWAYS_DARK_SECONDARY}\n                      >\n                        {this.comparisonLabel}\n                      </ds-text>\n                    )}\n                  </div>\n                  <div class=\"card-overview__filter\">\n                    <slot name=\"filter\" />\n                  </div>\n                </div>\n              </div>\n\n              {!compact && (\n                <div class=\"card-overview__body\">\n                  <div class=\"card-overview__metrics\" part=\"metrics\">\n                    {this.renderMetrics()}\n                  </div>\n\n                  <slot name=\"footer\" />\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  forceUpdate,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { resolveCssLengthPx, TOKEN_DEFAULTS } from '../../utils';\nimport { ConnectionTasks } from '../../utils/connection-tasks';\nimport type { TextColor, TextVariant } from '../Text/text-types';\nimport type { MetricTrend } from '../../utils/metric-change';\nimport type {\n  CardOverviewLayout,\n  CardOverviewVariant,\n  OverviewMetric,\n  OverviewScore,\n} from './card-overview-types';\nimport {\n  findNextOverviewMetricIndex,\n  resolveCardOverviewCollapseGeometry,\n  resolveOverviewGridColumns,\n  resolveOverviewRovingIndex,\n} from './card-overview-controller';\n\n/**\n * Metric cells below this width drop a grid column rather than compress further.\n *\n * A literal rather than a token: this is a layout threshold for a grid cell, and\n * the dimension scale has no token for that. The 200px tokens it could borrow\n * (`menu-width-xs`, `form-width-xs`, `panel-width-2xs`) all name other\n * components, so binding to one would couple this grid to an unrelated contract.\n * Consumers override with the `metricMinWidth` prop.\n */\nconst DEFAULT_METRIC_MIN_WIDTH = '200px';\n\n/** Skeleton cells rendered while loading with no metrics supplied yet. */\nconst DEFAULT_LOADING_METRIC_COUNT = 5;\n\n/** Maximum number of comparable measures the summary bar presents at once. */\nconst MAX_METRIC_COUNT = 7;\n\nconst TREND_COLORS: Record<MetricTrend['tone'], TextColor> = {\n  positive: 'var(--color-always-dark-foreground-positive)',\n  negative: 'var(--color-always-dark-foreground-negative)',\n  neutral: 'var(--color-always-dark-foreground-secondary)',\n};\n\nconst ALWAYS_DARK_PRIMARY: TextColor = 'var(--color-always-dark-foreground-primary)';\nconst ALWAYS_DARK_SECONDARY: TextColor = 'var(--color-always-dark-foreground-secondary)';\n\n@Component({\n  tag: 'ds-card-overview',\n  styleUrl: 'CardOverview.css',\n  scoped: true,\n})\nexport class CardOverview {\n  @Element() el!: HTMLElement;\n\n  /** Full summary card, or the condensed 48px summary bar. */\n  @Prop() variant: CardOverviewVariant = 'default';\n\n  /** Intrinsic responsive layout, or a page-owned single-column stack. */\n  @Prop() layout: CardOverviewLayout = 'auto';\n\n  /** Optional nonselectable safety score rendered as the first grid cell. */\n  @Prop() score: OverviewScore | undefined;\n\n  /** Fixed current date or range. Replaced by content in the `period` slot. */\n  @Prop() periodLabel: string = '';\n\n  /** Copy between the current period and comparison control, usually `vs.`. */\n  @Prop() comparisonLabel: string = '';\n\n  /** Measures rendered in the responsive grid. Only the first seven are shown. */\n  @Prop() metrics: OverviewMetric[] = [];\n\n  /**\n   * Width a metric cell may shrink to before the grid drops a column. The grid\n   * uses this threshold while choosing an evenly distributed column count.\n   */\n  @Prop() metricMinWidth: string = DEFAULT_METRIC_MIN_WIDTH;\n\n  /** Replace the score and metrics with skeletons while data resolves. */\n  @Prop() isLoading: boolean = false;\n\n  /** Message shown in place of the score when its figure cannot be resolved. */\n  @Prop() scoreErrorMessage: string | undefined;\n\n  /** Accessible name for the region. */\n  @Prop() overviewLabel: string = 'Overview';\n\n  /**\n   * Page-controlled visual collapse from the full card (`0`) toward its 48px\n   * compact handoff height (`1`). The component preserves its expanded flow\n   * height, keeps the period bar stationary, and moves/clips the grid beneath\n   * it. The page still owns sticky positioning and the final compact handoff.\n   */\n  @Prop() scrollCollapseProgress: number = 0;\n\n  /** Emitted when a metric that is not inactive is activated. */\n  @Event() dsMetricSelect!: EventEmitter<OverviewMetric>;\n\n  /** Roving tab stop across selectable metrics. */\n  @State() private focusedMetricIndex: number = 0;\n  @State() private expandedHeight: number = 0;\n  @State() private gridColumns: number | undefined;\n\n  private layoutEl?: HTMLElement;\n  private layoutResizeObserver: ResizeObserver | null = null;\n  private layoutResizeFrame: number | undefined;\n  private hasLoaded = false;\n  private readonly connectionTasks = new ConnectionTasks(() => this.el.isConnected);\n  /** The node the observer is bound to, which a later render can replace. */\n  private observedLayoutEl?: HTMLElement;\n\n  connectedCallback() {\n    if (this.hasLoaded) this.observeLayout();\n  }\n\n  componentDidLoad() {\n    this.hasLoaded = true;\n    this.observeLayout();\n  }\n\n  componentDidRender() {\n    if (!this.el.isConnected) return;\n    // Re-bind after HMR when DidLoad's observer was dropped, and whenever a\n    // render swapped the layout node out from under the observer: the ref points\n    // at the new node while the observer still watches the detached one, which\n    // never resizes again. The grid would then keep its first measured column\n    // count for the life of the component.\n    if (!this.layoutResizeObserver || this.observedLayoutEl !== this.layoutEl) {\n      this.observeLayout();\n    } else {\n      this.updateLayoutGeometry();\n    }\n  }\n\n  disconnectedCallback() {\n    this.connectionTasks.cancel();\n    this.layoutResizeObserver?.disconnect();\n    this.layoutResizeObserver = null;\n    this.layoutResizeFrame = undefined;\n    this.observedLayoutEl = undefined;\n  }\n\n  private get visibleMetrics(): OverviewMetric[] {\n    return this.metrics.slice(0, MAX_METRIC_COUNT);\n  }\n\n  private get visibleCellCount(): number {\n    const metricCount = this.isLoading ? this.loadingMetricCount : this.visibleMetrics.length;\n    return 1 + metricCount;\n  }\n\n  /** Preserve an authored data shape while loading, or use the standard six-cell grid. */\n  private get loadingMetricCount(): number {\n    return this.visibleMetrics.length || DEFAULT_LOADING_METRIC_COUNT;\n  }\n\n  private get resolvedScrollCollapseProgress(): number {\n    if (this.variant === 'compact' || !Number.isFinite(this.scrollCollapseProgress)) return 0;\n    return Math.min(1, Math.max(0, this.scrollCollapseProgress));\n  }\n\n  private get scrollCollapseGeometry() {\n    const compactHeight = resolveCssLengthPx(TOKEN_DEFAULTS.size600, 48);\n    return resolveCardOverviewCollapseGeometry({\n      variant: this.variant,\n      progress: this.resolvedScrollCollapseProgress,\n      expandedHeight: this.expandedHeight,\n      compactHeight,\n    });\n  }\n\n  private observeLayout() {\n    const layout = this.layoutEl;\n    if (!this.el.isConnected || !layout) return;\n\n    this.connectionTasks.cancelFrame(this.layoutResizeFrame);\n    this.layoutResizeFrame = undefined;\n\n    const bounds = layout.getBoundingClientRect();\n    this.updateLayoutGeometry(bounds.width, bounds.height);\n    if (typeof ResizeObserver === 'undefined') return;\n\n    this.layoutResizeObserver?.disconnect();\n    this.layoutResizeObserver = new ResizeObserver(entries => {\n      const rect = entries[0]?.contentRect;\n      if (!rect) return;\n      this.connectionTasks.cancelFrame(this.layoutResizeFrame);\n      this.layoutResizeFrame = this.connectionTasks.frame(() => {\n        this.layoutResizeFrame = undefined;\n        if (this.layoutEl !== layout) return;\n        this.updateLayoutGeometry(rect.width, rect.height);\n      });\n    });\n    this.layoutResizeObserver.observe(layout);\n    this.observedLayoutEl = layout;\n  }\n\n  private updateLayoutGeometry(width?: number, height?: number) {\n    const layout = this.layoutEl;\n    if (!this.el.isConnected || !layout) return;\n\n    const bounds =\n      width === undefined || height === undefined ? layout.getBoundingClientRect() : null;\n    const resolvedWidth = width ?? bounds?.width ?? 0;\n    const resolvedHeight = height ?? bounds?.height ?? 0;\n\n    let changed = false;\n\n    if (resolvedHeight > 0 && Math.abs(resolvedHeight - this.expandedHeight) >= 0.5) {\n      this.expandedHeight = resolvedHeight;\n      changed = true;\n    }\n\n    const columns = resolveOverviewGridColumns({\n      cellCount: this.visibleCellCount,\n      availableWidth: resolvedWidth,\n      minCellWidth: resolveCssLengthPx(this.metricMinWidth, DEFAULT_METRIC_MIN_WIDTH),\n    });\n    if (columns !== this.gridColumns) {\n      this.gridColumns = columns;\n      changed = true;\n    }\n\n    // The column count is written straight to the host rather than through the\n    // rendered style object. Measurement happens in `componentDidLoad` and in the\n    // ResizeObserver callback, both outside a render cycle, and the host's style\n    // is not patched again after the first render — so a rendered value would stay\n    // pinned to whatever the first paint produced, before any width was known.\n    if (this.gridColumns) {\n      this.el.style.setProperty('--ds-card-overview-grid-columns', String(this.gridColumns));\n    } else {\n      this.el.style.removeProperty('--ds-card-overview-grid-columns');\n    }\n\n    if (changed) forceUpdate(this);\n  }\n\n  /** Index of the roving tab stop, skipping inactive metrics. */\n  private get rovingIndex(): number {\n    return resolveOverviewRovingIndex(this.visibleMetrics, this.focusedMetricIndex);\n  }\n\n  private selectMetric(metric: OverviewMetric, index: number) {\n    if (metric.isInactive) return;\n    this.focusedMetricIndex = index;\n    this.dsMetricSelect.emit(metric);\n  }\n\n  /** Move the roving tab stop, wrapping and skipping inactive metrics. */\n  private moveFocus(from: number, step: number) {\n    const metrics = this.visibleMetrics;\n    const next = findNextOverviewMetricIndex(metrics, from, step < 0 ? -1 : 1);\n    if (next < 0) return;\n\n    this.focusedMetricIndex = next;\n    const cells = this.el.querySelectorAll<HTMLElement>('.card-overview__metric-action');\n    cells[next]?.focus();\n  }\n\n  private handleMetricKeyDown = (event: KeyboardEvent, index: number) => {\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        event.preventDefault();\n        this.moveFocus(index, 1);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        event.preventDefault();\n        this.moveFocus(index, -1);\n        break;\n      default:\n        break;\n    }\n  };\n\n  /**\n   * A skeleton bar matching the type metrics of the text it stands in for, so the\n   * loading state holds the same shape and rhythm as the resolved content.\n   *\n   * `background` is always passed so the base and shimmer follow the card's\n   * permanently dark surface in both themes.\n   */\n  private bar(textVariant: TextVariant, width: string, className?: string) {\n    return (\n      <ds-skeleton\n        class={className}\n        variant=\"text\"\n        textVariant={textVariant}\n        width={width}\n        background=\"always-dark\"\n      />\n    );\n  }\n\n  /**\n   * Arrow and change in one text node.\n   *\n   * The arrow is a typeface glyph rather than an icon so it inherits the exact\n   * size, weight, and baseline of the value beside it; an icon would need its\n   * own size scale and would drift whenever the type scale changed.\n   *\n   * Tone is supplied by the caller and never inferred here.\n   */\n  private renderTrend(trend: MetricTrend | undefined, variant: TextVariant) {\n    if (!trend) return null;\n    return (\n      <ds-text\n        as=\"span\"\n        class={{\n          'card-overview__trend': true,\n          'ds-control-label-box': true,\n          [`card-overview__trend--${trend.tone}`]: true,\n        }}\n        variant={variant}\n        color={TREND_COLORS[trend.tone]}\n        fontFeature=\"tabular-nums\"\n      >\n        {trend.direction === 'up' ? '↑' : '↓'} {trend.value}\n      </ds-text>\n    );\n  }\n\n  private renderScore() {\n    if (this.isLoading) {\n      return (\n        <div class=\"card-overview__score\" part=\"score\">\n          <div class=\"card-overview__score-content\">\n            <ds-score size=\"lg\" variant=\"dense\" isLoading></ds-score>\n            <div class=\"card-overview__score-copy\">\n              {this.bar(\n                'text-body-small',\n                'var(--dimension-size-800)',\n                'card-overview__score-label-spacer'\n              )}\n              {this.bar(\n                'text-body-medium',\n                'calc(var(--dimension-size-300) + var(--dimension-space-050))'\n              )}\n            </div>\n          </div>\n        </div>\n      );\n    }\n\n    const unavailableMessage =\n      this.scoreErrorMessage || (!this.score ? 'Score unavailable' : undefined);\n    if (unavailableMessage) {\n      return (\n        /* eslint-disable-next-line compomo/prefer-direct-ds-text -- The score track owns the grid divider and 8px outer inset. */\n        <div class=\"card-overview__score\" part=\"score\">\n          <ds-text\n            as=\"span\"\n            class=\"card-overview__score-content card-overview__score-content--error\"\n            variant=\"text-body-medium\"\n            color=\"inherit\"\n            role=\"alert\"\n          >\n            {unavailableMessage}\n          </ds-text>\n        </div>\n      );\n    }\n\n    const score = this.score;\n    if (!score) return null;\n\n    return (\n      <div class=\"card-overview__score\" part=\"score\">\n        <div class=\"card-overview__score-content\">\n          <ds-score\n            size=\"lg\"\n            variant=\"dense\"\n            value={score.value}\n            level={score.level}\n            label=\"Safety score\"\n          />\n          <div class=\"card-overview__score-copy\">\n            <ds-text\n              as=\"span\"\n              class=\"card-overview__score-label-spacer ds-control-label-box\"\n              variant=\"text-body-small\"\n              color={ALWAYS_DARK_SECONDARY}\n              aria-hidden=\"true\"\n            >\n              &nbsp;\n            </ds-text>\n            {this.renderTrend(score.trend, 'text-body-medium')}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  private renderMetric(metric: OverviewMetric, index: number) {\n    const selectable = !metric.isInactive;\n    const label = (\n      <ds-text\n        as=\"span\"\n        class=\"card-overview__metric-label ds-control-label-box\"\n        variant=\"text-body-small\"\n        color={ALWAYS_DARK_SECONDARY}\n        wrap=\"nowrap\"\n      >\n        {metric.label}\n      </ds-text>\n    );\n\n    return (\n      <div class=\"card-overview__metric\" part=\"metric\">\n        <div\n          class={{\n            'card-overview__metric-action': true,\n            'card-overview__metric-action--inactive': !selectable,\n            // Selection targets get the shared wash; press scaling is not used here\n            // so the grid keeps its columns aligned. See docs/control-press-policy.md.\n            'ds-interaction-fill': selectable,\n            'ds-interaction-fill--on-always-dark': selectable,\n            'ds-focus-ring-inset': selectable,\n          }}\n          role={selectable ? 'button' : undefined}\n          tabIndex={selectable && index === this.rovingIndex ? 0 : -1}\n          onClick={() => this.selectMetric(metric, index)}\n          onKeyDown={event => this.handleMetricKeyDown(event, index)}\n          onFocusin={() => {\n            if (selectable) this.focusedMetricIndex = index;\n          }}\n        >\n          <div class=\"ds-interaction-fill__content card-overview__metric-content\">\n            {metric.labelTooltip ? (\n              <ds-tooltip label={metric.labelTooltip} side=\"top\" size=\"sm\">\n                {label}\n              </ds-tooltip>\n            ) : (\n              label\n            )}\n            <div class=\"card-overview__metric-figure\">\n              <ds-text\n                as=\"span\"\n                class=\"card-overview__metric-value ds-control-label-box\"\n                variant=\"text-body-medium\"\n                color={ALWAYS_DARK_PRIMARY}\n                wrap=\"nowrap\"\n                fontFeature=\"tabular-nums\"\n              >\n                {metric.value}\n              </ds-text>\n              {this.renderTrend(metric.trend, 'text-body-medium')}\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  private renderMetrics() {\n    if (this.isLoading) {\n      return [\n        this.renderScore(),\n        ...Array.from({ length: this.loadingMetricCount }, (_, index) => (\n          <div class=\"card-overview__metric\" key={`loading-${index}`}>\n            <div class=\"card-overview__metric-action card-overview__metric-action--inactive\">\n              <div class=\"card-overview__metric-content\">\n                {this.bar('text-body-small', '35%', 'card-overview__metric-label')}\n                <div class=\"card-overview__metric-figure\">\n                  {this.bar('text-body-medium', 'var(--dimension-size-500)')}\n                  {/* Match renderTrend's type canvas and the score trend's 28px width. */}\n                  {this.bar(\n                    'text-body-medium',\n                    'calc(var(--dimension-size-300) + var(--dimension-space-050))'\n                  )}\n                </div>\n              </div>\n            </div>\n          </div>\n        )),\n      ];\n    }\n\n    return [\n      this.renderScore(),\n      ...this.visibleMetrics.map((metric, index) => this.renderMetric(metric, index)),\n    ];\n  }\n\n  render() {\n    const compact = this.variant === 'compact';\n    const collapse = this.scrollCollapseGeometry;\n\n    // Omit absent custom properties rather than handing them an undefined value.\n    // Stencil serialises undefined to the string \"undefined\", which is invalid in\n    // `repeat()` and voids the whole grid-template-columns declaration — the grid\n    // then collapses to one implicit column instead of using the `auto-fit`\n    // fallback baked into the stylesheet.\n    const customProperties: Record<string, string> = {\n      '--ds-card-overview-metric-min': this.metricMinWidth,\n    };\n    if (this.gridColumns) {\n      customProperties['--ds-card-overview-grid-columns'] = String(this.gridColumns);\n    }\n    if (collapse.active) {\n      customProperties['--ds-card-overview-expanded-height'] = `${collapse.expandedHeight}px`;\n      customProperties['--ds-card-overview-visible-height'] = `${collapse.visibleHeight}px`;\n      customProperties['--ds-card-overview-content-offset'] = `${collapse.offset}px`;\n    }\n\n    return (\n      <Host\n        class={{\n          'card-overview': true,\n          'card-overview--compact': compact,\n          'card-overview--stacked': !compact && this.layout === 'stacked',\n          'card-overview--scroll-collapsing': collapse.active,\n        }}\n        role=\"region\"\n        aria-label={this.overviewLabel}\n        aria-busy={this.isLoading ? 'true' : undefined}\n        style={customProperties}\n      >\n        <div\n          class={{\n            'card-overview__surface': true,\n            // Split shadow and inset highlight, so the opaque surface cannot cover\n            // the highlight the way a combined elevation shadow would.\n            'ds-control-elevation': true,\n            'ds-control-elevation--sm': !compact,\n            'ds-control-elevation--floating': compact,\n          }}\n        >\n          <div class=\"card-overview__clip\">\n            <div\n              ref={element => {\n                this.layoutEl = (element as HTMLElement) ?? undefined;\n              }}\n              class={{\n                'card-overview__layout': true,\n              }}\n            >\n              <div class=\"card-overview__summary\">\n                <div class=\"card-overview__header ds-control--md\">\n                  <div class=\"card-overview__period\">\n                    <div class=\"card-overview__period-current\">\n                      <slot name=\"period\">\n                        {this.periodLabel && (\n                          <div class=\"card-overview__period-fixed ds-control-frame\">\n                            <ds-skeleton\n                              preserveLayout\n                              isLoading={this.isLoading}\n                              background=\"always-dark\"\n                            >\n                              <ds-text\n                                as=\"span\"\n                                class=\"ds-control-label-box\"\n                                variant=\"text-body-medium\"\n                                emphasis\n                                color={ALWAYS_DARK_PRIMARY}\n                              >\n                                {this.periodLabel}\n                              </ds-text>\n                            </ds-skeleton>\n                          </div>\n                        )}\n                      </slot>\n                    </div>\n                    {this.comparisonLabel && (\n                      <ds-skeleton\n                        class=\"card-overview__period-comparison\"\n                        preserveLayout\n                        isLoading={this.isLoading}\n                        background=\"always-dark\"\n                      >\n                        <ds-text\n                          as=\"span\"\n                          class=\"ds-control-label-box\"\n                          variant=\"text-body-medium\"\n                          color={ALWAYS_DARK_SECONDARY}\n                        >\n                          {this.comparisonLabel}\n                        </ds-text>\n                      </ds-skeleton>\n                    )}\n                  </div>\n                  <div class=\"card-overview__filter\">\n                    <slot name=\"filter\" />\n                  </div>\n                </div>\n              </div>\n\n              {!compact && (\n                <div class=\"card-overview__body\">\n                  <div class=\"card-overview__metrics\" part=\"metrics\">\n                    {this.renderMetrics()}\n                  </div>\n\n                  <slot name=\"footer\" />\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     },
     {

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

@@ -71,7 +71,8 @@
         "The parent owns read-only versus editable body composition, dirty state, validation, persistence, loading, success, and error consequences.",
         "A save request keeps the section editing while validation or persistence is pending; the parent exits only after success.",
         "A cancel request does not persist changes; the parent restores its chosen value snapshot and exits editing.",
-        "The immediate variant keeps the resting card surface and omits header actions even if editing is supplied. The application applies and persists each control change independently."
+        "The immediate variant keeps the resting card surface and omits header actions even if editing is supplied. The application applies and persists each control change independently.",
+        "isLoading replaces header copy and actions with skeletons while retaining card geometry; projected body loading remains owned by the application."
       ],
       "responsiveBehavior": [
         "Choose sm, md, or lg from the parent layout. Empty editable cards use the matching minimum height. Cards with body content, and immediate cards, fit that content.",
@@ -191,6 +192,15 @@
           "mutable": false,
           "description": "Section heading shown in the card header."
         },
+        "isLoading": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "is-loading",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Keep the card and projected content in place while its header shows skeletons."
+        },
         "saveLabel": {
           "type": "string",
           "resolvedType": "string",
@@ -265,6 +275,15 @@
         "mutable": false,
         "description": "Section heading shown in the card header."
       },
+      "isLoading": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "is-loading",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Keep the card and projected content in place while its header shows skeletons."
+      },
       "saveLabel": {
         "type": "string",
         "resolvedType": "string",
@@ -322,8 +341,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."
       }
@@ -336,17 +355,18 @@
   "registryDependencies": [
     "button-filled",
     "button-unfilled",
+    "skeleton",
     "text"
   ],
   "files": [
     {
       "path": "src/wc/components/CardSetting/CardSetting.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-setting-width);\n  min-height: var(--_card-setting-min-height);\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::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:host(.card-setting--editing) {\n  background-color: var(--color-background-bold-brand);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);\n}\n\n:host(.card-setting--editing)::after {\n  box-shadow: none;\n}\n\n.card-setting__header {\n  flex: 0 0 auto;\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n:host(.card-setting--editing) .card-setting__header {\n  border-bottom-color: transparent;\n}\n\n.card-setting__copy {\n  align-items: center;\n}\n\nds-text.card-setting__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-setting__actions {\n  flex-shrink: 0;\n}\n\n.card-setting__panel {\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:host(.card-setting--editing) .card-setting__panel {\n  border-radius: var(--ds-radius-card);\n}\n\n.card-setting__banner {\n  flex: 0 0 auto;\n  min-width: 0;\n}\n\n.card-setting__banner--empty {\n  display: none;\n}\n\n.card-setting__body {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  min-height: 0;\n  box-sizing: border-box;\n  padding-block: 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-setting-width);\n  min-height: var(--_card-setting-min-height);\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::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:host(.card-setting--editing) {\n  background-color: var(--color-background-bold-brand);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);\n}\n\n:host(.card-setting--editing)::after {\n  box-shadow: none;\n}\n\n.card-setting__header {\n  flex: 0 0 auto;\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n:host(.card-setting--editing) .card-setting__header {\n  border-bottom-color: transparent;\n}\n\n.card-setting__copy {\n  align-items: center;\n  position: relative;\n}\n\nds-text.card-setting__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-setting__actions {\n  flex-shrink: 0;\n  position: relative;\n}\n\n:host(.card-setting--loading) .card-setting__title {\n  visibility: hidden;\n}\n\n.card-setting__heading-skeleton {\n  position: absolute;\n  inset-inline-start: var(--dimension-space-100);\n}\n\n.card-setting__panel {\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:host(.card-setting--editing) .card-setting__panel {\n  border-radius: var(--ds-radius-card);\n}\n\n.card-setting__banner {\n  flex: 0 0 auto;\n  min-width: 0;\n}\n\n.card-setting__banner--empty {\n  display: none;\n}\n\n.card-setting__body {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  min-height: 0;\n  box-sizing: border-box;\n  padding-block: 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",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/CardSetting/CardSetting.tsx",
-      "content": "import { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\n\nexport type CardSettingVariant = 'editable' | 'immediate';\nexport type CardSettingWidth = 'sm' | 'md' | 'lg';\nexport type CardSettingAction = 'edit' | 'save' | 'cancel';\n\nexport interface CardSettingActionDetail {\n  action: CardSettingAction;\n  originalEvent: MouseEvent;\n}\n\nconst CARD_WIDTH_VARS: Record<CardSettingWidth, 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<CardSettingWidth, string> = {\n  sm: 'var(--dimension-card-height-sm)',\n  md: 'var(--dimension-card-height-md)',\n  lg: 'var(--dimension-card-height-lg)',\n};\n\nconst FAINT_BRAND_TITLE_COLOR = 'var(--color-foreground-faint-brand)';\n\nconst isRenderableNode = (node: Node): boolean => {\n  if (node.nodeType === Node.ELEMENT_NODE) {\n    return (node as Element).tagName !== 'SLOT';\n  }\n  return node.nodeType === Node.TEXT_NODE && Boolean(node.textContent?.trim());\n};\n\nconst slotName = (node: Node): string | null =>\n  node.nodeType === Node.ELEMENT_NODE ? (node as Element).getAttribute('slot') : null;\n\nconst isDefaultSlottedNode = (node: Node): boolean => isRenderableNode(node) && !slotName(node);\n\nconst isBannerSlottedNode = (node: Node): boolean =>\n  isRenderableNode(node) && slotName(node) === 'banner';\n\nconst slotHasRenderableContent = (slot: HTMLSlotElement | null): boolean =>\n  Boolean(slot?.assignedNodes({ flatten: true }).some(isRenderableNode));\n\n@Component({\n  tag: 'ds-card-setting',\n  styleUrl: 'CardSetting.css',\n  scoped: true,\n})\nexport class CardSetting {\n  @Element() el!: HTMLElement;\n\n  /** Section heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /**\n   * Card width token (`sm` / `md` / `lg`). Empty editable cards use the matching\n   * minimum-height token. Cards with body content, and immediate cards, fit\n   * that content.\n   */\n  @Prop() cardWidth: CardSettingWidth = 'md';\n\n  /** Immediate settings omit edit actions and apply changes through their own controls. */\n  @Prop() variant: CardSettingVariant = 'editable';\n\n  /** Controlled edit state — parent owns single-edit orchestration. */\n  @Prop() editing = false;\n  @Prop() editLabel: string = 'Edit';\n  @Prop() cancelLabel: string = 'Cancel';\n  @Prop() saveLabel: string = 'Save';\n\n  /** Emits a controlled edit, save, or cancel request. */\n  @Event() dsAction!: EventEmitter<CardSettingActionDetail>;\n\n  @State() private hasBannerContent = false;\n  @State() private hasBodyContent = false;\n\n  componentWillLoad() {\n    const nodes = Array.from(this.el.childNodes);\n    this.hasBannerContent = nodes.some(isBannerSlottedNode);\n    this.hasBodyContent = nodes.some(isDefaultSlottedNode);\n  }\n\n  componentDidLoad() {\n    this.syncBannerContent();\n    this.syncBodyContent();\n  }\n\n  private emitAction(action: CardSettingAction, originalEvent: MouseEvent) {\n    this.dsAction.emit({ action, originalEvent });\n  }\n\n  private readSlotContent(\n    event: Event | undefined,\n    slotSelector: string,\n    containerSelector: string\n  ): boolean {\n    const slot =\n      event?.target instanceof HTMLSlotElement\n        ? event.target\n        : this.el.querySelector<HTMLSlotElement>(slotSelector);\n    if (slotHasRenderableContent(slot)) return true;\n    const container = this.el.querySelector(containerSelector);\n    return Array.from(container?.childNodes ?? []).some(isRenderableNode);\n  }\n\n  private syncBannerContent = (event?: Event) => {\n    const hasContent = this.readSlotContent(\n      event,\n      ':scope > .card-setting__panel > .card-setting__banner > slot',\n      ':scope > .card-setting__panel > .card-setting__banner'\n    );\n    if (hasContent !== this.hasBannerContent) this.hasBannerContent = hasContent;\n  };\n\n  private syncBodyContent = (event?: Event) => {\n    const hasContent = this.readSlotContent(\n      event,\n      ':scope > .card-setting__panel > .card-setting__body > slot',\n      ':scope > .card-setting__panel > .card-setting__body'\n    );\n    if (hasContent !== this.hasBodyContent) this.hasBodyContent = hasContent;\n  };\n\n  private get hugContent(): boolean {\n    return this.variant === 'immediate' || this.hasBannerContent || this.hasBodyContent;\n  }\n\n  render() {\n    const editing = this.variant === 'editable' && this.editing;\n\n    return (\n      <Host\n        class={{\n          'card-setting': true,\n          'card-setting--editing': editing,\n          'card-setting--immediate': this.variant === 'immediate',\n          'card-setting--empty': !this.hugContent,\n        }}\n        style={{\n          '--_card-setting-width': CARD_WIDTH_VARS[this.cardWidth],\n          '--_card-setting-min-height': this.hugContent ? '0' : CARD_HEIGHT_VARS[this.cardWidth],\n        }}\n      >\n        <header class=\"card-setting__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-setting__copy ds-chrome-header__copy ds-control--md\">\n            <ds-text\n              class=\"card-setting__title ds-chrome-header__heading\"\n              variant=\"text-title-small\"\n              emphasis\n              color={editing ? FAINT_BRAND_TITLE_COLOR : 'primary'}\n              as=\"h2\"\n            >\n              {this.heading}\n            </ds-text>\n          </div>\n          {this.variant === 'editable' && (\n            <div class=\"card-setting__actions ds-chrome-header__trailing\">\n              {!editing ? (\n                <ds-button-unfilled\n                  variant=\"icon\"\n                  type=\"button\"\n                  icon=\"Pencil\"\n                  aria-label={this.editLabel}\n                  onDsClick={(event: CustomEvent<MouseEvent>) =>\n                    this.emitAction('edit', event.detail)\n                  }\n                />\n              ) : (\n                [\n                  <ds-button-unfilled\n                    key=\"cancel\"\n                    variant=\"icon\"\n                    type=\"button\"\n                    icon=\"Cross\"\n                    background=\"bold\"\n                    aria-label={this.cancelLabel}\n                    onDsClick={(event: CustomEvent<MouseEvent>) =>\n                      this.emitAction('cancel', event.detail)\n                    }\n                  />,\n                  <ds-button-filled\n                    key=\"save\"\n                    variant=\"icon\"\n                    type=\"button\"\n                    icon=\"Check\"\n                    intent=\"brand\"\n                    contrast=\"faint\"\n                    aria-label={this.saveLabel}\n                    onDsClick={(event: CustomEvent<MouseEvent>) =>\n                      this.emitAction('save', event.detail)\n                    }\n                  />,\n                ]\n              )}\n            </div>\n          )}\n        </header>\n        <div class=\"card-setting__panel\">\n          <div\n            class={{\n              'card-setting__banner': true,\n              'card-setting__banner--empty': !this.hasBannerContent,\n            }}\n          >\n            <slot name=\"banner\" onSlotchange={this.syncBannerContent} />\n          </div>\n          <div class=\"card-setting__body\">\n            <slot onSlotchange={this.syncBodyContent} />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\n\nexport type CardSettingVariant = 'editable' | 'immediate';\nexport type CardSettingWidth = 'sm' | 'md' | 'lg';\nexport type CardSettingAction = 'edit' | 'save' | 'cancel';\n\nexport interface CardSettingActionDetail {\n  action: CardSettingAction;\n  originalEvent: MouseEvent;\n}\n\nconst CARD_WIDTH_VARS: Record<CardSettingWidth, 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<CardSettingWidth, string> = {\n  sm: 'var(--dimension-card-height-sm)',\n  md: 'var(--dimension-card-height-md)',\n  lg: 'var(--dimension-card-height-lg)',\n};\n\nconst FAINT_BRAND_TITLE_COLOR = 'var(--color-foreground-faint-brand)';\n\nconst isRenderableNode = (node: Node): boolean => {\n  if (node.nodeType === Node.ELEMENT_NODE) {\n    return (node as Element).tagName !== 'SLOT';\n  }\n  return node.nodeType === Node.TEXT_NODE && Boolean(node.textContent?.trim());\n};\n\nconst slotName = (node: Node): string | null =>\n  node.nodeType === Node.ELEMENT_NODE ? (node as Element).getAttribute('slot') : null;\n\nconst isDefaultSlottedNode = (node: Node): boolean => isRenderableNode(node) && !slotName(node);\n\nconst isBannerSlottedNode = (node: Node): boolean =>\n  isRenderableNode(node) && slotName(node) === 'banner';\n\nconst slotHasRenderableContent = (slot: HTMLSlotElement | null): boolean =>\n  Boolean(slot?.assignedNodes({ flatten: true }).some(isRenderableNode));\n\n@Component({\n  tag: 'ds-card-setting',\n  styleUrl: 'CardSetting.css',\n  scoped: true,\n})\nexport class CardSetting {\n  @Element() el!: HTMLElement;\n\n  /** Section heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /**\n   * Card width token (`sm` / `md` / `lg`). Empty editable cards use the matching\n   * minimum-height token. Cards with body content, and immediate cards, fit\n   * that content.\n   */\n  @Prop() cardWidth: CardSettingWidth = 'md';\n\n  /** Immediate settings omit edit actions and apply changes through their own controls. */\n  @Prop() variant: CardSettingVariant = 'editable';\n\n  /** Controlled edit state — parent owns single-edit orchestration. */\n  @Prop() editing = false;\n  /** Keep the card and projected content in place while its header shows skeletons. */\n  @Prop() isLoading = false;\n  @Prop() editLabel: string = 'Edit';\n  @Prop() cancelLabel: string = 'Cancel';\n  @Prop() saveLabel: string = 'Save';\n\n  /** Emits a controlled edit, save, or cancel request. */\n  @Event() dsAction!: EventEmitter<CardSettingActionDetail>;\n\n  @State() private hasBannerContent = false;\n  @State() private hasBodyContent = false;\n\n  componentWillLoad() {\n    const nodes = Array.from(this.el.childNodes);\n    this.hasBannerContent = nodes.some(isBannerSlottedNode);\n    this.hasBodyContent = nodes.some(isDefaultSlottedNode);\n  }\n\n  componentDidLoad() {\n    this.syncBannerContent();\n    this.syncBodyContent();\n  }\n\n  private emitAction(action: CardSettingAction, originalEvent: MouseEvent) {\n    this.dsAction.emit({ action, originalEvent });\n  }\n\n  private readSlotContent(\n    event: Event | undefined,\n    slotSelector: string,\n    containerSelector: string\n  ): boolean {\n    const slot =\n      event?.target instanceof HTMLSlotElement\n        ? event.target\n        : this.el.querySelector<HTMLSlotElement>(slotSelector);\n    if (slotHasRenderableContent(slot)) return true;\n    const container = this.el.querySelector(containerSelector);\n    return Array.from(container?.childNodes ?? []).some(isRenderableNode);\n  }\n\n  private syncBannerContent = (event?: Event) => {\n    const hasContent = this.readSlotContent(\n      event,\n      ':scope > .card-setting__panel > .card-setting__banner > slot',\n      ':scope > .card-setting__panel > .card-setting__banner'\n    );\n    if (hasContent !== this.hasBannerContent) this.hasBannerContent = hasContent;\n  };\n\n  private syncBodyContent = (event?: Event) => {\n    const hasContent = this.readSlotContent(\n      event,\n      ':scope > .card-setting__panel > .card-setting__body > slot',\n      ':scope > .card-setting__panel > .card-setting__body'\n    );\n    if (hasContent !== this.hasBodyContent) this.hasBodyContent = hasContent;\n  };\n\n  private get hugContent(): boolean {\n    return this.variant === 'immediate' || this.hasBannerContent || this.hasBodyContent;\n  }\n\n  render() {\n    const editing = this.variant === 'editable' && this.editing;\n\n    return (\n      <Host\n        aria-busy={this.isLoading ? 'true' : undefined}\n        class={{\n          'card-setting': true,\n          'card-setting--loading': this.isLoading,\n          'card-setting--editing': editing,\n          'card-setting--immediate': this.variant === 'immediate',\n          'card-setting--empty': !this.hugContent,\n        }}\n        style={{\n          '--_card-setting-width': CARD_WIDTH_VARS[this.cardWidth],\n          '--_card-setting-min-height': this.hugContent ? '0' : CARD_HEIGHT_VARS[this.cardWidth],\n        }}\n      >\n        <header class=\"card-setting__header ds-chrome-header\">\n          <div class=\"card-setting__copy ds-chrome-header__copy ds-control--md\">\n            <ds-text\n              class=\"card-setting__title ds-chrome-header__heading\"\n              variant=\"text-title-small\"\n              emphasis\n              color={editing ? FAINT_BRAND_TITLE_COLOR : 'primary'}\n              as=\"h2\"\n            >\n              {this.heading}\n            </ds-text>\n            {this.isLoading && (\n              <ds-skeleton\n                class=\"card-setting__heading-skeleton\"\n                width=\"min(60%, calc(var(--dimension-size-800) * 2))\"\n                textVariant=\"text-title-small\"\n              />\n            )}\n          </div>\n          {this.variant === 'editable' && (\n            <div class=\"card-setting__actions ds-chrome-header__trailing\" inert={this.isLoading}>\n              {!editing ? (\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=\"Pencil\"\n                    aria-label={this.editLabel}\n                    onDsClick={(event: CustomEvent<MouseEvent>) =>\n                      this.emitAction('edit', event.detail)\n                    }\n                  />\n                </ds-skeleton>\n              ) : (\n                [\n                  <ds-skeleton\n                    key=\"cancel\"\n                    preserveLayout\n                    isLoading={this.isLoading}\n                    variant=\"control\"\n                    controlAppearance=\"outlined\"\n                    controlContent=\"icon\"\n                    background=\"bold\"\n                  >\n                    <ds-button-unfilled\n                      variant=\"icon\"\n                      type=\"button\"\n                      icon=\"Cross\"\n                      background=\"bold\"\n                      aria-label={this.cancelLabel}\n                      onDsClick={(event: CustomEvent<MouseEvent>) =>\n                        this.emitAction('cancel', event.detail)\n                      }\n                    />\n                  </ds-skeleton>,\n                  <ds-skeleton\n                    key=\"save\"\n                    preserveLayout\n                    isLoading={this.isLoading}\n                    variant=\"control\"\n                  >\n                    <ds-button-filled\n                      variant=\"icon\"\n                      type=\"button\"\n                      icon=\"Check\"\n                      intent=\"brand\"\n                      contrast=\"faint\"\n                      aria-label={this.saveLabel}\n                      onDsClick={(event: CustomEvent<MouseEvent>) =>\n                        this.emitAction('save', event.detail)\n                      }\n                    />\n                  </ds-skeleton>,\n                ]\n              )}\n            </div>\n          )}\n        </header>\n        <div class=\"card-setting__panel\">\n          <div\n            class={{\n              'card-setting__banner': true,\n              'card-setting__banner--empty': !this.hasBannerContent,\n            }}\n          >\n            <slot name=\"banner\" onSlotchange={this.syncBannerContent} />\n          </div>\n          <div class=\"card-setting__body\">\n            <slot onSlotchange={this.syncBodyContent} />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

package/dist/mcp-data/registry/card-settings-scope.json

@@ -32,6 +32,7 @@
         "The shared text-action recipe supplies brand foreground, hover underline, and keyboard focus indication."
       ],
       "states": [
+        "Loading retains the card surface, sentence wrapping, and control footprints while replacing each fragment with an inert skeleton.",
         "The application owns the selected area, profile, available choices, permissions, and empty-state copy. Existing complete area-trigger labels remain compatible. Applications that separate the localizable settings noun from the control supply the area-only trigger label and noun together.",
         "The card reports popup requests without changing selection or expanded state.",
         "The surface follows the active theme rather than imposing always-dark colors."
@@ -112,6 +113,15 @@
           "mutable": false,
           "description": "Sentence connector, supplied separately for localization."
         },
+        "isLoading": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "is-loading",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Replace sentence fragments and controls with skeletons inside the same card."
+        },
         "managingLabel": {
           "type": "string",
           "resolvedType": "string",
@@ -224,6 +234,15 @@
         "mutable": false,
         "description": "Sentence connector, supplied separately for localization."
       },
+      "isLoading": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "is-loading",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Replace sentence fragments and controls with skeletons inside the same card."
+      },
       "managingLabel": {
         "type": "string",
         "resolvedType": "string",
@@ -326,8 +345,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."
       }
@@ -338,17 +357,18 @@
     "@ds-mo/tokens"
   ],
   "registryDependencies": [
+    "skeleton",
     "text"
   ],
   "files": [
     {
       "path": "src/wc/components/CardSettingsScope/CardSettingsScope.css",
-      "content": "@import '../../utils/text-decoration.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/radius.css';\n@import '../../styles/control-elevation.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  width: var(--dimension-card-width-md);\n  max-width: 100%;\n}\n\n.card-settings-scope {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 0 var(--dimension-space-050);\n  box-sizing: border-box;\n  min-height: var(--dimension-size-600);\n  padding: var(--dimension-space-100) var(--dimension-space-200);\n  border-radius: var(--ds-radius-card);\n  background: var(--color-background-primary);\n  color: var(--color-foreground-primary);\n}\n\n.card-settings-scope__action {\n  display: inline-flex;\n  align-items: center;\n  min-height: var(--dimension-size-400);\n  max-width: 100%;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  border-radius: var(--dimension-radius-025);\n  background: transparent;\n  cursor: pointer;\n}\n\n.card-settings-scope__action ds-text {\n  overflow-wrap: anywhere;\n  text-align: start;\n}\n\n@media (forced-colors: active) {\n  .card-settings-scope {\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n  }\n}\n",
+      "content": "@import '../../utils/text-decoration.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/radius.css';\n@import '../../styles/control-elevation.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  width: var(--dimension-card-width-md);\n  max-width: 100%;\n}\n\n.card-settings-scope {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 0 var(--dimension-space-050);\n  box-sizing: border-box;\n  min-height: var(--dimension-size-600);\n  padding: var(--dimension-space-100) var(--dimension-space-200);\n  border-radius: var(--ds-radius-card);\n  background: var(--color-background-primary);\n  color: var(--color-foreground-primary);\n}\n\n.card-settings-scope__action {\n  display: inline-flex;\n  align-items: center;\n  min-height: var(--dimension-size-400);\n  max-width: 100%;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  border-radius: var(--dimension-radius-025);\n  background: transparent;\n  cursor: pointer;\n}\n\n.card-settings-scope > ds-skeleton {\n  min-width: 0;\n  max-width: 100%;\n}\n\n.card-settings-scope__action ds-text {\n  overflow-wrap: anywhere;\n  text-align: start;\n}\n\n@media (forced-colors: active) {\n  .card-settings-scope {\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n  }\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/CardSettingsScope/CardSettingsScope.tsx",
-      "content": "import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport interface SettingsScopeRequest {\n  scope: 'area' | 'profile';\n  anchor: HTMLButtonElement;\n  originalEvent: MouseEvent;\n}\n\n@Component({\n  tag: 'ds-card-settings-scope',\n  styleUrl: 'CardSettingsScope.css',\n  scoped: true,\n})\nexport class CardSettingsScope {\n  /** Current product area or complete combined-view label in the sentence trigger. */\n  @Prop() areaLabel: string = 'All settings';\n  /** Current organization or settings profile. */\n  @Prop() profileLabel: string = 'Organization';\n  /** Sentence prefix, supplied separately for localization. */\n  @Prop() managingLabel: string = 'Managing';\n  /** Optional sentence noun after an area-only trigger label, supplied separately for localization. */\n  @Prop() settingsLabel: string = '';\n  /** Sentence connector, supplied separately for localization. */\n  @Prop() forLabel: string = 'for';\n  /** Accessible name for this context region. */\n  @Prop() scopeLabel: string = 'Settings scope';\n  /** ID of the application-owned product-area menu. */\n  @Prop() areaControls: string | undefined;\n  /** ID of the application-owned profiles popup. */\n  @Prop() profileControls: string | undefined;\n  /** Whether the product-area menu is open. */\n  @Prop() areaExpanded: boolean = false;\n  /** Whether the profiles popup is open. */\n  @Prop() profileExpanded: boolean = false;\n  /** Empty informational profile popups use dialog semantics instead of a menu. */\n  @Prop() profilePopup: 'menu' | 'dialog' = 'menu';\n\n  /** Requests a popup; the owner supplies choices, open state, and selection. */\n  @Event() dsScopeRequest!: EventEmitter<SettingsScopeRequest>;\n\n  private request(scope: SettingsScopeRequest['scope'], event: MouseEvent) {\n    this.dsScopeRequest.emit({\n      scope,\n      anchor: event.currentTarget as HTMLButtonElement,\n      originalEvent: event,\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class=\"card-settings-scope ds-control-elevation ds-control-elevation--sm\"\n          role=\"region\"\n          aria-label={this.scopeLabel}\n        >\n          <ds-text as=\"span\" variant=\"text-body-medium\" color=\"primary\">\n            {this.managingLabel}\n          </ds-text>\n          <button\n            type=\"button\"\n            class=\"card-settings-scope__action ds-text-action ds-focus-ring\"\n            aria-haspopup=\"menu\"\n            aria-controls={this.areaControls}\n            aria-expanded={String(this.areaExpanded)}\n            onClick={event => this.request('area', event)}\n          >\n            <ds-text as=\"span\" variant=\"text-body-medium\" color=\"inherit\">\n              {this.areaLabel}\n            </ds-text>\n          </button>\n          {this.settingsLabel.trim() ? (\n            <ds-text as=\"span\" variant=\"text-body-medium\" color=\"primary\">\n              {this.settingsLabel}\n            </ds-text>\n          ) : null}\n          <ds-text as=\"span\" variant=\"text-body-medium\" color=\"primary\">\n            {this.forLabel}\n          </ds-text>\n          <button\n            type=\"button\"\n            class=\"card-settings-scope__action ds-text-action ds-focus-ring\"\n            aria-haspopup={this.profilePopup}\n            aria-controls={this.profileControls}\n            aria-expanded={String(this.profileExpanded)}\n            onClick={event => this.request('profile', event)}\n          >\n            <ds-text as=\"span\" variant=\"text-body-medium\" color=\"inherit\">\n              {this.profileLabel}\n            </ds-text>\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport interface SettingsScopeRequest {\n  scope: 'area' | 'profile';\n  anchor: HTMLButtonElement;\n  originalEvent: MouseEvent;\n}\n\n@Component({\n  tag: 'ds-card-settings-scope',\n  styleUrl: 'CardSettingsScope.css',\n  scoped: true,\n})\nexport class CardSettingsScope {\n  /** Current product area or complete combined-view label in the sentence trigger. */\n  @Prop() areaLabel: string = 'All settings';\n  /** Current organization or settings profile. */\n  @Prop() profileLabel: string = 'Organization';\n  /** Sentence prefix, supplied separately for localization. */\n  @Prop() managingLabel: string = 'Managing';\n  /** Optional sentence noun after an area-only trigger label, supplied separately for localization. */\n  @Prop() settingsLabel: string = '';\n  /** Sentence connector, supplied separately for localization. */\n  @Prop() forLabel: string = 'for';\n  /** Accessible name for this context region. */\n  @Prop() scopeLabel: string = 'Settings scope';\n  /** ID of the application-owned product-area menu. */\n  @Prop() areaControls: string | undefined;\n  /** ID of the application-owned profiles popup. */\n  @Prop() profileControls: string | undefined;\n  /** Whether the product-area menu is open. */\n  @Prop() areaExpanded: boolean = false;\n  /** Whether the profiles popup is open. */\n  @Prop() profileExpanded: boolean = false;\n  /** Empty informational profile popups use dialog semantics instead of a menu. */\n  @Prop() profilePopup: 'menu' | 'dialog' = 'menu';\n  /** Replace sentence fragments and controls with skeletons inside the same card. */\n  @Prop() isLoading: boolean = false;\n\n  /** Requests a popup; the owner supplies choices, open state, and selection. */\n  @Event() dsScopeRequest!: EventEmitter<SettingsScopeRequest>;\n\n  private request(scope: SettingsScopeRequest['scope'], event: MouseEvent) {\n    if (this.isLoading) return;\n    this.dsScopeRequest.emit({\n      scope,\n      anchor: event.currentTarget as HTMLButtonElement,\n      originalEvent: event,\n    });\n  }\n\n  render() {\n    return (\n      <Host aria-busy={this.isLoading ? 'true' : undefined}>\n        <div\n          class=\"card-settings-scope ds-control-elevation ds-control-elevation--sm\"\n          role=\"region\"\n          aria-label={this.scopeLabel}\n        >\n          <ds-skeleton preserveLayout={true} isLoading={this.isLoading}>\n            <ds-text as=\"span\" variant=\"text-body-medium\" color=\"primary\">\n              {this.managingLabel}\n            </ds-text>\n          </ds-skeleton>\n          <ds-skeleton preserveLayout={true} isLoading={this.isLoading}>\n            <button\n              type=\"button\"\n              class=\"card-settings-scope__action ds-text-action ds-focus-ring\"\n              aria-haspopup=\"menu\"\n              aria-controls={this.areaControls}\n              aria-expanded={String(this.areaExpanded)}\n              onClick={event => this.request('area', event)}\n            >\n              <ds-text as=\"span\" variant=\"text-body-medium\" color=\"inherit\">\n                {this.areaLabel}\n              </ds-text>\n            </button>\n          </ds-skeleton>\n          {this.settingsLabel.trim() ? (\n            <ds-skeleton preserveLayout={true} isLoading={this.isLoading}>\n              <ds-text as=\"span\" variant=\"text-body-medium\" color=\"primary\">\n                {this.settingsLabel}\n              </ds-text>\n            </ds-skeleton>\n          ) : null}\n          <ds-skeleton preserveLayout={true} isLoading={this.isLoading}>\n            <ds-text as=\"span\" variant=\"text-body-medium\" color=\"primary\">\n              {this.forLabel}\n            </ds-text>\n          </ds-skeleton>\n          <ds-skeleton preserveLayout={true} isLoading={this.isLoading}>\n            <button\n              type=\"button\"\n              class=\"card-settings-scope__action ds-text-action ds-focus-ring\"\n              aria-haspopup={this.profilePopup}\n              aria-controls={this.profileControls}\n              aria-expanded={String(this.profileExpanded)}\n              onClick={event => this.request('profile', event)}\n            >\n              <ds-text as=\"span\" variant=\"text-body-medium\" color=\"inherit\">\n                {this.profileLabel}\n              </ds-text>\n            </button>\n          </ds-skeleton>\n        </div>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

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

@@ -277,8 +277,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/chart.json

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

@@ -217,8 +217,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/checkbox.json

@@ -429,8 +429,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/chip.json

@@ -337,8 +337,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/code-block.json

@@ -163,8 +163,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/conversation-list-item.json

@@ -281,8 +281,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/conversation-list-section.json

@@ -128,8 +128,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/conversation-list.json

@@ -90,8 +90,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/data-customize.json

@@ -369,8 +369,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: fieldOrder, fields, hiddenFieldIds, options.",
       "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/data-filter.json

@@ -487,8 +487,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: filters, matchModes, values.",
       "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/data-group.json

@@ -351,8 +351,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: grouping, options.",
       "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/data-preferences.json

@@ -573,8 +573,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: customizeOptions, customizeSections, fieldOrder, fields, filters, grouping, groupingOptions, hiddenFieldIds, matchModes, pinnedFieldIds, sort, sortColumns, values.",
       "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/data-saved-views.json

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

@@ -348,8 +348,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: fields, selectedFieldIds.",
       "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/data-sort.json

@@ -244,8 +244,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: fields, sort.",
       "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/data-toolbar.json

@@ -165,8 +165,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/divider.json

@@ -208,8 +208,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/empty-state.json

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