@nuralyui/input 0.0.6 → 0.0.7

package/input.component.d.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: MIT
  */
 import { LitElement, PropertyValues } from 'lit';
-import { INPUT_TYPE, INPUT_STATE, INPUT_SIZE } from './input.types.js';
+import { INPUT_TYPE, INPUT_STATE, INPUT_SIZE, INPUT_VARIANT, FocusOptions, BlurOptions } from './input.types.js';
 import '../icon/icon.component.js';
 declare const NrInputElement_base: (new (...args: any[]) => import("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & typeof LitElement;
 export declare class NrInputElement extends NrInputElement_base {
@@ -13,6 +13,7 @@ export declare class NrInputElement extends NrInputElement_base {
     state: INPUT_STATE;
     value: string;
     size: INPUT_SIZE;
+    variant: INPUT_VARIANT;
     type: INPUT_TYPE;
     step?: string;
     min?: string;
@@ -20,10 +21,22 @@ export declare class NrInputElement extends NrInputElement_base {
     placeholder: string;
     autocomplete: string;
     withCopy: boolean;
+    allowClear: boolean;
+    showCount: boolean;
+    maxLength?: number;
     inputType: string;
     hasAddonBefore: boolean;
     hasAddonAfter: boolean;
+    focused: boolean;
     input: HTMLInputElement;
+    /**
+     * Get the character count display text
+     */
+    get characterCountDisplay(): string;
+    /**
+     * Check if character count is over the limit
+     */
+    get isOverCharacterLimit(): boolean;
     /**
      * Required components that must be registered for this component to work properly
      */
@@ -43,6 +56,38 @@ export declare class NrInputElement extends NrInputElement_base {
      * Handle slot changes to determine addon visibility
      */
     private _handleSlotChange;
+    /**
+     * Focus the input with advanced options
+     */
+    focus(options?: FocusOptions): void;
+    /**
+     * Blur the input with advanced options
+     */
+    blur(options?: BlurOptions): void;
+    /**
+     * Select all text in the input
+     */
+    selectAll(): void;
+    /**
+     * Select a range of text in the input
+     */
+    selectRange(start: number, end: number): void;
+    /**
+     * Get the current cursor position
+     */
+    getCursorPosition(): number;
+    /**
+     * Set the cursor position
+     */
+    setCursorPosition(position: number | 'start' | 'end' | 'all'): void;
+    /**
+     * Get the currently selected text
+     */
+    getSelectedText(): string;
+    /**
+     * Check if the input is currently focused
+     */
+    isFocused(): boolean;
     /**
      * Centralized event dispatcher to ensure consistent event structure
      */
@@ -50,8 +95,10 @@ export declare class NrInputElement extends NrInputElement_base {
     private _handleKeyDown;
     private _valueChange;
     private _focusEvent;
+    private _blurEvent;
     private _handleIconKeydown;
     private _onCopy;
+    private _onClear;
     private _increment;
     private _decrement;
     private _togglePasswordIcon;

package/input.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.component.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.component.ts"],"names":[],"mappings":"AACA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,cAAc,EAAQ,MAAM,KAAK,CAAC;AAGvD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAgB,MAAM,kBAAkB,CAAC;AAIrF,OAAO,2BAA2B,CAAC;;AAEnC,qBACa,cAAe,SAAQ,mBAA6B;IAG/D,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,KAAK,cAAuB;IAG5B,KAAK,SAAgB;IAGrB,IAAI,aAAqB;IAGzB,IAAI,aAAmB;IAGvB,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,GAAG,CAAC,EAAE,MAAM,CAAC;IAGb,GAAG,CAAC,EAAE,MAAM,CAAC;IAGb,WAAW,SAAgB;IAG3B,YAAY,SAAS;IAGrB,QAAQ,UAAS;IAGjB,SAAS,SAAgB;IAGzB,cAAc,UAAS;IAGvB,aAAa,UAAS;IAGtB,KAAK,EAAG,gBAAgB,CAAC;IAEzB;;OAEG;IACM,kBAAkB,WAAe;IAE1C;;OAEG;IACM,iBAAiB;IAKjB,UAAU,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAiBpD,OAAO,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAgBjD,YAAY,IAAI,IAAI;IAI7B;;OAEG;IACH,OAAO,CAAC,wBAAwB;IAUhC;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAezB;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,cAAc;IA8CtB,OAAO,CAAC,YAAY;IAkCpB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,kBAAkB;YAmBZ,OAAO;IAgBrB,OAAO,CAAC,UAAU;IAmBlB,OAAO,CAAC,UAAU;IAmBlB,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,mBAAmB;IAelB,MAAM;IAuDf,OAAgB,MAAM,4BAAU;CACjC"}
+{"version":3,"file":"input.component.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.component.ts"],"names":[],"mappings":"AACA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,cAAc,EAAQ,MAAM,KAAK,CAAC;AAGvD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAgB,YAAY,EAAE,WAAW,EAAoB,MAAM,kBAAkB,CAAC;AAIjJ,OAAO,2BAA2B,CAAC;;AAEnC,qBACa,cAAe,SAAQ,mBAA6B;IAG/D,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,KAAK,cAAuB;IAG5B,KAAK,SAAgB;IAGrB,IAAI,aAAqB;IAGzB,OAAO,gBAA4B;IAGnC,IAAI,aAAmB;IAGvB,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,GAAG,CAAC,EAAE,MAAM,CAAC;IAGb,GAAG,CAAC,EAAE,MAAM,CAAC;IAGb,WAAW,SAAgB;IAG3B,YAAY,SAAS;IAGrB,QAAQ,UAAS;IAGjB,UAAU,UAAS;IAGnB,SAAS,UAAS;IAGlB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,SAAS,SAAgB;IAGzB,cAAc,UAAS;IAGvB,aAAa,UAAS;IAGtB,OAAO,UAAS;IAGhB,KAAK,EAAG,gBAAgB,CAAC;IAEzB;;OAEG;IACH,IAAI,qBAAqB,IAAI,MAAM,CAMlC;IAED;;OAEG;IACH,IAAI,oBAAoB,IAAI,OAAO,CAElC;IAED;;OAEG;IACM,kBAAkB,WAAe;IAE1C;;OAEG;IACM,iBAAiB;IAKjB,UAAU,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAiBpD,OAAO,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAmBjD,YAAY,IAAI,IAAI;IAI7B;;OAEG;IACH,OAAO,CAAC,wBAAwB;IAUhC;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAezB;;OAEG;IACM,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAmB5C;;OAEG;IACM,IAAI,CAAC,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI;IAc1C;;OAEG;IACH,SAAS,IAAI,IAAI;IAejB;;OAEG;IACH,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI;IAoB7C;;OAEG;IACH,iBAAiB,IAAI,MAAM;IAK3B;;OAEG;IACH,iBAAiB,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,IAAI;IAgCnE;;OAEG;IACH,eAAe,IAAI,MAAM;IAOzB;;OAEG;IACH,SAAS,IAAI,OAAO;IAQpB;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,cAAc;IA8CtB,OAAO,CAAC,YAAY;IA6CpB,OAAO,CAAC,WAAW;IA0BnB,OAAO,CAAC,UAAU;IAkBlB,OAAO,CAAC,kBAAkB;YAqBZ,OAAO;IAYrB,OAAO,CAAC,QAAQ;IA8BhB,OAAO,CAAC,UAAU;IAmBlB,OAAO,CAAC,UAAU;IAmBlB,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,mBAAmB;IAelB,MAAM;IAqEf,OAAgB,MAAM,4BAAU;CACjC"}

package/input.component.js

@@ -35,18 +35,38 @@ let NrInputElement = class NrInputElement extends NuralyUIBaseMixin(LitElement)
         this.state = "default" /* INPUT_STATE.Default */;
         this.value = EMPTY_STRING;
         this.size = "medium" /* INPUT_SIZE.Medium */;
+        this.variant = "underlined" /* INPUT_VARIANT.Underlined */;
         this.type = "text" /* INPUT_TYPE.TEXT */;
         this.placeholder = EMPTY_STRING;
         this.autocomplete = 'off';
         this.withCopy = false;
+        this.allowClear = false;
+        this.showCount = false;
         this.inputType = EMPTY_STRING;
         this.hasAddonBefore = false;
         this.hasAddonAfter = false;
+        this.focused = false;
         /**
          * Required components that must be registered for this component to work properly
          */
         this.requiredComponents = ['hy-icon'];
     }
+    /**
+     * Get the character count display text
+     */
+    get characterCountDisplay() {
+        const currentLength = this.value.length;
+        if (this.maxLength) {
+            return `${currentLength}/${this.maxLength}`;
+        }
+        return `${currentLength}`;
+    }
+    /**
+     * Check if character count is over the limit
+     */
+    get isOverCharacterLimit() {
+        return this.maxLength ? this.value.length > this.maxLength : false;
+    }
     /**
      * Check for required dependencies when component is connected to DOM
      */
@@ -70,7 +90,7 @@ let NrInputElement = class NrInputElement extends NuralyUIBaseMixin(LitElement)
         }
     }
     updated(_changedProperties) {
-        if (_changedProperties.has('step') || _changedProperties.has('min') || _changedProperties.has('max')) {
+        if (_changedProperties.has('step') || _changedProperties.has('min') || _changedProperties.has('max') || _changedProperties.has('maxLength')) {
             const input = this.input;
             if (input) {
                 if (this.step)
@@ -85,6 +105,10 @@ let NrInputElement = class NrInputElement extends NuralyUIBaseMixin(LitElement)
                     input.setAttribute('max', this.max);
                 else
                     input.removeAttribute('max');
+                if (this.maxLength)
+                    input.setAttribute('maxlength', this.maxLength.toString());
+                else
+                    input.removeAttribute('maxlength');
             }
         }
     }
@@ -116,6 +140,133 @@ let NrInputElement = class NrInputElement extends NuralyUIBaseMixin(LitElement)
         }
     }
     // ========================================
+    // FOCUS MANAGEMENT METHODS
+    // ========================================
+    /**
+     * Focus the input with advanced options
+     */
+    focus(options) {
+        if (!this.input)
+            return;
+        const focusOptions = Object.assign({ preventScroll: false }, options);
+        // Focus the input element
+        this.input.focus({ preventScroll: focusOptions.preventScroll });
+        // Handle cursor positioning
+        if (focusOptions.cursor !== undefined) {
+            this.setCursorPosition(focusOptions.cursor);
+        }
+        // Handle text selection
+        if (focusOptions.select) {
+            this.selectAll();
+        }
+    }
+    /**
+     * Blur the input with advanced options
+     */
+    blur(options) {
+        if (!this.input)
+            return;
+        const currentPosition = this.getCursorPosition();
+        this.input.blur();
+        // Restore cursor position if requested
+        if ((options === null || options === void 0 ? void 0 : options.restoreCursor) && currentPosition !== -1) {
+            // We'll restore it on next focus
+            this.input.dataset.restoreCursor = currentPosition.toString();
+        }
+    }
+    /**
+     * Select all text in the input
+     */
+    selectAll() {
+        if (!this.input)
+            return;
+        // Ensure the input is focused first
+        if (document.activeElement !== this.input) {
+            this.input.focus();
+        }
+        // Wait for next frame to ensure focus is complete
+        requestAnimationFrame(() => {
+            if (!this.input)
+                return;
+            this.input.select();
+        });
+    }
+    /**
+     * Select a range of text in the input
+     */
+    selectRange(start, end) {
+        if (!this.input)
+            return;
+        // Ensure the input is focused first
+        if (document.activeElement !== this.input) {
+            this.input.focus();
+        }
+        // Wait for next frame to ensure focus is complete
+        requestAnimationFrame(() => {
+            if (!this.input)
+                return;
+            const maxLength = this.input.value.length;
+            const validStart = Math.max(0, Math.min(start, maxLength));
+            const validEnd = Math.max(validStart, Math.min(end, maxLength));
+            this.input.setSelectionRange(validStart, validEnd);
+        });
+    }
+    /**
+     * Get the current cursor position
+     */
+    getCursorPosition() {
+        if (!this.input)
+            return -1;
+        return this.input.selectionStart || 0;
+    }
+    /**
+     * Set the cursor position
+     */
+    setCursorPosition(position) {
+        if (!this.input)
+            return;
+        // Ensure the input is focused first
+        if (document.activeElement !== this.input) {
+            this.input.focus();
+        }
+        requestAnimationFrame(() => {
+            if (!this.input)
+                return;
+            let pos;
+            const valueLength = this.value.length;
+            switch (position) {
+                case 'start':
+                    pos = 0;
+                    break;
+                case 'end':
+                    pos = valueLength;
+                    break;
+                case 'all':
+                    this.selectAll();
+                    return;
+                default:
+                    pos = typeof position === 'number' ? Math.min(Math.max(0, position), valueLength) : 0;
+            }
+            this.input.setSelectionRange(pos, pos);
+        });
+    }
+    /**
+     * Get the currently selected text
+     */
+    getSelectedText() {
+        if (!this.input)
+            return '';
+        const start = this.input.selectionStart || 0;
+        const end = this.input.selectionEnd || 0;
+        return this.value.substring(start, end);
+    }
+    /**
+     * Check if the input is currently focused
+     */
+    isFocused() {
+        return this.focused && document.activeElement === this.input;
+    }
+    // ========================================
     // EVENT HANDLING METHODS
     // ========================================
     /**
@@ -174,6 +325,16 @@ let NrInputElement = class NrInputElement extends NuralyUIBaseMixin(LitElement)
         }
         const target = e.target;
         const newValue = target.value;
+        // Check character limit
+        if (this.maxLength && newValue.length > this.maxLength) {
+            this._dispatchInputEvent('nr-character-limit-exceeded', {
+                value: newValue,
+                target: target,
+                limit: this.maxLength,
+                originalEvent: e
+            });
+            // Note: HTML maxlength attribute usually prevents this, but we dispatch event for awareness
+        }
         if (this.type === "number" /* INPUT_TYPE.NUMBER */ && newValue) {
             const validation = InputValidationUtils.validateNumericValue(newValue, this.min, this.max);
             if (!validation.isValid) {
@@ -196,10 +357,31 @@ let NrInputElement = class NrInputElement extends NuralyUIBaseMixin(LitElement)
         });
     }
     _focusEvent(e) {
-        this._dispatchInputEvent('nr-focus', {
-            target: e.target,
-            value: this.value
-        });
+        this.focused = true;
+        // Handle cursor restoration if requested
+        const input = e.target;
+        if (input.dataset.restoreCursor) {
+            const position = parseInt(input.dataset.restoreCursor, 10);
+            this.setCursorPosition(position);
+            delete input.dataset.restoreCursor;
+        }
+        const focusDetail = {
+            focused: true,
+            cursorPosition: this.getCursorPosition(),
+            selectedText: this.getSelectedText()
+        };
+        this._dispatchInputEvent('nr-focus', Object.assign({ target: e.target, value: this.value }, focusDetail));
+        this._dispatchInputEvent('nr-focus-change', focusDetail);
+    }
+    _blurEvent(e) {
+        this.focused = false;
+        const focusDetail = {
+            focused: false,
+            cursorPosition: this.getCursorPosition(),
+            selectedText: this.getSelectedText()
+        };
+        this._dispatchInputEvent('nr-blur', Object.assign({ target: e.target, value: this.value }, focusDetail));
+        this._dispatchInputEvent('nr-focus-change', focusDetail);
     }
     _handleIconKeydown(keyDownEvent) {
         if (keyDownEvent.key === 'Enter' || keyDownEvent.key === ' ') {
@@ -208,6 +390,9 @@ let NrInputElement = class NrInputElement extends NuralyUIBaseMixin(LitElement)
             if (target.id === 'copy-icon') {
                 this._onCopy();
             }
+            else if (target.id === 'clear-icon') {
+                this._onClear();
+            }
             else if (target.id === 'password-icon') {
                 this._togglePasswordIcon();
             }
@@ -234,6 +419,27 @@ let NrInputElement = class NrInputElement extends NuralyUIBaseMixin(LitElement)
             }
         });
     }
+    _onClear() {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        const previousValue = this.value;
+        this.value = EMPTY_STRING;
+        // Update the input element value
+        if (this.input) {
+            this.input.value = EMPTY_STRING;
+        }
+        this._dispatchInputEvent('nr-clear', {
+            previousValue,
+            target: this.input
+        });
+        // Also dispatch input event for consistency
+        this._dispatchInputEvent('nr-input', {
+            value: this.value,
+            target: this.input,
+            action: 'clear'
+        });
+    }
     // ========================================
     // OPERATION METHODS
     // ========================================
@@ -314,10 +520,12 @@ let NrInputElement = class NrInputElement extends NuralyUIBaseMixin(LitElement)
             aria-describedby=${this._getAriaDescribedBy()}
             @input=${this._valueChange}
             @focus=${this._focusEvent}
+            @blur=${this._blurEvent}
             @keydown=${this._handleKeyDown}
           />
           ${InputRenderUtils.renderSuffix()}
           ${InputRenderUtils.renderCopyIcon(this.withCopy, this.disabled, this.readonly, () => this._onCopy(), (e) => this._handleIconKeydown(e))}
+          ${InputRenderUtils.renderClearIcon(this.allowClear, this.value, this.disabled, this.readonly, () => this._onClear(), (e) => this._handleIconKeydown(e))}
           ${InputRenderUtils.renderStateIcon(this.state)}
           ${InputRenderUtils.renderCalendarIcon(this.state, this.type)}
           ${InputRenderUtils.renderPasswordIcon(this.type, this.inputType, this.disabled, this.readonly, () => this._togglePasswordIcon(), (e) => this._handleIconKeydown(e))}
@@ -326,6 +534,11 @@ let NrInputElement = class NrInputElement extends NuralyUIBaseMixin(LitElement)
         ${InputRenderUtils.renderAddonAfter(this.hasAddonAfter, (e) => this._handleSlotChange(e))}
       </div>
       <slot name="helper-text"></slot>
