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

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

@@ -29,12 +29,12 @@ const compentStyle = css`* {
   position: relative;
   width: 100%;
   height: 100%;
-  border-radius: calc(
-    var(--ui-components-button-border-radius) + var(--thickness) / 2
-  );
+  /* The stroke's centreline follows this radius, like a Figma centre stroke. */
+  border-radius: var(--ui-components-button-border-radius);
   outline: var(--thickness) solid var(--bg-color);
-  outline-offset: 0;
-  /* +2 px outward while on, both thicknesses (Figma Flash=yes: 2 → 4 px). */
+  /* Centre stroke: frames on touching components share one edge. */
+  outline-offset: calc(-1 * var(--thickness) / 2);
+  /* +2 px while on, 1 px each side, both thicknesses (Figma Flash=yes: 2 → 4 px). */
   --blink-width: 2px;
 }
 
@@ -72,7 +72,9 @@ const compentStyle = css`* {
 }
 
 .wrapper.flash-effect-outline-eased {
-    transition: outline-width var(--flash-transition);
+    transition:
+      outline-width var(--flash-transition),
+      outline-offset var(--flash-transition);
   }
 
 .wrapper.flash-effect-outline-eased .flap {
@@ -100,14 +102,10 @@ const compentStyle = css`* {
 
 .wrapper.unacked-active,.wrapper.unacked-rectified {
     outline-width: calc(var(--thickness) + var(--blink-width-dynamic));
-  }
-
-.wrapper.unacked-active {
-    --flap-grow: var(--blink-width-dynamic);
-  }
-
-.wrapper.unacked-rectified {
-    /* The dashed stroke is centred, so it moves out by half its growth. */
+    outline-offset: calc(
+      -1 * (var(--thickness) + var(--blink-width-dynamic)) / 2
+    );
+    /* The stroke grows on both sides, so its outer edge moves by half. */
     --flap-grow: calc(var(--blink-width-dynamic) / 2);
   }
 
@@ -169,9 +167,9 @@ const compentStyle = css`* {
 }
 
 .flap.small {
-    top: calc(-1 * var(--thickness));
+    top: calc(-1 * var(--thickness) / 2);
     right: calc(
-      -1 * var(--app-components-alert-frame-icon-size) - var(--thickness) / 2 -
+      -1 * var(--app-components-alert-frame-icon-size) -
         var(--ui-components-badge-padding) * 2
     );
   }
@@ -281,10 +279,10 @@ const compentStyle = css`* {
 
 .flap.large {
     flex-direction: column;
-    top: calc(-1 * var(--thickness));
-    bottom: calc(-1 * var(--thickness));
+    top: calc(-1 * var(--thickness) / 2);
+    bottom: calc(-1 * var(--thickness) / 2);
     right: calc(
-      -1 * var(--app-components-alert-frame-icon-size) + var(--thickness) / 2 -
+      -1 * var(--app-components-alert-frame-icon-size) + var(--thickness) -
         var(--ui-components-badge-padding) * 2
     );
     border-radius: 0px
@@ -293,13 +291,12 @@ const compentStyle = css`* {
   }
 
 .flap.bottom,.flap.top {
-    left: calc(-1 * var(--thickness));
-    right: calc(-1 * var(--thickness));
+    left: calc(-1 * var(--thickness) / 2);
+    right: calc(-1 * var(--thickness) / 2);
     padding: var(--app-components-alert-frame-large-flip-padding-vertical)
       var(--app-components-alert-frame-large-flip-4px-padding-horizontal);
     bottom: calc(
-      -1 * var(--thickness) / 2 -
-        var(--global-typography-ui-label-line-height) -
+      -1 * var(--global-typography-ui-label-line-height) -
         var(--app-components-alert-frame-large-flip-padding-vertical) * 2
     );
     border-radius: 0px 0px var(--button-border-radius-bottom-right)
@@ -335,7 +332,7 @@ const compentStyle = css`* {
     "clig" off,
     "ss04" on;
       bottom: calc(
-        var(--thickness) / 2 - var(--global-typography-ui-body-line-height) -
+        var(--thickness) - var(--global-typography-ui-body-line-height) -
           var(--app-components-alert-frame-large-flip-padding-vertical) * 2
       );
     }
@@ -354,8 +351,7 @@ const compentStyle = css`* {
 .flap.top {
     bottom: unset !important;
     top: calc(
-      -1 * var(--thickness) / 2 -
-        var(--global-typography-ui-label-line-height) -
+      -1 * var(--global-typography-ui-label-line-height) -
         var(--app-components-alert-frame-large-flip-padding-vertical) * 2
     );
     border-radius: var(--button-border-radius-bottom-right)
@@ -364,7 +360,7 @@ const compentStyle = css`* {
 
 .text-size-large .flap.top {
       top: calc(
-        var(--thickness) / 2 - var(--global-typography-ui-body-line-height) -
+        var(--thickness) - var(--global-typography-ui-body-line-height) -
           var(--app-components-alert-frame-large-flip-padding-vertical) * 2
       );
     }

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

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

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

@@ -37,10 +37,10 @@ export declare enum ObcAlertFrameMode {
     unackedRectified = "unacked-rectified"
 }
 /**
- * How the frame renders the on phase of a flash: `outline` grows the outline
- * outward by 2 px in one step (the design); `outline-eased` grows it the same
- * way over a 50 ms transition. The eased variant exists for design evaluation
- * and may be removed (#1224).
+ * How the frame renders the on phase of a flash: `outline` grows the centred
+ * stroke by 2 px, 1 px on each side, in one step (the design); `outline-eased`
+ * grows it the same way over a 50 ms transition. The eased variant exists for
+ * design evaluation and may be removed (#1224).
  */
 export declare enum ObcAlertFrameFlashEffect {
     Outline = "outline",
@@ -77,6 +77,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.
+ * - **Centred stroke:** The stroke straddles the frame edge, half over the content and half outside, so frames on touching components share one edge. While flashing it grows by 1 px on each side.
  * - **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, steady), `unacked-active` (flashes) and `unacked-rectified` (dashed, flashes) — and `flashingSpeed` picks the tempo.
  * - **Content wrapping:** When `wrapContent` is true, the frame wraps and sizes itself to its slotted content rather than overlaying a fixed region.
@@ -149,7 +150,7 @@ export interface AlertFrameConfig {
  *   (critical/alarm/high fast, warning/medium slow, low very slow, every rectified alert very
  *   slow, caution and diagnostic fixed), `fast`, `slow`, `very-slow` force a tempo, `fixed`
  *   never flashes. Acknowledged frames are always steady.
- * @property flashEffect - `outline` (default) grows the outline by 2 px while on in one step;
+ * @property flashEffect - `outline` (default) grows the outline by 2 px, 1 px each side, while on in one step;
  *   `outline-eased` grows it over a 50 ms transition, a design-evaluation option.
  * @slot - Default slot for main alert content.
  * @slot icon - Custom icon for the flap (large-side-flip, bottom-flip).
@@ -191,7 +192,7 @@ export declare class ObcAlertFrame extends LitElement {
     mode: ObcAlertFrameMode;
     /** Flash tempo: `default` resolves from the alert type and mode (critical/alarm/high fast, warning/medium slow, low very slow, every rectified alert very slow, caution and diagnostic fixed), `fast`, `slow`, `very-slow` force a tempo, `fixed` never flashes. Acknowledged frames are always steady. */
     flashingSpeed: FlashingSpeed;
-    /** `outline` (default) grows the outline by 2 px while on in one step; `outline-eased` grows it over a 50 ms transition, a design-evaluation option. */
+    /** `outline` (default) grows the outline by 2 px, 1 px each side, while on in one step; `outline-eased` grows it over a 50 ms transition, a design-evaluation option. */
     flashEffect: ObcAlertFrameFlashEffect;
     protected readonly flashing: FlashingController;
     private dashBox?;

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

@@ -1 +1 @@
-{"version":3,"file":"alert-frame.d.ts","sourceRoot":"","sources":["../../../src/components/alert-frame/alert-frame.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"alert-frame.d.ts","sourceRoot":"","sources":["../../../src/components/alert-frame/alert-frame.ts"],"names":[],"mappings":"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"}

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

@@ -131,16 +131,13 @@ let ObcAlertFrame = class extends LitElement {
     if (this.mode !== "unacked-rectified" || !box) {
       return nothing;
     }
-    const pad = box.thickness + DASH_FLASH_GROWTH_PX;
+    const pad = (box.thickness + DASH_FLASH_GROWTH_PX) / 2;
     const centreline = {
-      x: pad - box.thickness / 2,
-      y: pad - box.thickness / 2,
-      width: box.width + box.thickness,
-      height: box.height + box.thickness,
-      // A radius of 0 is a sharp edge and must stay square.
-      radii: box.radii.map(
-        (r) => r > 0 ? r + box.thickness / 2 : 0
-      )
+      x: pad,
+      y: pad,
+      width: box.width,
+      height: box.height,
+      radii: box.radii
     };
     const width = box.width + 2 * pad;
     const height = box.height + 2 * pad;

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, 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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"}
+{"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 centred\n * stroke by 2 px, 1 px on each side, in one step (the design); `outline-eased`\n * grows it the same way over a 50 ms transition. The eased variant exists for\n * design evaluation 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/** On-phase stroke growth; the svg leaves half of stroke plus growth around the box. */\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 * - **Centred stroke:** The stroke straddles the frame edge, half over the content and half outside, so frames on touching components share one edge. While flashing it grows by 1 px on each side.\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, 1 px each side, 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) / 2;\n    // The centreline is the wrapper edge, as for the solid outline. A second,\n    // wider path for the on phase would have longer corner arcs and its\n    // dashes would drift around the frame.\n    const centreline: RoundedRect = {\n      x: pad,\n      y: pad,\n      width: box.width,\n      height: box.height,\n      radii: box.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/tree-navigation-item/tree-navigation-item.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import { AlertCounts } from '../../types.js';
 import '../../icons/icon-chevron-right-google.js';
 import '../../icons/icon-alert-header-aggregated-iec.js';
 import '../../icons/icon-alert-header-group-iec.js';
@@ -34,36 +35,16 @@ export declare enum TreeTerminalType {
     groupHeader = "group-header"
 }
 /**
- * Per-severity alert counts for a tree row's trailing badge(s). Each `count*`
- * is the number of active alerts of that severity at or beneath the row — the
- * level severities `level-critical`, `level-high`, `level-medium`, `level-low`,
- * and `level-diagnostic`, plus the IEC severities `alarm`, `warning`, and
- * `caution`. Badges are ordered and aggregated by the shared
- * `ALERT_SEVERITY_PRIORITY` ranking, most to least severe.
+ * Per-severity alert counts for a tree row's trailing badge(s): the active
+ * alerts at or beneath the row, ordered by `rankAlertCounts`.
  *
  * Set `combine` to collapse the counts into a single badge showing the total,
  * styled as the highest category present; otherwise one badge is rendered per
  * non-zero count.
  */
-export interface TreeNavigationItemAlerts {
+export interface TreeNavigationItemAlerts extends AlertCounts {
     /** Collapse all counts into one badge: total count, highest-severity style. */
     combine?: boolean;
-    /** Number of level-critical alerts. */
-    countLevelCritical?: number;
-    /** Number of alarm alerts. */
-    countAlarm?: number;
-    /** Number of level-high alerts. */
-    countLevelHigh?: number;
-    /** Number of warning alerts. */
-    countWarning?: number;
-    /** Number of level-medium alerts. */
-    countLevelMedium?: number;
-    /** Number of caution alerts. */
-    countCaution?: number;
-    /** Number of level-low alerts. */
-    countLevelLow?: number;
-    /** Number of level-diagnostic alerts. */
-    countLevelDiagnostic?: number;
 }
 /**
  * `<obc-tree-navigation-item>` – A single row in a tree- or file-explorer-style
@@ -166,8 +147,8 @@ export declare class ObcTreeNavigationItem extends LitElement {
      * every count at 0) for a row with no alerts. See {@link TreeNavigationItemAlerts}.
      *
      * - When `combine` is true, a single badge is shown: its number is the sum
-     *   of all counts and its severity is the highest category present
-     *   (critical → alarm → warning → caution).
+     *   of all counts and its severity is the highest category present, ranked
+     *   by `ALERT_SEVERITY_PRIORITY`.
      * - Otherwise one badge is shown per count greater than 0, ordered most to
      *   least severe and spaced by the alert-counter spacing token.
      */
@@ -177,15 +158,7 @@ export declare class ObcTreeNavigationItem extends LitElement {
     private wrapperElement?;
     /** Focuses the row's interactive wrapper (the host itself is not focusable). */
     focus(options?: FocusOptions): void;
-    /**
-     * The badge(s) to render from `alerts`, as `{type, count}` pairs already in
-     * severity order, ranked by `ALERT_SEVERITY_PRIORITY`.
-     *
-     * - No `alerts`, or every count 0 → no badges.
-     * - `combine` → a single pair: the summed count typed as the highest
-     *   category that has any alerts.
-     * - Otherwise → one pair per count greater than 0.
-     */
+    /** The badge(s) to render from `alerts`, ranked by `rankAlertCounts`. */
     private get alertBadges();
     /** A root-level row has no ancestor columns, so it draws no connector lines. */
     private get isRoot();

package/dist/components/tree-navigation-item/tree-navigation-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tree-navigation-item.d.ts","sourceRoot":"","sources":["../../../src/components/tree-navigation-item/tree-navigation-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAMzD,OAAO,0CAA0C,CAAC;AAClD,OAAO,iDAAiD,CAAC;AACzD,OAAO,4CAA4C,CAAC;AACpD,OAAO,mBAAmB,CAAC;AAG3B;;;;;;;;GAQG;AACH,oBAAY,cAAc;IACxB,QAAQ,aAAa;IACrB,YAAY,iBAAiB;IAC7B,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED;;;;;;;;;GASG;AACH,oBAAY,gBAAgB;IAC1B,OAAO,YAAY;IACnB,gBAAgB,sBAAsB;IACtC,WAAW,iBAAiB;CAC7B;AAED;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,wBAAwB;IACvC,+EAA+E;IAC/E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uCAAuC;IACvC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,8BAA8B;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gCAAgC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qCAAqC;IACrC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gCAAgC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yCAAyC;IACzC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AACH,qBACa,qBAAsB,SAAQ,UAAU;IACzB,KAAK,SAAe;IAErB,QAAQ,EAAE,cAAc,EAAE,CAAM;IAE9B,UAAU,UAAS;IAEJ,QAAQ,UAAS;IAEjB,OAAO,UAAS;IAEhB,QAAQ,UAAS;IAEd,SAAS,UAAQ;IAEjB,cAAc,UAAQ;IAEzC,YAAY,EAAE,MAAM,CAA4B;IAE1E;;;;;;;;;OASG;IACuB,MAAM,CAAC,EAAE,wBAAwB,CAAC;IAElC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEhC,OAAO,CAAC,cAAc,CAAC,CAAc;IAExD,gFAAgF;IAChE,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAInD;;;;;;;;OAQG;IACH,OAAO,KAAK,WAAW,GAyBtB;IAED,gFAAgF;IAChF,OAAO,KAAK,MAAM,GAEjB;IAED;;;OAGG;IACH,OAAO,KAAK,eAAe,GAK1B;IAED,OAAO,CAAC,QAAQ;IAiBhB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,YAAY;IAkBpB,OAAO,CAAC,oBAAoB;IAcnB,MAAM;IAgEf,OAAgB,MAAM,0BAA6B;CACpD;AAED,MAAM,MAAM,sCAAsC,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;AAE1E,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,0BAA0B,EAAE,qBAAqB,CAAC;KACnD;CACF"}
+{"version":3,"file":"tree-navigation-item.d.ts","sourceRoot":"","sources":["../../../src/components/tree-navigation-item/tree-navigation-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAMzD,OAAO,0CAA0C,CAAC;AAClD,OAAO,iDAAiD,CAAC;AACzD,OAAO,4CAA4C,CAAC;AACpD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAGhD;;;;;;;;GAQG;AACH,oBAAY,cAAc;IACxB,QAAQ,aAAa;IACrB,YAAY,iBAAiB;IAC7B,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED;;;;;;;;;GASG;AACH,oBAAY,gBAAgB;IAC1B,OAAO,YAAY;IACnB,gBAAgB,sBAAsB;IACtC,WAAW,iBAAiB;CAC7B;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,wBAAyB,SAAQ,WAAW;IAC3D,+EAA+E;IAC/E,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AACH,qBACa,qBAAsB,SAAQ,UAAU;IACzB,KAAK,SAAe;IAErB,QAAQ,EAAE,cAAc,EAAE,CAAM;IAE9B,UAAU,UAAS;IAEJ,QAAQ,UAAS;IAEjB,OAAO,UAAS;IAEhB,QAAQ,UAAS;IAEd,SAAS,UAAQ;IAEjB,cAAc,UAAQ;IAEzC,YAAY,EAAE,MAAM,CAA4B;IAE1E;;;;;;;;;OASG;IACuB,MAAM,CAAC,EAAE,wBAAwB,CAAC;IAElC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEhC,OAAO,CAAC,cAAc,CAAC,CAAc;IAExD,gFAAgF;IAChE,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAInD,yEAAyE;IACzE,OAAO,KAAK,WAAW,GAEtB;IAED,gFAAgF;IAChF,OAAO,KAAK,MAAM,GAEjB;IAED;;;OAGG;IACH,OAAO,KAAK,eAAe,GAK1B;IAED,OAAO,CAAC,QAAQ;IAiBhB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,YAAY;IAkBpB,OAAO,CAAC,oBAAoB;IAcnB,MAAM;IAgEf,OAAgB,MAAM,0BAA6B;CACpD;AAED,MAAM,MAAM,sCAAsC,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;AAE1E,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,0BAA0B,EAAE,qBAAqB,CAAC;KACnD;CACF"}

package/dist/components/tree-navigation-item/tree-navigation-item.js

@@ -8,7 +8,7 @@ import "../../icons/icon-chevron-right-google.js";
 import "../../icons/icon-alert-header-aggregated-iec.js";
 import "../../icons/icon-alert-header-group-iec.js";
 import "../badge/badge.js";
-import { AlertType, ALERT_SEVERITY_PRIORITY } from "../../types.js";
+import { rankAlertCounts } from "../../alert-severity.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -49,38 +49,9 @@ let ObcTreeNavigationItem = class extends LitElement {
   focus(options) {
     this.wrapperElement?.focus(options);
   }
-  /**
-   * The badge(s) to render from `alerts`, as `{type, count}` pairs already in
-   * severity order, ranked by `ALERT_SEVERITY_PRIORITY`.
-   *
-   * - No `alerts`, or every count 0 → no badges.
-   * - `combine` → a single pair: the summed count typed as the highest
-   *   category that has any alerts.
-   * - Otherwise → one pair per count greater than 0.
-   */
+  /** The badge(s) to render from `alerts`, ranked by `rankAlertCounts`. */
   get alertBadges() {
-    const alerts = this.alerts;
-    if (!alerts) return [];
-    const countByType = {
-      [AlertType.LevelCritical]: alerts.countLevelCritical ?? 0,
-      [AlertType.Alarm]: alerts.countAlarm ?? 0,
-      [AlertType.LevelHigh]: alerts.countLevelHigh ?? 0,
-      [AlertType.Warning]: alerts.countWarning ?? 0,
-      [AlertType.LevelMedium]: alerts.countLevelMedium ?? 0,
-      [AlertType.Caution]: alerts.countCaution ?? 0,
-      [AlertType.LevelLow]: alerts.countLevelLow ?? 0,
-      [AlertType.LevelDiagnostic]: alerts.countLevelDiagnostic ?? 0
-    };
-    const ranked = ALERT_SEVERITY_PRIORITY.filter(
-      (type) => type in countByType
-    ).map((type) => ({ type, count: countByType[type] ?? 0 }));
-    if (alerts.combine) {
-      const total = ranked.reduce((sum, b) => sum + b.count, 0);
-      const highest = ranked.find((b) => b.count > 0);
-      if (!highest) return [];
-      return [{ type: highest.type, count: total }];
-    }
-    return ranked.filter((b) => b.count > 0);
+    return this.alerts ? rankAlertCounts(this.alerts, this.alerts.combine) : [];
   }
   /** A root-level row has no ancestor columns, so it draws no connector lines. */
   get isRoot() {

package/dist/components/tree-navigation-item/tree-navigation-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree-navigation-item.js","sources":["../../../src/components/tree-navigation-item/tree-navigation-item.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport componentStyle from './tree-navigation-item.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {customElement} from '../../decorator.js';\nimport '../../icons/icon-chevron-right-google.js';\nimport '../../icons/icon-alert-header-aggregated-iec.js';\nimport '../../icons/icon-alert-header-group-iec.js';\nimport '../badge/badge.js';\nimport {AlertType, ALERT_SEVERITY_PRIORITY} from '../../types.js';\n\n/**\n * Guide line drawn for one indentation column. Normally computed by\n * `obc-tree-navigation`; rarely set by hand.\n *\n * - `straight`: vertical pass-through (`│`)\n * - `intersection`: vertical + stub for a non-last child (`├`)\n * - `corner`: half vertical + stub for the last child (`└`)\n * - `blank`: empty spacer\n */\nexport enum TreeBranchType {\n  straight = 'straight',\n  intersection = 'intersection',\n  corner = 'corner',\n  blank = 'blank',\n}\n\n/**\n * Terminal type for a tree item, controlling the alert-header marker shown in\n * the terminal (top-right, by the chevron).\n *\n * - `regular`: No marker — a plain expand/collapse terminal.\n * - `aggregatedHeader`: Shows the aggregated alert-header marker, indicating the\n *   node aggregates alerts from its descendants.\n * - `groupHeader`: Shows the group alert-header marker, indicating a grouped set\n *   of alerts beneath the node.\n */\nexport enum TreeTerminalType {\n  regular = 'regular',\n  aggregatedHeader = 'aggregated-header',\n  groupHeader = 'group-header',\n}\n\n/**\n * Per-severity alert counts for a tree row's trailing badge(s). Each `count*`\n * is the number of active alerts of that severity at or beneath the row — the\n * level severities `level-critical`, `level-high`, `level-medium`, `level-low`,\n * and `level-diagnostic`, plus the IEC severities `alarm`, `warning`, and\n * `caution`. Badges are ordered and aggregated by the shared\n * `ALERT_SEVERITY_PRIORITY` ranking, most to least severe.\n *\n * Set `combine` to collapse the counts into a single badge showing the total,\n * styled as the highest category present; otherwise one badge is rendered per\n * non-zero count.\n */\nexport interface TreeNavigationItemAlerts {\n  /** Collapse all counts into one badge: total count, highest-severity style. */\n  combine?: boolean;\n  /** Number of level-critical alerts. */\n  countLevelCritical?: number;\n  /** Number of alarm alerts. */\n  countAlarm?: number;\n  /** Number of level-high alerts. */\n  countLevelHigh?: number;\n  /** Number of warning alerts. */\n  countWarning?: number;\n  /** Number of level-medium alerts. */\n  countLevelMedium?: number;\n  /** Number of caution alerts. */\n  countCaution?: number;\n  /** Number of level-low alerts. */\n  countLevelLow?: number;\n  /** Number of level-diagnostic alerts. */\n  countLevelDiagnostic?: number;\n}\n\n/**\n * `<obc-tree-navigation-item>` – A single row in a tree- or file-explorer-style\n * navigation list, with indentation guide lines, an optional expand/collapse\n * chevron, a leading icon, a label, and an optional alert badge.\n *\n * Each row represents one node in a hierarchy. Depth is expressed through the\n * `branches` array: one entry per ancestor level, each describing the guide line\n * to draw for that level. The expand chevron lets a node disclose its children,\n * emitting `expand-toggle` so a parent can manage the open/closed state.\n *\n * ## Features\n * - **Indentation guides:** Render one 32px guide column per `branches` entry —\n *   pass-through vertical lines for ancestors that continue, and an elbow\n *   (`intersection`) connecting the row to its parent.\n * - **Expand/collapse:** Set `expandable` to show a chevron that rotates when\n *   `expanded`. The chevron is a visual indicator only — activating the row\n *   fires `expand-toggle` with the next state; manage `expanded` in response.\n *   When `expanded`, a vertical guide descends from the chevron to connect to\n *   the revealed child rows below.\n * - **Terminal type:** `terminalType` adds an alert-header marker in the terminal\n *   (`aggregatedHeader` or `groupHeader`), indicating the node heads a set of\n *   aggregated or grouped alerts.\n * - **Leading icon:** Provide an icon via the `icon` slot (shown when\n *   `hasLeadingIcon`).\n * - **Alert badges:** Trailing counter badges driven by the `alerts` object — a\n *   per-severity count map with one field per level severity (critical, high,\n *   medium, low, diagnostic). By default each non-zero count renders its own\n *   badge, ordered most to least severe by `ALERT_SEVERITY_PRIORITY`; set\n *   `alerts.combine` to instead show a single badge with the combined total,\n *   styled as the highest category present.\n * - **Checked state:** `checked` highlights the current selection using the\n *   amplified elevation style. A checked row is the current item and is not\n *   re-selectable — it shows no hover/pressed feedback and fires no `click` or\n *   navigation. An expandable checked row still toggles (fires `expand-toggle`),\n *   so a group that is the current selection can be opened and closed. It stays\n *   keyboard-focusable.\n * - **Link or button:** Set `href` to render the row as a link; otherwise it acts\n *   as a button.\n *\n * ## Usage Guidelines\n * - Use for hierarchical navigation such as file trees, layer panels, or nested\n *   menus. For flat navigation lists, use `obc-navigation-item` instead.\n * - Build `branches` from the row's ancestry: `intersection` for the level that\n *   owns this row, `straight` for ancestors with siblings still to come, and\n *   `blank` for ancestors whose subtrees have ended. When placed inside\n *   `obc-tree-navigation`, the container computes `branches` automatically.\n * - Keep one row `checked` at a time within a tree to mark the current location.\n * - Leaf nodes should leave `expandable` as `false` so no chevron is shown.\n *\n * ## Slots\n *\n * | Slot Name      | Renders When...                 | Purpose                                                                 |\n * |----------------|---------------------------------|-------------------------------------------------------------------------|\n * | icon           | `hasLeadingIcon` is true        | Leading icon for the row, e.g. `<obi-placeholder slot=\"icon\">`.         |\n *\n * @property label - The text label displayed for the row.\n * @property branches - Guide line for each ancestor level, outermost first; one 32px column per\n *   entry. Computed by `obc-tree-navigation` — rarely set by hand.\n * @property expandable - Whether the row shows an expand/collapse chevron. Leave false for leaf nodes.\n * @property expanded - Whether the node is expanded. Rotates the chevron and sets `aria-expanded`.\n * @property checked - Whether the row is the current selection. Applies the amplified style and\n *   makes the row inert to re-selection (no hover/pressed feedback, no `click`\n *   or navigation); it remains keyboard-focusable. An expandable checked row\n *   still fires `expand-toggle` so a selected group can open and close.\n * @property disabled - Disables the row, removing it from the tab order and dimming its appearance.\n * @property focusable - Whether the row is in the tab order. A tree container manages this as a\n *   roving tabindex (one row focusable at a time); standalone rows stay tabbable.\n * @property hasLeadingIcon - Whether the row shows a leading icon (provided via the `icon` slot).\n * @property terminalType - Terminal type, controlling the alert-header marker shown in the terminal.\n *   One of `regular` (default), `aggregated-header`, or `group-header`.\n * @property href - The URL to navigate to when the row is activated. If set, the row renders as\n *   a link; otherwise it acts as a button.\n * @slot icon - Leading icon slot (shown when `hasLeadingIcon` is true).\n * @fires {CustomEvent<boolean>} expand-toggle - Fired when an expandable row is activated; detail is the next `expanded` value.\n * @fires {CustomEvent<void>} click - Fired when the row is activated.\n * @beta\n */\n@customElement('obc-tree-navigation-item')\nexport class ObcTreeNavigationItem extends LitElement {\n  @property({type: String}) label = 'List item';\n\n  @property({type: Array}) branches: TreeBranchType[] = [];\n\n  @property({type: Boolean}) expandable = false;\n\n  @property({type: Boolean, reflect: true}) expanded = false;\n\n  @property({type: Boolean, reflect: true}) checked = false;\n\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  @property({type: Boolean, attribute: false}) focusable = true;\n\n  @property({type: Boolean, attribute: false}) hasLeadingIcon = true;\n\n  @property({type: String}) terminalType: string = TreeTerminalType.regular;\n\n  /**\n   * Per-severity alert counts for the row's trailing badge(s). Omit (or leave\n   * every count at 0) for a row with no alerts. See {@link TreeNavigationItemAlerts}.\n   *\n   * - When `combine` is true, a single badge is shown: its number is the sum\n   *   of all counts and its severity is the highest category present\n   *   (critical → alarm → warning → caution).\n   * - Otherwise one badge is shown per count greater than 0, ordered most to\n   *   least severe and spaced by the alert-counter spacing token.\n   */\n  @property({type: Object}) alerts?: TreeNavigationItemAlerts;\n\n  @property({type: String}) href: string | undefined;\n\n  @query('.wrapper') private wrapperElement?: HTMLElement;\n\n  /** Focuses the row's interactive wrapper (the host itself is not focusable). */\n  public override focus(options?: FocusOptions): void {\n    this.wrapperElement?.focus(options);\n  }\n\n  /**\n   * The badge(s) to render from `alerts`, as `{type, count}` pairs already in\n   * severity order, ranked by `ALERT_SEVERITY_PRIORITY`.\n   *\n   * - No `alerts`, or every count 0 → no badges.\n   * - `combine` → a single pair: the summed count typed as the highest\n   *   category that has any alerts.\n   * - Otherwise → one pair per count greater than 0.\n   */\n  private get alertBadges(): {type: AlertType; count: number}[] {\n    const alerts = this.alerts;\n    if (!alerts) return [];\n    const countByType: Partial<Record<AlertType, number>> = {\n      [AlertType.LevelCritical]: alerts.countLevelCritical ?? 0,\n      [AlertType.Alarm]: alerts.countAlarm ?? 0,\n      [AlertType.LevelHigh]: alerts.countLevelHigh ?? 0,\n      [AlertType.Warning]: alerts.countWarning ?? 0,\n      [AlertType.LevelMedium]: alerts.countLevelMedium ?? 0,\n      [AlertType.Caution]: alerts.countCaution ?? 0,\n      [AlertType.LevelLow]: alerts.countLevelLow ?? 0,\n      [AlertType.LevelDiagnostic]: alerts.countLevelDiagnostic ?? 0,\n    };\n    // Order (and, when combining, rank) by the shared severity priority,\n    // keeping only the severities this component exposes.\n    const ranked = ALERT_SEVERITY_PRIORITY.filter(\n      (type) => type in countByType\n    ).map((type) => ({type, count: countByType[type] ?? 0}));\n    if (alerts.combine) {\n      const total = ranked.reduce((sum, b) => sum + b.count, 0);\n      const highest = ranked.find((b) => b.count > 0);\n      if (!highest) return [];\n      return [{type: highest.type, count: total}];\n    }\n    return ranked.filter((b) => b.count > 0);\n  }\n\n  /** A root-level row has no ancestor columns, so it draws no connector lines. */\n  private get isRoot(): boolean {\n    return this.branches.length === 0;\n  }\n\n  /**\n   * All ancestor columns are blank spacers — the row is indented but draws no\n   * guide lines, so the terminal connector and dropdown are suppressed too.\n   */\n  private get isBlankAncestry(): boolean {\n    return (\n      this.branches.length > 0 &&\n      this.branches.every((b) => b === TreeBranchType.blank)\n    );\n  }\n\n  private activate() {\n    if (this.disabled) return;\n    // An expandable row always toggles, even when checked — a group that is the\n    // current selection must still open and close. A checked leaf, however, is\n    // the current selection and is inert (no re-selection click or navigation).\n    if (this.expandable) {\n      this.dispatchEvent(\n        new CustomEvent<boolean>('expand-toggle', {detail: !this.expanded})\n      );\n    }\n    if (this.checked) return;\n    this.dispatchEvent(new CustomEvent('click'));\n    if (this.href !== undefined) {\n      window.location.href = this.href;\n    }\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    if (this.disabled) return;\n    if (event.key !== 'Enter' && event.key !== ' ') return;\n    event.preventDefault();\n    this.activate();\n  }\n\n  private renderBranch(type: TreeBranchType) {\n    const hasVertical =\n      type === TreeBranchType.straight ||\n      type === TreeBranchType.intersection ||\n      type === TreeBranchType.corner;\n    const hasHorizontal =\n      type === TreeBranchType.intersection || type === TreeBranchType.corner;\n    return html`<div\n      class=${classMap({branch: true, ['branch-' + type]: true})}\n    >\n      ${hasVertical ? html`<div class=\"branch-vertical\"></div>` : nothing}\n      ${hasHorizontal ? html`<div class=\"branch-horizontal\"></div>` : nothing}\n      ${type === TreeBranchType.corner\n        ? html`<div class=\"branch-elbow\"></div>`\n        : nothing}\n    </div>`;\n  }\n\n  private renderTerminalHeader() {\n    if (this.terminalType === TreeTerminalType.aggregatedHeader) {\n      return html`<div class=\"terminal-header\" aria-hidden=\"true\">\n        <obi-alert-header-aggregated-iec></obi-alert-header-aggregated-iec>\n      </div>`;\n    }\n    if (this.terminalType === TreeTerminalType.groupHeader) {\n      return html`<div class=\"terminal-header\" aria-hidden=\"true\">\n        <obi-alert-header-group-iec></obi-alert-header-group-iec>\n      </div>`;\n    }\n    return nothing;\n  }\n\n  override render() {\n    return html`\n      <div\n        class=${classMap({\n          wrapper: true,\n          checked: this.checked,\n          disabled: this.disabled,\n          'has-icon': this.hasLeadingIcon,\n        })}\n        role=\"treeitem\"\n        aria-expanded=${ifDefined(this.expandable ? this.expanded : undefined)}\n        aria-current=${ifDefined(this.checked ? 'page' : undefined)}\n        aria-selected=${ifDefined(this.checked ? 'true' : undefined)}\n        aria-disabled=${ifDefined(this.disabled ? 'true' : undefined)}\n        tabindex=${this.disabled ? -1 : this.focusable ? 0 : -1}\n        @click=${this.activate}\n        @keydown=${this.handleKeydown}\n      >\n        <div class=\"visible-wrapper\">\n          <div class=\"tree-node-row\">\n            ${this.branches.map((branch) => this.renderBranch(branch))}\n            <div class=\"terminal\">\n              ${this.isRoot || this.isBlankAncestry\n                ? nothing\n                : html`<div class=\"terminal-connector\"></div>`}\n              ${!this.isRoot &&\n              !this.isBlankAncestry &&\n              this.expandable &&\n              this.expanded\n                ? html`<div class=\"terminal-dropdown\"></div>`\n                : nothing}\n              ${this.expandable\n                ? html`<div class=\"chevron\" aria-hidden=\"true\">\n                    <obi-chevron-right-google></obi-chevron-right-google>\n                  </div>`\n                : nothing}\n              ${this.renderTerminalHeader()}\n            </div>\n          </div>\n          <div class=\"label-container\">\n            ${this.hasLeadingIcon\n              ? html`<div class=\"leading-icon\">\n                  <slot name=\"icon\"></slot>\n                </div>`\n              : nothing}\n            <span part=\"label\" class=\"label\">${this.label}</span>\n          </div>\n          ${this.alertBadges.length > 0\n            ? html`<div class=\"alert-badges\">\n                ${this.alertBadges.map(\n                  (badge) =>\n                    html`<obc-badge\n                      class=\"alert-badge\"\n                      .type=${badge.type}\n                      .number=${badge.count}\n                    ></obc-badge>`\n                )}\n              </div>`\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\nexport type ObcTreeNavigationItemExpandToggleEvent = CustomEvent<boolean>;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-tree-navigation-item': ObcTreeNavigationItem;\n  }\n}\n"],"names":["TreeBranchType","TreeTerminalType"],"mappings":"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"}
+{"version":3,"file":"tree-navigation-item.js","sources":["../../../src/components/tree-navigation-item/tree-navigation-item.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport componentStyle from './tree-navigation-item.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {customElement} from '../../decorator.js';\nimport '../../icons/icon-chevron-right-google.js';\nimport '../../icons/icon-alert-header-aggregated-iec.js';\nimport '../../icons/icon-alert-header-group-iec.js';\nimport '../badge/badge.js';\nimport type {AlertCounts} from '../../types.js';\nimport {rankAlertCounts, type RankedAlertCount} from '../../alert-severity.js';\n\n/**\n * Guide line drawn for one indentation column. Normally computed by\n * `obc-tree-navigation`; rarely set by hand.\n *\n * - `straight`: vertical pass-through (`│`)\n * - `intersection`: vertical + stub for a non-last child (`├`)\n * - `corner`: half vertical + stub for the last child (`└`)\n * - `blank`: empty spacer\n */\nexport enum TreeBranchType {\n  straight = 'straight',\n  intersection = 'intersection',\n  corner = 'corner',\n  blank = 'blank',\n}\n\n/**\n * Terminal type for a tree item, controlling the alert-header marker shown in\n * the terminal (top-right, by the chevron).\n *\n * - `regular`: No marker — a plain expand/collapse terminal.\n * - `aggregatedHeader`: Shows the aggregated alert-header marker, indicating the\n *   node aggregates alerts from its descendants.\n * - `groupHeader`: Shows the group alert-header marker, indicating a grouped set\n *   of alerts beneath the node.\n */\nexport enum TreeTerminalType {\n  regular = 'regular',\n  aggregatedHeader = 'aggregated-header',\n  groupHeader = 'group-header',\n}\n\n/**\n * Per-severity alert counts for a tree row's trailing badge(s): the active\n * alerts at or beneath the row, ordered by `rankAlertCounts`.\n *\n * Set `combine` to collapse the counts into a single badge showing the total,\n * styled as the highest category present; otherwise one badge is rendered per\n * non-zero count.\n */\nexport interface TreeNavigationItemAlerts extends AlertCounts {\n  /** Collapse all counts into one badge: total count, highest-severity style. */\n  combine?: boolean;\n}\n\n/**\n * `<obc-tree-navigation-item>` – A single row in a tree- or file-explorer-style\n * navigation list, with indentation guide lines, an optional expand/collapse\n * chevron, a leading icon, a label, and an optional alert badge.\n *\n * Each row represents one node in a hierarchy. Depth is expressed through the\n * `branches` array: one entry per ancestor level, each describing the guide line\n * to draw for that level. The expand chevron lets a node disclose its children,\n * emitting `expand-toggle` so a parent can manage the open/closed state.\n *\n * ## Features\n * - **Indentation guides:** Render one 32px guide column per `branches` entry —\n *   pass-through vertical lines for ancestors that continue, and an elbow\n *   (`intersection`) connecting the row to its parent.\n * - **Expand/collapse:** Set `expandable` to show a chevron that rotates when\n *   `expanded`. The chevron is a visual indicator only — activating the row\n *   fires `expand-toggle` with the next state; manage `expanded` in response.\n *   When `expanded`, a vertical guide descends from the chevron to connect to\n *   the revealed child rows below.\n * - **Terminal type:** `terminalType` adds an alert-header marker in the terminal\n *   (`aggregatedHeader` or `groupHeader`), indicating the node heads a set of\n *   aggregated or grouped alerts.\n * - **Leading icon:** Provide an icon via the `icon` slot (shown when\n *   `hasLeadingIcon`).\n * - **Alert badges:** Trailing counter badges driven by the `alerts` object — a\n *   per-severity count map with one field per level severity (critical, high,\n *   medium, low, diagnostic). By default each non-zero count renders its own\n *   badge, ordered most to least severe by `ALERT_SEVERITY_PRIORITY`; set\n *   `alerts.combine` to instead show a single badge with the combined total,\n *   styled as the highest category present.\n * - **Checked state:** `checked` highlights the current selection using the\n *   amplified elevation style. A checked row is the current item and is not\n *   re-selectable — it shows no hover/pressed feedback and fires no `click` or\n *   navigation. An expandable checked row still toggles (fires `expand-toggle`),\n *   so a group that is the current selection can be opened and closed. It stays\n *   keyboard-focusable.\n * - **Link or button:** Set `href` to render the row as a link; otherwise it acts\n *   as a button.\n *\n * ## Usage Guidelines\n * - Use for hierarchical navigation such as file trees, layer panels, or nested\n *   menus. For flat navigation lists, use `obc-navigation-item` instead.\n * - Build `branches` from the row's ancestry: `intersection` for the level that\n *   owns this row, `straight` for ancestors with siblings still to come, and\n *   `blank` for ancestors whose subtrees have ended. When placed inside\n *   `obc-tree-navigation`, the container computes `branches` automatically.\n * - Keep one row `checked` at a time within a tree to mark the current location.\n * - Leaf nodes should leave `expandable` as `false` so no chevron is shown.\n *\n * ## Slots\n *\n * | Slot Name      | Renders When...                 | Purpose                                                                 |\n * |----------------|---------------------------------|-------------------------------------------------------------------------|\n * | icon           | `hasLeadingIcon` is true        | Leading icon for the row, e.g. `<obi-placeholder slot=\"icon\">`.         |\n *\n * @property label - The text label displayed for the row.\n * @property branches - Guide line for each ancestor level, outermost first; one 32px column per\n *   entry. Computed by `obc-tree-navigation` — rarely set by hand.\n * @property expandable - Whether the row shows an expand/collapse chevron. Leave false for leaf nodes.\n * @property expanded - Whether the node is expanded. Rotates the chevron and sets `aria-expanded`.\n * @property checked - Whether the row is the current selection. Applies the amplified style and\n *   makes the row inert to re-selection (no hover/pressed feedback, no `click`\n *   or navigation); it remains keyboard-focusable. An expandable checked row\n *   still fires `expand-toggle` so a selected group can open and close.\n * @property disabled - Disables the row, removing it from the tab order and dimming its appearance.\n * @property focusable - Whether the row is in the tab order. A tree container manages this as a\n *   roving tabindex (one row focusable at a time); standalone rows stay tabbable.\n * @property hasLeadingIcon - Whether the row shows a leading icon (provided via the `icon` slot).\n * @property terminalType - Terminal type, controlling the alert-header marker shown in the terminal.\n *   One of `regular` (default), `aggregated-header`, or `group-header`.\n * @property href - The URL to navigate to when the row is activated. If set, the row renders as\n *   a link; otherwise it acts as a button.\n * @slot icon - Leading icon slot (shown when `hasLeadingIcon` is true).\n * @fires {CustomEvent<boolean>} expand-toggle - Fired when an expandable row is activated; detail is the next `expanded` value.\n * @fires {CustomEvent<void>} click - Fired when the row is activated.\n * @beta\n */\n@customElement('obc-tree-navigation-item')\nexport class ObcTreeNavigationItem extends LitElement {\n  @property({type: String}) label = 'List item';\n\n  @property({type: Array}) branches: TreeBranchType[] = [];\n\n  @property({type: Boolean}) expandable = false;\n\n  @property({type: Boolean, reflect: true}) expanded = false;\n\n  @property({type: Boolean, reflect: true}) checked = false;\n\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  @property({type: Boolean, attribute: false}) focusable = true;\n\n  @property({type: Boolean, attribute: false}) hasLeadingIcon = true;\n\n  @property({type: String}) terminalType: string = TreeTerminalType.regular;\n\n  /**\n   * Per-severity alert counts for the row's trailing badge(s). Omit (or leave\n   * every count at 0) for a row with no alerts. See {@link TreeNavigationItemAlerts}.\n   *\n   * - When `combine` is true, a single badge is shown: its number is the sum\n   *   of all counts and its severity is the highest category present, ranked\n   *   by `ALERT_SEVERITY_PRIORITY`.\n   * - Otherwise one badge is shown per count greater than 0, ordered most to\n   *   least severe and spaced by the alert-counter spacing token.\n   */\n  @property({type: Object}) alerts?: TreeNavigationItemAlerts;\n\n  @property({type: String}) href: string | undefined;\n\n  @query('.wrapper') private wrapperElement?: HTMLElement;\n\n  /** Focuses the row's interactive wrapper (the host itself is not focusable). */\n  public override focus(options?: FocusOptions): void {\n    this.wrapperElement?.focus(options);\n  }\n\n  /** The badge(s) to render from `alerts`, ranked by `rankAlertCounts`. */\n  private get alertBadges(): RankedAlertCount[] {\n    return this.alerts ? rankAlertCounts(this.alerts, this.alerts.combine) : [];\n  }\n\n  /** A root-level row has no ancestor columns, so it draws no connector lines. */\n  private get isRoot(): boolean {\n    return this.branches.length === 0;\n  }\n\n  /**\n   * All ancestor columns are blank spacers — the row is indented but draws no\n   * guide lines, so the terminal connector and dropdown are suppressed too.\n   */\n  private get isBlankAncestry(): boolean {\n    return (\n      this.branches.length > 0 &&\n      this.branches.every((b) => b === TreeBranchType.blank)\n    );\n  }\n\n  private activate() {\n    if (this.disabled) return;\n    // An expandable row always toggles, even when checked — a group that is the\n    // current selection must still open and close. A checked leaf, however, is\n    // the current selection and is inert (no re-selection click or navigation).\n    if (this.expandable) {\n      this.dispatchEvent(\n        new CustomEvent<boolean>('expand-toggle', {detail: !this.expanded})\n      );\n    }\n    if (this.checked) return;\n    this.dispatchEvent(new CustomEvent('click'));\n    if (this.href !== undefined) {\n      window.location.href = this.href;\n    }\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    if (this.disabled) return;\n    if (event.key !== 'Enter' && event.key !== ' ') return;\n    event.preventDefault();\n    this.activate();\n  }\n\n  private renderBranch(type: TreeBranchType) {\n    const hasVertical =\n      type === TreeBranchType.straight ||\n      type === TreeBranchType.intersection ||\n      type === TreeBranchType.corner;\n    const hasHorizontal =\n      type === TreeBranchType.intersection || type === TreeBranchType.corner;\n    return html`<div\n      class=${classMap({branch: true, ['branch-' + type]: true})}\n    >\n      ${hasVertical ? html`<div class=\"branch-vertical\"></div>` : nothing}\n      ${hasHorizontal ? html`<div class=\"branch-horizontal\"></div>` : nothing}\n      ${type === TreeBranchType.corner\n        ? html`<div class=\"branch-elbow\"></div>`\n        : nothing}\n    </div>`;\n  }\n\n  private renderTerminalHeader() {\n    if (this.terminalType === TreeTerminalType.aggregatedHeader) {\n      return html`<div class=\"terminal-header\" aria-hidden=\"true\">\n        <obi-alert-header-aggregated-iec></obi-alert-header-aggregated-iec>\n      </div>`;\n    }\n    if (this.terminalType === TreeTerminalType.groupHeader) {\n      return html`<div class=\"terminal-header\" aria-hidden=\"true\">\n        <obi-alert-header-group-iec></obi-alert-header-group-iec>\n      </div>`;\n    }\n    return nothing;\n  }\n\n  override render() {\n    return html`\n      <div\n        class=${classMap({\n          wrapper: true,\n          checked: this.checked,\n          disabled: this.disabled,\n          'has-icon': this.hasLeadingIcon,\n        })}\n        role=\"treeitem\"\n        aria-expanded=${ifDefined(this.expandable ? this.expanded : undefined)}\n        aria-current=${ifDefined(this.checked ? 'page' : undefined)}\n        aria-selected=${ifDefined(this.checked ? 'true' : undefined)}\n        aria-disabled=${ifDefined(this.disabled ? 'true' : undefined)}\n        tabindex=${this.disabled ? -1 : this.focusable ? 0 : -1}\n        @click=${this.activate}\n        @keydown=${this.handleKeydown}\n      >\n        <div class=\"visible-wrapper\">\n          <div class=\"tree-node-row\">\n            ${this.branches.map((branch) => this.renderBranch(branch))}\n            <div class=\"terminal\">\n              ${this.isRoot || this.isBlankAncestry\n                ? nothing\n                : html`<div class=\"terminal-connector\"></div>`}\n              ${!this.isRoot &&\n              !this.isBlankAncestry &&\n              this.expandable &&\n              this.expanded\n                ? html`<div class=\"terminal-dropdown\"></div>`\n                : nothing}\n              ${this.expandable\n                ? html`<div class=\"chevron\" aria-hidden=\"true\">\n                    <obi-chevron-right-google></obi-chevron-right-google>\n                  </div>`\n                : nothing}\n              ${this.renderTerminalHeader()}\n            </div>\n          </div>\n          <div class=\"label-container\">\n            ${this.hasLeadingIcon\n              ? html`<div class=\"leading-icon\">\n                  <slot name=\"icon\"></slot>\n                </div>`\n              : nothing}\n            <span part=\"label\" class=\"label\">${this.label}</span>\n          </div>\n          ${this.alertBadges.length > 0\n            ? html`<div class=\"alert-badges\">\n                ${this.alertBadges.map(\n                  (badge) =>\n                    html`<obc-badge\n                      class=\"alert-badge\"\n                      .type=${badge.type}\n                      .number=${badge.count}\n                    ></obc-badge>`\n                )}\n              </div>`\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\nexport type ObcTreeNavigationItemExpandToggleEvent = CustomEvent<boolean>;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-tree-navigation-item': ObcTreeNavigationItem;\n  }\n}\n"],"names":["TreeBranchType","TreeTerminalType"],"mappings":"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"}

package/dist/generated/locales/es-419.d.ts

@@ -3,10 +3,20 @@ export declare const templates: {
     s8119af112f965c78: string;
     sa7f8e003ff63ef9f: string;
     se0955919920ee87d: string;
+    scd93bdcb7863611a: string;
+    s34be76c6b1eadbef: string;
+    sf11564cc75a8d5a6: string;
+    sa45f3300b97dabe8: string;
+    s9deeefd89ca8a81d: string;
+    sac6bdc71f750ac96: string;
+    s24f3a319b88552c1: string;
+    sca9e13f23f0c433e: string;
+    sf268637d594dacb2: string;
+    s88d1c1e15ca1aade: string;
+    s68395a4c26a9e8ac: string;
     sf993bb199fefbe04: string;
     s01b603dddbaba7b6: string;
     se92d11374fcdf768: string;
-    sf268637d594dacb2: string;
     s2a2488656f97b746: string;
     sf59d9197d2e50c93: string;
     s61a9ee872da3a0cd: string;
@@ -16,8 +26,6 @@ export declare const templates: {
     s5ba9818f6a39054c: string;
     sa45a194b58837e4f: string;
     sa6ef04345891fb38: string;
-    s68395a4c26a9e8ac: string;
-    s88d1c1e15ca1aade: string;
     s3cf89cb47fdde7e9: string;
     s47278872f6826da8: string;
     s9e34794bcfdc6665: string;

package/dist/generated/locales/es-419.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"es-419.d.ts","sourceRoot":"","sources":["../../../src/generated/locales/es-419.ts"],"names":[],"mappings":"AAUI,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4ErB,CAAC"}
+{"version":3,"file":"es-419.d.ts","sourceRoot":"","sources":["../../../src/generated/locales/es-419.ts"],"names":[],"mappings":"AAUI,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoFrB,CAAC"}