@sky.ui/core 0.0.40 → 0.0.41

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

@@ -194,13 +194,15 @@ 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">
@@ -216,28 +218,29 @@ 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>
@@ -307,23 +310,23 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       pointer-events: none;
     }
 
-    :host([variant='highlight']) {
-      .label {
+    :host([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;
@@ -335,17 +338,19 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       box-shadow: none;
     }
 
-    :host([variant='fieldset']) fieldset.input-wrapper[compact] {
+    :host([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)
       );
@@ -355,9 +360,7 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       overflow: hidden;
     }
 
-    :host([variant='fieldset'])
-      fieldset.input-wrapper[compact]
-      .input-fieldset-body {
+    :host([variant="fieldset"]) fieldset.input-wrapper[compact] .input-fieldset-body {
       height: calc(
         var(--sky-input-height-compact) - 2 * var(--sky-input-border-width)
       );
@@ -366,19 +369,17 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       );
     }
 
-    :host([variant='fieldset']) fieldset.input-wrapper:has(textarea) {
+    :host([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));
@@ -399,42 +400,40 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       pointer-events: none;
     }
 
-    :host([variant='fieldset']) .input-container:focus-within legend.label {
+    :host([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;
@@ -442,20 +441,20 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       --sky-input-inside-value-min: 1.375rem;
     }
 
-    :host([variant='inside']) .input-wrapper {
+    :host([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;
@@ -465,7 +464,7 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       padding-block: var(--sky-input-inside-label-block);
     }
 
-    :host([variant='inside']) .input-inside-main > .label {
+    :host([variant="inside"]) .input-inside-main > .label {
       margin: 0;
       padding-inline: var(--sky-input-pad-x);
       font-size: var(--sky-font-size-xs);
@@ -478,40 +477,32 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       flex-shrink: 0;
     }
 
-    :host([variant='inside'][compact]) .input-inside-main > .label {
+    :host([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;
@@ -519,33 +510,27 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       min-height: var(--sky-input-inside-value-min);
     }
 
-    :host([variant='inside'])
-      .input-wrapper:has(.icon-slot[filled].left)
-      .input-inside-main
-      > .label,
-    :host([variant='inside'])
-      .input-wrapper:has(.input-affix.prefix)
-      .input-inside-main
-      > .label {
+    :host([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;
@@ -609,7 +594,7 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
     }
 
     .input-wrapper::after {
-      content: '';
+      content: "";
       position: absolute;
       top: -1px;
       left: -1px;
@@ -656,11 +641,11 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       border-radius: var(--sky-radius-primary);
     }
 
-    input[type='date'],
-    input[type='time'],
-    input[type='week'],
-    input[type='month'],
-    input[type='datetime-local'] {
+    input[type="date"],
+    input[type="time"],
+    input[type="week"],
+    input[type="month"],
+    input[type="datetime-local"] {
       -webkit-appearance: none;
       -moz-appearance: none;
       appearance: none;
@@ -669,11 +654,11 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       font-family: inherit;
     }
 
-    input[type='date']::-webkit-calendar-picker-indicator,
-    input[type='time']::-webkit-calendar-picker-indicator,
-    input[type='week']::-webkit-calendar-picker-indicator,
-    input[type='month']::-webkit-calendar-picker-indicator,
-    input[type='datetime-local']::-webkit-calendar-picker-indicator {
+    input[type="date"]::-webkit-calendar-picker-indicator,
+    input[type="time"]::-webkit-calendar-picker-indicator,
+    input[type="week"]::-webkit-calendar-picker-indicator,
+    input[type="month"]::-webkit-calendar-picker-indicator,
+    input[type="datetime-local"]::-webkit-calendar-picker-indicator {
       display: none;
     }
 
@@ -702,13 +687,13 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       text-align: right;
     }
 
-    input[type='number'] {
+    input[type="number"] {
       appearance: textfield;
       -moz-appearance: textfield;
     }
 
-    input[type='number']::-webkit-inner-spin-button,
-    input[type='number']::-webkit-outer-spin-button {
+    input[type="number"]::-webkit-inner-spin-button,
+    input[type="number"]::-webkit-outer-spin-button {
       -webkit-appearance: none;
       margin: 0;
     }
@@ -982,7 +967,7 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       pointer-events: none;
     }
 
-    input[type='file'] {
+    input[type="file"] {
       position: absolute;
       width: 100%;
       height: 100%;
@@ -1016,7 +1001,7 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
     }
 
     .custom-file-label:empty::after {
-      content: 'Choose file';
+      content: "Choose file";
       color: var(--sky-input-color);
     }
 
@@ -1038,11 +1023,11 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefine
       font-family: var(--sky-font);
     }
 
-    textarea[resizable='vertical'] {
+    textarea[resizable="vertical"] {
       resize: vertical;
     }
 
-    textarea[resizable='both'] {
+    textarea[resizable="both"] {
       resize: both;
     }