+      ${this.showCount ? html `
+        <div class="character-count" ?data-over-limit=${this.isOverCharacterLimit}>
+          ${this.characterCountDisplay}
+        </div>
+      ` : ''}
     `;
     }
 };
@@ -345,6 +558,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], NrInputElement.prototype, "size", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NrInputElement.prototype, "variant", void 0);
 __decorate([
     property({ reflect: true })
 ], NrInputElement.prototype, "type", void 0);
@@ -366,6 +582,15 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NrInputElement.prototype, "withCopy", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NrInputElement.prototype, "allowClear", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NrInputElement.prototype, "showCount", void 0);
+__decorate([
+    property({ type: Number })
+], NrInputElement.prototype, "maxLength", void 0);
 __decorate([
     state()
 ], NrInputElement.prototype, "inputType", void 0);
@@ -375,6 +600,9 @@ __decorate([
 __decorate([
     state()
 ], NrInputElement.prototype, "hasAddonAfter", void 0);
+__decorate([
+    state()
+], NrInputElement.prototype, "focused", void 0);
 __decorate([
     query('#input')
 ], NrInputElement.prototype, "input", void 0);

package/input.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.component.js","sourceRoot":"","sources":["../../../src/components/input/input.component.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/**\n * @license\n * Copyright 2023 Google Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, PropertyValues, html } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { styles } from './input.style.js';\nimport { INPUT_TYPE, INPUT_STATE, INPUT_SIZE, EMPTY_STRING } from './input.types.js';\nimport { NuralyUIBaseMixin } from '../../shared/base-mixin.js';\nimport { InputValidationUtils } from './utils/input-validation.utils.js';\nimport { InputRenderUtils } from './utils/input-renderers.js';\nimport '../icon/icon.component.js';\n\n@customElement('nr-input')\nexport class NrInputElement extends NuralyUIBaseMixin(LitElement) {\n\n  @property({type: Boolean, reflect: true})\n  disabled = false;\n\n  @property({type: Boolean, reflect: true})\n  readonly = false;\n\n  @property({type: String, reflect: true})\n  state = INPUT_STATE.Default;\n\n  @property({type: String})\n  value = EMPTY_STRING;\n\n  @property({type: String})\n  size = INPUT_SIZE.Medium;\n\n  @property({reflect: true})\n  type = INPUT_TYPE.TEXT;\n\n  @property({type: String})\n  step?: string;\n\n  @property({type: String})\n  min?: string;\n\n  @property({type: String})\n  max?: string;\n\n  @property({type: String})\n  placeholder = EMPTY_STRING;\n\n  @property({type: String})\n  autocomplete = 'off';\n\n  @property({type: Boolean, reflect: true})\n  withCopy = false;\n\n  @state()\n  inputType = EMPTY_STRING;\n\n  @state()\n  hasAddonBefore = false;\n\n  @state()\n  hasAddonAfter = false;\n\n  @query('#input')\n  input!: HTMLInputElement;\n\n  /**\n   * Required components that must be registered for this component to work properly\n   */\n  override requiredComponents = ['hy-icon'];\n\n  /**\n   * Check for required dependencies when component is connected to DOM\n   */\n  override connectedCallback() {\n    super.connectedCallback();\n    this.validateDependencies();\n  }\n\n  override willUpdate(_changedProperties: PropertyValues): void {\n    if (_changedProperties.has('type')) {\n      this.inputType = this.type;\n      if (this.inputType === INPUT_TYPE.NUMBER && this.min && !this.value) {\n        this.value = this.min;\n      }\n    }\n    \n    // Validate numeric properties when they change\n    if (_changedProperties.has('type') || \n        _changedProperties.has('min') || \n        _changedProperties.has('max') || \n        _changedProperties.has('step')) {\n      InputValidationUtils.validateNumericProperties(this.type, this.min, this.max, this.step);\n    }\n  }\n\n  override updated(_changedProperties: PropertyValues): void {\n    if (_changedProperties.has('step') || _changedProperties.has('min') || _changedProperties.has('max')) {\n      const input = this.input;\n      if (input) {\n        if (this.step) input.setAttribute('step', this.step);\n        else input.removeAttribute('step');\n        \n        if (this.min) input.setAttribute('min', this.min);\n        else input.removeAttribute('min');\n        \n        if (this.max) input.setAttribute('max', this.max);\n        else input.removeAttribute('max');\n      }\n    }\n  }\n\n  override firstUpdated(): void {\n    this._checkInitialSlotContent();\n  }\n\n  /**\n   * Check initial slot content on first render\n   */\n  private _checkInitialSlotContent(): void {\n    // Check for addon-before content\n    const addonBeforeElements = this.querySelectorAll('[slot=\"addon-before\"]');\n    this.hasAddonBefore = addonBeforeElements.length > 0;\n\n    // Check for addon-after content  \n    const addonAfterElements = this.querySelectorAll('[slot=\"addon-after\"]');\n    this.hasAddonAfter = addonAfterElements.length > 0;\n  }\n\n  /**\n   * Handle slot changes to determine addon visibility\n   */\n  private _handleSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    const slotName = slot.name;\n    \n    if (slotName === 'addon-before') {\n      this.hasAddonBefore = slot.assignedElements().length > 0;\n    } else if (slotName === 'addon-after') {\n      this.hasAddonAfter = slot.assignedElements().length > 0;\n    }\n  }\n\n  // ========================================\n  // EVENT HANDLING METHODS\n  // ========================================\n\n  /**\n   * Centralized event dispatcher to ensure consistent event structure\n   */\n  private _dispatchInputEvent(eventName: string, detail: any): void {\n    this.dispatchEvent(\n      new CustomEvent(eventName, {\n        detail,\n        bubbles: true\n      })\n    );\n  }\n\n  private _handleKeyDown(keyDownEvent: KeyboardEvent) {\n    // Prevent all key input when readonly\n    if (this.readonly) {\n      const allowedReadonlyKeys = [\n        'Tab', 'Escape', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown',\n        'Home', 'End', 'PageUp', 'PageDown'\n      ];\n      \n      if (keyDownEvent.ctrlKey || keyDownEvent.metaKey) {\n        const allowedCombinations = ['KeyA', 'KeyC'];\n        if (allowedCombinations.includes(keyDownEvent.code)) {\n          return;\n        }\n      }\n      \n      if (!allowedReadonlyKeys.includes(keyDownEvent.key)) {\n        keyDownEvent.preventDefault();\n        return;\n      }\n    }\n\n    // Handle Enter key\n    if (keyDownEvent.key === 'Enter') {\n      this._dispatchInputEvent('nr-enter', {\n        target: keyDownEvent.target,\n        value: this.value,\n        originalEvent: keyDownEvent\n      });\n      return;\n    }\n\n    // Prevent non-numeric input for number type\n    if (this.type === INPUT_TYPE.NUMBER) {\n      InputValidationUtils.preventNonNumericInput(keyDownEvent, this.min);\n      \n      if (keyDownEvent.defaultPrevented) {\n        this._dispatchInputEvent('nr-invalid-key', {\n          key: keyDownEvent.key,\n          target: keyDownEvent.target,\n          value: this.value,\n          originalEvent: keyDownEvent\n        });\n      }\n    }\n  }\n\n  private _valueChange(e: Event) {\n    if (this.readonly) {\n      e.preventDefault();\n      return;\n    }\n\n    const target = e.target as HTMLInputElement;\n    const newValue = target.value;\n    \n    if (this.type === INPUT_TYPE.NUMBER && newValue) {\n      const validation = InputValidationUtils.validateNumericValue(newValue, this.min, this.max);\n      \n      if (!validation.isValid) {\n        console.warn(validation.warnings[0]);\n        this._dispatchInputEvent('nr-validation-error', {\n          value: newValue,\n          target: target,\n          error: validation.warnings[0],\n          originalEvent: e\n        });\n        return;\n      }\n      \n      validation.warnings.forEach(warning => console.warn(warning));\n    }\n    \n    this.value = newValue;\n    this._dispatchInputEvent('nr-input', {\n      value: this.value, \n      target: target,\n      originalEvent: e \n    });\n  }\n\n  private _focusEvent(e: Event) {\n    this._dispatchInputEvent('nr-focus', {\n      target: e.target,\n      value: this.value\n    });\n  }\n\n  private _handleIconKeydown(keyDownEvent: KeyboardEvent) {\n    if (keyDownEvent.key === 'Enter' || keyDownEvent.key === ' ') {\n      keyDownEvent.preventDefault();\n      const target = keyDownEvent.target as HTMLElement;\n      \n      if (target.id === 'copy-icon') {\n        this._onCopy();\n      } else if (target.id === 'password-icon') {\n        this._togglePasswordIcon();\n      } else if (target.closest('#number-icons')) {\n        if (target.getAttribute('name') === 'plus') {\n          this._increment();\n        } else if (target.getAttribute('name') === 'minus') {\n          this._decrement();\n        }\n      }\n    }\n  }\n\n  private async _onCopy() {\n    try {\n      const input = this.shadowRoot!.getElementById('input')! as HTMLInputElement;\n      input.select();\n      await navigator.clipboard.writeText(input.value);\n      \n      this._dispatchInputEvent('nr-copy-success', { value: input.value });\n    } catch (error) {\n      this._dispatchInputEvent('nr-copy-error', { error });\n    }\n  }\n\n  // ========================================\n  // OPERATION METHODS\n  // ========================================\n\n  private _increment() {\n    try {\n      this.input.stepUp();\n      this.value = this.input.value;\n      this._dispatchInputEvent('nr-input', {\n        value: this.value, \n        target: this.input,\n        action: 'increment'\n      });\n    } catch (error) {\n      console.warn('Failed to increment value:', error);\n      this._dispatchInputEvent('nr-increment-error', {\n        error,\n        value: this.value,\n        target: this.input\n      });\n    }\n  }\n\n  private _decrement() {\n    try {\n      this.input.stepDown();\n      this.value = this.input.value;\n      this._dispatchInputEvent('nr-input', {\n        value: this.value, \n        target: this.input,\n        action: 'decrement'\n      });\n    } catch (error) {\n      console.warn('Failed to decrement value:', error);\n      this._dispatchInputEvent('nr-decrement-error', {\n        error,\n        value: this.value,\n        target: this.input\n      });\n    }\n  }\n\n  private _togglePasswordIcon() {\n    if (this.inputType === INPUT_TYPE.PASSWORD) {\n      this.inputType = INPUT_TYPE.TEXT;\n    } else if (this.inputType === INPUT_TYPE.TEXT && this.type === INPUT_TYPE.PASSWORD) {\n      this.inputType = INPUT_TYPE.PASSWORD;\n    }\n  }\n\n  private _getAriaDescribedBy(): string {\n    const describedBy: string[] = [];\n    \n    const helperSlot = this.shadowRoot?.querySelector('slot[name=\"helper-text\"]');\n    if (helperSlot && (helperSlot as HTMLSlotElement).assignedNodes().length > 0) {\n      describedBy.push('helper-text');\n    }\n    \n    return describedBy.join(' ') || '';\n  }\n\n  // ========================================\n  // RENDER METHODS\n  // ========================================\n\n  override render() {\n    return html`\n      <slot name=\"label\"></slot>\n      <div class=\"input-wrapper\" data-theme=\"${this.currentTheme}\">\n        ${InputRenderUtils.renderAddonBefore(this.hasAddonBefore, (e: Event) => this._handleSlotChange(e))}\n        <div data-size=${this.size} id=\"input-container\">\n          ${InputRenderUtils.renderPrefix()}\n          <input\n            id=\"input\"\n            .disabled=${this.disabled}\n            .readOnly=${this.readonly}\n            .value=${this.value}\n            .placeholder=${this.placeholder}\n            .type=\"${this.inputType}\"\n            .autocomplete=${this.autocomplete}\n            aria-invalid=${this.state === INPUT_STATE.Error ? 'true' : 'false'}\n            aria-describedby=${this._getAriaDescribedBy()}\n            @input=${this._valueChange}\n            @focus=${this._focusEvent}\n            @keydown=${this._handleKeyDown}\n          />\n          ${InputRenderUtils.renderSuffix()}\n          ${InputRenderUtils.renderCopyIcon(\n            this.withCopy,\n            this.disabled,\n            this.readonly,\n            () => this._onCopy(),\n            (e: KeyboardEvent) => this._handleIconKeydown(e)\n          )}\n          ${InputRenderUtils.renderStateIcon(this.state)}\n          ${InputRenderUtils.renderCalendarIcon(this.state, this.type)}\n          ${InputRenderUtils.renderPasswordIcon(\n            this.type,\n            this.inputType,\n            this.disabled,\n            this.readonly,\n            () => this._togglePasswordIcon(),\n            (e: KeyboardEvent) => this._handleIconKeydown(e)\n          )}\n          ${InputRenderUtils.renderNumberIcons(\n            this.type,\n            this.state,\n            this.disabled,\n            this.readonly,\n            () => this._increment(),\n            () => this._decrement(),\n            (e: KeyboardEvent) => this._handleIconKeydown(e)\n          )}\n        </div>\n        ${InputRenderUtils.renderAddonAfter(this.hasAddonAfter, (e: Event) => this._handleSlotChange(e))}\n      </div>\n      <slot name=\"helper-text\"></slot>\n    `;\n  }\n\n  static override styles = styles;\n}\n\n"]}
+{"version":3,"file":"input.component.js","sourceRoot":"","sources":["../../../src/components/input/input.component.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/**\n * @license\n * Copyright 2023 Google Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, PropertyValues, html } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { styles } from './input.style.js';\nimport { INPUT_TYPE, INPUT_STATE, INPUT_SIZE, INPUT_VARIANT, EMPTY_STRING, FocusOptions, BlurOptions, FocusChangeEvent } from './input.types.js';\nimport { NuralyUIBaseMixin } from '../../shared/base-mixin.js';\nimport { InputValidationUtils } from './utils/input-validation.utils.js';\nimport { InputRenderUtils } from './utils/input-renderers.js';\nimport '../icon/icon.component.js';\n\n@customElement('nr-input')\nexport class NrInputElement extends NuralyUIBaseMixin(LitElement) {\n\n  @property({type: Boolean, reflect: true})\n  disabled = false;\n\n  @property({type: Boolean, reflect: true})\n  readonly = false;\n\n  @property({type: String, reflect: true})\n  state = INPUT_STATE.Default;\n\n  @property({type: String})\n  value = EMPTY_STRING;\n\n  @property({type: String})\n  size = INPUT_SIZE.Medium;\n\n  @property({type: String, reflect: true})\n  variant = INPUT_VARIANT.Underlined;\n\n  @property({reflect: true})\n  type = INPUT_TYPE.TEXT;\n\n  @property({type: String})\n  step?: string;\n\n  @property({type: String})\n  min?: string;\n\n  @property({type: String})\n  max?: string;\n\n  @property({type: String})\n  placeholder = EMPTY_STRING;\n\n  @property({type: String})\n  autocomplete = 'off';\n\n  @property({type: Boolean, reflect: true})\n  withCopy = false;\n\n  @property({type: Boolean, reflect: true})\n  allowClear = false;\n\n  @property({type: Boolean, reflect: true})\n  showCount = false;\n\n  @property({type: Number})\n  maxLength?: number;\n\n  @state()\n  inputType = EMPTY_STRING;\n\n  @state()\n  hasAddonBefore = false;\n\n  @state()\n  hasAddonAfter = false;\n\n  @state()\n  focused = false;\n\n  @query('#input')\n  input!: HTMLInputElement;\n\n  /**\n   * Get the character count display text\n   */\n  get characterCountDisplay(): string {\n    const currentLength = this.value.length;\n    if (this.maxLength) {\n      return `${currentLength}/${this.maxLength}`;\n    }\n    return `${currentLength}`;\n  }\n\n  /**\n   * Check if character count is over the limit\n   */\n  get isOverCharacterLimit(): boolean {\n    return this.maxLength ? this.value.length > this.maxLength : false;\n  }\n\n  /**\n   * Required components that must be registered for this component to work properly\n   */\n  override requiredComponents = ['hy-icon'];\n\n  /**\n   * Check for required dependencies when component is connected to DOM\n   */\n  override connectedCallback() {\n    super.connectedCallback();\n    this.validateDependencies();\n  }\n\n  override willUpdate(_changedProperties: PropertyValues): void {\n    if (_changedProperties.has('type')) {\n      this.inputType = this.type;\n      if (this.inputType === INPUT_TYPE.NUMBER && this.min && !this.value) {\n        this.value = this.min;\n      }\n    }\n    \n    // Validate numeric properties when they change\n    if (_changedProperties.has('type') || \n        _changedProperties.has('min') || \n        _changedProperties.has('max') || \n        _changedProperties.has('step')) {\n      InputValidationUtils.validateNumericProperties(this.type, this.min, this.max, this.step);\n    }\n  }\n\n  override updated(_changedProperties: PropertyValues): void {\n    if (_changedProperties.has('step') || _changedProperties.has('min') || _changedProperties.has('max') || _changedProperties.has('maxLength')) {\n      const input = this.input;\n      if (input) {\n        if (this.step) input.setAttribute('step', this.step);\n        else input.removeAttribute('step');\n        \n        if (this.min) input.setAttribute('min', this.min);\n        else input.removeAttribute('min');\n        \n        if (this.max) input.setAttribute('max', this.max);\n        else input.removeAttribute('max');\n\n        if (this.maxLength) input.setAttribute('maxlength', this.maxLength.toString());\n        else input.removeAttribute('maxlength');\n      }\n    }\n  }\n\n  override firstUpdated(): void {\n    this._checkInitialSlotContent();\n  }\n\n  /**\n   * Check initial slot content on first render\n   */\n  private _checkInitialSlotContent(): void {\n    // Check for addon-before content\n    const addonBeforeElements = this.querySelectorAll('[slot=\"addon-before\"]');\n    this.hasAddonBefore = addonBeforeElements.length > 0;\n\n    // Check for addon-after content  \n    const addonAfterElements = this.querySelectorAll('[slot=\"addon-after\"]');\n    this.hasAddonAfter = addonAfterElements.length > 0;\n  }\n\n  /**\n   * Handle slot changes to determine addon visibility\n   */\n  private _handleSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    const slotName = slot.name;\n    \n    if (slotName === 'addon-before') {\n      this.hasAddonBefore = slot.assignedElements().length > 0;\n    } else if (slotName === 'addon-after') {\n      this.hasAddonAfter = slot.assignedElements().length > 0;\n    }\n  }\n\n  // ========================================\n  // FOCUS MANAGEMENT METHODS\n  // ========================================\n\n  /**\n   * Focus the input with advanced options\n   */\n  override focus(options?: FocusOptions): void {\n    if (!this.input) return;\n\n    const focusOptions: FocusOptions = { preventScroll: false, ...options };\n    \n    // Focus the input element\n    this.input.focus({ preventScroll: focusOptions.preventScroll });\n\n    // Handle cursor positioning\n    if (focusOptions.cursor !== undefined) {\n      this.setCursorPosition(focusOptions.cursor);\n    }\n\n    // Handle text selection\n    if (focusOptions.select) {\n      this.selectAll();\n    }\n  }\n\n  /**\n   * Blur the input with advanced options\n   */\n  override blur(options?: BlurOptions): void {\n    if (!this.input) return;\n\n    const currentPosition = this.getCursorPosition();\n    \n    this.input.blur();\n\n    // Restore cursor position if requested\n    if (options?.restoreCursor && currentPosition !== -1) {\n      // We'll restore it on next focus\n      this.input.dataset.restoreCursor = currentPosition.toString();\n    }\n  }\n\n  /**\n   * Select all text in the input\n   */\n  selectAll(): void {\n    if (!this.input) return;\n    \n    // Ensure the input is focused first\n    if (document.activeElement !== this.input) {\n      this.input.focus();\n    }\n    \n    // Wait for next frame to ensure focus is complete\n    requestAnimationFrame(() => {\n      if (!this.input) return;\n      this.input.select();\n    });\n  }\n\n  /**\n   * Select a range of text in the input\n   */\n  selectRange(start: number, end: number): void {\n    if (!this.input) return;\n    \n    // Ensure the input is focused first\n    if (document.activeElement !== this.input) {\n      this.input.focus();\n    }\n    \n    // Wait for next frame to ensure focus is complete\n    requestAnimationFrame(() => {\n      if (!this.input) return;\n      \n      const maxLength = this.input.value.length;\n      const validStart = Math.max(0, Math.min(start, maxLength));\n      const validEnd = Math.max(validStart, Math.min(end, maxLength));\n      \n      this.input.setSelectionRange(validStart, validEnd);\n    });\n  }\n\n  /**\n   * Get the current cursor position\n   */\n  getCursorPosition(): number {\n    if (!this.input) return -1;\n    return this.input.selectionStart || 0;\n  }\n\n  /**\n   * Set the cursor position\n   */\n  setCursorPosition(position: number | 'start' | 'end' | 'all'): void {\n    if (!this.input) return;\n    \n    // Ensure the input is focused first\n    if (document.activeElement !== this.input) {\n      this.input.focus();\n    }\n    \n    requestAnimationFrame(() => {\n      if (!this.input) return;\n\n      let pos: number;\n      const valueLength = this.value.length;\n\n      switch (position) {\n        case 'start':\n          pos = 0;\n          break;\n        case 'end':\n          pos = valueLength;\n          break;\n        case 'all':\n          this.selectAll();\n          return;\n        default:\n          pos = typeof position === 'number' ? Math.min(Math.max(0, position), valueLength) : 0;\n      }\n\n      this.input.setSelectionRange(pos, pos);\n    });\n  }\n\n  /**\n   * Get the currently selected text\n   */\n  getSelectedText(): string {\n    if (!this.input) return '';\n    const start = this.input.selectionStart || 0;\n    const end = this.input.selectionEnd || 0;\n    return this.value.substring(start, end);\n  }\n\n  /**\n   * Check if the input is currently focused\n   */\n  isFocused(): boolean {\n    return this.focused && document.activeElement === this.input;\n  }\n\n  // ========================================\n  // EVENT HANDLING METHODS\n  // ========================================\n\n  /**\n   * Centralized event dispatcher to ensure consistent event structure\n   */\n  private _dispatchInputEvent(eventName: string, detail: any): void {\n    this.dispatchEvent(\n      new CustomEvent(eventName, {\n        detail,\n        bubbles: true\n      })\n    );\n  }\n\n  private _handleKeyDown(keyDownEvent: KeyboardEvent) {\n    // Prevent all key input when readonly\n    if (this.readonly) {\n      const allowedReadonlyKeys = [\n        'Tab', 'Escape', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown',\n        'Home', 'End', 'PageUp', 'PageDown'\n      ];\n      \n      if (keyDownEvent.ctrlKey || keyDownEvent.metaKey) {\n        const allowedCombinations = ['KeyA', 'KeyC'];\n        if (allowedCombinations.includes(keyDownEvent.code)) {\n          return;\n        }\n      }\n      \n      if (!allowedReadonlyKeys.includes(keyDownEvent.key)) {\n        keyDownEvent.preventDefault();\n        return;\n      }\n    }\n\n    // Handle Enter key\n    if (keyDownEvent.key === 'Enter') {\n      this._dispatchInputEvent('nr-enter', {\n        target: keyDownEvent.target,\n        value: this.value,\n        originalEvent: keyDownEvent\n      });\n      return;\n    }\n\n    // Prevent non-numeric input for number type\n    if (this.type === INPUT_TYPE.NUMBER) {\n      InputValidationUtils.preventNonNumericInput(keyDownEvent, this.min);\n      \n      if (keyDownEvent.defaultPrevented) {\n        this._dispatchInputEvent('nr-invalid-key', {\n          key: keyDownEvent.key,\n          target: keyDownEvent.target,\n          value: this.value,\n          originalEvent: keyDownEvent\n        });\n      }\n    }\n  }\n\n  private _valueChange(e: Event) {\n    if (this.readonly) {\n      e.preventDefault();\n      return;\n    }\n\n    const target = e.target as HTMLInputElement;\n    const newValue = target.value;\n    \n    // Check character limit\n    if (this.maxLength && newValue.length > this.maxLength) {\n      this._dispatchInputEvent('nr-character-limit-exceeded', {\n        value: newValue,\n        target: target,\n        limit: this.maxLength,\n        originalEvent: e\n      });\n      // Note: HTML maxlength attribute usually prevents this, but we dispatch event for awareness\n    }\n    \n    if (this.type === INPUT_TYPE.NUMBER && newValue) {\n      const validation = InputValidationUtils.validateNumericValue(newValue, this.min, this.max);\n      \n      if (!validation.isValid) {\n        console.warn(validation.warnings[0]);\n        this._dispatchInputEvent('nr-validation-error', {\n          value: newValue,\n          target: target,\n          error: validation.warnings[0],\n          originalEvent: e\n        });\n        return;\n      }\n      \n      validation.warnings.forEach(warning => console.warn(warning));\n    }\n    \n    this.value = newValue;\n    this._dispatchInputEvent('nr-input', {\n      value: this.value, \n      target: target,\n      originalEvent: e \n    });\n  }\n\n  private _focusEvent(e: Event) {\n    this.focused = true;\n    \n    // Handle cursor restoration if requested\n    const input = e.target as HTMLInputElement;\n    if (input.dataset.restoreCursor) {\n      const position = parseInt(input.dataset.restoreCursor, 10);\n      this.setCursorPosition(position);\n      delete input.dataset.restoreCursor;\n    }\n    \n    const focusDetail: FocusChangeEvent = {\n      focused: true,\n      cursorPosition: this.getCursorPosition(),\n      selectedText: this.getSelectedText()\n    };\n    \n    this._dispatchInputEvent('nr-focus', {\n      target: e.target,\n      value: this.value,\n      ...focusDetail\n    });\n    \n    this._dispatchInputEvent('nr-focus-change', focusDetail);\n  }\n\n  private _blurEvent(e: Event) {\n    this.focused = false;\n    \n    const focusDetail: FocusChangeEvent = {\n      focused: false,\n      cursorPosition: this.getCursorPosition(),\n      selectedText: this.getSelectedText()\n    };\n    \n    this._dispatchInputEvent('nr-blur', {\n      target: e.target,\n      value: this.value,\n      ...focusDetail\n    });\n    \n    this._dispatchInputEvent('nr-focus-change', focusDetail);\n  }\n\n  private _handleIconKeydown(keyDownEvent: KeyboardEvent) {\n    if (keyDownEvent.key === 'Enter' || keyDownEvent.key === ' ') {\n      keyDownEvent.preventDefault();\n      const target = keyDownEvent.target as HTMLElement;\n      \n      if (target.id === 'copy-icon') {\n        this._onCopy();\n      } else if (target.id === 'clear-icon') {\n        this._onClear();\n      } else if (target.id === 'password-icon') {\n        this._togglePasswordIcon();\n      } else if (target.closest('#number-icons')) {\n        if (target.getAttribute('name') === 'plus') {\n          this._increment();\n        } else if (target.getAttribute('name') === 'minus') {\n          this._decrement();\n        }\n      }\n    }\n  }\n\n  private async _onCopy() {\n    try {\n      const input = this.shadowRoot!.getElementById('input')! as HTMLInputElement;\n      input.select();\n      await navigator.clipboard.writeText(input.value);\n      \n      this._dispatchInputEvent('nr-copy-success', { value: input.value });\n    } catch (error) {\n      this._dispatchInputEvent('nr-copy-error', { error });\n    }\n  }\n\n  private _onClear() {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const previousValue = this.value;\n    this.value = EMPTY_STRING;\n    \n    // Update the input element value\n    if (this.input) {\n      this.input.value = EMPTY_STRING;\n    }\n\n    this._dispatchInputEvent('nr-clear', {\n      previousValue,\n      target: this.input\n    });\n\n    // Also dispatch input event for consistency\n    this._dispatchInputEvent('nr-input', {\n      value: this.value,\n      target: this.input,\n      action: 'clear'\n    });\n  }\n\n  // ========================================\n  // OPERATION METHODS\n  // ========================================\n\n  private _increment() {\n    try {\n      this.input.stepUp();\n      this.value = this.input.value;\n      this._dispatchInputEvent('nr-input', {\n        value: this.value, \n        target: this.input,\n        action: 'increment'\n      });\n    } catch (error) {\n      console.warn('Failed to increment value:', error);\n      this._dispatchInputEvent('nr-increment-error', {\n        error,\n        value: this.value,\n        target: this.input\n      });\n    }\n  }\n\n  private _decrement() {\n    try {\n      this.input.stepDown();\n      this.value = this.input.value;\n      this._dispatchInputEvent('nr-input', {\n        value: this.value, \n        target: this.input,\n        action: 'decrement'\n      });\n    } catch (error) {\n      console.warn('Failed to decrement value:', error);\n      this._dispatchInputEvent('nr-decrement-error', {\n        error,\n        value: this.value,\n        target: this.input\n      });\n    }\n  }\n\n  private _togglePasswordIcon() {\n    if (this.inputType === INPUT_TYPE.PASSWORD) {\n      this.inputType = INPUT_TYPE.TEXT;\n    } else if (this.inputType === INPUT_TYPE.TEXT && this.type === INPUT_TYPE.PASSWORD) {\n      this.inputType = INPUT_TYPE.PASSWORD;\n    }\n  }\n\n  private _getAriaDescribedBy(): string {\n    const describedBy: string[] = [];\n    \n    const helperSlot = this.shadowRoot?.querySelector('slot[name=\"helper-text\"]');\n    if (helperSlot && (helperSlot as HTMLSlotElement).assignedNodes().length > 0) {\n      describedBy.push('helper-text');\n    }\n    \n    return describedBy.join(' ') || '';\n  }\n\n  // ========================================\n  // RENDER METHODS\n  // ========================================\n\n  override render() {\n    return html`\n      <slot name=\"label\"></slot>\n      <div class=\"input-wrapper\" data-theme=\"${this.currentTheme}\">\n        ${InputRenderUtils.renderAddonBefore(this.hasAddonBefore, (e: Event) => this._handleSlotChange(e))}\n        <div data-size=${this.size} id=\"input-container\">\n          ${InputRenderUtils.renderPrefix()}\n          <input\n            id=\"input\"\n            .disabled=${this.disabled}\n            .readOnly=${this.readonly}\n            .value=${this.value}\n            .placeholder=${this.placeholder}\n            .type=\"${this.inputType}\"\n            .autocomplete=${this.autocomplete}\n            aria-invalid=${this.state === INPUT_STATE.Error ? 'true' : 'false'}\n            aria-describedby=${this._getAriaDescribedBy()}\n            @input=${this._valueChange}\n            @focus=${this._focusEvent}\n            @blur=${this._blurEvent}\n            @keydown=${this._handleKeyDown}\n          />\n          ${InputRenderUtils.renderSuffix()}\n          ${InputRenderUtils.renderCopyIcon(\n            this.withCopy,\n            this.disabled,\n            this.readonly,\n            () => this._onCopy(),\n            (e: KeyboardEvent) => this._handleIconKeydown(e)\n          )}\n          ${InputRenderUtils.renderClearIcon(\n            this.allowClear,\n            this.value,\n            this.disabled,\n            this.readonly,\n            () => this._onClear(),\n            (e: KeyboardEvent) => this._handleIconKeydown(e)\n          )}\n          ${InputRenderUtils.renderStateIcon(this.state)}\n          ${InputRenderUtils.renderCalendarIcon(this.state, this.type)}\n          ${InputRenderUtils.renderPasswordIcon(\n            this.type,\n            this.inputType,\n            this.disabled,\n            this.readonly,\n            () => this._togglePasswordIcon(),\n            (e: KeyboardEvent) => this._handleIconKeydown(e)\n          )}\n          ${InputRenderUtils.renderNumberIcons(\n            this.type,\n            this.state,\n            this.disabled,\n            this.readonly,\n            () => this._increment(),\n            () => this._decrement(),\n            (e: KeyboardEvent) => this._handleIconKeydown(e)\n          )}\n        </div>\n        ${InputRenderUtils.renderAddonAfter(this.hasAddonAfter, (e: Event) => this._handleSlotChange(e))}\n      </div>\n      <slot name=\"helper-text\"></slot>\n      ${this.showCount ? html`\n        <div class=\"character-count\" ?data-over-limit=${this.isOverCharacterLimit}>\n          ${this.characterCountDisplay}\n        </div>\n      ` : ''}\n    `;\n  }\n\n  static override styles = styles;\n}\n\n"]}

