@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.136 → 2.0.0-next.138

package/dist/automation/shuffle-button/shuffle-button-base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shuffle-button-base.js","sources":["../../../src/automation/shuffle-button/shuffle-button-base.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport type {PropertyValues, TemplateResult} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport componentStyle from './shuffle-button.css?inline';\nimport {\n  clampPosition,\n  shuffleSlotCount,\n  shuffleWindowOffset,\n} from './shuffle-layout.js';\n\n/**\n * Detail payload for the `position-selected` event dispatched by\n * shuffle-button components. `position` is the zero-based position the user\n * requested.\n */\nexport interface PositionSelectedDetail {\n  position: number;\n}\n\n/**\n * The `position-selected` event dispatched by shuffle-button components.\n */\nexport type PositionSelectedEvent = CustomEvent<PositionSelectedDetail>;\n\n/**\n * Base class for shuffle-button selectors: a control whose selected thumb\n * always occupies the fixed center slot of a (2·n−1)-slot row (or column when\n * `vertical`). Option thumbs keep their logical order and redistribute to\n * either side of the selected thumb; empty spacer slots absorb the remaining\n * length so the total size never changes.\n *\n * ## Controlled selection\n * Clicking an option or pressing an arrow key only fires `position-selected`.\n * The host application sets `selectedPosition` once the device confirms the\n * change, so the control never shows a position the device has not reached.\n *\n * ## Keyboard\n * Follows the WAI-ARIA radio group pattern\n * (https://www.w3.org/WAI/ARIA/apg/patterns/radio/): `role=\"radiogroup\"` with\n * one `role=\"radio\"` thumb per position, a single tab stop on the selected\n * thumb, and Left/Up and Right/Down moving to the previous/next position with\n * wrap-around. Departures: arrow keys request the position rather than moving\n * the checked state (controlled selection above), and focus follows the thumb\n * only once the host confirms it. Space/Enter on a focused thumb request it\n * through the native button click. Home/End are out of scope.\n *\n * Subclasses define `positionCount` and `renderPositionIcon()` and carry the\n * `@fires position-selected` tag: the manifest and the framework wrappers read\n * events from the registered element, not from this base.\n *\n * Not declared `abstract`: the wrapper generators wrap every `LitElement`\n * subclass and pass its constructor as a concrete `Constructor<T>`, so the\n * default implementations below stand in for abstract members (same as\n * `ObcAbstractAutomationButton`).\n *\n * @property selectedPosition - Zero-based index of the currently selected position. Out-of-range values are clamped.\n * @property vertical - Lays the control out vertically: positions stack top to bottom and the position symbols rotate 90° counter-clockwise to match a vertical flow path.\n * @property ariaLabel - Accessible name for the radio group (the control is icon-only). Concrete components override the default with a device-specific name.\n */\nexport class ObcShuffleButtonBase extends LitElement {\n  @property({type: Number}) selectedPosition = 1;\n\n  @property({type: Boolean}) vertical = false;\n\n  @property({type: String}) override ariaLabel = 'Position selector';\n\n  @state() private suppressHover = false;\n\n  protected get positionCount(): number {\n    return 1;\n  }\n\n  protected renderPositionIcon(_position: number): TemplateResult {\n    return html``;\n  }\n\n  override render() {\n    const count = this.positionCount;\n    const selected = clampPosition(count, this.selectedPosition);\n    return html`\n      <div\n        class=${classMap({shuffle: true, vertical: this.vertical})}\n        role=\"radiogroup\"\n        aria-label=${this.ariaLabel}\n        aria-orientation=${this.vertical ? 'vertical' : 'horizontal'}\n        style=\"--_shuffle-slot-count: ${shuffleSlotCount(\n          count\n        )}; --_shuffle-window-offset: ${shuffleWindowOffset(\n          count,\n          selected\n        )};${this.suppressHover ? ' --obc-can-hover: 0;' : ''}\"\n        @keydown=${this.handleKeydown}\n        @pointermove=${this.restoreHover}\n      >\n        <div class=\"window\">\n          <div class=\"track\"></div>\n          ${Array.from({length: count}, (_, position) =>\n            this.renderThumb(position, selected)\n          )}\n        </div>\n      </div>\n    `;\n  }\n\n  private renderThumb(position: number, selected: number) {\n    const isSelected = position === selected;\n    return html`\n      <button\n        class=${classMap({thumb: true, selected: isSelected})}\n        type=\"button\"\n        role=\"radio\"\n        aria-checked=${isSelected}\n        tabindex=${isSelected ? 0 : -1}\n        @click=${() => this.requestPosition(position)}\n      >\n        <div class=\"visible-wrapper\">\n          <div class=\"icon-container\">${this.renderPositionIcon(position)}</div>\n        </div>\n      </button>\n    `;\n  }\n\n  private requestPosition(position: number) {\n    if (position === clampPosition(this.positionCount, this.selectedPosition)) {\n      return;\n    }\n    // Browsers keep :hover on the thumb that shuffles away from under a\n    // stationary pointer; mute hover feedback until the pointer really moves.\n    this.suppressHover = true;\n    const event: PositionSelectedEvent = new CustomEvent('position-selected', {\n      detail: {position},\n      bubbles: true,\n      composed: true,\n    });\n    this.dispatchEvent(event);\n  }\n\n  private restoreHover() {\n    this.suppressHover = false;\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    let delta: number;\n    if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n      delta = 1;\n    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n      delta = -1;\n    } else {\n      return;\n    }\n    event.preventDefault();\n    const count = this.positionCount;\n    const selected = clampPosition(count, this.selectedPosition);\n    this.requestPosition((selected + delta + count) % count);\n  }\n\n  protected override updated(changed: PropertyValues) {\n    if (\n      changed.has('selectedPosition') &&\n      this.shadowRoot?.activeElement instanceof HTMLElement\n    ) {\n      this.shadowRoot\n        .querySelector<HTMLButtonElement>('button.thumb.selected')\n        ?.focus();\n    }\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,219 @@
+import { css } from "lit";
+const componentStyle = css`* {
+  -webkit-tap-highlight-color: transparent;
+}
+
+:host {
+  display: inline-block;
+}
+
+/* ---- Slot grid ----
+ * The box is (2n-1) touch-target slots; the selected thumb always sits in the
+ * center slot, so the box never changes size with the selection. */
+
+.shuffle {
+  --shuffle-slot-size: var(--global-size-spacing-touch-target-min);
+  --_shuffle-slot-count: 1;
+  --_shuffle-window-offset: 0;
+  position: relative; /* containing block for the sliding .window */
+  width: calc(var(--_shuffle-slot-count) * var(--shuffle-slot-size));
+  height: var(--shuffle-slot-size);
+}
+
+.shuffle.vertical {
+  width: var(--shuffle-slot-size);
+  height: calc(var(--_shuffle-slot-count) * var(--shuffle-slot-size));
+}
+
+/* The window holds the n thumbs in logical order and slides by whole slots so
+ * the selected one lands in the center; the box above stays put. */
+
+.window {
+  position: absolute; /* slides inside the fixed-size .shuffle box */
+  top: 0;
+  left: 0;
+  display: flex;
+  transform: translateX(
+    calc(var(--_shuffle-window-offset) * var(--shuffle-slot-size))
+  );
+  transition: transform 100ms ease-out; /* TODO(designer): Figma is WIP and specifies no motion */
+}
+
+.shuffle.vertical .window {
+  flex-direction: column;
+  transform: translateY(
+    calc(var(--_shuffle-window-offset) * var(--shuffle-slot-size))
+  );
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .window {
+    transition: none;
+  }
+}
+
+/* The track is inset to the visual target height so it aligns with the thumbs'
+ * visible wrappers, not with the touch slots. */
+
+.track {
+  border-color: var(--indent-enabled-border-color);
+  background-color: var(--indent-enabled-background-color);
+  border-width: 1px;
+  border-style: solid;
+  --base-border-color: var(--indent-enabled-border-color);
+  --base-background-color: var(--indent-enabled-background-color);
+  position: absolute;
+  inset: calc(
+      (
+          var(--shuffle-slot-size) -
+            var(--global-size-spacing-visual-target-min)
+        ) /
+        2
+    )
+    0;
+  border-radius: var(--global-border-radius-border-radius-base);
+  box-sizing: border-box; /* the mixin border must not grow the track past the slots */
+}
+
+.shuffle.vertical .track {
+  inset: 0
+    calc(
+      (
+          var(--shuffle-slot-size) -
+            var(--global-size-spacing-visual-target-min)
+        ) /
+        2
+    );
+}
+
+/* ---- Thumbs ----
+ * Two-layer pattern: the button is the touch target and focus-ring layer, the
+ * .visible-wrapper is the visual target. */
+
+.thumb {
+  position: relative;
+  width: var(--shuffle-slot-size);
+  height: var(--shuffle-slot-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0; /* a slot never shrinks below the touch target */
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+
+button.thumb {
+  cursor: pointer;
+}
+
+button.thumb:focus {
+  outline: none;
+}
+
+button.thumb .visible-wrapper {
+  border-color: var(--flat-enabled-border-color);
+  background-color: var(--flat-enabled-background-color);
+  border-width: 1px;
+  border-style: solid;
+  cursor: pointer;
+  --base-border-color: var(--flat-enabled-border-color);
+  --base-background-color: var(--flat-enabled-background-color);
+}
+
+button.thumb.activated .visible-wrapper {
+  border-color: var(--flat-activated-border-color);
+  background-color: var(--flat-activated-background-color);
+  --base-border-color: var(--flat-activated-border-color);
+  --base-background-color: var(--flat-activated-background-color);
+}
+
+@media (hover:hover) {
+
+button.thumb:hover .visible-wrapper {
+    border-color: color-mix(in srgb, var(--flat-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
+    background-color: color-mix(in srgb, var(--flat-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
+  }
+}
+
+button.thumb:active .visible-wrapper {
+  border-color: var(--flat-pressed-border-color);
+  background-color: var(--flat-pressed-background-color);
+}
+
+button.thumb:focus-visible .visible-wrapper {
+  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;
+}
+
+button.thumb:disabled .visible-wrapper {
+  border-color: var(--flat-disabled-border-color);
+  background-color: var(--flat-disabled-background-color);
+  cursor: not-allowed;
+  color: var(--on-flat-disabled-color) !important;
+}
+
+button.thumb.disabled .visible-wrapper {
+  border-color: var(--flat-disabled-border-color);
+  background-color: var(--flat-disabled-background-color);
+  cursor: not-allowed;
+  color: var(--on-flat-disabled-color) !important;
+}
+
+button.thumb:disabled {
+  cursor: not-allowed;
+}
+
+button.thumb.disabled {
+  cursor: not-allowed;
+}
+
+.visible-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: var(--global-size-spacing-visual-target-min);
+  box-sizing: border-box;
+  border-radius: var(--global-border-radius-border-radius-base);
+  color: var(--automation-device-secondary-color);
+}
+
+.thumb.selected {
+  cursor: default; /* clicking the selected position is a no-op */
+}
+
+.thumb.selected .visible-wrapper {
+  background-color: var(--automation-pipe-primary-color);
+  border: 1px solid var(--automation-pipe-tertiary-color);
+  color: var(--automation-device-tertiary-color);
+}
+
+.shuffle.vertical .visible-wrapper {
+  width: var(--global-size-spacing-visual-target-min);
+  height: 100%;
+}
+
+.icon-container {
+  width: var(--global-size-spacing-icon-icon-size-regular);
+  height: var(--global-size-spacing-icon-icon-size-regular);
+}
+
+.shuffle.vertical .icon-container {
+  transform: rotate(-90deg); /* symbols are drawn for horizontal flow */
+}
+
+.icon-container > * {
+  width: 100%;
+  height: 100%;
+}
+`;
+export {
+  componentStyle as default
+};
+//# sourceMappingURL=shuffle-button.css.js.map

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

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

package/dist/automation/shuffle-button/shuffle-layout.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Pure layout math for the shuffle-button mechanism: a selector whose selected
+ * thumb always occupies the fixed center slot of a (2n-1)-slot row while the
+ * remaining option thumbs keep their logical order on either side.
+ */
+export declare function clampPosition(positionCount: number, position: number): number;
+export declare function shuffleSlotCount(positionCount: number): number;
+export declare function shuffleWindowOffset(positionCount: number, selectedPosition: number): number;
+//# sourceMappingURL=shuffle-layout.d.ts.map

package/dist/automation/shuffle-button/shuffle-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shuffle-layout.d.ts","sourceRoot":"","sources":["../../../src/automation/shuffle-button/shuffle-layout.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,wBAAgB,aAAa,CAAC,aAAa,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAG7E;AAED,wBAAgB,gBAAgB,CAAC,aAAa,EAAE,MAAM,GAAG,MAAM,CAE9D;AAED,wBAAgB,mBAAmB,CACjC,aAAa,EAAE,MAAM,EACrB,gBAAgB,EAAE,MAAM,GACvB,MAAM,CAER"}

package/dist/automation/shuffle-button/shuffle-layout.js

@@ -0,0 +1,16 @@
+function clampPosition(positionCount, position) {
+  const rounded = Number.isNaN(position) ? 0 : Math.round(position);
+  return Math.min(Math.max(rounded, 0), positionCount - 1);
+}
+function shuffleSlotCount(positionCount) {
+  return 2 * positionCount - 1;
+}
+function shuffleWindowOffset(positionCount, selectedPosition) {
+  return positionCount - 1 - clampPosition(positionCount, selectedPosition);
+}
+export {
+  clampPosition,
+  shuffleSlotCount,
+  shuffleWindowOffset
+};
+//# sourceMappingURL=shuffle-layout.js.map

package/dist/automation/shuffle-button/shuffle-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shuffle-layout.js","sources":["../../../src/automation/shuffle-button/shuffle-layout.ts"],"sourcesContent":["/**\n * Pure layout math for the shuffle-button mechanism: a selector whose selected\n * thumb always occupies the fixed center slot of a (2n-1)-slot row while the\n * remaining option thumbs keep their logical order on either side.\n */\n\nexport function clampPosition(positionCount: number, position: number): number {\n  const rounded = Number.isNaN(position) ? 0 : Math.round(position);\n  return Math.min(Math.max(rounded, 0), positionCount - 1);\n}\n\nexport function shuffleSlotCount(positionCount: number): number {\n  return 2 * positionCount - 1;\n}\n\nexport function shuffleWindowOffset(\n  positionCount: number,\n  selectedPosition: number\n): number {\n  return positionCount - 1 - clampPosition(positionCount, selectedPosition);\n}\n"],"names":[],"mappings":"AAMO,SAAS,cAAc,eAAuB,UAA0B;AAC7E,QAAM,UAAU,OAAO,MAAM,QAAQ,IAAI,IAAI,KAAK,MAAM,QAAQ;AAChE,SAAO,KAAK,IAAI,KAAK,IAAI,SAAS,CAAC,GAAG,gBAAgB,CAAC;AACzD;AAEO,SAAS,iBAAiB,eAA+B;AAC9D,SAAO,IAAI,gBAAgB;AAC7B;AAEO,SAAS,oBACd,eACA,kBACQ;AACR,SAAO,gBAAgB,IAAI,cAAc,eAAe,gBAAgB;AAC1E;"}

package/dist/components/alert-subsystem-counter/alert-subsystem-counter.css.js

@@ -0,0 +1,113 @@
+import { css } from "lit";
+const componentStyle = css`* {
+  -webkit-tap-highlight-color: transparent;
+}
+
+:host {
+  display: block;
+}
+
+.frame {
+  box-sizing: border-box; /* the host width is the frame width, border included */
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  border-radius: 6px;
+  background: var(--container-section-color);
+  border: 1px solid var(--border-outline-color);
+}
+
+.frame.orientation-vertical {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.leading-container {
+  display: flex;
+  flex: 1 0 0; /* takes the width the badges leave over, so the label can truncate */
+  align-items: center;
+  gap: 4px;
+  min-width: 0; /* lets the label shrink below its text width */
+}
+
+.icon {
+  flex-shrink: 0;
+  width: var(--global-size-spacing-icon-icon-size-regular);
+  height: var(--global-size-spacing-icon-icon-size-regular);
+  color: var(--on-indent-neutral-color);
+}
+
+.icon.no-icon {
+  display: none; /* collapses the flex gap too, so an iconless counter has no leading hole */
+}
+
+.label {
+  font-family: var(--global-typography-font-family);
+  font-weight: var(--global-typography-ui-body-font-weight);
+  font-size: var(--global-typography-ui-body-font-size);
+  line-height: var(--global-typography-ui-body-line-height);
+  font-feature-settings:
+    "liga" off,
+    "clig" off,
+    "ss04" on;
+  flex: 1 0 0;
+  min-width: 0; /* required for text-overflow to kick in inside a flex item */
+  padding-left: 4px;
+  color: var(--element-inactive-color);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.frame.has-alert .label {
+  font-family: var(--global-typography-font-family);
+  font-weight: var(--global-typography-ui-body-active-font-weight);
+  font-size: var(--global-typography-ui-body-active-font-size);
+  line-height: var(--global-typography-ui-body-active-line-height);
+  font-feature-settings:
+    "liga" off,
+    "clig" off,
+    "ss04" on;
+  color: var(--on-indent-active-color);
+}
+
+.trailing-container {
+  display: flex;
+  flex-shrink: 0; /* badges keep their size; the label is what gives way */
+  align-items: center;
+  gap: 4px;
+}
+
+.frame.orientation-horizontal .trailing-container {
+  justify-content: flex-end;
+}
+
+.frame.orientation-vertical .trailing-container {
+  align-self: flex-start; /* hugs its content under the label instead of stretching across the frame */
+}
+
+.frame:not(.has-alert) .trailing-container {
+  justify-content: center;
+  /* same row height as the large badges it stands in for */
+  height: var(--ui-components-badge-min-size-large);
+  padding: 0 8px;
+}
+
+.empty {
+  font-family: var(--global-typography-font-family);
+  font-weight: var(--global-typography-ui-label-font-weight);
+  font-size: var(--global-typography-ui-label-font-size);
+  line-height: var(--global-typography-ui-label-line-height);
+  font-feature-settings:
+    "liga" off,
+    "clig" off,
+    "ss04" on;
+  color: var(--element-inactive-color);
+  white-space: nowrap;
+}
+`;
+export {
+  componentStyle as default
+};
+//# sourceMappingURL=alert-subsystem-counter.css.js.map

package/dist/components/alert-subsystem-counter/alert-subsystem-counter.css.js.map

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

package/dist/components/alert-subsystem-counter/alert-subsystem-counter.d.ts

@@ -0,0 +1,104 @@
+import { LitElement } from 'lit';
+/**
+ * `ObcAlertSubsystemCounterOrientation` – Layout direction for the counter.
+ *
+ * - `horizontal`: Icon, label, and badges sit in a single row.
+ * - `vertical`: Badges (or empty text) sit on their own line below the label.
+ */
+export declare enum ObcAlertSubsystemCounterOrientation {
+    Horizontal = "horizontal",
+    Vertical = "vertical"
+}
+/**
+ * `<obc-alert-subsystem-counter>` – A framed summary of a subsystem's alert
+ * counts: a leading icon, a label, and a trailing set of slotted count badges.
+ *
+ * When there are no active alerts it shows a muted label and an empty-state
+ * message instead of the badges. The count badges themselves are supplied by
+ * the consumer as slotted `obc-badge` elements; this component provides only
+ * the frame, layout, label, and empty state.
+ *
+ * ---
+ *
+ * ### Features
+ * - **Orientation:** `horizontal` (single row) or `vertical` (badges on a line
+ *   below the label).
+ * - **Alert state:** `hasAlert` toggles between an active (bold label, badges)
+ *   and an inactive (muted label, empty text) presentation.
+ * - **Freeform label:** Pass a full title or an abbreviation — the label is
+ *   plain text decided by the caller and truncates with an ellipsis.
+ * - **Configurable empty text:** Customize the message shown when there are no
+ *   alerts via `emptyText`.
+ * - **Optional leading icon:** Provide an icon through the `icon` slot; omit it
+ *   and the leading box collapses with no empty gap.
+ *
+ * ---
+ *
+ * ### Usage Guidelines
+ * - Use this component to give an at-a-glance count of outstanding alerts for a
+ *   single subsystem, grouped by severity.
+ * - Provide one slotted badge per severity in the `badges` slot, typically
+ *   `<obc-badge size="large">` with a severity `type` and a `number`. The
+ *   badge `type` values are the same severity vocabulary as `AlertType`
+ *   (`alarm`, `warning`, `caution` and the `level-*` family); order them
+ *   highest severity first, as `ALERT_SEVERITY_PRIORITY` does.
+ * - Set `hasAlert` to `false` to present the resolved/clear state; the badges
+ *   are then not rendered and `emptyText` is shown. The component does not
+ *   derive the state from the slotted badges — the consumer owns it.
+ * - Choose `vertical` orientation in narrow containers where the badges do not
+ *   fit beside the label.
+ * - The counter is display-only: it renders no button and fires no events. For
+ *   a clickable subsystem entry with badges, see `obc-tree-navigation-item`
+ *   (`alertBadges`) or `obc-integration-fleet-button` (`alerts`).
+ *
+ * ---
+ *
+ * ### Slots
+ *
+ * | Slot Name | Renders When...        | Purpose                                            |
+ * |-----------|------------------------|----------------------------------------------------|
+ * | `icon`    | The slot has content   | Leading 24px icon (e.g. `<obi-placeholder>`).      |
+ * | `badges`  | `hasAlert` is true     | Count badges, one per severity (`<obc-badge>`).    |
+ *
+ * ---
+ *
+ * ### Example
+ *
+ * ```html
+ * <obc-alert-subsystem-counter label="Label" hasAlert>
+ *   <obi-placeholder slot="icon"></obi-placeholder>
+ *   <obc-badge slot="badges" size="large" type="alarm" .number=${9}></obc-badge>
+ *   <obc-badge slot="badges" size="large" type="warning" .number=${4}></obc-badge>
+ *   <obc-badge slot="badges" size="large" type="caution" .number=${2}></obc-badge>
+ * </obc-alert-subsystem-counter>
+ * ```
+ *
+ * @property label - The subsystem label. Pass a full title or an abbreviation as plain text.
+ * @property orientation - Layout direction: `horizontal` (default) keeps icon, label and badges in one row; `vertical` moves the badges (or empty text) to a line below the label.
+ * @property hasAlert - Whether the subsystem has active alerts. `true` shows the label bold and renders the `badges` slot; `false` mutes the label and shows `emptyText` instead of the badges.
+ * @property emptyText - Text shown in the trailing area when `hasAlert` is `false`.
+ * @availableWhen emptyText hasAlert==false
+ * @slot icon - Optional leading 24px icon.
+ * @slot badges - Count badges shown when `hasAlert` is true.
+ * @beta
+ */
+export declare class ObcAlertSubsystemCounter extends LitElement {
+    /** The subsystem label. Pass a full title or an abbreviation as plain text. */
+    label: string;
+    /** Layout direction: `horizontal` (default) keeps icon, label and badges in one row; `vertical` moves the badges (or empty text) to a line below the label. */
+    orientation: ObcAlertSubsystemCounterOrientation;
+    /** Whether the subsystem has active alerts. `true` shows the label bold and renders the `badges` slot; `false` mutes the label and shows `emptyText` instead of the badges. */
+    hasAlert: boolean;
+    /** Text shown in the trailing area when `hasAlert` is `false`. */
+    emptyText: string;
+    private hasIcon;
+    private handleIconSlotChange;
+    render(): import('lit-html').TemplateResult<1>;
+    static styles: import('lit').CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'obc-alert-subsystem-counter': ObcAlertSubsystemCounter;
+    }
+}
+//# sourceMappingURL=alert-subsystem-counter.d.ts.map

package/dist/components/alert-subsystem-counter/alert-subsystem-counter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-subsystem-counter.d.ts","sourceRoot":"","sources":["../../../src/components/alert-subsystem-counter/alert-subsystem-counter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAMhD;;;;;GAKG;AACH,oBAAY,mCAAmC;IAC7C,UAAU,eAAe;IACzB,QAAQ,aAAa;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwEG;AACH,qBACa,wBAAyB,SAAQ,UAAU;IAC5B,KAAK,SAAM;IACX,WAAW,EAAE,mCAAmC,CACzB;IACtB,QAAQ,UAAS;IAClB,SAAS,SAAe;IAEzC,OAAO,CAAC,OAAO,CAAS;IAEjC,OAAO,CAAC,oBAAoB;IAKnB,MAAM;IAwBf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,6BAA6B,EAAE,wBAAwB,CAAC;KACzD;CACF"}

package/dist/components/alert-subsystem-counter/alert-subsystem-counter.js

@@ -0,0 +1,79 @@
+import { unsafeCSS, LitElement, html } from "lit";
+import { property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import componentStyle from "./alert-subsystem-counter.css.js";
+import { customElement } from "../../decorator.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var ObcAlertSubsystemCounterOrientation = /* @__PURE__ */ ((ObcAlertSubsystemCounterOrientation2) => {
+  ObcAlertSubsystemCounterOrientation2["Horizontal"] = "horizontal";
+  ObcAlertSubsystemCounterOrientation2["Vertical"] = "vertical";
+  return ObcAlertSubsystemCounterOrientation2;
+})(ObcAlertSubsystemCounterOrientation || {});
+let ObcAlertSubsystemCounter = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.label = "";
+    this.orientation = "horizontal";
+    this.hasAlert = false;
+    this.emptyText = "No alerts";
+    this.hasIcon = false;
+  }
+  handleIconSlotChange(e) {
+    const slot = e.target;
+    this.hasIcon = slot.assignedNodes({ flatten: true }).length > 0;
+  }
+  render() {
+    return html`
+      <div
+        class=${classMap({
+      frame: true,
+      ["orientation-" + this.orientation]: true,
+      "has-alert": this.hasAlert
+    })}
+      >
+        <div class="leading-container">
+          <div class=${classMap({ icon: true, "no-icon": !this.hasIcon })}>
+            <slot name="icon" @slotchange=${this.handleIconSlotChange}></slot>
+          </div>
+          <div class="label">${this.label}</div>
+        </div>
+        <div class="trailing-container">
+          ${this.hasAlert ? html`<slot name="badges" class="badges"></slot>` : html`<span class="empty">${this.emptyText}</span>`}
+        </div>
+      </div>
+    `;
+  }
+};
+ObcAlertSubsystemCounter.styles = unsafeCSS(componentStyle);
+__decorateClass([
+  property({ type: String })
+], ObcAlertSubsystemCounter.prototype, "label", 2);
+__decorateClass([
+  property({ type: String })
+], ObcAlertSubsystemCounter.prototype, "orientation", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcAlertSubsystemCounter.prototype, "hasAlert", 2);
+__decorateClass([
+  property({ type: String })
+], ObcAlertSubsystemCounter.prototype, "emptyText", 2);
+__decorateClass([
+  state()
+], ObcAlertSubsystemCounter.prototype, "hasIcon", 2);
+ObcAlertSubsystemCounter = __decorateClass([
+  customElement("obc-alert-subsystem-counter")
+], ObcAlertSubsystemCounter);
+export {
+  ObcAlertSubsystemCounter,
+  ObcAlertSubsystemCounterOrientation
+};
+//# sourceMappingURL=alert-subsystem-counter.js.map

