@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.66 → 2.0.0-next.68

package/dist/navigation-instruments/indicator-graph/indicator-graph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"indicator-graph.js","sources":["../../../src/navigation-instruments/indicator-graph/indicator-graph.ts"],"sourcesContent":["import {LitElement, PropertyValues, html, unsafeCSS} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport compentStyle from './indicator-graph.css?inline';\nimport uPlot from 'uplot';\nimport {customElement} from '../../decorator.js';\n\nexport enum ObcIndicatorGraphSize {\n  small = 'small',\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum ObcIndicatorGraphPriority {\n  regular = 'regular',\n  enhanced = 'enhanced',\n}\n\nexport interface ObcIndicatorGraphLayout {\n  size?: ObcIndicatorGraphSize;\n  priority?: ObcIndicatorGraphPriority;\n  y?: {min?: number; max?: number};\n}\n\n/**\n * @element obc-indicator-graph\n * @description A mini graph component\n *\n * @property {Array} data - The data to display in the graph, first array is the x values, second array is the y values\n */\n@customElement('obc-indicator-graph')\nexport class ObcIndicatorGraph extends LitElement {\n  @property({type: Array})\n  data: [number[], number[]] = [[], []];\n\n  @property({type: Object})\n  layout: ObcIndicatorGraphLayout = {};\n\n  @query('.chart-container')\n  private chart!: HTMLDivElement;\n\n  @state()\n  private y: number = 24;\n\n  @state()\n  private zeroLineY: number = 0;\n\n  private uplot: uPlot | null = null;\n  private resizeObserver: ResizeObserver | null = null;\n\n  private getCssColor(name: string) {\n    const color = getComputedStyle(this).getPropertyValue(name).trim();\n    return color;\n  }\n\n  override firstUpdated() {\n    const opts = {\n      width: this.chart.clientWidth,\n      height: this.chart.clientHeight,\n      scales: {\n        x: {time: false, show: false},\n        y: {\n          auto: true,\n          show: false,\n          range: this._range.bind(this),\n        },\n      },\n      series: [\n        {},\n        {\n          stroke: this._getStrokeColor(),\n          width: this._getStrokeWidth(),\n          points: {show: false},\n        },\n      ],\n      axes: [\n        {show: false},\n        {ticks: {show: false}, show: false, grid: {show: false}},\n      ],\n      legend: {show: false},\n      cursor: {show: false},\n    };\n\n    this.uplot = new uPlot(opts, this.data, this.chart);\n    requestAnimationFrame(() => this.updateY());\n\n    this.resizeObserver = new ResizeObserver(() => this.updateSize());\n    this.resizeObserver.observe(this.chart);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = null;\n    this.uplot?.destroy();\n    this.uplot = null;\n  }\n\n  private updateSize() {\n    if (!this.uplot) {\n      return;\n    }\n    this.uplot.setSize({\n      width: this.chart.clientWidth,\n      height: this.chart.clientHeight,\n    });\n    this.updateY();\n  }\n\n  private _range(\n    _self: uPlot,\n    initMin: number,\n    initMax: number,\n    _scaleKey: string\n  ): [number, number] {\n    const {min: minY, max: maxY} = this.layout.y ?? {};\n    const range = maxY ?? initMax - (minY ?? initMin);\n    let min = minY ?? initMin - range * 0.1;\n    if (minY === undefined) {\n      min = Math.min(0, min);\n    }\n    return [min, maxY ?? initMax + range * 0.1] as [number, number];\n  }\n\n  private get _effectiveSize() {\n    return this.layout.size ?? ObcIndicatorGraphSize.medium;\n  }\n\n  private get _effectivePriority() {\n    return this.layout.priority ?? ObcIndicatorGraphPriority.regular;\n  }\n\n  private _getStrokeWidth() {\n    switch (this._effectiveSize) {\n      case ObcIndicatorGraphSize.small:\n        return 1;\n      case ObcIndicatorGraphSize.medium:\n        return 1.5;\n      case ObcIndicatorGraphSize.large:\n        return 2;\n    }\n  }\n\n  private _getStrokeColor() {\n    switch (this._effectivePriority) {\n      case ObcIndicatorGraphPriority.regular:\n        return this.getCssColor('--element-neutral-color');\n      case ObcIndicatorGraphPriority.enhanced:\n        return this.getCssColor('--element-neutral-enhanced-color');\n    }\n  }\n\n  updatePalette() {\n    if (!this.uplot) {\n      return;\n    }\n    const stroke = this._getStrokeColor();\n    this.uplot.setSeries(1, {\n      // @ts-expect-error - stroke is not a property of the Series interface\n      stroke: stroke,\n      width: this._getStrokeWidth(),\n      points: {show: false},\n    });\n  }\n\n  private updateY() {\n    if (!this.uplot) {\n      return;\n    }\n    const lastY = this.data[1][this.data[1].length - 1];\n    // @ts-expect-error - valToPct is not a property of the Scale interface\n    const yRatio = this.uplot.scales.y.valToPct(lastY);\n    this.y = yRatio * this.chart.clientHeight;\n    this.updateZeroLine();\n  }\n\n  private updateZeroLine() {\n    if (!this.uplot) {\n      return;\n    }\n    // @ts-expect-error - valToPct is not a property of the Scale interface\n    const yRatio = this.uplot.scales.y.valToPct(0);\n    this.zeroLineY = yRatio * this.chart.clientHeight;\n  }\n\n  override updated(changedProperties: PropertyValues) {\n    if (changedProperties.has('data') || changedProperties.has('layout')) {\n      this.updatePalette();\n      this.uplot?.setData(this.data);\n      requestAnimationFrame(() => this.updateY());\n    }\n  }\n\n  override render() {\n    return html`\n      <div\n        class=\"chart-container ${this._effectivePriority} ${this\n          ._effectiveSize}\"\n      >\n        <div\n          id=\"zero-line\"\n          style=\"transform: translateY(${-this.zeroLineY}px);\n          display: ${this.zeroLineY > -0.5 ? 'block' : 'none'};\n          \"\n        ></div>\n        <div\n          id=\"dot\"\n          style=\"transform: translateY(${-this.y}px);\n        display: ${this.y > -0.5 ? 'block' : 'none'};\n        \"\n        ></div>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-indicator-graph': ObcIndicatorGraph;\n  }\n}\n"],"names":["ObcIndicatorGraphSize","ObcIndicatorGraphPriority"],"mappings":";;;;;;;;;;;;;;;AAMO,IAAK,0CAAAA,2BAAL;AACLA,yBAAA,OAAA,IAAQ;AACRA,yBAAA,QAAA,IAAS;AACTA,yBAAA,OAAA,IAAQ;AAHE,SAAAA;AAAA,GAAA,yBAAA,CAAA,CAAA;AAML,IAAK,8CAAAC,+BAAL;AACLA,6BAAA,SAAA,IAAU;AACVA,6BAAA,UAAA,IAAW;AAFD,SAAAA;AAAA,GAAA,6BAAA,CAAA,CAAA;AAkBL,IAAM,oBAAN,cAAgC,WAAW;AAAA,EAA3C,cAAA;AAAA,UAAA,GAAA,SAAA;AAEL,SAAA,OAA6B,CAAC,CAAA,GAAI,EAAE;AAGpC,SAAA,SAAkC,CAAA;AAMlC,SAAQ,IAAY;AAGpB,SAAQ,YAAoB;AAE5B,SAAQ,QAAsB;AAC9B,SAAQ,iBAAwC;AAAA,EAAA;AAAA,EAExC,YAAY,MAAc;AAChC,UAAM,QAAQ,iBAAiB,IAAI,EAAE,iBAAiB,IAAI,EAAE,KAAA;AAC5D,WAAO;AAAA,EACT;AAAA,EAES,eAAe;AACtB,UAAM,OAAO;AAAA,MACX,OAAO,KAAK,MAAM;AAAA,MAClB,QAAQ,KAAK,MAAM;AAAA,MACnB,QAAQ;AAAA,QACN,GAAG,EAAC,MAAM,OAAO,MAAM,MAAA;AAAA,QACvB,GAAG;AAAA,UACD,MAAM;AAAA,UACN,MAAM;AAAA,UACN,OAAO,KAAK,OAAO,KAAK,IAAI;AAAA,QAAA;AAAA,MAC9B;AAAA,MAEF,QAAQ;AAAA,QACN,CAAA;AAAA,QACA;AAAA,UACE,QAAQ,KAAK,gBAAA;AAAA,UACb,OAAO,KAAK,gBAAA;AAAA,UACZ,QAAQ,EAAC,MAAM,MAAA;AAAA,QAAK;AAAA,MACtB;AAAA,MAEF,MAAM;AAAA,QACJ,EAAC,MAAM,MAAA;AAAA,QACP,EAAC,OAAO,EAAC,MAAM,MAAA,GAAQ,MAAM,OAAO,MAAM,EAAC,MAAM,MAAA,EAAK;AAAA,MAAC;AAAA,MAEzD,QAAQ,EAAC,MAAM,MAAA;AAAA,MACf,QAAQ,EAAC,MAAM,MAAA;AAAA,IAAK;AAGtB,SAAK,QAAQ,IAAI,MAAM,MAAM,KAAK,MAAM,KAAK,KAAK;AAClD,0BAAsB,MAAM,KAAK,SAAS;AAE1C,SAAK,iBAAiB,IAAI,eAAe,MAAM,KAAK,YAAY;AAChE,SAAK,eAAe,QAAQ,KAAK,KAAK;AAAA,EACxC;AAAA,EAES,uBAAuB;AAC9B,UAAM,qBAAA;AACN,SAAK,gBAAgB,WAAA;AACrB,SAAK,iBAAiB;AACtB,SAAK,OAAO,QAAA;AACZ,SAAK,QAAQ;AAAA,EACf;AAAA,EAEQ,aAAa;AACnB,QAAI,CAAC,KAAK,OAAO;AACf;AAAA,IACF;AACA,SAAK,MAAM,QAAQ;AAAA,MACjB,OAAO,KAAK,MAAM;AAAA,MAClB,QAAQ,KAAK,MAAM;AAAA,IAAA,CACpB;AACD,SAAK,QAAA;AAAA,EACP;AAAA,EAEQ,OACN,OACA,SACA,SACA,WACkB;AAClB,UAAM,EAAC,KAAK,MAAM,KAAK,SAAQ,KAAK,OAAO,KAAK,CAAA;AAChD,UAAM,QAAQ,QAAQ,WAAW,QAAQ;AACzC,QAAI,MAAM,QAAQ,UAAU,QAAQ;AACpC,QAAI,SAAS,QAAW;AACtB,YAAM,KAAK,IAAI,GAAG,GAAG;AAAA,IACvB;AACA,WAAO,CAAC,KAAK,QAAQ,UAAU,QAAQ,GAAG;AAAA,EAC5C;AAAA,EAEA,IAAY,iBAAiB;AAC3B,WAAO,KAAK,OAAO,QAAQ;AAAA,EAC7B;AAAA,EAEA,IAAY,qBAAqB;AAC/B,WAAO,KAAK,OAAO,YAAY;AAAA,EACjC;AAAA,EAEQ,kBAAkB;AACxB,YAAQ,KAAK,gBAAA;AAAA,MACX,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,IAAA;AAAA,EAEb;AAAA,EAEQ,kBAAkB;AACxB,YAAQ,KAAK,oBAAA;AAAA,MACX,KAAK;AACH,eAAO,KAAK,YAAY,yBAAyB;AAAA,MACnD,KAAK;AACH,eAAO,KAAK,YAAY,kCAAkC;AAAA,IAAA;AAAA,EAEhE;AAAA,EAEA,gBAAgB;AACd,QAAI,CAAC,KAAK,OAAO;AACf;AAAA,IACF;AACA,UAAM,SAAS,KAAK,gBAAA;AACpB,SAAK,MAAM,UAAU,GAAG;AAAA;AAAA,MAEtB;AAAA,MACA,OAAO,KAAK,gBAAA;AAAA,MACZ,QAAQ,EAAC,MAAM,MAAA;AAAA,IAAK,CACrB;AAAA,EACH;AAAA,EAEQ,UAAU;AAChB,QAAI,CAAC,KAAK,OAAO;AACf;AAAA,IACF;AACA,UAAM,QAAQ,KAAK,KAAK,CAAC,EAAE,KAAK,KAAK,CAAC,EAAE,SAAS,CAAC;AAElD,UAAM,SAAS,KAAK,MAAM,OAAO,EAAE,SAAS,KAAK;AACjD,SAAK,IAAI,SAAS,KAAK,MAAM;AAC7B,SAAK,eAAA;AAAA,EACP;AAAA,EAEQ,iBAAiB;AACvB,QAAI,CAAC,KAAK,OAAO;AACf;AAAA,IACF;AAEA,UAAM,SAAS,KAAK,MAAM,OAAO,EAAE,SAAS,CAAC;AAC7C,SAAK,YAAY,SAAS,KAAK,MAAM;AAAA,EACvC;AAAA,EAES,QAAQ,mBAAmC;AAClD,QAAI,kBAAkB,IAAI,MAAM,KAAK,kBAAkB,IAAI,QAAQ,GAAG;AACpE,WAAK,cAAA;AACL,WAAK,OAAO,QAAQ,KAAK,IAAI;AAC7B,4BAAsB,MAAM,KAAK,SAAS;AAAA,IAC5C;AAAA,EACF;AAAA,EAES,SAAS;AAChB,WAAO;AAAA;AAAA,iCAEsB,KAAK,kBAAkB,IAAI,KACjD,cAAc;AAAA;AAAA;AAAA;AAAA,yCAIgB,CAAC,KAAK,SAAS;AAAA,qBACnC,KAAK,YAAY,OAAO,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,yCAKpB,CAAC,KAAK,CAAC;AAAA,mBAC7B,KAAK,IAAI,OAAO,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,EAKjD;AAGF;AAzLa,kBAwLK,SAAS,UAAU,YAAY;AAtL/C,gBAAA;AAAA,EADC,SAAS,EAAC,MAAM,MAAA,CAAM;AAAA,GADZ,kBAEX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAJb,kBAKX,WAAA,UAAA,CAAA;AAGQ,gBAAA;AAAA,EADP,MAAM,kBAAkB;AAAA,GAPd,kBAQH,WAAA,SAAA,CAAA;AAGA,gBAAA;AAAA,EADP,MAAA;AAAM,GAVI,kBAWH,WAAA,KAAA,CAAA;AAGA,gBAAA;AAAA,EADP,MAAA;AAAM,GAbI,kBAcH,WAAA,aAAA,CAAA;AAdG,oBAAN,gBAAA;AAAA,EADN,cAAc,qBAAqB;AAAA,GACvB,iBAAA;"}

