@oicl/openbridge-webcomponents 2.0.0-next.62 → 2.0.0-next.64

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

@@ -54,33 +54,33 @@ const compentStyle = css`
     outline-style: dashed;
   }
 
-.wrapper.alarm,.wrapper.isa-high {
+.wrapper.alarm,.wrapper.level-high {
     --bg-color: var(--alert-alarm-color);
     color: var(--on-alarm-active-color);
   }
 
-.wrapper.warning,.wrapper.isa-medium {
+.wrapper.warning,.wrapper.level-medium {
     --bg-color: var(--alert-warning-color);
     --blink-on: var(--warning-blink-on);
     color: var(--on-warning-active-color);
   }
 
-.wrapper.caution,.wrapper.isa-low {
+.wrapper.caution,.wrapper.level-low {
     --bg-color: var(--alert-caution-color);
     --blink-on: 1;
     color: var(--on-caution-active-color);
   }
 
-.wrapper.isa-low {
+.wrapper.level-low {
     --blink-on: var(--low-blink-on);
   }
 
-.wrapper.isa-critical {
+.wrapper.level-critical {
     --bg-color: var(--critical-enabled-background-color);
     color: var(--on-critical-active-color);
   }
 
-.wrapper.isa-diagnostic {
+.wrapper.level-diagnostic {
     --bg-color: var(--notification-enabled-background-color);
     color: var(--on-notification-active-color);
   }

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

@@ -65,7 +65,7 @@ export interface AlertFrameConfig {
  *   - `large-side-flip`: Adds a larger, vertical side flap with a status icon and optional custom icon.
  *   - `bottom-flip`: Adds a bottom flap with a status icon, label, and timer slots.
  * - **Thickness options:** Choose between `small` (thin border) and `large` (thick border) for visual emphasis.
- * - **Status indication:** Displays different color schemes and icons for the legacy statuses (`alarm`, `warning`, `caution`) and the ISA statuses (`isa-critical`, `isa-high`, `isa-medium`, `isa-low`, `isa-diagnostic`).
+ * - **Status indication:** Displays different color schemes and icons for the legacy statuses (`alarm`, `warning`, `caution`) and the level statuses (`level-critical`, `level-high`, `level-medium`, `level-low`, `level-diagnostic`).
  * - **Acknowledgement mode:** The `mode` property reflects the alert lifecycle state — `acked-active` (default), `unacked-active`, and `unacked-rectified` — driving the blinking/animation treatment of the frame.
  * - **Content wrapping:** When `wrapContent` is true, the frame wraps and sizes itself to its slotted content rather than overlaying a fixed region.
  * - **Customizable corners:** Each corner can be set to a sharp (non-rounded) edge for integration with other UI elements.
@@ -83,7 +83,7 @@ export interface AlertFrameConfig {
  *   - `large-side-flip`: Large vertical right-side flap with status icon and optional custom icon.
  *   - `bottom-flip`: Bottom flap with status icon, label, and timer.
  * - **Thickness:** `small` (default) or `large` for border width.
- * - **Status:** `alarm`, `warning`, `caution`, or the ISA severities (`isa-critical`, `isa-high`, `isa-medium`, `isa-low`, `isa-diagnostic`)—affects color and icon.
+ * - **Status:** `alarm`, `warning`, `caution`, or the level severities (`level-critical`, `level-high`, `level-medium`, `level-low`, `level-diagnostic`)—affects color and icon.
  * - **Mode:** `acked-active` (default), `unacked-active`, or `unacked-rectified`—affects blinking/animation.
  * - **Corner Customization:** Each corner can be made sharp (not rounded) via boolean properties.
  *
@@ -99,7 +99,7 @@ export interface AlertFrameConfig {
  * ### Properties and Attributes
  * - `type`: Selects the visual variant/flap style. Default is `small-side-flip`.
  * - `thickness`: Controls border thickness (`small` or `large`). Default is `small`.
- * - `status`: Sets the alert status and color/icon (`alarm`, `warning`, `caution`, or the `isa-*` severities). Default is `alarm`.
+ * - `status`: Sets the alert status and color/icon (`alarm`, `warning`, `caution`, or the `level-*` severities). Default is `alarm`.
  * - `mode`: Acknowledgement lifecycle state (`acked-active`, `unacked-active`, `unacked-rectified`) controlling blinking/animation. Default is `acked-active`.
  * - `wrapContent`: When true, the frame wraps and sizes to its slotted content instead of overlaying a fixed region. Default is `false`.
  * - `sharpEdgeTopLeft`, `sharpEdgeTopRight`, `sharpEdgeBottomLeft`, `sharpEdgeBottomRight`: Boolean flags to make each corner sharp instead of rounded.
@@ -152,7 +152,7 @@ export declare class ObcAlertFrame extends LitElement {
      * - `alarm`: Highest severity (default).
      * - `warning`: Medium severity.
      * - `caution`: Lower severity.
-     * - `isa-critical`, `isa-high`, `isa-medium`, `isa-low`, `isa-diagnostic`: ISA severity levels, styled to match their legacy equivalents.
+     * - `level-critical`, `level-high`, `level-medium`, `level-low`, `level-diagnostic`: level severity levels, styled to match their legacy equivalents.
      */
     status: AlertType;
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"alert-frame.js","sources":["../../../src/components/alert-frame/alert-frame.ts"],"sourcesContent":["import {\n  LitElement,\n  html,\n  unsafeCSS,\n  nothing,\n  TemplateResult,\n  HTMLTemplateResult,\n} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport compentStyle from './alert-frame.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport '../../icons/icon-alarm-badge.js';\nimport '../../icons/icon-warning-badge.js';\nimport '../../icons/icon-caution-badge.js';\nimport './critical-badge.js';\nimport './diagnostic-badge.js';\nimport {customElement} from '../../decorator.js';\nimport {AlertType} from '../../types.js';\nimport {\n  getAlertBadgeComponent,\n  AlertBadgeComponent,\n} from '../../alert-severity.js';\n\nexport {AlertType as ObcAlertFrameStatus} from '../../types.js';\n\n/**\n * Enum representing the available frame styles for an alert component.\n *\n * - Regular (\"regular\"): Standard alert frame layout.\n * - SmallSideFlip (\"small-side-flip\"): Flipped frame with a small side edge.\n * - LargeSideFlip (\"large-side-flip\"): Flipped frame with a large side edge.\n * - BottomFlip (\"bottom-flip\"): Frame flipped to the bottom position.\n */\nexport enum ObcAlertFrameType {\n  Regular = 'regular',\n  SmallSideFlip = 'small-side-flip',\n  LargeSideFlip = 'large-side-flip',\n  BottomFlip = 'bottom-flip',\n  TopFlip = 'top-flip',\n}\n\n/**\n * Thickness options for the alert frame border.\n * - `small`: Thin border (default).\n * - `large`: Thick border for higher emphasis.\n */\nexport enum ObcAlertFrameThickness {\n  Small = 'small',\n  Large = 'large',\n}\n\nexport enum ObcAlertFrameMode {\n  ackedActive = 'acked-active',\n  unackedActive = 'unacked-active',\n  unackedRectified = 'unacked-rectified',\n}\n\n/**\n * Text size options for flip-flap typography.\n * - `regular`: Standard text size (default).\n * - `large`: Larger text for increased visibility.\n */\nexport enum AlertFrameTextSize {\n  Regular = 'regular',\n  Large = 'large',\n}\n\nexport interface AlertFrameConfig {\n  type?: ObcAlertFrameType;\n  thickness?: ObcAlertFrameThickness;\n  status?: AlertType;\n  mode?: ObcAlertFrameMode;\n  textSize?: AlertFrameTextSize;\n  showIcon?: boolean;\n  showAlertCategoryIcon?: boolean;\n}\n\n/**\n * `<obc-alert-frame>` – A bordered frame component for visually emphasizing alert or status messages.\n *\n * The alert frame provides a prominent outline and optional \"flap\" with status icon to draw attention to critical information or UI regions. It supports multiple visual variants and thicknesses, and can be configured to indicate different alert statuses (alarm, warning, caution). The component is designed to wrap content and visually distinguish it from the surrounding UI.\n *\n * ### Features\n * - **Variants (type):**\n *   - `regular`: Standard outlined frame with no flap or icon.\n *   - `small-side-flip`: Adds a small side flap with a status icon at the top right.\n *   - `large-side-flip`: Adds a larger, vertical side flap with a status icon and optional custom icon.\n *   - `bottom-flip`: Adds a bottom flap with a status icon, label, and timer slots.\n * - **Thickness options:** Choose between `small` (thin border) and `large` (thick border) for visual emphasis.\n * - **Status indication:** Displays different color schemes and icons for the legacy statuses (`alarm`, `warning`, `caution`) and the ISA statuses (`isa-critical`, `isa-high`, `isa-medium`, `isa-low`, `isa-diagnostic`).\n * - **Acknowledgement mode:** The `mode` property reflects the alert lifecycle state — `acked-active` (default), `unacked-active`, and `unacked-rectified` — driving the blinking/animation treatment of the frame.\n * - **Content wrapping:** When `wrapContent` is true, the frame wraps and sizes itself to its slotted content rather than overlaying a fixed region.\n * - **Customizable corners:** Each corner can be set to a sharp (non-rounded) edge for integration with other UI elements.\n * - **Slot-based content:** Supports custom icons, labels, and timers in flap variants via named slots.\n *\n * ### Usage Guidelines\n * Use `obc-alert-frame` to highlight important content, such as alerts, warnings, or status panels. The flap variants are ideal for drawing extra attention to urgent or time-sensitive information, while the regular type provides a subtle but clear border. Choose the status to match the severity of the message (alarm, warning, caution). Adjust thickness for visual hierarchy—use large for high-priority alerts and small for less critical notices.\n *\n * **TODO(designer):** Provide guidance on when to use each flap type (small-side-flip, large-side-flip, bottom-flip) and recommended scenarios for sharp edge usage.\n *\n * ### Features/Variants\n * - **Type (Visual Variant):**\n *   - `regular`: Simple outlined frame, no flap or icon.\n *   - `small-side-flip`: Small right-side flap with status icon.\n *   - `large-side-flip`: Large vertical right-side flap with status icon and optional custom icon.\n *   - `bottom-flip`: Bottom flap with status icon, label, and timer.\n * - **Thickness:** `small` (default) or `large` for border width.\n * - **Status:** `alarm`, `warning`, `caution`, or the ISA severities (`isa-critical`, `isa-high`, `isa-medium`, `isa-low`, `isa-diagnostic`)—affects color and icon.\n * - **Mode:** `acked-active` (default), `unacked-active`, or `unacked-rectified`—affects blinking/animation.\n * - **Corner Customization:** Each corner can be made sharp (not rounded) via boolean properties.\n *\n * ### Slots and Content Structure\n *\n * | Slot Name | Renders When... | Purpose |\n * |-----------|-----------------|---------|\n * | (default) | Always | Main content inside the alert frame. |\n * | icon | `large-side-flip` or `bottom-flip` | Custom icon displayed in the flap (in addition to status icon). |\n * | label | `bottom-flip` only | Label text shown in the bottom flap. |\n * | timer | `bottom-flip` only | Timer or time label in the bottom flap. |\n *\n * ### Properties and Attributes\n * - `type`: Selects the visual variant/flap style. Default is `small-side-flip`.\n * - `thickness`: Controls border thickness (`small` or `large`). Default is `small`.\n * - `status`: Sets the alert status and color/icon (`alarm`, `warning`, `caution`, or the `isa-*` severities). Default is `alarm`.\n * - `mode`: Acknowledgement lifecycle state (`acked-active`, `unacked-active`, `unacked-rectified`) controlling blinking/animation. Default is `acked-active`.\n * - `wrapContent`: When true, the frame wraps and sizes to its slotted content instead of overlaying a fixed region. Default is `false`.\n * - `sharpEdgeTopLeft`, `sharpEdgeTopRight`, `sharpEdgeBottomLeft`, `sharpEdgeBottomRight`: Boolean flags to make each corner sharp instead of rounded.\n *\n * ### Best Practices and Constraints\n * - Use the status property to match the severity of the alert.\n * - Only use the bottom-flip variant when both label and timer are relevant.\n * - For visual consistency, align sharp edge settings with adjacent UI elements.\n * - The default slot is for the main content; use named slots for icons, labels, and timers as needed.\n *\n * ### Example:\n * ```\n * <obc-alert-frame\n *   type=\"bottom-flip\"\n *   thickness=\"large\"\n *   status=\"warning\"\n *   sharpEdgeTopLeft\n * >\n *   <obi-placeholder slot=\"icon\"></obi-placeholder>\n *   <div slot=\"label\">Low Battery</div>\n *   <div slot=\"timer\">00:15</div>\n *   <div>Critical system message goes here.</div>\n * </obc-alert-frame>\n * ```\n *\n * @slot - Default slot for main alert content.\n * @slot icon - Custom icon for the flap (large-side-flip, bottom-flip).\n * @slot label - Label text for the bottom flap (bottom-flip only).\n * @slot timer - Timer or time label for the bottom flap (bottom-flip only).\n */\n@customElement('obc-alert-frame')\nexport class ObcAlertFrame extends LitElement {\n  /**\n   * Visual variant of the alert frame.\n   * - `regular`: Outlined frame only.\n   * - `small-side-flip`: Small right-side flap with status icon.\n   * - `large-side-flip`: Large vertical right-side flap with status icon and optional custom icon.\n   * - `bottom-flip`: Bottom flap with status icon, label, and timer.\n   *\n   * Default: `small-side-flip`\n   */\n  @property({type: String}) type: ObcAlertFrameType =\n    ObcAlertFrameType.SmallSideFlip;\n\n  /**\n   * Border thickness of the alert frame.\n   * - `small`: Thin border (default).\n   * - `large`: Thick border for higher emphasis.\n   */\n  @property({type: String}) thickness: ObcAlertFrameThickness =\n    ObcAlertFrameThickness.Small;\n\n  /**\n   * Status of the alert, controlling color scheme and icon.\n   * - `alarm`: Highest severity (default).\n   * - `warning`: Medium severity.\n   * - `caution`: Lower severity.\n   * - `isa-critical`, `isa-high`, `isa-medium`, `isa-low`, `isa-diagnostic`: ISA severity levels, styled to match their legacy equivalents.\n   */\n  @property({type: String}) status: AlertType = AlertType.Alarm;\n\n  /**\n   * Acknowledgement lifecycle state, controlling the frame's blinking/animation.\n   * - `acked-active`: Active and acknowledged (default); no blinking.\n   * - `unacked-active`: Active and not yet acknowledged; blinks.\n   * - `unacked-rectified`: Condition cleared but not yet acknowledged.\n   */\n  @property({type: String}) mode: ObcAlertFrameMode =\n    ObcAlertFrameMode.ackedActive;\n\n  /**\n   * When true, the frame wraps and sizes itself to its slotted content instead\n   * of overlaying a fixed region. Reflected to an attribute for CSS styling.\n   */\n  @property({type: Boolean, reflect: true}) wrapContent: boolean = false;\n\n  /**\n   * If true, the top-left corner will be sharp (not rounded).\n   */\n  @property({type: Boolean}) sharpEdgeTopLeft: boolean = false;\n\n  /**\n   * If true, the top-right corner will be sharp (not rounded).\n   */\n  @property({type: Boolean}) sharpEdgeTopRight: boolean = false;\n\n  /**\n   * If true, the bottom-left corner will be sharp (not rounded).\n   */\n  @property({type: Boolean}) sharpEdgeBottomLeft: boolean = false;\n\n  /**\n   * If true, the bottom-right corner will be sharp (not rounded).\n   */\n  @property({type: Boolean}) sharpEdgeBottomRight: boolean = false;\n\n  @property({type: String}) textSize: AlertFrameTextSize =\n    AlertFrameTextSize.Regular;\n\n  @property({type: Boolean}) showIcon: boolean = false;\n  @property({type: Boolean, attribute: false}) showAlertCategoryIcon: boolean =\n    true;\n\n  override render() {\n    return html`\n      <div\n        class=${classMap({\n          wrapper: true,\n          'wrap-content': this.wrapContent,\n          ['thickness-' + this.thickness]: true,\n          [this.type]: true,\n          [this.status]: true,\n          ['text-size-' + this.textSize]: true,\n          'sharp-edge-top-left': this.sharpEdgeTopLeft,\n          'sharp-edge-top-right': this.sharpEdgeTopRight,\n          'sharp-edge-bottom-left': this.sharpEdgeBottomLeft,\n          'sharp-edge-bottom-right': this.sharpEdgeBottomRight,\n          [this.mode]: true,\n        })}\n      >\n        <slot></slot>\n        ${this.flap()}\n      </div>\n    `;\n  }\n\n  private flap() {\n    if (this.type === ObcAlertFrameType.Regular) {\n      return nothing;\n    }\n\n    if (\n      this.type === ObcAlertFrameType.SmallSideFlip &&\n      !this.showAlertCategoryIcon\n    ) {\n      return nothing;\n    }\n\n    if (\n      this.type === ObcAlertFrameType.LargeSideFlip &&\n      !this.showIcon &&\n      !this.showAlertCategoryIcon\n    ) {\n      return nothing;\n    }\n\n    let icon: TemplateResult | typeof nothing;\n    if (!this.showAlertCategoryIcon) {\n      icon = nothing;\n    } else {\n      icon = this.renderBadgeIcon();\n    }\n\n    if (this.type === ObcAlertFrameType.SmallSideFlip) {\n      return html`<div class=\"flap small\">\n        ${icon}\n        <div class=\"mask up\"></div>\n      </div>`;\n    }\n    if (this.type === ObcAlertFrameType.LargeSideFlip) {\n      return html`<div class=\"flap large\">\n        ${icon}\n        ${this.showIcon\n          ? html`<div class=\"icon\"><slot name=\"icon\"></slot></div>`\n          : nothing}\n        <div class=\"mask up\"></div>\n        <div class=\"mask down\"></div>\n      </div>`;\n    }\n    if (\n      this.type === ObcAlertFrameType.BottomFlip ||\n      this.type === ObcAlertFrameType.TopFlip\n    ) {\n      return html`<div\n        class=\"flap ${this.type === ObcAlertFrameType.BottomFlip\n          ? 'bottom'\n          : 'top'}\"\n      >\n        ${icon}\n        ${this.showIcon\n          ? html`<div class=\"icon\"><slot name=\"icon\"></slot></div>`\n          : nothing}\n        <div class=\"label\"><slot name=\"label\"></slot></div>\n        <div class=\"spacer\"></div>\n        <div class=\"timer\"><slot name=\"timer\"></slot></div>\n        <div class=\"mask right\"></div>\n        <div class=\"mask left\"></div>\n      </div>`;\n    }\n    console.error('Unknown type of alert frame:', this.type);\n    return nothing;\n  }\n\n  private renderBadgeIcon(): TemplateResult {\n    switch (getAlertBadgeComponent(this.status)) {\n      case AlertBadgeComponent.Critical:\n        return html`<obi-critical-badge\n          class=\"icon badge\"\n        ></obi-critical-badge>`;\n      case AlertBadgeComponent.Warning:\n        return html`<obi-warning-badge class=\"icon badge\"></obi-warning-badge>`;\n      case AlertBadgeComponent.Caution:\n        return html`<obi-caution-badge class=\"icon badge\"></obi-caution-badge>`;\n      case AlertBadgeComponent.Diagnostic:\n        return html`<obi-diagnostic-badge\n          class=\"icon badge\"\n        ></obi-diagnostic-badge>`;\n      default:\n        return html`<obi-alarm-badge class=\"icon badge\"></obi-alarm-badge>`;\n    }\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\nexport function wrapWithAlertFrame(\n  options: AlertFrameConfig | boolean | undefined,\n  content: HTMLTemplateResult\n): HTMLTemplateResult {\n  if (typeof options !== 'object' || options === null) {\n    return content;\n  }\n  return html`<obc-alert-frame\n    .type=${options.type ?? ObcAlertFrameType.SmallSideFlip}\n    .thickness=${options.thickness ?? ObcAlertFrameThickness.Small}\n    .status=${options.status ?? AlertType.Alarm}\n    .mode=${options.mode ?? ObcAlertFrameMode.ackedActive}\n    .showIcon=${options.showIcon ?? false}\n    .showAlertCategoryIcon=${options.showAlertCategoryIcon ?? true}\n    .wrapContent=${true}\n    >${content}</obc-alert-frame\n  >`;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-alert-frame': ObcAlertFrame;\n  }\n}\n"],"names":["ObcAlertFrameType","ObcAlertFrameThickness","ObcAlertFrameMode","AlertFrameTextSize"],"mappings":"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"}
+{"version":3,"file":"alert-frame.js","sources":["../../../src/components/alert-frame/alert-frame.ts"],"sourcesContent":["import {\n  LitElement,\n  html,\n  unsafeCSS,\n  nothing,\n  TemplateResult,\n  HTMLTemplateResult,\n} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport compentStyle from './alert-frame.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport '../../icons/icon-alarm-badge.js';\nimport '../../icons/icon-warning-badge.js';\nimport '../../icons/icon-caution-badge.js';\nimport './critical-badge.js';\nimport './diagnostic-badge.js';\nimport {customElement} from '../../decorator.js';\nimport {AlertType} from '../../types.js';\nimport {\n  getAlertBadgeComponent,\n  AlertBadgeComponent,\n} from '../../alert-severity.js';\n\nexport {AlertType as ObcAlertFrameStatus} from '../../types.js';\n\n/**\n * Enum representing the available frame styles for an alert component.\n *\n * - Regular (\"regular\"): Standard alert frame layout.\n * - SmallSideFlip (\"small-side-flip\"): Flipped frame with a small side edge.\n * - LargeSideFlip (\"large-side-flip\"): Flipped frame with a large side edge.\n * - BottomFlip (\"bottom-flip\"): Frame flipped to the bottom position.\n */\nexport enum ObcAlertFrameType {\n  Regular = 'regular',\n  SmallSideFlip = 'small-side-flip',\n  LargeSideFlip = 'large-side-flip',\n  BottomFlip = 'bottom-flip',\n  TopFlip = 'top-flip',\n}\n\n/**\n * Thickness options for the alert frame border.\n * - `small`: Thin border (default).\n * - `large`: Thick border for higher emphasis.\n */\nexport enum ObcAlertFrameThickness {\n  Small = 'small',\n  Large = 'large',\n}\n\nexport enum ObcAlertFrameMode {\n  ackedActive = 'acked-active',\n  unackedActive = 'unacked-active',\n  unackedRectified = 'unacked-rectified',\n}\n\n/**\n * Text size options for flip-flap typography.\n * - `regular`: Standard text size (default).\n * - `large`: Larger text for increased visibility.\n */\nexport enum AlertFrameTextSize {\n  Regular = 'regular',\n  Large = 'large',\n}\n\nexport interface AlertFrameConfig {\n  type?: ObcAlertFrameType;\n  thickness?: ObcAlertFrameThickness;\n  status?: AlertType;\n  mode?: ObcAlertFrameMode;\n  textSize?: AlertFrameTextSize;\n  showIcon?: boolean;\n  showAlertCategoryIcon?: boolean;\n}\n\n/**\n * `<obc-alert-frame>` – A bordered frame component for visually emphasizing alert or status messages.\n *\n * The alert frame provides a prominent outline and optional \"flap\" with status icon to draw attention to critical information or UI regions. It supports multiple visual variants and thicknesses, and can be configured to indicate different alert statuses (alarm, warning, caution). The component is designed to wrap content and visually distinguish it from the surrounding UI.\n *\n * ### Features\n * - **Variants (type):**\n *   - `regular`: Standard outlined frame with no flap or icon.\n *   - `small-side-flip`: Adds a small side flap with a status icon at the top right.\n *   - `large-side-flip`: Adds a larger, vertical side flap with a status icon and optional custom icon.\n *   - `bottom-flip`: Adds a bottom flap with a status icon, label, and timer slots.\n * - **Thickness options:** Choose between `small` (thin border) and `large` (thick border) for visual emphasis.\n * - **Status indication:** Displays different color schemes and icons for the legacy statuses (`alarm`, `warning`, `caution`) and the level statuses (`level-critical`, `level-high`, `level-medium`, `level-low`, `level-diagnostic`).\n * - **Acknowledgement mode:** The `mode` property reflects the alert lifecycle state — `acked-active` (default), `unacked-active`, and `unacked-rectified` — driving the blinking/animation treatment of the frame.\n * - **Content wrapping:** When `wrapContent` is true, the frame wraps and sizes itself to its slotted content rather than overlaying a fixed region.\n * - **Customizable corners:** Each corner can be set to a sharp (non-rounded) edge for integration with other UI elements.\n * - **Slot-based content:** Supports custom icons, labels, and timers in flap variants via named slots.\n *\n * ### Usage Guidelines\n * Use `obc-alert-frame` to highlight important content, such as alerts, warnings, or status panels. The flap variants are ideal for drawing extra attention to urgent or time-sensitive information, while the regular type provides a subtle but clear border. Choose the status to match the severity of the message (alarm, warning, caution). Adjust thickness for visual hierarchy—use large for high-priority alerts and small for less critical notices.\n *\n * **TODO(designer):** Provide guidance on when to use each flap type (small-side-flip, large-side-flip, bottom-flip) and recommended scenarios for sharp edge usage.\n *\n * ### Features/Variants\n * - **Type (Visual Variant):**\n *   - `regular`: Simple outlined frame, no flap or icon.\n *   - `small-side-flip`: Small right-side flap with status icon.\n *   - `large-side-flip`: Large vertical right-side flap with status icon and optional custom icon.\n *   - `bottom-flip`: Bottom flap with status icon, label, and timer.\n * - **Thickness:** `small` (default) or `large` for border width.\n * - **Status:** `alarm`, `warning`, `caution`, or the level severities (`level-critical`, `level-high`, `level-medium`, `level-low`, `level-diagnostic`)—affects color and icon.\n * - **Mode:** `acked-active` (default), `unacked-active`, or `unacked-rectified`—affects blinking/animation.\n * - **Corner Customization:** Each corner can be made sharp (not rounded) via boolean properties.\n *\n * ### Slots and Content Structure\n *\n * | Slot Name | Renders When... | Purpose |\n * |-----------|-----------------|---------|\n * | (default) | Always | Main content inside the alert frame. |\n * | icon | `large-side-flip` or `bottom-flip` | Custom icon displayed in the flap (in addition to status icon). |\n * | label | `bottom-flip` only | Label text shown in the bottom flap. |\n * | timer | `bottom-flip` only | Timer or time label in the bottom flap. |\n *\n * ### Properties and Attributes\n * - `type`: Selects the visual variant/flap style. Default is `small-side-flip`.\n * - `thickness`: Controls border thickness (`small` or `large`). Default is `small`.\n * - `status`: Sets the alert status and color/icon (`alarm`, `warning`, `caution`, or the `level-*` severities). Default is `alarm`.\n * - `mode`: Acknowledgement lifecycle state (`acked-active`, `unacked-active`, `unacked-rectified`) controlling blinking/animation. Default is `acked-active`.\n * - `wrapContent`: When true, the frame wraps and sizes to its slotted content instead of overlaying a fixed region. Default is `false`.\n * - `sharpEdgeTopLeft`, `sharpEdgeTopRight`, `sharpEdgeBottomLeft`, `sharpEdgeBottomRight`: Boolean flags to make each corner sharp instead of rounded.\n *\n * ### Best Practices and Constraints\n * - Use the status property to match the severity of the alert.\n * - Only use the bottom-flip variant when both label and timer are relevant.\n * - For visual consistency, align sharp edge settings with adjacent UI elements.\n * - The default slot is for the main content; use named slots for icons, labels, and timers as needed.\n *\n * ### Example:\n * ```\n * <obc-alert-frame\n *   type=\"bottom-flip\"\n *   thickness=\"large\"\n *   status=\"warning\"\n *   sharpEdgeTopLeft\n * >\n *   <obi-placeholder slot=\"icon\"></obi-placeholder>\n *   <div slot=\"label\">Low Battery</div>\n *   <div slot=\"timer\">00:15</div>\n *   <div>Critical system message goes here.</div>\n * </obc-alert-frame>\n * ```\n *\n * @slot - Default slot for main alert content.\n * @slot icon - Custom icon for the flap (large-side-flip, bottom-flip).\n * @slot label - Label text for the bottom flap (bottom-flip only).\n * @slot timer - Timer or time label for the bottom flap (bottom-flip only).\n */\n@customElement('obc-alert-frame')\nexport class ObcAlertFrame extends LitElement {\n  /**\n   * Visual variant of the alert frame.\n   * - `regular`: Outlined frame only.\n   * - `small-side-flip`: Small right-side flap with status icon.\n   * - `large-side-flip`: Large vertical right-side flap with status icon and optional custom icon.\n   * - `bottom-flip`: Bottom flap with status icon, label, and timer.\n   *\n   * Default: `small-side-flip`\n   */\n  @property({type: String}) type: ObcAlertFrameType =\n    ObcAlertFrameType.SmallSideFlip;\n\n  /**\n   * Border thickness of the alert frame.\n   * - `small`: Thin border (default).\n   * - `large`: Thick border for higher emphasis.\n   */\n  @property({type: String}) thickness: ObcAlertFrameThickness =\n    ObcAlertFrameThickness.Small;\n\n  /**\n   * Status of the alert, controlling color scheme and icon.\n   * - `alarm`: Highest severity (default).\n   * - `warning`: Medium severity.\n   * - `caution`: Lower severity.\n   * - `level-critical`, `level-high`, `level-medium`, `level-low`, `level-diagnostic`: level severity levels, styled to match their legacy equivalents.\n   */\n  @property({type: String}) status: AlertType = AlertType.Alarm;\n\n  /**\n   * Acknowledgement lifecycle state, controlling the frame's blinking/animation.\n   * - `acked-active`: Active and acknowledged (default); no blinking.\n   * - `unacked-active`: Active and not yet acknowledged; blinks.\n   * - `unacked-rectified`: Condition cleared but not yet acknowledged.\n   */\n  @property({type: String}) mode: ObcAlertFrameMode =\n    ObcAlertFrameMode.ackedActive;\n\n  /**\n   * When true, the frame wraps and sizes itself to its slotted content instead\n   * of overlaying a fixed region. Reflected to an attribute for CSS styling.\n   */\n  @property({type: Boolean, reflect: true}) wrapContent: boolean = false;\n\n  /**\n   * If true, the top-left corner will be sharp (not rounded).\n   */\n  @property({type: Boolean}) sharpEdgeTopLeft: boolean = false;\n\n  /**\n   * If true, the top-right corner will be sharp (not rounded).\n   */\n  @property({type: Boolean}) sharpEdgeTopRight: boolean = false;\n\n  /**\n   * If true, the bottom-left corner will be sharp (not rounded).\n   */\n  @property({type: Boolean}) sharpEdgeBottomLeft: boolean = false;\n\n  /**\n   * If true, the bottom-right corner will be sharp (not rounded).\n   */\n  @property({type: Boolean}) sharpEdgeBottomRight: boolean = false;\n\n  @property({type: String}) textSize: AlertFrameTextSize =\n    AlertFrameTextSize.Regular;\n\n  @property({type: Boolean}) showIcon: boolean = false;\n  @property({type: Boolean, attribute: false}) showAlertCategoryIcon: boolean =\n    true;\n\n  override render() {\n    return html`\n      <div\n        class=${classMap({\n          wrapper: true,\n          'wrap-content': this.wrapContent,\n          ['thickness-' + this.thickness]: true,\n          [this.type]: true,\n          [this.status]: true,\n          ['text-size-' + this.textSize]: true,\n          'sharp-edge-top-left': this.sharpEdgeTopLeft,\n          'sharp-edge-top-right': this.sharpEdgeTopRight,\n          'sharp-edge-bottom-left': this.sharpEdgeBottomLeft,\n          'sharp-edge-bottom-right': this.sharpEdgeBottomRight,\n          [this.mode]: true,\n        })}\n      >\n        <slot></slot>\n        ${this.flap()}\n      </div>\n    `;\n  }\n\n  private flap() {\n    if (this.type === ObcAlertFrameType.Regular) {\n      return nothing;\n    }\n\n    if (\n      this.type === ObcAlertFrameType.SmallSideFlip &&\n      !this.showAlertCategoryIcon\n    ) {\n      return nothing;\n    }\n\n    if (\n      this.type === ObcAlertFrameType.LargeSideFlip &&\n      !this.showIcon &&\n      !this.showAlertCategoryIcon\n    ) {\n      return nothing;\n    }\n\n    let icon: TemplateResult | typeof nothing;\n    if (!this.showAlertCategoryIcon) {\n      icon = nothing;\n    } else {\n      icon = this.renderBadgeIcon();\n    }\n\n    if (this.type === ObcAlertFrameType.SmallSideFlip) {\n      return html`<div class=\"flap small\">\n        ${icon}\n        <div class=\"mask up\"></div>\n      </div>`;\n    }\n    if (this.type === ObcAlertFrameType.LargeSideFlip) {\n      return html`<div class=\"flap large\">\n        ${icon}\n        ${this.showIcon\n          ? html`<div class=\"icon\"><slot name=\"icon\"></slot></div>`\n          : nothing}\n        <div class=\"mask up\"></div>\n        <div class=\"mask down\"></div>\n      </div>`;\n    }\n    if (\n      this.type === ObcAlertFrameType.BottomFlip ||\n      this.type === ObcAlertFrameType.TopFlip\n    ) {\n      return html`<div\n        class=\"flap ${this.type === ObcAlertFrameType.BottomFlip\n          ? 'bottom'\n          : 'top'}\"\n      >\n        ${icon}\n        ${this.showIcon\n          ? html`<div class=\"icon\"><slot name=\"icon\"></slot></div>`\n          : nothing}\n        <div class=\"label\"><slot name=\"label\"></slot></div>\n        <div class=\"spacer\"></div>\n        <div class=\"timer\"><slot name=\"timer\"></slot></div>\n        <div class=\"mask right\"></div>\n        <div class=\"mask left\"></div>\n      </div>`;\n    }\n    console.error('Unknown type of alert frame:', this.type);\n    return nothing;\n  }\n\n  private renderBadgeIcon(): TemplateResult {\n    switch (getAlertBadgeComponent(this.status)) {\n      case AlertBadgeComponent.Critical:\n        return html`<obi-critical-badge\n          class=\"icon badge\"\n        ></obi-critical-badge>`;\n      case AlertBadgeComponent.Warning:\n        return html`<obi-warning-badge class=\"icon badge\"></obi-warning-badge>`;\n      case AlertBadgeComponent.Caution:\n        return html`<obi-caution-badge class=\"icon badge\"></obi-caution-badge>`;\n      case AlertBadgeComponent.Diagnostic:\n        return html`<obi-diagnostic-badge\n          class=\"icon badge\"\n        ></obi-diagnostic-badge>`;\n      default:\n        return html`<obi-alarm-badge class=\"icon badge\"></obi-alarm-badge>`;\n    }\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\nexport function wrapWithAlertFrame(\n  options: AlertFrameConfig | boolean | undefined,\n  content: HTMLTemplateResult\n): HTMLTemplateResult {\n  if (typeof options !== 'object' || options === null) {\n    return content;\n  }\n  return html`<obc-alert-frame\n    .type=${options.type ?? ObcAlertFrameType.SmallSideFlip}\n    .thickness=${options.thickness ?? ObcAlertFrameThickness.Small}\n    .status=${options.status ?? AlertType.Alarm}\n    .mode=${options.mode ?? ObcAlertFrameMode.ackedActive}\n    .showIcon=${options.showIcon ?? false}\n    .showAlertCategoryIcon=${options.showAlertCategoryIcon ?? true}\n    .wrapContent=${true}\n    >${content}</obc-alert-frame\n  >`;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-alert-frame': ObcAlertFrame;\n  }\n}\n"],"names":["ObcAlertFrameType","ObcAlertFrameThickness","ObcAlertFrameMode","AlertFrameTextSize"],"mappings":"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"}

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

