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

package/custom-elements.json

@@ -4183,7 +4183,7 @@
         {
           "kind": "variable",
           "name": "ObcBarHorizontal",
-          "default": "class extends SetpointMixin(LitElement, { defaultDeadband: 1 }) { constructor() { super(...arguments); this.minValue = 0; this.maxValue = 100; this.width = 320; this.paddingLeft = CHART_DIMENSIONS.CANVAS_PADDING; this.paddingRight = CHART_DIMENSIONS.CANVAS_PADDING; this.side = ExternalScaleSide.bottom; this.fixedAspectRatio = false; this.scaleReferenceSize = 384; this._scale = 1; this._resizeController = new ResizeController(this, { callback: (entries) => { if (!this.fixedAspectRatio) return; const entry = entries[0]; if (!entry) return; const containerMainAxisSize = entry.contentRect.width; this._scale = computeFixedAspectRatioScale({ orientation: ExternalScaleOrientation.horizontal, containerMainAxisSize, scaleReferenceSize: this.scaleReferenceSize }); this.reportDimensions(); } }); this.hasScale = true; this.showLabels = true; this.hasBar = false; this.scaleBackground = false; this.barContainerStyle = void 0; this.barThickness = 24; this.tickThickness = 24; this.labelThickness = 60; this.mainTickmarks = []; this.primaryTickmarkInterval = void 0; this.secondaryTickmarkInterval = void 0; this.tertiaryTickmarkInterval = void 0; this.scaleType = ScaleType.regular; this.frameStyle = FrameStyle.regular; this.borderRadiusPosition = void 0; this.instrumentMode = false; this.borderRadius = void 0; this._borderRadiusResizeController = new ResizeController(this, { callback: () => { if (!this.instrumentMode) { this._refreshBorderRadiusFromCssVar(); } } }); this.priority = Priority.regular; this.fillMode = FillMode.fill; this.fillMin = void 0; this.fillMax = void 0; this.value = void 0; this.state = InstrumentState.active; this.advicePosition = AdvicePosition.inner; this.advices = []; this.highlightCurrentValue = false; } render() { const effectiveLength = this.fixedAspectRatio ? this.scaleReferenceSize : this.width; const config = { orientation: ExternalScaleOrientation.horizontal, side: this.side, length: effectiveLength, paddingStart: this.paddingLeft, paddingEnd: this.paddingRight, minValue: this.minValue, maxValue: this.maxValue, hasScale: this.hasScale, labels: this.showLabels, hasBar: this.hasBar, scaleBackground: this.scaleBackground, barContainerStyle: this.barContainerStyle, barThickness: this.barThickness, tickThickness: this.tickThickness, labelThickness: this.labelThickness, borderRadius: this._getEffectiveBorderRadius(), mainTickmarks: this.mainTickmarks, primaryTickmarkInterval: this.primaryTickmarkInterval, secondaryTickmarkInterval: this.secondaryTickmarkInterval, tertiaryTickmarkInterval: this.tertiaryTickmarkInterval, scaleType: this.scaleType, frameStyle: this.frameStyle, borderRadiusPosition: this.borderRadiusPosition, priority: this.priority, setpointOverride: this.setpointOverride, fillMode: this.fillMode, fillMin: this.fillMin, fillMax: this.fillMax, value: this.value, setpoint: this.setpoint, newSetpoint: this.newSetpoint, atSetpoint: this.atSetpoint, autoAtSetpoint: this.autoAtSetpoint, autoAtSetpointDeadband: this.autoAtSetpointDeadband, setpointAtZeroDeadband: this.setpointAtZeroDeadband, animateSetpoint: this.animateSetpoint, departingNewSetpoint: this.departingNewSetpoint, state: this.state, touching: this.touching, advicePosition: this.advicePosition, advices: this.advices, fixedAspectRatio: this.fixedAspectRatio, instrumentMode: this.instrumentMode, highlightCurrentValue: this.highlightCurrentValue }; const layout = computeExternalScaleLayout( toExternalScaleLayoutConfig(config) ); const parts = renderExternalScale(config); const viewBox = computeExternalScaleViewBox( { orientation: config.orientation, length: effectiveLength }, layout ); const preserveAspectRatio = this.fixedAspectRatio ? \"xMidYMid meet\" : \"none\"; return html` <svg width=${this.fixedAspectRatio ? \"100%\" : `${this.width}px`} height=${this.fixedAspectRatio ? \"100%\" : `${viewBox.height}px`} viewBox=\"${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}\" preserveAspectRatio=\"${preserveAspectRatio}\" style=\"--scale: ${this.fixedAspectRatio ? this._scale : 1};\" part=\"svg\" > ${parts.barContainer} ${parts.barFill} ${parts.scaleBackground} ${parts.tickmarks} ${parts.labels} ${parts.adviceOverlays} ${parts.currentValueDot} ${parts.setpoint} </svg> `; } updated(changed) { super.updated(changed); if (changed.has(\"scaleType\")) { this._refreshBorderRadiusFromCssVar(); } if (changed.has(\"fixedAspectRatio\")) { if (this.fixedAspectRatio) { this._applyFixedAspectRatioStyles(); this._updateScaleFromCurrentSize(); } else { this._removeFixedAspectRatioStyles(); this._scale = 1; } } 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); if (!this.fixedAspectRatio || layoutChanged) { this.reportDimensions(); } } /** * Report scale dimensions to parent chart component. * When fixedAspectRatio=true, reports the actual visual (scaled) thickness * so the chart can correctly reserve space for the scale. * When fixedAspectRatio=false, reports the base/unscaled thickness. */ reportDimensions() { const effectiveBarThickness = computeExternalScaleEffectiveBarThickness({ hasBar: this.hasBar, barThickness: this.barThickness, borderRadius: this._getEffectiveBorderRadius(), scaleType: this.scaleType }); const effectiveLength = this.fixedAspectRatio ? this.scaleReferenceSize : this.width; const baseDimensions = computeScaleDimensionsForReport({ orientation: ExternalScaleOrientation.horizontal, side: this.side, hasBar: this.hasBar, hasScale: this.hasScale, labels: this.showLabels, barThickness: effectiveBarThickness, tickThickness: this.tickThickness, labelThickness: this.labelThickness, length: effectiveLength, scaleType: this.scaleType, advicePosition: this.advicePosition, hasAdvice: !!this.advices && this.advices.length > 0, hasSetpoint: this.setpoint !== void 0 || this.newSetpoint !== void 0 || this.departingNewSetpoint !== void 0 }); const dimensions = this.fixedAspectRatio ? { ...baseDimensions, thickness: Math.round(baseDimensions.thickness * this._scale) } : baseDimensions; this.dispatchEvent( new CustomEvent(\"scale-dimensions-changed\", { detail: dimensions, bubbles: true, composed: true }) ); } createRenderRoot() { return this; } connectedCallback() { super.connectedCallback(); if (!this.instrumentMode) { this._refreshBorderRadiusFromCssVar(); this._startBorderRadiusObserver(); } if (this.fixedAspectRatio) { this._applyFixedAspectRatioStyles(); } } disconnectedCallback() { this._borderRadiusObserver?.disconnect(); this._borderRadiusObserver = void 0; super.disconnectedCallback(); } _startBorderRadiusObserver() { this._borderRadiusObserver?.disconnect(); this._borderRadiusObserver = startExternalScaleBorderRadiusObserver( this, () => this._refreshBorderRadiusFromCssVar() ); } /** * Apply CSS styles needed for fixedAspectRatio mode. * Custom elements are display:inline by default, which doesn't work with percentage-based sizing. * We need display:block and width:100% to fill the slot container. */ _applyFixedAspectRatioStyles() { this.style.display = \"block\"; this.style.width = \"100%\"; this.style.height = \"auto\"; } /** * Remove fixed aspect ratio styles when switching back to pixel mode. */ _removeFixedAspectRatioStyles() { this.style.display = \"\"; this.style.width = \"\"; this.style.height = \"\"; } /** * Calculate scale based on current element size. * Called when fixedAspectRatio is enabled or scaleReferenceSize changes. */ _updateScaleFromCurrentSize() { requestAnimationFrame(() => { const containerWidth = this.clientWidth; if (containerWidth > 0) { this._scale = computeFixedAspectRatioScale({ orientation: ExternalScaleOrientation.horizontal, containerMainAxisSize: containerWidth, scaleReferenceSize: this.scaleReferenceSize }); this.requestUpdate(); this.reportDimensions(); } }); } _refreshBorderRadiusFromCssVar() { if (this.instrumentMode) return; const next = readExternalScaleBorderRadiusPx(this, this.scaleType); if (this._computedBorderRadius !== next) { this._computedBorderRadius = next; } if (this.fixedAspectRatio) { const rect = this.getBoundingClientRect(); if (rect.width > 0) { this._scale = computeFixedAspectRatioScale({ orientation: ExternalScaleOrientation.horizontal, containerMainAxisSize: rect.width, scaleReferenceSize: this.scaleReferenceSize }); this.reportDimensions(); } } } /** * Get the effective border radius to use. * In instrument mode: use explicit borderRadius prop or default based on scaleType. * In normal mode: use CSS variable computed value. */ _getEffectiveBorderRadius() { if (this.instrumentMode) { if (this.borderRadius !== void 0) { return this.borderRadius; } return this.scaleType === ScaleType.condensed ? 4 : 8; } return this._computedBorderRadius ?? (this.scaleType === ScaleType.condensed ? 4 : 8); } }"
+          "default": "class extends SetpointMixin(LitElement, { defaultDeadband: 1 }) { constructor() { super(...arguments); this.minValue = 0; this.maxValue = 100; this.width = 320; this.paddingLeft = CHART_DIMENSIONS.CANVAS_PADDING; this.paddingRight = CHART_DIMENSIONS.CANVAS_PADDING; this.side = ExternalScaleSide.bottom; this.fixedAspectRatio = false; this.scaleReferenceSize = 384; this._scale = 1; this._resizeController = new ResizeController(this, { callback: (entries) => { if (!this.fixedAspectRatio) return; const entry = entries[0]; if (!entry) return; const containerMainAxisSize = entry.contentRect.width; this._scale = computeFixedAspectRatioScale({ orientation: ExternalScaleOrientation.horizontal, containerMainAxisSize, scaleReferenceSize: this.scaleReferenceSize }); this.reportDimensions(); } }); this.hasScale = true; this.showLabels = true; this.showMainTickmarkLabels = false; this.hasBar = false; this.scaleBackground = false; this.barContainerStyle = void 0; this.barThickness = 24; this.tickThickness = 24; this.labelThickness = 60; this.mainTickmarks = []; this.primaryTickmarkInterval = void 0; this.secondaryTickmarkInterval = void 0; this.tertiaryTickmarkInterval = void 0; this.scaleType = ScaleType.regular; this.frameStyle = FrameStyle.regular; this.borderRadiusPosition = void 0; this.instrumentMode = false; this.borderRadius = void 0; this._borderRadiusResizeController = new ResizeController(this, { callback: () => { if (!this.instrumentMode) { this._refreshBorderRadiusFromCssVar(); } } }); this.priority = Priority.regular; this.fillMode = FillMode.fill; this.fillMin = void 0; this.fillMax = void 0; this.value = void 0; this.state = InstrumentState.active; this.advicePosition = AdvicePosition.inner; this.advices = []; this.highlightCurrentValue = false; } render() { const effectiveLength = this.fixedAspectRatio ? this.scaleReferenceSize : this.width; const config = { orientation: ExternalScaleOrientation.horizontal, side: this.side, length: effectiveLength, paddingStart: this.paddingLeft, paddingEnd: this.paddingRight, minValue: this.minValue, maxValue: this.maxValue, hasScale: this.hasScale, labels: this.showLabels, mainTickmarkLabels: this.showMainTickmarkLabels, hasBar: this.hasBar, scaleBackground: this.scaleBackground, barContainerStyle: this.barContainerStyle, barThickness: this.barThickness, tickThickness: this.tickThickness, labelThickness: this.labelThickness, borderRadius: this._getEffectiveBorderRadius(), mainTickmarks: this.mainTickmarks, primaryTickmarkInterval: this.primaryTickmarkInterval, secondaryTickmarkInterval: this.secondaryTickmarkInterval, tertiaryTickmarkInterval: this.tertiaryTickmarkInterval, scaleType: this.scaleType, frameStyle: this.frameStyle, borderRadiusPosition: this.borderRadiusPosition, priority: this.priority, setpointOverride: this.setpointOverride, fillMode: this.fillMode, fillMin: this.fillMin, fillMax: this.fillMax, value: this.value, setpoint: this.setpoint, newSetpoint: this.newSetpoint, atSetpoint: this.atSetpoint, autoAtSetpoint: this.autoAtSetpoint, autoAtSetpointDeadband: this.autoAtSetpointDeadband, setpointAtZeroDeadband: this.setpointAtZeroDeadband, animateSetpoint: this.animateSetpoint, departingNewSetpoint: this.departingNewSetpoint, state: this.state, touching: this.touching, advicePosition: this.advicePosition, advices: this.advices, fixedAspectRatio: this.fixedAspectRatio, instrumentMode: this.instrumentMode, highlightCurrentValue: this.highlightCurrentValue }; const layout = computeExternalScaleLayout( toExternalScaleLayoutConfig(config) ); const parts = renderExternalScale(config); const viewBox = computeExternalScaleViewBox( { orientation: config.orientation, length: effectiveLength }, layout ); const preserveAspectRatio = this.fixedAspectRatio ? \"xMidYMid meet\" : \"none\"; return html` <svg width=${this.fixedAspectRatio ? \"100%\" : `${this.width}px`} height=${this.fixedAspectRatio ? \"100%\" : `${viewBox.height}px`} viewBox=\"${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}\" preserveAspectRatio=\"${preserveAspectRatio}\" style=\"--scale: ${this.fixedAspectRatio ? this._scale : 1};\" part=\"svg\" > ${parts.barContainer} ${parts.barFill} ${parts.scaleBackground} ${parts.tickmarks} ${parts.labels} ${parts.adviceOverlays} ${parts.currentValueDot} ${parts.setpoint} </svg> `; } updated(changed) { super.updated(changed); if (changed.has(\"scaleType\")) { this._refreshBorderRadiusFromCssVar(); } if (changed.has(\"fixedAspectRatio\")) { if (this.fixedAspectRatio) { this._applyFixedAspectRatioStyles(); this._updateScaleFromCurrentSize(); } else { this._removeFixedAspectRatioStyles(); this._scale = 1; } } if (changed.has(\"scaleReferenceSize\") && this.fixedAspectRatio) { this._updateScaleFromCurrentSize(); } 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(); } } /** * Report scale dimensions to parent chart component. * When fixedAspectRatio=true, reports the actual visual (scaled) thickness * so the chart can correctly reserve space for the scale. * When fixedAspectRatio=false, reports the base/unscaled thickness. */ reportDimensions() { const effectiveBarThickness = computeExternalScaleEffectiveBarThickness({ hasBar: this.hasBar, barThickness: this.barThickness, borderRadius: this._getEffectiveBorderRadius(), scaleType: this.scaleType }); const effectiveLength = this.fixedAspectRatio ? this.scaleReferenceSize : this.width; const baseDimensions = computeScaleDimensionsForReport({ orientation: ExternalScaleOrientation.horizontal, side: this.side, hasBar: this.hasBar, hasScale: this.hasScale, labels: this.showLabels, barThickness: effectiveBarThickness, tickThickness: this.tickThickness, labelThickness: this.labelThickness, length: effectiveLength, scaleType: this.scaleType, advicePosition: this.advicePosition, hasAdvice: !!this.advices && this.advices.length > 0, hasSetpoint: this.setpoint !== void 0 || this.newSetpoint !== void 0 || this.departingNewSetpoint !== void 0 }); const dimensions = this.fixedAspectRatio ? { ...baseDimensions, thickness: Math.round(baseDimensions.thickness * this._scale) } : baseDimensions; this.dispatchEvent( new CustomEvent(\"scale-dimensions-changed\", { detail: dimensions, bubbles: true, composed: true }) ); } createRenderRoot() { return this; } connectedCallback() { super.connectedCallback(); if (!this.instrumentMode) { this._refreshBorderRadiusFromCssVar(); this._startBorderRadiusObserver(); } if (this.fixedAspectRatio) { this._applyFixedAspectRatioStyles(); } } disconnectedCallback() { this._borderRadiusObserver?.disconnect(); this._borderRadiusObserver = void 0; super.disconnectedCallback(); } _startBorderRadiusObserver() { this._borderRadiusObserver?.disconnect(); this._borderRadiusObserver = startExternalScaleBorderRadiusObserver( this, () => this._refreshBorderRadiusFromCssVar() ); } /** * Apply CSS styles needed for fixedAspectRatio mode. * Custom elements are display:inline by default, which doesn't work with percentage-based sizing. * We need display:block and width:100% to fill the slot container. */ _applyFixedAspectRatioStyles() { this.style.display = \"block\"; this.style.width = \"100%\"; this.style.height = \"auto\"; } /** * Remove fixed aspect ratio styles when switching back to pixel mode. */ _removeFixedAspectRatioStyles() { this.style.display = \"\"; this.style.width = \"\"; this.style.height = \"\"; } /** * Calculate scale based on current element size. * Called when fixedAspectRatio is enabled or scaleReferenceSize changes. */ _updateScaleFromCurrentSize() { requestAnimationFrame(() => { const containerWidth = this.clientWidth; if (containerWidth > 0) { this._scale = computeFixedAspectRatioScale({ orientation: ExternalScaleOrientation.horizontal, containerMainAxisSize: containerWidth, scaleReferenceSize: this.scaleReferenceSize }); this.requestUpdate(); this.reportDimensions(); } }); } _refreshBorderRadiusFromCssVar() { if (this.instrumentMode) return; const next = readExternalScaleBorderRadiusPx(this, this.scaleType); if (this._computedBorderRadius !== next) { this._computedBorderRadius = next; } if (this.fixedAspectRatio) { const rect = this.getBoundingClientRect(); if (rect.width > 0) { this._scale = computeFixedAspectRatioScale({ orientation: ExternalScaleOrientation.horizontal, containerMainAxisSize: rect.width, scaleReferenceSize: this.scaleReferenceSize }); this.reportDimensions(); } } } /** * Get the effective border radius to use. * In instrument mode: use explicit borderRadius prop or default based on scaleType. * In normal mode: use CSS variable computed value. */ _getEffectiveBorderRadius() { if (this.instrumentMode) { if (this.borderRadius !== void 0) { return this.borderRadius; } return this.scaleType === ScaleType.condensed ? 4 : 8; } return this._computedBorderRadius ?? (this.scaleType === ScaleType.condensed ? 4 : 8); } }"
         }
       ],
       "exports": [
@@ -4276,7 +4276,7 @@
         {
           "kind": "variable",
           "name": "ObcBarVertical",
-          "default": "class extends SetpointMixin(LitElement, { defaultDeadband: 1 }) { constructor() { super(...arguments); this.minValue = 0; this.maxValue = 100; this.height = 320; this.paddingTop = CHART_DIMENSIONS.CANVAS_PADDING; this.paddingBottom = CHART_DIMENSIONS.CANVAS_PADDING; this.side = ExternalScaleSide.right; this.fixedAspectRatio = false; this.scaleReferenceSize = 384; this._scale = 1; this._resizeController = new ResizeController(this, { callback: (entries) => { if (!this.fixedAspectRatio) return; const entry = entries[0]; if (!entry) return; const containerMainAxisSize = entry.contentRect.height; this._scale = computeFixedAspectRatioScale({ orientation: ExternalScaleOrientation.vertical, containerMainAxisSize, scaleReferenceSize: this.scaleReferenceSize }); this.reportDimensions(); } }); this.hasScale = true; this.showLabels = true; this.hasBar = false; this.scaleBackground = false; this.barContainerStyle = void 0; this.barThickness = 24; this.tickThickness = 24; this.labelThickness = 60; this.mainTickmarks = []; this.primaryTickmarkInterval = void 0; this.secondaryTickmarkInterval = void 0; this.tertiaryTickmarkInterval = void 0; this.scaleType = ScaleType.regular; this.frameStyle = FrameStyle.regular; this.borderRadiusPosition = void 0; this.instrumentMode = false; this.borderRadius = void 0; this._borderRadiusResizeController = new ResizeController(this, { callback: () => { if (!this.instrumentMode) { this._refreshBorderRadiusFromCssVar(); } } }); this.priority = Priority.regular; this.fillMode = FillMode.fill; this.fillMin = void 0; this.fillMax = void 0; this.value = void 0; this.state = InstrumentState.active; this.advicePosition = AdvicePosition.inner; this.advices = []; this.highlightCurrentValue = false; } render() { const effectiveLength = this.fixedAspectRatio ? this.scaleReferenceSize : this.height; const config = { orientation: ExternalScaleOrientation.vertical, side: this.side, length: effectiveLength, paddingStart: this.paddingTop, paddingEnd: this.paddingBottom, minValue: this.minValue, maxValue: this.maxValue, hasScale: this.hasScale, labels: this.showLabels, hasBar: this.hasBar, scaleBackground: this.scaleBackground, barContainerStyle: this.barContainerStyle, barThickness: this.barThickness, tickThickness: this.tickThickness, labelThickness: this.labelThickness, borderRadius: this._getEffectiveBorderRadius(), mainTickmarks: this.mainTickmarks, primaryTickmarkInterval: this.primaryTickmarkInterval, secondaryTickmarkInterval: this.secondaryTickmarkInterval, tertiaryTickmarkInterval: this.tertiaryTickmarkInterval, scaleType: this.scaleType, frameStyle: this.frameStyle, borderRadiusPosition: this.borderRadiusPosition, priority: this.priority, setpointOverride: this.setpointOverride, fillMode: this.fillMode, fillMin: this.fillMin, fillMax: this.fillMax, value: this.value, setpoint: this.setpoint, newSetpoint: this.newSetpoint, atSetpoint: this.atSetpoint, autoAtSetpoint: this.autoAtSetpoint, autoAtSetpointDeadband: this.autoAtSetpointDeadband, setpointAtZeroDeadband: this.setpointAtZeroDeadband, animateSetpoint: this.animateSetpoint, departingNewSetpoint: this.departingNewSetpoint, state: this.state, touching: this.touching, advicePosition: this.advicePosition, advices: this.advices, fixedAspectRatio: this.fixedAspectRatio, instrumentMode: this.instrumentMode, highlightCurrentValue: this.highlightCurrentValue }; const layout = computeExternalScaleLayout( toExternalScaleLayoutConfig(config) ); const parts = renderExternalScale(config); const viewBox = computeExternalScaleViewBox( { orientation: config.orientation, length: effectiveLength }, layout ); const preserveAspectRatio = this.fixedAspectRatio ? \"xMidYMid meet\" : \"none\"; return html` <svg width=${this.fixedAspectRatio ? \"100%\" : `${viewBox.width}px`} height=${this.fixedAspectRatio ? \"100%\" : `${this.height}px`} viewBox=\"${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}\" preserveAspectRatio=\"${preserveAspectRatio}\" style=\"--scale: ${this.fixedAspectRatio ? this._scale : 1};\" part=\"svg\" > ${parts.barContainer} ${parts.barFill} ${parts.scaleBackground} ${parts.tickmarks} ${parts.labels} ${parts.adviceOverlays} ${parts.currentValueDot} ${parts.setpoint} </svg> `; } updated(changed) { super.updated(changed); if (changed.has(\"scaleType\")) { this._refreshBorderRadiusFromCssVar(); } if (changed.has(\"fixedAspectRatio\")) { if (this.fixedAspectRatio) { this._applyFixedAspectRatioStyles(); this._updateScaleFromCurrentSize(); } else { this._removeFixedAspectRatioStyles(); this._scale = 1; } } 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); if (!this.fixedAspectRatio || layoutChanged) { this.reportDimensions(); } } /** * Report scale dimensions to parent chart component. * When fixedAspectRatio=true, reports the actual visual (scaled) thickness * so the chart can correctly reserve space for the scale. * When fixedAspectRatio=false, reports the base/unscaled thickness. */ reportDimensions() { const effectiveBarThickness = computeExternalScaleEffectiveBarThickness({ hasBar: this.hasBar, barThickness: this.barThickness, borderRadius: this._getEffectiveBorderRadius(), scaleType: this.scaleType }); const effectiveLength = this.fixedAspectRatio ? this.scaleReferenceSize : this.height; const baseDimensions = computeScaleDimensionsForReport({ orientation: ExternalScaleOrientation.vertical, side: this.side, hasBar: this.hasBar, hasScale: this.hasScale, labels: this.showLabels, barThickness: effectiveBarThickness, tickThickness: this.tickThickness, labelThickness: this.labelThickness, length: effectiveLength, scaleType: this.scaleType, advicePosition: this.advicePosition, hasAdvice: !!this.advices && this.advices.length > 0, hasSetpoint: this.setpoint !== void 0 || this.newSetpoint !== void 0 || this.departingNewSetpoint !== void 0 }); const dimensions = this.fixedAspectRatio ? { ...baseDimensions, thickness: Math.round(baseDimensions.thickness * this._scale) } : baseDimensions; this.dispatchEvent( new CustomEvent(\"scale-dimensions-changed\", { detail: dimensions, bubbles: true, composed: true }) ); } createRenderRoot() { return this; } connectedCallback() { super.connectedCallback(); if (!this.instrumentMode) { this._refreshBorderRadiusFromCssVar(); this._startBorderRadiusObserver(); } if (this.fixedAspectRatio) { this._applyFixedAspectRatioStyles(); } } disconnectedCallback() { this._borderRadiusObserver?.disconnect(); this._borderRadiusObserver = void 0; super.disconnectedCallback(); } _startBorderRadiusObserver() { this._borderRadiusObserver?.disconnect(); this._borderRadiusObserver = startExternalScaleBorderRadiusObserver( this, () => this._refreshBorderRadiusFromCssVar() ); } /** * Apply CSS styles needed for fixedAspectRatio mode. * Custom elements are display:inline by default, which doesn't work with percentage-based sizing. * We need display:block and height:100% to fill the slot container. */ _applyFixedAspectRatioStyles() { this.style.display = \"block\"; this.style.height = \"100%\"; this.style.width = \"auto\"; } /** * Remove fixed aspect ratio styles when switching back to pixel mode. */ _removeFixedAspectRatioStyles() { this.style.display = \"\"; this.style.height = \"\"; this.style.width = \"\"; } /** * Calculate scale based on current element size. * Called when fixedAspectRatio is enabled or scaleReferenceSize changes. */ _updateScaleFromCurrentSize() { requestAnimationFrame(() => { const containerHeight = this.clientHeight; if (containerHeight > 0) { this._scale = computeFixedAspectRatioScale({ orientation: ExternalScaleOrientation.vertical, containerMainAxisSize: containerHeight, scaleReferenceSize: this.scaleReferenceSize }); this.requestUpdate(); this.reportDimensions(); } }); } _refreshBorderRadiusFromCssVar() { if (this.instrumentMode) return; const next = readExternalScaleBorderRadiusPx(this, this.scaleType); if (this._computedBorderRadius !== next) { this._computedBorderRadius = next; } if (this.fixedAspectRatio) { const rect = this.getBoundingClientRect(); if (rect.height > 0) { this._scale = computeFixedAspectRatioScale({ orientation: ExternalScaleOrientation.vertical, containerMainAxisSize: rect.height, scaleReferenceSize: this.scaleReferenceSize }); this.reportDimensions(); } } } /** * Get the effective border radius to use. * In instrument mode: use explicit borderRadius prop or default based on scaleType. * In normal mode: use CSS variable computed value. */ _getEffectiveBorderRadius() { if (this.instrumentMode) { if (this.borderRadius !== void 0) { return this.borderRadius; } return this.scaleType === ScaleType.condensed ? 4 : 8; } return this._computedBorderRadius ?? (this.scaleType === ScaleType.condensed ? 4 : 8); } }"
+          "default": "class extends SetpointMixin(LitElement, { defaultDeadband: 1 }) { constructor() { super(...arguments); this.minValue = 0; this.maxValue = 100; this.height = 320; this.paddingTop = CHART_DIMENSIONS.CANVAS_PADDING; this.paddingBottom = CHART_DIMENSIONS.CANVAS_PADDING; this.side = ExternalScaleSide.right; this.fixedAspectRatio = false; this.scaleReferenceSize = 384; this._scale = 1; this._resizeController = new ResizeController(this, { callback: (entries) => { if (!this.fixedAspectRatio) return; const entry = entries[0]; if (!entry) return; const containerMainAxisSize = entry.contentRect.height; this._scale = computeFixedAspectRatioScale({ orientation: ExternalScaleOrientation.vertical, containerMainAxisSize, scaleReferenceSize: this.scaleReferenceSize }); this.reportDimensions(); } }); this.hasScale = true; this.showLabels = true; this.showMainTickmarkLabels = false; this.hasBar = false; this.scaleBackground = false; this.barContainerStyle = void 0; this.barThickness = 24; this.tickThickness = 24; this.labelThickness = 60; this.mainTickmarks = []; this.primaryTickmarkInterval = void 0; this.secondaryTickmarkInterval = void 0; this.tertiaryTickmarkInterval = void 0; this.scaleType = ScaleType.regular; this.frameStyle = FrameStyle.regular; this.borderRadiusPosition = void 0; this.instrumentMode = false; this.borderRadius = void 0; this._borderRadiusResizeController = new ResizeController(this, { callback: () => { if (!this.instrumentMode) { this._refreshBorderRadiusFromCssVar(); } } }); this.priority = Priority.regular; this.fillMode = FillMode.fill; this.fillMin = void 0; this.fillMax = void 0; this.value = void 0; this.state = InstrumentState.active; this.advicePosition = AdvicePosition.inner; this.advices = []; this.highlightCurrentValue = false; } render() { const effectiveLength = this.fixedAspectRatio ? this.scaleReferenceSize : this.height; const config = { orientation: ExternalScaleOrientation.vertical, side: this.side, length: effectiveLength, paddingStart: this.paddingTop, paddingEnd: this.paddingBottom, minValue: this.minValue, maxValue: this.maxValue, hasScale: this.hasScale, labels: this.showLabels, mainTickmarkLabels: this.showMainTickmarkLabels, hasBar: this.hasBar, scaleBackground: this.scaleBackground, barContainerStyle: this.barContainerStyle, barThickness: this.barThickness, tickThickness: this.tickThickness, labelThickness: this.labelThickness, borderRadius: this._getEffectiveBorderRadius(), mainTickmarks: this.mainTickmarks, primaryTickmarkInterval: this.primaryTickmarkInterval, secondaryTickmarkInterval: this.secondaryTickmarkInterval, tertiaryTickmarkInterval: this.tertiaryTickmarkInterval, scaleType: this.scaleType, frameStyle: this.frameStyle, borderRadiusPosition: this.borderRadiusPosition, priority: this.priority, setpointOverride: this.setpointOverride, fillMode: this.fillMode, fillMin: this.fillMin, fillMax: this.fillMax, value: this.value, setpoint: this.setpoint, newSetpoint: this.newSetpoint, atSetpoint: this.atSetpoint, autoAtSetpoint: this.autoAtSetpoint, autoAtSetpointDeadband: this.autoAtSetpointDeadband, setpointAtZeroDeadband: this.setpointAtZeroDeadband, animateSetpoint: this.animateSetpoint, departingNewSetpoint: this.departingNewSetpoint, state: this.state, touching: this.touching, advicePosition: this.advicePosition, advices: this.advices, fixedAspectRatio: this.fixedAspectRatio, instrumentMode: this.instrumentMode, highlightCurrentValue: this.highlightCurrentValue }; const layout = computeExternalScaleLayout( toExternalScaleLayoutConfig(config) ); const parts = renderExternalScale(config); const viewBox = computeExternalScaleViewBox( { orientation: config.orientation, length: effectiveLength }, layout ); const preserveAspectRatio = this.fixedAspectRatio ? \"xMidYMid meet\" : \"none\"; return html` <svg width=${this.fixedAspectRatio ? \"100%\" : `${viewBox.width}px`} height=${this.fixedAspectRatio ? \"100%\" : `${this.height}px`} viewBox=\"${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}\" preserveAspectRatio=\"${preserveAspectRatio}\" style=\"--scale: ${this.fixedAspectRatio ? this._scale : 1};\" part=\"svg\" > ${parts.barContainer} ${parts.barFill} ${parts.scaleBackground} ${parts.tickmarks} ${parts.labels} ${parts.adviceOverlays} ${parts.currentValueDot} ${parts.setpoint} </svg> `; } updated(changed) { super.updated(changed); if (changed.has(\"scaleType\")) { this._refreshBorderRadiusFromCssVar(); } if (changed.has(\"fixedAspectRatio\")) { if (this.fixedAspectRatio) { this._applyFixedAspectRatioStyles(); this._updateScaleFromCurrentSize(); } else { this._removeFixedAspectRatioStyles(); this._scale = 1; } } if (changed.has(\"scaleReferenceSize\") && this.fixedAspectRatio) { this._updateScaleFromCurrentSize(); } 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(); } } /** * Report scale dimensions to parent chart component. * When fixedAspectRatio=true, reports the actual visual (scaled) thickness * so the chart can correctly reserve space for the scale. * When fixedAspectRatio=false, reports the base/unscaled thickness. */ reportDimensions() { const effectiveBarThickness = computeExternalScaleEffectiveBarThickness({ hasBar: this.hasBar, barThickness: this.barThickness, borderRadius: this._getEffectiveBorderRadius(), scaleType: this.scaleType }); const effectiveLength = this.fixedAspectRatio ? this.scaleReferenceSize : this.height; const baseDimensions = computeScaleDimensionsForReport({ orientation: ExternalScaleOrientation.vertical, side: this.side, hasBar: this.hasBar, hasScale: this.hasScale, labels: this.showLabels, barThickness: effectiveBarThickness, tickThickness: this.tickThickness, labelThickness: this.labelThickness, length: effectiveLength, scaleType: this.scaleType, advicePosition: this.advicePosition, hasAdvice: !!this.advices && this.advices.length > 0, hasSetpoint: this.setpoint !== void 0 || this.newSetpoint !== void 0 || this.departingNewSetpoint !== void 0 }); const dimensions = this.fixedAspectRatio ? { ...baseDimensions, thickness: Math.round(baseDimensions.thickness * this._scale) } : baseDimensions; this.dispatchEvent( new CustomEvent(\"scale-dimensions-changed\", { detail: dimensions, bubbles: true, composed: true }) ); } createRenderRoot() { return this; } connectedCallback() { super.connectedCallback(); if (!this.instrumentMode) { this._refreshBorderRadiusFromCssVar(); this._startBorderRadiusObserver(); } if (this.fixedAspectRatio) { this._applyFixedAspectRatioStyles(); } } disconnectedCallback() { this._borderRadiusObserver?.disconnect(); this._borderRadiusObserver = void 0; super.disconnectedCallback(); } _startBorderRadiusObserver() { this._borderRadiusObserver?.disconnect(); this._borderRadiusObserver = startExternalScaleBorderRadiusObserver( this, () => this._refreshBorderRadiusFromCssVar() ); } /** * Apply CSS styles needed for fixedAspectRatio mode. * Custom elements are display:inline by default, which doesn't work with percentage-based sizing. * We need display:block and height:100% to fill the slot container. */ _applyFixedAspectRatioStyles() { this.style.display = \"block\"; this.style.height = \"100%\"; this.style.width = \"auto\"; } /** * Remove fixed aspect ratio styles when switching back to pixel mode. */ _removeFixedAspectRatioStyles() { this.style.display = \"\"; this.style.height = \"\"; this.style.width = \"\"; } /** * Calculate scale based on current element size. * Called when fixedAspectRatio is enabled or scaleReferenceSize changes. */ _updateScaleFromCurrentSize() { requestAnimationFrame(() => { const containerHeight = this.clientHeight; if (containerHeight > 0) { this._scale = computeFixedAspectRatioScale({ orientation: ExternalScaleOrientation.vertical, containerMainAxisSize: containerHeight, scaleReferenceSize: this.scaleReferenceSize }); this.requestUpdate(); this.reportDimensions(); } }); } _refreshBorderRadiusFromCssVar() { if (this.instrumentMode) return; const next = readExternalScaleBorderRadiusPx(this, this.scaleType); if (this._computedBorderRadius !== next) { this._computedBorderRadius = next; } if (this.fixedAspectRatio) { const rect = this.getBoundingClientRect(); if (rect.height > 0) { this._scale = computeFixedAspectRatioScale({ orientation: ExternalScaleOrientation.vertical, containerMainAxisSize: rect.height, scaleReferenceSize: this.scaleReferenceSize }); this.reportDimensions(); } } } /** * Get the effective border radius to use. * In instrument mode: use explicit borderRadius prop or default based on scaleType. * In normal mode: use CSS variable computed value. */ _getEffectiveBorderRadius() { if (this.instrumentMode) { if (this.borderRadius !== void 0) { return this.borderRadius; } return this.scaleType === ScaleType.condensed ? 4 : 8; } return this._computedBorderRadius ?? (this.scaleType === ScaleType.condensed ? 4 : 8); } }"
         }
       ],
       "exports": [
@@ -4389,6 +4389,14 @@
             "module": "dist/building-blocks/chart-line/chart-line-base.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "RangeLabels",
+          "declaration": {
+            "name": "RangeLabels",
+            "module": "dist/building-blocks/chart-line/chart-line-base.js"
+          }
+        },
         {
           "kind": "js",
           "name": "TimeDisplay",
@@ -4755,7 +4763,7 @@
         {
           "kind": "variable",
           "name": "ObcAlertButton",
-          "default": "class extends LitElement { constructor() { super(...arguments); this.nAlerts = 0; this.type = \"normal\"; this.large = false; this.showSilenceButton = false; this.silenceButtonDisabled = false; this.counter = false; this.blinking = false; this.flatMaxBreakpointPx = 0; this.silenceButtonMinBreakpointPx = 0; this.width = window.innerWidth; this.resizeListener = () => { this.width = window.innerWidth; }; } connectedCallback() { super.connectedCallback(); window.addEventListener(\"resize\", this.resizeListener); if (this.hasUpdated) { this.installBlinking(); } } disconnectedCallback() { window.removeEventListener(\"resize\", this.resizeListener); this._blinkAnimationCancel?.(); super.disconnectedCallback(); } renderAlertTwotoneIcon() { const twotone = this.alertType ? getAlertTwotoneComponent(this.alertType) : AlertTwotoneComponent.Caution; switch (twotone) { case AlertTwotoneComponent.Critical: return html`<obi-alerts-critical-twotone useCssColor class=\"icon\" ></obi-alerts-critical-twotone>`; case AlertTwotoneComponent.Diagnostic: return html`<obi-alerts-diagnostic-twotone useCssColor class=\"icon\" ></obi-alerts-diagnostic-twotone>`; case AlertTwotoneComponent.Warning: return html`<obi-alerts-warning-twotone useCssColor class=\"icon\" ></obi-alerts-warning-twotone>`; case AlertTwotoneComponent.Caution: return html`<obi-alerts-caution-twotone useCssColor class=\"icon\" ></obi-alerts-caution-twotone>`; default: return html`<obi-alerts-alarm-twotone useCssColor class=\"icon\" ></obi-alerts-alarm-twotone>`; } } alertIcon() { const isIdle = this.nAlerts === 0; if (isIdle) { return html`<obi-alerts class=\"icon\"></obi-alerts>`; } if (this.type === \"enhanced\") { return html`<obi-alerts-active class=\"icon\"></obi-alerts-active>`; } return this.renderAlertTwotoneIcon(); } alertIconNegative() { const useIdle = this.nAlerts === 0 || this.type !== \"enhanced\"; if (useIdle) { return html`<obi-alerts class=\"icon\"></obi-alerts>`; } return this.renderAlertTwotoneIcon(); } get activeType() { if (this.type === \"flat\") { return \"flat\"; } if (this.width < this.flatMaxBreakpointPx) { return \"flat\"; } return this.type; } 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); return html` <div class=${classMap({ wrapper: true, [`alert-type-${this.alertType ?? \"none\"}`]: true, counter: showCounter, \"has-silence\": this.showSilenceButtonDynamic, [`type-${this.activeType}`]: true, blinking: showBlinking, large: this.large })} > <button class=\"alert-button\" @click=${() => this.dispatchEvent(new CustomEvent(\"click-alert\"))} > ${showBlinking ? html` <div class=\"blink\"> ${this.alertIconNegative()} ${showCounter ? html`<div class=\"badge\">${this.nAlerts}</div>` : null} </div>` : nothing} <div class=\"visible-wrapper\"> ${this.alertIcon()} ${showCounter ? html`<div class=\"badge\">${this.nAlerts}</div>` : nothing} </div> </button> ${this.showSilenceButtonDynamic ? html` <button class=\"silence-button\" @click=${() => this.dispatchEvent(new CustomEvent(\"click-silence\"))} ?disabled=${this.silenceButtonDisabled} > <div class=\"visible-wrapper\"> <obi-silence-iec class=\"icon\"></obi-silence-iec> </div> </button> ` : null} </div> `; } }"
+          "default": "class extends LitElement { constructor() { super(...arguments); this.nAlerts = 0; this.type = \"normal\"; this.large = false; this.showSilenceButton = false; 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; this.resizeListener = () => { 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); } disconnectedCallback() { window.removeEventListener(\"resize\", this.resizeListener); super.disconnectedCallback(); } renderAlertTwotoneIcon() { const twotone = this.alertType ? getAlertTwotoneComponent(this.alertType) : AlertTwotoneComponent.Caution; switch (twotone) { case AlertTwotoneComponent.Critical: return html`<obi-alerts-critical-twotone useCssColor class=\"icon\" ></obi-alerts-critical-twotone>`; case AlertTwotoneComponent.Diagnostic: return html`<obi-alerts-diagnostic-twotone useCssColor class=\"icon\" ></obi-alerts-diagnostic-twotone>`; case AlertTwotoneComponent.Warning: return html`<obi-alerts-warning-twotone useCssColor class=\"icon\" ></obi-alerts-warning-twotone>`; case AlertTwotoneComponent.Caution: return html`<obi-alerts-caution-twotone useCssColor class=\"icon\" ></obi-alerts-caution-twotone>`; default: return html`<obi-alerts-alarm-twotone useCssColor class=\"icon\" ></obi-alerts-alarm-twotone>`; } } alertIcon() { const isIdle = this.nAlerts === 0; if (isIdle) { return html`<obi-alerts class=\"icon\"></obi-alerts>`; } if (this.type === \"enhanced\") { return html`<obi-alerts-active class=\"icon\"></obi-alerts-active>`; } return this.renderAlertTwotoneIcon(); } alertIconNegative() { const useIdle = this.nAlerts === 0 || this.type !== \"enhanced\"; if (useIdle) { return html`<obi-alerts class=\"icon\"></obi-alerts>`; } return this.renderAlertTwotoneIcon(); } get activeType() { if (this.type === \"flat\") { return \"flat\"; } if (this.width < this.flatMaxBreakpointPx) { return \"flat\"; } return this.type; } get showSilenceButtonDynamic() { return this.showSilenceButton && this.width >= this.silenceButtonMinBreakpointPx && this.activeType !== \"flat\"; } render() { const hasAlerts = this.nAlerts > 0; const showCounter = this.counter && hasAlerts && this.activeType !== \"flat\"; const tempo = this.resolvedFlashingSpeed; const showBlinking = tempo !== FlashingSpeed.Fixed; return html` <div class=${classMap({ wrapper: true, [`alert-type-${this.alertType ?? \"none\"}`]: true, counter: showCounter, \"has-silence\": this.showSilenceButtonDynamic, [`type-${this.activeType}`]: true, [`flash-${tempo}`]: true, large: this.large })} > <button class=\"alert-button\" @click=${() => this.dispatchEvent(new CustomEvent(\"click-alert\"))} > ${showBlinking ? html` <div class=\"blink\"> ${this.alertIconNegative()} ${showCounter ? html`<div class=\"badge\">${this.nAlerts}</div>` : null} </div>` : nothing} <div class=\"visible-wrapper\"> ${this.alertIcon()} ${showCounter ? html`<div class=\"badge\">${this.nAlerts}</div>` : nothing} </div> </button> ${this.showSilenceButtonDynamic ? html` <button class=\"silence-button\" @click=${() => this.dispatchEvent(new CustomEvent(\"click-silence\"))} ?disabled=${this.silenceButtonDisabled} > <div class=\"visible-wrapper\"> <obi-silence-iec class=\"icon\"></obi-silence-iec> </div> </button> ` : null} </div> `; } }"
         }
       ],
       "exports": [
@@ -4814,10 +4822,14 @@
           "kind": "variable",
           "name": "ObcAlertFrameMode"
         },
