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

package/custom-elements.json

@@ -59502,14 +59502,8 @@
       "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",
@@ -59517,6 +59511,7 @@
               "type": {
                 "text": "CheckboxStatus"
               },
+              "description": "Checkbox status: `unchecked`, `checked` or `mixed`.",
               "attribute": "status"
             },
             {
@@ -59525,6 +59520,7 @@
               "type": {
                 "text": "ObcCheckboxItemState"
               },
+              "description": "Item state: `enabled` or `disabled`.",
               "attribute": "state"
             },
             {
@@ -59534,6 +59530,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Disables the row and the inner checkbox.",
               "attribute": "disabled"
             },
             {
@@ -59543,41 +59540,56 @@
                 "text": "string"
               },
               "default": "''",
+              "description": "Text label; also the checkbox's accessible name.",
               "attribute": "label"
             },
             {
               "kind": "field",
-              "name": "isNested",
+              "name": "description",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "attribute": "isNested",
+              "default": "''",
+              "description": "Secondary line under the label; hidden when empty.",
+              "attribute": "description"
+            },
+            {
+              "kind": "field",
+              "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.",
+              "attribute": "level",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "isLevel1",
+              "name": "expandable",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "attribute": "isLevel1",
-              "reflects": true,
-              "availableWhen": "isNested==true || hoverStyle==visual-target",
-              "description": "Available when `isNested==true || hoverStyle==visual-target`."
+              "description": "Shows the chevron button that fires `expand-toggle`.",
+              "attribute": "expandable",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "isLevel2",
+              "name": "expanded",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "attribute": "isLevel2",
+              "description": "Whether the row's children are shown; drives the chevron direction and `aria-expanded`.\n\nAvailable when `expandable==true`.",
+              "attribute": "expanded",
               "reflects": true,
-              "availableWhen": "isNested==true || hoverStyle==visual-target",
-              "description": "Available when `isNested==true || hoverStyle==visual-target`."
+              "availableWhen": "expandable==true",
+              "availableWhenIf": {
+                "arg": "expandable",
+                "truthy": true
+              }
             },
             {
               "kind": "field",
@@ -59585,6 +59597,7 @@
               "type": {
                 "text": "ObcCheckboxItemHoverStyle"
               },
+              "description": "Which box shows hover and focus: the whole row (`touch-target`) or the checkbox (`visual-target`).",
               "attribute": "hoverStyle"
             },
             {
@@ -59594,6 +59607,7 @@
                 "text": "string"
               },
               "default": "''",
+              "description": "Forwarded to the inner checkbox as `aria-describedby`.",
               "attribute": "aria-describedby",
               "reflects": true
             },
@@ -59605,6 +59619,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",
@@ -59623,6 +59654,19 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "handleChevronClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "handleCheckboxChange",
@@ -59654,6 +59698,11 @@
                   }
                 }
               ]
+            },
+            {
+              "kind": "method",
+              "name": "renderChevron",
+              "privacy": "private"
             }
           ],
           "events": [
@@ -59663,6 +59712,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."
             }
           ],
           "attributes": [
@@ -59671,6 +59727,7 @@
               "type": {
                 "text": "CheckboxStatus"
               },
+              "description": "Checkbox status: `unchecked`, `checked` or `mixed`.",
               "fieldName": "status"
             },
             {
@@ -59678,6 +59735,7 @@
               "type": {
                 "text": "ObcCheckboxItemState"
               },
+              "description": "Item state: `enabled` or `disabled`.",
               "fieldName": "state"
             },
             {
@@ -59686,6 +59744,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Disables the row and the inner checkbox.",
               "fieldName": "disabled"
             },
             {
@@ -59694,39 +59753,51 @@
                 "text": "string"
               },
               "default": "''",
+              "description": "Text label; also the checkbox's accessible name.",
               "fieldName": "label"
             },
             {
-              "name": "isNested",
+              "name": "description",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "fieldName": "isNested"
+              "default": "''",
+              "description": "Secondary line under the label; hidden when empty.",
+              "fieldName": "description"
+            },
+            {
+              "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.",
+              "fieldName": "level"
             },
             {
-              "name": "isLevel1",
+              "name": "expandable",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "fieldName": "isLevel1",
-              "description": "Available when `isNested==true || hoverStyle==visual-target`."
+              "description": "Shows the chevron button that fires `expand-toggle`.",
+              "fieldName": "expandable"
             },
             {
-              "name": "isLevel2",
+              "name": "expanded",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "fieldName": "isLevel2",
-              "description": "Available when `isNested==true || hoverStyle==visual-target`."
+              "description": "Whether the row's children are shown; drives the chevron direction and `aria-expanded`.\n\nAvailable when `expandable==true`.",
+              "fieldName": "expanded"
             },
             {
               "name": "hoverStyle",
               "type": {
                 "text": "ObcCheckboxItemHoverStyle"
               },
+              "description": "Which box shows hover and focus: the whole row (`touch-target`) or the checkbox (`visual-target`).",
               "fieldName": "hoverStyle"
             },
             {
@@ -59735,6 +59806,7 @@
                 "text": "string"
               },
               "default": "''",
+              "description": "Forwarded to the inner checkbox as `aria-describedby`.",
               "fieldName": "ariaDescribedBy"
             }
           ],
@@ -59765,6 +59837,101 @@
         }
       ]
     },
+    {
+      "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`.",
+              "attribute": "hoverStyle"
+            },
+            {
+              "kind": "field",
+              "name": "mutationObserver",
+              "type": {
+                "text": "MutationObserver | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "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"
+                }
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "hoverStyle",
+              "type": {
+                "text": "ObcCheckboxItemHoverStyle"
+              },
+              "description": "Hover treatment applied to every slotted row: `touch-target` or `visual-target`.",
+              "fieldName": "hoverStyle"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "obc-checkbox-list",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ObcCheckboxList",
+          "declaration": {
+            "name": "ObcCheckboxList",
+            "module": "src/components/checkbox-list/checkbox-list.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "obc-checkbox-list",
+          "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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}