@ds-mo/ui 15.3.0 → 15.4.0

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

@@ -258,7 +258,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.2",
+          "@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/scroll-overlay.json

@@ -166,7 +166,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.2",
+          "@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/select.json

@@ -1089,7 +1089,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: boundary, options, sections.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.2",
+          "@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/setting-row-checkbox.json

@@ -0,0 +1,197 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "setting-row-checkbox",
+  "title": "SettingRowCheckbox",
+  "description": "Padded settings-row composition for an editable Checkbox group and its non-interactive saved-value readout.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/setting-row-checkbox",
+    "source": "src/wc/components/SettingRowCheckbox/SettingRowCheckbox.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "experimental",
+      "summary": "Padded settings-row composition for an editable Checkbox group and its non-interactive saved-value readout.",
+      "useWhen": [
+        "A settings card needs an independent multi-select Checkbox group as one padded row item.",
+        "The same settings card needs to display the saved selected values without interactive checkbox controls in view mode."
+      ],
+      "avoidWhen": [
+        "The Checkbox group is not part of a settings-row surface; compose ds-checkbox-group directly.",
+        "Exactly one option may be selected; use component:ds-setting-row-radio.",
+        "The setting is a single immediate on/off choice; use component:ds-setting-row-toggle."
+      ],
+      "commonlyComposedWith": [
+        "component:ds-card-setting",
+        "component:ds-checkbox-group",
+        "component:ds-checkbox"
+      ],
+      "accessibility": [
+        "Pass the settings heading as the row label. Do not pass CheckboxGroup's form label; the row owns the visible heading and points the slotted group at it with aria-labelledby.",
+        "Keep each Checkbox's label, checked state, name, value, and dsChange owned by the application. Leave the Checkbox group slotted in view and edit; the row hides it in view.",
+        "Do not add a second interaction layer to the row; each Checkbox owns its own focus and activation while settings usage keeps hasInteractionFill false.",
+        "View presentation exposes readable label, saved selected-value copy, and optional supporting copy without checkbox semantics, checkbox controls, or a focus target."
+      ],
+      "states": [
+        "The row is a neutral padded composition; selected, focus, mixed, and inactive states belong to the slotted Checkboxes without a choice-list hover or pressed wash.",
+        "The owning application handles dsChange on each Checkbox and supplies valueLabel by joining the currently selected option labels.",
+        "Heading, saved-value choice, and slotted Checkbox group stay mounted. presentation reflects on the host so view/edit is CSS visibility only; do not swap Host children or ngIf the group.",
+        "View presentation hides the slotted Checkbox group with ::slotted host CSS and shows the saved selected values plus optional consequence copy. Omit description on the row and on each Checkbox when there is no supporting copy; view then shows only the selected-value labels. The group stays in the tree."
+      ],
+      "responsiveBehavior": [
+        "The row never exceeds its parent width; the slotted Checkbox group keeps option copy in the flexible column and wraps descriptions when needed."
+      ],
+      "references": [
+        {
+          "label": "Settings mock",
+          "path": "src/wc/components/SettingRowCheckbox/SettingRowCheckbox.stories.ts"
+        }
+      ],
+      "styling": {
+        "rationale": "The row uses the shared settings-row inline inset so view and edit copy share the same 16px origin, and zeros host padding-block because the heading, choice, and checkbox options already own vertical spacing. The heading is row-owned CSS, not CheckboxGroup's form label or control section-heading recipe. Checkbox owns option geometry.",
+        "protected": [
+          {
+            "properties": [
+              "padding"
+            ],
+            "reason": "Keep space-200 inline inset in view and edit, with no extra host padding-block.",
+            "props": []
+          }
+        ],
+        "customProperties": []
+      }
+    },
+    "api": {
+      "props": {
+        "description": {
+          "type": "string",
+          "resolvedType": "string | undefined",
+          "attribute": "description",
+          "required": false,
+          "mutable": false,
+          "description": "Optional consequence or supporting copy for the saved selection."
+        },
+        "label": {
+          "type": "string",
+          "resolvedType": "string | undefined",
+          "attribute": "label",
+          "required": false,
+          "mutable": false,
+          "description": "Settings heading shown in both presentations. Not CheckboxGroup's form label."
+        },
+        "presentation": {
+          "type": "SettingRowCheckboxPresentation",
+          "resolvedType": "\"edit\" | \"view\"",
+          "attribute": "presentation",
+          "default": "'edit'",
+          "required": false,
+          "mutable": false,
+          "description": "Interactive Checkbox group or non-interactive saved-value readout."
+        },
+        "valueLabel": {
+          "type": "string",
+          "resolvedType": "string | undefined",
+          "attribute": "value-label",
+          "required": false,
+          "mutable": false,
+          "description": "Saved selected-value labels shown in view presentation."
+        }
+      },
+      "events": [],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "description": {
+        "type": "string",
+        "resolvedType": "string | undefined",
+        "attribute": "description",
+        "required": false,
+        "mutable": false,
+        "description": "Optional consequence or supporting copy for the saved selection."
+      },
+      "label": {
+        "type": "string",
+        "resolvedType": "string | undefined",
+        "attribute": "label",
+        "required": false,
+        "mutable": false,
+        "description": "Settings heading shown in both presentations. Not CheckboxGroup's form label."
+      },
+      "presentation": {
+        "type": "SettingRowCheckboxPresentation",
+        "resolvedType": "\"edit\" | \"view\"",
+        "attribute": "presentation",
+        "default": "'edit'",
+        "required": false,
+        "mutable": false,
+        "description": "Interactive Checkbox group or non-interactive saved-value readout."
+      },
+      "valueLabel": {
+        "type": "string",
+        "resolvedType": "string | undefined",
+        "attribute": "value-label",
+        "required": false,
+        "mutable": false,
+        "description": "Saved selected-value labels shown in view presentation."
+      }
+    },
+    "events": [],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-setting-row-checkbox",
+      "react": "DsSettingRowCheckbox",
+      "vue": "DsSettingRowCheckbox",
+      "angular": "DsSettingRowCheckbox"
+    },
+    "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-setting-row-checkbox.js';",
+        "example": "<ds-setting-row-checkbox></ds-setting-row-checkbox>"
+      },
+      "react": {
+        "import": "import { DsSettingRowCheckbox } from '@ds-mo/ui/react';",
+        "example": "<DsSettingRowCheckbox />"
+      },
+      "vue": {
+        "import": "import { DsSettingRowCheckbox } from '@ds-mo/ui/vue';",
+        "example": "<DsSettingRowCheckbox />"
+      },
+      "angular": {
+        "import": "import { DsSettingRowCheckbox } from '@ds-mo/ui/angular/ds-setting-row-checkbox';",
+        "example": "<ds-setting-row-checkbox></ds-setting-row-checkbox>"
+      },
+      "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/SettingRowCheckbox/SettingRowCheckbox.css",
+      "content": "@import '../../utils/settings-row.css';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  gap: var(--dimension-space-050);\n  overflow-wrap: anywhere;\n  /* Heading, choice, and checkbox options already own block padding. */\n  padding-block: 0;\n}\n\n/* Light-DOM slotted groups do not receive this component's scoped child class.\n   Target them with ::slotted so view/edit visibility actually applies. */\n:host ::slotted(ds-checkbox-group) {\n  min-width: 0;\n  width: 100%;\n}\n\n:host([presentation='view']) ::slotted(ds-checkbox-group) {\n  display: none !important;\n}\n\n:host([presentation='edit']) .setting-row-checkbox__choice {\n  display: none;\n}\n\nds-text.setting-row-checkbox__heading {\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  height: var(--dimension-size-400);\n  min-width: 0;\n  padding: 0;\n}\n\n.setting-row-checkbox__choice {\n  display: grid;\n  gap: var(--dimension-space-025);\n  min-width: 0;\n  padding-block: var(--dimension-space-075);\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/SettingRowCheckbox/SettingRowCheckbox.tsx",
+      "content": "import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { CONTROL_SUPPORTING_TEXT_VARIANT, CONTROL_TEXT_VARIANT } from '../../utils';\n\nexport type SettingRowCheckboxPresentation = 'edit' | 'view';\n\ntype SettingsCheckboxGroup = HTMLElement & {\n  label: string;\n  ariaLabel: string | null;\n  ariaLabelledby?: string;\n};\n\nlet settingRowCheckboxHeadingId = 0;\n\n/** Padded settings-row composition for a Checkbox group. */\n@Component({\n  tag: 'ds-setting-row-checkbox',\n  styleUrl: 'SettingRowCheckbox.css',\n  scoped: true,\n})\nexport class SettingRowCheckbox {\n  @Element() el!: HTMLElement;\n\n  /** Interactive Checkbox group or non-interactive saved-value readout. */\n  @Prop({ reflect: true }) presentation: SettingRowCheckboxPresentation = 'edit';\n  /** Settings heading shown in both presentations. Not CheckboxGroup's form label. */\n  @Prop() label?: string;\n  /** Saved selected-value labels shown in view presentation. */\n  @Prop() valueLabel?: string;\n  /** Optional consequence or supporting copy for the saved selection. */\n  @Prop() description?: string;\n\n  private readonly headingId = `ds-setting-row-checkbox-heading-${++settingRowCheckboxHeadingId}`;\n\n  componentWillLoad() {\n    this.syncSlottedCheckboxGroup();\n  }\n\n  componentDidLoad() {\n    this.syncSlottedCheckboxGroup();\n  }\n\n  private syncSlottedCheckboxGroup = () => {\n    for (const group of this.el.querySelectorAll<SettingsCheckboxGroup>('ds-checkbox-group')) {\n      group.label = '';\n      if (this.label) {\n        group.ariaLabelledby = this.headingId;\n        group.ariaLabel = null;\n      }\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <ds-text\n          key=\"setting-row-checkbox-heading\"\n          class=\"setting-row-checkbox__heading\"\n          as=\"span\"\n          variant={CONTROL_TEXT_VARIANT.md}\n          emphasis\n          textId={this.label ? this.headingId : undefined}\n        >\n          {this.label}\n        </ds-text>\n        <div key=\"setting-row-checkbox-choice\" class=\"setting-row-checkbox__choice\">\n          {this.valueLabel ? (\n            <ds-text key=\"setting-row-checkbox-value\" as=\"span\" variant={CONTROL_TEXT_VARIANT.md}>\n              {this.valueLabel}\n            </ds-text>\n          ) : null}\n          {this.description?.trim() ? (\n            <ds-text\n              key=\"setting-row-checkbox-description\"\n              as=\"span\"\n              variant={CONTROL_SUPPORTING_TEXT_VARIANT.md}\n              color=\"secondary\"\n            >\n              {this.description}\n            </ds-text>\n          ) : null}\n        </div>\n        <slot onSlotchange={this.syncSlottedCheckboxGroup} />\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/mcp-data/registry/setting-row-radio.json

