@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.48 → 2.0.0-next.50

package/dist/automation/automation-tank/automation-tank.js.map

@@ -1 +1 @@
-{"version":3,"file":"automation-tank.js","sources":["../../../src/automation/automation-tank/automation-tank.ts"],"sourcesContent":["import {\n  HTMLTemplateResult,\n  LitElement,\n  html,\n  nothing,\n  svg,\n  unsafeCSS,\n} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport compentStyle from './automation-tank.css?inline';\nimport {LineMedium} from '../index.js';\nimport '../automation-badge/automation-badge.js';\nimport {ObcAutomationBadgeType} from '../automation-badge/automation-badge.js';\nimport {\n  AutomationButtonBadgeAlert,\n  AutomationButtonBadgeCommandLocked,\n  AutomationButtonBadgeControl,\n  AutomationButtonBadgeInterlock,\n} from '../automation-button/abstract-automation-button.js';\n\nimport '../../icons/icon-chevron-double-up-google.js';\nimport '../../icons/icon-chevron-up-google.js';\nimport '../../icons/icon-chevron-double-down-google.js';\nimport '../../icons/icon-chevron-down-google.js';\nimport '../../icons/icon-off.js';\nimport '../../icons/icon-tank.js';\nimport '../../icons/icon-energy-battery.js';\nimport '../../navigation-instruments/gauge-trend/gauge-trend.js';\nimport '../../building-blocks/bar-vertical/bar-vertical.js';\nimport '../../components/alert-frame/alert-frame.js';\nimport {Priority} from '../../navigation-instruments/types.js';\nimport {\n  ObcAlertFrameStatus,\n  ObcAlertFrameThickness,\n  ObcAlertFrameType,\n} from '../../components/alert-frame/alert-frame.js';\nimport type {ChartLineDataItem} from '../../building-blocks/chart-line/chart-line-base.js';\nimport type {LinearAdvice} from '../../building-blocks/instrument-linear/advice.js';\nimport {\n  AdvicePosition,\n  ExternalScaleSide,\n  FillMode,\n} from '../../building-blocks/external-scale/external-scale.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../../decorator.js';\n\nexport enum TankTrend {\n  fastRising = 'fast-rising',\n  rising = 'rising',\n  stable = 'stable',\n  falling = 'falling',\n  fastFalling = 'fast-falling',\n  closed = 'closed',\n}\n\nexport enum TankType {\n  generic = 'generic',\n  atmospheric = 'atmospheric',\n  pressurized = 'pressurized',\n  battery = 'battery',\n}\n\nexport enum TankOrientation {\n  vertical = 'vertical',\n  horizontal = 'horizontal',\n}\n\n/**\n * Host positioning model.\n *\n * - `point` (default): the host has fixed default dimensions (per\n *   orientation and compact / static variant) and a P&ID anchor — the\n *   visual content is shifted with `translateX(-50%)` and (in non-compact)\n *   `top: -20px` so the tank's top-center aligns with the host's top-left\n *   placement coordinate. Use this when dropping the tank onto a P&ID\n *   canvas at a pipe-grid coordinate.\n * - `button`: the host fills its parent container (100% × 100%) with no\n *   anchor offset. Use this when embedding the tank inside a sized layout\n *   slot — the parent controls the footprint and the tank renders\n *   responsively inside it, just like a regular button. Compact / static\n *   inner layout still applies; only the host box is changed.\n */\nexport enum TankPositioning {\n  point = 'point',\n  button = 'button',\n}\n\nexport enum TankChartMode {\n  /** Static fill bar driven by `value` / `max` (default, backward compatible). */\n  bar = 'bar',\n  /** Embedded `obc-gauge-trend` line/area chart, no side bar. */\n  graph = 'graph',\n  /** Embedded `obc-gauge-trend` line/area chart with a side bar. */\n  graphAndBar = 'graph-and-bar',\n}\n\n/**\n *\n *\n * @ignition-base-height: 173px\n * @ignition-base-width: 168px\n * @ignition-center-horizontal\n */\n@customElement('obc-automation-tank')\nexport class ObcAutomationTank extends LitElement {\n  @property({type: String}) medium: LineMedium = LineMedium.water;\n  @property({type: Number}) value: number = 0;\n  @property({type: Number}) max: number = 100;\n  @property({type: String}) trend: TankTrend = TankTrend.stable;\n  @property({type: String, reflect: true}) type: TankType = TankType.generic;\n  @property({type: String, reflect: true}) orientation: TankOrientation =\n    TankOrientation.vertical;\n  @property({type: Boolean, reflect: true}) compact: boolean = false;\n  /**\n   * Host positioning model — see `TankPositioning` for details. Defaults to\n   * `point` for backward compatibility (fixed default dimensions + P&ID\n   * top-center anchor). Set to `button` to make the host fill its parent\n   * container (100% × 100%) with no anchor offset.\n   */\n  @property({type: String, reflect: true}) positioning: TankPositioning =\n    TankPositioning.point;\n  /**\n   * Static (display-only) variant. Always rendered at the compact size; the\n   * inner chart/bar is hidden, the bordered area is filled with\n   * `--container-section-color`, and the readout is centered inside the frame.\n   * Tag is rendered below the bordered area; badges (when slotted) sit above\n   * the frame inside the halo and shrink the frame just like in compact mode.\n   * Overrides `compact` (a static tank is always compact-sized).\n   *\n   * Static tanks render as a non-interactive `<div role=\"img\">` (not a\n   * `<button>`), so they are not in the tab order and do not announce as\n   * activatable controls.\n   */\n  @property({type: Boolean, reflect: true}) static: boolean = false;\n  @property({type: String}) tag: string = '';\n\n  /**\n   * Chart cell rendering mode.\n   * - `bar`: static fill bar driven by `value`/`max` (default).\n   * - `graph`: embedded `obc-gauge-trend` line/area chart.\n   * - `graphAndBar`: embedded `obc-gauge-trend` with an integrated side bar.\n   */\n  @property({type: String, reflect: true, attribute: 'chart-mode'})\n  chartMode: TankChartMode = TankChartMode.bar;\n\n  /** Time-series data points for the embedded gauge-trend (graph modes only). */\n  @property({type: Array, attribute: false})\n  chartData: ChartLineDataItem[] = [];\n\n  /** Priority hint forwarded to child charts (regular | enhanced). */\n  @property({type: String}) priority: Priority = Priority.regular;\n\n  /**\n   * Advice overlays. Forwarded to the embedded `obc-gauge-trend` in\n   * `graph` / `graph-and-bar` modes, or rendered as pills over the static\n   * bar in `bar` mode.\n   */\n  @property({type: Array, attribute: false})\n  advice: LinearAdvice[] = [];\n\n  /** Show advice overlays (works in all `chartMode` variants). */\n  @property({type: Boolean}) hasAdvice = false;\n\n  /**\n   * Overlay a 32×32 decorative icon (currently `<obi-tank>`) centered on the\n   * chart cell. Works in all three `chartMode` variants (bar, graph,\n   * graph-and-bar) and in both orientations. The icon is rendered above the\n   * bar/graph in a fixed CSS layer (does not scale with the SVG meet\n   * transform) and is silhouetted with a `--border-silhouette-color` halo so\n   * it stays legible on any underlying fill. The icon size scales with the\n   * ambient `obc-component-size-*` class on an ancestor via the design token\n   * `--automation-components-tanks-graphs-graph-icon-size` (32 → 48 → 64 → 64\n   * for regular → medium → large → xl).\n   *\n   * TODO(future): replace the hard-coded `<obi-tank>` with a `slot=\"graph-icon\"`\n   * so consumers can pass any `<obi-*>` icon. The current API ships the\n   * smallest viable surface; the slot can be added without breaking the\n   * boolean property.\n   */\n  @property({type: Boolean, attribute: false}) hasGraphIcon = false;\n\n  /**\n   * Show an `<obc-alert-frame>` overlay around the bordered tank area (the\n   * `.halo` wrapper). Mirrors the API of `obc-automation-button`: same six\n   * properties, same three slots (`alert-icon`, `alert-label`, `alert-timer`).\n   * The ring overlays `.halo` only, so the tag and readout that sit outside\n   * the halo in compact / static layouts remain unaffected.\n   */\n  @property({type: Boolean}) alert: boolean = false;\n  @property({type: String}) alertFrameType: ObcAlertFrameType =\n    ObcAlertFrameType.SmallSideFlip;\n  @property({type: String}) alertFrameThickness: ObcAlertFrameThickness =\n    ObcAlertFrameThickness.Small;\n  @property({type: String}) alertFrameStatus: ObcAlertFrameStatus =\n    ObcAlertFrameStatus.Alarm;\n  @property({type: Boolean, attribute: false}) showAlertCategoryIcon: boolean =\n    true;\n  @property({type: Boolean}) showAlertIcon: boolean = false;\n\n  /**\n   * Show the trend chevron / off icon next to the percent readout. Default\n   * `true` preserves existing behavior. Set to `false` to hide the trend\n   * indicator in both compact and non-compact readouts — useful when the\n   * trend is not meaningful for a given tank, or when the consumer wants\n   * to keep the readout compact. Has no effect in `static` mode, which\n   * renders the tank's capacity (`max` + `unit`) instead of a percent and\n   * intentionally omits the trend indicator (a static tank represents\n   * \"device present, current state unknown\"). `attribute: false` per the\n   * repo's positive-default-true boolean convention.\n   */\n  @property({type: Boolean, attribute: false}) showTrendSymbol: boolean = true;\n\n  /**\n   * Number of fraction digits used to format the percent readout in the\n   * non-compact (regular) layout. Defaults to `0` (integer percent). The\n   * compact layout always renders integer percent to keep its fixed-width\n   * footprint stable. The static layout renders capacity (`max` + `unit`)\n   * rather than percent, so this property has no effect there — pass a\n   * pre-formatted value through the `max-value` slot if fractional\n   * precision is needed (see the `WithFractionDigits` story).\n   */\n  @property({type: Number}) percentFractionDigits: number = 0;\n\n  /**\n   * Enum-driven badges rendered inside the `badges` cell. Mirrors the API\n   * introduced for `ObcAbstractAutomationButton` in PR #839 (#829). When set\n   * to a non-`None` value, an `<obc-automation-badge>` of the corresponding\n   * type is rendered as fallback content for the `badges` slot. Any content\n   * the consumer slots into `badges` overrides these defaults, preserving\n   * backward compatibility with the existing slot-based API.\n   *\n   * Render order (left → right): control, alert, interlock, commandLocked —\n   * matching the positional convention used by `ObcAbstractAutomationButton`\n   * (top-left, top-right, bottom-left, bottom-right) read row-by-row.\n   */\n  @property({type: String}) badgeControl: AutomationButtonBadgeControl =\n    AutomationButtonBadgeControl.None;\n  @property({type: String}) badgeAlert: AutomationButtonBadgeAlert =\n    AutomationButtonBadgeAlert.None;\n  @property({type: String}) badgeInterlock: AutomationButtonBadgeInterlock =\n    AutomationButtonBadgeInterlock.None;\n  @property({type: String})\n  badgeCommandLocked: AutomationButtonBadgeCommandLocked =\n    AutomationButtonBadgeCommandLocked.None;\n\n  @state() private _cellWidth = 0;\n  @state() private _cellHeight = 0;\n  /**\n   * Tracks whether the `badges` and `tag` slots have assigned content. Used\n   * in compact/static mode to collapse empty cells to 0px so the tank-frame\n   * can absorb the freed space (per spec: \"if there are no badges it would\n   * grow upward; if there are no readout or tags it would grow downward\").\n   * Non-compact (regular) layout keeps its grid-based reserved rows.\n   */\n  @state() private _hasBadges = false;\n  @state() private _hasTagSlot = false;\n  private _chartResizeObserver?: ResizeObserver;\n  private _observedCell?: Element;\n\n  private get isCompact(): boolean {\n    return this.compact || this.static;\n  }\n\n  private _badgeAlertType(): ObcAutomationBadgeType | null {\n    switch (this.badgeAlert) {\n      case AutomationButtonBadgeAlert.Silence:\n        return ObcAutomationBadgeType.AlertSilenced;\n      case AutomationButtonBadgeAlert.Caution:\n        return ObcAutomationBadgeType.Caution;\n      case AutomationButtonBadgeAlert.Warning:\n        return ObcAutomationBadgeType.Warning;\n      case AutomationButtonBadgeAlert.Alarm:\n        return ObcAutomationBadgeType.Alarm;\n      default:\n        return null;\n    }\n  }\n\n  private _badgeControlType(): ObcAutomationBadgeType | null {\n    switch (this.badgeControl) {\n      case AutomationButtonBadgeControl.Local:\n        return ObcAutomationBadgeType.Local;\n      case AutomationButtonBadgeControl.LocalOnly:\n        return ObcAutomationBadgeType.LocalOnly;\n      case AutomationButtonBadgeControl.Manual:\n        return ObcAutomationBadgeType.Manual;\n      case AutomationButtonBadgeControl.ManualOnly:\n        return ObcAutomationBadgeType.ManualOnly;\n      case AutomationButtonBadgeControl.Auto:\n        return ObcAutomationBadgeType.Auto;\n      default:\n        return null;\n    }\n  }\n\n  private _badgeInterlockType(): ObcAutomationBadgeType | null {\n    switch (this.badgeInterlock) {\n      case AutomationButtonBadgeInterlock.Interlock:\n        return ObcAutomationBadgeType.Interlock;\n      case AutomationButtonBadgeInterlock.InterlockInhibit:\n        return ObcAutomationBadgeType.InterlockInhibit;\n      default:\n        return null;\n    }\n  }\n\n  private _badgeCommandLockedType(): ObcAutomationBadgeType | null {\n    if (\n      this.badgeCommandLocked ===\n      AutomationButtonBadgeCommandLocked.CommandLocked\n    ) {\n      return ObcAutomationBadgeType.CommandLocked;\n    }\n    return null;\n  }\n\n  private get _usesGaugeTrend(): boolean {\n    return (\n      this.chartMode === TankChartMode.graph ||\n      this.chartMode === TankChartMode.graphAndBar\n    );\n  }\n\n  private _onBadgesSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasBadges = slot\n      .assignedNodes({flatten: true})\n      .some(\n        (n) =>\n          n.nodeType === Node.ELEMENT_NODE ||\n          (n.nodeType === Node.TEXT_NODE && !!n.textContent?.trim())\n      );\n  }\n\n  private _onTagSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasTagSlot = slot\n      .assignedNodes({flatten: true})\n      .some(\n        (n) =>\n          n.nodeType === Node.ELEMENT_NODE ||\n          (n.nodeType === Node.TEXT_NODE && !!n.textContent?.trim())\n      );\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._chartResizeObserver?.disconnect();\n    this._chartResizeObserver = undefined;\n    this._observedCell = undefined;\n  }\n\n  protected override updated(\n    changed: Map<string | number | symbol, unknown>\n  ): void {\n    super.updated(changed);\n    // No imperative forwarding here — child components receive `priority`\n    // via template property bindings (`.priority=${this.priority}`). Rely on\n    // their reactive `updated()` logic (e.g. `ObcGaugeTrend._updateBarVerticalProperties()`)\n    // to propagate palette changes internally.\n    // The chart cell DOM element is recreated when chartMode toggles between\n    // bar and graph modes (different class/contents), and may also appear/\n    // disappear with static/compact. Re-attach the observer to the current\n    // .bar-container instance.\n    this._syncChartResizeObserver();\n  }\n\n  private _syncChartResizeObserver(): void {\n    // Observe the bar-container in BOTH bar mode and graph modes — the bar\n    // mode now renders an SVG `obc-bar-vertical` / `-horizontal` that needs\n    // measured pixel dimensions for its viewBox and barThickness.\n    const cell = this.renderRoot.querySelector('.bar-container');\n    if (!cell) {\n      if (this._chartResizeObserver) {\n        this._chartResizeObserver.disconnect();\n        this._observedCell = undefined;\n      }\n      return;\n    }\n    if (cell === this._observedCell) return;\n\n    if (!this._chartResizeObserver) {\n      this._chartResizeObserver = new ResizeObserver((entries) => {\n        const entry = entries[0];\n        if (!entry) return;\n        const w = Math.round(entry.contentRect.width);\n        const h = Math.round(entry.contentRect.height);\n        if (w !== this._cellWidth) this._cellWidth = w;\n        if (h !== this._cellHeight) this._cellHeight = h;\n      });\n    } else {\n      this._chartResizeObserver.disconnect();\n    }\n    this._chartResizeObserver.observe(cell);\n    this._observedCell = cell;\n  }\n\n  trendIcon(): HTMLTemplateResult | typeof nothing {\n    if (this.trend === TankTrend.fastRising) {\n      return html`<obi-chevron-double-up-google\n        class=\"trend-icon\"\n      ></obi-chevron-double-up-google>`;\n    } else if (this.trend === TankTrend.rising) {\n      return html`<obi-chevron-up-google\n        class=\"trend-icon\"\n      ></obi-chevron-up-google>`;\n    } else if (this.trend === TankTrend.fastFalling) {\n      return html`<obi-chevron-double-down-google\n        class=\"trend-icon\"\n      ></obi-chevron-double-down-google>`;\n    } else if (this.trend === TankTrend.falling) {\n      return html`<obi-chevron-down-google\n        class=\"trend-icon\"\n      ></obi-chevron-down-google>`;\n    } else if (this.trend === TankTrend.closed) {\n      return html`<obi-off class=\"trend-icon\"></obi-off>`;\n    } else {\n      // stable: render no icon\n      return nothing;\n    }\n  }\n\n  /**\n   * Atmospheric cap, 3-piece (corner-start / stretchable middle arc / corner-end).\n   * Each piece draws its own fill (closed) and stroke (open) so adjacent pieces\n   * abut without a visible vertical seam line. Coordinates are derived from the\n   * Figma 248x14 path; corners stay 12px wide while the middle arc stretches.\n   * Position (start vs end) and orientation flipping are handled in CSS.\n   *\n   * Horizontal orientation reuses the same path data but rotates each piece\n   * via an inner `<g transform=\"translate(0 H) rotate(-90)\">`, mapping the\n   * source coord (x, y) to (y, H - x). The viewBox is swapped accordingly:\n   *  corner: 12x14 -> 14x12      (H=12)\n   *  middle: 224x14 -> 14x224    (H=224)\n   * Cap-end (right side in horizontal) is mirrored via CSS scaleX(-1).\n   */\n  private renderAtmosphericCap(side: 'start' | 'end'): HTMLTemplateResult {\n    const isHorizontal = this.orientation === TankOrientation.horizontal;\n\n    // Path data. Two variants — regular (14px tall, 12px corners) and compact\n    // (10px tall, 7px corners). Curve Y-values are proportionally scaled from\n    // the original 18/12-tall Figma reference so the corner curves stay\n    // continuous at the new thickness.\n    // Horizontal orientation reuses the same vertical path data inside an\n    // inner `<g transform=\"translate(0 H) rotate(-90)\">`; the SVG viewBox is\n    // swapped accordingly. Cap-end is mirrored via CSS scaleY/scaleX(-1).\n    let cornerStartFill: string;\n    let cornerStartStroke: string;\n    let midFill: string;\n    let midStroke: string;\n    let cornerEndFill: string;\n    let cornerEndStroke: string;\n    let cornerW: number;\n    let capH: number;\n    let midW: number;\n\n    if (this.isCompact) {\n      cornerW = 7;\n      capH = 10;\n      midW = 149;\n      cornerStartFill =\n        'M 6.374 4.8214 C 6.138 4.8429, 6.005 4.8543, 5.83 4.8771 C 2.937 5.2557, 0.669 7.0957, 0.51 9.1936 C 0.5 9.3214, 0.5 9.4357, 0.5 9.6429 L 0.5 10 L 6.374 10 Z';\n      cornerStartStroke =\n        'M 6.374 4.8214 C 6.138 4.8429, 6.005 4.8543, 5.83 4.8771 C 2.937 5.2557, 0.669 7.0957, 0.51 9.1936 C 0.5 9.3214, 0.5 9.4357, 0.5 9.6429 L 0.5 10';\n      midFill =\n        'M 0 4.8214 C 10.97 3.8214, 37.83 1.7857, 74.626 1.7857 C 111.42 1.7857, 138.28 3.8214, 149.252 4.8214 L 149.252 10 L 0 10 Z';\n      midStroke =\n        'M 0 4.8214 C 10.97 3.8214, 37.83 1.7857, 74.626 1.7857 C 111.42 1.7857, 138.28 3.8214, 149.252 4.8214';\n      cornerEndFill =\n        'M 0 4.8214 C 0.236 4.8429, 0.369 4.8543, 0.544 4.8771 C 3.437 5.2557, 5.705 7.0957, 5.864 9.1936 C 5.874 9.3214, 5.874 9.4357, 5.874 9.6429 L 5.874 10 L 0 10 Z';\n      cornerEndStroke =\n        'M 0 4.8214 C 0.236 4.8429, 0.369 4.8543, 0.544 4.8771 C 3.437 5.2557, 5.705 7.0957, 5.864 9.1936 C 5.874 9.3214, 5.874 9.4357, 5.874 9.6429 L 5.874 10';\n    } else {\n      cornerW = 12;\n      capH = 14;\n      midW = 224;\n      cornerStartFill =\n        'M 12 6.5837 C 6.346 6.7737, 5.176 6.8744, 4.168 7.2537 C 2.6445 7.8272, 1.418 8.8983, 0.8613 10.1415 C 0.493 10.9641, 0.5 11.9099, 0.5 13.6111 L 0.5 14 L 12 14 Z';\n      // Stroke draws the curve + outer vertical edge only. The seam with\n      // `.middle` (y = capH) is painted by a 1px CSS `border-top` on\n      // `.tank-frame.type-atmospheric:not(.compact) .middle` so it pixel-\n      // snaps identically to the pressurized cap's CSS border. Drawing it\n      // as an SVG stroke here would render thinner / blurrier due to\n      // sub-pixel anti-aliasing.\n      cornerStartStroke =\n        'M 12 6.5837 C 6.346 6.7737, 5.176 6.8744, 4.168 7.2537 C 2.6445 7.8272, 1.418 8.8983, 0.8613 10.1415 C 0.493 10.9641, 0.5 11.9099, 0.5 13.6111 L 0.5 14';\n      midFill =\n        'M 0 6.5837 C 16 5.1124, 56 1.9444, 112 1.9444 C 168 1.9444, 208 5.1124, 224 6.5837 L 224 14 L 0 14 Z';\n      midStroke =\n        'M 0 6.5837 C 16 5.1124, 56 1.9444, 112 1.9444 C 168 1.9444, 208 5.1124, 224 6.5837';\n      cornerEndFill =\n        'M 0 6.5837 C 5.654 6.7737, 6.824 6.8744, 7.832 7.2537 C 9.3555 7.8272, 10.582 8.8983, 11.1387 10.1415 C 11.507 10.9641, 11.5 11.9099, 11.5 13.6111 L 11.5 14 L 0 14 Z';\n      cornerEndStroke =\n        'M 0 6.5837 C 5.654 6.7737, 6.824 6.8744, 7.832 7.2537 C 9.3555 7.8272, 10.582 8.8983, 11.1387 10.1415 C 11.507 10.9641, 11.5 11.9099, 11.5 13.6111 L 11.5 14';\n    }\n\n    if (isHorizontal) {\n      // Rotate vertical paths -90deg into a `capH`-wide column. Source coord\n      // (x, y) maps to (y, cornerW - x) for corners and (y, midW - x) for mid.\n      return html`\n        <div class=\"cap cap-atmospheric cap-${side}\">\n          <svg\n            class=\"cap-corner cap-corner-start\"\n            viewBox=\"0 0 ${capH} ${cornerW}\"\n            preserveAspectRatio=\"xMidYMax meet\"\n            aria-hidden=\"true\"\n          >\n            ${svg`\n              <g transform=\"translate(0 ${cornerW}) rotate(-90)\">\n                <path class=\"cap-fill\" d=\"${cornerStartFill}\" />\n                <path class=\"cap-stroke\" fill=\"none\" d=\"${cornerStartStroke}\" />\n              </g>\n            `}\n          </svg>\n          <svg\n            class=\"cap-mid\"\n            viewBox=\"0 0 ${capH} ${midW}\"\n            preserveAspectRatio=\"none\"\n            aria-hidden=\"true\"\n          >\n            ${svg`\n              <g transform=\"translate(0 ${midW}) rotate(-90)\">\n                <path class=\"cap-fill\" d=\"${midFill}\" />\n                <path class=\"cap-stroke\" fill=\"none\" vector-effect=\"non-scaling-stroke\" d=\"${midStroke}\" />\n              </g>\n            `}\n          </svg>\n          <svg\n            class=\"cap-corner cap-corner-end\"\n            viewBox=\"0 0 ${capH} ${cornerW}\"\n            preserveAspectRatio=\"xMidYMin meet\"\n            aria-hidden=\"true\"\n          >\n            ${svg`\n              <g transform=\"translate(0 ${cornerW}) rotate(-90)\">\n                <path class=\"cap-fill\" d=\"${cornerEndFill}\" />\n                <path class=\"cap-stroke\" fill=\"none\" d=\"${cornerEndStroke}\" />\n              </g>\n            `}\n          </svg>\n        </div>\n      `;\n    }\n\n    return html`\n      <div class=\"cap cap-atmospheric cap-${side}\">\n        <svg\n          class=\"cap-corner cap-corner-start\"\n          viewBox=\"0 0 ${cornerW} ${capH}\"\n          preserveAspectRatio=\"xMaxYMid meet\"\n          aria-hidden=\"true\"\n        >\n          ${svg`\n            <path class=\"cap-fill\" d=\"${cornerStartFill}\" />\n            <path class=\"cap-stroke\" fill=\"none\" d=\"${cornerStartStroke}\" />\n          `}\n        </svg>\n        <svg\n          class=\"cap-mid\"\n          viewBox=\"0 0 ${midW} ${capH}\"\n          preserveAspectRatio=\"none\"\n          aria-hidden=\"true\"\n        >\n          ${svg`\n            <path class=\"cap-fill\" d=\"${midFill}\" />\n            <path class=\"cap-stroke\" fill=\"none\" vector-effect=\"non-scaling-stroke\" d=\"${midStroke}\" />\n          `}\n        </svg>\n        <svg\n          class=\"cap-corner cap-corner-end\"\n          viewBox=\"0 0 ${cornerW} ${capH}\"\n          preserveAspectRatio=\"xMinYMid meet\"\n          aria-hidden=\"true\"\n        >\n          ${svg`\n            <path class=\"cap-fill\" d=\"${cornerEndFill}\" />\n            <path class=\"cap-stroke\" fill=\"none\" d=\"${cornerEndStroke}\" />\n          `}\n        </svg>\n      </div>\n    `;\n  }\n\n  private renderCap(side: 'start' | 'end'): HTMLTemplateResult | null {\n    if (this.type === TankType.generic) return null;\n    if (this.type === TankType.battery && side === 'end') return null;\n    if (this.type === TankType.atmospheric) {\n      return this.renderAtmosphericCap(side);\n    }\n    if (this.type === TankType.pressurized) {\n      return html`<div class=\"cap cap-pressurized cap-${side}\"></div>`;\n    }\n    // battery, start only\n    return html`<div class=\"cap cap-battery cap-${side}\"></div>`;\n  }\n\n  override render() {\n    const safeMax = this.max > 0 ? this.max : 1;\n    const percent = Math.max(0, Math.min(100, (this.value / safeMax) * 100));\n    const isCompact = this.isCompact;\n\n    // In compact/static the `.halo` is a fixed-size column flex container\n    // that holds badges + tank-frame + (compact only) readout + tag. To let\n    // the tank-frame absorb the freed space when adjacent cells are empty,\n    // we collapse the empty cells with the `hidden` attribute (see CSS).\n    // In non-compact mode cells live inside the inner `.grid` and always\n    // reserve their min-content rows — unchanged from previous behavior.\n    const controlBadge = this._badgeControlType();\n    const alertBadge = this._badgeAlertType();\n    const interlockBadge = this._badgeInterlockType();\n    const commandLockedBadge = this._badgeCommandLockedType();\n    const hasEnumBadges =\n      controlBadge !== null ||\n      alertBadge !== null ||\n      interlockBadge !== null ||\n      commandLockedBadge !== null;\n\n    const badgesHidden = isCompact && !this._hasBadges && !hasEnumBadges;\n    const tagHidden = isCompact && !this._hasTagSlot && !this.tag;\n\n    const badgesCell = html`\n      <div class=\"badges\" ?hidden=${badgesHidden}>\n        <slot name=\"badges\" @slotchange=${this._onBadgesSlotChange}>\n          ${controlBadge\n            ? html`<obc-automation-badge\n                .type=${controlBadge}\n              ></obc-automation-badge>`\n            : nothing}\n          ${alertBadge\n            ? html`<obc-automation-badge\n                .type=${alertBadge}\n              ></obc-automation-badge>`\n            : nothing}\n          ${interlockBadge\n            ? html`<obc-automation-badge\n                .type=${interlockBadge}\n              ></obc-automation-badge>`\n            : nothing}\n          ${commandLockedBadge\n            ? html`<obc-automation-badge\n                .type=${commandLockedBadge}\n              ></obc-automation-badge>`\n            : nothing}\n        </slot>\n      </div>\n    `;\n    const tagCell = html`\n      <div class=\"tag\" ?hidden=${tagHidden}>\n        <slot name=\"tag\" @slotchange=${this._onTagSlotChange}>${this.tag}</slot>\n      </div>\n    `;\n    // Static mode intentionally renders the tank's capacity (max + unit)\n    // instead of a percent reading: a static tank represents \"device is\n    // present, current state unknown\", so a percent value would be\n    // misleading. The trend icon is omitted for the same reason. Consumers\n    // who need a custom label can still override the whole cell via the\n    // `readout` slot, or supply formatted text through the existing\n    // `max-value` / `unit` slots (no new API).\n    const readoutCell = this.static\n      ? html`\n          <div class=\"readout readout-compact readout-static\">\n            <slot name=\"readout\">\n              <slot name=\"max-value\">${this.max.toFixed(0)}</slot>\n              <slot name=\"unit\">m<sup>3</sup></slot>\n            </slot>\n          </div>\n        `\n      : isCompact\n        ? html`\n            <div class=\"readout readout-compact\">\n              <slot name=\"readout\">\n                ${this.showTrendSymbol ? this.trendIcon() : null}\n                <span class=\"percent\"\n                  >${percent.toFixed(0)}<span class=\"percent-symbol\"\n                    >%</span\n                  ></span\n                >\n              </slot>\n            </div>\n          `\n        : html`\n            <div class=\"readout\">\n              <slot name=\"readout\">\n                <div class=\"header\">\n                  ${this.showTrendSymbol ? this.trendIcon() : null}\n                  <div class=\"percent\">\n                    ${percent.toFixed(this.percentFractionDigits)}<span\n                      class=\"percent-symbol\"\n                      >%</span\n                    >\n                  </div>\n                </div>\n                <div class=\"value\">\n                  <div class=\"current\">\n                    <slot name=\"current-value\" class=\"current-value\"\n                      >${this.value.toFixed(0)}</slot\n                    ><span class=\"divider\">/</span>\n                  </div>\n                  <div class=\"max\">\n                    <slot class=\"max-value\" name=\"max-value\"\n                      >${this.max.toFixed(0)}</slot\n                    >\n                    <slot class=\"unit\" name=\"unit\">m<sup>3</sup></slot>\n                  </div>\n                </div>\n              </slot>\n            </div>\n          `;\n    // Decorative icon overlay (centered on the chart cell). Two stacked\n    // icon elements: the back layer paints an inherited SVG `stroke` halo\n    // (the icon's paths use `fill=\"currentColor\"`, and SVG `stroke` is\n    // inherited across the icon's shadow DOM); the front layer paints the\n    // colored fill via the `color` property. This mirrors the established\n    // silhouette pattern used by `obc-automation-button` (back-layer slot\n    // with stroke, front-layer slot with fill).\n    //\n    // The icon variant follows `type`: battery tanks show an energy-battery\n    // icon, all other types show the generic tank icon.\n    const graphIconClasses = classMap({\n      'graph-icon': true,\n      'priority-enhanced': this.priority === Priority.enhanced,\n    });\n    const graphIconOverlay =\n      this.type === TankType.battery\n        ? html`\n            <div class=${graphIconClasses} aria-hidden=\"true\">\n              <obi-energy-battery\n                class=\"graph-icon-stroke\"\n              ></obi-energy-battery>\n              <obi-energy-battery class=\"graph-icon-fill\"></obi-energy-battery>\n            </div>\n          `\n        : html`\n            <div class=${graphIconClasses} aria-hidden=\"true\">\n              <obi-tank class=\"graph-icon-stroke\"></obi-tank>\n              <obi-tank class=\"graph-icon-fill\"></obi-tank>\n            </div>\n          `;\n    // Alert-frame overlay. Mirrors the `obc-automation-button` pattern\n    // exactly so consumer API is identical. Placed inside `.halo` so the\n    // ring hugs only the bordered tank area; `belowHalo` (tag / readout) is\n    // unaffected. `.halo` is `position: relative` (see CSS) to anchor the\n    // absolutely-positioned alert-frame.\n    const alertFrameOverlay = this.alert\n      ? html`<obc-alert-frame\n          class=\"alert-frame\"\n          .type=${this.alertFrameType}\n          .thickness=${this.alertFrameThickness}\n          .status=${this.alertFrameStatus}\n          .showAlertCategoryIcon=${this.showAlertCategoryIcon}\n          .showIcon=${this.showAlertIcon}\n        >\n          <span slot=\"icon\"><slot name=\"alert-icon\"></slot></span>\n          <span slot=\"label\"><slot name=\"alert-label\"></slot></span>\n          <span slot=\"timer\"><slot name=\"alert-timer\"></slot></span>\n        </obc-alert-frame>`\n      : null;\n    let chartCell: HTMLTemplateResult;\n    if (this._usesGaugeTrend) {\n      // Forward the measured cell size as the gauge-trend's width/height,\n      // which it interprets as an aspect-ratio reference. Its internal\n      // ResizeObserver then picks up its own wrapper's clientWidth (= cell\n      // width, since we set style width:100%) and computes height from the\n      // aspect ratio — so the chart matches the cell exactly. We delay\n      // rendering until both dimensions are measured to avoid a divide-by-\n      // zero in the aspect-ratio math on first paint.\n      const hasSize = this._cellWidth > 0 && this._cellHeight > 0;\n      chartCell = html`\n        <div class=\"bar-container chart-cell\">\n          ${hasSize\n            ? html`<obc-gauge-trend\n                .data=${this.chartData}\n                .minValue=${0}\n                .maxValue=${safeMax}\n                .value=${this.value}\n                .hasBar=${this.chartMode === TankChartMode.graphAndBar}\n                .hasScale=${false}\n                .hasLabelPadding=${false}\n                .chartFill=${true}\n                .hasAdvice=${this.hasAdvice}\n                .advice=${this.advice}\n                .width=${this._cellWidth}\n                .height=${this._cellHeight}\n                style=\"width: 100%; height: 100%;\"\n                .priority=${this.priority}\n              ></obc-gauge-trend>`\n            : null}\n          ${this.hasGraphIcon ? graphIconOverlay : null}\n        </div>\n      `;\n    } else {\n      // Bar mode: render the shared SVG bar (`obc-bar-vertical` /\n      // `-horizontal`) — the same renderer used by gauge-trend's side bar —\n      // so advice overlays work the same way across all three chart modes.\n      //\n      // TODO(refactor): once `obc-gauge-trend` supports a bar-only layout at\n      // this size (no chart-line area), migrate this branch to gauge-trend\n      // too so all three chart modes share a single implementation.\n      //\n      // TODO(theming): the bar fill currently uses the standard instrument\n      // palette (`--instrument-regular-tertiary-color` for tint mode). The\n      // legacy CSS bar used per-medium colors (e.g. `--automation-medium-fuel`).\n      // Extend `external-scale.ts` (and the bar-vertical/-horizontal wrappers)\n      // to accept a medium / fuel color so the tank can restore its\n      // per-`medium` coloring through the shared renderer.\n      const hasSize = this._cellWidth > 0 && this._cellHeight > 0;\n      // The inner bar always renders vertically, regardless of the tank's\n      // outer `orientation`. Only the tank's outer wrapper flips; its inner\n      // chart cell stays portrait. This matches gauge-trend behavior.\n      //\n      // Match gauge-trend's proportional sizing so advice pills (and other\n      // fixed-pixel SVG primitives) render at the same on-screen size in\n      // every chart mode. We mirror gauge-trend's defaults exactly:\n      // `fixedAspectRatio=true` + `scaleReferenceSize=384`. The bar SVG is\n      // then built in a 384-unit-tall viewBox and shrunk into the cell via\n      // `xMidYMid meet`, giving on-screen scale = cellHeight / 384.\n      //\n      // Because the meet transform scales the viewBox uniformly, we must\n      // also size `barThickness` in viewBox units (not cell pixels) so the\n      // bar still fills the cell width after scaling. We pick the viewBox\n      // cross-axis size so width-fit and height-fit ratios match exactly\n      // (no horizontal gutters): viewBoxCross = cellWidth * 384 / cellHeight.\n      const SCALE_REFERENCE_SIZE = 384;\n      const adviceReserveVb = this.hasAdvice ? 16 : 0;\n      const safeCellHeight = Math.max(1, this._cellHeight);\n      const viewBoxCross =\n        (this._cellWidth * SCALE_REFERENCE_SIZE) / safeCellHeight;\n      const barThickness = Math.max(0, viewBoxCross - adviceReserveVb);\n      // `tint` is locked in for tank bar mode: it draws a fill from 0 to\n      // value plus a small marker at the value position, which mirrors the\n      // legacy CSS bar's \"fill + top border at value\" visual idiom.\n      const barWrapper = html`<obc-bar-vertical\n        .minValue=${0}\n        .maxValue=${safeMax}\n        .value=${this.value}\n        .height=${this._cellHeight}\n        .fixedAspectRatio=${true}\n        .scaleReferenceSize=${SCALE_REFERENCE_SIZE}\n        .paddingTop=${0}\n        .paddingBottom=${0}\n        .side=${ExternalScaleSide.right}\n        .hasBar=${true}\n        .hasScale=${false}\n        .showLabels=${false}\n        .barThickness=${barThickness}\n        .fillMode=${FillMode.tint}\n        .instrumentMode=${true}\n        .borderRadius=${2}\n        .advices=${this.hasAdvice ? this.advice : []}\n        .advicePosition=${AdvicePosition.inner}\n        style=\"width: 100%; height: 100%;\"\n        .priority=${this.priority}\n      ></obc-bar-vertical>`;\n      chartCell = html`\n        <div class=\"bar-container bar-cell\">\n          ${hasSize ? barWrapper : null}\n          ${this.hasGraphIcon ? graphIconOverlay : null}\n        </div>\n      `;\n    }\n\n    const frameClasses = classMap({\n      'tank-frame': true,\n      [`type-${this.type}`]: true,\n      [`orientation-${this.orientation}`]: true,\n      [this.medium]: true,\n      compact: isCompact,\n      static: this.static,\n    });\n\n    let middleContents: HTMLTemplateResult;\n    if (this.static) {\n      middleContents = html`<div class=\"static-readout\">${readoutCell}</div>`;\n    } else if (this.compact) {\n      middleContents = chartCell;\n    } else {\n      middleContents = html`<div class=\"grid\">\n        ${tagCell}${badgesCell}${readoutCell}${chartCell}\n      </div>`;\n    }\n\n    const tankFrame = html`\n      <div class=${frameClasses}>\n        ${this.renderCap('start')}\n        <div class=\"middle\">${middleContents}</div>\n        ${this.renderCap('end')}\n      </div>\n    `;\n\n    // Whole component is one interactive element. The halo (flat-mixin\n    // border/background that appears on hover/pressed/focus) is painted on\n    // the inner `.halo` wrapper via `visibleWrapperClass`, so the surround\n    // hugs only the bordered area:\n    //   - non-compact: just the tank-frame (grid inside it carries badges,\n    //     readout, tag).\n    //   - compact: fixed-size column flex — badges, tank-frame (flex-grow),\n    //     readout, tag. Empty cells (badges/tag) collapse via `?hidden`\n    //     above so the tank-frame absorbs the freed space.\n    //   - static: same as compact but no separate readout cell (the readout\n    //     is centered INSIDE the tank-frame via `static-readout`).\n    //\n    // The alert-frame overlay is the last child of `.halo` so the ring\n    // overlays every cell (and any cell-collapse mechanics work uniformly).\n    let haloContents: HTMLTemplateResult;\n    if (this.static) {\n      haloContents = html`${badgesCell}${tankFrame}${tagCell}`;\n    } else if (this.compact) {\n      haloContents = html`${badgesCell}${tankFrame}${readoutCell}${tagCell}`;\n    } else {\n      haloContents = tankFrame;\n    }\n    const halo = html`\n      <div class=\"halo\">${haloContents}${alertFrameOverlay}</div>\n    `;\n\n    // `aria-live=\"polite\"` + `aria-atomic=\"true\"` on the root so the\n    // slotted alert label (and any state change of the alert frame) is\n    // announced once when `alert` flips on. Always present — an empty live\n    // region is harmless and avoids screen-reader re-registration races.\n    // TODO(a11y): the rest of the automation component family still lacks\n    // this live-region announcement; consolidate when alert support is\n    // factored into a shared mixin.\n    return html`\n      ${this.static\n        ? html`<div\n            class=\"root\"\n            role=\"img\"\n            aria-label=${this.tag || 'Tank'}\n            aria-live=\"polite\"\n            aria-atomic=\"true\"\n          >\n            ${halo}\n          </div>`\n        : html`<button\n            class=\"root\"\n            type=\"button\"\n            aria-label=${this.tag || 'Tank'}\n            aria-live=\"polite\"\n            aria-atomic=\"true\"\n          >\n            ${halo}\n          </button>`}\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-automation-tank': ObcAutomationTank;\n  }\n}\n"],"names":["TankTrend","TankType","TankOrientation","TankPositioning","TankChartMode"],"mappings":"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"}
+{"version":3,"file":"automation-tank.js","sources":["../../../src/automation/automation-tank/automation-tank.ts"],"sourcesContent":["import {\n  HTMLTemplateResult,\n  LitElement,\n  html,\n  nothing,\n  svg,\n  unsafeCSS,\n} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport compentStyle from './automation-tank.css?inline';\nimport {LineMedium} from '../index.js';\nimport '../automation-badge/automation-badge.js';\nimport {ObcAutomationBadgeType} from '../automation-badge/automation-badge.js';\nimport {\n  AutomationButtonBadgeAlert,\n  AutomationButtonBadgeCommandLocked,\n  AutomationButtonBadgeControl,\n  AutomationButtonBadgeInterlock,\n} from '../automation-button/abstract-automation-button.js';\n\nimport '../../icons/icon-chevron-double-up-google.js';\nimport '../../icons/icon-chevron-up-google.js';\nimport '../../icons/icon-chevron-double-down-google.js';\nimport '../../icons/icon-chevron-down-google.js';\nimport '../../icons/icon-off.js';\nimport '../../icons/icon-tank.js';\nimport '../../icons/icon-energy-battery.js';\nimport '../../navigation-instruments/gauge-trend/gauge-trend.js';\nimport '../../building-blocks/bar-vertical/bar-vertical.js';\nimport '../../components/alert-frame/alert-frame.js';\nimport {Priority} from '../../navigation-instruments/types.js';\nimport {\n  ObcAlertFrameStatus,\n  ObcAlertFrameThickness,\n  ObcAlertFrameType,\n} from '../../components/alert-frame/alert-frame.js';\nimport type {ChartLineDataItem} from '../../building-blocks/chart-line/chart-line-base.js';\nimport type {LinearAdvice} from '../../building-blocks/instrument-linear/advice.js';\nimport {\n  AdvicePosition,\n  ExternalScaleSide,\n  FillMode,\n} from '../../building-blocks/external-scale/external-scale.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../../decorator.js';\n\nexport enum TankTrend {\n  fastRising = 'fast-rising',\n  rising = 'rising',\n  stable = 'stable',\n  falling = 'falling',\n  fastFalling = 'fast-falling',\n  closed = 'closed',\n}\n\nexport enum TankType {\n  generic = 'generic',\n  atmospheric = 'atmospheric',\n  pressurized = 'pressurized',\n  battery = 'battery',\n}\n\nexport enum TankOrientation {\n  vertical = 'vertical',\n  horizontal = 'horizontal',\n}\n\n/**\n * Host positioning model.\n *\n * - `point` (default): the host has fixed default dimensions (per\n *   orientation and compact / static variant) and a P&ID anchor — the\n *   visual content is shifted with `translateX(-50%)` and (in non-compact)\n *   `top: -20px` so the tank's top-center aligns with the host's top-left\n *   placement coordinate. Use this when dropping the tank onto a P&ID\n *   canvas at a pipe-grid coordinate.\n * - `button`: the host fills its parent container (100% × 100%) with no\n *   anchor offset. Use this when embedding the tank inside a sized layout\n *   slot — the parent controls the footprint and the tank renders\n *   responsively inside it, just like a regular button. Compact / static\n *   inner layout still applies; only the host box is changed.\n */\nexport enum TankPositioning {\n  point = 'point',\n  button = 'button',\n}\n\nexport enum TankChartMode {\n  /** Static fill bar driven by `value` / `max` (default, backward compatible). */\n  bar = 'bar',\n  /** Embedded `obc-gauge-trend` line/area chart, no side bar. */\n  graph = 'graph',\n  /** Embedded `obc-gauge-trend` line/area chart with a side bar. */\n  graphAndBar = 'graph-and-bar',\n}\n\n/**\n * A single detail row rendered in the tank's `readout` rich list (below the\n * main percent / value block, separated by a divider). Each row is rendered\n * as `<label>` on the left and `<value><degree?><percent?><unit>` on the\n * right, all on a single line.\n */\nexport interface TankReadoutItem {\n  /** Left-aligned label text (e.g. `Temperature`). */\n  label: string;\n  /** Numeric value, formatted with the tank's `percentFractionDigits`. */\n  value: number;\n  /** Append a `°` glyph directly after the value with no gap. */\n  hasDegree?: boolean;\n  /** Append a `%` glyph directly after the value with no gap. */\n  hasPercentage?: boolean;\n  /** Unit text (e.g. `C`, `Pa`, `m/s`). Rendered after the value/glyph. */\n  unit: string;\n}\n\n/**\n *\n *\n * @ignition-base-height: 173px\n * @ignition-base-width: 168px\n * @ignition-center-horizontal\n */\n@customElement('obc-automation-tank')\nexport class ObcAutomationTank extends LitElement {\n  @property({type: String}) medium: LineMedium = LineMedium.water;\n  @property({type: Number}) value: number = 0;\n  @property({type: Number}) max: number = 100;\n  @property({type: String}) trend: TankTrend = TankTrend.stable;\n  @property({type: String, reflect: true}) type: TankType = TankType.generic;\n  @property({type: String, reflect: true}) orientation: TankOrientation =\n    TankOrientation.vertical;\n  @property({type: Boolean, reflect: true}) compact: boolean = false;\n  /**\n   * Host positioning model — see `TankPositioning` for details. Defaults to\n   * `point` for backward compatibility (fixed default dimensions + P&ID\n   * top-center anchor). Set to `button` to make the host fill its parent\n   * container (100% × 100%) with no anchor offset.\n   */\n  @property({type: String, reflect: true}) positioning: TankPositioning =\n    TankPositioning.point;\n  /**\n   * Static (display-only) variant. Always rendered at the compact size; the\n   * inner chart/bar is hidden, the bordered area is filled with\n   * `--container-section-color`, and the readout is centered inside the frame.\n   * Tag is rendered below the bordered area; badges (when slotted) sit above\n   * the frame inside the halo and shrink the frame just like in compact mode.\n   * Overrides `compact` (a static tank is always compact-sized).\n   *\n   * Static tanks render as a non-interactive `<div role=\"img\">` (not a\n   * `<button>`), so they are not in the tab order and do not announce as\n   * activatable controls.\n   */\n  @property({type: Boolean, reflect: true}) static: boolean = false;\n  @property({type: String}) tag: string = '';\n\n  /**\n   * Chart cell rendering mode.\n   * - `bar`: static fill bar driven by `value`/`max` (default).\n   * - `graph`: embedded `obc-gauge-trend` line/area chart.\n   * - `graphAndBar`: embedded `obc-gauge-trend` with an integrated side bar.\n   */\n  @property({type: String, reflect: true, attribute: 'chart-mode'})\n  chartMode: TankChartMode = TankChartMode.bar;\n\n  /** Time-series data points for the embedded gauge-trend (graph modes only). */\n  @property({type: Array, attribute: false})\n  chartData: ChartLineDataItem[] = [];\n\n  /** Priority hint forwarded to child charts (regular | enhanced). */\n  @property({type: String}) priority: Priority = Priority.regular;\n\n  /**\n   * Advice overlays. Forwarded to the embedded `obc-gauge-trend` in\n   * `graph` / `graph-and-bar` modes, or rendered as pills over the static\n   * bar in `bar` mode.\n   */\n  @property({type: Array, attribute: false})\n  advice: LinearAdvice[] = [];\n\n  /** Show advice overlays (works in all `chartMode` variants). */\n  @property({type: Boolean}) hasAdvice = false;\n\n  /**\n   * Overlay a 32×32 decorative icon (currently `<obi-tank>`) centered on the\n   * chart cell. Works in all three `chartMode` variants (bar, graph,\n   * graph-and-bar) and in both orientations. The icon is rendered above the\n   * bar/graph in a fixed CSS layer (does not scale with the SVG meet\n   * transform) and is silhouetted with a `--border-silhouette-color` halo so\n   * it stays legible on any underlying fill. The icon size scales with the\n   * ambient `obc-component-size-*` class on an ancestor via the design token\n   * `--automation-components-tanks-graphs-graph-icon-size` (32 → 48 → 64 → 64\n   * for regular → medium → large → xl).\n   *\n   * TODO(future): replace the hard-coded `<obi-tank>` with a `slot=\"graph-icon\"`\n   * so consumers can pass any `<obi-*>` icon. The current API ships the\n   * smallest viable surface; the slot can be added without breaking the\n   * boolean property.\n   */\n  @property({type: Boolean, attribute: false}) hasGraphIcon = false;\n\n  /**\n   * Show an `<obc-alert-frame>` overlay around the bordered tank area (the\n   * `.halo` wrapper). Mirrors the API of `obc-automation-button`: same six\n   * properties, same three slots (`alert-icon`, `alert-label`, `alert-timer`).\n   * The ring overlays `.halo` only, so the tag and readout that sit outside\n   * the halo in compact / static layouts remain unaffected.\n   */\n  @property({type: Boolean}) alert: boolean = false;\n  @property({type: String}) alertFrameType: ObcAlertFrameType =\n    ObcAlertFrameType.SmallSideFlip;\n  @property({type: String}) alertFrameThickness: ObcAlertFrameThickness =\n    ObcAlertFrameThickness.Small;\n  @property({type: String}) alertFrameStatus: ObcAlertFrameStatus =\n    ObcAlertFrameStatus.Alarm;\n  @property({type: Boolean, attribute: false}) showAlertCategoryIcon: boolean =\n    true;\n  @property({type: Boolean}) showAlertIcon: boolean = false;\n\n  /**\n   * Show the trend chevron / off icon next to the percent readout. Default\n   * `true` preserves existing behavior. Set to `false` to hide the trend\n   * indicator in both compact and non-compact readouts — useful when the\n   * trend is not meaningful for a given tank, or when the consumer wants\n   * to keep the readout compact. Has no effect in `static` mode, which\n   * renders the tank's capacity (`max` + `unit`) instead of a percent and\n   * intentionally omits the trend indicator (a static tank represents\n   * \"device present, current state unknown\"). `attribute: false` per the\n   * repo's positive-default-true boolean convention.\n   */\n  @property({type: Boolean, attribute: false}) showTrendSymbol: boolean = true;\n\n  /**\n   * Number of fraction digits used to format the percent readout in the\n   * non-compact (regular) layout. Defaults to `0` (integer percent). The\n   * compact layout always renders integer percent to keep its fixed-width\n   * footprint stable. The static layout renders capacity (`max` + `unit`)\n   * rather than percent, so this property has no effect there — pass a\n   * pre-formatted value through the `max-value` slot if fractional\n   * precision is needed (see the `WithFractionDigits` story).\n   */\n  @property({type: Number}) percentFractionDigits: number = 0;\n\n  /**\n   * Rich detail rows shown below the main percent/value block in the regular\n   * (non-compact, non-static) layout, separated by a divider. When empty (the\n   * default), nothing is rendered — neither the divider nor the list. In\n   * vertical orientation the chart cell shrinks to make room; in horizontal\n   * orientation the readout column already has reserved whitespace so the\n   * chart is unaffected.\n   *\n   * Values are formatted using `percentFractionDigits`. Consumers that need\n   * full control over the markup can replace the entire fallback by slotting\n   * arbitrary content into `slot=\"rich\"` (note: this is a different name from\n   * the existing `slot=\"readout\"` which replaces the whole readout block).\n   */\n  @property({type: Array, attribute: false}) readout: TankReadoutItem[] = [];\n\n  /**\n   * Enum-driven badges rendered inside the `badges` cell. Mirrors the API\n   * introduced for `ObcAbstractAutomationButton` in PR #839 (#829). When set\n   * to a non-`None` value, an `<obc-automation-badge>` of the corresponding\n   * type is rendered as fallback content for the `badges` slot. Any content\n   * the consumer slots into `badges` overrides these defaults, preserving\n   * backward compatibility with the existing slot-based API.\n   *\n   * Render order (left → right): control, alert, interlock, commandLocked —\n   * matching the positional convention used by `ObcAbstractAutomationButton`\n   * (top-left, top-right, bottom-left, bottom-right) read row-by-row.\n   */\n  @property({type: String}) badgeControl: AutomationButtonBadgeControl =\n    AutomationButtonBadgeControl.None;\n  @property({type: String}) badgeAlert: AutomationButtonBadgeAlert =\n    AutomationButtonBadgeAlert.None;\n  @property({type: String}) badgeInterlock: AutomationButtonBadgeInterlock =\n    AutomationButtonBadgeInterlock.None;\n  @property({type: String})\n  badgeCommandLocked: AutomationButtonBadgeCommandLocked =\n    AutomationButtonBadgeCommandLocked.None;\n\n  @state() private _cellWidth = 0;\n  @state() private _cellHeight = 0;\n  /**\n   * Tracks whether the `badges` and `tag` slots have assigned content. Used\n   * in compact/static mode to collapse empty cells to 0px so the tank-frame\n   * can absorb the freed space (per spec: \"if there are no badges it would\n   * grow upward; if there are no readout or tags it would grow downward\").\n   * Non-compact (regular) layout keeps its grid-based reserved rows.\n   */\n  @state() private _hasBadges = false;\n  @state() private _hasTagSlot = false;\n  private _chartResizeObserver?: ResizeObserver;\n  private _observedCell?: Element;\n\n  private get isCompact(): boolean {\n    return this.compact || this.static;\n  }\n\n  private _badgeAlertType(): ObcAutomationBadgeType | null {\n    switch (this.badgeAlert) {\n      case AutomationButtonBadgeAlert.Silence:\n        return ObcAutomationBadgeType.AlertSilenced;\n      case AutomationButtonBadgeAlert.Caution:\n        return ObcAutomationBadgeType.Caution;\n      case AutomationButtonBadgeAlert.Warning:\n        return ObcAutomationBadgeType.Warning;\n      case AutomationButtonBadgeAlert.Alarm:\n        return ObcAutomationBadgeType.Alarm;\n      default:\n        return null;\n    }\n  }\n\n  private _badgeControlType(): ObcAutomationBadgeType | null {\n    switch (this.badgeControl) {\n      case AutomationButtonBadgeControl.Local:\n        return ObcAutomationBadgeType.Local;\n      case AutomationButtonBadgeControl.LocalOnly:\n        return ObcAutomationBadgeType.LocalOnly;\n      case AutomationButtonBadgeControl.Manual:\n        return ObcAutomationBadgeType.Manual;\n      case AutomationButtonBadgeControl.ManualOnly:\n        return ObcAutomationBadgeType.ManualOnly;\n      case AutomationButtonBadgeControl.Auto:\n        return ObcAutomationBadgeType.Auto;\n      default:\n        return null;\n    }\n  }\n\n  private _badgeInterlockType(): ObcAutomationBadgeType | null {\n    switch (this.badgeInterlock) {\n      case AutomationButtonBadgeInterlock.Interlock:\n        return ObcAutomationBadgeType.Interlock;\n      case AutomationButtonBadgeInterlock.InterlockInhibit:\n        return ObcAutomationBadgeType.InterlockInhibit;\n      default:\n        return null;\n    }\n  }\n\n  private _badgeCommandLockedType(): ObcAutomationBadgeType | null {\n    if (\n      this.badgeCommandLocked ===\n      AutomationButtonBadgeCommandLocked.CommandLocked\n    ) {\n      return ObcAutomationBadgeType.CommandLocked;\n    }\n    return null;\n  }\n\n  private get _usesGaugeTrend(): boolean {\n    return (\n      this.chartMode === TankChartMode.graph ||\n      this.chartMode === TankChartMode.graphAndBar\n    );\n  }\n\n  private _onBadgesSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasBadges = slot\n      .assignedNodes({flatten: true})\n      .some(\n        (n) =>\n          n.nodeType === Node.ELEMENT_NODE ||\n          (n.nodeType === Node.TEXT_NODE && !!n.textContent?.trim())\n      );\n  }\n\n  private _onTagSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasTagSlot = slot\n      .assignedNodes({flatten: true})\n      .some(\n        (n) =>\n          n.nodeType === Node.ELEMENT_NODE ||\n          (n.nodeType === Node.TEXT_NODE && !!n.textContent?.trim())\n      );\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._chartResizeObserver?.disconnect();\n    this._chartResizeObserver = undefined;\n    this._observedCell = undefined;\n  }\n\n  protected override updated(\n    changed: Map<string | number | symbol, unknown>\n  ): void {\n    super.updated(changed);\n    // No imperative forwarding here — child components receive `priority`\n    // via template property bindings (`.priority=${this.priority}`). Rely on\n    // their reactive `updated()` logic (e.g. `ObcGaugeTrend._updateBarVerticalProperties()`)\n    // to propagate palette changes internally.\n    // The chart cell DOM element is recreated when chartMode toggles between\n    // bar and graph modes (different class/contents), and may also appear/\n    // disappear with static/compact. Re-attach the observer to the current\n    // .bar-container instance.\n    this._syncChartResizeObserver();\n  }\n\n  private _syncChartResizeObserver(): void {\n    // Observe the bar-container in BOTH bar mode and graph modes — the bar\n    // mode now renders an SVG `obc-bar-vertical` / `-horizontal` that needs\n    // measured pixel dimensions for its viewBox and barThickness.\n    const cell = this.renderRoot.querySelector('.bar-container');\n    if (!cell) {\n      if (this._chartResizeObserver) {\n        this._chartResizeObserver.disconnect();\n        this._observedCell = undefined;\n      }\n      return;\n    }\n    if (cell === this._observedCell) return;\n\n    if (!this._chartResizeObserver) {\n      this._chartResizeObserver = new ResizeObserver((entries) => {\n        const entry = entries[0];\n        if (!entry) return;\n        const w = Math.round(entry.contentRect.width);\n        const h = Math.round(entry.contentRect.height);\n        if (w !== this._cellWidth) this._cellWidth = w;\n        if (h !== this._cellHeight) this._cellHeight = h;\n      });\n    } else {\n      this._chartResizeObserver.disconnect();\n    }\n    this._chartResizeObserver.observe(cell);\n    this._observedCell = cell;\n  }\n\n  trendIcon(): HTMLTemplateResult | typeof nothing {\n    if (this.trend === TankTrend.fastRising) {\n      return html`<obi-chevron-double-up-google\n        class=\"trend-icon\"\n      ></obi-chevron-double-up-google>`;\n    } else if (this.trend === TankTrend.rising) {\n      return html`<obi-chevron-up-google\n        class=\"trend-icon\"\n      ></obi-chevron-up-google>`;\n    } else if (this.trend === TankTrend.fastFalling) {\n      return html`<obi-chevron-double-down-google\n        class=\"trend-icon\"\n      ></obi-chevron-double-down-google>`;\n    } else if (this.trend === TankTrend.falling) {\n      return html`<obi-chevron-down-google\n        class=\"trend-icon\"\n      ></obi-chevron-down-google>`;\n    } else if (this.trend === TankTrend.closed) {\n      return html`<obi-off class=\"trend-icon\"></obi-off>`;\n    } else {\n      // stable: render no icon\n      return nothing;\n    }\n  }\n\n  /**\n   * Atmospheric cap, 3-piece (corner-start / stretchable middle arc / corner-end).\n   * Each piece draws its own fill (closed) and stroke (open) so adjacent pieces\n   * abut without a visible vertical seam line. Coordinates are derived from the\n   * Figma 248x14 path; corners stay 12px wide while the middle arc stretches.\n   * Position (start vs end) and orientation flipping are handled in CSS.\n   *\n   * Horizontal orientation reuses the same path data but rotates each piece\n   * via an inner `<g transform=\"translate(0 H) rotate(-90)\">`, mapping the\n   * source coord (x, y) to (y, H - x). The viewBox is swapped accordingly:\n   *  corner: 12x14 -> 14x12      (H=12)\n   *  middle: 224x14 -> 14x224    (H=224)\n   * Cap-end (right side in horizontal) is mirrored via CSS scaleX(-1).\n   */\n  private renderAtmosphericCap(side: 'start' | 'end'): HTMLTemplateResult {\n    const isHorizontal = this.orientation === TankOrientation.horizontal;\n\n    // Path data. Two variants — regular (14px tall, 12px corners) and compact\n    // (10px tall, 7px corners). Curve Y-values are proportionally scaled from\n    // the original 18/12-tall Figma reference so the corner curves stay\n    // continuous at the new thickness.\n    // Horizontal orientation reuses the same vertical path data inside an\n    // inner `<g transform=\"translate(0 H) rotate(-90)\">`; the SVG viewBox is\n    // swapped accordingly. Cap-end is mirrored via CSS scaleY/scaleX(-1).\n    let cornerStartFill: string;\n    let cornerStartStroke: string;\n    let midFill: string;\n    let midStroke: string;\n    let cornerEndFill: string;\n    let cornerEndStroke: string;\n    let cornerW: number;\n    let capH: number;\n    let midW: number;\n\n    if (this.isCompact) {\n      cornerW = 7;\n      capH = 10;\n      midW = 149;\n      cornerStartFill =\n        'M 6.374 4.8214 C 6.138 4.8429, 6.005 4.8543, 5.83 4.8771 C 2.937 5.2557, 0.669 7.0957, 0.51 9.1936 C 0.5 9.3214, 0.5 9.4357, 0.5 9.6429 L 0.5 10 L 6.374 10 Z';\n      cornerStartStroke =\n        'M 6.374 4.8214 C 6.138 4.8429, 6.005 4.8543, 5.83 4.8771 C 2.937 5.2557, 0.669 7.0957, 0.51 9.1936 C 0.5 9.3214, 0.5 9.4357, 0.5 9.6429 L 0.5 10';\n      midFill =\n        'M 0 4.8214 C 10.97 3.8214, 37.83 1.7857, 74.626 1.7857 C 111.42 1.7857, 138.28 3.8214, 149.252 4.8214 L 149.252 10 L 0 10 Z';\n      midStroke =\n        'M 0 4.8214 C 10.97 3.8214, 37.83 1.7857, 74.626 1.7857 C 111.42 1.7857, 138.28 3.8214, 149.252 4.8214';\n      cornerEndFill =\n        'M 0 4.8214 C 0.236 4.8429, 0.369 4.8543, 0.544 4.8771 C 3.437 5.2557, 5.705 7.0957, 5.864 9.1936 C 5.874 9.3214, 5.874 9.4357, 5.874 9.6429 L 5.874 10 L 0 10 Z';\n      cornerEndStroke =\n        'M 0 4.8214 C 0.236 4.8429, 0.369 4.8543, 0.544 4.8771 C 3.437 5.2557, 5.705 7.0957, 5.864 9.1936 C 5.874 9.3214, 5.874 9.4357, 5.874 9.6429 L 5.874 10';\n    } else {\n      cornerW = 12;\n      capH = 14;\n      midW = 224;\n      cornerStartFill =\n        'M 12 6.5837 C 6.346 6.7737, 5.176 6.8744, 4.168 7.2537 C 2.6445 7.8272, 1.418 8.8983, 0.8613 10.1415 C 0.493 10.9641, 0.5 11.9099, 0.5 13.6111 L 0.5 14 L 12 14 Z';\n      // Stroke draws the curve + outer vertical edge only. The seam with\n      // `.middle` (y = capH) is painted by a 1px CSS `border-top` on\n      // `.tank-frame.type-atmospheric:not(.compact) .middle` so it pixel-\n      // snaps identically to the pressurized cap's CSS border. Drawing it\n      // as an SVG stroke here would render thinner / blurrier due to\n      // sub-pixel anti-aliasing.\n      cornerStartStroke =\n        'M 12 6.5837 C 6.346 6.7737, 5.176 6.8744, 4.168 7.2537 C 2.6445 7.8272, 1.418 8.8983, 0.8613 10.1415 C 0.493 10.9641, 0.5 11.9099, 0.5 13.6111 L 0.5 14';\n      midFill =\n        'M 0 6.5837 C 16 5.1124, 56 1.9444, 112 1.9444 C 168 1.9444, 208 5.1124, 224 6.5837 L 224 14 L 0 14 Z';\n      midStroke =\n        'M 0 6.5837 C 16 5.1124, 56 1.9444, 112 1.9444 C 168 1.9444, 208 5.1124, 224 6.5837';\n      cornerEndFill =\n        'M 0 6.5837 C 5.654 6.7737, 6.824 6.8744, 7.832 7.2537 C 9.3555 7.8272, 10.582 8.8983, 11.1387 10.1415 C 11.507 10.9641, 11.5 11.9099, 11.5 13.6111 L 11.5 14 L 0 14 Z';\n      cornerEndStroke =\n        'M 0 6.5837 C 5.654 6.7737, 6.824 6.8744, 7.832 7.2537 C 9.3555 7.8272, 10.582 8.8983, 11.1387 10.1415 C 11.507 10.9641, 11.5 11.9099, 11.5 13.6111 L 11.5 14';\n    }\n\n    if (isHorizontal) {\n      // Rotate vertical paths -90deg into a `capH`-wide column. Source coord\n      // (x, y) maps to (y, cornerW - x) for corners and (y, midW - x) for mid.\n      return html`\n        <div class=\"cap cap-atmospheric cap-${side}\">\n          <svg\n            class=\"cap-corner cap-corner-start\"\n            viewBox=\"0 0 ${capH} ${cornerW}\"\n            preserveAspectRatio=\"xMidYMax meet\"\n            aria-hidden=\"true\"\n          >\n            ${svg`\n              <g transform=\"translate(0 ${cornerW}) rotate(-90)\">\n                <path class=\"cap-fill\" d=\"${cornerStartFill}\" />\n                <path class=\"cap-stroke\" fill=\"none\" d=\"${cornerStartStroke}\" />\n              </g>\n            `}\n          </svg>\n          <svg\n            class=\"cap-mid\"\n            viewBox=\"0 0 ${capH} ${midW}\"\n            preserveAspectRatio=\"none\"\n            aria-hidden=\"true\"\n          >\n            ${svg`\n              <g transform=\"translate(0 ${midW}) rotate(-90)\">\n                <path class=\"cap-fill\" d=\"${midFill}\" />\n                <path class=\"cap-stroke\" fill=\"none\" vector-effect=\"non-scaling-stroke\" d=\"${midStroke}\" />\n              </g>\n            `}\n          </svg>\n          <svg\n            class=\"cap-corner cap-corner-end\"\n            viewBox=\"0 0 ${capH} ${cornerW}\"\n            preserveAspectRatio=\"xMidYMin meet\"\n            aria-hidden=\"true\"\n          >\n            ${svg`\n              <g transform=\"translate(0 ${cornerW}) rotate(-90)\">\n                <path class=\"cap-fill\" d=\"${cornerEndFill}\" />\n                <path class=\"cap-stroke\" fill=\"none\" d=\"${cornerEndStroke}\" />\n              </g>\n            `}\n          </svg>\n        </div>\n      `;\n    }\n\n    return html`\n      <div class=\"cap cap-atmospheric cap-${side}\">\n        <svg\n          class=\"cap-corner cap-corner-start\"\n          viewBox=\"0 0 ${cornerW} ${capH}\"\n          preserveAspectRatio=\"xMaxYMid meet\"\n          aria-hidden=\"true\"\n        >\n          ${svg`\n            <path class=\"cap-fill\" d=\"${cornerStartFill}\" />\n            <path class=\"cap-stroke\" fill=\"none\" d=\"${cornerStartStroke}\" />\n          `}\n        </svg>\n        <svg\n          class=\"cap-mid\"\n          viewBox=\"0 0 ${midW} ${capH}\"\n          preserveAspectRatio=\"none\"\n          aria-hidden=\"true\"\n        >\n          ${svg`\n            <path class=\"cap-fill\" d=\"${midFill}\" />\n            <path class=\"cap-stroke\" fill=\"none\" vector-effect=\"non-scaling-stroke\" d=\"${midStroke}\" />\n          `}\n        </svg>\n        <svg\n          class=\"cap-corner cap-corner-end\"\n          viewBox=\"0 0 ${cornerW} ${capH}\"\n          preserveAspectRatio=\"xMinYMid meet\"\n          aria-hidden=\"true\"\n        >\n          ${svg`\n            <path class=\"cap-fill\" d=\"${cornerEndFill}\" />\n            <path class=\"cap-stroke\" fill=\"none\" d=\"${cornerEndStroke}\" />\n          `}\n        </svg>\n      </div>\n    `;\n  }\n\n  private renderCap(side: 'start' | 'end'): HTMLTemplateResult | null {\n    if (this.type === TankType.generic) return null;\n    if (this.type === TankType.battery && side === 'end') return null;\n    if (this.type === TankType.atmospheric) {\n      return this.renderAtmosphericCap(side);\n    }\n    if (this.type === TankType.pressurized) {\n      return html`<div class=\"cap cap-pressurized cap-${side}\"></div>`;\n    }\n    // battery, start only\n    return html`<div class=\"cap cap-battery cap-${side}\"></div>`;\n  }\n\n  override render() {\n    const safeMax = this.max > 0 ? this.max : 1;\n    const percent = Math.max(0, Math.min(100, (this.value / safeMax) * 100));\n    const isCompact = this.isCompact;\n\n    // In compact/static the `.halo` is a fixed-size column flex container\n    // that holds badges + tank-frame + (compact only) readout + tag. To let\n    // the tank-frame absorb the freed space when adjacent cells are empty,\n    // we collapse the empty cells with the `hidden` attribute (see CSS).\n    // In non-compact mode cells live inside the inner `.grid` and always\n    // reserve their min-content rows — unchanged from previous behavior.\n    const controlBadge = this._badgeControlType();\n    const alertBadge = this._badgeAlertType();\n    const interlockBadge = this._badgeInterlockType();\n    const commandLockedBadge = this._badgeCommandLockedType();\n    const hasEnumBadges =\n      controlBadge !== null ||\n      alertBadge !== null ||\n      interlockBadge !== null ||\n      commandLockedBadge !== null;\n\n    const badgesHidden = isCompact && !this._hasBadges && !hasEnumBadges;\n    const tagHidden = isCompact && !this._hasTagSlot && !this.tag;\n\n    const badgesCell = html`\n      <div class=\"badges\" ?hidden=${badgesHidden}>\n        <slot name=\"badges\" @slotchange=${this._onBadgesSlotChange}>\n          ${controlBadge\n            ? html`<obc-automation-badge\n                .type=${controlBadge}\n              ></obc-automation-badge>`\n            : nothing}\n          ${alertBadge\n            ? html`<obc-automation-badge\n                .type=${alertBadge}\n              ></obc-automation-badge>`\n            : nothing}\n          ${interlockBadge\n            ? html`<obc-automation-badge\n                .type=${interlockBadge}\n              ></obc-automation-badge>`\n            : nothing}\n          ${commandLockedBadge\n            ? html`<obc-automation-badge\n                .type=${commandLockedBadge}\n              ></obc-automation-badge>`\n            : nothing}\n        </slot>\n      </div>\n    `;\n    const tagCell = html`\n      <div class=\"tag\" ?hidden=${tagHidden}>\n        <slot name=\"tag\" @slotchange=${this._onTagSlotChange}>${this.tag}</slot>\n      </div>\n    `;\n    // Static mode intentionally renders the tank's capacity (max + unit)\n    // instead of a percent reading: a static tank represents \"device is\n    // present, current state unknown\", so a percent value would be\n    // misleading. The trend icon is omitted for the same reason. Consumers\n    // who need a custom label can still override the whole cell via the\n    // `readout` slot, or supply formatted text through the existing\n    // `max-value` / `unit` slots (no new API).\n    const readoutCell = this.static\n      ? html`\n          <div class=\"readout readout-compact readout-static\">\n            <slot name=\"readout\">\n              <slot name=\"max-value\">${this.max.toFixed(0)}</slot>\n              <slot name=\"unit\">m<sup>3</sup></slot>\n            </slot>\n          </div>\n        `\n      : isCompact\n        ? html`\n            <div class=\"readout readout-compact\">\n              <slot name=\"readout\">\n                ${this.showTrendSymbol ? this.trendIcon() : null}\n                <span class=\"percent\"\n                  >${percent.toFixed(0)}<span class=\"percent-symbol\"\n                    >%</span\n                  ></span\n                >\n              </slot>\n            </div>\n          `\n        : html`\n            <div class=\"readout\">\n              <slot name=\"readout\">\n                <div class=\"header\">\n                  ${this.showTrendSymbol ? this.trendIcon() : null}\n                  <div class=\"percent\">\n                    ${percent.toFixed(this.percentFractionDigits)}<span\n                      class=\"percent-symbol\"\n                      >%</span\n                    >\n                  </div>\n                </div>\n                <div class=\"value\">\n                  <div class=\"current\">\n                    <slot name=\"current-value\" class=\"current-value\"\n                      >${this.value.toFixed(0)}</slot\n                    ><span class=\"divider\">/</span>\n                  </div>\n                  <div class=\"max\">\n                    <slot class=\"max-value\" name=\"max-value\"\n                      >${this.max.toFixed(0)}</slot\n                    >\n                    <slot class=\"unit\" name=\"unit\">m<sup>3</sup></slot>\n                  </div>\n                </div>\n                <slot name=\"rich\">\n                  ${this.readout.length > 0\n                    ? html`\n                        <div class=\"rich-divider\"></div>\n                        <div class=\"rich\">\n                          ${this.readout.map(\n                            (row) => html`\n                              <div class=\"rich-row\">\n                                <span class=\"rich-label\">${row.label}</span>\n                                <span class=\"rich-value\"\n                                  >${row.value.toFixed(\n                                    this.percentFractionDigits\n                                  )}</span\n                                >\n                                <span class=\"rich-suffix\"\n                                  >${row.hasDegree\n                                    ? html`<span class=\"rich-glyph\">°</span>`\n                                    : nothing}${row.hasPercentage\n                                    ? html`<span class=\"rich-glyph\">%</span>`\n                                    : nothing}<span class=\"rich-unit\"\n                                    >${row.unit}</span\n                                  ></span\n                                >\n                              </div>\n                            `\n                          )}\n                        </div>\n                      `\n                    : nothing}\n                </slot>\n              </slot>\n            </div>\n          `;\n    // Decorative icon overlay (centered on the chart cell). Two stacked\n    // icon elements: the back layer paints an inherited SVG `stroke` halo\n    // (the icon's paths use `fill=\"currentColor\"`, and SVG `stroke` is\n    // inherited across the icon's shadow DOM); the front layer paints the\n    // colored fill via the `color` property. This mirrors the established\n    // silhouette pattern used by `obc-automation-button` (back-layer slot\n    // with stroke, front-layer slot with fill).\n    //\n    // The icon variant follows `type`: battery tanks show an energy-battery\n    // icon, all other types show the generic tank icon.\n    const graphIconClasses = classMap({\n      'graph-icon': true,\n      'priority-enhanced': this.priority === Priority.enhanced,\n    });\n    const graphIconOverlay =\n      this.type === TankType.battery\n        ? html`\n            <div class=${graphIconClasses} aria-hidden=\"true\">\n              <obi-energy-battery\n                class=\"graph-icon-stroke\"\n              ></obi-energy-battery>\n              <obi-energy-battery class=\"graph-icon-fill\"></obi-energy-battery>\n            </div>\n          `\n        : html`\n            <div class=${graphIconClasses} aria-hidden=\"true\">\n              <obi-tank class=\"graph-icon-stroke\"></obi-tank>\n              <obi-tank class=\"graph-icon-fill\"></obi-tank>\n            </div>\n          `;\n    // Alert-frame overlay. Mirrors the `obc-automation-button` pattern\n    // exactly so consumer API is identical. Placed inside `.halo` so the\n    // ring hugs only the bordered tank area; `belowHalo` (tag / readout) is\n    // unaffected. `.halo` is `position: relative` (see CSS) to anchor the\n    // absolutely-positioned alert-frame.\n    const alertFrameOverlay = this.alert\n      ? html`<obc-alert-frame\n          class=\"alert-frame\"\n          .type=${this.alertFrameType}\n          .thickness=${this.alertFrameThickness}\n          .status=${this.alertFrameStatus}\n          .showAlertCategoryIcon=${this.showAlertCategoryIcon}\n          .showIcon=${this.showAlertIcon}\n        >\n          <span slot=\"icon\"><slot name=\"alert-icon\"></slot></span>\n          <span slot=\"label\"><slot name=\"alert-label\"></slot></span>\n          <span slot=\"timer\"><slot name=\"alert-timer\"></slot></span>\n        </obc-alert-frame>`\n      : null;\n    let chartCell: HTMLTemplateResult;\n    if (this._usesGaugeTrend) {\n      // Forward the measured cell size as the gauge-trend's width/height,\n      // which it interprets as an aspect-ratio reference. Its internal\n      // ResizeObserver then picks up its own wrapper's clientWidth (= cell\n      // width, since we set style width:100%) and computes height from the\n      // aspect ratio — so the chart matches the cell exactly. We delay\n      // rendering until both dimensions are measured to avoid a divide-by-\n      // zero in the aspect-ratio math on first paint.\n      const hasSize = this._cellWidth > 0 && this._cellHeight > 0;\n      chartCell = html`\n        <div class=\"bar-container chart-cell\">\n          ${hasSize\n            ? html`<obc-gauge-trend\n                .data=${this.chartData}\n                .minValue=${0}\n                .maxValue=${safeMax}\n                .value=${this.value}\n                .hasBar=${this.chartMode === TankChartMode.graphAndBar}\n                .hasScale=${false}\n                .hasLabelPadding=${false}\n                .chartFill=${true}\n                .hasAdvice=${this.hasAdvice}\n                .advice=${this.advice}\n                .width=${this._cellWidth}\n                .height=${this._cellHeight}\n                style=\"width: 100%; height: 100%;\"\n                .priority=${this.priority}\n              ></obc-gauge-trend>`\n            : null}\n          ${this.hasGraphIcon ? graphIconOverlay : null}\n        </div>\n      `;\n    } else {\n      // Bar mode: render the shared SVG bar (`obc-bar-vertical` /\n      // `-horizontal`) — the same renderer used by gauge-trend's side bar —\n      // so advice overlays work the same way across all three chart modes.\n      //\n      // TODO(refactor): once `obc-gauge-trend` supports a bar-only layout at\n      // this size (no chart-line area), migrate this branch to gauge-trend\n      // too so all three chart modes share a single implementation.\n      //\n      // TODO(theming): the bar fill currently uses the standard instrument\n      // palette (`--instrument-regular-tertiary-color` for tint mode). The\n      // legacy CSS bar used per-medium colors (e.g. `--automation-medium-fuel`).\n      // Extend `external-scale.ts` (and the bar-vertical/-horizontal wrappers)\n      // to accept a medium / fuel color so the tank can restore its\n      // per-`medium` coloring through the shared renderer.\n      const hasSize = this._cellWidth > 0 && this._cellHeight > 0;\n      // The inner bar always renders vertically, regardless of the tank's\n      // outer `orientation`. Only the tank's outer wrapper flips; its inner\n      // chart cell stays portrait. This matches gauge-trend behavior.\n      //\n      // Match gauge-trend's proportional sizing so advice pills (and other\n      // fixed-pixel SVG primitives) render at the same on-screen size in\n      // every chart mode. We mirror gauge-trend's defaults exactly:\n      // `fixedAspectRatio=true` + `scaleReferenceSize=384`. The bar SVG is\n      // then built in a 384-unit-tall viewBox and shrunk into the cell via\n      // `xMidYMid meet`, giving on-screen scale = cellHeight / 384.\n      //\n      // Because the meet transform scales the viewBox uniformly, we must\n      // also size `barThickness` in viewBox units (not cell pixels) so the\n      // bar still fills the cell width after scaling. We pick the viewBox\n      // cross-axis size so width-fit and height-fit ratios match exactly\n      // (no horizontal gutters): viewBoxCross = cellWidth * 384 / cellHeight.\n      const SCALE_REFERENCE_SIZE = 384;\n      const adviceReserveVb = this.hasAdvice ? 16 : 0;\n      const safeCellHeight = Math.max(1, this._cellHeight);\n      const viewBoxCross =\n        (this._cellWidth * SCALE_REFERENCE_SIZE) / safeCellHeight;\n      const barThickness = Math.max(0, viewBoxCross - adviceReserveVb);\n      // `tint` is locked in for tank bar mode: it draws a fill from 0 to\n      // value plus a small marker at the value position, which mirrors the\n      // legacy CSS bar's \"fill + top border at value\" visual idiom.\n      const barWrapper = html`<obc-bar-vertical\n        .minValue=${0}\n        .maxValue=${safeMax}\n        .value=${this.value}\n        .height=${this._cellHeight}\n        .fixedAspectRatio=${true}\n        .scaleReferenceSize=${SCALE_REFERENCE_SIZE}\n        .paddingTop=${0}\n        .paddingBottom=${0}\n        .side=${ExternalScaleSide.right}\n        .hasBar=${true}\n        .hasScale=${false}\n        .showLabels=${false}\n        .barThickness=${barThickness}\n        .fillMode=${FillMode.tint}\n        .instrumentMode=${true}\n        .borderRadius=${2}\n        .advices=${this.hasAdvice ? this.advice : []}\n        .advicePosition=${AdvicePosition.inner}\n        style=\"width: 100%; height: 100%;\"\n        .priority=${this.priority}\n      ></obc-bar-vertical>`;\n      chartCell = html`\n        <div class=\"bar-container bar-cell\">\n          ${hasSize ? barWrapper : null}\n          ${this.hasGraphIcon ? graphIconOverlay : null}\n        </div>\n      `;\n    }\n\n    const frameClasses = classMap({\n      'tank-frame': true,\n      [`type-${this.type}`]: true,\n      [`orientation-${this.orientation}`]: true,\n      [this.medium]: true,\n      compact: isCompact,\n      static: this.static,\n    });\n\n    let middleContents: HTMLTemplateResult;\n    if (this.static) {\n      middleContents = html`<div class=\"static-readout\">${readoutCell}</div>`;\n    } else if (this.compact) {\n      middleContents = chartCell;\n    } else {\n      middleContents = html`<div class=\"grid\">\n        ${tagCell}${badgesCell}${readoutCell}${chartCell}\n      </div>`;\n    }\n\n    const tankFrame = html`\n      <div class=${frameClasses}>\n        ${this.renderCap('start')}\n        <div class=\"middle\">${middleContents}</div>\n        ${this.renderCap('end')}\n      </div>\n    `;\n\n    // Whole component is one interactive element. The halo (flat-mixin\n    // border/background that appears on hover/pressed/focus) is painted on\n    // the inner `.halo` wrapper via `visibleWrapperClass`, so the surround\n    // hugs only the bordered area:\n    //   - non-compact: just the tank-frame (grid inside it carries badges,\n    //     readout, tag).\n    //   - compact: fixed-size column flex — badges, tank-frame (flex-grow),\n    //     readout, tag. Empty cells (badges/tag) collapse via `?hidden`\n    //     above so the tank-frame absorbs the freed space.\n    //   - static: same as compact but no separate readout cell (the readout\n    //     is centered INSIDE the tank-frame via `static-readout`).\n    //\n    // The alert-frame overlay is the last child of `.halo` so the ring\n    // overlays every cell (and any cell-collapse mechanics work uniformly).\n    let haloContents: HTMLTemplateResult;\n    if (this.static) {\n      haloContents = html`${badgesCell}${tankFrame}${tagCell}`;\n    } else if (this.compact) {\n      haloContents = html`${badgesCell}${tankFrame}${readoutCell}${tagCell}`;\n    } else {\n      haloContents = tankFrame;\n    }\n    const halo = html`\n      <div class=\"halo\">${haloContents}${alertFrameOverlay}</div>\n    `;\n\n    // `aria-live=\"polite\"` + `aria-atomic=\"true\"` on the root so the\n    // slotted alert label (and any state change of the alert frame) is\n    // announced once when `alert` flips on. Always present — an empty live\n    // region is harmless and avoids screen-reader re-registration races.\n    // TODO(a11y): the rest of the automation component family still lacks\n    // this live-region announcement; consolidate when alert support is\n    // factored into a shared mixin.\n    return html`\n      ${this.static\n        ? html`<div\n            class=\"root\"\n            role=\"img\"\n            aria-label=${this.tag || 'Tank'}\n            aria-live=\"polite\"\n            aria-atomic=\"true\"\n          >\n            ${halo}\n          </div>`\n        : html`<button\n            class=\"root\"\n            type=\"button\"\n            aria-label=${this.tag || 'Tank'}\n            aria-live=\"polite\"\n            aria-atomic=\"true\"\n          >\n            ${halo}\n          </button>`}\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-automation-tank': ObcAutomationTank;\n  }\n}\n"],"names":["TankTrend","TankType","TankOrientation","TankPositioning","TankChartMode"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CO,IAAK,8BAAAA,eAAL;AACLA,aAAA,YAAA,IAAa;AACbA,aAAA,QAAA,IAAS;AACTA,aAAA,QAAA,IAAS;AACTA,aAAA,SAAA,IAAU;AACVA,aAAA,aAAA,IAAc;AACdA,aAAA,QAAA,IAAS;AANC,SAAAA;AAAA,GAAA,aAAA,CAAA,CAAA;AASL,IAAK,6BAAAC,cAAL;AACLA,YAAA,SAAA,IAAU;AACVA,YAAA,aAAA,IAAc;AACdA,YAAA,aAAA,IAAc;AACdA,YAAA,SAAA,IAAU;AAJA,SAAAA;AAAA,GAAA,YAAA,CAAA,CAAA;AAOL,IAAK,oCAAAC,qBAAL;AACLA,mBAAA,UAAA,IAAW;AACXA,mBAAA,YAAA,IAAa;AAFH,SAAAA;AAAA,GAAA,mBAAA,CAAA,CAAA;AAoBL,IAAK,oCAAAC,qBAAL;AACLA,mBAAA,OAAA,IAAQ;AACRA,mBAAA,QAAA,IAAS;AAFC,SAAAA;AAAA,GAAA,mBAAA,CAAA,CAAA;AAKL,IAAK,kCAAAC,mBAAL;AAELA,iBAAA,KAAA,IAAM;AAENA,iBAAA,OAAA,IAAQ;AAERA,iBAAA,aAAA,IAAc;AANJ,SAAAA;AAAA,GAAA,iBAAA,CAAA,CAAA;AAoCL,IAAM,oBAAN,cAAgC,WAAW;AAAA,EAA3C,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,SAAqB,WAAW;AAChC,SAAA,QAAgB;AAChB,SAAA,MAAc;AACd,SAAA,QAAmB;AACJ,SAAA,OAAiB;AACjB,SAAA,cACvC;AACwC,SAAA,UAAmB;AAOpB,SAAA,cACvC;AAawC,SAAA,SAAkB;AAClC,SAAA,MAAc;AASxC,SAAA,YAA2B;AAI3B,SAAA,YAAiC,CAAA;AAGP,SAAA,WAAqB,SAAS;AAQxD,SAAA,SAAyB,CAAA;AAGE,SAAA,YAAY;AAkBM,SAAA,eAAe;AASjC,SAAA,QAAiB;AAClB,SAAA,iBACxB,kBAAkB;AACM,SAAA,sBACxB,uBAAuB;AACC,SAAA,mBACxB,oBAAoB;AACuB,SAAA,wBAC3C;AACyB,SAAA,gBAAyB;AAaP,SAAA,kBAA2B;AAW9C,SAAA,wBAAgC;AAef,SAAA,UAA6B,CAAA;AAc9C,SAAA,eACxB,6BAA6B;AACL,SAAA,aACxB,2BAA2B;AACH,SAAA,iBACxB,+BAA+B;AAEjC,SAAA,qBACE,mCAAmC;AAE5B,SAAQ,aAAa;AACrB,SAAQ,cAAc;AAQtB,SAAQ,aAAa;AACrB,SAAQ,cAAc;AAAA,EAAA;AAAA,EAI/B,IAAY,YAAqB;AAC/B,WAAO,KAAK,WAAW,KAAK;AAAA,EAC9B;AAAA,EAEQ,kBAAiD;AACvD,YAAQ,KAAK,YAAA;AAAA,MACX,KAAK,2BAA2B;AAC9B,eAAO,uBAAuB;AAAA,MAChC,KAAK,2BAA2B;AAC9B,eAAO,uBAAuB;AAAA,MAChC,KAAK,2BAA2B;AAC9B,eAAO,uBAAuB;AAAA,MAChC,KAAK,2BAA2B;AAC9B,eAAO,uBAAuB;AAAA,MAChC;AACE,eAAO;AAAA,IAAA;AAAA,EAEb;AAAA,EAEQ,oBAAmD;AACzD,YAAQ,KAAK,cAAA;AAAA,MACX,KAAK,6BAA6B;AAChC,eAAO,uBAAuB;AAAA,MAChC,KAAK,6BAA6B;AAChC,eAAO,uBAAuB;AAAA,MAChC,KAAK,6BAA6B;AAChC,eAAO,uBAAuB;AAAA,MAChC,KAAK,6BAA6B;AAChC,eAAO,uBAAuB;AAAA,MAChC,KAAK,6BAA6B;AAChC,eAAO,uBAAuB;AAAA,MAChC;AACE,eAAO;AAAA,IAAA;AAAA,EAEb;AAAA,EAEQ,sBAAqD;AAC3D,YAAQ,KAAK,gBAAA;AAAA,MACX,KAAK,+BAA+B;AAClC,eAAO,uBAAuB;AAAA,MAChC,KAAK,+BAA+B;AAClC,eAAO,uBAAuB;AAAA,MAChC;AACE,eAAO;AAAA,IAAA;AAAA,EAEb;AAAA,EAEQ,0BAAyD;AAC/D,QACE,KAAK,uBACL,mCAAmC,eACnC;AACA,aAAO,uBAAuB;AAAA,IAChC;AACA,WAAO;AAAA,EACT;AAAA,EAEA,IAAY,kBAA2B;AACrC,WACE,KAAK,cAAc,WACnB,KAAK,cAAc;AAAA,EAEvB;AAAA,EAEQ,oBAAoB,GAAgB;AAC1C,UAAM,OAAO,EAAE;AACf,SAAK,aAAa,KACf,cAAc,EAAC,SAAS,KAAA,CAAK,EAC7B;AAAA,MACC,CAAC,MACC,EAAE,aAAa,KAAK,gBACnB,EAAE,aAAa,KAAK,aAAa,CAAC,CAAC,EAAE,aAAa,KAAA;AAAA,IAAK;AAAA,EAEhE;AAAA,EAEQ,iBAAiB,GAAgB;AACvC,UAAM,OAAO,EAAE;AACf,SAAK,cAAc,KAChB,cAAc,EAAC,SAAS,KAAA,CAAK,EAC7B;AAAA,MACC,CAAC,MACC,EAAE,aAAa,KAAK,gBACnB,EAAE,aAAa,KAAK,aAAa,CAAC,CAAC,EAAE,aAAa,KAAA;AAAA,IAAK;AAAA,EAEhE;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA;AACN,SAAK,sBAAsB,WAAA;AAC3B,SAAK,uBAAuB;AAC5B,SAAK,gBAAgB;AAAA,EACvB;AAAA,EAEmB,QACjB,SACM;AACN,UAAM,QAAQ,OAAO;AASrB,SAAK,yBAAA;AAAA,EACP;AAAA,EAEQ,2BAAiC;AAIvC,UAAM,OAAO,KAAK,WAAW,cAAc,gBAAgB;AAC3D,QAAI,CAAC,MAAM;AACT,UAAI,KAAK,sBAAsB;AAC7B,aAAK,qBAAqB,WAAA;AAC1B,aAAK,gBAAgB;AAAA,MACvB;AACA;AAAA,IACF;AACA,QAAI,SAAS,KAAK,cAAe;AAEjC,QAAI,CAAC,KAAK,sBAAsB;AAC9B,WAAK,uBAAuB,IAAI,eAAe,CAAC,YAAY;AAC1D,cAAM,QAAQ,QAAQ,CAAC;AACvB,YAAI,CAAC,MAAO;AACZ,cAAM,IAAI,KAAK,MAAM,MAAM,YAAY,KAAK;AAC5C,cAAM,IAAI,KAAK,MAAM,MAAM,YAAY,MAAM;AAC7C,YAAI,MAAM,KAAK,WAAY,MAAK,aAAa;AAC7C,YAAI,MAAM,KAAK,YAAa,MAAK,cAAc;AAAA,MACjD,CAAC;AAAA,IACH,OAAO;AACL,WAAK,qBAAqB,WAAA;AAAA,IAC5B;AACA,SAAK,qBAAqB,QAAQ,IAAI;AACtC,SAAK,gBAAgB;AAAA,EACvB;AAAA,EAEA,YAAiD;AAC/C,QAAI,KAAK,UAAU,eAAsB;AACvC,aAAO;AAAA;AAAA;AAAA,IAGT,WAAW,KAAK,UAAU,UAAkB;AAC1C,aAAO;AAAA;AAAA;AAAA,IAGT,WAAW,KAAK,UAAU,gBAAuB;AAC/C,aAAO;AAAA;AAAA;AAAA,IAGT,WAAW,KAAK,UAAU,WAAmB;AAC3C,aAAO;AAAA;AAAA;AAAA,IAGT,WAAW,KAAK,UAAU,UAAkB;AAC1C,aAAO;AAAA,IACT,OAAO;AAEL,aAAO;AAAA,IACT;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgBQ,qBAAqB,MAA2C;AACtE,UAAM,eAAe,KAAK,gBAAgB;AAS1C,QAAI;AACJ,QAAI;AACJ,QAAI;AACJ,QAAI;AACJ,QAAI;AACJ,QAAI;AACJ,QAAI;AACJ,QAAI;AACJ,QAAI;AAEJ,QAAI,KAAK,WAAW;AAClB,gBAAU;AACV,aAAO;AACP,aAAO;AACP,wBACE;AACF,0BACE;AACF,gBACE;AACF,kBACE;AACF,sBACE;AACF,wBACE;AAAA,IACJ,OAAO;AACL,gBAAU;AACV,aAAO;AACP,aAAO;AACP,wBACE;AAOF,0BACE;AACF,gBACE;AACF,kBACE;AACF,sBACE;AACF,wBACE;AAAA,IACJ;AAEA,QAAI,cAAc;AAGhB,aAAO;AAAA,8CACiC,IAAI;AAAA;AAAA;AAAA,2BAGvB,IAAI,IAAI,OAAO;AAAA;AAAA;AAAA;AAAA,cAI5B;AAAA,0CAC4B,OAAO;AAAA,4CACL,eAAe;AAAA,0DACD,iBAAiB;AAAA;AAAA,aAE9D;AAAA;AAAA;AAAA;AAAA,2BAIc,IAAI,IAAI,IAAI;AAAA;AAAA;AAAA;AAAA,cAIzB;AAAA,0CAC4B,IAAI;AAAA,4CACF,OAAO;AAAA,6FAC0C,SAAS;AAAA;AAAA,aAEzF;AAAA;AAAA;AAAA;AAAA,2BAIc,IAAI,IAAI,OAAO;AAAA;AAAA;AAAA;AAAA,cAI5B;AAAA,0CAC4B,OAAO;AAAA,4CACL,aAAa;AAAA,0DACC,eAAe;AAAA;AAAA,aAE5D;AAAA;AAAA;AAAA;AAAA,IAIT;AAEA,WAAO;AAAA,4CACiC,IAAI;AAAA;AAAA;AAAA,yBAGvB,OAAO,IAAI,IAAI;AAAA;AAAA;AAAA;AAAA,YAI5B;AAAA,wCAC4B,eAAe;AAAA,sDACD,iBAAiB;AAAA,WAC5D;AAAA;AAAA;AAAA;AAAA,yBAIc,IAAI,IAAI,IAAI;AAAA;AAAA;AAAA;AAAA,YAIzB;AAAA,wCAC4B,OAAO;AAAA,yFAC0C,SAAS;AAAA,WACvF;AAAA;AAAA;AAAA;AAAA,yBAIc,OAAO,IAAI,IAAI;AAAA;AAAA;AAAA;AAAA,YAI5B;AAAA,wCAC4B,aAAa;AAAA,sDACC,eAAe;AAAA,WAC1D;AAAA;AAAA;AAAA;AAAA,EAIT;AAAA,EAEQ,UAAU,MAAkD;AAClE,QAAI,KAAK,SAAS,UAAkB,QAAO;AAC3C,QAAI,KAAK,SAAS,aAAoB,SAAS,MAAO,QAAO;AAC7D,QAAI,KAAK,SAAS,eAAsB;AACtC,aAAO,KAAK,qBAAqB,IAAI;AAAA,IACvC;AACA,QAAI,KAAK,SAAS,eAAsB;AACtC,aAAO,2CAA2C,IAAI;AAAA,IACxD;AAEA,WAAO,uCAAuC,IAAI;AAAA,EACpD;AAAA,EAES,SAAS;AAChB,UAAM,UAAU,KAAK,MAAM,IAAI,KAAK,MAAM;AAC1C,UAAM,UAAU,KAAK,IAAI,GAAG,KAAK,IAAI,KAAM,KAAK,QAAQ,UAAW,GAAG,CAAC;AACvE,UAAM,YAAY,KAAK;AAQvB,UAAM,eAAe,KAAK,kBAAA;AAC1B,UAAM,aAAa,KAAK,gBAAA;AACxB,UAAM,iBAAiB,KAAK,oBAAA;AAC5B,UAAM,qBAAqB,KAAK,wBAAA;AAChC,UAAM,gBACJ,iBAAiB,QACjB,eAAe,QACf,mBAAmB,QACnB,uBAAuB;AAEzB,UAAM,eAAe,aAAa,CAAC,KAAK,cAAc,CAAC;AACvD,UAAM,YAAY,aAAa,CAAC,KAAK,eAAe,CAAC,KAAK;AAE1D,UAAM,aAAa;AAAA,oCACa,YAAY;AAAA,0CACN,KAAK,mBAAmB;AAAA,YACtD,eACE;AAAA,wBACU,YAAY;AAAA,0CAEtB,OAAO;AAAA,YACT,aACE;AAAA,wBACU,UAAU;AAAA,0CAEpB,OAAO;AAAA,YACT,iBACE;AAAA,wBACU,cAAc;AAAA,0CAExB,OAAO;AAAA,YACT,qBACE;AAAA,wBACU,kBAAkB;AAAA,0CAE5B,OAAO;AAAA;AAAA;AAAA;AAIjB,UAAM,UAAU;AAAA,iCACa,SAAS;AAAA,uCACH,KAAK,gBAAgB,IAAI,KAAK,GAAG;AAAA;AAAA;AAUpE,UAAM,cAAc,KAAK,SACrB;AAAA;AAAA;AAAA,uCAG+B,KAAK,IAAI,QAAQ,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,YAKlD,YACE;AAAA;AAAA;AAAA,kBAGQ,KAAK,kBAAkB,KAAK,UAAA,IAAc,IAAI;AAAA;AAAA,qBAE3C,QAAQ,QAAQ,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAO7B;AAAA;AAAA;AAAA;AAAA,oBAIU,KAAK,kBAAkB,KAAK,UAAA,IAAc,IAAI;AAAA;AAAA,sBAE5C,QAAQ,QAAQ,KAAK,qBAAqB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBASxC,KAAK,MAAM,QAAQ,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,yBAKrB,KAAK,IAAI,QAAQ,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMxB,KAAK,QAAQ,SAAS,IACpB;AAAA;AAAA;AAAA,4BAGM,KAAK,QAAQ;AAAA,MACb,CAAC,QAAQ;AAAA;AAAA,2DAEsB,IAAI,KAAK;AAAA;AAAA,qCAE/B,IAAI,MAAM;AAAA,QACX,KAAK;AAAA,MAAA,CACN;AAAA;AAAA;AAAA,qCAGE,IAAI,YACH,0CACA,OAAO,GAAG,IAAI,gBACd,0CACA,OAAO;AAAA,uCACN,IAAI,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA,CAKpB;AAAA;AAAA,0BAGL,OAAO;AAAA;AAAA;AAAA;AAAA;AAezB,UAAM,mBAAmB,SAAS;AAAA,MAChC,cAAc;AAAA,MACd,qBAAqB,KAAK,aAAa,SAAS;AAAA,IAAA,CACjD;AACD,UAAM,mBACJ,KAAK,SAAS,YACV;AAAA,yBACe,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAO/B;AAAA,yBACe,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAUrC,UAAM,oBAAoB,KAAK,QAC3B;AAAA;AAAA,kBAEU,KAAK,cAAc;AAAA,uBACd,KAAK,mBAAmB;AAAA,oBAC3B,KAAK,gBAAgB;AAAA,mCACN,KAAK,qBAAqB;AAAA,sBACvC,KAAK,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,8BAMhC;AACJ,QAAI;AACJ,QAAI,KAAK,iBAAiB;AAQxB,YAAM,UAAU,KAAK,aAAa,KAAK,KAAK,cAAc;AAC1D,kBAAY;AAAA;AAAA,YAEN,UACE;AAAA,wBACU,KAAK,SAAS;AAAA,4BACV,CAAC;AAAA,4BACD,OAAO;AAAA,yBACV,KAAK,KAAK;AAAA,0BACT,KAAK,cAAc,eAAA;AAAA,4BACjB,KAAK;AAAA,mCACE,KAAK;AAAA,6BACX,IAAI;AAAA,6BACJ,KAAK,SAAS;AAAA,0BACjB,KAAK,MAAM;AAAA,yBACZ,KAAK,UAAU;AAAA,0BACd,KAAK,WAAW;AAAA;AAAA,4BAEd,KAAK,QAAQ;AAAA,qCAE3B,IAAI;AAAA,YACN,KAAK,eAAe,mBAAmB,IAAI;AAAA;AAAA;AAAA,IAGnD,OAAO;AAeL,YAAM,UAAU,KAAK,aAAa,KAAK,KAAK,cAAc;AAiB1D,YAAM,uBAAuB;AAC7B,YAAM,kBAAkB,KAAK,YAAY,KAAK;AAC9C,YAAM,iBAAiB,KAAK,IAAI,GAAG,KAAK,WAAW;AACnD,YAAM,eACH,KAAK,aAAa,uBAAwB;AAC7C,YAAM,eAAe,KAAK,IAAI,GAAG,eAAe,eAAe;AAI/D,YAAM,aAAa;AAAA,oBACL,CAAC;AAAA,oBACD,OAAO;AAAA,iBACV,KAAK,KAAK;AAAA,kBACT,KAAK,WAAW;AAAA,4BACN,IAAI;AAAA,8BACF,oBAAoB;AAAA,sBAC5B,CAAC;AAAA,yBACE,CAAC;AAAA,gBACV,kBAAkB,KAAK;AAAA,kBACrB,IAAI;AAAA,oBACF,KAAK;AAAA,sBACH,KAAK;AAAA,wBACH,YAAY;AAAA,oBAChB,SAAS,IAAI;AAAA,0BACP,IAAI;AAAA,wBACN,CAAC;AAAA,mBACN,KAAK,YAAY,KAAK,SAAS,CAAA,CAAE;AAAA,0BAC1B,eAAe,KAAK;AAAA;AAAA,oBAE1B,KAAK,QAAQ;AAAA;AAE3B,kBAAY;AAAA;AAAA,YAEN,UAAU,aAAa,IAAI;AAAA,YAC3B,KAAK,eAAe,mBAAmB,IAAI;AAAA;AAAA;AAAA,IAGnD;AAEA,UAAM,eAAe,SAAS;AAAA,MAC5B,cAAc;AAAA,MACd,CAAC,QAAQ,KAAK,IAAI,EAAE,GAAG;AAAA,MACvB,CAAC,eAAe,KAAK,WAAW,EAAE,GAAG;AAAA,MACrC,CAAC,KAAK,MAAM,GAAG;AAAA,MACf,SAAS;AAAA,MACT,QAAQ,KAAK;AAAA,IAAA,CACd;AAED,QAAI;AACJ,QAAI,KAAK,QAAQ;AACf,uBAAiB,mCAAmC,WAAW;AAAA,IACjE,WAAW,KAAK,SAAS;AACvB,uBAAiB;AAAA,IACnB,OAAO;AACL,uBAAiB;AAAA,UACb,OAAO,GAAG,UAAU,GAAG,WAAW,GAAG,SAAS;AAAA;AAAA,IAEpD;AAEA,UAAM,YAAY;AAAA,mBACH,YAAY;AAAA,UACrB,KAAK,UAAU,OAAO,CAAC;AAAA,8BACH,cAAc;AAAA,UAClC,KAAK,UAAU,KAAK,CAAC;AAAA;AAAA;AAkB3B,QAAI;AACJ,QAAI,KAAK,QAAQ;AACf,qBAAe,OAAO,UAAU,GAAG,SAAS,GAAG,OAAO;AAAA,IACxD,WAAW,KAAK,SAAS;AACvB,qBAAe,OAAO,UAAU,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO;AAAA,IACtE,OAAO;AACL,qBAAe;AAAA,IACjB;AACA,UAAM,OAAO;AAAA,0BACS,YAAY,GAAG,iBAAiB;AAAA;AAUtD,WAAO;AAAA,QACH,KAAK,SACH;AAAA;AAAA;AAAA,yBAGe,KAAK,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA,cAI7B,IAAI;AAAA,oBAER;AAAA;AAAA;AAAA,yBAGe,KAAK,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA,cAI7B,IAAI;AAAA,oBACE;AAAA;AAAA,EAElB;AAGF;AAv3Ba,kBAs3BK,SAAS,UAAU,YAAY;AAr3BrB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GADb,kBACe,WAAA,UAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAFb,kBAEe,WAAA,SAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAHb,kBAGe,WAAA,OAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAJb,kBAIe,WAAA,SAAA,CAAA;AACe,gBAAA;AAAA,EAAxC,SAAS,EAAC,MAAM,QAAQ,SAAS,MAAK;AAAA,GAL5B,kBAK8B,WAAA,QAAA,CAAA;AACA,gBAAA;AAAA,EAAxC,SAAS,EAAC,MAAM,QAAQ,SAAS,MAAK;AAAA,GAN5B,kBAM8B,WAAA,eAAA,CAAA;AAEC,gBAAA;AAAA,EAAzC,SAAS,EAAC,MAAM,SAAS,SAAS,MAAK;AAAA,GAR7B,kBAQ+B,WAAA,WAAA,CAAA;AAOD,gBAAA;AAAA,EAAxC,SAAS,EAAC,MAAM,QAAQ,SAAS,MAAK;AAAA,GAf5B,kBAe8B,WAAA,eAAA,CAAA;AAcC,gBAAA;AAAA,EAAzC,SAAS,EAAC,MAAM,SAAS,SAAS,MAAK;AAAA,GA7B7B,kBA6B+B,WAAA,UAAA,CAAA;AAChB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GA9Bb,kBA8Be,WAAA,OAAA,CAAA;AAS1B,gBAAA;AAAA,EADC,SAAS,EAAC,MAAM,QAAQ,SAAS,MAAM,WAAW,cAAa;AAAA,GAtCrD,kBAuCX,WAAA,aAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAC,MAAM,OAAO,WAAW,OAAM;AAAA,GA1C9B,kBA2CX,WAAA,aAAA,CAAA;AAG0B,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GA9Cb,kBA8Ce,WAAA,YAAA,CAAA;AAQ1B,gBAAA;AAAA,EADC,SAAS,EAAC,MAAM,OAAO,WAAW,OAAM;AAAA,GArD9B,kBAsDX,WAAA,UAAA,CAAA;AAG2B,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAzDd,kBAyDgB,WAAA,aAAA,CAAA;AAkBkB,gBAAA;AAAA,EAA5C,SAAS,EAAC,MAAM,SAAS,WAAW,OAAM;AAAA,GA3EhC,kBA2EkC,WAAA,gBAAA,CAAA;AASlB,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GApFd,kBAoFgB,WAAA,SAAA,CAAA;AACD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GArFb,kBAqFe,WAAA,kBAAA,CAAA;AAEA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAvFb,kBAuFe,WAAA,uBAAA,CAAA;AAEA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAzFb,kBAyFe,WAAA,oBAAA,CAAA;AAEmB,gBAAA;AAAA,EAA5C,SAAS,EAAC,MAAM,SAAS,WAAW,OAAM;AAAA,GA3FhC,kBA2FkC,WAAA,yBAAA,CAAA;AAElB,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GA7Fd,kBA6FgB,WAAA,iBAAA,CAAA;AAakB,gBAAA;AAAA,EAA5C,SAAS,EAAC,MAAM,SAAS,WAAW,OAAM;AAAA,GA1GhC,kBA0GkC,WAAA,mBAAA,CAAA;AAWnB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GArHb,kBAqHe,WAAA,yBAAA,CAAA;AAeiB,gBAAA;AAAA,EAA1C,SAAS,EAAC,MAAM,OAAO,WAAW,OAAM;AAAA,GApI9B,kBAoIgC,WAAA,WAAA,CAAA;AAcjB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAlJb,kBAkJe,WAAA,gBAAA,CAAA;AAEA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GApJb,kBAoJe,WAAA,cAAA,CAAA;AAEA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAtJb,kBAsJe,WAAA,kBAAA,CAAA;AAG1B,gBAAA;AAAA,EADC,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAxJb,kBAyJX,WAAA,sBAAA,CAAA;AAGiB,gBAAA;AAAA,EAAhB,MAAA;AAAM,GA5JI,kBA4JM,WAAA,cAAA,CAAA;AACA,gBAAA;AAAA,EAAhB,MAAA;AAAM,GA7JI,kBA6JM,WAAA,eAAA,CAAA;AAQA,gBAAA;AAAA,EAAhB,MAAA;AAAM,GArKI,kBAqKM,WAAA,cAAA,CAAA;AACA,gBAAA;AAAA,EAAhB,MAAA;AAAM,GAtKI,kBAsKM,WAAA,eAAA,CAAA;AAtKN,oBAAN,gBAAA;AAAA,EADN,cAAc,qBAAqB;AAAA,GACvB,iBAAA;"}

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

@@ -52,6 +52,9 @@ export declare enum IconButtonVariant {
  * | (default) | Always              | The icon to display (e.g., `<obi-search>`)   |
  * | label     | If `hasLabel` is set | Optional label text below the icon           |
  *
+ * ## Events
+ * - Emits a standard `click` event (`onClick` handler in framework wrappers) when activated.
+ *
  * ## Best Practices
  * - Ensure icons are clear and universally recognizable.
  * - For accessibility, provide an `aria-label` or descriptive label for the button's action.
@@ -71,6 +74,7 @@ export declare enum IconButtonVariant {
  *
  * @slot - Icon slot (default): Place an icon such as <obi-search> here.
  * @slot label - Optional label shown below the icon when `hasLabel` is true.
+ * @fires click - Fired when the button is clicked (if not disabled).
  */
 export declare class ObcIconButton extends LitElement {
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAQ,OAAO,EAAY,MAAM,KAAK,CAAC;AAMzD;;;;;GAKG;AACH,oBAAY,iBAAiB;IAC3B,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,WAAW,gBAAgB;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C;;;;;OAKG;IACuB,OAAO,EAAE,iBAAiB,CACzB;IAE3B;;;OAGG;IACwB,SAAS,UAAS;IAE7C;;;OAGG;IACwB,UAAU,UAAS;IAE9C;;;OAGG;IACwB,WAAW,UAAS;IAE/C;;;OAGG;IACwB,WAAW,UAAS;IAE/C;;OAEG;IACwB,IAAI,UAAS;IAExC;;OAEG;IACwB,QAAQ,UAAS;IAE5C;;;;OAIG;IACuB,QAAQ,EAAE,SAAS,GAAG,MAAM,CAAa;IAEnE;;OAEG;IACwB,QAAQ,EAAE,OAAO,CAAS;IAErD,iFAAiF;IACpC,WAAW,UAAQ;IAEhE,IAAI,eAAe,0DAoDlB;IAEQ,MAAM;IAiCf,OAAgB,MAAM,0BAAwB;CAC/C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAQ,OAAO,EAAY,MAAM,KAAK,CAAC;AAMzD;;;;;GAKG;AACH,oBAAY,iBAAiB;IAC3B,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,WAAW,gBAAgB;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C;;;;;OAKG;IACuB,OAAO,EAAE,iBAAiB,CACzB;IAE3B;;;OAGG;IACwB,SAAS,UAAS;IAE7C;;;OAGG;IACwB,UAAU,UAAS;IAE9C;;;OAGG;IACwB,WAAW,UAAS;IAE/C;;;OAGG;IACwB,WAAW,UAAS;IAE/C;;OAEG;IACwB,IAAI,UAAS;IAExC;;OAEG;IACwB,QAAQ,UAAS;IAE5C;;;;OAIG;IACuB,QAAQ,EAAE,SAAS,GAAG,MAAM,CAAa;IAEnE;;OAEG;IACwB,QAAQ,EAAE,OAAO,CAAS;IAErD,iFAAiF;IACpC,WAAW,UAAQ;IAEhE,IAAI,eAAe,0DAoDlB;IAEQ,MAAM;IAiCf,OAAgB,MAAM,0BAAwB;CAC/C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"icon-button.js","sources":["../../../src/components/icon-button/icon-button.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport iconStyle from './icon-button.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../../decorator.js';\n\n/**\n * The available visual variants for `<obc-icon-button>`.\n * - `normal`: Standard appearance for most use cases.\n * - `raised`: Adds elevation/shadow for prominence.\n * - `flat`: Minimal, backgroundless style for subtle actions.\n */\nexport enum IconButtonVariant {\n  normal = 'normal',\n  raised = 'raised',\n  flat = 'flat',\n  integration = 'integration',\n}\n\n/**\n * `<obc-icon-button>` – An icon-only or icon-with-label button for quick actions.\n *\n * Provides a compact, visually prominent button that displays an icon (and optionally a label) for triggering actions. Commonly used for toolbars, navigation, or contextual actions where space is limited and a recognizable icon can represent the function.\n *\n * Appears as a circular or rounded button with configurable visual styles, supporting progress indication and various layout adaptations.\n *\n * ## Features\n * - **Variants:**\n *   - `normal` (default): Standard appearance for most use cases.\n *   - `raised`: Adds elevation/shadow for prominence.\n *   - `flat`: Minimal, backgroundless style for subtle actions.\n * - **Progress Indicator:**\n *   - Shows a circular progress spinner overlay when the `progress` property is set (0–100). Useful for indicating loading or ongoing actions.\n * - **Label Support:**\n *   - Optionally displays a text label below the icon when `hasLabel` is true and content is provided in the `label` slot.\n * - **Corner Alignment:**\n *   - `cornerLeft` and `cornerRight` adjust the button's border radius and alignment for seamless placement at the start or end of a container.\n * - **Active State:**\n *   - `activated` visually highlights the button as selected or toggled.\n *   - `activeColor` applies an accent color for emphasis.\n * - **Wide Mode:**\n *   - `wide` increases the button's width for easier touch targets or visual balance.\n * - **Disabled State:**\n *   - `disabled` prevents interaction and visually dims the button.\n *\n * ## Usage Guidelines\n * - Use `obc-icon-button` for actions represented by icons, such as toolbars, navigation, or quick-access commands.\n * - Add a label (with `hasLabel` and the `label` slot) when clarity is needed or when icons alone may not be universally understood.\n * - Use the progress indicator for actions that take time, such as uploads or background processes.\n * - Prefer the `normal` variant for most cases; use `raised` to draw attention, and `flat` for less prominent or inline actions.\n * - For grouped or edge-aligned layouts, use `cornerLeft` or `cornerRight` to visually merge with container edges.\n * - Avoid using icon buttons for destructive or critical actions unless paired with clear feedback.\n * - **TODO(designer):** Clarify recommended icon sizes and when to use label vs. icon-only.\n *\n * ## Slots\n * | Slot Name | Renders When...      | Purpose                                      |\n * |-----------|---------------------|----------------------------------------------|\n * | (default) | Always              | The icon to display (e.g., `<obi-search>`)   |\n * | label     | If `hasLabel` is set | Optional label text below the icon           |\n *\n * ## Best Practices\n * - Ensure icons are clear and universally recognizable.\n * - For accessibility, provide an `aria-label` or descriptive label for the button's action.\n * - When using the progress indicator, avoid showing it for very short actions to prevent visual flicker.\n *\n * ## Example:\n * ```\n * <obc-icon-button variant=\"normal\">\n *   <obi-search></obi-search>\n * </obc-icon-button>\n *\n * <obc-icon-button variant=\"normal\" hasLabel>\n *   <obi-arrow></obi-arrow>\n *   <span slot=\"label\">Next</span>\n * </obc-icon-button>\n * ```\n *\n * @slot - Icon slot (default): Place an icon such as <obi-search> here.\n * @slot label - Optional label shown below the icon when `hasLabel` is true.\n */\n@customElement('obc-icon-button')\nexport class ObcIconButton extends LitElement {\n  /**\n   * Visual style of the button.\n   * - `normal`: Standard appearance (default).\n   * - `raised`: Elevated with shadow.\n   * - `flat`: Minimal, backgroundless style.\n   */\n  @property({type: String}) variant: IconButtonVariant =\n    IconButtonVariant.normal;\n\n  /**\n   * Whether the button is in an activated (selected/toggled) state.\n   * Visually highlights the button to indicate selection.\n   */\n  @property({type: Boolean}) activated = false;\n\n  /**\n   * If true, aligns the button to the left edge and removes left border radius.\n   * Useful for grouping or edge-aligned layouts.\n   */\n  @property({type: Boolean}) cornerLeft = false;\n\n  /**\n   * If true, aligns the button to the right edge and removes right border radius.\n   * Useful for grouping or edge-aligned layouts.\n   */\n  @property({type: Boolean}) cornerRight = false;\n\n  /**\n   * Applies an accent color to the button for emphasis.\n   * Used to visually distinguish active or important actions.\n   */\n  @property({type: Boolean}) activeColor = false;\n\n  /**\n   * Increases the button's width for larger touch targets or visual balance.\n   */\n  @property({type: Boolean}) wide = false;\n\n  /**\n   * Disables the button, preventing user interaction and dimming its appearance.\n   */\n  @property({type: Boolean}) disabled = false;\n\n  /**\n   * Shows a circular progress indicator overlay when set (0–100).\n   * Use to indicate ongoing actions or loading states.\n   * If undefined, no progress indicator is shown.\n   */\n  @property({type: Number}) progress: undefined | number = undefined;\n\n  /**\n   * If true, displays a label below the icon using the `label` slot.\n   */\n  @property({type: Boolean}) hasLabel: boolean = false;\n\n  /** If false, and cornerLeft or cornerRight is true, the divider is not shown. */\n  @property({type: Boolean, attribute: false}) showDivider = true;\n\n  get progressSpinner() {\n    if (this.progress === undefined) {\n      return nothing;\n    }\n    if (this.progress === 100) {\n      return html`<div class=\"progress-spinner\">\n        <svg\n          width=\"40\"\n          height=\"40\"\n          viewBox=\"0 0 40 40\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <circle\n            cx=\"20\"\n            cy=\"20\"\n            r=\"18\"\n            stroke=\"#325B9A\"\n            stroke-width=\"4\"\n            fill=\"none\"\n          />\n        </svg>\n      </div>`;\n    }\n    const angleRad = (this.progress * 0.95 * 3.6 * Math.PI) / 180;\n    const x = 20 + 18 * Math.sin(angleRad);\n    const y = 20 - 18 * Math.cos(angleRad);\n    const largeArcFlag = angleRad > Math.PI ? 1 : 0;\n    return html`<div class=\"progress-spinner\">\n      <svg\n        width=\"40\"\n        height=\"40\"\n        viewBox=\"0 0 40 40\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <circle\n          cx=\"20\"\n          cy=\"20\"\n          r=\"18\"\n          stroke=\"var(--container-backdrop-color)\"\n          stroke-width=\"4\"\n          fill=\"none\"\n        />\n        <path\n          d=\"M18 2 A18 18 0 ${largeArcFlag} 1 ${x} ${y}\"\n          stroke=\"var(--instrument-enhanced-secondary-color)\"\n          stroke-width=\"4\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </div>`;\n  }\n\n  override render() {\n    return html`\n      <button\n        class=${classMap({\n          wrapper: true,\n          ['variant-' + this.variant]: true,\n          activated: this.activated,\n          'corner-left': this.cornerLeft,\n          'corner-right': this.cornerRight,\n          'active-color': this.activeColor,\n          'has-label': this.hasLabel,\n          wide: this.wide,\n          progress: this.progress !== undefined,\n          'hide-divider': !this.showDivider,\n        })}\n        ?disabled=${this.disabled}\n        part=\"wrapper\"\n      >\n        ${this.progress !== undefined ? this.progressSpinner : nothing}\n        <div class=\"visible-wrapper\" part=\"visible-wrapper\">\n          <div class=\"icon\" part=\"icon\">\n            <slot></slot>\n          </div>\n        </div>\n        ${this.hasLabel\n          ? html`<div class=\"label\" part=\"label\">\n              <slot name=\"label\"></slot>\n            </div>`\n          : nothing}\n      </button>\n    `;\n  }\n\n  static override styles = unsafeCSS(iconStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-icon-button': ObcIconButton;\n  }\n}\n"],"names":["IconButtonVariant"],"mappings":"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"}
+{"version":3,"file":"icon-button.js","sources":["../../../src/components/icon-button/icon-button.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport iconStyle from './icon-button.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../../decorator.js';\n\n/**\n * The available visual variants for `<obc-icon-button>`.\n * - `normal`: Standard appearance for most use cases.\n * - `raised`: Adds elevation/shadow for prominence.\n * - `flat`: Minimal, backgroundless style for subtle actions.\n */\nexport enum IconButtonVariant {\n  normal = 'normal',\n  raised = 'raised',\n  flat = 'flat',\n  integration = 'integration',\n}\n\n/**\n * `<obc-icon-button>` – An icon-only or icon-with-label button for quick actions.\n *\n * Provides a compact, visually prominent button that displays an icon (and optionally a label) for triggering actions. Commonly used for toolbars, navigation, or contextual actions where space is limited and a recognizable icon can represent the function.\n *\n * Appears as a circular or rounded button with configurable visual styles, supporting progress indication and various layout adaptations.\n *\n * ## Features\n * - **Variants:**\n *   - `normal` (default): Standard appearance for most use cases.\n *   - `raised`: Adds elevation/shadow for prominence.\n *   - `flat`: Minimal, backgroundless style for subtle actions.\n * - **Progress Indicator:**\n *   - Shows a circular progress spinner overlay when the `progress` property is set (0–100). Useful for indicating loading or ongoing actions.\n * - **Label Support:**\n *   - Optionally displays a text label below the icon when `hasLabel` is true and content is provided in the `label` slot.\n * - **Corner Alignment:**\n *   - `cornerLeft` and `cornerRight` adjust the button's border radius and alignment for seamless placement at the start or end of a container.\n * - **Active State:**\n *   - `activated` visually highlights the button as selected or toggled.\n *   - `activeColor` applies an accent color for emphasis.\n * - **Wide Mode:**\n *   - `wide` increases the button's width for easier touch targets or visual balance.\n * - **Disabled State:**\n *   - `disabled` prevents interaction and visually dims the button.\n *\n * ## Usage Guidelines\n * - Use `obc-icon-button` for actions represented by icons, such as toolbars, navigation, or quick-access commands.\n * - Add a label (with `hasLabel` and the `label` slot) when clarity is needed or when icons alone may not be universally understood.\n * - Use the progress indicator for actions that take time, such as uploads or background processes.\n * - Prefer the `normal` variant for most cases; use `raised` to draw attention, and `flat` for less prominent or inline actions.\n * - For grouped or edge-aligned layouts, use `cornerLeft` or `cornerRight` to visually merge with container edges.\n * - Avoid using icon buttons for destructive or critical actions unless paired with clear feedback.\n * - **TODO(designer):** Clarify recommended icon sizes and when to use label vs. icon-only.\n *\n * ## Slots\n * | Slot Name | Renders When...      | Purpose                                      |\n * |-----------|---------------------|----------------------------------------------|\n * | (default) | Always              | The icon to display (e.g., `<obi-search>`)   |\n * | label     | If `hasLabel` is set | Optional label text below the icon           |\n *\n * ## Events\n * - Emits a standard `click` event (`onClick` handler in framework wrappers) when activated.\n *\n * ## Best Practices\n * - Ensure icons are clear and universally recognizable.\n * - For accessibility, provide an `aria-label` or descriptive label for the button's action.\n * - When using the progress indicator, avoid showing it for very short actions to prevent visual flicker.\n *\n * ## Example:\n * ```\n * <obc-icon-button variant=\"normal\">\n *   <obi-search></obi-search>\n * </obc-icon-button>\n *\n * <obc-icon-button variant=\"normal\" hasLabel>\n *   <obi-arrow></obi-arrow>\n *   <span slot=\"label\">Next</span>\n * </obc-icon-button>\n * ```\n *\n * @slot - Icon slot (default): Place an icon such as <obi-search> here.\n * @slot label - Optional label shown below the icon when `hasLabel` is true.\n * @fires click - Fired when the button is clicked (if not disabled).\n */\n@customElement('obc-icon-button')\nexport class ObcIconButton extends LitElement {\n  /**\n   * Visual style of the button.\n   * - `normal`: Standard appearance (default).\n   * - `raised`: Elevated with shadow.\n   * - `flat`: Minimal, backgroundless style.\n   */\n  @property({type: String}) variant: IconButtonVariant =\n    IconButtonVariant.normal;\n\n  /**\n   * Whether the button is in an activated (selected/toggled) state.\n   * Visually highlights the button to indicate selection.\n   */\n  @property({type: Boolean}) activated = false;\n\n  /**\n   * If true, aligns the button to the left edge and removes left border radius.\n   * Useful for grouping or edge-aligned layouts.\n   */\n  @property({type: Boolean}) cornerLeft = false;\n\n  /**\n   * If true, aligns the button to the right edge and removes right border radius.\n   * Useful for grouping or edge-aligned layouts.\n   */\n  @property({type: Boolean}) cornerRight = false;\n\n  /**\n   * Applies an accent color to the button for emphasis.\n   * Used to visually distinguish active or important actions.\n   */\n  @property({type: Boolean}) activeColor = false;\n\n  /**\n   * Increases the button's width for larger touch targets or visual balance.\n   */\n  @property({type: Boolean}) wide = false;\n\n  /**\n   * Disables the button, preventing user interaction and dimming its appearance.\n   */\n  @property({type: Boolean}) disabled = false;\n\n  /**\n   * Shows a circular progress indicator overlay when set (0–100).\n   * Use to indicate ongoing actions or loading states.\n   * If undefined, no progress indicator is shown.\n   */\n  @property({type: Number}) progress: undefined | number = undefined;\n\n  /**\n   * If true, displays a label below the icon using the `label` slot.\n   */\n  @property({type: Boolean}) hasLabel: boolean = false;\n\n  /** If false, and cornerLeft or cornerRight is true, the divider is not shown. */\n  @property({type: Boolean, attribute: false}) showDivider = true;\n\n  get progressSpinner() {\n    if (this.progress === undefined) {\n      return nothing;\n    }\n    if (this.progress === 100) {\n      return html`<div class=\"progress-spinner\">\n        <svg\n          width=\"40\"\n          height=\"40\"\n          viewBox=\"0 0 40 40\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <circle\n            cx=\"20\"\n            cy=\"20\"\n            r=\"18\"\n            stroke=\"#325B9A\"\n            stroke-width=\"4\"\n            fill=\"none\"\n          />\n        </svg>\n      </div>`;\n    }\n    const angleRad = (this.progress * 0.95 * 3.6 * Math.PI) / 180;\n    const x = 20 + 18 * Math.sin(angleRad);\n    const y = 20 - 18 * Math.cos(angleRad);\n    const largeArcFlag = angleRad > Math.PI ? 1 : 0;\n    return html`<div class=\"progress-spinner\">\n      <svg\n        width=\"40\"\n        height=\"40\"\n        viewBox=\"0 0 40 40\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <circle\n          cx=\"20\"\n          cy=\"20\"\n          r=\"18\"\n          stroke=\"var(--container-backdrop-color)\"\n          stroke-width=\"4\"\n          fill=\"none\"\n        />\n        <path\n          d=\"M18 2 A18 18 0 ${largeArcFlag} 1 ${x} ${y}\"\n          stroke=\"var(--instrument-enhanced-secondary-color)\"\n          stroke-width=\"4\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </div>`;\n  }\n\n  override render() {\n    return html`\n      <button\n        class=${classMap({\n          wrapper: true,\n          ['variant-' + this.variant]: true,\n          activated: this.activated,\n          'corner-left': this.cornerLeft,\n          'corner-right': this.cornerRight,\n          'active-color': this.activeColor,\n          'has-label': this.hasLabel,\n          wide: this.wide,\n          progress: this.progress !== undefined,\n          'hide-divider': !this.showDivider,\n        })}\n        ?disabled=${this.disabled}\n        part=\"wrapper\"\n      >\n        ${this.progress !== undefined ? this.progressSpinner : nothing}\n        <div class=\"visible-wrapper\" part=\"visible-wrapper\">\n          <div class=\"icon\" part=\"icon\">\n            <slot></slot>\n          </div>\n        </div>\n        ${this.hasLabel\n          ? html`<div class=\"label\" part=\"label\">\n              <slot name=\"label\"></slot>\n            </div>`\n          : nothing}\n      </button>\n    `;\n  }\n\n  static override styles = unsafeCSS(iconStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-icon-button': ObcIconButton;\n  }\n}\n"],"names":["IconButtonVariant"],"mappings":";;;;;;;;;;;;;;;AAYO,IAAK,sCAAAA,uBAAL;AACLA,qBAAA,QAAA,IAAS;AACTA,qBAAA,QAAA,IAAS;AACTA,qBAAA,MAAA,IAAO;AACPA,qBAAA,aAAA,IAAc;AAJJ,SAAAA;AAAA,GAAA,qBAAA,CAAA,CAAA;AAyEL,IAAM,gBAAN,cAA4B,WAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA;AAOqB,SAAA,UACxB;AAMyB,SAAA,YAAY;AAMZ,SAAA,aAAa;AAMb,SAAA,cAAc;AAMd,SAAA,cAAc;AAKd,SAAA,OAAO;AAKP,SAAA,WAAW;AAOZ,SAAA,WAA+B;AAK9B,SAAA,WAAoB;AAGF,SAAA,cAAc;AAAA,EAAA;AAAA,EAE3D,IAAI,kBAAkB;AACpB,QAAI,KAAK,aAAa,QAAW;AAC/B,aAAO;AAAA,IACT;AACA,QAAI,KAAK,aAAa,KAAK;AACzB,aAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAkBT;AACA,UAAM,WAAY,KAAK,WAAW,OAAO,MAAM,KAAK,KAAM;AAC1D,UAAM,IAAI,KAAK,KAAK,KAAK,IAAI,QAAQ;AACrC,UAAM,IAAI,KAAK,KAAK,KAAK,IAAI,QAAQ;AACrC,UAAM,eAAe,WAAW,KAAK,KAAK,IAAI;AAC9C,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAiBmB,YAAY,MAAM,CAAC,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOpD;AAAA,EAES,SAAS;AAChB,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,SAAS;AAAA,MACT,CAAC,aAAa,KAAK,OAAO,GAAG;AAAA,MAC7B,WAAW,KAAK;AAAA,MAChB,eAAe,KAAK;AAAA,MACpB,gBAAgB,KAAK;AAAA,MACrB,gBAAgB,KAAK;AAAA,MACrB,aAAa,KAAK;AAAA,MAClB,MAAM,KAAK;AAAA,MACX,UAAU,KAAK,aAAa;AAAA,MAC5B,gBAAgB,CAAC,KAAK;AAAA,IAAA,CACvB,CAAC;AAAA,oBACU,KAAK,QAAQ;AAAA;AAAA;AAAA,UAGvB,KAAK,aAAa,SAAY,KAAK,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAM5D,KAAK,WACH;AAAA;AAAA,sBAGA,OAAO;AAAA;AAAA;AAAA,EAGjB;AAGF;AAnJa,cAkJK,SAAS,UAAU,SAAS;AA3IlB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAPb,cAOe,WAAA,WAAA,CAAA;AAOC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAdd,cAcgB,WAAA,aAAA,CAAA;AAMA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GApBd,cAoBgB,WAAA,cAAA,CAAA;AAMA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GA1Bd,cA0BgB,WAAA,eAAA,CAAA;AAMA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAhCd,cAgCgB,WAAA,eAAA,CAAA;AAKA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GArCd,cAqCgB,WAAA,QAAA,CAAA;AAKA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GA1Cd,cA0CgB,WAAA,YAAA,CAAA;AAOD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAjDb,cAiDe,WAAA,YAAA,CAAA;AAKC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAtDd,cAsDgB,WAAA,YAAA,CAAA;AAGkB,gBAAA;AAAA,EAA5C,SAAS,EAAC,MAAM,SAAS,WAAW,OAAM;AAAA,GAzDhC,cAyDkC,WAAA,eAAA,CAAA;AAzDlC,gBAAN,gBAAA;AAAA,EADN,cAAc,iBAAiB;AAAA,GACnB,aAAA;"}

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

@@ -165,18 +165,10 @@ const compentStyle = css`
     gap: var(--app-components-message-menu-item-label-spacing);
 
     color: var(--element-neutral-color);
+    white-space: nowrap;
+    text-wrap: nowrap;
   }
 
-:is(.wrapper .date-container) .day,:is(.wrapper .date-container) .time {
-      font-family: var(--font-family-main);
-      font-size: var(--global-typography-ui-label-font-size);
-      line-height: var(--global-typography-ui-label-line-height);
-      font-feature-settings:
-    "liga" off,
-    "clig" off,
-    "ss04" on;
-    }
-
 .wrapper .chevron {
     grid-area: chevron;
     width: var(--app-components-message-menu-item-icon-size-regular);

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

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