@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.156 → 2.0.0-next.157

package/dist/navigation-instruments/readout/readout.css.js

@@ -58,14 +58,14 @@ obc-readout-block {
 /* ---------- Root ----------
  * The root is an inline flex column (vertical) or row (horizontal). Private
  * \`--_readout-*\` variables are resolved per layout × size tier below; every
- * layout rule reads only the private variables. */
+ * layout rule reads only the private variables. A readout is as tall as its
+ * rows: the design's container-min-height tokens are not applied (#1252). */
 
 .readout {
   display: inline-flex;
   position: relative;
   padding-inline: var(--_readout-pad-h);
   padding-block: var(--_readout-pad-v);
-  min-block-size: var(--_readout-min-height, auto);
   border-radius: var(--global-border-radius-border-radius-base);
 }
 
@@ -608,15 +608,8 @@ obc-readout-block {
   --_readout-value-pad-v: var(
     --instrument-components-readout-group-vertical-regular-value-container-padding-vertical
   );
-  --_readout-min-height: var(
-    --instrument-components-readout-group-vertical-regular-container-min-height
-  );
 }
 
-/* The medium tiers set no \`--_readout-min-height\`: Figma defines the
- * container-min-height token only for the regular and enhanced tiers, so
- * medium readouts intentionally fall back to \`min-block-size: auto\`. */
-
 .readout.direction-vertical.stacking-inline.size-medium {
   --_readout-pad-h: var(
     --instrument-components-readout-group-vertical-medium-container-padding-horizontal
@@ -651,9 +644,6 @@ obc-readout-block {
   --_readout-value-pad-v: var(
     --instrument-components-readout-group-vertical-enhanced-vertical-value-container-padding-vertical
   );
-  --_readout-min-height: var(
-    --instrument-components-readout-group-vertical-enhanced-container-min-height
-  );
 }
 
 /* Stack (vertical, stacked meta) */
@@ -674,9 +664,6 @@ obc-readout-block {
   --_readout-value-pad-v: var(
     --instrument-components-readout-stack-regular-value-container-padding-vertical
   );
-  --_readout-min-height: var(
-    --instrument-components-readout-stack-regular-container-min-height
-  );
 }
 
 .readout.direction-vertical.stacking-stacked.size-medium {
@@ -713,9 +700,6 @@ obc-readout-block {
   --_readout-value-pad-v: var(
     --instrument-components-readout-stack-enhanced-vertical-value-container-padding-vertical
   );
-  --_readout-min-height: var(
-    --instrument-components-readout-stack-enhanced-container-min-height
-  );
 }
 
 /* Group horizontal */
@@ -738,8 +722,6 @@ obc-readout-block {
   --_readout-divider-pad: var(
     --instrument-components-readout-group-horizontal-regular-divider-padding
   );
-  /* TODO(designer): verify; must also hold when only a unit is present */
-  --_readout-min-height: auto;
 }
 
 .readout.direction-horizontal.size-medium {
@@ -780,9 +762,6 @@ obc-readout-block {
   --_readout-divider-pad: var(
     --instrument-components-readout-group-horizontal-enhanced-divider-padding
   );
-  --_readout-min-height: var(
-    --instrument-components-readout-group-horizontal-enhanced-container-min-height
-  );
 }
 
 /* ---------- Debug overlay ----------

package/dist/navigation-instruments/readout/readout.css.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents-full-bundle",
-  "version": "2.0.0-next.156",
+  "version": "2.0.0-next.157",
   "type": "module",
   "repository": {
     "type": "git",

package/src/navigation-instruments/readout/readout.css

@@ -16,13 +16,13 @@ obc-readout-block {
 /* ---------- Root ----------
  * The root is an inline flex column (vertical) or row (horizontal). Private
  * `--_readout-*` variables are resolved per layout × size tier below; every
- * layout rule reads only the private variables. */
+ * layout rule reads only the private variables. A readout is as tall as its
+ * rows: the design's container-min-height tokens are not applied (#1252). */
 .readout {
   display: inline-flex;
   position: relative;
   padding-inline: var(--_readout-pad-h);
   padding-block: var(--_readout-pad-v);
-  min-block-size: var(--_readout-min-height, auto);
   border-radius: var(--global-border-radius-border-radius-base);
 }
 
@@ -532,14 +532,8 @@ obc-readout-block {
   --_readout-value-pad-v: var(
     --instrument-components-readout-group-vertical-regular-value-container-padding-vertical
   );
-  --_readout-min-height: var(
-    --instrument-components-readout-group-vertical-regular-container-min-height
-  );
 }
 
-/* The medium tiers set no `--_readout-min-height`: Figma defines the
- * container-min-height token only for the regular and enhanced tiers, so
- * medium readouts intentionally fall back to `min-block-size: auto`. */
 .readout.direction-vertical.stacking-inline.size-medium {
   --_readout-pad-h: var(
     --instrument-components-readout-group-vertical-medium-container-padding-horizontal
@@ -574,9 +568,6 @@ obc-readout-block {
   --_readout-value-pad-v: var(
     --instrument-components-readout-group-vertical-enhanced-vertical-value-container-padding-vertical
   );
-  --_readout-min-height: var(
-    --instrument-components-readout-group-vertical-enhanced-container-min-height
-  );
 }
 
 /* Stack (vertical, stacked meta) */
@@ -596,9 +587,6 @@ obc-readout-block {
   --_readout-value-pad-v: var(
     --instrument-components-readout-stack-regular-value-container-padding-vertical
   );
-  --_readout-min-height: var(
-    --instrument-components-readout-stack-regular-container-min-height
-  );
 }
 
 .readout.direction-vertical.stacking-stacked.size-medium {
@@ -635,9 +623,6 @@ obc-readout-block {
   --_readout-value-pad-v: var(
     --instrument-components-readout-stack-enhanced-vertical-value-container-padding-vertical
   );
-  --_readout-min-height: var(
-    --instrument-components-readout-stack-enhanced-container-min-height
-  );
 }
 
 /* Group horizontal */
@@ -659,8 +644,6 @@ obc-readout-block {
   --_readout-divider-pad: var(
     --instrument-components-readout-group-horizontal-regular-divider-padding
   );
-  /* TODO(designer): verify; must also hold when only a unit is present */
-  --_readout-min-height: auto;
 }
 
 .readout.direction-horizontal.size-medium {
@@ -701,9 +684,6 @@ obc-readout-block {
   --_readout-divider-pad: var(
     --instrument-components-readout-group-horizontal-enhanced-divider-padding
   );
-  --_readout-min-height: var(
-    --instrument-components-readout-group-horizontal-enhanced-container-min-height
-  );
 }
 
 /* ---------- Debug overlay ----------

package/src/navigation-instruments/readout/readout.spec.ts

@@ -1,6 +1,14 @@
 import {afterEach, describe, expect, it, vi} from 'vitest';
+import {render} from 'vitest-browser-lit';
+import {html, type TemplateResult} from 'lit';
+import '../../main.css';
 import './readout.js';
-import {ReadoutDirection, ReadoutSize, type ObcReadout} from './readout.js';
+import {
+  ReadoutDirection,
+  ReadoutSize,
+  ReadoutStacking,
+  type ObcReadout,
+} from './readout.js';
 
 /**
  * A horizontal readout given a `size` other than `large` warns once per
@@ -60,3 +68,68 @@ describe('obc-readout horizontal size warning', () => {
     expect(warn).toHaveBeenCalledTimes(2);
   });
 });
+
+/**
+ * A readout is exactly as tall as its rows — the padding plus the value
+ * cluster and the meta zone. No tier applies the design file's
+ * container-min-height token (#1252). Measured over every vertical tier and
+ * both stackings: in the large tiers the content already exceeds the token,
+ * so a reintroduced minimum would stay invisible there.
+ */
+describe('obc-readout height', () => {
+  const SIZES = [ReadoutSize.small, ReadoutSize.medium, ReadoutSize.large];
+  const STACKINGS = [ReadoutStacking.inline, ReadoutStacking.stacked];
+
+  async function mount(template: TemplateResult) {
+    const screen = render(template);
+    const el = screen.container.querySelector('obc-readout') as ObcReadout;
+    await el.updateComplete;
+    return el.shadowRoot!.querySelector('.readout') as HTMLElement;
+  }
+
+  /** The height a column flex root has when nothing but its rows sizes it. */
+  function contentHeight(root: HTMLElement): number {
+    const {paddingTop, paddingBottom} = getComputedStyle(root);
+    const rows = Array.from(root.children).reduce(
+      (sum, row) => sum + row.getBoundingClientRect().height,
+      0
+    );
+    return rows + parseFloat(paddingTop) + parseFloat(paddingBottom);
+  }
+
+  for (const size of SIZES) {
+    for (const stacking of STACKINGS) {
+      it(`hugs its rows: ${size} / ${stacking}`, async () => {
+        const root = await mount(
+          html`<obc-readout
+            .size=${size}
+            .stacking=${stacking}
+            .value=${123}
+            label="SOG"
+            unit="kn"
+          ></obc-readout>`
+        );
+        expect(root.getBoundingClientRect().height).toBeCloseTo(
+          contentHeight(root),
+          0
+        );
+      });
+    }
+  }
+
+  it('hugs its rows: small / stacked, meta zone only', async () => {
+    const root = await mount(
+      html`<obc-readout
+        .size=${ReadoutSize.small}
+        .stacking=${ReadoutStacking.stacked}
+        .hasValue=${false}
+        label="Angle"
+        unit="DEG"
+      ></obc-readout>`
+    );
+    expect(root.getBoundingClientRect().height).toBeCloseTo(
+      contentHeight(root),
+      0
+    );
+  });
+});