@@ -0,0 +1,196 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "setting-row-radio",
+  "title": "SettingRowRadio",
+  "description": "Padded settings-row composition for an editable Radio group and its non-interactive saved-value readout.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/setting-row-radio",
+    "source": "src/wc/components/SettingRowRadio/SettingRowRadio.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "experimental",
+      "summary": "Padded settings-row composition for an editable Radio group and its non-interactive saved-value readout.",
+      "useWhen": [
+        "A settings card needs a mutually exclusive Radio group as one padded row item.",
+        "The same settings card needs to display the saved option without an interactive control in view mode."
+      ],
+      "avoidWhen": [
+        "The Radio group is not part of a settings-row surface; compose ds-radio directly.",
+        "The setting allows more than one option to be selected; use component:ds-setting-row-checkbox.",
+        "The setting is a single immediate on/off choice; use component:ds-setting-row-toggle."
+      ],
+      "commonlyComposedWith": [
+        "component:ds-card-setting",
+        "component:ds-radio"
+      ],
+      "accessibility": [
+        "Pass the settings heading as the row label. Do not pass Radio groupLabel; the row owns the visible heading and points the slotted radiogroup at it with aria-labelledby.",
+        "Keep the Radio group's options, value, required state, and selection event owned by the application. Leave the Radio slotted in view and edit; the row hides it in view.",
+        "Do not add a second interaction layer to the row; Radio owns option focus and keyboard selection while settings usage keeps hasInteractionFill false.",
+        "View presentation exposes readable label, saved value, and optional supporting copy without radio semantics, a radio toggle, or a focus target."
+      ],
+      "states": [
+        "The row is a neutral padded composition; selected, focus, and inactive states belong to the slotted Radio without a choice-list hover or pressed wash.",
+        "The owning application handles dsChange and updates the slotted Radio value.",
+        "Heading, saved-value choice, and slotted Radio stay mounted. presentation reflects on the host so view/edit is CSS visibility only; do not swap Host children or ngIf the Radio.",
+        "View presentation hides the slotted Radio with ::slotted host CSS and shows the saved option label plus optional consequence copy. The Radio stays in the tree."
+      ],
+      "responsiveBehavior": [
+        "The row never exceeds its parent width; the slotted Radio keeps its option copy in the flexible column and wraps descriptions when needed."
+      ],
+      "references": [
+        {
+          "label": "Settings mock",
+          "path": "src/wc/components/SettingRowRadio/SettingRowRadio.stories.ts"
+        }
+      ],
+      "styling": {
+        "rationale": "The row uses the shared settings-row inline inset so view and edit copy share the same 16px origin, and zeros host padding-block because the heading, choice, and radio options already own vertical spacing. The heading is row-owned CSS, not Radio's form group-label or control section-heading recipe. Radio owns option geometry.",
+        "protected": [
+          {
+            "properties": [
+              "padding"
+            ],
+            "reason": "Keep space-200 inline inset in view and edit, with no extra host padding-block.",
+            "props": []
+          }
+        ],
+        "customProperties": []
+      }
+    },
+    "api": {
+      "props": {
+        "description": {
+          "type": "string",
+          "resolvedType": "string | undefined",
+          "attribute": "description",
+          "required": false,
+          "mutable": false,
+          "description": "Optional consequence or supporting copy for the saved option."
+        },
+        "label": {
+          "type": "string",
+          "resolvedType": "string | undefined",
+          "attribute": "label",
+          "required": false,
+          "mutable": false,
+          "description": "Settings heading shown in both presentations. Not Radio's form groupLabel."
+        },
+        "presentation": {
+          "type": "SettingRowRadioPresentation",
+          "resolvedType": "\"edit\" | \"view\"",
+          "attribute": "presentation",
+          "default": "'edit'",
+          "required": false,
+          "mutable": false,
+          "description": "Interactive Radio group or non-interactive saved-value readout."
+        },
+        "valueLabel": {
+          "type": "string",
+          "resolvedType": "string | undefined",
+          "attribute": "value-label",
+          "required": false,
+          "mutable": false,
+          "description": "Saved option label shown in view presentation."
+        }
+      },
+      "events": [],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "description": {
+        "type": "string",
+        "resolvedType": "string | undefined",
+        "attribute": "description",
+        "required": false,
+        "mutable": false,
+        "description": "Optional consequence or supporting copy for the saved option."
+      },
+      "label": {
+        "type": "string",
+        "resolvedType": "string | undefined",
+        "attribute": "label",
+        "required": false,
+        "mutable": false,
+        "description": "Settings heading shown in both presentations. Not Radio's form groupLabel."
+      },
+      "presentation": {
+        "type": "SettingRowRadioPresentation",
+        "resolvedType": "\"edit\" | \"view\"",
+        "attribute": "presentation",
+        "default": "'edit'",
+        "required": false,
+        "mutable": false,
+        "description": "Interactive Radio group or non-interactive saved-value readout."
+      },
+      "valueLabel": {
+        "type": "string",
+        "resolvedType": "string | undefined",
+        "attribute": "value-label",
+        "required": false,
+        "mutable": false,
+        "description": "Saved option label shown in view presentation."
+      }
+    },
+    "events": [],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-setting-row-radio",
+      "react": "DsSettingRowRadio",
+      "vue": "DsSettingRowRadio",
+      "angular": "DsSettingRowRadio"
+    },
+    "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-setting-row-radio.js';",
+        "example": "<ds-setting-row-radio></ds-setting-row-radio>"
+      },
+      "react": {
+        "import": "import { DsSettingRowRadio } from '@ds-mo/ui/react';",
+        "example": "<DsSettingRowRadio />"
+      },
+      "vue": {
+        "import": "import { DsSettingRowRadio } from '@ds-mo/ui/vue';",
+        "example": "<DsSettingRowRadio />"
+      },
+      "angular": {
+        "import": "import { DsSettingRowRadio } from '@ds-mo/ui/angular/ds-setting-row-radio';",
+        "example": "<ds-setting-row-radio></ds-setting-row-radio>"
+      },
+      "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/SettingRowRadio/SettingRowRadio.css",
+      "content": "@import '../../utils/settings-row.css';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  gap: var(--dimension-space-050);\n  overflow-wrap: anywhere;\n  /* Heading, choice, and radio options already own block padding. */\n  padding-block: 0;\n}\n\n/* Light-DOM slotted radios do not receive this component's scoped child class.\n   Target them with ::slotted so view/edit visibility actually applies. */\n:host ::slotted(ds-radio) {\n  min-width: 0;\n  width: 100%;\n}\n\n:host([presentation='view']) ::slotted(ds-radio) {\n  display: none !important;\n}\n\n:host([presentation='edit']) .setting-row-radio__choice {\n  display: none;\n}\n\nds-text.setting-row-radio__heading {\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  height: var(--dimension-size-400);\n  min-width: 0;\n  padding: 0;\n}\n\n.setting-row-radio__choice {\n  display: grid;\n  gap: var(--dimension-space-025);\n  min-width: 0;\n  padding-block: var(--dimension-space-075);\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/SettingRowRadio/SettingRowRadio.tsx",
+      "content": "import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { CONTROL_SUPPORTING_TEXT_VARIANT, CONTROL_TEXT_VARIANT } from '../../utils';\n\nexport type SettingRowRadioPresentation = 'edit' | 'view';\n\ntype SettingsRadio = HTMLElement & {\n  groupLabel: string;\n  ariaLabel: string | null;\n  ariaLabelledby?: string;\n};\n\nlet settingRowRadioHeadingId = 0;\n\n/** Padded settings-row composition for a Radio group. */\n@Component({\n  tag: 'ds-setting-row-radio',\n  styleUrl: 'SettingRowRadio.css',\n  scoped: true,\n})\nexport class SettingRowRadio {\n  @Element() el!: HTMLElement;\n\n  /** Interactive Radio group or non-interactive saved-value readout. */\n  @Prop({ reflect: true }) presentation: SettingRowRadioPresentation = 'edit';\n  /** Settings heading shown in both presentations. Not Radio's form groupLabel. */\n  @Prop() label?: string;\n  /** Saved option label shown in view presentation. */\n  @Prop() valueLabel?: string;\n  /** Optional consequence or supporting copy for the saved option. */\n  @Prop() description?: string;\n\n  private readonly headingId = `ds-setting-row-radio-heading-${++settingRowRadioHeadingId}`;\n\n  componentWillLoad() {\n    this.syncSlottedRadio();\n  }\n\n  componentDidLoad() {\n    this.syncSlottedRadio();\n  }\n\n  private syncSlottedRadio = () => {\n    for (const radio of this.el.querySelectorAll<SettingsRadio>('ds-radio')) {\n      radio.groupLabel = '';\n      if (this.label) {\n        radio.ariaLabelledby = this.headingId;\n        radio.ariaLabel = null;\n      }\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <ds-text\n          key=\"setting-row-radio-heading\"\n          class=\"setting-row-radio__heading\"\n          as=\"span\"\n          variant={CONTROL_TEXT_VARIANT.md}\n          emphasis\n          textId={this.label ? this.headingId : undefined}\n        >\n          {this.label}\n        </ds-text>\n        <div key=\"setting-row-radio-choice\" class=\"setting-row-radio__choice\">\n          {this.valueLabel ? (\n            <ds-text key=\"setting-row-radio-value\" as=\"span\" variant={CONTROL_TEXT_VARIANT.md}>\n              {this.valueLabel}\n            </ds-text>\n          ) : null}\n          {this.description ? (\n            <ds-text\n              key=\"setting-row-radio-description\"\n              as=\"span\"\n              variant={CONTROL_SUPPORTING_TEXT_VARIANT.md}\n              color=\"secondary\"\n            >\n              {this.description}\n            </ds-text>\n          ) : null}\n        </div>\n        <slot onSlotchange={this.syncSlottedRadio} />\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/mcp-data/registry/{setting-row.json → setting-row-toggle.json}

