@ds-mo/ui 14.27.1 → 14.29.0

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

@@ -66,7 +66,8 @@
         "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."
+        "isInactive disables only the interactive button and applies the shared inactive treatment.",
+        "Interactive tags use surfaceOpen for the associated menu lifecycle, including exit motion. This holds the shared pressed wash without changing the intent that describes the metadata value. Static tags never acquire surface ownership."
       ],
       "responsiveBehavior": [
         "The owner selects md, sm, or xs density to match its local layout and owns collection wrapping, overflow, and condensation. Use isInset only for same-density control nesting.",
@@ -87,6 +88,10 @@
         {
           "label": "Storybook examples",
           "path": "src/wc/components/Tag/Tag.stories.ts"
+        },
+        {
+          "label": "Surface ownership and trigger state",
+          "path": "src/docs/SurfaceOwnership.mdx"
         }
       ]
     },
@@ -199,6 +204,14 @@
           "default": "'md'",
           "required": false,
           "mutable": false
+        },
+        "surfaceOpen": {
+          "type": "boolean | undefined",
+          "resolvedType": "boolean | undefined",
+          "attribute": "surface-open",
+          "required": false,
+          "mutable": false,
+          "description": "Associated menu remains visible, including exit motion. Omission preserves\nthe deprecated expanded-derived wash; explicit false suppresses it."
         }
       },
       "events": [
@@ -322,6 +335,14 @@
         "default": "'md'",
         "required": false,
         "mutable": false
+      },
+      "surfaceOpen": {
+        "type": "boolean | undefined",
+        "resolvedType": "boolean | undefined",
+        "attribute": "surface-open",
+        "required": false,
+        "mutable": false,
+        "description": "Associated menu remains visible, including exit motion. Omission preserves\nthe deprecated expanded-derived wash; explicit false suppresses it."
       }
     },
     "events": [
@@ -382,12 +403,12 @@
   "files": [
     {
       "path": "src/wc/components/Tag/Tag.css",
-      "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) {\n  background-color: var(--color-background-strong-neutral);\n  color: var(--color-foreground-medium-neutral);\n}\n:host(.tag--intent-brand.tag--contrast-strong) {\n  background-color: var(--color-background-strong-brand);\n  color: var(--color-foreground-on-strong-background-primary);\n}\n:host(.tag--intent-ai.tag--contrast-strong) {\n  background-color: var(--color-background-strong-ai);\n  color: var(--color-foreground-medium-ai);\n}\n:host(.tag--intent-negative.tag--contrast-strong) {\n  background-color: var(--color-background-strong-negative);\n  color: var(--color-foreground-medium-negative);\n}\n:host(.tag--intent-warning.tag--contrast-strong) {\n  background-color: var(--color-background-strong-warning);\n  color: var(--color-foreground-medium-warning);\n}\n:host(.tag--intent-caution.tag--contrast-strong) {\n  background-color: var(--color-background-strong-caution);\n  color: var(--color-foreground-medium-caution);\n}\n:host(.tag--intent-positive.tag--contrast-strong) {\n  background-color: var(--color-background-strong-positive);\n  color: var(--color-foreground-medium-positive);\n}\n\n/* ── Intent × Contrast — bold ───────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-bold) {\n  background-color: var(--color-background-bold-neutral);\n  color: var(--color-foreground-on-bold-background-primary);\n}\n:host(.tag--intent-brand.tag--contrast-bold) {\n  background-color: var(--color-background-bold-brand);\n  color: var(--color-foreground-on-bold-background-primary);\n}\n:host(.tag--intent-ai.tag--contrast-bold) {\n  background-color: var(--color-background-bold-ai);\n  color: var(--color-foreground-on-bold-background-primary);\n}\n:host(.tag--intent-negative.tag--contrast-bold) {\n  background-color: var(--color-background-bold-negative);\n  color: var(--color-foreground-on-bold-background-primary);\n}\n:host(.tag--intent-warning.tag--contrast-bold) {\n  background-color: var(--color-background-bold-warning);\n  color: var(--color-foreground-on-bold-background-primary);\n}\n:host(.tag--intent-caution.tag--contrast-bold) {\n  background-color: var(--color-background-bold-caution);\n  color: var(--color-foreground-on-bold-background-primary);\n}\n:host(.tag--intent-positive.tag--contrast-bold) {\n  background-color: var(--color-background-bold-positive);\n  color: var(--color-foreground-on-bold-background-primary);\n}\n\n/* ── Intent × Contrast — medium ─────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-medium) {\n  background-color: var(--color-background-medium-neutral);\n  color: var(--color-foreground-strong-neutral);\n}\n:host(.tag--intent-brand.tag--contrast-medium) {\n  background-color: var(--color-background-medium-brand);\n  color: var(--color-foreground-on-medium-background-primary);\n}\n:host(.tag--intent-ai.tag--contrast-medium) {\n  background-color: var(--color-background-medium-ai);\n  color: var(--color-foreground-strong-ai);\n}\n:host(.tag--intent-negative.tag--contrast-medium) {\n  background-color: var(--color-background-medium-negative);\n  color: var(--color-foreground-strong-negative);\n}\n:host(.tag--intent-warning.tag--contrast-medium) {\n  background-color: var(--color-background-medium-warning);\n  color: var(--color-foreground-strong-warning);\n}\n:host(.tag--intent-caution.tag--contrast-medium) {\n  background-color: var(--color-background-medium-caution);\n  color: var(--color-foreground-strong-caution);\n}\n:host(.tag--intent-positive.tag--contrast-medium) {\n  background-color: var(--color-background-medium-positive);\n  color: var(--color-foreground-strong-positive);\n}\n\n/* ── Intent × Contrast — faint ──────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-faint) {\n  background-color: var(--color-background-faint-neutral);\n  color: var(--color-foreground-bold-neutral);\n}\n:host(.tag--intent-brand.tag--contrast-faint) {\n  background-color: var(--color-background-faint-brand);\n  color: var(--color-foreground-bold-brand);\n}\n:host(.tag--intent-ai.tag--contrast-faint) {\n  background-color: var(--color-background-faint-ai);\n  color: var(--color-foreground-bold-ai);\n}\n:host(.tag--intent-negative.tag--contrast-faint) {\n  background-color: var(--color-background-faint-negative);\n  color: var(--color-foreground-bold-negative);\n}\n:host(.tag--intent-warning.tag--contrast-faint) {\n  background-color: var(--color-background-faint-warning);\n  color: var(--color-foreground-bold-warning);\n}\n:host(.tag--intent-caution.tag--contrast-faint) {\n  background-color: var(--color-background-faint-caution);\n  color: var(--color-foreground-bold-caution);\n}\n:host(.tag--intent-positive.tag--contrast-faint) {\n  background-color: var(--color-background-faint-positive);\n  color: var(--color-foreground-bold-positive);\n}\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) {\n  background-color: var(--color-background-strong-neutral);\n  color: var(--color-foreground-medium-neutral);\n}\n:host(.tag--intent-brand.tag--contrast-strong) {\n  background-color: var(--color-background-strong-brand);\n  color: var(--color-foreground-on-strong-background-primary);\n}\n:host(.tag--intent-ai.tag--contrast-strong) {\n  background-color: var(--color-background-strong-ai);\n  color: var(--color-foreground-medium-ai);\n}\n:host(.tag--intent-negative.tag--contrast-strong) {\n  background-color: var(--color-background-strong-negative);\n  color: var(--color-foreground-medium-negative);\n}\n:host(.tag--intent-warning.tag--contrast-strong) {\n  background-color: var(--color-background-strong-warning);\n  color: var(--color-foreground-medium-warning);\n}\n:host(.tag--intent-caution.tag--contrast-strong) {\n  background-color: var(--color-background-strong-caution);\n  color: var(--color-foreground-medium-caution);\n}\n:host(.tag--intent-positive.tag--contrast-strong) {\n  background-color: var(--color-background-strong-positive);\n  color: var(--color-foreground-medium-positive);\n}\n\n/* ── Intent × Contrast — bold ───────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-bold) {\n  background-color: var(--color-background-bold-neutral);\n  color: var(--color-foreground-on-bold-background-primary);\n}\n:host(.tag--intent-brand.tag--contrast-bold) {\n  background-color: var(--color-background-bold-brand);\n  color: var(--color-foreground-on-bold-background-primary);\n}\n:host(.tag--intent-ai.tag--contrast-bold) {\n  background-color: var(--color-background-bold-ai);\n  color: var(--color-foreground-on-bold-background-primary);\n}\n:host(.tag--intent-negative.tag--contrast-bold) {\n  background-color: var(--color-background-bold-negative);\n  color: var(--color-foreground-on-bold-background-primary);\n}\n:host(.tag--intent-warning.tag--contrast-bold) {\n  background-color: var(--color-background-bold-warning);\n  color: var(--color-foreground-on-bold-background-primary);\n}\n:host(.tag--intent-caution.tag--contrast-bold) {\n  background-color: var(--color-background-bold-caution);\n  color: var(--color-foreground-on-bold-background-primary);\n}\n:host(.tag--intent-positive.tag--contrast-bold) {\n  background-color: var(--color-background-bold-positive);\n  color: var(--color-foreground-on-bold-background-primary);\n}\n\n/* ── Intent × Contrast — medium ─────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-medium) {\n  background-color: var(--color-background-medium-neutral);\n  color: var(--color-foreground-strong-neutral);\n}\n:host(.tag--intent-brand.tag--contrast-medium) {\n  background-color: var(--color-background-medium-brand);\n  color: var(--color-foreground-on-medium-background-primary);\n}\n:host(.tag--intent-ai.tag--contrast-medium) {\n  background-color: var(--color-background-medium-ai);\n  color: var(--color-foreground-strong-ai);\n}\n:host(.tag--intent-negative.tag--contrast-medium) {\n  background-color: var(--color-background-medium-negative);\n  color: var(--color-foreground-strong-negative);\n}\n:host(.tag--intent-warning.tag--contrast-medium) {\n  background-color: var(--color-background-medium-warning);\n  color: var(--color-foreground-strong-warning);\n}\n:host(.tag--intent-caution.tag--contrast-medium) {\n  background-color: var(--color-background-medium-caution);\n  color: var(--color-foreground-strong-caution);\n}\n:host(.tag--intent-positive.tag--contrast-medium) {\n  background-color: var(--color-background-medium-positive);\n  color: var(--color-foreground-strong-positive);\n}\n\n/* ── Intent × Contrast — faint ──────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-faint) {\n  background-color: var(--color-background-faint-neutral);\n  color: var(--color-foreground-bold-neutral);\n}\n:host(.tag--intent-brand.tag--contrast-faint) {\n  background-color: var(--color-background-faint-brand);\n  color: var(--color-foreground-bold-brand);\n}\n:host(.tag--intent-ai.tag--contrast-faint) {\n  background-color: var(--color-background-faint-ai);\n  color: var(--color-foreground-bold-ai);\n}\n:host(.tag--intent-negative.tag--contrast-faint) {\n  background-color: var(--color-background-faint-negative);\n  color: var(--color-foreground-bold-negative);\n}\n:host(.tag--intent-warning.tag--contrast-faint) {\n  background-color: var(--color-background-faint-warning);\n  color: var(--color-foreground-bold-warning);\n}\n:host(.tag--intent-caution.tag--contrast-faint) {\n  background-color: var(--color-background-faint-caution);\n  color: var(--color-foreground-bold-caution);\n}\n:host(.tag--intent-positive.tag--contrast-faint) {\n  background-color: var(--color-background-faint-positive);\n  color: var(--color-foreground-bold-positive);\n}\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/* 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, type ControlInsetDepth } from '../../utils';\n\nexport type TagIntent =\n  | 'neutral'\n  | 'brand'\n  | 'ai'\n  | 'negative'\n  | 'warning'\n  | 'caution'\n  | '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 =\n      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 (\n        <Host class={hostClass} style={maxWidthStyle}>\n          {content}\n        </Host>\n      );\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 =\n  | 'neutral'\n  | 'brand'\n  | 'ai'\n  | 'negative'\n  | 'warning'\n  | 'caution'\n  | '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  /** Associated menu remains visible, including exit motion. Omission preserves\n   * the deprecated expanded-derived wash; explicit false suppresses it. */\n  @Prop() surfaceOpen: boolean | undefined;\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 =\n      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 (\n        <Host class={hostClass} style={maxWidthStyle}>\n          {content}\n        </Host>\n      );\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--surface-open':\n              (this.surfaceOpen ?? this.expanded) && !this.isInactive,\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/react/components.d.ts

@@ -19,8 +19,10 @@ export { DsBreadcrumb } from "./ds-breadcrumb.js";
 export { DsButtonFilled } from "./ds-button-filled.js";
 export { DsButtonUnfilled } from "./ds-button-unfilled.js";
 export { DsCardChart } from "./ds-card-chart.js";
+export { DsCardNavigation } from "./ds-card-navigation.js";
 export { DsCardOverview } from "./ds-card-overview.js";
 export { DsCardSetting } from "./ds-card-setting.js";
+export { DsCardSettingsScope } from "./ds-card-settings-scope.js";
 export { DsChartLegend } from "./ds-chart-legend.js";
 export { DsChart } from "./ds-chart.js";
 export { DsCheckbox } from "./ds-checkbox.js";

package/dist/react/components.js

@@ -20,8 +20,10 @@ export { DsBreadcrumb } from "./ds-breadcrumb.js";
 export { DsButtonFilled } from "./ds-button-filled.js";
 export { DsButtonUnfilled } from "./ds-button-unfilled.js";
 export { DsCardChart } from "./ds-card-chart.js";
+export { DsCardNavigation } from "./ds-card-navigation.js";
 export { DsCardOverview } from "./ds-card-overview.js";
 export { DsCardSetting } from "./ds-card-setting.js";
+export { DsCardSettingsScope } from "./ds-card-settings-scope.js";
 export { DsChartLegend } from "./ds-chart-legend.js";
 export { DsChart } from "./ds-chart.js";
 export { DsCheckbox } from "./ds-checkbox.js";

package/dist/react/ds-card-navigation.d.ts

@@ -0,0 +1,12 @@
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * 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 CardNavigationDetail, type DsCardNavigationCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsCardNavigation as DsCardNavigationElement } from "@ds-mo/ui/dist/components/ds-card-navigation.js";
+export type DsCardNavigationEvents = {
+    onDsNavigate: EventName<DsCardNavigationCustomEvent<CardNavigationDetail>>;
+};
+export declare const DsCardNavigation: StencilReactComponent<DsCardNavigationElement, DsCardNavigationEvents, Components.DsCardNavigation, 'href' | 'heading'>;

package/dist/react/ds-card-navigation.js

@@ -0,0 +1,12 @@
+'use client';
+import { createComponent } from './react-runtime.js';
+import React from 'react';
+import { DsCardNavigation as DsCardNavigationElement, defineCustomElement as defineDsCardNavigation } from "@ds-mo/ui/dist/components/ds-card-navigation.js";
+export const DsCardNavigation = /*@__PURE__*/ createComponent({
+    tagName: 'ds-card-navigation',
+    elementClass: DsCardNavigationElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onDsNavigate: 'dsNavigate' },
+    defineCustomElement: defineDsCardNavigation
+});

package/dist/react/ds-card-settings-scope.d.ts

@@ -0,0 +1,12 @@
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * 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 DsCardSettingsScopeCustomEvent, type SettingsScopeRequest } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsCardSettingsScope as DsCardSettingsScopeElement } from "@ds-mo/ui/dist/components/ds-card-settings-scope.js";
+export type DsCardSettingsScopeEvents = {
+    onDsScopeRequest: EventName<DsCardSettingsScopeCustomEvent<SettingsScopeRequest>>;
+};
+export declare const DsCardSettingsScope: StencilReactComponent<DsCardSettingsScopeElement, DsCardSettingsScopeEvents, Components.DsCardSettingsScope>;

