@nuralyui/timepicker 0.1.4 → 0.1.5

package/bundle.js

@@ -1,20 +1,914 @@
-import{css as t,html as r,nothing as i,LitElement as e}from"lit";import{property as a,state as n,customElement as o}from"lit/decorators.js";import{classMap as s}from"lit/directives/class-map.js";import{NuralyUIBaseMixin as l}from"@nuralyui/common/mixins";import{ifDefined as c}from"lit/directives/if-defined.js";import{SharedDropdownController as u}from"@nuralyui/common/controllers";const d=[t`:host{display:flex;flex-direction:column;font-family:var(--nuraly-font-family-input, 'IBM Plex Sans', ui-sans-serif, system-ui)}.input-wrapper{background-color:var(--nuraly-color-input-background,var(--nuraly-color-input-background-fallback,#fff))}#input-container>input{background-color:transparent;border:var(--nuraly-input-border,none);outline:var(--nuraly-input-outline,none);flex:1;min-width:0;width:100%;font-family:var(--nuraly-font-family-input, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto);font-size:var(--nuraly-font-size-input,14px);color:var(--nuraly-color-input-text,var(--nuraly-color-input-text-fallback,rgba(0,0,0,.88)));padding:var(--nuraly-spacing-input-medium-vertical,4px) var(--nuraly-spacing-input-medium-horizontal,11px)}:host([disabled]) .input-wrapper{background-color:var(--nuraly-color-input-disabled-background,var(--nuraly-color-input-disabled-background-fallback,#f4f4f4))}:host([disabled]) #input-container>input{background-color:transparent;cursor:var(--nuraly-cursor-disabled,not-allowed);color:var(--nuraly-color-input-disabled-text,var(--nuraly-color-input-disabled-text-fallback,rgba(0,0,0,.25)))}nr-icon{display:flex;align-items:center;--nuraly-color-icon:var(--nuraly-color-input-icon, var(--nuraly-color-icon, var(--nuraly-color-icon-fallback, #161616)));--nuraly-icon-size:var(--nuraly-size-input-icon, var(--nuraly-icon-size, var(--nuraly-icon-size-fallback, 18px)));--nuraly-color-icon-hover:var(--nuraly-color-input-icon-hover, var(--nuraly-color-icon-hover, var(--nuraly-color-icon-hover-fallback, #0f62fe)));--nuraly-color-icon-active:var(--nuraly-color-input-icon-active, var(--nuraly-color-icon-active, var(--nuraly-color-icon-active-fallback, #054ada)));--nuraly-color-icon-disabled:var(--nuraly-color-input-icon-disabled, var(--nuraly-color-icon-disabled, var(--nuraly-color-icon-disabled-fallback, #c6c6c6)))}::placeholder{color:var(--nuraly-color-input-placeholder,var(--nuraly-color-input-placeholder-fallback,#a8a8a8));font-size:var(--nuraly-font-size-input-placeholder,14px);font-family:var(--nuraly-font-family-input, 'IBM Plex Sans', ui-sans-serif, system-ui)}:host([disabled]) ::placeholder{color:var(--nuraly-color-input-disabled-placeholder,var(--nuraly-color-input-disabled-placeholder-fallback,#c6c6c6))}#warning-icon{--nuraly-color-icon:var(--nuraly-color-input-warning-icon, #f1c21b)}#error-icon{--nuraly-color-icon:var(--nuraly-color-input-error-icon, #da1e28)}#calendar-icon{--nuraly-color-icon:var(--nuraly-color-input-calendar-icon, #161616)}#password-icon{padding-left:var(--nuraly-input-password-icon-padding-left,var(--nuraly-password-icon-padding-left,8px));padding-right:var(--nuraly-input-password-icon-padding-right,var(--nuraly-password-icon-padding-right,8px));cursor:var(--nuraly-cursor-interactive,pointer);--nuraly-color-icon:var(--nuraly-color-input-password-icon, #161616)}#copy-icon{padding-right:var(--nuraly-input-copy-icon-padding-right,var(--nuraly-copy-icon-padding-right,8px));--nuraly-color-icon:var(--nuraly-color-input-copy-icon, #161616);cursor:var(--nuraly-cursor-interactive,pointer)}#clear-icon{padding-right:var(--nuraly-input-clear-icon-padding-right,var(--nuraly-clear-icon-padding-right,8px));--nuraly-color-icon:var(--nuraly-color-input-clear-icon, #161616);cursor:var(--nuraly-cursor-interactive,pointer)}#number-icons{display:flex;justify-content:space-between;align-items:center;cursor:var(--nuraly-cursor-interactive,pointer);position:absolute;right:0;top:0;height:100%;width:var(--nuraly-input-number-icons-container-width,var(--nuraly-number-icons-container-width,50px));padding-right:var(--nuraly-input-number-icons-container-padding-right,var(--nuraly-number-icons-container-padding-right,8px))}#number-icons nr-icon{--nuraly-color-icon:var(--nuraly-color-input-number-icons, #161616);padding-left:var(--nuraly-input-number-icons-padding-left,var(--nuraly-number-icons-padding-left,4px));padding-right:var(--nuraly-input-number-icons-padding-right,var(--nuraly-number-icons-padding-right,4px));width:var(--nuraly-input-number-icons-width,var(--nuraly-number-icons-width,24px));height:var(--nuraly-input-number-icons-height,var(--nuraly-number-icons-height,24px))}#icons-separator{color:var(--nuraly-input-number-icons-separator-color,var(--nuraly-number-icons-separator-color));padding-bottom:var(--nuraly-input-number-icons-separator-padding-bottom,var(--nuraly-number-icons-separator-padding-bottom));padding-left:var(--nuraly-input-number-icons-separator-padding-left,var(--nuraly-number-icons-separator-padding-left));padding-right:var(--nuraly-input-number-icons-separator-padding-right,var(--nuraly-number-icons-separator-padding-right))}:host([disabled]) #calendar-icon,:host([disabled]) #clear-icon,:host([disabled]) #copy-icon,:host([disabled]) #error-icon,:host([disabled]) #number-icons,:host([disabled]) #password-icon,:host([disabled]) #warning-icon{opacity:var(--nuraly-input-disabled-icon-opacity,var(--nuraly-disabled-icon-opacity))}:host([disabled]) #clear-icon,:host([disabled]) #copy-icon,:host([disabled]) #number-icons,:host([disabled]) #password-icon{cursor:not-allowed}.input-wrapper{display:flex;align-items:stretch;width:100%}.input-addon-before{background-color:var(--nuraly-input-addon-background-color,var(--nuraly-addon-background-color));border:var(--nuraly-input-border,var(--nuraly-border));border-right:none;border-top-left-radius:var(--nuraly-input-border-radius,var(--nuraly-border-radius));border-bottom-left-radius:var(--nuraly-input-border-radius,var(--nuraly-border-radius));padding:var(--nuraly-input-addon-padding,var(--nuraly-addon-padding));display:flex;align-items:center;color:var(--nuraly-input-addon-color,var(--nuraly-addon-color));font-size:var(--nuraly-input-font-size,var(--nuraly-font-size));white-space:nowrap;min-width:0;flex-shrink:0}.input-addon-after{background-color:var(--nuraly-input-addon-background-color,var(--nuraly-addon-background-color));border:var(--nuraly-input-border,var(--nuraly-border));border-left:none;border-top-right-radius:var(--nuraly-input-border-radius,var(--nuraly-border-radius));border-bottom-right-radius:var(--nuraly-input-border-radius,var(--nuraly-border-radius));padding:var(--nuraly-input-addon-padding,var(--nuraly-addon-padding));display:flex;align-items:center;color:var(--nuraly-input-addon-color,var(--nuraly-addon-color));font-size:var(--nuraly-input-font-size,var(--nuraly-font-size));white-space:nowrap;min-width:0;flex-shrink:0}.input-wrapper:has(.input-addon-before) #input-container{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.input-wrapper:has(.input-addon-after) #input-container{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}#input-container{border:var(--nuraly-border-width-input,1px) solid var(--nuraly-color-input-border,#d9d9d9);border-radius:var(--nuraly-border-radius-input,6px);background-color:var(--nuraly-color-input-background,#fff);color:var(--nuraly-color-input-text,rgba(0,0,0,.88));font-family:var(--nuraly-font-family-input, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto);font-size:var(--nuraly-font-size-input,14px);display:flex;position:relative;flex:1;min-width:0;transition:var(--nuraly-transition-input,border-color .2s,box-shadow .2s)}.input-wrapper[data-theme^=carbon] #input-container,[data-theme^=carbon] nr-input #input-container,body[data-theme^=carbon] nr-input #input-container,html[data-theme^=carbon] nr-input #input-container{border:var(--nuraly-border-width-input,1px) solid var(--nuraly-color-input-border,transparent)!important;border-bottom:var(--nuraly-border-width-input,2px) solid var(--nuraly-color-input-border-bottom,#8d8d8d)!important;border-radius:var(--nuraly-border-radius-input,0)!important;background-color:var(--nuraly-color-input-background,#f4f4f4)!important;color:var(--nuraly-color-input-text,#161616)!important}.input-wrapper[data-theme^=default] #input-container,[data-theme^=default] nr-input #input-container,body[data-theme^=default] nr-input #input-container,html[data-theme^=default] nr-input #input-container{border:var(--nuraly-border-width-input,1px) solid var(--nuraly-color-input-border,#d9d9d9)!important;border-radius:var(--nuraly-border-radius-input,6px)!important;background-color:var(--nuraly-color-input-background,#fff)!important;color:var(--nuraly-color-input-text,rgba(0,0,0,.88))!important}.input-wrapper[data-theme^=carbon] #input-container>input,[data-theme^=carbon] nr-input #input-container>input,body[data-theme^=carbon] nr-input #input-container>input,html[data-theme^=carbon] nr-input #input-container>input{padding:7px 16px!important}.input-wrapper[data-theme^=default] #input-container>input,[data-theme^=default] nr-input #input-container>input,body[data-theme^=default] nr-input #input-container>input,html[data-theme^=default] nr-input #input-container>input{padding:var(--nuraly-spacing-input-medium-vertical,4px) var(--nuraly-spacing-input-medium-horizontal,11px)!important}#input-container:focus-within{border-color:var(--nuraly-color-input-border-focus,#1890ff);box-shadow:var(--nuraly-shadow-input-focus,0 0 0 2px rgba(24,144,255,.2));outline:0}.input-wrapper[data-theme^=carbon] #input-container:focus-within,[data-theme^=carbon] nr-input #input-container:focus-within,body[data-theme^=carbon] nr-input #input-container:focus-within,html[data-theme^=carbon] nr-input #input-container:focus-within{border:var(--nuraly-border-width-input,2px) solid var(--nuraly-color-input-border-focus,#0f62fe)!important;border-radius:var(--nuraly-border-radius-input,0)!important;box-shadow:var(--nuraly-shadow-input-focus,none)!important;outline:0!important}.input-wrapper[data-theme^=default] #input-container:focus-within,[data-theme^=default] nr-input #input-container:focus-within,body[data-theme^=default] nr-input #input-container:focus-within,html[data-theme^=default] nr-input #input-container:focus-within{border-color:var(--nuraly-color-input-border-focus,#1890ff)!important;border-radius:var(--nuraly-border-radius-input,6px)!important;box-shadow:var(--nuraly-shadow-input-focus,0 0 0 2px rgba(24,144,255,.2))!important;outline:0!important}:host([disabled]) #input-container{background-color:var(--nuraly-color-input-disabled-background,#f5f5f5);border-color:var(--nuraly-color-input-disabled-border,#d9d9d9);color:var(--nuraly-color-input-disabled-text,rgba(0,0,0,.25));cursor:not-allowed}:host([variant=outlined]) #input-container{border:var(--nuraly-input-outlined-border,var(--nuraly-outlined-border));border-radius:var(--nuraly-input-outlined-border-radius,var(--nuraly-outlined-border-radius));background-color:var(--nuraly-input-outlined-background,var(--nuraly-outlined-background))}:host([variant=outlined]) .input-wrapper{background-color:transparent}:host([variant=outlined]:not([state=error])) #input-container:focus-within{border:var(--nuraly-input-outlined-focus-border,var(--nuraly-outlined-focus-border))}:host([variant=filled]) #input-container{background-color:var(--nuraly-input-filled-background,var(--nuraly-filled-background));border-radius:var(--nuraly-input-filled-border-radius,var(--nuraly-filled-border-radius));border-bottom:var(--nuraly-input-filled-border-bottom,var(--nuraly-filled-border-bottom));border-top:none;border-left:none;border-right:none}:host([variant=filled]) .input-wrapper{background-color:transparent}:host([variant=filled]:not([state=error])) #input-container:focus-within{border-bottom:var(--nuraly-input-filled-focus-border-bottom,var(--nuraly-filled-focus-border-bottom));border-top:none;border-left:none;border-right:none}:host([variant=borderless]) #input-container{background-color:var(--nuraly-input-borderless-background,var(--nuraly-borderless-background));border:none;border-radius:var(--nuraly-input-borderless-border-radius,var(--nuraly-borderless-border-radius))}:host([variant=borderless]) .input-wrapper{background-color:transparent}:host([variant=borderless]:not([state=error])) #input-container:focus-within{outline:var(--nuraly-input-borderless-focus-outline,var(--nuraly-borderless-focus-outline));border:none}:host([variant=underlined]) #input-container{border-bottom:var(--nuraly-input-underlined-border-bottom,var(--nuraly-underlined-border-bottom));border-top:none;border-left:none;border-right:none;border-radius:0}:host([variant=underlined]:not([state=error])) #input-container:focus-within{border-bottom:var(--nuraly-input-underlined-focus-border-bottom,var(--nuraly-underlined-focus-border-bottom));border-top:none;border-left:none;border-right:none}input{width:100%;border:none;outline:0;color:var(--nuraly-input-text-color,var(--nuraly-text-color));font-family:var(--nuraly-input-font-family,var(--nuraly-font-family));font-size:var(--nuraly-input-font-size,var(--nuraly-font-size))}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none}input[type=number]{-moz-appearance:textfield}:host(:not([disabled])[state=error]) #input-container{border:var(--nuraly-input-error-border,var(--nuraly-error-border))!important;outline:0!important}:host([variant=borderless][state=error]) #input-container{border:var(--nuraly-input-error-border,var(--nuraly-error-border))!important;outline:0!important}:host([variant=filled][state=error]) #input-container,:host([variant=underlined][state=error]) #input-container{border-top:none!important;border-left:none!important;border-right:none!important;border-bottom:var(--nuraly-input-error-border,var(--nuraly-error-border))!important}:host([state=error]) input[type=number]~#number-icons,:host([state=warning]) input[type=number]~#number-icons{position:static;padding-left:var(--nuraly-input-number-icons-container-padding-left,var(--nuraly-number-icons-container-padding-left))}::slotted([slot=label]){color:var(--nuraly-input-label-color,var(--nuraly-label-color));font-size:var(--nuraly-input-label-font-size,var(--nuraly-label-font-size));padding-bottom:var(--nuraly-input-label-padding-bottom,var(--nuraly-label-padding-bottom))}::slotted([slot=helper-text]){color:var(--nuraly-input-helper-text-color,var(--nuraly-helper-text-color));font-size:var(--nuraly-input-helper-text-font-size,var(--nuraly-helper-text-font-size));padding-top:var(--nuraly-input-helper-text-padding-top,var(--nuraly-helper-text-padding-top));word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;hyphens:auto;white-space:normal;max-width:100%;width:0;min-width:100%;box-sizing:border-box;line-height:1.4}:host([state=error]) ::slotted([slot=helper-text]){color:var(--nuraly-input-error-helper-text-color,var(--nuraly-error-helper-text-color))}:host([state=warning]) ::slotted([slot=helper-text]){color:var(--nuraly-input-warning-helper-text-color,var(--nuraly-warning-helper-text-color))}:host([disabled]) ::slotted([slot=helper-text]){color:var(--nuraly-input-disabled-helper-text-color,var(--nuraly-disabled-helper-text-color))}:host([disabled]) ::slotted([slot=label]){color:var(--nuraly-input-disabled-label-color,var(--nuraly-disabled-label-color))}.input-prefix{display:flex;align-items:center;justify-content:center}::slotted([slot=prefix]){display:flex;align-items:center;padding-right:var(--nuraly-input-prefix-padding-right,var(--nuraly-prefix-padding-right));color:var(--nuraly-input-prefix-color,var(--nuraly-prefix-color));font-size:var(--nuraly-input-prefix-font-size,var(--nuraly-prefix-font-size));flex-shrink:0}.input-suffix{display:flex;align-items:center;justify-content:center}::slotted([slot=suffix]){display:flex;align-items:center;padding-left:var(--nuraly-input-suffix-padding-left,var(--nuraly-suffix-padding-left));color:var(--nuraly-input-suffix-color,var(--nuraly-suffix-color));font-size:var(--nuraly-input-suffix-font-size,var(--nuraly-suffix-font-size));flex-shrink:0}:host([disabled]) ::slotted([slot=prefix]),:host([disabled]) ::slotted([slot=suffix]){opacity:var(--nuraly-input-disabled-icon-opacity,var(--nuraly-disabled-icon-opacity));color:var(--nuraly-input-disabled-prefix-suffix-color,var(--nuraly-disabled-prefix-suffix-color))}`,t`div[data-size=large]{padding-top:var(--nuraly-input-large-padding-top,var(--nuraly-large-padding-top));padding-bottom:var(--nuraly-input-large-padding-bottom,var(--nuraly-large-padding-bottom));padding-left:var(--nuraly-input-large-padding-left,var(--nuraly-large-padding-left));padding-right:var(--nuraly-input-large-padding-right,var(--nuraly-large-padding-right))}div[data-size=medium]{padding-top:var(--nuraly-input-medium-padding-top,var(--nuraly-medium-padding-top));padding-bottom:var(--nuraly-input-medium-padding-bottom,var(--nuraly-medium-padding-bottom));padding-left:var(--nuraly-input-medium-padding-left,var(--nuraly-medium-padding-left));padding-right:var(--nuraly-input-medium-padding-right,var(--nuraly-medium-padding-right))}div[data-size=small]{padding-top:var(--nuraly-input-small-padding-top,var(--nuraly-small-padding-top));padding-bottom:var(--nuraly-input-small-padding-bottom,var(--nuraly-small-padding-bottom));padding-left:var(--nuraly-input-small-padding-left,var(--nuraly-small-padding-left));padding-right:var(--nuraly-input-small-padding-right,var(--nuraly-small-padding-right))}[data-theme^=carbon] div[data-size=medium],body[data-theme^=carbon] nr-input div[data-size=medium],html[data-theme^=carbon] nr-input div[data-size=medium]{padding:4px 8px!important}.character-count{font-size:var(--nuraly-input-character-count-font-size,var(--nuraly-character-count-font-size));color:var(--nuraly-input-character-count-color,var(--nuraly-character-count-color));text-align:right;margin-top:var(--nuraly-input-character-count-margin-top,var(--nuraly-character-count-margin-top));font-family:var(--nuraly-input-font-family,var(--nuraly-font-family))}.character-count[data-over-limit]{color:var(--nuraly-input-character-count-over-limit-color,var(--nuraly-character-count-over-limit-color))}.validation-message{font-size:var(--nuraly-input-validation-message-font-size,var(--nuraly-validation-message-font-size,.875rem));font-family:var(--nuraly-input-font-family,var(--nuraly-font-family));margin-top:var(--nuraly-input-validation-message-margin-top,var(--nuraly-validation-message-margin-top,.25rem));padding:var(--nuraly-input-validation-message-padding,var(--nuraly-validation-message-padding,0));word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;hyphens:auto;white-space:normal;max-width:100%;width:0;min-width:100%;box-sizing:border-box;line-height:var(--nuraly-input-validation-message-line-height,var(--nuraly-validation-message-line-height,1.4))}.validation-message.error{color:var(--nuraly-input-error-message-color,var(--nuraly-error-message-color,var(--nuraly-input-error-color,var(--nuraly-error-color,#dc2626))))}.validation-message.warning{color:var(--nuraly-input-warning-message-color,var(--nuraly-warning-message-color,var(--nuraly-input-warning-color,var(--nuraly-warning-color,#d97706))))}:host([disabled]) .validation-message{opacity:var(--nuraly-input-disabled-validation-message-opacity,var(--nuraly-disabled-validation-message-opacity,.6));color:var(--nuraly-input-disabled-validation-message-color,var(--nuraly-disabled-validation-message-color))}.validation-icon{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center}.validation-icon.validation-loading{color:var(--nuraly-input-primary-color,var(--nuraly-primary-color,#3b82f6));animation:validation-hourglass 2s ease-in-out infinite;transform-origin:center}.validation-icon.validation-error{color:var(--nuraly-input-error-color,var(--nuraly-error-color,#dc2626))}.validation-icon.validation-warning{color:var(--nuraly-input-warning-color,var(--nuraly-warning-color,#d97706))}.validation-icon.validation-success{color:var(--nuraly-input-success-color,var(--nuraly-success-color,#16a34a))}@keyframes validation-hourglass{0%{opacity:.7;transform:scale(1)}25%{opacity:1;transform:scale(1.03)}50%{opacity:.8;transform:scale(1)}75%{opacity:1;transform:scale(1.03)}100%{opacity:.7;transform:scale(1)}}`],p={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})$/},h=t=>({required:!0,message:t||"This field is required"}),m=t=>({type:"email",pattern:p.EMAIL,message:t||"Please enter a valid email address"}),v=t=>({type:"url",pattern:p.URL,message:t||"Please enter a valid URL"}),b=(t,r)=>({maxLength:t,message:r||`Maximum length is ${t} characters`}),y=(t,r)=>({type:"number",min:t,message:r||`Minimum value is ${t}`}),g=(t,r)=>({type:"number",max:t,message:r||`Maximum value is ${t}`});
+import{css as t,html as r,nothing as e,LitElement as i}from"lit";import{property as o,state as n,customElement as a}from"lit/decorators.js";import{classMap as s}from"lit/directives/class-map.js";import{NuralyUIBaseMixin as l}from"@nuralyui/common/mixins";import{ifDefined as c}from"lit/directives/if-defined.js";import{SharedDropdownController as u}from"@nuralyui/common/controllers";const d=[t`
+  /* 
+   * Host element base styles
+   * Container for the input component with flexible layout
+   */
+  :host {
+    display: flex;
+    flex-direction: column;
+    font-family: var(--nuraly-font-family-input, 'IBM Plex Sans', ui-sans-serif, system-ui);
+  }
+
+  /* 
+   * Base input wrapper and input element styles
+   * Background applied to wrapper to cover entire container including addons
+   * Uses theme CSS custom properties for comprehensive theming support
+   */
+  .input-wrapper {
+    background-color: var(--nuraly-color-input-background, var(--nuraly-color-input-background-fallback, #ffffff));
+  }
+
+
+  #input-container > input {
+    background-color: transparent;
+    border: var(--nuraly-input-border, none);
+    outline: var(--nuraly-input-outline, none);
+    flex: 1;
+    min-width: 0;
+    width: 100%;
+    
+    /* Typography from theme */
+    font-family: var(--nuraly-font-family-input, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto);
+    font-size: var(--nuraly-font-size-input, 14px);
+    color: var(--nuraly-color-input-text, var(--nuraly-color-input-text-fallback, rgba(0, 0, 0, 0.88)));
+    
+    /* Padding from theme */
+    padding: var(--nuraly-spacing-input-medium-vertical, 4px) var(--nuraly-spacing-input-medium-horizontal, 11px);
+  }
+
+  /* 
+   * Disabled state styles for wrapper and input
+   * Applied when input is disabled - removes interactivity and applies muted colors
+   */
+  :host([disabled]) .input-wrapper {
+    background-color: var(--nuraly-color-input-disabled-background, var(--nuraly-color-input-disabled-background-fallback, #f4f4f4));
+  }
+
+  :host([disabled]) #input-container > input {
+    background-color: transparent;
+    cursor: var(--nuraly-cursor-disabled, not-allowed);
+    color: var(--nuraly-color-input-disabled-text, var(--nuraly-color-input-disabled-text-fallback, rgba(0, 0, 0, 0.25)));
+  }
+
+  /* 
+   * Icon base styles
+   * Common styling for all icons within the input component
+   * Provides comprehensive CSS variable override system
+   */
+  nr-icon {
+    display: flex;
+    align-items: center;
+    
+    /* Global icon color override - applies to all icons in input */
+    --nuraly-color-icon: var(--nuraly-color-input-icon, var(--nuraly-color-icon, var(--nuraly-color-icon-fallback, #161616)));
+    
+    /* Size override for input icons */
+    --nuraly-icon-size: var(--nuraly-size-input-icon, var(--nuraly-icon-size, var(--nuraly-icon-size-fallback, 18px)));
+    
+    /* Interactive state overrides */
+    --nuraly-color-icon-hover: var(--nuraly-color-input-icon-hover, var(--nuraly-color-icon-hover, var(--nuraly-color-icon-hover-fallback, #0f62fe)));
+    --nuraly-color-icon-active: var(--nuraly-color-input-icon-active, var(--nuraly-color-icon-active, var(--nuraly-color-icon-active-fallback, #054ada)));
+    --nuraly-color-icon-disabled: var(--nuraly-color-input-icon-disabled, var(--nuraly-color-icon-disabled, var(--nuraly-color-icon-disabled-fallback, #c6c6c6)));
+  }
+
+  /* 
+   * Placeholder styling
+   * Customizable placeholder text appearance
+   */
+  ::placeholder {
+    color: var(--nuraly-color-input-placeholder, var(--nuraly-color-input-placeholder-fallback, #a8a8a8));
+    font-size: var(--nuraly-font-size-input-placeholder, 14px);
+    font-family: var(--nuraly-font-family-input, 'IBM Plex Sans', ui-sans-serif, system-ui);
+  }
+
+  /* 
+   * Disabled placeholder styling
+   * Applied when input is disabled
+   */
+  :host([disabled]) ::placeholder {
+    color: var(--nuraly-color-input-disabled-placeholder, var(--nuraly-color-input-disabled-placeholder-fallback, #c6c6c6));
+  }
+
+  /* ========================================
+   * ICON VARIANTS AND STATES
+   * ======================================== */
+
+  /* Warning state icon */
+  #warning-icon {
+    --nuraly-color-icon: var(--nuraly-color-input-warning-icon, #f1c21b);
+  }
+
+  /* Error state icon */
+  #error-icon {
+    --nuraly-color-icon: var(--nuraly-color-input-error-icon, #da1e28);
+  }
+
+  /* Calendar input type icon */
+  #calendar-icon {
+    --nuraly-color-icon: var(--nuraly-color-input-calendar-icon, #161616);
+  }
+
+  /* Password toggle icon */
+  #password-icon {
+    padding-left: var(--nuraly-input-password-icon-padding-left, var(--nuraly-password-icon-padding-left, 8px));
+    padding-right: var(--nuraly-input-password-icon-padding-right, var(--nuraly-password-icon-padding-right, 8px));
+    cursor: var(--nuraly-cursor-interactive, pointer);
+    --nuraly-color-icon: var(--nuraly-color-input-password-icon, #161616);
+  }
+
+  /* Copy functionality icon */
+  #copy-icon {
+    padding-right: var(--nuraly-input-copy-icon-padding-right, var(--nuraly-copy-icon-padding-right, 8px));
+    --nuraly-color-icon: var(--nuraly-color-input-copy-icon, #161616);
+    cursor: var(--nuraly-cursor-interactive, pointer);
+  }
+
+  /* Clear functionality icon */
+  #clear-icon {
+    padding-right: var(--nuraly-input-clear-icon-padding-right, var(--nuraly-clear-icon-padding-right, 8px));
+    --nuraly-color-icon: var(--nuraly-color-input-clear-icon, #161616);
+    cursor: var(--nuraly-cursor-interactive, pointer);
+  }
+
+  /* 
+   * Number input increment/decrement icons container
+   * Positioned absolutely for overlay on input
+   */
+  #number-icons {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: var(--nuraly-cursor-interactive, pointer);
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    width: var(--nuraly-input-number-icons-container-width, var(--nuraly-number-icons-container-width, 50px));
+    padding-right: var(--nuraly-input-number-icons-container-padding-right, var(--nuraly-number-icons-container-padding-right, 8px));
+  }
+
+  /* Individual number icons styling */
+  #number-icons nr-icon {
+    --nuraly-color-icon: var(--nuraly-color-input-number-icons, #161616);
+    padding-left: var(--nuraly-input-number-icons-padding-left, var(--nuraly-number-icons-padding-left, 4px));
+    padding-right: var(--nuraly-input-number-icons-padding-right, var(--nuraly-number-icons-padding-right, 4px));
+    width: var(--nuraly-input-number-icons-width, var(--nuraly-number-icons-width, 24px));
+    height: var(--nuraly-input-number-icons-height, var(--nuraly-number-icons-height, 24px));
+  }
+
+  /* Number icons separator styling */
+  #icons-separator {
+    color: var(--nuraly-input-number-icons-separator-color, var(--nuraly-number-icons-separator-color));
+    padding-bottom: var(--nuraly-input-number-icons-separator-padding-bottom, var(--nuraly-number-icons-separator-padding-bottom));
+    padding-left: var(--nuraly-input-number-icons-separator-padding-left, var(--nuraly-number-icons-separator-padding-left));
+    padding-right: var(--nuraly-input-number-icons-separator-padding-right, var(--nuraly-number-icons-separator-padding-right));
+  }
+
+  /* 
+   * Disabled state for all icons
+   * Applied when input is disabled - reduces opacity and disables interaction
+   */
+  :host([disabled]) #password-icon,
+  :host([disabled]) #error-icon,
+  :host([disabled]) #warning-icon,
+  :host([disabled]) #number-icons,
+  :host([disabled]) #calendar-icon,
+  :host([disabled]) #copy-icon,
+  :host([disabled]) #clear-icon {
+    opacity: var(--nuraly-input-disabled-icon-opacity, var(--nuraly-disabled-icon-opacity));
+  }
+
+  /* Disabled icons cursor override */
+  :host([disabled]) #password-icon,
+  :host([disabled]) #number-icons,
+  :host([disabled]) #copy-icon,
+  :host([disabled]) #clear-icon {
+    cursor: not-allowed;
+  }
+
+  /* ========================================
+   * INPUT CONTAINER STYLES
+   * ======================================== */
+
+  /* 
+   * Input wrapper - contains addons and input container
+   * Provides horizontal layout for addon before/after elements
+   */
+  .input-wrapper {
+    display: flex;
+    align-items: stretch;
+    width: 100%;
+  }
+
+  /* 
+   * Addon before element - content before input (outside borders)
+   * Styled to visually connect with input
+   */
+  .input-addon-before {
+    background-color: var(--nuraly-input-addon-background-color, var(--nuraly-addon-background-color));
+    border: var(--nuraly-input-border, var(--nuraly-border));
+    border-right: none;
+    border-top-left-radius: var(--nuraly-input-border-radius, var(--nuraly-border-radius));
+    border-bottom-left-radius: var(--nuraly-input-border-radius, var(--nuraly-border-radius));
+    padding: var(--nuraly-input-addon-padding, var(--nuraly-addon-padding));
+    display: flex;
+    align-items: center;
+    color: var(--nuraly-input-addon-color, var(--nuraly-addon-color));
+    font-size: var(--nuraly-input-font-size, var(--nuraly-font-size));
+    white-space: nowrap;
+    min-width: 0; /* Allow shrinking */
+    flex-shrink: 0; /* Prevent shrinking */
+  }
+
+  /* 
+   * Addon after element - content after input (outside borders)
+   * Styled to visually connect with input
+   */
+  .input-addon-after {
+    background-color: var(--nuraly-input-addon-background-color, var(--nuraly-addon-background-color));
+    border: var(--nuraly-input-border, var(--nuraly-border));
+    border-left: none;
+    border-top-right-radius: var(--nuraly-input-border-radius, var(--nuraly-border-radius));
+    border-bottom-right-radius: var(--nuraly-input-border-radius, var(--nuraly-border-radius));
+    padding: var(--nuraly-input-addon-padding, var(--nuraly-addon-padding));
+    display: flex;
+    align-items: center;
+    color: var(--nuraly-input-addon-color, var(--nuraly-addon-color));
+    font-size: var(--nuraly-input-font-size, var(--nuraly-font-size));
+    white-space: nowrap;
+    min-width: 0; /* Allow shrinking */
+    flex-shrink: 0; /* Prevent shrinking */
+  }
+
+  /* 
+   * Input container border radius adjustments when addons are present
+   * Removes border radius on sides where addons are attached
+   */
+  .input-wrapper:has(.input-addon-before) #input-container {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-left: none;
+  }
+
+  .input-wrapper:has(.input-addon-after) #input-container {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-right: none;
+  }
+
+  /* 
+   * Main input container element
+   * Uses theme CSS custom properties for comprehensive border and layout control
+   */
+  #input-container {
+    /* Default outlined style */
+    border: var(--nuraly-border-width-input, 1px) solid var(--nuraly-color-input-border, #d9d9d9);
+    border-radius: var(--nuraly-border-radius-input, 6px);
+    
+    /* Background and text styling */
+    background-color: var(--nuraly-color-input-background, #ffffff);
+    color: var(--nuraly-color-input-text, rgba(0, 0, 0, 0.88));
+    font-family: var(--nuraly-font-family-input, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto);
+    font-size: var(--nuraly-font-size-input, 14px);
+    
+    /* Layout */
+    display: flex;
+    position: relative;
+    flex: 1; /* Take available space in wrapper */
+    min-width: 0; /* Allow shrinking below content size */
+    
+    /* Transitions for smooth theme changes */
+    transition: var(--nuraly-transition-input, border-color 0.2s, box-shadow 0.2s);
+  }
+
+  /* Carbon Design System override - Carbon specific styles */
+  html[data-theme^="carbon"] nr-input #input-container,
+  body[data-theme^="carbon"] nr-input #input-container,
+  [data-theme^="carbon"] nr-input #input-container,
+  .input-wrapper[data-theme^="carbon"] #input-container {
+    border: var(--nuraly-border-width-input, 1px) solid var(--nuraly-color-input-border, transparent) !important;
+    border-bottom: var(--nuraly-border-width-input, 2px) solid var(--nuraly-color-input-border-bottom, #8d8d8d) !important;
+    border-radius: var(--nuraly-border-radius-input, 0) !important;
+    background-color: var(--nuraly-color-input-background, #f4f4f4) !important;
+    color: var(--nuraly-color-input-text, #161616) !important;
+  }
+
+  /* Default theme override - Default specific styles */
+  html[data-theme^="default"] nr-input #input-container,
+  body[data-theme^="default"] nr-input #input-container,
+  [data-theme^="default"] nr-input #input-container,
+  .input-wrapper[data-theme^="default"] #input-container {
+    border: var(--nuraly-border-width-input, 1px) solid var(--nuraly-color-input-border, #d9d9d9) !important;
+    border-radius: var(--nuraly-border-radius-input, 6px) !important;
+    background-color: var(--nuraly-color-input-background, #ffffff) !important;
+    color: var(--nuraly-color-input-text, rgba(0, 0, 0, 0.88)) !important;
+  }
+
+  /* Carbon input element padding override */
+  html[data-theme^="carbon"] nr-input #input-container > input,
+  body[data-theme^="carbon"] nr-input #input-container > input,
+  [data-theme^="carbon"] nr-input #input-container > input,
+  .input-wrapper[data-theme^="carbon"] #input-container > input {
+    padding: 7px 16px !important;
+  }
+
+  /* Default input element padding override */
+  html[data-theme^="default"] nr-input #input-container > input,
+  body[data-theme^="default"] nr-input #input-container > input,
+  [data-theme^="default"] nr-input #input-container > input,
+  .input-wrapper[data-theme^="default"] #input-container > input {
+    padding: var(--nuraly-spacing-input-medium-vertical, 4px) var(--nuraly-spacing-input-medium-horizontal, 11px) !important;
+  }
+
+  /* Focus state for input container */
+  #input-container:focus-within {
+    border-color: var(--nuraly-color-input-border-focus, #1890ff);
+    box-shadow: var(--nuraly-shadow-input-focus, 0 0 0 2px rgba(24, 144, 255, 0.2));
+    outline: none;
+  }
+
+  /* Carbon focus override */
+  html[data-theme^="carbon"] nr-input #input-container:focus-within,
+  body[data-theme^="carbon"] nr-input #input-container:focus-within,
+  [data-theme^="carbon"] nr-input #input-container:focus-within,
+  .input-wrapper[data-theme^="carbon"] #input-container:focus-within {
+    border: var(--nuraly-border-width-input, 2px) solid var(--nuraly-color-input-border-focus, #0f62fe) !important;
+    border-radius: var(--nuraly-border-radius-input, 0) !important;
+    box-shadow: var(--nuraly-shadow-input-focus, none) !important;
+    outline: none !important;
+  }
+
+  /* Default focus override */
+  html[data-theme^="default"] nr-input #input-container:focus-within,
+  body[data-theme^="default"] nr-input #input-container:focus-within,
+  [data-theme^="default"] nr-input #input-container:focus-within,
+  .input-wrapper[data-theme^="default"] #input-container:focus-within {
+    border-color: var(--nuraly-color-input-border-focus, #1890ff) !important;
+    border-radius: var(--nuraly-border-radius-input, 6px) !important;
+    box-shadow: var(--nuraly-shadow-input-focus, 0 0 0 2px rgba(24, 144, 255, 0.2)) !important;
+    outline: none !important;
+  }
+
+  /* 
+   * Disabled container styles
+   * Applied when input is disabled
+   */
+  :host([disabled]) #input-container {
+    background-color: var(--nuraly-color-input-disabled-background, #f5f5f5);
+    border-color: var(--nuraly-color-input-disabled-border, #d9d9d9);
+    color: var(--nuraly-color-input-disabled-text, rgba(0, 0, 0, 0.25));
+    cursor: not-allowed;
+  }
+
+  /* ========================================
+   * INPUT VARIANT STYLES
+   * ======================================== */
+
+  /* 
+   * Outlined variant - full border around input
+   * Default: light border, focus: blue border
+   */
+  :host([variant='outlined']) #input-container {
+    border: var(--nuraly-input-outlined-border, var(--nuraly-outlined-border));
+    border-radius: var(--nuraly-input-outlined-border-radius, var(--nuraly-outlined-border-radius));
+    background-color: var(--nuraly-input-outlined-background, var(--nuraly-outlined-background));
+  }
+
+  :host([variant='outlined']) .input-wrapper {
+    background-color: transparent;
+  }
+
+  :host([variant='outlined']:not([state='error'])) #input-container:focus-within {
+    border: var(--nuraly-input-outlined-focus-border, var(--nuraly-outlined-focus-border));
+  }
+
+  /* 
+   * Filled variant - background with bottom border only
+   * Subtle background with bottom border indication
+   */
+  :host([variant='filled']) #input-container {
+    background-color: var(--nuraly-input-filled-background, var(--nuraly-filled-background));
+    border-radius: var(--nuraly-input-filled-border-radius, var(--nuraly-filled-border-radius));
+    border-bottom: var(--nuraly-input-filled-border-bottom, var(--nuraly-filled-border-bottom));
+    border-top: none;
+    border-left: none;
+    border-right: none;
+  }
+
+  :host([variant='filled']) .input-wrapper {
+    background-color: transparent;
+  }
+
+  :host([variant='filled']:not([state='error'])) #input-container:focus-within {
+    border-bottom: var(--nuraly-input-filled-focus-border-bottom, var(--nuraly-filled-focus-border-bottom));
+    border-top: none;
+    border-left: none;
+    border-right: none;
+  }
+
+  /* 
+   * Borderless variant - no borders, focus with outline
+   * Clean appearance with focus indication via outline
+   */
+  :host([variant='borderless']) #input-container {
+    background-color: var(--nuraly-input-borderless-background, var(--nuraly-borderless-background));
+    border: none;
+    border-radius: var(--nuraly-input-borderless-border-radius, var(--nuraly-borderless-border-radius));
+  }
+
+  :host([variant='borderless']) .input-wrapper {
+    background-color: transparent;
+  }
+
+  :host([variant='borderless']:not([state='error'])) #input-container:focus-within {
+    outline: var(--nuraly-input-borderless-focus-outline, var(--nuraly-borderless-focus-outline));
+    border: none;
+  }
+
+  /* 
+   * Underlined variant - bottom border only (default/current behavior)
+   * Maintains existing behavior as default
+   */
+  :host([variant='underlined']) #input-container {
+    border-bottom: var(--nuraly-input-underlined-border-bottom, var(--nuraly-underlined-border-bottom));
+    border-top: none;
+    border-left: none;
+    border-right: none;
+    border-radius: 0;
+  }
+
+  :host([variant='underlined']:not([state='error'])) #input-container:focus-within {
+    border-bottom: var(--nuraly-input-underlined-focus-border-bottom, var(--nuraly-underlined-focus-border-bottom));
+    border-top: none;
+    border-left: none;
+    border-right: none;
+  }
+
+  /* ========================================
+   * INPUT ELEMENT STYLES
+   * ======================================== */
+
+  /* 
+   * Base input element styling
+   * Full width with no default borders, using container for styling
+   */
+  input {
+    width: 100%;
+    border: none;
+    outline: none;
+    color: var(--nuraly-input-text-color, var(--nuraly-text-color));
+    font-family: var(--nuraly-input-font-family, var(--nuraly-font-family));
+    font-size: var(--nuraly-input-font-size, var(--nuraly-font-size));
+  }
+
+  /* Remove default number input spinners */
+  /* Chrome, Safari, Edge, Opera */
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+  }
+  
+  /* Firefox */
+  input[type='number'] {
+    -moz-appearance: textfield;
+  }
+
+  /* ========================================
+   * STATE STYLES
+   * ======================================== */
+
+  /* 
+   * Error state styling - works with all variants
+   * Applied when state='error' and not disabled
+   */
+  :host(:not([disabled])[state='error']) #input-container {
+    border: var(--nuraly-input-error-border, var(--nuraly-error-border)) !important;
+    outline: none !important;
+  }
+
+  /* Override variant-specific error state styling */
+  :host([variant='borderless'][state='error']) #input-container {
+    border: var(--nuraly-input-error-border, var(--nuraly-error-border)) !important;
+    outline: none !important;
+  }
+
+  :host([variant='underlined'][state='error']) #input-container,
+  :host([variant='filled'][state='error']) #input-container {
+    border-top: none !important;
+    border-left: none !important;
+    border-right: none !important;
+    border-bottom: var(--nuraly-input-error-border, var(--nuraly-error-border)) !important;
+  }
+
+  /* 
+   * Number input icon positioning adjustments for error/warning states
+   * When validation states are present, adjust icon positioning
+   */
+  :host([state='error']) input[type='number'] ~ #number-icons,
+  :host([state='warning']) input[type='number'] ~ #number-icons {
+    position: static;
+    padding-left: var(--nuraly-input-number-icons-container-padding-left, var(--nuraly-number-icons-container-padding-left));
+  }
+
+  /* ========================================
+   * SLOTTED CONTENT STYLES
+   * ======================================== */
+
+  /* 
+   * Label slot styling
+   * Applied to slotted label elements
+   */
+  ::slotted([slot='label']) {
+    color: var(--nuraly-input-label-color, var(--nuraly-label-color));
+    font-size: var(--nuraly-input-label-font-size, var(--nuraly-label-font-size));
+    padding-bottom: var(--nuraly-input-label-padding-bottom, var(--nuraly-label-padding-bottom));
+  }
+
+  /* 
+   * Helper text slot styling
+   * Applied to slotted helper text elements
+   */
+  ::slotted([slot='helper-text']) {
+    color: var(--nuraly-input-helper-text-color, var(--nuraly-helper-text-color));
+    font-size: var(--nuraly-input-helper-text-font-size, var(--nuraly-helper-text-font-size));
+    padding-top: var(--nuraly-input-helper-text-padding-top, var(--nuraly-helper-text-padding-top));
+    
+    /* Prevent text overflow and ensure proper wrapping without affecting parent width */
+    word-wrap: break-word;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    hyphens: auto;
+    white-space: normal;
+    max-width: 100%;
+    width: 0;
+    min-width: 100%;
+    box-sizing: border-box;
+    line-height: 1.4;
+  }
+
+  /* 
+   * State-specific helper text colors
+   * Override helper text color based on validation state
+   */
+  :host([state='error']) ::slotted([slot='helper-text']) {
+    color: var(--nuraly-input-error-helper-text-color, var(--nuraly-error-helper-text-color));
+  }
+
+  :host([state='warning']) ::slotted([slot='helper-text']) {
+    color: var(--nuraly-input-warning-helper-text-color, var(--nuraly-warning-helper-text-color));
+  }
+
+  /* 
+   * Disabled state for slotted content
+   * Applied when input is disabled
+   */
+  :host([disabled]) ::slotted([slot='helper-text']) {
+    color: var(--nuraly-input-disabled-helper-text-color, var(--nuraly-disabled-helper-text-color));
+  }
+
+  :host([disabled]) ::slotted([slot='label']) {
+    color: var(--nuraly-input-disabled-label-color, var(--nuraly-disabled-label-color));
+  }
+
+  /* 
+   * Input prefix wrapper styling
+   * Centers the prefix content vertically and horizontally
+   */
+  .input-prefix {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* 
+   * Prefix slot styling
+   * Applied to slotted prefix content (icons, text, etc.)
+   */
+  ::slotted([slot='prefix']) {
+    display: flex;
+    align-items: center;
+    padding-right: var(--nuraly-input-prefix-padding-right, var(--nuraly-prefix-padding-right));
+    color: var(--nuraly-input-prefix-color, var(--nuraly-prefix-color));
+    font-size: var(--nuraly-input-prefix-font-size, var(--nuraly-prefix-font-size));
+    flex-shrink: 0;
+  }
+
+  /* 
+   * Input suffix wrapper styling
+   * Centers the suffix content vertically and horizontally
+   */
+  .input-suffix {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* 
+   * Suffix slot styling
+   * Applied to slotted suffix content (icons, text, etc.)
+   */
+  ::slotted([slot='suffix']) {
+    display: flex;
+    align-items: center;
+    padding-left: var(--nuraly-input-suffix-padding-left, var(--nuraly-suffix-padding-left));
+    color: var(--nuraly-input-suffix-color, var(--nuraly-suffix-color));
+    font-size: var(--nuraly-input-suffix-font-size, var(--nuraly-suffix-font-size));
+    flex-shrink: 0;
+  }
+
+  /* 
+   * Disabled state for prefix and suffix slots
+   * Applied when input is disabled
+   */
+  :host([disabled]) ::slotted([slot='prefix']),
+  :host([disabled]) ::slotted([slot='suffix']) {
+    opacity: var(--nuraly-input-disabled-icon-opacity, var(--nuraly-disabled-icon-opacity));
+    color: var(--nuraly-input-disabled-prefix-suffix-color, var(--nuraly-disabled-prefix-suffix-color));
+  }
+`,t`
+  /* ========================================
+   * SIZE VARIATIONS
+   * ======================================== */
+
+  /* Large input size variant */
+  div[data-size='large'] {
+    padding-top: var(--nuraly-input-large-padding-top, var(--nuraly-large-padding-top));
+    padding-bottom: var(--nuraly-input-large-padding-bottom, var(--nuraly-large-padding-bottom));
+    padding-left: var(--nuraly-input-large-padding-left, var(--nuraly-large-padding-left));
+    padding-right: var(--nuraly-input-large-padding-right, var(--nuraly-large-padding-right));
+  }
+
+  /* Medium input size variant (default) */
+  div[data-size='medium'] {
+    padding-top: var(--nuraly-input-medium-padding-top, var(--nuraly-medium-padding-top));
+    padding-bottom: var(--nuraly-input-medium-padding-bottom, var(--nuraly-medium-padding-bottom));
+    padding-left: var(--nuraly-input-medium-padding-left, var(--nuraly-medium-padding-left));
+    padding-right: var(--nuraly-input-medium-padding-right, var(--nuraly-medium-padding-right));
+  }
+
+  /* Small input size variant */
+  div[data-size='small'] {
+    padding-top: var(--nuraly-input-small-padding-top, var(--nuraly-small-padding-top));
+    padding-bottom: var(--nuraly-input-small-padding-bottom, var(--nuraly-small-padding-bottom));
+    padding-left: var(--nuraly-input-small-padding-left, var(--nuraly-small-padding-left));
+    padding-right: var(--nuraly-input-small-padding-right, var(--nuraly-small-padding-right));
+  }
+
+  /* Carbon Design System - Size-specific padding overrides */
+  html[data-theme^="carbon"] nr-input div[data-size='medium'],
+  body[data-theme^="carbon"] nr-input div[data-size='medium'],
+  [data-theme^="carbon"] div[data-size='medium'] {
+    padding: 4px 8px !important;
+  }
+
+  /* 
+   * Character count display
+   * Shows character count and limit information
+   */
+  .character-count {
+    font-size: var(--nuraly-input-character-count-font-size, var(--nuraly-character-count-font-size));
+    color: var(--nuraly-input-character-count-color, var(--nuraly-character-count-color));
+    text-align: right;
+    margin-top: var(--nuraly-input-character-count-margin-top, var(--nuraly-character-count-margin-top));
+    font-family: var(--nuraly-input-font-family, var(--nuraly-font-family));
+  }
+
+  /* Character count over limit styling */
+  .character-count[data-over-limit] {
+    color: var(--nuraly-input-character-count-over-limit-color, var(--nuraly-character-count-over-limit-color));
+  }
+
+  /* ========================================
+   * VALIDATION MESSAGE STYLES
+   * ======================================== */
+
+  /* 
+   * Base validation message styling
+   * Common styles for error and warning messages
+   */
+  .validation-message {
+    font-size: var(--nuraly-input-validation-message-font-size, var(--nuraly-validation-message-font-size, 0.875rem));
+    font-family: var(--nuraly-input-font-family, var(--nuraly-font-family));
+    margin-top: var(--nuraly-input-validation-message-margin-top, var(--nuraly-validation-message-margin-top, 0.25rem));
+    padding: var(--nuraly-input-validation-message-padding, var(--nuraly-validation-message-padding, 0));
+    
+    /* Prevent text overflow and ensure proper wrapping without affecting parent width */
+    word-wrap: break-word;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    hyphens: auto;
+    white-space: normal;
+    max-width: 100%;
+    width: 0;
+    min-width: 100%;
+    box-sizing: border-box;
+    line-height: var(--nuraly-input-validation-message-line-height, var(--nuraly-validation-message-line-height, 1.4));
+  }
+
+  /* 
+   * Error validation message styling
+   * Applied when validation message has error class
+   */
+  .validation-message.error {
+    color: var(--nuraly-input-error-message-color, var(--nuraly-error-message-color, var(--nuraly-input-error-color, var(--nuraly-error-color, #dc2626))));
+  }
+
+  /* 
+   * Warning validation message styling
+   * Applied when validation message has warning class
+   */
+  .validation-message.warning {
+    color: var(--nuraly-input-warning-message-color, var(--nuraly-warning-message-color, var(--nuraly-input-warning-color, var(--nuraly-warning-color, #d97706))));
+  }
+
+  /* 
+   * Disabled state for validation messages
+   * Applied when input is disabled
+   */
+  :host([disabled]) .validation-message {
+    opacity: var(--nuraly-input-disabled-validation-message-opacity, var(--nuraly-disabled-validation-message-opacity, 0.6));
+    color: var(--nuraly-input-disabled-validation-message-color, var(--nuraly-disabled-validation-message-color));
+  }
+
+  /* 
+   * Validation icon styles
+   * Base styles for validation feedback icons
+   */
+  .validation-icon {
+    width: 16px;
+    height: 16px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* 
+   * Loading validation icon with hourglass animation
+   * Applied when async validation is in progress
+   */
+  .validation-icon.validation-loading {
+    color: var(--nuraly-input-primary-color, var(--nuraly-primary-color, #3b82f6));
+    animation: validation-hourglass 2s ease-in-out infinite;
+    transform-origin: center;
+  }
+
+  /* 
+   * Error validation icon styling
+   * Applied when validation fails
+   */
+  .validation-icon.validation-error {
+    color: var(--nuraly-input-error-color, var(--nuraly-error-color, #dc2626));
+  }
+
+  /* 
+   * Warning validation icon styling
+   * Applied when validation has warnings
+   */
+  .validation-icon.validation-warning {
+    color: var(--nuraly-input-warning-color, var(--nuraly-warning-color, #d97706));
+  }
+
+  /* 
+   * Success validation icon styling
+   * Applied when validation passes
+   */
+  .validation-icon.validation-success {
+    color: var(--nuraly-input-success-color, var(--nuraly-success-color, #16a34a));
+  }
+
+  /* 
+   * Hourglass animation for validation loading
+   * Gentle pulsing effect without rotation for clean appearance
+   */
+  @keyframes validation-hourglass {
+    0% {
+      opacity: 0.7;
+      transform: scale(1);
+    }
+    25% {
+      opacity: 1;
+      transform: scale(1.03);
+    }
+    50% {
+      opacity: 0.8;
+      transform: scale(1);
+    }
+    75% {
+      opacity: 1;
+      transform: scale(1.03);
+    }
+    100% {
+      opacity: 0.7;
+      transform: scale(1);
+    }
+  }
+
+  /* 
+   * Alternative pulse animation option
+   * Uncomment this and change animation above to use pulse instead of hourglass
+   */
+  /*
+  @keyframes validation-pulse {
+    0%, 100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+    50% {
+      opacity: 0.7;
+      transform: scale(1.1);
+    }
+  }
+  */
+`],p={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})$/},h=t=>({required:!0,message:t||"This field is required"}),m=t=>({type:"email",pattern:p.EMAIL,message:t||"Please enter a valid email address"}),b=t=>({type:"url",pattern:p.URL,message:t||"Please enter a valid URL"}),v=(t,r)=>({maxLength:t,message:r||`Maximum length is ${t} characters`}),y=(t,r)=>({type:"number",min:t,message:r||`Minimum value is ${t}`}),g=(t,r)=>({type:"number",max:t,message:r||`Maximum value is ${t}`});
 /**
  * @license
  * Copyright 2023 Google Laabidi Aymen
  * SPDX-License-Identifier: MIT
  */
