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

package/custom-elements.json

@@ -5518,7 +5518,7 @@
         {
           "kind": "variable",
           "name": "ObcCheckboxItem",
-          "default": "class extends LitElement { constructor() { super(...arguments); this.status = CheckboxStatus.unchecked; this.state = \"enabled\"; this.disabled = false; this.label = \"\"; this.isNested = false; this.isLevel1 = false; this.isLevel2 = false; this.hoverStyle = \"touch-target\"; this.ariaDescribedBy = \"\"; } toggleStatusFromItem() { const isDisabled = this.disabled || this.state === \"disabled\"; if (this.status === CheckboxStatus.checked) { this.status = CheckboxStatus.unchecked; } else { this.status = CheckboxStatus.checked; } this.dispatchEvent( new CustomEvent(\"change\", { detail: { status: this.status, disabled: isDisabled } }) ); } handleItemClick(event) { if (this.disabled || this.state === \"disabled\") return; const path = event.composedPath(); const checkboxElement = this.checkboxElement; if (checkboxElement && path.includes(checkboxElement)) return; this.toggleStatusFromItem(); } handleCheckboxChange(event) { const checkboxEvent = event; this.status = checkboxEvent.detail.status; this.dispatchEvent( new CustomEvent(\"change\", { detail: checkboxEvent.detail }) ); } focus(options) { this.checkboxElement?.focus(options); } render() { const isDisabled = this.disabled || this.state === \"disabled\"; const hasCheckboxHoverEffects = !(this.hoverStyle === \"touch-target\" && !isDisabled); const shouldRenderNestedSpacer = this.isNested && this.isLevel2; const shouldRenderChevronContainer = this.isNested; const shouldRenderChevronIcon = this.isNested && this.isLevel1; const checkboxAriaLabel = this.label.trim().length > 0 ? this.label : void 0; return html` <div class=${classMap({ \"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, 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} <div class=\"content-container\"> <obc-checkbox .status=${this.status} .state=${CheckboxState.enabled} .disabled=${isDisabled} .hasHoverEffects=${hasCheckboxHoverEffects} aria-label=${ifDefined(checkboxAriaLabel)} aria-describedby=${ifDefined(this.ariaDescribedBy || void 0)} @change=${this.handleCheckboxChange} ></obc-checkbox> <div class=\"checkbox-label-container\"> <span class=\"checkbox-label\">${this.label}</span> </div> </div> </div> `; } }"
+          "default": "class extends LitElement { constructor() { super(...arguments); this.status = CheckboxStatus.unchecked; this.state = \"enabled\"; this.disabled = false; this.label = \"\"; 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() { if (this.status === CheckboxStatus.checked) { this.status = CheckboxStatus.unchecked; } else { this.status = CheckboxStatus.checked; } this.dispatchEvent( new CustomEvent(\"change\", { detail: { status: this.status, disabled: this.isDisabled } }) ); } handleItemClick(event) { if (this.isDisabled) return; const path = event.composedPath(); 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; this.dispatchEvent( new CustomEvent(\"change\", { detail: checkboxEvent.detail }) ); } 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.isDisabled; const hasCheckboxHoverEffects = !(this.hoverStyle === \"touch-target\" && !isDisabled); 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 class=${classMap({ \"checkbox-item-container\": true, [`status-${this.status}`]: true, [`hover-style-${this.hoverStyle}`]: true, \"is-nested\": hasChevronSlot, \"has-description\": this.description !== \"\", disabled: isDisabled })} @click=${this.handleItemClick} > ${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} .state=${CheckboxState.enabled} .disabled=${isDisabled} .hasHoverEffects=${hasCheckboxHoverEffects} aria-label=${ifDefined(checkboxAriaLabel)} aria-describedby=${ifDefined(this.ariaDescribedBy || void 0)} @change=${this.handleCheckboxChange} ></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> `; } }"
         }
       ],
       "exports": [
@@ -5548,6 +5548,27 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/components/checkbox-list/checkbox-list.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "ObcCheckboxList",
+          "default": "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>`; } }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ObcCheckboxList",
+          "declaration": {
+            "name": "ObcCheckboxList",
+            "module": "dist/components/checkbox-list/checkbox-list.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/components/checkbox/checkbox.js",
@@ -51560,28 +51581,24 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<obc-checkbox-item>` – A list-item wrapper for `<obc-checkbox>` with label\nand optional nested indentation affordances.\n\n### Overview\nCombines checkbox interaction with a row-like container used in menus and\nhierarchical selection lists. The component proxies checkbox state changes,\nsupports touch-target or visual-target interaction behavior, and can render\nnested 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```",
+          "description": "`<obc-checkbox-item>` – A list row that pairs `<obc-checkbox>` with a label,\nan optional description, and hierarchy affordances for nested lists.\n\n### Overview\nThe row is the touch target: clicking anywhere on it toggles the checkbox,\nexcept on the chevron button, which only asks to expand or collapse. Depth\nis a number (`level`); the row indents itself so a flat sequence of rows\nreads as a tree. `<obc-checkbox-list>` builds on this to hide the rows\nunder 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\nThe checkbox and the chevron are separate controls in the natural tab\norder. The chevron is a native button named by the row's label, with the\nstate in `aria-expanded`, following the WAI-ARIA checkbox and disclosure\nbutton 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```",
           "name": "ObcCheckboxItem",
-          "slots": [
-            {
-              "description": "No named slots.",
-              "name": ""
-            }
-          ],
           "members": [
             {
               "kind": "field",
               "name": "status",
               "type": {
                 "text": "CheckboxStatus"
-              }
+              },
+              "description": "Checkbox status: `unchecked`, `checked` or `mixed`."
             },
             {
               "kind": "field",
               "name": "state",
               "type": {
                 "text": "ObcCheckboxItemState"
-              }
+              },
+              "description": "Item state: `enabled` or `disabled`."
             },
             {
               "kind": "field",
@@ -51589,7 +51606,8 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "false"
+              "default": "false",
+              "description": "Disables the row and the inner checkbox."
             },
             {
               "kind": "field",
@@ -51597,38 +51615,52 @@
               "type": {
                 "text": "string"
               },
-              "default": "''"
+              "default": "''",
+              "description": "Text label; also the checkbox's accessible name."
             },
             {
               "kind": "field",
-              "name": "isNested",
+              "name": "description",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false"
+              "default": "''",
+              "description": "Secondary line under the label; hidden when empty."
             },
             {
               "kind": "field",
-              "name": "isLevel1",
+              "name": "level",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Depth in a nested list. 0 is a plain row; 1 reserves the chevron slot; each level above 1 adds a spacer."
+            },
+            {
+              "kind": "field",
+              "name": "expandable",
               "type": {
                 "text": "boolean"
               },
-              "default": "false"
+              "default": "false",
+              "description": "Shows the chevron button that fires `expand-toggle`."
             },
             {
               "kind": "field",
-              "name": "isLevel2",
+              "name": "expanded",
               "type": {
                 "text": "boolean"
               },
-              "default": "false"
+              "default": "false",
+              "description": "Whether the row's children are shown; drives the chevron direction and `aria-expanded`."
             },
             {
               "kind": "field",
               "name": "hoverStyle",
               "type": {
                 "text": "ObcCheckboxItemHoverStyle"
-              }
+              },
+              "description": "Which box shows hover and focus: the whole row (`touch-target`) or the checkbox (`visual-target`)."
             },
             {
               "kind": "field",
@@ -51636,7 +51668,8 @@
               "type": {
                 "text": "string"
               },
-              "default": "''"
+              "default": "''",
+              "description": "Forwarded to the inner checkbox as `aria-describedby`."
             },
             {
               "kind": "field",
@@ -51646,6 +51679,23 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "chevronButton",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "isDisabled",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "toggleStatusFromItem",
@@ -51664,6 +51714,19 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "handleChevronClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "handleCheckboxChange",
@@ -51696,6 +51759,11 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "renderChevron",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "render"
@@ -51713,6 +51781,13 @@
                 "text": "ObcCheckboxChangeEvent"
               },
               "description": "Emitted when status changes."
