@nuralyui/input 0.0.10 → 0.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/bundle.js +528 -457
  2. package/input.component.d.ts +1 -1
  3. package/input.component.js +1 -1
  4. package/input.component.js.map +1 -1
  5. package/input.style.js +292 -141
  6. package/input.style.js.map +1 -1
  7. package/package.json +1 -1
  8. package/input.style.variable.d.ts +0 -2
  9. package/input.style.variable.js +0 -193
  10. package/input.style.variable.js.map +0 -1
package/input.style.js.map CHANGED
@@ -1 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"]}
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;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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nuralyui/input",
3
- "version": "0.0.10",
3
+ "version": "0.0.11",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "type": "module",
package/input.style.variable.d.ts DELETED
@@ -1,2 +0,0 @@
1
- export declare const styleVariables: import("lit").CSSResult;
2
- //# sourceMappingURL=input.style.variable.d.ts.map
package/input.style.variable.js DELETED
@@ -1,193 +0,0 @@
1
- import { css } from 'lit';
2
- export const styleVariables = css `
3
- :host {
4
- --hybrid-input-local-background-color: #f4f4f4;
5
- --hybrid-input-local-text-color: #000000;
6
- --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;
7
- --hybrid-input-local-font-size:13px;
8
- --hybrid-input-local-label-color: #525252;
9
- --hybrid-input-local-placeholder-color: #a8a8a8;
10
- --hybrid-input-local-border-bottom: 2px solid #a8a8a8;
11
- --hybrid-input-local-border-top: 2px solid transparent;
12
- --hybrid-input-local-border-left: 2px solid transparent;
13
- --hybrid-input-local-border-right: 2px solid transparent;
14
- --hybrid-input-local-disabled-border-bottom: none;
15
- --hybrid-input-local-disabled-border-top: none;
16
- --hybrid-input-local-disabled-border-left: none;
17
- --hybrid-input-local-disabled-border-right: none;
18
- --hybrid-input-local-focus-border: 2px solid #0f62fe;
19
- --hybrid-input-local-border-radius: 0px;
20
- --hybrid-input-local-label-font-size: 13px;
21
- --hybrid-input-local-helper-text-color: #525252;
22
- --hybrid-input-local-helper-text-font-size: 13px;
23
- --hybrid-input-local-placeholder-font-size: 13px;
24
- --hybrid-input-label-padding-bottom: 5px;
25
- --hybrid-input-local-helper-text-padding-top: 5px;
26
- --hybrid-input-local-disabled-background-color: #f4f4f4;
27
- --hybrid-input-local-disabled-placeholder-color: #c6c6c6;
28
- --hybrid-input-local-error-helper-text-color: #da1e28;
29
- --hybrid-input-local-error-border: 2px solid #da1e28;
30
- --hybrid-input-local-warning-helper-text-color: #161616;
31
- --hybrid-input-local-disabled-helper-text-color: #c6c6c6;
32
- --hybrid-input-local-disabled-label-color: #c6c6c6;
33
- --hybrid-input-local-warning-icon-color: #f0c300;
34
- --hybrid-input-local-error-icon-color: #da1e28;
35
- --hybrid-input-local-password-icon-color: #000000;
36
- --hybrid-input-local-calendar-icon-color: #000000;
37
- --hybrid-input-local-copy-icon-color: #000000;
38
- --hybrid-input-local-copy-icon-padding-right:5px;
39
- --hybrid-input-local-clear-icon-color: #000000;
40
- --hybrid-input-local-clear-icon-padding-right: 5px;
41
- --hybrid-input-local-disabled-icon-opacity: 0.4;
42
- --hybrid-input-local-number-icons-color: #000000;
43
- --hybrid-input-local-password-icon-padding-left: 8px;
44
- --hybrid-input-local-password-icon-padding-right: 8px;
45
- --hybrid-input-local-number-icons-separator-color: #e0e0e0;
46
- --hybrid-input-local-number-icons-separator-padding-bottom: 4px;
47
- --hybrid-input-local-number-icons-separator-padding-left: 5px;
48
- --hybrid-input-local-number-icons-separator-padding-right: 5px;
49
- --hybrid-input-local-copy-icon-padding-right:5px;
50
-
51
- --hybrid-input-local-number-icons-container-width: 70px;
52
- --hybrid-input-local-number-icons-container-padding-left: 5px;
53
- --hybrid-input-local-number-icons-container-padding-right: 5px;
54
- --hybrid-input-local-number-icons-width: 12px;
55
- --hybrid-input-local-number-icons-height: 12px;
56
-
57
- --hybrid-input-local-number-icons-padding-left: 4px;
58
- --hybrid-input-local-number-icons-padding-right: 4px;
59
-
60
- --hybrid-input-local-large-padding-top: 10px;
61
- --hybrid-input-local-large-padding-bottom: 10px;
62
- --hybrid-input-local-large-padding-left: 9px;
63
- --hybrid-input-local-large-padding-right: 4px;
64
-
65
- --hybrid-input-local-medium-padding-top: 7px;
66
- --hybrid-input-local-medium-padding-bottom: 7px;
67
- --hybrid-input-local-medium-padding-left: 9px;
68
- --hybrid-input-local-medium-padding-right: 4px;
69
-
70
- --hybrid-input-local-small-padding-top: 4px;
71
- --hybrid-input-local-small-padding-bottom: 4px;
72
- --hybrid-input-local-small-padding-left: 9px;
73
- --hybrid-input-local-small-padding-right: 4px;
74
-
75
- /* Prefix and Suffix styling variables */
76
- --hybrid-input-local-prefix-color: #525252;
77
- --hybrid-input-local-prefix-font-size: 13px;
78
- --hybrid-input-local-prefix-padding-right: 8px;
79
- --hybrid-input-local-suffix-color: #525252;
80
- --hybrid-input-local-suffix-font-size: 13px;
81
- --hybrid-input-local-suffix-padding-left: 8px;
82
- --hybrid-input-local-disabled-prefix-suffix-color: #c6c6c6;
83
-
84
- /* Addon Before/After styling variables */
85
- --hybrid-input-local-addon-background-color: #e8e8e8;
86
- --hybrid-input-local-addon-color: #525252;
87
- --hybrid-input-local-addon-padding: 8px 12px;
88
-
89
- /* Character count styling variables */
90
- --hybrid-input-local-character-count-font-size: 12px;
91
- --hybrid-input-local-character-count-color: #8c8c8c;
92
- --hybrid-input-local-character-count-margin-top: 4px;
93
- --hybrid-input-local-character-count-over-limit-color: #da1e28;
94
-
95
- /* Validation message styling variables */
96
- --hybrid-input-local-validation-message-font-size: 12px;
97
- --hybrid-input-local-validation-message-margin-top: 4px;
98
- --hybrid-input-local-validation-message-padding: 0;
99
- --hybrid-input-local-validation-message-line-height: 1.4;
100
- --hybrid-input-local-error-message-color: #da1e28;
101
- --hybrid-input-local-warning-message-color: #f0c300;
102
- --hybrid-input-local-error-color: #da1e28;
103
- --hybrid-input-local-warning-color: #f0c300;
104
- --hybrid-input-local-disabled-validation-message-opacity: 0.6;
105
- --hybrid-input-local-disabled-validation-message-color: #c6c6c6;
106
-
107
- /* Input Variant Variables */
108
- /* Outlined variant - full border */
109
- --hybrid-input-local-outlined-border: 1px solid #d0d0d0;
110
- --hybrid-input-local-outlined-border-radius: 6px;
111
- --hybrid-input-local-outlined-focus-border: 2px solid #0f62fe;
112
- --hybrid-input-local-outlined-background: #ffffff;
113
-
114
- /* Filled variant - background with subtle border */
115
- --hybrid-input-local-filled-background: #f4f4f4;
116
- --hybrid-input-local-filled-border-bottom: 2px solid transparent;
117
- --hybrid-input-local-filled-focus-border-bottom: 2px solid #0f62fe;
118
- --hybrid-input-local-filled-border-radius: 6px 6px 0 0;
119
-
120
- /* Borderless variant - no borders */
121
- --hybrid-input-local-borderless-background: transparent;
122
- --hybrid-input-local-borderless-focus-outline: 2px solid #0f62fe;
123
- --hybrid-input-local-borderless-border-radius: 6px;
124
-
125
- /* Underlined variant - bottom border only (current default) */
126
- --hybrid-input-local-underlined-border-bottom: 2px solid #a8a8a8;
127
- --hybrid-input-local-underlined-focus-border-bottom: 2px solid #0f62fe;
128
- }
129
-
130
- /*
131
- * These override the light theme defaults when data-theme="dark" is applied
132
- * This provides explicit theme control via JavaScript or HTML attributes
133
- */
134
- .input-wrapper[data-theme="dark"] {
135
- --hybrid-input-local-background-color: #393939;
136
- --hybrid-input-local-focus-border: 2px solid #ffffff;
137
- --hybrid-input-local-text-color: #ffffff;
138
- --hybrid-input-local-error-border: 2px solid #fa4d56;
139
- --hybrid-input-local-error-helper-text-color: #ffb3b8;
140
- --hybrid-input-local-disabled-background-color: #393939;
141
- --hybrid-input-local-disabled-placeholder-color: #6f6f6f;
142
- --hybrid-input-local-disabled-helper-text-color: #6f6f6f;
143
- --hybrid-input-local-disabled-label-color: #6f6f6f;
144
- --hybrid-input-local-warning-icon-color: #f0c300;
145
- --hybrid-input-local-error-icon-color: #da1e28;
146
- --hybrid-input-local-password-icon-color: #ffffff;
147
- --hybrid-input-local-number-icons-color: #ffffff;
148
- --hybrid-input-local-label-color: #c6c6c6;
149
- --hybrid-input-local-helper-text-color: #c6c6c6;
150
- --hybrid-input-local-number-icons-separator-color: #525252;
151
- --hybrid-input-local-calendar-icon-color: #ffffff;
152
- --hybrid-input-local-copy-icon-color: #ffffff;
153
- --hybrid-input-local-clear-icon-color: #ffffff;
154
-
155
- /* Dark theme prefix and suffix colors */
156
- --hybrid-input-local-prefix-color: #c6c6c6;
157
- --hybrid-input-local-suffix-color: #c6c6c6;
158
- --hybrid-input-local-disabled-prefix-suffix-color: #6f6f6f;
159
-
160
- /* Dark theme addon colors */
161
- --hybrid-input-local-addon-background-color: #525252;
162
- --hybrid-input-local-addon-color: #c6c6c6;
163
-
164
- /* Dark theme character count colors */
165
- --hybrid-input-local-character-count-color: #8c8c8c;
166
- --hybrid-input-local-character-count-over-limit-color: #fa4d56;
167
-
168
- /* Dark theme validation message colors */
169
- --hybrid-input-local-error-message-color: #ffb3b8;
170
- --hybrid-input-local-warning-message-color: #f0c300;
171
- --hybrid-input-local-error-color: #fa4d56;
172
- --hybrid-input-local-warning-color: #f0c300;
173
- --hybrid-input-local-disabled-validation-message-color: #6f6f6f;
174
-
175
- /* Dark theme input variant variables */
176
- /* Outlined variant - dark theme */
177
- --hybrid-input-local-outlined-border: 1px solid #525252;
178
- --hybrid-input-local-outlined-focus-border: 2px solid #ffffff;
179
- --hybrid-input-local-outlined-background: #393939;
180
-
181
- /* Filled variant - dark theme */
182
- --hybrid-input-local-filled-background: #525252;
183
- --hybrid-input-local-filled-focus-border-bottom: 2px solid #ffffff;
184
-
185
- /* Borderless variant - dark theme */
186
- --hybrid-input-local-borderless-background: transparent;
187
- --hybrid-input-local-borderless-focus-outline: 2px solid #ffffff;
188
-
189
- /* Underlined variant - dark theme */
190
- --hybrid-input-local-underlined-focus-border-bottom: 2px solid #ffffff;
191
- }
192
- `;
193
- //# sourceMappingURL=input.style.variable.js.map
package/input.style.variable.js.map DELETED
@@ -1 +0,0 @@
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"]}