+        {
+          "kind": "variable",
+          "name": "ObcAlertFrameFlashEffect"
+        },
         {
           "kind": "variable",
           "name": "ObcAlertFrame",
-          "default": "class extends LitElement { constructor() { super(...arguments); this.type = \"small-side-flip\"; this.thickness = \"small\"; this.status = AlertType.Alarm; this.mode = \"acked-active\"; this.wrapContent = false; this.fullWidth = false; this.sharpEdgeTopLeft = false; this.sharpEdgeTopRight = false; this.sharpEdgeBottomLeft = false; this.sharpEdgeBottomRight = false; this.textSize = \"regular\"; this.showIcon = false; this.showAlertCategoryIcon = true; } render() { return html` <div class=${classMap({ wrapper: true, \"wrap-content\": this.wrapContent, \"full-width\": this.fullWidth, [\"thickness-\" + this.thickness]: true, [this.type]: true, [this.status]: true, [\"text-size-\" + this.textSize]: true, \"sharp-edge-top-left\": this.sharpEdgeTopLeft, \"sharp-edge-top-right\": this.sharpEdgeTopRight, \"sharp-edge-bottom-left\": this.sharpEdgeBottomLeft, \"sharp-edge-bottom-right\": this.sharpEdgeBottomRight, [this.mode]: true })} > <slot></slot> ${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 nothing; } if (this.type === \"small-side-flip\" && !this.showAlertCategoryIcon) { return nothing; } if (this.type === \"large-side-flip\" && !this.showIcon && !this.showAlertCategoryIcon) { return nothing; } let icon; if (!this.showAlertCategoryIcon) { icon = nothing; } else { icon = this.renderBadgeIcon(); } if (this.type === \"small-side-flip\") { return html`<div class=\"flap small\"> ${icon} <div class=\"mask up\"></div> </div>`; } if (this.type === \"large-side-flip\") { return html`<div class=\"flap large\"> ${icon} ${this.showIcon ? html`<div class=\"icon\"><slot name=\"icon\"></slot></div>` : nothing} <div class=\"mask up\"></div> <div class=\"mask down\"></div> </div>`; } if (this.type === \"bottom-flip\" || this.type === \"top-flip\") { return html`<div class=\"flap ${this.type === \"bottom-flip\" ? \"bottom\" : \"top\"}\" > ${icon} ${this.showIcon ? html`<div class=\"icon\"><slot name=\"icon\"></slot></div>` : nothing} <div class=\"label\"><slot name=\"label\"></slot></div> <div class=\"spacer\"></div> <div class=\"timer\"><slot name=\"timer\"></slot></div> <div class=\"mask right\"></div> <div class=\"mask left\"></div> </div>`; } console.error(\"Unknown type of alert frame:\", this.type); return nothing; } renderBadgeIcon() { switch (getAlertBadgeComponent(this.status)) { case AlertBadgeComponent.Critical: return html`<obi-critical-badge class=\"icon badge\" ></obi-critical-badge>`; case AlertBadgeComponent.Warning: return html`<obi-warning-badge class=\"icon badge\"></obi-warning-badge>`; case AlertBadgeComponent.Caution: return html`<obi-caution-badge class=\"icon badge\"></obi-caution-badge>`; case AlertBadgeComponent.Diagnostic: return html`<obi-diagnostic-badge class=\"icon badge\" ></obi-diagnostic-badge>`; default: return html`<obi-alarm-badge class=\"icon badge\"></obi-alarm-badge>`; } } }"
+          "default": "class extends LitElement { constructor() { super(...arguments); this.type = \"small-side-flip\"; 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 style = getComputedStyle(wrapper); const px = (value) => parseFloat(value) || 0; const box = { width: wrapper.offsetWidth, height: wrapper.offsetHeight, thickness: px(style.getPropertyValue(\"--thickness\")), radii: [ px(style.borderTopLeftRadius), px(style.borderTopRightRadius), px(style.borderBottomRightRadius), px(style.borderBottomLeftRadius) ] }; if (!sameDashBox(box, this.dashBox)) { this.dashBox = box; } }; this.wrapContent = false; this.fullWidth = false; this.sharpEdgeTopLeft = false; this.sharpEdgeTopRight = false; this.sharpEdgeBottomLeft = false; this.sharpEdgeBottomRight = false; this.textSize = \"regular\"; 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 nothing; } 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( (r) => r > 0 ? r + box.thickness / 2 : 0 ) }; const width = box.width + 2 * pad; const height = box.height + 2 * pad; return html`<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 html` <div class=${classMap({ wrapper: true, \"wrap-content\": this.wrapContent, \"full-width\": this.fullWidth, [\"thickness-\" + this.thickness]: true, [this.type]: true, [this.status]: true, [\"text-size-\" + this.textSize]: true, \"sharp-edge-top-left\": this.sharpEdgeTopLeft, \"sharp-edge-top-right\": this.sharpEdgeTopRight, \"sharp-edge-bottom-left\": this.sharpEdgeBottomLeft, \"sharp-edge-bottom-right\": this.sharpEdgeBottomRight, [this.mode]: true, [\"flash-\" + this.resolvedFlashingSpeed]: true, [\"flash-effect-\" + this.flashEffect]: true })} > <slot></slot> ${this.renderDash()} ${this.flap()} </div> `; } flap() { if (this.type === \"regular\") { return nothing; } if (this.type === \"small-side-flip\" && !this.showAlertCategoryIcon) { return nothing; } if (this.type === \"large-side-flip\" && !this.showIcon && !this.showAlertCategoryIcon) { return nothing; } let icon; if (!this.showAlertCategoryIcon) { icon = nothing; } else { icon = this.renderBadgeIcon(); } if (this.type === \"small-side-flip\") { return html`<div class=\"flap small\"> ${icon} <div class=\"mask up\"></div> </div>`; } if (this.type === \"large-side-flip\") { return html`<div class=\"flap large\"> ${icon} ${this.showIcon ? html`<div class=\"icon\"><slot name=\"icon\"></slot></div>` : nothing} <div class=\"mask up\"></div> <div class=\"mask down\"></div> </div>`; } if (this.type === \"bottom-flip\" || this.type === \"top-flip\") { return html`<div class=\"flap ${this.type === \"bottom-flip\" ? \"bottom\" : \"top\"}\" > ${icon} ${this.showIcon ? html`<div class=\"icon\"><slot name=\"icon\"></slot></div>` : nothing} <div class=\"label\"><slot name=\"label\"></slot></div> <div class=\"spacer\"></div> <div class=\"timer\"><slot name=\"timer\"></slot></div> <div class=\"mask right\"></div> <div class=\"mask left\"></div> </div>`; } console.error(\"Unknown type of alert frame:\", this.type); return nothing; } renderBadgeIcon() { switch (getAlertBadgeComponent(this.status)) { case AlertBadgeComponent.Critical: return html`<obi-critical-badge class=\"icon badge\" ></obi-critical-badge>`; case AlertBadgeComponent.Warning: return html`<obi-warning-badge class=\"icon badge\"></obi-warning-badge>`; case AlertBadgeComponent.Caution: return html`<obi-caution-badge class=\"icon badge\"></obi-caution-badge>`; case AlertBadgeComponent.Diagnostic: return html`<obi-diagnostic-badge class=\"icon badge\" ></obi-diagnostic-badge>`; default: return html`<obi-alarm-badge class=\"icon badge\"></obi-alarm-badge>`; } } }"
         }
       ],
       "exports": [
@@ -4837,6 +4849,14 @@
             "module": "dist/components/alert-frame/alert-frame.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "ObcAlertFrameFlashEffect",
+          "declaration": {
+            "name": "ObcAlertFrameFlashEffect",
+            "module": "dist/components/alert-frame/alert-frame.js"
+          }
+        },
         {
           "kind": "js",
           "name": "ObcAlertFrameMode",
@@ -4886,7 +4906,7 @@
         {
           "kind": "variable",
           "name": "ObcAlertIcon",
-          "default": "class extends LitElement { constructor() { super(...arguments); this.alertType = AlertType.Alarm; } get _effectiveType() { if (this.type) { return this.type; } return this.alertType; } get bamType() { return getBamAlertTypeForBlinking(this._effectiveType); } get _effectiveState() { if (this.active === false) { return \"rectified\"; } else if (this.acknowledged) { return \"acknowledged\"; } else if (this.silenced) { return \"silenced\"; } else if (this.active === true) { return \"unacknowledged\"; } return \"unacknowledged\"; } get icon() { if (this._effectiveType === AlertType.LevelCritical) { switch (this._effectiveState) { case \"rectified\": return mapping[ \"critical-rectified\" /* CriticalRectified */ ]; case \"silenced\": return mapping[ \"critical-silenced\" /* CriticalSilenced */ ]; case \"unacknowledged\": return mapping[ \"critical-unack\" /* CriticalUnack */ ]; default: return mapping[ \"critical\" /* Critical */ ]; } } else if (this._effectiveType === AlertType.LevelLow) { switch (this._effectiveState) { case \"rectified\": return mapping[ \"low-rectified\" /* LowRectified */ ]; case \"silenced\": return mapping[ \"low-silenced\" /* LowSilenced */ ]; case \"unacknowledged\": return mapping[ \"low-unack\" /* LowUnack */ ]; default: return mapping[ \"low-unack\" /* LowUnack */ ]; } } else if (this.bamType === AlertType.Alarm) { switch (this._effectiveState) { case \"rectified\": return mapping[ \"alarm-rectified\" /* AlarmRectified */ ]; case \"silenced\": return mapping[ \"alarm-silenced\" /* AlarmSilenced */ ]; case \"unacknowledged\": return mapping[ \"alarm-unack\" /* AlarmUnack */ ]; default: return null; } } else if (this.bamType === AlertType.Warning) { if (this.active === false) { return mapping[ \"warning-rectified\" /* WarningRectified */ ]; } else if (this.acknowledged) { return mapping[ \"warning-silenced\" /* WarningSilenced */ ]; } else { return mapping[ \"warning-unack\" /* WarningUnack */ ]; } } return null; } renderStaticIcon() { if (this._effectiveType === AlertType.Caution) { return html`<obi-caution-color-iec usecsscolor></obi-caution-color-iec>`; } if (this._effectiveType === AlertType.LevelDiagnostic) { return html`<obi-diagnostic-badge style=\"color: var(--alert-diagnostic-color);\" ></obi-diagnostic-badge>`; } if (this._effectiveState === \"acknowledged\") { if (this._effectiveType === AlertType.LevelCritical) { return html`${criticalAcknowledged}`; } if (this._effectiveType === AlertType.LevelLow) { return html`${lowAcknowledged}`; } switch (this.bamType) { case AlertType.Alarm: return html`<obi-alarm-acknowledged-iec usecsscolor ></obi-alarm-acknowledged-iec>`; case AlertType.Warning: return html`<obi-warning-acknowledged-iec usecsscolor ></obi-warning-acknowledged-iec>`; default: return nothing; } } else if (this._effectiveState === \"rectified\") { if (this._effectiveType === AlertType.LevelCritical) { return html`${criticalRectifiedB}`; } if (this._effectiveType === AlertType.LevelLow) { return html`${lowRectifiedB}`; } switch (this.bamType) { case AlertType.Alarm: return html`<obi-alarm-rectified-outlined usecsscolor ></obi-alarm-rectified-outlined>`; case AlertType.Warning: return html`<obi-warning-rectified-outlined usecsscolor ></obi-warning-rectified-outlined>`; default: return nothing; } } return nothing; } render() { if (!this._effectiveType) { return html`<div>No alarm</div>`; } if (supportsBlinking(this._effectiveType, this.acknowledged ?? false)) { const icons = this.icon; if (!icons) { throw new Error(\"No icon found\"); } const blinkMode = getAlertBlinkMode(this._effectiveType); return html` <div class=${classMap({ wrapper: true, [`blink-${blinkMode}`]: true })} > <span class=\"a\">${icons.a}</span> <span class=\"b\">${icons.b}</span> </div> `; } return html`<div class=\"wrapper\">${this.renderStaticIcon()}</div>`; } syncBlinking() { if (this._blinkAnimationCancel && !supportsBlinking(this._effectiveType, this.acknowledged ?? false)) { this._blinkAnimationCancel(); this._blinkAnimationCancel = void 0; } if (!this._blinkAnimationCancel && supportsBlinking(this._effectiveType, this.acknowledged ?? false)) { this._blinkAnimationCancel = blinkingAll(this); } } connectedCallback() { super.connectedCallback(); if (this.hasUpdated) { this.syncBlinking(); } } updated() { this.syncBlinking(); } disconnectedCallback() { super.disconnectedCallback(); if (this._blinkAnimationCancel) { this._blinkAnimationCancel(); this._blinkAnimationCancel = void 0; } } }"
+          "default": "class extends LitElement { constructor() { super(...arguments); this.alertType = AlertType.Alarm; this.flashingSpeed = FlashingSpeed.Default; this.flashing = new FlashingController( this, () => this.resolvedFlashingSpeed ); } get resolvedFlashingSpeed() { if (this.acknowledged || !this.icon) { return FlashingSpeed.Fixed; } return resolveFlashingSpeed( this.flashingSpeed, this._effectiveType, this.active === false ? AlertFlashPhase.Rectified : AlertFlashPhase.Active ); } get _effectiveType() { if (this.type) { return this.type; } return this.alertType; } get bamType() { return getBamAlertTypeForBlinking(this._effectiveType); } get _effectiveState() { if (this.active === false) { return \"rectified\"; } else if (this.acknowledged) { return \"acknowledged\"; } else if (this.silenced) { return \"silenced\"; } else if (this.active === true) { return \"unacknowledged\"; } return \"unacknowledged\"; } get icon() { if (this._effectiveType === AlertType.LevelCritical) { switch (this._effectiveState) { case \"rectified\": return mapping[ \"critical-rectified\" /* CriticalRectified */ ]; case \"silenced\": return mapping[ \"critical-silenced\" /* CriticalSilenced */ ]; case \"unacknowledged\": return mapping[ \"critical-unack\" /* CriticalUnack */ ]; default: return mapping[ \"critical\" /* Critical */ ]; } } else if (this._effectiveType === AlertType.LevelLow) { switch (this._effectiveState) { case \"rectified\": return mapping[ \"low-rectified\" /* LowRectified */ ]; case \"silenced\": return mapping[ \"low-silenced\" /* LowSilenced */ ]; case \"unacknowledged\": return mapping[ \"low-unack\" /* LowUnack */ ]; default: return mapping[ \"low-unack\" /* LowUnack */ ]; } } else if (this.bamType === AlertType.Alarm) { switch (this._effectiveState) { case \"rectified\": return mapping[ \"alarm-rectified\" /* AlarmRectified */ ]; case \"silenced\": return mapping[ \"alarm-silenced\" /* AlarmSilenced */ ]; case \"unacknowledged\": return mapping[ \"alarm-unack\" /* AlarmUnack */ ]; default: return null; } } else if (this.bamType === AlertType.Warning) { if (this.active === false) { return mapping[ \"warning-rectified\" /* WarningRectified */ ]; } else if (this.acknowledged) { return mapping[ \"warning-silenced\" /* WarningSilenced */ ]; } else { return mapping[ \"warning-unack\" /* WarningUnack */ ]; } } return null; } renderStaticIcon() { if (this._effectiveType === AlertType.Caution) { return html`<obi-caution-color-iec usecsscolor></obi-caution-color-iec>`; } if (this._effectiveType === AlertType.LevelDiagnostic) { return html`<obi-diagnostic-badge style=\"color: var(--alert-diagnostic-color);\" ></obi-diagnostic-badge>`; } if (this._effectiveState === \"acknowledged\") { if (this._effectiveType === AlertType.LevelCritical) { return html`${criticalAcknowledged}`; } if (this._effectiveType === AlertType.LevelLow) { return html`${lowAcknowledged}`; } switch (this.bamType) { case AlertType.Alarm: return html`<obi-alarm-acknowledged-iec usecsscolor ></obi-alarm-acknowledged-iec>`; case AlertType.Warning: return html`<obi-warning-acknowledged-iec usecsscolor ></obi-warning-acknowledged-iec>`; default: return nothing; } } else if (this._effectiveState === \"rectified\") { if (this._effectiveType === AlertType.LevelCritical) { return html`${criticalRectifiedB}`; } if (this._effectiveType === AlertType.LevelLow) { return html`${lowRectifiedB}`; } switch (this.bamType) { case AlertType.Alarm: return html`<obi-alarm-rectified-outlined usecsscolor ></obi-alarm-rectified-outlined>`; case AlertType.Warning: return html`<obi-warning-rectified-outlined usecsscolor ></obi-warning-rectified-outlined>`; default: return nothing; } } return nothing; } render() { if (!this._effectiveType) { return html`<div>No alarm</div>`; } const tempo = this.resolvedFlashingSpeed; const icons = this.icon; if (tempo !== FlashingSpeed.Fixed && icons) { return html` <div class=${classMap({ wrapper: true, [`flash-${tempo}`]: true })}> <span class=\"a\">${icons.a}</span> <span class=\"b\">${icons.b}</span> </div> `; } return html`<div class=\"wrapper\">${this.renderStaticIcon()}</div>`; } }"
         }
       ],
       "exports": [
@@ -9436,7 +9456,7 @@
         {
           "kind": "variable",
           "name": "ObcGaugeTrend",
-          "default": "class extends SetpointMixin(ObcChartLineBase) { constructor() { super(); this._isFirstUpdate = false; this._explicitXAxisType = false; this.scaleType = ScaleType.regular; this.minValue = 0; this.maxValue = 100; this.chartMinValue = void 0; this.chartMaxValue = void 0; this.value = void 0; this.hasBar = false; this.hasScale = false; this.hasAdvice = false; this.fillMode = FillMode.fill; this.fillMin = 0; this.fillMax = void 0; this.advice = []; this.primaryTickmarkInterval = void 0; this.secondaryTickmarkInterval = 0.5; this.tertiaryTickmarkInterval = void 0; this.chartFill = false; this.legend = false; this.showDebugOverlay = false; this.showGrid = false; this.showTickMarks = false; this.showPoints = false; this.xAxisType = XAxisType.category; this.yAxisPosition = YAxisPosition.left; this.lineMode = LineMode.smooth; this.unit = \"\"; this.timeDisplay = TimeDisplay.date; this.fixedAspectRatioScaling = true; this.instrumentMode = true; this.borderRadius = 8; this.borderRadiusPosition = BorderRadiusPosition.innerFirstChild; this.borderRadiusPositionExternalScales = BorderRadiusPosition.middleChild; this.yAxes = [ { id: \"y\", position: \"left\", min: this.chartMinValue ?? this.minValue, max: this.chartMaxValue ?? this.maxValue } ]; } async firstUpdated() { this._createBarVerticalElement(); this._updateBorderRadiusPosition(); await super.firstUpdated(); this._isFirstUpdate = false; } disconnectedCallback() { super.disconnectedCallback(); } _createBarVerticalElement() { if (!this._barVerticalElement) { const barVertical = document.createElement(\"obc-bar-vertical\"); barVertical.setAttribute(\"slot\", \"right-scale\"); this._barVerticalElement = barVertical; this.appendChild(barVertical); this._updateBarVerticalProperties(); } } _updateBorderRadiusPosition() { if (!this.hasBar && !this.hasScale) { this.borderRadiusPosition = BorderRadiusPosition.middleRoundedChild; } else { this.borderRadiusPosition = BorderRadiusPosition.innerFirstChild; } } _updateBarVerticalProperties() { if (!this._barVerticalElement) { return; } const barVertical = this._barVerticalElement; const effectiveHeight = this.getEffectiveHeight(); barVertical.minValue = this.minValue; barVertical.maxValue = this.maxValue; barVertical.height = effectiveHeight; barVertical.side = \"right\"; barVertical.hasScale = this.hasScale; barVertical.hasBar = this.hasBar; barVertical.barThickness = this.hasScale ? 48 : 24; barVertical.scaleType = this.scaleType; barVertical.fillMode = this.fillMode; barVertical.fillMin = this.fillMin; barVertical.fillMax = this.fillMode === FillMode.fill ? this.value : this.fillMax ?? this.value; barVertical.value = this.value; barVertical.setpoint = this.setpoint; barVertical.newSetpoint = this.newSetpoint; barVertical.touching = this.touching; barVertical.atSetpoint = this.atSetpoint; barVertical.autoAtSetpoint = this.autoAtSetpoint; barVertical.autoAtSetpointDeadband = this.autoAtSetpointDeadband; barVertical.setpointAtZeroDeadband = this.setpointAtZeroDeadband; barVertical.animateSetpoint = this.animateSetpoint; barVertical.setpointOverride = this.setpointOverride; barVertical.advicePosition = AdvicePosition.inner; barVertical.advices = this.hasAdvice ? this.advice : []; barVertical.primaryTickmarkInterval = this.primaryTickmarkInterval; barVertical.secondaryTickmarkInterval = this.secondaryTickmarkInterval; barVertical.tertiaryTickmarkInterval = this.tertiaryTickmarkInterval; barVertical.scaleBackground = this.hasScale; barVertical.barContainerStyle = this.hasScale ? void 0 : BarContainerStyle.secondary; barVertical.fixedAspectRatio = this.fixedAspectRatioScaling; barVertical.scaleReferenceSize = this.scaleReferenceSize; barVertical.hasPrimaryTickmarks = this.primaryTickmarkInterval !== void 0; barVertical.hasTertiaryTickmarks = this.tertiaryTickmarkInterval !== void 0; barVertical.priority = this.priority; barVertical.state = this.state; barVertical.instrumentMode = true; barVertical.borderRadius = 8; barVertical.borderRadiusPosition = this.hasScale ? BorderRadiusPosition.middleChild : BorderRadiusPosition.outerLastChild; barVertical.highlightCurrentValue = !this.hasBar; } /** * Apply fill when chartFill is true. */ shouldApplyFill() { return this.chartFill; } /** * Return the fill mode for area rendering. * Maps chartFill boolean to base class fillMode. */ getFillMode() { return this.chartFill ? \"semitransparent\" : void 0; } /** * Stacking is not used in gauge-trend (always false). */ shouldStack() { return false; } willUpdate(changed) { if (changed.has(\"xAxisType\") && this.xAxisType !== this._autoAppliedXAxisType && (this.hasUpdated || this.xAxisType !== XAxisType.category)) { this._explicitXAxisType = true; } if (!this._explicitXAxisType && changed.has(\"data\")) { const allHaveX = (this.data?.length ?? 0) > 0 && this.data.every((d) => d.x != null); const target = allHaveX ? XAxisType.time : XAxisType.category; if (this.xAxisType !== target) { this._autoAppliedXAxisType = target; this.xAxisType = target; } } super.willUpdate(changed); if (changed.has(\"chartMinValue\") || changed.has(\"chartMaxValue\") || changed.has(\"minValue\") || changed.has(\"maxValue\")) { const chartMin = this.chartMinValue ?? this.minValue; const chartMax = this.chartMaxValue ?? this.maxValue; this.yAxes = [ { id: \"y\", position: \"left\", min: chartMin, max: chartMax } ]; } if (changed.has(\"hasScale\")) { this.borderRadiusPositionExternalScales = this.hasScale ? BorderRadiusPosition.middleChild : BorderRadiusPosition.outerLastChild; } } updated(changed) { if (changed.has(\"chartFill\") && this.data) { this.data = [...this.data]; } super.updated(changed); if (changed.has(\"hasBar\") || changed.has(\"hasScale\")) { this._updateBorderRadiusPosition(); } if (!this._barVerticalElement || this._isFirstUpdate) return; const shouldUpdateScale = changed.has(\"minValue\") || changed.has(\"maxValue\") || changed.has(\"value\") || changed.has(\"setpoint\") || changed.has(\"newSetpoint\") || changed.has(\"touching\") || changed.has(\"atSetpoint\") || changed.has(\"autoAtSetpoint\") || changed.has(\"autoAtSetpointDeadband\") || changed.has(\"setpointAtZeroDeadband\") || changed.has(\"setpointOverride\") || changed.has(\"hasBar\") || changed.has(\"hasScale\") || changed.has(\"hasAdvice\") || changed.has(\"fillMode\") || changed.has(\"fillMin\") || changed.has(\"fillMax\") || changed.has(\"advice\") || changed.has(\"primaryTickmarkInterval\") || changed.has(\"secondaryTickmarkInterval\") || changed.has(\"tertiaryTickmarkInterval\") || changed.has(\"scaleType\") || changed.has(\"state\") || // Scale state inherits from parent 'state' changed.has(\"priority\") || changed.has(\"height\") || changed.has(\"width\") || changed.has(\"scaleReferenceSize\") || changed.has(\"chartMinValue\") || changed.has(\"chartMaxValue\"); if (shouldUpdateScale) this._updateBarVerticalProperties(); } }"
+          "default": "class extends SetpointMixin(ObcChartLineBase) { constructor() { super(); this._isFirstUpdate = false; this._explicitXAxisType = false; this.scaleType = ScaleType.regular; this.minValue = 0; this.maxValue = 100; this.chartMinValue = void 0; this.chartMaxValue = void 0; this.value = void 0; this.hasBar = false; this.hasScale = false; this.hasAdvice = false; this.fillMode = FillMode.fill; this.fillMin = 0; this.fillMax = void 0; this.advice = []; this.primaryTickmarkInterval = void 0; this.secondaryTickmarkInterval = 0.5; this.tertiaryTickmarkInterval = void 0; this.chartFill = false; this.legend = false; this.showDebugOverlay = false; this.showGrid = false; this.showTickMarks = false; this.showPoints = false; this.xAxisType = XAxisType.category; this.yAxisPosition = YAxisPosition.left; this.lineMode = LineMode.smooth; this.unit = \"\"; this.timeDisplay = TimeDisplay.date; this.fixedAspectRatioScaling = true; this.instrumentMode = true; this.borderRadius = 8; this.borderRadiusPosition = BorderRadiusPosition.innerFirstChild; this.borderRadiusPositionExternalScales = BorderRadiusPosition.middleChild; this.yAxes = [ { id: \"y\", position: \"left\", min: this.chartMinValue ?? this.minValue, max: this.chartMaxValue ?? this.maxValue } ]; } async firstUpdated() { this._createBarVerticalElement(); this._updateBorderRadiusPosition(); await super.firstUpdated(); this._isFirstUpdate = false; } disconnectedCallback() { super.disconnectedCallback(); } _createBarVerticalElement() { if (!this._barVerticalElement) { const barVertical = document.createElement(\"obc-bar-vertical\"); barVertical.setAttribute(\"slot\", \"right-scale\"); this._barVerticalElement = barVertical; this.appendChild(barVertical); this._updateBarVerticalProperties(); } } _updateBorderRadiusPosition() { if (!this.hasBar && !this.hasScale) { this.borderRadiusPosition = BorderRadiusPosition.middleRoundedChild; } else { this.borderRadiusPosition = BorderRadiusPosition.innerFirstChild; } } _updateBarVerticalProperties() { if (!this._barVerticalElement) { return; } const barVertical = this._barVerticalElement; const effectiveHeight = this.getEffectiveHeight(); barVertical.minValue = this.minValue; barVertical.maxValue = this.maxValue; barVertical.height = effectiveHeight; barVertical.side = \"right\"; barVertical.hasScale = this.hasScale; barVertical.hasBar = this.hasBar; barVertical.barThickness = this.hasScale ? 48 : 24; barVertical.scaleType = this.scaleType; barVertical.fillMode = this.fillMode; barVertical.fillMin = this.fillMin; barVertical.fillMax = this.fillMode === FillMode.fill ? this.value : this.fillMax ?? this.value; barVertical.value = this.value; barVertical.setpoint = this.setpoint; barVertical.newSetpoint = this.newSetpoint; barVertical.touching = this.touching; barVertical.atSetpoint = this.atSetpoint; barVertical.autoAtSetpoint = this.autoAtSetpoint; barVertical.autoAtSetpointDeadband = this.autoAtSetpointDeadband; barVertical.setpointAtZeroDeadband = this.setpointAtZeroDeadband; barVertical.animateSetpoint = this.animateSetpoint; barVertical.setpointOverride = this.setpointOverride; barVertical.advicePosition = AdvicePosition.inner; barVertical.advices = this.hasAdvice ? this.advice : []; barVertical.primaryTickmarkInterval = this.primaryTickmarkInterval; barVertical.secondaryTickmarkInterval = this.secondaryTickmarkInterval; barVertical.tertiaryTickmarkInterval = this.tertiaryTickmarkInterval; barVertical.scaleBackground = this.hasScale; barVertical.barContainerStyle = this.hasScale ? void 0 : BarContainerStyle.secondary; barVertical.fixedAspectRatio = this.fixedAspectRatioScaling; barVertical.scaleReferenceSize = this.scaleReferenceSize; barVertical.hasPrimaryTickmarks = this.primaryTickmarkInterval !== void 0; barVertical.hasTertiaryTickmarks = this.tertiaryTickmarkInterval !== void 0; barVertical.priority = this.priority; barVertical.state = this.state; barVertical.instrumentMode = true; barVertical.borderRadius = 8; barVertical.borderRadiusPosition = this.hasScale ? BorderRadiusPosition.middleChild : BorderRadiusPosition.outerLastChild; barVertical.highlightCurrentValue = !this.hasBar; } /** * Apply fill when chartFill is true. */ shouldApplyFill() { return this.chartFill; } /** * Return the fill mode for area rendering. * Maps chartFill boolean to base class fillMode. */ getFillMode() { return this.chartFill ? \"semitransparent\" : void 0; } /** * Stacking is not used in gauge-trend (always false). */ 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; } if (!this._explicitXAxisType && changed.has(\"data\")) { const allHaveX = (this.data?.length ?? 0) > 0 && this.data.every((d) => d.x != null); const target = allHaveX ? XAxisType.time : XAxisType.category; if (this.xAxisType !== target) { this._autoAppliedXAxisType = target; this.xAxisType = target; } } super.willUpdate(changed); if (changed.has(\"chartMinValue\") || changed.has(\"chartMaxValue\") || changed.has(\"minValue\") || changed.has(\"maxValue\")) { const chartMin = this.chartMinValue ?? this.minValue; const chartMax = this.chartMaxValue ?? this.maxValue; this.yAxes = [ { id: \"y\", position: \"left\", min: chartMin, max: chartMax } ]; } if (changed.has(\"hasScale\")) { this.borderRadiusPositionExternalScales = this.hasScale ? BorderRadiusPosition.middleChild : BorderRadiusPosition.outerLastChild; } } updated(changed) { if (changed.has(\"chartFill\") && this.data) { this.data = [...this.data]; } super.updated(changed); if (changed.has(\"hasBar\") || changed.has(\"hasScale\")) { this._updateBorderRadiusPosition(); } if (!this._barVerticalElement || this._isFirstUpdate) return; const shouldUpdateScale = changed.has(\"minValue\") || changed.has(\"maxValue\") || changed.has(\"value\") || changed.has(\"setpoint\") || changed.has(\"newSetpoint\") || changed.has(\"touching\") || changed.has(\"atSetpoint\") || changed.has(\"autoAtSetpoint\") || changed.has(\"autoAtSetpointDeadband\") || changed.has(\"setpointAtZeroDeadband\") || changed.has(\"setpointOverride\") || changed.has(\"hasBar\") || changed.has(\"hasScale\") || changed.has(\"hasAdvice\") || changed.has(\"fillMode\") || changed.has(\"fillMin\") || changed.has(\"fillMax\") || changed.has(\"advice\") || changed.has(\"primaryTickmarkInterval\") || changed.has(\"secondaryTickmarkInterval\") || changed.has(\"tertiaryTickmarkInterval\") || changed.has(\"scaleType\") || changed.has(\"state\") || // Scale state inherits from parent 'state' changed.has(\"priority\") || changed.has(\"height\") || changed.has(\"width\") || changed.has(\"scaleReferenceSize\") || changed.has(\"chartMinValue\") || changed.has(\"chartMaxValue\"); if (shouldUpdateScale) this._updateBarVerticalProperties(); } }"
         }
       ],
       "exports": [
@@ -10140,7 +10160,7 @@
         {
           "kind": "variable",
           "name": "ObcReadoutListItem",
-          "default": "class extends LitElement { constructor() { super(...arguments); this.hasValue = true; this.value = null; this.valueType = ReadoutValueType.number; this.off = false; this.offText = \"OFF\"; this.hasSetpoint = false; this.hasAdvice = false; this.clickable = false; this.hasLeadingIcon = false; this.hasDegree = false; this.hasDegreeSpacer = false; this.fractionDigits = 0; this.maxDigits = 0; this.alert = false; this.showDebugOverlay = false; this.deferredSetpointHidePhase = ReadoutBlockHidePhase.none; this.hasCompletedFirstUpdate = false; } get resolvedSize() { return this.size ?? ReadoutListItemSize.small; } get resolvedStacking() { return this.stacking ?? \"trailing-unit\"; } /** Both leading-src stackings move the source into the label stack. */ get hasLeadingSrc() { const stacking = this.resolvedStacking; return stacking === \"leading-src\" || stacking === \"leading-src-inline\"; } get resolvedPriority() { return this.priority ?? \"regular\"; } /** * Whether a unit box follows the value: a unit, or a reserver alone — the * blank reserved column keeps a unit-less row aligned with its neighbours. */ get hasTrailingUnitBox() { return this.resolvedStacking !== \"leading-unit\" && (Boolean(this.unit) || Boolean(this.unitOptions?.spaceReserver)); } get resolvedFractionDigits() { return this.fractionDigits ?? 0; } get resolvedMaxDigits() { return resolveReadoutDigitCount(this.maxDigits); } /** * Whether a digit knob failed to arrive (`NaN` / `null` / `undefined`). * The raw knobs are forwarded to the blocks, which render the reading as * the unavailable dash (see `obc-readout-block.digitCountsMissing`); this * getter only keeps the setpoint comparison in agreement with what is * displayed. */ get digitCountsMissing() { return isReadoutDigitCountMissing(this.fractionDigits) || isReadoutDigitCountMissing(this.maxDigits); } get resolvedClickable() { const clickable = this.clickable; if (!clickable) { return false; } if (clickable === true) { return { border: \"squared\" /* squared */ }; } return { border: clickable.border ?? \"squared\" /* squared */ }; } get isAtSetpoint() { if (!this.hasSetpoint) { return false; } if (this.digitCountsMissing) { return false; } return isDisplayedAtSetpoint( resolveReadoutNumericValue(this.value, this.valueType) ?? null, this.setpoint, this.numericFormatOptions(this.resolvedMaxDigits) ); } get resolvedSetpointInteraction() { return this.setpointOptions?.interaction ?? \"always-visible\"; } get isFlipFlop() { return this.resolvedSetpointInteraction === \"flip-flop\"; } get isEqualSize() { return this.resolvedSetpointInteraction === \"equal-size\"; } get isPopUp() { return this.resolvedSetpointInteraction === \"pop-up\"; } get setpointTouching() { return this.setpointOptions?.touching ?? false; } /** * The setpoint is rendered \"emphasised\" (primary size + SemiBold weight) when * it is the focus of attention: while actively adjusting (`touching`), or while * a flip-flop has the value away from the setpoint. Otherwise it is a secondary * (smaller, regular-weight) reference next to the value. */ get isSetpointEmphasized() { if (!this.hasSetpoint) { return false; } if (this.setpointTouching) { return true; } return this.isFlipFlop && !this.isAtSetpoint; } /** * The row's enhanced (in-command) colour state, applied uniformly to BOTH the * value and the setpoint — they are always either both neutral or both enhanced * (never a blue setpoint next to a grey value). Driven by `priority` only; * `valueOptions.weight` changes weight, not colour. */ get rowEnhanced() { return this.resolvedPriority === \"enhanced\"; } /** Primary value-typography size for the current density tier. */ get primarySize() { return readoutPrimarySize(this.resolvedSize); } /** Secondary (de-emphasised) value-typography size for the current density tier. */ get secondarySize() { return readoutSecondarySize(this.resolvedSize); } get valueSize() { return readoutValueSize({ primary: this.primarySize, secondary: this.secondarySize, setpointEmphasized: this.isSetpointEmphasized, equalSize: this.isEqualSize }); } get setpointSize() { return readoutSetpointSize({ primary: this.primarySize, secondary: this.secondarySize, emphasized: this.isSetpointEmphasized, equalSize: this.isEqualSize }); } /** Value font weight passes straight to obc-textbox; regular when unset. Colour is separate. */ get valueWeight() { return this.valueOptions?.weight ?? ObcTextboxFontWeight.regular; } /** Label size: `xs` for dense list rows unless overridden (see {@link ReadoutLabelOptions}). */ get labelSize() { return this.labelOptions?.size ?? ObcTextboxSize.xs; } /** * Label weight: SemiBold only for enhanced (in-command) rows, regular * otherwise — the designer reduced the amount of semibold in the interface * (Figma 6.1 review). */ get labelWeight() { return this.rowEnhanced ? ObcTextboxFontWeight.semibold : ObcTextboxFontWeight.regular; } /** Setpoint is SemiBold only while emphasised, otherwise regular weight. */ get setpointWeight() { return readoutSetpointWeight(this.isSetpointEmphasized); } numericFormatOptions(maxDigits) { return readoutNumericFormatOptions(maxDigits, this.resolvedFractionDigits); } /** classMap fragment for a block / source carrying per-block data quality. */ dataQualityClasses(dataQuality) { return readoutDataQualityClasses(dataQuality); } /** * Forward the matching list-item icon slot into the block's single `icon` * slot. The variant's default marker lives in `obc-readout-block` and shows * when nothing is assigned here (an empty forwarded slot flattens to nothing). */ renderForwardedIcon(variant) { if (variant === ReadoutBlockVariant.setpoint) { return html`<slot name=\"setpoint-icon\" slot=\"icon\"></slot>`; } if (variant === ReadoutBlockVariant.advice) { return html`<slot name=\"advice-icon\" slot=\"icon\"></slot>`; } return html`<slot name=\"value-icon\" slot=\"icon\"></slot>`; } renderBlock(config) { return html` <obc-readout-block exportparts=\"block, block-content, block-text, block-icon, degree\" .variant=${config.variant} .value=${config.value ?? null} .valueType=${config.valueType ?? ReadoutValueType.number} .size=${this.resolvedSize} .valueSize=${config.valueSize} .enhanced=${config.enhanced} .weight=${config.weight} .hasDegree=${config.hasDegree ?? false} .hasIcon=${config.hasIcon ?? false} .fractionDigits=${this.fractionDigits} .maxDigits=${this.maxDigits} .hintedZeros=${config.hintedZeros} .hasSignSpacer=${config.hasSignSpacer ?? false} .spaceReserver=${config.spaceReserver} .off=${config.off ?? false} .offText=${this.offText} .touching=${config.touching ?? false} .hidePhase=${config.hidePhase ?? ReadoutBlockHidePhase.none} .dataQuality=${config.dataQuality} .alert=${config.alert ?? false} .category=${config.category ?? ReadoutAdviceCategory.regular} .active=${config.active ?? false} > ${this.renderForwardedIcon(config.variant)} </obc-readout-block> `; } /** * A cap-height `°` column whose width scales with the value size. Used after * the value (as the value↔unit boundary, via {@link renderValueUnitGap}) and * inside the setpoint / advice blocks. `inherit` makes the glyph take the * surrounding block's colour (setpoint/advice); otherwise it uses the value * colour, optionally `enhanced`. */ renderDegreeGlyph(size, opts = {}) { return html` <span class=${classMap({ \"degree-column\": true, [`degree-${size}`]: true, \"tone-enhanced\": !opts.inherit && Boolean(opts.enhanced), \"degree-inherit\": Boolean(opts.inherit) })} part=\"degree\" > <obc-textbox class=\"degree-glyph\" .size=${size} alignment=\"center\" >°</obc-textbox > </span> `; } /** * The gap rendered between the value digits and the unit. * * - `hasDegree`: a cap-height `°` column whose width scales with the value * size (the `°` replaces the default gap). * - otherwise: the default 2px gap (only when a trailing unit follows). * * `hasDegreeSpacer` deliberately does NOT add anything here — it keeps the 2px * gap and instead widens the unit column via {@link renderDegreeSpacer} (a * spacer AFTER the unit). That way a non-degree row's value digits stay * aligned with degree rows (degree column width = spacer width + 2px gap) * while its unit shifts left. Mirrors Figma `1:2920` (spacer) / `1:2970` * (degree). * * TODO(designer): cross-size alignment is deferred. Degree rows of different * value sizes have different `°` column widths (6/8/12px), so their value digit * edges stagger by `degree-width`. For degree rows of mixed sizes you cannot * align the value digit edges AND keep the unit column aligned — resolving it * needs a design decision (a constant degree reserve, which widens the smaller * rows' `°`, OR pinning the value edge and letting the unit column stagger). */ renderValueUnitGap() { if (!this.hasValue) { return nothing; } if ((this.hasDegree ?? false) && !this.off) { return this.renderDegreeGlyph(this.valueSize, { enhanced: this.rowEnhanced }); } if (this.hasTrailingUnitBox) { return html`<span class=\"value-unit-gap\" aria-hidden=\"true\"></span>`; } return nothing; } /** * A spacer rendered AFTER the unit when `hasDegreeSpacer` is set on a * non-degree row. Its width (`degree-compensation-padding`) = the degree * column width minus the 2px gap, so the row's value digits align with degree * rows in the same column while its unit shifts left. See * {@link renderValueUnitGap}. */ renderDegreeSpacer() { const hasDegree = this.hasDegree ?? false; const hasDegreeSpacer = this.hasDegreeSpacer ?? false; if (hasDegree || !hasDegreeSpacer) { return nothing; } return html`<span class=\"degree-spacer\" part=\"degree-spacer\" aria-hidden=\"true\" ></span>`; } renderTextbox(role, text, reserver, state2) { const weight = role === \"label\" ? this.labelWeight : ObcTextboxFontWeight.regular; const size = role === \"label\" ? this.labelSize : ObcTextboxSize.xs; const box = html` <obc-textbox class=${classMap({ [role]: true, ...this.dataQualityClasses(state2?.dataQuality) })} part=${role} .size=${size} .fontWeight=${weight} alignment=\"left\" > ${text} ${reserver ? html`<span slot=\"length\">${reserver}</span>` : nothing} </obc-textbox> `; return wrapWithAlertFrame(state2?.alert ?? false, box); } renderValueCluster() { const popUpAtSetpoint = this.isPopUp && this.isAtSetpoint && !this.setpointTouching; const setpointHidePhase = resolveSetpointHidePhase( popUpAtSetpoint, this.deferredSetpointHidePhase ); return html` <div class=\"value-cluster\" part=\"value-cluster\"> ${this.hasAdvice ? this.renderBlock({ variant: ReadoutBlockVariant.advice, value: this.advice, valueSize: this.secondarySize, enhanced: false, weight: ObcTextboxFontWeight.regular, hintedZeros: this.adviceOptions?.hintedZeros ?? false, hasSignSpacer: this.adviceOptions?.hasSignSpacer ?? false, spaceReserver: this.adviceOptions?.spaceReserver, hasDegree: this.hasDegree ?? false, dataQuality: this.adviceOptions?.dataQuality, alert: this.adviceOptions?.alert, category: this.adviceOptions?.category, active: this.adviceOptions?.active }) : nothing} ${this.hasSetpoint ? this.renderBlock({ variant: ReadoutBlockVariant.setpoint, value: this.setpoint, valueSize: this.setpointSize, // Value and setpoint share the enhanced colour state (both neutral // or both enhanced); the setpoint is bold only while emphasised. enhanced: this.rowEnhanced, weight: this.setpointWeight, hintedZeros: this.setpointOptions?.hintedZeros ?? false, hasSignSpacer: this.setpointOptions?.hasSignSpacer ?? false, spaceReserver: this.setpointOptions?.spaceReserver, hasDegree: this.hasDegree ?? false, touching: this.setpointTouching, hidePhase: setpointHidePhase, dataQuality: this.setpointOptions?.dataQuality, alert: this.setpointOptions?.alert }) : nothing} ${this.renderValueReading()} </div> `; } /** * The value reading: the value block, its degree column and the trailing unit * grouped in one relatively-positioned wrapper so the value alert frame AND the * value data-quality chip can wrap value + degree + unit together (Figma * 58:10120). * * Moving the degree / unit into this wrapper (the new last child of * `.value-cluster`) preserves every existing gap, so the underlying content * stays column-aligned with or without the frame / chip. Both the value alert * (overlay) and the value data-quality chip are applied here — NOT inside * `obc-readout-block` — so they extend over the unit; setpoint/advice keep their * own block-level frame and chip. The chip uses `outline` (not `border`), so it * never shifts the value's width / column alignment. */ renderValueReading() { return html` <div class=${classMap({ \"value-reading\": true, ...this.dataQualityClasses(this.valueOptions?.dataQuality) })} part=\"value-reading\" > ${this.hasValue ? this.renderBlock({ variant: ReadoutBlockVariant.value, value: this.value, valueType: this.valueType, valueSize: this.valueSize, enhanced: this.rowEnhanced, weight: this.valueWeight, hintedZeros: this.valueOptions?.hintedZeros ?? false, hasSignSpacer: this.valueOptions?.hasSignSpacer ?? false, spaceReserver: this.valueOptions?.spaceReserver, off: this.off, hasIcon: this.valueOptions?.hasIcon ?? false }) : nothing} ${this.renderValueUnitGap()} <div class=\"unit-area\" part=\"unit-area\"> ${this.renderTrailingUnit()} ${this.renderDegreeSpacer()} </div> ${this.renderValueAlertOverlay()} </div> `; } /** * The value alert frame, drawn as a pure overlay around the value reading * (value + degree + unit). It reserves no space — the `obc-alert-frame` sits in * an absolutely-positioned box offset outward (see `.value-alert-overlay` in * the CSS) so its stroke is centred on the 4px/2px padding line and toggling it * never shifts content or row height. Renders only when `valueOptions.alert` is * a config object. */ renderValueAlertOverlay() { const alert = this.valueOptions?.alert; if (typeof alert !== \"object\" || alert === null) { return nothing; } const thickness = alert.thickness ?? ObcAlertFrameThickness.Small; return html` <div class=${classMap({ \"value-alert-overlay\": true, // The outward offset is thickness-dependent (see the CSS): large frames // draw a wider outline, so the box must sit further out to stay centred. \"thickness-large\": thickness === ObcAlertFrameThickness.Large })} aria-hidden=\"true\" > <obc-alert-frame part=\"value-alert-frame\" .type=${alert.type ?? ObcAlertFrameType.Regular} .thickness=${thickness} .status=${alert.status ?? AlertType.Alarm} .mode=${alert.mode ?? ObcAlertFrameMode.ackedActive} .showIcon=${alert.showIcon ?? false} .showAlertCategoryIcon=${alert.showAlertCategoryIcon ?? true} .wrapContent=${false} .fullWidth=${false} ></obc-alert-frame> </div> `; } renderLabelContainer() { const stacking = this.resolvedStacking; const showLeadingUnit = stacking === \"leading-unit\" && Boolean(this.unit); const showLeadingSrc = this.hasLeadingSrc && Boolean(this.src); return html` <div class=\"label-container\" part=\"label-container\"> ${this.hasLeadingIcon ? html`<span class=\"leading-icon\" aria-hidden=\"true\" ><slot name=\"leading-icon\"></slot ></span>` : nothing} <div class=\"label-stack\" part=\"label-stack\"> ${this.label ? this.renderTextbox( \"label\", this.label, this.labelOptions?.spaceReserver ) : nothing} ${showLeadingUnit ? this.renderTextbox( \"unit\", this.unit ?? \"\", this.unitOptions?.spaceReserver ) : nothing} ${showLeadingSrc ? this.renderSourceBlock() : nothing} </div> </div> `; } renderTrailingUnit() { if (!this.hasTrailingUnitBox) { return nothing; } return this.renderTextbox( \"unit\", this.unit ?? \"\", this.unitOptions?.spaceReserver ); } /** * The source text plus its optional state chip and deviation line. The * plain (regular, no-deviation) case renders the bare textbox; a state or a * deviation wraps it in the `.source-block` stack. */ renderSourceBlock() { const state2 = this.srcOptions?.state ?? \"regular\"; const deviation = this.srcOptions?.deviation; const hasDeviation = deviation !== void 0 && Number.isFinite(deviation); const box = this.renderTextbox( \"source\", this.src ?? \"\", this.srcOptions?.spaceReserver, this.srcOptions ); if (state2 === \"regular\" && !hasDeviation) { return box; } return html` <div class=${classMap({ \"source-block\": true, [`source-state-${state2}`]: state2 !== \"regular\" /* regular */ })} part=\"source-block\" > ${box} ${hasDeviation ? html`<span class=\"source-deviation\"> <obi-delta aria-hidden=\"true\"></obi-delta> <obc-textbox class=\"source-deviation-value\" .size=${ObcTextboxSize.xs} .tabularNums=${true} alignment=\"left\" >${deviation}</obc-textbox > </span>` : nothing} </div> `; } renderTrailingSource() { if (this.hasLeadingSrc || !this.src) { return nothing; } return html` <div class=\"divider\" part=\"divider\" aria-hidden=\"true\"></div> ${this.renderSourceBlock()} `; } renderContent() { return html` <div class=\"content\" part=\"content\"> ${this.renderLabelContainer()} <div class=\"value-area\" part=\"value-area\"> ${this.renderValueCluster()} </div> ${this.renderTrailingSource()} </div> `; } willUpdate(changed) { super.willUpdate(changed); assertReadoutValueType(\"obc-readout-list-item\", this.value, this.valueType); assertReadoutFractionDigits(\"obc-readout-list-item\", this.fractionDigits); } updated(changed) { super.updated(changed); const firstUpdate = !this.hasCompletedFirstUpdate; this.hasCompletedFirstUpdate = true; if (!this.isPopUp || this.setpointTouching) { this.clearDeferredSetpointHide(); return; } const shouldHide = this.hasSetpoint && this.isAtSetpoint; if (firstUpdate) { this.deferredSetpointHidePhase = shouldHide ? ReadoutBlockHidePhase.hidden : ReadoutBlockHidePhase.none; return; } if (!shouldHide) { this.clearDeferredSetpointHide(); return; } if (this.deferredSetpointHidePhase !== ReadoutBlockHidePhase.none) { return; } this.deferredSetpointHidePhase = ReadoutBlockHidePhase.hiding; window.clearTimeout(this.deferredSetpointHideTimer); this.deferredSetpointHideTimer = window.setTimeout(() => { this.deferredSetpointHidePhase = ReadoutBlockHidePhase.hidden; this.deferredSetpointHideTimer = void 0; }, 100); } clearDeferredSetpointHide() { if (this.deferredSetpointHidePhase !== ReadoutBlockHidePhase.none) { this.deferredSetpointHidePhase = ReadoutBlockHidePhase.none; } window.clearTimeout(this.deferredSetpointHideTimer); this.deferredSetpointHideTimer = void 0; } disconnectedCallback() { window.clearTimeout(this.deferredSetpointHideTimer); this.deferredSetpointHideTimer = void 0; if (this.deferredSetpointHidePhase === ReadoutBlockHidePhase.hiding) { this.deferredSetpointHidePhase = ReadoutBlockHidePhase.hidden; } super.disconnectedCallback(); } render() { const clickable = this.resolvedClickable; const dataQuality = this.dataQuality; const classes = classMap({ root: true, [`size-${this.resolvedSize}`]: true, [`stacking-${this.resolvedStacking}`]: true, [`priority-${this.resolvedPriority}`]: true, \"data-low-integrity\": dataQuality === ReadoutListItemDataQuality.lowIntegrity, \"data-invalid\": dataQuality === ReadoutListItemDataQuality.invalid, \"flip-flop\": this.isFlipFlop, clickable: Boolean(clickable), [`border-${clickable ? clickable.border : \"squared\"}`]: Boolean(clickable) }); const surface = html`<div class=\"surface\" part=\"surface\"> ${this.renderContent()} </div>`; const root = clickable ? html`<button class=${classes} part=\"root\" type=\"button\"> ${surface} </button>` : html`<div class=${classes} part=\"root\">${surface}</div>`; const alert = this.alert === true ? {} : this.alert; return wrapWithAlertFrame(alert, root, true); } }"
+          "default": "class extends LitElement { constructor() { super(...arguments); this.hasValue = true; this.value = null; this.valueType = ReadoutValueType.number; this.off = false; this.offText = \"OFF\"; this.hasSetpoint = false; this.hasAdvice = false; this.clickable = false; this.hasLeadingIcon = false; this.hasDegree = false; this.hasDegreeSpacer = false; this.fractionDigits = 0; this.maxDigits = 0; this.alert = false; this.showDebugOverlay = false; this.deferredSetpointHidePhase = ReadoutBlockHidePhase.none; this.hasCompletedFirstUpdate = false; } get resolvedSize() { return this.size ?? ReadoutListItemSize.small; } get resolvedStacking() { return this.stacking ?? \"trailing-unit\"; } /** Both leading-src stackings move the source into the label stack. */ get hasLeadingSrc() { const stacking = this.resolvedStacking; return stacking === \"leading-src\" || stacking === \"leading-src-inline\"; } get resolvedPriority() { return this.priority ?? \"regular\"; } /** * Whether a unit box follows the value: a unit, or a reserver alone — the * blank reserved column keeps a unit-less row aligned with its neighbours. */ get hasTrailingUnitBox() { return this.resolvedStacking !== \"leading-unit\" && (Boolean(this.unit) || Boolean(this.unitOptions?.spaceReserver)); } get resolvedFractionDigits() { return this.fractionDigits ?? 0; } get resolvedMaxDigits() { return resolveReadoutDigitCount(this.maxDigits); } /** * Whether a digit knob failed to arrive (`NaN` / `null` / `undefined`). * The raw knobs are forwarded to the blocks, which render the reading as * the unavailable dash (see `obc-readout-block.digitCountsMissing`); this * getter only keeps the setpoint comparison in agreement with what is * displayed. */ get digitCountsMissing() { return isReadoutDigitCountMissing(this.fractionDigits) || isReadoutDigitCountMissing(this.maxDigits); } get resolvedClickable() { const clickable = this.clickable; if (!clickable) { return false; } if (clickable === true) { return { border: \"squared\" /* squared */ }; } return { border: clickable.border ?? \"squared\" /* squared */ }; } get isAtSetpoint() { if (!this.hasSetpoint) { return false; } if (this.digitCountsMissing) { return false; } return isDisplayedAtSetpoint( resolveReadoutNumericValue(this.value, this.valueType) ?? null, this.setpoint, this.numericFormatOptions(this.resolvedMaxDigits) ); } get resolvedSetpointInteraction() { return this.setpointOptions?.interaction ?? \"always-visible\"; } get isFlipFlop() { return this.resolvedSetpointInteraction === \"flip-flop\"; } get isEqualSize() { return this.resolvedSetpointInteraction === \"equal-size\"; } get isPopUp() { return this.resolvedSetpointInteraction === \"pop-up\"; } get setpointTouching() { return this.setpointOptions?.touching ?? false; } /** * The setpoint is rendered \"emphasised\" (primary size + SemiBold weight) when * it is the focus of attention: while actively adjusting (`touching`), or while * a flip-flop has the value away from the setpoint. Otherwise it is a secondary * (smaller, regular-weight) reference next to the value. */ get isSetpointEmphasized() { if (!this.hasSetpoint) { return false; } if (this.setpointTouching) { return true; } return this.isFlipFlop && !this.isAtSetpoint; } /** * The row's enhanced (in-command) colour state, applied uniformly to BOTH the * value and the setpoint — they are always either both neutral or both enhanced * (never a blue setpoint next to a grey value). Driven by `priority` only; * `valueOptions.weight` changes weight, not colour. */ get rowEnhanced() { return this.resolvedPriority === \"enhanced\"; } /** Primary value-typography size for the current density tier. */ get primarySize() { return readoutPrimarySize(this.resolvedSize); } /** Secondary (de-emphasised) value-typography size for the current density tier. */ get secondarySize() { return readoutSecondarySize(this.resolvedSize); } get valueSize() { return readoutValueSize({ primary: this.primarySize, secondary: this.secondarySize, setpointEmphasized: this.isSetpointEmphasized, equalSize: this.isEqualSize }); } get setpointSize() { return readoutSetpointSize({ primary: this.primarySize, secondary: this.secondarySize, emphasized: this.isSetpointEmphasized, equalSize: this.isEqualSize }); } /** Value font weight passes straight to obc-textbox; regular when unset. Colour is separate. */ get valueWeight() { return this.valueOptions?.weight ?? ObcTextboxFontWeight.regular; } /** Label size: `xs` for dense list rows unless overridden (see {@link ReadoutLabelOptions}). */ get labelSize() { return this.labelOptions?.size ?? ObcTextboxSize.xs; } /** * Label weight: SemiBold only for enhanced (in-command) rows, regular * otherwise — the designer reduced the amount of semibold in the interface * (Figma 6.1 review). */ get labelWeight() { return this.rowEnhanced ? ObcTextboxFontWeight.semibold : ObcTextboxFontWeight.regular; } /** Setpoint is SemiBold only while emphasised, otherwise regular weight. */ get setpointWeight() { return readoutSetpointWeight(this.isSetpointEmphasized); } numericFormatOptions(maxDigits) { return readoutNumericFormatOptions(maxDigits, this.resolvedFractionDigits); } /** classMap fragment for a block / source carrying per-block data quality. */ dataQualityClasses(dataQuality) { return readoutDataQualityClasses(dataQuality); } /** * Forward the matching list-item icon slot into the block's single `icon` * slot. The variant's default marker lives in `obc-readout-block` and shows * when nothing is assigned here (an empty forwarded slot flattens to nothing). */ renderForwardedIcon(variant) { if (variant === ReadoutBlockVariant.setpoint) { return html`<slot name=\"setpoint-icon\" slot=\"icon\"></slot>`; } if (variant === ReadoutBlockVariant.advice) { return html`<slot name=\"advice-icon\" slot=\"icon\"></slot>`; } return html`<slot name=\"value-icon\" slot=\"icon\"></slot>`; } renderBlock(config) { return html` <obc-readout-block exportparts=\"block, block-content, block-text, block-icon, degree\" .variant=${config.variant} .value=${config.value ?? null} .valueType=${config.valueType ?? ReadoutValueType.number} .size=${this.resolvedSize} .valueSize=${config.valueSize} .enhanced=${config.enhanced} .weight=${config.weight} .hasDegree=${config.hasDegree ?? false} .hasIcon=${config.hasIcon ?? false} .fractionDigits=${this.fractionDigits} .maxDigits=${this.maxDigits} .hintedZeros=${config.hintedZeros} .hasSignSpacer=${config.hasSignSpacer ?? false} .spaceReserver=${config.spaceReserver} .off=${config.off ?? false} .offText=${this.offText} .touching=${config.touching ?? false} .hidePhase=${config.hidePhase ?? ReadoutBlockHidePhase.none} .dataQuality=${config.dataQuality} .alert=${config.alert ?? false} .category=${config.category ?? ReadoutAdviceCategory.regular} .active=${config.active ?? false} > ${this.renderForwardedIcon(config.variant)} </obc-readout-block> `; } /** * A cap-height `°` column whose width scales with the value size. Used after * the value (as the value↔unit boundary, via {@link renderValueUnitGap}) and * inside the setpoint / advice blocks. `inherit` makes the glyph take the * surrounding block's colour (setpoint/advice); otherwise it uses the value * colour, optionally `enhanced`. */ renderDegreeGlyph(size, opts = {}) { return html` <span class=${classMap({ \"degree-column\": true, [`degree-${size}`]: true, \"tone-enhanced\": !opts.inherit && Boolean(opts.enhanced), \"degree-inherit\": Boolean(opts.inherit) })} part=\"degree\" > <obc-textbox class=\"degree-glyph\" .size=${size} alignment=\"center\" >°</obc-textbox > </span> `; } /** * The gap rendered between the value digits and the unit. * * - `hasDegree`: a cap-height `°` column whose width scales with the value * size (the `°` replaces the default gap). * - otherwise: the default 2px gap (only when a trailing unit follows). * * `hasDegreeSpacer` deliberately does NOT add anything here — it keeps the 2px * gap and instead widens the unit column via {@link renderDegreeSpacer} (a * spacer AFTER the unit). That way a non-degree row's value digits stay * aligned with degree rows (degree column width = spacer width + 2px gap) * while its unit shifts left. Mirrors Figma `1:2920` (spacer) / `1:2970` * (degree). * * TODO(designer): cross-size alignment is deferred. Degree rows of different * value sizes have different `°` column widths (6/8/12px), so their value digit * edges stagger by `degree-width`. For degree rows of mixed sizes you cannot * align the value digit edges AND keep the unit column aligned — resolving it * needs a design decision (a constant degree reserve, which widens the smaller * rows' `°`, OR pinning the value edge and letting the unit column stagger). */ renderValueUnitGap() { if (!this.hasValue) { return nothing; } if ((this.hasDegree ?? false) && !this.off) { return this.renderDegreeGlyph(this.valueSize, { enhanced: this.rowEnhanced }); } if (this.hasTrailingUnitBox) { return html`<span class=\"value-unit-gap\" aria-hidden=\"true\"></span>`; } return nothing; } /** * A spacer rendered AFTER the unit when `hasDegreeSpacer` is set on a * non-degree row. Its width (`degree-compensation-padding`) = the degree * column width minus the 2px gap, so the row's value digits align with degree * rows in the same column while its unit shifts left. See * {@link renderValueUnitGap}. */ renderDegreeSpacer() { const hasDegree = this.hasDegree ?? false; const hasDegreeSpacer = this.hasDegreeSpacer ?? false; if (hasDegree || !hasDegreeSpacer) { return nothing; } return html`<span class=\"degree-spacer\" part=\"degree-spacer\" aria-hidden=\"true\" ></span>`; } renderTextbox(role, text, reserver, state2) { const weight = role === \"label\" ? this.labelWeight : ObcTextboxFontWeight.regular; const size = role === \"label\" ? this.labelSize : ObcTextboxSize.xs; const box = html` <obc-textbox class=${classMap({ [role]: true, ...this.dataQualityClasses(state2?.dataQuality) })} part=${role} .size=${size} .fontWeight=${weight} alignment=\"left\" > ${text} ${reserver ? html`<span slot=\"length\">${reserver}</span>` : nothing} </obc-textbox> `; return wrapWithAlertFrame(state2?.alert ?? false, box); } renderValueCluster() { const popUpAtSetpoint = this.isPopUp && this.isAtSetpoint && !this.setpointTouching; const setpointHidePhase = resolveSetpointHidePhase( popUpAtSetpoint, this.deferredSetpointHidePhase ); return html` <div class=\"value-cluster\" part=\"value-cluster\"> ${this.hasAdvice ? this.renderBlock({ variant: ReadoutBlockVariant.advice, value: this.advice, valueSize: this.secondarySize, enhanced: false, weight: ObcTextboxFontWeight.regular, hintedZeros: this.adviceOptions?.hintedZeros ?? false, hasSignSpacer: this.adviceOptions?.hasSignSpacer ?? false, spaceReserver: this.adviceOptions?.spaceReserver, hasDegree: this.hasDegree ?? false, dataQuality: this.adviceOptions?.dataQuality, alert: this.adviceOptions?.alert, category: this.adviceOptions?.category, active: this.adviceOptions?.active }) : nothing} ${this.hasSetpoint ? this.renderBlock({ variant: ReadoutBlockVariant.setpoint, value: this.setpoint, valueSize: this.setpointSize, // Value and setpoint share the enhanced colour state (both neutral // or both enhanced); the setpoint is bold only while emphasised. enhanced: this.rowEnhanced, weight: this.setpointWeight, hintedZeros: this.setpointOptions?.hintedZeros ?? false, hasSignSpacer: this.setpointOptions?.hasSignSpacer ?? false, spaceReserver: this.setpointOptions?.spaceReserver, hasDegree: this.hasDegree ?? false, touching: this.setpointTouching, hidePhase: setpointHidePhase, dataQuality: this.setpointOptions?.dataQuality, alert: this.setpointOptions?.alert }) : nothing} ${this.renderValueReading()} </div> `; } /** * The value reading: the value block, its degree column and the trailing unit * grouped in one relatively-positioned wrapper so the value alert frame AND the * value data-quality chip can wrap value + degree + unit together (Figma * 58:10120). * * Moving the degree / unit into this wrapper (the new last child of * `.value-cluster`) preserves every existing gap, so the underlying content * stays column-aligned with or without the frame / chip. Both the value alert * (overlay) and the value data-quality chip are applied here — NOT inside * `obc-readout-block` — so they extend over the unit; setpoint/advice keep their * own block-level frame and chip. The chip uses `outline` (not `border`), so it * never shifts the value's width / column alignment. */ renderValueReading() { return html` <div class=${classMap({ \"value-reading\": true, ...this.dataQualityClasses(this.valueOptions?.dataQuality) })} part=\"value-reading\" > ${this.hasValue ? this.renderBlock({ variant: ReadoutBlockVariant.value, value: this.value, valueType: this.valueType, valueSize: this.valueSize, enhanced: this.rowEnhanced, weight: this.valueWeight, hintedZeros: this.valueOptions?.hintedZeros ?? false, hasSignSpacer: this.valueOptions?.hasSignSpacer ?? false, spaceReserver: this.valueOptions?.spaceReserver, off: this.off, hasIcon: this.valueOptions?.hasIcon ?? false }) : nothing} ${this.renderValueUnitGap()} <div class=\"unit-area\" part=\"unit-area\"> ${this.renderTrailingUnit()} ${this.renderDegreeSpacer()} </div> ${this.renderValueAlertOverlay()} </div> `; } /** * The value alert frame, drawn as a pure overlay around the value reading * (value + degree + unit). It reserves no space — the `obc-alert-frame` sits in * an absolutely-positioned box offset outward (see `.value-alert-overlay` in * the CSS) so its stroke is centred on the 4px/2px padding line and toggling it * never shifts content or row height. Renders only when `valueOptions.alert` is * a config object. */ renderValueAlertOverlay() { const alert = this.valueOptions?.alert; if (typeof alert !== \"object\" || alert === null) { return nothing; } const thickness = alert.thickness ?? ObcAlertFrameThickness.Small; return html` <div class=${classMap({ \"value-alert-overlay\": true, // The outward offset is thickness-dependent (see the CSS): large frames // draw a wider outline, so the box must sit further out to stay centred. \"thickness-large\": thickness === ObcAlertFrameThickness.Large })} aria-hidden=\"true\" > <obc-alert-frame part=\"value-alert-frame\" .type=${alert.type ?? ObcAlertFrameType.Regular} .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} .fullWidth=${false} ></obc-alert-frame> </div> `; } renderLabelContainer() { const stacking = this.resolvedStacking; const showLeadingUnit = stacking === \"leading-unit\" && Boolean(this.unit); const showLeadingSrc = this.hasLeadingSrc && Boolean(this.src); return html` <div class=\"label-container\" part=\"label-container\"> ${this.hasLeadingIcon ? html`<span class=\"leading-icon\" aria-hidden=\"true\" ><slot name=\"leading-icon\"></slot ></span>` : nothing} <div class=\"label-stack\" part=\"label-stack\"> ${this.label ? this.renderTextbox( \"label\", this.label, this.labelOptions?.spaceReserver ) : nothing} ${showLeadingUnit ? this.renderTextbox( \"unit\", this.unit ?? \"\", this.unitOptions?.spaceReserver ) : nothing} ${showLeadingSrc ? this.renderSourceBlock() : nothing} </div> </div> `; } renderTrailingUnit() { if (!this.hasTrailingUnitBox) { return nothing; } return this.renderTextbox( \"unit\", this.unit ?? \"\", this.unitOptions?.spaceReserver ); } /** * The source text plus its optional state chip and deviation line. The * plain (regular, no-deviation) case renders the bare textbox; a state or a * deviation wraps it in the `.source-block` stack. */ renderSourceBlock() { const state2 = this.srcOptions?.state ?? \"regular\"; const deviation = this.srcOptions?.deviation; const hasDeviation = deviation !== void 0 && Number.isFinite(deviation); const box = this.renderTextbox( \"source\", this.src ?? \"\", this.srcOptions?.spaceReserver, this.srcOptions ); if (state2 === \"regular\" && !hasDeviation) { return box; } return html` <div class=${classMap({ \"source-block\": true, [`source-state-${state2}`]: state2 !== \"regular\" /* regular */ })} part=\"source-block\" > ${box} ${hasDeviation ? html`<span class=\"source-deviation\"> <obi-delta aria-hidden=\"true\"></obi-delta> <obc-textbox class=\"source-deviation-value\" .size=${ObcTextboxSize.xs} .tabularNums=${true} alignment=\"left\" >${deviation}</obc-textbox > </span>` : nothing} </div> `; } renderTrailingSource() { if (this.hasLeadingSrc || !this.src) { return nothing; } return html` <div class=\"divider\" part=\"divider\" aria-hidden=\"true\"></div> ${this.renderSourceBlock()} `; } renderContent() { return html` <div class=\"content\" part=\"content\"> ${this.renderLabelContainer()} <div class=\"value-area\" part=\"value-area\"> ${this.renderValueCluster()} </div> ${this.renderTrailingSource()} </div> `; } willUpdate(changed) { super.willUpdate(changed); assertReadoutValueType(\"obc-readout-list-item\", this.value, this.valueType); assertReadoutFractionDigits(\"obc-readout-list-item\", this.fractionDigits); } updated(changed) { super.updated(changed); const firstUpdate = !this.hasCompletedFirstUpdate; this.hasCompletedFirstUpdate = true; if (!this.isPopUp || this.setpointTouching) { this.clearDeferredSetpointHide(); return; } const shouldHide = this.hasSetpoint && this.isAtSetpoint; if (firstUpdate) { this.deferredSetpointHidePhase = shouldHide ? ReadoutBlockHidePhase.hidden : ReadoutBlockHidePhase.none; return; } if (!shouldHide) { this.clearDeferredSetpointHide(); return; } if (this.deferredSetpointHidePhase !== ReadoutBlockHidePhase.none) { return; } this.deferredSetpointHidePhase = ReadoutBlockHidePhase.hiding; window.clearTimeout(this.deferredSetpointHideTimer); this.deferredSetpointHideTimer = window.setTimeout(() => { this.deferredSetpointHidePhase = ReadoutBlockHidePhase.hidden; this.deferredSetpointHideTimer = void 0; }, 100); } clearDeferredSetpointHide() { if (this.deferredSetpointHidePhase !== ReadoutBlockHidePhase.none) { this.deferredSetpointHidePhase = ReadoutBlockHidePhase.none; } window.clearTimeout(this.deferredSetpointHideTimer); this.deferredSetpointHideTimer = void 0; } disconnectedCallback() { window.clearTimeout(this.deferredSetpointHideTimer); this.deferredSetpointHideTimer = void 0; if (this.deferredSetpointHidePhase === ReadoutBlockHidePhase.hiding) { this.deferredSetpointHidePhase = ReadoutBlockHidePhase.hidden; } super.disconnectedCallback(); } render() { const clickable = this.resolvedClickable; const dataQuality = this.dataQuality; const classes = classMap({ root: true, [`size-${this.resolvedSize}`]: true, [`stacking-${this.resolvedStacking}`]: true, [`priority-${this.resolvedPriority}`]: true, \"data-low-integrity\": dataQuality === ReadoutListItemDataQuality.lowIntegrity, \"data-invalid\": dataQuality === ReadoutListItemDataQuality.invalid, \"flip-flop\": this.isFlipFlop, clickable: Boolean(clickable), [`border-${clickable ? clickable.border : \"squared\"}`]: Boolean(clickable) }); const surface = html`<div class=\"surface\" part=\"surface\"> ${this.renderContent()} </div>`; const root = clickable ? html`<button class=${classes} part=\"root\" type=\"button\"> ${surface} </button>` : html`<div class=${classes} part=\"root\">${surface}</div>`; const alert = this.alert === true ? {} : this.alert; return wrapWithAlertFrame(alert, root, true); } }"
         }
       ],
       "exports": [
@@ -10262,7 +10282,7 @@
         {
           "kind": "variable",
           "name": "ObcReadout",
-          "default": "class extends LitElement { constructor() { super(...arguments); this.hasValue = true; this.value = null; this.valueType = ReadoutValueType.number; this.off = false; this.offText = \"OFF\"; this.hasSetpoint = false; this.hasAdvice = false; this.hasDegree = false; this.hasDegreeSpacer = false; this.hasLeadingIcon = false; this.fractionDigits = 0; this.maxDigits = 0; this.alert = false; this.showDebugOverlay = false; this.deferredSetpointHidePhase = ReadoutBlockHidePhase.none; this.hasCompletedFirstUpdate = false; this.hasWarnedHorizontalSize = false; this.sourcePickerContentVisible = false; this.sourcePickerOptions = []; this.onWindowPointerDown = (event) => { if (!this.sourcePickerContentVisible) { return; } if (event.composedPath().includes(this)) { return; } this.sourcePickerContentVisible = false; }; this.syncSourcePickerOptions = () => { this.sourcePickerOptions = this.getSourcePickerNavigationItems().map( (item, index) => { const { itemLabel, itemValue } = this.getSourcePickerItemInfo( item, index ); return { value: itemValue, label: itemLabel, icon: this.createSourcePickerOptionIcon(item) }; } ); }; } get resolvedSize() { if (this.isHorizontal) { return ReadoutSize.large; } return this.size ?? ReadoutSize.small; } get resolvedPriority() { return this.priority ?? ReadoutPriority.regular; } get resolvedDirection() { return this.direction ?? \"vertical\"; } get resolvedStacking() { return this.stacking ?? \"inline\"; } get resolvedAlignment() { return this.alignment ?? \"vertical\"; } get isHorizontal() { return this.resolvedDirection === \"horizontal\"; } get resolvedFractionDigits() { return this.fractionDigits ?? 0; } get resolvedMaxDigits() { return resolveReadoutDigitCount(this.maxDigits); } /** * Whether a digit knob failed to arrive (`NaN` / `null` / `undefined`). * The raw knobs are forwarded to the blocks, which render the reading as * the unavailable dash (see `obc-readout-block.digitCountsMissing`); this * getter only keeps the setpoint comparison in agreement with what is * displayed. */ get digitCountsMissing() { return isReadoutDigitCountMissing(this.fractionDigits) || isReadoutDigitCountMissing(this.maxDigits); } get hasSrc() { return this.src !== void 0 && this.src.trim() !== \"\"; } get resolvedSourceInteraction() { return this.srcOptions?.interaction ?? \"none\"; } get isAtSetpoint() { if (!this.hasSetpoint) { return false; } if (this.digitCountsMissing) { return false; } return isDisplayedAtSetpoint( resolveReadoutNumericValue(this.value, this.valueType) ?? null, this.setpoint, this.numericFormatOptions(this.resolvedMaxDigits) ); } get resolvedSetpointInteraction() { return this.setpointOptions?.interaction ?? ReadoutSetpointInteraction.alwaysVisible; } get isFlipFlop() { return this.resolvedSetpointInteraction === ReadoutSetpointInteraction.flipFlop; } get isEqualSize() { return this.resolvedSetpointInteraction === ReadoutSetpointInteraction.equalSize; } get isPopUp() { return this.resolvedSetpointInteraction === ReadoutSetpointInteraction.popUp; } get setpointTouching() { return this.setpointOptions?.touching ?? false; } /** * Whether the setpoint interaction re-sizes or hides blocks at runtime — * flip-flop (emphasis swap) and pop-up (touch swap + fade-out) — the modes * that need the width/height reservation so the readout never shifts (see * {@link renderSetpointWidthReserve}). */ get hasDynamicSetpoint() { return this.hasSetpoint && (this.isFlipFlop || this.isPopUp); } /** * The setpoint is rendered \"emphasised\" (primary size + SemiBold weight) when * it is the focus of attention: while actively adjusting (`touching`), or while * a flip-flop has the value away from the setpoint. Otherwise it is a secondary * (smaller, regular-weight) reference next to the value. */ get isSetpointEmphasized() { if (!this.hasSetpoint) { return false; } if (this.setpointTouching) { return true; } return this.isFlipFlop && !this.isAtSetpoint; } /** * The readout's enhanced (in-command) colour state, applied uniformly to BOTH * the value and the setpoint — they are always either both neutral or both * enhanced (never a blue setpoint next to a grey value). Driven by `priority` * only; `valueOptions.weight` changes weight, not colour. */ get rowEnhanced() { return this.resolvedPriority === ReadoutPriority.enhanced; } /** Primary value-typography size for the current density tier. */ get primarySize() { return readoutPrimarySize(this.resolvedSize); } /** Secondary (de-emphasised) value-typography size for the current density tier. */ get secondarySize() { return readoutSecondarySize(this.resolvedSize); } get valueSize() { return readoutValueSize({ primary: this.primarySize, secondary: this.secondarySize, setpointEmphasized: this.isSetpointEmphasized, equalSize: this.isEqualSize }); } get setpointSize() { return readoutSetpointSize({ primary: this.primarySize, secondary: this.secondarySize, emphasized: this.isSetpointEmphasized, equalSize: this.isEqualSize }); } /** Value font weight passes straight to obc-textbox; regular when unset. Colour is separate. */ get valueWeight() { return this.valueOptions?.weight ?? ObcTextboxFontWeight.regular; } /** * Label size. The Figma 6.1 title block defaults large readouts to `s` — a * scannable label should not sit at the smallest permitted size — while * small/medium tiers stay `xs`; `labelOptions.size` overrides either way * (per the design team, for context / density / secondary instruments). * TODO(designer): the medium-tier default is unverified in the new sheets * (only XS and S exist on the title's size axis). */ get labelSize() { return this.labelOptions?.size ?? (this.resolvedSize === ReadoutSize.large ? ObcTextboxSize.s : ObcTextboxSize.xs); } /** * Label weight: SemiBold only for enhanced (in-command) readouts, regular * otherwise — the designer reduced the amount of semibold in the interface * (Figma 6.1 review). */ get labelWeight() { return this.rowEnhanced ? ObcTextboxFontWeight.semibold : ObcTextboxFontWeight.regular; } /** Setpoint is SemiBold only while emphasised, otherwise regular weight. */ get setpointWeight() { return readoutSetpointWeight(this.isSetpointEmphasized); } numericFormatOptions(maxDigits) { return readoutNumericFormatOptions(maxDigits, this.resolvedFractionDigits); } /** classMap fragment for a block / source carrying per-block data quality. */ dataQualityClasses(dataQuality) { return readoutDataQualityClasses(dataQuality); } /** * Forward the matching readout icon slot into the block's single `icon` * slot. The variant's default marker lives in `obc-readout-block` and shows * when nothing is assigned here (an empty forwarded slot flattens to nothing). */ renderForwardedIcon(variant) { if (variant === ReadoutBlockVariant.setpoint) { return html`<slot name=\"setpoint-icon\" slot=\"icon\"></slot>`; } if (variant === ReadoutBlockVariant.advice) { return html`<slot name=\"advice-icon\" slot=\"icon\"></slot>`; } return html`<slot name=\"value-icon\" slot=\"icon\"></slot>`; } renderBlock(config) { return html` <obc-readout-block exportparts=\"block, block-content, block-text, block-icon, degree\" .variant=${config.variant} .value=${config.value ?? null} .valueType=${config.valueType ?? ReadoutValueType.number} .size=${this.resolvedSize} .valueSize=${config.valueSize} .enhanced=${config.enhanced} .weight=${config.weight} .hasDegree=${config.hasDegree ?? false} .hasIcon=${config.hasIcon ?? false} .fractionDigits=${this.fractionDigits} .maxDigits=${this.maxDigits} .hintedZeros=${config.hintedZeros} .hasSignSpacer=${config.hasSignSpacer ?? false} .spaceReserver=${config.spaceReserver} .off=${config.off ?? false} .offText=${this.offText} .touching=${config.touching ?? false} .hidePhase=${config.hidePhase ?? ReadoutBlockHidePhase.none} .dataQuality=${config.dataQuality} .alert=${config.alert ?? false} .category=${config.category ?? ReadoutAdviceCategory.regular} .active=${config.active ?? false} > ${config.ghost ? nothing : this.renderForwardedIcon(config.variant)} </obc-readout-block> `; } /** * A cap-height `°` column whose width scales with the value size, rendered * after the value block. Setpoint / advice blocks render their own degree via * `obc-readout-block`. */ renderDegreeGlyph(size) { return html` <span class=${classMap({ \"degree-column\": true, [`degree-${size}`]: true, \"tone-enhanced\": this.rowEnhanced })} part=\"degree\" > <obc-textbox class=\"degree-glyph\" .size=${size} alignment=\"center\" >°</obc-textbox > </span> `; } /** * The column rendered after the value digits: * * - `hasDegree`: a cap-height `°` column whose width scales with the value size. * - `hasDegreeSpacer` (non-degree readouts): an invisible reserve of the same * width, so this readout's value digits stay aligned with degree readouts * in the same column. */ renderDegreeColumn(size = this.valueSize) { if ((this.hasDegree ?? false) && !this.off) { return this.renderDegreeGlyph(size); } if (this.hasDegreeSpacer ?? false) { return html`<span class=\"degree-spacer\" part=\"degree-spacer\" aria-hidden=\"true\" ></span>`; } return nothing; } renderTextbox(role, text, reserver, blockState) { const weight = role === \"label\" ? this.labelWeight : ObcTextboxFontWeight.regular; const size = role === \"label\" ? this.labelSize : ObcTextboxSize.xs; const box = html` <obc-textbox class=${classMap({ [role]: true, ...this.dataQualityClasses(blockState?.dataQuality) })} part=${role} .size=${size} .fontWeight=${weight} alignment=\"left\" > ${text} ${reserver ? html`<span slot=\"length\">${reserver}</span>` : nothing} </obc-textbox> `; return wrapWithAlertFrame(blockState?.alert ?? false, box); } get setpointHidePhase() { const popUpAtSetpoint = this.isPopUp && this.isAtSetpoint && !this.setpointTouching; return resolveSetpointHidePhase( popUpAtSetpoint, this.deferredSetpointHidePhase ); } // `hasDegree` is deliberately NOT forwarded to the advice / setpoint blocks: // the unit is written once per readout and the degree follows the same rule // (Figma 6.1). `obc-readout-list-item` keeps its own per-row convention. renderAdviceBlock() { return this.renderBlock({ variant: ReadoutBlockVariant.advice, value: this.advice, valueSize: this.secondarySize, enhanced: false, weight: ObcTextboxFontWeight.regular, hintedZeros: this.adviceOptions?.hintedZeros ?? false, hasSignSpacer: this.adviceOptions?.hasSignSpacer ?? false, spaceReserver: this.adviceOptions?.spaceReserver, dataQuality: this.adviceOptions?.dataQuality, alert: this.adviceOptions?.alert, category: this.adviceOptions?.category, active: this.adviceOptions?.active }); } renderSetpointBlock() { return this.renderBlock({ variant: ReadoutBlockVariant.setpoint, value: this.setpoint, valueSize: this.setpointSize, // Value and setpoint share the enhanced colour state (both neutral // or both enhanced); the setpoint is bold only while emphasised. enhanced: this.rowEnhanced, weight: this.setpointWeight, hintedZeros: this.setpointOptions?.hintedZeros ?? false, hasSignSpacer: this.setpointOptions?.hasSignSpacer ?? false, spaceReserver: this.setpointOptions?.spaceReserver, touching: this.setpointTouching, hidePhase: this.setpointHidePhase, dataQuality: this.setpointOptions?.dataQuality, alert: this.setpointOptions?.alert }); } /** * The value reading: the value block and its degree column (or spacer) * grouped in one relatively-positioned wrapper so the value alert frame AND * the value data-quality chip can wrap both together. Unlike * `obc-readout-list-item` the unit is not part of the reading — it lives in * the label/unit meta zone. */ renderValueReading() { return html` <div class=${classMap({ \"value-reading\": true, ...this.dataQualityClasses(this.valueOptions?.dataQuality) })} part=\"value-reading\" > ${this.renderBlock({ variant: ReadoutBlockVariant.value, value: this.value, valueType: this.valueType, valueSize: this.valueSize, enhanced: this.rowEnhanced, weight: this.valueWeight, hintedZeros: this.valueOptions?.hintedZeros ?? false, hasSignSpacer: this.valueOptions?.hasSignSpacer ?? false, spaceReserver: this.valueOptions?.spaceReserver, off: this.off, hasIcon: this.valueOptions?.hasIcon ?? false })} ${this.renderDegreeColumn()} ${this.renderValueAlertOverlay()} </div> `; } /** * The value alert frame, drawn as a pure overlay around the value reading * (value + degree). It reserves no space — the `obc-alert-frame` sits in an * absolutely-positioned box offset outward (see `.value-alert-overlay` in the * CSS) so its stroke is centred on the 4px/2px padding line and toggling it * never shifts content. Renders only when `valueOptions.alert` is a config * object. */ renderValueAlertOverlay() { const alert = this.valueOptions?.alert; if (typeof alert !== \"object\" || alert === null) { return nothing; } const thickness = alert.thickness ?? ObcAlertFrameThickness.Small; return html` <div class=${classMap({ \"value-alert-overlay\": true, // The outward offset is thickness-dependent (see the CSS): large frames // draw a wider outline, so the box must sit further out to stay centred. \"thickness-large\": thickness === ObcAlertFrameThickness.Large })} aria-hidden=\"true\" > <obc-alert-frame part=\"value-alert-frame\" .type=${alert.type ?? ObcAlertFrameType.Regular} .thickness=${thickness} .status=${alert.status ?? AlertType.Alarm} .mode=${alert.mode ?? ObcAlertFrameMode.ackedActive} .showIcon=${alert.showIcon ?? false} .showAlertCategoryIcon=${alert.showAlertCategoryIcon ?? true} .wrapContent=${false} .fullWidth=${false} ></obc-alert-frame> </div> `; } /** The label/unit meta zone; `stacking` picks the inline or stacked arrangement. */ renderMetaZone() { if (!this.label && !this.unit) { return nothing; } const stacked = this.isHorizontal || this.resolvedStacking === \"stacked\"; return html` <div class=${classMap({ meta: true, \"meta-inline\": !stacked, \"meta-stacked\": stacked, \"label-only\": !!this.label && !this.unit, \"unit-only\": !!this.unit && !this.label })} part=\"meta-wrapper\" > ${this.hasLeadingIcon ? html`<span class=\"leading-icon\" aria-hidden=\"true\" ><slot name=\"leading-icon\"></slot ></span>` : nothing} <div class=\"meta-labels\" part=\"meta-labels\"> ${this.label ? this.renderTextbox( \"label\", this.label, this.labelOptions?.spaceReserver ) : nothing} ${this.unit ? this.renderTextbox( \"unit\", this.unit, this.unitOptions?.spaceReserver ) : nothing} </div> </div> `; } renderSourceContent() { const interaction = this.resolvedSourceInteraction; const src = this.src ?? \"\"; const buttonClasses = classMap({ \"source-button\": true, ...this.dataQualityClasses(this.srcOptions?.dataQuality) }); if (interaction === \"picker\") { const button = html` <obc-button class=${buttonClasses} variant=\"flat\" .fullWidth=${false} showTrailingIcon @click=${() => { this.sourcePickerContentVisible = !this.sourcePickerContentVisible; }} > <obi-drop-down-google slot=\"trailing-icon\"></obi-drop-down-google> ${src} </obc-button> `; return wrapWithAlertFrame(this.srcOptions?.alert ?? false, button); } if (interaction === \"flyout\") { const button = html` <obc-button class=${buttonClasses} variant=\"flat\" .fullWidth=${false} showTrailingIcon @click=${() => { this.dispatchEvent( new CustomEvent(\"source-flyout-click\", { bubbles: true, composed: true, detail: { src } }) ); }} > <obi-chevron-right-google slot=\"trailing-icon\" ></obi-chevron-right-google> ${src} </obc-button> `; return wrapWithAlertFrame(this.srcOptions?.alert ?? false, button); } return this.renderSourceBlock(src); } /** * The plain (non-interactive) source: the textbox plus its optional state * chip and deviation line. The regular no-deviation case renders the bare * textbox; a state or deviation wraps it in the `.source-block` stack. The * picker / flyout button variants do not carry state / deviation yet — * TODO(designer): undefined in the 6.1 sheets. */ renderSourceBlock(src) { const state2 = this.srcOptions?.state ?? ReadoutSourceState.regular; const deviation = this.srcOptions?.deviation; const hasDeviation = deviation !== void 0 && Number.isFinite(deviation); const box = this.renderTextbox( \"source\", src, this.srcOptions?.spaceReserver, this.srcOptions ); if (state2 === ReadoutSourceState.regular && !hasDeviation) { return box; } return html` <div class=${classMap({ \"source-block\": true, [`source-state-${state2}`]: state2 !== ReadoutSourceState.regular })} part=\"source-block\" > ${box} ${hasDeviation ? html`<span class=\"source-deviation\"> <obi-delta aria-hidden=\"true\"></obi-delta> <obc-textbox class=\"source-deviation-value\" .size=${ObcTextboxSize.xs} .tabularNums=${true} alignment=\"left\" >${deviation}</obc-textbox > </span>` : nothing} </div> `; } /** * The source row (vertical) / segment (horizontal). Only the horizontal * direction draws an auto divider before the source — the Figma 6.1 review * (node 95:24490 \"remove dividers\", 95:26891 \"Source-divider are there\") * keeps the vertical source row divider-free while the horizontal flow * separates the source with a vertical rule. */ renderSource() { if (!this.hasSrc) { return nothing; } return html` ${this.isHorizontal ? html`<div class=\"divider divider-vertical\" part=\"divider\" aria-hidden=\"true\" ></div>` : nothing} <div class=\"source-row\" part=\"source-wrapper\"> ${this.renderSourceContent()} </div> `; } // ---------- Source picker (context menu built from src-picker-content) ---------- getSourcePickerNavigationItems() { const assignedElements = this.sourcePickerSlot?.assignedElements({ flatten: true }) ?? []; return assignedElements.flatMap((element) => { if (!(element instanceof HTMLElement)) { return []; } if (element.localName === \"obc-navigation-item\") { return [element]; } return Array.from( element.querySelectorAll(\"obc-navigation-item\") ); }); } createSourcePickerOptionIcon(element) { const iconElement = element.querySelector('[slot=\"icon\"]'); if (!(iconElement instanceof HTMLElement)) { return void 0; } return html`${iconElement.cloneNode(true)}`; } getSourcePickerItemInfo(item, index) { const itemWithValues = item; const itemLabel = itemWithValues.label || item.getAttribute(\"label\") || \"\"; const itemValue = item.getAttribute(\"data-value\") || itemWithValues.value || item.getAttribute(\"value\") || itemLabel || `source-option-${index}`; return { itemLabel, itemValue }; } findSourcePickerOptionElement(value) { const navigationItems = this.getSourcePickerNavigationItems(); for (const [index, item] of navigationItems.entries()) { const { itemValue } = this.getSourcePickerItemInfo(item, index); if (itemValue === value) { return item; } } return void 0; } handleSourcePickerItemClick(event) { this.dispatchEvent( new CustomEvent(\"source-change\", { bubbles: true, composed: true, detail: { value: event.detail.value, label: event.detail.option?.label } }) ); this.findSourcePickerOptionElement(event.detail.value)?.click(); this.sourcePickerContentVisible = false; } /** * The context menu highlights options by their VALUE, while `src` holds the * displayed source text — which may be an option's label when the two * differ (e.g. `data-value=\"gps-1\"` with label \"GPS 1\"). Resolve the current * source to the matching option's value (by value or label) so the open * picker always highlights the active source. */ get selectedSourceValues() { if (!this.src) { return []; } const match = this.sourcePickerOptions.find( (option) => option.value === this.src || option.label === this.src ); return [match?.value ?? this.src]; } renderSourcePickerContent() { if (this.resolvedSourceInteraction !== \"picker\" || !this.sourcePickerContentVisible) { return nothing; } return html` <obc-context-menu-input .type=${ContextMenuType.Regular} .options=${this.sourcePickerOptions} .selectedValues=${this.selectedSourceValues} class=\"source-picker-content\" @item-click=${this.handleSourcePickerItemClick} @close=${() => { this.sourcePickerContentVisible = false; }} ></obc-context-menu-input> `; } renderSourcePickerSlot() { return html` <slot name=\"src-picker-content\" hidden @slotchange=${this.syncSourcePickerOptions} ></slot> `; } // ---------- Layouts ---------- /** * An invisible primary-size duplicate of a dynamic setpoint row's content, * stacked under the visible block in the same grid cell purely to reserve * width. With both rows permanently holding their emphasised width, the * widest row — and therefore the readout's total width — stays constant * while a flip-flop swaps the value/setpoint sizes, while a touch swap * runs, and while a pop-up setpoint fades out, so the meta zone and source * never shift. This is the vertical analogue of the horizontal arrangement, * where the swapped pair sits on one row and its summed width is constant * by construction (the designer's flip-flop invariant). Only the vertical * direction needs it; `always-visible` layouts are untouched. */ renderSetpointWidthReserve(kind) { if (!this.hasDynamicSetpoint || this.isHorizontal) { return nothing; } const content = kind === \"setpoint\" ? this.renderBlock({ variant: ReadoutBlockVariant.setpoint, value: this.setpoint, valueSize: this.primarySize, enhanced: false, // The emphasised setpoint is SemiBold — reserve its widest form. // No degree: the visible setpoint block carries none (the degree // renders on the actual value only), so the ghost mirrors it. weight: ObcTextboxFontWeight.semibold, hintedZeros: this.setpointOptions?.hintedZeros ?? false, hasSignSpacer: this.setpointOptions?.hasSignSpacer ?? false, spaceReserver: this.setpointOptions?.spaceReserver, alert: this.setpointOptions?.alert, ghost: true }) : html`${this.renderBlock({ variant: ReadoutBlockVariant.value, value: this.value, valueType: this.valueType, valueSize: this.primarySize, enhanced: false, weight: this.valueWeight, hintedZeros: this.valueOptions?.hintedZeros ?? false, hasSignSpacer: this.valueOptions?.hasSignSpacer ?? false, spaceReserver: this.valueOptions?.spaceReserver, off: this.off, hasIcon: this.valueOptions?.hasIcon ?? false, ghost: true })}${this.renderDegreeColumn(this.primarySize)}`; return html`<div class=\"setpoint-width-reserve\" aria-hidden=\"true\"> ${content} </div>`; } /** * Vertical: advice / setpoint / value rows right-aligned in a cluster, the * label+unit meta zone below, then the source row under an auto divider. * `alignment` re-aligns the whole column for stacked readouts. */ renderVerticalLayout() { return html` <div class=\"value-cluster\" part=\"value-cluster\"> ${this.hasAdvice ? html`<div class=\"advice-row\" part=\"advice-wrapper\"> ${this.renderAdviceBlock()} </div>` : nothing} ${this.hasSetpoint ? html`<div class=\"setpoint-row\" part=\"setpoint-wrapper\"> ${this.renderSetpointBlock()} ${this.renderSetpointWidthReserve(\"setpoint\")} </div>` : nothing} ${this.hasValue ? html`<div class=\"value-row\" part=\"value-wrapper\"> ${this.renderValueReading()} ${this.renderSetpointWidthReserve(\"value\")} </div>` : nothing} </div> ${this.renderMetaZone()} ${this.renderSource()} `; } /** * Horizontal: advice, setpoint, value and the stacked label/unit meta flow on * one cap-height-aligned row, with the source at the end after an auto * divider. */ renderHorizontalLayout() { return html` <div class=\"inline-row\" part=\"value-cluster\"> ${this.hasAdvice ? html`<div class=\"advice-row\" part=\"advice-wrapper\"> ${this.renderAdviceBlock()} </div>` : nothing} ${this.hasSetpoint ? html`<div class=\"setpoint-row\" part=\"setpoint-wrapper\"> ${this.renderSetpointBlock()} </div>` : nothing} ${this.hasValue ? html`<div class=\"value-row\" part=\"value-wrapper\"> ${this.renderValueReading()} </div>` : nothing} ${this.renderMetaZone()} ${this.renderSource()} </div> `; } willUpdate(changed) { super.willUpdate(changed); assertReadoutValueType(\"obc-readout\", this.value, this.valueType); assertReadoutFractionDigits(\"obc-readout\", this.fractionDigits); this.warnHorizontalSizeIgnored(); } /** * A horizontal readout discards any `size` but `large` (see `resolvedSize`). * A silent discard is indistinguishable from a bug to a consumer, so each * offending element says so once and logs itself for locating (#1182). * A removed `size` attribute arrives as `null` and counts as unset. */ warnHorizontalSizeIgnored() { if (this.hasWarnedHorizontalSize || !this.isHorizontal || !this.size || this.size === ReadoutSize.large) { return; } this.hasWarnedHorizontalSize = true; console.warn( `[obc-readout] size=\"${this.size}\" is ignored when direction=\"horizontal\": the horizontal arrangement exists in the large tier only. Remove the size, or use direction=\"vertical\" for the small / medium tiers.`, this ); } updated(changed) { super.updated(changed); if (changed.has(\"sourcePickerContentVisible\")) { if (this.sourcePickerContentVisible) { window.addEventListener(\"pointerdown\", this.onWindowPointerDown, true); } else { window.removeEventListener( \"pointerdown\", this.onWindowPointerDown, true ); } } const firstUpdate = !this.hasCompletedFirstUpdate; this.hasCompletedFirstUpdate = true; if (!this.isPopUp || this.setpointTouching) { this.clearDeferredSetpointHide(); return; } const shouldHide = this.hasSetpoint && this.isAtSetpoint; if (firstUpdate) { this.deferredSetpointHidePhase = shouldHide ? ReadoutBlockHidePhase.hidden : ReadoutBlockHidePhase.none; return; } if (!shouldHide) { this.clearDeferredSetpointHide(); return; } if (this.deferredSetpointHidePhase !== ReadoutBlockHidePhase.none) { return; } this.deferredSetpointHidePhase = ReadoutBlockHidePhase.hiding; window.clearTimeout(this.deferredSetpointHideTimer); this.deferredSetpointHideTimer = window.setTimeout(() => { this.deferredSetpointHidePhase = ReadoutBlockHidePhase.hidden; this.deferredSetpointHideTimer = void 0; }, 100); } clearDeferredSetpointHide() { if (this.deferredSetpointHidePhase !== ReadoutBlockHidePhase.none) { this.deferredSetpointHidePhase = ReadoutBlockHidePhase.none; } window.clearTimeout(this.deferredSetpointHideTimer); this.deferredSetpointHideTimer = void 0; } disconnectedCallback() { window.removeEventListener(\"pointerdown\", this.onWindowPointerDown, true); window.clearTimeout(this.deferredSetpointHideTimer); this.deferredSetpointHideTimer = void 0; if (this.deferredSetpointHidePhase === ReadoutBlockHidePhase.hiding) { this.deferredSetpointHidePhase = ReadoutBlockHidePhase.hidden; } super.disconnectedCallback(); } render() { const dataQuality = this.dataQuality; const classes = classMap({ readout: true, [`size-${this.resolvedSize}`]: true, [`direction-${this.resolvedDirection}`]: true, [`stacking-${this.resolvedStacking}`]: true, [`alignment-${this.resolvedAlignment}`]: true, [`priority-${this.resolvedPriority}`]: true, \"data-low-integrity\": dataQuality === ReadoutDataQuality.lowIntegrity, \"data-invalid\": dataQuality === ReadoutDataQuality.invalid, \"flip-flop\": this.isFlipFlop, \"setpoint-dynamic\": this.hasDynamicSetpoint }); const root = html` <div class=${classes} part=\"root\"> ${this.isHorizontal ? this.renderHorizontalLayout() : this.renderVerticalLayout()} ${this.renderSourcePickerSlot()} </div> ${this.renderSourcePickerContent()} `; const alert = this.alert === true ? {} : this.alert; return wrapWithAlertFrame(alert, root); } }"
+          "default": "class extends LitElement { constructor() { super(...arguments); this.hasValue = true; this.value = null; this.valueType = ReadoutValueType.number; this.off = false; this.offText = \"OFF\"; this.hasSetpoint = false; this.hasAdvice = false; this.hasDegree = false; this.hasDegreeSpacer = false; this.hasLeadingIcon = false; this.fractionDigits = 0; this.maxDigits = 0; this.alert = false; this.showDebugOverlay = false; this.deferredSetpointHidePhase = ReadoutBlockHidePhase.none; this.hasCompletedFirstUpdate = false; this.hasWarnedHorizontalSize = false; this.sourcePickerContentVisible = false; this.sourcePickerOptions = []; this.onWindowPointerDown = (event) => { if (!this.sourcePickerContentVisible) { return; } if (event.composedPath().includes(this)) { return; } this.sourcePickerContentVisible = false; }; this.syncSourcePickerOptions = () => { this.sourcePickerOptions = this.getSourcePickerNavigationItems().map( (item, index) => { const { itemLabel, itemValue } = this.getSourcePickerItemInfo( item, index ); return { value: itemValue, label: itemLabel, icon: this.createSourcePickerOptionIcon(item) }; } ); }; } get resolvedSize() { if (this.isHorizontal) { return ReadoutSize.large; } return this.size ?? ReadoutSize.small; } get resolvedPriority() { return this.priority ?? ReadoutPriority.regular; } get resolvedDirection() { return this.direction ?? \"vertical\"; } get resolvedStacking() { return this.stacking ?? \"inline\"; } get resolvedAlignment() { return this.alignment ?? \"vertical\"; } get isHorizontal() { return this.resolvedDirection === \"horizontal\"; } get resolvedFractionDigits() { return this.fractionDigits ?? 0; } get resolvedMaxDigits() { return resolveReadoutDigitCount(this.maxDigits); } /** * Whether a digit knob failed to arrive (`NaN` / `null` / `undefined`). * The raw knobs are forwarded to the blocks, which render the reading as * the unavailable dash (see `obc-readout-block.digitCountsMissing`); this * getter only keeps the setpoint comparison in agreement with what is * displayed. */ get digitCountsMissing() { return isReadoutDigitCountMissing(this.fractionDigits) || isReadoutDigitCountMissing(this.maxDigits); } get hasSrc() { return this.src !== void 0 && this.src.trim() !== \"\"; } get resolvedSourceInteraction() { return this.srcOptions?.interaction ?? \"none\"; } get isAtSetpoint() { if (!this.hasSetpoint) { return false; } if (this.digitCountsMissing) { return false; } return isDisplayedAtSetpoint( resolveReadoutNumericValue(this.value, this.valueType) ?? null, this.setpoint, this.numericFormatOptions(this.resolvedMaxDigits) ); } get resolvedSetpointInteraction() { return this.setpointOptions?.interaction ?? ReadoutSetpointInteraction.alwaysVisible; } get isFlipFlop() { return this.resolvedSetpointInteraction === ReadoutSetpointInteraction.flipFlop; } get isEqualSize() { return this.resolvedSetpointInteraction === ReadoutSetpointInteraction.equalSize; } get isPopUp() { return this.resolvedSetpointInteraction === ReadoutSetpointInteraction.popUp; } get setpointTouching() { return this.setpointOptions?.touching ?? false; } /** * Whether the setpoint interaction re-sizes or hides blocks at runtime — * flip-flop (emphasis swap) and pop-up (touch swap + fade-out) — the modes * that need the width/height reservation so the readout never shifts (see * {@link renderSetpointWidthReserve}). */ get hasDynamicSetpoint() { return this.hasSetpoint && (this.isFlipFlop || this.isPopUp); } /** * The setpoint is rendered \"emphasised\" (primary size + SemiBold weight) when * it is the focus of attention: while actively adjusting (`touching`), or while * a flip-flop has the value away from the setpoint. Otherwise it is a secondary * (smaller, regular-weight) reference next to the value. */ get isSetpointEmphasized() { if (!this.hasSetpoint) { return false; } if (this.setpointTouching) { return true; } return this.isFlipFlop && !this.isAtSetpoint; } /** * The readout's enhanced (in-command) colour state, applied uniformly to BOTH * the value and the setpoint — they are always either both neutral or both * enhanced (never a blue setpoint next to a grey value). Driven by `priority` * only; `valueOptions.weight` changes weight, not colour. */ get rowEnhanced() { return this.resolvedPriority === ReadoutPriority.enhanced; } /** Primary value-typography size for the current density tier. */ get primarySize() { return readoutPrimarySize(this.resolvedSize); } /** Secondary (de-emphasised) value-typography size for the current density tier. */ get secondarySize() { return readoutSecondarySize(this.resolvedSize); } get valueSize() { return readoutValueSize({ primary: this.primarySize, secondary: this.secondarySize, setpointEmphasized: this.isSetpointEmphasized, equalSize: this.isEqualSize }); } get setpointSize() { return readoutSetpointSize({ primary: this.primarySize, secondary: this.secondarySize, emphasized: this.isSetpointEmphasized, equalSize: this.isEqualSize }); } /** Value font weight passes straight to obc-textbox; regular when unset. Colour is separate. */ get valueWeight() { return this.valueOptions?.weight ?? ObcTextboxFontWeight.regular; } /** * Label size. The Figma 6.1 title block defaults large readouts to `s` — a * scannable label should not sit at the smallest permitted size — while * small/medium tiers stay `xs`; `labelOptions.size` overrides either way * (per the design team, for context / density / secondary instruments). * TODO(designer): the medium-tier default is unverified in the new sheets * (only XS and S exist on the title's size axis). */ get labelSize() { return this.labelOptions?.size ?? (this.resolvedSize === ReadoutSize.large ? ObcTextboxSize.s : ObcTextboxSize.xs); } /** * Label weight: SemiBold only for enhanced (in-command) readouts, regular * otherwise — the designer reduced the amount of semibold in the interface * (Figma 6.1 review). */ get labelWeight() { return this.rowEnhanced ? ObcTextboxFontWeight.semibold : ObcTextboxFontWeight.regular; } /** Setpoint is SemiBold only while emphasised, otherwise regular weight. */ get setpointWeight() { return readoutSetpointWeight(this.isSetpointEmphasized); } numericFormatOptions(maxDigits) { return readoutNumericFormatOptions(maxDigits, this.resolvedFractionDigits); } /** classMap fragment for a block / source carrying per-block data quality. */ dataQualityClasses(dataQuality) { return readoutDataQualityClasses(dataQuality); } /** * Forward the matching readout icon slot into the block's single `icon` * slot. The variant's default marker lives in `obc-readout-block` and shows * when nothing is assigned here (an empty forwarded slot flattens to nothing). */ renderForwardedIcon(variant) { if (variant === ReadoutBlockVariant.setpoint) { return html`<slot name=\"setpoint-icon\" slot=\"icon\"></slot>`; } if (variant === ReadoutBlockVariant.advice) { return html`<slot name=\"advice-icon\" slot=\"icon\"></slot>`; } return html`<slot name=\"value-icon\" slot=\"icon\"></slot>`; } renderBlock(config) { return html` <obc-readout-block exportparts=\"block, block-content, block-text, block-icon, degree\" .variant=${config.variant} .value=${config.value ?? null} .valueType=${config.valueType ?? ReadoutValueType.number} .size=${this.resolvedSize} .valueSize=${config.valueSize} .enhanced=${config.enhanced} .weight=${config.weight} .hasDegree=${config.hasDegree ?? false} .hasIcon=${config.hasIcon ?? false} .fractionDigits=${this.fractionDigits} .maxDigits=${this.maxDigits} .hintedZeros=${config.hintedZeros} .hasSignSpacer=${config.hasSignSpacer ?? false} .spaceReserver=${config.spaceReserver} .off=${config.off ?? false} .offText=${this.offText} .touching=${config.touching ?? false} .hidePhase=${config.hidePhase ?? ReadoutBlockHidePhase.none} .dataQuality=${config.dataQuality} .alert=${config.alert ?? false} .category=${config.category ?? ReadoutAdviceCategory.regular} .active=${config.active ?? false} > ${config.ghost ? nothing : this.renderForwardedIcon(config.variant)} </obc-readout-block> `; } /** * A cap-height `°` column whose width scales with the value size, rendered * after the value block. Setpoint / advice blocks render their own degree via * `obc-readout-block`. */ renderDegreeGlyph(size) { return html` <span class=${classMap({ \"degree-column\": true, [`degree-${size}`]: true, \"tone-enhanced\": this.rowEnhanced })} part=\"degree\" > <obc-textbox class=\"degree-glyph\" .size=${size} alignment=\"center\" >°</obc-textbox > </span> `; } /** * The column rendered after the value digits: * * - `hasDegree`: a cap-height `°` column whose width scales with the value size. * - `hasDegreeSpacer` (non-degree readouts): an invisible reserve of the same * width, so this readout's value digits stay aligned with degree readouts * in the same column. */ renderDegreeColumn(size = this.valueSize) { if ((this.hasDegree ?? false) && !this.off) { return this.renderDegreeGlyph(size); } if (this.hasDegreeSpacer ?? false) { return html`<span class=\"degree-spacer\" part=\"degree-spacer\" aria-hidden=\"true\" ></span>`; } return nothing; } renderTextbox(role, text, reserver, blockState) { const weight = role === \"label\" ? this.labelWeight : ObcTextboxFontWeight.regular; const size = role === \"label\" ? this.labelSize : ObcTextboxSize.xs; const box = html` <obc-textbox class=${classMap({ [role]: true, ...this.dataQualityClasses(blockState?.dataQuality) })} part=${role} .size=${size} .fontWeight=${weight} alignment=\"left\" > ${text} ${reserver ? html`<span slot=\"length\">${reserver}</span>` : nothing} </obc-textbox> `; return wrapWithAlertFrame(blockState?.alert ?? false, box); } get setpointHidePhase() { const popUpAtSetpoint = this.isPopUp && this.isAtSetpoint && !this.setpointTouching; return resolveSetpointHidePhase( popUpAtSetpoint, this.deferredSetpointHidePhase ); } // `hasDegree` is deliberately NOT forwarded to the advice / setpoint blocks: // the unit is written once per readout and the degree follows the same rule // (Figma 6.1). `obc-readout-list-item` keeps its own per-row convention. renderAdviceBlock() { return this.renderBlock({ variant: ReadoutBlockVariant.advice, value: this.advice, valueSize: this.secondarySize, enhanced: false, weight: ObcTextboxFontWeight.regular, hintedZeros: this.adviceOptions?.hintedZeros ?? false, hasSignSpacer: this.adviceOptions?.hasSignSpacer ?? false, spaceReserver: this.adviceOptions?.spaceReserver, dataQuality: this.adviceOptions?.dataQuality, alert: this.adviceOptions?.alert, category: this.adviceOptions?.category, active: this.adviceOptions?.active }); } renderSetpointBlock() { return this.renderBlock({ variant: ReadoutBlockVariant.setpoint, value: this.setpoint, valueSize: this.setpointSize, // Value and setpoint share the enhanced colour state (both neutral // or both enhanced); the setpoint is bold only while emphasised. enhanced: this.rowEnhanced, weight: this.setpointWeight, hintedZeros: this.setpointOptions?.hintedZeros ?? false, hasSignSpacer: this.setpointOptions?.hasSignSpacer ?? false, spaceReserver: this.setpointOptions?.spaceReserver, touching: this.setpointTouching, hidePhase: this.setpointHidePhase, dataQuality: this.setpointOptions?.dataQuality, alert: this.setpointOptions?.alert }); } /** * The value reading: the value block and its degree column (or spacer) * grouped in one relatively-positioned wrapper so the value alert frame AND * the value data-quality chip can wrap both together. Unlike * `obc-readout-list-item` the unit is not part of the reading — it lives in * the label/unit meta zone. */ renderValueReading() { return html` <div class=${classMap({ \"value-reading\": true, ...this.dataQualityClasses(this.valueOptions?.dataQuality) })} part=\"value-reading\" > ${this.renderBlock({ variant: ReadoutBlockVariant.value, value: this.value, valueType: this.valueType, valueSize: this.valueSize, enhanced: this.rowEnhanced, weight: this.valueWeight, hintedZeros: this.valueOptions?.hintedZeros ?? false, hasSignSpacer: this.valueOptions?.hasSignSpacer ?? false, spaceReserver: this.valueOptions?.spaceReserver, off: this.off, hasIcon: this.valueOptions?.hasIcon ?? false })} ${this.renderDegreeColumn()} ${this.renderValueAlertOverlay()} </div> `; } /** * The value alert frame, drawn as a pure overlay around the value reading * (value + degree). It reserves no space — the `obc-alert-frame` sits in an * absolutely-positioned box offset outward (see `.value-alert-overlay` in the * CSS) so its stroke is centred on the 4px/2px padding line and toggling it * never shifts content. Renders only when `valueOptions.alert` is a config * object. */ renderValueAlertOverlay() { const alert = this.valueOptions?.alert; if (typeof alert !== \"object\" || alert === null) { return nothing; } const thickness = alert.thickness ?? ObcAlertFrameThickness.Small; return html` <div class=${classMap({ \"value-alert-overlay\": true, // The outward offset is thickness-dependent (see the CSS): large frames // draw a wider outline, so the box must sit further out to stay centred. \"thickness-large\": thickness === ObcAlertFrameThickness.Large })} aria-hidden=\"true\" > <obc-alert-frame part=\"value-alert-frame\" .type=${alert.type ?? ObcAlertFrameType.Regular} .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} .fullWidth=${false} ></obc-alert-frame> </div> `; } /** The label/unit meta zone; `stacking` picks the inline or stacked arrangement. */ renderMetaZone() { if (!this.label && !this.unit) { return nothing; } const stacked = this.isHorizontal || this.resolvedStacking === \"stacked\"; return html` <div class=${classMap({ meta: true, \"meta-inline\": !stacked, \"meta-stacked\": stacked, \"label-only\": !!this.label && !this.unit, \"unit-only\": !!this.unit && !this.label })} part=\"meta-wrapper\" > ${this.hasLeadingIcon ? html`<span class=\"leading-icon\" aria-hidden=\"true\" ><slot name=\"leading-icon\"></slot ></span>` : nothing} <div class=\"meta-labels\" part=\"meta-labels\"> ${this.label ? this.renderTextbox( \"label\", this.label, this.labelOptions?.spaceReserver ) : nothing} ${this.unit ? this.renderTextbox( \"unit\", this.unit, this.unitOptions?.spaceReserver ) : nothing} </div> </div> `; } renderSourceContent() { const interaction = this.resolvedSourceInteraction; const src = this.src ?? \"\"; const buttonClasses = classMap({ \"source-button\": true, ...this.dataQualityClasses(this.srcOptions?.dataQuality) }); if (interaction === \"picker\") { const button = html` <obc-button class=${buttonClasses} variant=\"flat\" .fullWidth=${false} showTrailingIcon @click=${() => { this.sourcePickerContentVisible = !this.sourcePickerContentVisible; }} > <obi-drop-down-google slot=\"trailing-icon\"></obi-drop-down-google> ${src} </obc-button> `; return wrapWithAlertFrame(this.srcOptions?.alert ?? false, button); } if (interaction === \"flyout\") { const button = html` <obc-button class=${buttonClasses} variant=\"flat\" .fullWidth=${false} showTrailingIcon @click=${() => { this.dispatchEvent( new CustomEvent(\"source-flyout-click\", { bubbles: true, composed: true, detail: { src } }) ); }} > <obi-chevron-right-google slot=\"trailing-icon\" ></obi-chevron-right-google> ${src} </obc-button> `; return wrapWithAlertFrame(this.srcOptions?.alert ?? false, button); } return this.renderSourceBlock(src); } /** * The plain (non-interactive) source: the textbox plus its optional state * chip and deviation line. The regular no-deviation case renders the bare * textbox; a state or deviation wraps it in the `.source-block` stack. The * picker / flyout button variants do not carry state / deviation yet — * TODO(designer): undefined in the 6.1 sheets. */ renderSourceBlock(src) { const state2 = this.srcOptions?.state ?? ReadoutSourceState.regular; const deviation = this.srcOptions?.deviation; const hasDeviation = deviation !== void 0 && Number.isFinite(deviation); const box = this.renderTextbox( \"source\", src, this.srcOptions?.spaceReserver, this.srcOptions ); if (state2 === ReadoutSourceState.regular && !hasDeviation) { return box; } return html` <div class=${classMap({ \"source-block\": true, [`source-state-${state2}`]: state2 !== ReadoutSourceState.regular })} part=\"source-block\" > ${box} ${hasDeviation ? html`<span class=\"source-deviation\"> <obi-delta aria-hidden=\"true\"></obi-delta> <obc-textbox class=\"source-deviation-value\" .size=${ObcTextboxSize.xs} .tabularNums=${true} alignment=\"left\" >${deviation}</obc-textbox > </span>` : nothing} </div> `; } /** * The source row (vertical) / segment (horizontal). Only the horizontal * direction draws an auto divider before the source — the Figma 6.1 review * (node 95:24490 \"remove dividers\", 95:26891 \"Source-divider are there\") * keeps the vertical source row divider-free while the horizontal flow * separates the source with a vertical rule. */ renderSource() { if (!this.hasSrc) { return nothing; } return html` ${this.isHorizontal ? html`<div class=\"divider divider-vertical\" part=\"divider\" aria-hidden=\"true\" ></div>` : nothing} <div class=\"source-row\" part=\"source-wrapper\"> ${this.renderSourceContent()} </div> `; } // ---------- Source picker (context menu built from src-picker-content) ---------- getSourcePickerNavigationItems() { const assignedElements = this.sourcePickerSlot?.assignedElements({ flatten: true }) ?? []; return assignedElements.flatMap((element) => { if (!(element instanceof HTMLElement)) { return []; } if (element.localName === \"obc-navigation-item\") { return [element]; } return Array.from( element.querySelectorAll(\"obc-navigation-item\") ); }); } createSourcePickerOptionIcon(element) { const iconElement = element.querySelector('[slot=\"icon\"]'); if (!(iconElement instanceof HTMLElement)) { return void 0; } return html`${iconElement.cloneNode(true)}`; } getSourcePickerItemInfo(item, index) { const itemWithValues = item; const itemLabel = itemWithValues.label || item.getAttribute(\"label\") || \"\"; const itemValue = item.getAttribute(\"data-value\") || itemWithValues.value || item.getAttribute(\"value\") || itemLabel || `source-option-${index}`; return { itemLabel, itemValue }; } findSourcePickerOptionElement(value) { const navigationItems = this.getSourcePickerNavigationItems(); for (const [index, item] of navigationItems.entries()) { const { itemValue } = this.getSourcePickerItemInfo(item, index); if (itemValue === value) { return item; } } return void 0; } handleSourcePickerItemClick(event) { this.dispatchEvent( new CustomEvent(\"source-change\", { bubbles: true, composed: true, detail: { value: event.detail.value, label: event.detail.option?.label } }) ); this.findSourcePickerOptionElement(event.detail.value)?.click(); this.sourcePickerContentVisible = false; } /** * The context menu highlights options by their VALUE, while `src` holds the * displayed source text — which may be an option's label when the two * differ (e.g. `data-value=\"gps-1\"` with label \"GPS 1\"). Resolve the current * source to the matching option's value (by value or label) so the open * picker always highlights the active source. */ get selectedSourceValues() { if (!this.src) { return []; } const match = this.sourcePickerOptions.find( (option) => option.value === this.src || option.label === this.src ); return [match?.value ?? this.src]; } renderSourcePickerContent() { if (this.resolvedSourceInteraction !== \"picker\" || !this.sourcePickerContentVisible) { return nothing; } return html` <obc-context-menu-input .type=${ContextMenuType.Regular} .options=${this.sourcePickerOptions} .selectedValues=${this.selectedSourceValues} class=\"source-picker-content\" @item-click=${this.handleSourcePickerItemClick} @close=${() => { this.sourcePickerContentVisible = false; }} ></obc-context-menu-input> `; } renderSourcePickerSlot() { return html` <slot name=\"src-picker-content\" hidden @slotchange=${this.syncSourcePickerOptions} ></slot> `; } // ---------- Layouts ---------- /** * An invisible primary-size duplicate of a dynamic setpoint row's content, * stacked under the visible block in the same grid cell purely to reserve * width. With both rows permanently holding their emphasised width, the * widest row — and therefore the readout's total width — stays constant * while a flip-flop swaps the value/setpoint sizes, while a touch swap * runs, and while a pop-up setpoint fades out, so the meta zone and source * never shift. This is the vertical analogue of the horizontal arrangement, * where the swapped pair sits on one row and its summed width is constant * by construction (the designer's flip-flop invariant). Only the vertical * direction needs it; `always-visible` layouts are untouched. */ renderSetpointWidthReserve(kind) { if (!this.hasDynamicSetpoint || this.isHorizontal) { return nothing; } const content = kind === \"setpoint\" ? this.renderBlock({ variant: ReadoutBlockVariant.setpoint, value: this.setpoint, valueSize: this.primarySize, enhanced: false, // The emphasised setpoint is SemiBold — reserve its widest form. // No degree: the visible setpoint block carries none (the degree // renders on the actual value only), so the ghost mirrors it. weight: ObcTextboxFontWeight.semibold, hintedZeros: this.setpointOptions?.hintedZeros ?? false, hasSignSpacer: this.setpointOptions?.hasSignSpacer ?? false, spaceReserver: this.setpointOptions?.spaceReserver, alert: this.setpointOptions?.alert, ghost: true }) : html`${this.renderBlock({ variant: ReadoutBlockVariant.value, value: this.value, valueType: this.valueType, valueSize: this.primarySize, enhanced: false, weight: this.valueWeight, hintedZeros: this.valueOptions?.hintedZeros ?? false, hasSignSpacer: this.valueOptions?.hasSignSpacer ?? false, spaceReserver: this.valueOptions?.spaceReserver, off: this.off, hasIcon: this.valueOptions?.hasIcon ?? false, ghost: true })}${this.renderDegreeColumn(this.primarySize)}`; return html`<div class=\"setpoint-width-reserve\" aria-hidden=\"true\"> ${content} </div>`; } /** * Vertical: advice / setpoint / value rows right-aligned in a cluster, the * label+unit meta zone below, then the source row under an auto divider. * `alignment` re-aligns the whole column for stacked readouts. */ renderVerticalLayout() { return html` <div class=\"value-cluster\" part=\"value-cluster\"> ${this.hasAdvice ? html`<div class=\"advice-row\" part=\"advice-wrapper\"> ${this.renderAdviceBlock()} </div>` : nothing} ${this.hasSetpoint ? html`<div class=\"setpoint-row\" part=\"setpoint-wrapper\"> ${this.renderSetpointBlock()} ${this.renderSetpointWidthReserve(\"setpoint\")} </div>` : nothing} ${this.hasValue ? html`<div class=\"value-row\" part=\"value-wrapper\"> ${this.renderValueReading()} ${this.renderSetpointWidthReserve(\"value\")} </div>` : nothing} </div> ${this.renderMetaZone()} ${this.renderSource()} `; } /** * Horizontal: advice, setpoint, value and the stacked label/unit meta flow on * one cap-height-aligned row, with the source at the end after an auto * divider. */ renderHorizontalLayout() { return html` <div class=\"inline-row\" part=\"value-cluster\"> ${this.hasAdvice ? html`<div class=\"advice-row\" part=\"advice-wrapper\"> ${this.renderAdviceBlock()} </div>` : nothing} ${this.hasSetpoint ? html`<div class=\"setpoint-row\" part=\"setpoint-wrapper\"> ${this.renderSetpointBlock()} </div>` : nothing} ${this.hasValue ? html`<div class=\"value-row\" part=\"value-wrapper\"> ${this.renderValueReading()} </div>` : nothing} ${this.renderMetaZone()} ${this.renderSource()} </div> `; } willUpdate(changed) { super.willUpdate(changed); assertReadoutValueType(\"obc-readout\", this.value, this.valueType); assertReadoutFractionDigits(\"obc-readout\", this.fractionDigits); this.warnHorizontalSizeIgnored(); } /** * A horizontal readout discards any `size` but `large` (see `resolvedSize`). * A silent discard is indistinguishable from a bug to a consumer, so each * offending element says so once and logs itself for locating (#1182). * A removed `size` attribute arrives as `null` and counts as unset. */ warnHorizontalSizeIgnored() { if (this.hasWarnedHorizontalSize || !this.isHorizontal || !this.size || this.size === ReadoutSize.large) { return; } this.hasWarnedHorizontalSize = true; console.warn( `[obc-readout] size=\"${this.size}\" is ignored when direction=\"horizontal\": the horizontal arrangement exists in the large tier only. Remove the size, or use direction=\"vertical\" for the small / medium tiers.`, this ); } updated(changed) { super.updated(changed); if (changed.has(\"sourcePickerContentVisible\")) { if (this.sourcePickerContentVisible) { window.addEventListener(\"pointerdown\", this.onWindowPointerDown, true); } else { window.removeEventListener( \"pointerdown\", this.onWindowPointerDown, true ); } } const firstUpdate = !this.hasCompletedFirstUpdate; this.hasCompletedFirstUpdate = true; if (!this.isPopUp || this.setpointTouching) { this.clearDeferredSetpointHide(); return; } const shouldHide = this.hasSetpoint && this.isAtSetpoint; if (firstUpdate) { this.deferredSetpointHidePhase = shouldHide ? ReadoutBlockHidePhase.hidden : ReadoutBlockHidePhase.none; return; } if (!shouldHide) { this.clearDeferredSetpointHide(); return; } if (this.deferredSetpointHidePhase !== ReadoutBlockHidePhase.none) { return; } this.deferredSetpointHidePhase = ReadoutBlockHidePhase.hiding; window.clearTimeout(this.deferredSetpointHideTimer); this.deferredSetpointHideTimer = window.setTimeout(() => { this.deferredSetpointHidePhase = ReadoutBlockHidePhase.hidden; this.deferredSetpointHideTimer = void 0; }, 100); } clearDeferredSetpointHide() { if (this.deferredSetpointHidePhase !== ReadoutBlockHidePhase.none) { this.deferredSetpointHidePhase = ReadoutBlockHidePhase.none; } window.clearTimeout(this.deferredSetpointHideTimer); this.deferredSetpointHideTimer = void 0; } disconnectedCallback() { window.removeEventListener(\"pointerdown\", this.onWindowPointerDown, true); window.clearTimeout(this.deferredSetpointHideTimer); this.deferredSetpointHideTimer = void 0; if (this.deferredSetpointHidePhase === ReadoutBlockHidePhase.hiding) { this.deferredSetpointHidePhase = ReadoutBlockHidePhase.hidden; } super.disconnectedCallback(); } render() { const dataQuality = this.dataQuality; const classes = classMap({ readout: true, [`size-${this.resolvedSize}`]: true, [`direction-${this.resolvedDirection}`]: true, [`stacking-${this.resolvedStacking}`]: true, [`alignment-${this.resolvedAlignment}`]: true, [`priority-${this.resolvedPriority}`]: true, \"data-low-integrity\": dataQuality === ReadoutDataQuality.lowIntegrity, \"data-invalid\": dataQuality === ReadoutDataQuality.invalid, \"flip-flop\": this.isFlipFlop, \"setpoint-dynamic\": this.hasDynamicSetpoint }); const root = html` <div class=${classes} part=\"root\"> ${this.isHorizontal ? this.renderHorizontalLayout() : this.renderVerticalLayout()} ${this.renderSourcePickerSlot()} </div> ${this.renderSourcePickerContent()} `; const alert = this.alert === true ? {} : this.alert; return wrapWithAlertFrame(alert, root); } }"
         }
       ],
       "exports": [
@@ -40375,6 +40395,19 @@
                 "module": "src/building-blocks/chart-line/chart-line-base.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "xAxis",
+              "type": {
+                "text": "ChartLineXAxisConfig | undefined"
+              },
+              "default": "undefined",
+              "description": "Pinned x range (`min`/`max`) for time and number axes. Without it the axis spans exactly the data, so a window that is still filling stretches across the full width. In `minutes` display `max` is the `0min` reference.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "showGrid",
@@ -40440,6 +40473,32 @@
                 "module": "src/building-blocks/chart-line/chart-line-base.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "rangeLabels",
+              "type": {
+                "text": "RangeLabels"
+              },
+              "description": "Labels kept below the 192px threshold, where the axis labels are otherwise hidden: 'y' draws min, max and (inside the range) 0 in a gutter on the y-axis side; 'x' draws the first and last x value in a bottom gutter; 'xy' both. Ignored when `hasLabelPadding` is false.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "primaryYAxisId",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "description": "Id of the y scale a dataset lands on when it names none. Chart.js would\notherwise add a default `y` scale next to the configured ones and draw it.",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "DEFAULT_TENSION",
@@ -40694,6 +40753,237 @@
                 "module": "src/building-blocks/chart-line/chart-line-base.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "savedMainTickmarkLabels",
+              "privacy": "private",
+              "default": "new WeakMap< ExternalScaleElement, boolean >()",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "wasBelowThreshold",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "privacy": "private",
+              "description": "Last known threshold side, to notice a crossing in `updated()`.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "compactLabelThickness",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number | undefined"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "axis",
+                  "type": {
+                    "text": "'x' | 'y'"
+                  }
+                }
+              ],
+              "description": "Label band a slotted scale needs for its compact labels, in the scale's\nown viewBox units. The scale prints the raw values, so those are what is\nmeasured; the x band is one text line.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "rangeLabelCache",
+              "type": {
+                "text": "{\n    y: string[];\n    x: string[];\n    bounds?: {min: number; max: number};\n  }"
+              },
+              "privacy": "private",
+              "default": "{y: [], x: []}",
+              "description": "Range labels for the current data and size, refreshed with every\n`getChartOptions()` so the plugin never rebuilds the datasets on a draw.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "slotFor",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "HTMLSlotElement | undefined"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "side",
+                  "type": {
+                    "text": "'left' | 'right' | 'top' | 'bottom'"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "hasSlottedScale",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "side",
+                  "type": {
+                    "text": "'left' | 'right' | 'top' | 'bottom'"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "ySide",
+              "type": {
+                "text": "'left' | 'right'"
+              },
+              "privacy": "private",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "rangeLabelFont",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "RangeLabelFont"
+                }
+              },
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "dataExtents",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "{\n    x?: {min: number; max: number};\n    y: Map<string, {min: number; max: number}>;\n  }"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "prepared",
+                  "type": {
+                    "text": "ReturnType<ObcChartLineBase['prepareChartDataAndLabels']>"
+                  }
+                }
+              ],
+              "description": "Extent of the prepared data: one for x, one per y scale id. Each y axis\nranges from its own datasets, so a merged extent would label one axis\nwith another's values.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "yRangeBounds",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "{min: number; max: number} | undefined"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "extents",
+                  "type": {
+                    "text": "Map<string, {min: number; max: number}>"
+                  }
+                }
+              ],
+              "description": "Range the y labels describe. Below the threshold the axis runs on data\nbounds, so its datasets' extent is exact and needs no chart to read from.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "xEdgeLabelTexts",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string[]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "prepared",
+                  "type": {
+                    "text": "ReturnType<ObcChartLineBase['prepareChartDataAndLabels']>"
+                  }
+                },
+                {
+                  "name": "extent",
+                  "type": {
+                    "text": "{min: number; max: number} | undefined"
+                  }
+                }
+              ],
+              "description": "First and last x label, or nothing when there is no span to label.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "refreshRangeLabels",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "typeof this.rangeLabelCache"
+                }
+              },
+              "description": "Recompute the range labels. A side with a slotted scale is labelled by\nthe scale, so it gets no text here; the y bounds are kept regardless,\nsince the scale's compact band is measured from them.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "createRangeLabelsPlugin",
+              "privacy": "private",
+              "description": "Paints min / 0 / max and first / last once Chart.js has drawn, inside the\ngutters `getChartOptions()` reserved. The end labels sit flush with the\nplot edges so no vertical padding is needed for them.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "hasVisibleScale",
@@ -40821,6 +41111,44 @@
                 "module": "src/building-blocks/chart-line/chart-line-base.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "resolveAxisRange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "{\n    min: number;\n    max: number;\n  }"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "side",
