@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.65 → 2.0.0-next.67

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

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

@@ -2,6 +2,7 @@ import {describe, it, expect} from 'vitest';
 import {
   formatNumberForDisplay,
   getLocaleNumberSeparators,
+  isAllowedIntermediateInput,
   parseNumberInput,
   removeGroupingFromDisplay,
   valuesEqual,
@@ -22,6 +23,17 @@ describe('parseNumberInput', () => {
     expect(parseNumberInput('10,')).toBe(10);
   });
 
+  it('parses grouped numbers with mixed separators', () => {
+    expect(parseNumberInput('1,234.5')).toBe(1234.5);
+    expect(parseNumberInput('1.234,5')).toBe(1234.5);
+    expect(parseNumberInput('1 234,5')).toBe(1234.5);
+    expect(parseNumberInput("1'234.5")).toBe(1234.5);
+  });
+
+  it('parses grouped integers', () => {
+    expect(parseNumberInput('1,234,567')).toBe(1234567);
+  });
+
   it('returns NaN for sign-only input', () => {
     expect(Number.isNaN(parseNumberInput('-'))).toBe(true);
     expect(Number.isNaN(parseNumberInput('+'))).toBe(true);
@@ -153,3 +165,53 @@ describe('valuesEqual', () => {
     expect(valuesEqual(1, 2)).toBe(false);
   });
 });
+
+describe('isAllowedIntermediateInput', () => {
+  const enUsOptions = {decimalSeparator: '.', groupSeparator: ','};
+
+  it('allows empty string', () => {
+    expect(isAllowedIntermediateInput('', enUsOptions)).toBe(true);
+  });
+
+  it('allows digits', () => {
+    expect(isAllowedIntermediateInput('123', enUsOptions)).toBe(true);
+  });
+
+  it('allows leading sign', () => {
+    expect(isAllowedIntermediateInput('-', enUsOptions)).toBe(true);
+    expect(isAllowedIntermediateInput('+12.5', enUsOptions)).toBe(true);
+  });
+
+  it('allows trailing decimal separator', () => {
+    expect(isAllowedIntermediateInput('10.', enUsOptions)).toBe(true);
+    expect(isAllowedIntermediateInput(',5', enUsOptions)).toBe(true);
+  });
+
+  it('allows grouped numbers with default separators', () => {
+    expect(isAllowedIntermediateInput('1,234.5', enUsOptions)).toBe(true);
+  });
+
+  it('rejects letters', () => {
+    expect(isAllowedIntermediateInput('12a')).toBe(false);
+    expect(isAllowedIntermediateInput('e')).toBe(false);
+  });
+
+  it('rejects symbols outside the allowed set', () => {
+    expect(isAllowedIntermediateInput('12!')).toBe(false);
+    expect(isAllowedIntermediateInput('12$')).toBe(false);
+  });
+
+  it('rejects sign in non-leading position', () => {
+    expect(isAllowedIntermediateInput('1-2')).toBe(false);
+  });
+
+  it('honours custom decimal separator', () => {
+    const opts = {decimalSeparator: ',', groupSeparator: ' '};
+    expect(isAllowedIntermediateInput('1 234,5', opts)).toBe(true);
+    expect(isAllowedIntermediateInput('1,234.5', opts)).toBe(false);
+  });
+
+  it('allows whitespace', () => {
+    expect(isAllowedIntermediateInput(' 12 ')).toBe(true);
+  });
+});

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

@@ -26,12 +26,69 @@ export function parseNumberInput(display: string): number {
     return NaN;
   }
 
-  const normalized = trimmed.replace(',', '.');
+  // Drop whitespace and apostrophe grouping that may appear in pasted or
+  // locale-formatted numbers (e.g. `1 234`, `1'234`).
+  let normalized = trimmed.replace(/[\s']/g, '');
+
+  const commaCount = (normalized.match(/,/g) ?? []).length;
+  const dotCount = (normalized.match(/\./g) ?? []).length;
+
+  if (commaCount > 0 && dotCount > 0) {
+    // Both separators present: the right-most one is the decimal separator,
+    // the other is a grouping separator.
+    const decimalSeparator =
+      normalized.lastIndexOf(',') > normalized.lastIndexOf('.') ? ',' : '.';
+    const groupSeparator = decimalSeparator === ',' ? '.' : ',';
+    normalized = normalized.split(groupSeparator).join('');
+    normalized = normalized.replace(decimalSeparator, '.');
+  } else if (commaCount > 1) {
+    // Multiple commas without a dot can only be grouping separators.
+    normalized = normalized.split(',').join('');
+  } else if (commaCount === 1) {
+    // A single comma is treated as the decimal separator.
+    normalized = normalized.replace(',', '.');
+  } else if (dotCount > 1) {
+    // Multiple dots without a comma can only be grouping separators.
+    normalized = normalized.split('.').join('');
+  }
 
   const n = Number(normalized);
   return Number.isFinite(n) ? n : NaN;
 }
 
+function escapeRegex(value: string): string {
+  return value.replace(/[-.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+/**
+ * Permissive per-keystroke validator used to reject non-numeric characters
+ * before they reach the input. Allows half-typed states like `10.`, `-`, `,5`,
+ * `1,234.`; final correctness is enforced by `parseNumberInput` at commit.
+ *
+ * Accepts: optional leading sign, digits, the active decimal separator,
+ * the active group separator, and whitespace.
+ */
+export function isAllowedIntermediateInput(
+  value: string,
+  options: NumberInputFormatOptions = {}
+): boolean {
+  if (value === '') return true;
+
+  const localeSeparators = getLocaleNumberSeparators();
+  const decimalSeparator =
+    options.decimalSeparator ?? localeSeparators.decimalSeparator;
+  const groupSeparator =
+    options.groupSeparator ?? localeSeparators.groupSeparator;
+
+  const allowedChars = new Set<string>([decimalSeparator]);
+  if (groupSeparator) {
+    allowedChars.add(groupSeparator);
+  }
+  const allowedClass = [...allowedChars].map(escapeRegex).join('') + '0-9 \\t';
+  const pattern = new RegExp(`^[+\\-]?[${allowedClass}]*$`);
+  return pattern.test(value);
+}
+
 function clampFractionDigits(
   minFractionDigits: number | undefined,
   maxFractionDigits: number | undefined
@@ -110,7 +167,7 @@ export function removeGroupingFromDisplay(
     return display;
   }
 
-  const escaped = groupSeparator.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const escaped = escapeRegex(groupSeparator);
   return display.replace(new RegExp(escaped, 'g'), '');
 }
 

package/src/components/stepper-box/stepper-box.css

@@ -41,9 +41,3 @@
 :host([disabled]) .helper-text {
   color: var(--element-disabled-color);
 }
-
-:host([disabled]) .field-wrapper.has-unit-slot .unit-slot {
-  color: var(--on-normal-disabled-color);
-  border-color: var(--normal-disabled-border-color);
-  background: var(--normal-disabled-background-color);
-}