@ds-mo/ui 15.2.0 → 15.4.0

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

@@ -2,7 +2,7 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "card-setting",
   "title": "CardSetting",
-  "description": "Persistent settings-section surface with a heading, controlled view/edit chrome, fixed edit-save-cancel actions, and application-owned body content.",
+  "description": "Persistent settings-section surface with a heading, optional controlled edit chrome, and application-owned body content.",
   "type": "registry:ui",
   "meta": {
     "library": "@ds-mo/ui",
@@ -13,17 +13,17 @@
     "intent": {
       "audience": "general",
       "status": "stable",
-      "summary": "Persistent settings-section surface with a heading, controlled view/edit chrome, fixed edit-save-cancel actions, and application-owned body content.",
+      "summary": "Persistent settings-section surface with a heading, optional controlled edit chrome, and application-owned body content.",
       "useWhen": [
         "A settings page needs a persistent section that switches between read-only and editable content.",
         "The parent can control one active editing section and owns validation, persistence, cancellation, and body content.",
-        "The section uses the standard Pencil, Save, and Cancel header workflow."
+        "The section uses the standard Pencil, Save, and Cancel header workflow.",
+        "Settings apply immediately through their own controls and share the standard section surface without edit, save, or cancel actions."
       ],
       "avoidWhen": [
         "The surface contains a chart, legend, metric visualization, or other data-visualization composition.",
         "The content is a general-purpose read-only card with no settings edit workflow.",
         "The task must block the rest of the interface or requires confirmation in a modal.",
-        "Several sections must remain editable at the same time.",
         "The header requires custom actions beyond the fixed edit-save-cancel workflow."
       ],
       "alternatives": [
@@ -48,7 +48,11 @@
         "component:ds-input",
         "component:ds-select",
         "component:ds-switch",
-        "component:ds-text"
+        "component:ds-text",
+        "component:ds-setting-row-toggle",
+        "component:ds-setting-row-radio",
+        "component:ds-setting-row-checkbox",
+        "component:ds-inline-banner-settings"
       ],
       "accessibility": [
         "Provide a concise heading that identifies the settings section; CardSetting renders it as an h2.",
@@ -63,25 +67,30 @@
         "The editing property is controlled; CardSetting never changes it internally.",
         "dsAction emits edit, save, or cancel with the original pointer event. The parent decides whether and when editing changes.",
         "When another section requests edit, the parent keeps one active section and resolves any dirty current section before switching.",
+        "Project persistent informational copy into the banner slot so it sits above the padded content body and does not receive content-area padding.",
         "The parent owns read-only versus editable body composition, dirty state, validation, persistence, loading, success, and error consequences.",
         "A save request keeps the section editing while validation or persistence is pending; the parent exits only after success.",
-        "A cancel request does not persist changes; the parent restores its chosen value snapshot and exits editing."
+        "A cancel request does not persist changes; the parent restores its chosen value snapshot and exits editing.",
+        "The immediate variant keeps the resting card surface and omits header actions even if editing is supplied. The application applies and persists each control change independently."
       ],
       "responsiveBehavior": [
-        "Choose sm, md, or lg from the parent layout; each width uses its matching token-based minimum height.",
+        "Choose sm, md, or lg from the parent layout. Empty editable cards use the matching minimum height. Cards with body content, and immediate cards, fit that content.",
         "The surface never exceeds its parent width, while the parent owns wrapping, columns, stacking, and breakpoint changes.",
         "At narrow widths, keep the fixed header actions visible and let application-owned body layouts collapse before allowing horizontal overflow."
       ],
       "frameworkCaveats": {
         "customElements": [
+          "Project ds-inline-banner-settings with slot=\"banner\". Leave setting rows and other controls in the default slot.",
           "Set editing as a JavaScript property and inspect dsAction.detail.action before updating the controlled state.",
           "When one section emits edit, update every sibling CardSetting so only the requested section remains editing."
         ],
         "react": [
+          "Pass slot=\"banner\" on ds-inline-banner-settings. Leave setting rows and other controls in the default slot.",
           "Pass editing from parent state and inspect onDsAction event detail; do not treat Save as successful until validation and persistence complete.",
           "Store one active section id and derive each CardSetting editing prop from that id."
         ],
         "angular": [
+          "Set slot=\"banner\" on ds-inline-banner-settings. Leave setting rows and other controls in the default slot.",
           "Bind [editing] and inspect $event.detail.action from (dsAction); do not treat Save as successful until validation and persistence complete.",
           "Store one active section id and derive each CardSetting editing binding from that id."
         ]
@@ -116,14 +125,22 @@
             "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
             "props": []
           },
+          {
+            "properties": [
+              "padding"
+            ],
+            "reason": "Content-area padding-block belongs on the body. The banner slot sits above that padding and does not receive it.",
+            "props": []
+          },
           {
             "properties": [
               "width",
               "min-height"
             ],
-            "reason": "Card width selects the component geometry; use cardWidth and let the parent constrain available space.",
+            "reason": "Card width selects the component geometry. Empty editable cards keep the matching minimum height; cards with body content and immediate cards fit that content. Let the parent constrain available space.",
             "props": [
-              "cardWidth"
+              "cardWidth",
+              "variant"
             ]
           }
         ],
@@ -147,7 +164,7 @@
           "default": "'md'",
           "required": false,
           "mutable": false,
-          "description": "Card width token (`sm` / `md` / `lg`). Also sets host `min-height` to the\nmatching `--dimension-card-height-*` so the body fills available space\neven when the slot is empty."
+          "description": "Card width token (`sm` / `md` / `lg`). Empty editable cards use the matching\nminimum-height token. Cards with body content, and immediate cards, fit\nthat content."
         },
         "editLabel": {
           "type": "string",
@@ -181,6 +198,15 @@
           "default": "'Save'",
           "required": false,
           "mutable": false
+        },
+        "variant": {
+          "type": "CardSettingVariant",
+          "resolvedType": "\"editable\" | \"immediate\"",
+          "attribute": "variant",
+          "default": "'editable'",
+          "required": false,
+          "mutable": false,
+          "description": "Immediate settings omit edit actions and apply changes through their own controls."
         }
       },
       "events": [
@@ -212,7 +238,7 @@
         "default": "'md'",
         "required": false,
         "mutable": false,
-        "description": "Card width token (`sm` / `md` / `lg`). Also sets host `min-height` to the\nmatching `--dimension-card-height-*` so the body fills available space\neven when the slot is empty."
+        "description": "Card width token (`sm` / `md` / `lg`). Empty editable cards use the matching\nminimum-height token. Cards with body content, and immediate cards, fit\nthat content."
       },
       "editLabel": {
         "type": "string",
@@ -246,6 +272,15 @@
         "default": "'Save'",
         "required": false,
         "mutable": false
+      },
+      "variant": {
+        "type": "CardSettingVariant",
+        "resolvedType": "\"editable\" | \"immediate\"",
+        "attribute": "variant",
+        "default": "'editable'",
+        "required": false,
+        "mutable": false,
+        "description": "Immediate settings omit edit actions and apply changes through their own controls."
       }
     },
     "events": [
@@ -287,8 +322,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^8.1.0"
+          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }
@@ -306,12 +341,12 @@
   "files": [
     {
       "path": "src/wc/components/CardSetting/CardSetting.css",
-      "content": "@import '../../utils/radius.css';\n@import '../../utils/chrome-header.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: var(--_card-setting-width);\n  min-height: var(--_card-setting-min-height);\n  max-width: 100%;\n  overflow: hidden;\n  border: none;\n  border-radius: var(--ds-radius-card);\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-shadow-elevated-sm);\n}\n\n:host::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  z-index: 4;\n  border-radius: inherit;\n  box-shadow: var(--effect-highlight-elevated-sm);\n  pointer-events: none;\n}\n\n:host(.card-setting--editing) {\n  background-color: var(--color-background-bold-brand);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);\n}\n\n:host(.card-setting--editing)::after {\n  box-shadow: none;\n}\n\n.card-setting__header {\n  flex: 0 0 auto;\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n:host(.card-setting--editing) .card-setting__header {\n  border-bottom-color: transparent;\n}\n\n.card-setting__copy {\n  align-items: center;\n}\n\nds-text.card-setting__title {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.card-setting__actions {\n  flex-shrink: 0;\n}\n\n.card-setting__body {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  min-height: 0;\n  box-sizing: border-box;\n  background-color: var(--color-background-primary);\n  border-radius: 0 0 var(--ds-radius-card) var(--ds-radius-card);\n}\n\n:host(.card-setting--editing) .card-setting__body {\n  border-radius: var(--ds-radius-card);\n}\n\n@media (forced-colors: active) {\n  :host {\n    box-shadow: none;\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n  }\n\n  :host::after {\n    box-shadow: none;\n  }\n}\n",
+      "content": "@import '../../utils/radius.css';\n@import '../../utils/chrome-header.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: var(--_card-setting-width);\n  min-height: var(--_card-setting-min-height);\n  max-width: 100%;\n  overflow: hidden;\n  border: none;\n  border-radius: var(--ds-radius-card);\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-shadow-elevated-sm);\n}\n\n:host::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  z-index: 4;\n  border-radius: inherit;\n  box-shadow: var(--effect-highlight-elevated-sm);\n  pointer-events: none;\n}\n\n:host(.card-setting--editing) {\n  background-color: var(--color-background-bold-brand);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);\n}\n\n:host(.card-setting--editing)::after {\n  box-shadow: none;\n}\n\n.card-setting__header {\n  flex: 0 0 auto;\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n:host(.card-setting--editing) .card-setting__header {\n  border-bottom-color: transparent;\n}\n\n.card-setting__copy {\n  align-items: center;\n}\n\nds-text.card-setting__title {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.card-setting__actions {\n  flex-shrink: 0;\n}\n\n.card-setting__panel {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  min-height: 0;\n  box-sizing: border-box;\n  background-color: var(--color-background-primary);\n  border-radius: 0 0 var(--ds-radius-card) var(--ds-radius-card);\n}\n\n:host(.card-setting--editing) .card-setting__panel {\n  border-radius: var(--ds-radius-card);\n}\n\n.card-setting__banner {\n  flex: 0 0 auto;\n  min-width: 0;\n}\n\n.card-setting__banner--empty {\n  display: none;\n}\n\n.card-setting__body {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  min-height: 0;\n  box-sizing: border-box;\n  padding-block: var(--dimension-space-100);\n}\n\n@media (forced-colors: active) {\n  :host {\n    box-shadow: none;\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n  }\n\n  :host::after {\n    box-shadow: none;\n  }\n}\n",
       "type": "registry:ui"
     },
     {
       "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 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",
+      "content": "import { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\n\nexport type CardSettingVariant = 'editable' | 'immediate';\nexport type CardSettingWidth = 'sm' | 'md' | 'lg';\nexport type CardSettingAction = 'edit' | 'save' | 'cancel';\n\nexport interface CardSettingActionDetail {\n  action: CardSettingAction;\n  originalEvent: MouseEvent;\n}\n\nconst CARD_WIDTH_VARS: Record<CardSettingWidth, string> = {\n  sm: 'var(--dimension-card-width-sm)',\n  md: 'var(--dimension-card-width-md)',\n  lg: 'var(--dimension-card-width-lg)',\n};\n\nconst CARD_HEIGHT_VARS: Record<CardSettingWidth, string> = {\n  sm: 'var(--dimension-card-height-sm)',\n  md: 'var(--dimension-card-height-md)',\n  lg: 'var(--dimension-card-height-lg)',\n};\n\nconst FAINT_BRAND_TITLE_COLOR = 'var(--color-foreground-faint-brand)';\n\nconst isRenderableNode = (node: Node): boolean => {\n  if (node.nodeType === Node.ELEMENT_NODE) {\n    return (node as Element).tagName !== 'SLOT';\n  }\n  return node.nodeType === Node.TEXT_NODE && Boolean(node.textContent?.trim());\n};\n\nconst slotName = (node: Node): string | null =>\n  node.nodeType === Node.ELEMENT_NODE ? (node as Element).getAttribute('slot') : null;\n\nconst isDefaultSlottedNode = (node: Node): boolean => isRenderableNode(node) && !slotName(node);\n\nconst isBannerSlottedNode = (node: Node): boolean =>\n  isRenderableNode(node) && slotName(node) === 'banner';\n\nconst slotHasRenderableContent = (slot: HTMLSlotElement | null): boolean =>\n  Boolean(slot?.assignedNodes({ flatten: true }).some(isRenderableNode));\n\n@Component({\n  tag: 'ds-card-setting',\n  styleUrl: 'CardSetting.css',\n  scoped: true,\n})\nexport class CardSetting {\n  @Element() el!: HTMLElement;\n\n  /** Section heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /**\n   * Card width token (`sm` / `md` / `lg`). Empty editable cards use the matching\n   * minimum-height token. Cards with body content, and immediate cards, fit\n   * that content.\n   */\n  @Prop() cardWidth: CardSettingWidth = 'md';\n\n  /** Immediate settings omit edit actions and apply changes through their own controls. */\n  @Prop() variant: CardSettingVariant = 'editable';\n\n  /** Controlled edit state — parent owns single-edit orchestration. */\n  @Prop() editing = false;\n  @Prop() editLabel: string = 'Edit';\n  @Prop() cancelLabel: string = 'Cancel';\n  @Prop() saveLabel: string = 'Save';\n\n  /** Emits a controlled edit, save, or cancel request. */\n  @Event() dsAction!: EventEmitter<CardSettingActionDetail>;\n\n  @State() private hasBannerContent = false;\n  @State() private hasBodyContent = false;\n\n  componentWillLoad() {\n    const nodes = Array.from(this.el.childNodes);\n    this.hasBannerContent = nodes.some(isBannerSlottedNode);\n    this.hasBodyContent = nodes.some(isDefaultSlottedNode);\n  }\n\n  componentDidLoad() {\n    this.syncBannerContent();\n    this.syncBodyContent();\n  }\n\n  private emitAction(action: CardSettingAction, originalEvent: MouseEvent) {\n    this.dsAction.emit({ action, originalEvent });\n  }\n\n  private readSlotContent(\n    event: Event | undefined,\n    slotSelector: string,\n    containerSelector: string\n  ): boolean {\n    const slot =\n      event?.target instanceof HTMLSlotElement\n        ? event.target\n        : this.el.querySelector<HTMLSlotElement>(slotSelector);\n    if (slotHasRenderableContent(slot)) return true;\n    const container = this.el.querySelector(containerSelector);\n    return Array.from(container?.childNodes ?? []).some(isRenderableNode);\n  }\n\n  private syncBannerContent = (event?: Event) => {\n    const hasContent = this.readSlotContent(\n      event,\n      ':scope > .card-setting__panel > .card-setting__banner > slot',\n      ':scope > .card-setting__panel > .card-setting__banner'\n    );\n    if (hasContent !== this.hasBannerContent) this.hasBannerContent = hasContent;\n  };\n\n  private syncBodyContent = (event?: Event) => {\n    const hasContent = this.readSlotContent(\n      event,\n      ':scope > .card-setting__panel > .card-setting__body > slot',\n      ':scope > .card-setting__panel > .card-setting__body'\n    );\n    if (hasContent !== this.hasBodyContent) this.hasBodyContent = hasContent;\n  };\n\n  private get hugContent(): boolean {\n    return this.variant === 'immediate' || this.hasBannerContent || this.hasBodyContent;\n  }\n\n  render() {\n    const editing = this.variant === 'editable' && this.editing;\n\n    return (\n      <Host\n        class={{\n          'card-setting': true,\n          'card-setting--editing': editing,\n          'card-setting--immediate': this.variant === 'immediate',\n          'card-setting--empty': !this.hugContent,\n        }}\n        style={{\n          '--_card-setting-width': CARD_WIDTH_VARS[this.cardWidth],\n          '--_card-setting-min-height': this.hugContent ? '0' : CARD_HEIGHT_VARS[this.cardWidth],\n        }}\n      >\n        <header class=\"card-setting__header ds-chrome-header\">\n          {/* eslint-disable-next-line compomo/prefer-direct-ds-text -- Shared header copy owns the control-density geometry around the semantic heading. */}\n          <div class=\"card-setting__copy ds-chrome-header__copy ds-control--md\">\n            <ds-text\n              class=\"card-setting__title ds-chrome-header__heading\"\n              variant=\"text-title-small\"\n              emphasis\n              color={editing ? FAINT_BRAND_TITLE_COLOR : 'primary'}\n              as=\"h2\"\n            >\n              {this.heading}\n            </ds-text>\n          </div>\n          {this.variant === 'editable' && (\n            <div class=\"card-setting__actions ds-chrome-header__trailing\">\n              {!editing ? (\n                <ds-button-unfilled\n                  variant=\"icon\"\n                  type=\"button\"\n                  icon=\"Pencil\"\n                  aria-label={this.editLabel}\n                  onDsClick={(event: CustomEvent<MouseEvent>) =>\n                    this.emitAction('edit', event.detail)\n                  }\n                />\n              ) : (\n                [\n                  <ds-button-unfilled\n                    key=\"cancel\"\n                    variant=\"icon\"\n                    type=\"button\"\n                    icon=\"Cross\"\n                    background=\"bold\"\n                    aria-label={this.cancelLabel}\n                    onDsClick={(event: CustomEvent<MouseEvent>) =>\n                      this.emitAction('cancel', event.detail)\n                    }\n                  />,\n                  <ds-button-filled\n                    key=\"save\"\n                    variant=\"icon\"\n                    type=\"button\"\n                    icon=\"Check\"\n                    intent=\"brand\"\n                    contrast=\"faint\"\n                    aria-label={this.saveLabel}\n                    onDsClick={(event: CustomEvent<MouseEvent>) =>\n                      this.emitAction('save', event.detail)\n                    }\n                  />,\n                ]\n              )}\n            </div>\n          )}\n        </header>\n        <div class=\"card-setting__panel\">\n          <div\n            class={{\n              'card-setting__banner': true,\n              'card-setting__banner--empty': !this.hasBannerContent,\n            }}\n          >\n            <slot name=\"banner\" onSlotchange={this.syncBannerContent} />\n          </div>\n          <div class=\"card-setting__body\">\n            <slot onSlotchange={this.syncBodyContent} />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

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

@@ -326,8 +326,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^8.1.0"
+          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -277,8 +277,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: items.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^8.1.0"
+          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -239,8 +239,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: definition.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^8.1.0"
+          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -0,0 +1,246 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox-group",
+  "title": "CheckboxGroup",
+  "description": "A visible, accessible label and shared vertical rhythm for a list of independent Checkbox controls.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/checkbox-group",
+    "source": "src/wc/components/CheckboxGroup/CheckboxGroup.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "experimental",
+      "summary": "A visible, accessible label and shared vertical rhythm for a list of independent Checkbox controls.",
+      "useWhen": [
+        "Two or more related checkboxes need one visible group label in a form.",
+        "A checkbox list should use the same density-aligned heading geometry as other compact option lists."
+      ],
+      "avoidWhen": [
+        "Only one standalone checkbox is needed.",
+        "Exactly one option may be selected; use Radio instead.",
+        "The list is a settings-card row; use component:ds-setting-row-checkbox, which owns the heading and view/edit presentation."
+      ],
+      "alternatives": [
+        {
+          "when": "Exactly one option may be selected.",
+          "component": "component:ds-radio",
+          "reason": "Radio owns mutually exclusive selection and keyboard traversal."
+        }
+      ],
+      "commonlyComposedWith": [
+        "component:ds-checkbox",
+        "component:ds-text",
+        "component:ds-setting-row-checkbox"
+      ],
+      "accessibility": [
+        "The visible label names the role=group container; each slotted Checkbox keeps its own visible label, state, focus, and form value.",
+        "Inside ds-setting-row-checkbox the visible form label is omitted on first paint; the row heading is the accessible name via aria-labelledby.",
+        "Use aria-describedby to associate group-level guidance or validation copy.",
+        "Use the same size on CheckboxGroup and every slotted Checkbox so their text origins and density remain aligned."
+      ],
+      "states": [
+        "The label uses the shared density section-heading row and body-small emphasis.",
+        "Vertical checkbox options use a 4px gap; at medium density the group label and each single-line checkbox row are 32px high.",
+        "Selection, mixed, inactive, validation, and form behavior remain owned by each slotted Checkbox."
+      ],
+      "responsiveBehavior": [
+        "The group fills the width supplied by its parent while each Checkbox keeps its intrinsic row width and allows copy to wrap."
+      ],
+      "frameworkCaveats": {
+        "customElements": [
+          "Slot two or more ds-checkbox children and keep their name, value, and checked state application-owned."
+        ],
+        "react": [
+          "Compose DsCheckbox children inside DsCheckboxGroup."
+        ],
+        "vue": [
+          "Compose DsCheckbox children inside DsCheckboxGroup."
+        ],
+        "angular": [
+          "Compose generated DsCheckbox adapters inside DsCheckboxGroup."
+        ]
+      },
+      "references": [
+        {
+          "label": "Storybook examples",
+          "path": "src/wc/components/CheckboxGroup/CheckboxGroup.stories.ts"
+        },
+        {
+          "label": "Rendered form geometry coverage",
+          "path": "tests/e2e/forms.spec.ts"
+        }
+      ],
+      "styling": {
+        "rationale": "The group owns only its label and option-list rhythm; each Checkbox owns its own selection anatomy.",
+        "protected": [
+          {
+            "properties": [
+              "gap",
+              "padding",
+              "font",
+              "font-size",
+              "font-weight",
+              "line-height"
+            ],
+            "reason": "Use size to keep the heading and slotted controls on the shared density recipe.",
+            "props": [
+              "size"
+            ]
+          }
+        ],
+        "customProperties": []
+      }
+    },
+    "api": {
+      "props": {
+        "ariaDescribedby": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "aria-describedby",
+          "required": false,
+          "mutable": false,
+          "description": "Id reference for supporting guidance or an error message."
+        },
+        "ariaLabel": {
+          "type": "string | null",
+          "resolvedType": "null | string",
+          "attribute": "aria-label",
+          "default": "null",
+          "required": false,
+          "mutable": false,
+          "description": "Accessible name when visible group labeling is unavailable."
+        },
+        "ariaLabelledby": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "aria-labelledby",
+          "required": false,
+          "mutable": false,
+          "description": "Id reference for a visible group label."
+        },
+        "label": {
+          "type": "string",
+          "resolvedType": "string | undefined",
+          "attribute": "label",
+          "required": false,
+          "mutable": false,
+          "description": "Visible label and accessible name for the checkbox list."
+        },
+        "size": {
+          "type": "CheckboxGroupSize",
+          "resolvedType": "\"lg\" | \"md\" | \"sm\" | \"xs\"",
+          "attribute": "size",
+          "default": "'md'",
+          "required": false,
+          "mutable": false,
+          "description": "Density of the label row; use the same size on every slotted Checkbox."
+        }
+      },
+      "events": [],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "ariaDescribedby": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "aria-describedby",
+        "required": false,
+        "mutable": false,
+        "description": "Id reference for supporting guidance or an error message."
+      },
+      "ariaLabel": {
+        "type": "string | null",
+        "resolvedType": "null | string",
+        "attribute": "aria-label",
+        "default": "null",
+        "required": false,
+        "mutable": false,
+        "description": "Accessible name when visible group labeling is unavailable."
+      },
+      "ariaLabelledby": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "aria-labelledby",
+        "required": false,
+        "mutable": false,
+        "description": "Id reference for a visible group label."
+      },
+      "label": {
+        "type": "string",
+        "resolvedType": "string | undefined",
+        "attribute": "label",
+        "required": false,
+        "mutable": false,
+        "description": "Visible label and accessible name for the checkbox list."
+      },
+      "size": {
+        "type": "CheckboxGroupSize",
+        "resolvedType": "\"lg\" | \"md\" | \"sm\" | \"xs\"",
+        "attribute": "size",
+        "default": "'md'",
+        "required": false,
+        "mutable": false,
+        "description": "Density of the label row; use the same size on every slotted Checkbox."
+      }
+    },
+    "events": [],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-checkbox-group",
+      "react": "DsCheckboxGroup",
+      "vue": "DsCheckboxGroup",
+      "angular": "DsCheckboxGroup"
+    },
+    "consumption": {
+      "install": "npm install @ds-mo/ui @ds-mo/tokens @ds-mo/icons",
+      "cssSetup": "import '@ds-mo/tokens';\nimport '@ds-mo/tokens/reset';\nimport '@ds-mo/tokens/globals';",
+      "customElements": {
+        "import": "import '@ds-mo/ui/dist/components/ds-checkbox-group.js';",
+        "example": "<ds-checkbox-group></ds-checkbox-group>"
+      },
+      "react": {
+        "import": "import { DsCheckboxGroup } from '@ds-mo/ui/react';",
+        "example": "<DsCheckboxGroup />"
+      },
+      "vue": {
+        "import": "import { DsCheckboxGroup } from '@ds-mo/ui/vue';",
+        "example": "<DsCheckboxGroup />"
+      },
+      "angular": {
+        "import": "import { DsCheckboxGroup } from '@ds-mo/ui/angular/ds-checkbox-group';",
+        "example": "<ds-checkbox-group></ds-checkbox-group>"
+      },
+      "peerDependencies": {
+        "required": [
+          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/icons ^8.1.1"
+        ],
+        "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
+      }
+    }
+  },
+  "dependencies": [
+    "@ds-mo/ui",
+    "@ds-mo/tokens"
+  ],
+  "registryDependencies": [
+    "text"
+  ],
+  "files": [
+    {
+      "path": "src/wc/components/CheckboxGroup/CheckboxGroup.css",
+      "content": "@import '../../utils/control-density.css';\n@import '../../utils/control-parts.css';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n}\n\n.checkbox-group__options {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n}\n\n::slotted(ds-checkbox) {\n  align-self: flex-start;\n  max-width: 100%;\n  min-width: 0;\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/CheckboxGroup/CheckboxGroup.tsx",
+      "content": "import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nexport type CheckboxGroupSize = 'lg' | 'md' | 'sm' | 'xs';\n\nlet checkboxGroupId = 0;\n\n@Component({\n  tag: 'ds-checkbox-group',\n  styleUrl: 'CheckboxGroup.css',\n  scoped: true,\n})\nexport class CheckboxGroup {\n  @Element() el!: HTMLElement;\n  private readonly labelId = `ds-checkbox-group-label-${++checkboxGroupId}`;\n\n  /** Visible label and accessible name for the checkbox list. */\n  @Prop() label?: string;\n  /** Density of the label row; use the same size on every slotted Checkbox. */\n  @Prop() size: CheckboxGroupSize = 'md';\n  /** Accessible name when visible group labeling is unavailable. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  /** Id reference for a visible group label. */\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n  /** Id reference for supporting guidance or an error message. */\n  @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n\n  private get hasGroupLabel(): boolean {\n    return Boolean(this.label?.trim());\n  }\n\n  /** Settings rows own a separate heading; never mount the form group label there. */\n  private get showGroupLabel(): boolean {\n    return this.hasGroupLabel && !this.el.closest('ds-setting-row-checkbox');\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"group\"\n        aria-label={this.showGroupLabel ? undefined : this.ariaLabel}\n        aria-labelledby={this.showGroupLabel ? this.labelId : this.ariaLabelledby}\n        aria-describedby={this.ariaDescribedby}\n        class={{\n          'checkbox-group': true,\n          [`checkbox-group--${this.size}`]: true,\n          'checkbox-group--labeled': this.showGroupLabel,\n        }}\n      >\n        {this.showGroupLabel ? (\n          <ds-text\n            key=\"checkbox-group-label\"\n            class={`checkbox-group__label ds-control-section-heading ds-control--${this.size}`}\n            as=\"span\"\n            variant=\"text-body-small\"\n            emphasis\n            textId={this.labelId}\n          >\n            {this.label}\n          </ds-text>\n        ) : null}\n        <div key=\"checkbox-group-options\" class=\"checkbox-group__options\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

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

@@ -58,7 +58,8 @@
         "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, 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."
+        "Description-rich checkboxes grow beyond the fixed density height while retaining its minimum target size and align the checkbox placement with the primary label line.",
+        "Form and settings usage omits a row hover or pressed wash by default; set hasInteractionFill only when the checkbox itself is presented as a choice-list row."
       ],
       "responsiveBehavior": [
         "Choose size from the density of the containing row; labels and descriptions may wrap while the placement box stays fixed.",
@@ -119,7 +120,8 @@
             "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
             "props": [
               "size",
-              "presentation"
+              "presentation",
+              "hasInteractionFill"
             ]
           }
         ],
