@oicl/openbridge-webcomponents 2.0.0-next.152 → 2.0.0-next.153

package/custom-elements.json

@@ -55396,18 +55396,344 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/alert-button/alert-button.ts",
+      "path": "src/components/alert-button-item/alert-button-item.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "`<obc-alert-button>` – A compact, icon-based button for displaying alert or notification status and count.\n\nThis component provides a visual indicator for active alerts or notifications, supporting different alert types (such as alarm, warning, or caution) and an optional counter badge. It can also include a secondary \"silence\" action button for muting alerts, adapting its layout responsively for different screen widths.\n\nAppears in toolbars or notification areas to give users a quick overview of alert status and provide direct access to alert-related actions.\n\n## Features\n\n- **Variants:**\n  - **Flat:** Minimal, icon-only button for space-constrained layouts.\n  - **Normal:** Standard button with icon and optional alert counter.\n  - **Enhanced:** Visually prominent button for high-priority alerts, with accent styling.\n- **Alert Types:** Supports `alarm`, `warning`, `caution`, or no alert (idle). Icon and color adapt to the alert type.\n- **Alert Counter:** Optional badge displays the number of active alerts (except in flat mode).\n- **Silence Button:** Optional secondary button to mute or silence alerts, shown when enabled and at sufficient width.\n- **Blinking Animation:** Can animate (blink) to draw attention to active alerts (except for caution type).\n- **Responsive Layout:** Automatically switches to flat mode below a configurable width, and hides the silence button below another configurable width.\n- **Large Size Option:** Increases button height and padding for touch-friendly or prominent use.\n\n## Usage Guidelines\n\nUse `<obc-alert-button>` to provide a persistent, easily accessible indicator of alert or notification status. Ideal for toolbars, headers, or notification panels where users need to be aware of active alerts and may need to silence them quickly.\n\n- Use the counter to show the number of active alerts when relevant.\n- Use the silence button to provide a quick mute action, but only when space allows.\n- Choose the variant (`flat`, `normal`, `enhanced`) based on available space and the importance of the alert.\n- The blinking feature should be reserved for urgent or high-priority alerts to avoid unnecessary distraction.\n\n**TODO(designer):** Confirm if there are recommended default behaviors for auto-blinking, and if there are any design constraints for when to use each variant.\n\n## Properties\n\n- `nAlerts` (number): Number of active alerts to display in the counter badge.\n- `alertType` (`AlertType`): Type of alert (`alarm`, `warning`, `caution`, or undefined for idle).\n- `type` (`ObcAlertButtonType`): Visual variant of the button (`flat`, `normal`, `enhanced`). Default is `normal`.\n- `counter` (boolean): Whether to show the alert counter badge (not available in flat mode).\n- `showSilenceButton` (boolean): Whether to display the silence button (hidden in flat mode or below min breakpoint).\n- `silenceButtonDisabled` (boolean): Disables the silence button when true.\n- `flatMaxBreakpointPx` (number): Maximum width (in px) for normal/enhanced mode; below this, switches to flat mode.\n- `silenceButtonMinBreakpointPx` (number): Minimum width (in px) to show the silence button; below this, it is hidden.\n- `blinking` (boolean): Enables blinking animation for active alerts (not for caution type).\n- `flashingSpeed`: tempo of the blink (`default` follows the alert type: critical/alarm/high fast, warning/medium slow, low very slow; `fixed` never flashes).\n- `large` (boolean): Increases button size for prominent or touch-friendly use.\n\n## Events\n\n- `click-alert` – Fired when the main alert button is clicked.\n- `click-silence` – Fired when the silence button is clicked.\n\n## Best Practices & Constraints\n\n- Only show the counter when there are active alerts and the button is not in flat mode.\n- The silence button is only visible if enabled, the width is above the minimum breakpoint, and the button is not flat.\n- Blinking should be used sparingly to avoid overwhelming the user.\n- Use the large variant for touch interfaces or when the button needs to stand out.\n\n## Example\n\n```html\n<obc-alert-button\n  nAlerts=\"3\"\n  alertType=\"alarm\"\n  type=\"enhanced\"\n  counter\n  showSilenceButton\n  blinking\n  large\n  flatMaxBreakpointPx=\"600\"\n  silenceButtonMinBreakpointPx=\"600\"\n></obc-alert-button>\n```\n\nIn this example, the button shows an alarm icon, a counter badge with \"3\", is styled as enhanced, blinks to indicate urgency, and includes a silence button if the width allows.",
-          "name": "ObcAlertButton",
-          "slots": [
+          "description": "`<obc-alert-button-item>` – The bell button that shows the alert state and count.\n\nShows the alert status as a bell in the style of the given alert type, with\nan optional counter, or as a global counter: one badge per severity, then\nthe bell and the total. `obc-alert-button` renders the item next to its\nsilence button; use the item on its own where no silence button is needed.\n\n---\n\n### Features\n- **Variants (`type`):** `flat` (icon only), `normal` (bordered, icon and\n  counter) and `enhanced` (filled in the severity colour).\n- **Alert types:** `alarm`, `warning`, `caution` and the `level-*` family;\n  `nAlerts` of 0 shows the idle bell.\n- **Counter:** `counter` shows `nAlerts` next to the bell, except in `flat`.\n- **Global counter:** `globalCounter` shows the per-severity `counts` as\n  badges, then the bell and `nAlerts`, always in the normal style.\n- **Flashing:** `blinking` flashes the bell at the tempo `flashingSpeed`\n  resolves (#1224).\n- **Fill height:** `fillHeight` stretches the visible button to the host\n  height, as the tall `obc-alert-button` does.\n\n---\n\n### Usage Guidelines\n- Keep `nAlerts` and `counts` consistent; the item shows both as given.\n- The generated label reads e.g. \"Alerts, 12, 2 Alarm, 4 Warning,\n  6 Caution\"; an `aria-label` on the host replaces it.\n- A native button, so Enter and Space activate it (APG button pattern).\n- A parent that joins another button to the item's end sets the\n  `data-group-item-not-last` attribute on the host.\n- **TODO(designer):** the Figma file draws the flat item's hover, active and\n  focused variants at 20 % opacity; the item uses the standard flat states.\n- **TODO(designer):** the Figma file defines no flashing for the global\n  counter, so it never flashes.\n\n---\n\n### Example\n\n```html\n<obc-alert-button-item alertType=\"alarm\" nAlerts=\"3\" counter blinking></obc-alert-button-item>\n<obc-alert-button-item\n  globalCounter\n  nAlerts=\"12\"\n  .counts=${{countAlarm: 2, countWarning: 4, countCaution: 6}}\n></obc-alert-button-item>\n```",
+          "name": "ObcAlertButtonItem",
+          "members": [
             {
-              "description": "No content slots. All content is provided via properties.",
-              "name": ""
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "ObcAlertButtonType"
+              },
+              "description": "Visual variant: `flat` (icon only), `normal` (default, bordered with the counter) or `enhanced` (filled in the severity colour).\n\nAvailable when `globalCounter==false`.",
+              "attribute": "type",
+              "availableWhen": "globalCounter==false",
+              "availableWhenIf": {
+                "arg": "globalCounter",
+                "truthy": false
+              }
+            },
+            {
+              "kind": "field",
+              "name": "alertType",
+              "type": {
+                "text": "AlertType | undefined"
+              },
+              "description": "Alert type that selects the icon and colours: `alarm`, `warning`, `caution` or a `level-*` severity.\n\nAvailable when `globalCounter==false`.",
+              "attribute": "alertType",
+              "availableWhen": "globalCounter==false",
+              "availableWhenIf": {
+                "arg": "globalCounter",
+                "truthy": false
+              }
+            },
+            {
+              "kind": "field",
+              "name": "nAlerts",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Number of active alerts; 0 shows the idle bell and hides the counter.",
+              "attribute": "nAlerts"
+            },
+            {
+              "kind": "field",
+              "name": "counter",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Shows `nAlerts` next to the bell (not in `flat`).\n\nAvailable when `globalCounter==false`.",
+              "attribute": "counter",
+              "availableWhen": "globalCounter==false",
+              "availableWhenIf": {
+                "arg": "globalCounter",
+                "truthy": false
+              }
+            },
+            {
+              "kind": "field",
+              "name": "globalCounter",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Shows the per-severity counts, the bell and the total instead of a single alert status.",
+              "attribute": "globalCounter"
+            },
+            {
+              "kind": "field",
+              "name": "counts",
+              "type": {
+                "text": "AlertCounts"
+              },
+              "default": "{}",
+              "description": "Alert count per severity for the global counter badges.\n\nAvailable when `globalCounter==true`.",
+              "availableWhen": "globalCounter==true",
+              "availableWhenIf": {
+                "arg": "globalCounter",
+                "truthy": true
+              }
+            },
+            {
+              "kind": "field",
+              "name": "shelvedCount",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Number of shelved alerts, shown after the global counter badges.\n\nAvailable when `globalCounter==true`.",
+              "attribute": "shelvedCount",
+              "availableWhen": "globalCounter==true",
+              "availableWhenIf": {
+                "arg": "globalCounter",
+                "truthy": true
+              }
+            },
+            {
+              "kind": "field",
+              "name": "blinking",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Flashes the bell while there are active alerts of a flashing alert type.\n\nAvailable when `globalCounter==false`.",
+              "attribute": "blinking",
+              "availableWhen": "globalCounter==false",
+              "availableWhenIf": {
+                "arg": "globalCounter",
+                "truthy": false
+              }
+            },
+            {
+              "kind": "field",
+              "name": "flashingSpeed",
+              "type": {
+                "text": "FlashingSpeed"
+              },
+              "description": "Flash tempo while `blinking` is on: `default` resolves from `alertType`, `fast`, `slow`, `very-slow` force a tempo, `fixed` never flashes.\n\nAvailable when `blinking==true`.",
+              "attribute": "flashingSpeed",
+              "availableWhen": "blinking==true",
+              "availableWhenIf": {
+                "arg": "blinking",
+                "truthy": true
+              }
+            },
+            {
+              "kind": "field",
+              "name": "fillHeight",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Stretches the visible button to the host height instead of the 32 px visual target.",
+              "attribute": "fillHeight"
+            },
+            {
+              "kind": "field",
+              "name": "ariaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Accessible name forwarded to the inner `<button>`, mapped to the `aria-label` attribute; replaces the generated label. `aria-labelledby` is not supported: ID references cannot cross the shadow boundary.",
+              "attribute": "aria-label"
+            },
+            {
+              "kind": "field",
+              "name": "flashing",
+              "privacy": "protected",
+              "readonly": true,
+              "default": "new FlashingController( this, () => this.resolvedFlashingSpeed )"
+            },
+            {
+              "kind": "field",
+              "name": "resolvedFlashingSpeed",
+              "type": {
+                "text": "ResolvedFlashingSpeed"
+              },
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "accessibleName",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "renderTwotoneIcon",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "renderIcon",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "styleType",
+                  "type": {
+                    "text": "ObcAlertButtonType"
+                  }
+                },
+                {
+                  "name": "blinkLayer",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "description": "The blink layer shows the opposite of the steady layer in each flash."
+            },
+            {
+              "kind": "method",
+              "name": "renderCount",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "renderCounts",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "description": "Fired when the button is clicked.",
+              "name": "click"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "type",
+              "type": {
+                "text": "ObcAlertButtonType"
+              },
+              "description": "Visual variant: `flat` (icon only), `normal` (default, bordered with the counter) or `enhanced` (filled in the severity colour).\n\nAvailable when `globalCounter==false`.",
+              "fieldName": "type"
+            },
+            {
+              "name": "alertType",
+              "type": {
+                "text": "AlertType | undefined"
+              },
+              "description": "Alert type that selects the icon and colours: `alarm`, `warning`, `caution` or a `level-*` severity.\n\nAvailable when `globalCounter==false`.",
+              "fieldName": "alertType"
+            },
+            {
+              "name": "nAlerts",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Number of active alerts; 0 shows the idle bell and hides the counter.",
+              "fieldName": "nAlerts"
+            },
+            {
+              "name": "counter",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Shows `nAlerts` next to the bell (not in `flat`).\n\nAvailable when `globalCounter==false`.",
+              "fieldName": "counter"
+            },
+            {
+              "name": "globalCounter",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Shows the per-severity counts, the bell and the total instead of a single alert status.",
+              "fieldName": "globalCounter"
+            },
+            {
+              "name": "shelvedCount",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Number of shelved alerts, shown after the global counter badges.\n\nAvailable when `globalCounter==true`.",
+              "fieldName": "shelvedCount"
+            },
+            {
+              "name": "blinking",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Flashes the bell while there are active alerts of a flashing alert type.\n\nAvailable when `globalCounter==false`.",
+              "fieldName": "blinking"
+            },
+            {
+              "name": "flashingSpeed",
+              "type": {
+                "text": "FlashingSpeed"
+              },
+              "description": "Flash tempo while `blinking` is on: `default` resolves from `alertType`, `fast`, `slow`, `very-slow` force a tempo, `fixed` never flashes.\n\nAvailable when `blinking==true`.",
+              "fieldName": "flashingSpeed"
+            },
+            {
+              "name": "fillHeight",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Stretches the visible button to the host height instead of the 32 px visual target.",
+              "fieldName": "fillHeight"
+            },
+            {
+              "name": "aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Accessible name forwarded to the inner `<button>`, mapped to the `aria-label` attribute; replaces the generated label. `aria-labelledby` is not supported: ID references cannot cross the shadow boundary.",
+              "fieldName": "ariaLabel"
             }
           ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "obc-alert-button-item",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ObcAlertButtonItem",
+          "declaration": {
+            "name": "ObcAlertButtonItem",
+            "module": "src/components/alert-button-item/alert-button-item.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "obc-alert-button-item",
+          "declaration": {
+            "name": "ObcAlertButtonItem",
+            "module": "src/components/alert-button-item/alert-button-item.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/alert-button/alert-button.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`<obc-alert-button>` – A compact, icon-based button for displaying alert or notification status and count.\n\nThis component provides a visual indicator for active alerts or notifications, supporting different alert types (such as alarm, warning, or caution) and an optional counter badge. It can also include a secondary \"silence\" action button for muting alerts, adapting its layout responsively for different screen widths.\n\nAppears in toolbars or notification areas to give users a quick overview of alert status and provide direct access to alert-related actions. The bell itself is an `obc-alert-button-item`; use the item directly where no silence button or breakpoints are needed, or for its global counter.\n\n## Features\n\n- **Variants:**\n  - **Flat:** Minimal, icon-only button for space-constrained layouts.\n  - **Normal:** Standard button with icon and optional alert counter.\n  - **Enhanced:** Visually prominent button for high-priority alerts, with accent styling.\n- **Alert Types:** Supports `alarm`, `warning`, `caution`, or no alert (idle). Icon and color adapt to the alert type.\n- **Alert Counter:** Optional badge displays the number of active alerts (except in flat mode).\n- **Global Counter:** `globalCounter` shows the per-severity `counts` and an optional `shelvedCount` before the bell and the total, as `obc-alert-button-item` draws them.\n- **Silence Button:** Optional secondary button to mute or silence alerts, shown when enabled and at sufficient width.\n- **Blinking Animation:** Can animate (blink) to draw attention to active alerts (except for caution type).\n- **Responsive Layout:** Automatically switches to flat mode below a configurable width, and hides the silence button below another configurable width.\n- **Large Size Option:** Increases button height and padding for touch-friendly or prominent use.\n\n## Usage Guidelines\n\nUse `<obc-alert-button>` to provide a persistent, easily accessible indicator of alert or notification status. Ideal for toolbars, headers, or notification panels where users need to be aware of active alerts and may need to silence them quickly.\n\n- Use the counter to show the number of active alerts when relevant.\n- Use the silence button to provide a quick mute action, but only when space allows.\n- Choose the variant (`flat`, `normal`, `enhanced`) based on available space and the importance of the alert.\n- The blinking feature should be reserved for urgent or high-priority alerts to avoid unnecessary distraction.\n\n**TODO(designer):** Confirm if there are recommended default behaviors for auto-blinking, and if there are any design constraints for when to use each variant.\n\n**TODO(designer):** The Figma Alert button has no flat Global counter, so below `flatMaxBreakpointPx` the button shows the flat bell without the counts.\n\n## Events\n\n- `click-alert` – Fired when the main alert button is clicked.\n- `click-silence` – Fired when the silence button is clicked.\n\n## Best Practices & Constraints\n\n- Only show the counter when there are active alerts and the button is not in flat mode.\n- The silence button is only visible if enabled, the width is above the minimum breakpoint, and the button is not flat.\n- Blinking should be used sparingly to avoid overwhelming the user.\n- Use the large variant for touch interfaces or when the button needs to stand out.\n\n## Example\n\n```html\n<obc-alert-button\n  nAlerts=\"3\"\n  alertType=\"alarm\"\n  type=\"enhanced\"\n  counter\n  showSilenceButton\n  blinking\n  large\n  flatMaxBreakpointPx=\"600\"\n  silenceButtonMinBreakpointPx=\"600\"\n></obc-alert-button>\n```\n\nIn this example, the button shows an alarm icon, a counter badge with \"3\", is styled as enhanced, blinks to indicate urgency, and includes a silence button if the width allows.",
+          "name": "ObcAlertButton",
           "members": [
             {
               "kind": "field",
@@ -55416,7 +55742,7 @@
                 "text": "number"
               },
               "default": "0",
-              "description": "Number of active alerts to display in the counter badge.\n\nIf set to 0, the button appears in the idle state.",
+              "description": "Number of active alerts shown in the counter; 0 shows the idle state.",
               "attribute": "nAlerts"
             },
             {
@@ -55425,13 +55751,13 @@
               "type": {
                 "text": "AlertType | undefined"
               },
-              "description": "Type of alert to display.\n\nDetermines the icon and color scheme. Can be `alarm`, `warning`, `caution`, or undefined for idle state.",
+              "description": "Alert type that selects the icon and colours: `alarm`, `warning`, `caution`, a `level-*` severity, or unset for the idle state.",
               "attribute": "alertType"
             },
             {
               "kind": "field",
               "name": "type",
-              "description": "Visual variant of the button.\n\n- `flat`: Minimal, icon-only button for compact layouts.\n- `normal`: Standard button with icon and optional counter (default).\n- `enhanced`: Emphasized button for high-priority alerts.",
+              "description": "Visual variant: `flat` (icon only), `normal` (default, icon and optional counter) or `enhanced` (emphasized for high-priority alerts).",
               "attribute": "type"
             },
             {
@@ -55441,7 +55767,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Increases button size for touch-friendly or prominent use.\n\nAdds extra height and padding.",
+              "description": "Increases the button height and padding for touch-friendly or prominent use.",
               "attribute": "large"
             },
             {
@@ -55451,7 +55777,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether to display the silence button.\n\nThe silence button is only shown if this is true, the width is above `silenceButtonMinBreakpointPx`, and the button is not in flat mode.",
+              "description": "Shows the silence button when the width is at least `silenceButtonMinBreakpointPx` and the button is not flat.",
               "attribute": "showSilenceButton"
             },
             {
@@ -55476,42 +55802,71 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether to show the alert counter badge.\n\nOnly shown when there are active alerts and the button is not in flat mode.",
+              "description": "Shows the alert counter when there are active alerts and the button is not flat.",
               "attribute": "counter"
             },
             {
               "kind": "field",
-              "name": "blinking",
+              "name": "globalCounter",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Enables blinking animation for active alerts.\n\nBlinking is only shown for alarm and warning types, not for caution.",
-              "attribute": "blinking"
+              "description": "Shows the per-severity counts and the shelved count before the bell and the total (the item's global counter); a flat button shows the plain bell.",
+              "attribute": "globalCounter"
             },
             {
               "kind": "field",
-              "name": "flashingSpeed",
+              "name": "counts",
               "type": {
-                "text": "FlashingSpeed"
+                "text": "AlertCounts"
               },
-              "description": "Flash tempo while `blinking` is on: `default` resolves from `alertType`, `fast`, `slow`, `very-slow` force a tempo, `fixed` never flashes.",
-              "attribute": "flashingSpeed"
+              "default": "{}",
+              "description": "Alert count per severity for the global counter badges (`countAlarm`, `countWarning`, `countCaution` and the `level-*` counts).\n\nAvailable when `globalCounter==true`.",
+              "availableWhen": "globalCounter==true",
+              "availableWhenIf": {
+                "arg": "globalCounter",
+                "truthy": true
+              }
             },
             {
               "kind": "field",
-              "name": "flashing",
-              "privacy": "protected",
-              "readonly": true,
-              "default": "new FlashingController( this, () => this.resolvedFlashingSpeed )"
+              "name": "shelvedCount",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Number of shelved alerts, shown after the global counter badges; hidden at zero.\n\nAvailable when `globalCounter==true`.",
+              "attribute": "shelvedCount",
+              "availableWhen": "globalCounter==true",
+              "availableWhenIf": {
+                "arg": "globalCounter",
+                "truthy": true
+              }
             },
             {
               "kind": "field",
-              "name": "resolvedFlashingSpeed",
+              "name": "blinking",
               "type": {
-                "text": "ResolvedFlashingSpeed"
+                "text": "boolean"
               },
-              "readonly": true
+              "default": "false",
+              "description": "Flashes the bell for active alerts of a flashing alert type (never for caution).",
+              "attribute": "blinking"
+            },
+            {
+              "kind": "field",
+              "name": "flashingSpeed",
+              "type": {
+                "text": "FlashingSpeed"
+              },
+              "description": "Flash tempo while `blinking` is on: `default` resolves from `alertType`, `fast`, `slow`, `very-slow` force a tempo, `fixed` never flashes.\n\nAvailable when `blinking==true`.",
+              "attribute": "flashingSpeed",
+              "availableWhen": "blinking==true",
+              "availableWhenIf": {
+                "arg": "blinking",
+                "truthy": true
+              }
             },
             {
               "kind": "field",
@@ -55520,7 +55875,7 @@
                 "text": "number"
               },
               "default": "0",
-              "description": "Maximum width (in px) for normal/enhanced mode.\n\nIf the available width is less than this value, the button switches to flat mode.\nOnly applies when `type` is set to `normal` or `enhanced`.\n\nAvailable when `type!=flat`.",
+              "description": "Window width in px below which a `normal` or `enhanced` button switches to flat mode.\n\nAvailable when `type!=flat`.",
               "attribute": "flatMaxBreakpointPx",
               "availableWhen": "type!=flat",
               "availableWhenIf": {
@@ -55535,7 +55890,7 @@
                 "text": "number"
               },
               "default": "0",
-              "description": "Minimum width (in px) to show the silence button.\n\nIf the available width is less than this value, the silence button is hidden.\nOnly applies when `showSilenceButton` is true.\n\nAvailable when `showSilenceButton==true`.",
+              "description": "Minimum window width in px for showing the silence button.\n\nAvailable when `showSilenceButton==true`.",
               "attribute": "silenceButtonMinBreakpointPx",
               "availableWhen": "showSilenceButton==true",
               "availableWhenIf": {
@@ -55553,21 +55908,6 @@
               "name": "resizeListener",
               "privacy": "private"
             },
-            {
-              "kind": "method",
-              "name": "renderAlertTwotoneIcon",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "alertIcon",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "alertIconNegative",
-              "privacy": "private"
-            },
             {
               "kind": "field",
               "name": "activeType",
@@ -55610,7 +55950,7 @@
                 "text": "number"
               },
               "default": "0",
-              "description": "Number of active alerts to display in the counter badge.\n\nIf set to 0, the button appears in the idle state.",
+              "description": "Number of active alerts shown in the counter; 0 shows the idle state.",
               "fieldName": "nAlerts"
             },
             {
@@ -55618,12 +55958,12 @@
               "type": {
                 "text": "AlertType | undefined"
               },
-              "description": "Type of alert to display.\n\nDetermines the icon and color scheme. Can be `alarm`, `warning`, `caution`, or undefined for idle state.",
+              "description": "Alert type that selects the icon and colours: `alarm`, `warning`, `caution`, a `level-*` severity, or unset for the idle state.",
               "fieldName": "alertType"
             },
             {
               "name": "type",
-              "description": "Visual variant of the button.\n\n- `flat`: Minimal, icon-only button for compact layouts.\n- `normal`: Standard button with icon and optional counter (default).\n- `enhanced`: Emphasized button for high-priority alerts.",
+              "description": "Visual variant: `flat` (icon only), `normal` (default, icon and optional counter) or `enhanced` (emphasized for high-priority alerts).",
               "fieldName": "type"
             },
             {
@@ -55632,7 +55972,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Increases button size for touch-friendly or prominent use.\n\nAdds extra height and padding.",
+              "description": "Increases the button height and padding for touch-friendly or prominent use.",
               "fieldName": "large"
             },
             {
@@ -55641,7 +55981,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether to display the silence button.\n\nThe silence button is only shown if this is true, the width is above `silenceButtonMinBreakpointPx`, and the button is not in flat mode.",
+              "description": "Shows the silence button when the width is at least `silenceButtonMinBreakpointPx` and the button is not flat.",
               "fieldName": "showSilenceButton"
             },
             {
@@ -55659,16 +55999,34 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether to show the alert counter badge.\n\nOnly shown when there are active alerts and the button is not in flat mode.",
+              "description": "Shows the alert counter when there are active alerts and the button is not flat.",
               "fieldName": "counter"
             },
+            {
+              "name": "globalCounter",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Shows the per-severity counts and the shelved count before the bell and the total (the item's global counter); a flat button shows the plain bell.",
+              "fieldName": "globalCounter"
+            },
+            {
+              "name": "shelvedCount",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Number of shelved alerts, shown after the global counter badges; hidden at zero.\n\nAvailable when `globalCounter==true`.",
+              "fieldName": "shelvedCount"
+            },
             {
               "name": "blinking",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Enables blinking animation for active alerts.\n\nBlinking is only shown for alarm and warning types, not for caution.",
+              "description": "Flashes the bell for active alerts of a flashing alert type (never for caution).",
               "fieldName": "blinking"
             },
             {
@@ -55676,7 +56034,7 @@
               "type": {
                 "text": "FlashingSpeed"
               },
-              "description": "Flash tempo while `blinking` is on: `default` resolves from `alertType`, `fast`, `slow`, `very-slow` force a tempo, `fixed` never flashes.",
+              "description": "Flash tempo while `blinking` is on: `default` resolves from `alertType`, `fast`, `slow`, `very-slow` force a tempo, `fixed` never flashes.\n\nAvailable when `blinking==true`.",
               "fieldName": "flashingSpeed"
             },
             {
@@ -55685,7 +56043,7 @@
                 "text": "number"
               },
               "default": "0",
-              "description": "Maximum width (in px) for normal/enhanced mode.\n\nIf the available width is less than this value, the button switches to flat mode.\nOnly applies when `type` is set to `normal` or `enhanced`.\n\nAvailable when `type!=flat`.",
+              "description": "Window width in px below which a `normal` or `enhanced` button switches to flat mode.\n\nAvailable when `type!=flat`.",
               "fieldName": "flatMaxBreakpointPx"
             },
             {
@@ -55694,7 +56052,7 @@
                 "text": "number"
               },
               "default": "0",
-              "description": "Minimum width (in px) to show the silence button.\n\nIf the available width is less than this value, the silence button is hidden.\nOnly applies when `showSilenceButton` is true.\n\nAvailable when `showSilenceButton==true`.",
+              "description": "Minimum window width in px for showing the silence button.\n\nAvailable when `showSilenceButton==true`.",
               "fieldName": "silenceButtonMinBreakpointPx"
             }
           ],