package/input.style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.style.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.style.ts"],"names":[],"mappings":"AAycA,eAAO,MAAM,MAAM,2BAA+C,CAAC"}
+{"version":3,"file":"input.style.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.style.ts"],"names":[],"mappings":"AA8jBA,eAAO,MAAM,MAAM,2BAA+C,CAAC"}

package/input.style.js

@@ -114,6 +114,13 @@ const inputStyle = css `
     cursor: pointer;
   }
 
+  /* Clear functionality icon */
+  #clear-icon {
+    padding-right: var(--hybrid-input-clear-icon-padding-right, var(--hybrid-input-local-clear-icon-padding-right));
+    --hybrid-icon-color: var(--hybrid-input-clear-icon-color, var(--hybrid-input-local-clear-icon-color));
+    cursor: pointer;
+  }
+
   /* 
    * Number input increment/decrement icons container
    * Positioned absolutely for overlay on input
@@ -157,14 +164,16 @@ const inputStyle = css `
   :host([disabled]) #warning-icon,
   :host([disabled]) #number-icons,
   :host([disabled]) #calendar-icon,
-  :host([disabled]) #copy-icon {
+  :host([disabled]) #copy-icon,
+  :host([disabled]) #clear-icon {
     opacity: var(--hybrid-input-disabled-icon-opacity, var(--hybrid-input-local-disabled-icon-opacity));
   }
 
   /* Disabled icons cursor override */
   :host([disabled]) #password-icon,
   :host([disabled]) #number-icons,
-  :host([disabled]) #copy-icon {
+  :host([disabled]) #copy-icon,
+  :host([disabled]) #clear-icon {
     cursor: not-allowed;
   }
 
@@ -275,6 +284,90 @@ const inputStyle = css `
     opacity: 0.6;
   }
 
+  /* ========================================
+   * INPUT VARIANT STYLES
+   * ======================================== */
+
+  /* 
+   * Outlined variant - full border around input
+   * Default: light border, focus: blue border
+   */
+  :host([variant='outlined']) #input-container {
+    border: var(--hybrid-input-outlined-border, var(--hybrid-input-local-outlined-border));
+    border-radius: var(--hybrid-input-outlined-border-radius, var(--hybrid-input-local-outlined-border-radius));
+    background-color: var(--hybrid-input-outlined-background, var(--hybrid-input-local-outlined-background));
+  }
+
+  :host([variant='outlined']) .input-wrapper {
+    background-color: transparent;
+  }
+
+  :host([variant='outlined']:not([state='error'])) #input-container:focus-within {
+    border: var(--hybrid-input-outlined-focus-border, var(--hybrid-input-local-outlined-focus-border));
+  }
+
+  /* 
+   * Filled variant - background with bottom border only
+   * Subtle background with bottom border indication
+   */
+  :host([variant='filled']) #input-container {
+    background-color: var(--hybrid-input-filled-background, var(--hybrid-input-local-filled-background));
+    border-radius: var(--hybrid-input-filled-border-radius, var(--hybrid-input-local-filled-border-radius));
+    border-bottom: var(--hybrid-input-filled-border-bottom, var(--hybrid-input-local-filled-border-bottom));
+    border-top: none;
+    border-left: none;
+    border-right: none;
+  }
+
+  :host([variant='filled']) .input-wrapper {
+    background-color: transparent;
+  }
+
+  :host([variant='filled']:not([state='error'])) #input-container:focus-within {
+    border-bottom: var(--hybrid-input-filled-focus-border-bottom, var(--hybrid-input-local-filled-focus-border-bottom));
+    border-top: none;
+    border-left: none;
+    border-right: none;
+  }
+
+  /* 
+   * Borderless variant - no borders, focus with outline
+   * Clean appearance with focus indication via outline
+   */
+  :host([variant='borderless']) #input-container {
+    background-color: var(--hybrid-input-borderless-background, var(--hybrid-input-local-borderless-background));
+    border: none;
+    border-radius: var(--hybrid-input-borderless-border-radius, var(--hybrid-input-local-borderless-border-radius));
+  }
+
+  :host([variant='borderless']) .input-wrapper {
+    background-color: transparent;
+  }
+
+  :host([variant='borderless']:not([state='error'])) #input-container:focus-within {
+    outline: var(--hybrid-input-borderless-focus-outline, var(--hybrid-input-local-borderless-focus-outline));
+    border: none;
+  }
+
+  /* 
+   * Underlined variant - bottom border only (default/current behavior)
+   * Maintains existing behavior as default
+   */
+  :host([variant='underlined']) #input-container {
+    border-bottom: var(--hybrid-input-underlined-border-bottom, var(--hybrid-input-local-underlined-border-bottom));
+    border-top: none;
+    border-left: none;
+    border-right: none;
+    border-radius: 0;
+  }
+
+  :host([variant='underlined']:not([state='error'])) #input-container:focus-within {
+    border-bottom: var(--hybrid-input-underlined-focus-border-bottom, var(--hybrid-input-local-underlined-focus-border-bottom));
+    border-top: none;
+    border-left: none;
+    border-right: none;
+  }
+
   /* ========================================
    * INPUT ELEMENT STYLES
    * ======================================== */
@@ -309,19 +402,26 @@ const inputStyle = css `
    * ======================================== */
 
   /* 
-   * Error state styling
+   * Error state styling - works with all variants
    * Applied when state='error' and not disabled
    */
