@ds-mo/ui 13.13.0 → 13.15.0

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

@@ -53,7 +53,7 @@
       ],
       "accessibility": [
         "Provide an explicit accessible name for every icon-only action.",
-        "Set hasMenu when the button triggers a Menu; it implies aria-haspopup of menu. Pass controls with the Menu id and expanded from the same open state given to Menu.",
+        "Set hasMenu when the button triggers a Menu; it implies aria-haspopup of menu. Pass controls with the Menu id and expanded from the same open state given to Menu. Expanded popup triggers hold the pressed visual while open; expanded disclosure controls without popup semantics retain the normal resting appearance.",
         "Give an icon-only menu button an accessible name that states the role, such as More options, because no visible label or chevron carries it.",
         "Use haspopup directly for a non-menu popup such as a listbox or dialog; those cases get no chevron.",
         "Use pressed only for a genuine toggle button; it supplies aria-pressed and dsChange intent. Use isActive only for owner-controlled visual emphasis inside a composite whose selection semantics live on the owner.",
@@ -64,7 +64,7 @@
       ],
       "states": [
         "Every size applies one complete control-density recipe across frame height, inline padding, icon zone, text-container inset, gap, and radius.",
-        "Set isInset only when the button is nested inside a same-size control; it reduces the outer geometry while preserving the size's icon, label inset, gap, radius, and typography.",
+        "Set isInset only when the button is nested inside a same-size control. The default single inset removes 4px overall; insetDepth double removes 8px overall so the parent can add 4px per edge while preserving its outer alignment box. Double inset falls back to single at xs to protect minimum icon geometry.",
         "A true pressed toggle and owner-controlled isActive emphasis share the selected visual treatment, but only pressed supplies toggle semantics and dsChange.",
         "General content UI keeps the selected interaction fill and border for pressed or active emphasis.",
         "Shell, navigation, and tool-rail composites use isActive with foreground-only emphasis and no selected fill or border.",
@@ -76,7 +76,7 @@
         "Icon and icon-label loading replace the icon in place. Label-only loading centers the loader while preserving the button's measured width.",
         "hasMenu covers two distinct menu-button shapes and the variant selects between them. With label or icon-label the action has a menu, and a trailing chevron carries the affordance. With icon the button is a menu, meaning the overflow or more-options control, and no chevron is added.",
         "Because the icon-only shape has no chevron, its glyph must convey the menu on its own; use Ellipses. Never pair hasMenu with an icon-only glyph that does not read as a menu.",
-        "An open popup is a transient pressed state rather than a selected one. While expanded is true the pressed wash is held for the popup's complete rendered lifecycle and survives hover, including when chrome opts out of selected fills with activeFill set to false."
+        "An open popup is a transient pressed state rather than a selected one. While expanded is true and haspopup or hasMenu identifies a popup, the pressed wash is held for the popup's complete rendered lifecycle and survives hover, including when chrome opts out of selected fills with activeFill set to false. Expanded disclosure buttons without popup semantics remain visually neutral."
       ],
       "responsiveBehavior": [
         "The consuming layout decides when an icon-label action becomes icon-only and must provide an explicit accessible name after changing variants.",
@@ -150,7 +150,8 @@
           "resolvedType": "boolean | undefined",
           "attribute": "expanded",
           "required": false,
-          "mutable": false
+          "mutable": false,
+          "description": "Controlled disclosure or popup state forwarded to `aria-expanded`.\nPopup triggers hold a pressed visual while open; ordinary disclosures\nretain the normal resting appearance."
         },
         "focusTabIndex": {
           "type": "number",
@@ -194,6 +195,15 @@
           "mutable": false,
           "description": "Icon name passed to <ds-icon> for `icon` / `icon-label` variants."
         },
+        "insetDepth": {
+          "type": "ControlInsetDepth",
+          "resolvedType": "\"double\" | \"single\"",
+          "attribute": "inset-depth",
+          "default": "'single'",
+          "required": false,
+          "mutable": false,
+          "description": "Single removes 4px overall; double removes 8px overall (xs stays single)."
+        },
         "isActive": {
           "type": "boolean",
           "resolvedType": "boolean",
@@ -374,7 +384,8 @@
         "resolvedType": "boolean | undefined",
         "attribute": "expanded",
         "required": false,
-        "mutable": false
+        "mutable": false,
+        "description": "Controlled disclosure or popup state forwarded to `aria-expanded`.\nPopup triggers hold a pressed visual while open; ordinary disclosures\nretain the normal resting appearance."
       },
       "focusTabIndex": {
         "type": "number",
@@ -418,6 +429,15 @@
         "mutable": false,
         "description": "Icon name passed to <ds-icon> for `icon` / `icon-label` variants."
       },
