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

package/src/building-blocks/readout-block/readout-block.stories.ts

@@ -0,0 +1,346 @@
+import type {Meta, StoryObj} from '@storybook/web-components-vite';
+import {html, nothing} from 'lit';
+import {
+  ReadoutBlockVariant,
+  ReadoutBlockSize,
+  ReadoutBlockDataQuality,
+  ObcTextboxFontWeight,
+  ObcTextboxAlignment,
+} from './readout-block.js';
+import './readout-block.js';
+import '../../icons/icon-placeholder.js';
+import {
+  ObcAlertFrameMode,
+  ObcAlertFrameType,
+} from '../../components/alert-frame/alert-frame.js';
+import {AlertType} from '../../types.js';
+
+const NONE = 'none';
+
+type BlockArgs = {
+  variant: ReadoutBlockVariant;
+  value: number;
+  size: ReadoutBlockSize;
+  enhanced: boolean;
+  weight: ObcTextboxFontWeight;
+  hasDegree: boolean;
+  hasIcon: boolean;
+  fractionDigits: number;
+  maxDigits: number;
+  hintedZeros: boolean;
+  spaceReserver: string;
+  off: boolean;
+  offText: string;
+  alignment: ObcTextboxAlignment;
+  dataQuality: ReadoutBlockDataQuality | typeof NONE;
+};
+
+// A faithful single-block render. The block inherits its colour from the host
+// context (the list-item normally drives it), so standalone it shows the neutral
+// default tone; `enhanced` switches to the accent tone.
+function renderBlock(args: Partial<BlockArgs>) {
+  return html`
+    <obc-readout-block
+      .variant=${args.variant ?? ReadoutBlockVariant.value}
+      .value=${args.value ?? null}
+      .size=${args.size ?? ReadoutBlockSize.small}
+      .enhanced=${args.enhanced ?? false}
+      .weight=${args.weight ?? ObcTextboxFontWeight.regular}
+      .hasDegree=${args.hasDegree ?? false}
+      .hasIcon=${args.hasIcon ?? false}
+      .fractionDigits=${args.fractionDigits ?? 0}
+      .maxDigits=${args.maxDigits ?? 0}
+      .hintedZeros=${args.hintedZeros ?? false}
+      .spaceReserver=${args.spaceReserver || undefined}
+      .off=${args.off ?? false}
+      .offText=${args.offText ?? 'OFF'}
+      .alignment=${args.alignment ?? ObcTextboxAlignment.Right}
+      .dataQuality=${args.dataQuality === NONE ? undefined : args.dataQuality}
+    >
+      ${args.hasIcon
+        ? html`<obi-placeholder slot="icon"></obi-placeholder>`
+        : nothing}
+    </obc-readout-block>
+  `;
+}
+
+const themedDecorator = (story: () => unknown) => html`
+  <div
+    data-obc-theme="day"
+    style="background: var(--container-background-color); padding: 24px; display: inline-block;"
+  >
+    ${story()}
+  </div>
+`;
+
+const showcaseStyle = `
+  .rb-grid { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; }
+  .rb-card {
+    display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
+    padding: 12px; border-radius: 8px; background: rgba(0, 0, 0, 0.03);
+  }
+  .rb-card-title {
+    font: 10px/1.2 var(--global-typography-ui-label-font-family, sans-serif);
+    text-transform: uppercase; letter-spacing: 0.06em; color: var(--element-neutral-color, #777);
+  }
+  .rb-cell { outline: 1px dashed rgba(0, 0, 0, 0.12); }
+`;
+
+type ShowcaseCard = {title: string; args: Partial<BlockArgs>};
+
+function renderShowcase(cards: ShowcaseCard[]) {
+  return html`
+    <style>
+      ${showcaseStyle}
+    </style>
+    <div class="rb-grid">
+      ${cards.map(
+        (card) => html`
+          <div class="rb-card">
+            <div class="rb-card-title">${card.title}</div>
+            <div class="rb-cell">${renderBlock(card.args)}</div>
+          </div>
+        `
+      )}
+    </div>
+  `;
+}
+
+const meta = {
+  title: 'Building Blocks/Readout Block',
+  tags: ['autodocs', '6.0', 'wip'],
+  component: 'obc-readout-block',
+  decorators: [themedDecorator],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'The most atomic readout primitive — a single cap-height, ' +
+          'width-reservable numeric segment (value / setpoint / advice). It is the ' +
+          'building block used inside `obc-readout-list-item` (and, in a future ' +
+          'refactor, inside `obc-readout`); it is not normally used on its own. ' +
+          'Colour is inherited from the host context, so standalone it shows the ' +
+          'neutral tone.',
+      },
+    },
+  },
+  render: (args) => renderBlock(args),
+  args: {
+    variant: ReadoutBlockVariant.value,
+    value: 123,
+    size: ReadoutBlockSize.small,
+    enhanced: false,
+    weight: ObcTextboxFontWeight.regular,
+    hasDegree: false,
+    hasIcon: false,
+    fractionDigits: 0,
+    maxDigits: 0,
+    hintedZeros: false,
+    spaceReserver: '',
+    off: false,
+    offText: 'OFF',
+    alignment: ObcTextboxAlignment.Right,
+    dataQuality: NONE,
+  },
+  argTypes: {
+    variant: {
+      control: {type: 'select'},
+      options: Object.values(ReadoutBlockVariant),
+    },
+    size: {
+      control: {type: 'select'},
+      options: Object.values(ReadoutBlockSize),
+    },
+    weight: {
+      control: {type: 'select'},
+      options: Object.values(ObcTextboxFontWeight),
+    },
+    alignment: {
+      control: {type: 'select'},
+      options: Object.values(ObcTextboxAlignment),
+    },
+    fractionDigits: {control: {type: 'number', min: 0, step: 1}},
+    maxDigits: {control: {type: 'number', min: 0, step: 1}},
+    spaceReserver: {control: {type: 'text'}},
+    offText: {control: {type: 'text'}},
+    dataQuality: {
+      control: {type: 'select'},
+      options: [NONE, ...Object.values(ReadoutBlockDataQuality)],
+    },
+  },
+} satisfies Meta<BlockArgs>;
+
+export default meta;
+type Story = StoryObj<BlockArgs>;
+
+export const Playground: Story = {};
+
+export const Variants: Story = {
+  render: () =>
+    renderShowcase([
+      {title: 'value', args: {variant: ReadoutBlockVariant.value, value: 123}},
+      {
+        title: 'setpoint',
+        args: {variant: ReadoutBlockVariant.setpoint, value: 120},
+      },
+      {
+        title: 'advice',
+        args: {variant: ReadoutBlockVariant.advice, value: 118},
+      },
+    ]),
+};
+
+export const Sizes: Story = {
+  render: () =>
+    renderShowcase(
+      [
+        ReadoutBlockSize.small,
+        ReadoutBlockSize.medium,
+        ReadoutBlockSize.large,
+      ].map((size) => ({
+        title: size,
+        args: {size, value: 123, hasDegree: true},
+      }))
+    ),
+};
+
+export const Tone: Story = {
+  render: () =>
+    renderShowcase([
+      {title: 'regular', args: {value: 123, enhanced: false}},
+      {title: 'enhanced', args: {value: 123, enhanced: true}},
+    ]),
+};
+
+export const Weight: Story = {
+  render: () =>
+    renderShowcase(
+      [
+        ObcTextboxFontWeight.regular,
+        ObcTextboxFontWeight.semibold,
+        ObcTextboxFontWeight.bold,
+      ].map((weight) => ({title: weight, args: {value: 123, weight}}))
+    ),
+};
+
+export const Degree: Story = {
+  render: () =>
+    renderShowcase([
+      {title: 'no degree', args: {value: 287}},
+      {title: 'degree', args: {value: 287, hasDegree: true}},
+    ]),
+};
+
+/**
+ * `off` renders `offText` (default `"OFF"`) in place of the value.
+ */
+export const OffText: Story = {
+  render: () =>
+    renderShowcase([
+      {title: 'OFF (default)', args: {off: true}},
+      {title: 'custom', args: {off: true, offText: 'unavailable'}},
+    ]),
+};
+
+/**
+ * Hinted zeros pad the integer part up to `maxDigits` as muted leading zeros.
+ * When enabled they take priority over `spaceReserver` (they already fill to
+ * `maxDigits`, so an explicit reserver is ignored).
+ */
+export const HintedZeros: Story = {
+  render: () =>
+    renderShowcase([
+      {title: 'value 8, maxDigits 4', args: {value: 8, maxDigits: 4}},
+      {
+        title: 'hinted zeros',
+        args: {value: 8, maxDigits: 4, hintedZeros: true},
+      },
+      {
+        title: 'hinted zeros + fraction',
+        args: {value: 8, maxDigits: 4, fractionDigits: 1, hintedZeros: true},
+      },
+      {
+        title: 'hinted wins over reserver',
+        args: {
+          value: 8,
+          maxDigits: 4,
+          hintedZeros: true,
+          spaceReserver: '00000000',
+        },
+      },
+    ]),
+};
+
+/**
+ * `maxDigits` reserves INTEGER digits only — independent of `fractionDigits`
+ * (the decimal point and fraction digits never count toward `maxDigits`).
+ */
+export const MaxDigitsAndFractionDigits: Story = {
+  render: () =>
+    renderShowcase([
+      {title: 'maxDigits 4', args: {value: 12, maxDigits: 4}},
+      {
+        title: 'maxDigits 4, frac 1',
+        args: {value: 12, maxDigits: 4, fractionDigits: 1},
+      },
+      {
+        title: 'maxDigits 4, frac 2',
+        args: {value: 12.5, maxDigits: 4, fractionDigits: 2},
+      },
+    ]),
+};
+
+export const Alignment: Story = {
+  render: () =>
+    renderShowcase(
+      [
+        ObcTextboxAlignment.Left,
+        ObcTextboxAlignment.Center,
+        ObcTextboxAlignment.Right,
+      ].map((alignment) => ({
+        title: alignment,
+        // A wide reserver makes the alignment within the reserved width visible.
+        args: {value: 12, alignment, spaceReserver: '00000'},
+      }))
+    ),
+};
+
+export const DataQuality: Story = {
+  render: () =>
+    renderShowcase([
+      {title: 'nominal', args: {value: 123}},
+      {
+        title: 'low-integrity',
+        args: {value: 123, dataQuality: ReadoutBlockDataQuality.lowIntegrity},
+      },
+      {
+        title: 'invalid',
+        args: {value: 123, dataQuality: ReadoutBlockDataQuality.invalid},
+      },
+      {title: 'null (dash)', args: {value: undefined}},
+    ]),
+};
+
+export const Alert: Story = {
+  render: () => html`
+    <style>
+      ${showcaseStyle}
+    </style>
+    <div class="rb-grid">
+      <div class="rb-card">
+        <div class="rb-card-title">value alert (warning)</div>
+        <div class="rb-cell">
+          <obc-readout-block
+            .variant=${ReadoutBlockVariant.value}
+            .value=${123}
+            .alert=${{
+              status: AlertType.Warning,
+              mode: ObcAlertFrameMode.unackedActive,
+              type: ObcAlertFrameType.Regular,
+            }}
+          ></obc-readout-block>
+        </div>
+      </div>
+    </div>
+  `,
+};

