@sky.ui/core 0.0.40 → 0.0.42

package/dist/sky-input/sky-input.js

@@ -1,17 +1,17 @@
-import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefined as a}from"lit/directives/if-defined.js";import{styleMap as r}from"lit/directives/style-map.js";import{property as n,state as o,query as l,customElement as p}from"lit/decorators.js";import{resolveColor as d}from"../helper/utils/color-resolver.js";import{live as h}from"lit/directives/live.js";import{FormControlBase as c}from"../helper/internals/form-control-base.js";import{SkyIcon as u}from"../sky-icon/sky-icon.js";var y=Object.defineProperty,v=Object.getOwnPropertyDescriptor,f=(t,e,i,s)=>{for(var a,r=s>1?void 0:s?v(e,i):e,n=t.length-1;n>=0;n--)(a=t[n])&&(r=(s?a(e,i,r):a(r))||r);return s&&r&&y(e,i,r),r};let m=class extends c{constructor(){super(...arguments),this.value="",this.placeholder="",this.label="",this.type="text",this.suffix="",this.prefix="",this.prefixColor="",this.suffixColor="",this.color="primary",this._validations=[],this.compact=!1,this.loading=!1,this.showErrors=!1,this.clearable=!1,this.errorDisplayMode="single",this.required=!1,this.step=null,this.min=null,this.max=null,this.autocapitalize="off",this.autocomplete="off",this.spellcheck=!1,this.dir="ltr",this.rows=6,this.resizable="none",this.accept="",this.multiple=!1,this.inputmode=null,this.enterkeyhint=null,this.pattern=null,this.minlength=null,this.maxlength=null,this.list=null,this.size=null,this.cols=null,this.autofocus=!1,this.capture=!1,this.inputRole=null,this.ariaLabel=null,this.ariaLabelledby=null,this.ariaDescribedby=null,this.showNumberButtons=!1,this.showPasswordToggle=!0,this.passwordVisibleIcon="material-symbols:visibility-off",this.passwordHiddenIcon="material-symbols:visibility",this.validationActive=!1,this.invalid=!1,this.variant="default",this.selectedFileName="",this.selectedFiles=[],this.focused=!1,this.validationStatus=[],this.validationErrors=[],this.typingStarted=!1,this.autofillIconSlot="left",this.autofillGuardActive=!1,this.showPassword=!1,this.totalFileSize=0,this.selectedFileCount=0,this.filePreview=null,this._leftIconSlot=null,this._rightIconSlot=null,this._iconClickWired=new WeakSet,this._onLeftIconSlotChange=()=>this._wireIconSlot("left",this._leftIconSlot),this._onRightIconSlotChange=()=>this._wireIconSlot("right",this._rightIconSlot),this.keepInputFocused=t=>{t.preventDefault(),t.stopPropagation(),this.refocusInput()}}get validations(){return this._validations}set validations(t){const e=this._validations;this._validations=Array.isArray(t)?t:[],this.requestUpdate("validations",e)}connectedCallback(){super.connectedCallback(),this.autofillGuardActive="search"===this.type,this.hasAttribute("tabindex")||(this.tabIndex=this.disabled?-1:0),this.hasUpdated&&this._setupIconSlots()}disconnectedCallback(){this._leftIconSlot?.removeEventListener("slotchange",this._onLeftIconSlotChange),this._rightIconSlot?.removeEventListener("slotchange",this._onRightIconSlotChange),this._leftIconSlot=null,this._rightIconSlot=null,super.disconnectedCallback()}_setupIconSlots(){this._leftIconSlot||(this._leftIconSlot=this.shadowRoot?.querySelector('slot[name="icon-left"]')??null,this._leftIconSlot?.addEventListener("slotchange",this._onLeftIconSlotChange)),this._rightIconSlot||(this._rightIconSlot=this.shadowRoot?.querySelector('slot[name="icon-right"]')??null,this._rightIconSlot?.addEventListener("slotchange",this._onRightIconSlotChange)),this._wireIconSlot("left",this._leftIconSlot),this._wireIconSlot("right",this._rightIconSlot)}_wireIconSlot(t,e){if(e)for(const i of e.assignedElements({flatten:!0}))i instanceof HTMLElement&&(this._iconClickWired.has(i)||(this._iconClickWired.add(i),i.addEventListener("click",()=>this.handleIconClick(t))))}firstUpdated(t){super.firstUpdated(t),this.captureDefaultValue(this.value),this.syncFormValue(),this.syncValidity(),this._setupIconSlots()}willUpdate(t){t.has("validations")&&Array.isArray(this.validations)&&(this.validationStatus=this.validations.map(()=>!1)),t.has("value")&&"file"===this.type&&(null==this.value||""===String(this.value).trim()?(this.selectedFileName="",this.selectedFiles=[],this.totalFileSize=0,this.selectedFileCount=0,this.filePreview=null):this.selectedFileName||(this.selectedFileName=this.value)),t.has("type")&&"search"===this.type&&(this.autofillGuardActive=!0)}updated(t){if(super.updated(t),t.has("color")&&this.color&&this.style.setProperty("--sky-input-color",d(this.color)),t.has("rows")){const t=this.inputWrapperEl;t&&t.style.setProperty("--rows",String(this.rows))}(t.has("value")||t.has("selectedFiles")||t.has("selectedFileName")||t.has("type")||t.has("multiple")||t.has("name")||t.has("disabled"))&&this.syncFormValue(),(t.has("value")||t.has("selectedFiles")||t.has("selectedFileName")||t.has("validationErrors")||t.has("required")||t.has("disabled")||t.has("readonly"))&&this.syncValidity()}getFormValue(){if(!this.name)return null;if("file"===this.type){if(!this.selectedFiles||0===this.selectedFiles.length)return null;if(this.multiple){const t=new FormData;for(const e of this.selectedFiles)t.append(this.name,e);return t}return this.selectedFiles[0]}return this.value??""}setValueFromFormState(t){"string"!=typeof t?(this.value="",this.selectedFileName="",this.selectedFiles=[],this.totalFileSize=0,this.selectedFileCount=0,this.filePreview=null):this.value=t}getValidityAnchor(){return this}isEmpty(){return"file"===this.type?!this.selectedFiles||0===this.selectedFiles.length:!this.value||""===this.value.toString().trim()}getCustomErrorMessage(){return this.validationErrors?.length?"all"===this.errorDisplayMode?this.validationErrors.join("\n"):this.validationErrors[0]:""}getNativeControl(){return"textarea"===this.type?this.shadowRoot?.querySelector("textarea"):this.shadowRoot?.querySelector("input")}onNativeValueMutated(t){"file"!==this.type&&(this.value=t?.value??""),this.validateInput()}reset(){this.value="",this.selectedFileName="",this.filePreview=null,this.selectedFiles=[],this.selectedFileCount=0,this.validationErrors=[],this.typingStarted=!1,this.validationActive=!1,this.selectedFileCount=0,this.totalFileSize=0}get nativeRequiredMessage(){return this.validationActive?this.disabled?"":this.required&&this.isEmpty()?this.requiredMessage||"This field is required.":"":""}getEmittedValue(){if("number"!==this.type)return this.value;if(""===this.value||null==this.value)return"";const t=Number(this.value);return Number.isFinite(t)?t:this.value}handleClear(){this.disabled||this.readonly||(this.reset(),this.validationActive=!0,this.validateInput(),this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.getEmittedValue()},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("value-cleared",{detail:{value:this.getEmittedValue()},bubbles:!0,composed:!0})))}handleFileChange(t){if(this.disabled||this.readonly)return;const e=t.target.files;if(e&&e.length){const i=Array.from(e);this.selectedFiles=i,this.selectedFileName=i.map(t=>t.name).join(", "),this.value=this.selectedFileName,this.syncFormValue(),this.syncValidity();const s=i.reduce((t,e)=>t+e.size,0);if(this.totalFileSize=s,this.selectedFileCount=i.length,i[0].type.startsWith("image/")){const t=new FileReader;t.onload=t=>{t.target&&(this.filePreview=t.target.result)},t.readAsDataURL(i[0])}else this.filePreview=null;this.reemitNativeEvent("change",t),this.reemitNativeEvent("input",t),this.dispatchEvent(new CustomEvent("file-selected",{detail:{files:i,fileName:this.selectedFileName,totalSize:s,fileCount:this.selectedFileCount},bubbles:!0,composed:!0})),this.validateInput()}else this.value="",this.filePreview=null,this.totalFileSize=0,this.selectedFileCount=0,this.selectedFiles=[],this.validateInput()}handleKeydown(t){this.disabled||this.readonly||"Enter"===t.key&&"file"===this.type&&(t.preventDefault(),t.stopPropagation(),this.triggerNativeDropdown())}get preview(){return this.filePreview}handleInput(t){t.stopPropagation(),this.disabled||this.readonly?t.preventDefault():(this.value=t.target.value,this.syncFormValue(),this.syncValidity(),this.typingStarted||(this.typingStarted=!0),this.validateInput(),this.reemitNativeEvent("input",t),this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.getEmittedValue()},bubbles:!0,composed:!0})))}handleFocus(t){t.stopPropagation(),this.releaseAutofillGuard(),this.focused=!0,this.reemitNativeEvent("focus",t)}releaseAutofillGuard(){this.autofillGuardActive&&(this.autofillGuardActive=!1)}handleAutofillGuardPointerDown(t){this.releaseAutofillGuard(),t.stopPropagation()}onFormReset(){this.setValueFromFormState(this.defaultValue),this.validationActive=!1,this.invalid=!1,this.typingStarted=!1,this.validationErrors=[],this.validationStatus=[],"file"===this.type&&(this.selectedFiles=[],this.selectedFileName="",this.totalFileSize=0,this.selectedFileCount=0,this.filePreview=null),"search"===this.type&&(this.autofillGuardActive=!0)}handleBlur(t){t.stopPropagation(),this.validationActive=!0,this.focused=!1,this.reemitNativeEvent("blur",t)}validateForForm(){const t="file"===this.type?this.selectedFiles??[]:this.value??"";for(const e of this.validations??[]){const i=e(t);if(!0!==i)return"string"==typeof i?i:"Invalid value."}return""}validateInput(){this.validationErrors=[],this.validationStatus=[];const t="file"===this.type,e=t?!this.selectedFiles||0===this.selectedFiles.length:!this.value||""===this.value.toString().trim();if(this.required&&e&&this.syncValidity(),Array.isArray(this.validations)&&this.validations.length){const e=t?this.selectedFiles??[]:this.value??"";this.validationStatus=this.validations.map((t,i)=>{try{if("function"!=typeof t)throw new Error(`Validation at index ${i} must be a function.`);const s=t(e);return!0===s||(this.validationErrors.push("string"==typeof s?s:`Validation ${i} failed.`),!1)}catch(t){const e="object"==typeof t&&null!==t&&"message"in t?String(t.message):"string"==typeof t?t:"Unknown error";return this.validationErrors.push(`Error in validation ${i}: ${e}`),!1}})}this.dispatchEvent(new CustomEvent("validation-error",{detail:{errors:this.validationErrors},bubbles:!0,composed:!0})),this.syncValidity();const i=0===this.validationErrors.length;return this.invalid=!i,i}getErrorMessages(){switch(this.errorDisplayMode){case"single":return this.validationErrors.slice(0,1);case"all":return this.validationErrors;default:return[]}}handleIconClick(t,e=null){this.dispatchEvent(new CustomEvent(`${t}-icon-click`,{detail:{position:t,eventType:e?e.type:null,eventData:e},bubbles:!0,composed:!0}))}formatFileSize(t){if(0===t)return"0 Bytes";const e=Math.floor(Math.log(t)/Math.log(1024));return`${parseFloat((t/Math.pow(1024,e)).toFixed(2))} ${["Bytes","KB","MB","GB","TB"][e]}`}incrementValue(){if(this.disabled||this.readonly)return;const t=parseFloat(this.value)||0,e=parseFloat(this.step??"")||1;t+e<=(this.max?parseFloat(this.max):1/0)&&(this.value=(t+e).toString(),this.validateInput(),this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.getEmittedValue()}}))),this.refocusInput()}decrementValue(){if(this.disabled||this.readonly)return;const t=parseFloat(this.value)||0,e=parseFloat(this.step??"")||1;t-e>=(this.min?parseFloat(this.min):-1/0)&&(this.value=(t-e).toString(),this.validateInput(),this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.getEmittedValue()}}))),this.refocusInput()}renderValidationErrors(){if(!this.showErrors||!this.validationActive)return null;const t=this.nativeRequiredMessage,e=this.getErrorMessages();let s=[];if("single"===this.errorDisplayMode?t?s=[t]:e.length&&(s=[e[0]]):s=t?[t,...e]:e,!s.length)return null;const a=`${this.id||"sky-input"}-errors`;return i`
+import{css as t,LitElement as e,html as i,nothing as a}from"lit";import{ifDefined as s}from"lit/directives/if-defined.js";import{styleMap as r}from"lit/directives/style-map.js";import{property as o,state as n,query as l,customElement as p}from"lit/decorators.js";import{resolveColor as d}from"../helper/utils/color-resolver.js";import{PresetController as h}from"../helper/controllers/preset-controller.js";import{live as c}from"lit/directives/live.js";import{FormControlBase as u}from"../helper/internals/form-control-base.js";import{SkyIcon as y}from"../sky-icon/sky-icon.js";var v=Object.defineProperty,f=Object.getOwnPropertyDescriptor,m=(t,e,i,a)=>{for(var s,r=a>1?void 0:a?f(e,i):e,o=t.length-1;o>=0;o--)(s=t[o])&&(r=(a?s(e,i,r):s(r))||r);return a&&r&&v(e,i,r),r};let g=class extends u{constructor(){super(...arguments),this.value="",this.placeholder="",this.label="",this.type="text",this.suffix="",this.prefix="",this.prefixColor="",this.suffixColor="",this.color="primary",this._validations=[],this.compact=!1,this.loading=!1,this.showErrors=!1,this.clearable=!1,this.errorDisplayMode="single",this.required=!1,this.step=null,this.min=null,this.max=null,this.autocapitalize="off",this.autocomplete="off",this.spellcheck=!1,this.dir="ltr",this.rows=6,this.resizable="none",this.accept="",this.multiple=!1,this.inputmode=null,this.enterkeyhint=null,this.pattern=null,this.minlength=null,this.maxlength=null,this.list=null,this.size=null,this.cols=null,this.autofocus=!1,this.capture=!1,this.inputRole=null,this.ariaLabel=null,this.ariaLabelledby=null,this.ariaDescribedby=null,this.showNumberButtons=!1,this.showPasswordToggle=!0,this.passwordVisibleIcon="material-symbols:visibility-off",this.passwordHiddenIcon="material-symbols:visibility",this.validationActive=!1,this.invalid=!1,this.variant="default",this.preset="",this._presets=new h(this),this.selectedFileName="",this.selectedFiles=[],this.focused=!1,this.validationStatus=[],this.validationErrors=[],this.typingStarted=!1,this.autofillIconSlot="left",this.autofillGuardActive=!1,this.showPassword=!1,this.totalFileSize=0,this.selectedFileCount=0,this.filePreview=null,this._leftIconSlot=null,this._rightIconSlot=null,this._iconClickWired=new WeakSet,this._onLeftIconSlotChange=()=>this._wireIconSlot("left",this._leftIconSlot),this._onRightIconSlotChange=()=>this._wireIconSlot("right",this._rightIconSlot),this.keepInputFocused=t=>{t.preventDefault(),t.stopPropagation(),this.refocusInput()}}get validations(){return this._validations}set validations(t){const e=this._validations;this._validations=Array.isArray(t)?t:[],this.requestUpdate("validations",e)}connectedCallback(){super.connectedCallback(),this.autofillGuardActive="search"===this.type,this.hasAttribute("tabindex")||(this.tabIndex=this.disabled?-1:0),this.hasUpdated&&this._setupIconSlots()}disconnectedCallback(){this._leftIconSlot?.removeEventListener("slotchange",this._onLeftIconSlotChange),this._rightIconSlot?.removeEventListener("slotchange",this._onRightIconSlotChange),this._leftIconSlot=null,this._rightIconSlot=null,super.disconnectedCallback()}_setupIconSlots(){this._leftIconSlot||(this._leftIconSlot=this.shadowRoot?.querySelector('slot[name="icon-left"]')??null,this._leftIconSlot?.addEventListener("slotchange",this._onLeftIconSlotChange)),this._rightIconSlot||(this._rightIconSlot=this.shadowRoot?.querySelector('slot[name="icon-right"]')??null,this._rightIconSlot?.addEventListener("slotchange",this._onRightIconSlotChange)),this._wireIconSlot("left",this._leftIconSlot),this._wireIconSlot("right",this._rightIconSlot)}_wireIconSlot(t,e){if(e)for(const i of e.assignedElements({flatten:!0}))i instanceof HTMLElement&&(this._iconClickWired.has(i)||(this._iconClickWired.add(i),i.addEventListener("click",()=>this.handleIconClick(t))))}firstUpdated(t){super.firstUpdated(t),this.captureDefaultValue(this.value),this.syncFormValue(),this.syncValidity(),this._setupIconSlots()}willUpdate(t){t.has("validations")&&Array.isArray(this.validations)&&(this.validationStatus=this.validations.map(()=>!1)),t.has("value")&&"file"===this.type&&(null==this.value||""===String(this.value).trim()?(this.selectedFileName="",this.selectedFiles=[],this.totalFileSize=0,this.selectedFileCount=0,this.filePreview=null):this.selectedFileName||(this.selectedFileName=this.value)),t.has("type")&&"search"===this.type&&(this.autofillGuardActive=!0)}updated(t){if(super.updated(t),this.setAttribute("data-sky-variant",this.variant),this.toggleAttribute("data-sky-compact",this.compact),this.color&&this.style.setProperty("--sky-input-color",d(this.color)),t.has("rows")){const t=this.inputWrapperEl;t&&t.style.setProperty("--rows",String(this.rows))}(t.has("value")||t.has("selectedFiles")||t.has("selectedFileName")||t.has("type")||t.has("multiple")||t.has("name")||t.has("disabled"))&&this.syncFormValue(),(t.has("value")||t.has("selectedFiles")||t.has("selectedFileName")||t.has("validationErrors")||t.has("required")||t.has("disabled")||t.has("readonly"))&&this.syncValidity()}getFormValue(){if(!this.name)return null;if("file"===this.type){if(!this.selectedFiles||0===this.selectedFiles.length)return null;if(this.multiple){const t=new FormData;for(const e of this.selectedFiles)t.append(this.name,e);return t}return this.selectedFiles[0]}return this.value??""}setValueFromFormState(t){"string"!=typeof t?(this.value="",this.selectedFileName="",this.selectedFiles=[],this.totalFileSize=0,this.selectedFileCount=0,this.filePreview=null):this.value=t}getValidityAnchor(){return this}isEmpty(){return"file"===this.type?!this.selectedFiles||0===this.selectedFiles.length:!this.value||""===this.value.toString().trim()}getCustomErrorMessage(){return this.validationErrors?.length?"all"===this.errorDisplayMode?this.validationErrors.join("\n"):this.validationErrors[0]:""}getNativeControl(){return"textarea"===this.type?this.shadowRoot?.querySelector("textarea"):this.shadowRoot?.querySelector("input")}onNativeValueMutated(t){"file"!==this.type&&(this.value=t?.value??""),this.validateInput()}reset(){this.value="",this.selectedFileName="",this.filePreview=null,this.selectedFiles=[],this.selectedFileCount=0,this.validationErrors=[],this.typingStarted=!1,this.validationActive=!1,this.selectedFileCount=0,this.totalFileSize=0}get nativeRequiredMessage(){return this.validationActive?this.disabled?"":this.required&&this.isEmpty()?this.requiredMessage||"This field is required.":"":""}getEmittedValue(){if("number"!==this.type)return this.value;if(""===this.value||null==this.value)return"";const t=Number(this.value);return Number.isFinite(t)?t:this.value}handleClear(){this.disabled||this.readonly||(this.reset(),this.validationActive=!0,this.validateInput(),this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.getEmittedValue()},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("value-cleared",{detail:{value:this.getEmittedValue()},bubbles:!0,composed:!0})))}handleFileChange(t){if(this.disabled||this.readonly)return;const e=t.target.files;if(e&&e.length){const i=Array.from(e);this.selectedFiles=i,this.selectedFileName=i.map(t=>t.name).join(", "),this.value=this.selectedFileName,this.syncFormValue(),this.syncValidity();const a=i.reduce((t,e)=>t+e.size,0);if(this.totalFileSize=a,this.selectedFileCount=i.length,i[0].type.startsWith("image/")){const t=new FileReader;t.onload=t=>{t.target&&(this.filePreview=t.target.result)},t.readAsDataURL(i[0])}else this.filePreview=null;this.reemitNativeEvent("change",t),this.reemitNativeEvent("input",t),this.dispatchEvent(new CustomEvent("file-selected",{detail:{files:i,fileName:this.selectedFileName,totalSize:a,fileCount:this.selectedFileCount},bubbles:!0,composed:!0})),this.validateInput()}else this.value="",this.filePreview=null,this.totalFileSize=0,this.selectedFileCount=0,this.selectedFiles=[],this.validateInput()}handleKeydown(t){this.disabled||this.readonly||"Enter"===t.key&&"file"===this.type&&(t.preventDefault(),t.stopPropagation(),this.triggerNativeDropdown())}get preview(){return this.filePreview}handleInput(t){t.stopPropagation(),this.disabled||this.readonly?t.preventDefault():(this.value=t.target.value,this.syncFormValue(),this.syncValidity(),this.typingStarted||(this.typingStarted=!0),this.validateInput(),this.reemitNativeEvent("input",t),this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.getEmittedValue()},bubbles:!0,composed:!0})))}handleFocus(t){t.stopPropagation(),this.releaseAutofillGuard(),this.focused=!0,this.reemitNativeEvent("focus",t)}releaseAutofillGuard(){this.autofillGuardActive&&(this.autofillGuardActive=!1)}handleAutofillGuardPointerDown(t){this.releaseAutofillGuard(),t.stopPropagation()}onFormReset(){this.setValueFromFormState(this.defaultValue),this.validationActive=!1,this.invalid=!1,this.typingStarted=!1,this.validationErrors=[],this.validationStatus=[],"file"===this.type&&(this.selectedFiles=[],this.selectedFileName="",this.totalFileSize=0,this.selectedFileCount=0,this.filePreview=null),"search"===this.type&&(this.autofillGuardActive=!0)}handleBlur(t){t.stopPropagation(),this.validationActive=!0,this.focused=!1,this.reemitNativeEvent("blur",t)}validateForForm(){const t="file"===this.type?this.selectedFiles??[]:this.value??"";for(const e of this.validations??[]){const i=e(t);if(!0!==i)return"string"==typeof i?i:"Invalid value."}return""}validateInput(){this.validationErrors=[],this.validationStatus=[];const t="file"===this.type,e=t?!this.selectedFiles||0===this.selectedFiles.length:!this.value||""===this.value.toString().trim();if(this.required&&e&&this.syncValidity(),Array.isArray(this.validations)&&this.validations.length){const e=t?this.selectedFiles??[]:this.value??"";this.validationStatus=this.validations.map((t,i)=>{try{if("function"!=typeof t)throw new Error(`Validation at index ${i} must be a function.`);const a=t(e);return!0===a||(this.validationErrors.push("string"==typeof a?a:`Validation ${i} failed.`),!1)}catch(t){const e="object"==typeof t&&null!==t&&"message"in t?String(t.message):"string"==typeof t?t:"Unknown error";return this.validationErrors.push(`Error in validation ${i}: ${e}`),!1}})}this.dispatchEvent(new CustomEvent("validation-error",{detail:{errors:this.validationErrors},bubbles:!0,composed:!0})),this.syncValidity();const i=0===this.validationErrors.length;return this.invalid=!i,i}getErrorMessages(){switch(this.errorDisplayMode){case"single":return this.validationErrors.slice(0,1);case"all":return this.validationErrors;default:return[]}}handleIconClick(t,e=null){this.dispatchEvent(new CustomEvent(`${t}-icon-click`,{detail:{position:t,eventType:e?e.type:null,eventData:e},bubbles:!0,composed:!0}))}formatFileSize(t){if(0===t)return"0 Bytes";const e=Math.floor(Math.log(t)/Math.log(1024));return`${parseFloat((t/Math.pow(1024,e)).toFixed(2))} ${["Bytes","KB","MB","GB","TB"][e]}`}incrementValue(){if(this.disabled||this.readonly)return;const t=parseFloat(this.value)||0,e=parseFloat(this.step??"")||1;t+e<=(this.max?parseFloat(this.max):1/0)&&(this.value=(t+e).toString(),this.validateInput(),this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.getEmittedValue()}}))),this.refocusInput()}decrementValue(){if(this.disabled||this.readonly)return;const t=parseFloat(this.value)||0,e=parseFloat(this.step??"")||1;t-e>=(this.min?parseFloat(this.min):-1/0)&&(this.value=(t-e).toString(),this.validateInput(),this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.getEmittedValue()}}))),this.refocusInput()}renderValidationErrors(){if(!this.showErrors||!this.validationActive)return null;const t=this.nativeRequiredMessage,e=this.getErrorMessages();let a=[];if("single"===this.errorDisplayMode?t?a=[t]:e.length&&(a=[e[0]]):a=t?[t,...e]:e,!a.length)return null;const s=`${this.id||"sky-input"}-errors`;return i`
       <div class="progress-message">
-        <ul id=${a} class="error-list" part="error-list">
-          ${s.map(t=>i`<li class="error" part="error">${t}</li>`)}
+        <ul id=${s} class="error-list" part="error-list">
+          ${a.map(t=>i`<li class="error" part="error">${t}</li>`)}
         </ul>
       </div>
-    `}togglePasswordVisibility(){this.showPassword=!this.showPassword}focusInput(){const t=this.nativeInputEl;t&&"function"==typeof t.focus&&t.focus()}handleWrapperClick(t){if(t.stopPropagation(),this.disabled)return;const e=this.nativeInputEl;e&&"function"==typeof e.focus&&e.focus()}get isInvalid(){return this.matches(":invalid")||this.validationActive&&this.validationErrors.length>0}get describedById(){return this.ariaDescribedby??(this.showErrors?`${this.id||"sky-input"}-errors`:void 0)}refocusInput(){const t=this.shadowRoot?.querySelector("input");t?.focus({preventScroll:!0})}triggerNativeDropdown(){if(this.disabled||this.readonly)return;const t=this.shadowRoot?.querySelector('input[type="date"], input[type="time"], input[type="week"], input[type="month"], input[type="datetime-local"], input[type="file"]');t&&("file"===this.type?t.click():this.showPicker())}isFilterSearchInput(){return"search"===this.type}nativeAutocomplete(){return this.isFilterSearchInput()?"off":this.autocomplete}nativeTextInputType(t){return t&&this.showPassword||this.isFilterSearchInput()?"text":this.type}nativeInputMode(){return this.inputmode?this.inputmode:this.isFilterSearchInput()?"search":void 0}nativeEnterKeyHint(){return this.enterkeyhint?this.enterkeyhint:this.isFilterSearchInput()?"search":void 0}nativeInputRole(){return this.inputRole?this.inputRole:"search"===this.type?"searchbox":void 0}affixColorStyle(t){const e=String(t??"").trim();if(e)return{color:d(e)}}renderInputAffix(t){const e="prefix"===t?this.prefix:this.suffix;if(!String(e??"").length)return s;const a="prefix"===t?this.prefixColor:this.suffixColor,n=this.affixColorStyle(a);return i`<span
+    `}togglePasswordVisibility(){this.showPassword=!this.showPassword}focusInput(){const t=this.nativeInputEl;t&&"function"==typeof t.focus&&t.focus()}handleWrapperClick(t){if(t.stopPropagation(),this.disabled)return;const e=this.nativeInputEl;e&&"function"==typeof e.focus&&e.focus()}get isInvalid(){return this.matches(":invalid")||this.validationActive&&this.validationErrors.length>0}get describedById(){return this.ariaDescribedby??(this.showErrors?`${this.id||"sky-input"}-errors`:void 0)}refocusInput(){const t=this.shadowRoot?.querySelector("input");t?.focus({preventScroll:!0})}triggerNativeDropdown(){if(this.disabled||this.readonly)return;const t=this.shadowRoot?.querySelector('input[type="date"], input[type="time"], input[type="week"], input[type="month"], input[type="datetime-local"], input[type="file"]');t&&("file"===this.type?t.click():this.showPicker())}isFilterSearchInput(){return"search"===this.type}nativeAutocomplete(){return this.isFilterSearchInput()?"off":this.autocomplete}nativeTextInputType(t){return t&&this.showPassword||this.isFilterSearchInput()?"text":this.type}nativeInputMode(){return this.inputmode?this.inputmode:this.isFilterSearchInput()?"search":void 0}nativeEnterKeyHint(){return this.enterkeyhint?this.enterkeyhint:this.isFilterSearchInput()?"search":void 0}nativeInputRole(){return this.inputRole?this.inputRole:"search"===this.type?"searchbox":void 0}affixColorStyle(t){const e=String(t??"").trim();if(e)return{color:d(e)}}renderInputAffix(t){const e="prefix"===t?this.prefix:this.suffix;if(!String(e??"").length)return a;const s="prefix"===t?this.prefixColor:this.suffixColor,o=this.affixColorStyle(s);return i`<span
       class="input-affix ${t}"
       part="input-${t}"
-      style=${n?r(n):s}
+      style=${o?r(o):a}
       >${e}</span
-    >`}render(){const t="file"===this.type,e="textarea"===this.type,r="number"===this.type,n="password"===this.type,o=!t&&!e,l=!!this.querySelector('[slot="icon-left"]'),p=!!this.querySelector('[slot="icon-right"]');let d=null;"date"===this.type?d=i`<sky-icon icon="ion:calendar"></sky-icon>`:"time"===this.type?d=i`<sky-icon icon="ion:time"></sky-icon>`:"week"===this.type||"month"===this.type?d=i`<sky-icon icon="ion:calendar"></sky-icon>`:"datetime-local"===this.type&&(d=i`<sky-icon icon="ion:time"></sky-icon>`);const c=this.filePreview&&(l||p),u="left"===this.autofillIconSlot&&d,y="right"===this.autofillIconSlot&&d,v=()=>i`
+    >`}render(){const t="file"===this.type,e="textarea"===this.type,r="number"===this.type,o="password"===this.type,n=!t&&!e,l=!!this.querySelector('[slot="icon-left"]'),p=!!this.querySelector('[slot="icon-right"]');let d=null;"date"===this.type?d=i`<sky-icon icon="ion:calendar"></sky-icon>`:"time"===this.type?d=i`<sky-icon icon="ion:time"></sky-icon>`:"week"===this.type||"month"===this.type?d=i`<sky-icon icon="ion:calendar"></sky-icon>`:"datetime-local"===this.type&&(d=i`<sky-icon icon="ion:time"></sky-icon>`);const h=this.filePreview&&(l||p),u="left"===this.autofillIconSlot&&d,y="right"===this.autofillIconSlot&&d,v=()=>i`
       <img
-        src=${a("string"==typeof this.filePreview?this.filePreview:void 0)}
+        src=${s("string"==typeof this.filePreview?this.filePreview:void 0)}
         alt="Preview"
         style="width:100%;height:100%;object-fit:cover;border-radius:12px;"
       />
@@ -19,10 +19,10 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       <div
         class="icon-slot left ${this.focused?"focused":""}"
         part="icon-slot icon-slot-left"
-        ?filled=${Boolean(c&&l)||Boolean(u)||l}
+        ?filled=${Boolean(h&&l)||Boolean(u)||l}
         @click=${()=>{(t||u)&&this.triggerNativeDropdown()}}
       >
-        ${c&&l?v():u?d:i`<slot name="icon-left"></slot>`}
+        ${h&&l?v():u?d:i`<slot name="icon-left"></slot>`}
       </div>
     `,m=()=>this.loading?i`<div
             class="loading-indicator"
@@ -32,10 +32,10 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
             <div
               class="icon-slot right ${this.focused?"focused":""}"
               part="icon-slot icon-slot-right"
-              ?filled=${Boolean(c&&p)||Boolean(y)||p}
+              ?filled=${Boolean(h&&p)||Boolean(y)||p}
               @click=${()=>{(t||y)&&this.triggerNativeDropdown()}}
             >
-              ${c&&p?v():y?d:i`<slot name="icon-right"></slot>`}
+              ${h&&p?v():y?d:i`<slot name="icon-right"></slot>`}
             </div>
           `,g=()=>i`
       <label
@@ -65,24 +65,24 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
         .required=${this.required}
         @keydown=${this.handleKeydown}
         .dir=${this.dir}
-        name=${a(this.name||void 0)}
+        name=${s(this.name||void 0)}
         .autocomplete=${this.nativeAutocomplete()}
         .autocapitalize=${this.autocapitalize}
         spellcheck=${this.spellcheck}
         ?autofocus=${this.autofocus}
-        inputmode=${a(this.inputmode||void 0)}
-        enterkeyhint=${a(this.enterkeyhint)}
-        list=${a(this.list||void 0)}
-        capture=${a(this.capture?"environment":void 0)}
+        inputmode=${s(this.inputmode||void 0)}
+        enterkeyhint=${s(this.enterkeyhint)}
+        list=${s(this.list||void 0)}
+        capture=${s(this.capture?"environment":void 0)}
         .aria-invalid=${String(this.isInvalid)}
         .aria-required=${String(this.required)}
-        aria-label=${a(this.ariaLabel||void 0)}
-        aria-labelledby=${a(this.ariaLabelledby||void 0)}
-        aria-describedby=${a(this.describedById)}
+        aria-label=${s(this.ariaLabel||void 0)}
+        aria-labelledby=${s(this.ariaLabelledby||void 0)}
+        aria-describedby=${s(this.describedById)}
       />
     `,b=()=>i`
       <textarea
-        .value=${h(this.value)}
+        .value=${c(this.value)}
         @input=${this.handleInput}
         @focus=${this.handleFocus}
         @blur=${this.handleBlur}
@@ -95,24 +95,24 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
         style="width:100%;border:none;outline:none;"
         .autocapitalize=${this.autocapitalize}
         ?spellcheck=${this.spellcheck}
-        name=${a(this.name||void 0)}
+        name=${s(this.name||void 0)}
         .autocomplete=${this.nativeAutocomplete()}
-        inputmode=${a(this.inputmode||void 0)}
-        enterkeyhint=${a(this.enterkeyhint)}
-        minlength=${a(this.minlength??void 0)}
-        maxlength=${a(this.maxlength??void 0)}
+        inputmode=${s(this.inputmode||void 0)}
+        enterkeyhint=${s(this.enterkeyhint)}
+        minlength=${s(this.minlength??void 0)}
+        maxlength=${s(this.maxlength??void 0)}
         ?autofocus=${this.autofocus}
         .aria-invalid=${String(this.isInvalid)}
         .aria-required=${String(this.required)}
-        aria-label=${a(this.ariaLabel||void 0)}
-        aria-labelledby=${a(this.ariaLabelledby||void 0)}
-        aria-describedby=${a(this.describedById)}
-        role=${a(this.nativeInputRole())}
+        aria-label=${s(this.ariaLabel||void 0)}
+        aria-labelledby=${s(this.ariaLabelledby||void 0)}
+        aria-describedby=${s(this.describedById)}
+        role=${s(this.nativeInputRole())}
       ></textarea>
     `,k=()=>i`
       <input
-        .type=${this.nativeTextInputType(n)}
-        .value=${h(this.value)}
+        .type=${this.nativeTextInputType(o)}
+        .value=${c(this.value)}
         @input=${this.handleInput}
         @focus=${this.handleFocus}
         @blur=${this.handleBlur}
@@ -123,32 +123,32 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
         .readOnly=${this.readonly||this.autofillGuardActive}
         style="appearance:none;pointer-events:auto;"
         placeholder=${this.placeholder}
-        name=${a(this.name||void 0)}
+        name=${s(this.name||void 0)}
         .autocomplete=${this.nativeAutocomplete()}
         .autocapitalize=${this.autocapitalize}
         spellcheck=${this.spellcheck}
-        inputmode=${a(this.nativeInputMode())}
-        enterkeyhint=${a(this.nativeEnterKeyHint())}
-        data-form-type=${this.isFilterSearchInput()?"other":s}
+        inputmode=${s(this.nativeInputMode())}
+        enterkeyhint=${s(this.nativeEnterKeyHint())}
+        data-form-type=${this.isFilterSearchInput()?"other":a}
         ?data-1p-ignore=${this.isFilterSearchInput()}
         ?data-lpignore=${this.isFilterSearchInput()}
-        list=${a(this.list||void 0)}
-        pattern=${a(this.pattern||void 0)}
-        minlength=${a(this.minlength??void 0)}
-        maxlength=${a(this.maxlength??void 0)}
-        size=${a(this.size??void 0)}
-        step=${a(null!==this.step?Number(this.step):void 0)}
-        min=${a(this.min??void 0)}
-        max=${a(this.max??void 0)}
+        list=${s(this.list||void 0)}
+        pattern=${s(this.pattern||void 0)}
+        minlength=${s(this.minlength??void 0)}
+        maxlength=${s(this.maxlength??void 0)}
+        size=${s(this.size??void 0)}
+        step=${s(null!==this.step?Number(this.step):void 0)}
+        min=${s(this.min??void 0)}
+        max=${s(this.max??void 0)}
         ?autofocus=${this.autofocus}
         .aria-invalid=${String(this.isInvalid)}
         .aria-required=${String(this.required)}
-        aria-label=${a(this.ariaLabel||void 0)}
-        aria-labelledby=${a(this.ariaLabelledby||void 0)}
-        aria-describedby=${a(this.describedById)}
-        role=${a(this.nativeInputRole())}
+        aria-label=${s(this.ariaLabel||void 0)}
+        aria-labelledby=${s(this.ariaLabelledby||void 0)}
+        aria-describedby=${s(this.describedById)}
+        role=${s(this.nativeInputRole())}
       />
-    `,x=()=>r&&this.showNumberButtons?i`
+    `,w=()=>r&&this.showNumberButtons?i`
             <div class="number-btn">
               <button
                 class="decrement-btn"
@@ -173,7 +173,7 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
                 <sky-icon icon="ion:add"></sky-icon>
               </button>
             </div>
-          `:null,w=()=>n&&this.showPasswordToggle?i`
+          `:null,x=()=>o&&this.showPasswordToggle?i`
             <sky-icon
               class="toggle-password"
               part="toggle-password"
@@ -191,16 +191,18 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
               icon="ion:close"
             ></sky-icon>
           `:null,S=()=>t?g():e?b():k(),F="fieldset"===this.variant,I="inside"===this.variant,z=this.label?F?i`<legend class="label" part="label">${this.label}</legend>`:i`<div class="label" part="label">${this.label}</div>`:null,E=i`
-      ${o?this.renderInputAffix("prefix"):s}
+      ${n?this.renderInputAffix("prefix"):a}
       ${S()}
-      ${o?this.renderInputAffix("suffix"):s}
-      ${x()} ${w()} ${$()}
+      ${n?this.renderInputAffix("suffix"):a}
+      ${w()} ${x()}
+      ${$()}
     `,C=i`
       ${f()}
-      ${o?this.renderInputAffix("prefix"):s}
+      ${n?this.renderInputAffix("prefix"):a}
       ${S()}
-      ${o?this.renderInputAffix("suffix"):s}
-      ${x()} ${w()} ${$()} ${m()}
+      ${n?this.renderInputAffix("suffix"):a}
+      ${w()} ${x()}
+      ${$()} ${m()}
     `,A=i`
       ${f()}
       <div class="input-inside-main">
@@ -214,30 +216,31 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
         @click=${this.handleWrapperClick}
         part="input-container"
       >
-        ${F||I?s:z}
+        ${F||I?a:z}
         ${F?i`<fieldset
-                class="input-wrapper"
-                part="input-wrapper"
-                ?compact=${this.compact}
-                ?loading=${this.loading}
-              >
-                ${z}
-                <div class="input-fieldset-body">
-                  ${f()}
-                  ${o?this.renderInputAffix("prefix"):s}
-                  ${S()}
-                  ${o?this.renderInputAffix("suffix"):s}
-                  ${x()} ${w()} ${$()}
-                  ${m()}
-                </div>
-              </fieldset>`:i`<div
-                class="input-wrapper"
-                part="input-wrapper"
-                ?compact=${this.compact}
-                ?loading=${this.loading}
-              >
-                ${I?A:C}
-              </div>`}
+              class="input-wrapper"
+              part="input-wrapper"
+              ?compact=${this.compact}
+              ?loading=${this.loading}
+            >
+              ${z}
+              <div class="input-fieldset-body">
+                ${f()}
+                ${n?this.renderInputAffix("prefix"):a}
+                ${S()}
+                ${n?this.renderInputAffix("suffix"):a}
+                ${w()} ${x()}
+                ${$()} ${m()}
+              </div>
+            </fieldset>`:i`<div
+              class="input-wrapper"
+              part="input-wrapper"
+              ?compact=${this.compact}
+              ?loading=${this.loading}
+            >
+              ${I?A:C}
+            </div>`}
+
         ${(()=>t&&this.totalFileSize?i`
             <div class="file-info" part="file-info">
               <span>
@@ -248,7 +251,7 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
             </div>
           `:null)()} ${this.renderValidationErrors()}
       </div>
-    `}};m.dependencies={"sky-icon":u},m.styles=t`
+    `}};g.dependencies={"sky-icon":y},g.styles=t`
     :host {
       display: block;
       font-family: var(--sky-font);
@@ -267,36 +270,36 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       --sky-input-icon-width: 2rem;
     }
 
-    :host([compact]) {
+    :host([data-sky-compact]) {
       --sky-input-pad-x: var(--sky-space-2, 8px);
       --sky-input-pad-x-sm: var(--sky-space-1, 4px);
       --sky-input-icon-width: 1.75rem;
     }
 
     /* Compact typography + denser chrome for every variant */
-    :host([compact]) .input-container > .label {
+    :host([data-sky-compact]) .input-container > .label {
       font-size: var(--sky-font-size-xs);
       margin-bottom: var(--sky-space-1, 4px);
       line-height: 1.2;
     }
 
-    :host([compact]) input,
-    :host([compact]) textarea,
-    :host([compact]) .input-affix,
-    :host([compact]) .custom-file-label__text {
+    :host([data-sky-compact]) input,
+    :host([data-sky-compact]) textarea,
+    :host([data-sky-compact]) .input-affix,
+    :host([data-sky-compact]) .custom-file-label__text {
       font-size: var(--sky-font-size-sm);
     }
 
-    :host([compact]) .icon-slot {
+    :host([data-sky-compact]) .icon-slot {
       font-size: var(--sky-font-size-lg);
     }
 
-    :host([compact]) .toggle-password,
-    :host([compact]) .clear-button {
+    :host([data-sky-compact]) .toggle-password,
+    :host([data-sky-compact]) .clear-button {
       font-size: var(--sky-font-size-md);
     }
 
-    :host([compact]) .custom-file-label {
+    :host([data-sky-compact]) .custom-file-label {
       border-radius: var(--sky-radius-primary);
     }
 
@@ -307,23 +310,23 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       pointer-events: none;
     }
 
-    :host([variant='highlight']) {
-      .label {
+    :host([data-sky-variant="highlight"]){
+      .label{
         color: var(--sky-input-color);
       }
     }
 
     /* Fieldset / legend: native fieldset+legend; wrapper keeps solid fill */
-    :host([variant='fieldset']) {
+    :host([data-sky-variant="fieldset"]) {
       overflow: visible;
       padding-block-start: 0;
     }
 
-    :host([variant='fieldset']) .input-container {
+    :host([data-sky-variant="fieldset"]) .input-container {
       overflow: visible;
     }
 
-    :host([variant='fieldset']) fieldset.input-wrapper {
+    :host([data-sky-variant="fieldset"]) fieldset.input-wrapper {
       display: block;
       height: auto;
       margin: 0;
@@ -335,17 +338,19 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       box-shadow: none;
     }
 
-    :host([variant='fieldset']) fieldset.input-wrapper[compact] {
+    :host([data-sky-variant="fieldset"]) fieldset.input-wrapper[compact] {
       height: auto;
     }
 
-    :host([variant='fieldset']) .input-fieldset-body {
+    :host([data-sky-variant="fieldset"]) .input-fieldset-body {
       display: flex;
       width: 100%;
       align-items: center;
       box-sizing: border-box;
       /* Match default control outer height once fieldset border is included */
-      height: calc(var(--sky-input-height) - 2 * var(--sky-input-border-width));
+      height: calc(
+        var(--sky-input-height) - 2 * var(--sky-input-border-width)
+      );
       min-height: calc(
         var(--sky-input-height) - 2 * var(--sky-input-border-width)
       );
@@ -355,9 +360,7 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       overflow: hidden;
     }
 
-    :host([variant='fieldset'])
-      fieldset.input-wrapper[compact]
-      .input-fieldset-body {
+    :host([data-sky-variant="fieldset"]) fieldset.input-wrapper[compact] .input-fieldset-body {
       height: calc(
         var(--sky-input-height-compact) - 2 * var(--sky-input-border-width)
       );
@@ -366,19 +369,17 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       );
     }
 
-    :host([variant='fieldset']) fieldset.input-wrapper:has(textarea) {
+    :host([data-sky-variant="fieldset"]) fieldset.input-wrapper:has(textarea) {
       height: auto;
     }
 
-    :host([variant='fieldset'])
-      fieldset.input-wrapper:has(textarea)
-      .input-fieldset-body {
+    :host([data-sky-variant="fieldset"]) fieldset.input-wrapper:has(textarea) .input-fieldset-body {
       height: calc((var(--rows)) * 23px);
       min-height: calc((var(--rows)) * 23px);
       align-items: flex-start;
     }
 
-    :host([variant='fieldset']) legend.label {
+    :host([data-sky-variant="fieldset"]) legend.label {
       float: unset;
       width: auto;
       max-width: calc(100% - 2 * var(--sky-input-pad-x));
@@ -399,42 +400,40 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       pointer-events: none;
     }
 
-    :host([variant='fieldset']) .input-container:focus-within legend.label {
+    :host([data-sky-variant="fieldset"]) .input-container:focus-within legend.label {
       color: var(--sky-input-color);
       font-size: var(--sky-font-size-xs);
     }
 
     /* Focus via real border — ::after would paint over the legend gap */
-    :host([variant='fieldset']) .input-wrapper::after {
+    :host([data-sky-variant="fieldset"]) .input-wrapper::after {
       content: none;
       display: none;
     }
 
-    :host([variant='fieldset']) .input-wrapper:has(input:focus),
-    :host([variant='fieldset']) .input-wrapper:has(input:focus-visible),
-    :host([variant='fieldset']) .input-wrapper:has(textarea:focus),
-    :host([variant='fieldset']) .input-wrapper:has(textarea:focus-visible) {
+    :host([data-sky-variant="fieldset"]) .input-wrapper:has(input:focus),
+    :host([data-sky-variant="fieldset"]) .input-wrapper:has(input:focus-visible),
+    :host([data-sky-variant="fieldset"]) .input-wrapper:has(textarea:focus),
+    :host([data-sky-variant="fieldset"]) .input-wrapper:has(textarea:focus-visible) {
       border-color: var(--sky-input-color);
     }
 
-    :host([variant='fieldset'][validationActive]:invalid) .input-wrapper {
+    :host([data-sky-variant="fieldset"][validationActive]:invalid) .input-wrapper {
       border-color: var(--sky-danger-primary);
     }
 
-    :host([variant='fieldset'][validationActive]:invalid) legend.label {
+    :host([data-sky-variant="fieldset"][validationActive]:invalid) legend.label {
       color: var(--sky-danger-primary);
     }
 
-    :host([variant='fieldset'][compact]) legend.label,
-    :host([variant='fieldset'][compact])
-      .input-container:focus-within
-      legend.label {
+    :host([data-sky-variant="fieldset"][compact]) legend.label,
+    :host([data-sky-variant="fieldset"][compact]) .input-container:focus-within legend.label {
       font-size: var(--sky-font-size-xs);
       line-height: 1.4;
     }
 
     /* Inside: label lives in the wrapper above the value row */
-    :host([variant='inside']) {
+    :host([data-sky-variant="inside"]) {
       --sky-input-height-inside: 44px;
       /* Two lines (label + value) need a bit more than single-line compact */
       --sky-input-height-inside-compact: 40px;
@@ -442,20 +441,20 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       --sky-input-inside-value-min: 1.375rem;
     }
 
-    :host([variant='inside']) .input-wrapper {
+    :host([data-sky-variant="inside"]) .input-wrapper {
       height: auto;
       min-height: var(--sky-input-height-inside);
       align-items: center;
       padding-block: var(--sky-input-pad-y-sm, 0px);
     }
 
-    :host([variant='inside']) .input-wrapper[compact] {
+    :host([data-sky-variant="inside"]) .input-wrapper[compact] {
       height: auto;
       min-height: var(--sky-input-height-inside-compact);
       padding-block: var(--sky-input-pad-y-sm, 0px);
     }
 
-    :host([variant='inside']) .input-inside-main {
+    :host([data-sky-variant="inside"]) .input-inside-main {
       flex: 1 1 auto;
       min-width: 0;
       display: flex;
@@ -465,7 +464,7 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       padding-block: var(--sky-input-inside-label-block);
     }
 
-    :host([variant='inside']) .input-inside-main > .label {
+    :host([data-sky-variant="inside"]) .input-inside-main > .label {
       margin: 0;
       padding-inline: var(--sky-input-pad-x);
       font-size: var(--sky-font-size-xs);
@@ -478,40 +477,32 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       flex-shrink: 0;
     }
 
-    :host([variant='inside'][compact]) .input-inside-main > .label {
+    :host([data-sky-variant="inside"][compact]) .input-inside-main > .label {
       font-size: 0.6875rem; /* ~11px — denser than xs for two-line compact */
       line-height: 1.3;
       min-height: calc(0.6875rem * 1.3);
     }
 
-    :host([variant='inside'][compact]) .input-inside-row input,
-    :host([variant='inside'][compact]) .input-inside-row textarea {
+    :host([data-sky-variant="inside"][compact]) .input-inside-row input,
+    :host([data-sky-variant="inside"][compact]) .input-inside-row textarea {
       font-size: var(--sky-font-size-sm);
       line-height: 1.15;
     }
 
-    :host([variant='inside'])
-      .input-container:focus-within
-      .input-inside-main
-      > .label {
+    :host([data-sky-variant="inside"]) .input-container:focus-within .input-inside-main > .label {
       color: var(--sky-input-color);
       font-size: var(--sky-font-size-xs);
     }
 
-    :host([variant='inside'][compact])
-      .input-container:focus-within
-      .input-inside-main
-      > .label {
+    :host([data-sky-variant="inside"][compact]) .input-container:focus-within .input-inside-main > .label {
       font-size: 0.6875rem;
     }
 
-    :host([variant='inside'][validationActive]:invalid)
-      .input-inside-main
-      > .label {
+    :host([data-sky-variant="inside"][validationActive]:invalid) .input-inside-main > .label {
       color: var(--sky-danger-primary);
     }
 
-    :host([variant='inside']) .input-inside-row {
+    :host([data-sky-variant="inside"]) .input-inside-row {
       display: flex;
       align-items: center;
       min-width: 0;
@@ -519,33 +510,27 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       min-height: var(--sky-input-inside-value-min);
     }
 
-    :host([variant='inside'])
-      .input-wrapper:has(.icon-slot[filled].left)
-      .input-inside-main
-      > .label,
-    :host([variant='inside'])
-      .input-wrapper:has(.input-affix.prefix)
-      .input-inside-main
-      > .label {
+    :host([data-sky-variant="inside"]) .input-wrapper:has(.icon-slot[filled].left) .input-inside-main > .label,
+    :host([data-sky-variant="inside"]) .input-wrapper:has(.input-affix.prefix) .input-inside-main > .label {
       padding-inline-start: 0;
     }
 
-    :host([variant='inside']) .input-inside-row input,
-    :host([variant='inside']) .input-inside-row textarea {
+    :host([data-sky-variant="inside"]) .input-inside-row input,
+    :host([data-sky-variant="inside"]) .input-inside-row textarea {
       padding-block: 0;
       height: auto;
       min-height: 0;
       line-height: 1.2;
     }
 
-    :host([variant='inside']) .input-wrapper:has(textarea) {
+    :host([data-sky-variant="inside"]) .input-wrapper:has(textarea) {
       height: auto;
       min-height: var(--sky-input-height-inside);
       align-items: flex-start;
     }
 
-    :host([variant='inside']) .icon-slot,
-    :host([variant='inside']) .icon-slot[filled] {
+    :host([data-sky-variant="inside"]) .icon-slot,
+    :host([data-sky-variant="inside"]) .icon-slot[filled] {
       align-self: center;
       height: auto;
       max-height: none;
@@ -573,7 +558,7 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       transition: color var(--sky-transition-normal, 200ms ease);
     }
 
-    :host([compact]) .input-container:focus-within > .label {
+    :host([data-sky-compact]) .input-container:focus-within > .label {
       font-size: var(--sky-font-size-xs);
     }
 
@@ -609,7 +594,7 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
     }
 
     .input-wrapper::after {
-      content: '';
+      content: "";
       position: absolute;
       top: -1px;
       left: -1px;
@@ -656,11 +641,11 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       border-radius: var(--sky-radius-primary);
     }
 
-    input[type='date'],
-    input[type='time'],
-    input[type='week'],
-    input[type='month'],
-    input[type='datetime-local'] {
+    input[type="date"],
+    input[type="time"],
+    input[type="week"],
+    input[type="month"],
+    input[type="datetime-local"] {
       -webkit-appearance: none;
       -moz-appearance: none;
       appearance: none;
@@ -669,11 +654,11 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       font-family: inherit;
     }
 
-    input[type='date']::-webkit-calendar-picker-indicator,
-    input[type='time']::-webkit-calendar-picker-indicator,
-    input[type='week']::-webkit-calendar-picker-indicator,
-    input[type='month']::-webkit-calendar-picker-indicator,
-    input[type='datetime-local']::-webkit-calendar-picker-indicator {
+    input[type="date"]::-webkit-calendar-picker-indicator,
+    input[type="time"]::-webkit-calendar-picker-indicator,
+    input[type="week"]::-webkit-calendar-picker-indicator,
+    input[type="month"]::-webkit-calendar-picker-indicator,
+    input[type="datetime-local"]::-webkit-calendar-picker-indicator {
       display: none;
     }
 
@@ -702,13 +687,13 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       text-align: right;
     }
 
-    input[type='number'] {
+    input[type="number"] {
       appearance: textfield;
       -moz-appearance: textfield;
     }
 
-    input[type='number']::-webkit-inner-spin-button,
-    input[type='number']::-webkit-outer-spin-button {
+    input[type="number"]::-webkit-inner-spin-button,
+    input[type="number"]::-webkit-outer-spin-button {
       -webkit-appearance: none;
       margin: 0;
     }
@@ -982,7 +967,7 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       pointer-events: none;
     }
 
-    input[type='file'] {
+    input[type="file"] {
       position: absolute;
       width: 100%;
       height: 100%;
@@ -1016,7 +1001,7 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
     }
 
     .custom-file-label:empty::after {
-      content: 'Choose file';
+      content: "Choose file";
       color: var(--sky-input-color);
     }
 
@@ -1038,11 +1023,11 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       font-family: var(--sky-font);
     }
 
-    textarea[resizable='vertical'] {
+    textarea[resizable="vertical"] {
       resize: vertical;
     }
 
-    textarea[resizable='both'] {
+    textarea[resizable="both"] {
       resize: both;
     }
 
@@ -1105,5 +1090,5 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
         transition: none;
       }
     }
-  `,m.shadowRootOptions={...e.shadowRootOptions,delegatesFocus:!0},f([n({type:String})],m.prototype,"value",2),f([n({type:String})],m.prototype,"placeholder",2),f([n({type:String})],m.prototype,"label",2),f([n({type:String})],m.prototype,"type",2),f([n({type:String})],m.prototype,"suffix",2),f([n({type:String})],m.prototype,"prefix",2),f([n({type:String})],m.prototype,"prefixColor",2),f([n({type:String})],m.prototype,"suffixColor",2),f([n({type:String})],m.prototype,"color",2),f([n({type:Array})],m.prototype,"validations",1),f([n({type:Boolean,reflect:!0})],m.prototype,"compact",2),f([n({type:Boolean,reflect:!0})],m.prototype,"loading",2),f([n({type:Boolean})],m.prototype,"showErrors",2),f([n({type:Boolean,reflect:!0})],m.prototype,"clearable",2),f([n({type:String})],m.prototype,"errorDisplayMode",2),f([n({type:Boolean,reflect:!0})],m.prototype,"required",2),f([n({type:String})],m.prototype,"step",2),f([n({type:String})],m.prototype,"min",2),f([n({type:String})],m.prototype,"max",2),f([n({type:String})],m.prototype,"autocapitalize",2),f([n({type:String})],m.prototype,"autocomplete",2),f([n({type:Boolean})],m.prototype,"spellcheck",2),f([n({type:String})],m.prototype,"dir",2),f([n({type:Number})],m.prototype,"rows",2),f([n({type:String})],m.prototype,"resizable",2),f([n({type:String})],m.prototype,"accept",2),f([n({type:Boolean})],m.prototype,"multiple",2),f([n({type:String})],m.prototype,"inputmode",2),f([n({type:String})],m.prototype,"enterkeyhint",2),f([n({type:String})],m.prototype,"pattern",2),f([n({type:Number})],m.prototype,"minlength",2),f([n({type:Number})],m.prototype,"maxlength",2),f([n({type:String})],m.prototype,"list",2),f([n({type:Number})],m.prototype,"size",2),f([n({type:Number})],m.prototype,"cols",2),f([n({type:Boolean})],m.prototype,"autofocus",2),f([n({type:Boolean})],m.prototype,"capture",2),f([n({type:String})],m.prototype,"inputRole",2),f([n({type:String})],m.prototype,"ariaLabel",2),f([n({type:String})],m.prototype,"ariaLabelledby",2),f([n({type:String})],m.prototype,"ariaDescribedby",2),f([n({type:Boolean})],m.prototype,"showNumberButtons",2),f([n({type:Boolean})],m.prototype,"showPasswordToggle",2),f([n({type:String})],m.prototype,"passwordVisibleIcon",2),f([n({type:String})],m.prototype,"passwordHiddenIcon",2),f([n({type:Boolean,reflect:!0})],m.prototype,"validationActive",2),f([n({type:Boolean,reflect:!0})],m.prototype,"invalid",2),f([n({type:String,reflect:!0})],m.prototype,"variant",2),f([o()],m.prototype,"selectedFileName",2),f([o()],m.prototype,"selectedFiles",2),f([o()],m.prototype,"focused",2),f([o()],m.prototype,"validationStatus",2),f([o()],m.prototype,"validationErrors",2),f([o()],m.prototype,"typingStarted",2),f([o()],m.prototype,"autofillIconSlot",2),f([o()],m.prototype,"autofillGuardActive",2),f([o()],m.prototype,"showPassword",2),f([o()],m.prototype,"totalFileSize",2),f([o()],m.prototype,"selectedFileCount",2),f([o()],m.prototype,"filePreview",2),f([l(".input-wrapper")],m.prototype,"inputWrapperEl",2),f([l("input, textarea")],m.prototype,"nativeInputEl",2),m=f([p("sky-input")],m);export{m as SkyInput};
+  `,g.shadowRootOptions={...e.shadowRootOptions,delegatesFocus:!0},m([o({type:String})],g.prototype,"value",2),m([o({type:String})],g.prototype,"placeholder",2),m([o({type:String})],g.prototype,"label",2),m([o({type:String})],g.prototype,"type",2),m([o({type:String})],g.prototype,"suffix",2),m([o({type:String})],g.prototype,"prefix",2),m([o({type:String})],g.prototype,"prefixColor",2),m([o({type:String})],g.prototype,"suffixColor",2),m([o({type:String})],g.prototype,"color",2),m([o({type:Array})],g.prototype,"validations",1),m([o({type:Boolean,reflect:!0})],g.prototype,"compact",2),m([o({type:Boolean,reflect:!0})],g.prototype,"loading",2),m([o({type:Boolean})],g.prototype,"showErrors",2),m([o({type:Boolean,reflect:!0})],g.prototype,"clearable",2),m([o({type:String})],g.prototype,"errorDisplayMode",2),m([o({type:Boolean,reflect:!0})],g.prototype,"required",2),m([o({type:String})],g.prototype,"step",2),m([o({type:String})],g.prototype,"min",2),m([o({type:String})],g.prototype,"max",2),m([o({type:String})],g.prototype,"autocapitalize",2),m([o({type:String})],g.prototype,"autocomplete",2),m([o({type:Boolean})],g.prototype,"spellcheck",2),m([o({type:String})],g.prototype,"dir",2),m([o({type:Number})],g.prototype,"rows",2),m([o({type:String})],g.prototype,"resizable",2),m([o({type:String})],g.prototype,"accept",2),m([o({type:Boolean})],g.prototype,"multiple",2),m([o({type:String})],g.prototype,"inputmode",2),m([o({type:String})],g.prototype,"enterkeyhint",2),m([o({type:String})],g.prototype,"pattern",2),m([o({type:Number})],g.prototype,"minlength",2),m([o({type:Number})],g.prototype,"maxlength",2),m([o({type:String})],g.prototype,"list",2),m([o({type:Number})],g.prototype,"size",2),m([o({type:Number})],g.prototype,"cols",2),m([o({type:Boolean})],g.prototype,"autofocus",2),m([o({type:Boolean})],g.prototype,"capture",2),m([o({type:String})],g.prototype,"inputRole",2),m([o({type:String})],g.prototype,"ariaLabel",2),m([o({type:String})],g.prototype,"ariaLabelledby",2),m([o({type:String})],g.prototype,"ariaDescribedby",2),m([o({type:Boolean})],g.prototype,"showNumberButtons",2),m([o({type:Boolean})],g.prototype,"showPasswordToggle",2),m([o({type:String})],g.prototype,"passwordVisibleIcon",2),m([o({type:String})],g.prototype,"passwordHiddenIcon",2),m([o({type:Boolean,reflect:!0})],g.prototype,"validationActive",2),m([o({type:Boolean,reflect:!0})],g.prototype,"invalid",2),m([o({type:String,reflect:!0})],g.prototype,"variant",2),m([o({type:String,reflect:!0})],g.prototype,"preset",2),m([n()],g.prototype,"selectedFileName",2),m([n()],g.prototype,"selectedFiles",2),m([n()],g.prototype,"focused",2),m([n()],g.prototype,"validationStatus",2),m([n()],g.prototype,"validationErrors",2),m([n()],g.prototype,"typingStarted",2),m([n()],g.prototype,"autofillIconSlot",2),m([n()],g.prototype,"autofillGuardActive",2),m([n()],g.prototype,"showPassword",2),m([n()],g.prototype,"totalFileSize",2),m([n()],g.prototype,"selectedFileCount",2),m([n()],g.prototype,"filePreview",2),m([l(".input-wrapper")],g.prototype,"inputWrapperEl",2),m([l("input, textarea")],g.prototype,"nativeInputEl",2),g=m([p("sky-input")],g);export{g as SkyInput};
 //# sourceMappingURL=sky-input.js.map