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

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

@@ -2,6 +2,8 @@ import { unsafeCSS, LitElement, nothing, html } from "lit";
 import { property, state } from "lit/decorators.js";
 import compentStyle from "./navigation-menu.css.js";
 import { customElement } from "../../decorator.js";
+import { TreeBranchType } from "../tree-navigation-item/tree-navigation-item.js";
+import { TreeRovingNavigator } from "../../internal/tree-roving-navigator.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -12,11 +14,21 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
+const NAV_ITEM_TAG = "obc-navigation-item";
+const NAV_GROUP_TAG = "obc-navigation-item-group";
+function isNavGroup(el) {
+  return el.tagName.toLowerCase() === NAV_GROUP_TAG;
+}
+function isNavRow(el) {
+  const tag = el.tagName.toLowerCase();
+  return tag === NAV_ITEM_TAG || tag === NAV_GROUP_TAG;
+}
 var ObcNavigationMenuVariant = /* @__PURE__ */ ((ObcNavigationMenuVariant2) => {
   ObcNavigationMenuVariant2["Full"] = "full";
   ObcNavigationMenuVariant2["IconOnly"] = "icon-only";
   ObcNavigationMenuVariant2["IconOnlyLarge"] = "icon-only-large";
   ObcNavigationMenuVariant2["Compact"] = "compact";
+  ObcNavigationMenuVariant2["Tree"] = "tree";
   return ObcNavigationMenuVariant2;
 })(ObcNavigationMenuVariant || {});
 var ObcNavigationMenuFlyoutVariant = /* @__PURE__ */ ((ObcNavigationMenuFlyoutVariant2) => {
@@ -32,6 +44,46 @@ let ObcNavigationMenu = class extends LitElement {
     this.smallScreen = false;
     this.slotObservers = [];
     this.hasFooter = false;
+    this.treeNavigator = new TreeRovingNavigator(this, {
+      getRows: () => this.treeRootRows(),
+      childRows: (row) => this.treeChildRows(row),
+      isGroup: (row) => isNavGroup(row),
+      // Read the group's own synchronous open state, not the shadow header's
+      // attribute (which lags a render tick behind a keyboard expand/collapse).
+      isExpanded: (row) => isNavGroup(row) && row.expanded,
+      setExpanded: (row, expanded) => {
+        if (!isNavGroup(row)) return;
+        if (expanded) row.open();
+        else row.close();
+      },
+      innerItem: (row) => this.treeInnerItem(row)
+    });
+    this.onTreeKeydown = (event) => {
+      if (this.variant !== "tree") return;
+      if (this.treeNavigator.handleKeydown(event)) event.preventDefault();
+    };
+  }
+  /** Top-level tree rows of the main slot (mirrors `assignTreeBranches`'s filter). */
+  treeRootRows() {
+    return Array.from(this.children).filter((child) => {
+      if (!isNavRow(child)) return false;
+      const slot = child.getAttribute("slot");
+      return slot === null || slot === "main";
+    });
+  }
+  /** Direct tree-row children of a row, in document order. */
+  treeChildRows(row) {
+    return Array.from(row.children).filter(isNavRow);
+  }
+  /** The inline `obc-tree-navigation-item` a tree-mode row renders in its shadow root. */
+  treeInnerItem(row) {
+    return row.shadowRoot?.querySelector(
+      "obc-tree-navigation-item"
+    ) ?? null;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("keydown", this.onTreeKeydown);
   }
   findAllElements(el, tag, {
     slot,
@@ -80,6 +132,7 @@ let ObcNavigationMenu = class extends LitElement {
   registerGroup(groups) {
     groups.forEach((group) => {
       group.addEventListener("open", () => {
+        if (this.variant === "tree") return;
         groups.forEach((g) => {
           if (g !== group) {
             g.close();
@@ -148,12 +201,64 @@ let ObcNavigationMenu = class extends LitElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.cleanupSlotObservers();
+    this.removeEventListener("keydown", this.onTreeKeydown);
   }
   handleSlotChange() {
     this.setupItems();
     this.setupSlotObservers();
   }
+  assignTreeBranches(el, depth) {
+    for (const child of el.children) {
+      const tag = child.tagName.toLowerCase();
+      const isItem = tag === "obc-navigation-item";
+      const isGroup = tag === "obc-navigation-item-group";
+      if (!isItem && !isGroup) continue;
+      if (depth === 0) {
+        const slot = child.getAttribute("slot");
+        if (slot !== null && slot !== "main") continue;
+      }
+      const branches = Array.from(
+        { length: depth },
+        () => TreeBranchType.blank
+      );
+      const row = child;
+      row.treeMode = true;
+      row.treeBranches = branches;
+      if (isGroup) {
+        this.assignTreeBranches(child, depth + 1);
+      }
+    }
+  }
+  // Reset tree mode on every descendant item/group so switching away from the
+  // Tree variant restores the flat rendering.
+  clearTreeMode(el) {
+    for (const child of el.children) {
+      const tag = child.tagName.toLowerCase();
+      const isItem = tag === "obc-navigation-item";
+      const isGroup = tag === "obc-navigation-item-group";
+      if (!isItem && !isGroup) continue;
+      const row = child;
+      row.treeMode = false;
+      row.treeBranches = [];
+      if (isGroup) {
+        this.clearTreeMode(child);
+      }
+    }
+  }
   setupItems() {
+    if (this.variant === "tree") {
+      this.assignTreeBranches(this, 0);
+      ["footer", "logo"].forEach((slot) => {
+        this.findAllItems(this, slot).forEach((item) => {
+          item.treeMode = false;
+          item.treeBranches = [];
+          item.variant = "full";
+        });
+      });
+      queueMicrotask(() => this.treeNavigator.refresh());
+      return;
+    }
+    this.clearTreeMode(this);
     const hug = this.variant !== "full" || this.flyoutVariant === "compact";
     this.setHugToGroups(this, hug);
     const groups = this.findAllGroups(this);

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';\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 *\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}\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 * - **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 * - 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   */\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  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        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  }\n\n  private handleSlotChange() {\n    this.setupItems();\n    this.setupSlotObservers();\n  }\n\n  private setupItems() {\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 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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"}

package/dist/components/tree-navigation/tree-navigation.css.js

@@ -0,0 +1,18 @@
+import { css } from "lit";
+const componentStyle = css`
+          * {
+            -webkit-tap-highlight-color: transparent;
+          }
+
+:host {
+  display: block;
+}
+
+[role="tree"] {
+  display: block;
+}
+`;
+export {
+  componentStyle as default
+};
+//# sourceMappingURL=tree-navigation.css.js.map

package/dist/components/tree-navigation/tree-navigation.css.js.map

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

package/dist/components/tree-navigation/tree-navigation.d.ts

@@ -0,0 +1,74 @@
+import { LitElement } from 'lit';
+import '../tree-navigation-group/tree-navigation-group.js';
+/**
+ * `<obc-tree-navigation>` – The container for a tree- or file-explorer-style
+ * navigation list. Holds nested `<obc-tree-navigation-group>` and
+ * `<obc-tree-navigation-item>` rows and computes each row's indentation guide
+ * lines automatically from its position in the hierarchy.
+ *
+ * Consumers write the tree as plain nested markup; the container assigns every
+ * row's `branches` array so the guide lines (pass-through verticals, elbows, and
+ * the last-child corner) connect correctly — there is no need to compute depth or
+ * branch types by hand. It re-derives the guides whenever rows are added, removed,
+ * or groups expand and collapse.
+ *
+ * ## Features
+ * - **Automatic guide lines:** Each row receives a `branches` array derived from
+ *   its depth and whether each ancestor still has siblings below it. Last children
+ *   get a corner (`└`); rows with siblings below get an intersection (`├`); and
+ *   ancestor columns become a pass-through (`│`) or blank as appropriate.
+ * - **Live updates:** Reacts to slotted content changes and to group expand state,
+ *   recomputing the guides so they always match the visible structure.
+ * - **Composable:** Works with any nesting depth of groups and items.
+ *
+ * ## Usage Guidelines
+ * - Use as the root of a hierarchical navigation list. For flat navigation, use
+ *   `obc-navigation-menu` instead.
+ * - Place `<obc-tree-navigation-group>` for expandable parents and
+ *   `<obc-tree-navigation-item>` for leaves; nest groups to any depth.
+ * - Do not set each row's `branches` manually — the container manages them.
+ *
+ * ## Slots
+ *
+ * | Slot Name | Renders When... | Purpose                                            |
+ * |-----------|-----------------|----------------------------------------------------|
+ * | (default) | Always          | Top-level rows (`obc-tree-navigation-group`/`-item`). |
+ *
+ * @slot - Top-level tree rows (groups and items).
+ */
+export declare class ObcTreeNavigation extends LitElement {
+    private mutationObserver?;
+    /** The focusable header item for a row: a leaf is itself; a group's is its shadow header. */
+    private innerItem;
+    private readonly navigator;
+    connectedCallback(): void;
+    private onKeydown;
+    disconnectedCallback(): void;
+    private onExpandToggle;
+    firstUpdated(): void;
+    /** Direct tree-row children of an element, in document order. */
+    private childRows;
+    /**
+     * Walk the row tree and assign each row's `branches`. Mirrors the guide-line
+     * model: a row gets one column per ancestor (pass-through `straight` if that
+     * ancestor still has siblings below, else `blank`) followed by its own elbow
+     * (`corner` if it is the last child, else `intersection`). Top-level rows draw
+     * no columns at all.
+     *
+     * @param rows - sibling rows at this level, in order
+     * @param ancestorHasNextSibling - one flag per ancestor *below the root*: true
+     *   if that ancestor has a sibling still below it (so its column is a
+     *   pass-through), false if its subtree has ended (a blank column)
+     * @param depth - nesting depth; 0 for top-level rows (which draw no columns)
+     */
+    private assignBranches;
+    private updateBranches;
+    render(): import('lit-html').TemplateResult<1>;
+    static styles: import('lit').CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'obc-tree-navigation': ObcTreeNavigation;
+    }
+}
+//# sourceMappingURL=tree-navigation.d.ts.map

package/dist/components/tree-navigation/tree-navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/tree-navigation/tree-navigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAQhD,OAAO,mDAAmD,CAAC;AAqB3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAO,CAAC,gBAAgB,CAAC,CAAmB;IAE5C,6FAA6F;IAC7F,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,QAAQ,CAAC,SAAS,CAUc;IAE/B,iBAAiB,IAAI,IAAI;IAelC,OAAO,CAAC,SAAS,CAEf;IAEO,oBAAoB,IAAI,IAAI;IAQrC,OAAO,CAAC,cAAc,CAIpB;IAEO,YAAY,IAAI,IAAI;IAI7B,iEAAiE;IACjE,OAAO,CAAC,SAAS;IAIjB;;;;;;;;;;;;OAYG;IACH,OAAO,CAAC,cAAc;IAyBtB,OAAO,CAAC,cAAc;IAMb,MAAM;IAMf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}

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

@@ -0,0 +1,120 @@
+import { unsafeCSS, LitElement, html } from "lit";
+import componentStyle from "./tree-navigation.css.js";
+import { customElement } from "../../decorator.js";
+import { TreeBranchType } from "../tree-navigation-item/tree-navigation-item.js";
+import "../tree-navigation-group/tree-navigation-group.js";
+import { TreeRovingNavigator } from "../../internal/tree-roving-navigator.js";
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(result) || result;
+  return result;
+};
+const ITEM_TAG = "obc-tree-navigation-item";
+const GROUP_TAG = "obc-tree-navigation-group";
+function isGroup(el) {
+  return el.tagName.toLowerCase() === GROUP_TAG;
+}
+function isRow(el) {
+  const tag = el.tagName.toLowerCase();
+  return tag === ITEM_TAG || tag === GROUP_TAG;
+}
+let ObcTreeNavigation = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.navigator = new TreeRovingNavigator(this, {
+      getRows: () => this.childRows(this),
+      childRows: (row) => this.childRows(row),
+      isGroup: (row) => isGroup(row),
+      isExpanded: (row) => isGroup(row) && row.hasAttribute("expanded"),
+      setExpanded: (row, expanded) => {
+        if (isGroup(row)) row.expanded = expanded;
+      },
+      innerItem: (row) => this.innerItem(row),
+      isDisabled: (row) => this.innerItem(row)?.hasAttribute("disabled") ?? false
+    });
+    this.onKeydown = (event) => {
+      if (this.navigator.handleKeydown(event)) event.preventDefault();
+    };
+    this.onExpandToggle = () => {
+      queueMicrotask(() => this.updateBranches());
+    };
+  }
+  /** The focusable header item for a row: a leaf is itself; a group's is its shadow header. */
+  innerItem(row) {
+    return isGroup(row) ? row.shadowRoot?.querySelector(ITEM_TAG) ?? null : row;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.mutationObserver = new MutationObserver(() => this.updateBranches());
+    this.mutationObserver.observe(this, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["expanded"]
+    });
+    this.addEventListener("expand-toggle", this.onExpandToggle);
+    this.addEventListener("keydown", this.onKeydown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.mutationObserver?.disconnect();
+    this.mutationObserver = void 0;
+    this.removeEventListener("expand-toggle", this.onExpandToggle);
+    this.removeEventListener("keydown", this.onKeydown);
+  }
+  firstUpdated() {
+    this.updateBranches();
+  }
+  /** Direct tree-row children of an element, in document order. */
+  childRows(el) {
+    return Array.from(el.children).filter(isRow);
+  }
+  /**
+   * Walk the row tree and assign each row's `branches`. Mirrors the guide-line
+   * model: a row gets one column per ancestor (pass-through `straight` if that
+   * ancestor still has siblings below, else `blank`) followed by its own elbow
+   * (`corner` if it is the last child, else `intersection`). Top-level rows draw
+   * no columns at all.
+   *
+   * @param rows - sibling rows at this level, in order
+   * @param ancestorHasNextSibling - one flag per ancestor *below the root*: true
+   *   if that ancestor has a sibling still below it (so its column is a
+   *   pass-through), false if its subtree has ended (a blank column)
+   * @param depth - nesting depth; 0 for top-level rows (which draw no columns)
+   */
+  assignBranches(rows, ancestorHasNextSibling, depth) {
+    rows.forEach((row, index) => {
+      const isLast = index === rows.length - 1;
+      row.branches = depth === 0 ? [] : [
+        ...ancestorHasNextSibling.map(
+          (hasNext) => hasNext ? TreeBranchType.straight : TreeBranchType.blank
+        ),
+        isLast ? TreeBranchType.corner : TreeBranchType.intersection
+      ];
+      if (isGroup(row)) {
+        const childAncestry = depth === 0 ? [] : [...ancestorHasNextSibling, !isLast];
+        this.assignBranches(this.childRows(row), childAncestry, depth + 1);
+      }
+    });
+  }
+  updateBranches() {
+    this.assignBranches(this.childRows(this), [], 0);
+    this.navigator.refresh();
+  }
+  render() {
+    return html`<div role="tree">
+      <slot @slotchange=${() => this.updateBranches()}></slot>
+    </div>`;
+  }
+};
+ObcTreeNavigation.styles = unsafeCSS(componentStyle);
+ObcTreeNavigation = __decorateClass([
+  customElement("obc-tree-navigation")
+], ObcTreeNavigation);
+export {
+  ObcTreeNavigation
+};
+//# sourceMappingURL=tree-navigation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree-navigation.js","sources":["../../../src/components/tree-navigation/tree-navigation.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport componentStyle from './tree-navigation.css?inline';\nimport {customElement} from '../../decorator.js';\nimport {\n  ObcTreeNavigationItem,\n  TreeBranchType,\n} from '../tree-navigation-item/tree-navigation-item.js';\nimport {ObcTreeNavigationGroup} from '../tree-navigation-group/tree-navigation-group.js';\nimport '../tree-navigation-group/tree-navigation-group.js';\nimport {\n  TreeRovingNavigator,\n  TreeRovingAdapter,\n} from '../../internal/tree-roving-navigator.js';\n\n/** A tree row is either a leaf item or an expandable group. */\ntype TreeRow = ObcTreeNavigationItem | ObcTreeNavigationGroup;\n\nconst ITEM_TAG = 'obc-tree-navigation-item';\nconst GROUP_TAG = 'obc-tree-navigation-group';\n\nfunction isGroup(el: Element): el is ObcTreeNavigationGroup {\n  return el.tagName.toLowerCase() === GROUP_TAG;\n}\n\nfunction isRow(el: Element): el is TreeRow {\n  const tag = el.tagName.toLowerCase();\n  return tag === ITEM_TAG || tag === GROUP_TAG;\n}\n\n/**\n * `<obc-tree-navigation>` – The container for a tree- or file-explorer-style\n * navigation list. Holds nested `<obc-tree-navigation-group>` and\n * `<obc-tree-navigation-item>` rows and computes each row's indentation guide\n * lines automatically from its position in the hierarchy.\n *\n * Consumers write the tree as plain nested markup; the container assigns every\n * row's `branches` array so the guide lines (pass-through verticals, elbows, and\n * the last-child corner) connect correctly — there is no need to compute depth or\n * branch types by hand. It re-derives the guides whenever rows are added, removed,\n * or groups expand and collapse.\n *\n * ## Features\n * - **Automatic guide lines:** Each row receives a `branches` array derived from\n *   its depth and whether each ancestor still has siblings below it. Last children\n *   get a corner (`└`); rows with siblings below get an intersection (`├`); and\n *   ancestor columns become a pass-through (`│`) or blank as appropriate.\n * - **Live updates:** Reacts to slotted content changes and to group expand state,\n *   recomputing the guides so they always match the visible structure.\n * - **Composable:** Works with any nesting depth of groups and items.\n *\n * ## Usage Guidelines\n * - Use as the root of a hierarchical navigation list. For flat navigation, use\n *   `obc-navigation-menu` instead.\n * - Place `<obc-tree-navigation-group>` for expandable parents and\n *   `<obc-tree-navigation-item>` for leaves; nest groups to any depth.\n * - Do not set each row's `branches` manually — the container manages them.\n *\n * ## Slots\n *\n * | Slot Name | Renders When... | Purpose                                            |\n * |-----------|-----------------|----------------------------------------------------|\n * | (default) | Always          | Top-level rows (`obc-tree-navigation-group`/`-item`). |\n *\n * @slot - Top-level tree rows (groups and items).\n */\n@customElement('obc-tree-navigation')\nexport class ObcTreeNavigation extends LitElement {\n  private mutationObserver?: MutationObserver;\n\n  /** The focusable header item for a row: a leaf is itself; a group's is its shadow header. */\n  private innerItem(row: TreeRow): ObcTreeNavigationItem | null {\n    return isGroup(row)\n      ? (row.shadowRoot?.querySelector<ObcTreeNavigationItem>(ITEM_TAG) ?? null)\n      : row;\n  }\n\n  private readonly navigator = new TreeRovingNavigator<TreeRow>(this, {\n    getRows: () => this.childRows(this),\n    childRows: (row) => this.childRows(row),\n    isGroup: (row) => isGroup(row),\n    isExpanded: (row) => isGroup(row) && row.hasAttribute('expanded'),\n    setExpanded: (row, expanded) => {\n      if (isGroup(row)) row.expanded = expanded;\n    },\n    innerItem: (row) => this.innerItem(row),\n    isDisabled: (row) => this.innerItem(row)?.hasAttribute('disabled') ?? false,\n  } satisfies TreeRovingAdapter<TreeRow>);\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Recompute guides on any structural change: rows added/removed, or a group's\n    // `expanded` attribute toggled anywhere in the subtree.\n    this.mutationObserver = new MutationObserver(() => this.updateBranches());\n    this.mutationObserver.observe(this, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: ['expanded'],\n    });\n    this.addEventListener('expand-toggle', this.onExpandToggle);\n    this.addEventListener('keydown', this.onKeydown);\n  }\n\n  private onKeydown = (event: KeyboardEvent): void => {\n    if (this.navigator.handleKeydown(event)) event.preventDefault();\n  };\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.mutationObserver?.disconnect();\n    this.mutationObserver = undefined;\n    this.removeEventListener('expand-toggle', this.onExpandToggle);\n    this.removeEventListener('keydown', this.onKeydown);\n  }\n\n  private onExpandToggle = () => {\n    // Defer so the group's `expanded` attribute and slotted children reflect the\n    // new state before guides are recomputed.\n    queueMicrotask(() => this.updateBranches());\n  };\n\n  override firstUpdated(): void {\n    this.updateBranches();\n  }\n\n  /** Direct tree-row children of an element, in document order. */\n  private childRows(el: Element): TreeRow[] {\n    return Array.from(el.children).filter(isRow);\n  }\n\n  /**\n   * Walk the row tree and assign each row's `branches`. Mirrors the guide-line\n   * model: a row gets one column per ancestor (pass-through `straight` if that\n   * ancestor still has siblings below, else `blank`) followed by its own elbow\n   * (`corner` if it is the last child, else `intersection`). Top-level rows draw\n   * no columns at all.\n   *\n   * @param rows - sibling rows at this level, in order\n   * @param ancestorHasNextSibling - one flag per ancestor *below the root*: true\n   *   if that ancestor has a sibling still below it (so its column is a\n   *   pass-through), false if its subtree has ended (a blank column)\n   * @param depth - nesting depth; 0 for top-level rows (which draw no columns)\n   */\n  private assignBranches(\n    rows: TreeRow[],\n    ancestorHasNextSibling: boolean[],\n    depth: number\n  ): void {\n    rows.forEach((row, index) => {\n      const isLast = index === rows.length - 1;\n      row.branches =\n        depth === 0\n          ? []\n          : [\n              ...ancestorHasNextSibling.map((hasNext) =>\n                hasNext ? TreeBranchType.straight : TreeBranchType.blank\n              ),\n              isLast ? TreeBranchType.corner : TreeBranchType.intersection,\n            ];\n\n      if (isGroup(row)) {\n        const childAncestry =\n          depth === 0 ? [] : [...ancestorHasNextSibling, !isLast];\n        this.assignBranches(this.childRows(row), childAncestry, depth + 1);\n      }\n    });\n  }\n\n  private updateBranches(): void {\n    this.assignBranches(this.childRows(this), [], 0);\n    // Keep the roving tabindex in lockstep with the visible structure.\n    this.navigator.refresh();\n  }\n\n  override render() {\n    return html`<div role=\"tree\">\n      <slot @slotchange=${() => this.updateBranches()}></slot>\n    </div>`;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-tree-navigation': ObcTreeNavigation;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/components/tree-navigation-group/tree-navigation-group.css.js

@@ -0,0 +1,22 @@
+import { css } from "lit";
+const componentStyle = css`
+          * {
+            -webkit-tap-highlight-color: transparent;
+          }
+
+:host {
+  display: block;
+}
+
+[part="children"] {
+  display: block;
+}
+
+[part="children"][hidden] {
+  display: none;
+}
+`;
+export {
+  componentStyle as default
+};
+//# sourceMappingURL=tree-navigation-group.css.js.map

package/dist/components/tree-navigation-group/tree-navigation-group.css.js.map

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

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

@@ -0,0 +1,94 @@
+import { LitElement } from 'lit';
+import { TreeBranchType } 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
+ * structure: a header row with an expand/collapse chevron, plus a slot for the
+ * 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
+ * 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.
+ *
+ * The group manages only its own open/closed state and forwards header presentation
+ * to its internal header item. It does not draw guide lines itself; that is the
+ * container's responsibility (see `<obc-tree-navigation>`).
+ *
+ * ## Features
+ * - **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.
+ * - **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.
+ *
+ * ## Usage Guidelines
+ * - Nest `<obc-tree-navigation-item>` (leaves) and further `<obc-tree-navigation-group>`
+ *   elements as children to build the hierarchy.
+ * - Always place groups and items inside an `<obc-tree-navigation>` container so the
+ *   guide lines are computed; using a group standalone draws a header with no guides.
+ * - Provide a header icon via the `icon` slot (forwarded to the header row).
+ *
+ * ## Slots
+ *
+ * | Slot Name | Renders When...          | Purpose                                                      |
+ * |-----------|--------------------------|--------------------------------------------------------------|
+ * | icon      | `hasIcon` is true        | Leading icon for the group header row.                       |
+ * | (default) | Always                   | Child rows (`obc-tree-navigation-item` / `-group`).          |
+ *
+ * @slot icon - Leading icon for the group header (shown when `hasIcon` is true).
+ * @slot - Child rows disclosed when the group is expanded.
+ * @fires expand-toggle {CustomEvent<boolean>} Fired when the header is activated; detail is the next `expanded` value.
+ */
+export declare class ObcTreeNavigationGroup extends LitElement {
+    /** The text label displayed for the group header row. */
+    label: string;
+    /**
+     * Guide line to draw for each ancestor level of the header row. Normally set by
+     * the parent `<obc-tree-navigation>` container from the group's position; only
+     * set it manually when using a group outside the container.
+     */
+    branches: TreeBranchType[];
+    /** Whether the group is expanded, disclosing its children. Rotates the chevron. */
+    expanded: boolean;
+    /** Whether the group header is the current selection. */
+    checked: boolean;
+    /** Disables the group header, removing it from the tab order and dimming it. */
+    disabled: boolean;
+    /** Whether the group header shows a leading icon (provided via the `icon` slot). */
+    hasIcon: boolean;
+    /**
+     * Terminal type for the header row, controlling the alert-header marker shown in
+     * 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;
+    /**
+     * 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.
+     */
+    href: string | undefined;
+    private headerItem?;
+    private onHeaderToggle;
+    /** Closes the group (and, recursively, any nested groups inside it). */
+    close(): void;
+    focus(options?: FocusOptions): void;
+    render(): import('lit-html').TemplateResult<1>;
+    static styles: import('lit').CSSResult;
+}
+export type ObcTreeNavigationGroupExpandToggleEvent = CustomEvent<boolean>;
+declare global {
+    interface HTMLElementTagNameMap {
+        'obc-tree-navigation-group': ObcTreeNavigationGroup;
+    }
+}
+//# sourceMappingURL=tree-navigation-group.d.ts.map

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

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