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

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

@@ -0,0 +1,160 @@
+import { LitElement } from 'lit';
+import '../../icons/icon-chevron-right-google.js';
+import '../../icons/icon-alert-header-aggregated-iec.js';
+import '../../icons/icon-alert-header-group-iec.js';
+import '../badge/badge.js';
+/**
+ * Guide line drawn for one indentation column. Normally computed by
+ * `obc-tree-navigation`; rarely set by hand.
+ *
+ * - `straight`: vertical pass-through (`│`)
+ * - `intersection`: vertical + stub for a non-last child (`├`)
+ * - `corner`: half vertical + stub for the last child (`└`)
+ * - `blank`: empty spacer
+ */
+export declare enum TreeBranchType {
+    straight = "straight",
+    intersection = "intersection",
+    corner = "corner",
+    blank = "blank"
+}
+/**
+ * Terminal type for a tree item, controlling the alert-header marker shown in
+ * the terminal (top-right, by the chevron).
+ *
+ * - `regular`: No marker — a plain expand/collapse terminal.
+ * - `aggregatedHeader`: Shows the aggregated alert-header marker, indicating the
+ *   node aggregates alerts from its descendants.
+ * - `groupHeader`: Shows the group alert-header marker, indicating a grouped set
+ *   of alerts beneath the node.
+ */
+export declare enum TreeTerminalType {
+    regular = "regular",
+    aggregatedHeader = "aggregated-header",
+    groupHeader = "group-header"
+}
+/**
+ * `<obc-tree-navigation-item>` – A single row in a tree- or file-explorer-style
+ * navigation list, with indentation guide lines, an optional expand/collapse
+ * chevron, a leading icon, a label, and an optional alert badge.
+ *
+ * Each row represents one node in a hierarchy. Depth is expressed through the
+ * `branches` array: one entry per ancestor level, each describing the guide line
+ * to draw for that level. The expand chevron lets a node disclose its children,
+ * emitting `expand-toggle` so a parent can manage the open/closed state.
+ *
+ * ## Features
+ * - **Indentation guides:** Render one 32px guide column per `branches` entry —
+ *   pass-through vertical lines for ancestors that continue, and an elbow
+ *   (`intersection`) connecting the row to its parent.
+ * - **Expand/collapse:** Set `expandable` to show a chevron that rotates when
+ *   `expanded`. The chevron is a visual indicator only — activating the row
+ *   fires `expand-toggle` with the next state; manage `expanded` in response.
+ *   When `expanded`, a vertical guide descends from the chevron to connect to
+ *   the revealed child rows below.
+ * - **Terminal type:** `terminalType` adds an alert-header marker in the terminal
+ *   (`aggregatedHeader` or `groupHeader`), indicating the node heads a set of
+ *   aggregated or grouped alerts.
+ * - **Leading icon:** Provide an icon via the `icon` slot (shown when
+ *   `hasLeadingIcon`).
+ * - **Alert badge:** A trailing counter badge (e.g. an alarm count), toggled with
+ *   `hasAlertBadge` and configured via `alertCount` and `alertType`.
+ * - **Checked state:** `checked` highlights the current selection using the
+ *   amplified elevation style. A checked row is the current item and is not
+ *   re-selectable — it shows no hover/pressed feedback and fires no `click` or
+ *   navigation. An expandable checked row still toggles (fires `expand-toggle`),
+ *   so a group that is the current selection can be opened and closed. It stays
+ *   keyboard-focusable.
+ * - **Link or button:** Set `href` to render the row as a link; otherwise it acts
+ *   as a button.
+ *
+ * ## Usage Guidelines
+ * - Use for hierarchical navigation such as file trees, layer panels, or nested
+ *   menus. For flat navigation lists, use `obc-navigation-item` instead.
+ * - Build `branches` from the row's ancestry: `intersection` for the level that
+ *   owns this row, `straight` for ancestors with siblings still to come, and
+ *   `blank` for ancestors whose subtrees have ended. When placed inside
+ *   `obc-tree-navigation`, the container computes `branches` automatically.
+ * - Keep one row `checked` at a time within a tree to mark the current location.
+ * - Leaf nodes should leave `expandable` as `false` so no chevron is shown.
+ *
+ * ## Slots
+ *
+ * | Slot Name      | Renders When...                 | Purpose                                                                 |
+ * |----------------|---------------------------------|-------------------------------------------------------------------------|
+ * | icon           | `hasLeadingIcon` is true        | Leading icon for the row, e.g. `<obi-placeholder slot="icon">`.         |
+ *
+ * @slot icon - Leading icon slot (shown when `hasLeadingIcon` is true).
+ * @fires expand-toggle {CustomEvent<boolean>} Fired when an expandable row is activated; detail is the next `expanded` value.
+ * @fires click {CustomEvent<void>} Fired when the row is activated.
+ */
+export declare class ObcTreeNavigationItem extends LitElement {
+    /** The text label displayed for the row. */
+    label: string;
+    /**
+     * Guide line for each ancestor level, outermost first; one 32px column per
+     * entry. Computed by `obc-tree-navigation` — rarely set by hand.
+     */
+    branches: TreeBranchType[];
+    /** Whether the row shows an expand/collapse chevron. Leave false for leaf nodes. */
+    expandable: boolean;
+    /** Whether the node is expanded. Rotates the chevron and sets `aria-expanded`. */
+    expanded: boolean;
+    /**
+     * Whether the row is the current selection. Applies the amplified style and
+     * makes the row inert to re-selection (no hover/pressed feedback, no `click`
+     * or navigation); it remains keyboard-focusable. An expandable checked row
+     * still fires `expand-toggle` so a selected group can open and close.
+     */
+    checked: boolean;
+    /** Disables the row, removing it from the tab order and dimming its appearance. */
+    disabled: boolean;
+    /**
+     * Whether the row is in the tab order. A tree container manages this as a
+     * roving tabindex (one row focusable at a time); standalone rows stay tabbable.
+     */
+    focusable: boolean;
+    /**
+     * Whether the row shows a leading icon (provided via the `icon` slot).
+     */
+    hasLeadingIcon: boolean;
+    /**
+     * Terminal type, 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. */
+    hasAlertBadge: boolean;
+    /** The number shown in the alert badge when `hasAlertBadge` is true. */
+    alertCount: number;
+    /** The severity/type of the alert badge. One of the `obc-badge` types (default `alarm`). */
+    alertType: string;
+    /**
+     * The URL to navigate to when the row is activated. If set, the row renders as
+     * a link; otherwise it acts as a button.
+     */
+    href: string | undefined;
+    private wrapperElement?;
+    /** Focuses the row's interactive wrapper (the host itself is not focusable). */
+    focus(options?: FocusOptions): void;
+    /** A root-level row has no ancestor columns, so it draws no connector lines. */
+    private get isRoot();
+    /**
+     * All ancestor columns are blank spacers — the row is indented but draws no
+     * guide lines, so the terminal connector and dropdown are suppressed too.
+     */
+    private get isBlankAncestry();
+    private activate;
+    private handleKeydown;
+    private renderBranch;
+    private renderTerminalHeader;
+    render(): import('lit-html').TemplateResult<1>;
+    static styles: import('lit').CSSResult;
+}
+export type ObcTreeNavigationItemExpandToggleEvent = CustomEvent<boolean>;
+declare global {
+    interface HTMLElementTagNameMap {
+        'obc-tree-navigation-item': ObcTreeNavigationItem;
+    }
+}
+//# sourceMappingURL=tree-navigation-item.d.ts.map

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

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

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