-class f{static validateNumericProperties(t,r,i,e){"number"===t&&(r&&isNaN(Number(r))&&console.warn(`Invalid min value: "${r}" is not a valid number`),i&&isNaN(Number(i))&&console.warn(`Invalid max value: "${i}" is not a valid number`),e&&isNaN(Number(e))&&console.warn(`Invalid step value: "${e}" is not a valid number`),r&&i&&Number(r)>=Number(i)&&console.warn(`Invalid range: min value (${r}) should be less than max value (${i})`))}static preventNonNumericInput(t,r){const i=t.key,e=t.target,a=e.value,n=e.selectionStart||0;if(!(t.ctrlKey||t.metaKey||["Backspace","Delete","Tab","Escape","Enter","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(i)||/^\d$/.test(i))){if("."===i||","===i){if(!(a.includes(".")||a.includes(",")))return}if("-"===i){const t=a.includes("-"),i=!r||Number(r)<0;if(!t&&0===n&&i)return}if("+"===i){if(!a.includes("+")&&0===n)return}t.preventDefault()}}static validateNumericValue(t,r,i){const e=[];if(!t)return{isValid:!0,warnings:e};const a=Number(t);return isNaN(a)?{isValid:!1,warnings:[`Invalid numeric value: "${t}"`]}:(r&&a<Number(r)&&e.push(`Value ${a} is below minimum ${r}`),i&&a>Number(i)&&e.push(`Value ${a} is above maximum ${i}`),{isValid:!0,warnings:e})}}
+class f{static validateNumericProperties(t,r,e,i){"number"===t&&(r&&isNaN(Number(r))&&console.warn(`Invalid min value: "${r}" is not a valid number`),e&&isNaN(Number(e))&&console.warn(`Invalid max value: "${e}" is not a valid number`),i&&isNaN(Number(i))&&console.warn(`Invalid step value: "${i}" is not a valid number`),r&&e&&Number(r)>=Number(e)&&console.warn(`Invalid range: min value (${r}) should be less than max value (${e})`))}static preventNonNumericInput(t,r){const e=t.key,i=t.target,o=i.value,n=i.selectionStart||0;if(!(t.ctrlKey||t.metaKey||["Backspace","Delete","Tab","Escape","Enter","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(e)||/^\d$/.test(e))){if("."===e||","===e){if(!(o.includes(".")||o.includes(",")))return}if("-"===e){const t=o.includes("-"),e=!r||Number(r)<0;if(!t&&0===n&&e)return}if("+"===e){if(!o.includes("+")&&0===n)return}t.preventDefault()}}static validateNumericValue(t,r,e){const i=[];if(!t)return{isValid:!0,warnings:i};const o=Number(t);return isNaN(o)?{isValid:!1,warnings:[`Invalid numeric value: "${t}"`]}:(r&&o<Number(r)&&i.push(`Value ${o} is below minimum ${r}`),e&&o>Number(e)&&i.push(`Value ${o} is above maximum ${e}`),{isValid:!0,warnings:i})}}
 /**
  * @license
  * Copyright 2023 Google Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */class k{static renderPrefix(){return r`<div class="input-prefix"><slot name="prefix"></slot></div>`}static renderSuffix(){return r`<div class="input-suffix"><slot name="suffix"></slot></div>`}static renderAddonBefore(t,e){return t?r`<div class="input-addon-before"><slot name="addon-before" @slotchange="${e}"></slot></div>`:i}static renderAddonAfter(t,e){return t?r`<div class="input-addon-after"><slot name="addon-after" @slotchange="${e}"></slot></div>`:i}static renderCopyIcon(t,e,a,n,o){return t?r`<nr-icon name="copy" type="regular" id="copy-icon" role="button" aria-label="Copy input value" tabindex="0" @click="${e||a?i:n}" @keydown="${o}"></nr-icon>`:i}static renderClearIcon(t,e,a,n,o,s){return!t||!e||a||n?i:r`<nr-icon name="times-circle" type="regular" id="clear-icon" role="button" aria-label="Clear input value" tabindex="0" @click="${o}" @keydown="${s}"></nr-icon>`}static renderStateIcon(t){switch(t){case"warning":return r`<nr-icon name="warning" id="warning-icon"></nr-icon>`;case"error":return r`<nr-icon name="exclamation-circle" id="error-icon"></nr-icon>`;default:return i}}static renderCalendarIcon(t,e){return"default"!==t||"calendar"!==e?i:r`<nr-icon name="calendar" type="regular" id="calendar-icon"></nr-icon>`}static renderPasswordIcon(t,e,a,n,o,s){return"password"!==t?i:"text"===e?r`<nr-icon name="eye-slash" type="regular" id="password-icon" role="button" aria-label="Hide password" tabindex="0" @click="${a||n?i:o}" @keydown="${s}"></nr-icon>`:r`<nr-icon name="eye" type="regular" id="password-icon" role="button" aria-label="Show password" tabindex="0" @click="${a||n?i:o}" @keydown="${s}"></nr-icon>`}static renderNumberIcons(t,e,a,n,o,s,l){return"number"!==t?i:r`<div id="number-icons">${"default"!==e?r`<span id="icons-separator">|</span>`:i}<nr-icon name="minus" aria-label="Decrease value" role="button" tabindex="0" @click="${a||n?i:s}" @keydown="${l}"></nr-icon><span id="icons-separator">|</span><nr-icon name="plus" aria-label="Increase value" role="button" tabindex="0" @click="${a||n?i:o}" @keydown="${l}"></nr-icon></div>`}}
+ */class k{static renderPrefix(){return r`
+      <div class="input-prefix">
+        <slot name="prefix"></slot>
+      </div>
+    `}static renderSuffix(){return r`
+      <div class="input-suffix">
+        <slot name="suffix"></slot>
+      </div>
+    `}static renderAddonBefore(t,i){return t?r`
+      <div class="input-addon-before">
+        <slot name="addon-before" @slotchange=${i}></slot>
+      </div>
+    `:e}static renderAddonAfter(t,i){return t?r`
+      <div class="input-addon-after">
+        <slot name="addon-after" @slotchange=${i}></slot>
+      </div>
+    `:e}static renderCopyIcon(t,i,o,n,a){return t?r`<nr-icon
+      name="copy"
+      type="regular"
+      id="copy-icon"
+      role="button"
+      aria-label="Copy input value"
+      tabindex="0"
+      @click=${i||o?e:n}
+      @keydown=${a}
+    ></nr-icon>`:e}static renderClearIcon(t,i,o,n,a,s){return!t||!i||o||n?e:r`<nr-icon
+      name="times-circle"
+      type="regular"
+      id="clear-icon"
+      role="button"
+      aria-label="Clear input value"
+      tabindex="0"
+      @click=${a}
+      @keydown=${s}
+    ></nr-icon>`}static renderStateIcon(t){switch(t){case"warning":return r`<nr-icon name="warning" id="warning-icon"></nr-icon>`;case"error":return r`<nr-icon name="exclamation-circle" id="error-icon"></nr-icon>`;default:return e}}static renderCalendarIcon(t,i){return"default"!==t||"calendar"!==i?e:r`<nr-icon name="calendar" type="regular" id="calendar-icon"></nr-icon>`}static renderPasswordIcon(t,i,o,n,a,s){return"password"!==t?e:"text"===i?r`<nr-icon
+        name="eye-slash"
+        type="regular"
+        id="password-icon"
+        role="button"
+        aria-label="Hide password"
+        tabindex="0"
+        @click=${o||n?e:a}
+        @keydown=${s}
+      ></nr-icon>`:r`<nr-icon
+        name="eye"
+        type="regular"
+        id="password-icon"
+        role="button"
+        aria-label="Show password"
+        tabindex="0"
+        @click=${o||n?e:a}
+        @keydown=${s}
+      ></nr-icon>`}static renderNumberIcons(t,i,o,n,a,s,l){return"number"!==t?e:r`
+      <div id="number-icons">
+        ${"default"!==i?r`<span id="icons-separator">|</span>`:e}
+        <nr-icon 
+          name="minus" 
+          aria-label="Decrease value"
+          role="button"
+          tabindex="0"
+          @click=${o||n?e:s}
+          @keydown=${l}
+        ></nr-icon>
+        <span id="icons-separator">|</span>
+        <nr-icon 
+          name="plus" 
+          aria-label="Increase value"
+          role="button"
+          tabindex="0"
+          @click=${o||n?e:a}
+          @keydown=${l}
+        ></nr-icon>
+      </div>
+    `}}
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */const x=t=>class extends t{get inputElement(){var t;const r=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector("#input, input, textarea");if(r)return r;const i=this.querySelector("input, textarea");if(!i)throw new Error("SelectionMixin requires an input or textarea element");return i}selectAll(){const t=this.inputElement;t&&t.select()}selectRange(t,r){const i=this.inputElement;i&&i.setSelectionRange&&(i.focus(),i.setSelectionRange(t,r))}getCursorPosition(){const t=this.inputElement;return t&&"number"==typeof t.selectionStart?t.selectionStart:null}setCursorPosition(t){const r=this.inputElement;r&&r.setSelectionRange&&(r.focus(),r.setSelectionRange(t,t))}getSelectedText(){const t=this.inputElement;return t&&null!==t.selectionStart&&null!==t.selectionEnd?t.value.substring(t.selectionStart,t.selectionEnd):""}},w=t=>class extends t{get inputElement(){var t;const r=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector("#input, input, textarea");if(r)return r;const i=this.querySelector("input, textarea");if(!i)throw new Error("FocusMixin requires an input or textarea element");return i}focus(t={}){const r=this.inputElement;r&&(r.focus({preventScroll:t.preventScroll}),t.selectText&&r.select())}blur(){const t=this.inputElement;t&&t.blur()}isFocused(){const t=this.inputElement;return!!t&&document.activeElement===t}},_=t=>class extends t{get inputElement(){var t;const r=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector("#input, input");if(r)return r;const i=this.querySelector("input");if(!i)throw new Error("NumberMixin requires an input element");return i}dispatchInputEvent(t,r){"_dispatchInputEvent"in this&&"function"==typeof this._dispatchInputEvent?this._dispatchInputEvent(t,r):this.dispatchEvent(new CustomEvent(t,{detail:r,bubbles:!0,composed:!0}))}increment(){try{const t=this.inputElement;if(!t.value){const r=t.getAttribute("min");t.value=r||"0"}t.stepUp();const r=t.value;this.dispatchInputEvent("nr-input",{value:r,target:t,action:"increment"}),"value"in this&&(this.value=r)}catch(t){console.warn("Failed to increment value:",t),this.dispatchInputEvent("nr-increment-error",{error:t,value:this.inputElement.value,target:this.inputElement})}}decrement(){try{const t=this.inputElement;t.stepDown();const r=t.value;this.dispatchInputEvent("nr-input",{value:r,target:t,action:"decrement"}),"value"in this&&(this.value=r)}catch(t){console.warn("Failed to decrement value:",t),this.dispatchInputEvent("nr-decrement-error",{error:t,value:this.inputElement.value,target:this.inputElement})}}setStep(t){const r=this.inputElement;t&&this.isValidStep(t)?r.setAttribute("step",t):r.removeAttribute("step")}isValidStep(t){if(!t)return!0;const r=parseFloat(t);return!isNaN(r)&&r>0}};
+ */const w=t=>class extends t{get inputElement(){var t;const r=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector("#input, input, textarea");if(r)return r;const e=this.querySelector("input, textarea");if(!e)throw new Error("SelectionMixin requires an input or textarea element");return e}selectAll(){const t=this.inputElement;t&&t.select()}selectRange(t,r){const e=this.inputElement;e&&e.setSelectionRange&&(e.focus(),e.setSelectionRange(t,r))}getCursorPosition(){const t=this.inputElement;return t&&"number"==typeof t.selectionStart?t.selectionStart:null}setCursorPosition(t){const r=this.inputElement;r&&r.setSelectionRange&&(r.focus(),r.setSelectionRange(t,t))}getSelectedText(){const t=this.inputElement;return t&&null!==t.selectionStart&&null!==t.selectionEnd?t.value.substring(t.selectionStart,t.selectionEnd):""}},x=t=>class extends t{get inputElement(){var t;const r=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector("#input, input, textarea");if(r)return r;const e=this.querySelector("input, textarea");if(!e)throw new Error("FocusMixin requires an input or textarea element");return e}focus(t={}){const r=this.inputElement;r&&(r.focus({preventScroll:t.preventScroll}),t.selectText&&r.select())}blur(){const t=this.inputElement;t&&t.blur()}isFocused(){const t=this.inputElement;return!!t&&document.activeElement===t}},_=t=>class extends t{get inputElement(){var t;const r=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector("#input, input");if(r)return r;const e=this.querySelector("input");if(!e)throw new Error("NumberMixin requires an input element");return e}dispatchInputEvent(t,r){"_dispatchInputEvent"in this&&"function"==typeof this._dispatchInputEvent?this._dispatchInputEvent(t,r):this.dispatchEvent(new CustomEvent(t,{detail:r,bubbles:!0,composed:!0}))}increment(){try{const t=this.inputElement;if(!t.value){const r=t.getAttribute("min");t.value=r||"0"}t.stepUp();const r=t.value;this.dispatchInputEvent("nr-input",{value:r,target:t,action:"increment"}),"value"in this&&(this.value=r)}catch(t){console.warn("Failed to increment value:",t),this.dispatchInputEvent("nr-increment-error",{error:t,value:this.inputElement.value,target:this.inputElement})}}decrement(){try{const t=this.inputElement;t.stepDown();const r=t.value;this.dispatchInputEvent("nr-input",{value:r,target:t,action:"decrement"}),"value"in this&&(this.value=r)}catch(t){console.warn("Failed to decrement value:",t),this.dispatchInputEvent("nr-decrement-error",{error:t,value:this.inputElement.value,target:this.inputElement})}}setStep(t){const r=this.inputElement;t&&this.isValidStep(t)?r.setAttribute("step",t):r.removeAttribute("step")}isValidStep(t){if(!t)return!0;const r=parseFloat(t);return!isNaN(r)&&r>0}};
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
@@ -30,22 +924,564 @@ class ${constructor(t){this._host=t,this._host.addController(this)}get host(){re
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */var T;!function(t){t.Pristine="pristine",t.Pending="pending",t.Valid="valid",t.Invalid="invalid",t.Warning="warning"}(T||(T={}));class z extends ${constructor(){super(...arguments),this._validationState=T.Pristine,this._isValidating=!1,this._isValid=!0,this._validationMessage="",this._validationResult={isValid:!0,errors:[],warnings:[],hasError:!1,hasWarning:!1},this._debounceTimer=null}get stateHost(){return this.host}get validationState(){return this._validationState}get isValidating(){return this._isValidating}get isValid(){return this._isValid}get validationMessage(){return this._validationMessage}get validationResult(){return this._validationResult}setValidationState(t){if(this._validationState!==t){const r=this._validationState;this._validationState=t,this.dispatchStateChangeEvent(r,t),this.requestUpdate()}}setValidationResult(t){this._validationResult=t,this._isValid=t.isValid,this._validationMessage=t.hasError?t.errorMessage||"":t.hasWarning&&t.warningMessage||"";let r=T.Valid;t.hasError?r=T.Invalid:t.hasWarning&&this.stateHost.allowWarnings&&(r=T.Warning),this.setValidationState(r)}setValidating(t){this._isValidating!==t&&(this._isValidating=t,t&&this.setValidationState(T.Pending),this.requestUpdate())}shouldValidateOnChange(){return this.stateHost.validateOnChangeInput&&("change"===this.stateHost.validationTrigger||this._validationState!==T.Pristine)}shouldValidateOnBlur(){return this.stateHost.validateOnBlurInput&&("blur"===this.stateHost.validationTrigger||"change"===this.stateHost.validationTrigger)}clearDebounceTimer(){null!==this._debounceTimer&&(clearTimeout(this._debounceTimer),this._debounceTimer=null)}debounceValidation(t){this.clearDebounceTimer();const r=this.stateHost.validationDebounce;r&&r>0?this._debounceTimer=window.setTimeout((()=>{this._debounceTimer=null,t()}),r):t()}resetValidationState(){this.clearDebounceTimer(),this._validationState=T.Pristine,this._isValidating=!1,this._isValid=!0,this._validationMessage="",this._validationResult={isValid:!0,errors:[],warnings:[],hasError:!1,hasWarning:!1},this.requestUpdate()}markAsTouched(){this._validationState===T.Pristine&&this.setValidationState(T.Valid)}isPristine(){return this._validationState===T.Pristine}hasError(){return this._validationState===T.Invalid}hasWarning(){return this._validationState===T.Warning}isPending(){return this._validationState===T.Pending}getStateSummary(){return{state:this._validationState,isValidating:this._isValidating,isValid:this._isValid,message:this._validationMessage,result:this._validationResult,isPristine:this.isPristine(),hasError:this.hasError(),hasWarning:this.hasWarning(),shouldValidateOnChange:this.shouldValidateOnChange(),shouldValidateOnBlur:this.shouldValidateOnBlur()}}hostDisconnected(){super.hostDisconnected(),this.clearDebounceTimer()}dispatchStateChangeEvent(t,r){this.dispatchEvent(new CustomEvent("nr-validation-state-change",{detail:{previousState:t,newState:r,isValidating:this._isValidating,isValid:this._isValid,validationResult:this._validationResult},bubbles:!0,composed:!0}))}}
+ */var S;!function(t){t.Pristine="pristine",t.Pending="pending",t.Valid="valid",t.Invalid="invalid",t.Warning="warning"}(S||(S={}));class T extends ${constructor(){super(...arguments),this._validationState=S.Pristine,this._isValidating=!1,this._isValid=!0,this._validationMessage="",this._validationResult={isValid:!0,errors:[],warnings:[],hasError:!1,hasWarning:!1},this._debounceTimer=null}get stateHost(){return this.host}get validationState(){return this._validationState}get isValidating(){return this._isValidating}get isValid(){return this._isValid}get validationMessage(){return this._validationMessage}get validationResult(){return this._validationResult}setValidationState(t){if(this._validationState!==t){const r=this._validationState;this._validationState=t,this.dispatchStateChangeEvent(r,t),this.requestUpdate()}}setValidationResult(t){this._validationResult=t,this._isValid=t.isValid,this._validationMessage=t.hasError?t.errorMessage||"":t.hasWarning&&t.warningMessage||"";let r=S.Valid;t.hasError?r=S.Invalid:t.hasWarning&&this.stateHost.allowWarnings&&(r=S.Warning),this.setValidationState(r)}setValidating(t){this._isValidating!==t&&(this._isValidating=t,t&&this.setValidationState(S.Pending),this.requestUpdate())}shouldValidateOnChange(){return this.stateHost.validateOnChangeInput&&("change"===this.stateHost.validationTrigger||this._validationState!==S.Pristine)}shouldValidateOnBlur(){return this.stateHost.validateOnBlurInput&&("blur"===this.stateHost.validationTrigger||"change"===this.stateHost.validationTrigger)}clearDebounceTimer(){null!==this._debounceTimer&&(clearTimeout(this._debounceTimer),this._debounceTimer=null)}debounceValidation(t){this.clearDebounceTimer();const r=this.stateHost.validationDebounce;r&&r>0?this._debounceTimer=window.setTimeout((()=>{this._debounceTimer=null,t()}),r):t()}resetValidationState(){this.clearDebounceTimer(),this._validationState=S.Pristine,this._isValidating=!1,this._isValid=!0,this._validationMessage="",this._validationResult={isValid:!0,errors:[],warnings:[],hasError:!1,hasWarning:!1},this.requestUpdate()}markAsTouched(){this._validationState===S.Pristine&&this.setValidationState(S.Valid)}isPristine(){return this._validationState===S.Pristine}hasError(){return this._validationState===S.Invalid}hasWarning(){return this._validationState===S.Warning}isPending(){return this._validationState===S.Pending}getStateSummary(){return{state:this._validationState,isValidating:this._isValidating,isValid:this._isValid,message:this._validationMessage,result:this._validationResult,isPristine:this.isPristine(),hasError:this.hasError(),hasWarning:this.hasWarning(),shouldValidateOnChange:this.shouldValidateOnChange(),shouldValidateOnBlur:this.shouldValidateOnBlur()}}hostDisconnected(){super.hostDisconnected(),this.clearDebounceTimer()}dispatchStateChangeEvent(t,r){this.dispatchEvent(new CustomEvent("nr-validation-state-change",{detail:{previousState:t,newState:r,isValidating:this._isValidating,isValid:this._isValid,validationResult:this._validationResult},bubbles:!0,composed:!0}))}}
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */var S=function(t,r,i,e){return new(i||(i=Promise))((function(a,n){function o(t){try{l(e.next(t))}catch(t){n(t)}}function s(t){try{l(e.throw(t))}catch(t){n(t)}}function l(t){var r;t.done?a(t.value):(r=t.value,r instanceof i?r:new i((function(t){t(r)}))).then(o,s)}l((e=e.apply(t,r||[])).next())}))};class V extends ${constructor(t){super(t),this.stateController=new z(this._host)}get validationHost(){return this._host}get isValid(){return this.stateController.isValid}get validationMessage(){return this.stateController.validationMessage}get validationState(){return this.stateController.validationState}get validationResult(){return this.stateController.validationResult}get isValidating(){return this.stateController.isValidating}hostConnected(){this.setupValidationRules()}hostUpdated(){}setupValidationRules(){const t=[],r=this.validationHost;"email"===r.type&&t.push(m()),"url"===r.type&&t.push(v()),r.required&&t.push(h(r.label?`${r.label} is required`:void 0)),r.maxLength&&t.push(b(r.maxLength)),"number"===r.type&&(void 0!==r.min&&t.push(y(Number(r.min))),void 0!==r.max&&t.push(g(Number(r.max))));const i=r.rules||[],e=[...t.filter((t=>!i.some((r=>this.isSameRuleType(t,r))))),...i];JSON.stringify(r.rules)!==JSON.stringify(e)&&(r.rules=e,this.requestUpdate())}validate(){try{this.stateController.setValidationState(T.Pending),this.stateController.setValidating(!0),this.dispatchValidationEvent();if(this.hasAsyncValidators())return this.performAsyncValidation(this.validationHost.value),!0;const t=this.performDetailedValidation(this.validationHost.value);return this.stateController.setValidationResult(t),t.hasError?this.setValidationResult(!1,this.stateController.validationMessage,T.Invalid):t.hasWarning&&this.validationHost.allowWarnings?this.setValidationResult(!0,this.stateController.validationMessage,T.Warning):this.setValidationResult(!0,"",T.Valid),this.stateController.setValidating(!1),this.updateHostValidationState(),t.isValid}catch(t){return this.handleError(t,"validate"),this.stateController.setValidating(!1),this.setValidationResult(!1,"Validation error occurred",T.Invalid),this.updateHostValidationState(),!1}}validateOnChange(){this.stateController.shouldValidateOnChange()&&this.stateController.debounceValidation((()=>{this.validate()}))}validateOnBlur(){this.stateController.shouldValidateOnBlur()&&(this.stateController.clearDebounceTimer(),this.validate())}addRule(t){const r=this.validationHost.rules||[];this.validationHost.rules=[...r,t],this.requestUpdate()}removeRule(t){const r=this.validationHost.rules||[];this.validationHost.rules=r.filter((r=>!t(r))),this.requestUpdate()}clearRules(){this.validationHost.rules=[],this.reset()}hasAsyncValidators(){return(this.validationHost.rules||[]).some((t=>t.asyncValidator||t.validator&&this.isValidatorAsync(t.validator)))}isValidatorAsync(t){const r=t.toString();return r.includes("Promise")||r.includes("async")||r.includes("setTimeout")||r.includes("new Promise")}performAsyncValidation(t){return S(this,void 0,void 0,(function*(){try{this.stateController.setValidating(!0),this.updateHostValidationState();const r=[],i=[],e=this.validationHost.rules||[];for(const a of e)if(!(a.asyncValidator||a.validator&&this.isValidatorAsync(a.validator))){const e=this.validateRule(a,t);e.isValid||(a.warningOnly&&this.validationHost.allowWarnings?i.push(e.message):r.push(e.message))}if(r.length>0)return this.stateController.setValidationResult({isValid:!1,errors:r,warnings:i,hasError:!0,hasWarning:i.length>0,errorMessage:r[0],warningMessage:i[0]}),this.setValidationResult(!1,this.stateController.validationMessage,T.Invalid),this.stateController.setValidating(!1),void this.updateHostValidationState();for(const a of e)if(a.asyncValidator||a.validator&&this.isValidatorAsync(a.validator))try{yield this.validateAsyncRule(a,t)}catch(t){const e=t.message||a.message||"Validation failed";a.warningOnly&&this.validationHost.allowWarnings?i.push(e):r.push(e)}const a=r.length>0,n=i.length>0;this.stateController.setValidationResult({isValid:!a,errors:r,warnings:i,hasError:a,hasWarning:n,errorMessage:r[0],warningMessage:i[0]}),a?this.setValidationResult(!1,this.stateController.validationMessage,T.Invalid):n&&this.validationHost.allowWarnings?this.setValidationResult(!0,this.stateController.validationMessage,T.Warning):this.setValidationResult(!0,"",T.Valid),this.stateController.setValidating(!1),this.updateHostValidationState()}catch(t){this.handleError(t,"performAsyncValidation"),this.stateController.setValidating(!1),this.setValidationResult(!1,"Async validation error occurred",T.Invalid),this.updateHostValidationState()}}))}validateAsyncRule(t,r){return S(this,void 0,void 0,(function*(){if(t.asyncValidator)yield t.asyncValidator(t,r);else if(t.validator){const i=t.validator(t,r);i&&"object"==typeof i&&"then"in i&&(yield i)}}))}reset(){this.stateController.setValidationResult({isValid:!0,errors:[],warnings:[],hasError:!1,hasWarning:!1}),this.stateController.setValidationState(T.Pristine),this.stateController.setValidating(!1),this.updateHostValidationState(),this.dispatchValidationEvent()}getValidationStatus(){return{isValid:this.stateController.validationResult.isValid,isValidating:this.stateController.isValidating,errors:this.stateController.validationResult.errors,warnings:this.stateController.validationResult.warnings,validationResult:this.stateController.validationResult}}setValidationStatus(t){this.stateController.setValidationResult(t),t.hasError?this.setValidationResult(!1,this.stateController.validationMessage,T.Invalid):t.hasWarning?this.setValidationResult(!0,this.stateController.validationMessage,T.Warning):t.isValid?this.setValidationResult(!0,"",T.Valid):this.setValidationResult(!0,"",T.Pristine),this.updateHostValidationState()}performDetailedValidation(t){const r=[],i=[],e=this.validationHost.rules||[];for(const a of e){const e=this.validateRule(a,t);e.isValid||(a.warningOnly&&this.validationHost.allowWarnings?i.push(e.message):r.push(e.message))}const a=r.length>0;return{isValid:!a,errors:r,warnings:i,hasError:a,hasWarning:i.length>0,errorMessage:r[0],warningMessage:i[0]}}validateRule(t,r){if(t.asyncValidator||t.validator&&this.isValidatorAsync(t.validator))return{isValid:!0,message:""};const i=t.transform?t.transform(r):r;if(t.required&&this.isValueEmpty(r))return{isValid:!1,message:t.message||`${this.validationHost.label||"This field"} is required`};if(this.isValueEmpty(r)&&!t.required)return{isValid:!0,message:""};if(t.type){const r=this.validateType(t.type,i);if(!r.isValid)return{isValid:!1,message:t.message||r.message}}if(t.pattern&&!t.pattern.test(i))return{isValid:!1,message:t.message||"Invalid format"};if(void 0!==t.minLength&&i.length<t.minLength)return{isValid:!1,message:t.message||`Minimum length is ${t.minLength} characters`};if(void 0!==t.maxLength&&i.length>t.maxLength)return{isValid:!1,message:t.message||`Maximum length is ${t.maxLength} characters`};if("number"===t.type||"number"===this.validationHost.type){const r=Number(i);if(void 0!==t.min&&r<t.min)return{isValid:!1,message:t.message||`Minimum value is ${t.min}`};if(void 0!==t.max&&r>t.max)return{isValid:!1,message:t.message||`Maximum value is ${t.max}`}}if(t.enum&&!t.enum.includes(i))return{isValid:!1,message:t.message||`Value must be one of: ${t.enum.join(", ")}`};if(t.validator)try{const r=t.validator(t,i);return r&&"object"==typeof r&&"isValid"in r?{isValid:r.isValid,message:r.isValid?"":r.message||t.message||"Validation failed"}:{isValid:!0,message:""}}catch(r){return{isValid:!1,message:t.message||r.message||"Validation failed"}}return{isValid:!0,message:""}}validateType(t,r){switch(t){case"email":return{isValid:p.EMAIL.test(r),message:"Please enter a valid email address"};case"url":return{isValid:p.URL.test(r),message:"Please enter a valid URL"};case"number":case"integer":return{isValid:!isNaN(Number(r))&&("number"===t||Number.isInteger(Number(r))),message:`Please enter a valid ${t}`};case"float":return{isValid:!isNaN(parseFloat(r)),message:"Please enter a valid number"};default:return{isValid:!0,message:""}}}isValueEmpty(t){return null==t||""===t}isSameRuleType(t,r){return t.type===r.type&&t.required===r.required&&!!t.pattern==!!r.pattern}setValidationResult(t,r,i){const e=this.stateController.isValid!==t||this.stateController.validationMessage!==r||this.stateController.validationState!==i;this.stateController.setValidationState(i),this.stateController.setValidationResult({isValid:t,errors:t?[]:[r],warnings:[],hasError:!t,hasWarning:!1,errorMessage:t?"":r,warningMessage:""}),e&&this.dispatchValidationEvent()}updateHostValidationState(){this.dispatchValidationEvent()}dispatchValidationEvent(){const t={isValid:this.stateController.isValid,validationMessage:this.stateController.validationMessage,validationState:this.stateController.validationState,errors:this.stateController.validationResult.errors,warnings:this.stateController.validationResult.warnings,validationResult:this.stateController.validationResult};this.dispatchEvent(new CustomEvent("nr-validation",{detail:t,bubbles:!0,composed:!0}))}getValidationClasses(){const t=this.host,r=this.host;return{valid:this.stateController.validationResult.isValid&&!this.stateController.validationResult.hasWarning,invalid:this.stateController.validationResult.hasError,warning:this.stateController.validationResult.hasWarning&&!this.stateController.validationResult.hasError,validating:this.stateController.isValidating,"has-feedback":r.hasFeedback||!1,touched:t.isTouched||!1,dirty:t.isDirty||!1,required:this.host.required||!1}}hasValidationFeedback(){const t=this.host;return!!t.hasFeedback&&(this.stateController.isValidating||this.stateController.validationResult.hasError||this.stateController.validationResult.hasWarning||this.stateController.validationResult.isValid&&t.value&&""!==t.value.trim()&&this.stateController.validationState!==T.Pristine)}renderValidationIcon(){const t=this.host;if(!t.hasFeedback)return"";let i="",e="";return this.stateController.isValidating?(i="hourglass-half",e="validation-loading"):this.stateController.validationResult.hasError?(i="exclamation-circle",e="validation-error"):this.stateController.validationResult.hasWarning?(i="exclamation-triangle",e="validation-warning"):this.stateController.validationResult.isValid&&t.value&&""!==t.value.trim()&&this.stateController.validationState!==T.Pristine&&(i="check-circle",e="validation-success"),i?r`<nr-icon name="${i}" class="validation-icon ${e}" part="validation-icon"></nr-icon>`:""}renderValidationMessage(){const t=this.stateController.validationResult.hasError,i=this.stateController.validationResult.hasWarning&&!t,e=t?this.stateController.validationResult.errorMessage:i?this.stateController.validationResult.warningMessage:"";return e?r`<div class="validation-message ${t?"error":"warning"}" part="validation-message" role="alert" aria-live="polite">${e}</div>`:""}clearDebounceTimer(){this.stateController.clearDebounceTimer()}getValidationRenderState(){return{classes:this.getValidationClasses(),hasValidationFeedback:this.hasValidationFeedback(),isValidating:this.stateController.isValidating,validationResult:this.stateController.validationResult,validationState:this.stateController.validationState}}}
+ */var z=function(t,r,e,i){return new(e||(e=Promise))((function(o,n){function a(t){try{l(i.next(t))}catch(t){n(t)}}function s(t){try{l(i.throw(t))}catch(t){n(t)}}function l(t){var r;t.done?o(t.value):(r=t.value,r instanceof e?r:new e((function(t){t(r)}))).then(a,s)}l((i=i.apply(t,r||[])).next())}))};class E extends ${constructor(t){super(t),this.stateController=new T(this._host)}get validationHost(){return this._host}get isValid(){return this.stateController.isValid}get validationMessage(){return this.stateController.validationMessage}get validationState(){return this.stateController.validationState}get validationResult(){return this.stateController.validationResult}get isValidating(){return this.stateController.isValidating}hostConnected(){this.setupValidationRules()}hostUpdated(){}setupValidationRules(){const t=[],r=this.validationHost;"email"===r.type&&t.push(m()),"url"===r.type&&t.push(b()),r.required&&t.push(h(r.label?`${r.label} is required`:void 0)),r.maxLength&&t.push(v(r.maxLength)),"number"===r.type&&(void 0!==r.min&&t.push(y(Number(r.min))),void 0!==r.max&&t.push(g(Number(r.max))));const e=r.rules||[],i=[...t.filter((t=>!e.some((r=>this.isSameRuleType(t,r))))),...e];JSON.stringify(r.rules)!==JSON.stringify(i)&&(r.rules=i,this.requestUpdate())}validate(){try{this.stateController.setValidationState(S.Pending),this.stateController.setValidating(!0),this.dispatchValidationEvent();if(this.hasAsyncValidators())return this.performAsyncValidation(this.validationHost.value),!0;const t=this.performDetailedValidation(this.validationHost.value);return this.stateController.setValidationResult(t),t.hasError?this.setValidationResult(!1,this.stateController.validationMessage,S.Invalid):t.hasWarning&&this.validationHost.allowWarnings?this.setValidationResult(!0,this.stateController.validationMessage,S.Warning):this.setValidationResult(!0,"",S.Valid),this.stateController.setValidating(!1),this.updateHostValidationState(),t.isValid}catch(t){return this.handleError(t,"validate"),this.stateController.setValidating(!1),this.setValidationResult(!1,"Validation error occurred",S.Invalid),this.updateHostValidationState(),!1}}validateOnChange(){this.stateController.shouldValidateOnChange()&&this.stateController.debounceValidation((()=>{this.validate()}))}validateOnBlur(){this.stateController.shouldValidateOnBlur()&&(this.stateController.clearDebounceTimer(),this.validate())}addRule(t){const r=this.validationHost.rules||[];this.validationHost.rules=[...r,t],this.requestUpdate()}removeRule(t){const r=this.validationHost.rules||[];this.validationHost.rules=r.filter((r=>!t(r))),this.requestUpdate()}clearRules(){this.validationHost.rules=[],this.reset()}hasAsyncValidators(){return(this.validationHost.rules||[]).some((t=>t.asyncValidator||t.validator&&this.isValidatorAsync(t.validator)))}isValidatorAsync(t){const r=t.toString();return r.includes("Promise")||r.includes("async")||r.includes("setTimeout")||r.includes("new Promise")}performAsyncValidation(t){return z(this,void 0,void 0,(function*(){try{this.stateController.setValidating(!0),this.updateHostValidationState();const r=[],e=[],i=this.validationHost.rules||[];for(const o of i)if(!(o.asyncValidator||o.validator&&this.isValidatorAsync(o.validator))){const i=this.validateRule(o,t);i.isValid||(o.warningOnly&&this.validationHost.allowWarnings?e.push(i.message):r.push(i.message))}if(r.length>0)return this.stateController.setValidationResult({isValid:!1,errors:r,warnings:e,hasError:!0,hasWarning:e.length>0,errorMessage:r[0],warningMessage:e[0]}),this.setValidationResult(!1,this.stateController.validationMessage,S.Invalid),this.stateController.setValidating(!1),void this.updateHostValidationState();for(const o of i)if(o.asyncValidator||o.validator&&this.isValidatorAsync(o.validator))try{yield this.validateAsyncRule(o,t)}catch(t){const i=t.message||o.message||"Validation failed";o.warningOnly&&this.validationHost.allowWarnings?e.push(i):r.push(i)}const o=r.length>0,n=e.length>0;this.stateController.setValidationResult({isValid:!o,errors:r,warnings:e,hasError:o,hasWarning:n,errorMessage:r[0],warningMessage:e[0]}),o?this.setValidationResult(!1,this.stateController.validationMessage,S.Invalid):n&&this.validationHost.allowWarnings?this.setValidationResult(!0,this.stateController.validationMessage,S.Warning):this.setValidationResult(!0,"",S.Valid),this.stateController.setValidating(!1),this.updateHostValidationState()}catch(t){this.handleError(t,"performAsyncValidation"),this.stateController.setValidating(!1),this.setValidationResult(!1,"Async validation error occurred",S.Invalid),this.updateHostValidationState()}}))}validateAsyncRule(t,r){return z(this,void 0,void 0,(function*(){if(t.asyncValidator)yield t.asyncValidator(t,r);else if(t.validator){const e=t.validator(t,r);e&&"object"==typeof e&&"then"in e&&(yield e)}}))}reset(){this.stateController.setValidationResult({isValid:!0,errors:[],warnings:[],hasError:!1,hasWarning:!1}),this.stateController.setValidationState(S.Pristine),this.stateController.setValidating(!1),this.updateHostValidationState(),this.dispatchValidationEvent()}getValidationStatus(){return{isValid:this.stateController.validationResult.isValid,isValidating:this.stateController.isValidating,errors:this.stateController.validationResult.errors,warnings:this.stateController.validationResult.warnings,validationResult:this.stateController.validationResult}}setValidationStatus(t){this.stateController.setValidationResult(t),t.hasError?this.setValidationResult(!1,this.stateController.validationMessage,S.Invalid):t.hasWarning?this.setValidationResult(!0,this.stateController.validationMessage,S.Warning):t.isValid?this.setValidationResult(!0,"",S.Valid):this.setValidationResult(!0,"",S.Pristine),this.updateHostValidationState()}performDetailedValidation(t){const r=[],e=[],i=this.validationHost.rules||[];for(const o of i){const i=this.validateRule(o,t);i.isValid||(o.warningOnly&&this.validationHost.allowWarnings?e.push(i.message):r.push(i.message))}const o=r.length>0;return{isValid:!o,errors:r,warnings:e,hasError:o,hasWarning:e.length>0,errorMessage:r[0],warningMessage:e[0]}}validateRule(t,r){if(t.asyncValidator||t.validator&&this.isValidatorAsync(t.validator))return{isValid:!0,message:""};const e=t.transform?t.transform(r):r;if(t.required&&this.isValueEmpty(r))return{isValid:!1,message:t.message||`${this.validationHost.label||"This field"} is required`};if(this.isValueEmpty(r)&&!t.required)return{isValid:!0,message:""};if(t.type){const r=this.validateType(t.type,e);if(!r.isValid)return{isValid:!1,message:t.message||r.message}}if(t.pattern&&!t.pattern.test(e))return{isValid:!1,message:t.message||"Invalid format"};if(void 0!==t.minLength&&e.length<t.minLength)return{isValid:!1,message:t.message||`Minimum length is ${t.minLength} characters`};if(void 0!==t.maxLength&&e.length>t.maxLength)return{isValid:!1,message:t.message||`Maximum length is ${t.maxLength} characters`};if("number"===t.type||"number"===this.validationHost.type){const r=Number(e);if(void 0!==t.min&&r<t.min)return{isValid:!1,message:t.message||`Minimum value is ${t.min}`};if(void 0!==t.max&&r>t.max)return{isValid:!1,message:t.message||`Maximum value is ${t.max}`}}if(t.enum&&!t.enum.includes(e))return{isValid:!1,message:t.message||`Value must be one of: ${t.enum.join(", ")}`};if(t.validator)try{const r=t.validator(t,e);return r&&"object"==typeof r&&"isValid"in r?{isValid:r.isValid,message:r.isValid?"":r.message||t.message||"Validation failed"}:{isValid:!0,message:""}}catch(r){return{isValid:!1,message:t.message||r.message||"Validation failed"}}return{isValid:!0,message:""}}validateType(t,r){switch(t){case"email":return{isValid:p.EMAIL.test(r),message:"Please enter a valid email address"};case"url":return{isValid:p.URL.test(r),message:"Please enter a valid URL"};case"number":case"integer":return{isValid:!isNaN(Number(r))&&("number"===t||Number.isInteger(Number(r))),message:`Please enter a valid ${t}`};case"float":return{isValid:!isNaN(parseFloat(r)),message:"Please enter a valid number"};default:return{isValid:!0,message:""}}}isValueEmpty(t){return null==t||""===t}isSameRuleType(t,r){return t.type===r.type&&t.required===r.required&&!!t.pattern==!!r.pattern}setValidationResult(t,r,e){const i=this.stateController.isValid!==t||this.stateController.validationMessage!==r||this.stateController.validationState!==e;this.stateController.setValidationState(e),this.stateController.setValidationResult({isValid:t,errors:t?[]:[r],warnings:[],hasError:!t,hasWarning:!1,errorMessage:t?"":r,warningMessage:""}),i&&this.dispatchValidationEvent()}updateHostValidationState(){this.dispatchValidationEvent()}dispatchValidationEvent(){const t={isValid:this.stateController.isValid,validationMessage:this.stateController.validationMessage,validationState:this.stateController.validationState,errors:this.stateController.validationResult.errors,warnings:this.stateController.validationResult.warnings,validationResult:this.stateController.validationResult};this.dispatchEvent(new CustomEvent("nr-validation",{detail:t,bubbles:!0,composed:!0}))}getValidationClasses(){const t=this.host,r=this.host;return{valid:this.stateController.validationResult.isValid&&!this.stateController.validationResult.hasWarning,invalid:this.stateController.validationResult.hasError,warning:this.stateController.validationResult.hasWarning&&!this.stateController.validationResult.hasError,validating:this.stateController.isValidating,"has-feedback":r.hasFeedback||!1,touched:t.isTouched||!1,dirty:t.isDirty||!1,required:this.host.required||!1}}hasValidationFeedback(){const t=this.host;return!!t.hasFeedback&&(this.stateController.isValidating||this.stateController.validationResult.hasError||this.stateController.validationResult.hasWarning||this.stateController.validationResult.isValid&&t.value&&""!==t.value.trim()&&this.stateController.validationState!==S.Pristine)}renderValidationIcon(){const t=this.host;if(!t.hasFeedback)return"";let e="",i="";return this.stateController.isValidating?(e="hourglass-half",i="validation-loading"):this.stateController.validationResult.hasError?(e="exclamation-circle",i="validation-error"):this.stateController.validationResult.hasWarning?(e="exclamation-triangle",i="validation-warning"):this.stateController.validationResult.isValid&&t.value&&""!==t.value.trim()&&this.stateController.validationState!==S.Pristine&&(e="check-circle",i="validation-success"),e?r`
+      <nr-icon 
+        name="${e}" 
+        class="validation-icon ${i}"
+        part="validation-icon">
+      </nr-icon>
+    `:""}renderValidationMessage(){const t=this.stateController.validationResult.hasError,e=this.stateController.validationResult.hasWarning&&!t,i=t?this.stateController.validationResult.errorMessage:e?this.stateController.validationResult.warningMessage:"";return i?r`
+      <div class="validation-message ${t?"error":"warning"}" 
+           part="validation-message"
+           role="alert"
+           aria-live="polite">
+        ${i}
+      </div>
+    `:""}clearDebounceTimer(){this.stateController.clearDebounceTimer()}getValidationRenderState(){return{classes:this.getValidationClasses(),hasValidationFeedback:this.hasValidationFeedback(),isValidating:this.stateController.isValidating,validationResult:this.stateController.validationResult,validationState:this.stateController.validationState}}}
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */var E=function(t,r,i,e){return new(i||(i=Promise))((function(a,n){function o(t){try{l(e.next(t))}catch(t){n(t)}}function s(t){try{l(e.throw(t))}catch(t){n(t)}}function l(t){var r;t.done?a(t.value):(r=t.value,r instanceof i?r:new i((function(t){t(r)}))).then(o,s)}l((e=e.apply(t,r||[])).next())}))};class C extends ${constructor(){super(...arguments),this.handleKeyDown=t=>{!this.eventHost.readonly||this.isReadonlyKeyAllowed(t)?"Enter"!==t.key?"number"===this.eventHost.type&&this.handleNumericKeyDown(t):this.dispatchEnterEvent(t):t.preventDefault()},this.handleValueChange=t=>{if(this.eventHost.readonly)return void t.preventDefault();const r=t.target,i=r.value;if(this.eventHost.maxLength&&i.length>this.eventHost.maxLength)return void t.preventDefault();"number"===this.eventHost.type&&i&&this.validateNumericValue(i,t),this.eventHost.value=i;const e=this.eventHost;e.validationController&&"function"==typeof e.validationController.validateOnChange&&e.validationController.validateOnChange(),this.eventHost.dispatchInputEvent("nr-input",{value:this.eventHost.value,target:r,originalEvent:t})},this.handleFocus=t=>{var r;this.setFocusState(!0);const i=t.target;this.restoreCursorPosition(i);const e={focused:!0,cursorPosition:null!==(r=this.getCursorPosition())&&void 0!==r?r:void 0,selectedText:this.getSelectedText()};this.eventHost.dispatchFocusEvent("nr-focus",Object.assign({target:t.target,value:this.eventHost.value},e)),this.eventHost.dispatchFocusEvent("nr-focus-change",e)},this.handleBlur=t=>{var r;this.setFocusState(!1);const i={focused:!1,cursorPosition:null!==(r=this.getCursorPosition())&&void 0!==r?r:void 0,selectedText:this.getSelectedText()},e=this.eventHost;e.validationController&&"function"==typeof e.validationController.validateOnBlur&&e.validationController.validateOnBlur(),this.eventHost.dispatchFocusEvent("nr-blur",Object.assign({target:t.target,value:this.eventHost.value},i)),this.eventHost.dispatchFocusEvent("nr-focus-change",i)},this.handleIconKeydown=t=>{if(!this.isActivationKey(t))return;t.preventDefault();const r=t.target;switch(r.id){case"copy-icon":this.handleCopy();break;case"clear-icon":this.handleClear();break;case"password-icon":this.handleTogglePassword();break;default:r.closest("#number-icons")&&this.handleNumberIconAction(r)}},this.handleCopy=()=>E(this,void 0,void 0,(function*(){if(this.eventHost.withCopy&&!this.eventHost.disabled)try{const t=this.inputElement;if(!t)return;t.select(),yield navigator.clipboard.writeText(t.value),this.eventHost.dispatchActionEvent("nr-copy-success",{value:t.value,action:"copy"})}catch(t){this.handleError(t,"copy"),this.eventHost.dispatchActionEvent("nr-copy-error",{error:t,action:"copy"})}})),this.handleClear=()=>{if(this.eventHost.disabled||this.eventHost.readonly||!this.eventHost.allowClear)return;const t=this.eventHost.value;this.eventHost.value="";const r=this.inputElement;r&&(r.value="",r.focus()),this.eventHost.dispatchActionEvent("nr-clear",{previousValue:t,newValue:this.eventHost.value,target:r,action:"clear"}),this.eventHost.dispatchInputEvent("nr-input",{value:this.eventHost.value,target:r,action:"clear"})},this.handleTogglePassword=()=>{if("password"!==this.eventHost.type)return;const t="password"===this.eventHost.inputType?"text":"password";this.eventHost.inputType=t,this.requestUpdate(),this.eventHost.dispatchActionEvent("nr-password-toggle",{visible:"text"===t,action:"password-toggle"})},this.handleIncrement=()=>{"number"===this.eventHost.type&&this.eventHost.increment&&this.eventHost.increment()},this.handleDecrement=()=>{"number"===this.eventHost.type&&this.eventHost.decrement&&this.eventHost.decrement()}}get eventHost(){return this.host}get inputElement(){var t;return(null===(t=this.eventHost.shadowRoot)||void 0===t?void 0:t.querySelector("#input"))||null}handleNumericKeyDown(t){["Backspace","Delete","Tab","Escape","Enter","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)||t.ctrlKey||t.metaKey||"."!==t.key&&"-"!==t.key&&(/^\d$/.test(t.key)||t.preventDefault())}handleNumberIconAction(t){const r=t.classList.contains("increment")||t.closest(".increment"),i=t.classList.contains("decrement")||t.closest(".decrement");r?this.handleIncrement():i&&this.handleDecrement()}dispatchEnterEvent(t){this.eventHost.dispatchInputEvent("nr-enter",{value:this.eventHost.value,target:t.target,originalEvent:t})}validateNumericValue(t,r){}restoreCursorPosition(t){if(t.dataset.restoreCursor){const r=parseInt(t.dataset.restoreCursor,10);isNaN(r)||t.setSelectionRange(r,r),delete t.dataset.restoreCursor}}setFocusState(t){this.eventHost.hasOwnProperty("focused")&&(this.eventHost.focused=t,this.requestUpdate())}getCursorPosition(){if(this.eventHost.getCursorPosition)return this.eventHost.getCursorPosition();const t=this.inputElement;return t?t.selectionStart:null}getSelectedText(){if(this.eventHost.getSelectedText)return this.eventHost.getSelectedText();const t=this.inputElement;return t&&null!==t.selectionStart&&null!==t.selectionEnd?t.value.substring(t.selectionStart,t.selectionEnd):""}isReadonlyKeyAllowed(t){if(this.eventHost.isReadonlyKeyAllowed)return this.eventHost.isReadonlyKeyAllowed(t);return t.ctrlKey||t.metaKey?["KeyA","KeyC"].includes(t.code):["Tab","Escape","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(t.key)}isActivationKey(t){return this.eventHost.isActivationKey?this.eventHost.isActivationKey(t):"Enter"===t.key||" "===t.key}}
+ */var C=function(t,r,e,i){return new(e||(e=Promise))((function(o,n){function a(t){try{l(i.next(t))}catch(t){n(t)}}function s(t){try{l(i.throw(t))}catch(t){n(t)}}function l(t){var r;t.done?o(t.value):(r=t.value,r instanceof e?r:new e((function(t){t(r)}))).then(a,s)}l((i=i.apply(t,r||[])).next())}))};class A extends ${constructor(){super(...arguments),this.handleKeyDown=t=>{!this.eventHost.readonly||this.isReadonlyKeyAllowed(t)?"Enter"!==t.key?"number"===this.eventHost.type&&this.handleNumericKeyDown(t):this.dispatchEnterEvent(t):t.preventDefault()},this.handleValueChange=t=>{if(this.eventHost.readonly)return void t.preventDefault();const r=t.target,e=r.value;if(this.eventHost.maxLength&&e.length>this.eventHost.maxLength)return void t.preventDefault();"number"===this.eventHost.type&&e&&this.validateNumericValue(e,t),this.eventHost.value=e;const i=this.eventHost;i.validationController&&"function"==typeof i.validationController.validateOnChange&&i.validationController.validateOnChange(),this.eventHost.dispatchInputEvent("nr-input",{value:this.eventHost.value,target:r,originalEvent:t})},this.handleFocus=t=>{var r;this.setFocusState(!0);const e=t.target;this.restoreCursorPosition(e);const i={focused:!0,cursorPosition:null!==(r=this.getCursorPosition())&&void 0!==r?r:void 0,selectedText:this.getSelectedText()};this.eventHost.dispatchFocusEvent("nr-focus",Object.assign({target:t.target,value:this.eventHost.value},i)),this.eventHost.dispatchFocusEvent("nr-focus-change",i)},this.handleBlur=t=>{var r;this.setFocusState(!1);const e={focused:!1,cursorPosition:null!==(r=this.getCursorPosition())&&void 0!==r?r:void 0,selectedText:this.getSelectedText()},i=this.eventHost;i.validationController&&"function"==typeof i.validationController.validateOnBlur&&i.validationController.validateOnBlur(),this.eventHost.dispatchFocusEvent("nr-blur",Object.assign({target:t.target,value:this.eventHost.value},e)),this.eventHost.dispatchFocusEvent("nr-focus-change",e)},this.handleIconKeydown=t=>{if(!this.isActivationKey(t))return;t.preventDefault();const r=t.target;switch(r.id){case"copy-icon":this.handleCopy();break;case"clear-icon":this.handleClear();break;case"password-icon":this.handleTogglePassword();break;default:r.closest("#number-icons")&&this.handleNumberIconAction(r)}},this.handleCopy=()=>C(this,void 0,void 0,(function*(){if(this.eventHost.withCopy&&!this.eventHost.disabled)try{const t=this.inputElement;if(!t)return;t.select(),yield navigator.clipboard.writeText(t.value),this.eventHost.dispatchActionEvent("nr-copy-success",{value:t.value,action:"copy"})}catch(t){this.handleError(t,"copy"),this.eventHost.dispatchActionEvent("nr-copy-error",{error:t,action:"copy"})}})),this.handleClear=()=>{if(this.eventHost.disabled||this.eventHost.readonly||!this.eventHost.allowClear)return;const t=this.eventHost.value;this.eventHost.value="";const r=this.inputElement;r&&(r.value="",r.focus()),this.eventHost.dispatchActionEvent("nr-clear",{previousValue:t,newValue:this.eventHost.value,target:r,action:"clear"}),this.eventHost.dispatchInputEvent("nr-input",{value:this.eventHost.value,target:r,action:"clear"})},this.handleTogglePassword=()=>{if("password"!==this.eventHost.type)return;const t="password"===this.eventHost.inputType?"text":"password";this.eventHost.inputType=t,this.requestUpdate(),this.eventHost.dispatchActionEvent("nr-password-toggle",{visible:"text"===t,action:"password-toggle"})},this.handleIncrement=()=>{"number"===this.eventHost.type&&this.eventHost.increment&&this.eventHost.increment()},this.handleDecrement=()=>{"number"===this.eventHost.type&&this.eventHost.decrement&&this.eventHost.decrement()}}get eventHost(){return this.host}get inputElement(){var t;return(null===(t=this.eventHost.shadowRoot)||void 0===t?void 0:t.querySelector("#input"))||null}handleNumericKeyDown(t){["Backspace","Delete","Tab","Escape","Enter","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)||t.ctrlKey||t.metaKey||"."!==t.key&&"-"!==t.key&&(/^\d$/.test(t.key)||t.preventDefault())}handleNumberIconAction(t){const r=t.classList.contains("increment")||t.closest(".increment"),e=t.classList.contains("decrement")||t.closest(".decrement");r?this.handleIncrement():e&&this.handleDecrement()}dispatchEnterEvent(t){this.eventHost.dispatchInputEvent("nr-enter",{value:this.eventHost.value,target:t.target,originalEvent:t})}validateNumericValue(t,r){}restoreCursorPosition(t){if(t.dataset.restoreCursor){const r=parseInt(t.dataset.restoreCursor,10);isNaN(r)||t.setSelectionRange(r,r),delete t.dataset.restoreCursor}}setFocusState(t){this.eventHost.hasOwnProperty("focused")&&(this.eventHost.focused=t,this.requestUpdate())}getCursorPosition(){if(this.eventHost.getCursorPosition)return this.eventHost.getCursorPosition();const t=this.inputElement;return t?t.selectionStart:null}getSelectedText(){if(this.eventHost.getSelectedText)return this.eventHost.getSelectedText();const t=this.inputElement;return t&&null!==t.selectionStart&&null!==t.selectionEnd?t.value.substring(t.selectionStart,t.selectionEnd):""}isReadonlyKeyAllowed(t){if(this.eventHost.isReadonlyKeyAllowed)return this.eventHost.isReadonlyKeyAllowed(t);return t.ctrlKey||t.metaKey?["KeyA","KeyC"].includes(t.code):["Tab","Escape","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(t.key)}isActivationKey(t){return this.eventHost.isActivationKey?this.eventHost.isActivationKey(t):"Enter"===t.key||" "===t.key}}
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */var A=function(t,r,i,e){for(var a,n=arguments.length,o=n<3?r:null===e?e=Object.getOwnPropertyDescriptor(r,i):e,s=t.length-1;s>=0;s--)(a=t[s])&&(o=(n<3?a(o):n>3?a(r,i,o):a(r,i))||o);return n>3&&o&&Object.defineProperty(r,i,o),o},M=function(t,r,i,e){return new(i||(i=Promise))((function(a,n){function o(t){try{l(e.next(t))}catch(t){n(t)}}function s(t){try{l(e.throw(t))}catch(t){n(t)}}function l(t){var r;t.done?a(t.value):(r=t.value,r instanceof i?r:new i((function(t){t(r)}))).then(o,s)}l((e=e.apply(t,r||[])).next())}))};let N=class extends(_(w(x(l(e))))){constructor(){super(...arguments),this.validationController=new V(this),this.eventController=new C(this),this.disabled=!1,this.readonly=!1,this.state="default",this.value="",this.size="medium",this.variant="underlined",this.type="text",this.placeholder="",this.autocomplete="off",this.withCopy=!1,this.allowClear=!1,this.showCount=!1,this.rules=[],this.validateOnChangeInput=!0,this.validateOnBlurInput=!0,this.hasFeedback=!1,this.allowWarnings=!1,this.validationTrigger="change",this.inputType="",this.hasAddonBefore=!1,this.hasAddonAfter=!1,this.focused=!1,this.requiredComponents=["nr-icon"],this._handleValidationEvent=t=>{const r=t.detail;this.validationMessage=r.validationMessage||"";let i="default";r.validationResult.hasError?i="error":r.validationResult.hasWarning&&this.allowWarnings?i="warning":r.validationResult.isValid&&this.value&&this.hasFeedback&&(i="success"),this.state!==i&&(this.state=i),this.requestUpdate()},this._handleKeyDown=t=>{this.eventController.handleKeyDown(t)},this._valueChange=t=>{this.eventController.handleValueChange(t)},this._focusEvent=t=>{this.eventController.handleFocus(t)},this._blurEvent=t=>{this.eventController.handleBlur(t)},this._handleIconKeydown=t=>{this.eventController.handleIconKeydown(t)}}get _input(){return this.shadowRoot.querySelector("#input")}get characterCountDisplay(){const t=this.value.length;return this.maxLength?`${t}/${this.maxLength}`:`${t}`}get isOverCharacterLimit(){return!!this.maxLength&&this.value.length>this.maxLength}get input(){return this._input}get inputElement(){return this._input}connectedCallback(){super.connectedCallback(),this.addEventListener("nr-validation",this._handleValidationEvent)}disconnectedCallback(){var t,r;super.disconnectedCallback(),this.removeEventListener("nr-validation",this._handleValidationEvent),null===(r=(t=this.validationController).clearDebounceTimer)||void 0===r||r.call(t)}willUpdate(t){super.willUpdate(t),!t.has("type")&&this.inputType||(this.inputType=this.type),(t.has("type")||t.has("min"))&&"number"===this.type&&this.min&&!this.value&&(this.value=this.min),(t.has("type")||t.has("min")||t.has("max")||t.has("step"))&&f.validateNumericProperties(this.type,this.min,this.max,this.step),(t.has("type")||t.has("required")||t.has("maxLength")||t.has("min")||t.has("max"))&&this.validationController.setupValidationRules()}updated(t){if(t.has("step")||t.has("min")||t.has("max")||t.has("maxLength")){const t=this.input;t&&(this.setStep(this.step),this.min?t.setAttribute("min",this.min):t.removeAttribute("min"),this.max?t.setAttribute("max",this.max):t.removeAttribute("max"),this.maxLength?t.setAttribute("maxlength",this.maxLength.toString()):t.removeAttribute("maxlength"))}}firstUpdated(){this._checkInitialSlotContent()}_checkInitialSlotContent(){const t=this.querySelectorAll('[slot="addon-before"]');this.hasAddonBefore=t.length>0;const r=this.querySelectorAll('[slot="addon-after"]');this.hasAddonAfter=r.length>0}_handleSlotChange(t){const r=t.target,i=r.name;"addon-before"===i?this.hasAddonBefore=r.assignedElements().length>0:"addon-after"===i&&(this.hasAddonAfter=r.assignedElements().length>0)}_onCopy(){return M(this,void 0,void 0,(function*(){yield this.eventController.handleCopy()}))}_onClear(){this.eventController.handleClear()}_increment(){this.eventController.handleIncrement()}_decrement(){this.eventController.handleDecrement()}_togglePasswordIcon(){this.eventController.handleTogglePassword()}_getAriaDescribedBy(){var t;const r=[],i=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector('slot[name="helper-text"]');return i&&i.assignedNodes().length>0&&r.push("helper-text"),r.join(" ")||""}validateValue(t){return this.validationController.validate()}addRule(t){this.validationController.addRule(t)}removeRule(t){this.validationController.removeRule(t)}clearRules(){this.validationController.clearRules()}getValidationStatus(){return this.validationController.getValidationStatus()}validateInput(){return M(this,void 0,void 0,(function*(){const t=this.validationController.validate();return this.validationController.isValidating?new Promise((t=>{const r=()=>{this.validationController.isValidating?setTimeout(r,50):t(this.validationController.isValid)};r()})):t}))}setValidationStatus(t){this.validationController.setValidationStatus(t)}getValidationClasses(){return this.validationController.getValidationClasses()}renderValidationIcon(){return this.validationController.renderValidationIcon()}renderValidationMessage(){return this.validationController.renderValidationMessage()}render(){const t=this.getValidationClasses(),i=this.validationController.getValidationRenderState();return r`<slot name="label"></slot><div class="input-wrapper ${Object.entries(t).filter((([,t])=>t)).map((([t])=>t)).join(" ")}" part="input-wrapper" data-theme="${this.currentTheme}" ?data-validating="${i.isValidating}">${k.renderAddonBefore(this.hasAddonBefore,(t=>this._handleSlotChange(t)))}<div data-size="${this.size}" id="input-container" part="input-container">${k.renderPrefix()} <input id="input" part="input" .disabled="${this.disabled}" .readOnly="${this.readonly}" .value="${this.value}" .placeholder="${this.placeholder}" .type="${this.inputType}" .autocomplete="${this.autocomplete}" aria-invalid="${i.validationResult.hasError?"true":"false"}" aria-describedby="${this._getAriaDescribedBy()}" @input="${this._valueChange}" @focus="${this._focusEvent}" @blur="${this._blurEvent}" @keydown="${this._handleKeyDown}"> ${k.renderSuffix()} ${k.renderCopyIcon(this.withCopy,this.disabled,this.readonly,(()=>this._onCopy()),(t=>this._handleIconKeydown(t)))} ${k.renderClearIcon(this.allowClear,this.value,this.disabled,this.readonly,(()=>this._onClear()),(t=>this._handleIconKeydown(t)))} ${i.hasValidationFeedback?this.renderValidationIcon():k.renderStateIcon(this.state)} ${k.renderCalendarIcon(this.state,this.type)} ${k.renderPasswordIcon(this.type,this.inputType,this.disabled,this.readonly,(()=>this._togglePasswordIcon()),(t=>this._handleIconKeydown(t)))} ${k.renderNumberIcons(this.type,this.state,this.disabled,this.readonly,(()=>this._increment()),(()=>this._decrement()),(t=>this._handleIconKeydown(t)))}</div>${k.renderAddonAfter(this.hasAddonAfter,(t=>this._handleSlotChange(t)))}</div><slot name="helper-text"></slot>${this.renderValidationMessage()} ${this.showCount?r`<div class="character-count" part="character-count" ?data-over-limit="${this.isOverCharacterLimit}">${this.characterCountDisplay}</div>`:""}`}};N.styles=d,A([a({type:Boolean,reflect:!0})],N.prototype,"disabled",void 0),A([a({type:Boolean,reflect:!0})],N.prototype,"readonly",void 0),A([a({type:String,reflect:!0})],N.prototype,"state",void 0),A([a({type:String})],N.prototype,"value",void 0),A([a({type:String})],N.prototype,"size",void 0),A([a({type:String,reflect:!0})],N.prototype,"variant",void 0),A([a({reflect:!0})],N.prototype,"type",void 0),A([a({type:String})],N.prototype,"step",void 0),A([a({type:String})],N.prototype,"min",void 0),A([a({type:String})],N.prototype,"max",void 0),A([a({type:String})],N.prototype,"placeholder",void 0),A([a({type:String})],N.prototype,"autocomplete",void 0),A([a({type:String})],N.prototype,"name",void 0),A([a({type:Boolean})],N.prototype,"required",void 0),A([a({type:Boolean,reflect:!0})],N.prototype,"withCopy",void 0),A([a({type:Boolean,reflect:!0})],N.prototype,"allowClear",void 0),A([a({type:Boolean,reflect:!0})],N.prototype,"showCount",void 0),A([a({type:Number})],N.prototype,"maxLength",void 0),A([a({type:Array})],N.prototype,"rules",void 0),A([a({type:Boolean,attribute:"validate-on-change"})],N.prototype,"validateOnChangeInput",void 0),A([a({type:Boolean,attribute:"validate-on-blur"})],N.prototype,"validateOnBlurInput",void 0),A([a({type:Boolean,attribute:"has-feedback"})],N.prototype,"hasFeedback",void 0),A([a({type:Boolean,attribute:"allow-warnings"})],N.prototype,"allowWarnings",void 0),A([a({type:String,attribute:"validation-trigger"})],N.prototype,"validationTrigger",void 0),A([a({type:Number,attribute:"validation-debounce"})],N.prototype,"validationDebounce",void 0),A([a({type:String})],N.prototype,"label",void 0),A([n()],N.prototype,"validationMessage",void 0),A([n()],N.prototype,"inputType",void 0),A([n()],N.prototype,"hasAddonBefore",void 0),A([n()],N.prototype,"hasAddonAfter",void 0),A([n()],N.prototype,"focused",void 0),N=A([o("nr-input")],N);const O="",I=t`:host{display:inline-block;vertical-align:middle;color:var(--nuraly-color-text);background-color:var(--nuraly-color-background);border-color:var(--nuraly-color-border)}button{display:inline-flex;align-items:center;justify-content:center;position:relative;font-family:var(--nuraly-font-family);font-size:.875rem;font-weight:var(--nuraly-font-weight-regular);line-height:1.125rem;letter-spacing:.16px;min-width:5rem;height:3rem;padding:var(--nuraly-spacing-2) var(--nuraly-spacing-4);border:1px solid transparent;border-radius:var(--nuraly-border-radius-button,var(--nuraly-border-radius-medium,0));background-color:var(--nuraly-color-background);color:var(--nuraly-color-text);text-decoration:none;cursor:pointer;transition:all var(--nuraly-transition-fast,.15s) ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:none;text-shadow:none;width:var(--nuraly-button-icon-size,1rem);height:var(--nuraly-button-icon-size,1rem);display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;line-height:1;color:inherit;font-size:var(--nuraly-button-icon-size,1rem)!important;transition:all var(--nuraly-transition-fast,.15s) ease;cursor:inherit;pointer-events:none}&:focus:not(:disabled) nr-icon{opacity:1;filter:brightness(1.1)}&:active:not(:disabled) nr-icon{opacity:.9;transform:scale(.95)}&:hover:not(:disabled) nr-icon{opacity:1}[part=container]{display:flex;align-items:center;justify-content:center;gap:inherit}:host([type=secondary]) button{background-color:var(--nuraly-color-button-secondary);border-color:var(--nuraly-color-button-secondary);color:var(--nuraly-color-button-secondary-text,var(--nuraly-color-text-on-color))}:host([type=default]) button{background-color:var(--nuraly-color-background,#fff);border-color:var(--nuraly-color-border,#d0d0d0);color:var(--nuraly-color-text,#161616)}:host([type=ghost]) button,:host([type=tertiary]){background-color:var(--nuraly-color-button-outline,transparent);border-color:var(--nuraly-color-button-outline-border,var(--nuraly-color-border));color:var(--nuraly-color-button-outline-text,var(--nuraly-color-button-tertiary,var(--nuraly-color-button-primary)))}:host([type=danger]) button{background-color:var(--nuraly-color-button-danger);border-color:var(--nuraly-color-button-danger);color:var(--nuraly-color-button-danger-text,var(--nuraly-color-text-on-color))}:host(:not([size])) button{height:var(--nuraly-size-md);padding:var(--nuraly-spacing-2) var(--nuraly-spacing-4)}:host([size=small]) button{height:var(--nuraly-size-sm);padding:var(--nuraly-spacing-01) var(--nuraly-spacing-03);font-size:.75rem;min-width:4rem}:host([size=medium]) button{height:var(--nuraly-size-md);padding:var(--nuraly-spacing-2) var(--nuraly-spacing-4)}:host([size=large]) button{height:var(--nuraly-size-lg);padding:var(--nuraly-spacing-05) var(--nuraly-spacing-06);font-size:1rem;min-width:6rem}:host([full-width]){width:100%}:host([full-width]) button{width:100%}:host([loading]) button{cursor:not-allowed;opacity:.7}:host([shape=round]) button{border-radius:50%;min-width:auto;width:var(--nuraly-size-md);aspect-ratio:1;padding:0}:host([shape=round][size=small]) button{width:var(--nuraly-size-sm)}:host([shape=round][size=medium]) button{width:var(--nuraly-size-md)}:host([shape=round][size=large]) button{width:var(--nuraly-size-lg)}.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.6);transform:scale(0);animation:ripple-animation .6s linear;pointer-events:none;z-index:1}@keyframes ripple-animation{0%{transform:scale(0);opacity:1}70%{transform:scale(3);opacity:.5}100%{transform:scale(4);opacity:0}}:host([type=primary]) .ripple{background:rgba(255,255,255,.4)}:host([type=secondary]) .ripple{background:rgba(255,255,255,.3)}:host([type=default]) .ripple{background:var(--nuraly-color-text,#161616);opacity:.1}:host([type=ghost]) .ripple,:host([type=tertiary]) .ripple{background:var(--nuraly-color-button-tertiary,#0f62fe);opacity:.2}:host([type=danger]) .ripple{background:rgba(255,255,255,.4)}[data-theme=carbon-dark] :host([type=default]) .ripple{background:var(--nuraly-color-text,#f4f4f4);opacity:.1}[data-theme=carbon-dark] :host([type=ghost]) .ripple,[data-theme=carbon-dark] :host([type=tertiary]) .ripple{background:var(--nuraly-color-button-tertiary,#78a9ff);opacity:.2}[data-theme=carbon-dark] :host([type=primary]) .ripple{background:rgba(22,22,22,.4)}[data-theme=carbon-dark] :host([type=secondary]) .ripple{background:rgba(22,22,22,.3)}[data-theme=carbon-dark] :host([type=danger]) .ripple{background:rgba(22,22,22,.4)}:host([data-theme*=carbon]) button,[data-theme*=carbon] :host button{align-items:center;height:var(--nuraly-button-icon-size,1rem);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;vertical-align:middle;line-height:1}[data-theme=carbon-dark] nr-button button,[data-theme=carbon] nr-button button{align-items:center;height:var(--nuraly-button-icon-size,1rem);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;vertical-align:middle;line-height:1;margin-top:-1px}nr-icon svg{display:block;margin:0 auto}slot#slot{display:inline-block;line-height:inherit}`;
+ */var V=function(t,r,e,i){for(var o,n=arguments.length,a=n<3?r:null===i?i=Object.getOwnPropertyDescriptor(r,e):i,s=t.length-1;s>=0;s--)(o=t[s])&&(a=(n<3?o(a):n>3?o(r,e,a):o(r,e))||a);return n>3&&a&&Object.defineProperty(r,e,a),a},I=function(t,r,e,i){return new(e||(e=Promise))((function(o,n){function a(t){try{l(i.next(t))}catch(t){n(t)}}function s(t){try{l(i.throw(t))}catch(t){n(t)}}function l(t){var r;t.done?o(t.value):(r=t.value,r instanceof e?r:new e((function(t){t(r)}))).then(a,s)}l((i=i.apply(t,r||[])).next())}))};let N=class extends(_(x(w(l(i))))){constructor(){super(...arguments),this.validationController=new E(this),this.eventController=new A(this),this.disabled=!1,this.readonly=!1,this.state="default",this.value="",this.size="medium",this.variant="underlined",this.type="text",this.placeholder="",this.autocomplete="off",this.withCopy=!1,this.allowClear=!1,this.showCount=!1,this.rules=[],this.validateOnChangeInput=!0,this.validateOnBlurInput=!0,this.hasFeedback=!1,this.allowWarnings=!1,this.validationTrigger="change",this.inputType="",this.hasAddonBefore=!1,this.hasAddonAfter=!1,this.focused=!1,this.requiredComponents=["nr-icon"],this._handleValidationEvent=t=>{const r=t.detail;this.validationMessage=r.validationMessage||"";let e="default";r.validationResult.hasError?e="error":r.validationResult.hasWarning&&this.allowWarnings?e="warning":r.validationResult.isValid&&this.value&&this.hasFeedback&&(e="success"),this.state!==e&&(this.state=e),this.requestUpdate()},this._handleKeyDown=t=>{this.eventController.handleKeyDown(t)},this._valueChange=t=>{this.eventController.handleValueChange(t)},this._focusEvent=t=>{this.eventController.handleFocus(t)},this._blurEvent=t=>{this.eventController.handleBlur(t)},this._handleIconKeydown=t=>{this.eventController.handleIconKeydown(t)}}get _input(){return this.shadowRoot.querySelector("#input")}get characterCountDisplay(){const t=this.value.length;return this.maxLength?`${t}/${this.maxLength}`:`${t}`}get isOverCharacterLimit(){return!!this.maxLength&&this.value.length>this.maxLength}get input(){return this._input}get inputElement(){return this._input}connectedCallback(){super.connectedCallback(),this.addEventListener("nr-validation",this._handleValidationEvent)}disconnectedCallback(){var t,r;super.disconnectedCallback(),this.removeEventListener("nr-validation",this._handleValidationEvent),null===(r=(t=this.validationController).clearDebounceTimer)||void 0===r||r.call(t)}willUpdate(t){super.willUpdate(t),!t.has("type")&&this.inputType||(this.inputType=this.type),(t.has("type")||t.has("min"))&&"number"===this.type&&this.min&&!this.value&&(this.value=this.min),(t.has("type")||t.has("min")||t.has("max")||t.has("step"))&&f.validateNumericProperties(this.type,this.min,this.max,this.step),(t.has("type")||t.has("required")||t.has("maxLength")||t.has("min")||t.has("max"))&&this.validationController.setupValidationRules()}updated(t){if(t.has("step")||t.has("min")||t.has("max")||t.has("maxLength")){const t=this.input;t&&(this.setStep(this.step),this.min?t.setAttribute("min",this.min):t.removeAttribute("min"),this.max?t.setAttribute("max",this.max):t.removeAttribute("max"),this.maxLength?t.setAttribute("maxlength",this.maxLength.toString()):t.removeAttribute("maxlength"))}}firstUpdated(){this._checkInitialSlotContent()}_checkInitialSlotContent(){const t=this.querySelectorAll('[slot="addon-before"]');this.hasAddonBefore=t.length>0;const r=this.querySelectorAll('[slot="addon-after"]');this.hasAddonAfter=r.length>0}_handleSlotChange(t){const r=t.target,e=r.name;"addon-before"===e?this.hasAddonBefore=r.assignedElements().length>0:"addon-after"===e&&(this.hasAddonAfter=r.assignedElements().length>0)}_onCopy(){return I(this,void 0,void 0,(function*(){yield this.eventController.handleCopy()}))}_onClear(){this.eventController.handleClear()}_increment(){this.eventController.handleIncrement()}_decrement(){this.eventController.handleDecrement()}_togglePasswordIcon(){this.eventController.handleTogglePassword()}_getAriaDescribedBy(){var t;const r=[],e=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector('slot[name="helper-text"]');return e&&e.assignedNodes().length>0&&r.push("helper-text"),r.join(" ")||""}validateValue(t){return this.validationController.validate()}addRule(t){this.validationController.addRule(t)}removeRule(t){this.validationController.removeRule(t)}clearRules(){this.validationController.clearRules()}getValidationStatus(){return this.validationController.getValidationStatus()}validateInput(){return I(this,void 0,void 0,(function*(){const t=this.validationController.validate();return this.validationController.isValidating?new Promise((t=>{const r=()=>{this.validationController.isValidating?setTimeout(r,50):t(this.validationController.isValid)};r()})):t}))}setValidationStatus(t){this.validationController.setValidationStatus(t)}getValidationClasses(){return this.validationController.getValidationClasses()}renderValidationIcon(){return this.validationController.renderValidationIcon()}renderValidationMessage(){return this.validationController.renderValidationMessage()}render(){const t=this.getValidationClasses(),e=this.validationController.getValidationRenderState();return r`
+      <slot name="label"></slot>
+      <div class="input-wrapper ${Object.entries(t).filter((([,t])=>t)).map((([t])=>t)).join(" ")}" 
+           part="input-wrapper" 
+           data-theme="${this.currentTheme}"
+           ?data-validating="${e.isValidating}">
+        ${k.renderAddonBefore(this.hasAddonBefore,(t=>this._handleSlotChange(t)))}
+        <div data-size=${this.size} id="input-container" part="input-container">
+          ${k.renderPrefix()}
+          <input
+            id="input"
+            part="input"
+            .disabled=${this.disabled}
+            .readOnly=${this.readonly}
+            .value=${this.value}
+            .placeholder=${this.placeholder}
+            .type="${this.inputType}"
+            .autocomplete=${this.autocomplete}
+            aria-invalid=${e.validationResult.hasError?"true":"false"}
+            aria-describedby=${this._getAriaDescribedBy()}
+            @input=${this._valueChange}
+            @focus=${this._focusEvent}
+            @blur=${this._blurEvent}
+            @keydown=${this._handleKeyDown}
+          />
+          ${k.renderSuffix()}
+          ${k.renderCopyIcon(this.withCopy,this.disabled,this.readonly,(()=>this._onCopy()),(t=>this._handleIconKeydown(t)))}
+          ${k.renderClearIcon(this.allowClear,this.value,this.disabled,this.readonly,(()=>this._onClear()),(t=>this._handleIconKeydown(t)))}
+          ${e.hasValidationFeedback?this.renderValidationIcon():k.renderStateIcon(this.state)}
+          ${k.renderCalendarIcon(this.state,this.type)}
+          ${k.renderPasswordIcon(this.type,this.inputType,this.disabled,this.readonly,(()=>this._togglePasswordIcon()),(t=>this._handleIconKeydown(t)))}
+          ${k.renderNumberIcons(this.type,this.state,this.disabled,this.readonly,(()=>this._increment()),(()=>this._decrement()),(t=>this._handleIconKeydown(t)))}
+        </div>
+        ${k.renderAddonAfter(this.hasAddonAfter,(t=>this._handleSlotChange(t)))}
+      </div>
+      <slot name="helper-text"></slot>
+      ${this.renderValidationMessage()}
+      ${this.showCount?r`
+        <div class="character-count" part="character-count" ?data-over-limit=${this.isOverCharacterLimit}>
+          ${this.characterCountDisplay}
+        </div>
+      `:""}
+    `}};N.styles=d,V([o({type:Boolean,reflect:!0})],N.prototype,"disabled",void 0),V([o({type:Boolean,reflect:!0})],N.prototype,"readonly",void 0),V([o({type:String,reflect:!0})],N.prototype,"state",void 0),V([o({type:String})],N.prototype,"value",void 0),V([o({type:String})],N.prototype,"size",void 0),V([o({type:String,reflect:!0})],N.prototype,"variant",void 0),V([o({reflect:!0})],N.prototype,"type",void 0),V([o({type:String})],N.prototype,"step",void 0),V([o({type:String})],N.prototype,"min",void 0),V([o({type:String})],N.prototype,"max",void 0),V([o({type:String})],N.prototype,"placeholder",void 0),V([o({type:String})],N.prototype,"autocomplete",void 0),V([o({type:String})],N.prototype,"name",void 0),V([o({type:Boolean})],N.prototype,"required",void 0),V([o({type:Boolean,reflect:!0})],N.prototype,"withCopy",void 0),V([o({type:Boolean,reflect:!0})],N.prototype,"allowClear",void 0),V([o({type:Boolean,reflect:!0})],N.prototype,"showCount",void 0),V([o({type:Number})],N.prototype,"maxLength",void 0),V([o({type:Array})],N.prototype,"rules",void 0),V([o({type:Boolean,attribute:"validate-on-change"})],N.prototype,"validateOnChangeInput",void 0),V([o({type:Boolean,attribute:"validate-on-blur"})],N.prototype,"validateOnBlurInput",void 0),V([o({type:Boolean,attribute:"has-feedback"})],N.prototype,"hasFeedback",void 0),V([o({type:Boolean,attribute:"allow-warnings"})],N.prototype,"allowWarnings",void 0),V([o({type:String,attribute:"validation-trigger"})],N.prototype,"validationTrigger",void 0),V([o({type:Number,attribute:"validation-debounce"})],N.prototype,"validationDebounce",void 0),V([o({type:String})],N.prototype,"label",void 0),V([n()],N.prototype,"validationMessage",void 0),V([n()],N.prototype,"inputType",void 0),V([n()],N.prototype,"hasAddonBefore",void 0),V([n()],N.prototype,"hasAddonAfter",void 0),V([n()],N.prototype,"focused",void 0),N=V([a("nr-input")],N);const M="",O=t`
+  :host {
+    display: inline-block;
+    vertical-align: middle;
+    
+    /* Force CSS custom property inheritance to ensure theme switching works properly */
+    color: var(--nuraly-color-text);
+    background-color: var(--nuraly-color-background);
+    border-color: var(--nuraly-color-border);
+    
+    /* Ensure clean state transitions when theme changes */
+    * {
+      transition: all var(--nuraly-transition-fast, 0.15s) ease;
+    }
+  }
+
+  /* Force re-evaluation of theme-dependent properties on theme change */
+  :host([data-theme]) {
+    color: inherit;
+    background-color: inherit;
+  }
+
+  button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    font-family: var(--nuraly-font-family);
+    font-size: 0.875rem;
+    font-weight: var(--nuraly-font-weight-regular);
+    line-height: 1.125rem;
+    letter-spacing: 0.16px;
+    min-width: 5rem;
+    height: 3rem;
+    padding: var(--nuraly-spacing-2) var(--nuraly-spacing-4);
+    border: 1px solid transparent;
+    border-radius: var(--nuraly-border-radius-button, var(--nuraly-border-radius-medium, 0));
+    background-color: var(--nuraly-color-background);
+    color: var(--nuraly-color-text);
+    text-decoration: none;
+    cursor: pointer;
+    transition: all var(--nuraly-transition-fast, 0.15s) ease;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    /* Reset any inherited styles that might interfere with theme switching */
+    box-shadow: none;
+    text-shadow: none;
+    
+    &:focus {
+      outline: var(--nuraly-focus-outline);
+      outline-offset: var(--nuraly-focus-outline-offset);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      /* Remove generic opacity - use specific disabled colors instead */
+    }
+
+    /* Icon styling */
+    nr-icon {
+      flex-shrink: 0;
+      width: var(--nuraly-button-icon-size, 1rem);
+      height: var(--nuraly-button-icon-size, 1rem);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      /* Better text alignment */
+      vertical-align: middle;
+      line-height: 1;
+      /* Ensure icon inherits text color */
+      color: inherit;
+      /* Override any size attribute with CSS variable */
+      font-size: var(--nuraly-button-icon-size, 1rem) !important;
+      transition: all var(--nuraly-transition-fast, 0.15s) ease;
+      /* Inherit cursor from button */
+      cursor: inherit;
+      /* Prevent icon from being focusable */
+      pointer-events: none;
+    }
+
+    /* Icon focus state */
+    &:focus:not(:disabled) nr-icon {
+      opacity: 1;
+      filter: brightness(1.1);
+    }
+
+    /* Icon active state */
+    &:active:not(:disabled) nr-icon {
+      opacity: 0.9;
+      transform: scale(0.95);
+    }
+
+    /* Icon hover state */
+    &:hover:not(:disabled) nr-icon {
+      opacity: 1;
+    }
+
+    /* Icon spacing - use gap for cleaner spacing */
+    gap: 0.5rem;
+    
+    /* Ensure proper alignment of content */
+    #container, [part="container"] {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: inherit;
+    }
+  }
+
+  /* Primary Button - Carbon Design System compliant */
+  :host([type="primary"]) button {
+    background-color: var(--nuraly-color-button-primary);
+    border-color: var(--nuraly-color-button-primary);
+    color: var(--nuraly-color-button-primary-text, var(--nuraly-color-text-on-color));
+
+    &:hover:not(:disabled) {
+      background-color: var(--nuraly-color-button-primary-hover);
+      border-color: var(--nuraly-color-button-primary-hover);
+      color: var(--nuraly-color-button-primary-text-hover, var(--nuraly-color-text-on-color));
+    }
+
+    &:active:not(:disabled) {
+      background-color: var(--nuraly-color-button-primary-active);
+      border-color: var(--nuraly-color-button-primary-active);
+      color: var(--nuraly-color-button-primary-text-active, var(--nuraly-color-text-on-color));
+    }
+
+    &:focus:not(:disabled) {
+      outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));
+      outline-offset: 2px;
+      box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
+    }
+
+    &:disabled {
+      background-color: var(--nuraly-color-button-disabled);
+      border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));
+      color: var(--nuraly-color-button-disabled-text);
+      cursor: not-allowed;
+      opacity: 1; /* Reset opacity for proper disabled state */
+    }
+  }
+
+  /* Secondary Button - Carbon Design System compliant */
+  :host([type="secondary"]) button {
+    background-color: var(--nuraly-color-button-secondary);
+    border-color: var(--nuraly-color-button-secondary);
+    color: var(--nuraly-color-button-secondary-text, var(--nuraly-color-text-on-color));
+
+    &:hover:not(:disabled) {
+      background-color: var(--nuraly-color-button-secondary-hover);
+      border-color: var(--nuraly-color-button-secondary-hover);
+      color: var(--nuraly-color-button-secondary-text-hover, var(--nuraly-color-text-on-color));
+    }
+
+    &:active:not(:disabled) {
+      background-color: var(--nuraly-color-button-secondary-active);
+      border-color: var(--nuraly-color-button-secondary-active);
+      color: var(--nuraly-color-button-secondary-text-active, var(--nuraly-color-text-on-color));
+    }
+
+    &:focus:not(:disabled) {
+      outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));
+      outline-offset: 2px;
+      box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
+    }
+
+    &:disabled {
+      background-color: var(--nuraly-color-button-disabled);
+      border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));
+      color: var(--nuraly-color-button-disabled-text);
+      cursor: not-allowed;
+      opacity: 1; /* Reset opacity for proper disabled state */
+    }
+  }
+
+  /* Default Button - Clean white/light style with defined border */
+  :host([type="default"]) button {
+    background-color: var(--nuraly-color-background, #ffffff);
+    border-color: var(--nuraly-color-border, #d0d0d0);
+    color: var(--nuraly-color-text, #161616);
+
+    &:hover:not(:disabled) {
+      background-color: var(--nuraly-color-background-hover, #f4f4f4);
+      border-color: var(--nuraly-color-border-hover, #a8a8a8);
+      color: var(--nuraly-color-text, #161616);
+    }
+
+    &:active:not(:disabled) {
+      background-color: var(--nuraly-color-background-active, #e0e0e0);
+      border-color: var(--nuraly-color-border-active, #8d8d8d);
+      color: var(--nuraly-color-text, #161616);
+    }
+
+    &:focus:not(:disabled) {
+      outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));
+      outline-offset: 2px;
+      box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
+    }
+
+    &:disabled {
+      background-color: var(--nuraly-color-button-disabled, #f4f4f4);
+      border-color: var(--nuraly-color-button-disabled-border, #c6c6c6);
+      color: var(--nuraly-color-button-disabled-text, #c6c6c6);
+      cursor: not-allowed;
+      opacity: 1; /* Reset opacity for proper disabled state */
+    }
+  }
+
+  /* Tertiary/Ghost Button - Carbon Design System compliant */
+  :host([type="tertiary"]), :host([type="ghost"]) button {
+    background-color: var(--nuraly-color-button-outline, transparent);
+    border-color: var(--nuraly-color-button-outline-border, var(--nuraly-color-border));
+    color: var(--nuraly-color-button-outline-text, var(--nuraly-color-button-tertiary, var(--nuraly-color-button-primary)));
+
+    &:hover:not(:disabled) {
+      background-color: var(--nuraly-color-button-outline-hover, var(--nuraly-color-background-hover));
+      border-color: var(--nuraly-color-button-outline-border-hover, var(--nuraly-color-button-tertiary-hover, var(--nuraly-color-button-primary)));
+      color: var(--nuraly-color-button-outline-text-hover, var(--nuraly-color-button-tertiary-hover, var(--nuraly-color-button-primary-hover)));
+    }
+
+    &:active:not(:disabled) {
+      background-color: var(--nuraly-color-button-outline-active, var(--nuraly-color-background-active));
+      border-color: var(--nuraly-color-button-outline-border-active, var(--nuraly-color-button-tertiary-active, var(--nuraly-color-button-primary-active)));
+      color: var(--nuraly-color-button-outline-text-active, var(--nuraly-color-button-tertiary-active, var(--nuraly-color-button-primary-active)));
+    }
+
+    &:focus:not(:disabled) {
+      outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));
+      outline-offset: 2px;
+      box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
+    }
+
+    &:disabled {
+      background-color: transparent;
+      border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));
+      color: var(--nuraly-color-button-disabled-text);
+      cursor: not-allowed;
+      opacity: 1; /* Reset opacity for proper disabled state */
+    }
+  }
+
+  /* Danger Button - Carbon Design System compliant */
+  :host([type="danger"]) button {
+    background-color: var(--nuraly-color-button-danger);
+    border-color: var(--nuraly-color-button-danger);
+    color: var(--nuraly-color-button-danger-text, var(--nuraly-color-text-on-color));
+
+    &:hover:not(:disabled) {
+      background-color: var(--nuraly-color-button-danger-hover);
+      border-color: var(--nuraly-color-button-danger-hover);
+      color: var(--nuraly-color-button-danger-text-hover, var(--nuraly-color-text-on-color));
+    }
+
+    &:active:not(:disabled) {
+      background-color: var(--nuraly-color-button-danger-active);
+      border-color: var(--nuraly-color-button-danger-active);
+      color: var(--nuraly-color-button-danger-text-active, var(--nuraly-color-text-on-color));
+    }
+
+    &:focus:not(:disabled) {
+      outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));
+      outline-offset: 2px;
+      box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
+    }
+
+    &:disabled {
+      background-color: var(--nuraly-color-button-disabled);
+      border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));
+      color: var(--nuraly-color-button-disabled-text);
+      cursor: not-allowed;
+      opacity: 1; /* Reset opacity for proper disabled state */
+    }
+  }
+
+  /* Default size when no size attribute is provided (medium) */
+  :host(:not([size])) button {
+    height: var(--nuraly-size-md);
+    padding: var(--nuraly-spacing-2) var(--nuraly-spacing-4);
+  }
+
+  /* Size variants */
+  :host([size="small"]) button {
+    height: var(--nuraly-size-sm);
+    padding: var(--nuraly-spacing-01) var(--nuraly-spacing-03);
+    font-size: 0.75rem;
+    min-width: 4rem;
+  }
+
+  :host([size="medium"]) button {
+    height: var(--nuraly-size-md);
+    padding: var(--nuraly-spacing-2) var(--nuraly-spacing-4);
+  }
+
+  :host([size="large"]) button {
+    height: var(--nuraly-size-lg);
+    padding: var(--nuraly-spacing-05) var(--nuraly-spacing-06);
+    font-size: 1rem;
+    min-width: 6rem;
+  }
+
+  /* Full width */
+  :host([full-width]) {
+    width: 100%;
+  }
+
+  :host([full-width]) button {
+    width: 100%;
+  }
+
+  /* Loading state */
+  :host([loading]) button {
+    cursor: not-allowed;
+    opacity: 0.7;
+  }
+
+  /* Shape variants */
+  :host([shape="round"]) button {
+    border-radius: 50%;
+    min-width: auto;
+    width: var(--nuraly-size-md);
+    aspect-ratio: 1;
+    padding: 0;
+  }
+
+  :host([shape="round"][size="small"]) button {
+    width: var(--nuraly-size-sm);
+  }
+
+  :host([shape="round"][size="medium"]) button {
+    width: var(--nuraly-size-md);
+  }
+
+  :host([shape="round"][size="large"]) button {
+    width: var(--nuraly-size-lg);
+  }
+
+  /* Enhanced Ripple Effect Animation - Theme-aware */
+  .ripple {
+    position: absolute;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.6);
+    transform: scale(0);
+    animation: ripple-animation 0.6s linear;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  @keyframes ripple-animation {
+    0% {
+      transform: scale(0);
+      opacity: 1;
+    }
+    70% {
+      transform: scale(3);
+      opacity: 0.5;
+    }
+    100% {
+      transform: scale(4);
+      opacity: 0;
+    }
+  }
+
+  /* Ripple effect for different button types - Carbon Design System compliant */
+  :host([type="primary"]) .ripple {
+    background: rgba(255, 255, 255, 0.4);
+  }
+
+  :host([type="secondary"]) .ripple {
+    background: rgba(255, 255, 255, 0.3);
+  }
+
+  :host([type="default"]) .ripple {
+    background: var(--nuraly-color-text, #161616);
+    opacity: 0.1;
+  }
+
+  :host([type="ghost"]) .ripple,
+  :host([type="tertiary"]) .ripple {
+    background: var(--nuraly-color-button-tertiary, #0f62fe);
+    opacity: 0.2;
+  }
+
+  :host([type="danger"]) .ripple {
+    background: rgba(255, 255, 255, 0.4);
+  }
+
+  /* Theme-specific ripple adjustments for dark theme */
+  [data-theme="carbon-dark"] :host([type="default"]) .ripple {
+    background: var(--nuraly-color-text, #f4f4f4);
+    opacity: 0.1;
+  }
+
+  [data-theme="carbon-dark"] :host([type="ghost"]) .ripple,
+  [data-theme="carbon-dark"] :host([type="tertiary"]) .ripple {
+    background: var(--nuraly-color-button-tertiary, #78a9ff);
+    opacity: 0.2;
+  }
+
+  [data-theme="carbon-dark"] :host([type="primary"]) .ripple {
+    background: rgba(22, 22, 22, 0.4); /* Dark ripple for light buttons */
+  }
+
+  [data-theme="carbon-dark"] :host([type="secondary"]) .ripple {
+    background: rgba(22, 22, 22, 0.3); /* Dark ripple for light buttons */
+  }
+
+  [data-theme="carbon-dark"] :host([type="danger"]) .ripple {
+    background: rgba(22, 22, 22, 0.4); /* Dark ripple for light buttons */
+  }
+
+  /* ========================================
+   * CARBON THEME SPECIFIC STYLING
+   * Enhanced padding and icon centering for Carbon Design System
+   * ======================================== */
+  
+  /* Carbon theme button styling - apply to all carbon themes */
+  :host([data-theme*="carbon"]) button,
+  [data-theme*="carbon"] :host button {
+    /* Better baseline alignment for icon and text */
+    align-items: center;
+    
+    /* Enhanced icon alignment and spacing for Carbon */
+    nr-icon {
+      width: var(--nuraly-button-icon-size, 1rem);
+      height: var(--nuraly-button-icon-size, 1rem);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      /* Perfect vertical alignment with text baseline */
+      vertical-align: middle;
+      line-height: 1;
+    }
+    
+    /* Icon spacing for Carbon theme - improved approach */
+    gap: var(--nuraly-button-icon-spacing, var(--nuraly-spacing-03, 0.5rem));
+  }
+  
+  /* Specific Carbon theme selectors for better targeting */
+  [data-theme="carbon-light"] nr-button button,
+  [data-theme="carbon-dark"] nr-button button,
+  [data-theme="carbon"] nr-button button {
+    /* Better baseline alignment for icon and text */
+    align-items: center;
+    
+    /* Enhanced icon alignment and spacing for Carbon */
+    nr-icon {
+      width: var(--nuraly-button-icon-size, 1rem);
+      height: var(--nuraly-button-icon-size, 1rem);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      /* Perfect vertical alignment with text baseline */
+      vertical-align: middle;
+      line-height: 1;
+      /* Slight adjustment for perfect optical centering */
+      margin-top: -1px;
+    }
+    
+    /* Target the SVG inside nr-icon for better alignment */
+    nr-icon svg {
+      display: block;
+      margin: 0 auto;
+    }
+    
+    /* Icon spacing for Carbon theme */
+    gap: var(--nuraly-button-icon-spacing, var(--nuraly-spacing-03, 0.5rem));
+    
+    /* Ensure text is also properly centered */
+    span#container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      line-height: 1;
+    }
+    
+    /* Ensure slot content aligns properly */
+    slot#slot {
+      display: inline-block;
+      line-height: inherit;
+    }
+  }
+`;
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
@@ -56,7 +1492,7 @@ class R{constructor(t){this._host=t,this._host.addController(this)}get host(){re
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */class H extends R{createRipple(t){try{if(!this.host.ripple||this.host.disabled)return;const r=t.currentTarget,i=r.getBoundingClientRect(),e=2*Math.max(i.width,i.height),a=t.clientX-i.left-e/2,n=t.clientY-i.top-e/2,o=document.createElement("span");o.className="ripple",o.style.width=o.style.height=e+"px",o.style.left=a+"px",o.style.top=n+"px";r.querySelectorAll(".ripple").forEach((t=>t.remove())),r.appendChild(o),setTimeout((()=>{o.remove()}),600)}catch(t){this.handleError(t,"createRipple")}}handleRippleClick(t){try{this.createRipple(t),this.dispatchEvent(new CustomEvent("button-click",{detail:{disabled:this.host.disabled,timestamp:Date.now(),coordinates:{x:t.clientX,y:t.clientY}},bubbles:!0,composed:!0}))}catch(t){this.handleError(t,"handleRippleClick")}}}
+ */class D extends R{createRipple(t){try{if(!this.host.ripple||this.host.disabled)return;const r=t.currentTarget,e=r.getBoundingClientRect(),i=2*Math.max(e.width,e.height),o=t.clientX-e.left-i/2,n=t.clientY-e.top-i/2,a=document.createElement("span");a.className="ripple",a.style.width=a.style.height=i+"px",a.style.left=o+"px",a.style.top=n+"px";r.querySelectorAll(".ripple").forEach((t=>t.remove())),r.appendChild(a),setTimeout((()=>{a.remove()}),600)}catch(t){this.handleError(t,"createRipple")}}handleRippleClick(t){try{this.createRipple(t),this.dispatchEvent(new CustomEvent("button-click",{detail:{disabled:this.host.disabled,timestamp:Date.now(),coordinates:{x:t.clientX,y:t.clientY}},bubbles:!0,composed:!0}))}catch(t){this.handleError(t,"handleRippleClick")}}}
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
@@ -66,41 +1502,879 @@ class R{constructor(t){this._host=t,this._host.addController(this)}get host(){re
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */class D extends R{isLinkType(){return"link"===this.host.type&&!!this.host.href}getElementTag(){return this.isLinkType()?"a":"button"}getLinkAttributes(){try{const t={};return this.isLinkType()?(t.href=this.host.href,this.host.target&&(t.target=this.host.target,"_blank"===this.host.target&&(t.rel="noopener noreferrer")),t.role="link"):t.role="button",t}catch(t){return this.handleError(t,"getLinkAttributes"),{role:"button"}}}handleLinkNavigation(t){try{this.isLinkType()&&this.dispatchEvent(new CustomEvent("link-navigation",{detail:{href:this.host.href,target:this.host.target,timestamp:Date.now(),originalEvent:t},bubbles:!0,composed:!0}))}catch(t){this.handleError(t,"handleLinkNavigation")}}}
+ */class H extends R{isLinkType(){return"link"===this.host.type&&!!this.host.href}getElementTag(){return this.isLinkType()?"a":"button"}getLinkAttributes(){try{const t={};return this.isLinkType()?(t.href=this.host.href,this.host.target&&(t.target=this.host.target,"_blank"===this.host.target&&(t.rel="noopener noreferrer")),t.role="link"):t.role="button",t}catch(t){return this.handleError(t,"getLinkAttributes"),{role:"button"}}}handleLinkNavigation(t){try{this.isLinkType()&&this.dispatchEvent(new CustomEvent("link-navigation",{detail:{href:this.host.href,target:this.host.target,timestamp:Date.now(),originalEvent:t},bubbles:!0,composed:!0}))}catch(t){this.handleError(t,"handleLinkNavigation")}}}
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */var U=function(t,r,i,e){for(var a,n=arguments.length,o=n<3?r:null===e?e=Object.getOwnPropertyDescriptor(r,i):e,s=t.length-1;s>=0;s--)(a=t[s])&&(o=(n<3?a(o):n>3?a(r,i,o):a(r,i))||o);return n>3&&o&&Object.defineProperty(r,i,o),o};let j=class extends(l(e)){constructor(){super(...arguments),this.disabled=!1,this.loading=!1,this.size=O,this.type="default",this.shape="default",this.block=!1,this.dashed=!1,this.icon=[],this.iconPosition="left",this.href=O,this.target=O,this.ripple=!0,this.buttonAriaLabel=O,this.ariaDescribedBy=O,this.htmlType=O,this.requiredComponents=["nr-icon"],this.rippleController=new H(this),this.keyboardController=new P(this),this.linkController=new D(this)}connectedCallback(){super.connectedCallback(),this.validateDependencies()}getCommonAttributes(){return{"data-type":this.type,"data-shape":this.shape,"data-size":this.size||i,"data-state":this.loading?"loading":i,"data-theme":this.currentTheme,"data-block":this.block?"true":i,class:this.dashed?"button-dashed":"","aria-disabled":this.disabled?"true":"false","aria-label":this.buttonAriaLabel||i,"aria-describedby":this.ariaDescribedBy||i,tabindex:this.disabled?"-1":"0"}}renderIcon(t){if(!this.isComponentAvailable("nr-icon")){const r="string"==typeof t?t:t.name;return console.warn(`[nr-button] Icon component 'nr-icon' not available. Icon "${r}" will not render. Ensure the icon component is imported and registered.`),i}const e=()=>{switch(this.size){case"small":return"small";case"medium":default:return"medium";case"large":return"large"}};if("string"==typeof t){const i=e();return r`<nr-icon name="${t}" size="${c(i)}"></nr-icon>`}const{name:a,type:n="solid",size:o,color:s,alt:l}=t,u=o||e();return r`<nr-icon name="${a}" type="${n}" alt="${l||""}" size="${c(u)}" color="${s||""}"></nr-icon>`}handleClick(t){this.disabled?t.preventDefault():(this.rippleController.handleRippleClick(t),this.linkController.isLinkType()&&this.linkController.handleLinkNavigation(t),this.dispatchEventWithMetadata("button-clicked",{type:this.type,disabled:this.disabled,loading:this.loading,href:this.href||null}))}handleKeydown(t){this.keyboardController.handleKeydown(t)}getResolvedLeftIcon(){var t,r;return this.iconLeft?this.iconLeft:(null===(t=this.icons)||void 0===t?void 0:t.left)?this.icons.left:(null===(r=this.icon)||void 0===r?void 0:r.length)>0?this.icon[0]:void 0}getResolvedRightIcon(){var t,r;return this.iconRight?this.iconRight:(null===(t=this.icons)||void 0===t?void 0:t.right)?this.icons.right:2===(null===(r=this.icon)||void 0===r?void 0:r.length)?this.icon[1]:void 0}render(){const t=this.linkController.getElementTag(),e=this.getCommonAttributes(),a=this.linkController.getLinkAttributes(),n=this.getResolvedLeftIcon(),o=this.getResolvedRightIcon(),s=r`<span id="container" part="container">${n?this.renderIcon(n):i}<slot id="slot"></slot>${o?this.renderIcon(o):i}</span>`;return"a"===t?r`<a href="${a.href}" target="${a.target||i}" rel="${a.rel||i}" role="${a.role}" data-type="${e["data-type"]}" data-shape="${e["data-shape"]}" data-size="${e["data-size"]}" data-state="${e["data-state"]}" data-theme="${e["data-theme"]}" data-block="${e["data-block"]}" class="${e.class}" aria-disabled="${this.disabled}" aria-label="${this.buttonAriaLabel||i}" aria-describedby="${this.ariaDescribedBy||i}" tabindex="${this.disabled?-1:0}" @click="${this.handleClick}" @keydown="${this.handleKeydown}">${s}</a>`:r`<button ?disabled="${this.disabled}" type="${this.htmlType||"button"}" role="${a.role}" data-type="${e["data-type"]}" data-shape="${e["data-shape"]}" data-size="${e["data-size"]}" data-state="${e["data-state"]}" data-theme="${e["data-theme"]}" data-block="${e["data-block"]}" class="${e.class}" aria-disabled="${this.disabled}" aria-label="${this.buttonAriaLabel||i}" aria-describedby="${this.ariaDescribedBy||i}" tabindex="${this.disabled?-1:0}" @click="${this.handleClick}" @keydown="${this.handleKeydown}">${s}</button>`}};
+ */var U=function(t,r,e,i){for(var o,n=arguments.length,a=n<3?r:null===i?i=Object.getOwnPropertyDescriptor(r,e):i,s=t.length-1;s>=0;s--)(o=t[s])&&(a=(n<3?o(a):n>3?o(r,e,a):o(r,e))||a);return n>3&&a&&Object.defineProperty(r,e,a),a};let B=class extends(l(i)){constructor(){super(...arguments),this.disabled=!1,this.loading=!1,this.size=M,this.type="default",this.shape="default",this.block=!1,this.dashed=!1,this.icon=[],this.iconPosition="left",this.href=M,this.target=M,this.ripple=!0,this.buttonAriaLabel=M,this.ariaDescribedBy=M,this.htmlType=M,this.requiredComponents=["nr-icon"],this.rippleController=new D(this),this.keyboardController=new P(this),this.linkController=new H(this)}connectedCallback(){super.connectedCallback(),this.validateDependencies()}getCommonAttributes(){return{"data-type":this.type,"data-shape":this.shape,"data-size":this.size||e,"data-state":this.loading?"loading":e,"data-theme":this.currentTheme,"data-block":this.block?"true":e,class:this.dashed?"button-dashed":"","aria-disabled":this.disabled?"true":"false","aria-label":this.buttonAriaLabel||e,"aria-describedby":this.ariaDescribedBy||e,tabindex:this.disabled?"-1":"0"}}renderIcon(t){if(!this.isComponentAvailable("nr-icon")){const r="string"==typeof t?t:t.name;return console.warn(`[nr-button] Icon component 'nr-icon' not available. Icon "${r}" will not render. Ensure the icon component is imported and registered.`),e}const i=()=>{switch(this.size){case"small":return"small";case"medium":default:return"medium";case"large":return"large"}};if("string"==typeof t){const e=i();return r`<nr-icon name=${t} size=${c(e)}></nr-icon>`}const{name:o,type:n="solid",size:a,color:s,alt:l}=t,u=a||i();return r`<nr-icon 
+      name=${o}
+      type=${n}
+      alt=${l||""}
+      size=${c(u)}
+      color=${s||""}
+    ></nr-icon>`}handleClick(t){this.disabled?t.preventDefault():(this.rippleController.handleRippleClick(t),this.linkController.isLinkType()&&this.linkController.handleLinkNavigation(t),this.dispatchEventWithMetadata("button-clicked",{type:this.type,disabled:this.disabled,loading:this.loading,href:this.href||null}))}handleKeydown(t){this.keyboardController.handleKeydown(t)}getResolvedLeftIcon(){var t,r;return this.iconLeft?this.iconLeft:(null===(t=this.icons)||void 0===t?void 0:t.left)?this.icons.left:(null===(r=this.icon)||void 0===r?void 0:r.length)>0?this.icon[0]:void 0}getResolvedRightIcon(){var t,r;return this.iconRight?this.iconRight:(null===(t=this.icons)||void 0===t?void 0:t.right)?this.icons.right:2===(null===(r=this.icon)||void 0===r?void 0:r.length)?this.icon[1]:void 0}render(){const t=this.linkController.getElementTag(),i=this.getCommonAttributes(),o=this.linkController.getLinkAttributes(),n=this.getResolvedLeftIcon(),a=this.getResolvedRightIcon(),s=r`
+      <span id="container" part="container">
+        ${n?this.renderIcon(n):e}
+        <slot id="slot"></slot>
+        ${a?this.renderIcon(a):e}
+      </span>
+    `;return"a"===t?r`
+        <a
+          href="${o.href}"
+          target="${o.target||e}"
+          rel="${o.rel||e}"
+          role="${o.role}"
+          data-type="${i["data-type"]}"
+          data-shape="${i["data-shape"]}"
+          data-size="${i["data-size"]}"
+          data-state="${i["data-state"]}"
+          data-theme="${i["data-theme"]}"
+          data-block="${i["data-block"]}"
+          class="${i.class}"
+          aria-disabled="${this.disabled}"
+          aria-label="${this.buttonAriaLabel||e}"
+          aria-describedby="${this.ariaDescribedBy||e}"
+          tabindex="${this.disabled?-1:0}"
+          @click="${this.handleClick}"
+          @keydown="${this.handleKeydown}"
+        >
+          ${s}
+        </a>
+      `:r`
+      <button
+        ?disabled="${this.disabled}"
+        type="${this.htmlType||"button"}"
+        role="${o.role}"
+        data-type="${i["data-type"]}"
+        data-shape="${i["data-shape"]}"
+        data-size="${i["data-size"]}" 
+        data-state="${i["data-state"]}"
+        data-theme="${i["data-theme"]}"
+        data-block="${i["data-block"]}"
+        class="${i.class}"
+        aria-disabled="${this.disabled}"
+        aria-label="${this.buttonAriaLabel||e}"
+        aria-describedby="${this.ariaDescribedBy||e}"
+        tabindex="${this.disabled?-1:0}"
+        @click="${this.handleClick}"
+        @keydown="${this.handleKeydown}"
+      >
+        ${s}
+      </button>
+    `}};
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
  */
-var B,L,F,q,K,W,Z,Y;j.styles=I,U([a({type:Boolean})],j.prototype,"disabled",void 0),U([a({type:Boolean})],j.prototype,"loading",void 0),U([a({type:String})],j.prototype,"size",void 0),U([a({type:String})],j.prototype,"type",void 0),U([a({type:String})],j.prototype,"shape",void 0),U([a({type:Boolean})],j.prototype,"block",void 0),U([a({type:Boolean})],j.prototype,"dashed",void 0),U([a({type:Array})],j.prototype,"icon",void 0),U([a({type:Object})],j.prototype,"iconLeft",void 0),U([a({type:Object})],j.prototype,"iconRight",void 0),U([a({type:Object})],j.prototype,"icons",void 0),U([a({reflect:!0})],j.prototype,"iconPosition",void 0),U([a({type:String})],j.prototype,"href",void 0),U([a({type:String})],j.prototype,"target",void 0),U([a({type:Boolean})],j.prototype,"ripple",void 0),U([a({type:String})],j.prototype,"buttonAriaLabel",void 0),U([a({type:String})],j.prototype,"ariaDescribedBy",void 0),U([a({type:String})],j.prototype,"htmlType",void 0),j=U([o("nr-button")],j),function(t){t.TwentyFourHour="24h",t.TwelveHour="12h"}(B||(B={})),function(t){t.Hours="hours",t.Minutes="minutes",t.Seconds="seconds"}(L||(L={})),function(t){t.Small="small",t.Medium="medium",t.Large="large"}(F||(F={})),function(t){t.Default="default",t.Outlined="outlined",t.Filled="filled"}(q||(q={})),function(t){t.Default="default",t.Error="error",t.Warning="warning",t.Success="success"}(K||(K={})),function(t){t.Bottom="bottom",t.Top="top",t.Auto="auto"}(W||(W={})),function(t){t[t.One=1]="One",t[t.Five=5]="Five",t[t.Ten=10]="Ten",t[t.Fifteen=15]="Fifteen",t[t.Thirty=30]="Thirty"}(Z||(Z={})),function(t){t.AM="AM",t.PM="PM"}(Y||(Y={}));const X={[B.TwentyFourHour]:"HH:mm",[B.TwelveHour]:"hh:mm A"},G={[B.TwentyFourHour]:"HH:mm:ss",[B.TwelveHour]:"hh:mm:ss A"},J={HOURS_24:24,HOURS_12:12,MINUTES:60,SECONDS:60,DEFAULT_STEP:1,DEFAULT_MINUTE_INTERVAL:1,DEFAULT_SECOND_INTERVAL:1},Q={TIME_CHANGE:"nr-time-change",FOCUS:"nr-focus",BLUR:"nr-blur",CLOCK_OPEN:"nr-clock-open",CLOCK_CLOSE:"nr-clock-close",VALIDATION:"nr-validation"},tt={hours:0,minutes:0,seconds:0,period:Y.AM},rt={format:B.TwentyFourHour,showSeconds:!1,minuteInterval:1,secondInterval:1,use12HourClock:!1},it="HH:mm",et="HH:mm:ss",at="hh:mm A",nt="hh:mm:ss A",ot="time-input-field",st="time-picker-clock-container",lt={TWENTY_FOUR_HOUR:/^([01]?[0-9]|2[0-3]):([0-5]?[0-9])(:([0-5]?[0-9]))?$/,TWELVE_HOUR:/^(0?[1-9]|1[0-2]):([0-5]?[0-9])(:([0-5]?[0-9]))?\s?(AM|PM|am|pm)$/},ct={MIN_HOUR_24:0,MAX_HOUR_24:23,MIN_HOUR_12:1,MAX_HOUR_12:12,MIN_MINUTE:0,MAX_MINUTE:59,MIN_SECOND:0,MAX_SECOND:59},ut={HOURS:Z.One,MINUTES:Z.One,SECONDS:Z.One},dt={CONTAINER:"time-picker",INPUT:"time-picker__input",CLOCK:"time-picker__clock",DROPDOWN:"time-picker__dropdown",HOUR:"time-picker__hour",MINUTE:"time-picker__minute",SECOND:"time-picker__second",PERIOD:"time-picker__period",BUTTON:"time-picker__button",SEPARATOR:"time-picker__separator"},pt={RADIUS:100,CENTER:50,HOUR_HAND_LENGTH:30,MINUTE_HAND_LENGTH:40,SECOND_HAND_LENGTH:45};
+var j,L,F,W,q,K,Y,Z;B.styles=O,U([o({type:Boolean})],B.prototype,"disabled",void 0),U([o({type:Boolean})],B.prototype,"loading",void 0),U([o({type:String})],B.prototype,"size",void 0),U([o({type:String})],B.prototype,"type",void 0),U([o({type:String})],B.prototype,"shape",void 0),U([o({type:Boolean})],B.prototype,"block",void 0),U([o({type:Boolean})],B.prototype,"dashed",void 0),U([o({type:Array})],B.prototype,"icon",void 0),U([o({type:Object})],B.prototype,"iconLeft",void 0),U([o({type:Object})],B.prototype,"iconRight",void 0),U([o({type:Object})],B.prototype,"icons",void 0),U([o({reflect:!0})],B.prototype,"iconPosition",void 0),U([o({type:String})],B.prototype,"href",void 0),U([o({type:String})],B.prototype,"target",void 0),U([o({type:Boolean})],B.prototype,"ripple",void 0),U([o({type:String})],B.prototype,"buttonAriaLabel",void 0),U([o({type:String})],B.prototype,"ariaDescribedBy",void 0),U([o({type:String})],B.prototype,"htmlType",void 0),B=U([a("nr-button")],B),function(t){t.TwentyFourHour="24h",t.TwelveHour="12h"}(j||(j={})),function(t){t.Hours="hours",t.Minutes="minutes",t.Seconds="seconds"}(L||(L={})),function(t){t.Small="small",t.Medium="medium",t.Large="large"}(F||(F={})),function(t){t.Default="default",t.Outlined="outlined",t.Filled="filled"}(W||(W={})),function(t){t.Default="default",t.Error="error",t.Warning="warning",t.Success="success"}(q||(q={})),function(t){t.Bottom="bottom",t.Top="top",t.Auto="auto"}(K||(K={})),function(t){t[t.One=1]="One",t[t.Five=5]="Five",t[t.Ten=10]="Ten",t[t.Fifteen=15]="Fifteen",t[t.Thirty=30]="Thirty"}(Y||(Y={})),function(t){t.AM="AM",t.PM="PM"}(Z||(Z={}));const G={[j.TwentyFourHour]:"HH:mm",[j.TwelveHour]:"hh:mm A"},X={[j.TwentyFourHour]:"HH:mm:ss",[j.TwelveHour]:"hh:mm:ss A"},J={HOURS_24:24,HOURS_12:12,MINUTES:60,SECONDS:60,DEFAULT_STEP:1,DEFAULT_MINUTE_INTERVAL:1,DEFAULT_SECOND_INTERVAL:1},Q={TIME_CHANGE:"nr-time-change",FOCUS:"nr-focus",BLUR:"nr-blur",CLOCK_OPEN:"nr-clock-open",CLOCK_CLOSE:"nr-clock-close",VALIDATION:"nr-validation"},tt={hours:0,minutes:0,seconds:0,period:Z.AM},rt={format:j.TwentyFourHour,showSeconds:!1,minuteInterval:1,secondInterval:1,use12HourClock:!1},et="HH:mm",it="HH:mm:ss",ot="hh:mm A",nt="hh:mm:ss A",at="time-input-field",st="time-picker-clock-container",lt={TWENTY_FOUR_HOUR:/^([01]?[0-9]|2[0-3]):([0-5]?[0-9])(:([0-5]?[0-9]))?$/,TWELVE_HOUR:/^(0?[1-9]|1[0-2]):([0-5]?[0-9])(:([0-5]?[0-9]))?\s?(AM|PM|am|pm)$/},ct={MIN_HOUR_24:0,MAX_HOUR_24:23,MIN_HOUR_12:1,MAX_HOUR_12:12,MIN_MINUTE:0,MAX_MINUTE:59,MIN_SECOND:0,MAX_SECOND:59},ut={HOURS:Y.One,MINUTES:Y.One,SECONDS:Y.One},dt={CONTAINER:"time-picker",INPUT:"time-picker__input",CLOCK:"time-picker__clock",DROPDOWN:"time-picker__dropdown",HOUR:"time-picker__hour",MINUTE:"time-picker__minute",SECOND:"time-picker__second",PERIOD:"time-picker__period",BUTTON:"time-picker__button",SEPARATOR:"time-picker__separator"},pt={RADIUS:100,CENTER:50,HOUR_HAND_LENGTH:30,MINUTE_HAND_LENGTH:40,SECOND_HAND_LENGTH:45};
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
  */
-class ht{static createTimeValue(t,r,i=0,e){return{hours:Math.max(0,Math.min(t,23)),minutes:Math.max(0,Math.min(r,59)),seconds:Math.max(0,Math.min(i,59)),period:e}}static parseTimeString(t,r=B.TwentyFourHour){if(!(null==t?void 0:t.trim()))return null;const i=t.trim().toUpperCase();return r===B.TwelveHour?this.parse12HourTime(i):this.parse24HourTime(i)}static parse24HourTime(t){const r=t.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/);if(!r)return null;const i=parseInt(r[1],10),e=parseInt(r[2],10),a=r[3]?parseInt(r[3],10):0;return this.isValidTime24(i,e,a)?this.createTimeValue(i,e,a):null}static parse12HourTime(t){const r=t.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?\s?(AM|PM)$/);if(!r)return null;let i=parseInt(r[1],10);const e=parseInt(r[2],10),a=r[3]?parseInt(r[3],10):0,n=r[4];return this.isValidTime12(i,e,a)?(n===Y.PM&&12!==i?i+=12:n===Y.AM&&12===i&&(i=0),this.createTimeValue(i,e,a,n)):null}static formatTimeValue(t,r=B.TwentyFourHour,i=!1){return t?r===B.TwelveHour?this.format12HourTime(t,i):this.format24HourTime(t,i):""}static format24HourTime(t,r){const i=t.hours.toString().padStart(2,"0"),e=t.minutes.toString().padStart(2,"0");if(r){return`${i}:${e}:${t.seconds.toString().padStart(2,"0")}`}return`${i}:${e}`}static format12HourTime(t,r){let i=t.hours;const e=t.minutes.toString().padStart(2,"0"),a=i>=12?Y.PM:Y.AM;0===i?i=12:i>12&&(i-=12);const n=i.toString();if(r){return`${n}:${e}:${t.seconds.toString().padStart(2,"0")} ${a}`}return`${n}:${e} ${a}`}static getCurrentTime(){const t=new Date;return this.createTimeValue(t.getHours(),t.getMinutes(),t.getSeconds())}static compareTime(t,r){return 3600*t.hours+60*t.minutes+t.seconds-(3600*r.hours+60*r.minutes+r.seconds)}static isTimeEqual(t,r){return 0===this.compareTime(t,r)}static isValidTime24(t,r,i=0){return t>=ct.MIN_HOUR_24&&t<=ct.MAX_HOUR_24&&r>=ct.MIN_MINUTE&&r<=ct.MAX_MINUTE&&i>=ct.MIN_SECOND&&i<=ct.MAX_SECOND}static isValidTime12(t,r,i=0){return t>=ct.MIN_HOUR_12&&t<=ct.MAX_HOUR_12&&r>=ct.MIN_MINUTE&&r<=ct.MAX_MINUTE&&i>=ct.MIN_SECOND&&i<=ct.MAX_SECOND}static addTime(t,r,i,e=0){let a=3600*t.hours+60*t.minutes+t.seconds;a+=3600*r+60*i+e,a=(a%86400+86400)%86400;const n=Math.floor(a/3600),o=Math.floor(a%3600/60),s=a%60;return this.createTimeValue(n,o,s)}static generateTimeOptions(t=15,r=B.TwentyFourHour,i=!1){const e=[];for(let a=0;a<24;a++)for(let n=0;n<60;n+=t){const t=this.createTimeValue(a,n,0),o=this.formatTimeValue(t,r,i);e.push({value:o,label:o})}return e}static roundToInterval(t,r){const i=60*t.hours+t.minutes,e=Math.round(i/r)*r,a=Math.floor(e/60)%24,n=e%60;return this.createTimeValue(a,n,t.seconds)}static isTimeInRange(t,r,i){return!(r&&this.compareTime(t,r)<0)&&!(i&&this.compareTime(t,i)>0)}static dateToTimeValue(t){return this.createTimeValue(t.getHours(),t.getMinutes(),t.getSeconds())}static timeValueToDate(t,r){const i=r?new Date(r):new Date;return i.setHours(t.hours,t.minutes,t.seconds,0),i}}
+class ht{static createTimeValue(t,r,e=0,i){return{hours:Math.max(0,Math.min(t,23)),minutes:Math.max(0,Math.min(r,59)),seconds:Math.max(0,Math.min(e,59)),period:i}}static parseTimeString(t,r=j.TwentyFourHour){if(!(null==t?void 0:t.trim()))return null;const e=t.trim().toUpperCase();return r===j.TwelveHour?this.parse12HourTime(e):this.parse24HourTime(e)}static parse24HourTime(t){const r=t.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/);if(!r)return null;const e=parseInt(r[1],10),i=parseInt(r[2],10),o=r[3]?parseInt(r[3],10):0;return this.isValidTime24(e,i,o)?this.createTimeValue(e,i,o):null}static parse12HourTime(t){const r=t.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?\s?(AM|PM)$/);if(!r)return null;let e=parseInt(r[1],10);const i=parseInt(r[2],10),o=r[3]?parseInt(r[3],10):0,n=r[4];return this.isValidTime12(e,i,o)?(n===Z.PM&&12!==e?e+=12:n===Z.AM&&12===e&&(e=0),this.createTimeValue(e,i,o,n)):null}static formatTimeValue(t,r=j.TwentyFourHour,e=!1){return t?r===j.TwelveHour?this.format12HourTime(t,e):this.format24HourTime(t,e):""}static format24HourTime(t,r){const e=t.hours.toString().padStart(2,"0"),i=t.minutes.toString().padStart(2,"0");if(r){return`${e}:${i}:${t.seconds.toString().padStart(2,"0")}`}return`${e}:${i}`}static format12HourTime(t,r){let e=t.hours;const i=t.minutes.toString().padStart(2,"0"),o=e>=12?Z.PM:Z.AM;0===e?e=12:e>12&&(e-=12);const n=e.toString();if(r){return`${n}:${i}:${t.seconds.toString().padStart(2,"0")} ${o}`}return`${n}:${i} ${o}`}static getCurrentTime(){const t=new Date;return this.createTimeValue(t.getHours(),t.getMinutes(),t.getSeconds())}static compareTime(t,r){return 3600*t.hours+60*t.minutes+t.seconds-(3600*r.hours+60*r.minutes+r.seconds)}static isTimeEqual(t,r){return 0===this.compareTime(t,r)}static isValidTime24(t,r,e=0){return t>=ct.MIN_HOUR_24&&t<=ct.MAX_HOUR_24&&r>=ct.MIN_MINUTE&&r<=ct.MAX_MINUTE&&e>=ct.MIN_SECOND&&e<=ct.MAX_SECOND}static isValidTime12(t,r,e=0){return t>=ct.MIN_HOUR_12&&t<=ct.MAX_HOUR_12&&r>=ct.MIN_MINUTE&&r<=ct.MAX_MINUTE&&e>=ct.MIN_SECOND&&e<=ct.MAX_SECOND}static addTime(t,r,e,i=0){let o=3600*t.hours+60*t.minutes+t.seconds;o+=3600*r+60*e+i,o=(o%86400+86400)%86400;const n=Math.floor(o/3600),a=Math.floor(o%3600/60),s=o%60;return this.createTimeValue(n,a,s)}static generateTimeOptions(t=15,r=j.TwentyFourHour,e=!1){const i=[];for(let o=0;o<24;o++)for(let n=0;n<60;n+=t){const t=this.createTimeValue(o,n,0),a=this.formatTimeValue(t,r,e);i.push({value:a,label:a})}return i}static roundToInterval(t,r){const e=60*t.hours+t.minutes,i=Math.round(e/r)*r,o=Math.floor(i/60)%24,n=i%60;return this.createTimeValue(o,n,t.seconds)}static isTimeInRange(t,r,e){return!(r&&this.compareTime(t,r)<0)&&!(e&&this.compareTime(t,e)>0)}static dateToTimeValue(t){return this.createTimeValue(t.getHours(),t.getMinutes(),t.getSeconds())}static timeValueToDate(t,r){const e=r?new Date(r):new Date;return e.setHours(t.hours,t.minutes,t.seconds,0),e}}
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */class mt{constructor(t){this.host=t,this.selectedTime=null}selectTime(t){if(!this.host.validateTime(t))return;const r=this.selectedTime;this.selectedTime=Object.assign({},t),this.dispatchTimeChangeEvent(t,r),this.host.requestUpdate()}getSelectedTime(){return this.selectedTime?Object.assign({},this.selectedTime):null}clearSelection(){const t=this.selectedTime;this.selectedTime=null,t&&(this.dispatchTimeChangeEvent(null,t),this.host.requestUpdate())}isTimeSelected(t){return!!this.selectedTime&&ht.isTimeEqual(t,this.selectedTime)}setTimeInternal(t){this.selectedTime=t?Object.assign({},t):null}updateTime(t){if(this.selectedTime)this.selectedTime=Object.assign(Object.assign({},this.selectedTime),t);else{const r=ht.getCurrentTime();this.selectedTime=Object.assign(Object.assign({},r),t)}this.host.validateTime(this.selectedTime)&&(this.dispatchTimeChangeEvent(this.selectedTime,null),this.host.requestUpdate())}incrementTime(t,r=1){let i;switch(this.selectedTime||(this.selectedTime=ht.getCurrentTime()),t){case"hours":i=ht.addTime(this.selectedTime,r,0,0);break;case"minutes":i=ht.addTime(this.selectedTime,0,r,0);break;case"seconds":i=ht.addTime(this.selectedTime,0,0,r);break;default:return}this.selectTime(i)}decrementTime(t,r=1){this.incrementTime(t,-r)}setTimeFromString(t){const r=this.host.getConfig(),i=ht.parseTimeString(t,r.format);return!(!i||!this.host.validateTime(i))&&(this.selectTime(i),!0)}getFormattedTime(){return this.selectedTime?this.host.formatTime(this.selectedTime):""}dispatchTimeChangeEvent(t,r){const i=this.host;if(!i.dispatchEvent)return;const e={value:t?this.host.formatTime(t):"",timeValue:t,previousValue:r?this.host.formatTime(r):"",previousTimeValue:r},a=new CustomEvent(Q.TIME_CHANGE,{detail:e,bubbles:!0,composed:!0});i.dispatchEvent(a)}reset(){this.clearSelection()}setToCurrentTime(){const t=ht.getCurrentTime();this.selectTime(t)}roundToInterval(t){if(!this.selectedTime)return;const r=ht.roundToInterval(this.selectedTime,t);this.selectTime(r)}}
+ */class mt{constructor(t){this.host=t,this.selectedTime=null}selectTime(t){if(!this.host.validateTime(t))return;const r=this.selectedTime;this.selectedTime=Object.assign({},t),this.dispatchTimeChangeEvent(t,r),this.host.requestUpdate()}getSelectedTime(){return this.selectedTime?Object.assign({},this.selectedTime):null}clearSelection(){const t=this.selectedTime;this.selectedTime=null,t&&(this.dispatchTimeChangeEvent(null,t),this.host.requestUpdate())}isTimeSelected(t){return!!this.selectedTime&&ht.isTimeEqual(t,this.selectedTime)}setTimeInternal(t){this.selectedTime=t?Object.assign({},t):null}updateTime(t){if(this.selectedTime)this.selectedTime=Object.assign(Object.assign({},this.selectedTime),t);else{const r=ht.getCurrentTime();this.selectedTime=Object.assign(Object.assign({},r),t)}this.host.validateTime(this.selectedTime)&&(this.dispatchTimeChangeEvent(this.selectedTime,null),this.host.requestUpdate())}incrementTime(t,r=1){let e;switch(this.selectedTime||(this.selectedTime=ht.getCurrentTime()),t){case"hours":e=ht.addTime(this.selectedTime,r,0,0);break;case"minutes":e=ht.addTime(this.selectedTime,0,r,0);break;case"seconds":e=ht.addTime(this.selectedTime,0,0,r);break;default:return}this.selectTime(e)}decrementTime(t,r=1){this.incrementTime(t,-r)}setTimeFromString(t){const r=this.host.getConfig(),e=ht.parseTimeString(t,r.format);return!(!e||!this.host.validateTime(e))&&(this.selectTime(e),!0)}getFormattedTime(){return this.selectedTime?this.host.formatTime(this.selectedTime):""}dispatchTimeChangeEvent(t,r){const e=this.host;if(!e.dispatchEvent)return;const i={value:t?this.host.formatTime(t):"",timeValue:t,previousValue:r?this.host.formatTime(r):"",previousTimeValue:r},o=new CustomEvent(Q.TIME_CHANGE,{detail:i,bubbles:!0,composed:!0});e.dispatchEvent(o)}reset(){this.clearSelection()}setToCurrentTime(){const t=ht.getCurrentTime();this.selectTime(t)}roundToInterval(t){if(!this.selectedTime)return;const r=ht.roundToInterval(this.selectedTime,t);this.selectTime(r)}}
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */class vt{constructor(t){this.host=t,this.constraints={}}setConstraints(t){this.constraints=Object.assign({},t)}getConstraints(){return Object.assign({},this.constraints)}validateConstraints(t){return this.isTimeInBounds(t)&&!this.isTimeDisabled(t)&&this.isTimeEnabled(t)}isTimeInBounds(t){let r=null,i=null;if(this.constraints.minTime){const t=this.host.getConfig();r=ht.parseTimeString(this.constraints.minTime,t.format)}if(this.constraints.maxTime){const t=this.host.getConfig();i=ht.parseTimeString(this.constraints.maxTime,t.format)}return ht.isTimeInRange(t,r,i)}isTimeDisabled(t){if(!this.constraints.disabledTimes||0===this.constraints.disabledTimes.length)return!1;const r=this.host.formatTime(t);return this.constraints.disabledTimes.includes(r)}isTimeEnabled(t){if(!this.constraints.enabledTimes||0===this.constraints.enabledTimes.length)return!0;const r=this.host.formatTime(t);return this.constraints.enabledTimes.includes(r)}getValidationMessage(t){return this.isTimeInBounds(t)?this.isTimeDisabled(t)?"This time is not available":this.isTimeEnabled(t)?"":"This time is not in the allowed time range":this.getBoundsValidationMessage(t)}getBoundsValidationMessage(t){const r=this.host.getConfig();let i="";if(this.constraints.minTime&&this.constraints.maxTime)i=`Time must be between ${this.constraints.minTime} and ${this.constraints.maxTime}`;else if(this.constraints.minTime){const e=ht.parseTimeString(this.constraints.minTime,r.format);e&&ht.compareTime(t,e)<0&&(i=`Time must be after ${this.constraints.minTime}`)}else if(this.constraints.maxTime){const e=ht.parseTimeString(this.constraints.maxTime,r.format);e&&ht.compareTime(t,e)>0&&(i=`Time must be before ${this.constraints.maxTime}`)}return i}validateTimeFormat(t){const r=this.host.getConfig();return null!==ht.parseTimeString(t,r.format)}getValidationResult(t){const r=[];return this.isTimeInBounds(t)||r.push(this.getBoundsValidationMessage(t)),this.isTimeDisabled(t)&&r.push("This time is disabled"),this.isTimeEnabled(t)||r.push("This time is not in the allowed range"),{isValid:0===r.length,message:r.length>0?r[0]:"",errors:r}}findNearestValidTime(t){if(this.validateConstraints(t))return t;for(let r=1;r<=60;r++){const i=ht.addTime(t,0,r,0);if(this.validateConstraints(i))return i;const e=ht.addTime(t,0,-r,0);if(this.validateConstraints(e))return e}return null}isCurrentSelectionValid(){const t=this.host.getCurrentTime();return this.validateConstraints(t)}setMinTime(t){this.constraints.minTime=t||void 0}setMaxTime(t){this.constraints.maxTime=t||void 0}setDisabledTimes(t){this.constraints.disabledTimes=[...t]}setEnabledTimes(t){this.constraints.enabledTimes=[...t]}clearConstraints(){this.constraints={}}}
+ */class bt{constructor(t){this.host=t,this.constraints={}}setConstraints(t){this.constraints=Object.assign({},t)}getConstraints(){return Object.assign({},this.constraints)}validateConstraints(t){return this.isTimeInBounds(t)&&!this.isTimeDisabled(t)&&this.isTimeEnabled(t)}isTimeInBounds(t){let r=null,e=null;if(this.constraints.minTime){const t=this.host.getConfig();r=ht.parseTimeString(this.constraints.minTime,t.format)}if(this.constraints.maxTime){const t=this.host.getConfig();e=ht.parseTimeString(this.constraints.maxTime,t.format)}return ht.isTimeInRange(t,r,e)}isTimeDisabled(t){if(!this.constraints.disabledTimes||0===this.constraints.disabledTimes.length)return!1;const r=this.host.formatTime(t);return this.constraints.disabledTimes.includes(r)}isTimeEnabled(t){if(!this.constraints.enabledTimes||0===this.constraints.enabledTimes.length)return!0;const r=this.host.formatTime(t);return this.constraints.enabledTimes.includes(r)}getValidationMessage(t){return this.isTimeInBounds(t)?this.isTimeDisabled(t)?"This time is not available":this.isTimeEnabled(t)?"":"This time is not in the allowed time range":this.getBoundsValidationMessage(t)}getBoundsValidationMessage(t){const r=this.host.getConfig();let e="";if(this.constraints.minTime&&this.constraints.maxTime)e=`Time must be between ${this.constraints.minTime} and ${this.constraints.maxTime}`;else if(this.constraints.minTime){const i=ht.parseTimeString(this.constraints.minTime,r.format);i&&ht.compareTime(t,i)<0&&(e=`Time must be after ${this.constraints.minTime}`)}else if(this.constraints.maxTime){const i=ht.parseTimeString(this.constraints.maxTime,r.format);i&&ht.compareTime(t,i)>0&&(e=`Time must be before ${this.constraints.maxTime}`)}return e}validateTimeFormat(t){const r=this.host.getConfig();return null!==ht.parseTimeString(t,r.format)}getValidationResult(t){const r=[];return this.isTimeInBounds(t)||r.push(this.getBoundsValidationMessage(t)),this.isTimeDisabled(t)&&r.push("This time is disabled"),this.isTimeEnabled(t)||r.push("This time is not in the allowed range"),{isValid:0===r.length,message:r.length>0?r[0]:"",errors:r}}findNearestValidTime(t){if(this.validateConstraints(t))return t;for(let r=1;r<=60;r++){const e=ht.addTime(t,0,r,0);if(this.validateConstraints(e))return e;const i=ht.addTime(t,0,-r,0);if(this.validateConstraints(i))return i}return null}isCurrentSelectionValid(){const t=this.host.getCurrentTime();return this.validateConstraints(t)}setMinTime(t){this.constraints.minTime=t||void 0}setMaxTime(t){this.constraints.maxTime=t||void 0}setDisabledTimes(t){this.constraints.disabledTimes=[...t]}setEnabledTimes(t){this.constraints.enabledTimes=[...t]}clearConstraints(){this.constraints={}}}
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */class bt{constructor(t){this.host=t}formatForDisplay(t){const r=this.host.getConfig();return ht.formatTimeValue(t,r.format,r.showSeconds)}formatForInput(t){return this.formatForDisplay(t)}parseInputValue(t){const r=this.host.getConfig();return ht.parseTimeString(t,r.format)}getFormatPattern(){const t=this.host.getConfig();return t.format===B.TwelveHour?t.showSeconds?nt:at:t.showSeconds?et:it}getPlaceholder(){const t=this.host.getConfig();return t.format===B.TwelveHour?t.showSeconds?"hh:mm:ss AM/PM":"hh:mm AM/PM":t.showSeconds?"HH:mm:ss":"HH:mm"}formatTimeComponent(t,r=2){return t.toString().padStart(r,"0")}formatHours(t){if(this.host.getConfig().format===B.TwelveHour){let r=t;return 0===r?r=12:r>12&&(r-=12),r.toString()}return this.formatTimeComponent(t)}formatMinutes(t){return this.formatTimeComponent(t)}formatSeconds(t){return this.formatTimeComponent(t)}getPeriod(t){return t>=12?Y.PM:Y.AM}formatTimeParts(t){const r=this.host.getConfig();return{hours:this.formatHours(t.hours),minutes:this.formatMinutes(t.minutes),seconds:this.formatSeconds(t.seconds),period:r.format===B.TwelveHour?this.getPeriod(t.hours):void 0}}parseTimeParts(t){const r=this.host.getConfig(),i=ht.parseTimeString(t,r.format);return i?{hours:i.hours,minutes:i.minutes,seconds:i.seconds,period:r.format===B.TwelveHour?this.getPeriod(i.hours):void 0}:null}getTimeSeparator(){return":"}isValidFormat(t){const r=ht.createTimeValue(12,30,45);try{const t=this.formatForDisplay(r);return null!==this.parseInputValue(t)}catch(t){return!1}}getFormatExamples(){const t=this.host.getConfig();return[ht.createTimeValue(9,15,0),ht.createTimeValue(14,30,45),ht.createTimeValue(23,59,59)].map((r=>ht.formatTimeValue(r,t.format,t.showSeconds)))}convertFormat(t,r,i){const e=ht.parseTimeString(t,r);if(!e)return null;const a=this.host.getConfig();return ht.formatTimeValue(e,i,a.showSeconds)}getTimeDescription(t){const r=this.host.getConfig(),i=ht.formatTimeValue(t,r.format,r.showSeconds),e=ht.getCurrentTime(),a=ht.compareTime(t,e);return 0===a?`${i} (now)`:a>0?`${i} (future)`:`${i} (past)`}}const yt=t`${t`:host{--nuraly-timepicker-local-background-color:var(--nuraly-color-timepicker-background, #ffffff);--nuraly-timepicker-local-text-color:var(--nuraly-color-timepicker-text, rgba(0, 0, 0, 0.88));--nuraly-timepicker-local-font-family:var(--nuraly-font-family-timepicker, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif);--nuraly-timepicker-local-font-size:var(--nuraly-font-size-timepicker, 14px);--nuraly-timepicker-local-border-color:var(--nuraly-color-timepicker-border, #d9d9d9);--nuraly-timepicker-local-border-width:var(--nuraly-border-width-timepicker, 1px);--nuraly-timepicker-local-border-radius:var(--nuraly-border-radius-timepicker, 6px);--nuraly-timepicker-local-border-radius-sm:var(--nuraly-border-radius-timepicker-sm, calc(var(--nuraly-border-radius-timepicker, 6px) * 0.5));--nuraly-timepicker-local-primary-color:var(--nuraly-color-timepicker-primary, #1890ff);--nuraly-timepicker-local-focus-color:var(--nuraly-color-timepicker-focus, #1890ff);--nuraly-timepicker-local-border-color-hover:var(--nuraly-color-timepicker-border-hover, #1890ff);--nuraly-timepicker-local-selected-color:var(--nuraly-color-timepicker-selected, #1890ff);--nuraly-timepicker-local-selected-text-color:var(--nuraly-color-timepicker-selected-text, #ffffff);--nuraly-timepicker-local-hover-color:var(--nuraly-color-timepicker-hover, #f5f5f5);--nuraly-timepicker-local-clock-hand-color:var(--nuraly-color-timepicker-clock-hand, #1890ff);--nuraly-timepicker-local-control-item-bg-hover:var(--nuraly-color-timepicker-control-item-bg-hover, #f5f5f5);--nuraly-timepicker-local-control-item-bg-active:var(--nuraly-color-timepicker-control-item-bg-active, #e6f7ff);--nuraly-timepicker-local-text-color-secondary:var(--nuraly-color-timepicker-text-secondary, rgba(0, 0, 0, 0.45));--nuraly-timepicker-local-text-color-disabled:var(--nuraly-color-timepicker-text-disabled, rgba(0, 0, 0, 0.25));--nuraly-timepicker-local-disabled-color:var(--nuraly-color-timepicker-disabled, #f5f5f5);--nuraly-timepicker-local-disabled-bg:var(--nuraly-color-timepicker-disabled-bg, #f5f5f5);--nuraly-timepicker-local-disabled-text-color:var(--nuraly-color-timepicker-disabled-text, rgba(0, 0, 0, 0.25));--nuraly-timepicker-local-disabled-opacity:var(--nuraly-opacity-timepicker-disabled, 1);--nuraly-timepicker-local-input-background:var(--nuraly-color-timepicker-input-background, #ffffff);--nuraly-timepicker-local-input-border-color:var(--nuraly-color-timepicker-input-border, #d9d9d9);--nuraly-timepicker-local-input-focus-border-color:var(--nuraly-color-timepicker-input-focus-border, #1890ff);--nuraly-timepicker-local-input-text-color:var(--nuraly-color-timepicker-input-text, rgba(0, 0, 0, 0.88));--nuraly-timepicker-local-input-placeholder-color:var(--nuraly-color-timepicker-input-placeholder, rgba(0, 0, 0, 0.25));--nuraly-timepicker-local-dropdown-background:var(--nuraly-color-timepicker-dropdown-background, #ffffff);--nuraly-timepicker-local-clock-background:var(--nuraly-color-timepicker-clock-background, #ffffff);--nuraly-timepicker-local-clock-text-color:var(--nuraly-color-timepicker-clock-text, rgba(0, 0, 0, 0.88));--nuraly-timepicker-local-clock-face-color:var(--nuraly-color-timepicker-clock-face, rgba(0, 0, 0, 0.45));--nuraly-timepicker-local-clock-border-color:var(--nuraly-color-timepicker-clock-border, #f0f0f0);--nuraly-timepicker-local-item-hover-color:var(--nuraly-color-timepicker-item-hover, #f5f5f5);--nuraly-timepicker-local-item-active-color:var(--nuraly-color-timepicker-item-active, #e6f7ff);--nuraly-timepicker-local-item-selected-color:var(--nuraly-color-timepicker-item-selected, #1890ff);--nuraly-timepicker-local-item-selected-text-color:var(--nuraly-color-timepicker-item-selected-text, #ffffff);--nuraly-timepicker-local-error-color:var(--nuraly-color-timepicker-error, #ff4d4f);--nuraly-timepicker-local-warning-color:var(--nuraly-color-timepicker-warning, #faad14);--nuraly-timepicker-local-success-color:var(--nuraly-color-timepicker-success, #52c41a);--nuraly-timepicker-local-width:var(--nuraly-size-timepicker-width, 120px);--nuraly-timepicker-local-height:var(--nuraly-size-timepicker-height, 32px);--nuraly-timepicker-local-dropdown-width:var(--nuraly-size-timepicker-dropdown-width, 180px);--nuraly-timepicker-local-clock-size:var(--nuraly-size-timepicker-clock, 200px);--nuraly-timepicker-local-font-weight:var(--nuraly-font-weight-timepicker, 400);--nuraly-timepicker-local-line-height:var(--nuraly-line-height-timepicker, 1.5715);--nuraly-timepicker-local-clock-font-size:var(--nuraly-font-size-timepicker-clock, 14px);--nuraly-timepicker-local-gap:var(--nuraly-spacing-timepicker-gap, 4px);--nuraly-timepicker-local-dropdown-padding:var(--nuraly-spacing-timepicker-dropdown-padding, 8px);--nuraly-timepicker-local-input-padding:var(--nuraly-spacing-timepicker-input-padding, 4px 11px);--nuraly-timepicker-local-padding:var(--nuraly-spacing-timepicker-padding, 4px 11px);--nuraly-timepicker-local-input-border-width:var(--nuraly-border-width-timepicker-input, 1px);--nuraly-timepicker-local-focus-border-width:var(--nuraly-border-width-timepicker-focus, 2px);--nuraly-timepicker-local-shadow-color:var(--nuraly-color-timepicker-shadow, rgba(0, 0, 0, 0.15));--nuraly-timepicker-local-box-shadow:var(--nuraly-shadow-timepicker-box, 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05));--nuraly-timepicker-local-input-focus-shadow:var(--nuraly-shadow-timepicker-input-focus, 0 0 0 2px rgba(24, 144, 255, 0.2));--nuraly-timepicker-local-hover-opacity:var(--nuraly-opacity-timepicker-hover, 1);--nuraly-timepicker-local-transition-duration:var(--nuraly-transition-duration-timepicker, 0.2s);--nuraly-timepicker-local-transition-timing:var(--nuraly-transition-timing-timepicker, ease-in-out);--nuraly-timepicker-local-dropdown-z-index:var(--nuraly-z-index-timepicker-dropdown, 1050);--nuraly-timepicker-local-icon-size:var(--nuraly-size-timepicker-icon, 14px);--nuraly-timepicker-local-small-font-size:var(--nuraly-font-size-timepicker-small, 12px);--nuraly-timepicker-local-small-padding:var(--nuraly-spacing-timepicker-small-padding, 0px 7px);--nuraly-timepicker-local-small-height:var(--nuraly-size-timepicker-small-height, 24px);--nuraly-timepicker-local-medium-font-size:var(--nuraly-font-size-timepicker-medium, 14px);--nuraly-timepicker-local-medium-padding:var(--nuraly-spacing-timepicker-medium-padding, 4px 11px);--nuraly-timepicker-local-medium-height:var(--nuraly-size-timepicker-medium-height, 32px);--nuraly-timepicker-local-large-font-size:var(--nuraly-font-size-timepicker-large, 16px);--nuraly-timepicker-local-large-padding:var(--nuraly-spacing-timepicker-large-padding, 6px 11px);--nuraly-timepicker-local-large-height:var(--nuraly-size-timepicker-large-height, 40px)}`
+ */class vt{constructor(t){this.host=t}formatForDisplay(t){const r=this.host.getConfig();return ht.formatTimeValue(t,r.format,r.showSeconds)}formatForInput(t){return this.formatForDisplay(t)}parseInputValue(t){const r=this.host.getConfig();return ht.parseTimeString(t,r.format)}getFormatPattern(){const t=this.host.getConfig();return t.format===j.TwelveHour?t.showSeconds?nt:ot:t.showSeconds?it:et}getPlaceholder(){const t=this.host.getConfig();return t.format===j.TwelveHour?t.showSeconds?"hh:mm:ss AM/PM":"hh:mm AM/PM":t.showSeconds?"HH:mm:ss":"HH:mm"}formatTimeComponent(t,r=2){return t.toString().padStart(r,"0")}formatHours(t){if(this.host.getConfig().format===j.TwelveHour){let r=t;return 0===r?r=12:r>12&&(r-=12),r.toString()}return this.formatTimeComponent(t)}formatMinutes(t){return this.formatTimeComponent(t)}formatSeconds(t){return this.formatTimeComponent(t)}getPeriod(t){return t>=12?Z.PM:Z.AM}formatTimeParts(t){const r=this.host.getConfig();return{hours:this.formatHours(t.hours),minutes:this.formatMinutes(t.minutes),seconds:this.formatSeconds(t.seconds),period:r.format===j.TwelveHour?this.getPeriod(t.hours):void 0}}parseTimeParts(t){const r=this.host.getConfig(),e=ht.parseTimeString(t,r.format);return e?{hours:e.hours,minutes:e.minutes,seconds:e.seconds,period:r.format===j.TwelveHour?this.getPeriod(e.hours):void 0}:null}getTimeSeparator(){return":"}isValidFormat(t){const r=ht.createTimeValue(12,30,45);try{const t=this.formatForDisplay(r);return null!==this.parseInputValue(t)}catch(t){return!1}}getFormatExamples(){const t=this.host.getConfig();return[ht.createTimeValue(9,15,0),ht.createTimeValue(14,30,45),ht.createTimeValue(23,59,59)].map((r=>ht.formatTimeValue(r,t.format,t.showSeconds)))}convertFormat(t,r,e){const i=ht.parseTimeString(t,r);if(!i)return null;const o=this.host.getConfig();return ht.formatTimeValue(i,e,o.showSeconds)}getTimeDescription(t){const r=this.host.getConfig(),e=ht.formatTimeValue(t,r.format,r.showSeconds),i=ht.getCurrentTime(),o=ht.compareTime(t,i);return 0===o?`${e} (now)`:o>0?`${e} (future)`:`${e} (past)`}}const yt=t`
+  ${t`
+  :host {
+    /* ========================================
+     * TIMEPICKER THEME-AWARE VARIABLES
+     * Uses CSS custom properties from theme files
+     * ======================================== */
+
+    /* Base timepicker styling - uses theme variables with fallbacks */
+    --nuraly-timepicker-local-background-color: var(--nuraly-color-timepicker-background, #ffffff);
+    --nuraly-timepicker-local-text-color: var(--nuraly-color-timepicker-text, rgba(0, 0, 0, 0.88));
+    --nuraly-timepicker-local-font-family: var(--nuraly-font-family-timepicker, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif);
+    --nuraly-timepicker-local-font-size: var(--nuraly-font-size-timepicker, 14px);
+    
+    /* Timepicker borders - theme-aware */
+    --nuraly-timepicker-local-border-color: var(--nuraly-color-timepicker-border, #d9d9d9);
+    --nuraly-timepicker-local-border-width: var(--nuraly-border-width-timepicker, 1px);
+    --nuraly-timepicker-local-border-radius: var(--nuraly-border-radius-timepicker, 6px);
+    --nuraly-timepicker-local-border-radius-sm: var(--nuraly-border-radius-timepicker-sm, calc(var(--nuraly-border-radius-timepicker, 6px) * 0.5));
+    
+    /* Primary and selection colors - theme-aware */
+    --nuraly-timepicker-local-primary-color: var(--nuraly-color-timepicker-primary, #1890ff);
+    --nuraly-timepicker-local-focus-color: var(--nuraly-color-timepicker-focus, #1890ff);
+    --nuraly-timepicker-local-border-color-hover: var(--nuraly-color-timepicker-border-hover, #1890ff);
+    --nuraly-timepicker-local-selected-color: var(--nuraly-color-timepicker-selected, #1890ff);
+    --nuraly-timepicker-local-selected-text-color: var(--nuraly-color-timepicker-selected-text, #ffffff);
+    --nuraly-timepicker-local-hover-color: var(--nuraly-color-timepicker-hover, #f5f5f5);
+    --nuraly-timepicker-local-clock-hand-color: var(--nuraly-color-timepicker-clock-hand, #1890ff);
+    
+    /* Control item states - theme-aware */
+    --nuraly-timepicker-local-control-item-bg-hover: var(--nuraly-color-timepicker-control-item-bg-hover, #f5f5f5);
+    --nuraly-timepicker-local-control-item-bg-active: var(--nuraly-color-timepicker-control-item-bg-active, #e6f7ff);
+    
+    /* Text colors - theme-aware */
+    --nuraly-timepicker-local-text-color-secondary: var(--nuraly-color-timepicker-text-secondary, rgba(0, 0, 0, 0.45));
+    --nuraly-timepicker-local-text-color-disabled: var(--nuraly-color-timepicker-text-disabled, rgba(0, 0, 0, 0.25));
+    
+    /* Disabled states - theme-aware */
+    --nuraly-timepicker-local-disabled-color: var(--nuraly-color-timepicker-disabled, #f5f5f5);
+    --nuraly-timepicker-local-disabled-bg: var(--nuraly-color-timepicker-disabled-bg, #f5f5f5);
+    --nuraly-timepicker-local-disabled-text-color: var(--nuraly-color-timepicker-disabled-text, rgba(0, 0, 0, 0.25));
+    --nuraly-timepicker-local-disabled-opacity: var(--nuraly-opacity-timepicker-disabled, 1);
+    
+    /* Input field colors - theme-aware */
+    --nuraly-timepicker-local-input-background: var(--nuraly-color-timepicker-input-background, #ffffff);
+    --nuraly-timepicker-local-input-border-color: var(--nuraly-color-timepicker-input-border, #d9d9d9);
+    --nuraly-timepicker-local-input-focus-border-color: var(--nuraly-color-timepicker-input-focus-border, #1890ff);
+    --nuraly-timepicker-local-input-text-color: var(--nuraly-color-timepicker-input-text, rgba(0, 0, 0, 0.88));
+    --nuraly-timepicker-local-input-placeholder-color: var(--nuraly-color-timepicker-input-placeholder, rgba(0, 0, 0, 0.25));
+    
+    /* Dropdown and clock colors - theme-aware */
+    --nuraly-timepicker-local-dropdown-background: var(--nuraly-color-timepicker-dropdown-background, #ffffff);
+    --nuraly-timepicker-local-clock-background: var(--nuraly-color-timepicker-clock-background, #ffffff);
+    --nuraly-timepicker-local-clock-text-color: var(--nuraly-color-timepicker-clock-text, rgba(0, 0, 0, 0.88));
+    --nuraly-timepicker-local-clock-face-color: var(--nuraly-color-timepicker-clock-face, rgba(0, 0, 0, 0.45));
+    --nuraly-timepicker-local-clock-border-color: var(--nuraly-color-timepicker-clock-border, #f0f0f0);
+    
+    /* Item selection colors - theme-aware */
+    --nuraly-timepicker-local-item-hover-color: var(--nuraly-color-timepicker-item-hover, #f5f5f5);
+    --nuraly-timepicker-local-item-active-color: var(--nuraly-color-timepicker-item-active, #e6f7ff);
+    --nuraly-timepicker-local-item-selected-color: var(--nuraly-color-timepicker-item-selected, #1890ff);
+    --nuraly-timepicker-local-item-selected-text-color: var(--nuraly-color-timepicker-item-selected-text, #ffffff);
+    
+    /* Error/warning/success colors - theme-aware */
+    --nuraly-timepicker-local-error-color: var(--nuraly-color-timepicker-error, #ff4d4f);
+    --nuraly-timepicker-local-warning-color: var(--nuraly-color-timepicker-warning, #faad14);
+    --nuraly-timepicker-local-success-color: var(--nuraly-color-timepicker-success, #52c41a);
+    
+    /* Layout and sizing - theme-aware */
+    --nuraly-timepicker-local-width: var(--nuraly-size-timepicker-width, 120px);
+    --nuraly-timepicker-local-height: var(--nuraly-size-timepicker-height, 32px);
+    --nuraly-timepicker-local-dropdown-width: var(--nuraly-size-timepicker-dropdown-width, 180px);
+    --nuraly-timepicker-local-clock-size: var(--nuraly-size-timepicker-clock, 200px);
+    
+    /* Typography - theme-aware */
+    --nuraly-timepicker-local-font-weight: var(--nuraly-font-weight-timepicker, 400);
+    --nuraly-timepicker-local-line-height: var(--nuraly-line-height-timepicker, 1.5715);
+    --nuraly-timepicker-local-clock-font-size: var(--nuraly-font-size-timepicker-clock, 14px);
+    
+    /* Spacing - theme-aware */
+    --nuraly-timepicker-local-gap: var(--nuraly-spacing-timepicker-gap, 4px);
+    --nuraly-timepicker-local-dropdown-padding: var(--nuraly-spacing-timepicker-dropdown-padding, 8px);
+    --nuraly-timepicker-local-input-padding: var(--nuraly-spacing-timepicker-input-padding, 4px 11px);
+    --nuraly-timepicker-local-padding: var(--nuraly-spacing-timepicker-padding, 4px 11px);
+    
+    /* Borders - theme-aware */
+    --nuraly-timepicker-local-input-border-width: var(--nuraly-border-width-timepicker-input, 1px);
+    --nuraly-timepicker-local-focus-border-width: var(--nuraly-border-width-timepicker-focus, 2px);
+    
+    /* Shadows - theme-aware */
+    --nuraly-timepicker-local-shadow-color: var(--nuraly-color-timepicker-shadow, rgba(0, 0, 0, 0.15));
+    --nuraly-timepicker-local-box-shadow: var(--nuraly-shadow-timepicker-box, 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05));
+    --nuraly-timepicker-local-input-focus-shadow: var(--nuraly-shadow-timepicker-input-focus, 0 0 0 2px rgba(24, 144, 255, 0.2));
+    
+    /* States - theme-aware */
+    --nuraly-timepicker-local-hover-opacity: var(--nuraly-opacity-timepicker-hover, 1);
+    
+    /* Animation and transitions - theme-aware */
+    --nuraly-timepicker-local-transition-duration: var(--nuraly-transition-duration-timepicker, 0.2s);
+    --nuraly-timepicker-local-transition-timing: var(--nuraly-transition-timing-timepicker, ease-in-out);
+    
+    /* Z-index - theme-aware */
+    --nuraly-timepicker-local-dropdown-z-index: var(--nuraly-z-index-timepicker-dropdown, 1050);
+    
+    /* Icon sizes - theme-aware */
+    --nuraly-timepicker-local-icon-size: var(--nuraly-size-timepicker-icon, 14px);
+    
+    /* Size variants - theme-aware */
+    --nuraly-timepicker-local-small-font-size: var(--nuraly-font-size-timepicker-small, 12px);
+    --nuraly-timepicker-local-small-padding: var(--nuraly-spacing-timepicker-small-padding, 0px 7px);
+    --nuraly-timepicker-local-small-height: var(--nuraly-size-timepicker-small-height, 24px);
+    
+    --nuraly-timepicker-local-medium-font-size: var(--nuraly-font-size-timepicker-medium, 14px);
+    --nuraly-timepicker-local-medium-padding: var(--nuraly-spacing-timepicker-medium-padding, 4px 11px);
+    --nuraly-timepicker-local-medium-height: var(--nuraly-size-timepicker-medium-height, 32px);
+    
+    --nuraly-timepicker-local-large-font-size: var(--nuraly-font-size-timepicker-large, 16px);
+    --nuraly-timepicker-local-large-padding: var(--nuraly-spacing-timepicker-large-padding, 6px 11px);
+    --nuraly-timepicker-local-large-height: var(--nuraly-size-timepicker-large-height, 40px);
+  }
+`
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */}:host{display:block;font-family:var(--nuraly-timepicker-local-font-family);font-size:var(--nuraly-timepicker-local-font-size);font-weight:var(--nuraly-timepicker-local-font-weight)}:host([disabled]){opacity:var(--nuraly-timepicker-local-disabled-opacity);pointer-events:none}.time-picker{position:relative;display:inline-block;width:100%}.time-picker__input-wrapper:hover:not(.time-picker--disabled) nr-input{--nuraly-input-border-color:var(--nuraly-timepicker-local-border-color-hover)}.time-picker--open .time-picker__input-wrapper nr-input,.time-picker__input-wrapper nr-input:focus,.time-picker__input-wrapper:focus-within nr-input{--nuraly-input-border-color:var(--nuraly-timepicker-local-focus-color);--nuraly-input-box-shadow:0 0 0 2px var(--nuraly-timepicker-local-focus-color) 33}.time-picker--disabled .time-picker__input-wrapper nr-input{--nuraly-input-background-color:var(--nuraly-timepicker-local-disabled-bg);--nuraly-input-border-color:var(--nuraly-timepicker-local-border-color);--nuraly-input-text-color:var(--nuraly-timepicker-local-text-color-disabled);cursor:not-allowed;opacity:.6}.time-picker__input-wrapper{position:relative;width:100%}.time-picker__input-wrapper nr-input{width:100%}.time-picker__trigger{padding:4px!important;min-width:auto!important;width:24px!important;height:24px!important;border-radius:var(--nuraly-timepicker-local-border-radius-sm)!important}.time-picker__trigger svg{width:16px;height:16px;color:var(--nuraly-timepicker-local-text-color-secondary);transition:color .2s ease}.time-picker__trigger:hover svg{color:var(--nuraly-timepicker-local-primary-color)}.time-picker__trigger:hover{color:var(--nuraly-timepicker-local-primary-color)}.time-picker__trigger:disabled{color:var(--nuraly-timepicker-local-text-color-disabled);cursor:not-allowed}.time-picker__trigger svg{width:14px;height:14px}.time-picker__dropdown{position:absolute;z-index:1000;background-color:var(--nuraly-timepicker-local-background-color);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--nuraly-timepicker-local-border-color);border-radius:var(--nuraly-timepicker-local-border-radius);box-shadow:var(--nuraly-timepicker-local-box-shadow);width:100%;min-width:180px;opacity:1;visibility:visible;transform:translateY(0);transition:all .2s ease-in-out;isolation:isolate;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transform:translateZ(0);animation:dropdown-enter .15s ease-out;overflow:hidden}.time-picker__dropdown.placement-top{animation:dropdown-enter-top .15s ease-out}@keyframes dropdown-enter{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes dropdown-enter-top{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.time-picker__columns{display:flex;max-height:216px;overflow:hidden;border-radius:var(--nuraly-timepicker-local-border-radius);background:var(--nuraly-timepicker-local-background-color);padding:4px 0}.time-picker__column{flex:1;border-right:1px solid rgba(0,0,0,.06);background:0 0;overflow:hidden;position:relative;min-width:60px}.time-picker__column:last-child{border-right:none}.time-picker__column-list{max-height:216px;overflow-y:scroll;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.06) transparent;padding:4px 2px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.time-picker__column-list::-webkit-scrollbar{width:6px;-webkit-appearance:none}.time-picker__column-list::-webkit-scrollbar-track{background:rgba(0,0,0,.04);margin:8px 0;border-radius:var(--nuraly-timepicker-local-border-radius-sm)}.time-picker__column-list::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.2);border-radius:var(--nuraly-timepicker-local-border-radius-sm);transition:background-color .2s ease;min-height:20px}.time-picker__column-list::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.3)}.time-picker__column-list{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) rgba(0,0,0,.04);scroll-behavior:smooth}.time-picker__column-item{display:flex;align-items:center;justify-content:center;padding:4px 8px;color:var(--nuraly-timepicker-local-text-color);font-size:var(--nuraly-timepicker-local-font-size);font-weight:var(--nuraly-timepicker-local-font-weight);cursor:pointer;transition:all .2s ease-in-out;border-radius:var(--nuraly-timepicker-local-border-radius);position:relative;user-select:none;line-height:var(--nuraly-timepicker-local-line-height);min-height:28px;margin:1px 2px}.time-picker__column-item:hover{background-color:var(--nuraly-timepicker-local-control-item-bg-hover);color:var(--nuraly-timepicker-local-primary-color)}.time-picker__column-item:active{background-color:var(--nuraly-timepicker-local-control-item-bg-active);color:var(--nuraly-timepicker-local-primary-color)}.time-picker__column-item--selected{background-color:var(--nuraly-timepicker-local-control-item-bg-active);color:var(--nuraly-timepicker-local-primary-color);font-weight:600;border-radius:var(--nuraly-timepicker-local-border-radius)}.time-picker__column-item--selected:hover{background-color:var(--nuraly-timepicker-local-control-item-bg-active);color:var(--nuraly-timepicker-local-primary-color)}.time-picker__column-item--focused{background-color:var(--nuraly-timepicker-local-control-item-bg-hover);outline:2px solid var(--nuraly-timepicker-local-focus-color);outline-offset:-2px;border-radius:var(--nuraly-timepicker-local-border-radius);color:var(--nuraly-timepicker-local-primary-color)}.time-picker__column-item--disabled{opacity:.4;cursor:not-allowed;color:var(--timepicker-text-color-disabled)}.time-picker__column-item--disabled:hover{background-color:transparent;color:var(--timepicker-text-color-disabled)}.time-picker__dropdown--top{top:auto;bottom:100%;margin-top:0;margin-bottom:4px}.time-picker__clock-container{padding:12px;display:flex;flex-direction:column;gap:12px;background:var(--timepicker-background-color)}.time-picker__digital-inputs{display:flex;align-items:center;gap:8px;justify-content:center;padding:8px 12px;border-bottom:1px solid var(--timepicker-border-color)}.time-picker__time-input{width:56px;height:32px;text-align:center;padding:4px 8px;border:1px solid var(--timepicker-border-color);border-radius:var(--timepicker-border-radius);font-size:14px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;color:var(--timepicker-text-color);background-color:var(--timepicker-background-color);transition:all .3s;outline:0}.time-picker__time-input:hover{border-color:var(--timepicker-primary-color-hover)}.time-picker__time-input:focus{border-color:var(--timepicker-primary-color);box-shadow:0 0 0 2px var(--timepicker-primary-color-active)}.time-picker__separator{font-weight:600;color:var(--timepicker-text-color)}.time-picker__period-toggle{display:flex;flex-direction:column;border:1px solid var(--timepicker-border-color);border-radius:var(--timepicker-border-radius);overflow:hidden;margin-left:8px}.time-picker__period-button{background:var(--timepicker-background-color);border:none;padding:6px 12px;font-size:12px;color:var(--timepicker-text-color);cursor:pointer;transition:all .3s;min-width:44px;height:24px;display:flex;align-items:center;justify-content:center}.time-picker__period-button:hover{background-color:var(--timepicker-item-hover-bg);color:var(--timepicker-text-color)}.time-picker__period-button--active{background-color:var(--timepicker-primary-color);color:#fff}.time-picker__period-button+.time-picker__period-button{border-top:1px solid var(--timepicker-border-color)}.time-picker__clock{width:var(--timepicker-clock-size);height:var(--timepicker-clock-size);border:1px solid var(--timepicker-border-color);border-radius:50%;background-color:var(--timepicker-background-color);position:relative;margin:0 auto;user-select:none}.time-picker__clock-face{width:100%;height:100%;position:relative}.time-picker__clock-number{position:absolute;color:var(--timepicker-text-color);font-size:14px;font-weight:400;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:50%;transition:all .3s;transform:translate(-50%,-50%)}.time-picker__clock-number:hover{background-color:var(--timepicker-item-hover-bg);color:var(--timepicker-text-color)}.time-picker__clock-number--selected{background-color:var(--timepicker-primary-color);color:#fff}.time-picker__clock-hand{position:absolute;background-color:var(--timepicker-primary-color);transform-origin:bottom center;border-radius:2px 2px 0 0}.time-picker__clock-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:6px;height:6px;background-color:var(--timepicker-primary-color);border-radius:50%;z-index:10}.time-picker__mode-buttons{display:flex;gap:8px;justify-content:center;margin-bottom:8px}.time-picker__mode-button{padding:6px 16px;border:1px solid var(--timepicker-border-color);background:var(--timepicker-background-color);color:var(--timepicker-text-color);border-radius:var(--timepicker-border-radius);cursor:pointer;font-size:14px;transition:all .3s;outline:0}.time-picker__mode-button:hover{background-color:var(--timepicker-item-hover-bg);border-color:var(--timepicker-primary-color-hover)}.time-picker__mode-button--active{background-color:var(--timepicker-primary-color);color:#fff;border-color:var(--timepicker-primary-color)}.time-picker__actions{display:flex;gap:8px;justify-content:flex-end;padding:8px 12px;border-top:1px solid rgba(0,0,0,.06);background:var(--timepicker-background-color);border-bottom-left-radius:8px;border-bottom-right-radius:8px}.time-picker__actions nr-button{border-radius:var(--nuraly-timepicker-local-border-radius);font-weight:400;font-size:14px;height:28px}.time-picker__label{display:block;margin-bottom:8px;font-weight:400;color:var(--timepicker-text-color);font-size:14px}.time-picker__helper-text{font-size:14px;margin-top:4px;color:var(--timepicker-text-color-secondary)}.time-picker__helper-text--error{color:var(--timepicker-error-color)}:host([size=small]){--timepicker-height:32px;--timepicker-font-size:12px;--timepicker-padding:4px 8px;--timepicker-clock-size:240px}:host([size=large]){--timepicker-height:48px;--timepicker-font-size:16px;--timepicker-padding:12px 16px;--timepicker-clock-size:320px}:host([variant=outlined]) .time-picker__input{background-color:transparent}:host([variant=filled]) .time-picker__input{border:none;background-color:var(--timepicker-border-color) 33;border-bottom:2px solid var(--timepicker-border-color);border-radius:var(--timepicker-border-radius) var(--timepicker-border-radius) 0 0}:host([variant=filled]) .time-picker__input:focus{border-bottom-color:var(--timepicker-focus-color);box-shadow:none}:host([disabled]) .time-picker{pointer-events:none;opacity:.6}.time-picker__dropdown{opacity:0;transform:translateY(-8px);transition:opacity .2s,transform .2s}.time-picker__dropdown--open{opacity:1;transform:translateY(0)}.time-picker__time-input::-webkit-inner-spin-button,.time-picker__time-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.time-picker__time-input[type=number]{-moz-appearance:textfield}@media (max-width:480px){.time-picker__clock{--timepicker-clock-size:240px}.time-picker__dropdown{left:50%;transform:translateX(-50%);width:90vw;max-width:320px}}`;var gt=function(t,r,i,e){for(var a,n=arguments.length,o=n<3?r:null===e?e=Object.getOwnPropertyDescriptor(r,i):e,s=t.length-1;s>=0;s--)(a=t[s])&&(o=(n<3?a(o):n>3?a(r,i,o):a(r,i))||o);return n>3&&o&&Object.defineProperty(r,i,o),o};let ft=class extends(l(e)){constructor(){super(),this.value="",this.name="",this.placeholder="Select time",this.format=B.TwentyFourHour,this.showSeconds=!1,this.disabled=!1,this.readonly=!1,this.required=!1,this.helperText="",this.label="",this.size="medium",this.variant="outlined",this.placement=W.Bottom,this.scrollBehavior="instant",this.inputValue="",this.state=K.Default,this.validationMessage="",this.dropdownController=new u(this),this.selectionController=new mt(this),this.validationController=new vt(this),this.formattingController=new bt(this)}connectedCallback(){super.connectedCallback(),this.updateConstraints(),this.value&&this.setTimeFromValue(this.value),this.addEventListener("click",this.handleComponentClick.bind(this)),document.addEventListener("click",this.handleDocumentClick.bind(this))}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.handleDocumentClick.bind(this))}updated(t){super.updated(t),t.has("value")&&this.value!==this.inputValue&&(this.setTimeFromValue(this.value),this.dropdownController.isOpen&&setTimeout((()=>{this.scrollToSelectedTime()}),50)),this.shouldUpdateConstraints(t)&&this.updateConstraints(),this.setupDropdownElements()}setupDropdownElements(){var t,r;const i=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector(".time-picker__dropdown"),e=null===(r=this.shadowRoot)||void 0===r?void 0:r.querySelector(".time-picker__input-wrapper");i&&e&&this.dropdownController.setElements(i,e)}render(){const t={"time-picker":!0,"time-picker--open":this.dropdownController.isOpen,"time-picker--disabled":this.disabled,"time-picker--readonly":this.readonly,"time-picker--error":this.state===K.Error};return r`<div class="${s(t)}" data-theme="${this.currentTheme}" part="wrapper">${this.renderLabel()} ${this.renderInput()} ${this.renderDropdown()} ${this.renderHelperText()}</div>`}open(){this.dropdownController.open(),setTimeout((()=>{this.scrollToSelectedTime()}),50)}close(){this.dropdownController.close()}clear(){this.value="",this.inputValue="",this.selectionController.clearSelection()}setToNow(){const t=ht.getCurrentTime();this.selectionController.selectTime(t),this.updateInputValue(),this.dropdownController.isOpen&&setTimeout((()=>{this.scrollToSelectedTime()}),10)}validate(){const t=this.selectionController.getSelectedTime();return!t||this.validationController.validateConstraints(t)}validateTime(t){return this.validationController.validateConstraints(t)}isHourValid(t,r){const i=Object.assign(Object.assign({},r),{hours:t});return this.validateTime(i)}isMinuteValid(t,r){const i=Object.assign(Object.assign({},r),{minutes:t});return this.validateTime(i)}isSecondValid(t,r){const i=Object.assign(Object.assign({},r),{seconds:t});return this.validateTime(i)}renderLabel(){return this.label?r`<label class="time-picker__label" part="label" for="time-input">${this.label} ${this.required?r`<span class="time-picker__required">*</span>`:i}</label>`:i}renderInput(){const t=this.getFormatPlaceholder();return r`<div class="time-picker__input-wrapper" part="input-wrapper"><nr-input id="time-input" part="input" type="calendar" .value="${this.inputValue}" placeholder="${this.placeholder||t}" ?disabled="${this.disabled}" ?readonly="${!1}" ?required="${this.required}" .state="${this.state===K.Error?"error":"default"}" @click="${this.handleInputClick}" @nr-input="${this.handleInputChange}" @nr-blur="${this.handleInputBlur}"></nr-input></div>`}renderDropdown(){return this.dropdownController.isOpen?r`<div class="time-picker__dropdown time-picker__dropdown--open" part="dropdown" @click="${this.handleDropdownClick}">${this.renderColumnPicker()} ${this.renderActions()}</div>`:i}renderColumnPicker(){const t=this.selectionController.getSelectedTime(),e=this.getConfig();return r`<div class="time-picker__columns" part="columns">${this.renderHourColumn(t,e)} ${this.renderMinuteColumn(t)} ${this.showSeconds?this.renderSecondColumn(t):i}</div>`}renderHourColumn(t,i){const e=i.format===B.TwelveHour?Array.from({length:12},((t,r)=>0===r?12:r)):Array.from({length:24},((t,r)=>r)),a=t&&i.format===B.TwelveHour?this.formattingController.formatHours(t.hours):null==t?void 0:t.hours;return r`<div class="time-picker__column" part="hour-column"><div class="time-picker__column-list">${e.map((e=>{let n=e;if(i.format===B.TwelveHour&&t){const r=this.formattingController.getPeriod(t.hours);n=12===e?r===Y.AM?0:12:r===Y.AM?e:e+12}const o=t||tt,s=this.isHourValid(n,o);return r`<div class="time-picker__column-item ${!!t&&e===a?"time-picker__column-item--selected":""} ${s?"":"time-picker__column-item--disabled"}" @click="${s?()=>this.handleHourSelect(e,i.format):null}">${e.toString().padStart(2,"0")}</div>`}))}</div></div>`}renderMinuteColumn(t){const i=Array.from({length:60},((t,r)=>r));return r`<div class="time-picker__column" part="minute-column"><div class="time-picker__column-list">${i.map((i=>{const e=t||tt,a=this.isMinuteValid(i,e),n=!!t&&i===t.minutes;return r`<div class="time-picker__column-item ${n?"time-picker__column-item--selected":""} ${a?"":"time-picker__column-item--disabled"}" @click="${a?()=>this.handleMinuteSelect(i):null}">${i.toString().padStart(2,"0")}</div>`}))}</div></div>`}renderSecondColumn(t){const i=Array.from({length:60},((t,r)=>r));return r`<div class="time-picker__column" part="second-column"><div class="time-picker__column-list">${i.map((i=>{const e=t||tt,a=this.isSecondValid(i,e),n=!!t&&i===t.seconds;return r`<div class="time-picker__column-item ${n?"time-picker__column-item--selected":""} ${a?"":"time-picker__column-item--disabled"}" @click="${a?()=>this.handleSecondSelect(i):null}">${i.toString().padStart(2,"0")}</div>`}))}</div></div>`}renderActions(){return r`<div class="time-picker__actions"><nr-button type="ghost" size="small" @click="${()=>this.setToNow()}">Now</nr-button><nr-button type="primary" size="small" @click="${this.handleOkClick}">OK</nr-button></div>`}renderHelperText(){const t=this.validationMessage||this.helperText;if(!t)return i;const e=this.state===K.Error||!!this.validationMessage;return r`<div class="time-picker__helper-text ${e?"time-picker__helper-text--error":""}" part="helper-text">${t}</div>`}scrollToSelectedTime(){try{const t=this.selectionController.getSelectedTime();if(!t)return;this.scrollToSelectedHour(t),this.scrollToSelectedMinute(t),this.showSeconds&&this.scrollToSelectedSecond(t)}catch(t){console.warn("Failed to scroll to selected time:",t)}}scrollToSelectedHour(t){var r;const i=this.getConfig(),e=null===(r=this.shadowRoot)||void 0===r?void 0:r.querySelector(".time-picker__column:first-child .time-picker__column-list");if(!e)return;let a;a=i.format===B.TwelveHour?0===t.hours||12===t.hours?12:t.hours>12?t.hours-12:t.hours:t.hours;const n=e.querySelector(`.time-picker__column-item:nth-child(${this.getHourIndex(a,i.format)+1})`);n&&n.scrollIntoView({behavior:this.scrollBehavior,block:"center",inline:"nearest"})}scrollToSelectedMinute(t){var r;const i=null===(r=this.shadowRoot)||void 0===r?void 0:r.querySelector(".time-picker__column:nth-child(2) .time-picker__column-list");if(!i)return;const e=i.querySelector(`.time-picker__column-item:nth-child(${t.minutes+1})`);e&&e.scrollIntoView({behavior:this.scrollBehavior,block:"center",inline:"nearest"})}scrollToSelectedSecond(t){var r;const i=null===(r=this.shadowRoot)||void 0===r?void 0:r.querySelector(".time-picker__column:nth-child(3) .time-picker__column-list");if(!i)return;const e=i.querySelector(`.time-picker__column-item:nth-child(${t.seconds+1})`);e&&e.scrollIntoView({behavior:this.scrollBehavior,block:"center",inline:"nearest"})}getHourIndex(t,r){return r===B.TwelveHour&&12===t?0:t}handleComponentClick(t){t.stopPropagation()}handleDocumentClick(t){var r;if(this.dropdownController.isOpen){const i=t.target;this.contains(i)||(null===(r=this.shadowRoot)||void 0===r?void 0:r.contains(i))||(this.dropdownController.close(),this.dispatchEvent(new CustomEvent(Q.BLUR,{bubbles:!0,composed:!0})))}}handleDropdownClick(t){t.stopPropagation()}handleOkClick(){this.dropdownController.close();const t=this.selectionController.getSelectedTime();t&&this.dispatchEvent(new CustomEvent(Q.TIME_CHANGE,{bubbles:!0,composed:!0,detail:{value:this.value,time:t}})),this.dispatchEvent(new CustomEvent(Q.BLUR,{bubbles:!0,composed:!0}))}handleInputBlur(){setTimeout((()=>{var t;const r=document.activeElement;this.contains(r)||(null===(t=this.shadowRoot)||void 0===t?void 0:t.contains(r))||this.dispatchEvent(new CustomEvent(Q.BLUR,{bubbles:!0,composed:!0}))}),150)}handleInputClick(t){t.preventDefault(),t.stopPropagation(),this.disabled||this.dropdownController.isOpen||(this.dropdownController.open(),setTimeout((()=>{this.scrollToSelectedTime()}),50),this.dispatchEvent(new CustomEvent(Q.FOCUS,{bubbles:!0,composed:!0})))}handleInputChange(t){var r;if(this.disabled)return;const i=(null===(r=t.detail)||void 0===r?void 0:r.value)||"";this.inputValue=i;const e=this.formattingController.parseInputValue(i);e?this.validateTime(e)?(this.selectionController.selectTime(e),this.value=this.formattingController.formatForInput(e),this.state=K.Default,this.dropdownController.isOpen&&setTimeout((()=>{this.scrollToSelectedTime()}),10),this.dispatchEvent(new CustomEvent(Q.TIME_CHANGE,{bubbles:!0,composed:!0,detail:{value:this.value,time:e}}))):this.state=K.Error:""===i?(this.selectionController.clearSelection(),this.value="",this.state=K.Default,this.dispatchEvent(new CustomEvent(Q.TIME_CHANGE,{bubbles:!0,composed:!0,detail:{value:"",time:null}}))):this.state=K.Error,this.requestUpdate()}handleHourSelect(t,r){const i=this.selectionController.getSelectedTime()||ht.getCurrentTime();let e=t;if(r===B.TwelveHour){const r=this.formattingController.getPeriod(i.hours);e=12===t?r===Y.AM?0:12:r===Y.AM?t:t+12}const a=Object.assign(Object.assign({},i),{hours:e});this.validateTime(a)&&(this.selectionController.selectTime(a),this.updateInputValue())}handleMinuteSelect(t){const r=this.selectionController.getSelectedTime()||ht.getCurrentTime(),i=Object.assign(Object.assign({},r),{minutes:t});this.validateTime(i)&&(this.selectionController.selectTime(i),this.updateInputValue())}handleSecondSelect(t){const r=this.selectionController.getSelectedTime()||ht.getCurrentTime(),i=Object.assign(Object.assign({},r),{seconds:t});this.validateTime(i)&&(this.selectionController.selectTime(i),this.updateInputValue())}shouldUpdateConstraints(t){return t.has("minTime")||t.has("maxTime")||t.has("disabledTimes")||t.has("enabledTimes")}updateConstraints(){const t={minTime:this.minTime,maxTime:this.maxTime,disabledTimes:this.disabledTimes||[],enabledTimes:this.enabledTimes};this.validationController.setConstraints(t)}setTimeFromValue(t){this.selectionController.setTimeFromString(t)&&(this.inputValue=t,this.requestUpdate(),this.dropdownController.isOpen&&setTimeout((()=>{this.scrollToSelectedTime()}),50))}updateInputValue(){const t=this.selectionController.getSelectedTime();if(t){const r=this.formattingController.formatForDisplay(t);this.inputValue=r,this.value=r,this.dispatchEvent(new CustomEvent(Q.TIME_CHANGE,{detail:{value:r,time:t},bubbles:!0,composed:!0}))}}getConfig(){return{format:this.format,showSeconds:this.showSeconds,step:{hours:Z.One,minutes:Z.One,seconds:Z.One},use12HourClock:this.format===B.TwelveHour,minuteInterval:1,secondInterval:1}}getCurrentTime(){return this.selectionController.getSelectedTime()||tt}setTime(t){this.selectionController.selectTime(t),this.updateInputValue(),this.dropdownController.isOpen&&setTimeout((()=>{this.scrollToSelectedTime()}),10)}formatTime(t){return this.formattingController.formatForDisplay(t)}getFormatPlaceholder(){return this.format===B.TwelveHour?this.showSeconds?"HH:MM:SS AM/PM":"HH:MM AM/PM":this.showSeconds?"HH:MM:SS":"HH:MM"}parseTime(t){return this.formattingController.parseInputValue(t)}};ft.styles=[yt],gt([a({type:String})],ft.prototype,"value",void 0),gt([a({type:String})],ft.prototype,"name",void 0),gt([a({type:String})],ft.prototype,"placeholder",void 0),gt([a({type:String})],ft.prototype,"format",void 0),gt([a({type:Boolean,attribute:"show-seconds"})],ft.prototype,"showSeconds",void 0),gt([a({type:Boolean})],ft.prototype,"disabled",void 0),gt([a({type:Boolean})],ft.prototype,"readonly",void 0),gt([a({type:Boolean})],ft.prototype,"required",void 0),gt([a({type:String,attribute:"min-time"})],ft.prototype,"minTime",void 0),gt([a({type:String,attribute:"max-time"})],ft.prototype,"maxTime",void 0),gt([a({type:Array,attribute:"disabled-times"})],ft.prototype,"disabledTimes",void 0),gt([a({type:Array,attribute:"enabled-times"})],ft.prototype,"enabledTimes",void 0),gt([a({type:String,attribute:"helper-text"})],ft.prototype,"helperText",void 0),gt([a({type:String})],ft.prototype,"label",void 0),gt([a({type:String})],ft.prototype,"size",void 0),gt([a({type:String})],ft.prototype,"variant",void 0),gt([a({type:String})],ft.prototype,"placement",void 0),gt([a({type:String,attribute:"scroll-behavior"})],ft.prototype,"scrollBehavior",void 0),gt([n()],ft.prototype,"inputValue",void 0),gt([n()],ft.prototype,"state",void 0),gt([n()],ft.prototype,"validationMessage",void 0),ft=gt([o("nr-timepicker")],ft);export{st as CLOCK_CONTAINER_CLASS,pt as CLOCK_FACE,at as DEFAULT_12H_TIME_FORMAT,nt as DEFAULT_12H_TIME_FORMAT_WITH_SECONDS,ut as DEFAULT_STEPS,rt as DEFAULT_TIME_CONFIG,it as DEFAULT_TIME_FORMAT,X as DEFAULT_TIME_FORMATS,G as DEFAULT_TIME_FORMATS_WITH_SECONDS,et as DEFAULT_TIME_FORMAT_WITH_SECONDS,tt as EMPTY_TIME_VALUE,ft as NrTimePickerElement,ct as TIME_BOUNDARIES,ot as TIME_INPUT_FIELD_ID,dt as TIME_PICKER_CLASSES,J as TIME_PICKER_CONSTANTS,Q as TIME_PICKER_EVENTS,lt as TIME_VALIDATION_PATTERNS,B as TimeFormat,Y as TimePeriod,bt as TimePickerFormattingController,L as TimePickerMode,W as TimePickerPlacement,mt as TimePickerSelectionController,F as TimePickerSize,K as TimePickerState,vt as TimePickerValidationController,q as TimePickerVariant,Z as TimeStep,ht as TimeUtils};
+ */}
+  :host {
+    display: block;
+    font-family: var(--nuraly-timepicker-local-font-family);
+    font-size: var(--nuraly-timepicker-local-font-size);
+    font-weight: var(--nuraly-timepicker-local-font-weight);
+  }
+
+  /* Host attribute selectors for configuration */
+  :host([disabled]) {
+    opacity: var(--nuraly-timepicker-local-disabled-opacity);
+    pointer-events: none;
+  }
+
+  .time-picker {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+  }
+
+  /* Input wrapper hover and focus states matching select component */
+  .time-picker__input-wrapper:hover:not(.time-picker--disabled) nr-input {
+    --nuraly-input-border-color: var(--nuraly-timepicker-local-border-color-hover);
+  }
+
+  .time-picker__input-wrapper:focus-within nr-input,
+  .time-picker--open .time-picker__input-wrapper nr-input,
+  .time-picker__input-wrapper nr-input:focus {
+    --nuraly-input-border-color: var(--nuraly-timepicker-local-focus-color);
+    --nuraly-input-box-shadow: 0 0 0 2px var(--nuraly-timepicker-local-focus-color)33;
+  }
+
+  /* Disabled state styling */
+  .time-picker--disabled .time-picker__input-wrapper nr-input {
+    --nuraly-input-background-color: var(--nuraly-timepicker-local-disabled-bg);
+    --nuraly-input-border-color: var(--nuraly-timepicker-local-border-color);
+    --nuraly-input-text-color: var(--nuraly-timepicker-local-text-color-disabled);
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .time-picker__input-wrapper {
+    position: relative;
+    width: 100%;
+  }
+
+  /* Style the nr-input component */
+  .time-picker__input-wrapper nr-input {
+    width: 100%;
+  }
+
+  /* Style the trigger button inside nr-input */
+  .time-picker__trigger {
+    padding: 4px !important;
+    min-width: auto !important;
+    width: 24px !important;
+    height: 24px !important;
+    border-radius: var(--nuraly-timepicker-local-border-radius-sm) !important;
+  }
+
+  .time-picker__trigger svg {
+    width: 16px;
+    height: 16px;
+    color: var(--nuraly-timepicker-local-text-color-secondary);
+    transition: color 0.2s ease;
+  }
+
+  .time-picker__trigger:hover svg {
+    color: var(--nuraly-timepicker-local-primary-color);
+  }
+
+  .time-picker__trigger:hover {
+    color: var(--nuraly-timepicker-local-primary-color);
+  }
+
+  .time-picker__trigger:disabled {
+    color: var(--nuraly-timepicker-local-text-color-disabled);
+    cursor: not-allowed;
+  }
+
+  .time-picker__trigger svg {
+    width: 14px;
+    height: 14px;
+  }
+
+    .time-picker__dropdown {
+    position: absolute;
+    z-index: 1000;
+    background-color: var(--nuraly-timepicker-local-background-color);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid var(--nuraly-timepicker-local-border-color);
+    border-radius: var(--nuraly-timepicker-local-border-radius);
+    box-shadow: var(--nuraly-timepicker-local-box-shadow);
+    width: 100%;
+    min-width: 180px;
+    /* Animation and positioning - simplified to match select */
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+    transition: all 0.2s ease-in-out;
+    /* Create new stacking context to prevent layering issues */
+    isolation: isolate;
+    /* Ensure solid background to prevent visual bleed-through */
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    /* Force above other elements */
+    transform: translateZ(0);
+    animation: dropdown-enter 0.15s ease-out;
+    overflow: hidden;
+  }
+
+  .time-picker__dropdown.placement-top {
+    animation: dropdown-enter-top 0.15s ease-out;
+  }
+
+  @keyframes dropdown-enter {
+    from {
+      opacity: 0;
+      transform: translateY(-8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes dropdown-enter-top {
+    from {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .time-picker__columns {
+    display: flex;
+    max-height: 216px;
+    overflow: hidden;
+    border-radius: var(--nuraly-timepicker-local-border-radius);
+    background: var(--nuraly-timepicker-local-background-color);
+    padding: 4px 0;
+  }
+
+  .time-picker__column {
+    flex: 1;
+    border-right: 1px solid rgba(0, 0, 0, 0.06);
+    background: transparent;
+    overflow: hidden;
+    position: relative;
+    min-width: 60px;
+  }
+
+  .time-picker__column:last-child {
+    border-right: none;
+  }
+
+  .time-picker__column-list {
+    max-height: 216px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(0, 0, 0, 0.06) transparent;
+    /* Custom scrollbar styling to match modern design */
+    padding: 4px 2px;
+    scroll-behavior: smooth;
+    /* Force scrollbar to always be visible */
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .time-picker__column-list::-webkit-scrollbar {
+    width: 6px;
+    /* Always show scrollbar */
+    -webkit-appearance: none;
+  }
+
+  .time-picker__column-list::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.04);
+    margin: 8px 0;
+    border-radius: var(--nuraly-timepicker-local-border-radius-sm);
+  }
+
+  .time-picker__column-list::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.2);
+    border-radius: var(--nuraly-timepicker-local-border-radius-sm);
+    transition: background-color 0.2s ease;
+    /* Ensure thumb is always visible */
+    min-height: 20px;
+  }
+
+  .time-picker__column-list::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+
+  .time-picker__column-list {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.04);
+    scroll-behavior: smooth;
+  }
+
+  .time-picker__column-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px 8px;
+    color: var(--nuraly-timepicker-local-text-color);
+    font-size: var(--nuraly-timepicker-local-font-size);
+    font-weight: var(--nuraly-timepicker-local-font-weight);
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+    border-radius: var(--nuraly-timepicker-local-border-radius);
+    position: relative;
+    user-select: none;
+    line-height: var(--nuraly-timepicker-local-line-height);
+    min-height: 28px;
+    margin: 1px 2px;
+  }
+
+  .time-picker__column-item:hover {
+    background-color: var(--nuraly-timepicker-local-control-item-bg-hover);
+    color: var(--nuraly-timepicker-local-primary-color);
+  }
+
+  .time-picker__column-item:active {
+    background-color: var(--nuraly-timepicker-local-control-item-bg-active);
+    color: var(--nuraly-timepicker-local-primary-color);
+  }
+
+  .time-picker__column-item--selected {
+    background-color: var(--nuraly-timepicker-local-control-item-bg-active);
+    color: var(--nuraly-timepicker-local-primary-color);
+    font-weight: 600;
+    border-radius: var(--nuraly-timepicker-local-border-radius);
+  }
+
+  .time-picker__column-item--selected:hover {
+    background-color: var(--nuraly-timepicker-local-control-item-bg-active);
+    color: var(--nuraly-timepicker-local-primary-color);
+  }
+
+  .time-picker__column-item--focused {
+    background-color: var(--nuraly-timepicker-local-control-item-bg-hover);
+    outline: 2px solid var(--nuraly-timepicker-local-focus-color);
+    outline-offset: -2px;
+    border-radius: var(--nuraly-timepicker-local-border-radius);
+    color: var(--nuraly-timepicker-local-primary-color);
+  }
+
+  .time-picker__column-item--disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    color: var(--timepicker-text-color-disabled);
+  }
+
+  .time-picker__column-item--disabled:hover {
+    background-color: transparent;
+    color: var(--timepicker-text-color-disabled);
+  }
+
+  .time-picker__dropdown--top {
+    top: auto;
+    bottom: 100%;
+    margin-top: 0;
+    margin-bottom: 4px;
+  }
+
+  .time-picker__clock-container {
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    background: var(--timepicker-background-color);
+  }
+
+  .time-picker__digital-inputs {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    justify-content: center;
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--timepicker-border-color);
+  }
+
+  .time-picker__time-input {
+    width: 56px;
+    height: 32px;
+    text-align: center;
+    padding: 4px 8px;
+    border: 1px solid var(--timepicker-border-color);
+    border-radius: var(--timepicker-border-radius);
+    font-size: 14px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    color: var(--timepicker-text-color);
+    background-color: var(--timepicker-background-color);
+    transition: all 0.3s;
+    outline: none;
+  }
+
+  .time-picker__time-input:hover {
+    border-color: var(--timepicker-primary-color-hover);
+  }
+
+  .time-picker__time-input:focus {
+    border-color: var(--timepicker-primary-color);
+    box-shadow: 0 0 0 2px var(--timepicker-primary-color-active);
+  }
+
+  .time-picker__separator {
+    font-weight: 600;
+    color: var(--timepicker-text-color);
+  }
+
+  .time-picker__period-toggle {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--timepicker-border-color);
+    border-radius: var(--timepicker-border-radius);
+    overflow: hidden;
+    margin-left: 8px;
+  }
+
+  .time-picker__period-button {
+    background: var(--timepicker-background-color);
+    border: none;
+    padding: 6px 12px;
+    font-size: 12px;
+    color: var(--timepicker-text-color);
+    cursor: pointer;
+    transition: all 0.3s;
+    min-width: 44px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .time-picker__period-button:hover {
+    background-color: var(--timepicker-item-hover-bg);
+    color: var(--timepicker-text-color);
+  }
+
+  .time-picker__period-button--active {
+    background-color: var(--timepicker-primary-color);
+    color: #fff;
+  }
+
+  .time-picker__period-button + .time-picker__period-button {
+    border-top: 1px solid var(--timepicker-border-color);
+  }
+
+  .time-picker__clock {
+    width: var(--timepicker-clock-size);
+    height: var(--timepicker-clock-size);
+    border: 1px solid var(--timepicker-border-color);
+    border-radius: 50%;
+    background-color: var(--timepicker-background-color);
+    position: relative;
+    margin: 0 auto;
+    user-select: none;
+  }
+
+  .time-picker__clock-face {
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
+
+  .time-picker__clock-number {
+    position: absolute;
+    color: var(--timepicker-text-color);
+    font-size: 14px;
+    font-weight: 400;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border-radius: 50%;
+    transition: all 0.3s;
+    transform: translate(-50%, -50%);
+  }
+
+  .time-picker__clock-number:hover {
+    background-color: var(--timepicker-item-hover-bg);
+    color: var(--timepicker-text-color);
+  }
+
+  .time-picker__clock-number--selected {
+    background-color: var(--timepicker-primary-color);
+    color: #fff;
+  }
+
+  .time-picker__clock-hand {
+    position: absolute;
+    background-color: var(--timepicker-primary-color);
+    transform-origin: bottom center;
+    border-radius: 2px 2px 0 0;
+  }
+
+  .time-picker__clock-center {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 6px;
+    height: 6px;
+    background-color: var(--timepicker-primary-color);
+    border-radius: 50%;
+    z-index: 10;
+  }
+
+  .time-picker__mode-buttons {
+    display: flex;
+    gap: 8px;
+    justify-content: center;
+    margin-bottom: 8px;
+  }
+
+  .time-picker__mode-button {
+    padding: 6px 16px;
+    border: 1px solid var(--timepicker-border-color);
+    background: var(--timepicker-background-color);
+    color: var(--timepicker-text-color);
+    border-radius: var(--timepicker-border-radius);
+    cursor: pointer;
+    font-size: 14px;
+    transition: all 0.3s;
+    outline: none;
+  }
+
+  .time-picker__mode-button:hover {
+    background-color: var(--timepicker-item-hover-bg);
+    border-color: var(--timepicker-primary-color-hover);
+  }
+
+  .time-picker__mode-button--active {
+    background-color: var(--timepicker-primary-color);
+    color: #fff;
+    border-color: var(--timepicker-primary-color);
+  }
+
+  .time-picker__actions {
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+    padding: 8px 12px;
+    border-top: 1px solid rgba(0, 0, 0, 0.06);
+    background: var(--timepicker-background-color);
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+  }
+
+  /* Style nr-button components in actions */
+  .time-picker__actions nr-button {
+    border-radius: var(--nuraly-timepicker-local-border-radius);
+    font-weight: 400;
+    font-size: 14px;
+    height: 28px;
+  }
+
+  
+
+  .time-picker__label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: 400;
+    color: var(--timepicker-text-color);
+    font-size: 14px;
+  }
+
+  .time-picker__helper-text {
+    font-size: 14px;
+    margin-top: 4px;
+    color: var(--timepicker-text-color-secondary);
+  }
+
+  .time-picker__helper-text--error {
+    color: var(--timepicker-error-color);
+  }
+
+  /* Size variants */
+  :host([size="small"]) {
+    --timepicker-height: 32px;
+    --timepicker-font-size: 12px;
+    --timepicker-padding: 4px 8px;
+    --timepicker-clock-size: 240px;
+  }
+
+  :host([size="large"]) {
+    --timepicker-height: 48px;
+    --timepicker-font-size: 16px;
+    --timepicker-padding: 12px 16px;
+    --timepicker-clock-size: 320px;
+  }
+
+  /* Variant styles */
+  :host([variant="outlined"]) .time-picker__input {
+    background-color: transparent;
+  }
+
+  :host([variant="filled"]) .time-picker__input {
+    border: none;
+    background-color: var(--timepicker-border-color)33;
+    border-bottom: 2px solid var(--timepicker-border-color);
+    border-radius: var(--timepicker-border-radius) var(--timepicker-border-radius) 0 0;
+  }
+
+  :host([variant="filled"]) .time-picker__input:focus {
+    border-bottom-color: var(--timepicker-focus-color);
+    box-shadow: none;
+  }
+
+  /* Disabled state */
+  :host([disabled]) .time-picker {
+    pointer-events: none;
+    opacity: 0.6;
+  }
+
+  /* Animation classes */
+  .time-picker__dropdown {
+    opacity: 0;
+    transform: translateY(-8px);
+    transition: opacity 0.2s, transform 0.2s;
+  }
+
+  .time-picker__dropdown--open {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  /* Hide scrollbars on time inputs */
+  .time-picker__time-input::-webkit-outer-spin-button,
+  .time-picker__time-input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  .time-picker__time-input[type="number"] {
+    -moz-appearance: textfield;
+  }
+
+  /* Responsive adjustments */
+  @media (max-width: 480px) {
+    .time-picker__clock {
+      --timepicker-clock-size: 240px;
+    }
+    
+    .time-picker__dropdown {
+      left: 50%;
+      transform: translateX(-50%);
+      width: 90vw;
+      max-width: 320px;
+    }
+  }
+`;var gt=function(t,r,e,i){for(var o,n=arguments.length,a=n<3?r:null===i?i=Object.getOwnPropertyDescriptor(r,e):i,s=t.length-1;s>=0;s--)(o=t[s])&&(a=(n<3?o(a):n>3?o(r,e,a):o(r,e))||a);return n>3&&a&&Object.defineProperty(r,e,a),a};let ft=class extends(l(i)){constructor(){super(),this.value="",this.name="",this.placeholder="Select time",this.format=j.TwentyFourHour,this.showSeconds=!1,this.disabled=!1,this.readonly=!1,this.required=!1,this.helperText="",this.label="",this.size="medium",this.variant="outlined",this.placement=K.Bottom,this.scrollBehavior="instant",this.inputValue="",this.state=q.Default,this.validationMessage="",this.dropdownController=new u(this),this.selectionController=new mt(this),this.validationController=new bt(this),this.formattingController=new vt(this)}connectedCallback(){super.connectedCallback(),this.updateConstraints(),this.value&&this.setTimeFromValue(this.value),this.addEventListener("click",this.handleComponentClick.bind(this)),document.addEventListener("click",this.handleDocumentClick.bind(this))}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.handleDocumentClick.bind(this))}updated(t){super.updated(t),t.has("value")&&this.value!==this.inputValue&&(this.setTimeFromValue(this.value),this.dropdownController.isOpen&&setTimeout((()=>{this.scrollToSelectedTime()}),50)),this.shouldUpdateConstraints(t)&&this.updateConstraints(),this.setupDropdownElements()}setupDropdownElements(){var t,r;const e=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector(".time-picker__dropdown"),i=null===(r=this.shadowRoot)||void 0===r?void 0:r.querySelector(".time-picker__input-wrapper");e&&i&&this.dropdownController.setElements(e,i)}render(){const t={"time-picker":!0,"time-picker--open":this.dropdownController.isOpen,"time-picker--disabled":this.disabled,"time-picker--readonly":this.readonly,"time-picker--error":this.state===q.Error};return r`
+      <div class="${s(t)}" data-theme="${this.currentTheme}" part="wrapper">
+        ${this.renderLabel()}
+        ${this.renderInput()}
+        ${this.renderDropdown()}
+        ${this.renderHelperText()}
+      </div>
+    `}open(){this.dropdownController.open(),setTimeout((()=>{this.scrollToSelectedTime()}),50)}close(){this.dropdownController.close()}clear(){this.value="",this.inputValue="",this.selectionController.clearSelection()}setToNow(){const t=ht.getCurrentTime();this.selectionController.selectTime(t),this.updateInputValue(),this.dropdownController.isOpen&&setTimeout((()=>{this.scrollToSelectedTime()}),10)}validate(){const t=this.selectionController.getSelectedTime();return!t||this.validationController.validateConstraints(t)}validateTime(t){return this.validationController.validateConstraints(t)}isHourValid(t,r){const e=Object.assign(Object.assign({},r),{hours:t});return this.validateTime(e)}isMinuteValid(t,r){const e=Object.assign(Object.assign({},r),{minutes:t});return this.validateTime(e)}isSecondValid(t,r){const e=Object.assign(Object.assign({},r),{seconds:t});return this.validateTime(e)}renderLabel(){return this.label?r`
+      <label class="time-picker__label" part="label" for="time-input">
+        ${this.label}
+        ${this.required?r`<span class="time-picker__required">*</span>`:e}
+      </label>
+    `:e}renderInput(){const t=this.getFormatPlaceholder();return r`
+      <div class="time-picker__input-wrapper" part="input-wrapper">
+        <nr-input
+          id="time-input"
+          part="input"
+          type="calendar"
+          .value="${this.inputValue}"
+          placeholder="${this.placeholder||t}"
+          ?disabled="${this.disabled}"
+          ?readonly="${!1}"
+          ?required="${this.required}"
+          .state="${this.state===q.Error?"error":"default"}"
+          @click="${this.handleInputClick}"
+          @nr-input="${this.handleInputChange}"
+          @nr-blur="${this.handleInputBlur}"
+        >
+        </nr-input>
+      </div>
+    `}renderDropdown(){return this.dropdownController.isOpen?r`
+      <div 
+        class="time-picker__dropdown time-picker__dropdown--open" 
+        part="dropdown"
+        @click="${this.handleDropdownClick}"
+      >
+        ${this.renderColumnPicker()}
+        ${this.renderActions()}
+      </div>
+    `:e}renderColumnPicker(){const t=this.selectionController.getSelectedTime(),i=this.getConfig();return r`
+      <div class="time-picker__columns" part="columns">
+        ${this.renderHourColumn(t,i)}
+        ${this.renderMinuteColumn(t)}
+        ${this.showSeconds?this.renderSecondColumn(t):e}
+      </div>
+    `}renderHourColumn(t,e){const i=e.format===j.TwelveHour?Array.from({length:12},((t,r)=>0===r?12:r)):Array.from({length:24},((t,r)=>r)),o=t&&e.format===j.TwelveHour?this.formattingController.formatHours(t.hours):null==t?void 0:t.hours;return r`
+      <div class="time-picker__column" part="hour-column">
+        <div class="time-picker__column-list">
+          ${i.map((i=>{let n=i;if(e.format===j.TwelveHour&&t){const r=this.formattingController.getPeriod(t.hours);n=12===i?r===Z.AM?0:12:r===Z.AM?i:i+12}const a=t||tt,s=this.isHourValid(n,a);return r`
+              <div
+                class="time-picker__column-item ${!!t&&i===o?"time-picker__column-item--selected":""} ${s?"":"time-picker__column-item--disabled"}"
+                @click="${s?()=>this.handleHourSelect(i,e.format):null}"
+              >
+                ${i.toString().padStart(2,"0")}
+              </div>
+            `}))}
+        </div>
+      </div>
+    `}renderMinuteColumn(t){const e=Array.from({length:60},((t,r)=>r));return r`
+      <div class="time-picker__column" part="minute-column">
+        <div class="time-picker__column-list">
+          ${e.map((e=>{const i=t||tt,o=this.isMinuteValid(e,i),n=!!t&&e===t.minutes;return r`
+              <div
+                class="time-picker__column-item ${n?"time-picker__column-item--selected":""} ${o?"":"time-picker__column-item--disabled"}"
+                @click="${o?()=>this.handleMinuteSelect(e):null}"
+              >
+                ${e.toString().padStart(2,"0")}
+              </div>
+            `}))}
+        </div>
+      </div>
+    `}renderSecondColumn(t){const e=Array.from({length:60},((t,r)=>r));return r`
+      <div class="time-picker__column" part="second-column">
+        <div class="time-picker__column-list">
+          ${e.map((e=>{const i=t||tt,o=this.isSecondValid(e,i),n=!!t&&e===t.seconds;return r`
+              <div
+                class="time-picker__column-item ${n?"time-picker__column-item--selected":""} ${o?"":"time-picker__column-item--disabled"}"
+                @click="${o?()=>this.handleSecondSelect(e):null}"
+              >
+                ${e.toString().padStart(2,"0")}
+              </div>
+            `}))}
+        </div>
+      </div>
+    `}renderActions(){return r`
+      <div class="time-picker__actions">
+        <nr-button
+          type="ghost"
+          size="small"
+          @click="${()=>this.setToNow()}"
+        >
+          Now
+        </nr-button>
+        <nr-button
+          type="primary"
+          size="small"
+          @click="${this.handleOkClick}"
+        >
+          OK
+        </nr-button>
+      </div>
+    `}renderHelperText(){const t=this.validationMessage||this.helperText;if(!t)return e;const i=this.state===q.Error||!!this.validationMessage;return r`
+      <div class="time-picker__helper-text ${i?"time-picker__helper-text--error":""}" part="helper-text">
+        ${t}
+      </div>
+    `}scrollToSelectedTime(){try{const t=this.selectionController.getSelectedTime();if(!t)return;this.scrollToSelectedHour(t),this.scrollToSelectedMinute(t),this.showSeconds&&this.scrollToSelectedSecond(t)}catch(t){console.warn("Failed to scroll to selected time:",t)}}scrollToSelectedHour(t){var r;const e=this.getConfig(),i=null===(r=this.shadowRoot)||void 0===r?void 0:r.querySelector(".time-picker__column:first-child .time-picker__column-list");if(!i)return;let o;o=e.format===j.TwelveHour?0===t.hours||12===t.hours?12:t.hours>12?t.hours-12:t.hours:t.hours;const n=i.querySelector(`.time-picker__column-item:nth-child(${this.getHourIndex(o,e.format)+1})`);n&&n.scrollIntoView({behavior:this.scrollBehavior,block:"center",inline:"nearest"})}scrollToSelectedMinute(t){var r;const e=null===(r=this.shadowRoot)||void 0===r?void 0:r.querySelector(".time-picker__column:nth-child(2) .time-picker__column-list");if(!e)return;const i=e.querySelector(`.time-picker__column-item:nth-child(${t.minutes+1})`);i&&i.scrollIntoView({behavior:this.scrollBehavior,block:"center",inline:"nearest"})}scrollToSelectedSecond(t){var r;const e=null===(r=this.shadowRoot)||void 0===r?void 0:r.querySelector(".time-picker__column:nth-child(3) .time-picker__column-list");if(!e)return;const i=e.querySelector(`.time-picker__column-item:nth-child(${t.seconds+1})`);i&&i.scrollIntoView({behavior:this.scrollBehavior,block:"center",inline:"nearest"})}getHourIndex(t,r){return r===j.TwelveHour&&12===t?0:t}handleComponentClick(t){t.stopPropagation()}handleDocumentClick(t){var r;if(this.dropdownController.isOpen){const e=t.target;this.contains(e)||(null===(r=this.shadowRoot)||void 0===r?void 0:r.contains(e))||(this.dropdownController.close(),this.dispatchEvent(new CustomEvent(Q.BLUR,{bubbles:!0,composed:!0})))}}handleDropdownClick(t){t.stopPropagation()}handleOkClick(){this.dropdownController.close();const t=this.selectionController.getSelectedTime();t&&this.dispatchEvent(new CustomEvent(Q.TIME_CHANGE,{bubbles:!0,composed:!0,detail:{value:this.value,time:t}})),this.dispatchEvent(new CustomEvent(Q.BLUR,{bubbles:!0,composed:!0}))}handleInputBlur(){setTimeout((()=>{var t;const r=document.activeElement;this.contains(r)||(null===(t=this.shadowRoot)||void 0===t?void 0:t.contains(r))||this.dispatchEvent(new CustomEvent(Q.BLUR,{bubbles:!0,composed:!0}))}),150)}handleInputClick(t){t.preventDefault(),t.stopPropagation(),this.disabled||this.dropdownController.isOpen||(this.dropdownController.open(),setTimeout((()=>{this.scrollToSelectedTime()}),50),this.dispatchEvent(new CustomEvent(Q.FOCUS,{bubbles:!0,composed:!0})))}handleInputChange(t){var r;if(this.disabled)return;const e=(null===(r=t.detail)||void 0===r?void 0:r.value)||"";this.inputValue=e;const i=this.formattingController.parseInputValue(e);i?this.validateTime(i)?(this.selectionController.selectTime(i),this.value=this.formattingController.formatForInput(i),this.state=q.Default,this.dropdownController.isOpen&&setTimeout((()=>{this.scrollToSelectedTime()}),10),this.dispatchEvent(new CustomEvent(Q.TIME_CHANGE,{bubbles:!0,composed:!0,detail:{value:this.value,time:i}}))):this.state=q.Error:""===e?(this.selectionController.clearSelection(),this.value="",this.state=q.Default,this.dispatchEvent(new CustomEvent(Q.TIME_CHANGE,{bubbles:!0,composed:!0,detail:{value:"",time:null}}))):this.state=q.Error,this.requestUpdate()}handleHourSelect(t,r){const e=this.selectionController.getSelectedTime()||ht.getCurrentTime();let i=t;if(r===j.TwelveHour){const r=this.formattingController.getPeriod(e.hours);i=12===t?r===Z.AM?0:12:r===Z.AM?t:t+12}const o=Object.assign(Object.assign({},e),{hours:i});this.validateTime(o)&&(this.selectionController.selectTime(o),this.updateInputValue())}handleMinuteSelect(t){const r=this.selectionController.getSelectedTime()||ht.getCurrentTime(),e=Object.assign(Object.assign({},r),{minutes:t});this.validateTime(e)&&(this.selectionController.selectTime(e),this.updateInputValue())}handleSecondSelect(t){const r=this.selectionController.getSelectedTime()||ht.getCurrentTime(),e=Object.assign(Object.assign({},r),{seconds:t});this.validateTime(e)&&(this.selectionController.selectTime(e),this.updateInputValue())}shouldUpdateConstraints(t){return t.has("minTime")||t.has("maxTime")||t.has("disabledTimes")||t.has("enabledTimes")}updateConstraints(){const t={minTime:this.minTime,maxTime:this.maxTime,disabledTimes:this.disabledTimes||[],enabledTimes:this.enabledTimes};this.validationController.setConstraints(t)}setTimeFromValue(t){this.selectionController.setTimeFromString(t)&&(this.inputValue=t,this.requestUpdate(),this.dropdownController.isOpen&&setTimeout((()=>{this.scrollToSelectedTime()}),50))}updateInputValue(){const t=this.selectionController.getSelectedTime();if(t){const r=this.formattingController.formatForDisplay(t);this.inputValue=r,this.value=r,this.dispatchEvent(new CustomEvent(Q.TIME_CHANGE,{detail:{value:r,time:t},bubbles:!0,composed:!0}))}}getConfig(){return{format:this.format,showSeconds:this.showSeconds,step:{hours:Y.One,minutes:Y.One,seconds:Y.One},use12HourClock:this.format===j.TwelveHour,minuteInterval:1,secondInterval:1}}getCurrentTime(){return this.selectionController.getSelectedTime()||tt}setTime(t){this.selectionController.selectTime(t),this.updateInputValue(),this.dropdownController.isOpen&&setTimeout((()=>{this.scrollToSelectedTime()}),10)}formatTime(t){return this.formattingController.formatForDisplay(t)}getFormatPlaceholder(){return this.format===j.TwelveHour?this.showSeconds?"HH:MM:SS AM/PM":"HH:MM AM/PM":this.showSeconds?"HH:MM:SS":"HH:MM"}parseTime(t){return this.formattingController.parseInputValue(t)}};ft.styles=[yt],gt([o({type:String})],ft.prototype,"value",void 0),gt([o({type:String})],ft.prototype,"name",void 0),gt([o({type:String})],ft.prototype,"placeholder",void 0),gt([o({type:String})],ft.prototype,"format",void 0),gt([o({type:Boolean,attribute:"show-seconds"})],ft.prototype,"showSeconds",void 0),gt([o({type:Boolean})],ft.prototype,"disabled",void 0),gt([o({type:Boolean})],ft.prototype,"readonly",void 0),gt([o({type:Boolean})],ft.prototype,"required",void 0),gt([o({type:String,attribute:"min-time"})],ft.prototype,"minTime",void 0),gt([o({type:String,attribute:"max-time"})],ft.prototype,"maxTime",void 0),gt([o({type:Array,attribute:"disabled-times"})],ft.prototype,"disabledTimes",void 0),gt([o({type:Array,attribute:"enabled-times"})],ft.prototype,"enabledTimes",void 0),gt([o({type:String,attribute:"helper-text"})],ft.prototype,"helperText",void 0),gt([o({type:String})],ft.prototype,"label",void 0),gt([o({type:String})],ft.prototype,"size",void 0),gt([o({type:String})],ft.prototype,"variant",void 0),gt([o({type:String})],ft.prototype,"placement",void 0),gt([o({type:String,attribute:"scroll-behavior"})],ft.prototype,"scrollBehavior",void 0),gt([n()],ft.prototype,"inputValue",void 0),gt([n()],ft.prototype,"state",void 0),gt([n()],ft.prototype,"validationMessage",void 0),ft=gt([a("nr-timepicker")],ft);export{st as CLOCK_CONTAINER_CLASS,pt as CLOCK_FACE,ot as DEFAULT_12H_TIME_FORMAT,nt as DEFAULT_12H_TIME_FORMAT_WITH_SECONDS,ut as DEFAULT_STEPS,rt as DEFAULT_TIME_CONFIG,et as DEFAULT_TIME_FORMAT,G as DEFAULT_TIME_FORMATS,X as DEFAULT_TIME_FORMATS_WITH_SECONDS,it as DEFAULT_TIME_FORMAT_WITH_SECONDS,tt as EMPTY_TIME_VALUE,ft as NrTimePickerElement,ct as TIME_BOUNDARIES,at as TIME_INPUT_FIELD_ID,dt as TIME_PICKER_CLASSES,J as TIME_PICKER_CONSTANTS,Q as TIME_PICKER_EVENTS,lt as TIME_VALIDATION_PATTERNS,j as TimeFormat,Z as TimePeriod,vt as TimePickerFormattingController,L as TimePickerMode,K as TimePickerPlacement,mt as TimePickerSelectionController,F as TimePickerSize,q as TimePickerState,bt as TimePickerValidationController,W as TimePickerVariant,Y as TimeStep,ht as TimeUtils};