@oicl/openbridge-webcomponents 2.0.0-next.63 → 2.0.0-next.65

package/dist/components/navigation-item/navigation-item.js

@@ -7,7 +7,6 @@ import "../../icons/icon-arrow-flyout-google.js";
 import { ObcNavigationMenuVariant } from "../navigation-menu/navigation-menu.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) => {
@@ -31,9 +30,6 @@ let ObcNavigationItem = class extends LitElement {
     this.treeMode = false;
     this.treeBranches = [];
     this.terminalType = TreeTerminalType.regular;
-    this.hasAlertBadge = false;
-    this.alertCount = 0;
-    this.alertType = BadgeType.alarm;
   }
   /**
    * Fired when the navigation item is clicked (either as a link or button).
@@ -80,9 +76,7 @@ let ObcNavigationItem = class extends LitElement {
           .hasLeadingIcon=${this.hasIcon}
           .href=${this.href}
           .terminalType=${this.terminalType}
-          ?hasAlertBadge=${this.hasAlertBadge}
-          .alertCount=${this.alertCount}
-          .alertType=${this.alertType}
+          .alerts=${this.alerts}
           @click=${this.onClick}
         >
           ${this.hasIcon ? html`<slot name="icon" slot="icon"></slot>` : nothing}
@@ -170,14 +164,8 @@ __decorateClass([
   property({ type: String })
 ], ObcNavigationItem.prototype, "terminalType", 2);
 __decorateClass([
-  property({ type: Boolean })
-], ObcNavigationItem.prototype, "hasAlertBadge", 2);
-__decorateClass([
-  property({ type: Number })
-], ObcNavigationItem.prototype, "alertCount", 2);
-__decorateClass([
-  property({ type: String })
-], ObcNavigationItem.prototype, "alertType", 2);
+  property({ type: Object })
+], ObcNavigationItem.prototype, "alerts", 2);
 __decorateClass([
   query("a")
 ], ObcNavigationItem.prototype, "anchorElement", 2);

package/dist/components/navigation-item/navigation-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-item.js","sources":["../../../src/components/navigation-item/navigation-item.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport compentStyle from './navigation-item.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport '../../icons/icon-arrow-flyout-google.js';\nimport {ObcNavigationMenuVariant} from '../navigation-menu/navigation-menu.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\nenum NavigationItemRole {\n  Button = 'button',\n  MenuItem = 'menuitem',\n}\n\n/**\n * `<obc-navigation-item>` – A navigation menu item component for use in navigation bars, side menus, or toolbars.\n *\n * Displays a selectable navigation option, optionally with an icon and support for different visual variants. Can be used as a link or as a button within navigation menus, supporting both single items and grouped menu structures.\n *\n * Appears as a horizontal or vertical item, with optional icon, label, and flyout indicator for nested or grouped navigation. Designed for use in navigation menus, toolbars, or any UI requiring a consistent, interactive navigation element.\n *\n * ## Features\n * - **Variants:**\n *   - `Full` (default): Standard navigation item with icon (optional), label, and optional flyout indicator for groups.\n *   - `IconOnly`: Displays only the icon, suitable for compact or icon-based navigation menus.\n *   - `IconOnlyLarge`: Larger icon-only variant for prominent navigation actions.\n *   - `Compact`: Smaller, vertically-stacked layout with icon and label, optimized for space-constrained menus.\n * - **Icon Support:**\n *   - Leading icon can be provided via the `icon` slot.\n *   - Icon presence is automatically detected and styled.\n * - **Label:**\n *   - Text label shown unless in icon-only variants.\n * - **Checked State:**\n *   - Indicates the currently selected or active navigation item.\n * - **Group Mode:**\n *   - When `group` is true, displays a flyout indicator (arrow) and supports group selection highlighting.\n * - **Link Support:**\n *   - Can be rendered as a link via the `href` property, or as a button if `href` is not set.\n * - **Accessibility:**\n *   - Uses semantic anchor element for navigation.\n *\n * ## Usage Guidelines\n * Use `obc-navigation-item` for interactive navigation options within menus, toolbars, or navigation drawers.\n * - Ideal for main or secondary navigation, especially where visual consistency and flexible layout are needed.\n * - Use the `Full` variant for standard navigation lists with both icon and label.\n * - Use `IconOnly` or `IconOnlyLarge` for toolbars or sidebars where space is limited or icon-only navigation is preferred.\n * - Use `Compact` for dense menus or when vertical stacking of icon and label is desired.\n * - Set `checked` to highlight the currently active or selected item.\n * - Use `group` and `groupSelected` to indicate grouped navigation and selection within groups.\n * - Provide an icon via the `icon` slot for visual context (e.g., `<obi-placeholder slot=\"icon\"></obi-placeholder>).\n * - Use `href` to make the item a link; omit for button-like behavior.\n * - Use `::part(label)` CSS pseudo-element to style the label.\n *\n * **TODO(designer):** Clarify if there are recommended icon choices or label length constraints for each variant.\n *\n * ## Slots\n *\n * | Slot Name | Renders When... | Purpose |\n * |-----------|-----------------|---------|\n * | icon      | Always (optional) | Leading icon for the navigation item. Place an icon such as `<obi-placeholder slot=\"icon\"></obi-placeholder>`. |\n *\n * ## Properties and Attributes\n * - `label` (string): The text label for the navigation item. Hidden in icon-only variants.\n * - `href` (string, optional): If set, the item is rendered as a link. If undefined, acts as a button.\n * - `checked` (boolean): Marks the item as selected/active.\n * - `variant` (string): Controls the visual style. One of `Full`, `IconOnly`, `IconOnlyLarge`, or `Compact`.\n * - `group` (boolean): Enables group mode, showing a flyout indicator and supporting group selection.\n * - `groupSelected` (boolean): Highlights the item as selected within a group.\n * - `hasIcon` (boolean): Whether the item has a leading icon.\n *\n * ## Events\n * - `click` – Fired when the navigation item is clicked (either as a link or button).\n *\n * ## Best Practices and Constraints\n * - Only use one navigation item as `checked` at a time within a menu to indicate the current location.\n * - For icon-only variants, ensure the icon clearly represents the navigation action.\n * - Use `group` for items that open submenus or represent grouped navigation.\n * - Avoid long labels in compact or icon-only variants to maintain layout integrity.\n * - For accessibility, provide meaningful labels and icons.\n *\n * ## Example:\n * ```\n * <obc-navigation-item\n *   label=\"Dashboard\"\n *   href=\"/dashboard\"\n *   checked\n *   variant=\"Full\"\n * >\n *   <obi-placeholder slot=\"icon\"></obi-placeholder>\n * </obc-navigation-item>\n * ```\n *\n * @slot icon - Leading icon slot (optional, shown if provided). Set `hasIcon` to `true` to show the icon.\n * @slot trailing-icon - Trailing icon slot (optional, shown if provided). Set `hasTrailingIcon` to `true` to show.\n * @fires click {CustomEvent<void>} Fired when the navigation item is clicked.\n */\n\n@customElement('obc-navigation-item')\nexport class ObcNavigationItem extends LitElement {\n  /**\n   * The text label displayed for the navigation item.\n   * Hidden in icon-only variants.\n   */\n  @property({type: String}) label = 'Label';\n\n  /**\n   * The URL to navigate to when the item is clicked.\n   * If set, the item is rendered as a link (`<a href=\"...\" />`).\n   * If undefined, acts as a button.\n   */\n  @property({type: String}) href: string | undefined;\n\n  /**\n   * Whether the navigation item is currently selected/active.\n   * Use to indicate the current location or selection.\n   */\n  @property({type: Boolean}) checked = false;\n\n  /**\n   * Visual variant of the navigation item.\n   * One of `Full` (default), `IconOnly`, `IconOnlyLarge`, or `Compact`.\n   * Controls layout and visibility of icon/label.\n   */\n  @property({type: String}) variant = ObcNavigationMenuVariant.Full;\n\n  /**\n   * Enables group mode for the item, displaying a flyout indicator and supporting group selection.\n   * Use for items that open submenus or represent grouped navigation.\n   */\n  @property({type: Boolean}) group = false;\n\n  /**\n   * Highlights the item as selected within a group.\n   * Only relevant when `group` is true.\n   */\n  @property({type: Boolean}) groupSelected = false;\n\n  /**\n   * Whether the item has a leading icon.\n   */\n  @property({type: Boolean, reflect: true}) hasIcon = false;\n\n  @property({type: Boolean}) hasTrailingIcon = false;\n\n  /** Set by `obc-navigation-menu` in its Tree variant — renders the row as a tree item. */\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 row in the Tree variant — one of `regular` (default),\n   * `aggregated-header`, or `group-header`. Has no effect in the flat variants.\n   */\n  @property({type: String}) terminalType: string = TreeTerminalType.regular;\n\n  /** Whether a trailing alert counter badge is shown (Tree variant only). */\n  @property({type: Boolean}) hasAlertBadge = false;\n\n  /** The number shown in the alert badge when `hasAlertBadge` is true (Tree variant only). */\n  @property({type: Number}) alertCount = 0;\n\n  /** The severity/type of the alert badge — one of the `obc-badge` types (Tree variant only). */\n  @property({type: String}) alertType: string = BadgeType.alarm;\n\n  @query('a') private anchorElement?: HTMLAnchorElement;\n\n  // In tree mode the row renders an `obc-tree-navigation-item` instead of an `<a>`.\n  @query('obc-tree-navigation-item') private treeItemElement?: HTMLElement;\n\n  /**\n   * Fired when the navigation item is clicked (either as a link or button).\n   * @fires click {CustomEvent<void>}\n   */\n  onClick() {\n    dispatchEvent(new CustomEvent('click'));\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    const isMenuItem =\n      this.getAttribute('role') === NavigationItemRole.MenuItem;\n    if (this.href !== undefined && !isMenuItem) return;\n    if (event.key !== 'Enter' && event.key !== ' ') {\n      return;\n    }\n\n    event.preventDefault();\n    this.anchorElement?.click();\n  }\n\n  public override focus(options?: FocusOptions): void {\n    (this.treeItemElement ?? this.anchorElement)?.focus(options);\n  }\n\n  private getItemRole(): NavigationItemRole | undefined {\n    const hostRole = this.getAttribute('role');\n    if (hostRole === NavigationItemRole.MenuItem) {\n      return NavigationItemRole.MenuItem;\n    }\n\n    return this.href === undefined ? NavigationItemRole.Button : undefined;\n  }\n\n  private getItemTabIndex(): number | undefined {\n    const hostTabIndex = this.getAttribute('tabindex');\n    if (hostTabIndex !== null) {\n      const parsedTabIndex = Number(hostTabIndex);\n      return Number.isNaN(parsedTabIndex) ? undefined : parsedTabIndex;\n    }\n\n    return this.href === undefined ? 0 : undefined;\n  }\n\n  override render() {\n    if (this.treeMode) {\n      // Delegate the whole row to the tree item: it owns focus, keyboard\n      // activation, the checked-inert behavior, and href navigation. Forward its\n      // activation as this item's own `click` so selection wiring is unchanged.\n      return html`\n        <obc-tree-navigation-item\n          class=\"tree\"\n          .label=${this.label}\n          .branches=${this.treeBranches}\n          ?checked=${this.checked}\n          .hasLeadingIcon=${this.hasIcon}\n          .href=${this.href}\n          .terminalType=${this.terminalType}\n          ?hasAlertBadge=${this.hasAlertBadge}\n          .alertCount=${this.alertCount}\n          .alertType=${this.alertType}\n          @click=${this.onClick}\n        >\n          ${this.hasIcon\n            ? html`<slot name=\"icon\" slot=\"icon\"></slot>`\n            : nothing}\n        </obc-tree-navigation-item>\n      `;\n    }\n\n    const showFlyout =\n      this.group && this.variant !== ObcNavigationMenuVariant.IconOnly;\n    const isCompact = this.variant === ObcNavigationMenuVariant.Compact;\n\n    return html`\n      <a\n        class=\"${classMap({\n          wrapper: true,\n          checked: this.checked,\n          'group-selected': this.groupSelected && this.group,\n          'has-icon': this.hasIcon,\n          [this.variant]: true,\n        })}\"\n        href=${ifDefined(this.href)}\n        @click=${this.onClick}\n        @keydown=${this.handleKeydown}\n        tabindex=${ifDefined(this.getItemTabIndex())}\n        role=${ifDefined(this.getItemRole())}\n      >\n        <div class=\"visible-wrapper\">\n          ${this.hasIcon\n            ? html`<slot name=\"icon\" class=\"icon leading\"></slot>`\n            : nothing}\n          ${![\n            ObcNavigationMenuVariant.IconOnly,\n            ObcNavigationMenuVariant.IconOnlyLarge,\n          ].includes(this.variant)\n            ? html`\n                <span\n                  part=\"label\"\n                  class=${classMap({\n                    label: true,\n                    'label-flyout': showFlyout && !isCompact,\n                  })}\n                >\n                  ${this.label}\n                </span>\n              `\n            : nothing}\n          ${showFlyout\n            ? html`\n                <div class=\"flyout-wrapper\">\n                  <obi-arrow-flyout-google\n                    class=\"icon trailing\"\n                  ></obi-arrow-flyout-google>\n                </div>\n              `\n            : nothing}\n          ${this.hasTrailingIcon && !showFlyout\n            ? html`<slot name=\"trailing-icon\" class=\"icon trailing\"></slot>`\n            : nothing}\n        </div>\n      </a>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-navigation-item': ObcNavigationItem;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"navigation-item.js","sources":["../../../src/components/navigation-item/navigation-item.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport compentStyle from './navigation-item.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport '../../icons/icon-arrow-flyout-google.js';\nimport {ObcNavigationMenuVariant} from '../navigation-menu/navigation-menu.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\nenum NavigationItemRole {\n  Button = 'button',\n  MenuItem = 'menuitem',\n}\n\n/**\n * `<obc-navigation-item>` – A navigation menu item component for use in navigation bars, side menus, or toolbars.\n *\n * Displays a selectable navigation option, optionally with an icon and support for different visual variants. Can be used as a link or as a button within navigation menus, supporting both single items and grouped menu structures.\n *\n * Appears as a horizontal or vertical item, with optional icon, label, and flyout indicator for nested or grouped navigation. Designed for use in navigation menus, toolbars, or any UI requiring a consistent, interactive navigation element.\n *\n * ## Features\n * - **Variants:**\n *   - `Full` (default): Standard navigation item with icon (optional), label, and optional flyout indicator for groups.\n *   - `IconOnly`: Displays only the icon, suitable for compact or icon-based navigation menus.\n *   - `IconOnlyLarge`: Larger icon-only variant for prominent navigation actions.\n *   - `Compact`: Smaller, vertically-stacked layout with icon and label, optimized for space-constrained menus.\n * - **Icon Support:**\n *   - Leading icon can be provided via the `icon` slot.\n *   - Icon presence is automatically detected and styled.\n * - **Label:**\n *   - Text label shown unless in icon-only variants.\n * - **Checked State:**\n *   - Indicates the currently selected or active navigation item.\n * - **Group Mode:**\n *   - When `group` is true, displays a flyout indicator (arrow) and supports group selection highlighting.\n * - **Link Support:**\n *   - Can be rendered as a link via the `href` property, or as a button if `href` is not set.\n * - **Accessibility:**\n *   - Uses semantic anchor element for navigation.\n *\n * ## Usage Guidelines\n * Use `obc-navigation-item` for interactive navigation options within menus, toolbars, or navigation drawers.\n * - Ideal for main or secondary navigation, especially where visual consistency and flexible layout are needed.\n * - Use the `Full` variant for standard navigation lists with both icon and label.\n * - Use `IconOnly` or `IconOnlyLarge` for toolbars or sidebars where space is limited or icon-only navigation is preferred.\n * - Use `Compact` for dense menus or when vertical stacking of icon and label is desired.\n * - Set `checked` to highlight the currently active or selected item.\n * - Use `group` and `groupSelected` to indicate grouped navigation and selection within groups.\n * - Provide an icon via the `icon` slot for visual context (e.g., `<obi-placeholder slot=\"icon\"></obi-placeholder>).\n * - Use `href` to make the item a link; omit for button-like behavior.\n * - Use `::part(label)` CSS pseudo-element to style the label.\n *\n * **TODO(designer):** Clarify if there are recommended icon choices or label length constraints for each variant.\n *\n * ## Slots\n *\n * | Slot Name | Renders When... | Purpose |\n * |-----------|-----------------|---------|\n * | icon      | Always (optional) | Leading icon for the navigation item. Place an icon such as `<obi-placeholder slot=\"icon\"></obi-placeholder>`. |\n *\n * ## Properties and Attributes\n * - `label` (string): The text label for the navigation item. Hidden in icon-only variants.\n * - `href` (string, optional): If set, the item is rendered as a link. If undefined, acts as a button.\n * - `checked` (boolean): Marks the item as selected/active.\n * - `variant` (string): Controls the visual style. One of `Full`, `IconOnly`, `IconOnlyLarge`, or `Compact`.\n * - `group` (boolean): Enables group mode, showing a flyout indicator and supporting group selection.\n * - `groupSelected` (boolean): Highlights the item as selected within a group.\n * - `hasIcon` (boolean): Whether the item has a leading icon.\n *\n * ## Events\n * - `click` – Fired when the navigation item is clicked (either as a link or button).\n *\n * ## Best Practices and Constraints\n * - Only use one navigation item as `checked` at a time within a menu to indicate the current location.\n * - For icon-only variants, ensure the icon clearly represents the navigation action.\n * - Use `group` for items that open submenus or represent grouped navigation.\n * - Avoid long labels in compact or icon-only variants to maintain layout integrity.\n * - For accessibility, provide meaningful labels and icons.\n *\n * ## Example:\n * ```\n * <obc-navigation-item\n *   label=\"Dashboard\"\n *   href=\"/dashboard\"\n *   checked\n *   variant=\"Full\"\n * >\n *   <obi-placeholder slot=\"icon\"></obi-placeholder>\n * </obc-navigation-item>\n * ```\n *\n * @slot icon - Leading icon slot (optional, shown if provided). Set `hasIcon` to `true` to show the icon.\n * @slot trailing-icon - Trailing icon slot (optional, shown if provided). Set `hasTrailingIcon` to `true` to show.\n * @fires click {CustomEvent<void>} Fired when the navigation item is clicked.\n */\n\n@customElement('obc-navigation-item')\nexport class ObcNavigationItem extends LitElement {\n  /**\n   * The text label displayed for the navigation item.\n   * Hidden in icon-only variants.\n   */\n  @property({type: String}) label = 'Label';\n\n  /**\n   * The URL to navigate to when the item is clicked.\n   * If set, the item is rendered as a link (`<a href=\"...\" />`).\n   * If undefined, acts as a button.\n   */\n  @property({type: String}) href: string | undefined;\n\n  /**\n   * Whether the navigation item is currently selected/active.\n   * Use to indicate the current location or selection.\n   */\n  @property({type: Boolean}) checked = false;\n\n  /**\n   * Visual variant of the navigation item.\n   * One of `Full` (default), `IconOnly`, `IconOnlyLarge`, or `Compact`.\n   * Controls layout and visibility of icon/label.\n   */\n  @property({type: String}) variant = ObcNavigationMenuVariant.Full;\n\n  /**\n   * Enables group mode for the item, displaying a flyout indicator and supporting group selection.\n   * Use for items that open submenus or represent grouped navigation.\n   */\n  @property({type: Boolean}) group = false;\n\n  /**\n   * Highlights the item as selected within a group.\n   * Only relevant when `group` is true.\n   */\n  @property({type: Boolean}) groupSelected = false;\n\n  /**\n   * Whether the item has a leading icon.\n   */\n  @property({type: Boolean, reflect: true}) hasIcon = false;\n\n  @property({type: Boolean}) hasTrailingIcon = false;\n\n  /** Set by `obc-navigation-menu` in its Tree variant — renders the row as a tree item. */\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 row in the Tree variant — one of `regular` (default),\n   * `aggregated-header`, or `group-header`. Has no effect in the flat variants.\n   */\n  @property({type: String}) terminalType: string = TreeTerminalType.regular;\n\n  /**\n   * Per-severity alert counts shown as trailing badge(s) (Tree variant only).\n   * Forwarded to the underlying `obc-tree-navigation-item`. See\n   * {@link TreeNavigationItemAlerts}.\n   */\n  @property({type: Object}) alerts?: TreeNavigationItemAlerts;\n\n  @query('a') private anchorElement?: HTMLAnchorElement;\n\n  // In tree mode the row renders an `obc-tree-navigation-item` instead of an `<a>`.\n  @query('obc-tree-navigation-item') private treeItemElement?: HTMLElement;\n\n  /**\n   * Fired when the navigation item is clicked (either as a link or button).\n   * @fires click {CustomEvent<void>}\n   */\n  onClick() {\n    dispatchEvent(new CustomEvent('click'));\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    const isMenuItem =\n      this.getAttribute('role') === NavigationItemRole.MenuItem;\n    if (this.href !== undefined && !isMenuItem) return;\n    if (event.key !== 'Enter' && event.key !== ' ') {\n      return;\n    }\n\n    event.preventDefault();\n    this.anchorElement?.click();\n  }\n\n  public override focus(options?: FocusOptions): void {\n    (this.treeItemElement ?? this.anchorElement)?.focus(options);\n  }\n\n  private getItemRole(): NavigationItemRole | undefined {\n    const hostRole = this.getAttribute('role');\n    if (hostRole === NavigationItemRole.MenuItem) {\n      return NavigationItemRole.MenuItem;\n    }\n\n    return this.href === undefined ? NavigationItemRole.Button : undefined;\n  }\n\n  private getItemTabIndex(): number | undefined {\n    const hostTabIndex = this.getAttribute('tabindex');\n    if (hostTabIndex !== null) {\n      const parsedTabIndex = Number(hostTabIndex);\n      return Number.isNaN(parsedTabIndex) ? undefined : parsedTabIndex;\n    }\n\n    return this.href === undefined ? 0 : undefined;\n  }\n\n  override render() {\n    if (this.treeMode) {\n      // Delegate the whole row to the tree item: it owns focus, keyboard\n      // activation, the checked-inert behavior, and href navigation. Forward its\n      // activation as this item's own `click` so selection wiring is unchanged.\n      return html`\n        <obc-tree-navigation-item\n          class=\"tree\"\n          .label=${this.label}\n          .branches=${this.treeBranches}\n          ?checked=${this.checked}\n          .hasLeadingIcon=${this.hasIcon}\n          .href=${this.href}\n          .terminalType=${this.terminalType}\n          .alerts=${this.alerts}\n          @click=${this.onClick}\n        >\n          ${this.hasIcon\n            ? html`<slot name=\"icon\" slot=\"icon\"></slot>`\n            : nothing}\n        </obc-tree-navigation-item>\n      `;\n    }\n\n    const showFlyout =\n      this.group && this.variant !== ObcNavigationMenuVariant.IconOnly;\n    const isCompact = this.variant === ObcNavigationMenuVariant.Compact;\n\n    return html`\n      <a\n        class=\"${classMap({\n          wrapper: true,\n          checked: this.checked,\n          'group-selected': this.groupSelected && this.group,\n          'has-icon': this.hasIcon,\n          [this.variant]: true,\n        })}\"\n        href=${ifDefined(this.href)}\n        @click=${this.onClick}\n        @keydown=${this.handleKeydown}\n        tabindex=${ifDefined(this.getItemTabIndex())}\n        role=${ifDefined(this.getItemRole())}\n      >\n        <div class=\"visible-wrapper\">\n          ${this.hasIcon\n            ? html`<slot name=\"icon\" class=\"icon leading\"></slot>`\n            : nothing}\n          ${![\n            ObcNavigationMenuVariant.IconOnly,\n            ObcNavigationMenuVariant.IconOnlyLarge,\n          ].includes(this.variant)\n            ? html`\n                <span\n                  part=\"label\"\n                  class=${classMap({\n                    label: true,\n                    'label-flyout': showFlyout && !isCompact,\n                  })}\n                >\n                  ${this.label}\n                </span>\n              `\n            : nothing}\n          ${showFlyout\n            ? html`\n                <div class=\"flyout-wrapper\">\n                  <obi-arrow-flyout-google\n                    class=\"icon trailing\"\n                  ></obi-arrow-flyout-google>\n                </div>\n              `\n            : nothing}\n          ${this.hasTrailingIcon && !showFlyout\n            ? html`<slot name=\"trailing-icon\" class=\"icon trailing\"></slot>`\n            : nothing}\n        </div>\n      </a>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-navigation-item': ObcNavigationItem;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/components/navigation-item-group/navigation-item-group.d.ts

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
 import { ObcNavigationMenuVariant } from '../navigation-menu/navigation-menu.js';
-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-navigation-item-group>` – A collapsible navigation group component for organizing related navigation items under a single expandable label.
@@ -88,12 +88,13 @@ export declare class ObcNavigationItemGroup extends LitElement {
      * (default), `aggregated-header`, or `group-header`. No effect in flat variants.
      */
     terminalType: string;
-    /** Whether a trailing alert counter badge is shown on the header (Tree variant only). */
-    hasAlertBadge: boolean;
-    /** The number shown in the header's alert badge when `hasAlertBadge` is true (Tree variant only). */
-    alertCount: number;
-    /** The severity/type of the header's alert badge — one of the `obc-badge` types (Tree variant only). */
-    alertType: string;
+    /**
+     * Per-severity alert counts shown as trailing badge(s) on the group header
+     * (Tree variant only). Forwarded to the underlying `obc-tree-navigation-item`;
+     * typically `{aggregate: true, ...}` so the header totals the rows beneath it.
+     * See {@link TreeNavigationItemAlerts}.
+     */
+    alerts?: TreeNavigationItemAlerts;
     /** Whether the group starts expanded. Useful for trees that open by default. */
     defaultOpen: boolean;
     private openContainer;

package/dist/components/navigation-item-group/navigation-item-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-item-group.d.ts","sourceRoot":"","sources":["../../../src/components/navigation-item-group/navigation-item-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAGzD,OAAO,EAAC,wBAAwB,EAAC,MAAM,uCAAuC,CAAC;AAG/E,OAAO,iDAAiD,CAAC;AACzD,OAAO,EACL,cAAc,EAEf,MAAM,iDAAiD,CAAC;AAGzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,qBACa,sBAAuB,SAAQ,UAAU;IACpD;;OAEG;IACuB,KAAK,SAAW;IAE1C;;;OAGG;IACuB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEnD;;;OAGG;IACwB,OAAO,UAAS;IAE3C;;;;OAIG;IACuB,OAAO,EAAE,wBAAwB,CAC3B;IAEhC;;OAEG;IACwB,GAAG,UAAS;IAEZ,OAAO,UAAS;IAE3C,0FAA0F;IAC/D,QAAQ,UAAS;IAE5C,4EAA4E;IACnD,YAAY,EAAE,cAAc,EAAE,CAAM;IAE7D;;;OAGG;IACuB,YAAY,EAAE,MAAM,CAA4B;IAE1E,yFAAyF;IAC9D,aAAa,UAAS;IAEjD,qGAAqG;IAC3E,UAAU,SAAK;IAEzC,wGAAwG;IAC9E,SAAS,EAAE,MAAM,CAAmB;IAE9D,gFAAgF;IACrD,WAAW,UAAS;IAEtC,OAAO,CAAC,aAAa,CAAS;IAKvC,OAAO,CAAC,SAAS,CAAC,CAAc;IAEvB,YAAY;IAMrB,wEAAwE;IACxE,IAAW,QAAQ,IAAI,OAAO,CAE7B;IAED,OAAO,CAAC,YAAY;IAQpB;;;OAGG;IACH,IAAI;IAKJ,KAAK;IAOW,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAI1C,MAAM;IAgEf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,2BAA2B,EAAE,sBAAsB,CAAC;KACrD;CACF"}
+{"version":3,"file":"navigation-item-group.d.ts","sourceRoot":"","sources":["../../../src/components/navigation-item-group/navigation-item-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAGzD,OAAO,EAAC,wBAAwB,EAAC,MAAM,uCAAuC,CAAC;AAG/E,OAAO,iDAAiD,CAAC;AACzD,OAAO,EACL,cAAc,EAEd,KAAK,wBAAwB,EAC9B,MAAM,iDAAiD,CAAC;AAEzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,qBACa,sBAAuB,SAAQ,UAAU;IACpD;;OAEG;IACuB,KAAK,SAAW;IAE1C;;;OAGG;IACuB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEnD;;;OAGG;IACwB,OAAO,UAAS;IAE3C;;;;OAIG;IACuB,OAAO,EAAE,wBAAwB,CAC3B;IAEhC;;OAEG;IACwB,GAAG,UAAS;IAEZ,OAAO,UAAS;IAE3C,0FAA0F;IAC/D,QAAQ,UAAS;IAE5C,4EAA4E;IACnD,YAAY,EAAE,cAAc,EAAE,CAAM;IAE7D;;;OAGG;IACuB,YAAY,EAAE,MAAM,CAA4B;IAE1E;;;;;OAKG;IACuB,MAAM,CAAC,EAAE,wBAAwB,CAAC;IAE5D,gFAAgF;IACrD,WAAW,UAAS;IAEtC,OAAO,CAAC,aAAa,CAAS;IAKvC,OAAO,CAAC,SAAS,CAAC,CAAc;IAEvB,YAAY;IAMrB,wEAAwE;IACxE,IAAW,QAAQ,IAAI,OAAO,CAE7B;IAED,OAAO,CAAC,YAAY;IAQpB;;;OAGG;IACH,IAAI;IAKJ,KAAK;IAOW,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAI1C,MAAM;IA8Df,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,2BAA2B,EAAE,sBAAsB,CAAC;KACrD;CACF"}

package/dist/components/navigation-item-group/navigation-item-group.js

@@ -5,7 +5,6 @@ import { ObcNavigationMenuVariant } from "../navigation-menu/navigation-menu.js"
 import { classMap } from "lit/directives/class-map.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) => {
@@ -27,9 +26,6 @@ let ObcNavigationItemGroup = class extends LitElement {
     this.treeMode = false;
     this.treeBranches = [];
     this.terminalType = TreeTerminalType.regular;
-    this.hasAlertBadge = false;
-    this.alertCount = 0;
-    this.alertType = BadgeType.alarm;
     this.defaultOpen = false;
     this.openContainer = false;
   }
@@ -78,9 +74,7 @@ let ObcNavigationItemGroup = class extends LitElement {
           ?checked=${this.checked}
           .hasLeadingIcon=${this.hasIcon}
           .terminalType=${this.terminalType}
-          ?hasAlertBadge=${this.hasAlertBadge}
-          .alertCount=${this.alertCount}
-          .alertType=${this.alertType}
+          .alerts=${this.expanded ? void 0 : this.alerts}
           @expand-toggle=${this.onClickGroup}
         >
           ${this.hasIcon ? html`<slot name="icon" slot="icon"></slot>` : nothing}
@@ -156,14 +150,8 @@ __decorateClass([
   property({ type: String })
 ], ObcNavigationItemGroup.prototype, "terminalType", 2);
 __decorateClass([
-  property({ type: Boolean })
-], ObcNavigationItemGroup.prototype, "hasAlertBadge", 2);
-__decorateClass([
-  property({ type: Number })
-], ObcNavigationItemGroup.prototype, "alertCount", 2);
-__decorateClass([
-  property({ type: String })
-], ObcNavigationItemGroup.prototype, "alertType", 2);
+  property({ type: Object })
+], ObcNavigationItemGroup.prototype, "alerts", 2);
 __decorateClass([
   property({ type: Boolean })
 ], ObcNavigationItemGroup.prototype, "defaultOpen", 2);

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

@@ -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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"}
+{"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

@@ -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

@@ -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":"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"}
+{"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

@@ -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

@@ -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"}
+{"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

@@ -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

@@ -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":"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"}
+{"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

@@ -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

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