@@ -1,14 +1,14 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "setting-row",
-  "title": "SettingRow",
+  "name": "setting-row-toggle",
+  "title": "SettingRowToggle",
   "description": "Two-column immediate binary setting with descriptive copy and an accessible switch.",
   "type": "registry:ui",
   "meta": {
     "library": "@ds-mo/ui",
     "distribution": "npm",
-    "storybook": "https://zainadeel.github.io/compomo/?path=/story/setting-row",
-    "source": "src/wc/components/SettingRow/SettingRow.tsx",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/setting-row-toggle",
+    "source": "src/wc/components/SettingRowToggle/SettingRowToggle.tsx",
     "intentStatus": "complete",
     "intent": {
       "audience": "general",
@@ -32,7 +32,9 @@
       ],
       "states": [
         "The application accepts or rejects change requests by updating the controlled checked value and owns persistence and errors.",
-        "Name the enabled setting consistently; the label must not change when the switch is toggled."
+        "Name the enabled setting consistently; the label must not change when the switch is toggled.",
+        "Non-emphasis rows without supporting copy use ds-text color secondary (foreground-secondary) on the title. Non-emphasis rows with description keep a primary title.",
+        "Supporting copy is text-body-small in every variant."
       ],
       "responsiveBehavior": [
         "The copy wraps while the switch keeps its natural size in the trailing column, including at narrow widths."
@@ -40,18 +42,18 @@
       "references": [
         {
           "label": "Usage states",
-          "path": "src/wc/components/SettingRow/SettingRow.stories.ts"
+          "path": "src/wc/components/SettingRowToggle/SettingRowToggle.stories.ts"
         }
       ],
       "styling": {
-        "rationale": "The row owns copy/control spacing; its parent owns the section surface and width.",
+        "rationale": "The row uses the shared settings-row inset; copy/control columns and the parent section surface stay component-owned.",
         "protected": [
           {
             "properties": [
               "padding",
               "gap"
             ],
-            "reason": "Preserve the shared settings-row spacing recipe.",
+            "reason": "Preserve the shared settings-row inset (space-100 block, space-200 inline) and copy-to-control gap.",
             "props": []
           }
         ],
@@ -93,6 +95,15 @@
           "required": true,
           "mutable": false,
           "description": "Name of the enabled setting."
+        },
+        "variant": {
+          "type": "SettingRowToggleVariant",
+          "resolvedType": "\"emphasis\" | \"non-emphasis\"",
+          "attribute": "variant",
+          "default": "'emphasis'",
+          "required": false,
+          "mutable": false,
+          "description": "Typography recipe for the setting copy."
         }
       },
       "events": [
@@ -142,6 +153,15 @@
         "required": true,
         "mutable": false,
         "description": "Name of the enabled setting."
+      },
+      "variant": {
+        "type": "SettingRowToggleVariant",
+        "resolvedType": "\"emphasis\" | \"non-emphasis\"",
+        "attribute": "variant",
+        "default": "'emphasis'",
+        "required": false,
+        "mutable": false,
+        "description": "Typography recipe for the setting copy."
       }
     },
     "events": [
@@ -157,33 +177,33 @@
     "methods": [],
     "slots": [],
     "exports": {
-      "customElement": "ds-setting-row",
-      "react": "DsSettingRow",
-      "vue": "DsSettingRow",
-      "angular": "DsSettingRow"
+      "customElement": "ds-setting-row-toggle",
+      "react": "DsSettingRowToggle",
+      "vue": "DsSettingRowToggle",
+      "angular": "DsSettingRowToggle"
     },
     "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-setting-row.js';",
-        "example": "<ds-setting-row></ds-setting-row>"
+        "import": "import '@ds-mo/ui/dist/components/ds-setting-row-toggle.js';",
+        "example": "<ds-setting-row-toggle></ds-setting-row-toggle>"
       },
       "react": {
-        "import": "import { DsSettingRow } from '@ds-mo/ui/react';",
-        "example": "<DsSettingRow />"
+        "import": "import { DsSettingRowToggle } from '@ds-mo/ui/react';",
+        "example": "<DsSettingRowToggle />"
       },
       "vue": {
-        "import": "import { DsSettingRow } from '@ds-mo/ui/vue';",
-        "example": "<DsSettingRow />"
+        "import": "import { DsSettingRowToggle } from '@ds-mo/ui/vue';",
+        "example": "<DsSettingRowToggle />"
       },
       "angular": {
-        "import": "import { DsSettingRow } from '@ds-mo/ui/angular/ds-setting-row';",
-        "example": "<ds-setting-row></ds-setting-row>"
+        "import": "import { DsSettingRowToggle } from '@ds-mo/ui/angular/ds-setting-row-toggle';",
+        "example": "<ds-setting-row-toggle></ds-setting-row-toggle>"
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.2",
+          "@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."
@@ -200,13 +220,13 @@
   ],
   "files": [
     {
-      "path": "src/wc/components/SettingRow/SettingRow.css",
-      "content": ":host {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: start;\n  box-sizing: border-box;\n  min-width: 0;\n  padding: var(--dimension-space-100) var(--dimension-space-200);\n  gap: var(--dimension-space-200);\n}\n\n.setting-row__copy {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  gap: var(--dimension-space-050);\n  overflow-wrap: anywhere;\n  -webkit-user-select: none;\n  user-select: none;\n}\n",
+      "path": "src/wc/components/SettingRowToggle/SettingRowToggle.css",
+      "content": "@import '../../utils/settings-row.css';\n\n:host {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: start;\n  gap: var(--dimension-space-200);\n}\n\n.setting-row-toggle__copy {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  gap: var(--dimension-space-050);\n  overflow-wrap: anywhere;\n  -webkit-user-select: none;\n  user-select: none;\n}\n",
       "type": "registry:ui"
     },
     {
-      "path": "src/wc/components/SettingRow/SettingRow.tsx",
-      "content": "import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nlet settingRowSequence = 0;\n\n/** A labeled binary setting that applies immediately through its application owner. */\n@Component({\n  tag: 'ds-setting-row',\n  styleUrl: 'SettingRow.css',\n  scoped: true,\n})\nexport class SettingRow {\n  /** Name of the enabled setting. */\n  @Prop() label!: string;\n  /** Supporting copy explaining the setting and its alternative. */\n  @Prop() description?: string;\n  /** Controlled enabled state. */\n  @Prop() checked = false;\n  /** Prevent changes while the setting is unavailable. */\n  @Prop() disabled = false;\n\n  /** Requests the next value; the application owns acceptance and persistence. */\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private readonly rowId = `ds-setting-row-${++settingRowSequence}`;\n\n  private handleChange = (event: CustomEvent<boolean>) => {\n    event.stopPropagation();\n    // Keep the composed switch controlled until the owner accepts this request.\n    (event.target as HTMLDsSwitchElement).checked = this.checked;\n    this.dsChange.emit(event.detail);\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"setting-row__copy\">\n          <ds-text\n            textId={`${this.rowId}-label`}\n            variant=\"text-body-medium\"\n            color=\"primary\"\n            emphasis\n          >\n            {this.label}\n          </ds-text>\n          {this.description && (\n            <ds-text\n              textId={`${this.rowId}-description`}\n              variant=\"text-body-medium\"\n              color=\"secondary\"\n            >\n              {this.description}\n            </ds-text>\n          )}\n        </div>\n        <ds-switch\n          checked={this.checked}\n          disabled={this.disabled}\n          aria-labelledby={`${this.rowId}-label`}\n          aria-describedby={this.description ? `${this.rowId}-description` : undefined}\n          onDsChange={this.handleChange}\n        />\n      </Host>\n    );\n  }\n}\n",
+      "path": "src/wc/components/SettingRowToggle/SettingRowToggle.tsx",
+      "content": "import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { CONTROL_SUPPORTING_TEXT_VARIANT } from '../../utils';\n\nlet settingRowToggleSequence = 0;\n\nexport type SettingRowToggleVariant = 'emphasis' | 'non-emphasis';\n\n/** A labeled binary setting that applies immediately through its application owner. */\n@Component({\n  tag: 'ds-setting-row-toggle',\n  styleUrl: 'SettingRowToggle.css',\n  scoped: true,\n})\nexport class SettingRowToggle {\n  /** Name of the enabled setting. */\n  @Prop() label!: string;\n  /** Supporting copy explaining the setting and its alternative. */\n  @Prop() description?: string;\n  /** Controlled enabled state. */\n  @Prop() checked = false;\n  /** Prevent changes while the setting is unavailable. */\n  @Prop() disabled = false;\n  /** Typography recipe for the setting copy. */\n  @Prop() variant: SettingRowToggleVariant = 'emphasis';\n\n  /** Requests the next value; the application owns acceptance and persistence. */\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private readonly rowId = `ds-setting-row-toggle-${++settingRowToggleSequence}`;\n\n  private handleChange = (event: CustomEvent<boolean>) => {\n    event.stopPropagation();\n    // Keep the composed switch controlled until the owner accepts this request.\n    (event.target as HTMLDsSwitchElement).checked = this.checked;\n    this.dsChange.emit(event.detail);\n  };\n\n  render() {\n    const hasDescription = Boolean(this.description?.trim());\n    const titleColor = this.variant === 'non-emphasis' && !hasDescription ? 'secondary' : 'primary';\n\n    return (\n      <Host>\n        <div class=\"setting-row-toggle__copy\">\n          <ds-text\n            textId={`${this.rowId}-label`}\n            variant=\"text-body-medium\"\n            color={titleColor}\n            emphasis={this.variant === 'emphasis'}\n          >\n            {this.label}\n          </ds-text>\n          {hasDescription && (\n            <ds-text\n              textId={`${this.rowId}-description`}\n              variant={CONTROL_SUPPORTING_TEXT_VARIANT.md}\n              color=\"secondary\"\n            >\n              {this.description}\n            </ds-text>\n          )}\n        </div>\n        <ds-switch\n          checked={this.checked}\n          disabled={this.disabled}\n          aria-labelledby={`${this.rowId}-label`}\n          aria-describedby={hasDescription ? `${this.rowId}-description` : undefined}\n          onDsChange={this.handleChange}\n        />\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]