package/src/building-blocks/readout-block/readout-block.ts

@@ -0,0 +1,355 @@
+import {LitElement, html, nothing, unsafeCSS, type TemplateResult} from 'lit';
+import {property, state} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
+import componentStyle from './readout-block.css?inline';
+import {customElement} from '../../decorator.js';
+import '../../components/textbox/textbox.js';
+import {
+  ObcTextboxSize,
+  ObcTextboxFontWeight,
+  ObcTextboxAlignment,
+} from '../../components/textbox/textbox.js';
+import '../../icons/icon-input-right.js';
+import '../../icons/icon-notification-advice.js';
+import {
+  formatNumericValue,
+  readoutFormattedInteger,
+  type ReadoutNumericFormatOptions,
+} from '../../navigation-instruments/readout/readout-formatters.js';
+import {
+  type AlertFrameConfig,
+  wrapWithAlertFrame,
+} from '../../components/alert-frame/alert-frame.js';
+
+// Re-exported so consumers can configure typography without a second import path.
+export {
+  ObcTextboxSize,
+  ObcTextboxFontWeight,
+  ObcTextboxAlignment,
+} from '../../components/textbox/textbox.js';
+
+/**
+ * Semantic variant of the block. Drives the default marker icon and the
+ * colour token; the layout is identical across variants.
+ * - `value`: the primary reading (no default marker icon).
+ * - `setpoint`: a setpoint reference (default `input-right` marker).
+ * - `advice`: an advisory reference (default `notification-advice` marker).
+ */
+export enum ReadoutBlockVariant {
+  value = 'value',
+  setpoint = 'setpoint',
+  advice = 'advice',
+}
+
+/**
+ * Density tier of the block — drives icon size, the icon↔number gap, and the
+ * degree-column width tier. The number typography size is controlled
+ * independently via {@link ObcReadoutBlock.valueSize} so a parent can de-emphasise
+ * one block relative to another within the same tier.
+ */
+export enum ReadoutBlockSize {
+  small = 'small',
+  medium = 'medium',
+  large = 'large',
+}
+
+/**
+ * Per-block measurement quality, rendered as a non-shifting outline chip.
+ * - `low-integrity`: the value is suspect.
+ * - `invalid`: the value is invalid.
+ */
+export enum ReadoutBlockDataQuality {
+  lowIntegrity = 'low-integrity',
+  invalid = 'invalid',
+}
+
+/**
+ * Pop-up fade phase for a setpoint block. Driven by the parent's setpoint
+ * interaction state machine; only meaningful for `role="setpoint"`.
+ */
+export enum ReadoutBlockHidePhase {
+  none = 'none',
+  hiding = 'hiding',
+  hidden = 'hidden',
+}
+
+/**
+ * `<obc-readout-block>` – the most atomic readout primitive: a single
+ * cap-height-aligned, width-reservable numeric segment (value / setpoint /
+ * advice).
+ *
+ * It renders one `obc-textbox` number with optional hinted leading zeros, a
+ * reservable width, an optional leading marker icon (via the `icon` slot or the
+ * role default), an optional trailing degree glyph, an `off`/unavailable text
+ * state, per-block data-quality and an optional per-block alert frame.
+ *
+ * This is a building block used inside `obc-readout-list-item` (and, in a future
+ * refactor, inside `obc-readout`); it is not normally used on its own. Colour is
+ * inherited from the host context (the parent sets the role colour), so the
+ * block stays neutral until placed.
+ *
+ * @experimental Pilot for the new primitives + per-block options Readout API; the
+ * API may change in a future release.
+ *
+ * @slot icon - Replaces the role's default marker icon.
+ *
+ * @csspart block - The block container (carries role / tone / data-quality).
+ * @csspart block-content - The number + degree group.
+ * @csspart block-text - The `obc-textbox` rendering the number.
+ * @csspart block-icon - The leading marker-icon container.
+ * @csspart degree - The trailing degree-glyph column.
+ */
+@customElement('obc-readout-block')
+export class ObcReadoutBlock extends LitElement {
+  /** Semantic variant (value / setpoint / advice). */
+  @property({type: String}) variant: ReadoutBlockVariant =
+    ReadoutBlockVariant.value;
+
+  /** The numeric value; `null`/`undefined` renders a dash. */
+  @property({type: Number}) value: number | null = null;
+
+  /** Density tier — icon size, gap, degree tier. */
+  @property({type: String}) size: ReadoutBlockSize = ReadoutBlockSize.small;
+
+  /**
+   * Resolved number-typography size. When unset it is derived from `size`
+   * (small→s, medium→m, large→l), so a parent that de-emphasises a block (e.g.
+   * a secondary setpoint) can pass a smaller size without changing the tier.
+   */
+  @property({type: String}) valueSize?: ObcTextboxSize;
+
+  /** Accent (in-command) colour tone. */
+  @property({type: Boolean}) enhanced = false;
+
+  /** Number font weight (regular / semibold / bold); colour is independent. */
+  @property({type: String}) weight: ObcTextboxFontWeight =
+    ObcTextboxFontWeight.regular;
+
+  /** Render the trailing cap-height degree glyph (`°`). */
+  @property({type: Boolean}) hasDegree = false;
+
+  /** Show the leading marker-icon container (always on for setpoint/advice). */
+  @property({type: Boolean}) hasIcon = false;
+
+  /** Number of fraction digits. */
+  @property({type: Number}) fractionDigits = 0;
+
+  /** Integer digits to reserve / hint (independent of `fractionDigits`). */
+  @property({type: Number}) maxDigits = 0;
+
+  /** Render muted leading zeros filling the integer part to `maxDigits`. */
+  @property({type: Boolean}) hintedZeros = false;
+
+  /** Explicit longest string to reserve width for (e.g. `"0000.0"`). */
+  @property({type: String}) spaceReserver?: string;
+
+  /** Render `offText` instead of a number (e.g. equipment powered down). */
+  @property({type: Boolean}) off = false;
+
+  /** Text shown when `off` is true. */
+  @property({type: String}) offText = 'OFF';
+
+  /** Text alignment of the number within its reserved width. */
+  @property({type: String}) alignment: ObcTextboxAlignment =
+    ObcTextboxAlignment.Right;
+
+  /** Per-block measurement quality (outline chip). */
+  @property({type: String}) dataQuality?: ReadoutBlockDataQuality;
+
+  // `boolean | …` (not `false | …`): the generated Angular wrapper widens a
+  // literal-`false` union to `boolean`. `wrapWithAlertFrame` treats any
+  // non-object as "no frame", so accepting `boolean` is harmless.
+  /** Per-block alert frame; nests inside any parent alert frame. */
+  @property({type: Object}) alert: boolean | AlertFrameConfig = false;
+
+  /** Setpoint focus (touch) state — only meaningful for `role="setpoint"`. */
+  @property({type: Boolean}) touching = false;
+
+  /** Setpoint pop-up fade phase — only meaningful for `role="setpoint"`. */
+  @property({type: String}) hidePhase: ReadoutBlockHidePhase =
+    ReadoutBlockHidePhase.none;
+
+  @state() private hasAssignedIcon = false;
+
+  private get resolvedValueSize(): ObcTextboxSize {
+    if (this.valueSize) {
+      return this.valueSize;
+    }
+    switch (this.size) {
+      case ReadoutBlockSize.large:
+        return ObcTextboxSize.l;
+      case ReadoutBlockSize.medium:
+        return ObcTextboxSize.m;
+      default:
+        return ObcTextboxSize.s;
+    }
+  }
+
+  private get numericFormatOptions(): ReadoutNumericFormatOptions {
+    return {
+      showZeroPadding: false,
+      minValueLength: this.maxDigits,
+      fractionDigits: this.fractionDigits,
+    };
+  }
+
+  /** Widest possible value string for width reservation (e.g. `"000.0"`). */
+  private get reserverText(): string {
+    const maxDigits = this.maxDigits;
+    if (maxDigits <= 0) {
+      return '';
+    }
+    const integer = '0'.repeat(Math.max(maxDigits, 1));
+    return this.fractionDigits > 0
+      ? `${integer}.${'0'.repeat(this.fractionDigits)}`
+      : integer;
+  }
+
+  /**
+   * Effective width reserver: the wider of the explicit `spaceReserver` and the
+   * `maxDigits`/`fractionDigits`-derived reserve, so an explicit reserver can
+   * never reserve *less* than the formatted value needs. Under tabular-nums the
+   * rendered width is proportional to character count, so "wider" compares length.
+   */
+  private widerReserver(explicit: string | undefined, derived: string): string {
+    if (!explicit) {
+      return derived;
+    }
+    if (!derived) {
+      return explicit;
+    }
+    return explicit.length >= derived.length ? explicit : derived;
+  }
+
+  private dataQualityClasses(): Record<string, boolean> {
+    return {
+      'data-low-integrity':
+        this.dataQuality === ReadoutBlockDataQuality.lowIntegrity,
+      'data-invalid': this.dataQuality === ReadoutBlockDataQuality.invalid,
+    };
+  }
+
+  private onIconSlotChange = (event: Event): void => {
+    // `slotchange` fires after the first render once content is (re)assigned,
+    // so it covers the initial state without a firstUpdated re-render.
+    this.hasAssignedIcon =
+      (event.target as HTMLSlotElement).assignedElements({flatten: true})
+        .length > 0;
+  };
+
+  private renderIcon(): TemplateResult | typeof nothing {
+    // Value blocks only show an icon when asked; setpoint/advice always reserve
+    // their marker. The role default is rendered as a direct child (so it sizes
+    // via `.block-icon obi-*`) and hidden once an icon is assigned to the slot —
+    // `{flatten: true}` sees through a forwarded-but-empty parent slot, so the
+    // default still shows when the consumer overrides nothing.
+    const showIcon = this.variant !== ReadoutBlockVariant.value || this.hasIcon;
+    if (!showIcon) {
+      return nothing;
+    }
+    let fallback: TemplateResult | typeof nothing = nothing;
+    if (this.variant === ReadoutBlockVariant.setpoint) {
+      fallback = html`<obi-input-right></obi-input-right>`;
+    } else if (this.variant === ReadoutBlockVariant.advice) {
+      fallback = html`<obi-notification-advice></obi-notification-advice>`;
+    }
+    return html`<span class="block-icon" part="block-icon" aria-hidden="true">
+      <slot name="icon" @slotchange=${this.onIconSlotChange}></slot>
+      ${this.hasAssignedIcon ? nothing : fallback}
+    </span>`;
+  }
+
+  /**
+   * A cap-height `°` column whose width scales with the number size. Inherits the
+   * block's colour.
+   */
+  private renderDegreeGlyph(size: ObcTextboxSize): TemplateResult {
+    return html`
+      <span
+        class=${classMap({
+          'degree-column': true,
+          [`degree-${size}`]: true,
+          'degree-inherit': true,
+        })}
+        part="degree"
+      >
+        <obc-textbox class="degree-glyph" .size=${size} alignment="center"
+          >°</obc-textbox
+        >
+      </span>
+    `;
+  }
+
+  override render() {
+    const valueSize = this.resolvedValueSize;
+    const formatOptions = this.numericFormatOptions;
+    const valueForFormat = this.value ?? undefined;
+    const text = this.off
+      ? this.offText
+      : formatNumericValue(valueForFormat, formatOptions);
+    // Hinted zeros pad the INTEGER part up to `maxDigits`, independent of
+    // `fractionDigits` (the decimal point and fraction digits never count toward
+    // `maxDigits`). Negative / dashed values are not padded. Example: value 1.2,
+    // maxDigits 3, fractionDigits 1 → "001.2".
+    const hintCount =
+      this.off ||
+      !this.hintedZeros ||
+      valueForFormat === undefined ||
+      valueForFormat < 0
+        ? 0
+        : Math.max(this.maxDigits - readoutFormattedInteger(text), 0);
+    const hinted = hintCount > 0 ? '0'.repeat(hintCount) : '';
+    // Hinted zeros own the width — they already fill to `maxDigits` — so when
+    // `hintedZeros` is enabled an explicit `spaceReserver` is ignored (it has
+    // higher priority). Otherwise the wider of the explicit reserver and the
+    // `maxDigits`-derived reserve wins.
+    const reserver = this.hintedZeros
+      ? this.reserverText
+      : this.widerReserver(this.spaceReserver, this.reserverText);
+
+    const block = html`
+      <div
+        class=${classMap({
+          block: true,
+          [`block-${this.variant}`]: true,
+          [`size-${this.size}`]: true,
+          'tone-enhanced': this.enhanced,
+          touching: this.touching,
+          'is-hiding': this.hidePhase === ReadoutBlockHidePhase.hiding,
+          'is-hidden': this.hidePhase === ReadoutBlockHidePhase.hidden,
+          ...this.dataQualityClasses(),
+        })}
+        part="block block-${this.variant}"
+      >
+        ${this.renderIcon()}
+        <span class="block-content" part="block-content">
+          <obc-textbox
+            class="block-text"
+            part="block-text"
+            .size=${valueSize}
+            .fontWeight=${this.weight}
+            .alignment=${this.alignment}
+            .tabularNums=${true}
+          >
+            ${hinted
+              ? html`<span class="hinted-zero" aria-hidden="true"
+                  >${hinted}</span
+                >`
+              : nothing}${text}
+            ${reserver ? html`<span slot="length">${reserver}</span>` : nothing}
+          </obc-textbox>
+          ${this.hasDegree ? this.renderDegreeGlyph(valueSize) : nothing}
+        </span>
+      </div>
+    `;
+    return wrapWithAlertFrame(this.alert ?? false, block);
+  }
+
+  static override styles = unsafeCSS(componentStyle);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-readout-block': ObcReadoutBlock;
+  }
+}