-  :host(:not([disabled])[state='error']) > #input-container {
-    border: var(--hybrid-input-error-border, var(--hybrid-input-local-error-border));
+  :host(:not([disabled])[state='error']) #input-container {
+    border: var(--hybrid-input-error-border, var(--hybrid-input-local-error-border)) !important;
+    outline: none !important;
   }
 
-  /* 
-   * Focus state styling
-   * Applied when input receives focus and not in error state
-   */
-  :host(:not([state='error'])) > #input-container:focus-within {
-    border: var(--hybrid-input-focus-border, var(--hybrid-input-local-focus-border));
+  /* Override variant-specific error state styling */
+  :host([variant='borderless'][state='error']) #input-container {
+    border: var(--hybrid-input-error-border, var(--hybrid-input-local-error-border)) !important;
+    outline: none !important;
+  }
+
+  :host([variant='underlined'][state='error']) #input-container,
+  :host([variant='filled'][state='error']) #input-container {
+    border-top: none !important;
+    border-left: none !important;
+    border-right: none !important;
+    border-bottom: var(--hybrid-input-error-border, var(--hybrid-input-local-error-border)) !important;
   }
 
   /* 
@@ -450,6 +550,23 @@ const sizeInputStyle = css `
     padding-left: var(--hybrid-input-small-padding-left, var(--hybrid-input-local-small-padding-left));
     padding-right: var(--hybrid-input-small-padding-right, var(--hybrid-input-local-small-padding-right));
   }
+
+  /* 
+   * Character count display
+   * Shows character count and limit information
+   */
+  .character-count {
+    font-size: var(--hybrid-input-character-count-font-size, var(--hybrid-input-local-character-count-font-size));
+    color: var(--hybrid-input-character-count-color, var(--hybrid-input-local-character-count-color));
+    text-align: right;
+    margin-top: var(--hybrid-input-character-count-margin-top, var(--hybrid-input-local-character-count-margin-top));
+    font-family: var(--hybrid-input-font-family, var(--hybrid-input-local-font-family));
+  }
+
+  /* Character count over limit styling */
+  .character-count[data-over-limit] {
+    color: var(--hybrid-input-character-count-over-limit-color, var(--hybrid-input-local-character-count-over-limit-color));
+  }
 `;
 export const styles = [inputStyle, sizeInputStyle, styleVariables];
 //# sourceMappingURL=input.style.js.map

package/input.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.style.js","sourceRoot":"","sources":["../../../src/components/input/input.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D;;;;;;;;;;;;;;GAcG;AAEH,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkZrB,CAAC;AAEF;;;GAGG;AACH,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BzB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,UAAU,EAAE,cAAc,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\nimport { styleVariables } from './input.style.variable.js';\n\n/**\n * Input component styles for the Hybrid UI Library\n * \n * This file contains all the styling for the nr-input component, including:\n * - Base input styles with CSS custom properties for theming\n * - Multiple input states (default, warning, error)\n * - Size variations (small, medium, large)\n * - Different input types (text, password, number, calendar)\n * - Icon positioning and styling\n * - Focus, disabled, and validation states\n * - Dark theme support\n * \n * The styling system uses CSS custom properties with fallbacks to allow\n * for both global and local customization of input appearance.\n */\n\nconst inputStyle = css`\n  /* \n   * Host element base styles\n   * Container for the input component with flexible layout\n   */\n  :host {\n    display: flex;\n    flex-direction: column;\n    font-family: var(--hybrid-input-font-family, var(--hybrid-input-local-font-family));\n  }\n\n  /* \n   * Base input wrapper and input element styles\n   * Background applied to wrapper to cover entire container including addons\n   * Uses CSS custom properties with fallbacks for comprehensive theming support\n   * Properties follow the pattern: --hybrid-input-{property}, --hybrid-input-local-{property}\n   */\n  .input-wrapper {\n    background-color: var(--hybrid-input-background-color, var(--hybrid-input-local-background-color));\n  }\n\n  #input-container > input {\n    background-color: transparent;\n  }\n\n  /* \n   * Disabled state styles for wrapper and input\n   * Applied when input is disabled - removes interactivity and applies muted colors\n   */\n  :host([disabled]) .input-wrapper {\n    background-color: var(--hybrid-input-disabled-background-color, var(--hybrid-input-local-disabled-background-color));\n  }\n\n  :host([disabled]) #input-container > input {\n    background-color: transparent;\n    cursor: not-allowed;\n  }\n\n  /* \n   * Icon base styles\n   * Common styling for all icons within the input component\n   */\n  hy-icon {\n    display: flex;\n    align-items: center;\n  }\n\n  /* \n   * Placeholder styling\n   * Customizable placeholder text appearance\n   */\n  ::placeholder {\n    color: var(--hybrid-input-placeholder-color, var(--hybrid-input-local-placeholder-color));\n    font-size: var(--hybrid-input-placeholder-font-size, var(--hybrid-input-local-placeholder-font-size));\n    font-family: var(--hybrid-input-font-family, var(--hybrid-input-local-font-family));\n  }\n\n  /* \n   * Disabled placeholder styling\n   * Applied when input is disabled\n   */\n  :host([disabled]) ::placeholder {\n    color: var(--hybrid-input-disabled-placeholder-color, var(--hybrid-input-local-disabled-placeholder-color));\n  }\n\n  /* ========================================\n   * ICON VARIANTS AND STATES\n   * ======================================== */\n\n  /* Warning state icon */\n  #warning-icon {\n    --hybrid-icon-color: var(--hybrid-input-warning-icon-color, var(--hybrid-input-local-warning-icon-color));\n  }\n\n  /* Error state icon */\n  #error-icon {\n    --hybrid-icon-color: var(--hybrid-input-error-icon-color, var(--hybrid-input-local-error-icon-color));\n  }\n\n  /* Calendar input type icon */\n  #calendar-icon {\n    --hybrid-icon-color: var(--hybrid-input-calendar-icon-color, var(--hybrid-input-local-calendar-icon-color));\n  }\n\n  /* Password toggle icon */\n  #password-icon {\n    padding-left: var(--hybrid-input-password-icon-padding-left, var(--hybrid-input-local-password-icon-padding-left));\n    padding-right: var(--hybrid-input-password-icon-padding-right, var(--hybrid-input-local-password-icon-padding-right));\n    cursor: pointer;\n    --hybrid-icon-color: var(--hybrid-input-password-icon-color, var(--hybrid-input-local-password-icon-color));\n  }\n\n  /* Copy functionality icon */\n  #copy-icon {\n    padding-right: var(--hybrid-input-copy-icon-padding-right, var(--hybrid-input-local-copy-icon-padding-right));\n    --hybrid-icon-color: var(--hybrid-input-copy-icon-color, var(--hybrid-input-local-copy-icon-color));\n    cursor: pointer;\n  }\n\n  /* \n   * Number input increment/decrement icons container\n   * Positioned absolutely for overlay on input\n   */\n  #number-icons {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    cursor: pointer;\n    position: absolute;\n    right: 0;\n    top: 0;\n    height: 100%;\n    width: var(--hybrid-input-number-icons-container-width, var(--hybrid-input-local-number-icons-container-width));\n    padding-right: var(--hybrid-input-number-icons-container-padding-right, var(--hybrid-input-local-number-icons-container-padding-right));\n  }\n\n  /* Individual number icons styling */\n  #number-icons hy-icon {\n    --hybrid-icon-color: var(--hybrid-input-number-icons-color, var(--hybrid-input-local-number-icons-color));\n    padding-left: var(--hybrid-input-number-icons-padding-left, var(--hybrid-input-local-number-icons-padding-left));\n    padding-right: var(--hybrid-input-number-icons-padding-right, var(--hybrid-input-local-number-icons-padding-right));\n    width: var(--hybrid-input-number-icons-width, var(--hybrid-input-local-number-icons-width));\n    height: var(--hybrid-input-number-icons-height, var(--hybrid-input-local-number-icons-height));\n  }\n\n  /* Number icons separator styling */\n  #icons-separator {\n    color: var(--hybrid-input-number-icons-separator-color, var(--hybrid-input-local-number-icons-separator-color));\n    padding-bottom: var(--hybrid-input-number-icons-separator-padding-bottom, var(--hybrid-input-local-number-icons-separator-padding-bottom));\n    padding-left: var(--hybrid-input-number-icons-separator-padding-left, var(--hybrid-input-local-number-icons-separator-padding-left));\n    padding-right: var(--hybrid-input-number-icons-separator-padding-right, var(--hybrid-input-local-number-icons-separator-padding-right));\n  }\n\n  /* \n   * Disabled state for all icons\n   * Applied when input is disabled - reduces opacity and disables interaction\n   */\n  :host([disabled]) #password-icon,\n  :host([disabled]) #error-icon,\n  :host([disabled]) #warning-icon,\n  :host([disabled]) #number-icons,\n  :host([disabled]) #calendar-icon,\n  :host([disabled]) #copy-icon {\n    opacity: var(--hybrid-input-disabled-icon-opacity, var(--hybrid-input-local-disabled-icon-opacity));\n  }\n\n  /* Disabled icons cursor override */\n  :host([disabled]) #password-icon,\n  :host([disabled]) #number-icons,\n  :host([disabled]) #copy-icon {\n    cursor: not-allowed;\n  }\n\n  /* ========================================\n   * INPUT CONTAINER STYLES\n   * ======================================== */\n\n  /* \n   * Input wrapper - contains addons and input container\n   * Provides horizontal layout for addon before/after elements\n   */\n  .input-wrapper {\n    display: flex;\n    align-items: stretch;\n    width: 100%;\n  }\n\n  /* \n   * Addon before element - content before input (outside borders)\n   * Styled to visually connect with input\n   */\n  .input-addon-before {\n    background-color: var(--hybrid-input-addon-background-color, var(--hybrid-input-local-addon-background-color));\n    border: var(--hybrid-input-border, var(--hybrid-input-local-border));\n    border-right: none;\n    border-top-left-radius: var(--hybrid-input-border-radius, var(--hybrid-input-local-border-radius));\n    border-bottom-left-radius: var(--hybrid-input-border-radius, var(--hybrid-input-local-border-radius));\n    padding: var(--hybrid-input-addon-padding, var(--hybrid-input-local-addon-padding));\n    display: flex;\n    align-items: center;\n    color: var(--hybrid-input-addon-color, var(--hybrid-input-local-addon-color));\n    font-size: var(--hybrid-input-font-size, var(--hybrid-input-local-font-size));\n    white-space: nowrap;\n    min-width: 0; /* Allow shrinking */\n    flex-shrink: 0; /* Prevent shrinking */\n  }\n\n  /* \n   * Addon after element - content after input (outside borders)\n   * Styled to visually connect with input\n   */\n  .input-addon-after {\n    background-color: var(--hybrid-input-addon-background-color, var(--hybrid-input-local-addon-background-color));\n    border: var(--hybrid-input-border, var(--hybrid-input-local-border));\n    border-left: none;\n    border-top-right-radius: var(--hybrid-input-border-radius, var(--hybrid-input-local-border-radius));\n    border-bottom-right-radius: var(--hybrid-input-border-radius, var(--hybrid-input-local-border-radius));\n    padding: var(--hybrid-input-addon-padding, var(--hybrid-input-local-addon-padding));\n    display: flex;\n    align-items: center;\n    color: var(--hybrid-input-addon-color, var(--hybrid-input-local-addon-color));\n    font-size: var(--hybrid-input-font-size, var(--hybrid-input-local-font-size));\n    white-space: nowrap;\n    min-width: 0; /* Allow shrinking */\n    flex-shrink: 0; /* Prevent shrinking */\n  }\n\n  /* \n   * Input container border radius adjustments when addons are present\n   * Removes border radius on sides where addons are attached\n   */\n  .input-wrapper:has(.input-addon-before) #input-container {\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n    border-left: none;\n  }\n\n  .input-wrapper:has(.input-addon-after) #input-container {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-right: none;\n  }\n\n  /* \n   * Main input container element\n   * Uses CSS custom properties for comprehensive border and layout control\n   */\n  #input-container {\n    /* Border properties - individual sides for granular control */\n    border-bottom: var(--hybrid-input-border-bottom, var(--hybrid-input-local-border-bottom));\n    border-top: var(--hybrid-input-border-top, var(--hybrid-input-local-border-top));\n    border-left: var(--hybrid-input-border-left, var(--hybrid-input-local-border-left));\n    border-right: var(--hybrid-input-border-right, var(--hybrid-input-local-border-right));\n    \n    /* Border radius - individual corners for design flexibility */\n    border-radius: var(--hybrid-input-border-radius, var(--hybrid-input-local-border-radius)); \n    border-top-left-radius: var(--hybrid-input-border-top-left-radius, var(--hybrid-input-local-border-top-left-radius));\n    border-top-right-radius: var(--hybrid-input-border-top-right-radius, var(--hybrid-input-local-border-top-right-radius));\n    border-bottom-left-radius: var(--hybrid-input-border-bottom-left-radius, var(--hybrid-input-local-border-bottom-left-radius));\n    border-bottom-right-radius: var(--hybrid-input-border-bottom-right-radius, var(--hybrid-input-local-border-bottom-right-radius));\n    \n    /* Layout */\n    display: flex;\n    position: relative;\n    flex: 1; /* Take available space in wrapper */\n    min-width: 0; /* Allow shrinking below content size */\n  }\n\n  /* \n   * Disabled container border styles\n   * Applied when input is disabled\n   */\n  :host([disabled]) #input-container {\n    border-bottom: var(--hybrid-input-disabled-border-bottom, var(--hybrid-input-local-disabled-border-bottom));\n    border-top: var(--hybrid-input-disabled-border-top, var(--hybrid-input-local-disabled-border-top));\n    border-left: var(--hybrid-input-disabled-border-left, var(--hybrid-input-local-disabled-border-left));\n    border-right: var(--hybrid-input-disabled-border-right, var(--hybrid-input-local-disabled-border-right));\n    opacity: 0.6;\n  }\n\n  /* ========================================\n   * INPUT ELEMENT STYLES\n   * ======================================== */\n\n  /* \n   * Base input element styling\n   * Full width with no default borders, using container for styling\n   */\n  input {\n    width: 100%;\n    border: none;\n    outline: none;\n    color: var(--hybrid-input-text-color, var(--hybrid-input-local-text-color));\n    font-family: var(--hybrid-input-font-family, var(--hybrid-input-local-font-family));\n    font-size: var(--hybrid-input-font-size, var(--hybrid-input-local-font-size));\n  }\n\n  /* Remove default number input spinners */\n  /* Chrome, Safari, Edge, Opera */\n  input::-webkit-outer-spin-button,\n  input::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n  \n  /* Firefox */\n  input[type='number'] {\n    -moz-appearance: textfield;\n  }\n\n  /* ========================================\n   * STATE STYLES\n   * ======================================== */\n\n  /* \n   * Error state styling\n   * Applied when state='error' and not disabled\n   */\n  :host(:not([disabled])[state='error']) > #input-container {\n    border: var(--hybrid-input-error-border, var(--hybrid-input-local-error-border));\n  }\n\n  /* \n   * Focus state styling\n   * Applied when input receives focus and not in error state\n   */\n  :host(:not([state='error'])) > #input-container:focus-within {\n    border: var(--hybrid-input-focus-border, var(--hybrid-input-local-focus-border));\n  }\n\n  /* \n   * Number input icon positioning adjustments for error/warning states\n   * When validation states are present, adjust icon positioning\n   */\n  :host([state='error']) input[type='number'] ~ #number-icons,\n  :host([state='warning']) input[type='number'] ~ #number-icons {\n    position: static;\n    padding-left: var(--hybrid-input-number-icons-container-padding-left, var(--hybrid-input-local-number-icons-container-padding-left));\n  }\n\n  /* ========================================\n   * SLOTTED CONTENT STYLES\n   * ======================================== */\n\n  /* \n   * Label slot styling\n   * Applied to slotted label elements\n   */\n  ::slotted([slot='label']) {\n    color: var(--hybrid-input-label-color, var(--hybrid-input-local-label-color));\n    font-size: var(--hybrid-input-label-font-size, var(--hybrid-input-local-label-font-size));\n    padding-bottom: var(--hybrid-input-label-padding-bottom, var(--hybrid-input-local-label-padding-bottom));\n  }\n\n  /* \n   * Helper text slot styling\n   * Applied to slotted helper text elements\n   */\n  ::slotted([slot='helper-text']) {\n    color: var(--hybrid-input-helper-text-color, var(--hybrid-input-local-helper-text-color));\n    font-size: var(--hybrid-input-helper-text-font-size, var(--hybrid-input-local-helper-text-font-size));\n    padding-top: var(--hybrid-input-helper-text-padding-top, var(--hybrid-input-local-helper-text-padding-top));\n  }\n\n  /* \n   * State-specific helper text colors\n   * Override helper text color based on validation state\n   */\n  :host([state='error']) ::slotted([slot='helper-text']) {\n    color: var(--hybrid-input-error-helper-text-color, var(--hybrid-input-local-error-helper-text-color));\n  }\n\n  :host([state='warning']) ::slotted([slot='helper-text']) {\n    color: var(--hybrid-input-warning-helper-text-color, var(--hybrid-input-local-warning-helper-text-color));\n  }\n\n  /* \n   * Disabled state for slotted content\n   * Applied when input is disabled\n   */\n  :host([disabled]) ::slotted([slot='helper-text']) {\n    color: var(--hybrid-input-disabled-helper-text-color, var(--hybrid-input-local-disabled-helper-text-color));\n  }\n\n  :host([disabled]) ::slotted([slot='label']) {\n    color: var(--hybrid-input-disabled-label-color, var(--hybrid-input-local-disabled-label-color));\n  }\n\n  /* \n   * Prefix slot styling\n   * Applied to slotted prefix content (icons, text, etc.)\n   */\n  ::slotted([slot='prefix']) {\n    display: flex;\n    align-items: center;\n    padding-right: var(--hybrid-input-prefix-padding-right, var(--hybrid-input-local-prefix-padding-right));\n    color: var(--hybrid-input-prefix-color, var(--hybrid-input-local-prefix-color));\n    font-size: var(--hybrid-input-prefix-font-size, var(--hybrid-input-local-prefix-font-size));\n    flex-shrink: 0;\n  }\n\n  /* \n   * Suffix slot styling\n   * Applied to slotted suffix content (icons, text, etc.)\n   */\n  ::slotted([slot='suffix']) {\n    display: flex;\n    align-items: center;\n    padding-left: var(--hybrid-input-suffix-padding-left, var(--hybrid-input-local-suffix-padding-left));\n    color: var(--hybrid-input-suffix-color, var(--hybrid-input-local-suffix-color));\n    font-size: var(--hybrid-input-suffix-font-size, var(--hybrid-input-local-suffix-font-size));\n    flex-shrink: 0;\n  }\n\n  /* \n   * Disabled state for prefix and suffix slots\n   * Applied when input is disabled\n   */\n  :host([disabled]) ::slotted([slot='prefix']),\n  :host([disabled]) ::slotted([slot='suffix']) {\n    opacity: var(--hybrid-input-disabled-icon-opacity, var(--hybrid-input-local-disabled-icon-opacity));\n    color: var(--hybrid-input-disabled-prefix-suffix-color, var(--hybrid-input-local-disabled-prefix-suffix-color));\n  }\n`;\n\n/**\n * Size variation styles for the input component\n * Defines padding and spacing for different input sizes\n */\nconst sizeInputStyle = css`\n  /* ========================================\n   * SIZE VARIATIONS\n   * ======================================== */\n\n  /* Large input size variant */\n  div[data-size='large'] {\n    padding-top: var(--hybrid-input-large-padding-top, var(--hybrid-input-local-large-padding-top));\n    padding-bottom: var(--hybrid-input-large-padding-bottom, var(--hybrid-input-local-large-padding-bottom));\n    padding-left: var(--hybrid-input-large-padding-left, var(--hybrid-input-local-large-padding-left));\n    padding-right: var(--hybrid-input-large-padding-right, var(--hybrid-input-local-large-padding-right));\n  }\n\n  /* Medium input size variant (default) */\n  div[data-size='medium'] {\n    padding-top: var(--hybrid-input-medium-padding-top, var(--hybrid-input-local-medium-padding-top));\n    padding-bottom: var(--hybrid-input-medium-padding-bottom, var(--hybrid-input-local-medium-padding-bottom));\n    padding-left: var(--hybrid-input-medium-padding-left, var(--hybrid-input-local-medium-padding-left));\n    padding-right: var(--hybrid-input-medium-padding-right, var(--hybrid-input-local-medium-padding-right));\n  }\n\n  /* Small input size variant */\n  div[data-size='small'] {\n    padding-top: var(--hybrid-input-small-padding-top, var(--hybrid-input-local-small-padding-top));\n    padding-bottom: var(--hybrid-input-small-padding-bottom, var(--hybrid-input-local-small-padding-bottom));\n    padding-left: var(--hybrid-input-small-padding-left, var(--hybrid-input-local-small-padding-left));\n    padding-right: var(--hybrid-input-small-padding-right, var(--hybrid-input-local-small-padding-right));\n  }\n`;\n\nexport const styles = [inputStyle, sizeInputStyle, styleVariables];\n"]}
+{"version":3,"file":"input.style.js","sourceRoot":"","sources":["../../../src/components/input/input.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D;;;;;;;;;;;;;;GAcG;AAEH,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsfrB,CAAC;AAEF;;;GAGG;AACH,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CzB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,UAAU,EAAE,cAAc,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\nimport { styleVariables } from './input.style.variable.js';\n\n/**\n * Input component styles for the Hybrid UI Library\n * \n * This file contains all the styling for the nr-input component, including:\n * - Base input styles with CSS custom properties for theming\n * - Multiple input states (default, warning, error)\n * - Size variations (small, medium, large)\n * - Different input types (text, password, number, calendar)\n * - Icon positioning and styling\n * - Focus, disabled, and validation states\n * - Dark theme support\n * \n * The styling system uses CSS custom properties with fallbacks to allow\n * for both global and local customization of input appearance.\n */\n\nconst inputStyle = css`\n  /* \n   * Host element base styles\n   * Container for the input component with flexible layout\n   */\n  :host {\n    display: flex;\n    flex-direction: column;\n    font-family: var(--hybrid-input-font-family, var(--hybrid-input-local-font-family));\n  }\n\n  /* \n   * Base input wrapper and input element styles\n   * Background applied to wrapper to cover entire container including addons\n   * Uses CSS custom properties with fallbacks for comprehensive theming support\n   * Properties follow the pattern: --hybrid-input-{property}, --hybrid-input-local-{property}\n   */\n  .input-wrapper {\n    background-color: var(--hybrid-input-background-color, var(--hybrid-input-local-background-color));\n  }\n\n  #input-container > input {\n    background-color: transparent;\n  }\n\n  /* \n   * Disabled state styles for wrapper and input\n   * Applied when input is disabled - removes interactivity and applies muted colors\n   */\n  :host([disabled]) .input-wrapper {\n    background-color: var(--hybrid-input-disabled-background-color, var(--hybrid-input-local-disabled-background-color));\n  }\n\n  :host([disabled]) #input-container > input {\n    background-color: transparent;\n    cursor: not-allowed;\n  }\n\n  /* \n   * Icon base styles\n   * Common styling for all icons within the input component\n   */\n  hy-icon {\n    display: flex;\n    align-items: center;\n  }\n\n  /* \n   * Placeholder styling\n   * Customizable placeholder text appearance\n   */\n  ::placeholder {\n    color: var(--hybrid-input-placeholder-color, var(--hybrid-input-local-placeholder-color));\n    font-size: var(--hybrid-input-placeholder-font-size, var(--hybrid-input-local-placeholder-font-size));\n    font-family: var(--hybrid-input-font-family, var(--hybrid-input-local-font-family));\n  }\n\n  /* \n   * Disabled placeholder styling\n   * Applied when input is disabled\n   */\n  :host([disabled]) ::placeholder {\n    color: var(--hybrid-input-disabled-placeholder-color, var(--hybrid-input-local-disabled-placeholder-color));\n  }\n\n  /* ========================================\n   * ICON VARIANTS AND STATES\n   * ======================================== */\n\n  /* Warning state icon */\n  #warning-icon {\n    --hybrid-icon-color: var(--hybrid-input-warning-icon-color, var(--hybrid-input-local-warning-icon-color));\n  }\n\n  /* Error state icon */\n  #error-icon {\n    --hybrid-icon-color: var(--hybrid-input-error-icon-color, var(--hybrid-input-local-error-icon-color));\n  }\n\n  /* Calendar input type icon */\n  #calendar-icon {\n    --hybrid-icon-color: var(--hybrid-input-calendar-icon-color, var(--hybrid-input-local-calendar-icon-color));\n  }\n\n  /* Password toggle icon */\n  #password-icon {\n    padding-left: var(--hybrid-input-password-icon-padding-left, var(--hybrid-input-local-password-icon-padding-left));\n    padding-right: var(--hybrid-input-password-icon-padding-right, var(--hybrid-input-local-password-icon-padding-right));\n    cursor: pointer;\n    --hybrid-icon-color: var(--hybrid-input-password-icon-color, var(--hybrid-input-local-password-icon-color));\n  }\n\n  /* Copy functionality icon */\n  #copy-icon {\n    padding-right: var(--hybrid-input-copy-icon-padding-right, var(--hybrid-input-local-copy-icon-padding-right));\n    --hybrid-icon-color: var(--hybrid-input-copy-icon-color, var(--hybrid-input-local-copy-icon-color));\n    cursor: pointer;\n  }\n\n  /* Clear functionality icon */\n  #clear-icon {\n    padding-right: var(--hybrid-input-clear-icon-padding-right, var(--hybrid-input-local-clear-icon-padding-right));\n    --hybrid-icon-color: var(--hybrid-input-clear-icon-color, var(--hybrid-input-local-clear-icon-color));\n    cursor: pointer;\n  }\n\n  /* \n   * Number input increment/decrement icons container\n   * Positioned absolutely for overlay on input\n   */\n  #number-icons {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    cursor: pointer;\n    position: absolute;\n    right: 0;\n    top: 0;\n    height: 100%;\n    width: var(--hybrid-input-number-icons-container-width, var(--hybrid-input-local-number-icons-container-width));\n    padding-right: var(--hybrid-input-number-icons-container-padding-right, var(--hybrid-input-local-number-icons-container-padding-right));\n  }\n\n  /* Individual number icons styling */\n  #number-icons hy-icon {\n    --hybrid-icon-color: var(--hybrid-input-number-icons-color, var(--hybrid-input-local-number-icons-color));\n    padding-left: var(--hybrid-input-number-icons-padding-left, var(--hybrid-input-local-number-icons-padding-left));\n    padding-right: var(--hybrid-input-number-icons-padding-right, var(--hybrid-input-local-number-icons-padding-right));\n    width: var(--hybrid-input-number-icons-width, var(--hybrid-input-local-number-icons-width));\n    height: var(--hybrid-input-number-icons-height, var(--hybrid-input-local-number-icons-height));\n  }\n\n  /* Number icons separator styling */\n  #icons-separator {\n    color: var(--hybrid-input-number-icons-separator-color, var(--hybrid-input-local-number-icons-separator-color));\n    padding-bottom: var(--hybrid-input-number-icons-separator-padding-bottom, var(--hybrid-input-local-number-icons-separator-padding-bottom));\n    padding-left: var(--hybrid-input-number-icons-separator-padding-left, var(--hybrid-input-local-number-icons-separator-padding-left));\n    padding-right: var(--hybrid-input-number-icons-separator-padding-right, var(--hybrid-input-local-number-icons-separator-padding-right));\n  }\n\n  /* \n   * Disabled state for all icons\n   * Applied when input is disabled - reduces opacity and disables interaction\n   */\n  :host([disabled]) #password-icon,\n  :host([disabled]) #error-icon,\n  :host([disabled]) #warning-icon,\n  :host([disabled]) #number-icons,\n  :host([disabled]) #calendar-icon,\n  :host([disabled]) #copy-icon,\n  :host([disabled]) #clear-icon {\n    opacity: var(--hybrid-input-disabled-icon-opacity, var(--hybrid-input-local-disabled-icon-opacity));\n  }\n\n  /* Disabled icons cursor override */\n  :host([disabled]) #password-icon,\n  :host([disabled]) #number-icons,\n  :host([disabled]) #copy-icon,\n  :host([disabled]) #clear-icon {\n    cursor: not-allowed;\n  }\n\n  /* ========================================\n   * INPUT CONTAINER STYLES\n   * ======================================== */\n\n  /* \n   * Input wrapper - contains addons and input container\n   * Provides horizontal layout for addon before/after elements\n   */\n  .input-wrapper {\n    display: flex;\n    align-items: stretch;\n    width: 100%;\n  }\n\n  /* \n   * Addon before element - content before input (outside borders)\n   * Styled to visually connect with input\n   */\n  .input-addon-before {\n    background-color: var(--hybrid-input-addon-background-color, var(--hybrid-input-local-addon-background-color));\n    border: var(--hybrid-input-border, var(--hybrid-input-local-border));\n    border-right: none;\n    border-top-left-radius: var(--hybrid-input-border-radius, var(--hybrid-input-local-border-radius));\n    border-bottom-left-radius: var(--hybrid-input-border-radius, var(--hybrid-input-local-border-radius));\n    padding: var(--hybrid-input-addon-padding, var(--hybrid-input-local-addon-padding));\n    display: flex;\n    align-items: center;\n    color: var(--hybrid-input-addon-color, var(--hybrid-input-local-addon-color));\n    font-size: var(--hybrid-input-font-size, var(--hybrid-input-local-font-size));\n    white-space: nowrap;\n    min-width: 0; /* Allow shrinking */\n    flex-shrink: 0; /* Prevent shrinking */\n  }\n\n  /* \n   * Addon after element - content after input (outside borders)\n   * Styled to visually connect with input\n   */\n  .input-addon-after {\n    background-color: var(--hybrid-input-addon-background-color, var(--hybrid-input-local-addon-background-color));\n    border: var(--hybrid-input-border, var(--hybrid-input-local-border));\n    border-left: none;\n    border-top-right-radius: var(--hybrid-input-border-radius, var(--hybrid-input-local-border-radius));\n    border-bottom-right-radius: var(--hybrid-input-border-radius, var(--hybrid-input-local-border-radius));\n    padding: var(--hybrid-input-addon-padding, var(--hybrid-input-local-addon-padding));\n    display: flex;\n    align-items: center;\n    color: var(--hybrid-input-addon-color, var(--hybrid-input-local-addon-color));\n    font-size: var(--hybrid-input-font-size, var(--hybrid-input-local-font-size));\n    white-space: nowrap;\n    min-width: 0; /* Allow shrinking */\n    flex-shrink: 0; /* Prevent shrinking */\n  }\n\n  /* \n   * Input container border radius adjustments when addons are present\n   * Removes border radius on sides where addons are attached\n   */\n  .input-wrapper:has(.input-addon-before) #input-container {\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n    border-left: none;\n  }\n\n  .input-wrapper:has(.input-addon-after) #input-container {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-right: none;\n  }\n\n  /* \n   * Main input container element\n   * Uses CSS custom properties for comprehensive border and layout control\n   */\n  #input-container {\n    /* Border properties - individual sides for granular control */\n    border-bottom: var(--hybrid-input-border-bottom, var(--hybrid-input-local-border-bottom));\n    border-top: var(--hybrid-input-border-top, var(--hybrid-input-local-border-top));\n    border-left: var(--hybrid-input-border-left, var(--hybrid-input-local-border-left));\n    border-right: var(--hybrid-input-border-right, var(--hybrid-input-local-border-right));\n    \n    /* Border radius - individual corners for design flexibility */\n    border-radius: var(--hybrid-input-border-radius, var(--hybrid-input-local-border-radius)); \n    border-top-left-radius: var(--hybrid-input-border-top-left-radius, var(--hybrid-input-local-border-top-left-radius));\n    border-top-right-radius: var(--hybrid-input-border-top-right-radius, var(--hybrid-input-local-border-top-right-radius));\n    border-bottom-left-radius: var(--hybrid-input-border-bottom-left-radius, var(--hybrid-input-local-border-bottom-left-radius));\n    border-bottom-right-radius: var(--hybrid-input-border-bottom-right-radius, var(--hybrid-input-local-border-bottom-right-radius));\n    \n    /* Layout */\n    display: flex;\n    position: relative;\n    flex: 1; /* Take available space in wrapper */\n    min-width: 0; /* Allow shrinking below content size */\n  }\n\n  /* \n   * Disabled container border styles\n   * Applied when input is disabled\n   */\n  :host([disabled]) #input-container {\n    border-bottom: var(--hybrid-input-disabled-border-bottom, var(--hybrid-input-local-disabled-border-bottom));\n    border-top: var(--hybrid-input-disabled-border-top, var(--hybrid-input-local-disabled-border-top));\n    border-left: var(--hybrid-input-disabled-border-left, var(--hybrid-input-local-disabled-border-left));\n    border-right: var(--hybrid-input-disabled-border-right, var(--hybrid-input-local-disabled-border-right));\n    opacity: 0.6;\n  }\n\n  /* ========================================\n   * INPUT VARIANT STYLES\n   * ======================================== */\n\n  /* \n   * Outlined variant - full border around input\n   * Default: light border, focus: blue border\n   */\n  :host([variant='outlined']) #input-container {\n    border: var(--hybrid-input-outlined-border, var(--hybrid-input-local-outlined-border));\n    border-radius: var(--hybrid-input-outlined-border-radius, var(--hybrid-input-local-outlined-border-radius));\n    background-color: var(--hybrid-input-outlined-background, var(--hybrid-input-local-outlined-background));\n  }\n\n  :host([variant='outlined']) .input-wrapper {\n    background-color: transparent;\n  }\n\n  :host([variant='outlined']:not([state='error'])) #input-container:focus-within {\n    border: var(--hybrid-input-outlined-focus-border, var(--hybrid-input-local-outlined-focus-border));\n  }\n\n  /* \n   * Filled variant - background with bottom border only\n   * Subtle background with bottom border indication\n   */\n  :host([variant='filled']) #input-container {\n    background-color: var(--hybrid-input-filled-background, var(--hybrid-input-local-filled-background));\n    border-radius: var(--hybrid-input-filled-border-radius, var(--hybrid-input-local-filled-border-radius));\n    border-bottom: var(--hybrid-input-filled-border-bottom, var(--hybrid-input-local-filled-border-bottom));\n    border-top: none;\n    border-left: none;\n    border-right: none;\n  }\n\n  :host([variant='filled']) .input-wrapper {\n    background-color: transparent;\n  }\n\n  :host([variant='filled']:not([state='error'])) #input-container:focus-within {\n    border-bottom: var(--hybrid-input-filled-focus-border-bottom, var(--hybrid-input-local-filled-focus-border-bottom));\n    border-top: none;\n    border-left: none;\n    border-right: none;\n  }\n\n  /* \n   * Borderless variant - no borders, focus with outline\n   * Clean appearance with focus indication via outline\n   */\n  :host([variant='borderless']) #input-container {\n    background-color: var(--hybrid-input-borderless-background, var(--hybrid-input-local-borderless-background));\n    border: none;\n    border-radius: var(--hybrid-input-borderless-border-radius, var(--hybrid-input-local-borderless-border-radius));\n  }\n\n  :host([variant='borderless']) .input-wrapper {\n    background-color: transparent;\n  }\n\n  :host([variant='borderless']:not([state='error'])) #input-container:focus-within {\n    outline: var(--hybrid-input-borderless-focus-outline, var(--hybrid-input-local-borderless-focus-outline));\n    border: none;\n  }\n\n  /* \n   * Underlined variant - bottom border only (default/current behavior)\n   * Maintains existing behavior as default\n   */\n  :host([variant='underlined']) #input-container {\n    border-bottom: var(--hybrid-input-underlined-border-bottom, var(--hybrid-input-local-underlined-border-bottom));\n    border-top: none;\n    border-left: none;\n    border-right: none;\n    border-radius: 0;\n  }\n\n  :host([variant='underlined']:not([state='error'])) #input-container:focus-within {\n    border-bottom: var(--hybrid-input-underlined-focus-border-bottom, var(--hybrid-input-local-underlined-focus-border-bottom));\n    border-top: none;\n    border-left: none;\n    border-right: none;\n  }\n\n  /* ========================================\n   * INPUT ELEMENT STYLES\n   * ======================================== */\n\n  /* \n   * Base input element styling\n   * Full width with no default borders, using container for styling\n   */\n  input {\n    width: 100%;\n    border: none;\n    outline: none;\n    color: var(--hybrid-input-text-color, var(--hybrid-input-local-text-color));\n    font-family: var(--hybrid-input-font-family, var(--hybrid-input-local-font-family));\n    font-size: var(--hybrid-input-font-size, var(--hybrid-input-local-font-size));\n  }\n\n  /* Remove default number input spinners */\n  /* Chrome, Safari, Edge, Opera */\n  input::-webkit-outer-spin-button,\n  input::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n  \n  /* Firefox */\n  input[type='number'] {\n    -moz-appearance: textfield;\n  }\n\n  /* ========================================\n   * STATE STYLES\n   * ======================================== */\n\n  /* \n   * Error state styling - works with all variants\n   * Applied when state='error' and not disabled\n   */\n  :host(:not([disabled])[state='error']) #input-container {\n    border: var(--hybrid-input-error-border, var(--hybrid-input-local-error-border)) !important;\n    outline: none !important;\n  }\n\n  /* Override variant-specific error state styling */\n  :host([variant='borderless'][state='error']) #input-container {\n    border: var(--hybrid-input-error-border, var(--hybrid-input-local-error-border)) !important;\n    outline: none !important;\n  }\n\n  :host([variant='underlined'][state='error']) #input-container,\n  :host([variant='filled'][state='error']) #input-container {\n    border-top: none !important;\n    border-left: none !important;\n    border-right: none !important;\n    border-bottom: var(--hybrid-input-error-border, var(--hybrid-input-local-error-border)) !important;\n  }\n\n  /* \n   * Number input icon positioning adjustments for error/warning states\n   * When validation states are present, adjust icon positioning\n   */\n  :host([state='error']) input[type='number'] ~ #number-icons,\n  :host([state='warning']) input[type='number'] ~ #number-icons {\n    position: static;\n    padding-left: var(--hybrid-input-number-icons-container-padding-left, var(--hybrid-input-local-number-icons-container-padding-left));\n  }\n\n  /* ========================================\n   * SLOTTED CONTENT STYLES\n   * ======================================== */\n\n  /* \n   * Label slot styling\n   * Applied to slotted label elements\n   */\n  ::slotted([slot='label']) {\n    color: var(--hybrid-input-label-color, var(--hybrid-input-local-label-color));\n    font-size: var(--hybrid-input-label-font-size, var(--hybrid-input-local-label-font-size));\n    padding-bottom: var(--hybrid-input-label-padding-bottom, var(--hybrid-input-local-label-padding-bottom));\n  }\n\n  /* \n   * Helper text slot styling\n   * Applied to slotted helper text elements\n   */\n  ::slotted([slot='helper-text']) {\n    color: var(--hybrid-input-helper-text-color, var(--hybrid-input-local-helper-text-color));\n    font-size: var(--hybrid-input-helper-text-font-size, var(--hybrid-input-local-helper-text-font-size));\n    padding-top: var(--hybrid-input-helper-text-padding-top, var(--hybrid-input-local-helper-text-padding-top));\n  }\n\n  /* \n   * State-specific helper text colors\n   * Override helper text color based on validation state\n   */\n  :host([state='error']) ::slotted([slot='helper-text']) {\n    color: var(--hybrid-input-error-helper-text-color, var(--hybrid-input-local-error-helper-text-color));\n  }\n\n  :host([state='warning']) ::slotted([slot='helper-text']) {\n    color: var(--hybrid-input-warning-helper-text-color, var(--hybrid-input-local-warning-helper-text-color));\n  }\n\n  /* \n   * Disabled state for slotted content\n   * Applied when input is disabled\n   */\n  :host([disabled]) ::slotted([slot='helper-text']) {\n    color: var(--hybrid-input-disabled-helper-text-color, var(--hybrid-input-local-disabled-helper-text-color));\n  }\n\n  :host([disabled]) ::slotted([slot='label']) {\n    color: var(--hybrid-input-disabled-label-color, var(--hybrid-input-local-disabled-label-color));\n  }\n\n  /* \n   * Prefix slot styling\n   * Applied to slotted prefix content (icons, text, etc.)\n   */\n  ::slotted([slot='prefix']) {\n    display: flex;\n    align-items: center;\n    padding-right: var(--hybrid-input-prefix-padding-right, var(--hybrid-input-local-prefix-padding-right));\n    color: var(--hybrid-input-prefix-color, var(--hybrid-input-local-prefix-color));\n    font-size: var(--hybrid-input-prefix-font-size, var(--hybrid-input-local-prefix-font-size));\n    flex-shrink: 0;\n  }\n\n  /* \n   * Suffix slot styling\n   * Applied to slotted suffix content (icons, text, etc.)\n   */\n  ::slotted([slot='suffix']) {\n    display: flex;\n    align-items: center;\n    padding-left: var(--hybrid-input-suffix-padding-left, var(--hybrid-input-local-suffix-padding-left));\n    color: var(--hybrid-input-suffix-color, var(--hybrid-input-local-suffix-color));\n    font-size: var(--hybrid-input-suffix-font-size, var(--hybrid-input-local-suffix-font-size));\n    flex-shrink: 0;\n  }\n\n  /* \n   * Disabled state for prefix and suffix slots\n   * Applied when input is disabled\n   */\n  :host([disabled]) ::slotted([slot='prefix']),\n  :host([disabled]) ::slotted([slot='suffix']) {\n    opacity: var(--hybrid-input-disabled-icon-opacity, var(--hybrid-input-local-disabled-icon-opacity));\n    color: var(--hybrid-input-disabled-prefix-suffix-color, var(--hybrid-input-local-disabled-prefix-suffix-color));\n  }\n`;\n\n/**\n * Size variation styles for the input component\n * Defines padding and spacing for different input sizes\n */\nconst sizeInputStyle = css`\n  /* ========================================\n   * SIZE VARIATIONS\n   * ======================================== */\n\n  /* Large input size variant */\n  div[data-size='large'] {\n    padding-top: var(--hybrid-input-large-padding-top, var(--hybrid-input-local-large-padding-top));\n    padding-bottom: var(--hybrid-input-large-padding-bottom, var(--hybrid-input-local-large-padding-bottom));\n    padding-left: var(--hybrid-input-large-padding-left, var(--hybrid-input-local-large-padding-left));\n    padding-right: var(--hybrid-input-large-padding-right, var(--hybrid-input-local-large-padding-right));\n  }\n\n  /* Medium input size variant (default) */\n  div[data-size='medium'] {\n    padding-top: var(--hybrid-input-medium-padding-top, var(--hybrid-input-local-medium-padding-top));\n    padding-bottom: var(--hybrid-input-medium-padding-bottom, var(--hybrid-input-local-medium-padding-bottom));\n    padding-left: var(--hybrid-input-medium-padding-left, var(--hybrid-input-local-medium-padding-left));\n    padding-right: var(--hybrid-input-medium-padding-right, var(--hybrid-input-local-medium-padding-right));\n  }\n\n  /* Small input size variant */\n  div[data-size='small'] {\n    padding-top: var(--hybrid-input-small-padding-top, var(--hybrid-input-local-small-padding-top));\n    padding-bottom: var(--hybrid-input-small-padding-bottom, var(--hybrid-input-local-small-padding-bottom));\n    padding-left: var(--hybrid-input-small-padding-left, var(--hybrid-input-local-small-padding-left));\n    padding-right: var(--hybrid-input-small-padding-right, var(--hybrid-input-local-small-padding-right));\n  }\n\n  /* \n   * Character count display\n   * Shows character count and limit information\n   */\n  .character-count {\n    font-size: var(--hybrid-input-character-count-font-size, var(--hybrid-input-local-character-count-font-size));\n    color: var(--hybrid-input-character-count-color, var(--hybrid-input-local-character-count-color));\n    text-align: right;\n    margin-top: var(--hybrid-input-character-count-margin-top, var(--hybrid-input-local-character-count-margin-top));\n    font-family: var(--hybrid-input-font-family, var(--hybrid-input-local-font-family));\n  }\n\n  /* Character count over limit styling */\n  .character-count[data-over-limit] {\n    color: var(--hybrid-input-character-count-over-limit-color, var(--hybrid-input-local-character-count-over-limit-color));\n  }\n`;\n\nexport const styles = [inputStyle, sizeInputStyle, styleVariables];\n"]}