+                  "type": {
+                    "text": "'left' | 'right' | 'x'"
+                  }
+                }
+              ],
+              "description": "Range a slotted scale on the given side has to cover.\n\nA range pinned in the axis configuration is used as is: it is the source\nof truth, and on the first sync there is no chart to read yet. Otherwise\nthe live Chart.js scale is read under the id `buildScalesConfig()` gives\nit. A side with no axis of its own follows the first configured one.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "resolveSlottedXRange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "{min: number; max: number} | undefined"
+                }
+              },
+              "description": "Range pushed to the top and bottom scales, or `undefined` to leave them\nalone. A scale prints its values verbatim, and on a `time` axis the raw\nrange is epoch milliseconds. In `minutes` display the range is converted\nto the minutes the chart's own labels show; `date` display has no numeric\nequivalent, so the scale keeps its own range.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "updateScaleProperties",
@@ -40839,6 +41167,39 @@
                 "module": "src/building-blocks/chart-line/chart-line-base.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "ownsSlottedScaleRange",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "_side",
+                  "type": {
+                    "text": "'left' | 'right' | 'top' | 'bottom'"
+                  }
+                }
+              ],
+              "description": "Whether the chart's axis range is what a slotted scale on this side should\ndescribe. A subclass that slots a scale of its own and gives it a separate\nrange returns false for that side, otherwise the sync below overwrites it.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "syncSlottedScaleRanges",
+              "privacy": "private",
+              "description": "Push the current axis ranges to the slotted scales. The full\n`updateScaleProperties()` cascade runs before the chart is (re)built and\nso reads the previous chart's ranges; this closes that gap once the new\nchart exists, and keeps auto-ranged scales in step with the data.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "hasAnyChanged",
@@ -41073,6 +41434,21 @@
                 "module": "src/building-blocks/chart-line/chart-line-base.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "computeChartPadding",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "{\n    top: number;\n    right: number;\n    bottom: number;\n    left: number;\n  }"
