@sky.ui/core 0.0.36 → 0.0.39

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

@@ -1,21 +1,43 @@
-import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefined as r}from"lit/directives/if-defined.js";import{styleMap as o}from"lit/directives/style-map.js";import{property as a,state as n,query as l,customElement as p}from"lit/decorators.js";import{resolveColor as h}from"../helper/utils/color-resolver.js";import{live as d}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,f=Object.getOwnPropertyDescriptor,v=(t,e,i,s)=>{for(var r,o=s>1?void 0:s?f(e,i):e,a=t.length-1;a>=0;a--)(r=t[a])&&(o=(s?r(e,i,o):r(o))||o);return s&&o&&y(e,i,o),o};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",h(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 r=`${this.id||"sky-input"}-errors`;return i`
+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`
       <div class="progress-message">
-        <ul id=${r} class="error-list" part="error-list">
+        <ul id=${a} class="error-list" part="error-list">
           ${s.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:h(e)}}renderInputAffix(t){const e="prefix"===t?this.prefix:this.suffix;if(!String(e??"").length)return s;const r="prefix"===t?this.prefixColor:this.suffixColor,a=this.affixColorStyle(r);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 s;const a="prefix"===t?this.prefixColor:this.suffixColor,n=this.affixColorStyle(a);return i`<span
       class="input-affix ${t}"
       part="input-${t}"
-      style=${a?o(a):s}
+      style=${n?r(n):s}
       >${e}</span
-    >`}render(){const t="file"===this.type,e="textarea"===this.type,o="number"===this.type,a="password"===this.type,n=!t&&!e,l=!!this.querySelector('[slot="icon-left"]'),p=!!this.querySelector('[slot="icon-right"]');let h=null;"date"===this.type?h=i`<sky-icon icon="ion:calendar"></sky-icon>`:"time"===this.type?h=i`<sky-icon icon="ion:time"></sky-icon>`:"week"===this.type||"month"===this.type?h=i`<sky-icon icon="ion:calendar"></sky-icon>`:"datetime-local"===this.type&&(h=i`<sky-icon icon="ion:time"></sky-icon>`);const c=this.filePreview&&(l||p),u="left"===this.autofillIconSlot&&h,y="right"===this.autofillIconSlot&&h,f=()=>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 c=this.filePreview&&(l||p),u="left"===this.autofillIconSlot&&d,y="right"===this.autofillIconSlot&&d,v=()=>i`
       <img
-        src=${r("string"==typeof this.filePreview?this.filePreview:void 0)}
+        src=${a("string"==typeof this.filePreview?this.filePreview:void 0)}
         alt="Preview"
         style="width:100%;height:100%;object-fit:cover;border-radius:12px;"
       />
-    `,v=()=>i`
+    `,f=()=>i`
+      <div
+        class="icon-slot left ${this.focused?"focused":""}"
+        part="icon-slot icon-slot-left"
+        ?filled=${Boolean(c&&l)||Boolean(u)||l}
+        @click=${()=>{(t||u)&&this.triggerNativeDropdown()}}
+      >
+        ${c&&l?v():u?d:i`<slot name="icon-left"></slot>`}
+      </div>
+    `,m=()=>this.loading?i`<div
+            class="loading-indicator"
+            part="loading-indicator"
+            ?compact=${this.compact}
+          ></div>`:i`
+            <div
+              class="icon-slot right ${this.focused?"focused":""}"
+              part="icon-slot icon-slot-right"
+              ?filled=${Boolean(c&&p)||Boolean(y)||p}
+              @click=${()=>{(t||y)&&this.triggerNativeDropdown()}}
+            >
+              ${c&&p?v():y?d:i`<slot name="icon-right"></slot>`}
+            </div>
+          `,g=()=>i`
       <label
         class="custom-file-label"
         part="custom-file-label"
@@ -43,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=${r(this.name||void 0)}
+        name=${a(this.name||void 0)}
         .autocomplete=${this.nativeAutocomplete()}
         .autocapitalize=${this.autocapitalize}
         spellcheck=${this.spellcheck}
         ?autofocus=${this.autofocus}