package/input.style.variable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.style.variable.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.style.variable.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,yBAsH1B,CAAC"}
+{"version":3,"file":"input.style.variable.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.style.variable.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,yBA2K1B,CAAC"}

package/input.style.variable.js

@@ -35,6 +35,9 @@ export const styleVariables = css `
     --hybrid-input-local-password-icon-color: #000000;
     --hybrid-input-local-calendar-icon-color: #000000;
     --hybrid-input-local-copy-icon-color: #000000;
+    --hybrid-input-local-copy-icon-padding-right:5px;
+    --hybrid-input-local-clear-icon-color: #000000;
+    --hybrid-input-local-clear-icon-padding-right: 5px;
     --hybrid-input-local-disabled-icon-opacity: 0.4;
     --hybrid-input-local-number-icons-color: #000000;
     --hybrid-input-local-password-icon-padding-left: 8px;
@@ -82,6 +85,34 @@ export const styleVariables = css `
     --hybrid-input-local-addon-background-color: #e8e8e8;
     --hybrid-input-local-addon-color: #525252;
     --hybrid-input-local-addon-padding: 8px 12px;
+
+    /* Character count styling variables */
+    --hybrid-input-local-character-count-font-size: 12px;
+    --hybrid-input-local-character-count-color: #8c8c8c;
+    --hybrid-input-local-character-count-margin-top: 4px;
+    --hybrid-input-local-character-count-over-limit-color: #da1e28;
+
+    /* Input Variant Variables */
+    /* Outlined variant - full border */
+    --hybrid-input-local-outlined-border: 1px solid #d0d0d0;
+    --hybrid-input-local-outlined-border-radius: 6px;
+    --hybrid-input-local-outlined-focus-border: 2px solid #0f62fe;
+    --hybrid-input-local-outlined-background: #ffffff;
+
+    /* Filled variant - background with subtle border */
+    --hybrid-input-local-filled-background: #f4f4f4;
+    --hybrid-input-local-filled-border-bottom: 2px solid transparent;
+    --hybrid-input-local-filled-focus-border-bottom: 2px solid #0f62fe;
+    --hybrid-input-local-filled-border-radius: 6px 6px 0 0;
+
+    /* Borderless variant - no borders */
+    --hybrid-input-local-borderless-background: transparent;
+    --hybrid-input-local-borderless-focus-outline: 2px solid #0f62fe;
+    --hybrid-input-local-borderless-border-radius: 6px;
+
+    /* Underlined variant - bottom border only (current default) */
+    --hybrid-input-local-underlined-border-bottom: 2px solid #a8a8a8;
+    --hybrid-input-local-underlined-focus-border-bottom: 2px solid #0f62fe;
   }
 
   /* 
@@ -107,6 +138,7 @@ export const styleVariables = css `
     --hybrid-input-local-number-icons-separator-color: #525252;
     --hybrid-input-local-calendar-icon-color: #ffffff;
     --hybrid-input-local-copy-icon-color: #ffffff;
+    --hybrid-input-local-clear-icon-color: #ffffff;
     
     /* Dark theme prefix and suffix colors */
     --hybrid-input-local-prefix-color: #c6c6c6;