+                }
+              },
+              "description": "One padding source for the Chart.js layout and the slotted scales: two\nsources painted the canvas over a scale and inset a scale inside a chart.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "getChartOptions",
@@ -41097,7 +41473,7 @@
                   "text": "number | undefined"
                 }
               },
-              "description": "Compute reference timestamp for time axis formatting.\nReturns earliest timestamp for 'date' mode, latest for 'minutes' mode.",
+              "description": "Compute reference timestamp for time axis formatting.\nReturns earliest timestamp for 'date' mode, latest for 'minutes' mode.\nA pinned x range supplies the reference instead, so the axis edge stays\nthe reference while the data has not reached it yet.",
               "inheritedFrom": {
                 "name": "ObcChartLineBase",
                 "module": "src/building-blocks/chart-line/chart-line-base.ts"
@@ -41789,6 +42165,19 @@
                 "module": "src/building-blocks/chart-line/chart-line-base.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "xAxis",
+              "type": {
+                "text": "ChartLineXAxisConfig | undefined"
+              },
+              "default": "undefined",
+              "description": "Pinned x range (`min`/`max`) for time and number axes. Without it the axis spans exactly the data, so a window that is still filling stretches across the full width. In `minutes` display `max` is the `0min` reference.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "showGrid",
@@ -41854,6 +42243,32 @@
                 "module": "src/building-blocks/chart-line/chart-line-base.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "rangeLabels",
+              "type": {
+                "text": "RangeLabels"
+              },
+              "description": "Labels kept below the 192px threshold, where the axis labels are otherwise hidden: 'y' draws min, max and (inside the range) 0 in a gutter on the y-axis side; 'x' draws the first and last x value in a bottom gutter; 'xy' both. Ignored when `hasLabelPadding` is false.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "primaryYAxisId",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "description": "Id of the y scale a dataset lands on when it names none. Chart.js would\notherwise add a default `y` scale next to the configured ones and draw it.",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "DEFAULT_TENSION",
@@ -42108,6 +42523,237 @@
                 "module": "src/building-blocks/chart-line/chart-line-base.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "savedMainTickmarkLabels",
+              "privacy": "private",
+              "default": "new WeakMap< ExternalScaleElement, boolean >()",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "wasBelowThreshold",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "privacy": "private",
+              "description": "Last known threshold side, to notice a crossing in `updated()`.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "compactLabelThickness",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number | undefined"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "axis",
+                  "type": {
+                    "text": "'x' | 'y'"
+                  }
+                }
+              ],
+              "description": "Label band a slotted scale needs for its compact labels, in the scale's\nown viewBox units. The scale prints the raw values, so those are what is\nmeasured; the x band is one text line.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "rangeLabelCache",
+              "type": {
+                "text": "{\n    y: string[];\n    x: string[];\n    bounds?: {min: number; max: number};\n  }"
+              },
+              "privacy": "private",
+              "default": "{y: [], x: []}",
+              "description": "Range labels for the current data and size, refreshed with every\n`getChartOptions()` so the plugin never rebuilds the datasets on a draw.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "slotFor",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "HTMLSlotElement | undefined"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "side",
+                  "type": {
+                    "text": "'left' | 'right' | 'top' | 'bottom'"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "hasSlottedScale",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "side",
+                  "type": {
+                    "text": "'left' | 'right' | 'top' | 'bottom'"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "ySide",
+              "type": {
+                "text": "'left' | 'right'"
+              },
+              "privacy": "private",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "rangeLabelFont",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "RangeLabelFont"
+                }
+              },
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "dataExtents",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "{\n    x?: {min: number; max: number};\n    y: Map<string, {min: number; max: number}>;\n  }"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "prepared",
+                  "type": {
+                    "text": "ReturnType<ObcChartLineBase['prepareChartDataAndLabels']>"
+                  }
+                }
+              ],
+              "description": "Extent of the prepared data: one for x, one per y scale id. Each y axis\nranges from its own datasets, so a merged extent would label one axis\nwith another's values.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "yRangeBounds",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "{min: number; max: number} | undefined"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "extents",
+                  "type": {
+                    "text": "Map<string, {min: number; max: number}>"
+                  }
+                }
+              ],
+              "description": "Range the y labels describe. Below the threshold the axis runs on data\nbounds, so its datasets' extent is exact and needs no chart to read from.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "xEdgeLabelTexts",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string[]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "prepared",
+                  "type": {
+                    "text": "ReturnType<ObcChartLineBase['prepareChartDataAndLabels']>"
+                  }
+                },
+                {
+                  "name": "extent",
+                  "type": {
+                    "text": "{min: number; max: number} | undefined"
+                  }
+                }
+              ],
+              "description": "First and last x label, or nothing when there is no span to label.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "refreshRangeLabels",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "typeof this.rangeLabelCache"
+                }
+              },
+              "description": "Recompute the range labels. A side with a slotted scale is labelled by\nthe scale, so it gets no text here; the y bounds are kept regardless,\nsince the scale's compact band is measured from them.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "createRangeLabelsPlugin",
+              "privacy": "private",
+              "description": "Paints min / 0 / max and first / last once Chart.js has drawn, inside the\ngutters `getChartOptions()` reserved. The end labels sit flush with the\nplot edges so no vertical padding is needed for them.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "hasVisibleScale",
@@ -42235,6 +42881,44 @@
                 "module": "src/building-blocks/chart-line/chart-line-base.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "resolveAxisRange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "{\n    min: number;\n    max: number;\n  }"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "side",
