@oicl/openbridge-webcomponents 2.0.0-next.86 → 2.0.0-next.88

package/custom-elements.json

@@ -76494,7 +76494,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<obc-gauge-radial>` — Configurable radial gauge for generic numeric values.\n\n`ObcGaugeRadial` is a thin wrapper around `<obc-instrument-radial>` that adds\ndomain-independent value-to-angle mapping with automatic range handling for\nboth positive-only and bipolar (negative-to-positive) scales. It inherits a\nfull setpoint property bundle from SetpointMixin, including\nauto at-setpoint detection, dual-marker adjustment preview, and deadband\ntuning — no manual wiring required.\n\n## Features\n\n- **Three display types**: `filled` (solid arc), `bar` (thinner arc), and\n  `needle` (pointer indicator) via the `type` property.\n- **Sector sweep**: `sector` selects the arc span (`270`, `180`, `90-left`, or `90-right`).\n  The configured `minValue..maxValue` always spans the full sector. For the\n  centered sectors (`270`, `180`) a symmetric range places `0` at 12 o'clock;\n  for `90-left`/`90-right` the range midpoint sits at the middle of the quadrant.\n- **Setpoint via mixin**: `setpoint`, `newSetpoint`, `touching`,\n  `autoAtSetpointDeadband`, `setpointOverride`, and all other setpoint\n  properties are provided by `SetpointMixin` and forwarded to the inner\n  `<obc-instrument-radial>`.\n- **Advice zones**: Pass an array of GaugeRadialAdvice objects to\n  render caution/alert arcs on the gauge. Not shown on the `90-left` /\n  `90-right` sectors.\n\n## Usage Guidelines\n\n- Set `minValue` / `maxValue` to define the scale range.\n- Use `priority` to switch between regular and enhanced color palettes.\n- Provide `primaryTickmarkInterval` and `secondaryTickmarkInterval` to\n  control tickmark density.\n- Enable `showLabels` to show numeric labels at primary tickmarks.\n- Enable `hasReadout` with optional `label` and `unit`. Layout depends on `sector`\n  and `type`: **270** filled/bar — value at center + a label-only `meta` row in\n  the bottom gap (two separate readouts); **180** filled/bar — a single centered\n  stack (value + label/unit) at the bottom; **270** needle — bottom stack;\n  **180** needle — no readout; **90-left** / **90-right** filled/bar — corner\n  readout in a square host; **90** needle — no readout.\n\n## Best Practices\n\n- Prefer `SetpointMixin` properties (`setpoint`, `touching`, etc.) over\n  any legacy aliases — the mixin is the single source of truth.\n- Keep domain-specific logic (units, formatting) in the parent view; this\n  component is intentionally unit-agnostic.\n\n## Example\n\n```html\n<obc-gauge-radial\n  value=\"42\"\n  minValue=\"0\"\n  maxValue=\"100\"\n  type=\"filled\"\n  priority=\"enhanced\"\n  showLabels\n  primaryTickmarkInterval=\"25\"\n  secondaryTickmarkInterval=\"5\"\n  setpoint=\"60\"\n></obc-gauge-radial>\n```",
+          "description": "`<obc-gauge-radial>` — Configurable radial gauge for generic numeric values.\n\n`ObcGaugeRadial` is a thin wrapper around `<obc-instrument-radial>` that adds\ndomain-independent value-to-angle mapping with automatic range handling for\nboth positive-only and bipolar (negative-to-positive) scales. It inherits a\nfull setpoint property bundle from SetpointMixin, including\nauto at-setpoint detection, dual-marker adjustment preview, and deadband\ntuning — no manual wiring required.\n\n## Features\n\n- **Three display types**: `filled` (solid arc), `bar` (thinner arc), and\n  `needle` (pointer indicator) via the `type` property.\n- **Sector sweep**: `sector` selects the arc span (`270`, `180`, `90-left`, or `90-right`).\n  The configured `minValue..maxValue` always spans the full sector. For the\n  centered sectors (`270`, `180`) a symmetric range places `0` at 12 o'clock;\n  for `90-left`/`90-right` the range midpoint sits at the middle of the quadrant.\n- **Setpoint via mixin**: `setpoint`, `newSetpoint`, `touching`,\n  `autoAtSetpointDeadband`, `setpointOverride`, and all other setpoint\n  properties are provided by `SetpointMixin` and forwarded to the inner\n  `<obc-instrument-radial>`.\n- **Advice zones**: Pass an array of GaugeRadialAdvice objects to\n  render caution/alert arcs on the gauge. Not shown on the `90-left` /\n  `90-right` sectors.\n- **Alignment**: The host always fills its container and the dial shrinks to\n  fit the smaller of the available width/height, so a short, wide (or tall,\n  narrow) container leaves slack on one axis. `horizontalAlignment`\n  (`left` | `center` | `right`) and `verticalAlignment`\n  (`top` | `center` | `bottom`) position the dial within that slack; both\n  default to `center`.\n\n## Usage Guidelines\n\n- Set `minValue` / `maxValue` to define the scale range.\n- Use `priority` to switch between regular and enhanced color palettes.\n- Provide `primaryTickmarkInterval` and `secondaryTickmarkInterval` to\n  control tickmark density.\n- Enable `showLabels` to show numeric labels at primary tickmarks.\n- Enable `hasReadout` with optional `label` and `unit`. Layout depends on `sector`\n  and `type`: **270** filled/bar — value at center + a label-only `meta` row in\n  the bottom gap (two separate readouts); **180** filled/bar — a single centered\n  stack (value + label/unit) at the bottom; **270** needle — bottom stack;\n  **180** needle — no readout; **90-left** / **90-right** filled/bar — corner\n  readout in a square host; **90** needle — no readout.\n\n## Best Practices\n\n- Prefer `SetpointMixin` properties (`setpoint`, `touching`, etc.) over\n  any legacy aliases — the mixin is the single source of truth.\n- Keep domain-specific logic (units, formatting) in the parent view; this\n  component is intentionally unit-agnostic.\n\n## Example\n\n```html\n<obc-gauge-radial\n  value=\"42\"\n  minValue=\"0\"\n  maxValue=\"100\"\n  type=\"filled\"\n  priority=\"enhanced\"\n  showLabels\n  primaryTickmarkInterval=\"25\"\n  secondaryTickmarkInterval=\"5\"\n  setpoint=\"60\"\n></obc-gauge-radial>\n```",
           "name": "ObcGaugeRadial",
           "members": [
             {
@@ -76620,6 +76620,24 @@
               "attribute": "sector",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "horizontalAlignment",
+              "type": {
+                "text": "GaugeRadialHorizontalAlignment"
+              },
+              "description": "Horizontal placement of the dial when the host is wider than the dial\n(e.g. a short, wide container shrinks the dial to fit the height, leaving\nhorizontal slack). Default `center`.",
+              "attribute": "horizontalAlignment"
+            },
+            {
+              "kind": "field",
+              "name": "verticalAlignment",
+              "type": {
+                "text": "GaugeRadialVerticalAlignment"
+              },
+              "description": "Vertical placement of the dial when the host is taller than the dial\n(e.g. a tall, narrow container shrinks the dial to fit the width, leaving\nvertical slack). Default `center`.",
+              "attribute": "verticalAlignment"
+            },
             {
               "kind": "field",
               "name": "hasReadout",
@@ -76999,6 +77017,22 @@
               },
               "fieldName": "sector"
             },
