@oicl/openbridge-webcomponents 2.0.0 → 2.1.0-next.2

package/dist/components/accordion-card/accordion-card.d.ts

@@ -1,5 +1,5 @@
 import { LitElement, PropertyValues } from 'lit';
-import { ObcAlertFrameThickness, ObcAlertFrameType } from '../alert-frame/alert-frame.js';
+import { ObcAlertFrameMode, ObcAlertFrameThickness, ObcAlertFrameType } from '../alert-frame/alert-frame.js';
 import { AlertType } from '../../types.js';
 import '../../icons/icon-chevron-down-google.js';
 import '../alert-frame/alert-frame.js';
@@ -46,7 +46,7 @@ export declare enum Position {
  * |-------------------|------------------------|-------------------------------------------------------|
  * | leading-icon      | `hasLeadingIcon` true  | Icon at the start of the header (e.g., `<obi-placeholder></obi-placeholder>`). |
  * | expanded-content  | Always                 | Content revealed when the accordion is expanded.      |
- * | alert-icon        | `hasAlert` true        | Icon for the alert overlay (slot="icon" in alert frame). |
+ * | alert-icon        | `hasAlert` and `showAlertIcon` true | Icon for the alert overlay (slot="icon" in alert frame). |
  * | alert-label       | `hasAlert` true        | Label text for the alert overlay (slot="label" in alert frame). |
  * | alert-timer       | `hasAlert` true        | Timer or duration text for the alert overlay (slot="timer" in alert frame). |
  *
@@ -62,7 +62,7 @@ export declare enum Position {
  * - `hasLeadingIcon` (boolean): Enables leading icon slot in header.
  * - `size` (`AccordionSize` enum): Layout variant, either `'single-line'` (default) or `'large'`.
  * - `position` (`Position` enum): Controls border radius for stacking (`'top'`, `'bottom'`, `'center'`, `'regular'`).
- * - `alertFrameType`, `alertFrameThickness`, `alertFrameStatus`: Configure the alert overlay's appearance (see `obc-alert-frame` for details).
+ * - `alertFrameType`, `alertFrameThickness`, `alertFrameStatus`, `alertFrameMode`, `showAlertCategoryIcon`, `showAlertIcon`: Configure the alert overlay's appearance (see `obc-alert-frame` for details).
  *
  * ### Events
  * - `accordion-toggle` – Fired when the accordion is expanded or collapsed. Event detail includes `{ expanded, cardTitle }`.
@@ -96,7 +96,7 @@ export declare enum Position {
  * @availableWhen statusLabel hasStatusLabel==true
  * @property expanded - Whether the accordion card is expanded (shows additional content).
  * @property disabled - Disables the accordion card, preventing user interaction and dimming its appearance.
- * @property hasAlert - Shows an alert overlay above the card when true. Configure appearance with `alertFrameType`, `alertFrameThickness`, and `alertFrameStatus`.
+ * @property hasAlert - Shows an alert overlay above the card when true. Configure appearance with `alertFrameType`, `alertFrameThickness`, `alertFrameStatus` and `alertFrameMode`.
  * @property hasDescription - Enables the description text in the header (only in large size).
  * @property hasStatusLabel - Enables the status label in the header.
  * @property hasLeadingIcon - Enables the leading icon slot in the header.
@@ -109,6 +109,13 @@ export declare enum Position {
  * @property alertFrameStatus - Status of the alert frame overlay (used when `hasAlert` is true).
  *   See `obc-alert-frame` for available statuses.
  * @availableWhen alertFrameStatus hasAlert==true
+ * @property alertFrameMode - Acknowledgement state of the alert: `acked-active` (default) is steady,
+ *   `unacked-active` flashes, `unacked-rectified` flashes a dashed frame.
+ * @availableWhen alertFrameMode hasAlert==true
+ * @property showAlertCategoryIcon - Shows the alert category icon in the flap; a small side flap without it is not drawn.
+ * @availableWhen showAlertCategoryIcon hasAlert==true && alertFrameType in [SmallSideFlip, LargeSideFlip, BottomFlip, TopFlip]
+ * @property showAlertIcon - Shows the `alert-icon` slot in a large side, bottom or top flap.
+ * @availableWhen showAlertIcon hasAlert==true && alertFrameType in [LargeSideFlip, BottomFlip, TopFlip]
  * @property position - Border radius for stacking: `regular` (default) rounds every corner,
  *   `top` flattens the bottom edge, `bottom` flattens the top edge, and
  *   `center` flattens both for a card in the middle of a stack.
@@ -116,7 +123,7 @@ export declare enum Position {
  *   `large` adds a description beneath the title.
  * @slot leading-icon - Icon at the start of the header (shown when `hasLeadingIcon` is true)
  * @slot expanded-content - Content revealed when the accordion is expanded
- * @slot alert-icon - Icon for the alert overlay (used when `hasAlert` is true)
+ * @slot alert-icon - Icon for the alert overlay (used when `hasAlert` and `showAlertIcon` are true)
  * @slot alert-label - Label text for the alert overlay (used when `hasAlert` is true)
  * @slot alert-timer - Timer/duration text for the alert overlay (used when `hasAlert` is true)
  * @fires {CustomEvent<{expanded: boolean, cardTitle: string}>} accordion-toggle - Fired when the accordion is expanded or collapsed
@@ -142,7 +149,7 @@ export declare class ObcAccordionCard extends LitElement {
     expanded: boolean;
     /** Disables the accordion card, preventing user interaction and dimming its appearance. */
     disabled: boolean;
-    /** Shows an alert overlay above the card when true. Configure appearance with `alertFrameType`, `alertFrameThickness`, and `alertFrameStatus`. */
+    /** Shows an alert overlay above the card when true. Configure appearance with `alertFrameType`, `alertFrameThickness`, `alertFrameStatus` and `alertFrameMode`. */
     hasAlert: boolean;
     /** Enables the description text in the header (only in large size). */
     hasDescription: boolean;
@@ -172,6 +179,24 @@ export declare class ObcAccordionCard extends LitElement {
      * Available when `hasAlert==true`.
      */
     alertFrameStatus: AlertType;
+    /**
+     * Acknowledgement state of the alert: `acked-active` (default) is steady, `unacked-active` flashes, `unacked-rectified` flashes a dashed frame.
+     *
+     * Available when `hasAlert==true`.
+     */
+    alertFrameMode: ObcAlertFrameMode;
+    /**
+     * Shows the alert category icon in the flap; a small side flap without it is not drawn.
+     *
+     * Available when `hasAlert==true && alertFrameType in [SmallSideFlip, LargeSideFlip, BottomFlip, TopFlip]`.
+     */
+    showAlertCategoryIcon: boolean;
+    /**
+     * Shows the `alert-icon` slot in a large side, bottom or top flap.
+     *
+     * Available when `hasAlert==true && alertFrameType in [LargeSideFlip, BottomFlip, TopFlip]`.
+     */
+    showAlertIcon: boolean;
     private get shouldShowDescription();
     private handleToggle;
     /**

package/dist/components/accordion-card/accordion-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-card.d.ts","sourceRoot":"","sources":["../../../src/components/accordion-card/accordion-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAmB,KAAK,cAAc,EAAC,MAAM,KAAK,CAAC;AAMrE,OAAO,yCAAyC,CAAC;AACjD,OAAO,+BAA+B,CAAC;AACvC,OAAO,EACL,sBAAsB,EACtB,iBAAiB,EAClB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,oBAAY,aAAa;IACvB,UAAU,gBAAgB;IAC1B,KAAK,UAAU;CAChB;AAED,oBAAY,QAAQ;IAClB,GAAG,QAAQ;IACX,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,OAAO,YAAY;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6GG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IACpB,SAAS,SAAM;IAEf,WAAW,SAAM;IAEjB,WAAW,SAAM;IAEhB,QAAQ,UAAS;IAEjB,QAAQ,UAAS;IAEjB,QAAQ,UAAS;IAEjB,cAAc,UAAS;IAEvB,cAAc,UAAS;IAEvB,cAAc,UAAS;IAExB,QAAQ,EAAE,QAAQ,CAAoB;IAEtC,IAAI,EAAE,aAAa,CAA4B;IAE/C,cAAc,EAAE,iBAAiB,CAC/B;IAEF,mBAAmB,EAAE,sBAAsB,CACtC;IAEL,gBAAgB,EAAE,SAAS,CAAmB;IAExE,OAAO,KAAK,qBAAqB,GAMhC;IAED,OAAO,CAAC,YAAY;IAmBpB;;;;;;;OAOG;IACM,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAYjD,OAAO,CAAC,iBAAiB;IAwCzB,OAAO,CAAC,uBAAuB;IAY/B,OAAO,CAAC,iBAAiB;IAGzB,OAAO,CAAC,cAAc;IAMb,MAAM;IAuDf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}
+{"version":3,"file":"accordion-card.d.ts","sourceRoot":"","sources":["../../../src/components/accordion-card/accordion-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAmB,KAAK,cAAc,EAAC,MAAM,KAAK,CAAC;AAMrE,OAAO,yCAAyC,CAAC;AACjD,OAAO,+BAA+B,CAAC;AACvC,OAAO,EACL,iBAAiB,EACjB,sBAAsB,EACtB,iBAAiB,EAClB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,oBAAY,aAAa;IACvB,UAAU,gBAAgB;IAC1B,KAAK,UAAU;CAChB;AAED,oBAAY,QAAQ;IAClB,GAAG,QAAQ;IACX,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,OAAO,YAAY;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoHG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IACpB,SAAS,SAAM;IAEf,WAAW,SAAM;IAEjB,WAAW,SAAM;IAEhB,QAAQ,UAAS;IAEjB,QAAQ,UAAS;IAEjB,QAAQ,UAAS;IAEjB,cAAc,UAAS;IAEvB,cAAc,UAAS;IAEvB,cAAc,UAAS;IAExB,QAAQ,EAAE,QAAQ,CAAoB;IAEtC,IAAI,EAAE,aAAa,CAA4B;IAE/C,cAAc,EAAE,iBAAiB,CAC/B;IAEF,mBAAmB,EAAE,sBAAsB,CACtC;IAEL,gBAAgB,EAAE,SAAS,CAAmB;IAE9C,cAAc,EAAE,iBAAiB,CAC3B;IAEa,qBAAqB,UAAQ;IAE/C,aAAa,UAAS;IAEjD,OAAO,KAAK,qBAAqB,GAMhC;IAED,OAAO,CAAC,YAAY;IAmBpB;;;;;;;OAOG;IACM,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAYjD,OAAO,CAAC,iBAAiB;IAwCzB,OAAO,CAAC,uBAAuB;IAY/B,OAAO,CAAC,iBAAiB;IAGzB,OAAO,CAAC,cAAc;IAMb,MAAM;IA0Df,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}

package/dist/components/accordion-card/accordion-card.js

@@ -3,7 +3,7 @@ import { customElement } from "../../decorator.js";
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.150.0/helpers/esm/decorate.js";
 import "../../icons/icon-chevron-down-google.js";
 import { releaseFocusBefore } from "../../internal/focus.js";
-import { ObcAlertFrameThickness, ObcAlertFrameType } from "../alert-frame/alert-frame.js";
+import { ObcAlertFrameMode, ObcAlertFrameThickness, ObcAlertFrameType } from "../alert-frame/alert-frame.js";
 import accordion_card_default from "./accordion-card.css.js";
 import { LitElement, html, unsafeCSS } from "lit";
 import { property } from "lit/decorators.js";
@@ -38,6 +38,9 @@ var ObcAccordionCard = class ObcAccordionCard extends LitElement {
 		this.alertFrameType = ObcAlertFrameType.Regular;
 		this.alertFrameThickness = ObcAlertFrameThickness.Small;
 		this.alertFrameStatus = AlertType.Alarm;
+		this.alertFrameMode = ObcAlertFrameMode.ackedActive;
+		this.showAlertCategoryIcon = true;
+		this.showAlertIcon = false;
 	}
 	get shouldShowDescription() {
 		return this.size === "large" && this.hasDescription && this.description.trim() !== "";
@@ -153,6 +156,9 @@ var ObcAccordionCard = class ObcAccordionCard extends LitElement {
                   .type=${this.alertFrameType}
                   .thickness=${this.alertFrameThickness}
                   .status=${this.alertFrameStatus}
+                  .mode=${this.alertFrameMode}
+                  .showAlertCategoryIcon=${this.showAlertCategoryIcon}
+                  .showIcon=${this.showAlertIcon}
                 >
                   <slot name="alert-icon" slot="icon"></slot>
                   <slot name="alert-label" slot="label"></slot>
@@ -180,6 +186,12 @@ __decorate([property({ type: String })], ObcAccordionCard.prototype, "size", voi
 __decorate([property({ type: String })], ObcAccordionCard.prototype, "alertFrameType", void 0);
 __decorate([property({ type: String })], ObcAccordionCard.prototype, "alertFrameThickness", void 0);
 __decorate([property({ type: String })], ObcAccordionCard.prototype, "alertFrameStatus", void 0);
+__decorate([property({ type: String })], ObcAccordionCard.prototype, "alertFrameMode", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: false
+})], ObcAccordionCard.prototype, "showAlertCategoryIcon", void 0);
+__decorate([property({ type: Boolean })], ObcAccordionCard.prototype, "showAlertIcon", void 0);
 ObcAccordionCard = __decorate([customElement("obc-accordion-card")], ObcAccordionCard);
 //#endregion
 export { AccordionSize, ObcAccordionCard, Position };

package/dist/components/accordion-card/accordion-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-card.js","names":[],"sources":["../../../src/components/accordion-card/accordion-card.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS, type PropertyValues} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport {releaseFocusBefore} from '../../internal/focus.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport compentStyle from './accordion-card.css?inline';\nimport {property} from 'lit/decorators.js';\nimport '../../icons/icon-chevron-down-google.js';\nimport '../alert-frame/alert-frame.js';\nimport {\n  ObcAlertFrameThickness,\n  ObcAlertFrameType,\n} from '../alert-frame/alert-frame.js';\nimport {AlertType} from '../../types.js';\n\nexport enum AccordionSize {\n  SingleLine = 'single-line',\n  Large = 'large',\n}\n\nexport enum Position {\n  top = 'top',\n  bottom = 'bottom',\n  center = 'center',\n  regular = 'regular',\n}\n\n/**\n * `<obc-accordion-card>` – Expandable/collapsible card component for grouping content in a compact, interactive section (accordion, expandable panel, disclosure).\n *\n * Provides a summary row with optional icon, title, description, and status label. Expands to reveal additional content on click/tap, supporting both single-line and large layouts. Can display an alert overlay for contextual warnings or notifications.\n *\n * ### Features\n * - **Expandable/collapsible:** Click/tap toggles between collapsed and expanded states, revealing or hiding additional content. The panel slides open and closed, and the chevron turns with it; `prefers-reduced-motion: reduce` switches instantly instead.\n * - **Variants:**\n *   - **Single-line:** Compact header with only title (and optional icon/status).\n *   - **Large:** Header includes a description beneath the title for more detail.\n * - **Positioning:** Supports `top`, `bottom`, `center`, or `regular` (default) border radius/edge styling for stacking multiple accordions.\n * - **Status label:** Optional status text displayed in the header (e.g., \"Active\", \"Warning\").\n * - **Leading icon:** Optional icon slot at the start of the header for visual context.\n * - **Alert overlay:** Can display an alert frame (with icon, label, timer) above the card for warnings or notifications.\n * - **Disabled state:** Prevents interaction and visually indicates non-interactive status.\n * - **Accessibility:** Uses button semantics and ARIA attributes for expand/collapse.\n *\n * ### Usage Guidelines\n * Use `obc-accordion-card` to organize related content in a collapsible section, especially when space is limited or when users may want to focus on one section at a time. Ideal for settings panels, grouped controls, or dashboards where expandable details are needed. Avoid using for persistent, always-visible content.\n *\n * - Use the **single-line** variant for brief titles or when space is tight.\n * - Use the **large** variant when you need to provide a short description or supporting text under the title.\n * - The **status label** is useful for showing quick state info (e.g., \"Active\", \"Error\").\n * - The **alert overlay** is intended for contextual warnings or notifications related to the card's content.\n * - For stacking multiple accordions, adjust the `position` property to control border radii and visual grouping.\n *\n * **TODO(designer):** Confirm if there are recommended limits on title/description length, and if only one accordion should be expanded at a time in a group.\n *\n * ### Slots\n * | Slot Name         | Renders When...         | Purpose                                               |\n * |-------------------|------------------------|-------------------------------------------------------|\n * | leading-icon      | `hasLeadingIcon` true  | Icon at the start of the header (e.g., `<obi-placeholder></obi-placeholder>`). |\n * | expanded-content  | Always                 | Content revealed when the accordion is expanded.      |\n * | alert-icon        | `hasAlert` true        | Icon for the alert overlay (slot=\"icon\" in alert frame). |\n * | alert-label       | `hasAlert` true        | Label text for the alert overlay (slot=\"label\" in alert frame). |\n * | alert-timer       | `hasAlert` true        | Timer or duration text for the alert overlay (slot=\"timer\" in alert frame). |\n *\n * ### Properties\n * - `expanded` (boolean): Whether the card is expanded (shows additional content). Toggled by user interaction.\n * - `disabled` (boolean): Disables interaction and visually dims the card.\n * - `cardTitle` (string): Main title text shown in the header.\n * - `description` (string): Supporting description (shown only in large size and if `hasDescription` is true).\n * - `statusLabel` (string): Optional status text in the header (shown if `hasStatusLabel` is true).\n * - `hasAlert` (boolean): Shows an alert overlay above the card when true.\n * - `hasDescription` (boolean): Enables description text in large variant.\n * - `hasStatusLabel` (boolean): Enables status label in header.\n * - `hasLeadingIcon` (boolean): Enables leading icon slot in header.\n * - `size` (`AccordionSize` enum): Layout variant, either `'single-line'` (default) or `'large'`.\n * - `position` (`Position` enum): Controls border radius for stacking (`'top'`, `'bottom'`, `'center'`, `'regular'`).\n * - `alertFrameType`, `alertFrameThickness`, `alertFrameStatus`: Configure the alert overlay's appearance (see `obc-alert-frame` for details).\n *\n * ### Events\n * - `accordion-toggle` – Fired when the accordion is expanded or collapsed. Event detail includes `{ expanded, cardTitle }`.\n *\n * ### Best Practices\n * - Only use the alert overlay for important, contextual notifications related to the card's content.\n * - For accessibility, ensure the card title is descriptive and unique within a group.\n * - Avoid nesting interactive elements (like buttons) directly in the header; place them in the expanded content if needed.\n *\n * ### Example:\n * ```\n * <obc-accordion-card\n *   cardTitle=\"Settings\"\n *   description=\"Configure your preferences\"\n *   size=\"large\"\n *   hasDescription\n *   expanded\n *   hasLeadingIcon\n * >\n *   <span slot=\"leading-icon\"><obi-placeholder></obi-placeholder></span>\n *   <div slot=\"expanded-content\">\n *     <!-- Additional settings controls here -->\n *   </div>\n * </obc-accordion-card>\n * ```\n *\n * @property cardTitle - Main title text displayed in the accordion header.\n * @property description - Supporting description text shown under the title (only in large size and if `hasDescription` is true).\n * @availableWhen description size==large && hasDescription==true\n * @property statusLabel - Optional status label displayed in the header (shown if `hasStatusLabel` is true).\n * @availableWhen statusLabel hasStatusLabel==true\n * @property expanded - Whether the accordion card is expanded (shows additional content).\n * @property disabled - Disables the accordion card, preventing user interaction and dimming its appearance.\n * @property hasAlert - Shows an alert overlay above the card when true. Configure appearance with `alertFrameType`, `alertFrameThickness`, and `alertFrameStatus`.\n * @property hasDescription - Enables the description text in the header (only in large size).\n * @property hasStatusLabel - Enables the status label in the header.\n * @property hasLeadingIcon - Enables the leading icon slot in the header.\n * @property alertFrameType - Type of the alert frame overlay (used when `hasAlert` is true).\n *   See `obc-alert-frame` for available types.\n * @availableWhen alertFrameType hasAlert==true\n * @property alertFrameThickness - Thickness of the alert frame overlay (used when `hasAlert` is true).\n *   See `obc-alert-frame` for available thickness values.\n * @availableWhen alertFrameThickness hasAlert==true\n * @property alertFrameStatus - Status of the alert frame overlay (used when `hasAlert` is true).\n *   See `obc-alert-frame` for available statuses.\n * @availableWhen alertFrameStatus hasAlert==true\n * @property position - Border radius for stacking: `regular` (default) rounds every corner,\n *   `top` flattens the bottom edge, `bottom` flattens the top edge, and\n *   `center` flattens both for a card in the middle of a stack.\n * @property size - Layout variant: `single-line` (default) is a compact title-only header,\n *   `large` adds a description beneath the title.\n * @slot leading-icon - Icon at the start of the header (shown when `hasLeadingIcon` is true)\n * @slot expanded-content - Content revealed when the accordion is expanded\n * @slot alert-icon - Icon for the alert overlay (used when `hasAlert` is true)\n * @slot alert-label - Label text for the alert overlay (used when `hasAlert` is true)\n * @slot alert-timer - Timer/duration text for the alert overlay (used when `hasAlert` is true)\n * @fires {CustomEvent<{expanded: boolean, cardTitle: string}>} accordion-toggle - Fired when the accordion is expanded or collapsed\n * @cssprop [--obc-accordion-expand-duration=200ms] - How long the panel takes to open and close. The chevron and the card's corners follow it. Ignored under `prefers-reduced-motion: reduce`.\n * @stable\n */\n@customElement('obc-accordion-card')\nexport class ObcAccordionCard extends LitElement {\n  @property({type: String}) cardTitle = '';\n\n  @property({type: String}) description = '';\n\n  @property({type: String}) statusLabel = '';\n\n  @property({type: Boolean}) expanded = false;\n\n  @property({type: Boolean}) disabled = false;\n\n  @property({type: Boolean}) hasAlert = false;\n\n  @property({type: Boolean}) hasDescription = false;\n\n  @property({type: Boolean}) hasStatusLabel = false;\n\n  @property({type: Boolean}) hasLeadingIcon = false;\n\n  @property({type: String}) position: Position = Position.regular;\n\n  @property({type: String}) size: AccordionSize = AccordionSize.SingleLine;\n\n  @property({type: String}) alertFrameType: ObcAlertFrameType =\n    ObcAlertFrameType.Regular;\n\n  @property({type: String}) alertFrameThickness: ObcAlertFrameThickness =\n    ObcAlertFrameThickness.Small;\n\n  @property({type: String}) alertFrameStatus: AlertType = AlertType.Alarm;\n\n  private get shouldShowDescription() {\n    return (\n      this.size === AccordionSize.Large &&\n      this.hasDescription &&\n      this.description.trim() !== ''\n    );\n  }\n\n  private handleToggle() {\n    if (this.disabled) return;\n\n    this.expanded = !this.expanded;\n\n    /**\n     * Fired when the accordion is expanded or collapsed.\n     * @fires accordion-toggle\n     */\n    this.dispatchEvent(\n      new CustomEvent('accordion-toggle', {\n        detail: {\n          expanded: this.expanded,\n          cardTitle: this.cardTitle,\n        },\n      })\n    );\n  }\n\n  /**\n   * Keeps the keyboard somewhere predictable when the panel closes.\n   *\n   * A collapsed panel is `inert`, and the browser drops focus out of anything\n   * it makes inert — onto `<body>`, two frames later. Clicking the header\n   * already leaves focus there; a consumer setting `expanded` while a slotted\n   * control has focus is the case that needs the transfer.\n   */\n  override willUpdate(changed: PropertyValues<this>) {\n    if (!changed.has('expanded') || this.expanded) return;\n\n    const panel = this.shadowRoot?.querySelector('.panel');\n    if (!panel) return;\n    releaseFocusBefore(\n      panel,\n      this.shadowRoot?.querySelector<HTMLButtonElement>('.content-button'),\n      this.shadowRoot?.querySelector<HTMLElement>('.wrapper')\n    );\n  }\n\n  private renderContentMain() {\n    return html`\n      <div class=\"header-container\">\n        <div class=\"content-container\">\n          ${\n            this.hasLeadingIcon\n              ? html`\n                  <div class=\"container-icon\">\n                    <slot name=\"leading-icon\"></slot>\n                  </div>\n                `\n              : ''\n          }\n          <div class=\"container-labels\">\n            <div class=\"label-title\">${this.cardTitle}</div>\n            ${\n              this.shouldShowDescription\n                ? html`\n                    <div class=\"label-description\">${this.description}</div>\n                  `\n                : ''\n            }\n          </div>\n          ${\n            this.hasStatusLabel\n              ? html`\n                  <div class=\"container-status\">\n                    <div class=\"status\">${this.statusLabel}</div>\n                  </div>\n                `\n              : ''\n          }\n          <div class=\"trailing-icon\">\n            <obi-chevron-down-google></obi-chevron-down-google>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  private renderContentAdditional() {\n    return html`\n      <div class=\"panel\" id=\"accordion-content\" ?inert=${!this.expanded}>\n        <div class=\"panel-inner\">\n          <div class=\"container-content-additional\">\n            <slot name=\"expanded-content\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  private isShartEdgeBottom() {\n    return this.position === Position.top || this.position === Position.center;\n  }\n  private isShartEdgeTop() {\n    return (\n      this.position === Position.bottom || this.position === Position.center\n    );\n  }\n\n  override render() {\n    return html`\n      <div\n        tabindex=\"-1\"\n        class=${classMap({\n          wrapper: true,\n          'state-expanded': this.expanded,\n          'state-collapsed': !this.expanded,\n          'state-disabled': this.disabled,\n          'style-single-line': this.size === AccordionSize.SingleLine,\n          'style-large': this.size === AccordionSize.Large,\n          'position-top': this.position === Position.top,\n          'position-bottom': this.position === Position.bottom,\n          'position-center': this.position === Position.center,\n        })}\n        style=\"position: relative;\"\n      >\n        <div class=\"card-container\">\n          <button\n            class=\"content-button\"\n            @click=${this.handleToggle}\n            ?disabled=${this.disabled}\n            aria-expanded=${this.expanded}\n            aria-controls=\"accordion-content\"\n          >\n            ${this.renderContentMain()}\n          </button>\n\n          ${this.renderContentAdditional()}\n        </div>\n\n        ${\n          this.hasAlert\n            ? html`\n                <obc-alert-frame\n                  class=\"alert alert-${this.alertFrameStatus}\"\n                  .sharpEdgeTopLeft=${this.isShartEdgeTop()}\n                  .sharpEdgeTopRight=${this.isShartEdgeTop()}\n                  .sharpEdgeBottomLeft=${this.isShartEdgeBottom()}\n                  .sharpEdgeBottomRight=${this.isShartEdgeBottom()}\n                  .type=${this.alertFrameType}\n                  .thickness=${this.alertFrameThickness}\n                  .status=${this.alertFrameStatus}\n                >\n                  <slot name=\"alert-icon\" slot=\"icon\"></slot>\n                  <slot name=\"alert-label\" slot=\"label\"></slot>\n                  <slot name=\"alert-timer\" slot=\"timer\"></slot>\n                </obc-alert-frame>\n              `\n            : ''\n        }\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-accordion-card': ObcAccordionCard;\n  }\n}\n"],"mappings":";;;;;;;;;;;AAcA,IAAY,gBAAL,yBAAA,eAAA;CACL,cAAA,gBAAA;CACA,cAAA,WAAA;;AACF,EAAA,CAAA,CAAA;AAEA,IAAY,WAAL,yBAAA,UAAA;CACL,SAAA,SAAA;CACA,SAAA,YAAA;CACA,SAAA,YAAA;CACA,SAAA,aAAA;;AACF,EAAA,CAAA,CAAA;AAiHO,IAAM,mBAAN,MAAM,yBAAyB,WAAW;;;EACT,KAAA,YAAA;EAEE,KAAA,cAAA;EAEA,KAAA,cAAA;EAEF,KAAA,WAAA;EAEA,KAAA,WAAA;EAEA,KAAA,WAAA;EAEM,KAAA,iBAAA;EAEA,KAAA,iBAAA;EAEA,KAAA,iBAAA;;;EAO1C,KAAA,iBAAA,kBAAkB;EAGlB,KAAA,sBAAA,uBAAuB;EAE+B,KAAA,mBAAA,UAAU;;CAElE,IAAY,wBAAwB;EAClC,OACE,KAAK,SAAA,WACL,KAAK,kBACL,KAAK,YAAY,KAAK,MAAM;CAEhC;CAEA,eAAuB;EACrB,IAAI,KAAK,UAAU;EAEnB,KAAK,WAAW,CAAC,KAAK;;;;;EAMtB,KAAK,cACH,IAAI,YAAY,oBAAoB,EAClC,QAAQ;GACN,UAAU,KAAK;GACf,WAAW,KAAK;EAClB,EACF,CAAC,CACH;CACF;;;;;;;;;CAUA,WAAoB,SAA+B;EACjD,IAAI,CAAC,QAAQ,IAAI,UAAU,KAAK,KAAK,UAAU;EAE/C,MAAM,QAAQ,KAAK,YAAY,cAAc,QAAQ;EACrD,IAAI,CAAC,OAAO;EACZ,mBACE,OACA,KAAK,YAAY,cAAiC,iBAAiB,GACnE,KAAK,YAAY,cAA2B,UAAU,CACxD;CACF;CAEA,oBAA4B;EAC1B,OAAO,IAAI;;;YAIH,KAAK,iBACD,IAAI;;;;oBAKJ,GACL;;uCAE4B,KAAK,UAAU;cAExC,KAAK,wBACD,IAAI;qDAC+B,KAAK,YAAY;sBAEpD,GACL;;YAGD,KAAK,iBACD,IAAI;;0CAEsB,KAAK,YAAY;;oBAG3C,GACL;;;;;;;CAOT;CAEA,0BAAkC;EAChC,OAAO,IAAI;yDAC0C,CAAC,KAAK,SAAS;;;;;;;;CAQtE;CAEA,oBAA4B;EAC1B,OAAO,KAAK,aAAA,SAA6B,KAAK,aAAA;CAChD;CACA,iBAAyB;EACvB,OACE,KAAK,aAAA,YAAgC,KAAK,aAAA;CAE9C;CAEA,SAAkB;EAChB,OAAO,IAAI;;;gBAGC,SAAS;GACf,SAAS;GACT,kBAAkB,KAAK;GACvB,mBAAmB,CAAC,KAAK;GACzB,kBAAkB,KAAK;GACvB,qBAAqB,KAAK,SAAA;GAC1B,eAAe,KAAK,SAAA;GACpB,gBAAgB,KAAK,aAAA;GACrB,mBAAmB,KAAK,aAAA;GACxB,mBAAmB,KAAK,aAAA;EAC1B,CAAC,EAAE;;;;;;qBAMU,KAAK,aAAa;wBACf,KAAK,SAAS;4BACV,KAAK,SAAS;;;cAG5B,KAAK,kBAAkB,EAAE;;;YAG3B,KAAK,wBAAwB,EAAE;;;UAIjC,KAAK,WACD,IAAI;;uCAEqB,KAAK,iBAAiB;sCACvB,KAAK,eAAe,EAAE;uCACrB,KAAK,eAAe,EAAE;yCACpB,KAAK,kBAAkB,EAAE;0CACxB,KAAK,kBAAkB,EAAE;0BACzC,KAAK,eAAe;+BACf,KAAK,oBAAoB;4BAC5B,KAAK,iBAAiB;;;;;;kBAOpC,GACL;;;CAGP;;EAEyB,KAAA,SAAA,UAAU,sBAAY;;AACjD;AAlMG,WAAA,CAAA,SAAS,EAAC,MAAM,OAAM,CAAC,CAAA,GAAA,iBAAA,WAAA,aAAA,KAAA,CAAA;AAEvB,WAAA,CAAA,SAAS,EAAC,MAAM,OAAM,CAAC,CAAA,GAAA,iBAAA,WAAA,eAAA,KAAA,CAAA;AAEvB,WAAA,CAAA,SAAS,EAAC,MAAM,OAAM,CAAC,CAAA,GAAA,iBAAA,WAAA,eAAA,KAAA,CAAA;AAEvB,WAAA,CAAA,SAAS,EAAC,MAAM,QAAO,CAAC,CAAA,GAAA,iBAAA,WAAA,YAAA,KAAA,CAAA;AAExB,WAAA,CAAA,SAAS,EAAC,MAAM,QAAO,CAAC,CAAA,GAAA,iBAAA,WAAA,YAAA,KAAA,CAAA;AAExB,WAAA,CAAA,SAAS,EAAC,MAAM,QAAO,CAAC,CAAA,GAAA,iBAAA,WAAA,YAAA,KAAA,CAAA;AAExB,WAAA,CAAA,SAAS,EAAC,MAAM,QAAO,CAAC,CAAA,GAAA,iBAAA,WAAA,kBAAA,KAAA,CAAA;AAExB,WAAA,CAAA,SAAS,EAAC,MAAM,QAAO,CAAC,CAAA,GAAA,iBAAA,WAAA,kBAAA,KAAA,CAAA;AAExB,WAAA,CAAA,SAAS,EAAC,MAAM,QAAO,CAAC,CAAA,GAAA,iBAAA,WAAA,kBAAA,KAAA,CAAA;AAExB,WAAA,CAAA,SAAS,EAAC,MAAM,OAAM,CAAC,CAAA,GAAA,iBAAA,WAAA,YAAA,KAAA,CAAA;AAEvB,WAAA,CAAA,SAAS,EAAC,MAAM,OAAM,CAAC,CAAA,GAAA,iBAAA,WAAA,QAAA,KAAA,CAAA;AAEvB,WAAA,CAAA,SAAS,EAAC,MAAM,OAAM,CAAC,CAAA,GAAA,iBAAA,WAAA,kBAAA,KAAA,CAAA;AAGvB,WAAA,CAAA,SAAS,EAAC,MAAM,OAAM,CAAC,CAAA,GAAA,iBAAA,WAAA,uBAAA,KAAA,CAAA;AAGvB,WAAA,CAAA,SAAS,EAAC,MAAM,OAAM,CAAC,CAAA,GAAA,iBAAA,WAAA,oBAAA,KAAA,CAAA;AA9BzB,mBAAA,WAAA,CAAA,cAAc,oBAAoB,CAAA,GAAA,gBAAA"}
+{"version":3,"file":"accordion-card.js","names":[],"sources":["../../../src/components/accordion-card/accordion-card.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS, type PropertyValues} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport {releaseFocusBefore} from '../../internal/focus.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport compentStyle from './accordion-card.css?inline';\nimport {property} from 'lit/decorators.js';\nimport '../../icons/icon-chevron-down-google.js';\nimport '../alert-frame/alert-frame.js';\nimport {\n  ObcAlertFrameMode,\n  ObcAlertFrameThickness,\n  ObcAlertFrameType,\n} from '../alert-frame/alert-frame.js';\nimport {AlertType} from '../../types.js';\n\nexport enum AccordionSize {\n  SingleLine = 'single-line',\n  Large = 'large',\n}\n\nexport enum Position {\n  top = 'top',\n  bottom = 'bottom',\n  center = 'center',\n  regular = 'regular',\n}\n\n/**\n * `<obc-accordion-card>` – Expandable/collapsible card component for grouping content in a compact, interactive section (accordion, expandable panel, disclosure).\n *\n * Provides a summary row with optional icon, title, description, and status label. Expands to reveal additional content on click/tap, supporting both single-line and large layouts. Can display an alert overlay for contextual warnings or notifications.\n *\n * ### Features\n * - **Expandable/collapsible:** Click/tap toggles between collapsed and expanded states, revealing or hiding additional content. The panel slides open and closed, and the chevron turns with it; `prefers-reduced-motion: reduce` switches instantly instead.\n * - **Variants:**\n *   - **Single-line:** Compact header with only title (and optional icon/status).\n *   - **Large:** Header includes a description beneath the title for more detail.\n * - **Positioning:** Supports `top`, `bottom`, `center`, or `regular` (default) border radius/edge styling for stacking multiple accordions.\n * - **Status label:** Optional status text displayed in the header (e.g., \"Active\", \"Warning\").\n * - **Leading icon:** Optional icon slot at the start of the header for visual context.\n * - **Alert overlay:** Can display an alert frame (with icon, label, timer) above the card for warnings or notifications.\n * - **Disabled state:** Prevents interaction and visually indicates non-interactive status.\n * - **Accessibility:** Uses button semantics and ARIA attributes for expand/collapse.\n *\n * ### Usage Guidelines\n * Use `obc-accordion-card` to organize related content in a collapsible section, especially when space is limited or when users may want to focus on one section at a time. Ideal for settings panels, grouped controls, or dashboards where expandable details are needed. Avoid using for persistent, always-visible content.\n *\n * - Use the **single-line** variant for brief titles or when space is tight.\n * - Use the **large** variant when you need to provide a short description or supporting text under the title.\n * - The **status label** is useful for showing quick state info (e.g., \"Active\", \"Error\").\n * - The **alert overlay** is intended for contextual warnings or notifications related to the card's content.\n * - For stacking multiple accordions, adjust the `position` property to control border radii and visual grouping.\n *\n * **TODO(designer):** Confirm if there are recommended limits on title/description length, and if only one accordion should be expanded at a time in a group.\n *\n * ### Slots\n * | Slot Name         | Renders When...         | Purpose                                               |\n * |-------------------|------------------------|-------------------------------------------------------|\n * | leading-icon      | `hasLeadingIcon` true  | Icon at the start of the header (e.g., `<obi-placeholder></obi-placeholder>`). |\n * | expanded-content  | Always                 | Content revealed when the accordion is expanded.      |\n * | alert-icon        | `hasAlert` and `showAlertIcon` true | Icon for the alert overlay (slot=\"icon\" in alert frame). |\n * | alert-label       | `hasAlert` true        | Label text for the alert overlay (slot=\"label\" in alert frame). |\n * | alert-timer       | `hasAlert` true        | Timer or duration text for the alert overlay (slot=\"timer\" in alert frame). |\n *\n * ### Properties\n * - `expanded` (boolean): Whether the card is expanded (shows additional content). Toggled by user interaction.\n * - `disabled` (boolean): Disables interaction and visually dims the card.\n * - `cardTitle` (string): Main title text shown in the header.\n * - `description` (string): Supporting description (shown only in large size and if `hasDescription` is true).\n * - `statusLabel` (string): Optional status text in the header (shown if `hasStatusLabel` is true).\n * - `hasAlert` (boolean): Shows an alert overlay above the card when true.\n * - `hasDescription` (boolean): Enables description text in large variant.\n * - `hasStatusLabel` (boolean): Enables status label in header.\n * - `hasLeadingIcon` (boolean): Enables leading icon slot in header.\n * - `size` (`AccordionSize` enum): Layout variant, either `'single-line'` (default) or `'large'`.\n * - `position` (`Position` enum): Controls border radius for stacking (`'top'`, `'bottom'`, `'center'`, `'regular'`).\n * - `alertFrameType`, `alertFrameThickness`, `alertFrameStatus`, `alertFrameMode`, `showAlertCategoryIcon`, `showAlertIcon`: Configure the alert overlay's appearance (see `obc-alert-frame` for details).\n *\n * ### Events\n * - `accordion-toggle` – Fired when the accordion is expanded or collapsed. Event detail includes `{ expanded, cardTitle }`.\n *\n * ### Best Practices\n * - Only use the alert overlay for important, contextual notifications related to the card's content.\n * - For accessibility, ensure the card title is descriptive and unique within a group.\n * - Avoid nesting interactive elements (like buttons) directly in the header; place them in the expanded content if needed.\n *\n * ### Example:\n * ```\n * <obc-accordion-card\n *   cardTitle=\"Settings\"\n *   description=\"Configure your preferences\"\n *   size=\"large\"\n *   hasDescription\n *   expanded\n *   hasLeadingIcon\n * >\n *   <span slot=\"leading-icon\"><obi-placeholder></obi-placeholder></span>\n *   <div slot=\"expanded-content\">\n *     <!-- Additional settings controls here -->\n *   </div>\n * </obc-accordion-card>\n * ```\n *\n * @property cardTitle - Main title text displayed in the accordion header.\n * @property description - Supporting description text shown under the title (only in large size and if `hasDescription` is true).\n * @availableWhen description size==large && hasDescription==true\n * @property statusLabel - Optional status label displayed in the header (shown if `hasStatusLabel` is true).\n * @availableWhen statusLabel hasStatusLabel==true\n * @property expanded - Whether the accordion card is expanded (shows additional content).\n * @property disabled - Disables the accordion card, preventing user interaction and dimming its appearance.\n * @property hasAlert - Shows an alert overlay above the card when true. Configure appearance with `alertFrameType`, `alertFrameThickness`, `alertFrameStatus` and `alertFrameMode`.\n * @property hasDescription - Enables the description text in the header (only in large size).\n * @property hasStatusLabel - Enables the status label in the header.\n * @property hasLeadingIcon - Enables the leading icon slot in the header.\n * @property alertFrameType - Type of the alert frame overlay (used when `hasAlert` is true).\n *   See `obc-alert-frame` for available types.\n * @availableWhen alertFrameType hasAlert==true\n * @property alertFrameThickness - Thickness of the alert frame overlay (used when `hasAlert` is true).\n *   See `obc-alert-frame` for available thickness values.\n * @availableWhen alertFrameThickness hasAlert==true\n * @property alertFrameStatus - Status of the alert frame overlay (used when `hasAlert` is true).\n *   See `obc-alert-frame` for available statuses.\n * @availableWhen alertFrameStatus hasAlert==true\n * @property alertFrameMode - Acknowledgement state of the alert: `acked-active` (default) is steady,\n *   `unacked-active` flashes, `unacked-rectified` flashes a dashed frame.\n * @availableWhen alertFrameMode hasAlert==true\n * @property showAlertCategoryIcon - Shows the alert category icon in the flap; a small side flap without it is not drawn.\n * @availableWhen showAlertCategoryIcon hasAlert==true && alertFrameType in [SmallSideFlip, LargeSideFlip, BottomFlip, TopFlip]\n * @property showAlertIcon - Shows the `alert-icon` slot in a large side, bottom or top flap.\n * @availableWhen showAlertIcon hasAlert==true && alertFrameType in [LargeSideFlip, BottomFlip, TopFlip]\n * @property position - Border radius for stacking: `regular` (default) rounds every corner,\n *   `top` flattens the bottom edge, `bottom` flattens the top edge, and\n *   `center` flattens both for a card in the middle of a stack.\n * @property size - Layout variant: `single-line` (default) is a compact title-only header,\n *   `large` adds a description beneath the title.\n * @slot leading-icon - Icon at the start of the header (shown when `hasLeadingIcon` is true)\n * @slot expanded-content - Content revealed when the accordion is expanded\n * @slot alert-icon - Icon for the alert overlay (used when `hasAlert` and `showAlertIcon` are true)\n * @slot alert-label - Label text for the alert overlay (used when `hasAlert` is true)\n * @slot alert-timer - Timer/duration text for the alert overlay (used when `hasAlert` is true)\n * @fires {CustomEvent<{expanded: boolean, cardTitle: string}>} accordion-toggle - Fired when the accordion is expanded or collapsed\n * @cssprop [--obc-accordion-expand-duration=200ms] - How long the panel takes to open and close. The chevron and the card's corners follow it. Ignored under `prefers-reduced-motion: reduce`.\n * @stable\n */\n@customElement('obc-accordion-card')\nexport class ObcAccordionCard extends LitElement {\n  @property({type: String}) cardTitle = '';\n\n  @property({type: String}) description = '';\n\n  @property({type: String}) statusLabel = '';\n\n  @property({type: Boolean}) expanded = false;\n\n  @property({type: Boolean}) disabled = false;\n\n  @property({type: Boolean}) hasAlert = false;\n\n  @property({type: Boolean}) hasDescription = false;\n\n  @property({type: Boolean}) hasStatusLabel = false;\n\n  @property({type: Boolean}) hasLeadingIcon = false;\n\n  @property({type: String}) position: Position = Position.regular;\n\n  @property({type: String}) size: AccordionSize = AccordionSize.SingleLine;\n\n  @property({type: String}) alertFrameType: ObcAlertFrameType =\n    ObcAlertFrameType.Regular;\n\n  @property({type: String}) alertFrameThickness: ObcAlertFrameThickness =\n    ObcAlertFrameThickness.Small;\n\n  @property({type: String}) alertFrameStatus: AlertType = AlertType.Alarm;\n\n  @property({type: String}) alertFrameMode: ObcAlertFrameMode =\n    ObcAlertFrameMode.ackedActive;\n\n  @property({type: Boolean, attribute: false}) showAlertCategoryIcon = true;\n\n  @property({type: Boolean}) showAlertIcon = false;\n\n  private get shouldShowDescription() {\n    return (\n      this.size === AccordionSize.Large &&\n      this.hasDescription &&\n      this.description.trim() !== ''\n    );\n  }\n\n  private handleToggle() {\n    if (this.disabled) return;\n\n    this.expanded = !this.expanded;\n\n    /**\n     * Fired when the accordion is expanded or collapsed.\n     * @fires accordion-toggle\n     */\n    this.dispatchEvent(\n      new CustomEvent('accordion-toggle', {\n        detail: {\n          expanded: this.expanded,\n          cardTitle: this.cardTitle,\n        },\n      })\n    );\n  }\n\n  /**\n   * Keeps the keyboard somewhere predictable when the panel closes.\n   *\n   * A collapsed panel is `inert`, and the browser drops focus out of anything\n   * it makes inert — onto `<body>`, two frames later. Clicking the header\n   * already leaves focus there; a consumer setting `expanded` while a slotted\n   * control has focus is the case that needs the transfer.\n   */\n  override willUpdate(changed: PropertyValues<this>) {\n    if (!changed.has('expanded') || this.expanded) return;\n\n    const panel = this.shadowRoot?.querySelector('.panel');\n    if (!panel) return;\n    releaseFocusBefore(\n      panel,\n      this.shadowRoot?.querySelector<HTMLButtonElement>('.content-button'),\n      this.shadowRoot?.querySelector<HTMLElement>('.wrapper')\n    );\n  }\n\n  private renderContentMain() {\n    return html`\n      <div class=\"header-container\">\n        <div class=\"content-container\">\n          ${\n            this.hasLeadingIcon\n              ? html`\n                  <div class=\"container-icon\">\n                    <slot name=\"leading-icon\"></slot>\n                  </div>\n                `\n              : ''\n          }\n          <div class=\"container-labels\">\n            <div class=\"label-title\">${this.cardTitle}</div>\n            ${\n              this.shouldShowDescription\n                ? html`\n                    <div class=\"label-description\">${this.description}</div>\n                  `\n                : ''\n            }\n          </div>\n          ${\n            this.hasStatusLabel\n              ? html`\n                  <div class=\"container-status\">\n                    <div class=\"status\">${this.statusLabel}</div>\n                  </div>\n                `\n              : ''\n          }\n          <div class=\"trailing-icon\">\n            <obi-chevron-down-google></obi-chevron-down-google>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  private renderContentAdditional() {\n    return html`\n      <div class=\"panel\" id=\"accordion-content\" ?inert=${!this.expanded}>\n        <div class=\"panel-inner\">\n          <div class=\"container-content-additional\">\n            <slot name=\"expanded-content\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  private isShartEdgeBottom() {\n    return this.position === Position.top || this.position === Position.center;\n  }\n  private isShartEdgeTop() {\n    return (\n      this.position === Position.bottom || this.position === Position.center\n    );\n  }\n\n  override render() {\n    return html`\n      <div\n        tabindex=\"-1\"\n        class=${classMap({\n          wrapper: true,\n          'state-expanded': this.expanded,\n          'state-collapsed': !this.expanded,\n          'state-disabled': this.disabled,\n          'style-single-line': this.size === AccordionSize.SingleLine,\n          'style-large': this.size === AccordionSize.Large,\n          'position-top': this.position === Position.top,\n          'position-bottom': this.position === Position.bottom,\n          'position-center': this.position === Position.center,\n        })}\n        style=\"position: relative;\"\n      >\n        <div class=\"card-container\">\n          <button\n            class=\"content-button\"\n            @click=${this.handleToggle}\n            ?disabled=${this.disabled}\n            aria-expanded=${this.expanded}\n            aria-controls=\"accordion-content\"\n          >\n            ${this.renderContentMain()}\n          </button>\n\n          ${this.renderContentAdditional()}\n        </div>\n\n        ${\n          this.hasAlert\n            ? html`\n                <obc-alert-frame\n                  class=\"alert alert-${this.alertFrameStatus}\"\n                  .sharpEdgeTopLeft=${this.isShartEdgeTop()}\n                  .sharpEdgeTopRight=${this.isShartEdgeTop()}\n                  .sharpEdgeBottomLeft=${this.isShartEdgeBottom()}\n                  .sharpEdgeBottomRight=${this.isShartEdgeBottom()}\n                  .type=${this.alertFrameType}\n                  .thickness=${this.alertFrameThickness}\n                  .status=${this.alertFrameStatus}\n                  .mode=${this.alertFrameMode}\n                  .showAlertCategoryIcon=${this.showAlertCategoryIcon}\n                  .showIcon=${this.showAlertIcon}\n                >\n                  <slot name=\"alert-icon\" slot=\"icon\"></slot>\n                  <slot name=\"alert-label\" slot=\"label\"></slot>\n                  <slot name=\"alert-timer\" slot=\"timer\"></slot>\n                </obc-alert-frame>\n              `\n            : ''\n        }\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-accordion-card': ObcAccordionCard;\n  }\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,33 @@
+import { ObcAlertFrameMode, ObcAlertFrameStatus, ObcAlertFrameThickness, ObcAlertFrameType } from './alert-frame.js';
+/**
+ * Story controls for the alert-frame properties a component forwards under the
+ * shared names: `alertFrameType`, `alertFrameThickness`, `alertFrameStatus`
+ * and `alertFrameMode`. Spread it into the story's `argTypes`.
+ */
+export declare const argTypesAlertFrame: {
+    readonly alertFrameType: {
+        readonly options: ObcAlertFrameType[];
+        readonly control: {
+            readonly type: "radio";
+        };
+    };
+    readonly alertFrameThickness: {
+        readonly options: ObcAlertFrameThickness[];
+        readonly control: {
+            readonly type: "radio";
+        };
+    };
+    readonly alertFrameStatus: {
+        readonly options: ObcAlertFrameStatus[];
+        readonly control: {
+            readonly type: "radio";
+        };
+    };
+    readonly alertFrameMode: {
+        readonly options: ObcAlertFrameMode[];
+        readonly control: {
+            readonly type: "radio";
+        };
+    };
+};
+//# sourceMappingURL=alert-frame-storybook-helpers.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert-frame-storybook-helpers.d.ts","sourceRoot":"","sources":["../../../src/components/alert-frame/alert-frame-storybook-helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,mBAAmB,EACnB,sBAAsB,EACtB,iBAAiB,EAClB,MAAM,kBAAkB,CAAC;AAE1B;;;;GAIG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;CAiBrB,CAAC"}

package/dist/components/alert-frame/alert-frame-storybook-helpers.js

@@ -0,0 +1,30 @@
+import { AlertType } from "../../types.js";
+import { ObcAlertFrameMode, ObcAlertFrameThickness, ObcAlertFrameType } from "./alert-frame.js";
+//#region src/components/alert-frame/alert-frame-storybook-helpers.ts
+/**
+* Story controls for the alert-frame properties a component forwards under the
+* shared names: `alertFrameType`, `alertFrameThickness`, `alertFrameStatus`
+* and `alertFrameMode`. Spread it into the story's `argTypes`.
+*/
+var argTypesAlertFrame = {
+	alertFrameType: {
+		options: Object.values(ObcAlertFrameType),
+		control: { type: "radio" }
+	},
+	alertFrameThickness: {
+		options: Object.values(ObcAlertFrameThickness),
+		control: { type: "radio" }
+	},
+	alertFrameStatus: {
+		options: Object.values(AlertType),
+		control: { type: "radio" }
+	},
+	alertFrameMode: {
+		options: Object.values(ObcAlertFrameMode),
+		control: { type: "radio" }
+	}
+};
+//#endregion
+export { argTypesAlertFrame };
+
+//# sourceMappingURL=alert-frame-storybook-helpers.js.map

package/dist/components/alert-frame/alert-frame-storybook-helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-frame-storybook-helpers.js","names":[],"sources":["../../../src/components/alert-frame/alert-frame-storybook-helpers.ts"],"sourcesContent":["import {\n  ObcAlertFrameMode,\n  ObcAlertFrameStatus,\n  ObcAlertFrameThickness,\n  ObcAlertFrameType,\n} from './alert-frame.js';\n\n/**\n * Story controls for the alert-frame properties a component forwards under the\n * shared names: `alertFrameType`, `alertFrameThickness`, `alertFrameStatus`\n * and `alertFrameMode`. Spread it into the story's `argTypes`.\n */\nexport const argTypesAlertFrame = {\n  alertFrameType: {\n    options: Object.values(ObcAlertFrameType),\n    control: {type: 'radio'},\n  },\n  alertFrameThickness: {\n    options: Object.values(ObcAlertFrameThickness),\n    control: {type: 'radio'},\n  },\n  alertFrameStatus: {\n    options: Object.values(ObcAlertFrameStatus),\n    control: {type: 'radio'},\n  },\n  alertFrameMode: {\n    options: Object.values(ObcAlertFrameMode),\n    control: {type: 'radio'},\n  },\n} as const;\n"],"mappings":";;;;;;;;AAYA,IAAa,qBAAqB;CAChC,gBAAgB;EACd,SAAS,OAAO,OAAO,iBAAiB;EACxC,SAAS,EAAC,MAAM,QAAO;CACzB;CACA,qBAAqB;EACnB,SAAS,OAAO,OAAO,sBAAsB;EAC7C,SAAS,EAAC,MAAM,QAAO;CACzB;CACA,kBAAkB;EAChB,SAAS,OAAO,OAAO,SAAmB;EAC1C,SAAS,EAAC,MAAM,QAAO;CACzB;CACA,gBAAgB;EACd,SAAS,OAAO,OAAO,iBAAiB;EACxC,SAAS,EAAC,MAAM,QAAO;CACzB;AACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"alert-icon.d.ts","sourceRoot":"","sources":["../../../src/components/alert-icon/alert-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAa,cAAc,EAAU,MAAM,KAAK,CAAC;AAGnE,OAAO,uCAAuC,CAAC;AAE/C,OAAO,EACL,SAAS,EACT,aAAa,EACb,KAAK,qBAAqB,EAC3B,MAAM,gBAAgB,CAAC;AAMxB,OAAO,yCAAyC,CAAC;AACjD,OAAO,2CAA2C,CAAC;AACnD,OAAO,2CAA2C,CAAC;AACnD,OAAO,4CAA4C,CAAC;AACpD,OAAO,8CAA8C,CAAC;AACtD,OAAO,yCAAyC,CAAC;AACjD,OAAO,2CAA2C,CAAC;AACnD,OAAO,8CAA8C,CAAC;AACtD,OAAO,gDAAgD,CAAC;AACxD,OAAO,wCAAwC,CAAC;AAChD,OAAO,6CAA6C,CAAC;AACrD,OAAO,0CAA0C,CAAC;AAClD,OAAO,+CAA+C,CAAC;AACvD,OAAO,8CAA8C,CAAC;AACtD,OAAO,iDAAiD,CAAC;AACzD,OAAO,gDAAgD,CAAC;AACxD,OAAO,qDAAqD,CAAC;AAE7D,OAAO,oCAAoC,CAAC;AAC5C,OAAO,oCAAoC,CAAC;AAsB5C,OAAO,EAAC,kBAAkB,EAAC,MAAM,uCAAuC,CAAC;AAiGzE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,qBACa,YAAa,SAAQ,UAAU;IAChB,SAAS,EAAE,SAAS,CAAmB;IAEvC,IAAI,CAAC,EAAE,SAAS,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEpB,aAAa,EAAE,aAAa,CAC9B;IAExB,SAAS,CAAC,QAAQ,CAAC,QAAQ,qBAGzB;IAEF,IAAI,qBAAqB,IAAI,qBAAqB,CAUjD;IAED,OAAO,KAAK,cAAc,GAKzB;IAED,OAAO,KAAK,OAAO,GAElB;IAED,OAAO,KAAK,eAAe,GAW1B;IAED,IAAI,IAAI;;;;;;aA6CP;IAED,OAAO,CAAC,gBAAgB;IAoDf,MAAM;IAiBf,OAAgB,MAAM,0BAiDpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}
+{"version":3,"file":"alert-icon.d.ts","sourceRoot":"","sources":["../../../src/components/alert-icon/alert-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAa,cAAc,EAAU,MAAM,KAAK,CAAC;AAGnE,OAAO,uCAAuC,CAAC;AAE/C,OAAO,EACL,SAAS,EACT,aAAa,EACb,KAAK,qBAAqB,EAC3B,MAAM,gBAAgB,CAAC;AAMxB,OAAO,yCAAyC,CAAC;AACjD,OAAO,2CAA2C,CAAC;AACnD,OAAO,2CAA2C,CAAC;AACnD,OAAO,4CAA4C,CAAC;AACpD,OAAO,8CAA8C,CAAC;AACtD,OAAO,yCAAyC,CAAC;AACjD,OAAO,2CAA2C,CAAC;AACnD,OAAO,8CAA8C,CAAC;AACtD,OAAO,gDAAgD,CAAC;AACxD,OAAO,wCAAwC,CAAC;AAChD,OAAO,6CAA6C,CAAC;AACrD,OAAO,0CAA0C,CAAC;AAClD,OAAO,+CAA+C,CAAC;AACvD,OAAO,8CAA8C,CAAC;AACtD,OAAO,iDAAiD,CAAC;AACzD,OAAO,gDAAgD,CAAC;AACxD,OAAO,qDAAqD,CAAC;AAE7D,OAAO,oCAAoC,CAAC;AAC5C,OAAO,oCAAoC,CAAC;AAsB5C,OAAO,EAAC,kBAAkB,EAAC,MAAM,uCAAuC,CAAC;AAiGzE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,qBACa,YAAa,SAAQ,UAAU;IAChB,SAAS,EAAE,SAAS,CAAmB;IAEvC,IAAI,CAAC,EAAE,SAAS,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEpB,aAAa,EAAE,aAAa,CAC9B;IAExB,SAAS,CAAC,QAAQ,CAAC,QAAQ,qBAGzB;IAEF,IAAI,qBAAqB,IAAI,qBAAqB,CAUjD;IAED,OAAO,KAAK,cAAc,GAKzB;IAED,OAAO,KAAK,OAAO,GAElB;IAED,OAAO,KAAK,eAAe,GAW1B;IAED,IAAI,IAAI;;;;;;aAgDP;IAED,OAAO,CAAC,gBAAgB;IAqDf,MAAM;IAiBf,OAAgB,MAAM,0BAiDpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

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

@@ -152,10 +152,11 @@ var ObcAlertIcon = class ObcAlertIcon extends LitElement {
 			case "unacknowledged": return mapping["alarm-unack"];
 			default: return null;
 		}
-		else if (this.bamType === AlertType.Warning) {
-			if (this.active === false) return mapping["warning-rectified"];
-			else if (this.acknowledged) return mapping["warning-silenced"];
-			else return mapping["warning-unack"];
+		else if (this.bamType === AlertType.Warning) switch (this._effectiveState) {
+			case "rectified": return mapping["warning-rectified"];
+			case "silenced": return mapping["warning-silenced"];
+			case "unacknowledged": return mapping["warning-unack"];
+			default: return null;
 		}
 		return null;
 	}
@@ -189,7 +190,7 @@ var ObcAlertIcon = class ObcAlertIcon extends LitElement {
 				default: return nothing;
 			}
 		}
-		return nothing;
+		return this.icon ? html`${this.icon.a}` : nothing;
 	}
 	render() {
 		if (!this._effectiveType) return html`<div>No alarm</div>`;

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

@@ -1 +1 @@
-{"version":3,"file":"alert-icon.js","names":[],"sources":["../../../src/components/alert-icon/alert-icon.ts"],"sourcesContent":["import {LitElement, html, css, TemplateResult, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport '../../icons/icon-caution-color-iec.js';\nimport {customElement} from '../../decorator.js';\nimport {\n  AlertType,\n  FlashingSpeed,\n  type ResolvedFlashingSpeed,\n} from '../../types.js';\nimport {\n  AlertFlashPhase,\n  getBamAlertTypeForBlinking,\n  resolveFlashingSpeed,\n} from '../../alert-severity.js';\nimport '../../icons/icon-alarm-badge-outline.js';\nimport '../../icons/icon-warning-badge-outline.js';\nimport '../../icons/icon-caution-badge-outline.js';\nimport '../../icons/icon-alarm-acknowledged-iec.js';\nimport '../../icons/icon-warning-acknowledged-iec.js';\nimport '../../icons/icon-alarm-rectified-iec.js';\nimport '../../icons/icon-warning-rectified-iec.js';\nimport '../../icons/icon-alarm-rectified-outlined.js';\nimport '../../icons/icon-warning-rectified-outlined.js';\nimport '../../icons/icon-alarm-silenced-iec.js';\nimport '../../icons/icon-alarm-silenced-outlined.js';\nimport '../../icons/icon-warning-silenced-iec.js';\nimport '../../icons/icon-warning-silenced-outlined.js';\nimport '../../icons/icon-alarm-unacknowledged-iec.js';\nimport '../../icons/icon-alarm-acknowledged-outlined.js';\nimport '../../icons/icon-warning-unacknowledged-iec.js';\nimport '../../icons/icon-warning-unacknowledged-outlined.js';\n\nimport '../../icons/icon-critical-badge.js';\nimport '../alert-frame/diagnostic-badge.js';\nimport {criticalA, criticalB} from './icons/icon-critical.js';\nimport {\n  criticalUnacknowledgedA,\n  criticalUnacknowledgedB,\n} from './icons/icon-critical-unacknowledged.js';\nimport {\n  criticalSilencedA,\n  criticalSilencedB,\n} from './icons/icon-critical-silenced.js';\nimport {\n  criticalRectifiedA,\n  criticalRectifiedB,\n} from './icons/icon-critical-rectified.js';\nimport {criticalAcknowledged} from './icons/icon-critical-acknowledged.js';\nimport {\n  lowUnacknowledgedA,\n  lowUnacknowledgedB,\n} from './icons/icon-low-unacknowledged.js';\nimport {lowSilencedA, lowSilencedB} from './icons/icon-low-silenced.js';\nimport {lowRectifiedA, lowRectifiedB} from './icons/icon-low-rectified.js';\nimport {lowAcknowledged} from './icons/icon-low-acknowledged.js';\nimport {FlashingController} from '../../palettes/flashing-controller.js';\n\nenum AlertIconState {\n  Silenced = 'silenced',\n  Unacknowledged = 'unacknowledged',\n  Acknowledged = 'acknowledged',\n  Rectified = 'rectified',\n}\n\nenum AlertIconName {\n  AlarmSilenced = 'alarm-silenced',\n  AlarmUnack = 'alarm-unack',\n  AlarmRectified = 'alarm-rectified',\n  WarningUnack = 'warning-unack',\n  WarningRectified = 'warning-rectified',\n  WarningSilenced = 'warning-silenced',\n  Critical = 'critical',\n  CriticalUnack = 'critical-unack',\n  CriticalSilenced = 'critical-silenced',\n  CriticalRectified = 'critical-rectified',\n  LowUnack = 'low-unack',\n  LowSilenced = 'low-silenced',\n  LowRectified = 'low-rectified',\n}\n\nconst mapping = {\n  [AlertIconName.AlarmSilenced]: {\n    a: html`<obi-alarm-silenced-iec usecsscolor></obi-alarm-silenced-iec>`,\n    b: html`<obi-alarm-silenced-outlined\n      usecsscolor\n    ></obi-alarm-silenced-outlined>`,\n  },\n  [AlertIconName.AlarmUnack]: {\n    a: html`<obi-alarm-unacknowledged-iec\n      usecsscolor\n    ></obi-alarm-unacknowledged-iec>`,\n    b: html`<obi-alarm-acknowledged-outlined\n      usecsscolor\n    ></obi-alarm-acknowledged-outlined>`,\n  },\n  [AlertIconName.AlarmRectified]: {\n    a: html`<obi-alarm-rectified-iec usecsscolor></obi-alarm-rectified-iec>`,\n    b: html`<obi-alarm-rectified-outlined\n      usecsscolor\n    ></obi-alarm-rectified-outlined>`,\n  },\n  [AlertIconName.WarningUnack]: {\n    a: html`<obi-warning-unacknowledged-iec\n      usecsscolor\n    ></obi-warning-unacknowledged-iec>`,\n    b: html`<obi-warning-unacknowledged-outlined\n      usecsscolor\n    ></obi-warning-unacknowledged-outlined>`,\n  },\n  [AlertIconName.WarningRectified]: {\n    a: html`<obi-warning-rectified-iec\n      usecsscolor\n    ></obi-warning-rectified-iec>`,\n    b: html`<obi-warning-rectified-outlined\n      usecsscolor\n    ></obi-warning-rectified-outlined>`,\n  },\n  [AlertIconName.WarningSilenced]: {\n    a: html`<obi-warning-silenced-iec usecsscolor></obi-warning-silenced-iec>`,\n    b: html`<obi-warning-silenced-outlined\n      usecsscolor\n    ></obi-warning-silenced-outlined>`,\n  },\n  [AlertIconName.Critical]: {\n    a: criticalA,\n    b: criticalB,\n  },\n  [AlertIconName.CriticalUnack]: {\n    a: criticalUnacknowledgedA,\n    b: criticalUnacknowledgedB,\n  },\n  [AlertIconName.CriticalSilenced]: {\n    a: criticalSilencedA,\n    b: criticalSilencedB,\n  },\n  [AlertIconName.CriticalRectified]: {\n    a: criticalRectifiedA,\n    b: criticalRectifiedB,\n  },\n  [AlertIconName.LowUnack]: {\n    a: lowUnacknowledgedA,\n    b: lowUnacknowledgedB,\n  },\n  [AlertIconName.LowSilenced]: {\n    a: lowSilencedA,\n    b: lowSilencedB,\n  },\n  [AlertIconName.LowRectified]: {\n    a: lowRectifiedA,\n    b: lowRectifiedB,\n  },\n};\n/**\n * `obc-alert-icon` – Animated alert icon for signaling alarm and warning states.\n *\n * Displays a specialized icon with a blinking effect to visually indicate alert or warning conditions. The icon type is determined by the `name` property, supporting both alarm and warning variants in different states (such as silenced, unacknowledged, or rectified).\n *\n * Appears in notification areas, alert banners, or status panels to draw attention to active or historical alert conditions. The blinking animation helps highlight urgency or status changes without requiring user interaction.\n *\n * ## Features\n * - **Multiple Icon Types:** Supports all alarm and warning types.\n * - **Flashing:** Two SVG layers alternate at the design tempo (fast for critical/alarm/high, slow for warning/medium, very slow for low and for every rectified alert); acknowledged icons are steady.\n * - **Adaptive Styling:** Applies different CSS variables for alarm and warning types to allow for distinct visual cues (e.g., color, blink timing).\n * - **Scalable:** Designed to fit any container size; scales with its parent element.\n *\n * ## Usage Guidelines\n * Use `obc-alert-icon` to visually represent the status of alarms or warnings in notification panels, alert lists, or system status areas. The blinking effect is intended to draw user attention to active or recent alert conditions. Select the appropriate `name` value to match the alert state you wish to indicate.\n *\n * **TODO(designer):** Provide guidance on when to use each icon variant (e.g., when to use \"rectified\" vs. \"silenced\"), and any best practices for icon placement or blink timing.\n *\n * ## Properties\n * - `type` (AlertType): The type of alarm to display.\n * - `status` (AlarmStatus): The status of the alarm to display.\n *\n * ## Best Practices\n * - Only use the blinking alert icon for states that require immediate or prominent user attention.\n * - Ensure the icon is sized appropriately for its context (e.g., 32x32px or 64x64px for status panels).\n * - Avoid using multiple blinking icons in close proximity to prevent visual overload.\n *\n * ## Example\n * ```html\n * <obc-alert-icon .alarmType=${alarm.type} .alarmStatus=${alarm.status}></obc-alert-icon>\n * ```\n *\n * @property flashingSpeed - Flash tempo: `default` resolves from the alert type and state,\n *   `fast`, `slow`, `very-slow` force a tempo, `fixed` never flashes. Acknowledged icons are\n *   always steady.\n * @availableWhen acknowledged type in [Alarm, Warning, LevelCritical, LevelHigh, LevelMedium, LevelLow]\n * @availableWhen active type in [Alarm, Warning, LevelCritical, LevelHigh, LevelMedium, LevelLow]\n * @stable\n */\n@customElement('obc-alert-icon')\nexport class ObcAlertIcon extends LitElement {\n  @property({type: String}) alertType: AlertType = AlertType.Alarm;\n  /* @deprecated use `alertType` instead */\n  @property({type: String}) type?: AlertType;\n  @property({type: Boolean}) acknowledged?: boolean;\n  @property({type: Boolean}) active?: boolean;\n  @property({type: Boolean}) silenced?: boolean;\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    // Caution and diagnostic have no flashing glyph pair, whatever the speed.\n    if (this.acknowledged || !this.icon) {\n      return FlashingSpeed.Fixed;\n    }\n    return resolveFlashingSpeed(\n      this.flashingSpeed,\n      this._effectiveType,\n      this.active === false ? AlertFlashPhase.Rectified : AlertFlashPhase.Active\n    );\n  }\n\n  private get _effectiveType(): AlertType {\n    if (this.type) {\n      return this.type;\n    }\n    return this.alertType;\n  }\n\n  private get bamType(): AlertType {\n    return getBamAlertTypeForBlinking(this._effectiveType);\n  }\n\n  private get _effectiveState(): AlertIconState {\n    if (this.active === false) {\n      return AlertIconState.Rectified;\n    } else if (this.acknowledged) {\n      return AlertIconState.Acknowledged;\n    } else if (this.silenced) {\n      return AlertIconState.Silenced;\n    } else if (this.active === true) {\n      return AlertIconState.Unacknowledged;\n    }\n    return AlertIconState.Unacknowledged;\n  }\n\n  get icon() {\n    if (this._effectiveType === AlertType.LevelCritical) {\n      switch (this._effectiveState) {\n        case AlertIconState.Rectified:\n          return mapping[AlertIconName.CriticalRectified];\n        case AlertIconState.Silenced:\n          return mapping[AlertIconName.CriticalSilenced];\n        case AlertIconState.Unacknowledged:\n          return mapping[AlertIconName.CriticalUnack];\n        default:\n          return mapping[AlertIconName.Critical];\n      }\n    } else if (this._effectiveType === AlertType.LevelLow) {\n      switch (this._effectiveState) {\n        case AlertIconState.Rectified:\n          return mapping[AlertIconName.LowRectified];\n        case AlertIconState.Silenced:\n          return mapping[AlertIconName.LowSilenced];\n        case AlertIconState.Unacknowledged:\n          return mapping[AlertIconName.LowUnack];\n        default:\n          return mapping[AlertIconName.LowUnack];\n      }\n    } else if (this.bamType === AlertType.Alarm) {\n      switch (this._effectiveState) {\n        case AlertIconState.Rectified:\n          return mapping[AlertIconName.AlarmRectified];\n        case AlertIconState.Silenced:\n          return mapping[AlertIconName.AlarmSilenced];\n        case AlertIconState.Unacknowledged:\n          return mapping[AlertIconName.AlarmUnack];\n        default:\n          return null;\n      }\n    } else if (this.bamType === AlertType.Warning) {\n      if (this.active === false) {\n        return mapping[AlertIconName.WarningRectified];\n      } else if (this.acknowledged) {\n        return mapping[AlertIconName.WarningSilenced];\n      } else {\n        return mapping[AlertIconName.WarningUnack];\n      }\n    }\n\n    return null;\n  }\n\n  private renderStaticIcon(): TemplateResult | typeof nothing {\n    // Caution and diagnostic always show a fixed symbol, regardless of state.\n    if (this._effectiveType === AlertType.Caution) {\n      return html`<obi-caution-color-iec usecsscolor></obi-caution-color-iec>`;\n    }\n    if (this._effectiveType === AlertType.LevelDiagnostic) {\n      return html`<obi-diagnostic-badge\n        style=\"color: var(--alert-diagnostic-color);\"\n      ></obi-diagnostic-badge>`;\n    }\n    if (this._effectiveState === AlertIconState.Acknowledged) {\n      if (this._effectiveType === AlertType.LevelCritical) {\n        return html`${criticalAcknowledged}`;\n      }\n      if (this._effectiveType === AlertType.LevelLow) {\n        return html`${lowAcknowledged}`;\n      }\n      switch (this.bamType) {\n        case AlertType.Alarm:\n          return html`<obi-alarm-acknowledged-iec\n            usecsscolor\n          ></obi-alarm-acknowledged-iec>`;\n        case AlertType.Warning:\n          return html`<obi-warning-acknowledged-iec\n            usecsscolor\n          ></obi-warning-acknowledged-iec>`;\n        default:\n          return nothing;\n      }\n    } else if (this._effectiveState === AlertIconState.Rectified) {\n      if (this._effectiveType === AlertType.LevelCritical) {\n        return html`${criticalRectifiedB}`;\n      }\n      if (this._effectiveType === AlertType.LevelLow) {\n        return html`${lowRectifiedB}`;\n      }\n      switch (this.bamType) {\n        case AlertType.Alarm:\n          return html`<obi-alarm-rectified-outlined\n            usecsscolor\n          ></obi-alarm-rectified-outlined>`;\n        case AlertType.Warning:\n          return html`<obi-warning-rectified-outlined\n            usecsscolor\n          ></obi-warning-rectified-outlined>`;\n        default:\n          return nothing;\n      }\n    }\n    return nothing;\n  }\n\n  override render() {\n    if (!this._effectiveType) {\n      return html`<div>No alarm</div>`;\n    }\n    const tempo = this.resolvedFlashingSpeed;\n    const icons = this.icon;\n    if (tempo !== FlashingSpeed.Fixed && icons) {\n      return html`\n        <div class=${classMap({wrapper: true, [`flash-${tempo}`]: true})}>\n          <span class=\"a\">${icons.a}</span>\n          <span class=\"b\">${icons.b}</span>\n        </div>\n      `;\n    }\n    return html`<div class=\"wrapper\">${this.renderStaticIcon()}</div>`;\n  }\n\n  static override styles = css`\n    .wrapper {\n      height: 100%;\n      width: 100%;\n      position: relative;\n\n      obi-diagnostic-badge,\n      obi-critical-badge {\n        display: block;\n        height: 100%;\n        width: 100%;\n        position: absolute;\n        top: 0;\n        left: 0;\n      }\n\n      svg,\n      .a,\n      .b {\n        height: 100%;\n        width: 100%;\n        position: absolute;\n        top: 0;\n        left: 0;\n      }\n      &.flash-fast .a {\n        opacity: var(--flash-fast-on);\n      }\n\n      &.flash-fast .b {\n        opacity: var(--flash-fast-off);\n      }\n\n      &.flash-slow .a {\n        opacity: var(--flash-slow-on);\n      }\n\n      &.flash-slow .b {\n        opacity: var(--flash-slow-off);\n      }\n\n      &.flash-very-slow .a {\n        opacity: var(--flash-very-slow-on);\n      }\n\n      &.flash-very-slow .b {\n        opacity: var(--flash-very-slow-off);\n      }\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-alert-icon': ObcAlertIcon;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"alert-icon.js","names":[],"sources":["../../../src/components/alert-icon/alert-icon.ts"],"sourcesContent":["import {LitElement, html, css, TemplateResult, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport '../../icons/icon-caution-color-iec.js';\nimport {customElement} from '../../decorator.js';\nimport {\n  AlertType,\n  FlashingSpeed,\n  type ResolvedFlashingSpeed,\n} from '../../types.js';\nimport {\n  AlertFlashPhase,\n  getBamAlertTypeForBlinking,\n  resolveFlashingSpeed,\n} from '../../alert-severity.js';\nimport '../../icons/icon-alarm-badge-outline.js';\nimport '../../icons/icon-warning-badge-outline.js';\nimport '../../icons/icon-caution-badge-outline.js';\nimport '../../icons/icon-alarm-acknowledged-iec.js';\nimport '../../icons/icon-warning-acknowledged-iec.js';\nimport '../../icons/icon-alarm-rectified-iec.js';\nimport '../../icons/icon-warning-rectified-iec.js';\nimport '../../icons/icon-alarm-rectified-outlined.js';\nimport '../../icons/icon-warning-rectified-outlined.js';\nimport '../../icons/icon-alarm-silenced-iec.js';\nimport '../../icons/icon-alarm-silenced-outlined.js';\nimport '../../icons/icon-warning-silenced-iec.js';\nimport '../../icons/icon-warning-silenced-outlined.js';\nimport '../../icons/icon-alarm-unacknowledged-iec.js';\nimport '../../icons/icon-alarm-acknowledged-outlined.js';\nimport '../../icons/icon-warning-unacknowledged-iec.js';\nimport '../../icons/icon-warning-unacknowledged-outlined.js';\n\nimport '../../icons/icon-critical-badge.js';\nimport '../alert-frame/diagnostic-badge.js';\nimport {criticalA, criticalB} from './icons/icon-critical.js';\nimport {\n  criticalUnacknowledgedA,\n  criticalUnacknowledgedB,\n} from './icons/icon-critical-unacknowledged.js';\nimport {\n  criticalSilencedA,\n  criticalSilencedB,\n} from './icons/icon-critical-silenced.js';\nimport {\n  criticalRectifiedA,\n  criticalRectifiedB,\n} from './icons/icon-critical-rectified.js';\nimport {criticalAcknowledged} from './icons/icon-critical-acknowledged.js';\nimport {\n  lowUnacknowledgedA,\n  lowUnacknowledgedB,\n} from './icons/icon-low-unacknowledged.js';\nimport {lowSilencedA, lowSilencedB} from './icons/icon-low-silenced.js';\nimport {lowRectifiedA, lowRectifiedB} from './icons/icon-low-rectified.js';\nimport {lowAcknowledged} from './icons/icon-low-acknowledged.js';\nimport {FlashingController} from '../../palettes/flashing-controller.js';\n\nenum AlertIconState {\n  Silenced = 'silenced',\n  Unacknowledged = 'unacknowledged',\n  Acknowledged = 'acknowledged',\n  Rectified = 'rectified',\n}\n\nenum AlertIconName {\n  AlarmSilenced = 'alarm-silenced',\n  AlarmUnack = 'alarm-unack',\n  AlarmRectified = 'alarm-rectified',\n  WarningUnack = 'warning-unack',\n  WarningRectified = 'warning-rectified',\n  WarningSilenced = 'warning-silenced',\n  Critical = 'critical',\n  CriticalUnack = 'critical-unack',\n  CriticalSilenced = 'critical-silenced',\n  CriticalRectified = 'critical-rectified',\n  LowUnack = 'low-unack',\n  LowSilenced = 'low-silenced',\n  LowRectified = 'low-rectified',\n}\n\nconst mapping = {\n  [AlertIconName.AlarmSilenced]: {\n    a: html`<obi-alarm-silenced-iec usecsscolor></obi-alarm-silenced-iec>`,\n    b: html`<obi-alarm-silenced-outlined\n      usecsscolor\n    ></obi-alarm-silenced-outlined>`,\n  },\n  [AlertIconName.AlarmUnack]: {\n    a: html`<obi-alarm-unacknowledged-iec\n      usecsscolor\n    ></obi-alarm-unacknowledged-iec>`,\n    b: html`<obi-alarm-acknowledged-outlined\n      usecsscolor\n    ></obi-alarm-acknowledged-outlined>`,\n  },\n  [AlertIconName.AlarmRectified]: {\n    a: html`<obi-alarm-rectified-iec usecsscolor></obi-alarm-rectified-iec>`,\n    b: html`<obi-alarm-rectified-outlined\n      usecsscolor\n    ></obi-alarm-rectified-outlined>`,\n  },\n  [AlertIconName.WarningUnack]: {\n    a: html`<obi-warning-unacknowledged-iec\n      usecsscolor\n    ></obi-warning-unacknowledged-iec>`,\n    b: html`<obi-warning-unacknowledged-outlined\n      usecsscolor\n    ></obi-warning-unacknowledged-outlined>`,\n  },\n  [AlertIconName.WarningRectified]: {\n    a: html`<obi-warning-rectified-iec\n      usecsscolor\n    ></obi-warning-rectified-iec>`,\n    b: html`<obi-warning-rectified-outlined\n      usecsscolor\n    ></obi-warning-rectified-outlined>`,\n  },\n  [AlertIconName.WarningSilenced]: {\n    a: html`<obi-warning-silenced-iec usecsscolor></obi-warning-silenced-iec>`,\n    b: html`<obi-warning-silenced-outlined\n      usecsscolor\n    ></obi-warning-silenced-outlined>`,\n  },\n  [AlertIconName.Critical]: {\n    a: criticalA,\n    b: criticalB,\n  },\n  [AlertIconName.CriticalUnack]: {\n    a: criticalUnacknowledgedA,\n    b: criticalUnacknowledgedB,\n  },\n  [AlertIconName.CriticalSilenced]: {\n    a: criticalSilencedA,\n    b: criticalSilencedB,\n  },\n  [AlertIconName.CriticalRectified]: {\n    a: criticalRectifiedA,\n    b: criticalRectifiedB,\n  },\n  [AlertIconName.LowUnack]: {\n    a: lowUnacknowledgedA,\n    b: lowUnacknowledgedB,\n  },\n  [AlertIconName.LowSilenced]: {\n    a: lowSilencedA,\n    b: lowSilencedB,\n  },\n  [AlertIconName.LowRectified]: {\n    a: lowRectifiedA,\n    b: lowRectifiedB,\n  },\n};\n/**\n * `obc-alert-icon` – Animated alert icon for signaling alarm and warning states.\n *\n * Displays a specialized icon with a blinking effect to visually indicate alert or warning conditions. The icon type is determined by the `name` property, supporting both alarm and warning variants in different states (such as silenced, unacknowledged, or rectified).\n *\n * Appears in notification areas, alert banners, or status panels to draw attention to active or historical alert conditions. The blinking animation helps highlight urgency or status changes without requiring user interaction.\n *\n * ## Features\n * - **Multiple Icon Types:** Supports all alarm and warning types.\n * - **Flashing:** Two SVG layers alternate at the design tempo (fast for critical/alarm/high, slow for warning/medium, very slow for low and for every rectified alert); acknowledged icons are steady.\n * - **Adaptive Styling:** Applies different CSS variables for alarm and warning types to allow for distinct visual cues (e.g., color, blink timing).\n * - **Scalable:** Designed to fit any container size; scales with its parent element.\n *\n * ## Usage Guidelines\n * Use `obc-alert-icon` to visually represent the status of alarms or warnings in notification panels, alert lists, or system status areas. The blinking effect is intended to draw user attention to active or recent alert conditions. Select the appropriate `name` value to match the alert state you wish to indicate.\n *\n * **TODO(designer):** Provide guidance on when to use each icon variant (e.g., when to use \"rectified\" vs. \"silenced\"), and any best practices for icon placement or blink timing.\n *\n * ## Properties\n * - `type` (AlertType): The type of alarm to display.\n * - `status` (AlarmStatus): The status of the alarm to display.\n *\n * ## Best Practices\n * - Only use the blinking alert icon for states that require immediate or prominent user attention.\n * - Ensure the icon is sized appropriately for its context (e.g., 32x32px or 64x64px for status panels).\n * - Avoid using multiple blinking icons in close proximity to prevent visual overload.\n *\n * ## Example\n * ```html\n * <obc-alert-icon .alarmType=${alarm.type} .alarmStatus=${alarm.status}></obc-alert-icon>\n * ```\n *\n * @property flashingSpeed - Flash tempo: `default` resolves from the alert type and state,\n *   `fast`, `slow`, `very-slow` force a tempo, `fixed` never flashes. Acknowledged icons are\n *   always steady.\n * @availableWhen acknowledged type in [Alarm, Warning, LevelCritical, LevelHigh, LevelMedium, LevelLow]\n * @availableWhen active type in [Alarm, Warning, LevelCritical, LevelHigh, LevelMedium, LevelLow]\n * @stable\n */\n@customElement('obc-alert-icon')\nexport class ObcAlertIcon extends LitElement {\n  @property({type: String}) alertType: AlertType = AlertType.Alarm;\n  /* @deprecated use `alertType` instead */\n  @property({type: String}) type?: AlertType;\n  @property({type: Boolean}) acknowledged?: boolean;\n  @property({type: Boolean}) active?: boolean;\n  @property({type: Boolean}) silenced?: boolean;\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    // Caution and diagnostic have no flashing glyph pair, whatever the speed.\n    if (this.acknowledged || !this.icon) {\n      return FlashingSpeed.Fixed;\n    }\n    return resolveFlashingSpeed(\n      this.flashingSpeed,\n      this._effectiveType,\n      this.active === false ? AlertFlashPhase.Rectified : AlertFlashPhase.Active\n    );\n  }\n\n  private get _effectiveType(): AlertType {\n    if (this.type) {\n      return this.type;\n    }\n    return this.alertType;\n  }\n\n  private get bamType(): AlertType {\n    return getBamAlertTypeForBlinking(this._effectiveType);\n  }\n\n  private get _effectiveState(): AlertIconState {\n    if (this.active === false) {\n      return AlertIconState.Rectified;\n    } else if (this.acknowledged) {\n      return AlertIconState.Acknowledged;\n    } else if (this.silenced) {\n      return AlertIconState.Silenced;\n    } else if (this.active === true) {\n      return AlertIconState.Unacknowledged;\n    }\n    return AlertIconState.Unacknowledged;\n  }\n\n  get icon() {\n    if (this._effectiveType === AlertType.LevelCritical) {\n      switch (this._effectiveState) {\n        case AlertIconState.Rectified:\n          return mapping[AlertIconName.CriticalRectified];\n        case AlertIconState.Silenced:\n          return mapping[AlertIconName.CriticalSilenced];\n        case AlertIconState.Unacknowledged:\n          return mapping[AlertIconName.CriticalUnack];\n        default:\n          return mapping[AlertIconName.Critical];\n      }\n    } else if (this._effectiveType === AlertType.LevelLow) {\n      switch (this._effectiveState) {\n        case AlertIconState.Rectified:\n          return mapping[AlertIconName.LowRectified];\n        case AlertIconState.Silenced:\n          return mapping[AlertIconName.LowSilenced];\n        case AlertIconState.Unacknowledged:\n          return mapping[AlertIconName.LowUnack];\n        default:\n          return mapping[AlertIconName.LowUnack];\n      }\n    } else if (this.bamType === AlertType.Alarm) {\n      switch (this._effectiveState) {\n        case AlertIconState.Rectified:\n          return mapping[AlertIconName.AlarmRectified];\n        case AlertIconState.Silenced:\n          return mapping[AlertIconName.AlarmSilenced];\n        case AlertIconState.Unacknowledged:\n          return mapping[AlertIconName.AlarmUnack];\n        default:\n          return null;\n      }\n    } else if (this.bamType === AlertType.Warning) {\n      switch (this._effectiveState) {\n        case AlertIconState.Rectified:\n          return mapping[AlertIconName.WarningRectified];\n        case AlertIconState.Silenced:\n          return mapping[AlertIconName.WarningSilenced];\n        case AlertIconState.Unacknowledged:\n          return mapping[AlertIconName.WarningUnack];\n        default:\n          return null;\n      }\n    }\n\n    return null;\n  }\n\n  private renderStaticIcon(): TemplateResult | typeof nothing {\n    // Caution and diagnostic always show a fixed symbol, regardless of state.\n    if (this._effectiveType === AlertType.Caution) {\n      return html`<obi-caution-color-iec usecsscolor></obi-caution-color-iec>`;\n    }\n    if (this._effectiveType === AlertType.LevelDiagnostic) {\n      return html`<obi-diagnostic-badge\n        style=\"color: var(--alert-diagnostic-color);\"\n      ></obi-diagnostic-badge>`;\n    }\n    if (this._effectiveState === AlertIconState.Acknowledged) {\n      if (this._effectiveType === AlertType.LevelCritical) {\n        return html`${criticalAcknowledged}`;\n      }\n      if (this._effectiveType === AlertType.LevelLow) {\n        return html`${lowAcknowledged}`;\n      }\n      switch (this.bamType) {\n        case AlertType.Alarm:\n          return html`<obi-alarm-acknowledged-iec\n            usecsscolor\n          ></obi-alarm-acknowledged-iec>`;\n        case AlertType.Warning:\n          return html`<obi-warning-acknowledged-iec\n            usecsscolor\n          ></obi-warning-acknowledged-iec>`;\n        default:\n          return nothing;\n      }\n    } else if (this._effectiveState === AlertIconState.Rectified) {\n      if (this._effectiveType === AlertType.LevelCritical) {\n        return html`${criticalRectifiedB}`;\n      }\n      if (this._effectiveType === AlertType.LevelLow) {\n        return html`${lowRectifiedB}`;\n      }\n      switch (this.bamType) {\n        case AlertType.Alarm:\n          return html`<obi-alarm-rectified-outlined\n            usecsscolor\n          ></obi-alarm-rectified-outlined>`;\n        case AlertType.Warning:\n          return html`<obi-warning-rectified-outlined\n            usecsscolor\n          ></obi-warning-rectified-outlined>`;\n        default:\n          return nothing;\n      }\n    }\n    // Steady but still owed an ACK, such as with a `fixed` flashing speed.\n    return this.icon ? html`${this.icon.a}` : nothing;\n  }\n\n  override render() {\n    if (!this._effectiveType) {\n      return html`<div>No alarm</div>`;\n    }\n    const tempo = this.resolvedFlashingSpeed;\n    const icons = this.icon;\n    if (tempo !== FlashingSpeed.Fixed && icons) {\n      return html`\n        <div class=${classMap({wrapper: true, [`flash-${tempo}`]: true})}>\n          <span class=\"a\">${icons.a}</span>\n          <span class=\"b\">${icons.b}</span>\n        </div>\n      `;\n    }\n    return html`<div class=\"wrapper\">${this.renderStaticIcon()}</div>`;\n  }\n\n  static override styles = css`\n    .wrapper {\n      height: 100%;\n      width: 100%;\n      position: relative;\n\n      obi-diagnostic-badge,\n      obi-critical-badge {\n        display: block;\n        height: 100%;\n        width: 100%;\n        position: absolute;\n        top: 0;\n        left: 0;\n      }\n\n      svg,\n      .a,\n      .b {\n        height: 100%;\n        width: 100%;\n        position: absolute;\n        top: 0;\n        left: 0;\n      }\n      &.flash-fast .a {\n        opacity: var(--flash-fast-on);\n      }\n\n      &.flash-fast .b {\n        opacity: var(--flash-fast-off);\n      }\n\n      &.flash-slow .a {\n        opacity: var(--flash-slow-on);\n      }\n\n      &.flash-slow .b {\n        opacity: var(--flash-slow-off);\n      }\n\n      &.flash-very-slow .a {\n        opacity: var(--flash-very-slow-on);\n      }\n\n      &.flash-very-slow .b {\n        opacity: var(--flash-very-slow-off);\n      }\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-alert-icon': ObcAlertIcon;\n  }\n}\n"],"mappings":"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"}

package/dist/components/alert-list-details/alert-list-details.css.js

@@ -60,7 +60,6 @@ obc-table::part(grid) {
 .empty-list .icon {
     height: 96px;
     width: 96px;
-    color: var(--on-flat-neutral-color);
   }
 
 .empty-list .empty-title {
@@ -88,6 +87,10 @@ obc-table::part(grid) {
     max-width: 344px;
     text-align: center;
   }
+
+.empty-list .icon {
+    color: var(--on-flat-neutral-color);
+  }
 `;
 //#endregion
 export { alert_list_details_default as default };

package/dist/components/alert-list-details/alert-list-details.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-list-details.css.js","names":[],"sources":["../../../src/components/alert-list-details/alert-list-details.css?inline"],"sourcesContent":[".wrapper {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  user-select: none;\n}\n\n.alert-list {\n  min-height: 0;\n  flex-grow: 0;\n}\n\n.spacer {\n  flex-grow: 1;\n}\n\n.action {\n  display: flex;\n  height: var(--app-components-tool-bar-touch-target-size);\n  padding: 0px var(--app-components-alert-toolbar-margin-horizontal);\n  justify-content: space-between;\n  align-items: center;\n  flex-shrink: 0;\n  flex-grow: 0;\n  border-top: 1px solid var(--border-divider-color);\n  background: var(--container-section-color);\n  box-shadow: var(--shadow-flat);\n\n  .btn-group {\n    display: flex;\n  }\n}\n\nobc-table::part(grid) {\n  grid-template-columns: 1fr repeat(4, min-content);\n}\n\n.wrapper.small obc-table::part(grid) {\n  grid-template-columns: 1fr min-content var(\n      --app-components-alert-table-row-ack-container-width-small\n    );\n}\n\n.empty-list {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  gap: var(--app-components-alert-menu-button-spacing);\n\n  .icon {\n    height: 96px;\n    width: 96px;\n    color: var(--on-flat-neutral-color);\n  }\n\n  .empty-title {\n    color: var(--element-active-color);\n    @mixin font-body-active;\n  }\n\n  .empty-description {\n    color: var(--element-neutral-color);\n    @mixin font-body;\n    max-width: 344px;\n    text-align: center;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"alert-list-details.css.js","names":[],"sources":["../../../src/components/alert-list-details/alert-list-details.css?inline"],"sourcesContent":[".wrapper {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  user-select: none;\n}\n\n.alert-list {\n  min-height: 0;\n  flex-grow: 0;\n}\n\n.spacer {\n  flex-grow: 1;\n}\n\n.action {\n  display: flex;\n  height: var(--app-components-tool-bar-touch-target-size);\n  padding: 0px var(--app-components-alert-toolbar-margin-horizontal);\n  justify-content: space-between;\n  align-items: center;\n  flex-shrink: 0;\n  flex-grow: 0;\n  border-top: 1px solid var(--border-divider-color);\n  background: var(--container-section-color);\n  box-shadow: var(--shadow-flat);\n\n  .btn-group {\n    display: flex;\n  }\n}\n\nobc-table::part(grid) {\n  grid-template-columns: 1fr repeat(4, min-content);\n}\n\n.wrapper.small obc-table::part(grid) {\n  grid-template-columns: 1fr min-content var(\n      --app-components-alert-table-row-ack-container-width-small\n    );\n}\n\n.empty-list {\n  @mixin alert-list-empty;\n\n  .icon {\n    color: var(--on-flat-neutral-color);\n  }\n}\n"],"mappings":""}

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

@@ -77,52 +77,13 @@ var alert_menu_default = css`* {
     min-width: 120px;
   }
 
-.empty-list {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  gap: var(--app-components-alert-menu-button-spacing);
-}
-
-.empty-list .icon {
-    height: 96px;
-    width: 96px;
-  }
-
-.empty-list .empty-title {
-    color: var(--element-active-color);
-    font-family: var(--global-typography-font-family);
-    font-weight: var(--global-typography-ui-body-active-font-weight);
-    font-size: var(--global-typography-ui-body-active-font-size);
-    line-height: var(--global-typography-ui-body-active-line-height);
-    font-feature-settings:
-    "liga" off,
-    "clig" off,
-    "ss04" on;
-  }
-
-.empty-list .empty-description {
-    color: var(--element-neutral-color);
-    font-family: var(--global-typography-font-family);
-    font-weight: var(--global-typography-ui-body-font-weight);
-    font-size: var(--global-typography-ui-body-font-size);
-    line-height: var(--global-typography-ui-body-line-height);
-    font-feature-settings:
-    "liga" off,
-    "clig" off,
-    "ss04" on;
-    max-width: 344px;
-    text-align: center;
-  }
-
 ::slotted(*) {
   display: block;
   will-change: transform;
 }
 
-.alert-list.all ::slotted([shelved]) {
+.alert-list.all ::slotted([shelved]),
+.alert-list.all ::slotted([status="rectified-unacknowledged"]) {
   display: none;
 }
 
@@ -130,7 +91,7 @@ var alert_menu_default = css`* {
   display: none;
 }
 
-.alert-list.unacked ::slotted(:not([status="unacknowledged"])),.alert-list.unacked ::slotted([shelved]) {
+.alert-list.unacked ::slotted(:not([status="unacknowledged"]):not([status="rectified-unacknowledged"])),.alert-list.unacked ::slotted([shelved]) {
     display: none;
   }
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"alert-menu.css.js","names":[],"sources":["../../../src/components/alert-menu/alert-menu.css?inline"],"sourcesContent":["@mixin soft-dismiss;\n\n* {\n  box-sizing: border-box;\n}\n\n.wrapper {\n  width: var(--app-components-alert-menu-width);\n  height: 560px;\n  max-width: 100vw;\n}\n\n.container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.alert-list {\n  flex-shrink: 1;\n  flex-grow: 1;\n  min-height: 0;\n  overflow: hidden;\n  position: relative;\n}\n\n.action {\n  display: flex;\n  min-height: var(--app-components-alert-menu-footer-container-height);\n  padding: calc(\n      (\n          var(--app-components-alert-menu-footer-container-height) -\n            var(--ui-components-button-touch-target-size) - 2px\n        ) /\n        2\n    )\n    var(--app-components-alert-menu-footer-padding-horizontal);\n  align-items: center;\n  gap: var(--app-components-alert-menu-button-spacing);\n  flex-shrink: 0;\n  flex-wrap: wrap;\n  align-self: stretch;\n  border-top: 1px solid var(--border-divider-color);\n  background: var(--container-global-color);\n\n  obc-button::part(visible-wrapper) {\n    height: 100%;\n  }\n\n  .btn {\n    flex: 1;\n    min-width: 120px;\n  }\n}\n\n.empty-list {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  gap: var(--app-components-alert-menu-button-spacing);\n\n  .icon {\n    height: 96px;\n    width: 96px;\n  }\n\n  .empty-title {\n    color: var(--element-active-color);\n    @mixin font-body-active;\n  }\n\n  .empty-description {\n    color: var(--element-neutral-color);\n    @mixin font-body;\n    max-width: 344px;\n    text-align: center;\n  }\n}\n\n::slotted(*) {\n  display: block;\n  will-change: transform;\n}\n\n.alert-list.all ::slotted([shelved]) {\n  display: none;\n}\n\n.alert-list.shelved ::slotted(:not([shelved])) {\n  display: none;\n}\n\n.alert-list.unacked {\n  ::slotted(:not([status=\"unacknowledged\"])),\n  ::slotted([shelved]) {\n    display: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"alert-menu.css.js","names":[],"sources":["../../../src/components/alert-menu/alert-menu.css?inline"],"sourcesContent":["@mixin soft-dismiss;\n\n* {\n  box-sizing: border-box;\n}\n\n.wrapper {\n  width: var(--app-components-alert-menu-width);\n  height: 560px;\n  max-width: 100vw;\n}\n\n.container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.alert-list {\n  flex-shrink: 1;\n  flex-grow: 1;\n  min-height: 0;\n  overflow: hidden;\n  position: relative;\n}\n\n.action {\n  display: flex;\n  min-height: var(--app-components-alert-menu-footer-container-height);\n  padding: calc(\n      (\n          var(--app-components-alert-menu-footer-container-height) -\n            var(--ui-components-button-touch-target-size) - 2px\n        ) /\n        2\n    )\n    var(--app-components-alert-menu-footer-padding-horizontal);\n  align-items: center;\n  gap: var(--app-components-alert-menu-button-spacing);\n  flex-shrink: 0;\n  flex-wrap: wrap;\n  align-self: stretch;\n  border-top: 1px solid var(--border-divider-color);\n  background: var(--container-global-color);\n\n  obc-button::part(visible-wrapper) {\n    height: 100%;\n  }\n\n  .btn {\n    flex: 1;\n    min-width: 120px;\n  }\n}\n\n::slotted(*) {\n  display: block;\n  will-change: transform;\n}\n\n.alert-list.all ::slotted([shelved]),\n.alert-list.all ::slotted([status=\"rectified-unacknowledged\"]) {\n  display: none;\n}\n\n.alert-list.shelved ::slotted(:not([shelved])) {\n  display: none;\n}\n\n.alert-list.unacked {\n  ::slotted(\n    :not([status=\"unacknowledged\"]):not([status=\"rectified-unacknowledged\"])\n  ),\n  ::slotted([shelved]) {\n    display: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
 import { PopoverController } from '../../internal/popover-controller.js';
 import '../button/button.js';
 import '../../icons/icon-chevron-right-google.js';
@@ -16,6 +16,14 @@ export type ObcAckAllVisibleClickEvent = CustomEvent<{
     }[];
     tabName: 'shelved' | 'unacked' | 'all';
 }>;
+/** One tab of an alert menu: its name, its label and its empty state. */
+export interface AlertMenuTab {
+    /** Names the tab in `ack-all-visible-click` and in the `empty-<tab>-*` slots. */
+    name: string;
+    title: string;
+    emptyTitle: string;
+    emptyIcon: TemplateResult;
+}
 /**
  * `<obc-alert-menu>` – A tabbed alert summary panel for displaying, acknowledging, and managing active alerts.
  *
@@ -23,7 +31,7 @@ export type ObcAckAllVisibleClickEvent = CustomEvent<{
  *
  * ### Features
  * - **Tabbed organization:** Switch between "Unacked", "Active", and (optionally) "Shelved" tabs for focused alert review.
- * - **Alert filtering:** Each tab displays only relevant alerts (e.g., "Unacked" shows only unacknowledged, non-shelved items).
+ * - **Alert filtering:** Each tab displays only relevant alerts: "Unacked" shows the non-shelved items still waiting for acknowledgment (`unacknowledged` or `rectified-unacknowledged`), "Active" every non-shelved item except the `rectified-unacknowledged` ones. A subclass changes the tabs and the list through the `tabs` and `renderList` hooks.
  * - **Bulk actions:** "ACK visible" button allows acknowledging all currently visible (filtered) alerts at once.
  * - **Silence and navigation:** Dedicated buttons to silence alerts or jump to the full alert list.
  * - **Dynamic content:** Supports any number of `<obc-alert-menu-item>` children, with automatic empty-state messaging and icons per tab.
@@ -117,13 +125,27 @@ export declare class ObcAlertMenu extends LitElement {
     showSilenceButton: boolean;
     /** If true, shows the "Alerts" navigation button in the action bar. When hidden, the "ACK visible" button expands to fill the freed space. */
     showAlertListButton: boolean;
-    private _selectedTabIndex;
+    /** The `name` of the tab the user picked; the second tab shows until then. */
+    private _selectedTabName?;
     private alertList;
     private handleAckAllVisibleClick;
     private onTabChange;
-    private getSelectedTab;
-    render(): import('lit-html').TemplateResult<1>;
-    static styles: import('lit').CSSResult;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    /** Whether the menu offers "ACK visible" at all; `canAckAll` enables it. */
+    protected get offersAckAll(): boolean;
+    /** The tabs in display order; the menu opens on the second one. */
+    protected get tabs(): AlertMenuTab[];
+    /** Where the selected tab sits in `tabs`: the one the user picked, else the second. */
+    private selectedTabIndex;
+    private get selectedTab();
+    /**
+     * The list that shows the selected tab's items. The CSS hides the items the
+     * tab leaves out; the filter tells the list which ones those are.
+     */
+    protected renderList(tab: AlertMenuTab, content: TemplateResult): TemplateResult;
+    private tabFilter;
+    render(): TemplateResult<1>;
+    static styles: CSSResultGroup;
 }
 declare global {
     interface HTMLElementTagNameMap {