+                  "type": {
+                    "text": "'left' | 'right' | 'x'"
+                  }
+                }
+              ],
+              "description": "Range a slotted scale on the given side has to cover.\n\nA range pinned in the axis configuration is used as is: it is the source\nof truth, and on the first sync there is no chart to read yet. Otherwise\nthe live Chart.js scale is read under the id `buildScalesConfig()` gives\nit. A side with no axis of its own follows the first configured one.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "resolveSlottedXRange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "{min: number; max: number} | undefined"
+                }
+              },
+              "description": "Range pushed to the top and bottom scales, or `undefined` to leave them\nalone. A scale prints its values verbatim, and on a `time` axis the raw\nrange is epoch milliseconds. In `minutes` display the range is converted\nto the minutes the chart's own labels show; `date` display has no numeric\nequivalent, so the scale keeps its own range.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "updateScaleProperties",
@@ -42253,6 +42937,39 @@
                 "module": "src/building-blocks/chart-line/chart-line-base.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "ownsSlottedScaleRange",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "_side",
+                  "type": {
+                    "text": "'left' | 'right' | 'top' | 'bottom'"
+                  }
+                }
+              ],
+              "description": "Whether the chart's axis range is what a slotted scale on this side should\ndescribe. A subclass that slots a scale of its own and gives it a separate\nrange returns false for that side, otherwise the sync below overwrites it.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "syncSlottedScaleRanges",
+              "privacy": "private",
+              "description": "Push the current axis ranges to the slotted scales. The full\n`updateScaleProperties()` cascade runs before the chart is (re)built and\nso reads the previous chart's ranges; this closes that gap once the new\nchart exists, and keeps auto-ranged scales in step with the data.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "hasAnyChanged",
@@ -42487,6 +43204,21 @@
                 "module": "src/building-blocks/chart-line/chart-line-base.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "computeChartPadding",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "{\n    top: number;\n    right: number;\n    bottom: number;\n    left: number;\n  }"