@@ -0,0 +1,208 @@
+import { unsafeCSS, LitElement, nothing, html } from "lit";
+import { property, query } from "lit/decorators.js";
+import componentStyle from "./tree-navigation-item.css.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { customElement } from "../../decorator.js";
+import "../../icons/icon-chevron-right-google.js";
+import "../../icons/icon-alert-header-aggregated-iec.js";
+import "../../icons/icon-alert-header-group-iec.js";
+import { BadgeType } from "../badge/badge.js";
+var __defProp = Object.defineProperty;
+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 = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var TreeBranchType = /* @__PURE__ */ ((TreeBranchType2) => {
+  TreeBranchType2["straight"] = "straight";
+  TreeBranchType2["intersection"] = "intersection";
+  TreeBranchType2["corner"] = "corner";
+  TreeBranchType2["blank"] = "blank";
+  return TreeBranchType2;
+})(TreeBranchType || {});
+var TreeTerminalType = /* @__PURE__ */ ((TreeTerminalType2) => {
+  TreeTerminalType2["regular"] = "regular";
+  TreeTerminalType2["aggregatedHeader"] = "aggregated-header";
+  TreeTerminalType2["groupHeader"] = "group-header";
+  return TreeTerminalType2;
+})(TreeTerminalType || {});
+let ObcTreeNavigationItem = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.label = "List item";
+    this.branches = [];
+    this.expandable = false;
+    this.expanded = false;
+    this.checked = false;
+    this.disabled = false;
+    this.focusable = true;
+    this.hasLeadingIcon = true;
+    this.terminalType = "regular";
+    this.hasAlertBadge = false;
+    this.alertCount = 0;
+    this.alertType = BadgeType.alarm;
+  }
+  /** Focuses the row's interactive wrapper (the host itself is not focusable). */
+  focus(options) {
+    this.wrapperElement?.focus(options);
+  }
+  /** A root-level row has no ancestor columns, so it draws no connector lines. */
+  get isRoot() {
+    return this.branches.length === 0;
+  }
+  /**
+   * All ancestor columns are blank spacers — the row is indented but draws no
+   * guide lines, so the terminal connector and dropdown are suppressed too.
+   */
+  get isBlankAncestry() {
+    return this.branches.length > 0 && this.branches.every(
+      (b) => b === "blank"
+      /* blank */
+    );
+  }
+  activate() {
+    if (this.disabled) return;
+    if (this.expandable) {
+      this.dispatchEvent(
+        new CustomEvent("expand-toggle", { detail: !this.expanded })
+      );
+    }
+    if (this.checked) return;
+    this.dispatchEvent(new CustomEvent("click"));
+    if (this.href !== void 0) {
+      window.location.href = this.href;
+    }
+  }
+  handleKeydown(event) {
+    if (this.disabled) return;
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    this.activate();
+  }
+  renderBranch(type) {
+    const hasVertical = type === "straight" || type === "intersection" || type === "corner";
+    const hasHorizontal = type === "intersection" || type === "corner";
+    return html`<div
+      class=${classMap({ branch: true, ["branch-" + type]: true })}
+    >
+      ${hasVertical ? html`<div class="branch-vertical"></div>` : nothing}
+      ${hasHorizontal ? html`<div class="branch-horizontal"></div>` : nothing}
+      ${type === "corner" ? html`<div class="branch-elbow"></div>` : nothing}
+    </div>`;
+  }
+  renderTerminalHeader() {
+    if (this.terminalType === "aggregated-header") {
+      return html`<div class="terminal-header" aria-hidden="true">
+        <obi-alert-header-aggregated-iec></obi-alert-header-aggregated-iec>
+      </div>`;
+    }
+    if (this.terminalType === "group-header") {
+      return html`<div class="terminal-header" aria-hidden="true">
+        <obi-alert-header-group-iec></obi-alert-header-group-iec>
+      </div>`;
+    }
+    return nothing;
+  }
+  render() {
+    return html`
+      <div
+        class=${classMap({
+      wrapper: true,
+      checked: this.checked,
+      disabled: this.disabled,
+      "has-icon": this.hasLeadingIcon
+    })}
+        role="treeitem"
+        aria-expanded=${ifDefined(this.expandable ? this.expanded : void 0)}
+        aria-current=${ifDefined(this.checked ? "page" : void 0)}
+        aria-selected=${ifDefined(this.checked ? "true" : void 0)}
+        aria-disabled=${ifDefined(this.disabled ? "true" : void 0)}
+        tabindex=${this.disabled ? -1 : this.focusable ? 0 : -1}
+        @click=${this.activate}
+        @keydown=${this.handleKeydown}
+      >
+        <div class="visible-wrapper">
+          <div class="tree-node-row">
+            ${this.branches.map((branch) => this.renderBranch(branch))}
+            <div class="terminal">
+              ${this.isRoot || this.isBlankAncestry ? nothing : html`<div class="terminal-connector"></div>`}
+              ${!this.isRoot && !this.isBlankAncestry && this.expandable && this.expanded ? html`<div class="terminal-dropdown"></div>` : nothing}
+              ${this.expandable ? html`<div class="chevron" aria-hidden="true">
+                    <obi-chevron-right-google></obi-chevron-right-google>
+                  </div>` : nothing}
+              ${this.renderTerminalHeader()}
+            </div>
+          </div>
+          <div class="label-container">
+            ${this.hasLeadingIcon ? html`<div class="leading-icon">
+                  <slot name="icon"></slot>
+                </div>` : nothing}
+            <span part="label" class="label">${this.label}</span>
+          </div>
+          ${this.hasAlertBadge ? html`<obc-badge
+                class="alert-badge"
+                .type=${this.alertType}
+                .number=${this.alertCount}
+              ></obc-badge>` : nothing}
+        </div>
+      </div>
+    `;
+  }
+};
+ObcTreeNavigationItem.styles = unsafeCSS(componentStyle);
+__decorateClass([
+  property({ type: String })
+], ObcTreeNavigationItem.prototype, "label", 2);
+__decorateClass([
+  property({ type: Array })
+], ObcTreeNavigationItem.prototype, "branches", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcTreeNavigationItem.prototype, "expandable", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], ObcTreeNavigationItem.prototype, "expanded", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], ObcTreeNavigationItem.prototype, "checked", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], ObcTreeNavigationItem.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: false })
+], ObcTreeNavigationItem.prototype, "focusable", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: false })
+], ObcTreeNavigationItem.prototype, "hasLeadingIcon", 2);
+__decorateClass([
+  property({ type: String })
+], ObcTreeNavigationItem.prototype, "terminalType", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcTreeNavigationItem.prototype, "hasAlertBadge", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcTreeNavigationItem.prototype, "alertCount", 2);
+__decorateClass([
+  property({ type: String })
+], ObcTreeNavigationItem.prototype, "alertType", 2);
+__decorateClass([
+  property({ type: String })
+], ObcTreeNavigationItem.prototype, "href", 2);
+__decorateClass([
+  query(".wrapper")
+], ObcTreeNavigationItem.prototype, "wrapperElement", 2);
+ObcTreeNavigationItem = __decorateClass([
+  customElement("obc-tree-navigation-item")
+], ObcTreeNavigationItem);
+export {
+  ObcTreeNavigationItem,
+  TreeBranchType,
+  TreeTerminalType
+};
+//# sourceMappingURL=tree-navigation-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree-navigation-item.js","sources":["../../../src/components/tree-navigation-item/tree-navigation-item.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport componentStyle from './tree-navigation-item.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {customElement} from '../../decorator.js';\nimport '../../icons/icon-chevron-right-google.js';\nimport '../../icons/icon-alert-header-aggregated-iec.js';\nimport '../../icons/icon-alert-header-group-iec.js';\nimport '../badge/badge.js';\nimport {BadgeType} from '../badge/badge.js';\n\n/**\n * Guide line drawn for one indentation column. Normally computed by\n * `obc-tree-navigation`; rarely set by hand.\n *\n * - `straight`: vertical pass-through (`│`)\n * - `intersection`: vertical + stub for a non-last child (`├`)\n * - `corner`: half vertical + stub for the last child (`└`)\n * - `blank`: empty spacer\n */\nexport enum TreeBranchType {\n  straight = 'straight',\n  intersection = 'intersection',\n  corner = 'corner',\n  blank = 'blank',\n}\n\n/**\n * Terminal type for a tree item, controlling the alert-header marker shown in\n * the terminal (top-right, by the chevron).\n *\n * - `regular`: No marker — a plain expand/collapse terminal.\n * - `aggregatedHeader`: Shows the aggregated alert-header marker, indicating the\n *   node aggregates alerts from its descendants.\n * - `groupHeader`: Shows the group alert-header marker, indicating a grouped set\n *   of alerts beneath the node.\n */\nexport enum TreeTerminalType {\n  regular = 'regular',\n  aggregatedHeader = 'aggregated-header',\n  groupHeader = 'group-header',\n}\n\n/**\n * `<obc-tree-navigation-item>` – A single row in a tree- or file-explorer-style\n * navigation list, with indentation guide lines, an optional expand/collapse\n * chevron, a leading icon, a label, and an optional alert badge.\n *\n * Each row represents one node in a hierarchy. Depth is expressed through the\n * `branches` array: one entry per ancestor level, each describing the guide line\n * to draw for that level. The expand chevron lets a node disclose its children,\n * emitting `expand-toggle` so a parent can manage the open/closed state.\n *\n * ## Features\n * - **Indentation guides:** Render one 32px guide column per `branches` entry —\n *   pass-through vertical lines for ancestors that continue, and an elbow\n *   (`intersection`) connecting the row to its parent.\n * - **Expand/collapse:** Set `expandable` to show a chevron that rotates when\n *   `expanded`. The chevron is a visual indicator only — activating the row\n *   fires `expand-toggle` with the next state; manage `expanded` in response.\n *   When `expanded`, a vertical guide descends from the chevron to connect to\n *   the revealed child rows below.\n * - **Terminal type:** `terminalType` adds an alert-header marker in the terminal\n *   (`aggregatedHeader` or `groupHeader`), indicating the node heads a set of\n *   aggregated or grouped alerts.\n * - **Leading icon:** Provide an icon via the `icon` slot (shown when\n *   `hasLeadingIcon`).\n * - **Alert badge:** A trailing counter badge (e.g. an alarm count), toggled with\n *   `hasAlertBadge` and configured via `alertCount` and `alertType`.\n * - **Checked state:** `checked` highlights the current selection using the\n *   amplified elevation style. A checked row is the current item and is not\n *   re-selectable — it shows no hover/pressed feedback and fires no `click` or\n *   navigation. An expandable checked row still toggles (fires `expand-toggle`),\n *   so a group that is the current selection can be opened and closed. It stays\n *   keyboard-focusable.\n * - **Link or button:** Set `href` to render the row as a link; otherwise it acts\n *   as a button.\n *\n * ## Usage Guidelines\n * - Use for hierarchical navigation such as file trees, layer panels, or nested\n *   menus. For flat navigation lists, use `obc-navigation-item` instead.\n * - Build `branches` from the row's ancestry: `intersection` for the level that\n *   owns this row, `straight` for ancestors with siblings still to come, and\n *   `blank` for ancestors whose subtrees have ended. When placed inside\n *   `obc-tree-navigation`, the container computes `branches` automatically.\n * - Keep one row `checked` at a time within a tree to mark the current location.\n * - Leaf nodes should leave `expandable` as `false` so no chevron is shown.\n *\n * ## Slots\n *\n * | Slot Name      | Renders When...                 | Purpose                                                                 |\n * |----------------|---------------------------------|-------------------------------------------------------------------------|\n * | icon           | `hasLeadingIcon` is true        | Leading icon for the row, e.g. `<obi-placeholder slot=\"icon\">`.         |\n *\n * @slot icon - Leading icon slot (shown when `hasLeadingIcon` is true).\n * @fires expand-toggle {CustomEvent<boolean>} Fired when an expandable row is activated; detail is the next `expanded` value.\n * @fires click {CustomEvent<void>} Fired when the row is activated.\n */\n@customElement('obc-tree-navigation-item')\nexport class ObcTreeNavigationItem extends LitElement {\n  /** The text label displayed for the row. */\n  @property({type: String}) label = 'List item';\n\n  /**\n   * Guide line for each ancestor level, outermost first; one 32px column per\n   * entry. Computed by `obc-tree-navigation` — rarely set by hand.\n   */\n  @property({type: Array}) branches: TreeBranchType[] = [];\n\n  /** Whether the row shows an expand/collapse chevron. Leave false for leaf nodes. */\n  @property({type: Boolean}) expandable = false;\n\n  /** Whether the node is expanded. Rotates the chevron and sets `aria-expanded`. */\n  @property({type: Boolean, reflect: true}) expanded = false;\n\n  /**\n   * Whether the row is the current selection. Applies the amplified style and\n   * makes the row inert to re-selection (no hover/pressed feedback, no `click`\n   * or navigation); it remains keyboard-focusable. An expandable checked row\n   * still fires `expand-toggle` so a selected group can open and close.\n   */\n  @property({type: Boolean, reflect: true}) checked = false;\n\n  /** Disables the row, removing it from the tab order and dimming its appearance. */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * Whether the row is in the tab order. A tree container manages this as a\n   * roving tabindex (one row focusable at a time); standalone rows stay tabbable.\n   */\n  @property({type: Boolean, attribute: false}) focusable = true;\n\n  /**\n   * Whether the row shows a leading icon (provided via the `icon` slot).\n   */\n  @property({type: Boolean, attribute: false}) hasLeadingIcon = true;\n\n  /**\n   * Terminal type, controlling the alert-header marker shown in the terminal.\n   * One of `regular` (default), `aggregated-header`, or `group-header`.\n   */\n  @property({type: String}) terminalType: string = TreeTerminalType.regular;\n\n  /** Whether a trailing alert counter badge is shown. */\n  @property({type: Boolean}) hasAlertBadge = false;\n\n  /** The number shown in the alert badge when `hasAlertBadge` is true. */\n  @property({type: Number}) alertCount = 0;\n\n  /** The severity/type of the alert badge. One of the `obc-badge` types (default `alarm`). */\n  @property({type: String}) alertType: string = BadgeType.alarm;\n\n  /**\n   * The URL to navigate to when the row is activated. If set, the row renders as\n   * a link; otherwise it acts as a button.\n   */\n  @property({type: String}) href: string | undefined;\n\n  @query('.wrapper') private wrapperElement?: HTMLElement;\n\n  /** Focuses the row's interactive wrapper (the host itself is not focusable). */\n  public override focus(options?: FocusOptions): void {\n    this.wrapperElement?.focus(options);\n  }\n\n  /** A root-level row has no ancestor columns, so it draws no connector lines. */\n  private get isRoot(): boolean {\n    return this.branches.length === 0;\n  }\n\n  /**\n   * All ancestor columns are blank spacers — the row is indented but draws no\n   * guide lines, so the terminal connector and dropdown are suppressed too.\n   */\n  private get isBlankAncestry(): boolean {\n    return (\n      this.branches.length > 0 &&\n      this.branches.every((b) => b === TreeBranchType.blank)\n    );\n  }\n\n  private activate() {\n    if (this.disabled) return;\n    // An expandable row always toggles, even when checked — a group that is the\n    // current selection must still open and close. A checked leaf, however, is\n    // the current selection and is inert (no re-selection click or navigation).\n    if (this.expandable) {\n      this.dispatchEvent(\n        new CustomEvent<boolean>('expand-toggle', {detail: !this.expanded})\n      );\n    }\n    if (this.checked) return;\n    this.dispatchEvent(new CustomEvent('click'));\n    if (this.href !== undefined) {\n      window.location.href = this.href;\n    }\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    if (this.disabled) return;\n    if (event.key !== 'Enter' && event.key !== ' ') return;\n    event.preventDefault();\n    this.activate();\n  }\n\n  private renderBranch(type: TreeBranchType) {\n    const hasVertical =\n      type === TreeBranchType.straight ||\n      type === TreeBranchType.intersection ||\n      type === TreeBranchType.corner;\n    const hasHorizontal =\n      type === TreeBranchType.intersection || type === TreeBranchType.corner;\n    return html`<div\n      class=${classMap({branch: true, ['branch-' + type]: true})}\n    >\n      ${hasVertical ? html`<div class=\"branch-vertical\"></div>` : nothing}\n      ${hasHorizontal ? html`<div class=\"branch-horizontal\"></div>` : nothing}\n      ${type === TreeBranchType.corner\n        ? html`<div class=\"branch-elbow\"></div>`\n        : nothing}\n    </div>`;\n  }\n\n  private renderTerminalHeader() {\n    if (this.terminalType === TreeTerminalType.aggregatedHeader) {\n      return html`<div class=\"terminal-header\" aria-hidden=\"true\">\n        <obi-alert-header-aggregated-iec></obi-alert-header-aggregated-iec>\n      </div>`;\n    }\n    if (this.terminalType === TreeTerminalType.groupHeader) {\n      return html`<div class=\"terminal-header\" aria-hidden=\"true\">\n        <obi-alert-header-group-iec></obi-alert-header-group-iec>\n      </div>`;\n    }\n    return nothing;\n  }\n\n  override render() {\n    return html`\n      <div\n        class=${classMap({\n          wrapper: true,\n          checked: this.checked,\n          disabled: this.disabled,\n          'has-icon': this.hasLeadingIcon,\n        })}\n        role=\"treeitem\"\n        aria-expanded=${ifDefined(this.expandable ? this.expanded : undefined)}\n        aria-current=${ifDefined(this.checked ? 'page' : undefined)}\n        aria-selected=${ifDefined(this.checked ? 'true' : undefined)}\n        aria-disabled=${ifDefined(this.disabled ? 'true' : undefined)}\n        tabindex=${this.disabled ? -1 : this.focusable ? 0 : -1}\n        @click=${this.activate}\n        @keydown=${this.handleKeydown}\n      >\n        <div class=\"visible-wrapper\">\n          <div class=\"tree-node-row\">\n            ${this.branches.map((branch) => this.renderBranch(branch))}\n            <div class=\"terminal\">\n              ${this.isRoot || this.isBlankAncestry\n                ? nothing\n                : html`<div class=\"terminal-connector\"></div>`}\n              ${!this.isRoot &&\n              !this.isBlankAncestry &&\n              this.expandable &&\n              this.expanded\n                ? html`<div class=\"terminal-dropdown\"></div>`\n                : nothing}\n              ${this.expandable\n                ? html`<div class=\"chevron\" aria-hidden=\"true\">\n                    <obi-chevron-right-google></obi-chevron-right-google>\n                  </div>`\n                : nothing}\n              ${this.renderTerminalHeader()}\n            </div>\n          </div>\n          <div class=\"label-container\">\n            ${this.hasLeadingIcon\n              ? html`<div class=\"leading-icon\">\n                  <slot name=\"icon\"></slot>\n                </div>`\n              : nothing}\n            <span part=\"label\" class=\"label\">${this.label}</span>\n          </div>\n          ${this.hasAlertBadge\n            ? html`<obc-badge\n                class=\"alert-badge\"\n                .type=${this.alertType}\n                .number=${this.alertCount}\n              ></obc-badge>`\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\nexport type ObcTreeNavigationItemExpandToggleEvent = CustomEvent<boolean>;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-tree-navigation-item': ObcTreeNavigationItem;\n  }\n}\n"],"names":["TreeBranchType","TreeTerminalType"],"mappings":"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"}

