@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.137 → 2.0.0-next.138

package/custom-elements.json

@@ -5011,6 +5011,39 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/components/alert-subsystem-counter/alert-subsystem-counter.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "ObcAlertSubsystemCounterOrientation"
+        },
+        {
+          "kind": "variable",
+          "name": "ObcAlertSubsystemCounter",
+          "default": "class extends LitElement { constructor() { super(...arguments); this.label = \"\"; this.orientation = \"horizontal\"; this.hasAlert = false; this.emptyText = \"No alerts\"; this.hasIcon = false; } handleIconSlotChange(e) { const slot = e.target; this.hasIcon = slot.assignedNodes({ flatten: true }).length > 0; } render() { return html` <div class=${classMap({ frame: true, [\"orientation-\" + this.orientation]: true, \"has-alert\": this.hasAlert })} > <div class=\"leading-container\"> <div class=${classMap({ icon: true, \"no-icon\": !this.hasIcon })}> <slot name=\"icon\" @slotchange=${this.handleIconSlotChange}></slot> </div> <div class=\"label\">${this.label}</div> </div> <div class=\"trailing-container\"> ${this.hasAlert ? html`<slot name=\"badges\" class=\"badges\"></slot>` : html`<span class=\"empty\">${this.emptyText}</span>`} </div> </div> `; } }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ObcAlertSubsystemCounter",
+          "declaration": {
+            "name": "ObcAlertSubsystemCounter",
+            "module": "dist/components/alert-subsystem-counter/alert-subsystem-counter.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ObcAlertSubsystemCounterOrientation",
+          "declaration": {
+            "name": "ObcAlertSubsystemCounterOrientation",
+            "module": "dist/components/alert-subsystem-counter/alert-subsystem-counter.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/components/app-button/app-button.js",
@@ -48826,6 +48859,110 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/alert-subsystem-counter/alert-subsystem-counter.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`<obc-alert-subsystem-counter>` – A framed summary of a subsystem's alert\ncounts: a leading icon, a label, and a trailing set of slotted count badges.\n\nWhen there are no active alerts it shows a muted label and an empty-state\nmessage instead of the badges. The count badges themselves are supplied by\nthe consumer as slotted `obc-badge` elements; this component provides only\nthe frame, layout, label, and empty state.\n\n---\n\n### Features\n- **Orientation:** `horizontal` (single row) or `vertical` (badges on a line\n  below the label).\n- **Alert state:** `hasAlert` toggles between an active (bold label, badges)\n  and an inactive (muted label, empty text) presentation.\n- **Freeform label:** Pass a full title or an abbreviation — the label is\n  plain text decided by the caller and truncates with an ellipsis.\n- **Configurable empty text:** Customize the message shown when there are no\n  alerts via `emptyText`.\n- **Optional leading icon:** Provide an icon through the `icon` slot; omit it\n  and the leading box collapses with no empty gap.\n\n---\n\n### Usage Guidelines\n- Use this component to give an at-a-glance count of outstanding alerts for a\n  single subsystem, grouped by severity.\n- Provide one slotted badge per severity in the `badges` slot, typically\n  `<obc-badge size=\"large\">` with a severity `type` and a `number`. The\n  badge `type` values are the same severity vocabulary as `AlertType`\n  (`alarm`, `warning`, `caution` and the `level-*` family); order them\n  highest severity first, as `ALERT_SEVERITY_PRIORITY` does.\n- Set `hasAlert` to `false` to present the resolved/clear state; the badges\n  are then not rendered and `emptyText` is shown. The component does not\n  derive the state from the slotted badges — the consumer owns it.\n- Choose `vertical` orientation in narrow containers where the badges do not\n  fit beside the label.\n- The counter is display-only: it renders no button and fires no events. For\n  a clickable subsystem entry with badges, see `obc-tree-navigation-item`\n  (`alertBadges`) or `obc-integration-fleet-button` (`alerts`).\n\n---\n\n### Slots\n\n| Slot Name | Renders When...        | Purpose                                            |\n|-----------|------------------------|----------------------------------------------------|\n| `icon`    | The slot has content   | Leading 24px icon (e.g. `<obi-placeholder>`).      |\n| `badges`  | `hasAlert` is true     | Count badges, one per severity (`<obc-badge>`).    |\n\n---\n\n### Example\n\n```html\n<obc-alert-subsystem-counter label=\"Label\" hasAlert>\n  <obi-placeholder slot=\"icon\"></obi-placeholder>\n  <obc-badge slot=\"badges\" size=\"large\" type=\"alarm\" .number=${9}></obc-badge>\n  <obc-badge slot=\"badges\" size=\"large\" type=\"warning\" .number=${4}></obc-badge>\n  <obc-badge slot=\"badges\" size=\"large\" type=\"caution\" .number=${2}></obc-badge>\n</obc-alert-subsystem-counter>\n```",
+          "name": "ObcAlertSubsystemCounter",
+          "slots": [
+            {
+              "description": "Optional leading 24px icon.",
+              "name": "icon"
+            },
+            {
+              "description": "Count badges shown when `hasAlert` is true.",
+              "name": "badges"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The subsystem label. Pass a full title or an abbreviation as plain text."
+            },
+            {
+              "kind": "field",
+              "name": "orientation",
+              "type": {
+                "text": "ObcAlertSubsystemCounterOrientation"
+              },
+              "description": "Layout direction: `horizontal` (default) keeps icon, label and badges in one row; `vertical` moves the badges (or empty text) to a line below the label."
+            },
+            {
+              "kind": "field",
+              "name": "hasAlert",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the subsystem has active alerts. `true` shows the label bold and renders the `badges` slot; `false` mutes the label and shows `emptyText` instead of the badges."
+            },
+            {
+              "kind": "field",
+              "name": "emptyText",
+              "type": {
+                "text": "string"
+              },
+              "default": "'No alerts'",
+              "description": "Text shown in the trailing area when `hasAlert` is `false`."
+            },
+            {
+              "kind": "field",
+              "name": "hasIcon",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "method",
+              "name": "handleIconSlotChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            },
+            {
+              "kind": "field",
+              "name": "styles",
+              "static": true
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ObcAlertSubsystemCounter",
+          "declaration": {
+            "name": "ObcAlertSubsystemCounter",
+            "module": "src/components/alert-subsystem-counter/alert-subsystem-counter.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/app-button/app-button.ts",

package/dist/components/alert-subsystem-counter/alert-subsystem-counter.css.js

@@ -0,0 +1,113 @@
+import { css } from "lit";
+const componentStyle = css`* {
+  -webkit-tap-highlight-color: transparent;
+}
+
+:host {
+  display: block;
+}
+
+.frame {
+  box-sizing: border-box; /* the host width is the frame width, border included */
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  border-radius: 6px;
+  background: var(--container-section-color);
+  border: 1px solid var(--border-outline-color);
+}
+
+.frame.orientation-vertical {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.leading-container {
+  display: flex;
+  flex: 1 0 0; /* takes the width the badges leave over, so the label can truncate */
+  align-items: center;
+  gap: 4px;
+  min-width: 0; /* lets the label shrink below its text width */
+}
+
+.icon {
+  flex-shrink: 0;
+  width: var(--global-size-spacing-icon-icon-size-regular);
+  height: var(--global-size-spacing-icon-icon-size-regular);
+  color: var(--on-indent-neutral-color);
+}
+
+.icon.no-icon {
+  display: none; /* collapses the flex gap too, so an iconless counter has no leading hole */
+}
+
+.label {
+  font-family: var(--global-typography-font-family);
+  font-weight: var(--global-typography-ui-body-font-weight);
+  font-size: var(--global-typography-ui-body-font-size);
+  line-height: var(--global-typography-ui-body-line-height);
+  font-feature-settings:
+    "liga" off,
+    "clig" off,
+    "ss04" on;
+  flex: 1 0 0;
+  min-width: 0; /* required for text-overflow to kick in inside a flex item */
+  padding-left: 4px;
+  color: var(--element-inactive-color);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.frame.has-alert .label {
+  font-family: var(--global-typography-font-family);
+  font-weight: var(--global-typography-ui-body-active-font-weight);
+  font-size: var(--global-typography-ui-body-active-font-size);
+  line-height: var(--global-typography-ui-body-active-line-height);
+  font-feature-settings:
+    "liga" off,
+    "clig" off,
+    "ss04" on;
+  color: var(--on-indent-active-color);
+}
+
+.trailing-container {
+  display: flex;
+  flex-shrink: 0; /* badges keep their size; the label is what gives way */
+  align-items: center;
+  gap: 4px;
+}
+
+.frame.orientation-horizontal .trailing-container {
+  justify-content: flex-end;
+}
+
+.frame.orientation-vertical .trailing-container {
+  align-self: flex-start; /* hugs its content under the label instead of stretching across the frame */
+}
+
+.frame:not(.has-alert) .trailing-container {
+  justify-content: center;
+  /* same row height as the large badges it stands in for */
+  height: var(--ui-components-badge-min-size-large);
+  padding: 0 8px;
+}
+
+.empty {
+  font-family: var(--global-typography-font-family);
+  font-weight: var(--global-typography-ui-label-font-weight);
+  font-size: var(--global-typography-ui-label-font-size);
+  line-height: var(--global-typography-ui-label-line-height);
+  font-feature-settings:
+    "liga" off,
+    "clig" off,
+    "ss04" on;
+  color: var(--element-inactive-color);
+  white-space: nowrap;
+}
+`;
+export {
+  componentStyle as default
+};
+//# sourceMappingURL=alert-subsystem-counter.css.js.map

package/dist/components/alert-subsystem-counter/alert-subsystem-counter.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-subsystem-counter.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/alert-subsystem-counter/alert-subsystem-counter.d.ts

@@ -0,0 +1,104 @@
+import { LitElement } from 'lit';
+/**
+ * `ObcAlertSubsystemCounterOrientation` – Layout direction for the counter.
+ *
+ * - `horizontal`: Icon, label, and badges sit in a single row.
+ * - `vertical`: Badges (or empty text) sit on their own line below the label.
+ */
+export declare enum ObcAlertSubsystemCounterOrientation {
+    Horizontal = "horizontal",
+    Vertical = "vertical"
+}
+/**
+ * `<obc-alert-subsystem-counter>` – A framed summary of a subsystem's alert
+ * counts: a leading icon, a label, and a trailing set of slotted count badges.
+ *
+ * When there are no active alerts it shows a muted label and an empty-state
+ * message instead of the badges. The count badges themselves are supplied by
+ * the consumer as slotted `obc-badge` elements; this component provides only
+ * the frame, layout, label, and empty state.
+ *
+ * ---
+ *
+ * ### Features
+ * - **Orientation:** `horizontal` (single row) or `vertical` (badges on a line
+ *   below the label).
+ * - **Alert state:** `hasAlert` toggles between an active (bold label, badges)
+ *   and an inactive (muted label, empty text) presentation.
+ * - **Freeform label:** Pass a full title or an abbreviation — the label is
+ *   plain text decided by the caller and truncates with an ellipsis.
+ * - **Configurable empty text:** Customize the message shown when there are no
+ *   alerts via `emptyText`.
+ * - **Optional leading icon:** Provide an icon through the `icon` slot; omit it
+ *   and the leading box collapses with no empty gap.
+ *
+ * ---
+ *
+ * ### Usage Guidelines
+ * - Use this component to give an at-a-glance count of outstanding alerts for a
+ *   single subsystem, grouped by severity.
+ * - Provide one slotted badge per severity in the `badges` slot, typically
+ *   `<obc-badge size="large">` with a severity `type` and a `number`. The
+ *   badge `type` values are the same severity vocabulary as `AlertType`
+ *   (`alarm`, `warning`, `caution` and the `level-*` family); order them
+ *   highest severity first, as `ALERT_SEVERITY_PRIORITY` does.
+ * - Set `hasAlert` to `false` to present the resolved/clear state; the badges
+ *   are then not rendered and `emptyText` is shown. The component does not
+ *   derive the state from the slotted badges — the consumer owns it.
+ * - Choose `vertical` orientation in narrow containers where the badges do not
+ *   fit beside the label.
+ * - The counter is display-only: it renders no button and fires no events. For
+ *   a clickable subsystem entry with badges, see `obc-tree-navigation-item`
+ *   (`alertBadges`) or `obc-integration-fleet-button` (`alerts`).
+ *
+ * ---
+ *
+ * ### Slots
+ *
+ * | Slot Name | Renders When...        | Purpose                                            |
+ * |-----------|------------------------|----------------------------------------------------|
+ * | `icon`    | The slot has content   | Leading 24px icon (e.g. `<obi-placeholder>`).      |
+ * | `badges`  | `hasAlert` is true     | Count badges, one per severity (`<obc-badge>`).    |
+ *
+ * ---
+ *
+ * ### Example
+ *
+ * ```html
+ * <obc-alert-subsystem-counter label="Label" hasAlert>
+ *   <obi-placeholder slot="icon"></obi-placeholder>
+ *   <obc-badge slot="badges" size="large" type="alarm" .number=${9}></obc-badge>
+ *   <obc-badge slot="badges" size="large" type="warning" .number=${4}></obc-badge>
+ *   <obc-badge slot="badges" size="large" type="caution" .number=${2}></obc-badge>
+ * </obc-alert-subsystem-counter>
+ * ```
+ *
+ * @property label - The subsystem label. Pass a full title or an abbreviation as plain text.
+ * @property orientation - Layout direction: `horizontal` (default) keeps icon, label and badges in one row; `vertical` moves the badges (or empty text) to a line below the label.
+ * @property hasAlert - Whether the subsystem has active alerts. `true` shows the label bold and renders the `badges` slot; `false` mutes the label and shows `emptyText` instead of the badges.
+ * @property emptyText - Text shown in the trailing area when `hasAlert` is `false`.
+ * @availableWhen emptyText hasAlert==false
+ * @slot icon - Optional leading 24px icon.
+ * @slot badges - Count badges shown when `hasAlert` is true.
+ * @beta
+ */
+export declare class ObcAlertSubsystemCounter extends LitElement {
+    /** The subsystem label. Pass a full title or an abbreviation as plain text. */
+    label: string;
+    /** Layout direction: `horizontal` (default) keeps icon, label and badges in one row; `vertical` moves the badges (or empty text) to a line below the label. */
+    orientation: ObcAlertSubsystemCounterOrientation;
+    /** Whether the subsystem has active alerts. `true` shows the label bold and renders the `badges` slot; `false` mutes the label and shows `emptyText` instead of the badges. */
+    hasAlert: boolean;
+    /** Text shown in the trailing area when `hasAlert` is `false`. */
+    emptyText: string;
+    private hasIcon;
+    private handleIconSlotChange;
+    render(): import('lit-html').TemplateResult<1>;
+    static styles: import('lit').CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'obc-alert-subsystem-counter': ObcAlertSubsystemCounter;
+    }
+}
+//# sourceMappingURL=alert-subsystem-counter.d.ts.map

package/dist/components/alert-subsystem-counter/alert-subsystem-counter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-subsystem-counter.d.ts","sourceRoot":"","sources":["../../../src/components/alert-subsystem-counter/alert-subsystem-counter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAMhD;;;;;GAKG;AACH,oBAAY,mCAAmC;IAC7C,UAAU,eAAe;IACzB,QAAQ,aAAa;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwEG;AACH,qBACa,wBAAyB,SAAQ,UAAU;IAC5B,KAAK,SAAM;IACX,WAAW,EAAE,mCAAmC,CACzB;IACtB,QAAQ,UAAS;IAClB,SAAS,SAAe;IAEzC,OAAO,CAAC,OAAO,CAAS;IAEjC,OAAO,CAAC,oBAAoB;IAKnB,MAAM;IAwBf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,6BAA6B,EAAE,wBAAwB,CAAC;KACzD;CACF"}

package/dist/components/alert-subsystem-counter/alert-subsystem-counter.js

@@ -0,0 +1,79 @@
+import { unsafeCSS, LitElement, html } from "lit";
+import { property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import componentStyle from "./alert-subsystem-counter.css.js";
+import { customElement } from "../../decorator.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var ObcAlertSubsystemCounterOrientation = /* @__PURE__ */ ((ObcAlertSubsystemCounterOrientation2) => {
+  ObcAlertSubsystemCounterOrientation2["Horizontal"] = "horizontal";
+  ObcAlertSubsystemCounterOrientation2["Vertical"] = "vertical";
+  return ObcAlertSubsystemCounterOrientation2;
+})(ObcAlertSubsystemCounterOrientation || {});
+let ObcAlertSubsystemCounter = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.label = "";
+    this.orientation = "horizontal";
+    this.hasAlert = false;
+    this.emptyText = "No alerts";
+    this.hasIcon = false;
+  }
+  handleIconSlotChange(e) {
+    const slot = e.target;
+    this.hasIcon = slot.assignedNodes({ flatten: true }).length > 0;
+  }
+  render() {
+    return html`
+      <div
+        class=${classMap({
+      frame: true,
+      ["orientation-" + this.orientation]: true,
+      "has-alert": this.hasAlert
+    })}
+      >
+        <div class="leading-container">
+          <div class=${classMap({ icon: true, "no-icon": !this.hasIcon })}>
+            <slot name="icon" @slotchange=${this.handleIconSlotChange}></slot>
+          </div>
+          <div class="label">${this.label}</div>
+        </div>
+        <div class="trailing-container">
+          ${this.hasAlert ? html`<slot name="badges" class="badges"></slot>` : html`<span class="empty">${this.emptyText}</span>`}
+        </div>
+      </div>
+    `;
+  }
+};
+ObcAlertSubsystemCounter.styles = unsafeCSS(componentStyle);
+__decorateClass([
+  property({ type: String })
+], ObcAlertSubsystemCounter.prototype, "label", 2);
+__decorateClass([
+  property({ type: String })
+], ObcAlertSubsystemCounter.prototype, "orientation", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcAlertSubsystemCounter.prototype, "hasAlert", 2);
+__decorateClass([
+  property({ type: String })
+], ObcAlertSubsystemCounter.prototype, "emptyText", 2);
+__decorateClass([
+  state()
+], ObcAlertSubsystemCounter.prototype, "hasIcon", 2);
+ObcAlertSubsystemCounter = __decorateClass([
+  customElement("obc-alert-subsystem-counter")
+], ObcAlertSubsystemCounter);
+export {
+  ObcAlertSubsystemCounter,
+  ObcAlertSubsystemCounterOrientation
+};
+//# sourceMappingURL=alert-subsystem-counter.js.map

package/dist/components/alert-subsystem-counter/alert-subsystem-counter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-subsystem-counter.js","sources":["../../../src/components/alert-subsystem-counter/alert-subsystem-counter.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport componentStyle from './alert-subsystem-counter.css?inline';\nimport {customElement} from '../../decorator.js';\n\n/**\n * `ObcAlertSubsystemCounterOrientation` – Layout direction for the counter.\n *\n * - `horizontal`: Icon, label, and badges sit in a single row.\n * - `vertical`: Badges (or empty text) sit on their own line below the label.\n */\nexport enum ObcAlertSubsystemCounterOrientation {\n  Horizontal = 'horizontal',\n  Vertical = 'vertical',\n}\n\n/**\n * `<obc-alert-subsystem-counter>` – A framed summary of a subsystem's alert\n * counts: a leading icon, a label, and a trailing set of slotted count badges.\n *\n * When there are no active alerts it shows a muted label and an empty-state\n * message instead of the badges. The count badges themselves are supplied by\n * the consumer as slotted `obc-badge` elements; this component provides only\n * the frame, layout, label, and empty state.\n *\n * ---\n *\n * ### Features\n * - **Orientation:** `horizontal` (single row) or `vertical` (badges on a line\n *   below the label).\n * - **Alert state:** `hasAlert` toggles between an active (bold label, badges)\n *   and an inactive (muted label, empty text) presentation.\n * - **Freeform label:** Pass a full title or an abbreviation — the label is\n *   plain text decided by the caller and truncates with an ellipsis.\n * - **Configurable empty text:** Customize the message shown when there are no\n *   alerts via `emptyText`.\n * - **Optional leading icon:** Provide an icon through the `icon` slot; omit it\n *   and the leading box collapses with no empty gap.\n *\n * ---\n *\n * ### Usage Guidelines\n * - Use this component to give an at-a-glance count of outstanding alerts for a\n *   single subsystem, grouped by severity.\n * - Provide one slotted badge per severity in the `badges` slot, typically\n *   `<obc-badge size=\"large\">` with a severity `type` and a `number`. The\n *   badge `type` values are the same severity vocabulary as `AlertType`\n *   (`alarm`, `warning`, `caution` and the `level-*` family); order them\n *   highest severity first, as `ALERT_SEVERITY_PRIORITY` does.\n * - Set `hasAlert` to `false` to present the resolved/clear state; the badges\n *   are then not rendered and `emptyText` is shown. The component does not\n *   derive the state from the slotted badges — the consumer owns it.\n * - Choose `vertical` orientation in narrow containers where the badges do not\n *   fit beside the label.\n * - The counter is display-only: it renders no button and fires no events. For\n *   a clickable subsystem entry with badges, see `obc-tree-navigation-item`\n *   (`alertBadges`) or `obc-integration-fleet-button` (`alerts`).\n *\n * ---\n *\n * ### Slots\n *\n * | Slot Name | Renders When...        | Purpose                                            |\n * |-----------|------------------------|----------------------------------------------------|\n * | `icon`    | The slot has content   | Leading 24px icon (e.g. `<obi-placeholder>`).      |\n * | `badges`  | `hasAlert` is true     | Count badges, one per severity (`<obc-badge>`).    |\n *\n * ---\n *\n * ### Example\n *\n * ```html\n * <obc-alert-subsystem-counter label=\"Label\" hasAlert>\n *   <obi-placeholder slot=\"icon\"></obi-placeholder>\n *   <obc-badge slot=\"badges\" size=\"large\" type=\"alarm\" .number=${9}></obc-badge>\n *   <obc-badge slot=\"badges\" size=\"large\" type=\"warning\" .number=${4}></obc-badge>\n *   <obc-badge slot=\"badges\" size=\"large\" type=\"caution\" .number=${2}></obc-badge>\n * </obc-alert-subsystem-counter>\n * ```\n *\n * @property label - The subsystem label. Pass a full title or an abbreviation as plain text.\n * @property orientation - Layout direction: `horizontal` (default) keeps icon, label and badges in one row; `vertical` moves the badges (or empty text) to a line below the label.\n * @property hasAlert - Whether the subsystem has active alerts. `true` shows the label bold and renders the `badges` slot; `false` mutes the label and shows `emptyText` instead of the badges.\n * @property emptyText - Text shown in the trailing area when `hasAlert` is `false`.\n * @availableWhen emptyText hasAlert==false\n * @slot icon - Optional leading 24px icon.\n * @slot badges - Count badges shown when `hasAlert` is true.\n * @beta\n */\n@customElement('obc-alert-subsystem-counter')\nexport class ObcAlertSubsystemCounter extends LitElement {\n  @property({type: String}) label = '';\n  @property({type: String}) orientation: ObcAlertSubsystemCounterOrientation =\n    ObcAlertSubsystemCounterOrientation.Horizontal;\n  @property({type: Boolean}) hasAlert = false;\n  @property({type: String}) emptyText = 'No alerts';\n\n  @state() private hasIcon = false;\n\n  private handleIconSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this.hasIcon = slot.assignedNodes({flatten: true}).length > 0;\n  }\n\n  override render() {\n    return html`\n      <div\n        class=${classMap({\n          frame: true,\n          ['orientation-' + this.orientation]: true,\n          'has-alert': this.hasAlert,\n        })}\n      >\n        <div class=\"leading-container\">\n          <div class=${classMap({icon: true, 'no-icon': !this.hasIcon})}>\n            <slot name=\"icon\" @slotchange=${this.handleIconSlotChange}></slot>\n          </div>\n          <div class=\"label\">${this.label}</div>\n        </div>\n        <div class=\"trailing-container\">\n          ${this.hasAlert\n            ? html`<slot name=\"badges\" class=\"badges\"></slot>`\n            : html`<span class=\"empty\">${this.emptyText}</span>`}\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-alert-subsystem-counter': ObcAlertSubsystemCounter;\n  }\n}\n"],"names":["ObcAlertSubsystemCounterOrientation"],"mappings":";;;;;;;;;;;;;;;AAYO,IAAK,wDAAAA,yCAAL;AACLA,uCAAA,YAAA,IAAa;AACbA,uCAAA,UAAA,IAAW;AAFD,SAAAA;AAAA,GAAA,uCAAA,CAAA,CAAA;AA+EL,IAAM,2BAAN,cAAuC,WAAW;AAAA,EAAlD,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,QAAQ;AACR,SAAA,cACxB;AACyB,SAAA,WAAW;AACZ,SAAA,YAAY;AAE7B,SAAQ,UAAU;AAAA,EAAA;AAAA,EAEnB,qBAAqB,GAAU;AACrC,UAAM,OAAO,EAAE;AACf,SAAK,UAAU,KAAK,cAAc,EAAC,SAAS,KAAA,CAAK,EAAE,SAAS;AAAA,EAC9D;AAAA,EAES,SAAS;AAChB,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,OAAO;AAAA,MACP,CAAC,iBAAiB,KAAK,WAAW,GAAG;AAAA,MACrC,aAAa,KAAK;AAAA,IAAA,CACnB,CAAC;AAAA;AAAA;AAAA,uBAGa,SAAS,EAAC,MAAM,MAAM,WAAW,CAAC,KAAK,QAAA,CAAQ,CAAC;AAAA,4CAC3B,KAAK,oBAAoB;AAAA;AAAA,+BAEtC,KAAK,KAAK;AAAA;AAAA;AAAA,YAG7B,KAAK,WACH,mDACA,2BAA2B,KAAK,SAAS,SAAS;AAAA;AAAA;AAAA;AAAA,EAI9D;AAGF;AAvCa,yBAsCK,SAAS,UAAU,cAAc;AArCvB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GADb,yBACe,WAAA,SAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAFb,yBAEe,WAAA,eAAA,CAAA;AAEC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAJd,yBAIgB,WAAA,YAAA,CAAA;AACD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GALb,yBAKe,WAAA,aAAA,CAAA;AAET,gBAAA;AAAA,EAAhB,MAAA;AAAM,GAPI,yBAOM,WAAA,WAAA,CAAA;AAPN,2BAAN,gBAAA;AAAA,EADN,cAAc,6BAA6B;AAAA,GAC/B,wBAAA;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents-full-bundle",
-  "version": "2.0.0-next.137",
+  "version": "2.0.0-next.138",
   "type": "module",
   "repository": {
     "type": "git",

package/src/components/alert-subsystem-counter/alert-subsystem-counter.css

@@ -0,0 +1,82 @@
+:host {
+  display: block;
+}
+
+.frame {
+  box-sizing: border-box; /* the host width is the frame width, border included */
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  border-radius: 6px;
+  background: var(--container-section-color);
+  border: 1px solid var(--border-outline-color);
+}
+
+.frame.orientation-vertical {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.leading-container {
+  display: flex;
+  flex: 1 0 0; /* takes the width the badges leave over, so the label can truncate */
+  align-items: center;
+  gap: 4px;
+  min-width: 0; /* lets the label shrink below its text width */
+}
+
+.icon {
+  flex-shrink: 0;
+  width: var(--global-size-spacing-icon-icon-size-regular);
+  height: var(--global-size-spacing-icon-icon-size-regular);
+  color: var(--on-indent-neutral-color);
+}
+
+.icon.no-icon {
+  display: none; /* collapses the flex gap too, so an iconless counter has no leading hole */
+}
+
+.label {
+  @mixin font-body;
+  flex: 1 0 0;
+  min-width: 0; /* required for text-overflow to kick in inside a flex item */
+  padding-left: 4px;
+  color: var(--element-inactive-color);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.frame.has-alert .label {
+  @mixin font-body-active;
+  color: var(--on-indent-active-color);
+}
+
+.trailing-container {
+  display: flex;
+  flex-shrink: 0; /* badges keep their size; the label is what gives way */
+  align-items: center;
+  gap: 4px;
+}
+
+.frame.orientation-horizontal .trailing-container {
+  justify-content: flex-end;
+}
+
+.frame.orientation-vertical .trailing-container {
+  align-self: flex-start; /* hugs its content under the label instead of stretching across the frame */
+}
+
+.frame:not(.has-alert) .trailing-container {
+  justify-content: center;
+  /* same row height as the large badges it stands in for */
+  height: var(--ui-components-badge-min-size-large);
+  padding: 0 8px;
+}
+
+.empty {
+  @mixin font-label;
+  color: var(--element-inactive-color);
+  white-space: nowrap;
+}