+                }
+              },
+              "description": "One padding source for the Chart.js layout and the slotted scales: two\nsources painted the canvas over a scale and inset a scale inside a chart.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "getChartOptions",
@@ -42511,7 +43243,7 @@
                   "text": "number | undefined"
                 }
               },
-              "description": "Compute reference timestamp for time axis formatting.\nReturns earliest timestamp for 'date' mode, latest for 'minutes' mode.",
+              "description": "Compute reference timestamp for time axis formatting.\nReturns earliest timestamp for 'date' mode, latest for 'minutes' mode.\nA pinned x range supplies the reference instead, so the axis edge stays\nthe reference while the data has not reached it yet.",
               "inheritedFrom": {
                 "name": "ObcChartLineBase",
                 "module": "src/building-blocks/chart-line/chart-line-base.ts"
@@ -43713,6 +44445,15 @@
               },
               "default": "true"
             },
+            {
+              "kind": "field",
+              "name": "showMainTickmarkLabels",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Label the main tickmarks (min / 0 / max) instead of the primary interval ladder, for a scale too short for a ladder. A chart sets it on its slotted scales below its label threshold."
+            },
             {
               "kind": "field",
               "name": "hasBar",
@@ -44387,6 +45128,15 @@
               },
               "default": "true"
             },