package/dist/internal/tree-roving-navigator.d.ts

@@ -0,0 +1,71 @@
+import { ObcTreeNavigationItem } from '../components/tree-navigation-item/tree-navigation-item.js';
+/**
+ * Host-specific row resolution. The two tree hosts differ only in row tags,
+ * expand-state storage, and DOM shape, so injecting these hooks lets one
+ * navigator drive both.
+ */
+export interface TreeRovingAdapter<Row extends HTMLElement = HTMLElement> {
+    /** Top-level rows, in document order. */
+    getRows(): Row[];
+    /** Direct child rows of a row, in document order. */
+    childRows(row: Row): Row[];
+    isGroup(row: Row): boolean;
+    isExpanded(row: Row): boolean;
+    setExpanded(row: Row, expanded: boolean): void;
+    /** The focusable `obc-tree-navigation-item` for a row (a leaf is itself). */
+    innerItem(row: Row): ObcTreeNavigationItem | null;
+    /** Defaults to false when omitted. */
+    isDisabled?(row: Row): boolean;
+}
+/**
+ * Implements the [WAI-ARIA Tree View](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/)
+ * keyboard pattern for a tree host: a single tab stop (roving tabindex) plus
+ * Up/Down, Left/Right (collapse/expand → parent/child), and Home/End. Type-ahead
+ * and `*` are intentionally out of scope.
+ *
+ * The host owns the DOM and the event wiring; this class owns the navigation
+ * logic. The host calls {@link handleKeydown} from its `keydown` listener and
+ * {@link refresh} whenever the structure changes, and supplies a
+ * {@link TreeRovingAdapter} for row resolution. Focus only moves on user keys;
+ * `refresh` re-points the roving tabindex without stealing focus.
+ */
+export declare class TreeRovingNavigator<Row extends HTMLElement = HTMLElement> {
+    private readonly adapter;
+    private readonly host;
+    /** The row that currently holds the single tab stop (roving tabindex). */
+    private activeRow?;
+    constructor(host: HTMLElement, adapter: TreeRovingAdapter<Row>);
+    private isDisabled;
+    /**
+     * Depth-first list of every visible row: descend into a group only when it is
+     * expanded. Disabled rows are included so {@link refresh} can re-point to a
+     * visible ancestor; arrow navigation filters them out via {@link navigableRows}.
+     */
+    private visibleRows;
+    /** Visible rows that arrow navigation can land on (enabled rows). */
+    private navigableRows;
+    /** The parent row of a row within this tree, or undefined for a top-level row. */
+    private parentRow;
+    /**
+     * Rebuild the roving tabindex: exactly one navigable row is `focusable`. Keeps
+     * the active row if still navigable; else falls back to its nearest navigable
+     * ancestor, else the first navigable row. Never moves focus.
+     */
+    refresh(): void;
+    private setActiveRow;
+    /**
+     * The originating tree row for a keydown. A group's header lives in the
+     * group's own shadow root, so the host-root check resolves a header to its
+     * group rather than the inner header item.
+     */
+    private rowFromEvent;
+    /** Whether an element is one of this tree's rows (group or leaf). */
+    private isRow;
+    /** Handle a `keydown`; returns true if the key was consumed. */
+    handleKeydown(event: KeyboardEvent): boolean;
+    private moveByOffset;
+    private moveToEdge;
+    private onArrowRight;
+    private onArrowLeft;
+}
+//# sourceMappingURL=tree-roving-navigator.d.ts.map

