@nuralyui/input 0.0.9 → 0.0.11

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;AAE1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AAEH,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmnBrB,CAAC;AAEF;;;GAGG;AACH,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkMzB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,UAAU,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\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 with comprehensive CSS variable overrides\n * - Focus, disabled, and validation states\n * - Dark theme support\n * \n * Icon Color Customization:\n * The input component provides multiple levels of CSS variable overrides for icon colors:\n * \n * Global Level:\n * - --nuraly-color-input-icon: Controls all icons in input components\n * - --nuraly-size-input-icon: Controls size of all icons in input components\n * - --nuraly-color-input-icon-hover: Hover state for all icons\n * - --nuraly-color-input-icon-active: Active state for all icons\n * - --nuraly-color-input-icon-disabled: Disabled state for all icons\n * \n * Specific Icon Types:\n * - --nuraly-color-input-warning-icon: Warning state icons\n * - --nuraly-color-input-error-icon: Error state icons\n * - --nuraly-color-input-calendar-icon: Calendar input type icons\n * - --nuraly-color-input-password-icon: Password toggle icons\n * - --nuraly-color-input-copy-icon: Copy functionality icons\n * - --nuraly-color-input-clear-icon: Clear functionality icons\n * - --nuraly-color-input-number-icons: Number input increment/decrement icons\n * \n * Usage Examples:\n * ```css\n * :root {\n *   --nuraly-color-input-icon: #0066cc;\n *   --nuraly-color-input-error-icon: #cc0000;\n *   --nuraly-size-input-icon: 20px;\n * }\n * \n * .custom-input {\n *   --nuraly-color-input-icon: #purple;\n * }\n * ```\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(--nuraly-font-family-input, 'IBM Plex Sans', ui-sans-serif, system-ui);\n  }\n\n  /* \n   * Base input wrapper and input element styles\n   * Background applied to wrapper to cover entire container including addons\n   * Uses theme CSS custom properties for comprehensive theming support\n   */\n  .input-wrapper {\n    background-color: var(--nuraly-color-input-background, var(--nuraly-color-input-background-fallback, #ffffff));\n  }\n\n\n  #input-container > input {\n    background-color: transparent;\n    border: var(--nuraly-input-border, none);\n    outline: var(--nuraly-input-outline, none);\n    flex: 1;\n    min-width: 0;\n    width: 100%;\n    \n    /* Typography from theme */\n    font-family: var(--nuraly-font-family-input, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto);\n    font-size: var(--nuraly-font-size-input, 14px);\n    color: var(--nuraly-color-input-text, var(--nuraly-color-input-text-fallback, rgba(0, 0, 0, 0.88)));\n    \n    /* Padding from theme */\n    padding: var(--nuraly-spacing-input-medium-vertical, 4px) var(--nuraly-spacing-input-medium-horizontal, 11px);\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(--nuraly-color-input-disabled-background, var(--nuraly-color-input-disabled-background-fallback, #f4f4f4));\n  }\n\n  :host([disabled]) #input-container > input {\n    background-color: transparent;\n    cursor: var(--nuraly-cursor-disabled, not-allowed);\n    color: var(--nuraly-color-input-disabled-text, var(--nuraly-color-input-disabled-text-fallback, rgba(0, 0, 0, 0.25)));\n  }\n\n  /* \n   * Icon base styles\n   * Common styling for all icons within the input component\n   * Provides comprehensive CSS variable override system\n   */\n  nr-icon {\n    display: flex;\n    align-items: center;\n    \n    /* Global icon color override - applies to all icons in input */\n    --nuraly-color-icon: var(--nuraly-color-input-icon, var(--nuraly-color-icon, var(--nuraly-color-icon-fallback, #161616)));\n    \n    /* Size override for input icons */\n    --nuraly-icon-size: var(--nuraly-size-input-icon, var(--nuraly-icon-size, var(--nuraly-icon-size-fallback, 18px)));\n    \n    /* Interactive state overrides */\n    --nuraly-color-icon-hover: var(--nuraly-color-input-icon-hover, var(--nuraly-color-icon-hover, var(--nuraly-color-icon-hover-fallback, #0f62fe)));\n    --nuraly-color-icon-active: var(--nuraly-color-input-icon-active, var(--nuraly-color-icon-active, var(--nuraly-color-icon-active-fallback, #054ada)));\n    --nuraly-color-icon-disabled: var(--nuraly-color-input-icon-disabled, var(--nuraly-color-icon-disabled, var(--nuraly-color-icon-disabled-fallback, #c6c6c6)));\n  }\n\n  /* \n   * Placeholder styling\n   * Customizable placeholder text appearance\n   */\n  ::placeholder {\n    color: var(--nuraly-color-input-placeholder, var(--nuraly-color-input-placeholder-fallback, #a8a8a8));\n    font-size: var(--nuraly-font-size-input-placeholder, 14px);\n    font-family: var(--nuraly-font-family-input, 'IBM Plex Sans', ui-sans-serif, system-ui);\n  }\n\n  /* \n   * Disabled placeholder styling\n   * Applied when input is disabled\n   */\n  :host([disabled]) ::placeholder {\n    color: var(--nuraly-color-input-disabled-placeholder, var(--nuraly-color-input-disabled-placeholder-fallback, #c6c6c6));\n  }\n\n  /* ========================================\n   * ICON VARIANTS AND STATES\n   * ======================================== */\n\n  /* Warning state icon */\n  #warning-icon {\n    --nuraly-color-icon: var(--nuraly-color-input-warning-icon, #f1c21b);\n  }\n\n  /* Error state icon */\n  #error-icon {\n    --nuraly-color-icon: var(--nuraly-color-input-error-icon, #da1e28);\n  }\n\n  /* Calendar input type icon */\n  #calendar-icon {\n    --nuraly-color-icon: var(--nuraly-color-input-calendar-icon, #161616);\n  }\n\n  /* Password toggle icon */\n  #password-icon {\n    padding-left: var(--nuraly-input-password-icon-padding-left, var(--nuraly-password-icon-padding-left, 8px));\n    padding-right: var(--nuraly-input-password-icon-padding-right, var(--nuraly-password-icon-padding-right, 8px));\n    cursor: var(--nuraly-cursor-interactive, pointer);\n    --nuraly-color-icon: var(--nuraly-color-input-password-icon, #161616);\n  }\n\n  /* Copy functionality icon */\n  #copy-icon {\n    padding-right: var(--nuraly-input-copy-icon-padding-right, var(--nuraly-copy-icon-padding-right, 8px));\n    --nuraly-color-icon: var(--nuraly-color-input-copy-icon, #161616);\n    cursor: var(--nuraly-cursor-interactive, pointer);\n  }\n\n  /* Clear functionality icon */\n  #clear-icon {\n    padding-right: var(--nuraly-input-clear-icon-padding-right, var(--nuraly-clear-icon-padding-right, 8px));\n    --nuraly-color-icon: var(--nuraly-color-input-clear-icon, #161616);\n    cursor: var(--nuraly-cursor-interactive, 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: var(--nuraly-cursor-interactive, pointer);\n    position: absolute;\n    right: 0;\n    top: 0;\n    height: 100%;\n    width: var(--nuraly-input-number-icons-container-width, var(--nuraly-number-icons-container-width, 50px));\n    padding-right: var(--nuraly-input-number-icons-container-padding-right, var(--nuraly-number-icons-container-padding-right, 8px));\n  }\n\n  /* Individual number icons styling */\n  #number-icons nr-icon {\n    --nuraly-color-icon: var(--nuraly-color-input-number-icons, #161616);\n    padding-left: var(--nuraly-input-number-icons-padding-left, var(--nuraly-number-icons-padding-left, 4px));\n    padding-right: var(--nuraly-input-number-icons-padding-right, var(--nuraly-number-icons-padding-right, 4px));\n    width: var(--nuraly-input-number-icons-width, var(--nuraly-number-icons-width, 24px));\n    height: var(--nuraly-input-number-icons-height, var(--nuraly-number-icons-height, 24px));\n  }\n\n  /* Number icons separator styling */\n  #icons-separator {\n    color: var(--nuraly-input-number-icons-separator-color, var(--nuraly-number-icons-separator-color));\n    padding-bottom: var(--nuraly-input-number-icons-separator-padding-bottom, var(--nuraly-number-icons-separator-padding-bottom));\n    padding-left: var(--nuraly-input-number-icons-separator-padding-left, var(--nuraly-number-icons-separator-padding-left));\n    padding-right: var(--nuraly-input-number-icons-separator-padding-right, var(--nuraly-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(--nuraly-input-disabled-icon-opacity, var(--nuraly-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(--nuraly-input-addon-background-color, var(--nuraly-addon-background-color));\n    border: var(--nuraly-input-border, var(--nuraly-border));\n    border-right: none;\n    border-top-left-radius: var(--nuraly-input-border-radius, var(--nuraly-border-radius));\n    border-bottom-left-radius: var(--nuraly-input-border-radius, var(--nuraly-border-radius));\n    padding: var(--nuraly-input-addon-padding, var(--nuraly-addon-padding));\n    display: flex;\n    align-items: center;\n    color: var(--nuraly-input-addon-color, var(--nuraly-addon-color));\n    font-size: var(--nuraly-input-font-size, var(--nuraly-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(--nuraly-input-addon-background-color, var(--nuraly-addon-background-color));\n    border: var(--nuraly-input-border, var(--nuraly-border));\n    border-left: none;\n    border-top-right-radius: var(--nuraly-input-border-radius, var(--nuraly-border-radius));\n    border-bottom-right-radius: var(--nuraly-input-border-radius, var(--nuraly-border-radius));\n    padding: var(--nuraly-input-addon-padding, var(--nuraly-addon-padding));\n    display: flex;\n    align-items: center;\n    color: var(--nuraly-input-addon-color, var(--nuraly-addon-color));\n    font-size: var(--nuraly-input-font-size, var(--nuraly-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 theme CSS custom properties for comprehensive border and layout control\n   */\n  #input-container {\n    /* Default outlined style */\n    border: var(--nuraly-border-width-input, 1px) solid var(--nuraly-color-input-border, #d9d9d9);\n    border-radius: var(--nuraly-border-radius-input, 6px);\n    \n    /* Background and text styling */\n    background-color: var(--nuraly-color-input-background, #ffffff);\n    color: var(--nuraly-color-input-text, rgba(0, 0, 0, 0.88));\n    font-family: var(--nuraly-font-family-input, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto);\n    font-size: var(--nuraly-font-size-input, 14px);\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    /* Transitions for smooth theme changes */\n    transition: var(--nuraly-transition-input, border-color 0.2s, box-shadow 0.2s);\n  }\n\n  /* Carbon Design System override - Carbon specific styles */\n  html[data-theme^=\"carbon\"] nr-input #input-container,\n  body[data-theme^=\"carbon\"] nr-input #input-container,\n  [data-theme^=\"carbon\"] nr-input #input-container,\n  .input-wrapper[data-theme^=\"carbon\"] #input-container {\n    border: var(--nuraly-border-width-input, 1px) solid var(--nuraly-color-input-border, transparent) !important;\n    border-bottom: var(--nuraly-border-width-input, 2px) solid var(--nuraly-color-input-border-bottom, #8d8d8d) !important;\n    border-radius: var(--nuraly-border-radius-input, 0) !important;\n    background-color: var(--nuraly-color-input-background, #f4f4f4) !important;\n    color: var(--nuraly-color-input-text, #161616) !important;\n  }\n\n  /* Default theme override - Default specific styles */\n  html[data-theme^=\"default\"] nr-input #input-container,\n  body[data-theme^=\"default\"] nr-input #input-container,\n  [data-theme^=\"default\"] nr-input #input-container,\n  .input-wrapper[data-theme^=\"default\"] #input-container {\n    border: var(--nuraly-border-width-input, 1px) solid var(--nuraly-color-input-border, #d9d9d9) !important;\n    border-radius: var(--nuraly-border-radius-input, 6px) !important;\n    background-color: var(--nuraly-color-input-background, #ffffff) !important;\n    color: var(--nuraly-color-input-text, rgba(0, 0, 0, 0.88)) !important;\n  }\n\n  /* Carbon input element padding override */\n  html[data-theme^=\"carbon\"] nr-input #input-container > input,\n  body[data-theme^=\"carbon\"] nr-input #input-container > input,\n  [data-theme^=\"carbon\"] nr-input #input-container > input,\n  .input-wrapper[data-theme^=\"carbon\"] #input-container > input {\n    padding: 7px 16px !important;\n  }\n\n  /* Default input element padding override */\n  html[data-theme^=\"default\"] nr-input #input-container > input,\n  body[data-theme^=\"default\"] nr-input #input-container > input,\n  [data-theme^=\"default\"] nr-input #input-container > input,\n  .input-wrapper[data-theme^=\"default\"] #input-container > input {\n    padding: var(--nuraly-spacing-input-medium-vertical, 4px) var(--nuraly-spacing-input-medium-horizontal, 11px) !important;\n  }\n\n  /* Focus state for input container */\n  #input-container:focus-within {\n    border-color: var(--nuraly-color-input-border-focus, #1890ff);\n    box-shadow: var(--nuraly-shadow-input-focus, 0 0 0 2px rgba(24, 144, 255, 0.2));\n    outline: none;\n  }\n\n  /* Carbon focus override */\n  html[data-theme^=\"carbon\"] nr-input #input-container:focus-within,\n  body[data-theme^=\"carbon\"] nr-input #input-container:focus-within,\n  [data-theme^=\"carbon\"] nr-input #input-container:focus-within,\n  .input-wrapper[data-theme^=\"carbon\"] #input-container:focus-within {\n    border: var(--nuraly-border-width-input, 2px) solid var(--nuraly-color-input-border-focus, #0f62fe) !important;\n    border-radius: var(--nuraly-border-radius-input, 0) !important;\n    box-shadow: var(--nuraly-shadow-input-focus, none) !important;\n    outline: none !important;\n  }\n\n  /* Default focus override */\n  html[data-theme^=\"default\"] nr-input #input-container:focus-within,\n  body[data-theme^=\"default\"] nr-input #input-container:focus-within,\n  [data-theme^=\"default\"] nr-input #input-container:focus-within,\n  .input-wrapper[data-theme^=\"default\"] #input-container:focus-within {\n    border-color: var(--nuraly-color-input-border-focus, #1890ff) !important;\n    border-radius: var(--nuraly-border-radius-input, 6px) !important;\n    box-shadow: var(--nuraly-shadow-input-focus, 0 0 0 2px rgba(24, 144, 255, 0.2)) !important;\n    outline: none !important;\n  }\n\n  /* \n   * Disabled container styles\n   * Applied when input is disabled\n   */\n  :host([disabled]) #input-container {\n    background-color: var(--nuraly-color-input-disabled-background, #f5f5f5);\n    border-color: var(--nuraly-color-input-disabled-border, #d9d9d9);\n    color: var(--nuraly-color-input-disabled-text, rgba(0, 0, 0, 0.25));\n    cursor: not-allowed;\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(--nuraly-input-outlined-border, var(--nuraly-outlined-border));\n    border-radius: var(--nuraly-input-outlined-border-radius, var(--nuraly-outlined-border-radius));\n    background-color: var(--nuraly-input-outlined-background, var(--nuraly-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(--nuraly-input-outlined-focus-border, var(--nuraly-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(--nuraly-input-filled-background, var(--nuraly-filled-background));\n    border-radius: var(--nuraly-input-filled-border-radius, var(--nuraly-filled-border-radius));\n    border-bottom: var(--nuraly-input-filled-border-bottom, var(--nuraly-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(--nuraly-input-filled-focus-border-bottom, var(--nuraly-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(--nuraly-input-borderless-background, var(--nuraly-borderless-background));\n    border: none;\n    border-radius: var(--nuraly-input-borderless-border-radius, var(--nuraly-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(--nuraly-input-borderless-focus-outline, var(--nuraly-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(--nuraly-input-underlined-border-bottom, var(--nuraly-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(--nuraly-input-underlined-focus-border-bottom, var(--nuraly-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(--nuraly-input-text-color, var(--nuraly-text-color));\n    font-family: var(--nuraly-input-font-family, var(--nuraly-font-family));\n    font-size: var(--nuraly-input-font-size, var(--nuraly-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(--nuraly-input-error-border, var(--nuraly-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(--nuraly-input-error-border, var(--nuraly-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(--nuraly-input-error-border, var(--nuraly-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(--nuraly-input-number-icons-container-padding-left, var(--nuraly-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(--nuraly-input-label-color, var(--nuraly-label-color));\n    font-size: var(--nuraly-input-label-font-size, var(--nuraly-label-font-size));\n    padding-bottom: var(--nuraly-input-label-padding-bottom, var(--nuraly-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(--nuraly-input-helper-text-color, var(--nuraly-helper-text-color));\n    font-size: var(--nuraly-input-helper-text-font-size, var(--nuraly-helper-text-font-size));\n    padding-top: var(--nuraly-input-helper-text-padding-top, var(--nuraly-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(--nuraly-input-error-helper-text-color, var(--nuraly-error-helper-text-color));\n  }\n\n  :host([state='warning']) ::slotted([slot='helper-text']) {\n    color: var(--nuraly-input-warning-helper-text-color, var(--nuraly-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(--nuraly-input-disabled-helper-text-color, var(--nuraly-disabled-helper-text-color));\n  }\n\n  :host([disabled]) ::slotted([slot='label']) {\n    color: var(--nuraly-input-disabled-label-color, var(--nuraly-disabled-label-color));\n  }\n\n  /* \n   * Input prefix wrapper styling\n   * Centers the prefix content vertically and horizontally\n   */\n  .input-prefix {\n    display: flex;\n    align-items: center;\n    justify-content: center;\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(--nuraly-input-prefix-padding-right, var(--nuraly-prefix-padding-right));\n    color: var(--nuraly-input-prefix-color, var(--nuraly-prefix-color));\n    font-size: var(--nuraly-input-prefix-font-size, var(--nuraly-prefix-font-size));\n    flex-shrink: 0;\n  }\n\n  /* \n   * Input suffix wrapper styling\n   * Centers the suffix content vertically and horizontally\n   */\n  .input-suffix {\n    display: flex;\n    align-items: center;\n    justify-content: center;\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(--nuraly-input-suffix-padding-left, var(--nuraly-suffix-padding-left));\n    color: var(--nuraly-input-suffix-color, var(--nuraly-suffix-color));\n    font-size: var(--nuraly-input-suffix-font-size, var(--nuraly-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(--nuraly-input-disabled-icon-opacity, var(--nuraly-disabled-icon-opacity));\n    color: var(--nuraly-input-disabled-prefix-suffix-color, var(--nuraly-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(--nuraly-input-large-padding-top, var(--nuraly-large-padding-top));\n    padding-bottom: var(--nuraly-input-large-padding-bottom, var(--nuraly-large-padding-bottom));\n    padding-left: var(--nuraly-input-large-padding-left, var(--nuraly-large-padding-left));\n    padding-right: var(--nuraly-input-large-padding-right, var(--nuraly-large-padding-right));\n  }\n\n  /* Medium input size variant (default) */\n  div[data-size='medium'] {\n    padding-top: var(--nuraly-input-medium-padding-top, var(--nuraly-medium-padding-top));\n    padding-bottom: var(--nuraly-input-medium-padding-bottom, var(--nuraly-medium-padding-bottom));\n    padding-left: var(--nuraly-input-medium-padding-left, var(--nuraly-medium-padding-left));\n    padding-right: var(--nuraly-input-medium-padding-right, var(--nuraly-medium-padding-right));\n  }\n\n  /* Small input size variant */\n  div[data-size='small'] {\n    padding-top: var(--nuraly-input-small-padding-top, var(--nuraly-small-padding-top));\n    padding-bottom: var(--nuraly-input-small-padding-bottom, var(--nuraly-small-padding-bottom));\n    padding-left: var(--nuraly-input-small-padding-left, var(--nuraly-small-padding-left));\n    padding-right: var(--nuraly-input-small-padding-right, var(--nuraly-small-padding-right));\n  }\n\n  /* Carbon Design System - Size-specific padding overrides */\n  html[data-theme^=\"carbon\"] nr-input div[data-size='medium'],\n  body[data-theme^=\"carbon\"] nr-input div[data-size='medium'],\n  [data-theme^=\"carbon\"] div[data-size='medium'] {\n    padding: 4px 8px !important;\n  }\n\n  /* \n   * Character count display\n   * Shows character count and limit information\n   */\n  .character-count {\n    font-size: var(--nuraly-input-character-count-font-size, var(--nuraly-character-count-font-size));\n    color: var(--nuraly-input-character-count-color, var(--nuraly-character-count-color));\n    text-align: right;\n    margin-top: var(--nuraly-input-character-count-margin-top, var(--nuraly-character-count-margin-top));\n    font-family: var(--nuraly-input-font-family, var(--nuraly-font-family));\n  }\n\n  /* Character count over limit styling */\n  .character-count[data-over-limit] {\n    color: var(--nuraly-input-character-count-over-limit-color, var(--nuraly-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(--nuraly-input-validation-message-font-size, var(--nuraly-validation-message-font-size, 0.875rem));\n    font-family: var(--nuraly-input-font-family, var(--nuraly-font-family));\n    margin-top: var(--nuraly-input-validation-message-margin-top, var(--nuraly-validation-message-margin-top, 0.25rem));\n    padding: var(--nuraly-input-validation-message-padding, var(--nuraly-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(--nuraly-input-validation-message-line-height, var(--nuraly-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(--nuraly-input-error-message-color, var(--nuraly-error-message-color, var(--nuraly-input-error-color, var(--nuraly-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(--nuraly-input-warning-message-color, var(--nuraly-warning-message-color, var(--nuraly-input-warning-color, var(--nuraly-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(--nuraly-input-disabled-validation-message-opacity, var(--nuraly-disabled-validation-message-opacity, 0.6));\n    color: var(--nuraly-input-disabled-validation-message-color, var(--nuraly-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(--nuraly-input-primary-color, var(--nuraly-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(--nuraly-input-error-color, var(--nuraly-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(--nuraly-input-warning-color, var(--nuraly-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(--nuraly-input-success-color, var(--nuraly-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];\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

package/input.types.js

@@ -1,2 +1,75 @@
+/**
+ * Built-in validation patterns
+ */
+export const VALIDATION_PATTERNS = {
+    EMAIL: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
+    URL: /^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/,
+    PHONE: /^[\+]?[1-9][\d]{0,15}$/,
+    PASSWORD_STRONG: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/,
+    ALPHANUMERIC: /^[a-zA-Z0-9]+$/,
+    NUMERIC: /^\d+$/,
+    ALPHA: /^[a-zA-Z]+$/,
+    USERNAME: /^[a-zA-Z0-9_-]{3,16}$/,
+    HEX_COLOR: /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,
+    IPV4: /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
+    CREDIT_CARD: /^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|3[47][0-9]{13}|3[0-9]{13}|6(?:011|5[0-9]{2})[0-9]{12})$/,
+};
+/**
+ * Pre-built validation rules
+ */
+export const VALIDATION_RULES = {
+    required: (message) => ({
+        required: true,
+        message: message || 'This field is required'
+    }),
+    email: (message) => ({
+        type: 'email',
+        pattern: VALIDATION_PATTERNS.EMAIL,
+        message: message || 'Please enter a valid email address'
+    }),
+    url: (message) => ({
+        type: 'url',
+        pattern: VALIDATION_PATTERNS.URL,
+        message: message || 'Please enter a valid URL'
+    }),
+    minLength: (min, message) => ({
+        minLength: min,
+        message: message || `Minimum length is ${min} characters`
+    }),
+    maxLength: (max, message) => ({
+        maxLength: max,
+        message: message || `Maximum length is ${max} characters`
+    }),
+    min: (min, message) => ({
+        type: 'number',
+        min,
+        message: message || `Minimum value is ${min}`
+    }),
+    max: (max, message) => ({
+        type: 'number',
+        max,
+        message: message || `Maximum value is ${max}`
+    }),
+    pattern: (pattern, message) => ({
+        pattern,
+        message: message || 'Invalid format'
+    }),
+    strongPassword: (message) => ({
+        pattern: VALIDATION_PATTERNS.PASSWORD_STRONG,
+        message: message || 'Password must contain at least 8 characters, including uppercase, lowercase, number and special character'
+    }),
+    phone: (message) => ({
+        pattern: VALIDATION_PATTERNS.PHONE,
+        message: message || 'Please enter a valid phone number'
+    }),
+    username: (message) => ({
+        pattern: VALIDATION_PATTERNS.USERNAME,
+        message: message || 'Username must be 3-16 characters long and contain only letters, numbers, hyphens and underscores'
+    }),
+    creditCard: (message) => ({
+        pattern: VALIDATION_PATTERNS.CREDIT_CARD,
+        message: message || 'Please enter a valid credit card number'
+    }),
+};
 export const EMPTY_STRING = '';
 //# sourceMappingURL=input.types.js.map

package/input.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.types.js","sourceRoot":"","sources":["../../../src/components/input/input.types.ts"],"names":[],"mappings":"AA2CA,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC","sourcesContent":["export const enum INPUT_STATE {\n  Default = 'default',\n  Error = 'error',\n  Warning = 'warning',\n}\n\nexport const enum INPUT_SIZE {\n  Large = 'large',\n  Medium = 'medium',\n  Small = 'small',\n}\n\nexport const enum INPUT_VARIANT {\n  Outlined = 'outlined',\n  Filled = 'filled',\n  Borderless = 'borderless',\n  Underlined = 'underlined',\n}\n\nexport const enum INPUT_TYPE {\n  PASSWORD = 'password',\n  TEXT = 'text',\n  NUMBER = 'number',\n  CALENDAR = 'calendar',\n}\n\nexport interface FocusOptions {\n  preventScroll?: boolean;\n  cursor?: 'start' | 'end' | 'all' | number;\n  select?: boolean;\n}\n\nexport interface BlurOptions {\n  preventScroll?: boolean;\n  restoreCursor?: boolean;\n}\n\nexport interface FocusChangeEvent {\n  focused: boolean;\n  cursorPosition?: number;\n  selectedText?: string;\n}\n\nexport const EMPTY_STRING = '';\n"]}
+{"version":3,"file":"input.types.js","sourceRoot":"","sources":["../../../src/components/input/input.types.ts"],"names":[],"mappings":"AA4GA;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,KAAK,EAAE,kDAAkD;IACzD,GAAG,EAAE,yGAAyG;IAC9G,KAAK,EAAE,wBAAwB;IAC/B,eAAe,EAAE,sEAAsE;IACvF,YAAY,EAAE,gBAAgB;IAC9B,OAAO,EAAE,OAAO;IAChB,KAAK,EAAE,aAAa;IACpB,QAAQ,EAAE,uBAAuB;IACjC,SAAS,EAAE,oCAAoC;IAC/C,IAAI,EAAE,6FAA6F;IACnG,WAAW,EAAE,qGAAqG;CAC1G,CAAC;AAEX;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,QAAQ,EAAE,CAAC,OAAgB,EAAkB,EAAE,CAAC,CAAC;QAC/C,QAAQ,EAAE,IAAI;QACd,OAAO,EAAE,OAAO,IAAI,wBAAwB;KAC7C,CAAC;IAEF,KAAK,EAAE,CAAC,OAAgB,EAAkB,EAAE,CAAC,CAAC;QAC5C,IAAI,EAAE,OAAO;QACb,OAAO,EAAE,mBAAmB,CAAC,KAAK;QAClC,OAAO,EAAE,OAAO,IAAI,oCAAoC;KACzD,CAAC;IAEF,GAAG,EAAE,CAAC,OAAgB,EAAkB,EAAE,CAAC,CAAC;QAC1C,IAAI,EAAE,KAAK;QACX,OAAO,EAAE,mBAAmB,CAAC,GAAG;QAChC,OAAO,EAAE,OAAO,IAAI,0BAA0B;KAC/C,CAAC;IAEF,SAAS,EAAE,CAAC,GAAW,EAAE,OAAgB,EAAkB,EAAE,CAAC,CAAC;QAC7D,SAAS,EAAE,GAAG;QACd,OAAO,EAAE,OAAO,IAAI,qBAAqB,GAAG,aAAa;KAC1D,CAAC;IAEF,SAAS,EAAE,CAAC,GAAW,EAAE,OAAgB,EAAkB,EAAE,CAAC,CAAC;QAC7D,SAAS,EAAE,GAAG;QACd,OAAO,EAAE,OAAO,IAAI,qBAAqB,GAAG,aAAa;KAC1D,CAAC;IAEF,GAAG,EAAE,CAAC,GAAW,EAAE,OAAgB,EAAkB,EAAE,CAAC,CAAC;QACvD,IAAI,EAAE,QAAQ;QACd,GAAG;QACH,OAAO,EAAE,OAAO,IAAI,oBAAoB,GAAG,EAAE;KAC9C,CAAC;IAEF,GAAG,EAAE,CAAC,GAAW,EAAE,OAAgB,EAAkB,EAAE,CAAC,CAAC;QACvD,IAAI,EAAE,QAAQ;QACd,GAAG;QACH,OAAO,EAAE,OAAO,IAAI,oBAAoB,GAAG,EAAE;KAC9C,CAAC;IAEF,OAAO,EAAE,CAAC,OAAe,EAAE,OAAgB,EAAkB,EAAE,CAAC,CAAC;QAC/D,OAAO;QACP,OAAO,EAAE,OAAO,IAAI,gBAAgB;KACrC,CAAC;IAEF,cAAc,EAAE,CAAC,OAAgB,EAAkB,EAAE,CAAC,CAAC;QACrD,OAAO,EAAE,mBAAmB,CAAC,eAAe;QAC5C,OAAO,EAAE,OAAO,IAAI,2GAA2G;KAChI,CAAC;IAEF,KAAK,EAAE,CAAC,OAAgB,EAAkB,EAAE,CAAC,CAAC;QAC5C,OAAO,EAAE,mBAAmB,CAAC,KAAK;QAClC,OAAO,EAAE,OAAO,IAAI,mCAAmC;KACxD,CAAC;IAEF,QAAQ,EAAE,CAAC,OAAgB,EAAkB,EAAE,CAAC,CAAC;QAC/C,OAAO,EAAE,mBAAmB,CAAC,QAAQ;QACrC,OAAO,EAAE,OAAO,IAAI,kGAAkG;KACvH,CAAC;IAEF,UAAU,EAAE,CAAC,OAAgB,EAAkB,EAAE,CAAC,CAAC;QACjD,OAAO,EAAE,mBAAmB,CAAC,WAAW;QACxC,OAAO,EAAE,OAAO,IAAI,yCAAyC;KAC9D,CAAC;CACM,CAAC;AAEX,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC","sourcesContent":["export const enum INPUT_STATE {\n  Default = 'default',\n  Error = 'error',\n  Warning = 'warning',\n  Success = 'success',\n}\n\nexport const enum INPUT_SIZE {\n  Large = 'large',\n  Medium = 'medium',\n  Small = 'small',\n}\n\nexport const enum INPUT_VARIANT {\n  Outlined = 'outlined',\n  Filled = 'filled',\n  Borderless = 'borderless',\n  Underlined = 'underlined',\n}\n\nexport const enum INPUT_TYPE {\n  PASSWORD = 'password',\n  TEXT = 'text',\n  NUMBER = 'number',\n  EMAIL = 'email',\n  URL = 'url',\n  TEL = 'tel',\n  SEARCH = 'search',\n  CALENDAR = 'calendar',\n}\n\nexport interface FocusOptions {\n  preventScroll?: boolean;\n  cursor?: 'start' | 'end' | 'all' | number;\n  select?: boolean;\n}\n\nexport interface BlurOptions {\n  preventScroll?: boolean;\n  restoreCursor?: boolean;\n}\n\nexport interface FocusChangeEvent {\n  focused: boolean;\n  cursorPosition?: number;\n  selectedText?: string;\n}\n\n/**\n * Validation rule interface\n */\nexport interface ValidationRule {\n  /** Validation rule type */\n  type?: 'string' | 'number' | 'boolean' | 'method' | 'regexp' | 'integer' | 'float' | 'array' | 'object' | 'enum' | 'date' | 'url' | 'hex' | 'email';\n  \n  /** Required field */\n  required?: boolean;\n  \n  /** Pattern to match */\n  pattern?: RegExp;\n  \n  /** Minimum length for string/array */\n  minLength?: number;\n  \n  /** Maximum length for string/array */\n  maxLength?: number;\n  \n  /** Minimum value for number */\n  min?: number;\n  \n  /** Maximum value for number */\n  max?: number;\n  \n  /** Enumerable values */\n  enum?: any[];\n  \n  /** Custom validation message */\n  message?: string;\n  \n  /** Custom validator function */\n  validator?: (rule: ValidationRule, value: any) => Promise<void> | void | { isValid: boolean; message?: string } | Promise<{ isValid: boolean; message?: string }>;\n  \n  /** Async validator function */\n  asyncValidator?: (rule: ValidationRule, value: any) => Promise<void>;\n  \n  /** Transform value before validation */\n  transform?: (value: any) => any;\n  \n  /** Validation trigger */\n  trigger?: 'change' | 'blur' | 'submit';\n  \n  /** Validation level */\n  warningOnly?: boolean;\n}\n\n/**\n * Input validation result\n */\nexport interface InputValidationResult {\n  isValid: boolean;\n  errors: string[];\n  warnings: string[];\n  hasError: boolean;\n  hasWarning: boolean;\n  errorMessage?: string;\n  warningMessage?: string;\n}\n\n/**\n * Built-in validation patterns\n */\nexport const VALIDATION_PATTERNS = {\n  EMAIL: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/,\n  URL: /^https?:\\/\\/(www\\.)?[-a-zA-Z0-9@:%._\\+~#=]{1,256}\\.[a-zA-Z0-9()]{1,6}\\b([-a-zA-Z0-9()@:%_\\+.~#?&//=]*)$/,\n  PHONE: /^[\\+]?[1-9][\\d]{0,15}$/,\n  PASSWORD_STRONG: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[@$!%*?&])[A-Za-z\\d@$!%*?&]{8,}$/,\n  ALPHANUMERIC: /^[a-zA-Z0-9]+$/,\n  NUMERIC: /^\\d+$/,\n  ALPHA: /^[a-zA-Z]+$/,\n  USERNAME: /^[a-zA-Z0-9_-]{3,16}$/,\n  HEX_COLOR: /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,\n  IPV4: /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,\n  CREDIT_CARD: /^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|3[47][0-9]{13}|3[0-9]{13}|6(?:011|5[0-9]{2})[0-9]{12})$/,\n} as const;\n\n/**\n * Pre-built validation rules\n */\nexport const VALIDATION_RULES = {\n  required: (message?: string): ValidationRule => ({\n    required: true,\n    message: message || 'This field is required'\n  }),\n  \n  email: (message?: string): ValidationRule => ({\n    type: 'email',\n    pattern: VALIDATION_PATTERNS.EMAIL,\n    message: message || 'Please enter a valid email address'\n  }),\n  \n  url: (message?: string): ValidationRule => ({\n    type: 'url',\n    pattern: VALIDATION_PATTERNS.URL,\n    message: message || 'Please enter a valid URL'\n  }),\n  \n  minLength: (min: number, message?: string): ValidationRule => ({\n    minLength: min,\n    message: message || `Minimum length is ${min} characters`\n  }),\n  \n  maxLength: (max: number, message?: string): ValidationRule => ({\n    maxLength: max,\n    message: message || `Maximum length is ${max} characters`\n  }),\n  \n  min: (min: number, message?: string): ValidationRule => ({\n    type: 'number',\n    min,\n    message: message || `Minimum value is ${min}`\n  }),\n  \n  max: (max: number, message?: string): ValidationRule => ({\n    type: 'number',\n    max,\n    message: message || `Maximum value is ${max}`\n  }),\n  \n  pattern: (pattern: RegExp, message?: string): ValidationRule => ({\n    pattern,\n    message: message || 'Invalid format'\n  }),\n  \n  strongPassword: (message?: string): ValidationRule => ({\n    pattern: VALIDATION_PATTERNS.PASSWORD_STRONG,\n    message: message || 'Password must contain at least 8 characters, including uppercase, lowercase, number and special character'\n  }),\n  \n  phone: (message?: string): ValidationRule => ({\n    pattern: VALIDATION_PATTERNS.PHONE,\n    message: message || 'Please enter a valid phone number'\n  }),\n  \n  username: (message?: string): ValidationRule => ({\n    pattern: VALIDATION_PATTERNS.USERNAME,\n    message: message || 'Username must be 3-16 characters long and contain only letters, numbers, hyphens and underscores'\n  }),\n  \n  creditCard: (message?: string): ValidationRule => ({\n    pattern: VALIDATION_PATTERNS.CREDIT_CARD,\n    message: message || 'Please enter a valid credit card number'\n  }),\n} as const;\n\nexport const EMPTY_STRING = '';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuralyui/input",
-    "version": "0.0.9",
+    "version": "0.0.11",
     "description": "",
     "main": "index.js",
     "type": "module",
@@ -8,5 +8,19 @@
         "test": "echo \"Error: no test specified\" && exit 1"
     },
     "author": "Labidi Aymen",
-    "license": "ISC"
+    "license": "ISC",
+    "exports": {
+        ".": {
+            "import": "./index.js"
+        },
+        "./bundle": {
+            "import": "./bundle.js"
+        }
+    },
+    "files": [
+        "bundle.js",
+        "*.js",
+        "*.d.ts",
+        "*.js.map"
+    ]
 }

package/demo/input-demo.d.ts

@@ -1,19 +0,0 @@
-/**
- * @license
- * Copyright 2023 Google Laabidi Aymen
- * SPDX-License-Identifier: MIT
- */
-import { LitElement } from 'lit';
-import '../input.component';
-export declare class ElButtonDemoElement extends LitElement {
-    _changeHandler(_e: unknown): void;
-    _focusHandler(_e: unknown): void;
-    enterPressedHandler(e: CustomEvent): void;
-    render(): import("lit").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'nr-inputs-demo': ElButtonDemoElement;
-    }
-}
-//# sourceMappingURL=input-demo.d.ts.map

package/demo/input-demo.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"input-demo.d.ts","sourceRoot":"","sources":["../../../../src/components/input/demo/input-demo.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAEvC,OAAO,oBAAoB,CAAC;AAC5B,qBACa,mBAAoB,SAAQ,UAAU;IACjD,cAAc,CAAC,EAAE,EAAE,OAAO;IAI1B,aAAa,CAAC,EAAE,EAAE,OAAO;IAIzB,mBAAmB,CAAC,CAAC,EAAC,WAAW;IAGxB,MAAM;CAqThB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}