atomicuilibrary 0.0.1 → 0.1.3

package/dist/cjs/ui-number-input.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-ClkOYpT8.js');
+var index = require('./index-C32cWsm5.js');
 
 const numberInputCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block;font-family:inherit}:host.full-width{width:100%}:host.full-width .ni-wrapper{width:100%}.ni-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;opacity:0.65;color:var(--label-color, var(--ui-text-primary, var(--text-primary, #111827)));margin-bottom:8px;transition:color 0.2s ease}.ni-wrapper{display:inline-flex;align-items:center;border:1.5px solid var(--ui-border-default, var(--border-strong, #d1d5db));border-radius:10px;background:var(--ui-bg-var(--bg-primary, #ffffff), var(--bg-primary, #ffffff));transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden;box-shadow:0 1px 2px rgba(0, 0, 0, 0.05)}.ni-wrapper.ni-focused{border-color:var(--ui-color-primary, var(--color-primary, #10b981));box-shadow:0 0 0 4px rgba(var(--color-primary-rgb, 59, 130, 246), 0.12), 0 4px 12px rgba(0, 0, 0, 0.05)}.ni-wrapper.ni-focused .ni-label{color:var(--ui-color-primary, var(--color-primary, #10b981))}.ni-wrapper.ni-error{border-color:var(--ui-color-error, var(--color-danger, #ef4444))}.ni-wrapper.ni-error .ni-label{color:var(--ui-color-error, var(--color-danger, #ef4444))}.ni-wrapper.ni-error.ni-focused{box-shadow:0 0 0 4px rgba(var(--color-danger-rgb, 239, 68, 68), 0.12)}.ni-wrapper.ni-disabled{background:var(--ui-bg-muted, var(--bg-primary, #f9fafb));opacity:0.65;pointer-events:none;cursor:not-allowed}.ni-wrapper.ni-sm{height:32px;font-size:12px;border-radius:6px}.ni-wrapper.ni-md{height:40px;font-size:14px}.ni-wrapper.ni-lg{height:48px;font-size:16px;border-radius:12px}.ni-wrapper.ni-plain{border:none;background:transparent;box-shadow:none;height:auto;overflow:visible}.ni-wrapper.ni-plain.ni-focused{box-shadow:none}.ni-btn{display:flex;align-items:center;justify-content:center;width:36px;height:100%;border:none;background:var(--bg-secondary, #f3f4f6);color:var(--text-secondary, #374151);font-size:18px;font-weight:600;cursor:pointer;transition:background 0.15s, color 0.15s;flex-shrink:0;line-height:1}.ni-btn:hover:not(:disabled){background:var(--bg-primary, #e5e7eb);color:var(--bg-primary, #111)}.ni-btn:active:not(:disabled){background:var(--bg-secondary, #d1d5db)}.ni-btn:disabled{opacity:0.4;cursor:not-allowed}.ni-btn.ni-dec{border-inline-end:1.5px solid var(--border-default, #e5e7eb)}.ni-btn.ni-inc{border-inline-start:1.5px solid var(--border-default, #e5e7eb)}.ni-stacker{display:flex;flex-direction:column;height:100%;border-inline-start:1.5px solid var(--border-default, #e5e7eb)}.ni-stacker .ni-btn{width:28px;height:50%;font-size:9px}.ni-stacker .ni-btn.ni-inc-sm{border-bottom:1px solid var(--border-default, #e5e7eb);border-radius:0}.ni-stacker .ni-btn.ni-dec-sm{border-radius:0}.ni-input{flex:1;min-width:60px;border:none;outline:none;background:transparent;font-size:inherit;color:var(--text-primary, #111827);text-align:center;padding:0 8px;appearance:textfield;-moz-appearance:textfield}.ni-input::-webkit-outer-spin-button,.ni-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.ni-affix{padding:0 8px;color:var(--label-subtitle-color, var(--text-muted, #6b7280));font-size:13px;white-space:nowrap;background:var(--bg-primary, #f9fafb);height:100%;display:flex;align-items:center}.ni-affix.ni-prefix{border-inline-end:1.5px solid var(--border-default, #e5e7eb)}.ni-affix.ni-suffix{border-inline-start:1.5px solid var(--border-default, #e5e7eb)}.ni-helper{font-size:12px;margin-top:5px;color:var(--label-subtitle-color, var(--text-muted, #6b7280))}.ni-helper.ni-helper-error{color:var(--color-danger, #ef4444)}`;
 
@@ -144,6 +144,10 @@ const NumberInput = class {
             this.decrement();
     };
     handleKeyDown = (e) => {
+        // ui-input already handles ArrowUp/Down for type="number" via stepValue()
+        // and calls preventDefault() — bail out here to avoid double-stepping.
+        if (e.defaultPrevented)
+            return;
         if (e.key === 'ArrowUp') {
             e.preventDefault();
             this.increment();
@@ -156,7 +160,7 @@ const NumberInput = class {
     render() {
         const isError = !!this.errorText;
         const isRight = this.stepperLayout === 'right';
-        return (index.h(index.Host, { key: '34a35f828baa751fbaab05db0ea6d7e4eb42281e', class: { 'full-width': this.fullWidth } }, this.label && index.h("label", { key: '756934f01225ddbdd8235fc9081177dedc004531', class: "ni-label" }, this.label), index.h("div", { key: '822ac22167cb75cdcb16274d4a5fa95291875cc9', class: {
+        return (index.h(index.Host, { key: '7d6621c867480c767237c3ceaffcf830a27263e8', class: { 'full-width': this.fullWidth } }, this.label && index.h("label", { key: 'fc320df3b4d7cfd4606ea5a806409a8ac006f9bb', class: "ni-label" }, this.label), index.h("div", { key: '1d35868e9fbfc0b619b7908f91720eb219f2d3cf', class: {
                 'ni-wrapper': true,
                 [`ni-${this.size}`]: true,
                 'ni-error': isError,
@@ -165,7 +169,7 @@ const NumberInput = class {
                 'ni-right': isRight,
                 'ni-rtl': this.rtl,
                 'ni-plain': this.variant === 'plain',
-            }, dir: this.rtl ? 'rtl' : 'ltr' }, this.showStepper && this.stepperLayout === 'sides' && (index.h("ui-button", { key: '714881b359dfc953c8b6f93fb0295c0ae2f134ea', variant: "ghost", onMouseDown: () => this.startStepping('dec'), onMouseUp: this.stopStepping, onMouseLeave: this.stopStepping, onTouchStart: () => this.startStepping('dec'), onTouchEnd: this.stopStepping, onClick: (e) => e.preventDefault(), disabled: this.disabled || this.value <= this.min, tabIndex: -1, ariaLabel: "Decrease", icon: "minus", iconLibrary: "lucide", iconOnly: true, size: this.size === 'sm' || this.size === 'xs' ? 'sm' : 'md' })), this.renderPrefix(), index.h("ui-input", { key: 'b2d56228f500995d4f6fbd78c639e6383c36bd3e', class: "ni-input", type: "number", value: this.inputValue, min: this.min === -Infinity ? undefined : this.min, max: this.max === Infinity ? undefined : this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, placeholder: this.placeholder, onInputChange: this.handleInput, onInputBlur: this.handleBlur, onFocusInternal: () => (this.isFocused = true), onWheel: (e) => this.handleWheel(e), onInputKeydown: (e) => this.handleKeyDown(e.detail), fullWidth: true, size: this.size, variant: "plain", showTypeIcon: false }), this.renderSuffix(), this.showStepper && isRight && (index.h("div", { key: 'e400b4eea2656a85a5c5df3487ead9f45367100b', class: "ni-stacker" }, index.h("ui-button", { key: '9cd89756bc4792dccc9657ca39b6d6cff2a9e819', variant: "ghost", onMouseDown: () => this.startStepping('inc'), onMouseUp: this.stopStepping, onMouseLeave: this.stopStepping, onTouchStart: () => this.startStepping('inc'), onTouchEnd: this.stopStepping, onClick: (e) => e.preventDefault(), disabled: this.disabled || this.value >= this.max, tabIndex: -1, ariaLabel: "Increase", icon: "chevron-up", iconLibrary: "lucide", iconOnly: true, size: "xxs" }), index.h("ui-button", { key: '42248f0ccc65d42c903775f8e5fcbd97f76e04e7', variant: "ghost", onMouseDown: () => this.startStepping('dec'), onMouseUp: this.stopStepping, onMouseLeave: this.stopStepping, onTouchStart: () => this.startStepping('dec'), onTouchEnd: this.stopStepping, onClick: (e) => e.preventDefault(), disabled: this.disabled || this.value <= this.min, tabIndex: -1, ariaLabel: "Decrease", icon: "chevron-down", iconLibrary: "lucide", iconOnly: true, size: "xxs" }))), this.showStepper && this.stepperLayout === 'sides' && (index.h("ui-button", { key: 'dbf5c5d29bf6945baaaa96a46915440088f2509f', variant: "ghost", onMouseDown: () => this.startStepping('inc'), onMouseUp: this.stopStepping, onMouseLeave: this.stopStepping, onTouchStart: () => this.startStepping('inc'), onTouchEnd: this.stopStepping, onClick: (e) => e.preventDefault(), disabled: this.disabled || this.value >= this.max, tabIndex: -1, ariaLabel: "Increase", icon: "plus", iconLibrary: "lucide", iconOnly: true, size: this.size === 'sm' || this.size === 'xs' ? 'sm' : 'md' }))), (this.helperText || this.errorText) && (index.h("div", { key: 'f4f1e6ff10c5ddbbc4e49c7e2325e103537e9e08', class: { 'ni-helper': true, 'ni-helper-error': isError } }, isError ? this.errorText : this.helperText))));
+            }, dir: this.rtl ? 'rtl' : 'ltr' }, this.showStepper && this.stepperLayout === 'sides' && (index.h("ui-button", { key: '7fe957464bd26a0aee2c36fc0ab7c4a16a69d9e6', variant: "ghost", onMouseDown: () => this.startStepping('dec'), onMouseUp: this.stopStepping, onMouseLeave: this.stopStepping, onTouchStart: () => this.startStepping('dec'), onTouchEnd: this.stopStepping, onClick: (e) => e.preventDefault(), disabled: this.disabled || this.value <= this.min, tabIndex: -1, ariaLabel: "Decrease", icon: "minus", iconLibrary: "lucide", iconOnly: true, size: this.size === 'sm' || this.size === 'xs' ? 'sm' : 'md' })), this.renderPrefix(), index.h("ui-input", { key: '520c1bfb3d2a283788e0833bd3c4683f7d0f9991', class: "ni-input", type: "number", value: this.inputValue, min: this.min === -Infinity ? undefined : this.min, max: this.max === Infinity ? undefined : this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, placeholder: this.placeholder, onInputChange: this.handleInput, onInputBlur: this.handleBlur, onFocusInternal: () => (this.isFocused = true), onWheel: (e) => this.handleWheel(e), onInputKeydown: (e) => this.handleKeyDown(e.detail), fullWidth: true, size: this.size, variant: "plain", showTypeIcon: false }), this.renderSuffix(), this.showStepper && isRight && (index.h("div", { key: '43e78c6e315cb773a7e72e72f12fc67b7652d443', class: "ni-stacker" }, index.h("ui-button", { key: 'bff9e2be12324bf23ba904c230ed34aca476573e', variant: "ghost", onMouseDown: () => this.startStepping('inc'), onMouseUp: this.stopStepping, onMouseLeave: this.stopStepping, onTouchStart: () => this.startStepping('inc'), onTouchEnd: this.stopStepping, onClick: (e) => e.preventDefault(), disabled: this.disabled || this.value >= this.max, tabIndex: -1, ariaLabel: "Increase", icon: "chevron-up", iconLibrary: "lucide", iconOnly: true, size: "xxs" }), index.h("ui-button", { key: 'a6a5dcaeac986df1028882fa605f41bef9979bae', variant: "ghost", onMouseDown: () => this.startStepping('dec'), onMouseUp: this.stopStepping, onMouseLeave: this.stopStepping, onTouchStart: () => this.startStepping('dec'), onTouchEnd: this.stopStepping, onClick: (e) => e.preventDefault(), disabled: this.disabled || this.value <= this.min, tabIndex: -1, ariaLabel: "Decrease", icon: "chevron-down", iconLibrary: "lucide", iconOnly: true, size: "xxs" }))), this.showStepper && this.stepperLayout === 'sides' && (index.h("ui-button", { key: '36d111a0bed7715ffee7fd6b5cd41f1d18ca33a4', variant: "ghost", onMouseDown: () => this.startStepping('inc'), onMouseUp: this.stopStepping, onMouseLeave: this.stopStepping, onTouchStart: () => this.startStepping('inc'), onTouchEnd: this.stopStepping, onClick: (e) => e.preventDefault(), disabled: this.disabled || this.value >= this.max, tabIndex: -1, ariaLabel: "Increase", icon: "plus", iconLibrary: "lucide", iconOnly: true, size: this.size === 'sm' || this.size === 'xs' ? 'sm' : 'md' }))), (this.helperText || this.errorText) && (index.h("div", { key: '75f9167fa983543f97efbfbf4eae8e66e71a6635', class: { 'ni-helper': true, 'ni-helper-error': isError } }, isError ? this.errorText : this.helperText))));
     }
     renderPrefix() {
         const hasPrefix = this.prefixText || this.prefixIcon;

package/dist/cjs/ui-otp-input.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-ClkOYpT8.js');
+var index = require('./index-C32cWsm5.js');
 
-const otpInputCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block}.otp-input{display:flex;flex-direction:column;gap:12px}.otp-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;opacity:0.65;color:var(--label-color, var(--text-primary, #333));margin-bottom:8px}.otp-inputs-container{display:flex;gap:8px;justify-content:center;align-items:center}.otp-divider{width:12px;height:2px;background:var(--border-color, #e0e0e0);margin-inline-start:4px;margin-inline-end:4px}.otp-input-field{width:48px;height:56px;text-align:center;font-size:24px;font-weight:600;border:2px solid var(--border-color, #e0e0e0);border-radius:8px;background:var(--surface-color, var(--bg-primary, #ffffff));outline:none;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);caret-color:var(--primary-color, var(--color-success, #3dcd58))}.otp-input-field:hover:not(:disabled){border-color:var(--border-hover, #bbb)}.otp-input-field:focus,.otp-input-field.focused{border-color:var(--primary-color, var(--color-success, #3dcd58));box-shadow:0 0 0 3px rgba(var(--color-success-rgb, 61, 205, 88), 0.15);transform:translateY(-2px)}.otp-input-field.filled{border-color:var(--primary-color, var(--color-success, #3dcd58));background:var(--primary-color-light, rgba(var(--color-success-rgb, 61, 205, 88), 0.05))}.otp-input-field:disabled{background:var(--background-secondary, #f5f5f5);cursor:not-allowed;opacity:0.6}.otp-input-sm .otp-input-field{width:40px;height:48px;font-size:20px}.otp-input-lg .otp-input-field{width:56px;height:64px;font-size:28px}.otp-input-secondary .otp-input-field:focus{border-color:var(--color-primary, #6b7280);box-shadow:0 0 0 3px rgba(107, 114, 128, 0.15)}.otp-input-success .otp-input-field:focus{border-color:var(--color-success, #16a34a);box-shadow:0 0 0 3px rgba(22, 163, 74, 0.15)}.otp-input-danger .otp-input-field:focus{border-color:var(--color-danger-hover, #dc2626);box-shadow:0 0 0 3px rgba(var(--color-danger-rgb, 220, 38, 38), 0.15)}.otp-input-warning .otp-input-field:focus{border-color:var(--color-warning, #f59e0b);box-shadow:0 0 0 3px rgba(var(--color-warning-rgb, 245, 158, 11), 0.15)}.otp-input-info .otp-input-field:focus{border-color:var(--color-info-hover, #0891b2);box-shadow:0 0 0 3px rgba(8, 145, 178, 0.15)}.otp-input-underlined .otp-input-field{border:none;border-bottom:2px solid var(--border-color);border-radius:0;background:transparent}.otp-input-underlined .otp-input-field:focus{transform:none;border-bottom-color:var(--primary-color);box-shadow:none}.otp-input-flushed .otp-input-field{border:none;background:var(--background-secondary, var(--bg-secondary, #f3f4f6));border-radius:12px}.otp-input-flushed .otp-input-field:focus{background:var(--surface-color);box-shadow:0 4px 12px rgba(0, 0, 0, 0.05)}.otp-input-separated .otp-input-field{margin-inline-start:4px;margin-inline-end:4px;box-shadow:0 2px 4px rgba(0, 0, 0, 0.05);border-radius:12px}.otp-input-invalid{animation:otp-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both}.otp-input-invalid .otp-input-field{border-color:var(--danger-color, #f44336) !important}.otp-input-invalid .otp-input-field:focus{box-shadow:0 0 0 3px rgba(244, 67, 54, 0.15)}.error-text{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--danger-color, #f44336)}.error-text i{font-size:14px}.helper-text{font-size:12px;color:var(--label-subtitle-color, var(--text-secondary, #666));text-align:center}.otp-input-skeleton{pointer-events:none}.otp-input-skeleton .otp-input-field{background:linear-gradient(90deg, var(--bg-secondary, #f3f4f6) 25%, var(--bg-primary, #e5e7eb) 50%, var(--bg-secondary, #f3f4f6) 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite linear;border-color:transparent}.otp-input-skeleton .otp-label{width:80px;height:14px;background:var(--bg-primary, #e5e7eb);border-radius:4px;margin-bottom:8px}@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}@keyframes otp-shake{10%,90%{transform:translate3d(-1px, 0, 0)}20%,80%{transform:translate3d(2px, 0, 0)}30%,50%,70%{transform:translate3d(-4px, 0, 0)}40%,60%{transform:translate3d(4px, 0, 0)}}@keyframes fillPulse{0%{transform:scale(1)}50%{transform:scale(1.1);box-shadow:0 0 15px rgba(var(--color-success-rgb, 61, 205, 88), 0.3)}100%{transform:scale(1)}}.otp-input-field.filled{animation:fillPulse 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)}`;
+const otpInputCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block}.otp-input{display:flex;flex-direction:column;gap:12px}.otp-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;opacity:0.65;color:var(--label-color, var(--text-primary, #333));margin-bottom:8px}.otp-inputs-container{display:flex;gap:8px;justify-content:center;align-items:center}.otp-divider{width:12px;height:2px;background:var(--border-color, #e0e0e0);margin-inline-start:4px;margin-inline-end:4px}.otp-input-field{width:48px;height:56px;text-align:center;font-size:24px;font-weight:600;border:2px solid var(--border-color, #e0e0e0);border-radius:8px;background:var(--surface-color, var(--bg-primary, #ffffff));outline:none;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);caret-color:var(--primary-color, var(--color-success, #3dcd58));--ui-input-padding:0px !important;--ui-input-padding-x:0px !important;--input-padding-vertical:0px !important;--input-padding-horizontal:0px !important;--input-height:100% !important;--ui-input-text-align:center;display:flex !important;align-items:center;justify-content:center}.otp-input-field:hover:not(:disabled){border-color:var(--border-hover, #bbb)}.otp-input-field:focus,.otp-input-field.focused{border-color:var(--primary-color, var(--color-success, #3dcd58));box-shadow:0 0 0 3px rgba(var(--color-success-rgb, 61, 205, 88), 0.15);transform:translateY(-2px)}.otp-input-field.filled{border-color:var(--primary-color, var(--color-success, #3dcd58));background:var(--primary-color-light, rgba(var(--color-success-rgb, 61, 205, 88), 0.05))}.otp-input-field:disabled{background:var(--background-secondary, #f5f5f5);cursor:not-allowed;opacity:0.6}.otp-input-sm .otp-input-field{width:40px;height:48px;font-size:20px}.otp-input-lg .otp-input-field{width:56px;height:64px;font-size:28px}.otp-input-secondary .otp-input-field:focus{border-color:var(--color-primary, #6b7280);box-shadow:0 0 0 3px rgba(107, 114, 128, 0.15)}.otp-input-success .otp-input-field:focus{border-color:var(--color-success, #16a34a);box-shadow:0 0 0 3px rgba(22, 163, 74, 0.15)}.otp-input-danger .otp-input-field:focus{border-color:var(--color-danger-hover, #dc2626);box-shadow:0 0 0 3px rgba(var(--color-danger-rgb, 220, 38, 38), 0.15)}.otp-input-warning .otp-input-field:focus{border-color:var(--color-warning, #f59e0b);box-shadow:0 0 0 3px rgba(var(--color-warning-rgb, 245, 158, 11), 0.15)}.otp-input-info .otp-input-field:focus{border-color:var(--color-info-hover, #0891b2);box-shadow:0 0 0 3px rgba(8, 145, 178, 0.15)}.otp-input-underlined .otp-input-field{border:none;border-bottom:2px solid var(--border-color);border-radius:0;background:transparent}.otp-input-underlined .otp-input-field:focus{transform:none;border-bottom-color:var(--primary-color);box-shadow:none}.otp-input-flushed .otp-input-field{border:none;background:var(--background-secondary, var(--bg-secondary, #f3f4f6));border-radius:12px}.otp-input-flushed .otp-input-field:focus{background:var(--surface-color);box-shadow:0 4px 12px rgba(0, 0, 0, 0.05)}.otp-input-separated .otp-input-field{margin-inline-start:4px;margin-inline-end:4px;box-shadow:0 2px 4px rgba(0, 0, 0, 0.05);border-radius:12px}.otp-input-invalid{animation:otp-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both}.otp-input-invalid .otp-input-field{border-color:var(--danger-color, #f44336) !important}.otp-input-invalid .otp-input-field:focus{box-shadow:0 0 0 3px rgba(244, 67, 54, 0.15)}.error-text{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--danger-color, #f44336)}.error-text i{font-size:14px}.helper-text{font-size:12px;color:var(--label-subtitle-color, var(--text-secondary, #666));text-align:center}.otp-input-skeleton{pointer-events:none}.otp-input-skeleton .otp-input-field{background:linear-gradient(90deg, var(--bg-secondary, #f3f4f6) 25%, var(--bg-primary, #e5e7eb) 50%, var(--bg-secondary, #f3f4f6) 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite linear;border-color:transparent}.otp-input-skeleton .otp-label{width:80px;height:14px;background:var(--bg-primary, #e5e7eb);border-radius:4px;margin-bottom:8px}@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}@keyframes otp-shake{10%,90%{transform:translate3d(-1px, 0, 0)}20%,80%{transform:translate3d(2px, 0, 0)}30%,50%,70%{transform:translate3d(-4px, 0, 0)}40%,60%{transform:translate3d(4px, 0, 0)}}@keyframes fillPulse{0%{transform:scale(1)}50%{transform:scale(1.1);box-shadow:0 0 15px rgba(var(--color-success-rgb, 61, 205, 88), 0.3)}100%{transform:scale(1)}}.otp-input-field.filled{animation:fillPulse 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)}`;
 
 const OtpInput = class {
     constructor(hostRef) {
@@ -226,14 +226,14 @@ const OtpInput = class {
             'otp-input-invalid': isInvalid,
             'otp-input-skeleton': this.skeleton,
         };
-        return (index.h("div", { key: '8fe5324ea7e186d84beea09373bf235f93921708', class: containerClasses, dir: this.rtl ? 'rtl' : 'ltr' }, this.label && index.h("label", { key: 'baa571a85ef85c818b191b46160b42a50b465585', class: "otp-label" }, this.label), index.h("div", { key: '48cb77b47f529d79d9ffcc84af84307f1ecc8a1a', class: "otp-inputs-container" }, this.otpValues.map((val, index$1) => {
+        return (index.h("div", { key: '927ec2b491c04d013470a0449dea64d4aaaffc76', class: containerClasses, dir: this.rtl ? 'rtl' : 'ltr' }, this.label && index.h("label", { key: '043dfca110af5012d56b444d7427eb647f851e1b', class: "otp-label" }, this.label), index.h("div", { key: 'e2e7ab669e26d49206f85afd1f48c9ea7614f591', class: "otp-inputs-container" }, this.otpValues.map((val, index$1) => {
             const showDivider = this.groupSize > 0 && (index$1 + 1) % this.groupSize === 0 && index$1 !== this.length - 1;
-            return (index.h(index.Fragment, null, index.h("ui-input", { ref: el => (this.inputRefs[index$1] = el), type: this.secure ? 'password' : 'text', inputMode: this.type === 'number' || this.type === 'numeric' ? 'numeric' : 'text', pattern: this.type === 'number' || this.type === 'numeric' ? '[0-9]*' : undefined, maxLength: 1, class: {
+            return (index.h(index.Fragment, null, index.h("ui-input", { ref: el => (this.inputRefs[index$1] = el), type: this.secure ? 'password' : 'text', variant: "plain", inputMode: this.type === 'number' || this.type === 'numeric' ? 'numeric' : 'text', pattern: this.type === 'number' || this.type === 'numeric' ? '[0-9]*' : undefined, maxLength: 1, class: {
                     'otp-input-field': true,
                     'focused': this.focusedIndex === index$1,
                     'filled': !!val,
                 }, value: val, placeholder: this.placeholder, disabled: this.disabled || this.skeleton, readonly: this.readonly, onInputChange: e => this.handleInput(e, index$1), onInputKeydown: e => this.handleKeyDown(e.detail, index$1), onPasteInternal: e => (index$1 === 0 ? this.handlePaste(e.detail) : e.detail.preventDefault()), onFocusInternal: () => this.handleFocus(index$1), onInputBlur: this.handleBlur, ariaLabel: `Digit ${index$1 + 1}`, size: this.size, align: "center" }), showDivider && index.h("div", { class: "otp-divider" })));
-        })), isInvalid && currentErrorText && (index.h("div", { key: 'eb635e42e20010b8ca86e84ea3f3a7d9c077a5fa', class: "error-text" }, index.h("ui-icon", { key: '50163f7f1957e40f76d80c4b93548b0cf308b3bf', name: "exclamation-circle", library: "fontawesome" }), currentErrorText)), !isInvalid && this.helperText && index.h("div", { key: '0665d1b8ed1e46af72017732bcf59fa4b2ad1e14', class: "helper-text" }, this.helperText), index.h("div", { key: '2d6a7e0c414b396e6a859ebcc5adbd5838cdabf5', class: "otp-resend-container" }, index.h("ui-button", { key: '8f93b95638c39ce06cd1b5bf55172ca3b4045580', variant: "ghost", size: "sm", onClick: this.handleResend, disabled: this.resendTimer > 0 || this.disabled, label: `${this.resendLabel} ${this.resendTimer > 0 ? `(${this.resendTimer}s)` : ''}` }))));
+        })), isInvalid && currentErrorText && (index.h("div", { key: '251b384b6cf48e4f0dfa1e64fd128674fb6cfbbb', class: "error-text" }, index.h("ui-icon", { key: '0c0f65b8e1748e546737710d373ed9ae2cef07cc', name: "exclamation-circle", library: "fontawesome" }), currentErrorText)), !isInvalid && this.helperText && index.h("div", { key: '740959aeb1bff5f5f20829d953fab02303f83b35', class: "helper-text" }, this.helperText), index.h("div", { key: 'baeee4149c7086ed794b30957e00cb0d68986368', class: "otp-resend-container" }, index.h("ui-button", { key: '6ed86116570e10766b3510ab4e024dc4b8933321', variant: "ghost", size: "sm", onClick: this.handleResend, disabled: this.resendTimer > 0 || this.disabled, label: `${this.resendLabel} ${this.resendTimer > 0 ? `(${this.resendTimer}s)` : ''}` }))));
     }
     static get watchers() { return {
         "value": [{