package/dist/internal/tree-roving-navigator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-roving-navigator.d.ts","sourceRoot":"","sources":["../../src/internal/tree-roving-navigator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,qBAAqB,EAAC,MAAM,4DAA4D,CAAC;AAEjG;;;;GAIG;AACH,MAAM,WAAW,iBAAiB,CAAC,GAAG,SAAS,WAAW,GAAG,WAAW;IACtE,yCAAyC;IACzC,OAAO,IAAI,GAAG,EAAE,CAAC;IACjB,qDAAqD;IACrD,SAAS,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,EAAE,CAAC;IAC3B,OAAO,CAAC,GAAG,EAAE,GAAG,GAAG,OAAO,CAAC;IAC3B,UAAU,CAAC,GAAG,EAAE,GAAG,GAAG,OAAO,CAAC;IAC9B,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/C,6EAA6E;IAC7E,SAAS,CAAC,GAAG,EAAE,GAAG,GAAG,qBAAqB,GAAG,IAAI,CAAC;IAClD,sCAAsC;IACtC,UAAU,CAAC,CAAC,GAAG,EAAE,GAAG,GAAG,OAAO,CAAC;CAChC;AAED;;;;;;;;;;;GAWG;AACH,qBAAa,mBAAmB,CAAC,GAAG,SAAS,WAAW,GAAG,WAAW;IACpE,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAyB;IACjD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAc;IAEnC,0EAA0E;IAC1E,OAAO,CAAC,SAAS,CAAC,CAAM;gBAEZ,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,iBAAiB,CAAC,GAAG,CAAC;IAK9D,OAAO,CAAC,UAAU;IAIlB;;;;OAIG;IACH,OAAO,CAAC,WAAW;IAcnB,qEAAqE;IACrE,OAAO,CAAC,aAAa;IAIrB,kFAAkF;IAClF,OAAO,CAAC,SAAS;IAkBjB;;;;OAIG;IACH,OAAO,IAAI,IAAI;IAuBf,OAAO,CAAC,YAAY;IAcpB;;;;OAIG;IACH,OAAO,CAAC,YAAY;IAepB,qEAAqE;IACrE,OAAO,CAAC,KAAK;IAWb,gEAAgE;IAChE,aAAa,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO;IA4B5C,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,YAAY;IAYpB,OAAO,CAAC,WAAW;CASpB"}

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

