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

package/dist/components/alert-button/alert-button.css.js.map

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

package/dist/components/alert-button/alert-button.d.ts

@@ -1,35 +1,18 @@
 import { LitElement } from 'lit';
-import { AlertType, FlashingSpeed, ResolvedFlashingSpeed } from '../../types.js';
-import { FlashingController } from '../../palettes/flashing-controller.js';
-import '../../icons/icon-alerts.js';
-import '../../icons/icon-alerts-active.js';
+import { ObcAlertButtonType } from '../alert-button-item/alert-button-item.js';
+import { AlertType, FlashingSpeed, AlertCounts } from '../../types.js';
 import '../../icons/icon-notification.js';
 import '../../icons/icon-notification-advice.js';
 import '../../icons/icon-notification-advice-active.js';
 import '../../icons/icon-silence-iec.js';
-import '../../icons/icon-alerts-alarm-twotone.js';
-import '../../icons/icon-alerts-warning-twotone.js';
-import '../../icons/icon-alerts-caution-twotone.js';
-import '../../manual-icon/icon-alerts-critical-twotone.js';
-import '../../manual-icon/icon-alerts-diagnostic-twotone.js';
-/**
- * `ObcAlertButtonType` – Enum for alert button visual and behavioral variants.
- *
- * - `flat`: Minimal, icon-only button for compact spaces.
- * - `normal`: Standard button with icon and optional counter.
- * - `enhanced`: Emphasized button with additional styling for high-priority alerts.
- */
-export declare enum ObcAlertButtonType {
-    Flat = "flat",
-    Normal = "normal",
-    Enhanced = "enhanced"
-}
+import '../alert-button-item/alert-button-item.js';
+export { ObcAlertButtonType };
 /**
  * `<obc-alert-button>` – A compact, icon-based button for displaying alert or notification status and count.
  *
  * This 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.
  *
- * Appears in toolbars or notification areas to give users a quick overview of alert status and provide direct access to alert-related actions.
+ * Appears 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.
  *
  * ## Features
  *
@@ -39,6 +22,7 @@ export declare enum ObcAlertButtonType {
  *   - **Enhanced:** Visually prominent button for high-priority alerts, with accent styling.
  * - **Alert Types:** Supports `alarm`, `warning`, `caution`, or no alert (idle). Icon and color adapt to the alert type.
  * - **Alert Counter:** Optional badge displays the number of active alerts (except in flat mode).
+ * - **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.
  * - **Silence Button:** Optional secondary button to mute or silence alerts, shown when enabled and at sufficient width.
  * - **Blinking Animation:** Can animate (blink) to draw attention to active alerts (except for caution type).
  * - **Responsive Layout:** Automatically switches to flat mode below a configurable width, and hides the silence button below another configurable width.
@@ -55,19 +39,7 @@ export declare enum ObcAlertButtonType {
  *
  * **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.
  *
- * ## Properties
- *
- * - `nAlerts` (number): Number of active alerts to display in the counter badge.
- * - `alertType` (`AlertType`): Type of alert (`alarm`, `warning`, `caution`, or undefined for idle).
- * - `type` (`ObcAlertButtonType`): Visual variant of the button (`flat`, `normal`, `enhanced`). Default is `normal`.
- * - `counter` (boolean): Whether to show the alert counter badge (not available in flat mode).
- * - `showSilenceButton` (boolean): Whether to display the silence button (hidden in flat mode or below min breakpoint).
- * - `silenceButtonDisabled` (boolean): Disables the silence button when true.
- * - `flatMaxBreakpointPx` (number): Maximum width (in px) for normal/enhanced mode; below this, switches to flat mode.
- * - `silenceButtonMinBreakpointPx` (number): Minimum width (in px) to show the silence button; below this, it is hidden.
- * - `blinking` (boolean): Enables blinking animation for active alerts (not for caution type).
- * - `flashingSpeed`: tempo of the blink (`default` follows the alert type: critical/alarm/high fast, warning/medium slow, low very slow; `fixed` never flashes).
- * - `large` (boolean): Increases button size for prominent or touch-friendly use.
+ * **TODO(designer):** The Figma Alert button has no flat Global counter, so below `flatMaxBreakpointPx` the button shows the flat bell without the counts.
  *
  * ## Events
  *
@@ -99,47 +71,40 @@ export declare enum ObcAlertButtonType {
  *
  * In 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.
  *
- * @property flashingSpeed - Flash tempo while `blinking` is on: `default` resolves from
- *   `alertType`, `fast`, `slow`, `very-slow` force a tempo, `fixed` never flashes.
+ * @property nAlerts - Number of active alerts shown in the counter; 0 shows the idle state.
+ * @property alertType - Alert type that selects the icon and colours: `alarm`, `warning`, `caution`, a `level-*` severity, or unset for the idle state.
+ * @property type - Visual variant: `flat` (icon only), `normal` (default, icon and optional counter) or `enhanced` (emphasized for high-priority alerts).
+ * @property large - Increases the button height and padding for touch-friendly or prominent use.
+ * @property showSilenceButton - Shows the silence button when the width is at least `silenceButtonMinBreakpointPx` and the button is not flat.
  * @property silenceButtonDisabled - Disables the silence button when true.
  * @availableWhen silenceButtonDisabled showSilenceButton==true
- * @slot - No content slots. All content is provided via properties.
+ * @property counter - Shows the alert counter when there are active alerts and the button is not flat.
+ * @property globalCounter - 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.
+ * @property counts - Alert count per severity for the global counter badges (`countAlarm`, `countWarning`, `countCaution` and the `level-*` counts).
+ * @availableWhen counts globalCounter==true
+ * @property shelvedCount - Number of shelved alerts, shown after the global counter badges; hidden at zero.
+ * @availableWhen shelvedCount globalCounter==true
+ * @property blinking - Flashes the bell for active alerts of a flashing alert type (never for caution).
+ * @property flashingSpeed - Flash tempo while `blinking` is on: `default` resolves from `alertType`, `fast`, `slow`, `very-slow` force a tempo, `fixed` never flashes.
+ * @availableWhen flashingSpeed blinking==true
+ * @property flatMaxBreakpointPx - Window width in px below which a `normal` or `enhanced` button switches to flat mode.
+ * @availableWhen flatMaxBreakpointPx type!=flat
+ * @property silenceButtonMinBreakpointPx - Minimum window width in px for showing the silence button.
+ * @availableWhen silenceButtonMinBreakpointPx showSilenceButton==true
  * @fires {CustomEvent<void>} click-alert - Fired when the main alert button is clicked.
  * @fires {CustomEvent<void>} click-silence - Fired when the silence button is clicked.
  * @stable
  */
 export declare class ObcAlertButton extends LitElement {
-    /**
-     * Number of active alerts to display in the counter badge.
-     *
-     * If set to 0, the button appears in the idle state.
-     */
+    /** Number of active alerts shown in the counter; 0 shows the idle state. */
     nAlerts: number;
-    /**
-     * Type of alert to display.
-     *
-     * Determines the icon and color scheme. Can be `alarm`, `warning`, `caution`, or undefined for idle state.
-     */
+    /** Alert type that selects the icon and colours: `alarm`, `warning`, `caution`, a `level-*` severity, or unset for the idle state. */
     alertType?: AlertType;
-    /**
-     * Visual variant of the button.
-     *
-     * - `flat`: Minimal, icon-only button for compact layouts.
-     * - `normal`: Standard button with icon and optional counter (default).
-     * - `enhanced`: Emphasized button for high-priority alerts.
-     */
+    /** Visual variant: `flat` (icon only), `normal` (default, icon and optional counter) or `enhanced` (emphasized for high-priority alerts). */
     type: ObcAlertButtonType;
-    /**
-     * Increases button size for touch-friendly or prominent use.
-     *
-     * Adds extra height and padding.
-     */
+    /** Increases the button height and padding for touch-friendly or prominent use. */
     large: boolean;
-    /**
-     * Whether to display the silence button.
-     *
-     * The silence button is only shown if this is true, the width is above `silenceButtonMinBreakpointPx`, and the button is not in flat mode.
-     */
+    /** Shows the silence button when the width is at least `silenceButtonMinBreakpointPx` and the button is not flat. */
     showSilenceButton: boolean;
     /**
      * Disables the silence button when true.
@@ -147,47 +112,46 @@ export declare class ObcAlertButton extends LitElement {
      * Available when `showSilenceButton==true`.
      */
     silenceButtonDisabled: boolean;
+    /** Shows the alert counter when there are active alerts and the button is not flat. */
+    counter: boolean;
+    /** 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. */
+    globalCounter: boolean;
     /**
-     * Whether to show the alert counter badge.
+     * Alert count per severity for the global counter badges (`countAlarm`, `countWarning`, `countCaution` and the `level-*` counts).
      *
-     * Only shown when there are active alerts and the button is not in flat mode.
+     * Available when `globalCounter==true`.
      */
-    counter: boolean;
+    counts: AlertCounts;
     /**
-     * Enables blinking animation for active alerts.
+     * Number of shelved alerts, shown after the global counter badges; hidden at zero.
      *
-     * Blinking is only shown for alarm and warning types, not for caution.
+     * Available when `globalCounter==true`.
      */
+    shelvedCount: number;
+    /** Flashes the bell for active alerts of a flashing alert type (never for caution). */
     blinking: boolean;
-    /** Flash tempo while `blinking` is on: `default` resolves from `alertType`, `fast`, `slow`, `very-slow` force a tempo, `fixed` never flashes. */
-    flashingSpeed: FlashingSpeed;
-    protected readonly flashing: FlashingController;
-    get resolvedFlashingSpeed(): ResolvedFlashingSpeed;
     /**
-     * Maximum width (in px) for normal/enhanced mode.
+     * Flash tempo while `blinking` is on: `default` resolves from `alertType`, `fast`, `slow`, `very-slow` force a tempo, `fixed` never flashes.
      *
-     * If the available width is less than this value, the button switches to flat mode.
-     * Only applies when `type` is set to `normal` or `enhanced`.
+     * Available when `blinking==true`.
+     */
+    flashingSpeed: FlashingSpeed;
+    /**
+     * Window width in px below which a `normal` or `enhanced` button switches to flat mode.
      *
-     * @availableWhen type!=flat
+     * Available when `type!=flat`.
      */
     flatMaxBreakpointPx: number;
     /**
-     * Minimum width (in px) to show the silence button.
-     *
-     * If the available width is less than this value, the silence button is hidden.
-     * Only applies when `showSilenceButton` is true.
+     * Minimum window width in px for showing the silence button.
      *
-     * @availableWhen showSilenceButton==true
+     * Available when `showSilenceButton==true`.
      */
     silenceButtonMinBreakpointPx: number;
     private width;
     private resizeListener;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    private renderAlertTwotoneIcon;
-    private alertIcon;
-    private alertIconNegative;
     private get activeType();
     private get showSilenceButtonDynamic();
     render(): import('lit-html').TemplateResult<1>;

package/dist/components/alert-button/alert-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert-button.d.ts","sourceRoot":"","sources":["../../../src/components/alert-button/alert-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAGzD,OAAO,4BAA4B,CAAC;AACpC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,kCAAkC,CAAC;AAC1C,OAAO,yCAAyC,CAAC;AACjD,OAAO,gDAAgD,CAAC;AACxD,OAAO,iCAAiC,CAAC;AACzC,OAAO,0CAA0C,CAAC;AAClD,OAAO,4CAA4C,CAAC;AACpD,OAAO,4CAA4C,CAAC;AACpD,OAAO,mDAAmD,CAAC;AAC3D,OAAO,qDAAqD,CAAC;AAC7D,OAAO,EACL,SAAS,EACT,aAAa,EACb,KAAK,qBAAqB,EAC3B,MAAM,gBAAgB,CAAC;AASxB,OAAO,EAAC,kBAAkB,EAAC,MAAM,uCAAuC,CAAC;AAEzE;;;;;;GAMG;AACH,oBAAY,kBAAkB;IAC5B,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,QAAQ,aAAa;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmFG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C;;;;OAIG;IACuB,OAAO,SAAK;IAEtC;;;;OAIG;IACuB,SAAS,CAAC,EAAE,SAAS,CAAC;IAEhD;;;;;;OAMG;IACuB,IAAI,qBAA6B;IAE3D;;;;OAIG;IACwB,KAAK,UAAS;IAEzC;;;;OAIG;IACwB,iBAAiB,UAAS;IAE1B,qBAAqB,UAAS;IAEzD;;;;OAIG;IACwB,OAAO,UAAS;IAE3C;;;;OAIG;IACwB,QAAQ,UAAS;IAElB,aAAa,EAAE,aAAa,CAC9B;IAExB,SAAS,CAAC,QAAQ,CAAC,QAAQ,qBAGzB;IAEF,IAAI,qBAAqB,IAAI,qBAAqB,CASjD;IAED;;;;;;;OAOG;IACuB,mBAAmB,SAAK;IAElD;;;;;;;OAOG;IACuB,4BAA4B,SAAK;IAElD,OAAO,CAAC,KAAK,CAAqB;IAE3C,OAAO,CAAC,cAAc,CAEpB;IAEO,iBAAiB;IAKjB,oBAAoB;IAK7B,OAAO,CAAC,sBAAsB;IAiC9B,OAAO,CAAC,SAAS;IAWjB,OAAO,CAAC,iBAAiB;IASzB,OAAO,KAAK,UAAU,GAQrB;IAED,OAAO,KAAK,wBAAwB,GAMnC;IAEQ,MAAM;IAwDf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}
+{"version":3,"file":"alert-button.d.ts","sourceRoot":"","sources":["../../../src/components/alert-button/alert-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAKzD,OAAO,kCAAkC,CAAC;AAC1C,OAAO,yCAAyC,CAAC;AACjD,OAAO,gDAAgD,CAAC;AACxD,OAAO,iCAAiC,CAAC;AACzC,OAAO,2CAA2C,CAAC;AACnD,OAAO,EAAC,kBAAkB,EAAC,MAAM,2CAA2C,CAAC;AAC7E,OAAO,EAAC,SAAS,EAAE,aAAa,EAAE,KAAK,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAG1E,OAAO,EAAC,kBAAkB,EAAC,CAAC;AAE5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuFG;AACH,qBAEa,cAAe,SAAQ,UAAU;IAClB,OAAO,SAAK;IACZ,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,qBAA6B;IAChC,KAAK,UAAS;IACd,iBAAiB,UAAS;IAC1B,qBAAqB,UAAS;IAC9B,OAAO,UAAS;IAChB,aAAa,UAAS;IACL,MAAM,EAAE,WAAW,CAAM;IAC3C,YAAY,SAAK;IAChB,QAAQ,UAAS;IAClB,aAAa,EAAE,aAAa,CAC9B;IACE,mBAAmB,SAAK;IACxB,4BAA4B,SAAK;IAElD,OAAO,CAAC,KAAK,CAAqB;IAE3C,OAAO,CAAC,cAAc,CAEpB;IAEO,iBAAiB;IAKjB,oBAAoB;IAK7B,OAAO,KAAK,UAAU,GAQrB;IAED,OAAO,KAAK,wBAAwB,GAMnC;IAEQ,MAAM;IA4Cf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

package/dist/components/alert-button/alert-button.js

@@ -1,22 +1,15 @@
-import { unsafeCSS, LitElement, html, nothing } from "lit";
+import { unsafeCSS, LitElement, nothing, html } from "lit";
 import { property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { localized, msg } from "@lit/localize";
 import compentStyle from "./alert-button.css.js";
-import "../../icons/icon-alerts.js";
-import "../../icons/icon-alerts-active.js";
 import "../../icons/icon-notification.js";
 import "../../icons/icon-notification-advice.js";
 import "../../icons/icon-notification-advice-active.js";
 import "../../icons/icon-silence-iec.js";
-import "../../icons/icon-alerts-alarm-twotone.js";
-import "../../icons/icon-alerts-warning-twotone.js";
-import "../../icons/icon-alerts-caution-twotone.js";
-import "../../manual-icon/icon-alerts-critical-twotone.js";
-import "../../manual-icon/icon-alerts-diagnostic-twotone.js";
+import { ObcAlertButtonType } from "../alert-button-item/alert-button-item.js";
 import { FlashingSpeed } from "../../types.js";
-import { resolveFlashingSpeed, AlertFlashPhase, getAlertTwotoneComponent, AlertTwotoneComponent } from "../../alert-severity.js";
-import { classMap } from "lit/directives/class-map.js";
 import { customElement } from "../../decorator.js";
-import { FlashingController } from "../../palettes/flashing-controller.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -27,27 +20,20 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-var ObcAlertButtonType = /* @__PURE__ */ ((ObcAlertButtonType2) => {
-  ObcAlertButtonType2["Flat"] = "flat";
-  ObcAlertButtonType2["Normal"] = "normal";
-  ObcAlertButtonType2["Enhanced"] = "enhanced";
-  return ObcAlertButtonType2;
-})(ObcAlertButtonType || {});
 let ObcAlertButton = class extends LitElement {
   constructor() {
     super(...arguments);
     this.nAlerts = 0;
-    this.type = "normal";
+    this.type = ObcAlertButtonType.Normal;
     this.large = false;
     this.showSilenceButton = false;
     this.silenceButtonDisabled = false;
     this.counter = false;
+    this.globalCounter = false;
+    this.counts = {};
+    this.shelvedCount = 0;
     this.blinking = false;
     this.flashingSpeed = FlashingSpeed.Default;
-    this.flashing = new FlashingController(
-      this,
-      () => this.resolvedFlashingSpeed
-    );
     this.flatMaxBreakpointPx = 0;
     this.silenceButtonMinBreakpointPx = 0;
     this.width = window.innerWidth;
@@ -55,16 +41,6 @@ let ObcAlertButton = class extends LitElement {
       this.width = window.innerWidth;
     };
   }
-  get resolvedFlashingSpeed() {
-    if (!this.blinking || this.nAlerts <= 0 || this.alertType === void 0) {
-      return FlashingSpeed.Fixed;
-    }
-    return resolveFlashingSpeed(
-      this.flashingSpeed,
-      this.alertType,
-      AlertFlashPhase.Active
-    );
-  }
   connectedCallback() {
     super.connectedCallback();
     window.addEventListener("resize", this.resizeListener);
@@ -73,99 +49,46 @@ let ObcAlertButton = class extends LitElement {
     window.removeEventListener("resize", this.resizeListener);
     super.disconnectedCallback();
   }
-  renderAlertTwotoneIcon() {
-    const twotone = this.alertType ? getAlertTwotoneComponent(this.alertType) : AlertTwotoneComponent.Caution;
-    switch (twotone) {
-      case AlertTwotoneComponent.Critical:
-        return html`<obi-alerts-critical-twotone
-          useCssColor
-          class="icon"
-        ></obi-alerts-critical-twotone>`;
-      case AlertTwotoneComponent.Diagnostic:
-        return html`<obi-alerts-diagnostic-twotone
-          useCssColor
-          class="icon"
-        ></obi-alerts-diagnostic-twotone>`;
-      case AlertTwotoneComponent.Warning:
-        return html`<obi-alerts-warning-twotone
-          useCssColor
-          class="icon"
-        ></obi-alerts-warning-twotone>`;
-      case AlertTwotoneComponent.Caution:
-        return html`<obi-alerts-caution-twotone
-          useCssColor
-          class="icon"
-        ></obi-alerts-caution-twotone>`;
-      default:
-        return html`<obi-alerts-alarm-twotone
-          useCssColor
-          class="icon"
-        ></obi-alerts-alarm-twotone>`;
-    }
-  }
-  alertIcon() {
-    const isIdle = this.nAlerts === 0;
-    if (isIdle) {
-      return html`<obi-alerts class="icon"></obi-alerts>`;
-    }
-    if (this.type === "enhanced") {
-      return html`<obi-alerts-active class="icon"></obi-alerts-active>`;
-    }
-    return this.renderAlertTwotoneIcon();
-  }
-  alertIconNegative() {
-    const useIdle = this.nAlerts === 0 || this.type !== "enhanced";
-    if (useIdle) {
-      return html`<obi-alerts class="icon"></obi-alerts>`;
-    }
-    return this.renderAlertTwotoneIcon();
-  }
   get activeType() {
-    if (this.type === "flat") {
-      return "flat";
+    if (this.type === ObcAlertButtonType.Flat) {
+      return ObcAlertButtonType.Flat;
     }
     if (this.width < this.flatMaxBreakpointPx) {
-      return "flat";
+      return ObcAlertButtonType.Flat;
     }
     return this.type;
   }
   get showSilenceButtonDynamic() {
-    return this.showSilenceButton && this.width >= this.silenceButtonMinBreakpointPx && this.activeType !== "flat";
+    return this.showSilenceButton && this.width >= this.silenceButtonMinBreakpointPx && this.activeType !== ObcAlertButtonType.Flat;
   }
   render() {
-    const hasAlerts = this.nAlerts > 0;
-    const showCounter = this.counter && hasAlerts && this.activeType !== "flat";
-    const tempo = this.resolvedFlashingSpeed;
-    const showBlinking = tempo !== FlashingSpeed.Fixed;
+    const showSilence = this.showSilenceButtonDynamic;
     return html`
       <div
         class=${classMap({
       wrapper: true,
-      [`alert-type-${this.alertType ?? "none"}`]: true,
-      counter: showCounter,
-      "has-silence": this.showSilenceButtonDynamic,
       [`type-${this.activeType}`]: true,
-      [`flash-${tempo}`]: true,
       large: this.large
     })}
       >
-        <button
-          class="alert-button"
+        <obc-alert-button-item
+          .type=${this.activeType}
+          .alertType=${this.alertType}
+          .nAlerts=${this.nAlerts}
+          .counter=${this.counter}
+          .globalCounter=${this.globalCounter && this.activeType !== ObcAlertButtonType.Flat}
+          .counts=${this.counts}
+          .shelvedCount=${this.shelvedCount}
+          .blinking=${this.blinking}
+          .flashingSpeed=${this.flashingSpeed}
+          .fillHeight=${this.large}
+          ?data-group-item-not-last=${showSilence}
           @click=${() => this.dispatchEvent(new CustomEvent("click-alert"))}
-        >
-          ${showBlinking ? html` <div class="blink">
-                ${this.alertIconNegative()}
-                ${showCounter ? html`<div class="badge">${this.nAlerts}</div>` : null}
-              </div>` : nothing}
-          <div class="visible-wrapper">
-            ${this.alertIcon()}
-            ${showCounter ? html`<div class="badge">${this.nAlerts}</div>` : nothing}
-          </div>
-        </button>
-
-        ${this.showSilenceButtonDynamic ? html`
+        ></obc-alert-button-item>
+        ${showSilence ? html`
               <button
                 class="silence-button"
+                aria-label=${msg("Silence")}
                 @click=${() => this.dispatchEvent(new CustomEvent("click-silence"))}
                 ?disabled=${this.silenceButtonDisabled}
               >
@@ -173,7 +96,7 @@ let ObcAlertButton = class extends LitElement {
                   <obi-silence-iec class="icon"></obi-silence-iec>
                 </div>
               </button>
-            ` : null}
+            ` : nothing}
       </div>
     `;
   }
@@ -200,6 +123,15 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], ObcAlertButton.prototype, "counter", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcAlertButton.prototype, "globalCounter", 2);
+__decorateClass([
+  property({ type: Object, attribute: false })
+], ObcAlertButton.prototype, "counts", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcAlertButton.prototype, "shelvedCount", 2);
 __decorateClass([
   property({ type: Boolean })
 ], ObcAlertButton.prototype, "blinking", 2);
@@ -216,7 +148,8 @@ __decorateClass([
   state()
 ], ObcAlertButton.prototype, "width", 2);
 ObcAlertButton = __decorateClass([
-  customElement("obc-alert-button")
+  customElement("obc-alert-button"),
+  localized()
 ], ObcAlertButton);
 export {
   ObcAlertButton,

package/dist/components/alert-button/alert-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-button.js","sources":["../../../src/components/alert-button/alert-button.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport compentStyle from './alert-button.css?inline';\nimport '../../icons/icon-alerts.js';\nimport '../../icons/icon-alerts-active.js';\nimport '../../icons/icon-notification.js';\nimport '../../icons/icon-notification-advice.js';\nimport '../../icons/icon-notification-advice-active.js';\nimport '../../icons/icon-silence-iec.js';\nimport '../../icons/icon-alerts-alarm-twotone.js';\nimport '../../icons/icon-alerts-warning-twotone.js';\nimport '../../icons/icon-alerts-caution-twotone.js';\nimport '../../manual-icon/icon-alerts-critical-twotone.js';\nimport '../../manual-icon/icon-alerts-diagnostic-twotone.js';\nimport {\n  AlertType,\n  FlashingSpeed,\n  type ResolvedFlashingSpeed,\n} from '../../types.js';\nimport {\n  AlertFlashPhase,\n  getAlertTwotoneComponent,\n  AlertTwotoneComponent,\n  resolveFlashingSpeed,\n} from '../../alert-severity.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../../decorator.js';\nimport {FlashingController} from '../../palettes/flashing-controller.js';\n\n/**\n * `ObcAlertButtonType` – Enum for alert button visual and behavioral variants.\n *\n * - `flat`: Minimal, icon-only button for compact spaces.\n * - `normal`: Standard button with icon and optional counter.\n * - `enhanced`: Emphasized button with additional styling for high-priority alerts.\n */\nexport enum ObcAlertButtonType {\n  Flat = 'flat',\n  Normal = 'normal',\n  Enhanced = 'enhanced',\n}\n\n/**\n * `<obc-alert-button>` – A compact, icon-based button for displaying alert or notification status and count.\n *\n * This 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 *\n * Appears 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 *\n * Use `<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 *\n * In 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.\n *\n * @property flashingSpeed - Flash tempo while `blinking` is on: `default` resolves from\n *   `alertType`, `fast`, `slow`, `very-slow` force a tempo, `fixed` never flashes.\n * @property silenceButtonDisabled - Disables the silence button when true.\n * @availableWhen silenceButtonDisabled showSilenceButton==true\n * @slot - No content slots. All content is provided via properties.\n * @fires {CustomEvent<void>} click-alert - Fired when the main alert button is clicked.\n * @fires {CustomEvent<void>} click-silence - Fired when the silence button is clicked.\n * @stable\n */\n@customElement('obc-alert-button')\nexport class ObcAlertButton extends LitElement {\n  /**\n   * Number of active alerts to display in the counter badge.\n   *\n   * If set to 0, the button appears in the idle state.\n   */\n  @property({type: Number}) nAlerts = 0;\n\n  /**\n   * Type of alert to display.\n   *\n   * Determines the icon and color scheme. Can be `alarm`, `warning`, `caution`, or undefined for idle state.\n   */\n  @property({type: String}) alertType?: AlertType;\n\n  /**\n   * 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.\n   */\n  @property({type: String}) type = ObcAlertButtonType.Normal;\n\n  /**\n   * Increases button size for touch-friendly or prominent use.\n   *\n   * Adds extra height and padding.\n   */\n  @property({type: Boolean}) large = false;\n\n  /**\n   * Whether to display the silence button.\n   *\n   * The silence button is only shown if this is true, the width is above `silenceButtonMinBreakpointPx`, and the button is not in flat mode.\n   */\n  @property({type: Boolean}) showSilenceButton = false;\n\n  @property({type: Boolean}) silenceButtonDisabled = false;\n\n  /**\n   * Whether to show the alert counter badge.\n   *\n   * Only shown when there are active alerts and the button is not in flat mode.\n   */\n  @property({type: Boolean}) counter = false;\n\n  /**\n   * Enables blinking animation for active alerts.\n   *\n   * Blinking is only shown for alarm and warning types, not for caution.\n   */\n  @property({type: Boolean}) blinking = false;\n\n  @property({type: String}) flashingSpeed: FlashingSpeed =\n    FlashingSpeed.Default;\n\n  protected readonly flashing = new FlashingController(\n    this,\n    () => this.resolvedFlashingSpeed\n  );\n\n  get resolvedFlashingSpeed(): ResolvedFlashingSpeed {\n    if (!this.blinking || this.nAlerts <= 0 || this.alertType === undefined) {\n      return FlashingSpeed.Fixed;\n    }\n    return resolveFlashingSpeed(\n      this.flashingSpeed,\n      this.alertType,\n      AlertFlashPhase.Active\n    );\n  }\n\n  /**\n   * Maximum width (in px) for normal/enhanced mode.\n   *\n   * If the available width is less than this value, the button switches to flat mode.\n   * Only applies when `type` is set to `normal` or `enhanced`.\n   *\n   * @availableWhen type!=flat\n   */\n  @property({type: Number}) flatMaxBreakpointPx = 0;\n\n  /**\n   * Minimum width (in px) to show the silence button.\n   *\n   * If the available width is less than this value, the silence button is hidden.\n   * Only applies when `showSilenceButton` is true.\n   *\n   * @availableWhen showSilenceButton==true\n   */\n  @property({type: Number}) silenceButtonMinBreakpointPx = 0;\n\n  @state() private width = window.innerWidth;\n\n  private resizeListener = () => {\n    this.width = window.innerWidth;\n  };\n\n  override connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener('resize', this.resizeListener);\n  }\n\n  override disconnectedCallback() {\n    window.removeEventListener('resize', this.resizeListener);\n    super.disconnectedCallback();\n  }\n\n  private renderAlertTwotoneIcon() {\n    const twotone = this.alertType\n      ? getAlertTwotoneComponent(this.alertType)\n      : AlertTwotoneComponent.Caution;\n    switch (twotone) {\n      case AlertTwotoneComponent.Critical:\n        return html`<obi-alerts-critical-twotone\n          useCssColor\n          class=\"icon\"\n        ></obi-alerts-critical-twotone>`;\n      case AlertTwotoneComponent.Diagnostic:\n        return html`<obi-alerts-diagnostic-twotone\n          useCssColor\n          class=\"icon\"\n        ></obi-alerts-diagnostic-twotone>`;\n      case AlertTwotoneComponent.Warning:\n        return html`<obi-alerts-warning-twotone\n          useCssColor\n          class=\"icon\"\n        ></obi-alerts-warning-twotone>`;\n      case AlertTwotoneComponent.Caution:\n        return html`<obi-alerts-caution-twotone\n          useCssColor\n          class=\"icon\"\n        ></obi-alerts-caution-twotone>`;\n      default:\n        return html`<obi-alerts-alarm-twotone\n          useCssColor\n          class=\"icon\"\n        ></obi-alerts-alarm-twotone>`;\n    }\n  }\n\n  private alertIcon() {\n    const isIdle = this.nAlerts === 0;\n    if (isIdle) {\n      return html`<obi-alerts class=\"icon\"></obi-alerts>`;\n    }\n    if (this.type === ObcAlertButtonType.Enhanced) {\n      return html`<obi-alerts-active class=\"icon\"></obi-alerts-active>`;\n    }\n    return this.renderAlertTwotoneIcon();\n  }\n\n  private alertIconNegative() {\n    const useIdle =\n      this.nAlerts === 0 || this.type !== ObcAlertButtonType.Enhanced;\n    if (useIdle) {\n      return html`<obi-alerts class=\"icon\"></obi-alerts>`;\n    }\n    return this.renderAlertTwotoneIcon();\n  }\n\n  private get activeType(): ObcAlertButtonType {\n    if (this.type === ObcAlertButtonType.Flat) {\n      return ObcAlertButtonType.Flat;\n    }\n    if (this.width < this.flatMaxBreakpointPx) {\n      return ObcAlertButtonType.Flat;\n    }\n    return this.type;\n  }\n\n  private get showSilenceButtonDynamic(): boolean {\n    return (\n      this.showSilenceButton &&\n      this.width >= this.silenceButtonMinBreakpointPx &&\n      this.activeType !== ObcAlertButtonType.Flat\n    );\n  }\n\n  override render() {\n    const hasAlerts = this.nAlerts > 0;\n    const showCounter =\n      this.counter && hasAlerts && this.activeType !== ObcAlertButtonType.Flat;\n    const tempo = this.resolvedFlashingSpeed;\n    const showBlinking = tempo !== FlashingSpeed.Fixed;\n    return html`\n      <div\n        class=${classMap({\n          wrapper: true,\n          [`alert-type-${this.alertType ?? 'none'}`]: true,\n          counter: showCounter,\n          'has-silence': this.showSilenceButtonDynamic,\n          [`type-${this.activeType}`]: true,\n          [`flash-${tempo}`]: true,\n          large: this.large,\n        })}\n      >\n        <button\n          class=\"alert-button\"\n          @click=${() => this.dispatchEvent(new CustomEvent('click-alert'))}\n        >\n          ${showBlinking\n            ? html` <div class=\"blink\">\n                ${this.alertIconNegative()}\n                ${showCounter\n                  ? html`<div class=\"badge\">${this.nAlerts}</div>`\n                  : null}\n              </div>`\n            : nothing}\n          <div class=\"visible-wrapper\">\n            ${this.alertIcon()}\n            ${showCounter\n              ? html`<div class=\"badge\">${this.nAlerts}</div>`\n              : nothing}\n          </div>\n        </button>\n\n        ${this.showSilenceButtonDynamic\n          ? html`\n              <button\n                class=\"silence-button\"\n                @click=${() =>\n                  this.dispatchEvent(new CustomEvent('click-silence'))}\n                ?disabled=${this.silenceButtonDisabled}\n              >\n                <div class=\"visible-wrapper\">\n                  <obi-silence-iec class=\"icon\"></obi-silence-iec>\n                </div>\n              </button>\n            `\n          : null}\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-alert-button': ObcAlertButton;\n  }\n}\n"],"names":["ObcAlertButtonType"],"mappings":"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"}
+{"version":3,"file":"alert-button.js","sources":["../../../src/components/alert-button/alert-button.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {localized, msg} from '@lit/localize';\nimport compentStyle from './alert-button.css?inline';\nimport '../../icons/icon-notification.js';\nimport '../../icons/icon-notification-advice.js';\nimport '../../icons/icon-notification-advice-active.js';\nimport '../../icons/icon-silence-iec.js';\nimport '../alert-button-item/alert-button-item.js';\nimport {ObcAlertButtonType} from '../alert-button-item/alert-button-item.js';\nimport {AlertType, FlashingSpeed, type AlertCounts} from '../../types.js';\nimport {customElement} from '../../decorator.js';\n\nexport {ObcAlertButtonType};\n\n/**\n * `<obc-alert-button>` – A compact, icon-based button for displaying alert or notification status and count.\n *\n * This 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 *\n * Appears 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 *\n * Use `<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 *\n * In 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.\n *\n * @property nAlerts - Number of active alerts shown in the counter; 0 shows the idle state.\n * @property alertType - Alert type that selects the icon and colours: `alarm`, `warning`, `caution`, a `level-*` severity, or unset for the idle state.\n * @property type - Visual variant: `flat` (icon only), `normal` (default, icon and optional counter) or `enhanced` (emphasized for high-priority alerts).\n * @property large - Increases the button height and padding for touch-friendly or prominent use.\n * @property showSilenceButton - Shows the silence button when the width is at least `silenceButtonMinBreakpointPx` and the button is not flat.\n * @property silenceButtonDisabled - Disables the silence button when true.\n * @availableWhen silenceButtonDisabled showSilenceButton==true\n * @property counter - Shows the alert counter when there are active alerts and the button is not flat.\n * @property globalCounter - 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.\n * @property counts - Alert count per severity for the global counter badges (`countAlarm`, `countWarning`, `countCaution` and the `level-*` counts).\n * @availableWhen counts globalCounter==true\n * @property shelvedCount - Number of shelved alerts, shown after the global counter badges; hidden at zero.\n * @availableWhen shelvedCount globalCounter==true\n * @property blinking - Flashes the bell for active alerts of a flashing alert type (never for caution).\n * @property flashingSpeed - Flash tempo while `blinking` is on: `default` resolves from `alertType`, `fast`, `slow`, `very-slow` force a tempo, `fixed` never flashes.\n * @availableWhen flashingSpeed blinking==true\n * @property flatMaxBreakpointPx - Window width in px below which a `normal` or `enhanced` button switches to flat mode.\n * @availableWhen flatMaxBreakpointPx type!=flat\n * @property silenceButtonMinBreakpointPx - Minimum window width in px for showing the silence button.\n * @availableWhen silenceButtonMinBreakpointPx showSilenceButton==true\n * @fires {CustomEvent<void>} click-alert - Fired when the main alert button is clicked.\n * @fires {CustomEvent<void>} click-silence - Fired when the silence button is clicked.\n * @stable\n */\n@customElement('obc-alert-button')\n@localized()\nexport class ObcAlertButton extends LitElement {\n  @property({type: Number}) nAlerts = 0;\n  @property({type: String}) alertType?: AlertType;\n  @property({type: String}) type = ObcAlertButtonType.Normal;\n  @property({type: Boolean}) large = false;\n  @property({type: Boolean}) showSilenceButton = false;\n  @property({type: Boolean}) silenceButtonDisabled = false;\n  @property({type: Boolean}) counter = false;\n  @property({type: Boolean}) globalCounter = false;\n  @property({type: Object, attribute: false}) counts: AlertCounts = {};\n  @property({type: Number}) shelvedCount = 0;\n  @property({type: Boolean}) blinking = false;\n  @property({type: String}) flashingSpeed: FlashingSpeed =\n    FlashingSpeed.Default;\n  @property({type: Number}) flatMaxBreakpointPx = 0;\n  @property({type: Number}) silenceButtonMinBreakpointPx = 0;\n\n  @state() private width = window.innerWidth;\n\n  private resizeListener = () => {\n    this.width = window.innerWidth;\n  };\n\n  override connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener('resize', this.resizeListener);\n  }\n\n  override disconnectedCallback() {\n    window.removeEventListener('resize', this.resizeListener);\n    super.disconnectedCallback();\n  }\n\n  private get activeType(): ObcAlertButtonType {\n    if (this.type === ObcAlertButtonType.Flat) {\n      return ObcAlertButtonType.Flat;\n    }\n    if (this.width < this.flatMaxBreakpointPx) {\n      return ObcAlertButtonType.Flat;\n    }\n    return this.type;\n  }\n\n  private get showSilenceButtonDynamic(): boolean {\n    return (\n      this.showSilenceButton &&\n      this.width >= this.silenceButtonMinBreakpointPx &&\n      this.activeType !== ObcAlertButtonType.Flat\n    );\n  }\n\n  override render() {\n    const showSilence = this.showSilenceButtonDynamic;\n    return html`\n      <div\n        class=${classMap({\n          wrapper: true,\n          [`type-${this.activeType}`]: true,\n          large: this.large,\n        })}\n      >\n        <obc-alert-button-item\n          .type=${this.activeType}\n          .alertType=${this.alertType}\n          .nAlerts=${this.nAlerts}\n          .counter=${this.counter}\n          .globalCounter=${this.globalCounter &&\n          this.activeType !== ObcAlertButtonType.Flat}\n          .counts=${this.counts}\n          .shelvedCount=${this.shelvedCount}\n          .blinking=${this.blinking}\n          .flashingSpeed=${this.flashingSpeed}\n          .fillHeight=${this.large}\n          ?data-group-item-not-last=${showSilence}\n          @click=${() => this.dispatchEvent(new CustomEvent('click-alert'))}\n        ></obc-alert-button-item>\n        ${showSilence\n          ? html`\n              <button\n                class=\"silence-button\"\n                aria-label=${msg('Silence')}\n                @click=${() =>\n                  this.dispatchEvent(new CustomEvent('click-silence'))}\n                ?disabled=${this.silenceButtonDisabled}\n              >\n                <div class=\"visible-wrapper\">\n                  <obi-silence-iec class=\"icon\"></obi-silence-iec>\n                </div>\n              </button>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-alert-button': ObcAlertButton;\n  }\n}\n"],"names":[],"mappings":"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"}