@oicl/openbridge-webcomponents 2.1.0-next.9 → 2.1.0

package/bundle/openbridge-webcomponents.bundle.js

@@ -46923,14 +46923,15 @@ obc-readout-block {
 }
 
 /* ---------- Value alert overlay ----------
- * Reserves no space, so toggling the frame never shifts content. The box sits
- * on the 4px/2px padding line, where obc-alert-frame centres its stroke. */
+ * Reserves no space, so toggling the frame never shifts content. The box shares
+ * the reading's top and bottom edges, as the design pins the frame to the
+ * readout block (Figma 46282:102156); the inline padding keeps the stroke off
+ * the digits. */
 .value-alert-overlay {
   --_readout-value-frame-padding-horizontal: 4px;
-  --_readout-value-frame-padding-vertical: 2px;
   position: absolute;
   inset-inline: calc(-1 * var(--_readout-value-frame-padding-horizontal));
-  inset-block: calc(-1 * var(--_readout-value-frame-padding-vertical));
+  inset-block: 0;
   pointer-events: none;
 }
 
@@ -47749,14 +47750,14 @@ obc-readout-block {
 
 /* ---------- Value alert overlay ----------
  * Reserves no space, so the frame never changes the row height or the column
- * alignment. The box sits on the 4px/2px padding line, where obc-alert-frame
- * centres its stroke (Figma 58:10120). */
+ * alignment. The box shares the reading's top and bottom edges, as the design
+ * pins the frame to the readout block (Figma 46282:102156), so touching rows
+ * share one stroke; the inline padding keeps the stroke off the digits. */
 .value-alert-overlay {
   --_obc-readout-value-frame-padding-horizontal: 4px;
-  --_obc-readout-value-frame-padding-vertical: 2px;
   position: absolute;
   inset-inline: calc(-1 * var(--_obc-readout-value-frame-padding-horizontal));
-  inset-block: calc(-1 * var(--_obc-readout-value-frame-padding-vertical));
+  inset-block: 0;
   /* Display-only: never intercept clicks on a clickable row. */
   pointer-events: none;
 }
@@ -48664,10 +48665,10 @@ var ObcReadoutListItem = class ObcReadoutListItem extends i$4 {
 	/**
 	* 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.
+	* an absolutely-positioned box on the reading's edges, padded inline only
+	* (see `.value-alert-overlay` in the CSS), so toggling it never shifts
+	* content or row height. Renders only when `valueOptions.alert` is a config
+	* object.
 	*/
 	renderValueAlertOverlay() {
 		const alert = this.valueOptions?.alert;
@@ -53899,10 +53900,9 @@ var ObcReadout = class ObcReadout extends i$4 {
 	/**
 	* 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.
+	* absolutely-positioned box on the reading's edges, padded inline only (see
+	* `.value-alert-overlay` in the CSS), so toggling it never shifts content.
+	* Renders only when `valueOptions.alert` is a config object.
 	*/
 	renderValueAlertOverlay() {
 		const alert = this.valueOptions?.alert;
@@ -93921,15 +93921,8 @@ var ObcStartStopSwitch = class ObcStartStopSwitch extends i$4 {
 			if (e instanceof MouseEvent) this.dragStartX = e.clientX;
 			else this.dragStartX = e.touches[0].clientX;
 			this.dragCurrentX = this.dragStartX;
-			const trackRect = this.trackRef?.getBoundingClientRect();
-			const buttonRect = this.buttonRef?.getBoundingClientRect();
-			if (trackRect && buttonRect) {
-				this.trackWidth = trackRect.width;
-				this.buttonWidth = buttonRect.width;
-			} else {
-				this.trackWidth = this.trackRef?.offsetWidth || 0;
-				this.buttonWidth = this.buttonRef?.offsetWidth || 0;
-			}
+			this.trackWidth = this.trackRef?.offsetWidth || 0;
+			this.buttonWidth = this.buttonRef?.offsetWidth || 0;
 			window.addEventListener("mousemove", this.onDragMove);
 			window.addEventListener("touchmove", this.onDragMove, { passive: false });
 			window.addEventListener("mouseup", this.onDragEnd);
@@ -93944,7 +93937,7 @@ var ObcStartStopSwitch = class ObcStartStopSwitch extends i$4 {
 				e.preventDefault();
 			}
 			this.dragCurrentX = clientX;
-			this.dragOffset = this.dragCurrentX - this.dragStartX;
+			this.dragOffset = (this.dragCurrentX - this.dragStartX) / (this.currentCSSZoom ?? 1);
 			const percent = Math.abs(this.dragOffset / (this.trackWidth - this.buttonWidth));
 			this.tmpChecked = this.checked ? percent < .5 : percent > .5;
 			this.requestUpdate();
@@ -107079,7 +107072,7 @@ var ObcSlideButton = class ObcSlideButton extends i$4 {
 				e.preventDefault();
 			}
 			this.dragCurrentX = clientX;
-			this.dragOffset = this.dragCurrentX - this.dragStartX;
+			this.dragOffset = (this.dragCurrentX - this.dragStartX) / (this.currentCSSZoom ?? 1);
 			this.requestUpdate();
 		};
 		this.onDragEnd = () => {
@@ -207087,14 +207080,12 @@ var readout_list_default = i$7`* {
   width: 100%;
 }
 
-/* Vertical stack of rows. The 8px default row gap leaves room for a value alert
-   frame, which overhangs ~3px above and below each row — so two stacked rows that
-   both carry an alarm frame never collide. Override via
-   \`--obc-readout-list-row-gap\`. */
+/* Vertical stack of rows. The 4px row gap matches the rich detail rows in
+   \`obc-automation-tank\`; override via \`--obc-readout-list-row-gap\`. */
 .list {
   display: flex;
   flex-direction: column;
-  gap: var(--obc-readout-list-row-gap, 8px);
+  gap: var(--obc-readout-list-row-gap, 4px);
   width: 100%;
 }
 `;