@@ -0,0 +1,172 @@
+class TreeRovingNavigator {
+  constructor(host, adapter) {
+    this.adapter = adapter;
+    this.host = host;
+  }
+  isDisabled(row) {
+    return this.adapter.isDisabled?.(row) ?? false;
+  }
+  /**
+   * Depth-first list of every visible row: descend into a group only when it is
+   * expanded. Disabled rows are included so {@link refresh} can re-point to a
+   * visible ancestor; arrow navigation filters them out via {@link navigableRows}.
+   */
+  visibleRows() {
+    const out = [];
+    const walk = (rows) => {
+      for (const row of rows) {
+        out.push(row);
+        if (this.adapter.isGroup(row) && this.adapter.isExpanded(row)) {
+          walk(this.adapter.childRows(row));
+        }
+      }
+    };
+    walk(this.adapter.getRows());
+    return out;
+  }
+  /** Visible rows that arrow navigation can land on (enabled rows). */
+  navigableRows() {
+    return this.visibleRows().filter((row) => !this.isDisabled(row));
+  }
+  /** The parent row of a row within this tree, or undefined for a top-level row. */
+  parentRow(target) {
+    let found;
+    const walk = (rows, parent) => {
+      for (const row of rows) {
+        if (row === target) {
+          found = parent;
+          return;
+        }
+        if (this.adapter.isGroup(row)) {
+          walk(this.adapter.childRows(row), row);
+          if (found !== void 0) return;
+        }
+      }
+    };
+    walk(this.adapter.getRows(), void 0);
+    return found;
+  }
+  /**
+   * Rebuild the roving tabindex: exactly one navigable row is `focusable`. Keeps
+   * the active row if still navigable; else falls back to its nearest navigable
+   * ancestor, else the first navigable row. Never moves focus.
+   */
+  refresh() {
+    const navigable = this.navigableRows();
+    if (navigable.length === 0) {
+      this.activeRow = void 0;
+      return;
+    }
+    let next;
+    if (this.activeRow && navigable.includes(this.activeRow)) {
+      next = this.activeRow;
+    } else if (this.activeRow) {
+      let ancestor = this.parentRow(this.activeRow);
+      while (ancestor && !navigable.includes(ancestor)) {
+        ancestor = this.parentRow(ancestor);
+      }
+      next = ancestor ?? navigable[0];
+    } else {
+      next = navigable[0];
+    }
+    this.setActiveRow(next, false);
+  }
+  setActiveRow(row, moveFocus) {
+    this.activeRow = row;
+    for (const candidate of this.visibleRows()) {
+      const item2 = this.adapter.innerItem(candidate);
+      if (item2) item2.focusable = candidate === row;
+    }
+    if (!moveFocus) return;
+    const item = this.adapter.innerItem(row);
+    if (item) item.focus();
+    else queueMicrotask(() => this.adapter.innerItem(row)?.focus());
+  }
+  /**
+   * The originating tree row for a keydown. A group's header lives in the
+   * group's own shadow root, so the host-root check resolves a header to its
+   * group rather than the inner header item.
+   */
+  rowFromEvent(event) {
+    const root = this.host.getRootNode();
+    for (const target of event.composedPath()) {
+      if (target instanceof HTMLElement && target.getRootNode() === root && this.isRow(target)) {
+        return target;
+      }
+    }
+    return void 0;
+  }
+  /** Whether an element is one of this tree's rows (group or leaf). */
+  isRow(el) {
+    const tops = this.adapter.getRows();
+    const stack = [...tops];
+    while (stack.length) {
+      const row = stack.pop();
+      if (row === el) return true;
+      if (this.adapter.isGroup(row)) stack.push(...this.adapter.childRows(row));
+    }
+    return false;
+  }
+  /** Handle a `keydown`; returns true if the key was consumed. */
+  handleKeydown(event) {
+    const row = this.rowFromEvent(event);
+    if (!row) return false;
+    switch (event.key) {
+      case "ArrowDown":
+        this.moveByOffset(row, 1);
+        return true;
+      case "ArrowUp":
+        this.moveByOffset(row, -1);
+        return true;
+      case "ArrowRight":
+        this.onArrowRight(row);
+        return true;
+      case "ArrowLeft":
+        this.onArrowLeft(row);
+        return true;
+      case "Home":
+        this.moveToEdge(true);
+        return true;
+      case "End":
+        this.moveToEdge(false);
+        return true;
+      default:
+        return false;
+    }
+  }
+  moveByOffset(row, offset) {
+    const rows = this.navigableRows();
+    const index = rows.indexOf(row);
+    if (index === -1) return;
+    const target = rows[index + offset];
+    if (target) this.setActiveRow(target, true);
+  }
+  moveToEdge(first) {
+    const rows = this.navigableRows();
+    if (rows.length === 0) return;
+    this.setActiveRow(first ? rows[0] : rows[rows.length - 1], true);
+  }
+  onArrowRight(row) {
+    if (!this.adapter.isGroup(row)) return;
+    if (!this.adapter.isExpanded(row)) {
+      this.adapter.setExpanded(row, true);
+      this.refresh();
+      return;
+    }
+    const child = this.adapter.childRows(row).find((c) => !this.isDisabled(c));
+    if (child) this.setActiveRow(child, true);
+  }
+  onArrowLeft(row) {
+    if (this.adapter.isGroup(row) && this.adapter.isExpanded(row)) {
+      this.adapter.setExpanded(row, false);
+      this.refresh();
+      return;
+    }
+    const parent = this.parentRow(row);
+    if (parent) this.setActiveRow(parent, true);
+  }
+}
+export {
+  TreeRovingNavigator
+};
+//# sourceMappingURL=tree-roving-navigator.js.map