@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.148 → 2.0.0-next.150

package/dist/components/icon-button/icon-button.js

@@ -2,6 +2,7 @@ import { unsafeCSS, LitElement, nothing, html } from "lit";
 import { property } from "lit/decorators.js";
 import iconStyle from "./icon-button.css.js";
 import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { customElement } from "../../decorator.js";
 import { degToRad } from "../../svghelpers/math.js";
 var __defProp = Object.defineProperty;
@@ -34,6 +35,7 @@ let ObcIconButton = class extends LitElement {
     this.progress = void 0;
     this.hasLabel = false;
     this.showDivider = true;
+    this.ariaLabel = null;
   }
   get progressSpinner() {
     if (this.progress === void 0) {
@@ -104,6 +106,7 @@ let ObcIconButton = class extends LitElement {
       "hide-divider": !this.showDivider
     })}
         ?disabled=${this.disabled}
+        aria-label=${ifDefined(this.ariaLabel ?? void 0)}
         part="wrapper"
       >
         ${this.progress !== void 0 ? this.progressSpinner : nothing}
@@ -150,6 +153,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, attribute: false })
 ], ObcIconButton.prototype, "showDivider", 2);
+__decorateClass([
+  property({ type: String, attribute: "aria-label" })
+], ObcIconButton.prototype, "ariaLabel", 2);
 ObcIconButton = __decorateClass([
   customElement("obc-icon-button")
 ], ObcIconButton);

