@ds-mo/ui 14.36.0 → 15.1.0

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

@@ -101,7 +101,32 @@
           "label": "Trend resolution unit coverage",
           "path": "tests/metric-change.test.ts"
         }
-      ]
+      ],
+      "styling": {
+        "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+        "protected": [
+          {
+            "properties": [
+              "background",
+              "border",
+              "box-shadow",
+              "color"
+            ],
+            "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+            "props": [
+              "variant"
+            ]
+          },
+          {
+            "properties": [
+              "border-radius"
+            ],
+            "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+            "props": []
+          }
+        ],
+        "customProperties": []
+      }
     },
     "api": {
       "props": {
@@ -352,7 +377,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }
@@ -376,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 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  /** The node the observer is bound to, which a later render can replace. */\n  private observedLayoutEl?: HTMLElement;\n\n  componentDidLoad() {\n    this.observeLayout();\n  }\n\n  componentDidRender() {\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.layoutResizeObserver?.disconnect();\n    this.layoutResizeObserver = null;\n    if (this.layoutResizeFrame !== undefined) cancelAnimationFrame(this.layoutResizeFrame);\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 (!layout) return;\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      if (this.layoutResizeFrame !== undefined) cancelAnimationFrame(this.layoutResizeFrame);\n      this.layoutResizeFrame = requestAnimationFrame(() => {\n        this.layoutResizeFrame = undefined;\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 (!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('text-body-small', '64px', 'card-overview__score-label-spacer')}\n              {this.bar('text-body-medium', '28px')}\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 local/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      >\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                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', '40px')}\n                  {/* Match renderTrend's type canvas and the score trend's 28px width. */}\n                  {this.bar('text-body-medium', '28px')}\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 local/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 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  /** The node the observer is bound to, which a later render can replace. */\n  private observedLayoutEl?: HTMLElement;\n\n  componentDidLoad() {\n    this.observeLayout();\n  }\n\n  componentDidRender() {\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.layoutResizeObserver?.disconnect();\n    this.layoutResizeObserver = null;\n    if (this.layoutResizeFrame !== undefined) cancelAnimationFrame(this.layoutResizeFrame);\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 (!layout) return;\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      if (this.layoutResizeFrame !== undefined) cancelAnimationFrame(this.layoutResizeFrame);\n      this.layoutResizeFrame = requestAnimationFrame(() => {\n        this.layoutResizeFrame = undefined;\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 (!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('text-body-small', '64px', 'card-overview__score-label-spacer')}\n              {this.bar('text-body-medium', '28px')}\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      >\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                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', '40px')}\n                  {/* Match renderTrend's type canvas and the score trend's 28px width. */}\n                  {this.bar('text-body-medium', '28px')}\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",
       "type": "registry:ui"
     },
     {

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

@@ -95,7 +95,40 @@
           "label": "Cross-browser shell and action coverage",
           "path": "tests/e2e/card-setting.spec.ts"
         }
-      ]
+      ],
+      "styling": {
+        "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+        "protected": [
+          {
+            "properties": [
+              "background",
+              "border",
+              "box-shadow",
+              "color"
+            ],
+            "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+            "props": []
+          },
+          {
+            "properties": [
+              "border-radius"
+            ],
+            "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+            "props": []
+          },
+          {
+            "properties": [
+              "width",
+              "min-height"
+            ],
+            "reason": "Card width selects the component geometry; use cardWidth and let the parent constrain available space.",
+            "props": [
+              "cardWidth"
+            ]
+          }
+        ],
+        "customProperties": []
+      }
     },
     "api": {
       "props": {
@@ -255,7 +288,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }
@@ -278,7 +311,7 @@
     },
     {
       "path": "src/wc/components/CardSetting/CardSetting.tsx",
-      "content": "import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\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\n@Component({\n  tag: 'ds-card-setting',\n  styleUrl: 'CardSetting.css',\n  scoped: true,\n})\nexport class CardSetting {\n  /** Section heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /**\n   * Card width token (`sm` / `md` / `lg`). Also sets host `min-height` to the\n   * matching `--dimension-card-height-*` so the body fills available space\n   * even when the slot is empty.\n   */\n  @Prop() cardWidth: CardSettingWidth = 'md';\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  private emitAction(action: CardSettingAction, originalEvent: MouseEvent) {\n    this.dsAction.emit({ action, originalEvent });\n  }\n\n  render() {\n    const editing = this.editing;\n\n    return (\n      <Host\n        class={{\n          'card-setting': true,\n          'card-setting--editing': editing,\n        }}\n        style={{\n          '--_card-setting-width': CARD_WIDTH_VARS[this.cardWidth],\n          '--_card-setting-min-height': CARD_HEIGHT_VARS[this.cardWidth],\n        }}\n      >\n        <header class=\"card-setting__header ds-chrome-header\">\n          {/* eslint-disable-next-line local/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          <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        </header>\n        <div class=\"card-setting__body\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\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\n@Component({\n  tag: 'ds-card-setting',\n  styleUrl: 'CardSetting.css',\n  scoped: true,\n})\nexport class CardSetting {\n  /** Section heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /**\n   * Card width token (`sm` / `md` / `lg`). Also sets host `min-height` to the\n   * matching `--dimension-card-height-*` so the body fills available space\n   * even when the slot is empty.\n   */\n  @Prop() cardWidth: CardSettingWidth = 'md';\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  private emitAction(action: CardSettingAction, originalEvent: MouseEvent) {\n    this.dsAction.emit({ action, originalEvent });\n  }\n\n  render() {\n    const editing = this.editing;\n\n    return (\n      <Host\n        class={{\n          'card-setting': true,\n          'card-setting--editing': editing,\n        }}\n        style={{\n          '--_card-setting-width': CARD_WIDTH_VARS[this.cardWidth],\n          '--_card-setting-min-height': 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          <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        </header>\n        <div class=\"card-setting__body\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

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

@@ -50,7 +50,30 @@
           "label": "Storybook examples",
           "path": "src/wc/components/CardSettingsScope/CardSettingsScope.stories.ts"
         }
