npm - @oicl/openbridge-webcomponents - Versions diffs - 2.0.0-next.59 → 2.0.0-next.60 - Mend

@oicl/openbridge-webcomponents 2.0.0-next.59 → 2.0.0-next.60

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

Files changed (42) hide show

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

@@ -363,6 +363,11 @@ const compentStyle = css`
     white-space: nowrap;
     min-width: 0;
   }
+obc-tree-navigation-item.tree {
+  display: block;
+  width: 100%;
+}
 `;
 export {
   compentStyle as default

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

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

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

@@ -1,6 +1,8 @@
 import { LitElement } from 'lit';
 import { ObcNavigationMenuVariant } from '../navigation-menu/navigation-menu.js';
+import { TreeBranchType } from '../tree-navigation-item/tree-navigation-item.js';
 import '../../icons/icon-arrow-flyout-google.js';
+import '../tree-navigation-item/tree-navigation-item.js';
 /**
  * `<obc-navigation-item>` – A navigation menu item component for use in navigation bars, side menus, or toolbars.
  *
@@ -121,7 +123,23 @@ export declare class ObcNavigationItem extends LitElement {
      */
     hasIcon: boolean;
     hasTrailingIcon: boolean;
+    /** Set by `obc-navigation-menu` in its Tree variant — renders the row as a tree item. */
+    treeMode: boolean;
+    /** Indentation columns for tree mode, assigned by `obc-navigation-menu`. */
+    treeBranches: TreeBranchType[];
+    /**
+     * Terminal type for the row in the Tree variant — one of `regular` (default),
+     * `aggregated-header`, or `group-header`. Has no effect in the flat variants.
+     */
+    terminalType: string;
+    /** Whether a trailing alert counter badge is shown (Tree variant only). */
+    hasAlertBadge: boolean;
+    /** The number shown in the alert badge when `hasAlertBadge` is true (Tree variant only). */
+    alertCount: number;
+    /** The severity/type of the alert badge — one of the `obc-badge` types (Tree variant only). */
+    alertType: string;
     private anchorElement?;
+    private treeItemElement?;
     /**
      * Fired when the navigation item is clicked (either as a link or button).
      * @fires click {CustomEvent<void>}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"navigation-item.d.ts","sourceRoot":"","sources":["../../../src/components/navigation-item/navigation-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAKzD,OAAO,yCAAyC,CAAC;AACjD,OAAO,EAAC,wBAAwB,EAAC,MAAM,uCAAuC,CAAC;~~AAQ~~/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiFG;AAEH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C;;;OAGG;IACuB,KAAK,SAAW;IAE1C;;;;OAIG;IACuB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEnD;;;OAGG;IACwB,OAAO,UAAS;IAE3C;;;;OAIG;IACuB,OAAO,2BAAiC;IAElE;;;OAGG;IACwB,KAAK,UAAS;IAEzC;;;OAGG;IACwB,aAAa,UAAS;IAEjD;;OAEG;IACuC,OAAO,UAAS;IAE/B,eAAe,UAAS;~~IAEvC~~,OAAO,CAAC,aAAa,CAAC,CAAoB;~~IAEtD~~;;;OAGG;IACH,OAAO;IAIP,OAAO,CAAC,aAAa;IAYL,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAInD,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,eAAe;IAUd,MAAM;~~IAyDf~~,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}
1	+ {"version":3,"file":"navigation-item.d.ts","sourceRoot":"","sources":["../../../src/components/navigation-item/navigation-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAKzD,OAAO,yCAAyC,CAAC;AACjD,OAAO,EAAC,wBAAwB,EAAC,MAAM,uCAAuC,CAAC;AAE/E,OAAO,iDAAiD,CAAC;AACzD,OAAO,EACL,cAAc,EAEf,MAAM,iDAAiD,CAAC;AAQzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiFG;AAEH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C;;;OAGG;IACuB,KAAK,SAAW;IAE1C;;;;OAIG;IACuB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEnD;;;OAGG;IACwB,OAAO,UAAS;IAE3C;;;;OAIG;IACuB,OAAO,2BAAiC;IAElE;;;OAGG;IACwB,KAAK,UAAS;IAEzC;;;OAGG;IACwB,aAAa,UAAS;IAEjD;;OAEG;IACuC,OAAO,UAAS;IAE/B,eAAe,UAAS;IAEnD,yFAAyF;IAC9D,QAAQ,UAAS;IAE5C,4EAA4E;IACnD,YAAY,EAAE,cAAc,EAAE,CAAM;IAE7D;;;OAGG;IACuB,YAAY,EAAE,MAAM,CAA4B;IAE1E,2EAA2E;IAChD,aAAa,UAAS;IAEjD,4FAA4F;IAClE,UAAU,SAAK;IAEzC,+FAA+F;IACrE,SAAS,EAAE,MAAM,CAAmB;IAElD,OAAO,CAAC,aAAa,CAAC,CAAoB;IAGnB,OAAO,CAAC,eAAe,CAAC,CAAc;IAEzE;;;OAGG;IACH,OAAO;IAIP,OAAO,CAAC,aAAa;IAYL,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAInD,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,eAAe;IAUd,MAAM;IAkFf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}

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

@@ -6,6 +6,8 @@ import { ifDefined } from "lit/directives/if-defined.js";
 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) => {
@@ -26,6 +28,12 @@ let ObcNavigationItem = class extends LitElement {
     this.groupSelected = false;
     this.hasIcon = false;
     this.hasTrailingIcon = false;
+    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).
@@ -44,7 +52,7 @@ let ObcNavigationItem = class extends LitElement {
     this.anchorElement?.click();
   }
   focus(options) {
-    this.anchorElement?.focus(options);
+    (this.treeItemElement ?? this.anchorElement)?.focus(options);
   }
   getItemRole() {
     const hostRole = this.getAttribute("role");
@@ -62,6 +70,25 @@ let ObcNavigationItem = class extends LitElement {
     return this.href === void 0 ? 0 : void 0;
   }
   render() {
+    if (this.treeMode) {
+      return html`
+        <obc-tree-navigation-item
+          class="tree"
+          .label=${this.label}
+          .branches=${this.treeBranches}
+          ?checked=${this.checked}
+          .hasLeadingIcon=${this.hasIcon}
+          .href=${this.href}
+          .terminalType=${this.terminalType}
+          ?hasAlertBadge=${this.hasAlertBadge}
+          .alertCount=${this.alertCount}
+          .alertType=${this.alertType}
+          @click=${this.onClick}
+        >
+          ${this.hasIcon ? html`<slot name="icon" slot="icon"></slot>` : nothing}
+        </obc-tree-navigation-item>
+      `;
+    }
     const showFlyout = this.group && this.variant !== ObcNavigationMenuVariant.IconOnly;
     const isCompact = this.variant === ObcNavigationMenuVariant.Compact;
     return html`
@@ -133,9 +160,30 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], ObcNavigationItem.prototype, "hasTrailingIcon", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcNavigationItem.prototype, "treeMode", 2);
+__decorateClass([
+  property({ type: Array })
+], ObcNavigationItem.prototype, "treeBranches", 2);
+__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);
 __decorateClass([
   query("a")
 ], ObcNavigationItem.prototype, "anchorElement", 2);
+__decorateClass([
+  query("obc-tree-navigation-item")
+], ObcNavigationItem.prototype, "treeItemElement", 2);
 ObcNavigationItem = __decorateClass([
   customElement("obc-navigation-item")
 ], ObcNavigationItem);

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

	@@ -1 +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';\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 @query('a') private anchorElement?: HTMLAnchorElement;\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.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 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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"}
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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"}

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

@@ -109,6 +109,14 @@ const compentStyle = css`
   display: flex;
   flex-direction: column;
 }
+[part="children"] {
+  display: block;
+}
+[part="children"][hidden] {
+  display: none;
+}
 `;
 export {
   compentStyle as default

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

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

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

@@ -1,5 +1,7 @@
 import { LitElement } from 'lit';
 import { ObcNavigationMenuVariant } from '../navigation-menu/navigation-menu.js';
+import { TreeBranchType } 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.
  *
@@ -77,8 +79,28 @@ export declare class ObcNavigationItemGroup extends LitElement {
      */
     hug: boolean;
     hasIcon: boolean;
+    /** Set by `obc-navigation-menu` in its Tree variant — renders the group as a tree row. */
+    treeMode: boolean;
+    /** Indentation columns for tree mode, assigned by `obc-navigation-menu`. */
+    treeBranches: TreeBranchType[];
+    /**
+     * Terminal type for the group header in the Tree variant — one of `regular`
+     * (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;
+    /** Whether the group starts expanded. Useful for trees that open by default. */
+    defaultOpen: boolean;
     private openContainer;
     private groupItem?;
+    firstUpdated(): void;
+    /** Whether the group is currently open (its children are disclosed). */
+    get expanded(): boolean;
     private onClickGroup;
     /**
      * Opens the flyout panel and emits the `open` event.

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

	@@ -1 +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;~~AAI~~/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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;~~IAElC~~,OAAO,CAAC,aAAa,CAAS;~~IAET~~,OAAO,CAAC,SAAS,CAAC,CAAc;~~IAE9D~~,OAAO,CAAC,YAAY;IAQpB;;;OAGG;IACH,IAAI;IAKJ,KAAK;IAOW,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAI1C,MAAM;~~IAsCf~~,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,2BAA2B,EAAE,sBAAsB,CAAC;KACrD;CACF"}
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"}

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

@@ -4,6 +4,8 @@ import compentStyle from "./navigation-item-group.css.js";
 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) => {
@@ -22,8 +24,24 @@ let ObcNavigationItemGroup = class extends LitElement {
     this.variant = ObcNavigationMenuVariant.Full;
     this.hug = false;
     this.hasIcon = false;
+    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;
   }
+  firstUpdated() {
+    if (this.defaultOpen) {
+      this.openContainer = true;
+    }
+  }
+  /** Whether the group is currently open (its children are disclosed). */
+  get expanded() {
+    return this.openContainer;
+  }
   onClickGroup() {
     if (this.openContainer) {
       this.close();
@@ -49,6 +67,29 @@ let ObcNavigationItemGroup = class extends LitElement {
     this.groupItem?.focus(options);
   }
   render() {
+    if (this.treeMode) {
+      return html`
+        <obc-tree-navigation-item
+          part="header"
+          .label=${this.label}
+          .branches=${this.treeBranches}
+          expandable
+          ?expanded=${this.openContainer}
+          ?checked=${this.checked}
+          .hasLeadingIcon=${this.hasIcon}
+          .terminalType=${this.terminalType}
+          ?hasAlertBadge=${this.hasAlertBadge}
+          .alertCount=${this.alertCount}
+          .alertType=${this.alertType}
+          @expand-toggle=${this.onClickGroup}
+        >
+          ${this.hasIcon ? html`<slot name="icon" slot="icon"></slot>` : nothing}
+        </obc-tree-navigation-item>
+        <div part="children" role="group" ?hidden=${!this.openContainer}>
+          <slot></slot>
+        </div>
+      `;
+    }
     return html`
       <obc-navigation-item
         @click=${this.onClickGroup}
@@ -105,11 +146,32 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], ObcNavigationItemGroup.prototype, "hasIcon", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcNavigationItemGroup.prototype, "treeMode", 2);
+__decorateClass([
+  property({ type: Array })
+], ObcNavigationItemGroup.prototype, "treeBranches", 2);
+__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);
+__decorateClass([
+  property({ type: Boolean })
+], ObcNavigationItemGroup.prototype, "defaultOpen", 2);
 __decorateClass([
   state()
 ], ObcNavigationItemGroup.prototype, "openContainer", 2);
 __decorateClass([
-  query("obc-navigation-item")
+  query("obc-navigation-item, obc-tree-navigation-item")
 ], ObcNavigationItemGroup.prototype, "groupItem", 2);
 ObcNavigationItemGroup = __decorateClass([
   customElement("obc-navigation-item-group")

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

	@@ -1 +1 @@
1	- {"version":3,"file":"navigation-item-group.js","sources":["../../../src/components/navigation-item-group/navigation-item-group.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport compentStyle from './navigation-item-group.css?inline';\nimport {ObcNavigationMenuVariant} from '../navigation-menu/navigation-menu.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../../decorator.js';\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 @state() private openContainer = false;\n\n @query('obc-navigation-item') private groupItem?: HTMLElement;\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 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":";;;;;;;;;;;;;;;;AA2DO,IAAM,yBAAN,cAAqC,WAAW;AAAA,EAAhD,cAAA;AAAA,UAAA,GAAA,SAAA;AAIqB,SAAA,QAAQ;AAYP,SAAA,UAAU;AAOX,SAAA,UACxB,yBAAyB;AAKA,SAAA,MAAM;AAEN,SAAA,UAAU;AAE5B,SAAQ,gBAAgB;AAAA,EAAA;AAAA,EAIzB,eAAe;AACrB,QAAI,KAAK,eAAe;AACtB,WAAK,MAAA;AAAA,IACP,OAAO;AACL,WAAK,KAAA;AAAA,IACP;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACL,SAAK,gBAAgB;AACrB,SAAK,cAAc,IAAI,YAAY,MAAM,CAAC;AAAA,EAC5C;AAAA,EAEA,QAAQ;AACN,SAAK,gBAAgB;AACrB,SAAK,iBAAiB,2BAA2B,EAAE,QAAQ,CAAC,SAAS;AACnE,WAAK,MAAA;AAAA,IACP,CAAC;AAAA,EACH;AAAA,EAEgB,MAAM,SAA8B;AAClD,SAAK,WAAW,MAAM,OAAO;AAAA,EAC/B;AAAA,EAES,SAAS;AAChB,WAAO;AAAA;AAAA,iBAEM,KAAK,YAAY;AAAA,mBACf,KAAK,OAAO;AAAA,yBACN,KAAK,aAAa;AAAA,gBAC3B,KAAK,IAAI;AAAA,iBACR,KAAK,KAAK;AAAA,mBACR,KAAK,OAAO;AAAA;AAAA;AAAA,mBAGZ,KAAK,OAAO;AAAA;AAAA,UAErB,KAAK,UAAU,8CAA8C,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,gBAK9D,SAAS;AAAA,MACf,KAAK,KAAK;AAAA,MACV,CAAC,KAAK,OAAO,GAAG;AAAA,MAChB,MAAM,KAAK;AAAA,IAAA,CACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAOM,SAAS;AAAA,MACf,QAAQ;AAAA,MACR,MAAM,KAAK;AAAA,MACX,KAAK,KAAK;AAAA,IAAA,CACX,CAAC;AAAA;AAAA;AAAA,EAGR;AAGF;AAxGa,uBAuGK,SAAS,UAAU,YAAY;AAnGrB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAJb,uBAIe,WAAA,SAAA,CAAA;AAMA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAVb,uBAUe,WAAA,QAAA,CAAA;AAMC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAhBd,uBAgBgB,WAAA,WAAA,CAAA;AAOD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAvBb,uBAuBe,WAAA,WAAA,CAAA;AAMC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GA7Bd,uBA6BgB,WAAA,OAAA,CAAA;AAEA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GA/Bd,uBA+BgB,WAAA,WAAA,CAAA;AAEV,gBAAA;AAAA,EAAhB,MAAA;AAAM,GAjCI,uBAiCM,WAAA,iBAAA,CAAA;AAEqB,gBAAA;AAAA,EAArC,MAAM,qBAAqB;AAAA,GAnCjB,uBAmC2B,WAAA,aAAA,CAAA;AAnC3B,yBAAN,gBAAA;AAAA,EADN,cAAc,2BAA2B;AAAA,GAC7B,sBAAA;"}
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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"}

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

@@ -8,6 +8,7 @@ import { ObcNavigationItem } from '../navigation-item/navigation-item.js';
  * - `IconOnly`: Compact menu showing only icons (should only be used when no flyouts/submenus are present).
  * - `IconOnlyLarge`: Icon-only menu variant designed for use when flyouts/submenus are present.
  * - `Compact`: Space-saving menu with reduced padding and layout.
+ * - `Tree`: Hierarchical tree — groups expand inline and rows are indented by depth.
  *
  * Use these variants to adapt the navigation menu to different layouts or device sizes.
  */
@@ -15,7 +16,8 @@ export declare enum ObcNavigationMenuVariant {
     Full = "full",
     IconOnly = "icon-only",// Should only be used when no flyouts are present in the navigation menu
     IconOnlyLarge = "icon-only-large",// Should be used when flyouts are present in the navigation menu
-    Compact = "compact"
+    Compact = "compact",
+    Tree = "tree"
 }
 /**
  * `ObcNavigationMenuFlyoutVariant` – Enumerates the available visual and behavioral variants for the flyout.
@@ -43,6 +45,11 @@ export declare enum ObcNavigationMenuFlyoutVariant {
  *   - **IconOnly:** Shows only icons for a compact appearance. *Should only be used when no navigation items have sub-items or flyouts.*
  *   - **IconOnlyLarge:** Icon-only mode that supports flyouts/submenus. Use when navigation contains groups or nested items.
  *   - **Compact:** Reduces padding and overall width for a space-saving layout.
+ *   - **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.
  * - **Responsive Layout:**
  *   - `smallScreen` property adapts the footer and logo layout for smaller viewports.
  * - **Slot-based Content:**
@@ -65,6 +72,10 @@ export declare enum ObcNavigationMenuFlyoutVariant {
  * - Use the `Full` variant for standard navigation with both icons and labels.
  * - Use `IconOnly` only when there are no nested groups or flyouts; otherwise, use `IconOnlyLarge` for icon-only navigation with flyout support.
  * - The `Compact` variant is suitable for layouts with limited space or when a minimal navigation appearance is desired.
+ * - Use the `Tree` variant for hierarchical navigation (file trees, nested
+ *   sections). The existing item/group markup is reused unchanged — only the
+ *   `variant` changes. Footer and logo slots remain flat. Mark a group with
+ *   `defaultOpen` to have it start expanded.
  * - Set `smallScreen` to `true` to optimize the layout for smaller devices or responsive breakpoints.
  *
  * **TODO(designer):** Provide additional guidance on when to use each variant and recommended slot content for best usability.
@@ -122,6 +133,7 @@ export declare class ObcNavigationMenu extends LitElement {
      * - `icon-only`: Compact, icon-only menu (use only when no flyouts/groups are present).
      * - `icon-only-large`: Icon-only menu supporting flyouts/groups.
      * - `compact`: Minimal, space-saving menu.
+     * - `tree`: Hierarchical tree — groups expand inline and rows are indented by depth.
      */
     variant: ObcNavigationMenuVariant;
     /**
@@ -135,6 +147,20 @@ export declare class ObcNavigationMenu extends LitElement {
     smallScreen: boolean;
     private slotObservers;
     private hasFooter;
+    /**
+     * Roving-tabindex + arrow-key navigation for the Tree variant, sharing the
+     * navigator that drives `obc-tree-navigation`. Engaged only while
+     * `variant === Tree` (see `onTreeKeydown`).
+     */
+    private readonly treeNavigator;
+    /** Top-level tree rows of the main slot (mirrors `assignTreeBranches`'s filter). */
+    private treeRootRows;
+    /** Direct tree-row children of a row, in document order. */
+    private treeChildRows;
+    /** The inline `obc-tree-navigation-item` a tree-mode row renders in its shadow root. */
+    private treeInnerItem;
+    private onTreeKeydown;
+    connectedCallback(): void;
     findAllElements<T extends Element>(el: Element, tag: string, { slot, stopTag, }?: {
         slot?: 'main' | 'footer' | 'logo';
         stopTag?: string;
@@ -151,6 +177,8 @@ export declare class ObcNavigationMenu extends LitElement {
     private setVariantToFlyoutItems;
     disconnectedCallback(): void;
     private handleSlotChange;
+    private assignTreeBranches;
+    private clearTreeMode;
     private setupItems;
     private setHugToGroups;
     render(): import('lit-html').TemplateResult<1>;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"navigation-menu.d.ts","sourceRoot":"","sources":["../../../src/components/navigation-menu/navigation-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,cAAc,EAA2B,MAAM,KAAK,CAAC;AAGzE,OAAO,EAAC,sBAAsB,EAAC,MAAM,mDAAmD,CAAC;AACzF,OAAO,EAAC,iBAAiB,EAAC,MAAM,uCAAuC,CAAC;~~AAGxE;;;;;;;;;GASG~~;AACH,oBAAY,wBAAwB;IAClC,IAAI,SAAS;IACb,QAAQ,cAAc,CAAE,yEAAyE;IACjG,aAAa,oBAAoB,CAAE,iEAAiE;IACpG,OAAO,YAAY;~~CACpB~~;AAED;;;;;;;GAOG;AACH,oBAAY,8BAA8B;IACxC,IAAI,SAAS;IACb,OAAO,YAAY;CACpB;AAED~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoFG~~;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C~~;;;;;;;OAOG~~;IACuB,OAAO,EAAE,wBAAwB,CAC3B;IAEhC;;;OAGG;IACuB,aAAa,EAAE,8BAA8B,CACjC;IAEtC;;OAEG;IACwB,WAAW,UAAS;IAE/C,OAAO,CAAC,aAAa,CAA0B;IACtC,OAAO,CAAC,SAAS,CAAS;IAEnC,eAAe,CAAC,CAAC,SAAS,OAAO,EAC/B,EAAE,EAAE,OAAO,EACX,GAAG,EAAE,MAAM,EACX,EACE,IAAI,EACJ,OAAO,GACR,GAAE;QACD,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;QAClC,OAAO,CAAC,EAAE,MAAM,CAAC;KACb,GACL,CAAC,EAAE;IAoBN,aAAa,CAAC,EAAE,EAAE,OAAO,GAAG,sBAAsB,EAAE;IAQpD,aAAa,CAAC,EAAE,EAAE,OAAO,GAAG,iBAAiB,EAAE;IAO/C,YAAY,CACV,EAAE,EAAE,OAAO,EACX,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAChC,iBAAiB,EAAE;IAMtB,cAAc;IAOd,aAAa,CAAC,MAAM,EAAE,sBAAsB,EAAE;~~IAc9C~~,OAAO,CAAC,oBAAoB;IAK5B,OAAO,CAAC,kBAAkB;cA+BP,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;cAMtD,OAAO,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAWpE,OAAO,CAAC,uBAAuB;IAiBtB,oBAAoB,IAAI,IAAI;~~IAKrC~~,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,UAAU;~~IAuClB~~,OAAO,CAAC,cAAc;IAQb,MAAM;IA+Bf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}
1	+ {"version":3,"file":"navigation-menu.d.ts","sourceRoot":"","sources":["../../../src/components/navigation-menu/navigation-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,cAAc,EAA2B,MAAM,KAAK,CAAC;AAGzE,OAAO,EAAC,sBAAsB,EAAC,MAAM,mDAAmD,CAAC;AACzF,OAAO,EAAC,iBAAiB,EAAC,MAAM,uCAAuC,CAAC;AA0BxE;;;;;;;;;;GAUG;AACH,oBAAY,wBAAwB;IAClC,IAAI,SAAS;IACb,QAAQ,cAAc,CAAE,yEAAyE;IACjG,aAAa,oBAAoB,CAAE,iEAAiE;IACpG,OAAO,YAAY;IACnB,IAAI,SAAS;CACd;AAED;;;;;;;GAOG;AACH,oBAAY,8BAA8B;IACxC,IAAI,SAAS;IACb,OAAO,YAAY;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6FG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C;;;;;;;;OAQG;IACuB,OAAO,EAAE,wBAAwB,CAC3B;IAEhC;;;OAGG;IACuB,aAAa,EAAE,8BAA8B,CACjC;IAEtC;;OAEG;IACwB,WAAW,UAAS;IAE/C,OAAO,CAAC,aAAa,CAA0B;IACtC,OAAO,CAAC,SAAS,CAAS;IAEnC;;;;OAIG;IACH,OAAO,CAAC,QAAQ,CAAC,aAAa,CAaa;IAE3C,oFAAoF;IACpF,OAAO,CAAC,YAAY;IAQpB,4DAA4D;IAC5D,OAAO,CAAC,aAAa;IAIrB,wFAAwF;IACxF,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,aAAa,CAGnB;IAEO,iBAAiB,IAAI,IAAI;IAKlC,eAAe,CAAC,CAAC,SAAS,OAAO,EAC/B,EAAE,EAAE,OAAO,EACX,GAAG,EAAE,MAAM,EACX,EACE,IAAI,EACJ,OAAO,GACR,GAAE;QACD,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;QAClC,OAAO,CAAC,EAAE,MAAM,CAAC;KACb,GACL,CAAC,EAAE;IAoBN,aAAa,CAAC,EAAE,EAAE,OAAO,GAAG,sBAAsB,EAAE;IAQpD,aAAa,CAAC,EAAE,EAAE,OAAO,GAAG,iBAAiB,EAAE;IAO/C,YAAY,CACV,EAAE,EAAE,OAAO,EACX,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAChC,iBAAiB,EAAE;IAMtB,cAAc;IAOd,aAAa,CAAC,MAAM,EAAE,sBAAsB,EAAE;IAe9C,OAAO,CAAC,oBAAoB;IAK5B,OAAO,CAAC,kBAAkB;cA+BP,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;cAMtD,OAAO,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAWpE,OAAO,CAAC,uBAAuB;IAiBtB,oBAAoB,IAAI,IAAI;IAMrC,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,kBAAkB;IA2B1B,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,UAAU;IA0DlB,OAAO,CAAC,cAAc;IAQb,MAAM;IA+Bf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}