@ds-mo/ui 12.5.0 → 12.6.0

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

@@ -0,0 +1,351 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "mobile-header",
+  "title": "MobileHeader",
+  "description": "Consistent mobile top chrome with symmetric action lanes, a centered page identity or peer-section chooser, and an optional subordinate page-section row.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/mobile-header",
+    "source": "src/wc/components/MobileHeader/MobileHeader.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "specialized",
+      "status": "experimental",
+      "summary": "Consistent mobile top chrome with symmetric action lanes, a centered page identity or peer-section chooser, and an optional subordinate page-section row.",
+      "useWhen": [
+        "A routed page, persistent tool, account surface, or workflow needs the canonical mobile header presentation."
+      ],
+      "avoidWhen": [
+        "Rendering desktop BarTitle, BarNav, or PanelToolHeader.",
+        "Rendering the Mobile Sheet Nav utility lane."
+      ],
+      "commonlyComposedWith": [
+        "component:ds-mobile-section-switcher",
+        "component:ds-shell-page",
+        "component:ds-shell-tools"
+      ],
+      "patterns": [
+        "pattern:application-shell"
+      ],
+      "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.",
+        "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.",
+        "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.",
+        "Equal flexible side lanes keep the center mathematically aligned when actions are asymmetric."
+      ],
+      "references": [
+        {
+          "label": "Storybook",
+          "path": "src/wc/components/MobileHeader/MobileHeader.stories.ts"
+        }
+      ]
+    },
+    "api": {
+      "props": {
+        "heading": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "heading",
+          "default": "''",
+          "required": false,
+          "mutable": false,
+          "description": "Static title used when no peer sections are supplied."
+        },
+        "headingLevel": {
+          "type": "MobileHeaderHeadingLevel",
+          "resolvedType": "\"h1\" | \"h2\"",
+          "attribute": "heading-level",
+          "default": "'h1'",
+          "required": false,
+          "mutable": false,
+          "description": "Semantic heading level for the active mobile screen."
+        },
+        "sections": {
+          "type": "TabItem[]",
+          "resolvedType": "TabItem[]",
+          "default": "[]",
+          "required": false,
+          "mutable": false,
+          "description": "Controlled peer sections. Their selected label replaces the static title."
+        },
+        "sectionsAriaLabel": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "sections-aria-label",
+          "default": "'Change page section'",
+          "required": false,
+          "mutable": false,
+          "description": "Accessible name for the section chooser."
+        },
+        "sectionsJson": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "sections-json",
+          "default": "''",
+          "required": false,
+          "mutable": false,
+          "description": "JSON fallback for `sections`."
+        },
+        "subsections": {
+          "type": "TabItem[]",
+          "resolvedType": "TabItem[]",
+          "default": "[]",
+          "required": false,
+          "mutable": false,
+          "description": "Controlled child sections within the selected page or detail screen."
+        },
+        "subsectionsAriaLabel": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "subsections-aria-label",
+          "default": "'Change page subsection'",
+          "required": false,
+          "mutable": false,
+          "description": "Accessible name for the child-section chooser."
+        },
+        "subsectionsJson": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "subsections-json",
+          "default": "''",
+          "required": false,
+          "mutable": false,
+          "description": "JSON fallback for `subsections`."
+        },
+        "subvalue": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "subvalue",
+          "default": "''",
+          "required": false,
+          "mutable": false,
+          "description": "Controlled selected child-section id."
+        },
+        "tone": {
+          "type": "MobileHeaderTone",
+          "resolvedType": "\"brand\" | \"default\"",
+          "attribute": "tone",
+          "default": "'default'",
+          "required": false,
+          "mutable": false,
+          "description": "Default page chrome or bold-brand workflow chrome."
+        },
+        "value": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "value",
+          "default": "''",
+          "required": false,
+          "mutable": false,
+          "description": "Controlled selected section id."
+        }
+      },
+      "events": [
+        {
+          "name": "dsSectionChange",
+          "detail": "string",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "description": "Section selection intent."
+        },
+        {
+          "name": "dsSubsectionChange",
+          "detail": "string",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "description": "Child-section selection intent."
+        }
+      ],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "heading": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "heading",
+        "default": "''",
+        "required": false,
+        "mutable": false,
+        "description": "Static title used when no peer sections are supplied."
+      },
+      "headingLevel": {
+        "type": "MobileHeaderHeadingLevel",
+        "resolvedType": "\"h1\" | \"h2\"",
+        "attribute": "heading-level",
+        "default": "'h1'",
+        "required": false,
+        "mutable": false,
+        "description": "Semantic heading level for the active mobile screen."
+      },
+      "sections": {
+        "type": "TabItem[]",
+        "resolvedType": "TabItem[]",
+        "default": "[]",
+        "required": false,
+        "mutable": false,
+        "description": "Controlled peer sections. Their selected label replaces the static title."
+      },
+      "sectionsAriaLabel": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "sections-aria-label",
+        "default": "'Change page section'",
+        "required": false,
+        "mutable": false,
+        "description": "Accessible name for the section chooser."
+      },
+      "sectionsJson": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "sections-json",
+        "default": "''",
+        "required": false,
+        "mutable": false,
+        "description": "JSON fallback for `sections`."
+      },
+      "subsections": {
+        "type": "TabItem[]",
+        "resolvedType": "TabItem[]",
+        "default": "[]",
+        "required": false,
+        "mutable": false,
+        "description": "Controlled child sections within the selected page or detail screen."
+      },
+      "subsectionsAriaLabel": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "subsections-aria-label",
+        "default": "'Change page subsection'",
+        "required": false,
+        "mutable": false,
+        "description": "Accessible name for the child-section chooser."
+      },
+      "subsectionsJson": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "subsections-json",
+        "default": "''",
+        "required": false,
+        "mutable": false,
+        "description": "JSON fallback for `subsections`."
+      },
+      "subvalue": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "subvalue",
+        "default": "''",
+        "required": false,
+        "mutable": false,
+        "description": "Controlled selected child-section id."
+      },
+      "tone": {
+        "type": "MobileHeaderTone",
+        "resolvedType": "\"brand\" | \"default\"",
+        "attribute": "tone",
+        "default": "'default'",
+        "required": false,
+        "mutable": false,
+        "description": "Default page chrome or bold-brand workflow chrome."
+      },
+      "value": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "value",
+        "default": "''",
+        "required": false,
+        "mutable": false,
+        "description": "Controlled selected section id."
+      }
+    },
+    "events": [
+      {
+        "name": "dsSectionChange",
+        "detail": "string",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "description": "Section selection intent."
+      },
+      {
+        "name": "dsSubsectionChange",
+        "detail": "string",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "description": "Child-section selection intent."
+      }
+    ],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-mobile-header",
+      "react": "DsMobileHeader",
+      "angular": "DsMobileHeader"
+    },
+    "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-mobile-header.js';",
+        "example": "<ds-mobile-header></ds-mobile-header>"
+      },
+      "react": {
+        "import": "import { DsMobileHeader } from '@ds-mo/ui/react';",
+        "example": "<DsMobileHeader />"
+      },
+      "angular": {
+        "import": "import { DsMobileHeader } from '@ds-mo/ui/angular/ds-mobile-header';",
+        "example": "<ds-mobile-header></ds-mobile-header>"
+      },
+      "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: sections, subsections.",
+      "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": [
+    "mobile-section-switcher",
+    "text"
+  ],
+  "files": [
+    {
+      "path": "src/wc/components/MobileHeader/MobileHeader.css",
+      "content": ":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  display: grid;\n  grid-template-columns: minmax(var(--dimension-size-400), 1fr) minmax(0, auto) minmax(var(--dimension-size-400), 1fr);\n  align-items: center;\n  gap: var(--dimension-space-050);\n  width: 100%;\n  height: var(--dimension-size-600);\n  min-width: 0;\n  padding: var(--dimension-space-100);\n  box-sizing: border-box;\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  /** JSON fallback for `sections`. */\n  @Prop({ attribute: 'sections-json' }) sectionsJson: string = '';\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  /** JSON fallback for `subsections`. */\n  @Prop({ attribute: 'subsections-json' }) subsectionsJson: string = '';\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 parseSections(value: TabItem[], json: string): TabItem[] {\n    if (!json.trim()) return value ?? [];\n    try {\n      const parsed = JSON.parse(json);\n      return Array.isArray(parsed) ? (parsed as TabItem[]) : [];\n    } catch {\n      return [];\n    }\n  }\n\n  private get resolvedSections(): TabItem[] {\n    return this.parseSections(this.sections, this.sectionsJson);\n  }\n\n  private get resolvedSubsections(): TabItem[] {\n    return this.parseSections(this.subsections, this.subsectionsJson);\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\">\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",
+      "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",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/mcp-data/registry/mobile-section-switcher.json

@@ -0,0 +1,210 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "mobile-section-switcher",
+  "title": "MobileSectionSwitcher",
+  "description": "Controlled mobile section chooser showing the current section, adjacent-position hints, and a complete tap menu.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/mobile-section-switcher",
+    "source": "src/wc/components/MobileSectionSwitcher/MobileSectionSwitcher.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "specialized",
+      "status": "experimental",
+      "summary": "Controlled mobile section chooser showing the current section, adjacent-position hints, and a complete tap menu.",
+      "useWhen": [
+        "A mobile page or tool header must combine current-page identity with ordered peer-section navigation."
+      ],
+      "avoidWhen": [
+        "Rendering desktop BarNav.",
+        "The destination collection is primary application navigation."
+      ],
+      "commonlyComposedWith": [
+        "component:ds-mobile-header"
+      ],
+      "patterns": [
+        "pattern:application-shell"
+      ],
+      "accessibility": [
+        "The trigger exposes the current section, popup relationship, and expanded state.",
+        "Decorative previous and next position hints are hidden from assistive technology.",
+        "The menu is always available so a future swipe gesture is never the only navigation mechanism."
+      ],
+      "states": [
+        "Selection is controlled and dsChange reports intent without mutating value.",
+        "Dividers group menu items but never participate in previous or next resolution.",
+        "The first and last selectable sections expose only the available neighboring direction."
+      ],
+      "responsiveBehavior": [
+        "Use only in the dedicated mobile header presentation."
+      ],
+      "references": [
+        {
+          "label": "Storybook",
+          "path": "src/wc/components/MobileSectionSwitcher/MobileSectionSwitcher.stories.ts"
+        }
+      ]
+    },
+    "api": {
+      "props": {
+        "navigationLabel": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "navigation-label",
+          "default": "'Change page section'",
+          "required": false,
+          "mutable": false,
+          "description": "Accessible name for the section chooser."
+        },
+        "sections": {
+          "type": "TabItem[]",
+          "resolvedType": "TabItem[]",
+          "default": "[]",
+          "required": false,
+          "mutable": false,
+          "description": "Ordered controlled sections. Divider entries group the popup menu."
+        },
+        "sectionsJson": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "sections-json",
+          "default": "''",
+          "required": false,
+          "mutable": false,
+          "description": "JSON fallback for `sections`."
+        },
+        "value": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "value",
+          "default": "''",
+          "required": false,
+          "mutable": false,
+          "description": "Controlled selected section id."
+        }
+      },
+      "events": [
+        {
+          "name": "dsChange",
+          "detail": "string",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "description": "Selection intent. The route, tool, or workflow owner updates `value`."
+        }
+      ],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "navigationLabel": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "navigation-label",
+        "default": "'Change page section'",
+        "required": false,
+        "mutable": false,
+        "description": "Accessible name for the section chooser."
+      },
+      "sections": {
+        "type": "TabItem[]",
+        "resolvedType": "TabItem[]",
+        "default": "[]",
+        "required": false,
+        "mutable": false,
+        "description": "Ordered controlled sections. Divider entries group the popup menu."
+      },
+      "sectionsJson": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "sections-json",
+        "default": "''",
+        "required": false,
+        "mutable": false,
+        "description": "JSON fallback for `sections`."
+      },
+      "value": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "value",
+        "default": "''",
+        "required": false,
+        "mutable": false,
+        "description": "Controlled selected section id."
+      }
+    },
+    "events": [
+      {
+        "name": "dsChange",
+        "detail": "string",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "description": "Selection intent. The route, tool, or workflow owner updates `value`."
+      }
+    ],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-mobile-section-switcher",
+      "react": "DsMobileSectionSwitcher",
+      "angular": "DsMobileSectionSwitcher"
+    },
+    "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-mobile-section-switcher.js';",
+        "example": "<ds-mobile-section-switcher></ds-mobile-section-switcher>"
+      },
+      "react": {
+        "import": "import { DsMobileSectionSwitcher } from '@ds-mo/ui/react';",
+        "example": "<DsMobileSectionSwitcher />"
+      },
+      "angular": {
+        "import": "import { DsMobileSectionSwitcher } from '@ds-mo/ui/angular/ds-mobile-section-switcher';",
+        "example": "<ds-mobile-section-switcher></ds-mobile-section-switcher>"
+      },
+      "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: sections.",
+      "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": [
+    "menu",
+    "text"
+  ],
+  "files": [
+    {
+      "path": "src/wc/components/MobileSectionSwitcher/MobileSectionSwitcher.css",
+      "content": "@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  max-width: 100%;\n  color: var(--color-foreground-primary);\n}\n\n.mobile-section-switcher {\n  appearance: none;\n  display: grid;\n  grid-template-columns: var(--dimension-size-100) minmax(0, auto) var(--dimension-size-100);\n  align-items: center;\n  justify-content: center;\n  gap: var(--dimension-space-050);\n  max-width: 100%;\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: var(--color-background-secondary);\n  color: inherit;\n  box-sizing: border-box;\n  cursor: pointer;\n}\n\n.mobile-section-switcher--expanded {\n  background: var(--color-background-tertiary);\n}\n\n.mobile-section-switcher__label {\n  min-width: 0;\n  max-width: 100%;\n  text-align: center;\n}\n\n.mobile-section-switcher__position {\n  width: var(--dimension-size-050);\n  height: var(--dimension-size-050);\n  border-radius: var(--dimension-radius-half);\n  background: currentColor;\n  opacity: 0;\n}\n\n.mobile-section-switcher__position--visible {\n  opacity: 1;\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/MobileSectionSwitcher/MobileSectionSwitcher.tsx",
+      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport type { MenuItemData, MenuSection } from '../Menu/menu-types';\nimport {\n  getSelectableTabs,\n  isTabDivider,\n  type TabItem,\n  type TabItemTab,\n} from '../TabGroup/tab-item-utils';\nimport { resolveMobileSectionPosition } from './mobile-section-switcher-utils';\n\nlet nextMobileSectionSwitcherId = 0;\n\n@Component({\n  tag: 'ds-mobile-section-switcher',\n  styleUrl: 'MobileSectionSwitcher.css',\n  scoped: true,\n})\nexport class MobileSectionSwitcher {\n  @Element() el!: HTMLElement;\n\n  /** Ordered controlled sections. Divider entries group the popup menu. */\n  @Prop() sections: TabItem[] = [];\n  /** JSON fallback for `sections`. */\n  @Prop({ attribute: 'sections-json' }) sectionsJson: string = '';\n  /** Controlled selected section id. */\n  @Prop() value: string = '';\n  /** Accessible name for the section chooser. */\n  @Prop() navigationLabel: string = 'Change page section';\n\n  /** Selection intent. The route, tool, or workflow owner updates `value`. */\n  @Event() dsChange!: EventEmitter<string>;\n\n  @State() private menuOpen = false;\n  @State() private initialFocusVisible = false;\n\n  private readonly instanceId = nextMobileSectionSwitcherId++;\n  private readonly triggerId = `ds-mobile-section-switcher-trigger-${this.instanceId}`;\n  private readonly menuId = `ds-mobile-section-switcher-menu-${this.instanceId}`;\n  private triggerEl: HTMLButtonElement | null = null;\n\n  private get resolvedSections(): TabItem[] {\n    if (!this.sectionsJson.trim()) return this.sections ?? [];\n    try {\n      const parsed = JSON.parse(this.sectionsJson);\n      return Array.isArray(parsed) ? (parsed as TabItem[]) : [];\n    } catch {\n      return [];\n    }\n  }\n\n  private get selectableSections(): TabItemTab[] {\n    return getSelectableTabs(this.resolvedSections);\n  }\n\n  private get selectedIndex(): number {\n    return resolveMobileSectionPosition(this.resolvedSections, this.value).selectedIndex;\n  }\n\n  private get selectedSection(): TabItemTab | undefined {\n    return this.selectableSections[this.selectedIndex];\n  }\n\n  private get hasPrevious(): boolean {\n    return resolveMobileSectionPosition(this.resolvedSections, this.value).hasPrevious;\n  }\n\n  private get hasNext(): boolean {\n    return resolveMobileSectionPosition(this.resolvedSections, this.value).hasNext;\n  }\n\n  private get triggerAriaLabel(): string {\n    return `${this.navigationLabel}. Current section: ${this.selectedSection?.label ?? ''}`;\n  }\n\n  private get menuSections(): MenuSection[] {\n    const groups: MenuSection[] = [];\n    let items: MenuItemData[] = [];\n    const commit = () => {\n      if (items.length) groups.push({ items });\n      items = [];\n    };\n\n    for (const section of this.resolvedSections) {\n      if (isTabDivider(section)) {\n        commit();\n        continue;\n      }\n      items.push({\n        label: section.label,\n        value: section.id,\n        dot: section.dot,\n        isSelected: section.id === this.selectedSection?.id,\n        isInactive: section.isInactive,\n      });\n    }\n    commit();\n    return groups;\n  }\n\n  @Watch('sections')\n  @Watch('sectionsJson')\n  handleSectionsChange() {\n    if (this.selectableSections.length <= 1) this.closeMenu();\n  }\n\n  private toggleMenu = (event: MouseEvent) => {\n    if (this.selectableSections.length <= 1) return;\n    this.initialFocusVisible = event.detail === 0;\n    this.menuOpen = !this.menuOpen;\n  };\n\n  private closeMenu = () => {\n    this.menuOpen = false;\n  };\n\n  private handleSelect = (event: CustomEvent<MenuItemData>) => {\n    const id = String(event.detail.value ?? '');\n    const section = this.selectableSections.find(candidate => candidate.id === id);\n    if (!section || section.isInactive) return;\n    this.closeMenu();\n    if (id !== this.selectedSection?.id) this.dsChange.emit(id);\n    requestAnimationFrame(() => this.triggerEl?.focus());\n  };\n\n  render() {\n    const selected = this.selectedSection;\n    if (!selected) return <Host />;\n\n    return (\n      <Host>\n        <button\n          ref={element => {\n            this.triggerEl = element ?? null;\n          }}\n          id={this.triggerId}\n          class={{\n            'mobile-section-switcher': true,\n            'mobile-section-switcher--expanded': this.menuOpen,\n            'ds-focus-ring-inset': true,\n            'ds-interaction-fill': true,\n          }}\n          type=\"button\"\n          aria-haspopup=\"menu\"\n          aria-controls={this.menuId}\n          aria-expanded={String(this.menuOpen)}\n          aria-label={this.triggerAriaLabel}\n          onClick={this.toggleMenu}\n        >\n          <span\n            class={{\n              'mobile-section-switcher__position': true,\n              'mobile-section-switcher__position--visible': this.hasPrevious,\n              'ds-interaction-fill__content': true,\n            }}\n            aria-hidden=\"true\"\n          />\n          <ds-text\n            class=\"mobile-section-switcher__label ds-interaction-fill__content\"\n            as=\"span\"\n            variant=\"text-body-medium\"\n            emphasis\n            color=\"inherit\"\n            lineTruncation={1}\n          >\n            {selected.label}\n          </ds-text>\n          <span\n            class={{\n              'mobile-section-switcher__position': true,\n              'mobile-section-switcher__position--visible': this.hasNext,\n              'ds-interaction-fill__content': true,\n            }}\n            aria-hidden=\"true\"\n          />\n        </button>\n\n        {this.selectableSections.length > 1 ? (\n          <ds-menu\n            id={this.menuId}\n            anchorId={this.triggerId}\n            align=\"center\"\n            selectionMode=\"single\"\n            menuLabel={this.navigationLabel}\n            open={this.menuOpen}\n            initialFocusVisible={this.initialFocusVisible}\n            sections={this.menuSections}\n            onDsClose={this.closeMenu}\n            onDsSelect={this.handleSelect}\n          />\n        ) : null}\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/MobileSectionSwitcher/mobile-section-switcher-types.ts",
+      "content": "import type { TabItem } from '../TabGroup/tab-item-utils';\n\n/** Ordered mobile sections. Dividers group the tap menu but do not participate in selection. */\nexport type MobileSectionItem = TabItem;\n\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/MobileSectionSwitcher/mobile-section-switcher-utils.ts",
+      "content": "import { getSelectableTabs, type TabItem, type TabItemTab } from '../TabGroup/tab-item-utils';\n\nexport interface MobileSectionPosition {\n  selectedIndex: number;\n  selected?: TabItemTab;\n  hasPrevious: boolean;\n  hasNext: boolean;\n}\n\n/** Resolve ordered selectable neighbors while ignoring visual divider entries. */\nexport function resolveMobileSectionPosition(\n  sections: TabItem[],\n  value: string\n): MobileSectionPosition {\n  const selectable = getSelectableTabs(sections);\n  const matchedIndex = selectable.findIndex(section => section.id === value);\n  const selectedIndex = matchedIndex >= 0 ? matchedIndex : 0;\n  return {\n    selectedIndex,\n    selected: selectable[selectedIndex],\n    hasPrevious: selectedIndex > 0,\n    hasNext: selectedIndex < selectable.length - 1,\n  };\n}\n\n",
+      "type": "registry:ui"
+    }
+  ]
+}