+      "insetDepth": {
+        "type": "ControlInsetDepth",
+        "resolvedType": "\"double\" | \"single\"",
+        "attribute": "inset-depth",
+        "default": "'single'",
+        "required": false,
+        "mutable": false,
+        "description": "Single removes 4px overall; double removes 8px overall (xs stays single)."
+      },
       "isActive": {
         "type": "boolean",
         "resolvedType": "boolean",
@@ -571,8 +591,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.0.0",
-          "@ds-mo/icons ^6.5.0"
+          "@ds-mo/tokens ^6.2.1",
+          "@ds-mo/icons ^6.6.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }
@@ -597,7 +617,7 @@
     },
     {
       "path": "src/wc/components/ButtonUnfilled/ButtonUnfilled.tsx",
-      "content": "import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { controlWidthClass } from '../../utils';\nimport { beginElevatedControlPress } from '../../utils/control-press';\nimport { renderButtonContent } from '../../utils/button-render';\nimport type {\n  ButtonPopup,\n  ButtonSize,\n  ButtonVariant,\n  ButtonWidth,\n} from '../../utils/button-types';\n\nexport type ButtonUnfilledBackground =\n  | 'faint'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'translucent'\n  | 'inverted'\n  | 'media'\n  | 'always-dark';\n\nexport type ButtonUnfilledVariant = ButtonVariant;\nexport type ButtonUnfilledSize = ButtonSize;\nexport type ButtonUnfilledWidth = ButtonWidth;\nexport type ButtonUnfilledPopup = ButtonPopup;\n\n@Component({\n  tag: 'ds-button-unfilled',\n  styleUrl: 'ButtonUnfilled.css',\n  scoped: true,\n})\nexport class ButtonUnfilled {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Content layout. Default is label-only; pass `icon` for icon-only chrome\n   * (nav / tool rails) or `icon-label` for leading icon + text.\n   */\n  @Prop() variant: ButtonUnfilledVariant = 'label';\n\n  /** Control density (height, padding, icon, type). */\n  @Prop() size: ButtonUnfilledSize = 'md';\n\n  /** Use reduced outer geometry when nested inside a control of the same size. */\n  @Prop() isInset: boolean = false;\n\n  /** Width fit — hug content (default) or fill the parent. */\n  @Prop() width: ButtonUnfilledWidth = 'hug';\n\n  /** Visible text for `label` / `icon-label` variants. */\n  @Prop() label: string = '';\n\n  /** Icon name passed to <ds-icon> for `icon` / `icon-label` variants. */\n  @Prop() icon: string = '';\n\n  /**\n   * Owner-controlled visual emphasis inside a composite. This does not add\n   * toggle semantics and does not emit dsChange.\n   */\n  @Prop() isActive: boolean = false;\n\n  /**\n   * When active, render the selected interaction fill.\n   * Default `true` for general UI. Shell chrome (nav / tool rails) should pass\n   * `false` so selection is foreground-only (primary color, no fill).\n   */\n  @Prop() activeFill: boolean = true;\n\n  /** Show a 1px secondary inset border. Default on; shell chrome can pass `false`. */\n  @Prop() hasBorder: boolean = true;\n\n  /** Use the half-radius treatment instead of the default control radius. */\n  @Prop() rounded: boolean = false;\n\n  /**\n   * Scale down during a physical pointer press.\n   * Disable when an owning composite requires fixed child or background geometry.\n   */\n  @Prop() pressScale: boolean = true;\n\n  /** Show a notification dot at the top-right of the icon zone (icon variant only). */\n  @Prop() dot: boolean = false;\n\n  /** Disables interaction. */\n  @Prop() isInactive: boolean = false;\n\n  /** Shows an inline loader and prevents interaction without applying inactive opacity. */\n  @Prop() isLoading: boolean = false;\n\n  /** Native button type. */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /** Actual parent surface context. Omit on primary and secondary surfaces. */\n  @Prop() background: ButtonUnfilledBackground | undefined;\n\n  /** Accessible name override. Required for icon-only buttons. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  @Prop() controls: string | undefined;\n  @Prop() expanded: boolean | undefined;\n  @Prop() haspopup: ButtonUnfilledPopup | undefined;\n  /**\n   * Controlled state for a genuine toggle button. Adds aria-pressed, promotes\n   * active styling, and makes activation emit dsChange with the requested state.\n   */\n  @Prop() pressed: boolean | undefined;\n\n  /**\n   * Mark the button as a Menu trigger. Implies `aria-haspopup=\"menu\"` and covers\n   * both menu-button shapes:\n   *\n   * - `label` / `icon-label` — the action *has* a menu; a trailing chevron carries\n   *   the affordance.\n   * - `icon` — the button *is* a menu, i.e. the overflow / more-options control.\n   *   No chevron is added, so the glyph must convey it on its own; use `Ellipses`.\n   *\n   * Use `haspopup` directly for non-menu popups.\n   */\n  @Prop() hasMenu: boolean = false;\n\n  /**\n   * Native `tabindex` for roving keyboard groups in shell chrome.\n   * Omit for the default button tab stop (`0`).\n   */\n  @Prop({ attribute: 'tab-index' }) focusTabIndex?: number;\n\n  @Event() dsClick!: EventEmitter<MouseEvent>;\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private buttonEl: HTMLButtonElement | null = null;\n\n  @Method()\n  async setFocus() {\n    this.buttonEl?.focus();\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.isInactive || this.isLoading) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    this.dsClick.emit(event);\n    if (this.pressed !== undefined) this.dsChange.emit(!this.pressed);\n  };\n\n  private get showDot(): boolean {\n    return this.variant === 'icon' && this.dot && !this.isLoading;\n  }\n\n  private get resolvedHaspopup(): ButtonUnfilledPopup | undefined {\n    return this.haspopup ?? (this.hasMenu ? 'menu' : undefined);\n  }\n\n  /** An expanded popup trigger is visually active even when selection is controlled separately. */\n  private get visuallyActive(): boolean {\n    return this.isActive || this.pressed === true || this.expanded === true;\n  }\n\n  /** Knock-out ring: selected fill → active wash; otherwise surface token. */\n  private get dotRing(): string {\n    if ((this.isActive || this.pressed === true) && this.activeFill) {\n      return 'var(--ds-interaction-active)';\n    }\n    return 'var(--ds-button-unfilled-dot-ring)';\n  }\n\n  private get accessibleName(): string | undefined {\n    if (this.ariaLabel) return this.ariaLabel;\n    if (this.isLoading && this.variant === 'label' && this.label) return this.label;\n    return undefined;\n  }\n\n  render() {\n    const bg = this.background;\n    const cls: Record<string, boolean> = {\n      'button-unfilled': true,\n      'ds-button': true,\n      'ds-focus-ring-inset': true,\n      'ds-control-press-scale': this.pressScale,\n      'ds-interaction-fill': true,\n      'ds-interaction-fill--selected':\n        (this.isActive || this.pressed === true) &&\n        this.activeFill &&\n        !this.isInactive,\n      'ds-interaction-fill--on-faint': bg === 'faint',\n      'ds-interaction-fill--on-medium': bg === 'medium',\n      'ds-interaction-fill--on-bold': bg === 'bold',\n      'ds-interaction-fill--on-strong': bg === 'strong',\n      'ds-interaction-fill--on-translucent': bg === 'translucent',\n      'ds-interaction-fill--on-inverted': bg === 'inverted',\n      'ds-interaction-fill--on-media': bg === 'media',\n      'ds-interaction-fill--on-always-dark': bg === 'always-dark',\n      'button-unfilled--active': this.visuallyActive,\n      'button-unfilled--expanded': this.expanded === true && !this.isInactive,\n      'ds-button--expanded': this.expanded === true && !this.isInactive,\n      'button-unfilled--bordered': this.hasBorder,\n      'ds-button--bordered': this.hasBorder,\n      'button-unfilled--rounded': this.rounded,\n      'ds-button--rounded': this.rounded,\n      'ds-control-inactive': this.isInactive,\n      'ds-control--lg': this.size === 'lg',\n      'ds-control--md': this.size === 'md',\n      'ds-control--sm': this.size === 'sm',\n      'ds-control--xs': this.size === 'xs',\n      'ds-control--inset': this.isInset,\n      'ds-control-frame': true,\n      'button-unfilled--icon': this.variant === 'icon',\n      'ds-button--icon': this.variant === 'icon',\n      'button-unfilled--label': this.variant === 'label',\n      'button-unfilled--icon-label': this.variant === 'icon-label',\n      'button-unfilled--background-faint': bg === 'faint',\n      'button-unfilled--background-medium': bg === 'medium',\n      'button-unfilled--background-bold': bg === 'bold',\n      'button-unfilled--background-strong': bg === 'strong',\n      'button-unfilled--background-translucent': bg === 'translucent',\n      'button-unfilled--background-inverted': bg === 'inverted',\n      'button-unfilled--background-media': bg === 'media',\n      'button-unfilled--on-always-dark': bg === 'always-dark',\n    };\n\n    return (\n      <Host\n        class={{\n          'button-unfilled-host': true,\n          'button-unfilled-host--icon': this.variant === 'icon',\n          'ds-button-host--icon': this.variant === 'icon',\n          'ds-control--lg': this.size === 'lg',\n          'ds-control--md': this.size === 'md',\n          'ds-control--sm': this.size === 'sm',\n          'ds-control--xs': this.size === 'xs',\n          'ds-control--inset': this.isInset,\n          ...controlWidthClass(this.width),\n        }}\n        tabIndex={-1}\n      >\n        <button\n          ref={el => {\n            this.buttonEl = el ?? null;\n          }}\n          type={this.type}\n          class={cls}\n          disabled={this.isInactive}\n          tabIndex={this.focusTabIndex ?? 0}\n          aria-label={this.accessibleName}\n          aria-busy={this.isLoading ? 'true' : undefined}\n          aria-disabled={this.isLoading ? 'true' : undefined}\n          aria-controls={this.controls}\n          aria-expanded={this.expanded === undefined ? undefined : String(this.expanded)}\n          aria-haspopup={this.resolvedHaspopup}\n          aria-pressed={this.pressed === undefined ? undefined : String(this.pressed)}\n          onPointerDown={event =>\n            beginElevatedControlPress(\n              event,\n              this.pressScale && !this.isInactive && !this.isLoading,\n            )\n          }\n          onClick={this.handleClick}\n        >\n          {renderButtonContent({\n            namespace: 'button-unfilled',\n            variant: this.variant,\n            size: this.size,\n            label: this.label,\n            icon: this.icon,\n            hasMenu: this.hasMenu,\n            isLoading: this.isLoading,\n            dot: {\n              visible: this.showDot,\n              background: this.dotRing,\n            },\n          })}\n        </button>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { controlWidthClass } from '../../utils';\nimport { beginElevatedControlPress } from '../../utils/control-press';\nimport { renderButtonContent } from '../../utils/button-render';\nimport type { ControlInsetDepth } from '../../utils/control-text';\nimport type {\n  ButtonPopup,\n  ButtonSize,\n  ButtonVariant,\n  ButtonWidth,\n} from '../../utils/button-types';\n\nexport type ButtonUnfilledBackground =\n  | 'faint'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'translucent'\n  | 'inverted'\n  | 'media'\n  | 'always-dark';\n\nexport type ButtonUnfilledVariant = ButtonVariant;\nexport type ButtonUnfilledSize = ButtonSize;\nexport type ButtonUnfilledWidth = ButtonWidth;\nexport type ButtonUnfilledPopup = ButtonPopup;\n\n@Component({\n  tag: 'ds-button-unfilled',\n  styleUrl: 'ButtonUnfilled.css',\n  scoped: true,\n})\nexport class ButtonUnfilled {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Content layout. Default is label-only; pass `icon` for icon-only chrome\n   * (nav / tool rails) or `icon-label` for leading icon + text.\n   */\n  @Prop() variant: ButtonUnfilledVariant = 'label';\n\n  /** Control density (height, padding, icon, type). */\n  @Prop() size: ButtonUnfilledSize = 'md';\n\n  /** Use reduced outer geometry when nested inside a control of the same size. */\n  @Prop() isInset: boolean = false;\n\n  /** Single removes 4px overall; double removes 8px overall (xs stays single). */\n  @Prop() insetDepth: ControlInsetDepth = 'single';\n\n  /** Width fit — hug content (default) or fill the parent. */\n  @Prop() width: ButtonUnfilledWidth = 'hug';\n\n  /** Visible text for `label` / `icon-label` variants. */\n  @Prop() label: string = '';\n\n  /** Icon name passed to <ds-icon> for `icon` / `icon-label` variants. */\n  @Prop() icon: string = '';\n\n  /**\n   * Owner-controlled visual emphasis inside a composite. This does not add\n   * toggle semantics and does not emit dsChange.\n   */\n  @Prop() isActive: boolean = false;\n\n  /**\n   * When active, render the selected interaction fill.\n   * Default `true` for general UI. Shell chrome (nav / tool rails) should pass\n   * `false` so selection is foreground-only (primary color, no fill).\n   */\n  @Prop() activeFill: boolean = true;\n\n  /** Show a 1px secondary inset border. Default on; shell chrome can pass `false`. */\n  @Prop() hasBorder: boolean = true;\n\n  /** Use the half-radius treatment instead of the default control radius. */\n  @Prop() rounded: boolean = false;\n\n  /**\n   * Scale down during a physical pointer press.\n   * Disable when an owning composite requires fixed child or background geometry.\n   */\n  @Prop() pressScale: boolean = true;\n\n  /** Show a notification dot at the top-right of the icon zone (icon variant only). */\n  @Prop() dot: boolean = false;\n\n  /** Disables interaction. */\n  @Prop() isInactive: boolean = false;\n\n  /** Shows an inline loader and prevents interaction without applying inactive opacity. */\n  @Prop() isLoading: boolean = false;\n\n  /** Native button type. */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /** Actual parent surface context. Omit on primary and secondary surfaces. */\n  @Prop() background: ButtonUnfilledBackground | undefined;\n\n  /** Accessible name override. Required for icon-only buttons. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  @Prop() controls: string | undefined;\n  /**\n   * Controlled disclosure or popup state forwarded to `aria-expanded`.\n   * Popup triggers hold a pressed visual while open; ordinary disclosures\n   * retain the normal resting appearance.\n   */\n  @Prop() expanded: boolean | undefined;\n  @Prop() haspopup: ButtonUnfilledPopup | undefined;\n  /**\n   * Controlled state for a genuine toggle button. Adds aria-pressed, promotes\n   * active styling, and makes activation emit dsChange with the requested state.\n   */\n  @Prop() pressed: boolean | undefined;\n\n  /**\n   * Mark the button as a Menu trigger. Implies `aria-haspopup=\"menu\"` and covers\n   * both menu-button shapes:\n   *\n   * - `label` / `icon-label` — the action *has* a menu; a trailing chevron carries\n   *   the affordance.\n   * - `icon` — the button *is* a menu, i.e. the overflow / more-options control.\n   *   No chevron is added, so the glyph must convey it on its own; use `Ellipses`.\n   *\n   * Use `haspopup` directly for non-menu popups.\n   */\n  @Prop() hasMenu: boolean = false;\n\n  /**\n   * Native `tabindex` for roving keyboard groups in shell chrome.\n   * Omit for the default button tab stop (`0`).\n   */\n  @Prop({ attribute: 'tab-index' }) focusTabIndex?: number;\n\n  @Event() dsClick!: EventEmitter<MouseEvent>;\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private buttonEl: HTMLButtonElement | null = null;\n\n  @Method()\n  async setFocus() {\n    this.buttonEl?.focus();\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.isInactive || this.isLoading) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    this.dsClick.emit(event);\n    if (this.pressed !== undefined) this.dsChange.emit(!this.pressed);\n  };\n\n  private get showDot(): boolean {\n    return this.variant === 'icon' && this.dot && !this.isLoading;\n  }\n\n  private get resolvedHaspopup(): ButtonUnfilledPopup | undefined {\n    return this.haspopup ?? (this.hasMenu ? 'menu' : undefined);\n  }\n\n  private get doubleInset(): boolean {\n    return this.isInset && this.insetDepth === 'double' && this.size !== 'xs';\n  }\n\n  /** Only popup triggers hold a pressed visual while expanded. */\n  private get expandedPopup(): boolean {\n    return this.expanded === true && this.resolvedHaspopup !== undefined && !this.isInactive;\n  }\n\n  private get visuallyActive(): boolean {\n    return this.isActive || this.pressed === true || this.expandedPopup;\n  }\n\n  /** Knock-out ring: selected fill → active wash; otherwise surface token. */\n  private get dotRing(): string {\n    if ((this.isActive || this.pressed === true) && this.activeFill) {\n      return 'var(--ds-interaction-active)';\n    }\n    return 'var(--ds-button-unfilled-dot-ring)';\n  }\n\n  private get accessibleName(): string | undefined {\n    if (this.ariaLabel) return this.ariaLabel;\n    if (this.isLoading && this.variant === 'label' && this.label) return this.label;\n    return undefined;\n  }\n\n  render() {\n    const bg = this.background;\n    const cls: Record<string, boolean> = {\n      'button-unfilled': true,\n      'ds-button': true,\n      'ds-focus-ring-inset': true,\n      'ds-control-press-scale': this.pressScale,\n      'ds-interaction-fill': true,\n      'ds-interaction-fill--selected':\n        (this.isActive || this.pressed === true) &&\n        this.activeFill &&\n        !this.isInactive,\n      'ds-interaction-fill--on-faint': bg === 'faint',\n      'ds-interaction-fill--on-medium': bg === 'medium',\n      'ds-interaction-fill--on-bold': bg === 'bold',\n      'ds-interaction-fill--on-strong': bg === 'strong',\n      'ds-interaction-fill--on-translucent': bg === 'translucent',\n      'ds-interaction-fill--on-inverted': bg === 'inverted',\n      'ds-interaction-fill--on-media': bg === 'media',\n      'ds-interaction-fill--on-always-dark': bg === 'always-dark',\n      'button-unfilled--active': this.visuallyActive,\n      'button-unfilled--expanded': this.expandedPopup,\n      'ds-button--expanded': this.expandedPopup,\n      'button-unfilled--bordered': this.hasBorder,\n      'ds-button--bordered': this.hasBorder,\n      'button-unfilled--rounded': this.rounded,\n      'ds-button--rounded': this.rounded,\n      'ds-control-inactive': this.isInactive,\n      'ds-control--lg': this.size === 'lg',\n      'ds-control--md': this.size === 'md',\n      'ds-control--sm': this.size === 'sm',\n      'ds-control--xs': this.size === 'xs',\n      'ds-control--inset': this.isInset && !this.doubleInset,\n      'ds-control--inset-double': this.doubleInset,\n      'ds-control-frame': true,\n      'button-unfilled--icon': this.variant === 'icon',\n      'ds-button--icon': this.variant === 'icon',\n      'button-unfilled--label': this.variant === 'label',\n      'button-unfilled--icon-label': this.variant === 'icon-label',\n      'button-unfilled--background-faint': bg === 'faint',\n      'button-unfilled--background-medium': bg === 'medium',\n      'button-unfilled--background-bold': bg === 'bold',\n      'button-unfilled--background-strong': bg === 'strong',\n      'button-unfilled--background-translucent': bg === 'translucent',\n      'button-unfilled--background-inverted': bg === 'inverted',\n      'button-unfilled--background-media': bg === 'media',\n      'button-unfilled--on-always-dark': bg === 'always-dark',\n    };\n\n    return (\n      <Host\n        class={{\n          'button-unfilled-host': true,\n          'button-unfilled-host--icon': this.variant === 'icon',\n          'ds-button-host--icon': this.variant === 'icon',\n          'ds-control--lg': this.size === 'lg',\n          'ds-control--md': this.size === 'md',\n          'ds-control--sm': this.size === 'sm',\n          'ds-control--xs': this.size === 'xs',\n          'ds-control--inset': this.isInset && !this.doubleInset,\n          'ds-control--inset-double': this.doubleInset,\n          ...controlWidthClass(this.width),\n        }}\n        tabIndex={-1}\n      >\n        <button\n          ref={el => {\n            this.buttonEl = el ?? null;\n          }}\n          type={this.type}\n          class={cls}\n          disabled={this.isInactive}\n          tabIndex={this.focusTabIndex ?? 0}\n          aria-label={this.accessibleName}\n          aria-busy={this.isLoading ? 'true' : undefined}\n          aria-disabled={this.isLoading ? 'true' : undefined}\n          aria-controls={this.controls}\n          aria-expanded={this.expanded === undefined ? undefined : String(this.expanded)}\n          aria-haspopup={this.resolvedHaspopup}\n          aria-pressed={this.pressed === undefined ? undefined : String(this.pressed)}\n          onPointerDown={event =>\n            beginElevatedControlPress(\n              event,\n              this.pressScale && !this.isInactive && !this.isLoading,\n            )\n          }\n          onClick={this.handleClick}\n        >\n          {renderButtonContent({\n            namespace: 'button-unfilled',\n            variant: this.variant,\n            size: this.size,\n            label: this.label,\n            icon: this.icon,\n            hasMenu: this.hasMenu,\n            isLoading: this.isLoading,\n            dot: {\n              visible: this.showDot,\n              background: this.dotRing,\n            },\n          })}\n        </button>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

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

@@ -208,8 +208,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.0.0",
-          "@ds-mo/icons ^6.5.0"
+          "@ds-mo/tokens ^6.2.1",
+          "@ds-mo/icons ^6.6.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -345,8 +345,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: metrics, score.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.0.0",
-          "@ds-mo/icons ^6.5.0"
+          "@ds-mo/tokens ^6.2.1",
+          "@ds-mo/icons ^6.6.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -249,8 +249,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.0.0",
-          "@ds-mo/icons ^6.5.0"
+          "@ds-mo/tokens ^6.2.1",
+          "@ds-mo/icons ^6.6.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -267,8 +267,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: items.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.0.0",
-          "@ds-mo/icons ^6.5.0"
+          "@ds-mo/tokens ^6.2.1",
+          "@ds-mo/icons ^6.6.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }
@@ -284,7 +284,7 @@
   "files": [
     {
       "path": "src/wc/components/ChartLegend/ChartLegend.css",
-      "content": "@import '../../utils/control-density.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  display: block;\n  font-family: var(--typography-font-family);\n  user-select: none;\n}\n\n.chart-legend__list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n/* Non-visual wrapper — the real box is .chart-legend__item so optional highlight/link\n   affordances cover the whole row while children align to the shared grid columns. */\n.chart-legend__list-item {\n  display: contents;\n}\n\n:host(.chart-legend--vertical) .chart-legend__list {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr) var(--dimension-size-600);\n  column-gap: var(--dimension-space-075);\n  row-gap: var(--dimension-space-050);\n}\n\n:host(.chart-legend--vertical.chart-legend--show-percentage) .chart-legend__list {\n  grid-template-columns: auto minmax(0, 1fr) var(--dimension-size-600) var(--dimension-size-800);\n}\n\n:host(.chart-legend--vertical) .chart-legend__item {\n  grid-column: 1 / -1;\n  display: grid;\n  grid-template-columns: subgrid;\n}\n\n:host(.chart-legend--horizontal) .chart-legend__list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--dimension-space-200);\n}\n\n:host(.chart-legend--horizontal) .chart-legend__item {\n  display: flex;\n  gap: var(--dimension-space-100);\n}\n\n/*\n * Density: md control recipe (height / pad / radius / label inset).\n * Hover/press: `.ds-interaction-fill` (token overlay on ::after).\n */\n.chart-legend__item {\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  align-items: center;\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  text-decoration: none;\n  color: inherit;\n  transition: opacity var(--effect-motion-short-2);\n}\n\n.chart-legend__item--dimmed {\n  opacity: var(--effect-opacity-medium);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .chart-legend__item {\n    transition: none;\n  }\n}\n\n.chart-legend__item--interactive {\n  cursor: pointer;\n}\n\n/* Raise row content above interaction fills (positive z-index on util layers). */\n.chart-legend__item > * {\n  position: relative;\n  z-index: 2;\n}\n\n.chart-legend__swatch-box {\n  width: var(--dimension-size-250);\n  height: var(--dimension-size-250);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.chart-legend__swatch {\n  width: var(--dimension-space-150);\n  height: var(--dimension-space-150);\n  border-radius: var(--dimension-radius-025);\n  flex-shrink: 0;\n}\n\n.chart-legend__label {\n  min-width: 0;\n}\n\n.chart-legend__percentage {\n  width: 100%;\n  min-width: 0;\n  text-align: right;\n}\n\n.chart-legend__value {\n  width: 100%;\n  text-align: right;\n  min-width: 0;\n}\n\n@media (forced-colors: active) {\n  .chart-legend__swatch {\n    forced-color-adjust: none;\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n  }\n}\n",
+      "content": "@import '../../utils/control-density.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  display: block;\n  font-family: var(--typography-font-family-ui);\n  user-select: none;\n}\n\n.chart-legend__list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n/* Non-visual wrapper — the real box is .chart-legend__item so optional highlight/link\n   affordances cover the whole row while children align to the shared grid columns. */\n.chart-legend__list-item {\n  display: contents;\n}\n\n:host(.chart-legend--vertical) .chart-legend__list {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr) var(--dimension-size-600);\n  column-gap: var(--dimension-space-075);\n  row-gap: var(--dimension-space-050);\n}\n\n:host(.chart-legend--vertical.chart-legend--show-percentage) .chart-legend__list {\n  grid-template-columns: auto minmax(0, 1fr) var(--dimension-size-600) var(--dimension-size-800);\n}\n\n:host(.chart-legend--vertical) .chart-legend__item {\n  grid-column: 1 / -1;\n  display: grid;\n  grid-template-columns: subgrid;\n}\n\n:host(.chart-legend--horizontal) .chart-legend__list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--dimension-space-200);\n}\n\n:host(.chart-legend--horizontal) .chart-legend__item {\n  display: flex;\n  gap: var(--dimension-space-100);\n}\n\n/*\n * Density: md control recipe (height / pad / radius / label inset).\n * Hover/press: `.ds-interaction-fill` (token overlay on ::after).\n */\n.chart-legend__item {\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  align-items: center;\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  text-decoration: none;\n  color: inherit;\n  transition: opacity var(--effect-motion-short-2);\n}\n\n.chart-legend__item--dimmed {\n  opacity: var(--effect-opacity-medium);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .chart-legend__item {\n    transition: none;\n  }\n}\n\n.chart-legend__item--interactive {\n  cursor: pointer;\n}\n\n/* Raise row content above interaction fills (positive z-index on util layers). */\n.chart-legend__item > * {\n  position: relative;\n  z-index: 2;\n}\n\n.chart-legend__swatch-box {\n  width: var(--dimension-size-250);\n  height: var(--dimension-size-250);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.chart-legend__swatch {\n  width: var(--dimension-space-150);\n  height: var(--dimension-space-150);\n  border-radius: var(--dimension-radius-025);\n  flex-shrink: 0;\n}\n\n.chart-legend__label {\n  min-width: 0;\n}\n\n.chart-legend__percentage {\n  width: 100%;\n  min-width: 0;\n  text-align: right;\n}\n\n.chart-legend__value {\n  width: 100%;\n  text-align: right;\n  min-width: 0;\n}\n\n@media (forced-colors: active) {\n  .chart-legend__swatch {\n    forced-color-adjust: none;\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n  }\n}\n",
       "type": "registry:ui"
     },
     {

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

@@ -229,8 +229,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: definition.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.0.0",
-          "@ds-mo/icons ^6.5.0"
+          "@ds-mo/tokens ^6.2.1",
+          "@ds-mo/icons ^6.6.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }
@@ -246,7 +246,7 @@
   "files": [
     {
       "path": "src/wc/components/Chart/Chart.css",
-      "content": "@import '../../utils/forced-colors.css';\n\n:host {\n  position: relative;\n  display: block;\n  width: var(--ds-chart-width, 100%);\n  max-width: 100%;\n  height: var(--ds-chart-height, 320px);\n  font-family: var(--typography-font-family);\n}\n\n.chart__surface {\n  display: block;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  outline: none;\n  touch-action: none;\n}\n\n.chart__surface:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-border-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n.chart__interaction-surface {\n  fill: transparent;\n  pointer-events: all;\n}\n\n.chart__grid,\n.chart__axis-line,\n.chart__plot-boundary,\n.chart__mark {\n  vector-effect: non-scaling-stroke;\n}\n\n.chart__grid {\n  stroke: var(--color-foreground-quaternary);\n  stroke-width: var(--dimension-stroke-width-012);\n}\n\n.chart__plot-boundary {\n  stroke: var(--color-foreground-quaternary);\n  stroke-width: var(--dimension-stroke-width-012);\n}\n\n.chart__axis-line {\n  stroke: var(--color-foreground-tertiary);\n  stroke-width: var(--dimension-stroke-width-012);\n}\n\n.chart__tick,\n.chart__text-mark {\n  fill: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-xs);\n  font-weight: var(--typography-weight-medium);\n  letter-spacing: var(--typography-letterspacing-positive);\n  text-transform: uppercase;\n}\n\n.chart__axis-title {\n  fill: var(--color-foreground-primary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-xs);\n  font-weight: var(--typography-weight-semibold);\n  letter-spacing: var(--typography-letterspacing-positive);\n  text-transform: uppercase;\n}\n\n.chart__center-value {\n  fill: var(--color-foreground-primary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-xl);\n  font-weight: var(--typography-weight-semibold);\n  letter-spacing: var(--typography-letterspacing-negative-double);\n}\n\n.chart__center-caption {\n  fill: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-md);\n  font-weight: var(--typography-weight-regular);\n  letter-spacing: var(--typography-letterspacing-negative-half);\n}\n\n.chart__focus {\n  fill: none;\n  stroke: var(--color-border-focus);\n  stroke-width: var(--dimension-stroke-width-025);\n  vector-effect: non-scaling-stroke;\n  pointer-events: none;\n}\n\n.chart__focus-guide {\n  stroke: var(--color-foreground-quaternary);\n  stroke-width: var(--dimension-stroke-width-012);\n  vector-effect: non-scaling-stroke;\n  pointer-events: none;\n}\n\n.chart__focus-point {\n  vector-effect: non-scaling-stroke;\n  pointer-events: none;\n}\n\n.chart__description,\n.chart__status {\n  position: absolute;\n  width: var(--dimension-stroke-width-012);\n  height: var(--dimension-stroke-width-012);\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n@media (forced-colors: active) {\n  .chart__mark,\n  .chart__focus,\n  .chart__focus-point {\n    forced-color-adjust: none;\n  }\n\n  .chart__focus {\n    stroke: var(--ds-forced-color-focus);\n  }\n}\n",
+      "content": "@import '../../utils/forced-colors.css';\n\n:host {\n  position: relative;\n  display: block;\n  width: var(--ds-chart-width, 100%);\n  max-width: 100%;\n  height: var(--ds-chart-height, 320px);\n  font-family: var(--typography-font-family-ui);\n}\n\n.chart__surface {\n  display: block;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  outline: none;\n  touch-action: none;\n}\n\n.chart__surface:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-border-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n.chart__interaction-surface {\n  fill: transparent;\n  pointer-events: all;\n}\n\n.chart__grid,\n.chart__axis-line,\n.chart__plot-boundary,\n.chart__mark {\n  vector-effect: non-scaling-stroke;\n}\n\n.chart__grid {\n  stroke: var(--color-foreground-quaternary);\n  stroke-width: var(--dimension-stroke-width-012);\n}\n\n.chart__plot-boundary {\n  stroke: var(--color-foreground-quaternary);\n  stroke-width: var(--dimension-stroke-width-012);\n}\n\n.chart__axis-line {\n  stroke: var(--color-foreground-tertiary);\n  stroke-width: var(--dimension-stroke-width-012);\n}\n\n.chart__tick,\n.chart__text-mark {\n  fill: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family-ui);\n  font-size: var(--typography-fontsize-xs);\n  font-weight: var(--typography-weight-medium);\n  letter-spacing: var(--typography-letterspacing-positive);\n  text-transform: uppercase;\n}\n\n.chart__axis-title {\n  fill: var(--color-foreground-primary);\n  font-family: var(--typography-font-family-ui);\n  font-size: var(--typography-fontsize-xs);\n  font-weight: var(--typography-weight-semibold);\n  letter-spacing: var(--typography-letterspacing-positive);\n  text-transform: uppercase;\n}\n\n.chart__center-value {\n  fill: var(--color-foreground-primary);\n  font-family: var(--typography-font-family-ui);\n  font-size: var(--typography-fontsize-xl);\n  font-weight: var(--typography-weight-semibold);\n  letter-spacing: var(--typography-letterspacing-negative-double);\n}\n\n.chart__center-caption {\n  fill: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family-ui);\n  font-size: var(--typography-fontsize-md);\n  font-weight: var(--typography-weight-regular);\n  letter-spacing: var(--typography-letterspacing-negative-half);\n}\n\n.chart__focus {\n  fill: none;\n  stroke: var(--color-border-focus);\n  stroke-width: var(--dimension-stroke-width-025);\n  vector-effect: non-scaling-stroke;\n  pointer-events: none;\n}\n\n.chart__focus-guide {\n  stroke: var(--color-foreground-quaternary);\n  stroke-width: var(--dimension-stroke-width-012);\n  vector-effect: non-scaling-stroke;\n  pointer-events: none;\n}\n\n.chart__focus-point {\n  vector-effect: non-scaling-stroke;\n  pointer-events: none;\n}\n\n.chart__description,\n.chart__status {\n  position: absolute;\n  width: var(--dimension-stroke-width-012);\n  height: var(--dimension-stroke-width-012);\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n@media (forced-colors: active) {\n  .chart__mark,\n  .chart__focus,\n  .chart__focus-point {\n    forced-color-adjust: none;\n  }\n\n  .chart__focus {\n    stroke: var(--ds-forced-color-focus);\n  }\n}\n",
       "type": "registry:ui"
     },
     {

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

@@ -2,7 +2,7 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "checkbox",
   "title": "Checkbox",
-  "description": "Form-associated checkbox for independent choices, acknowledgment, or consent, with checked, unchecked, mixed, and four density states.",
+  "description": "Form-associated checkbox for independent choices, acknowledgment, or consent, with optional supporting description, checked, unchecked, mixed, and four density states.",
   "type": "registry:ui",
   "meta": {
     "library": "@ds-mo/ui",
@@ -13,7 +13,7 @@
     "intent": {
       "audience": "general",
       "status": "stable",
-      "summary": "Form-associated checkbox for independent choices, acknowledgment, or consent, with checked, unchecked, mixed, and four density states.",
+      "summary": "Form-associated checkbox for independent choices, acknowledgment, or consent, with optional supporting description, checked, unchecked, mixed, and four density states.",
       "useWhen": [
         "A user may independently select zero or more choices.",
         "A form requires acknowledgment, consent, or an opt-in value before submission.",
@@ -47,7 +47,7 @@
         "component:ds-text"
       ],
       "accessibility": [
-        "Every interactive checkbox requires a visible label that provides its accessible name.",
+        "Every interactive checkbox requires a visible label that provides its accessible name; an optional visible description is associated as supporting context.",
         "Enter and Space activate the checkbox; checked and mixed state are exposed through aria-checked.",
         "Disabled and inactive checkboxes leave the tab order and are omitted from form submission.",
         "Use presentation mode only inside a composite option that owns selection semantics, focus, and interaction."
@@ -57,16 +57,17 @@
         "Activating an indeterminate checkbox clears the mixed state, toggles checked, and emits dsChange with the resulting boolean.",
         "The initial checked and indeterminate values are restored by native form reset; checked values submit under name and unchecked values submit nothing.",
         "Sizes are lg with a 20px box in a 24px placement, md with a 16px box in a 20px placement, sm with a 12px box in a 16px placement, and xs with an 8px box in a 12px placement.",
-        "Presentation mode removes checkbox semantics, focus, interaction, label rendering, and form submission while preserving the visual state."
+        "Presentation mode removes checkbox semantics, focus, interaction, label rendering, description rendering, and form submission while preserving the visual state.",
+        "Description-rich checkboxes grow beyond the fixed density height while retaining its minimum target size and primitive-owned selection anatomy."
       ],
       "responsiveBehavior": [
-        "Choose size from the density of the containing row; labels may wrap while the placement box stays fixed.",
+        "Choose size from the density of the containing row; labels and descriptions may wrap while the placement box stays fixed.",
         "Use the same density as the shared option icon zone in multi-select rows."
       ],
       "frameworkCaveats": {
         "customElements": [
           "Bind checked and indeterminate as properties for application state updates and listen for dsChange.",
-          "Use the form attribute on the host when associating a checkbox rendered outside its owning form."
+          "Use the form attribute on the host when associating a checkbox rendered outside its owning form or isolating it from an ancestor form."
         ],
         "react": [
           "Use DsCheckbox and handle onDsChange; checked and indeterminate are mutable and update after user activation."
@@ -97,6 +98,14 @@
           "mutable": true,
           "description": "Current checked state."
         },
+        "description": {
+          "type": "string",
+          "resolvedType": "string | undefined",
+          "attribute": "description",
+          "required": false,
+          "mutable": false,
+          "description": "Optional supporting description associated with the checkbox."
+        },
         "disabled": {
           "type": "boolean",
           "resolvedType": "boolean",
@@ -209,6 +218,14 @@
         "mutable": true,
         "description": "Current checked state."
       },
+      "description": {
+        "type": "string",
+        "resolvedType": "string | undefined",
+        "attribute": "description",
+        "required": false,
+        "mutable": false,
+        "description": "Optional supporting description associated with the checkbox."
+      },
       "disabled": {
         "type": "boolean",
         "resolvedType": "boolean",
@@ -332,8 +349,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.0.0",
-          "@ds-mo/icons ^6.5.0"
+          "@ds-mo/tokens ^6.2.1",
+          "@ds-mo/icons ^6.6.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }
@@ -349,12 +366,12 @@
   "files": [
     {
       "path": "src/wc/components/Checkbox/Checkbox.css",
-      "content": "@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  display: inline-flex;\n  align-items: center;\n  box-sizing: border-box;\n  gap: var(--ds-control-gap);\n  height: var(--ds-control-height);\n  padding: 0 var(--ds-control-padding-inline);\n  border-radius: var(--ds-control-radius);\n  cursor: default;\n  user-select: none;\n}\n\n:host(.checkbox--presentation) {\n  width: var(--ds-control-icon);\n  height: var(--ds-control-icon);\n  padding: 0;\n  gap: 0;\n  pointer-events: none;\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity). */\n\n:host(.checkbox--lg) {\n  --_checkbox-box: var(--dimension-iconography-md);\n  --_checkbox-stroke: var(--dimension-stroke-width-018);\n}\n\n:host(.checkbox--md) {\n  --_checkbox-box: var(--dimension-iconography-sm);\n  --_checkbox-stroke: var(--dimension-stroke-width-015);\n}\n\n:host(.checkbox--sm) {\n  --_checkbox-box: var(--dimension-iconography-xs);\n  --_checkbox-stroke: var(--dimension-stroke-width-012);\n}\n\n:host(.checkbox--xs) {\n  --_checkbox-box: var(--dimension-size-100);\n  --_checkbox-stroke: calc(var(--dimension-stroke-width-base) * 3 / 32);\n}\n\n.checkbox__placement {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--ds-control-icon);\n  height: var(--ds-control-icon);\n}\n\n.box {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--_checkbox-box);\n  height: var(--_checkbox-box);\n  border: 0;\n  border-radius: var(--dimension-radius-025);\n  box-shadow: inset 0 0 0 var(--_checkbox-stroke) var(--color-foreground-tertiary);\n  transition:\n    background-color var(--effect-motion-short-2),\n    box-shadow var(--effect-motion-short-2);\n}\n\n.box--marked {\n  color: var(--color-foreground-on-bold-background-primary);\n  background-color: var(--color-background-bold-brand);\n  box-shadow: none;\n}\n\n.checkbox__mark {\n  width: 100%;\n  height: 100%;\n  flex-shrink: 0;\n  stroke: currentColor;\n  stroke-width: var(--_checkbox-stroke);\n  stroke-linecap: butt;\n  stroke-linejoin: round;\n}\n\n.checkbox__mark--checked {\n  transform: translateY(-0.5px);\n}\n\n.checkbox__label {\n  flex: 1;\n  min-width: 0;\n  padding: 0 var(--ds-control-label-inset);\n}\n\n@media (forced-colors: active) {\n  .box {\n    border: var(--_checkbox-stroke) solid var(--ds-forced-color-content);\n    box-shadow: none;\n  }\n\n  .box--marked {\n    color: var(--ds-forced-color-on-selected);\n    background-color: var(--ds-forced-color-selected);\n    border-color: var(--ds-forced-color-selected);\n  }\n}\n",
+      "content": "@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  display: inline-flex;\n  align-items: center;\n  box-sizing: border-box;\n  gap: var(--ds-control-gap);\n  height: var(--ds-control-height);\n  padding: 0 var(--ds-control-padding-inline);\n  border-radius: var(--ds-control-radius);\n  cursor: default;\n  user-select: none;\n}\n\n:host(.checkbox--described) {\n  height: auto;\n  min-height: var(--ds-control-height);\n  padding-block: var(--dimension-space-075);\n}\n\n:host(.checkbox--presentation) {\n  width: var(--ds-control-icon);\n  height: var(--ds-control-icon);\n  padding: 0;\n  gap: 0;\n  pointer-events: none;\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity). */\n\n:host(.checkbox--lg) {\n  --_checkbox-box: var(--dimension-iconography-md);\n  --_checkbox-stroke: var(--dimension-stroke-width-018);\n}\n\n:host(.checkbox--md) {\n  --_checkbox-box: var(--dimension-iconography-sm);\n  --_checkbox-stroke: var(--dimension-stroke-width-015);\n}\n\n:host(.checkbox--sm) {\n  --_checkbox-box: var(--dimension-iconography-xs);\n  --_checkbox-stroke: var(--dimension-stroke-width-012);\n}\n\n:host(.checkbox--xs) {\n  --_checkbox-box: var(--dimension-size-100);\n  --_checkbox-stroke: calc(var(--dimension-stroke-width-base) * 3 / 32);\n}\n\n.checkbox__placement {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--ds-control-icon);\n  height: var(--ds-control-icon);\n}\n\n.box {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--_checkbox-box);\n  height: var(--_checkbox-box);\n  border: 0;\n  border-radius: var(--dimension-radius-025);\n  box-shadow: inset 0 0 0 var(--_checkbox-stroke) var(--color-foreground-tertiary);\n  transition:\n    background-color var(--effect-motion-short-2),\n    box-shadow var(--effect-motion-short-2);\n}\n\n.box--marked {\n  color: var(--color-foreground-on-bold-background-primary);\n  background-color: var(--color-background-bold-brand);\n  box-shadow: none;\n}\n\n.checkbox__mark {\n  width: 100%;\n  height: 100%;\n  flex-shrink: 0;\n  stroke: currentColor;\n  stroke-width: var(--_checkbox-stroke);\n  stroke-linecap: butt;\n  stroke-linejoin: round;\n}\n\n.checkbox__mark--checked {\n  transform: translateY(-0.5px);\n}\n\n.checkbox__copy {\n  display: grid;\n  flex: 1;\n  gap: var(--dimension-space-025);\n  min-width: 0;\n  padding: 0 var(--ds-control-label-inset);\n}\n\n@media (forced-colors: active) {\n  .box {\n    border: var(--_checkbox-stroke) solid var(--ds-forced-color-content);\n    box-shadow: none;\n  }\n\n  .box--marked {\n    color: var(--ds-forced-color-on-selected);\n    background-color: var(--ds-forced-color-selected);\n    border-color: var(--ds-forced-color-selected);\n  }\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/Checkbox/Checkbox.tsx",
-      "content": "import { AttachInternals, Component, Prop, State, Event, EventEmitter, Watch, h, Host } from '@stencil/core';\nimport {\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\n  /** Visible label and accessible name. Omitted only in presentation mode. */\n  @Prop() label!: 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={this.presentation ? undefined : this.indeterminate ? 'mixed' : String(this.checked)}\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-hidden={this.presentation ? 'true' : undefined}\n        tabIndex={this.presentation || inactive ? -1 : 0}\n        class={{\n          checkbox: true,\n          'checkbox--presentation': this.presentation,\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 density-specific state mark and its optical stroke.\n              <svg\n                class={{\n                  checkbox__mark: true,\n                  'checkbox__mark--checked': !this.indeterminate,\n                }}\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                focusable=\"false\"\n              >\n                <path\n                  d={this.indeterminate ? 'M4 8H12' : 'M3.5 8.25L6.75 11.5L12.5 4.75'}\n                  vector-effect=\"non-scaling-stroke\"\n                />\n              </svg>\n            )}\n          </span>\n        </span>\n        {!this.presentation && (\n          <ds-text\n            class=\"checkbox__label ds-interaction-fill__content\"\n            as=\"span\"\n            variant={CONTROL_TEXT_VARIANT[this.size]}\n            textId={this.labelId}\n          >\n            {this.label}\n          </ds-text>\n        )}\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { AttachInternals, Component, Prop, State, Event, EventEmitter, Watch, h, Host } 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={this.presentation ? undefined : this.indeterminate ? 'mixed' : String(this.checked)}\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={\n          !this.presentation && this.description ? this.descriptionId : undefined\n        }\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 density-specific state mark and its optical stroke.\n              <svg\n                class={{\n                  checkbox__mark: true,\n                  'checkbox__mark--checked': !this.indeterminate,\n                }}\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                focusable=\"false\"\n              >\n                <path\n                  d={this.indeterminate ? 'M4 8H12' : 'M3.5 8.25L6.75 11.5L12.5 4.75'}\n                  vector-effect=\"non-scaling-stroke\"\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

@@ -245,8 +245,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.0.0",
-          "@ds-mo/icons ^6.5.0"
+          "@ds-mo/tokens ^6.2.1",
+          "@ds-mo/icons ^6.6.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }
@@ -264,7 +264,7 @@
   "files": [
     {
       "path": "src/wc/components/Chip/Chip.css",
-      "content": "@import '../../utils/tag-chip.css';\n\n/*\n * Semantic state colors — Chip’s differentiator from Tag.\n * All states use the faint contrast weight; hue comes from the state.\n */\n:host(.chip--default) {\n  background-color: var(--color-background-faint-neutral);\n  color: var(--color-foreground-bold-neutral);\n}\n\n:host(.chip--active) {\n  background-color: var(--color-background-faint-brand);\n  color: var(--color-foreground-bold-brand);\n}\n\n:host(.chip--error) {\n  background-color: var(--color-background-faint-negative);\n  color: var(--color-foreground-bold-negative);\n}\n\n:host(.chip--caution) {\n  background-color: var(--color-background-faint-caution);\n  color: var(--color-foreground-bold-caution);\n}\n\n/*\n * Label↔dismiss uses host gap, mirroring Tag icon↔label spacing:\n * [inset][text][inset][gap][icon].\n */\n.tag__remove {\n  padding: 0;\n  margin: 0;\n  border: none;\n  background: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: default;\n  color: inherit;\n  flex-shrink: 0;\n  position: relative;\n  z-index: 2;\n  border-radius: var(--dimension-radius-half);\n}\n\n.tag__remove::before {\n  content: '';\n  position: absolute;\n  inset: var(--dimension-space-n025);\n  border-radius: var(--dimension-radius-half);\n  background-color: transparent;\n  transition: var(--effect-transition-interaction-background-short-2);\n  pointer-events: none;\n}\n\n.tag__remove:hover::before {\n  background-color: var(--color-interaction-hover);\n}\n\n.tag__remove:active::before {\n  background-color: var(--color-interaction-pressed);\n}\n\n:host(.tag--size-sm) .tag__remove::before {\n  inset: var(--dimension-space-n012);\n}\n\n:host(.tag--size-xs) .tag__remove::before {\n  inset: 0;\n}\n\n.tag__remove-x {\n  display: inline-flex;\n  flex-shrink: 0;\n  width: var(--ds-control-icon);\n  height: var(--ds-control-icon);\n}\n",
+      "content": "@import '../../utils/tag-chip.css';\n\n/*\n * Semantic state colors — Chip’s differentiator from Tag.\n * All states use the faint contrast weight; hue comes from the state.\n */\n:host(.chip--default) {\n  background-color: var(--color-background-faint-neutral);\n  color: var(--color-foreground-bold-neutral);\n}\n\n:host(.chip--active) {\n  background-color: var(--color-background-faint-brand);\n  color: var(--color-foreground-bold-brand);\n}\n\n:host(.chip--error) {\n  background-color: var(--color-background-faint-negative);\n  color: var(--color-foreground-bold-negative);\n}\n\n:host(.chip--caution) {\n  background-color: var(--color-background-faint-caution);\n  color: var(--color-foreground-bold-caution);\n}\n\n/*\n * Label↔dismiss uses host gap, mirroring Tag icon↔label spacing:\n * [inset][text][inset][gap][icon].\n */\n.tag__remove {\n  padding: 0;\n  margin: 0;\n  border: none;\n  background: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: default;\n  color: inherit;\n  flex-shrink: 0;\n  position: relative;\n  z-index: 2;\n  border-radius: var(--dimension-radius-half);\n}\n\n.tag__remove::before {\n  content: '';\n  position: absolute;\n  inset: var(--dimension-space-n025);\n  border-radius: var(--dimension-radius-half);\n  background-color: transparent;\n  transition: var(--effect-transition-interaction-background-short-2);\n  pointer-events: none;\n}\n\n@media (hover: hover) and (pointer: fine) {\n  .tag__remove:hover::before {\n    background-color: var(--color-interaction-hover);\n  }\n}\n\n.tag__remove:active::before {\n  background-color: var(--color-interaction-pressed);\n}\n\n:host(.tag--size-sm) .tag__remove::before {\n  inset: var(--dimension-space-n012);\n}\n\n:host(.tag--size-xs) .tag__remove::before {\n  inset: 0;\n}\n\n.tag__remove-x {\n  display: inline-flex;\n  flex-shrink: 0;\n  width: var(--ds-control-icon);\n  height: var(--ds-control-icon);\n}\n",
       "type": "registry:ui"
     },
     {

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

@@ -2,7 +2,7 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "code-block",
   "title": "CodeBlock",
-  "description": "Scrollable monospace code surface with optional language or filename context and copy action.",
+  "description": "Scrollable code surface with optional language or filename context and copy action.",
   "type": "registry:ui",
   "meta": {
     "library": "@ds-mo/ui",
@@ -13,7 +13,7 @@
     "intent": {
       "audience": "general",
       "status": "experimental",
-      "summary": "Scrollable monospace code surface with optional language or filename context and copy action.",
+      "summary": "Scrollable code surface with optional language or filename context and copy action.",
       "useWhen": [
         "A message or document displays fenced code that readers may copy."
       ],
@@ -26,7 +26,11 @@
       ],
       "accessibility": [
         "The copy action has matching accessible-name and visible-tooltip status wording, and the code remains selectable text.",
-        "Language and filename labels supplement rather than replace the code content."
+        "Language and filename labels supplement rather than replace the code content.",
+        "The semantic code-family token retains a system-monospace fallback when an application does not load Fira Code; applications may disable programming ligatures through the shared code-surface custom property."
+      ],
+      "states": [
+        "Applications load font assets once at their root. The component consumes --typography-font-family-code and never fetches or packages a font."
       ],
       "responsiveBehavior": [
         "Long lines scroll horizontally and do not widen the owning transcript."
@@ -34,7 +38,11 @@
       "references": [
         {
           "label": "Storybook examples",
-          "path": "src/wc/components/MessageScroller/MessageScroller.stories.ts"
+          "path": "src/wc/components/CodeBlock/CodeBlock.stories.ts"
+        },
+        {
+          "label": "Font ownership and loading",
+          "path": "docs/font-ownership.md"
         }
       ]
     },
@@ -120,8 +128,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.0.0",
-          "@ds-mo/icons ^6.5.0"
+          "@ds-mo/tokens ^6.2.1",
+          "@ds-mo/icons ^6.6.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }
@@ -139,7 +147,7 @@
   "files": [
     {
       "path": "src/wc/components/CodeBlock/CodeBlock.css",
-      "content": ":host {\n  display: block;\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.code-block {\n  width: 100%;\n  min-width: 0;\n  margin: 0;\n  overflow: hidden;\n  border-radius: var(--dimension-radius-050);\n  background: var(--color-background-strong-neutral);\n  color: var(--color-foreground-faint-neutral);\n  box-sizing: border-box;\n}\n\n.code-block__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--dimension-space-100);\n  min-height: var(--dimension-size-400);\n  padding: var(--dimension-space-050) var(--dimension-space-100);\n  background: var(--color-background-strong-neutral);\n  box-sizing: border-box;\n}\n\npre {\n  margin: 0;\n  padding: var(--dimension-space-150);\n  overflow: auto;\n  font-family: var(--typography-fontfamily-mono);\n  font-size: var(--typography-fontsize-sm);\n  line-height: var(--typography-lineheight-sm);\n  tab-size: 2;\n  -webkit-user-select: text;\n  user-select: text;\n}\n\ncode {\n  font: inherit;\n  white-space: pre;\n}\n",
+      "content": ":host {\n  display: block;\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.code-block {\n  width: 100%;\n  min-width: 0;\n  margin: 0;\n  overflow: hidden;\n  border-radius: var(--dimension-radius-050);\n  background: var(--color-background-strong-neutral);\n  color: var(--color-foreground-faint-neutral);\n  box-sizing: border-box;\n}\n\n.code-block__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--dimension-space-100);\n  min-height: var(--dimension-size-400);\n  padding: var(--dimension-space-050) var(--dimension-space-100);\n  background: var(--color-background-strong-neutral);\n  box-sizing: border-box;\n}\n\npre {\n  margin: 0;\n  padding: var(--dimension-space-150);\n  overflow: auto;\n  font-family: var(\n    --typography-font-family-code,\n    'Fira Code', ui-monospace, 'SFMono-Regular', 'Cascadia Code', 'Roboto Mono',\n    Menlo, Monaco, Consolas, 'Liberation Mono', monospace\n  );\n  font-size: var(--typography-fontsize-sm);\n  font-variant-ligatures: var(--ds-code-font-variant-ligatures, normal);\n  font-weight: var(--typography-weight-regular);\n  line-height: var(--typography-lineheight-sm);\n  letter-spacing: var(--typography-letterspacing-none);\n  tab-size: 2;\n  -webkit-user-select: text;\n  user-select: text;\n}\n\ncode {\n  font: inherit;\n  white-space: pre;\n}\n",
       "type": "registry:ui"
     },
     {

package/dist/mcp-data/registry/conversation-list-item.json

@@ -253,8 +253,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.0.0",
-          "@ds-mo/icons ^6.5.0"
+          "@ds-mo/tokens ^6.2.1",
+          "@ds-mo/icons ^6.6.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }
@@ -272,7 +272,7 @@
   "files": [
     {
       "path": "src/wc/components/ConversationListItem/ConversationListItem.css",
-      "content": "@import '../../utils/choice-list.css';\n@import '../../utils/visually-hidden.css';\n@import '../../styles/control-elevation.css';\n\n:host {\n  display: block;\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n:host(:hover),\n:host(:focus-within),\n:host(.conversation-list-item--actions-open) {\n  position: relative;\n  z-index: var(--dimension-z-index-floating);\n}\n\n.conversation-list-item__row {\n  position: relative;\n  isolation: isolate;\n}\n\n.conversation-list-item {\n  color: var(--color-foreground-primary);\n}\n\n.conversation-list-item--error {\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--color-border-bold-negative);\n}\n\n.conversation-list-item__leading:empty,\n.conversation-list-item__trailing:empty {\n  display: none;\n}\n\n.conversation-list-item__leading,\n.conversation-list-item__trailing,\n.conversation-list-item__preview-row {\n  display: flex;\n  align-items: center;\n}\n\n.conversation-list-item__leading {\n  align-self: center;\n  width: auto;\n  height: auto;\n  margin-inline-start: var(--ds-control-label-inset, var(--dimension-space-025));\n  margin-inline-end: var(--dimension-space-050);\n}\n\n.conversation-list-item__content {\n  min-width: 0;\n}\n\n.conversation-list-item__title-row {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n}\n\n.conversation-list-item__preview-row {\n  min-width: 0;\n  gap: var(--dimension-space-050);\n}\n\nds-text.conversation-list-item__title,\nds-text.conversation-list-item__preview {\n  display: block;\n  min-width: 0;\n}\n\nds-text.conversation-list-item__title {\n  flex: 1;\n}\n\n.conversation-list-item__unread {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--dimension-size-200);\n  margin-inline-end: var(--dimension-space-025);\n}\n\nds-text.conversation-list-item__preview.ds-choice-item__subtext {\n  -webkit-line-clamp: 1;\n}\n\n.conversation-list-item__actions {\n  position: absolute;\n  top: 50%;\n  right: var(--dimension-space-100);\n  z-index: var(--dimension-z-index-floating);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--dimension-radius-half);\n  background: var(--color-background-transparent);\n  -webkit-backdrop-filter: blur(var(--effect-blur-sm));\n  backdrop-filter: blur(var(--effect-blur-sm));\n  opacity: 0;\n  pointer-events: none;\n  transform: translateY(-50%);\n}\n\n.conversation-list-item__row:hover .conversation-list-item__actions,\n.conversation-list-item__row:has(:focus-visible) .conversation-list-item__actions,\n:host(.conversation-list-item--actions-open) .conversation-list-item__actions {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* Keep the row wash continuous while the pointer moves onto its sibling action. */\n.conversation-list-item__row:hover .conversation-list-item::after {\n  background: var(--ds-interaction-hover);\n}\n\n:host(.conversation-list-item--actions-open) .conversation-list-item::after {\n  background: var(--ds-interaction-hover);\n}\n\n.conversation-list-item__row:active .conversation-list-item::after {\n  background: var(--ds-interaction-pressed);\n}\n\n@media (hover: none) {\n  .conversation-list-item__actions {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  :host(.conversation-list-item--has-actions) .conversation-list-item__title-row {\n    padding-inline-end: var(--dimension-size-400);\n  }\n}\n\n",
+      "content": "@import '../../utils/choice-list.css';\n@import '../../utils/visually-hidden.css';\n@import '../../styles/control-elevation.css';\n\n:host {\n  display: block;\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n:host(:focus-within),\n:host(.conversation-list-item--actions-open) {\n  position: relative;\n  z-index: var(--dimension-z-index-floating);\n}\n\n.conversation-list-item__row {\n  position: relative;\n  isolation: isolate;\n}\n\n.conversation-list-item {\n  color: var(--color-foreground-primary);\n}\n\n.conversation-list-item--error {\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--color-border-bold-negative);\n}\n\n.conversation-list-item__leading:empty,\n.conversation-list-item__trailing:empty {\n  display: none;\n}\n\n.conversation-list-item__leading,\n.conversation-list-item__trailing,\n.conversation-list-item__preview-row {\n  display: flex;\n  align-items: center;\n}\n\n.conversation-list-item__leading {\n  align-self: center;\n  width: auto;\n  height: auto;\n  margin-inline-start: var(--ds-control-label-inset, var(--dimension-space-025));\n  margin-inline-end: var(--dimension-space-050);\n}\n\n.conversation-list-item__content {\n  min-width: 0;\n}\n\n.conversation-list-item__title-row {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n}\n\n.conversation-list-item__preview-row {\n  min-width: 0;\n  gap: var(--dimension-space-050);\n}\n\nds-text.conversation-list-item__title,\nds-text.conversation-list-item__preview {\n  display: block;\n  min-width: 0;\n}\n\nds-text.conversation-list-item__title {\n  flex: 1;\n}\n\n.conversation-list-item__unread {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--dimension-size-200);\n  margin-inline-end: var(--dimension-space-025);\n}\n\nds-text.conversation-list-item__preview.ds-choice-item__subtext {\n  -webkit-line-clamp: 1;\n}\n\n.conversation-list-item__actions {\n  position: absolute;\n  top: 50%;\n  right: var(--dimension-space-100);\n  z-index: var(--dimension-z-index-floating);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--dimension-radius-half);\n  background: var(--color-background-transparent);\n  -webkit-backdrop-filter: blur(var(--effect-blur-sm));\n  backdrop-filter: blur(var(--effect-blur-sm));\n  opacity: 0;\n  pointer-events: none;\n  transform: translateY(-50%);\n}\n\n.conversation-list-item__row:has(:focus-visible) .conversation-list-item__actions,\n:host(.conversation-list-item--actions-open) .conversation-list-item__actions {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n:host(.conversation-list-item--actions-open) .conversation-list-item::after {\n  background: var(--ds-interaction-hover);\n}\n\n.conversation-list-item__row:active .conversation-list-item::after {\n  background: var(--ds-interaction-pressed);\n}\n\n@media (hover: hover) and (pointer: fine) {\n  :host(:hover) {\n    position: relative;\n    z-index: var(--dimension-z-index-floating);\n  }\n\n  .conversation-list-item__row:hover .conversation-list-item__actions {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  /* Keep the row wash continuous while the pointer moves onto its sibling action. */\n  .conversation-list-item__row:hover .conversation-list-item::after {\n    background: var(--ds-interaction-hover);\n  }\n}\n\n@media (hover: none) {\n  .conversation-list-item__actions {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  :host(.conversation-list-item--has-actions) .conversation-list-item__title-row {\n    padding-inline-end: var(--dimension-size-400);\n  }\n}\n",
       "type": "registry:ui"
     },
     {

package/dist/mcp-data/registry/conversation-list-section.json

@@ -110,8 +110,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.0.0",
-          "@ds-mo/icons ^6.5.0"
+          "@ds-mo/tokens ^6.2.1",
+          "@ds-mo/icons ^6.6.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -102,8 +102,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.0.0",
-          "@ds-mo/icons ^6.5.0"
+          "@ds-mo/tokens ^6.2.1",
+          "@ds-mo/icons ^6.6.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -198,8 +198,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.0.0",
-          "@ds-mo/icons ^6.5.0"
+          "@ds-mo/tokens ^6.2.1",
+          "@ds-mo/icons ^6.6.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -170,8 +170,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.0.0",
-          "@ds-mo/icons ^6.5.0"
+          "@ds-mo/tokens ^6.2.1",
+          "@ds-mo/icons ^6.6.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -193,8 +193,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.0.0",
-          "@ds-mo/icons ^6.5.0"
+          "@ds-mo/tokens ^6.2.1",
+          "@ds-mo/icons ^6.6.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }