@sky.ui/core 0.0.51 → 0.0.52

package/dist/sky-combobox/sky-combobox.js

@@ -189,7 +189,7 @@ import{unsafeCSS as e,css as t,LitElement as i,html as s,nothing as o}from"lit";
           ${u(e,e=>e,e=>s`<li class="error" part="error-item">${e}</li>`)}
         </ul>
       </div>
-    `}getErrorMessages(){const e=Array.isArray(this.validationErrors)?this.validationErrors:[];switch(this.errorDisplayMode){case"single":return e.slice(0,1);case"all":return e;default:return[]}}handleIconClick(e,t){this.dispatchEvent(new CustomEvent("icon-click",{detail:{position:e,event:t},bubbles:!0,composed:!0}))}render(){const e=y({"icon-slot":!0,left:!0,focused:this.focused}),t=y({"icon-slot":!0,right:!0,focused:this.focused}),i=y({"placeholder-label":!0,active:this.selectedItems.length>0}),r="fieldset"===this.variant,n="inside"===this.variant,a=this.label?r?s`<legend class="label" part="label">${this.label}</legend>`:s`<div class="label" part="label">${this.label}</div>`:null,l=s`
+    `}getErrorMessages(){const e=Array.isArray(this.validationErrors)?this.validationErrors:[];switch(this.errorDisplayMode){case"single":return e.slice(0,1);case"all":return e;default:return[]}}handleIconClick(e,t){this.dispatchEvent(new CustomEvent("icon-click",{detail:{position:e,event:t},bubbles:!0,composed:!0}))}render(){const e=y({"icon-slot":!0,left:!0,focused:this.focused}),t=y({"icon-slot":!0,right:!0,focused:this.focused}),i=y({"placeholder-label":!0,active:this.selectedItems.length>0}),r="fieldset"===this.variant,n="inside"===this.variant,a=this.label?r?s`<legend class="label" part="label"><span class="legend-text">${this.label}</span></legend>`:s`<div class="label" part="label">${this.label}</div>`:null,l=s`
       <div
         class=${e}
         part="icon-slot"
@@ -352,11 +352,12 @@ import{unsafeCSS as e,css as t,LitElement as i,html as s,nothing as o}from"lit";
     /* Fieldset / legend */
     :host([variant="fieldset"]) {
       overflow: visible;
-      padding-block-start: 0;
     }
 
     :host([variant="fieldset"]) .combo-box-container {
       overflow: visible;
+      /* Room for legend text sitting on the top border — keep off :host */
+      padding-block-start: 0.65em;
     }
 
     :host([variant="fieldset"]) fieldset.input-wrapper {
@@ -402,7 +403,7 @@ import{unsafeCSS as e,css as t,LitElement as i,html as s,nothing as o}from"lit";
       );
     }
 
-    /* Multi chips stay single-line; do not grow taller than sky-input */
+    /* Multi chips: keep fieldset at input height; center chips in the body */
     :host([variant="fieldset"]) .input-fieldset-body:has(.chip:not([single-select])) {
       height: calc(
         var(--sky-input-height) - 2 * var(--sky-input-border-width)
@@ -410,6 +411,7 @@ import{unsafeCSS as e,css as t,LitElement as i,html as s,nothing as o}from"lit";
       min-height: calc(
         var(--sky-input-height) - 2 * var(--sky-input-border-width)
       );
+      align-items: center;
       padding-block: 0;
     }
 
@@ -421,7 +423,14 @@ import{unsafeCSS as e,css as t,LitElement as i,html as s,nothing as o}from"lit";
       min-height: calc(
         var(--sky-input-height-compact) - 2 * var(--sky-input-border-width)
       );
-      padding-block: 0;
+    }
+
+    :host([variant="fieldset"]) .input-fieldset-body:has(.chip:not([single-select])) .field-main,
+    :host([variant="fieldset"]) .input-fieldset-body:has(.chip:not([single-select])) .chip-container {
+      align-self: stretch;
+      height: 100%;
+      min-height: 0;
+      align-items: center;
     }
 
     :host([variant="fieldset"]) legend.label {
@@ -429,21 +438,31 @@ import{unsafeCSS as e,css as t,LitElement as i,html as s,nothing as o}from"lit";
       width: auto;
       max-width: calc(100% - 2 * var(--sky-input-pad-x));
       margin-inline-start: var(--sky-input-pad-x);
-      margin-bottom: 0;
+      margin-block: 0;
       padding-inline: var(--sky-input-pad-x-sm);
-      padding-block: 2px;
+      padding-block: 0;
       border: none;
       background: transparent;
       background-color: transparent;
       color: var(--sky-text-secondary);
       font-size: var(--sky-font-size-xs);
-      line-height: 1.4;
+      /* Take no in-flow space; inner text is centered on the border notch */
+      height: 0;
+      line-height: 0;
       overflow: visible;
-      text-overflow: ellipsis;
       white-space: nowrap;
       pointer-events: none;
     }
 
