@ds-mo/ui 13.13.0 → 13.14.0

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

@@ -62,8 +62,8 @@
         "Neutral is ordinary metadata; brand marks Motive or product affiliation; AI marks AI-generated or AI-assisted content; positive, caution, warning, and negative communicate increasingly specific status meaning.",
         "Warning signals higher urgency or risk than caution, which asks for attention before a possible issue.",
         "Contrast changes visual prominence without changing semantic intent or parent surface context.",
-        "Rounded is an optional visual style with no semantic difference.",
-        "isInset opts into reduced outer geometry only when Tag is nested inside a control of the same density; semantic styling, typography, icons, gaps, radius, and interaction remain unchanged.",
+        "Rounded is an optional visual style with no semantic difference. Every size and inset depth keeps a minimum inline size equal to its resolved height, so short labels such as a one-digit count render as circles instead of vertically elongated pills.",
+        "isInset opts into reduced outer geometry only when Tag is nested inside a control of the same density. The default single inset removes 4px overall; insetDepth double removes 8px overall and falls back to single at xs to protect minimum icon geometry. Semantic styling, typography, icons, gaps, radius, and interaction remain unchanged.",
         "Labels stay on one line and truncate only when the owner supplies a maximum width.",
         "Omitted interactive renders static metadata with no focus, event, or suffix. Interactive adds the fixed ChevronUpDown suffix and emits dsClick without toggling expanded internally.",
         "isInactive disables only the interactive button and applies the shared inactive treatment."
@@ -126,6 +126,15 @@
           "mutable": false,
           "description": "Canonical icon name rendered before the visible label."
         },
+        "insetDepth": {
+          "type": "ControlInsetDepth",
+          "resolvedType": "\"double\" | \"single\"",
+          "attribute": "inset-depth",
+          "default": "'single'",
+          "required": false,
+          "mutable": false,
+          "description": "Single removes 4px overall; double removes 8px overall (xs stays single)."
+        },
         "intent": {
           "type": "TagIntent",
           "resolvedType": "\"ai\" | \"brand\" | \"caution\" | \"negative\" | \"neutral\" | \"positive\" | \"warning\"",
@@ -240,6 +249,15 @@
         "mutable": false,
         "description": "Canonical icon name rendered before the visible label."
       },
