atomicuilibrary 0.1.0 → 0.1.3

package/dist/collection/components/input/input.js

@@ -709,6 +709,14 @@ export class Input {
         if (this.type === 'password' && typeof event.getModifierState === 'function') {
             this.capsLockOn = event.getModifierState("CapsLock");
         }
+        // For number inputs, handle ArrowUp/Down using our stepValue() so the
+        // configured `step` prop is respected instead of the browser default (1).
+        if (this.type === 'number' && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
+            event.preventDefault();
+            this.stepValue(event.key === 'ArrowUp' ? 'up' : 'down');
+            this.inputKeydown.emit(event);
+            return;
+        }
         if (this.showSuggestions && this.suggestions.length > 0) {
             const filtered = this.getFilteredSuggestions();
             if (event.key === 'ArrowDown') {
@@ -806,6 +814,10 @@ export class Input {
         return this.helperText;
     }
     renderPrefixIcon() {
+        // If prefixText is set, render it as a styled text addon (same pattern as currency)
+        if (this.prefixText) {
+            return h("span", { class: "prefix-text" }, this.prefixText);
+        }
         let iconName = this.prefixIcon;
         // Explicitly handle 'none' or 'false' — do NOT return for empty string:
         // the type-icon block below may still assign an icon
@@ -817,7 +829,6 @@ export class Input {
                 'email': 'mail',
                 'tel': 'phone',
                 'url': 'link',
-                'number': 'hash',
                 'date': 'calendar',
                 'currency': this.getCurrencyIcon()
             };
@@ -929,7 +940,7 @@ export class Input {
             ...(isCustomColor ? { '--ui-custom-color': this.color, '--ui-custom-color-rgb': hexToRgb(this.color) } : {}),
             '--ui-input-width': this.width
         };
-        const hasRealPrefix = !!((this.prefixIcon && this.prefixIcon !== 'none' && this.prefixIcon !== 'false') || this.prefixText || (this.showTypeIcon && ['search', 'email', 'tel', 'url', 'number', 'date', 'currency'].includes(this.type) && !this.prefixIcon && !this.prefixText && this.variant !== 'plain' && this.variant !== 'borderless') || isColor || this.type === 'currency');
+        const hasRealPrefix = !!((this.prefixIcon && this.prefixIcon !== 'none' && this.prefixIcon !== 'false') || this.prefixText || (this.showTypeIcon && ['search', 'email', 'tel', 'url', 'date', 'currency'].includes(this.type) && !this.prefixIcon && !this.prefixText && this.variant !== 'plain' && this.variant !== 'borderless') || isColor || this.type === 'currency');
         const hasRealSuffix = !!((this.suffixIcon && this.suffixIcon !== 'none' && this.suffixIcon !== 'false') || this.suffixText || this.showClear || this.type === 'search' || (this.type === 'password' && this.showPasswordToggle) || this.loading || this.showCopy || this.voiceInput || this.shortcutHint);
         const inputClasses = {
             'input-wrapper': true,
@@ -971,7 +982,7 @@ export class Input {
             onKeyDown: this.handleKeydown,
             onKeyUp: this.handleKeyup,
         };
-        return (h(Host, { key: '3a051e8a9e1f0139e4657d60ef8164856307104a', class: {
+        return (h(Host, { key: '9a60ec147a5fa55b2e8b5707480b548c42f5ae9e', class: {
                 [`variant-${this.variant}`]: true,
                 [`size-${this.size}`]: true,
                 'full-width': this.fullWidth,
@@ -979,13 +990,13 @@ export class Input {
                 [`input-color-${isCustomColor ? 'custom' : this.color}`]: true,
                 'shake-animation': this.shake,
                 'focused': this.isFocused,
-            }, style: hostStyles }, h("div", { key: 'e3e095ca40775b9c8acebea74563510d1ce53783', class: { ...inputClasses, 'input-ripple': this.rippleEffect } }, this.label && !this.floatingLabel && !isOtp && h("label", { key: '80cf74ffcb51ab88a4b741735f0dd2e605dd6093', class: "input-label" }, this.label, this.required && '*'), h("div", { key: 'ab7fd102b717f98310a33f852941193eff690429', class: "input-container", onMouseDown: this.handleMouseDown, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("div", { key: '33ac5d37c8424e3676f0ff3aa7fcc56022234a7a', class: "clipping-layer" }, this.showRipple && h("div", { key: '04ce9c9370ba75eccc571b6a77fdc9d0d85aa414', class: "liquid-ripple", style: { left: `${this.rippleX}px`, top: `${this.rippleY}px` } }), this.linearLoading && h("div", { key: '57fae93bef66ce2442cff10d8c1047c06534f2f4', class: "linear-loading-bar" }), this.backdropSheen && h("div", { key: '4cc4cda3894e58b5de70ee5769c8dcdab7660394', class: "backdrop-sheen-effect" })), this.renderAutocomplete(), (this.badge || (this.dirtyTracking && this.isDirty)) && (h("span", { key: '0d81a8f25b0a5f8d657334be35fd6265b0a6d517', class: `input-badge ${!this.badge ? 'dot-mode' : ''}` }, this.badge || '')), this.renderPrefixIcon(), this.floatingLabel && !isOtp && h("label", { key: '21b3824bad5426b981cd4c3e24f0d72b11f42800', class: "floating-label" }, this.label, this.required && '*'), this.multiline ? (h("textarea", { ...commonProps, style: { resize: this.autoResize ? 'none' : this.resize }, value: this.value })) : isOtp ? (h("div", { class: "otp-container" }, Array.from({ length: this.otpLength }).map((_, i) => (h("div", { class: { 'otp-box': true, 'filled': this.value.length > i, 'active': this.value.length === i && this.isFocused } }, this.value[i] || ''))), h("input", { ...commonProps, style: { opacity: '0', position: 'absolute', inset: '0', caretColor: 'transparent' } }))) : this.type === 'range' ? (h("div", { class: "range-input-wrapper", style: { '--range-progress': `${this.getRangePercentage()}%` } }, h("input", { ...commonProps, type: "range", value: this.rangeValue, min: this.min || 0, max: this.max || 100, step: this.step || 1 }), h("div", { class: "range-manual-adornment" }, h("input", { type: "number", class: "range-manual-input", value: this.rangeValue, min: this.min || 0, max: this.max || 100, step: this.step || 1, onInput: this.handleRangeManualInput })))) : (h("div", { class: "input-field-stack" }, h("input", { ...commonProps, type: inputType, value: isFile ? this.selectedFileNames : this.value }), this.currentGhost && h("span", { class: "ghost-text-overlay", onClick: () => (this.value = this.ghostText) }, this.currentGhost))), isColor && (h("input", { key: '92a94bf2a1b15d0619402459af2042568d1b41e1', type: "color", style: { opacity: '0', position: 'absolute', inset: '0', pointerEvents: 'none' }, value: this.value || '#000000', onInput: (e) => { this.value = e.target.value; this.inputChange.emit(this.value); }, ref: (el) => (this.colorPickerElement = el) })), isFile && (h("input", { key: 'd03600aa9ed340b7aee6d8cc67f85b5d9bffef11', type: "file", style: { opacity: '0', position: 'absolute', inset: '0', cursor: 'pointer', zIndex: '1' }, accept: this.accept, multiple: this.multiple, onInput: this.handleInput, ref: (el) => (this.filePickerElement = el) })), this.suffixText && h("span", { key: 'e41d89f9aa5e3f776152bb3571dfe791bb190429', class: { 'suffix-text': true, [`block-color-${this.suffixColor}`]: !!this.suffixColor } }, this.suffixText), (this.statusIndicator !== 'none' || this.isRecording || this._voiceOffLabel) && (h("div", { key: '97c5bb06c3cd3c415ae269de07d15e9cae37bc11', class: `status-indicator status-${this.isRecording ? 'listening' : this._voiceOffLabel ? 'offline' : this.statusIndicator}` }, !this.voiceEnabled && !this.voiceInput && (this.statusIndicator === 'listening' || this.isRecording) && (h("ui-icon", { key: '13305b3242980ce30f7ddb011f9c293f65520bff', library: "lucide", name: "mic", class: "mic-pulse" })), this.statusIndicator !== 'listening' && !this.isRecording && !this._voiceOffLabel && (h("span", { key: '287f8784f85a1c8ce18185668ded6be9abdfe521', class: "status-dot" })), h("span", { key: 'dcf8414fd07f22c907d8f0a44e2f291bd8d9e06a', class: "status-label" }, this.isRecording
+            }, style: hostStyles }, h("div", { key: 'e502dc3eb3906454cc9dd59d90ace7733c0d28be', class: { ...inputClasses, 'input-ripple': this.rippleEffect } }, this.label && !this.floatingLabel && !isOtp && h("label", { key: 'cf95f5a2c55b665b381e101da1935817e5f6854e', class: "input-label" }, this.label, this.required && '*'), h("div", { key: '720476ab6d027d170c9f6578aafbd9dd6d4666ab', class: "input-container", onMouseDown: this.handleMouseDown, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("div", { key: '0aa6363f0ab1ce0b1258faa1a8e50edd2ce0194a', class: "clipping-layer" }, this.showRipple && h("div", { key: '870e6c126209301040ab87cb8268292c4554c8c6', class: "liquid-ripple", style: { left: `${this.rippleX}px`, top: `${this.rippleY}px` } }), this.linearLoading && h("div", { key: '0142a9159ae2da923f4cb8e235d450949b218858', class: "linear-loading-bar" }), this.backdropSheen && h("div", { key: '16201b907180eecf6572aa4d35acd4dc4195c2c9', class: "backdrop-sheen-effect" })), this.renderAutocomplete(), (this.badge || (this.dirtyTracking && this.isDirty)) && (h("span", { key: 'd39d26d0cf846f63623798af36b1a3246b27c475', class: `input-badge ${!this.badge ? 'dot-mode' : ''}` }, this.badge || '')), this.renderPrefixIcon(), this.floatingLabel && !isOtp && h("label", { key: 'b97c78efd92e947be92260d99e6ce33a5819e752', class: "floating-label" }, this.label, this.required && '*'), this.multiline ? (h("textarea", { ...commonProps, style: { resize: this.autoResize ? 'none' : this.resize }, value: this.value })) : isOtp ? (h("div", { class: "otp-container" }, Array.from({ length: this.otpLength }).map((_, i) => (h("div", { class: { 'otp-box': true, 'filled': this.value.length > i, 'active': this.value.length === i && this.isFocused } }, this.value[i] || ''))), h("input", { ...commonProps, style: { opacity: '0', position: 'absolute', inset: '0', caretColor: 'transparent' } }))) : this.type === 'range' ? (h("div", { class: "range-input-wrapper", style: { '--range-progress': `${this.getRangePercentage()}%` } }, h("input", { ...commonProps, type: "range", value: this.rangeValue, min: this.min || 0, max: this.max || 100, step: this.step || 1 }), h("div", { class: "range-manual-adornment" }, h("input", { type: "number", class: "range-manual-input", value: this.rangeValue, min: this.min || 0, max: this.max || 100, step: this.step || 1, onInput: this.handleRangeManualInput })))) : (h("div", { class: "input-field-stack" }, h("input", { ...commonProps, type: inputType, value: isFile ? this.selectedFileNames : this.value }), this.currentGhost && h("span", { class: "ghost-text-overlay", onClick: () => (this.value = this.ghostText) }, this.currentGhost))), isColor && (h("input", { key: 'b7cc0f56b519fcded55dca59706f65d68e2d4a6c', type: "color", style: { opacity: '0', position: 'absolute', inset: '0', pointerEvents: 'none' }, value: this.value || '#000000', onInput: (e) => { this.value = e.target.value; this.inputChange.emit(this.value); }, ref: (el) => (this.colorPickerElement = el) })), isFile && (h("input", { key: '25e806d92c00ba0152a107688613355cfe5068ee', type: "file", style: { opacity: '0', position: 'absolute', inset: '0', cursor: 'pointer', zIndex: '1' }, accept: this.accept, multiple: this.multiple, onInput: this.handleInput, ref: (el) => (this.filePickerElement = el) })), this.suffixText && h("span", { key: 'da03a61e714765539b519ad8245461e81c9674bd', class: { 'suffix-text': true, [`block-color-${this.suffixColor}`]: !!this.suffixColor } }, this.suffixText), (this.statusIndicator !== 'none' || this.isRecording || this._voiceOffLabel) && (h("div", { key: '9680ae515520a198ad817148a24df39d7a3f6a98', class: `status-indicator status-${this.isRecording ? 'listening' : this._voiceOffLabel ? 'offline' : this.statusIndicator}` }, !this.voiceEnabled && !this.voiceInput && (this.statusIndicator === 'listening' || this.isRecording) && (h("ui-icon", { key: '0c98b998db7a897d21be1f11db346cc4e205e26b', library: "lucide", name: "mic", class: "mic-pulse" })), this.statusIndicator !== 'listening' && !this.isRecording && !this._voiceOffLabel && (h("span", { key: '88e14b5da603333797c322df5422246341f16285', class: "status-dot" })), h("span", { key: '9d770b76bc248d7dba69d0822c0b79f3bfaabab9', class: "status-label" }, this.isRecording
             ? 'Listening'
             : this._voiceOffLabel
                 ? 'Not listening'
                 : this.statusIndicator !== 'none'
                     ? this.statusIndicator.charAt(0).toUpperCase() + this.statusIndicator.slice(1)
-                    : null), this.statusIndicator === 'typing' && h("span", { key: '97e33fe463f2614ad1d50434113f901295476388', class: "typing-animation" }, h("span", { key: '6a4deee492deb251b6d9166932f9bf39575dc7ae' }), h("span", { key: '7cfec2336ffed51a4a807f59d9acadf242d6eba1' }), h("span", { key: '537aee8e7a731ebe94a9a9d2782211c2ed27ee74' })))), this.renderSuffixContent(), this.renderSteppers(), this.hintTooltip && h("div", { key: '0e823d9672e91e3f3e73fee5f3b3b7ffb852d124', class: "hint-tooltip-icon", title: this.hintTooltip }, h("ui-icon", { key: 'ddbdd7627df9b9e0b5f21549555478957b987acb', library: "lucide", name: "help-circle" }))), (validationMessage || this.showCounter || this.minLengthIndicator || this.maxLengthIndicator || (this.type === 'password' && this.value && this.showPasswordStrength)) && (h("div", { key: 'b744601318eb4bc5591c46b55c7bb6c695b53e0d', class: "input-footer" }, this.type === 'password' && this.value && this.showPasswordStrength && (h("div", { key: '0a53061d23adf47ed76c9f136208fa6d1aea24ba', class: "password-strength-meter" }, h("div", { key: 'bb04a6a647595ac406a19f66d2070709d9d70427', class: `strength-bar strength-${this.passwordStrength}` }))), validationMessage && (h("span", { key: 'b2afa105430243ed422fbba82f3411becb889a65', class: `helper-text ${this.validationState !== 'none' ? this.validationState + '-text' : ''}` }, this.validationState === 'error' && h("ui-icon", { key: 'ada379d68e13611f58892c386133633ca52eb20f', library: "lucide", name: "alert-circle", class: "validation-icon" }), this.validationState === 'warning' && h("ui-icon", { key: '28b17d21ea957ba6e9c7fc556737182c11894d8f', library: "lucide", name: "alert-triangle", class: "validation-icon" }), this.validationState === 'success' && h("ui-icon", { key: '3ea20f412b2a859070585d2cbafade0f692bbbad', library: "lucide", name: "check-circle-2", class: "validation-icon" }), this.validationState === 'info' && h("ui-icon", { key: 'f6cfbfbe60bcf78ea2dcd50b75bda182bc8133a1', library: "lucide", name: "info", class: "validation-icon" }), validationMessage)), this.relativeTime && this.type === 'date' && this.value && (h("span", { key: 'f952bbb2fc1d5833b64e90717b1c0b8c2ed88e69', class: "relative-time-overlay" }, this.getRelativeTimeString(this.value))), this.showCounter && this.maxLength && h("span", { key: '86521b16722af6200a90d99d97b5d41fb601cc88', class: "character-counter" }, this.currentLength, "/", this.maxLength), this.renderLengthIndicator())))));
+                    : null), this.statusIndicator === 'typing' && h("span", { key: '1841bca58c42f9893f293457219f191fc3a3cbaa', class: "typing-animation" }, h("span", { key: '566c69184b5962469dabf7f10f6576e0cdae2252' }), h("span", { key: 'fb5556bb660ac76d8a5397cdd0d91186cf88339e' }), h("span", { key: '451c92cdcd4b43f05021224e12a44ff6fbd6912b' })))), this.renderSuffixContent(), this.renderSteppers(), this.hintTooltip && h("div", { key: '97994c03e366b0053256666df50e66b4bbaaa5b5', class: "hint-tooltip-icon", title: this.hintTooltip }, h("ui-icon", { key: 'a7d61711aba28201c218a6a9899f1c76dab86070', library: "lucide", name: "help-circle" }))), (validationMessage || this.showCounter || this.minLengthIndicator || this.maxLengthIndicator || (this.type === 'password' && this.value && this.showPasswordStrength)) && (h("div", { key: 'b12ff7f34d5fd33eb4cf8a52bcee590b79ba540a', class: "input-footer" }, this.type === 'password' && this.value && this.showPasswordStrength && (h("div", { key: '063096f5f7c035a5f3d787a6cc4c104812dbe2d2', class: "password-strength-meter" }, h("div", { key: '0bc8772ccfafcac7ffd343f3ffe447e22a271be0', class: `strength-bar strength-${this.passwordStrength}` }))), validationMessage && (h("span", { key: 'ddfc73c09005217a0c9bfb614690ad988a76dc0b', class: `helper-text ${this.validationState !== 'none' ? this.validationState + '-text' : ''}` }, this.validationState === 'error' && h("ui-icon", { key: 'd5a240295b07fc6bb4e76ac4c9f6154cb4819655', library: "lucide", name: "alert-circle", class: "validation-icon" }), this.validationState === 'warning' && h("ui-icon", { key: 'a596776cfd419ea66b6a69ea85ca65dc2c058d0b', library: "lucide", name: "alert-triangle", class: "validation-icon" }), this.validationState === 'success' && h("ui-icon", { key: '7c3b20980d11d7d4429a4c53fad8f93fb51773e7', library: "lucide", name: "check-circle-2", class: "validation-icon" }), this.validationState === 'info' && h("ui-icon", { key: 'e2d6e55549ae7c038dd9f5f293895be1c255f25e', library: "lucide", name: "info", class: "validation-icon" }), validationMessage)), this.relativeTime && this.type === 'date' && this.value && (h("span", { key: '11d4bd88d83070f3ebdad9ae53686447d6f16152', class: "relative-time-overlay" }, this.getRelativeTimeString(this.value))), this.showCounter && this.maxLength && h("span", { key: '7f7d35051ff6a206abe35085e798609725499268', class: "character-counter" }, this.currentLength, "/", this.maxLength), this.renderLengthIndicator())))));
     }
     static get is() { return "ui-input"; }
     static get encapsulation() { return "shadow"; }
@@ -1026,7 +1037,7 @@ export class Input {
                 "mutable": false,
                 "complexType": {
                     "original": "StatusColor",
-                    "resolved": "\"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\"",
+                    "resolved": "\"black\" | \"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\" | \"white\"",
                     "references": {
                         "StatusColor": {
                             "location": "import",
@@ -1053,7 +1064,7 @@ export class Input {
                 "mutable": false,
                 "complexType": {
                     "original": "StatusColor",
-                    "resolved": "\"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\"",
+                    "resolved": "\"black\" | \"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\" | \"white\"",
                     "references": {
                         "StatusColor": {
                             "location": "import",
@@ -1079,7 +1090,7 @@ export class Input {
                 "mutable": false,
                 "complexType": {
                     "original": "StatusColor",
-                    "resolved": "\"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\"",
+                    "resolved": "\"black\" | \"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\" | \"white\"",
                     "references": {
                         "StatusColor": {
                             "location": "import",
@@ -1987,7 +1998,7 @@ export class Input {
                 "mutable": true,
                 "complexType": {
                     "original": "ValidationState",
-                    "resolved": "\"borderless\" | \"danger\" | \"default\" | \"dirty\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"typing\" | \"warning\"",
+                    "resolved": "\"black\" | \"borderless\" | \"danger\" | \"default\" | \"dirty\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"typing\" | \"warning\" | \"white\"",
                     "references": {
                         "ValidationState": {
                             "location": "import",