@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.88 → 2.0.0-next.90

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/bundle/openbridge-webcomponents.bundle.js +17477 -16780
  2. package/bundle/openbridge-webcomponents.bundle.js.map +1 -1
  3. package/custom-elements.json +742 -43
  4. package/dist/building-blocks/readout-block/readout-block.css.js +229 -0
  5. package/dist/building-blocks/readout-block/readout-block.css.js.map +1 -0
  6. package/dist/building-blocks/readout-block/readout-block.d.ts +146 -0
  7. package/dist/building-blocks/readout-block/readout-block.d.ts.map +1 -0
  8. package/dist/building-blocks/readout-block/readout-block.js +273 -0
  9. package/dist/building-blocks/readout-block/readout-block.js.map +1 -0
  10. package/dist/navigation-instruments/readout-list/readout-list.css.js +26 -0
  11. package/dist/navigation-instruments/readout-list/readout-list.css.js.map +1 -0
  12. package/dist/navigation-instruments/readout-list/readout-list.d.ts +70 -0
  13. package/dist/navigation-instruments/readout-list/readout-list.d.ts.map +1 -0
  14. package/dist/navigation-instruments/readout-list/readout-list.js +154 -0
  15. package/dist/navigation-instruments/readout-list/readout-list.js.map +1 -0
  16. package/dist/navigation-instruments/readout-list-item/readout-list-item.css.js +139 -124
  17. package/dist/navigation-instruments/readout-list-item/readout-list-item.css.js.map +1 -1
  18. package/dist/navigation-instruments/readout-list-item/readout-list-item.d.ts +57 -26
  19. package/dist/navigation-instruments/readout-list-item/readout-list-item.d.ts.map +1 -1
  20. package/dist/navigation-instruments/readout-list-item/readout-list-item.js +139 -125
  21. package/dist/navigation-instruments/readout-list-item/readout-list-item.js.map +1 -1
  22. package/package.json +1 -1
  23. package/src/building-blocks/readout-block/readout-block.css +192 -0
  24. package/src/building-blocks/readout-block/readout-block.stories.ts +347 -0
  25. package/src/building-blocks/readout-block/readout-block.ts +355 -0
  26. package/src/navigation-instruments/readout-list/readout-list.css +15 -0
  27. package/src/navigation-instruments/readout-list/readout-list.stories.ts +358 -0
  28. package/src/navigation-instruments/readout-list/readout-list.ts +216 -0
  29. package/src/navigation-instruments/readout-list-item/readout-list-item.css +141 -120
  30. package/src/navigation-instruments/readout-list-item/readout-list-item.stories.ts +145 -29
  31. package/src/navigation-instruments/readout-list-item/readout-list-item.ts +169 -146
@@ -12,6 +12,57 @@ const componentStyle = css`* {
12
12
  width: 100%;
13
13
  }
14
14
 
15
+ /* Bridge the list-item's public colour custom properties onto the block's, so
16
+ consumers keep theming the value / setpoint / advice / hinted-zero colours via
17
+ \`--obc-readout-list-item-*\` even though they now render inside obc-readout-block. */
18
+
19
+ obc-readout-block {
20
+ --obc-readout-block-value-color: var(
21
+ --obc-readout-list-item-value-color,
22
+ var(--element-neutral-color)
23
+ );
24
+ --obc-readout-block-value-enhanced-color: var(
25
+ --obc-readout-list-item-value-enhanced-color,
26
+ var(--element-neutral-enhanced-color)
27
+ );
28
+ --obc-readout-block-setpoint-color: var(
29
+ --obc-readout-list-item-setpoint-color,
30
+ var(--element-neutral-color)
31
+ );
32
+ --obc-readout-block-setpoint-enhanced-color: var(
33
+ --obc-readout-list-item-setpoint-enhanced-color,
34
+ var(--instrument-enhanced-secondary-color)
35
+ );
36
+ --obc-readout-block-setpoint-touching-outline-color: var(
37
+ --obc-readout-list-item-setpoint-touching-outline-color,
38
+ var(--element-neutral-enhanced-color)
39
+ );
40
+ --obc-readout-block-setpoint-touching-color: var(
41
+ --obc-readout-list-item-setpoint-touching-color,
42
+ var(--base-blue-100)
43
+ );
44
+ --obc-readout-block-advice-color: var(
45
+ --obc-readout-list-item-advice-color,
46
+ var(--element-neutral-color)
47
+ );
48
+ --obc-readout-block-hinted-color: var(
49
+ --obc-readout-list-item-hinted-color,
50
+ var(--element-inactive-color)
51
+ );
52
+ }
53
+
54
+ /* Size the consumer-provided block icons forwarded into obc-readout-block's
55
+ \`icon\` slot (the block sizes the forwarded slot element; this sizes the
56
+ consumer's icon to fill it). */
57
+
58
+ ::slotted([slot="value-icon"]),
59
+ ::slotted([slot="setpoint-icon"]),
60
+ ::slotted([slot="advice-icon"]) {
61
+ display: block;
62
+ inline-size: 100%;
63
+ block-size: 100%;
64
+ }
65
+
15
66
  /* ---------- Root / surface ----------
16
67
  * \`.root\` is the touch target (a <button> when clickable, otherwise a <div>).
17
68
  * \`.surface\` is the visible box that carries padding, corner radius, the
@@ -222,129 +273,90 @@ const componentStyle = css`* {
222
273
  align-items: flex-end;
223
274
  }
