@ds-mo/ui 12.5.0 → 12.6.1

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

@@ -1,348 +0,0 @@
-{
-  "$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

@@ -1,267 +0,0 @@
-{
-  "$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"
-    }
-  ]
-}

package/dist/react/ds-shell-mobile-bar.d.ts

@@ -1,13 +0,0 @@
-/**
- * This file was automatically generated by the Stencil React Output Target.
- * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
- */
-import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
-import { type DsShellMobileBarCustomEvent, type ShellMobileBarDestinationDetail } from "@ds-mo/ui";
-import type { Components } from "@ds-mo/ui/dist/components";
-import { DsShellMobileBar as DsShellMobileBarElement } from "@ds-mo/ui/dist/components/ds-shell-mobile-bar.js";
-export type DsShellMobileBarEvents = {
-    onDsNavigationToggle: EventName<DsShellMobileBarCustomEvent<boolean>>;
-    onDsDestinationChange: EventName<DsShellMobileBarCustomEvent<ShellMobileBarDestinationDetail>>;
-};
-export declare const DsShellMobileBar: StencilReactComponent<DsShellMobileBarElement, DsShellMobileBarEvents, Components.DsShellMobileBar>;

package/dist/react/ds-shell-mobile-bar.js

@@ -1,15 +0,0 @@
-'use client';
-import { createComponent } from '@stencil/react-output-target/runtime';
-import React from 'react';
-import { DsShellMobileBar as DsShellMobileBarElement, defineCustomElement as defineDsShellMobileBar } from "@ds-mo/ui/dist/components/ds-shell-mobile-bar.js";
-export const DsShellMobileBar = /*@__PURE__*/ createComponent({
-    tagName: 'ds-shell-mobile-bar',
-    elementClass: DsShellMobileBarElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onDsNavigationToggle: 'dsNavigationToggle',
-        onDsDestinationChange: 'dsDestinationChange'
-    },
-    defineCustomElement: defineDsShellMobileBar
-});