package/dist/components/icon-button/icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.js","sources":["../../../src/components/icon-button/icon-button.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport iconStyle from './icon-button.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../../decorator.js';\nimport {degToRad} from '../../svghelpers/math.js';\n\n/**\n * The available visual variants for `<obc-icon-button>`.\n * - `normal`: Standard appearance for most use cases.\n * - `raised`: Adds elevation/shadow for prominence.\n * - `flat`: Minimal, backgroundless style for subtle actions.\n * - `integration`: For use in Integration Bar components\n */\nexport enum IconButtonVariant {\n  normal = 'normal',\n  raised = 'raised',\n  flat = 'flat',\n  integration = 'integration',\n}\n\n/**\n * `<obc-icon-button>` – An icon-only or icon-with-label button for quick actions.\n *\n * Provides a compact, visually prominent button that displays an icon (and optionally a label) for triggering actions. Commonly used for toolbars, navigation, or contextual actions where space is limited and a recognizable icon can represent the function.\n *\n * Appears as a circular or rounded button with configurable visual styles, supporting progress indication and various layout adaptations.\n *\n * ## Features\n * - **Variants:**\n *   - `normal` (default): Standard appearance for most use cases.\n *   - `raised`: Adds elevation/shadow for prominence.\n *   - `flat`: Minimal, backgroundless style for subtle actions.\n *   - `integration`: For use in Integration Bar components\n * - **Progress Indicator:**\n *   - Shows a circular progress spinner overlay when the `progress` property is set (0–100). Useful for indicating loading or ongoing actions.\n * - **Label Support:**\n *   - Optionally displays a text label below the icon when `hasLabel` is true and content is provided in the `label` slot.\n * - **Corner Alignment:**\n *   - `cornerLeft` and `cornerRight` adjust the button's border radius and alignment for seamless placement at the start or end of a container.\n * - **Active State:**\n *   - `activated` visually highlights the button as selected or toggled.\n *   - `activeColor` applies an accent color for emphasis.\n * - **Wide Mode:**\n *   - `wide` increases the button's width for easier touch targets or visual balance.\n * - **Disabled State:**\n *   - `disabled` prevents interaction and visually dims the button.\n *\n * ## Usage Guidelines\n * - Use `obc-icon-button` for actions represented by icons, such as toolbars, navigation, or quick-access commands.\n * - Add a label (with `hasLabel` and the `label` slot) when clarity is needed or when icons alone may not be universally understood.\n * - Use the progress indicator for actions that take time, such as uploads or background processes.\n * - Prefer the `normal` variant for most cases; use `raised` to draw attention, and `flat` for less prominent or inline actions.\n * - For grouped or edge-aligned layouts, use `cornerLeft` or `cornerRight` to visually merge with container edges.\n * - Avoid using icon buttons for destructive or critical actions unless paired with clear feedback.\n * - **TODO(designer):** Clarify recommended icon sizes and when to use label vs. icon-only.\n *\n * ## Slots\n * | Slot Name | Renders When...      | Purpose                                      |\n * |-----------|---------------------|----------------------------------------------|\n * | (default) | Always              | The icon to display (e.g., `<obi-search>`)   |\n * | label     | If `hasLabel` is set | Optional label text below the icon           |\n *\n * ## Events\n * - Emits a standard `click` event (`onClick` handler in framework wrappers) when activated.\n *\n * ## Best Practices\n * - Ensure icons are clear and universally recognizable.\n * - For accessibility, provide an `aria-label` or descriptive label for the button's action.\n * - When using the progress indicator, avoid showing it for very short actions to prevent visual flicker.\n *\n * ## Example:\n * ```\n * <obc-icon-button variant=\"normal\">\n *   <obi-search></obi-search>\n * </obc-icon-button>\n *\n * <obc-icon-button variant=\"normal\" hasLabel>\n *   <obi-arrow></obi-arrow>\n *   <span slot=\"label\">Next</span>\n * </obc-icon-button>\n * ```\n *\n * @property activated - Whether the button is in an activated (selected/toggled) state.\n *   Visually highlights the button to indicate selection.\n * @property cornerLeft - If true, aligns the button to the left edge and removes left border radius.\n *   Useful for grouping or edge-aligned layouts.\n * @property cornerRight - If true, aligns the button to the right edge and removes right border radius.\n *   Useful for grouping or edge-aligned layouts.\n * @property activeColor - Applies an accent color to the button for emphasis.\n *   Used to visually distinguish active or important actions.\n * @property wide - Increases the button's width for larger touch targets or visual balance.\n * @property disabled - Disables the button, preventing user interaction and dimming its appearance.\n * @property progress - Shows a circular progress indicator overlay when set (0–100).\n *   Use to indicate ongoing actions or loading states.\n *   If undefined, no progress indicator is shown.\n * @property hasLabel - If true, displays a label below the icon using the `label` slot.\n * @property showDivider - If false, and cornerLeft or cornerRight is true, the divider is not shown.\n * @slot - Icon slot (default): Place an icon such as <obi-search> here.\n * @slot label - Optional label shown below the icon when `hasLabel` is true.\n * @fires click - Fired when the button is clicked (if not disabled).\n * @stable\n */\n@customElement('obc-icon-button')\nexport class ObcIconButton extends LitElement {\n  /**\n   * Visual style of the button.\n   * - `normal`: Standard appearance (default).\n   * - `raised`: Elevated with shadow.\n   * - `flat`: Minimal, backgroundless style.\n   */\n  @property({type: String}) variant: IconButtonVariant =\n    IconButtonVariant.normal;\n\n  @property({type: Boolean}) activated = false;\n\n  @property({type: Boolean}) cornerLeft = false;\n\n  @property({type: Boolean}) cornerRight = false;\n\n  @property({type: Boolean}) activeColor = false;\n\n  @property({type: Boolean}) wide = false;\n\n  @property({type: Boolean}) disabled = false;\n\n  @property({type: Number}) progress: undefined | number = undefined;\n\n  @property({type: Boolean}) hasLabel: boolean = false;\n\n  @property({type: Boolean, attribute: false}) showDivider = true;\n\n  get progressSpinner() {\n    if (this.progress === undefined) {\n      return nothing;\n    }\n    if (this.progress === 100) {\n      return html`<div class=\"progress-spinner\">\n        <svg\n          width=\"40\"\n          height=\"40\"\n          viewBox=\"0 0 40 40\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <circle\n            cx=\"20\"\n            cy=\"20\"\n            r=\"18\"\n            stroke=\"#325B9A\"\n            stroke-width=\"4\"\n            fill=\"none\"\n          />\n        </svg>\n      </div>`;\n    }\n    const angleRad = degToRad(this.progress * 0.95 * 3.6);\n    const x = 20 + 18 * Math.sin(angleRad);\n    const y = 20 - 18 * Math.cos(angleRad);\n    const largeArcFlag = angleRad > Math.PI ? 1 : 0;\n    return html`<div class=\"progress-spinner\">\n      <svg\n        width=\"40\"\n        height=\"40\"\n        viewBox=\"0 0 40 40\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <circle\n          cx=\"20\"\n          cy=\"20\"\n          r=\"18\"\n          stroke=\"var(--container-backdrop-color)\"\n          stroke-width=\"4\"\n          fill=\"none\"\n        />\n        <path\n          d=\"M18 2 A18 18 0 ${largeArcFlag} 1 ${x} ${y}\"\n          stroke=\"var(--instrument-enhanced-secondary-color)\"\n          stroke-width=\"4\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </div>`;\n  }\n\n  override render() {\n    return html`\n      <button\n        class=${classMap({\n          wrapper: true,\n          ['variant-' + this.variant]: true,\n          activated: this.activated,\n          'corner-left': this.cornerLeft,\n          'corner-right': this.cornerRight,\n          'active-color': this.activeColor,\n          'has-label': this.hasLabel,\n          wide: this.wide,\n          progress: this.progress !== undefined,\n          'hide-divider': !this.showDivider,\n        })}\n        ?disabled=${this.disabled}\n        part=\"wrapper\"\n      >\n        ${this.progress !== undefined ? this.progressSpinner : nothing}\n        <div class=\"visible-wrapper\" part=\"visible-wrapper\">\n          <div class=\"icon\" part=\"icon\">\n            <slot></slot>\n          </div>\n        </div>\n        ${this.hasLabel\n          ? html`<div class=\"label\" part=\"label\">\n              <slot name=\"label\"></slot>\n            </div>`\n          : nothing}\n      </button>\n    `;\n  }\n\n  static override styles = unsafeCSS(iconStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-icon-button': ObcIconButton;\n  }\n}\n"],"names":["IconButtonVariant"],"mappings":"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"}
+{"version":3,"file":"icon-button.js","sources":["../../../src/components/icon-button/icon-button.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport iconStyle from './icon-button.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {customElement} from '../../decorator.js';\nimport {degToRad} from '../../svghelpers/math.js';\n\n/**\n * The available visual variants for `<obc-icon-button>`.\n * - `normal`: Standard appearance for most use cases.\n * - `raised`: Adds elevation/shadow for prominence.\n * - `flat`: Minimal, backgroundless style for subtle actions.\n * - `integration`: For use in Integration Bar components\n */\nexport enum IconButtonVariant {\n  normal = 'normal',\n  raised = 'raised',\n  flat = 'flat',\n  integration = 'integration',\n}\n\n/**\n * `<obc-icon-button>` – An icon-only or icon-with-label button for quick actions.\n *\n * Provides a compact, visually prominent button that displays an icon (and optionally a label) for triggering actions. Commonly used for toolbars, navigation, or contextual actions where space is limited and a recognizable icon can represent the function.\n *\n * Appears as a circular or rounded button with configurable visual styles, supporting progress indication and various layout adaptations.\n *\n * ## Features\n * - **Variants:**\n *   - `normal` (default): Standard appearance for most use cases.\n *   - `raised`: Adds elevation/shadow for prominence.\n *   - `flat`: Minimal, backgroundless style for subtle actions.\n *   - `integration`: For use in Integration Bar components\n * - **Progress Indicator:**\n *   - Shows a circular progress spinner overlay when the `progress` property is set (0–100). Useful for indicating loading or ongoing actions.\n * - **Label Support:**\n *   - Optionally displays a text label below the icon when `hasLabel` is true and content is provided in the `label` slot.\n * - **Corner Alignment:**\n *   - `cornerLeft` and `cornerRight` adjust the button's border radius and alignment for seamless placement at the start or end of a container.\n * - **Active State:**\n *   - `activated` visually highlights the button as selected or toggled.\n *   - `activeColor` applies an accent color for emphasis.\n * - **Wide Mode:**\n *   - `wide` increases the button's width for easier touch targets or visual balance.\n * - **Disabled State:**\n *   - `disabled` prevents interaction and visually dims the button.\n *\n * ## Usage Guidelines\n * - Use `obc-icon-button` for actions represented by icons, such as toolbars, navigation, or quick-access commands.\n * - Add a label (with `hasLabel` and the `label` slot) when clarity is needed or when icons alone may not be universally understood.\n * - Use the progress indicator for actions that take time, such as uploads or background processes.\n * - Prefer the `normal` variant for most cases; use `raised` to draw attention, and `flat` for less prominent or inline actions.\n * - For grouped or edge-aligned layouts, use `cornerLeft` or `cornerRight` to visually merge with container edges.\n * - Avoid using icon buttons for destructive or critical actions unless paired with clear feedback.\n * - **TODO(designer):** Clarify recommended icon sizes and when to use label vs. icon-only.\n *\n * ## Slots\n * | Slot Name | Renders When...      | Purpose                                      |\n * |-----------|---------------------|----------------------------------------------|\n * | (default) | Always              | The icon to display (e.g., `<obi-search>`)   |\n * | label     | If `hasLabel` is set | Optional label text below the icon           |\n *\n * ## Events\n * - Emits a standard `click` event (`onClick` handler in framework wrappers) when activated.\n *\n * ## Best Practices\n * - Ensure icons are clear and universally recognizable.\n * - For accessibility, provide an `aria-label` or descriptive label for the button's action.\n * - When using the progress indicator, avoid showing it for very short actions to prevent visual flicker.\n *\n * ## Example:\n * ```\n * <obc-icon-button variant=\"normal\">\n *   <obi-search></obi-search>\n * </obc-icon-button>\n *\n * <obc-icon-button variant=\"normal\" hasLabel>\n *   <obi-arrow></obi-arrow>\n *   <span slot=\"label\">Next</span>\n * </obc-icon-button>\n * ```\n *\n * @property activated - Whether the button is in an activated (selected/toggled) state.\n *   Visually highlights the button to indicate selection.\n * @property cornerLeft - If true, aligns the button to the left edge and removes left border radius.\n *   Useful for grouping or edge-aligned layouts.\n * @property cornerRight - If true, aligns the button to the right edge and removes right border radius.\n *   Useful for grouping or edge-aligned layouts.\n * @property activeColor - Applies an accent color to the button for emphasis.\n *   Used to visually distinguish active or important actions.\n * @property wide - Increases the button's width for larger touch targets or visual balance.\n * @property disabled - Disables the button, preventing user interaction and dimming its appearance.\n * @property progress - Shows a circular progress indicator overlay when set (0–100).\n *   Use to indicate ongoing actions or loading states.\n *   If undefined, no progress indicator is shown.\n * @property hasLabel - If true, displays a label below the icon using the `label` slot.\n * @property showDivider - If false, and cornerLeft or cornerRight is true, the divider is not shown.\n * @property ariaLabel - Accessible name forwarded to the inner `<button>`, mapped to the `aria-label` attribute. `aria-labelledby` is not supported: ID references cannot cross the shadow boundary.\n * @slot - Icon slot (default): Place an icon such as <obi-search> here.\n * @slot label - Optional label shown below the icon when `hasLabel` is true.\n * @fires click - Fired when the button is clicked (if not disabled).\n * @stable\n */\n@customElement('obc-icon-button')\nexport class ObcIconButton extends LitElement {\n  /**\n   * Visual style of the button.\n   * - `normal`: Standard appearance (default).\n   * - `raised`: Elevated with shadow.\n   * - `flat`: Minimal, backgroundless style.\n   */\n  @property({type: String}) variant: IconButtonVariant =\n    IconButtonVariant.normal;\n\n  @property({type: Boolean}) activated = false;\n\n  @property({type: Boolean}) cornerLeft = false;\n\n  @property({type: Boolean}) cornerRight = false;\n\n  @property({type: Boolean}) activeColor = false;\n\n  @property({type: Boolean}) wide = false;\n\n  @property({type: Boolean}) disabled = false;\n\n  @property({type: Number}) progress: undefined | number = undefined;\n\n  @property({type: Boolean}) hasLabel: boolean = false;\n\n  @property({type: Boolean, attribute: false}) showDivider = true;\n\n  // Reactive so a consumer swapping the name (Play → Pause) re-renders the shadow button.\n  @property({type: String, attribute: 'aria-label'})\n  override ariaLabel: string | null = null;\n\n  get progressSpinner() {\n    if (this.progress === undefined) {\n      return nothing;\n    }\n    if (this.progress === 100) {\n      return html`<div class=\"progress-spinner\">\n        <svg\n          width=\"40\"\n          height=\"40\"\n          viewBox=\"0 0 40 40\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <circle\n            cx=\"20\"\n            cy=\"20\"\n            r=\"18\"\n            stroke=\"#325B9A\"\n            stroke-width=\"4\"\n            fill=\"none\"\n          />\n        </svg>\n      </div>`;\n    }\n    const angleRad = degToRad(this.progress * 0.95 * 3.6);\n    const x = 20 + 18 * Math.sin(angleRad);\n    const y = 20 - 18 * Math.cos(angleRad);\n    const largeArcFlag = angleRad > Math.PI ? 1 : 0;\n    return html`<div class=\"progress-spinner\">\n      <svg\n        width=\"40\"\n        height=\"40\"\n        viewBox=\"0 0 40 40\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <circle\n          cx=\"20\"\n          cy=\"20\"\n          r=\"18\"\n          stroke=\"var(--container-backdrop-color)\"\n          stroke-width=\"4\"\n          fill=\"none\"\n        />\n        <path\n          d=\"M18 2 A18 18 0 ${largeArcFlag} 1 ${x} ${y}\"\n          stroke=\"var(--instrument-enhanced-secondary-color)\"\n          stroke-width=\"4\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </div>`;\n  }\n\n  override render() {\n    return html`\n      <button\n        class=${classMap({\n          wrapper: true,\n          ['variant-' + this.variant]: true,\n          activated: this.activated,\n          'corner-left': this.cornerLeft,\n          'corner-right': this.cornerRight,\n          'active-color': this.activeColor,\n          'has-label': this.hasLabel,\n          wide: this.wide,\n          progress: this.progress !== undefined,\n          'hide-divider': !this.showDivider,\n        })}\n        ?disabled=${this.disabled}\n        aria-label=${ifDefined(this.ariaLabel ?? undefined)}\n        part=\"wrapper\"\n      >\n        ${this.progress !== undefined ? this.progressSpinner : nothing}\n        <div class=\"visible-wrapper\" part=\"visible-wrapper\">\n          <div class=\"icon\" part=\"icon\">\n            <slot></slot>\n          </div>\n        </div>\n        ${this.hasLabel\n          ? html`<div class=\"label\" part=\"label\">\n              <slot name=\"label\"></slot>\n            </div>`\n          : nothing}\n      </button>\n    `;\n  }\n\n  static override styles = unsafeCSS(iconStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-icon-button': ObcIconButton;\n  }\n}\n"],"names":["IconButtonVariant"],"mappings":"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"}

