@sky.ui/core 0.0.51 → 0.0.53

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

@@ -1,15 +1,15 @@
-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`
+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 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{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,n=t.length-1;n>=0;n--)(s=t[n])&&(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=${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 a;const s="prefix"===t?this.prefixColor:this.suffixColor,o=this.affixColorStyle(s);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,n=this.affixColorStyle(s);return i`<span
       class="input-affix ${t}"
       part="input-${t}"
-      style=${o?r(o):a}
+      style=${n?r(n):a}
       >${e}</span
-    >`}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`
+    >`}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 h=this.filePreview&&(l||p),u="left"===this.autofillIconSlot&&d,y="right"===this.autofillIconSlot&&d,v=()=>i`
       <img
         src=${s("string"==typeof this.filePreview?this.filePreview:void 0)}
         alt="Preview"
@@ -111,7 +111,7 @@ import{css as t,LitElement as e,html as i,nothing as a}from"lit";import{ifDefine
       ></textarea>
     `,k=()=>i`
       <input
-        .type=${this.nativeTextInputType(o)}
+        .type=${this.nativeTextInputType(n)}
         .value=${c(this.value)}
         @input=${this.handleInput}
         @focus=${this.handleFocus}
@@ -148,7 +148,7 @@ import{css as t,LitElement as e,html as i,nothing as a}from"lit";import{ifDefine
         aria-describedby=${s(this.describedById)}
         role=${s(this.nativeInputRole())}
       />
-    `,w=()=>r&&this.showNumberButtons?i`
+    `,x=()=>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 a}from"lit";import{ifDefine
                 <sky-icon icon="ion:add"></sky-icon>
               </button>
             </div>
-          `:null,x=()=>o&&this.showPasswordToggle?i`
+          `:null,w=()=>n&&this.showPasswordToggle?i`
             <sky-icon
               class="toggle-password"
               part="toggle-password"
@@ -190,18 +190,18 @@ import{css as t,LitElement as e,html as i,nothing as a}from"lit";import{ifDefine
               ?loading=${this.loading}
               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`
-      ${n?this.renderInputAffix("prefix"):a}
+          `: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"><span class="legend-text">${this.label}</span></legend>`:i`<div class="label" part="label">${this.label}</div>`:null,E=i`
+      ${o?this.renderInputAffix("prefix"):a}
       ${S()}
-      ${n?this.renderInputAffix("suffix"):a}
-      ${w()} ${x()}
+      ${o?this.renderInputAffix("suffix"):a}
+      ${x()} ${w()}
       ${$()}
     `,C=i`
       ${f()}
-      ${n?this.renderInputAffix("prefix"):a}
+      ${o?this.renderInputAffix("prefix"):a}
       ${S()}
-      ${n?this.renderInputAffix("suffix"):a}
-      ${w()} ${x()}
+      ${o?this.renderInputAffix("suffix"):a}
+      ${x()} ${w()}
       ${$()} ${m()}
     `,A=i`
       ${f()}
@@ -226,10 +226,10 @@ import{css as t,LitElement as e,html as i,nothing as a}from"lit";import{ifDefine
               ${z}
               <div class="input-fieldset-body">
                 ${f()}
-                ${n?this.renderInputAffix("prefix"):a}
+                ${o?this.renderInputAffix("prefix"):a}
                 ${S()}
-                ${n?this.renderInputAffix("suffix"):a}
-                ${w()} ${x()}
+                ${o?this.renderInputAffix("suffix"):a}
+                ${x()} ${w()}
                 ${$()} ${m()}
               </div>
             </fieldset>`:i`<div
@@ -319,11 +319,12 @@ import{css as t,LitElement as e,html as i,nothing as a}from"lit";import{ifDefine
     /* Fieldset / legend: native fieldset+legend; wrapper keeps solid fill */
     :host([data-sky-variant="fieldset"]) {
       overflow: visible;
-      padding-block-start: 0;
     }
 
     :host([data-sky-variant="fieldset"]) .input-container {
       overflow: visible;
+      /* Room for legend text sitting on the top border — keep off :host */
+      padding-block-start: 0.65em;
     }
 
     :host([data-sky-variant="fieldset"]) fieldset.input-wrapper {
@@ -384,22 +385,31 @@ import{css as t,LitElement as e,html as i,nothing as a}from"lit";import{ifDefine
       width: auto;
       max-width: calc(100% - 2 * var(--sky-input-pad-x));
       margin-inline-start: var(--sky-input-pad-x);
-      margin-bottom: 0;
+      margin-block: 0;
       padding-inline: var(--sky-input-pad-x-sm);
-      padding-block: 2px;
+      padding-block: 0;
       border: none;
       background: transparent;
       background-color: transparent;
       color: var(--sky-text-secondary);
       font-size: var(--sky-font-size-xs);
-      /* Keep room for glyphs; overflow:hidden from .label clips fieldset legends */
-      line-height: 1.4;
+      /* Take no in-flow space; inner text is centered on the border notch */
+      height: 0;
+      line-height: 0;
       overflow: visible;
-      text-overflow: ellipsis;
       white-space: nowrap;
       pointer-events: none;
     }
 
+    :host([data-sky-variant="fieldset"]) legend.label .legend-text {
+      display: inline-block;
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      line-height: 1.2;
+      transform: translateY(-50%);
+    }
+
     :host([data-sky-variant="fieldset"]) .input-container:focus-within legend.label {
       color: var(--sky-input-color);
       font-size: var(--sky-font-size-xs);
@@ -429,16 +439,15 @@ import{css as t,LitElement as e,html as i,nothing as a}from"lit";import{ifDefine
     :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([data-sky-variant="inside"]) {
-      --sky-input-height-inside: 44px;
+      --sky-input-height-inside: 40px;
       /* Two lines (label + value) need a bit more than single-line compact */
-      --sky-input-height-inside-compact: 40px;
-      --sky-input-inside-label-block: 0.15rem;
-      --sky-input-inside-value-min: 1.375rem;
+      --sky-input-height-inside-compact: 36px;
+      --sky-input-inside-label-block: 2px;
+      --sky-input-inside-value-min: 1.15em;
     }
 
     :host([data-sky-variant="inside"]) .input-wrapper {
@@ -460,7 +469,7 @@ import{css as t,LitElement as e,html as i,nothing as a}from"lit";import{ifDefine
       display: flex;
       flex-direction: column;
       justify-content: center;
-      gap: 0.15rem;
+      gap: 0;
       padding-block: var(--sky-input-inside-label-block);
     }
 
@@ -468,8 +477,8 @@ import{css as t,LitElement as e,html as i,nothing as a}from"lit";import{ifDefine
       margin: 0;
       padding-inline: var(--sky-input-pad-x);
       font-size: var(--sky-font-size-xs);
-      line-height: 1.3;
-      min-height: calc(var(--sky-font-size-xs) * 1.3);
+      line-height: 1.15;
+      min-height: 0;
       color: var(--sky-text-secondary);
       pointer-events: none;
       overflow: visible;
@@ -479,8 +488,8 @@ import{css as t,LitElement as e,html as i,nothing as a}from"lit";import{ifDefine
 
     :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);
+      line-height: 1.15;
+      min-height: 0;
     }
 
     :host([data-sky-variant="inside"][compact]) .input-inside-row input,
@@ -1090,5 +1099,5 @@ import{css as t,LitElement as e,html as i,nothing as a}from"lit";import{ifDefine
         transition: none;
       }
     }
-  `,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};
+  `,g.shadowRootOptions={...e.shadowRootOptions,delegatesFocus:!0},m([n({type:String})],g.prototype,"value",2),m([n({type:String})],g.prototype,"placeholder",2),m([n({type:String})],g.prototype,"label",2),m([n({type:String})],g.prototype,"type",2),m([n({type:String})],g.prototype,"suffix",2),m([n({type:String})],g.prototype,"prefix",2),m([n({type:String})],g.prototype,"prefixColor",2),m([n({type:String})],g.prototype,"suffixColor",2),m([n({type:String})],g.prototype,"color",2),m([n({type:Array})],g.prototype,"validations",1),m([n({type:Boolean,reflect:!0})],g.prototype,"compact",2),m([n({type:Boolean,reflect:!0})],g.prototype,"loading",2),m([n({type:Boolean})],g.prototype,"showErrors",2),m([n({type:Boolean,reflect:!0})],g.prototype,"clearable",2),m([n({type:String})],g.prototype,"errorDisplayMode",2),m([n({type:Boolean,reflect:!0})],g.prototype,"required",2),m([n({type:String})],g.prototype,"step",2),m([n({type:String})],g.prototype,"min",2),m([n({type:String})],g.prototype,"max",2),m([n({type:String})],g.prototype,"autocapitalize",2),m([n({type:String})],g.prototype,"autocomplete",2),m([n({type:Boolean})],g.prototype,"spellcheck",2),m([n({type:String})],g.prototype,"dir",2),m([n({type:Number})],g.prototype,"rows",2),m([n({type:String})],g.prototype,"resizable",2),m([n({type:String})],g.prototype,"accept",2),m([n({type:Boolean})],g.prototype,"multiple",2),m([n({type:String})],g.prototype,"inputmode",2),m([n({type:String})],g.prototype,"enterkeyhint",2),m([n({type:String})],g.prototype,"pattern",2),m([n({type:Number})],g.prototype,"minlength",2),m([n({type:Number})],g.prototype,"maxlength",2),m([n({type:String})],g.prototype,"list",2),m([n({type:Number})],g.prototype,"size",2),m([n({type:Number})],g.prototype,"cols",2),m([n({type:Boolean})],g.prototype,"autofocus",2),m([n({type:Boolean})],g.prototype,"capture",2),m([n({type:String})],g.prototype,"inputRole",2),m([n({type:String})],g.prototype,"ariaLabel",2),m([n({type:String})],g.prototype,"ariaLabelledby",2),m([n({type:String})],g.prototype,"ariaDescribedby",2),m([n({type:Boolean})],g.prototype,"showNumberButtons",2),m([n({type:Boolean})],g.prototype,"showPasswordToggle",2),m([n({type:String})],g.prototype,"passwordVisibleIcon",2),m([n({type:String})],g.prototype,"passwordHiddenIcon",2),m([n({type:Boolean,reflect:!0})],g.prototype,"validationActive",2),m([n({type:Boolean,reflect:!0})],g.prototype,"invalid",2),m([n({type:String,reflect:!0})],g.prototype,"variant",2),m([n({type:String,reflect:!0})],g.prototype,"preset",2),m([o()],g.prototype,"selectedFileName",2),m([o()],g.prototype,"selectedFiles",2),m([o()],g.prototype,"focused",2),m([o()],g.prototype,"validationStatus",2),m([o()],g.prototype,"validationErrors",2),m([o()],g.prototype,"typingStarted",2),m([o()],g.prototype,"autofillIconSlot",2),m([o()],g.prototype,"autofillGuardActive",2),m([o()],g.prototype,"showPassword",2),m([o()],g.prototype,"totalFileSize",2),m([o()],g.prototype,"selectedFileCount",2),m([o()],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