@ds-mo/ui 13.11.1 → 13.12.0

package/dist/lib/components/MobileHeader/mobile-header-types.d.ts

@@ -1,4 +1,5 @@
-import type { TabItem } from '../TabGroup/tab-item-utils';
+import type { TabGroupItem } from '../TabGroup/tab-item-utils';
 export type MobileHeaderTone = 'default' | 'brand';
 export type MobileHeaderHeadingLevel = 'h1' | 'h2';
-export type MobileHeaderSectionItem = TabItem;
+export type MobileHeaderSectionsPresentation = 'switcher' | 'segmented';
+export type MobileHeaderSectionItem = TabGroupItem;

package/dist/mcp-data/registry/mobile-header.json

@@ -23,6 +23,7 @@
       ],
       "commonlyComposedWith": [
         "component:ds-mobile-section-switcher",
+        "component:ds-tab-group",
         "component:ds-shell-page",
         "component:ds-shell-tools"
       ],
@@ -31,19 +32,19 @@
       ],
       "accessibility": [
         "Static screens render a real h1 or h2 according to headingLevel.",
-        "Section-switching screens expose an equivalent semantic heading alongside the accessible popup trigger.",
+        "Section-switching screens expose an equivalent semantic heading alongside the accessible popup trigger or named segmented TabGroup.",
         "Subsections use a separately named navigation landmark and never replace the semantic page identity.",
         "Leading and trailing slotted icon actions retain their own accessible names and tooltips."
       ],
       "states": [
         "Without multiple sections the center renders heading.",
-        "With multiple sections the center renders the controlled MobileSectionSwitcher.",
+        "With multiple sections the center renders the controlled MobileSectionSwitcher by default or an explicitly requested segmented TabGroup.",
         "Optional subsections render in a second row and emit dsSubsectionChange without changing the primary section.",
         "Sections represent peer destinations at the current navigation level; subsections represent local views beneath the selected page or detail identity.",
         "Brand tone changes surface and foreground without changing geometry or interaction ownership."
       ],
       "responsiveBehavior": [
-        "The primary 48px lane is dedicated to the below-768px presentation; optional subsections add one subordinate 48px lane.",
+        "The primary 56px lane matches the Mobile Sheet Nav header and Mobile Bar Nav; optional subsections add one subordinate 48px lane.",
         "Equal flexible side lanes keep the center mathematically aligned when actions are asymmetric."
       ],
       "references": [
@@ -74,8 +75,8 @@
           "description": "Semantic heading level for the active mobile screen."
         },
         "sections": {
-          "type": "TabItem[]",
-          "resolvedType": "TabItem[]",
+          "type": "TabGroupItem[]",
+          "resolvedType": "TabGroupItem[]",
           "default": "[]",
           "required": false,
           "mutable": false,
@@ -90,6 +91,24 @@
           "mutable": false,
           "description": "Accessible name for the section chooser."
         },
+        "sectionsPresentation": {
+          "type": "MobileHeaderSectionsPresentation",
+          "resolvedType": "\"segmented\" | \"switcher\"",
+          "attribute": "sections-presentation",
+          "default": "'switcher'",
+          "required": false,
+          "mutable": false,
+          "description": "Popup switcher or an inline segmented TabGroup for peer sections."
+        },
+        "sectionsSize": {
+          "type": "TabGroupSize",
+          "resolvedType": "\"lg\" | \"md\" | \"sm\"",
+          "attribute": "sections-size",
+          "default": "'md'",
+          "required": false,
+          "mutable": false,
+          "description": "Density for the segmented sections presentation."
+        },
         "subsections": {
           "type": "TabItem[]",
           "resolvedType": "TabItem[]",
@@ -176,8 +195,8 @@
         "description": "Semantic heading level for the active mobile screen."
       },
       "sections": {
-        "type": "TabItem[]",
-        "resolvedType": "TabItem[]",
+        "type": "TabGroupItem[]",
+        "resolvedType": "TabGroupItem[]",
         "default": "[]",
         "required": false,
         "mutable": false,
@@ -192,6 +211,24 @@
         "mutable": false,
         "description": "Accessible name for the section chooser."
       },
+      "sectionsPresentation": {
+        "type": "MobileHeaderSectionsPresentation",
+        "resolvedType": "\"segmented\" | \"switcher\"",
+        "attribute": "sections-presentation",
+        "default": "'switcher'",
+        "required": false,
+        "mutable": false,
+        "description": "Popup switcher or an inline segmented TabGroup for peer sections."
+      },
+      "sectionsSize": {
+        "type": "TabGroupSize",
+        "resolvedType": "\"lg\" | \"md\" | \"sm\"",
+        "attribute": "sections-size",
+        "default": "'md'",
+        "required": false,
+        "mutable": false,
+        "description": "Density for the segmented sections presentation."
+      },
       "subsections": {
         "type": "TabItem[]",
         "resolvedType": "TabItem[]",
@@ -293,22 +330,23 @@
   ],
   "registryDependencies": [
     "mobile-section-switcher",
+    "tab-group",
     "text"
   ],
   "files": [
     {
       "path": "src/wc/components/MobileHeader/MobileHeader.css",
-      "content": "@import '../../utils/chrome-layout.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  box-sizing: border-box;\n  background: var(--color-background-primary);\n  color: var(--color-foreground-primary);\n}\n\n:host([tone='brand']) {\n  background: var(--color-background-bold-brand);\n  color: var(--color-foreground-on-bold);\n}\n\n.mobile-header {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n  background: inherit;\n  color: inherit;\n}\n\n.mobile-header__primary {\n  grid-template-columns: minmax(var(--dimension-size-400), 1fr) minmax(0, auto) minmax(var(--dimension-size-400), 1fr);\n  width: 100%;\n  height: var(--dimension-size-600);\n  min-width: 0;\n  background: inherit;\n  color: inherit;\n}\n\n:host(:not([tone='brand'])) .mobile-header::after {\n  content: '';\n  position: absolute;\n  inset-inline: 0;\n  inset-block-end: 0;\n  height: var(--dimension-stroke-width-012);\n  background: var(--color-border-tertiary);\n  pointer-events: none;\n}\n\n.mobile-header__subsections {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 0;\n  height: var(--dimension-size-600);\n  padding: var(--dimension-space-100) var(--dimension-space-200);\n  box-sizing: border-box;\n}\n\n.mobile-header__subsections ds-mobile-section-switcher {\n  min-width: 0;\n  max-width: 100%;\n}\n\n.mobile-header__lane {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n}\n\n.mobile-header__lane--leading {\n  justify-content: flex-start;\n}\n\n.mobile-header__lane--trailing {\n  justify-content: flex-end;\n}\n\n.mobile-header__center {\n  position: relative;\n  min-width: 0;\n  max-width: 100%;\n  justify-self: center;\n}\n\n.mobile-header__heading {\n  display: block;\n  min-width: 0;\n  max-width: 100%;\n  text-align: center;\n}\n\n.mobile-header__semantic-heading {\n  position: absolute;\n  width: var(--dimension-stroke-width-012);\n  height: var(--dimension-stroke-width-012);\n  padding: 0;\n  margin: calc(var(--dimension-stroke-width-012) * -1);\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n::slotted([slot='leading']),\n::slotted([slot='trailing']) {\n  flex: 0 0 auto;\n}\n",
+      "content": "@import '../../utils/chrome-layout.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  box-sizing: border-box;\n  background: var(--color-background-primary);\n  color: var(--color-foreground-primary);\n}\n\n:host([tone='brand']) {\n  background: var(--color-background-bold-brand);\n  color: var(--color-foreground-on-bold);\n}\n\n.mobile-header {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n  background: inherit;\n  color: inherit;\n}\n\n.mobile-header__primary {\n  grid-template-columns: minmax(var(--dimension-size-400), 1fr) minmax(0, auto) minmax(var(--dimension-size-400), 1fr);\n  width: 100%;\n  height: calc(var(--dimension-size-500) + var(--dimension-space-200));\n  min-width: 0;\n  background: inherit;\n  color: inherit;\n}\n\n:host(:not([tone='brand'])) .mobile-header::after {\n  content: '';\n  position: absolute;\n  inset-inline: 0;\n  inset-block-end: 0;\n  height: var(--dimension-stroke-width-012);\n  background: var(--color-border-tertiary);\n  pointer-events: none;\n}\n\n.mobile-header__subsections {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 0;\n  height: var(--dimension-size-600);\n  padding: var(--dimension-space-100) var(--dimension-space-200);\n  box-sizing: border-box;\n}\n\n.mobile-header__subsections ds-mobile-section-switcher {\n  min-width: 0;\n  max-width: 100%;\n}\n\n.mobile-header__lane {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n}\n\n.mobile-header__lane--leading {\n  justify-content: flex-start;\n}\n\n.mobile-header__lane--trailing {\n  justify-content: flex-end;\n}\n\n.mobile-header__center {\n  position: relative;\n  min-width: 0;\n  max-width: 100%;\n  justify-self: center;\n}\n\n.mobile-header__heading {\n  display: block;\n  min-width: 0;\n  max-width: 100%;\n  text-align: center;\n}\n\n.mobile-header__semantic-heading {\n  position: absolute;\n  width: var(--dimension-stroke-width-012);\n  height: var(--dimension-stroke-width-012);\n  padding: 0;\n  margin: calc(var(--dimension-stroke-width-012) * -1);\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n::slotted([slot='leading']),\n::slotted([slot='trailing']) {\n  flex: 0 0 auto;\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/MobileHeader/MobileHeader.tsx",
-      "content": "import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { getSelectableTabs, type TabItem } from '../TabGroup/tab-item-utils';\nimport type {\n  MobileHeaderHeadingLevel,\n  MobileHeaderTone,\n} from './mobile-header-types';\n\n@Component({\n  tag: 'ds-mobile-header',\n  styleUrl: 'MobileHeader.css',\n  scoped: true,\n})\nexport class MobileHeader {\n  /** Static title used when no peer sections are supplied. */\n  @Prop() heading: string = '';\n  /** Semantic heading level for the active mobile screen. */\n  @Prop() headingLevel: MobileHeaderHeadingLevel = 'h1';\n  /** Controlled peer sections. Their selected label replaces the static title. */\n  @Prop() sections: TabItem[] = [];\n  /** Controlled selected section id. */\n  @Prop() value: string = '';\n  /** Accessible name for the section chooser. */\n  @Prop() sectionsAriaLabel: string = 'Change page section';\n  /** Controlled child sections within the selected page or detail screen. */\n  @Prop() subsections: TabItem[] = [];\n  /** Controlled selected child-section id. */\n  @Prop() subvalue: string = '';\n  /** Accessible name for the child-section chooser. */\n  @Prop() subsectionsAriaLabel: string = 'Change page subsection';\n  /** Default page chrome or bold-brand workflow chrome. */\n  @Prop({ reflect: true }) tone: MobileHeaderTone = 'default';\n\n  /** Section selection intent. */\n  @Event() dsSectionChange!: EventEmitter<string>;\n  /** Child-section selection intent. */\n  @Event() dsSubsectionChange!: EventEmitter<string>;\n\n  private get resolvedSections(): TabItem[] {\n    return this.sections ?? [];\n  }\n\n  private get resolvedSubsections(): TabItem[] {\n    return this.subsections ?? [];\n  }\n\n  private get selectedLabel(): string {\n    const selectable = getSelectableTabs(this.resolvedSections);\n    return selectable.find(section => section.id === this.value)?.label ??\n      selectable[0]?.label ??\n      this.heading;\n  }\n\n  private handleSectionChange = (event: CustomEvent<string>) => {\n    event.stopPropagation();\n    this.dsSectionChange.emit(event.detail);\n  };\n\n  private handleSubsectionChange = (event: CustomEvent<string>) => {\n    event.stopPropagation();\n    this.dsSubsectionChange.emit(event.detail);\n  };\n\n  render() {\n    const Heading = this.headingLevel;\n    const selectable = getSelectableTabs(this.resolvedSections);\n    const hasSwitcher = selectable.length > 1;\n    const hasSubsections = getSelectableTabs(this.resolvedSubsections).length > 1;\n    const foreground = this.tone === 'brand' ? 'on-bold' : 'primary';\n\n    return (\n      <Host>\n        <header class=\"mobile-header\">\n          <div class=\"mobile-header__primary ds-chrome-grid ds-chrome-space--md\">\n            <div class=\"mobile-header__lane mobile-header__lane--leading\">\n              <slot name=\"leading\" />\n            </div>\n            <div class=\"mobile-header__center\">\n              {hasSwitcher ? (\n                [\n                  <span\n                    class=\"mobile-header__semantic-heading\"\n                    role=\"heading\"\n                    aria-level={this.headingLevel === 'h1' ? '1' : '2'}\n                  >\n                    {this.selectedLabel}\n                  </span>,\n                  <ds-mobile-section-switcher\n                    sections={this.resolvedSections}\n                    value={this.value}\n                    navigationLabel={this.sectionsAriaLabel}\n                    onDsChange={this.handleSectionChange}\n                  />,\n                ]\n              ) : (\n                <ds-text\n                  class=\"mobile-header__heading\"\n                  as={Heading}\n                  variant=\"text-body-medium\"\n                  emphasis\n                  color={foreground}\n                  lineTruncation={1}\n                >\n                  {this.selectedLabel}\n                </ds-text>\n              )}\n            </div>\n            <div class=\"mobile-header__lane mobile-header__lane--trailing\">\n              <slot name=\"trailing\" />\n            </div>\n          </div>\n          {hasSubsections ? (\n            <nav class=\"mobile-header__subsections\" aria-label={this.subsectionsAriaLabel}>\n              <ds-mobile-section-switcher\n                sections={this.resolvedSubsections}\n                value={this.subvalue}\n                navigationLabel={this.subsectionsAriaLabel}\n                onDsChange={this.handleSubsectionChange}\n              />\n            </nav>\n          ) : null}\n        </header>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport {\n  getSelectableTabs,\n  type TabGroupItem,\n  type TabItem,\n} from '../TabGroup/tab-item-utils';\nimport type { TabGroupSize } from '../TabGroup/TabGroup';\nimport type {\n  MobileHeaderHeadingLevel,\n  MobileHeaderSectionsPresentation,\n  MobileHeaderTone,\n} from './mobile-header-types';\n\n@Component({\n  tag: 'ds-mobile-header',\n  styleUrl: 'MobileHeader.css',\n  scoped: true,\n})\nexport class MobileHeader {\n  /** Static title used when no peer sections are supplied. */\n  @Prop() heading: string = '';\n  /** Semantic heading level for the active mobile screen. */\n  @Prop() headingLevel: MobileHeaderHeadingLevel = 'h1';\n  /** Controlled peer sections. Their selected label replaces the static title. */\n  @Prop() sections: TabGroupItem[] = [];\n  /** Controlled selected section id. */\n  @Prop() value: string = '';\n  /** Accessible name for the section chooser. */\n  @Prop() sectionsAriaLabel: string = 'Change page section';\n  /** Popup switcher or an inline segmented TabGroup for peer sections. */\n  @Prop() sectionsPresentation: MobileHeaderSectionsPresentation = 'switcher';\n  /** Density for the segmented sections presentation. */\n  @Prop() sectionsSize: TabGroupSize = 'md';\n  /** Controlled child sections within the selected page or detail screen. */\n  @Prop() subsections: TabItem[] = [];\n  /** Controlled selected child-section id. */\n  @Prop() subvalue: string = '';\n  /** Accessible name for the child-section chooser. */\n  @Prop() subsectionsAriaLabel: string = 'Change page subsection';\n  /** Default page chrome or bold-brand workflow chrome. */\n  @Prop({ reflect: true }) tone: MobileHeaderTone = 'default';\n\n  /** Section selection intent. */\n  @Event() dsSectionChange!: EventEmitter<string>;\n  /** Child-section selection intent. */\n  @Event() dsSubsectionChange!: EventEmitter<string>;\n\n  private get resolvedSections(): TabGroupItem[] {\n    return this.sections ?? [];\n  }\n\n  private get resolvedSubsections(): TabItem[] {\n    return this.subsections ?? [];\n  }\n\n  private get selectedLabel(): string {\n    const selectable = getSelectableTabs(this.resolvedSections);\n    return selectable.find(section => section.id === this.value)?.label ??\n      selectable[0]?.label ??\n      this.heading;\n  }\n\n  private handleSectionChange = (event: CustomEvent<string>) => {\n    event.stopPropagation();\n    this.dsSectionChange.emit(event.detail);\n  };\n\n  private handleSubsectionChange = (event: CustomEvent<string>) => {\n    event.stopPropagation();\n    this.dsSubsectionChange.emit(event.detail);\n  };\n\n  render() {\n    const Heading = this.headingLevel;\n    const selectable = getSelectableTabs(this.resolvedSections);\n    const hasSwitcher = selectable.length > 1;\n    const hasSubsections = getSelectableTabs(this.resolvedSubsections).length > 1;\n    const foreground = this.tone === 'brand' ? 'on-bold' : 'primary';\n\n    return (\n      <Host>\n        <header class=\"mobile-header\">\n          <div class=\"mobile-header__primary ds-chrome-grid ds-chrome-space--md\">\n            <div class=\"mobile-header__lane mobile-header__lane--leading\">\n              <slot name=\"leading\" />\n            </div>\n            <div class=\"mobile-header__center\">\n              {hasSwitcher ? (\n                [\n                  <span\n                    class=\"mobile-header__semantic-heading\"\n                    role=\"heading\"\n                    aria-level={this.headingLevel === 'h1' ? '1' : '2'}\n                  >\n                    {this.selectedLabel}\n                  </span>,\n                  this.sectionsPresentation === 'segmented' ? (\n                    <ds-tab-group\n                      tabs={this.resolvedSections}\n                      value={this.value}\n                      size={this.sectionsSize}\n                      ariaLabel={this.sectionsAriaLabel}\n                      onDsChange={this.handleSectionChange}\n                    />\n                  ) : (\n                    <ds-mobile-section-switcher\n                      sections={this.resolvedSections}\n                      value={this.value}\n                      navigationLabel={this.sectionsAriaLabel}\n                      onDsChange={this.handleSectionChange}\n                    />\n                  ),\n                ]\n              ) : (\n                <ds-text\n                  class=\"mobile-header__heading\"\n                  as={Heading}\n                  variant=\"text-body-medium\"\n                  emphasis\n                  color={foreground}\n                  lineTruncation={1}\n                >\n                  {this.selectedLabel}\n                </ds-text>\n              )}\n            </div>\n            <div class=\"mobile-header__lane mobile-header__lane--trailing\">\n              <slot name=\"trailing\" />\n            </div>\n          </div>\n          {hasSubsections ? (\n            <nav class=\"mobile-header__subsections\" aria-label={this.subsectionsAriaLabel}>\n              <ds-mobile-section-switcher\n                sections={this.resolvedSubsections}\n                value={this.subvalue}\n                navigationLabel={this.subsectionsAriaLabel}\n                onDsChange={this.handleSubsectionChange}\n              />\n            </nav>\n          ) : null}\n        </header>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/MobileHeader/mobile-header-types.ts",
-      "content": "import type { TabItem } from '../TabGroup/tab-item-utils';\n\nexport type MobileHeaderTone = 'default' | 'brand';\nexport type MobileHeaderHeadingLevel = 'h1' | 'h2';\nexport type MobileHeaderSectionItem = TabItem;\n\n",
+      "content": "import type { TabGroupItem } from '../TabGroup/tab-item-utils';\n\nexport type MobileHeaderTone = 'default' | 'brand';\nexport type MobileHeaderHeadingLevel = 'h1' | 'h2';\nexport type MobileHeaderSectionsPresentation = 'switcher' | 'segmented';\nexport type MobileHeaderSectionItem = TabGroupItem;\n",
       "type": "registry:ui"
     }
   ]

