@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.151 → 2.0.0-next.152

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 '../../icons/icon-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';\nimport {blinkingAll} from '../../palettes/blinking.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 * @property wrapContent - 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 * @property fullWidth - When true, the frame stretches to fill the full width of its container\n *   instead of hugging its content. Reflected to an attribute for CSS styling.\n * @property sharpEdgeTopLeft - If true, the top-left corner will be sharp (not rounded).\n * @property sharpEdgeTopRight - If true, the top-right corner will be sharp (not rounded).\n * @property sharpEdgeBottomLeft - If true, the bottom-left corner will be sharp (not rounded).\n * @property sharpEdgeBottomRight - If true, the bottom-right corner will be sharp (not rounded).\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 * @beta\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  @property({type: Boolean, reflect: true}) wrapContent: boolean = false;\n\n  @property({type: Boolean, reflect: true}) fullWidth: boolean = false;\n\n  @property({type: Boolean}) sharpEdgeTopLeft: boolean = false;\n\n  @property({type: Boolean}) sharpEdgeTopRight: boolean = false;\n\n  @property({type: Boolean}) sharpEdgeBottomLeft: boolean = false;\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          'full-width': this.fullWidth,\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 _blinkAnimationCancel?: () => void;\n\n  private syncBlinking() {\n    if (\n      this.mode !== ObcAlertFrameMode.unackedActive &&\n      this._blinkAnimationCancel\n    ) {\n      this._blinkAnimationCancel();\n      this._blinkAnimationCancel = undefined;\n    }\n\n    if (\n      this.mode === ObcAlertFrameMode.unackedActive &&\n      !this._blinkAnimationCancel\n    ) {\n      this._blinkAnimationCancel = blinkingAll(this);\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    if (this.hasUpdated) {\n      this.syncBlinking();\n    }\n  }\n\n  override updated() {\n    this.syncBlinking();\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this._blinkAnimationCancel?.();\n    this._blinkAnimationCancel = undefined;\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  fullWidth: boolean = false\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    .fullWidth=${fullWidth}\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, query, state} 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 '../../icons/icon-critical-badge.js';\nimport './diagnostic-badge.js';\nimport {customElement} from '../../decorator.js';\nimport {\n  AlertType,\n  FlashingSpeed,\n  type ResolvedFlashingSpeed,\n} from '../../types.js';\nimport {\n  getAlertBadgeComponent,\n  AlertBadgeComponent,\n} from '../../alert-severity.js';\nimport {FlashingController} from '../../palettes/flashing-controller.js';\nimport {\n  roundedRectPath,\n  type RoundedRect,\n} from '../../svghelpers/rounded-rect.js';\nimport {AlertFlashPhase, resolveFlashingSpeed} 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 * How the frame renders the on phase of a flash: `outline` grows the outline\n * outward by 2 px in one step (the design); `outline-eased` grows it the same\n * way over a 50 ms transition. The eased variant exists for design evaluation\n * and may be removed (#1224).\n */\nexport enum ObcAlertFrameFlashEffect {\n  Outline = 'outline',\n  OutlineEased = 'outline-eased',\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\n/** Wrapper geometry the dashed overlay is drawn from; measured, never derived from props. */\ninterface DashBox {\n  width: number;\n  height: number;\n  thickness: number;\n  radii: RoundedRect['radii'];\n}\n\n/** Room the svg leaves around the box for the stroke's on-phase growth. */\nconst DASH_FLASH_GROWTH_PX = 2;\n\nfunction sameDashBox(a: DashBox, b: DashBox | undefined): boolean {\n  return (\n    b !== undefined &&\n    a.width === b.width &&\n    a.height === b.height &&\n    a.thickness === b.thickness &&\n    a.radii.every((r, i) => r === b.radii[i])\n  );\n}\n\nexport interface AlertFrameConfig {\n  type?: ObcAlertFrameType;\n  thickness?: ObcAlertFrameThickness;\n  status?: AlertType;\n  mode?: ObcAlertFrameMode;\n  flashingSpeed?: FlashingSpeed;\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, steady), `unacked-active` (flashes) and `unacked-rectified` (dashed, flashes) — and `flashingSpeed` picks the tempo.\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 * @property wrapContent - 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 * @property fullWidth - When true, the frame stretches to fill the full width of its container\n *   instead of hugging its content. Reflected to an attribute for CSS styling.\n * @property sharpEdgeTopLeft - If true, the top-left corner will be sharp (not rounded).\n * @property sharpEdgeTopRight - If true, the top-right corner will be sharp (not rounded).\n * @property sharpEdgeBottomLeft - If true, the bottom-left corner will be sharp (not rounded).\n * @property sharpEdgeBottomRight - If true, the bottom-right corner will be sharp (not rounded).\n * @property flashingSpeed - Flash tempo: `default` resolves from the alert type and mode\n *   (critical/alarm/high fast, warning/medium slow, low very slow, every rectified alert very\n *   slow, caution and diagnostic fixed), `fast`, `slow`, `very-slow` force a tempo, `fixed`\n *   never flashes. Acknowledged frames are always steady.\n * @property flashEffect - `outline` (default) grows the outline by 2 px while on in one step;\n *   `outline-eased` grows it over a 50 ms transition, a design-evaluation option.\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 * @beta\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  @property({type: String}) flashingSpeed: FlashingSpeed =\n    FlashingSpeed.Default;\n\n  @property({type: String}) flashEffect: ObcAlertFrameFlashEffect =\n    ObcAlertFrameFlashEffect.Outline;\n\n  protected readonly flashing = new FlashingController(\n    this,\n    () => this.resolvedFlashingSpeed\n  );\n\n  @state() private dashBox?: DashBox;\n\n  @query('.wrapper') private wrapper?: HTMLElement;\n\n  private dashObserver?: ResizeObserver;\n\n  private measureDash = (): void => {\n    const wrapper = this.wrapper;\n    if (!wrapper) {\n      return;\n    }\n    const style = getComputedStyle(wrapper);\n    const px = (value: string) => parseFloat(value) || 0;\n    const box: DashBox = {\n      width: wrapper.offsetWidth,\n      height: wrapper.offsetHeight,\n      thickness: px(style.getPropertyValue('--thickness')),\n      radii: [\n        px(style.borderTopLeftRadius),\n        px(style.borderTopRightRadius),\n        px(style.borderBottomRightRadius),\n        px(style.borderBottomLeftRadius),\n      ],\n    };\n    // Setting state from updated() re-renders; only do it for a real change.\n    if (!sameDashBox(box, this.dashBox)) {\n      this.dashBox = box;\n    }\n  };\n\n  override connectedCallback() {\n    super.connectedCallback();\n    if (this.hasUpdated) {\n      this.requestUpdate();\n    }\n  }\n\n  override updated() {\n    const wantsDash =\n      this.mode === ObcAlertFrameMode.unackedRectified && this.isConnected;\n    if (wantsDash && !this.dashObserver && this.wrapper) {\n      this.dashObserver = new ResizeObserver(this.measureDash);\n      this.dashObserver.observe(this.wrapper);\n    }\n    if (wantsDash) {\n      // thickness and sharpEdge* change the radii without a resize.\n      this.measureDash();\n    }\n    if (!wantsDash && this.dashObserver) {\n      this.dashObserver.disconnect();\n      this.dashObserver = undefined;\n      this.dashBox = undefined;\n    }\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.dashObserver?.disconnect();\n    this.dashObserver = undefined;\n  }\n\n  private renderDash(): TemplateResult | typeof nothing {\n    const box = this.dashBox;\n    if (this.mode !== ObcAlertFrameMode.unackedRectified || !box) {\n      return nothing;\n    }\n    const pad = box.thickness + DASH_FLASH_GROWTH_PX;\n    // A second, wider path for the on phase would have longer corner arcs\n    // and its dashes would drift around the frame.\n    const centreline: RoundedRect = {\n      x: pad - box.thickness / 2,\n      y: pad - box.thickness / 2,\n      width: box.width + box.thickness,\n      height: box.height + box.thickness,\n      // A radius of 0 is a sharp edge and must stay square.\n      radii: box.radii.map((r) =>\n        r > 0 ? r + box.thickness / 2 : 0\n      ) as RoundedRect['radii'],\n    };\n    const width = box.width + 2 * pad;\n    const height = box.height + 2 * pad;\n    return html`<svg\n      class=\"dash\"\n      aria-hidden=\"true\"\n      width=${width}\n      height=${height}\n      viewBox=\"0 0 ${width} ${height}\"\n      style=\"--dash-pad: ${pad}px\"\n    >\n      <path d=${roundedRectPath(centreline)}></path>\n    </svg>`;\n  }\n\n  get resolvedFlashingSpeed(): ResolvedFlashingSpeed {\n    switch (this.mode) {\n      case ObcAlertFrameMode.unackedActive:\n        return resolveFlashingSpeed(\n          this.flashingSpeed,\n          this.status,\n          AlertFlashPhase.Active\n        );\n      case ObcAlertFrameMode.unackedRectified:\n        return resolveFlashingSpeed(\n          this.flashingSpeed,\n          this.status,\n          AlertFlashPhase.Rectified\n        );\n      default:\n        return FlashingSpeed.Fixed;\n    }\n  }\n\n  @property({type: Boolean, reflect: true}) wrapContent: boolean = false;\n\n  @property({type: Boolean, reflect: true}) fullWidth: boolean = false;\n\n  @property({type: Boolean}) sharpEdgeTopLeft: boolean = false;\n\n  @property({type: Boolean}) sharpEdgeTopRight: boolean = false;\n\n  @property({type: Boolean}) sharpEdgeBottomLeft: boolean = false;\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          'full-width': this.fullWidth,\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          ['flash-' + this.resolvedFlashingSpeed]: true,\n          ['flash-effect-' + this.flashEffect]: true,\n        })}\n      >\n        <slot></slot>\n        ${this.renderDash()} ${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  fullWidth: boolean = false\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    .flashingSpeed=${options.flashingSpeed ?? FlashingSpeed.Default}\n    .showIcon=${options.showIcon ?? false}\n    .showAlertCategoryIcon=${options.showAlertCategoryIcon ?? true}\n    .wrapContent=${true}\n    .fullWidth=${fullWidth}\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","ObcAlertFrameFlashEffect","AlertFrameTextSize"],"mappings":"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"}

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

@@ -1,5 +1,6 @@
 import { LitElement, TemplateResult } from 'lit';
-import { AlertType } from '../../types.js';
+import { AlertType, FlashingSpeed, ResolvedFlashingSpeed } from '../../types.js';
+import { FlashingController } from '../../palettes/flashing-controller.js';
 import '../../icons/icon-caution-color-iec.js';
 import '../../icons/icon-alarm-badge-outline.js';
 import '../../icons/icon-warning-badge-outline.js';
@@ -29,7 +30,7 @@ import '../alert-frame/diagnostic-badge.js';
  *
  * ## Features
  * - **Multiple Icon Types:** Supports all alarm and warning types.
- * - **Blinking Animation:** Uses two SVG layers with alternating opacity to create a blinking effect, visually emphasizing the alert or warning state.
+ * - **Flashing:** Two SVG layers alternate at the design tempo (fast for critical/alarm/high, slow for warning/medium, very slow for low and for every rectified alert); acknowledged icons are steady.
  * - **Adaptive Styling:** Applies different CSS variables for alarm and warning types to allow for distinct visual cues (e.g., color, blink timing).
  * - **Scalable:** Designed to fit any container size; scales with its parent element.
  *
@@ -52,6 +53,9 @@ import '../alert-frame/diagnostic-badge.js';
  * <obc-alert-icon .alarmType=${alarm.type} .alarmStatus=${alarm.status}></obc-alert-icon>
  * ```
  *
+ * @property flashingSpeed - Flash tempo: `default` resolves from the alert type and state,
+ *   `fast`, `slow`, `very-slow` force a tempo, `fixed` never flashes. Acknowledged icons are
+ *   always steady.
  * @availableWhen acknowledged type in [Alarm, Warning, LevelCritical, LevelHigh, LevelMedium, LevelLow]
  * @availableWhen active type in [Alarm, Warning, LevelCritical, LevelHigh, LevelMedium, LevelLow]
  * @stable
@@ -62,6 +66,10 @@ export declare class ObcAlertIcon extends LitElement {
     acknowledged?: boolean;
     active?: boolean;
     silenced?: boolean;
+    /** Flash tempo: `default` resolves from the alert type and state, `fast`, `slow`, `very-slow` force a tempo, `fixed` never flashes. Acknowledged icons are always steady. */
+    flashingSpeed: FlashingSpeed;
+    protected readonly flashing: FlashingController;
+    get resolvedFlashingSpeed(): ResolvedFlashingSpeed;
     private get _effectiveType();
     private get bamType();
     private get _effectiveState();
@@ -74,11 +82,6 @@ export declare class ObcAlertIcon extends LitElement {
     } | null;
     private renderStaticIcon;
     render(): TemplateResult<1>;
-    private _blinkAnimationCancel?;
-    private syncBlinking;
-    connectedCallback(): void;
-    updated(): void;
-    disconnectedCallback(): void;
     static styles: import('lit').CSSResult;
 }
 declare global {

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

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

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

@@ -3,8 +3,8 @@ import { property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import "../../icons/icon-caution-color-iec.js";
 import { customElement } from "../../decorator.js";
-import { AlertType } from "../../types.js";
-import { getBamAlertTypeForBlinking, supportsBlinking, getAlertBlinkMode } from "../../alert-severity.js";
+import { AlertType, FlashingSpeed } from "../../types.js";
+import { resolveFlashingSpeed, AlertFlashPhase, getBamAlertTypeForBlinking } from "../../alert-severity.js";
 import "../../icons/icon-alarm-badge-outline.js";
 import "../../icons/icon-warning-badge-outline.js";
 import "../../icons/icon-caution-badge-outline.js";
@@ -33,7 +33,7 @@ import { lowUnacknowledgedB, lowUnacknowledgedA } from "./icons/icon-low-unackno
 import { lowSilencedB, lowSilencedA } from "./icons/icon-low-silenced.js";
 import { lowRectifiedB, lowRectifiedA } from "./icons/icon-low-rectified.js";
 import { lowAcknowledged } from "./icons/icon-low-acknowledged.js";
-import { blinkingAll } from "../../palettes/blinking.js";
+import { FlashingController } from "../../palettes/flashing-controller.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -159,6 +159,21 @@ let ObcAlertIcon = class extends LitElement {
   constructor() {
     super(...arguments);
     this.alertType = AlertType.Alarm;
+    this.flashingSpeed = FlashingSpeed.Default;
+    this.flashing = new FlashingController(
+      this,
+      () => this.resolvedFlashingSpeed
+    );
+  }
+  get resolvedFlashingSpeed() {
+    if (this.acknowledged || !this.icon) {
+      return FlashingSpeed.Fixed;
+    }
+    return resolveFlashingSpeed(
+      this.flashingSpeed,
+      this._effectiveType,
+      this.active === false ? AlertFlashPhase.Rectified : AlertFlashPhase.Active
+    );
   }
   get _effectiveType() {
     if (this.type) {
@@ -322,19 +337,11 @@ let ObcAlertIcon = class extends LitElement {
     if (!this._effectiveType) {
       return html`<div>No alarm</div>`;
     }
-    if (supportsBlinking(this._effectiveType, this.acknowledged ?? false)) {
-      const icons = this.icon;
-      if (!icons) {
-        throw new Error("No icon found");
-      }
-      const blinkMode = getAlertBlinkMode(this._effectiveType);
+    const tempo = this.resolvedFlashingSpeed;
+    const icons = this.icon;
+    if (tempo !== FlashingSpeed.Fixed && icons) {
       return html`
-        <div
-          class=${classMap({
-        wrapper: true,
-        [`blink-${blinkMode}`]: true
-      })}
-        >
+        <div class=${classMap({ wrapper: true, [`flash-${tempo}`]: true })}>
           <span class="a">${icons.a}</span>
           <span class="b">${icons.b}</span>
         </div>
@@ -342,31 +349,6 @@ let ObcAlertIcon = class extends LitElement {
     }
     return html`<div class="wrapper">${this.renderStaticIcon()}</div>`;
   }