+            {
+              "name": "horizontalAlignment",
+              "type": {
+                "text": "GaugeRadialHorizontalAlignment"
+              },
+              "description": "Horizontal placement of the dial when the host is wider than the dial\n(e.g. a short, wide container shrinks the dial to fit the height, leaving\nhorizontal slack). Default `center`.",
+              "fieldName": "horizontalAlignment"
+            },
+            {
+              "name": "verticalAlignment",
+              "type": {
+                "text": "GaugeRadialVerticalAlignment"
+              },
+              "description": "Vertical placement of the dial when the host is taller than the dial\n(e.g. a tall, narrow container shrinks the dial to fit the width, leaving\nvertical slack). Default `center`.",
+              "fieldName": "verticalAlignment"
+            },
             {
               "name": "hasReadout",
               "type": {

package/dist/automation/automation-tank/automation-tank.d.ts

@@ -38,13 +38,13 @@ export declare enum TankOrientation {
 /**
  * Host positioning model.
  *
- * - `point` (default): the host has fixed default dimensions (per
+ * - `point`: the host has fixed default dimensions (per
  *   orientation and compact / static variant) and a P&ID anchor — the
  *   visual content is shifted with `translateX(-50%)` and (in non-compact)
  *   `top: -20px` so the tank's top-center aligns with the host's top-left
  *   placement coordinate. Use this when dropping the tank onto a P&ID
  *   canvas at a pipe-grid coordinate.
- * - `button`: the host fills its parent container (100% × 100%) with no
+ * - `button` (default): the host fills its parent container (100% × 100%) with no
  *   anchor offset. Use this when embedding the tank inside a sized layout
  *   slot — the parent controls the footprint and the tank renders
  *   responsively inside it, just like a regular button. Compact / static

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  ObcAlertFrameThickness,\n  ObcAlertFrameType,\n} from '../../components/alert-frame/alert-frame.js';\nimport {AlertType} from '../../types.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 * @slot badges - Custom badges to be displayed in the badge area.\n * @slot tag - Text or element for the tank's tag/label.\n * @slot readout - Replaces the entire readout content block.\n * @slot max-value - Content for the capacity value.\n * @slot unit - Content for the unit of measurement.\n * @slot current-value - Content for the current level value.\n * @slot rich - Content for additional detail rows.\n * @slot alert-icon - Custom icon for the alert frame.\n * @slot alert-label - Label for the alert frame.\n * @slot alert-timer - Timer for the alert frame.\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   * `button` (host fills parent container, 100% × 100%, no anchor offset).\n   * Set to `point` for the legacy P&ID canvas mode (fixed default dimensions\n   * + top-center anchor offset).\n   */\n  @property({type: String, reflect: true}) positioning: TankPositioning =\n    TankPositioning.button;\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: AlertType = AlertType.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      case AutomationButtonBadgeAlert.LevelCritical:\n        return ObcAutomationBadgeType.LevelCritical;\n      case AutomationButtonBadgeAlert.LevelHigh:\n        return ObcAutomationBadgeType.LevelHigh;\n      case AutomationButtonBadgeAlert.LevelMedium:\n        return ObcAutomationBadgeType.LevelMedium;\n      case AutomationButtonBadgeAlert.LevelLow:\n        return ObcAutomationBadgeType.LevelLow;\n      case AutomationButtonBadgeAlert.LevelDiagnostic:\n        return ObcAutomationBadgeType.LevelDiagnostic;\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":"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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  ObcAlertFrameThickness,\n  ObcAlertFrameType,\n} from '../../components/alert-frame/alert-frame.js';\nimport {AlertType} from '../../types.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`: 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` (default): 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 * @slot badges - Custom badges to be displayed in the badge area.\n * @slot tag - Text or element for the tank's tag/label.\n * @slot readout - Replaces the entire readout content block.\n * @slot max-value - Content for the capacity value.\n * @slot unit - Content for the unit of measurement.\n * @slot current-value - Content for the current level value.\n * @slot rich - Content for additional detail rows.\n * @slot alert-icon - Custom icon for the alert frame.\n * @slot alert-label - Label for the alert frame.\n * @slot alert-timer - Timer for the alert frame.\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   * `button` (host fills parent container, 100% × 100%, no anchor offset).\n   * Set to `point` for the legacy P&ID canvas mode (fixed default dimensions\n   * + top-center anchor offset).\n   */\n  @property({type: String, reflect: true}) positioning: TankPositioning =\n    TankPositioning.button;\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: AlertType = AlertType.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      case AutomationButtonBadgeAlert.LevelCritical:\n        return ObcAutomationBadgeType.LevelCritical;\n      case AutomationButtonBadgeAlert.LevelHigh:\n        return ObcAutomationBadgeType.LevelHigh;\n      case AutomationButtonBadgeAlert.LevelMedium:\n        return ObcAutomationBadgeType.LevelMedium;\n      case AutomationButtonBadgeAlert.LevelLow:\n        return ObcAutomationBadgeType.LevelLow;\n      case AutomationButtonBadgeAlert.LevelDiagnostic:\n        return ObcAutomationBadgeType.LevelDiagnostic;\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":"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"}

package/dist/navigation-instruments/gauge-radial/gauge-radial.css.js

@@ -9,48 +9,74 @@ const componentStyle = css`* {
   height: 100%;
 }
 
-/* Host takes each sector's crop aspect (see \`sectorClips\`): 270/90 square, 180
-   wide — so the dial is the same size at any width.
-
-   \`width\`/\`height: auto\` + \`max-width\`/\`max-height: 100%\` makes the host the
-   largest box of the sector's aspect ratio that fits inside *both* the
-   available width and height. Using \`height: auto\` alone only honours the
-   width, so in a short, wide (e.g. flex) container the square would grow as
-   tall as it is wide and overflow — see issue #992. */
-
-:host([sector="270"]),
-:host([sector="90-left"]),
-:host([sector="90-right"]) {
+.gauge-radial-root {
+  /* Readout vertical placement per layout (% of the cropped box), tuned to the
+     watch geometry — re-check if the ring radii or the 448 box change. Which
+     layout uses which is in renderReadouts(). */
+  --readout-meta-top: 72%;
+  --readout-meta-top-needle: 63%;
+  --readout-meta-top-180: 60%;
+
+  position: relative;
+
+  /* The dial is the largest box of its sector's aspect ratio that fits inside
+     *both* the available width and height of the (full-size) host. \`width: auto\`
+     stretches the block to the host width, then \`aspect-ratio\` + \`max-height\`
+     transfer the constraint back, shrinking it to fit a short host too — see
+     issue #992. The host always fills its container, so the gauge can be
+     positioned within the leftover space via the alignment classes below. */
   width: auto;
   height: auto;
   max-width: 100%;
   max-height: 100%;
   aspect-ratio: 1;
+
+  /* Defaults (centered both ways); overridden by the halign-* / valign-*
+     classes. Horizontal alignment uses auto margins (which reference the host
+     width); vertical alignment uses a relative \`top\` offset (which references
+     the definite host height) plus a self-sized \`translateY\`. */
+  margin-left: auto;
+  margin-right: auto;
+  top: 50%;
+  transform: translateY(-50%);
+
+  /* 448 / 251 = the 180° crop's aspect (448 wide × 448·(1 − 44%) tall); keep in
+     sync with \`sectorClips\` bottom=44 in gauge-radial.ts. */
 }
 
-/* 448 / 251 = the 180° crop's aspect (448 wide × 448·(1 − 44%) tall); keep in
-   sync with \`sectorClips\` bottom=44 in gauge-radial.ts. */
+.gauge-radial-root.sector-180 {
+    aspect-ratio: 448 / 251;
+  }
 
-:host([sector="180"]) {
-  width: auto;
-  height: auto;
-  max-width: 100%;
-  max-height: 100%;
-  aspect-ratio: 448 / 251;
-}
+.gauge-radial-root.halign-left {
+    margin-left: 0;
+    margin-right: auto;
+  }
 
-.gauge-radial-root {
-  /* Readout vertical placement per layout (% of the cropped host), tuned to the
-     watch geometry — re-check if the ring radii or the 448 box change. Which
-     layout uses which is in renderReadouts(). */
-  --readout-meta-top: 72%;
-  --readout-meta-top-needle: 63%;
-  --readout-meta-top-180: 60%;
+.gauge-radial-root.halign-center {
+    margin-left: auto;
+    margin-right: auto;
+  }
 
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
+.gauge-radial-root.halign-right {
+    margin-left: auto;
+    margin-right: 0;
+  }
+
+.gauge-radial-root.valign-top {
+    top: 0;
+    transform: translateY(0);
+  }
+
+.gauge-radial-root.valign-center {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+.gauge-radial-root.valign-bottom {
+    top: 100%;
+    transform: translateY(-100%);
+  }
 
 .gauge-radial-root .gauge-readout-value {
     position: absolute;

package/dist/navigation-instruments/gauge-radial/gauge-radial.css.js.map

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

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

@@ -14,6 +14,16 @@ export declare enum GaugeRadialSector {
     deg90Left = "90-left",
     deg90Right = "90-right"
 }
+export declare enum GaugeRadialHorizontalAlignment {
+    left = "left",
+    center = "center",
+    right = "right"
+}
+export declare enum GaugeRadialVerticalAlignment {
+    top = "top",
+    center = "center",
+    bottom = "bottom"
+}
 export interface GaugeRadialAdvice {
     minValue: number;
     maxValue: number;
@@ -46,6 +56,12 @@ declare const ObcGaugeRadial_base: (new (...args: any[]) => import('../../svghel
  * - **Advice zones**: Pass an array of {@link GaugeRadialAdvice} objects to
  *   render caution/alert arcs on the gauge. Not shown on the `90-left` /
  *   `90-right` sectors.
+ * - **Alignment**: The host always fills its container and the dial shrinks to
+ *   fit the smaller of the available width/height, so a short, wide (or tall,
+ *   narrow) container leaves slack on one axis. `horizontalAlignment`
+ *   (`left` | `center` | `right`) and `verticalAlignment`
+ *   (`top` | `center` | `bottom`) position the dial within that slack; both
+ *   default to `center`.
  *
  * ## Usage Guidelines
  *
@@ -107,6 +123,18 @@ export declare class ObcGaugeRadial extends ObcGaugeRadial_base {
     /** Caution/alert arcs. Ignored on `sector: 90-left` / `90-right`. */
     advices: GaugeRadialAdvice[];
     sector: GaugeRadialSector;
+    /**
+     * Horizontal placement of the dial when the host is wider than the dial
+     * (e.g. a short, wide container shrinks the dial to fit the height, leaving
+     * horizontal slack). Default `center`.
+     */
+    horizontalAlignment: GaugeRadialHorizontalAlignment;
+    /**
+     * Vertical placement of the dial when the host is taller than the dial
+     * (e.g. a tall, narrow container shrinks the dial to fit the width, leaving
+     * vertical slack). Default `center`.
+     */
+    verticalAlignment: GaugeRadialVerticalAlignment;
     /**
      * When `true`, shows the centre `<obc-readout>`(s) with the current value
      * (and optional `label`/`unit`). Layout depends on `sector` and `type`.

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

@@ -1 +1 @@
-{"version":3,"file":"gauge-radial.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/gauge-radial/gauge-radial.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA4B,KAAK,cAAc,EAAC,MAAM,KAAK,CAAC;AAK9E,OAAO,EAAC,UAAU,EAAC,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAC,eAAe,EAAE,QAAQ,EAAC,MAAM,aAAa,CAAC;AAEtD,OAAO,8DAA8D,CAAC;AACtE,OAAO,EAAC,aAAa,EAAC,MAAM,sBAAsB,CAAC;AAOnD,oBAAY,kBAAkB;IAC5B,MAAM,WAAW;IACjB,GAAG,QAAQ;IACX,MAAM,WAAW;CAClB;AAED,oBAAY,iBAAiB;IAC3B,MAAM,QAAQ;IACd,MAAM,QAAQ;IACd,SAAS,YAAY;IACrB,UAAU,aAAa;CACxB;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;CACjB;;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiEG;AACH,qBACa,cAAe,SAAQ,mBAAyB;IACjC,KAAK,SAAK;IACV,QAAQ,SAAO;IACf,QAAQ,SAAK;IACZ,UAAU,EAAE,OAAO,CAAS;IAC7B,uBAAuB,SAAM;IAC7B,yBAAyB,SAAM;IACzD;;;OAGG;IACuB,wBAAwB,EAAE,MAAM,GAAG,SAAS,CAC1D;IACc,KAAK,EAAE,eAAe,CAA0B;IAChD,QAAQ,EAAE,QAAQ,CAAoB;IACtC,IAAI,EAAE,kBAAkB,CACtB;IACD,eAAe,EAAE,OAAO,CAAS;IAClC,aAAa,EAAE,aAAa,CAC9B;IACxB,qEAAqE;IAC1B,OAAO,EAAE,iBAAiB,EAAE,CAAM;IACpC,MAAM,EAAE,iBAAiB,CACvC;IAC3B;;;;OAIG;IACwB,UAAU,UAAS;IACpB,KAAK,SAAM;IACX,IAAI,SAAM;IACV,cAAc,SAAK;IAE7C,OAAO,KAAK,YAAY,GAYvB;IAED;;;;;OAKG;IACH,OAAO,KAAK,WAAW,GAiBtB;IAED,OAAO,KAAK,UAAU,GAKrB;IAID,QAAQ,GAAI,GAAG,MAAM,KAAG,MAAM,CAQ5B;IAEF,oEAAoE;IACpE,OAAO,CAAC,aAAa;IA4BrB,OAAO,CAAC,cAAc;IAiDb,MAAM;IAgDf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}
+{"version":3,"file":"gauge-radial.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/gauge-radial/gauge-radial.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA4B,KAAK,cAAc,EAAC,MAAM,KAAK,CAAC;AAK9E,OAAO,EAAC,UAAU,EAAC,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAC,eAAe,EAAE,QAAQ,EAAC,MAAM,aAAa,CAAC;AAEtD,OAAO,8DAA8D,CAAC;AACtE,OAAO,EAAC,aAAa,EAAC,MAAM,sBAAsB,CAAC;AAOnD,oBAAY,kBAAkB;IAC5B,MAAM,WAAW;IACjB,GAAG,QAAQ;IACX,MAAM,WAAW;CAClB;AAED,oBAAY,iBAAiB;IAC3B,MAAM,QAAQ;IACd,MAAM,QAAQ;IACd,SAAS,YAAY;IACrB,UAAU,aAAa;CACxB;AAED,oBAAY,8BAA8B;IACxC,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,oBAAY,4BAA4B;IACtC,GAAG,QAAQ;IACX,MAAM,WAAW;IACjB,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;CACjB;;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuEG;AACH,qBACa,cAAe,SAAQ,mBAAyB;IACjC,KAAK,SAAK;IACV,QAAQ,SAAO;IACf,QAAQ,SAAK;IACZ,UAAU,EAAE,OAAO,CAAS;IAC7B,uBAAuB,SAAM;IAC7B,yBAAyB,SAAM;IACzD;;;OAGG;IACuB,wBAAwB,EAAE,MAAM,GAAG,SAAS,CAC1D;IACc,KAAK,EAAE,eAAe,CAA0B;IAChD,QAAQ,EAAE,QAAQ,CAAoB;IACtC,IAAI,EAAE,kBAAkB,CACtB;IACD,eAAe,EAAE,OAAO,CAAS;IAClC,aAAa,EAAE,aAAa,CAC9B;IACxB,qEAAqE;IAC1B,OAAO,EAAE,iBAAiB,EAAE,CAAM;IACpC,MAAM,EAAE,iBAAiB,CACvC;IAC3B;;;;OAIG;IAEH,mBAAmB,EAAE,8BAA8B,CACX;IACxC;;;;OAIG;IACuB,iBAAiB,EAAE,4BAA4B,CACnC;IACtC;;;;OAIG;IACwB,UAAU,UAAS;IACpB,KAAK,SAAM;IACX,IAAI,SAAM;IACV,cAAc,SAAK;IAE7C,OAAO,KAAK,YAAY,GAYvB;IAED;;;;;OAKG;IACH,OAAO,KAAK,WAAW,GAiBtB;IAED,OAAO,KAAK,UAAU,GAKrB;IAID,QAAQ,GAAI,GAAG,MAAM,KAAG,MAAM,CAQ5B;IAEF,oEAAoE;IACpE,OAAO,CAAC,aAAa;IA4BrB,OAAO,CAAC,cAAc;IAiDb,MAAM;IAkDf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

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

@@ -32,6 +32,18 @@ var GaugeRadialSector = /* @__PURE__ */ ((GaugeRadialSector2) => {
   GaugeRadialSector2["deg90Right"] = "90-right";
   return GaugeRadialSector2;
 })(GaugeRadialSector || {});
+var GaugeRadialHorizontalAlignment = /* @__PURE__ */ ((GaugeRadialHorizontalAlignment2) => {
+  GaugeRadialHorizontalAlignment2["left"] = "left";
+  GaugeRadialHorizontalAlignment2["center"] = "center";
+  GaugeRadialHorizontalAlignment2["right"] = "right";
+  return GaugeRadialHorizontalAlignment2;
+})(GaugeRadialHorizontalAlignment || {});
+var GaugeRadialVerticalAlignment = /* @__PURE__ */ ((GaugeRadialVerticalAlignment2) => {
+  GaugeRadialVerticalAlignment2["top"] = "top";
+  GaugeRadialVerticalAlignment2["center"] = "center";
+  GaugeRadialVerticalAlignment2["bottom"] = "bottom";
+  return GaugeRadialVerticalAlignment2;
+})(GaugeRadialVerticalAlignment || {});
 let ObcGaugeRadial = class extends SetpointMixin(LitElement) {
   constructor() {
     super(...arguments);
@@ -49,6 +61,8 @@ let ObcGaugeRadial = class extends SetpointMixin(LitElement) {
     this.tickmarkStyle = TickmarkStyle.regular;
     this.advices = [];
     this.sector = "270";
+    this.horizontalAlignment = "center";
+    this.verticalAlignment = "center";
     this.hasReadout = false;
     this.label = "";
     this.unit = "";
@@ -164,8 +178,9 @@ let ObcGaugeRadial = class extends SetpointMixin(LitElement) {
       "type-needle": this.type === "needle",
       "sector-180": this.sector === "180",
       "sector-90-left": this.sector === "90-left",
-      "sector-90-right": this.sector === "90-right"
-      /* deg90Right */
+      "sector-90-right": this.sector === "90-right",
+      [`halign-${this.horizontalAlignment}`]: true,
+      [`valign-${this.verticalAlignment}`]: true
     })}
       >
         <obc-instrument-radial
@@ -247,6 +262,12 @@ __decorateClass([
 __decorateClass([
   property({ type: String, reflect: true })
 ], ObcGaugeRadial.prototype, "sector", 2);
+__decorateClass([
+  property({ type: String })
+], ObcGaugeRadial.prototype, "horizontalAlignment", 2);
+__decorateClass([
+  property({ type: String })
+], ObcGaugeRadial.prototype, "verticalAlignment", 2);
 __decorateClass([
   property({ type: Boolean })
 ], ObcGaugeRadial.prototype, "hasReadout", 2);
@@ -263,7 +284,9 @@ ObcGaugeRadial = __decorateClass([
   customElement("obc-gauge-radial")
 ], ObcGaugeRadial);
 export {
+  GaugeRadialHorizontalAlignment,
   GaugeRadialSector,
+  GaugeRadialVerticalAlignment,
   ObcGaugeRadial,
   ObcGaugeRadialType
 };