npm - @oicl/openbridge-webcomponents - Versions diffs - 2.0.0-next.64 → 2.0.0-next.66 - Mend

@oicl/openbridge-webcomponents 2.0.0-next.64 → 2.0.0-next.66

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (24) hide show

package/dist/components/navigation-item-group/navigation-item-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"navigation-item-group.js","sources":["../../../src/components/navigation-item-group/navigation-item-group.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport compentStyle from './navigation-item-group.css?inline';\nimport {ObcNavigationMenuVariant} from '../navigation-menu/navigation-menu.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../../decorator.js';\nimport '../tree-navigation-item/tree-navigation-item.js';\nimport {\n TreeBranchType,\n TreeTerminalType,\n} from '../tree-navigation-item/tree-navigation-item.js';\nimport {BadgeType} from '../badge/badge.js';\n\n/*\n `<obc-navigation-item-group>` – A collapsible navigation group component for organizing related navigation items under a single expandable label.\n \n Appears as a navigation item that, when clicked, reveals a flyout panel containing additional navigation content. Used to group related links or actions in a navigation menu, improving organization and reducing clutter in complex navigation structures.\n \n ### Features\n * - Expandable Group: Clicking the group label toggles a flyout panel containing child navigation items or custom content.\n * - Custom Icon Support: Accepts a custom icon via the `icon` slot, displayed next to the group label.\n * - Variants: Supports multiple visual styles via the `variant` property (see `ObcNavigationMenuVariant`), such as full or compact menu modes.\n * - Checked State: The group can be marked as checked/selected for highlighting the current section.\n * - Hug Mode: When `hug` is true, the flyout panel appears anchored closely to the group label, with compact styling.\n * - Flyout Panel: The flyout is positioned adjacent to the group label and adapts its layout based on the `hug` and `variant` settings.\n * - Keyboard and Mouse Interaction: The group can be opened or closed by clicking the label; emits an `open` event when expanded.\n \n ### Usage Guidelines\n * Use `obc-navigation-item-group` to organize related navigation links or actions under a single expandable section within a navigation menu. Ideal for menus with many items or hierarchical structures, where grouping improves clarity and reduces visual noise. Place `obc-navigation-item` or other navigation-related components inside the group to form the flyout content.\n \n - Use the `icon` slot to visually distinguish the group.\n * - Use the `checked` property to indicate the currently active or selected group.\n * - Use the `hug` property for context menus or compact flyouts that should appear tightly anchored to the group label.\n * - Avoid nesting too many groups for better usability.\n \n TODO(designer): Clarify if there are recommended maximum numbers of items per group, and if keyboard navigation/focus management has specific requirements.\n \n ### Slots\n * \| Slot Name \| Renders When... \| Purpose \|\n * \|-----------\|-----------------\|---------\|\n * \| icon \| Always (optional) \| Custom icon displayed next to the group label. \|\n * \| (default) \| Always \| Content of the flyout panel (typically navigation items or custom content). \|\n \n ### Events\n * - `open` – Fired when the group is expanded and the flyout panel is shown.\n \n ### Best Practices and Constraints\n * - Only one navigation group should be open at a time in a given navigation menu for clarity.\n * - Place only navigation-related items in the flyout for consistency.\n * - For accessibility, ensure the group label clearly describes the grouped content.\n \n ### Example:\n * ```html\n * <obc-navigation-item-group label=\"Settings\">\n * <obi-settings slot=\"icon\"></obi-settings>\n * <obc-navigation-item label=\"Profile\"></obc-navigation-item>\n * <obc-navigation-item label=\"Security\"></obc-navigation-item>\n * </obc-navigation-item-group>\n * ```\n \n @slot icon - Custom icon displayed next to the group label.\n * @slot - Default slot for flyout content (typically navigation items).\n * @fires open {CustomEvent<void>} When the group is expanded and the flyout is shown.\n /\n@customElement('obc-navigation-item-group')\nexport class ObcNavigationItemGroup extends LitElement {\n /\n The label text displayed for the navigation group.\n /\n @property({type: String}) label = 'Label';\n\n /\n Optional URL to navigate to when the group label is clicked.\n * If set, clicking the group label will navigate to this URL.\n /\n @property({type: String}) href: string \| undefined;\n\n /\n Whether the group is currently checked/selected.\n * Use to highlight the group as active.\n /\n @property({type: Boolean}) checked = false;\n\n /\n Visual variant of the navigation group.\n * Accepts values from `ObcNavigationMenuVariant` (e.g., 'full', 'compact').\n * Controls the styling and layout of the group and its flyout.\n /\n @property({type: String}) variant: ObcNavigationMenuVariant =\n ObcNavigationMenuVariant.Full;\n\n /\n If true, the flyout panel appears tightly anchored to the group label with compact styling.\n /\n @property({type: Boolean}) hug = false;\n\n @property({type: Boolean}) hasIcon = false;\n\n /* Set by `obc-navigation-menu` in its Tree variant — renders the group as a tree row. /\n @property({type: Boolean}) treeMode = false;\n\n /* Indentation columns for tree mode, assigned by `obc-navigation-menu`. /\n @property({type: Array}) treeBranches: TreeBranchType[] = [];\n\n /\n Terminal type for the group header in the Tree variant — one of `regular`\n * (default), `aggregated-header`, or `group-header`. No effect in flat variants.\n /\n @property({type: String}) terminalType: string = TreeTerminalType.regular;\n\n /* Whether a trailing alert counter badge is shown on the header (Tree variant only). /\n @property({type: Boolean}) hasAlertBadge = false;\n\n /* The number shown in the header's alert badge when `hasAlertBadge` is true (Tree variant only). /\n @property({type: Number}) alertCount = 0;\n\n /* The severity/type of the header's alert badge — one of the `obc-badge` types (Tree variant only). /\n @property({type: String}) alertType: string = BadgeType.alarm;\n\n /* Whether the group starts expanded. Useful for trees that open by default. /\n @property({type: Boolean}) defaultOpen = false;\n\n @state() private openContainer = false;\n\n // Flat mode renders an `obc-navigation-item` header; tree mode renders an\n // `obc-tree-navigation-item`. Match whichever is present so `focus()` works in both.\n @query('obc-navigation-item, obc-tree-navigation-item')\n private groupItem?: HTMLElement;\n\n override firstUpdated() {\n if (this.defaultOpen) {\n this.openContainer = true;\n }\n }\n\n /* Whether the group is currently open (its children are disclosed). /\n public get expanded(): boolean {\n return this.openContainer;\n }\n\n private onClickGroup() {\n if (this.openContainer) {\n this.close();\n } else {\n this.open();\n }\n }\n\n /\n Opens the flyout panel and emits the `open` event.\n * @fires open\n */\n open() {\n this.openContainer = true;\n this.dispatchEvent(new CustomEvent('open'));\n }\n\n close() {\n this.openContainer = false;\n this.querySelectorAll('obc-navigation-item-group').forEach((item) => {\n item.close();\n });\n }\n\n public override focus(options?: FocusOptions): void {\n this.groupItem?.focus(options);\n }\n\n override render() {\n if (this.treeMode) {\n return html`\n <obc-tree-navigation-item\n part=\"header\"\n .label=${this.label}\n .branches=${this.treeBranches}\n expandable\n ?expanded=${this.openContainer}\n ?checked=${this.checked}\n .hasLeadingIcon=${this.hasIcon}\n .terminalType=${this.terminalType}\n ?hasAlertBadge=${this.hasAlertBadge}\n .alertCount=${this.alertCount}\n .alertType=${this.alertType}\n @expand-toggle=${this.onClickGroup}\n >\n ${this.hasIcon\n ? html`<slot name=\"icon\" slot=\"icon\"></slot>`\n : nothing}\n </obc-tree-navigation-item>\n <div part=\"children\" role=\"group\" ?hidden=${!this.openContainer}>\n <slot></slot>\n </div>\n `;\n }\n\n return html`\n <obc-navigation-item\n @click=${this.onClickGroup}\n .checked=${this.checked}\n .groupSelected=${this.openContainer}\n .href=${this.href}\n .label=${this.label}\n .variant=${this.variant}\n group\n id=\"group-item\"\n ?hasIcon=${this.hasIcon}\n >\n ${this.hasIcon ? html`<slot name=\"icon\" slot=\"icon\"></slot>` : nothing}\n </obc-navigation-item>\n <div\n part=\"flyout\"\n id=\"flyout-wrapper\"\n class=${classMap({\n hug: this.hug,\n [this.variant]: true,\n open: this.openContainer,\n })}\n >\n <div class=\"content\">\n <slot></slot>\n </div>\n </div>\n <div\n class=${classMap({\n shadow: true,\n open: this.openContainer,\n hug: this.hug,\n })}\n ></div>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-navigation-item-group': ObcNavigationItemGroup;\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"navigation-item-group.js","sources":["../../../src/components/navigation-item-group/navigation-item-group.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport compentStyle from './navigation-item-group.css?inline';\nimport {ObcNavigationMenuVariant} from '../navigation-menu/navigation-menu.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../../decorator.js';\nimport '../tree-navigation-item/tree-navigation-item.js';\nimport {\n TreeBranchType,\n TreeTerminalType,\n type TreeNavigationItemAlerts,\n} from '../tree-navigation-item/tree-navigation-item.js';\n\n/*\n `<obc-navigation-item-group>` – A collapsible navigation group component for organizing related navigation items under a single expandable label.\n \n Appears as a navigation item that, when clicked, reveals a flyout panel containing additional navigation content. Used to group related links or actions in a navigation menu, improving organization and reducing clutter in complex navigation structures.\n \n ### Features\n * - Expandable Group: Clicking the group label toggles a flyout panel containing child navigation items or custom content.\n * - Custom Icon Support: Accepts a custom icon via the `icon` slot, displayed next to the group label.\n * - Variants: Supports multiple visual styles via the `variant` property (see `ObcNavigationMenuVariant`), such as full or compact menu modes.\n * - Checked State: The group can be marked as checked/selected for highlighting the current section.\n * - Hug Mode: When `hug` is true, the flyout panel appears anchored closely to the group label, with compact styling.\n * - Flyout Panel: The flyout is positioned adjacent to the group label and adapts its layout based on the `hug` and `variant` settings.\n * - Keyboard and Mouse Interaction: The group can be opened or closed by clicking the label; emits an `open` event when expanded.\n \n ### Usage Guidelines\n * Use `obc-navigation-item-group` to organize related navigation links or actions under a single expandable section within a navigation menu. Ideal for menus with many items or hierarchical structures, where grouping improves clarity and reduces visual noise. Place `obc-navigation-item` or other navigation-related components inside the group to form the flyout content.\n \n - Use the `icon` slot to visually distinguish the group.\n * - Use the `checked` property to indicate the currently active or selected group.\n * - Use the `hug` property for context menus or compact flyouts that should appear tightly anchored to the group label.\n * - Avoid nesting too many groups for better usability.\n \n TODO(designer): Clarify if there are recommended maximum numbers of items per group, and if keyboard navigation/focus management has specific requirements.\n \n ### Slots\n * \| Slot Name \| Renders When... \| Purpose \|\n * \|-----------\|-----------------\|---------\|\n * \| icon \| Always (optional) \| Custom icon displayed next to the group label. \|\n * \| (default) \| Always \| Content of the flyout panel (typically navigation items or custom content). \|\n \n ### Events\n * - `open` – Fired when the group is expanded and the flyout panel is shown.\n \n ### Best Practices and Constraints\n * - Only one navigation group should be open at a time in a given navigation menu for clarity.\n * - Place only navigation-related items in the flyout for consistency.\n * - For accessibility, ensure the group label clearly describes the grouped content.\n \n ### Example:\n * ```html\n * <obc-navigation-item-group label=\"Settings\">\n * <obi-settings slot=\"icon\"></obi-settings>\n * <obc-navigation-item label=\"Profile\"></obc-navigation-item>\n * <obc-navigation-item label=\"Security\"></obc-navigation-item>\n * </obc-navigation-item-group>\n * ```\n \n @slot icon - Custom icon displayed next to the group label.\n * @slot - Default slot for flyout content (typically navigation items).\n * @fires open {CustomEvent<void>} When the group is expanded and the flyout is shown.\n /\n@customElement('obc-navigation-item-group')\nexport class ObcNavigationItemGroup extends LitElement {\n /\n The label text displayed for the navigation group.\n /\n @property({type: String}) label = 'Label';\n\n /\n Optional URL to navigate to when the group label is clicked.\n * If set, clicking the group label will navigate to this URL.\n /\n @property({type: String}) href: string \| undefined;\n\n /\n Whether the group is currently checked/selected.\n * Use to highlight the group as active.\n /\n @property({type: Boolean}) checked = false;\n\n /\n Visual variant of the navigation group.\n * Accepts values from `ObcNavigationMenuVariant` (e.g., 'full', 'compact').\n * Controls the styling and layout of the group and its flyout.\n /\n @property({type: String}) variant: ObcNavigationMenuVariant =\n ObcNavigationMenuVariant.Full;\n\n /\n If true, the flyout panel appears tightly anchored to the group label with compact styling.\n /\n @property({type: Boolean}) hug = false;\n\n @property({type: Boolean}) hasIcon = false;\n\n /* Set by `obc-navigation-menu` in its Tree variant — renders the group as a tree row. /\n @property({type: Boolean}) treeMode = false;\n\n /* Indentation columns for tree mode, assigned by `obc-navigation-menu`. /\n @property({type: Array}) treeBranches: TreeBranchType[] = [];\n\n /\n Terminal type for the group header in the Tree variant — one of `regular`\n * (default), `aggregated-header`, or `group-header`. No effect in flat variants.\n /\n @property({type: String}) terminalType: string = TreeTerminalType.regular;\n\n /\n Per-severity alert counts shown as trailing badge(s) on the group header\n * (Tree variant only). Forwarded to the underlying `obc-tree-navigation-item`;\n * typically `{aggregate: true, ...}` so the header totals the rows beneath it.\n * See {@link TreeNavigationItemAlerts}.\n /\n @property({type: Object}) alerts?: TreeNavigationItemAlerts;\n\n /* Whether the group starts expanded. Useful for trees that open by default. /\n @property({type: Boolean}) defaultOpen = false;\n\n @state() private openContainer = false;\n\n // Flat mode renders an `obc-navigation-item` header; tree mode renders an\n // `obc-tree-navigation-item`. Match whichever is present so `focus()` works in both.\n @query('obc-navigation-item, obc-tree-navigation-item')\n private groupItem?: HTMLElement;\n\n override firstUpdated() {\n if (this.defaultOpen) {\n this.openContainer = true;\n }\n }\n\n /* Whether the group is currently open (its children are disclosed). /\n public get expanded(): boolean {\n return this.openContainer;\n }\n\n private onClickGroup() {\n if (this.openContainer) {\n this.close();\n } else {\n this.open();\n }\n }\n\n /\n Opens the flyout panel and emits the `open` event.\n * @fires open\n */\n open() {\n this.openContainer = true;\n this.dispatchEvent(new CustomEvent('open'));\n }\n\n close() {\n this.openContainer = false;\n this.querySelectorAll('obc-navigation-item-group').forEach((item) => {\n item.close();\n });\n }\n\n public override focus(options?: FocusOptions): void {\n this.groupItem?.focus(options);\n }\n\n override render() {\n if (this.treeMode) {\n return html`\n <obc-tree-navigation-item\n part=\"header\"\n .label=${this.label}\n .branches=${this.treeBranches}\n expandable\n ?expanded=${this.openContainer}\n ?checked=${this.checked}\n .hasLeadingIcon=${this.hasIcon}\n .terminalType=${this.terminalType}\n .alerts=${this.expanded ? undefined : this.alerts}\n @expand-toggle=${this.onClickGroup}\n >\n ${this.hasIcon\n ? html`<slot name=\"icon\" slot=\"icon\"></slot>`\n : nothing}\n </obc-tree-navigation-item>\n <div part=\"children\" role=\"group\" ?hidden=${!this.openContainer}>\n <slot></slot>\n </div>\n `;\n }\n\n return html`\n <obc-navigation-item\n @click=${this.onClickGroup}\n .checked=${this.checked}\n .groupSelected=${this.openContainer}\n .href=${this.href}\n .label=${this.label}\n .variant=${this.variant}\n group\n id=\"group-item\"\n ?hasIcon=${this.hasIcon}\n >\n ${this.hasIcon ? html`<slot name=\"icon\" slot=\"icon\"></slot>` : nothing}\n </obc-navigation-item>\n <div\n part=\"flyout\"\n id=\"flyout-wrapper\"\n class=${classMap({\n hug: this.hug,\n [this.variant]: true,\n open: this.openContainer,\n })}\n >\n <div class=\"content\">\n <slot></slot>\n </div>\n </div>\n <div\n class=${classMap({\n shadow: true,\n open: this.openContainer,\n hug: this.hug,\n })}\n ></div>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-navigation-item-group': ObcNavigationItemGroup;\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/components/navigation-menu/navigation-menu.d.ts CHANGED Viewed

@@ -48,8 +48,8 @@ export declare enum ObcNavigationMenuFlyoutVariant {
  *   - **Tree:** Renders the same `obc-navigation-item` / `obc-navigation-item-group`
  *     markup as a hierarchical tree. Groups expand inline (instead of as flyouts),
  *     rows are indented by depth, multiple branches can stay open at once, and the
- *     tree-row presentation (alert badge, terminal marker) is available via the
- *     items' `hasAlertBadge`/`alertCount`/`alertType`/`terminalType` properties.
+ *     tree-row presentation (alert badges, terminal marker) is available via the
+ *     items' `alerts`/`terminalType` properties.
  * - **Responsive Layout:**
  *   - `smallScreen` property adapts the footer and logo layout for smaller viewports.
  * - **Slot-based Content:**

package/dist/components/navigation-menu/navigation-menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"navigation-menu.js","sources":["../../../src/components/navigation-menu/navigation-menu.ts"],"sourcesContent":["import {LitElement, PropertyValues, html, nothing, unsafeCSS} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport compentStyle from './navigation-menu.css?inline';\nimport {ObcNavigationItemGroup} from '../navigation-item-group/navigation-item-group.js';\nimport {ObcNavigationItem} from '../navigation-item/navigation-item.js';\nimport {customElement} from '../../decorator.js';\nimport {\n ObcTreeNavigationItem,\n TreeBranchType,\n} from '../tree-navigation-item/tree-navigation-item.js';\nimport {\n TreeRovingNavigator,\n TreeRovingAdapter,\n} from '../../internal/tree-roving-navigator.js';\n\n/** A nav-menu tree row is either a navigation item or a navigation item group. /\ntype NavTreeRow = ObcNavigationItem \| ObcNavigationItemGroup;\n\nconst NAV_ITEM_TAG = 'obc-navigation-item';\nconst NAV_GROUP_TAG = 'obc-navigation-item-group';\n\nfunction isNavGroup(el: Element): el is ObcNavigationItemGroup {\n return el.tagName.toLowerCase() === NAV_GROUP_TAG;\n}\n\nfunction isNavRow(el: Element): el is NavTreeRow {\n const tag = el.tagName.toLowerCase();\n return tag === NAV_ITEM_TAG \|\| tag === NAV_GROUP_TAG;\n}\n\n/\n `ObcNavigationMenuVariant` – Enumerates the available visual and behavioral variants for `<obc-navigation-menu>`.\n \n - `Full`: Standard navigation menu with both icons and labels.\n * - `IconOnly`: Compact menu showing only icons (should only be used when no flyouts/submenus are present).\n * - `IconOnlyLarge`: Icon-only menu variant designed for use when flyouts/submenus are present.\n * - `Compact`: Space-saving menu with reduced padding and layout.\n * - `Tree`: Hierarchical tree — groups expand inline and rows are indented by depth.\n \n Use these variants to adapt the navigation menu to different layouts or device sizes.\n /\nexport enum ObcNavigationMenuVariant {\n Full = 'full',\n IconOnly = 'icon-only', // Should only be used when no flyouts are present in the navigation menu\n IconOnlyLarge = 'icon-only-large', // Should be used when flyouts are present in the navigation menu\n Compact = 'compact',\n Tree = 'tree',\n}\n\n/\n `ObcNavigationMenuFlyoutVariant` – Enumerates the available visual and behavioral variants for the flyout.\n \n - `Full`: Standard navigation flyout that takes the full height.\n * - `Compact`: Space-saving menu with reduced padding and layout.\n \n Use these variants to adapt the flyout menu to different layouts or device sizes.\n /\nexport enum ObcNavigationMenuFlyoutVariant {\n Full = 'full',\n Compact = 'compact',\n}\n\n/\n `<obc-navigation-menu>` – A flexible, slot-based navigation menu component for organizing primary and secondary navigation items.\n \n This component provides a vertical navigation structure supporting groups, flyouts, and footer sections. It adapts to various layouts and device sizes via its `variant` and `smallScreen` properties. Items and groups are provided via slots, allowing for icons, labels, and nested navigation hierarchies.\n \n Appears as a sidebar or persistent navigation panel, supporting both icon-only and full-label modes. Designed for use as the main navigation in applications, dashboards, or any interface requiring structured navigation.\n \n ## Features\n \n - Variants:\n * - Full: Displays both icons and labels for all navigation items (default).\n * - IconOnly: Shows only icons for a compact appearance. Should only be used when no navigation items have sub-items or flyouts.\n * - IconOnlyLarge: Icon-only mode that supports flyouts/submenus. Use when navigation contains groups or nested items.\n * - Compact: Reduces padding and overall width for a space-saving layout.\n * - Tree: Renders the same `obc-navigation-item` / `obc-navigation-item-group`\n * markup as a hierarchical tree. Groups expand inline (instead of as flyouts),\n * rows are indented by depth, multiple branches can stay open at once, and the\n * tree-row presentation (alert badge, terminal marker) is available via the\n * items' `hasAlertBadge`/`alertCount`/`alertType`/`terminalType` properties.\n * - Responsive Layout:\n * - `smallScreen` property adapts the footer and logo layout for smaller viewports.\n * - Slot-based Content:\n * - `main` slot for primary navigation items and groups.\n * - `footer` slot for secondary actions or links.\n * - `logo` slot for branding or logo placement (position adapts based on variant and screen size).\n * - Nested Navigation:\n * - Supports nested groups and flyouts via `<obc-navigation-item-group>`.\n * - Automatic Variant Propagation:\n * - Child items and groups automatically receive the correct variant for consistent appearance.\n * - Dynamic Content Handling:\n * - Reacts to dynamic addition/removal of items and groups, updating layout and variants as needed.\n * - Interaction:\n * - Clicking a navigation item closes all open groups/flyouts for streamlined navigation.\n \n ## Usage Guidelines\n \n Use `<obc-navigation-menu>` as the main navigation container in your application layout. Place navigation items and groups in the `main` slot for primary navigation, and use the `footer` slot for secondary actions (such as settings or help). The `logo` slot is intended for branding and is positioned according to the selected variant and screen size.\n \n - Use the `Full` variant for standard navigation with both icons and labels.\n * - Use `IconOnly` only when there are no nested groups or flyouts; otherwise, use `IconOnlyLarge` for icon-only navigation with flyout support.\n * - The `Compact` variant is suitable for layouts with limited space or when a minimal navigation appearance is desired.\n * - Use the `Tree` variant for hierarchical navigation (file trees, nested\n * sections). The existing item/group markup is reused unchanged — only the\n * `variant` changes. Footer and logo slots remain flat. Mark a group with\n * `defaultOpen` to have it start expanded.\n * - Set `smallScreen` to `true` to optimize the layout for smaller devices or responsive breakpoints.\n \n TODO(designer): Provide additional guidance on when to use each variant and recommended slot content for best usability.\n \n ## Slots\n \n \| Slot Name \| Renders When... \| Purpose \|\n * \|-----------\|----------------\|---------\|\n * \| main \| Always \| Primary navigation items and groups. \|\n * \| footer \| Always \| Secondary navigation items (e.g., settings, help). \|\n * \| logo \| Always \| Branding/logo area (position varies by variant and screen size). \|\n \n Place `<obc-navigation-item>`, `<obc-navigation-item-group>`, or other suitable elements in these slots. For icons, use `<obi-placeholder>`, `<obi-applications>`, or other OpenBridge icon components in the `icon` slot of each navigation item.\n \n ## Properties\n \n - `variant` (`ObcNavigationMenuVariant`): Controls the visual style and layout of the menu. Default is `Full`.\n * - `smallScreen` (`boolean`): When `true`, adapts the layout for small screens (e.g., moves logo into the footer area).\n \n ## Best Practices and Constraints\n \n - Only use the `IconOnly` variant when there are no navigation items with sub-items or flyouts. Use `IconOnlyLarge` if your navigation includes groups or nested items.\n * - Place only navigation-related components in the `main` and `footer` slots for clarity and accessibility.\n * - For best accessibility, ensure each navigation item has a clear label and, if using icons, a suitable `aria-label` or accessible name.\n * - Avoid placing interactive elements other than navigation items/groups in the `main` or `footer` slots.\n \n ## Example\n \n ```html\n * <obc-navigation-menu variant=\"full\">\n * <obc-navigation-item-group slot=\"main\" label=\"Apps\">\n * <obi-applications slot=\"icon\"></obi-applications>\n * <obc-navigation-item label=\"Sub item 1\" hasIcon href=\"#\">\n * <obi-placeholder slot=\"icon\"></obi-placeholder>\n * </obc-navigation-item>\n * </obc-navigation-item-group>\n * <obc-navigation-item slot=\"footer\" label=\"Settings\" hasIcon href=\"#\">\n * <obi-settings-iec slot=\"icon\"></obi-settings-iec>\n * </obc-navigation-item>\n * <obc-vendor-button imageSrc=\"/companylogo-day.png\" alt=\"logo\" slot=\"logo\"></obc-vendor-button>\n * </obc-navigation-menu>\n * ```\n \n In this example, the menu displays a group with sub-items in the main navigation, several footer actions, and a logo.\n \n @slot main - Slot for primary navigation items and groups.\n * @slot footer - Slot for secondary navigation items (e.g., settings, help).\n * @slot logo - Slot for branding/logo area.\n /\n@customElement('obc-navigation-menu')\nexport class ObcNavigationMenu extends LitElement {\n /\n Controls the visual style and layout of the navigation menu.\n \n - `full`: Standard menu with icons and labels (default).\n * - `icon-only`: Compact, icon-only menu (use only when no flyouts/groups are present).\n * - `icon-only-large`: Icon-only menu supporting flyouts/groups.\n * - `compact`: Minimal, space-saving menu.\n * - `tree`: Hierarchical tree — groups expand inline and rows are indented by depth.\n /\n @property({type: String}) variant: ObcNavigationMenuVariant =\n ObcNavigationMenuVariant.Full;\n\n /\n Visual variant of the flyout.\n * One of `Full` (default) or `Compact`.\n /\n @property({type: String}) flyoutVariant: ObcNavigationMenuFlyoutVariant =\n ObcNavigationMenuFlyoutVariant.Full;\n\n /\n When `true`, adapts the layout for small screens (e.g., moves logo into the footer area and adjusts item layout).\n /\n @property({type: Boolean}) smallScreen = false;\n\n private slotObservers: MutationObserver[] = [];\n @state() private hasFooter = false;\n\n /\n Roving-tabindex + arrow-key navigation for the Tree variant, sharing the\n * navigator that drives `obc-tree-navigation`. Engaged only while\n * `variant === Tree` (see `onTreeKeydown`).\n /\n private readonly treeNavigator = new TreeRovingNavigator<NavTreeRow>(this, {\n getRows: () => this.treeRootRows(),\n childRows: (row) => this.treeChildRows(row),\n isGroup: (row) => isNavGroup(row),\n // Read the group's own synchronous open state, not the shadow header's\n // attribute (which lags a render tick behind a keyboard expand/collapse).\n isExpanded: (row) => isNavGroup(row) && row.expanded,\n setExpanded: (row, expanded) => {\n if (!isNavGroup(row)) return;\n if (expanded) row.open();\n else row.close();\n },\n innerItem: (row) => this.treeInnerItem(row),\n } satisfies TreeRovingAdapter<NavTreeRow>);\n\n /* Top-level tree rows of the main slot (mirrors `assignTreeBranches`'s filter). /\n private treeRootRows(): NavTreeRow[] {\n return Array.from(this.children).filter((child): child is NavTreeRow => {\n if (!isNavRow(child)) return false;\n const slot = child.getAttribute('slot');\n return slot === null \|\| slot === 'main';\n });\n }\n\n /* Direct tree-row children of a row, in document order. /\n private treeChildRows(row: NavTreeRow): NavTreeRow[] {\n return Array.from(row.children).filter(isNavRow);\n }\n\n /* The inline `obc-tree-navigation-item` a tree-mode row renders in its shadow root. */\n private treeInnerItem(row: NavTreeRow): ObcTreeNavigationItem \| null {\n return (\n row.shadowRoot?.querySelector<ObcTreeNavigationItem>(\n 'obc-tree-navigation-item'\n ) ?? null\n );\n }\n\n private onTreeKeydown = (event: KeyboardEvent): void => {\n if (this.variant !== ObcNavigationMenuVariant.Tree) return;\n if (this.treeNavigator.handleKeydown(event)) event.preventDefault();\n };\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener('keydown', this.onTreeKeydown);\n }\n\n findAllElements<T extends Element>(\n el: Element,\n tag: string,\n {\n slot,\n stopTag,\n }: {\n slot?: 'main' \| 'footer' \| 'logo';\n stopTag?: string;\n } = {}\n ): T[] {\n const elements: T[] = [];\n for (const child of el.children) {\n if (child.tagName.toLowerCase() === tag) {\n if (slot && child.getAttribute('slot') !== slot) {\n continue;\n }\n elements.push(child as T);\n } else if (stopTag && child.tagName.toLowerCase() === stopTag) {\n continue;\n } else {\n if (slot && child.getAttribute('slot') !== slot) {\n continue;\n }\n elements.push(...this.findAllElements<T>(child, tag, {stopTag}));\n }\n }\n return elements;\n }\n\n findAllGroups(el: Element): ObcNavigationItemGroup[] {\n // Find all groups that are not in a group\n return this.findAllElements<ObcNavigationItemGroup>(\n el,\n 'obc-navigation-item-group'\n );\n }\n\n findRootItems(el: Element): ObcNavigationItem[] {\n // Find all items that are not in a group or in an item\n return this.findAllElements<ObcNavigationItem>(el, 'obc-navigation-item', {\n stopTag: 'obc-navigation-item-group',\n });\n }\n\n findAllItems(\n el: Element,\n slot?: 'main' \| 'footer' \| 'logo'\n ): ObcNavigationItem[] {\n return this.findAllElements<ObcNavigationItem>(el, 'obc-navigation-item', {\n slot,\n });\n }\n\n closeAllGroups() {\n const groups = this.findAllGroups(this);\n groups.forEach((group) => {\n group.close();\n });\n }\n\n registerGroup(groups: ObcNavigationItemGroup[]) {\n groups.forEach((group) => {\n group.addEventListener('open', () => {\n if (this.variant === ObcNavigationMenuVariant.Tree) return;\n groups.forEach((g) => {\n if (g !== group) {\n g.close();\n }\n });\n });\n const subGroups = this.findAllGroups(group);\n this.registerGroup(subGroups);\n });\n }\n\n private cleanupSlotObservers() {\n this.slotObservers.forEach((observer) => observer.disconnect());\n this.slotObservers = [];\n }\n\n private setupSlotObservers() {\n this.cleanupSlotObservers();\n\n const mainSlot = this.shadowRoot?.querySelector(\n 'slot[name=\"main\"]'\n ) as HTMLSlotElement;\n const footerSlot = this.shadowRoot?.querySelector(\n 'slot[name=\"footer\"]'\n ) as HTMLSlotElement;\n\n this.hasFooter = footerSlot?.assignedElements().length > 0;\n\n [mainSlot, footerSlot].forEach((slot) => {\n if (slot) {\n const slottedElements = slot.assignedElements();\n slottedElements.forEach((element) => {\n const observer = new MutationObserver(() => {\n this.setupItems();\n });\n\n observer.observe(element, {\n childList: true,\n subtree: true,\n });\n\n this.slotObservers.push(observer);\n });\n }\n });\n }\n\n protected override firstUpdated(_changedProperties: PropertyValues): void {\n super.firstUpdated(_changedProperties);\n const groups = this.findAllGroups(this);\n this.registerGroup(groups);\n }\n\n protected override updated(_changedProperties: PropertyValues): void {\n super.updated(_changedProperties);\n if (\n _changedProperties.has('variant') \|\|\n _changedProperties.has('flyoutVariant')\n ) {\n this.setupItems();\n }\n }\n\n // Recursively set variant for children of groups\n private setVariantToFlyoutItems(el: Element) {\n // Find all descendant items inside this element (not direct children of the nav menu)\n const items = this.findAllElements<ObcNavigationItem>(\n el,\n 'obc-navigation-item'\n );\n items.forEach((item) => {\n item.variant = ObcNavigationMenuVariant.Full;\n });\n\n const groups = this.findAllGroups(el);\n groups.forEach((group) => {\n group.variant = ObcNavigationMenuVariant.Full;\n this.setVariantToFlyoutItems(group);\n });\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.cleanupSlotObservers();\n this.removeEventListener('keydown', this.onTreeKeydown);\n }\n\n private handleSlotChange() {\n this.setupItems();\n this.setupSlotObservers();\n }\n\n private assignTreeBranches(el: Element, depth: number): void {\n for (const child of el.children) {\n const tag = child.tagName.toLowerCase();\n const isItem = tag === 'obc-navigation-item';\n const isGroup = tag === 'obc-navigation-item-group';\n if (!isItem && !isGroup) continue;\n // Top-level rows are slotted; only treeify the main slot. Nested rows have\n // no slot attribute and always belong to their group's tree.\n if (depth === 0) {\n const slot = child.getAttribute('slot');\n if (slot !== null && slot !== 'main') continue;\n }\n const branches: TreeBranchType[] = Array.from(\n {length: depth},\n () => TreeBranchType.blank\n );\n const row = child as ObcNavigationItem \| ObcNavigationItemGroup;\n row.treeMode = true;\n row.treeBranches = branches;\n if (isGroup) {\n this.assignTreeBranches(child, depth + 1);\n }\n }\n }\n\n // Reset tree mode on every descendant item/group so switching away from the\n // Tree variant restores the flat rendering.\n private clearTreeMode(el: Element): void {\n for (const child of el.children) {\n const tag = child.tagName.toLowerCase();\n const isItem = tag === 'obc-navigation-item';\n const isGroup = tag === 'obc-navigation-item-group';\n if (!isItem && !isGroup) continue;\n const row = child as ObcNavigationItem \| ObcNavigationItemGroup;\n row.treeMode = false;\n row.treeBranches = [];\n if (isGroup) {\n this.clearTreeMode(child);\n }\n }\n }\n\n private setupItems() {\n if (this.variant === ObcNavigationMenuVariant.Tree) {\n this.assignTreeBranches(this, 0);\n // Footer and logo are not part of the tree — keep them as flat full-variant\n // items (and clear any tree mode left over from the main slot's walk).\n (['footer', 'logo'] as const).forEach((slot) => {\n this.findAllItems(this, slot).forEach((item) => {\n item.treeMode = false;\n item.treeBranches = [];\n item.variant = ObcNavigationMenuVariant.Full;\n });\n });\n // Defer so the rows' inline tree-item headers exist before the roving\n // tabindex is assigned to them.\n queueMicrotask(() => this.treeNavigator.refresh());\n return;\n }\n\n this.clearTreeMode(this);\n\n const hug =\n this.variant !== ObcNavigationMenuVariant.Full \|\|\n this.flyoutVariant === ObcNavigationMenuFlyoutVariant.Compact;\n this.setHugToGroups(this, hug);\n\n // Set variant to all groups (top-level)\n const groups = this.findAllGroups(this);\n groups.forEach((group) => {\n group.variant = this.variant;\n // But for flyout children, force variant to full\n this.setVariantToFlyoutItems(group);\n });\n\n // Set variant to all root items (not in group)\n this.findRootItems(this).forEach((item) => {\n item.variant = this.variant;\n });\n\n // Footer and logo logic (same as before)\n const footerVariant =\n this.smallScreen && this.variant === ObcNavigationMenuVariant.Full\n ? ObcNavigationMenuVariant.Compact\n : this.variant;\n this.findAllItems(this, 'footer').forEach((item) => {\n item.variant = footerVariant;\n });\n this.findAllItems(this, 'logo').forEach((item) => {\n item.variant = footerVariant;\n });\n\n // Close all groups on item click (unchanged)\n this.findAllItems(this).forEach((item) => {\n item.addEventListener('click', () => {\n this.closeAllGroups();\n });\n });\n }\n\n private setHugToGroups(el: Element, hug: boolean) {\n const groups = this.findAllGroups(el);\n groups.forEach((group) => {\n group.hug = hug;\n this.setHugToGroups(group, hug);\n });\n }\n\n override render() {\n return html`\n <div\n class=\"wrapper ${this.variant} ${this.smallScreen\n ? 'small-screen'\n : ''}\"\n >\n <nav class=\"main\">\n <ol>\n <slot name=\"main\" @slotchange=${this.handleSlotChange}></slot>\n </ol>\n </nav>\n <div class=\"footer ${this.hasFooter ? 'has-footer' : ''}\">\n <nav>\n <ol>\n <slot name=\"footer\" @slotchange=${this.handleSlotChange}></slot>\n ${this.smallScreen ? html` <slot name=\"logo\"></slot> ` : nothing}\n </ol>\n </nav>\n ${this.smallScreen\n ? nothing\n : html`\n <div class=\"logo\">\n <slot name=\"logo\"></slot>\n </div>\n `}\n </div>\n </div>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-navigation-menu': ObcNavigationMenu;\n }\n}\n"],"names":["ObcNavigationMenuVariant","ObcNavigationMenuFlyoutVariant"],"mappings":";;;;;;;;;;;;;;;;AAkBA,MAAM,eAAe;AACrB,MAAM,gBAAgB;AAEtB,SAAS,WAAW,IAA2C;AAC7D,SAAO,GAAG,QAAQ,YAAA,MAAkB;AACtC;AAEA,SAAS,SAAS,IAA+B;AAC/C,QAAM,MAAM,GAAG,QAAQ,YAAA;AACvB,SAAO,QAAQ,gBAAgB,QAAQ;AACzC;AAaO,IAAK,6CAAAA,8BAAL;AACLA,4BAAA,MAAA,IAAO;AACPA,4BAAA,UAAA,IAAW;AACXA,4BAAA,eAAA,IAAgB;AAChBA,4BAAA,SAAA,IAAU;AACVA,4BAAA,MAAA,IAAO;AALG,SAAAA;AAAA,GAAA,4BAAA,CAAA,CAAA;AAgBL,IAAK,mDAAAC,oCAAL;AACLA,kCAAA,MAAA,IAAO;AACPA,kCAAA,SAAA,IAAU;AAFA,SAAAA;AAAA,GAAA,kCAAA,CAAA,CAAA;AAoGL,IAAM,oBAAN,cAAgC,WAAW;AAAA,EAA3C,cAAA;AAAA,UAAA,GAAA,SAAA;AAUqB,SAAA,UACxB;AAMwB,SAAA,gBACxB;AAKyB,SAAA,cAAc;AAEzC,SAAQ,gBAAoC,CAAA;AACnC,SAAQ,YAAY;AAO7B,SAAiB,gBAAgB,IAAI,oBAAgC,MAAM;AAAA,MACzE,SAAS,MAAM,KAAK,aAAA;AAAA,MACpB,WAAW,CAAC,QAAQ,KAAK,cAAc,GAAG;AAAA,MAC1C,SAAS,CAAC,QAAQ,WAAW,GAAG;AAAA;AAAA;AAAA,MAGhC,YAAY,CAAC,QAAQ,WAAW,GAAG,KAAK,IAAI;AAAA,MAC5C,aAAa,CAAC,KAAK,aAAa;AAC9B,YAAI,CAAC,WAAW,GAAG,EAAG;AACtB,YAAI,cAAc,KAAA;AAAA,iBACT,MAAA;AAAA,MACX;AAAA,MACA,WAAW,CAAC,QAAQ,KAAK,cAAc,GAAG;AAAA,IAAA,CACH;AAyBzC,SAAQ,gBAAgB,CAAC,UAA+B;AACtD,UAAI,KAAK,YAAY,OAA+B;AACpD,UAAI,KAAK,cAAc,cAAc,KAAK,SAAS,eAAA;AAAA,IACrD;AAAA,EAAA;AAAA;AAAA,EAzBQ,eAA6B;AACnC,WAAO,MAAM,KAAK,KAAK,QAAQ,EAAE,OAAO,CAAC,UAA+B;AACtE,UAAI,CAAC,SAAS,KAAK,EAAG,QAAO;AAC7B,YAAM,OAAO,MAAM,aAAa,MAAM;AACtC,aAAO,SAAS,QAAQ,SAAS;AAAA,IACnC,CAAC;AAAA,EACH;AAAA;AAAA,EAGQ,cAAc,KAA+B;AACnD,WAAO,MAAM,KAAK,IAAI,QAAQ,EAAE,OAAO,QAAQ;AAAA,EACjD;AAAA;AAAA,EAGQ,cAAc,KAA+C;AACnE,WACE,IAAI,YAAY;AAAA,MACd;AAAA,IAAA,KACG;AAAA,EAET;AAAA,EAOS,oBAA0B;AACjC,UAAM,kBAAA;AACN,SAAK,iBAAiB,WAAW,KAAK,aAAa;AAAA,EACrD;AAAA,EAEA,gBACE,IACA,KACA;AAAA,IACE;AAAA,IACA;AAAA,EAAA,IAIE,IACC;AACL,UAAM,WAAgB,CAAA;AACtB,eAAW,SAAS,GAAG,UAAU;AAC/B,UAAI,MAAM,QAAQ,YAAA,MAAkB,KAAK;AACvC,YAAI,QAAQ,MAAM,aAAa,MAAM,MAAM,MAAM;AAC/C;AAAA,QACF;AACA,iBAAS,KAAK,KAAU;AAAA,MAC1B,WAAW,WAAW,MAAM,QAAQ,YAAA,MAAkB,SAAS;AAC7D;AAAA,MACF,OAAO;AACL,YAAI,QAAQ,MAAM,aAAa,MAAM,MAAM,MAAM;AAC/C;AAAA,QACF;AACA,iBAAS,KAAK,GAAG,KAAK,gBAAmB,OAAO,KAAK,EAAC,QAAA,CAAQ,CAAC;AAAA,MACjE;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAAA,EAEA,cAAc,IAAuC;AAEnD,WAAO,KAAK;AAAA,MACV;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ;AAAA,EAEA,cAAc,IAAkC;AAE9C,WAAO,KAAK,gBAAmC,IAAI,uBAAuB;AAAA,MACxE,SAAS;AAAA,IAAA,CACV;AAAA,EACH;AAAA,EAEA,aACE,IACA,MACqB;AACrB,WAAO,KAAK,gBAAmC,IAAI,uBAAuB;AAAA,MACxE;AAAA,IAAA,CACD;AAAA,EACH;AAAA,EAEA,iBAAiB;AACf,UAAM,SAAS,KAAK,cAAc,IAAI;AACtC,WAAO,QAAQ,CAAC,UAAU;AACxB,YAAM,MAAA;AAAA,IACR,CAAC;AAAA,EACH;AAAA,EAEA,cAAc,QAAkC;AAC9C,WAAO,QAAQ,CAAC,UAAU;AACxB,YAAM,iBAAiB,QAAQ,MAAM;AACnC,YAAI,KAAK,YAAY,OAA+B;AACpD,eAAO,QAAQ,CAAC,MAAM;AACpB,cAAI,MAAM,OAAO;AACf,cAAE,MAAA;AAAA,UACJ;AAAA,QACF,CAAC;AAAA,MACH,CAAC;AACD,YAAM,YAAY,KAAK,cAAc,KAAK;AAC1C,WAAK,cAAc,SAAS;AAAA,IAC9B,CAAC;AAAA,EACH;AAAA,EAEQ,uBAAuB;AAC7B,SAAK,cAAc,QAAQ,CAAC,aAAa,SAAS,YAAY;AAC9D,SAAK,gBAAgB,CAAA;AAAA,EACvB;AAAA,EAEQ,qBAAqB;AAC3B,SAAK,qBAAA;AAEL,UAAM,WAAW,KAAK,YAAY;AAAA,MAChC;AAAA,IAAA;AAEF,UAAM,aAAa,KAAK,YAAY;AAAA,MAClC;AAAA,IAAA;AAGF,SAAK,YAAY,YAAY,iBAAA,EAAmB,SAAS;AAEzD,KAAC,UAAU,UAAU,EAAE,QAAQ,CAAC,SAAS;AACvC,UAAI,MAAM;AACR,cAAM,kBAAkB,KAAK,iBAAA;AAC7B,wBAAgB,QAAQ,CAAC,YAAY;AACnC,gBAAM,WAAW,IAAI,iBAAiB,MAAM;AAC1C,iBAAK,WAAA;AAAA,UACP,CAAC;AAED,mBAAS,QAAQ,SAAS;AAAA,YACxB,WAAW;AAAA,YACX,SAAS;AAAA,UAAA,CACV;AAED,eAAK,cAAc,KAAK,QAAQ;AAAA,QAClC,CAAC;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEmB,aAAa,oBAA0C;AACxE,UAAM,aAAa,kBAAkB;AACrC,UAAM,SAAS,KAAK,cAAc,IAAI;AACtC,SAAK,cAAc,MAAM;AAAA,EAC3B;AAAA,EAEmB,QAAQ,oBAA0C;AACnE,UAAM,QAAQ,kBAAkB;AAChC,QACE,mBAAmB,IAAI,SAAS,KAChC,mBAAmB,IAAI,eAAe,GACtC;AACA,WAAK,WAAA;AAAA,IACP;AAAA,EACF;AAAA;AAAA,EAGQ,wBAAwB,IAAa;AAE3C,UAAM,QAAQ,KAAK;AAAA,MACjB;AAAA,MACA;AAAA,IAAA;AAEF,UAAM,QAAQ,CAAC,SAAS;AACtB,WAAK,UAAU;AAAA,IACjB,CAAC;AAED,UAAM,SAAS,KAAK,cAAc,EAAE;AACpC,WAAO,QAAQ,CAAC,UAAU;AACxB,YAAM,UAAU;AAChB,WAAK,wBAAwB,KAAK;AAAA,IACpC,CAAC;AAAA,EACH;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA;AACN,SAAK,qBAAA;AACL,SAAK,oBAAoB,WAAW,KAAK,aAAa;AAAA,EACxD;AAAA,EAEQ,mBAAmB;AACzB,SAAK,WAAA;AACL,SAAK,mBAAA;AAAA,EACP;AAAA,EAEQ,mBAAmB,IAAa,OAAqB;AAC3D,eAAW,SAAS,GAAG,UAAU;AAC/B,YAAM,MAAM,MAAM,QAAQ,YAAA;AAC1B,YAAM,SAAS,QAAQ;AACvB,YAAM,UAAU,QAAQ;AACxB,UAAI,CAAC,UAAU,CAAC,QAAS;AAGzB,UAAI,UAAU,GAAG;AACf,cAAM,OAAO,MAAM,aAAa,MAAM;AACtC,YAAI,SAAS,QAAQ,SAAS,OAAQ;AAAA,MACxC;AACA,YAAM,WAA6B,MAAM;AAAA,QACvC,EAAC,QAAQ,MAAA;AAAA,QACT,MAAM,eAAe;AAAA,MAAA;AAEvB,YAAM,MAAM;AACZ,UAAI,WAAW;AACf,UAAI,eAAe;AACnB,UAAI,SAAS;AACX,aAAK,mBAAmB,OAAO,QAAQ,CAAC;AAAA,MAC1C;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA,EAIQ,cAAc,IAAmB;AACvC,eAAW,SAAS,GAAG,UAAU;AAC/B,YAAM,MAAM,MAAM,QAAQ,YAAA;AAC1B,YAAM,SAAS,QAAQ;AACvB,YAAM,UAAU,QAAQ;AACxB,UAAI,CAAC,UAAU,CAAC,QAAS;AACzB,YAAM,MAAM;AACZ,UAAI,WAAW;AACf,UAAI,eAAe,CAAA;AACnB,UAAI,SAAS;AACX,aAAK,cAAc,KAAK;AAAA,MAC1B;AAAA,IACF;AAAA,EACF;AAAA,EAEQ,aAAa;AACnB,QAAI,KAAK,YAAY,QAA+B;AAClD,WAAK,mBAAmB,MAAM,CAAC;AAG9B,OAAC,UAAU,MAAM,EAAY,QAAQ,CAAC,SAAS;AAC9C,aAAK,aAAa,MAAM,IAAI,EAAE,QAAQ,CAAC,SAAS;AAC9C,eAAK,WAAW;AAChB,eAAK,eAAe,CAAA;AACpB,eAAK,UAAU;AAAA,QACjB,CAAC;AAAA,MACH,CAAC;AAGD,qBAAe,MAAM,KAAK,cAAc,QAAA,CAAS;AACjD;AAAA,IACF;AAEA,SAAK,cAAc,IAAI;AAEvB,UAAM,MACJ,KAAK,YAAY,UACjB,KAAK,kBAAkB;AACzB,SAAK,eAAe,MAAM,GAAG;AAG7B,UAAM,SAAS,KAAK,cAAc,IAAI;AACtC,WAAO,QAAQ,CAAC,UAAU;AACxB,YAAM,UAAU,KAAK;AAErB,WAAK,wBAAwB,KAAK;AAAA,IACpC,CAAC;AAGD,SAAK,cAAc,IAAI,EAAE,QAAQ,CAAC,SAAS;AACzC,WAAK,UAAU,KAAK;AAAA,IACtB,CAAC;AAGD,UAAM,gBACJ,KAAK,eAAe,KAAK,YAAY,SACjC,YACA,KAAK;AACX,SAAK,aAAa,MAAM,QAAQ,EAAE,QAAQ,CAAC,SAAS;AAClD,WAAK,UAAU;AAAA,IACjB,CAAC;AACD,SAAK,aAAa,MAAM,MAAM,EAAE,QAAQ,CAAC,SAAS;AAChD,WAAK,UAAU;AAAA,IACjB,CAAC;AAGD,SAAK,aAAa,IAAI,EAAE,QAAQ,CAAC,SAAS;AACxC,WAAK,iBAAiB,SAAS,MAAM;AACnC,aAAK,eAAA;AAAA,MACP,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AAAA,EAEQ,eAAe,IAAa,KAAc;AAChD,UAAM,SAAS,KAAK,cAAc,EAAE;AACpC,WAAO,QAAQ,CAAC,UAAU;AACxB,YAAM,MAAM;AACZ,WAAK,eAAe,OAAO,GAAG;AAAA,IAChC,CAAC;AAAA,EACH;AAAA,EAES,SAAS;AAChB,WAAO;AAAA;AAAA,yBAEc,KAAK,OAAO,IAAI,KAAK,cAClC,iBACA,EAAE;AAAA;AAAA;AAAA;AAAA,4CAI8B,KAAK,gBAAgB;AAAA;AAAA;AAAA,6BAGpC,KAAK,YAAY,eAAe,EAAE;AAAA;AAAA;AAAA,gDAGf,KAAK,gBAAgB;AAAA,gBACrD,KAAK,cAAc,oCAAoC,OAAO;AAAA;AAAA;AAAA,YAGlE,KAAK,cACH,UACA;AAAA;AAAA;AAAA;AAAA,eAIC;AAAA;AAAA;AAAA;AAAA,EAIb;AAGF;AA1Xa,kBAyXK,SAAS,UAAU,YAAY;AA/WrB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAVb,kBAUe,WAAA,WAAA,CAAA;AAOA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAjBb,kBAiBe,WAAA,iBAAA,CAAA;AAMC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAvBd,kBAuBgB,WAAA,eAAA,CAAA;AAGV,gBAAA;AAAA,EAAhB,MAAA;AAAM,GA1BI,kBA0BM,WAAA,aAAA,CAAA;AA1BN,oBAAN,gBAAA;AAAA,EADN,cAAc,qBAAqB;AAAA,GACvB,iBAAA;"}
1	+ {"version":3,"file":"navigation-menu.js","sources":["../../../src/components/navigation-menu/navigation-menu.ts"],"sourcesContent":["import {LitElement, PropertyValues, html, nothing, unsafeCSS} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport compentStyle from './navigation-menu.css?inline';\nimport {ObcNavigationItemGroup} from '../navigation-item-group/navigation-item-group.js';\nimport {ObcNavigationItem} from '../navigation-item/navigation-item.js';\nimport {customElement} from '../../decorator.js';\nimport {\n ObcTreeNavigationItem,\n TreeBranchType,\n} from '../tree-navigation-item/tree-navigation-item.js';\nimport {\n TreeRovingNavigator,\n TreeRovingAdapter,\n} from '../../internal/tree-roving-navigator.js';\n\n/** A nav-menu tree row is either a navigation item or a navigation item group. /\ntype NavTreeRow = ObcNavigationItem \| ObcNavigationItemGroup;\n\nconst NAV_ITEM_TAG = 'obc-navigation-item';\nconst NAV_GROUP_TAG = 'obc-navigation-item-group';\n\nfunction isNavGroup(el: Element): el is ObcNavigationItemGroup {\n return el.tagName.toLowerCase() === NAV_GROUP_TAG;\n}\n\nfunction isNavRow(el: Element): el is NavTreeRow {\n const tag = el.tagName.toLowerCase();\n return tag === NAV_ITEM_TAG \|\| tag === NAV_GROUP_TAG;\n}\n\n/\n `ObcNavigationMenuVariant` – Enumerates the available visual and behavioral variants for `<obc-navigation-menu>`.\n \n - `Full`: Standard navigation menu with both icons and labels.\n * - `IconOnly`: Compact menu showing only icons (should only be used when no flyouts/submenus are present).\n * - `IconOnlyLarge`: Icon-only menu variant designed for use when flyouts/submenus are present.\n * - `Compact`: Space-saving menu with reduced padding and layout.\n * - `Tree`: Hierarchical tree — groups expand inline and rows are indented by depth.\n \n Use these variants to adapt the navigation menu to different layouts or device sizes.\n /\nexport enum ObcNavigationMenuVariant {\n Full = 'full',\n IconOnly = 'icon-only', // Should only be used when no flyouts are present in the navigation menu\n IconOnlyLarge = 'icon-only-large', // Should be used when flyouts are present in the navigation menu\n Compact = 'compact',\n Tree = 'tree',\n}\n\n/\n `ObcNavigationMenuFlyoutVariant` – Enumerates the available visual and behavioral variants for the flyout.\n \n - `Full`: Standard navigation flyout that takes the full height.\n * - `Compact`: Space-saving menu with reduced padding and layout.\n \n Use these variants to adapt the flyout menu to different layouts or device sizes.\n /\nexport enum ObcNavigationMenuFlyoutVariant {\n Full = 'full',\n Compact = 'compact',\n}\n\n/\n `<obc-navigation-menu>` – A flexible, slot-based navigation menu component for organizing primary and secondary navigation items.\n \n This component provides a vertical navigation structure supporting groups, flyouts, and footer sections. It adapts to various layouts and device sizes via its `variant` and `smallScreen` properties. Items and groups are provided via slots, allowing for icons, labels, and nested navigation hierarchies.\n \n Appears as a sidebar or persistent navigation panel, supporting both icon-only and full-label modes. Designed for use as the main navigation in applications, dashboards, or any interface requiring structured navigation.\n \n ## Features\n \n - Variants:\n * - Full: Displays both icons and labels for all navigation items (default).\n * - IconOnly: Shows only icons for a compact appearance. Should only be used when no navigation items have sub-items or flyouts.\n * - IconOnlyLarge: Icon-only mode that supports flyouts/submenus. Use when navigation contains groups or nested items.\n * - Compact: Reduces padding and overall width for a space-saving layout.\n * - Tree: Renders the same `obc-navigation-item` / `obc-navigation-item-group`\n * markup as a hierarchical tree. Groups expand inline (instead of as flyouts),\n * rows are indented by depth, multiple branches can stay open at once, and the\n * tree-row presentation (alert badges, terminal marker) is available via the\n * items' `alerts`/`terminalType` properties.\n * - Responsive Layout:\n * - `smallScreen` property adapts the footer and logo layout for smaller viewports.\n * - Slot-based Content:\n * - `main` slot for primary navigation items and groups.\n * - `footer` slot for secondary actions or links.\n * - `logo` slot for branding or logo placement (position adapts based on variant and screen size).\n * - Nested Navigation:\n * - Supports nested groups and flyouts via `<obc-navigation-item-group>`.\n * - Automatic Variant Propagation:\n * - Child items and groups automatically receive the correct variant for consistent appearance.\n * - Dynamic Content Handling:\n * - Reacts to dynamic addition/removal of items and groups, updating layout and variants as needed.\n * - Interaction:\n * - Clicking a navigation item closes all open groups/flyouts for streamlined navigation.\n \n ## Usage Guidelines\n \n Use `<obc-navigation-menu>` as the main navigation container in your application layout. Place navigation items and groups in the `main` slot for primary navigation, and use the `footer` slot for secondary actions (such as settings or help). The `logo` slot is intended for branding and is positioned according to the selected variant and screen size.\n \n - Use the `Full` variant for standard navigation with both icons and labels.\n * - Use `IconOnly` only when there are no nested groups or flyouts; otherwise, use `IconOnlyLarge` for icon-only navigation with flyout support.\n * - The `Compact` variant is suitable for layouts with limited space or when a minimal navigation appearance is desired.\n * - Use the `Tree` variant for hierarchical navigation (file trees, nested\n * sections). The existing item/group markup is reused unchanged — only the\n * `variant` changes. Footer and logo slots remain flat. Mark a group with\n * `defaultOpen` to have it start expanded.\n * - Set `smallScreen` to `true` to optimize the layout for smaller devices or responsive breakpoints.\n \n TODO(designer): Provide additional guidance on when to use each variant and recommended slot content for best usability.\n \n ## Slots\n \n \| Slot Name \| Renders When... \| Purpose \|\n * \|-----------\|----------------\|---------\|\n * \| main \| Always \| Primary navigation items and groups. \|\n * \| footer \| Always \| Secondary navigation items (e.g., settings, help). \|\n * \| logo \| Always \| Branding/logo area (position varies by variant and screen size). \|\n \n Place `<obc-navigation-item>`, `<obc-navigation-item-group>`, or other suitable elements in these slots. For icons, use `<obi-placeholder>`, `<obi-applications>`, or other OpenBridge icon components in the `icon` slot of each navigation item.\n \n ## Properties\n \n - `variant` (`ObcNavigationMenuVariant`): Controls the visual style and layout of the menu. Default is `Full`.\n * - `smallScreen` (`boolean`): When `true`, adapts the layout for small screens (e.g., moves logo into the footer area).\n \n ## Best Practices and Constraints\n \n - Only use the `IconOnly` variant when there are no navigation items with sub-items or flyouts. Use `IconOnlyLarge` if your navigation includes groups or nested items.\n * - Place only navigation-related components in the `main` and `footer` slots for clarity and accessibility.\n * - For best accessibility, ensure each navigation item has a clear label and, if using icons, a suitable `aria-label` or accessible name.\n * - Avoid placing interactive elements other than navigation items/groups in the `main` or `footer` slots.\n \n ## Example\n \n ```html\n * <obc-navigation-menu variant=\"full\">\n * <obc-navigation-item-group slot=\"main\" label=\"Apps\">\n * <obi-applications slot=\"icon\"></obi-applications>\n * <obc-navigation-item label=\"Sub item 1\" hasIcon href=\"#\">\n * <obi-placeholder slot=\"icon\"></obi-placeholder>\n * </obc-navigation-item>\n * </obc-navigation-item-group>\n * <obc-navigation-item slot=\"footer\" label=\"Settings\" hasIcon href=\"#\">\n * <obi-settings-iec slot=\"icon\"></obi-settings-iec>\n * </obc-navigation-item>\n * <obc-vendor-button imageSrc=\"/companylogo-day.png\" alt=\"logo\" slot=\"logo\"></obc-vendor-button>\n * </obc-navigation-menu>\n * ```\n \n In this example, the menu displays a group with sub-items in the main navigation, several footer actions, and a logo.\n \n @slot main - Slot for primary navigation items and groups.\n * @slot footer - Slot for secondary navigation items (e.g., settings, help).\n * @slot logo - Slot for branding/logo area.\n /\n@customElement('obc-navigation-menu')\nexport class ObcNavigationMenu extends LitElement {\n /\n Controls the visual style and layout of the navigation menu.\n \n - `full`: Standard menu with icons and labels (default).\n * - `icon-only`: Compact, icon-only menu (use only when no flyouts/groups are present).\n * - `icon-only-large`: Icon-only menu supporting flyouts/groups.\n * - `compact`: Minimal, space-saving menu.\n * - `tree`: Hierarchical tree — groups expand inline and rows are indented by depth.\n /\n @property({type: String}) variant: ObcNavigationMenuVariant =\n ObcNavigationMenuVariant.Full;\n\n /\n Visual variant of the flyout.\n * One of `Full` (default) or `Compact`.\n /\n @property({type: String}) flyoutVariant: ObcNavigationMenuFlyoutVariant =\n ObcNavigationMenuFlyoutVariant.Full;\n\n /\n When `true`, adapts the layout for small screens (e.g., moves logo into the footer area and adjusts item layout).\n /\n @property({type: Boolean}) smallScreen = false;\n\n private slotObservers: MutationObserver[] = [];\n @state() private hasFooter = false;\n\n /\n Roving-tabindex + arrow-key navigation for the Tree variant, sharing the\n * navigator that drives `obc-tree-navigation`. Engaged only while\n * `variant === Tree` (see `onTreeKeydown`).\n /\n private readonly treeNavigator = new TreeRovingNavigator<NavTreeRow>(this, {\n getRows: () => this.treeRootRows(),\n childRows: (row) => this.treeChildRows(row),\n isGroup: (row) => isNavGroup(row),\n // Read the group's own synchronous open state, not the shadow header's\n // attribute (which lags a render tick behind a keyboard expand/collapse).\n isExpanded: (row) => isNavGroup(row) && row.expanded,\n setExpanded: (row, expanded) => {\n if (!isNavGroup(row)) return;\n if (expanded) row.open();\n else row.close();\n },\n innerItem: (row) => this.treeInnerItem(row),\n } satisfies TreeRovingAdapter<NavTreeRow>);\n\n /* Top-level tree rows of the main slot (mirrors `assignTreeBranches`'s filter). /\n private treeRootRows(): NavTreeRow[] {\n return Array.from(this.children).filter((child): child is NavTreeRow => {\n if (!isNavRow(child)) return false;\n const slot = child.getAttribute('slot');\n return slot === null \|\| slot === 'main';\n });\n }\n\n /* Direct tree-row children of a row, in document order. /\n private treeChildRows(row: NavTreeRow): NavTreeRow[] {\n return Array.from(row.children).filter(isNavRow);\n }\n\n /* The inline `obc-tree-navigation-item` a tree-mode row renders in its shadow root. */\n private treeInnerItem(row: NavTreeRow): ObcTreeNavigationItem \| null {\n return (\n row.shadowRoot?.querySelector<ObcTreeNavigationItem>(\n 'obc-tree-navigation-item'\n ) ?? null\n );\n }\n\n private onTreeKeydown = (event: KeyboardEvent): void => {\n if (this.variant !== ObcNavigationMenuVariant.Tree) return;\n if (this.treeNavigator.handleKeydown(event)) event.preventDefault();\n };\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener('keydown', this.onTreeKeydown);\n }\n\n findAllElements<T extends Element>(\n el: Element,\n tag: string,\n {\n slot,\n stopTag,\n }: {\n slot?: 'main' \| 'footer' \| 'logo';\n stopTag?: string;\n } = {}\n ): T[] {\n const elements: T[] = [];\n for (const child of el.children) {\n if (child.tagName.toLowerCase() === tag) {\n if (slot && child.getAttribute('slot') !== slot) {\n continue;\n }\n elements.push(child as T);\n } else if (stopTag && child.tagName.toLowerCase() === stopTag) {\n continue;\n } else {\n if (slot && child.getAttribute('slot') !== slot) {\n continue;\n }\n elements.push(...this.findAllElements<T>(child, tag, {stopTag}));\n }\n }\n return elements;\n }\n\n findAllGroups(el: Element): ObcNavigationItemGroup[] {\n // Find all groups that are not in a group\n return this.findAllElements<ObcNavigationItemGroup>(\n el,\n 'obc-navigation-item-group'\n );\n }\n\n findRootItems(el: Element): ObcNavigationItem[] {\n // Find all items that are not in a group or in an item\n return this.findAllElements<ObcNavigationItem>(el, 'obc-navigation-item', {\n stopTag: 'obc-navigation-item-group',\n });\n }\n\n findAllItems(\n el: Element,\n slot?: 'main' \| 'footer' \| 'logo'\n ): ObcNavigationItem[] {\n return this.findAllElements<ObcNavigationItem>(el, 'obc-navigation-item', {\n slot,\n });\n }\n\n closeAllGroups() {\n const groups = this.findAllGroups(this);\n groups.forEach((group) => {\n group.close();\n });\n }\n\n registerGroup(groups: ObcNavigationItemGroup[]) {\n groups.forEach((group) => {\n group.addEventListener('open', () => {\n if (this.variant === ObcNavigationMenuVariant.Tree) return;\n groups.forEach((g) => {\n if (g !== group) {\n g.close();\n }\n });\n });\n const subGroups = this.findAllGroups(group);\n this.registerGroup(subGroups);\n });\n }\n\n private cleanupSlotObservers() {\n this.slotObservers.forEach((observer) => observer.disconnect());\n this.slotObservers = [];\n }\n\n private setupSlotObservers() {\n this.cleanupSlotObservers();\n\n const mainSlot = this.shadowRoot?.querySelector(\n 'slot[name=\"main\"]'\n ) as HTMLSlotElement;\n const footerSlot = this.shadowRoot?.querySelector(\n 'slot[name=\"footer\"]'\n ) as HTMLSlotElement;\n\n this.hasFooter = footerSlot?.assignedElements().length > 0;\n\n [mainSlot, footerSlot].forEach((slot) => {\n if (slot) {\n const slottedElements = slot.assignedElements();\n slottedElements.forEach((element) => {\n const observer = new MutationObserver(() => {\n this.setupItems();\n });\n\n observer.observe(element, {\n childList: true,\n subtree: true,\n });\n\n this.slotObservers.push(observer);\n });\n }\n });\n }\n\n protected override firstUpdated(_changedProperties: PropertyValues): void {\n super.firstUpdated(_changedProperties);\n const groups = this.findAllGroups(this);\n this.registerGroup(groups);\n }\n\n protected override updated(_changedProperties: PropertyValues): void {\n super.updated(_changedProperties);\n if (\n _changedProperties.has('variant') \|\|\n _changedProperties.has('flyoutVariant')\n ) {\n this.setupItems();\n }\n }\n\n // Recursively set variant for children of groups\n private setVariantToFlyoutItems(el: Element) {\n // Find all descendant items inside this element (not direct children of the nav menu)\n const items = this.findAllElements<ObcNavigationItem>(\n el,\n 'obc-navigation-item'\n );\n items.forEach((item) => {\n item.variant = ObcNavigationMenuVariant.Full;\n });\n\n const groups = this.findAllGroups(el);\n groups.forEach((group) => {\n group.variant = ObcNavigationMenuVariant.Full;\n this.setVariantToFlyoutItems(group);\n });\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.cleanupSlotObservers();\n this.removeEventListener('keydown', this.onTreeKeydown);\n }\n\n private handleSlotChange() {\n this.setupItems();\n this.setupSlotObservers();\n }\n\n private assignTreeBranches(el: Element, depth: number): void {\n for (const child of el.children) {\n const tag = child.tagName.toLowerCase();\n const isItem = tag === 'obc-navigation-item';\n const isGroup = tag === 'obc-navigation-item-group';\n if (!isItem && !isGroup) continue;\n // Top-level rows are slotted; only treeify the main slot. Nested rows have\n // no slot attribute and always belong to their group's tree.\n if (depth === 0) {\n const slot = child.getAttribute('slot');\n if (slot !== null && slot !== 'main') continue;\n }\n const branches: TreeBranchType[] = Array.from(\n {length: depth},\n () => TreeBranchType.blank\n );\n const row = child as ObcNavigationItem \| ObcNavigationItemGroup;\n row.treeMode = true;\n row.treeBranches = branches;\n if (isGroup) {\n this.assignTreeBranches(child, depth + 1);\n }\n }\n }\n\n // Reset tree mode on every descendant item/group so switching away from the\n // Tree variant restores the flat rendering.\n private clearTreeMode(el: Element): void {\n for (const child of el.children) {\n const tag = child.tagName.toLowerCase();\n const isItem = tag === 'obc-navigation-item';\n const isGroup = tag === 'obc-navigation-item-group';\n if (!isItem && !isGroup) continue;\n const row = child as ObcNavigationItem \| ObcNavigationItemGroup;\n row.treeMode = false;\n row.treeBranches = [];\n if (isGroup) {\n this.clearTreeMode(child);\n }\n }\n }\n\n private setupItems() {\n if (this.variant === ObcNavigationMenuVariant.Tree) {\n this.assignTreeBranches(this, 0);\n // Footer and logo are not part of the tree — keep them as flat full-variant\n // items (and clear any tree mode left over from the main slot's walk).\n (['footer', 'logo'] as const).forEach((slot) => {\n this.findAllItems(this, slot).forEach((item) => {\n item.treeMode = false;\n item.treeBranches = [];\n item.variant = ObcNavigationMenuVariant.Full;\n });\n });\n // Defer so the rows' inline tree-item headers exist before the roving\n // tabindex is assigned to them.\n queueMicrotask(() => this.treeNavigator.refresh());\n return;\n }\n\n this.clearTreeMode(this);\n\n const hug =\n this.variant !== ObcNavigationMenuVariant.Full \|\|\n this.flyoutVariant === ObcNavigationMenuFlyoutVariant.Compact;\n this.setHugToGroups(this, hug);\n\n // Set variant to all groups (top-level)\n const groups = this.findAllGroups(this);\n groups.forEach((group) => {\n group.variant = this.variant;\n // But for flyout children, force variant to full\n this.setVariantToFlyoutItems(group);\n });\n\n // Set variant to all root items (not in group)\n this.findRootItems(this).forEach((item) => {\n item.variant = this.variant;\n });\n\n // Footer and logo logic (same as before)\n const footerVariant =\n this.smallScreen && this.variant === ObcNavigationMenuVariant.Full\n ? ObcNavigationMenuVariant.Compact\n : this.variant;\n this.findAllItems(this, 'footer').forEach((item) => {\n item.variant = footerVariant;\n });\n this.findAllItems(this, 'logo').forEach((item) => {\n item.variant = footerVariant;\n });\n\n // Close all groups on item click (unchanged)\n this.findAllItems(this).forEach((item) => {\n item.addEventListener('click', () => {\n this.closeAllGroups();\n });\n });\n }\n\n private setHugToGroups(el: Element, hug: boolean) {\n const groups = this.findAllGroups(el);\n groups.forEach((group) => {\n group.hug = hug;\n this.setHugToGroups(group, hug);\n });\n }\n\n override render() {\n return html`\n <div\n class=\"wrapper ${this.variant} ${this.smallScreen\n ? 'small-screen'\n : ''}\"\n >\n <nav class=\"main\">\n <ol>\n <slot name=\"main\" @slotchange=${this.handleSlotChange}></slot>\n </ol>\n </nav>\n <div class=\"footer ${this.hasFooter ? 'has-footer' : ''}\">\n <nav>\n <ol>\n <slot name=\"footer\" @slotchange=${this.handleSlotChange}></slot>\n ${this.smallScreen ? html` <slot name=\"logo\"></slot> ` : nothing}\n </ol>\n </nav>\n ${this.smallScreen\n ? nothing\n : html`\n <div class=\"logo\">\n <slot name=\"logo\"></slot>\n </div>\n `}\n </div>\n </div>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-navigation-menu': ObcNavigationMenu;\n }\n}\n"],"names":["ObcNavigationMenuVariant","ObcNavigationMenuFlyoutVariant"],"mappings":"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"}

package/dist/components/tree-navigation-group/tree-navigation-group.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import { TreeBranchType } from '../tree-navigation-item/tree-navigation-item.js';
+import { TreeBranchType, TreeNavigationItemAlerts } from '../tree-navigation-item/tree-navigation-item.js';
 import '../tree-navigation-item/tree-navigation-item.js';
 /**
  * `<obc-tree-navigation-group>` – An expandable parent row in a tree-navigation
@@ -7,7 +7,7 @@ import '../tree-navigation-item/tree-navigation-item.js';
  * child rows it discloses.
  *
  * A group renders an `<obc-tree-navigation-item>` header (carrying its own label,
- * icon, terminal type, and alert badge) followed by its slotted children. When
+ * icon, terminal type, and alert badges) followed by its slotted children. When
  * placed inside `<obc-tree-navigation>`, the container computes and assigns the
  * `branches` guide lines for every row automatically from each row's position —
  * a group does not need its depth configured by hand.
@@ -20,8 +20,7 @@ import '../tree-navigation-item/tree-navigation-item.js';
  * - **Disclosure:** A chevron in the header toggles the slotted children. The open
  *   state is held in `expanded` and reflected so the container and CSS can react.
  * - **Header presentation:** `label`, the `icon` slot, `terminalType`, and the
- *   alert badge (`hasAlertBadge`, `alertCount`, `alertType`) are forwarded to the
- *   header row.
+ *   `alerts` count map are forwarded to the header row.
  * - **Selection:** `checked` marks the group's header as the current item.
  * - **Automatic guides:** Inside `<obc-tree-navigation>`, the header's `branches`
  *   are assigned by the container; nested groups continue the guide columns down.
@@ -66,12 +65,13 @@ export declare class ObcTreeNavigationGroup extends LitElement {
      * the terminal. One of `regular` (default), `aggregated-header`, or `group-header`.
      */
     terminalType: string;
-    /** Whether a trailing alert counter badge is shown on the header row. */
-    hasAlertBadge: boolean;
-    /** The number shown in the header's alert badge when `hasAlertBadge` is true. */
-    alertCount: number;
-    /** The severity/type of the header's alert badge. One of the `obc-badge` types (default `alarm`). */
-    alertType: string;
+    /**
+     * Per-severity alert counts shown as trailing badge(s) on the header row.
+     * Forwarded verbatim to the header `<obc-tree-navigation-item>` — typically a
+     * group sets `{aggregate: true, ...}` so its header shows one badge totalling
+     * the alerts of the rows beneath it. See {@link TreeNavigationItemAlerts}.
+     */
+    alerts?: TreeNavigationItemAlerts;
     /**
      * The URL to navigate to when the header is activated. If set, the header row
      * renders as a link; otherwise it acts as a button.

package/dist/components/tree-navigation-group/tree-navigation-group.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tree-navigation-group.d.ts","sourceRoot":"","sources":["../../../src/components/tree-navigation-group/tree-navigation-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAIzD,OAAO,EAEL,cAAc,EAEf,MAAM,iDAAiD,CAAC;AACzD,OAAO,iDAAiD,CAAC;~~AAGzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG~~;AACH,qBACa,sBAAuB,SAAQ,UAAU;IACpD,yDAAyD;IAC/B,KAAK,SAAW;IAE1C;;;;OAIG;IACsB,QAAQ,EAAE,cAAc,EAAE,CAAM;IAEzD,mFAAmF;IACzC,QAAQ,UAAS;IAE3D,yDAAyD;IACf,OAAO,UAAS;IAE1D,gFAAgF;IACtC,QAAQ,UAAS;IAE3D,oFAAoF;IACvC,OAAO,UAAQ;IAE5D;;;OAGG;IACuB,YAAY,EAAE,MAAM,CAA4B;IAE1E~~,yEAAyE~~;~~IAC9C~~,~~aAAa~~,~~UAAS;IAEjD~~,~~iFAAiF;IACvD,UAAU,SAAK;IAEzC,qGAAqG;IAC3E,SAAS,~~EAAE,~~MAAM~~,~~CAAmB~~;~~IAE9D~~;;;OAGG;IACuB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEhB,OAAO,CAAC,UAAU,CAAC,CAAwB;IAE9E,OAAO,CAAC,cAAc;IAOtB,wEAAwE;IACxE,KAAK;IAOW,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAI1C,MAAM;~~IA0Bf~~,OAAgB,MAAM,0BAA6B;CACpD;AAED,MAAM,MAAM,uCAAuC,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;AAE3E,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,2BAA2B,EAAE,sBAAsB,CAAC;KACrD;CACF"}
1	+ {"version":3,"file":"tree-navigation-group.d.ts","sourceRoot":"","sources":["../../../src/components/tree-navigation-group/tree-navigation-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAIzD,OAAO,EAEL,cAAc,EAEf,MAAM,iDAAiD,CAAC;AACzD,OAAO,KAAK,EAAC,wBAAwB,EAAC,MAAM,iDAAiD,CAAC;AAC9F,OAAO,iDAAiD,CAAC;AAEzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,qBACa,sBAAuB,SAAQ,UAAU;IACpD,yDAAyD;IAC/B,KAAK,SAAW;IAE1C;;;;OAIG;IACsB,QAAQ,EAAE,cAAc,EAAE,CAAM;IAEzD,mFAAmF;IACzC,QAAQ,UAAS;IAE3D,yDAAyD;IACf,OAAO,UAAS;IAE1D,gFAAgF;IACtC,QAAQ,UAAS;IAE3D,oFAAoF;IACvC,OAAO,UAAQ;IAE5D;;;OAGG;IACuB,YAAY,EAAE,MAAM,CAA4B;IAE1E;;;;;OAKG;IACuB,MAAM,CAAC,EAAE,wBAAwB,CAAC;IAE5D;;;OAGG;IACuB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEhB,OAAO,CAAC,UAAU,CAAC,CAAwB;IAE9E,OAAO,CAAC,cAAc;IAOtB,wEAAwE;IACxE,KAAK;IAOW,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAI1C,MAAM;IAwBf,OAAgB,MAAM,0BAA6B;CACpD;AAED,MAAM,MAAM,uCAAuC,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;AAE3E,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,2BAA2B,EAAE,sBAAsB,CAAC;KACrD;CACF"}

package/dist/components/tree-navigation-group/tree-navigation-group.js CHANGED Viewed

@@ -3,7 +3,6 @@ import { property, query } from "lit/decorators.js";
 import componentStyle from "./tree-navigation-group.css.js";
 import { customElement } from "../../decorator.js";
 import { TreeTerminalType } from "../tree-navigation-item/tree-navigation-item.js";
-import { BadgeType } from "../badge/badge.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -24,9 +23,6 @@ let ObcTreeNavigationGroup = class extends LitElement {
     this.disabled = false;
     this.hasIcon = true;
     this.terminalType = TreeTerminalType.regular;
-    this.hasAlertBadge = false;
-    this.alertCount = 0;
-    this.alertType = BadgeType.alarm;
   }
   onHeaderToggle(event) {
     this.expanded = event.detail;
@@ -56,9 +52,7 @@ let ObcTreeNavigationGroup = class extends LitElement {
         ?disabled=${this.disabled}
         .hasLeadingIcon=${this.hasIcon}
         .terminalType=${this.terminalType}
-        ?hasAlertBadge=${this.hasAlertBadge}
-        .alertCount=${this.alertCount}
-        .alertType=${this.alertType}
+        .alerts=${this.expanded ? void 0 : this.alerts}
         .href=${this.href}
         @expand-toggle=${this.onHeaderToggle}
       >
@@ -93,14 +87,8 @@ __decorateClass([
   property({ type: String })
 ], ObcTreeNavigationGroup.prototype, "terminalType", 2);
 __decorateClass([
-  property({ type: Boolean })
-], ObcTreeNavigationGroup.prototype, "hasAlertBadge", 2);
-__decorateClass([
-  property({ type: Number })
-], ObcTreeNavigationGroup.prototype, "alertCount", 2);
-__decorateClass([
-  property({ type: String })
-], ObcTreeNavigationGroup.prototype, "alertType", 2);
+  property({ type: Object })
+], ObcTreeNavigationGroup.prototype, "alerts", 2);
 __decorateClass([
   property({ type: String })
 ], ObcTreeNavigationGroup.prototype, "href", 2);

package/dist/components/tree-navigation-group/tree-navigation-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tree-navigation-group.js","sources":["../../../src/components/tree-navigation-group/tree-navigation-group.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport componentStyle from './tree-navigation-group.css?inline';\nimport {customElement} from '../../decorator.js';\nimport {\n ObcTreeNavigationItem,\n TreeBranchType,\n TreeTerminalType,\n} from '../tree-navigation-item/tree-navigation-item.js';\nimport '../tree-navigation-item/tree-navigation-item.js';\nimport ~~{BadgeType} from~~ '../~~badge~~/~~badge~~.js';\n\n/*\n `<obc-tree-navigation-group>` – An expandable parent row in a tree-navigation\n * structure: a header row with an expand/collapse chevron, plus a slot for the\n * child rows it discloses.\n \n A group renders an `<obc-tree-navigation-item>` header (carrying its own label,\n * icon, terminal type, and alert ~~badge~~) followed by its slotted children. When\n * placed inside `<obc-tree-navigation>`, the container computes and assigns the\n * `branches` guide lines for every row automatically from each row's position —\n * a group does not need its depth configured by hand.\n \n The group manages only its own open/closed state and forwards header presentation\n * to its internal header item. It does not draw guide lines itself; that is the\n * container's responsibility (see `<obc-tree-navigation>`).\n \n ## Features\n * - Disclosure: A chevron in the header toggles the slotted children. The open\n * state is held in `expanded` and reflected so the container and CSS can react.\n * - Header presentation: `label`, the `icon` slot, `terminalType`, and the\n * ~~alert badge (~~`~~hasAlertBadge`,~~ `~~alertCount`,~~ ~~`alertType`)~~ are forwarded to the\n * header row.\n * - Selection: `checked` marks the group's header as the current item.\n * - Automatic guides: Inside `<obc-tree-navigation>`, the header's `branches`\n * are assigned by the container; nested groups continue the guide columns down.\n \n ## Usage Guidelines\n * - Nest `<obc-tree-navigation-item>` (leaves) and further `<obc-tree-navigation-group>`\n * elements as children to build the hierarchy.\n * - Always place groups and items inside an `<obc-tree-navigation>` container so the\n * guide lines are computed; using a group standalone draws a header with no guides.\n * - Provide a header icon via the `icon` slot (forwarded to the header row).\n \n ## Slots\n \n \| Slot Name \| Renders When... \| Purpose \|\n * \|-----------\|--------------------------\|--------------------------------------------------------------\|\n * \| icon \| `hasIcon` is true \| Leading icon for the group header row. \|\n * \| (default) \| Always \| Child rows (`obc-tree-navigation-item` / `-group`). \|\n \n @slot icon - Leading icon for the group header (shown when `hasIcon` is true).\n * @slot - Child rows disclosed when the group is expanded.\n * @fires expand-toggle {CustomEvent<boolean>} Fired when the header is activated; detail is the next `expanded` value.\n /\n@customElement('obc-tree-navigation-group')\nexport class ObcTreeNavigationGroup extends LitElement {\n /* The text label displayed for the group header row. /\n @property({type: String}) label = 'Group';\n\n /\n Guide line to draw for each ancestor level of the header row. Normally set by\n * the parent `<obc-tree-navigation>` container from the group's position; only\n * set it manually when using a group outside the container.\n /\n @property({type: Array}) branches: TreeBranchType[] = [];\n\n /* Whether the group is expanded, disclosing its children. Rotates the chevron. /\n @property({type: Boolean, reflect: true}) expanded = false;\n\n /* Whether the group header is the current selection. /\n @property({type: Boolean, reflect: true}) checked = false;\n\n /* Disables the group header, removing it from the tab order and dimming it. /\n @property({type: Boolean, reflect: true}) disabled = false;\n\n /* Whether the group header shows a leading icon (provided via the `icon` slot). /\n @property({type: Boolean, attribute: false}) hasIcon = true;\n\n /\n Terminal type for the header row, controlling the alert-header marker shown in\n * the terminal. One of `regular` (default), `aggregated-header`, or `group-header`.\n /\n @property({type: String}) terminalType: string = TreeTerminalType.regular;\n\n /* ~~Whether~~ a ~~trailing~~ ~~alert~~ ~~counter~~ badge ~~is shown~~ on the header row~~. /\~~n ~~@property({type:~~ ~~Boolean})~~ ~~hasAlertBadge~~ = false;\n\n /* ~~The~~ ~~number~~ ~~shown~~ in ~~the~~ ~~header's~~ ~~alert~~ ~~badge~~ ~~when~~ `~~hasAlertBadge`~~ is ~~true.~~ /\n @property({type: ~~Number})~~ ~~alertCount~~ = ~~0;\n~~\n /* ~~The~~ ~~severity/type~~ of the ~~header's~~ ~~alert~~ ~~badge~~. ~~One~~ of ~~the `obc-badge` types (default `alarm`).~~ /\n @property({type: ~~String~~}) ~~alertType:~~ ~~string = BadgeType.alarm~~;\n\n /\n The URL to navigate to when the header is activated. If set, the header row\n * renders as a link; otherwise it acts as a button.\n /\n @property({type: String}) href: string \| undefined;\n\n @query('obc-tree-navigation-item') private headerItem?: ObcTreeNavigationItem;\n\n private onHeaderToggle(event: CustomEvent<boolean>) {\n this.expanded = event.detail;\n this.dispatchEvent(\n new CustomEvent<boolean>('expand-toggle', {detail: this.expanded})\n );\n }\n\n /* Closes the group (and, recursively, any nested groups inside it). */\n close() {\n this.expanded = false;\n this.querySelectorAll('obc-tree-navigation-group').forEach((group) =>\n group.close()\n );\n }\n\n public override focus(options?: FocusOptions): void {\n this.headerItem?.focus(options);\n }\n\n override render() {\n return html`\n <obc-tree-navigation-item\n part=\"header\"\n .label=${this.label}\n .branches=${this.branches}\n expandable\n ?expanded=${this.expanded}\n ?checked=${this.checked}\n ?disabled=${this.disabled}\n .hasLeadingIcon=${this.hasIcon}\n .terminalType=${this.terminalType}\n ~~?hasAlertBadge=${this~~.~~hasAlertBadge}\n .alertCount~~=${this.~~alertCount}\n .alertType=${~~this.~~alertType~~}\n .href=${this.href}\n @expand-toggle=${this.onHeaderToggle}\n >\n ${this.hasIcon ? html`<slot name=\"icon\" slot=\"icon\"></slot>` : nothing}\n </obc-tree-navigation-item>\n <div part=\"children\" role=\"group\" ?hidden=${!this.expanded}>\n <slot></slot>\n </div>\n `;\n }\n\n static override styles = unsafeCSS(componentStyle);\n}\n\nexport type ObcTreeNavigationGroupExpandToggleEvent = CustomEvent<boolean>;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-tree-navigation-group': ObcTreeNavigationGroup;\n }\n}\n"],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;AAwDO~~,IAAM,yBAAN,cAAqC,WAAW;AAAA,EAAhD,cAAA;AAAA,UAAA,GAAA,SAAA;AAEqB,SAAA,QAAQ;AAOT,SAAA,WAA6B,CAAA;AAGZ,SAAA,WAAW;AAGX,SAAA,UAAU;AAGV,SAAA,WAAW;AAGR,SAAA,UAAU;AAM7B,SAAA,eAAuB,iBAAiB;~~AAGvC,SAAA,gBAAgB;AAGjB,SAAA,aAAa;AAGb,SAAA,YAAoB,UAAU;~~AAAA,EAAA;AAAA,~~EAUhD~~,eAAe,OAA6B;AAClD,SAAK,WAAW,MAAM;AACtB,SAAK;AAAA,MACH,IAAI,YAAqB,iBAAiB,EAAC,QAAQ,KAAK,UAAS;AAAA,IAAA;AAAA,EAErE;AAAA;AAAA,EAGA,QAAQ;AACN,SAAK,WAAW;AAChB,SAAK,iBAAiB,2BAA2B,EAAE;AAAA,MAAQ,CAAC,UAC1D,MAAM,MAAA;AAAA,IAAM;AAAA,EAEhB;AAAA,EAEgB,MAAM,SAA8B;AAClD,SAAK,YAAY,MAAM,OAAO;AAAA,EAChC;AAAA,EAES,SAAS;AAChB,WAAO;AAAA;AAAA;AAAA,iBAGM,KAAK,KAAK;AAAA,oBACP,KAAK,QAAQ;AAAA;AAAA,oBAEb,KAAK,QAAQ;AAAA,mBACd,KAAK,OAAO;AAAA,oBACX,KAAK,QAAQ;AAAA,0BACP,KAAK,OAAO;AAAA,wBACd,KAAK,YAAY;AAAA,~~yBAChB~~,KAAK,~~aAAa;AAAA~~,~~sBACrB~~,KAAK,~~UAAU~~;AAAA,~~qBAChB~~,KAAK,~~SAAS;AAAA,gBACnB,KAAK,~~IAAI;AAAA,yBACA,KAAK,cAAc;AAAA;AAAA,UAElC,KAAK,UAAU,8CAA8C,OAAO;AAAA;AAAA,kDAE5B,CAAC,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,EAI9D;AAGF;~~AA5Fa~~,~~uBA2FK~~,SAAS,UAAU,cAAc;~~AAzFvB~~,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAFb,uBAEe,WAAA,SAAA,CAAA;AAOD,gBAAA;AAAA,EAAxB,SAAS,EAAC,MAAM,MAAA,CAAM;AAAA,GATZ,uBASc,WAAA,YAAA,CAAA;AAGiB,gBAAA;AAAA,EAAzC,SAAS,EAAC,MAAM,SAAS,SAAS,MAAK;AAAA,GAZ7B,uBAY+B,WAAA,YAAA,CAAA;AAGA,gBAAA;AAAA,EAAzC,SAAS,EAAC,MAAM,SAAS,SAAS,MAAK;AAAA,GAf7B,uBAe+B,WAAA,WAAA,CAAA;AAGA,gBAAA;AAAA,EAAzC,SAAS,EAAC,MAAM,SAAS,SAAS,MAAK;AAAA,GAlB7B,uBAkB+B,WAAA,YAAA,CAAA;AAGG,gBAAA;AAAA,EAA5C,SAAS,EAAC,MAAM,SAAS,WAAW,OAAM;AAAA,GArBhC,uBAqBkC,WAAA,WAAA,CAAA;AAMnB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GA3Bb,uBA2Be,WAAA,gBAAA,CAAA;~~AAGC~~,gBAAA;AAAA,~~EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GA9Bd,uBA8BgB,WAAA,iBAAA,CAAA;AAGD,gBAAA;AAAA,~~EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,~~GAjCb~~,~~uBAiCe~~,WAAA,~~cAAA~~,CAAA;~~AAGA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GApCb,uBAoCe,WAAA,aAAA,CAAA;~~AAMA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,~~GA1Cb~~,~~uBA0Ce~~,WAAA,QAAA,CAAA;AAEiB,gBAAA;AAAA,EAA1C,MAAM,0BAA0B;AAAA,~~GA5CtB~~,~~uBA4CgC~~,WAAA,cAAA,CAAA;~~AA5ChC~~,yBAAN,gBAAA;AAAA,EADN,cAAc,2BAA2B;AAAA,GAC7B,sBAAA;"}
1	+ {"version":3,"file":"tree-navigation-group.js","sources":["../../../src/components/tree-navigation-group/tree-navigation-group.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport componentStyle from './tree-navigation-group.css?inline';\nimport {customElement} from '../../decorator.js';\nimport {\n ObcTreeNavigationItem,\n TreeBranchType,\n TreeTerminalType,\n} from '../tree-navigation-item/tree-navigation-item.js';\nimport type {TreeNavigationItemAlerts} from '../tree-navigation-item/tree-navigation-item.js';\nimport '../tree-navigation-item/tree-navigation-item.js';\n\n/*\n `<obc-tree-navigation-group>` – An expandable parent row in a tree-navigation\n * structure: a header row with an expand/collapse chevron, plus a slot for the\n * child rows it discloses.\n \n A group renders an `<obc-tree-navigation-item>` header (carrying its own label,\n * icon, terminal type, and alert badges) followed by its slotted children. When\n * placed inside `<obc-tree-navigation>`, the container computes and assigns the\n * `branches` guide lines for every row automatically from each row's position —\n * a group does not need its depth configured by hand.\n \n The group manages only its own open/closed state and forwards header presentation\n * to its internal header item. It does not draw guide lines itself; that is the\n * container's responsibility (see `<obc-tree-navigation>`).\n \n ## Features\n * - Disclosure: A chevron in the header toggles the slotted children. The open\n * state is held in `expanded` and reflected so the container and CSS can react.\n * - Header presentation: `label`, the `icon` slot, `terminalType`, and the\n * `alerts` count map are forwarded to the header row.\n * - Selection: `checked` marks the group's header as the current item.\n * - Automatic guides: Inside `<obc-tree-navigation>`, the header's `branches`\n * are assigned by the container; nested groups continue the guide columns down.\n \n ## Usage Guidelines\n * - Nest `<obc-tree-navigation-item>` (leaves) and further `<obc-tree-navigation-group>`\n * elements as children to build the hierarchy.\n * - Always place groups and items inside an `<obc-tree-navigation>` container so the\n * guide lines are computed; using a group standalone draws a header with no guides.\n * - Provide a header icon via the `icon` slot (forwarded to the header row).\n \n ## Slots\n \n \| Slot Name \| Renders When... \| Purpose \|\n * \|-----------\|--------------------------\|--------------------------------------------------------------\|\n * \| icon \| `hasIcon` is true \| Leading icon for the group header row. \|\n * \| (default) \| Always \| Child rows (`obc-tree-navigation-item` / `-group`). \|\n \n @slot icon - Leading icon for the group header (shown when `hasIcon` is true).\n * @slot - Child rows disclosed when the group is expanded.\n * @fires expand-toggle {CustomEvent<boolean>} Fired when the header is activated; detail is the next `expanded` value.\n /\n@customElement('obc-tree-navigation-group')\nexport class ObcTreeNavigationGroup extends LitElement {\n /* The text label displayed for the group header row. /\n @property({type: String}) label = 'Group';\n\n /\n Guide line to draw for each ancestor level of the header row. Normally set by\n * the parent `<obc-tree-navigation>` container from the group's position; only\n * set it manually when using a group outside the container.\n /\n @property({type: Array}) branches: TreeBranchType[] = [];\n\n /* Whether the group is expanded, disclosing its children. Rotates the chevron. /\n @property({type: Boolean, reflect: true}) expanded = false;\n\n /* Whether the group header is the current selection. /\n @property({type: Boolean, reflect: true}) checked = false;\n\n /* Disables the group header, removing it from the tab order and dimming it. /\n @property({type: Boolean, reflect: true}) disabled = false;\n\n /* Whether the group header shows a leading icon (provided via the `icon` slot). /\n @property({type: Boolean, attribute: false}) hasIcon = true;\n\n /\n Terminal type for the header row, controlling the alert-header marker shown in\n * the terminal. One of `regular` (default), `aggregated-header`, or `group-header`.\n /\n @property({type: String}) terminalType: string = TreeTerminalType.regular;\n\n /\n Per-severity alert counts shown as trailing badge(s) on the header row.\n * Forwarded verbatim to the header `<obc-tree-navigation-item>` — typically a\n * group sets `{aggregate: true, ...}` so its header shows one badge totalling\n * the alerts of the rows beneath it. See {@link TreeNavigationItemAlerts}.\n /\n @property({type: Object}) alerts?: TreeNavigationItemAlerts;\n\n /\n The URL to navigate to when the header is activated. If set, the header row\n * renders as a link; otherwise it acts as a button.\n /\n @property({type: String}) href: string \| undefined;\n\n @query('obc-tree-navigation-item') private headerItem?: ObcTreeNavigationItem;\n\n private onHeaderToggle(event: CustomEvent<boolean>) {\n this.expanded = event.detail;\n this.dispatchEvent(\n new CustomEvent<boolean>('expand-toggle', {detail: this.expanded})\n );\n }\n\n /* Closes the group (and, recursively, any nested groups inside it). */\n close() {\n this.expanded = false;\n this.querySelectorAll('obc-tree-navigation-group').forEach((group) =>\n group.close()\n );\n }\n\n public override focus(options?: FocusOptions): void {\n this.headerItem?.focus(options);\n }\n\n override render() {\n return html`\n <obc-tree-navigation-item\n part=\"header\"\n .label=${this.label}\n .branches=${this.branches}\n expandable\n ?expanded=${this.expanded}\n ?checked=${this.checked}\n ?disabled=${this.disabled}\n .hasLeadingIcon=${this.hasIcon}\n .terminalType=${this.terminalType}\n .alerts=${this.expanded ? undefined : this.alerts}\n .href=${this.href}\n @expand-toggle=${this.onHeaderToggle}\n >\n ${this.hasIcon ? html`<slot name=\"icon\" slot=\"icon\"></slot>` : nothing}\n </obc-tree-navigation-item>\n <div part=\"children\" role=\"group\" ?hidden=${!this.expanded}>\n <slot></slot>\n </div>\n `;\n }\n\n static override styles = unsafeCSS(componentStyle);\n}\n\nexport type ObcTreeNavigationGroupExpandToggleEvent = CustomEvent<boolean>;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-tree-navigation-group': ObcTreeNavigationGroup;\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAuDO,IAAM,yBAAN,cAAqC,WAAW;AAAA,EAAhD,cAAA;AAAA,UAAA,GAAA,SAAA;AAEqB,SAAA,QAAQ;AAOT,SAAA,WAA6B,CAAA;AAGZ,SAAA,WAAW;AAGX,SAAA,UAAU;AAGV,SAAA,WAAW;AAGR,SAAA,UAAU;AAM7B,SAAA,eAAuB,iBAAiB;AAAA,EAAA;AAAA,EAkB1D,eAAe,OAA6B;AAClD,SAAK,WAAW,MAAM;AACtB,SAAK;AAAA,MACH,IAAI,YAAqB,iBAAiB,EAAC,QAAQ,KAAK,UAAS;AAAA,IAAA;AAAA,EAErE;AAAA;AAAA,EAGA,QAAQ;AACN,SAAK,WAAW;AAChB,SAAK,iBAAiB,2BAA2B,EAAE;AAAA,MAAQ,CAAC,UAC1D,MAAM,MAAA;AAAA,IAAM;AAAA,EAEhB;AAAA,EAEgB,MAAM,SAA8B;AAClD,SAAK,YAAY,MAAM,OAAO;AAAA,EAChC;AAAA,EAES,SAAS;AAChB,WAAO;AAAA;AAAA;AAAA,iBAGM,KAAK,KAAK;AAAA,oBACP,KAAK,QAAQ;AAAA;AAAA,oBAEb,KAAK,QAAQ;AAAA,mBACd,KAAK,OAAO;AAAA,oBACX,KAAK,QAAQ;AAAA,0BACP,KAAK,OAAO;AAAA,wBACd,KAAK,YAAY;AAAA,kBACvB,KAAK,WAAW,SAAY,KAAK,MAAM;AAAA,gBACzC,KAAK,IAAI;AAAA,yBACA,KAAK,cAAc;AAAA;AAAA,UAElC,KAAK,UAAU,8CAA8C,OAAO;AAAA;AAAA,kDAE5B,CAAC,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,EAI9D;AAGF;AAzFa,uBAwFK,SAAS,UAAU,cAAc;AAtFvB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAFb,uBAEe,WAAA,SAAA,CAAA;AAOD,gBAAA;AAAA,EAAxB,SAAS,EAAC,MAAM,MAAA,CAAM;AAAA,GATZ,uBASc,WAAA,YAAA,CAAA;AAGiB,gBAAA;AAAA,EAAzC,SAAS,EAAC,MAAM,SAAS,SAAS,MAAK;AAAA,GAZ7B,uBAY+B,WAAA,YAAA,CAAA;AAGA,gBAAA;AAAA,EAAzC,SAAS,EAAC,MAAM,SAAS,SAAS,MAAK;AAAA,GAf7B,uBAe+B,WAAA,WAAA,CAAA;AAGA,gBAAA;AAAA,EAAzC,SAAS,EAAC,MAAM,SAAS,SAAS,MAAK;AAAA,GAlB7B,uBAkB+B,WAAA,YAAA,CAAA;AAGG,gBAAA;AAAA,EAA5C,SAAS,EAAC,MAAM,SAAS,WAAW,OAAM;AAAA,GArBhC,uBAqBkC,WAAA,WAAA,CAAA;AAMnB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GA3Bb,uBA2Be,WAAA,gBAAA,CAAA;AAQA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAnCb,uBAmCe,WAAA,UAAA,CAAA;AAMA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAzCb,uBAyCe,WAAA,QAAA,CAAA;AAEiB,gBAAA;AAAA,EAA1C,MAAM,0BAA0B;AAAA,GA3CtB,uBA2CgC,WAAA,cAAA,CAAA;AA3ChC,yBAAN,gBAAA;AAAA,EADN,cAAc,2BAA2B;AAAA,GAC7B,sBAAA;"}

package/dist/components/tree-navigation-item/tree-navigation-item.css.js CHANGED Viewed

@@ -419,6 +419,19 @@ const componentStyle = css`
   min-width: 0;
 }
+/*
+ * Trailing badge area. A row can carry more than one alert badge (e.g. a
+ * critical count beside a warning count); they sit in a flex row spaced by the
+ * shared alert-counter spacing token.
+ */
+.alert-badges {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--app-components-alert-counter-item-badge-spacing);
+}
 .alert-badge {
   flex-shrink: 0;
 }

package/dist/components/tree-navigation-item/tree-navigation-item.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tree-navigation-item.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"tree-navigation-item.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/tree-navigation-item/tree-navigation-item.d.ts CHANGED Viewed

@@ -33,6 +33,38 @@ export declare enum TreeTerminalType {
     aggregatedHeader = "aggregated-header",
     groupHeader = "group-header"
 }
+/**
+ * Per-severity alert counts for a tree row's trailing badge(s). Each `count*`
+ * is the number of active alerts of that severity at or beneath the row — the
+ * level severities `level-critical`, `level-high`, `level-medium`, `level-low`,
+ * and `level-diagnostic`, plus the IEC severities `alarm`, `warning`, and
+ * `caution`. Badges are ordered and aggregated by the shared
+ * `ALERT_SEVERITY_PRIORITY` ranking, most to least severe.
+ *
+ * Set `aggregate` to collapse the counts into a single badge showing the total,
+ * styled as the highest category present; otherwise one badge is rendered per
+ * non-zero count.
+ */
+export interface TreeNavigationItemAlerts {
+    /** Collapse all counts into one badge: total count, highest-severity style. */
+    aggregate?: boolean;
+    /** Number of level-critical alerts. */
+    countLevelCritical?: number;
+    /** Number of alarm alerts. */
+    countAlarm?: number;
+    /** Number of level-high alerts. */
+    countLevelHigh?: number;
+    /** Number of warning alerts. */
+    countWarning?: number;
+    /** Number of level-medium alerts. */
+    countLevelMedium?: number;
+    /** Number of caution alerts. */
+    countCaution?: number;
+    /** Number of level-low alerts. */
+    countLevelLow?: number;
+    /** Number of level-diagnostic alerts. */
+    countLevelDiagnostic?: number;
+}
 /**
  * `<obc-tree-navigation-item>` – A single row in a tree- or file-explorer-style
  * navigation list, with indentation guide lines, an optional expand/collapse
@@ -57,8 +89,12 @@ export declare enum TreeTerminalType {
  *   aggregated or grouped alerts.
  * - **Leading icon:** Provide an icon via the `icon` slot (shown when
  *   `hasLeadingIcon`).
- * - **Alert badge:** A trailing counter badge (e.g. an alarm count), toggled with
- *   `hasAlertBadge` and configured via `alertCount` and `alertType`.
+ * - **Alert badges:** Trailing counter badges driven by the `alerts` object — a
+ *   per-severity count map with one field per level severity (critical, high,
+ *   medium, low, diagnostic). By default each non-zero count renders its own
+ *   badge, ordered most to least severe by `ALERT_SEVERITY_PRIORITY`; set
+ *   `alerts.aggregate` to instead show a single badge with the combined total,
+ *   styled as the highest category present.
  * - **Checked state:** `checked` highlights the current selection using the
  *   amplified elevation style. A checked row is the current item and is not
  *   re-selectable — it shows no hover/pressed feedback and fires no `click` or
@@ -123,12 +159,17 @@ export declare class ObcTreeNavigationItem extends LitElement {
      * One of `regular` (default), `aggregated-header`, or `group-header`.
      */
     terminalType: string;
-    /** Whether a trailing alert counter badge is shown. */
-    hasAlertBadge: boolean;
-    /** The number shown in the alert badge when `hasAlertBadge` is true. */
-    alertCount: number;
-    /** The severity/type of the alert badge. One of the `obc-badge` types (default `alarm`). */
-    alertType: string;
+    /**
+     * Per-severity alert counts for the row's trailing badge(s). Omit (or leave
+     * every count at 0) for a row with no alerts. See {@link TreeNavigationItemAlerts}.
+     *
+     * - When `aggregate` is true, a single badge is shown: its number is the sum
+     *   of all counts and its severity is the highest category present
+     *   (critical → alarm → warning → caution).
+     * - Otherwise one badge is shown per count greater than 0, ordered most to
+     *   least severe and spaced by the alert-counter spacing token.
+     */
+    alerts?: TreeNavigationItemAlerts;
     /**
      * The URL to navigate to when the row is activated. If set, the row renders as
      * a link; otherwise it acts as a button.
@@ -137,6 +178,16 @@ export declare class ObcTreeNavigationItem extends LitElement {
     private wrapperElement?;
     /** Focuses the row's interactive wrapper (the host itself is not focusable). */
     focus(options?: FocusOptions): void;
+    /**
+     * The badge(s) to render from `alerts`, as `{type, count}` pairs already in
+     * severity order, ranked by `ALERT_SEVERITY_PRIORITY`.
+     *
+     * - No `alerts`, or every count 0 → no badges.
+     * - `aggregate` → a single pair: the summed count typed as the highest
+     *   category that has any alerts.
+     * - Otherwise → one pair per count greater than 0.
+     */
+    private get alertBadges();
     /** A root-level row has no ancestor columns, so it draws no connector lines. */
     private get isRoot();
     /**

package/dist/components/tree-navigation-item/tree-navigation-item.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tree-navigation-item.d.ts","sourceRoot":"","sources":["../../../src/components/tree-navigation-item/tree-navigation-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAMzD,OAAO,0CAA0C,CAAC;AAClD,OAAO,iDAAiD,CAAC;AACzD,OAAO,4CAA4C,CAAC;AACpD,OAAO,mBAAmB,CAAC;AAG3B;;;;;;;;GAQG;AACH,oBAAY,cAAc;IACxB,QAAQ,aAAa;IACrB,YAAY,iBAAiB;IAC7B,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED;;;;;;;;;GASG;AACH,oBAAY,gBAAgB;IAC1B,OAAO,YAAY;IACnB,gBAAgB,sBAAsB;IACtC,WAAW,iBAAiB;CAC7B;AAED~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG~~;AACH,qBACa,qBAAsB,SAAQ,UAAU;IACnD,4CAA4C;IAClB,KAAK,SAAe;IAE9C;;;OAGG;IACsB,QAAQ,EAAE,cAAc,EAAE,CAAM;IAEzD,oFAAoF;IACzD,UAAU,UAAS;IAE9C,kFAAkF;IACxC,QAAQ,UAAS;IAE3D;;;;;OAKG;IACuC,OAAO,UAAS;IAE1D,mFAAmF;IACzC,QAAQ,UAAS;IAE3D;;;OAGG;IAC0C,SAAS,UAAQ;IAE9D;;OAEG;IAC0C,cAAc,UAAQ;IAEnE;;;OAGG;IACuB,YAAY,EAAE,MAAM,CAA4B;IAE1E~~,uDAAuD~~;~~IAC5B~~,~~aAAa~~,~~UAAS;IAEjD~~,~~wEAAwE;IAC9C,UAAU,SAAK;IAEzC,4FAA4F;IAClE,SAAS,~~EAAE,~~MAAM~~,~~CAAmB~~;~~IAE9D~~;;;OAGG;IACuB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEhC,OAAO,CAAC,cAAc,CAAC,CAAc;IAExD,gFAAgF;IAChE,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAInD,gFAAgF;IAChF,OAAO,KAAK,MAAM,GAEjB;IAED;;;OAGG;IACH,OAAO,KAAK,eAAe,GAK1B;IAED,OAAO,CAAC,QAAQ;IAiBhB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,YAAY;IAkBpB,OAAO,CAAC,oBAAoB;IAcnB,MAAM;~~IA2Df~~,OAAgB,MAAM,0BAA6B;CACpD;AAED,MAAM,MAAM,sCAAsC,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;AAE1E,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,0BAA0B,EAAE,qBAAqB,CAAC;KACnD;CACF"}
1	+ {"version":3,"file":"tree-navigation-item.d.ts","sourceRoot":"","sources":["../../../src/components/tree-navigation-item/tree-navigation-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAMzD,OAAO,0CAA0C,CAAC;AAClD,OAAO,iDAAiD,CAAC;AACzD,OAAO,4CAA4C,CAAC;AACpD,OAAO,mBAAmB,CAAC;AAG3B;;;;;;;;GAQG;AACH,oBAAY,cAAc;IACxB,QAAQ,aAAa;IACrB,YAAY,iBAAiB;IAC7B,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED;;;;;;;;;GASG;AACH,oBAAY,gBAAgB;IAC1B,OAAO,YAAY;IACnB,gBAAgB,sBAAsB;IACtC,WAAW,iBAAiB;CAC7B;AAED;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,wBAAwB;IACvC,+EAA+E;IAC/E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uCAAuC;IACvC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,8BAA8B;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gCAAgC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qCAAqC;IACrC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gCAAgC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yCAAyC;IACzC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AACH,qBACa,qBAAsB,SAAQ,UAAU;IACnD,4CAA4C;IAClB,KAAK,SAAe;IAE9C;;;OAGG;IACsB,QAAQ,EAAE,cAAc,EAAE,CAAM;IAEzD,oFAAoF;IACzD,UAAU,UAAS;IAE9C,kFAAkF;IACxC,QAAQ,UAAS;IAE3D;;;;;OAKG;IACuC,OAAO,UAAS;IAE1D,mFAAmF;IACzC,QAAQ,UAAS;IAE3D;;;OAGG;IAC0C,SAAS,UAAQ;IAE9D;;OAEG;IAC0C,cAAc,UAAQ;IAEnE;;;OAGG;IACuB,YAAY,EAAE,MAAM,CAA4B;IAE1E;;;;;;;;;OASG;IACuB,MAAM,CAAC,EAAE,wBAAwB,CAAC;IAE5D;;;OAGG;IACuB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEhC,OAAO,CAAC,cAAc,CAAC,CAAc;IAExD,gFAAgF;IAChE,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAInD;;;;;;;;OAQG;IACH,OAAO,KAAK,WAAW,GAyBtB;IAED,gFAAgF;IAChF,OAAO,KAAK,MAAM,GAEjB;IAED;;;OAGG;IACH,OAAO,KAAK,eAAe,GAK1B;IAED,OAAO,CAAC,QAAQ;IAiBhB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,YAAY;IAkBpB,OAAO,CAAC,oBAAoB;IAcnB,MAAM;IAgEf,OAAgB,MAAM,0BAA6B;CACpD;AAED,MAAM,MAAM,sCAAsC,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;AAE1E,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,0BAA0B,EAAE,qBAAqB,CAAC;KACnD;CACF"}

package/dist/components/tree-navigation-item/tree-navigation-item.js CHANGED Viewed

@@ -7,7 +7,8 @@ import { customElement } from "../../decorator.js";
 import "../../icons/icon-chevron-right-google.js";
 import "../../icons/icon-alert-header-aggregated-iec.js";
 import "../../icons/icon-alert-header-group-iec.js";
-import { BadgeType } from "../badge/badge.js";
+import "../badge/badge.js";
+import { AlertType, ALERT_SEVERITY_PRIORITY } from "../../types.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -43,14 +44,44 @@ let ObcTreeNavigationItem = class extends LitElement {
     this.focusable = true;
     this.hasLeadingIcon = true;
     this.terminalType = "regular";
-    this.hasAlertBadge = false;
-    this.alertCount = 0;
-    this.alertType = BadgeType.alarm;
   }
   /** Focuses the row's interactive wrapper (the host itself is not focusable). */
   focus(options) {
     this.wrapperElement?.focus(options);
   }
+  /**
+   * The badge(s) to render from `alerts`, as `{type, count}` pairs already in
+   * severity order, ranked by `ALERT_SEVERITY_PRIORITY`.
+   *
+   * - No `alerts`, or every count 0 → no badges.
+   * - `aggregate` → a single pair: the summed count typed as the highest
+   *   category that has any alerts.
+   * - Otherwise → one pair per count greater than 0.
+   */
+  get alertBadges() {
+    const alerts = this.alerts;
+    if (!alerts) return [];
+    const countByType = {
+      [AlertType.LevelCritical]: alerts.countLevelCritical ?? 0,
+      [AlertType.Alarm]: alerts.countAlarm ?? 0,
+      [AlertType.LevelHigh]: alerts.countLevelHigh ?? 0,
+      [AlertType.Warning]: alerts.countWarning ?? 0,
+      [AlertType.LevelMedium]: alerts.countLevelMedium ?? 0,
+      [AlertType.Caution]: alerts.countCaution ?? 0,
+      [AlertType.LevelLow]: alerts.countLevelLow ?? 0,
+      [AlertType.LevelDiagnostic]: alerts.countLevelDiagnostic ?? 0
+    };
+    const ranked = ALERT_SEVERITY_PRIORITY.filter(
+      (type) => type in countByType
+    ).map((type) => ({ type, count: countByType[type] ?? 0 }));
+    if (alerts.aggregate) {
+      const total = ranked.reduce((sum, b) => sum + b.count, 0);
+      const highest = ranked.find((b) => b.count > 0);
+      if (!highest) return [];
+      return [{ type: highest.type, count: total }];
+    }
+    return ranked.filter((b) => b.count > 0);
+  }
   /** A root-level row has no ancestor columns, so it draws no connector lines. */
   get isRoot() {
     return this.branches.length === 0;
@@ -144,11 +175,15 @@ let ObcTreeNavigationItem = class extends LitElement {
                 </div>` : nothing}
             <span part="label" class="label">${this.label}</span>
           </div>
-          ${this.hasAlertBadge ? html`<obc-badge
-                class="alert-badge"
-                .type=${this.alertType}
-                .number=${this.alertCount}
-              ></obc-badge>` : nothing}
+          ${this.alertBadges.length > 0 ? html`<div class="alert-badges">
+                ${this.alertBadges.map(
+      (badge) => html`<obc-badge
+                      class="alert-badge"
+                      .type=${badge.type}
+                      .number=${badge.count}
+                    ></obc-badge>`
+    )}
+              </div>` : nothing}
         </div>
       </div>
     `;
@@ -183,14 +218,8 @@ __decorateClass([
   property({ type: String })
 ], ObcTreeNavigationItem.prototype, "terminalType", 2);
 __decorateClass([
-  property({ type: Boolean })
-], ObcTreeNavigationItem.prototype, "hasAlertBadge", 2);
-__decorateClass([
-  property({ type: Number })
-], ObcTreeNavigationItem.prototype, "alertCount", 2);
-__decorateClass([
-  property({ type: String })
-], ObcTreeNavigationItem.prototype, "alertType", 2);
+  property({ type: Object })
+], ObcTreeNavigationItem.prototype, "alerts", 2);
 __decorateClass([
   property({ type: String })
 ], ObcTreeNavigationItem.prototype, "href", 2);