npm - @oicl/openbridge-webcomponents-full-bundle - Versions diffs - 2.0.0-next.58 → 2.0.0-next.60 - Mend

@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.58 → 2.0.0-next.60

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (213) hide show

package/custom-elements.json CHANGED Viewed

@@ -193,7 +193,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<obc-poi-header>` - Compact header chip for marker identifiers, labels, and optional indicator content.\n\n## Overview\nUse this component to display compact marker metadata above or near a marker button.\nKeywords/synonyms: chip, pill, badge, header chip, identifier badge.\n\n## Features/Variants\n- `type` (default `id`):\n  - `id`: shows identifier content only.\n  - `data`: shows identifier plus secondary label.\n- `state` (default `enabled`): `enabled`, `selected`, `caution`, `warning`, `alarm`.\n- `content` (default `\"1\"`): primary identifier text.\n- `label` (default `\"Data\"`): secondary text used by `type=\"data\"`.\n- `hasIndicator` (default `false`): appends indicator area.\n- `indicator` slot fallback: renders built-in bar indicator markup when slot content is empty.\n- `size` (default `regular`): currently only `regular`.\n\n## Usage Guidelines\n- Use `type=\"id\"` for compact identifier-only labels.\n- Use `type=\"data\"` when both an ID and short label are required.\n- Keep `content` and `label` brief to prevent overflow.\n\n## Slots/Content\n- `indicator`: Optional indicator icon/content; built-in indicator is used as fallback.\n\n## Events\nThis component does not emit custom events.\n\n## Best Practices\n- Keep indicator usage consistent across similar marker states.\n- Prefer enum values for `type`, `state`, and `size`.\n\n## Example\n```html\n<obc-poi-header type=\"data\" state=\"selected\" content=\"3\" label=\"SOG\" has-indicator>\n  <obi-placeholder slot=\"indicator\"></obi-placeholder>\n</obc-poi-header>\n```",
+          "description": "`<obc-poi-header>` - Compact header chip for marker identifiers, labels, and optional indicator content.\n\n## Overview\nUse this component to display compact marker metadata above or near a marker button.\nKeywords/synonyms: chip, pill, badge, header chip, identifier badge.\n\n## Features/Variants\n- `type` (default `id`):\n  - `id`: shows identifier content only.\n  - `data`: shows identifier plus secondary label.\n- `state` (default `enabled`): `enabled`, `selected`, `caution`, `warning`, `alarm`, `isa-critical`, `isa-high`, `isa-medium`, `isa-low`, `isa-diagnostic`.\n- `content` (default `\"1\"`): primary identifier text.\n- `label` (default `\"Data\"`): secondary text used by `type=\"data\"`.\n- `hasIndicator` (default `false`): appends indicator area.\n- `indicator` slot fallback: renders built-in bar indicator markup when slot content is empty.\n- `size` (default `regular`): currently only `regular`.\n\n## Usage Guidelines\n- Use `type=\"id\"` for compact identifier-only labels.\n- Use `type=\"data\"` when both an ID and short label are required.\n- Keep `content` and `label` brief to prevent overflow.\n\n## Slots/Content\n- `indicator`: Optional indicator icon/content; built-in indicator is used as fallback.\n\n## Events\nThis component does not emit custom events.\n\n## Best Practices\n- Keep indicator usage consistent across similar marker states.\n- Prefer enum values for `type`, `state`, and `size`.\n\n## Example\n```html\n<obc-poi-header type=\"data\" state=\"selected\" content=\"3\" label=\"SOG\" has-indicator>\n  <obi-placeholder slot=\"indicator\"></obi-placeholder>\n</obc-poi-header>\n```",
           "name": "ObcPoiHeader",
           "slots": [
             {
@@ -3249,7 +3249,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<obc-poi-button>` - Marker button component that renders an icon target with optional header and data rows.\n\n## Overview\nUse this component when you need a button-style marker that can show stateful framing and optional metric rows.\nKeywords/synonyms: marker button, target button, icon target, POI button.\n\n## Features/Variants\n- `type` (default `button`): `button` or `enhanced` size.\n- `layout` (default `anchored`): `anchored` or `inline`.\n- `value` (default `unchecked`): `unchecked`, `checked`, `activated`, `overlapped`.\n- `overlapOpaque` (default `false`): controls overlapped opacity mode (`false` = translucent, `true` = opaque).\n- `state` (default `enabled`): `enabled`, `caution`, `warning`, `alarm`.\n- `selected` (default `false`): shows selection frame in anchored layout.\n- `relativeDirection` (default `0`): rotates default-slot icon content in degrees.\n- `data` (default `[]`): when non-empty, renders value/label/unit rows.\n- `hasHeader` + `header` slot: renders a header area and syncs slotted `obc-poi-header` state.\n- `hasRelation` (default `false`): enables optional relation content in data mode.\n- `inExpandedGroup` (default `false`): applies `expanded` CSS class.\n- TODO(designer): Confirm intended UX semantics for `inExpandedGroup` beyond styling.\n\n## Usage Guidelines\n- Use `layout=\"anchored\"` for standalone marker buttons.\n- Use `layout=\"inline\"` when this component is embedded in a larger marker composition.\n- Provide `data` for metric display variants.\n- Enable `hasRelation` only when relation slot content is provided.\n\n## Slots/Content\n- Default slot: Icon/content rendered inside `obc-poi-object`.\n- `header`: Optional header content rendered above the marker body.\n- `relation`: Optional relation icon/content rendered when `hasRelation` is true in data mode.\n\n## Events\nThis component does not emit custom events.\nNative `click` is available from the internal `<button>`.\n\n## Best Practices\n- Keep `value`, `state`, and `selected` synchronized to avoid conflicting visual states.\n- Prefer enum values for `type`, `layout`, `state`, and `value`.\n\n## Example\n```html\n<obc-poi-button type=\"button\" layout=\"anchored\" value=\"checked\" selected>\n  <obi-placeholder></obi-placeholder>\n  <obc-poi-header slot=\"header\" content=\"1\"></obc-poi-header>\n</obc-poi-button>\n```",
+          "description": "`<obc-poi-button>` - Marker button component that renders an icon target with optional header and data rows.\n\n## Overview\nUse this component when you need a button-style marker that can show stateful framing and optional metric rows.\nKeywords/synonyms: marker button, target button, icon target, POI button.\n\n## Features/Variants\n- `type` (default `button`): `button` or `enhanced` size.\n- `layout` (default `anchored`): `anchored` or `inline`.\n- `value` (default `unchecked`): `unchecked`, `checked`, `activated`, `overlapped`.\n- `overlapOpaque` (default `false`): controls overlapped opacity mode (`false` = translucent, `true` = opaque).\n- `state` (default `enabled`): `enabled`, `caution`, `warning`, `alarm`, `isa-critical`, `isa-high`, `isa-medium`, `isa-low`, `isa-diagnostic`.\n- `selected` (default `false`): shows selection frame in anchored layout.\n- `relativeDirection` (default `0`): rotates default-slot icon content in degrees.\n- `data` (default `[]`): when non-empty, renders value/label/unit rows.\n- `hasHeader` + `header` slot: renders a header area and syncs slotted `obc-poi-header` state.\n- `hasRelation` (default `false`): enables optional relation content in data mode.\n- `inExpandedGroup` (default `false`): applies `expanded` CSS class.\n- TODO(designer): Confirm intended UX semantics for `inExpandedGroup` beyond styling.\n\n## Usage Guidelines\n- Use `layout=\"anchored\"` for standalone marker buttons.\n- Use `layout=\"inline\"` when this component is embedded in a larger marker composition.\n- Provide `data` for metric display variants.\n- Enable `hasRelation` only when relation slot content is provided.\n\n## Slots/Content\n- Default slot: Icon/content rendered inside `obc-poi-object`.\n- `header`: Optional header content rendered above the marker body.\n- `relation`: Optional relation icon/content rendered when `hasRelation` is true in data mode.\n\n## Events\nThis component does not emit custom events.\nNative `click` is available from the internal `<button>`.\n\n## Best Practices\n- Keep `value`, `state`, and `selected` synchronized to avoid conflicting visual states.\n- Prefer enum values for `type`, `layout`, `state`, and `value`.\n\n## Example\n```html\n<obc-poi-button type=\"button\" layout=\"anchored\" value=\"checked\" selected>\n  <obi-placeholder></obi-placeholder>\n  <obc-poi-header slot=\"header\" content=\"1\"></obc-poi-header>\n</obc-poi-button>\n```",
           "name": "ObcPoiButton",
           "slots": [
             {
@@ -12078,7 +12078,7 @@
               "kind": "field",
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "attribute": "alertFrameStatus",
               "inheritedFrom": {
@@ -12086,6 +12086,18 @@
                 "module": "src/automation/automation-button/abstract-automation-button.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "attribute": "alertFrameMode",
+              "inheritedFrom": {
+                "name": "ObcAbstractAutomationButton",
+                "module": "src/automation/automation-button/abstract-automation-button.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "showAlertCategoryIcon",
@@ -12467,7 +12479,7 @@
             {
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "fieldName": "alertFrameStatus",
               "inheritedFrom": {
@@ -12475,6 +12487,17 @@
                 "module": "src/automation/automation-button/abstract-automation-button.ts"
               }
             },
+            {
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "fieldName": "alertFrameMode",
+              "inheritedFrom": {
+                "name": "ObcAbstractAutomationButton",
+                "module": "src/automation/automation-button/abstract-automation-button.ts"
+              }
+            },
             {
               "name": "showAlertIcon",
               "type": {
@@ -12649,6 +12672,42 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "method",
+              "name": "isAlertType",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "types",
+                  "type": {
+                    "text": "ObcAutomationBadgeType[]"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "renderIsaCriticalIcon",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "flat",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "renderIsaDiagnosticIcon",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "getIcon",
@@ -12855,7 +12914,7 @@
               "kind": "field",
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "attribute": "alertFrameStatus",
               "inheritedFrom": {
@@ -12863,6 +12922,18 @@
                 "module": "src/automation/automation-button/abstract-automation-button.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "attribute": "alertFrameMode",
+              "inheritedFrom": {
+                "name": "ObcAbstractAutomationButton",
+                "module": "src/automation/automation-button/abstract-automation-button.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "showAlertCategoryIcon",
@@ -13248,7 +13319,7 @@
             {
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "fieldName": "alertFrameStatus",
               "inheritedFrom": {
@@ -13256,6 +13327,17 @@
                 "module": "src/automation/automation-button/abstract-automation-button.ts"
               }
             },
+            {
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "fieldName": "alertFrameMode",
+              "inheritedFrom": {
+                "name": "ObcAbstractAutomationButton",
+                "module": "src/automation/automation-button/abstract-automation-button.ts"
+              }
+            },
             {
               "name": "showAlertIcon",
               "type": {
@@ -13527,7 +13609,7 @@
               "kind": "field",
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "attribute": "alertFrameStatus",
               "inheritedFrom": {
@@ -13535,6 +13617,18 @@
                 "module": "src/automation/automation-button/abstract-automation-button.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "attribute": "alertFrameMode",
+              "inheritedFrom": {
+                "name": "ObcAbstractAutomationButton",
+                "module": "src/automation/automation-button/abstract-automation-button.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "showAlertCategoryIcon",
@@ -13905,7 +13999,7 @@
             {
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "fieldName": "alertFrameStatus",
               "inheritedFrom": {
@@ -13913,6 +14007,17 @@
                 "module": "src/automation/automation-button/abstract-automation-button.ts"
               }
             },
+            {
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "fieldName": "alertFrameMode",
+              "inheritedFrom": {
+                "name": "ObcAbstractAutomationButton",
+                "module": "src/automation/automation-button/abstract-automation-button.ts"
+              }
+            },
             {
               "name": "showAlertIcon",
               "type": {
@@ -14115,10 +14220,18 @@
               "kind": "field",
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "attribute": "alertFrameStatus"
             },
+            {
+              "kind": "field",
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "attribute": "alertFrameMode"
+            },
             {
               "kind": "field",
               "name": "showAlertCategoryIcon",
@@ -14374,10 +14487,17 @@
             {
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "fieldName": "alertFrameStatus"
             },
+            {
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "fieldName": "alertFrameMode"
+            },
             {
               "name": "showAlertIcon",
               "type": {
@@ -14575,10 +14695,18 @@
               "kind": "field",
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "attribute": "alertFrameStatus"
             },
+            {
+              "kind": "field",
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "attribute": "alertFrameMode"
+            },
             {
               "kind": "field",
               "name": "showAlertCategoryIcon",
@@ -14801,10 +14929,17 @@
             {
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "fieldName": "alertFrameStatus"
             },
+            {
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "fieldName": "alertFrameMode"
+            },
             {
               "name": "showAlertIcon",
               "type": {
@@ -15291,7 +15426,7 @@
               "kind": "field",
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "attribute": "alertFrameStatus"
             },
@@ -15706,7 +15841,7 @@
             {
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "fieldName": "alertFrameStatus"
             },
@@ -15951,7 +16086,7 @@
               "kind": "field",
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "attribute": "alertFrameStatus",
               "inheritedFrom": {
@@ -15959,6 +16094,18 @@
                 "module": "src/automation/automation-button/abstract-automation-button.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "attribute": "alertFrameMode",
+              "inheritedFrom": {
+                "name": "ObcAbstractAutomationButton",
+                "module": "src/automation/automation-button/abstract-automation-button.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "showAlertCategoryIcon",
@@ -16332,7 +16479,7 @@
             {
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "fieldName": "alertFrameStatus",
               "inheritedFrom": {
@@ -16340,6 +16487,17 @@
                 "module": "src/automation/automation-button/abstract-automation-button.ts"
               }
             },
+            {
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "fieldName": "alertFrameMode",
+              "inheritedFrom": {
+                "name": "ObcAbstractAutomationButton",
+                "module": "src/automation/automation-button/abstract-automation-button.ts"
+              }
+            },
             {
               "name": "showAlertIcon",
               "type": {
@@ -16649,7 +16807,7 @@
               "kind": "field",
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "attribute": "alertFrameStatus",
               "inheritedFrom": {
@@ -16657,6 +16815,18 @@
                 "module": "src/automation/automation-button/abstract-automation-button.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "attribute": "alertFrameMode",
+              "inheritedFrom": {
+                "name": "ObcAbstractAutomationButton",
+                "module": "src/automation/automation-button/abstract-automation-button.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "showAlertCategoryIcon",
@@ -17030,7 +17200,7 @@
             {
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "fieldName": "alertFrameStatus",
               "inheritedFrom": {
@@ -17038,6 +17208,17 @@
                 "module": "src/automation/automation-button/abstract-automation-button.ts"
               }
             },
+            {
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "fieldName": "alertFrameMode",
+              "inheritedFrom": {
+                "name": "ObcAbstractAutomationButton",
+                "module": "src/automation/automation-button/abstract-automation-button.ts"
+              }
+            },
             {
               "name": "showAlertIcon",
               "type": {
@@ -17347,7 +17528,7 @@
               "kind": "field",
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "attribute": "alertFrameStatus",
               "inheritedFrom": {
@@ -17355,6 +17536,18 @@
                 "module": "src/automation/automation-button/abstract-automation-button.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "attribute": "alertFrameMode",
+              "inheritedFrom": {
+                "name": "ObcAbstractAutomationButton",
+                "module": "src/automation/automation-button/abstract-automation-button.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "showAlertCategoryIcon",
@@ -17728,7 +17921,7 @@
             {
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "fieldName": "alertFrameStatus",
               "inheritedFrom": {
@@ -17736,6 +17929,17 @@
                 "module": "src/automation/automation-button/abstract-automation-button.ts"
               }
             },
+            {
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "fieldName": "alertFrameMode",
+              "inheritedFrom": {
+                "name": "ObcAbstractAutomationButton",
+                "module": "src/automation/automation-button/abstract-automation-button.ts"
+              }
+            },
             {
               "name": "showAlertIcon",
               "type": {
@@ -18121,7 +18325,7 @@
               "kind": "field",
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "attribute": "alertFrameStatus",
               "inheritedFrom": {
@@ -18129,6 +18333,18 @@
                 "module": "src/automation/automation-button/abstract-automation-button.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "attribute": "alertFrameMode",
+              "inheritedFrom": {
+                "name": "ObcAbstractAutomationButton",
+                "module": "src/automation/automation-button/abstract-automation-button.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "showAlertCategoryIcon",
@@ -18501,7 +18717,7 @@
             {
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "fieldName": "alertFrameStatus",
               "inheritedFrom": {
@@ -18509,6 +18725,17 @@
                 "module": "src/automation/automation-button/abstract-automation-button.ts"
               }
             },
+            {
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "fieldName": "alertFrameMode",
+              "inheritedFrom": {
+                "name": "ObcAbstractAutomationButton",
+                "module": "src/automation/automation-button/abstract-automation-button.ts"
+              }
+            },
             {
               "name": "showAlertIcon",
               "type": {
@@ -18805,7 +19032,7 @@
               "kind": "field",
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "attribute": "alertFrameStatus",
               "inheritedFrom": {
@@ -18813,6 +19040,18 @@
                 "module": "src/automation/automation-button/abstract-automation-button.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "attribute": "alertFrameMode",
+              "inheritedFrom": {
+                "name": "ObcAbstractAutomationButton",
+                "module": "src/automation/automation-button/abstract-automation-button.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "showAlertCategoryIcon",
@@ -19179,7 +19418,7 @@
             {
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "fieldName": "alertFrameStatus",
               "inheritedFrom": {
@@ -19187,6 +19426,17 @@
                 "module": "src/automation/automation-button/abstract-automation-button.ts"
               }
             },
+            {
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "fieldName": "alertFrameMode",
+              "inheritedFrom": {
+                "name": "ObcAbstractAutomationButton",
+                "module": "src/automation/automation-button/abstract-automation-button.ts"
+              }
+            },
             {
               "name": "showAlertIcon",
               "type": {
@@ -19496,7 +19746,7 @@
               "kind": "field",
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "attribute": "alertFrameStatus",
               "inheritedFrom": {
@@ -19504,6 +19754,18 @@
                 "module": "src/automation/automation-button/abstract-automation-button.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "attribute": "alertFrameMode",
+              "inheritedFrom": {
+                "name": "ObcAbstractAutomationButton",
+                "module": "src/automation/automation-button/abstract-automation-button.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "showAlertCategoryIcon",
@@ -19877,7 +20139,7 @@
             {
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "fieldName": "alertFrameStatus",
               "inheritedFrom": {
@@ -19885,6 +20147,17 @@
                 "module": "src/automation/automation-button/abstract-automation-button.ts"
               }
             },
+            {
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "fieldName": "alertFrameMode",
+              "inheritedFrom": {
+                "name": "ObcAbstractAutomationButton",
+                "module": "src/automation/automation-button/abstract-automation-button.ts"
+              }
+            },
             {
               "name": "showAlertIcon",
               "type": {
@@ -20364,7 +20637,7 @@
               "kind": "field",
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "attribute": "alertFrameStatus",
               "inheritedFrom": {
@@ -20372,6 +20645,18 @@
                 "module": "src/automation/automation-button/abstract-automation-button.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "attribute": "alertFrameMode",
+              "inheritedFrom": {
+                "name": "ObcAbstractAutomationButton",
+                "module": "src/automation/automation-button/abstract-automation-button.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "showAlertCategoryIcon",
@@ -20767,7 +21052,7 @@
             {
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "fieldName": "alertFrameStatus",
               "inheritedFrom": {
@@ -20775,6 +21060,17 @@
                 "module": "src/automation/automation-button/abstract-automation-button.ts"
               }
             },
+            {
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "fieldName": "alertFrameMode",
+              "inheritedFrom": {
+                "name": "ObcAbstractAutomationButton",
+                "module": "src/automation/automation-button/abstract-automation-button.ts"
+              }
+            },
             {
               "name": "showAlertIcon",
               "type": {
@@ -21078,7 +21374,7 @@
               "kind": "field",
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "attribute": "alertFrameStatus",
               "inheritedFrom": {
@@ -21086,6 +21382,18 @@
                 "module": "src/automation/automation-button/abstract-automation-button.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "attribute": "alertFrameMode",
+              "inheritedFrom": {
+                "name": "ObcAbstractAutomationButton",
+                "module": "src/automation/automation-button/abstract-automation-button.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "showAlertCategoryIcon",
@@ -21459,7 +21767,7 @@
             {
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "fieldName": "alertFrameStatus",
               "inheritedFrom": {
@@ -21467,6 +21775,17 @@
                 "module": "src/automation/automation-button/abstract-automation-button.ts"
               }
             },
+            {
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "fieldName": "alertFrameMode",
+              "inheritedFrom": {
+                "name": "ObcAbstractAutomationButton",
+                "module": "src/automation/automation-button/abstract-automation-button.ts"
+              }
+            },
             {
               "name": "showAlertIcon",
               "type": {
@@ -21776,7 +22095,7 @@
               "kind": "field",
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "attribute": "alertFrameStatus",
               "inheritedFrom": {
@@ -21784,6 +22103,18 @@
                 "module": "src/automation/automation-button/abstract-automation-button.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "attribute": "alertFrameMode",
+              "inheritedFrom": {
+                "name": "ObcAbstractAutomationButton",
+                "module": "src/automation/automation-button/abstract-automation-button.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "showAlertCategoryIcon",
@@ -22157,7 +22488,7 @@
             {
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "fieldName": "alertFrameStatus",
               "inheritedFrom": {
@@ -22165,6 +22496,17 @@
                 "module": "src/automation/automation-button/abstract-automation-button.ts"
               }
             },
+            {
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "fieldName": "alertFrameMode",
+              "inheritedFrom": {
+                "name": "ObcAbstractAutomationButton",
+                "module": "src/automation/automation-button/abstract-automation-button.ts"
+              }
+            },
             {
               "name": "showAlertIcon",
               "type": {
@@ -22698,7 +23040,7 @@
               "kind": "field",
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "attribute": "alertFrameStatus",
               "inheritedFrom": {
@@ -22706,6 +23048,18 @@
                 "module": "src/automation/automation-button/abstract-automation-button.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "attribute": "alertFrameMode",
+              "inheritedFrom": {
+                "name": "ObcAbstractAutomationButton",
+                "module": "src/automation/automation-button/abstract-automation-button.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "showAlertCategoryIcon",
@@ -23079,7 +23433,7 @@
             {
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "fieldName": "alertFrameStatus",
               "inheritedFrom": {
@@ -23087,6 +23441,17 @@
                 "module": "src/automation/automation-button/abstract-automation-button.ts"
               }
             },
+            {
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "fieldName": "alertFrameMode",
+              "inheritedFrom": {
+                "name": "ObcAbstractAutomationButton",
+                "module": "src/automation/automation-button/abstract-automation-button.ts"
+              }
+            },
             {
               "name": "showAlertIcon",
               "type": {
@@ -23396,7 +23761,7 @@
               "kind": "field",
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "attribute": "alertFrameStatus",
               "inheritedFrom": {
@@ -23404,6 +23769,18 @@
                 "module": "src/automation/automation-button/abstract-automation-button.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "attribute": "alertFrameMode",
+              "inheritedFrom": {
+                "name": "ObcAbstractAutomationButton",
+                "module": "src/automation/automation-button/abstract-automation-button.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "showAlertCategoryIcon",
@@ -23777,7 +24154,7 @@
             {
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "fieldName": "alertFrameStatus",
               "inheritedFrom": {
@@ -23785,6 +24162,17 @@
                 "module": "src/automation/automation-button/abstract-automation-button.ts"
               }
             },
+            {
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "fieldName": "alertFrameMode",
+              "inheritedFrom": {
+                "name": "ObcAbstractAutomationButton",
+                "module": "src/automation/automation-button/abstract-automation-button.ts"
+              }
+            },
             {
               "name": "showAlertIcon",
               "type": {
@@ -24120,7 +24508,7 @@
               "kind": "field",
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "attribute": "alertFrameStatus",
               "inheritedFrom": {
@@ -24128,6 +24516,18 @@
                 "module": "src/automation/automation-button/abstract-automation-button.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "attribute": "alertFrameMode",
+              "inheritedFrom": {
+                "name": "ObcAbstractAutomationButton",
+                "module": "src/automation/automation-button/abstract-automation-button.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "showAlertCategoryIcon",
@@ -24525,7 +24925,7 @@
             {
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "fieldName": "alertFrameStatus",
               "inheritedFrom": {
@@ -24533,6 +24933,17 @@
                 "module": "src/automation/automation-button/abstract-automation-button.ts"
               }
             },
+            {
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "fieldName": "alertFrameMode",
+              "inheritedFrom": {
+                "name": "ObcAbstractAutomationButton",
+                "module": "src/automation/automation-button/abstract-automation-button.ts"
+              }
+            },
             {
               "name": "showAlertIcon",
               "type": {
@@ -24868,7 +25279,7 @@
               "kind": "field",
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "attribute": "alertFrameStatus",
               "inheritedFrom": {
@@ -24876,6 +25287,18 @@
                 "module": "src/automation/automation-button/abstract-automation-button.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "attribute": "alertFrameMode",
+              "inheritedFrom": {
+                "name": "ObcAbstractAutomationButton",
+                "module": "src/automation/automation-button/abstract-automation-button.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "showAlertCategoryIcon",
@@ -25273,7 +25696,7 @@
             {
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "fieldName": "alertFrameStatus",
               "inheritedFrom": {
@@ -25281,6 +25704,17 @@
                 "module": "src/automation/automation-button/abstract-automation-button.ts"
               }
             },
+            {
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "fieldName": "alertFrameMode",
+              "inheritedFrom": {
+                "name": "ObcAbstractAutomationButton",
+                "module": "src/automation/automation-button/abstract-automation-button.ts"
+              }
+            },
             {
               "name": "showAlertIcon",
               "type": {
@@ -25590,7 +26024,7 @@
               "kind": "field",
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "attribute": "alertFrameStatus",
               "inheritedFrom": {
@@ -25598,6 +26032,18 @@
                 "module": "src/automation/automation-button/abstract-automation-button.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "attribute": "alertFrameMode",
+              "inheritedFrom": {
+                "name": "ObcAbstractAutomationButton",
+                "module": "src/automation/automation-button/abstract-automation-button.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "showAlertCategoryIcon",
@@ -25971,7 +26417,7 @@
             {
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "fieldName": "alertFrameStatus",
               "inheritedFrom": {
@@ -25979,6 +26425,17 @@
                 "module": "src/automation/automation-button/abstract-automation-button.ts"
               }
             },
+            {
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "fieldName": "alertFrameMode",
+              "inheritedFrom": {
+                "name": "ObcAbstractAutomationButton",
+                "module": "src/automation/automation-button/abstract-automation-button.ts"
+              }
+            },
             {
               "name": "showAlertIcon",
               "type": {
@@ -26288,7 +26745,7 @@
               "kind": "field",
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "attribute": "alertFrameStatus",
               "inheritedFrom": {
@@ -26296,6 +26753,18 @@
                 "module": "src/automation/automation-button/abstract-automation-button.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "attribute": "alertFrameMode",
+              "inheritedFrom": {
+                "name": "ObcAbstractAutomationButton",
+                "module": "src/automation/automation-button/abstract-automation-button.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "showAlertCategoryIcon",
@@ -26669,7 +27138,7 @@
             {
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "fieldName": "alertFrameStatus",
               "inheritedFrom": {
@@ -26677,6 +27146,17 @@
                 "module": "src/automation/automation-button/abstract-automation-button.ts"
               }
             },
+            {
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "fieldName": "alertFrameMode",
+              "inheritedFrom": {
+                "name": "ObcAbstractAutomationButton",
+                "module": "src/automation/automation-button/abstract-automation-button.ts"
+              }
+            },
             {
               "name": "showAlertIcon",
               "type": {
@@ -26986,7 +27466,7 @@
               "kind": "field",
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "attribute": "alertFrameStatus",
               "inheritedFrom": {
@@ -26994,6 +27474,18 @@
                 "module": "src/automation/automation-button/abstract-automation-button.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "attribute": "alertFrameMode",
+              "inheritedFrom": {
+                "name": "ObcAbstractAutomationButton",
+                "module": "src/automation/automation-button/abstract-automation-button.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "showAlertCategoryIcon",
@@ -27367,7 +27859,7 @@
             {
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "fieldName": "alertFrameStatus",
               "inheritedFrom": {
@@ -27375,6 +27867,17 @@
                 "module": "src/automation/automation-button/abstract-automation-button.ts"
               }
             },
+            {
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "fieldName": "alertFrameMode",
+              "inheritedFrom": {
+                "name": "ObcAbstractAutomationButton",
+                "module": "src/automation/automation-button/abstract-automation-button.ts"
+              }
+            },
             {
               "name": "showAlertIcon",
               "type": {
@@ -27684,7 +28187,7 @@
               "kind": "field",
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "attribute": "alertFrameStatus",
               "inheritedFrom": {
@@ -27692,6 +28195,18 @@
                 "module": "src/automation/automation-button/abstract-automation-button.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "attribute": "alertFrameMode",
+              "inheritedFrom": {
+                "name": "ObcAbstractAutomationButton",
+                "module": "src/automation/automation-button/abstract-automation-button.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "showAlertCategoryIcon",
@@ -28065,7 +28580,7 @@
             {
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "fieldName": "alertFrameStatus",
               "inheritedFrom": {
@@ -28073,6 +28588,17 @@
                 "module": "src/automation/automation-button/abstract-automation-button.ts"
               }
             },
+            {
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "fieldName": "alertFrameMode",
+              "inheritedFrom": {
+                "name": "ObcAbstractAutomationButton",
+                "module": "src/automation/automation-button/abstract-automation-button.ts"
+              }
+            },
             {
               "name": "showAlertIcon",
               "type": {
@@ -28466,7 +28992,7 @@
               "kind": "field",
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "attribute": "alertFrameStatus",
               "inheritedFrom": {
@@ -28474,6 +29000,18 @@
                 "module": "src/automation/automation-button/abstract-automation-button.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "attribute": "alertFrameMode",
+              "inheritedFrom": {
+                "name": "ObcAbstractAutomationButton",
+                "module": "src/automation/automation-button/abstract-automation-button.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "showAlertCategoryIcon",
@@ -28847,7 +29385,7 @@
             {
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "fieldName": "alertFrameStatus",
               "inheritedFrom": {
@@ -28855,6 +29393,17 @@
                 "module": "src/automation/automation-button/abstract-automation-button.ts"
               }
             },
+            {
+              "name": "alertFrameMode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "fieldName": "alertFrameMode",
+              "inheritedFrom": {
+                "name": "ObcAbstractAutomationButton",
+                "module": "src/automation/automation-button/abstract-automation-button.ts"
+              }
+            },
             {
               "name": "showAlertIcon",
               "type": {
@@ -37057,7 +37606,7 @@
               "kind": "field",
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "description": "Status of the alert frame overlay (used when `hasAlert` is true).\nSee `obc-alert-frame` for available statuses.",
               "attribute": "alertFrameStatus"
@@ -37220,7 +37769,7 @@
             {
               "name": "alertFrameStatus",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
               "description": "Status of the alert frame overlay (used when `hasAlert` is true).\nSee `obc-alert-frame` for available statuses.",
               "fieldName": "alertFrameStatus"
@@ -38433,6 +38982,11 @@
               "name": "resizeListener",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "renderAlertTwotoneIcon",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "alertIcon",
@@ -38752,7 +39306,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<obc-alert-frame>` – A bordered frame component for visually emphasizing alert or status messages.\n\nThe alert frame provides a prominent outline and optional \"flap\" with status icon to draw attention to critical information or UI regions. It supports multiple visual variants and thicknesses, and can be configured to indicate different alert statuses (alarm, warning, caution). The component is designed to wrap content and visually distinguish it from the surrounding UI.\n\n### Features\n- **Variants (type):**\n  - `regular`: Standard outlined frame with no flap or icon.\n  - `small-side-flip`: Adds a small side flap with a status icon at the top right.\n  - `large-side-flip`: Adds a larger, vertical side flap with a status icon and optional custom icon.\n  - `bottom-flip`: Adds a bottom flap with a status icon, label, and timer slots.\n- **Thickness options:** Choose between `small` (thin border) and `large` (thick border) for visual emphasis.\n- **Status indication:** Displays different color schemes and icons for `alarm`, `warning`, or `caution` states.\n- **Customizable corners:** Each corner can be set to a sharp (non-rounded) edge for integration with other UI elements.\n- **Slot-based content:** Supports custom icons, labels, and timers in flap variants via named slots.\n\n### Usage Guidelines\nUse `obc-alert-frame` to highlight important content, such as alerts, warnings, or status panels. The flap variants are ideal for drawing extra attention to urgent or time-sensitive information, while the regular type provides a subtle but clear border. Choose the status to match the severity of the message (alarm, warning, caution). Adjust thickness for visual hierarchy—use large for high-priority alerts and small for less critical notices.\n\n**TODO(designer):** Provide guidance on when to use each flap type (small-side-flip, large-side-flip, bottom-flip) and recommended scenarios for sharp edge usage.\n\n### Features/Variants\n- **Type (Visual Variant):**\n  - `regular`: Simple outlined frame, no flap or icon.\n  - `small-side-flip`: Small right-side flap with status icon.\n  - `large-side-flip`: Large vertical right-side flap with status icon and optional custom icon.\n  - `bottom-flip`: Bottom flap with status icon, label, and timer.\n- **Thickness:** `small` (default) or `large` for border width.\n- **Status:** `alarm`, `warning`, or `caution`—affects color and icon.\n- **Corner Customization:** Each corner can be made sharp (not rounded) via boolean properties.\n\n### Slots and Content Structure\n\n| Slot Name | Renders When... | Purpose |\n|-----------|-----------------|---------|\n| (default) | Always | Main content inside the alert frame. |\n| icon | `large-side-flip` or `bottom-flip` | Custom icon displayed in the flap (in addition to status icon). |\n| label | `bottom-flip` only | Label text shown in the bottom flap. |\n| timer | `bottom-flip` only | Timer or time label in the bottom flap. |\n\n### Properties and Attributes\n- `type`: Selects the visual variant/flap style. Default is `small-side-flip`.\n- `thickness`: Controls border thickness (`small` or `large`). Default is `small`.\n- `status`: Sets the alert status and color/icon (`alarm`, `warning`, `caution`). Default is `alarm`.\n- `sharpEdgeTopLeft`, `sharpEdgeTopRight`, `sharpEdgeBottomLeft`, `sharpEdgeBottomRight`: Boolean flags to make each corner sharp instead of rounded.\n\n### Best Practices and Constraints\n- Use the status property to match the severity of the alert.\n- Only use the bottom-flip variant when both label and timer are relevant.\n- For visual consistency, align sharp edge settings with adjacent UI elements.\n- The default slot is for the main content; use named slots for icons, labels, and timers as needed.\n\n### Example:\n```\n<obc-alert-frame\n  type=\"bottom-flip\"\n  thickness=\"large\"\n  status=\"warning\"\n  sharpEdgeTopLeft\n>\n  <obi-placeholder slot=\"icon\"></obi-placeholder>\n  <div slot=\"label\">Low Battery</div>\n  <div slot=\"timer\">00:15</div>\n  <div>Critical system message goes here.</div>\n</obc-alert-frame>\n```",
+          "description": "`<obc-alert-frame>` – A bordered frame component for visually emphasizing alert or status messages.\n\nThe alert frame provides a prominent outline and optional \"flap\" with status icon to draw attention to critical information or UI regions. It supports multiple visual variants and thicknesses, and can be configured to indicate different alert statuses (alarm, warning, caution). The component is designed to wrap content and visually distinguish it from the surrounding UI.\n\n### Features\n- **Variants (type):**\n  - `regular`: Standard outlined frame with no flap or icon.\n  - `small-side-flip`: Adds a small side flap with a status icon at the top right.\n  - `large-side-flip`: Adds a larger, vertical side flap with a status icon and optional custom icon.\n  - `bottom-flip`: Adds a bottom flap with a status icon, label, and timer slots.\n- **Thickness options:** Choose between `small` (thin border) and `large` (thick border) for visual emphasis.\n- **Status indication:** Displays different color schemes and icons for the legacy statuses (`alarm`, `warning`, `caution`) and the ISA statuses (`isa-critical`, `isa-high`, `isa-medium`, `isa-low`, `isa-diagnostic`).\n- **Acknowledgement mode:** The `mode` property reflects the alert lifecycle state — `acked-active` (default), `unacked-active`, and `unacked-rectified` — driving the blinking/animation treatment of the frame.\n- **Content wrapping:** When `wrapContent` is true, the frame wraps and sizes itself to its slotted content rather than overlaying a fixed region.\n- **Customizable corners:** Each corner can be set to a sharp (non-rounded) edge for integration with other UI elements.\n- **Slot-based content:** Supports custom icons, labels, and timers in flap variants via named slots.\n\n### Usage Guidelines\nUse `obc-alert-frame` to highlight important content, such as alerts, warnings, or status panels. The flap variants are ideal for drawing extra attention to urgent or time-sensitive information, while the regular type provides a subtle but clear border. Choose the status to match the severity of the message (alarm, warning, caution). Adjust thickness for visual hierarchy—use large for high-priority alerts and small for less critical notices.\n\n**TODO(designer):** Provide guidance on when to use each flap type (small-side-flip, large-side-flip, bottom-flip) and recommended scenarios for sharp edge usage.\n\n### Features/Variants\n- **Type (Visual Variant):**\n  - `regular`: Simple outlined frame, no flap or icon.\n  - `small-side-flip`: Small right-side flap with status icon.\n  - `large-side-flip`: Large vertical right-side flap with status icon and optional custom icon.\n  - `bottom-flip`: Bottom flap with status icon, label, and timer.\n- **Thickness:** `small` (default) or `large` for border width.\n- **Status:** `alarm`, `warning`, `caution`, or the ISA severities (`isa-critical`, `isa-high`, `isa-medium`, `isa-low`, `isa-diagnostic`)—affects color and icon.\n- **Mode:** `acked-active` (default), `unacked-active`, or `unacked-rectified`—affects blinking/animation.\n- **Corner Customization:** Each corner can be made sharp (not rounded) via boolean properties.\n\n### Slots and Content Structure\n\n| Slot Name | Renders When... | Purpose |\n|-----------|-----------------|---------|\n| (default) | Always | Main content inside the alert frame. |\n| icon | `large-side-flip` or `bottom-flip` | Custom icon displayed in the flap (in addition to status icon). |\n| label | `bottom-flip` only | Label text shown in the bottom flap. |\n| timer | `bottom-flip` only | Timer or time label in the bottom flap. |\n\n### Properties and Attributes\n- `type`: Selects the visual variant/flap style. Default is `small-side-flip`.\n- `thickness`: Controls border thickness (`small` or `large`). Default is `small`.\n- `status`: Sets the alert status and color/icon (`alarm`, `warning`, `caution`, or the `isa-*` severities). Default is `alarm`.\n- `mode`: Acknowledgement lifecycle state (`acked-active`, `unacked-active`, `unacked-rectified`) controlling blinking/animation. Default is `acked-active`.\n- `wrapContent`: When true, the frame wraps and sizes to its slotted content instead of overlaying a fixed region. Default is `false`.\n- `sharpEdgeTopLeft`, `sharpEdgeTopRight`, `sharpEdgeBottomLeft`, `sharpEdgeBottomRight`: Boolean flags to make each corner sharp instead of rounded.\n\n### Best Practices and Constraints\n- Use the status property to match the severity of the alert.\n- Only use the bottom-flip variant when both label and timer are relevant.\n- For visual consistency, align sharp edge settings with adjacent UI elements.\n- The default slot is for the main content; use named slots for icons, labels, and timers as needed.\n\n### Example:\n```\n<obc-alert-frame\n  type=\"bottom-flip\"\n  thickness=\"large\"\n  status=\"warning\"\n  sharpEdgeTopLeft\n>\n  <obi-placeholder slot=\"icon\"></obi-placeholder>\n  <div slot=\"label\">Low Battery</div>\n  <div slot=\"timer\">00:15</div>\n  <div>Critical system message goes here.</div>\n</obc-alert-frame>\n```",
           "name": "ObcAlertFrame",
           "slots": [
             {
@@ -38795,11 +39349,31 @@
               "kind": "field",
               "name": "status",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
-              "description": "Status of the alert, controlling color scheme and icon.\n- `alarm`: Highest severity (default).\n- `warning`: Medium severity.\n- `caution`: Lower severity.",
+              "description": "Status of the alert, controlling color scheme and icon.\n- `alarm`: Highest severity (default).\n- `warning`: Medium severity.\n- `caution`: Lower severity.\n- `isa-critical`, `isa-high`, `isa-medium`, `isa-low`, `isa-diagnostic`: ISA severity levels, styled to match their legacy equivalents.",
               "attribute": "status"
             },
+            {
+              "kind": "field",
+              "name": "mode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "description": "Acknowledgement lifecycle state, controlling the frame's blinking/animation.\n- `acked-active`: Active and acknowledged (default); no blinking.\n- `unacked-active`: Active and not yet acknowledged; blinks.\n- `unacked-rectified`: Condition cleared but not yet acknowledged.",
+              "attribute": "mode"
+            },
+            {
+              "kind": "field",
+              "name": "wrapContent",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When true, the frame wraps and sizes itself to its slotted content instead\nof overlaying a fixed region. Reflected to an attribute for CSS styling.",
+              "attribute": "wrapContent",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "sharpEdgeTopLeft",
@@ -38869,6 +39443,16 @@
               "kind": "method",
               "name": "flap",
               "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "renderBadgeIcon",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              }
             }
           ],
           "attributes": [
@@ -38891,11 +39475,28 @@
             {
               "name": "status",
               "type": {
-                "text": "ObcAlertFrameStatus"
+                "text": "AlertType"
               },
-              "description": "Status of the alert, controlling color scheme and icon.\n- `alarm`: Highest severity (default).\n- `warning`: Medium severity.\n- `caution`: Lower severity.",
+              "description": "Status of the alert, controlling color scheme and icon.\n- `alarm`: Highest severity (default).\n- `warning`: Medium severity.\n- `caution`: Lower severity.\n- `isa-critical`, `isa-high`, `isa-medium`, `isa-low`, `isa-diagnostic`: ISA severity levels, styled to match their legacy equivalents.",
               "fieldName": "status"
             },
+            {
+              "name": "mode",
+              "type": {
+                "text": "ObcAlertFrameMode"
+              },
+              "description": "Acknowledgement lifecycle state, controlling the frame's blinking/animation.\n- `acked-active`: Active and acknowledged (default); no blinking.\n- `unacked-active`: Active and not yet acknowledged; blinks.\n- `unacked-rectified`: Condition cleared but not yet acknowledged.",
+              "fieldName": "mode"
+            },
+            {
+              "name": "wrapContent",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When true, the frame wraps and sizes itself to its slotted content instead\nof overlaying a fixed region. Reflected to an attribute for CSS styling.",
+              "fieldName": "wrapContent"
+            },
             {
               "name": "sharpEdgeTopLeft",
               "type": {
@@ -38957,6 +39558,14 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "ObcAlertFrameStatus",
+          "declaration": {
+            "name": "AlertType",
+            "module": "../../types.js"
+          }
+        },
         {
           "kind": "js",
           "name": "ObcAlertFrame",
@@ -38972,6 +39581,14 @@
             "name": "ObcAlertFrame",
             "module": "src/components/alert-frame/alert-frame.ts"
           }
+        },
+        {
+          "kind": "js",
+          "name": "wrapWithAlertFrame",
+          "declaration": {
+            "name": "wrapWithAlertFrame",
+            "module": "src/components/alert-frame/alert-frame.ts"
+          }
         }
       ]
     },
@@ -39016,10 +39633,39 @@
               },
               "attribute": "outline"
             },
+            {
+              "kind": "field",
+              "name": "bamType",
+              "type": {
+                "text": "AlertType"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "icon",
               "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "renderOutlineIcon",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderStaticIcon",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              }
             }
           ],
           "attributes": [
@@ -40851,7 +41497,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<obc-badge>` – A compact visual indicator for status, alerts, or notifications, optionally displaying a number and/or icon.\n\nBadges are used to draw attention to status changes, counts, or important information in a concise format. They can represent alert states (such as alarm, warning, or running), notification counts, or other contextual statuses. The badge adapts its appearance based on type, size, and variant, and can display an icon, a number, or both.\n\n---\n\n### Features\n- **Type options:** Supports multiple visual types:\n  - `regular`: Default neutral badge.\n  - `alarm`: Highlights critical or urgent states.\n  - `warning`: Indicates caution or warning.\n  - `caution`: Used for less severe caution.\n  - `running`: Represents active or running states.\n  - `notification`: For general notifications.\n  - `enhance`: For secondary notifications or emphasis.\n  - `automation`: For automation-related status.\n  - `outline`: Outline-only style (flat variant only).\n  - `empty`: Minimal badge with no icon or number.\n- **Size options:** `regular` (default) and `large` for increased visibility.\n- **Variants:**\n  - `default`: Filled background and border.\n  - `flat`: Minimal background, outline, and lighter appearance.\n- **Icon support:** Can display a contextual icon (built-in for alarm, warning, caution, running; custom via slot for others).\n- **Number display:** Optionally shows a number (e.g., count of notifications).\n- **Hide number:** Can suppress the number for a purely symbolic badge.\n- **Custom icon slot:** For types without a built-in icon, developers can provide a custom icon using the `badge-icon` slot.\n- **Responsive layout:** Adjusts size and spacing based on the `size` property.\n\n---\n\n### Usage Guidelines\n- Use `obc-badge` to highlight status, counts, or alerts in a compact form, such as notification indicators, unread message counts, or system status.\n- Choose the `type` that matches the semantic meaning (e.g., `alarm` for critical, `warning` for caution, `running` for active).\n- Use the `number` property to show counts; set `showNumber` to false for symbolic-only badges.\n- Use the `flat` variant for less prominent or secondary contexts.\n- For custom icons, provide an icon element in the `badge-icon` slot.\n- Avoid using badges for persistent or detailed information; they are intended for brief, glanceable status.\n- **TODO(designer):** Confirm recommended use cases for `enhance`, `automation`, and `outline` types, and clarify when to use `empty` type versus hiding the badge entirely.\n\n---\n\n### Slots\n\n| Slot Name     | Renders When...                | Purpose                                             |\n|---------------|-------------------------------|-----------------------------------------------------|\n| `badge-icon`  | `showIcon` is true and `type` is not one of `alarm`, `warning`, `caution`, `running` | Custom icon for the badge (e.g., `<obi-placeholder>`). |\n\n---\n\n### Properties and Attributes\n- `number` (number): The numeric value to display in the badge. Defaults to 0.\n- `showNumber` (boolean): If true, the number is shown. Set to `false` for symbolic or icon-only badges.\n- `type` (string): Visual style of the badge. See **Type options** above for possible values. Defaults to `regular`.\n- `size` (string): Badge size, either `regular` (default) or `large`.\n- `variant` (string): Visual variant, either `default` (filled) or `flat` (minimal). Defaults to `default`.\n- `showIcon` (boolean): If true, displays an icon appropriate to the badge type. For custom types, supply an icon in the `badge-icon` slot.\n\n---\n\n### Best Practices and Constraints\n- Use badge types consistently to communicate status meaningfully.\n- For accessibility, ensure the badge's meaning is also conveyed via text or ARIA attributes if used as a status indicator.\n- Avoid overloading the badge with large numbers or excessive detail; keep content concise.\n- The `empty` type is intended for minimal presence—use when a placeholder badge is needed without icon or number.\n- For custom icons, use OpenBridge icon elements such as `<obi-placeholder>` in the `badge-icon` slot.\n- The badge does not emit any custom events.\n\n---\n\n### Example\n\n```html\n<obc-badge type=\"alarm\" number=\"3\" showIcon>\n  <!-- For custom types, provide an icon: -->\n  <obi-placeholder slot=\"badge-icon\"></obi-placeholder>\n</obc-badge>\n```\n\nIn this example, the badge displays an alarm icon and the number 3.",
+          "description": "`<obc-badge>` – A compact visual indicator for status, alerts, or notifications, optionally displaying a number and/or icon.\n\nBadges are used to draw attention to status changes, counts, or important information in a concise format. They can represent alert states (such as alarm, warning, or running), notification counts, or other contextual statuses. The badge adapts its appearance based on type, size, and variant, and can display an icon, a number, or both.\n\n---\n\n### Features\n- **Type options:** Supports multiple visual types:\n  - `regular`: Default neutral badge.\n  - `alarm`: Highlights critical or urgent states.\n  - `warning`: Indicates caution or warning.\n  - `caution`: Used for less severe caution.\n  - `isa-critical`, `isa-high`, `isa-medium`, `isa-low`, `isa-diagnostic`: ISA severity levels, styled to match their legacy equivalents (critical, alarm, warning, caution, notification).\n  - `running`: Represents active or running states.\n  - `notification`: For general notifications.\n  - `enhance`: For secondary notifications or emphasis.\n  - `automation`: For automation-related status.\n  - `outline`: Outline-only style (flat variant only).\n  - `empty`: Minimal badge with no icon or number.\n- **Size options:** `regular` (default) and `large` for increased visibility.\n- **Variants:**\n  - `default`: Filled background and border.\n  - `flat`: Minimal background, outline, and lighter appearance.\n- **Icon support:** Can display a contextual icon (built-in for alarm, warning, caution, running; custom via slot for others).\n- **Number display:** Optionally shows a number (e.g., count of notifications).\n- **Hide number:** Can suppress the number for a purely symbolic badge.\n- **Custom icon slot:** For types without a built-in icon, developers can provide a custom icon using the `badge-icon` slot.\n- **Responsive layout:** Adjusts size and spacing based on the `size` property.\n\n---\n\n### Usage Guidelines\n- Use `obc-badge` to highlight status, counts, or alerts in a compact form, such as notification indicators, unread message counts, or system status.\n- Choose the `type` that matches the semantic meaning (e.g., `alarm` for critical, `warning` for caution, `running` for active).\n- Use the `number` property to show counts; set `showNumber` to false for symbolic-only badges.\n- Use the `flat` variant for less prominent or secondary contexts.\n- For custom icons, provide an icon element in the `badge-icon` slot.\n- Avoid using badges for persistent or detailed information; they are intended for brief, glanceable status.\n- **TODO(designer):** Confirm recommended use cases for `enhance`, `automation`, and `outline` types, and clarify when to use `empty` type versus hiding the badge entirely.\n\n---\n\n### Slots\n\n| Slot Name     | Renders When...                | Purpose                                             |\n|---------------|-------------------------------|-----------------------------------------------------|\n| `badge-icon`  | `showIcon` is true and `type` is not one of `alarm`, `warning`, `caution`, `running` | Custom icon for the badge (e.g., `<obi-placeholder>`). |\n\n---\n\n### Properties and Attributes\n- `number` (number): The numeric value to display in the badge. Defaults to 0.\n- `showNumber` (boolean): If true, the number is shown. Set to `false` for symbolic or icon-only badges.\n- `type` (string): Visual style of the badge. See **Type options** above for possible values. Defaults to `regular`.\n- `size` (string): Badge size, either `regular` (default) or `large`.\n- `variant` (string): Visual variant, either `default` (filled) or `flat` (minimal). Defaults to `default`.\n- `showIcon` (boolean): If true, displays an icon appropriate to the badge type. For custom types, supply an icon in the `badge-icon` slot.\n\n---\n\n### Best Practices and Constraints\n- Use badge types consistently to communicate status meaningfully.\n- For accessibility, ensure the badge's meaning is also conveyed via text or ARIA attributes if used as a status indicator.\n- Avoid overloading the badge with large numbers or excessive detail; keep content concise.\n- The `empty` type is intended for minimal presence—use when a placeholder badge is needed without icon or number.\n- For custom icons, use OpenBridge icon elements such as `<obi-placeholder>` in the `badge-icon` slot.\n- The badge does not emit any custom events.\n\n---\n\n### Example\n\n```html\n<obc-badge type=\"alarm\" number=\"3\" showIcon>\n  <!-- For custom types, provide an icon: -->\n  <obi-placeholder slot=\"badge-icon\"></obi-placeholder>\n</obc-badge>\n```\n\nIn this example, the badge displays an alarm icon and the number 3.",
           "name": "ObcBadge",
           "slots": [
             {
@@ -40885,7 +41531,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Visual style/type of the badge.\n\nPossible values: `regular`, `alarm`, `warning`, `caution`, `running`, `notification`, `enhance`, `automation`, `outline`, `empty`.\n\nDefaults to `regular`.",
+              "description": "Visual style/type of the badge.\n\nPossible values: `regular`, `alarm`, `warning`, `caution`, `isa-critical`, `isa-high`, `isa-medium`, `isa-low`, `isa-diagnostic`, `running`, `notification`, `enhance`, `automation`, `outline`, `empty`.\n\nDefaults to `regular`.",
               "attribute": "type"
             },
             {
@@ -40913,7 +41559,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether to show an icon in the badge.\n\nFor built-in types (`alarm`, `warning`, `caution`, `running`), a contextual icon is shown automatically.\nFor other types, provide a custom icon in the `badge-icon` slot.",
+              "description": "Whether to show an icon in the badge.\n\nFor built-in types (`alarm`, `warning`, `caution`, the `isa-*` severities, and `running`), a contextual icon is shown automatically.\nFor other types, provide a custom icon in the `badge-icon` slot.",
               "attribute": "showIcon"
             },
             {
@@ -40946,7 +41592,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Visual style/type of the badge.\n\nPossible values: `regular`, `alarm`, `warning`, `caution`, `running`, `notification`, `enhance`, `automation`, `outline`, `empty`.\n\nDefaults to `regular`.",
+              "description": "Visual style/type of the badge.\n\nPossible values: `regular`, `alarm`, `warning`, `caution`, `isa-critical`, `isa-high`, `isa-medium`, `isa-low`, `isa-diagnostic`, `running`, `notification`, `enhance`, `automation`, `outline`, `empty`.\n\nDefaults to `regular`.",
               "fieldName": "type"
             },
             {
@@ -40971,7 +41617,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether to show an icon in the badge.\n\nFor built-in types (`alarm`, `warning`, `caution`, `running`), a contextual icon is shown automatically.\nFor other types, provide a custom icon in the `badge-icon` slot.",
+              "description": "Whether to show an icon in the badge.\n\nFor built-in types (`alarm`, `warning`, `caution`, the `isa-*` severities, and `running`), a contextual icon is shown automatically.\nFor other types, provide a custom icon in the `badge-icon` slot.",
               "fieldName": "showIcon"
             }
           ],
@@ -49905,6 +50551,74 @@
               "default": "false",
               "attribute": "hasIcon"
             },
+            {
+              "kind": "field",
+              "name": "treeMode",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Set by `obc-navigation-menu` in its Tree variant — renders the group as a tree row.",
+              "attribute": "treeMode"
+            },
+            {
+              "kind": "field",
+              "name": "treeBranches",
+              "type": {
+                "text": "TreeBranchType[]"
+              },
+              "default": "[]",
+              "description": "Indentation columns for tree mode, assigned by `obc-navigation-menu`.",
+              "attribute": "treeBranches"
+            },
+            {
+              "kind": "field",
+              "name": "terminalType",
+              "type": {
+                "text": "string"
+              },
+              "description": "Terminal type for the group header in the Tree variant — one of `regular`\n(default), `aggregated-header`, or `group-header`. No effect in flat variants.",
+              "attribute": "terminalType"
+            },
+            {
+              "kind": "field",
+              "name": "hasAlertBadge",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether a trailing alert counter badge is shown on the header (Tree variant only).",
+              "attribute": "hasAlertBadge"
+            },
+            {
+              "kind": "field",
+              "name": "alertCount",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The number shown in the header's alert badge when `hasAlertBadge` is true (Tree variant only).",
+              "attribute": "alertCount"
+            },
+            {
+              "kind": "field",
+              "name": "alertType",
+              "type": {
+                "text": "string"
+              },
+              "description": "The severity/type of the header's alert badge — one of the `obc-badge` types (Tree variant only).",
+              "attribute": "alertType"
+            },
+            {
+              "kind": "field",
+              "name": "defaultOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the group starts expanded. Useful for trees that open by default.",
+              "attribute": "defaultOpen"
+            },
             {
               "kind": "field",
               "name": "openContainer",
@@ -49922,6 +50636,16 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "expanded",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "description": "Whether the group is currently open (its children are disclosed).",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "onClickGroup",
@@ -50016,6 +50740,67 @@
               },
               "default": "false",
               "fieldName": "hasIcon"
+            },
+            {
+              "name": "treeMode",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Set by `obc-navigation-menu` in its Tree variant — renders the group as a tree row.",
+              "fieldName": "treeMode"
+            },
+            {
+              "name": "treeBranches",
+              "type": {
+                "text": "TreeBranchType[]"
+              },
+              "default": "[]",
+              "description": "Indentation columns for tree mode, assigned by `obc-navigation-menu`.",
+              "fieldName": "treeBranches"
+            },
+            {
+              "name": "terminalType",
+              "type": {
+                "text": "string"
+              },
+              "description": "Terminal type for the group header in the Tree variant — one of `regular`\n(default), `aggregated-header`, or `group-header`. No effect in flat variants.",
+              "fieldName": "terminalType"
+            },
+            {
+              "name": "hasAlertBadge",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether a trailing alert counter badge is shown on the header (Tree variant only).",
+              "fieldName": "hasAlertBadge"
+            },
+            {
+              "name": "alertCount",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The number shown in the header's alert badge when `hasAlertBadge` is true (Tree variant only).",
+              "fieldName": "alertCount"
+            },
+            {
+              "name": "alertType",
+              "type": {
+                "text": "string"
+              },
+              "description": "The severity/type of the header's alert badge — one of the `obc-badge` types (Tree variant only).",
+              "fieldName": "alertType"
+            },
+            {
+              "name": "defaultOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the group starts expanded. Useful for trees that open by default.",
+              "fieldName": "defaultOpen"
             }
           ],
           "superclass": {
@@ -50139,6 +50924,64 @@
               "default": "false",
               "attribute": "hasTrailingIcon"
             },
+            {
+              "kind": "field",
+              "name": "treeMode",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Set by `obc-navigation-menu` in its Tree variant — renders the row as a tree item.",
+              "attribute": "treeMode"
+            },
+            {
+              "kind": "field",
+              "name": "treeBranches",
+              "type": {
+                "text": "TreeBranchType[]"
+              },
+              "default": "[]",
+              "description": "Indentation columns for tree mode, assigned by `obc-navigation-menu`.",
+              "attribute": "treeBranches"
+            },
+            {
+              "kind": "field",
+              "name": "terminalType",
+              "type": {
+                "text": "string"
+              },
+              "description": "Terminal type for the row in the Tree variant — one of `regular` (default),\n`aggregated-header`, or `group-header`. Has no effect in the flat variants.",
+              "attribute": "terminalType"
+            },
+            {
+              "kind": "field",
+              "name": "hasAlertBadge",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether a trailing alert counter badge is shown (Tree variant only).",
+              "attribute": "hasAlertBadge"
+            },
+            {
+              "kind": "field",
+              "name": "alertCount",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The number shown in the alert badge when `hasAlertBadge` is true (Tree variant only).",
+              "attribute": "alertCount"
+            },
+            {
+              "kind": "field",
+              "name": "alertType",
+              "type": {
+                "text": "string"
+              },
+              "description": "The severity/type of the alert badge — one of the `obc-badge` types (Tree variant only).",
+              "attribute": "alertType"
+            },
             {
               "kind": "field",
               "name": "anchorElement",
@@ -50147,6 +50990,14 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "treeItemElement",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "onClick",
@@ -50277,6 +51128,58 @@
               },
               "default": "false",
               "fieldName": "hasTrailingIcon"
+            },
+            {
+              "name": "treeMode",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Set by `obc-navigation-menu` in its Tree variant — renders the row as a tree item.",
+              "fieldName": "treeMode"
+            },
+            {
+              "name": "treeBranches",
+              "type": {
+                "text": "TreeBranchType[]"
+              },
+              "default": "[]",
+              "description": "Indentation columns for tree mode, assigned by `obc-navigation-menu`.",
+              "fieldName": "treeBranches"
+            },
+            {
+              "name": "terminalType",
+              "type": {
+                "text": "string"
+              },
+              "description": "Terminal type for the row in the Tree variant — one of `regular` (default),\n`aggregated-header`, or `group-header`. Has no effect in the flat variants.",
+              "fieldName": "terminalType"
+            },
+            {
+              "name": "hasAlertBadge",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether a trailing alert counter badge is shown (Tree variant only).",
+              "fieldName": "hasAlertBadge"
+            },
+            {
+              "name": "alertCount",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The number shown in the alert badge when `hasAlertBadge` is true (Tree variant only).",
+              "fieldName": "alertCount"
+            },
+            {
+              "name": "alertType",
+              "type": {
+                "text": "string"
+              },
+              "description": "The severity/type of the alert badge — one of the `obc-badge` types (Tree variant only).",
+              "fieldName": "alertType"
             }
           ],
           "superclass": {
@@ -50312,7 +51215,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<obc-navigation-menu>` – A flexible, slot-based navigation menu component for organizing primary and secondary navigation items.\n\nThis component provides a vertical navigation structure supporting groups, flyouts, and footer sections. It adapts to various layouts and device sizes via its `variant` and `smallScreen` properties. Items and groups are provided via slots, allowing for icons, labels, and nested navigation hierarchies.\n\nAppears as a sidebar or persistent navigation panel, supporting both icon-only and full-label modes. Designed for use as the main navigation in applications, dashboards, or any interface requiring structured navigation.\n\n## Features\n\n- **Variants:**\n  - **Full:** Displays both icons and labels for all navigation items (default).\n  - **IconOnly:** Shows only icons for a compact appearance. *Should only be used when no navigation items have sub-items or flyouts.*\n  - **IconOnlyLarge:** Icon-only mode that supports flyouts/submenus. Use when navigation contains groups or nested items.\n  - **Compact:** Reduces padding and overall width for a space-saving layout.\n- **Responsive Layout:**\n  - `smallScreen` property adapts the footer and logo layout for smaller viewports.\n- **Slot-based Content:**\n  - `main` slot for primary navigation items and groups.\n  - `footer` slot for secondary actions or links.\n  - `logo` slot for branding or logo placement (position adapts based on variant and screen size).\n- **Nested Navigation:**\n  - Supports nested groups and flyouts via `<obc-navigation-item-group>`.\n- **Automatic Variant Propagation:**\n  - Child items and groups automatically receive the correct variant for consistent appearance.\n- **Dynamic Content Handling:**\n  - Reacts to dynamic addition/removal of items and groups, updating layout and variants as needed.\n- **Interaction:**\n  - Clicking a navigation item closes all open groups/flyouts for streamlined navigation.\n\n## Usage Guidelines\n\nUse `<obc-navigation-menu>` as the main navigation container in your application layout. Place navigation items and groups in the `main` slot for primary navigation, and use the `footer` slot for secondary actions (such as settings or help). The `logo` slot is intended for branding and is positioned according to the selected variant and screen size.\n\n- Use the `Full` variant for standard navigation with both icons and labels.\n- Use `IconOnly` only when there are no nested groups or flyouts; otherwise, use `IconOnlyLarge` for icon-only navigation with flyout support.\n- The `Compact` variant is suitable for layouts with limited space or when a minimal navigation appearance is desired.\n- Set `smallScreen` to `true` to optimize the layout for smaller devices or responsive breakpoints.\n\n**TODO(designer):** Provide additional guidance on when to use each variant and recommended slot content for best usability.\n\n## Slots\n\n| Slot Name | Renders When... | Purpose |\n|-----------|----------------|---------|\n| main      | Always         | Primary navigation items and groups. |\n| footer    | Always         | Secondary navigation items (e.g., settings, help). |\n| logo      | Always         | Branding/logo area (position varies by variant and screen size). |\n\nPlace `<obc-navigation-item>`, `<obc-navigation-item-group>`, or other suitable elements in these slots. For icons, use `<obi-placeholder>`, `<obi-applications>`, or other OpenBridge icon components in the `icon` slot of each navigation item.\n\n## Properties\n\n- `variant` (`ObcNavigationMenuVariant`): Controls the visual style and layout of the menu. Default is `Full`.\n- `smallScreen` (`boolean`): When `true`, adapts the layout for small screens (e.g., moves logo into the footer area).\n\n## Best Practices and Constraints\n\n- Only use the `IconOnly` variant when there are no navigation items with sub-items or flyouts. Use `IconOnlyLarge` if your navigation includes groups or nested items.\n- Place only navigation-related components in the `main` and `footer` slots for clarity and accessibility.\n- For best accessibility, ensure each navigation item has a clear label and, if using icons, a suitable `aria-label` or accessible name.\n- Avoid placing interactive elements other than navigation items/groups in the `main` or `footer` slots.\n\n## Example\n\n```html\n<obc-navigation-menu variant=\"full\">\n  <obc-navigation-item-group slot=\"main\" label=\"Apps\">\n    <obi-applications slot=\"icon\"></obi-applications>\n    <obc-navigation-item label=\"Sub item 1\" hasIcon href=\"#\">\n      <obi-placeholder slot=\"icon\"></obi-placeholder>\n    </obc-navigation-item>\n  </obc-navigation-item-group>\n  <obc-navigation-item slot=\"footer\" label=\"Settings\" hasIcon href=\"#\">\n    <obi-settings-iec slot=\"icon\"></obi-settings-iec>\n  </obc-navigation-item>\n  <obc-vendor-button imageSrc=\"/companylogo-day.png\" alt=\"logo\" slot=\"logo\"></obc-vendor-button>\n</obc-navigation-menu>\n```\n\nIn this example, the menu displays a group with sub-items in the main navigation, several footer actions, and a logo.",
+          "description": "`<obc-navigation-menu>` – A flexible, slot-based navigation menu component for organizing primary and secondary navigation items.\n\nThis component provides a vertical navigation structure supporting groups, flyouts, and footer sections. It adapts to various layouts and device sizes via its `variant` and `smallScreen` properties. Items and groups are provided via slots, allowing for icons, labels, and nested navigation hierarchies.\n\nAppears as a sidebar or persistent navigation panel, supporting both icon-only and full-label modes. Designed for use as the main navigation in applications, dashboards, or any interface requiring structured navigation.\n\n## Features\n\n- **Variants:**\n  - **Full:** Displays both icons and labels for all navigation items (default).\n  - **IconOnly:** Shows only icons for a compact appearance. *Should only be used when no navigation items have sub-items or flyouts.*\n  - **IconOnlyLarge:** Icon-only mode that supports flyouts/submenus. Use when navigation contains groups or nested items.\n  - **Compact:** Reduces padding and overall width for a space-saving layout.\n  - **Tree:** Renders the same `obc-navigation-item` / `obc-navigation-item-group`\n    markup as a hierarchical tree. Groups expand inline (instead of as flyouts),\n    rows are indented by depth, multiple branches can stay open at once, and the\n    tree-row presentation (alert badge, terminal marker) is available via the\n    items' `hasAlertBadge`/`alertCount`/`alertType`/`terminalType` properties.\n- **Responsive Layout:**\n  - `smallScreen` property adapts the footer and logo layout for smaller viewports.\n- **Slot-based Content:**\n  - `main` slot for primary navigation items and groups.\n  - `footer` slot for secondary actions or links.\n  - `logo` slot for branding or logo placement (position adapts based on variant and screen size).\n- **Nested Navigation:**\n  - Supports nested groups and flyouts via `<obc-navigation-item-group>`.\n- **Automatic Variant Propagation:**\n  - Child items and groups automatically receive the correct variant for consistent appearance.\n- **Dynamic Content Handling:**\n  - Reacts to dynamic addition/removal of items and groups, updating layout and variants as needed.\n- **Interaction:**\n  - Clicking a navigation item closes all open groups/flyouts for streamlined navigation.\n\n## Usage Guidelines\n\nUse `<obc-navigation-menu>` as the main navigation container in your application layout. Place navigation items and groups in the `main` slot for primary navigation, and use the `footer` slot for secondary actions (such as settings or help). The `logo` slot is intended for branding and is positioned according to the selected variant and screen size.\n\n- Use the `Full` variant for standard navigation with both icons and labels.\n- Use `IconOnly` only when there are no nested groups or flyouts; otherwise, use `IconOnlyLarge` for icon-only navigation with flyout support.\n- The `Compact` variant is suitable for layouts with limited space or when a minimal navigation appearance is desired.\n- Use the `Tree` variant for hierarchical navigation (file trees, nested\n  sections). The existing item/group markup is reused unchanged — only the\n  `variant` changes. Footer and logo slots remain flat. Mark a group with\n  `defaultOpen` to have it start expanded.\n- Set `smallScreen` to `true` to optimize the layout for smaller devices or responsive breakpoints.\n\n**TODO(designer):** Provide additional guidance on when to use each variant and recommended slot content for best usability.\n\n## Slots\n\n| Slot Name | Renders When... | Purpose |\n|-----------|----------------|---------|\n| main      | Always         | Primary navigation items and groups. |\n| footer    | Always         | Secondary navigation items (e.g., settings, help). |\n| logo      | Always         | Branding/logo area (position varies by variant and screen size). |\n\nPlace `<obc-navigation-item>`, `<obc-navigation-item-group>`, or other suitable elements in these slots. For icons, use `<obi-placeholder>`, `<obi-applications>`, or other OpenBridge icon components in the `icon` slot of each navigation item.\n\n## Properties\n\n- `variant` (`ObcNavigationMenuVariant`): Controls the visual style and layout of the menu. Default is `Full`.\n- `smallScreen` (`boolean`): When `true`, adapts the layout for small screens (e.g., moves logo into the footer area).\n\n## Best Practices and Constraints\n\n- Only use the `IconOnly` variant when there are no navigation items with sub-items or flyouts. Use `IconOnlyLarge` if your navigation includes groups or nested items.\n- Place only navigation-related components in the `main` and `footer` slots for clarity and accessibility.\n- For best accessibility, ensure each navigation item has a clear label and, if using icons, a suitable `aria-label` or accessible name.\n- Avoid placing interactive elements other than navigation items/groups in the `main` or `footer` slots.\n\n## Example\n\n```html\n<obc-navigation-menu variant=\"full\">\n  <obc-navigation-item-group slot=\"main\" label=\"Apps\">\n    <obi-applications slot=\"icon\"></obi-applications>\n    <obc-navigation-item label=\"Sub item 1\" hasIcon href=\"#\">\n      <obi-placeholder slot=\"icon\"></obi-placeholder>\n    </obc-navigation-item>\n  </obc-navigation-item-group>\n  <obc-navigation-item slot=\"footer\" label=\"Settings\" hasIcon href=\"#\">\n    <obi-settings-iec slot=\"icon\"></obi-settings-iec>\n  </obc-navigation-item>\n  <obc-vendor-button imageSrc=\"/companylogo-day.png\" alt=\"logo\" slot=\"logo\"></obc-vendor-button>\n</obc-navigation-menu>\n```\n\nIn this example, the menu displays a group with sub-items in the main navigation, several footer actions, and a logo.",
           "name": "ObcNavigationMenu",
           "slots": [
             {
@@ -50335,7 +51238,7 @@
               "type": {
                 "text": "ObcNavigationMenuVariant"
               },
-              "description": "Controls the visual style and layout of the navigation menu.\n\n- `full`: Standard menu with icons and labels (default).\n- `icon-only`: Compact, icon-only menu (use only when no flyouts/groups are present).\n- `icon-only-large`: Icon-only menu supporting flyouts/groups.\n- `compact`: Minimal, space-saving menu.",
+              "description": "Controls the visual style and layout of the navigation menu.\n\n- `full`: Standard menu with icons and labels (default).\n- `icon-only`: Compact, icon-only menu (use only when no flyouts/groups are present).\n- `icon-only-large`: Icon-only menu supporting flyouts/groups.\n- `compact`: Minimal, space-saving menu.\n- `tree`: Hierarchical tree — groups expand inline and rows are indented by depth.",
               "attribute": "variant"
             },
             {
@@ -50375,6 +51278,68 @@
               "privacy": "private",
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "treeNavigator",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new TreeRovingNavigator<NavTreeRow>(this, { getRows: () => this.treeRootRows(), childRows: (row) => this.treeChildRows(row), isGroup: (row) => isNavGroup(row), // Read the group's own synchronous open state, not the shadow header's // attribute (which lags a render tick behind a keyboard expand/collapse). isExpanded: (row) => isNavGroup(row) && row.expanded, setExpanded: (row, expanded) => { if (!isNavGroup(row)) return; if (expanded) row.open(); else row.close(); }, innerItem: (row) => this.treeInnerItem(row), } satisfies TreeRovingAdapter<NavTreeRow>)",
+              "description": "Roving-tabindex + arrow-key navigation for the Tree variant, sharing the\nnavigator that drives `obc-tree-navigation`. Engaged only while\n`variant === Tree` (see `onTreeKeydown`)."
+            },
+            {
+              "kind": "method",
+              "name": "treeRootRows",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "NavTreeRow[]"
+                }
+              },
+              "description": "Top-level tree rows of the main slot (mirrors `assignTreeBranches`'s filter)."
+            },
+            {
+              "kind": "method",
+              "name": "treeChildRows",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "NavTreeRow[]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "row",
+                  "type": {
+                    "text": "NavTreeRow"
+                  }
+                }
+              ],
+              "description": "Direct tree-row children of a row, in document order."
+            },
+            {
+              "kind": "method",
+              "name": "treeInnerItem",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "ObcTreeNavigationItem | null"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "row",
+                  "type": {
+                    "text": "NavTreeRow"
+                  }
+                }
+              ],
+              "description": "The inline `obc-tree-navigation-item` a tree-mode row renders in its shadow root."
+            },
+            {
+              "kind": "field",
+              "name": "onTreeKeydown",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "findAllElements",
@@ -50507,6 +51472,48 @@
               "name": "handleSlotChange",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "assignTreeBranches",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "el",
+                  "type": {
+                    "text": "Element"
+                  }
+                },
+                {
+                  "name": "depth",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "clearTreeMode",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "el",
+                  "type": {
+                    "text": "Element"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "setupItems",
@@ -50538,7 +51545,7 @@
               "type": {
                 "text": "ObcNavigationMenuVariant"
               },
-              "description": "Controls the visual style and layout of the navigation menu.\n\n- `full`: Standard menu with icons and labels (default).\n- `icon-only`: Compact, icon-only menu (use only when no flyouts/groups are present).\n- `icon-only-large`: Icon-only menu supporting flyouts/groups.\n- `compact`: Minimal, space-saving menu.",
+              "description": "Controls the visual style and layout of the navigation menu.\n\n- `full`: Standard menu with icons and labels (default).\n- `icon-only`: Compact, icon-only menu (use only when no flyouts/groups are present).\n- `icon-only-large`: Icon-only menu supporting flyouts/groups.\n- `compact`: Minimal, space-saving menu.\n- `tree`: Hierarchical tree — groups expand inline and rows are indented by depth.",
               "fieldName": "variant"
             },
             {
@@ -65729,6 +66736,824 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/tree-navigation-group/tree-navigation-group.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`<obc-tree-navigation-group>` – An expandable parent row in a tree-navigation\nstructure: a header row with an expand/collapse chevron, plus a slot for the\nchild rows it discloses.\n\nA group renders an `<obc-tree-navigation-item>` header (carrying its own label,\nicon, terminal type, and alert badge) followed by its slotted children. When\nplaced inside `<obc-tree-navigation>`, the container computes and assigns the\n`branches` guide lines for every row automatically from each row's position —\na group does not need its depth configured by hand.\n\nThe group manages only its own open/closed state and forwards header presentation\nto its internal header item. It does not draw guide lines itself; that is the\ncontainer's responsibility (see `<obc-tree-navigation>`).\n\n## Features\n- **Disclosure:** A chevron in the header toggles the slotted children. The open\n  state is held in `expanded` and reflected so the container and CSS can react.\n- **Header presentation:** `label`, the `icon` slot, `terminalType`, and the\n  alert badge (`hasAlertBadge`, `alertCount`, `alertType`) are forwarded to the\n  header row.\n- **Selection:** `checked` marks the group's header as the current item.\n- **Automatic guides:** Inside `<obc-tree-navigation>`, the header's `branches`\n  are assigned by the container; nested groups continue the guide columns down.\n\n## Usage Guidelines\n- Nest `<obc-tree-navigation-item>` (leaves) and further `<obc-tree-navigation-group>`\n  elements as children to build the hierarchy.\n- Always place groups and items inside an `<obc-tree-navigation>` container so the\n  guide lines are computed; using a group standalone draws a header with no guides.\n- Provide a header icon via the `icon` slot (forwarded to the header row).\n\n## Slots\n\n| Slot Name | Renders When...          | Purpose                                                      |\n|-----------|--------------------------|--------------------------------------------------------------|\n| icon      | `hasIcon` is true        | Leading icon for the group header row.                       |\n| (default) | Always                   | Child rows (`obc-tree-navigation-item` / `-group`).          |",
+          "name": "ObcTreeNavigationGroup",
+          "slots": [
+            {
+              "description": "Leading icon for the group header (shown when `hasIcon` is true).",
+              "name": "icon"
+            },
+            {
+              "description": "Child rows disclosed when the group is expanded.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Group'",
+              "description": "The text label displayed for the group header row.",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "branches",
+              "type": {
+                "text": "TreeBranchType[]"
+              },
+              "default": "[]",
+              "description": "Guide line to draw for each ancestor level of the header row. Normally set by\nthe parent `<obc-tree-navigation>` container from the group's position; only\nset it manually when using a group outside the container.",
+              "attribute": "branches"
+            },
+            {
+              "kind": "field",
+              "name": "expanded",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the group is expanded, disclosing its children. Rotates the chevron.",
+              "attribute": "expanded",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the group header is the current selection.",
+              "attribute": "checked",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the group header, removing it from the tab order and dimming it.",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "hasIcon",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Whether the group header shows a leading icon (provided via the `icon` slot)."
+            },
+            {
+              "kind": "field",
+              "name": "terminalType",
+              "type": {
+                "text": "string"
+              },
+              "description": "Terminal type for the header row, controlling the alert-header marker shown in\nthe terminal. One of `regular` (default), `aggregated-header`, or `group-header`.",
+              "attribute": "terminalType"
+            },
+            {
+              "kind": "field",
+              "name": "hasAlertBadge",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether a trailing alert counter badge is shown on the header row.",
+              "attribute": "hasAlertBadge"
+            },
+            {
+              "kind": "field",
+              "name": "alertCount",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The number shown in the header's alert badge when `hasAlertBadge` is true.",
+              "attribute": "alertCount"
+            },
+            {
+              "kind": "field",
+              "name": "alertType",
+              "type": {
+                "text": "string"
+              },
+              "description": "The severity/type of the header's alert badge. One of the `obc-badge` types (default `alarm`).",
+              "attribute": "alertType"
+            },
+            {
+              "kind": "field",
+              "name": "href",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The URL to navigate to when the header is activated. If set, the header row\nrenders as a link; otherwise it acts as a button.",
+              "attribute": "href"
+            },
+            {
+              "kind": "field",
+              "name": "headerItem",
+              "type": {
+                "text": "ObcTreeNavigationItem | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "onHeaderToggle",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "CustomEvent<boolean>"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "close",
+              "description": "Closes the group (and, recursively, any nested groups inside it)."
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "name": "expand-toggle",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "{CustomEvent<boolean>} Fired when the header is activated; detail is the next `expanded` value."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Group'",
+              "description": "The text label displayed for the group header row.",
+              "fieldName": "label"
+            },
+            {
+              "name": "branches",
+              "type": {
+                "text": "TreeBranchType[]"
+              },
+              "default": "[]",
+              "description": "Guide line to draw for each ancestor level of the header row. Normally set by\nthe parent `<obc-tree-navigation>` container from the group's position; only\nset it manually when using a group outside the container.",
+              "fieldName": "branches"
+            },
+            {
+              "name": "expanded",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the group is expanded, disclosing its children. Rotates the chevron.",
+              "fieldName": "expanded"
+            },
+            {
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the group header is the current selection.",
+              "fieldName": "checked"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the group header, removing it from the tab order and dimming it.",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "terminalType",
+              "type": {
+                "text": "string"
+              },
+              "description": "Terminal type for the header row, controlling the alert-header marker shown in\nthe terminal. One of `regular` (default), `aggregated-header`, or `group-header`.",
+              "fieldName": "terminalType"
+            },
+            {
+              "name": "hasAlertBadge",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether a trailing alert counter badge is shown on the header row.",
+              "fieldName": "hasAlertBadge"
+            },
+            {
+              "name": "alertCount",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The number shown in the header's alert badge when `hasAlertBadge` is true.",
+              "fieldName": "alertCount"
+            },
+            {
+              "name": "alertType",
+              "type": {
+                "text": "string"
+              },
+              "description": "The severity/type of the header's alert badge. One of the `obc-badge` types (default `alarm`).",
+              "fieldName": "alertType"
+            },
+            {
+              "name": "href",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The URL to navigate to when the header is activated. If set, the header row\nrenders as a link; otherwise it acts as a button.",
+              "fieldName": "href"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "obc-tree-navigation-group",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ObcTreeNavigationGroup",
+          "declaration": {
+            "name": "ObcTreeNavigationGroup",
+            "module": "src/components/tree-navigation-group/tree-navigation-group.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "obc-tree-navigation-group",
+          "declaration": {
+            "name": "ObcTreeNavigationGroup",
+            "module": "src/components/tree-navigation-group/tree-navigation-group.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/tree-navigation-item/tree-navigation-item.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`<obc-tree-navigation-item>` – A single row in a tree- or file-explorer-style\nnavigation list, with indentation guide lines, an optional expand/collapse\nchevron, a leading icon, a label, and an optional alert badge.\n\nEach row represents one node in a hierarchy. Depth is expressed through the\n`branches` array: one entry per ancestor level, each describing the guide line\nto draw for that level. The expand chevron lets a node disclose its children,\nemitting `expand-toggle` so a parent can manage the open/closed state.\n\n## Features\n- **Indentation guides:** Render one 32px guide column per `branches` entry —\n  pass-through vertical lines for ancestors that continue, and an elbow\n  (`intersection`) connecting the row to its parent.\n- **Expand/collapse:** Set `expandable` to show a chevron that rotates when\n  `expanded`. The chevron is a visual indicator only — activating the row\n  fires `expand-toggle` with the next state; manage `expanded` in response.\n  When `expanded`, a vertical guide descends from the chevron to connect to\n  the revealed child rows below.\n- **Terminal type:** `terminalType` adds an alert-header marker in the terminal\n  (`aggregatedHeader` or `groupHeader`), indicating the node heads a set of\n  aggregated or grouped alerts.\n- **Leading icon:** Provide an icon via the `icon` slot (shown when\n  `hasLeadingIcon`).\n- **Alert badge:** A trailing counter badge (e.g. an alarm count), toggled with\n  `hasAlertBadge` and configured via `alertCount` and `alertType`.\n- **Checked state:** `checked` highlights the current selection using the\n  amplified elevation style. A checked row is the current item and is not\n  re-selectable — it shows no hover/pressed feedback and fires no `click` or\n  navigation. An expandable checked row still toggles (fires `expand-toggle`),\n  so a group that is the current selection can be opened and closed. It stays\n  keyboard-focusable.\n- **Link or button:** Set `href` to render the row as a link; otherwise it acts\n  as a button.\n\n## Usage Guidelines\n- Use for hierarchical navigation such as file trees, layer panels, or nested\n  menus. For flat navigation lists, use `obc-navigation-item` instead.\n- Build `branches` from the row's ancestry: `intersection` for the level that\n  owns this row, `straight` for ancestors with siblings still to come, and\n  `blank` for ancestors whose subtrees have ended. When placed inside\n  `obc-tree-navigation`, the container computes `branches` automatically.\n- Keep one row `checked` at a time within a tree to mark the current location.\n- Leaf nodes should leave `expandable` as `false` so no chevron is shown.\n\n## Slots\n\n| Slot Name      | Renders When...                 | Purpose                                                                 |\n|----------------|---------------------------------|-------------------------------------------------------------------------|\n| icon           | `hasLeadingIcon` is true        | Leading icon for the row, e.g. `<obi-placeholder slot=\"icon\">`.         |",
+          "name": "ObcTreeNavigationItem",
+          "slots": [
+            {
+              "description": "Leading icon slot (shown when `hasLeadingIcon` is true).",
+              "name": "icon"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "'List item'",
+              "description": "The text label displayed for the row.",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "branches",
+              "type": {
+                "text": "TreeBranchType[]"
+              },
+              "default": "[]",
+              "description": "Guide line for each ancestor level, outermost first; one 32px column per\nentry. Computed by `obc-tree-navigation` — rarely set by hand.",
+              "attribute": "branches"
+            },
+            {
+              "kind": "field",
+              "name": "expandable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the row shows an expand/collapse chevron. Leave false for leaf nodes.",
+              "attribute": "expandable"
+            },
+            {
+              "kind": "field",
+              "name": "expanded",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the node is expanded. Rotates the chevron and sets `aria-expanded`.",
+              "attribute": "expanded",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the row is the current selection. Applies the amplified style and\nmakes the row inert to re-selection (no hover/pressed feedback, no `click`\nor navigation); it remains keyboard-focusable. An expandable checked row\nstill fires `expand-toggle` so a selected group can open and close.",
+              "attribute": "checked",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the row, removing it from the tab order and dimming its appearance.",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "focusable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Whether the row is in the tab order. A tree container manages this as a\nroving tabindex (one row focusable at a time); standalone rows stay tabbable."
+            },
+            {
+              "kind": "field",
+              "name": "hasLeadingIcon",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Whether the row shows a leading icon (provided via the `icon` slot)."
+            },
+            {
+              "kind": "field",
+              "name": "terminalType",
+              "type": {
+                "text": "string"
+              },
+              "description": "Terminal type, controlling the alert-header marker shown in the terminal.\nOne of `regular` (default), `aggregated-header`, or `group-header`.",
+              "attribute": "terminalType"
+            },
+            {
+              "kind": "field",
+              "name": "hasAlertBadge",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether a trailing alert counter badge is shown.",
+              "attribute": "hasAlertBadge"
+            },
+            {
+              "kind": "field",
+              "name": "alertCount",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The number shown in the alert badge when `hasAlertBadge` is true.",
+              "attribute": "alertCount"
+            },
+            {
+              "kind": "field",
+              "name": "alertType",
+              "type": {
+                "text": "string"
+              },
+              "description": "The severity/type of the alert badge. One of the `obc-badge` types (default `alarm`).",
+              "attribute": "alertType"
+            },
+            {
+              "kind": "field",
+              "name": "href",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The URL to navigate to when the row is activated. If set, the row renders as\na link; otherwise it acts as a button.",
+              "attribute": "href"
+            },
+            {
+              "kind": "field",
+              "name": "wrapperElement",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Focuses the row's interactive wrapper (the host itself is not focusable)."
+            },
+            {
+              "kind": "field",
+              "name": "isRoot",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "description": "A root-level row has no ancestor columns, so it draws no connector lines.",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "isBlankAncestry",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "description": "All ancestor columns are blank spacers — the row is indented but draws no\nguide lines, so the terminal connector and dropdown are suppressed too.",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "activate",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleKeydown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "renderBranch",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "TreeBranchType"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "renderTerminalHeader",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "name": "expand-toggle",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "{CustomEvent<boolean>} Fired when an expandable row is activated; detail is the next `expanded` value."
+            },
+            {
+              "name": "click",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "{CustomEvent<void>} Fired when the row is activated."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "'List item'",
+              "description": "The text label displayed for the row.",
+              "fieldName": "label"
+            },
+            {
+              "name": "branches",
+              "type": {
+                "text": "TreeBranchType[]"
+              },
+              "default": "[]",
+              "description": "Guide line for each ancestor level, outermost first; one 32px column per\nentry. Computed by `obc-tree-navigation` — rarely set by hand.",
+              "fieldName": "branches"
+            },
+            {
+              "name": "expandable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the row shows an expand/collapse chevron. Leave false for leaf nodes.",
+              "fieldName": "expandable"
+            },
+            {
+              "name": "expanded",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the node is expanded. Rotates the chevron and sets `aria-expanded`.",
+              "fieldName": "expanded"
+            },
+            {
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the row is the current selection. Applies the amplified style and\nmakes the row inert to re-selection (no hover/pressed feedback, no `click`\nor navigation); it remains keyboard-focusable. An expandable checked row\nstill fires `expand-toggle` so a selected group can open and close.",
+              "fieldName": "checked"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the row, removing it from the tab order and dimming its appearance.",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "terminalType",
+              "type": {
+                "text": "string"
+              },
+              "description": "Terminal type, controlling the alert-header marker shown in the terminal.\nOne of `regular` (default), `aggregated-header`, or `group-header`.",
+              "fieldName": "terminalType"
+            },
+            {
+              "name": "hasAlertBadge",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether a trailing alert counter badge is shown.",
+              "fieldName": "hasAlertBadge"
+            },
+            {
+              "name": "alertCount",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The number shown in the alert badge when `hasAlertBadge` is true.",
+              "fieldName": "alertCount"
+            },
+            {
+              "name": "alertType",
+              "type": {
+                "text": "string"
+              },
+              "description": "The severity/type of the alert badge. One of the `obc-badge` types (default `alarm`).",
+              "fieldName": "alertType"
+            },
+            {
+              "name": "href",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The URL to navigate to when the row is activated. If set, the row renders as\na link; otherwise it acts as a button.",
+              "fieldName": "href"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "obc-tree-navigation-item",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ObcTreeNavigationItem",
+          "declaration": {
+            "name": "ObcTreeNavigationItem",
+            "module": "src/components/tree-navigation-item/tree-navigation-item.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "obc-tree-navigation-item",
+          "declaration": {
+            "name": "ObcTreeNavigationItem",
+            "module": "src/components/tree-navigation-item/tree-navigation-item.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/tree-navigation/tree-navigation.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`<obc-tree-navigation>` – The container for a tree- or file-explorer-style\nnavigation list. Holds nested `<obc-tree-navigation-group>` and\n`<obc-tree-navigation-item>` rows and computes each row's indentation guide\nlines automatically from its position in the hierarchy.\n\nConsumers write the tree as plain nested markup; the container assigns every\nrow's `branches` array so the guide lines (pass-through verticals, elbows, and\nthe last-child corner) connect correctly — there is no need to compute depth or\nbranch types by hand. It re-derives the guides whenever rows are added, removed,\nor groups expand and collapse.\n\n## Features\n- **Automatic guide lines:** Each row receives a `branches` array derived from\n  its depth and whether each ancestor still has siblings below it. Last children\n  get a corner (`└`); rows with siblings below get an intersection (`├`); and\n  ancestor columns become a pass-through (`│`) or blank as appropriate.\n- **Live updates:** Reacts to slotted content changes and to group expand state,\n  recomputing the guides so they always match the visible structure.\n- **Composable:** Works with any nesting depth of groups and items.\n\n## Usage Guidelines\n- Use as the root of a hierarchical navigation list. For flat navigation, use\n  `obc-navigation-menu` instead.\n- Place `<obc-tree-navigation-group>` for expandable parents and\n  `<obc-tree-navigation-item>` for leaves; nest groups to any depth.\n- Do not set each row's `branches` manually — the container manages them.\n\n## Slots\n\n| Slot Name | Renders When... | Purpose                                            |\n|-----------|-----------------|----------------------------------------------------|\n| (default) | Always          | Top-level rows (`obc-tree-navigation-group`/`-item`). |",
+          "name": "ObcTreeNavigation",
+          "slots": [
+            {
+              "description": "Top-level tree rows (groups and items).",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "mutationObserver",
+              "type": {
+                "text": "MutationObserver | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "innerItem",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "ObcTreeNavigationItem | null"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "row",
+                  "type": {
+                    "text": "TreeRow"
+                  }
+                }
+              ],
+              "description": "The focusable header item for a row: a leaf is itself; a group's is its shadow header."
+            },
+            {
+              "kind": "field",
+              "name": "navigator",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new TreeRovingNavigator<TreeRow>(this, { getRows: () => this.childRows(this), childRows: (row) => this.childRows(row), isGroup: (row) => isGroup(row), isExpanded: (row) => isGroup(row) && row.hasAttribute('expanded'), setExpanded: (row, expanded) => { if (isGroup(row)) row.expanded = expanded; }, innerItem: (row) => this.innerItem(row), isDisabled: (row) => this.innerItem(row)?.hasAttribute('disabled') ?? false, } satisfies TreeRovingAdapter<TreeRow>)"
+            },
+            {
+              "kind": "field",
+              "name": "onKeydown",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "onExpandToggle",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "childRows",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TreeRow[]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "el",
+                  "type": {
+                    "text": "Element"
+                  }
+                }
+              ],
+              "description": "Direct tree-row children of an element, in document order."
+            },
+            {
+              "kind": "method",
+              "name": "assignBranches",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "rows",
+                  "type": {
+                    "text": "TreeRow[]"
+                  },
+                  "description": "sibling rows at this level, in order"
+                },
+                {
+                  "name": "ancestorHasNextSibling",
+                  "type": {
+                    "text": "boolean[]"
+                  },
+                  "description": "one flag per ancestor *below the root*: true\nif that ancestor has a sibling still below it (so its column is a\npass-through), false if its subtree has ended (a blank column)"
+                },
+                {
+                  "name": "depth",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "nesting depth; 0 for top-level rows (which draw no columns)"
+                }
+              ],
+              "description": "Walk the row tree and assign each row's `branches`. Mirrors the guide-line\nmodel: a row gets one column per ancestor (pass-through `straight` if that\nancestor still has siblings below, else `blank`) followed by its own elbow\n(`corner` if it is the last child, else `intersection`). Top-level rows draw\nno columns at all."
+            },
+            {
+              "kind": "method",
+              "name": "updateBranches",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "obc-tree-navigation",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ObcTreeNavigation",
+          "declaration": {
+            "name": "ObcTreeNavigation",
+            "module": "src/components/tree-navigation/tree-navigation.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "obc-tree-navigation",
+          "declaration": {
+            "name": "ObcTreeNavigation",
+            "module": "src/components/tree-navigation/tree-navigation.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/user-button/user-button.ts",
@@ -81601,7 +83426,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<obc-readout-list-item>` – A compact inline readout row for lists.\n\nRenders a compact label/value/unit composition with a dedicated size scale and stacking modes for unit and source placement. Use it when you need dense, consistent readout rows in tables or lists without bringing in the full `<obc-readout>` segment layout.\n\n### Features\n- **Sizes:** `base`, `priority`, and `enhanced` typography/padding scales.\n- **Stacking modes:** `trailing-unit`, `leading-unit`, and `leading-src` control where unit/source appear relative to the label/value.\n- **Priority styling:** `priority` controls emphasis and setpoint presentation (`regular`, `enhanced`, `setpoint`, `setpoint-flip-flop`).\n- **Alert states:** Supports `alertState` styling for integrity/invalid and attention states (`caution`, `warning`, `alarm`).\n- **Formatting:** Supports numeric formatting, fixed-length width templates, hinted zeros, and optional degree suffix (`°`).\n\n### Usage Guidelines\nUse this component for dense readouts in list contexts. Prefer `<obc-readout>` when you need multi-segment advice/setpoint/source composition, rich layouts, or source picker/flyout behavior.\n\n### Slots\n| Slot Name     | Renders When             | Purpose |\n|---------------|--------------------------|---------|\n| leading-icon  | `hasLeadingIcon` is true | Optional leading icon before the label. |\n| value-icon    | `hasValueIcon` is true   | Optional icon next to the value. |",
+          "description": "`<obc-readout-list-item>` – A compact inline readout row for lists.\n\nRenders a compact label/value/unit composition with a dedicated size scale and stacking modes for unit and source placement. Use it when you need dense, consistent readout rows in tables or lists without bringing in the full `<obc-readout>` segment layout.\n\n### Features\n- **Sizes:** `base`, `priority`, and `enhanced` typography/padding scales.\n- **Stacking modes:** `trailing-unit`, `leading-unit`, and `leading-src` control where unit/source appear relative to the label/value.\n- **Priority styling:** `priority` controls emphasis and setpoint presentation (`regular`, `enhanced`, `setpoint`, `setpoint-flip-flop`).\n- **Data states:** Supports `dataState` styling for `low-integrity` and `invalid` data quality.\n- **Alert frame:** Optional `alert` wrapper for caution, warning, alarm, and other alert-frame statuses.\n- **Formatting:** Supports numeric formatting, fixed-length width templates, hinted zeros, and optional degree suffix (`°`).\n\n### Usage Guidelines\nUse this component for dense readouts in list contexts. Prefer `<obc-readout>` when you need multi-segment advice/setpoint/source composition, rich layouts, or source picker/flyout behavior.\n\n### Slots\n| Slot Name     | Renders When             | Purpose |\n|---------------|--------------------------|---------|\n| leading-icon  | `hasLeadingIcon` is true | Optional leading icon before the label. |\n| value-icon    | `hasValueIcon` is true   | Optional icon next to the value. |",
           "name": "ObcReadoutListItem",
           "slots": [
             {
@@ -81640,11 +83465,20 @@
             },
             {
               "kind": "field",
-              "name": "alertState",
+              "name": "dataState",
               "type": {
-                "text": "ReadoutListItemAlertState"
+                "text": "ReadoutListItemDataState"
               },
-              "attribute": "alertState"
+              "attribute": "dataState"
+            },
+            {
+              "kind": "field",
+              "name": "alert",
+              "type": {
+                "text": "AlertFrameConfig | boolean"
+              },
+              "default": "false",
+              "attribute": "alert"
             },
             {
               "kind": "field",
@@ -81957,11 +83791,19 @@
               "fieldName": "priority"
             },
             {
-              "name": "alertState",
+              "name": "dataState",
+              "type": {
+                "text": "ReadoutListItemDataState"
+              },
+              "fieldName": "dataState"
+            },
+            {
+              "name": "alert",
               "type": {
-                "text": "ReadoutListItemAlertState"
+                "text": "AlertFrameConfig | boolean"
               },
-              "fieldName": "alertState"
+              "default": "false",
+              "fieldName": "alert"
             },
             {
               "name": "label",
@@ -82808,11 +84650,11 @@
             },
             {
               "kind": "field",
-              "name": "alertState",
+              "name": "dataState",
               "type": {
-                "text": "ReadoutAlertState"
+                "text": "ReadoutDataState"
               },
-              "attribute": "alertState"
+              "attribute": "dataState"
             },
             {
               "kind": "field",
@@ -82954,6 +84796,15 @@
               "default": "false",
               "attribute": "hasLeadingIcon"
             },
+            {
+              "kind": "field",
+              "name": "alert",
+              "type": {
+                "text": "AlertFrameConfig | boolean"
+              },
+              "default": "false",
+              "attribute": "alert"
+            },
             {
               "kind": "field",
               "name": "sourceHug",
@@ -83684,11 +85535,11 @@
               "fieldName": "valuePriority"
             },
             {
-              "name": "alertState",
+              "name": "dataState",
               "type": {
-                "text": "ReadoutAlertState"
+                "text": "ReadoutDataState"
               },
-              "fieldName": "alertState"
+              "fieldName": "dataState"
             },
             {
               "name": "setpointInteraction",
@@ -83814,6 +85665,14 @@
               "default": "false",
               "fieldName": "hasLeadingIcon"
             },
+            {
+              "name": "alert",
+              "type": {
+                "text": "AlertFrameConfig | boolean"
+              },
+              "default": "false",
+              "fieldName": "alert"
+            },
             {
               "name": "hasSourceLeadingIcon",
               "type": {