package/dist/components/table/table.css.js

@@ -424,6 +424,49 @@ const compentStyle = css`* {
         flex-shrink: 0;
       }
 
+/* ---- Hierarchy ---- */
+
+/*
+       * Indent gutter for a hierarchical row. One step per level plus one for
+       * the chevron itself, so a leaf and a group at the same level align.
+       */
+
+:is(:is(.grid-container .grid-row) .grid-cell) .row-expander {
+        --row-indent-step: var(
+          --menu-navigation-components-table-item-icon-size
+        );
+        /* Depth of this row; the row's inline style overrides it. */
+        --row-level: 0;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        flex-shrink: 0;
+        align-self: stretch;
+        width: calc((var(--row-level) + 1) * var(--row-indent-step));
+      }
+
+:is(:is(.grid-container .grid-row) .grid-cell) .row-expander .chevron {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        /* Pointer target floor, and the gutter is only one step wide. */
+        min-width: var(--row-indent-step);
+        min-height: var(--row-indent-step);
+        align-self: stretch;
+        color: var(--on-flat-neutral-color);
+        transition: transform 100ms ease-in-out;
+      }
+
+:is(:is(.grid-container .grid-row) .grid-cell) .row-expander .chevron.expanded {
+        transform: rotate(90deg);
+      }
+
+@media (prefers-reduced-motion: reduce) {
+        :is(:is(.grid-container .grid-row) .grid-cell) .row-expander .chevron {
+          transition: none;
+        }
+      }
+
 .large-icon:is(:is(.grid-container .grid-row) .grid-cell) .icon {
         min-width: var(--menu-navigation-components-table-item-icon-size-large);
         min-height: var(

package/dist/components/table/table.css.js.map

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

package/dist/components/table/table.d.ts

@@ -5,6 +5,7 @@ import { TagColor } from '../tag/tag.js';
 import { ExternalScaleSide, FillMode, FrameStyle, InstrumentState, Priority, ScaleType } from '../../building-blocks/bar-horizontal/bar-horizontal.js';
 import '../table-header-item/table-header-item.js';
 import '../button/button.js';
+import '../../icons/icon-chevron-right-google.js';
 import '../../building-blocks/bar-horizontal/bar-horizontal.js';
 export declare enum ObcTableCellType {
     Regular = "regular",
@@ -95,7 +96,11 @@ export type ObcTableCellData = ObcTableCellDataRegular | ObcTableCellDataButton
 export interface ObcTableRow {
     selected?: boolean;
     id: string;
-    [key: string]: ObcTableCellData | boolean | undefined | string;
+    parentId?: string;
+    level?: number;
+    expandable?: boolean;
+    expanded?: boolean;
+    [key: string]: ObcTableCellData | boolean | undefined | string | number;
 }
 export interface ObcTableColumnUnsortable<T extends ObcTableCellData, S extends ObcTableRow> {
     label: string;
@@ -134,6 +139,10 @@ export type ObcTableSelectionChangeEvent = CustomEvent<{
 export type ObcTableRowClickEvent = CustomEvent<{
     row: ObcTableRow;
 }>;
+export type ObcTableExpandToggleEvent = CustomEvent<{
+    rowId: string;
+    expanded: boolean;
+}>;
 /**
  * `<obc-table>` renders tabular data with configurable columns and cell types.
  *
@@ -146,11 +155,17 @@ export type ObcTableRowClickEvent = CustomEvent<{
  * - Cell rendering variants: `checkbox`, `tag`, `horizontal-bar`, and `button` cell types.
  * - Visual variants: `rowDivider`, `striped`, `narrowHeader`, and `showHeader`.
  * - Sorting support for sortable columns via column definitions.
+ * - Hierarchical rows via `parentId`, `level`, `expandable` and `expanded`.
  *
  * Usage Guidelines
  * - Controlled selection: pass `selectedRowIds` and update it on `selection-change`.
  * - Uncontrolled selection: pass `defaultSelectedRowIds` and listen to `selection-change`.
  * - Use `selectAllAriaLabel` to customize the header checkbox accessibility label.
+ * - Hierarchy is controlled, and flat: pass only the rows that are currently
+ *   visible, each with the `parentId` of its parent row, and drop a collapsed
+ *   group's descendants from `data` on `expand-toggle`. The table draws the
+ *   indent and the chevron, keeps each sibling set sorted within its parent,
+ *   and owns no expansion state of its own.
  *
  * Slots/Content
  * - This component does not expose public slots. Provide content via `data` and `columns`.
@@ -161,6 +176,15 @@ export type ObcTableRowClickEvent = CustomEvent<{
  * - `cell-checkbox-change` fires when a checkbox cell changes.
  * - `cell-tag-click` fires when a tag inside a cell is clicked.
  * - `selection-change` fires when row selection changes (source: `row` or `header`).
+ * - `expand-toggle` fires when a group row's chevron or expand key is used.
+ *
+ * Accessibility
+ * A table with hierarchical rows renders as a
+ * [treegrid](https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/): rows carry
+ * `aria-level`, and group rows `aria-expanded`. Right expands a collapsed
+ * group, Left collapses an expanded one or moves to the parent row. Cell-level
+ * arrow navigation, which the full pattern also specifies, is out of scope —
+ * arrow keys move between rows, matching the flat table.
  *
  * Best Practices
  * - Keep column `key` values stable across renders to avoid selection or sorting resets.
@@ -187,6 +211,7 @@ export type ObcTableRowClickEvent = CustomEvent<{
  * @fires {ObcTableCellCheckboxChangeEvent} cell-checkbox-change - Fired when a cell checkbox is changed.
  * @fires {ObcTableCellTagClickEvent} cell-tag-click - Fired when a tag inside a cell is clicked.
  * @fires {ObcTableSelectionChangeEvent} selection-change - Fired when row selection changes.
+ * @fires {ObcTableExpandToggleEvent} expand-toggle - Fired when a group row is expanded or collapsed.
  * @beta
  */
 export declare class ObcTable extends LitElement {
@@ -204,14 +229,19 @@ export declare class ObcTable extends LitElement {
     private _sortDirection;
     private _selectedRowIds;
     private _previousPositions;
+    private get hasHierarchy();
+    private sortWithinSiblings;
     get sortedData(): ObcTableRow[];
     private _handleSortClick;
     private _handleRowClick;
+    private _handleExpandToggle;
+    private _renderRowExpander;
     private _focusFirstRow;
     private _focusLeftHeaderItem;
     private _focusHeaderByIndex;
     private _handleHeaderKeyDown;
     private _handleRowKeyDown;
+    private _handleRowExpandKey;
     private _getAllPositions;
     private _animateRowChanges;
     private _hasRenderedRows;

package/dist/components/table/table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/components/table/table.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/components/table/table.ts"],"names":[],"mappings":"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"}

package/dist/components/table/table.js

@@ -5,6 +5,7 @@ import { property, state } from "lit/decorators.js";
 import { ObcTableHeaderItemType } from "../table-header-item/table-header-item.js";
 import { classMap } from "lit/directives/class-map.js";
 import "../button/button.js";
+import "../../icons/icon-chevron-right-google.js";
 import { CheckboxStatus } from "../checkbox/checkbox.js";
 import { TagColor } from "../tag/tag.js";
 import "../../building-blocks/bar-horizontal/bar-horizontal.js";
@@ -54,6 +55,41 @@ let ObcTable = class extends LitElement {
     this._previousPositions = [];
     this._hasRenderedRows = false;
   }
+  get hasHierarchy() {
+    return this.data.some(
+      (row) => row.parentId !== void 0 || (row.level ?? 0) > 0 || row.expandable === true
+    );
+  }
+  sortWithinSiblings(rows, compare) {
+    const ids = new Set(rows.map((row) => row.id));
+    const childrenByParent = /* @__PURE__ */ new Map();
+    const roots = [];
+    for (const row of rows) {
+      const parentId = row.parentId;
+      if (parentId !== void 0 && parentId !== row.id && ids.has(parentId)) {
+        const siblings = childrenByParent.get(parentId) ?? [];
+        siblings.push(row);
+        childrenByParent.set(parentId, siblings);
+      } else {
+        roots.push(row);
+      }
+    }
+    const sorted = [];
+    const visited = /* @__PURE__ */ new Set();
+    const visit = (siblings) => {
+      for (const row of [...siblings].sort(compare)) {
+        if (visited.has(row.id)) {
+          continue;
+        }
+        visited.add(row.id);
+        sorted.push(row);
+        visit(childrenByParent.get(row.id) ?? []);
+      }
+    };
+    visit(roots);
+    visit(rows.filter((row) => !visited.has(row.id)));
+    return sorted;
+  }
   get sortedData() {
     if (this._sortByColumnIdx === void 0) {
       return this.data;
@@ -64,8 +100,7 @@ let ObcTable = class extends LitElement {
       return this.data;
     }
     const sortDirection = this._sortDirection;
-    const sortedData = [...this.data];
-    sortedData.sort((a, b) => {
+    const compare = (a, b) => {
       const aValue = a[sortByColumn.key];
       const bValue = b[sortByColumn.key];
       if (sortDirection === "asc") {
@@ -83,7 +118,12 @@ let ObcTable = class extends LitElement {
           a
         );
       }
-    });
+    };
+    if (this.hasHierarchy) {
+      return this.sortWithinSiblings(this.data, compare);
+    }
+    const sortedData = [...this.data];
+    sortedData.sort(compare);
     return sortedData;
   }
   _handleSortClick(column) {
@@ -103,6 +143,38 @@ let ObcTable = class extends LitElement {
       new CustomEvent("row-click", { detail: { row } })
     );
   }
+  _handleExpandToggle(row, expanded) {
+    if (!row.expandable) {
+      return;
+    }
+    this.dispatchEvent(
+      new CustomEvent("expand-toggle", {
+        detail: { rowId: row.id, expanded }
+      })
+    );
+  }
+  _renderRowExpander(row) {
+    if (!this.hasHierarchy) {
+      return nothing;
+    }
+    const level = row.level ?? 0;
+    return html`<span
+      class="row-expander"
+      style="--row-level: ${level}"
+      aria-hidden="true"
+    >
+      ${row.expandable ? html`<span
+            class=${classMap({ chevron: true, expanded: row.expanded ?? false })}
+            @click=${(event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      this._handleExpandToggle(row, !(row.expanded ?? false));
+    }}
+          >
+            <obi-chevron-right-google></obi-chevron-right-google>
+          </span>` : nothing}
+    </span>`;
+  }
   _focusFirstRow() {
     const firstRow = this.renderRoot.querySelector(
       'button[role="row"].grid-row'
@@ -153,6 +225,9 @@ let ObcTable = class extends LitElement {
   }
   _handleRowKeyDown(event) {
     const key = event.key;
+    if (this.hasHierarchy && (key === "ArrowRight" || key === "ArrowLeft") && this._handleRowExpandKey(event, key)) {
+      return;
+    }
     if (key !== "ArrowDown" && key !== "ArrowUp" && key !== "Home" && key !== "End") {
       return;
     }
@@ -195,6 +270,31 @@ let ObcTable = class extends LitElement {
       event.stopPropagation();
     }
   }
+  _handleRowExpandKey(event, key) {
+    const target = event.currentTarget;
+    const rowId = target?.dataset.rowId;
+    const row = this.sortedData.find((candidate) => candidate.id === rowId);
+    if (!row) return false;
+    const expanded = row.expanded ?? false;
+    if (key === "ArrowRight" && row.expandable && !expanded) {
+      this._handleExpandToggle(row, true);
+    } else if (key === "ArrowLeft" && row.expandable && expanded) {
+      this._handleExpandToggle(row, false);
+    } else if (key === "ArrowLeft") {
+      const parent = this.renderRoot.querySelector(
+        `button[role="row"].grid-row[data-row-id="${CSS.escape(
+          row.parentId ?? ""
+        )}"]`
+      );
+      if (!parent) return false;
+      parent.focus();
+    } else {
+      return false;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    return true;
+  }
   _getAllPositions() {
     const rows = Array.from(
       this.renderRoot.querySelectorAll(
@@ -313,7 +413,7 @@ let ObcTable = class extends LitElement {
           --grid-columns-rest: ${selectionColumnCount};
           --selection-column-width: var(--menu-navigation-components-table-item-touch-target-size);
         "
-        role="table"
+        role=${this.hasHierarchy ? "treegrid" : "table"}
       >
         ${this.showHeader ? html`
               <div class="grid-header" role="row">
@@ -410,8 +510,15 @@ let ObcTable = class extends LitElement {
                   data-row-id=${row.id}
                   style="grid-row: ${rowIndex + 1}"
                   part="row"
+                  aria-level=${ifDefined(
+          this.hasHierarchy ? (row.level ?? 0) + 1 : void 0
+        )}
+                  aria-expanded=${ifDefined(
+          row.expandable ? row.expanded ?? false : void 0
+        )}
                 >
-                  ${map(effectiveColumns, (col) => {
+                  ${map(effectiveColumns, (col, colIndex) => {
+          const expander = colIndex === (this.selectable ? 1 : 0) ? this._renderRowExpander(row) : nothing;
           if (this.selectable && col.key === "__selection__") {
             const checked = this._selectedRowIds.has(row.id);
             return html`<div
@@ -432,7 +539,9 @@ let ObcTable = class extends LitElement {
           }
           const value = row[col.key];
           if (value === void 0) {
-            return html`<div class="grid-cell" role="cell"></div>`;
+            return html`<div class="grid-cell" role="cell">
+                        ${expander}
+                      </div>`;
           }
           if (col.renderCell) {
             return html`<div
@@ -440,7 +549,7 @@ let ObcTable = class extends LitElement {
                         role="cell"
                         part=${ifDefined(value.cssPart)}
                       >
-                        ${col.renderCell(
+                        ${expander}${col.renderCell(
               value,
               row,
               row.id
@@ -450,7 +559,8 @@ let ObcTable = class extends LitElement {
             return this._renderCell(
               value,
               row,
-              col
+              col,
+              expander
             );
           }
         })}
@@ -568,7 +678,7 @@ let ObcTable = class extends LitElement {
     const nextSelection = status === CheckboxStatus.checked ? /* @__PURE__ */ new Set() : new Set(rowIds);
     this._applySelectionChange(nextSelection, "header");
   }
-  _renderCell(value, row, column) {
+  _renderCell(value, row, column, expander = nothing) {
     if (value.type === "regular") {
       return html`<div
         class=${classMap({
@@ -584,7 +694,7 @@ let ObcTable = class extends LitElement {
         role="cell"
         part=${ifDefined(cssPart(value, "cell"))}
       >
-        ${value.icon3 ? html`<span class="icon" part=${ifDefined(cssPart(value, "icon3"))}
+        ${expander}${value.icon3 ? html`<span class="icon" part=${ifDefined(cssPart(value, "icon3"))}
               >${value.icon3}</span
             >` : nothing}
         ${value.icon2 ? html`<span class="icon" part=${ifDefined(cssPart(value, "icon2"))}
@@ -605,6 +715,7 @@ let ObcTable = class extends LitElement {
         class="grid-cell button ${column.dividerRight ? "divider-right" : ""}"
         role="cell"
       >
+        ${expander}
         <obc-button
           variant="normal"
           fullWidth
@@ -636,6 +747,7 @@ let ObcTable = class extends LitElement {
         role="cell"
         part=${ifDefined(cssPart(value, "cell"))}
       >
+        ${expander}
         <obc-checkbox
           .status=${value.status ?? CheckboxStatus.unchecked}
           .disabled=${value.disabled ?? false}
@@ -676,7 +788,7 @@ let ObcTable = class extends LitElement {
         role="cell"
         part=${ifDefined(cssPart(value, "cell"))}
       >
-        ${visibleTags.map((tag) => {
+        ${expander}${visibleTags.map((tag) => {
         const hasIcon = tag.hasIcon ?? tag.icon !== void 0;
         return html`<obc-tag
             .label=${tag.label}
@@ -711,6 +823,7 @@ let ObcTable = class extends LitElement {
         role="cell"
         part=${ifDefined(cssPart(value, "cell"))}
       >
+        ${expander}
         <obc-bar-horizontal
           .minValue=${value.minValue ?? 0}
           .maxValue=${value.maxValue ?? 100}