atomicuilibrary 0.0.1 → 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: 'e4063f1d2456a41e57309506da2b79f1bbf518bd', 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: '7fd5939b576307e8285e5f53c91a7fc969617fa0', class: { ...inputClasses, 'input-ripple': this.rippleEffect } }, this.label && !this.floatingLabel && !isOtp && h("label", { key: '0fa810d3e66f3d224340d93006df75b63f528912', class: "input-label" }, this.label, this.required && '*'), h("div", { key: 'e2c21f6e14645a1fce1e6de5b1500ba41e04b115', class: "input-container", onMouseDown: this.handleMouseDown, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("div", { key: '73c7397d9d57c3effd34b6dab5bac043da68a78f', class: "clipping-layer" }, this.showRipple && h("div", { key: 'dc23482a5f56c51605911625605285451225ca81', class: "liquid-ripple", style: { left: `${this.rippleX}px`, top: `${this.rippleY}px` } }), this.linearLoading && h("div", { key: 'a10a205c11a4dc9468d709148ab713f5a927699b', class: "linear-loading-bar" }), this.backdropSheen && h("div", { key: '1d09a9fd9aa04999bc56186fec1be51f963f0e3d', class: "backdrop-sheen-effect" })), this.renderAutocomplete(), (this.badge || (this.dirtyTracking && this.isDirty)) && (h("span", { key: '8b6b915bbf616387f937e25b73c15cd4f42694c3', class: `input-badge ${!this.badge ? 'dot-mode' : ''}` }, this.badge || '')), this.renderPrefixIcon(), this.floatingLabel && !isOtp && h("label", { key: '36418949fb5a3613f3c56517db0b2ba52e74d1d0', 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: '71f29e41543ada3bb27402ec955ce17172866c35', 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: 'f11732d7b0a60588b2d3fc74525cecb63c494a0d', 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: '5daa65c5274948ca30e12f9d305b5ed36aca27b9', class: { 'suffix-text': true, [`block-color-${this.suffixColor}`]: !!this.suffixColor } }, this.suffixText), (this.statusIndicator !== 'none' || this.isRecording || this._voiceOffLabel) && (h("div", { key: 'f0a15ca443598eccff24608f24e03f6b6c524409', 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: '3debcf72af06dab5cd5ab03f9e81793cde4c0a95', library: "lucide", name: "mic", class: "mic-pulse" })), this.statusIndicator !== 'listening' && !this.isRecording && !this._voiceOffLabel && (h("span", { key: '440b5c5cad18a6b7cd0de8c04dd0f49ae35db124', class: "status-dot" })), h("span", { key: 'bffc20acbaf070199bef467cefa3c25adc328221', 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: '19262bd829f945fd203266ea67c248a94a775f71', class: "typing-animation" }, h("span", { key: '769cbdde9e871c0fefa37466f5189bd4b95f04c9' }), h("span", { key: 'ada0306edd6f3f942e0d0258b820f3d425278654' }), h("span", { key: '687a023614358579750b5f493ad2bb8511ef2910' })))), this.renderSuffixContent(), this.renderSteppers(), this.hintTooltip && h("div", { key: '86d50262507a075bd68ea71fabcf4914d6a118e3', class: "hint-tooltip-icon", title: this.hintTooltip }, h("ui-icon", { key: 'e5590e7a20808a41bdfc3719e00b9e5ad2fc4a1d', library: "lucide", name: "help-circle" }))), (validationMessage || this.showCounter || this.minLengthIndicator || this.maxLengthIndicator || (this.type === 'password' && this.value && this.showPasswordStrength)) && (h("div", { key: '9479bdd436afd44ee5b05dfc99bd6ce84379f058', class: "input-footer" }, this.type === 'password' && this.value && this.showPasswordStrength && (h("div", { key: '0ea62a19ed66dc33e98a3aba4a63c62589fb560e', class: "password-strength-meter" }, h("div", { key: '3564a2205d7ade940909e12ef18b3ec71c06b583', class: `strength-bar strength-${this.passwordStrength}` }))), validationMessage && (h("span", { key: '4015b4eb68d7045a4447df795debefa080acd854', class: `helper-text ${this.validationState !== 'none' ? this.validationState + '-text' : ''}` }, this.validationState === 'error' && h("ui-icon", { key: 'bb9a04f2f7b577d9d797e574263fc96800e7184a', library: "lucide", name: "alert-circle", class: "validation-icon" }), this.validationState === 'warning' && h("ui-icon", { key: '2e756012a47e39f76472cd21497c692cb2cb66fa', library: "lucide", name: "alert-triangle", class: "validation-icon" }), this.validationState === 'success' && h("ui-icon", { key: '66d61660c177e1f4fece47bf7433c37045a13506', library: "lucide", name: "check-circle-2", class: "validation-icon" }), this.validationState === 'info' && h("ui-icon", { key: '6e41af71dd9abacd6f58e386297d023294dff819', library: "lucide", name: "info", class: "validation-icon" }), validationMessage)), this.relativeTime && this.type === 'date' && this.value && (h("span", { key: 'ac8f3dae2f0aa149cf6394e7683599a6a3e4505e', class: "relative-time-overlay" }, this.getRelativeTimeString(this.value))), this.showCounter && this.maxLength && h("span", { key: '5226cbf5034a58151a46c687180616246c9039d9', 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",
@@ -1754,7 +1765,7 @@ export class Input {
                 "mutable": false,
                 "complexType": {
                     "original": "InputVariant",
-                    "resolved": "\"bordered\" | \"borderless\" | \"color\" | \"danger\" | \"dark\" | \"default\" | \"dots-only\" | \"elevated\" | \"error\" | \"filled\" | \"flat\" | \"ghost\" | \"glass\" | \"gradient\" | \"info\" | \"inverse\" | \"light\" | \"minimal\" | \"neutral\" | \"outlined\" | \"panel\" | \"plain\" | \"primary\" | \"quaternary\" | \"raised\" | \"secondary\" | \"segmented\" | \"soft\" | \"solid\" | \"standard\" | \"success\" | \"surface\" | \"tertiary\" | \"text\" | \"underlined\" | \"warning\"",
+                    "resolved": "\"bordered\" | \"borderless\" | \"color\" | \"danger\" | \"dark\" | \"default\" | \"dots-only\" | \"elevated\" | \"error\" | \"filled\" | \"flat\" | \"ghost\" | \"glass\" | \"gradient\" | \"info\" | \"inverse\" | \"light\" | \"minimal\" | \"neutral\" | \"outlined\" | \"panel\" | \"plain\" | \"primary\" | \"quaternary\" | \"raised\" | \"secondary\" | \"segmented\" | \"soft\" | \"solid\" | \"standard\" | \"status\" | \"success\" | \"surface\" | \"tertiary\" | \"text\" | \"underlined\" | \"warning\"",
                     "references": {
                         "InputVariant": {
                             "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",