@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.144 → 2.0.0-next.145

package/dist/components/checkbox-item/checkbox-item.d.ts

@@ -2,6 +2,7 @@ import { LitElement } from 'lit';
 import { CheckboxStatus } from '../checkbox/checkbox.js';
 import '../checkbox/checkbox.js';
 import '../../icons/icon-chevron-right-google.js';
+import '../../icons/icon-chevron-down-google.js';
 export declare enum ObcCheckboxItemState {
     enabled = "enabled",
     disabled = "disabled"
@@ -10,76 +11,104 @@ export declare enum ObcCheckboxItemHoverStyle {
     touchTarget = "touch-target",
     visualTarget = "visual-target"
 }
+export type ObcCheckboxItemExpandToggleEvent = CustomEvent<boolean>;
 /**
- * `<obc-checkbox-item>` – A list-item wrapper for `<obc-checkbox>` with label
- * and optional nested indentation affordances.
+ * `<obc-checkbox-item>` – A list row that pairs `<obc-checkbox>` with a label,
+ * an optional description, and hierarchy affordances for nested lists.
  *
  * ### Overview
- * Combines checkbox interaction with a row-like container used in menus and
- * hierarchical selection lists. The component proxies checkbox state changes,
- * supports touch-target or visual-target interaction behavior, and can render
- * nested structure indicators.
+ * The row is the touch target: clicking anywhere on it toggles the checkbox,
+ * except on the chevron button, which only asks to expand or collapse. Depth
+ * is a number (`level`); the row indents itself so a flat sequence of rows
+ * reads as a tree. `<obc-checkbox-list>` builds on this to hide the rows
+ * under a collapsed parent.
  *
  * ### Features
- * - Three checkbox statuses: `unchecked`, `checked`, `mixed`.
- * - Item state control: `enabled` or `disabled`.
- * - Two hover/focus interaction modes: `touch-target` and `visual-target`.
- * - Optional nested layout controls via `isNested`, `isLevel1`, `isLevel2`.
- * - Forwards `aria-describedby` to the inner checkbox for assistive context.
- *
- * ### Variants
- * - **Nested level 1:** Chevron icon is shown.
- * - **Nested level 2:** Chevron slot is reserved and nested spacer is shown.
+ * - Three statuses: `unchecked`, `checked`, `mixed`.
+ * - `touch-target` or `visual-target` hover treatment.
+ * - `level` indentation: level 1 reserves the chevron slot, each further
+ *   level adds a spacer.
+ * - `expandable` rows show a chevron button that fires `expand-toggle`; the
+ *   host owns `expanded`.
+ * - Optional `description` line under the label.
+ * - Forwards `aria-describedby` to the inner checkbox.
  *
  * ### Usage Guidelines
- * - Use for checkbox rows that require text labels and optional hierarchy.
- * - Keep `status` as the source of truth for checked/mixed/unchecked value.
- * - Use `state="disabled"` or `disabled` to lock interaction.
- * - Prefer `hoverStyle="touch-target"` for standard list behavior.
- *
- * ### Slots / Content
- * - No named slots. Label content is provided through the `label` property.
- *
- * ### Events
- * - `change` – Fired when status changes (from row click or inner checkbox).
- *   **detail:** `{ status, disabled }`
+ * - Keep `status` as the source of truth; update it from the `change` event.
+ * - Set `expanded` in response to `expand-toggle` — the row never flips it
+ *   itself, so a parent (or `<obc-checkbox-list>`) can veto or persist it.
+ * - Use `level` 0 for a plain list; start at 1 when any row in the list is
+ *   expandable so chevrons and checkboxes line up.
+ * - Prefer `hoverStyle="touch-target"` for standard list behaviour.
  *
- * ### Best Practices
- * - Provide non-empty `label` for accessible naming.
- * - Use `aria-describedby` when additional contextual text exists outside.
- * - For deep hierarchies, use `isNested` with `isLevel1` / `isLevel2`
- *   consistently to preserve spacing and alignment.
+ * ### Accessibility
+ * The checkbox and the chevron are separate controls in the natural tab
+ * order. The chevron is a native button named by the row's label, with the
+ * state in `aria-expanded`, following the WAI-ARIA checkbox and disclosure
+ * button patterns.
  *
  * ### Example
  * ```html
  * <obc-checkbox-item
+ *   level="1"
+ *   expandable
+ *   expanded
  *   status="mixed"
- *   label="Include archived items"
- *   hoverStyle="touch-target"
+ *   label="Reports"
+ * ></obc-checkbox-item>
+ * <obc-checkbox-item
+ *   level="2"
+ *   status="checked"
+ *   label="Monthly"
+ *   description="Sent on the 1st"
  * ></obc-checkbox-item>
  * ```
  *
- * @availableWhen isLevel1 isNested==true || hoverStyle==visual-target
- * @availableWhen isLevel2 isNested==true || hoverStyle==visual-target
- * @slot - No named slots.
+ * @property status - Checkbox status: `unchecked`, `checked` or `mixed`.
+ * @property state - Item state: `enabled` or `disabled`.
+ * @property disabled - Disables the row and the inner checkbox.
+ * @property label - Text label; also the checkbox's accessible name.
+ * @property description - Secondary line under the label; hidden when empty.
+ * @property level - Depth in a nested list. 0 is a plain row; 1 reserves the chevron slot; each level above 1 adds a spacer.
+ * @property expandable - Shows the chevron button that fires `expand-toggle`.
+ * @property expanded - Whether the row's children are shown; drives the chevron direction and `aria-expanded`.
+ * @availableWhen expanded expandable==true
+ * @property hoverStyle - Which box shows hover and focus: the whole row (`touch-target`) or the checkbox (`visual-target`).
+ * @property ariaDescribedBy - Forwarded to the inner checkbox as `aria-describedby`.
  * @fires {ObcCheckboxChangeEvent} change - Emitted when status changes.
+ * @fires {ObcCheckboxItemExpandToggleEvent} expand-toggle - Emitted when the chevron is activated; detail is the next `expanded` value. Bubbles and is composed.
  * @stable
  */
 export declare class ObcCheckboxItem extends LitElement {
+    /** Checkbox status: `unchecked`, `checked` or `mixed`. */
     status: CheckboxStatus;
+    /** Item state: `enabled` or `disabled`. */
     state: ObcCheckboxItemState;
+    /** Disables the row and the inner checkbox. */
     disabled: boolean;
+    /** Text label; also the checkbox's accessible name. */
     label: string;
-    isNested: boolean;
-    isLevel1: boolean;
-    isLevel2: boolean;
+    /** Secondary line under the label; hidden when empty. */
+    description: string;
+    /** Depth in a nested list. 0 is a plain row; 1 reserves the chevron slot; each level above 1 adds a spacer. */
+    level: number;
+    /** Shows the chevron button that fires `expand-toggle`. */
+    expandable: boolean;
+    /** Whether the row's children are shown; drives the chevron direction and `aria-expanded`. */
+    expanded: boolean;
+    /** Which box shows hover and focus: the whole row (`touch-target`) or the checkbox (`visual-target`). */
     hoverStyle: ObcCheckboxItemHoverStyle;
+    /** Forwarded to the inner checkbox as `aria-describedby`. */
     ariaDescribedBy: string;
     private checkboxElement?;
+    private chevronButton?;
+    private get isDisabled();
     private toggleStatusFromItem;
     private handleItemClick;
+    private handleChevronClick;
     private handleCheckboxChange;
     focus(options?: FocusOptions): void;
+    private renderChevron;
     render(): import('lit-html').TemplateResult<1>;
     static styles: import('lit').CSSResult;
 }

package/dist/components/checkbox-item/checkbox-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-item.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox-item/checkbox-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAMzD,OAAO,yBAAyB,CAAC;AACjC,OAAO,0CAA0C,CAAC;AAClD,OAAO,EAEL,cAAc,EAEf,MAAM,yBAAyB,CAAC;AAEjC,oBAAY,oBAAoB;IAC9B,OAAO,YAAY;IACnB,QAAQ,aAAa;CACtB;AAED,oBAAY,yBAAyB;IACnC,WAAW,iBAAiB;IAC5B,YAAY,kBAAkB;CAC/B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,qBACa,eAAgB,SAAQ,UAAU;IACnB,MAAM,EAAE,cAAc,CAA4B;IAElD,KAAK,EAAE,oBAAoB,CACtB;IAEJ,QAAQ,UAAS;IAElB,KAAK,SAAM;IAEK,QAAQ,UAAS;IAEjB,QAAQ,UAAS;IAEjB,QAAQ,UAAS;IAEjC,UAAU,EAAE,yBAAyB,CACvB;IAGxC,eAAe,SAAM;IAEE,OAAO,CAAC,eAAe,CAAC,CAAc;IAE7D,OAAO,CAAC,oBAAoB;IAoB5B,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,oBAAoB;IAWZ,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAI1C,MAAM;IAuDf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}
+{"version":3,"file":"checkbox-item.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox-item/checkbox-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAOzD,OAAO,yBAAyB,CAAC;AACjC,OAAO,0CAA0C,CAAC;AAClD,OAAO,yCAAyC,CAAC;AACjD,OAAO,EAEL,cAAc,EAEf,MAAM,yBAAyB,CAAC;AAEjC,oBAAY,oBAAoB;IAC9B,OAAO,YAAY;IACnB,QAAQ,aAAa;CACtB;AAED,oBAAY,yBAAyB;IACnC,WAAW,iBAAiB;IAC5B,YAAY,kBAAkB;CAC/B;AAED,MAAM,MAAM,gCAAgC,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;AAEpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkEG;AACH,qBACa,eAAgB,SAAQ,UAAU;IACnB,MAAM,EAAE,cAAc,CAA4B;IAElD,KAAK,EAAE,oBAAoB,CACtB;IAEJ,QAAQ,UAAS;IAElB,KAAK,SAAM;IAEX,WAAW,SAAM;IAEF,KAAK,SAAK;IAET,UAAU,UAAS;IAEnB,QAAQ,UAAS;IAEjC,UAAU,EAAE,yBAAyB,CACvB;IAGxC,eAAe,SAAM;IAEE,OAAO,CAAC,eAAe,CAAC,CAAc;IAEnC,OAAO,CAAC,aAAa,CAAC,CAAc;IAE9D,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,CAAC,oBAAoB;IAiB5B,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,kBAAkB;IAW1B,OAAO,CAAC,oBAAoB;IAWZ,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAInD,OAAO,CAAC,aAAa;IAsBZ,MAAM;IAuDf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}

package/dist/components/checkbox-item/checkbox-item.js

@@ -2,10 +2,12 @@ import { unsafeCSS, LitElement, nothing, html } from "lit";
 import { property, query } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
 import { customElement } from "../../decorator.js";
 import componentStyle from "./checkbox-item.css.js";
 import { CheckboxStatus, CheckboxState } from "../checkbox/checkbox.js";
 import "../../icons/icon-chevron-right-google.js";
+import "../../icons/icon-chevron-down-google.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -33,14 +35,17 @@ let ObcCheckboxItem = class extends LitElement {
     this.state = "enabled";
     this.disabled = false;
     this.label = "";
-    this.isNested = false;
-    this.isLevel1 = false;
-    this.isLevel2 = false;
+    this.description = "";
+    this.level = 0;
+    this.expandable = false;
+    this.expanded = false;
     this.hoverStyle = "touch-target";
     this.ariaDescribedBy = "";
   }
+  get isDisabled() {
+    return this.disabled || this.state === "disabled";
+  }
   toggleStatusFromItem() {
-    const isDisabled = this.disabled || this.state === "disabled";
     if (this.status === CheckboxStatus.checked) {
       this.status = CheckboxStatus.unchecked;
     } else {
@@ -50,18 +55,28 @@ let ObcCheckboxItem = class extends LitElement {
       new CustomEvent("change", {
         detail: {
           status: this.status,
-          disabled: isDisabled
+          disabled: this.isDisabled
         }
       })
     );
   }
   handleItemClick(event) {
-    if (this.disabled || this.state === "disabled") return;
+    if (this.isDisabled) return;
     const path = event.composedPath();
-    const checkboxElement = this.checkboxElement;
-    if (checkboxElement && path.includes(checkboxElement)) return;
+    if (this.checkboxElement && path.includes(this.checkboxElement)) return;
+    if (this.chevronButton && path.includes(this.chevronButton)) return;
     this.toggleStatusFromItem();
   }
+  handleChevronClick(event) {
+    event.stopPropagation();
+    this.dispatchEvent(
+      new CustomEvent("expand-toggle", {
+        detail: !this.expanded,
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
   handleCheckboxChange(event) {
     const checkboxEvent = event;
     this.status = checkboxEvent.detail.status;
@@ -74,12 +89,30 @@ let ObcCheckboxItem = class extends LitElement {
   focus(options) {
     this.checkboxElement?.focus(options);
   }
+  renderChevron() {
+    if (!this.expandable) return nothing;
+    return html`<button
+      type="button"
+      class="chevron-button"
+      aria-expanded=${this.expanded ? "true" : "false"}
+      aria-label=${ifDefined(this.label.trim() || void 0)}
+      ?disabled=${this.isDisabled}
+      @click=${this.handleChevronClick}
+    >
+      <span class="chevron-visible">
+        ${this.expanded ? html`<obi-chevron-down-google
+              class="chevron-icon"
+            ></obi-chevron-down-google>` : html`<obi-chevron-right-google
+              class="chevron-icon"
+            ></obi-chevron-right-google>`}
+      </span>
+    </button>`;
+  }
   render() {
-    const isDisabled = this.disabled || this.state === "disabled";
+    const isDisabled = this.isDisabled;
     const hasCheckboxHoverEffects = !(this.hoverStyle === "touch-target" && !isDisabled);
-    const shouldRenderNestedSpacer = this.isNested && this.isLevel2;
-    const shouldRenderChevronContainer = this.isNested;
-    const shouldRenderChevronIcon = this.isNested && this.isLevel1;
+    const depth = Math.max(0, Math.floor(this.level) - 1);
+    const hasChevronSlot = this.level >= 1 || this.expandable;
     const checkboxAriaLabel = this.label.trim().length > 0 ? this.label : void 0;
     return html`
       <div
@@ -87,19 +120,18 @@ let ObcCheckboxItem = class extends LitElement {
       "checkbox-item-container": true,
       [`status-${this.status}`]: true,
       [`hover-style-${this.hoverStyle}`]: true,
-      "is-nested": this.isNested,
-      "is-level-1": this.isLevel1,
-      "is-level-2": this.isLevel2,
+      "is-nested": hasChevronSlot,
+      "has-description": this.description !== "",
       disabled: isDisabled
     })}
         @click=${this.handleItemClick}
       >
-        ${shouldRenderChevronContainer ? html`<div class="chevron-container" aria-hidden="true">
-              ${shouldRenderChevronIcon ? html`<obi-chevron-right-google
-                    class="chevron-icon"
-                  ></obi-chevron-right-google>` : nothing}
-            </div>` : nothing}
-        ${shouldRenderNestedSpacer ? html`<div class="nested-spacer" aria-hidden="true"></div>` : nothing}
+        ${depth > 0 ? html`<div
+              class="nested-spacer"
+              aria-hidden="true"
+              style=${styleMap({ "--checkbox-item-depth": String(depth) })}
+            ></div>` : nothing}
+        ${hasChevronSlot ? html`<div class="chevron-container">${this.renderChevron()}</div>` : nothing}
         <div class="content-container">
           <obc-checkbox
             .status=${this.status}
@@ -112,6 +144,9 @@ let ObcCheckboxItem = class extends LitElement {
           ></obc-checkbox>
           <div class="checkbox-label-container">
             <span class="checkbox-label">${this.label}</span>
+            ${this.description ? html`<span class="checkbox-description"
+                  >${this.description}</span
+                >` : nothing}
           </div>
         </div>
       </div>
@@ -132,14 +167,17 @@ __decorateClass([
   property({ type: String })
 ], ObcCheckboxItem.prototype, "label", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true })
-], ObcCheckboxItem.prototype, "isNested", 2);
+  property({ type: String })
+], ObcCheckboxItem.prototype, "description", 2);
+__decorateClass([
+  property({ type: Number, reflect: true })
+], ObcCheckboxItem.prototype, "level", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], ObcCheckboxItem.prototype, "isLevel1", 2);
+], ObcCheckboxItem.prototype, "expandable", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], ObcCheckboxItem.prototype, "isLevel2", 2);
+], ObcCheckboxItem.prototype, "expanded", 2);
 __decorateClass([
   property({ type: String })
 ], ObcCheckboxItem.prototype, "hoverStyle", 2);
@@ -149,6 +187,9 @@ __decorateClass([
 __decorateClass([
   query("obc-checkbox")
 ], ObcCheckboxItem.prototype, "checkboxElement", 2);
+__decorateClass([
+  query(".chevron-button")
+], ObcCheckboxItem.prototype, "chevronButton", 2);
 ObcCheckboxItem = __decorateClass([
   customElement("obc-checkbox-item")
 ], ObcCheckboxItem);

package/dist/components/checkbox-item/checkbox-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-item.js","sources":["../../../src/components/checkbox-item/checkbox-item.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {customElement} from '../../decorator.js';\nimport componentStyle from './checkbox-item.css?inline';\nimport '../checkbox/checkbox.js';\nimport '../../icons/icon-chevron-right-google.js';\nimport {\n  CheckboxState,\n  CheckboxStatus,\n  type ObcCheckboxChangeEvent,\n} from '../checkbox/checkbox.js';\n\nexport enum ObcCheckboxItemState {\n  enabled = 'enabled',\n  disabled = 'disabled',\n}\n\nexport enum ObcCheckboxItemHoverStyle {\n  touchTarget = 'touch-target',\n  visualTarget = 'visual-target',\n}\n\n/**\n * `<obc-checkbox-item>` – A list-item wrapper for `<obc-checkbox>` with label\n * and optional nested indentation affordances.\n *\n * ### Overview\n * Combines checkbox interaction with a row-like container used in menus and\n * hierarchical selection lists. The component proxies checkbox state changes,\n * supports touch-target or visual-target interaction behavior, and can render\n * nested structure indicators.\n *\n * ### Features\n * - Three checkbox statuses: `unchecked`, `checked`, `mixed`.\n * - Item state control: `enabled` or `disabled`.\n * - Two hover/focus interaction modes: `touch-target` and `visual-target`.\n * - Optional nested layout controls via `isNested`, `isLevel1`, `isLevel2`.\n * - Forwards `aria-describedby` to the inner checkbox for assistive context.\n *\n * ### Variants\n * - **Nested level 1:** Chevron icon is shown.\n * - **Nested level 2:** Chevron slot is reserved and nested spacer is shown.\n *\n * ### Usage Guidelines\n * - Use for checkbox rows that require text labels and optional hierarchy.\n * - Keep `status` as the source of truth for checked/mixed/unchecked value.\n * - Use `state=\"disabled\"` or `disabled` to lock interaction.\n * - Prefer `hoverStyle=\"touch-target\"` for standard list behavior.\n *\n * ### Slots / Content\n * - No named slots. Label content is provided through the `label` property.\n *\n * ### Events\n * - `change` – Fired when status changes (from row click or inner checkbox).\n *   **detail:** `{ status, disabled }`\n *\n * ### Best Practices\n * - Provide non-empty `label` for accessible naming.\n * - Use `aria-describedby` when additional contextual text exists outside.\n * - For deep hierarchies, use `isNested` with `isLevel1` / `isLevel2`\n *   consistently to preserve spacing and alignment.\n *\n * ### Example\n * ```html\n * <obc-checkbox-item\n *   status=\"mixed\"\n *   label=\"Include archived items\"\n *   hoverStyle=\"touch-target\"\n * ></obc-checkbox-item>\n * ```\n *\n * @availableWhen isLevel1 isNested==true || hoverStyle==visual-target\n * @availableWhen isLevel2 isNested==true || hoverStyle==visual-target\n * @slot - No named slots.\n * @fires {ObcCheckboxChangeEvent} change - Emitted when status changes.\n * @stable\n */\n@customElement('obc-checkbox-item')\nexport class ObcCheckboxItem extends LitElement {\n  @property({type: String}) status: CheckboxStatus = CheckboxStatus.unchecked;\n\n  @property({type: String}) state: ObcCheckboxItemState =\n    ObcCheckboxItemState.enabled;\n\n  @property({type: Boolean}) disabled = false;\n\n  @property({type: String}) label = '';\n\n  @property({type: Boolean, reflect: true}) isNested = false;\n\n  @property({type: Boolean, reflect: true}) isLevel1 = false;\n\n  @property({type: Boolean, reflect: true}) isLevel2 = false;\n\n  @property({type: String}) hoverStyle: ObcCheckboxItemHoverStyle =\n    ObcCheckboxItemHoverStyle.touchTarget;\n\n  @property({type: String, attribute: 'aria-describedby', reflect: true})\n  ariaDescribedBy = '';\n\n  @query('obc-checkbox') private checkboxElement?: HTMLElement;\n\n  private toggleStatusFromItem() {\n    const isDisabled =\n      this.disabled || this.state === ObcCheckboxItemState.disabled;\n\n    if (this.status === CheckboxStatus.checked) {\n      this.status = CheckboxStatus.unchecked;\n    } else {\n      this.status = CheckboxStatus.checked;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: {\n          status: this.status,\n          disabled: isDisabled,\n        },\n      })\n    );\n  }\n\n  private handleItemClick(event: MouseEvent) {\n    if (this.disabled || this.state === ObcCheckboxItemState.disabled) return;\n\n    const path = event.composedPath();\n    const checkboxElement = this.checkboxElement;\n    if (checkboxElement && path.includes(checkboxElement)) return;\n\n    this.toggleStatusFromItem();\n  }\n\n  private handleCheckboxChange(event: Event) {\n    const checkboxEvent = event as ObcCheckboxChangeEvent;\n    this.status = checkboxEvent.detail.status;\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: checkboxEvent.detail,\n      })\n    );\n  }\n\n  public override focus(options?: FocusOptions): void {\n    this.checkboxElement?.focus(options);\n  }\n\n  override render() {\n    const isDisabled =\n      this.disabled || this.state === ObcCheckboxItemState.disabled;\n    const hasCheckboxHoverEffects = !(\n      this.hoverStyle === ObcCheckboxItemHoverStyle.touchTarget && !isDisabled\n    );\n    const shouldRenderNestedSpacer = this.isNested && this.isLevel2;\n    const shouldRenderChevronContainer = this.isNested;\n    const shouldRenderChevronIcon = this.isNested && this.isLevel1;\n    const checkboxAriaLabel =\n      this.label.trim().length > 0 ? this.label : undefined;\n\n    return html`\n      <div\n        class=${classMap({\n          'checkbox-item-container': true,\n          [`status-${this.status}`]: true,\n          [`hover-style-${this.hoverStyle}`]: true,\n          'is-nested': this.isNested,\n          'is-level-1': this.isLevel1,\n          'is-level-2': this.isLevel2,\n          disabled: isDisabled,\n        })}\n        @click=${this.handleItemClick}\n      >\n        ${shouldRenderChevronContainer\n          ? html`<div class=\"chevron-container\" aria-hidden=\"true\">\n              ${shouldRenderChevronIcon\n                ? html`<obi-chevron-right-google\n                    class=\"chevron-icon\"\n                  ></obi-chevron-right-google>`\n                : nothing}\n            </div>`\n          : nothing}\n        ${shouldRenderNestedSpacer\n          ? html`<div class=\"nested-spacer\" aria-hidden=\"true\"></div>`\n          : nothing}\n        <div class=\"content-container\">\n          <obc-checkbox\n            .status=${this.status}\n            .state=${CheckboxState.enabled}\n            .disabled=${isDisabled}\n            .hasHoverEffects=${hasCheckboxHoverEffects}\n            aria-label=${ifDefined(checkboxAriaLabel)}\n            aria-describedby=${ifDefined(this.ariaDescribedBy || undefined)}\n            @change=${this.handleCheckboxChange}\n          ></obc-checkbox>\n          <div class=\"checkbox-label-container\">\n            <span class=\"checkbox-label\">${this.label}</span>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-checkbox-item': ObcCheckboxItem;\n  }\n}\n"],"names":["ObcCheckboxItemState","ObcCheckboxItemHoverStyle"],"mappings":"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"}
+{"version":3,"file":"checkbox-item.js","sources":["../../../src/components/checkbox-item/checkbox-item.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {styleMap} from 'lit/directives/style-map.js';\nimport {customElement} from '../../decorator.js';\nimport componentStyle from './checkbox-item.css?inline';\nimport '../checkbox/checkbox.js';\nimport '../../icons/icon-chevron-right-google.js';\nimport '../../icons/icon-chevron-down-google.js';\nimport {\n  CheckboxState,\n  CheckboxStatus,\n  type ObcCheckboxChangeEvent,\n} from '../checkbox/checkbox.js';\n\nexport enum ObcCheckboxItemState {\n  enabled = 'enabled',\n  disabled = 'disabled',\n}\n\nexport enum ObcCheckboxItemHoverStyle {\n  touchTarget = 'touch-target',\n  visualTarget = 'visual-target',\n}\n\nexport type ObcCheckboxItemExpandToggleEvent = CustomEvent<boolean>;\n\n/**\n * `<obc-checkbox-item>` – A list row that pairs `<obc-checkbox>` with a label,\n * an optional description, and hierarchy affordances for nested lists.\n *\n * ### Overview\n * The row is the touch target: clicking anywhere on it toggles the checkbox,\n * except on the chevron button, which only asks to expand or collapse. Depth\n * is a number (`level`); the row indents itself so a flat sequence of rows\n * reads as a tree. `<obc-checkbox-list>` builds on this to hide the rows\n * under a collapsed parent.\n *\n * ### Features\n * - Three statuses: `unchecked`, `checked`, `mixed`.\n * - `touch-target` or `visual-target` hover treatment.\n * - `level` indentation: level 1 reserves the chevron slot, each further\n *   level adds a spacer.\n * - `expandable` rows show a chevron button that fires `expand-toggle`; the\n *   host owns `expanded`.\n * - Optional `description` line under the label.\n * - Forwards `aria-describedby` to the inner checkbox.\n *\n * ### Usage Guidelines\n * - Keep `status` as the source of truth; update it from the `change` event.\n * - Set `expanded` in response to `expand-toggle` — the row never flips it\n *   itself, so a parent (or `<obc-checkbox-list>`) can veto or persist it.\n * - Use `level` 0 for a plain list; start at 1 when any row in the list is\n *   expandable so chevrons and checkboxes line up.\n * - Prefer `hoverStyle=\"touch-target\"` for standard list behaviour.\n *\n * ### Accessibility\n * The checkbox and the chevron are separate controls in the natural tab\n * order. The chevron is a native button named by the row's label, with the\n * state in `aria-expanded`, following the WAI-ARIA checkbox and disclosure\n * button patterns.\n *\n * ### Example\n * ```html\n * <obc-checkbox-item\n *   level=\"1\"\n *   expandable\n *   expanded\n *   status=\"mixed\"\n *   label=\"Reports\"\n * ></obc-checkbox-item>\n * <obc-checkbox-item\n *   level=\"2\"\n *   status=\"checked\"\n *   label=\"Monthly\"\n *   description=\"Sent on the 1st\"\n * ></obc-checkbox-item>\n * ```\n *\n * @property status - Checkbox status: `unchecked`, `checked` or `mixed`.\n * @property state - Item state: `enabled` or `disabled`.\n * @property disabled - Disables the row and the inner checkbox.\n * @property label - Text label; also the checkbox's accessible name.\n * @property description - Secondary line under the label; hidden when empty.\n * @property level - Depth in a nested list. 0 is a plain row; 1 reserves the chevron slot; each level above 1 adds a spacer.\n * @property expandable - Shows the chevron button that fires `expand-toggle`.\n * @property expanded - Whether the row's children are shown; drives the chevron direction and `aria-expanded`.\n * @availableWhen expanded expandable==true\n * @property hoverStyle - Which box shows hover and focus: the whole row (`touch-target`) or the checkbox (`visual-target`).\n * @property ariaDescribedBy - Forwarded to the inner checkbox as `aria-describedby`.\n * @fires {ObcCheckboxChangeEvent} change - Emitted when status changes.\n * @fires {ObcCheckboxItemExpandToggleEvent} expand-toggle - Emitted when the chevron is activated; detail is the next `expanded` value. Bubbles and is composed.\n * @stable\n */\n@customElement('obc-checkbox-item')\nexport class ObcCheckboxItem extends LitElement {\n  @property({type: String}) status: CheckboxStatus = CheckboxStatus.unchecked;\n\n  @property({type: String}) state: ObcCheckboxItemState =\n    ObcCheckboxItemState.enabled;\n\n  @property({type: Boolean}) disabled = false;\n\n  @property({type: String}) label = '';\n\n  @property({type: String}) description = '';\n\n  @property({type: Number, reflect: true}) level = 0;\n\n  @property({type: Boolean, reflect: true}) expandable = false;\n\n  @property({type: Boolean, reflect: true}) expanded = false;\n\n  @property({type: String}) hoverStyle: ObcCheckboxItemHoverStyle =\n    ObcCheckboxItemHoverStyle.touchTarget;\n\n  @property({type: String, attribute: 'aria-describedby', reflect: true})\n  ariaDescribedBy = '';\n\n  @query('obc-checkbox') private checkboxElement?: HTMLElement;\n\n  @query('.chevron-button') private chevronButton?: HTMLElement;\n\n  private get isDisabled(): boolean {\n    return this.disabled || this.state === ObcCheckboxItemState.disabled;\n  }\n\n  private toggleStatusFromItem() {\n    if (this.status === CheckboxStatus.checked) {\n      this.status = CheckboxStatus.unchecked;\n    } else {\n      this.status = CheckboxStatus.checked;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: {\n          status: this.status,\n          disabled: this.isDisabled,\n        },\n      })\n    );\n  }\n\n  private handleItemClick(event: MouseEvent) {\n    if (this.isDisabled) return;\n\n    const path = event.composedPath();\n    if (this.checkboxElement && path.includes(this.checkboxElement)) return;\n    if (this.chevronButton && path.includes(this.chevronButton)) return;\n\n    this.toggleStatusFromItem();\n  }\n\n  private handleChevronClick(event: MouseEvent) {\n    event.stopPropagation();\n    this.dispatchEvent(\n      new CustomEvent<boolean>('expand-toggle', {\n        detail: !this.expanded,\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private handleCheckboxChange(event: Event) {\n    const checkboxEvent = event as ObcCheckboxChangeEvent;\n    this.status = checkboxEvent.detail.status;\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: checkboxEvent.detail,\n      })\n    );\n  }\n\n  public override focus(options?: FocusOptions): void {\n    this.checkboxElement?.focus(options);\n  }\n\n  private renderChevron() {\n    if (!this.expandable) return nothing;\n    return html`<button\n      type=\"button\"\n      class=\"chevron-button\"\n      aria-expanded=${this.expanded ? 'true' : 'false'}\n      aria-label=${ifDefined(this.label.trim() || undefined)}\n      ?disabled=${this.isDisabled}\n      @click=${this.handleChevronClick}\n    >\n      <span class=\"chevron-visible\">\n        ${this.expanded\n          ? html`<obi-chevron-down-google\n              class=\"chevron-icon\"\n            ></obi-chevron-down-google>`\n          : html`<obi-chevron-right-google\n              class=\"chevron-icon\"\n            ></obi-chevron-right-google>`}\n      </span>\n    </button>`;\n  }\n\n  override render() {\n    const isDisabled = this.isDisabled;\n    const hasCheckboxHoverEffects = !(\n      this.hoverStyle === ObcCheckboxItemHoverStyle.touchTarget && !isDisabled\n    );\n    const depth = Math.max(0, Math.floor(this.level) - 1);\n    const hasChevronSlot = this.level >= 1 || this.expandable;\n    const checkboxAriaLabel =\n      this.label.trim().length > 0 ? this.label : undefined;\n\n    return html`\n      <div\n        class=${classMap({\n          'checkbox-item-container': true,\n          [`status-${this.status}`]: true,\n          [`hover-style-${this.hoverStyle}`]: true,\n          'is-nested': hasChevronSlot,\n          'has-description': this.description !== '',\n          disabled: isDisabled,\n        })}\n        @click=${this.handleItemClick}\n      >\n        ${depth > 0\n          ? html`<div\n              class=\"nested-spacer\"\n              aria-hidden=\"true\"\n              style=${styleMap({'--checkbox-item-depth': String(depth)})}\n            ></div>`\n          : nothing}\n        ${hasChevronSlot\n          ? html`<div class=\"chevron-container\">${this.renderChevron()}</div>`\n          : nothing}\n        <div class=\"content-container\">\n          <obc-checkbox\n            .status=${this.status}\n            .state=${CheckboxState.enabled}\n            .disabled=${isDisabled}\n            .hasHoverEffects=${hasCheckboxHoverEffects}\n            aria-label=${ifDefined(checkboxAriaLabel)}\n            aria-describedby=${ifDefined(this.ariaDescribedBy || undefined)}\n            @change=${this.handleCheckboxChange}\n          ></obc-checkbox>\n          <div class=\"checkbox-label-container\">\n            <span class=\"checkbox-label\">${this.label}</span>\n            ${this.description\n              ? html`<span class=\"checkbox-description\"\n                  >${this.description}</span\n                >`\n              : nothing}\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-checkbox-item': ObcCheckboxItem;\n  }\n}\n"],"names":["ObcCheckboxItemState","ObcCheckboxItemHoverStyle"],"mappings":"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"}

package/dist/components/checkbox-list/checkbox-list-visibility.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Visibility of a flat checkbox-item sequence
+ *
+ * `<obc-checkbox-list>` keeps its rows flat and infers the tree from each
+ * row's `level`. A row is hidden while a preceding, visible, collapsed
+ * expandable row of smaller level is still "open" — that is, until a row of
+ * equal or smaller level closes it. Kept free of DOM so it can be unit-tested.
+ * @module
+ */
+export interface CheckboxListRow {
+    level: number;
+    expandable: boolean;
+    expanded: boolean;
+}
+export declare function computeHiddenRows(rows: readonly CheckboxListRow[]): boolean[];
+//# sourceMappingURL=checkbox-list-visibility.d.ts.map

package/dist/components/checkbox-list/checkbox-list-visibility.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-list-visibility.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox-list/checkbox-list-visibility.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,SAAS,eAAe,EAAE,GAAG,OAAO,EAAE,CAO7E"}

package/dist/components/checkbox-list/checkbox-list-visibility.js

@@ -0,0 +1,12 @@
+function computeHiddenRows(rows) {
+  let cutLevel = null;
+  return rows.map((row) => {
+    if (cutLevel !== null && row.level > cutLevel) return true;
+    cutLevel = row.expandable && !row.expanded ? row.level : null;
+    return false;
+  });
+}
+export {
+  computeHiddenRows
+};
+//# sourceMappingURL=checkbox-list-visibility.js.map

package/dist/components/checkbox-list/checkbox-list-visibility.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-list-visibility.js","sources":["../../../src/components/checkbox-list/checkbox-list-visibility.ts"],"sourcesContent":["/**\n * Visibility of a flat checkbox-item sequence\n *\n * `<obc-checkbox-list>` keeps its rows flat and infers the tree from each\n * row's `level`. A row is hidden while a preceding, visible, collapsed\n * expandable row of smaller level is still \"open\" — that is, until a row of\n * equal or smaller level closes it. Kept free of DOM so it can be unit-tested.\n * @module\n */\nexport interface CheckboxListRow {\n  level: number;\n  expandable: boolean;\n  expanded: boolean;\n}\n\nexport function computeHiddenRows(rows: readonly CheckboxListRow[]): boolean[] {\n  let cutLevel: number | null = null;\n  return rows.map((row) => {\n    if (cutLevel !== null && row.level > cutLevel) return true;\n    cutLevel = row.expandable && !row.expanded ? row.level : null;\n    return false;\n  });\n}\n"],"names":[],"mappings":"AAeO,SAAS,kBAAkB,MAA6C;AAC7E,MAAI,WAA0B;AAC9B,SAAO,KAAK,IAAI,CAAC,QAAQ;AACvB,QAAI,aAAa,QAAQ,IAAI,QAAQ,SAAU,QAAO;AACtD,eAAW,IAAI,cAAc,CAAC,IAAI,WAAW,IAAI,QAAQ;AACzD,WAAO;AAAA,EACT,CAAC;AACH;"}

package/dist/components/checkbox-list/checkbox-list.css.js

@@ -0,0 +1,23 @@
+import { css } from "lit";
+const componentStyle = css`* {
+  -webkit-tap-highlight-color: transparent;
+}
+
+:host {
+  display: block;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+::slotted([hidden]) {
+  display: none; /* collapsed rows leave layout; :host is display:block so [hidden] alone would not win */
+}
+`;
+export {
+  componentStyle as default
+};
+//# sourceMappingURL=checkbox-list.css.js.map

package/dist/components/checkbox-list/checkbox-list.css.js.map

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

package/dist/components/checkbox-list/checkbox-list.d.ts

@@ -0,0 +1,66 @@
+import { LitElement, PropertyValues } from 'lit';
+import { ObcCheckboxItemHoverStyle } from '../checkbox-item/checkbox-item.js';
+/**
+ * `<obc-checkbox-list>` – A vertical list of `<obc-checkbox-item>` rows that
+ * collapses the rows under a closed parent.
+ *
+ * ### Overview
+ * Rows are slotted flat, in document order; the tree is read from each row's
+ * `level`. When an expandable row is collapsed, the list sets `hidden` on
+ * every following row with a greater level until a row of equal or smaller
+ * level. The list also applies its `hoverStyle` to every row so a list reads
+ * as one surface.
+ *
+ * ### Features
+ * - Flat markup, level-driven hierarchy — no nesting of elements required.
+ * - Handles `expand-toggle`: sets the row's `expanded` and recomputes.
+ * - Reacts to `expandable`, `expanded` and `level` changes made from outside.
+ * - `hoverStyle` forwarded to slotted rows, including rows added later.
+ *
+ * ### Usage Guidelines
+ * - Start levels at 1 when any row is expandable so chevrons and checkboxes
+ *   align; use level 0 for a plain list.
+ * - The list owns the `hidden` attribute of its rows; do not bind it yourself.
+ * - Selection stays per row: listen to each row's `change`.
+ *
+ * ### Accessibility
+ * The host is the `role="group"`; rows are ordinary checkboxes and buttons in
+ * the natural tab order and hidden rows leave it. This is a group of
+ * checkboxes with disclosure buttons, not a tree widget, so there is no
+ * roving tabindex. Name the group with `aria-label` or `aria-labelledby` on
+ * the host.
+ *
+ * ### Example
+ * ```html
+ * <obc-checkbox-list aria-label="Report types">
+ *   <obc-checkbox-item level="1" expandable expanded status="mixed" label="Reports"></obc-checkbox-item>
+ *   <obc-checkbox-item level="2" status="checked" label="Monthly"></obc-checkbox-item>
+ *   <obc-checkbox-item level="2" label="Quarterly"></obc-checkbox-item>
+ *   <obc-checkbox-item level="1" expandable label="Archive"></obc-checkbox-item>
+ * </obc-checkbox-list>
+ * ```
+ *
+ * @property hoverStyle - Hover treatment applied to every slotted row: `touch-target` or `visual-target`.
+ * @slot - `obc-checkbox-item` rows in document order; hierarchy comes from each row's `level`.
+ * @beta
+ */
+export declare class ObcCheckboxList extends LitElement {
+    /** Hover treatment applied to every slotted row: `touch-target` or `visual-target`. */
+    hoverStyle: ObcCheckboxItemHoverStyle;
+    private mutationObserver?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    updated(changed: PropertyValues<this>): void;
+    private onExpandToggle;
+    private rows;
+    private sync;
+    render(): import('lit-html').TemplateResult<1>;
+    static styles: import('lit').CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'obc-checkbox-list': ObcCheckboxList;
+    }
+}
+//# sourceMappingURL=checkbox-list.d.ts.map

package/dist/components/checkbox-list/checkbox-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-list.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox-list/checkbox-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAmB,KAAK,cAAc,EAAC,MAAM,KAAK,CAAC;AAIrE,OAAO,EAEL,yBAAyB,EAE1B,MAAM,mCAAmC,CAAC;AAG3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,qBACa,eAAgB,SAAQ,UAAU;IACnB,UAAU,EAAE,yBAAyB,CACvB;IAExC,OAAO,CAAC,gBAAgB,CAAC,CAAmB;IAEnC,iBAAiB,IAAI,IAAI;IAiBzB,oBAAoB,IAAI,IAAI;IAO5B,YAAY,IAAI,IAAI;IAIpB,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAIrD,OAAO,CAAC,cAAc,CAKpB;IAEF,OAAO,CAAC,IAAI;IAMZ,OAAO,CAAC,IAAI;IASH,MAAM;IAMf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}

package/dist/components/checkbox-list/checkbox-list.js

@@ -0,0 +1,81 @@
+import { unsafeCSS, LitElement, html } from "lit";
+import { property } from "lit/decorators.js";
+import { customElement } from "../../decorator.js";
+import componentStyle from "./checkbox-list.css.js";
+import { ObcCheckboxItemHoverStyle, ObcCheckboxItem } from "../checkbox-item/checkbox-item.js";
+import { computeHiddenRows } from "./checkbox-list-visibility.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;
+};
+let ObcCheckboxList = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.hoverStyle = ObcCheckboxItemHoverStyle.touchTarget;
+    this.onExpandToggle = (event) => {
+      const row = event.target;
+      if (!(row instanceof ObcCheckboxItem)) return;
+      row.expanded = event.detail;
+      this.sync();
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.hasAttribute("role")) this.setAttribute("role", "group");
+    this.mutationObserver = new MutationObserver(() => this.sync());
+    this.mutationObserver.observe(this, {
+      childList: true,
+      attributes: true,
+      attributeFilter: ["expandable", "expanded", "level"],
+      subtree: true
+    });
+    this.addEventListener("expand-toggle", this.onExpandToggle);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.mutationObserver?.disconnect();
+    this.mutationObserver = void 0;
+    this.removeEventListener("expand-toggle", this.onExpandToggle);
+  }
+  firstUpdated() {
+    this.sync();
+  }
+  updated(changed) {
+    if (changed.has("hoverStyle")) this.sync();
+  }
+  rows() {
+    return Array.from(this.children).filter(
+      (el) => el instanceof ObcCheckboxItem
+    );
+  }
+  sync() {
+    const rows = this.rows();
+    const hidden = computeHiddenRows(rows);
+    rows.forEach((row, i) => {
+      row.hoverStyle = this.hoverStyle;
+      row.hidden = hidden[i];
+    });
+  }
+  render() {
+    return html`<div class="list">
+      <slot @slotchange=${() => this.sync()}></slot>
+    </div>`;
+  }
+};
+ObcCheckboxList.styles = unsafeCSS(componentStyle);
+__decorateClass([
+  property({ type: String })
+], ObcCheckboxList.prototype, "hoverStyle", 2);
+ObcCheckboxList = __decorateClass([
+  customElement("obc-checkbox-list")
+], ObcCheckboxList);
+export {
+  ObcCheckboxList
+};
+//# sourceMappingURL=checkbox-list.js.map

package/dist/components/checkbox-list/checkbox-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-list.js","sources":["../../../src/components/checkbox-list/checkbox-list.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS, type PropertyValues} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {customElement} from '../../decorator.js';\nimport componentStyle from './checkbox-list.css?inline';\nimport {\n  ObcCheckboxItem,\n  ObcCheckboxItemHoverStyle,\n  type ObcCheckboxItemExpandToggleEvent,\n} from '../checkbox-item/checkbox-item.js';\nimport {computeHiddenRows} from './checkbox-list-visibility.js';\n\n/**\n * `<obc-checkbox-list>` – A vertical list of `<obc-checkbox-item>` rows that\n * collapses the rows under a closed parent.\n *\n * ### Overview\n * Rows are slotted flat, in document order; the tree is read from each row's\n * `level`. When an expandable row is collapsed, the list sets `hidden` on\n * every following row with a greater level until a row of equal or smaller\n * level. The list also applies its `hoverStyle` to every row so a list reads\n * as one surface.\n *\n * ### Features\n * - Flat markup, level-driven hierarchy — no nesting of elements required.\n * - Handles `expand-toggle`: sets the row's `expanded` and recomputes.\n * - Reacts to `expandable`, `expanded` and `level` changes made from outside.\n * - `hoverStyle` forwarded to slotted rows, including rows added later.\n *\n * ### Usage Guidelines\n * - Start levels at 1 when any row is expandable so chevrons and checkboxes\n *   align; use level 0 for a plain list.\n * - The list owns the `hidden` attribute of its rows; do not bind it yourself.\n * - Selection stays per row: listen to each row's `change`.\n *\n * ### Accessibility\n * The host is the `role=\"group\"`; rows are ordinary checkboxes and buttons in\n * the natural tab order and hidden rows leave it. This is a group of\n * checkboxes with disclosure buttons, not a tree widget, so there is no\n * roving tabindex. Name the group with `aria-label` or `aria-labelledby` on\n * the host.\n *\n * ### Example\n * ```html\n * <obc-checkbox-list aria-label=\"Report types\">\n *   <obc-checkbox-item level=\"1\" expandable expanded status=\"mixed\" label=\"Reports\"></obc-checkbox-item>\n *   <obc-checkbox-item level=\"2\" status=\"checked\" label=\"Monthly\"></obc-checkbox-item>\n *   <obc-checkbox-item level=\"2\" label=\"Quarterly\"></obc-checkbox-item>\n *   <obc-checkbox-item level=\"1\" expandable label=\"Archive\"></obc-checkbox-item>\n * </obc-checkbox-list>\n * ```\n *\n * @property hoverStyle - Hover treatment applied to every slotted row: `touch-target` or `visual-target`.\n * @slot - `obc-checkbox-item` rows in document order; hierarchy comes from each row's `level`.\n * @beta\n */\n@customElement('obc-checkbox-list')\nexport class ObcCheckboxList extends LitElement {\n  @property({type: String}) hoverStyle: ObcCheckboxItemHoverStyle =\n    ObcCheckboxItemHoverStyle.touchTarget;\n\n  private mutationObserver?: MutationObserver;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // The role sits on the host so a consumer's aria-label / aria-labelledby\n    // names the group.\n    if (!this.hasAttribute('role')) this.setAttribute('role', 'group');\n    // Rows are light-DOM children owned by the consumer, so `expandable`,\n    // `expanded` and `level` can change without any event reaching the list.\n    this.mutationObserver = new MutationObserver(() => this.sync());\n    this.mutationObserver.observe(this, {\n      childList: true,\n      attributes: true,\n      attributeFilter: ['expandable', 'expanded', 'level'],\n      subtree: true,\n    });\n    this.addEventListener('expand-toggle', this.onExpandToggle);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.mutationObserver?.disconnect();\n    this.mutationObserver = undefined;\n    this.removeEventListener('expand-toggle', this.onExpandToggle);\n  }\n\n  override firstUpdated(): void {\n    this.sync();\n  }\n\n  override updated(changed: PropertyValues<this>): void {\n    if (changed.has('hoverStyle')) this.sync();\n  }\n\n  private onExpandToggle = (event: Event): void => {\n    const row = event.target;\n    if (!(row instanceof ObcCheckboxItem)) return;\n    row.expanded = (event as ObcCheckboxItemExpandToggleEvent).detail;\n    this.sync();\n  };\n\n  private rows(): ObcCheckboxItem[] {\n    return Array.from(this.children).filter(\n      (el): el is ObcCheckboxItem => el instanceof ObcCheckboxItem\n    );\n  }\n\n  private sync(): void {\n    const rows = this.rows();\n    const hidden = computeHiddenRows(rows);\n    rows.forEach((row, i) => {\n      row.hoverStyle = this.hoverStyle;\n      row.hidden = hidden[i];\n    });\n  }\n\n  override render() {\n    return html`<div class=\"list\">\n      <slot @slotchange=${() => this.sync()}></slot>\n    </div>`;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-checkbox-list': ObcCheckboxList;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAwDO,IAAM,kBAAN,cAA8B,WAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,aACxB,0BAA0B;AAoC5B,SAAQ,iBAAiB,CAAC,UAAuB;AAC/C,YAAM,MAAM,MAAM;AAClB,UAAI,EAAE,eAAe,iBAAkB;AACvC,UAAI,WAAY,MAA2C;AAC3D,WAAK,KAAA;AAAA,IACP;AAAA,EAAA;AAAA,EArCS,oBAA0B;AACjC,UAAM,kBAAA;AAGN,QAAI,CAAC,KAAK,aAAa,MAAM,EAAG,MAAK,aAAa,QAAQ,OAAO;AAGjE,SAAK,mBAAmB,IAAI,iBAAiB,MAAM,KAAK,MAAM;AAC9D,SAAK,iBAAiB,QAAQ,MAAM;AAAA,MAClC,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,iBAAiB,CAAC,cAAc,YAAY,OAAO;AAAA,MACnD,SAAS;AAAA,IAAA,CACV;AACD,SAAK,iBAAiB,iBAAiB,KAAK,cAAc;AAAA,EAC5D;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA;AACN,SAAK,kBAAkB,WAAA;AACvB,SAAK,mBAAmB;AACxB,SAAK,oBAAoB,iBAAiB,KAAK,cAAc;AAAA,EAC/D;AAAA,EAES,eAAqB;AAC5B,SAAK,KAAA;AAAA,EACP;AAAA,EAES,QAAQ,SAAqC;AACpD,QAAI,QAAQ,IAAI,YAAY,QAAQ,KAAA;AAAA,EACtC;AAAA,EASQ,OAA0B;AAChC,WAAO,MAAM,KAAK,KAAK,QAAQ,EAAE;AAAA,MAC/B,CAAC,OAA8B,cAAc;AAAA,IAAA;AAAA,EAEjD;AAAA,EAEQ,OAAa;AACnB,UAAM,OAAO,KAAK,KAAA;AAClB,UAAM,SAAS,kBAAkB,IAAI;AACrC,SAAK,QAAQ,CAAC,KAAK,MAAM;AACvB,UAAI,aAAa,KAAK;AACtB,UAAI,SAAS,OAAO,CAAC;AAAA,IACvB,CAAC;AAAA,EACH;AAAA,EAES,SAAS;AAChB,WAAO;AAAA,0BACe,MAAM,KAAK,MAAM;AAAA;AAAA,EAEzC;AAGF;AAnEa,gBAkEK,SAAS,UAAU,cAAc;AAjEvB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GADb,gBACe,WAAA,cAAA,CAAA;AADf,kBAAN,gBAAA;AAAA,EADN,cAAc,mBAAmB;AAAA,GACrB,eAAA;"}

package/package.json

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