@@ -55707,6 +56065,14 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "ObcAlertButtonType",
+          "declaration": {
+            "name": "ObcAlertButtonType",
+            "module": "src/components/alert-button/alert-button.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "ObcAlertButton",
@@ -55725,6 +56091,90 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/alert-counter-item/alert-counter-item.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`<obc-alert-counter-item>` – A row of alert counts, one badge per severity.\n\nRenders a large `obc-badge` for every severity with a count above zero, most\nsevere first, followed by an optional shelved count. Nothing renders when\nnothing is counted.\n\n---\n\n### Features\n- **Two types:** `badges` draws filled badges in the severity colour;\n  `alert-level` draws flat badges with the severity glyph.\n- **Every severity:** `counts` takes the whole `AlertType` vocabulary,\n  including the `level-*` family, ordered by `ALERT_SEVERITY_PRIORITY`.\n- **Shelved count:** `shelvedCount` adds a neutral badge at the end, with\n  the shelf icon in `alert-level`.\n- **Accessible summary:** the row is announced as one image labelled with\n  the counts, e.g. \"2 Alarm, 4 Warning, 6 Caution\".\n\n---\n\n### Usage Guidelines\n- Show how many alerts are outstanding per severity in a compact space;\n  `obc-alert-button-item` nests the counter for its global counter.\n- Pass the counts as one object: `.counts=${{countAlarm: 2, countWarning: 4}}`.\n- The counter is display-only: it renders no button and fires no events.\n- For a framed per-subsystem summary with a label, see\n  `obc-alert-subsystem-counter`.\n- **TODO(designer):** the Figma component also has an Unacked counter type;\n  how its icons map to counts is not defined yet.\n\n---\n\n### Example\n\n```html\n<obc-alert-counter-item\n  .counts=${{countAlarm: 2, countWarning: 4, countCaution: 6}}\n  shelvedCount=\"9\"\n></obc-alert-counter-item>\n```",
+          "name": "ObcAlertCounterItem",
+          "members": [
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "ObcAlertCounterItemType"
+              },
+              "description": "How each count is drawn: `badges` (filled severity badges, default) or `alert-level` (flat badges with the severity glyph).",
+              "attribute": "type"
+            },
+            {
+              "kind": "field",
+              "name": "counts",
+              "type": {
+                "text": "AlertCounts"
+              },
+              "default": "{}",
+              "description": "Alert count per severity (`countAlarm`, `countWarning`, `countCaution` and the `level-*` counts); counts of zero or less are not shown."
+            },
+            {
+              "kind": "field",
+              "name": "shelvedCount",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Number of shelved alerts, shown as a neutral badge after the severities; hidden at zero.",
+              "attribute": "shelvedCount"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "type",
+              "type": {
+                "text": "ObcAlertCounterItemType"
+              },
+              "description": "How each count is drawn: `badges` (filled severity badges, default) or `alert-level` (flat badges with the severity glyph).",
+              "fieldName": "type"
+            },
+            {
+              "name": "shelvedCount",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Number of shelved alerts, shown as a neutral badge after the severities; hidden at zero.",
+              "fieldName": "shelvedCount"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "obc-alert-counter-item",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ObcAlertCounterItem",
+          "declaration": {
+            "name": "ObcAlertCounterItem",
+            "module": "src/components/alert-counter-item/alert-counter-item.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "obc-alert-counter-item",
+          "declaration": {
+            "name": "ObcAlertCounterItem",
+            "module": "src/components/alert-counter-item/alert-counter-item.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/alert-floating-item/alert-floating-item.ts",
@@ -55918,7 +56368,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 the legacy statuses (`alarm`, `warning`, `caution`) and the level statuses (`level-critical`, `level-high`, `level-medium`, `level-low`, `level-diagnostic`).\n- **Acknowledgement mode:** The `mode` property reflects the alert lifecycle state — `acked-active` (default, steady), `unacked-active` (flashes) and `unacked-rectified` (dashed, flashes) — and `flashingSpeed` picks the tempo.\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 level severities (`level-critical`, `level-high`, `level-medium`, `level-low`, `level-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 `level-*` 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```",
+          "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- **Centred stroke:** The stroke straddles the frame edge, half over the content and half outside, so frames on touching components share one edge. While flashing it grows by 1 px on each side.\n- **Status indication:** Displays different color schemes and icons for the legacy statuses (`alarm`, `warning`, `caution`) and the level statuses (`level-critical`, `level-high`, `level-medium`, `level-low`, `level-diagnostic`).\n- **Acknowledgement mode:** The `mode` property reflects the alert lifecycle state — `acked-active` (default, steady), `unacked-active` (flashes) and `unacked-rectified` (dashed, flashes) — and `flashingSpeed` picks the tempo.\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 level severities (`level-critical`, `level-high`, `level-medium`, `level-low`, `level-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 `level-*` 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": [
             {
@@ -55990,7 +56440,7 @@
               "type": {
                 "text": "ObcAlertFrameFlashEffect"
               },
-              "description": "`outline` (default) grows the outline by 2 px while on in one step; `outline-eased` grows it over a 50 ms transition, a design-evaluation option.",
+              "description": "`outline` (default) grows the outline by 2 px, 1 px each side, while on in one step; `outline-eased` grows it over a 50 ms transition, a design-evaluation option.",
               "attribute": "flashEffect"
             },
             {
@@ -56196,7 +56646,7 @@
               "type": {
                 "text": "ObcAlertFrameFlashEffect"
               },
-              "description": "`outline` (default) grows the outline by 2 px while on in one step; `outline-eased` grows it over a 50 ms transition, a design-evaluation option.",
+              "description": "`outline` (default) grows the outline by 2 px, 1 px each side, while on in one step; `outline-eased` grows it over a 50 ms transition, a design-evaluation option.",
               "fieldName": "flashEffect"
             },
             {
@@ -86111,7 +86561,7 @@
               "type": {
                 "text": "TreeNavigationItemAlerts | undefined"
               },
-              "description": "Per-severity alert counts for the row's trailing badge(s). Omit (or leave\nevery count at 0) for a row with no alerts. See TreeNavigationItemAlerts.\n\n- When `combine` is true, a single badge is shown: its number is the sum\n  of all counts and its severity is the highest category present\n  (critical → alarm → warning → caution).\n- Otherwise one badge is shown per count greater than 0, ordered most to\n  least severe and spaced by the alert-counter spacing token.",
+              "description": "Per-severity alert counts for the row's trailing badge(s). Omit (or leave\nevery count at 0) for a row with no alerts. See TreeNavigationItemAlerts.\n\n- When `combine` is true, a single badge is shown: its number is the sum\n  of all counts and its severity is the highest category present, ranked\n  by `ALERT_SEVERITY_PRIORITY`.\n- Otherwise one badge is shown per count greater than 0, ordered most to\n  least severe and spaced by the alert-counter spacing token.",
               "attribute": "alerts"
             },
             {
@@ -86155,10 +86605,10 @@
               "kind": "field",
               "name": "alertBadges",
               "type": {
-                "text": "{type: AlertType; count: number}[]"
+                "text": "RankedAlertCount[]"
               },
               "privacy": "private",
-              "description": "The badge(s) to render from `alerts`, as `{type, count}` pairs already in\nseverity order, ranked by `ALERT_SEVERITY_PRIORITY`.\n\n- No `alerts`, or every count 0 → no badges.\n- `combine` → a single pair: the summed count typed as the highest\n  category that has any alerts.\n- Otherwise → one pair per count greater than 0.",
+              "description": "The badge(s) to render from `alerts`, ranked by `rankAlertCounts`.",
               "readonly": true
             },
             {
@@ -86302,7 +86752,7 @@
               "type": {
                 "text": "TreeNavigationItemAlerts | undefined"
               },
-              "description": "Per-severity alert counts for the row's trailing badge(s). Omit (or leave\nevery count at 0) for a row with no alerts. See TreeNavigationItemAlerts.\n\n- When `combine` is true, a single badge is shown: its number is the sum\n  of all counts and its severity is the highest category present\n  (critical → alarm → warning → caution).\n- Otherwise one badge is shown per count greater than 0, ordered most to\n  least severe and spaced by the alert-counter spacing token.",
+              "description": "Per-severity alert counts for the row's trailing badge(s). Omit (or leave\nevery count at 0) for a row with no alerts. See TreeNavigationItemAlerts.\n\n- When `combine` is true, a single badge is shown: its number is the sum\n  of all counts and its severity is the highest category present, ranked\n  by `ALERT_SEVERITY_PRIORITY`.\n- Otherwise one badge is shown per count greater than 0, ordered most to\n  least severe and spaced by the alert-counter spacing token.",
               "fieldName": "alerts"
             },
             {