+            {
+              "kind": "field",
+              "name": "showMainTickmarkLabels",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Label the main tickmarks (min / 0 / max) instead of the primary interval ladder, for a scale too short for a ladder. A chart sets it on its slotted scales below its label threshold."
+            },
             {
               "kind": "field",
               "name": "hasBar",
@@ -45075,6 +45825,15 @@
               "default": "undefined",
               "description": "Multiple y-axis definitions for complex multi-axis charts."
             },
+            {
+              "kind": "field",
+              "name": "xAxis",
+              "type": {
+                "text": "ChartLineXAxisConfig | undefined"
+              },
+              "default": "undefined",
+              "description": "Pinned x range (`min`/`max`) for time and number axes. Without it the axis spans exactly the data, so a window that is still filling stretches across the full width. In `minutes` display `max` is the `0min` reference."
+            },
             {
               "kind": "field",
               "name": "showGrid",
@@ -45120,6 +45879,24 @@
               "default": "true",
               "description": "Reserve canvas padding for axis tick labels on sides without an external scale.\n\nWhen `true` (default), the chart leaves room for tick labels and renders them\n(subject to `showTickMarks` and the 192px auto-compact threshold).\n\nWhen `false`, the chart renders edge-to-edge on sides without a slotted external\nscale AND axis tick labels are force-hidden so they cannot be clipped. This also\nsuppresses the automatic edge-to-edge switch that normally happens below the\n192px threshold, eliminating the visible padding \"jump\" when crossing it.\n\nUseful when embedding the chart inside another component that owns framing\nand never wants to show axis labels (e.g. `obc-automation-tank`).\n\nDefaults to `true` to preserve existing behavior. Declared with `attribute: false`\nbecause a `true`-default boolean cannot work as an HTML boolean attribute."
             },
+            {
+              "kind": "field",
+              "name": "rangeLabels",
+              "type": {
+                "text": "RangeLabels"
+              },
+              "description": "Labels kept below the 192px threshold, where the axis labels are otherwise hidden: 'y' draws min, max and (inside the range) 0 in a gutter on the y-axis side; 'x' draws the first and last x value in a bottom gutter; 'xy' both. Ignored when `hasLabelPadding` is false."
+            },
+            {
+              "kind": "field",
+              "name": "primaryYAxisId",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "description": "Id of the y scale a dataset lands on when it names none. Chart.js would\notherwise add a default `y` scale next to the configured ones and draw it.",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "DEFAULT_TENSION",
@@ -45327,6 +46104,185 @@
               },
               "description": "Should multi-series datasets be stacked?\nLine graph returns false, area graph returns stacked property value.\nMust be implemented in subclass."
             },
+            {
+              "kind": "field",
+              "name": "savedMainTickmarkLabels",
+              "privacy": "private",
+              "default": "new WeakMap< ExternalScaleElement, boolean >()"
+            },
+            {
+              "kind": "field",
+              "name": "wasBelowThreshold",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "privacy": "private",
+              "description": "Last known threshold side, to notice a crossing in `updated()`."
+            },
+            {
+              "kind": "method",
+              "name": "compactLabelThickness",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number | undefined"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "axis",
+                  "type": {
+                    "text": "'x' | 'y'"
+                  }
+                }
+              ],
+              "description": "Label band a slotted scale needs for its compact labels, in the scale's\nown viewBox units. The scale prints the raw values, so those are what is\nmeasured; the x band is one text line."
+            },
+            {
+              "kind": "field",
+              "name": "rangeLabelCache",
+              "type": {
+                "text": "{\n    y: string[];\n    x: string[];\n    bounds?: {min: number; max: number};\n  }"
+              },
+              "privacy": "private",
+              "default": "{y: [], x: []}",
+              "description": "Range labels for the current data and size, refreshed with every\n`getChartOptions()` so the plugin never rebuilds the datasets on a draw."
+            },
+            {
+              "kind": "method",
+              "name": "slotFor",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "HTMLSlotElement | undefined"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "side",
+                  "type": {
+                    "text": "'left' | 'right' | 'top' | 'bottom'"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "hasSlottedScale",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "side",
+                  "type": {
+                    "text": "'left' | 'right' | 'top' | 'bottom'"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "ySide",
+              "type": {
+                "text": "'left' | 'right'"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "rangeLabelFont",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "RangeLabelFont"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "dataExtents",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "{\n    x?: {min: number; max: number};\n    y: Map<string, {min: number; max: number}>;\n  }"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "prepared",
+                  "type": {
+                    "text": "ReturnType<ObcChartLineBase['prepareChartDataAndLabels']>"
+                  }
+                }
+              ],
+              "description": "Extent of the prepared data: one for x, one per y scale id. Each y axis\nranges from its own datasets, so a merged extent would label one axis\nwith another's values."
+            },
+            {
+              "kind": "method",
+              "name": "yRangeBounds",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "{min: number; max: number} | undefined"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "extents",
+                  "type": {
+                    "text": "Map<string, {min: number; max: number}>"
+                  }
+                }
+              ],
+              "description": "Range the y labels describe. Below the threshold the axis runs on data\nbounds, so its datasets' extent is exact and needs no chart to read from."
+            },
+            {
+              "kind": "method",
+              "name": "xEdgeLabelTexts",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string[]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "prepared",
+                  "type": {
+                    "text": "ReturnType<ObcChartLineBase['prepareChartDataAndLabels']>"
+                  }
+                },
+                {
+                  "name": "extent",
+                  "type": {
+                    "text": "{min: number; max: number} | undefined"
+                  }
+                }
+              ],
+              "description": "First and last x label, or nothing when there is no span to label."
+            },
+            {
+              "kind": "method",
+              "name": "refreshRangeLabels",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "typeof this.rangeLabelCache"
+                }
+              },
+              "description": "Recompute the range labels. A side with a slotted scale is labelled by\nthe scale, so it gets no text here; the y bounds are kept regardless,\nsince the scale's compact band is measured from them."
+            },
+            {
+              "kind": "method",
+              "name": "createRangeLabelsPlugin",
+              "privacy": "private",
+              "description": "Paints min / 0 / max and first / last once Chart.js has drawn, inside the\ngutters `getChartOptions()` reserved. The end labels sit flush with the\nplot edges so no vertical padding is needed for them."
+            },
             {
               "kind": "method",
               "name": "hasVisibleScale",
@@ -45414,6 +46370,36 @@
               "privacy": "private",
               "description": "Calculate chart padding from external scale dimensions.\n\nFor sides without an external scale, falls back to `CHART_DIMENSIONS.CANVAS_PADDING`\n(the chart's own padding to reserve room for axis tick labels). When\n`hasLabelPadding=false` that fallback is 0 so the chart renders edge-to-edge,\nand this same value is cascaded to slotted scales via `updateScaleProperties()`\n— so the bar's main-axis padding (`paddingTop`/`paddingBottom` for vertical bars)\ncollapses with the chart's perpendicular padding and they stay visually aligned."
             },
+            {
+              "kind": "method",
+              "name": "resolveAxisRange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "{\n    min: number;\n    max: number;\n  }"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "side",
+                  "type": {
+                    "text": "'left' | 'right' | 'x'"
+                  }
+                }
+              ],
+              "description": "Range a slotted scale on the given side has to cover.\n\nA range pinned in the axis configuration is used as is: it is the source\nof truth, and on the first sync there is no chart to read yet. Otherwise\nthe live Chart.js scale is read under the id `buildScalesConfig()` gives\nit. A side with no axis of its own follows the first configured one."
+            },
+            {
+              "kind": "method",
+              "name": "resolveSlottedXRange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "{min: number; max: number} | undefined"
+                }
+              },
+              "description": "Range pushed to the top and bottom scales, or `undefined` to leave them\nalone. A scale prints its values verbatim, and on a `time` axis the raw\nrange is epoch milliseconds. In `minutes` display the range is converted\nto the minutes the chart's own labels show; `date` display has no numeric\nequivalent, so the scale keeps its own range."
+            },
             {
               "kind": "method",
               "name": "updateScaleProperties",
@@ -45428,6 +46414,31 @@
               ],
               "description": "Update properties on slotted scale elements"
             },
+            {
+              "kind": "method",
+              "name": "ownsSlottedScaleRange",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "_side",
+                  "type": {
+                    "text": "'left' | 'right' | 'top' | 'bottom'"
+                  }
+                }
+              ],
+              "description": "Whether the chart's axis range is what a slotted scale on this side should\ndescribe. A subclass that slots a scale of its own and gives it a separate\nrange returns false for that side, otherwise the sync below overwrites it."
+            },
+            {
+              "kind": "method",
+              "name": "syncSlottedScaleRanges",
+              "privacy": "private",
+              "description": "Push the current axis ranges to the slotted scales. The full\n`updateScaleProperties()` cascade runs before the chart is (re)built and\nso reads the previous chart's ranges; this closes that gap once the new\nchart exists, and keeps auto-ranged scales in step with the data."
+            },
             {
               "kind": "method",
               "name": "hasAnyChanged",
@@ -45606,6 +46617,17 @@
               "privacy": "protected",
               "description": "Prepare datasets for single-series charts.\nCategory mode: labels + numeric values (unchanged legacy path).\nTime/number mode: normalized {x, y} points on a linear scale.\nHandles both regular and threshold fill modes."
             },
+            {
+              "kind": "method",
+              "name": "computeChartPadding",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "{\n    top: number;\n    right: number;\n    bottom: number;\n    left: number;\n  }"
+                }
+              },
+              "description": "One padding source for the Chart.js layout and the slotted scales: two\nsources painted the canvas over a scale and inset a scale inside a chart."
+            },
             {
               "kind": "method",
               "name": "getChartOptions",
@@ -45626,7 +46648,7 @@
                   "text": "number | undefined"
                 }
               },
