@sky.ui/core 0.0.38 → 0.0.40

package/dist/sky-chip/sky-chip.js

@@ -1,37 +1,41 @@
-import{css as o,LitElement as t,nothing as e,html as i}from"lit";import{property as r,customElement as s}from"lit/decorators.js";import{when as n}from"lit/directives/when.js";import{styleMap as a}from"lit/directives/style-map.js";import{classMap as l}from"lit/directives/class-map.js";import{resolveColor as c,resolveTextColorForToken as p,isDefaultColorToken as h,resolveInkColorForToken as d,resolveAccentColorForToken as y}from"../helper/utils/color-resolver.js";import{resolveRadius as f}from"../helper/utils/size-resolver.js";import{SkyIcon as u}from"../sky-icon/sky-icon.js";var g=Object.defineProperty,v=Object.getOwnPropertyDescriptor,b=(o,t,e,i)=>{for(var r,s=i>1?void 0:i?v(t,e):t,n=o.length-1;n>=0;n--)(r=o[n])&&(s=(i?r(t,e,s):r(s))||s);return i&&s&&g(t,e,s),s};let m=class extends t{constructor(){super(...arguments),this.label="",this.removable=!1,this.color="primary",this.radius="full",this.size="md",this.iconL=null,this.iconR=null,this.loading=!1,this.disabled=!1,this.variant="flat",this._onSlotChange=()=>{this.requestUpdate()}}updated(){const o=c(this.color),t=p(this.color);this.style.setProperty("--chip-bg-color",o),this.style.setProperty("--chip-text-color",t),h(this.color)?(this.style.setProperty("--chip-ink-color",d(this.color)),this.style.setProperty("--chip-accent-color",y(this.color)),this.style.setProperty("--chip-fill-color","var(--sky-hover-tertiary)")):(this.style.removeProperty("--chip-ink-color"),this.style.removeProperty("--chip-accent-color"),this.style.removeProperty("--chip-fill-color"))}_resolveSize(o){const t={xs:{padding:"2px 4px",fontSize:"11px"},sm:{padding:"3px 6px",fontSize:"12px"},md:{padding:"4px 8px",fontSize:"13px"},lg:{padding:"5px 10px",fontSize:"14px"},xl:{padding:"6px 12px",fontSize:"15px"}};if(t[o])return t[o];const e=String(o).trim().match(/^([\d.]+)(px|rem|em)?$/i),i=e?.[2]||"px",r=e?parseFloat(e[1]):13,s=`${r}${i}`,n=(o,t,e)=>Math.max(t,Math.min(e,o)),a=n(.4*r,2,10),l=n(.8*r,6,16),c=o=>`${Math.round(100*o)/100}${i}`;return{padding:`${c(a)} ${c(l)}`,fontSize:s}}removeChip(){const o=new CustomEvent("chip-removed",{detail:{label:this.label},bubbles:!0,composed:!0});this.dispatchEvent(o),this.remove()}_slotHasMeaningfulContent(o){return o.assignedNodes({flatten:!0}).some(o=>o.nodeType===Node.ELEMENT_NODE||(o.textContent??"").trim().length>0)}_hasPrefixSlotContent(){if(this.querySelector('[slot="prefix"]'))return!0;const o=this.shadowRoot?.querySelector('slot[name="prefix"]');return!!o&&this._slotHasMeaningfulContent(o)}_hasSuffixSlotContent(){if(this.querySelector('[slot="suffix"]'))return!0;const o=this.shadowRoot?.querySelector('slot[name="suffix"]');return!!o&&this._slotHasMeaningfulContent(o)}_hasDefaultSlotContent(){for(const o of Array.from(this.childNodes)){if(o.nodeType===Node.ELEMENT_NODE){const t=o.getAttribute("slot");if("prefix"===t||"suffix"===t)continue;return!0}if((o.textContent??"").trim().length>0)return!0}const o=this.shadowRoot?.querySelector("slot:not([name])");return!!o&&this._slotHasMeaningfulContent(o)}render(){const o=this._resolveSize(this.size),t={padding:o.padding,borderRadius:f(this.radius),fontSize:o.fontSize};return i`
+import{unsafeCSS as o,css as t,LitElement as e,nothing as i,html as r}from"lit";import{property as s,customElement as n}from"lit/decorators.js";import{when as a}from"lit/directives/when.js";import{styleMap as l}from"lit/directives/style-map.js";import{classMap as c}from"lit/directives/class-map.js";import{resolveColor as p,resolveTextColorForToken as h,isDefaultColorToken as d,resolveInkColorForToken as y,resolveAccentColorForToken as f}from"../helper/utils/color-resolver.js";import{cssOnFillEnhance as u}from"../helper/utils/contrast-color.js";import{resolveRadius as g}from"../helper/utils/size-resolver.js";import{SkyIcon as v}from"../sky-icon/sky-icon.js";var b=Object.defineProperty,m=Object.getOwnPropertyDescriptor,x=(o,t,e,i)=>{for(var r,s=i>1?void 0:i?m(t,e):t,n=o.length-1;n>=0;n--)(r=o[n])&&(s=(i?r(t,e,s):r(s))||s);return i&&s&&b(t,e,s),s};let k=class extends e{constructor(){super(...arguments),this.label="",this.removable=!1,this.color="primary",this.radius="full",this.size="md",this.iconL=null,this.iconR=null,this.loading=!1,this.disabled=!1,this.variant="flat",this._onSlotChange=()=>{this.requestUpdate()}}updated(){const o=p(this.color),t=h(this.color);this.style.setProperty("--chip-bg-color",o),this.style.setProperty("--chip-text-color",t),d(this.color)?(this.style.setProperty("--chip-ink-color",y(this.color)),this.style.setProperty("--chip-accent-color",f(this.color)),this.style.setProperty("--chip-fill-color","var(--sky-hover-tertiary)")):(this.style.removeProperty("--chip-ink-color"),this.style.removeProperty("--chip-accent-color"),this.style.removeProperty("--chip-fill-color"))}_resolveSize(o){const t={xs:{padding:"2px 4px",fontSize:"11px"},sm:{padding:"3px 6px",fontSize:"12px"},md:{padding:"4px 8px",fontSize:"13px"},lg:{padding:"5px 10px",fontSize:"14px"},xl:{padding:"6px 12px",fontSize:"15px"}};if(t[o])return t[o];const e=String(o).trim().match(/^([\d.]+)(px|rem|em)?$/i),i=e?.[2]||"px",r=e?parseFloat(e[1]):13,s=`${r}${i}`,n=(o,t,e)=>Math.max(t,Math.min(e,o)),a=n(.4*r,2,10),l=n(.8*r,6,16),c=o=>`${Math.round(100*o)/100}${i}`;return{padding:`${c(a)} ${c(l)}`,fontSize:s}}removeChip(){const o=new CustomEvent("chip-removed",{detail:{label:this.label},bubbles:!0,composed:!0});this.dispatchEvent(o),this.remove()}_slotHasMeaningfulContent(o){return o.assignedNodes({flatten:!0}).some(o=>o.nodeType===Node.ELEMENT_NODE||(o.textContent??"").trim().length>0)}_hasPrefixSlotContent(){if(this.querySelector('[slot="prefix"]'))return!0;const o=this.shadowRoot?.querySelector('slot[name="prefix"]');return!!o&&this._slotHasMeaningfulContent(o)}_hasSuffixSlotContent(){if(this.querySelector('[slot="suffix"]'))return!0;const o=this.shadowRoot?.querySelector('slot[name="suffix"]');return!!o&&this._slotHasMeaningfulContent(o)}_hasDefaultSlotContent(){for(const o of Array.from(this.childNodes)){if(o.nodeType===Node.ELEMENT_NODE){const t=o.getAttribute("slot");if("prefix"===t||"suffix"===t)continue;return!0}if((o.textContent??"").trim().length>0)return!0}const o=this.shadowRoot?.querySelector("slot:not([name])");return!!o&&this._slotHasMeaningfulContent(o)}render(){const o=this._resolveSize(this.size),t={padding:o.padding,borderRadius:g(this.radius),fontSize:o.fontSize};return r`
       <div
-        class=${l({chip:!0,[this.variant]:!0,loading:this.loading})}
-        style=${a(t)}
+        class=${c({chip:!0,[this.variant]:!0,loading:this.loading})}
+        style=${l(t)}
         part="chip"
       >
         <slot name="prefix" @slotchange=${this._onSlotChange}></slot>
-        ${n(!this._hasPrefixSlotContent()&&this.iconL,()=>i`
-          <sky-icon class="icon" part="icon" icon="${this.iconL}"></sky-icon>
-        `)}
+        ${a(!this._hasPrefixSlotContent()&&this.iconL,()=>r`
+            <sky-icon class="icon" part="icon" icon="${this.iconL}"></sky-icon>
+          `)}
         <slot @slotchange=${this._onSlotChange}></slot>
-        ${this._hasDefaultSlotContent()?e:this.label}
+        ${this._hasDefaultSlotContent()?i:this.label}
         <slot name="suffix" @slotchange=${this._onSlotChange}></slot>
-        ${n(!this._hasSuffixSlotContent()&&this.iconR,()=>i`
-          <sky-icon class="icon icon-right" part="icon" icon="${this.iconR}"></sky-icon>
-        `)}
-        ${n(this.removable,()=>i`
-          <button
-            class="close-button"
-            part="close-button"
-            type="button"
-            aria-label="Remove chip"
-            @click=${this.removeChip}
-          >
-            <sky-icon icon="ion:close"></sky-icon>
-          </button>
-        `)}
-        ${n(this.loading,()=>i`
-          <div class="loading-overlay" part="loading-overlay">
-            <div class="loading-spinner" part="loading-spinner"></div>
-          </div>
-        `)}
+        ${a(!this._hasSuffixSlotContent()&&this.iconR,()=>r`
+            <sky-icon
+              class="icon icon-right"
+              part="icon"
+              icon="${this.iconR}"
+            ></sky-icon>
+          `)}
+        ${a(this.removable,()=>r`
+            <button
+              class="close-button"
+              part="close-button"
+              type="button"
+              aria-label="Remove chip"
+              @click=${this.removeChip}
+            >
+              <sky-icon icon="ion:close"></sky-icon>
+            </button>
+          `)}
+        ${a(this.loading,()=>r`
+            <div class="loading-overlay" part="loading-overlay">
+              <div class="loading-spinner" part="loading-spinner"></div>
+            </div>
+          `)}
       </div>
-    `}};m.dependencies={"sky-icon":u},m.styles=o`
+    `}};k.dependencies={"sky-icon":v},k.styles=t`
     :host {
       display: inline-block;
       font-family: var(--sky-font);
@@ -52,8 +56,11 @@ import{css as o,LitElement as t,nothing as e,html as i}from"lit";import{property
       border-radius: var(--sky-radius-secondary);
       color: var(--chip-text-color);
       font-weight: var(--sky-font-weight-medium, 500);
-      transition: background-color 0.3s ease, color 0.3s ease,
-        box-shadow 0.2s ease, transform 0.2s ease;
+      transition:
+        background-color 0.3s ease,
+        color 0.3s ease,
+        box-shadow 0.2s ease,
+        transform 0.2s ease;
       cursor: pointer;
       background-color: var(--chip-bg-color);
     }
@@ -73,7 +80,9 @@ import{css as o,LitElement as t,nothing as e,html as i}from"lit";import{property
       border-radius: var(--sky-radius-full);
       cursor: pointer;
       color: var(--sky-text-primary);
-      transition: color 0.2s ease, background-color 0.2s ease;
+      transition:
+        color 0.2s ease,
+        background-color 0.2s ease;
     }
 
     .close-button sky-icon {
@@ -99,7 +108,7 @@ import{css as o,LitElement as t,nothing as e,html as i}from"lit";import{property
     }
 
     .close-button:hover sky-icon,
-    .close-button:focus-visible sky-icon{
+    .close-button:focus-visible sky-icon {
       color: var(--sky-danger-primary);
       outline: none;
     }
@@ -117,8 +126,8 @@ import{css as o,LitElement as t,nothing as e,html as i}from"lit";import{property
       height: 1em;
     }
 
-    ::slotted([slot="prefix"]),
-    ::slotted([slot="suffix"]) {
+    ::slotted([slot='prefix']),
+    ::slotted([slot='suffix']) {
       display: inline-flex;
       align-items: center;
     }
@@ -136,7 +145,7 @@ import{css as o,LitElement as t,nothing as e,html as i}from"lit";import{property
     .loading-spinner {
       width: 14px;
       height: 14px;
-      border: 2px solid var(--sky-text-white);
+      border: 2px solid var(--sky-border-light, var(--sky-text-tertiary));
       border-top-color: var(--chip-bg-color);
       border-radius: var(--sky-radius-full);
       animation: spin 0.8s linear infinite;
@@ -214,7 +223,7 @@ import{css as o,LitElement as t,nothing as e,html as i}from"lit";import{property
     }
 
     .chip.dot::before {
-      content: "";
+      content: '';
       position: absolute;
       left: var(--sky-space-1\\.5, 6px);
       top: 50%;
@@ -224,5 +233,8 @@ import{css as o,LitElement as t,nothing as e,html as i}from"lit";import{property
       border-radius: var(--sky-radius-full);
       background-color: var(--chip-accent-color, var(--chip-bg-color));
     }
-  `,b([r({type:String})],m.prototype,"label",2),b([r({type:Boolean})],m.prototype,"removable",2),b([r({type:String})],m.prototype,"color",2),b([r({type:String})],m.prototype,"radius",2),b([r({type:String})],m.prototype,"size",2),b([r({type:String})],m.prototype,"iconL",2),b([r({type:String})],m.prototype,"iconR",2),b([r({type:Boolean})],m.prototype,"loading",2),b([r({type:Boolean,reflect:!0})],m.prototype,"disabled",2),b([r({type:String,reflect:!0})],m.prototype,"variant",2),m=b([s("sky-chip")],m);export{m as SkyChip};
+
+    /* Solid / shadow chips: enhance label + icon FG against fill. */
+    ${o(u([{selector:".chip.solid, .chip.shadow",fillVar:"--chip-bg-color"},{selector:".chip.solid .icon, .chip.shadow .icon",fillVar:"--chip-bg-color"}]))}
+  `,x([s({type:String})],k.prototype,"label",2),x([s({type:Boolean})],k.prototype,"removable",2),x([s({type:String})],k.prototype,"color",2),x([s({type:String})],k.prototype,"radius",2),x([s({type:String})],k.prototype,"size",2),x([s({type:String})],k.prototype,"iconL",2),x([s({type:String})],k.prototype,"iconR",2),x([s({type:Boolean})],k.prototype,"loading",2),x([s({type:Boolean,reflect:!0})],k.prototype,"disabled",2),x([s({type:String,reflect:!0})],k.prototype,"variant",2),k=x([n("sky-chip")],k);export{k as SkyChip};
 //# sourceMappingURL=sky-chip.js.map

package/dist/sky-chip/sky-chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"sky-chip.js","sources":["../../src/sky-chip/sky-chip.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from \"lit\";\r\nimport { customElement, property } from \"lit/decorators.js\";\r\nimport { when } from \"lit/directives/when.js\";\r\nimport { styleMap } from \"lit/directives/style-map.js\";\r\nimport { classMap } from \"lit/directives/class-map.js\";\r\nimport {\r\n  isDefaultColorToken,\r\n  resolveAccentColorForToken,\r\n  resolveColor,\r\n  resolveInkColorForToken,\r\n  resolveTextColorForToken,\r\n} from \"../helper/utils/color-resolver\";\r\nimport { resolveRadius } from \"../helper/utils/size-resolver\";\r\nimport { SkyIcon } from \"../sky-icon/sky-icon.js\";\r\n\r\nexport type SkyChipVariant =\r\n  | \"solid\"\r\n  | \"flat\"\r\n  | \"shadow\"\r\n  | \"bordered\"\r\n  | \"faded\"\r\n  | \"light\"\r\n  | \"dot\";\r\nexport type SkyChipRemovedEventDetail = { label: string };\r\n\r\n/**\r\n * @element sky-chip\r\n *\r\n * @summary Customizable chip for tags or selections with icon support, removable action, loading state, and visual variants.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://library.sky-ui.com/components/chip\r\n * @dependency sky-icon\r\n *\r\n * @slot - Default slot for the chip label or any other content.\r\n * @slot prefix - Optional prefix content that can be placed before the label.\r\n * @slot suffix - Optional suffix content that can be placed after the label.\r\n *\r\n * @csspart chip - The visual representation of the chip component.\r\n * @csspart icon - The icons displayed within the chip.\r\n * @csspart close-button - The button for removing the chip.\r\n * @csspart loading-spinner - The spinner that appears during loading.\r\n * @csspart error-message - The error message displayed for invalid chips.\r\n *\r\n * @property {string} label - The label displayed on the chip. Default: `\"\"`.\r\n * @property {boolean} removable - Whether the chip can be removed by the user. Default: `false`.\r\n * @property {string} color - The background color of the chip, can accept tokens or custom CSS color. Default: `\"primary\"`.\r\n * @property {string} radius - The border radius of the chip. Default: `\"full\"`.\r\n * @property {string} size - The size of the chip, which affects padding and font size. Default: `\"md\"`.\r\n * @property {string} iconL - Left icon; shown only when the `prefix` slot is empty. Default: `null`.\r\n * @property {string} iconR - Right icon; shown only when the `suffix` slot is empty. Default: `null`.\r\n * @property {boolean} loading - Whether the chip is in a loading state. Default: `false`.\r\n * @property {boolean} disabled - Whether the chip is disabled. Default: `false`.\r\n * @property {SkyChipVariant} variant - Visual style variant. Default: `\"flat\"`.\r\n * @method removeChip Dispatches `chip-removed` and removes the chip from the DOM.\r\n *\r\n * @fires {CustomEvent<SkyChipRemovedEventDetail>} chip-removed - Fired when the chip is removed by user action.\r\n *\r\n * @Behavior\r\n * - Uses default slot content when present, otherwise falls back to `label`.\r\n * - `iconL` / `iconR` render only when `prefix` / `suffix` slots have no meaningful content.\r\n * - Emits `chip-removed` and removes itself when removable close action is triggered.\r\n * - Resolves color tokens and radius/size presets to CSS values at render time.\r\n *\r\n * @example\r\n * ```html\r\n * <sky-chip label=\"Active Filter\" removable iconl=\"ion:funnel\" variant=\"light\"></sky-chip>\r\n * ```\r\n * ```vue\r\n * <template>\r\n *   <sky-chip label=\"Active Filter\" removable iconl=\"ion:funnel\" variant=\"light\"></sky-chip>\r\n * </template>\r\n * ```\r\n * ```jsx\r\n * export default function Demo() {\r\n *   return <sky-chip label=\"Active Filter\" removable iconl=\"ion:funnel\" variant=\"light\"></sky-chip>;\r\n * }\r\n * ```\r\n */\r\n@customElement(\"sky-chip\")\r\nexport class SkyChip extends LitElement {\r\n\r\n  static dependencies: Record<string, CustomElementConstructor> = {\r\n    \"sky-icon\": SkyIcon,\r\n  };\r\n\r\n  @property({ type: String }) label: string = \"\";\r\n  @property({ type: Boolean }) removable: boolean = false;\r\n\r\n  /** Accepts preset tokens OR any valid CSS color (e.g., #0af, rgb(), var(--x)) */\r\n  @property({ type: String }) color: string = \"primary\";\r\n\r\n  /** Radius can be any CSS radius value */\r\n  @property({ type: String }) radius: string = \"full\";\r\n\r\n  /** Size controls padding + font-size (xs, sm, md, lg, xl or numeric like \"14px\") */\r\n  @property({ type: String }) size: string = \"md\";\r\n\r\n  @property({ type: String }) iconL: string | null = null;\r\n  @property({ type: String }) iconR: string | null = null;\r\n  @property({ type: Boolean }) loading: boolean = false;\r\n  @property({ type: Boolean, reflect: true }) disabled: boolean = false;\r\n  @property({ type: String, reflect: true }) variant: SkyChipVariant = \"flat\";\r\n\r\n  static override styles = css`\r\n    :host {\r\n      display: inline-block;\r\n      font-family: var(--sky-font);\r\n      z-index: 1;\r\n    }\r\n\r\n    :host([disabled]) {\r\n      pointer-events: none;\r\n      opacity: var(--sky-opacity-disabled, 0.6);\r\n    }\r\n\r\n    .chip {\r\n      position: relative;\r\n      display: flex;\r\n      gap: 2px;\r\n      width: max-content;\r\n      align-items: center;\r\n      border-radius: var(--sky-radius-secondary);\r\n      color: var(--chip-text-color);\r\n      font-weight: var(--sky-font-weight-medium, 500);\r\n      transition: background-color 0.3s ease, color 0.3s ease,\r\n        box-shadow 0.2s ease, transform 0.2s ease;\r\n      cursor: pointer;\r\n      background-color: var(--chip-bg-color);\r\n    }\r\n\r\n    .close-button {\r\n      position: relative;\r\n      display: flex;\r\n      height: 18px;\r\n      width: 18px;\r\n      justify-content: center;\r\n      font-size: inherit;\r\n      align-items: center;\r\n      background-color: var(--sky-hover-primary);\r\n      backdrop-filter: none;\r\n      -webkit-backdrop-filter: none;\r\n      border: none;\r\n      border-radius: var(--sky-radius-full);\r\n      cursor: pointer;\r\n      color: var(--sky-text-primary);\r\n      transition: color 0.2s ease, background-color 0.2s ease;\r\n    }\r\n\r\n    .close-button sky-icon {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      line-height: 1;\r\n      transition: color 0.3s ease;\r\n    }\r\n\r\n    :dir(rtl) .close-button {\r\n      margin-right: var(--sky-space-1, 5px);\r\n      margin-left: unset;\r\n    }\r\n\r\n    .close-button:hover {\r\n      color: var(--sky-danger-primary);\r\n    }\r\n\r\n    .close-button:focus-visible {\r\n      outline: none;\r\n      box-shadow: var(--sky-focus-ring);\r\n    }\r\n\r\n    .close-button:hover sky-icon,\r\n    .close-button:focus-visible sky-icon{\r\n      color: var(--sky-danger-primary);\r\n      outline: none;\r\n    }\r\n\r\n    .icon {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      color: var(--chip-text-color);\r\n    }\r\n\r\n    sky-icon {\r\n      display: inline-block;\r\n      width: 1em;\r\n      height: 1em;\r\n    }\r\n\r\n    ::slotted([slot=\"prefix\"]),\r\n    ::slotted([slot=\"suffix\"]) {\r\n      display: inline-flex;\r\n      align-items: center;\r\n    }\r\n\r\n    .loading-overlay {\r\n      position: absolute;\r\n      inset: 0;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      background: var(--sky-overlay-primary);\r\n      border-radius: inherit;\r\n    }\r\n\r\n    .loading-spinner {\r\n      width: 14px;\r\n      height: 14px;\r\n      border: 2px solid var(--sky-text-white);\r\n      border-top-color: var(--chip-bg-color);\r\n      border-radius: var(--sky-radius-full);\r\n      animation: spin 0.8s linear infinite;\r\n    }\r\n\r\n    @keyframes spin {\r\n      from {\r\n        transform: rotate(0deg);\r\n      }\r\n      to {\r\n        transform: rotate(360deg);\r\n      }\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      .chip,\r\n      .close-button,\r\n      .close-button sky-icon {\r\n        transition: none;\r\n      }\r\n      .loading-spinner {\r\n        animation: none;\r\n      }\r\n    }\r\n\r\n    .chip.bordered {\r\n      border: 1px solid var(--chip-ink-color, var(--chip-bg-color));\r\n      color: var(--chip-ink-color, var(--chip-bg-color));\r\n      background: transparent;\r\n    }\r\n\r\n    .chip.light {\r\n      background: transparent;\r\n      color: var(--chip-ink-color, var(--chip-bg-color));\r\n    }\r\n\r\n    .chip.flat {\r\n      box-shadow: none;\r\n      background: color-mix(\r\n        in srgb,\r\n        var(--chip-fill-color, var(--chip-bg-color)) 20%,\r\n        transparent\r\n      );\r\n      color: var(--chip-ink-color, var(--chip-bg-color));\r\n    }\r\n\r\n    .chip.faded {\r\n      background-color: var(--sky-glass-primary);\r\n      border: 1px solid var(--sky-text-tertiary);\r\n      color: var(--chip-ink-color, var(--chip-bg-color));\r\n    }\r\n\r\n    .chip.shadow {\r\n      box-shadow: var(--sky-box-shadow-primary);\r\n    }\r\n\r\n    .chip.shadow:hover {\r\n      box-shadow: var(--sky-box-shadow-hover);\r\n    }\r\n\r\n    .chip.faded .icon,\r\n    .chip.flat .icon,\r\n    .chip.light .icon,\r\n    .chip.dot .icon,\r\n    .chip.bordered .icon {\r\n      color: var(--chip-ink-color, var(--chip-bg-color));\r\n    }\r\n\r\n    .chip.dot {\r\n      padding-left: var(--sky-space-5, 20px) !important;\r\n      position: relative;\r\n      background-color: transparent;\r\n      border: 1px solid var(--sky-text-tertiary);\r\n      color: var(--sky-text-primary);\r\n    }\r\n\r\n    .chip.dot::before {\r\n      content: \"\";\r\n      position: absolute;\r\n      left: var(--sky-space-1\\\\.5, 6px);\r\n      top: 50%;\r\n      transform: translateY(-50%);\r\n      width: var(--sky-space-2, 8px);\r\n      height: var(--sky-space-2, 8px);\r\n      border-radius: var(--sky-radius-full);\r\n      background-color: var(--chip-accent-color, var(--chip-bg-color));\r\n    }\r\n  `;\r\n\r\n  /** Updates host CSS variables from current color token/value. */\r\n  protected override updated(): void {\r\n    const bgColor = resolveColor(this.color);\r\n    const textColor = resolveTextColorForToken(this.color);\r\n\r\n    this.style.setProperty(\"--chip-bg-color\", bgColor);\r\n    this.style.setProperty(\"--chip-text-color\", textColor);\r\n\r\n    if (isDefaultColorToken(this.color)) {\r\n      this.style.setProperty(\"--chip-ink-color\", resolveInkColorForToken(this.color));\r\n      this.style.setProperty(\r\n        \"--chip-accent-color\",\r\n        resolveAccentColorForToken(this.color),\r\n      );\r\n      this.style.setProperty(\"--chip-fill-color\", \"var(--sky-hover-tertiary)\");\r\n    } else {\r\n      this.style.removeProperty(\"--chip-ink-color\");\r\n      this.style.removeProperty(\"--chip-accent-color\");\r\n      this.style.removeProperty(\"--chip-fill-color\");\r\n    }\r\n  }\r\n\r\n  /** Size resolver similar to button: controls padding + font-size */\r\n  private _resolveSize(\r\n    input: string\r\n  ): {\r\n    padding: string;\r\n    fontSize: string;\r\n  } {\r\n    const presets: Record<string, { padding: string; fontSize: string }> = {\r\n      xs: { padding: \"2px 4px\", fontSize: \"11px\" },\r\n      sm: { padding: \"3px 6px\", fontSize: \"12px\" },\r\n      md: { padding: \"4px 8px\", fontSize: \"13px\" },\r\n      lg: { padding: \"5px 10px\", fontSize: \"14px\" },\r\n      xl: { padding: \"6px 12px\", fontSize: \"15px\" },\r\n    };\r\n\r\n    if (presets[input]) return presets[input];\r\n\r\n    const m = String(input).trim().match(/^([\\d.]+)(px|rem|em)?$/i);\r\n    const unit = m?.[2] || \"px\";\r\n    const fsNum = m ? parseFloat(m[1]) : 13;\r\n    const fs = `${fsNum}${unit}`;\r\n\r\n    const clamp = (n: number, min: number, max: number) =>\r\n      Math.max(min, Math.min(max, n));\r\n\r\n    const py = clamp(fsNum * 0.4, 2, 10);\r\n    const px = clamp(fsNum * 0.8, 6, 16);\r\n\r\n    const to = (n: number) => `${Math.round(n * 100) / 100}${unit}`;\r\n\r\n    return {\r\n      padding: `${to(py)} ${to(px)}`,\r\n      fontSize: fs,\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Dispatches `chip-removed` and removes the chip from the DOM.\r\n   *\r\n   * @returns {void}\r\n   */\r\n  public removeChip(): void {\r\n    const removeEvent = new CustomEvent<SkyChipRemovedEventDetail>(\"chip-removed\", {\r\n      detail: { label: this.label },\r\n      bubbles: true,\r\n      composed: true,\r\n    });\r\n    this.dispatchEvent(removeEvent);\r\n    this.remove();\r\n  }\r\n\r\n  private _slotHasMeaningfulContent(slotEl: HTMLSlotElement): boolean {\r\n    const nodes = slotEl.assignedNodes({ flatten: true });\r\n    return nodes.some((n) =>\r\n      n.nodeType === Node.ELEMENT_NODE\r\n        ? true\r\n        : (n.textContent ?? \"\").trim().length > 0\r\n    );\r\n  }\r\n\r\n  /** Light DOM check works before the shadow tree exists (first render). */\r\n  private _hasPrefixSlotContent(): boolean {\r\n    if (this.querySelector('[slot=\"prefix\"]')) return true;\r\n    const slot = this.shadowRoot?.querySelector(\r\n      'slot[name=\"prefix\"]',\r\n    ) as HTMLSlotElement | null;\r\n    return slot ? this._slotHasMeaningfulContent(slot) : false;\r\n  }\r\n\r\n  private _hasSuffixSlotContent(): boolean {\r\n    if (this.querySelector('[slot=\"suffix\"]')) return true;\r\n    const slot = this.shadowRoot?.querySelector(\r\n      'slot[name=\"suffix\"]',\r\n    ) as HTMLSlotElement | null;\r\n    return slot ? this._slotHasMeaningfulContent(slot) : false;\r\n  }\r\n\r\n  private _hasDefaultSlotContent(): boolean {\r\n    for (const n of Array.from(this.childNodes)) {\r\n      if (n.nodeType === Node.ELEMENT_NODE) {\r\n        const slot = (n as Element).getAttribute(\"slot\");\r\n        if (slot === \"prefix\" || slot === \"suffix\") continue;\r\n        return true;\r\n      }\r\n      if ((n.textContent ?? \"\").trim().length > 0) return true;\r\n    }\r\n    const slot = this.shadowRoot?.querySelector(\r\n      \"slot:not([name])\",\r\n    ) as HTMLSlotElement | null;\r\n    return slot ? this._slotHasMeaningfulContent(slot) : false;\r\n  }\r\n\r\n  private _onSlotChange = (): void => {\r\n    this.requestUpdate();\r\n  };\r\n\r\n  override render() {\r\n    const sizeDef = this._resolveSize(this.size);\r\n    const chipStyle = {\r\n      padding: sizeDef.padding,\r\n      borderRadius: resolveRadius(this.radius),\r\n      fontSize: sizeDef.fontSize,\r\n    };\r\n\r\n    return html`\r\n      <div\r\n        class=${classMap({\r\n          chip: true,\r\n          [this.variant]: true,\r\n          loading: this.loading,\r\n        })}\r\n        style=${styleMap(chipStyle)}\r\n        part=\"chip\"\r\n      >\r\n        <slot name=\"prefix\" @slotchange=${this._onSlotChange}></slot>\r\n        ${when(!this._hasPrefixSlotContent() && this.iconL, () => html`\r\n          <sky-icon class=\"icon\" part=\"icon\" icon=\"${this.iconL!}\"></sky-icon>\r\n        `)}\r\n        <slot @slotchange=${this._onSlotChange}></slot>\r\n        ${this._hasDefaultSlotContent() ? nothing : this.label}\r\n        <slot name=\"suffix\" @slotchange=${this._onSlotChange}></slot>\r\n        ${when(!this._hasSuffixSlotContent() && this.iconR, () => html`\r\n          <sky-icon class=\"icon icon-right\" part=\"icon\" icon=\"${this.iconR!}\"></sky-icon>\r\n        `)}\r\n        ${when(this.removable, () => html`\r\n          <button\r\n            class=\"close-button\"\r\n            part=\"close-button\"\r\n            type=\"button\"\r\n            aria-label=\"Remove chip\"\r\n            @click=${this.removeChip}\r\n          >\r\n            <sky-icon icon=\"ion:close\"></sky-icon>\r\n          </button>\r\n        `)}\r\n        ${when(this.loading, () => html`\r\n          <div class=\"loading-overlay\" part=\"loading-overlay\">\r\n            <div class=\"loading-spinner\" part=\"loading-spinner\"></div>\r\n          </div>\r\n        `)}\r\n      </div>\r\n    `;\r\n  }\r\n}"],"names":["SkyChip","LitElement","constructor","super","arguments","this","label","removable","color","radius","size","iconL","iconR","loading","disabled","variant","_onSlotChange","requestUpdate","updated","bgColor","resolveColor","textColor","resolveTextColorForToken","style","setProperty","isDefaultColorToken","resolveInkColorForToken","resolveAccentColorForToken","removeProperty","_resolveSize","input","presets","xs","padding","fontSize","sm","md","lg","xl","m","String","trim","match","unit","fsNum","parseFloat","fs","clamp","n","min","max","Math","py","px","to","round","removeChip","removeEvent","CustomEvent","detail","bubbles","composed","dispatchEvent","remove","_slotHasMeaningfulContent","slotEl","assignedNodes","flatten","some","nodeType","Node","ELEMENT_NODE","textContent","length","_hasPrefixSlotContent","querySelector","slot","shadowRoot","_hasSuffixSlotContent","_hasDefaultSlotContent","Array","from","childNodes","getAttribute","render","sizeDef","chipStyle","borderRadius","resolveRadius","html","classMap","chip","styleMap","when","nothing","dependencies","SkyIcon","styles","css","__decorateClass","property","type","prototype","Boolean","reflect","customElement"],"mappings":"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"}
+{"version":3,"file":"sky-chip.js","sources":["../../src/sky-chip/sky-chip.ts"],"sourcesContent":["import { LitElement, html, css, nothing, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { when } from 'lit/directives/when.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport {\n  isDefaultColorToken,\n  resolveAccentColorForToken,\n  resolveColor,\n  resolveInkColorForToken,\n  resolveTextColorForToken,\n} from '../helper/utils/color-resolver';\nimport { cssOnFillEnhance } from '../helper/utils/contrast-color';\nimport { resolveRadius } from '../helper/utils/size-resolver';\nimport { SkyIcon } from '../sky-icon/sky-icon.js';\n\nexport type SkyChipVariant =\n  'solid' | 'flat' | 'shadow' | 'bordered' | 'faded' | 'light' | 'dot';\nexport type SkyChipRemovedEventDetail = { label: string };\n\n/**\n * @element sky-chip\n *\n * @summary Customizable chip for tags or selections with icon support, removable action, loading state, and visual variants.\n *\n * @status stable\n * @since 1.0.0\n *\n * @documentation https://sky-ui.com/components/chip\n * @dependency sky-icon\n *\n * @slot - Default slot for the chip label or any other content.\n * @slot prefix - Optional prefix content that can be placed before the label.\n * @slot suffix - Optional suffix content that can be placed after the label.\n *\n * @csspart chip - The visual representation of the chip component.\n * @csspart icon - The icons displayed within the chip.\n * @csspart close-button - The button for removing the chip.\n * @csspart loading-spinner - The spinner that appears during loading.\n * @csspart error-message - The error message displayed for invalid chips.\n *\n * @property {string} label - The label displayed on the chip. Default: `\"\"`.\n * @property {boolean} removable - Whether the chip can be removed by the user. Default: `false`.\n * @property {string} color - The background color of the chip, can accept tokens or custom CSS color. Default: `\"primary\"`.\n * @property {string} radius - The border radius of the chip. Default: `\"full\"`.\n * @property {string} size - The size of the chip, which affects padding and font size. Default: `\"md\"`.\n * @property {string} iconL - Left icon; shown only when the `prefix` slot is empty. Default: `null`.\n * @property {string} iconR - Right icon; shown only when the `suffix` slot is empty. Default: `null`.\n * @property {boolean} loading - Whether the chip is in a loading state. Default: `false`.\n * @property {boolean} disabled - Whether the chip is disabled. Default: `false`.\n * @property {SkyChipVariant} variant - Visual style variant. Default: `\"flat\"`.\n * @method removeChip Dispatches `chip-removed` and removes the chip from the DOM.\n *\n * @fires {CustomEvent<SkyChipRemovedEventDetail>} chip-removed - Fired when the chip is removed by user action.\n *\n * @Behavior\n * - Uses default slot content when present, otherwise falls back to `label`.\n * - `iconL` / `iconR` render only when `prefix` / `suffix` slots have no meaningful content.\n * - Emits `chip-removed` and removes itself when removable close action is triggered.\n * - Resolves color tokens and radius/size presets to CSS values at render time.\n *\n * @example\n * ```html\n * <sky-chip label=\"Active Filter\" removable iconl=\"ion:funnel\" variant=\"light\"></sky-chip>\n * ```\n * ```vue\n * <template>\n *   <sky-chip label=\"Active Filter\" removable iconl=\"ion:funnel\" variant=\"light\"></sky-chip>\n * </template>\n * ```\n * ```jsx\n * export default function Demo() {\n *   return <sky-chip label=\"Active Filter\" removable iconl=\"ion:funnel\" variant=\"light\"></sky-chip>;\n * }\n * ```\n */\n@customElement('sky-chip')\nexport class SkyChip extends LitElement {\n  static dependencies: Record<string, CustomElementConstructor> = {\n    'sky-icon': SkyIcon,\n  };\n\n  @property({ type: String }) label: string = '';\n  @property({ type: Boolean }) removable: boolean = false;\n\n  /** Accepts preset tokens OR any valid CSS color (e.g., #0af, rgb(), var(--x)) */\n  @property({ type: String }) color: string = 'primary';\n\n  /** Radius can be any CSS radius value */\n  @property({ type: String }) radius: string = 'full';\n\n  /** Size controls padding + font-size (xs, sm, md, lg, xl or numeric like \"14px\") */\n  @property({ type: String }) size: string = 'md';\n\n  @property({ type: String }) iconL: string | null = null;\n  @property({ type: String }) iconR: string | null = null;\n  @property({ type: Boolean }) loading: boolean = false;\n  @property({ type: Boolean, reflect: true }) disabled: boolean = false;\n  @property({ type: String, reflect: true }) variant: SkyChipVariant = 'flat';\n\n  static override styles = css`\n    :host {\n      display: inline-block;\n      font-family: var(--sky-font);\n      z-index: 1;\n    }\n\n    :host([disabled]) {\n      pointer-events: none;\n      opacity: var(--sky-opacity-disabled, 0.6);\n    }\n\n    .chip {\n      position: relative;\n      display: flex;\n      gap: 2px;\n      width: max-content;\n      align-items: center;\n      border-radius: var(--sky-radius-secondary);\n      color: var(--chip-text-color);\n      font-weight: var(--sky-font-weight-medium, 500);\n      transition:\n        background-color 0.3s ease,\n        color 0.3s ease,\n        box-shadow 0.2s ease,\n        transform 0.2s ease;\n      cursor: pointer;\n      background-color: var(--chip-bg-color);\n    }\n\n    .close-button {\n      position: relative;\n      display: flex;\n      height: 18px;\n      width: 18px;\n      justify-content: center;\n      font-size: inherit;\n      align-items: center;\n      background-color: var(--sky-hover-primary);\n      backdrop-filter: none;\n      -webkit-backdrop-filter: none;\n      border: none;\n      border-radius: var(--sky-radius-full);\n      cursor: pointer;\n      color: var(--sky-text-primary);\n      transition:\n        color 0.2s ease,\n        background-color 0.2s ease;\n    }\n\n    .close-button sky-icon {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 1;\n      transition: color 0.3s ease;\n    }\n\n    :dir(rtl) .close-button {\n      margin-right: var(--sky-space-1, 5px);\n      margin-left: unset;\n    }\n\n    .close-button:hover {\n      color: var(--sky-danger-primary);\n    }\n\n    .close-button:focus-visible {\n      outline: none;\n      box-shadow: var(--sky-focus-ring);\n    }\n\n    .close-button:hover sky-icon,\n    .close-button:focus-visible sky-icon {\n      color: var(--sky-danger-primary);\n      outline: none;\n    }\n\n    .icon {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: var(--chip-text-color);\n    }\n\n    sky-icon {\n      display: inline-block;\n      width: 1em;\n      height: 1em;\n    }\n\n    ::slotted([slot='prefix']),\n    ::slotted([slot='suffix']) {\n      display: inline-flex;\n      align-items: center;\n    }\n\n    .loading-overlay {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: var(--sky-overlay-primary);\n      border-radius: inherit;\n    }\n\n    .loading-spinner {\n      width: 14px;\n      height: 14px;\n      border: 2px solid var(--sky-border-light, var(--sky-text-tertiary));\n      border-top-color: var(--chip-bg-color);\n      border-radius: var(--sky-radius-full);\n      animation: spin 0.8s linear infinite;\n    }\n\n    @keyframes spin {\n      from {\n        transform: rotate(0deg);\n      }\n      to {\n        transform: rotate(360deg);\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .chip,\n      .close-button,\n      .close-button sky-icon {\n        transition: none;\n      }\n      .loading-spinner {\n        animation: none;\n      }\n    }\n\n    .chip.bordered {\n      border: 1px solid var(--chip-ink-color, var(--chip-bg-color));\n      color: var(--chip-ink-color, var(--chip-bg-color));\n      background: transparent;\n    }\n\n    .chip.light {\n      background: transparent;\n      color: var(--chip-ink-color, var(--chip-bg-color));\n    }\n\n    .chip.flat {\n      box-shadow: none;\n      background: color-mix(\n        in srgb,\n        var(--chip-fill-color, var(--chip-bg-color)) 20%,\n        transparent\n      );\n      color: var(--chip-ink-color, var(--chip-bg-color));\n    }\n\n    .chip.faded {\n      background-color: var(--sky-glass-primary);\n      border: 1px solid var(--sky-text-tertiary);\n      color: var(--chip-ink-color, var(--chip-bg-color));\n    }\n\n    .chip.shadow {\n      box-shadow: var(--sky-box-shadow-primary);\n    }\n\n    .chip.shadow:hover {\n      box-shadow: var(--sky-box-shadow-hover);\n    }\n\n    .chip.faded .icon,\n    .chip.flat .icon,\n    .chip.light .icon,\n    .chip.dot .icon,\n    .chip.bordered .icon {\n      color: var(--chip-ink-color, var(--chip-bg-color));\n    }\n\n    .chip.dot {\n      padding-left: var(--sky-space-5, 20px) !important;\n      position: relative;\n      background-color: transparent;\n      border: 1px solid var(--sky-text-tertiary);\n      color: var(--sky-text-primary);\n    }\n\n    .chip.dot::before {\n      content: '';\n      position: absolute;\n      left: var(--sky-space-1\\\\.5, 6px);\n      top: 50%;\n      transform: translateY(-50%);\n      width: var(--sky-space-2, 8px);\n      height: var(--sky-space-2, 8px);\n      border-radius: var(--sky-radius-full);\n      background-color: var(--chip-accent-color, var(--chip-bg-color));\n    }\n\n    /* Solid / shadow chips: enhance label + icon FG against fill. */\n    ${unsafeCSS(\n      cssOnFillEnhance([\n        {\n          selector: '.chip.solid, .chip.shadow',\n          fillVar: '--chip-bg-color',\n        },\n        {\n          selector: '.chip.solid .icon, .chip.shadow .icon',\n          fillVar: '--chip-bg-color',\n        },\n      ])\n    )}\n  `;\n\n  /** Updates host CSS variables from current color token/value. */\n  protected override updated(): void {\n    const bgColor = resolveColor(this.color);\n    const textColor = resolveTextColorForToken(this.color);\n\n    this.style.setProperty('--chip-bg-color', bgColor);\n    this.style.setProperty('--chip-text-color', textColor);\n\n    if (isDefaultColorToken(this.color)) {\n      this.style.setProperty(\n        '--chip-ink-color',\n        resolveInkColorForToken(this.color)\n      );\n      this.style.setProperty(\n        '--chip-accent-color',\n        resolveAccentColorForToken(this.color)\n      );\n      this.style.setProperty('--chip-fill-color', 'var(--sky-hover-tertiary)');\n    } else {\n      this.style.removeProperty('--chip-ink-color');\n      this.style.removeProperty('--chip-accent-color');\n      this.style.removeProperty('--chip-fill-color');\n    }\n  }\n\n  /** Size resolver similar to button: controls padding + font-size */\n  private _resolveSize(input: string): {\n    padding: string;\n    fontSize: string;\n  } {\n    const presets: Record<string, { padding: string; fontSize: string }> = {\n      xs: { padding: '2px 4px', fontSize: '11px' },\n      sm: { padding: '3px 6px', fontSize: '12px' },\n      md: { padding: '4px 8px', fontSize: '13px' },\n      lg: { padding: '5px 10px', fontSize: '14px' },\n      xl: { padding: '6px 12px', fontSize: '15px' },\n    };\n\n    if (presets[input]) return presets[input];\n\n    const m = String(input)\n      .trim()\n      .match(/^([\\d.]+)(px|rem|em)?$/i);\n    const unit = m?.[2] || 'px';\n    const fsNum = m ? parseFloat(m[1]) : 13;\n    const fs = `${fsNum}${unit}`;\n\n    const clamp = (n: number, min: number, max: number) =>\n      Math.max(min, Math.min(max, n));\n\n    const py = clamp(fsNum * 0.4, 2, 10);\n    const px = clamp(fsNum * 0.8, 6, 16);\n\n    const to = (n: number) => `${Math.round(n * 100) / 100}${unit}`;\n\n    return {\n      padding: `${to(py)} ${to(px)}`,\n      fontSize: fs,\n    };\n  }\n\n  /**\n   * Dispatches `chip-removed` and removes the chip from the DOM.\n   *\n   * @returns {void}\n   */\n  public removeChip(): void {\n    const removeEvent = new CustomEvent<SkyChipRemovedEventDetail>(\n      'chip-removed',\n      {\n        detail: { label: this.label },\n        bubbles: true,\n        composed: true,\n      }\n    );\n    this.dispatchEvent(removeEvent);\n    this.remove();\n  }\n\n  private _slotHasMeaningfulContent(slotEl: HTMLSlotElement): boolean {\n    const nodes = slotEl.assignedNodes({ flatten: true });\n    return nodes.some((n) =>\n      n.nodeType === Node.ELEMENT_NODE\n        ? true\n        : (n.textContent ?? '').trim().length > 0\n    );\n  }\n\n  /** Light DOM check works before the shadow tree exists (first render). */\n  private _hasPrefixSlotContent(): boolean {\n    if (this.querySelector('[slot=\"prefix\"]')) return true;\n    const slot = this.shadowRoot?.querySelector(\n      'slot[name=\"prefix\"]'\n    ) as HTMLSlotElement | null;\n    return slot ? this._slotHasMeaningfulContent(slot) : false;\n  }\n\n  private _hasSuffixSlotContent(): boolean {\n    if (this.querySelector('[slot=\"suffix\"]')) return true;\n    const slot = this.shadowRoot?.querySelector(\n      'slot[name=\"suffix\"]'\n    ) as HTMLSlotElement | null;\n    return slot ? this._slotHasMeaningfulContent(slot) : false;\n  }\n\n  private _hasDefaultSlotContent(): boolean {\n    for (const n of Array.from(this.childNodes)) {\n      if (n.nodeType === Node.ELEMENT_NODE) {\n        const slot = (n as Element).getAttribute('slot');\n        if (slot === 'prefix' || slot === 'suffix') continue;\n        return true;\n      }\n      if ((n.textContent ?? '').trim().length > 0) return true;\n    }\n    const slot = this.shadowRoot?.querySelector(\n      'slot:not([name])'\n    ) as HTMLSlotElement | null;\n    return slot ? this._slotHasMeaningfulContent(slot) : false;\n  }\n\n  private _onSlotChange = (): void => {\n    this.requestUpdate();\n  };\n\n  override render() {\n    const sizeDef = this._resolveSize(this.size);\n    const chipStyle = {\n      padding: sizeDef.padding,\n      borderRadius: resolveRadius(this.radius),\n      fontSize: sizeDef.fontSize,\n    };\n\n    return html`\n      <div\n        class=${classMap({\n          chip: true,\n          [this.variant]: true,\n          loading: this.loading,\n        })}\n        style=${styleMap(chipStyle)}\n        part=\"chip\"\n      >\n        <slot name=\"prefix\" @slotchange=${this._onSlotChange}></slot>\n        ${when(\n          !this._hasPrefixSlotContent() && this.iconL,\n          () => html`\n            <sky-icon class=\"icon\" part=\"icon\" icon=\"${this.iconL!}\"></sky-icon>\n          `\n        )}\n        <slot @slotchange=${this._onSlotChange}></slot>\n        ${this._hasDefaultSlotContent() ? nothing : this.label}\n        <slot name=\"suffix\" @slotchange=${this._onSlotChange}></slot>\n        ${when(\n          !this._hasSuffixSlotContent() && this.iconR,\n          () => html`\n            <sky-icon\n              class=\"icon icon-right\"\n              part=\"icon\"\n              icon=\"${this.iconR!}\"\n            ></sky-icon>\n          `\n        )}\n        ${when(\n          this.removable,\n          () => html`\n            <button\n              class=\"close-button\"\n              part=\"close-button\"\n              type=\"button\"\n              aria-label=\"Remove chip\"\n              @click=${this.removeChip}\n            >\n              <sky-icon icon=\"ion:close\"></sky-icon>\n            </button>\n          `\n        )}\n        ${when(\n          this.loading,\n          () => html`\n            <div class=\"loading-overlay\" part=\"loading-overlay\">\n              <div class=\"loading-spinner\" part=\"loading-spinner\"></div>\n            </div>\n          `\n        )}\n      </div>\n    `;\n  }\n}\n"],"names":["SkyChip","LitElement","constructor","super","arguments","this","label","removable","color","radius","size","iconL","iconR","loading","disabled","variant","_onSlotChange","requestUpdate","updated","bgColor","resolveColor","textColor","resolveTextColorForToken","style","setProperty","isDefaultColorToken","resolveInkColorForToken","resolveAccentColorForToken","removeProperty","_resolveSize","input","presets","xs","padding","fontSize","sm","md","lg","xl","m","String","trim","match","unit","fsNum","parseFloat","fs","clamp","n","min","max","Math","py","px","to","round","removeChip","removeEvent","CustomEvent","detail","bubbles","composed","dispatchEvent","remove","_slotHasMeaningfulContent","slotEl","assignedNodes","flatten","some","nodeType","Node","ELEMENT_NODE","textContent","length","_hasPrefixSlotContent","querySelector","slot","shadowRoot","_hasSuffixSlotContent","_hasDefaultSlotContent","Array","from","childNodes","getAttribute","render","sizeDef","chipStyle","borderRadius","resolveRadius","html","classMap","chip","styleMap","when","nothing","dependencies","SkyIcon","styles","css","unsafeCSS","cssOnFillEnhance","selector","fillVar","__decorateClass","property","type","prototype","Boolean","reflect","customElement"],"mappings":"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"}

package/dist/sky-col/sky-col.d.ts

@@ -1,6 +1,6 @@
-import { LitElement } from "lit";
-export type SkyColAlign = "stretch" | "start" | "center" | "end" | "baseline";
-export type SkyColJustify = "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly";
+import { LitElement } from 'lit';
+export type SkyColAlign = 'stretch' | 'start' | 'center' | 'end' | 'baseline';
+export type SkyColJustify = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
 /**
  * @element sky-col
  *
@@ -9,7 +9,7 @@ export type SkyColJustify = "start" | "center" | "end" | "space-between" | "spac
  * @status stable
  * @since 1.0.0
  *
- * @documentation https://library.sky-ui.com/components/grid
+ * @documentation https://sky-ui.com/components/grid
  *
  * @slot title - Optional title content shown before main content.
  * @slot - Default content for the column body.

package/dist/sky-col/sky-col.js

@@ -1,5 +1,9 @@
 import{property as t,customElement as s}from"lit/decorators.js";import{when as r}from"lit/directives/when.js";import{css as e,LitElement as o,html as i}from"lit";var a=Object.defineProperty,l=Object.getOwnPropertyDescriptor,p=(t,s,r,e)=>{for(var o,i=e>1?void 0:e?l(s,r):s,p=t.length-1;p>=0;p--)(o=t[p])&&(i=(e?o(s,r,i):o(i))||i);return e&&i&&a(s,r,i),i};let n=class extends o{constructor(){super(...arguments),this.span=1,this.gap="0",this.justify="center",this.align="stretch"}firstUpdated(){this.syncVars()}updated(t){(t.has("span")||t.has("gap")||t.has("justify")||t.has("align")||t.has("sm")||t.has("md")||t.has("lg")||t.has("xl")||t.has("start")||t.has("end"))&&this.syncVars()}refreshLayout(){this.syncVars()}syncVars(){this.style.setProperty("--col-span",String(this.span)),this.style.setProperty("--col-gap",this.gap),this.style.setProperty("--col-justify",this.justify),this.style.setProperty("--col-align",this.align),this.sm&&this.style.setProperty("--col-span-sm",String(this.sm)),this.md&&this.style.setProperty("--col-span-md",String(this.md)),this.lg&&this.style.setProperty("--col-span-lg",String(this.lg)),this.xl&&this.style.setProperty("--col-span-xl",String(this.xl)),this.start&&this.style.setProperty("--col-start",String(this.start)),this.end&&this.style.setProperty("--col-end",String(this.end))}render(){const t=this.start||this.end?`grid-column: ${this.start??"auto"} / ${this.end??"auto"};`:"";return i`
-      <div class="col" style=${r(this.start||this.end,()=>t,()=>"")} part="col">
+      <div
+        class="col"
+        style=${r(this.start||this.end,()=>t,()=>"")}
+        part="col"
+      >
         <slot name="title"></slot>
         <slot></slot>
       </div>
@@ -17,7 +21,7 @@ import{property as t,customElement as s}from"lit/decorators.js";import{when as r
       justify-content: var(--col-justify, center);
     }
 
-    ::slotted([slot="title"]) {
+    ::slotted([slot='title']) {
       font-weight: bold;
       margin-bottom: 0.5rem;
     }
@@ -39,7 +43,8 @@ import{property as t,customElement as s}from"lit/decorators.js";import{when as r
     }
     @media (min-width: 1201px) {
       .col {
-        grid-column: span var(--col-span-xl, var(--col-span, var(--col-span, 1)));
+        grid-column: span
+          var(--col-span-xl, var(--col-span, var(--col-span, 1)));
       }
     }
   `,p([t({type:Number})],n.prototype,"span",2),p([t({type:String})],n.prototype,"gap",2),p([t({type:String})],n.prototype,"justify",2),p([t({type:String})],n.prototype,"align",2),p([t({type:Number})],n.prototype,"start",2),p([t({type:Number})],n.prototype,"end",2),p([t({type:Number})],n.prototype,"sm",2),p([t({type:Number})],n.prototype,"md",2),p([t({type:Number})],n.prototype,"lg",2),p([t({type:Number})],n.prototype,"xl",2),n=p([s("sky-col")],n);export{n as SkyCol};

package/dist/sky-col/sky-col.js.map

@@ -1 +1 @@
-{"version":3,"file":"sky-col.js","sources":["../../src/sky-col/sky-col.ts"],"sourcesContent":["import { customElement, property } from \"lit/decorators.js\";\r\nimport { when } from \"lit/directives/when.js\";\r\nimport { LitElement, html, css } from \"lit\";\r\n\r\nexport type SkyColAlign = \"stretch\" | \"start\" | \"center\" | \"end\" | \"baseline\";\r\nexport type SkyColJustify =\r\n  | \"start\"\r\n  | \"center\"\r\n  | \"end\"\r\n  | \"space-between\"\r\n  | \"space-around\"\r\n  | \"space-evenly\";\r\n\r\n/**\r\n * @element sky-col\r\n *\r\n * @summary Grid/flex column helper with responsive spans and configurable alignment/justification.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://library.sky-ui.com/components/grid\r\n *\r\n * @slot title - Optional title content shown before main content.\r\n * @slot - Default content for the column body.\r\n *\r\n * @csspart col - The column container.\r\n *\r\n * @property {number} span - Default column span.\r\n * @property {string} gap - Internal content gap CSS value.\r\n * @property {SkyColJustify} justify - Content justification within the column.\r\n * @property {SkyColAlign} align - Content alignment within the column.\r\n * @property {number | undefined} start - Optional explicit grid column start.\r\n * @property {number | undefined} end - Optional explicit grid column end.\r\n * @property {number | undefined} sm - Responsive span for small breakpoint.\r\n * @property {number | undefined} md - Responsive span for medium breakpoint.\r\n * @property {number | undefined} lg - Responsive span for large breakpoint.\r\n * @property {number | undefined} xl - Responsive span for extra-large breakpoint.\r\n * @method refreshLayout Reapplies internal CSS variables from current properties.\r\n *\r\n * @Behavior\r\n * - Applies span and responsive spans through host CSS variables.\r\n * - Supports explicit `start`/`end` grid positioning when provided.\r\n * - Automatically updates layout variables when relevant properties change.\r\n *\r\n * @example\r\n * ```html\r\n * <sky-col span=\"4\" md=\"6\" justify=\"space-between\" align=\"center\">\r\n *   <span slot=\"title\">Revenue</span>\r\n *   Q2 performance details\r\n * </sky-col>\r\n * ```\r\n * ```vue\r\n * <template>\r\n *   <sky-col span=\"4\" md=\"6\" justify=\"space-between\" align=\"center\">\r\n *     <span slot=\"title\">Revenue</span>\r\n *     Q2 performance details\r\n *   </sky-col>\r\n * </template>\r\n * ```\r\n * ```jsx\r\n * export default function Demo() {\r\n *   return (\r\n *     <sky-col span=\"4\" md=\"6\" justify=\"space-between\" align=\"center\">\r\n *       <span slot=\"title\">Revenue</span>\r\n *       Q2 performance details\r\n *     </sky-col>\r\n *   );\r\n * }\r\n * ```\r\n */\r\n@customElement(\"sky-col\")\r\nexport class SkyCol extends LitElement {\r\n  @property({ type: Number }) span = 1;\r\n  @property({ type: String }) gap = \"0\";\r\n  @property({ type: String }) justify: SkyColJustify = \"center\";\r\n  @property({ type: String }) align: SkyColAlign = \"stretch\";\r\n\r\n  @property({ type: Number }) start?: number;\r\n  @property({ type: Number }) end?: number;\r\n\r\n  @property({ type: Number }) sm?: number;\r\n  @property({ type: Number }) md?: number;\r\n  @property({ type: Number }) lg?: number;\r\n  @property({ type: Number }) xl?: number;\r\n\r\n  static override styles = css`\r\n    :host {\r\n      display: contents;\r\n    }\r\n\r\n    .col {\r\n      display: flex;\r\n      flex-direction: column;\r\n      grid-column: span var(--col-span, 1);\r\n      gap: var(--col-gap, 0);\r\n      align-items: var(--col-align, stretch);\r\n      justify-content: var(--col-justify, center);\r\n    }\r\n\r\n    ::slotted([slot=\"title\"]) {\r\n      font-weight: bold;\r\n      margin-bottom: 0.5rem;\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n      .col {\r\n        grid-column: span var(--col-span-sm, var(--col-span, 1));\r\n      }\r\n    }\r\n    @media (max-width: 992px) {\r\n      .col {\r\n        grid-column: span var(--col-span-md, var(--col-span, 1));\r\n      }\r\n    }\r\n    @media (max-width: 1200px) {\r\n      .col {\r\n        grid-column: span var(--col-span-lg, var(--col-span, 1));\r\n      }\r\n    }\r\n    @media (min-width: 1201px) {\r\n      .col {\r\n        grid-column: span var(--col-span-xl, var(--col-span, var(--col-span, 1)));\r\n      }\r\n    }\r\n  `;\r\n\r\n  override firstUpdated(): void {\r\n    this.syncVars();\r\n  }\r\n\r\n  override updated(changed: Map<string | number | symbol, unknown>): void {\r\n    if (\r\n      changed.has(\"span\") ||\r\n      changed.has(\"gap\") ||\r\n      changed.has(\"justify\") ||\r\n      changed.has(\"align\") ||\r\n      changed.has(\"sm\") ||\r\n      changed.has(\"md\") ||\r\n      changed.has(\"lg\") ||\r\n      changed.has(\"xl\") ||\r\n      changed.has(\"start\") ||\r\n      changed.has(\"end\")\r\n    ) {\r\n      this.syncVars();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Reapplies internal CSS variables from current properties.\r\n   *\r\n   * @returns {void}\r\n   */\r\n  public refreshLayout(): void {\r\n    this.syncVars();\r\n  }\r\n\r\n  private syncVars(): void {\r\n    this.style.setProperty(\"--col-span\", String(this.span));\r\n    this.style.setProperty(\"--col-gap\", this.gap);\r\n    this.style.setProperty(\"--col-justify\", this.justify);\r\n    this.style.setProperty(\"--col-align\", this.align);\r\n\r\n    if (this.sm) this.style.setProperty(\"--col-span-sm\", String(this.sm));\r\n    if (this.md) this.style.setProperty(\"--col-span-md\", String(this.md));\r\n    if (this.lg) this.style.setProperty(\"--col-span-lg\", String(this.lg));\r\n    if (this.xl) this.style.setProperty(\"--col-span-xl\", String(this.xl));\r\n\r\n    if (this.start) this.style.setProperty(\"--col-start\", String(this.start));\r\n    if (this.end) this.style.setProperty(\"--col-end\", String(this.end));\r\n  }\r\n\r\n  override render() {\r\n    const gridStyle =\r\n      this.start || this.end\r\n        ? `grid-column: ${this.start ?? \"auto\"} / ${this.end ?? \"auto\"};`\r\n        : \"\";\r\n\r\n    return html`\r\n      <div class=\"col\" style=${when(this.start || this.end, () => gridStyle, () => \"\")} part=\"col\">\r\n        <slot name=\"title\"></slot>\r\n        <slot></slot>\r\n      </div>\r\n    `;\r\n  }\r\n}"],"names":["SkyCol","LitElement","constructor","super","arguments","this","span","gap","justify","align","firstUpdated","syncVars","updated","changed","has","refreshLayout","style","setProperty","String","sm","md","lg","xl","start","end","render","gridStyle","html","when","styles","css","__decorateClass","property","type","Number","prototype","customElement"],"mappings":"kWAwEO,IAAMA,EAAN,cAAqBC,EAArB,WAAAC,GAAAC,SAAAC,WACuBC,KAAAC,KAAO,EACPD,KAAAE,IAAM,IACNF,KAAAG,QAAyB,SACzBH,KAAAI,MAAqB,SAAA,CAmDxC,YAAAC,GACPL,KAAKM,UACP,CAES,OAAAC,CAAQC,IAEbA,EAAQC,IAAI,SACZD,EAAQC,IAAI,QACZD,EAAQC,IAAI,YACZD,EAAQC,IAAI,UACZD,EAAQC,IAAI,OACZD,EAAQC,IAAI,OACZD,EAAQC,IAAI,OACZD,EAAQC,IAAI,OACZD,EAAQC,IAAI,UACZD,EAAQC,IAAI,SAEZT,KAAKM,UAET,CAOO,aAAAI,GACLV,KAAKM,UACP,CAEQ,QAAAA,GACNN,KAAKW,MAAMC,YAAY,aAAcC,OAAOb,KAAKC,OACjDD,KAAKW,MAAMC,YAAY,YAAaZ,KAAKE,KACzCF,KAAKW,MAAMC,YAAY,gBAAiBZ,KAAKG,SAC7CH,KAAKW,MAAMC,YAAY,cAAeZ,KAAKI,OAEvCJ,KAAKc,IAAId,KAAKW,MAAMC,YAAY,gBAAiBC,OAAOb,KAAKc,KAC7Dd,KAAKe,IAAIf,KAAKW,MAAMC,YAAY,gBAAiBC,OAAOb,KAAKe,KAC7Df,KAAKgB,IAAIhB,KAAKW,MAAMC,YAAY,gBAAiBC,OAAOb,KAAKgB,KAC7DhB,KAAKiB,IAAIjB,KAAKW,MAAMC,YAAY,gBAAiBC,OAAOb,KAAKiB,KAE7DjB,KAAKkB,OAAOlB,KAAKW,MAAMC,YAAY,cAAeC,OAAOb,KAAKkB,QAC9DlB,KAAKmB,KAAKnB,KAAKW,MAAMC,YAAY,YAAaC,OAAOb,KAAKmB,KAChE,CAES,MAAAC,GACP,MAAMC,EACJrB,KAAKkB,OAASlB,KAAKmB,IACf,gBAAgBnB,KAAKkB,OAAS,YAAYlB,KAAKmB,KAAO,UACtD,GAEN,OAAOG,CAAA;+BACoBC,EAAKvB,KAAKkB,OAASlB,KAAKmB,IAAK,IAAME,EAAW,IAAM;;;;KAKjF,GAhHW1B,EAcK6B,OAASC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAbGC,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UADPlC,EACiBmC,UAAA,OAAA,GACAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMf,UAFPlB,EAEiBmC,UAAA,MAAA,GACAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMf,UAHPlB,EAGiBmC,UAAA,UAAA,GACAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMf,UAJPlB,EAIiBmC,UAAA,QAAA,GAEAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UANPlC,EAMiBmC,UAAA,QAAA,GACAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAPPlC,EAOiBmC,UAAA,MAAA,GAEAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UATPlC,EASiBmC,UAAA,KAAA,GACAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAVPlC,EAUiBmC,UAAA,KAAA,GACAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAXPlC,EAWiBmC,UAAA,KAAA,GACAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAZPlC,EAYiBmC,UAAA,KAAA,GAZjBnC,EAAN+B,EAAA,CADNK,EAAc,YACFpC"}
+{"version":3,"file":"sky-col.js","sources":["../../src/sky-col/sky-col.ts"],"sourcesContent":["import { customElement, property } from 'lit/decorators.js';\nimport { when } from 'lit/directives/when.js';\nimport { LitElement, html, css } from 'lit';\n\nexport type SkyColAlign = 'stretch' | 'start' | 'center' | 'end' | 'baseline';\nexport type SkyColJustify =\n  | 'start'\n  | 'center'\n  | 'end'\n  | 'space-between'\n  | 'space-around'\n  | 'space-evenly';\n\n/**\n * @element sky-col\n *\n * @summary Grid/flex column helper with responsive spans and configurable alignment/justification.\n *\n * @status stable\n * @since 1.0.0\n *\n * @documentation https://sky-ui.com/components/grid\n *\n * @slot title - Optional title content shown before main content.\n * @slot - Default content for the column body.\n *\n * @csspart col - The column container.\n *\n * @property {number} span - Default column span.\n * @property {string} gap - Internal content gap CSS value.\n * @property {SkyColJustify} justify - Content justification within the column.\n * @property {SkyColAlign} align - Content alignment within the column.\n * @property {number | undefined} start - Optional explicit grid column start.\n * @property {number | undefined} end - Optional explicit grid column end.\n * @property {number | undefined} sm - Responsive span for small breakpoint.\n * @property {number | undefined} md - Responsive span for medium breakpoint.\n * @property {number | undefined} lg - Responsive span for large breakpoint.\n * @property {number | undefined} xl - Responsive span for extra-large breakpoint.\n * @method refreshLayout Reapplies internal CSS variables from current properties.\n *\n * @Behavior\n * - Applies span and responsive spans through host CSS variables.\n * - Supports explicit `start`/`end` grid positioning when provided.\n * - Automatically updates layout variables when relevant properties change.\n *\n * @example\n * ```html\n * <sky-col span=\"4\" md=\"6\" justify=\"space-between\" align=\"center\">\n *   <span slot=\"title\">Revenue</span>\n *   Q2 performance details\n * </sky-col>\n * ```\n * ```vue\n * <template>\n *   <sky-col span=\"4\" md=\"6\" justify=\"space-between\" align=\"center\">\n *     <span slot=\"title\">Revenue</span>\n *     Q2 performance details\n *   </sky-col>\n * </template>\n * ```\n * ```jsx\n * export default function Demo() {\n *   return (\n *     <sky-col span=\"4\" md=\"6\" justify=\"space-between\" align=\"center\">\n *       <span slot=\"title\">Revenue</span>\n *       Q2 performance details\n *     </sky-col>\n *   );\n * }\n * ```\n */\n@customElement('sky-col')\nexport class SkyCol extends LitElement {\n  @property({ type: Number }) span = 1;\n  @property({ type: String }) gap = '0';\n  @property({ type: String }) justify: SkyColJustify = 'center';\n  @property({ type: String }) align: SkyColAlign = 'stretch';\n\n  @property({ type: Number }) start?: number;\n  @property({ type: Number }) end?: number;\n\n  @property({ type: Number }) sm?: number;\n  @property({ type: Number }) md?: number;\n  @property({ type: Number }) lg?: number;\n  @property({ type: Number }) xl?: number;\n\n  static override styles = css`\n    :host {\n      display: contents;\n    }\n\n    .col {\n      display: flex;\n      flex-direction: column;\n      grid-column: span var(--col-span, 1);\n      gap: var(--col-gap, 0);\n      align-items: var(--col-align, stretch);\n      justify-content: var(--col-justify, center);\n    }\n\n    ::slotted([slot='title']) {\n      font-weight: bold;\n      margin-bottom: 0.5rem;\n    }\n\n    @media (max-width: 768px) {\n      .col {\n        grid-column: span var(--col-span-sm, var(--col-span, 1));\n      }\n    }\n    @media (max-width: 992px) {\n      .col {\n        grid-column: span var(--col-span-md, var(--col-span, 1));\n      }\n    }\n    @media (max-width: 1200px) {\n      .col {\n        grid-column: span var(--col-span-lg, var(--col-span, 1));\n      }\n    }\n    @media (min-width: 1201px) {\n      .col {\n        grid-column: span\n          var(--col-span-xl, var(--col-span, var(--col-span, 1)));\n      }\n    }\n  `;\n\n  override firstUpdated(): void {\n    this.syncVars();\n  }\n\n  override updated(changed: Map<string | number | symbol, unknown>): void {\n    if (\n      changed.has('span') ||\n      changed.has('gap') ||\n      changed.has('justify') ||\n      changed.has('align') ||\n      changed.has('sm') ||\n      changed.has('md') ||\n      changed.has('lg') ||\n      changed.has('xl') ||\n      changed.has('start') ||\n      changed.has('end')\n    ) {\n      this.syncVars();\n    }\n  }\n\n  /**\n   * Reapplies internal CSS variables from current properties.\n   *\n   * @returns {void}\n   */\n  public refreshLayout(): void {\n    this.syncVars();\n  }\n\n  private syncVars(): void {\n    this.style.setProperty('--col-span', String(this.span));\n    this.style.setProperty('--col-gap', this.gap);\n    this.style.setProperty('--col-justify', this.justify);\n    this.style.setProperty('--col-align', this.align);\n\n    if (this.sm) this.style.setProperty('--col-span-sm', String(this.sm));\n    if (this.md) this.style.setProperty('--col-span-md', String(this.md));\n    if (this.lg) this.style.setProperty('--col-span-lg', String(this.lg));\n    if (this.xl) this.style.setProperty('--col-span-xl', String(this.xl));\n\n    if (this.start) this.style.setProperty('--col-start', String(this.start));\n    if (this.end) this.style.setProperty('--col-end', String(this.end));\n  }\n\n  override render() {\n    const gridStyle =\n      this.start || this.end\n        ? `grid-column: ${this.start ?? 'auto'} / ${this.end ?? 'auto'};`\n        : '';\n\n    return html`\n      <div\n        class=\"col\"\n        style=${when(\n          this.start || this.end,\n          () => gridStyle,\n          () => ''\n        )}\n        part=\"col\"\n      >\n        <slot name=\"title\"></slot>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"names":["SkyCol","LitElement","constructor","super","arguments","this","span","gap","justify","align","firstUpdated","syncVars","updated","changed","has","refreshLayout","style","setProperty","String","sm","md","lg","xl","start","end","render","gridStyle","html","when","styles","css","__decorateClass","property","type","Number","prototype","customElement"],"mappings":"kWAwEO,IAAMA,EAAN,cAAqBC,EAArB,WAAAC,GAAAC,SAAAC,WACuBC,KAAAC,KAAO,EACPD,KAAAE,IAAM,IACNF,KAAAG,QAAyB,SACzBH,KAAAI,MAAqB,SAAA,CAoDxC,YAAAC,GACPL,KAAKM,UACP,CAES,OAAAC,CAAQC,IAEbA,EAAQC,IAAI,SACZD,EAAQC,IAAI,QACZD,EAAQC,IAAI,YACZD,EAAQC,IAAI,UACZD,EAAQC,IAAI,OACZD,EAAQC,IAAI,OACZD,EAAQC,IAAI,OACZD,EAAQC,IAAI,OACZD,EAAQC,IAAI,UACZD,EAAQC,IAAI,SAEZT,KAAKM,UAET,CAOO,aAAAI,GACLV,KAAKM,UACP,CAEQ,QAAAA,GACNN,KAAKW,MAAMC,YAAY,aAAcC,OAAOb,KAAKC,OACjDD,KAAKW,MAAMC,YAAY,YAAaZ,KAAKE,KACzCF,KAAKW,MAAMC,YAAY,gBAAiBZ,KAAKG,SAC7CH,KAAKW,MAAMC,YAAY,cAAeZ,KAAKI,OAEvCJ,KAAKc,IAAId,KAAKW,MAAMC,YAAY,gBAAiBC,OAAOb,KAAKc,KAC7Dd,KAAKe,IAAIf,KAAKW,MAAMC,YAAY,gBAAiBC,OAAOb,KAAKe,KAC7Df,KAAKgB,IAAIhB,KAAKW,MAAMC,YAAY,gBAAiBC,OAAOb,KAAKgB,KAC7DhB,KAAKiB,IAAIjB,KAAKW,MAAMC,YAAY,gBAAiBC,OAAOb,KAAKiB,KAE7DjB,KAAKkB,OAAOlB,KAAKW,MAAMC,YAAY,cAAeC,OAAOb,KAAKkB,QAC9DlB,KAAKmB,KAAKnB,KAAKW,MAAMC,YAAY,YAAaC,OAAOb,KAAKmB,KAChE,CAES,MAAAC,GACP,MAAMC,EACJrB,KAAKkB,OAASlB,KAAKmB,IACf,gBAAgBnB,KAAKkB,OAAS,YAAYlB,KAAKmB,KAAO,UACtD,GAEN,OAAOG,CAAA;;;gBAGKC,EACNvB,KAAKkB,OAASlB,KAAKmB,IACnB,IAAME,EACN,IAAM;;;;;;KAQd,GAzHW1B,EAcK6B,OAASC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAbGC,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UADPlC,EACiBmC,UAAA,OAAA,GACAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMf,UAFPlB,EAEiBmC,UAAA,MAAA,GACAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMf,UAHPlB,EAGiBmC,UAAA,UAAA,GACAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMf,UAJPlB,EAIiBmC,UAAA,QAAA,GAEAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UANPlC,EAMiBmC,UAAA,QAAA,GACAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAPPlC,EAOiBmC,UAAA,MAAA,GAEAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UATPlC,EASiBmC,UAAA,KAAA,GACAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAVPlC,EAUiBmC,UAAA,KAAA,GACAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAXPlC,EAWiBmC,UAAA,KAAA,GACAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAZPlC,EAYiBmC,UAAA,KAAA,GAZjBnC,EAAN+B,EAAA,CADNK,EAAc,YACFpC"}

package/dist/sky-combobox/sky-combobox.d.ts

@@ -1,7 +1,9 @@
-import { FormControlBase, FormState } from "../helper/internals/form-control-base";
-export type SkyComboboxJustify = "flex-start" | "center" | "flex-end" | "space-between" | "space-around" | "space-evenly";
-export type SkyComboboxErrorDisplayMode = "single" | "all" | "none";
-export type SkyComboboxIconPosition = "left" | "right";
+import { FormControlBase, FormState } from '../helper/internals/form-control-base';
+export type SkyComboboxJustify = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
+export type SkyComboboxErrorDisplayMode = 'single' | 'all' | 'none';
+export type SkyComboboxIconPosition = 'left' | 'right';
+/** How multi-select values render in the field (single-select always uses plain text). */
+export type SkyComboboxMultiDisplay = 'chips' | 'text' | 'count';
 export type SkyComboboxValueChangedDetail = {
     value: any | any[];
     selectedItems: any[];
@@ -32,7 +34,7 @@ export type SkyComboboxAddNewOptionDetail = {
  * @status stable
  * @since 1.0.0
  *
- * @documentation https://library.sky-ui.com/components/combobox
+ * @documentation https://sky-ui.com/components/combobox
  * @dependency sky-icon
  * @dependency sky-checkbox
  *
@@ -48,8 +50,10 @@ export type SkyComboboxAddNewOptionDetail = {
  * @csspart icon-slot - Both left and right icon containers
  * @csspart placeholder-label - The placeholder text label
  * @csspart clear-button - The clear (×) button
+ * @csspart field-trailing - Trailing actions rail (clear, right icon, chevron)
  * @csspart dropdown-button - The dropdown toggle arrow button
  * @csspart chip-container - Container for the chips in multi-select mode
+ * @csspart value-summary - Multi-select text/count summary (when `multi-display` is `text` or `count`)
  * @csspart chip - Individual chip element
  * @csspart single-select-chip - Chip shown in single-select mode
  * @csspart overflow-chip - The "+N" chip that shows hidden chips count
@@ -82,7 +86,6 @@ export type SkyComboboxAddNewOptionDetail = {
  * @property {string} placeholder - Main placeholder text.
  * @property {string} searchPlaceholder - Search input placeholder text.
  * @property {string} searchQuery - Current search filter text when `searchable` is enabled. Default: `""`.
- * @property {string} label - Optional external label text.
  * @property {any[]} options - Available options list.
  * @property {boolean} searchable - Enables search input and filtering.
  * @property {boolean} addOption - Enables ad-hoc option creation from search query.
@@ -116,7 +119,9 @@ export type SkyComboboxAddNewOptionDetail = {
  * @property {boolean} enforceMinOneSelection - Prevents clearing all selections in multi-select mode.
  * @property {boolean} validationActive - Enables validation UI state.
  * @property {boolean} invalid - Reflects invalid state.
- * @property {string} variant - Visual variant style.
+ * @property {string} variant - Visual style: `default`, `highlight`, `fieldset`, or `inside`.
+ * @property {string} label - Label text. Above the field by default; on the border for `fieldset`; inside the field for `inside`.
+ * @property {SkyComboboxMultiDisplay} multiDisplay - Multi-select value UI: `chips` (default), `text` (comma-joined), or `count` (“N selected”).
  *
  * @method openDropdown Opens the combobox dropdown.
  * @method closeDropdown Closes the combobox dropdown.
@@ -182,7 +187,9 @@ export declare class SkyCombobox extends FormControlBase {
     openAbove: boolean;
     validationActive: boolean;
     invalid: boolean;
-    variant: string;
+    variant: 'default' | 'highlight' | 'fieldset' | 'inside';
+    /** Multi-select field presentation. Ignored for single-select. */
+    multiDisplay: SkyComboboxMultiDisplay;
     /** Current search filter when `searchable`; exposed for controlled search / `v-model:search-query`. */
     searchQuery: string;
     filteredOptions: any[];
@@ -206,8 +213,11 @@ export declare class SkyCombobox extends FormControlBase {
     private iconLeftEls;
     private iconRightEls;
     private _searchDebounceId;
+    private _closeResetId;
     private static readonly _SEARCH_DEBOUNCE_MS;
     private static readonly _SEARCH_DEBOUNCE_OPTIONS_THRESHOLD;
+    /** Matches PopoverController exit animation so list stays visible while closing. */
+    private static readonly _CLOSE_RESET_MS;
     private dropdownPopover;
     private hiddenPopover;
     static styles: import("lit").CSSResult;
@@ -289,6 +299,9 @@ export declare class SkyCombobox extends FormControlBase {
     renderHiddenChipsDropdown(): import("lit-html").TemplateResult<1>;
     removeChip(option: any): void;
     renderChips(): import("lit-html").TemplateResult<1>;
+    private resolveMultiDisplay;
+    /** Selected value area: chips, joined text, or count summary. */
+    private renderSelectedValue;
     handleKeydown(event: KeyboardEvent): void;
     private onSearchKeydown;
     /** Number of non-option rows before the first option (search + select-all). */
@@ -311,7 +324,7 @@ export declare class SkyCombobox extends FormControlBase {
     getOptionLabel(option: any): string;
     renderValidationErrors(): import("lit-html").TemplateResult<1> | null;
     getErrorMessages(): string[];
-    handleIconClick(position: "left" | "right", event: MouseEvent): void;
+    handleIconClick(position: 'left' | 'right', event: MouseEvent): void;
     private onIconSlotChange;
     render(): import("lit-html").TemplateResult<1>;
 }