@@ -116,6 +148,27 @@ export const styleVariables = css `
     /* Dark theme addon colors */
     --hybrid-input-local-addon-background-color: #525252;
     --hybrid-input-local-addon-color: #c6c6c6;
+
+    /* Dark theme character count colors */
+    --hybrid-input-local-character-count-color: #8c8c8c;
+    --hybrid-input-local-character-count-over-limit-color: #fa4d56;
+
+    /* Dark theme input variant variables */
+    /* Outlined variant - dark theme */
+    --hybrid-input-local-outlined-border: 1px solid #525252;
+    --hybrid-input-local-outlined-focus-border: 2px solid #ffffff;
+    --hybrid-input-local-outlined-background: #393939;
+
+    /* Filled variant - dark theme */
+    --hybrid-input-local-filled-background: #525252;
+    --hybrid-input-local-filled-focus-border-bottom: 2px solid #ffffff;
+
+    /* Borderless variant - dark theme */
+    --hybrid-input-local-borderless-background: transparent;
+    --hybrid-input-local-borderless-focus-outline: 2px solid #ffffff;
+
+    /* Underlined variant - dark theme */
+    --hybrid-input-local-underlined-focus-border-bottom: 2px solid #ffffff;
   }
 `;
 //# sourceMappingURL=input.style.variable.js.map