package/dist/react/ds-card-settings-scope.js

@@ -0,0 +1,12 @@
+'use client';
+import { createComponent } from './react-runtime.js';
+import React from 'react';
+import { DsCardSettingsScope as DsCardSettingsScopeElement, defineCustomElement as defineDsCardSettingsScope } from "@ds-mo/ui/dist/components/ds-card-settings-scope.js";
+export const DsCardSettingsScope = /*@__PURE__*/ createComponent({
+    tagName: 'ds-card-settings-scope',
+    elementClass: DsCardSettingsScopeElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onDsScopeRequest: 'dsScopeRequest' },
+    defineCustomElement: defineDsCardSettingsScope
+});

package/dist/react/ds-mobile-sheet-nav.d.ts

@@ -3,11 +3,12 @@
  * 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 DsMobileSheetNavCustomEvent, type NavChromeStyle } from "@ds-mo/ui";
+import { type DsMobileSheetNavCustomEvent, type NavChromeStyle, type PanelNavChildSelectDetail } from "@ds-mo/ui";
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsMobileSheetNav as DsMobileSheetNavElement } from "@ds-mo/ui/dist/components/ds-mobile-sheet-nav.js";
 export type DsMobileSheetNavEvents = {
     onDsAreaSelect: EventName<DsMobileSheetNavCustomEvent<string>>;
+    onDsNavChildSelect: EventName<DsMobileSheetNavCustomEvent<PanelNavChildSelectDetail>>;
     onDsBrowseContextChange: EventName<DsMobileSheetNavCustomEvent<NavChromeStyle>>;
     onDsClose: EventName<DsMobileSheetNavCustomEvent<void>>;
 };