-  syncBlinking() {
-    if (this._blinkAnimationCancel && !supportsBlinking(this._effectiveType, this.acknowledged ?? false)) {
-      this._blinkAnimationCancel();
-      this._blinkAnimationCancel = void 0;
-    }
-    if (!this._blinkAnimationCancel && supportsBlinking(this._effectiveType, this.acknowledged ?? false)) {
-      this._blinkAnimationCancel = blinkingAll(this);
-    }
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    if (this.hasUpdated) {
-      this.syncBlinking();
-    }
-  }
-  updated() {
-    this.syncBlinking();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this._blinkAnimationCancel) {
-      this._blinkAnimationCancel();
-      this._blinkAnimationCancel = void 0;
-    }
-  }
 };
 ObcAlertIcon.styles = css`
     .wrapper {
@@ -393,36 +375,28 @@ ObcAlertIcon.styles = css`
         top: 0;
         left: 0;
       }
-      &.blink-alarm .a {
-        opacity: var(--alarm-blink-on);
-      }
-
-      &.blink-alarm .b {
-        opacity: var(--alarm-blink-off);
-      }
-
-      &.blink-critical .a {
-        opacity: var(--critical-blink-on);
+      &.flash-fast .a {
+        opacity: var(--flash-fast-on);
       }
 
-      &.blink-critical .b {
-        opacity: var(--critical-blink-off);
+      &.flash-fast .b {
+        opacity: var(--flash-fast-off);
       }
 
-      &.blink-warning .a {
-        opacity: var(--warning-blink-on);
+      &.flash-slow .a {
+        opacity: var(--flash-slow-on);
       }
 
-      &.blink-warning .b {
-        opacity: var(--warning-blink-off);
+      &.flash-slow .b {
+        opacity: var(--flash-slow-off);
       }
 
-      &.blink-low .a {
-        opacity: var(--low-blink-on);
+      &.flash-very-slow .a {
+        opacity: var(--flash-very-slow-on);
       }
 
-      &.blink-low .b {
-        opacity: var(--low-blink-off);
+      &.flash-very-slow .b {
+        opacity: var(--flash-very-slow-off);
       }
     }
   `;
@@ -441,6 +415,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], ObcAlertIcon.prototype, "silenced", 2);
+__decorateClass([
+  property({ type: String })
+], ObcAlertIcon.prototype, "flashingSpeed", 2);
 ObcAlertIcon = __decorateClass([
   customElement("obc-alert-icon")
 ], ObcAlertIcon);

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

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

@@ -5,10 +5,7 @@ const compentStyle = css`* {
 
 :host {
   --action-width: 82px;
-  --trailing-icon-size: var(
-    --app-components-alert-components-general-notification-item-icon-size-large,
-    32px
-  );
+  --trailing-icon-size: var(--app-components-message-menu-item-icon-size-large);
   display: block;
 }
 

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

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

package/dist/components/date-item/date-item.css.js

@@ -100,8 +100,6 @@ const componentStyle = css`* {
     width: 100%;
     max-width: var(--menu-navigation-components-date-item-touch-target);
     height: var(--menu-navigation-components-date-item-touch-target);
-    padding: var(--menu-navigation-components-date-item-padding-vertical)
-      var(--menu-navigation-components-date-item-padding-horizontal);
 
     /* Keyboard press visual feedback */
 }
@@ -471,7 +469,9 @@ const componentStyle = css`* {
   display: flex;
   width: var(--menu-navigation-components-date-item-touch-target, 48px);
   height: var(--menu-navigation-components-date-item-touch-target, 48px);
-  padding: var(--menu-navigation-components-date-item-padding-vertical, 8px)
+  /* TODO(designer): Figma pads this frame with Date item/padding-bottom, 12 and 16px in
+     large and xl, less room than the date container needs; 8px fits every size (#929) */
+  padding: 8px
     var(--menu-navigation-components-date-item-padding-horizontal, 8px);
   flex-direction: column;
   justify-content: center;

package/dist/components/keyboard-full/keyboard-full.css.js

@@ -122,8 +122,8 @@ obc-input::part(input) {
 .key-button {
   display: flex;
   flex: 1 0 0;
-  min-width: var(--ui-components-keyboard-numeric-touch-target-size);
-  min-height: var(--ui-components-keyboard-numeric-button-size-min);
+  min-width: var(--ui-components-keyboard-button-size-min);
+  min-height: var(--ui-components-keyboard-button-size-min);
 }
 
 obc-button.key-button::part(wrapper) {
@@ -134,8 +134,8 @@ obc-button.key-button::part(visible-wrapper) {
   box-sizing: border-box;
   display: flex;
   width: 100%;
-  min-width: var(--ui-components-keyboard-numeric-touch-target-size);
-  min-height: var(--ui-components-keyboard-numeric-button-size-min);
+  min-width: var(--ui-components-keyboard-button-size-min);
+  min-height: var(--ui-components-keyboard-button-size-min);
   align-items: center;
   justify-content: center;
   align-self: stretch;

package/dist/components/message-menu-item/message-menu-item.css.js

@@ -239,12 +239,8 @@ const compentStyle = css`* {
     }
 
 .trailing-icon {
-  width: var(
-    --app-components-alert-components-general-notification-item-icon-size-large
-  );
-  height: var(
-    --app-components-alert-components-general-notification-item-icon-size-large
-  );
+  width: var(--app-components-message-menu-item-icon-size-large);
+  height: var(--app-components-message-menu-item-icon-size-large);
   display: flex;
   align-items: center;
   justify-content: center;

package/dist/components/message-menu-item/message-menu-item.css.js.map

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

package/dist/components/sequence-toolbar/sequence-toolbar.css.js

@@ -17,7 +17,7 @@ const style = css`* {
   align-items: center;
   padding: 5px;
   border: 1px solid var(--border-outline-color);
-  background-color: var(--enabled-background-color);
+  background-color: var(--container-global-color);
 }
 
 .sequence-toolbar.type-sequential,.sequence-toolbar.type-unordered {
@@ -33,7 +33,6 @@ const style = css`* {
 
 .sequence-toolbar.type-condensed {
     border-radius: 100px;
-    background-color: var(--normal-enabled-background-color);
   }
 
 .sequence-toolbar.type-condensed .condensed-label__current {

package/dist/components/sequence-toolbar/sequence-toolbar.css.js.map

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

package/dist/index.js

@@ -1,9 +1,10 @@
-import { ALERT_SEVERITY_PRIORITY, AlertCategory, AlertType, Direction, comparePriorityAlerts, formatTimeSince, isAcknowledged, isActive, isBlocked, isShelved } from "./types.js";
+import { ALERT_SEVERITY_PRIORITY, AlertCategory, AlertType, Direction, FlashingSpeed, comparePriorityAlerts, formatTimeSince, isAcknowledged, isActive, isBlocked, isShelved } from "./types.js";
 export {
   ALERT_SEVERITY_PRIORITY,
   AlertCategory,
   AlertType,
   Direction,
+  FlashingSpeed,
   comparePriorityAlerts,
   formatTimeSince,
   isAcknowledged,

package/dist/navigation-instruments/gauge-trend/gauge-trend.d.ts

@@ -228,6 +228,12 @@ export declare class ObcGaugeTrend extends ObcGaugeTrend_base {
      * Stacking is not used in gauge-trend (always false).
      */
     protected shouldStack(): boolean;
+    /**
+     * The right scale is this component's own bar, ranged by `minValue` /
+     * `maxValue`. `chartMinValue` / `chartMaxValue` exist so the plotted range
+     * can differ from it, so the chart's axis range must not overwrite it.
+     */
+    protected ownsSlottedScaleRange(side: 'left' | 'right' | 'top' | 'bottom'): boolean;
     willUpdate(changed: Map<PropertyKey, unknown>): void;
     updated(changed: Map<PropertyKey, unknown>): void;
 }

package/dist/navigation-instruments/gauge-trend/gauge-trend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"gauge-trend.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/gauge-trend/gauge-trend.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,gBAAgB,EAKjB,MAAM,qDAAqD,CAAC;AAE7D,OAAO,EACL,QAAQ,EAGR,SAAS,EACV,MAAM,oDAAoD,CAAC;AAC5D,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,mDAAmD,CAAC;AAEpF,OAAO,oDAAoD,CAAC;AAG5D,OAAO,EAAC,QAAQ,EAAE,SAAS,EAAC,CAAC;;AAE7B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8HG;AACH,qBACa,aAAc,SAAQ,kBAA+B;IAChE,OAAO,CAAC,mBAAmB,CAAC,CAAc;IAC1C,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,kBAAkB,CAAS;IACnC,OAAO,CAAC,qBAAqB,CAAC,CAAY;;IA6C3B,YAAY;IAWlB,oBAAoB;IAQ7B,OAAO,CAAC,yBAAyB;IAWjC,OAAO,CAAC,2BAA2B;IAUnC,OAAO,CAAC,4BAA4B;IAkFpC;;;;;;;OAOG;IAEH,SAAS,EAAE,SAAS,CAAqB;IAGzC,QAAQ,SAAK;IAGb,QAAQ,SAAO;IAGf,aAAa,CAAC,EAAE,MAAM,CAAa;IAGnC,aAAa,CAAC,EAAE,MAAM,CAAa;IAEnC;;;;;;;;;;OAUG;IAEH,KAAK,CAAC,EAAE,MAAM,CAAa;IAE3B;;;;;OAKG;IAEH,MAAM,UAAS;IAGf,QAAQ,UAAS;IAGjB,SAAS,UAAS;IAElB;;;;;;;;;OASG;IAEH,QAAQ,EAAE,QAAQ,CAAiB;IAGnC,OAAO,SAAK;IAEZ;;;;;;;;OAQG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAa;IAG7B,MAAM,EAAE,YAAY,EAAE,CAAM;IAG5B,uBAAuB,CAAC,EAAE,MAAM,CAAa;IAQ7C,yBAAyB,SAAO;IAGhC,wBAAwB,CAAC,EAAE,MAAM,CAAa;IAG9C,SAAS,UAAS;IAElB;;OAEG;cACgB,eAAe,IAAI,OAAO;IAI7C;;;OAGG;cACgB,WAAW,IAAI,MAAM,GAAG,SAAS;IAIpD;;OAEG;cACgB,WAAW,IAAI,OAAO;IAIhC,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;IAuD7C,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;CAkDpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
+{"version":3,"file":"gauge-trend.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/gauge-trend/gauge-trend.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,gBAAgB,EAKjB,MAAM,qDAAqD,CAAC;AAE7D,OAAO,EACL,QAAQ,EAGR,SAAS,EACV,MAAM,oDAAoD,CAAC;AAC5D,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,mDAAmD,CAAC;AAEpF,OAAO,oDAAoD,CAAC;AAG5D,OAAO,EAAC,QAAQ,EAAE,SAAS,EAAC,CAAC;;AAE7B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8HG;AACH,qBACa,aAAc,SAAQ,kBAA+B;IAChE,OAAO,CAAC,mBAAmB,CAAC,CAAc;IAC1C,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,kBAAkB,CAAS;IACnC,OAAO,CAAC,qBAAqB,CAAC,CAAY;;IA6C3B,YAAY;IAWlB,oBAAoB;IAQ7B,OAAO,CAAC,yBAAyB;IAWjC,OAAO,CAAC,2BAA2B;IAUnC,OAAO,CAAC,4BAA4B;IAkFpC;;;;;;;OAOG;IAEH,SAAS,EAAE,SAAS,CAAqB;IAGzC,QAAQ,SAAK;IAGb,QAAQ,SAAO;IAGf,aAAa,CAAC,EAAE,MAAM,CAAa;IAGnC,aAAa,CAAC,EAAE,MAAM,CAAa;IAEnC;;;;;;;;;;OAUG;IAEH,KAAK,CAAC,EAAE,MAAM,CAAa;IAE3B;;;;;OAKG;IAEH,MAAM,UAAS;IAGf,QAAQ,UAAS;IAGjB,SAAS,UAAS;IAElB;;;;;;;;;OASG;IAEH,QAAQ,EAAE,QAAQ,CAAiB;IAGnC,OAAO,SAAK;IAEZ;;;;;;;;OAQG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAa;IAG7B,MAAM,EAAE,YAAY,EAAE,CAAM;IAG5B,uBAAuB,CAAC,EAAE,MAAM,CAAa;IAQ7C,yBAAyB,SAAO;IAGhC,wBAAwB,CAAC,EAAE,MAAM,CAAa;IAG9C,SAAS,UAAS;IAElB;;OAEG;cACgB,eAAe,IAAI,OAAO;IAI7C;;;OAGG;cACgB,WAAW,IAAI,MAAM,GAAG,SAAS;IAIpD;;OAEG;cACgB,WAAW,IAAI,OAAO;IAIzC;;;;OAIG;cACgB,qBAAqB,CACtC,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GACxC,OAAO;IAID,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;IAuD7C,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;CAkDpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/navigation-instruments/gauge-trend/gauge-trend.js

@@ -150,6 +150,14 @@ let ObcGaugeTrend = class extends SetpointMixin(ObcChartLineBase) {
   shouldStack() {
     return false;
   }
+  /**
+   * The right scale is this component's own bar, ranged by `minValue` /
+   * `maxValue`. `chartMinValue` / `chartMaxValue` exist so the plotted range
+   * can differ from it, so the chart's axis range must not overwrite it.
+   */
+  ownsSlottedScaleRange(side) {
+    return side !== "right";
+  }
   willUpdate(changed) {
     if (changed.has("xAxisType") && this.xAxisType !== this._autoAppliedXAxisType && (this.hasUpdated || this.xAxisType !== XAxisType.category)) {
       this._explicitXAxisType = true;