le-kit 0.5.1 → 0.5.3

package/dist/collection/components/le-number-input/le-number-input.js

@@ -16,72 +16,95 @@ import { classnames } from "../../utils/utils";
  * @cssprop --le-input-padding - Input padding
  */
 export class LeNumberInput {
-    el;
-    /**
-     * The value of the input
-     */
-    value;
-    /**
-     * The name of the input
-     */
-    name;
-    /**
-     * Label for the input
-     */
-    label;
-    /**
-     * Placeholder text
-     */
-    placeholder;
-    /**
-     * Minimum allowed value
-     */
-    min;
-    /**
-     * Maximum allowed value
-     */
-    max;
-    /**
-     * Step value for increment/decrement
-     */
-    step = 1;
-    /**
-     * Whether the input is required
-     */
-    required = false;
-    /**
-     * Whether the input is disabled
-     */
-    disabled = false;
-    /**
-     * Whether the input is read-only
-     */
-    readonly = false;
-    /**
-     * Icon for the start icon
-     */
-    iconStart;
-    /**
-     * Whether to show the spinner controls
-     */
-    showSpinners = true;
-    /**
-     * External ID for linking with external systems
-     */
-    externalId;
-    /**
-     * Internal validation state
-     */
-    isValid = true;
-    validationMessage = '';
-    /**
-     * Emitted when the value changes (on blur or Enter)
-     */
-    leChange;
-    /**
-     * Emitted when the input value changes (on keystroke/spin)
-     */
-    leInput;
+    constructor() {
+        /**
+         * Step value for increment/decrement
+         */
+        this.step = 1;
+        /**
+         * Whether the input is required
+         */
+        this.required = false;
+        /**
+         * Whether the input is disabled
+         */
+        this.disabled = false;
+        /**
+         * Whether the input is read-only
+         */
+        this.readonly = false;
+        /**
+         * Whether to show the spinner controls
+         */
+        this.showSpinners = true;
+        /**
+         * Internal validation state
+         */
+        this.isValid = true;
+        this.validationMessage = '';
+        this.handleInput = (ev) => {
+            const input = ev.target;
+            const val = parseFloat(input.value);
+            if (input.value === '') {
+                this.value = undefined;
+            }
+            else if (!isNaN(val)) {
+                this.value = val;
+            }
+            this.validate();
+            this.emitInput();
+        };
+        this.handleChange = () => {
+            this.validate();
+            this.emitChange();
+        };
+        this.handleKeyDown = (ev) => {
+            if (this.disabled || this.readonly)
+                return;
+            let multiplier = 1;
+            if (ev.shiftKey)
+                multiplier = 10;
+            if (ev.altKey)
+                multiplier = 0.1;
+            const current = this.value || 0;
+            if (ev.key === 'ArrowUp') {
+                ev.preventDefault();
+                this.updateValue(current + (this.step * multiplier));
+            }
+            else if (ev.key === 'ArrowDown') {
+                ev.preventDefault();
+                this.updateValue(current - (this.step * multiplier));
+            }
+        };
+        this.handleWheel = (ev) => {
+            if (this.disabled || this.readonly)
+                return;
+            // Only handle if input is focused to prevent accidental scrolling
+            if (document.activeElement !== ev.target)
+                return;
+            ev.preventDefault();
+            const current = this.value || 0;
+            if (ev.deltaY < 0) {
+                this.updateValue(current + this.step);
+            }
+            else {
+                this.updateValue(current - this.step);
+            }
+        };
+        this.increment = (ev) => {
+            ev.preventDefault(); // Prevent focus loss
+            const current = this.value || 0;
+            this.updateValue(current + this.step);
+            // Trigger change event for buttons as they are "final" actions usually
+            this.emitChange();
+        };
+        this.decrement = (ev) => {
+            ev.preventDefault();
+            const current = this.value || 0;
+            this.updateValue(current - this.step);
+            this.emitChange();
+        };
+    }
     valueChanged() {
         this.validate();
     }
@@ -132,70 +155,8 @@ export class LeNumberInput {
         this.validate();
         this.emitInput();
     }
-    handleInput = (ev) => {
-        const input = ev.target;
-        const val = parseFloat(input.value);
-        if (input.value === '') {
-            this.value = undefined;
-        }
-        else if (!isNaN(val)) {
-            this.value = val;
-        }
-        this.validate();
-        this.emitInput();
-    };
-    handleChange = () => {
-        this.validate();
-        this.emitChange();
-    };
-    handleKeyDown = (ev) => {
-        if (this.disabled || this.readonly)
-            return;
-        let multiplier = 1;
-        if (ev.shiftKey)
-            multiplier = 10;
-        if (ev.altKey)
-            multiplier = 0.1;
-        const current = this.value || 0;
-        if (ev.key === 'ArrowUp') {
-            ev.preventDefault();
-            this.updateValue(current + (this.step * multiplier));
-        }
-        else if (ev.key === 'ArrowDown') {
-            ev.preventDefault();
-            this.updateValue(current - (this.step * multiplier));
-        }
-    };
-    handleWheel = (ev) => {
-        if (this.disabled || this.readonly)
-            return;
-        // Only handle if input is focused to prevent accidental scrolling
-        if (document.activeElement !== ev.target)
-            return;
-        ev.preventDefault();
-        const current = this.value || 0;
-        if (ev.deltaY < 0) {
-            this.updateValue(current + this.step);
-        }
-        else {
-            this.updateValue(current - this.step);
-        }
-    };
-    increment = (ev) => {
-        ev.preventDefault(); // Prevent focus loss
-        const current = this.value || 0;
-        this.updateValue(current + this.step);
-        // Trigger change event for buttons as they are "final" actions usually
-        this.emitChange();
-    };
-    decrement = (ev) => {
-        ev.preventDefault();
-        const current = this.value || 0;
-        this.updateValue(current - this.step);
-        this.emitChange();
-    };
     render() {
-        return (h("le-component", { key: '38670cabc16dd9a966a5f430e1d4d5e2fc618744', component: "le-number-input", hostClass: classnames({ 'disabled': this.disabled }) }, h("div", { key: '473450ef637fa744c7a83416beabd87fe9540436', class: "le-input-wrapper" }, this.label && (h("label", { key: 'c74d4166c1925f02c743dc1250b574a679415ae8', class: "le-input-label", htmlFor: this.name }, this.label)), h("div", { key: '9066bfe0737700717bf902f46a6a6fa51b22a3a1', class: classnames('le-input-container', { 'has-error': !this.isValid }) }, this.iconStart && (h("span", { key: 'dcabeda7256fc25dc8bacd4ecbd2cc2941ea02d7', class: "icon-start" }, this.iconStart)), h("input", { key: '85d9040a37f4f5cf5c8c403dd58a3b1e9947d21d', id: this.name, type: "number", name: this.name, placeholder: this.placeholder, min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onKeyDown: this.handleKeyDown, onWheel: this.handleWheel }), this.showSpinners && (h("div", { key: '9a197fc41798ff09b5618f5fb901b51ca2581d28', class: "le-input-controls" }, h("le-button", { key: '8befc86b373c03417ba87110d4092c8f6bf2f19c', mode: "default", variant: "clear", size: "small", "icon-only": true, class: "le-input-control-btn", onClick: this.increment, disabled: this.disabled || this.readonly || (this.max !== undefined && this.value >= this.max), tabindex: "-1" }, h("span", { key: '70b53c26b9e061cd747bd1ccaa39d14c4ac69b68', slot: "icon-only" }, "\u2191")), h("le-button", { key: '3f9f65048977127cc2faaf911b9db6861005e17d', mode: "default", variant: "clear", size: "small", "icon-only": true, class: "le-input-control-btn", onClick: this.decrement, disabled: this.disabled || this.readonly || (this.min !== undefined && this.value <= this.min), tabindex: "-1" }, h("span", { key: 'ecbdfd9a72b357b1daca7be54ba5188795a44929', slot: "icon-only" }, "\u2193"))))), !this.isValid && h("div", { key: '41b7315c03d7caba36a535375e6a4774f9ff82b9', class: "le-input-error" }, this.validationMessage), h("div", { key: '3eda10b4e02add4dd780f6b51b5fd9565882dba8', class: "le-input-description" }, h("le-slot", { key: '7f9d9e5299dde3bc2f003687830f6d26d9f234b1', name: "description", type: "text", tag: "p", label: "Description" }, h("slot", { key: 'a80e340b5ba3c4b84e6d684156ccdfae106d6fc0', name: "description" }))))));
+        return (h("le-component", { key: '3448b68633e7ebde8e6175f29047791c9094dc49', component: "le-number-input", hostClass: classnames({ 'disabled': this.disabled }) }, h("div", { key: 'd941698c42e2dd9a5b2dbe60decfa9692c840c1a', class: "le-input-wrapper" }, this.label && (h("label", { key: 'c2b255bf365937e2233835ef6564b81f8a1872a5', class: "le-input-label", htmlFor: this.name }, this.label)), h("div", { key: '6090fe6737015bc1cd87ef881276975870e6797c', class: classnames('le-input-container', { 'has-error': !this.isValid }) }, this.iconStart && (h("span", { key: 'e453aa8eb57857540b29d78c3f61ec371be6c71a', class: "icon-start" }, this.iconStart)), h("input", { key: '3e9d52dbfcc1bac000e0ca9663595aaac8f42d85', id: this.name, type: "number", name: this.name, placeholder: this.placeholder, min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onKeyDown: this.handleKeyDown, onWheel: this.handleWheel }), this.showSpinners && (h("div", { key: 'dd4e42f8a9916574e61643dbe90bae50e2defb77', class: "le-input-controls" }, h("le-button", { key: '5aa823b516f6f71a26b5749959dec30fac2b65b3', mode: "default", variant: "clear", size: "small", "icon-only": true, class: "le-input-control-btn", onClick: this.increment, disabled: this.disabled || this.readonly || (this.max !== undefined && this.value >= this.max), tabindex: "-1" }, h("span", { key: 'c1858ce8cf23de1610ac6e957bd40ec2fe7a97ea', slot: "icon-only" }, "\u2191")), h("le-button", { key: '71982d4f725dc9a94144033e2b328f33699264e4', mode: "default", variant: "clear", size: "small", "icon-only": true, class: "le-input-control-btn", onClick: this.decrement, disabled: this.disabled || this.readonly || (this.min !== undefined && this.value <= this.min), tabindex: "-1" }, h("span", { key: '0c5225558cf4adf80e63dcfafe1bb83d80fbb7dd', slot: "icon-only" }, "\u2193"))))), !this.isValid && h("div", { key: 'd97bc87f564b9a23dac85b518895e7ffcbd72aa8', class: "le-input-error" }, this.validationMessage), h("div", { key: '257757f47a84f40c48e98672d6217ec565f37cce', class: "le-input-description" }, h("le-slot", { key: '89c69d0be6c3ef9975d2b2ab21f65c916067d452', name: "description", type: "text", tag: "p", label: "Description" }, h("slot", { key: '9dffb85d1c8e2463d05a514b1659d0ac3eee802e', name: "description" }))))));
     }
     static get is() { return "le-number-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/le-number-input/le-number-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"le-number-input.js","sourceRoot":"","sources":["../../../src/components/le-number-input/le-number-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, EventEmitter, State, h, Element, Watch } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A number input component with validation, keyboard controls, and custom spinners.\n *\n * @slot - The label text for the input\n * @slot description - Additional description text displayed below the input\n * @slot icon-start - Icon to display at the start of the input\n *\n * @cssprop --le-input-bg - Input background color\n * @cssprop --le-input-color - Input text color\n * @cssprop --le-input-border - Input border style\n * @cssprop --le-input-border-focus - Input border style when focused\n * @cssprop --le-input-border-error - Input border style when invalid\n * @cssprop --le-input-radius - Input border radius\n * @cssprop --le-input-padding - Input padding\n */\n@Component({\n  tag: 'le-number-input',\n  styleUrl: 'le-number-input.css',\n  shadow: true,\n})\nexport class LeNumberInput {\n  @Element() el: HTMLElement;\n\n  /**\n   * The value of the input\n   */\n  @Prop({ mutable: true, reflect: true }) value: number;\n\n  /**\n   * The name of the input\n   */\n  @Prop() name: string;\n\n  /**\n   * Label for the input\n   */\n  @Prop() label: string;\n\n  /**\n   * Placeholder text\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * Minimum allowed value\n   */\n  @Prop() min?: number;\n\n  /**\n   * Maximum allowed value\n   */\n  @Prop() max?: number;\n\n  /**\n   * Step value for increment/decrement\n   */\n  @Prop() step: number = 1;\n\n  /**\n   * Whether the input is required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Whether the input is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether the input is read-only\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * Icon for the start icon\n   */\n  @Prop() iconStart?: string;\n\n  /**\n   * Whether to show the spinner controls\n   */\n  @Prop() showSpinners: boolean = true;\n\n  /**\n   * External ID for linking with external systems\n   */\n  @Prop() externalId: string;\n\n  /**\n   * Internal validation state\n   */\n  @State() private isValid: boolean = true;\n  @State() private validationMessage: string = '';\n\n  /**\n   * Emitted when the value changes (on blur or Enter)\n   */\n  @Event() leChange: EventEmitter<{ value: number; name: string; externalId: string; isValid: boolean }>;\n\n  /**\n   * Emitted when the input value changes (on keystroke/spin)\n   */\n  @Event() leInput: EventEmitter<{ value: number; name: string; externalId: string; isValid: boolean }>;\n\n  @Watch('value')\n  valueChanged() {\n    this.validate();\n  }\n\n  private validate() {\n    if (this.required && (this.value === undefined || this.value === null || isNaN(this.value))) {\n      this.isValid = false;\n      this.validationMessage = 'This field is required';\n      return;\n    }\n\n    if (this.value !== undefined && this.value !== null && !isNaN(this.value)) {\n      if (this.min !== undefined && this.value < this.min) {\n        this.isValid = false;\n        this.validationMessage = `Value must be at least ${this.min}`;\n        return;\n      }\n      if (this.max !== undefined && this.value > this.max) {\n        this.isValid = false;\n        this.validationMessage = `Value must be at most ${this.max}`;\n        return;\n      }\n    }\n\n    this.isValid = true;\n    this.validationMessage = '';\n  }\n\n  private emitChange() {\n    this.leChange.emit({\n      value: this.value,\n      name: this.name,\n      externalId: this.externalId,\n      isValid: this.isValid\n    });\n  }\n\n  private emitInput() {\n    this.leInput.emit({\n      value: this.value,\n      name: this.name,\n      externalId: this.externalId,\n      isValid: this.isValid\n    });\n  }\n\n  private updateValue(newValue: number) {\n    if (this.disabled || this.readonly) return;\n    \n    // Round to avoid floating point errors\n    const precision = this.step.toString().split('.')[1]?.length || 0;\n    const rounded = parseFloat(newValue.toFixed(precision));\n    \n    this.value = rounded;\n    this.validate();\n    this.emitInput();\n  }\n\n  private handleInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement;\n    const val = parseFloat(input.value);\n    \n    if (input.value === '') {\n      this.value = undefined;\n    } else if (!isNaN(val)) {\n      this.value = val;\n    }\n    \n    this.validate();\n    this.emitInput();\n  };\n\n  private handleChange = () => {\n    this.validate();\n    this.emitChange();\n  };\n\n  private handleKeyDown = (ev: KeyboardEvent) => {\n    if (this.disabled || this.readonly) return;\n\n    let multiplier = 1;\n    if (ev.shiftKey) multiplier = 10;\n    if (ev.altKey) multiplier = 0.1;\n\n    const current = this.value || 0;\n\n    if (ev.key === 'ArrowUp') {\n      ev.preventDefault();\n      this.updateValue(current + (this.step * multiplier));\n    } else if (ev.key === 'ArrowDown') {\n      ev.preventDefault();\n      this.updateValue(current - (this.step * multiplier));\n    }\n  };\n\n  private handleWheel = (ev: WheelEvent) => {\n    if (this.disabled || this.readonly) return;\n    // Only handle if input is focused to prevent accidental scrolling\n    if (document.activeElement !== ev.target) return;\n\n    ev.preventDefault();\n    const current = this.value || 0;\n    \n    if (ev.deltaY < 0) {\n      this.updateValue(current + this.step);\n    } else {\n      this.updateValue(current - this.step);\n    }\n  };\n\n  private increment = (ev: Event) => {\n    ev.preventDefault(); // Prevent focus loss\n    const current = this.value || 0;\n    this.updateValue(current + this.step);\n    // Trigger change event for buttons as they are \"final\" actions usually\n    this.emitChange();\n  };\n\n  private decrement = (ev: Event) => {\n    ev.preventDefault();\n    const current = this.value || 0;\n    this.updateValue(current - this.step);\n    this.emitChange();\n  };\n\n  render() {\n    return (\n      <le-component component=\"le-number-input\" hostClass={classnames({ 'disabled': this.disabled })}>\n        <div class=\"le-input-wrapper\">\n          {this.label && (\n            <label class=\"le-input-label\" htmlFor={this.name}>{this.label}</label>\n          )}\n          \n          <div class={classnames('le-input-container', { 'has-error': !this.isValid })}>\n            {this.iconStart && (\n              <span class=\"icon-start\">{this.iconStart}</span>\n            )}\n            \n            <input\n              id={this.name}\n              type=\"number\"\n              name={this.name}\n              placeholder={this.placeholder}\n              min={this.min}\n              max={this.max}\n              step={this.step}\n              value={this.value}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              required={this.required}\n              onInput={this.handleInput}\n              onChange={this.handleChange}\n              onKeyDown={this.handleKeyDown}\n              onWheel={this.handleWheel}\n            />\n            \n            {this.showSpinners && (\n              <div class=\"le-input-controls\">\n                <le-button\n                  mode=\"default\"\n                  variant=\"clear\" \n                  size=\"small\"\n                  icon-only\n                  class=\"le-input-control-btn\" \n                  onClick={this.increment}\n                  disabled={this.disabled || this.readonly || (this.max !== undefined && this.value >= this.max)}\n                  tabindex=\"-1\"\n                >\n                  <span slot=\"icon-only\">↑</span>\n                </le-button>\n                <le-button\n                  mode=\"default\"\n                  variant=\"clear\" \n                  size=\"small\" \n                  icon-only \n                  class=\"le-input-control-btn\" \n                  onClick={this.decrement}\n                  disabled={this.disabled || this.readonly || (this.min !== undefined && this.value <= this.min)}\n                  tabindex=\"-1\"\n                >\n                  <span slot=\"icon-only\">↓</span>\n                </le-button>\n              </div>\n            )}\n          </div>\n\n          {!this.isValid && <div class=\"le-input-error\">{this.validationMessage}</div>}\n\n          <div class=\"le-input-description\">\n            <le-slot name=\"description\" type=\"text\" tag=\"p\" label=\"Description\">\n              <slot name=\"description\"></slot>\n            </le-slot>\n          </div>\n        </div>\n      </le-component>\n    );\n  }\n}\n"]}
+{"version":3,"file":"le-number-input.js","sourceRoot":"","sources":["../../../src/components/le-number-input/le-number-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, EventEmitter, State, h, Element, Watch } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A number input component with validation, keyboard controls, and custom spinners.\n *\n * @slot - The label text for the input\n * @slot description - Additional description text displayed below the input\n * @slot icon-start - Icon to display at the start of the input\n *\n * @cssprop --le-input-bg - Input background color\n * @cssprop --le-input-color - Input text color\n * @cssprop --le-input-border - Input border style\n * @cssprop --le-input-border-focus - Input border style when focused\n * @cssprop --le-input-border-error - Input border style when invalid\n * @cssprop --le-input-radius - Input border radius\n * @cssprop --le-input-padding - Input padding\n */\n@Component({\n  tag: 'le-number-input',\n  styleUrl: 'le-number-input.css',\n  shadow: true,\n})\nexport class LeNumberInput {\n  @Element() el: HTMLElement;\n\n  /**\n   * The value of the input\n   */\n  @Prop({ mutable: true, reflect: true }) value: number;\n\n  /**\n   * The name of the input\n   */\n  @Prop() name: string;\n\n  /**\n   * Label for the input\n   */\n  @Prop() label: string;\n\n  /**\n   * Placeholder text\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * Minimum allowed value\n   */\n  @Prop() min?: number;\n\n  /**\n   * Maximum allowed value\n   */\n  @Prop() max?: number;\n\n  /**\n   * Step value for increment/decrement\n   */\n  @Prop() step: number = 1;\n\n  /**\n   * Whether the input is required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Whether the input is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether the input is read-only\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * Icon for the start icon\n   */\n  @Prop() iconStart?: string;\n\n  /**\n   * Whether to show the spinner controls\n   */\n  @Prop() showSpinners: boolean = true;\n\n  /**\n   * External ID for linking with external systems\n   */\n  @Prop() externalId: string;\n\n  /**\n   * Internal validation state\n   */\n  @State() private isValid: boolean = true;\n  @State() private validationMessage: string = '';\n\n  /**\n   * Emitted when the value changes (on blur or Enter)\n   */\n  @Event() leChange: EventEmitter<{ value: number; name: string; externalId: string; isValid: boolean }>;\n\n  /**\n   * Emitted when the input value changes (on keystroke/spin)\n   */\n  @Event() leInput: EventEmitter<{ value: number; name: string; externalId: string; isValid: boolean }>;\n\n  @Watch('value')\n  valueChanged() {\n    this.validate();\n  }\n\n  private validate() {\n    if (this.required && (this.value === undefined || this.value === null || isNaN(this.value))) {\n      this.isValid = false;\n      this.validationMessage = 'This field is required';\n      return;\n    }\n\n    if (this.value !== undefined && this.value !== null && !isNaN(this.value)) {\n      if (this.min !== undefined && this.value < this.min) {\n        this.isValid = false;\n        this.validationMessage = `Value must be at least ${this.min}`;\n        return;\n      }\n      if (this.max !== undefined && this.value > this.max) {\n        this.isValid = false;\n        this.validationMessage = `Value must be at most ${this.max}`;\n        return;\n      }\n    }\n\n    this.isValid = true;\n    this.validationMessage = '';\n  }\n\n  private emitChange() {\n    this.leChange.emit({\n      value: this.value,\n      name: this.name,\n      externalId: this.externalId,\n      isValid: this.isValid\n    });\n  }\n\n  private emitInput() {\n    this.leInput.emit({\n      value: this.value,\n      name: this.name,\n      externalId: this.externalId,\n      isValid: this.isValid\n    });\n  }\n\n  private updateValue(newValue: number) {\n    if (this.disabled || this.readonly) return;\n    \n    // Round to avoid floating point errors\n    const precision = this.step.toString().split('.')[1]?.length || 0;\n    const rounded = parseFloat(newValue.toFixed(precision));\n    \n    this.value = rounded;\n    this.validate();\n    this.emitInput();\n  }\n\n  private handleInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement;\n    const val = parseFloat(input.value);\n    \n    if (input.value === '') {\n      this.value = undefined;\n    } else if (!isNaN(val)) {\n      this.value = val;\n    }\n    \n    this.validate();\n    this.emitInput();\n  };\n\n  private handleChange = () => {\n    this.validate();\n    this.emitChange();\n  };\n\n  private handleKeyDown = (ev: KeyboardEvent) => {\n    if (this.disabled || this.readonly) return;\n\n    let multiplier = 1;\n    if (ev.shiftKey) multiplier = 10;\n    if (ev.altKey) multiplier = 0.1;\n\n    const current = this.value || 0;\n\n    if (ev.key === 'ArrowUp') {\n      ev.preventDefault();\n      this.updateValue(current + (this.step * multiplier));\n    } else if (ev.key === 'ArrowDown') {\n      ev.preventDefault();\n      this.updateValue(current - (this.step * multiplier));\n    }\n  };\n\n  private handleWheel = (ev: WheelEvent) => {\n    if (this.disabled || this.readonly) return;\n    // Only handle if input is focused to prevent accidental scrolling\n    if (document.activeElement !== ev.target) return;\n\n    ev.preventDefault();\n    const current = this.value || 0;\n    \n    if (ev.deltaY < 0) {\n      this.updateValue(current + this.step);\n    } else {\n      this.updateValue(current - this.step);\n    }\n  };\n\n  private increment = (ev: Event) => {\n    ev.preventDefault(); // Prevent focus loss\n    const current = this.value || 0;\n    this.updateValue(current + this.step);\n    // Trigger change event for buttons as they are \"final\" actions usually\n    this.emitChange();\n  };\n\n  private decrement = (ev: Event) => {\n    ev.preventDefault();\n    const current = this.value || 0;\n    this.updateValue(current - this.step);\n    this.emitChange();\n  };\n\n  render() {\n    return (\n      <le-component component=\"le-number-input\" hostClass={classnames({ 'disabled': this.disabled })}>\n        <div class=\"le-input-wrapper\">\n          {this.label && (\n            <label class=\"le-input-label\" htmlFor={this.name}>{this.label}</label>\n          )}\n          \n          <div class={classnames('le-input-container', { 'has-error': !this.isValid })}>\n            {this.iconStart && (\n              <span class=\"icon-start\">{this.iconStart}</span>\n            )}\n            \n            <input\n              id={this.name}\n              type=\"number\"\n              name={this.name}\n              placeholder={this.placeholder}\n              min={this.min}\n              max={this.max}\n              step={this.step}\n              value={this.value}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              required={this.required}\n              onInput={this.handleInput}\n              onChange={this.handleChange}\n              onKeyDown={this.handleKeyDown}\n              onWheel={this.handleWheel}\n            />\n            \n            {this.showSpinners && (\n              <div class=\"le-input-controls\">\n                <le-button\n                  mode=\"default\"\n                  variant=\"clear\" \n                  size=\"small\"\n                  icon-only\n                  class=\"le-input-control-btn\" \n                  onClick={this.increment}\n                  disabled={this.disabled || this.readonly || (this.max !== undefined && this.value >= this.max)}\n                  tabindex=\"-1\"\n                >\n                  <span slot=\"icon-only\">↑</span>\n                </le-button>\n                <le-button\n                  mode=\"default\"\n                  variant=\"clear\" \n                  size=\"small\" \n                  icon-only \n                  class=\"le-input-control-btn\" \n                  onClick={this.decrement}\n                  disabled={this.disabled || this.readonly || (this.min !== undefined && this.value <= this.min)}\n                  tabindex=\"-1\"\n                >\n                  <span slot=\"icon-only\">↓</span>\n                </le-button>\n              </div>\n            )}\n          </div>\n\n          {!this.isValid && <div class=\"le-input-error\">{this.validationMessage}</div>}\n\n          <div class=\"le-input-description\">\n            <le-slot name=\"description\" type=\"text\" tag=\"p\" label=\"Description\">\n              <slot name=\"description\"></slot>\n            </le-slot>\n          </div>\n        </div>\n      </le-component>\n    );\n  }\n}\n"]}

package/dist/collection/components/le-popover/le-popover.css

@@ -6,6 +6,7 @@
 :host {
   display: inline-block;
   position: relative;
+  --le-popover-padding: var(--le-space-md, 12px);
 }
 
 :host([trigger-full-width]) {
@@ -151,7 +152,7 @@
    ============================================ */
 
 .le-popover-body {
-  padding: var(--le-space-md, 12px);
+  padding: var(--le-popover-padding);
 }
 
 /* ============================================

package/dist/collection/components/le-popover/le-popover.js

@@ -19,79 +19,110 @@ const openPopoverStack = [];
  * @cmsCategory System
  */
 export class LePopover {
-    el;
-    /**
-     * Mode of the popover should be 'default' for internal use
-     */
-    mode;
-    /**
-     * Whether the popover is currently open
-     */
-    open = false;
-    /**
-     * Position of the popover relative to its trigger
-     */
-    position = 'bottom';
-    /**
-     * Alignment of the popover
-     */
-    align = 'start';
-    /**
-     * Optional title for the popover header
-     */
-    popoverTitle;
-    /**
-     * Whether to show a close button in the header
-     */
-    showClose = true;
-    /**
-     * Whether clicking outside closes the popover
-     */
-    closeOnClickOutside = true;
-    /**
-     * Whether pressing Escape closes the popover
-     */
-    closeOnEscape = true;
-    /**
-     * Offset from the trigger element (in pixels)
-     */
-    offset = 8;
-    /**
-     * Fixed width for the popover (e.g., '300px', '20rem')
-     */
-    width;
-    /**
-     * Minimum width for the popover (e.g., '200px', '15rem')
-     */
-    minWidth = '200px';
-    /**
-     * Maximum width for the popover (e.g., '400px', '25rem')
-     */
-    maxWidth;
-    /**
-     * Should the popover's trigger take full width of its container
-     */
-    triggerFullWidth = false;
-    /**
-     * Emitted when the popover opens
-     */
-    lePopoverOpen;
-    /**
-     * Emitted when the popover closes
-     */
-    lePopoverClose;
+    constructor() {
+        /**
+         * Whether the popover is currently open
+         */
+        this.open = false;
+        /**
+         * Position of the popover relative to its trigger
+         */
+        this.position = 'bottom';
+        /**
+         * Alignment of the popover
+         */
+        this.align = 'start';
+        /**
+         * Whether to show a close button in the header
+         */
+        this.showClose = true;
+        /**
+         * Whether clicking outside closes the popover
+         */
+        this.closeOnClickOutside = true;
+        /**
+         * Whether pressing Escape closes the popover
+         */
+        this.closeOnEscape = true;
+        /**
+         * Offset from the trigger element (in pixels)
+         */
+        this.offset = 8;
+        /**
+         * Minimum width for the popover (e.g., '200px', '15rem')
+         */
+        this.minWidth = '200px';
+        /**
+         * Should the popover's trigger take full width of its container
+         */
+        this.triggerFullWidth = false;
+        this.isPositioned = false;
+        this.uniqueId = `le-popover-${Math.random().toString(36).substr(2, 9)}`;
+        this.scrollParents = [];
+        this.isListeningForDismiss = false;
+        this.handleDocumentPointerDown = (event) => {
+            if (!this.open || !this.closeOnClickOutside)
+                return;
+            // If the click happens inside this popover component (trigger OR content), don't close.
+            const path = (event.composedPath?.() ?? []);
+            if (path.includes(this.el))
+                return;
+            this.hide();
+        };
+        this.handleDocumentKeyDown = (event) => {
+            if (!this.open || !this.closeOnEscape)
+                return;
+            if (event.key !== 'Escape')
+                return;
+            // Only the top-most opened popover handles Escape.
+            const top = openPopoverStack[openPopoverStack.length - 1];
+            if (top !== this.el)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            this.hide();
+        };
+        this.handleScroll = () => {
+            if (this.open) {
+                this._updatePosition();
+            }
+        };
+        this.handlePopoverToggle = (event) => {
+            if (event.newState === 'open') {
+                this.handleOpened();
+            }
+            else {
+                this.handleClosed();
+            }
+        };
+        this.handleOtherPopoverOpen = (event) => {
+            const customEvent = event;
+            const openingPopover = customEvent.detail?.popover;
+            if (!openingPopover)
+                return;
+            if (openingPopover === this.el)
+                return;
+            // Allow nested popovers (e.g., le-select inside another popover).
+            // Use a shadow-DOM-aware containment check.
+            if (this.shadowContains(this.el, openingPopover) ||
+                this.shadowContains(openingPopover, this.el)) {
+                return;
+            }
+            if (this.open) {
+                this.hide();
+            }
+        };
+        this.handleTriggerClick = (event) => {
+            event.stopPropagation();
+            this.toggle();
+        };
+    }
     /**
      * Method to update the popover position from a parent component
      */
     async updatePosition() {
         this._updatePosition();
     }
-    isPositioned = false;
-    triggerEl;
-    popoverEl;
-    uniqueId = `le-popover-${Math.random().toString(36).substr(2, 9)}`;
-    scrollParents = [];
-    isListeningForDismiss = false;
     get supportsPopoverApi() {
         return typeof HTMLElement.prototype.showPopover === 'function';
     }
@@ -148,28 +179,6 @@ export class LePopover {
         document.removeEventListener('keydown', this.handleDocumentKeyDown, true);
         this.isListeningForDismiss = false;
     }
-    handleDocumentPointerDown = (event) => {
-        if (!this.open || !this.closeOnClickOutside)
-            return;
-        // If the click happens inside this popover component (trigger OR content), don't close.
-        const path = (event.composedPath?.() ?? []);
-        if (path.includes(this.el))
-            return;
-        this.hide();
-    };
-    handleDocumentKeyDown = (event) => {
-        if (!this.open || !this.closeOnEscape)
-            return;
-        if (event.key !== 'Escape')
-            return;
-        // Only the top-most opened popover handles Escape.
-        const top = openPopoverStack[openPopoverStack.length - 1];
-        if (top !== this.el)
-            return;
-        event.preventDefault();
-        event.stopPropagation();
-        this.hide();
-    };
     /**
      * Find all scrollable parent elements
      */
@@ -213,11 +222,6 @@ export class LePopover {
         window.removeEventListener('resize', this.handleScroll);
         this.scrollParents = [];
     }
-    handleScroll = () => {
-        if (this.open) {
-            this._updatePosition();
-        }
-    };
     handleOpened() {
         this.open = true;
         // Track stack order for Escape handling.
@@ -240,31 +244,6 @@ export class LePopover {
             openPopoverStack.splice(index, 1);
         this.lePopoverClose.emit();
     }
-    handlePopoverToggle = (event) => {
-        if (event.newState === 'open') {
-            this.handleOpened();
-        }
-        else {
-            this.handleClosed();
-        }
-    };
-    handleOtherPopoverOpen = (event) => {
-        const customEvent = event;
-        const openingPopover = customEvent.detail?.popover;
-        if (!openingPopover)
-            return;
-        if (openingPopover === this.el)
-            return;
-        // Allow nested popovers (e.g., le-select inside another popover).
-        // Use a shadow-DOM-aware containment check.
-        if (this.shadowContains(this.el, openingPopover) ||
-            this.shadowContains(openingPopover, this.el)) {
-            return;
-        }
-        if (this.open) {
-            this.hide();
-        }
-    };
     /**
      * Opens the popover
      */
@@ -301,10 +280,6 @@ export class LePopover {
             await this.show();
         }
     }
-    handleTriggerClick = (event) => {
-        event.stopPropagation();
-        this.toggle();
-    };
     _updatePosition() {
         if (!this.triggerEl || !this.popoverEl)
             return;
@@ -459,12 +434,12 @@ export class LePopover {
             popoverStyles.minWidth = this.minWidth;
         if (this.maxWidth)
             popoverStyles.maxWidth = this.maxWidth;
-        return (h(Host, { key: '542d4ab391a9b176d110fe00c0dd61f2c46d73ef', "trigger-full-width": this.triggerFullWidth }, h("div", { key: '2248ab763d65e8a9150e62644452085f01c6a238', class: classnames('le-popover-trigger', {
+        return (h(Host, { key: 'c9adf9fa285b33fca47bd2caa54c3ad62f2784e1', "trigger-full-width": this.triggerFullWidth }, h("div", { key: 'e3f6c1441ec018325400e2673e012ba2939d359b', class: classnames('le-popover-trigger', {
                 'le-popover-trigger-full-width': this.triggerFullWidth,
-            }), ref: el => (this.triggerEl = el), onClick: this.handleTriggerClick, part: "trigger" }, h("slot", { key: '9d9a5f05f4b9f1b11f1fcbb09d29f0c1e36a2cd6', name: "trigger" }, h("button", { key: 'ed573daefaffb7b1effb3c7891722aa40e4b606e', type: "button", class: "le-popover-default-trigger" }, h("span", { key: '61f00ea9761935224e1529adc3b102b85efd4f33' }, "\u2295")))), h("div", { key: 'bf447493c9c7dedb7f2ae7083c80a7a2d06aebe0', id: this.uniqueId, class: "le-popover-content",
+            }), ref: el => (this.triggerEl = el), onClick: this.handleTriggerClick, part: "trigger" }, h("slot", { key: '9ece065f14fedc62905406359f0b6ae25747403b', name: "trigger" }, h("button", { key: '816e450c49c441f315bd619c24a4c96ef3bbc164', type: "button", class: "le-popover-default-trigger" }, h("span", { key: '4408bf0edee9ccf6e3fa9147110793c94eed8a39' }, "\u2295")))), h("div", { key: '9061223ed8051dda88802b1fb54b455aafcd20a6', id: this.uniqueId, class: "le-popover-content",
             // Always use manual mode so nested popovers can be open together.
             // We implement click-outside and Escape handling ourselves.
-            popover: "manual", ref: el => (this.popoverEl = el), style: popoverStyles, "data-fallback-open": this.supportsPopoverApi ? undefined : String(this.open) }, (this.popoverTitle || this.showClose) && (h("div", { key: '50fe79bb415b5de315aea7f766d57ae911a90343', class: "le-popover-header" }, this.popoverTitle && h("span", { key: 'd809f12c512197bd34ca215a05820b533f4d8734', class: "le-popover-title" }, this.popoverTitle), this.showClose && (h("button", { key: '2baee3e910ad65243a66eee2bba1c46d9fa628b4', type: "button", class: "le-popover-close", onClick: () => this.hide(), "aria-label": "Close" }, "\u00D7")))), h("div", { key: 'eacad60a20becde7f4f8b9fa01d195dd3f4c08f1', class: "le-popover-body", part: "content" }, h("slot", { key: 'f8aa2edd170ee039d5277a1b9ebc8ee077a1a9dc' })))));
+            popover: "manual", ref: el => (this.popoverEl = el), style: popoverStyles, "data-fallback-open": this.supportsPopoverApi ? undefined : String(this.open) }, (this.popoverTitle || this.showClose) && (h("div", { key: '92f61d207bfd18693d5e610cdfca708afecadf9d', class: "le-popover-header" }, this.popoverTitle && h("span", { key: 'caeb2cfc8b500061bad1e8dc9cf36eff298ba7ed', class: "le-popover-title" }, this.popoverTitle), this.showClose && (h("button", { key: '3fc53cc7c0ae0bce3330613ecc90003db5028d69', type: "button", class: "le-popover-close", onClick: () => this.hide(), "aria-label": "Close" }, "\u00D7")))), h("div", { key: '829a9d5d78cb8b5d19dfb7c2afeda55faafaa8ac', class: "le-popover-body", part: "content" }, h("slot", { key: '684b41952086d22e7d3d79f6db02f7cbfd32bbf5' })))));
     }
     static get is() { return "le-popover"; }
     static get encapsulation() { return "shadow"; }