@sky.ui/core 0.0.39 → 0.0.40

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

@@ -194,15 +194,13 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       ${o?this.renderInputAffix("prefix"):s}
       ${S()}
       ${o?this.renderInputAffix("suffix"):s}
-      ${x()} ${w()}
-      ${$()}
+      ${x()} ${w()} ${$()}
     `,C=i`
       ${f()}
       ${o?this.renderInputAffix("prefix"):s}
       ${S()}
       ${o?this.renderInputAffix("suffix"):s}
-      ${x()} ${w()}
-      ${$()} ${m()}
+      ${x()} ${w()} ${$()} ${m()}
     `,A=i`
       ${f()}
       <div class="input-inside-main">
@@ -218,29 +216,28 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       >
         ${F||I?s:z}
         ${F?i`<fieldset
-              class="input-wrapper"
-              part="input-wrapper"
-              ?compact=${this.compact}
-              ?loading=${this.loading}
-            >
-              ${z}
-              <div class="input-fieldset-body">
-                ${f()}
-                ${o?this.renderInputAffix("prefix"):s}
-                ${S()}
-                ${o?this.renderInputAffix("suffix"):s}
-                ${x()} ${w()}
-                ${$()} ${m()}
-              </div>
-            </fieldset>`:i`<div
-              class="input-wrapper"
-              part="input-wrapper"
-              ?compact=${this.compact}
-              ?loading=${this.loading}
-            >
-              ${I?A:C}
-            </div>`}
-
+                class="input-wrapper"
+                part="input-wrapper"
+                ?compact=${this.compact}
+                ?loading=${this.loading}
+              >
+                ${z}
+                <div class="input-fieldset-body">
+                  ${f()}
+                  ${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">
               <span>
@@ -310,23 +307,23 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       pointer-events: none;
     }
 
