@oicl/openbridge-webcomponents 2.0.0-next.57 → 2.0.0-next.59

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

@@ -3,13 +3,14 @@ import { AlertType } from '../../types.js';
 import '../../icons/icon-alerts.js';
 import '../../icons/icon-alerts-active.js';
 import '../../icons/icon-notification.js';
-import '../../icons/icon-notification-filled.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.
  *
@@ -167,6 +168,7 @@ export declare class ObcAlertButton extends LitElement {
     private resizeListener;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    private renderAlertTwotoneIcon;
     private alertIcon;
     private alertIconNegative;
     private get activeType();

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,yCAAyC,CAAC;AACjD,OAAO,gDAAgD,CAAC;AACxD,OAAO,iCAAiC,CAAC;AACzC,OAAO,0CAA0C,CAAC;AAClD,OAAO,4CAA4C,CAAC;AACpD,OAAO,4CAA4C,CAAC;AACpD,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAIzC;;;;;;GAMG;AACH,oBAAY,kBAAkB;IAC5B,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,QAAQ,aAAa;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6EG;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;IAErD;;OAEG;IACwB,qBAAqB,UAAS;IAEzD;;;;OAIG;IACwB,OAAO,UAAS;IAE3C;;;;OAIG;IACwB,QAAQ,UAAS;IAE5C;;;;;OAKG;IACuB,mBAAmB,SAAK;IAElD;;;;;OAKG;IACuB,4BAA4B,SAAK;IAElD,OAAO,CAAC,KAAK,CAAqB;IAE3C,OAAO,CAAC,cAAc,CAEpB;IAEO,iBAAiB;IAKjB,oBAAoB;IAK7B,OAAO,CAAC,SAAS;IA2BjB,OAAO,CAAC,iBAAiB;IAwBzB,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;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,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AASzC;;;;;;GAMG;AACH,oBAAY,kBAAkB;IAC5B,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,QAAQ,aAAa;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6EG;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;IAErD;;OAEG;IACwB,qBAAqB,UAAS;IAEzD;;;;OAIG;IACwB,OAAO,UAAS;IAE3C;;;;OAIG;IACwB,QAAQ,UAAS;IAE5C;;;;;OAKG;IACuB,mBAAmB,SAAK;IAElD;;;;;OAKG;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;IA2Df,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

@@ -4,14 +4,15 @@ 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-filled.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 { AlertType } from "../../types.js";
+import "../../manual-icon/icon-alerts-critical-twotone.js";
+import "../../manual-icon/icon-alerts-diagnostic-twotone.js";
+import { getAlertTwotoneComponent, AlertTwotoneComponent, supportsBlinking } from "../../alert-severity.js";
 import { classMap } from "lit/directives/class-map.js";
 import { customElement } from "../../decorator.js";
 var __defProp = Object.defineProperty;
@@ -55,51 +56,52 @@ let ObcAlertButton = class extends LitElement {
     window.removeEventListener("resize", this.resizeListener);
     super.disconnectedCallback();
   }
-  alertIcon() {
-    const isIdle = this.nAlerts === 0;
-    if (isIdle) {
-      return html`<obi-alerts class="icon"></obi-alerts>`;
-    } else {
-      if (this.type === "enhanced") {
-        return html`<obi-alerts-active class="icon"></obi-alerts-active>`;
-      } else if (this.alertType === AlertType.Alarm) {
-        return html`<obi-alerts-alarm-twotone
+  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-alarm-twotone>`;
-      } else if (this.alertType === AlertType.Warning) {
+        ></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>`;
-      } else {
+      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>`;
-    } else if (this.alertType === AlertType.Alarm) {
-      return html`<obi-alerts-alarm-twotone
-        useCssColor
-        class="icon"
-      ></obi-alerts-alarm-twotone>`;
-    } else if (this.alertType === AlertType.Warning) {
-      return html`<obi-alerts-warning-twotone
-        useCssColor
-        class="icon"
-      ></obi-alerts-warning-twotone>`;
-    } else {
-      return html`<obi-alerts-caution-twotone
-        useCssColor
-        class="icon"
-      ></obi-alerts-caution-twotone>`;
     }
+    return this.renderAlertTwotoneIcon();
   }
   get activeType() {
     if (this.type === "flat") {
@@ -116,7 +118,7 @@ let ObcAlertButton = class extends LitElement {
   render() {
     const hasAlerts = this.nAlerts > 0;
     const showCounter = this.counter && hasAlerts && this.activeType !== "flat";
-    const showBlinking = this.blinking && hasAlerts && this.alertType !== AlertType.Caution;
+    const showBlinking = this.blinking && hasAlerts && this.alertType !== void 0 && supportsBlinking(this.alertType);
     return html`
       <div
         class=${classMap({

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-filled.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 {AlertType} from '../../types.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../../decorator.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 * - `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 * @slot - No content slots. All content is provided via properties.\n * @fires click-alert {CustomEvent<void>} Fired when the main alert button is clicked.\n * @fires click-silence {CustomEvent<void>} Fired when the silence button is clicked.\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  /**\n   * Disables the silence button when true.\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  /**\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  @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  @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 alertIcon() {\n    const isIdle = this.nAlerts === 0;\n    if (isIdle) {\n      return html`<obi-alerts class=\"icon\"></obi-alerts>`;\n    } else {\n      if (this.type === ObcAlertButtonType.Enhanced) {\n        return html`<obi-alerts-active class=\"icon\"></obi-alerts-active>`;\n      } else if (this.alertType === AlertType.Alarm) {\n        return html`<obi-alerts-alarm-twotone\n          useCssColor\n          class=\"icon\"\n        ></obi-alerts-alarm-twotone>`;\n      } else if (this.alertType === AlertType.Warning) {\n        return html`<obi-alerts-warning-twotone\n          useCssColor\n          class=\"icon\"\n        ></obi-alerts-warning-twotone>`;\n      } else {\n        return html`<obi-alerts-caution-twotone\n          useCssColor\n          class=\"icon\"\n        ></obi-alerts-caution-twotone>`;\n        //     }\n      }\n    }\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    } else if (this.alertType === AlertType.Alarm) {\n      return html`<obi-alerts-alarm-twotone\n        useCssColor\n        class=\"icon\"\n      ></obi-alerts-alarm-twotone>`;\n    } else if (this.alertType === AlertType.Warning) {\n      return html`<obi-alerts-warning-twotone\n        useCssColor\n        class=\"icon\"\n      ></obi-alerts-warning-twotone>`;\n    } else {\n      return html`<obi-alerts-caution-twotone\n        useCssColor\n        class=\"icon\"\n      ></obi-alerts-caution-twotone>`;\n      //     }\n    }\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 showBlinking =\n      this.blinking && hasAlerts && this.alertType !== AlertType.Caution;\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          blinking: showBlinking,\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 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 {AlertType} from '../../types.js';\nimport {\n  getAlertTwotoneComponent,\n  AlertTwotoneComponent,\n  supportsBlinking,\n} from '../../alert-severity.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../../decorator.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 * - `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 * @slot - No content slots. All content is provided via properties.\n * @fires click-alert {CustomEvent<void>} Fired when the main alert button is clicked.\n * @fires click-silence {CustomEvent<void>} Fired when the silence button is clicked.\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  /**\n   * Disables the silence button when true.\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  /**\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  @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  @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 showBlinking =\n      this.blinking &&\n      hasAlerts &&\n      this.alertType !== undefined &&\n      supportsBlinking(this.alertType);\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          blinking: showBlinking,\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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"}

package/dist/components/alert-frame/alert-frame.css.js

@@ -6,15 +6,19 @@ const compentStyle = css`
 
 :host {
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
+}
+
+:host([wrapcontent]) {
+  position: unset;
+  width: fit-content;
+  height: fit-content;
 }
 
 .wrapper {
   --bg-color: var(--alert-alarm-color);
   --thickness: var(--global-size-spacing-border-weight-alertframe);
+  --blink-on: var(--alarm-blink-on);
   color: var(--on-alarm-active-color);
   position: relative;
   width: 100%;
@@ -23,23 +27,64 @@ const compentStyle = css`
     var(--ui-components-button-border-radius) + var(--thickness) / 2
   );
   outline: var(--thickness) solid var(--bg-color);
-  outline-offset: calc(-1 * var(--thickness));
+  outline-offset: 0;
+  --blink-width: 2px;
 }
 
 .wrapper.thickness-small {
     --thickness: 2px;
+    --blink-width: 1px;
+  }
+
+.wrapper.wrap-content {
+    width: fit-content;
+    height: fit-content;
+  }
+
+.wrapper {
+
+  --blink-width-dynamic: calc(var(--blink-width) * var(--blink-on));
+}
+
+.wrapper.unacked-active {
+    outline-width: calc(var(--thickness) + var(--blink-width-dynamic));
+  }
+
+.wrapper.unacked-rectified {
+    outline-style: dashed;
   }
 
-.wrapper.warning {
+.wrapper.alarm,.wrapper.isa-high {
+    --bg-color: var(--alert-alarm-color);
+    color: var(--on-alarm-active-color);
+  }
+
+.wrapper.warning,.wrapper.isa-medium {
     --bg-color: var(--alert-warning-color);
+    --blink-on: var(--warning-blink-on);
     color: var(--on-warning-active-color);
   }
 
-.wrapper.caution {
+.wrapper.caution,.wrapper.isa-low {
     --bg-color: var(--alert-caution-color);
+    --blink-on: 1;
     color: var(--on-caution-active-color);
   }
 
+.wrapper.isa-low {
+    --blink-on: var(--low-blink-on);
+  }
+
+.wrapper.isa-critical {
+    --bg-color: var(--critical-enabled-background-color);
+    color: var(--on-critical-active-color);
+  }
+
+.wrapper.isa-diagnostic {
+    --bg-color: var(--notification-enabled-background-color);
+    color: var(--on-notification-active-color);
+  }
+
 .wrapper.sharp-edge-top-left {
     border-top-left-radius: 0;
   }
@@ -68,9 +113,9 @@ const compentStyle = css`
 }
 
 .flap.small {
-    top: 0;
+    top: calc(-1 * var(--thickness));
     right: calc(
-      -1 * var(--app-components-alert-frame-icon-size) + var(--thickness) / 2 -
+      -1 * var(--app-components-alert-frame-icon-size) - var(--thickness) / 2 -
         var(--ui-components-badge-padding) * 2
     );
   }
@@ -83,9 +128,13 @@ const compentStyle = css`
   }
 
 .up:is(.flap .mask) {
-      width: calc(var(--ui-components-button-border-radius) + 1px);
+      width: calc(
+        var(--ui-components-button-border-radius) + var(--thickness) + 0.5px
+      );
       top: 0;
-      left: calc(-1 * var(--ui-components-button-border-radius));
+      left: calc(
+        -1 * var(--ui-components-button-border-radius) - var(--thickness)
+      );
       clip-path: polygon(
         0 0,
         100% 0,
@@ -95,10 +144,18 @@ const compentStyle = css`
       );
     }
 
+.unacked-active .up:is(.flap .mask) {
+        top: calc(-1 * var(--blink-width-dynamic));
+      }
+
 .down:is(.flap .mask) {
-      width: calc(var(--ui-components-button-border-radius) + 1px);
+      width: calc(
+        var(--ui-components-button-border-radius) + var(--thickness) + 0.5px
+      );
       bottom: 0;
-      left: calc(-1 * var(--ui-components-button-border-radius));
+      left: calc(
+        -1 * var(--ui-components-button-border-radius) - var(--thickness)
+      );
       clip-path: polygon(
         0 100%,
         100% 100%,
@@ -108,9 +165,17 @@ const compentStyle = css`
       );
     }
 
+.unacked-active .down:is(.flap .mask) {
+        bottom: calc(-1 * var(--blink-width-dynamic));
+      }
+
 .left:is(.flap .mask) {
-      height: calc(var(--ui-components-button-border-radius) + 1px);
-      top: calc(-1 * var(--ui-components-button-border-radius));
+      height: calc(
+        var(--ui-components-button-border-radius) + var(--thickness) + 0.5px
+      );
+      top: calc(
+        -1 * var(--ui-components-button-border-radius) - var(--thickness)
+      );
       left: 0;
       clip-path: polygon(
         0 0,
@@ -121,21 +186,31 @@ const compentStyle = css`
       );
     }
 
+.unacked-active .left:is(.flap .mask) {
+        left: calc(-1 * var(--blink-width-dynamic));
+      }
+
 .top .left:is(.flap .mask) {
         top: unset;
-        bottom: calc(-1 * var(--ui-components-button-border-radius));
+        bottom: calc(
+          -1 * var(--ui-components-button-border-radius) - var(--thickness)
+        );
         clip-path: polygon(
+          0 100%,
           0 0,
           100% 0,
-          var(--thickness) 50%,
           50% var(--thickness),
-          0 100%
+          var(--thickness) 50%
         );
       }
 
 .right:is(.flap .mask) {
-      height: calc(var(--ui-components-button-border-radius) + 1px);
-      top: calc(-1 * var(--ui-components-button-border-radius));
+      height: calc(
+        var(--ui-components-button-border-radius) + var(--thickness) + 0.5px
+      );
+      top: calc(
+        -1 * var(--ui-components-button-border-radius) - var(--thickness)
+      );
       right: 0;
       clip-path: polygon(
         100% 0,
@@ -148,20 +223,26 @@ const compentStyle = css`
 
 .top .right:is(.flap .mask) {
         top: unset;
-        bottom: calc(-1 * var(--ui-components-button-border-radius));
+        bottom: calc(
+          -1 * var(--ui-components-button-border-radius) - var(--thickness)
+        );
         clip-path: polygon(
-          0 0,
-          100% 0,
           100% 100%,
+          100% 0,
+          0 0,
           50% var(--thickness),
           calc(100% - var(--thickness)) 50%
         );
       }
 
+.unacked-active .right:is(.flap .mask) {
+        right: calc(-1 * var(--blink-width-dynamic));
+      }
+
 .flap.large {
     flex-direction: column;
-    top: 0;
-    bottom: 0;
+    top: calc(-1 * var(--thickness));
+    bottom: calc(-1 * var(--thickness));
     right: calc(
       -1 * var(--app-components-alert-frame-icon-size) + var(--thickness) / 2 -
         var(--ui-components-badge-padding) * 2
@@ -172,12 +253,13 @@ const compentStyle = css`
   }
 
 .flap.bottom,.flap.top {
-    left: 0;
-    right: 0;
+    left: calc(-1 * var(--thickness));
+    right: calc(-1 * var(--thickness));
     padding: var(--app-components-alert-frame-large-flip-padding-vertical)
       var(--app-components-alert-frame-large-flip-4px-padding-horizontal);
     bottom: calc(
-      var(--thickness) / 2 - var(--global-typography-ui-label-line-height) -
+      -1 * var(--thickness) / 2 -
+        var(--global-typography-ui-label-line-height) -
         var(--app-components-alert-frame-large-flip-padding-vertical) * 2
     );
     border-radius: 0px 0px var(--button-border-radius-bottom-right)
@@ -232,7 +314,8 @@ const compentStyle = css`
 .flap.top {
     bottom: unset !important;
     top: calc(
-      var(--thickness) / 2 - var(--global-typography-ui-label-line-height) -
+      -1 * var(--thickness) / 2 -
+        var(--global-typography-ui-label-line-height) -
         var(--app-components-alert-frame-large-flip-padding-vertical) * 2
     );
     border-radius: var(--button-border-radius-bottom-right)
@@ -253,6 +336,10 @@ const compentStyle = css`
     overflow: hidden;
   }
 
+.unacked-active .flap {
+  outline: var(--bg-color) solid var(--blink-width-dynamic);
+}
+
 ::slotted([slot="label"]) {
   text-overflow: ellipsis;
   white-space: nowrap;

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

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

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

@@ -1,7 +1,11 @@
-import { LitElement, TemplateResult } from 'lit';
+import { LitElement, TemplateResult, HTMLTemplateResult } from 'lit';
+import { AlertType } from '../../types.js';
 import '../../icons/icon-alarm-badge.js';
 import '../../icons/icon-warning-badge.js';
 import '../../icons/icon-caution-badge.js';
+import './critical-badge.js';
+import './diagnostic-badge.js';
+export { AlertType as ObcAlertFrameStatus } from '../../types.js';
 /**
  * Enum representing the available frame styles for an alert component.
  *
@@ -26,16 +30,10 @@ export declare enum ObcAlertFrameThickness {
     Small = "small",
     Large = "large"
 }
-/**
- * Status options for the alert frame, controlling color and icon.
- * - `alarm`: Highest severity (default).
- * - `warning`: Medium severity.
- * - `caution`: Lower severity.
- */
-export declare enum ObcAlertFrameStatus {
-    Alarm = "alarm",
-    Warning = "warning",
-    Caution = "caution"
+export declare enum ObcAlertFrameMode {
+    ackedActive = "acked-active",
+    unackedActive = "unacked-active",
+    unackedRectified = "unacked-rectified"
 }
 /**
  * Text size options for flip-flap typography.
@@ -46,6 +44,15 @@ export declare enum AlertFrameTextSize {
     Regular = "regular",
     Large = "large"
 }
+export interface AlertFrameConfig {
+    type?: ObcAlertFrameType;
+    thickness?: ObcAlertFrameThickness;
+    status?: AlertType;
+    mode?: ObcAlertFrameMode;
+    textSize?: AlertFrameTextSize;
+    showIcon?: boolean;
+    showAlertCategoryIcon?: boolean;
+}
 /**
  * `<obc-alert-frame>` – A bordered frame component for visually emphasizing alert or status messages.
  *
@@ -58,7 +65,9 @@ export declare enum AlertFrameTextSize {
  *   - `large-side-flip`: Adds a larger, vertical side flap with a status icon and optional custom icon.
  *   - `bottom-flip`: Adds a bottom flap with a status icon, label, and timer slots.
  * - **Thickness options:** Choose between `small` (thin border) and `large` (thick border) for visual emphasis.
- * - **Status indication:** Displays different color schemes and icons for `alarm`, `warning`, or `caution` states.
+ * - **Status indication:** Displays different color schemes and icons for the legacy statuses (`alarm`, `warning`, `caution`) and the ISA statuses (`isa-critical`, `isa-high`, `isa-medium`, `isa-low`, `isa-diagnostic`).
+ * - **Acknowledgement mode:** The `mode` property reflects the alert lifecycle state — `acked-active` (default), `unacked-active`, and `unacked-rectified` — driving the blinking/animation treatment of the frame.
+ * - **Content wrapping:** When `wrapContent` is true, the frame wraps and sizes itself to its slotted content rather than overlaying a fixed region.
  * - **Customizable corners:** Each corner can be set to a sharp (non-rounded) edge for integration with other UI elements.
  * - **Slot-based content:** Supports custom icons, labels, and timers in flap variants via named slots.
  *
@@ -74,7 +83,8 @@ export declare enum AlertFrameTextSize {
  *   - `large-side-flip`: Large vertical right-side flap with status icon and optional custom icon.
  *   - `bottom-flip`: Bottom flap with status icon, label, and timer.
  * - **Thickness:** `small` (default) or `large` for border width.
- * - **Status:** `alarm`, `warning`, or `caution`—affects color and icon.
+ * - **Status:** `alarm`, `warning`, `caution`, or the ISA severities (`isa-critical`, `isa-high`, `isa-medium`, `isa-low`, `isa-diagnostic`)—affects color and icon.
+ * - **Mode:** `acked-active` (default), `unacked-active`, or `unacked-rectified`—affects blinking/animation.
  * - **Corner Customization:** Each corner can be made sharp (not rounded) via boolean properties.
  *
  * ### Slots and Content Structure
@@ -89,7 +99,9 @@ export declare enum AlertFrameTextSize {
  * ### Properties and Attributes
  * - `type`: Selects the visual variant/flap style. Default is `small-side-flip`.
  * - `thickness`: Controls border thickness (`small` or `large`). Default is `small`.
- * - `status`: Sets the alert status and color/icon (`alarm`, `warning`, `caution`). Default is `alarm`.
+ * - `status`: Sets the alert status and color/icon (`alarm`, `warning`, `caution`, or the `isa-*` severities). Default is `alarm`.
+ * - `mode`: Acknowledgement lifecycle state (`acked-active`, `unacked-active`, `unacked-rectified`) controlling blinking/animation. Default is `acked-active`.
+ * - `wrapContent`: When true, the frame wraps and sizes to its slotted content instead of overlaying a fixed region. Default is `false`.
  * - `sharpEdgeTopLeft`, `sharpEdgeTopRight`, `sharpEdgeBottomLeft`, `sharpEdgeBottomRight`: Boolean flags to make each corner sharp instead of rounded.
  *
  * ### Best Practices and Constraints
@@ -140,8 +152,21 @@ export declare class ObcAlertFrame extends LitElement {
      * - `alarm`: Highest severity (default).
      * - `warning`: Medium severity.
      * - `caution`: Lower severity.
+     * - `isa-critical`, `isa-high`, `isa-medium`, `isa-low`, `isa-diagnostic`: ISA severity levels, styled to match their legacy equivalents.
+     */
+    status: AlertType;
+    /**
+     * Acknowledgement lifecycle state, controlling the frame's blinking/animation.
+     * - `acked-active`: Active and acknowledged (default); no blinking.
+     * - `unacked-active`: Active and not yet acknowledged; blinks.
+     * - `unacked-rectified`: Condition cleared but not yet acknowledged.
+     */
+    mode: ObcAlertFrameMode;
+    /**
+     * When true, the frame wraps and sizes itself to its slotted content instead
+     * of overlaying a fixed region. Reflected to an attribute for CSS styling.
      */
-    status: ObcAlertFrameStatus;
+    wrapContent: boolean;
     /**
      * If true, the top-left corner will be sharp (not rounded).
      */
@@ -163,8 +188,10 @@ export declare class ObcAlertFrame extends LitElement {
     showAlertCategoryIcon: boolean;
     render(): TemplateResult<1>;
     private flap;
+    private renderBadgeIcon;
     static styles: import('lit').CSSResult;
 }
+export declare function wrapWithAlertFrame(options: AlertFrameConfig | boolean | undefined, content: HTMLTemplateResult): HTMLTemplateResult;
 declare global {
     interface HTMLElementTagNameMap {
         'obc-alert-frame': ObcAlertFrame;

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

@@ -1 +1 @@
-{"version":3,"file":"alert-frame.d.ts","sourceRoot":"","sources":["../../../src/components/alert-frame/alert-frame.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA4B,cAAc,EAAC,MAAM,KAAK,CAAC;AAIzE,OAAO,iCAAiC,CAAC;AACzC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,mCAAmC,CAAC;AAG3C;;;;;;;GAOG;AACH,oBAAY,iBAAiB;IAC3B,OAAO,YAAY;IACnB,aAAa,oBAAoB;IACjC,aAAa,oBAAoB;IACjC,UAAU,gBAAgB;IAC1B,OAAO,aAAa;CACrB;AAED;;;;GAIG;AACH,oBAAY,sBAAsB;IAChC,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AAED;;;;;GAKG;AACH,oBAAY,mBAAmB;IAC7B,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,OAAO,YAAY;CACpB;AAED;;;;GAIG;AACH,oBAAY,kBAAkB;IAC5B,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuEG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C;;;;;;;;OAQG;IACuB,IAAI,EAAE,iBAAiB,CACf;IAElC;;;;OAIG;IACuB,SAAS,EAAE,sBAAsB,CAC5B;IAE/B;;;;;OAKG;IACuB,MAAM,EAAE,mBAAmB,CACzB;IAE5B;;OAEG;IACwB,gBAAgB,EAAE,OAAO,CAAS;IAE7D;;OAEG;IACwB,iBAAiB,EAAE,OAAO,CAAS;IAE9D;;OAEG;IACwB,mBAAmB,EAAE,OAAO,CAAS;IAEhE;;OAEG;IACwB,oBAAoB,EAAE,OAAO,CAAS;IAEvC,QAAQ,EAAE,kBAAkB,CACzB;IAEF,QAAQ,EAAE,OAAO,CAAS;IACR,qBAAqB,EAAE,OAAO,CACpE;IAEE,MAAM;IAqBf,OAAO,CAAC,IAAI;IAwDZ,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
+{"version":3,"file":"alert-frame.d.ts","sourceRoot":"","sources":["../../../src/components/alert-frame/alert-frame.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EAIV,cAAc,EACd,kBAAkB,EACnB,MAAM,KAAK,CAAC;AAIb,OAAO,iCAAiC,CAAC;AACzC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,qBAAqB,CAAC;AAC7B,OAAO,uBAAuB,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAMzC,OAAO,EAAC,SAAS,IAAI,mBAAmB,EAAC,MAAM,gBAAgB,CAAC;AAEhE;;;;;;;GAOG;AACH,oBAAY,iBAAiB;IAC3B,OAAO,YAAY;IACnB,aAAa,oBAAoB;IACjC,aAAa,oBAAoB;IACjC,UAAU,gBAAgB;IAC1B,OAAO,aAAa;CACrB;AAED;;;;GAIG;AACH,oBAAY,sBAAsB;IAChC,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AAED,oBAAY,iBAAiB;IAC3B,WAAW,iBAAiB;IAC5B,aAAa,mBAAmB;IAChC,gBAAgB,sBAAsB;CACvC;AAED;;;;GAIG;AACH,oBAAY,kBAAkB;IAC5B,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,SAAS,CAAC,EAAE,sBAAsB,CAAC;IACnC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C;;;;;;;;OAQG;IACuB,IAAI,EAAE,iBAAiB,CACf;IAElC;;;;OAIG;IACuB,SAAS,EAAE,sBAAsB,CAC5B;IAE/B;;;;;;OAMG;IACuB,MAAM,EAAE,SAAS,CAAmB;IAE9D;;;;;OAKG;IACuB,IAAI,EAAE,iBAAiB,CACjB;IAEhC;;;OAGG;IACuC,WAAW,EAAE,OAAO,CAAS;IAEvE;;OAEG;IACwB,gBAAgB,EAAE,OAAO,CAAS;IAE7D;;OAEG;IACwB,iBAAiB,EAAE,OAAO,CAAS;IAE9D;;OAEG;IACwB,mBAAmB,EAAE,OAAO,CAAS;IAEhE;;OAEG;IACwB,oBAAoB,EAAE,OAAO,CAAS;IAEvC,QAAQ,EAAE,kBAAkB,CACzB;IAEF,QAAQ,EAAE,OAAO,CAAS;IACR,qBAAqB,EAAE,OAAO,CACpE;IAEE,MAAM;IAuBf,OAAO,CAAC,IAAI;IAmEZ,OAAO,CAAC,eAAe;IAmBvB,OAAgB,MAAM,0BAA2B;CAClD;AAED,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,gBAAgB,GAAG,OAAO,GAAG,SAAS,EAC/C,OAAO,EAAE,kBAAkB,GAC1B,kBAAkB,CAcpB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}