-        inputmode=${r(this.inputmode||void 0)}
-        enterkeyhint=${r(this.enterkeyhint)}
-        list=${r(this.list||void 0)}
-        capture=${r(this.capture?"environment":void 0)}
+        inputmode=${a(this.inputmode||void 0)}
+        enterkeyhint=${a(this.enterkeyhint)}
+        list=${a(this.list||void 0)}
+        capture=${a(this.capture?"environment":void 0)}
         .aria-invalid=${String(this.isInvalid)}
         .aria-required=${String(this.required)}
-        aria-label=${r(this.ariaLabel||void 0)}
-        aria-labelledby=${r(this.ariaLabelledby||void 0)}
-        aria-describedby=${r(this.describedById)}
+        aria-label=${a(this.ariaLabel||void 0)}
+        aria-labelledby=${a(this.ariaLabelledby||void 0)}
+        aria-describedby=${a(this.describedById)}
       />
-    `,m=()=>i`
+    `,b=()=>i`
       <textarea
-        .value=${d(this.value)}
+        .value=${h(this.value)}
         @input=${this.handleInput}
         @focus=${this.handleFocus}
         @blur=${this.handleBlur}
@@ -70,27 +92,27 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
         .rows=${this.rows}
         placeholder=${this.placeholder}
         resizable=${this.resizable||"none"}
-        style="width:100%;border:none;outline:none;padding:10px;"
+        style="width:100%;border:none;outline:none;"
         .autocapitalize=${this.autocapitalize}
         ?spellcheck=${this.spellcheck}
-        name=${r(this.name||void 0)}
+        name=${a(this.name||void 0)}
         .autocomplete=${this.nativeAutocomplete()}
-        inputmode=${r(this.inputmode||void 0)}
-        enterkeyhint=${r(this.enterkeyhint)}
-        minlength=${r(this.minlength??void 0)}
-        maxlength=${r(this.maxlength??void 0)}
+        inputmode=${a(this.inputmode||void 0)}
+        enterkeyhint=${a(this.enterkeyhint)}
+        minlength=${a(this.minlength??void 0)}
+        maxlength=${a(this.maxlength??void 0)}
         ?autofocus=${this.autofocus}
         .aria-invalid=${String(this.isInvalid)}
         .aria-required=${String(this.required)}
-        aria-label=${r(this.ariaLabel||void 0)}
-        aria-labelledby=${r(this.ariaLabelledby||void 0)}
-        aria-describedby=${r(this.describedById)}
-        role=${r(this.nativeInputRole())}
+        aria-label=${a(this.ariaLabel||void 0)}
+        aria-labelledby=${a(this.ariaLabelledby||void 0)}
+        aria-describedby=${a(this.describedById)}
+        role=${a(this.nativeInputRole())}
       ></textarea>
-    `,b=()=>i`
+    `,k=()=>i`
       <input
-        .type=${this.nativeTextInputType(a)}
-        .value=${d(this.value)}
+        .type=${this.nativeTextInputType(n)}
+        .value=${h(this.value)}
         @input=${this.handleInput}
         @focus=${this.handleFocus}
         @blur=${this.handleBlur}
@@ -101,58 +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=${r(this.name||void 0)}
+        name=${a(this.name||void 0)}
         .autocomplete=${this.nativeAutocomplete()}
         .autocapitalize=${this.autocapitalize}
         spellcheck=${this.spellcheck}
-        inputmode=${r(this.nativeInputMode())}
-        enterkeyhint=${r(this.nativeEnterKeyHint())}
+        inputmode=${a(this.nativeInputMode())}
+        enterkeyhint=${a(this.nativeEnterKeyHint())}
         data-form-type=${this.isFilterSearchInput()?"other":s}
         ?data-1p-ignore=${this.isFilterSearchInput()}
         ?data-lpignore=${this.isFilterSearchInput()}
-        list=${r(this.list||void 0)}
-        pattern=${r(this.pattern||void 0)}
-        minlength=${r(this.minlength??void 0)}
-        maxlength=${r(this.maxlength??void 0)}
-        size=${r(this.size??void 0)}
-        step=${r(null!==this.step?Number(this.step):void 0)}
-        min=${r(this.min??void 0)}
-        max=${r(this.max??void 0)}
+        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)}
         ?autofocus=${this.autofocus}
         .aria-invalid=${String(this.isInvalid)}
         .aria-required=${String(this.required)}
