@nuralyui/input 0.0.9 → 0.0.10

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":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, PropertyValues, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { styles } from './input.style.js';\nimport { INPUT_TYPE, INPUT_STATE, INPUT_SIZE, INPUT_VARIANT, EMPTY_STRING, FocusChangeEvent } from './input.types.js';\nimport { NuralyUIBaseMixin } from '../../shared/base-mixin.js';\nimport { InputValidationUtils, InputRenderUtils } from './utils/index.js';\nimport { SelectionMixin, FocusMixin, NumberMixin } from './mixins/index.js';\n\nconst InputBaseMixin = NumberMixin(FocusMixin(SelectionMixin(NuralyUIBaseMixin(LitElement))));\n@customElement('nr-input')\nexport class NrInputElement extends InputBaseMixin {\n  static override styles = styles;\n\n  // ========================================\n  // PROPERTIES\n  // ========================================\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  // ========================================\n  // STATE\n  // ========================================\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  // Use manual query instead of @query decorator to avoid TypeScript mixin issues\n  private get _input(): HTMLInputElement {\n    return this.shadowRoot!.querySelector('#input') as HTMLInputElement;\n  }\n\n  // ========================================\n  // COMPUTED PROPERTIES\n  // ========================================\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  // COMPUTED PROPERTIES\n  // ========================================\n\n  /**\n   * Get the input element\n   */\n  protected get input(): HTMLInputElement {\n    return this._input;\n  }\n\n  /**\n   * Override inputElement getter from mixins to use our @query property\n   */\n  protected get inputElement(): HTMLInputElement {\n    return this._input;\n  }\n\n  // ========================================\n  // LIFECYCLE METHODS\n  // ========================================\n\n  /**\n   * Required components that must be registered for this component to work properly\n   */\n  override requiredComponents = ['nr-icon'];\n\n  /**\n   * Check for required dependencies when component is connected to DOM\n   */\n  override connectedCallback() {\n    super.connectedCallback();\n  }\n\n  override willUpdate(_changedProperties: PropertyValues): void {\n    super.willUpdate(_changedProperties);\n\n    // Initialize inputType when type changes or on first render\n    if (_changedProperties.has('type') || !this.inputType) {\n      this.inputType = this.type;\n    }\n\n    // Set default value for number inputs with min\n    if (_changedProperties.has('type') || _changedProperties.has('min')) {\n      if (this.type === 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        this.setStep(this.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  // PRIVATE METHODS\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  // Focus methods are provided by InputMixin\n\n  // ========================================\n  // EVENT HANDLING METHODS\n  // ========================================\n\n  // Event handling methods moved to EventHandlerMixin\n\n  private _handleKeyDown(keyDownEvent: KeyboardEvent): void {\n    // Prevent all key input when readonly - use mixin utility\n    if (this.readonly && !this.isReadonlyKeyAllowed(keyDownEvent)) {\n      keyDownEvent.preventDefault();\n      return;\n    }\n\n    // Handle Enter key\n    if (keyDownEvent.key === 'Enter') {\n      this.dispatchCustomEvent('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.dispatchCustomEvent('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): void {\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.dispatchCustomEvent('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.dispatchValidationEvent('nr-validation-error', {\n          value: newValue,\n          target: target,\n          error: validation.warnings[0],\n          originalEvent: e,\n          isValid: false\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): void {\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() ?? undefined,\n      selectedText: this.getSelectedText()\n    };\n    \n    this.dispatchFocusEvent('nr-focus', {\n      target: e.target,\n      value: this.value,\n      ...focusDetail\n    });\n    \n    this.dispatchFocusEvent('nr-focus-change', focusDetail);\n  }\n\n  private _blurEvent(e: Event): void {\n    this.focused = false;\n    \n    const focusDetail: FocusChangeEvent = {\n      focused: false,\n      cursorPosition: this.getCursorPosition() ?? undefined,\n      selectedText: this.getSelectedText()\n    };\n    \n    this.dispatchFocusEvent('nr-blur', {\n      target: e.target,\n      value: this.value,\n      ...focusDetail\n    });\n    \n    this.dispatchFocusEvent('nr-focus-change', focusDetail);\n  }\n\n  private _handleIconKeydown(keyDownEvent: KeyboardEvent): void {\n    if (this.isActivationKey(keyDownEvent)) {\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(): Promise<void> {\n    try {\n      const input = this.shadowRoot!.getElementById('input')! as HTMLInputElement;\n      input.select();\n      await navigator.clipboard.writeText(input.value);\n      \n      this.dispatchActionEvent('nr-copy-success', { \n        value: input.value,\n        action: 'copy'\n      });\n    } catch (error) {\n      this.dispatchCustomEvent('nr-copy-error', { error });\n    }\n  }\n\n  private _onClear(): void {\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.dispatchActionEvent('nr-clear', {\n      previousValue,\n      newValue: this.value,\n      target: this.input,\n      action: 'clear'\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(): void {\n    this.increment();\n  }\n\n  private _decrement(): void {\n    this.decrement();\n  }\n\n  private _togglePasswordIcon(): void {\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\n"]}
+{"version":3,"file":"input.component.js","sourceRoot":"","sources":["../../../src/components/input/input.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, PropertyValues, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { styles } from './input.style.js';\nimport '../icon/icon.component.js';\nimport {\n  INPUT_TYPE,\n  INPUT_STATE,\n  INPUT_SIZE,\n  INPUT_VARIANT,\n  EMPTY_STRING,\n  ValidationRule,\n  InputValidationResult\n} from './input.types.js';\nimport { NuralyUIBaseMixin } from '../../shared/base-mixin.js';\nimport { InputValidationUtils, InputRenderUtils } from './utils/index.js';\nimport { SelectionMixin, FocusMixin, NumberMixin } from './mixins/index.js';\nimport { \n  InputValidationController, \n  InputValidationHost, \n  InputEventController, \n  InputEventHost \n} from './controllers/index.js';\n\n/**\n * Versatile input component with validation, multiple types, and interactive features.\n * \n * @example\n * ```html\n * <nr-input type=\"text\" placeholder=\"Enter name\"></nr-input>\n * <nr-input type=\"password\"></nr-input>\n * <nr-input type=\"number\" min=\"0\" max=\"100\"></nr-input>\n * ```\n * \n * @fires nr-input - Value changes\n * @fires nr-focus - Input focused\n * @fires nr-blur - Input blurred  \n * @fires nr-enter - Enter key pressed\n * @fires nr-clear - Clear button clicked\n * \n * @slot label - Input label\n * @slot helper-text - Helper text\n * @slot addon-before - Content before input\n * @slot addon-after - Content after input\n */\n@customElement('nr-input')\nexport class NrInputElement extends NumberMixin(\n  FocusMixin(\n    SelectionMixin(\n      NuralyUIBaseMixin(LitElement)\n    ) \n  )\n) implements InputValidationHost, InputEventHost {\n  static override styles = styles;\n  \n  private validationController = new InputValidationController(this);\n  private eventController = new InputEventController(this);\n\n  /** Disables the input */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Makes the input read-only */\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /** Visual state (default, success, warning, error) */\n  @property({ type: String, reflect: true })\n  state = INPUT_STATE.Default;\n\n  /** Current input value */\n  @property({ type: String })\n  value = EMPTY_STRING;\n\n  /** Input size (small, medium, large) */\n  @property({ type: String })\n  size = INPUT_SIZE.Medium;\n\n  /** Visual variant (outlined, underlined, filled) */\n  @property({ type: String, reflect: true })\n  variant = INPUT_VARIANT.Underlined;\n\n  /** Input type (text, password, number, email, etc.) */\n  @property({ reflect: true })\n  type = INPUT_TYPE.TEXT;\n\n  /** Step value for number inputs */\n  @property({ type: String })\n  step?: string;\n\n  /** Minimum value for number inputs */\n  @property({ type: String })\n  min?: string;\n\n  /** Maximum value for number inputs */\n  @property({ type: String })\n  max?: string;\n\n  /** Placeholder text */\n  @property({ type: String })\n  placeholder = EMPTY_STRING;\n\n  /** HTML autocomplete attribute */\n  @property({ type: String })\n  autocomplete = 'off';\n\n  /** Field name for form submission */\n  @property({ type: String })\n  name?: string;\n\n  /** Required field indicator */\n  @property({ type: Boolean })\n  required?: boolean;\n\n  /** Shows copy button */\n  @property({ type: Boolean, reflect: true })\n  withCopy = false;\n\n  /** Shows clear button */\n  @property({ type: Boolean, reflect: true })\n  allowClear = false;\n\n  /** Shows character counter */\n  @property({ type: Boolean, reflect: true })\n  showCount = false;\n\n  /** Maximum character limit */\n  @property({ type: Number })\n  maxLength?: number;\n\n\n  /** Array of validation rules */\n  @property({ type: Array })\n  rules: ValidationRule[] = [];\n\n  /** Validate on change */\n  @property({ type: Boolean, attribute: 'validate-on-change' })\n  validateOnChangeInput = true;\n\n  /** Validate on blur */\n  @property({ type: Boolean, attribute: 'validate-on-blur' })\n  validateOnBlurInput = true;\n\n  /** Show validation status icon */\n  @property({ type: Boolean, attribute: 'has-feedback' })\n  hasFeedback = false;\n\n  /** Allow validation warnings */\n  @property({ type: Boolean, attribute: 'allow-warnings' })\n  allowWarnings = false;\n\n  /** Custom validation trigger */\n  @property({ type: String, attribute: 'validation-trigger' })\n  validationTrigger: 'change' | 'blur' | 'submit' = 'change';\n\n  /** Validation debounce delay in milliseconds */\n  @property({ type: Number, attribute: 'validation-debounce' })\n  validationDebounce?: number;\n\n  /** Input label for better error messages */\n  @property({ type: String })\n  label?: string;\n\n  /** Validation message */\n  @state()\n  validationMessage?: string;\n\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  private get _input(): HTMLInputElement {\n    return this.shadowRoot!.querySelector('#input') as HTMLInputElement;\n  }\n\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  get isOverCharacterLimit(): boolean {\n    return this.maxLength ? this.value.length > this.maxLength : false;\n  }\n\n  protected get input(): HTMLInputElement {\n    return this._input;\n  }\n\n  protected get inputElement(): HTMLInputElement {\n    return this._input;\n  }\n\n\n\n  override requiredComponents = ['nr-icon'];\n\n  override connectedCallback() {\n    super.connectedCallback();\n    \n    this.addEventListener('nr-validation', this._handleValidationEvent as EventListener);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    \n    this.removeEventListener('nr-validation', this._handleValidationEvent as EventListener);\n    \n    this.validationController.clearDebounceTimer?.();\n  }\n\n  /**\n   * Handle validation events from the controller\n   */\n  private _handleValidationEvent = (event: Event) => {\n    const customEvent = event as CustomEvent;\n    const detail = customEvent.detail;\n    \n    this.validationMessage = detail.validationMessage || '';\n    \n    let newState = INPUT_STATE.Default;\n    \n    if (detail.validationResult.hasError) {\n      newState = INPUT_STATE.Error;\n    } else if (detail.validationResult.hasWarning && this.allowWarnings) {\n      newState = INPUT_STATE.Warning;\n    } else if (detail.validationResult.isValid && this.value && this.hasFeedback) {\n      newState = INPUT_STATE.Success;\n    }\n    \n    if (this.state !== newState) {\n      this.state = newState;\n    }\n    \n    this.requestUpdate();\n  }\n\n  override willUpdate(_changedProperties: PropertyValues): void {\n    super.willUpdate(_changedProperties);\n\n    if (_changedProperties.has('type') || !this.inputType) {\n      this.inputType = this.type;\n    }\n\n    if (_changedProperties.has('type') || _changedProperties.has('min')) {\n      if (this.type === INPUT_TYPE.NUMBER && this.min && !this.value) {\n        this.value = this.min;\n      }\n    }\n\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    if (_changedProperties.has('type') || \n        _changedProperties.has('required') || \n        _changedProperties.has('maxLength') ||\n        _changedProperties.has('min') ||\n        _changedProperties.has('max')) {\n      this.validationController.setupValidationRules();\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        this.setStep(this.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  private _checkInitialSlotContent(): void {\n    const addonBeforeElements = this.querySelectorAll('[slot=\"addon-before\"]');\n    this.hasAddonBefore = addonBeforeElements.length > 0;\n\n    const addonAfterElements = this.querySelectorAll('[slot=\"addon-after\"]');\n    this.hasAddonAfter = addonAfterElements.length > 0;\n  }\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  private _handleKeyDown = (keyDownEvent: KeyboardEvent): void => {\n    this.eventController.handleKeyDown(keyDownEvent);\n  };\n\n  private _valueChange = (e: Event): void => {\n    this.eventController.handleValueChange(e);\n  };\n\n  private _focusEvent = (e: Event): void => {\n    this.eventController.handleFocus(e);\n  };\n\n  private _blurEvent = (e: Event): void => {\n    this.eventController.handleBlur(e);\n  };\n\n  private _handleIconKeydown = (keyDownEvent: KeyboardEvent): void => {\n    this.eventController.handleIconKeydown(keyDownEvent);\n  };\n\n  private async _onCopy(): Promise<void> {\n    await this.eventController.handleCopy();\n  }\n\n  private _onClear(): void {\n    this.eventController.handleClear();\n  }\n\n\n  private _increment(): void {\n    this.eventController.handleIncrement();\n  }\n\n  private _decrement(): void {\n    this.eventController.handleDecrement();\n  }\n\n  private _togglePasswordIcon(): void {\n    this.eventController.handleTogglePassword();\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   * Setup default validation rules based on input properties\n   */\n  /**\n   * Override the form mixin's validateValue method with controller logic\n   */\n  protected validateValue(_value: string): boolean {\n    return this.validationController.validate();\n  }\n\n  /**\n   * Add validation rule dynamically\n   */\n  addRule(rule: ValidationRule): void {\n    this.validationController.addRule(rule);\n  }\n\n  /**\n   * Remove validation rule\n   */\n  removeRule(predicate: (rule: ValidationRule) => boolean): void {\n    this.validationController.removeRule(predicate);\n  }\n\n  /**\n   * Clear all validation rules\n   */\n  clearRules(): void {\n    this.validationController.clearRules();\n  }\n\n  /**\n   * Get current validation status\n   */\n  getValidationStatus(): {\n    isValid: boolean;\n    isValidating: boolean;\n    errors: string[];\n    warnings: string[];\n  } {\n    return this.validationController.getValidationStatus();\n  }\n\n  /**\n   * Trigger validation manually\n   */\n  async validateInput(): Promise<boolean> {\n    const result = this.validationController.validate();\n    \n    if (this.validationController.isValidating) {\n      return new Promise((resolve) => {\n        const checkValidation = () => {\n          if (!this.validationController.isValidating) {\n            resolve(this.validationController.isValid);\n          } else {\n            setTimeout(checkValidation, 50);\n          }\n        };\n        checkValidation();\n      });\n    }\n    \n    return result;\n  }\n\n  /**\n   * Set validation state externally (for form integration)\n   */\n  setValidationStatus(result: InputValidationResult): void {\n    this.validationController.setValidationStatus(result);\n  }\n\n  /**\n   * Get validation classes for CSS styling\n   */\n  protected getValidationClasses(): Record<string, boolean> {\n    return this.validationController.getValidationClasses();\n  }\n\n  /**\n   * Render validation feedback icon\n   */\n  private renderValidationIcon() {\n    return this.validationController.renderValidationIcon();\n  }\n\n  /**\n   * Render validation message\n   */\n  private renderValidationMessage() {\n    return this.validationController.renderValidationMessage();\n  }\n\n\n  override render() {\n    const validationClasses = this.getValidationClasses();\n    const validationRenderState = this.validationController.getValidationRenderState();\n    \n    return html`\n      <slot name=\"label\"></slot>\n      <div class=\"input-wrapper ${Object.entries(validationClasses).filter(([, value]) => value).map(([key]) => key).join(' ')}\" \n           part=\"input-wrapper\" \n           data-theme=\"${this.currentTheme}\"\n           ?data-validating=\"${validationRenderState.isValidating}\">\n        ${InputRenderUtils.renderAddonBefore(this.hasAddonBefore, (e: Event) => this._handleSlotChange(e))}\n        <div data-size=${this.size} id=\"input-container\" part=\"input-container\">\n          ${InputRenderUtils.renderPrefix()}\n          <input\n            id=\"input\"\n            part=\"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=${validationRenderState.validationResult.hasError ? '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          ${validationRenderState.hasValidationFeedback ? this.renderValidationIcon() : 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.renderValidationMessage()}\n      ${this.showCount ? html`\n        <div class=\"character-count\" part=\"character-count\" ?data-over-limit=${this.isOverCharacterLimit}>\n          ${this.characterCountDisplay}\n        </div>\n      ` : ''}\n    `;\n  }\n}\n\n"]}