package/input.style.variable.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.style.variable.js","sourceRoot":"","sources":["../../../src/components/input/input.style.variable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsHhC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styleVariables = css`\n  :host {\n    --hybrid-input-local-background-color: #f4f4f4;\n    --hybrid-input-local-text-color: #000000;\n    --hybrid-input-local-font-family: Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Ubuntu, Cantarell, \"Noto Sans\", sans-serif, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, SFProLocalRange;\n    --hybrid-input-local-font-size:13px;\n    --hybrid-input-local-label-color: #525252;\n    --hybrid-input-local-placeholder-color: #a8a8a8;\n    --hybrid-input-local-border-bottom: 2px solid #a8a8a8;\n    --hybrid-input-local-border-top: 2px solid transparent;\n    --hybrid-input-local-border-left: 2px solid transparent;\n    --hybrid-input-local-border-right: 2px solid transparent;\n    --hybrid-input-local-disabled-border-bottom: none;\n    --hybrid-input-local-disabled-border-top: none;\n    --hybrid-input-local-disabled-border-left: none;\n    --hybrid-input-local-disabled-border-right: none;\n    --hybrid-input-local-focus-border: 2px solid #0f62fe;\n    --hybrid-input-local-border-radius: 0px;\n    --hybrid-input-local-label-font-size: 13px;\n    --hybrid-input-local-helper-text-color: #525252;\n    --hybrid-input-local-helper-text-font-size: 13px;\n    --hybrid-input-local-placeholder-font-size: 13px;\n    --hybrid-input-label-padding-bottom: 5px;\n    --hybrid-input-local-helper-text-padding-top: 5px;\n    --hybrid-input-local-disabled-background-color: #f4f4f4;\n    --hybrid-input-local-disabled-placeholder-color: #c6c6c6;\n    --hybrid-input-local-error-helper-text-color: #da1e28;\n    --hybrid-input-local-error-border: 2px solid #da1e28;\n    --hybrid-input-local-warning-helper-text-color: #161616;\n    --hybrid-input-local-disabled-helper-text-color: #c6c6c6;\n    --hybrid-input-local-disabled-label-color: #c6c6c6;\n    --hybrid-input-local-warning-icon-color: #f0c300;\n    --hybrid-input-local-error-icon-color: #da1e28;\n    --hybrid-input-local-password-icon-color: #000000;\n    --hybrid-input-local-calendar-icon-color: #000000;\n    --hybrid-input-local-copy-icon-color: #000000;\n    --hybrid-input-local-disabled-icon-opacity: 0.4;\n    --hybrid-input-local-number-icons-color: #000000;\n    --hybrid-input-local-password-icon-padding-left: 8px;\n    --hybrid-input-local-password-icon-padding-right: 8px;\n    --hybrid-input-local-number-icons-separator-color: #e0e0e0;\n    --hybrid-input-local-number-icons-separator-padding-bottom: 4px;\n    --hybrid-input-local-number-icons-separator-padding-left: 5px;\n    --hybrid-input-local-number-icons-separator-padding-right: 5px;\n    --hybrid-input-local-copy-icon-padding-right:5px;\n\n    --hybrid-input-local-number-icons-container-width: 70px;\n    --hybrid-input-local-number-icons-container-padding-left: 5px;\n    --hybrid-input-local-number-icons-container-padding-right: 5px;\n    --hybrid-input-local-number-icons-width: 12px;\n    --hybrid-input-local-number-icons-height: 12px;\n\n    --hybrid-input-local-number-icons-padding-left: 4px;\n    --hybrid-input-local-number-icons-padding-right: 4px;\n\n    --hybrid-input-local-large-padding-top: 10px;\n    --hybrid-input-local-large-padding-bottom: 10px;\n    --hybrid-input-local-large-padding-left: 9px;\n    --hybrid-input-local-large-padding-right: 4px;\n\n    --hybrid-input-local-medium-padding-top: 7px;\n    --hybrid-input-local-medium-padding-bottom: 7px;\n    --hybrid-input-local-medium-padding-left: 9px;\n    --hybrid-input-local-medium-padding-right: 4px;\n\n    --hybrid-input-local-small-padding-top: 4px;\n    --hybrid-input-local-small-padding-bottom: 4px;\n    --hybrid-input-local-small-padding-left: 9px;\n    --hybrid-input-local-small-padding-right: 4px;\n\n    /* Prefix and Suffix styling variables */\n    --hybrid-input-local-prefix-color: #525252;\n    --hybrid-input-local-prefix-font-size: 13px;\n    --hybrid-input-local-prefix-padding-right: 8px;\n    --hybrid-input-local-suffix-color: #525252;\n    --hybrid-input-local-suffix-font-size: 13px;\n    --hybrid-input-local-suffix-padding-left: 8px;\n    --hybrid-input-local-disabled-prefix-suffix-color: #c6c6c6;\n\n    /* Addon Before/After styling variables */\n    --hybrid-input-local-addon-background-color: #e8e8e8;\n    --hybrid-input-local-addon-color: #525252;\n    --hybrid-input-local-addon-padding: 8px 12px;\n  }\n\n  /* \n   * These override the light theme defaults when data-theme=\"dark\" is applied\n   * This provides explicit theme control via JavaScript or HTML attributes\n   */\n  .input-wrapper[data-theme=\"dark\"] {\n    --hybrid-input-local-background-color: #393939;\n    --hybrid-input-local-focus-border: 2px solid #ffffff;\n    --hybrid-input-local-text-color: #ffffff;\n    --hybrid-input-local-error-border: 2px solid #fa4d56;\n    --hybrid-input-local-error-helper-text-color: #ffb3b8;\n    --hybrid-input-local-disabled-background-color: #393939;\n    --hybrid-input-local-disabled-placeholder-color: #6f6f6f;\n    --hybrid-input-local-disabled-helper-text-color: #6f6f6f;\n    --hybrid-input-local-disabled-label-color: #6f6f6f;\n    --hybrid-input-local-warning-icon-color: #f0c300;\n    --hybrid-input-local-error-icon-color: #da1e28;\n    --hybrid-input-local-password-icon-color: #ffffff;\n    --hybrid-input-local-number-icons-color: #ffffff;\n    --hybrid-input-local-label-color: #c6c6c6;\n    --hybrid-input-local-helper-text-color: #c6c6c6;\n    --hybrid-input-local-number-icons-separator-color: #525252;\n    --hybrid-input-local-calendar-icon-color: #ffffff;\n    --hybrid-input-local-copy-icon-color: #ffffff;\n    \n    /* Dark theme prefix and suffix colors */\n    --hybrid-input-local-prefix-color: #c6c6c6;\n    --hybrid-input-local-suffix-color: #c6c6c6;\n    --hybrid-input-local-disabled-prefix-suffix-color: #6f6f6f;\n\n    /* Dark theme addon colors */\n    --hybrid-input-local-addon-background-color: #525252;\n    --hybrid-input-local-addon-color: #c6c6c6;\n  }\n`;\n"]}
+{"version":3,"file":"input.style.variable.js","sourceRoot":"","sources":["../../../src/components/input/input.style.variable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2KhC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styleVariables = css`\n  :host {\n    --hybrid-input-local-background-color: #f4f4f4;\n    --hybrid-input-local-text-color: #000000;\n    --hybrid-input-local-font-family: Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Ubuntu, Cantarell, \"Noto Sans\", sans-serif, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, SFProLocalRange;\n    --hybrid-input-local-font-size:13px;\n    --hybrid-input-local-label-color: #525252;\n    --hybrid-input-local-placeholder-color: #a8a8a8;\n    --hybrid-input-local-border-bottom: 2px solid #a8a8a8;\n    --hybrid-input-local-border-top: 2px solid transparent;\n    --hybrid-input-local-border-left: 2px solid transparent;\n    --hybrid-input-local-border-right: 2px solid transparent;\n    --hybrid-input-local-disabled-border-bottom: none;\n    --hybrid-input-local-disabled-border-top: none;\n    --hybrid-input-local-disabled-border-left: none;\n    --hybrid-input-local-disabled-border-right: none;\n    --hybrid-input-local-focus-border: 2px solid #0f62fe;\n    --hybrid-input-local-border-radius: 0px;\n    --hybrid-input-local-label-font-size: 13px;\n    --hybrid-input-local-helper-text-color: #525252;\n    --hybrid-input-local-helper-text-font-size: 13px;\n    --hybrid-input-local-placeholder-font-size: 13px;\n    --hybrid-input-label-padding-bottom: 5px;\n    --hybrid-input-local-helper-text-padding-top: 5px;\n    --hybrid-input-local-disabled-background-color: #f4f4f4;\n    --hybrid-input-local-disabled-placeholder-color: #c6c6c6;\n    --hybrid-input-local-error-helper-text-color: #da1e28;\n    --hybrid-input-local-error-border: 2px solid #da1e28;\n    --hybrid-input-local-warning-helper-text-color: #161616;\n    --hybrid-input-local-disabled-helper-text-color: #c6c6c6;\n    --hybrid-input-local-disabled-label-color: #c6c6c6;\n    --hybrid-input-local-warning-icon-color: #f0c300;\n    --hybrid-input-local-error-icon-color: #da1e28;\n    --hybrid-input-local-password-icon-color: #000000;\n    --hybrid-input-local-calendar-icon-color: #000000;\n    --hybrid-input-local-copy-icon-color: #000000;\n    --hybrid-input-local-copy-icon-padding-right:5px;\n    --hybrid-input-local-clear-icon-color: #000000;\n    --hybrid-input-local-clear-icon-padding-right: 5px;\n    --hybrid-input-local-disabled-icon-opacity: 0.4;\n    --hybrid-input-local-number-icons-color: #000000;\n    --hybrid-input-local-password-icon-padding-left: 8px;\n    --hybrid-input-local-password-icon-padding-right: 8px;\n    --hybrid-input-local-number-icons-separator-color: #e0e0e0;\n    --hybrid-input-local-number-icons-separator-padding-bottom: 4px;\n    --hybrid-input-local-number-icons-separator-padding-left: 5px;\n    --hybrid-input-local-number-icons-separator-padding-right: 5px;\n    --hybrid-input-local-copy-icon-padding-right:5px;\n\n    --hybrid-input-local-number-icons-container-width: 70px;\n    --hybrid-input-local-number-icons-container-padding-left: 5px;\n    --hybrid-input-local-number-icons-container-padding-right: 5px;\n    --hybrid-input-local-number-icons-width: 12px;\n    --hybrid-input-local-number-icons-height: 12px;\n\n    --hybrid-input-local-number-icons-padding-left: 4px;\n    --hybrid-input-local-number-icons-padding-right: 4px;\n\n    --hybrid-input-local-large-padding-top: 10px;\n    --hybrid-input-local-large-padding-bottom: 10px;\n    --hybrid-input-local-large-padding-left: 9px;\n    --hybrid-input-local-large-padding-right: 4px;\n\n    --hybrid-input-local-medium-padding-top: 7px;\n    --hybrid-input-local-medium-padding-bottom: 7px;\n    --hybrid-input-local-medium-padding-left: 9px;\n    --hybrid-input-local-medium-padding-right: 4px;\n\n    --hybrid-input-local-small-padding-top: 4px;\n    --hybrid-input-local-small-padding-bottom: 4px;\n    --hybrid-input-local-small-padding-left: 9px;\n    --hybrid-input-local-small-padding-right: 4px;\n\n    /* Prefix and Suffix styling variables */\n    --hybrid-input-local-prefix-color: #525252;\n    --hybrid-input-local-prefix-font-size: 13px;\n    --hybrid-input-local-prefix-padding-right: 8px;\n    --hybrid-input-local-suffix-color: #525252;\n    --hybrid-input-local-suffix-font-size: 13px;\n    --hybrid-input-local-suffix-padding-left: 8px;\n    --hybrid-input-local-disabled-prefix-suffix-color: #c6c6c6;\n\n    /* Addon Before/After styling variables */\n    --hybrid-input-local-addon-background-color: #e8e8e8;\n    --hybrid-input-local-addon-color: #525252;\n    --hybrid-input-local-addon-padding: 8px 12px;\n\n    /* Character count styling variables */\n    --hybrid-input-local-character-count-font-size: 12px;\n    --hybrid-input-local-character-count-color: #8c8c8c;\n    --hybrid-input-local-character-count-margin-top: 4px;\n    --hybrid-input-local-character-count-over-limit-color: #da1e28;\n\n    /* Input Variant Variables */\n    /* Outlined variant - full border */\n    --hybrid-input-local-outlined-border: 1px solid #d0d0d0;\n    --hybrid-input-local-outlined-border-radius: 6px;\n    --hybrid-input-local-outlined-focus-border: 2px solid #0f62fe;\n    --hybrid-input-local-outlined-background: #ffffff;\n\n    /* Filled variant - background with subtle border */\n    --hybrid-input-local-filled-background: #f4f4f4;\n    --hybrid-input-local-filled-border-bottom: 2px solid transparent;\n    --hybrid-input-local-filled-focus-border-bottom: 2px solid #0f62fe;\n    --hybrid-input-local-filled-border-radius: 6px 6px 0 0;\n\n    /* Borderless variant - no borders */\n    --hybrid-input-local-borderless-background: transparent;\n    --hybrid-input-local-borderless-focus-outline: 2px solid #0f62fe;\n    --hybrid-input-local-borderless-border-radius: 6px;\n\n    /* Underlined variant - bottom border only (current default) */\n    --hybrid-input-local-underlined-border-bottom: 2px solid #a8a8a8;\n    --hybrid-input-local-underlined-focus-border-bottom: 2px solid #0f62fe;\n  }\n\n  /* \n   * These override the light theme defaults when data-theme=\"dark\" is applied\n   * This provides explicit theme control via JavaScript or HTML attributes\n   */\n  .input-wrapper[data-theme=\"dark\"] {\n    --hybrid-input-local-background-color: #393939;\n    --hybrid-input-local-focus-border: 2px solid #ffffff;\n    --hybrid-input-local-text-color: #ffffff;\n    --hybrid-input-local-error-border: 2px solid #fa4d56;\n    --hybrid-input-local-error-helper-text-color: #ffb3b8;\n    --hybrid-input-local-disabled-background-color: #393939;\n    --hybrid-input-local-disabled-placeholder-color: #6f6f6f;\n    --hybrid-input-local-disabled-helper-text-color: #6f6f6f;\n    --hybrid-input-local-disabled-label-color: #6f6f6f;\n    --hybrid-input-local-warning-icon-color: #f0c300;\n    --hybrid-input-local-error-icon-color: #da1e28;\n    --hybrid-input-local-password-icon-color: #ffffff;\n    --hybrid-input-local-number-icons-color: #ffffff;\n    --hybrid-input-local-label-color: #c6c6c6;\n    --hybrid-input-local-helper-text-color: #c6c6c6;\n    --hybrid-input-local-number-icons-separator-color: #525252;\n    --hybrid-input-local-calendar-icon-color: #ffffff;\n    --hybrid-input-local-copy-icon-color: #ffffff;\n    --hybrid-input-local-clear-icon-color: #ffffff;\n    \n    /* Dark theme prefix and suffix colors */\n    --hybrid-input-local-prefix-color: #c6c6c6;\n    --hybrid-input-local-suffix-color: #c6c6c6;\n    --hybrid-input-local-disabled-prefix-suffix-color: #6f6f6f;\n\n    /* Dark theme addon colors */\n    --hybrid-input-local-addon-background-color: #525252;\n    --hybrid-input-local-addon-color: #c6c6c6;\n\n    /* Dark theme character count colors */\n    --hybrid-input-local-character-count-color: #8c8c8c;\n    --hybrid-input-local-character-count-over-limit-color: #fa4d56;\n\n    /* Dark theme input variant variables */\n    /* Outlined variant - dark theme */\n    --hybrid-input-local-outlined-border: 1px solid #525252;\n    --hybrid-input-local-outlined-focus-border: 2px solid #ffffff;\n    --hybrid-input-local-outlined-background: #393939;\n\n    /* Filled variant - dark theme */\n    --hybrid-input-local-filled-background: #525252;\n    --hybrid-input-local-filled-focus-border-bottom: 2px solid #ffffff;\n\n    /* Borderless variant - dark theme */\n    --hybrid-input-local-borderless-background: transparent;\n    --hybrid-input-local-borderless-focus-outline: 2px solid #ffffff;\n\n    /* Underlined variant - dark theme */\n    --hybrid-input-local-underlined-focus-border-bottom: 2px solid #ffffff;\n  }\n`;\n"]}

package/input.types.d.ts

@@ -8,11 +8,31 @@ export declare const enum INPUT_SIZE {
     Medium = "medium",
     Small = "small"
 }
+export declare const enum INPUT_VARIANT {
+    Outlined = "outlined",
+    Filled = "filled",
+    Borderless = "borderless",
+    Underlined = "underlined"
+}
 export declare const enum INPUT_TYPE {
     PASSWORD = "password",
     TEXT = "text",
     NUMBER = "number",
     CALENDAR = "calendar"
 }
+export interface FocusOptions {
+    preventScroll?: boolean;
+    cursor?: 'start' | 'end' | 'all' | number;
+    select?: boolean;
+}
+export interface BlurOptions {
+    preventScroll?: boolean;
+    restoreCursor?: boolean;
+}
+export interface FocusChangeEvent {
+    focused: boolean;
+    cursorPosition?: number;
+    selectedText?: string;
+}
 export declare const EMPTY_STRING = "";
 //# sourceMappingURL=input.types.d.ts.map

package/input.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.types.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.types.ts"],"names":[],"mappings":"AAAA,0BAAkB,WAAW;IAC3B,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,OAAO,YAAY;CACpB;AAED,0BAAkB,UAAU;IAC1B,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,0BAAkB,UAAU;IAC1B,QAAQ,aAAa;IACrB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,QAAQ,aAAa;CACtB;AAED,eAAO,MAAM,YAAY,KAAK,CAAC"}
+{"version":3,"file":"input.types.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.types.ts"],"names":[],"mappings":"AAAA,0BAAkB,WAAW;IAC3B,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,OAAO,YAAY;CACpB;AAED,0BAAkB,UAAU;IAC1B,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,0BAAkB,aAAa;IAC7B,QAAQ,aAAa;IACrB,MAAM,WAAW;IACjB,UAAU,eAAe;IACzB,UAAU,eAAe;CAC1B;AAED,0BAAkB,UAAU;IAC1B,QAAQ,aAAa;IACrB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,QAAQ,aAAa;CACtB;AAED,MAAM,WAAW,YAAY;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;IAC1C,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,WAAW;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,KAAK,CAAC"}

