@oicl/openbridge-webcomponents 2.0.0-next.143 → 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": "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.",
+              "fieldName": "level"
+            },
+            {
+              "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",
@@ -85474,27 +85641,20 @@
           "kind": "class",
           "description": "",
           "name": "ObcIntegrationAppBar",
-          "slots": [
+          "cssProperties": [
             {
-              "description": "Application buttons; slotted elements are normalized to a uniform width",
-              "name": "apps"
+              "description": "Minimum width of each app-button grid track. Tracks may grow equally to fit wider content.",
+              "name": "--obc-integration-app-bar-app-width",
+              "default": "max-content"
             }
           ],
-          "members": [
+          "slots": [
             {
-              "kind": "method",
-              "name": "handleAppsSlotChange",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              "description": "Application buttons; every button is laid out at the width of the widest one",
+              "name": "apps"
             }
           ],
+          "members": [],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
@@ -105700,7 +105860,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<obc-readout-list-item>` – A compact, dense readout row for lists and tables.\n\nRenders a label, an optional source, an optional unit, and up to three\ncap-height \"readout building blocks\" – advice, setpoint, and value – each a\nfixed-width-reservable numeric segment. Dynamic data is passed as top-level\nprimitives (`value`, `setpoint`, `advice`, `label`, `unit`, `src`). Global\nlayout/format is configured via top-level props (`size`, `priority`,\n`stacking`, `hasDegree`, `dataQuality`, `alert`, …) and per-block tweaks via one\nobject per block (`valueOptions`, `setpointOptions`, `adviceOptions`,\n`unitOptions`, `srcOptions`).\n\n### Features\n- **Building blocks:** value, optional setpoint, and optional advice segments,\n  each cap-height-aligned and able to reserve a stable width.\n- **Sizes:** `small`, `medium`, `large` density scales.\n- **Stacking:** `trailing-unit`, `leading-unit`, `leading-src` placement.\n- **Priority:** `regular`/`enhanced` colour emphasis; per-value `weight`\n  (`regular`/`semibold`/`bold`) is independent of colour.\n- **Setpoint flip-flop:** swaps emphasis between value and setpoint as the\n  value reaches the setpoint.\n- **Data quality:** `low-integrity`/`invalid` styling, combinable with `alert`.\n- **Alert frame:** optional `alert` wrapper (caution/warning/alarm/level).\n- **Clickable:** optionally rendered as a focusable button with `squared`,\n  `round-corners`, or `round` corners.\n- **Formatting:** shared `fractionDigits`, width reservation via `maxDigits`\n  and per-segment `hintedZeros`; a `null` value renders a dash (`-`).\n- **Text values:** `valueType=\"text\"` renders `value` verbatim (e.g.\n  `\"Thermo On\"`) instead of formatting it as a number.\n\n### Usage Guidelines\nUse for dense readout rows in lists/tables. Prefer `<obc-readout>` for rich\nmulti-segment instrument layouts, source pickers, or flyout behaviour.",
+          "description": "`<obc-readout-list-item>` – A compact, dense readout row for lists and tables.\n\nRenders a label, an optional source, an optional unit, and up to three\ncap-height \"readout building blocks\" – advice, setpoint, and value – each a\nfixed-width-reservable numeric segment. Dynamic data is passed as top-level\nprimitives (`value`, `setpoint`, `advice`, `label`, `unit`, `src`). Global\nlayout/format is configured via top-level props (`size`, `priority`,\n`stacking`, `hasDegree`, `dataQuality`, `alert`, …) and per-block tweaks via one\nobject per block (`valueOptions`, `setpointOptions`, `adviceOptions`,\n`unitOptions`, `srcOptions`).\n\n### Features\n- **Building blocks:** value, optional setpoint, and optional advice segments,\n  each cap-height-aligned and able to reserve a stable width.\n- **Sizes:** `small`, `medium`, `large` density scales.\n- **Stacking:** `trailing-unit`, `leading-unit`, `leading-src`,\n  `leading-src-inline` placement.\n- **Priority:** `regular`/`enhanced` colour emphasis; per-value `weight`\n  (`regular`/`semibold`/`bold`) is independent of colour.\n- **Setpoint flip-flop:** swaps emphasis between value and setpoint as the\n  value reaches the setpoint.\n- **Data quality:** `low-integrity`/`invalid` styling, combinable with `alert`.\n- **Alert frame:** optional `alert` wrapper (caution/warning/alarm/level).\n- **Clickable:** optionally rendered as a focusable button with `squared`,\n  `round-corners`, or `round` corners.\n- **Formatting:** shared `fractionDigits`, width reservation via `maxDigits`\n  and per-segment `hintedZeros`; a `null` value renders a dash (`-`).\n- **Text values:** `valueType=\"text\"` renders `value` verbatim (e.g.\n  `\"Thermo On\"`) instead of formatting it as a number.\n\n### Usage Guidelines\nUse for dense readout rows in lists/tables. Prefer `<obc-readout>` for rich\nmulti-segment instrument layouts, source pickers, or flyout behaviour.",
           "name": "ObcReadoutListItem",
           "slots": [
             {
@@ -106046,6 +106206,16 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "hasLeadingSrc",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "description": "Both leading-src stackings move the source into the label stack.",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "resolvedPriority",
@@ -106055,6 +106225,16 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "hasTrailingUnitBox",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "description": "Whether a unit box follows the value: a unit, or a reserver alone — the\nblank reserved column keeps a unit-less row aligned with its neighbours.",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "resolvedFractionDigits",
@@ -107072,7 +107252,7 @@
               "type": {
                 "text": "ReadoutSize | undefined"
               },
-              "description": "Density tier. Applies to the vertical direction only — the horizontal arrangement exists in the large tier alone (Figma 6.1: it relies on the label+unit stack aligning with the L-size value caps), so `size` is ignored when `direction` is `horizontal`.\n\nAvailable when `direction==vertical`.",
+              "description": "Density tier. Applies to the vertical direction only — the horizontal arrangement exists in the large tier alone (Figma 6.1: it relies on the label+unit stack aligning with the L-size value caps), so `size` is ignored when `direction` is `horizontal`; a horizontal readout given any other `size` logs a console warning once per element.\n\nAvailable when `direction==vertical`.",
               "attribute": "size",
               "availableWhen": "direction==vertical",
               "availableWhenIf": {
@@ -107315,6 +107495,15 @@
               "privacy": "private",
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "hasWarnedHorizontalSize",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "sourcePickerContentVisible",
@@ -108006,6 +108195,17 @@
               },
               "description": "Horizontal: advice, setpoint, value and the stacked label/unit meta flow on\none cap-height-aligned row, with the source at the end after an auto\ndivider."
             },
+            {
+              "kind": "method",
+              "name": "warnHorizontalSizeIgnored",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "A horizontal readout discards any `size` but `large` (see `resolvedSize`).\nA silent discard is indistinguishable from a bug to a consumer, so each\noffending element says so once and logs itself for locating (#1182).\nA removed `size` attribute arrives as `null` and counts as unset."
+            },
             {
               "kind": "method",
               "name": "clearDeferredSetpointHide",
@@ -108127,7 +108327,7 @@
               "type": {
                 "text": "ReadoutSize | undefined"
               },
-              "description": "Density tier. Applies to the vertical direction only — the horizontal arrangement exists in the large tier alone (Figma 6.1: it relies on the label+unit stack aligning with the L-size value caps), so `size` is ignored when `direction` is `horizontal`.\n\nAvailable when `direction==vertical`.",
+              "description": "Density tier. Applies to the vertical direction only — the horizontal arrangement exists in the large tier alone (Figma 6.1: it relies on the label+unit stack aligning with the L-size value caps), so `size` is ignored when `direction` is `horizontal`; a horizontal readout given any other `size` logs a console warning once per element.\n\nAvailable when `direction==vertical`.",
               "fieldName": "size"
             },
             {

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