{
  "$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-tab-group",
        "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 or named segmented TabGroup.",
        "Subsections use a separately named navigation landmark and never replace the semantic page identity.",
        "Leading and trailing slotted icon actions retain their own accessible names and tooltips."
      ],
      "states": [
        "Without multiple sections the center renders heading.",
        "With multiple sections the center renders the controlled MobileSectionSwitcher by default or an explicitly requested segmented TabGroup.",
        "The segmented presentation uses the shared fill-width TabGroup contract and divides its centered two-thirds top-bar lane equally between options.",
        "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 56px lane matches the Mobile Sheet Nav header and Mobile Bar Nav; optional subsections add one subordinate 48px lane.",
        "Equal flexible side lanes keep the center mathematically aligned when actions are asymmetric; segmented headers allocate the usable lane in a 1:4:1 ratio."
      ],
      "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": "TabGroupItem[]",
          "resolvedType": "TabGroupItem[]",
          "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."
        },
        "sectionsPresentation": {
          "type": "MobileHeaderSectionsPresentation",
          "resolvedType": "\"segmented\" | \"switcher\"",
          "attribute": "sections-presentation",
          "default": "'switcher'",
          "required": false,
          "mutable": false,
          "description": "Popup switcher or an inline segmented TabGroup for peer sections."
        },
        "sectionsSize": {
          "type": "TabGroupSize",
          "resolvedType": "\"lg\" | \"md\" | \"sm\"",
          "attribute": "sections-size",
          "default": "'md'",
          "required": false,
          "mutable": false,
          "description": "Density for the segmented sections presentation."
        },
        "subsections": {
          "type": "TabItem[]",
          "resolvedType": "TabItem[]",
          "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."
        },
        "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": "TabGroupItem[]",
        "resolvedType": "TabGroupItem[]",
        "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."
      },
      "sectionsPresentation": {
        "type": "MobileHeaderSectionsPresentation",
        "resolvedType": "\"segmented\" | \"switcher\"",
        "attribute": "sections-presentation",
        "default": "'switcher'",
        "required": false,
        "mutable": false,
        "description": "Popup switcher or an inline segmented TabGroup for peer sections."
      },
      "sectionsSize": {
        "type": "TabGroupSize",
        "resolvedType": "\"lg\" | \"md\" | \"sm\"",
        "attribute": "sections-size",
        "default": "'md'",
        "required": false,
        "mutable": false,
        "description": "Density for the segmented sections presentation."
      },
      "subsections": {
        "type": "TabItem[]",
        "resolvedType": "TabItem[]",
        "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."
      },
      "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",
      "vue": "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 />"
      },
      "vue": {
        "import": "import { DsMobileHeader } from '@ds-mo/ui/vue';",
        "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 ^6.5.0",
          "@ds-mo/icons ^7.0.0"
        ],
        "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
      }
    }
  },
  "dependencies": [
    "@ds-mo/ui",
    "@ds-mo/tokens"
  ],
  "registryDependencies": [
    "mobile-section-switcher",
    "tab-group",
    "text"
  ],
  "files": [
    {
      "path": "src/wc/components/MobileHeader/MobileHeader.css",
      "content": "@import '../../utils/chrome-layout.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  box-sizing: border-box;\n  background: var(--color-background-primary);\n  color: var(--color-foreground-primary);\n}\n\n:host([tone='brand']) {\n  background: var(--color-background-bold-brand);\n  color: var(--color-foreground-on-bold);\n}\n\n.mobile-header {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n  background: inherit;\n  color: inherit;\n}\n\n.mobile-header__primary {\n  grid-template-columns: minmax(var(--dimension-size-400), 1fr) minmax(0, auto) minmax(var(--dimension-size-400), 1fr);\n  width: 100%;\n  height: calc(var(--dimension-size-500) + var(--dimension-space-200));\n  min-width: 0;\n  background: inherit;\n  color: inherit;\n}\n\n.mobile-header__primary--segmented {\n  grid-template-columns:\n    minmax(var(--dimension-size-500), 1fr)\n    minmax(0, 4fr)\n    minmax(var(--dimension-size-500), 1fr);\n}\n\n.mobile-header__primary--segmented .mobile-header__center,\n.mobile-header__primary--segmented ds-tab-group {\n  width: 100%;\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 {\n  getSelectableTabs,\n  type TabGroupItem,\n  type TabItem,\n} from '../TabGroup/tab-item-utils';\nimport type { TabGroupSize } from '../TabGroup/TabGroup';\nimport type {\n  MobileHeaderHeadingLevel,\n  MobileHeaderSectionsPresentation,\n  MobileHeaderTone,\n} from './mobile-header-types';\n\n@Component({\n  tag: 'ds-mobile-header',\n  styleUrl: 'MobileHeader.css',\n  scoped: true,\n})\nexport class MobileHeader {\n  /** Static title used when no peer sections are supplied. */\n  @Prop() heading: string = '';\n  /** Semantic heading level for the active mobile screen. */\n  @Prop() headingLevel: MobileHeaderHeadingLevel = 'h1';\n  /** Controlled peer sections. Their selected label replaces the static title. */\n  @Prop() sections: TabGroupItem[] = [];\n  /** Controlled selected section id. */\n  @Prop() value: string = '';\n  /** Accessible name for the section chooser. */\n  @Prop() sectionsAriaLabel: string = 'Change page section';\n  /** Popup switcher or an inline segmented TabGroup for peer sections. */\n  @Prop() sectionsPresentation: MobileHeaderSectionsPresentation = 'switcher';\n  /** Density for the segmented sections presentation. */\n  @Prop() sectionsSize: TabGroupSize = 'md';\n  /** Controlled child sections within the selected page or detail screen. */\n  @Prop() subsections: TabItem[] = [];\n  /** Controlled selected child-section id. */\n  @Prop() subvalue: string = '';\n  /** Accessible name for the child-section chooser. */\n  @Prop() subsectionsAriaLabel: string = 'Change page subsection';\n  /** Default page chrome or bold-brand workflow chrome. */\n  @Prop({ reflect: true }) tone: MobileHeaderTone = 'default';\n\n  /** Section selection intent. */\n  @Event() dsSectionChange!: EventEmitter<string>;\n  /** Child-section selection intent. */\n  @Event() dsSubsectionChange!: EventEmitter<string>;\n\n  private get resolvedSections(): TabGroupItem[] {\n    return this.sections ?? [];\n  }\n\n  private get resolvedSubsections(): TabItem[] {\n    return this.subsections ?? [];\n  }\n\n  private get selectedLabel(): string {\n    const selectable = getSelectableTabs(this.resolvedSections);\n    return selectable.find(section => section.id === this.value)?.label ??\n      selectable[0]?.label ??\n      this.heading;\n  }\n\n  private handleSectionChange = (event: CustomEvent<string>) => {\n    event.stopPropagation();\n    this.dsSectionChange.emit(event.detail);\n  };\n\n  private handleSubsectionChange = (event: CustomEvent<string>) => {\n    event.stopPropagation();\n    this.dsSubsectionChange.emit(event.detail);\n  };\n\n  render() {\n    const Heading = this.headingLevel;\n    const selectable = getSelectableTabs(this.resolvedSections);\n    const hasSwitcher = selectable.length > 1;\n    const hasSubsections = getSelectableTabs(this.resolvedSubsections).length > 1;\n    const hasSegmentedSections = hasSwitcher && this.sectionsPresentation === 'segmented';\n    const foreground = this.tone === 'brand' ? 'on-bold' : 'primary';\n\n    return (\n      <Host>\n        <header class=\"mobile-header\">\n          <div\n            class={{\n              'mobile-header__primary': true,\n              'mobile-header__primary--segmented': hasSegmentedSections,\n              'ds-chrome-grid': true,\n              'ds-chrome-space--md': true,\n            }}\n          >\n            <div class=\"mobile-header__lane mobile-header__lane--leading\">\n              <slot name=\"leading\" />\n            </div>\n            <div class=\"mobile-header__center\">\n              {hasSwitcher ? (\n                [\n                  <span\n                    class=\"mobile-header__semantic-heading\"\n                    role=\"heading\"\n                    aria-level={this.headingLevel === 'h1' ? '1' : '2'}\n                  >\n                    {this.selectedLabel}\n                  </span>,\n                  this.sectionsPresentation === 'segmented' ? (\n                    <ds-tab-group\n                      tabs={this.resolvedSections}\n                      value={this.value}\n                      size={this.sectionsSize}\n                      width=\"fill\"\n                      ariaLabel={this.sectionsAriaLabel}\n                      onDsChange={this.handleSectionChange}\n                    />\n                  ) : (\n                    <ds-mobile-section-switcher\n                      sections={this.resolvedSections}\n                      value={this.value}\n                      navigationLabel={this.sectionsAriaLabel}\n                      onDsChange={this.handleSectionChange}\n                    />\n                  ),\n                ]\n              ) : (\n                <ds-text\n                  class=\"mobile-header__heading\"\n                  as={Heading}\n                  variant=\"text-body-medium\"\n                  emphasis\n                  color={foreground}\n                  lineTruncation={1}\n                >\n                  {this.selectedLabel}\n                </ds-text>\n              )}\n            </div>\n            <div class=\"mobile-header__lane mobile-header__lane--trailing\">\n              <slot name=\"trailing\" />\n            </div>\n          </div>\n          {hasSubsections ? (\n            <nav class=\"mobile-header__subsections\" aria-label={this.subsectionsAriaLabel}>\n              <ds-mobile-section-switcher\n                sections={this.resolvedSubsections}\n                value={this.subvalue}\n                navigationLabel={this.subsectionsAriaLabel}\n                onDsChange={this.handleSubsectionChange}\n              />\n            </nav>\n          ) : null}\n        </header>\n      </Host>\n    );\n  }\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "src/wc/components/MobileHeader/mobile-header-types.ts",
      "content": "import type { TabGroupItem } from '../TabGroup/tab-item-utils';\n\nexport type MobileHeaderTone = 'default' | 'brand';\nexport type MobileHeaderHeadingLevel = 'h1' | 'h2';\nexport type MobileHeaderSectionsPresentation = 'switcher' | 'segmented';\nexport type MobileHeaderSectionItem = TabGroupItem;\n",
      "type": "registry:ui"
    }
  ]
}