@@ -154,6 +156,15 @@
           "mutable": false,
           "description": "Native disabled state."
         },
+        "hasInteractionFill": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "has-interaction-fill",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Show full-row hover and pressed feedback for choice-list presentations."
+        },
         "indeterminate": {
           "type": "boolean",
           "resolvedType": "boolean",
@@ -274,6 +285,15 @@
         "mutable": false,
         "description": "Native disabled state."
       },
+      "hasInteractionFill": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "has-interaction-fill",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Show full-row hover and pressed feedback for choice-list presentations."
+      },
       "indeterminate": {
         "type": "boolean",
         "resolvedType": "boolean",
@@ -393,8 +413,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^8.1.0"
+          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }
@@ -410,12 +430,12 @@
   "files": [
     {
       "path": "src/wc/components/Checkbox/Checkbox.css",
-      "content": "@import '../../utils/control-inactive.css';\n@import '../../utils/radius.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  fill: currentColor;\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",
+      "content": "@import '../../utils/control-inactive.css';\n@import '../../utils/radius.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-settings-row-control-padding-inline, 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  align-items: flex-start;\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  fill: currentColor;\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 {\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",
+      "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  /** Show full-row hover and pressed feedback for choice-list presentations. */\n  @Prop() hasInteractionFill: 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 && this.hasInteractionFill,\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

@@ -337,8 +337,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^8.1.0"
+          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }