@ds-mo/ui 12.3.0 → 12.4.1

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

@@ -0,0 +1,348 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "shell-mobile-nav",
+  "title": "ShellMobileNav",
+  "description": "Full-height mobile primary navigation pane with local Dashboard and Settings browsing.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/shell-mobile-nav",
+    "source": "src/wc/components/ShellMobileNav/ShellMobileNav.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "specialized",
+      "status": "experimental",
+      "summary": "Full-height mobile primary navigation pane with local Dashboard and Settings browsing.",
+      "useWhen": [
+        "The mobile ShellApp Menu control needs to expose the complete primary navigation collection."
+      ],
+      "avoidWhen": [
+        "Rendering desktop PanelNav.",
+        "Switching local page content."
+      ],
+      "commonlyComposedWith": [
+        "component:ds-shell-app",
+        "component:ds-shell-mobile-bar"
+      ],
+      "patterns": [
+        "pattern:application-shell"
+      ],
+      "accessibility": [
+        "The pane is a named navigation landmark and retains visible labels for every destination.",
+        "Escape requests dismissal and opening moves focus to the selected or first available area."
+      ],
+      "states": [
+        "Dashboard and Settings change only the collection being browsed.",
+        "Area, Help, and Account events express intent while the application owns navigation and product behavior."
+      ],
+      "responsiveBehavior": [
+        "The pane fills the mobile content stage while the bottom bar remains available."
+      ],
+      "references": [
+        {
+          "label": "Storybook",
+          "path": "src/wc/components/ShellMobileNav/ShellMobileNav.stories.ts"
+        }
+      ]
+    },
+    "api": {
+      "props": {
+        "accountLabel": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "account-label",
+          "default": "'Account'",
+          "required": false,
+          "mutable": false
+        },
+        "browseContext": {
+          "type": "NavChromeStyle",
+          "resolvedType": "\"dashboard\" | \"settings\"",
+          "attribute": "browse-context",
+          "default": "'dashboard'",
+          "required": false,
+          "mutable": false
+        },
+        "currentUrl": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "current-url",
+          "default": "''",
+          "required": false,
+          "mutable": false
+        },
+        "dashboardGroups": {
+          "type": "PanelNavGroup[]",
+          "resolvedType": "PanelNavGroup[]",
+          "default": "[]",
+          "required": false,
+          "mutable": false
+        },
+        "dashboardLabel": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "dashboard-label",
+          "default": "'Dashboard'",
+          "required": false,
+          "mutable": false
+        },
+        "heading": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "heading",
+          "default": "'Navigation'",
+          "required": false,
+          "mutable": false
+        },
+        "helpLabel": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "help-label",
+          "default": "'Help & Support'",
+          "required": false,
+          "mutable": false
+        },
+        "navigationLabel": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "navigation-label",
+          "default": "'Application navigation'",
+          "required": false,
+          "mutable": false
+        },
+        "open": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "open",
+          "default": "false",
+          "required": false,
+          "mutable": false
+        },
+        "settingsGroups": {
+          "type": "PanelNavGroup[]",
+          "resolvedType": "PanelNavGroup[]",
+          "default": "[]",
+          "required": false,
+          "mutable": false
+        },
+        "settingsLabel": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "settings-label",
+          "default": "'Settings'",
+          "required": false,
+          "mutable": false
+        }
+      },
+      "events": [
+        {
+          "name": "dsAreaSelect",
+          "detail": "string",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true
+        },
+        {
+          "name": "dsAuxiliarySelect",
+          "detail": "ShellMobileNavAuxiliaryDetail",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true
+        },
+        {
+          "name": "dsBrowseContextChange",
+          "detail": "NavChromeStyle",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true
+        },
+        {
+          "name": "dsClose",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true
+        }
+      ],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "accountLabel": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "account-label",
+        "default": "'Account'",
+        "required": false,
+        "mutable": false
+      },
+      "browseContext": {
+        "type": "NavChromeStyle",
+        "resolvedType": "\"dashboard\" | \"settings\"",
+        "attribute": "browse-context",
+        "default": "'dashboard'",
+        "required": false,
+        "mutable": false
+      },
+      "currentUrl": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "current-url",
+        "default": "''",
+        "required": false,
+        "mutable": false
+      },
+      "dashboardGroups": {
+        "type": "PanelNavGroup[]",
+        "resolvedType": "PanelNavGroup[]",
+        "default": "[]",
+        "required": false,
+        "mutable": false
+      },
+      "dashboardLabel": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "dashboard-label",
+        "default": "'Dashboard'",
+        "required": false,
+        "mutable": false
+      },
+      "heading": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "heading",
+        "default": "'Navigation'",
+        "required": false,
+        "mutable": false
+      },
+      "helpLabel": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "help-label",
+        "default": "'Help & Support'",
+        "required": false,
+        "mutable": false
+      },
+      "navigationLabel": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "navigation-label",
+        "default": "'Application navigation'",
+        "required": false,
+        "mutable": false
+      },
+      "open": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "open",
+        "default": "false",
+        "required": false,
+        "mutable": false
+      },
+      "settingsGroups": {
+        "type": "PanelNavGroup[]",
+        "resolvedType": "PanelNavGroup[]",
+        "default": "[]",
+        "required": false,
+        "mutable": false
+      },
+      "settingsLabel": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "settings-label",
+        "default": "'Settings'",
+        "required": false,
+        "mutable": false
+      }
+    },
+    "events": [
+      {
+        "name": "dsAreaSelect",
+        "detail": "string",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true
+      },
+      {
+        "name": "dsAuxiliarySelect",
+        "detail": "ShellMobileNavAuxiliaryDetail",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true
+      },
+      {
+        "name": "dsBrowseContextChange",
+        "detail": "NavChromeStyle",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true
+      },
+      {
+        "name": "dsClose",
+        "detail": "void",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true
+      }
+    ],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-shell-mobile-nav",
+      "react": "DsShellMobileNav",
+      "angular": "DsShellMobileNav"
+    },
+    "consumption": {
+      "install": "npm install @ds-mo/ui @ds-mo/tokens @ds-mo/icons",
+      "cssSetup": "import '@ds-mo/tokens';\nimport '@ds-mo/tokens/reset';\nimport '@ds-mo/tokens/globals';",
+      "customElements": {
+        "import": "import '@ds-mo/ui/dist/components/ds-shell-mobile-nav.js';",
+        "example": "<ds-shell-mobile-nav></ds-shell-mobile-nav>"
+      },
+      "react": {
+        "import": "import { DsShellMobileNav } from '@ds-mo/ui/react';",
+        "example": "<DsShellMobileNav />"
+      },
+      "angular": {
+        "import": "import { DsShellMobileNav } from '@ds-mo/ui/angular/ds-shell-mobile-nav';",
+        "example": "<ds-shell-mobile-nav></ds-shell-mobile-nav>"
+      },
+      "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: dashboardGroups, settingsGroups.",
+      "peerDependencies": {
+        "required": [
+          "@ds-mo/tokens ^3.1.1",
+          "@ds-mo/icons ^6.4.0"
+        ],
+        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
+      }
+    }
+  },
+  "dependencies": [
+    "@ds-mo/ui",
+    "@ds-mo/tokens",
+    "@ds-mo/icons"
+  ],
+  "registryDependencies": [
+    "icon",
+    "tab-group",
+    "text"
+  ],
+  "files": [
+    {
+      "path": "src/wc/components/ShellMobileNav/ShellMobileNav.css",
+      "content": "@import '../../utils/control-density.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n  background: var(--color-background-primary);\n}\n\n:host(:not([open])) {\n  display: none;\n}\n\n.shell-mobile-nav {\n  display: grid;\n  grid-template-rows: auto minmax(0, 1fr) auto;\n  height: 100%;\n  min-height: 0;\n  background: var(--color-background-primary);\n}\n\n.shell-mobile-nav__header {\n  display: grid;\n  gap: var(--dimension-space-100);\n  padding: var(--dimension-space-200);\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n.shell-mobile-nav__body {\n  min-height: 0;\n  overflow: auto;\n  overscroll-behavior: contain;\n  padding: var(--dimension-space-100);\n}\n\n.shell-mobile-nav__group + .shell-mobile-nav__group {\n  margin-block-start: var(--dimension-space-200);\n}\n\n.shell-mobile-nav__group-label {\n  display: block;\n  padding: 0 var(--dimension-space-100) var(--dimension-space-050);\n}\n\n.shell-mobile-nav__items {\n  display: grid;\n  gap: var(--dimension-space-025);\n}\n\n.shell-mobile-nav__area,\n.shell-mobile-nav__auxiliary {\n  appearance: none;\n  width: 100%;\n  border: 0;\n  background: transparent;\n  color: var(--color-foreground-secondary);\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: var(--ds-control-content-gap);\n  padding-inline: var(--dimension-space-100);\n  cursor: pointer;\n  text-align: start;\n}\n\n.shell-mobile-nav__area--selected {\n  color: var(--color-foreground-primary);\n}\n\n.shell-mobile-nav__dot {\n  width: var(--dimension-size-075);\n  height: var(--dimension-size-075);\n  margin-inline-start: auto;\n  border-radius: var(--dimension-radius-half);\n  background: var(--color-background-bold-brand);\n}\n\n.shell-mobile-nav__footer {\n  display: grid;\n  gap: var(--dimension-space-025);\n  padding: var(--dimension-space-100);\n  border-top: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/ShellMobileNav/ShellMobileNav.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';\nimport type {\n  ShellMobileNavAuxiliaryDetail,\n  ShellMobileNavAuxiliaryId,\n} from './shell-mobile-nav-types';\n\nconst CONTEXT_TABS = [\n  { id: 'dashboard', label: 'Dashboard' },\n  { id: 'settings', label: 'Settings' },\n];\n\n@Component({\n  tag: 'ds-shell-mobile-nav',\n  styleUrl: 'ShellMobileNav.css',\n  scoped: true,\n})\nexport class ShellMobileNav {\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() heading: string = 'Navigation';\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() dsAuxiliarySelect!: EventEmitter<ShellMobileNavAuxiliaryDetail>;\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 items(): PanelNavItem[] {\n    return this.groups.flatMap(group => group.items);\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>('.shell-mobile-nav__area');\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 selectAuxiliary(id: ShellMobileNavAuxiliaryId, event: MouseEvent) {\n    this.dsAuxiliarySelect.emit({\n      id,\n      anchor: event.currentTarget as HTMLElement,\n    });\n  }\n\n  private renderGroup(group: PanelNavGroup, index: number) {\n    return (\n      <section class=\"shell-mobile-nav__group\" aria-labelledby={group.label ? `mobile-nav-group-${group.id ?? index}` : undefined}>\n        {group.label && (\n          <ds-text\n            id={`mobile-nav-group-${group.id ?? index}`}\n            class=\"shell-mobile-nav__group-label\"\n            as=\"h2\"\n            variant=\"text-caption\"\n            color=\"secondary\"\n          >\n            {group.label}\n          </ds-text>\n        )}\n        <div class=\"shell-mobile-nav__items\">\n          {group.items.map(item => {\n            const selected = item.id === this.activeId;\n            return (\n              <button\n                type=\"button\"\n                class={{\n                  'shell-mobile-nav__area': true,\n                  'shell-mobile-nav__area--selected': selected,\n                  'ds-control--md': true,\n                  'ds-focus-ring-inset': true,\n                  'ds-interaction-fill': true,\n                  'ds-interaction-fill--selected': selected,\n                }}\n                aria-current={selected ? 'page' : undefined}\n                onClick={() => this.dsAreaSelect.emit(item.id)}\n              >\n                <ds-icon name={item.icon} size=\"md\" color=\"inherit\" />\n                <ds-text as=\"span\" variant=\"text-body-medium\" emphasis color=\"inherit\">\n                  {item.label}\n                </ds-text>\n                {item.dot && <span class=\"shell-mobile-nav__dot\" aria-hidden=\"true\" />}\n              </button>\n            );\n          })}\n        </div>\n      </section>\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-shell-mobile-navigation\"\n          class=\"shell-mobile-nav\"\n          aria-label={this.navigationLabel}\n        >\n          <header class=\"shell-mobile-nav__header\">\n            <ds-text as=\"h1\" variant=\"text-title-medium\" emphasis>\n              {this.heading}\n            </ds-text>\n            <ds-tab-group\n              tabs={contextTabs}\n              value={this.browseContext}\n              aria-label=\"Navigation context\"\n              onDsChange={this.handleContextChange}\n            />\n          </header>\n\n          <nav class=\"shell-mobile-nav__body\" aria-label={this.navigationLabel}>\n            {this.groups.map((group, index) => this.renderGroup(group, index))}\n          </nav>\n\n          <footer class=\"shell-mobile-nav__footer\">\n            <button\n              type=\"button\"\n              class=\"shell-mobile-nav__auxiliary ds-control--md ds-focus-ring-inset ds-interaction-fill\"\n              onClick={event => this.selectAuxiliary('help', event)}\n            >\n              <ds-icon name=\"CircleQuestion\" size=\"md\" color=\"inherit\" />\n              <ds-text as=\"span\" variant=\"text-body-medium\" emphasis color=\"inherit\">\n                {this.helpLabel}\n              </ds-text>\n            </button>\n            <button\n              type=\"button\"\n              class=\"shell-mobile-nav__auxiliary ds-control--md ds-focus-ring-inset ds-interaction-fill\"\n              onClick={event => this.selectAuxiliary('account', event)}\n            >\n              <ds-icon name=\"Avatar\" size=\"md\" color=\"inherit\" />\n              <ds-text as=\"span\" variant=\"text-body-medium\" emphasis color=\"inherit\">\n                {this.accountLabel}\n              </ds-text>\n            </button>\n          </footer>\n        </section>\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/ShellMobileNav/shell-mobile-nav-types.ts",
+      "content": "export type ShellMobileNavAuxiliaryId = 'account' | 'help';\n\nexport interface ShellMobileNavAuxiliaryDetail {\n  id: ShellMobileNavAuxiliaryId;\n  anchor: HTMLElement;\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/mcp-data/registry/shell-mobile-section-nav.json

@@ -0,0 +1,267 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "shell-mobile-section-nav",
+  "title": "ShellMobileSectionNav",
+  "description": "Horizontally scrollable mobile route navigation corresponding to the active area's desktop BarNav.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/shell-mobile-section-nav",
+    "source": "src/wc/components/ShellMobileSectionNav/ShellMobileSectionNav.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "specialized",
+      "status": "experimental",
+      "summary": "Horizontally scrollable mobile route navigation corresponding to the active area's desktop BarNav.",
+      "useWhen": [
+        "ShellApp is rendering the below-768px routed workspace and the active area has peer route sections."
+      ],
+      "avoidWhen": [
+        "Choices switch local content without navigation; use TabGroup.",
+        "Rendering the desktop or tablet secondary navigation; use BarNav."
+      ],
+      "alternatives": [
+        {
+          "when": "The choices switch local content without changing routes.",
+          "component": "component:ds-tab-group",
+          "reason": "TabGroup owns local view selection."
+        }
+      ],
+      "commonlyComposedWith": [
+        "component:ds-shell-app",
+        "component:ds-shell-mobile-bar",
+        "component:ds-bar-nav"
+      ],
+      "patterns": [
+        "pattern:application-shell"
+      ],
+      "accessibility": [
+        "The row is a named navigation landmark and the selected section exposes aria-current.",
+        "Disabled route sections remain visible but cannot emit navigation intent."
+      ],
+      "states": [
+        "The host router owns the current URL and handles dsTabChange.",
+        "Detail routes that do not match a section show the active-area heading."
+      ],
+      "responsiveBehavior": [
+        "The row scrolls horizontally without wrapping and centers the selected section when selection changes."
+      ],
+      "frameworkCaveats": {
+        "customElements": [
+          "Assign tabs as a JavaScript property and update currentUrl and basePath with router state."
+        ],
+        "react": [
+          "Pass the same BarNavTab array used by the desktop BarNav through the generated React wrapper."
+        ],
+        "angular": [
+          "Import the generated standalone adapter and bind tabs as a property."
+        ]
+      },
+      "references": [
+        {
+          "label": "Storybook",
+          "path": "src/wc/components/ShellMobileSectionNav/ShellMobileSectionNav.stories.ts"
+        }
+      ]
+    },
+    "api": {
+      "props": {
+        "basePath": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "base-path",
+          "default": "''",
+          "required": false,
+          "mutable": false,
+          "description": "Section base path used to derive the selected route tab."
+        },
+        "currentUrl": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "current-url",
+          "default": "''",
+          "required": false,
+          "mutable": false,
+          "description": "Current application route."
+        },
+        "heading": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "heading",
+          "required": false,
+          "mutable": false,
+          "description": "Active primary-area label shown when the route has no section row."
+        },
+        "navigationLabel": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "navigation-label",
+          "default": "'Section navigation'",
+          "required": false,
+          "mutable": false
+        },
+        "tabs": {
+          "type": "BarNavTab[]",
+          "resolvedType": "TabItem[]",
+          "default": "[]",
+          "required": false,
+          "mutable": false,
+          "description": "Route sections shared with the corresponding desktop BarNav."
+        },
+        "tabsJson": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "tabs-json",
+          "default": "''",
+          "required": false,
+          "mutable": false,
+          "description": "JSON fallback for `tabs`."
+        },
+        "value": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "value",
+          "default": "''",
+          "required": false,
+          "mutable": false,
+          "description": "Controlled selected tab when URL-derived selection is unavailable."
+        }
+      },
+      "events": [
+        {
+          "name": "dsTabChange",
+          "detail": "string",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "description": "Route intent; the application owns navigation."
+        }
+      ],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "basePath": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "base-path",
+        "default": "''",
+        "required": false,
+        "mutable": false,
+        "description": "Section base path used to derive the selected route tab."
+      },
+      "currentUrl": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "current-url",
+        "default": "''",
+        "required": false,
+        "mutable": false,
+        "description": "Current application route."
+      },
+      "heading": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "heading",
+        "required": false,
+        "mutable": false,
+        "description": "Active primary-area label shown when the route has no section row."
+      },
+      "navigationLabel": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "navigation-label",
+        "default": "'Section navigation'",
+        "required": false,
+        "mutable": false
+      },
+      "tabs": {
+        "type": "BarNavTab[]",
+        "resolvedType": "TabItem[]",
+        "default": "[]",
+        "required": false,
+        "mutable": false,
+        "description": "Route sections shared with the corresponding desktop BarNav."
+      },
+      "tabsJson": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "tabs-json",
+        "default": "''",
+        "required": false,
+        "mutable": false,
+        "description": "JSON fallback for `tabs`."
+      },
+      "value": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "value",
+        "default": "''",
+        "required": false,
+        "mutable": false,
+        "description": "Controlled selected tab when URL-derived selection is unavailable."
+      }
+    },
+    "events": [
+      {
+        "name": "dsTabChange",
+        "detail": "string",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "description": "Route intent; the application owns navigation."
+      }
+    ],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-shell-mobile-section-nav",
+      "react": "DsShellMobileSectionNav",
+      "angular": "DsShellMobileSectionNav"
+    },
+    "consumption": {
+      "install": "npm install @ds-mo/ui @ds-mo/tokens @ds-mo/icons",
+      "cssSetup": "import '@ds-mo/tokens';\nimport '@ds-mo/tokens/reset';\nimport '@ds-mo/tokens/globals';",
+      "customElements": {
+        "import": "import '@ds-mo/ui/dist/components/ds-shell-mobile-section-nav.js';",
+        "example": "<ds-shell-mobile-section-nav></ds-shell-mobile-section-nav>"
+      },
+      "react": {
+        "import": "import { DsShellMobileSectionNav } from '@ds-mo/ui/react';",
+        "example": "<DsShellMobileSectionNav />"
+      },
+      "angular": {
+        "import": "import { DsShellMobileSectionNav } from '@ds-mo/ui/angular/ds-shell-mobile-section-nav';",
+        "example": "<ds-shell-mobile-section-nav></ds-shell-mobile-section-nav>"
+      },
+      "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: tabs.",
+      "peerDependencies": {
+        "required": [
+          "@ds-mo/tokens ^3.1.1",
+          "@ds-mo/icons ^6.4.0"
+        ],
+        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
+      }
+    }
+  },
+  "dependencies": [
+    "@ds-mo/ui",
+    "@ds-mo/tokens"
+  ],
+  "registryDependencies": [
+    "text"
+  ],
+  "files": [
+    {
+      "path": "src/wc/components/ShellMobileSectionNav/ShellMobileSectionNav.css",
+      "content": "@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  background: var(--color-background-primary);\n  color: var(--color-foreground-secondary);\n}\n\n.shell-mobile-section-nav {\n  min-width: 0;\n  min-height: var(--dimension-size-600);\n  display: flex;\n  align-items: center;\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  background: var(--color-background-primary);\n}\n\n.shell-mobile-section-nav__scroller {\n  width: 100%;\n  min-width: 0;\n  min-height: var(--dimension-size-600);\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  padding-inline: var(--dimension-space-100);\n  overflow-x: auto;\n  overflow-y: hidden;\n  overscroll-behavior-inline: contain;\n  scrollbar-width: none;\n  box-sizing: border-box;\n}\n\n.shell-mobile-section-nav__scroller::-webkit-scrollbar {\n  display: none;\n}\n\n.shell-mobile-section-nav__tab {\n  appearance: none;\n  flex: 0 0 auto;\n  min-height: var(--dimension-size-400);\n  padding-inline: var(--dimension-space-100);\n  border: 0;\n  border-radius: var(--dimension-radius-100);\n  background: transparent;\n  color: inherit;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  cursor: pointer;\n}\n\n.shell-mobile-section-nav__tab--selected {\n  color: var(--color-foreground-primary);\n}\n\n.shell-mobile-section-nav__tab:disabled {\n  color: var(--color-foreground-tertiary);\n  cursor: default;\n}\n\n.shell-mobile-section-nav__divider {\n  flex: 0 0 auto;\n  width: var(--dimension-stroke-width-012);\n  height: var(--dimension-size-300);\n  background: var(--color-border-tertiary);\n}\n\n.shell-mobile-section-nav__dot {\n  width: var(--dimension-size-075);\n  height: var(--dimension-size-075);\n  border-radius: var(--dimension-radius-half);\n  background: var(--color-background-bold-brand);\n}\n\n.shell-mobile-section-nav__heading {\n  display: block;\n  min-width: 0;\n  padding-inline: var(--dimension-space-200);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/ShellMobileSectionNav/ShellMobileSectionNav.tsx",
+      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\nimport type { BarNavTab } from '../BarNav/bar-nav-types';\nimport {\n  deriveBarNavValueFromUrl,\n  parseJsonArrayProp,\n} from '../BarNav/bar-nav-utils';\nimport { getSelectableTabs, isTabDivider } from '../TabGroup/tab-item-utils';\n\n@Component({\n  tag: 'ds-shell-mobile-section-nav',\n  styleUrl: 'ShellMobileSectionNav.css',\n  scoped: true,\n})\nexport class ShellMobileSectionNav {\n  @Element() el!: HTMLElement;\n\n  /** Route sections shared with the corresponding desktop BarNav. */\n  @Prop() tabs: BarNavTab[] = [];\n  /** JSON fallback for `tabs`. */\n  @Prop({ attribute: 'tabs-json' }) tabsJson: string = '';\n  /** Controlled selected tab when URL-derived selection is unavailable. */\n  @Prop() value: string = '';\n  /** Active primary-area label shown when the route has no section row. */\n  @Prop() heading: string | undefined;\n  /** Section base path used to derive the selected route tab. */\n  @Prop() basePath: string = '';\n  /** Current application route. */\n  @Prop() currentUrl: string = '';\n  @Prop() navigationLabel: string = 'Section navigation';\n\n  /** Route intent; the application owns navigation. */\n  @Event() dsTabChange!: EventEmitter<string>;\n\n  private lastScrolledValue = '';\n\n  private get resolvedTabs(): BarNavTab[] {\n    return this.tabsJson\n      ? parseJsonArrayProp<BarNavTab>(this.tabsJson, [])\n      : (this.tabs ?? []);\n  }\n\n  private get urlState() {\n    return deriveBarNavValueFromUrl(this.currentUrl, this.basePath, this.resolvedTabs);\n  }\n\n  private get effectiveValue(): string {\n    if (this.currentUrl && this.basePath) return this.urlState.value;\n    return this.value;\n  }\n\n  componentDidLoad() {\n    this.scrollSelectedIntoView();\n  }\n\n  componentDidRender() {\n    this.scrollSelectedIntoView();\n  }\n\n  private scrollSelectedIntoView() {\n    const selectedValue = this.effectiveValue;\n    if (!selectedValue || selectedValue === this.lastScrolledValue) return;\n    this.lastScrolledValue = selectedValue;\n    requestAnimationFrame(() => {\n      this.el\n        .querySelector<HTMLElement>(`[data-section-id=\"${CSS.escape(selectedValue)}\"]`)\n        ?.scrollIntoView({ block: 'nearest', inline: 'center' });\n    });\n  }\n\n  private selectTab(id: string, isInactive: boolean | undefined) {\n    if (isInactive || id === this.effectiveValue) return;\n    this.dsTabChange.emit(id);\n  }\n\n  render() {\n    const tabs = this.resolvedTabs;\n    const selectableTabs = getSelectableTabs(tabs);\n    const showTabs = selectableTabs.length > 0 && !this.urlState.hideTabs;\n\n    return (\n      <Host>\n        <nav class=\"shell-mobile-section-nav\" aria-label={this.navigationLabel}>\n          {showTabs ? (\n            <div class=\"shell-mobile-section-nav__scroller\">\n              {tabs.map((tab, index) => {\n                if (isTabDivider(tab)) {\n                  return (\n                    <span\n                      class=\"shell-mobile-section-nav__divider\"\n                      aria-hidden=\"true\"\n                      key={`divider-${index}`}\n                    />\n                  );\n                }\n\n                const selected = tab.id === this.effectiveValue;\n                return (\n                  <button\n                    type=\"button\"\n                    class={{\n                      'shell-mobile-section-nav__tab': true,\n                      'shell-mobile-section-nav__tab--selected': selected,\n                      'ds-focus-ring-inset': true,\n                      'ds-interaction-fill': true,\n                    }}\n                    data-section-id={tab.id}\n                    disabled={tab.isInactive}\n                    aria-current={selected ? 'page' : undefined}\n                    onClick={() => this.selectTab(tab.id, tab.isInactive)}\n                  >\n                    <ds-text\n                      as=\"span\"\n                      variant=\"text-body-medium\"\n                      emphasis={selected}\n                      color=\"inherit\"\n                    >\n                      {tab.label}\n                    </ds-text>\n                    {tab.dot && (\n                      <span class=\"shell-mobile-section-nav__dot\" aria-hidden=\"true\" />\n                    )}\n                  </button>\n                );\n              })}\n            </div>\n          ) : (\n            <ds-text\n              class=\"shell-mobile-section-nav__heading\"\n              as=\"span\"\n              variant=\"text-body-medium\"\n              emphasis\n            >\n              {this.heading ?? ''}\n            </ds-text>\n          )}\n        </nav>\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}