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

package/dist/automation/transmitter/transmitter.js

@@ -3,7 +3,7 @@ import { property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import componentStyle from "./transmitter.css.js";
 import { customElement } from "../../decorator.js";
-import { lineWidth } from "../index.js";
+import { TransmitterOrientation, transmitterLeaderOffset } from "./transmitter-shared.js";
 import { TransmitterButtonSize, TransmitterButtonVariant } from "../transmitter-button/transmitter-button.js";
 import { ObcIndicatorGraphSize } from "../../navigation-instruments/indicator-graph/indicator-graph.js";
 import { ObcAlertFrameType } from "../../components/alert-frame/alert-frame.js";
@@ -17,13 +17,6 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-var TransmitterOrientation = /* @__PURE__ */ ((TransmitterOrientation2) => {
-  TransmitterOrientation2["top"] = "top";
-  TransmitterOrientation2["right"] = "right";
-  TransmitterOrientation2["bottom"] = "bottom";
-  TransmitterOrientation2["left"] = "left";
-  return TransmitterOrientation2;
-})(TransmitterOrientation || {});
 var TransmitterType = /* @__PURE__ */ ((TransmitterType2) => {
   TransmitterType2["indicator"] = "indicator";
   TransmitterType2["value"] = "value";
@@ -34,7 +27,7 @@ var TransmitterType = /* @__PURE__ */ ((TransmitterType2) => {
 let ObcTransmitter = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.orientation = "bottom";
+    this.orientation = TransmitterOrientation.bottom;
     this.type = "value";
     this.lineType = void 0;
     this.unit = "";
@@ -42,6 +35,7 @@ let ObcTransmitter = class extends LitElement {
     this.maxDigits = 0;
     this.hintedZeros = false;
     this.hasSignSpacer = false;
+    this.hasDegree = false;
     this.size = TransmitterButtonSize.regular;
     this.hasIcon = false;
     this.hasAdvice = false;
@@ -54,9 +48,6 @@ let ObcTransmitter = class extends LitElement {
   get hasGraph() {
     return this.type === "horizontal-graph" || this.type === "vertical-graph";
   }
-  get lineOffset() {
-    return this.lineType === void 0 ? 0 : lineWidth(this.lineType) / 2;
-  }
   renderButton() {
     const isIndicator = this.type === "indicator";
     return html`
@@ -70,12 +61,14 @@ let ObcTransmitter = class extends LitElement {
         .maxDigits=${this.maxDigits}
         .hintedZeros=${this.hintedZeros}
         .hasSignSpacer=${this.hasSignSpacer}
+        .hasDegree=${this.hasDegree}
         .hasIcon=${this.hasIcon}
         .hasAdvice=${this.hasAdvice}
         .adviceValue=${this.adviceValue}
         .hasSetPoint=${this.hasSetPoint}
         .setpointValue=${this.setpointValue}
         .label=${this.tag}
+        .idTag=${this.idTag}
       >
         <slot name="icon" slot="icon"></slot>
       </obc-transmitter-button>
@@ -100,7 +93,7 @@ let ObcTransmitter = class extends LitElement {
     if (!this.idTag) {
       return nothing;
     }
-    return html`<div class="id-tag">${this.idTag}</div>`;
+    return html`<div class="id-tag" aria-hidden="true">${this.idTag}</div>`;
   }
   renderContent() {
     return html`
@@ -128,7 +121,7 @@ let ObcTransmitter = class extends LitElement {
       [`orientation-${this.orientation}`]: true,
       [`type-${this.type}`]: true
     })}
-        style="--offset: ${this.lineOffset}px;"
+        style="--offset: ${transmitterLeaderOffset(this.lineType)}px;"
       >
         ${content}
       </div>
@@ -163,6 +156,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], ObcTransmitter.prototype, "hasSignSpacer", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcTransmitter.prototype, "hasDegree", 2);
 __decorateClass([
   property({ type: String })
 ], ObcTransmitter.prototype, "size", 2);
@@ -199,6 +195,7 @@ ObcTransmitter = __decorateClass([
 export {
   ObcTransmitter,
   TransmitterOrientation,
-  TransmitterType
+  TransmitterType,
+  transmitterLeaderOffset
 };
 //# sourceMappingURL=transmitter.js.map

package/dist/automation/transmitter/transmitter.js.map

@@ -1 +1 @@
-{"version":3,"file":"transmitter.js","sources":["../../../src/automation/transmitter/transmitter.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport componentStyle from './transmitter.css?inline';\nimport {customElement} from '../../decorator.js';\nimport {LineType, lineWidth} from '../index.js';\nimport {\n  TransmitterButtonSize,\n  TransmitterButtonVariant,\n} from '../transmitter-button/transmitter-button.js';\nimport '../transmitter-button/transmitter-button.js';\nimport {\n  ObcIndicatorGraphSize,\n  type ObcIndicatorGraphLayout,\n} from '../../navigation-instruments/indicator-graph/indicator-graph.js';\nimport '../../navigation-instruments/indicator-graph/indicator-graph.js';\nimport {ObcAlertFrameType} from '../../components/alert-frame/alert-frame.js';\nimport '../../components/alert-frame/alert-frame.js';\n\nexport enum TransmitterOrientation {\n  top = 'top',\n  right = 'right',\n  bottom = 'bottom',\n  left = 'left',\n}\n\nexport enum TransmitterType {\n  indicator = 'indicator',\n  value = 'value',\n  horizontalGraph = 'horizontal-graph',\n  verticalGraph = 'vertical-graph',\n}\n\n/**\n * `<obc-transmitter>` – A readout label that attaches to a line on a process\n * diagram via a leader line, showing a measured value, a tag identifier, or a\n * value paired with a trend graph.\n *\n * Positioning (orientation + leader line) follows `<obc-automation-readout>`.\n * The value chip is an `<obc-transmitter-button>` and the trend is an\n * `<obc-indicator-graph>` with its area fill enabled.\n *\n * ### Features / Variants\n * - **`type`** – `indicator` (tag pill), `value` (icon/value/unit), or value\n *   paired with a `horizontal-graph` (beside) or `vertical-graph` (below).\n * - **`orientation`** – `top`, `right`, `bottom`, `left`; controls which edge\n *   the leader line attaches to.\n * - **Segments** – opt into a leading advice segment with `hasAdvice`/\n *   `adviceValue` and a setpoint segment with `hasSetPoint`/`setpointValue`;\n *   both are read-only and shown in the value chip for non-`indicator` types.\n * - **`hasAlert`** – wraps the whole transmitter in an alarm `<obc-alert-frame>`.\n * - **Formatting** – `fractionDigits`, `maxDigits`, `hintedZeros` and\n *   `hasSignSpacer` are forwarded to the value chip to control decimal\n *   precision, muted leading-zero padding (e.g. `0012.3`) and the sign\n *   column. The advice and setpoint segments reuse the same formatting.\n *   `value`, `adviceValue` and `setpointValue` render dashes when they are\n *   `NaN`, `null` or `undefined`.\n *\n * ### Slots\n * | Slot Name | Conditions              | Purpose                         |\n * |-----------|-------------------------|---------------------------------|\n * | icon      | value/graph + `hasIcon` | Leading icon in the value chip. |\n *\n * @property maxDigits - Integer digits to reserve / hint (independent of `fractionDigits`).\n * @property hasSignSpacer - Reserve a minus-sign column on every segment, filled by the real sign\n *   only while a value is negative, so the chip's width does not change\n *   across zero.\n * @property hasAlert - Wrap the transmitter in an `<obc-alert-frame>` (alarm) when true.\n * @property adviceValue - Advisory value shown in the leading advice segment when `hasAdvice`.\n * @property setpointValue - Target value shown in the setpoint segment when `hasSetPoint`.\n * @property tag - Tag identifier shown when `type` is `indicator` (e.g. `TT`).\n * @property idTag - Optional identifier shown below the chip (e.g. `#0000`).\n * @property data - Trend data for the graph types: `[xValues, yValues]`.\n * @slot icon - Leading icon in the value chip.\n *\n * @experimental\n */\n@customElement('obc-transmitter')\nexport class ObcTransmitter extends LitElement {\n  @property({type: String}) orientation: TransmitterOrientation =\n    TransmitterOrientation.bottom;\n  @property({type: String}) type: TransmitterType = TransmitterType.value;\n  @property({type: String}) lineType: LineType | undefined = undefined;\n\n  @property({type: Number}) value?: number | null;\n  @property({type: String}) unit = '';\n  @property({type: Number}) fractionDigits = 1;\n\n  @property({type: Number}) maxDigits = 0;\n\n  @property({type: Boolean}) hintedZeros = false;\n  @property({type: Boolean}) hasSignSpacer = false;\n  @property({type: String}) size: TransmitterButtonSize =\n    TransmitterButtonSize.regular;\n  @property({type: Boolean}) hasIcon = false;\n  @property({type: Boolean}) hasAdvice = false;\n\n  @property({type: Boolean}) hasAlert = false;\n\n  @property({type: Number}) adviceValue?: number | null;\n\n  @property({type: Boolean}) hasSetPoint = false;\n\n  @property({type: Number}) setpointValue?: number | null;\n\n  @property({type: String}) tag = '';\n\n  @property({type: String}) idTag = '';\n\n  @property({type: Array}) data: [number[], number[]] = [[], []];\n\n  private get hasGraph() {\n    return (\n      this.type === TransmitterType.horizontalGraph ||\n      this.type === TransmitterType.verticalGraph\n    );\n  }\n\n  private get lineOffset() {\n    return this.lineType === undefined ? 0 : lineWidth(this.lineType) / 2;\n  }\n\n  private renderButton() {\n    const isIndicator = this.type === TransmitterType.indicator;\n    return html`\n      <obc-transmitter-button\n        class=\"chip\"\n        .variant=${isIndicator\n          ? TransmitterButtonVariant.tag\n          : TransmitterButtonVariant.value}\n        .size=${this.size}\n        .value=${this.value}\n        .unit=${this.unit}\n        .fractionDigits=${this.fractionDigits}\n        .maxDigits=${this.maxDigits}\n        .hintedZeros=${this.hintedZeros}\n        .hasSignSpacer=${this.hasSignSpacer}\n        .hasIcon=${this.hasIcon}\n        .hasAdvice=${this.hasAdvice}\n        .adviceValue=${this.adviceValue}\n        .hasSetPoint=${this.hasSetPoint}\n        .setpointValue=${this.setpointValue}\n        .label=${this.tag}\n      >\n        <slot name=\"icon\" slot=\"icon\"></slot>\n      </obc-transmitter-button>\n    `;\n  }\n\n  private renderGraph() {\n    if (!this.hasGraph) {\n      return nothing;\n    }\n    const layout: ObcIndicatorGraphLayout = {\n      size: ObcIndicatorGraphSize.small,\n      fill: true,\n    };\n    return html`\n      <div class=\"graph-box\">\n        <obc-indicator-graph .data=${this.data} .layout=${layout}>\n        </obc-indicator-graph>\n      </div>\n    `;\n  }\n\n  private renderLabel() {\n    if (!this.idTag) {\n      return nothing;\n    }\n    return html`<div class=\"id-tag\">${this.idTag}</div>`;\n  }\n\n  private renderContent() {\n    return html`\n      <div class=\"content\">\n        <div class=\"body\">${this.renderButton()} ${this.renderGraph()}</div>\n        ${this.renderLabel()}\n      </div>\n    `;\n  }\n\n  override render() {\n    const content = this.hasAlert\n      ? html`\n          <obc-alert-frame\n            class=\"alert-frame\"\n            .type=${ObcAlertFrameType.Regular}\n            .wrapContent=${true}\n          >\n            ${this.renderContent()}\n          </obc-alert-frame>\n        `\n      : this.renderContent();\n\n    return html`\n      <div\n        class=${classMap({\n          transmitter: true,\n          'has-alert': this.hasAlert,\n          [`orientation-${this.orientation}`]: true,\n          [`type-${this.type}`]: true,\n        })}\n        style=\"--offset: ${this.lineOffset}px;\"\n      >\n        ${content}\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-transmitter': ObcTransmitter;\n  }\n}\n"],"names":["TransmitterOrientation","TransmitterType"],"mappings":"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"}
+{"version":3,"file":"transmitter.js","sources":["../../../src/automation/transmitter/transmitter.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport componentStyle from './transmitter.css?inline';\nimport {customElement} from '../../decorator.js';\nimport {LineType} from '../index.js';\nimport {\n  TransmitterOrientation,\n  transmitterLeaderOffset,\n} from './transmitter-shared.js';\nimport {\n  TransmitterButtonSize,\n  TransmitterButtonVariant,\n} from '../transmitter-button/transmitter-button.js';\nimport '../transmitter-button/transmitter-button.js';\nimport {\n  ObcIndicatorGraphSize,\n  type ObcIndicatorGraphLayout,\n} from '../../navigation-instruments/indicator-graph/indicator-graph.js';\nimport '../../navigation-instruments/indicator-graph/indicator-graph.js';\nimport {ObcAlertFrameType} from '../../components/alert-frame/alert-frame.js';\nimport '../../components/alert-frame/alert-frame.js';\n\nexport {\n  TransmitterOrientation,\n  transmitterLeaderOffset,\n} from './transmitter-shared.js';\n\nexport enum TransmitterType {\n  indicator = 'indicator',\n  value = 'value',\n  horizontalGraph = 'horizontal-graph',\n  verticalGraph = 'vertical-graph',\n}\n\n/**\n * `<obc-transmitter>` – A readout label that attaches to a line via a leader\n * line, showing a measured value, a tag identifier, or a value paired with a\n * trend graph.\n *\n * Positioning (orientation + leader line) follows `<obc-automation-readout>`.\n * The value chip is an `<obc-transmitter-button>` and the trend is an\n * `<obc-indicator-graph>` with its area fill enabled.\n *\n * ### Features / Variants\n * - **`type`** – `indicator` (tag pill), `value` (icon/value/unit), or value\n *   paired with a `horizontal-graph` (beside) or `vertical-graph` (below).\n * - **`orientation`** – `top`, `right`, `bottom`, `left`; controls which edge\n *   the leader line attaches to.\n * - **Segments** – opt into a leading advice segment with `hasAdvice`/\n *   `adviceValue` and a setpoint segment with `hasSetPoint`/`setpointValue`;\n *   both are read-only and shown in the value chip for non-`indicator` types.\n * - **`hasAlert`** – wraps the whole transmitter in an alarm `<obc-alert-frame>`.\n * - **Formatting** – `fractionDigits`, `maxDigits`, `hintedZeros` and\n *   `hasSignSpacer` are forwarded to the value chip to control decimal\n *   precision, muted leading-zero padding (e.g. `0012.3`) and the sign\n *   column. The advice and setpoint segments reuse the same formatting.\n *   `hasDegree` adds a degree column between the value and the unit.\n *   `value`, `adviceValue` and `setpointValue` render dashes when they are\n *   `NaN`, `null` or `undefined`.\n *\n * ### Slots\n * | Slot Name | Conditions              | Purpose                         |\n * |-----------|-------------------------|---------------------------------|\n * | icon      | value/graph + `hasIcon` | Leading icon in the value chip. |\n *\n * @property maxDigits - Integer digits to reserve / hint (independent of `fractionDigits`).\n * @property hasSignSpacer - Reserve a minus-sign column on every segment, filled by the real sign\n *   only while a value is negative, so the chip's width does not change\n *   across zero.\n * @property hasDegree - Show a degree column between the value and the unit (e.g. `12.3°` then `C`).\n * @property hasAlert - Wrap the transmitter in an `<obc-alert-frame>` (alarm) when true.\n * @property adviceValue - Advisory value shown in the leading advice segment when `hasAdvice`.\n * @property setpointValue - Target value shown in the setpoint segment when `hasSetPoint`.\n * @property tag - Tag identifier shown when `type` is `indicator` (e.g. `TT`).\n * @property idTag - Optional identifier shown below the chip (e.g. `#0000`).\n * @property data - Trend data for the graph types: `[xValues, yValues]`.\n * @slot icon - Leading icon in the value chip.\n *\n * @experimental\n */\n@customElement('obc-transmitter')\nexport class ObcTransmitter extends LitElement {\n  @property({type: String}) orientation: TransmitterOrientation =\n    TransmitterOrientation.bottom;\n  @property({type: String}) type: TransmitterType = TransmitterType.value;\n  @property({type: String}) lineType: LineType | undefined = undefined;\n\n  @property({type: Number}) value?: number | null;\n  @property({type: String}) unit = '';\n  @property({type: Number}) fractionDigits = 1;\n\n  @property({type: Number}) maxDigits = 0;\n\n  @property({type: Boolean}) hintedZeros = false;\n  @property({type: Boolean}) hasSignSpacer = false;\n  @property({type: Boolean}) hasDegree = false;\n  @property({type: String}) size: TransmitterButtonSize =\n    TransmitterButtonSize.regular;\n  @property({type: Boolean}) hasIcon = false;\n  @property({type: Boolean}) hasAdvice = false;\n\n  @property({type: Boolean}) hasAlert = false;\n\n  @property({type: Number}) adviceValue?: number | null;\n\n  @property({type: Boolean}) hasSetPoint = false;\n\n  @property({type: Number}) setpointValue?: number | null;\n\n  @property({type: String}) tag = '';\n\n  @property({type: String}) idTag = '';\n\n  @property({type: Array}) data: [number[], number[]] = [[], []];\n\n  private get hasGraph() {\n    return (\n      this.type === TransmitterType.horizontalGraph ||\n      this.type === TransmitterType.verticalGraph\n    );\n  }\n\n  private renderButton() {\n    const isIndicator = this.type === TransmitterType.indicator;\n    return html`\n      <obc-transmitter-button\n        class=\"chip\"\n        .variant=${isIndicator\n          ? TransmitterButtonVariant.tag\n          : TransmitterButtonVariant.value}\n        .size=${this.size}\n        .value=${this.value}\n        .unit=${this.unit}\n        .fractionDigits=${this.fractionDigits}\n        .maxDigits=${this.maxDigits}\n        .hintedZeros=${this.hintedZeros}\n        .hasSignSpacer=${this.hasSignSpacer}\n        .hasDegree=${this.hasDegree}\n        .hasIcon=${this.hasIcon}\n        .hasAdvice=${this.hasAdvice}\n        .adviceValue=${this.adviceValue}\n        .hasSetPoint=${this.hasSetPoint}\n        .setpointValue=${this.setpointValue}\n        .label=${this.tag}\n        .idTag=${this.idTag}\n      >\n        <slot name=\"icon\" slot=\"icon\"></slot>\n      </obc-transmitter-button>\n    `;\n  }\n\n  private renderGraph() {\n    if (!this.hasGraph) {\n      return nothing;\n    }\n    const layout: ObcIndicatorGraphLayout = {\n      size: ObcIndicatorGraphSize.small,\n      fill: true,\n    };\n    return html`\n      <div class=\"graph-box\">\n        <obc-indicator-graph .data=${this.data} .layout=${layout}>\n        </obc-indicator-graph>\n      </div>\n    `;\n  }\n\n  private renderLabel() {\n    if (!this.idTag) {\n      return nothing;\n    }\n    return html`<div class=\"id-tag\" aria-hidden=\"true\">${this.idTag}</div>`;\n  }\n\n  private renderContent() {\n    return html`\n      <div class=\"content\">\n        <div class=\"body\">${this.renderButton()} ${this.renderGraph()}</div>\n        ${this.renderLabel()}\n      </div>\n    `;\n  }\n\n  override render() {\n    const content = this.hasAlert\n      ? html`\n          <obc-alert-frame\n            class=\"alert-frame\"\n            .type=${ObcAlertFrameType.Regular}\n            .wrapContent=${true}\n          >\n            ${this.renderContent()}\n          </obc-alert-frame>\n        `\n      : this.renderContent();\n\n    return html`\n      <div\n        class=${classMap({\n          transmitter: true,\n          'has-alert': this.hasAlert,\n          [`orientation-${this.orientation}`]: true,\n          [`type-${this.type}`]: true,\n        })}\n        style=\"--offset: ${transmitterLeaderOffset(this.lineType)}px;\"\n      >\n        ${content}\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-transmitter': ObcTransmitter;\n  }\n}\n"],"names":["TransmitterType"],"mappings":"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"}

package/dist/automation/transmitter-button/transmitter-button.css.js

@@ -16,7 +16,7 @@ const componentStyle = css`* {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: fit-content;
+  width: 100%; /* follows the host: hugs by default, fills a stretched grid cell */
   padding: 0;
   appearance: none;
   background: none;
@@ -92,58 +92,24 @@ const componentStyle = css`* {
   cursor: not-allowed;
 }
 
+/* Figma draws the 1 px stroke inside its 4 / 2 px padding, so the padding
+   gives the border back and the chip stays 24 px high. */
+
 .visible-wrapper {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
-  padding: 2px 4px;
+  padding: 1px 3px;
   border: 1px solid var(--normal-enabled-border-color);
   border-radius: 4px;
 }
 
-.value-container {
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-  padding: 0 2px;
-}
-
-.icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.unit {
-  font-family: var(--global-typography-font-family);
-  font-size: var(--global-typography-instrument-unit-font-size);
-  line-height: var(--global-typography-instrument-unit-line-height);
-  font-feature-settings:
-    "liga" off,
-    "clig" off,
-    "ss04" on;
-  align-self: flex-end;
-  color: var(--element-neutral-color);
-}
-
-.size-regular .icon ::slotted(*) {
-  width: 16px;
-  height: 16px;
-}
-
-.size-medium .icon ::slotted(*) {
-  width: 20px;
-  height: 20px;
-}
-
-.size-large .icon ::slotted(*) {
-  width: 24px;
-  height: 24px;
+obc-readout-list-item {
+  width: auto; /* the list item fills a row by default; hugging lets a stretched chip centre the reading */
 }
 
 .size-medium .visible-wrapper:not(.tag),
 .size-large .visible-wrapper:not(.tag) {
-  padding: 4px 8px;
+  padding: 3px 7px;
   border-radius: 6px;
 }
 
@@ -164,6 +130,16 @@ const componentStyle = css`* {
     "ss04" on;
   color: var(--element-neutral-color);
 }
+
+.visually-hidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
 `;
 export {
   componentStyle as default

package/dist/automation/transmitter-button/transmitter-button.css.js.map

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

package/dist/automation/transmitter-button/transmitter-button.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import '../../building-blocks/readout-block/readout-block.js';
+import '../../navigation-instruments/readout-list-item/readout-list-item.js';
 export declare enum TransmitterButtonVariant {
     value = "value",
     tag = "tag"
@@ -10,24 +10,24 @@ export declare enum TransmitterButtonSize {
     large = "large"
 }
 /**
- * `<obc-transmitter-button>` – The pressable readout chip used as the core of a
- * transmitter on a process diagram.
+ * `<obc-transmitter-button>` – The pressable readout chip at the core of a
+ * transmitter: a bordered button around one reading.
  *
- * The value content (leading icon, optional advice and setpoint segments,
- * value, unit) is laid out inline. The value, advice and setpoint segments all
- * share one numeric format, so they support fixed-width values and muted
- * leading zeros identically. The leading icon is slotted so the consumer
- * provides the type-specific content.
+ * The reading is a label-less `<obc-readout-list-item>` (the Figma "automation
+ * value"): leading icon, optional advice and setpoint, value, optional degree
+ * and unit, all rendered by the readout family. The leading icon is slotted so
+ * the consumer provides the type-specific content.
  *
  * ### Features / Variants
- * - **`value`** – white, bordered box showing an icon, value and unit. Opt into a
- *   leading advice segment with `hasAdvice`/`adviceValue` and a setpoint segment
- *   with `hasSetPoint`/`setpointValue`.
+ * - **`value`** – bordered chip showing an icon, value and unit. Opt into a
+ *   leading advice segment with `hasAdvice`/`adviceValue`, a setpoint segment
+ *   with `hasSetPoint`/`setpointValue`, and a degree column before the unit
+ *   with `hasDegree`.
  * - **`tag`** – a static rounded pill showing a short identifier (e.g. `TT`)
  *   from the `label` property, with no live value.
- * - **`size`** – `regular`, `medium` or `large`, scaling the value text, the icon
- *   glyph and the advice/setpoint segments. The unit stays at a fixed size across
- *   all sizes.
+ * - **`size`** – `regular`, `medium` or `large`, the list item's `small`,
+ *   `medium` and `large` tiers: the value text, the icon and the advice/setpoint
+ *   segments scale, the unit stays extra small.
  * - **Formatting** – `fractionDigits` sets the decimal precision, `maxDigits`
  *   reserves a number of integer digits, and `hintedZeros` renders the reserved
  *   leading positions as muted zeros (e.g. `0012.3`). The sign never consumes
@@ -40,9 +40,15 @@ export declare enum TransmitterButtonSize {
  *   dashes fill the whole reserved width (e.g. `---.-`).
  *
  * ### Usage Guidelines
- * Use as a building block for `<obc-transmitter>`; it is the part that carries
- * the measured value or the tag identifier. Slot in the type-specific icon; the
- * advice and setpoint segments are value-driven and read-only.
+ * Use as a building block for `<obc-transmitter>` and `<obc-transmitter-stack>`;
+ * it is the part that carries the measured value or the tag identifier. Slot in
+ * the type-specific icon; the advice and setpoint segments are value-driven and
+ * read-only.
+ *
+ * **TODO(designer):** the hit area is the visible chip, 24 px high at `regular`:
+ * at the WCAG 2.5.8 floor of 24 px, below the 48 px touch-target token. A
+ * 48 px target would overlap the id tag, the leader line and neighbouring
+ * `<obc-transmitter-stack>` segments, so the size needs a design decision.
  *
  * ### Slots
  * | Slot Name | Conditions                    | Purpose                        |
@@ -52,9 +58,12 @@ export declare enum TransmitterButtonSize {
  * @property maxDigits - Integer digits to reserve / hint (independent of `fractionDigits`).
  * @property hasSignSpacer - Reserve a minus-sign column on every segment, filled by the real sign
  *   only while a value is negative, so the width does not change across zero.
+ * @property hasDegree - Show a degree column between the value and the unit (e.g. `12.3°` then `C`).
  * @property adviceValue - Advisory value shown in the leading advice segment when `hasAdvice`.
  * @property setpointValue - Target value shown in the setpoint segment when `hasSetPoint`.
  * @property label - Short tag identifier shown in the `tag` variant (e.g. `TT`).
+ * @property idTag - Identifier appended to the button's accessible name only (e.g. `#0001`); the
+ *   parent transmitter draws the visible tag outside the button, where it cannot join the name.
  * @slot icon - Leading icon beside the value.
  *
  * @experimental
@@ -70,6 +79,8 @@ export declare class ObcTransmitterButton extends LitElement {
     hintedZeros: boolean;
     /** Reserve a minus-sign column on every segment, filled by the real sign only while a value is negative, so the width does not change across zero. */
     hasSignSpacer: boolean;
+    /** Show a degree column between the value and the unit (e.g. `12.3°` then `C`). */
+    hasDegree: boolean;
     hasIcon: boolean;
     hasAdvice: boolean;
     /** Advisory value shown in the leading advice segment when `hasAdvice`. */
@@ -79,11 +90,10 @@ export declare class ObcTransmitterButton extends LitElement {
     setpointValue?: number | null;
     /** Short tag identifier shown in the `tag` variant (e.g. `TT`). */
     label: string;
+    /** Identifier appended to the button's accessible name only (e.g. `#0001`); the parent transmitter draws the visible tag outside the button, where it cannot join the name. */
+    idTag: string;
     private get isTag();
-    private renderBlock;
-    private renderAdvice;
-    private renderSetpoint;
-    private renderContent;
+    private renderReading;
     render(): import('lit-html').TemplateResult<1>;
     static styles: import('lit').CSSResult;
 }

package/dist/automation/transmitter-button/transmitter-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"transmitter-button.d.ts","sourceRoot":"","sources":["../../../src/automation/transmitter-button/transmitter-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAKzD,OAAO,sDAAsD,CAAC;AAM9D,oBAAY,wBAAwB;IAClC,KAAK,UAAU;IACf,GAAG,QAAQ;CACZ;AAED,oBAAY,qBAAqB;IAC/B,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,qBACa,oBAAqB,SAAQ,UAAU;IACxB,OAAO,EAAE,wBAAwB,CAC1B;IACP,IAAI,EAAE,qBAAqB,CACrB;IACN,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,SAAM;IACV,cAAc,SAAK;IAEnB,SAAS,SAAK;IAEb,WAAW,UAAS;IACpB,aAAa,UAAS;IACtB,OAAO,UAAS;IAChB,SAAS,UAAS;IAEnB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE3B,WAAW,UAAS;IAErB,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE9B,KAAK,SAAM;IAErC,OAAO,KAAK,KAAK,GAEhB;IAED,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,aAAa;IAiBZ,MAAM;IAgBf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,oBAAoB,CAAC;KAChD;CACF"}
+{"version":3,"file":"transmitter-button.d.ts","sourceRoot":"","sources":["../../../src/automation/transmitter-button/transmitter-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAKzD,OAAO,qEAAqE,CAAC;AAG7E,oBAAY,wBAAwB;IAClC,KAAK,UAAU;IACf,GAAG,QAAQ;CACZ;AAED,oBAAY,qBAAqB;IAC/B,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AACH,qBACa,oBAAqB,SAAQ,UAAU;IACxB,OAAO,EAAE,wBAAwB,CAC1B;IACP,IAAI,EAAE,qBAAqB,CACrB;IACN,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,SAAM;IACV,cAAc,SAAK;IAEnB,SAAS,SAAK;IAEb,WAAW,UAAS;IACpB,aAAa,UAAS;IACtB,SAAS,UAAS;IAClB,OAAO,UAAS;IAChB,SAAS,UAAS;IAEnB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE3B,WAAW,UAAS;IAErB,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE9B,KAAK,SAAM;IAEX,KAAK,SAAM;IAErC,OAAO,KAAK,KAAK,GAEhB;IAED,OAAO,CAAC,aAAa;IA4BZ,MAAM;IAqBf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,oBAAoB,CAAC;KAChD;CACF"}

package/dist/automation/transmitter-button/transmitter-button.js

@@ -1,9 +1,9 @@
-import { unsafeCSS, LitElement, html, nothing } from "lit";
+import { unsafeCSS, LitElement, nothing, html } from "lit";
 import { property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import componentStyle from "./transmitter-button.css.js";
 import { customElement } from "../../decorator.js";
-import { ReadoutBlockSize, ReadoutBlockVariant } from "../../building-blocks/readout-block/readout-block.js";
+import { ReadoutListItemSize } from "../../navigation-instruments/readout-list-item/readout-list-item.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -29,15 +29,15 @@ const readoutSizeBySize = {
   [
     "regular"
     /* regular */
-  ]: ReadoutBlockSize.small,
+  ]: ReadoutListItemSize.small,
   [
     "medium"
     /* medium */
-  ]: ReadoutBlockSize.medium,
+  ]: ReadoutListItemSize.medium,
   [
     "large"
     /* large */
-  ]: ReadoutBlockSize.large
+  ]: ReadoutListItemSize.large
 };
 let ObcTransmitterButton = class extends LitElement {
   constructor() {
@@ -49,48 +49,39 @@ let ObcTransmitterButton = class extends LitElement {
     this.maxDigits = 0;
     this.hintedZeros = false;
     this.hasSignSpacer = false;
+    this.hasDegree = false;
     this.hasIcon = false;
     this.hasAdvice = false;
     this.hasSetPoint = false;
     this.label = "";
+    this.idTag = "";
   }
   get isTag() {
     return this.variant === "tag";
   }
-  renderBlock(variant, value) {
-    return html`<obc-readout-block
-      .variant=${variant}
-      .value=${value ?? null}
-      .size=${readoutSizeBySize[this.size]}
-      .fractionDigits=${this.fractionDigits}
-      .maxDigits=${this.maxDigits}
-      .hintedZeros=${this.hintedZeros}
-      .hasSignSpacer=${this.hasSignSpacer}
-    ></obc-readout-block>`;
-  }
-  renderAdvice() {
-    if (!this.hasAdvice) {
-      return nothing;
-    }
-    return this.renderBlock(ReadoutBlockVariant.advice, this.adviceValue);
-  }
-  renderSetpoint() {
-    if (!this.hasSetPoint) {
-      return nothing;
-    }
-    return this.renderBlock(ReadoutBlockVariant.setpoint, this.setpointValue);
-  }
-  renderContent() {
-    if (this.isTag) {
-      return html`<span class="label">${this.label}</span>`;
-    }
+  renderReading() {
+    const format = {
+      hintedZeros: this.hintedZeros,
+      hasSignSpacer: this.hasSignSpacer
+    };
     return html`
-      ${this.renderAdvice()} ${this.renderSetpoint()}
-      <div class="value-container">
-        ${this.hasIcon ? html`<div class="icon"><slot name="icon"></slot></div>` : nothing}
-        ${this.renderBlock(ReadoutBlockVariant.value, this.value)}
-        ${this.unit ? html`<span class="unit">${this.unit}</span>` : nothing}
-      </div>
+      <obc-readout-list-item
+        .size=${readoutSizeBySize[this.size]}
+        .value=${this.value ?? null}
+        .unit=${this.unit}
+        .hasDegree=${this.hasDegree}
+        .fractionDigits=${this.fractionDigits}
+        .maxDigits=${this.maxDigits}
+        .valueOptions=${{ ...format, hasIcon: this.hasIcon }}
+        .hasSetpoint=${this.hasSetPoint}
+        .setpoint=${this.setpointValue ?? void 0}
+        .setpointOptions=${format}
+        .hasAdvice=${this.hasAdvice}
+        .advice=${this.adviceValue ?? void 0}
+        .adviceOptions=${format}
+      >
+        ${this.hasIcon ? html`<slot name="icon" slot="value-icon"></slot>` : nothing}
+      </obc-readout-list-item>
     `;
   }
   render() {
@@ -103,8 +94,9 @@ let ObcTransmitterButton = class extends LitElement {
       tag: this.isTag
     })}
         >
-          ${this.renderContent()}
+          ${this.isTag ? html`<span class="label">${this.label}</span>` : this.renderReading()}
         </div>
+        ${this.idTag ? html`<span class="visually-hidden">${this.idTag}</span>` : nothing}
       </button>
     `;
   }
@@ -134,6 +126,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], ObcTransmitterButton.prototype, "hasSignSpacer", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcTransmitterButton.prototype, "hasDegree", 2);
 __decorateClass([
   property({ type: Boolean })
 ], ObcTransmitterButton.prototype, "hasIcon", 2);
@@ -152,6 +147,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String })
 ], ObcTransmitterButton.prototype, "label", 2);
+__decorateClass([
+  property({ type: String })
+], ObcTransmitterButton.prototype, "idTag", 2);
 ObcTransmitterButton = __decorateClass([
   customElement("obc-transmitter-button")
 ], ObcTransmitterButton);

package/dist/automation/transmitter-button/transmitter-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"transmitter-button.js","sources":["../../../src/automation/transmitter-button/transmitter-button.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport componentStyle from './transmitter-button.css?inline';\nimport {customElement} from '../../decorator.js';\nimport '../../building-blocks/readout-block/readout-block.js';\nimport {\n  ReadoutBlockSize,\n  ReadoutBlockVariant,\n} from '../../building-blocks/readout-block/readout-block.js';\n\nexport enum TransmitterButtonVariant {\n  value = 'value',\n  tag = 'tag',\n}\n\nexport enum TransmitterButtonSize {\n  regular = 'regular',\n  medium = 'medium',\n  large = 'large',\n}\n\nconst readoutSizeBySize: Record<TransmitterButtonSize, ReadoutBlockSize> = {\n  [TransmitterButtonSize.regular]: ReadoutBlockSize.small,\n  [TransmitterButtonSize.medium]: ReadoutBlockSize.medium,\n  [TransmitterButtonSize.large]: ReadoutBlockSize.large,\n};\n\n/**\n * `<obc-transmitter-button>` – The pressable readout chip used as the core of a\n * transmitter on a process diagram.\n *\n * The value content (leading icon, optional advice and setpoint segments,\n * value, unit) is laid out inline. The value, advice and setpoint segments all\n * share one numeric format, so they support fixed-width values and muted\n * leading zeros identically. The leading icon is slotted so the consumer\n * provides the type-specific content.\n *\n * ### Features / Variants\n * - **`value`** – white, bordered box showing an icon, value and unit. Opt into a\n *   leading advice segment with `hasAdvice`/`adviceValue` and a setpoint segment\n *   with `hasSetPoint`/`setpointValue`.\n * - **`tag`** – a static rounded pill showing a short identifier (e.g. `TT`)\n *   from the `label` property, with no live value.\n * - **`size`** – `regular`, `medium` or `large`, scaling the value text, the icon\n *   glyph and the advice/setpoint segments. The unit stays at a fixed size across\n *   all sizes.\n * - **Formatting** – `fractionDigits` sets the decimal precision, `maxDigits`\n *   reserves a number of integer digits, and `hintedZeros` renders the reserved\n *   leading positions as muted zeros (e.g. `0012.3`). The sign never consumes\n *   a reserved position (`-0012.3`), so a negative value is one character\n *   wider than a positive one; `hasSignSpacer` reserves the sign column so\n *   the width does not change across zero. All three segments share this\n *   formatting — it is `obc-readout-block`'s.\n * - **Missing values** – `value`, `adviceValue` and `setpointValue` each render\n *   dashes when they are `NaN`, `null` or `undefined`; with `hintedZeros` the\n *   dashes fill the whole reserved width (e.g. `---.-`).\n *\n * ### Usage Guidelines\n * Use as a building block for `<obc-transmitter>`; it is the part that carries\n * the measured value or the tag identifier. Slot in the type-specific icon; the\n * advice and setpoint segments are value-driven and read-only.\n *\n * ### Slots\n * | Slot Name | Conditions                    | Purpose                        |\n * |-----------|-------------------------------|--------------------------------|\n * | icon      | `value` variant and `hasIcon` | Leading icon beside the value. |\n *\n * @property maxDigits - Integer digits to reserve / hint (independent of `fractionDigits`).\n * @property hasSignSpacer - Reserve a minus-sign column on every segment, filled by the real sign\n *   only while a value is negative, so the width does not change across zero.\n * @property adviceValue - Advisory value shown in the leading advice segment when `hasAdvice`.\n * @property setpointValue - Target value shown in the setpoint segment when `hasSetPoint`.\n * @property label - Short tag identifier shown in the `tag` variant (e.g. `TT`).\n * @slot icon - Leading icon beside the value.\n *\n * @experimental\n */\n@customElement('obc-transmitter-button')\nexport class ObcTransmitterButton extends LitElement {\n  @property({type: String}) variant: TransmitterButtonVariant =\n    TransmitterButtonVariant.value;\n  @property({type: String}) size: TransmitterButtonSize =\n    TransmitterButtonSize.regular;\n  @property({type: Number}) value?: number | null;\n  @property({type: String}) unit = '';\n  @property({type: Number}) fractionDigits = 1;\n\n  @property({type: Number}) maxDigits = 0;\n\n  @property({type: Boolean}) hintedZeros = false;\n  @property({type: Boolean}) hasSignSpacer = false;\n  @property({type: Boolean}) hasIcon = false;\n  @property({type: Boolean}) hasAdvice = false;\n\n  @property({type: Number}) adviceValue?: number | null;\n\n  @property({type: Boolean}) hasSetPoint = false;\n\n  @property({type: Number}) setpointValue?: number | null;\n\n  @property({type: String}) label = '';\n\n  private get isTag() {\n    return this.variant === TransmitterButtonVariant.tag;\n  }\n\n  private renderBlock(\n    variant: ReadoutBlockVariant,\n    value: number | null | undefined\n  ) {\n    return html`<obc-readout-block\n      .variant=${variant}\n      .value=${value ?? null}\n      .size=${readoutSizeBySize[this.size]}\n      .fractionDigits=${this.fractionDigits}\n      .maxDigits=${this.maxDigits}\n      .hintedZeros=${this.hintedZeros}\n      .hasSignSpacer=${this.hasSignSpacer}\n    ></obc-readout-block>`;\n  }\n\n  private renderAdvice() {\n    if (!this.hasAdvice) {\n      return nothing;\n    }\n    return this.renderBlock(ReadoutBlockVariant.advice, this.adviceValue);\n  }\n\n  private renderSetpoint() {\n    if (!this.hasSetPoint) {\n      return nothing;\n    }\n    return this.renderBlock(ReadoutBlockVariant.setpoint, this.setpointValue);\n  }\n\n  private renderContent() {\n    if (this.isTag) {\n      return html`<span class=\"label\">${this.label}</span>`;\n    }\n\n    return html`\n      ${this.renderAdvice()} ${this.renderSetpoint()}\n      <div class=\"value-container\">\n        ${this.hasIcon\n          ? html`<div class=\"icon\"><slot name=\"icon\"></slot></div>`\n          : nothing}\n        ${this.renderBlock(ReadoutBlockVariant.value, this.value)}\n        ${this.unit ? html`<span class=\"unit\">${this.unit}</span>` : nothing}\n      </div>\n    `;\n  }\n\n  override render() {\n    return html`\n      <button type=\"button\" class=\"button ${this.variant} size-${this.size}\">\n        <div\n          part=\"button\"\n          class=${classMap({\n            'visible-wrapper': true,\n            tag: this.isTag,\n          })}\n        >\n          ${this.renderContent()}\n        </div>\n      </button>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-transmitter-button': ObcTransmitterButton;\n  }\n}\n"],"names":["TransmitterButtonVariant","TransmitterButtonSize"],"mappings":"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"}
+{"version":3,"file":"transmitter-button.js","sources":["../../../src/automation/transmitter-button/transmitter-button.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport componentStyle from './transmitter-button.css?inline';\nimport {customElement} from '../../decorator.js';\nimport '../../navigation-instruments/readout-list-item/readout-list-item.js';\nimport {ReadoutListItemSize} from '../../navigation-instruments/readout-list-item/readout-list-item.js';\n\nexport enum TransmitterButtonVariant {\n  value = 'value',\n  tag = 'tag',\n}\n\nexport enum TransmitterButtonSize {\n  regular = 'regular',\n  medium = 'medium',\n  large = 'large',\n}\n\nconst readoutSizeBySize: Record<TransmitterButtonSize, ReadoutListItemSize> = {\n  [TransmitterButtonSize.regular]: ReadoutListItemSize.small,\n  [TransmitterButtonSize.medium]: ReadoutListItemSize.medium,\n  [TransmitterButtonSize.large]: ReadoutListItemSize.large,\n};\n\n/**\n * `<obc-transmitter-button>` – The pressable readout chip at the core of a\n * transmitter: a bordered button around one reading.\n *\n * The reading is a label-less `<obc-readout-list-item>` (the Figma \"automation\n * value\"): leading icon, optional advice and setpoint, value, optional degree\n * and unit, all rendered by the readout family. The leading icon is slotted so\n * the consumer provides the type-specific content.\n *\n * ### Features / Variants\n * - **`value`** – bordered chip showing an icon, value and unit. Opt into a\n *   leading advice segment with `hasAdvice`/`adviceValue`, a setpoint segment\n *   with `hasSetPoint`/`setpointValue`, and a degree column before the unit\n *   with `hasDegree`.\n * - **`tag`** – a static rounded pill showing a short identifier (e.g. `TT`)\n *   from the `label` property, with no live value.\n * - **`size`** – `regular`, `medium` or `large`, the list item's `small`,\n *   `medium` and `large` tiers: the value text, the icon and the advice/setpoint\n *   segments scale, the unit stays extra small.\n * - **Formatting** – `fractionDigits` sets the decimal precision, `maxDigits`\n *   reserves a number of integer digits, and `hintedZeros` renders the reserved\n *   leading positions as muted zeros (e.g. `0012.3`). The sign never consumes\n *   a reserved position (`-0012.3`), so a negative value is one character\n *   wider than a positive one; `hasSignSpacer` reserves the sign column so\n *   the width does not change across zero. All three segments share this\n *   formatting — it is `obc-readout-block`'s.\n * - **Missing values** – `value`, `adviceValue` and `setpointValue` each render\n *   dashes when they are `NaN`, `null` or `undefined`; with `hintedZeros` the\n *   dashes fill the whole reserved width (e.g. `---.-`).\n *\n * ### Usage Guidelines\n * Use as a building block for `<obc-transmitter>` and `<obc-transmitter-stack>`;\n * it is the part that carries the measured value or the tag identifier. Slot in\n * the type-specific icon; the advice and setpoint segments are value-driven and\n * read-only.\n *\n * **TODO(designer):** the hit area is the visible chip, 24 px high at `regular`:\n * at the WCAG 2.5.8 floor of 24 px, below the 48 px touch-target token. A\n * 48 px target would overlap the id tag, the leader line and neighbouring\n * `<obc-transmitter-stack>` segments, so the size needs a design decision.\n *\n * ### Slots\n * | Slot Name | Conditions                    | Purpose                        |\n * |-----------|-------------------------------|--------------------------------|\n * | icon      | `value` variant and `hasIcon` | Leading icon beside the value. |\n *\n * @property maxDigits - Integer digits to reserve / hint (independent of `fractionDigits`).\n * @property hasSignSpacer - Reserve a minus-sign column on every segment, filled by the real sign\n *   only while a value is negative, so the width does not change across zero.\n * @property hasDegree - Show a degree column between the value and the unit (e.g. `12.3°` then `C`).\n * @property adviceValue - Advisory value shown in the leading advice segment when `hasAdvice`.\n * @property setpointValue - Target value shown in the setpoint segment when `hasSetPoint`.\n * @property label - Short tag identifier shown in the `tag` variant (e.g. `TT`).\n * @property idTag - Identifier appended to the button's accessible name only (e.g. `#0001`); the\n *   parent transmitter draws the visible tag outside the button, where it cannot join the name.\n * @slot icon - Leading icon beside the value.\n *\n * @experimental\n */\n@customElement('obc-transmitter-button')\nexport class ObcTransmitterButton extends LitElement {\n  @property({type: String}) variant: TransmitterButtonVariant =\n    TransmitterButtonVariant.value;\n  @property({type: String}) size: TransmitterButtonSize =\n    TransmitterButtonSize.regular;\n  @property({type: Number}) value?: number | null;\n  @property({type: String}) unit = '';\n  @property({type: Number}) fractionDigits = 1;\n\n  @property({type: Number}) maxDigits = 0;\n\n  @property({type: Boolean}) hintedZeros = false;\n  @property({type: Boolean}) hasSignSpacer = false;\n  @property({type: Boolean}) hasDegree = false;\n  @property({type: Boolean}) hasIcon = false;\n  @property({type: Boolean}) hasAdvice = false;\n\n  @property({type: Number}) adviceValue?: number | null;\n\n  @property({type: Boolean}) hasSetPoint = false;\n\n  @property({type: Number}) setpointValue?: number | null;\n\n  @property({type: String}) label = '';\n\n  @property({type: String}) idTag = '';\n\n  private get isTag() {\n    return this.variant === TransmitterButtonVariant.tag;\n  }\n\n  private renderReading() {\n    const format = {\n      hintedZeros: this.hintedZeros,\n      hasSignSpacer: this.hasSignSpacer,\n    };\n    return html`\n      <obc-readout-list-item\n        .size=${readoutSizeBySize[this.size]}\n        .value=${this.value ?? null}\n        .unit=${this.unit}\n        .hasDegree=${this.hasDegree}\n        .fractionDigits=${this.fractionDigits}\n        .maxDigits=${this.maxDigits}\n        .valueOptions=${{...format, hasIcon: this.hasIcon}}\n        .hasSetpoint=${this.hasSetPoint}\n        .setpoint=${this.setpointValue ?? undefined}\n        .setpointOptions=${format}\n        .hasAdvice=${this.hasAdvice}\n        .advice=${this.adviceValue ?? undefined}\n        .adviceOptions=${format}\n      >\n        ${this.hasIcon\n          ? html`<slot name=\"icon\" slot=\"value-icon\"></slot>`\n          : nothing}\n      </obc-readout-list-item>\n    `;\n  }\n\n  override render() {\n    return html`\n      <button type=\"button\" class=\"button ${this.variant} size-${this.size}\">\n        <div\n          part=\"button\"\n          class=${classMap({\n            'visible-wrapper': true,\n            tag: this.isTag,\n          })}\n        >\n          ${this.isTag\n            ? html`<span class=\"label\">${this.label}</span>`\n            : this.renderReading()}\n        </div>\n        ${this.idTag\n          ? html`<span class=\"visually-hidden\">${this.idTag}</span>`\n          : nothing}\n      </button>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-transmitter-button': ObcTransmitterButton;\n  }\n}\n"],"names":["TransmitterButtonVariant","TransmitterButtonSize"],"mappings":"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"}