-              "description": "Compute reference timestamp for time axis formatting.\nReturns earliest timestamp for 'date' mode, latest for 'minutes' mode."
+              "description": "Compute reference timestamp for time axis formatting.\nReturns earliest timestamp for 'date' mode, latest for 'minutes' mode.\nA pinned x range supplies the reference instead, so the axis edge stays\nthe reference while the data has not reached it yet."
             },
             {
               "kind": "method",
@@ -47738,7 +48760,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<obc-alert-button>` – A compact, icon-based button for displaying alert or notification status and count.\n\nThis component provides a visual indicator for active alerts or notifications, supporting different alert types (such as alarm, warning, or caution) and an optional counter badge. It can also include a secondary \"silence\" action button for muting alerts, adapting its layout responsively for different screen widths.\n\nAppears in toolbars or notification areas to give users a quick overview of alert status and provide direct access to alert-related actions.\n\n## Features\n\n- **Variants:**\n  - **Flat:** Minimal, icon-only button for space-constrained layouts.\n  - **Normal:** Standard button with icon and optional alert counter.\n  - **Enhanced:** Visually prominent button for high-priority alerts, with accent styling.\n- **Alert Types:** Supports `alarm`, `warning`, `caution`, or no alert (idle). Icon and color adapt to the alert type.\n- **Alert Counter:** Optional badge displays the number of active alerts (except in flat mode).\n- **Silence Button:** Optional secondary button to mute or silence alerts, shown when enabled and at sufficient width.\n- **Blinking Animation:** Can animate (blink) to draw attention to active alerts (except for caution type).\n- **Responsive Layout:** Automatically switches to flat mode below a configurable width, and hides the silence button below another configurable width.\n- **Large Size Option:** Increases button height and padding for touch-friendly or prominent use.\n\n## Usage Guidelines\n\nUse `<obc-alert-button>` to provide a persistent, easily accessible indicator of alert or notification status. Ideal for toolbars, headers, or notification panels where users need to be aware of active alerts and may need to silence them quickly.\n\n- Use the counter to show the number of active alerts when relevant.\n- Use the silence button to provide a quick mute action, but only when space allows.\n- Choose the variant (`flat`, `normal`, `enhanced`) based on available space and the importance of the alert.\n- The blinking feature should be reserved for urgent or high-priority alerts to avoid unnecessary distraction.\n\n**TODO(designer):** Confirm if there are recommended default behaviors for auto-blinking, and if there are any design constraints for when to use each variant.\n\n## Properties\n\n- `nAlerts` (number): Number of active alerts to display in the counter badge.\n- `alertType` (`AlertType`): Type of alert (`alarm`, `warning`, `caution`, or undefined for idle).\n- `type` (`ObcAlertButtonType`): Visual variant of the button (`flat`, `normal`, `enhanced`). Default is `normal`.\n- `counter` (boolean): Whether to show the alert counter badge (not available in flat mode).\n- `showSilenceButton` (boolean): Whether to display the silence button (hidden in flat mode or below min breakpoint).\n- `silenceButtonDisabled` (boolean): Disables the silence button when true.\n- `flatMaxBreakpointPx` (number): Maximum width (in px) for normal/enhanced mode; below this, switches to flat mode.\n- `silenceButtonMinBreakpointPx` (number): Minimum width (in px) to show the silence button; below this, it is hidden.\n- `blinking` (boolean): Enables blinking animation for active alerts (not for caution type).\n- `large` (boolean): Increases button size for prominent or touch-friendly use.\n\n## Events\n\n- `click-alert` – Fired when the main alert button is clicked.\n- `click-silence` – Fired when the silence button is clicked.\n\n## Best Practices & Constraints\n\n- Only show the counter when there are active alerts and the button is not in flat mode.\n- The silence button is only visible if enabled, the width is above the minimum breakpoint, and the button is not flat.\n- Blinking should be used sparingly to avoid overwhelming the user.\n- Use the large variant for touch interfaces or when the button needs to stand out.\n\n## Example\n\n```html\n<obc-alert-button\n  nAlerts=\"3\"\n  alertType=\"alarm\"\n  type=\"enhanced\"\n  counter\n  showSilenceButton\n  blinking\n  large\n  flatMaxBreakpointPx=\"600\"\n  silenceButtonMinBreakpointPx=\"600\"\n></obc-alert-button>\n```\n\nIn this example, the button shows an alarm icon, a counter badge with \"3\", is styled as enhanced, blinks to indicate urgency, and includes a silence button if the width allows.",
+          "description": "`<obc-alert-button>` – A compact, icon-based button for displaying alert or notification status and count.\n\nThis component provides a visual indicator for active alerts or notifications, supporting different alert types (such as alarm, warning, or caution) and an optional counter badge. It can also include a secondary \"silence\" action button for muting alerts, adapting its layout responsively for different screen widths.\n\nAppears in toolbars or notification areas to give users a quick overview of alert status and provide direct access to alert-related actions.\n\n## Features\n\n- **Variants:**\n  - **Flat:** Minimal, icon-only button for space-constrained layouts.\n  - **Normal:** Standard button with icon and optional alert counter.\n  - **Enhanced:** Visually prominent button for high-priority alerts, with accent styling.\n- **Alert Types:** Supports `alarm`, `warning`, `caution`, or no alert (idle). Icon and color adapt to the alert type.\n- **Alert Counter:** Optional badge displays the number of active alerts (except in flat mode).\n- **Silence Button:** Optional secondary button to mute or silence alerts, shown when enabled and at sufficient width.\n- **Blinking Animation:** Can animate (blink) to draw attention to active alerts (except for caution type).\n- **Responsive Layout:** Automatically switches to flat mode below a configurable width, and hides the silence button below another configurable width.\n- **Large Size Option:** Increases button height and padding for touch-friendly or prominent use.\n\n## Usage Guidelines\n\nUse `<obc-alert-button>` to provide a persistent, easily accessible indicator of alert or notification status. Ideal for toolbars, headers, or notification panels where users need to be aware of active alerts and may need to silence them quickly.\n\n- Use the counter to show the number of active alerts when relevant.\n- Use the silence button to provide a quick mute action, but only when space allows.\n- Choose the variant (`flat`, `normal`, `enhanced`) based on available space and the importance of the alert.\n- The blinking feature should be reserved for urgent or high-priority alerts to avoid unnecessary distraction.\n\n**TODO(designer):** Confirm if there are recommended default behaviors for auto-blinking, and if there are any design constraints for when to use each variant.\n\n## Properties\n\n- `nAlerts` (number): Number of active alerts to display in the counter badge.\n- `alertType` (`AlertType`): Type of alert (`alarm`, `warning`, `caution`, or undefined for idle).\n- `type` (`ObcAlertButtonType`): Visual variant of the button (`flat`, `normal`, `enhanced`). Default is `normal`.\n- `counter` (boolean): Whether to show the alert counter badge (not available in flat mode).\n- `showSilenceButton` (boolean): Whether to display the silence button (hidden in flat mode or below min breakpoint).\n- `silenceButtonDisabled` (boolean): Disables the silence button when true.\n- `flatMaxBreakpointPx` (number): Maximum width (in px) for normal/enhanced mode; below this, switches to flat mode.\n- `silenceButtonMinBreakpointPx` (number): Minimum width (in px) to show the silence button; below this, it is hidden.\n- `blinking` (boolean): Enables blinking animation for active alerts (not for caution type).\n- `flashingSpeed`: tempo of the blink (`default` follows the alert type: critical/alarm/high fast, warning/medium slow, low very slow; `fixed` never flashes).\n- `large` (boolean): Increases button size for prominent or touch-friendly use.\n\n## Events\n\n- `click-alert` – Fired when the main alert button is clicked.\n- `click-silence` – Fired when the silence button is clicked.\n\n## Best Practices & Constraints\n\n- Only show the counter when there are active alerts and the button is not in flat mode.\n- The silence button is only visible if enabled, the width is above the minimum breakpoint, and the button is not flat.\n- Blinking should be used sparingly to avoid overwhelming the user.\n- Use the large variant for touch interfaces or when the button needs to stand out.\n\n## Example\n\n```html\n<obc-alert-button\n  nAlerts=\"3\"\n  alertType=\"alarm\"\n  type=\"enhanced\"\n  counter\n  showSilenceButton\n  blinking\n  large\n  flatMaxBreakpointPx=\"600\"\n  silenceButtonMinBreakpointPx=\"600\"\n></obc-alert-button>\n```\n\nIn this example, the button shows an alarm icon, a counter badge with \"3\", is styled as enhanced, blinks to indicate urgency, and includes a silence button if the width allows.",
           "name": "ObcAlertButton",
           "slots": [
             {
@@ -47814,6 +48836,29 @@
               "default": "false",
               "description": "Enables blinking animation for active alerts.\n\nBlinking is only shown for alarm and warning types, not for caution."
             },
+            {
+              "kind": "field",
+              "name": "flashingSpeed",
+              "type": {
+                "text": "FlashingSpeed"
+              },
+              "description": "Flash tempo while `blinking` is on: `default` resolves from `alertType`, `fast`, `slow`, `very-slow` force a tempo, `fixed` never flashes."
+            },
+            {
+              "kind": "field",
+              "name": "flashing",
+              "privacy": "protected",
+              "readonly": true,
+              "default": "new FlashingController( this, () => this.resolvedFlashingSpeed )"
+            },
+            {
+              "kind": "field",
+              "name": "resolvedFlashingSpeed",
+              "type": {
+                "text": "ResolvedFlashingSpeed"
+              },
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "flatMaxBreakpointPx",
@@ -47875,23 +48920,6 @@
               "privacy": "private",
               "readonly": true
             },
-            {
-              "kind": "field",
-              "name": "_blinkAnimationCancel",
-              "type": {
-                "text": "() => void | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "installBlinking",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "updated"
-            },
             {
               "kind": "method",
               "name": "render"
@@ -48077,7 +49105,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<obc-alert-frame>` – A bordered frame component for visually emphasizing alert or status messages.\n\nThe alert frame provides a prominent outline and optional \"flap\" with status icon to draw attention to critical information or UI regions. It supports multiple visual variants and thicknesses, and can be configured to indicate different alert statuses (alarm, warning, caution). The component is designed to wrap content and visually distinguish it from the surrounding UI.\n\n### Features\n- **Variants (type):**\n  - `regular`: Standard outlined frame with no flap or icon.\n  - `small-side-flip`: Adds a small side flap with a status icon at the top right.\n  - `large-side-flip`: Adds a larger, vertical side flap with a status icon and optional custom icon.\n  - `bottom-flip`: Adds a bottom flap with a status icon, label, and timer slots.\n- **Thickness options:** Choose between `small` (thin border) and `large` (thick border) for visual emphasis.\n- **Status indication:** Displays different color schemes and icons for the legacy statuses (`alarm`, `warning`, `caution`) and the level statuses (`level-critical`, `level-high`, `level-medium`, `level-low`, `level-diagnostic`).\n- **Acknowledgement mode:** The `mode` property reflects the alert lifecycle state — `acked-active` (default), `unacked-active`, and `unacked-rectified` — driving the blinking/animation treatment of the frame.\n- **Content wrapping:** When `wrapContent` is true, the frame wraps and sizes itself to its slotted content rather than overlaying a fixed region.\n- **Customizable corners:** Each corner can be set to a sharp (non-rounded) edge for integration with other UI elements.\n- **Slot-based content:** Supports custom icons, labels, and timers in flap variants via named slots.\n\n### Usage Guidelines\nUse `obc-alert-frame` to highlight important content, such as alerts, warnings, or status panels. The flap variants are ideal for drawing extra attention to urgent or time-sensitive information, while the regular type provides a subtle but clear border. Choose the status to match the severity of the message (alarm, warning, caution). Adjust thickness for visual hierarchy—use large for high-priority alerts and small for less critical notices.\n\n**TODO(designer):** Provide guidance on when to use each flap type (small-side-flip, large-side-flip, bottom-flip) and recommended scenarios for sharp edge usage.\n\n### Features/Variants\n- **Type (Visual Variant):**\n  - `regular`: Simple outlined frame, no flap or icon.\n  - `small-side-flip`: Small right-side flap with status icon.\n  - `large-side-flip`: Large vertical right-side flap with status icon and optional custom icon.\n  - `bottom-flip`: Bottom flap with status icon, label, and timer.\n- **Thickness:** `small` (default) or `large` for border width.\n- **Status:** `alarm`, `warning`, `caution`, or the level severities (`level-critical`, `level-high`, `level-medium`, `level-low`, `level-diagnostic`)—affects color and icon.\n- **Mode:** `acked-active` (default), `unacked-active`, or `unacked-rectified`—affects blinking/animation.\n- **Corner Customization:** Each corner can be made sharp (not rounded) via boolean properties.\n\n### Slots and Content Structure\n\n| Slot Name | Renders When... | Purpose |\n|-----------|-----------------|---------|\n| (default) | Always | Main content inside the alert frame. |\n| icon | `large-side-flip` or `bottom-flip` | Custom icon displayed in the flap (in addition to status icon). |\n| label | `bottom-flip` only | Label text shown in the bottom flap. |\n| timer | `bottom-flip` only | Timer or time label in the bottom flap. |\n\n### Properties and Attributes\n- `type`: Selects the visual variant/flap style. Default is `small-side-flip`.\n- `thickness`: Controls border thickness (`small` or `large`). Default is `small`.\n- `status`: Sets the alert status and color/icon (`alarm`, `warning`, `caution`, or the `level-*` severities). Default is `alarm`.\n- `mode`: Acknowledgement lifecycle state (`acked-active`, `unacked-active`, `unacked-rectified`) controlling blinking/animation. Default is `acked-active`.\n- `wrapContent`: When true, the frame wraps and sizes to its slotted content instead of overlaying a fixed region. Default is `false`.\n- `sharpEdgeTopLeft`, `sharpEdgeTopRight`, `sharpEdgeBottomLeft`, `sharpEdgeBottomRight`: Boolean flags to make each corner sharp instead of rounded.\n\n### Best Practices and Constraints\n- Use the status property to match the severity of the alert.\n- Only use the bottom-flip variant when both label and timer are relevant.\n- For visual consistency, align sharp edge settings with adjacent UI elements.\n- The default slot is for the main content; use named slots for icons, labels, and timers as needed.\n\n### Example:\n```\n<obc-alert-frame\n  type=\"bottom-flip\"\n  thickness=\"large\"\n  status=\"warning\"\n  sharpEdgeTopLeft\n>\n  <obi-placeholder slot=\"icon\"></obi-placeholder>\n  <div slot=\"label\">Low Battery</div>\n  <div slot=\"timer\">00:15</div>\n  <div>Critical system message goes here.</div>\n</obc-alert-frame>\n```",
+          "description": "`<obc-alert-frame>` – A bordered frame component for visually emphasizing alert or status messages.\n\nThe alert frame provides a prominent outline and optional \"flap\" with status icon to draw attention to critical information or UI regions. It supports multiple visual variants and thicknesses, and can be configured to indicate different alert statuses (alarm, warning, caution). The component is designed to wrap content and visually distinguish it from the surrounding UI.\n\n### Features\n- **Variants (type):**\n  - `regular`: Standard outlined frame with no flap or icon.\n  - `small-side-flip`: Adds a small side flap with a status icon at the top right.\n  - `large-side-flip`: Adds a larger, vertical side flap with a status icon and optional custom icon.\n  - `bottom-flip`: Adds a bottom flap with a status icon, label, and timer slots.\n- **Thickness options:** Choose between `small` (thin border) and `large` (thick border) for visual emphasis.\n- **Status indication:** Displays different color schemes and icons for the legacy statuses (`alarm`, `warning`, `caution`) and the level statuses (`level-critical`, `level-high`, `level-medium`, `level-low`, `level-diagnostic`).\n- **Acknowledgement mode:** The `mode` property reflects the alert lifecycle state — `acked-active` (default, steady), `unacked-active` (flashes) and `unacked-rectified` (dashed, flashes) — and `flashingSpeed` picks the tempo.\n- **Content wrapping:** When `wrapContent` is true, the frame wraps and sizes itself to its slotted content rather than overlaying a fixed region.\n- **Customizable corners:** Each corner can be set to a sharp (non-rounded) edge for integration with other UI elements.\n- **Slot-based content:** Supports custom icons, labels, and timers in flap variants via named slots.\n\n### Usage Guidelines\nUse `obc-alert-frame` to highlight important content, such as alerts, warnings, or status panels. The flap variants are ideal for drawing extra attention to urgent or time-sensitive information, while the regular type provides a subtle but clear border. Choose the status to match the severity of the message (alarm, warning, caution). Adjust thickness for visual hierarchy—use large for high-priority alerts and small for less critical notices.\n\n**TODO(designer):** Provide guidance on when to use each flap type (small-side-flip, large-side-flip, bottom-flip) and recommended scenarios for sharp edge usage.\n\n### Features/Variants\n- **Type (Visual Variant):**\n  - `regular`: Simple outlined frame, no flap or icon.\n  - `small-side-flip`: Small right-side flap with status icon.\n  - `large-side-flip`: Large vertical right-side flap with status icon and optional custom icon.\n  - `bottom-flip`: Bottom flap with status icon, label, and timer.\n- **Thickness:** `small` (default) or `large` for border width.\n- **Status:** `alarm`, `warning`, `caution`, or the level severities (`level-critical`, `level-high`, `level-medium`, `level-low`, `level-diagnostic`)—affects color and icon.\n- **Mode:** `acked-active` (default), `unacked-active`, or `unacked-rectified`—affects blinking/animation.\n- **Corner Customization:** Each corner can be made sharp (not rounded) via boolean properties.\n\n### Slots and Content Structure\n\n| Slot Name | Renders When... | Purpose |\n|-----------|-----------------|---------|\n| (default) | Always | Main content inside the alert frame. |\n| icon | `large-side-flip` or `bottom-flip` | Custom icon displayed in the flap (in addition to status icon). |\n| label | `bottom-flip` only | Label text shown in the bottom flap. |\n| timer | `bottom-flip` only | Timer or time label in the bottom flap. |\n\n### Properties and Attributes\n- `type`: Selects the visual variant/flap style. Default is `small-side-flip`.\n- `thickness`: Controls border thickness (`small` or `large`). Default is `small`.\n- `status`: Sets the alert status and color/icon (`alarm`, `warning`, `caution`, or the `level-*` severities). Default is `alarm`.\n- `mode`: Acknowledgement lifecycle state (`acked-active`, `unacked-active`, `unacked-rectified`) controlling blinking/animation. Default is `acked-active`.\n- `wrapContent`: When true, the frame wraps and sizes to its slotted content instead of overlaying a fixed region. Default is `false`.\n- `sharpEdgeTopLeft`, `sharpEdgeTopRight`, `sharpEdgeBottomLeft`, `sharpEdgeBottomRight`: Boolean flags to make each corner sharp instead of rounded.\n\n### Best Practices and Constraints\n- Use the status property to match the severity of the alert.\n- Only use the bottom-flip variant when both label and timer are relevant.\n- For visual consistency, align sharp edge settings with adjacent UI elements.\n- The default slot is for the main content; use named slots for icons, labels, and timers as needed.\n\n### Example:\n```\n<obc-alert-frame\n  type=\"bottom-flip\"\n  thickness=\"large\"\n  status=\"warning\"\n  sharpEdgeTopLeft\n>\n  <obi-placeholder slot=\"icon\"></obi-placeholder>\n  <div slot=\"label\">Low Battery</div>\n  <div slot=\"timer\">00:15</div>\n  <div>Critical system message goes here.</div>\n</obc-alert-frame>\n```",
           "name": "ObcAlertFrame",
           "slots": [
             {
@@ -48130,6 +49158,80 @@
               },
               "description": "Acknowledgement lifecycle state, controlling the frame's blinking/animation.\n- `acked-active`: Active and acknowledged (default); no blinking.\n- `unacked-active`: Active and not yet acknowledged; blinks.\n- `unacked-rectified`: Condition cleared but not yet acknowledged."
             },
+            {
+              "kind": "field",
+              "name": "flashingSpeed",
+              "type": {
+                "text": "FlashingSpeed"
+              },
+              "description": "Flash tempo: `default` resolves from the alert type and mode (critical/alarm/high fast, warning/medium slow, low very slow, every rectified alert very slow, caution and diagnostic fixed), `fast`, `slow`, `very-slow` force a tempo, `fixed` never flashes. Acknowledged frames are always steady."
+            },
+            {
+              "kind": "field",
+              "name": "flashEffect",
+              "type": {
+                "text": "ObcAlertFrameFlashEffect"
+              },
+              "description": "`outline` (default) grows the outline by 2 px while on in one step; `outline-eased` grows it over a 50 ms transition, a design-evaluation option."
+            },
+            {
+              "kind": "field",
+              "name": "flashing",
+              "privacy": "protected",
+              "readonly": true,
+              "default": "new FlashingController( this, () => this.resolvedFlashingSpeed )"
+            },
+            {
+              "kind": "field",
+              "name": "dashBox",
+              "type": {
+                "text": "DashBox | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "wrapper",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "dashObserver",
+              "type": {
+                "text": "ResizeObserver | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "measureDash",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "updated"
+            },
+            {
+              "kind": "method",
+              "name": "renderDash",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "resolvedFlashingSpeed",
+              "type": {
+                "text": "ResolvedFlashingSpeed"
+              },
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "wrapContent",
@@ -48211,23 +49313,6 @@
               "kind": "method",
               "name": "render"
             },
-            {
-              "kind": "field",
-              "name": "_blinkAnimationCancel",
-              "type": {
-                "text": "() => void | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "syncBlinking",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "updated"
-            },
             {
               "kind": "method",
               "name": "flap",
@@ -48289,7 +49374,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`obc-alert-icon` – Animated alert icon for signaling alarm and warning states.\n\nDisplays a specialized icon with a blinking effect to visually indicate alert or warning conditions. The icon type is determined by the `name` property, supporting both alarm and warning variants in different states (such as silenced, unacknowledged, or rectified).\n\nAppears in notification areas, alert banners, or status panels to draw attention to active or historical alert conditions. The blinking animation helps highlight urgency or status changes without requiring user interaction.\n\n## Features\n- **Multiple Icon Types:** Supports all alarm and warning types.\n- **Blinking Animation:** Uses two SVG layers with alternating opacity to create a blinking effect, visually emphasizing the alert or warning state.\n- **Adaptive Styling:** Applies different CSS variables for alarm and warning types to allow for distinct visual cues (e.g., color, blink timing).\n- **Scalable:** Designed to fit any container size; scales with its parent element.\n\n## Usage Guidelines\nUse `obc-alert-icon` to visually represent the status of alarms or warnings in notification panels, alert lists, or system status areas. The blinking effect is intended to draw user attention to active or recent alert conditions. Select the appropriate `name` value to match the alert state you wish to indicate.\n\n**TODO(designer):** Provide guidance on when to use each icon variant (e.g., when to use \"rectified\" vs. \"silenced\"), and any best practices for icon placement or blink timing.\n\n## Properties\n- `type` (AlertType): The type of alarm to display.\n- `status` (AlarmStatus): The status of the alarm to display.\n\n## Best Practices\n- Only use the blinking alert icon for states that require immediate or prominent user attention.\n- Ensure the icon is sized appropriately for its context (e.g., 32x32px or 64x64px for status panels).\n- Avoid using multiple blinking icons in close proximity to prevent visual overload.\n\n## Example\n```html\n<obc-alert-icon .alarmType=${alarm.type} .alarmStatus=${alarm.status}></obc-alert-icon>\n```",
+          "description": "`obc-alert-icon` – Animated alert icon for signaling alarm and warning states.\n\nDisplays a specialized icon with a blinking effect to visually indicate alert or warning conditions. The icon type is determined by the `name` property, supporting both alarm and warning variants in different states (such as silenced, unacknowledged, or rectified).\n\nAppears in notification areas, alert banners, or status panels to draw attention to active or historical alert conditions. The blinking animation helps highlight urgency or status changes without requiring user interaction.\n\n## Features\n- **Multiple Icon Types:** Supports all alarm and warning types.\n- **Flashing:** Two SVG layers alternate at the design tempo (fast for critical/alarm/high, slow for warning/medium, very slow for low and for every rectified alert); acknowledged icons are steady.\n- **Adaptive Styling:** Applies different CSS variables for alarm and warning types to allow for distinct visual cues (e.g., color, blink timing).\n- **Scalable:** Designed to fit any container size; scales with its parent element.\n\n## Usage Guidelines\nUse `obc-alert-icon` to visually represent the status of alarms or warnings in notification panels, alert lists, or system status areas. The blinking effect is intended to draw user attention to active or recent alert conditions. Select the appropriate `name` value to match the alert state you wish to indicate.\n\n**TODO(designer):** Provide guidance on when to use each icon variant (e.g., when to use \"rectified\" vs. \"silenced\"), and any best practices for icon placement or blink timing.\n\n## Properties\n- `type` (AlertType): The type of alarm to display.\n- `status` (AlarmStatus): The status of the alarm to display.\n\n## Best Practices\n- Only use the blinking alert icon for states that require immediate or prominent user attention.\n- Ensure the icon is sized appropriately for its context (e.g., 32x32px or 64x64px for status panels).\n- Avoid using multiple blinking icons in close proximity to prevent visual overload.\n\n## Example\n```html\n<obc-alert-icon .alarmType=${alarm.type} .alarmStatus=${alarm.status}></obc-alert-icon>\n```",
           "name": "ObcAlertIcon",
           "members": [
             {
@@ -48327,6 +49412,29 @@
                 "text": "boolean | undefined"
               }
             },
+            {
+              "kind": "field",
+              "name": "flashingSpeed",
+              "type": {
+                "text": "FlashingSpeed"
+              },
+              "description": "Flash tempo: `default` resolves from the alert type and state, `fast`, `slow`, `very-slow` force a tempo, `fixed` never flashes. Acknowledged icons are always steady."
+            },
+            {
+              "kind": "field",
+              "name": "flashing",
+              "privacy": "protected",
+              "readonly": true,
+              "default": "new FlashingController( this, () => this.resolvedFlashingSpeed )"
+            },
+            {
+              "kind": "field",
+              "name": "resolvedFlashingSpeed",
+              "type": {
+                "text": "ResolvedFlashingSpeed"
+              },
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "_effectiveType",
@@ -48373,38 +49481,11 @@
               "kind": "method",
               "name": "render"
             },
-            {
-              "kind": "field",
-              "name": "_blinkAnimationCancel",
-              "type": {
-                "text": "() => void | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "syncBlinking",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "updated",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
             {
               "kind": "field",
               "name": "styles",
               "static": true,
-              "default": "css` .wrapper { height: 100%; width: 100%; position: relative; obi-diagnostic-badge, obi-critical-badge { display: block; height: 100%; width: 100%; position: absolute; top: 0; left: 0; } svg, .a, .b { height: 100%; width: 100%; position: absolute; top: 0; left: 0; } &.blink-alarm .a { opacity: var(--alarm-blink-on); } &.blink-alarm .b { opacity: var(--alarm-blink-off); } &.blink-critical .a { opacity: var(--critical-blink-on); } &.blink-critical .b { opacity: var(--critical-blink-off); } &.blink-warning .a { opacity: var(--warning-blink-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); } } `"
+              "default": "css` .wrapper { height: 100%; width: 100%; position: relative; obi-diagnostic-badge, obi-critical-badge { display: block; height: 100%; width: 100%; position: absolute; top: 0; left: 0; } svg, .a, .b { height: 100%; width: 100%; position: absolute; top: 0; left: 0; } &.flash-fast .a { opacity: var(--flash-fast-on); } &.flash-fast .b { opacity: var(--flash-fast-off); } &.flash-slow .a { opacity: var(--flash-slow-on); } &.flash-slow .b { opacity: var(--flash-slow-off); } &.flash-very-slow .a { opacity: var(--flash-very-slow-on); } &.flash-very-slow .b { opacity: var(--flash-very-slow-off); } } `"
             }
           ],
           "superclass": {
@@ -78497,6 +79578,29 @@
                 "module": "src/building-blocks/chart-line/chart-line-base.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "ownsSlottedScaleRange",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "side",
+                  "type": {
+                    "text": "'left' | 'right' | 'top' | 'bottom'"
+                  }
+                }
+              ],
+              "description": "The right scale is this component's own bar, ranged by `minValue` /\n`maxValue`. `chartMinValue` / `chartMaxValue` exist so the plotted range\ncan differ from it, so the chart's axis range must not overwrite it.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "willUpdate",
@@ -78946,6 +80050,19 @@
                 "module": "src/building-blocks/chart-line/chart-line-base.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "xAxis",
+              "type": {
+                "text": "ChartLineXAxisConfig | undefined"
+              },
+              "default": "undefined",
+              "description": "Pinned x range (`min`/`max`) for time and number axes. Without it the axis spans exactly the data, so a window that is still filling stretches across the full width. In `minutes` display `max` is the `0min` reference.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "showGridX",
@@ -78985,6 +80102,32 @@
                 "module": "src/building-blocks/chart-line/chart-line-base.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "rangeLabels",
+              "type": {
+                "text": "RangeLabels"
+              },
+              "description": "Labels kept below the 192px threshold, where the axis labels are otherwise hidden: 'y' draws min, max and (inside the range) 0 in a gutter on the y-axis side; 'x' draws the first and last x value in a bottom gutter; 'xy' both. Ignored when `hasLabelPadding` is false.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "primaryYAxisId",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "description": "Id of the y scale a dataset lands on when it names none. Chart.js would\notherwise add a default `y` scale next to the configured ones and draw it.",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "DEFAULT_TENSION",
@@ -79137,6 +80280,237 @@
                 "module": "src/building-blocks/chart-line/chart-line-base.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "savedMainTickmarkLabels",
+              "privacy": "private",
+              "default": "new WeakMap< ExternalScaleElement, boolean >()",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "wasBelowThreshold",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "privacy": "private",
+              "description": "Last known threshold side, to notice a crossing in `updated()`.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "compactLabelThickness",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number | undefined"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "axis",
+                  "type": {
+                    "text": "'x' | 'y'"
+                  }
+                }
+              ],
+              "description": "Label band a slotted scale needs for its compact labels, in the scale's\nown viewBox units. The scale prints the raw values, so those are what is\nmeasured; the x band is one text line.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "rangeLabelCache",
+              "type": {
+                "text": "{\n    y: string[];\n    x: string[];\n    bounds?: {min: number; max: number};\n  }"
+              },
+              "privacy": "private",
+              "default": "{y: [], x: []}",
+              "description": "Range labels for the current data and size, refreshed with every\n`getChartOptions()` so the plugin never rebuilds the datasets on a draw.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "slotFor",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "HTMLSlotElement | undefined"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "side",
+                  "type": {
+                    "text": "'left' | 'right' | 'top' | 'bottom'"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "hasSlottedScale",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "side",
+                  "type": {
+                    "text": "'left' | 'right' | 'top' | 'bottom'"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "ySide",
+              "type": {
+                "text": "'left' | 'right'"
+              },
+              "privacy": "private",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "rangeLabelFont",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "RangeLabelFont"
+                }
+              },
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "dataExtents",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "{\n    x?: {min: number; max: number};\n    y: Map<string, {min: number; max: number}>;\n  }"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "prepared",
+                  "type": {
+                    "text": "ReturnType<ObcChartLineBase['prepareChartDataAndLabels']>"
+                  }
+                }
+              ],
+              "description": "Extent of the prepared data: one for x, one per y scale id. Each y axis\nranges from its own datasets, so a merged extent would label one axis\nwith another's values.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "yRangeBounds",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "{min: number; max: number} | undefined"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "extents",
+                  "type": {
+                    "text": "Map<string, {min: number; max: number}>"
+                  }
+                }
+              ],
+              "description": "Range the y labels describe. Below the threshold the axis runs on data\nbounds, so its datasets' extent is exact and needs no chart to read from.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "xEdgeLabelTexts",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string[]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "prepared",
+                  "type": {
+                    "text": "ReturnType<ObcChartLineBase['prepareChartDataAndLabels']>"
+                  }
+                },
+                {
+                  "name": "extent",
+                  "type": {
+                    "text": "{min: number; max: number} | undefined"
+                  }
+                }
+              ],
+              "description": "First and last x label, or nothing when there is no span to label.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "refreshRangeLabels",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "typeof this.rangeLabelCache"
+                }
+              },
+              "description": "Recompute the range labels. A side with a slotted scale is labelled by\nthe scale, so it gets no text here; the y bounds are kept regardless,\nsince the scale's compact band is measured from them.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "createRangeLabelsPlugin",
+              "privacy": "private",
+              "description": "Paints min / 0 / max and first / last once Chart.js has drawn, inside the\ngutters `getChartOptions()` reserved. The end labels sit flush with the\nplot edges so no vertical padding is needed for them.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "hasVisibleScale",
@@ -79264,6 +80638,44 @@
                 "module": "src/building-blocks/chart-line/chart-line-base.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "resolveAxisRange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "{\n    min: number;\n    max: number;\n  }"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "side",
+                  "type": {
+                    "text": "'left' | 'right' | 'x'"
+                  }
+                }
+              ],
+              "description": "Range a slotted scale on the given side has to cover.\n\nA range pinned in the axis configuration is used as is: it is the source\nof truth, and on the first sync there is no chart to read yet. Otherwise\nthe live Chart.js scale is read under the id `buildScalesConfig()` gives\nit. A side with no axis of its own follows the first configured one.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "resolveSlottedXRange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "{min: number; max: number} | undefined"
+                }
+              },
+              "description": "Range pushed to the top and bottom scales, or `undefined` to leave them\nalone. A scale prints its values verbatim, and on a `time` axis the raw\nrange is epoch milliseconds. In `minutes` display the range is converted\nto the minutes the chart's own labels show; `date` display has no numeric\nequivalent, so the scale keeps its own range.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "updateScaleProperties",
@@ -79282,6 +80694,16 @@
                 "module": "src/building-blocks/chart-line/chart-line-base.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "syncSlottedScaleRanges",
+              "privacy": "private",
+              "description": "Push the current axis ranges to the slotted scales. The full\n`updateScaleProperties()` cascade runs before the chart is (re)built and\nso reads the previous chart's ranges; this closes that gap once the new\nchart exists, and keeps auto-ranged scales in step with the data.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "hasAnyChanged",
@@ -79492,6 +80914,21 @@
                 "module": "src/building-blocks/chart-line/chart-line-base.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "computeChartPadding",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "{\n    top: number;\n    right: number;\n    bottom: number;\n    left: number;\n  }"
+                }
+              },
+              "description": "One padding source for the Chart.js layout and the slotted scales: two\nsources painted the canvas over a scale and inset a scale inside a chart.",
+              "inheritedFrom": {
+                "name": "ObcChartLineBase",
+                "module": "src/building-blocks/chart-line/chart-line-base.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "getChartOptions",
@@ -79516,7 +80953,7 @@
                   "text": "number | undefined"
                 }
               },
-              "description": "Compute reference timestamp for time axis formatting.\nReturns earliest timestamp for 'date' mode, latest for 'minutes' mode.",
+              "description": "Compute reference timestamp for time axis formatting.\nReturns earliest timestamp for 'date' mode, latest for 'minutes' mode.\nA pinned x range supplies the reference instead, so the axis edge stays\nthe reference while the data has not reached it yet.",
               "inheritedFrom": {
                 "name": "ObcChartLineBase",
                 "module": "src/building-blocks/chart-line/chart-line-base.ts"