package/dist/react/ds-mobile-sheet-nav.js

@@ -9,6 +9,7 @@ export const DsMobileSheetNav = /*@__PURE__*/ createComponent({
     react: React,
     events: {
         onDsAreaSelect: 'dsAreaSelect',
+        onDsNavChildSelect: 'dsNavChildSelect',
         onDsBrowseContextChange: 'dsBrowseContextChange',
         onDsClose: 'dsClose'
     },

package/dist/styles/table.css

@@ -1206,6 +1206,7 @@
 
 :where(.ds-table__row > .ds-table__cell.ds-interaction-fill) {
   --ds-interaction-active: var(--_table-row-selected);
+  --ds-interaction-pressed: var(--_table-row-pressed);
   --ds-interaction-group-fill: transparent;
 }
 

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

@@ -52,6 +52,8 @@ export declare class BarTitle {
     dsAction: EventEmitter<string>;
     private sectionMenuOpen;
     private openActionMenuId;
+    private surfaceActionMenuId;
+    private sectionSurfaceOpen;
     private sectionMenuInitialFocusVisible;
     private actionMenuInitialFocusVisible;
     private readonly instanceId;
@@ -92,6 +94,7 @@ export declare class BarTitle {
     private closeSectionMenu;
     private handleSectionSelect;
     private toggleActionMenu;
+    private finishActionMenuClose;
     private closeActionMenu;
     private handleActionSelect;
     private renderSectionSelector;

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

@@ -62,11 +62,18 @@ export declare class ButtonFilled {
     /** ID of the popup this button controls. */
     controls: string | undefined;
     /**
-     * Controlled open state of the popup this button triggers. Holds the pressed
-     * wash for the popup's rendered lifecycle. ButtonFilled has no selected state,
-     * so an open popup never promotes to an active treatment.
+     * Controlled disclosure state forwarded to aria-expanded.
+     * Using expanded alone for surface-open styling is deprecated; set surfaceOpen
+     * explicitly to separate the rendered surface lifecycle from disclosure state.
      */
     expanded: boolean | undefined;
+    /**
+     * The associated menu, picker, or panel is visible, including its exit motion.
+     * Holds only the pressed wash; does not set ARIA, selection, or press scaling.
+     * In split mode this applies only to the menu segment. Explicit false disables
+     * the legacy expanded-derived wash; omission preserves that compatibility path.
+     */
+    surfaceOpen: boolean | undefined;
     /** Popup type exposed to assistive technology. */
     haspopup: ButtonFilledPopup | undefined;
     /**
@@ -95,6 +102,7 @@ export declare class ButtonFilled {
     private handleClick;
     private handleMenuClick;
     private get resolvedHaspopup();
+    private get resolvedSurfaceOpen();
     private get accessibleName();
     private get doubleInset();
     private buttonClass;

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

@@ -61,11 +61,18 @@ export declare class ButtonUnfilled {
     ariaLabel: string | null;
     controls: string | undefined;
     /**
-     * Controlled disclosure or popup state forwarded to `aria-expanded`.
-     * Popup triggers hold only the pressed wash while open; their resting
-     * foreground is unchanged. Ordinary disclosures remain visually neutral.
+     * Controlled disclosure state forwarded to aria-expanded.
+     * Using expanded alone for surface-open styling is deprecated; set surfaceOpen
+     * explicitly to separate the rendered surface lifecycle from disclosure state.
      */
     expanded: boolean | undefined;
+    /**
+     * The associated menu, picker, or panel is visible, including its exit motion.
+     * Holds only the pressed wash; does not set ARIA, selection, or press scaling.
+     * In split mode this applies only to the menu segment. Explicit false disables
+     * the legacy expanded-derived wash; omission preserves that compatibility path.
+     */
+    surfaceOpen: boolean | undefined;
     haspopup: ButtonUnfilledPopup | undefined;
     /**
      * Append a separate ChevronDown menu segment while preserving this button's
@@ -126,8 +133,7 @@ export declare class ButtonUnfilled {
     private disconnectCaptionCompactObserver;
     private get resolvedHaspopup();
     private get doubleInset();
-    /** Only popup triggers hold a pressed visual while expanded. */
-    private get expandedPopup();
+    private get resolvedSurfaceOpen();
     private get visuallyActive();
     /** Knock-out ring: selected fill → active wash; otherwise surface token. */
     private get dotRing();

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

@@ -0,0 +1,31 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type CardNavigationWidth = 'sm' | 'md' | 'lg';
+export type CardNavigationVariant = 'navigation-only' | 'content';
+export interface CardNavigationDetail {
+    href: string;
+    originalEvent: MouseEvent;
+}
+export declare class CardNavigation {
+    /** Destination for the card's native link. */
+    href: string;
+    /** Section or destination heading shown in the card header. */
+    heading: string;
+    /** Optional supporting copy shown below the heading. */
+    description: string | undefined;
+    /**
+     * `navigation-only` makes the complete card the link. `content` keeps the
+     * header as the link and exposes a non-interactive body slot below it.
+     */
+    variant: CardNavigationVariant;
+    /** Card width token (`sm` / `md` / `lg`). */
+    cardWidth: CardNavigationWidth;
+    /**
+     * Emits before native navigation. Prevent this event to take over routing;
+     * the component will then prevent the original link navigation.
+     */
+    dsNavigate: EventEmitter<CardNavigationDetail>;
+    private handleNavigation;
+    private renderHeader;
+    render(): any;
+}
+//# sourceMappingURL=CardNavigation.d.ts.map

package/dist/types/components/CardNavigation/index.d.ts

@@ -0,0 +1,2 @@
+export type { CardNavigationDetail, CardNavigationVariant, CardNavigationWidth, } from './CardNavigation';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,33 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface SettingsScopeRequest {
+    scope: 'area' | 'profile';
+    anchor: HTMLButtonElement;
+    originalEvent: MouseEvent;
+}
+export declare class CardSettingsScope {
+    /** Current product area or the label for the combined settings view. */
+    areaLabel: string;
+    /** Current organization or settings profile. */
+    profileLabel: string;
+    /** Sentence prefix, supplied separately for localization. */
+    managingLabel: string;
+    /** Sentence connector, supplied separately for localization. */
+    forLabel: string;
+    /** Accessible name for this context region. */
+    scopeLabel: string;
+    /** ID of the application-owned product-area menu. */
+    areaControls: string | undefined;
+    /** ID of the application-owned profiles popup. */
+    profileControls: string | undefined;
+    /** Whether the product-area menu is open. */
+    areaExpanded: boolean;
+    /** Whether the profiles popup is open. */
+    profileExpanded: boolean;
+    /** Empty informational profile popups use dialog semantics instead of a menu. */
+    profilePopup: 'menu' | 'dialog';
+    /** Requests a popup; the owner supplies choices, open state, and selection. */
+    dsScopeRequest: EventEmitter<SettingsScopeRequest>;
+    private request;
+    render(): any;
+}
+//# sourceMappingURL=CardSettingsScope.d.ts.map

package/dist/types/components/CardSettingsScope/index.d.ts

@@ -0,0 +1,2 @@
+export type { SettingsScopeRequest } from './CardSettingsScope';
+//# sourceMappingURL=index.d.ts.map

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

@@ -34,6 +34,8 @@ export declare class Menu {
     initialFocusVisible: boolean;
     /** Accessible name for the popup menu. */
     menuLabel: string;
+    /** Informational message shown when there are no choices. Uses a non-modal dialog, not a fake menu item. */
+    emptyMessage: string;
     private shouldRender;
     private closing;
     private pos;
@@ -66,6 +68,8 @@ export declare class Menu {
     /** Last content actually painted while open; retained unchanged through exit motion. */
     private lastRenderedSections;
     private closingSections;
+    private readonly emptyMessageId;
+    private lastRenderedEmptyMessage;
     componentDidLoad(): void;
     disconnectedCallback(): void;
     onOpenChange(isOpen: boolean): void;

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

@@ -5,6 +5,8 @@ import type { MobileBarNavDestinationDetail } from './mobile-bar-nav-types';
 export declare class MobileBarNav {
     el: HTMLElement;
     activeDestination: MobileDestination;
+    /** Context destination retained while a different global tool is active. */
+    primaryDestination: 'area' | 'help';
     currentArea: PanelNavItem;
     sheetNavExpanded: boolean;
     menuLabel: string;

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

@@ -23,6 +23,8 @@ export declare class MobileHeader {
     subvalue: string;
     /** Accessible name for the child-section chooser. */
     subsectionsAriaLabel: string;
+    /** Place local sections below, beside, or combined with the page title in one sheet trigger. */
+    subsectionsPlacement: 'below' | 'inline' | 'combined';
     /** Default page chrome or bold-brand workflow chrome. */
     tone: MobileHeaderTone;
     /** Section selection intent. */
@@ -35,5 +37,6 @@ export declare class MobileHeader {
     private handleSectionChange;
     private handleSubsectionChange;
     render(): any;
+    private renderSubsections;
 }
 //# sourceMappingURL=MobileHeader.d.ts.map

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

@@ -8,14 +8,32 @@ export declare class MobileSectionSwitcher {
     value: string;
     /** Accessible name for the section chooser. */
     navigationLabel: string;
+    /** Anchored local-view menu or viewport-edge sheet for primary page sections. */
+    presentation: 'menu' | 'sheet';
+    /** Stable page identity shown before the selected section in a sheet trigger. */
+    pageLabel: string;
     /** Selection intent. The route, tool, or workflow owner updates `value`. */
     dsChange: EventEmitter<string>;
     private menuOpen;
+    private menuSurfaceOpen;
     private initialFocusVisible;
+    private sheetClosing;
+    private focusedSection;
     private readonly instanceId;
     private readonly triggerId;
     private readonly menuId;
     private triggerEl;
+    private dialogEl;
+    private closeTimer;
+    private visibilityObserver?;
+    componentDidLoad(): void;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    handlePresentationChange(): void;
+    handleContextChange(): void;
+    private finishSheetClose;
+    private focusSheetItem;
+    private handleSheetKeyDown;
     private get resolvedSections();
     private get selectableSections();
     private get selectedIndex();
@@ -27,6 +45,7 @@ export declare class MobileSectionSwitcher {
     handleSectionsChange(): void;
     private toggleMenu;
     private closeMenu;
+    private renderSheet;
     private handleSelect;
     render(): any;
 }

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

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import type { NavChromeStyle } from '../../shell/nav-chrome';
-import type { PanelNavGroup } from '../PanelNav/panel-nav-types';
+import type { PanelNavChildSelectDetail, PanelNavGroup, PanelNavPresentation } from '../PanelNav/panel-nav-types';
 export declare class MobileSheetNav {
     el: HTMLElement;
     open: boolean;
@@ -8,6 +8,8 @@ export declare class MobileSheetNav {
     dashboardGroups: PanelNavGroup[];
     settingsGroups: PanelNavGroup[];
     currentUrl: string;
+    /** Flat area navigation or inline disclosure of each area's child routes. */
+    presentation: PanelNavPresentation;
     /** Whether the router-derived current area owns the active mobile stage. */
     routeSelectionActive: boolean;
     navigationLabel: string;
@@ -18,14 +20,25 @@ export declare class MobileSheetNav {
     /** Show the optional Account shortcut in the sheet header. */
     showAccount: boolean;
     dsAreaSelect: EventEmitter<string>;
+    /** Selecting a child requests routing; expanding its parent never navigates. */
+    dsNavChildSelect: EventEmitter<PanelNavChildSelectDetail>;
     dsBrowseContextChange: EventEmitter<NavChromeStyle>;
     dsClose: EventEmitter<void>;
+    private expandedParentId;
+    private readonly instanceId;
     private get groups();
-    private get activeId();
+    private get selection();
+    componentWillLoad(): void;
+    syncExpandedParent(): void;
     handleOpenChange(open: boolean): void;
     handleKeyDown(event: KeyboardEvent): void;
     private handleContextChange;
     private renderItem;
+    private parentId;
+    private childrenId;
+    private renderChild;
+    private renderBranchDivider;
+    private renderBranch;
     private renderLogo;
     private renderHeaderDestination;
     render(): any;

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

@@ -40,8 +40,11 @@ export declare class PanelNav {
     dashboardLabel: string;
     settingsLabel: string;
     accountLabel: string;
-    /** Keep the account-menu trigger visually pressed while its popup is open or closing. */
+    /** Account disclosure state. Expanded-derived styling is deprecated; use accountMenuSurfaceOpen for the rendered lifetime. */
     accountMenuExpanded: boolean;
+    /** External account surface is visible, including exit motion. Omission
+     * preserves the deprecated accountMenuExpanded-derived wash. */
+    accountMenuSurfaceOpen: boolean | undefined;
     dashboardNavigationLabel: string;
     settingsNavigationLabel: string;
     expandNavigationLabel: string;

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

@@ -20,6 +20,8 @@ export declare class PanelToolHeader {
     menuControls: string | undefined;
     /** Whether the controlled menu is open. */
     menuExpanded: boolean;
+    /** Associated menu surface is visible, including exit motion. */
+    menuSurfaceOpen: boolean | undefined;
     /** Trailing application-owned icon actions. When present, these replace the legacy menu action. */
     actions: PanelToolsHeaderAction[];
     dsBack: EventEmitter<MouseEvent>;

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

@@ -21,6 +21,8 @@ export declare class PanelToolSearch {
     filterControls: string | undefined;
     /** Whether the controlled filter menu is open. */
     filterExpanded: boolean;
+    /** Associated filter surface is visible, including exit motion. */
+    filterSurfaceOpen: boolean | undefined;
     /** Promote the trigger foreground when one or more filters are applied. */
     filterActive: boolean;
     dsChange: EventEmitter<string>;

package/dist/types/components/PanelTools/panel-tools-types.d.ts

@@ -113,6 +113,8 @@ export interface PanelToolsHeaderAction {
     triggerId?: string;
     controls?: string;
     expanded?: boolean;
+    /** Associated surface remains visible, including exit motion. */
+    surfaceOpen?: boolean;
     haspopup?: 'menu' | 'dialog' | 'listbox' | 'tree' | 'grid';
     pressed?: boolean;
     isInactive?: boolean;

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

@@ -14,7 +14,7 @@ export declare class ShellApp {
     composition: ShellAppComposition;
     /** Router-owned navigation data used by managed composition. */
     navigation: ShellNavigationConfig;
-    /** Desktop/tablet route sections in BarNav, or nested beneath PanelNav parents. */
+    /** Route sections in bar/header pickers, or nested beneath desktop and mobile menu parents. */
     sectionNavigation: ShellSectionNavigation;
     /** Route-owned page title and section data used by managed composition. */
     pageChrome: ShellPageChromeConfig;
@@ -86,10 +86,12 @@ export declare class ShellApp {
     private managedActiveTool;
     private managedToolPresentation;
     private managedMobileDestination;
+    private managedMobilePrimaryDestination;
     private managedMobileSheetNavOpen;
     private managedInboxTool;
     private managedBrowseContext;
     private mobileActionMenuOpen;
+    private mobileActionSurfaceOpen;
     private mobileActionMenuInitialFocusVisible;
     private readonly instanceId;
     private readonly mobileActionMenuTriggerId;
@@ -119,7 +121,7 @@ export declare class ShellApp {
     }>): void;
     disconnectedCallback(): void;
     onShellPropsChange(): void;
-    handleNavigationChange(): void;
+    handleNavigationChange(next: ShellNavigationConfig, previous: ShellNavigationConfig): void;
     handlePageChromeChange(): void;
     handleToolsChange(): void;
     onMobileStateChange(_next: unknown, previous: unknown): void;
@@ -173,6 +175,7 @@ export declare class ShellApp {
     private activateManagedMobileTool;
     private handleManagedMobileDestination;
     private handleManagedAreaSelect;
+    private handleManagedMobileChildSelect;
     private handleManagedBrowseContext;
     private handleManagedSheetClose;
     private handleManagedNavFooterAction;

package/dist/types/components/ShellApp/shell-app-types.d.ts

@@ -32,6 +32,8 @@ export interface ShellNavigationConfig {
     userName?: string;
     userInitial?: string;
     accountMenuExpanded?: boolean;
+    /** Associated account surface remains visible, including exit motion. */
+    accountMenuSurfaceOpen?: boolean;
     dashboardLabel?: string;
     settingsLabel?: string;
     accountLabel?: string;