package/docs/GettingStarted.mdx

@@ -2,23 +2,19 @@ import {Meta} from '@storybook/addon-docs/blocks';
 
 <Meta title="Introduction/Getting Started" />
 
-# Getting Started
+# 🚀 Project Status
 
-## Access Requirements
+**v1.0.0 is now released!** It has been an incredibly productive first year, with more than 200 components already
+implemented. The code was officially opened by **Prince Sverre Magnus of Norway** and is now publicly available,
+marking our first stable milestone.
 
-> **Note:** Access to the OpenBridge Web Components library is currently restricted to JIP partners and donors until the public release in March 2026. To gain access, you must join the project as a partner or donor. [Register your interest here.](https://docs.google.com/forms/d/e/1FAIpQLSd2H7bbL_duBTMhHzjw7W52H9XXAiJ9A3sL7PsrfCTW_bNUhw/viewform)
+# Getting Started
 
 ## Installation
 
-To use the components in your project, you need access to the private package repository. Once you have access:
+The package is publicly available on [npm](https://www.npmjs.com/package/@oicl/openbridge-webcomponents) — no authentication required.
 
-1. **Create a GitHub personal access token** with `read:packages` permission. [Create token here.](https://github.com/settings/tokens/new)
-2. **Login to the GitHub package registry:**
-   ```bash
-   npm login --registry https://npm.pkg.github.com/ --scope=@oicl
-   ```
-   Use your GitHub username and the generated token as password.
-3. **Install the package:**
+1. **Install the package:**
    ```bash
    npm install @oicl/openbridge-webcomponents
    ```
@@ -26,6 +22,11 @@ To use the components in your project, you need access to the private package re
    ```bash
    npm install @oicl/openbridge-webcomponents-vue
    ```
+   React, Angular, and Svelte wrappers are published as `@oicl/openbridge-webcomponents-react`, `-ng`, and `-svelte`.
+
+2. **Choose a release channel:**
+   - The `latest` tag tracks the stable, production-ready releases (updated from the `stable` branch).
+   - The `next` tag tracks the active development releases (from the `develop` branch) and may include breaking changes. Install it with `npm install @oicl/openbridge-webcomponents@next`.
 
 ## Usage
 
@@ -71,4 +72,19 @@ To use the components in your project, you need access to the private package re
    <ObcTopBar></ObcTopBar>
    ```
 
-For more details, see the [README](../../readme.md) or visit the [OpenBridge Design System website](https://www.openbridge.no/).
+## Licensing Model
+
+The project will **always remain open source**, but with the 1.0.0 release it has transitioned to a new licensing system. Each release — based on both the `develop` and `stable` branches — follows a "delayed" permissive license cycle:
+
+1. **Initial Release:** Each new version is licensed under **AGPL** for the first 6 months.
+2. **Transition:** After 6 months, the license for that specific version automatically switches to **Apache 2.0**.
+3. **Supporter Access:** Project donors and sponsors receive **immediate access** to the code under the **Apache 2.0** license.
+
+> **Example:**
+> If version 1.2.2 is released on **August 14, 2026**:
+>
+> - **open-source projects and internal users** can use it immediately under AGPL.
+> - **donors** can use it immediately under **Apache 2.0**.
+> - From **February 14, 2027**, version 1.2.2 becomes available to everyone under the **Apache 2.0** license (e.g., for commercial use without AGPL restrictions).
+
+For more details visit the [OpenBridge Design System website](https://www.openbridge.no/).

package/package.json

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

package/src/automation/automation-button/automation-button.css

@@ -219,18 +219,18 @@
 }
 
 .state-closed .icon-holder {
-  border-color: var(--automation-pipe-tertiary-inverted-color);
-  background: var(--automation-pipe-primary-inverted-color);
-
-  .static & {
-    border-color: var(--automation-pipe-secondary-color);
-    background: var(--automation-pipe-primary-inverted-color);
-  }
+  border-color: var(--automation-button-off-border-color);
+  background: var(--automation-button-off-background-color);
 }
 
 .state-open .icon-holder {
-  border-color: var(--automation-pipe-tertiary-color);
-  background: var(--automation-pipe-primary-color);
+  border-color: var(--on-border-color);
+  background: var(--on-background-color);
+}
+
+.static .icon-holder {
+  border-color: var(--automation-button-static-broder-color);
+  background: var(--automation-button-static-background-color);
 }
 
 .alert-frame {

package/src/automation/valve-analoge-two-way-icon/valve-analog-two-way-icon.ts

@@ -2,6 +2,7 @@ import {LitElement, html, svg, unsafeCSS} from 'lit';
 import {property} from 'lit/decorators.js';
 import compentStyle from './valve-analog-two-way-icon.css?inline';
 import {customElement} from '../../decorator.js';
+import '../../icons/icon-twoway-analog-closed.js';
 
 @customElement('obc-valve-analog-two-way-icon')
 export class ObcValveAnalogTwoWayIcon extends LitElement {
@@ -13,36 +14,16 @@ export class ObcValveAnalogTwoWayIcon extends LitElement {
     const transform = this.vertical ? 'transform: rotate(90deg);' : '';
     if (this.closed) {
       return html` <div class="wrapper" style="${transform}">
-        <svg
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M3 16.8892L10 12.8059V10.4546L3 6.37127V16.8892ZM11 9.88024V13.3802L2.75194 18.1916C2.41861 18.386 2 18.1456 2 17.7597V5.50075C2 5.11486 2.41861 4.87442 2.75193 5.06886L11 9.88024ZM21 16.8892V6.37127L14 10.4546V12.8059L21 16.8892ZM13 13.3802L21.2481 18.1916C21.5814 18.386 22 18.1456 22 17.7597V5.50075C22 5.11486 21.5814 4.87442 21.2481 5.06886L13 9.88024V13.3802ZM12 22.6301C11.4477 22.6301 11 22.1824 11 21.6301V15.6301C11 15.0778 11.4477 14.6301 12 14.6301C12.5523 14.6301 13 15.0778 13 15.6301V21.6301C13 22.1824 12.5523 22.6301 12 22.6301Z"
-            fill="var(--automation-device-secondary-color)"
-          />
-          <path
-            d="M10 12.8059L3 16.8892V6.37127L10 10.4546V12.8059Z"
-            fill="var(--automation-device-tertiary-color)"
-          />
-          <path
-            d="M21 6.37127V16.8892L14 12.8059V10.4546L21 6.37127Z"
-            fill="var(--automation-device-tertiary-color)"
-          />
-        </svg>
+        <obi-twoway-analog-closed useCssColor> </obi-twoway-analog-closed>
       </div>`;
     }
 
     const handleRotation = -(1 - this.value / 100) * 90;
+    const handleTranslation = (1 - this.value / 100) * 2;
     const handle = svg`
-      <g transform="rotate(${handleRotation} 12 18.5)">
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M9.49942 20.1303H14.4994C15.3278 20.1303 15.9994 19.4587 15.9994 18.6303C15.9994 17.8019 15.3278 17.1303 14.4994 17.1303H9.49942C8.67099 17.1303 7.99942 17.8019 7.99942 18.6303C7.99942 19.4587 8.67099 20.1303 9.49942 20.1303ZM9.49942 19.1303L14.4994 19.1303C14.7756 19.1303 14.9994 18.9064 14.9994 18.6303C14.9994 18.3542 14.7756 18.1303 14.4994 18.1303L9.49942 18.1303C9.22328 18.1303 8.99942 18.3542 8.99942 18.6303C8.99942 18.9064 9.22328 19.1303 9.49942 19.1303Z" fill="var(--automation-device-tertiary-color)"/>
-        <path d="M14.4994 19.1303L9.49942 19.1303C9.22328 19.1303 8.99942 18.9064 8.99942 18.6303C8.99942 18.3542 9.22328 18.1303 9.49942 18.1303L14.4994 18.1303C14.7756 18.1303 14.9994 18.3542 14.9994 18.6303C14.9994 18.9064 14.7756 19.1303 14.4994 19.1303Z" fill="var(--automation-device-primary-color)"/>
+      <g transform="translate(0, ${handleTranslation}) rotate(${handleRotation} 12 3.5) ">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 5H14.5C15.3284 5 16 4.32843 16 3.5C16 2.67157 15.3284 2 14.5 2H9.5C8.67157 2 8 2.67157 8 3.5C8 4.32843 8.67157 5 9.5 5ZM9.5 4L14.5 4C14.7761 4 15 3.77614 15 3.5C15 3.22386 14.7761 3 14.5 3L9.5 3C9.22386 3 9 3.22386 9 3.5C9 3.77614 9.22386 4 9.5 4Z" fill="var(--automation-device-tertiary-color)"/>
+        <path d="M9.5 4L14.5 4C14.7761 4 15 3.77614 15 3.5C15 3.22386 14.7761 3 14.5 3L9.5 3C9.22386 3 9 3.22386 9 3.5C9 3.77614 9.22386 4 9.5 4Z" fill="var(--automation-device-primary-color)"/>
       </g>
     `;
 
@@ -60,11 +41,11 @@ export class ObcValveAnalogTwoWayIcon extends LitElement {
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M2 5.50075V17.7597C2 18.1456 2.41861 18.386 2.75194 18.1916L10.5714 13.6302H13.4286L21.2481 18.1916C21.5814 18.386 22 18.1456 22 17.7597V5.50075C22 5.11486 21.5814 4.87442 21.2481 5.06886L13.4286 9.63024H10.5714L2.75193 5.06886C2.41861 4.87442 2 5.11486 2 5.50075Z"
+            d="M11 11L3.5547 6.03645C2.89015 5.59342 2 6.06981 2 6.8685V19.1315C2 19.9302 2.89015 20.4066 3.5547 19.9635L11 15H13L20.4453 19.9635C21.1099 20.4066 22 19.9302 22 19.1315V6.8685C22 6.06981 21.1099 5.59342 20.4453 6.03645L13 11H11ZM3 6.8685L3 19.1315L10.6972 14H13.3028L21 19.1315V6.8685L13.3028 12H10.6972L3 6.8685Z"
             fill="var(--automation-device-tertiary-color)"
           />
           <path
-            d="M3 6.3712V16.8891L10.3011 12.6302H13.6989L21 16.8891V6.3712L13.6989 10.6302H10.3011L3 6.3712Z"
+            d="M10.6972 12H13.3028L21 6.8685V19.1315L13.3028 14H10.6972L3 19.1315V6.8685L10.6972 12Z"
             fill="var(--automation-device-primary-color)"
           />
           ${handle}
@@ -104,7 +85,7 @@ export class ObcValveAnalogTwoWayIcon extends LitElement {
           <defs>
             <clipPath id="clip0">
               <path
-                d="M3 6.3712V16.8891L10.3011 12.6302H13.6989L21 16.8891V6.3712L13.6989 10.6302H10.3011L3 6.3712Z"
+                d="M10.6972 12H13.3028L21 6.8685V19.1315L13.3028 14H10.6972L3 19.1315V6.8685L10.6972 12Z"
               />
             </clipPath>
           </defs>

package/src/components/accordion-card/accordion-card.css

@@ -158,7 +158,7 @@
 
     .label-description {
       @mixin font-label;
-      flex: 1 0 0;
+      flex: 0 0 auto;
       width: 100%;
       overflow: hidden;
       color: var(--element-neutral-color);

package/src/components/dropdown-button/dropdown-button.stories.ts

@@ -25,6 +25,12 @@ const meta: Meta<ObcDropdownButton> = {
     openTop: {
       control: 'boolean',
     },
+    allowEmptySelection: {
+      control: 'boolean',
+    },
+    placeholder: {
+      control: 'text',
+    },
   },
   args: {
     options: [
@@ -171,3 +177,19 @@ export const DisabledWithIcon: Story = {
     </obc-dropdown-button>
   `,
 };
+
+export const EmptySelection: Story = {
+  args: {
+    value: 'none',
+    allowEmptySelection: true,
+    placeholder: 'Select a brand',
+  },
+  render: (args) => html`
+    <obc-dropdown-button
+      .options=${args.options}
+      .value=${args.value}
+      .allowEmptySelection=${args.allowEmptySelection}
+      .placeholder=${args.placeholder}
+    ></obc-dropdown-button>
+  `,
+};

package/src/components/dropdown-button/dropdown-button.ts

@@ -49,6 +49,8 @@ export type DropdownButtonOption = {
  * - `options` (Array): List of selectable options, each with a `value` (string), `label` (string), and optional `level` (number) for indentation.
  * - `value` (string): The currently selected option's value. If not set, defaults to the first option.
  * - `fullWidth` (boolean): Expands the component to fill its container when true. Default is false.
+ * - `allowEmptySelection` (boolean): When true, a `value` that does not match any option leaves the button with no option selected, showing `placeholder` instead of defaulting to the first option. Default is false.
+ * - `placeholder` (string): Text shown when nothing is selected and `allowEmptySelection` is true. Default is an empty string.
  *
  * ### Events
  * - `dropdown-change` – Fired when the user selects a different option. The event detail includes `{ value, label }` of the selected option.
@@ -102,6 +104,17 @@ export class ObcDropdownButton extends LitElement {
    */
   @property({type: Boolean}) fullWidth = false;
 
+  /**
+   * If true, a `value` that does not match any option leaves the button with no option selected,
+   * showing `placeholder` instead of defaulting to the first option. Default is false.
+   */
+  @property({type: Boolean}) allowEmptySelection = false;
+
+  /**
+   * Text shown when nothing is selected and `allowEmptySelection` is true. Default is an empty string.
+   */
+  @property({type: String}) placeholder = '';
+
   /**
    * Controls the button's display type.
    * - `label`: Text label only (default)
@@ -142,10 +155,21 @@ export class ObcDropdownButton extends LitElement {
       this.selectedLabel = '';
       return;
     }
-    this.selectedValue = this.value || this.options[0].value;
-    this.selectedLabel = this.value
-      ? this.options.find((item) => item.value === this.value)?.label || ''
-      : this.options[0].label;
+    const match = this.value
+      ? this.options.find((item) => item.value === this.value)
+      : undefined;
+    if (match) {
+      this.selectedValue = match.value;
+      this.selectedLabel = match.label;
+      return;
+    }
+    if (this.allowEmptySelection) {
+      this.selectedValue = '';
+      this.selectedLabel = this.placeholder;
+      return;
+    }
+    this.selectedValue = this.options[0].value;
+    this.selectedLabel = this.options[0].label;
   }
 
   override render() {
@@ -172,6 +196,11 @@ export class ObcDropdownButton extends LitElement {
           </div>
         </div>
         <select @change=${this.changeHandler} ?disabled=${this.disabled}>
+          ${this.allowEmptySelection && this.selectedValue === ''
+            ? html`<option value="" disabled selected hidden>
+                ${this.placeholder}
+              </option>`
+            : nothing}
           ${this.options.map((item) => {
             const indent = item.level ? (item.level - 1) * 2 : 0;
             const indentText = [];

package/src/components/keyboard-numeric/keyboard-numeric.ts

@@ -79,6 +79,10 @@ const ALLOWED_CHARS = [
 
 const OPERATORS = ['+', '-', '–', '×', '÷', '*', '/'];
 
+const ALLOWED_CHARS_PATTERN = `^[${ALLOWED_CHARS.map((c) =>
+  c.replace(/[-.*+?^${}()|[\]\\]/g, '\\$&')
+).join('')}]*$`;
+
 @customElement('obc-keyboard-numeric')
 export class ObcKeyboardNumeric extends LitElement {
   @property({type: String}) type: ObcKeyboardNumericType =
@@ -118,6 +122,13 @@ export class ObcKeyboardNumeric extends LitElement {
   @state() private content: ObcKeyboardNumericContent =
     ObcKeyboardNumericContent.Numbers;
 
+  private get effectiveValidationPattern(): string {
+    if (!this.validationPattern) {
+      return ALLOWED_CHARS_PATTERN;
+    }
+    return `^(?=${ALLOWED_CHARS_PATTERN})(?=${this.validationPattern}).*$`;
+  }
+
   /** Validates if a character can be added to the current value */
   private canAddCharacter(char: string): boolean {
     const potentialValue = this.value + char;
@@ -150,11 +161,6 @@ export class ObcKeyboardNumeric extends LitElement {
     return true;
   }
 
-  /** Validates that all characters in a value are allowed */
-  private isValidValue(value: string): boolean {
-    return [...value].every((char) => ALLOWED_CHARS.includes(char));
-  }
-
   private handleCloseClick() {
     this.dispatchEvent(
       new CustomEvent('close-click', {bubbles: true, composed: true})
@@ -254,19 +260,6 @@ export class ObcKeyboardNumeric extends LitElement {
     const input = e.target as ObcNumberInputField;
     const newValue = input.displayValue;
 
-    if (this.validationPattern && newValue) {
-      const regex = new RegExp(this.validationPattern);
-      if (!regex.test(newValue)) {
-        input.displayOverride = this.value;
-        return;
-      }
-    }
-
-    if (newValue && !this.isValidValue(newValue)) {
-      input.displayOverride = this.value;
-      return;
-    }
-
     this.value = newValue;
     this.dispatchValueChange();
   }
@@ -359,6 +352,7 @@ export class ObcKeyboardNumeric extends LitElement {
         .textAlign=${this.inputFieldTextAlign}
         .size=${ObcNumberInputFieldSize.Large}
         .helperText=${this.helperText}
+        .validationPattern=${this.effectiveValidationPattern}
         ?hasLeadingIcon=${this.hasLeadingIcon}
         placeholder="00.0"
         @input=${this.handleInput}

package/src/components/number-input-field/number-input-field.spec.ts

@@ -218,4 +218,138 @@ describe('obc-number-input-field', () => {
       expect(input.value).toBe('10.');
     });
   });
+
+  describe('beforeinput filtering', () => {
+    function dispatchBeforeInput(
+      target: HTMLInputElement,
+      data: string | null,
+      inputType = 'insertText'
+    ): InputEvent {
+      const event = new InputEvent('beforeinput', {
+        data,
+        inputType,
+        cancelable: true,
+        bubbles: true,
+      });
+      target.dispatchEvent(event);
+      return event;
+    }
+
+    beforeEach(async () => {
+      el.decimalSeparator = '.';
+      el.groupSeparator = ',';
+      input.focus();
+      input.value = '';
+      await el.updateComplete;
+    });
+
+    it('blocks letters', () => {
+      const event = dispatchBeforeInput(input, 'a');
+      expect(event.defaultPrevented).toBe(true);
+    });
+
+    it('blocks scientific notation', () => {
+      input.value = '1';
+      input.setSelectionRange(1, 1);
+      const event = dispatchBeforeInput(input, 'e');
+      expect(event.defaultPrevented).toBe(true);
+    });
+
+    it('blocks symbols', () => {
+      const event = dispatchBeforeInput(input, '!');
+      expect(event.defaultPrevented).toBe(true);
+    });
+
+    it('allows digits', () => {
+      const event = dispatchBeforeInput(input, '1');
+      expect(event.defaultPrevented).toBe(false);
+    });
+
+    it('allows decimal separator', () => {
+      const event = dispatchBeforeInput(input, '.');
+      expect(event.defaultPrevented).toBe(false);
+    });
+
+    it('allows comma when locale uses it', () => {
+      const event = dispatchBeforeInput(input, ',');
+      expect(event.defaultPrevented).toBe(false);
+    });
+
+    it('allows leading sign', () => {
+      const event = dispatchBeforeInput(input, '-');
+      expect(event.defaultPrevented).toBe(false);
+    });
+
+    it('allows deletions (null data)', () => {
+      input.value = '12';
+      input.setSelectionRange(2, 2);
+      const event = dispatchBeforeInput(input, null, 'deleteContentBackward');
+      expect(event.defaultPrevented).toBe(false);
+    });
+
+    it('blocks paste containing letters', () => {
+      const event = new InputEvent('beforeinput', {
+        data: null,
+        inputType: 'insertFromPaste',
+        cancelable: true,
+        bubbles: true,
+      });
+      const dt = new DataTransfer();
+      dt.setData('text/plain', '12abc34');
+      Object.defineProperty(event, 'dataTransfer', {value: dt});
+      input.dispatchEvent(event);
+      expect(event.defaultPrevented).toBe(true);
+    });
+
+    it('allows paste of numeric string with separators', () => {
+      const event = new InputEvent('beforeinput', {
+        data: null,
+        inputType: 'insertFromPaste',
+        cancelable: true,
+        bubbles: true,
+      });
+      const dt = new DataTransfer();
+      dt.setData('text/plain', '1,234.5');
+      Object.defineProperty(event, 'dataTransfer', {value: dt});
+      input.dispatchEvent(event);
+      expect(event.defaultPrevented).toBe(false);
+    });
+
+    it('honours custom decimalSeparator', async () => {
+      el.decimalSeparator = ',';
+      el.groupSeparator = ' ';
+      await el.updateComplete;
+
+      const dot = dispatchBeforeInput(input, '.');
+      expect(dot.defaultPrevented).toBe(true);
+
+      const comma = dispatchBeforeInput(input, ',');
+      expect(comma.defaultPrevented).toBe(false);
+    });
+
+    it('honours custom validationPattern', async () => {
+      el.validationPattern = '^[0-9]*$';
+      await el.updateComplete;
+
+      const minus = dispatchBeforeInput(input, '-');
+      expect(minus.defaultPrevented).toBe(true);
+
+      const digit = dispatchBeforeInput(input, '1');
+      expect(digit.defaultPrevented).toBe(false);
+    });
+
+    it('does not block when disabled', async () => {
+      el.disabled = true;
+      await el.updateComplete;
+      const event = dispatchBeforeInput(input, 'a');
+      expect(event.defaultPrevented).toBe(false);
+    });
+
+    it('does not block when readonly', async () => {
+      el.readonly = true;
+      await el.updateComplete;
+      const event = dispatchBeforeInput(input, 'a');
+      expect(event.defaultPrevented).toBe(false);
+    });
+  });
 });

package/src/components/number-input-field/number-input-field.ts

@@ -13,6 +13,7 @@ import {classMap} from 'lit/directives/class-map.js';
 import {customElement} from '../../decorator.js';
 import {
   formatNumberForDisplay,
+  isAllowedIntermediateInput,
   NumberInputFormatOptions,
   parseNumberInput,
   removeGroupingFromDisplay,
@@ -113,6 +114,14 @@ export class ObcNumberInputField extends LitElement {
   @property({type: Number}) minFractionDigits = 0;
   @property({type: Number}) maxFractionDigits?: number | undefined;
 
+  /**
+   * Optional regex pattern. When set, any keystroke or paste whose resulting
+   * value does not match this pattern is blocked at the `beforeinput` stage.
+   * When unset, a permissive numeric filter (digits, sign, active separators,
+   * whitespace) is applied instead.
+   */
+  @property({type: String}) validationPattern = '';
+
   @state() private hasFocus = false;
   @state() private displayText = '';
   @state() private previousValue = NaN;
@@ -150,6 +159,43 @@ export class ObcNumberInputField extends LitElement {
     this.dispatchInput();
   }
 
+  private isProjectedValueAllowed(projected: string): boolean {
+    if (this.validationPattern) {
+      let regex: RegExp;
+      try {
+        // Anchor the consumer pattern so it must match the whole projected
+        // value rather than any substring (e.g. `[0-9]` must not pass `a1`).
+        regex = new RegExp(`^(?:${this.validationPattern})$`);
+      } catch {
+        // Invalid pattern: fall back to the numeric filter instead of
+        // allowing arbitrary input.
+        return isAllowedIntermediateInput(projected, this.getFormatOptions());
+      }
+      return regex.test(projected);
+    }
+    return isAllowedIntermediateInput(projected, this.getFormatOptions());
+  }
+
+  private onBeforeInput(e: InputEvent) {
+    if (this.disabled || this.readonly) return;
+    const input = e.target as HTMLInputElement;
+
+    const incoming = e.data ?? e.dataTransfer?.getData('text/plain') ?? null;
+    // Deletions, history, and formatting (`insertLineBreak`, `historyUndo`,
+    // `deleteContentBackward`, etc.) have `data === null` and no transferable
+    // text — always allow them.
+    if (incoming === null) return;
+
+    const start = input.selectionStart ?? input.value.length;
+    const end = input.selectionEnd ?? input.value.length;
+    const projected =
+      input.value.slice(0, start) + incoming + input.value.slice(end);
+
+    if (!this.isProjectedValueAllowed(projected)) {
+      e.preventDefault();
+    }
+  }
+
   private onFocus() {
     this.hasFocus = true;
     const source = this.displayOverride || this.displayText;
@@ -444,6 +490,7 @@ export class ObcNumberInputField extends LitElement {
                   hasHelperOrError ? 'helper-text' : undefined
                 )}
                 autocomplete="off"
+                @beforeinput=${this.onBeforeInput}
                 @input=${this.onInput}
               />
               ${unitInside