package/input.style.js

@@ -456,6 +456,18 @@ const inputStyle = css `
     color: var(--hybrid-input-helper-text-color, var(--hybrid-input-local-helper-text-color));
     font-size: var(--hybrid-input-helper-text-font-size, var(--hybrid-input-local-helper-text-font-size));
     padding-top: var(--hybrid-input-helper-text-padding-top, var(--hybrid-input-local-helper-text-padding-top));
+    
+    /* Prevent text overflow and ensure proper wrapping without affecting parent width */
+    word-wrap: break-word;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    hyphens: auto;
+    white-space: normal;
+    max-width: 100%;
+    width: 0;
+    min-width: 100%;
+    box-sizing: border-box;
+    line-height: 1.4;
   }
 
   /* 
@@ -567,6 +579,148 @@ const sizeInputStyle = css `
   .character-count[data-over-limit] {
     color: var(--hybrid-input-character-count-over-limit-color, var(--hybrid-input-local-character-count-over-limit-color));
   }
+
+  /* ========================================
+   * VALIDATION MESSAGE STYLES
+   * ======================================== */
+
+  /* 
+   * Base validation message styling
+   * Common styles for error and warning messages
+   */
+  .validation-message {
+    font-size: var(--hybrid-input-validation-message-font-size, var(--hybrid-input-local-validation-message-font-size, 0.875rem));
+    font-family: var(--hybrid-input-font-family, var(--hybrid-input-local-font-family));
+    margin-top: var(--hybrid-input-validation-message-margin-top, var(--hybrid-input-local-validation-message-margin-top, 0.25rem));
+    padding: var(--hybrid-input-validation-message-padding, var(--hybrid-input-local-validation-message-padding, 0));
+    
+    /* Prevent text overflow and ensure proper wrapping without affecting parent width */
+    word-wrap: break-word;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    hyphens: auto;
+    white-space: normal;
+    max-width: 100%;
+    width: 0;
+    min-width: 100%;
+    box-sizing: border-box;
+    line-height: var(--hybrid-input-validation-message-line-height, var(--hybrid-input-local-validation-message-line-height, 1.4));
+  }
+
+  /* 
+   * Error validation message styling
+   * Applied when validation message has error class
+   */
+  .validation-message.error {
+    color: var(--hybrid-input-error-message-color, var(--hybrid-input-local-error-message-color, var(--hybrid-input-error-color, var(--hybrid-input-local-error-color, #dc2626))));
+  }
+
+  /* 
+   * Warning validation message styling
+   * Applied when validation message has warning class
+   */
+  .validation-message.warning {
+    color: var(--hybrid-input-warning-message-color, var(--hybrid-input-local-warning-message-color, var(--hybrid-input-warning-color, var(--hybrid-input-local-warning-color, #d97706))));
+  }
+
+  /* 
+   * Disabled state for validation messages
+   * Applied when input is disabled
+   */
+  :host([disabled]) .validation-message {
+    opacity: var(--hybrid-input-disabled-validation-message-opacity, var(--hybrid-input-local-disabled-validation-message-opacity, 0.6));
+    color: var(--hybrid-input-disabled-validation-message-color, var(--hybrid-input-local-disabled-validation-message-color));
+  }
+
+  /* 
+   * Validation icon styles
+   * Base styles for validation feedback icons
+   */
+  .validation-icon {
+    width: 16px;
+    height: 16px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* 
+   * Loading validation icon with hourglass animation
+   * Applied when async validation is in progress
+   */
+  .validation-icon.validation-loading {
+    color: var(--hybrid-input-primary-color, var(--hybrid-input-local-primary-color, #3b82f6));
+    animation: validation-hourglass 2s ease-in-out infinite;
+    transform-origin: center;
+  }
+
+  /* 
+   * Error validation icon styling
+   * Applied when validation fails
+   */
+  .validation-icon.validation-error {
+    color: var(--hybrid-input-error-color, var(--hybrid-input-local-error-color, #dc2626));
+  }
+
+  /* 
+   * Warning validation icon styling
+   * Applied when validation has warnings
+   */
+  .validation-icon.validation-warning {
+    color: var(--hybrid-input-warning-color, var(--hybrid-input-local-warning-color, #d97706));
+  }
+
+  /* 
+   * Success validation icon styling
+   * Applied when validation passes
+   */
+  .validation-icon.validation-success {
+    color: var(--hybrid-input-success-color, var(--hybrid-input-local-success-color, #16a34a));
+  }
+
+  /* 
+   * Hourglass animation for validation loading
+   * Gentle pulsing effect without rotation for clean appearance
+   */
+  @keyframes validation-hourglass {
+    0% {
+      opacity: 0.7;
+      transform: scale(1);
+    }
+    25% {
+      opacity: 1;
+      transform: scale(1.03);
+    }
+    50% {
+      opacity: 0.8;
+      transform: scale(1);
+    }
+    75% {
+      opacity: 1;
+      transform: scale(1.03);
+    }
+    100% {
+      opacity: 0.7;
+      transform: scale(1);
+    }
+  }
+
+  /* 
+   * Alternative pulse animation option
+   * Uncomment this and change animation above to use pulse instead of hourglass
+   */
+  /*
+  @keyframes validation-pulse {
+    0%, 100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+    50% {
+      opacity: 0.7;
+      transform: scale(1.1);
+    }
+  }
+  */
 `;
 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"]}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkgBrB,CAAC;AAEF;;;GAGG;AACH,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2LzB,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    /* Prevent text overflow and ensure proper wrapping without affecting parent width */\n    word-wrap: break-word;\n    word-break: break-word;\n    overflow-wrap: break-word;\n    hyphens: auto;\n    white-space: normal;\n    max-width: 100%;\n    width: 0;\n    min-width: 100%;\n    box-sizing: border-box;\n    line-height: 1.4;\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  /* ========================================\n   * VALIDATION MESSAGE STYLES\n   * ======================================== */\n\n  /* \n   * Base validation message styling\n   * Common styles for error and warning messages\n   */\n  .validation-message {\n    font-size: var(--hybrid-input-validation-message-font-size, var(--hybrid-input-local-validation-message-font-size, 0.875rem));\n    font-family: var(--hybrid-input-font-family, var(--hybrid-input-local-font-family));\n    margin-top: var(--hybrid-input-validation-message-margin-top, var(--hybrid-input-local-validation-message-margin-top, 0.25rem));\n    padding: var(--hybrid-input-validation-message-padding, var(--hybrid-input-local-validation-message-padding, 0));\n    \n    /* Prevent text overflow and ensure proper wrapping without affecting parent width */\n    word-wrap: break-word;\n    word-break: break-word;\n    overflow-wrap: break-word;\n    hyphens: auto;\n    white-space: normal;\n    max-width: 100%;\n    width: 0;\n    min-width: 100%;\n    box-sizing: border-box;\n    line-height: var(--hybrid-input-validation-message-line-height, var(--hybrid-input-local-validation-message-line-height, 1.4));\n  }\n\n  /* \n   * Error validation message styling\n   * Applied when validation message has error class\n   */\n  .validation-message.error {\n    color: var(--hybrid-input-error-message-color, var(--hybrid-input-local-error-message-color, var(--hybrid-input-error-color, var(--hybrid-input-local-error-color, #dc2626))));\n  }\n\n  /* \n   * Warning validation message styling\n   * Applied when validation message has warning class\n   */\n  .validation-message.warning {\n    color: var(--hybrid-input-warning-message-color, var(--hybrid-input-local-warning-message-color, var(--hybrid-input-warning-color, var(--hybrid-input-local-warning-color, #d97706))));\n  }\n\n  /* \n   * Disabled state for validation messages\n   * Applied when input is disabled\n   */\n  :host([disabled]) .validation-message {\n    opacity: var(--hybrid-input-disabled-validation-message-opacity, var(--hybrid-input-local-disabled-validation-message-opacity, 0.6));\n    color: var(--hybrid-input-disabled-validation-message-color, var(--hybrid-input-local-disabled-validation-message-color));\n  }\n\n  /* \n   * Validation icon styles\n   * Base styles for validation feedback icons\n   */\n  .validation-icon {\n    width: 16px;\n    height: 16px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  /* \n   * Loading validation icon with hourglass animation\n   * Applied when async validation is in progress\n   */\n  .validation-icon.validation-loading {\n    color: var(--hybrid-input-primary-color, var(--hybrid-input-local-primary-color, #3b82f6));\n    animation: validation-hourglass 2s ease-in-out infinite;\n    transform-origin: center;\n  }\n\n  /* \n   * Error validation icon styling\n   * Applied when validation fails\n   */\n  .validation-icon.validation-error {\n    color: var(--hybrid-input-error-color, var(--hybrid-input-local-error-color, #dc2626));\n  }\n\n  /* \n   * Warning validation icon styling\n   * Applied when validation has warnings\n   */\n  .validation-icon.validation-warning {\n    color: var(--hybrid-input-warning-color, var(--hybrid-input-local-warning-color, #d97706));\n  }\n\n  /* \n   * Success validation icon styling\n   * Applied when validation passes\n   */\n  .validation-icon.validation-success {\n    color: var(--hybrid-input-success-color, var(--hybrid-input-local-success-color, #16a34a));\n  }\n\n  /* \n   * Hourglass animation for validation loading\n   * Gentle pulsing effect without rotation for clean appearance\n   */\n  @keyframes validation-hourglass {\n    0% {\n      opacity: 0.7;\n      transform: scale(1);\n    }\n    25% {\n      opacity: 1;\n      transform: scale(1.03);\n    }\n    50% {\n      opacity: 0.8;\n      transform: scale(1);\n    }\n    75% {\n      opacity: 1;\n      transform: scale(1.03);\n    }\n    100% {\n      opacity: 0.7;\n      transform: scale(1);\n    }\n  }\n\n  /* \n   * Alternative pulse animation option\n   * Uncomment this and change animation above to use pulse instead of hourglass\n   */\n  /*\n  @keyframes validation-pulse {\n    0%, 100% {\n      opacity: 1;\n      transform: scale(1);\n    }\n    50% {\n      opacity: 0.7;\n      transform: scale(1.1);\n    }\n  }\n  */\n`;\n\nexport const styles = [inputStyle, sizeInputStyle, styleVariables];\n"]}

package/input.style.variable.js

@@ -92,6 +92,18 @@ export const styleVariables = css `
     --hybrid-input-local-character-count-margin-top: 4px;
     --hybrid-input-local-character-count-over-limit-color: #da1e28;
 
+    /* Validation message styling variables */
+    --hybrid-input-local-validation-message-font-size: 12px;
+    --hybrid-input-local-validation-message-margin-top: 4px;
+    --hybrid-input-local-validation-message-padding: 0;
+    --hybrid-input-local-validation-message-line-height: 1.4;
+    --hybrid-input-local-error-message-color: #da1e28;
+    --hybrid-input-local-warning-message-color: #f0c300;
+    --hybrid-input-local-error-color: #da1e28;
+    --hybrid-input-local-warning-color: #f0c300;
+    --hybrid-input-local-disabled-validation-message-opacity: 0.6;
+    --hybrid-input-local-disabled-validation-message-color: #c6c6c6;
+
     /* Input Variant Variables */
     /* Outlined variant - full border */
     --hybrid-input-local-outlined-border: 1px solid #d0d0d0;
@@ -153,6 +165,13 @@ export const styleVariables = css `
     --hybrid-input-local-character-count-color: #8c8c8c;
     --hybrid-input-local-character-count-over-limit-color: #fa4d56;
 
+    /* Dark theme validation message colors */
+    --hybrid-input-local-error-message-color: #ffb3b8;
+    --hybrid-input-local-warning-message-color: #f0c300;
+    --hybrid-input-local-error-color: #fa4d56;
+    --hybrid-input-local-warning-color: #f0c300;
+    --hybrid-input-local-disabled-validation-message-color: #6f6f6f;
+
     /* Dark theme input variant variables */
     /* Outlined variant - dark theme */
     --hybrid-input-local-outlined-border: 1px solid #525252;

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"]}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8LhC,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    /* Validation message styling variables */\n    --hybrid-input-local-validation-message-font-size: 12px;\n    --hybrid-input-local-validation-message-margin-top: 4px;\n    --hybrid-input-local-validation-message-padding: 0;\n    --hybrid-input-local-validation-message-line-height: 1.4;\n    --hybrid-input-local-error-message-color: #da1e28;\n    --hybrid-input-local-warning-message-color: #f0c300;\n    --hybrid-input-local-error-color: #da1e28;\n    --hybrid-input-local-warning-color: #f0c300;\n    --hybrid-input-local-disabled-validation-message-opacity: 0.6;\n    --hybrid-input-local-disabled-validation-message-color: #c6c6c6;\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 validation message colors */\n    --hybrid-input-local-error-message-color: #ffb3b8;\n    --hybrid-input-local-warning-message-color: #f0c300;\n    --hybrid-input-local-error-color: #fa4d56;\n    --hybrid-input-local-warning-color: #f0c300;\n    --hybrid-input-local-disabled-validation-message-color: #6f6f6f;\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

@@ -1,7 +1,8 @@
 export declare const enum INPUT_STATE {
     Default = "default",
     Error = "error",
-    Warning = "warning"
+    Warning = "warning",
+    Success = "success"
 }
 export declare const enum INPUT_SIZE {
     Large = "large",
@@ -18,6 +19,10 @@ export declare const enum INPUT_TYPE {
     PASSWORD = "password",
     TEXT = "text",
     NUMBER = "number",
+    EMAIL = "email",
+    URL = "url",
+    TEL = "tel",
+    SEARCH = "search",
     CALENDAR = "calendar"
 }
 export interface FocusOptions {
@@ -34,5 +39,89 @@ export interface FocusChangeEvent {
     cursorPosition?: number;
     selectedText?: string;
 }
+/**
+ * Validation rule interface
+ */
+export interface ValidationRule {
+    /** Validation rule type */
+    type?: 'string' | 'number' | 'boolean' | 'method' | 'regexp' | 'integer' | 'float' | 'array' | 'object' | 'enum' | 'date' | 'url' | 'hex' | 'email';
+    /** Required field */
+    required?: boolean;
+    /** Pattern to match */
+    pattern?: RegExp;
+    /** Minimum length for string/array */
+    minLength?: number;
+    /** Maximum length for string/array */
+    maxLength?: number;
+    /** Minimum value for number */
+    min?: number;
+    /** Maximum value for number */
+    max?: number;
+    /** Enumerable values */
+    enum?: any[];
+    /** Custom validation message */
+    message?: string;
+    /** Custom validator function */
+    validator?: (rule: ValidationRule, value: any) => Promise<void> | void | {
+        isValid: boolean;
+        message?: string;
+    } | Promise<{
+        isValid: boolean;
+        message?: string;
+    }>;
+    /** Async validator function */
+    asyncValidator?: (rule: ValidationRule, value: any) => Promise<void>;
+    /** Transform value before validation */
+    transform?: (value: any) => any;
+    /** Validation trigger */
+    trigger?: 'change' | 'blur' | 'submit';
+    /** Validation level */
+    warningOnly?: boolean;
+}
+/**
+ * Input validation result
+ */
+export interface InputValidationResult {
+    isValid: boolean;
+    errors: string[];
+    warnings: string[];
+    hasError: boolean;
+    hasWarning: boolean;
+    errorMessage?: string;
+    warningMessage?: string;
+}
+/**
+ * Built-in validation patterns
+ */
+export declare const VALIDATION_PATTERNS: {
+    readonly EMAIL: RegExp;
+    readonly URL: RegExp;
+    readonly PHONE: RegExp;
+    readonly PASSWORD_STRONG: RegExp;
+    readonly ALPHANUMERIC: RegExp;
+    readonly NUMERIC: RegExp;
+    readonly ALPHA: RegExp;
+    readonly USERNAME: RegExp;
+    readonly HEX_COLOR: RegExp;
+    readonly IPV4: RegExp;
+    readonly CREDIT_CARD: RegExp;
+};
+/**
+ * Pre-built validation rules
+ */
+export declare const VALIDATION_RULES: {
+    readonly required: (message?: string) => ValidationRule;
+    readonly email: (message?: string) => ValidationRule;
+    readonly url: (message?: string) => ValidationRule;
+    readonly minLength: (min: number, message?: string) => ValidationRule;
+    readonly maxLength: (max: number, message?: string) => ValidationRule;
+    readonly min: (min: number, message?: string) => ValidationRule;
+    readonly max: (max: number, message?: string) => ValidationRule;
+    readonly pattern: (pattern: RegExp, message?: string) => ValidationRule;
+    readonly strongPassword: (message?: string) => ValidationRule;
+    readonly phone: (message?: string) => ValidationRule;
+    readonly username: (message?: string) => ValidationRule;
+    readonly creditCard: (message?: string) => ValidationRule;
+};
 export declare const EMPTY_STRING = "";
 //# sourceMappingURL=input.types.d.ts.map