-      ]
+      ],
+      "styling": {
+        "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+        "protected": [
+          {
+            "properties": [
+              "background",
+              "border",
+              "box-shadow",
+              "color"
+            ],
+            "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+            "props": []
+          },
+          {
+            "properties": [
+              "border-radius"
+            ],
+            "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+            "props": []
+          }
+        ],
+        "customProperties": []
+      }
     },
     "api": {
       "props": {
@@ -304,7 +327,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -78,7 +78,12 @@
           "label": "Rendered interaction tests",
           "path": "tests/e2e/chart-legend.spec.ts"
         }
-      ]
+      ],
+      "styling": {
+        "rationale": "Legend content owns internal rows; application layout may constrain and position its host.",
+        "protected": [],
+        "customProperties": []
+      }
     },
     "api": {
       "props": {
@@ -273,7 +278,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -64,7 +64,12 @@
           "label": "Chart guide",
           "path": "src/docs/Charts.mdx"
         }
-      ]
+      ],
+      "styling": {
+        "rationale": "The renderer observes the host; application-supplied dimensions and chart definition remain authoritative.",
+        "protected": [],
+        "customProperties": []
+      }
     },
     "api": {
       "props": {
@@ -235,7 +240,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }
@@ -256,7 +261,7 @@
     },
     {
       "path": "src/wc/components/Chart/Chart.tsx",
-      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport type {\n  ChartDefinition,\n  ChartPoint,\n  ChartTooltipItem,\n  ChartTooltipOptions,\n} from '../../utils/chart-grammar';\nimport {\n  compileChartScene,\n  findChartFocus,\n  type ChartScene,\n  type ChartSceneNode,\n} from '../../utils/chart-scene';\nimport { resolveChartTheme } from '../../utils/chart-theme';\n\nconst DEFAULT_WIDTH = 480;\nconst DEFAULT_HEIGHT = 320;\n\nexport type ChartFocusSource = 'pointer' | 'keyboard';\n\nexport interface ChartFocusChangeDetail {\n  primary: ChartPoint | null;\n  points: readonly ChartPoint[];\n  source: ChartFocusSource;\n}\n\ninterface FocusState {\n  primary: ChartPoint;\n  points: ChartPoint[];\n  source: ChartFocusSource;\n}\n\ninterface PointerAnchor {\n  x: number;\n  y: number;\n}\n\n@Component({\n  tag: 'ds-chart',\n  styleUrl: 'Chart.css',\n  scoped: true,\n})\nexport class Chart {\n  @Element() el!: HTMLElement;\n\n  /** Typed chart definition. Set as a JavaScript property, not an HTML attribute. */\n  @Prop() definition!: ChartDefinition;\n  /** Required accessible name for the visualization. */\n  @Prop() label!: string;\n  /** Optional longer accessible description. */\n  @Prop() description?: string;\n  /** Locale used by axes and default tooltip formatters. */\n  @Prop() locale?: string;\n  /** Fixed surface width. Otherwise the chart observes its container. */\n  @Prop() width?: number;\n  /** Product-owned surface height. Wins over aspectRatio. */\n  @Prop() height?: number;\n  /** Derives height from the current width when height is not supplied. */\n  @Prop() aspectRatio?: number;\n\n  /** Fires whenever pointer or keyboard focus resolves to semantic chart points. */\n  @Event() dsChartFocusChange!: EventEmitter<ChartFocusChangeDetail>;\n\n  @State() private surfaceWidth = DEFAULT_WIDTH;\n  @State() private containerHeight?: number;\n  @State() private scene?: ChartScene;\n  @State() private focusState?: FocusState;\n  @State() private pointerAnchor?: PointerAnchor;\n\n  private resizeObserver?: ResizeObserver;\n  private resizeFrame?: number;\n  private compileFrame?: number;\n  private warnedConflictingHeight = false;\n  private measuredLabels = new Map<string, { width: number; height: number }>();\n  private descriptionId = `ds-chart-description-${Math.random().toString(36).slice(2)}`;\n  private clipId = `ds-chart-clip-${Math.random().toString(36).slice(2)}`;\n\n  componentWillLoad() {\n    if (this.width && this.width > 0) this.surfaceWidth = this.width;\n    this.compile();\n  }\n\n  componentDidLoad() {\n    this.connectResizeObserver();\n    this.waitForFonts();\n  }\n\n  componentDidRender() {\n    this.measureRenderedLabels();\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n    if (this.resizeFrame) cancelAnimationFrame(this.resizeFrame);\n    if (this.compileFrame) cancelAnimationFrame(this.compileFrame);\n  }\n\n  @Watch('definition')\n  @Watch('locale')\n  @Watch('height')\n  @Watch('aspectRatio')\n  onDefinitionInputChange() {\n    this.scheduleCompile();\n  }\n\n  @Watch('width')\n  onWidthChange() {\n    if (this.width && this.width > 0) this.surfaceWidth = this.width;\n    else this.measureHost();\n    this.scheduleCompile();\n  }\n\n  private get surfaceHeight(): number {\n    if (this.height && this.height > 0) {\n      if (this.aspectRatio && !this.warnedConflictingHeight) {\n        this.warnedConflictingHeight = true;\n        console.warn('[ds-chart] height wins when both height and aspectRatio are supplied.');\n      }\n      return this.height;\n    }\n    if (this.aspectRatio && this.aspectRatio > 0) {\n      return Math.max(1, this.surfaceWidth / this.aspectRatio);\n    }\n    return this.containerHeight ?? DEFAULT_HEIGHT;\n  }\n\n  private connectResizeObserver() {\n    this.resizeObserver?.disconnect();\n    if (typeof ResizeObserver === 'undefined') return;\n    this.resizeObserver = new ResizeObserver(entries => {\n      const entry = entries[0];\n      if (!entry) return;\n      if (this.resizeFrame) cancelAnimationFrame(this.resizeFrame);\n      this.resizeFrame = requestAnimationFrame(() => {\n        this.resizeFrame = undefined;\n        this.applyMeasuredSize(entry.contentRect.width, entry.contentRect.height);\n      });\n    });\n    this.resizeObserver.observe(this.el);\n    this.measureHost();\n  }\n\n  private measureHost() {\n    const bounds = this.el.getBoundingClientRect();\n    this.applyMeasuredSize(bounds.width, bounds.height);\n  }\n\n  private applyMeasuredSize(width: number, height: number) {\n    let changed = false;\n    if (!this.width && width > 0) {\n      const nextWidth = Math.round(width * 100) / 100;\n      if (nextWidth !== this.surfaceWidth) {\n        this.surfaceWidth = nextWidth;\n        changed = true;\n      }\n    }\n    if (!this.height && !this.aspectRatio && height > 0) {\n      const nextHeight = Math.round(height * 100) / 100;\n      if (nextHeight !== this.containerHeight) {\n        this.containerHeight = nextHeight;\n        changed = true;\n      }\n    }\n    if (changed) {\n      this.scheduleCompile();\n    }\n  }\n\n  private scheduleCompile() {\n    if (this.compileFrame) cancelAnimationFrame(this.compileFrame);\n    this.compileFrame = requestAnimationFrame(() => {\n      this.compileFrame = undefined;\n      this.compile();\n    });\n  }\n\n  private compile() {\n    if (!this.definition || !(this.surfaceWidth > 0) || !(this.surfaceHeight > 0)) return;\n    const previousKey = this.focusState?.primary.sceneKey;\n    const scene = compileChartScene(\n      this.definition,\n      this.surfaceWidth,\n      this.surfaceHeight,\n      this.locale ?? document.documentElement.lang ?? 'en',\n      text => this.measuredLabels.get(text) ?? { width: text.length * 7, height: 14 },\n      resolveChartTheme(this.el)\n    );\n    this.scene = scene;\n    if (previousKey) {\n      const restored = scene.points.find(point => point.sceneKey === previousKey);\n      if (restored && this.focusState) {\n        const grouped = findChartFocus(\n          scene.points,\n          scene.focus,\n          restored.x,\n          restored.y,\n          scene.maxFocusDistance,\n          scene.arcHitRegions\n        );\n        this.focusState = grouped ? { ...grouped, source: this.focusState.source } : undefined;\n      } else {\n        this.focusState = undefined;\n      }\n    }\n  }\n\n  private waitForFonts() {\n    if (!document.fonts) return;\n    void document.fonts.ready.then(() => {\n      this.measuredLabels.clear();\n      this.scheduleCompile();\n    });\n  }\n\n  private measureRenderedLabels() {\n    const labels = this.el.querySelectorAll<SVGTextElement>('[data-chart-measure]');\n    let changed = false;\n    labels.forEach(label => {\n      const text = label.textContent ?? '';\n      let box: DOMRect;\n      try {\n        box = label.getBBox();\n      } catch {\n        return;\n      }\n      const previous = this.measuredLabels.get(text);\n      if (\n        !previous ||\n        Math.abs(previous.width - box.width) > 0.5 ||\n        Math.abs(previous.height - box.height) > 0.5\n      ) {\n        this.measuredLabels.set(text, { width: box.width, height: box.height });\n        changed = true;\n      }\n    });\n    if (changed) this.scheduleCompile();\n  }\n\n  private resolveFocus(x: number, y: number, source: ChartFocusSource) {\n    if (!this.scene) return;\n    const result = findChartFocus(\n      this.scene.points,\n      this.scene.focus,\n      x,\n      y,\n      this.scene.maxFocusDistance,\n      this.scene.arcHitRegions\n    );\n    if (!result) {\n      this.clearFocus(source);\n      return;\n    }\n    if (\n      this.focusState?.primary.sceneKey === result.primary.sceneKey &&\n      this.focusState.source === source\n    )\n      return;\n    this.focusState = { ...result, source };\n    this.dsChartFocusChange.emit({ ...result, source });\n  }\n\n  private clearFocus(source: ChartFocusSource) {\n    if (!this.focusState) return;\n    this.focusState = undefined;\n    this.dsChartFocusChange.emit({ primary: null, points: [], source });\n  }\n\n  private onPointerMove = (event: PointerEvent) => {\n    const svg = event.currentTarget as SVGSVGElement;\n    const rect = svg.getBoundingClientRect();\n    const x = event.clientX - rect.left;\n    const y = event.clientY - rect.top;\n    this.pointerAnchor = this.scene?.arcHitRegions.length ? { x, y } : undefined;\n    this.resolveFocus(x, y, 'pointer');\n  };\n\n  private onPointerLeave = () => {\n    this.pointerAnchor = undefined;\n    this.clearFocus('pointer');\n  };\n\n  private keyboardPoints(): ChartPoint[] {\n    if (!this.scene) return [];\n    return [...this.scene.points].sort((a, b) => a.x - b.x || a.y - b.y);\n  }\n\n  private onKeyDown = (event: KeyboardEvent) => {\n    const points = this.keyboardPoints();\n    if (points.length === 0) return;\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      this.clearFocus('keyboard');\n      return;\n    }\n    const current = this.focusState\n      ? points.findIndex(point => point.sceneKey === this.focusState?.primary.sceneKey)\n      : -1;\n    let next: number | undefined;\n    if (event.key === 'Home') next = 0;\n    else if (event.key === 'End') next = points.length - 1;\n    else if (event.key === 'ArrowRight' || event.key === 'ArrowDown')\n      next = Math.min(points.length - 1, current + 1);\n    else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp')\n      next = Math.max(0, current < 0 ? 0 : current - 1);\n    else return;\n    event.preventDefault();\n    const point = points[next ?? 0] ?? points[0];\n    this.resolveFocus(point.x, point.y, 'keyboard');\n  };\n\n  private renderNode(node: ChartSceneNode, className = 'chart__mark') {\n    const resolvedClassName = node.className ?? className;\n    const presentation = {\n      fill: node.style.fill,\n      stroke: node.style.stroke,\n      opacity: node.style.opacity,\n      'fill-opacity': node.style.fillOpacity,\n      'stroke-opacity': node.style.strokeOpacity,\n      'stroke-width': node.style.strokeWidth,\n      'stroke-dasharray': node.style.strokeDasharray || undefined,\n    };\n    if (node.type === 'path')\n      return (\n        <path\n          key={node.key}\n          class={resolvedClassName}\n          d={node.d}\n          transform={node.transform}\n          {...presentation}\n        />\n      );\n    if (node.type === 'rect') {\n      return (\n        <rect\n          key={node.key}\n          class={resolvedClassName}\n          x={node.x}\n          y={node.y}\n          width={node.width}\n          height={node.height}\n          rx={node.style.radius}\n          {...presentation}\n        />\n      );\n    }\n    if (node.type === 'circle')\n      return (\n        <circle\n          key={node.key}\n          class={resolvedClassName}\n          cx={node.x}\n          cy={node.y}\n          r={node.radius}\n          {...presentation}\n        />\n      );\n    if (node.type === 'line')\n      return (\n        <line\n          key={node.key}\n          class={resolvedClassName}\n          x1={node.x1}\n          x2={node.x2}\n          y1={node.y1}\n          y2={node.y2}\n          {...presentation}\n        />\n      );\n    return (\n      <text\n        key={node.key}\n        class={node.className ?? `${className} chart__text-mark`}\n        data-chart-measure={node.measure ? '' : undefined}\n        x={node.x}\n        y={node.y}\n        dx={node.dx}\n        dy={node.dy}\n        text-anchor={node.style.textAnchor}\n        font-family={node.style.fontFamily}\n        font-size={node.style.fontSize}\n        font-weight={node.style.fontWeight}\n        dominant-baseline={node.dominantBaseline ?? 'middle'}\n        transform={node.rotate ? `rotate(${node.rotate} ${node.x} ${node.y})` : undefined}\n        {...presentation}\n      >\n        {node.text}\n      </text>\n    );\n  }\n\n  private renderMarkLayers(scene: ChartScene) {\n    const layers: Array<{ clipped: boolean; nodes: ChartSceneNode[] }> = [];\n    scene.nodes.forEach(node => {\n      const clipped = scene.clip && node.clipToPlot !== false;\n      const current = layers[layers.length - 1];\n      if (current?.clipped === clipped) current.nodes.push(node);\n      else layers.push({ clipped, nodes: [node] });\n    });\n    return layers.map((layer, index) => (\n      <g\n        key={`marks-${index}`}\n        class=\"chart__marks\"\n        aria-hidden=\"true\"\n        clip-path={layer.clipped ? `url(#${this.clipId})` : undefined}\n      >\n        {layer.nodes.map(node => this.renderNode(node))}\n      </g>\n    ));\n  }\n\n  private focusedDotPoints(scene: ChartScene): ChartPoint[] {\n    if (!this.focusState) return [];\n    const focusDotPointKeys = new Set(scene.focusDotPointKeys);\n    return this.focusState.points.filter(point => focusDotPointKeys.has(point.sceneKey));\n  }\n\n  private tooltipContent(): { heading?: string; items: ChartTooltipItem[] } | undefined {\n    if (!this.scene || !this.focusState || this.scene.tooltip === false) return undefined;\n    const options: ChartTooltipOptions =\n      typeof this.scene.tooltip === 'object' ? this.scene.tooltip : {};\n    const locale = this.locale ?? document.documentElement.lang ?? 'en';\n    const points = this.focusState.points;\n    const formatValue = (point: ChartPoint) => {\n      const value = point.value ?? point.yValue;\n      return (\n        options.format?.(point, locale) ??\n        (typeof value === 'number'\n          ? new Intl.NumberFormat(locale, { maximumFractionDigits: 2 }).format(value)\n          : String(value))\n      );\n    };\n    return {\n      heading:\n        points.length > 1\n          ? (options.formatGroupHeading?.(points, locale) ?? String(this.focusState.primary.xValue))\n          : undefined,\n      items: points.map(\n        point =>\n          options.formatGroupItem?.(point, locale) ?? {\n            label: point.groupLabel ?? point.markId,\n            value: formatValue(point),\n            color: point.color,\n          }\n      ),\n    };\n  }\n\n  private statusText(): string {\n    const content = this.tooltipContent();\n    if (!content) return '';\n    return [content.heading, ...content.items.map(item => `${item.label}: ${item.value}`)]\n      .filter(Boolean)\n      .join('. ');\n  }\n\n  render() {\n    const scene = this.scene;\n    const tooltip = this.tooltipContent();\n    const focus = this.focusState?.primary;\n    const tooltipAnchor =\n      focus &&\n      this.focusState?.source === 'pointer' &&\n      scene?.arcHitRegions.length &&\n      this.pointerAnchor\n        ? this.pointerAnchor\n        : focus;\n    const focusedDotPoints = scene ? this.focusedDotPoints(scene) : [];\n    const groupedPointFocus =\n      scene?.coordinate === 'cartesian' && scene.focus === 'group-x' && focusedDotPoints.length > 1;\n    const center =\n      focus && scene?.center?.focused\n        ? scene.center.focused(focus, this.locale ?? document.documentElement.lang ?? 'en')\n        : scene?.center;\n    return (\n      <Host\n        class=\"chart\"\n        style={{\n          '--ds-chart-width': this.width ? `${this.width}px` : '100%',\n          '--ds-chart-height':\n            this.height || this.aspectRatio\n              ? `${this.surfaceHeight}px`\n              : 'var(--ds-chart-container-height, 320px)',\n        }}\n      >\n        {this.description && (\n          <span id={this.descriptionId} class=\"chart__description\">\n            {this.description}\n          </span>\n        )}\n        {scene && (\n          /* eslint-disable-next-line local/prefer-ds-icon -- SVG is the chart renderer. */\n          <svg\n            class=\"chart__surface\"\n            width={scene.width}\n            height={scene.height}\n            viewBox={`0 0 ${scene.width} ${scene.height}`}\n            role=\"img\"\n            aria-label={this.label || 'Chart'}\n            aria-describedby={this.description ? this.descriptionId : undefined}\n            tabindex={0}\n            onPointerMove={this.onPointerMove}\n            onPointerLeave={this.onPointerLeave}\n            onKeyDown={this.onKeyDown}\n          >\n            <defs aria-hidden=\"true\">\n              <clipPath id={this.clipId}>\n                <rect\n                  x={scene.plot.left}\n                  y={scene.plot.top}\n                  width={scene.plot.width}\n                  height={scene.plot.height}\n                />\n              </clipPath>\n            </defs>\n            <rect\n              class=\"chart__interaction-surface\"\n              x=\"0\"\n              y=\"0\"\n              width={scene.width}\n              height={scene.height}\n              aria-hidden=\"true\"\n            />\n            <g class=\"chart__guides\" aria-hidden=\"true\">\n              {scene.guides.map(node => this.renderNode(node, 'chart__grid chart__polar-guide'))}\n              {scene.yAxis.line && (\n                <line\n                  class=\"chart__axis-line\"\n                  x1={scene.plot.left}\n                  x2={scene.plot.left}\n                  y1={scene.plot.top}\n                  y2={scene.plot.bottom}\n                />\n              )}\n              {scene.yAxis.ticks.map(tick => (\n                <g key={`y-${tick.key}`}>\n                  {scene.yAxis.grid && (\n                    <line\n                      class=\"chart__grid\"\n                      x1={scene.plot.left}\n                      x2={scene.plot.right}\n                      y1={tick.position}\n                      y2={tick.position}\n                    />\n                  )}\n                  <line\n                    class=\"chart__axis-line chart__tick-stub\"\n                    x1={scene.plot.left - scene.yAxis.tickSize}\n                    x2={scene.plot.left}\n                    y1={tick.position}\n                    y2={tick.position}\n                  />\n                  {tick.labelVisible && (\n                    <text\n                      data-chart-measure\n                      class=\"chart__tick chart__tick--y\"\n                      x={scene.plot.left - scene.yAxis.tickSize - scene.yAxis.tickPadding}\n                      y={tick.position}\n                      text-anchor=\"end\"\n                      dominant-baseline=\"middle\"\n                    >\n                      {tick.label}\n                    </text>\n                  )}\n                </g>\n              ))}\n              {scene.xAxis.line && (\n                <line\n                  class=\"chart__axis-line\"\n                  x1={scene.plot.left}\n                  x2={scene.plot.right}\n                  y1={scene.plot.bottom}\n                  y2={scene.plot.bottom}\n                />\n              )}\n              {scene.xAxis.ticks.map(tick => (\n                <g key={`x-${tick.key}`}>\n                  {scene.xAxis.grid && (\n                    <line\n                      class=\"chart__grid\"\n                      x1={tick.position}\n                      x2={tick.position}\n                      y1={scene.plot.top}\n                      y2={scene.plot.bottom}\n                    />\n                  )}\n                  <line\n                    class=\"chart__axis-line chart__tick-stub\"\n                    x1={tick.position}\n                    x2={tick.position}\n                    y1={scene.plot.bottom}\n                    y2={scene.plot.bottom + scene.xAxis.tickSize}\n                  />\n                  {tick.labelVisible && (\n                    <text\n                      data-chart-measure\n                      class=\"chart__tick chart__tick--x\"\n                      x={tick.position}\n                      y={scene.plot.bottom + scene.xAxis.tickSize + scene.xAxis.tickPadding}\n                      text-anchor=\"middle\"\n                      dominant-baseline=\"hanging\"\n                      transform={\n                        scene.xAxis.rotate\n                          ? `rotate(${scene.xAxis.rotate} ${tick.position} ${scene.plot.bottom + scene.xAxis.tickSize + scene.xAxis.tickPadding})`\n                          : undefined\n                      }\n                    >\n                      {tick.label}\n                    </text>\n                  )}\n                </g>\n              ))}\n              {scene.xAxis.label && (\n                <text\n                  class=\"chart__axis-title\"\n                  x={(scene.plot.left + scene.plot.right) / 2}\n                  y={scene.height - 4}\n                  text-anchor=\"middle\"\n                >\n                  {scene.xAxis.label}\n                </text>\n              )}\n              {scene.yAxis.label && (\n                <text\n                  class=\"chart__axis-title\"\n                  x=\"8\"\n                  y={(scene.plot.top + scene.plot.bottom) / 2}\n                  text-anchor=\"middle\"\n                  dominant-baseline=\"middle\"\n                  transform={`rotate(-90 8 ${(scene.plot.top + scene.plot.bottom) / 2})`}\n                >\n                  {scene.yAxis.label}\n                </text>\n              )}\n              {scene.coordinate === 'cartesian' && (\n                <g class=\"chart__plot-frame\">\n                  <line\n                    class=\"chart__plot-boundary chart__plot-boundary--top\"\n                    x1={scene.plot.left}\n                    x2={scene.plot.right}\n                    y1={scene.plot.top}\n                    y2={scene.plot.top}\n                  />\n                  <line\n                    class=\"chart__plot-boundary chart__plot-boundary--right\"\n                    x1={scene.plot.right}\n                    x2={scene.plot.right}\n                    y1={scene.plot.top}\n                    y2={scene.plot.bottom}\n                  />\n                </g>\n              )}\n            </g>\n            {this.renderMarkLayers(scene)}\n            {groupedPointFocus && focus && (\n              <line\n                class=\"chart__focus-guide\"\n                x1={focus.x}\n                x2={focus.x}\n                y1={scene.plot.top}\n                y2={scene.plot.bottom}\n                aria-hidden=\"true\"\n              />\n            )}\n            {focusedDotPoints.map(point => (\n              <circle\n                key={`focus-${point.sceneKey}`}\n                class=\"chart__focus-point\"\n                cx={point.x}\n                cy={point.y}\n                r={scene.focusDotCircleRadius}\n                fill={point.color}\n                stroke=\"var(--color-background-primary)\"\n                stroke-width={scene.focusDotHaloWidth}\n                aria-hidden=\"true\"\n              />\n            ))}\n            {focus && focusedDotPoints.length === 0 && (\n              <circle class=\"chart__focus\" cx={focus.x} cy={focus.y} r=\"6\" aria-hidden=\"true\" />\n            )}\n            {center?.value && (\n              <text\n                class=\"chart__center-value\"\n                x={(scene.plot.left + scene.plot.right) / 2}\n                y={(scene.plot.top + scene.plot.bottom) / 2 - (center.caption ? 10 : 0)}\n                text-anchor=\"middle\"\n                dominant-baseline=\"middle\"\n                aria-hidden=\"true\"\n              >\n                {center.value}\n              </text>\n            )}\n            {center?.caption && (\n              <text\n                class=\"chart__center-caption\"\n                x={(scene.plot.left + scene.plot.right) / 2}\n                y={(scene.plot.top + scene.plot.bottom) / 2 + 14}\n                text-anchor=\"middle\"\n                dominant-baseline=\"middle\"\n                aria-hidden=\"true\"\n              >\n                {center.caption}\n              </text>\n            )}\n          </svg>\n        )}\n        {tooltip && tooltipAnchor && (\n          <ds-tooltip-chart\n            heading={tooltip.heading}\n            items={tooltip.items}\n            x={tooltipAnchor.x}\n            y={tooltipAnchor.y}\n          />\n        )}\n        <span class=\"chart__status\" aria-live=\"polite\" aria-atomic=\"true\">\n          {this.statusText()}\n        </span>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport type {\n  ChartDefinition,\n  ChartPoint,\n  ChartTooltipItem,\n  ChartTooltipOptions,\n} from '../../utils/chart-grammar';\nimport {\n  compileChartScene,\n  findChartFocus,\n  type ChartScene,\n  type ChartSceneNode,\n} from '../../utils/chart-scene';\nimport { resolveChartTheme } from '../../utils/chart-theme';\n\nconst DEFAULT_WIDTH = 480;\nconst DEFAULT_HEIGHT = 320;\n\nexport type ChartFocusSource = 'pointer' | 'keyboard';\n\nexport interface ChartFocusChangeDetail {\n  primary: ChartPoint | null;\n  points: readonly ChartPoint[];\n  source: ChartFocusSource;\n}\n\ninterface FocusState {\n  primary: ChartPoint;\n  points: ChartPoint[];\n  source: ChartFocusSource;\n}\n\ninterface PointerAnchor {\n  x: number;\n  y: number;\n}\n\n@Component({\n  tag: 'ds-chart',\n  styleUrl: 'Chart.css',\n  scoped: true,\n})\nexport class Chart {\n  @Element() el!: HTMLElement;\n\n  /** Typed chart definition. Set as a JavaScript property, not an HTML attribute. */\n  @Prop() definition!: ChartDefinition;\n  /** Required accessible name for the visualization. */\n  @Prop() label!: string;\n  /** Optional longer accessible description. */\n  @Prop() description?: string;\n  /** Locale used by axes and default tooltip formatters. */\n  @Prop() locale?: string;\n  /** Fixed surface width. Otherwise the chart observes its container. */\n  @Prop() width?: number;\n  /** Product-owned surface height. Wins over aspectRatio. */\n  @Prop() height?: number;\n  /** Derives height from the current width when height is not supplied. */\n  @Prop() aspectRatio?: number;\n\n  /** Fires whenever pointer or keyboard focus resolves to semantic chart points. */\n  @Event() dsChartFocusChange!: EventEmitter<ChartFocusChangeDetail>;\n\n  @State() private surfaceWidth = DEFAULT_WIDTH;\n  @State() private containerHeight?: number;\n  @State() private scene?: ChartScene;\n  @State() private focusState?: FocusState;\n  @State() private pointerAnchor?: PointerAnchor;\n\n  private resizeObserver?: ResizeObserver;\n  private resizeFrame?: number;\n  private compileFrame?: number;\n  private warnedConflictingHeight = false;\n  private measuredLabels = new Map<string, { width: number; height: number }>();\n  private descriptionId = `ds-chart-description-${Math.random().toString(36).slice(2)}`;\n  private clipId = `ds-chart-clip-${Math.random().toString(36).slice(2)}`;\n\n  componentWillLoad() {\n    if (this.width && this.width > 0) this.surfaceWidth = this.width;\n    this.compile();\n  }\n\n  componentDidLoad() {\n    this.connectResizeObserver();\n    this.waitForFonts();\n  }\n\n  componentDidRender() {\n    this.measureRenderedLabels();\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n    if (this.resizeFrame) cancelAnimationFrame(this.resizeFrame);\n    if (this.compileFrame) cancelAnimationFrame(this.compileFrame);\n  }\n\n  @Watch('definition')\n  @Watch('locale')\n  @Watch('height')\n  @Watch('aspectRatio')\n  onDefinitionInputChange() {\n    this.scheduleCompile();\n  }\n\n  @Watch('width')\n  onWidthChange() {\n    if (this.width && this.width > 0) this.surfaceWidth = this.width;\n    else this.measureHost();\n    this.scheduleCompile();\n  }\n\n  private get surfaceHeight(): number {\n    if (this.height && this.height > 0) {\n      if (this.aspectRatio && !this.warnedConflictingHeight) {\n        this.warnedConflictingHeight = true;\n        console.warn('[ds-chart] height wins when both height and aspectRatio are supplied.');\n      }\n      return this.height;\n    }\n    if (this.aspectRatio && this.aspectRatio > 0) {\n      return Math.max(1, this.surfaceWidth / this.aspectRatio);\n    }\n    return this.containerHeight ?? DEFAULT_HEIGHT;\n  }\n\n  private connectResizeObserver() {\n    this.resizeObserver?.disconnect();\n    if (typeof ResizeObserver === 'undefined') return;\n    this.resizeObserver = new ResizeObserver(entries => {\n      const entry = entries[0];\n      if (!entry) return;\n      if (this.resizeFrame) cancelAnimationFrame(this.resizeFrame);\n      this.resizeFrame = requestAnimationFrame(() => {\n        this.resizeFrame = undefined;\n        this.applyMeasuredSize(entry.contentRect.width, entry.contentRect.height);\n      });\n    });\n    this.resizeObserver.observe(this.el);\n    this.measureHost();\n  }\n\n  private measureHost() {\n    const bounds = this.el.getBoundingClientRect();\n    this.applyMeasuredSize(bounds.width, bounds.height);\n  }\n\n  private applyMeasuredSize(width: number, height: number) {\n    let changed = false;\n    if (!this.width && width > 0) {\n      const nextWidth = Math.round(width * 100) / 100;\n      if (nextWidth !== this.surfaceWidth) {\n        this.surfaceWidth = nextWidth;\n        changed = true;\n      }\n    }\n    if (!this.height && !this.aspectRatio && height > 0) {\n      const nextHeight = Math.round(height * 100) / 100;\n      if (nextHeight !== this.containerHeight) {\n        this.containerHeight = nextHeight;\n        changed = true;\n      }\n    }\n    if (changed) {\n      this.scheduleCompile();\n    }\n  }\n\n  private scheduleCompile() {\n    if (this.compileFrame) cancelAnimationFrame(this.compileFrame);\n    this.compileFrame = requestAnimationFrame(() => {\n      this.compileFrame = undefined;\n      this.compile();\n    });\n  }\n\n  private compile() {\n    if (!this.definition || !(this.surfaceWidth > 0) || !(this.surfaceHeight > 0)) return;\n    const previousKey = this.focusState?.primary.sceneKey;\n    const scene = compileChartScene(\n      this.definition,\n      this.surfaceWidth,\n      this.surfaceHeight,\n      this.locale ?? document.documentElement.lang ?? 'en',\n      text => this.measuredLabels.get(text) ?? { width: text.length * 7, height: 14 },\n      resolveChartTheme(this.el)\n    );\n    this.scene = scene;\n    if (previousKey) {\n      const restored = scene.points.find(point => point.sceneKey === previousKey);\n      if (restored && this.focusState) {\n        const grouped = findChartFocus(\n          scene.points,\n          scene.focus,\n          restored.x,\n          restored.y,\n          scene.maxFocusDistance,\n          scene.arcHitRegions\n        );\n        this.focusState = grouped ? { ...grouped, source: this.focusState.source } : undefined;\n      } else {\n        this.focusState = undefined;\n      }\n    }\n  }\n\n  private waitForFonts() {\n    if (!document.fonts) return;\n    void document.fonts.ready.then(() => {\n      this.measuredLabels.clear();\n      this.scheduleCompile();\n    });\n  }\n\n  private measureRenderedLabels() {\n    const labels = this.el.querySelectorAll<SVGTextElement>('[data-chart-measure]');\n    let changed = false;\n    labels.forEach(label => {\n      const text = label.textContent ?? '';\n      let box: DOMRect;\n      try {\n        box = label.getBBox();\n      } catch {\n        return;\n      }\n      const previous = this.measuredLabels.get(text);\n      if (\n        !previous ||\n        Math.abs(previous.width - box.width) > 0.5 ||\n        Math.abs(previous.height - box.height) > 0.5\n      ) {\n        this.measuredLabels.set(text, { width: box.width, height: box.height });\n        changed = true;\n      }\n    });\n    if (changed) this.scheduleCompile();\n  }\n\n  private resolveFocus(x: number, y: number, source: ChartFocusSource) {\n    if (!this.scene) return;\n    const result = findChartFocus(\n      this.scene.points,\n      this.scene.focus,\n      x,\n      y,\n      this.scene.maxFocusDistance,\n      this.scene.arcHitRegions\n    );\n    if (!result) {\n      this.clearFocus(source);\n      return;\n    }\n    if (\n      this.focusState?.primary.sceneKey === result.primary.sceneKey &&\n      this.focusState.source === source\n    )\n      return;\n    this.focusState = { ...result, source };\n    this.dsChartFocusChange.emit({ ...result, source });\n  }\n\n  private clearFocus(source: ChartFocusSource) {\n    if (!this.focusState) return;\n    this.focusState = undefined;\n    this.dsChartFocusChange.emit({ primary: null, points: [], source });\n  }\n\n  private onPointerMove = (event: PointerEvent) => {\n    const svg = event.currentTarget as SVGSVGElement;\n    const rect = svg.getBoundingClientRect();\n    const x = event.clientX - rect.left;\n    const y = event.clientY - rect.top;\n    this.pointerAnchor = this.scene?.arcHitRegions.length ? { x, y } : undefined;\n    this.resolveFocus(x, y, 'pointer');\n  };\n\n  private onPointerLeave = () => {\n    this.pointerAnchor = undefined;\n    this.clearFocus('pointer');\n  };\n\n  private keyboardPoints(): ChartPoint[] {\n    if (!this.scene) return [];\n    return [...this.scene.points].sort((a, b) => a.x - b.x || a.y - b.y);\n  }\n\n  private onKeyDown = (event: KeyboardEvent) => {\n    const points = this.keyboardPoints();\n    if (points.length === 0) return;\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      this.clearFocus('keyboard');\n      return;\n    }\n    const current = this.focusState\n      ? points.findIndex(point => point.sceneKey === this.focusState?.primary.sceneKey)\n      : -1;\n    let next: number | undefined;\n    if (event.key === 'Home') next = 0;\n    else if (event.key === 'End') next = points.length - 1;\n    else if (event.key === 'ArrowRight' || event.key === 'ArrowDown')\n      next = Math.min(points.length - 1, current + 1);\n    else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp')\n      next = Math.max(0, current < 0 ? 0 : current - 1);\n    else return;\n    event.preventDefault();\n    const point = points[next ?? 0] ?? points[0];\n    this.resolveFocus(point.x, point.y, 'keyboard');\n  };\n\n  private renderNode(node: ChartSceneNode, className = 'chart__mark') {\n    const resolvedClassName = node.className ?? className;\n    const presentation = {\n      fill: node.style.fill,\n      stroke: node.style.stroke,\n      opacity: node.style.opacity,\n      'fill-opacity': node.style.fillOpacity,\n      'stroke-opacity': node.style.strokeOpacity,\n      'stroke-width': node.style.strokeWidth,\n      'stroke-dasharray': node.style.strokeDasharray || undefined,\n    };\n    if (node.type === 'path')\n      return (\n        <path\n          key={node.key}\n          class={resolvedClassName}\n          d={node.d}\n          transform={node.transform}\n          {...presentation}\n        />\n      );\n    if (node.type === 'rect') {\n      return (\n        <rect\n          key={node.key}\n          class={resolvedClassName}\n          x={node.x}\n          y={node.y}\n          width={node.width}\n          height={node.height}\n          rx={node.style.radius}\n          {...presentation}\n        />\n      );\n    }\n    if (node.type === 'circle')\n      return (\n        <circle\n          key={node.key}\n          class={resolvedClassName}\n          cx={node.x}\n          cy={node.y}\n          r={node.radius}\n          {...presentation}\n        />\n      );\n    if (node.type === 'line')\n      return (\n        <line\n          key={node.key}\n          class={resolvedClassName}\n          x1={node.x1}\n          x2={node.x2}\n          y1={node.y1}\n          y2={node.y2}\n          {...presentation}\n        />\n      );\n    return (\n      <text\n        key={node.key}\n        class={node.className ?? `${className} chart__text-mark`}\n        data-chart-measure={node.measure ? '' : undefined}\n        x={node.x}\n        y={node.y}\n        dx={node.dx}\n        dy={node.dy}\n        text-anchor={node.style.textAnchor}\n        font-family={node.style.fontFamily}\n        font-size={node.style.fontSize}\n        font-weight={node.style.fontWeight}\n        dominant-baseline={node.dominantBaseline ?? 'middle'}\n        transform={node.rotate ? `rotate(${node.rotate} ${node.x} ${node.y})` : undefined}\n        {...presentation}\n      >\n        {node.text}\n      </text>\n    );\n  }\n\n  private renderMarkLayers(scene: ChartScene) {\n    const layers: Array<{ clipped: boolean; nodes: ChartSceneNode[] }> = [];\n    scene.nodes.forEach(node => {\n      const clipped = scene.clip && node.clipToPlot !== false;\n      const current = layers[layers.length - 1];\n      if (current?.clipped === clipped) current.nodes.push(node);\n      else layers.push({ clipped, nodes: [node] });\n    });\n    return layers.map((layer, index) => (\n      <g\n        key={`marks-${index}`}\n        class=\"chart__marks\"\n        aria-hidden=\"true\"\n        clip-path={layer.clipped ? `url(#${this.clipId})` : undefined}\n      >\n        {layer.nodes.map(node => this.renderNode(node))}\n      </g>\n    ));\n  }\n\n  private focusedDotPoints(scene: ChartScene): ChartPoint[] {\n    if (!this.focusState) return [];\n    const focusDotPointKeys = new Set(scene.focusDotPointKeys);\n    return this.focusState.points.filter(point => focusDotPointKeys.has(point.sceneKey));\n  }\n\n  private tooltipContent(): { heading?: string; items: ChartTooltipItem[] } | undefined {\n    if (!this.scene || !this.focusState || this.scene.tooltip === false) return undefined;\n    const options: ChartTooltipOptions =\n      typeof this.scene.tooltip === 'object' ? this.scene.tooltip : {};\n    const locale = this.locale ?? document.documentElement.lang ?? 'en';\n    const points = this.focusState.points;\n    const formatValue = (point: ChartPoint) => {\n      const value = point.value ?? point.yValue;\n      return (\n        options.format?.(point, locale) ??\n        (typeof value === 'number'\n          ? new Intl.NumberFormat(locale, { maximumFractionDigits: 2 }).format(value)\n          : String(value))\n      );\n    };\n    return {\n      heading:\n        points.length > 1\n          ? (options.formatGroupHeading?.(points, locale) ?? String(this.focusState.primary.xValue))\n          : undefined,\n      items: points.map(\n        point =>\n          options.formatGroupItem?.(point, locale) ?? {\n            label: point.groupLabel ?? point.markId,\n            value: formatValue(point),\n            color: point.color,\n          }\n      ),\n    };\n  }\n\n  private statusText(): string {\n    const content = this.tooltipContent();\n    if (!content) return '';\n    return [content.heading, ...content.items.map(item => `${item.label}: ${item.value}`)]\n      .filter(Boolean)\n      .join('. ');\n  }\n\n  render() {\n    const scene = this.scene;\n    const tooltip = this.tooltipContent();\n    const focus = this.focusState?.primary;\n    const tooltipAnchor =\n      focus &&\n      this.focusState?.source === 'pointer' &&\n      scene?.arcHitRegions.length &&\n      this.pointerAnchor\n        ? this.pointerAnchor\n        : focus;\n    const focusedDotPoints = scene ? this.focusedDotPoints(scene) : [];\n    const groupedPointFocus =\n      scene?.coordinate === 'cartesian' && scene.focus === 'group-x' && focusedDotPoints.length > 1;\n    const center =\n      focus && scene?.center?.focused\n        ? scene.center.focused(focus, this.locale ?? document.documentElement.lang ?? 'en')\n        : scene?.center;\n    return (\n      <Host\n        class=\"chart\"\n        style={{\n          '--ds-chart-width': this.width ? `${this.width}px` : '100%',\n          '--ds-chart-height':\n            this.height || this.aspectRatio\n              ? `${this.surfaceHeight}px`\n              : 'var(--ds-chart-container-height, 320px)',\n        }}\n      >\n        {this.description && (\n          <span id={this.descriptionId} class=\"chart__description\">\n            {this.description}\n          </span>\n        )}\n        {scene && (\n          /* eslint-disable-next-line compomo/prefer-ds-icon -- SVG is the chart renderer. */\n          <svg\n            class=\"chart__surface\"\n            width={scene.width}\n            height={scene.height}\n            viewBox={`0 0 ${scene.width} ${scene.height}`}\n            role=\"img\"\n            aria-label={this.label || 'Chart'}\n            aria-describedby={this.description ? this.descriptionId : undefined}\n            tabindex={0}\n            onPointerMove={this.onPointerMove}\n            onPointerLeave={this.onPointerLeave}\n            onKeyDown={this.onKeyDown}\n          >\n            <defs aria-hidden=\"true\">\n              <clipPath id={this.clipId}>\n                <rect\n                  x={scene.plot.left}\n                  y={scene.plot.top}\n                  width={scene.plot.width}\n                  height={scene.plot.height}\n                />\n              </clipPath>\n            </defs>\n            <rect\n              class=\"chart__interaction-surface\"\n              x=\"0\"\n              y=\"0\"\n              width={scene.width}\n              height={scene.height}\n              aria-hidden=\"true\"\n            />\n            <g class=\"chart__guides\" aria-hidden=\"true\">\n              {scene.guides.map(node => this.renderNode(node, 'chart__grid chart__polar-guide'))}\n              {scene.yAxis.line && (\n                <line\n                  class=\"chart__axis-line\"\n                  x1={scene.plot.left}\n                  x2={scene.plot.left}\n                  y1={scene.plot.top}\n                  y2={scene.plot.bottom}\n                />\n              )}\n              {scene.yAxis.ticks.map(tick => (\n                <g key={`y-${tick.key}`}>\n                  {scene.yAxis.grid && (\n                    <line\n                      class=\"chart__grid\"\n                      x1={scene.plot.left}\n                      x2={scene.plot.right}\n                      y1={tick.position}\n                      y2={tick.position}\n                    />\n                  )}\n                  <line\n                    class=\"chart__axis-line chart__tick-stub\"\n                    x1={scene.plot.left - scene.yAxis.tickSize}\n                    x2={scene.plot.left}\n                    y1={tick.position}\n                    y2={tick.position}\n                  />\n                  {tick.labelVisible && (\n                    <text\n                      data-chart-measure\n                      class=\"chart__tick chart__tick--y\"\n                      x={scene.plot.left - scene.yAxis.tickSize - scene.yAxis.tickPadding}\n                      y={tick.position}\n                      text-anchor=\"end\"\n                      dominant-baseline=\"middle\"\n                    >\n                      {tick.label}\n                    </text>\n                  )}\n                </g>\n              ))}\n              {scene.xAxis.line && (\n                <line\n                  class=\"chart__axis-line\"\n                  x1={scene.plot.left}\n                  x2={scene.plot.right}\n                  y1={scene.plot.bottom}\n                  y2={scene.plot.bottom}\n                />\n              )}\n              {scene.xAxis.ticks.map(tick => (\n                <g key={`x-${tick.key}`}>\n                  {scene.xAxis.grid && (\n                    <line\n                      class=\"chart__grid\"\n                      x1={tick.position}\n                      x2={tick.position}\n                      y1={scene.plot.top}\n                      y2={scene.plot.bottom}\n                    />\n                  )}\n                  <line\n                    class=\"chart__axis-line chart__tick-stub\"\n                    x1={tick.position}\n                    x2={tick.position}\n                    y1={scene.plot.bottom}\n                    y2={scene.plot.bottom + scene.xAxis.tickSize}\n                  />\n                  {tick.labelVisible && (\n                    <text\n                      data-chart-measure\n                      class=\"chart__tick chart__tick--x\"\n                      x={tick.position}\n                      y={scene.plot.bottom + scene.xAxis.tickSize + scene.xAxis.tickPadding}\n                      text-anchor=\"middle\"\n                      dominant-baseline=\"hanging\"\n                      transform={\n                        scene.xAxis.rotate\n                          ? `rotate(${scene.xAxis.rotate} ${tick.position} ${scene.plot.bottom + scene.xAxis.tickSize + scene.xAxis.tickPadding})`\n                          : undefined\n                      }\n                    >\n                      {tick.label}\n                    </text>\n                  )}\n                </g>\n              ))}\n              {scene.xAxis.label && (\n                <text\n                  class=\"chart__axis-title\"\n                  x={(scene.plot.left + scene.plot.right) / 2}\n                  y={scene.height - 4}\n                  text-anchor=\"middle\"\n                >\n                  {scene.xAxis.label}\n                </text>\n              )}\n              {scene.yAxis.label && (\n                <text\n                  class=\"chart__axis-title\"\n                  x=\"8\"\n                  y={(scene.plot.top + scene.plot.bottom) / 2}\n                  text-anchor=\"middle\"\n                  dominant-baseline=\"middle\"\n                  transform={`rotate(-90 8 ${(scene.plot.top + scene.plot.bottom) / 2})`}\n                >\n                  {scene.yAxis.label}\n                </text>\n              )}\n              {scene.coordinate === 'cartesian' && (\n                <g class=\"chart__plot-frame\">\n                  <line\n                    class=\"chart__plot-boundary chart__plot-boundary--top\"\n                    x1={scene.plot.left}\n                    x2={scene.plot.right}\n                    y1={scene.plot.top}\n                    y2={scene.plot.top}\n                  />\n                  <line\n                    class=\"chart__plot-boundary chart__plot-boundary--right\"\n                    x1={scene.plot.right}\n                    x2={scene.plot.right}\n                    y1={scene.plot.top}\n                    y2={scene.plot.bottom}\n                  />\n                </g>\n              )}\n            </g>\n            {this.renderMarkLayers(scene)}\n            {groupedPointFocus && focus && (\n              <line\n                class=\"chart__focus-guide\"\n                x1={focus.x}\n                x2={focus.x}\n                y1={scene.plot.top}\n                y2={scene.plot.bottom}\n                aria-hidden=\"true\"\n              />\n            )}\n            {focusedDotPoints.map(point => (\n              <circle\n                key={`focus-${point.sceneKey}`}\n                class=\"chart__focus-point\"\n                cx={point.x}\n                cy={point.y}\n                r={scene.focusDotCircleRadius}\n                fill={point.color}\n                stroke=\"var(--color-background-primary)\"\n                stroke-width={scene.focusDotHaloWidth}\n                aria-hidden=\"true\"\n              />\n            ))}\n            {focus && focusedDotPoints.length === 0 && (\n              <circle class=\"chart__focus\" cx={focus.x} cy={focus.y} r=\"6\" aria-hidden=\"true\" />\n            )}\n            {center?.value && (\n              <text\n                class=\"chart__center-value\"\n                x={(scene.plot.left + scene.plot.right) / 2}\n                y={(scene.plot.top + scene.plot.bottom) / 2 - (center.caption ? 10 : 0)}\n                text-anchor=\"middle\"\n                dominant-baseline=\"middle\"\n                aria-hidden=\"true\"\n              >\n                {center.value}\n              </text>\n            )}\n            {center?.caption && (\n              <text\n                class=\"chart__center-caption\"\n                x={(scene.plot.left + scene.plot.right) / 2}\n                y={(scene.plot.top + scene.plot.bottom) / 2 + 14}\n                text-anchor=\"middle\"\n                dominant-baseline=\"middle\"\n                aria-hidden=\"true\"\n              >\n                {center.caption}\n              </text>\n            )}\n          </svg>\n        )}\n        {tooltip && tooltipAnchor && (\n          <ds-tooltip-chart\n            heading={tooltip.heading}\n            items={tooltip.items}\n            x={tooltipAnchor.x}\n            y={tooltipAnchor.y}\n          />\n        )}\n        <span class=\"chart__status\" aria-live=\"polite\" aria-atomic=\"true\">\n          {this.statusText()}\n        </span>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

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

@@ -88,7 +88,43 @@
           "label": "Cross-browser form and accessibility coverage",
           "path": "tests/e2e/forms.spec.ts"
         }
-      ]
+      ],
+      "styling": {
+        "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+        "protected": [
+          {
+            "properties": [
+              "font",
+              "font-size",
+              "font-weight",
+              "font-family",
+              "line-height",
+              "letter-spacing",
+              "padding",
+              "border-radius"
+            ],
+            "reason": "The field primitive owns its density and selection anatomy; use size and presentation props without replacing the recipe.",
+            "props": [
+              "size",
+              "presentation"
+            ]
+          },
+          {
+            "properties": [
+              "background",
+              "border",
+              "box-shadow",
+              "color"
+            ],
+            "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+            "props": [
+              "size",
+              "presentation"
+            ]
+          }
+        ],
+        "customProperties": []
+      }
     },
     "api": {
       "props": {
@@ -358,7 +394,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }
@@ -379,7 +415,7 @@
     },
     {
       "path": "src/wc/components/Checkbox/Checkbox.tsx",
-      "content": "import {\n  AttachInternals,\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport {\n  CONTROL_SUPPORTING_TEXT_VARIANT,\n  CONTROL_TEXT_VARIANT,\n  DEFAULT_REQUIRED_MESSAGE,\n  setFormControlValue,\n  setRequiredValidity,\n} from '../../utils';\n\nexport type CheckboxSize = 'lg' | 'md' | 'sm' | 'xs';\n\nlet idCounter = 0;\n\n@Component({\n  tag: 'ds-checkbox',\n  styleUrl: 'Checkbox.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class Checkbox {\n  @AttachInternals() internals!: ElementInternals;\n  private labelId = `ds-checkbox-label-${++idCounter}`;\n  private descriptionId = `${this.labelId}-description`;\n\n  /** Visible label and accessible name. Omitted only in presentation mode. */\n  @Prop() label!: string;\n  /** Optional supporting description associated with the checkbox. */\n  @Prop() description?: string;\n  /** Current checked state. */\n  @Prop({ mutable: true }) checked: boolean = false;\n  /** Visual and placement density. */\n  @Prop() size: CheckboxSize = 'md';\n  /** Native form field name. */\n  @Prop({ reflect: true }) name: string | undefined;\n  /** Submitted value when checked. */\n  @Prop() value: string = 'on';\n  /** Native disabled state. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Require the checkbox to be checked for form validity. */\n  @Prop({ reflect: true }) required: boolean = false;\n  /** Validation message used when a required checkbox is unchecked. */\n  @Prop() requiredMessage: string = DEFAULT_REQUIRED_MESSAGE;\n  /** Mixed visual state. Activation clears it before toggling checked. */\n  @Prop({ mutable: true }) indeterminate: boolean = false;\n  /** Design-system inactive state. */\n  @Prop() isInactive: boolean = false;\n  /** Visual-only indicator for a composite control that owns selection semantics. */\n  @Prop() presentation: boolean = false;\n\n  /** Emitted after user activation with the new checked state. */\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private initialChecked = false;\n  private initialIndeterminate = false;\n  @State() private formDisabled = false;\n\n  componentWillLoad() {\n    this.initialChecked = this.checked;\n    this.initialIndeterminate = this.indeterminate;\n    this.syncFormValue();\n  }\n\n  @Watch('checked')\n  @Watch('value')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('required')\n  @Watch('presentation')\n  syncFormValue() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled || this.presentation;\n    setFormControlValue(this.internals, this.checked ? this.value : null, { inactive });\n    const missing = this.required && !inactive && !this.checked;\n    setRequiredValidity(this.internals, missing, this.requiredMessage);\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.checked = this.initialChecked;\n    this.indeterminate = this.initialIndeterminate;\n  }\n\n  private handleActivate = () => {\n    if (this.isInactive || this.disabled || this.formDisabled || this.presentation) return;\n    if (this.indeterminate) this.indeterminate = false;\n    this.checked = !this.checked;\n    this.dsChange.emit(this.checked);\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this.handleActivate();\n    }\n  };\n\n  render() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    const isMarked = this.checked || this.indeterminate;\n    const invalid = this.required && !inactive && !this.checked;\n\n    return (\n      <Host\n        role={this.presentation ? undefined : 'checkbox'}\n        aria-checked={\n          this.presentation ? undefined : this.indeterminate ? 'mixed' : String(this.checked)\n        }\n        aria-disabled={!this.presentation && inactive ? 'true' : undefined}\n        aria-required={!this.presentation && this.required ? 'true' : undefined}\n        aria-invalid={!this.presentation && invalid ? 'true' : undefined}\n        aria-labelledby={this.presentation ? undefined : this.labelId}\n        aria-describedby={!this.presentation && this.description ? this.descriptionId : undefined}\n        aria-hidden={this.presentation ? 'true' : undefined}\n        tabIndex={this.presentation || inactive ? -1 : 0}\n        class={{\n          checkbox: true,\n          'checkbox--presentation': this.presentation,\n          'checkbox--described': Boolean(this.description),\n          [`checkbox--${this.size}`]: true,\n          [`ds-control--${this.size}`]: true,\n          'ds-control-inactive': inactive && !this.presentation,\n          'ds-focus-ring-inset': !this.presentation,\n          'ds-interaction-fill': !inactive && !this.presentation,\n        }}\n        onClick={this.presentation ? undefined : this.handleActivate}\n        onKeyDown={this.presentation ? undefined : this.handleKeyDown}\n      >\n        <span class=\"checkbox__placement ds-interaction-fill__content\" aria-hidden=\"true\">\n          <span class={{ box: true, 'box--marked': isMarked }}>\n            {isMarked && (\n              // eslint-disable-next-line local/prefer-ds-icon -- Checkbox owns this fixed state-mark geometry.\n              <svg class=\"checkbox__mark\" viewBox=\"0 0 16 16\" fill=\"currentColor\" focusable=\"false\">\n                <path\n                  d={\n                    this.indeterminate\n                      ? 'M12 7.375V8.625H4V7.375H12Z'\n                      : 'M12.9756 4.65527L7.22559 11.4053C7.11258 11.5379 6.94946 11.6169 6.77539 11.624C6.60111 11.631 6.43095 11.5657 6.30762 11.4424L3.05762 8.19238L3.94238 7.30762L6.71289 10.0781L12.0244 3.84473L12.9756 4.65527Z'\n                  }\n                />\n              </svg>\n            )}\n          </span>\n        </span>\n        {!this.presentation && (\n          <span class=\"checkbox__copy ds-interaction-fill__content\">\n            <ds-text\n              class=\"checkbox__label\"\n              as=\"span\"\n              variant={CONTROL_TEXT_VARIANT[this.size]}\n              textId={this.labelId}\n            >\n              {this.label}\n            </ds-text>\n            {this.description ? (\n              <ds-text\n                as=\"span\"\n                variant={CONTROL_SUPPORTING_TEXT_VARIANT[this.size]}\n                color=\"secondary\"\n                textId={this.descriptionId}\n              >\n                {this.description}\n              </ds-text>\n            ) : null}\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n",
+      "content": "import {\n  AttachInternals,\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport {\n  CONTROL_SUPPORTING_TEXT_VARIANT,\n  CONTROL_TEXT_VARIANT,\n  DEFAULT_REQUIRED_MESSAGE,\n  setFormControlValue,\n  setRequiredValidity,\n} from '../../utils';\n\nexport type CheckboxSize = 'lg' | 'md' | 'sm' | 'xs';\n\nlet idCounter = 0;\n\n@Component({\n  tag: 'ds-checkbox',\n  styleUrl: 'Checkbox.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class Checkbox {\n  @AttachInternals() internals!: ElementInternals;\n  private labelId = `ds-checkbox-label-${++idCounter}`;\n  private descriptionId = `${this.labelId}-description`;\n\n  /** Visible label and accessible name. Omitted only in presentation mode. */\n  @Prop() label!: string;\n  /** Optional supporting description associated with the checkbox. */\n  @Prop() description?: string;\n  /** Current checked state. */\n  @Prop({ mutable: true }) checked: boolean = false;\n  /** Visual and placement density. */\n  @Prop() size: CheckboxSize = 'md';\n  /** Native form field name. */\n  @Prop({ reflect: true }) name: string | undefined;\n  /** Submitted value when checked. */\n  @Prop() value: string = 'on';\n  /** Native disabled state. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Require the checkbox to be checked for form validity. */\n  @Prop({ reflect: true }) required: boolean = false;\n  /** Validation message used when a required checkbox is unchecked. */\n  @Prop() requiredMessage: string = DEFAULT_REQUIRED_MESSAGE;\n  /** Mixed visual state. Activation clears it before toggling checked. */\n  @Prop({ mutable: true }) indeterminate: boolean = false;\n  /** Design-system inactive state. */\n  @Prop() isInactive: boolean = false;\n  /** Visual-only indicator for a composite control that owns selection semantics. */\n  @Prop() presentation: boolean = false;\n\n  /** Emitted after user activation with the new checked state. */\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private initialChecked = false;\n  private initialIndeterminate = false;\n  @State() private formDisabled = false;\n\n  componentWillLoad() {\n    this.initialChecked = this.checked;\n    this.initialIndeterminate = this.indeterminate;\n    this.syncFormValue();\n  }\n\n  @Watch('checked')\n  @Watch('value')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('required')\n  @Watch('presentation')\n  syncFormValue() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled || this.presentation;\n    setFormControlValue(this.internals, this.checked ? this.value : null, { inactive });\n    const missing = this.required && !inactive && !this.checked;\n    setRequiredValidity(this.internals, missing, this.requiredMessage);\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.checked = this.initialChecked;\n    this.indeterminate = this.initialIndeterminate;\n  }\n\n  private handleActivate = () => {\n    if (this.isInactive || this.disabled || this.formDisabled || this.presentation) return;\n    if (this.indeterminate) this.indeterminate = false;\n    this.checked = !this.checked;\n    this.dsChange.emit(this.checked);\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this.handleActivate();\n    }\n  };\n\n  render() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    const isMarked = this.checked || this.indeterminate;\n    const invalid = this.required && !inactive && !this.checked;\n\n    return (\n      <Host\n        role={this.presentation ? undefined : 'checkbox'}\n        aria-checked={\n          this.presentation ? undefined : this.indeterminate ? 'mixed' : String(this.checked)\n        }\n        aria-disabled={!this.presentation && inactive ? 'true' : undefined}\n        aria-required={!this.presentation && this.required ? 'true' : undefined}\n        aria-invalid={!this.presentation && invalid ? 'true' : undefined}\n        aria-labelledby={this.presentation ? undefined : this.labelId}\n        aria-describedby={!this.presentation && this.description ? this.descriptionId : undefined}\n        aria-hidden={this.presentation ? 'true' : undefined}\n        tabIndex={this.presentation || inactive ? -1 : 0}\n        class={{\n          checkbox: true,\n          'checkbox--presentation': this.presentation,\n          'checkbox--described': Boolean(this.description),\n          [`checkbox--${this.size}`]: true,\n          [`ds-control--${this.size}`]: true,\n          'ds-control-inactive': inactive && !this.presentation,\n          'ds-focus-ring-inset': !this.presentation,\n          'ds-interaction-fill': !inactive && !this.presentation,\n        }}\n        onClick={this.presentation ? undefined : this.handleActivate}\n        onKeyDown={this.presentation ? undefined : this.handleKeyDown}\n      >\n        <span class=\"checkbox__placement ds-interaction-fill__content\" aria-hidden=\"true\">\n          <span class={{ box: true, 'box--marked': isMarked }}>\n            {isMarked && (\n              // eslint-disable-next-line compomo/prefer-ds-icon -- Checkbox owns this fixed state-mark geometry.\n              <svg class=\"checkbox__mark\" viewBox=\"0 0 16 16\" fill=\"currentColor\" focusable=\"false\">\n                <path\n                  d={\n                    this.indeterminate\n                      ? 'M12 7.375V8.625H4V7.375H12Z'\n                      : 'M12.9756 4.65527L7.22559 11.4053C7.11258 11.5379 6.94946 11.6169 6.77539 11.624C6.60111 11.631 6.43095 11.5657 6.30762 11.4424L3.05762 8.19238L3.94238 7.30762L6.71289 10.0781L12.0244 3.84473L12.9756 4.65527Z'\n                  }\n                />\n              </svg>\n            )}\n          </span>\n        </span>\n        {!this.presentation && (\n          <span class=\"checkbox__copy ds-interaction-fill__content\">\n            <ds-text\n              class=\"checkbox__label\"\n              as=\"span\"\n              variant={CONTROL_TEXT_VARIANT[this.size]}\n              textId={this.labelId}\n            >\n              {this.label}\n            </ds-text>\n            {this.description ? (\n              <ds-text\n                as=\"span\"\n                variant={CONTROL_SUPPORTING_TEXT_VARIANT[this.size]}\n                color=\"secondary\"\n                textId={this.descriptionId}\n              >\n                {this.description}\n              </ds-text>\n            ) : null}\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

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

@@ -81,7 +81,56 @@
           "label": "Storybook examples",
           "path": "src/wc/components/Chip/Chip.stories.ts"
         }
-      ]
+      ],
+      "styling": {
+        "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+        "protected": [
+          {
+            "properties": [
+              "font",
+              "font-size",
+              "font-weight",
+              "font-family",
+              "line-height",
+              "letter-spacing",
+              "height",
+              "min-height",
+              "max-height",
+              "padding",
+              "gap"
+            ],
+            "reason": "The control density is one atomic recipe; use the size and inset props instead of replacing internal metrics.",
+            "props": [
+              "size",
+              "isInset",
+              "insetDepth"
+            ]
+          },
+          {
+            "properties": [
+              "border-radius"
+            ],
+            "reason": "The component owns its corner treatment; select the supported radius treatment.",
+            "props": [
+              "rounded",
+              "size"
+            ]
+          },
+          {
+            "properties": [
+              "background",
+              "border",
+              "box-shadow",
+              "color"
+            ],
+            "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+            "props": [
+              "size"
+            ]
+          }
+        ],
+        "customProperties": []
+      }
     },
     "api": {
       "props": {
@@ -289,7 +338,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }