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

package/dist/components/app-button/app-button.css.js

@@ -208,6 +208,62 @@ const compentStyle = css`* {
     "ss04" on;
     }
 
+.wrapper.integration {
+  border-color: var(--integration-flat-enabled-border-color);
+  background-color: var(--integration-flat-enabled-background-color);
+  border-width: 1px;
+  border-style: solid;
+  cursor: pointer;
+  --base-border-color: var(--integration-flat-enabled-border-color);
+  --base-background-color: var(--integration-flat-enabled-background-color);
+}
+
+.wrapper.integration:focus {
+  outline: none;
+}
+
+.wrapper.integration.activated {
+  border-color: var(--integration-flat-activated-border-color);
+  background-color: var(--integration-flat-activated-background-color);
+  --base-border-color: var(--integration-flat-activated-border-color);
+  --base-background-color: var(--integration-flat-activated-background-color);
+}
+
+@media (hover:hover) {
+
+.wrapper.integration:hover {
+    border-color: color-mix(in srgb, var(--integration-flat-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
+    background-color: color-mix(in srgb, var(--integration-flat-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
+  }
+}
+
+.wrapper.integration:active {
+  border-color: var(--integration-flat-pressed-border-color);
+  background-color: var(--integration-flat-pressed-background-color);
+}
+
+.wrapper.integration:focus-visible {
+  outline-color: var(--border-focus-color);
+  outline-width: var(--global-size-spacing-border-weight-focusframe);
+  outline-style: solid;
+  border-color: var(--container-global-color);
+  z-index: 1;
+}
+
+.wrapper.integration:disabled {
+  border-color: var(--integration-flat-disabled-border-color);
+  background-color: var(--integration-flat-disabled-background-color);
+  cursor: not-allowed;
+  color: var(--integration-on-flat-disabled-color) !important;
+}
+
+.wrapper.integration.disabled {
+  border-color: var(--integration-flat-disabled-border-color);
+  background-color: var(--integration-flat-disabled-background-color);
+  cursor: not-allowed;
+  color: var(--integration-on-flat-disabled-color) !important;
+}
+
 :is(.wrapper.integration .icon-wrapper) {
   border-color: var(--integration-normal-enabled-border-color);
   background-color: var(--integration-normal-enabled-background-color);

package/dist/components/app-button/app-button.css.js.map

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

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

@@ -22,35 +22,146 @@ const componentStyle = css`* {
   cursor: pointer;
 }
 
+.checkbox-item-container.has-description {
+    /* a second text line outgrows the fixed row; the hover surface follows */
+    height: auto;
+    min-height: var(--ui-components-checkbox-touch-target-size);
+  }
+
 .checkbox-item-container.disabled {
     cursor: not-allowed;
   }
 