-        aria-label=${r(this.ariaLabel||void 0)}
-        aria-labelledby=${r(this.ariaLabelledby||void 0)}
-        aria-describedby=${r(this.describedById)}
-        role=${r(this.nativeInputRole())}
+        aria-label=${a(this.ariaLabel||void 0)}
+        aria-labelledby=${a(this.ariaLabelledby||void 0)}
+        aria-describedby=${a(this.describedById)}
+        role=${a(this.nativeInputRole())}
       />
-    `;return i`
-      <div
-        class="input-container"
-        @click=${this.handleWrapperClick}
-        part="input-container"
-      >
-        ${this.label?i`<div class="label" part="label">${this.label}</div>`:null}
-        <div
-          class="input-wrapper"
-          part="input-wrapper"
-          ?compact=${this.compact}
-          ?loading=${this.loading}
-        >
-          ${(()=>i`
-      <div
-        class="icon-slot left ${this.focused?"focused":""}"
-        part="icon-slot icon-slot-left"
-        ?filled=${Boolean(c&&l)||Boolean(u)||l}
-        @click=${()=>{(t||u)&&this.triggerNativeDropdown()}}
-      >
-        ${c&&l?f():u?h:i`<slot name="icon-left"></slot>`}
-      </div>
-    `)()}
-          ${n?this.renderInputAffix("prefix"):s}
-          ${t?v():e?m():b()}
-          ${n?this.renderInputAffix("suffix"):s}
-          ${(()=>o&&this.showNumberButtons?i`
+    `,x=()=>r&&this.showNumberButtons?i`
             <div class="number-btn">
               <button
                 class="decrement-btn"
@@ -177,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)()} ${(()=>a&&this.showPasswordToggle?i`
+          `:null,w=()=>n&&this.showPasswordToggle?i`
             <sky-icon
               class="toggle-password"
               part="toggle-password"
@@ -185,8 +181,7 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
               icon=${this.showPassword?this.passwordVisibleIcon:this.passwordHiddenIcon}
               @click=${this.togglePasswordVisibility}
             ></sky-icon>
-          `:null)()}
-          ${(()=>this.clearable&&(this.value||this.selectedFileName||this.selectedFileCount>0)?i`
+          `:null,$=()=>this.clearable&&(this.value||this.selectedFileName||this.selectedFileCount>0)?i`
             <sky-icon
               class="clear-button"
               part="clear-button"
@@ -195,21 +190,56 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
               ?loading=${this.loading}
               icon="ion:close"
             ></sky-icon>
-          `:null)()} ${(()=>this.loading?i`<div
-            class="loading-indicator"
-            part="loading-indicator"
-            ?compact=${this.compact}
-          ></div>`:i`
-            <div
-              class="icon-slot right ${this.focused?"focused":""}"
-              part="icon-slot icon-slot-right"
-              ?filled=${Boolean(c&&p)||Boolean(y)||p}
-              @click=${()=>{(t||y)&&this.triggerNativeDropdown()}}
+          `: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}
+      ${S()}
+      ${o?this.renderInputAffix("suffix"):s}
+      ${x()} ${w()}
+      ${$()}
+    `,C=i`
+      ${f()}
+      ${o?this.renderInputAffix("prefix"):s}
+      ${S()}
+      ${o?this.renderInputAffix("suffix"):s}
+      ${x()} ${w()}
+      ${$()} ${m()}
+    `,A=i`
+      ${f()}
+      <div class="input-inside-main">
+        ${z}
+        <div class="input-inside-row">${E}</div>
+      </div>
+      ${m()}
+    `;return i`
+      <div
+        class="input-container"
+        @click=${this.handleWrapperClick}
+        part="input-container"
+      >
+        ${F||I?s:z}
+        ${F?i`<fieldset
+              class="input-wrapper"
+              part="input-wrapper"
+              ?compact=${this.compact}
+              ?loading=${this.loading}
             >
-              ${c&&p?f():y?h:i`<slot name="icon-right"></slot>`}
-            </div>
-          `)()}
-        </div>
+              ${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>`}
 
         ${(()=>t&&this.totalFileSize?i`
             <div class="file-info" part="file-info">
@@ -226,6 +256,51 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       display: block;
       font-family: var(--sky-font);
       width: 100%;
+      /* Control size */
+      --sky-input-height: 36px;
+      --sky-input-height-compact: 28px;
+      --sky-input-border-width: 1px;
+      /* Spacing scale — tight internal joins, softer outer edge */
+      --sky-input-pad-x: var(--sky-space-3, 12px);
+      --sky-input-pad-x-sm: var(--sky-space-1, 4px);
+      --sky-input-pad-x-xs: 0px;
+      --sky-input-pad-y: var(--sky-space-1, 4px);
+      --sky-input-pad-y-sm: 0px;
+      --sky-input-gap: var(--sky-space-1, 4px);
+      --sky-input-icon-width: 2rem;
+    }
+
+    :host([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 {
+      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 {
+      font-size: var(--sky-font-size-sm);
+    }
+
+    :host([compact]) .icon-slot {
+      font-size: var(--sky-font-size-lg);
+    }
+
+    :host([compact]) .toggle-password,
+    :host([compact]) .clear-button {
+      font-size: var(--sky-font-size-md);
+    }
+
+    :host([compact]) .custom-file-label {
+      border-radius: var(--sky-radius-primary);
     }
 
     :host([disabled]) .input-container {
@@ -241,6 +316,228 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       }
     }
 
+    /* Fieldset / legend: native fieldset+legend; wrapper keeps solid fill */
+    :host([variant="fieldset"]) {
+      overflow: visible;
+      padding-block-start: 0;
+    }
+
+    :host([variant="fieldset"]) .input-container {
+      overflow: visible;
+    }
+
+    :host([variant="fieldset"]) fieldset.input-wrapper {
+      display: block;
+      height: auto;
+      margin: 0;
+      min-inline-size: 0;
+      min-width: 0;
+      padding: 0;
+      overflow: visible;
+      background: var(--sky-glass-solid);
+      box-shadow: none;
+    }
+
+    :host([variant="fieldset"]) fieldset.input-wrapper[compact] {
+      height: auto;
+    }
+
+    :host([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)
+      );
+      min-height: calc(
+        var(--sky-input-height) - 2 * var(--sky-input-border-width)
+      );
+      background: transparent;
+      border-radius: inherit;
+      min-width: 0;
+      overflow: hidden;
+    }
+
+    :host([variant="fieldset"]) fieldset.input-wrapper[compact] .input-fieldset-body {
+      height: calc(
+        var(--sky-input-height-compact) - 2 * var(--sky-input-border-width)
+      );
+      min-height: calc(
+        var(--sky-input-height-compact) - 2 * var(--sky-input-border-width)
+      );
+    }
+
+    :host([variant="fieldset"]) fieldset.input-wrapper:has(textarea) {
+      height: auto;
+    }
+
+    :host([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 {
+      float: unset;
+      width: auto;
+      max-width: calc(100% - 2 * var(--sky-input-pad-x));
+      margin-inline-start: var(--sky-input-pad-x);
+      margin-bottom: 0;
+      padding-inline: var(--sky-input-pad-x-sm);
+      padding-block: 2px;
+      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;
+      overflow: visible;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      pointer-events: none;
+    }
+
+    :host([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 {
+      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) {
+      border-color: var(--sky-input-color);
+    }
+
+    :host([variant="fieldset"][validationActive]:invalid) .input-wrapper {
+      border-color: var(--sky-danger-primary);
+    }
+
+    :host([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 {
+      font-size: var(--sky-font-size-xs);
+      line-height: 1.4;
+    }
+
+    /* Inside: label lives in the wrapper above the value row */
+    :host([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;
+      --sky-input-inside-label-block: 0.15rem;
+      --sky-input-inside-value-min: 1.375rem;
+    }
+
+    :host([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] {
+      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 {
+      flex: 1 1 auto;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      gap: 0.15rem;
+      padding-block: var(--sky-input-inside-label-block);
+    }
+
+    :host([variant="inside"]) .input-inside-main > .label {
+      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);
+      color: var(--sky-text-secondary);
+      pointer-events: none;
+      overflow: visible;
+      text-overflow: unset;
+      flex-shrink: 0;
+    }
+
+    :host([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 {
+      font-size: var(--sky-font-size-sm);
+      line-height: 1.15;
+    }
+
+    :host([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 {
+      font-size: 0.6875rem;
+    }
+
+    :host([variant="inside"][validationActive]:invalid) .input-inside-main > .label {
+      color: var(--sky-danger-primary);
+    }
+
+    :host([variant="inside"]) .input-inside-row {
+      display: flex;
+      align-items: center;
+      min-width: 0;
+      width: 100%;
+      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 {
+      padding-inline-start: 0;
+    }
+
+    :host([variant="inside"]) .input-inside-row input,
+    :host([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) {
+      height: auto;
+      min-height: var(--sky-input-height-inside);
+      align-items: flex-start;
+    }
+
+    :host([variant="inside"]) .icon-slot,
+    :host([variant="inside"]) .icon-slot[filled] {
+      align-self: center;
+      height: auto;
+      max-height: none;
+      align-items: center;
+      justify-content: center;
+    }
+
     .input-container {
       position: relative;
       display: flex;
@@ -255,11 +552,16 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       height: 1em;
     }
 
-    .input-container:focus-within .label {
+    /* Outside labels only — never bump fieldset/inside fonts (clips legends) */
+    .input-container:focus-within > .label {
       color: var(--sky-input-color);
-      font-size: var(--sky-font-size-sm);
-      transition: all 0.3s ease;
+      transition: color var(--sky-transition-normal, 200ms ease);
+    }
+
+    :host([compact]) .input-container:focus-within > .label {
+      font-size: var(--sky-font-size-xs);
     }
+
     .label {
       font-size: var(--sky-font-size-sm);
       margin-bottom: var(--sky-space-1, 4px);
@@ -268,11 +570,7 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       overflow: hidden;
       text-overflow: ellipsis;
       font-family: var(--sky-font);
-    }
-
-    .input-container:focus-within[compact] .label {
-      font-size: var(--sky-font-size-xs);
-      color: var(--sky-input-color);
+      line-height: 1.35;
     }
 
     .input-wrapper {
@@ -281,7 +579,8 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       width: 100%;
       align-items: center;
       box-sizing: border-box;
-      height: 38px;
+      height: var(--sky-input-height);
+      min-height: var(--sky-input-height);
       pointer-events: auto;
       background: var(--sky-glass-solid);
       backdrop-filter: none;
@@ -336,8 +635,10 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
     }
 
     .input-wrapper[compact] {
-      height: 30px;
+      height: var(--sky-input-height-compact);
+      min-height: var(--sky-input-height-compact);
       border: var(--sky-border-primary);
+      border-radius: var(--sky-radius-primary);
     }
 
     input[type="date"],
@@ -372,8 +673,9 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
     input {
       font-family: var(--sky-font);
       font-size: var(--sky-font-size-md);
+      line-height: 1.2;
       text-align: left;
-      transition: transform var(--sky-transition-normal, 200ms ease);
+      transition: color var(--sky-transition-normal, 200ms ease);
     }
 
     input:-webkit-autofill {
@@ -398,12 +700,12 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
     .number-btn {
       display: flex;
       flex-shrink: 0;
-      margin-inline-end: var(--sky-space-1, 4px);
-      gap: var(--sky-space-1, 4px);
+      margin-inline-end: var(--sky-input-pad-x-sm);
+      gap: var(--sky-input-gap);
     }
 
     :dir(rtl).number-btn {
-      margin-inline-end: var(--sky-space-1, 4px);
+      margin-inline-end: var(--sky-input-pad-x-sm);
     }
 
     .file-info {
@@ -427,7 +729,7 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       display: flex;
       align-items: center;
       justify-content: center;
-      padding: var(--sky-space-0\\.5, 2px) var(--sky-space-1\\.5, 6px);
+      padding: var(--sky-input-pad-x-xs) var(--sky-input-pad-x-sm);
       font-size: var(--sky-font-size-sm);
       cursor: pointer;
       transition: color var(--sky-transition-normal, 200ms ease);
@@ -444,7 +746,7 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       display: flex;
       align-items: center;
       justify-content: center;
-      margin-inline-end: var(--sky-space-1, 4px);
+      margin-inline-end: var(--sky-input-pad-x-sm);
       font-size: var(--sky-font-size-lg);
       color: var(--sky-text-tertiary);
       cursor: pointer;
@@ -463,7 +765,7 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       box-sizing: border-box;
       color: var(--sky-text-primary);
       padding-block: 0;
-      padding-inline: var(--sky-space-3, 12px);
+      padding-inline: var(--sky-input-pad-x);
     }
 
     input::placeholder {
@@ -482,13 +784,13 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
     }
 
     .input-affix.prefix {
-      padding-inline-start: var(--sky-space-3, 12px);
-      padding-inline-end: var(--sky-space-1, 4px);
+      padding-inline-start: var(--sky-input-pad-x);
+      padding-inline-end: var(--sky-input-pad-x-sm);
     }
 
     .input-affix.suffix {
-      padding-inline-start: var(--sky-space-1, 4px);
-      padding-inline-end: var(--sky-space-2, 8px);
+      padding-inline-start: var(--sky-input-pad-x-sm);
+      padding-inline-end: var(--sky-input-pad-x);
     }
 
     .input-wrapper[compact] .input-affix {
@@ -497,12 +799,28 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
 
     .input-wrapper:has(.input-affix.prefix) input,
     .input-wrapper:has(.input-affix.prefix) textarea {
-      padding-inline-start: var(--sky-space-1, 4px);
+      padding-inline-start: 0;
     }
 
     .input-wrapper:has(.icon-slot[filled].left) input,
     .input-wrapper:has(.icon-slot[filled].left) textarea {
-      padding-inline-start: var(--sky-space-1, 4px);
+      padding-inline-start: 0;
+    }
+
+    .input-wrapper:has(.icon-slot[filled].right) input,
+    .input-wrapper:has(.icon-slot[filled].right) textarea,
+    .input-wrapper:has(.clear-button) input,
+    .input-wrapper:has(.clear-button) textarea,
+    .input-wrapper:has(.toggle-password) input,
+    .input-wrapper:has(.toggle-password) textarea,
+    .input-wrapper:has(.number-btn) input,
+    .input-wrapper:has(.loading-indicator) input {
+      padding-inline-end: 0;
+    }
+
+    .input-wrapper:has(.input-affix.suffix) input,
+    .input-wrapper:has(.input-affix.suffix) textarea {
+      padding-inline-end: 0;
     }
 
     .custom-file-label__text {
@@ -511,11 +829,11 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       overflow: hidden;
       text-overflow: ellipsis;
       color: var(--sky-text-tertiary);
-      padding-inline-end: var(--sky-space-3, 12px);
+      padding-inline-end: var(--sky-input-pad-x);
     }
 
     .custom-file-label:not(:has(.input-affix.prefix)) .custom-file-label__text {
-      padding-inline-start: var(--sky-space-3, 12px);
+      padding-inline-start: var(--sky-input-pad-x);
     }
 
     .custom-file-label__text[data-filled] {
@@ -528,22 +846,20 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       font-size: var(--sky-font-size-xl);
       align-items: center;
       color: var(--sky-text-primary);
-      border-radius: var(--sky-radius-secondary);
       height: inherit;
       max-height: 100%;
       box-sizing: border-box;
-      min-width: 36px;
-      background: var(--sky-glass-solid);
-      backdrop-filter: none;
-      -webkit-backdrop-filter: none;
-      transition:
-        transform var(--sky-transition-normal, 200ms ease),
-        color var(--sky-transition-normal, 200ms ease);
+      flex: 0 0 var(--sky-input-icon-width);
+      width: var(--sky-input-icon-width);
+      min-width: var(--sky-input-icon-width);
+      padding: 0;
+      background: none;
+      border: none;
+      transition: color var(--sky-transition-normal, 200ms ease);
     }
 
     .input-wrapper:has(textarea) .icon-slot {
-      max-height: 38px;
-      border-bottom: var(--sky-border-primary);
+      max-height: var(--sky-input-height);
     }
 
     .icon-slot[filled] {
@@ -551,55 +867,11 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       flex-shrink: 0;
       cursor: pointer;
     }
-    .icon-slot[filled]:hover {
-      transform: translate(-5px, -5px);
-      color: var(--sky-input-color);
-    }
-    .icon-slot.right[filled]:hover {
-      transform: translate(5px, -5px);
-      color: var(--sky-input-color);
-    }
 
+    .icon-slot[filled]:hover,
+    .icon-slot[filled]:active,
     .icon-slot.focused {
-      transform: translate(-5px, -5px);
       color: var(--sky-input-color);
-      border: var(--sky-border-primary) !important;
-    }
-
-    :dir(rtl) .icon-slot[filled]:hover {
-      transform: translate(5px, -5px);
-    }
-
-    :dir(rtl) .icon-slot.right[filled]:hover {
-      transform: translate(-5px, -5px);
-    }
-
-    :dir(rtl) .icon-slot.focused {
-      transform: translate(5px, -5px);
-    }
-
-    .icon-slot.right {
-      border-left: var(--sky-border-primary);
-    }
-    .icon-slot.left {
-      border-right: var(--sky-border-primary);
-    }
-
-    :dir(rtl) .icon-slot.right {
-      border-left: unset;
-      border-right: var(--sky-border-primary);
-    }
-    :dir(rtl) .icon-slot.left {
-      border-right: unset;
-      border-left: var(--sky-border-primary);
-    }
-
-    .icon-slot.right.focused {
-      transform: translate(5px, -5px);
-    }
-
-    :dir(rtl) .icon-slot.right.focused {
-      transform: translate(-5px, -5px);
     }
 
     .progress-message {
@@ -609,13 +881,13 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       white-space: nowrap;
       text-overflow: ellipsis;
       font-size: var(--sky-font-size-sm);
-      margin-left: 5px;
+      margin-inline-start: var(--sky-input-pad-x-sm);
       font-family: var(--sky-font);
     }
 
     :dir(rtl) .progress-message {
-      margin-left: unset;
-      margin-right: 5px;
+      margin-inline-start: unset;
+      margin-inline-end: var(--sky-input-pad-x-sm);
     }
 
     .error-list {
@@ -645,7 +917,7 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
 
     .loading-indicator {
       flex-shrink: 0;
-      margin-inline-end: var(--sky-space-1, 4px);
+      margin-inline-end: var(--sky-input-pad-x-sm);
       width: 16px;
       height: 16px;
       border: 2px solid var(--sky-hover-primary);
@@ -674,7 +946,7 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
 
     .clear-button {
       flex-shrink: 0;
-      margin-inline-end: var(--sky-space-1, 4px);
+      margin-inline-end: var(--sky-input-pad-x-sm);
       border: none;
       font-size: var(--sky-font-size-xl);
       color: var(--sky-input-color);
@@ -709,7 +981,7 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       flex: 1;
       display: flex;
       align-items: center;
-      gap: var(--sky-space-1, 4px);
+      gap: var(--sky-input-gap);
       text-align: left;
       padding: 0;
       color: var(--sky-input-color);
@@ -725,7 +997,7 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
     }
 
     .custom-file-label:hover .custom-file-label__text {
-      padding-inline-start: var(--sky-space-2\\.5, 10px);
+      padding-inline-start: var(--sky-input-pad-x-sm);
     }
 
     .custom-file-label:empty::after {
@@ -745,7 +1017,7 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       background: transparent;
       box-sizing: border-box;
       color: var(--sky-text-primary);
-      padding: var(--sky-space-2\\.5, 10px) var(--sky-space-3, 12px);
+      padding: var(--sky-input-pad-y) var(--sky-input-pad-x);
       resize: none;
       overflow: auto;
       font-family: var(--sky-font);
@@ -806,7 +1078,7 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
         animation: none;
       }
 
-      .input-container:focus-within .label,
+      .input-container:focus-within > .label,
       .input-wrapper,
       .icon-slot,
       .increment-btn,
@@ -818,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},v([a({type:String})],m.prototype,"value",2),v([a({type:String})],m.prototype,"placeholder",2),v([a({type:String})],m.prototype,"label",2),v([a({type:String})],m.prototype,"type",2),v([a({type:String})],m.prototype,"suffix",2),v([a({type:String})],m.prototype,"prefix",2),v([a({type:String})],m.prototype,"prefixColor",2),v([a({type:String})],m.prototype,"suffixColor",2),v([a({type:String})],m.prototype,"color",2),v([a({type:Array})],m.prototype,"validations",1),v([a({type:Boolean,reflect:!0})],m.prototype,"compact",2),v([a({type:Boolean,reflect:!0})],m.prototype,"loading",2),v([a({type:Boolean})],m.prototype,"showErrors",2),v([a({type:Boolean,reflect:!0})],m.prototype,"clearable",2),v([a({type:String})],m.prototype,"errorDisplayMode",2),v([a({type:Boolean,reflect:!0})],m.prototype,"required",2),v([a({type:String})],m.prototype,"step",2),v([a({type:String})],m.prototype,"min",2),v([a({type:String})],m.prototype,"max",2),v([a({type:String})],m.prototype,"autocapitalize",2),v([a({type:String})],m.prototype,"autocomplete",2),v([a({type:Boolean})],m.prototype,"spellcheck",2),v([a({type:String})],m.prototype,"dir",2),v([a({type:Number})],m.prototype,"rows",2),v([a({type:String})],m.prototype,"resizable",2),v([a({type:String})],m.prototype,"accept",2),v([a({type:Boolean})],m.prototype,"multiple",2),v([a({type:String})],m.prototype,"inputmode",2),v([a({type:String})],m.prototype,"enterkeyhint",2),v([a({type:String})],m.prototype,"pattern",2),v([a({type:Number})],m.prototype,"minlength",2),v([a({type:Number})],m.prototype,"maxlength",2),v([a({type:String})],m.prototype,"list",2),v([a({type:Number})],m.prototype,"size",2),v([a({type:Number})],m.prototype,"cols",2),v([a({type:Boolean})],m.prototype,"autofocus",2),v([a({type:Boolean})],m.prototype,"capture",2),v([a({type:String})],m.prototype,"inputRole",2),v([a({type:String})],m.prototype,"ariaLabel",2),v([a({type:String})],m.prototype,"ariaLabelledby",2),v([a({type:String})],m.prototype,"ariaDescribedby",2),v([a({type:Boolean})],m.prototype,"showNumberButtons",2),v([a({type:Boolean})],m.prototype,"showPasswordToggle",2),v([a({type:String})],m.prototype,"passwordVisibleIcon",2),v([a({type:String})],m.prototype,"passwordHiddenIcon",2),v([a({type:Boolean,reflect:!0})],m.prototype,"validationActive",2),v([a({type:Boolean,reflect:!0})],m.prototype,"invalid",2),v([a({type:String,reflect:!0})],m.prototype,"variant",2),v([n()],m.prototype,"selectedFileName",2),v([n()],m.prototype,"selectedFiles",2),v([n()],m.prototype,"focused",2),v([n()],m.prototype,"validationStatus",2),v([n()],m.prototype,"validationErrors",2),v([n()],m.prototype,"typingStarted",2),v([n()],m.prototype,"autofillIconSlot",2),v([n()],m.prototype,"autofillGuardActive",2),v([n()],m.prototype,"showPassword",2),v([n()],m.prototype,"totalFileSize",2),v([n()],m.prototype,"selectedFileCount",2),v([n()],m.prototype,"filePreview",2),v([l(".input-wrapper")],m.prototype,"inputWrapperEl",2),v([l("input, textarea")],m.prototype,"nativeInputEl",2),m=v([p("sky-input")],m);export{m as SkyInput};
+  `,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};
 //# sourceMappingURL=sky-input.js.map