@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.143 → 2.0.0-next.144

package/bundle/openbridge-webcomponents.bundle.js

@@ -49894,6 +49894,31 @@ obc-readout-block {
   gap: var(--global-size-spacing-target-padding);
 }
 
+/* leading-src-inline: the source follows the label on one line, bottom-aligned
+   so the \`xs\` source and the label share a cap baseline. The label↔source gap
+   reuses the tier's content gap (8px, matching Figma 46596:102880). */
+
+.stacking-leading-src-inline .label-stack {
+  flex-direction: row;
+  align-items: flex-end;
+}
+
+.size-small.stacking-leading-src-inline .label-stack {
+  gap: var(
+    --instrument-components-readout-new-list-item-regular-content-container-gap
+  );
+}
+
+.size-medium.stacking-leading-src-inline .label-stack {
+  gap: var(
+    --instrument-components-readout-new-list-item-medium-content-container-gap
+  );
+}
+
+.size-large.stacking-leading-src-inline .label-stack {
+  gap: var(--instrument-components-readout-new-list-item-large-content-gap);
+}
+
 /* ---------- Data quality ----------
  * Orthogonal to the alert frame — both can apply at once. */
 
@@ -50102,9 +50127,21 @@ let ObcReadoutListItem = class extends i$4 {
   get resolvedStacking() {
     return this.stacking ?? "trailing-unit";
   }
+  /** Both leading-src stackings move the source into the label stack. */
+  get hasLeadingSrc() {
+    const stacking = this.resolvedStacking;
+    return stacking === "leading-src" || stacking === "leading-src-inline";
+  }
   get resolvedPriority() {
     return this.priority ?? "regular";
   }
+  /**
+   * Whether a unit box follows the value: a unit, or a reserver alone — the
+   * blank reserved column keeps a unit-less row aligned with its neighbours.
+   */
+  get hasTrailingUnitBox() {
+    return this.resolvedStacking !== "leading-unit" && (Boolean(this.unit) || Boolean(this.unitOptions?.spaceReserver));
+  }
   get resolvedFractionDigits() {
     return this.fractionDigits ?? 0;
   }
@@ -50333,13 +50370,12 @@ let ObcReadoutListItem = class extends i$4 {
     if (!this.hasValue) {
       return A;
     }
-    const hasTrailingUnit = Boolean(this.unit) && this.resolvedStacking !== "leading-unit";
     if ((this.hasDegree ?? false) && !this.off) {
       return this.renderDegreeGlyph(this.valueSize, {
         enhanced: this.rowEnhanced
       });
     }
-    if (hasTrailingUnit) {
+    if (this.hasTrailingUnitBox) {
       return b`<span class="value-unit-gap" aria-hidden="true"></span>`;
     }
     return A;
@@ -50509,7 +50545,7 @@ let ObcReadoutListItem = class extends i$4 {
   renderLabelContainer() {
     const stacking = this.resolvedStacking;
     const showLeadingUnit = stacking === "leading-unit" && Boolean(this.unit);
-    const showLeadingSrc = stacking === "leading-src" && Boolean(this.src);
+    const showLeadingSrc = this.hasLeadingSrc && Boolean(this.src);
     return b`
       <div class="label-container" part="label-container">
         ${this.hasLeadingIcon ? b`<span class="leading-icon" aria-hidden="true"
@@ -50532,12 +50568,12 @@ let ObcReadoutListItem = class extends i$4 {
     `;
   }
   renderTrailingUnit() {
-    if (this.resolvedStacking === "leading-unit" || !this.unit) {
+    if (!this.hasTrailingUnitBox) {
       return A;
     }
     return this.renderTextbox(
       "unit",
-      this.unit,
+      this.unit ?? "",
       this.unitOptions?.spaceReserver
     );
   }
@@ -50584,7 +50620,7 @@ let ObcReadoutListItem = class extends i$4 {
     `;
   }
   renderTrailingSource() {
-    if (this.resolvedStacking === "leading-src" || !this.src) {
+    if (this.hasLeadingSrc || !this.src) {
       return A;
     }
     return b`
@@ -55301,6 +55337,7 @@ let ObcReadout = class extends i$4 {
     this.showDebugOverlay = false;
     this.deferredSetpointHidePhase = ReadoutBlockHidePhase.none;
     this.hasCompletedFirstUpdate = false;
+    this.hasWarnedHorizontalSize = false;
     this.sourcePickerContentVisible = false;
     this.sourcePickerOptions = [];
     this.onWindowPointerDown = (event) => {
@@ -56050,6 +56087,23 @@ let ObcReadout = class extends i$4 {
     super.willUpdate(changed);
     assertReadoutValueType("obc-readout", this.value, this.valueType);
     assertReadoutFractionDigits("obc-readout", this.fractionDigits);
+    this.warnHorizontalSizeIgnored();
+  }
+  /**
+   * A horizontal readout discards any `size` but `large` (see `resolvedSize`).
+   * A silent discard is indistinguishable from a bug to a consumer, so each
+   * offending element says so once and logs itself for locating (#1182).
+   * A removed `size` attribute arrives as `null` and counts as unset.
+   */
+  warnHorizontalSizeIgnored() {
+    if (this.hasWarnedHorizontalSize || !this.isHorizontal || !this.size || this.size === ReadoutSize.large) {
+      return;
+    }
+    this.hasWarnedHorizontalSize = true;
+    console.warn(
+      `[obc-readout] size="${this.size}" is ignored when direction="horizontal": the horizontal arrangement exists in the large tier only. Remove the size, or use direction="vertical" for the small / medium tiers.`,
+      this
+    );
   }
   updated(changed) {
     super.updated(changed);
@@ -86721,6 +86775,62 @@ const compentStyle$P = i$7`* {
     "ss04" on;
     }
 
+.wrapper.integration {
+  border-color: var(--integration-flat-enabled-border-color);
+  background-color: var(--integration-flat-enabled-background-color);
+  border-width: 1px;
+  border-style: solid;
+  cursor: pointer;
+  --base-border-color: var(--integration-flat-enabled-border-color);
+  --base-background-color: var(--integration-flat-enabled-background-color);
+}
+
+.wrapper.integration:focus {
+  outline: none;
+}
+
+.wrapper.integration.activated {
+  border-color: var(--integration-flat-activated-border-color);
+  background-color: var(--integration-flat-activated-background-color);
+  --base-border-color: var(--integration-flat-activated-border-color);
+  --base-background-color: var(--integration-flat-activated-background-color);
+}
+
+@media (hover:hover) {
+
+.wrapper.integration:hover {
+    border-color: color-mix(in srgb, var(--integration-flat-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
+    background-color: color-mix(in srgb, var(--integration-flat-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
+  }
+}
+
+.wrapper.integration:active {
+  border-color: var(--integration-flat-pressed-border-color);
+  background-color: var(--integration-flat-pressed-background-color);
+}
+
+.wrapper.integration:focus-visible {
+  outline-color: var(--border-focus-color);
+  outline-width: var(--global-size-spacing-border-weight-focusframe);
+  outline-style: solid;
+  border-color: var(--container-global-color);
+  z-index: 1;
+}
+
+.wrapper.integration:disabled {
+  border-color: var(--integration-flat-disabled-border-color);
+  background-color: var(--integration-flat-disabled-background-color);
+  cursor: not-allowed;
+  color: var(--integration-on-flat-disabled-color) !important;
+}
+
+.wrapper.integration.disabled {
+  border-color: var(--integration-flat-disabled-border-color);
+  background-color: var(--integration-flat-disabled-background-color);
+  cursor: not-allowed;
+  color: var(--integration-on-flat-disabled-color) !important;
+}
+
 :is(.wrapper.integration .icon-wrapper) {
   border-color: var(--integration-normal-enabled-border-color);
   background-color: var(--integration-normal-enabled-background-color);
@@ -216921,10 +217031,21 @@ const compentStyle$j = i$7`* {
   }
 
 .wrapper .center {
-    display: flex;
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(
+      var(--obc-integration-app-bar-app-width, max-content),
+      1fr
+    );
     gap: var(--app-components-app-menu-app-button-spacing);
     justify-content: center;
   }
+
+/* Svelte wrappers add a slot container that must not become a grid item. */
+
+slot[name="apps"]::slotted(:not(obc-app-button)) {
+  display: contents;
+}
 `;
 var __getOwnPropDesc$11 = Object.getOwnPropertyDescriptor;
 var __decorateClass$11 = (decorators, target, key, kind) => {
@@ -216940,32 +217061,12 @@ let ObcIntegrationAppBar = class extends i$4 {
       <div class="wrapper">
         <div class="left-side"></div>
         <div class="center">
-          <slot name="apps" @slotchange=${this.handleAppsSlotChange}></slot>
+          <slot name="apps"></slot>
         </div>
         <div class="right-side"></div>
       </div>
     `;
   }
-  handleAppsSlotChange(event) {
-    const slot = event.target;
-    const buttons = slot.assignedElements();
-    if (buttons.length === 0) {
-      return;
-    }
-    for (const btn of buttons) {
-      btn.style.width = "";
-    }
-    requestAnimationFrame(() => {
-      const maxWidth = Math.max(
-        ...buttons.map((btn) => btn.getBoundingClientRect().width)
-      );
-      if (maxWidth > 0) {
-        for (const btn of buttons) {
-          btn.style.width = `${maxWidth}px`;
-        }
-      }
-    });
-  }
 };
 ObcIntegrationAppBar.styles = r$7(compentStyle$j);
 ObcIntegrationAppBar = __decorateClass$11([