-.checkbox-item-container .chevron-container,.checkbox-item-container .nested-spacer {
+.checkbox-item-container .chevron-container {
     display: flex;
     width: var(--global-size-spacing-touch-target-min);
-    height: var(--global-size-spacing-touch-target-min);
     min-width: var(--global-size-spacing-touch-target-min);
-    min-height: var(--global-size-spacing-touch-target-min);
-    padding: 0px;
+    height: var(--global-size-spacing-touch-target-min);
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
   }
 
+.checkbox-item-container .nested-spacer {
+    /* one indent step per level above 1; --checkbox-item-depth is set inline */
+    width: calc(
+      var(--checkbox-item-depth, 0) *
+        var(--ui-components-checkbox-nested-item-padding-left)
+    );
+    flex-shrink: 0;
+    align-self: stretch;
+  }
+
+:is(.checkbox-item-container .chevron-button) {
+  cursor: pointer;
+}
+
+:is(.checkbox-item-container .chevron-button):focus {
+  outline: none;
+}
+
+:is(.checkbox-item-container .chevron-button) .chevron-visible {
+  border-color: var(--flat-enabled-border-color);
+  background-color: var(--flat-enabled-background-color);
+  border-width: 1px;
+  border-style: solid;
+  cursor: pointer;
+  --base-border-color: var(--flat-enabled-border-color);
+  --base-background-color: var(--flat-enabled-background-color);
+}
+
+.activated:is(.checkbox-item-container .chevron-button) .chevron-visible {
+  border-color: var(--flat-activated-border-color);
+  background-color: var(--flat-activated-background-color);
+  --base-border-color: var(--flat-activated-border-color);
+  --base-background-color: var(--flat-activated-background-color);
+}
+
+@media (hover:hover) {
+
+:is(.checkbox-item-container .chevron-button):hover .chevron-visible {
+    border-color: color-mix(in srgb, var(--flat-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
+    background-color: color-mix(in srgb, var(--flat-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
+  }
+}
+
+:is(.checkbox-item-container .chevron-button):active .chevron-visible {
+  border-color: var(--flat-pressed-border-color);
+  background-color: var(--flat-pressed-background-color);
+}
+
+:is(.checkbox-item-container .chevron-button):focus-visible .chevron-visible {
+  outline-color: var(--border-focus-color);
+  outline-width: var(--global-size-spacing-border-weight-focusframe);
+  outline-style: solid;
+  border-color: var(--container-global-color);
+  z-index: 1;
+}
+
+:is(.checkbox-item-container .chevron-button):disabled .chevron-visible {
+  border-color: var(--flat-disabled-border-color);
+  background-color: var(--flat-disabled-background-color);
+  cursor: not-allowed;
+  color: var(--on-flat-disabled-color) !important;
+}
+
+.disabled:is(.checkbox-item-container .chevron-button) .chevron-visible {
+  border-color: var(--flat-disabled-border-color);
+  background-color: var(--flat-disabled-background-color);
+  cursor: not-allowed;
+  color: var(--on-flat-disabled-color) !important;
+}
+
+:is(.checkbox-item-container .chevron-button):disabled {
+  cursor: not-allowed;
+}
+
+.disabled:is(.checkbox-item-container .chevron-button) {
+  cursor: not-allowed;
+}
+
+.checkbox-item-container .chevron-button {
+    appearance: none;
+    border: none;
+    background: transparent;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: var(--on-flat-neutral-color);
+  }
+
+:is(.checkbox-item-container .chevron-button):disabled {
+      cursor: not-allowed;
+    }
+
+.checkbox-item-container .chevron-visible {
+    /* same visible box as obc-icon-button so the two align in one list */
+    width: var(--ui-components-icon-button-visual-target-size);
+    height: var(--ui-components-icon-button-visual-target-size);
+    border-radius: var(--ui-components-button-border-radius-top-left);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
 .checkbox-item-container .chevron-icon {
     width: var(--global-size-spacing-icon-icon-size-regular);
     height: var(--global-size-spacing-icon-icon-size-regular);
-    color: var(--on-flat-neutral-color);
   }
 
 .checkbox-item-container .checkbox-label-container {
     display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-width: 0; /* lets the label ellipsis instead of widening the row */
     padding: 0 var(--global-size-spacing-list-item-padding-vertical) 0 0;
     margin-left: calc(
       var(--global-size-spacing-list-item-padding-vertical) / -2
     );
-    align-items: center;
     flex-grow: 1;
   }
 
@@ -85,6 +196,25 @@ const componentStyle = css`* {
       color: var(--element-disabled-color);
     }
 
+.checkbox-item-container .checkbox-description {
+    color: var(--element-active-color);
+    font-family: var(--global-typography-font-family);
+    font-weight: var(--global-typography-ui-label-font-weight);
+    font-size: var(--global-typography-ui-label-font-size);
+    line-height: var(--global-typography-ui-label-line-height);
+    font-feature-settings:
+    "liga" off,
+    "clig" off,
+    "ss04" on;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+.disabled :is(.checkbox-item-container .checkbox-description) {
+      color: var(--element-disabled-color);
+    }
+
 .checkbox-item-container.hover-style-touch-target {
   cursor: pointer;
 }
@@ -162,11 +292,6 @@ const componentStyle = css`* {
   --base-background-color: var(--flat-enabled-background-color);
 }
 
-.checkbox-item-container.hover-style-visual-target .chevron-container,.checkbox-item-container.hover-style-visual-target .nested-spacer {
-    width: var(--ui-components-checkbox-nested-item-padding-left);
-    min-width: var(--ui-components-checkbox-nested-item-padding-left);
-  }
-
 .content-container {
   display: flex;
   width: 100%;
@@ -179,7 +304,7 @@ const componentStyle = css`* {
   border-radius: var(--ui-components-checkbox-list-item-border-radius);
 }
 
-.checkbox-item-container.hover-style-visual-target:not(.is-nested):not(.is-level-1):not(.is-level-2) .content-container {
+.checkbox-item-container.hover-style-visual-target:not(.is-nested) .content-container {
     margin-left: calc(var(--ui-components-checkbox-padding-horizontal) * -1);
   }
 

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

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

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);