@@ -83,7 +83,7 @@ let ObcAlertIcon = class extends LitElement {
     return getBamAlertTypeForBlinking(this.type);
   }
   get icon() {
-    if (this.type === AlertType.IsaCritical) {
+    if (this.type === AlertType.LevelCritical) {
       return mapping[
         "critical"
         /* Critical */
@@ -142,10 +142,10 @@ let ObcAlertIcon = class extends LitElement {
     }
   }
   renderStaticIcon() {
-    if (this.type === AlertType.Caution || this.type === AlertType.IsaLow) {
+    if (this.type === AlertType.Caution || this.type === AlertType.LevelLow) {
       return html`<obi-caution-color-iec usecsscolor></obi-caution-color-iec>`;
     }
-    if (this.type === AlertType.IsaDiagnostic) {
+    if (this.type === AlertType.LevelDiagnostic) {
       return html`<obi-diagnostic-badge
         style="color: var(--alert-diagnostic-color);"
       ></obi-diagnostic-badge>`;
@@ -159,7 +159,7 @@ let ObcAlertIcon = class extends LitElement {
     if (this.outline) {
       return html`<div class="wrapper">${this.renderOutlineIcon()}</div>`;
     }
-    if (supportsBlinking(this.type) && !(this.type === AlertType.IsaLow)) {
+    if (supportsBlinking(this.type) && !(this.type === AlertType.LevelLow)) {
       const icons = this.icon;
       if (!icons) {
         throw new Error("No icon found");

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

@@ -1 +1 @@
-{"version":3,"file":"alert-icon.js","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 {alarmRectifiedA} from './icons/icon-alarm-rectified.js';\nimport {warningRectifiedA} from './icons/icon-warning-rectified.js';\nimport {alarmSilencedA, alarmSilencedB} from './icons/icon-alarm-silenced.js';\nimport {\n  warningSilencedA,\n  warningSilencedB,\n} from './icons/icon-warning-silenced.js';\nimport {alarmUnackA, alarmUnackB} from './icons/icon-alarm-unack.js';\nimport {warningUnackA, warningUnackB} from './icons/icon-warning-unack.js';\nimport '../../icons/icon-caution-color-iec.js';\nimport {customElement} from '../../decorator.js';\nimport {AlertType} from '../../types.js';\nimport {\n  getAlertBadgeComponent,\n  AlertBadgeComponent,\n  getAlertBlinkMode,\n  getBamAlertTypeForBlinking,\n  supportsBlinking,\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 '../alert-frame/critical-badge.js';\nimport '../alert-frame/diagnostic-badge.js';\nimport {criticalA, criticalB} from './icons/icon-critical.js';\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}\n\nconst mapping = {\n  [AlertIconName.AlarmSilenced]: {\n    a: alarmSilencedA,\n    b: alarmSilencedB,\n  },\n  [AlertIconName.AlarmUnack]: {\n    a: alarmUnackA,\n    b: alarmUnackB,\n  },\n  [AlertIconName.AlarmRectified]: {\n    a: alarmRectifiedA,\n    b: alarmRectifiedA,\n  },\n  [AlertIconName.WarningUnack]: {\n    a: warningUnackA,\n    b: warningUnackB,\n  },\n  [AlertIconName.WarningRectified]: {\n    a: warningRectifiedA,\n    b: warningRectifiedA,\n  },\n  [AlertIconName.WarningSilenced]: {\n    a: warningSilencedA,\n    b: warningSilencedB,\n  },\n  [AlertIconName.Critical]: {\n    a: criticalA,\n    b: criticalB,\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 * - **Blinking Animation:** Uses two SVG layers with alternating opacity to create a blinking effect, visually emphasizing the alert or warning state.\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 */\n@customElement('obc-alert-icon')\nexport class ObcAlertIcon extends LitElement {\n  @property({type: String}) type!: AlertType;\n  @property({type: Boolean}) acknowledged!: boolean;\n  @property({type: Boolean}) active!: boolean;\n  @property({type: Boolean}) outline!: boolean;\n\n  private get bamType(): AlertType {\n    return getBamAlertTypeForBlinking(this.type);\n  }\n\n  get icon() {\n    if (this.type === AlertType.IsaCritical) {\n      return mapping[AlertIconName.Critical];\n    } else if (this.bamType === AlertType.Alarm) {\n      if (this.active === false) {\n        return mapping[AlertIconName.AlarmRectified];\n      } else if (this.acknowledged) {\n        return mapping[AlertIconName.AlarmSilenced];\n      } else {\n        return mapping[AlertIconName.AlarmUnack];\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 renderOutlineIcon(): TemplateResult {\n    switch (getAlertBadgeComponent(this.type)) {\n      case AlertBadgeComponent.Critical:\n        return html`<obi-critical-badge></obi-critical-badge>`;\n      case AlertBadgeComponent.Warning:\n        return html`<obi-warning-badge-outline></obi-warning-badge-outline>`;\n      case AlertBadgeComponent.Caution:\n        return html`<obi-caution-badge-outline></obi-caution-badge-outline>`;\n      case AlertBadgeComponent.Diagnostic:\n        return html`<obi-diagnostic-badge\n          style=\"color: var(--alert-diagnostic-color);\"\n        ></obi-diagnostic-badge>`;\n      default:\n        return html`<obi-alarm-badge-outline></obi-alarm-badge-outline>`;\n    }\n  }\n\n  private renderStaticIcon(): TemplateResult | typeof nothing {\n    if (this.type === AlertType.Caution || this.type === AlertType.IsaLow) {\n      return html`<obi-caution-color-iec usecsscolor></obi-caution-color-iec>`;\n    }\n    if (this.type === AlertType.IsaDiagnostic) {\n      return html`<obi-diagnostic-badge\n        style=\"color: var(--alert-diagnostic-color);\"\n      ></obi-diagnostic-badge>`;\n    }\n    return nothing;\n  }\n\n  override render() {\n    if (!this.type) {\n      return html`<div>No alarm</div>`;\n    }\n    if (this.outline) {\n      return html`<div class=\"wrapper\">${this.renderOutlineIcon()}</div>`;\n    }\n    if (supportsBlinking(this.type) && !(this.type === AlertType.IsaLow)) {\n      const icons = this.icon;\n      if (!icons) {\n        throw new Error('No icon found');\n      }\n      const blinkMode = getAlertBlinkMode(this.type);\n      return html`\n        <div\n          class=${classMap({\n            wrapper: true,\n            [`blink-${blinkMode}`]: true,\n          })}\n        >\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        height: 100%;\n        width: 100%;\n        position: absolute;\n        top: 0;\n        left: 0;\n      }\n      &.blink-alarm .a {\n        opacity: var(--alarm-blink-on);\n      }\n\n      &.blink-alarm .b {\n        opacity: var(--alarm-blink-off);\n      }\n\n      &.blink-critical .a {\n        opacity: var(--critical-blink-on);\n      }\n\n      &.blink-critical .b {\n        opacity: var(--critical-blink-off);\n      }\n\n      &.blink-warning .a {\n        opacity: var(--warning-blink-on);\n      }\n\n      &.blink-warning .b {\n        opacity: var(--warning-blink-off);\n      }\n\n      &.blink-low .a {\n        opacity: var(--low-blink-on);\n      }\n\n      &.blink-low .b {\n        opacity: var(--low-blink-off);\n      }\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-alert-icon': ObcAlertIcon;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"alert-icon.js","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 {alarmRectifiedA} from './icons/icon-alarm-rectified.js';\nimport {warningRectifiedA} from './icons/icon-warning-rectified.js';\nimport {alarmSilencedA, alarmSilencedB} from './icons/icon-alarm-silenced.js';\nimport {\n  warningSilencedA,\n  warningSilencedB,\n} from './icons/icon-warning-silenced.js';\nimport {alarmUnackA, alarmUnackB} from './icons/icon-alarm-unack.js';\nimport {warningUnackA, warningUnackB} from './icons/icon-warning-unack.js';\nimport '../../icons/icon-caution-color-iec.js';\nimport {customElement} from '../../decorator.js';\nimport {AlertType} from '../../types.js';\nimport {\n  getAlertBadgeComponent,\n  AlertBadgeComponent,\n  getAlertBlinkMode,\n  getBamAlertTypeForBlinking,\n  supportsBlinking,\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 '../alert-frame/critical-badge.js';\nimport '../alert-frame/diagnostic-badge.js';\nimport {criticalA, criticalB} from './icons/icon-critical.js';\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}\n\nconst mapping = {\n  [AlertIconName.AlarmSilenced]: {\n    a: alarmSilencedA,\n    b: alarmSilencedB,\n  },\n  [AlertIconName.AlarmUnack]: {\n    a: alarmUnackA,\n    b: alarmUnackB,\n  },\n  [AlertIconName.AlarmRectified]: {\n    a: alarmRectifiedA,\n    b: alarmRectifiedA,\n  },\n  [AlertIconName.WarningUnack]: {\n    a: warningUnackA,\n    b: warningUnackB,\n  },\n  [AlertIconName.WarningRectified]: {\n    a: warningRectifiedA,\n    b: warningRectifiedA,\n  },\n  [AlertIconName.WarningSilenced]: {\n    a: warningSilencedA,\n    b: warningSilencedB,\n  },\n  [AlertIconName.Critical]: {\n    a: criticalA,\n    b: criticalB,\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 * - **Blinking Animation:** Uses two SVG layers with alternating opacity to create a blinking effect, visually emphasizing the alert or warning state.\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 */\n@customElement('obc-alert-icon')\nexport class ObcAlertIcon extends LitElement {\n  @property({type: String}) type!: AlertType;\n  @property({type: Boolean}) acknowledged!: boolean;\n  @property({type: Boolean}) active!: boolean;\n  @property({type: Boolean}) outline!: boolean;\n\n  private get bamType(): AlertType {\n    return getBamAlertTypeForBlinking(this.type);\n  }\n\n  get icon() {\n    if (this.type === AlertType.LevelCritical) {\n      return mapping[AlertIconName.Critical];\n    } else if (this.bamType === AlertType.Alarm) {\n      if (this.active === false) {\n        return mapping[AlertIconName.AlarmRectified];\n      } else if (this.acknowledged) {\n        return mapping[AlertIconName.AlarmSilenced];\n      } else {\n        return mapping[AlertIconName.AlarmUnack];\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 renderOutlineIcon(): TemplateResult {\n    switch (getAlertBadgeComponent(this.type)) {\n      case AlertBadgeComponent.Critical:\n        return html`<obi-critical-badge></obi-critical-badge>`;\n      case AlertBadgeComponent.Warning:\n        return html`<obi-warning-badge-outline></obi-warning-badge-outline>`;\n      case AlertBadgeComponent.Caution:\n        return html`<obi-caution-badge-outline></obi-caution-badge-outline>`;\n      case AlertBadgeComponent.Diagnostic:\n        return html`<obi-diagnostic-badge\n          style=\"color: var(--alert-diagnostic-color);\"\n        ></obi-diagnostic-badge>`;\n      default:\n        return html`<obi-alarm-badge-outline></obi-alarm-badge-outline>`;\n    }\n  }\n\n  private renderStaticIcon(): TemplateResult | typeof nothing {\n    if (this.type === AlertType.Caution || this.type === AlertType.LevelLow) {\n      return html`<obi-caution-color-iec usecsscolor></obi-caution-color-iec>`;\n    }\n    if (this.type === AlertType.LevelDiagnostic) {\n      return html`<obi-diagnostic-badge\n        style=\"color: var(--alert-diagnostic-color);\"\n      ></obi-diagnostic-badge>`;\n    }\n    return nothing;\n  }\n\n  override render() {\n    if (!this.type) {\n      return html`<div>No alarm</div>`;\n    }\n    if (this.outline) {\n      return html`<div class=\"wrapper\">${this.renderOutlineIcon()}</div>`;\n    }\n    if (supportsBlinking(this.type) && !(this.type === AlertType.LevelLow)) {\n      const icons = this.icon;\n      if (!icons) {\n        throw new Error('No icon found');\n      }\n      const blinkMode = getAlertBlinkMode(this.type);\n      return html`\n        <div\n          class=${classMap({\n            wrapper: true,\n            [`blink-${blinkMode}`]: true,\n          })}\n        >\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        height: 100%;\n        width: 100%;\n        position: absolute;\n        top: 0;\n        left: 0;\n      }\n      &.blink-alarm .a {\n        opacity: var(--alarm-blink-on);\n      }\n\n      &.blink-alarm .b {\n        opacity: var(--alarm-blink-off);\n      }\n\n      &.blink-critical .a {\n        opacity: var(--critical-blink-on);\n      }\n\n      &.blink-critical .b {\n        opacity: var(--critical-blink-off);\n      }\n\n      &.blink-warning .a {\n        opacity: var(--warning-blink-on);\n      }\n\n      &.blink-warning .b {\n        opacity: var(--warning-blink-off);\n      }\n\n      &.blink-low .a {\n        opacity: var(--low-blink-on);\n      }\n\n      &.blink-low .b {\n        opacity: var(--low-blink-off);\n      }\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-alert-icon': ObcAlertIcon;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,MAAM,UAAU;AAAA,EACd;AAAA,IAAC;AAAA;AAAA,KAA8B;AAAA,IAC7B,GAAG;AAAA,IACH,GAAG;AAAA,EAAA;AAAA,EAEL;AAAA,IAAC;AAAA;AAAA,KAA2B;AAAA,IAC1B,GAAG;AAAA,IACH,GAAG;AAAA,EAAA;AAAA,EAEL;AAAA,IAAC;AAAA;AAAA,KAA+B;AAAA,IAC9B,GAAG;AAAA,IACH,GAAG;AAAA,EAAA;AAAA,EAEL;AAAA,IAAC;AAAA;AAAA,KAA6B;AAAA,IAC5B,GAAG;AAAA,IACH,GAAG;AAAA,EAAA;AAAA,EAEL;AAAA,IAAC;AAAA;AAAA,KAAiC;AAAA,IAChC,GAAG;AAAA,IACH,GAAG;AAAA,EAAA;AAAA,EAEL;AAAA,IAAC;AAAA;AAAA,KAAgC;AAAA,IAC/B,GAAG;AAAA,IACH,GAAG;AAAA,EAAA;AAAA,EAEL;AAAA,IAAC;AAAA;AAAA,KAAyB;AAAA,IACxB,GAAG;AAAA,IACH,GAAG;AAAA,EAAA;AAEP;AAmCO,IAAM,eAAN,cAA2B,WAAW;AAAA,EAM3C,IAAY,UAAqB;AAC/B,WAAO,2BAA2B,KAAK,IAAI;AAAA,EAC7C;AAAA,EAEA,IAAI,OAAO;AACT,QAAI,KAAK,SAAS,UAAU,eAAe;AACzC,aAAO;AAAA,QAAQ;AAAA;AAAA,MAAA;AAAA,IACjB,WAAW,KAAK,YAAY,UAAU,OAAO;AAC3C,UAAI,KAAK,WAAW,OAAO;AACzB,eAAO;AAAA,UAAQ;AAAA;AAAA,QAAA;AAAA,MACjB,WAAW,KAAK,cAAc;AAC5B,eAAO;AAAA,UAAQ;AAAA;AAAA,QAAA;AAAA,MACjB,OAAO;AACL,eAAO;AAAA,UAAQ;AAAA;AAAA,QAAA;AAAA,MACjB;AAAA,IACF,WAAW,KAAK,YAAY,UAAU,SAAS;AAC7C,UAAI,KAAK,WAAW,OAAO;AACzB,eAAO;AAAA,UAAQ;AAAA;AAAA,QAAA;AAAA,MACjB,WAAW,KAAK,cAAc;AAC5B,eAAO;AAAA,UAAQ;AAAA;AAAA,QAAA;AAAA,MACjB,OAAO;AACL,eAAO;AAAA,UAAQ;AAAA;AAAA,QAAA;AAAA,MACjB;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AAAA,EAEQ,oBAAoC;AAC1C,YAAQ,uBAAuB,KAAK,IAAI,GAAA;AAAA,MACtC,KAAK,oBAAoB;AACvB,eAAO;AAAA,MACT,KAAK,oBAAoB;AACvB,eAAO;AAAA,MACT,KAAK,oBAAoB;AACvB,eAAO;AAAA,MACT,KAAK,oBAAoB;AACvB,eAAO;AAAA;AAAA;AAAA,MAGT;AACE,eAAO;AAAA,IAAA;AAAA,EAEb;AAAA,EAEQ,mBAAoD;AAC1D,QAAI,KAAK,SAAS,UAAU,WAAW,KAAK,SAAS,UAAU,UAAU;AACvE,aAAO;AAAA,IACT;AACA,QAAI,KAAK,SAAS,UAAU,iBAAiB;AAC3C,aAAO;AAAA;AAAA;AAAA,IAGT;AACA,WAAO;AAAA,EACT;AAAA,EAES,SAAS;AAChB,QAAI,CAAC,KAAK,MAAM;AACd,aAAO;AAAA,IACT;AACA,QAAI,KAAK,SAAS;AAChB,aAAO,4BAA4B,KAAK,kBAAA,CAAmB;AAAA,IAC7D;AACA,QAAI,iBAAiB,KAAK,IAAI,KAAK,EAAE,KAAK,SAAS,UAAU,WAAW;AACtE,YAAM,QAAQ,KAAK;AACnB,UAAI,CAAC,OAAO;AACV,cAAM,IAAI,MAAM,eAAe;AAAA,MACjC;AACA,YAAM,YAAY,kBAAkB,KAAK,IAAI;AAC7C,aAAO;AAAA;AAAA,kBAEK,SAAS;AAAA,QACf,SAAS;AAAA,QACT,CAAC,SAAS,SAAS,EAAE,GAAG;AAAA,MAAA,CACzB,CAAC;AAAA;AAAA,4BAEgB,MAAM,CAAC;AAAA,4BACP,MAAM,CAAC;AAAA;AAAA;AAAA,IAG/B;AACA,WAAO,4BAA4B,KAAK,iBAAA,CAAkB;AAAA,EAC5D;AA0DF;AAnJa,aA2FK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA1FC,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GADb,aACe,WAAA,QAAA,CAAA;AACC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAFd,aAEgB,WAAA,gBAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAHd,aAGgB,WAAA,UAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAJd,aAIgB,WAAA,WAAA,CAAA;AAJhB,eAAN,gBAAA;AAAA,EADN,cAAc,gBAAgB;AAAA,GAClB,YAAA;"}

package/dist/components/badge/badge.css.js

@@ -112,31 +112,31 @@ const compentStyle = css`
     color: var(--on-warning-color);
   }
 
-.wrapper.type-caution,.wrapper.type-isa-low {
+.wrapper.type-caution,.wrapper.type-level-low {
     background-color: var(--alert-caution-color);
     border-color: var(--alert-caution-outline-color);
     color: var(--on-caution-color);
   }
 
-.wrapper.type-isa-critical {
+.wrapper.type-level-critical {
     background-color: var(--critical-enabled-background-color);
     border-color: var(--critical-enabled-border-color);
     color: var(--on-critical-color);
   }
 
-.wrapper.type-isa-high {
+.wrapper.type-level-high {
     background-color: var(--alert-alarm-color);
     border-color: var(--alert-alarm-outline-color);
     color: var(--on-alarm-color);
   }
 
-.wrapper.type-isa-medium {
+.wrapper.type-level-medium {
     background-color: var(--alert-warning-color);
     border-color: var(--alert-warning-outline-color);
     color: var(--on-warning-color);
   }
 
-.wrapper.type-isa-diagnostic {
+.wrapper.type-level-diagnostic {
     background-color: var(--notification-enabled-background-color);
     border-color: var(--notification-enabled-border-color);
     color: var(--on-notification-active-color);
@@ -194,31 +194,31 @@ const compentStyle = css`
       background: none;
     }
 
-.wrapper.variant-flat .icon.type-caution,.wrapper.variant-flat .icon.type-isa-low {
+.wrapper.variant-flat .icon.type-caution,.wrapper.variant-flat .icon.type-level-low {
       color: unset;
       border-color: var(--alert-caution-outline-color);
       background: none;
     }
 
-.wrapper.variant-flat .icon.type-isa-critical {
+.wrapper.variant-flat .icon.type-level-critical {
       color: unset;
       border-color: var(--critical-enabled-border-color);
       background: none;
     }
 
-.wrapper.variant-flat .icon.type-isa-high {
+.wrapper.variant-flat .icon.type-level-high {
       color: unset;
       border-color: var(--alert-alarm-outline-color);
       background: none;
     }
 
-.wrapper.variant-flat .icon.type-isa-medium {
+.wrapper.variant-flat .icon.type-level-medium {
       color: unset;
       border-color: var(--alert-warning-outline-color);
       background: none;
     }
 
-.wrapper.variant-flat .icon.type-isa-diagnostic {
+.wrapper.variant-flat .icon.type-level-diagnostic {
       color: unset;
       border-color: var(--notification-enabled-border-color);
       background: none;

package/dist/components/badge/badge.d.ts

@@ -19,11 +19,11 @@ export declare enum BadgeSize {
  * - `alarm`: Indicates a critical or urgent state.
  * - `warning`: Indicates a warning or cautionary state.
  * - `caution`: Indicates a less severe caution.
- * - `isa-critical`: ISA highest-severity state (critical).
- * - `isa-high`: ISA high-severity state (alarm-equivalent styling).
- * - `isa-medium`: ISA medium-severity state (warning-equivalent styling).
- * - `isa-low`: ISA low-severity state (caution-equivalent styling).
- * - `isa-diagnostic`: ISA diagnostic/notification state.
+ * - `level-critical`: level highest-severity state (critical).
+ * - `level-high`: level high-severity state (alarm-equivalent styling).
+ * - `level-medium`: level medium-severity state (warning-equivalent styling).
+ * - `level-low`: level low-severity state (caution-equivalent styling).
+ * - `level-diagnostic`: level diagnostic/notification state.
  * - `running`: Indicates an active or running state.
  * - `notification`: Used for general notifications.
  * - `enhance`: Used for enhanced or secondary notifications.
@@ -36,11 +36,11 @@ export declare enum BadgeType {
     alarm = "alarm",
     warning = "warning",
     caution = "caution",
-    isaCritical = "isa-critical",
-    isaHigh = "isa-high",
-    isaMedium = "isa-medium",
-    isaLow = "isa-low",
-    isaDiagnostic = "isa-diagnostic",
+    levelCritical = "level-critical",
+    levelHigh = "level-high",
+    levelMedium = "level-medium",
+    levelLow = "level-low",
+    levelDiagnostic = "level-diagnostic",
     running = "running",
     notification = "notification",
     enhance = "enhance",
@@ -72,7 +72,7 @@ export declare enum BadgeVariant {
  *   - `alarm`: Highlights critical or urgent states.
  *   - `warning`: Indicates caution or warning.
  *   - `caution`: Used for less severe caution.
- *   - `isa-critical`, `isa-high`, `isa-medium`, `isa-low`, `isa-diagnostic`: ISA severity levels, styled to match their legacy equivalents (critical, alarm, warning, caution, notification).
+ *   - `level-critical`, `level-high`, `level-medium`, `level-low`, `level-diagnostic`: level severity levels, styled to match their legacy equivalents (critical, alarm, warning, caution, notification).
  *   - `running`: Represents active or running states.
  *   - `notification`: For general notifications.
  *   - `enhance`: For secondary notifications or emphasis.
@@ -159,7 +159,7 @@ export declare class ObcBadge extends LitElement {
     /**
      * Visual style/type of the badge.
      *
-     * Possible values: `regular`, `alarm`, `warning`, `caution`, `isa-critical`, `isa-high`, `isa-medium`, `isa-low`, `isa-diagnostic`, `running`, `notification`, `enhance`, `automation`, `outline`, `empty`.
+     * Possible values: `regular`, `alarm`, `warning`, `caution`, `level-critical`, `level-high`, `level-medium`, `level-low`, `level-diagnostic`, `running`, `notification`, `enhance`, `automation`, `outline`, `empty`.
      *
      * Defaults to `regular`.
      */
@@ -180,7 +180,7 @@ export declare class ObcBadge extends LitElement {
     /**
      * Whether to show an icon in the badge.
      *
-     * For built-in types (`alarm`, `warning`, `caution`, the `isa-*` severities, and `running`), a contextual icon is shown automatically.
+     * For built-in types (`alarm`, `warning`, `caution`, the `level-*` severities, and `running`), a contextual icon is shown automatically.
      * For other types, provide a custom icon in the `badge-icon` slot.
      */
     showIcon: boolean;

package/dist/components/badge/badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAKzD,OAAO,iCAAiC,CAAC;AACzC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,uCAAuC,CAAC;AAE/C;;;;;GAKG;AACH,oBAAY,SAAS;IACnB,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,oBAAY,SAAS;IACnB,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,WAAW,iBAAiB;IAC5B,OAAO,aAAa;IACpB,SAAS,eAAe;IACxB,MAAM,YAAY;IAClB,aAAa,mBAAmB;IAChC,OAAO,YAAY;IACnB,YAAY,iBAAiB;IAC7B,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,UAAU,eAAe;IACzB,OAAO,YAAY;CACpB;AAED;;;;;GAKG;AACH,oBAAY,YAAY;IACtB,OAAO,YAAY;IACnB,IAAI,SAAS;CACd;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmFG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC;;;;OAIG;IACuB,MAAM,SAAK;IAErC;;;;OAIG;IAC0C,UAAU,EAAE,OAAO,CAAQ;IAExE;;;;;;OAMG;IACuB,IAAI,EAAE,MAAM,CAAqB;IAE3D;;;;OAIG;IACuB,IAAI,EAAE,MAAM,CAAqB;IAE3D;;;;;OAKG;IACuB,OAAO,EAAE,YAAY,CAAwB;IAEvE;;;;;OAKG;IACwB,QAAQ,UAAS;IAE5C,OAAO,KAAK,aAAa,GAKxB;IAED,OAAO,CAAC,UAAU;IA+GT,MAAM;IAqCf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAKzD,OAAO,iCAAiC,CAAC;AACzC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,uCAAuC,CAAC;AAE/C;;;;;GAKG;AACH,oBAAY,SAAS;IACnB,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,oBAAY,SAAS;IACnB,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,aAAa,mBAAmB;IAChC,SAAS,eAAe;IACxB,WAAW,iBAAiB;IAC5B,QAAQ,cAAc;IACtB,eAAe,qBAAqB;IACpC,OAAO,YAAY;IACnB,YAAY,iBAAiB;IAC7B,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,UAAU,eAAe;IACzB,OAAO,YAAY;CACpB;AAED;;;;;GAKG;AACH,oBAAY,YAAY;IACtB,OAAO,YAAY;IACnB,IAAI,SAAS;CACd;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmFG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC;;;;OAIG;IACuB,MAAM,SAAK;IAErC;;;;OAIG;IAC0C,UAAU,EAAE,OAAO,CAAQ;IAExE;;;;;;OAMG;IACuB,IAAI,EAAE,MAAM,CAAqB;IAE3D;;;;OAIG;IACuB,IAAI,EAAE,MAAM,CAAqB;IAE3D;;;;;OAKG;IACuB,OAAO,EAAE,YAAY,CAAwB;IAEvE;;;;;OAKG;IACwB,QAAQ,UAAS;IAE5C,OAAO,KAAK,aAAa,GAKxB;IAED,OAAO,CAAC,UAAU;IA+GT,MAAM;IAqCf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/components/badge/badge.js

@@ -26,11 +26,11 @@ var BadgeType = /* @__PURE__ */ ((BadgeType2) => {
   BadgeType2["alarm"] = "alarm";
   BadgeType2["warning"] = "warning";
   BadgeType2["caution"] = "caution";
-  BadgeType2["isaCritical"] = "isa-critical";
-  BadgeType2["isaHigh"] = "isa-high";
-  BadgeType2["isaMedium"] = "isa-medium";
-  BadgeType2["isaLow"] = "isa-low";
-  BadgeType2["isaDiagnostic"] = "isa-diagnostic";
+  BadgeType2["levelCritical"] = "level-critical";
+  BadgeType2["levelHigh"] = "level-high";
+  BadgeType2["levelMedium"] = "level-medium";
+  BadgeType2["levelLow"] = "level-low";
+  BadgeType2["levelDiagnostic"] = "level-diagnostic";
   BadgeType2["running"] = "running";
   BadgeType2["notification"] = "notification";
   BadgeType2["enhance"] = "enhance";
@@ -95,7 +95,7 @@ let ObcBadge = class extends LitElement {
             />
           </svg>
         `;
-      case "isa-high":
+      case "level-high":
         return html`
           <svg width="100%" height="100%" viewBox="0 0 12 12" fill="none">
             <path
@@ -104,7 +104,7 @@ let ObcBadge = class extends LitElement {
             />
           </svg>
         `;
-      case "isa-medium":
+      case "level-medium":
         return html`
           <svg width="100%" height="100%" viewBox="0 0 12 12" fill="none">
             <circle
@@ -116,7 +116,7 @@ let ObcBadge = class extends LitElement {
             />
           </svg>
         `;
-      case "isa-low":
+      case "level-low":
         return html`
           <svg width="100%" height="100%" viewBox="0 0 12 12" fill="none">
             <path
@@ -126,7 +126,7 @@ let ObcBadge = class extends LitElement {
             />
           </svg>
         `;
-      case "isa-critical":
+      case "level-critical":
         return html`
           <svg width="100%" height="100%" viewBox="0 0 12 12" fill="none">
             <path
@@ -135,7 +135,7 @@ let ObcBadge = class extends LitElement {
             />
           </svg>
         `;
-      case "isa-diagnostic":
+      case "level-diagnostic":
         return html`
           <svg width="100%" height="100%" viewBox="0 0 12 12" fill="none">
             <path

package/dist/components/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sources":["../../../src/components/badge/badge.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport compentStyle from './badge.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../../decorator.js';\nimport '../../icons/icon-alarm-badge.js';\nimport '../../icons/icon-warning-badge.js';\nimport '../../icons/icon-caution-badge.js';\nimport '../../icons/icon-running-color-iec.js';\n\n/**\n * `BadgeSize` – Enum for badge size options.\n *\n * - `regular`: Standard badge size.\n * - `large`: Larger badge size for increased prominence.\n */\nexport enum BadgeSize {\n  regular = 'regular',\n  large = 'large',\n}\n\n/**\n * `BadgeType` – Enum for badge visual types.\n *\n * - `alarm`: Indicates a critical or urgent state.\n * - `warning`: Indicates a warning or cautionary state.\n * - `caution`: Indicates a less severe caution.\n * - `isa-critical`: ISA highest-severity state (critical).\n * - `isa-high`: ISA high-severity state (alarm-equivalent styling).\n * - `isa-medium`: ISA medium-severity state (warning-equivalent styling).\n * - `isa-low`: ISA low-severity state (caution-equivalent styling).\n * - `isa-diagnostic`: ISA diagnostic/notification state.\n * - `running`: Indicates an active or running state.\n * - `notification`: Used for general notifications.\n * - `enhance`: Used for enhanced or secondary notifications.\n * - `regular`: Default badge style.\n * - `empty`: Minimal badge with no icon or number.\n * - `automation`: Used for automation-related status.\n * - `outline`: Outline-only style for flat variant.\n */\nexport enum BadgeType {\n  alarm = 'alarm',\n  warning = 'warning',\n  caution = 'caution',\n  isaCritical = 'isa-critical',\n  isaHigh = 'isa-high',\n  isaMedium = 'isa-medium',\n  isaLow = 'isa-low',\n  isaDiagnostic = 'isa-diagnostic',\n  running = 'running',\n  notification = 'notification',\n  enhance = 'enhance',\n  regular = 'regular',\n  empty = 'empty',\n  automation = 'automation',\n  outline = 'outline',\n}\n\n/**\n * `BadgeVariant` – Enum for badge visual variants.\n *\n * - `default`: Standard filled badge.\n * - `flat`: Flat badge with minimal background and outline.\n */\nexport enum BadgeVariant {\n  default = 'default',\n  flat = 'flat',\n}\n\n/**\n * `<obc-badge>` – A compact visual indicator for status, alerts, or notifications, optionally displaying a number and/or icon.\n *\n * Badges are used to draw attention to status changes, counts, or important information in a concise format. They can represent alert states (such as alarm, warning, or running), notification counts, or other contextual statuses. The badge adapts its appearance based on type, size, and variant, and can display an icon, a number, or both.\n *\n * ---\n *\n * ### Features\n * - **Type options:** Supports multiple visual types:\n *   - `regular`: Default neutral badge.\n *   - `alarm`: Highlights critical or urgent states.\n *   - `warning`: Indicates caution or warning.\n *   - `caution`: Used for less severe caution.\n *   - `isa-critical`, `isa-high`, `isa-medium`, `isa-low`, `isa-diagnostic`: ISA severity levels, styled to match their legacy equivalents (critical, alarm, warning, caution, notification).\n *   - `running`: Represents active or running states.\n *   - `notification`: For general notifications.\n *   - `enhance`: For secondary notifications or emphasis.\n *   - `automation`: For automation-related status.\n *   - `outline`: Outline-only style (flat variant only).\n *   - `empty`: Minimal badge with no icon or number.\n * - **Size options:** `regular` (default) and `large` for increased visibility.\n * - **Variants:**\n *   - `default`: Filled background and border.\n *   - `flat`: Minimal background, outline, and lighter appearance.\n * - **Icon support:** Can display a contextual icon (built-in for alarm, warning, caution, running; custom via slot for others).\n * - **Number display:** Optionally shows a number (e.g., count of notifications).\n * - **Hide number:** Can suppress the number for a purely symbolic badge.\n * - **Custom icon slot:** For types without a built-in icon, developers can provide a custom icon using the `badge-icon` slot.\n * - **Responsive layout:** Adjusts size and spacing based on the `size` property.\n *\n * ---\n *\n * ### Usage Guidelines\n * - Use `obc-badge` to highlight status, counts, or alerts in a compact form, such as notification indicators, unread message counts, or system status.\n * - Choose the `type` that matches the semantic meaning (e.g., `alarm` for critical, `warning` for caution, `running` for active).\n * - Use the `number` property to show counts; set `showNumber` to false for symbolic-only badges.\n * - Use the `flat` variant for less prominent or secondary contexts.\n * - For custom icons, provide an icon element in the `badge-icon` slot.\n * - Avoid using badges for persistent or detailed information; they are intended for brief, glanceable status.\n * - **TODO(designer):** Confirm recommended use cases for `enhance`, `automation`, and `outline` types, and clarify when to use `empty` type versus hiding the badge entirely.\n *\n * ---\n *\n * ### Slots\n *\n * | Slot Name     | Renders When...                | Purpose                                             |\n * |---------------|-------------------------------|-----------------------------------------------------|\n * | `badge-icon`  | `showIcon` is true and `type` is not one of `alarm`, `warning`, `caution`, `running` | Custom icon for the badge (e.g., `<obi-placeholder>`). |\n *\n * ---\n *\n * ### Properties and Attributes\n * - `number` (number): The numeric value to display in the badge. Defaults to 0.\n * - `showNumber` (boolean): If true, the number is shown. Set to `false` for symbolic or icon-only badges.\n * - `type` (string): Visual style of the badge. See **Type options** above for possible values. Defaults to `regular`.\n * - `size` (string): Badge size, either `regular` (default) or `large`.\n * - `variant` (string): Visual variant, either `default` (filled) or `flat` (minimal). Defaults to `default`.\n * - `showIcon` (boolean): If true, displays an icon appropriate to the badge type. For custom types, supply an icon in the `badge-icon` slot.\n *\n * ---\n *\n * ### Best Practices and Constraints\n * - Use badge types consistently to communicate status meaningfully.\n * - For accessibility, ensure the badge's meaning is also conveyed via text or ARIA attributes if used as a status indicator.\n * - Avoid overloading the badge with large numbers or excessive detail; keep content concise.\n * - The `empty` type is intended for minimal presence—use when a placeholder badge is needed without icon or number.\n * - For custom icons, use OpenBridge icon elements such as `<obi-placeholder>` in the `badge-icon` slot.\n * - The badge does not emit any custom events.\n *\n * ---\n *\n * ### Example\n *\n * ```html\n * <obc-badge type=\"alarm\" number=\"3\" showIcon>\n *   <!-- For custom types, provide an icon: -->\n *   <obi-placeholder slot=\"badge-icon\"></obi-placeholder>\n * </obc-badge>\n * ```\n *\n * In this example, the badge displays an alarm icon and the number 3.\n *\n * @slot badge-icon - Custom icon slot for badge types that do not have a built-in icon (e.g., notification, enhance, automation, outline, or custom types).\n */\n@customElement('obc-badge')\nexport class ObcBadge extends LitElement {\n  /**\n   * The number to display in the badge. Set to 0 for no count.\n   *\n   * If `showNumber` is false, the number is hidden.\n   */\n  @property({type: Number}) number = 0;\n\n  /**\n   * Shows the number in the badge when true.\n   *\n   * Set to `false` for symbolic or icon-only badges.\n   */\n  @property({type: Boolean, attribute: false}) showNumber: boolean = true;\n\n  /**\n   * Visual style/type of the badge.\n   *\n   * Possible values: `regular`, `alarm`, `warning`, `caution`, `isa-critical`, `isa-high`, `isa-medium`, `isa-low`, `isa-diagnostic`, `running`, `notification`, `enhance`, `automation`, `outline`, `empty`.\n   *\n   * Defaults to `regular`.\n   */\n  @property({type: String}) type: string = BadgeType.regular;\n\n  /**\n   * Badge size.\n   *\n   * Possible values: `regular` (default), `large`.\n   */\n  @property({type: String}) size: string = BadgeSize.regular;\n\n  /**\n   * Badge variant.\n   *\n   * - `default`: Filled background and border (default).\n   * - `flat`: Minimal background and outline.\n   */\n  @property({type: String}) variant: BadgeVariant = BadgeVariant.default;\n\n  /**\n   * Whether to show an icon in the badge.\n   *\n   * For built-in types (`alarm`, `warning`, `caution`, the `isa-*` severities, and `running`), a contextual icon is shown automatically.\n   * For other types, provide a custom icon in the `badge-icon` slot.\n   */\n  @property({type: Boolean}) showIcon = false;\n\n  private get effectiveType(): string {\n    if (!this.showIcon && !this.showNumber) {\n      return BadgeType.empty;\n    }\n    return this.type;\n  }\n\n  private renderIcon() {\n    const isFlat = this.variant === BadgeVariant.flat;\n    switch (this.type) {\n      case BadgeType.alarm:\n        return html`\n          <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 12 12\" fill=\"none\">\n            <path\n              d=\"M5.29694 1.72622L1.05702 9.32693C0.838739 9.71823 0.729598 9.91388 0.748108 10.0741C0.764257 10.2138 0.83853 10.3403 0.952704 10.4225C1.08357 10.5167 1.3076 10.5167 1.75567 10.5167H10.233C10.6809 10.5167 10.9049 10.5167 11.0357 10.4225C11.1499 10.3403 11.2242 10.2139 11.2404 10.0741C11.2589 9.914 11.1498 9.71837 10.9317 9.3271L6.69433 1.7264C6.46616 1.31712 6.35207 1.11247 6.20181 1.04447C6.07082 0.985194 5.92064 0.985175 5.78964 1.04442C5.63936 1.11238 5.52522 1.317 5.29694 1.72622Z\"\n              fill=${isFlat ? 'var(--alert-alarm-color)' : 'currentColor'}\n            />\n          </svg>\n        `;\n      case BadgeType.warning:\n        return html`\n          <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 12 12\" fill=\"none\">\n            <circle\n              cx=\"6\"\n              cy=\"6\"\n              r=\"4.5\"\n              fill=${isFlat ? 'var(--alert-warning-color)' : 'currentColor'}\n              stroke=${isFlat\n                ? 'var(--alert-warning-outline-color)'\n                : 'currentColor'}\n            />\n          </svg>\n        `;\n      case BadgeType.caution:\n        return html`\n          <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 12 12\" fill=\"none\">\n            <path\n              d=\"M2.2998 2H9.7002C9.848 2 9.92907 2.00015 9.9873 2.00488C9.98955 2.00507 9.99213 2.0047 9.99414 2.00488C9.99436 2.0072 9.9949 2.01006 9.99512 2.0127C9.99985 2.07093 10 2.152 10 2.2998V9.7002C10 9.848 9.99985 9.92907 9.99512 9.9873C9.99493 9.98958 9.99433 9.9921 9.99414 9.99414C9.9921 9.99433 9.98958 9.99493 9.9873 9.99512C9.92907 9.99985 9.848 10 9.7002 10H2.2998C2.152 10 2.07093 9.99985 2.0127 9.99512C2.01006 9.9949 2.0072 9.99436 2.00488 9.99414C2.0047 9.99213 2.00507 9.98955 2.00488 9.9873C2.00015 9.92907 2 9.848 2 9.7002V2.2998L2.00488 2.0127C2.0051 2.01009 2.00467 2.00718 2.00488 2.00488C2.00718 2.00467 2.01009 2.0051 2.0127 2.00488L2.2998 2Z\"\n              fill=${isFlat ? 'var(--alert-caution-color)' : 'currentColor'}\n              stroke=${isFlat\n                ? 'var(--alert-caution-outline-color)'\n                : 'currentColor'}\n            />\n          </svg>\n        `;\n      case BadgeType.isaHigh:\n        return html`\n          <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 12 12\" fill=\"none\">\n            <path\n              d=\"M5.29694 1.72622L1.05702 9.32693C0.838739 9.71823 0.729598 9.91388 0.748108 10.0741C0.764257 10.2138 0.83853 10.3403 0.952704 10.4225C1.08357 10.5167 1.3076 10.5167 1.75567 10.5167H10.233C10.6809 10.5167 10.9049 10.5167 11.0357 10.4225C11.1499 10.3403 11.2242 10.2139 11.2404 10.0741C11.2589 9.914 11.1498 9.71837 10.9317 9.3271L6.69433 1.7264C6.46616 1.31712 6.35207 1.11247 6.20181 1.04447C6.07082 0.985194 5.92064 0.985175 5.78964 1.04442C5.63936 1.11238 5.52522 1.317 5.29694 1.72622Z\"\n              fill=${isFlat ? 'var(--alert-alarm-color)' : 'currentColor'}\n            />\n          </svg>\n        `;\n      case BadgeType.isaMedium:\n        return html`\n          <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 12 12\" fill=\"none\">\n            <circle\n              cx=\"6\"\n              cy=\"6\"\n              r=\"4.5\"\n              fill=${isFlat ? 'var(--alert-warning-color)' : 'currentColor'}\n              stroke=${isFlat\n                ? 'var(--alert-warning-outline-color)'\n                : 'currentColor'}\n            />\n          </svg>\n        `;\n      case BadgeType.isaLow:\n        return html`\n          <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 12 12\" fill=\"none\">\n            <path\n              d=\"M2.2998 2H9.7002C9.848 2 9.92907 2.00015 9.9873 2.00488C9.98955 2.00507 9.99213 2.0047 9.99414 2.00488C9.99436 2.0072 9.9949 2.01006 9.99512 2.0127C9.99985 2.07093 10 2.152 10 2.2998V9.7002C10 9.848 9.99985 9.92907 9.99512 9.9873C9.99493 9.98958 9.99433 9.9921 9.99414 9.99414C9.9921 9.99433 9.98958 9.99493 9.9873 9.99512C9.92907 9.99985 9.848 10 9.7002 10H2.2998C2.152 10 2.07093 9.99985 2.0127 9.99512C2.01006 9.9949 2.0072 9.99436 2.00488 9.99414C2.0047 9.99213 2.00507 9.98955 2.00488 9.9873C2.00015 9.92907 2 9.848 2 9.7002V2.2998L2.00488 2.0127C2.0051 2.01009 2.00467 2.00718 2.00488 2.00488C2.00718 2.00467 2.01009 2.0051 2.0127 2.00488L2.2998 2Z\"\n              fill=${isFlat ? 'var(--alert-caution-color)' : 'currentColor'}\n              stroke=${isFlat\n                ? 'var(--alert-caution-outline-color)'\n                : 'currentColor'}\n            />\n          </svg>\n        `;\n      case BadgeType.isaCritical:\n        return html`\n          <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 12 12\" fill=\"none\">\n            <path\n              d=\"M11 6L8.5 10.33H3.5L1 6L3.5 1.67H8.5L11 6Z\"\n              fill=${isFlat\n                ? 'var(--critical-enabled-background-color)'\n                : 'currentColor'}\n            />\n          </svg>\n        `;\n      case BadgeType.isaDiagnostic:\n        return html`\n          <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 12 12\" fill=\"none\">\n            <path\n              d=\"M5.25 1H6.75V5.7L9.955 3.85L10.705 5.15L7.5 7L10.705 8.85L9.955 10.15L6.75 8.3V11H5.25V8.3L2.045 10.15L1.295 8.85L4.5 7L1.295 5.15L2.045 3.85L5.25 5.7V1Z\"\n              fill=${isFlat\n                ? 'var(--notification-enabled-background-color)'\n                : 'currentColor'}\n            />\n          </svg>\n        `;\n      case BadgeType.running:\n        return html`\n          <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 12 12\" fill=\"none\">\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M11 6C11 8.76142 8.76142 11 6 11C3.23858 11 1 8.76142 1 6C1 3.23858 3.23858 1 6 1C8.76142 1 11 3.23858 11 6ZM2.89624 6.10353L3.60335 5.39642L5.24979 7.04287L8.39624 3.89642L9.10335 4.60353L5.24979 8.45708L2.89624 6.10353Z\"\n              fill=${isFlat ? 'var(--alert-running-color)' : 'currentColor'}\n            />\n          </svg>\n        `;\n      default:\n        return html`<slot class=\"badge-icon\" name=\"badge-icon\"></slot>`;\n    }\n  }\n\n  override render() {\n    const isFlat = this.variant === BadgeVariant.flat;\n    return html`\n      <div\n        class=${classMap({\n          wrapper: true,\n          ['size-' + this.size]: true,\n          ['type-' + this.effectiveType]: !isFlat,\n          ['variant-flat']: isFlat,\n          hideNumber: !this.showNumber,\n        })}\n      >\n        ${this.effectiveType !== BadgeType.empty\n          ? html`\n              ${this.showIcon\n                ? html`\n                    <div\n                      class=${classMap({\n                        icon: true,\n                        ['type-' + this.type]: isFlat,\n                      })}\n                    >\n                      ${this.renderIcon()}\n                    </div>\n                  `\n                : nothing}\n              ${this.showNumber\n                ? html`<div class=\"number\">\n                    <span class=\"number-text\">${this.number}</span>\n                  </div>`\n                : ''}\n            `\n          : ''}\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-badge': ObcBadge;\n  }\n}\n"],"names":["BadgeSize","BadgeType","BadgeVariant"],"mappings":"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"}
+{"version":3,"file":"badge.js","sources":["../../../src/components/badge/badge.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport compentStyle from './badge.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../../decorator.js';\nimport '../../icons/icon-alarm-badge.js';\nimport '../../icons/icon-warning-badge.js';\nimport '../../icons/icon-caution-badge.js';\nimport '../../icons/icon-running-color-iec.js';\n\n/**\n * `BadgeSize` – Enum for badge size options.\n *\n * - `regular`: Standard badge size.\n * - `large`: Larger badge size for increased prominence.\n */\nexport enum BadgeSize {\n  regular = 'regular',\n  large = 'large',\n}\n\n/**\n * `BadgeType` – Enum for badge visual types.\n *\n * - `alarm`: Indicates a critical or urgent state.\n * - `warning`: Indicates a warning or cautionary state.\n * - `caution`: Indicates a less severe caution.\n * - `level-critical`: level highest-severity state (critical).\n * - `level-high`: level high-severity state (alarm-equivalent styling).\n * - `level-medium`: level medium-severity state (warning-equivalent styling).\n * - `level-low`: level low-severity state (caution-equivalent styling).\n * - `level-diagnostic`: level diagnostic/notification state.\n * - `running`: Indicates an active or running state.\n * - `notification`: Used for general notifications.\n * - `enhance`: Used for enhanced or secondary notifications.\n * - `regular`: Default badge style.\n * - `empty`: Minimal badge with no icon or number.\n * - `automation`: Used for automation-related status.\n * - `outline`: Outline-only style for flat variant.\n */\nexport enum BadgeType {\n  alarm = 'alarm',\n  warning = 'warning',\n  caution = 'caution',\n  levelCritical = 'level-critical',\n  levelHigh = 'level-high',\n  levelMedium = 'level-medium',\n  levelLow = 'level-low',\n  levelDiagnostic = 'level-diagnostic',\n  running = 'running',\n  notification = 'notification',\n  enhance = 'enhance',\n  regular = 'regular',\n  empty = 'empty',\n  automation = 'automation',\n  outline = 'outline',\n}\n\n/**\n * `BadgeVariant` – Enum for badge visual variants.\n *\n * - `default`: Standard filled badge.\n * - `flat`: Flat badge with minimal background and outline.\n */\nexport enum BadgeVariant {\n  default = 'default',\n  flat = 'flat',\n}\n\n/**\n * `<obc-badge>` – A compact visual indicator for status, alerts, or notifications, optionally displaying a number and/or icon.\n *\n * Badges are used to draw attention to status changes, counts, or important information in a concise format. They can represent alert states (such as alarm, warning, or running), notification counts, or other contextual statuses. The badge adapts its appearance based on type, size, and variant, and can display an icon, a number, or both.\n *\n * ---\n *\n * ### Features\n * - **Type options:** Supports multiple visual types:\n *   - `regular`: Default neutral badge.\n *   - `alarm`: Highlights critical or urgent states.\n *   - `warning`: Indicates caution or warning.\n *   - `caution`: Used for less severe caution.\n *   - `level-critical`, `level-high`, `level-medium`, `level-low`, `level-diagnostic`: level severity levels, styled to match their legacy equivalents (critical, alarm, warning, caution, notification).\n *   - `running`: Represents active or running states.\n *   - `notification`: For general notifications.\n *   - `enhance`: For secondary notifications or emphasis.\n *   - `automation`: For automation-related status.\n *   - `outline`: Outline-only style (flat variant only).\n *   - `empty`: Minimal badge with no icon or number.\n * - **Size options:** `regular` (default) and `large` for increased visibility.\n * - **Variants:**\n *   - `default`: Filled background and border.\n *   - `flat`: Minimal background, outline, and lighter appearance.\n * - **Icon support:** Can display a contextual icon (built-in for alarm, warning, caution, running; custom via slot for others).\n * - **Number display:** Optionally shows a number (e.g., count of notifications).\n * - **Hide number:** Can suppress the number for a purely symbolic badge.\n * - **Custom icon slot:** For types without a built-in icon, developers can provide a custom icon using the `badge-icon` slot.\n * - **Responsive layout:** Adjusts size and spacing based on the `size` property.\n *\n * ---\n *\n * ### Usage Guidelines\n * - Use `obc-badge` to highlight status, counts, or alerts in a compact form, such as notification indicators, unread message counts, or system status.\n * - Choose the `type` that matches the semantic meaning (e.g., `alarm` for critical, `warning` for caution, `running` for active).\n * - Use the `number` property to show counts; set `showNumber` to false for symbolic-only badges.\n * - Use the `flat` variant for less prominent or secondary contexts.\n * - For custom icons, provide an icon element in the `badge-icon` slot.\n * - Avoid using badges for persistent or detailed information; they are intended for brief, glanceable status.\n * - **TODO(designer):** Confirm recommended use cases for `enhance`, `automation`, and `outline` types, and clarify when to use `empty` type versus hiding the badge entirely.\n *\n * ---\n *\n * ### Slots\n *\n * | Slot Name     | Renders When...                | Purpose                                             |\n * |---------------|-------------------------------|-----------------------------------------------------|\n * | `badge-icon`  | `showIcon` is true and `type` is not one of `alarm`, `warning`, `caution`, `running` | Custom icon for the badge (e.g., `<obi-placeholder>`). |\n *\n * ---\n *\n * ### Properties and Attributes\n * - `number` (number): The numeric value to display in the badge. Defaults to 0.\n * - `showNumber` (boolean): If true, the number is shown. Set to `false` for symbolic or icon-only badges.\n * - `type` (string): Visual style of the badge. See **Type options** above for possible values. Defaults to `regular`.\n * - `size` (string): Badge size, either `regular` (default) or `large`.\n * - `variant` (string): Visual variant, either `default` (filled) or `flat` (minimal). Defaults to `default`.\n * - `showIcon` (boolean): If true, displays an icon appropriate to the badge type. For custom types, supply an icon in the `badge-icon` slot.\n *\n * ---\n *\n * ### Best Practices and Constraints\n * - Use badge types consistently to communicate status meaningfully.\n * - For accessibility, ensure the badge's meaning is also conveyed via text or ARIA attributes if used as a status indicator.\n * - Avoid overloading the badge with large numbers or excessive detail; keep content concise.\n * - The `empty` type is intended for minimal presence—use when a placeholder badge is needed without icon or number.\n * - For custom icons, use OpenBridge icon elements such as `<obi-placeholder>` in the `badge-icon` slot.\n * - The badge does not emit any custom events.\n *\n * ---\n *\n * ### Example\n *\n * ```html\n * <obc-badge type=\"alarm\" number=\"3\" showIcon>\n *   <!-- For custom types, provide an icon: -->\n *   <obi-placeholder slot=\"badge-icon\"></obi-placeholder>\n * </obc-badge>\n * ```\n *\n * In this example, the badge displays an alarm icon and the number 3.\n *\n * @slot badge-icon - Custom icon slot for badge types that do not have a built-in icon (e.g., notification, enhance, automation, outline, or custom types).\n */\n@customElement('obc-badge')\nexport class ObcBadge extends LitElement {\n  /**\n   * The number to display in the badge. Set to 0 for no count.\n   *\n   * If `showNumber` is false, the number is hidden.\n   */\n  @property({type: Number}) number = 0;\n\n  /**\n   * Shows the number in the badge when true.\n   *\n   * Set to `false` for symbolic or icon-only badges.\n   */\n  @property({type: Boolean, attribute: false}) showNumber: boolean = true;\n\n  /**\n   * Visual style/type of the badge.\n   *\n   * Possible values: `regular`, `alarm`, `warning`, `caution`, `level-critical`, `level-high`, `level-medium`, `level-low`, `level-diagnostic`, `running`, `notification`, `enhance`, `automation`, `outline`, `empty`.\n   *\n   * Defaults to `regular`.\n   */\n  @property({type: String}) type: string = BadgeType.regular;\n\n  /**\n   * Badge size.\n   *\n   * Possible values: `regular` (default), `large`.\n   */\n  @property({type: String}) size: string = BadgeSize.regular;\n\n  /**\n   * Badge variant.\n   *\n   * - `default`: Filled background and border (default).\n   * - `flat`: Minimal background and outline.\n   */\n  @property({type: String}) variant: BadgeVariant = BadgeVariant.default;\n\n  /**\n   * Whether to show an icon in the badge.\n   *\n   * For built-in types (`alarm`, `warning`, `caution`, the `level-*` severities, and `running`), a contextual icon is shown automatically.\n   * For other types, provide a custom icon in the `badge-icon` slot.\n   */\n  @property({type: Boolean}) showIcon = false;\n\n  private get effectiveType(): string {\n    if (!this.showIcon && !this.showNumber) {\n      return BadgeType.empty;\n    }\n    return this.type;\n  }\n\n  private renderIcon() {\n    const isFlat = this.variant === BadgeVariant.flat;\n    switch (this.type) {\n      case BadgeType.alarm:\n        return html`\n          <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 12 12\" fill=\"none\">\n            <path\n              d=\"M5.29694 1.72622L1.05702 9.32693C0.838739 9.71823 0.729598 9.91388 0.748108 10.0741C0.764257 10.2138 0.83853 10.3403 0.952704 10.4225C1.08357 10.5167 1.3076 10.5167 1.75567 10.5167H10.233C10.6809 10.5167 10.9049 10.5167 11.0357 10.4225C11.1499 10.3403 11.2242 10.2139 11.2404 10.0741C11.2589 9.914 11.1498 9.71837 10.9317 9.3271L6.69433 1.7264C6.46616 1.31712 6.35207 1.11247 6.20181 1.04447C6.07082 0.985194 5.92064 0.985175 5.78964 1.04442C5.63936 1.11238 5.52522 1.317 5.29694 1.72622Z\"\n              fill=${isFlat ? 'var(--alert-alarm-color)' : 'currentColor'}\n            />\n          </svg>\n        `;\n      case BadgeType.warning:\n        return html`\n          <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 12 12\" fill=\"none\">\n            <circle\n              cx=\"6\"\n              cy=\"6\"\n              r=\"4.5\"\n              fill=${isFlat ? 'var(--alert-warning-color)' : 'currentColor'}\n              stroke=${isFlat\n                ? 'var(--alert-warning-outline-color)'\n                : 'currentColor'}\n            />\n          </svg>\n        `;\n      case BadgeType.caution:\n        return html`\n          <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 12 12\" fill=\"none\">\n            <path\n              d=\"M2.2998 2H9.7002C9.848 2 9.92907 2.00015 9.9873 2.00488C9.98955 2.00507 9.99213 2.0047 9.99414 2.00488C9.99436 2.0072 9.9949 2.01006 9.99512 2.0127C9.99985 2.07093 10 2.152 10 2.2998V9.7002C10 9.848 9.99985 9.92907 9.99512 9.9873C9.99493 9.98958 9.99433 9.9921 9.99414 9.99414C9.9921 9.99433 9.98958 9.99493 9.9873 9.99512C9.92907 9.99985 9.848 10 9.7002 10H2.2998C2.152 10 2.07093 9.99985 2.0127 9.99512C2.01006 9.9949 2.0072 9.99436 2.00488 9.99414C2.0047 9.99213 2.00507 9.98955 2.00488 9.9873C2.00015 9.92907 2 9.848 2 9.7002V2.2998L2.00488 2.0127C2.0051 2.01009 2.00467 2.00718 2.00488 2.00488C2.00718 2.00467 2.01009 2.0051 2.0127 2.00488L2.2998 2Z\"\n              fill=${isFlat ? 'var(--alert-caution-color)' : 'currentColor'}\n              stroke=${isFlat\n                ? 'var(--alert-caution-outline-color)'\n                : 'currentColor'}\n            />\n          </svg>\n        `;\n      case BadgeType.levelHigh:\n        return html`\n          <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 12 12\" fill=\"none\">\n            <path\n              d=\"M5.29694 1.72622L1.05702 9.32693C0.838739 9.71823 0.729598 9.91388 0.748108 10.0741C0.764257 10.2138 0.83853 10.3403 0.952704 10.4225C1.08357 10.5167 1.3076 10.5167 1.75567 10.5167H10.233C10.6809 10.5167 10.9049 10.5167 11.0357 10.4225C11.1499 10.3403 11.2242 10.2139 11.2404 10.0741C11.2589 9.914 11.1498 9.71837 10.9317 9.3271L6.69433 1.7264C6.46616 1.31712 6.35207 1.11247 6.20181 1.04447C6.07082 0.985194 5.92064 0.985175 5.78964 1.04442C5.63936 1.11238 5.52522 1.317 5.29694 1.72622Z\"\n              fill=${isFlat ? 'var(--alert-alarm-color)' : 'currentColor'}\n            />\n          </svg>\n        `;\n      case BadgeType.levelMedium:\n        return html`\n          <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 12 12\" fill=\"none\">\n            <circle\n              cx=\"6\"\n              cy=\"6\"\n              r=\"4.5\"\n              fill=${isFlat ? 'var(--alert-warning-color)' : 'currentColor'}\n              stroke=${isFlat\n                ? 'var(--alert-warning-outline-color)'\n                : 'currentColor'}\n            />\n          </svg>\n        `;\n      case BadgeType.levelLow:\n        return html`\n          <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 12 12\" fill=\"none\">\n            <path\n              d=\"M2.2998 2H9.7002C9.848 2 9.92907 2.00015 9.9873 2.00488C9.98955 2.00507 9.99213 2.0047 9.99414 2.00488C9.99436 2.0072 9.9949 2.01006 9.99512 2.0127C9.99985 2.07093 10 2.152 10 2.2998V9.7002C10 9.848 9.99985 9.92907 9.99512 9.9873C9.99493 9.98958 9.99433 9.9921 9.99414 9.99414C9.9921 9.99433 9.98958 9.99493 9.9873 9.99512C9.92907 9.99985 9.848 10 9.7002 10H2.2998C2.152 10 2.07093 9.99985 2.0127 9.99512C2.01006 9.9949 2.0072 9.99436 2.00488 9.99414C2.0047 9.99213 2.00507 9.98955 2.00488 9.9873C2.00015 9.92907 2 9.848 2 9.7002V2.2998L2.00488 2.0127C2.0051 2.01009 2.00467 2.00718 2.00488 2.00488C2.00718 2.00467 2.01009 2.0051 2.0127 2.00488L2.2998 2Z\"\n              fill=${isFlat ? 'var(--alert-caution-color)' : 'currentColor'}\n              stroke=${isFlat\n                ? 'var(--alert-caution-outline-color)'\n                : 'currentColor'}\n            />\n          </svg>\n        `;\n      case BadgeType.levelCritical:\n        return html`\n          <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 12 12\" fill=\"none\">\n            <path\n              d=\"M11 6L8.5 10.33H3.5L1 6L3.5 1.67H8.5L11 6Z\"\n              fill=${isFlat\n                ? 'var(--critical-enabled-background-color)'\n                : 'currentColor'}\n            />\n          </svg>\n        `;\n      case BadgeType.levelDiagnostic:\n        return html`\n          <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 12 12\" fill=\"none\">\n            <path\n              d=\"M5.25 1H6.75V5.7L9.955 3.85L10.705 5.15L7.5 7L10.705 8.85L9.955 10.15L6.75 8.3V11H5.25V8.3L2.045 10.15L1.295 8.85L4.5 7L1.295 5.15L2.045 3.85L5.25 5.7V1Z\"\n              fill=${isFlat\n                ? 'var(--notification-enabled-background-color)'\n                : 'currentColor'}\n            />\n          </svg>\n        `;\n      case BadgeType.running:\n        return html`\n          <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 12 12\" fill=\"none\">\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M11 6C11 8.76142 8.76142 11 6 11C3.23858 11 1 8.76142 1 6C1 3.23858 3.23858 1 6 1C8.76142 1 11 3.23858 11 6ZM2.89624 6.10353L3.60335 5.39642L5.24979 7.04287L8.39624 3.89642L9.10335 4.60353L5.24979 8.45708L2.89624 6.10353Z\"\n              fill=${isFlat ? 'var(--alert-running-color)' : 'currentColor'}\n            />\n          </svg>\n        `;\n      default:\n        return html`<slot class=\"badge-icon\" name=\"badge-icon\"></slot>`;\n    }\n  }\n\n  override render() {\n    const isFlat = this.variant === BadgeVariant.flat;\n    return html`\n      <div\n        class=${classMap({\n          wrapper: true,\n          ['size-' + this.size]: true,\n          ['type-' + this.effectiveType]: !isFlat,\n          ['variant-flat']: isFlat,\n          hideNumber: !this.showNumber,\n        })}\n      >\n        ${this.effectiveType !== BadgeType.empty\n          ? html`\n              ${this.showIcon\n                ? html`\n                    <div\n                      class=${classMap({\n                        icon: true,\n                        ['type-' + this.type]: isFlat,\n                      })}\n                    >\n                      ${this.renderIcon()}\n                    </div>\n                  `\n                : nothing}\n              ${this.showNumber\n                ? html`<div class=\"number\">\n                    <span class=\"number-text\">${this.number}</span>\n                  </div>`\n                : ''}\n            `\n          : ''}\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-badge': ObcBadge;\n  }\n}\n"],"names":["BadgeSize","BadgeType","BadgeVariant"],"mappings":"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"}

package/dist/manual-icon/icon-alerts-critical-twotone.d.ts

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
 /**
- * `<obi-alerts-critical-twotone>` – Two-tone bell icon for the ISA "critical" alert severity.
+ * `<obi-alerts-critical-twotone>` – Two-tone bell icon for the level "critical" alert severity.
  *
  * Renders the alert (bell) glyph as a layered two-tone shape so the silhouette and
  * fill can be tinted independently. Used wherever a critical-severity alert needs an

package/dist/manual-icon/icon-alerts-critical-twotone.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-alerts-critical-twotone.js","sources":["../../src/manual-icon/icon-alerts-critical-twotone.ts"],"sourcesContent":["import {LitElement, html, css, svg} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {customElement} from '../decorator.js';\n\n/**\n * `<obi-alerts-critical-twotone>` – Two-tone bell icon for the ISA \"critical\" alert severity.\n *\n * Renders the alert (bell) glyph as a layered two-tone shape so the silhouette and\n * fill can be tinted independently. Used wherever a critical-severity alert needs an\n * icon representation (badges, frames, lists).\n *\n * ### Features\n * - **Color modes:** Set `useCssColor` to render with the critical design tokens\n *   (`--alert-critical-color` / `--alert-critical-outline-color`); leave it `false`\n *   (default) to render with `currentColor` so the icon inherits its parent's color.\n *\n * ### Properties and Attributes\n * - `useCssColor` (boolean): When true, fills the two tones with the critical color\n *   tokens instead of `currentColor`. Defaults to `false`.\n */\n@customElement('obi-alerts-critical-twotone')\nexport class ObiAlertsCriticalTwotone extends LitElement {\n  @property({type: Boolean}) useCssColor = false;\n\n  private icon = svg`<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M4 19V17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H20V19H4ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22Z\" fill=\"currentColor\"/>\n<path d=\"M4 19V17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H20V19H4ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22ZM8 17H16V10C16 8.9 15.6083 7.95833 14.825 7.175C14.0417 6.39167 13.1 6 12 6C10.9 6 9.95833 6.39167 9.175 7.175C8.39167 7.95833 8 8.9 8 10V17Z\" fill=\"currentColor\"/>\n</svg>\n`;\n\n  private iconCss = svg`<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M4 19V17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H20V19H4ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22Z\" style=\"fill: var(--alert-critical-color)\"/>\n<path d=\"M4 19V17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H20V19H4ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22ZM8 17H16V10C16 8.9 15.6083 7.95833 14.825 7.175C14.0417 6.39167 13.1 6 12 6C10.9 6 9.95833 6.39167 9.175 7.175C8.39167 7.95833 8 8.9 8 10V17Z\" style=\"fill: var(--alert-critical-outline-color)\"/>\n</svg>\n`;\n\n  override render() {\n    return html`\n      <div class=\"wrapper\">${this.useCssColor ? this.iconCss : this.icon}</div>\n    `;\n  }\n\n  static override styles = css`\n    .wrapper {\n      height: 100%;\n      width: 100%;\n      line-height: 0;\n    }\n    .wrapper > * {\n      height: 100%;\n      width: 100%;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obi-alerts-critical-twotone': ObiAlertsCriticalTwotone;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAqBO,IAAM,2BAAN,cAAuC,WAAW;AAAA,EAAlD,cAAA;AAAA,UAAA,GAAA,SAAA;AACsB,SAAA,cAAc;AAEzC,SAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAMf,SAAQ,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAAA,EAMT,SAAS;AAChB,WAAO;AAAA,6BACkB,KAAK,cAAc,KAAK,UAAU,KAAK,IAAI;AAAA;AAAA,EAEtE;AAaF;AAhCa,yBAqBK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AApBE,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GADd,yBACgB,WAAA,eAAA,CAAA;AADhB,2BAAN,gBAAA;AAAA,EADN,cAAc,6BAA6B;AAAA,GAC/B,wBAAA;"}
+{"version":3,"file":"icon-alerts-critical-twotone.js","sources":["../../src/manual-icon/icon-alerts-critical-twotone.ts"],"sourcesContent":["import {LitElement, html, css, svg} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {customElement} from '../decorator.js';\n\n/**\n * `<obi-alerts-critical-twotone>` – Two-tone bell icon for the level \"critical\" alert severity.\n *\n * Renders the alert (bell) glyph as a layered two-tone shape so the silhouette and\n * fill can be tinted independently. Used wherever a critical-severity alert needs an\n * icon representation (badges, frames, lists).\n *\n * ### Features\n * - **Color modes:** Set `useCssColor` to render with the critical design tokens\n *   (`--alert-critical-color` / `--alert-critical-outline-color`); leave it `false`\n *   (default) to render with `currentColor` so the icon inherits its parent's color.\n *\n * ### Properties and Attributes\n * - `useCssColor` (boolean): When true, fills the two tones with the critical color\n *   tokens instead of `currentColor`. Defaults to `false`.\n */\n@customElement('obi-alerts-critical-twotone')\nexport class ObiAlertsCriticalTwotone extends LitElement {\n  @property({type: Boolean}) useCssColor = false;\n\n  private icon = svg`<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M4 19V17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H20V19H4ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22Z\" fill=\"currentColor\"/>\n<path d=\"M4 19V17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H20V19H4ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22ZM8 17H16V10C16 8.9 15.6083 7.95833 14.825 7.175C14.0417 6.39167 13.1 6 12 6C10.9 6 9.95833 6.39167 9.175 7.175C8.39167 7.95833 8 8.9 8 10V17Z\" fill=\"currentColor\"/>\n</svg>\n`;\n\n  private iconCss = svg`<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M4 19V17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H20V19H4ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22Z\" style=\"fill: var(--alert-critical-color)\"/>\n<path d=\"M4 19V17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H20V19H4ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22ZM8 17H16V10C16 8.9 15.6083 7.95833 14.825 7.175C14.0417 6.39167 13.1 6 12 6C10.9 6 9.95833 6.39167 9.175 7.175C8.39167 7.95833 8 8.9 8 10V17Z\" style=\"fill: var(--alert-critical-outline-color)\"/>\n</svg>\n`;\n\n  override render() {\n    return html`\n      <div class=\"wrapper\">${this.useCssColor ? this.iconCss : this.icon}</div>\n    `;\n  }\n\n  static override styles = css`\n    .wrapper {\n      height: 100%;\n      width: 100%;\n      line-height: 0;\n    }\n    .wrapper > * {\n      height: 100%;\n      width: 100%;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obi-alerts-critical-twotone': ObiAlertsCriticalTwotone;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAqBO,IAAM,2BAAN,cAAuC,WAAW;AAAA,EAAlD,cAAA;AAAA,UAAA,GAAA,SAAA;AACsB,SAAA,cAAc;AAEzC,SAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAMf,SAAQ,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAAA,EAMT,SAAS;AAChB,WAAO;AAAA,6BACkB,KAAK,cAAc,KAAK,UAAU,KAAK,IAAI;AAAA;AAAA,EAEtE;AAaF;AAhCa,yBAqBK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AApBE,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GADd,yBACgB,WAAA,eAAA,CAAA;AADhB,2BAAN,gBAAA;AAAA,EADN,cAAc,6BAA6B;AAAA,GAC/B,wBAAA;"}