+      "insetDepth": {
+        "type": "ControlInsetDepth",
+        "resolvedType": "\"double\" | \"single\"",
+        "attribute": "inset-depth",
+        "default": "'single'",
+        "required": false,
+        "mutable": false,
+        "description": "Single removes 4px overall; double removes 8px overall (xs stays single)."
+      },
       "intent": {
         "type": "TagIntent",
         "resolvedType": "\"ai\" | \"brand\" | \"caution\" | \"negative\" | \"neutral\" | \"positive\" | \"warning\"",
@@ -341,7 +359,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.0.0",
-          "@ds-mo/icons ^6.5.0"
+          "@ds-mo/icons ^6.6.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }
@@ -359,12 +377,12 @@
   "files": [
     {
       "path": "src/wc/components/Tag/Tag.css",
-      "content": "@import '../../utils/tag-chip.css';\n@import '../../utils/control-density-inset.css';\n\n/* ── Intent × Contrast — strong ─────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-strong)  { background-color: var(--color-background-strong-neutral);  color: var(--color-foreground-medium-neutral);  }\n:host(.tag--intent-brand.tag--contrast-strong)    { background-color: var(--color-background-strong-brand);    color: var(--color-foreground-on-strong-background-primary); }\n:host(.tag--intent-ai.tag--contrast-strong)       { background-color: var(--color-background-strong-ai);       color: var(--color-foreground-medium-ai);       }\n:host(.tag--intent-negative.tag--contrast-strong) { background-color: var(--color-background-strong-negative); color: var(--color-foreground-medium-negative); }\n:host(.tag--intent-warning.tag--contrast-strong)  { background-color: var(--color-background-strong-warning);  color: var(--color-foreground-medium-warning);  }\n:host(.tag--intent-caution.tag--contrast-strong)  { background-color: var(--color-background-strong-caution);  color: var(--color-foreground-medium-caution);  }\n:host(.tag--intent-positive.tag--contrast-strong) { background-color: var(--color-background-strong-positive); color: var(--color-foreground-medium-positive); }\n\n/* ── Intent × Contrast — bold ───────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-bold)  { background-color: var(--color-background-bold-neutral);  color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-brand.tag--contrast-bold)    { background-color: var(--color-background-bold-brand);    color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-ai.tag--contrast-bold)       { background-color: var(--color-background-bold-ai);       color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-negative.tag--contrast-bold) { background-color: var(--color-background-bold-negative); color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-warning.tag--contrast-bold)  { background-color: var(--color-background-bold-warning);  color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-caution.tag--contrast-bold)  { background-color: var(--color-background-bold-caution);  color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-positive.tag--contrast-bold) { background-color: var(--color-background-bold-positive); color: var(--color-foreground-on-bold-background-primary); }\n\n/* ── Intent × Contrast — medium ─────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-medium)  { background-color: var(--color-background-medium-neutral);  color: var(--color-foreground-strong-neutral);  }\n:host(.tag--intent-brand.tag--contrast-medium)    { background-color: var(--color-background-medium-brand);    color: var(--color-foreground-on-medium-background-primary); }\n:host(.tag--intent-ai.tag--contrast-medium)       { background-color: var(--color-background-medium-ai);       color: var(--color-foreground-strong-ai);       }\n:host(.tag--intent-negative.tag--contrast-medium) { background-color: var(--color-background-medium-negative); color: var(--color-foreground-strong-negative); }\n:host(.tag--intent-warning.tag--contrast-medium)  { background-color: var(--color-background-medium-warning);  color: var(--color-foreground-strong-warning);  }\n:host(.tag--intent-caution.tag--contrast-medium)  { background-color: var(--color-background-medium-caution);  color: var(--color-foreground-strong-caution);  }\n:host(.tag--intent-positive.tag--contrast-medium) { background-color: var(--color-background-medium-positive); color: var(--color-foreground-strong-positive); }\n\n/* ── Intent × Contrast — faint ──────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-faint)  { background-color: var(--color-background-faint-neutral);  color: var(--color-foreground-bold-neutral);  }\n:host(.tag--intent-brand.tag--contrast-faint)    { background-color: var(--color-background-faint-brand);    color: var(--color-foreground-bold-brand);    }\n:host(.tag--intent-ai.tag--contrast-faint)       { background-color: var(--color-background-faint-ai);       color: var(--color-foreground-bold-ai);       }\n:host(.tag--intent-negative.tag--contrast-faint) { background-color: var(--color-background-faint-negative); color: var(--color-foreground-bold-negative); }\n:host(.tag--intent-warning.tag--contrast-faint)  { background-color: var(--color-background-faint-warning);  color: var(--color-foreground-bold-warning);  }\n:host(.tag--intent-caution.tag--contrast-faint)  { background-color: var(--color-background-faint-caution);  color: var(--color-foreground-bold-caution);  }\n:host(.tag--intent-positive.tag--contrast-faint) { background-color: var(--color-background-faint-positive); color: var(--color-foreground-bold-positive); }\n\n/* ── Interactive menu trigger ───────────────────────────────────────────── */\n\n:host(.tag--interactive) {\n  padding: 0;\n  gap: 0;\n}\n\n.tag__button {\n  all: unset;\n  position: relative;\n  z-index: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  min-width: 0;\n  max-width: 100%;\n  height: 100%;\n  padding: 0 var(--ds-control-padding-inline);\n  gap: var(--ds-control-gap);\n  border-radius: inherit;\n  color: inherit;\n  cursor: default;\n}\n\n.tag__button:disabled {\n  cursor: not-allowed;\n}\n\n.tag__button--expanded::after {\n  background: var(--ds-interaction-pressed);\n}\n\n/* Hover/press wash stays above the Tag's semantic background. */\n\n/* ── Icons ──────────────────────────────────────────────────────────────── */\n\n.tag__prefix-icon,\n.tag__suffix-icon {\n  position: relative;\n  z-index: 2;\n  display: inline-flex;\n  flex-shrink: 0;\n  width: var(--ds-control-icon);\n  height: var(--ds-control-icon);\n}\n",
+      "content": "@import '../../utils/tag-chip.css';\n@import '../../utils/control-density-inset.css';\n\n/* A one-character rounded Tag resolves to a circle at every density. */\n:host {\n  min-inline-size: var(--ds-control-height);\n}\n\n/* ── Intent × Contrast — strong ─────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-strong)  { background-color: var(--color-background-strong-neutral);  color: var(--color-foreground-medium-neutral);  }\n:host(.tag--intent-brand.tag--contrast-strong)    { background-color: var(--color-background-strong-brand);    color: var(--color-foreground-on-strong-background-primary); }\n:host(.tag--intent-ai.tag--contrast-strong)       { background-color: var(--color-background-strong-ai);       color: var(--color-foreground-medium-ai);       }\n:host(.tag--intent-negative.tag--contrast-strong) { background-color: var(--color-background-strong-negative); color: var(--color-foreground-medium-negative); }\n:host(.tag--intent-warning.tag--contrast-strong)  { background-color: var(--color-background-strong-warning);  color: var(--color-foreground-medium-warning);  }\n:host(.tag--intent-caution.tag--contrast-strong)  { background-color: var(--color-background-strong-caution);  color: var(--color-foreground-medium-caution);  }\n:host(.tag--intent-positive.tag--contrast-strong) { background-color: var(--color-background-strong-positive); color: var(--color-foreground-medium-positive); }\n\n/* ── Intent × Contrast — bold ───────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-bold)  { background-color: var(--color-background-bold-neutral);  color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-brand.tag--contrast-bold)    { background-color: var(--color-background-bold-brand);    color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-ai.tag--contrast-bold)       { background-color: var(--color-background-bold-ai);       color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-negative.tag--contrast-bold) { background-color: var(--color-background-bold-negative); color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-warning.tag--contrast-bold)  { background-color: var(--color-background-bold-warning);  color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-caution.tag--contrast-bold)  { background-color: var(--color-background-bold-caution);  color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-positive.tag--contrast-bold) { background-color: var(--color-background-bold-positive); color: var(--color-foreground-on-bold-background-primary); }\n\n/* ── Intent × Contrast — medium ─────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-medium)  { background-color: var(--color-background-medium-neutral);  color: var(--color-foreground-strong-neutral);  }\n:host(.tag--intent-brand.tag--contrast-medium)    { background-color: var(--color-background-medium-brand);    color: var(--color-foreground-on-medium-background-primary); }\n:host(.tag--intent-ai.tag--contrast-medium)       { background-color: var(--color-background-medium-ai);       color: var(--color-foreground-strong-ai);       }\n:host(.tag--intent-negative.tag--contrast-medium) { background-color: var(--color-background-medium-negative); color: var(--color-foreground-strong-negative); }\n:host(.tag--intent-warning.tag--contrast-medium)  { background-color: var(--color-background-medium-warning);  color: var(--color-foreground-strong-warning);  }\n:host(.tag--intent-caution.tag--contrast-medium)  { background-color: var(--color-background-medium-caution);  color: var(--color-foreground-strong-caution);  }\n:host(.tag--intent-positive.tag--contrast-medium) { background-color: var(--color-background-medium-positive); color: var(--color-foreground-strong-positive); }\n\n/* ── Intent × Contrast — faint ──────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-faint)  { background-color: var(--color-background-faint-neutral);  color: var(--color-foreground-bold-neutral);  }\n:host(.tag--intent-brand.tag--contrast-faint)    { background-color: var(--color-background-faint-brand);    color: var(--color-foreground-bold-brand);    }\n:host(.tag--intent-ai.tag--contrast-faint)       { background-color: var(--color-background-faint-ai);       color: var(--color-foreground-bold-ai);       }\n:host(.tag--intent-negative.tag--contrast-faint) { background-color: var(--color-background-faint-negative); color: var(--color-foreground-bold-negative); }\n:host(.tag--intent-warning.tag--contrast-faint)  { background-color: var(--color-background-faint-warning);  color: var(--color-foreground-bold-warning);  }\n:host(.tag--intent-caution.tag--contrast-faint)  { background-color: var(--color-background-faint-caution);  color: var(--color-foreground-bold-caution);  }\n:host(.tag--intent-positive.tag--contrast-faint) { background-color: var(--color-background-faint-positive); color: var(--color-foreground-bold-positive); }\n\n/* ── Interactive menu trigger ───────────────────────────────────────────── */\n\n:host(.tag--interactive) {\n  padding: 0;\n  gap: 0;\n}\n\n.tag__button {\n  all: unset;\n  position: relative;\n  z-index: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  min-width: 0;\n  max-width: 100%;\n  height: 100%;\n  padding: 0 var(--ds-control-padding-inline);\n  gap: var(--ds-control-gap);\n  border-radius: inherit;\n  color: inherit;\n  cursor: default;\n}\n\n.tag__button:disabled {\n  cursor: not-allowed;\n}\n\n.tag__button--expanded::after {\n  background: var(--ds-interaction-pressed);\n}\n\n/* Hover/press wash stays above the Tag's semantic background. */\n\n/* ── Icons ──────────────────────────────────────────────────────────────── */\n\n.tag__prefix-icon,\n.tag__suffix-icon {\n  position: relative;\n  z-index: 2;\n  display: inline-flex;\n  flex-shrink: 0;\n  width: var(--ds-control-icon);\n  height: var(--ds-control-icon);\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/Tag/Tag.tsx",
-      "content": "import { Component, Event, EventEmitter, Prop, h, Host } from '@stencil/core';\nimport { CONTROL_TEXT_VARIANT } from '../../utils';\n\nexport type TagIntent   = 'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive';\nexport type TagContrast = 'strong' | 'bold' | 'medium' | 'faint';\nexport type TagSize     = 'md' | 'sm' | 'xs';\n\n/**\n * `ds-icon` size prop matching control-density icon metrics\n * (md→20 / sm→16 / xs→12 via `--dimension-iconography-*`).\n */\nconst ICON_SIZE: Record<TagSize, 'md' | 'sm' | 'xs'> = {\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\n@Component({\n  tag: 'ds-tag',\n  styleUrl: 'Tag.css',\n  scoped: true,\n})\nexport class Tag {\n  @Prop() label!: string;\n  /** Canonical icon name rendered before the visible label. */\n  @Prop() icon: string = '';\n  @Prop() intent: TagIntent = 'neutral';\n  @Prop() contrast: TagContrast = 'faint';\n  @Prop() size: TagSize = 'md';\n  /** Use the reduced outer geometry when nested inside a control of the same size. */\n  @Prop() isInset: boolean = false;\n  @Prop() rounded: boolean = false;\n  @Prop() maxWidth: string | number | undefined;\n  /** Render a menu-trigger button with a fixed ChevronUpDown suffix. */\n  @Prop() interactive: boolean = false;\n  /** Controlled open state for the menu triggered by an interactive Tag. */\n  @Prop() expanded: boolean = false;\n  /** ID of the menu controlled by an interactive Tag. */\n  @Prop() ariaControls: string | undefined;\n  /** Disable an interactive Tag and apply the shared inactive treatment. */\n  @Prop() isInactive: boolean = false;\n\n  /** Fired when the interactive Tag button is activated. */\n  @Event() dsClick!: EventEmitter<MouseEvent>;\n\n  private handleClick = (event: MouseEvent) => {\n    if (!this.interactive || this.isInactive) return;\n    this.dsClick.emit(event);\n  };\n\n  render() {\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n\n    const maxWidthStyle = this.maxWidth != null\n      ? { maxWidth: typeof this.maxWidth === 'number' ? `${this.maxWidth}px` : this.maxWidth }\n      : undefined;\n    const hostClass = {\n      'tag': true,\n      [`tag--intent-${this.intent}`]: true,\n      [`tag--contrast-${this.contrast}`]: true,\n      [`tag--size-${this.size}`]: true,\n      'ds-control--md': this.size === 'md',\n      'ds-control--sm': this.size === 'sm',\n      'ds-control--xs': this.size === 'xs',\n      'ds-control--inset': this.isInset,\n      'tag--rounded': this.rounded,\n      'tag--interactive': this.interactive,\n      'ds-control-inactive': this.interactive && this.isInactive,\n    };\n    const content = [\n      this.icon && (\n        <ds-icon\n          class=\"tag__prefix-icon\"\n          name={this.icon}\n          size={iconSize}\n          color=\"inherit\"\n        ></ds-icon>\n      ),\n      <ds-text class=\"tag__label\" as=\"span\" variant={textVariant} color=\"inherit\">\n        {this.label}\n      </ds-text>,\n    ];\n\n    if (!this.interactive) {\n      return <Host class={hostClass} style={maxWidthStyle}>{content}</Host>;\n    }\n\n    return (\n      <Host class={hostClass} style={maxWidthStyle}>\n        <button\n          type=\"button\"\n          class={{\n            'tag__button': true,\n            'tag__button--expanded': this.expanded,\n            'ds-interaction-fill': true,\n            'ds-focus-ring-inset': true,\n          }}\n          aria-haspopup=\"menu\"\n          aria-expanded={this.expanded ? 'true' : 'false'}\n          aria-controls={this.ariaControls}\n          disabled={this.isInactive || undefined}\n          onClick={this.handleClick}\n        >\n          {content}\n          <ds-icon\n            class=\"tag__suffix-icon\"\n            name=\"ChevronUpDown\"\n            size={iconSize}\n            color=\"inherit\"\n          ></ds-icon>\n        </button>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Event, EventEmitter, Prop, h, Host } from '@stencil/core';\nimport { CONTROL_TEXT_VARIANT, type ControlInsetDepth } from '../../utils';\n\nexport type TagIntent   = 'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive';\nexport type TagContrast = 'strong' | 'bold' | 'medium' | 'faint';\nexport type TagSize     = 'md' | 'sm' | 'xs';\n\n/**\n * `ds-icon` size prop matching control-density icon metrics\n * (md→20 / sm→16 / xs→12 via `--dimension-iconography-*`).\n */\nconst ICON_SIZE: Record<TagSize, 'md' | 'sm' | 'xs'> = {\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\n@Component({\n  tag: 'ds-tag',\n  styleUrl: 'Tag.css',\n  scoped: true,\n})\nexport class Tag {\n  @Prop() label!: string;\n  /** Canonical icon name rendered before the visible label. */\n  @Prop() icon: string = '';\n  @Prop() intent: TagIntent = 'neutral';\n  @Prop() contrast: TagContrast = 'faint';\n  @Prop() size: TagSize = 'md';\n  /** Use the reduced outer geometry when nested inside a control of the same size. */\n  @Prop() isInset: boolean = false;\n  /** Single removes 4px overall; double removes 8px overall (xs stays single). */\n  @Prop() insetDepth: ControlInsetDepth = 'single';\n  @Prop() rounded: boolean = false;\n  @Prop() maxWidth: string | number | undefined;\n  /** Render a menu-trigger button with a fixed ChevronUpDown suffix. */\n  @Prop() interactive: boolean = false;\n  /** Controlled open state for the menu triggered by an interactive Tag. */\n  @Prop() expanded: boolean = false;\n  /** ID of the menu controlled by an interactive Tag. */\n  @Prop() ariaControls: string | undefined;\n  /** Disable an interactive Tag and apply the shared inactive treatment. */\n  @Prop() isInactive: boolean = false;\n\n  /** Fired when the interactive Tag button is activated. */\n  @Event() dsClick!: EventEmitter<MouseEvent>;\n\n  private handleClick = (event: MouseEvent) => {\n    if (!this.interactive || this.isInactive) return;\n    this.dsClick.emit(event);\n  };\n\n  render() {\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n    const doubleInset = this.isInset && this.insetDepth === 'double' && this.size !== 'xs';\n\n    const maxWidthStyle = this.maxWidth != null\n      ? { maxWidth: typeof this.maxWidth === 'number' ? `${this.maxWidth}px` : this.maxWidth }\n      : undefined;\n    const hostClass = {\n      'tag': true,\n      [`tag--intent-${this.intent}`]: true,\n      [`tag--contrast-${this.contrast}`]: true,\n      [`tag--size-${this.size}`]: true,\n      'ds-control--md': this.size === 'md',\n      'ds-control--sm': this.size === 'sm',\n      'ds-control--xs': this.size === 'xs',\n      'ds-control--inset': this.isInset && !doubleInset,\n      'ds-control--inset-double': doubleInset,\n      'tag--rounded': this.rounded,\n      'tag--interactive': this.interactive,\n      'ds-control-inactive': this.interactive && this.isInactive,\n    };\n    const content = [\n      this.icon && (\n        <ds-icon\n          class=\"tag__prefix-icon\"\n          name={this.icon}\n          size={iconSize}\n          color=\"inherit\"\n        ></ds-icon>\n      ),\n      <ds-text class=\"tag__label\" as=\"span\" variant={textVariant} color=\"inherit\">\n        {this.label}\n      </ds-text>,\n    ];\n\n    if (!this.interactive) {\n      return <Host class={hostClass} style={maxWidthStyle}>{content}</Host>;\n    }\n\n    return (\n      <Host class={hostClass} style={maxWidthStyle}>\n        <button\n          type=\"button\"\n          class={{\n            'tag__button': true,\n            'tag__button--expanded': this.expanded,\n            'ds-interaction-fill': true,\n            'ds-focus-ring-inset': true,\n          }}\n          aria-haspopup=\"menu\"\n          aria-expanded={this.expanded ? 'true' : 'false'}\n          aria-controls={this.ariaControls}\n          disabled={this.isInactive || undefined}\n          onClick={this.handleClick}\n        >\n          {content}\n          <ds-icon\n            class=\"tag__suffix-icon\"\n            name=\"ChevronUpDown\"\n            size={iconSize}\n            color=\"inherit\"\n          ></ds-icon>\n        </button>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

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

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

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

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

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

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

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

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

package/dist/mcp-data/registry/typing-indicator.json

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

package/dist/react/ds-table.d.ts

@@ -3,12 +3,13 @@
  * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
  */
 import type { EventName, StencilReactComponent } from './react-runtime.js';
-import { type DsTableCustomEvent, type TableCellActionDetail, type TableGroupingChangeDetail, type TableLoadMoreDetail, type TableRowActivateDetail, type TableSelectionChangeDetail, type TableSortChangeDetail } from "@ds-mo/ui";
+import { type DsTableCustomEvent, type TableCellActionDetail, type TableGroupCollapseChangeDetail, type TableGroupingChangeDetail, type TableLoadMoreDetail, type TableRowActivateDetail, type TableSelectionChangeDetail, type TableSortChangeDetail } from "@ds-mo/ui";
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsTable as DsTableElement } from "@ds-mo/ui/dist/components/ds-table.js";
 export type DsTableEvents = {
     onDsSortChange: EventName<DsTableCustomEvent<TableSortChangeDetail>>;
     onDsGroupingChange: EventName<DsTableCustomEvent<TableGroupingChangeDetail>>;
+    onDsGroupCollapseChange: EventName<DsTableCustomEvent<TableGroupCollapseChangeDetail>>;
     onDsSelectionChange: EventName<DsTableCustomEvent<TableSelectionChangeDetail>>;
     onDsLoadMore: EventName<DsTableCustomEvent<TableLoadMoreDetail>>;
     onDsCellAction: EventName<DsTableCustomEvent<TableCellActionDetail>>;

package/dist/react/ds-table.js

@@ -10,6 +10,7 @@ export const DsTable = /*@__PURE__*/ createComponent({
     events: {
         onDsSortChange: 'dsSortChange',
         onDsGroupingChange: 'dsGroupingChange',
+        onDsGroupCollapseChange: 'dsGroupCollapseChange',
         onDsSelectionChange: 'dsSelectionChange',
         onDsLoadMore: 'dsLoadMore',
         onDsCellAction: 'dsCellAction',

package/dist/styles/table.css

@@ -16,7 +16,7 @@
   );
   --_table-cell-track-label-inset: var(--dimension-space-025);
   --_table-image-block-size: calc(
-    var(--dimension-size-800) - var(--dimension-space-150)
+    var(--dimension-size-800) - var(--dimension-space-200)
   );
   --_table-surface: var(--ds-table-surface, var(--color-background-primary));
   --_table-header-surface: var(--ds-table-header-surface, var(--color-background-primary));
@@ -28,7 +28,7 @@
   --_table-column-border: var(--ds-table-column-border, var(--color-border-tertiary));
   --_table-sticky-border: var(--ds-table-sticky-border, var(--color-border-secondary));
   --_table-border-strong: var(--ds-table-border-strong, var(--color-border-secondary));
-  --_table-radius: var(--ds-table-radius, var(--dimension-radius-075));
+  --_table-radius: var(--ds-table-radius, var(--dimension-radius-000));
   --_table-header-min-block-size: var(
     --ds-table-header-min-block-size,
     var(--dimension-size-400)
@@ -49,16 +49,16 @@
     --ds-table-selection-column-inline-size,
     var(--dimension-size-500)
   );
-  --_table-selection-column-contribution: 0;
+  --_table-selection-column-contribution: 0px;
   --_table-sticky-start-shadow: var(
     --ds-table-sticky-start-shadow,
-    inset var(--dimension-space-050) 0 var(--dimension-space-050)
-      calc(-1 * var(--dimension-space-050)) var(--color-elevation-shadow)
+    inset var(--dimension-space-100) 0 var(--dimension-space-100)
+      calc(-1 * var(--dimension-space-100)) var(--color-elevation-shadow)
   );
   --_table-sticky-end-shadow: var(
     --ds-table-sticky-end-shadow,
-    inset calc(-1 * var(--dimension-space-050)) 0 var(--dimension-space-050)
-      calc(-1 * var(--dimension-space-050)) var(--color-elevation-shadow)
+    inset calc(-1 * var(--dimension-space-100)) 0 var(--dimension-space-100)
+      calc(-1 * var(--dimension-space-100)) var(--color-elevation-shadow)
   );
   display: block;
   box-sizing: border-box;
@@ -107,7 +107,13 @@
 :where(.ds-table__table) {
   box-sizing: border-box;
   inline-size: 100%;
-  min-inline-size: max(100%, var(--ds-table-explicit-min-inline-size, 0));
+  min-inline-size: max(
+    100%,
+    calc(
+      var(--ds-table-explicit-min-inline-size, 0px) +
+        var(--_table-selection-column-contribution)
+    )
+  );
   border: 0;
   border-spacing: 0;
   border-collapse: separate;
@@ -118,21 +124,42 @@
 
 :where(.ds-table__table--selectable) {
   --_table-selection-column-contribution: var(--_table-selection-column-inline-size);
-  min-inline-size: max(
-    100%,
-    calc(var(--ds-table-explicit-min-inline-size, 0) + var(--_table-selection-column-contribution))
-  );
 }
 
-:where(.ds-table__caption) {
-  padding: var(--_table-cell-padding-inline);
-  border-block-end: var(--dimension-stroke-width-012) solid var(--_table-border);
+:where(.ds-table__caption-bar),
+:where(.ds-table__footer) {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  inline-size: 100%;
+  min-block-size: var(--dimension-size-600);
+  block-size: var(--dimension-size-600);
+  padding-inline: var(--_table-cell-padding-inline);
   background: var(--_table-surface);
   text-align: start;
 }
 
+:where(.ds-table__caption-bar) {
+  border-block-end: var(--dimension-stroke-width-012) solid var(--_table-border);
+  color: var(--color-foreground-primary);
+}
+
+/* Optional controlled result summary. */
+:where(.ds-table__footer) {
+  border-block-start: var(--dimension-stroke-width-012) solid var(--_table-border);
+  color: var(--color-foreground-secondary);
+}
+
 :where(.ds-table__selection-column) {
   inline-size: var(--_table-selection-column-inline-size);
+  width: var(--_table-selection-column-inline-size);
+  max-inline-size: var(--_table-selection-column-inline-size);
+  max-width: var(--_table-selection-column-inline-size);
+}
+
+:where(.ds-table__action-column) {
+  inline-size: var(--dimension-size-500);
+  width: var(--dimension-size-500);
 }
 
 :where(.ds-table__head) {
@@ -375,7 +402,7 @@
 :where(.ds-table__header-labels),
 :where(.ds-table__header-segment),
 :where(.ds-table__sort-slot),
-:where(.ds-table__group-content),
+:where(.ds-table__collapse-slot),
 :where(.ds-table__load-content) {
   display: inline-flex;
   align-items: center;
@@ -388,6 +415,10 @@
   gap: var(--dimension-space-050);
 }
 
+:where(.ds-table__header-content--collapse-all) {
+  justify-content: flex-end;
+}
+
 :where(.ds-table__header-labels) {
   max-inline-size: 100%;
   gap: var(--dimension-space-025);
@@ -407,6 +438,44 @@
   flex: 0 0 auto;
   inline-size: var(--dimension-size-200);
   block-size: var(--dimension-size-200);
+}
+
+:where(.ds-table__collapse-slot) {
+  justify-content: center;
+  flex: 0 0 auto;
+  inline-size: var(--dimension-size-300);
+  block-size: var(--dimension-size-200);
+  margin-inline-start: auto;
+}
+
+:where(.ds-table__collapse-all-overlay) {
+  position: absolute;
+  inset-block-start: calc(
+    var(--ds-table-collapse-all-block-offset, 0px) + var(--dimension-space-100)
+  );
+  inset-inline-end: var(--dimension-space-100);
+  z-index: var(--dimension-z-index-floating);
+  box-sizing: border-box;
+  display: flex;
+  inline-size: var(--dimension-size-300);
+  block-size: var(--dimension-size-200);
+  pointer-events: none;
+}
+
+:where(.ds-table__collapse-all-surface) {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 100%;
+  block-size: 100%;
+  padding: 0;
+  border-radius: var(--dimension-radius-025);
+  background: var(--_table-header-surface);
+  pointer-events: auto;
+}
+
+:where(.ds-table__sort-slot) {
   margin-inline-start: auto;
 }
 
@@ -488,7 +557,7 @@
 
 :where(.ds-table__cell--tag-tag-only),
 :where(.ds-table__cell--tag-tag-with-text) {
-  padding: var(--dimension-space-075);
+  padding: var(--dimension-space-100);
 }
 
 :where(.ds-table__cell--tag-text-with-tag) {
@@ -516,6 +585,10 @@
   min-block-size: 0;
 }
 
+:where(.ds-table__cell-tag-stack--tag-with-text) {
+  gap: var(--dimension-space-025);
+}
+
 :where(.ds-table__cell-tag-stack--text-with-tag .ds-table__cell-tag-text) {
   padding-inline: var(--_table-cell-track-label-inset);
   min-block-size: 0;
@@ -532,7 +605,7 @@
 }
 
 :where(.ds-table__cell-tag-stack--text-with-tag .ds-table__cell-tag-control-track) {
-  min-block-size: 0;
+  min-block-size: var(--dimension-size-250);
 }
 
 :where(.ds-table__cell--icon) {
@@ -547,7 +620,7 @@
 }
 
 :where(.ds-table__cell--image) {
-  padding: var(--dimension-space-075);
+  padding: var(--dimension-space-100);
 }
 
 :where(.ds-table__cell-image) {
@@ -573,11 +646,11 @@
 }
 
 :where(.ds-table__cell--action) {
-  padding: var(--dimension-space-075);
+  padding: var(--dimension-space-100);
 }
 
 :where(.ds-table__cell--action .ds-table__cell-content) {
-  min-block-size: var(--_table-cell-track-min-block-size);
+  min-block-size: var(--dimension-size-300);
 }
 
 :where(.ds-table__cell-primary),
@@ -645,6 +718,9 @@
 
 :where(.ds-table__selection-cell) {
   inline-size: var(--_table-selection-column-inline-size);
+  width: var(--_table-selection-column-inline-size);
+  max-inline-size: var(--_table-selection-column-inline-size);
+  max-width: var(--_table-selection-column-inline-size);
   padding: 0;
   text-align: center;
 }
@@ -709,7 +785,7 @@
   content: '';
   position: absolute;
   inset-block: 0;
-  inline-size: var(--dimension-space-050);
+  inline-size: var(--dimension-space-100);
   pointer-events: none;
 }
 
@@ -775,13 +851,136 @@
 }
 
 :where(.ds-table__group-cell) {
-  min-block-size: var(--_table-header-min-block-size);
-  padding: var(--dimension-space-075) var(--_table-cell-padding-inline);
-  background: var(--_table-group-surface);
+  /* Surface + chrome live on `.ds-table__group-content` (viewport-width). The
+   * th only spans the table for row structure so body columns can scroll. */
+  min-block-size: var(--_table-row-min-block-size);
+  padding: 0;
+  border-block-end: 0;
+  background: transparent;
+}
+
+/* Intentful groups resolve from their faint signal into neutral at the trailing edge. */
+:where(.ds-table__group-cell--intent-brand),
+:where(.ds-table__group-cell--intent-negative),
+:where(.ds-table__group-cell--intent-warning),
+:where(.ds-table__group-cell--intent-caution),
+:where(.ds-table__group-cell--intent-positive) {
+  --_table-group-surface: linear-gradient(
+    to right,
+    var(--_table-group-intent-surface),
+    var(--color-background-faint-neutral)
+  );
+}
+
+:where(.ds-table__group-cell--intent-brand) {
+  --_table-group-intent-surface: var(--color-background-faint-brand);
+}
+
+:where(.ds-table__group-cell--intent-neutral) {
+  --_table-group-surface: var(--color-background-faint-neutral);
+}
+
+:where(.ds-table__group-cell--intent-negative) {
+  --_table-group-intent-surface: var(--color-background-faint-negative);
+}
+
+:where(.ds-table__group-cell--intent-warning) {
+  --_table-group-intent-surface: var(--color-background-faint-warning);
+}
+
+:where(.ds-table__group-cell--intent-caution) {
+  --_table-group-intent-surface: var(--color-background-faint-caution);
+}
+
+:where(.ds-table__group-cell--intent-positive) {
+  --_table-group-intent-surface: var(--color-background-faint-positive);
 }
 
 :where(.ds-table__group-content) {
-  gap: var(--dimension-space-075);
+  position: sticky;
+  inset-inline-start: 0;
+  z-index: 1;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--dimension-space-100);
+  /* Use a measured length because WebKit expands min()/percentage widths to
+   * the spanning table cell instead of honoring the visible scrollport. */
+  inline-size: var(--ds-table-visible-inline-size, 100%);
+  max-inline-size: var(--ds-table-visible-inline-size, 100%);
+  min-block-size: var(--_table-row-min-block-size);
+  padding: var(--dimension-space-100);
+  border-block-end: 0;
+  background: var(--_table-group-surface);
+  background-clip: border-box;
+}
+
+:where(.ds-table__group-content)::after {
+  content: '';
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
+  block-size: var(--dimension-stroke-width-012);
+  background: var(--_table-border);
+  pointer-events: none;
+}
+
+:where(.ds-table__group:last-child[data-collapsed='true'] .ds-table__group-content)::after {
+  display: none;
+}
+
+:where(.ds-table__table--selectable .ds-table__group-content) {
+  /* Selection lane is the real 40px column — don't add start pad or flex gap. */
+  gap: 0;
+  padding-inline-start: 0;
+}
+
+:where(.ds-table__group-selection) {
+  /* 40px column (same as body), with a 24px-tall checkbox lane. */
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: 0 0 var(--_table-selection-column-inline-size);
+  align-items: center;
+  justify-content: center;
+  padding-block: var(--dimension-space-025);
+  padding-inline: var(--dimension-space-050);
+}
+
+:where(.ds-table__group-selection .ds-table__selection-control) {
+  inline-size: var(--dimension-iconography-md);
+  min-block-size: var(--dimension-iconography-md);
+  block-size: var(--dimension-iconography-md);
+}
+
+:where(.ds-table__group-copy) {
+  /* The full-size sm count tag owns the 24px content height; inline padding
+   * preserves the shared text track without making the 40px section row grow. */
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  min-inline-size: 0;
+  flex: 1 1 auto;
+  gap: var(--dimension-space-100);
+  padding-block: 0;
+  padding-inline: var(--dimension-space-050);
+}
+
+:where(.ds-table__table--selectable .ds-table__group-copy) {
+  padding-inline-start: calc(
+    var(--dimension-space-100) + var(--_table-cell-track-label-inset)
+  );
+}
+
+:where(.ds-table__group-count) {
+  display: inline-flex;
+  flex: 0 0 auto;
+  border-radius: var(--dimension-radius-half);
+}
+
+:where(.ds-table__group-toggle) {
+  align-self: center;
+  flex: 0 0 auto;
+  margin-inline-start: auto;
 }
 
 :where(.ds-table__load-cell),
@@ -792,12 +991,23 @@
 }
 
 :where(.ds-table__load-content) {
+  /* Match md ButtonUnfilled height so text-only / loading / button states share one box. */
+  box-sizing: border-box;
   justify-content: center;
   gap: var(--dimension-space-100);
+  min-block-size: var(--dimension-size-400);
 }
 
 :where(.ds-table__load-content--error) {
   flex-wrap: wrap;
+  /* 16px between the icon/text cluster and the retry button. */
+  gap: var(--dimension-space-200);
+}
+
+:where(.ds-table__load-copy) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dimension-space-100);
 }
 
 :where(.ds-table__auto-sentinel) {
@@ -856,6 +1066,14 @@
     box-shadow: none;
   }
 
+  :where(.ds-table__collapse-all-surface) {
+    --ds-control-elevation-shadow: none;
+    --ds-control-elevation-highlight: none;
+    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-control-boundary);
+    outline-offset: calc(-1 * var(--dimension-stroke-width-012));
+    background: var(--ds-forced-color-surface);
+  }
+
   :where(.ds-table__row--disabled) {
     color: var(--ds-forced-color-disabled);
     opacity: 1;

package/dist/types/components/ButtonFilled/ButtonFilled.d.ts

@@ -1,5 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import type { ChoiceBackground } from '../../utils/choice-list';
+import type { ControlInsetDepth } from '../../utils/control-text';
 import type { ButtonPopup, ButtonSize, ButtonVariant, ButtonWidth } from '../../utils/button-types';
 export type ButtonFilledIntent = 'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive' | 'guide' | 'walkthrough';
 export type ButtonFilledContrast = 'bold' | 'strong' | 'medium' | 'faint';
@@ -19,6 +20,8 @@ export declare class ButtonFilled {
     size: ButtonFilledSize;
     /** Use reduced outer geometry when nested inside a control of the same size. */
     isInset: boolean;
+    /** Single removes 4px overall; double removes 8px overall (xs stays single). */
+    insetDepth: ControlInsetDepth;
     /** Width fit — hug content (default) or fill the parent. */
     width: ButtonFilledWidth;
     /** Visible text for `label` / `icon-label` variants. */
@@ -81,6 +84,7 @@ export declare class ButtonFilled {
     private handleClick;
     private get resolvedHaspopup();
     private get accessibleName();
+    private get doubleInset();
     render(): any;
 }
 //# sourceMappingURL=ButtonFilled.d.ts.map

package/dist/types/components/ButtonUnfilled/ButtonUnfilled.d.ts

@@ -1,4 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import type { ControlInsetDepth } from '../../utils/control-text';
 import type { ButtonPopup, ButtonSize, ButtonVariant, ButtonWidth } from '../../utils/button-types';
 export type ButtonUnfilledBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'translucent' | 'inverted' | 'media' | 'always-dark';
 export type ButtonUnfilledVariant = ButtonVariant;
@@ -16,6 +17,8 @@ export declare class ButtonUnfilled {
     size: ButtonUnfilledSize;
     /** Use reduced outer geometry when nested inside a control of the same size. */
     isInset: boolean;
+    /** Single removes 4px overall; double removes 8px overall (xs stays single). */
+    insetDepth: ControlInsetDepth;
     /** Width fit — hug content (default) or fill the parent. */
     width: ButtonUnfilledWidth;
     /** Visible text for `label` / `icon-label` variants. */
@@ -55,6 +58,11 @@ export declare class ButtonUnfilled {
     /** Accessible name override. Required for icon-only buttons. */
     ariaLabel: string | null;
     controls: string | undefined;
+    /**
+     * Controlled disclosure or popup state forwarded to `aria-expanded`.
+     * Popup triggers hold a pressed visual while open; ordinary disclosures
+     * retain the normal resting appearance.
+     */
     expanded: boolean | undefined;
     haspopup: ButtonUnfilledPopup | undefined;
     /**
@@ -86,7 +94,9 @@ export declare class ButtonUnfilled {
     private handleClick;
     private get showDot();
     private get resolvedHaspopup();
-    /** An expanded popup trigger is visually active even when selection is controlled separately. */
+    private get doubleInset();
+    /** Only popup triggers hold a pressed visual while expanded. */
+    private get expandedPopup();
     private get visuallyActive();
     /** Knock-out ring: selected fill → active wash; otherwise surface token. */
     private get dotRing();