package/input.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.types.js","sourceRoot":"","sources":["../../../src/components/input/input.types.ts"],"names":[],"mappings":"AAmBA,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC","sourcesContent":["export const enum INPUT_STATE {\n  Default = 'default',\n  Error = 'error',\n  Warning = 'warning',\n}\n\nexport const enum INPUT_SIZE {\n  Large = 'large',\n  Medium = 'medium',\n  Small = 'small',\n}\n\nexport const enum INPUT_TYPE {\n  PASSWORD = 'password',\n  TEXT = 'text',\n  NUMBER = 'number',\n  CALENDAR = 'calendar',\n}\n\nexport const EMPTY_STRING = '';\n"]}
+{"version":3,"file":"input.types.js","sourceRoot":"","sources":["../../../src/components/input/input.types.ts"],"names":[],"mappings":"AA2CA,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC","sourcesContent":["export const enum INPUT_STATE {\n  Default = 'default',\n  Error = 'error',\n  Warning = 'warning',\n}\n\nexport const enum INPUT_SIZE {\n  Large = 'large',\n  Medium = 'medium',\n  Small = 'small',\n}\n\nexport const enum INPUT_VARIANT {\n  Outlined = 'outlined',\n  Filled = 'filled',\n  Borderless = 'borderless',\n  Underlined = 'underlined',\n}\n\nexport const enum INPUT_TYPE {\n  PASSWORD = 'password',\n  TEXT = 'text',\n  NUMBER = 'number',\n  CALENDAR = 'calendar',\n}\n\nexport interface FocusOptions {\n  preventScroll?: boolean;\n  cursor?: 'start' | 'end' | 'all' | number;\n  select?: boolean;\n}\n\nexport interface BlurOptions {\n  preventScroll?: boolean;\n  restoreCursor?: boolean;\n}\n\nexport interface FocusChangeEvent {\n  focused: boolean;\n  cursorPosition?: number;\n  selectedText?: string;\n}\n\nexport const EMPTY_STRING = '';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuralyui/input",
-    "version": "0.0.6",
+    "version": "0.0.7",
     "description": "",
     "main": "index.js",
     "type": "module",

package/utils/input-renderers.d.ts

@@ -30,6 +30,10 @@ export declare class InputRenderUtils {
      * Renders the copy icon when withCopy is enabled
      */
     static renderCopyIcon(withCopy: boolean, disabled: boolean, readonly: boolean, onCopy: () => void, onKeydown: (e: KeyboardEvent) => void): TemplateResult | typeof nothing;
+    /**
+     * Renders the clear icon when allowClear is enabled and there's content
+     */
+    static renderClearIcon(allowClear: boolean, value: string, disabled: boolean, readonly: boolean, onClear: () => void, onKeydown: (e: KeyboardEvent) => void): TemplateResult | typeof nothing;
     /**
      * Renders state-based icons (warning, error)
      */

package/utils/input-renderers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-renderers.d.ts","sourceRoot":"","sources":["../../../../src/components/input/utils/input-renderers.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAQ,cAAc,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAGpD;;GAEG;AACH,qBAAa,gBAAgB;IAE3B;;OAEG;IACH,MAAM,CAAC,YAAY,IAAI,cAAc;IAQrC;;OAEG;IACH,MAAM,CAAC,YAAY,IAAI,cAAc;IAQrC;;;OAGG;IACH,MAAM,CAAC,iBAAiB,CAAC,cAAc,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,GAAG,cAAc,GAAG,OAAO,OAAO;IAUpH;;;OAGG;IACH,MAAM,CAAC,gBAAgB,CAAC,aAAa,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,GAAG,cAAc,GAAG,OAAO,OAAO;IAUlH;;OAEG;IACH,MAAM,CAAC,cAAc,CACnB,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAE,OAAO,EACjB,MAAM,EAAE,MAAM,IAAI,EAClB,SAAS,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,GACpC,cAAc,GAAG,OAAO,OAAO;IAelC;;OAEG;IACH,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,cAAc,GAAG,OAAO,OAAO;IAWtE;;OAEG;IACH,MAAM,CAAC,kBAAkB,CACvB,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,GACX,cAAc,GAAG,OAAO,OAAO;IAQlC;;OAEG;IACH,MAAM,CAAC,kBAAkB,CACvB,IAAI,EAAE,MAAM,EACZ,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAE,MAAM,IAAI,EACpB,SAAS,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,GACpC,cAAc,GAAG,OAAO,OAAO;IA4BlC;;OAEG;IACH,MAAM,CAAC,iBAAiB,CACtB,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAE,OAAO,EACjB,WAAW,EAAE,MAAM,IAAI,EACvB,WAAW,EAAE,MAAM,IAAI,EACvB,SAAS,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,GACpC,cAAc,GAAG,OAAO,OAAO;CA0BnC"}
+{"version":3,"file":"input-renderers.d.ts","sourceRoot":"","sources":["../../../../src/components/input/utils/input-renderers.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAQ,cAAc,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAGpD;;GAEG;AACH,qBAAa,gBAAgB;IAE3B;;OAEG;IACH,MAAM,CAAC,YAAY,IAAI,cAAc;IAQrC;;OAEG;IACH,MAAM,CAAC,YAAY,IAAI,cAAc;IAQrC;;;OAGG;IACH,MAAM,CAAC,iBAAiB,CAAC,cAAc,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,GAAG,cAAc,GAAG,OAAO,OAAO;IAUpH;;;OAGG;IACH,MAAM,CAAC,gBAAgB,CAAC,aAAa,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,GAAG,cAAc,GAAG,OAAO,OAAO;IAUlH;;OAEG;IACH,MAAM,CAAC,cAAc,CACnB,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAE,OAAO,EACjB,MAAM,EAAE,MAAM,IAAI,EAClB,SAAS,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,GACpC,cAAc,GAAG,OAAO,OAAO;IAelC;;OAEG;IACH,MAAM,CAAC,eAAe,CACpB,UAAU,EAAE,OAAO,EACnB,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAE,OAAO,EACjB,OAAO,EAAE,MAAM,IAAI,EACnB,SAAS,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,GACpC,cAAc,GAAG,OAAO,OAAO;IAelC;;OAEG;IACH,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,cAAc,GAAG,OAAO,OAAO;IAWtE;;OAEG;IACH,MAAM,CAAC,kBAAkB,CACvB,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,GACX,cAAc,GAAG,OAAO,OAAO;IAQlC;;OAEG;IACH,MAAM,CAAC,kBAAkB,CACvB,IAAI,EAAE,MAAM,EACZ,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAE,MAAM,IAAI,EACpB,SAAS,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,GACpC,cAAc,GAAG,OAAO,OAAO;IA4BlC;;OAEG;IACH,MAAM,CAAC,iBAAiB,CACtB,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAE,OAAO,EACjB,WAAW,EAAE,MAAM,IAAI,EACvB,WAAW,EAAE,MAAM,IAAI,EACvB,SAAS,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,GACpC,cAAc,GAAG,OAAO,OAAO;CA0BnC"}

package/utils/input-renderers.js

@@ -71,6 +71,23 @@ export class InputRenderUtils {
       @keydown=${onKeydown}
     ></hy-icon>`;
     }
+    /**
+     * Renders the clear icon when allowClear is enabled and there's content
+     */
+    static renderClearIcon(allowClear, value, disabled, readonly, onClear, onKeydown) {
+        if (!allowClear || !value || disabled || readonly)
+            return nothing;
+        return html `<hy-icon
+      name="times-circle"
+      type="regular"
+      id="clear-icon"
+      role="button"
+      aria-label="Clear input value"
+      tabindex="0"
+      @click=${onClear}
+      @keydown=${onKeydown}
+    ></hy-icon>`;
+    }
     /**
      * Renders state-based icons (warning, error)
      */

package/utils/input-renderers.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-renderers.js","sourceRoot":"","sources":["../../../../src/components/input/utils/input-renderers.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { html, TemplateResult, nothing } from 'lit';\nimport { INPUT_TYPE, INPUT_STATE } from '../input.types.js';\n\n/**\n * Rendering utilities for input component icons and elements\n */\nexport class InputRenderUtils {\n\n  /**\n   * Renders prefix slot content\n   */\n  static renderPrefix(): TemplateResult {\n    return html`\n      <div class=\"input-prefix\">\n        <slot name=\"prefix\"></slot>\n      </div>\n    `;\n  }\n\n  /**\n   * Renders suffix slot content  \n   */\n  static renderSuffix(): TemplateResult {\n    return html`\n      <div class=\"input-suffix\">\n        <slot name=\"suffix\"></slot>\n      </div>\n    `;\n  }\n\n  /**\n   * Renders addon before slot content (outside input borders)\n   * Only renders if hasAddonBefore is true\n   */\n  static renderAddonBefore(hasAddonBefore: boolean, onSlotChange: (e: Event) => void): TemplateResult | typeof nothing {\n    if (!hasAddonBefore) return nothing;\n    \n    return html`\n      <div class=\"input-addon-before\">\n        <slot name=\"addon-before\" @slotchange=${onSlotChange}></slot>\n      </div>\n    `;\n  }\n\n  /**\n   * Renders addon after slot content (outside input borders)  \n   * Only renders if hasAddonAfter is true\n   */\n  static renderAddonAfter(hasAddonAfter: boolean, onSlotChange: (e: Event) => void): TemplateResult | typeof nothing {\n    if (!hasAddonAfter) return nothing;\n    \n    return html`\n      <div class=\"input-addon-after\">\n        <slot name=\"addon-after\" @slotchange=${onSlotChange}></slot>\n      </div>\n    `;\n  }\n\n  /**\n   * Renders the copy icon when withCopy is enabled\n   */\n  static renderCopyIcon(\n    withCopy: boolean,\n    disabled: boolean,\n    readonly: boolean,\n    onCopy: () => void,\n    onKeydown: (e: KeyboardEvent) => void\n  ): TemplateResult | typeof nothing {\n    if (!withCopy) return nothing;\n    \n    return html`<hy-icon\n      name=\"copy\"\n      type=\"regular\"\n      id=\"copy-icon\"\n      role=\"button\"\n      aria-label=\"Copy input value\"\n      tabindex=\"0\"\n      @click=${!disabled && !readonly ? onCopy : nothing}\n      @keydown=${onKeydown}\n    ></hy-icon>`;\n  }\n\n  /**\n   * Renders state-based icons (warning, error)\n   */\n  static renderStateIcon(state: string): TemplateResult | typeof nothing {\n    switch (state) {\n      case INPUT_STATE.Warning:\n        return html`<hy-icon name=\"warning\" id=\"warning-icon\"></hy-icon>`;\n      case INPUT_STATE.Error:\n        return html`<hy-icon name=\"exclamation-circle\" id=\"error-icon\"></hy-icon>`;\n      default:\n        return nothing;\n    }\n  }\n\n  /**\n   * Renders the calendar icon for calendar input type\n   */\n  static renderCalendarIcon(\n    state: string,\n    type: string\n  ): TemplateResult | typeof nothing {\n    if (state !== INPUT_STATE.Default || type !== INPUT_TYPE.CALENDAR) {\n      return nothing;\n    }\n    \n    return html`<hy-icon name=\"calendar\" type=\"regular\" id=\"calendar-icon\"></hy-icon>`;\n  }\n\n  /**\n   * Renders password toggle icon\n   */\n  static renderPasswordIcon(\n    type: string,\n    inputType: string,\n    disabled: boolean,\n    readonly: boolean,\n    onToggle: () => void,\n    onKeydown: (e: KeyboardEvent) => void\n  ): TemplateResult | typeof nothing {\n    if (type !== INPUT_TYPE.PASSWORD) return nothing;\n    \n    if (inputType === INPUT_TYPE.TEXT) {\n      return html`<hy-icon\n        name=\"eye-slash\"\n        type=\"regular\"\n        id=\"password-icon\"\n        role=\"button\"\n        aria-label=\"Hide password\"\n        tabindex=\"0\"\n        @click=${!disabled && !readonly ? onToggle : nothing}\n        @keydown=${onKeydown}\n      ></hy-icon>`;\n    } else {\n      return html`<hy-icon\n        name=\"eye\"\n        type=\"regular\"\n        id=\"password-icon\"\n        role=\"button\"\n        aria-label=\"Show password\"\n        tabindex=\"0\"\n        @click=${!disabled && !readonly ? onToggle : nothing}\n        @keydown=${onKeydown}\n      ></hy-icon>`;\n    }\n  }\n\n  /**\n   * Renders number input increment/decrement icons\n   */\n  static renderNumberIcons(\n    type: string,\n    state: string,\n    disabled: boolean,\n    readonly: boolean,\n    onIncrement: () => void,\n    onDecrement: () => void,\n    onKeydown: (e: KeyboardEvent) => void\n  ): TemplateResult | typeof nothing {\n    if (type !== INPUT_TYPE.NUMBER) return nothing;\n    \n    return html`\n      <div id=\"number-icons\">\n        ${state !== INPUT_STATE.Default ? html`<span id=\"icons-separator\">|</span>` : nothing}\n        <hy-icon \n          name=\"minus\" \n          aria-label=\"Decrease value\"\n          role=\"button\"\n          tabindex=\"0\"\n          @click=${!disabled && !readonly ? onDecrement : nothing}\n          @keydown=${onKeydown}\n        ></hy-icon>\n        <span id=\"icons-separator\">|</span>\n        <hy-icon \n          name=\"plus\" \n          aria-label=\"Increase value\"\n          role=\"button\"\n          tabindex=\"0\"\n          @click=${!disabled && !readonly ? onIncrement : nothing}\n          @keydown=${onKeydown}\n        ></hy-icon>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"input-renderers.js","sourceRoot":"","sources":["../../../../src/components/input/utils/input-renderers.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { html, TemplateResult, nothing } from 'lit';\nimport { INPUT_TYPE, INPUT_STATE } from '../input.types.js';\n\n/**\n * Rendering utilities for input component icons and elements\n */\nexport class InputRenderUtils {\n\n  /**\n   * Renders prefix slot content\n   */\n  static renderPrefix(): TemplateResult {\n    return html`\n      <div class=\"input-prefix\">\n        <slot name=\"prefix\"></slot>\n      </div>\n    `;\n  }\n\n  /**\n   * Renders suffix slot content  \n   */\n  static renderSuffix(): TemplateResult {\n    return html`\n      <div class=\"input-suffix\">\n        <slot name=\"suffix\"></slot>\n      </div>\n    `;\n  }\n\n  /**\n   * Renders addon before slot content (outside input borders)\n   * Only renders if hasAddonBefore is true\n   */\n  static renderAddonBefore(hasAddonBefore: boolean, onSlotChange: (e: Event) => void): TemplateResult | typeof nothing {\n    if (!hasAddonBefore) return nothing;\n    \n    return html`\n      <div class=\"input-addon-before\">\n        <slot name=\"addon-before\" @slotchange=${onSlotChange}></slot>\n      </div>\n    `;\n  }\n\n  /**\n   * Renders addon after slot content (outside input borders)  \n   * Only renders if hasAddonAfter is true\n   */\n  static renderAddonAfter(hasAddonAfter: boolean, onSlotChange: (e: Event) => void): TemplateResult | typeof nothing {\n    if (!hasAddonAfter) return nothing;\n    \n    return html`\n      <div class=\"input-addon-after\">\n        <slot name=\"addon-after\" @slotchange=${onSlotChange}></slot>\n      </div>\n    `;\n  }\n\n  /**\n   * Renders the copy icon when withCopy is enabled\n   */\n  static renderCopyIcon(\n    withCopy: boolean,\n    disabled: boolean,\n    readonly: boolean,\n    onCopy: () => void,\n    onKeydown: (e: KeyboardEvent) => void\n  ): TemplateResult | typeof nothing {\n    if (!withCopy) return nothing;\n    \n    return html`<hy-icon\n      name=\"copy\"\n      type=\"regular\"\n      id=\"copy-icon\"\n      role=\"button\"\n      aria-label=\"Copy input value\"\n      tabindex=\"0\"\n      @click=${!disabled && !readonly ? onCopy : nothing}\n      @keydown=${onKeydown}\n    ></hy-icon>`;\n  }\n\n  /**\n   * Renders the clear icon when allowClear is enabled and there's content\n   */\n  static renderClearIcon(\n    allowClear: boolean,\n    value: string,\n    disabled: boolean,\n    readonly: boolean,\n    onClear: () => void,\n    onKeydown: (e: KeyboardEvent) => void\n  ): TemplateResult | typeof nothing {\n    if (!allowClear || !value || disabled || readonly) return nothing;\n    \n    return html`<hy-icon\n      name=\"times-circle\"\n      type=\"regular\"\n      id=\"clear-icon\"\n      role=\"button\"\n      aria-label=\"Clear input value\"\n      tabindex=\"0\"\n      @click=${onClear}\n      @keydown=${onKeydown}\n    ></hy-icon>`;\n  }\n\n  /**\n   * Renders state-based icons (warning, error)\n   */\n  static renderStateIcon(state: string): TemplateResult | typeof nothing {\n    switch (state) {\n      case INPUT_STATE.Warning:\n        return html`<hy-icon name=\"warning\" id=\"warning-icon\"></hy-icon>`;\n      case INPUT_STATE.Error:\n        return html`<hy-icon name=\"exclamation-circle\" id=\"error-icon\"></hy-icon>`;\n      default:\n        return nothing;\n    }\n  }\n\n  /**\n   * Renders the calendar icon for calendar input type\n   */\n  static renderCalendarIcon(\n    state: string,\n    type: string\n  ): TemplateResult | typeof nothing {\n    if (state !== INPUT_STATE.Default || type !== INPUT_TYPE.CALENDAR) {\n      return nothing;\n    }\n    \n    return html`<hy-icon name=\"calendar\" type=\"regular\" id=\"calendar-icon\"></hy-icon>`;\n  }\n\n  /**\n   * Renders password toggle icon\n   */\n  static renderPasswordIcon(\n    type: string,\n    inputType: string,\n    disabled: boolean,\n    readonly: boolean,\n    onToggle: () => void,\n    onKeydown: (e: KeyboardEvent) => void\n  ): TemplateResult | typeof nothing {\n    if (type !== INPUT_TYPE.PASSWORD) return nothing;\n    \n    if (inputType === INPUT_TYPE.TEXT) {\n      return html`<hy-icon\n        name=\"eye-slash\"\n        type=\"regular\"\n        id=\"password-icon\"\n        role=\"button\"\n        aria-label=\"Hide password\"\n        tabindex=\"0\"\n        @click=${!disabled && !readonly ? onToggle : nothing}\n        @keydown=${onKeydown}\n      ></hy-icon>`;\n    } else {\n      return html`<hy-icon\n        name=\"eye\"\n        type=\"regular\"\n        id=\"password-icon\"\n        role=\"button\"\n        aria-label=\"Show password\"\n        tabindex=\"0\"\n        @click=${!disabled && !readonly ? onToggle : nothing}\n        @keydown=${onKeydown}\n      ></hy-icon>`;\n    }\n  }\n\n  /**\n   * Renders number input increment/decrement icons\n   */\n  static renderNumberIcons(\n    type: string,\n    state: string,\n    disabled: boolean,\n    readonly: boolean,\n    onIncrement: () => void,\n    onDecrement: () => void,\n    onKeydown: (e: KeyboardEvent) => void\n  ): TemplateResult | typeof nothing {\n    if (type !== INPUT_TYPE.NUMBER) return nothing;\n    \n    return html`\n      <div id=\"number-icons\">\n        ${state !== INPUT_STATE.Default ? html`<span id=\"icons-separator\">|</span>` : nothing}\n        <hy-icon \n          name=\"minus\" \n          aria-label=\"Decrease value\"\n          role=\"button\"\n          tabindex=\"0\"\n          @click=${!disabled && !readonly ? onDecrement : nothing}\n          @keydown=${onKeydown}\n        ></hy-icon>\n        <span id=\"icons-separator\">|</span>\n        <hy-icon \n          name=\"plus\" \n          aria-label=\"Increase value\"\n          role=\"button\"\n          tabindex=\"0\"\n          @click=${!disabled && !readonly ? onIncrement : nothing}\n          @keydown=${onKeydown}\n        ></hy-icon>\n      </div>\n    `;\n  }\n}\n"]}