@sky.ui/core 0.0.8 → 0.0.21

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

@@ -1,4 +1,4 @@
-import{__decorate as t,__metadata as e}from"tslib";import{css as i,LitElement as r,html as s,nothing as o}from"lit";import{ifDefined as a}from"lit/directives/if-defined.js";import{property as n,state as l,query as p,customElement as d}from"lit/decorators.js";import{resolveColor as h}from"../helper/utils/color-resolver.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";let v=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.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.keepInputFocused=t=>{t.preventDefault(),t.stopPropagation(),this.refocusInput()}}static{this.dependencies={"sky-icon":y}}static{this.styles=i`
+import{__decorate as t,__metadata as e}from"tslib";import{css as i,LitElement as s,html as o,nothing as r}from"lit";import{ifDefined as a}from"lit/directives/if-defined.js";import{styleMap as n}from"lit/directives/style-map.js";import{property as l,state as p,query as d,customElement as c}from"lit/decorators.js";import{resolveColor as h}from"../helper/utils/color-resolver.js";import{live as u}from"lit/directives/live.js";import{FormControlBase as y}from"../helper/internals/form-control-base.js";import{SkyIcon as v}from"../sky-icon/sky-icon.js";let f=class extends y{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()}}static{this.dependencies={"sky-icon":v}}get validations(){return this._validations}set validations(t){const e=this._validations;this._validations=Array.isArray(t)?t:[],this.requestUpdate("validations",e)}static{this.styles=i`
     :host {
       display: block;
       font-family: var(--sky-font);
@@ -6,7 +6,7 @@ import{__decorate as t,__metadata as e}from"tslib";import{css as i,LitElement as
     }
 
     :host([disabled]) .input-container {
-      opacity: 0.6;
+      opacity: var(--sky-opacity-disabled, 0.6);
     }
     :host([disabled]) * {
       pointer-events: none;
@@ -39,7 +39,7 @@ import{__decorate as t,__metadata as e}from"tslib";import{css as i,LitElement as
     }
     .label {
       font-size: var(--sky-font-size-sm);
-      margin-bottom: 5px;
+      margin-bottom: var(--sky-space-1, 4px);
       text-align: start;
       white-space: nowrap;
       overflow: hidden;
@@ -57,29 +57,18 @@ import{__decorate as t,__metadata as e}from"tslib";import{css as i,LitElement as
       display: flex;
       width: 100%;
       align-items: center;
-      background: transparent;
-      border-radius: var(--sky-radius-secondary);
-      background: var(--sky-glass-primary);
       box-sizing: border-box;
       height: 38px;
       pointer-events: auto;
+      background: var(--sky-glass-solid);
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+      border-radius: var(--sky-radius-secondary);
       border: var(--sky-border-primary);
-      transition: border 0.3s ease;
       box-shadow: var(--sky-box-shadow-primary);
-     
-    }
-
-    .input-wrapper::before {
-      content: "";
-      position: absolute;
-      inset: 0px;
-      backdrop-filter: var(--sky-blur-primary) var(--sky-brightness-primary)
-        var(--sky-saturation-primary);
-      -webkit-backdrop-filter: var(--sky-blur-primary)
-        var(--sky-brightness-primary) var(--sky-saturation-primary);
-      z-index: -1;
-
-      border-radius: inherit;
+      transition:
+        border-color var(--sky-transition-normal, 200ms ease),
+        box-shadow var(--sky-transition-normal, 200ms ease);
     }
 
     .input-wrapper::after {
@@ -99,6 +88,12 @@ import{__decorate as t,__metadata as e}from"tslib";import{css as i,LitElement as
       pointer-events: none;
     }
 
+    .input-wrapper:has(input:focus-visible)::after,
+    .input-wrapper:has(textarea:focus-visible)::after {
+      opacity: 1;
+      border-bottom-color: var(--sky-input-color);
+    }
+
     .input-wrapper:has(input:focus)::after,
     .input-wrapper:has(textarea:focus)::after {
       opacity: 1;
@@ -132,7 +127,6 @@ import{__decorate as t,__metadata as e}from"tslib";import{css as i,LitElement as
       appearance: none;
       background: none;
       border: none;
-      padding-right: 40px;
       font-family: inherit;
     }
 
@@ -144,19 +138,19 @@ import{__decorate as t,__metadata as e}from"tslib";import{css as i,LitElement as
       display: none;
     }
 
-    .input-wrapper {
-      transition: all 0.3s ease;
-    }
-
     .input-wrapper:has(input:focus)[compact]::after {
       border: 1px solid var(--sky-input-color);
     }
 
+    .toggle-password[compact] {
+      font-size: var(--sky-font-size-md);
+    }
+
     input {
       font-family: var(--sky-font);
       font-size: var(--sky-font-size-md);
       text-align: left;
-      transition: transform 0.3s ease;
+      transition: transform var(--sky-transition-normal, 200ms ease);
     }
 
     input:-webkit-autofill {
@@ -180,13 +174,13 @@ import{__decorate as t,__metadata as e}from"tslib";import{css as i,LitElement as
     }
     .number-btn {
       display: flex;
-      margin-right: 5px;
-      gap: 5px;
+      flex-shrink: 0;
+      margin-inline-end: var(--sky-space-1, 4px);
+      gap: var(--sky-space-1, 4px);
     }
 
     :dir(rtl).number-btn {
-      margin-left: 5px;
-      margin-right: unset;
+      margin-inline-end: var(--sky-space-1, 4px);
     }
 
     .file-info {
@@ -203,18 +197,17 @@ import{__decorate as t,__metadata as e}from"tslib";import{css as i,LitElement as
 
     .increment-btn,
     .decrement-btn {
-      background: var(--sky-glass-primary);
+      background: var(--sky-glass-solid);
       color: var(--sky-text-primary);
       border: var(--sky-border-primary);
       border-radius: var(--sky-radius-primary);
-      box-shadow: var(--sky-box-shadow-primary);
       display: flex;
       align-items: center;
       justify-content: center;
-      padding: 2px 6px;
+      padding: var(--sky-space-0\\.5, 2px) var(--sky-space-1\\.5, 6px);
       font-size: var(--sky-font-size-sm);
       cursor: pointer;
-      transition: all 0.3s ease;
+      transition: color var(--sky-transition-normal, 200ms ease);
       font-family: var(--sky-font);
     }
 
@@ -224,49 +217,88 @@ import{__decorate as t,__metadata as e}from"tslib";import{css as i,LitElement as
     }
 
     .toggle-password {
-      position: absolute;
-      right: 10px;
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-inline-end: var(--sky-space-1, 4px);
       font-size: var(--sky-font-size-lg);
       color: var(--sky-text-tertiary);
       cursor: pointer;
     }
 
-    :dir(rtl) .toggle-password {
-      right: unset;
-      left: 10px;
-    }
-
-    .input-wrapper:has(.icon-slot[filled].right) .toggle-password {
-      right: 45px;
-    }
-    .input-wrapper:has(.icon-slot[filled].right) .clear-button {
-      right: 40px;
-    }
-
-    :dir(rtl).input-wrapper:has(.icon-slot[filled].right) .toggle-password {
-      right: unset;
-      left: 45px;
-    }
-
     .toggle-password:hover {
       color: var(--sky-input-color);
     }
 
     input {
-      flex: 1;
-      min-width: 50px;
+      flex: 1 1 auto;
+      min-width: 0;
       border: none;
       outline: none;
       background: transparent;
       box-sizing: border-box;
       color: var(--sky-text-primary);
-      padding: 0 15px;
+      padding-block: 0;
+      padding-inline: var(--sky-space-3, 12px);
     }
 
     input::placeholder {
       color: var(--sky-text-tertiary);
     }
 
+    .input-affix {
+      flex: 0 0 auto;
+      font-family: var(--sky-font);
+      font-size: var(--sky-font-size-md);
+      font-weight: var(--sky-font-weight-medium);
+      color: var(--sky-text-secondary);
+      user-select: none;
+      white-space: nowrap;
+      line-height: 1;
+    }
+
+    .input-affix.prefix {
+      padding-inline-start: var(--sky-space-3, 12px);
+      padding-inline-end: var(--sky-space-1, 4px);
+    }
+
+    .input-affix.suffix {
+      padding-inline-start: var(--sky-space-1, 4px);
+      padding-inline-end: var(--sky-space-2, 8px);
+    }
+
+    .input-wrapper[compact] .input-affix {
+      font-size: var(--sky-font-size-sm);
+    }
+
+    .input-wrapper:has(.input-affix.prefix) input,
+    .input-wrapper:has(.input-affix.prefix) textarea {
+      padding-inline-start: var(--sky-space-1, 4px);
+    }
+
+    .input-wrapper:has(.icon-slot[filled].left) input,
+    .input-wrapper:has(.icon-slot[filled].left) textarea {
+      padding-inline-start: var(--sky-space-1, 4px);
+    }
+
+    .custom-file-label__text {
+      flex: 1 1 auto;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: var(--sky-text-tertiary);
+      padding-inline-end: var(--sky-space-3, 12px);
+    }
+
+    .custom-file-label:not(:has(.input-affix.prefix)) .custom-file-label__text {
+      padding-inline-start: var(--sky-space-3, 12px);
+    }
+
+    .custom-file-label__text[data-filled] {
+      color: var(--sky-text-primary);
+    }
+
     .icon-slot {
       display: none;
       justify-content: center;
@@ -278,16 +310,12 @@ import{__decorate as t,__metadata as e}from"tslib";import{css as i,LitElement as
       max-height: 100%;
       box-sizing: border-box;
       min-width: 36px;
-      background: var(--sky-glass-primary);
-      backdrop-filter: var(--sky-blur-primary) var(--sky-brightness-primary)
-        var(--sky-saturation-primary);
-      -webkit-backdrop-filter: var(--sky-blur-primary)
-        var(--sky-brightness-primary) var(--sky-saturation-primary);
-      box-shadow: var(--sky-box-shadow-primary);
+      background: var(--sky-glass-solid);
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
       transition:
-        transform 0.3s ease,
-        color 0.3s ease;
-     
+        transform var(--sky-transition-normal, 200ms ease),
+        color var(--sky-transition-normal, 200ms ease);
     }
 
     .input-wrapper:has(textarea) .icon-slot {
@@ -297,6 +325,7 @@ import{__decorate as t,__metadata as e}from"tslib";import{css as i,LitElement as
 
     .icon-slot[filled] {
       display: flex;
+      flex-shrink: 0;
       cursor: pointer;
     }
     .icon-slot[filled]:hover {
@@ -350,22 +379,6 @@ import{__decorate as t,__metadata as e}from"tslib";import{css as i,LitElement as
       transform: translate(-5px, -5px);
     }
 
-    .input-wrapper:has(.icon-slot[filled].right) input {
-      padding: 0px 0 0 15px;
-    }
-
-    .input-wrapper:has(.icon-slot[filled].left) input {
-      padding: 0px 10px 0 5px;
-    }
-
-    :dir(rtl) .input-wrapper:has(.icon-slot[filled].right) input {
-      padding: 0px 15px 0 0px;
-    }
-
-    :dir(rtl) .input-wrapper:has(.icon-slot[filled].left) input {
-      padding: 0px 5px 0 10px;
-    }
-
     .progress-message {
       pointer-events: none;
       width: 100%;
@@ -403,27 +416,18 @@ import{__decorate as t,__metadata as e}from"tslib";import{css as i,LitElement as
       display: block;
     }
 
-    .input-wrapper:has(.icon-slot[filled].right) .loading-indicator {
-      right: 45px;
-    }
-
-    :dir(rtl).input-wrapper:has(.icon-slot[filled].right) .loading-indicator {
-      left: 45px;
-      right: unset;
-    }
-
     .input-wrapper[loading] input {
       cursor: wait;
     }
 
     .loading-indicator {
-      display: block;
-      position: absolute;
+      flex-shrink: 0;
+      margin-inline-end: var(--sky-space-1, 4px);
       width: 16px;
       height: 16px;
       border: 2px solid var(--sky-hover-primary);
       border-top: 2px solid var(--sky-input-color);
-      border-radius: 50%;
+      border-radius: var(--sky-radius-full);
       animation: spin 1s linear infinite;
     }
 
@@ -432,14 +436,6 @@ import{__decorate as t,__metadata as e}from"tslib";import{css as i,LitElement as
       height: 10px;
     }
 
-    .input-wrapper[loading] .loading-indicator.right {
-      right: 15px;
-    }
-    :dir(rtl).input-wrapper[loading] .loading-indicator.right {
-      left: 15px;
-      right: unset;
-    }
-
     .input-wrapper[loading] .icon-slot.right {
       display: none;
     }
@@ -454,44 +450,26 @@ import{__decorate as t,__metadata as e}from"tslib";import{css as i,LitElement as
     }
 
     .clear-button {
-      position: absolute;
-      right: 10px;
+      flex-shrink: 0;
+      margin-inline-end: var(--sky-space-1, 4px);
       border: none;
       font-size: var(--sky-font-size-xl);
       color: var(--sky-input-color);
       background-color: var(--sky-hover-primary);
-      border-radius: 50%;
-      backdrop-filter: var(--sky-blur-primary) var(--sky-brightness-primary)
-        var(--sky-saturation-primary);
-      -webkit-backdrop-filter: var(--sky-blur-primary)
-        var(--sky-brightness-primary) var(--sky-saturation-primary);
+      border-radius: var(--sky-radius-full);
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
       cursor: pointer;
-      transition: color 0.3s ease;
-     
+      transition: color var(--sky-transition-normal, 200ms ease);
     }
 
-    :dir(rtl) .clear-button {
-      left: 10px;
-      right: unset;
-    }
     .clear-button[compact] {
       font-size: var(--sky-font-size-md);
     }
 
     .clear-button[loading] {
-      right: 40px;
-    }
-    .input-wrapper:has(input[type="password"]) .clear-button {
-      right: 30px;
-    }
-
-    :dir(rtl) .clear-button[loading] {
-      right: unset;
-      left: 40px;
-    }
-    :dir(rtl) .input-wrapper:has(input[type="password"]) .clear-button {
-      right: unset;
-      left: 30px;
+      opacity: 0.6;
+      pointer-events: none;
     }
 
     input[type="file"] {
@@ -507,8 +485,10 @@ import{__decorate as t,__metadata as e}from"tslib";import{css as i,LitElement as
       position: relative;
       flex: 1;
       display: flex;
+      align-items: center;
+      gap: var(--sky-space-1, 4px);
       text-align: left;
-      padding: 0px 15px;
+      padding: 0;
       color: var(--sky-input-color);
       border-radius: var(--sky-radius-secondary);
       overflow: hidden;
@@ -521,13 +501,8 @@ import{__decorate as t,__metadata as e}from"tslib";import{css as i,LitElement as
       font-family: var(--sky-font);
     }
 
-    .custom-file-label:hover {
-      padding-left: 12px;
-    }
-
-    :dir(rtl) .custom-file-label:hover {
-      padding-left: unset;
-      padding-right: 12px;
+    .custom-file-label:hover .custom-file-label__text {
+      padding-inline-start: var(--sky-space-2\\.5, 10px);
     }
 
     .custom-file-label:empty::after {
@@ -539,24 +514,15 @@ import{__decorate as t,__metadata as e}from"tslib";import{css as i,LitElement as
       color: var(--sky-danger-primary);
     }
 
-    .input-wrapper:has(.clear-button) input {
-      padding-right: 40px;
-    }
-
-    :dir(rtl).input-wrapper:has(.clear-button) input {
-      padding-left: 40px;
-      padding-right: unset;
-    }
-
     textarea {
-      flex: 1;
-      min-width: 50px;
+      flex: 1 1 auto;
+      min-width: 0;
       border: none;
       outline: none;
       background: transparent;
       box-sizing: border-box;
       color: var(--sky-text-primary);
-      padding: 10px 15px;
+      padding: var(--sky-space-2\\.5, 10px) var(--sky-space-3, 12px);
       resize: none;
       overflow: auto;
       font-family: var(--sky-font);
@@ -570,12 +536,9 @@ import{__decorate as t,__metadata as e}from"tslib";import{css as i,LitElement as
       resize: both;
     }
 
-    textarea::-webkit-scrollbar {
-      width: 2px;
-    }
-
-    textarea::-webkit-scrollbar-track {
-      background: transparent;
+    textarea {
+      scrollbar-width: thin;
+      scrollbar-color: var(--sky-scrollbar-thumb) var(--sky-scrollbar-track);
     }
 
     textarea::-webkit-scrollbar {
@@ -584,20 +547,19 @@ import{__decorate as t,__metadata as e}from"tslib";import{css as i,LitElement as
     }
 
     textarea::-webkit-scrollbar-thumb {
-      background-color: var(--sky-text-tertiary);
-      border-radius: 4px;
-      transition: background-color 0.3s ease-in-out;
+      background-color: var(--sky-scrollbar-thumb);
+      border-radius: var(--sky-radius-full, 9999px);
+      transition: background-color var(--sky-duration-normal, 200ms)
+        var(--sky-ease-default, ease);
       cursor: grab;
     }
 
     textarea::-webkit-scrollbar-thumb:hover {
-      background-color: var(--sky-text-secondary);
-      transition: background-color 0.3s ease-in-out;
+      background-color: var(--sky-scrollbar-thumb-hover);
     }
 
     textarea::-webkit-scrollbar-track {
-      background-color: var(--sky-border-light);
-      border-radius: 4px;
+      background: var(--sky-scrollbar-track);
     }
 
     textarea::-webkit-scrollbar-button {
@@ -610,36 +572,62 @@ import{__decorate as t,__metadata as e}from"tslib";import{css as i,LitElement as
 
     .input-wrapper:has(textarea) {
       height: calc((var(--rows)) * 23px);
+      align-items: flex-start;
     }
     textarea {
       height: calc((var(--rows)) * 23px);
     }
 
-    .input-wrapper:has(textarea) {
-      align-items: flex-start;
+    @media (prefers-reduced-motion: reduce) {
+      .loading-indicator {
+        animation: none;
+      }
+
+      .input-container:focus-within .label,
+      .input-wrapper,
+      .icon-slot,
+      .increment-btn,
+      .decrement-btn,
+      .clear-button,
+      input,
+      textarea,
+      .custom-file-label {
+        transition: none;
+      }
     }
-  `}static{this.shadowRootOptions={...r.shadowRootOptions,delegatesFocus:!0}}connectedCallback(){super.connectedCallback(),this.autofillGuardActive="search"===this.type,this.hasAttribute("tabindex")||(this.tabIndex=this.disabled?-1:0)}firstUpdated(t){super.firstUpdated(t),this.captureDefaultValue(this.value),this.syncFormValue(),this.syncValidity();const e=this.shadowRoot?.querySelector('slot[name="icon-left"]'),i=this.shadowRoot?.querySelector('slot[name="icon-right"]'),r=(t,e)=>{e&&e.addEventListener("slotchange",()=>{e.assignedNodes({flatten:!0}).forEach(e=>{e instanceof HTMLElement&&e.addEventListener("click",()=>this.handleIconClick(t))})})};r("left",e),r("right",i)}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 r=i.reduce((t,e)=>t+e.size,0);if(this.totalFileSize=r,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:r,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 r=t(e);return!0===r||(this.validationErrors.push("string"==typeof r?r:`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 i=[];if("single"===this.errorDisplayMode?t?i=[t]:e.length&&(i=[e[0]]):i=t?[t,...e]:e,!i.length)return null;const r=`${this.id||"sky-input"}-errors`;return s`
+  `}static{this.shadowRootOptions={...s.shadowRootOptions,delegatesFocus:!0}}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 i=[];if("single"===this.errorDisplayMode?t?i=[t]:e.length&&(i=[e[0]]):i=t?[t,...e]:e,!i.length)return null;const s=`${this.id||"sky-input"}-errors`;return o`
       <div class="progress-message">
-        <ul id=${r} class="error-list" part="error-list">
-          ${i.map(t=>s`<li class="error" part="error">${t}</li>`)}
+        <ul id=${s} class="error-list" part="error-list">
+          ${i.map(t=>o`<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}render(){const t="file"===this.type,e="textarea"===this.type,i="number"===this.type,r="password"===this.type,n=!!this.querySelector('[slot="icon-left"]'),l=!!this.querySelector('[slot="icon-right"]');let p=null;"date"===this.type?p=s`<sky-icon icon="ion:calendar"></sky-icon>`:"time"===this.type?p=s`<sky-icon icon="ion:time"></sky-icon>`:"week"===this.type||"month"===this.type?p=s`<sky-icon icon="ion:calendar"></sky-icon>`:"datetime-local"===this.type&&(p=s`<sky-icon icon="ion:time"></sky-icon>`);const d=this.filePreview&&(n||l),h="left"===this.autofillIconSlot&&p,u="right"===this.autofillIconSlot&&p,y=()=>s`
+    `}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 r;const i="prefix"===t?this.prefixColor:this.suffixColor,s=this.affixColorStyle(i);return o`<span
+      class="input-affix ${t}"
+      part="input-${t}"
+      style=${s?n(s):r}
+      >${e}</span
+    >`}render(){const t="file"===this.type,e="textarea"===this.type,i="number"===this.type,s="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=o`<sky-icon icon="ion:calendar"></sky-icon>`:"time"===this.type?d=o`<sky-icon icon="ion:time"></sky-icon>`:"week"===this.type||"month"===this.type?d=o`<sky-icon icon="ion:calendar"></sky-icon>`:"datetime-local"===this.type&&(d=o`<sky-icon icon="ion:time"></sky-icon>`);const c=this.filePreview&&(l||p),h="left"===this.autofillIconSlot&&d,y="right"===this.autofillIconSlot&&d,v=()=>o`
       <img
         src=${a("string"==typeof this.filePreview?this.filePreview:void 0)}
         alt="Preview"
         style="width:100%;height:100%;object-fit:cover;border-radius:12px;"
       />
-    `,v=()=>s`
+    `,f=()=>o`
       <label
         class="custom-file-label"
         part="custom-file-label"
         for="fileInput"
         ?disabled=${this.disabled}
       >
-        <span style="color:${this.prefixColor}">${this.prefix}</span>
-        ${this.selectedFileName||this.placeholder||"Choose file"}
-        <span style="color:${this.suffixColor}">${this.suffix}</span>
+        ${this.renderInputAffix("prefix")}
+        <span
+          class="custom-file-label__text"
+          part="custom-file-label-text"
+          ?data-filled=${Boolean(this.selectedFileName)}
+        >
+          ${this.selectedFileName||this.placeholder||"Choose file"}
+        </span>
+        ${this.renderInputAffix("suffix")}
       </label>
 
       <input
@@ -667,9 +655,9 @@ import{__decorate as t,__metadata as e}from"tslib";import{css as i,LitElement as
         aria-labelledby=${a(this.ariaLabelledby||void 0)}
         aria-describedby=${a(this.describedById)}
       />
-    `,g=()=>s`
+    `,b=()=>o`
       <textarea
-        .value=${c(this.value)}
+        .value=${u(this.value)}
         @input=${this.handleInput}
         @focus=${this.handleFocus}
         @blur=${this.handleBlur}
@@ -696,10 +684,10 @@ import{__decorate as t,__metadata as e}from"tslib";import{css as i,LitElement as
         aria-describedby=${a(this.describedById)}
         role=${a(this.nativeInputRole())}
       ></textarea>
-    `,b=()=>s`
+    `,g=()=>o`
       <input
-        .type=${this.nativeTextInputType(r)}
-        .value=${c(this.value)}
+        .type=${this.nativeTextInputType(s)}
+        .value=${u(this.value)}
         @input=${this.handleInput}
         @focus=${this.handleFocus}
         @blur=${this.handleBlur}
@@ -716,7 +704,7 @@ import{__decorate as t,__metadata as e}from"tslib";import{css as i,LitElement as
         spellcheck=${this.spellcheck}
         inputmode=${a(this.nativeInputMode())}
         enterkeyhint=${a(this.nativeEnterKeyHint())}
-        data-form-type=${this.isFilterSearchInput()?"other":o}
+        data-form-type=${this.isFilterSearchInput()?"other":r}
         ?data-1p-ignore=${this.isFilterSearchInput()}
         ?data-lpignore=${this.isFilterSearchInput()}
         list=${a(this.list||void 0)}
@@ -735,29 +723,33 @@ import{__decorate as t,__metadata as e}from"tslib";import{css as i,LitElement as
         aria-describedby=${a(this.describedById)}
         role=${a(this.nativeInputRole())}
       />
-    `;return s`
+    `;return o`
       <div
         class="input-container"
         @click=${this.handleWrapperClick}
         part="input-container"
       >
-        ${this.label?s`<div class="label" part="label">${this.label}</div>`:null}
+        ${this.label?o`<div class="label" part="label">${this.label}</div>`:null}
         <div
           class="input-wrapper"
           part="input-wrapper"
           ?compact=${this.compact}
           ?loading=${this.loading}
         >
-          ${(()=>s`
+          ${(()=>o`
       <div
         class="icon-slot left ${this.focused?"focused":""}"
         part="icon-slot icon-slot-left"
-        ?filled=${Boolean(d&&n)||Boolean(h)||n}
+        ?filled=${Boolean(c&&l)||Boolean(h)||l}
         @click=${()=>{(t||h)&&this.triggerNativeDropdown()}}
       >
-        ${d&&n?y():h?p:s`<slot name="icon-left"></slot>`}
+        ${c&&l?v():h?d:o`<slot name="icon-left"></slot>`}
       </div>
-    `)()} ${t?v():e?g():b()} ${(()=>i&&this.showNumberButtons?s`
+    `)()}
+          ${n?this.renderInputAffix("prefix"):r}
+          ${t?f():e?b():g()}
+          ${n?this.renderInputAffix("suffix"):r}
+          ${(()=>i&&this.showNumberButtons?o`
             <div class="number-btn">
               <button
                 class="decrement-btn"
@@ -782,38 +774,41 @@ import{__decorate as t,__metadata as e}from"tslib";import{css as i,LitElement as
                 <sky-icon icon="ion:add"></sky-icon>
               </button>
             </div>
-          `:null)()} ${(()=>r&&this.showPasswordToggle?s`
+          `:null)()} ${(()=>s&&this.showPasswordToggle?o`
             <sky-icon
               class="toggle-password"
               part="toggle-password"
+              ?compact=${this.compact}
               icon=${this.showPassword?this.passwordVisibleIcon:this.passwordHiddenIcon}
               @click=${this.togglePasswordVisibility}
             ></sky-icon>
           `:null)()}
-          ${(()=>this.clearable&&(this.value||this.selectedFileName||this.selectedFileCount>0)?s`
+          ${(()=>this.clearable&&(this.value||this.selectedFileName||this.selectedFileCount>0)?o`
             <sky-icon
               class="clear-button"
               part="clear-button"
+              ?compact=${this.compact}
               @click=${this.handleClear}
               ?loading=${this.loading}
               icon="ion:close"
             ></sky-icon>
-          `:null)()} ${(()=>this.loading?s`<div
-            class="loading-indicator right"
+          `:null)()} ${(()=>this.loading?o`<div
+            class="loading-indicator"
             part="loading-indicator"
-          ></div>`:s`
+            ?compact=${this.compact}
+          ></div>`:o`
             <div
               class="icon-slot right ${this.focused?"focused":""}"
               part="icon-slot icon-slot-right"
-              ?filled=${Boolean(d&&l)||Boolean(u)||l}
-              @click=${()=>{(t||u)&&this.triggerNativeDropdown()}}
+              ?filled=${Boolean(c&&p)||Boolean(y)||p}
+              @click=${()=>{(t||y)&&this.triggerNativeDropdown()}}
             >
-              ${d&&l?y():u?p:s`<slot name="icon-right"></slot>`}
+              ${c&&p?v():y?d:o`<slot name="icon-right"></slot>`}
             </div>
           `)()}
         </div>
 
-        ${(()=>t&&this.totalFileSize?s`
+        ${(()=>t&&this.totalFileSize?o`
             <div class="file-info" part="file-info">
               <span>
                 ${this.selectedFileCount}
@@ -823,5 +818,5 @@ import{__decorate as t,__metadata as e}from"tslib";import{css as i,LitElement as
             </div>
           `:null)()} ${this.renderValidationErrors()}
       </div>
-    `}};t([n({type:String}),e("design:type",Object)],v.prototype,"value",void 0),t([n({type:String}),e("design:type",Object)],v.prototype,"placeholder",void 0),t([n({type:String}),e("design:type",Object)],v.prototype,"label",void 0),t([n({type:String}),e("design:type",String)],v.prototype,"type",void 0),t([n({type:String}),e("design:type",Object)],v.prototype,"suffix",void 0),t([n({type:String}),e("design:type",Object)],v.prototype,"prefix",void 0),t([n({type:String}),e("design:type",Object)],v.prototype,"prefixColor",void 0),t([n({type:String}),e("design:type",Object)],v.prototype,"suffixColor",void 0),t([n({type:String}),e("design:type",Object)],v.prototype,"color",void 0),t([n({type:Array}),e("design:type",Array)],v.prototype,"validations",void 0),t([n({type:Boolean,reflect:!0}),e("design:type",Object)],v.prototype,"compact",void 0),t([n({type:Boolean,reflect:!0}),e("design:type",Object)],v.prototype,"loading",void 0),t([n({type:Boolean}),e("design:type",Object)],v.prototype,"showErrors",void 0),t([n({type:Boolean,reflect:!0}),e("design:type",Object)],v.prototype,"clearable",void 0),t([n({type:String}),e("design:type",String)],v.prototype,"errorDisplayMode",void 0),t([n({type:Boolean,reflect:!0}),e("design:type",Object)],v.prototype,"required",void 0),t([n({type:String}),e("design:type",Object)],v.prototype,"step",void 0),t([n({type:String}),e("design:type",Object)],v.prototype,"min",void 0),t([n({type:String}),e("design:type",Object)],v.prototype,"max",void 0),t([n({type:String}),e("design:type",Object)],v.prototype,"autocapitalize",void 0),t([n({type:String}),e("design:type",Object)],v.prototype,"autocomplete",void 0),t([n({type:Boolean}),e("design:type",Object)],v.prototype,"spellcheck",void 0),t([n({type:String}),e("design:type",Object)],v.prototype,"dir",void 0),t([n({type:Number}),e("design:type",Object)],v.prototype,"rows",void 0),t([n({type:String}),e("design:type",Object)],v.prototype,"resizable",void 0),t([n({type:String}),e("design:type",Object)],v.prototype,"accept",void 0),t([n({type:Boolean}),e("design:type",Object)],v.prototype,"multiple",void 0),t([n({type:String}),e("design:type",Object)],v.prototype,"inputmode",void 0),t([n({type:String}),e("design:type",Object)],v.prototype,"enterkeyhint",void 0),t([n({type:String}),e("design:type",Object)],v.prototype,"pattern",void 0),t([n({type:Number}),e("design:type",Object)],v.prototype,"minlength",void 0),t([n({type:Number}),e("design:type",Object)],v.prototype,"maxlength",void 0),t([n({type:String}),e("design:type",Object)],v.prototype,"list",void 0),t([n({type:Number}),e("design:type",Object)],v.prototype,"size",void 0),t([n({type:Number}),e("design:type",Object)],v.prototype,"cols",void 0),t([n({type:Boolean}),e("design:type",Object)],v.prototype,"autofocus",void 0),t([n({type:Boolean}),e("design:type",Object)],v.prototype,"capture",void 0),t([n({type:String}),e("design:type",Object)],v.prototype,"inputRole",void 0),t([n({type:String}),e("design:type",Object)],v.prototype,"ariaLabel",void 0),t([n({type:String}),e("design:type",Object)],v.prototype,"ariaLabelledby",void 0),t([n({type:String}),e("design:type",Object)],v.prototype,"ariaDescribedby",void 0),t([n({type:Boolean}),e("design:type",Object)],v.prototype,"showNumberButtons",void 0),t([n({type:Boolean}),e("design:type",Object)],v.prototype,"showPasswordToggle",void 0),t([n({type:String}),e("design:type",Object)],v.prototype,"passwordVisibleIcon",void 0),t([n({type:String}),e("design:type",Object)],v.prototype,"passwordHiddenIcon",void 0),t([n({type:Boolean,reflect:!0}),e("design:type",Object)],v.prototype,"validationActive",void 0),t([n({type:Boolean,reflect:!0}),e("design:type",Object)],v.prototype,"invalid",void 0),t([n({type:String,reflect:!0}),e("design:type",Object)],v.prototype,"variant",void 0),t([l(),e("design:type",Object)],v.prototype,"selectedFileName",void 0),t([l(),e("design:type",Array)],v.prototype,"selectedFiles",void 0),t([l(),e("design:type",Object)],v.prototype,"focused",void 0),t([l(),e("design:type",Array)],v.prototype,"validationStatus",void 0),t([l(),e("design:type",Array)],v.prototype,"validationErrors",void 0),t([l(),e("design:type",Object)],v.prototype,"typingStarted",void 0),t([l(),e("design:type",Object)],v.prototype,"autofillIconSlot",void 0),t([l(),e("design:type",Object)],v.prototype,"autofillGuardActive",void 0),t([l(),e("design:type",Object)],v.prototype,"showPassword",void 0),t([l(),e("design:type",Object)],v.prototype,"totalFileSize",void 0),t([l(),e("design:type",Object)],v.prototype,"selectedFileCount",void 0),t([l(),e("design:type",Object)],v.prototype,"filePreview",void 0),t([p(".input-wrapper"),e("design:type",HTMLElement)],v.prototype,"inputWrapperEl",void 0),t([p("input, textarea"),e("design:type",Object)],v.prototype,"nativeInputEl",void 0),v=t([d("sky-input")],v);export{v as SkyInput};
+    `}};t([l({type:String}),e("design:type",Object)],f.prototype,"value",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"placeholder",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"label",void 0),t([l({type:String}),e("design:type",String)],f.prototype,"type",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"suffix",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"prefix",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"prefixColor",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"suffixColor",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"color",void 0),t([l({type:Array}),e("design:type",Object),e("design:paramtypes",[Object])],f.prototype,"validations",null),t([l({type:Boolean,reflect:!0}),e("design:type",Object)],f.prototype,"compact",void 0),t([l({type:Boolean,reflect:!0}),e("design:type",Object)],f.prototype,"loading",void 0),t([l({type:Boolean}),e("design:type",Object)],f.prototype,"showErrors",void 0),t([l({type:Boolean,reflect:!0}),e("design:type",Object)],f.prototype,"clearable",void 0),t([l({type:String}),e("design:type",String)],f.prototype,"errorDisplayMode",void 0),t([l({type:Boolean,reflect:!0}),e("design:type",Object)],f.prototype,"required",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"step",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"min",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"max",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"autocapitalize",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"autocomplete",void 0),t([l({type:Boolean}),e("design:type",Object)],f.prototype,"spellcheck",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"dir",void 0),t([l({type:Number}),e("design:type",Object)],f.prototype,"rows",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"resizable",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"accept",void 0),t([l({type:Boolean}),e("design:type",Object)],f.prototype,"multiple",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"inputmode",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"enterkeyhint",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"pattern",void 0),t([l({type:Number}),e("design:type",Object)],f.prototype,"minlength",void 0),t([l({type:Number}),e("design:type",Object)],f.prototype,"maxlength",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"list",void 0),t([l({type:Number}),e("design:type",Object)],f.prototype,"size",void 0),t([l({type:Number}),e("design:type",Object)],f.prototype,"cols",void 0),t([l({type:Boolean}),e("design:type",Object)],f.prototype,"autofocus",void 0),t([l({type:Boolean}),e("design:type",Object)],f.prototype,"capture",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"inputRole",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"ariaLabel",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"ariaLabelledby",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"ariaDescribedby",void 0),t([l({type:Boolean}),e("design:type",Object)],f.prototype,"showNumberButtons",void 0),t([l({type:Boolean}),e("design:type",Object)],f.prototype,"showPasswordToggle",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"passwordVisibleIcon",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"passwordHiddenIcon",void 0),t([l({type:Boolean,reflect:!0}),e("design:type",Object)],f.prototype,"validationActive",void 0),t([l({type:Boolean,reflect:!0}),e("design:type",Object)],f.prototype,"invalid",void 0),t([l({type:String,reflect:!0}),e("design:type",Object)],f.prototype,"variant",void 0),t([p(),e("design:type",Object)],f.prototype,"selectedFileName",void 0),t([p(),e("design:type",Array)],f.prototype,"selectedFiles",void 0),t([p(),e("design:type",Object)],f.prototype,"focused",void 0),t([p(),e("design:type",Array)],f.prototype,"validationStatus",void 0),t([p(),e("design:type",Array)],f.prototype,"validationErrors",void 0),t([p(),e("design:type",Object)],f.prototype,"typingStarted",void 0),t([p(),e("design:type",Object)],f.prototype,"autofillIconSlot",void 0),t([p(),e("design:type",Object)],f.prototype,"autofillGuardActive",void 0),t([p(),e("design:type",Object)],f.prototype,"showPassword",void 0),t([p(),e("design:type",Object)],f.prototype,"totalFileSize",void 0),t([p(),e("design:type",Object)],f.prototype,"selectedFileCount",void 0),t([p(),e("design:type",Object)],f.prototype,"filePreview",void 0),t([d(".input-wrapper"),e("design:type",HTMLElement)],f.prototype,"inputWrapperEl",void 0),t([d("input, textarea"),e("design:type",Object)],f.prototype,"nativeInputEl",void 0),f=t([c("sky-input")],f);export{f as SkyInput};
 //# sourceMappingURL=sky-input.js.map