package/dist/mcp-data/registry/mobile-sheet-nav.json

@@ -39,7 +39,7 @@
       ],
       "responsiveBehavior": [
         "The pane fills the mobile content stage while the bottom bar remains available.",
-        "The sheet header and scrollable navigation body each use the shared 8px chrome inset; large destination controls retain their independent 40px density.",
+        "The sheet header and scrollable navigation body each use the shared 8px chrome inset; the context TabGroup and primary controls share a 40px height and 24px icon scale.",
         "Dashboard and Settings preserve their supplied visual groups with an 8px gap between destinations inside a section and a 32px gap between sections."
       ],
       "references": [
@@ -312,7 +312,7 @@
     },
     {
       "path": "src/wc/components/MobileSheetNav/MobileSheetNav.tsx",
-      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport type { NavChromeStyle } from '../../shell/nav-chrome';\nimport { deriveActiveIdFromUrl } from '../PanelNav/panel-nav-utils';\nimport type { PanelNavGroup, PanelNavItem } from '../PanelNav/panel-nav-types';\n\ntype MobileSheetNavHeaderDestinationId = 'account' | 'help';\n\nconst CONTEXT_TABS = [\n  { id: 'dashboard', label: 'Dashboard', icon: 'Dashboard', variant: 'icon' as const },\n  { id: 'settings', label: 'Settings', icon: 'Gear', variant: 'icon' as const },\n];\n\n@Component({\n  tag: 'ds-mobile-sheet-nav',\n  styleUrl: 'MobileSheetNav.css',\n  scoped: true,\n})\nexport class MobileSheetNav {\n  @Element() el!: HTMLElement;\n\n  @Prop({ reflect: true }) open: boolean = false;\n  @Prop() browseContext: NavChromeStyle = 'dashboard';\n  @Prop() dashboardGroups: PanelNavGroup[] = [];\n  @Prop() settingsGroups: PanelNavGroup[] = [];\n  @Prop() currentUrl: string = '';\n  @Prop() navigationLabel: string = 'Application navigation';\n  @Prop() dashboardLabel: string = 'Dashboard';\n  @Prop() settingsLabel: string = 'Settings';\n  @Prop() accountLabel: string = 'Account';\n  @Prop() helpLabel: string = 'Help & Support';\n\n  @Event() dsAreaSelect!: EventEmitter<string>;\n  @Event() dsBrowseContextChange!: EventEmitter<NavChromeStyle>;\n  @Event() dsClose!: EventEmitter<void>;\n\n  private get groups(): PanelNavGroup[] {\n    return this.browseContext === 'settings' ? this.settingsGroups : this.dashboardGroups;\n  }\n\n  private get activeId(): string {\n    return deriveActiveIdFromUrl(this.currentUrl, [\n      ...this.dashboardGroups.flatMap(group => group.items),\n      ...this.settingsGroups.flatMap(group => group.items),\n    ]);\n  }\n\n  @Watch('open')\n  handleOpenChange(open: boolean) {\n    if (!open) return;\n    requestAnimationFrame(() => {\n      const selected = this.el.querySelector<HTMLElement>('[aria-current=\"page\"]');\n      const first = this.el.querySelector<HTMLElement>('.mobile-sheet-nav__item');\n      (selected ?? first)?.focus({ preventScroll: true });\n    });\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.open || event.key !== 'Escape') return;\n    event.preventDefault();\n    this.dsClose.emit();\n  }\n\n  private handleContextChange = (event: CustomEvent<string>) => {\n    const next = event.detail === 'settings' ? 'settings' : 'dashboard';\n    if (next === this.browseContext) return;\n    this.dsBrowseContextChange.emit(next);\n  };\n\n  private renderItem(item: PanelNavItem) {\n    const selected = item.id === this.activeId;\n    return (\n      <button\n        type=\"button\"\n        class={{\n          'mobile-sheet-nav__item': true,\n          'mobile-sheet-nav__item--selected': selected,\n          'ds-control--lg': true,\n          'ds-focus-ring-inset': true,\n          'ds-interaction-fill': true,\n        }}\n        aria-current={selected ? 'page' : undefined}\n        onClick={() => this.dsAreaSelect.emit(item.id)}\n      >\n        <ds-icon\n          class=\"ds-interaction-fill__content\"\n          name={item.icon}\n          size=\"lg\"\n          color=\"inherit\"\n        />\n        <ds-text\n          class=\"mobile-sheet-nav__item-label ds-interaction-fill__content\"\n          as=\"span\"\n          variant=\"text-body-large\"\n          emphasis={selected}\n          color=\"inherit\"\n        >\n          {item.label}\n        </ds-text>\n        {item.dot && (\n          <ds-badge\n            class=\"mobile-sheet-nav__dot ds-interaction-fill__content\"\n            variant=\"dot\"\n            hasRing={false}\n            label=\"\"\n            aria-hidden=\"true\"\n          />\n        )}\n      </button>\n    );\n  }\n\n  private renderLogo() {\n    return (\n      <span class=\"mobile-sheet-nav__logo\" aria-hidden=\"true\">\n        {/* eslint-disable-next-line local/prefer-ds-icon -- Motive brand mark is not part of the IcoMo runtime catalog. */}\n        <svg\n          class=\"mobile-sheet-nav__logo-mark\"\n          viewBox=\"0 0 20 20\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          focusable=\"false\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </span>\n    );\n  }\n\n  private renderHeaderDestination(\n    id: MobileSheetNavHeaderDestinationId,\n    icon: string,\n    label: string\n  ) {\n    return (\n      <ds-tooltip label={label} side=\"bottom\" size=\"sm\">\n        <ds-button-unfilled\n          variant=\"icon\"\n          size=\"lg\"\n          icon={icon}\n          aria-label={label}\n          activeFill={false}\n          hasBorder={false}\n          onDsClick={() => this.dsAreaSelect.emit(id)}\n        />\n      </ds-tooltip>\n    );\n  }\n\n  render() {\n    const contextTabs = [\n      { ...CONTEXT_TABS[0], label: this.dashboardLabel },\n      { ...CONTEXT_TABS[1], label: this.settingsLabel },\n    ];\n\n    return (\n      <Host aria-hidden={this.open ? undefined : 'true'} inert={this.open ? undefined : true}>\n        <section\n          id=\"ds-mobile-sheet-nav\"\n          class=\"mobile-sheet-nav\"\n        >\n          <header class=\"mobile-sheet-nav__header ds-chrome-grid ds-chrome-space--md\">\n            <div class=\"mobile-sheet-nav__brand\">{this.renderLogo()}</div>\n            <ds-tab-group\n              class=\"mobile-sheet-nav__context\"\n              tabs={contextTabs}\n              value={this.browseContext}\n              aria-label=\"Browse context\"\n              onDsChange={this.handleContextChange}\n            />\n            <div class=\"mobile-sheet-nav__actions\">\n              {this.renderHeaderDestination('help', 'CircleQuestion', this.helpLabel)}\n              {this.renderHeaderDestination('account', 'Avatar', this.accountLabel)}\n            </div>\n          </header>\n\n          <nav\n            class=\"mobile-sheet-nav__body ds-chrome-column ds-chrome-space--md\"\n            aria-label={this.navigationLabel}\n          >\n            <div class=\"mobile-sheet-nav__sections\">\n              {this.groups\n                .filter(group => group.items.length > 0)\n                .map(group => (\n                  <div class=\"mobile-sheet-nav__items\">\n                    {group.items.map(item => this.renderItem(item))}\n                  </div>\n                ))}\n            </div>\n          </nav>\n        </section>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport type { NavChromeStyle } from '../../shell/nav-chrome';\nimport { deriveActiveIdFromUrl } from '../PanelNav/panel-nav-utils';\nimport type { PanelNavGroup, PanelNavItem } from '../PanelNav/panel-nav-types';\n\ntype MobileSheetNavHeaderDestinationId = 'account' | 'help';\n\nconst CONTEXT_TABS = [\n  { id: 'dashboard', label: 'Dashboard', icon: 'Dashboard', variant: 'icon' as const },\n  { id: 'settings', label: 'Settings', icon: 'Gear', variant: 'icon' as const },\n];\n\n@Component({\n  tag: 'ds-mobile-sheet-nav',\n  styleUrl: 'MobileSheetNav.css',\n  scoped: true,\n})\nexport class MobileSheetNav {\n  @Element() el!: HTMLElement;\n\n  @Prop({ reflect: true }) open: boolean = false;\n  @Prop() browseContext: NavChromeStyle = 'dashboard';\n  @Prop() dashboardGroups: PanelNavGroup[] = [];\n  @Prop() settingsGroups: PanelNavGroup[] = [];\n  @Prop() currentUrl: string = '';\n  @Prop() navigationLabel: string = 'Application navigation';\n  @Prop() dashboardLabel: string = 'Dashboard';\n  @Prop() settingsLabel: string = 'Settings';\n  @Prop() accountLabel: string = 'Account';\n  @Prop() helpLabel: string = 'Help & Support';\n\n  @Event() dsAreaSelect!: EventEmitter<string>;\n  @Event() dsBrowseContextChange!: EventEmitter<NavChromeStyle>;\n  @Event() dsClose!: EventEmitter<void>;\n\n  private get groups(): PanelNavGroup[] {\n    return this.browseContext === 'settings' ? this.settingsGroups : this.dashboardGroups;\n  }\n\n  private get activeId(): string {\n    return deriveActiveIdFromUrl(this.currentUrl, [\n      ...this.dashboardGroups.flatMap(group => group.items),\n      ...this.settingsGroups.flatMap(group => group.items),\n    ]);\n  }\n\n  @Watch('open')\n  handleOpenChange(open: boolean) {\n    if (!open) return;\n    requestAnimationFrame(() => {\n      const selected = this.el.querySelector<HTMLElement>('[aria-current=\"page\"]');\n      const first = this.el.querySelector<HTMLElement>('.mobile-sheet-nav__item');\n      (selected ?? first)?.focus({ preventScroll: true });\n    });\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.open || event.key !== 'Escape') return;\n    event.preventDefault();\n    this.dsClose.emit();\n  }\n\n  private handleContextChange = (event: CustomEvent<string>) => {\n    const next = event.detail === 'settings' ? 'settings' : 'dashboard';\n    if (next === this.browseContext) return;\n    this.dsBrowseContextChange.emit(next);\n  };\n\n  private renderItem(item: PanelNavItem) {\n    const selected = item.id === this.activeId;\n    return (\n      <button\n        type=\"button\"\n        class={{\n          'mobile-sheet-nav__item': true,\n          'mobile-sheet-nav__item--selected': selected,\n          'ds-control--lg': true,\n          'ds-focus-ring-inset': true,\n          'ds-interaction-fill': true,\n        }}\n        aria-current={selected ? 'page' : undefined}\n        onClick={() => this.dsAreaSelect.emit(item.id)}\n      >\n        <ds-icon\n          class=\"ds-interaction-fill__content\"\n          name={item.icon}\n          size=\"lg\"\n          color=\"inherit\"\n        />\n        <ds-text\n          class=\"mobile-sheet-nav__item-label ds-interaction-fill__content\"\n          as=\"span\"\n          variant=\"text-body-large\"\n          emphasis={selected}\n          color=\"inherit\"\n        >\n          {item.label}\n        </ds-text>\n        {item.dot && (\n          <ds-badge\n            class=\"mobile-sheet-nav__dot ds-interaction-fill__content\"\n            variant=\"dot\"\n            hasRing={false}\n            label=\"\"\n            aria-hidden=\"true\"\n          />\n        )}\n      </button>\n    );\n  }\n\n  private renderLogo() {\n    return (\n      <span class=\"mobile-sheet-nav__logo\" aria-hidden=\"true\">\n        {/* eslint-disable-next-line local/prefer-ds-icon -- Motive brand mark is not part of the IcoMo runtime catalog. */}\n        <svg\n          class=\"mobile-sheet-nav__logo-mark\"\n          viewBox=\"0 0 20 20\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          focusable=\"false\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </span>\n    );\n  }\n\n  private renderHeaderDestination(\n    id: MobileSheetNavHeaderDestinationId,\n    icon: string,\n    label: string\n  ) {\n    return (\n      <ds-tooltip label={label} side=\"bottom\" size=\"sm\">\n        <ds-button-unfilled\n          variant=\"icon\"\n          size=\"lg\"\n          icon={icon}\n          aria-label={label}\n          activeFill={false}\n          hasBorder={false}\n          onDsClick={() => this.dsAreaSelect.emit(id)}\n        />\n      </ds-tooltip>\n    );\n  }\n\n  render() {\n    const contextTabs = [\n      { ...CONTEXT_TABS[0], label: this.dashboardLabel },\n      { ...CONTEXT_TABS[1], label: this.settingsLabel },\n    ];\n\n    return (\n      <Host aria-hidden={this.open ? undefined : 'true'} inert={this.open ? undefined : true}>\n        <section\n          id=\"ds-mobile-sheet-nav\"\n          class=\"mobile-sheet-nav\"\n        >\n          <header class=\"mobile-sheet-nav__header ds-chrome-grid ds-chrome-space--md\">\n            <div class=\"mobile-sheet-nav__brand\">{this.renderLogo()}</div>\n            <ds-tab-group\n              class=\"mobile-sheet-nav__context\"\n              tabs={contextTabs}\n              value={this.browseContext}\n              size=\"lg\"\n              aria-label=\"Browse context\"\n              onDsChange={this.handleContextChange}\n            />\n            <div class=\"mobile-sheet-nav__actions\">\n              {this.renderHeaderDestination('help', 'CircleQuestion', this.helpLabel)}\n              {this.renderHeaderDestination('account', 'Avatar', this.accountLabel)}\n            </div>\n          </header>\n\n          <nav\n            class=\"mobile-sheet-nav__body ds-chrome-column ds-chrome-space--md\"\n            aria-label={this.navigationLabel}\n          >\n            <div class=\"mobile-sheet-nav__sections\">\n              {this.groups\n                .filter(group => group.items.length > 0)\n                .map(group => (\n                  <div class=\"mobile-sheet-nav__items\">\n                    {group.items.map(item => this.renderItem(item))}\n                  </div>\n                ))}\n            </div>\n          </nav>\n        </section>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

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

@@ -4887,6 +4887,7 @@
           ],
           "commonlyComposedWith": [
             "component:ds-mobile-section-switcher",
+            "component:ds-tab-group",
             "component:ds-shell-page",
             "component:ds-shell-tools"
           ],
@@ -4895,19 +4896,19 @@
           ],
           "accessibility": [
             "Static screens render a real h1 or h2 according to headingLevel.",
-            "Section-switching screens expose an equivalent semantic heading alongside the accessible popup trigger.",
+            "Section-switching screens expose an equivalent semantic heading alongside the accessible popup trigger or named segmented TabGroup.",
             "Subsections use a separately named navigation landmark and never replace the semantic page identity.",
             "Leading and trailing slotted icon actions retain their own accessible names and tooltips."
           ],
           "states": [
             "Without multiple sections the center renders heading.",
-            "With multiple sections the center renders the controlled MobileSectionSwitcher.",
+            "With multiple sections the center renders the controlled MobileSectionSwitcher by default or an explicitly requested segmented TabGroup.",
             "Optional subsections render in a second row and emit dsSubsectionChange without changing the primary section.",
             "Sections represent peer destinations at the current navigation level; subsections represent local views beneath the selected page or detail identity.",
             "Brand tone changes surface and foreground without changing geometry or interaction ownership."
           ],
           "responsiveBehavior": [
-            "The primary 48px lane is dedicated to the below-768px presentation; optional subsections add one subordinate 48px lane.",
+            "The primary 56px lane matches the Mobile Sheet Nav header and Mobile Bar Nav; optional subsections add one subordinate 48px lane.",
             "Equal flexible side lanes keep the center mathematically aligned when actions are asymmetric."
           ],
           "references": [
@@ -4927,13 +4928,21 @@
             "required": false
           },
           "sections": {
-            "type": "TabItem[]",
+            "type": "TabGroupItem[]",
             "required": false
           },
           "sectionsAriaLabel": {
             "type": "string",
             "required": false
           },
+          "sectionsPresentation": {
+            "type": "MobileHeaderSectionsPresentation",
+            "required": false
+          },
+          "sectionsSize": {
+            "type": "TabGroupSize",
+            "required": false
+          },
           "subsections": {
             "type": "TabItem[]",
             "required": false
@@ -4978,6 +4987,7 @@
       ],
       "registryDependencies": [
         "mobile-section-switcher",
+        "tab-group",
         "text"
       ]
     },
