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

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents-full-bundle",
-  "version": "2.0.0-next.136",
+  "version": "2.0.0-next.137",
   "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},
+};

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

@@ -0,0 +1,60 @@
+import {LitElement, html, unsafeCSS} from 'lit';
+import {property} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
+import {customElement} from '../../decorator.js';
+import sharedStyle from '../shuffle-button/shuffle-button.css?inline';
+import componentStyle from './hydraulic-check-valve.css?inline';
+import '../../icons/icon-hydraulic-13.js';
+
+/**
+ * `<obc-hydraulic-check-valve>` – Static check valve symbol.
+ *
+ * Renders the check valve symbol in the same thumb-on-track visual style as
+ * the position-selector valve components, sized to a single slot (48px at
+ * regular size). A check valve has no selectable positions, so the component
+ * is display-only and not focusable.
+ *
+ * ## Usage Guidelines
+ * Use alongside `<obc-hydraulic-valve-4-3>` and `<obc-hydraulic-valve-x-2>`
+ * for consistent styling of valves without switchable positions.
+ *
+ * @experimental
+ *
+ * @property ariaLabel - Accessible name for the symbol.
+ * @property vertical - Rotates the symbol 90° counter-clockwise to match a vertical flow path.
+ */
+@customElement('obc-hydraulic-check-valve')
+export class ObcHydraulicCheckValve extends LitElement {
+  @property({type: String}) override ariaLabel = 'Check valve';
+
+  @property({type: Boolean}) vertical = false;
+
+  override render() {
+    return html`
+      <div
+        class=${classMap({shuffle: true, vertical: this.vertical})}
+        role="img"
+        aria-label=${this.ariaLabel}
+      >
+        <div class="window">
+          <div class="track"></div>
+          <div class="thumb selected">
+            <div class="visible-wrapper">
+              <div class="icon-container">
+                <obi-hydraulic-13></obi-hydraulic-13>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  static override styles = [unsafeCSS(sharedStyle), unsafeCSS(componentStyle)];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-hydraulic-check-valve': ObcHydraulicCheckValve;
+  }
+}

package/src/automation/hydraulic-valve-4-3/hydraulic-valve-4-3.stories.ts

@@ -0,0 +1,72 @@
+import type {Meta, StoryObj} from '@storybook/web-components-vite';
+import {html} from 'lit';
+import {
+  HydraulicValve43Type,
+  ObcHydraulicValve43,
+} from './hydraulic-valve-4-3.js';
+import './hydraulic-valve-4-3.js';
+import type {PositionSelectedEvent} from '../shuffle-button/shuffle-button-base.js';
+
+const meta: Meta<typeof ObcHydraulicValve43> = {
+  title: 'Automation/Hydraulic Valves/Valve 4-3',
+  tags: ['autodocs', '6.1', 'experimental'],
+  component: 'obc-hydraulic-valve-4-3',
+  args: {
+    type: HydraulicValve43Type.One,
+    selectedPosition: 1,
+    vertical: false,
+  },
+  argTypes: {
+    type: {
+      control: {type: 'select'},
+      options: Object.values(HydraulicValve43Type),
+    },
+    selectedPosition: {
+      control: {type: 'number', min: 0, max: 2, step: 1},
+    },
+  },
+  render: (args) => html`
+    <obc-hydraulic-valve-4-3
+      type=${args.type}
+      .selectedPosition=${args.selectedPosition}
+      ?vertical=${args.vertical}
+      @position-selected=${(event: PositionSelectedEvent) => {
+        (event.target as ObcHydraulicValve43).selectedPosition =
+          event.detail.position;
+      }}
+    ></obc-hydraulic-valve-4-3>
+  `,
+} satisfies Meta<ObcHydraulicValve43>;
+
+export default meta;
+type Story = StoryObj<ObcHydraulicValve43>;
+
+export const Default: Story = {};
+
+export const Type2: Story = {
+  args: {type: HydraulicValve43Type.Two},
+};
+
+export const Type3: Story = {
+  args: {type: HydraulicValve43Type.Three},
+};
+
+export const Type4: Story = {
+  args: {type: HydraulicValve43Type.Four},
+};
+
+export const Type5: Story = {
+  args: {type: HydraulicValve43Type.Five},
+};
+
+export const PositionLeft: Story = {
+  args: {selectedPosition: 0},
+};
+
+export const PositionRight: Story = {
+  args: {selectedPosition: 2},
+};
+
+export const Vertical: Story = {
+  args: {vertical: true},
+};

package/src/automation/hydraulic-valve-4-3/hydraulic-valve-4-3.ts

@@ -0,0 +1,108 @@
+import {html} from 'lit';
+import type {TemplateResult} from 'lit';
+import {property} from 'lit/decorators.js';
+import {customElement} from '../../decorator.js';
+import {ObcShuffleButtonBase} from '../shuffle-button/shuffle-button-base.js';
+import '../../icons/icon-hydraulic-01.js';
+import '../../icons/icon-hydraulic-02.js';
+import '../../icons/icon-hydraulic-05.js';
+import '../../icons/icon-hydraulic-06.js';
+import '../../icons/icon-hydraulic-07.js';
+import '../../icons/icon-hydraulic-08.js';
+import '../../icons/icon-hydraulic-16.js';
+
+/**
+ * Detail payload for the `position-selected` event: the zero-based position
+ * the user requested (0 = left, 1 = center, 2 = right).
+ *
+ * Declared here rather than imported from the base: the wrapper generators
+ * resolve event types in the component's own module only.
+ */
+export interface PositionSelectedDetail {
+  position: number;
+}
+
+/**
+ * Center-position symbol variant of `<obc-hydraulic-valve-4-3>`.
+ * Each value maps to a different center (neutral) position symbol.
+ */
+export enum HydraulicValve43Type {
+  One = '1',
+  Two = '2',
+  Three = '3',
+  Four = '4',
+  Five = '5',
+}
+
+/**
+ * `<obc-hydraulic-valve-4-3>` – Position selector symbol for a 4/3 directional valve.
+ *
+ * Shows the valve's three positions as icon thumbs on a shared track. The
+ * selected position always occupies the fixed center slot; the other position
+ * thumbs keep their logical order and shift to either side, so the component's
+ * total width never changes (five 48px slots at regular size).
+ *
+ * ## Features / Variants
+ * - `type` selects the center-position symbol (five variants).
+ * - `vertical` stacks the positions top to bottom and rotates the symbols to
+ *   match a vertical flow path.
+ * - Controlled selection: clicking an option or pressing arrow keys fires
+ *   `position-selected` with the requested position; the application updates
+ *   `selectedPosition` once the change is confirmed.
+ * - Scales with the component size classes (`obc-component-size-*`).
+ *
+ * ## Usage Guidelines
+ * Use to display and command the position of a 4/3 directional valve. For
+ * two-position valves use `<obc-hydraulic-valve-x-2>`; for a static check
+ * valve symbol use `<obc-hydraulic-check-valve>`. Bind `selectedPosition` to
+ * the position the device reports, not to the last request, so the symbol
+ * never shows a position the valve has not reached.
+ *
+ * ## Events
+ * - `position-selected` – Fired when the user requests a position (click or
+ *   arrow key). Detail: `{position: number}` (0 = left, 1 = center, 2 = right).
+ *
+ * @property type - Center-position symbol variant.
+ * @property ariaLabel - Accessible name for the control.
+ * @fires {CustomEvent<PositionSelectedDetail>} position-selected - Fired when the user requests a position (click or arrow key).
+ * @experimental
+ */
+@customElement('obc-hydraulic-valve-4-3')
+export class ObcHydraulicValve43 extends ObcShuffleButtonBase {
+  @property({type: String}) type: HydraulicValve43Type =
+    HydraulicValve43Type.One;
+
+  @property({type: String}) override ariaLabel = 'Hydraulic 4/3 valve';
+
+  protected override get positionCount(): number {
+    return 3;
+  }
+
+  protected override renderPositionIcon(position: number): TemplateResult {
+    if (position === 0) {
+      return html`<obi-hydraulic-02></obi-hydraulic-02>`;
+    }
+    if (position === 2) {
+      return html`<obi-hydraulic-07></obi-hydraulic-07>`;
+    }
+    switch (this.type) {
+      case HydraulicValve43Type.Two:
+        return html`<obi-hydraulic-16></obi-hydraulic-16>`;
+      case HydraulicValve43Type.Three:
+        return html`<obi-hydraulic-08></obi-hydraulic-08>`;
+      case HydraulicValve43Type.Four:
+        return html`<obi-hydraulic-05></obi-hydraulic-05>`;
+      case HydraulicValve43Type.Five:
+        return html`<obi-hydraulic-06></obi-hydraulic-06>`;
+      case HydraulicValve43Type.One:
+      default:
+        return html`<obi-hydraulic-01></obi-hydraulic-01>`;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-hydraulic-valve-4-3': ObcHydraulicValve43;
+  }
+}

package/src/automation/hydraulic-valve-x-2/hydraulic-valve-x-2.stories.ts

@@ -0,0 +1,60 @@
+import type {Meta, StoryObj} from '@storybook/web-components-vite';
+import {html} from 'lit';
+import {
+  HydraulicValveX2Type,
+  ObcHydraulicValveX2,
+} from './hydraulic-valve-x-2.js';
+import './hydraulic-valve-x-2.js';
+import type {PositionSelectedEvent} from '../shuffle-button/shuffle-button-base.js';
+
+const meta: Meta<typeof ObcHydraulicValveX2> = {
+  title: 'Automation/Hydraulic Valves/Valve X-2',
+  tags: ['autodocs', '6.1', 'experimental'],
+  component: 'obc-hydraulic-valve-x-2',
+  args: {
+    type: HydraulicValveX2Type.TwoTwo,
+    selectedPosition: 1,
+    vertical: false,
+  },
+  argTypes: {
+    type: {
+      control: {type: 'select'},
+      options: Object.values(HydraulicValveX2Type),
+    },
+    selectedPosition: {
+      control: {type: 'number', min: 0, max: 1, step: 1},
+    },
+  },
+  render: (args) => html`
+    <obc-hydraulic-valve-x-2
+      type=${args.type}
+      .selectedPosition=${args.selectedPosition}
+      ?vertical=${args.vertical}
+      @position-selected=${(event: PositionSelectedEvent) => {
+        (event.target as ObcHydraulicValveX2).selectedPosition =
+          event.detail.position;
+      }}
+    ></obc-hydraulic-valve-x-2>
+  `,
+} satisfies Meta<ObcHydraulicValveX2>;
+
+export default meta;
+type Story = StoryObj<ObcHydraulicValveX2>;
+
+export const Default: Story = {};
+
+export const TypeThreeTwo: Story = {
+  args: {type: HydraulicValveX2Type.ThreeTwo},
+};
+
+export const TypeFourTwo: Story = {
+  args: {type: HydraulicValveX2Type.FourTwo},
+};
+
+export const PositionFirst: Story = {
+  args: {selectedPosition: 0},
+};
+
+export const Vertical: Story = {
+  args: {vertical: true},
+};