+    :host([variant="fieldset"]) legend.label .legend-text {
+      display: inline-block;
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      line-height: 1.2;
+      transform: translateY(-50%);
+    }
+
     :host([variant="fieldset"]) .combo-box-container:focus-within legend.label,
     :host([variant="fieldset"]) .input-wrapper[open] legend.label {
       color: var(--sky-dropdown-color);
@@ -472,15 +491,14 @@ import{unsafeCSS as e,css as t,LitElement as i,html as s,nothing as o}from"lit";
     :host([variant="fieldset"][compact]) .combo-box-container:focus-within legend.label,
     :host([variant="fieldset"][compact]) .input-wrapper[open] legend.label {
       font-size: var(--sky-font-size-xs);
-      line-height: 1.4;
     }
 
     /* Inside: label in the wrapper above value row — keep tokens in sync with sky-input */
     :host([variant="inside"]) {
-      --sky-input-height-inside: 44px;
-      --sky-input-height-inside-compact: 40px;
-      --sky-input-inside-label-block: 0.15rem;
-      --sky-input-inside-value-min: 1.375rem;
+      --sky-input-height-inside: 40px;
+      --sky-input-height-inside-compact: 36px;
+      --sky-input-inside-label-block: 2px;
+      --sky-input-inside-value-min: 1.15em;
     }
 
     :host([variant="inside"]) .input-wrapper {
@@ -503,7 +521,7 @@ import{unsafeCSS as e,css as t,LitElement as i,html as s,nothing as o}from"lit";
       display: flex;
       flex-direction: column;
       justify-content: center;
-      gap: 0.15rem;
+      gap: 0;
       padding-block: var(--sky-input-inside-label-block);
       padding-inline: 0;
       overflow: hidden;
@@ -513,8 +531,8 @@ import{unsafeCSS as e,css as t,LitElement as i,html as s,nothing as o}from"lit";
       margin: 0;
       padding-inline: var(--sky-input-pad-x);
       font-size: var(--sky-font-size-xs);
-      line-height: 1.3;
-      min-height: calc(var(--sky-font-size-xs) * 1.3);
+      line-height: 1.15;
+      min-height: 0;
       color: var(--sky-text-secondary);
       pointer-events: none;
       overflow: hidden;
@@ -525,8 +543,8 @@ import{unsafeCSS as e,css as t,LitElement as i,html as s,nothing as o}from"lit";
 
     :host([variant="inside"][compact]) .input-inside-main > .label {
       font-size: 0.6875rem;
-      line-height: 1.3;
-      min-height: calc(0.6875rem * 1.3);
+      line-height: 1.15;
+      min-height: 0;
     }
 
     :host([variant="inside"]) .combo-box-container:focus-within .input-inside-main > .label,
@@ -555,6 +573,25 @@ import{unsafeCSS as e,css as t,LitElement as i,html as s,nothing as o}from"lit";
       flex: 0 0 auto;
     }
 
+    :host([variant="inside"]) .input-inside-main:has(.chip:not([single-select])) {
+      justify-content: center;
+      align-self: center;
+      padding-block: 0;
+      gap: 2px;
+    }
+
+    :host([variant="inside"]) .input-inside-row:has(.chip:not([single-select])) {
+      min-height: 0;
+      height: auto;
+      align-items: center;
+    }
+
+    :host([variant="inside"]) .field-main:has(.chip:not([single-select])) {
+      align-self: center;
+      height: auto;
+      min-height: 0;
+    }
+
     /* Match sky-input: label + value share pad-x; zero start when left icon present */
     :host([variant="inside"]) .input-inside-main > .label,
     :host([variant="inside"]) .chip-container,
@@ -777,6 +814,7 @@ import{unsafeCSS as e,css as t,LitElement as i,html as s,nothing as o}from"lit";
       height: auto;
       min-height: var(--sky-input-height-inside);
       padding-block: var(--sky-input-pad-y-sm, 0px);
+      align-items: center;
     }
 
     :host([variant="inside"][compact]) .input-wrapper,
@@ -784,6 +822,14 @@ import{unsafeCSS as e,css as t,LitElement as i,html as s,nothing as o}from"lit";
       min-height: var(--sky-input-height-inside-compact);
     }
 
+    :host([variant="inside"]) .input-wrapper:has(.chip:not([single-select])) {
+      padding-block: 4px;
+    }
+
+    :host([variant="inside"][compact]) .input-wrapper:has(.chip:not([single-select])) {
+      padding-block: 2px;
+    }
+
     :host([compact]) .placeholder-label {
       font-size: var(--sky-font-size-sm);
     }
@@ -817,14 +863,31 @@ import{unsafeCSS as e,css as t,LitElement as i,html as s,nothing as o}from"lit";
       width: 100%;
       min-width: 0;
       max-width: 100%;
+      min-height: 0;
+      height: 100%;
       flex-wrap: nowrap;
       align-items: center;
+      align-self: stretch;
       overflow: hidden;
       box-sizing: border-box;
       margin: 0;
+      line-height: 1;
+      padding-block: 4px;
       padding-inline: var(--sky-input-pad-x) var(--sky-input-pad-x-sm);
     }
 
+    :host([compact]) .chip-container,
+    .chip-container[compact] {
+      gap: 4px;
+      padding-block: 2px;
+    }
+
+    :host([variant="inside"]) .chip-container {
+      height: auto;
+      align-self: center;
+      padding-block: 0;
+    }
+
     .input-wrapper:has(.icon-slot[filled].left) .chip-container {
       padding-inline-start: var(--sky-input-pad-x-sm);
     }
@@ -860,10 +923,6 @@ import{unsafeCSS as e,css as t,LitElement as i,html as s,nothing as o}from"lit";
       display: none;
     }
 
-    .chip-container[compact] {
-      gap: 4px;
-    }
-
     .chip {
       background-color: var(--sky-glass-primary);
       border-radius: var(--sky-radius-primary);
@@ -874,6 +933,7 @@ import{unsafeCSS as e,css as t,LitElement as i,html as s,nothing as o}from"lit";
       line-height: 1;
       display: inline-flex;
       align-items: center;
+      align-self: center;
       gap: 4px;
       flex: 0 1 auto;
       max-width: 100%;