@@ -5106,7 +5116,7 @@
           ],
           "responsiveBehavior": [
             "The pane fills the mobile content stage while the bottom bar remains available.",
-            "The sheet header and scrollable navigation body each use the shared 8px chrome inset; large destination controls retain their independent 40px density.",
+            "The sheet header and scrollable navigation body each use the shared 8px chrome inset; the context TabGroup and primary controls share a 40px height and 24px icon scale.",
             "Dashboard and Settings preserve their supplied visual groups with an 8px gap between destinations inside a section and a 32px gap between sections."
           ],
           "references": [
@@ -6769,6 +6779,8 @@
             "On desktop, PanelNav defaults expanded, permits user collapse or expansion, and respects the locally persisted desktop preference.",
             "On tablet, ShellApp keeps PanelNav permanently collapsed and prevents user expansion without overwriting the desktop preference.",
             "On mobile, ShellApp hides and inerts desktop chrome, uses a solid primary stage, and composes MobileHeader, MobileSheetNav, ShellTools, and the persistent MobileBarNav around the same application-owned content.",
+            "Opening MobileSheetNav temporarily overlays the active routed page or global tool; closing it without selecting an area restores that same destination and its nested state.",
+            "When a suspended mobile document returns to the foreground, ShellApp refreshes the complete stage paint layer without remounting routed content or tool owners.",
             "When the application enables viewport-fit=cover, ShellApp reserves the shared top safe-area inset once for the complete mobile stage; nested routed, sheet, and tool headers must not add a second top inset.",
             "A slotted Banner remains below the top safe-area inset and above routed, navigation, fullscreen-tool, and mobile global-surface presentations.",
             "Mobile global surfaces conceal and inert the routed workspace without unmounting it, preserving nested routes and scroll state.",
@@ -7105,7 +7117,7 @@
             "component:ds-shell-app",
             "component:ds-panel-tool-header",
             "component:ds-mobile-header",
-            "component:ds-mobile-section-switcher",
+            "component:ds-tab-group",
             "component:ds-mobile-bar-nav"
           ],
           "patterns": [
@@ -7114,7 +7126,7 @@
           "accessibility": [
             "Only the active mobile tool view participates in focus or the accessibility tree.",
             "Header Back and application-owned header actions preserve the PanelTools event contract.",
-            "Inbox uses the MobileSectionSwitcher popup trigger for Stacks and Activity and never relies on a gesture-only interaction; Messages remains a direct mobile destination."
+            "Mobile Inbox uses a named label-only TabGroup for Stacks and Activity; Messages remains a direct mobile destination."
           ],
           "states": [
             "The application owns open and activeTool and replaces headers when tool depth changes.",
@@ -7124,7 +7136,7 @@
           ],
           "responsiveBehavior": [
             "Desktop and tablet compose PanelTools-compatible rail and drawer chrome.",
-            "Mobile renders one centered MobileHeader for every tool; Stacks and Activity use Inbox section titles, while Messages remains a direct tool destination."
+            "Mobile renders one centered MobileHeader for every tool; Stacks and Activity use the large segmented Inbox control, while Messages remains a direct tool destination."
           ],
           "frameworkCaveats": {
             "customElements": [
@@ -7940,6 +7952,7 @@
             "The parent owns the canonical selected value and adjacent view visibility, and should update both from dsChange.",
             "A missing, empty, inactive, or unknown selected value is invalid when enabled tabs exist; the component does not choose a fallback selection.",
             "Selection is singular and follows keyboard focus.",
+            "Small, medium, and large use the shared 24px, 32px, and 40px control-density recipes for the outer track. Each segment uses the same-size inset recipe at 20px, 28px, and 36px while preserving that density's typography, icon, gap, and label metrics.",
             "Use one consistent content variant across every selectable tab in a group.",
             "Omitted background is for primary and secondary surfaces; pass the faint context explicitly on faint surfaces.",
             "Only the omitted default context emphasizes visible selected label text and keeps the filled track; explicit faint follows the other surface contexts with a transparent track, stable text weight, surface border, and neutral active fill.",
@@ -7947,6 +7960,7 @@
           ],
           "responsiveBehavior": [
             "The component remains a single horizontal row and does not become vertical or wrap.",
+            "Use the large size when a mobile composition aligns the group with 40px shell controls; size does not change automatically at a breakpoint.",
             "The consuming layout owns narrow-width placement and overflow, or replaces the row with a more suitable navigation pattern."
           ],
           "frameworkCaveats": {
@@ -7981,6 +7995,10 @@
             "type": "TabBackground | undefined",
             "required": false
           },
+          "size": {
+            "type": "TabGroupSize",
+            "required": false
+          },
           "tabs": {
             "type": "TabGroupItem[]",
             "required": false
@@ -8014,6 +8032,264 @@
         "text"
       ]
     },
+    {
+      "name": "table",
+      "title": "Table",
+      "description": "Semantic, controlled data table with durable visual primitives for cell geometry, column geometry, grouping, sorting, multi-selection, sticky overflow, and incremental loading.",
+      "type": "registry:ui",
+      "meta": {
+        "library": "@ds-mo/ui",
+        "distribution": "npm",
+        "storybook": "https://zainadeel.github.io/compomo/?path=/story/table",
+        "source": "src/wc/components/Table/Table.tsx",
+        "intentStatus": "complete",
+        "intent": {
+          "audience": "general",
+          "status": "experimental",
+          "summary": "Semantic, controlled data table with durable visual primitives for cell geometry, column geometry, grouping, sorting, multi-selection, sticky overflow, and incremental loading.",
+          "useWhen": [
+            "A structured dataset needs native row and column relationships, optional one-level grouping, or comparable values across records.",
+            "An application needs controlled sorting, loaded-row selection, or lazy loading while retaining ownership of the data query and transformations.",
+            "A product table needs a token-backed recipe whose individual header, group, row, cell, selection, state, and load-more layers remain easy to restyle."
+          ],
+          "avoidWhen": [
+            "Content is primarily editorial prose; use semantic product-owned markup with the prose recipe instead.",
+            "A small label/value set reads more clearly as a list, description list, or card.",
+            "The interface requires tree-grid behavior, nested grouping, inline cell editing, row reordering, column pinning, or virtualization; those are outside this first contract.",
+            "The application expects the component to fetch, paginate, sort, group, or mutate records internally."
+          ],
+          "commonlyComposedWith": [
+            "component:ds-empty-state",
+            "component:ds-skeleton",
+            "component:ds-loader",
+            "component:ds-button-unfilled",
+            "component:ds-tag",
+            "component:ds-icon"
+          ],
+          "accessibility": [
+            "The rendered structure uses a native table, caption, column headers, row groups, and data cells; keep the caption non-empty even when it is visually hidden.",
+            "Sorting controls remain buttons inside column headers. Member-row sort uses aria-sort, while independent group order is described by the grouped header control.",
+            "Selection controls expose checkbox semantics and explicit row names; select-all affects selectable loaded rows only and preserves selected identities outside the loaded window.",
+            "Scrollable table regions become keyboard focusable and named only when overflow exists.",
+            "Incremental loading, newly appended row counts, failures, and end-of-results transitions are announced through a polite status region without replacing visible state."
+          ],
+          "states": [
+            "Columns, rows, groups, grouping, sorting, selected row IDs, and lazy-loading state are controlled inputs. Events communicate intent and never mutate those inputs.",
+            "Grouping supports one level. The application supplies ordered groups and ordered member rows; group order and member-row sort are independent controls.",
+            "An active member sort toggles only between ascending and descending; activating a different sortable label moves sorting to that key. Applications may still clear the controlled sort state explicitly. The grouped column toggles ascending and descending group order without clearing member sort.",
+            "Compound headers can expose multiple related labels with independent sort keys. Each label owns only its content-width interaction target while the active direction remains in the column's alignment-aware sort lane.",
+            "Initial loading uses row-shaped skeletons. Empty and initial error states remain inside the table. Incremental loading retains existing rows and supports automatic sentinel, manual load-more, retry, and terminal states.",
+            "Lazy loading replaces pagination. The application owns requests, cancellation, cursors, deduplication, appended records, and query identity; loadIdentity resets the component request guard.",
+            "Cells accept scalar content, standard primary-and-secondary or dual-primary text primitives, declarative Tag, icon-only, 16:9 Image, or ButtonUnfilled Action content, or explicit Empty and Blank absence values. Single-track text, selection, tag-only, icon-only, Action, Empty, and Blank cells resolve a 40px base contract while multi-track cells grow downward. Action cells primarily use an icon-only Ellipses treatment, render a 24px small ButtonUnfilled inside 8px padding, default to unbordered, and emit row, column, and action identities through dsCellAction. Image cells render a 52px-high bordered preview inside 6px outer padding, establishing a 64px row, and fall back to an accessible placeholder when no source is supplied. Empty means the data applies but has no value and renders an em dash with localized assistive text; Blank means the data is not applicable and renders no content. Nullish values remain backward-compatible Empty values. Stable type and variant hooks keep every cell family independently styleable.",
+            "The public @ds-mo/ui/table.css export is the authoritative zero-specificity visual recipe. Override its --ds-table-* properties or target its stable element classes for product-specific styling."
+          ],
+          "responsiveBehavior": [
+            "The table keeps native semantics at narrow widths and scrolls horizontally instead of transforming into cards.",
+            "Explicit column sizes establish the horizontal overflow width; unsized columns share remaining space.",
+            "Prefer the named xs through xl column sizes, which resolve through TokoMo's table-column width tokens; numeric pixel sizes remain an escape hatch for exceptional application-owned widths.",
+            "Column headers use one 32px geometry. Body rows use a 40px single-track minimum; cell-specific outer padding and track geometry align text, selection, Tag, icon, Action, Empty, Blank, and Image primitives while additional tracks grow downward.",
+            "Long content truncates by default and can opt into wrapping at the column or cell level."
+          ],
+          "frameworkCaveats": {
+            "customElements": [
+              "Assign columns, rows, groups, grouping, sort, and selectedRowIds through JavaScript properties rather than HTML attribute strings.",
+              "Replace controlled property values in response to dsSortChange, dsGroupingChange, dsSelectionChange, and dsLoadMore."
+            ],
+            "react": [
+              "Pass new array and state-object references when the controlled data or query state changes.",
+              "Apply emitted sort, grouping, selection, action, or loading detail to application state and perform data transformations in the owning layer."
+            ],
+            "angular": [
+              "Bind complex table inputs as properties and update the controlled values from the corresponding output events.",
+              "Keep server cursor, query lifecycle, and cell-action handling in the owning service or container."
+            ]
+          },
+          "references": [
+            {
+              "label": "Storybook review matrix",
+              "path": "src/wc/components/Table/Table.stories.ts"
+            },
+            {
+              "label": "Public visual recipe",
+              "path": "src/wc/styles/table.css"
+            }
+          ]
+        },
+        "props": {
+          "caption": {
+            "type": "string",
+            "required": true
+          },
+          "captionVisibility": {
+            "type": "TableCaptionVisibility",
+            "required": false
+          },
+          "columns": {
+            "type": "TableColumn[]",
+            "required": false
+          },
+          "emptyBody": {
+            "type": "string",
+            "required": false
+          },
+          "emptyCellLabel": {
+            "type": "string",
+            "required": false
+          },
+          "emptyHeading": {
+            "type": "string",
+            "required": false
+          },
+          "endOfResultsLabel": {
+            "type": "string",
+            "required": false
+          },
+          "error": {
+            "type": "boolean",
+            "required": false
+          },
+          "errorBody": {
+            "type": "string",
+            "required": false
+          },
+          "errorHeading": {
+            "type": "string",
+            "required": false
+          },
+          "grouping": {
+            "type": "TableGroupingState | null",
+            "required": false
+          },
+          "groups": {
+            "type": "TableGroup[]",
+            "required": false
+          },
+          "hasMore": {
+            "type": "boolean",
+            "required": false
+          },
+          "lazyLoading": {
+            "type": "boolean",
+            "required": false
+          },
+          "loadIdentity": {
+            "type": "string | number",
+            "required": false
+          },
+          "loadMoreError": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "loadMoreLabel": {
+            "type": "string",
+            "required": false
+          },
+          "loadMoreMode": {
+            "type": "TableLoadMoreMode",
+            "required": false
+          },
+          "loadMoreThreshold": {
+            "type": "number",
+            "required": false
+          },
+          "loading": {
+            "type": "boolean",
+            "required": false
+          },
+          "loadingMore": {
+            "type": "boolean",
+            "required": false
+          },
+          "loadingMoreLabel": {
+            "type": "string",
+            "required": false
+          },
+          "maxHeight": {
+            "type": "string | number | undefined",
+            "required": false
+          },
+          "retryLabel": {
+            "type": "string",
+            "required": false
+          },
+          "rows": {
+            "type": "TableRow[]",
+            "required": false
+          },
+          "rowsLoadedLabel": {
+            "type": "string",
+            "required": false
+          },
+          "scrollLabel": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "selectedRowIds": {
+            "type": "string[]",
+            "required": false
+          },
+          "selectionMode": {
+            "type": "TableSelectionMode",
+            "required": false
+          },
+          "skeletonRows": {
+            "type": "number",
+            "required": false
+          },
+          "sort": {
+            "type": "TableSortState | null",
+            "required": false
+          },
+          "stickyHeader": {
+            "type": "boolean",
+            "required": false
+          }
+        },
+        "events": [
+          {
+            "name": "dsCellAction",
+            "detail": "TableCellActionDetail"
+          },
+          {
+            "name": "dsGroupingChange",
+            "detail": "TableGroupingChangeDetail"
+          },
+          {
+            "name": "dsLoadMore",
+            "detail": "TableLoadMoreDetail"
+          },
+          {
+            "name": "dsSelectionChange",
+            "detail": "TableSelectionChangeDetail"
+          },
+          {
+            "name": "dsSortChange",
+            "detail": "TableSortChangeDetail"
+          }
+        ],
+        "slots": [],
+        "exports": {
+          "customElement": "ds-table",
+          "react": "DsTable",
+          "angular": "DsTable"
+        }
+      },
+      "dependencies": [
+        "@ds-mo/ui",
+        "@ds-mo/tokens",
+        "@ds-mo/icons"
+      ],
+      "registryDependencies": [
+        "button-unfilled",
+        "checkbox",
+        "empty-state",
+        "icon",
+        "loader",
+        "skeleton",
+        "tag",
+        "text"
+      ]
+    },
     {
       "name": "tag",
       "title": "Tag",
@@ -8078,12 +8354,13 @@
             "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.",
             "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."
           ],
           "responsiveBehavior": [
-            "The owner selects md, sm, or xs density to match its local layout and owns collection wrapping, overflow, and condensation.",
+            "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.",
             "Tag does not change size or behavior automatically at breakpoints."
           ],
           "frameworkCaveats": {
@@ -8133,6 +8410,10 @@
             "type": "boolean",
             "required": false
           },
+          "isInset": {
+            "type": "boolean",
+            "required": false
+          },
           "label": {
             "type": "string",
             "required": true