224
275
 
225
- /* ---------- Readout building block (advice / setpoint / value) ---------- */
276
+ /* ---------- Value reading (value + degree + unit) ----------
277
+ * Groups the value block, its degree column and the trailing unit so the value
278
+ * alert frame can wrap all three. Layout-neutral: it adds no gap, so the content
279
+ * sits exactly where it did when these were siblings of \`.value-area\`. */
226
280
 
227
- .block {
281
+ .value-reading {
282
+ position: relative;
228
283
  display: inline-flex;
229
284
  align-items: flex-end;
230
285
  }
231
286
 
232
- /* Number + its (setpoint/advice) degree glyph, hugging with no gap — the
233
- \`.block\` gap only separates the icon from this group. */
234
-
235
- .block-content {
236
- display: inline-flex;
237
- align-items: flex-end;
238
- }
239
-
240
- .block-icon {
241
- display: inline-flex;
242
- align-items: center;
243
- justify-content: center;
244
- flex: none;
245
- color: inherit;
246
- /* Centre the icon against the block's text rather than bottom-aligning it (the
247
- block is flex-end). Matters for the value block, whose text is taller than
248
- the icon, so the value icon lines up with the number like the smaller
249
- setpoint/advice icons do. */
250
- align-self: center;
251
- }
252
-
253
- .block-icon obi-input-right,
254
- .block-icon obi-notification-advice,
255
- .block-icon ::slotted(*) {
256
- display: block;
257
- inline-size: 100%;
258
- block-size: 100%;
259
- }
287
+ /* ---------- Value data quality (low-integrity / invalid) ----------
288
+ * The value's per-block data-quality chip, applied to the whole reading (value +
289
+ * degree + unit) rather than hugging the value alone — the same logic as the
290
+ * value alert frame, minus its custom padding. Same look as the block/source
291
+ * chip (1px outline, check radius, alert-quality colours). Uses \`outline\` (not
292
+ * \`border\`) so it never shifts the value's width / cross-row column alignment.
293
+ * Setpoint/advice keep their own in-block chip; the row-level data quality on
294
+ * \`.surface\` is unchanged. */
260
295
 
261
- .hinted-zero {
262
- color: var(
263
- --obc-readout-list-item-hinted-color,
264
- var(--element-inactive-color)
265
- );
296
+ .value-reading.data-low-integrity,
297
+ .value-reading.data-invalid {
298
+ outline: 1px solid;
299
+ border-radius: var(--global-border-radius-border-radius-check);
266
300
  }
267
301
 
268
- /* ---------- Text colours (overridable via custom properties) ----------
269
- * obc-textbox does not set its own colour, so it inherits these. */
270
-
271
- .block-value {
272
- color: var(--obc-readout-list-item-value-color, var(--element-neutral-color));
302
+ .value-reading.data-low-integrity {
303
+ background: var(--alert-low-integrity-background-color);
304
+ outline-color: var(--alert-low-integrity-border-color);
273
305
  }
274
306
 
275
- .block-value.tone-enhanced {
276
- color: var(
277
- --obc-readout-list-item-value-enhanced-color,
278
- var(--element-neutral-enhanced-color)
279
- );
307
+ .value-reading.data-invalid {
308
+ background: var(--alert-invalid-background-color);
309
+ outline-color: var(--alert-invalid-border-color);
280
310
  }
281
311
 
282
- /* The setpoint shares the value's colour state: neutral by default, enhanced
283
- (blue) only when the row is enhanced never a blue setpoint next to a grey
284
- value. \`--instrument-enhanced-secondary-color\` is the same #2d548b as the
285
- value's \`--element-neutral-enhanced-color\`. */
312
+ /* ---------- Value alert overlay ----------
313
+ * A pure overlay around the value reading: it reserves no space, so toggling the
314
+ * frame never changes the row height or breaks cross-row column alignment. The
315
+ * box is offset outward by (padding − stroke/2) on each axis so the alert-frame's
316
+ * outline (drawn outside its box) lands CENTRED on the 4px/2px padding line
317
+ * (half inside / half outside), matching Figma 58:10120. */
286
318
 
287
- .block-setpoint {
288
- color: var(
289
- --obc-readout-list-item-setpoint-color,
290
- var(--element-neutral-color)
319
+ .value-alert-overlay {
320
+ --_obc-readout-value-frame-padding-horizontal: 4px;
321
+ --_obc-readout-value-frame-padding-vertical: 2px;
322
+ /* Must match obc-alert-frame's ACTUAL outline width so the stroke stays centred
323
+ on the 4px/2px line. \`thickness-small\` is hard-coded to 2px in
324
+ alert-frame.css (it does NOT use the themed stroke-width token), so use a
325
+ literal 2px here; \`thickness-large\` is handled below. */
326
+ --_obc-readout-value-frame-stroke: 2px;
327
+ position: absolute;
328
+ inset-inline: calc(
329
+ -1 *
330
+ (
331
+ var(--_obc-readout-value-frame-padding-horizontal) -
332
+ var(--_obc-readout-value-frame-stroke) / 2
333
+ )
291
334
  );
292
- /* Flip-flop emphasis + pop-up fade animate at 100ms. */
293
- transition:
294
- opacity 100ms ease,
295
- color 100ms ease;
296
- }
297
-
298
- .block-setpoint.tone-enhanced {
299
- color: var(
300
- --obc-readout-list-item-setpoint-enhanced-color,
301
- var(--instrument-enhanced-secondary-color)
335
+ inset-block: calc(
336
+ -1 *
337
+ (
338
+ var(--_obc-readout-value-frame-padding-vertical) -
339
+ var(--_obc-readout-value-frame-stroke) / 2
340
+ )
302
341
  );
342
+ /* Display-only: never intercept clicks on a clickable row. */
343
+ pointer-events: none;
303
344
  }
304
345
 
305
- /* Pop-up: fade the setpoint out once value === setpoint, keeping its space so
306
- the value stays column-aligned. */
346
+ /* thickness=large: obc-alert-frame's large outline uses the alert-frame border
347
+ weight token, so the overlay's outward offset must use the same width to keep
348
+ the stroke centred on the padding line. */
307
349
 
308
- .block-setpoint.is-hiding {
309
- opacity: 0;
310
- }
311
-
312
- .block-setpoint.is-hidden {
313
- opacity: 0;
314
- visibility: hidden;
315
- }
316
-
317
- /* Touching / focus state: the setpoint triangle takes the marker's focus look — a
318
- pale fill (--base-blue-100) with a dark 1px edge (--element-neutral-enhanced),
319
- mirroring \`svghelpers/setpoint.ts\` focus (fill base-blue-100 + 2px stroke).
320
- The glyph icon is \`fill: currentColor\` and can't take a CSS \`stroke\`, so the
321
- edge is layered drop-shadows. The setpoint number keeps its normal, readable
322
- colour. */
323
-
324
- .block-setpoint.touching {
325
- --_touching-outline: var(
326
- --obc-readout-list-item-setpoint-touching-outline-color,
327
- var(--element-neutral-enhanced-color)
350
+ .value-alert-overlay.thickness-large {
351
+ --_obc-readout-value-frame-stroke: var(
352
+ --global-size-spacing-border-weight-alertframe
328
353
  );
329
354
  }
330
355
 
331
- .block-setpoint.touching .block-icon {
332
- color: var(
333
- --obc-readout-list-item-setpoint-touching-color,
334
- var(--base-blue-100)
335
- );
336
- filter: drop-shadow(1px 0 0 var(--_touching-outline))
337
- drop-shadow(-1px 0 0 var(--_touching-outline))
338
- drop-shadow(0 1px 0 var(--_touching-outline))
339
- drop-shadow(0 -1px 0 var(--_touching-outline));
340
- }
341
-
342
- .block-advice {
343
- color: var(
344
- --obc-readout-list-item-advice-color,
345
- var(--element-neutral-color)
346
- );
347
- }
356
+ /* The readout building blocks (advice / setpoint / value) now render inside
357
+ \`obc-readout-block\`; their layout / colour / hinted-zero / data-quality CSS
358
+ lives there. The list-item only bridges the public colour vars (see top) and
359
+ keeps the surrounding row layout below. */
348
360
 
349
361
  .label {
350
362
  color: var(
@@ -364,26 +376,22 @@ const componentStyle = css`* {
364
376
  );
365
377
  }
366
378
 
367
- /* ---------- Per-block data quality ----------
379
+ /* ---------- Source data quality ----------
368
380
  * Independent of (and nests inside) the row-level data-quality frame. Uses
369
- * \`outline\` (not \`border\`) so the chip never shifts the block's width — the
370
- * value stays column-aligned across rows. */
381
+ * \`outline\` (not \`border\`) so the chip never shifts the source's width. (The
382
+ * per-block value/setpoint/advice chips live in \`obc-readout-block\`.) */
371
383
 
372
- .block.data-low-integrity,
373
- .block.data-invalid,
374
384
  .source.data-low-integrity,
375
385
  .source.data-invalid {
376
386
  outline: 1px solid;
377
387
  border-radius: var(--global-border-radius-border-radius-check);
378
388
  }
379
389
 
380
- .block.data-low-integrity,
381
390
  .source.data-low-integrity {
382
391
  background: var(--alert-low-integrity-background-color);
383
392
  outline-color: var(--alert-low-integrity-border-color);
384
393
  }
385
394
 
386
- .block.data-invalid,
387
395
  .source.data-invalid {
388
396
  background: var(--alert-invalid-background-color);
389
397
  outline-color: var(--alert-invalid-border-color);
@@ -525,11 +533,6 @@ const componentStyle = css`* {
525
533
  );
526
534
  }
527
535
 
528
- .size-small .block {
529
- gap: var(--instrument-components-readout-new-general-regular-icon-gap);
530
- }
531
-
532
- .size-small .block-icon,
533
536
  .size-small .leading-icon {
534
537
  inline-size: var(
535
538
  --instrument-components-readout-new-general-regular-icon-size
@@ -566,11 +569,6 @@ const componentStyle = css`* {
566
569
  );
567
570
  }
568
571
 
569
- .size-medium .block {
570
- gap: var(--instrument-components-readout-new-general-medium-icon-gap);
571
- }
572
-
573
- .size-medium .block-icon,
574
572
  .size-medium .leading-icon {
575
573
  inline-size: var(
576
574
  --instrument-components-readout-new-general-medium-icon-size
@@ -602,11 +600,6 @@ const componentStyle = css`* {
602
600
  gap: var(--instrument-components-readout-new-list-item-large-value-gap);
603
601
  }
604
602
 
605
- .size-large .block {
606
- gap: var(--instrument-components-readout-new-general-large-icon-gap);
607
- }
608
-
609
- .size-large .block-icon,
610
603
  .size-large .leading-icon {
611
604
  inline-size: var(--instrument-components-readout-new-general-large-icon-size);
612
605
  block-size: var(--instrument-components-readout-new-general-large-icon-size);
@@ -651,6 +644,28 @@ const componentStyle = css`* {
651
644
  );
652
645
  --_obc-readout-list-item-data-border: var(--alert-invalid-border-color);
653
646
  }
647
+
648
+ /* ---------- Debug overlay ----------
649
+ * \`showDebugOverlay\` outlines each readout building block (red), the degree
650
+ * columns (blue) and the degree spacer (green) so reserver widths / alignment
651
+ * are visible. A development aid (mirrors the donut chart's \`showDebugOverlay\`);
652
+ * off by default. */
653
+
654
+ :host([showDebugOverlay]) obc-readout-block::part(block) {
655
+ outline: 1px solid rgba(220, 0, 0, 0.7);
656
+ outline-offset: -1px;
657
+ }
658
+
659
+ :host([showDebugOverlay]) obc-readout-block::part(degree),
660
+ :host([showDebugOverlay]) .degree-column {
661
+ outline: 1px solid rgba(0, 0, 220, 0.7);
662
+ outline-offset: -1px;
663
+ }
664
+
665
+ :host([showDebugOverlay]) .degree-spacer {
666
+ outline: 1px solid rgba(0, 160, 0, 0.8);
667
+ outline-offset: -1px;
668
+ }
654
669
  `;
655
670
  export {
656
671
  componentStyle as default
@@ -1 +1 @@
1
- {"version":3,"file":"readout-list-item.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"readout-list-item.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,21 +1,18 @@
1
1
  import { LitElement } from 'lit';
2
2
  import { ObcTextboxFontWeight } from '../../components/textbox/textbox.js';
3
+ import { ReadoutBlockSize, ReadoutBlockDataQuality } from '../../building-blocks/readout-block/readout-block.js';
3
4
  import { AlertFrameConfig } from '../../components/alert-frame/alert-frame.js';
4
5
  import '../../components/textbox/textbox.js';
5
- import '../../icons/icon-input-right.js';
6
- import '../../icons/icon-notification-advice.js';
6
+ import '../../building-blocks/readout-block/readout-block.js';
7
7
  export { ObcTextboxFontWeight } from '../../components/textbox/textbox.js';
8
8
  /**
9
- * Density/size scale of the readout row.
9
+ * Density/size scale of the readout row (an alias of `ReadoutBlockSize`).
10
10
  * - `small`: regular value typography (smallest, densest).
11
11
  * - `medium`: medium value typography.
12
12
  * - `large`: large value typography.
13
13
  */
14
- export declare enum ReadoutListItemSize {
15
- small = "small",
16
- medium = "medium",
17
- large = "large"
18
- }
14
+ export declare const ReadoutListItemSize: typeof ReadoutBlockSize;
15
+ export type ReadoutListItemSize = ReadoutBlockSize;
19
16
  /**
20
17
  * Placement of the unit/source relative to the label and value.
21
18
  * - `trailing-unit`: unit after the value, source after a trailing divider.
@@ -37,13 +34,12 @@ export declare enum ReadoutListItemPriority {
37
34
  enhanced = "enhanced"
38
35
  }
39
36
  /**
40
- * Measurement quality of the value. Orthogonal to the row-level `alert`
41
- * – a low-integrity or invalid value can also sit inside an alert frame.
37
+ * Measurement quality of the value (an alias of `ReadoutBlockDataQuality`).
38
+ * Orthogonal to the row-level `alert` – a low-integrity or invalid value can
39
+ * also sit inside an alert frame.
42
40
  */
43
- export declare enum ReadoutListItemDataQuality {
44
- lowIntegrity = "low-integrity",
45
- invalid = "invalid"
46
- }
41
+ export declare const ReadoutListItemDataQuality: typeof ReadoutBlockDataQuality;
42
+ export type ReadoutListItemDataQuality = ReadoutBlockDataQuality;
47
43
  /**
48
44
  * Corner style of the interactive (clickable) surface.
49
45
  * - `squared` (default): no rounding (true rectangle).
@@ -69,6 +65,14 @@ export interface ReadoutBlockState {
69
65
  /** Per-block alert frame; nests inside any row-level alert frame. */
70
66
  alert?: false | AlertFrameConfig;
71
67
  }
68
+ /**
69
+ * Per-value options. Unlike setpoint/advice, the value's `alert` frame AND
70
+ * `dataQuality` chip wrap the whole reading — value (+ value-icon) + degree +
71
+ * trailing unit — rather than the value alone. The alert frame is a pure overlay
72
+ * (4px/2px padding, stroke centred on that line); the data-quality chip reuses
73
+ * the block chip's `outline` styling with no extra padding. Neither shifts
74
+ * content or changes the row height / column alignment (Figma 58:10120).
75
+ */
72
76
  export interface ReadoutValueOptions extends ReadoutBlockState {
73
77
  /** Render the unfilled leading positions as muted zeroes (requires `maxDigits`). */
74
78
  hintedZeros?: boolean;
@@ -183,8 +187,10 @@ export declare class ObcReadoutListItem extends LitElement {
183
187
  src?: string;
184
188
  hasValue: boolean;
185
189
  value: number | null;
186
- /** Render the value as the literal "OFF" (e.g. equipment powered down). Affects the value only. */
190
+ /** Render the value as `offText` (e.g. equipment powered down). Affects the value only. */
187
191
  off: boolean;
192
+ /** Text shown in place of the value when `off` is true. @availableWhen off==true */
193
+ offText: string;
188
194
  hasSetpoint: boolean;
189
195
  /** @availableWhen hasSetpoint==true */
190
196
  setpoint?: number;
@@ -207,6 +213,12 @@ export declare class ObcReadoutListItem extends LitElement {
207
213
  adviceOptions?: ReadoutAdviceOptions;
208
214
  unitOptions?: ReadoutReserverOptions;
209
215
  srcOptions?: ReadoutSrcOptions;
216
+ /**
217
+ * Development aid: outline the readout building blocks (red), the degree
218
+ * columns (blue) and the degree spacer (green) so reserver widths / alignment
219
+ * are visible. Off by default.
220
+ */
221
+ showDebugOverlay: boolean;
210
222
  /** Pop-up deferred-hide phase for the setpoint (see {@link updated}). */
211
223
  private deferredSetpointHidePhase;
212
224
  private deferredSetpointHideTimer?;
@@ -247,19 +259,14 @@ export declare class ObcReadoutListItem extends LitElement {
247
259
  /** Setpoint is SemiBold only while emphasised, otherwise regular weight. */
248
260
  private get setpointWeight();
249
261
  private numericFormatOptions;
250
- /** Widest possible value string for width reservation (e.g. `"000.0"`). */
251
- private get reserverText();
252
- /**
253
- * Effective width reserver for a numeric block: the wider of the explicit
254
- * `spaceReserver` and the `maxDigits`/`fractionDigits`-derived reserve, so an
255
- * explicit reserver can never reserve *less* than the formatted value needs.
256
- * Under tabular-nums the rendered width is proportional to character count, so
257
- * "wider" compares string length.
258
- */
259
- private widerReserver;
260
262
  /** classMap fragment for a block / source carrying per-block data quality. */
261
263
  private dataQualityClasses;
262
- private renderIcon;
264
+ /**
265
+ * Forward the matching list-item icon slot into the block's single `icon`
266
+ * slot. The variant's default marker lives in `obc-readout-block` and shows
267
+ * when nothing is assigned here (an empty forwarded slot flattens to nothing).
268
+ */
269
+ private renderForwardedIcon;
263
270
  private renderBlock;
264
271
  /**
265
272
  * A cap-height `°` column whose width scales with the value size. Used after
@@ -301,6 +308,30 @@ export declare class ObcReadoutListItem extends LitElement {
301
308
  private renderDegreeSpacer;
302
309
  private renderTextbox;
303
310
  private renderValueCluster;
311
+ /**
312
+ * The value reading: the value block, its degree column and the trailing unit
313
+ * grouped in one relatively-positioned wrapper so the value alert frame AND the
314
+ * value data-quality chip can wrap value + degree + unit together (Figma
315
+ * 58:10120).
316
+ *
317
+ * Moving the degree / unit into this wrapper (the new last child of
318
+ * `.value-cluster`) preserves every existing gap, so the underlying content
319
+ * stays column-aligned with or without the frame / chip. Both the value alert
320
+ * (overlay) and the value data-quality chip are applied here — NOT inside
321
+ * `obc-readout-block` — so they extend over the unit; setpoint/advice keep their
322
+ * own block-level frame and chip. The chip uses `outline` (not `border`), so it
323
+ * never shifts the value's width / column alignment.
324
+ */
325
+ private renderValueReading;
326
+ /**
327
+ * The value alert frame, drawn as a pure overlay around the value reading
328
+ * (value + degree + unit). It reserves no space — the `obc-alert-frame` sits in
329
+ * an absolutely-positioned box offset outward (see `.value-alert-overlay` in
330
+ * the CSS) so its stroke is centred on the 4px/2px padding line and toggling it
331
+ * never shifts content or row height. Renders only when `valueOptions.alert` is
332
+ * a config object.
333
+ */
334
+ private renderValueAlertOverlay;
304
335
  private renderLabelContainer;
305
336
  private renderTrailingUnit;
306
337
  private renderTrailingSource;
@@ -1 +1 @@
1
- {"version":3,"file":"readout-list-item.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/readout-list-item/readout-list-item.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"readout-list-item.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/readout-list-item/readout-list-item.ts"],"names":[],"mappings":"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"}