-    :host([variant="highlight"]){
-      .label{
+    :host([variant='highlight']) {
+      .label {
         color: var(--sky-input-color);
       }
     }
 
     /* Fieldset / legend: native fieldset+legend; wrapper keeps solid fill */
-    :host([variant="fieldset"]) {
+    :host([variant='fieldset']) {
       overflow: visible;
       padding-block-start: 0;
     }
 
-    :host([variant="fieldset"]) .input-container {
+    :host([variant='fieldset']) .input-container {
       overflow: visible;
     }
 
-    :host([variant="fieldset"]) fieldset.input-wrapper {
+    :host([variant='fieldset']) fieldset.input-wrapper {
       display: block;
       height: auto;
       margin: 0;
@@ -338,19 +335,17 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       box-shadow: none;
     }
 
-    :host([variant="fieldset"]) fieldset.input-wrapper[compact] {
+    :host([variant='fieldset']) fieldset.input-wrapper[compact] {
       height: auto;
     }
 
-    :host([variant="fieldset"]) .input-fieldset-body {
+    :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)
-      );
+      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)
       );
@@ -360,7 +355,9 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       overflow: hidden;
     }
 
-    :host([variant="fieldset"]) fieldset.input-wrapper[compact] .input-fieldset-body {
+    :host([variant='fieldset'])
+      fieldset.input-wrapper[compact]
+      .input-fieldset-body {
       height: calc(
         var(--sky-input-height-compact) - 2 * var(--sky-input-border-width)
       );
@@ -369,17 +366,19 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       );
     }
 
-    :host([variant="fieldset"]) fieldset.input-wrapper:has(textarea) {
+    :host([variant='fieldset']) fieldset.input-wrapper:has(textarea) {
       height: auto;
     }
 
-    :host([variant="fieldset"]) fieldset.input-wrapper:has(textarea) .input-fieldset-body {
+    :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 {
+    :host([variant='fieldset']) legend.label {
       float: unset;
       width: auto;
       max-width: calc(100% - 2 * var(--sky-input-pad-x));
@@ -400,40 +399,42 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       pointer-events: none;
     }
 
-    :host([variant="fieldset"]) .input-container:focus-within legend.label {
+    :host([variant='fieldset']) .input-container:focus-within legend.label {
       color: var(--sky-input-color);
       font-size: var(--sky-font-size-xs);
     }
 
     /* Focus via real border — ::after would paint over the legend gap */
-    :host([variant="fieldset"]) .input-wrapper::after {
+    :host([variant='fieldset']) .input-wrapper::after {
       content: none;
       display: none;
     }
 
-    :host([variant="fieldset"]) .input-wrapper:has(input:focus),
-    :host([variant="fieldset"]) .input-wrapper:has(input:focus-visible),
-    :host([variant="fieldset"]) .input-wrapper:has(textarea:focus),
-    :host([variant="fieldset"]) .input-wrapper:has(textarea:focus-visible) {
+    :host([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 {
+    :host([variant='fieldset'][validationActive]:invalid) .input-wrapper {
       border-color: var(--sky-danger-primary);
     }
 
-    :host([variant="fieldset"][validationActive]:invalid) legend.label {
+    :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 {
+    :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"]) {
+    :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;
@@ -441,20 +442,20 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       --sky-input-inside-value-min: 1.375rem;
     }
 
-    :host([variant="inside"]) .input-wrapper {
+    :host([variant='inside']) .input-wrapper {
       height: auto;
       min-height: var(--sky-input-height-inside);
       align-items: center;
       padding-block: var(--sky-input-pad-y-sm, 0px);
     }
 
-    :host([variant="inside"]) .input-wrapper[compact] {
+    :host([variant='inside']) .input-wrapper[compact] {
       height: auto;
       min-height: var(--sky-input-height-inside-compact);
       padding-block: var(--sky-input-pad-y-sm, 0px);
     }
 
-    :host([variant="inside"]) .input-inside-main {
+    :host([variant='inside']) .input-inside-main {
       flex: 1 1 auto;
       min-width: 0;
       display: flex;
@@ -464,7 +465,7 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       padding-block: var(--sky-input-inside-label-block);
     }
 
-    :host([variant="inside"]) .input-inside-main > .label {
+    :host([variant='inside']) .input-inside-main > .label {
       margin: 0;
       padding-inline: var(--sky-input-pad-x);
       font-size: var(--sky-font-size-xs);
@@ -477,32 +478,40 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       flex-shrink: 0;
     }
 
-    :host([variant="inside"][compact]) .input-inside-main > .label {
+    :host([variant='inside'][compact]) .input-inside-main > .label {
       font-size: 0.6875rem; /* ~11px — denser than xs for two-line compact */
       line-height: 1.3;
       min-height: calc(0.6875rem * 1.3);
     }
 
-    :host([variant="inside"][compact]) .input-inside-row input,
-    :host([variant="inside"][compact]) .input-inside-row textarea {
+    :host([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 {
+    :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 {
+    :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 {
+    :host([variant='inside'][validationActive]:invalid)
+      .input-inside-main
+      > .label {
       color: var(--sky-danger-primary);
     }
 
-    :host([variant="inside"]) .input-inside-row {
+    :host([variant='inside']) .input-inside-row {
       display: flex;
       align-items: center;
       min-width: 0;
@@ -510,27 +519,33 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       min-height: var(--sky-input-inside-value-min);
     }
 
-    :host([variant="inside"]) .input-wrapper:has(.icon-slot[filled].left) .input-inside-main > .label,
-    :host([variant="inside"]) .input-wrapper:has(.input-affix.prefix) .input-inside-main > .label {
+    :host([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 {
+    :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) {
+    :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] {
+    :host([variant='inside']) .icon-slot,
+    :host([variant='inside']) .icon-slot[filled] {
       align-self: center;
       height: auto;
       max-height: none;
@@ -594,7 +609,7 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
     }
 
     .input-wrapper::after {
-      content: "";
+      content: '';
       position: absolute;
       top: -1px;
       left: -1px;
@@ -641,11 +656,11 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       border-radius: var(--sky-radius-primary);
     }
 
-    input[type="date"],
-    input[type="time"],
-    input[type="week"],
-    input[type="month"],
-    input[type="datetime-local"] {
+    input[type='date'],
+    input[type='time'],
+    input[type='week'],
+    input[type='month'],
+    input[type='datetime-local'] {
       -webkit-appearance: none;
       -moz-appearance: none;
       appearance: none;
@@ -654,11 +669,11 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       font-family: inherit;
     }
 
-    input[type="date"]::-webkit-calendar-picker-indicator,
-    input[type="time"]::-webkit-calendar-picker-indicator,
-    input[type="week"]::-webkit-calendar-picker-indicator,
-    input[type="month"]::-webkit-calendar-picker-indicator,
-    input[type="datetime-local"]::-webkit-calendar-picker-indicator {
+    input[type='date']::-webkit-calendar-picker-indicator,
+    input[type='time']::-webkit-calendar-picker-indicator,
+    input[type='week']::-webkit-calendar-picker-indicator,
+    input[type='month']::-webkit-calendar-picker-indicator,
+    input[type='datetime-local']::-webkit-calendar-picker-indicator {
       display: none;
     }
 
@@ -687,13 +702,13 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       text-align: right;
     }
 
-    input[type="number"] {
+    input[type='number'] {
       appearance: textfield;
       -moz-appearance: textfield;
     }
 
-    input[type="number"]::-webkit-inner-spin-button,
-    input[type="number"]::-webkit-outer-spin-button {
+    input[type='number']::-webkit-inner-spin-button,
+    input[type='number']::-webkit-outer-spin-button {
       -webkit-appearance: none;
       margin: 0;
     }
@@ -967,7 +982,7 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       pointer-events: none;
     }
 
-    input[type="file"] {
+    input[type='file'] {
       position: absolute;
       width: 100%;
       height: 100%;
@@ -1001,7 +1016,7 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
     }
 
     .custom-file-label:empty::after {
-      content: "Choose file";
+      content: 'Choose file';
       color: var(--sky-input-color);
     }
 
@@ -1023,11 +1038,11 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       font-family: var(--sky-font);
     }
 
-    textarea[resizable="vertical"] {
+    textarea[resizable='vertical'] {
       resize: vertical;
     }
 
-    textarea[resizable="both"] {
+    textarea[resizable='both'] {
       resize: both;
     }