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

package/bundle/openbridge-webcomponents.bundle.js

@@ -16,6 +16,14 @@ var AlertType = /* @__PURE__ */ ((AlertType2) => {
   AlertType2["LevelDiagnostic"] = "level-diagnostic";
   return AlertType2;
 })(AlertType || {});
+var FlashingSpeed = /* @__PURE__ */ ((FlashingSpeed2) => {
+  FlashingSpeed2["Default"] = "default";
+  FlashingSpeed2["Fast"] = "fast";
+  FlashingSpeed2["Slow"] = "slow";
+  FlashingSpeed2["VerySlow"] = "very-slow";
+  FlashingSpeed2["Fixed"] = "fixed";
+  return FlashingSpeed2;
+})(FlashingSpeed || {});
 const ALERT_SEVERITY_PRIORITY = [
   "level-critical",
   "alarm",
@@ -14555,7 +14563,9 @@ const compentStyle$1g = i$7`* {
 .wrapper {
   --bg-color: var(--alert-alarm-color);
   --thickness: var(--global-size-spacing-border-weight-alertframe);
-  --blink-on: var(--alarm-blink-on);
+  /* 0/1 from the flash-<tempo> classes below; steady when no class applies. */
+  --blink-on: 0;
+  --blink-off: 1;
   color: var(--on-alarm-active-color);
   position: relative;
   width: 100%;
@@ -14565,12 +14575,12 @@ const compentStyle$1g = i$7`* {
   );
   outline: var(--thickness) solid var(--bg-color);
   outline-offset: 0;
+  /* +2 px outward while on, both thicknesses (Figma Flash=yes: 2 → 4 px). */
   --blink-width: 2px;
 }
 
 .wrapper.thickness-small {
     --thickness: 2px;
-    --blink-width: 1px;
   }
 
 .wrapper.wrap-content {
@@ -14582,17 +14592,69 @@ const compentStyle$1g = i$7`* {
     width: 100%;
   }
 
+.wrapper.flash-fast {
+    --blink-on: var(--flash-fast-on);
+    --blink-off: var(--flash-fast-off);
+  }
+
+.wrapper.flash-slow {
+    --blink-on: var(--flash-slow-on);
+    --blink-off: var(--flash-slow-off);
+  }
+
+.wrapper.flash-very-slow {
+    --blink-on: var(--flash-very-slow-on);
+    --blink-off: var(--flash-very-slow-off);
+  }
+
+.wrapper {
+
+  --flash-transition: 50ms linear;
+}
+
+.wrapper.flash-effect-outline-eased {
+    transition: outline-width var(--flash-transition);
+  }
+
+.wrapper.flash-effect-outline-eased .flap {
+      transition: box-shadow var(--flash-transition);
+    }
+
+.wrapper.flash-effect-outline-eased .mask {
+      transition:
+        top var(--flash-transition),
+        bottom var(--flash-transition),
+        left var(--flash-transition),
+        right var(--flash-transition);
+    }
+
+.wrapper.flash-effect-outline-eased .dash path {
+      transition: stroke-width var(--flash-transition);
+    }
+
 .wrapper {
 
   --blink-width-dynamic: calc(var(--blink-width) * var(--blink-on));
+  /* One knob for flap and masks, so they cannot drift apart from the outline. */
+  --flap-grow: 0px;
 }
 
-.wrapper.unacked-active {
+.wrapper.unacked-active,.wrapper.unacked-rectified {
     outline-width: calc(var(--thickness) + var(--blink-width-dynamic));
   }
 
+.wrapper.unacked-active {
+    --flap-grow: var(--blink-width-dynamic);
+  }
+
+.wrapper.unacked-rectified {
+    /* The dashed stroke is centred, so it moves out by half its growth. */
+    --flap-grow: calc(var(--blink-width-dynamic) / 2);
+  }
+
 .wrapper.unacked-rectified {
-    outline-style: dashed;
+    /* The dash pattern (12/6) needs an SVG stroke; outlines have no dash array. */
+    outline-style: none;
   }
 
 .wrapper.alarm,.wrapper.level-high {
@@ -14602,23 +14664,16 @@ const compentStyle$1g = i$7`* {
 
 .wrapper.warning,.wrapper.level-medium {
     --bg-color: var(--alert-warning-color);
-    --blink-on: var(--warning-blink-on);
     color: var(--on-warning-active-color);
   }
 
 .wrapper.caution,.wrapper.level-low {
     --bg-color: var(--alert-caution-color);
-    --blink-on: 1;
     color: var(--on-caution-active-color);
   }
 
-.wrapper.level-low {
-    --blink-on: var(--low-blink-on);
-  }
-
 .wrapper.level-critical {
     --bg-color: var(--critical-enabled-background-color);
-    --blink-on: var(--critical-blink-on);
     color: var(--on-critical-active-color);
   }
 
@@ -14673,7 +14728,7 @@ const compentStyle$1g = i$7`* {
       width: calc(
         var(--ui-components-button-border-radius) + var(--thickness) + 0.5px
       );
-      top: 0;
+      top: calc(-1 * var(--flap-grow));
       left: calc(
         -1 * var(--ui-components-button-border-radius) - var(--thickness)
       );
@@ -14686,15 +14741,11 @@ const compentStyle$1g = i$7`* {
       );
     }
 
-.unacked-active .up:is(.flap .mask) {
-        top: calc(-1 * var(--blink-width-dynamic));
-      }
-
 .down:is(.flap .mask) {
       width: calc(
         var(--ui-components-button-border-radius) + var(--thickness) + 0.5px
       );
-      bottom: 0;
+      bottom: calc(-1 * var(--flap-grow));
       left: calc(
         -1 * var(--ui-components-button-border-radius) - var(--thickness)
       );
@@ -14707,10 +14758,6 @@ const compentStyle$1g = i$7`* {
       );
     }
 
-.unacked-active .down:is(.flap .mask) {
-        bottom: calc(-1 * var(--blink-width-dynamic));
-      }
-
 .left:is(.flap .mask) {
       height: calc(
         var(--ui-components-button-border-radius) + var(--thickness) + 0.5px
@@ -14718,7 +14765,7 @@ const compentStyle$1g = i$7`* {
       top: calc(
         -1 * var(--ui-components-button-border-radius) - var(--thickness)
       );
-      left: 0;
+      left: calc(-1 * var(--flap-grow));
       clip-path: polygon(
         0 0,
         0 100%,
@@ -14728,10 +14775,6 @@ const compentStyle$1g = i$7`* {
       );
     }
 
-.unacked-active .left:is(.flap .mask) {
-        left: calc(-1 * var(--blink-width-dynamic));
-      }
-
 .top .left:is(.flap .mask) {
         top: unset;
         bottom: calc(
@@ -14753,7 +14796,7 @@ const compentStyle$1g = i$7`* {
       top: calc(
         -1 * var(--ui-components-button-border-radius) - var(--thickness)
       );
-      right: 0;
+      right: calc(-1 * var(--flap-grow));
       clip-path: polygon(
         100% 0,
         100% 100%,
@@ -14777,10 +14820,6 @@ const compentStyle$1g = i$7`* {
         );
       }
 
-.unacked-active .right:is(.flap .mask) {
-        right: calc(-1 * var(--blink-width-dynamic));
-      }
-
 .flap.large {
     flex-direction: column;
     top: calc(-1 * var(--thickness));
@@ -14878,8 +14917,35 @@ const compentStyle$1g = i$7`* {
     overflow: hidden;
   }
 
-.unacked-active .flap {
-  outline: var(--bg-color) solid var(--blink-width-dynamic);
+/* Grows the flap outward with the outline, never toward the content: shifted
+   copies leave the inner edge where it is (an outline would cross it). */
+
+.flap.small,
+.flap.large {
+  box-shadow:
+    var(--flap-grow) 0 0 0 var(--bg-color),
+    0 calc(-1 * var(--flap-grow)) 0 0 var(--bg-color),
+    0 var(--flap-grow) 0 0 var(--bg-color),
+    var(--flap-grow) calc(-1 * var(--flap-grow)) 0 0 var(--bg-color),
+    var(--flap-grow) var(--flap-grow) 0 0 var(--bg-color);
+}
+
+.flap.bottom {
+  box-shadow:
+    0 var(--flap-grow) 0 0 var(--bg-color),
+    calc(-1 * var(--flap-grow)) 0 0 0 var(--bg-color),
+    var(--flap-grow) 0 0 0 var(--bg-color),
+    calc(-1 * var(--flap-grow)) var(--flap-grow) 0 0 var(--bg-color),
+    var(--flap-grow) var(--flap-grow) 0 0 var(--bg-color);
+}
+
+.flap.top {
+  box-shadow:
+    0 calc(-1 * var(--flap-grow)) 0 0 var(--bg-color),
+    calc(-1 * var(--flap-grow)) 0 0 0 var(--bg-color),
+    var(--flap-grow) 0 0 0 var(--bg-color),
+    calc(-1 * var(--flap-grow)) calc(-1 * var(--flap-grow)) 0 0 var(--bg-color),
+    var(--flap-grow) calc(-1 * var(--flap-grow)) 0 0 var(--bg-color);
 }
 
 ::slotted([slot="label"]) {
@@ -14894,6 +14960,24 @@ const compentStyle$1g = i$7`* {
   display: block;
   flex-shrink: 0;
 }
+
+.dash {
+  /* Overridden inline per render from the measured thickness. */
+  --dash-pad: 0px;
+  position: absolute;
+  top: calc(-1 * var(--dash-pad));
+  left: calc(-1 * var(--dash-pad));
+  overflow: visible;
+  pointer-events: none;
+  fill: none;
+  stroke: var(--bg-color);
+  stroke-dasharray: 12 6;
+}
+
+.dash path {
+  /* Animated on the one path: a wider second path would drift its dashes. */
+  stroke-width: calc(var(--thickness) + var(--blink-width-dynamic));
+}
 `;
 var __defProp$Ax = Object.defineProperty;
 var __getOwnPropDesc$AB = Object.getOwnPropertyDescriptor;
@@ -15151,18 +15235,34 @@ function requiresAcknowledgement(type) {
     AlertType.LevelLow
   ].includes(type);
 }
-function supportsBlinking(type, acknowledged) {
-  if (acknowledged) {
-    return false;
+var AlertFlashPhase = /* @__PURE__ */ ((AlertFlashPhase2) => {
+  AlertFlashPhase2["Active"] = "active";
+  AlertFlashPhase2["Rectified"] = "rectified";
+  return AlertFlashPhase2;
+})(AlertFlashPhase || {});
+function resolveFlashingSpeed(speed, type, phase = "active") {
+  if (speed !== FlashingSpeed.Default) {
+    return speed;
+  }
+  if (type === AlertType.Caution || type === AlertType.LevelDiagnostic) {
+    return FlashingSpeed.Fixed;
+  }
+  if (phase === "rectified") {
+    return FlashingSpeed.VerySlow;
+  }
+  switch (type) {
+    case AlertType.LevelCritical:
+    case AlertType.Alarm:
+    case AlertType.LevelHigh:
+      return FlashingSpeed.Fast;
+    case AlertType.Warning:
+    case AlertType.LevelMedium:
+      return FlashingSpeed.Slow;
+    case AlertType.LevelLow:
+      return FlashingSpeed.VerySlow;
+    default:
+      return FlashingSpeed.Fixed;
   }
-  return [
-    AlertType.Alarm,
-    AlertType.Warning,
-    AlertType.LevelCritical,
-    AlertType.LevelHigh,
-    AlertType.LevelMedium,
-    AlertType.LevelLow
-  ].includes(type);
 }
 function getAlertBadgeComponent(type) {
   switch (type) {
@@ -15208,22 +15308,6 @@ function getAlertTwotoneComponent(type) {
       return "obi-alerts-alarm-twotone";
   }
 }
-function getAlertBlinkMode(type) {
-  switch (type) {
-    case AlertType.LevelCritical:
-      return "critical";
-    case AlertType.Warning:
-    case AlertType.LevelMedium:
-      return "warning";
-    case AlertType.Caution:
-    case AlertType.LevelLow:
-      return "low";
-    case AlertType.Alarm:
-    case AlertType.LevelHigh:
-    default:
-      return "alarm";
-  }
-}
 function getBamAlertTypeForBlinking(type) {
   switch (type) {
     case AlertType.LevelCritical:
@@ -15247,41 +15331,104 @@ function usesAlarmNoAckIcon(type) {
     AlertType.LevelHigh
   ].includes(type);
 }
-const CRITICAL_PERIOD = 1e3;
-const ALARM_PERIOD = 2e3;
-const WARNING_PERIOD = 4e3;
-const LOW_PERIOD = 8e3;
-function blinkingInstall(el, period, label) {
-  const anim = el.animate(
-    [
-      { [label + "-on"]: 1, [label + "-off"]: 0 },
-      { [label + "-on"]: 0, [label + "-off"]: 1 }
-    ],
-    { duration: period, iterations: Infinity, easing: "steps(2, jump-none)" }
-  );
+const FLASH_OFF_MS = 400;
+const FLASH_ON_MS = {
+  [FlashingSpeed.Fast]: 400,
+  [FlashingSpeed.Slow]: 1200,
+  [FlashingSpeed.VerySlow]: 2800
+};
+[
+  FlashingSpeed.Fast,
+  FlashingSpeed.Slow,
+  FlashingSpeed.VerySlow
+];
+function flashPeriodMs(tempo) {
+  return FLASH_ON_MS[tempo] + FLASH_OFF_MS;
+}
+function flashVariable(tempo, phase) {
+  return `--flash-${tempo}-${phase}`;
+}
+function installFlashing(el, tempo) {
+  const on2 = flashVariable(tempo, "on");
+  const off2 = flashVariable(tempo, "off");
+  const period = flashPeriodMs(tempo);
+  const frames = [
+    { [on2]: 1, [off2]: 0, easing: "step-end" },
+    {
+      [on2]: 0,
+      [off2]: 1,
+      offset: FLASH_ON_MS[tempo] / period,
+      easing: "step-end"
+    },
+    { [on2]: 0, [off2]: 1 }
+  ];
+  const anim = el.animate(frames, { duration: period, iterations: Infinity });
   anim.startTime = 0;
   return () => anim.cancel();
 }
-function blinkingCritical(el) {
-  return blinkingInstall(el, CRITICAL_PERIOD, "--critical-blink");
-}
-function blinkingAlarm(el) {
-  return blinkingInstall(el, ALARM_PERIOD, "--alarm-blink");
-}
-function blinkingWarning(el) {
-  return blinkingInstall(el, WARNING_PERIOD, "--warning-blink");
-}
-function blinkingLow(el) {
-  return blinkingInstall(el, LOW_PERIOD, "--low-blink");
+class FlashingController {
+  constructor(host, resolve2) {
+    this.host = host;
+    this.resolve = resolve2;
+    host.addController(this);
+  }
+  get tempo() {
+    return this.installed;
+  }
+  hostConnected() {
+    if (this.host.hasUpdated) {
+      this.sync();
+    }
+  }
+  hostUpdated() {
+    this.sync();
+  }
+  hostDisconnected() {
+    this.stop();
+  }
+  sync() {
+    const wanted = this.host.isConnected ? this.resolve() : FlashingSpeed.Fixed;
+    if (wanted === FlashingSpeed.Fixed) {
+      this.stop();
+      return;
+    }
+    if (wanted === this.installed) {
+      return;
+    }
+    this.stop();
+    this.cancel = installFlashing(this.host, wanted);
+    this.installed = wanted;
+  }
+  stop() {
+    this.cancel?.();
+    this.cancel = void 0;
+    this.installed = void 0;
+  }
 }
-function blinkingAll(el) {
-  const animes = [
-    blinkingCritical(el),
-    blinkingAlarm(el),
-    blinkingWarning(el),
-    blinkingLow(el)
-  ];
-  return () => animes.forEach((anim) => anim());
+function roundedRectPath({
+  x: x2,
+  y: y3,
+  width,
+  height,
+  radii
+}) {
+  const max2 = Math.min(width, height) / 2;
+  const [tl, tr, br, bl] = radii.map((r2) => Math.max(0, Math.min(r2, max2)));
+  const right = x2 + width;
+  const bottom = y3 + height;
+  const arc = (r2, endX, endY) => r2 > 0 ? `A${r2} ${r2} 0 0 1 ${endX} ${endY}` : "";
+  return [
+    `M${x2 + tl} ${y3}`,
+    `H${right - tr}`,
+    arc(tr, right, y3 + tr),
+    `V${bottom - br}`,
+    arc(br, right - br, bottom),
+    `H${x2 + bl}`,
+    arc(bl, x2, bottom - bl),
+    `V${y3 + tl}`,
+    arc(tl, x2 + tl, y3),
+    "Z"
+  ].filter(Boolean).join(" ");
 }
 var __defProp$At = Object.defineProperty;
 var __getOwnPropDesc$Aw = Object.getOwnPropertyDescriptor;
@@ -15312,6 +15459,10 @@ var ObcAlertFrameMode = /* @__PURE__ */ ((ObcAlertFrameMode2) => {
   ObcAlertFrameMode2["unackedRectified"] = "unacked-rectified";
   return ObcAlertFrameMode2;
 })(ObcAlertFrameMode || {});
+const DASH_FLASH_GROWTH_PX = 2;
+function sameDashBox(a2, b2) {
+  return b2 !== void 0 && a2.width === b2.width && a2.height === b2.height && a2.thickness === b2.thickness && a2.radii.every((r2, i4) => r2 === b2.radii[i4]);
+}
 let ObcAlertFrame = class extends i$4 {
   constructor() {
     super(...arguments);
@@ -15319,6 +15470,34 @@ let ObcAlertFrame = class extends i$4 {
     this.thickness = "small";
     this.status = AlertType.Alarm;
     this.mode = "acked-active";
+    this.flashingSpeed = FlashingSpeed.Default;
+    this.flashEffect = "outline";
+    this.flashing = new FlashingController(
+      this,
+      () => this.resolvedFlashingSpeed
+    );
+    this.measureDash = () => {
+      const wrapper = this.wrapper;
+      if (!wrapper) {
+        return;
+      }
+      const style2 = getComputedStyle(wrapper);
+      const px = (value) => parseFloat(value) || 0;
+      const box = {
+        width: wrapper.offsetWidth,
+        height: wrapper.offsetHeight,
+        thickness: px(style2.getPropertyValue("--thickness")),
+        radii: [
+          px(style2.borderTopLeftRadius),
+          px(style2.borderTopRightRadius),
+          px(style2.borderBottomRightRadius),
+          px(style2.borderBottomLeftRadius)
+        ]
+      };
+      if (!sameDashBox(box, this.dashBox)) {
+        this.dashBox = box;
+      }
+    };
     this.wrapContent = false;
     this.fullWidth = false;
     this.sharpEdgeTopLeft = false;
@@ -15329,6 +15508,79 @@ let ObcAlertFrame = class extends i$4 {
     this.showIcon = false;
     this.showAlertCategoryIcon = true;
   }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.hasUpdated) {
+      this.requestUpdate();
+    }
+  }
+  updated() {
+    const wantsDash = this.mode === "unacked-rectified" && this.isConnected;
+    if (wantsDash && !this.dashObserver && this.wrapper) {
+      this.dashObserver = new ResizeObserver(this.measureDash);
+      this.dashObserver.observe(this.wrapper);
+    }
+    if (wantsDash) {
+      this.measureDash();
+    }
+    if (!wantsDash && this.dashObserver) {
+      this.dashObserver.disconnect();
+      this.dashObserver = void 0;
+      this.dashBox = void 0;
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.dashObserver?.disconnect();
+    this.dashObserver = void 0;
+  }
+  renderDash() {
+    const box = this.dashBox;
+    if (this.mode !== "unacked-rectified" || !box) {
+      return A;
+    }
+    const pad = box.thickness + DASH_FLASH_GROWTH_PX;
+    const centreline = {
+      x: pad - box.thickness / 2,
+      y: pad - box.thickness / 2,
+      width: box.width + box.thickness,
+      height: box.height + box.thickness,
+      // A radius of 0 is a sharp edge and must stay square.
+      radii: box.radii.map(
+        (r2) => r2 > 0 ? r2 + box.thickness / 2 : 0
+      )
+    };
+    const width = box.width + 2 * pad;
+    const height = box.height + 2 * pad;
+    return b`<svg
+      class="dash"
+      aria-hidden="true"
+      width=${width}
+      height=${height}
+      viewBox="0 0 ${width} ${height}"
+      style="--dash-pad: ${pad}px"
+    >
+      <path d=${roundedRectPath(centreline)}></path>
+    </svg>`;
+  }
+  get resolvedFlashingSpeed() {
+    switch (this.mode) {
+      case "unacked-active":
+        return resolveFlashingSpeed(
+          this.flashingSpeed,
+          this.status,
+          AlertFlashPhase.Active
+        );
+      case "unacked-rectified":
+        return resolveFlashingSpeed(
+          this.flashingSpeed,
+          this.status,
+          AlertFlashPhase.Rectified
+        );
+      default:
+        return FlashingSpeed.Fixed;
+    }
+  }
   render() {
     return b`
       <div
@@ -15344,37 +15596,16 @@ let ObcAlertFrame = class extends i$4 {
       "sharp-edge-top-right": this.sharpEdgeTopRight,
       "sharp-edge-bottom-left": this.sharpEdgeBottomLeft,
       "sharp-edge-bottom-right": this.sharpEdgeBottomRight,
-      [this.mode]: true
+      [this.mode]: true,
+      ["flash-" + this.resolvedFlashingSpeed]: true,
+      ["flash-effect-" + this.flashEffect]: true
     })}
       >
         <slot></slot>
-        ${this.flap()}
+        ${this.renderDash()} ${this.flap()}
       </div>
     `;
   }
-  syncBlinking() {
-    if (this.mode !== "unacked-active" && this._blinkAnimationCancel) {
-      this._blinkAnimationCancel();
-      this._blinkAnimationCancel = void 0;
-    }
-    if (this.mode === "unacked-active" && !this._blinkAnimationCancel) {
-      this._blinkAnimationCancel = blinkingAll(this);
-    }
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    if (this.hasUpdated) {
-      this.syncBlinking();
-    }
-  }
-  updated() {
-    this.syncBlinking();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this._blinkAnimationCancel?.();
-    this._blinkAnimationCancel = void 0;
-  }
   flap() {
     if (this.type === "regular") {
       return A;
@@ -15453,6 +15684,18 @@ __decorateClass$AE([
 __decorateClass$AE([
   n$3({ type: String })
 ], ObcAlertFrame.prototype, "mode", 2);
+__decorateClass$AE([
+  n$3({ type: String })
+], ObcAlertFrame.prototype, "flashingSpeed", 2);
+__decorateClass$AE([
+  n$3({ type: String })
+], ObcAlertFrame.prototype, "flashEffect", 2);
+__decorateClass$AE([
+  r$3()
+], ObcAlertFrame.prototype, "dashBox", 2);
+__decorateClass$AE([
+  e$3(".wrapper")
+], ObcAlertFrame.prototype, "wrapper", 2);
 __decorateClass$AE([
   n$3({ type: Boolean, reflect: true })
 ], ObcAlertFrame.prototype, "wrapContent", 2);
@@ -15492,6 +15735,7 @@ function wrapWithAlertFrame(options, content, fullWidth = false) {
     .thickness=${options.thickness ?? "small"}
     .status=${options.status ?? AlertType.Alarm}
     .mode=${options.mode ?? "acked-active"}
+    .flashingSpeed=${options.flashingSpeed ?? FlashingSpeed.Default}
     .showIcon=${options.showIcon ?? false}
     .showAlertCategoryIcon=${options.showAlertCategoryIcon ?? true}
     .wrapContent=${true}
@@ -35092,6 +35336,34 @@ function observeLabelThreshold(target, isAboveThreshold, callbacks) {
   observer.observe(target);
   return observer;
 }
+function rangeLabelFontString(font2) {
+  return `${font2.weight} ${font2.sizePx}px ${font2.family}`;
+}
+function rangeLabelLineHeight(font2) {
+  return Math.round(font2.sizePx * 1.2);
+}
+function formatRangeValue(value, min2, max2) {
+  const decimals = Number.isInteger(min2) && Number.isInteger(max2) ? 0 : 1;
+  return value.toFixed(decimals);
+}
+function yRangeLabelValues(min2, max2) {
+  return min2 < 0 && max2 > 0 ? [min2, 0, max2] : [min2, max2];
+}
+const SIDE_GAP = 8;
+const BOTTOM_GAP = 4;
+function measureRangeLabelGutters(ctx, font2, yTexts, xTexts) {
+  ctx.save();
+  ctx.font = rangeLabelFontString(font2);
+  const widest = yTexts.reduce(
+    (width, text) => Math.max(width, ctx.measureText(text).width),
+    0
+  );
+  ctx.restore();
+  return {
+    side: yTexts.length ? Math.ceil(widest) + SIDE_GAP : 0,
+    bottom: xTexts.length ? rangeLabelLineHeight(font2) + BOTTOM_GAP : 0
+  };
+}
 var TickmarkType$1 = /* @__PURE__ */ ((TickmarkType2) => {
   TickmarkType2["zeroLineThick"] = "zeroLineThick";
   TickmarkType2["zeroLine"] = "zeroLine";
@@ -35728,6 +36000,28 @@ function isOutwardPositive(config) {
 function rangeIncludesZero(minValue, maxValue) {
   return minValue <= 0 && maxValue >= 0;
 }
+function resolveMainTickmarkValues(config) {
+  const source = config.mainTickmarks?.length ? config.mainTickmarks : [config.minValue, 0, config.maxValue];
+  return [...new Set(source)].filter((v2) => v2 >= config.minValue && v2 <= config.maxValue).sort((a2, b2) => a2 - b2);
+}
+const EXTERNAL_SCALE_MAX_TICKS = 1e3;
+const DENSE_LADDER_WARNINGS_KEPT = 64;
+const warnedDenseLadders = /* @__PURE__ */ new Set();
+function isLadderTooDense(config, interval) {
+  const count = Math.floor((config.maxValue - config.minValue) / interval) + 1;
+  if (!(count > EXTERNAL_SCALE_MAX_TICKS)) return false;
+  const key = `${config.minValue}/${config.maxValue}/${interval}`;
+  if (!warnedDenseLadders.has(key)) {
+    if (warnedDenseLadders.size >= DENSE_LADDER_WARNINGS_KEPT) {
+      warnedDenseLadders.clear();
+    }
+    warnedDenseLadders.add(key);
+    console.warn(
+      `[external-scale] tick interval ${interval} over the range ${config.minValue}…${config.maxValue} is ${count} ticks; the ladder is not drawn (limit ${EXTERNAL_SCALE_MAX_TICKS}). A range in epoch milliseconds needs an interval in milliseconds.`
+    );
+  }
+  return true;
+}
 function calculateAtSetpoint(config) {
   const isTouching = config.touching ?? false;
   return computeAtSetpoint({
@@ -35842,6 +36136,7 @@ function generateTickmarksAtInterval(config, interval, perpStart, perpLen, skipV
   const svgs = [];
   const values = [];
   if (interval <= 0 || !Number.isFinite(interval)) return { svgs, values };
+  if (isLadderTooDense(config, interval)) return { svgs, values };
   const includesZero = rangeIncludesZero(config.minValue, config.maxValue);
   const pushTick = (v2) => {
     if (skipValues.includes(v2)) return;
@@ -35890,9 +36185,7 @@ function generateTickmarks$1(config) {
     const start = config.frameStyle === "flat" ? base : tickmarksStart;
     const mainLen = config.frameStyle === "flat" ? main + 4 : main;
     const dirLen = isOutwardPositive(config) ? mainLen : -mainLen;
-    const mainTickValues = config.mainTickmarks.length > 0 ? config.mainTickmarks : [config.minValue, 0, config.maxValue];
-    for (const value of mainTickValues) {
-      if (value < config.minValue || value > config.maxValue) continue;
+    for (const value of resolveMainTickmarkValues(config)) {
       if (config.scaleBackground && (value === config.minValue || value === config.maxValue)) {
         skipValues.push(value);
         continue;
@@ -35937,36 +36230,47 @@ function generateTickmarks$1(config) {
   return svgs;
 }
 function generateLabels(config) {
-  if (!config.labels || config.primaryTickmarkInterval === void 0) return [];
-  const interval = config.primaryTickmarkInterval;
-  if (interval <= 0 || !Number.isFinite(interval)) return [];
+  if (!config.labels) return [];
   const fontFamily = "var(--font-family-main)";
   const fontColor = "var(--instrument-tick-mark-label-secondary-color)";
   const fontSize = "calc(var(--global-typography-ui-label-font-size) / var(--scale, 1))";
   const base = tickBasePerp(config);
   const effectiveTickThickness = computeExternalScaleEffectiveTickThickness(config);
   const labelPos = isOutwardPositive(config) ? base + (config.hasScale ? effectiveTickThickness : 0) + labelGap() : base - (config.hasScale ? effectiveTickThickness : 0) - labelGap();
-  const includesZero = rangeIncludesZero(config.minValue, config.maxValue);
   const labels = [];
-  const push = (v2) => {
+  const push = (v2, edge) => {
     const main = valueToMainAxis(config, v2);
     if (isVertical(config)) {
       const x22 = labelPos;
       const y22 = main;
-      const anchor = isOutwardPositive(config) ? "start" : "end";
+      const anchor2 = isOutwardPositive(config) ? "start" : "end";
+      const baseline2 = edge?.baseline ?? "middle";
       labels.push(
-        w`<text x=${x22} y=${y22} text-anchor=${anchor} dominant-baseline="middle" font-family=${fontFamily} style="font-size: ${fontSize}" fill=${fontColor}>${v2}</text>`
+        w`<text x=${x22} y=${y22} text-anchor=${anchor2} dominant-baseline=${baseline2} font-family=${fontFamily} style="font-size: ${fontSize}" fill=${fontColor}>${v2}</text>`
       );
       return;
     }
     const y3 = labelPos;
     const x2 = main;
     const baseline = isOutwardPositive(config) ? "hanging" : "auto";
+    const anchor = edge?.anchor ?? "middle";
     labels.push(
-      w`<text x=${x2} y=${y3} text-anchor="middle" dominant-baseline=${baseline} font-family=${fontFamily} style="font-size: ${fontSize}" fill=${fontColor}>${v2}</text>`
+      w`<text x=${x2} y=${y3} text-anchor=${anchor} dominant-baseline=${baseline} font-family=${fontFamily} style="font-size: ${fontSize}" fill=${fontColor}>${v2}</text>`
     );
   };
-  if (includesZero) {
+  if (config.mainTickmarkLabels) {
+    for (const v2 of resolveMainTickmarkValues(config)) {
+      const edge = v2 === config.minValue ? { anchor: "start", baseline: "auto" } : v2 === config.maxValue ? { anchor: "end", baseline: "hanging" } : void 0;
+      push(v2, edge);
+    }
+    return labels;
+  }
+  const interval = config.primaryTickmarkInterval;
+  if (interval === void 0 || interval <= 0 || !Number.isFinite(interval)) {
+    return [];
+  }
+  if (isLadderTooDense(config, interval)) return [];
+  if (rangeIncludesZero(config.minValue, config.maxValue)) {
     for (let v2 = 0; v2 <= config.maxValue; v2 += interval) push(v2);
     for (let v2 = -interval; v2 >= config.minValue; v2 -= interval) push(v2);
   } else {
@@ -36979,6 +37283,7 @@ const LINE_GRAPH_WATCHED_PROP_NAMES = [
   "xAxisType",
   "yAxisPosition",
   "yAxes",
+  "xAxis",
   "showGrid",
   "showGridX",
   "showGridY",
@@ -37003,14 +37308,17 @@ const LINE_GRAPH_WATCHED_PROP_NAMES = [
   "height",
   "fixedAspectRatioScaling",
   // Triggers responsive mode change
-  "hasLabelPadding"
+  "hasLabelPadding",
   // Toggles edge-to-edge rendering and label visibility
+  "rangeLabels"
 ];
 const LINE_GRAPH_RECREATE_PROP_NAMES = [
   "showDebugOverlay",
   "width",
   "height",
-  "fixedAspectRatioScaling"
+  "fixedAspectRatioScaling",
+  "rangeLabels"
+  // Adds or removes the range-labels plugin
 ];
 const LINE_GRAPH_DIMENSION_PROP_NAMES = [
   "width",
@@ -37033,11 +37341,14 @@ const _ObcChartLineBase = class _ObcChartLineBase extends i$4 {
     this.xAxisType = "category";
     this.yAxisPosition = "left";
     this.yAxes = void 0;
+    this.xAxis = void 0;
     this.showGrid = false;
     this.showGridX = false;
     this.showGridY = false;
     this.showTickMarks = false;
     this.hasLabelPadding = true;
+    this.rangeLabels = "none";
+    this.warnedDateDisplayScale = false;
     this.DEFAULT_TENSION = 0.4;
     this.POINT_RADIUS = 3;
     this.showPoints = false;
@@ -37060,6 +37371,10 @@ const _ObcChartLineBase = class _ObcChartLineBase extends i$4 {
     this.currentBorderRadiusPx = 8;
     this.computedWidth = 480;
     this.computedHeight = 320;
+    this.savedLabelThickness = /* @__PURE__ */ new WeakMap();
+    this.savedMainTickmarkLabels = /* @__PURE__ */ new WeakMap();
+    this.lastRangeLabels = [];
+    this.rangeLabelCache = { y: [], x: [] };
     this.updateBorderRadius = () => {
       if (!this.canvasEl) return;
       let next;
@@ -37099,10 +37414,25 @@ const _ObcChartLineBase = class _ObcChartLineBase extends i$4 {
       }, 16);
     };
   }
+  /** @internal - The y side wants range labels; an edge-to-edge chart never does. */
+  get rangeLabelsY() {
+    return this.hasLabelPadding && (this.rangeLabels === "y" || this.rangeLabels === "xy");
+  }
+  /** @internal - The x side wants range labels; an edge-to-edge chart never does. */
+  get rangeLabelsX() {
+    return this.hasLabelPadding && (this.rangeLabels === "x" || this.rangeLabels === "xy");
+  }
   /** @internal - True when the x-axis positions points by numeric value. */
   get isNumericXAxis() {
     return this.xAxisType === "time" || this.xAxisType === "number";
   }
+  /**
+   * Id of the y scale a dataset lands on when it names none. Chart.js would
+   * otherwise add a default `y` scale next to the configured ones and draw it.
+   */
+  get primaryYAxisId() {
+    return this.yAxes?.length ? this.yAxes[0].id ?? "y0" : "y";
+  }
   /** @internal - Normalization mode for the current x-axis type. */
   get xValueMode() {
     return this.xAxisType === "number" ? XValueMode.number : XValueMode.time;
@@ -37141,37 +37471,221 @@ const _ObcChartLineBase = class _ObcChartLineBase extends i$4 {
     throw new Error("shouldStack() must be implemented in subclass");
   }
   /**
-   * Compute which corners should be rounded based on borderRadiusPosition and
-   * which external scales are present.
-   *
-   * Logic:
-   * - Opposite scales (left+right OR top+bottom) → no rounding (middleChild behavior)
-   * - Perpendicular scales (e.g., right+bottom):
-   *   - innerFirstChild → round corner adjacent to both scales
-   *   - outerLastChild → round free corner opposite to scales
-   * - Single-side scales:
-   *   - When external scale is on RIGHT, chart is on LEFT
-   *     - innerFirstChild → round LEFT corners (top-left + bottom-left)
-   *     - outerLastChild → round RIGHT corners (top-right + bottom-right)
-   *   - When external scale is on LEFT, chart is on RIGHT (opposite)
-   *   - When external scale is on TOP, chart is on BOTTOM
-   *     - innerFirstChild → round BOTTOM corners (bottom-left + bottom-right)
-   *     - outerLastChild → round TOP corners (top-left + top-right)
-   *   - When external scale is on BOTTOM, chart is on TOP (opposite)
-   * - middleChild → no rounding
-   */
-  /**
-   * Check if a slotted scale element is actually visible (renders content).
-   * For bar-vertical/bar-horizontal elements, checks hasBar and hasScale properties.
+   * Label band a slotted scale needs for its compact labels, in the scale's
+   * own viewBox units. The scale prints the raw values, so those are what is
+   * measured; the x band is one text line.
    */
-  hasVisibleScale(side) {
-    const slotMap = {
+  compactLabelThickness(axis) {
+    const context = this.canvasEl?.getContext("2d");
+    if (!context) return void 0;
+    const font2 = this.rangeLabelFont();
+    let visual;
+    if (axis === "y") {
+      const bounds = this.rangeLabelCache.bounds;
+      if (!bounds) return void 0;
+      const texts = yRangeLabelValues(bounds.min, bounds.max).map(String);
+      visual = measureRangeLabelGutters(context, font2, texts, []).side + 4;
+    } else {
+      visual = measureRangeLabelGutters(context, font2, [], ["x"]).bottom + 8;
+    }
+    if (!this.fixedAspectRatioScaling) return Math.ceil(visual);
+    const effectiveLength = axis === "y" ? this.getEffectiveHeight() : this.getEffectiveWidth();
+    return Math.ceil(visual * this.scaleReferenceSize / effectiveLength);
+  }
+  slotFor(side) {
+    return {
       left: this.leftScaleSlot,
       right: this.rightScaleSlot,
       top: this.topScaleSlot,
       bottom: this.bottomScaleSlot
+    }[side];
+  }
+  hasSlottedScale(side) {
+    return (this.slotFor(side)?.assignedElements().length ?? 0) > 0;
+  }
+  /** @internal - Below the label threshold on either dimension. */
+  isBelowThreshold() {
+    return this.getEffectiveWidth() < RECTANGULAR_CHART_DIMENSIONS.MIN_HEIGHT_WITH_LABELS || this.getEffectiveHeight() < RECTANGULAR_CHART_DIMENSIONS.MIN_HEIGHT_WITH_LABELS;
+  }
+  get ySide() {
+    const first = this.yAxes?.[0]?.position;
+    return (first ?? this.yAxisPosition) === "right" ? "right" : "left";
+  }
+  rangeLabelFont() {
+    const sizePx = Number.parseFloat(
+      getCssVariableValue(this, LINE_GRAPH_LABEL_CONFIG.fontSizeVar)
+    );
+    return {
+      family: getCssVariableValue(this, LINE_GRAPH_LABEL_CONFIG.fontFamily),
+      sizePx: Number.isFinite(sizePx) ? sizePx : 12,
+      weight: getCssVariableValue(this, LINE_GRAPH_LABEL_CONFIG.fontWeightVar)
     };
-    const slot = slotMap[side];
+  }
+  /**
+   * Extent of the prepared data: one for x, one per y scale id. Each y axis
+   * ranges from its own datasets, so a merged extent would label one axis
+   * with another's values.
+   */
+  dataExtents(prepared) {
+    const x2 = { min: Infinity, max: -Infinity };
+    const y3 = /* @__PURE__ */ new Map();
+    const take = (extent, v2) => {
+      if (!Number.isFinite(v2)) return;
+      extent.min = Math.min(extent.min, v2);
+      extent.max = Math.max(extent.max, v2);
+    };
+    prepared.datasets.forEach((dataset) => {
+      const id = dataset.yAxisID ?? this.primaryYAxisId;
+      const extent = y3.get(id) ?? { min: Infinity, max: -Infinity };
+      y3.set(id, extent);
+      dataset.data.forEach((point) => {
+        if (typeof point === "number") {
+          take(extent, point);
+        } else if (point) {
+          take(x2, point.x);
+          take(extent, point.y);
+        }
+      });
+    });
+    y3.forEach((extent, id) => {
+      if (!(extent.min <= extent.max)) y3.delete(id);
+    });
+    return { x: x2.min <= x2.max ? x2 : void 0, y: y3 };
+  }
+  /**
+   * Range the y labels describe. Below the threshold the axis runs on data
+   * bounds, so its datasets' extent is exact and needs no chart to read from.
+   */
+  yRangeBounds(extents) {
+    let axis;
+    let id = "y";
+    if (this.yAxes?.length) {
+      const match = this.yAxes.findIndex(
+        (a2) => (a2.position ?? "left") === this.ySide
+      );
+      const index2 = match === -1 ? 0 : match;
+      axis = this.yAxes[index2];
+      id = axis.id ?? `y${index2}`;
+    }
+    const extent = extents.get(id);
+    const stackedScale = this.shouldStack() ? this.chart?.scales[id] : void 0;
+    const min2 = axis?.min ?? stackedScale?.min ?? extent?.min;
+    const max2 = axis?.max ?? stackedScale?.max ?? extent?.max;
+    return min2 !== void 0 && max2 !== void 0 ? { min: min2, max: max2 } : void 0;
+  }
+  /** First and last x label, or nothing when there is no span to label. */
+  xEdgeLabelTexts(prepared, extent) {
+    if (!this.isNumericXAxis) {
+      const labels = prepared.labels.map(String);
+      const first = labels[0];
+      const last = labels[labels.length - 1];
+      return labels.length > 1 && first !== last ? [first, last] : [];
+    }
+    const min2 = this.xAxis?.min ?? extent?.min;
+    const max2 = this.xAxis?.max ?? extent?.max;
+    if (min2 === void 0 || max2 === void 0 || min2 === max2) return [];
+    const reference = this.timeDisplay === "minutes" ? this.computeTimeReference() : void 0;
+    return [
+      formatXValue(min2, this.xValueMode, reference),
+      formatXValue(max2, this.xValueMode, reference)
+    ];
+  }
+  /**
+   * Recompute the range labels. A side with a slotted scale is labelled by
+   * the scale, so it gets no text here; the y bounds are kept regardless,
+   * since the scale's compact band is measured from them.
+   */
+  refreshRangeLabels() {
+    const cache = { y: [], x: [] };
+    if (this.isBelowThreshold() && (this.rangeLabelsY || this.rangeLabelsX)) {
+      const prepared = this.prepareChartDataAndLabels();
+      const extents = this.dataExtents(prepared);
+      if (this.rangeLabelsY) {
+        cache.bounds = this.yRangeBounds(extents.y);
+        if (cache.bounds && !this.hasSlottedScale("left") && !this.hasSlottedScale("right")) {
+          const { min: min2, max: max2 } = cache.bounds;
+          cache.y = yRangeLabelValues(min2, max2).map(
+            (v2) => formatRangeValue(v2, min2, max2)
+          );
+        }
+      }
+      if (this.rangeLabelsX && !this.hasSlottedScale("top") && !this.hasSlottedScale("bottom")) {
+        cache.x = this.xEdgeLabelTexts(prepared, extents.x);
+      }
+    }
+    this.rangeLabelCache = cache;
+    return cache;
+  }
+  /**
+   * Paints min / 0 / max and first / last once Chart.js has drawn, inside the
+   * gutters `getChartOptions()` reserved. The end labels sit flush with the
+   * plot edges so no vertical padding is needed for them.
+   */
+  createRangeLabelsPlugin() {
+    return {
+      id: "rangeLabels",
+      afterDraw: (chart) => {
+        this.lastRangeLabels = [];
+        const { y: yTexts, x: xTexts, bounds } = this.rangeLabelCache;
+        if (!yTexts.length && !xTexts.length) return;
+        const area = chart.chartArea;
+        const ctx = chart.ctx;
+        const font2 = this.rangeLabelFont();
+        const lineHeight = rangeLabelLineHeight(font2);
+        ctx.save();
+        ctx.font = rangeLabelFontString(font2);
+        ctx.fillStyle = getCssVariableValue(
+          this,
+          LINE_GRAPH_LABEL_CONFIG.fontColorVar
+        );
+        const scale = chart.scales[this.primaryYAxisId];
+        if (yTexts.length && bounds && scale) {
+          const onRight = this.ySide === "right";
+          const x2 = onRight ? area.right + 8 : area.left - 8;
+          ctx.textAlign = onRight ? "left" : "right";
+          const values = yRangeLabelValues(bounds.min, bounds.max);
+          for (let i4 = values.length - 1; i4 >= 0; i4--) {
+            const isMax = i4 === values.length - 1;
+            const isMin = i4 === 0;
+            const y3 = isMax ? area.top : isMin ? area.bottom : scale.getPixelForValue(values[i4]);
+            if (!isMax && !isMin && (y3 - area.top < lineHeight || area.bottom - y3 < lineHeight)) {
+              continue;
+            }
+            ctx.textBaseline = isMax ? "top" : isMin ? "bottom" : "middle";
+            ctx.fillText(yTexts[i4], x2, y3);
+            this.lastRangeLabels.push({ axis: "y", text: yTexts[i4], x: x2, y: y3 });
+          }
+        }
+        if (xTexts.length === 2) {
+          const y3 = area.bottom + 4;
+          ctx.textBaseline = "top";
+          ctx.textAlign = "left";
+          ctx.fillText(xTexts[0], area.left, y3);
+          this.lastRangeLabels.push({
+            axis: "x",
+            text: xTexts[0],
+            x: area.left,
+            y: y3
+          });
+          ctx.textAlign = "right";
+          ctx.fillText(xTexts[1], area.right, y3);
+          this.lastRangeLabels.push({
+            axis: "x",
+            text: xTexts[1],
+            x: area.right,
+            y: y3
+          });
+        }
+        ctx.restore();
+      }
+    };
+  }
+  /**
+   * Check if a slotted scale element is actually visible (renders content).
+   * For bar-vertical/bar-horizontal elements, checks hasBar and hasScale properties.
+   */
+  hasVisibleScale(side) {
+    const slot = this.slotFor(side);
     const elements = slot?.assignedElements() ?? [];
     return elements.some((el) => {
       const barEl = el;
@@ -37551,13 +38065,13 @@ const _ObcChartLineBase = class _ObcChartLineBase extends i$4 {
     if (this.isUpdatingScales) return false;
     this.isUpdatingScales = true;
     try {
-      const padding = this.calculatePaddingFromScales();
-      const effectiveWidth = this.width - padding.left - padding.right;
-      const effectiveHeight = this.height - padding.top - padding.bottom;
+      const padding = this.computeChartPadding();
+      const effectiveWidth = this.getEffectiveWidth() - padding.left - padding.right;
+      const effectiveHeight = this.getEffectiveHeight() - padding.top - padding.bottom;
       if (effectiveWidth <= 0 || effectiveHeight <= 0) {
         console.warn("[chart-line-base] Invalid effective dimensions", {
-          width: this.width,
-          height: this.height,
+          width: this.getEffectiveWidth(),
+          height: this.getEffectiveHeight(),
           padding,
           effectiveWidth,
           effectiveHeight
@@ -37594,47 +38108,139 @@ const _ObcChartLineBase = class _ObcChartLineBase extends i$4 {
     };
     return padding;
   }
+  /**
+   * Range a slotted scale on the given side has to cover.
+   *
+   * A range pinned in the axis configuration is used as is: it is the source
+   * of truth, and on the first sync there is no chart to read yet. Otherwise
+   * the live Chart.js scale is read under the id `buildScalesConfig()` gives
+   * it. A side with no axis of its own follows the first configured one.
+   */
+  resolveAxisRange(side) {
+    let id = side === "x" ? "x" : "y";
+    let configured;
+    if (side === "x") {
+      configured = this.isNumericXAxis ? this.xAxis : void 0;
+    } else if (this.yAxes?.length) {
+      const match = this.yAxes.findIndex(
+        (axis2) => (axis2.position ?? "left") === side
+      );
+      const index2 = match === -1 ? 0 : match;
+      const axis = this.yAxes[index2];
+      id = axis.id ?? `y${index2}`;
+      configured = axis;
+    }
+    if (configured?.min !== void 0 && configured.max !== void 0) {
+      return { min: configured.min, max: configured.max };
+    }
+    const scale = this.chart?.scales[id];
+    return {
+      min: scale?.min ?? configured?.min ?? 0,
+      max: scale?.max ?? configured?.max ?? 100
+    };
+  }
+  /**
+   * Range pushed to the top and bottom scales, or `undefined` to leave them
+   * alone. A scale prints its values verbatim, and on a `time` axis the raw
+   * range is epoch milliseconds. In `minutes` display the range is converted
+   * to the minutes the chart's own labels show; `date` display has no numeric
+   * equivalent, so the scale keeps its own range.
+   */
+  resolveSlottedXRange() {
+    const range = this.resolveAxisRange("x");
+    if (this.xAxisType !== "time") return range;
+    if (this.timeDisplay !== "minutes") {
+      if (!this.warnedDateDisplayScale) {
+        this.warnedDateDisplayScale = true;
+        console.warn(
+          "[obc-chart] a slotted horizontal scale cannot label a time axis in 'date' display and keeps its own range; use timeDisplay='minutes' or a number axis."
+        );
+      }
+      return void 0;
+    }
+    const pinned = this.xAxis?.min !== void 0 && this.xAxis?.max !== void 0;
+    const reference = this.computeTimeReference();
+    if (reference === void 0 || !this.chart && !pinned) return void 0;
+    const minute = 6e4;
+    return {
+      min: (range.min - reference) / minute,
+      max: (range.max - reference) / minute
+    };
+  }
   /**
    * Update properties on slotted scale elements
    */
   updateScaleProperties(padding) {
-    const yMin = this.chart?.scales["y"]?.min ?? 0;
-    const yMax = this.chart?.scales["y"]?.max ?? 100;
-    const xMin = this.chart?.scales["x"]?.min ?? 0;
-    const xMax = this.chart?.scales["x"]?.max ?? 100;
+    const leftRange = this.resolveAxisRange("left");
+    const rightRange = this.resolveAxisRange("right");
+    const xRange = this.resolveSlottedXRange();
     const effectiveWidth = this.getEffectiveWidth();
     const effectiveHeight = this.getEffectiveHeight();
-    const showLabels = this.hasLabelPadding && effectiveWidth >= RECTANGULAR_CHART_DIMENSIONS.MIN_HEIGHT_WITH_LABELS && effectiveHeight >= RECTANGULAR_CHART_DIMENSIONS.MIN_HEIGHT_WITH_LABELS;
+    const aboveThreshold = effectiveWidth >= RECTANGULAR_CHART_DIMENSIONS.MIN_HEIGHT_WITH_LABELS && effectiveHeight >= RECTANGULAR_CHART_DIMENSIONS.MIN_HEIGHT_WITH_LABELS;
+    const showLabels = this.hasLabelPadding && aboveThreshold;
+    const compactY = !aboveThreshold && this.rangeLabelsY;
+    const compactX = !aboveThreshold && this.rangeLabelsX;
+    const compactYThickness = compactY ? this.compactLabelThickness("y") : void 0;
+    const compactXThickness = compactX ? this.compactLabelThickness("x") : void 0;
+    const mainLabelsFor = (scale, compact) => {
+      if (compact) {
+        if (!this.savedMainTickmarkLabels.has(scale)) {
+          this.savedMainTickmarkLabels.set(
+            scale,
+            scale.showMainTickmarkLabels ?? false
+          );
+        }
+        return true;
+      }
+      if (!this.savedMainTickmarkLabels.has(scale)) return void 0;
+      const saved = this.savedMainTickmarkLabels.get(scale);
+      this.savedMainTickmarkLabels.delete(scale);
+      return saved;
+    };
+    const bandFor = (scale, compact, thickness) => {
+      if (compact) {
+        if (thickness === void 0 || typeof scale.labelThickness !== "number") {
+          return void 0;
+        }
+        if (!this.savedLabelThickness.has(scale)) {
+          this.savedLabelThickness.set(scale, scale.labelThickness);
+        }
+        return thickness;
+      }
+      const saved = this.savedLabelThickness.get(scale);
+      this.savedLabelThickness.delete(scale);
+      return saved;
+    };
     const verticalViewBoxPadding = this.fixedAspectRatioScaling ? {
       top: Math.round(
-        padding.top * this.scaleReferenceSize / this.height
+        padding.top * this.scaleReferenceSize / effectiveHeight
       ),
       bottom: Math.round(
-        padding.bottom * this.scaleReferenceSize / this.height
+        padding.bottom * this.scaleReferenceSize / effectiveHeight
       )
     } : { top: padding.top, bottom: padding.bottom };
     const horizontalViewBoxPadding = this.fixedAspectRatioScaling ? {
       left: Math.round(
-        padding.left * this.scaleReferenceSize / this.width
+        padding.left * this.scaleReferenceSize / effectiveWidth
       ),
       right: Math.round(
-        padding.right * this.scaleReferenceSize / this.width
+        padding.right * this.scaleReferenceSize / effectiveWidth
       )
     } : { left: padding.left, right: padding.right };
     const updates = [];
+    const rangeProps = (side, range) => this.ownsSlottedScaleRange(side) ? { minValue: range.min, maxValue: range.max } : {};
     if (this.leftScaleSlot) {
       const scales = this.leftScaleSlot.assignedElements();
       scales.forEach((scale) => {
         const props = {
-          minValue: yMin,
-          maxValue: yMax,
+          ...rangeProps("left", leftRange),
           height: effectiveHeight,
           // Use effective height for proper sizing
           paddingTop: verticalViewBoxPadding.top,
           paddingBottom: verticalViewBoxPadding.bottom,
           paddingStart: verticalViewBoxPadding.top,
           paddingEnd: verticalViewBoxPadding.bottom,
-          showLabels,
+          showLabels: showLabels || compactY,
           fixedAspectRatio: this.fixedAspectRatioScaling,
           // Use chart's scaleReferenceSize property for proportional scaling
           scaleReferenceSize: this.scaleReferenceSize,
@@ -37646,6 +38252,10 @@ const _ObcChartLineBase = class _ObcChartLineBase extends i$4 {
         if (this.yStepSize !== void 0) {
           props.primaryTickmarkInterval = this.yStepSize;
         }
+        const band = bandFor(scale, compactY, compactYThickness);
+        const mainLabels = mainLabelsFor(scale, compactY);
+        if (mainLabels !== void 0) props.showMainTickmarkLabels = mainLabels;
+        if (band !== void 0) props.labelThickness = band;
         updates.push([this.leftScaleSlot, scale, props]);
       });
     }
@@ -37653,15 +38263,14 @@ const _ObcChartLineBase = class _ObcChartLineBase extends i$4 {
       const scales = this.rightScaleSlot.assignedElements();
       scales.forEach((scale) => {
         const props = {
-          minValue: yMin,
-          maxValue: yMax,
+          ...rangeProps("right", rightRange),
           height: effectiveHeight,
           // Use effective height for proper sizing
           paddingTop: verticalViewBoxPadding.top,
           paddingBottom: verticalViewBoxPadding.bottom,
           paddingStart: verticalViewBoxPadding.top,
           paddingEnd: verticalViewBoxPadding.bottom,
-          showLabels,
+          showLabels: showLabels || compactY,
           fixedAspectRatio: this.fixedAspectRatioScaling,
           // Use chart's scaleReferenceSize property for proportional scaling
           scaleReferenceSize: this.scaleReferenceSize,
@@ -37673,6 +38282,10 @@ const _ObcChartLineBase = class _ObcChartLineBase extends i$4 {
         if (this.yStepSize !== void 0) {
           props.primaryTickmarkInterval = this.yStepSize;
         }
+        const band = bandFor(scale, compactY, compactYThickness);
+        const mainLabels = mainLabelsFor(scale, compactY);
+        if (mainLabels !== void 0) props.showMainTickmarkLabels = mainLabels;
+        if (band !== void 0) props.labelThickness = band;
         updates.push([this.rightScaleSlot, scale, props]);
       });
     }
@@ -37680,15 +38293,14 @@ const _ObcChartLineBase = class _ObcChartLineBase extends i$4 {
       const scales = this.topScaleSlot.assignedElements();
       scales.forEach((scale) => {
         const props = {
-          minValue: xMin,
-          maxValue: xMax,
+          ...xRange,
           width: effectiveWidth,
           // Use effective width for proper sizing
           paddingLeft: horizontalViewBoxPadding.left,
           paddingRight: horizontalViewBoxPadding.right,
           paddingStart: horizontalViewBoxPadding.left,
           paddingEnd: horizontalViewBoxPadding.right,
-          showLabels,
+          showLabels: showLabels || compactX,
           fixedAspectRatio: this.fixedAspectRatioScaling,
           // Use chart's scaleReferenceSize property for proportional scaling
           scaleReferenceSize: this.scaleReferenceSize,
@@ -37700,6 +38312,10 @@ const _ObcChartLineBase = class _ObcChartLineBase extends i$4 {
         if (this.xStepSize !== void 0) {
           props.primaryTickmarkInterval = this.xStepSize;
         }
+        const band = bandFor(scale, compactX, compactXThickness);
+        const mainLabels = mainLabelsFor(scale, compactX);
+        if (mainLabels !== void 0) props.showMainTickmarkLabels = mainLabels;
+        if (band !== void 0) props.labelThickness = band;
         updates.push([this.topScaleSlot, scale, props]);
       });
     }
@@ -37707,15 +38323,14 @@ const _ObcChartLineBase = class _ObcChartLineBase extends i$4 {
       const scales = this.bottomScaleSlot.assignedElements();
       scales.forEach((scale) => {
         const props = {
-          minValue: xMin,
-          maxValue: xMax,
+          ...xRange,
           width: effectiveWidth,
           // Use effective width for proper sizing
           paddingLeft: horizontalViewBoxPadding.left,
           paddingRight: horizontalViewBoxPadding.right,
           paddingStart: horizontalViewBoxPadding.left,
           paddingEnd: horizontalViewBoxPadding.right,
-          showLabels,
+          showLabels: showLabels || compactX,
           fixedAspectRatio: this.fixedAspectRatioScaling,
           // Use chart's scaleReferenceSize property for proportional scaling
           scaleReferenceSize: this.scaleReferenceSize,
@@ -37727,6 +38342,10 @@ const _ObcChartLineBase = class _ObcChartLineBase extends i$4 {
         if (this.xStepSize !== void 0) {
           props.primaryTickmarkInterval = this.xStepSize;
         }
+        const band = bandFor(scale, compactX, compactXThickness);
+        const mainLabels = mainLabelsFor(scale, compactX);
+        if (mainLabels !== void 0) props.showMainTickmarkLabels = mainLabels;
+        if (band !== void 0) props.labelThickness = band;
         updates.push([this.bottomScaleSlot, scale, props]);
       });
     }
@@ -37734,6 +38353,34 @@ const _ObcChartLineBase = class _ObcChartLineBase extends i$4 {
       Object.assign(scale, props);
     });
   }
+  /**
+   * Whether the chart's axis range is what a slotted scale on this side should
+   * describe. A subclass that slots a scale of its own and gives it a separate
+   * range returns false for that side, otherwise the sync below overwrites it.
+   */
+  ownsSlottedScaleRange(_side) {
+    return true;
+  }
+  /**
+   * Push the current axis ranges to the slotted scales. The full
+   * `updateScaleProperties()` cascade runs before the chart is (re)built and
+   * so reads the previous chart's ranges; this closes that gap once the new
+   * chart exists, and keeps auto-ranged scales in step with the data.
+   */
+  syncSlottedScaleRanges() {
+    const apply = (side, slot, range) => {
+      if (!slot || !range || !this.ownsSlottedScaleRange(side)) return;
+      slot.assignedElements().forEach((scale) => {
+        scale.minValue = range.min;
+        scale.maxValue = range.max;
+      });
+    };
+    apply("left", this.leftScaleSlot, this.resolveAxisRange("left"));
+    apply("right", this.rightScaleSlot, this.resolveAxisRange("right"));
+    const xRange = this.resolveSlottedXRange();
+    apply("top", this.topScaleSlot, xRange);
+    apply("bottom", this.bottomScaleSlot, xRange);
+  }
   hasAnyChanged(changed, props) {
     return props.some((prop) => changed.has(prop));
   }
@@ -37807,7 +38454,10 @@ const _ObcChartLineBase = class _ObcChartLineBase extends i$4 {
     if (this.hasAnyChanged(changed, LINE_GRAPH_DIMENSION_PROP_NAMES)) {
       if (this.updateComputedDimensions()) return;
     }
-    if (changed.has("hasLabelPadding") && this.hasExternalScales()) {
+    const belowThreshold = this.isBelowThreshold();
+    const crossedThreshold = this.wasBelowThreshold !== void 0 && this.wasBelowThreshold !== belowThreshold;
+    this.wasBelowThreshold = belowThreshold;
+    if ((changed.has("hasLabelPadding") || changed.has("rangeLabels") || crossedThreshold) && this.hasExternalScales()) {
       this.syncScalesAndChart();
       return;
     }
@@ -37862,7 +38512,7 @@ const _ObcChartLineBase = class _ObcChartLineBase extends i$4 {
     if (!this.canvasEl) return;
     this.resizeObserver = observeLabelThreshold(
       this.canvasEl,
-      () => (this.canvasEl?.clientHeight ?? 0) >= RECTANGULAR_CHART_DIMENSIONS.MIN_HEIGHT_WITH_LABELS,
+      () => (this.canvasEl?.clientHeight ?? 0) >= RECTANGULAR_CHART_DIMENSIONS.MIN_HEIGHT_WITH_LABELS && (this.canvasEl?.clientWidth ?? 0) >= RECTANGULAR_CHART_DIMENSIONS.MIN_HEIGHT_WITH_LABELS,
       {
         rebuild: () => {
           this.chart?.destroy();
@@ -37983,6 +38633,7 @@ const _ObcChartLineBase = class _ObcChartLineBase extends i$4 {
     const result = {
       ...existingDataset || {},
       data: existingDataset?.data ?? values,
+      yAxisID: existingDataset?.yAxisID ?? this.primaryYAxisId,
       borderColor,
       backgroundColor,
       borderWidth: existingDataset?.borderWidth ?? 2,
@@ -38029,6 +38680,7 @@ const _ObcChartLineBase = class _ObcChartLineBase extends i$4 {
     const baselineDataset = {
       label: "threshold-baseline",
       data: baselineData,
+      yAxisID: this.primaryYAxisId,
       borderColor: "transparent",
       backgroundColor: "transparent",
       borderWidth: 0,
@@ -38114,6 +38766,36 @@ const _ObcChartLineBase = class _ObcChartLineBase extends i$4 {
     const datasets = fill2 && fillMode === "threshold" ? this.createThresholdDatasets(values, chartColors) : [this.buildDataset(values, 0, chartColors)];
     return { datasets, labels };
   }
+  /**
+   * One padding source for the Chart.js layout and the slotted scales: two
+   * sources painted the canvas over a scale and inset a scale inside a chart.
+   */
+  computeChartPadding() {
+    const isTooSmall = this.isBelowThreshold();
+    const scaleFactor = this.getScaleFactor();
+    const defaultPaddingScaled = !this.hasLabelPadding ? 0 : this.fixedAspectRatioScaling ? Math.round(CHART_DIMENSIONS.CANVAS_PADDING * scaleFactor) : CHART_DIMENSIONS.CANVAS_PADDING;
+    const { y: yTexts, x: xTexts } = this.refreshRangeLabels();
+    const context = this.canvasEl?.getContext("2d");
+    const gutters = (yTexts.length || xTexts.length) && context ? measureRangeLabelGutters(
+      context,
+      this.rangeLabelFont(),
+      yTexts,
+      xTexts
+    ) : { side: 0, bottom: 0 };
+    const scalePadding = this.calculatePaddingFromScales();
+    const freeSide = (side) => {
+      if (!isTooSmall) return defaultPaddingScaled;
+      if (side === "bottom") return gutters.bottom;
+      return side === this.ySide ? gutters.side : 0;
+    };
+    const padding = {
+      top: this.externalScaleDimensions.has("top") ? scalePadding.top : freeSide("top"),
+      right: this.externalScaleDimensions.has("right") ? scalePadding.right : freeSide("right"),
+      bottom: this.externalScaleDimensions.has("bottom") ? scalePadding.bottom : freeSide("bottom"),
+      left: this.externalScaleDimensions.has("left") ? scalePadding.left : freeSide("left")
+    };
+    return padding;
+  }
   /**
    * Get Chart.js options with dynamic sizing and padding
    */
@@ -38121,27 +38803,7 @@ const _ObcChartLineBase = class _ObcChartLineBase extends i$4 {
     const effectiveWidth = this.getEffectiveWidth();
     const effectiveHeight = this.getEffectiveHeight();
     const isTooSmall = effectiveWidth < RECTANGULAR_CHART_DIMENSIONS.MIN_HEIGHT_WITH_LABELS || effectiveHeight < RECTANGULAR_CHART_DIMENSIONS.MIN_HEIGHT_WITH_LABELS;
-    const scaleFactor = this.getScaleFactor();
-    let padding;
-    const defaultPaddingScaled = !this.hasLabelPadding ? 0 : this.fixedAspectRatioScaling ? Math.round(CHART_DIMENSIONS.CANVAS_PADDING * scaleFactor) : CHART_DIMENSIONS.CANVAS_PADDING;
-    if (isTooSmall && this.hasLabelPadding) {
-      padding = { top: 0, right: 0, bottom: 0, left: 0 };
-    } else if (this.hasExternalScales()) {
-      const scalePadding = this.calculatePaddingFromScales();
-      padding = {
-        top: this.externalScaleDimensions.has("top") ? scalePadding.top : defaultPaddingScaled,
-        right: this.externalScaleDimensions.has("right") ? scalePadding.right : defaultPaddingScaled,
-        bottom: this.externalScaleDimensions.has("bottom") ? scalePadding.bottom : defaultPaddingScaled,
-        left: this.externalScaleDimensions.has("left") ? scalePadding.left : defaultPaddingScaled
-      };
-    } else {
-      padding = {
-        top: defaultPaddingScaled,
-        right: defaultPaddingScaled,
-        bottom: defaultPaddingScaled,
-        left: defaultPaddingScaled
-      };
-    }
+    const padding = this.computeChartPadding();
     if (this.fixedAspectRatioScaling) {
       this.style.setProperty("--chart-width", "100%");
       this.style.setProperty("--chart-height", `${effectiveHeight}px`);
@@ -38196,9 +38858,13 @@ const _ObcChartLineBase = class _ObcChartLineBase extends i$4 {
   /**
    * Compute reference timestamp for time axis formatting.
    * Returns earliest timestamp for 'date' mode, latest for 'minutes' mode.
+   * A pinned x range supplies the reference instead, so the axis edge stays
+   * the reference while the data has not reached it yet.
    */
   computeTimeReference() {
     if (this.xAxisType !== "time") return void 0;
+    const pinned = this.timeDisplay === "minutes" ? this.xAxis?.max : this.xAxis?.min;
+    if (pinned !== void 0 && Number.isFinite(pinned)) return pinned;
     const timestamps = [];
     if (this.datasets?.length) {
       this.datasets.forEach((ds) => {
@@ -38271,6 +38937,9 @@ const _ObcChartLineBase = class _ObcChartLineBase extends i$4 {
       // No extra margin
       bounds: "data",
       // Use data bounds for edge-to-edge rendering
+      // A category axis has no numeric range to pin.
+      min: this.isNumericXAxis ? this.xAxis?.min : void 0,
+      max: this.isNumericXAxis ? this.xAxis?.max : void 0,
       grid: {
         display: this.showGrid && this.showGridX,
         color: gridColor,
@@ -38371,10 +39040,14 @@ const _ObcChartLineBase = class _ObcChartLineBase extends i$4 {
       type: "line",
       data: { labels, datasets },
       options: this.getChartOptions(),
-      plugins: this.borderRadiusPosition ? [this.createBorderPlugin()] : []
+      plugins: [
+        ...this.borderRadiusPosition ? [this.createBorderPlugin()] : [],
+        ...this.rangeLabels !== "none" ? [this.createRangeLabelsPlugin()] : []
+      ]
     });
     requestAnimationFrame(() => this.updateLegend());
     this.applyFillModes();
+    this.syncSlottedScaleRanges();
   }
   updateChart() {
     if (!this.chart || !this.canvasEl || !this.canvasEl.isConnected) return;
@@ -38384,6 +39057,7 @@ const _ObcChartLineBase = class _ObcChartLineBase extends i$4 {
     Object.assign(this.chart.options, this.getChartOptions());
     this.applyFillModes();
     this.chart.update();
+    this.syncSlottedScaleRanges();
     requestAnimationFrame(() => this.updateLegend());
   }
   /**
@@ -38509,6 +39183,9 @@ __decorateClass$zY([
 __decorateClass$zY([
   n$3({ type: Array, attribute: false })
 ], ObcChartLineBase.prototype, "yAxes");
+__decorateClass$zY([
+  n$3({ type: Object, attribute: false })
+], ObcChartLineBase.prototype, "xAxis");
 __decorateClass$zY([
   n$3({ type: Boolean })
 ], ObcChartLineBase.prototype, "showGrid");
@@ -38524,6 +39201,9 @@ __decorateClass$zY([
 __decorateClass$zY([
   n$3({ type: Boolean, attribute: false })
 ], ObcChartLineBase.prototype, "hasLabelPadding");
+__decorateClass$zY([
+  n$3({ type: String })
+], ObcChartLineBase.prototype, "rangeLabels");
 __decorateClass$zY([
   n$3({ type: Boolean })
 ], ObcChartLineBase.prototype, "showPoints");
@@ -38869,6 +39549,7 @@ let ObcBarVertical = class extends SetpointMixin(i$4, {
     });
     this.hasScale = true;
     this.showLabels = true;
+    this.showMainTickmarkLabels = false;
     this.hasBar = false;
     this.scaleBackground = false;
     this.barContainerStyle = void 0;
@@ -38913,6 +39594,7 @@ let ObcBarVertical = class extends SetpointMixin(i$4, {
       maxValue: this.maxValue,
       hasScale: this.hasScale,
       labels: this.showLabels,
+      mainTickmarkLabels: this.showMainTickmarkLabels,
       hasBar: this.hasBar,
       scaleBackground: this.scaleBackground,
       barContainerStyle: this.barContainerStyle,
@@ -38990,7 +39672,7 @@ let ObcBarVertical = class extends SetpointMixin(i$4, {
     if (changed.has("scaleReferenceSize") && this.fixedAspectRatio) {
       this._updateScaleFromCurrentSize();
     }
-    const layoutChanged = changed.has("side") || changed.has("showLabels") || changed.has("hasScale") || changed.has("hasBar") || changed.has("barThickness") || changed.has("tickThickness") || changed.has("labelThickness") || changed.has("scaleType") || changed.has("borderRadiusPosition") || changed.has("borderRadius") || changed.has("advices") || changed.has("advicePosition") || this.setpointPresenceChanged(changed);
+    const layoutChanged = changed.has("side") || changed.has("showLabels") || changed.has("showMainTickmarkLabels") || changed.has("hasScale") || changed.has("hasBar") || changed.has("barThickness") || changed.has("tickThickness") || changed.has("labelThickness") || changed.has("scaleType") || changed.has("borderRadiusPosition") || changed.has("borderRadius") || changed.has("advices") || changed.has("advicePosition") || this.setpointPresenceChanged(changed);
     if (!this.fixedAspectRatio || layoutChanged) {
       this.reportDimensions();
     }
@@ -39163,6 +39845,9 @@ __decorateClass$zW([
 __decorateClass$zW([
   n$3({ type: Boolean, attribute: false })
 ], ObcBarVertical.prototype, "showLabels", 2);
+__decorateClass$zW([
+  n$3({ type: Boolean })
+], ObcBarVertical.prototype, "showMainTickmarkLabels", 2);
 __decorateClass$zW([
   n$3({ type: Boolean })
 ], ObcBarVertical.prototype, "hasBar", 2);
@@ -39386,6 +40071,14 @@ let ObcGaugeTrend = class extends SetpointMixin(ObcChartLineBase) {
   shouldStack() {
     return false;
   }
+  /**
+   * The right scale is this component's own bar, ranged by `minValue` /
+   * `maxValue`. `chartMinValue` / `chartMaxValue` exist so the plotted range
+   * can differ from it, so the chart's axis range must not overwrite it.
+   */
+  ownsSlottedScaleRange(side) {
+    return side !== "right";
+  }
   willUpdate(changed) {
     if (changed.has("xAxisType") && this.xAxisType !== this._autoAppliedXAxisType && (this.hasUpdated || this.xAxisType !== XAxisType.category)) {
       this._explicitXAxisType = true;
@@ -50599,6 +51292,7 @@ let ObcReadoutListItem = class extends i$4 {
           .thickness=${thickness}
           .status=${alert.status ?? AlertType.Alarm}
           .mode=${alert.mode ?? ObcAlertFrameMode.ackedActive}
+          .flashingSpeed=${alert.flashingSpeed ?? FlashingSpeed.Default}
           .showIcon=${alert.showIcon ?? false}
           .showAlertCategoryIcon=${alert.showAlertCategoryIcon ?? true}
           .wrapContent=${false}
@@ -55974,6 +56668,7 @@ let ObcReadout = class extends i$4 {
           .thickness=${thickness}
           .status=${alert.status ?? AlertType.Alarm}
           .mode=${alert.mode ?? ObcAlertFrameMode.ackedActive}
+          .flashingSpeed=${alert.flashingSpeed ?? FlashingSpeed.Default}
           .showIcon=${alert.showIcon ?? false}
           .showAlertCategoryIcon=${alert.showAlertCategoryIcon ?? true}
           .wrapContent=${false}
@@ -74925,6 +75620,7 @@ let ObcBarHorizontal = class extends SetpointMixin(i$4, {
     });
     this.hasScale = true;
     this.showLabels = true;
+    this.showMainTickmarkLabels = false;
     this.hasBar = false;
     this.scaleBackground = false;
     this.barContainerStyle = void 0;
@@ -74969,6 +75665,7 @@ let ObcBarHorizontal = class extends SetpointMixin(i$4, {
       maxValue: this.maxValue,
       hasScale: this.hasScale,
       labels: this.showLabels,
+      mainTickmarkLabels: this.showMainTickmarkLabels,
       hasBar: this.hasBar,
       scaleBackground: this.scaleBackground,
       barContainerStyle: this.barContainerStyle,
@@ -75046,7 +75743,7 @@ let ObcBarHorizontal = class extends SetpointMixin(i$4, {
     if (changed.has("scaleReferenceSize") && this.fixedAspectRatio) {
       this._updateScaleFromCurrentSize();
     }
-    const layoutChanged = changed.has("side") || changed.has("showLabels") || changed.has("hasScale") || changed.has("hasBar") || changed.has("barThickness") || changed.has("tickThickness") || changed.has("labelThickness") || changed.has("scaleType") || changed.has("borderRadiusPosition") || changed.has("borderRadius") || changed.has("advices") || changed.has("advicePosition") || this.setpointPresenceChanged(changed);
+    const layoutChanged = changed.has("side") || changed.has("showLabels") || changed.has("showMainTickmarkLabels") || changed.has("hasScale") || changed.has("hasBar") || changed.has("barThickness") || changed.has("tickThickness") || changed.has("labelThickness") || changed.has("scaleType") || changed.has("borderRadiusPosition") || changed.has("borderRadius") || changed.has("advices") || changed.has("advicePosition") || this.setpointPresenceChanged(changed);
     if (!this.fixedAspectRatio || layoutChanged) {
       this.reportDimensions();
     }
@@ -75219,6 +75916,9 @@ __decorateClass$vM([
 __decorateClass$vM([
   n$3({ type: Boolean, attribute: false })
 ], ObcBarHorizontal.prototype, "showLabels", 2);
+__decorateClass$vM([
+  n$3({ type: Boolean })
+], ObcBarHorizontal.prototype, "showMainTickmarkLabels", 2);
 __decorateClass$vM([
   n$3({ type: Boolean })
 ], ObcBarHorizontal.prototype, "hasBar", 2);
@@ -78192,12 +78892,8 @@ const compentStyle$Z = i$7`* {
     }
 
 .trailing-icon {
-  width: var(
-    --app-components-alert-components-general-notification-item-icon-size-large
-  );
-  height: var(
-    --app-components-alert-components-general-notification-item-icon-size-large
-  );
+  width: var(--app-components-message-menu-item-icon-size-large);
+  height: var(--app-components-message-menu-item-icon-size-large);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -80892,42 +81588,34 @@ button {
       width: min-content;
     }
 
-:is(.blinking.alert-type-warning .alert-button,.blinking.alert-type-level-medium .alert-button) .visible-wrapper {
-    opacity: var(--warning-blink-on);
-  }
-
-:is(.blinking.alert-type-warning .alert-button,.blinking.alert-type-level-medium .alert-button) .blink {
-    opacity: var(--warning-blink-off);
-  }
-
-:is(.blinking.alert-type-level-critical .alert-button) .visible-wrapper {
-    opacity: var(--critical-blink-on);
+:is(.flash-fast .alert-button) .visible-wrapper {
+    opacity: var(--flash-fast-on);
   }
 
-:is(.blinking.alert-type-level-critical .alert-button) .blink {
-    opacity: var(--critical-blink-off);
+:is(.flash-fast .alert-button) .blink {
+    opacity: var(--flash-fast-off);
   }
 
-:is(.blinking.alert-type-alarm .alert-button,.blinking.alert-type-level-high .alert-button) .visible-wrapper {
-    opacity: var(--alarm-blink-on);
+:is(.flash-slow .alert-button) .visible-wrapper {
+    opacity: var(--flash-slow-on);
   }
 
-:is(.blinking.alert-type-alarm .alert-button,.blinking.alert-type-level-high .alert-button) .blink {
-    opacity: var(--alarm-blink-off);
+:is(.flash-slow .alert-button) .blink {
+    opacity: var(--flash-slow-off);
   }
 
-:is(.blinking.alert-type-caution .alert-button,.blinking.alert-type-level-low .alert-button) .visible-wrapper {
-    opacity: var(--low-blink-on);
+:is(.flash-very-slow .alert-button) .visible-wrapper {
+    opacity: var(--flash-very-slow-on);
   }
 
-:is(.blinking.alert-type-caution .alert-button,.blinking.alert-type-level-low .alert-button) .blink {
-    opacity: var(--low-blink-off);
+:is(.flash-very-slow .alert-button) .blink {
+    opacity: var(--flash-very-slow-off);
   }
 
 .counter .alert-button .visible-wrapper,
 .counter .alert-button .blink {
   padding: 0px var(--ui-components-button-padding-horizontal);
-  gap: var(--app-components-global-alert-item-counter-spacing);
+  gap: var(--app-components-alert-button-item-counter-spacing);
 }
 
 .alert-type-alarm {
@@ -81495,6 +82183,11 @@ let ObcAlertButton = class extends i$4 {
     this.silenceButtonDisabled = false;
     this.counter = false;
     this.blinking = false;
+    this.flashingSpeed = FlashingSpeed.Default;
+    this.flashing = new FlashingController(
+      this,
+      () => this.resolvedFlashingSpeed
+    );
     this.flatMaxBreakpointPx = 0;
     this.silenceButtonMinBreakpointPx = 0;
     this.width = window.innerWidth;
@@ -81502,16 +82195,22 @@ let ObcAlertButton = class extends i$4 {
       this.width = window.innerWidth;
     };
   }
+  get resolvedFlashingSpeed() {
+    if (!this.blinking || this.nAlerts <= 0 || this.alertType === void 0) {
+      return FlashingSpeed.Fixed;
+    }
+    return resolveFlashingSpeed(
+      this.flashingSpeed,
+      this.alertType,
+      AlertFlashPhase.Active
+    );
+  }
   connectedCallback() {
     super.connectedCallback();
     window.addEventListener("resize", this.resizeListener);
-    if (this.hasUpdated) {
-      this.installBlinking();
-    }
   }
   disconnectedCallback() {
     window.removeEventListener("resize", this.resizeListener);
-    this._blinkAnimationCancel?.();
     super.disconnectedCallback();
   }
   renderAlertTwotoneIcon() {
@@ -81573,17 +82272,11 @@ let ObcAlertButton = class extends i$4 {
   get showSilenceButtonDynamic() {
     return this.showSilenceButton && this.width >= this.silenceButtonMinBreakpointPx && this.activeType !== "flat";
   }
-  installBlinking() {
-    this._blinkAnimationCancel?.();
-    this._blinkAnimationCancel = blinkingAll(this);
-  }
-  updated() {
-    this.installBlinking();
-  }
   render() {
     const hasAlerts = this.nAlerts > 0;
     const showCounter = this.counter && hasAlerts && this.activeType !== "flat";
-    const showBlinking = this.blinking && hasAlerts && this.alertType !== void 0 && supportsBlinking(this.alertType, false);
+    const tempo = this.resolvedFlashingSpeed;
+    const showBlinking = tempo !== FlashingSpeed.Fixed;
     return b`
       <div
         class=${e$1({
@@ -81592,7 +82285,7 @@ let ObcAlertButton = class extends i$4 {
       counter: showCounter,
       "has-silence": this.showSilenceButtonDynamic,
       [`type-${this.activeType}`]: true,
-      blinking: showBlinking,
+      [`flash-${tempo}`]: true,
       large: this.large
     })}
       >
@@ -81650,6 +82343,9 @@ __decorateClass$vq([
 __decorateClass$vq([
   n$3({ type: Boolean })
 ], ObcAlertButton.prototype, "blinking", 2);
+__decorateClass$vq([
+  n$3({ type: String })
+], ObcAlertButton.prototype, "flashingSpeed", 2);
 __decorateClass$vq([
   n$3({ type: Number })
 ], ObcAlertButton.prototype, "flatMaxBreakpointPx", 2);
@@ -82709,6 +83405,21 @@ let ObcAlertIcon = class extends i$4 {
   constructor() {
     super(...arguments);
     this.alertType = AlertType.Alarm;
+    this.flashingSpeed = FlashingSpeed.Default;
+    this.flashing = new FlashingController(
+      this,
+      () => this.resolvedFlashingSpeed
+    );
+  }
+  get resolvedFlashingSpeed() {
+    if (this.acknowledged || !this.icon) {
+      return FlashingSpeed.Fixed;
+    }
+    return resolveFlashingSpeed(
+      this.flashingSpeed,
+      this._effectiveType,
+      this.active === false ? AlertFlashPhase.Rectified : AlertFlashPhase.Active
+    );
   }
   get _effectiveType() {
     if (this.type) {
@@ -82872,19 +83583,11 @@ let ObcAlertIcon = class extends i$4 {
     if (!this._effectiveType) {
       return b`<div>No alarm</div>`;
     }
-    if (supportsBlinking(this._effectiveType, this.acknowledged ?? false)) {
-      const icons = this.icon;
-      if (!icons) {
-        throw new Error("No icon found");
-      }
-      const blinkMode = getAlertBlinkMode(this._effectiveType);
+    const tempo = this.resolvedFlashingSpeed;
+    const icons = this.icon;
+    if (tempo !== FlashingSpeed.Fixed && icons) {
       return b`
-        <div
-          class=${e$1({
-        wrapper: true,
-        [`blink-${blinkMode}`]: true
-      })}
-        >
+        <div class=${e$1({ wrapper: true, [`flash-${tempo}`]: true })}>
           <span class="a">${icons.a}</span>
           <span class="b">${icons.b}</span>
         </div>
@@ -82892,31 +83595,6 @@ let ObcAlertIcon = class extends i$4 {
     }
     return b`<div class="wrapper">${this.renderStaticIcon()}</div>`;
   }
-  syncBlinking() {
-    if (this._blinkAnimationCancel && !supportsBlinking(this._effectiveType, this.acknowledged ?? false)) {
-      this._blinkAnimationCancel();
-      this._blinkAnimationCancel = void 0;
-    }
-    if (!this._blinkAnimationCancel && supportsBlinking(this._effectiveType, this.acknowledged ?? false)) {
-      this._blinkAnimationCancel = blinkingAll(this);
-    }
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    if (this.hasUpdated) {
-      this.syncBlinking();
-    }
-  }
-  updated() {
-    this.syncBlinking();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this._blinkAnimationCancel) {
-      this._blinkAnimationCancel();
-      this._blinkAnimationCancel = void 0;
-    }
-  }
 };
 ObcAlertIcon.styles = i$7`
     .wrapper {
@@ -82943,36 +83621,28 @@ ObcAlertIcon.styles = i$7`
         top: 0;
         left: 0;
       }
-      &.blink-alarm .a {
-        opacity: var(--alarm-blink-on);
+      &.flash-fast .a {
+        opacity: var(--flash-fast-on);
       }
 
-      &.blink-alarm .b {
-        opacity: var(--alarm-blink-off);
+      &.flash-fast .b {
+        opacity: var(--flash-fast-off);
       }
 
-      &.blink-critical .a {
-        opacity: var(--critical-blink-on);
+      &.flash-slow .a {
+        opacity: var(--flash-slow-on);
       }
 
-      &.blink-critical .b {
-        opacity: var(--critical-blink-off);
+      &.flash-slow .b {
+        opacity: var(--flash-slow-off);
       }
 
-      &.blink-warning .a {
-        opacity: var(--warning-blink-on);
+      &.flash-very-slow .a {
+        opacity: var(--flash-very-slow-on);
       }
 
-      &.blink-warning .b {
-        opacity: var(--warning-blink-off);
-      }
-
-      &.blink-low .a {
-        opacity: var(--low-blink-on);
-      }
-
-      &.blink-low .b {
-        opacity: var(--low-blink-off);
+      &.flash-very-slow .b {
+        opacity: var(--flash-very-slow-off);
       }
     }
   `;
@@ -82991,6 +83661,9 @@ __decorateClass$va([
 __decorateClass$va([
   n$3({ type: Boolean })
 ], ObcAlertIcon.prototype, "silenced", 2);
+__decorateClass$va([
+  n$3({ type: String })
+], ObcAlertIcon.prototype, "flashingSpeed", 2);
 ObcAlertIcon = __decorateClass$va([
   customElement("obc-alert-icon")
 ], ObcAlertIcon);
@@ -86114,10 +86787,7 @@ const compentStyle$S = i$7`* {
 
 :host {
   --action-width: 82px;
-  --trailing-icon-size: var(
-    --app-components-alert-components-general-notification-item-icon-size-large,
-    32px
-  );
+  --trailing-icon-size: var(--app-components-message-menu-item-icon-size-large);
   display: block;
 }
 
@@ -94554,8 +95224,6 @@ const componentStyle$Q = i$7`* {
     width: 100%;
     max-width: var(--menu-navigation-components-date-item-touch-target);
     height: var(--menu-navigation-components-date-item-touch-target);
-    padding: var(--menu-navigation-components-date-item-padding-vertical)
-      var(--menu-navigation-components-date-item-padding-horizontal);
 
     /* Keyboard press visual feedback */
 }
@@ -94925,7 +95593,9 @@ const componentStyle$Q = i$7`* {
   display: flex;
   width: var(--menu-navigation-components-date-item-touch-target, 48px);
   height: var(--menu-navigation-components-date-item-touch-target, 48px);
-  padding: var(--menu-navigation-components-date-item-padding-vertical, 8px)
+  /* TODO(designer): Figma pads this frame with Date item/padding-bottom, 12 and 16px in
+     large and xl, less room than the date container needs; 8px fits every size (#929) */
+  padding: 8px
     var(--menu-navigation-components-date-item-padding-horizontal, 8px);
   flex-direction: column;
   justify-content: center;
@@ -103698,8 +104368,8 @@ obc-input::part(input) {
 .key-button {
   display: flex;
   flex: 1 0 0;
-  min-width: var(--ui-components-keyboard-numeric-touch-target-size);
-  min-height: var(--ui-components-keyboard-numeric-button-size-min);
+  min-width: var(--ui-components-keyboard-button-size-min);
+  min-height: var(--ui-components-keyboard-button-size-min);
 }
 
 obc-button.key-button::part(wrapper) {
@@ -103710,8 +104380,8 @@ obc-button.key-button::part(visible-wrapper) {
   box-sizing: border-box;
   display: flex;
   width: 100%;
-  min-width: var(--ui-components-keyboard-numeric-touch-target-size);
-  min-height: var(--ui-components-keyboard-numeric-button-size-min);
+  min-width: var(--ui-components-keyboard-button-size-min);
+  min-height: var(--ui-components-keyboard-button-size-min);
   align-items: center;
   justify-content: center;
   align-self: stretch;
@@ -113360,7 +114030,7 @@ const style$1 = i$7`* {
   align-items: center;
   padding: 5px;
   border: 1px solid var(--border-outline-color);
-  background-color: var(--enabled-background-color);
+  background-color: var(--container-global-color);
 }
 
 .sequence-toolbar.type-sequential,.sequence-toolbar.type-unordered {
@@ -113376,7 +114046,6 @@ const style$1 = i$7`* {
 
 .sequence-toolbar.type-condensed {
     border-radius: 100px;
-    background-color: var(--normal-enabled-background-color);
   }
 
 .sequence-toolbar.type-condensed .condensed-label__current {
@@ -229725,7 +230394,7 @@ const compentStyle$6 = i$7`* {
     "liga" off,
     "clig" off,
     "ss04" on;
-      width: var(--obc-instrument-field-tag-width);
+      width: var(--obc-instrument-field-tag-width, auto);
     }
 
 :is(.wrapper .label) .unit {
@@ -229767,7 +230436,7 @@ const compentStyle$6 = i$7`* {
     "ss04" on;
     color: var(--element-neutral-color);
     justify-content: end;
-    width: var(--obc-instrument-field-source-width);
+    width: var(--obc-instrument-field-source-width, auto);
     box-sizing: content-box;
   }
 
@@ -240247,6 +240916,7 @@ export {
   AlertCategory,
   AlertType,
   Direction$1 as Direction,
+  FlashingSpeed,
   comparePriorityAlerts,
   formatTimeSince,
   isAcknowledged,