+            },
+            {
+              "name": "expand-toggle",
+              "type": {
+                "text": "ObcCheckboxItemExpandToggleEvent"
+              },
+              "description": "Emitted when the chevron is activated; detail is the next `expanded` value. Bubbles and is composed."
             }
           ],
           "superclass": {
@@ -51733,6 +51808,116 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/checkbox-list/checkbox-list.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`<obc-checkbox-list>` – A vertical list of `<obc-checkbox-item>` rows that\ncollapses the rows under a closed parent.\n\n### Overview\nRows 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\nevery following row with a greater level until a row of equal or smaller\nlevel. The list also applies its `hoverStyle` to every row so a list reads\nas 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\nThe host is the `role=\"group\"`; rows are ordinary checkboxes and buttons in\nthe natural tab order and hidden rows leave it. This is a group of\ncheckboxes with disclosure buttons, not a tree widget, so there is no\nroving tabindex. Name the group with `aria-label` or `aria-labelledby` on\nthe 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```",
+          "name": "ObcCheckboxList",
+          "slots": [
+            {
+              "description": "`obc-checkbox-item` rows in document order; hierarchy comes from each row's `level`.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "hoverStyle",
+              "type": {
+                "text": "ObcCheckboxItemHoverStyle"
+              },
+              "description": "Hover treatment applied to every slotted row: `touch-target` or `visual-target`."
+            },
+            {
+              "kind": "field",
+              "name": "mutationObserver",
+              "type": {
+                "text": "MutationObserver | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "firstUpdated",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "updated",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "changed",
+                  "type": {
+                    "text": "PropertyValues<this>"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "onExpandToggle",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "rows",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "ObcCheckboxItem[]"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "sync",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            },
+            {
+              "kind": "field",
+              "name": "styles",
+              "static": true
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ObcCheckboxList",
+          "declaration": {
+            "name": "ObcCheckboxList",
+            "module": "src/components/checkbox-list/checkbox-list.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/checkbox/checkbox.ts",

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}