package/dist/components/alert-subsystem-counter/alert-subsystem-counter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-subsystem-counter.js","sources":["../../../src/components/alert-subsystem-counter/alert-subsystem-counter.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport componentStyle from './alert-subsystem-counter.css?inline';\nimport {customElement} from '../../decorator.js';\n\n/**\n * `ObcAlertSubsystemCounterOrientation` – Layout direction for the counter.\n *\n * - `horizontal`: Icon, label, and badges sit in a single row.\n * - `vertical`: Badges (or empty text) sit on their own line below the label.\n */\nexport enum ObcAlertSubsystemCounterOrientation {\n  Horizontal = 'horizontal',\n  Vertical = 'vertical',\n}\n\n/**\n * `<obc-alert-subsystem-counter>` – A framed summary of a subsystem's alert\n * counts: a leading icon, a label, and a trailing set of slotted count badges.\n *\n * When there are no active alerts it shows a muted label and an empty-state\n * message instead of the badges. The count badges themselves are supplied by\n * the consumer as slotted `obc-badge` elements; this component provides only\n * the frame, layout, label, and empty state.\n *\n * ---\n *\n * ### Features\n * - **Orientation:** `horizontal` (single row) or `vertical` (badges on a line\n *   below the label).\n * - **Alert state:** `hasAlert` toggles between an active (bold label, badges)\n *   and an inactive (muted label, empty text) presentation.\n * - **Freeform label:** Pass a full title or an abbreviation — the label is\n *   plain text decided by the caller and truncates with an ellipsis.\n * - **Configurable empty text:** Customize the message shown when there are no\n *   alerts via `emptyText`.\n * - **Optional leading icon:** Provide an icon through the `icon` slot; omit it\n *   and the leading box collapses with no empty gap.\n *\n * ---\n *\n * ### Usage Guidelines\n * - Use this component to give an at-a-glance count of outstanding alerts for a\n *   single subsystem, grouped by severity.\n * - Provide one slotted badge per severity in the `badges` slot, typically\n *   `<obc-badge size=\"large\">` with a severity `type` and a `number`. The\n *   badge `type` values are the same severity vocabulary as `AlertType`\n *   (`alarm`, `warning`, `caution` and the `level-*` family); order them\n *   highest severity first, as `ALERT_SEVERITY_PRIORITY` does.\n * - Set `hasAlert` to `false` to present the resolved/clear state; the badges\n *   are then not rendered and `emptyText` is shown. The component does not\n *   derive the state from the slotted badges — the consumer owns it.\n * - Choose `vertical` orientation in narrow containers where the badges do not\n *   fit beside the label.\n * - The counter is display-only: it renders no button and fires no events. For\n *   a clickable subsystem entry with badges, see `obc-tree-navigation-item`\n *   (`alertBadges`) or `obc-integration-fleet-button` (`alerts`).\n *\n * ---\n *\n * ### Slots\n *\n * | Slot Name | Renders When...        | Purpose                                            |\n * |-----------|------------------------|----------------------------------------------------|\n * | `icon`    | The slot has content   | Leading 24px icon (e.g. `<obi-placeholder>`).      |\n * | `badges`  | `hasAlert` is true     | Count badges, one per severity (`<obc-badge>`).    |\n *\n * ---\n *\n * ### Example\n *\n * ```html\n * <obc-alert-subsystem-counter label=\"Label\" hasAlert>\n *   <obi-placeholder slot=\"icon\"></obi-placeholder>\n *   <obc-badge slot=\"badges\" size=\"large\" type=\"alarm\" .number=${9}></obc-badge>\n *   <obc-badge slot=\"badges\" size=\"large\" type=\"warning\" .number=${4}></obc-badge>\n *   <obc-badge slot=\"badges\" size=\"large\" type=\"caution\" .number=${2}></obc-badge>\n * </obc-alert-subsystem-counter>\n * ```\n *\n * @property label - The subsystem label. Pass a full title or an abbreviation as plain text.\n * @property orientation - Layout direction: `horizontal` (default) keeps icon, label and badges in one row; `vertical` moves the badges (or empty text) to a line below the label.\n * @property hasAlert - Whether the subsystem has active alerts. `true` shows the label bold and renders the `badges` slot; `false` mutes the label and shows `emptyText` instead of the badges.\n * @property emptyText - Text shown in the trailing area when `hasAlert` is `false`.\n * @availableWhen emptyText hasAlert==false\n * @slot icon - Optional leading 24px icon.\n * @slot badges - Count badges shown when `hasAlert` is true.\n * @beta\n */\n@customElement('obc-alert-subsystem-counter')\nexport class ObcAlertSubsystemCounter extends LitElement {\n  @property({type: String}) label = '';\n  @property({type: String}) orientation: ObcAlertSubsystemCounterOrientation =\n    ObcAlertSubsystemCounterOrientation.Horizontal;\n  @property({type: Boolean}) hasAlert = false;\n  @property({type: String}) emptyText = 'No alerts';\n\n  @state() private hasIcon = false;\n\n  private handleIconSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this.hasIcon = slot.assignedNodes({flatten: true}).length > 0;\n  }\n\n  override render() {\n    return html`\n      <div\n        class=${classMap({\n          frame: true,\n          ['orientation-' + this.orientation]: true,\n          'has-alert': this.hasAlert,\n        })}\n      >\n        <div class=\"leading-container\">\n          <div class=${classMap({icon: true, 'no-icon': !this.hasIcon})}>\n            <slot name=\"icon\" @slotchange=${this.handleIconSlotChange}></slot>\n          </div>\n          <div class=\"label\">${this.label}</div>\n        </div>\n        <div class=\"trailing-container\">\n          ${this.hasAlert\n            ? html`<slot name=\"badges\" class=\"badges\"></slot>`\n            : html`<span class=\"empty\">${this.emptyText}</span>`}\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-alert-subsystem-counter': ObcAlertSubsystemCounter;\n  }\n}\n"],"names":["ObcAlertSubsystemCounterOrientation"],"mappings":";;;;;;;;;;;;;;;AAYO,IAAK,wDAAAA,yCAAL;AACLA,uCAAA,YAAA,IAAa;AACbA,uCAAA,UAAA,IAAW;AAFD,SAAAA;AAAA,GAAA,uCAAA,CAAA,CAAA;AA+EL,IAAM,2BAAN,cAAuC,WAAW;AAAA,EAAlD,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,QAAQ;AACR,SAAA,cACxB;AACyB,SAAA,WAAW;AACZ,SAAA,YAAY;AAE7B,SAAQ,UAAU;AAAA,EAAA;AAAA,EAEnB,qBAAqB,GAAU;AACrC,UAAM,OAAO,EAAE;AACf,SAAK,UAAU,KAAK,cAAc,EAAC,SAAS,KAAA,CAAK,EAAE,SAAS;AAAA,EAC9D;AAAA,EAES,SAAS;AAChB,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,OAAO;AAAA,MACP,CAAC,iBAAiB,KAAK,WAAW,GAAG;AAAA,MACrC,aAAa,KAAK;AAAA,IAAA,CACnB,CAAC;AAAA;AAAA;AAAA,uBAGa,SAAS,EAAC,MAAM,MAAM,WAAW,CAAC,KAAK,QAAA,CAAQ,CAAC;AAAA,4CAC3B,KAAK,oBAAoB;AAAA;AAAA,+BAEtC,KAAK,KAAK;AAAA;AAAA;AAAA,YAG7B,KAAK,WACH,mDACA,2BAA2B,KAAK,SAAS,SAAS;AAAA;AAAA;AAAA;AAAA,EAI9D;AAGF;AAvCa,yBAsCK,SAAS,UAAU,cAAc;AArCvB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GADb,yBACe,WAAA,SAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAFb,yBAEe,WAAA,eAAA,CAAA;AAEC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAJd,yBAIgB,WAAA,YAAA,CAAA;AACD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GALb,yBAKe,WAAA,aAAA,CAAA;AAET,gBAAA;AAAA,EAAhB,MAAA;AAAM,GAPI,yBAOM,WAAA,WAAA,CAAA;AAPN,2BAAN,gBAAA;AAAA,EADN,cAAc,6BAA6B;AAAA,GAC/B,wBAAA;"}

package/package.json

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

package/src/automation/hydraulic-check-valve/hydraulic-check-valve.css

@@ -0,0 +1,3 @@
+.thumb {
+  cursor: default; /* display-only symbol, nothing to select */
+}

package/src/automation/hydraulic-check-valve/hydraulic-check-valve.stories.ts

@@ -0,0 +1,18 @@
+import type {Meta, StoryObj} from '@storybook/web-components-vite';
+import {ObcHydraulicCheckValve} from './hydraulic-check-valve.js';
+import './hydraulic-check-valve.js';
+
+const meta: Meta<typeof ObcHydraulicCheckValve> = {
+  title: 'Automation/Hydraulic Valves/Check Valve',
+  tags: ['autodocs', '6.1', 'experimental'],
+  component: 'obc-hydraulic-check-valve',
+} satisfies Meta<ObcHydraulicCheckValve>;
+
+export default meta;
+type Story = StoryObj<ObcHydraulicCheckValve>;
+
+export const Default: Story = {};
+
+export const Vertical: Story = {
+  args: {vertical: true},
+};