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

package/dist/internal/tree-roving-navigator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-roving-navigator.js","sources":["../../src/internal/tree-roving-navigator.ts"],"sourcesContent":["import {ObcTreeNavigationItem} from '../components/tree-navigation-item/tree-navigation-item.js';\n\n/**\n * Host-specific row resolution. The two tree hosts differ only in row tags,\n * expand-state storage, and DOM shape, so injecting these hooks lets one\n * navigator drive both.\n */\nexport interface TreeRovingAdapter<Row extends HTMLElement = HTMLElement> {\n  /** Top-level rows, in document order. */\n  getRows(): Row[];\n  /** Direct child rows of a row, in document order. */\n  childRows(row: Row): Row[];\n  isGroup(row: Row): boolean;\n  isExpanded(row: Row): boolean;\n  setExpanded(row: Row, expanded: boolean): void;\n  /** The focusable `obc-tree-navigation-item` for a row (a leaf is itself). */\n  innerItem(row: Row): ObcTreeNavigationItem | null;\n  /** Defaults to false when omitted. */\n  isDisabled?(row: Row): boolean;\n}\n\n/**\n * Implements the [WAI-ARIA Tree View](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/)\n * keyboard pattern for a tree host: a single tab stop (roving tabindex) plus\n * Up/Down, Left/Right (collapse/expand → parent/child), and Home/End. Type-ahead\n * and `*` are intentionally out of scope.\n *\n * The host owns the DOM and the event wiring; this class owns the navigation\n * logic. The host calls {@link handleKeydown} from its `keydown` listener and\n * {@link refresh} whenever the structure changes, and supplies a\n * {@link TreeRovingAdapter} for row resolution. Focus only moves on user keys;\n * `refresh` re-points the roving tabindex without stealing focus.\n */\nexport class TreeRovingNavigator<Row extends HTMLElement = HTMLElement> {\n  private readonly adapter: TreeRovingAdapter<Row>;\n  private readonly host: HTMLElement;\n\n  /** The row that currently holds the single tab stop (roving tabindex). */\n  private activeRow?: Row;\n\n  constructor(host: HTMLElement, adapter: TreeRovingAdapter<Row>) {\n    this.adapter = adapter;\n    this.host = host;\n  }\n\n  private isDisabled(row: Row): boolean {\n    return this.adapter.isDisabled?.(row) ?? false;\n  }\n\n  /**\n   * Depth-first list of every visible row: descend into a group only when it is\n   * expanded. Disabled rows are included so {@link refresh} can re-point to a\n   * visible ancestor; arrow navigation filters them out via {@link navigableRows}.\n   */\n  private visibleRows(): Row[] {\n    const out: Row[] = [];\n    const walk = (rows: Row[]) => {\n      for (const row of rows) {\n        out.push(row);\n        if (this.adapter.isGroup(row) && this.adapter.isExpanded(row)) {\n          walk(this.adapter.childRows(row));\n        }\n      }\n    };\n    walk(this.adapter.getRows());\n    return out;\n  }\n\n  /** Visible rows that arrow navigation can land on (enabled rows). */\n  private navigableRows(): Row[] {\n    return this.visibleRows().filter((row) => !this.isDisabled(row));\n  }\n\n  /** The parent row of a row within this tree, or undefined for a top-level row. */\n  private parentRow(target: Row): Row | undefined {\n    let found: Row | undefined;\n    const walk = (rows: Row[], parent?: Row) => {\n      for (const row of rows) {\n        if (row === target) {\n          found = parent;\n          return;\n        }\n        if (this.adapter.isGroup(row)) {\n          walk(this.adapter.childRows(row), row);\n          if (found !== undefined) return;\n        }\n      }\n    };\n    walk(this.adapter.getRows(), undefined);\n    return found;\n  }\n\n  /**\n   * Rebuild the roving tabindex: exactly one navigable row is `focusable`. Keeps\n   * the active row if still navigable; else falls back to its nearest navigable\n   * ancestor, else the first navigable row. Never moves focus.\n   */\n  refresh(): void {\n    const navigable = this.navigableRows();\n    if (navigable.length === 0) {\n      this.activeRow = undefined;\n      return;\n    }\n\n    let next: Row | undefined;\n    if (this.activeRow && navigable.includes(this.activeRow)) {\n      next = this.activeRow;\n    } else if (this.activeRow) {\n      let ancestor = this.parentRow(this.activeRow);\n      while (ancestor && !navigable.includes(ancestor)) {\n        ancestor = this.parentRow(ancestor);\n      }\n      next = ancestor ?? navigable[0];\n    } else {\n      next = navigable[0];\n    }\n\n    this.setActiveRow(next, false);\n  }\n\n  private setActiveRow(row: Row, moveFocus: boolean): void {\n    this.activeRow = row;\n    for (const candidate of this.visibleRows()) {\n      const item = this.adapter.innerItem(candidate);\n      if (item) item.focusable = candidate === row;\n    }\n    if (!moveFocus) return;\n    // A row's header may render asynchronously (e.g. right after expanding a\n    // group), so fall back to a microtask if it isn't present yet.\n    const item = this.adapter.innerItem(row);\n    if (item) item.focus();\n    else queueMicrotask(() => this.adapter.innerItem(row)?.focus());\n  }\n\n  /**\n   * The originating tree row for a keydown. A group's header lives in the\n   * group's own shadow root, so the host-root check resolves a header to its\n   * group rather than the inner header item.\n   */\n  private rowFromEvent(event: KeyboardEvent): Row | undefined {\n    // Read the root live: the navigator is constructed before the host connects.\n    const root = this.host.getRootNode();\n    for (const target of event.composedPath()) {\n      if (\n        target instanceof HTMLElement &&\n        target.getRootNode() === root &&\n        this.isRow(target)\n      ) {\n        return target as Row;\n      }\n    }\n    return undefined;\n  }\n\n  /** Whether an element is one of this tree's rows (group or leaf). */\n  private isRow(el: HTMLElement): boolean {\n    const tops = this.adapter.getRows();\n    const stack = [...tops];\n    while (stack.length) {\n      const row = stack.pop()!;\n      if (row === el) return true;\n      if (this.adapter.isGroup(row)) stack.push(...this.adapter.childRows(row));\n    }\n    return false;\n  }\n\n  /** Handle a `keydown`; returns true if the key was consumed. */\n  handleKeydown(event: KeyboardEvent): boolean {\n    const row = this.rowFromEvent(event);\n    if (!row) return false;\n\n    switch (event.key) {\n      case 'ArrowDown':\n        this.moveByOffset(row, 1);\n        return true;\n      case 'ArrowUp':\n        this.moveByOffset(row, -1);\n        return true;\n      case 'ArrowRight':\n        this.onArrowRight(row);\n        return true;\n      case 'ArrowLeft':\n        this.onArrowLeft(row);\n        return true;\n      case 'Home':\n        this.moveToEdge(true);\n        return true;\n      case 'End':\n        this.moveToEdge(false);\n        return true;\n      default:\n        return false;\n    }\n  }\n\n  private moveByOffset(row: Row, offset: number): void {\n    const rows = this.navigableRows();\n    const index = rows.indexOf(row);\n    if (index === -1) return;\n    const target = rows[index + offset];\n    if (target) this.setActiveRow(target, true);\n  }\n\n  private moveToEdge(first: boolean): void {\n    const rows = this.navigableRows();\n    if (rows.length === 0) return;\n    this.setActiveRow(first ? rows[0] : rows[rows.length - 1], true);\n  }\n\n  private onArrowRight(row: Row): void {\n    if (!this.adapter.isGroup(row)) return;\n    if (!this.adapter.isExpanded(row)) {\n      this.adapter.setExpanded(row, true);\n      // Re-point the roving set for hosts that don't observe expansion themselves.\n      this.refresh();\n      return;\n    }\n    const child = this.adapter.childRows(row).find((c) => !this.isDisabled(c));\n    if (child) this.setActiveRow(child, true);\n  }\n\n  private onArrowLeft(row: Row): void {\n    if (this.adapter.isGroup(row) && this.adapter.isExpanded(row)) {\n      this.adapter.setExpanded(row, false);\n      this.refresh();\n      return;\n    }\n    const parent = this.parentRow(row);\n    if (parent) this.setActiveRow(parent, true);\n  }\n}\n"],"names":["item"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents-full-bundle",
-  "version": "2.0.0-next.59",
+  "version": "2.0.0-next.60",
   "type": "module",
   "repository": {
     "type": "git",

package/src/components/navigation-item/navigation-item.css

@@ -185,3 +185,8 @@
     min-width: 0;
   }
 }
+
+obc-tree-navigation-item.tree {
+  display: block;
+  width: 100%;
+}

package/src/components/navigation-item/navigation-item.ts

@@ -6,6 +6,12 @@ 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 '../tree-navigation-item/tree-navigation-item.js';
+import {
+  TreeBranchType,
+  TreeTerminalType,
+} from '../tree-navigation-item/tree-navigation-item.js';
+import {BadgeType} from '../badge/badge.js';
 
 enum NavigationItemRole {
   Button = 'button',
@@ -142,8 +148,32 @@ export class ObcNavigationItem extends LitElement {
 
   @property({type: Boolean}) hasTrailingIcon = false;
 
+  /** Set by `obc-navigation-menu` in its Tree variant — renders the row as a tree item. */
+  @property({type: Boolean}) treeMode = false;
+
+  /** Indentation columns for tree mode, assigned by `obc-navigation-menu`. */
+  @property({type: Array}) 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.
+   */
+  @property({type: String}) terminalType: string = TreeTerminalType.regular;
+
+  /** Whether a trailing alert counter badge is shown (Tree variant only). */
+  @property({type: Boolean}) hasAlertBadge = false;
+
+  /** The number shown in the alert badge when `hasAlertBadge` is true (Tree variant only). */
+  @property({type: Number}) alertCount = 0;
+
+  /** The severity/type of the alert badge — one of the `obc-badge` types (Tree variant only). */
+  @property({type: String}) alertType: string = BadgeType.alarm;
+
   @query('a') private anchorElement?: HTMLAnchorElement;
 
+  // In tree mode the row renders an `obc-tree-navigation-item` instead of an `<a>`.
+  @query('obc-tree-navigation-item') private treeItemElement?: HTMLElement;
+
   /**
    * Fired when the navigation item is clicked (either as a link or button).
    * @fires click {CustomEvent<void>}
@@ -165,7 +195,7 @@ export class ObcNavigationItem extends LitElement {
   }
 
   public override focus(options?: FocusOptions): void {
-    this.anchorElement?.focus(options);
+    (this.treeItemElement ?? this.anchorElement)?.focus(options);
   }
 
   private getItemRole(): NavigationItemRole | undefined {
@@ -188,6 +218,31 @@ export class ObcNavigationItem extends LitElement {
   }
 
   override render() {
+    if (this.treeMode) {
+      // Delegate the whole row to the tree item: it owns focus, keyboard
+      // activation, the checked-inert behavior, and href navigation. Forward its
+      // activation as this item's own `click` so selection wiring is unchanged.
+      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;

package/src/components/navigation-item-group/navigation-item-group.css

@@ -100,3 +100,11 @@
   display: flex;
   flex-direction: column;
 }
+
+[part="children"] {
+  display: block;
+}
+
+[part="children"][hidden] {
+  display: none;
+}

package/src/components/navigation-item-group/navigation-item-group.ts

@@ -4,6 +4,12 @@ import compentStyle from './navigation-item-group.css?inline';
 import {ObcNavigationMenuVariant} from '../navigation-menu/navigation-menu.js';
 import {classMap} from 'lit/directives/class-map.js';
 import {customElement} from '../../decorator.js';
+import '../tree-navigation-item/tree-navigation-item.js';
+import {
+  TreeBranchType,
+  TreeTerminalType,
+} from '../tree-navigation-item/tree-navigation-item.js';
+import {BadgeType} from '../badge/badge.js';
 
 /**
  * `<obc-navigation-item-group>` – A collapsible navigation group component for organizing related navigation items under a single expandable label.
@@ -90,9 +96,47 @@ export class ObcNavigationItemGroup extends LitElement {
 
   @property({type: Boolean}) hasIcon = false;
 
+  /** Set by `obc-navigation-menu` in its Tree variant — renders the group as a tree row. */
+  @property({type: Boolean}) treeMode = false;
+
+  /** Indentation columns for tree mode, assigned by `obc-navigation-menu`. */
+  @property({type: Array}) 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.
+   */
+  @property({type: String}) terminalType: string = TreeTerminalType.regular;
+
+  /** Whether a trailing alert counter badge is shown on the header (Tree variant only). */
+  @property({type: Boolean}) hasAlertBadge = false;
+
+  /** The number shown in the header's alert badge when `hasAlertBadge` is true (Tree variant only). */
+  @property({type: Number}) alertCount = 0;
+
+  /** The severity/type of the header's alert badge — one of the `obc-badge` types (Tree variant only). */
+  @property({type: String}) alertType: string = BadgeType.alarm;
+
+  /** Whether the group starts expanded. Useful for trees that open by default. */
+  @property({type: Boolean}) defaultOpen = false;
+
   @state() private openContainer = false;
 
-  @query('obc-navigation-item') private groupItem?: HTMLElement;
+  // Flat mode renders an `obc-navigation-item` header; tree mode renders an
+  // `obc-tree-navigation-item`. Match whichever is present so `focus()` works in both.
+  @query('obc-navigation-item, obc-tree-navigation-item')
+  private groupItem?: HTMLElement;
+
+  override firstUpdated() {
+    if (this.defaultOpen) {
+      this.openContainer = true;
+    }
+  }
+
+  /** Whether the group is currently open (its children are disclosed). */
+  public get expanded(): boolean {
+    return this.openContainer;
+  }
 
   private onClickGroup() {
     if (this.openContainer) {
@@ -123,6 +167,32 @@ export class ObcNavigationItemGroup extends LitElement {
   }
 
   override 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}

package/src/components/navigation-menu/navigation-menu.stories.ts

@@ -252,3 +252,57 @@ export const TestDynamicElementsInSpan: Story = {
     await expect(newItem.variant).toBe(ObcNavigationMenuVariant.Compact);
   },
 };
+
+export const Tree: Story = {
+  args: {
+    variant: ObcNavigationMenuVariant.Tree,
+  },
+  render: (args) => {
+    return html`
+      <obc-navigation-menu
+        .variant=${args.variant}
+        style="position: fixed; top: 0; bottom: 0; left: 0;"
+      >
+        <obc-navigation-item-group
+          slot="main"
+          label="Vessel"
+          hasIcon
+          defaultOpen
+        >
+          <obi-placeholder slot="icon"></obi-placeholder>
+          <obc-navigation-item-group
+            label="Engine room"
+            hasIcon
+            defaultOpen
+            terminalType="aggregated-header"
+          >
+            <obi-placeholder slot="icon"></obi-placeholder>
+            <obc-navigation-item label="Main engine" hasIcon checked>
+              <obi-placeholder slot="icon"></obi-placeholder>
+            </obc-navigation-item>
+            <obc-navigation-item
+              label="Cooling system"
+              hasIcon
+              hasAlertBadge
+              .alertCount=${3}
+            >
+              <obi-placeholder slot="icon"></obi-placeholder>
+            </obc-navigation-item>
+          </obc-navigation-item-group>
+          <obc-navigation-item-group label="Bridge" hasIcon>
+            <obi-placeholder slot="icon"></obi-placeholder>
+            <obc-navigation-item label="Radar" hasIcon>
+              <obi-placeholder slot="icon"></obi-placeholder>
+            </obc-navigation-item>
+            <obc-navigation-item label="Autopilot" hasIcon>
+              <obi-placeholder slot="icon"></obi-placeholder>
+            </obc-navigation-item>
+          </obc-navigation-item-group>
+          <obc-navigation-item label="Deck" hasIcon>
+            <obi-placeholder slot="icon"></obi-placeholder>
+          </obc-navigation-item>
+        </obc-navigation-item-group>
+      </obc-navigation-menu>
+    `;
+  },
+};

package/src/components/navigation-menu/navigation-menu.ts

@@ -4,6 +4,29 @@ import compentStyle from './navigation-menu.css?inline';
 import {ObcNavigationItemGroup} from '../navigation-item-group/navigation-item-group.js';
 import {ObcNavigationItem} from '../navigation-item/navigation-item.js';
 import {customElement} from '../../decorator.js';
+import {
+  ObcTreeNavigationItem,
+  TreeBranchType,
+} from '../tree-navigation-item/tree-navigation-item.js';
+import {
+  TreeRovingNavigator,
+  TreeRovingAdapter,
+} from '../../internal/tree-roving-navigator.js';
+
+/** A nav-menu tree row is either a navigation item or a navigation item group. */
+type NavTreeRow = ObcNavigationItem | ObcNavigationItemGroup;
+
+const NAV_ITEM_TAG = 'obc-navigation-item';
+const NAV_GROUP_TAG = 'obc-navigation-item-group';
+
+function isNavGroup(el: Element): el is ObcNavigationItemGroup {
+  return el.tagName.toLowerCase() === NAV_GROUP_TAG;
+}
+
+function isNavRow(el: Element): el is NavTreeRow {
+  const tag = el.tagName.toLowerCase();
+  return tag === NAV_ITEM_TAG || tag === NAV_GROUP_TAG;
+}
 
 /**
  * `ObcNavigationMenuVariant` – Enumerates the available visual and behavioral variants for `<obc-navigation-menu>`.
@@ -12,6 +35,7 @@ import {customElement} from '../../decorator.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.
  */
@@ -20,6 +44,7 @@ export enum ObcNavigationMenuVariant {
   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',
+  Tree = 'tree',
 }
 
 /**
@@ -49,6 +74,11 @@ export 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:**
@@ -71,6 +101,10 @@ export 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.
@@ -129,6 +163,7 @@ export 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.
    */
   @property({type: String}) variant: ObcNavigationMenuVariant =
     ObcNavigationMenuVariant.Full;
@@ -148,6 +183,59 @@ export class ObcNavigationMenu extends LitElement {
   private slotObservers: MutationObserver[] = [];
   @state() private hasFooter = false;
 
+  /**
+   * 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 = new TreeRovingNavigator<NavTreeRow>(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),
+  } satisfies TreeRovingAdapter<NavTreeRow>);
+
+  /** Top-level tree rows of the main slot (mirrors `assignTreeBranches`'s filter). */
+  private treeRootRows(): NavTreeRow[] {
+    return Array.from(this.children).filter((child): child is NavTreeRow => {
+      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. */
+  private treeChildRows(row: NavTreeRow): NavTreeRow[] {
+    return Array.from(row.children).filter(isNavRow);
+  }
+
+  /** The inline `obc-tree-navigation-item` a tree-mode row renders in its shadow root. */
+  private treeInnerItem(row: NavTreeRow): ObcTreeNavigationItem | null {
+    return (
+      row.shadowRoot?.querySelector<ObcTreeNavigationItem>(
+        'obc-tree-navigation-item'
+      ) ?? null
+    );
+  }
+
+  private onTreeKeydown = (event: KeyboardEvent): void => {
+    if (this.variant !== ObcNavigationMenuVariant.Tree) return;
+    if (this.treeNavigator.handleKeydown(event)) event.preventDefault();
+  };
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.addEventListener('keydown', this.onTreeKeydown);
+  }
+
   findAllElements<T extends Element>(
     el: Element,
     tag: string,
@@ -212,6 +300,7 @@ export class ObcNavigationMenu extends LitElement {
   registerGroup(groups: ObcNavigationItemGroup[]) {
     groups.forEach((group) => {
       group.addEventListener('open', () => {
+        if (this.variant === ObcNavigationMenuVariant.Tree) return;
         groups.forEach((g) => {
           if (g !== group) {
             g.close();
@@ -296,6 +385,7 @@ export class ObcNavigationMenu extends LitElement {
   override disconnectedCallback(): void {
     super.disconnectedCallback();
     this.cleanupSlotObservers();
+    this.removeEventListener('keydown', this.onTreeKeydown);
   }
 
   private handleSlotChange() {
@@ -303,7 +393,68 @@ export class ObcNavigationMenu extends LitElement {
     this.setupSlotObservers();
   }
 
+  private assignTreeBranches(el: Element, depth: number): void {
+    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;
+      // Top-level rows are slotted; only treeify the main slot. Nested rows have
+      // no slot attribute and always belong to their group's tree.
+      if (depth === 0) {
+        const slot = child.getAttribute('slot');
+        if (slot !== null && slot !== 'main') continue;
+      }
+      const branches: TreeBranchType[] = Array.from(
+        {length: depth},
+        () => TreeBranchType.blank
+      );
+      const row = child as ObcNavigationItem | ObcNavigationItemGroup;
+      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.
+  private clearTreeMode(el: Element): void {
+    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 as ObcNavigationItem | ObcNavigationItemGroup;
+      row.treeMode = false;
+      row.treeBranches = [];
+      if (isGroup) {
+        this.clearTreeMode(child);
+      }
+    }
+  }
+
   private setupItems() {
+    if (this.variant === ObcNavigationMenuVariant.Tree) {
+      this.assignTreeBranches(this, 0);
+      // Footer and logo are not part of the tree — keep them as flat full-variant
+      // items (and clear any tree mode left over from the main slot's walk).
+      (['footer', 'logo'] as const).forEach((slot) => {
+        this.findAllItems(this, slot).forEach((item) => {
+          item.treeMode = false;
+          item.treeBranches = [];
+          item.variant = ObcNavigationMenuVariant.Full;
+        });
+      });
+      // Defer so the rows' inline tree-item headers exist before the roving
+      // tabindex is assigned to them.
+      queueMicrotask(() => this.treeNavigator.refresh());
+      return;
+    }
+
+    this.clearTreeMode(this);
+
     const hug =
       this.variant !== ObcNavigationMenuVariant.Full ||
       this.flyoutVariant === ObcNavigationMenuFlyoutVariant.Compact;

package/src/components/tree-navigation/tree-navigation.css

@@ -0,0 +1,7 @@
+:host {
+  display: block;
+}
+
+[role="tree"] {
+  display: block;
+}