@sky.ui/core 0.0.40 → 0.0.42

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

@@ -1,7 +1,7 @@
-import { LitElement } from 'lit';
-export type SkyButtonVariant = 'solid' | 'faded' | 'bordered' | 'transparent' | 'flat' | 'ghost' | 'relief' | 'gradient' | 'shadow' | 'link';
-export type SkyButtonType = 'button' | 'submit' | 'reset';
-export type SkyButtonAnimation = 'auto' | 'none' | 'lift' | 'push' | 'scale' | 'rotate' | 'custom';
+import { LitElement } from "lit";
+export type SkyButtonVariant = "solid" | "faded" | "bordered" | "transparent" | "flat" | "ghost" | "relief" | "gradient" | "shadow" | "link";
+export type SkyButtonType = "button" | "submit" | "reset";
+export type SkyButtonAnimation = "auto" | "none" | "lift" | "push" | "scale" | "rotate" | "custom";
 /**
  * @element sky-button
  *
@@ -34,21 +34,29 @@ export type SkyButtonAnimation = 'auto' | 'none' | 'lift' | 'push' | 'scale' | '
  * @property {boolean} iconOnly - Square padding for icon-only buttons; hides label text. Default: `false`.
  * @property {string} colors - Comma-separated color stops for gradient variant. Default: `""`.
  * @property {SkyButtonAnimation} animation - Transform animation style. Default: `"auto"`.
+ * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `""`.
  * @method focusButton Focuses the internal native button.
  * @method clickButton Triggers a click on the internal native button when enabled.
  *
  * @example
  * ```html
  * <sky-button variant="gradient" colors="linear@90deg: primary, secondary" iconl="ion:add" label="Create"></sky-button>
+ * <sky-button preset="cancel" label="Cancel"></sky-button>
  * ```
  * ```vue
  * <template>
  *   <sky-button variant="gradient" colors="linear@90deg: primary, secondary" iconl="ion:add" label="Create"></sky-button>
+ *   <sky-button preset="cancel" label="Cancel"></sky-button>
  * </template>
  * ```
  * ```jsx
  * export default function Demo() {
- *   return <sky-button variant="gradient" colors="linear@90deg: primary, secondary" iconl="ion:add" label="Create"></sky-button>;
+ *   return (
+ *     <>
+ *       <sky-button variant="gradient" colors="linear@90deg: primary, secondary" iconl="ion:add" label="Create"></sky-button>
+ *       <sky-button preset="cancel" label="Cancel"></sky-button>
+ *     </>
+ *   );
  * }
  * ```
  */
@@ -84,12 +92,18 @@ export declare class SkyButton extends LitElement {
     colors: string;
     /** Animation style for hover/active transforms. */
     animation: SkyButtonAnimation;
+    /** Named prop preset from nearest `sky-config-provider`. */
+    preset: string;
     /** @internal Set by `sky-button-group` to flatten grouped button visuals. */
     inGroup: boolean;
     private _hasMeaningfulSlot;
     /** Inline CSS variable cache. */
     private _styleVars;
-    static styles: import("lit").CSSResult;
+    private _presets;
+    private _lastPresetRevision;
+    /** Set when presets change so `update()` rebuilds CSS vars after hostUpdate. */
+    private _styleDirty;
+    static styles: import("lit").CSSResult[];
     constructor();
     private _slotHasMeaningfulContent;
     private _onSlotChange;
@@ -100,7 +114,13 @@ export declare class SkyButton extends LitElement {
     private _isThemeBorderShorthand;
     /** Extracts the color token from a `Npx solid …` border shorthand. */
     private _borderColorFromShorthand;
-    protected willUpdate(changedProperties: Map<string, unknown>): void;
+    /**
+     * Lit order: `willUpdate` → controllers `hostUpdate` (presets) → `update`/render.
+     * Style vars must be built in `update()` so they see preset-applied props.
+     * Building in `willUpdate` left render with `{}` after PresetController cleared/wrote props.
+     */
+    protected update(changedProperties: Map<string, unknown>): void;
+    private _rebuildStyleVars;
     /**
      * Focuses the internal native button.
      *

package/dist/sky-button/sky-button.js

@@ -1,15 +1,15 @@
-import{unsafeCSS as o,css as t,LitElement as r,html as e,nothing as n}from"lit";import{property as a,state as i,eventOptions as s,customElement as l}from"lit/decorators.js";import{when as d}from"lit/directives/when.js";import{styleMap as h}from"lit/directives/style-map.js";import{resolveColor as p,resolveTextColorForToken as c,createGradient as b,tuneSurfaceVariantForDefaultColor as v,resolveSemanticSurfaceKey as g,semanticSoftSurfaceTokens as u,darkShade as f,fadeMix as y,skyBorderPrimaryShorthand as m,hoverShade as x}from"../helper/utils/color-resolver.js";import{cssOnFillEnhance as k}from"../helper/utils/contrast-color.js";import{resolveRadius as w}from"../helper/utils/size-resolver.js";import{ifDefined as S}from"lit/directives/if-defined.js";import{SkyIcon as $}from"../sky-icon/sky-icon.js";var B=Object.defineProperty,C=Object.getOwnPropertyDescriptor,_=(o,t,r,e)=>{for(var n,a=e>1?void 0:e?C(t,r):t,i=o.length-1;i>=0;i--)(n=o[i])&&(a=(e?n(t,r,a):n(a))||a);return e&&a&&B(t,r,a),a};let z=class extends r{constructor(){super(),this.variant="solid",this.color="primary",this.type="button",this.form="",this.size="md",this.radius="md",this.label="Button",this.disabled=!1,this.loading=!1,this.iconL="",this.iconR="",this.iconOnly=!1,this.colors="",this.animation="auto",this.inGroup=!1,this._hasMeaningfulSlot=!1,this._styleVars={},this._onSlotChange=o=>{const t=o.target,r=this._slotHasMeaningfulContent(t);r!==this._hasMeaningfulSlot&&(this._hasMeaningfulSlot=r)},this.internals=this.attachInternals()}_slotHasMeaningfulContent(o){return o.assignedNodes({flatten:!0}).some(o=>o.nodeType===Node.ELEMENT_NODE||(o.textContent??"").trim().length>0)}_toSquarePadding(o){const t=parseFloat(o.trim().split(/\s+/)[0]);return`${Number.isFinite(t)?t:8}px`}_resolveSize(o){const t={xs:{padding:"3px 7px",fontSize:"12px",gap:"3px",icon:"14px",spinner:"14px"},sm:{padding:"5px 9px",fontSize:"14px",gap:"4px",icon:"16px",spinner:"16px"},md:{padding:"8px 14px",fontSize:"16px",gap:"5px",icon:"18px",spinner:"18px"},lg:{padding:"10px 18px",fontSize:"18px",gap:"6px",icon:"20px",spinner:"20px"},xl:{padding:"14px 24px",fontSize:"20px",gap:"8px",icon:"24px",spinner:"24px"}};if(t[o])return t[o];const r=String(o).trim().match(/^([\d.]+)(px|rem|em)?$/i),e=r?.[2]||"px",n=r?parseFloat(r[1]):16,a=`${n}${e}`,i=o=>`${Math.round(100*o)/100}${e}`,s=(o,t,r)=>Math.max(t,Math.min(r,o)),l=s(.55*n,4,18),d=s(.9*n,8,28),h=s(.3*n,3,10),p=s(1.125*n,12,28),c=p;return{padding:`${i(l)} ${i(d)}`,fontSize:a,gap:i(h),icon:i(p),spinner:i(c)}}_isThemeBorderShorthand(o){return!(!o||"none"===o)&&/^var\(--sky-border-/.test(o.trim())}_borderColorFromShorthand(o){if(!o||"none"===o||this._isThemeBorderShorthand(o))return"transparent";const t=o.match(/solid\s+(.+)$/);return t?.[1]?.trim()??"transparent"}willUpdate(o){if(!["color","variant","size","radius","animation","inGroup","disabled","loading","colors","iconOnly"].some(t=>o.has(t))&&Object.keys(this._styleVars).length>0)return;const t=p(this.color),r=c(this.color),e={solid:{bg:t,color:r,border:"none",shadow:"none",hoverBg:t,hoverColor:r,hoverShadow:"var(--sky-box-shadow-hover)"},faded:{bg:"var(--sky-hover-tertiary)",color:t,border:"1px solid var(--sky-text-tertiary)",shadow:"none",hoverBg:"var(--sky-hover-secondary)",hoverColor:t,hoverShadow:"none",hoverBorder:"1px solid var(--sky-text-secondary)"},bordered:{bg:"transparent",color:t,border:`2px solid ${t}`,shadow:"none",hoverBg:"transparent",hoverColor:t,hoverShadow:"none",hoverBorder:`2px solid ${x(t,25)}`},transparent:{bg:"transparent",color:t,border:"none",shadow:"none",hoverBg:y(t,15),hoverColor:t,hoverShadow:"none"},flat:{bg:y(t,20),color:x(t,30),border:"none",shadow:"none",hoverBg:y(t,25),hoverColor:x(t,35),hoverShadow:"none"},ghost:{bg:"transparent",color:t,border:`2px solid ${t}`,shadow:"none",hoverBg:t,hoverColor:r,hoverShadow:"none"},shadow:{bg:"var(--sky-glass-primary)",color:"var(--sky-text-primary)",border:m(),shadow:"none",hoverBg:"var(--sky-glass-primary)",hoverColor:t,hoverShadow:"var(--sky-box-shadow-hover)",hoverBorder:m()},relief:{bg:t,color:r,border:"none",shadow:`\n        inset 0 1px 0 rgba(255,255,255,0.4),\n        0 3px 0 ${f(t,40)},\n        0 4px 6px -1px ${y(t,40)}\n      `,hoverBg:t,hoverColor:r,hoverShadow:"none"},gradient:{bg:b(this.colors,t),color:r,border:"none",shadow:"none",hoverBg:b(this.colors,t),hoverColor:r,hoverShadow:"none"},link:{bg:"transparent",color:t,border:"none",shadow:"none",hoverBg:"transparent",hoverColor:t,hoverShadow:"none"}},n=this.variant in e?this.variant:"solid";let a={...e[n]};Object.assign(a,v(this.color,n,e[n]));const i=g(this.color);if(i&&("flat"===n||"faded"===n)){const o=u(i,{bordered:"faded"===n});Object.assign(a,{bg:o.bg,color:o.color,border:"faded"===n?o.border:"none",hoverBg:"var(--sky-hover-primary)",hoverColor:o.color,hoverShadow:"none",..."faded"===n?{hoverBorder:o.border}:{}})}const s=this.inGroup?"none":this.animation,l="auto"===s?{solid:{hover:"translateY(-3px)",active:"translateY(-3px)"},faded:{},bordered:{},transparent:{},flat:{},ghost:{},shadow:{hover:"translateY(-3px)",active:"translateY(-3px)"},gradient:{},relief:{hover:"translateY(2px)",active:"translateY(2px)"},link:{}}[n]:(o=>{switch(o){case"none":return{hover:"none",active:"none"};case"lift":return{hover:"translateY(-2px)",active:"translateY(-1px)"};case"push":return{hover:"translateY(2px)",active:"translateY(2px)"};case"scale":return{hover:"scale(1.05)",active:"scale(1.02)"};case"rotate":return{hover:"rotate(3deg)",active:"rotate(2deg)"};case"custom":return{hover:"var(--btn-hover-transform, none)",active:"var(--btn-active-transform, var(--btn-hover-transform, none))"};default:return{}}})(s),d=l.hover??"none",h=l.active??d??"none",k=this._resolveSize(this.size),S=this.iconOnly?this._toSquarePadding(k.padding):k.padding,$=this.iconOnly?"0":k.gap;let B=0;const C="bordered"===this.variant||"ghost"===this.variant,_="faded"===this.variant||"shadow"===this.variant;if(C)B=2;else if(_)B=1;else if(a.border&&a.border.includes("px")){const o=a.border.match(/(\d+)px/);B=o?parseInt(o[1]):0}let z=B;if(a.hoverBorder&&a.hoverBorder.includes("px")){const o=a.hoverBorder.match(/(\d+)px/);z=o?parseInt(o[1]):B}let O="link"===this.variant?"0":S;if(B>0){const o=S.split(" ");if(1===o.length){const t=parseFloat(o[0]);O=`${Math.max(t-B,2)}px`}else if(2===o.length){const t=parseFloat(o[0]),r=parseFloat(o[1]),e=Math.max(t-B,2);O=this.iconOnly?`${e}px`:`${e}px ${r}px`}else if(4===o.length){const t=parseFloat(o[0]),r=parseFloat(o[1]),e=parseFloat(o[2]),n=parseFloat(o[3]);O=`${Math.max(t-B,2)}px ${r}px ${Math.max(e-B,2)}px ${n}px`}}const F=parseFloat(k.fontSize),M=parseFloat(k.icon);let j,Y;if("link"===this.variant)j="auto";else if(this.iconOnly){const o=2*(parseFloat(O)||0)+M+2*B;j=`${o}px`,Y=`${o}px`}else{const o=O.split(" ");j=`${(o.length>=2?parseFloat(o[0])+parseFloat(o[2]||o[0]):2*parseFloat(o[0])||16)+F+4+2*B}px`}const R=a.hoverBorder,E=this._isThemeBorderShorthand(a.border)||this._isThemeBorderShorthand(R),N=this._borderColorFromShorthand(a.border),L=this._borderColorFromShorthand(R??a.border),T={"--btn-color":a.color,"--btn-shadow":a.shadow,"--btn-radius":"link"===this.variant?"0":w(this.radius),"--btn-color-hover":a.hoverColor,"--btn-shadow-hover":a.hoverShadow,"--btn-transform":"none","--btn-transform-hover":d,"--btn-transform-active":h,"--btn-padding":O,"--btn-font-size":k.fontSize,"--btn-gap":$,"--icon-size":k.icon,"--spinner-size":k.spinner,"--btn-min-height":j,...Y?{"--btn-min-width":Y}:{},"--btn-border-width":`${B}px`,"--btn-border-width-hover":`${z}px`};E?(T["--btn-border"]=a.border,T["--btn-border-hover"]=R??a.border):(T["--btn-border-color"]=N,T["--btn-border-color-hover"]=L),"gradient"===this.variant?(T["--btn-bg"]=a.bg,T["--btn-bg-hover"]=a.hoverBg,T["--btn-bg-color"]=t,T["--btn-bg-color-hover"]=t):(T["--btn-bg-color"]=a.bg,T["--btn-bg-color-hover"]=a.hoverBg),this.inGroup&&("gradient"===this.variant?(T["--btn-bg"]="transparent",T["--btn-bg-hover"]="color-mix(in srgb, white 8%, transparent)"):T["--btn-bg-color-hover"]=T["--btn-bg-color"]??"transparent",T["--btn-color-hover"]=T["--btn-color"],E?T["--btn-border-hover"]=T["--btn-border"]??a.border:T["--btn-border-color-hover"]=T["--btn-border-color"]??N,T["--btn-shadow-hover"]="none","relief"===this.variant?(T["--btn-transform-hover"]="translateY(2px)",T["--btn-transform-active"]="translateY(2px)"):(T["--btn-transform-hover"]="none",T["--btn-transform-active"]="none")),this._styleVars=T}focusButton(){this.renderRoot.querySelector("button")?.focus()}clickButton(){this.disabled||this.loading||this.renderRoot.querySelector("button")?.click()}_createRipple(o){const t=o.currentTarget,r=t.getBoundingClientRect(),e=document.createElement("span"),n=Math.max(t.offsetWidth,t.offsetHeight),a=o.clientX-r.left-n/2,i=o.clientY-r.top-n/2;e.style.width=e.style.height=`${n}px`,e.style.left=`${a}px`,e.style.top=`${i}px`;const s=getComputedStyle(t).backgroundColor||"",l=s.includes("255, 255, 255")||s.includes("rgba(0, 0, 0, 0)");e.style.background=l?"rgba(0, 0, 0, 0.2)":"rgba(255, 255, 255, 0.3)",e.className="ripple";const d=t.querySelectorAll(".ripple");d.length>=3&&d[0]&&d[0].remove(),t.appendChild(e),e.addEventListener("animationend",()=>e.remove())}formDisabledCallback(o){this.disabled=o}get formOwner(){if("undefined"==typeof document)return null;const o="string"==typeof this.form?this.form.trim():"";return this.internals.form||(o?document.getElementById(o):null)||this.closest("form")}_handleClick(o){if(this.disabled||this.loading)return void o.preventDefault();"button"===this.type&&o.preventDefault(),this._createRipple(o);const t=this.formOwner;"submit"!==this.type?"reset"!==this.type||t?.reset():t?.requestSubmit()}_iconOnlyName(){return this.iconL||this.iconR}render(){const o=this._iconOnlyName(),t=this.iconOnly&&(this.label||o)?this.label||o:void 0;return e`
+import{unsafeCSS as t,css as o,LitElement as r,html as e,nothing as n}from"lit";import{property as a,state as i,eventOptions as s,customElement as l}from"lit/decorators.js";import{when as d}from"lit/directives/when.js";import{styleMap as h}from"lit/directives/style-map.js";import{resolveColor as p,createGradient as c,tuneSurfaceVariantForDefaultColor as b,semanticSoftSurfaceTokens as v,darkShade as g,fadeMix as u,skyBorderPrimaryShorthand as f,hoverShade as y,resolveSemanticSurfaceKey as m}from"../helper/utils/color-resolver.js";import{cssOnFillEnhance as x,ON_COLOR_FALLBACK_LIGHT as k,contrastOverlay as w}from"../helper/utils/contrast-color.js";import{resolveRadius as S}from"../helper/utils/size-resolver.js";import{PresetController as $}from"../helper/controllers/preset-controller.js";import{skyFocusRingHostStyles as _}from"../helper/styles/focus-ring.js";import{ifDefined as B}from"lit/directives/if-defined.js";import{SkyIcon as C}from"../sky-icon/sky-icon.js";var z=Object.defineProperty,O=Object.getOwnPropertyDescriptor,F=(t,o,r,e)=>{for(var n,a=e>1?void 0:e?O(o,r):o,i=t.length-1;i>=0;i--)(n=t[i])&&(a=(e?n(o,r,a):n(a))||a);return e&&a&&z(o,r,a),a};let j=class extends r{constructor(){super(),this.variant="solid",this.color="primary",this.type="button",this.form="",this.size="md",this.radius="md",this.label="Button",this.disabled=!1,this.loading=!1,this.iconL="",this.iconR="",this.iconOnly=!1,this.colors="",this.animation="auto",this.preset="",this.inGroup=!1,this._hasMeaningfulSlot=!1,this._styleVars={},this._presets=new $(this,{isPaused:()=>this.inGroup,onChange:()=>{this._styleDirty=!0}}),this._lastPresetRevision=-1,this._styleDirty=!0,this._onSlotChange=t=>{const o=t.target,r=this._slotHasMeaningfulContent(o);r!==this._hasMeaningfulSlot&&(this._hasMeaningfulSlot=r)},this.internals=this.attachInternals()}_slotHasMeaningfulContent(t){return t.assignedNodes({flatten:!0}).some(t=>t.nodeType===Node.ELEMENT_NODE||(t.textContent??"").trim().length>0)}_toSquarePadding(t){const o=parseFloat(t.trim().split(/\s+/)[0]);return`${Number.isFinite(o)?o:8}px`}_resolveSize(t){const o={xs:{padding:"3px 7px",fontSize:"12px",gap:"3px",icon:"14px",spinner:"14px"},sm:{padding:"5px 9px",fontSize:"14px",gap:"4px",icon:"16px",spinner:"16px"},md:{padding:"8px 14px",fontSize:"16px",gap:"5px",icon:"18px",spinner:"18px"},lg:{padding:"10px 18px",fontSize:"18px",gap:"6px",icon:"20px",spinner:"20px"},xl:{padding:"14px 24px",fontSize:"20px",gap:"8px",icon:"24px",spinner:"24px"}};if(o[t])return o[t];const r=String(t).trim().match(/^([\d.]+)(px|rem|em)?$/i),e=r?.[2]||"px",n=r?parseFloat(r[1]):16,a=`${n}${e}`,i=t=>`${Math.round(100*t)/100}${e}`,s=(t,o,r)=>Math.max(o,Math.min(r,t)),l=s(.55*n,4,18),d=s(.9*n,8,28),h=s(.3*n,3,10),p=s(1.125*n,12,28),c=p;return{padding:`${i(l)} ${i(d)}`,fontSize:a,gap:i(h),icon:i(p),spinner:i(c)}}_isThemeBorderShorthand(t){return!(!t||"none"===t)&&/^var\(--sky-border-/.test(t.trim())}_borderColorFromShorthand(t){if(!t||"none"===t||this._isThemeBorderShorthand(t))return"transparent";const o=t.match(/solid\s+(.+)$/);return o?.[1]?.trim()??"transparent"}update(t){this._rebuildStyleVars(t),super.update(t)}_rebuildStyleVars(t){const o=this._presets.revision!==this._lastPresetRevision;if(!(this._styleDirty||o||["color","variant","size","radius","animation","preset","inGroup","disabled","loading","colors","iconOnly"].some(o=>t.has(o)))&&Object.keys(this._styleVars).length>0)return;this._lastPresetRevision=this._presets.revision,this._styleDirty=!1;const r=p(this.color),e=k,n={solid:{bg:r,color:e,border:"none",shadow:"none",hoverBg:r,hoverColor:e,hoverShadow:"var(--sky-box-shadow-hover)"},faded:{bg:"var(--sky-hover-tertiary)",color:r,border:"1px solid var(--sky-text-tertiary)",shadow:"none",hoverBg:"var(--sky-hover-secondary)",hoverColor:r,hoverShadow:"none",hoverBorder:"1px solid var(--sky-text-secondary)"},bordered:{bg:"transparent",color:r,border:`2px solid ${r}`,shadow:"none",hoverBg:"transparent",hoverColor:r,hoverShadow:"none",hoverBorder:`2px solid ${y(r,25)}`},transparent:{bg:"transparent",color:r,border:"none",shadow:"none",hoverBg:u(r,15),hoverColor:r,hoverShadow:"none"},flat:{bg:u(r,20),color:y(r,30),border:"none",shadow:"none",hoverBg:u(r,25),hoverColor:y(r,35),hoverShadow:"none"},ghost:{bg:"transparent",color:r,border:`2px solid ${r}`,shadow:"none",hoverBg:r,hoverColor:e,hoverShadow:"none"},shadow:{bg:"var(--sky-glass-primary)",color:"var(--sky-text-primary)",border:f(),shadow:"none",hoverBg:"var(--sky-glass-primary)",hoverColor:r,hoverShadow:"var(--sky-box-shadow-hover)",hoverBorder:f()},relief:{bg:r,color:e,border:"none",shadow:`\n        inset 0 1px 0 rgba(255,255,255,0.4),\n        0 3px 0 ${g(r,40)},\n        0 4px 6px -1px ${u(r,40)}\n      `,hoverBg:r,hoverColor:e,hoverShadow:"none"},gradient:{bg:c(this.colors,r),color:e,border:"none",shadow:"none",hoverBg:c(this.colors,r),hoverColor:e,hoverShadow:"none"},link:{bg:"transparent",color:r,border:"none",shadow:"none",hoverBg:"transparent",hoverColor:r,hoverShadow:"none"}},a=this.variant,i=this.color,s=this.size,l=this.radius,d=this.animation,h=a in n?a:"solid";let x={...n[h]};Object.assign(x,b(i,h,n[h]));const w=m(i);if(w&&("flat"===h||"faded"===h)){const t=v(w,{bordered:"faded"===h});Object.assign(x,{bg:t.bg,color:t.color,border:"faded"===h?t.border:"none",hoverBg:"var(--sky-hover-primary)",hoverColor:t.color,hoverShadow:"none",..."faded"===h?{hoverBorder:t.border}:{}})}const $=this.inGroup?"none":d,_="auto"===$?{solid:{hover:"translateY(-3px)",active:"translateY(-3px)"},faded:{},bordered:{},transparent:{},flat:{},ghost:{},shadow:{hover:"translateY(-3px)",active:"translateY(-3px)"},gradient:{},relief:{hover:"translateY(2px)",active:"translateY(2px)"},link:{}}[h]:(t=>{switch(t){case"none":return{hover:"none",active:"none"};case"lift":return{hover:"translateY(-2px)",active:"translateY(-1px)"};case"push":return{hover:"translateY(2px)",active:"translateY(2px)"};case"scale":return{hover:"scale(1.05)",active:"scale(1.02)"};case"rotate":return{hover:"rotate(3deg)",active:"rotate(2deg)"};case"custom":return{hover:"var(--btn-hover-transform, none)",active:"var(--btn-active-transform, var(--btn-hover-transform, none))"};default:return{}}})($),B=_.hover??"none",C=_.active??B??"none",z=this._resolveSize(s),O=this.iconOnly?this._toSquarePadding(z.padding):z.padding,F=this.iconOnly?"0":z.gap;let j=0;if("bordered"===a||"ghost"===a)j=2;else if("faded"===a||"shadow"===a)j=1;else if(x.border&&x.border.includes("px")){const t=x.border.match(/(\d+)px/);j=t?parseInt(t[1]):0}let M=j;if(x.hoverBorder&&x.hoverBorder.includes("px")){const t=x.hoverBorder.match(/(\d+)px/);M=t?parseInt(t[1]):j}let R="link"===a?"0":O;if(j>0){const t=O.split(" ");if(1===t.length){const o=parseFloat(t[0]);R=`${Math.max(o-j,2)}px`}else if(2===t.length){const o=parseFloat(t[0]),r=parseFloat(t[1]),e=Math.max(o-j,2);R=this.iconOnly?`${e}px`:`${e}px ${r}px`}else if(4===t.length){const o=parseFloat(t[0]),r=parseFloat(t[1]),e=parseFloat(t[2]),n=parseFloat(t[3]);R=`${Math.max(o-j,2)}px ${r}px ${Math.max(e-j,2)}px ${n}px`}}const Y=parseFloat(z.fontSize),V=parseFloat(z.icon);let D,G;if("link"===a)D="auto";else if(this.iconOnly){const t=2*(parseFloat(R)||0)+V+2*j;D=`${t}px`,G=`${t}px`}else{const t=R.split(" ");D=`${(t.length>=2?parseFloat(t[0])+parseFloat(t[2]||t[0]):2*parseFloat(t[0])||16)+Y+4+2*j}px`}const E=x.hoverBorder,N=this._isThemeBorderShorthand(x.border)||this._isThemeBorderShorthand(E),P=this._borderColorFromShorthand(x.border),L=this._borderColorFromShorthand(E??x.border),T={"--btn-color":x.color,"--btn-shadow":x.shadow,"--btn-radius":"link"===a?"0":S(l),"--btn-color-hover":x.hoverColor,"--btn-shadow-hover":x.hoverShadow,"--btn-transform":"none","--btn-transform-hover":B,"--btn-transform-active":C,"--btn-padding":R,"--btn-font-size":z.fontSize,"--btn-gap":F,"--icon-size":z.icon,"--spinner-size":z.spinner,"--btn-min-height":D,...G?{"--btn-min-width":G}:{},"--btn-border-width":`${j}px`,"--btn-border-width-hover":`${M}px`,"--sky-focus-ring-color":r};N?(T["--btn-border"]=x.border,T["--btn-border-hover"]=E??x.border):(T["--btn-border-color"]=P,T["--btn-border-color-hover"]=L),"gradient"===a?(T["--btn-bg"]=x.bg,T["--btn-bg-hover"]=x.hoverBg,T["--btn-bg-color"]=r,T["--btn-bg-color-hover"]=r):(T["--btn-bg-color"]=x.bg,T["--btn-bg-color-hover"]=x.hoverBg),this.inGroup&&("gradient"===a?(T["--btn-bg"]="transparent",T["--btn-bg-hover"]="color-mix(in srgb, white 8%, transparent)"):T["--btn-bg-color-hover"]=T["--btn-bg-color"]??"transparent",T["--btn-color-hover"]=T["--btn-color"],N?T["--btn-border-hover"]=T["--btn-border"]??x.border:T["--btn-border-color-hover"]=T["--btn-border-color"]??P,T["--btn-shadow-hover"]="none","relief"===a?(T["--btn-transform-hover"]="translateY(2px)",T["--btn-transform-active"]="translateY(2px)"):(T["--btn-transform-hover"]="none",T["--btn-transform-active"]="none")),this._styleVars=T}focusButton(){this.renderRoot.querySelector("button")?.focus()}clickButton(){this.disabled||this.loading||this.renderRoot.querySelector("button")?.click()}_createRipple(t){const o=t.currentTarget,r=o.getBoundingClientRect(),e=document.createElement("span"),n=Math.max(o.offsetWidth,o.offsetHeight),a=t.clientX-r.left-n/2,i=t.clientY-r.top-n/2;e.style.width=e.style.height=`${n}px`,e.style.left=`${a}px`,e.style.top=`${i}px`;const s=getComputedStyle(o).backgroundColor||"";e.style.background=w(s),e.className="ripple";const l=o.querySelectorAll(".ripple");l.length>=3&&l[0]&&l[0].remove(),o.appendChild(e),e.addEventListener("animationend",()=>e.remove())}formDisabledCallback(t){this.disabled=t}get formOwner(){if("undefined"==typeof document)return null;const t="string"==typeof this.form?this.form.trim():"";return this.internals.form||(t?document.getElementById(t):null)||this.closest("form")}_handleClick(t){if(this.disabled||this.loading)return void t.preventDefault();"button"===this.type&&t.preventDefault(),this._createRipple(t);const o=this.formOwner;"submit"!==this.type?"reset"!==this.type||o?.reset():o?.requestSubmit()}_iconOnlyName(){return this.iconL||this.iconR}render(){const t=this._iconOnlyName(),o=this.iconOnly&&(this.label||t)?this.label||t:void 0;return e`
       <button
         part="button"
         style=${h(this._styleVars)}
         type=${this.type}
-        form=${S(this.form??void 0)}
-        aria-label=${S(t)}
+        form=${B(this.form??void 0)}
+        aria-label=${B(o)}
         ?disabled=${this.disabled||this.loading}
         ?loading=${this.loading}
         @click=${this._handleClick}
       >
-        ${d(this.iconOnly,()=>d(o,()=>e`<sky-icon part="icon" icon="${o}"></sky-icon>`),()=>e`
+        ${d(this.iconOnly,()=>d(t,()=>e`<sky-icon part="icon" icon="${t}"></sky-icon>`),()=>e`
             ${d(this.iconL,()=>e`<sky-icon part="icon" icon="${this.iconL}"></sky-icon>`)}
             <slot @slotchange=${this._onSlotChange}></slot>
             ${this._hasMeaningfulSlot?n:this.label}
@@ -21,7 +21,7 @@ import{unsafeCSS as o,css as t,LitElement as r,html as e,nothing as n}from"lit";
             </div>
           `)}
       </button>
-    `}};z.dependencies={"sky-icon":$},z.formAssociated=!0,z.styles=t`
+    `}};j.dependencies={"sky-icon":C},j.formAssociated=!0,j.styles=[_,o`
     :host {
       display: inline-block;
     }
@@ -42,7 +42,7 @@ import{unsafeCSS as o,css as t,LitElement as r,html as e,nothing as n}from"lit";
       gap: 0;
     }
 
-    :host([variant='link']) button {
+    :host([variant="link"]) button {
       width: auto;
       border-radius: 0;
       text-decoration: none;
@@ -52,16 +52,14 @@ import{unsafeCSS as o,css as t,LitElement as r,html as e,nothing as n}from"lit";
       background-repeat: no-repeat;
       background-size: 0% 1px;
       transition:
-        background-size var(--sky-duration-normal, 200ms)
-          var(--sky-ease-default, ease),
+        background-size var(--sky-duration-normal, 200ms) var(--sky-ease-default, ease),
         color var(--sky-duration-fast, 120ms) var(--sky-ease-default, ease),
         box-shadow var(--sky-duration-fast, 120ms) var(--sky-ease-default, ease),
-        border-color var(--sky-duration-fast, 120ms)
-          var(--sky-ease-default, ease),
+        border-color var(--sky-duration-fast, 120ms) var(--sky-ease-default, ease),
         transform var(--sky-duration-fast, 120ms) var(--sky-ease-default, ease);
     }
-    :host([variant='link']) button:hover:not(:disabled),
-    :host([variant='link']) button:focus-visible:not(:disabled) {
+    :host([variant="link"]) button:hover:not(:disabled),
+    :host([variant="link"]) button:focus-visible:not(:disabled) {
       background-color: transparent;
       background-image: linear-gradient(currentColor, currentColor);
       background-position: 0 100%;
@@ -90,10 +88,7 @@ import{unsafeCSS as o,css as t,LitElement as r,html as e,nothing as n}from"lit";
       box-shadow: var(--btn-shadow, none);
       transform: var(--btn-transform, none);
       gap: var(--btn-gap, var(--sky-space-1, 4px));
-      padding: var(
-        --btn-padding,
-        var(--sky-space-2, 8px) var(--sky-space-3, 14px)
-      );
+      padding: var(--btn-padding, var(--sky-space-2, 8px) var(--sky-space-3, 14px));
       font-size: var(--btn-font-size, var(--sky-font-size-md, 1rem));
       font-family: var(--sky-font);
       white-space: nowrap;
@@ -105,10 +100,8 @@ import{unsafeCSS as o,css as t,LitElement as r,html as e,nothing as n}from"lit";
       backdrop-filter: none;
       -webkit-backdrop-filter: none;
       transition:
-        background-color var(--sky-duration-fast, 120ms)
-          var(--sky-ease-default, ease),
-        border-color var(--sky-duration-fast, 120ms)
-          var(--sky-ease-default, ease),
+        background-color var(--sky-duration-fast, 120ms) var(--sky-ease-default, ease),
+        border-color var(--sky-duration-fast, 120ms) var(--sky-ease-default, ease),
         color var(--sky-duration-fast, 120ms) var(--sky-ease-default, ease),
         box-shadow var(--sky-duration-fast, 120ms) var(--sky-ease-default, ease),
         transform var(--sky-duration-fast, 120ms) var(--sky-ease-out, ease),
@@ -118,17 +111,14 @@ import{unsafeCSS as o,css as t,LitElement as r,html as e,nothing as n}from"lit";
       flex-shrink: 0;
     }
 
-    :host([variant='gradient']) button {
+    :host([variant="gradient"]) button {
       background: var(--btn-bg);
       background-color: transparent;
     }
 
     button:hover:not(:disabled),
     button:focus-visible:not(:disabled) {
-      background-color: var(
-        --btn-bg-color-hover,
-        var(--btn-bg-color, transparent)
-      );
+      background-color: var(--btn-bg-color-hover, var(--btn-bg-color, transparent));
       color: var(--btn-color-hover, var(--btn-color));
       box-shadow: var(--btn-shadow-hover, var(--btn-shadow));
       border: var(
@@ -148,13 +138,14 @@ import{unsafeCSS as o,css as t,LitElement as r,html as e,nothing as n}from"lit";
       min-height: var(--btn-min-height, auto);
     }
 
-    :host([variant='gradient']) button:hover:not(:disabled),
-    :host([variant='gradient']) button:focus-visible:not(:disabled) {
+    :host([variant="gradient"]) button:hover:not(:disabled),
+    :host([variant="gradient"]) button:focus-visible:not(:disabled) {
       background: var(--btn-bg-hover, var(--btn-bg));
     }
     button:focus-visible:not(:disabled) {
       box-shadow:
-        var(--sky-focus-ring), var(--btn-shadow-hover, var(--btn-shadow, none));
+        var(--sky-focus-ring),
+        var(--btn-shadow-hover, var(--btn-shadow, none));
     }
     button:active:not(:disabled) {
       transform: var(
@@ -170,7 +161,7 @@ import{unsafeCSS as o,css as t,LitElement as r,html as e,nothing as n}from"lit";
 
     @media (prefers-reduced-motion: reduce) {
       button,
-      :host([variant='link']) button {
+      :host([variant="link"]) button {
         transition: none;
       }
 
@@ -237,7 +228,8 @@ import{unsafeCSS as o,css as t,LitElement as r,html as e,nothing as n}from"lit";
       }
     }
 
-    /* Solid fills: enhance FG with contrast-color when supported (fallback remains --btn-color). */
-    ${o(k([{selector:':host(:is([variant="solid"], [variant="shadow"], [variant="relief"], [variant="gradient"]):not([data-text-explicit])) button',fillVar:"--btn-bg-color"},{selector:':host(:is([variant="solid"], [variant="shadow"], [variant="relief"], [variant="gradient"]):not([data-text-explicit])) button:hover:not(:disabled), :host(:is([variant="solid"], [variant="shadow"], [variant="relief"], [variant="gradient"]):not([data-text-explicit])) button:focus-visible:not(:disabled)',fillVar:"var(--btn-bg-color-hover, var(--btn-bg-color))"}]))}
-  `,_([a({type:String,reflect:!0})],z.prototype,"variant",2),_([a({type:String})],z.prototype,"color",2),_([a({type:String})],z.prototype,"type",2),_([a({type:String})],z.prototype,"form",2),_([a({type:String})],z.prototype,"size",2),_([a({type:String})],z.prototype,"radius",2),_([a({type:String})],z.prototype,"label",2),_([a({type:Boolean,reflect:!0})],z.prototype,"disabled",2),_([a({type:Boolean,reflect:!0})],z.prototype,"loading",2),_([a({type:String})],z.prototype,"iconL",2),_([a({type:String})],z.prototype,"iconR",2),_([a({type:Boolean,reflect:!0})],z.prototype,"iconOnly",2),_([a({type:String})],z.prototype,"colors",2),_([a({type:String,reflect:!0})],z.prototype,"animation",2),_([a({type:Boolean,reflect:!0})],z.prototype,"inGroup",2),_([i()],z.prototype,"_hasMeaningfulSlot",2),_([s({passive:!1})],z.prototype,"_handleClick",1),z=_([l("sky-button")],z);export{z as SkyButton};
+    /* Solid fills: enhance FG with contrast-color when supported (fallback remains --btn-color).
+       Glass shadow variant is excluded. Ghost is enhanced only on hover (fill becomes solid). */
+    ${t(x([{selector:':host(:is([variant="solid"], [variant="relief"], [variant="gradient"]):not([data-text-explicit])) button',fillVar:"--btn-bg-color"},{selector:':host(:is([variant="solid"], [variant="relief"], [variant="gradient"]):not([data-text-explicit])) button sky-icon',fillVar:"--btn-bg-color"},{selector:':host(:is([variant="solid"], [variant="relief"], [variant="gradient"]):not([data-text-explicit])) button:hover:not(:disabled), :host(:is([variant="solid"], [variant="relief"], [variant="gradient"]):not([data-text-explicit])) button:focus-visible:not(:disabled)',fillVar:"var(--btn-bg-color-hover, var(--btn-bg-color))"},{selector:':host(:is([variant="solid"], [variant="relief"], [variant="gradient"]):not([data-text-explicit])) button:hover:not(:disabled) sky-icon, :host(:is([variant="solid"], [variant="relief"], [variant="gradient"]):not([data-text-explicit])) button:focus-visible:not(:disabled) sky-icon',fillVar:"var(--btn-bg-color-hover, var(--btn-bg-color))"},{selector:':host([variant="ghost"]:not([data-text-explicit])) button:hover:not(:disabled), :host([variant="ghost"]:not([data-text-explicit])) button:focus-visible:not(:disabled)',fillVar:"var(--btn-bg-color-hover, var(--btn-bg-color))"},{selector:':host([variant="ghost"]:not([data-text-explicit])) button:hover:not(:disabled) sky-icon, :host([variant="ghost"]:not([data-text-explicit])) button:focus-visible:not(:disabled) sky-icon',fillVar:"var(--btn-bg-color-hover, var(--btn-bg-color))"}]))}
+  `],F([a({type:String,reflect:!0})],j.prototype,"variant",2),F([a({type:String})],j.prototype,"color",2),F([a({type:String})],j.prototype,"type",2),F([a({type:String})],j.prototype,"form",2),F([a({type:String})],j.prototype,"size",2),F([a({type:String})],j.prototype,"radius",2),F([a({type:String})],j.prototype,"label",2),F([a({type:Boolean,reflect:!0})],j.prototype,"disabled",2),F([a({type:Boolean,reflect:!0})],j.prototype,"loading",2),F([a({type:String})],j.prototype,"iconL",2),F([a({type:String})],j.prototype,"iconR",2),F([a({type:Boolean,reflect:!0})],j.prototype,"iconOnly",2),F([a({type:String})],j.prototype,"colors",2),F([a({type:String,reflect:!0})],j.prototype,"animation",2),F([a({type:String,reflect:!0})],j.prototype,"preset",2),F([a({type:Boolean,reflect:!0})],j.prototype,"inGroup",2),F([i()],j.prototype,"_hasMeaningfulSlot",2),F([s({passive:!1})],j.prototype,"_handleClick",1),j=F([l("sky-button")],j);export{j as SkyButton};
 //# sourceMappingURL=sky-button.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sky-button.js","sources":["../../src/sky-button/sky-button.ts"],"sourcesContent":["import { LitElement, html, css, nothing, unsafeCSS } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  eventOptions,\n} from 'lit/decorators.js';\nimport { when } from 'lit/directives/when.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport {\n  createGradient,\n  darkShade,\n  fadeMix,\n  hoverShade,\n  resolveColor,\n  resolveTextColorForToken,\n  resolveSemanticSurfaceKey,\n  semanticSoftSurfaceTokens,\n  skyBorderPrimaryShorthand,\n  tuneSurfaceVariantForDefaultColor,\n} from '../helper/utils/color-resolver';\nimport { cssOnFillEnhance } from '../helper/utils/contrast-color';\nimport { resolveRadius } from '../helper/utils/size-resolver';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { SkyIcon } from '../sky-icon/sky-icon.js';\n\nexport type SkyButtonVariant =\n  | 'solid'\n  | 'faded'\n  | 'bordered'\n  | 'transparent'\n  | 'flat'\n  | 'ghost'\n  | 'relief'\n  | 'gradient'\n  | 'shadow'\n  | 'link';\nexport type SkyButtonType = 'button' | 'submit' | 'reset';\nexport type SkyButtonAnimation =\n  'auto' | 'none' | 'lift' | 'push' | 'scale' | 'rotate' | 'custom';\n\n/**\n * @element sky-button\n *\n * @summary Styled button supporting variants, icons, loading state, ripple feedback, and form-associated behavior.\n *\n * @status stable\n * @since 1.0.0\n *\n * @documentation https://sky-ui.com/components/button\n * @dependency sky-icon\n *\n * @slot - Default slot for the button label (replaces `label` property if used).\n *\n * @csspart button - The native `<button>` element.\n * @csspart icon - The optional left/right icons.\n * @csspart loading-overlay - Overlay displayed when loading.\n * @csspart spinner - Spinner displayed when loading.\n *\n * @property {SkyButtonVariant} variant - Visual variant of the button. Use `\"link\"` for text-only control with underline on hover. Default: `\"solid\"`.\n * @property {string} color - Base color token or custom CSS color. Default: `\"primary\"`.\n * @property {SkyButtonType} type - Button type attribute. Default: `\"button\"`.\n * @property {string} form - Associated form ID for custom submit handling.\n * @property {string} size - Preset size token (`xs…xl`) or CSS size (e.g., `\"15px\"`, `\"1rem\"`). Default: `\"md\"`.\n * @property {string} radius - Preset radius token (`none…full`) or CSS radius (e.g., `\"12px\"`). Default: `\"md\"`.\n * @property {string} label - Text label for the button. Ignored if default slot is used. Default: `\"Button\"`.\n * @property {boolean} disabled - Whether the button is disabled. Default: `false`.\n * @property {boolean} loading - Shows a loading overlay when true. Default: `false`.\n * @property {string} iconL - Optional left-side icon (Iconify name). Default: `\"\"`.\n * @property {string} iconR - Optional right-side icon (Iconify name). Default: `\"\"`.\n * @property {boolean} iconOnly - Square padding for icon-only buttons; hides label text. Default: `false`.\n * @property {string} colors - Comma-separated color stops for gradient variant. Default: `\"\"`.\n * @property {SkyButtonAnimation} animation - Transform animation style. Default: `\"auto\"`.\n * @method focusButton Focuses the internal native button.\n * @method clickButton Triggers a click on the internal native button when enabled.\n *\n * @example\n * ```html\n * <sky-button variant=\"gradient\" colors=\"linear@90deg: primary, secondary\" iconl=\"ion:add\" label=\"Create\"></sky-button>\n * ```\n * ```vue\n * <template>\n *   <sky-button variant=\"gradient\" colors=\"linear@90deg: primary, secondary\" iconl=\"ion:add\" label=\"Create\"></sky-button>\n * </template>\n * ```\n * ```jsx\n * export default function Demo() {\n *   return <sky-button variant=\"gradient\" colors=\"linear@90deg: primary, secondary\" iconl=\"ion:add\" label=\"Create\"></sky-button>;\n * }\n * ```\n */\n@customElement('sky-button')\nexport class SkyButton extends LitElement {\n  static dependencies: Record<string, CustomElementConstructor> = {\n    'sky-icon': SkyIcon,\n  };\n\n  static formAssociated = true;\n\n  private internals: ElementInternals;\n  /** Visual variant of the button. */\n  @property({ type: String, reflect: true }) variant: SkyButtonVariant =\n    'solid';\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  /** Button type attribute. */\n  @property({ type: String }) type: SkyButtonType = 'button';\n\n  /** Associated form ID for custom form handling. */\n  @property({ type: String }) form = '';\n\n  /** Preset tokens (`xs…xl`) OR CSS size like `\"15px\"`. */\n  @property({ type: String }) size: string = 'md';\n\n  /** Preset tokens (`none…full`) OR any CSS border radius. */\n  @property({ type: String }) radius: string = 'md';\n\n  /** Text label for the button. */\n  @property({ type: String }) label = 'Button';\n\n  /** Disables the button. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Shows a loading spinner overlay. */\n  @property({ type: Boolean, reflect: true }) loading = false;\n\n  /** Left-side icon (Iconify icon name). */\n  @property({ type: String }) iconL = '';\n\n  /** Right-side icon (Iconify icon name). */\n  @property({ type: String }) iconR = '';\n\n  /** Square padding and compact layout when the button shows only an icon. */\n  @property({ type: Boolean, reflect: true }) iconOnly = false;\n\n  /** Colors for gradient variant. */\n  @property({ type: String }) colors: string = '';\n\n  /** Animation style for hover/active transforms. */\n  @property({ type: String, reflect: true }) animation: SkyButtonAnimation =\n    'auto';\n\n  /** @internal Set by `sky-button-group` to flatten grouped button visuals. */\n  @property({ type: Boolean, reflect: true }) inGroup = false;\n\n  @state() private _hasMeaningfulSlot = false;\n\n  /** Inline CSS variable cache. */\n  private _styleVars: Record<string, string> = {};\n\n  static styles = css`\n    :host {\n      display: inline-block;\n    }\n\n    :host([disabled]) {\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n\n    :host([in-group]) {\n      align-self: stretch;\n    }\n\n    :host([iconOnly]) button {\n      width: auto;\n      min-width: var(--btn-min-width, auto);\n      aspect-ratio: 1;\n      gap: 0;\n    }\n\n    :host([variant='link']) button {\n      width: auto;\n      border-radius: 0;\n      text-decoration: none;\n      background-color: transparent;\n      background-image: linear-gradient(currentColor, currentColor);\n      background-position: 0 100%;\n      background-repeat: no-repeat;\n      background-size: 0% 1px;\n      transition:\n        background-size var(--sky-duration-normal, 200ms)\n          var(--sky-ease-default, ease),\n        color var(--sky-duration-fast, 120ms) var(--sky-ease-default, ease),\n        box-shadow var(--sky-duration-fast, 120ms) var(--sky-ease-default, ease),\n        border-color var(--sky-duration-fast, 120ms)\n          var(--sky-ease-default, ease),\n        transform var(--sky-duration-fast, 120ms) var(--sky-ease-default, ease);\n    }\n    :host([variant='link']) button:hover:not(:disabled),\n    :host([variant='link']) button:focus-visible:not(:disabled) {\n      background-color: transparent;\n      background-image: linear-gradient(currentColor, currentColor);\n      background-position: 0 100%;\n      background-repeat: no-repeat;\n      background-size: 100% 1px;\n    }\n\n    button {\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      overflow: hidden;\n      border-radius: var(--btn-radius, var(--sky-radius-primary));\n      font: inherit;\n      cursor: pointer;\n      box-sizing: border-box;\n      outline: none;\n      border: var(\n        --btn-border,\n        var(--btn-border-width, 0) solid var(--btn-border-color, transparent)\n      );\n      background-color: var(--btn-bg-color, transparent);\n      background-image: none;\n      color: var(--btn-color);\n      box-shadow: var(--btn-shadow, none);\n      transform: var(--btn-transform, none);\n      gap: var(--btn-gap, var(--sky-space-1, 4px));\n      padding: var(\n        --btn-padding,\n        var(--sky-space-2, 8px) var(--sky-space-3, 14px)\n      );\n      font-size: var(--btn-font-size, var(--sky-font-size-md, 1rem));\n      font-family: var(--sky-font);\n      white-space: nowrap;\n      text-align: center;\n      text-decoration: var(--btn-text-decoration, none);\n      width: 100%;\n      height: auto;\n      min-height: var(--btn-min-height, auto);\n      backdrop-filter: none;\n      -webkit-backdrop-filter: none;\n      transition:\n        background-color var(--sky-duration-fast, 120ms)\n          var(--sky-ease-default, ease),\n        border-color var(--sky-duration-fast, 120ms)\n          var(--sky-ease-default, ease),\n        color var(--sky-duration-fast, 120ms) var(--sky-ease-default, ease),\n        box-shadow var(--sky-duration-fast, 120ms) var(--sky-ease-default, ease),\n        transform var(--sky-duration-fast, 120ms) var(--sky-ease-out, ease),\n        opacity var(--sky-duration-fast, 120ms) var(--sky-ease-default, ease);\n\n      /* Ensure button doesn't shrink */\n      flex-shrink: 0;\n    }\n\n    :host([variant='gradient']) button {\n      background: var(--btn-bg);\n      background-color: transparent;\n    }\n\n    button:hover:not(:disabled),\n    button:focus-visible:not(:disabled) {\n      background-color: var(\n        --btn-bg-color-hover,\n        var(--btn-bg-color, transparent)\n      );\n      color: var(--btn-color-hover, var(--btn-color));\n      box-shadow: var(--btn-shadow-hover, var(--btn-shadow));\n      border: var(\n        --btn-border-hover,\n        var(\n          --btn-border,\n          var(--btn-border-width, 0) solid\n            var(--btn-border-color-hover, var(--btn-border-color, transparent))\n        )\n      );\n      text-decoration: var(\n        --btn-text-decoration-hover,\n        var(--btn-text-decoration, none)\n      );\n      transform: var(--btn-transform-hover, var(--btn-transform, none));\n      height: auto;\n      min-height: var(--btn-min-height, auto);\n    }\n\n    :host([variant='gradient']) button:hover:not(:disabled),\n    :host([variant='gradient']) button:focus-visible:not(:disabled) {\n      background: var(--btn-bg-hover, var(--btn-bg));\n    }\n    button:focus-visible:not(:disabled) {\n      box-shadow:\n        var(--sky-focus-ring), var(--btn-shadow-hover, var(--btn-shadow, none));\n    }\n    button:active:not(:disabled) {\n      transform: var(\n        --btn-transform-active,\n        var(--btn-transform-hover, var(--btn-transform, none))\n      );\n    }\n    button:disabled {\n      opacity: var(--sky-opacity-disabled, 0.5);\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      button,\n      :host([variant='link']) button {\n        transition: none;\n      }\n\n      button:active:not(:disabled) {\n        transform: none;\n      }\n\n      .ripple {\n        animation: none;\n      }\n\n      .spinner {\n        animation: none;\n      }\n    }\n\n    .ripple {\n      position: absolute;\n      border-radius: 50%;\n      background: rgba(255, 255, 255, 0.5);\n      transform: scale(0);\n      animation: ripple-animation 0.6s linear;\n      pointer-events: none;\n    }\n    @keyframes ripple-animation {\n      to {\n        transform: scale(4);\n        opacity: 0;\n      }\n    }\n    sky-icon {\n      display: inline-block;\n      width: 1em;\n      height: 1em;\n      font-size: var(--icon-size, 18px);\n      backdrop-filter: none;\n      -webkit-backdrop-filter: none;\n    }\n    .loading-overlay {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      background: var(--sky-overlay-secondary);\n      visibility: hidden;\n      backdrop-filter: none;\n      -webkit-backdrop-filter: none;\n    }\n    button[loading] .loading-overlay {\n      visibility: visible;\n    }\n    .spinner {\n      width: var(--spinner-size, 18px);\n      height: var(--spinner-size, 18px);\n      border: 2px solid currentColor;\n      border-top-color: transparent;\n      border-radius: 50%;\n      animation: spin 1s linear infinite;\n    }\n    @keyframes spin {\n      to {\n        transform: rotate(360deg);\n      }\n    }\n\n    /* Solid fills: enhance FG with contrast-color when supported (fallback remains --btn-color). */\n    ${unsafeCSS(\n      cssOnFillEnhance([\n        {\n          selector:\n            ':host(:is([variant=\"solid\"], [variant=\"shadow\"], [variant=\"relief\"], [variant=\"gradient\"]):not([data-text-explicit])) button',\n          fillVar: '--btn-bg-color',\n        },\n        {\n          selector:\n            ':host(:is([variant=\"solid\"], [variant=\"shadow\"], [variant=\"relief\"], [variant=\"gradient\"]):not([data-text-explicit])) button:hover:not(:disabled), :host(:is([variant=\"solid\"], [variant=\"shadow\"], [variant=\"relief\"], [variant=\"gradient\"]):not([data-text-explicit])) button:focus-visible:not(:disabled)',\n          fillVar: 'var(--btn-bg-color-hover, var(--btn-bg-color))',\n        },\n      ])\n    )}\n  `;\n\n  constructor() {\n    super();\n    // @ts-ignore\n    this.internals = this.attachInternals();\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  // ✅ Event handler update (allowed). Not a lifecycle hook.\n  private _onSlotChange = (e: Event) => {\n    const slot = e.target as HTMLSlotElement;\n    const next = this._slotHasMeaningfulContent(slot);\n    // Only set state if it actually changed to avoid extra updates\n    if (next !== this._hasMeaningfulSlot) this._hasMeaningfulSlot = next;\n  };\n\n  /** Uses vertical padding for equal sides (icon-only square control). */\n  private _toSquarePadding(padding: string): string {\n    const py = parseFloat(padding.trim().split(/\\s+/)[0]);\n    const n = Number.isFinite(py) ? py : 8;\n    return `${n}px`;\n  }\n\n  private _resolveSize(input: string): {\n    padding: string;\n    fontSize: string;\n    gap: string;\n    icon: string;\n    spinner: string;\n  } {\n    const presets: Record<\n      string,\n      {\n        padding: string;\n        fontSize: string;\n        gap: string;\n        icon: string;\n        spinner: string;\n      }\n    > = {\n      xs: {\n        padding: '3px 7px',\n        fontSize: '12px',\n        gap: '3px',\n        icon: '14px',\n        spinner: '14px',\n      },\n      sm: {\n        padding: '5px 9px',\n        fontSize: '14px',\n        gap: '4px',\n        icon: '16px',\n        spinner: '16px',\n      },\n      md: {\n        padding: '8px 14px',\n        fontSize: '16px',\n        gap: '5px',\n        icon: '18px',\n        spinner: '18px',\n      },\n      lg: {\n        padding: '10px 18px',\n        fontSize: '18px',\n        gap: '6px',\n        icon: '20px',\n        spinner: '20px',\n      },\n      xl: {\n        padding: '14px 24px',\n        fontSize: '20px',\n        gap: '8px',\n        icon: '24px',\n        spinner: '24px',\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]) : 16;\n    const fs = `${fsNum}${unit}`;\n\n    const to = (n: number) => `${Math.round(n * 100) / 100}${unit}`;\n    const clamp = (n: number, min: number, max: number) =>\n      Math.max(min, Math.min(max, n));\n\n    const py = clamp(fsNum * 0.55, 4, 18);\n    const px = clamp(fsNum * 0.9, 8, 28);\n    const gap = clamp(fsNum * 0.3, 3, 10);\n    const icon = clamp(fsNum * 1.125, 12, 28);\n    const spinner = icon;\n\n    return {\n      padding: `${to(py)} ${to(px)}`,\n      fontSize: fs,\n      gap: to(gap),\n      icon: to(icon),\n      spinner: to(spinner),\n    };\n  }\n\n  /** Theme tokens like `var(--sky-border-primary)` are full border shorthands, not colors. */\n  private _isThemeBorderShorthand(border: string | undefined): boolean {\n    if (!border || border === 'none') return false;\n    return /^var\\(--sky-border-/.test(border.trim());\n  }\n\n  /** Extracts the color token from a `Npx solid …` border shorthand. */\n  private _borderColorFromShorthand(border: string | undefined): string {\n    if (!border || border === 'none' || this._isThemeBorderShorthand(border)) {\n      return 'transparent';\n    }\n    const match = border.match(/solid\\s+(.+)$/);\n    return match?.[1]?.trim() ?? 'transparent';\n  }\n\n  protected override willUpdate(changedProperties: Map<string, unknown>): void {\n    const styleProps = [\n      'color',\n      'variant',\n      'size',\n      'radius',\n      'animation',\n      'inGroup',\n      'disabled',\n      'loading',\n      'colors',\n      'iconOnly',\n    ];\n    const needsStyleUpdate = styleProps.some((p) => changedProperties.has(p));\n    if (!needsStyleUpdate && Object.keys(this._styleVars).length > 0) {\n      return;\n    }\n\n    const baseColor = resolveColor(this.color);\n    const textColor = resolveTextColorForToken(this.color);\n\n    const variantDefaults = {\n      solid: {\n        bg: baseColor,\n        color: textColor,\n        border: 'none',\n        shadow: 'none',\n        hoverBg: baseColor,\n        hoverColor: textColor,\n        hoverShadow: 'var(--sky-box-shadow-hover)',\n      },\n      faded: {\n        bg: 'var(--sky-hover-tertiary)',\n        color: baseColor,\n        border: '1px solid var(--sky-text-tertiary)',\n        shadow: 'none',\n        hoverBg: 'var(--sky-hover-secondary)',\n        hoverColor: baseColor,\n        hoverShadow: 'none',\n        hoverBorder: '1px solid var(--sky-text-secondary)',\n      },\n      bordered: {\n        bg: 'transparent',\n        color: baseColor,\n        border: `2px solid ${baseColor}`,\n        shadow: 'none',\n        hoverBg: 'transparent',\n        hoverColor: baseColor,\n        hoverShadow: 'none',\n        hoverBorder: `2px solid ${hoverShade(baseColor, 25)}`,\n      },\n      transparent: {\n        bg: 'transparent',\n        color: baseColor,\n        border: 'none',\n        shadow: 'none',\n        hoverBg: fadeMix(baseColor, 15),\n        hoverColor: baseColor,\n        hoverShadow: 'none',\n      },\n      flat: {\n        bg: fadeMix(baseColor, 20),\n        color: hoverShade(baseColor, 30),\n        border: 'none',\n        shadow: 'none',\n        hoverBg: fadeMix(baseColor, 25),\n        hoverColor: hoverShade(baseColor, 35),\n        hoverShadow: 'none',\n      },\n      ghost: {\n        bg: 'transparent',\n        color: baseColor,\n        border: `2px solid ${baseColor}`,\n        shadow: 'none',\n        hoverBg: baseColor,\n        hoverColor: textColor,\n        hoverShadow: 'none',\n      },\n      shadow: {\n        bg: 'var(--sky-glass-primary)',\n        color: 'var(--sky-text-primary)',\n        border: skyBorderPrimaryShorthand(),\n        shadow: 'none',\n        hoverBg: 'var(--sky-glass-primary)',\n        hoverColor: baseColor,\n        hoverShadow: 'var(--sky-box-shadow-hover)',\n        hoverBorder: skyBorderPrimaryShorthand(),\n      },\n      relief: {\n        bg: baseColor,\n        color: textColor,\n        border: 'none',\n        shadow: `\n        inset 0 1px 0 rgba(255,255,255,0.4),\n        0 3px 0 ${darkShade(baseColor, 40)},\n        0 4px 6px -1px ${fadeMix(baseColor, 40)}\n      `,\n        hoverBg: baseColor,\n        hoverColor: textColor,\n        hoverShadow: 'none',\n      },\n      gradient: {\n        bg: createGradient(this.colors, baseColor),\n        color: textColor,\n        border: 'none',\n        shadow: 'none',\n        hoverBg: createGradient(this.colors, baseColor),\n        hoverColor: textColor,\n        hoverShadow: 'none',\n      },\n      link: {\n        bg: 'transparent',\n        color: baseColor,\n        border: 'none',\n        shadow: 'none',\n        hoverBg: 'transparent',\n        hoverColor: baseColor,\n        hoverShadow: 'none',\n      },\n    } as const;\n\n    const transformsAuto = {\n      solid: { hover: 'translateY(-3px)', active: 'translateY(-3px)' },\n      faded: {},\n      bordered: {},\n      transparent: {},\n      flat: {},\n      ghost: {},\n      shadow: { hover: 'translateY(-3px)', active: 'translateY(-3px)' },\n      gradient: {},\n      relief: { hover: 'translateY(2px)', active: 'translateY(2px)' },\n      link: {},\n    } as const;\n\n    const presetToTransform = (p: typeof this.animation) => {\n      switch (p) {\n        case 'none':\n          return { hover: 'none', active: 'none' };\n        case 'lift':\n          return { hover: 'translateY(-2px)', active: 'translateY(-1px)' };\n        case 'push':\n          return { hover: 'translateY(2px)', active: 'translateY(2px)' };\n        case 'scale':\n          return { hover: 'scale(1.05)', active: 'scale(1.02)' };\n        case 'rotate':\n          return { hover: 'rotate(3deg)', active: 'rotate(2deg)' };\n        case 'custom':\n          return {\n            hover: 'var(--btn-hover-transform, none)',\n            active:\n              'var(--btn-active-transform, var(--btn-hover-transform, none))',\n          };\n        default:\n          return {};\n      }\n    };\n\n    const current = (\n      this.variant in variantDefaults ? this.variant : 'solid'\n    ) as keyof typeof variantDefaults;\n    let v = { ...variantDefaults[current] };\n    Object.assign(\n      v,\n      tuneSurfaceVariantForDefaultColor(\n        this.color,\n        current,\n        variantDefaults[current]\n      )\n    );\n\n    const semanticKey = resolveSemanticSurfaceKey(this.color);\n    if (semanticKey && (current === 'flat' || current === 'faded')) {\n      const soft = semanticSoftSurfaceTokens(semanticKey, {\n        bordered: current === 'faded',\n      });\n      Object.assign(v, {\n        bg: soft.bg,\n        color: soft.color,\n        border: current === 'faded' ? soft.border : 'none',\n        hoverBg: 'var(--sky-hover-primary)',\n        hoverColor: soft.color,\n        hoverShadow: 'none',\n        ...(current === 'faded' ? { hoverBorder: soft.border } : {}),\n      });\n    }\n\n    const animationMode = this.inGroup ? 'none' : this.animation;\n    const chosen =\n      animationMode === 'auto'\n        ? transformsAuto[current]\n        : presetToTransform(animationMode);\n    const hoverTransform = (chosen as any).hover ?? 'none';\n    const activeTransform = (chosen as any).active ?? hoverTransform ?? 'none';\n\n    const s = this._resolveSize(this.size);\n    const basePadding = this.iconOnly\n      ? this._toSquarePadding(s.padding)\n      : s.padding;\n    const baseGap = this.iconOnly ? '0' : s.gap;\n\n    // Determine border width for current variant\n    let borderWidth = 0;\n    const hasBorder2 = this.variant === 'bordered' || this.variant === 'ghost';\n    const hasBorder1 = this.variant === 'faded' || this.variant === 'shadow';\n\n    if (hasBorder2) {\n      borderWidth = 2;\n    } else if (hasBorder1) {\n      borderWidth = 1;\n    } else if (v.border && v.border.includes('px')) {\n      const match = v.border.match(/(\\d+)px/);\n      borderWidth = match ? parseInt(match[1]) : 0;\n    }\n\n    // For hover border width\n    let hoverBorderWidth = borderWidth;\n    if ((v as any).hoverBorder && (v as any).hoverBorder.includes('px')) {\n      const match = (v as any).hoverBorder.match(/(\\d+)px/);\n      hoverBorderWidth = match ? parseInt(match[1]) : borderWidth;\n    }\n\n    // ADJUST PADDING for bordered variants to maintain same visual height\n    let adjustedPadding = this.variant === 'link' ? '0' : basePadding;\n    if (borderWidth > 0) {\n      // Parse the original padding\n      const paddingParts = basePadding.split(' ');\n      if (paddingParts.length === 1) {\n        const all = parseFloat(paddingParts[0]);\n        const adjusted = Math.max(all - borderWidth, 2);\n        adjustedPadding = `${adjusted}px`;\n      } else if (paddingParts.length === 2) {\n        // Format: \"vertical horizontal\"\n        const vertical = parseFloat(paddingParts[0]);\n        const horizontal = parseFloat(paddingParts[1]);\n\n        // Reduce vertical padding by border width to maintain same content height\n        const adjustedVertical = Math.max(vertical - borderWidth, 2);\n        adjustedPadding = this.iconOnly\n          ? `${adjustedVertical}px`\n          : `${adjustedVertical}px ${horizontal}px`;\n      } else if (paddingParts.length === 4) {\n        // Format: \"top right bottom left\"\n        const top = parseFloat(paddingParts[0]);\n        const right = parseFloat(paddingParts[1]);\n        const bottom = parseFloat(paddingParts[2]);\n        const left = parseFloat(paddingParts[3]);\n\n        // Reduce top/bottom padding by border width\n        const adjustedTop = Math.max(top - borderWidth, 2);\n        const adjustedBottom = Math.max(bottom - borderWidth, 2);\n        adjustedPadding = `${adjustedTop}px ${right}px ${adjustedBottom}px ${left}px`;\n      }\n    }\n\n    // Calculate base height using ADJUSTED padding\n    const fontSize = parseFloat(s.fontSize);\n    const iconPx = parseFloat(s.icon);\n    let btnMinHeight: string;\n    let btnMinWidth: string | undefined;\n    if (this.variant === 'link') {\n      btnMinHeight = 'auto';\n    } else if (this.iconOnly) {\n      const pad = parseFloat(adjustedPadding) || 0;\n      const side = pad * 2 + iconPx + borderWidth * 2;\n      btnMinHeight = `${side}px`;\n      btnMinWidth = `${side}px`;\n    } else {\n      const paddingValues = adjustedPadding.split(' ');\n      const verticalPadding =\n        paddingValues.length >= 2\n          ? parseFloat(paddingValues[0]) +\n            parseFloat(paddingValues[2] || paddingValues[0])\n          : parseFloat(paddingValues[0]) * 2 || 16;\n      const baseHeight = verticalPadding + fontSize + 4 + borderWidth * 2;\n      btnMinHeight = `${baseHeight}px`;\n    }\n\n    const hoverBorderShorthand = (v as { hoverBorder?: string }).hoverBorder;\n    const usesThemeBorder =\n      this._isThemeBorderShorthand(v.border) ||\n      this._isThemeBorderShorthand(hoverBorderShorthand);\n    const borderColor = this._borderColorFromShorthand(v.border);\n    const borderColorHover = this._borderColorFromShorthand(\n      hoverBorderShorthand ?? v.border\n    );\n\n    const vars: Record<string, string> = {\n      '--btn-color': v.color,\n      '--btn-shadow': v.shadow,\n      '--btn-radius':\n        this.variant === 'link' ? '0' : resolveRadius(this.radius),\n      '--btn-color-hover': v.hoverColor,\n      '--btn-shadow-hover': v.hoverShadow,\n      '--btn-transform': 'none',\n      '--btn-transform-hover': hoverTransform,\n      '--btn-transform-active': activeTransform,\n      '--btn-padding': adjustedPadding, // Use adjusted padding!\n      '--btn-font-size': s.fontSize,\n      '--btn-gap': baseGap,\n      '--icon-size': s.icon,\n      '--spinner-size': s.spinner,\n\n      // Set min-height to maintain consistent visual height\n      '--btn-min-height': btnMinHeight,\n      ...(btnMinWidth ? { '--btn-min-width': btnMinWidth } : {}),\n\n      // Keep border width variables\n      '--btn-border-width': `${borderWidth}px`,\n      '--btn-border-width-hover': `${hoverBorderWidth}px`,\n    };\n\n    if (usesThemeBorder) {\n      vars['--btn-border'] = v.border;\n      vars['--btn-border-hover'] = hoverBorderShorthand ?? v.border;\n    } else {\n      vars['--btn-border-color'] = borderColor;\n      vars['--btn-border-color-hover'] = borderColorHover;\n    }\n\n    if (this.variant === 'gradient') {\n      vars['--btn-bg'] = v.bg;\n      vars['--btn-bg-hover'] = v.hoverBg;\n      // Opaque stop for contrast-color() — gradient paint still uses --btn-bg.\n      vars['--btn-bg-color'] = baseColor;\n      vars['--btn-bg-color-hover'] = baseColor;\n    } else {\n      vars['--btn-bg-color'] = v.bg;\n      vars['--btn-bg-color-hover'] = v.hoverBg;\n    }\n\n    if (this.inGroup) {\n      // In grouped mode, do not apply sky-button's own hover skin.\n      // The container group controls visual interaction consistency.\n      if (this.variant === 'gradient') {\n        // One gradient is painted on sky-button-group's `.group`; segments stay clear\n        // (same idea as `::slotted(button)` transparent fills for native buttons).\n        vars['--btn-bg'] = 'transparent';\n        vars['--btn-bg-hover'] = 'color-mix(in srgb, white 8%, transparent)';\n      } else {\n        vars['--btn-bg-color-hover'] = vars['--btn-bg-color'] ?? 'transparent';\n      }\n      vars['--btn-color-hover'] = vars['--btn-color'];\n      if (usesThemeBorder) {\n        vars['--btn-border-hover'] = vars['--btn-border'] ?? v.border;\n      } else {\n        vars['--btn-border-color-hover'] =\n          vars['--btn-border-color'] ?? borderColor;\n      }\n      vars['--btn-shadow-hover'] = 'none';\n      if (this.variant === 'relief') {\n        vars['--btn-transform-hover'] = 'translateY(2px)';\n        vars['--btn-transform-active'] = 'translateY(2px)';\n      } else {\n        vars['--btn-transform-hover'] = 'none';\n        vars['--btn-transform-active'] = 'none';\n      }\n    }\n\n    this._styleVars = vars;\n  }\n\n  /**\n   * Focuses the internal native button.\n   *\n   * @returns {void}\n   */\n  public focusButton(): void {\n    this.renderRoot.querySelector<HTMLButtonElement>('button')?.focus();\n  }\n\n  /**\n   * Triggers a click on the internal native button when enabled.\n   *\n   * @returns {void}\n   */\n  public clickButton(): void {\n    if (this.disabled || this.loading) return;\n    this.renderRoot.querySelector<HTMLButtonElement>('button')?.click();\n  }\n\n  private _createRipple(event: MouseEvent): void {\n    const button = event.currentTarget as HTMLElement;\n    const rect = button.getBoundingClientRect();\n    const ripple = document.createElement('span');\n\n    const size = Math.max(button.offsetWidth, button.offsetHeight);\n    const x = event.clientX - rect.left - size / 2;\n    const y = event.clientY - rect.top - size / 2;\n\n    ripple.style.width = ripple.style.height = `${size}px`;\n    ripple.style.left = `${x}px`;\n    ripple.style.top = `${y}px`;\n\n    const bg = getComputedStyle(button).backgroundColor || '';\n    const isLightBg =\n      bg.includes('255, 255, 255') || bg.includes('rgba(0, 0, 0, 0)');\n    ripple.style.background = isLightBg\n      ? 'rgba(0, 0, 0, 0.2)'\n      : 'rgba(255, 255, 255, 0.3)';\n\n    ripple.className = 'ripple';\n    const existing = button.querySelectorAll('.ripple');\n    const maxRipples = 3;\n    if (existing.length >= maxRipples && existing[0]) {\n      existing[0].remove();\n    }\n    button.appendChild(ripple);\n    ripple.addEventListener('animationend', () => ripple.remove());\n  }\n\n  formDisabledCallback(disabled: boolean): void {\n    this.disabled = disabled;\n  }\n\n  get formOwner(): HTMLFormElement | null {\n    if (typeof document === 'undefined') return null;\n    const formId = typeof this.form === 'string' ? this.form.trim() : '';\n    return (\n      this.internals.form ||\n      (formId\n        ? (document.getElementById(formId) as HTMLFormElement | null)\n        : null) ||\n      this.closest('form')\n    );\n  }\n\n  @eventOptions({ passive: false })\n  private _handleClick(event: MouseEvent): void {\n    if (this.disabled || this.loading) {\n      event.preventDefault();\n      return;\n    }\n\n    // If button type is \"button\", prevent any default navigation-like behavior\n    if (this.type === 'button') {\n      event.preventDefault();\n    }\n\n    this._createRipple(event);\n\n    const form = this.formOwner;\n    if (this.type === 'submit') {\n      form?.requestSubmit();\n      return;\n    }\n    if (this.type === 'reset') {\n      form?.reset();\n      return;\n    }\n  }\n\n  private _iconOnlyName(): string {\n    return this.iconL || this.iconR;\n  }\n\n  override render() {\n    const iconOnlyName = this._iconOnlyName();\n    const ariaLabel =\n      this.iconOnly && (this.label || iconOnlyName)\n        ? this.label || iconOnlyName\n        : undefined;\n\n    return html`\n      <button\n        part=\"button\"\n        style=${styleMap(this._styleVars)}\n        type=${this.type}\n        form=${ifDefined(this.form ?? undefined)}\n        aria-label=${ifDefined(ariaLabel)}\n        ?disabled=${this.disabled || this.loading}\n        ?loading=${this.loading}\n        @click=${this._handleClick}\n      >\n        ${when(\n          this.iconOnly,\n          () =>\n            when(\n              iconOnlyName,\n              () =>\n                html`<sky-icon part=\"icon\" icon=\"${iconOnlyName}\"></sky-icon>`\n            ),\n          () => html`\n            ${when(this.iconL, () => html`<sky-icon part=\"icon\" icon=\"${this.iconL}\"></sky-icon>`)}\n            <slot @slotchange=${this._onSlotChange}></slot>\n            ${this._hasMeaningfulSlot ? nothing : this.label}\n            ${when(this.iconR, () => html`<sky-icon part=\"icon\" icon=\"${this.iconR}\"></sky-icon>`)}\n          `\n        )}\n        ${when(\n          this.loading,\n          () => html`\n            <div class=\"loading-overlay\" part=\"loading-overlay\">\n              <div class=\"spinner\" part=\"spinner\"></div>\n            </div>\n          `\n        )}\n      </button>\n    `;\n  }\n}\n"],"names":["SkyButton","LitElement","constructor","super","this","variant","color","type","form","size","radius","label","disabled","loading","iconL","iconR","iconOnly","colors","animation","inGroup","_hasMeaningfulSlot","_styleVars","_onSlotChange","e","slot","target","next","_slotHasMeaningfulContent","internals","attachInternals","slotEl","assignedNodes","flatten","some","n","nodeType","Node","ELEMENT_NODE","textContent","trim","length","_toSquarePadding","padding","py","parseFloat","split","Number","isFinite","_resolveSize","input","presets","xs","fontSize","gap","icon","spinner","sm","md","lg","xl","m","String","match","unit","fsNum","fs","to","Math","round","clamp","min","max","px","_isThemeBorderShorthand","border","test","_borderColorFromShorthand","willUpdate","changedProperties","p","has","Object","keys","baseColor","resolveColor","textColor","resolveTextColorForToken","variantDefaults","solid","bg","shadow","hoverBg","hoverColor","hoverShadow","faded","hoverBorder","bordered","hoverShade","transparent","fadeMix","flat","ghost","skyBorderPrimaryShorthand","relief","darkShade","gradient","createGradient","link","current","v","assign","tuneSurfaceVariantForDefaultColor","semanticKey","resolveSemanticSurfaceKey","soft","semanticSoftSurfaceTokens","animationMode","chosen","hover","active","presetToTransform","hoverTransform","activeTransform","s","basePadding","baseGap","borderWidth","hasBorder2","hasBorder1","includes","parseInt","hoverBorderWidth","adjustedPadding","paddingParts","all","vertical","horizontal","adjustedVertical","top","right","bottom","left","iconPx","btnMinHeight","btnMinWidth","side","paddingValues","hoverBorderShorthand","usesThemeBorder","borderColor","borderColorHover","vars","resolveRadius","focusButton","renderRoot","querySelector","focus","clickButton","click","_createRipple","event","button","currentTarget","rect","getBoundingClientRect","ripple","document","createElement","offsetWidth","offsetHeight","x","clientX","y","clientY","style","width","height","getComputedStyle","backgroundColor","isLightBg","background","className","existing","querySelectorAll","remove","appendChild","addEventListener","formDisabledCallback","formOwner","formId","getElementById","closest","_handleClick","preventDefault","reset","requestSubmit","_iconOnlyName","render","iconOnlyName","ariaLabel","html","styleMap","ifDefined","when","nothing","dependencies","SkyIcon","formAssociated","styles","css","unsafeCSS","cssOnFillEnhance","selector","fillVar","__decorateClass","property","reflect","prototype","Boolean","state","eventOptions","passive","customElement"],"mappings":"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"}
+{"version":3,"file":"sky-button.js","sources":["../../src/sky-button/sky-button.ts"],"sourcesContent":["import { LitElement, html, css, nothing, unsafeCSS } from \"lit\";\nimport { customElement, property, state, eventOptions } from \"lit/decorators.js\";\nimport { when } from \"lit/directives/when.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport {\n  createGradient,\n  darkShade,\n  fadeMix,\n  hoverShade,\n  resolveColor,\n  resolveSemanticSurfaceKey,\n  semanticSoftSurfaceTokens,\n  skyBorderPrimaryShorthand,\n  tuneSurfaceVariantForDefaultColor,\n} from \"../helper/utils/color-resolver\";\nimport { cssOnFillEnhance, contrastOverlay, ON_COLOR_FALLBACK_LIGHT } from \"../helper/utils/contrast-color\";\nimport { resolveRadius } from \"../helper/utils/size-resolver\";\nimport { PresetController } from \"../helper/controllers/preset-controller\";\nimport { skyFocusRingHostStyles } from \"../helper/styles/focus-ring\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { SkyIcon } from \"../sky-icon/sky-icon.js\";\n\nexport type SkyButtonVariant =\n  | \"solid\"\n  | \"faded\"\n  | \"bordered\"\n  | \"transparent\"\n  | \"flat\"\n  | \"ghost\"\n  | \"relief\"\n  | \"gradient\"\n  | \"shadow\"\n  | \"link\";\nexport type SkyButtonType = \"button\" | \"submit\" | \"reset\";\nexport type SkyButtonAnimation =\n  | \"auto\"\n  | \"none\"\n  | \"lift\"\n  | \"push\"\n  | \"scale\"\n  | \"rotate\"\n  | \"custom\";\n\n/**\n * @element sky-button\n *\n * @summary Styled button supporting variants, icons, loading state, ripple feedback, and form-associated behavior.\n *\n * @status stable\n * @since 1.0.0\n *\n * @documentation https://sky-ui.com/components/button\n * @dependency sky-icon\n *\n * @slot - Default slot for the button label (replaces `label` property if used).\n *\n * @csspart button - The native `<button>` element.\n * @csspart icon - The optional left/right icons.\n * @csspart loading-overlay - Overlay displayed when loading.\n * @csspart spinner - Spinner displayed when loading.\n *\n * @property {SkyButtonVariant} variant - Visual variant of the button. Use `\"link\"` for text-only control with underline on hover. Default: `\"solid\"`.\n * @property {string} color - Base color token or custom CSS color. Default: `\"primary\"`.\n * @property {SkyButtonType} type - Button type attribute. Default: `\"button\"`.\n * @property {string} form - Associated form ID for custom submit handling.\n * @property {string} size - Preset size token (`xs…xl`) or CSS size (e.g., `\"15px\"`, `\"1rem\"`). Default: `\"md\"`.\n * @property {string} radius - Preset radius token (`none…full`) or CSS radius (e.g., `\"12px\"`). Default: `\"md\"`.\n * @property {string} label - Text label for the button. Ignored if default slot is used. Default: `\"Button\"`.\n * @property {boolean} disabled - Whether the button is disabled. Default: `false`.\n * @property {boolean} loading - Shows a loading overlay when true. Default: `false`.\n * @property {string} iconL - Optional left-side icon (Iconify name). Default: `\"\"`.\n * @property {string} iconR - Optional right-side icon (Iconify name). Default: `\"\"`.\n * @property {boolean} iconOnly - Square padding for icon-only buttons; hides label text. Default: `false`.\n * @property {string} colors - Comma-separated color stops for gradient variant. Default: `\"\"`.\n * @property {SkyButtonAnimation} animation - Transform animation style. Default: `\"auto\"`.\n * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.\n * @method focusButton Focuses the internal native button.\n * @method clickButton Triggers a click on the internal native button when enabled.\n *\n * @example\n * ```html\n * <sky-button variant=\"gradient\" colors=\"linear@90deg: primary, secondary\" iconl=\"ion:add\" label=\"Create\"></sky-button>\n * <sky-button preset=\"cancel\" label=\"Cancel\"></sky-button>\n * ```\n * ```vue\n * <template>\n *   <sky-button variant=\"gradient\" colors=\"linear@90deg: primary, secondary\" iconl=\"ion:add\" label=\"Create\"></sky-button>\n *   <sky-button preset=\"cancel\" label=\"Cancel\"></sky-button>\n * </template>\n * ```\n * ```jsx\n * export default function Demo() {\n *   return (\n *     <>\n *       <sky-button variant=\"gradient\" colors=\"linear@90deg: primary, secondary\" iconl=\"ion:add\" label=\"Create\"></sky-button>\n *       <sky-button preset=\"cancel\" label=\"Cancel\"></sky-button>\n *     </>\n *   );\n * }\n * ```\n */\n@customElement(\"sky-button\")\nexport class SkyButton extends LitElement {\n\n  static dependencies: Record<string, CustomElementConstructor> = {\n    \"sky-icon\": SkyIcon,\n  };\n\n  static formAssociated = true;\n\n  private internals: ElementInternals;\n  /** Visual variant of the button. */\n  @property({ type: String, reflect: true }) variant: SkyButtonVariant = \"solid\";\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  /** Button type attribute. */\n  @property({ type: String }) type: SkyButtonType = \"button\";\n\n  /** Associated form ID for custom form handling. */\n  @property({ type: String }) form = \"\";\n\n  /** Preset tokens (`xs…xl`) OR CSS size like `\"15px\"`. */\n  @property({ type: String }) size: string = \"md\";\n\n  /** Preset tokens (`none…full`) OR any CSS border radius. */\n  @property({ type: String }) radius: string = \"md\";\n\n  /** Text label for the button. */\n  @property({ type: String }) label = \"Button\";\n\n  /** Disables the button. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Shows a loading spinner overlay. */\n  @property({ type: Boolean, reflect: true }) loading = false;\n\n  /** Left-side icon (Iconify icon name). */\n  @property({ type: String }) iconL = \"\";\n\n  /** Right-side icon (Iconify icon name). */\n  @property({ type: String }) iconR = \"\";\n\n  /** Square padding and compact layout when the button shows only an icon. */\n  @property({ type: Boolean, reflect: true }) iconOnly = false;\n\n  /** Colors for gradient variant. */\n  @property({ type: String }) colors: string = \"\";\n\n  /** Animation style for hover/active transforms. */\n  @property({ type: String, reflect: true }) animation: SkyButtonAnimation = \"auto\";\n\n  /** Named prop preset from nearest `sky-config-provider`. */\n  @property({ type: String, reflect: true }) preset = \"\";\n\n  /** @internal Set by `sky-button-group` to flatten grouped button visuals. */\n  @property({ type: Boolean, reflect: true }) inGroup = false;\n\n  @state() private _hasMeaningfulSlot = false;\n\n  /** Inline CSS variable cache. */\n  private _styleVars: Record<string, string> = {};\n\n  private _presets = new PresetController(this, {\n    isPaused: () => this.inGroup,\n    onChange: () => {\n      this._styleDirty = true;\n    },\n  });\n\n  private _lastPresetRevision = -1;\n  /** Set when presets change so `update()` rebuilds CSS vars after hostUpdate. */\n  private _styleDirty = true;\n\n  static styles = [\n    skyFocusRingHostStyles,\n    css`\n    :host {\n      display: inline-block;\n    }\n\n    :host([disabled]) {\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n\n    :host([in-group]) {\n      align-self: stretch;\n    }\n\n    :host([iconOnly]) button {\n      width: auto;\n      min-width: var(--btn-min-width, auto);\n      aspect-ratio: 1;\n      gap: 0;\n    }\n\n    :host([variant=\"link\"]) button {\n      width: auto;\n      border-radius: 0;\n      text-decoration: none;\n      background-color: transparent;\n      background-image: linear-gradient(currentColor, currentColor);\n      background-position: 0 100%;\n      background-repeat: no-repeat;\n      background-size: 0% 1px;\n      transition:\n        background-size var(--sky-duration-normal, 200ms) var(--sky-ease-default, ease),\n        color var(--sky-duration-fast, 120ms) var(--sky-ease-default, ease),\n        box-shadow var(--sky-duration-fast, 120ms) var(--sky-ease-default, ease),\n        border-color var(--sky-duration-fast, 120ms) var(--sky-ease-default, ease),\n        transform var(--sky-duration-fast, 120ms) var(--sky-ease-default, ease);\n    }\n    :host([variant=\"link\"]) button:hover:not(:disabled),\n    :host([variant=\"link\"]) button:focus-visible:not(:disabled) {\n      background-color: transparent;\n      background-image: linear-gradient(currentColor, currentColor);\n      background-position: 0 100%;\n      background-repeat: no-repeat;\n      background-size: 100% 1px;\n    }\n\n    button {\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      overflow: hidden;\n      border-radius: var(--btn-radius, var(--sky-radius-primary));\n      font: inherit;\n      cursor: pointer;\n      box-sizing: border-box;\n      outline: none;\n      border: var(\n        --btn-border,\n        var(--btn-border-width, 0) solid var(--btn-border-color, transparent)\n      );\n      background-color: var(--btn-bg-color, transparent);\n      background-image: none;\n      color: var(--btn-color);\n      box-shadow: var(--btn-shadow, none);\n      transform: var(--btn-transform, none);\n      gap: var(--btn-gap, var(--sky-space-1, 4px));\n      padding: var(--btn-padding, var(--sky-space-2, 8px) var(--sky-space-3, 14px));\n      font-size: var(--btn-font-size, var(--sky-font-size-md, 1rem));\n      font-family: var(--sky-font);\n      white-space: nowrap;\n      text-align: center;\n      text-decoration: var(--btn-text-decoration, none);\n      width: 100%;\n      height: auto;\n      min-height: var(--btn-min-height, auto);\n      backdrop-filter: none;\n      -webkit-backdrop-filter: none;\n      transition:\n        background-color var(--sky-duration-fast, 120ms) var(--sky-ease-default, ease),\n        border-color var(--sky-duration-fast, 120ms) var(--sky-ease-default, ease),\n        color var(--sky-duration-fast, 120ms) var(--sky-ease-default, ease),\n        box-shadow var(--sky-duration-fast, 120ms) var(--sky-ease-default, ease),\n        transform var(--sky-duration-fast, 120ms) var(--sky-ease-out, ease),\n        opacity var(--sky-duration-fast, 120ms) var(--sky-ease-default, ease);\n\n      /* Ensure button doesn't shrink */\n      flex-shrink: 0;\n    }\n\n    :host([variant=\"gradient\"]) button {\n      background: var(--btn-bg);\n      background-color: transparent;\n    }\n\n    button:hover:not(:disabled),\n    button:focus-visible:not(:disabled) {\n      background-color: var(--btn-bg-color-hover, var(--btn-bg-color, transparent));\n      color: var(--btn-color-hover, var(--btn-color));\n      box-shadow: var(--btn-shadow-hover, var(--btn-shadow));\n      border: var(\n        --btn-border-hover,\n        var(\n          --btn-border,\n          var(--btn-border-width, 0) solid\n            var(--btn-border-color-hover, var(--btn-border-color, transparent))\n        )\n      );\n      text-decoration: var(\n        --btn-text-decoration-hover,\n        var(--btn-text-decoration, none)\n      );\n      transform: var(--btn-transform-hover, var(--btn-transform, none));\n      height: auto;\n      min-height: var(--btn-min-height, auto);\n    }\n\n    :host([variant=\"gradient\"]) button:hover:not(:disabled),\n    :host([variant=\"gradient\"]) button:focus-visible:not(:disabled) {\n      background: var(--btn-bg-hover, var(--btn-bg));\n    }\n    button:focus-visible:not(:disabled) {\n      box-shadow:\n        var(--sky-focus-ring),\n        var(--btn-shadow-hover, var(--btn-shadow, none));\n    }\n    button:active:not(:disabled) {\n      transform: var(\n        --btn-transform-active,\n        var(--btn-transform-hover, var(--btn-transform, none))\n      );\n    }\n    button:disabled {\n      opacity: var(--sky-opacity-disabled, 0.5);\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      button,\n      :host([variant=\"link\"]) button {\n        transition: none;\n      }\n\n      button:active:not(:disabled) {\n        transform: none;\n      }\n\n      .ripple {\n        animation: none;\n      }\n\n      .spinner {\n        animation: none;\n      }\n    }\n\n    .ripple {\n      position: absolute;\n      border-radius: 50%;\n      background: rgba(255, 255, 255, 0.5);\n      transform: scale(0);\n      animation: ripple-animation 0.6s linear;\n      pointer-events: none;\n    }\n    @keyframes ripple-animation {\n      to {\n        transform: scale(4);\n        opacity: 0;\n      }\n    }\n    sky-icon {\n      display: inline-block;\n      width: 1em;\n      height: 1em;\n      font-size: var(--icon-size, 18px);\n      backdrop-filter: none;\n      -webkit-backdrop-filter: none;\n    }\n    .loading-overlay {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      background: var(--sky-overlay-secondary);\n      visibility: hidden;\n      backdrop-filter: none;\n      -webkit-backdrop-filter: none;\n    }\n    button[loading] .loading-overlay {\n      visibility: visible;\n    }\n    .spinner {\n      width: var(--spinner-size, 18px);\n      height: var(--spinner-size, 18px);\n      border: 2px solid currentColor;\n      border-top-color: transparent;\n      border-radius: 50%;\n      animation: spin 1s linear infinite;\n    }\n    @keyframes spin {\n      to {\n        transform: rotate(360deg);\n      }\n    }\n\n    /* Solid fills: enhance FG with contrast-color when supported (fallback remains --btn-color).\n       Glass shadow variant is excluded. Ghost is enhanced only on hover (fill becomes solid). */\n    ${unsafeCSS(\n      cssOnFillEnhance([\n        {\n          selector:\n            ':host(:is([variant=\"solid\"], [variant=\"relief\"], [variant=\"gradient\"]):not([data-text-explicit])) button',\n          fillVar: \"--btn-bg-color\",\n        },\n        {\n          selector:\n            ':host(:is([variant=\"solid\"], [variant=\"relief\"], [variant=\"gradient\"]):not([data-text-explicit])) button sky-icon',\n          fillVar: \"--btn-bg-color\",\n        },\n        {\n          selector:\n            ':host(:is([variant=\"solid\"], [variant=\"relief\"], [variant=\"gradient\"]):not([data-text-explicit])) button:hover:not(:disabled), :host(:is([variant=\"solid\"], [variant=\"relief\"], [variant=\"gradient\"]):not([data-text-explicit])) button:focus-visible:not(:disabled)',\n          fillVar: \"var(--btn-bg-color-hover, var(--btn-bg-color))\",\n        },\n        {\n          selector:\n            ':host(:is([variant=\"solid\"], [variant=\"relief\"], [variant=\"gradient\"]):not([data-text-explicit])) button:hover:not(:disabled) sky-icon, :host(:is([variant=\"solid\"], [variant=\"relief\"], [variant=\"gradient\"]):not([data-text-explicit])) button:focus-visible:not(:disabled) sky-icon',\n          fillVar: \"var(--btn-bg-color-hover, var(--btn-bg-color))\",\n        },\n        {\n          selector:\n            ':host([variant=\"ghost\"]:not([data-text-explicit])) button:hover:not(:disabled), :host([variant=\"ghost\"]:not([data-text-explicit])) button:focus-visible:not(:disabled)',\n          fillVar: \"var(--btn-bg-color-hover, var(--btn-bg-color))\",\n        },\n        {\n          selector:\n            ':host([variant=\"ghost\"]:not([data-text-explicit])) button:hover:not(:disabled) sky-icon, :host([variant=\"ghost\"]:not([data-text-explicit])) button:focus-visible:not(:disabled) sky-icon',\n          fillVar: \"var(--btn-bg-color-hover, var(--btn-bg-color))\",\n        },\n      ]),\n    )}\n  `,\n  ];\n\n  constructor() {\n    super();\n    // @ts-ignore\n    this.internals = this.attachInternals();\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  // Slot change handler (not a lifecycle hook).\n  private _onSlotChange = (e: Event) => {\n    const slot = e.target as HTMLSlotElement;\n    const next = this._slotHasMeaningfulContent(slot);\n    // Only set state if it actually changed to avoid extra updates\n    if (next !== this._hasMeaningfulSlot) this._hasMeaningfulSlot = next;\n  };\n\n  /** Uses vertical padding for equal sides (icon-only square control). */\n  private _toSquarePadding(padding: string): string {\n    const py = parseFloat(padding.trim().split(/\\s+/)[0]);\n    const n = Number.isFinite(py) ? py : 8;\n    return `${n}px`;\n  }\n\n  private _resolveSize(input: string): {\n    padding: string;\n    fontSize: string;\n    gap: string;\n    icon: string;\n    spinner: string;\n  } {\n    const presets: Record<\n      string,\n      {\n        padding: string;\n        fontSize: string;\n        gap: string;\n        icon: string;\n        spinner: string;\n      }\n    > = {\n      xs: {\n        padding: \"3px 7px\",\n        fontSize: \"12px\",\n        gap: \"3px\",\n        icon: \"14px\",\n        spinner: \"14px\",\n      },\n      sm: {\n        padding: \"5px 9px\",\n        fontSize: \"14px\",\n        gap: \"4px\",\n        icon: \"16px\",\n        spinner: \"16px\",\n      },\n      md: {\n        padding: \"8px 14px\",\n        fontSize: \"16px\",\n        gap: \"5px\",\n        icon: \"18px\",\n        spinner: \"18px\",\n      },\n      lg: {\n        padding: \"10px 18px\",\n        fontSize: \"18px\",\n        gap: \"6px\",\n        icon: \"20px\",\n        spinner: \"20px\",\n      },\n      xl: {\n        padding: \"14px 24px\",\n        fontSize: \"20px\",\n        gap: \"8px\",\n        icon: \"24px\",\n        spinner: \"24px\",\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]) : 16;\n    const fs = `${fsNum}${unit}`;\n\n    const to = (n: number) => `${Math.round(n * 100) / 100}${unit}`;\n    const clamp = (n: number, min: number, max: number) =>\n      Math.max(min, Math.min(max, n));\n\n    const py = clamp(fsNum * 0.55, 4, 18);\n    const px = clamp(fsNum * 0.9, 8, 28);\n    const gap = clamp(fsNum * 0.3, 3, 10);\n    const icon = clamp(fsNum * 1.125, 12, 28);\n    const spinner = icon;\n\n    return {\n      padding: `${to(py)} ${to(px)}`,\n      fontSize: fs,\n      gap: to(gap),\n      icon: to(icon),\n      spinner: to(spinner),\n    };\n  }\n\n  /** Theme tokens like `var(--sky-border-primary)` are full border shorthands, not colors. */\n  private _isThemeBorderShorthand(border: string | undefined): boolean {\n    if (!border || border === \"none\") return false;\n    return /^var\\(--sky-border-/.test(border.trim());\n  }\n\n  /** Extracts the color token from a `Npx solid …` border shorthand. */\n  private _borderColorFromShorthand(border: string | undefined): string {\n    if (!border || border === \"none\" || this._isThemeBorderShorthand(border)) {\n      return \"transparent\";\n    }\n    const match = border.match(/solid\\s+(.+)$/);\n    return match?.[1]?.trim() ?? \"transparent\";\n  }\n\n  /**\n   * Lit order: `willUpdate` → controllers `hostUpdate` (presets) → `update`/render.\n   * Style vars must be built in `update()` so they see preset-applied props.\n   * Building in `willUpdate` left render with `{}` after PresetController cleared/wrote props.\n   */\n  protected override update(changedProperties: Map<string, unknown>): void {\n    this._rebuildStyleVars(changedProperties);\n    super.update(changedProperties);\n  }\n\n  private _rebuildStyleVars(changedProperties: Map<string, unknown>): void {\n    const styleProps = [\n      \"color\",\n      \"variant\",\n      \"size\",\n      \"radius\",\n      \"animation\",\n      \"preset\",\n      \"inGroup\",\n      \"disabled\",\n      \"loading\",\n      \"colors\",\n      \"iconOnly\",\n    ];\n    const presetChanged = this._presets.revision !== this._lastPresetRevision;\n    const needsStyleUpdate =\n      this._styleDirty ||\n      presetChanged ||\n      styleProps.some((p) => changedProperties.has(p));\n    if (!needsStyleUpdate && Object.keys(this._styleVars).length > 0) {\n      return;\n    }\n    this._lastPresetRevision = this._presets.revision;\n    this._styleDirty = false;\n\n    const baseColor = resolveColor(this.color);\n    const textColor = ON_COLOR_FALLBACK_LIGHT;\n\n    const variantDefaults = {\n      solid: {\n        bg: baseColor,\n        color: textColor,\n        border: \"none\",\n        shadow: \"none\",\n        hoverBg: baseColor,\n        hoverColor: textColor,\n        hoverShadow: \"var(--sky-box-shadow-hover)\",\n      },\n      faded: {\n        bg: \"var(--sky-hover-tertiary)\",\n        color: baseColor,\n        border: \"1px solid var(--sky-text-tertiary)\",\n        shadow: \"none\",\n        hoverBg: \"var(--sky-hover-secondary)\",\n        hoverColor: baseColor,\n        hoverShadow: \"none\",\n        hoverBorder: \"1px solid var(--sky-text-secondary)\",\n      },\n      bordered: {\n        bg: \"transparent\",\n        color: baseColor,\n        border: `2px solid ${baseColor}`,\n        shadow: \"none\",\n        hoverBg: \"transparent\",\n        hoverColor: baseColor,\n        hoverShadow: \"none\",\n        hoverBorder: `2px solid ${hoverShade(baseColor, 25)}`,\n      },\n      transparent: {\n        bg: \"transparent\",\n        color: baseColor,\n        border: \"none\",\n        shadow: \"none\",\n        hoverBg: fadeMix(baseColor, 15),\n        hoverColor: baseColor,\n        hoverShadow: \"none\",\n      },\n      flat: {\n        bg: fadeMix(baseColor, 20),\n        color: hoverShade(baseColor, 30),\n        border: \"none\",\n        shadow: \"none\",\n        hoverBg: fadeMix(baseColor, 25),\n        hoverColor: hoverShade(baseColor, 35),\n        hoverShadow: \"none\",\n      },\n      ghost: {\n        bg: \"transparent\",\n        color: baseColor,\n        border: `2px solid ${baseColor}`,\n        shadow: \"none\",\n        hoverBg: baseColor,\n        hoverColor: textColor,\n        hoverShadow: \"none\",\n      },\n      shadow: {\n        bg: \"var(--sky-glass-primary)\",\n        color: \"var(--sky-text-primary)\",\n        border: skyBorderPrimaryShorthand(),\n        shadow: \"none\",\n        hoverBg: \"var(--sky-glass-primary)\",\n        hoverColor: baseColor,\n        hoverShadow: \"var(--sky-box-shadow-hover)\",\n        hoverBorder: skyBorderPrimaryShorthand(),\n      },\n      relief: {\n        bg: baseColor,\n        color: textColor,\n        border: \"none\",\n        shadow: `\n        inset 0 1px 0 rgba(255,255,255,0.4),\n        0 3px 0 ${darkShade(baseColor, 40)},\n        0 4px 6px -1px ${fadeMix(baseColor, 40)}\n      `,\n        hoverBg: baseColor,\n        hoverColor: textColor,\n        hoverShadow: \"none\",\n      },\n      gradient: {\n        bg: createGradient(this.colors, baseColor),\n        color: textColor,\n        border: \"none\",\n        shadow: \"none\",\n        hoverBg: createGradient(this.colors, baseColor),\n        hoverColor: textColor,\n        hoverShadow: \"none\",\n      },\n      link: {\n        bg: \"transparent\",\n        color: baseColor,\n        border: \"none\",\n        shadow: \"none\",\n        hoverBg: \"transparent\",\n        hoverColor: baseColor,\n        hoverShadow: \"none\",\n      },\n    } as const;\n\n    const transformsAuto = {\n      solid: { hover: \"translateY(-3px)\", active: \"translateY(-3px)\" },\n      faded: {},\n      bordered: {},\n      transparent: {},\n      flat: {},\n      ghost: {},\n      shadow: { hover: \"translateY(-3px)\", active: \"translateY(-3px)\" },\n      gradient: {},\n      relief: { hover: \"translateY(2px)\", active: \"translateY(2px)\" },\n      link: {},\n    } as const;\n\n    const presetToTransform = (p: typeof this.animation) => {\n      switch (p) {\n        case \"none\":\n          return { hover: \"none\", active: \"none\" };\n        case \"lift\":\n          return { hover: \"translateY(-2px)\", active: \"translateY(-1px)\" };\n        case \"push\":\n          return { hover: \"translateY(2px)\", active: \"translateY(2px)\" };\n        case \"scale\":\n          return { hover: \"scale(1.05)\", active: \"scale(1.02)\" };\n        case \"rotate\":\n          return { hover: \"rotate(3deg)\", active: \"rotate(2deg)\" };\n        case \"custom\":\n          return {\n            hover: \"var(--btn-hover-transform, none)\",\n            active:\n              \"var(--btn-active-transform, var(--btn-hover-transform, none))\",\n          };\n        default:\n          return {};\n      }\n    };\n\n    const effVariant = this.variant;\n    const effColor = this.color;\n    const effSize = this.size;\n    const effRadius = this.radius;\n    const effAnimation = this.animation;\n\n    const current = (\n      effVariant in variantDefaults ? effVariant : \"solid\"\n    ) as keyof typeof variantDefaults;\n    let v = { ...variantDefaults[current] };\n    Object.assign(\n      v,\n      tuneSurfaceVariantForDefaultColor(effColor, current, variantDefaults[current]),\n    );\n\n    const semanticKey = resolveSemanticSurfaceKey(effColor);\n    if (semanticKey && (current === \"flat\" || current === \"faded\")) {\n      const soft = semanticSoftSurfaceTokens(semanticKey, {\n        bordered: current === \"faded\",\n      });\n      Object.assign(v, {\n        bg: soft.bg,\n        color: soft.color,\n        border: current === \"faded\" ? soft.border : \"none\",\n        hoverBg: \"var(--sky-hover-primary)\",\n        hoverColor: soft.color,\n        hoverShadow: \"none\",\n        ...(current === \"faded\" ? { hoverBorder: soft.border } : {}),\n      });\n    }\n\n    const animationMode = this.inGroup ? \"none\" : effAnimation;\n    const chosen =\n      animationMode === \"auto\"\n        ? transformsAuto[current]\n        : presetToTransform(animationMode);\n    const hoverTransform = (chosen as any).hover ?? \"none\";\n    const activeTransform = (chosen as any).active ?? hoverTransform ?? \"none\";\n\n    const s = this._resolveSize(effSize);\n    const basePadding = this.iconOnly ? this._toSquarePadding(s.padding) : s.padding;\n    const baseGap = this.iconOnly ? \"0\" : s.gap;\n\n    let borderWidth = 0;\n    const hasBorder2 = effVariant === \"bordered\" || effVariant === \"ghost\";\n    const hasBorder1 = effVariant === \"faded\" || effVariant === \"shadow\";\n\n    if (hasBorder2) {\n      borderWidth = 2;\n    } else if (hasBorder1) {\n      borderWidth = 1;\n    } else if (v.border && v.border.includes(\"px\")) {\n      const match = v.border.match(/(\\d+)px/);\n      borderWidth = match ? parseInt(match[1]) : 0;\n    }\n\n    let hoverBorderWidth = borderWidth;\n    if ((v as any).hoverBorder && (v as any).hoverBorder.includes(\"px\")) {\n      const match = (v as any).hoverBorder.match(/(\\d+)px/);\n      hoverBorderWidth = match ? parseInt(match[1]) : borderWidth;\n    }\n\n    // Reduce padding on bordered variants to preserve outer height.\n    let adjustedPadding = effVariant === \"link\" ? \"0\" : basePadding;\n    if (borderWidth > 0) {\n      // Parse the original padding\n      const paddingParts = basePadding.split(\" \");\n      if (paddingParts.length === 1) {\n        const all = parseFloat(paddingParts[0]);\n        const adjusted = Math.max(all - borderWidth, 2);\n        adjustedPadding = `${adjusted}px`;\n      } else if (paddingParts.length === 2) {\n        // Format: \"vertical horizontal\"\n        const vertical = parseFloat(paddingParts[0]);\n        const horizontal = parseFloat(paddingParts[1]);\n\n        // Reduce vertical padding by border width to maintain same content height\n        const adjustedVertical = Math.max(vertical - borderWidth, 2);\n        adjustedPadding = this.iconOnly\n          ? `${adjustedVertical}px`\n          : `${adjustedVertical}px ${horizontal}px`;\n      } else if (paddingParts.length === 4) {\n        // Format: \"top right bottom left\"\n        const top = parseFloat(paddingParts[0]);\n        const right = parseFloat(paddingParts[1]);\n        const bottom = parseFloat(paddingParts[2]);\n        const left = parseFloat(paddingParts[3]);\n\n        // Reduce top/bottom padding by border width\n        const adjustedTop = Math.max(top - borderWidth, 2);\n        const adjustedBottom = Math.max(bottom - borderWidth, 2);\n        adjustedPadding = `${adjustedTop}px ${right}px ${adjustedBottom}px ${left}px`;\n      }\n    }\n\n    const fontSize = parseFloat(s.fontSize);\n    const iconPx = parseFloat(s.icon);\n    let btnMinHeight: string;\n    let btnMinWidth: string | undefined;\n    if (effVariant === \"link\") {\n      btnMinHeight = \"auto\";\n    } else if (this.iconOnly) {\n      const pad = parseFloat(adjustedPadding) || 0;\n      const side = pad * 2 + iconPx + borderWidth * 2;\n      btnMinHeight = `${side}px`;\n      btnMinWidth = `${side}px`;\n    } else {\n      const paddingValues = adjustedPadding.split(\" \");\n      const verticalPadding =\n        paddingValues.length >= 2\n          ? parseFloat(paddingValues[0]) +\n          parseFloat(paddingValues[2] || paddingValues[0])\n          : parseFloat(paddingValues[0]) * 2 || 16;\n      const baseHeight = verticalPadding + fontSize + 4 + borderWidth * 2;\n      btnMinHeight = `${baseHeight}px`;\n    }\n\n    const hoverBorderShorthand = (v as { hoverBorder?: string }).hoverBorder;\n    const usesThemeBorder =\n      this._isThemeBorderShorthand(v.border) ||\n      this._isThemeBorderShorthand(hoverBorderShorthand);\n    const borderColor = this._borderColorFromShorthand(v.border);\n    const borderColorHover = this._borderColorFromShorthand(\n      hoverBorderShorthand ?? v.border,\n    );\n\n    const vars: Record<string, string> = {\n      \"--btn-color\": v.color,\n      \"--btn-shadow\": v.shadow,\n      \"--btn-radius\":\n        effVariant === \"link\" ? \"0\" : resolveRadius(effRadius),\n      \"--btn-color-hover\": v.hoverColor,\n      \"--btn-shadow-hover\": v.hoverShadow,\n      \"--btn-transform\": \"none\",\n      \"--btn-transform-hover\": hoverTransform,\n      \"--btn-transform-active\": activeTransform,\n      \"--btn-padding\": adjustedPadding, // Use adjusted padding!\n      \"--btn-font-size\": s.fontSize,\n      \"--btn-gap\": baseGap,\n      \"--icon-size\": s.icon,\n      \"--spinner-size\": s.spinner,\n\n      // Set min-height to maintain consistent visual height\n      \"--btn-min-height\": btnMinHeight,\n      ...(btnMinWidth ? { \"--btn-min-width\": btnMinWidth } : {}),\n\n      // Keep border width variables\n      \"--btn-border-width\": `${borderWidth}px`,\n      \"--btn-border-width-hover\": `${hoverBorderWidth}px`,\n\n      // Focus ring follows `color` (not global active-primary).\n      \"--sky-focus-ring-color\": baseColor,\n    };\n\n    if (usesThemeBorder) {\n      vars[\"--btn-border\"] = v.border;\n      vars[\"--btn-border-hover\"] = hoverBorderShorthand ?? v.border;\n    } else {\n      vars[\"--btn-border-color\"] = borderColor;\n      vars[\"--btn-border-color-hover\"] = borderColorHover;\n    }\n\n    if (effVariant === \"gradient\") {\n      vars[\"--btn-bg\"] = v.bg;\n      vars[\"--btn-bg-hover\"] = v.hoverBg;\n      // Opaque stop for contrast-color() — gradient paint still uses --btn-bg.\n      vars[\"--btn-bg-color\"] = baseColor;\n      vars[\"--btn-bg-color-hover\"] = baseColor;\n    } else {\n      vars[\"--btn-bg-color\"] = v.bg;\n      vars[\"--btn-bg-color-hover\"] = v.hoverBg;\n    }\n\n    if (this.inGroup) {\n      // In grouped mode, do not apply sky-button's own hover skin.\n      // The container group controls visual interaction consistency.\n      if (effVariant === \"gradient\") {\n        // One gradient is painted on sky-button-group's `.group`; segments stay clear\n        // (same idea as `::slotted(button)` transparent fills for native buttons).\n        vars[\"--btn-bg\"] = \"transparent\";\n        vars[\"--btn-bg-hover\"] = \"color-mix(in srgb, white 8%, transparent)\";\n      } else {\n        vars[\"--btn-bg-color-hover\"] = vars[\"--btn-bg-color\"] ?? \"transparent\";\n      }\n      vars[\"--btn-color-hover\"] = vars[\"--btn-color\"];\n      if (usesThemeBorder) {\n        vars[\"--btn-border-hover\"] = vars[\"--btn-border\"] ?? v.border;\n      } else {\n        vars[\"--btn-border-color-hover\"] = vars[\"--btn-border-color\"] ?? borderColor;\n      }\n      vars[\"--btn-shadow-hover\"] = \"none\";\n      if (effVariant === \"relief\") {\n        vars[\"--btn-transform-hover\"] = \"translateY(2px)\";\n        vars[\"--btn-transform-active\"] = \"translateY(2px)\";\n      } else {\n        vars[\"--btn-transform-hover\"] = \"none\";\n        vars[\"--btn-transform-active\"] = \"none\";\n      }\n    }\n\n    this._styleVars = vars;\n  }\n\n  /**\n   * Focuses the internal native button.\n   *\n   * @returns {void}\n   */\n  public focusButton(): void {\n    this.renderRoot.querySelector<HTMLButtonElement>(\"button\")?.focus();\n  }\n\n  /**\n   * Triggers a click on the internal native button when enabled.\n   *\n   * @returns {void}\n   */\n  public clickButton(): void {\n    if (this.disabled || this.loading) return;\n    this.renderRoot.querySelector<HTMLButtonElement>(\"button\")?.click();\n  }\n\n  private _createRipple(event: MouseEvent): void {\n    const button = event.currentTarget as HTMLElement;\n    const rect = button.getBoundingClientRect();\n    const ripple = document.createElement(\"span\");\n\n    const size = Math.max(button.offsetWidth, button.offsetHeight);\n    const x = event.clientX - rect.left - size / 2;\n    const y = event.clientY - rect.top - size / 2;\n\n    ripple.style.width = ripple.style.height = `${size}px`;\n    ripple.style.left = `${x}px`;\n    ripple.style.top = `${y}px`;\n\n    const bg = getComputedStyle(button).backgroundColor || \"\";\n    ripple.style.background = contrastOverlay(bg);\n\n    ripple.className = \"ripple\";\n    const existing = button.querySelectorAll(\".ripple\");\n    const maxRipples = 3;\n    if (existing.length >= maxRipples && existing[0]) {\n      existing[0].remove();\n    }\n    button.appendChild(ripple);\n    ripple.addEventListener(\"animationend\", () => ripple.remove());\n  }\n\n  formDisabledCallback(disabled: boolean): void {\n    this.disabled = disabled;\n  }\n\n  get formOwner(): HTMLFormElement | null {\n    if (typeof document === \"undefined\") return null;\n    const formId = typeof this.form === \"string\" ? this.form.trim() : \"\";\n    return (\n      this.internals.form ||\n      (formId ? (document.getElementById(formId) as HTMLFormElement | null) : null) ||\n      this.closest(\"form\")\n    );\n  }\n\n  @eventOptions({ passive: false })\n  private _handleClick(event: MouseEvent): void {\n    if (this.disabled || this.loading) {\n      event.preventDefault();\n      return;\n    }\n\n    // If button type is \"button\", prevent any default navigation-like behavior\n    if (this.type === \"button\") {\n      event.preventDefault();\n    }\n\n    this._createRipple(event);\n\n    const form = this.formOwner;\n    if (this.type === \"submit\") {\n      form?.requestSubmit();\n      return;\n    }\n    if (this.type === \"reset\") {\n      form?.reset();\n      return;\n    }\n  }\n\n  private _iconOnlyName(): string {\n    return this.iconL || this.iconR;\n  }\n\n  override render() {\n    const iconOnlyName = this._iconOnlyName();\n    const ariaLabel =\n      this.iconOnly && (this.label || iconOnlyName)\n        ? this.label || iconOnlyName\n        : undefined;\n\n    return html`\n      <button\n        part=\"button\"\n        style=${styleMap(this._styleVars)}\n        type=${this.type}\n        form=${ifDefined(this.form ?? undefined)}\n        aria-label=${ifDefined(ariaLabel)}\n        ?disabled=${this.disabled || this.loading}\n        ?loading=${this.loading}\n        @click=${this._handleClick}\n      >\n        ${when(\n          this.iconOnly,\n          () =>\n            when(\n              iconOnlyName,\n              () => html`<sky-icon part=\"icon\" icon=\"${iconOnlyName}\"></sky-icon>`,\n            ),\n          () => html`\n            ${when(this.iconL, () => html`<sky-icon part=\"icon\" icon=\"${this.iconL}\"></sky-icon>`)}\n            <slot @slotchange=${this._onSlotChange}></slot>\n            ${this._hasMeaningfulSlot ? nothing : this.label}\n            ${when(this.iconR, () => html`<sky-icon part=\"icon\" icon=\"${this.iconR}\"></sky-icon>`)}\n          `,\n        )}\n        ${when(\n          this.loading,\n          () => html`\n            <div class=\"loading-overlay\" part=\"loading-overlay\">\n              <div class=\"spinner\" part=\"spinner\"></div>\n            </div>\n          `,\n        )}\n      </button>\n    `;\n  }\n}\n"],"names":["SkyButton","LitElement","constructor","super","this","variant","color","type","form","size","radius","label","disabled","loading","iconL","iconR","iconOnly","colors","animation","preset","inGroup","_hasMeaningfulSlot","_styleVars","_presets","PresetController","isPaused","onChange","_styleDirty","_lastPresetRevision","_onSlotChange","e","slot","target","next","_slotHasMeaningfulContent","internals","attachInternals","slotEl","assignedNodes","flatten","some","n","nodeType","Node","ELEMENT_NODE","textContent","trim","length","_toSquarePadding","padding","py","parseFloat","split","Number","isFinite","_resolveSize","input","presets","xs","fontSize","gap","icon","spinner","sm","md","lg","xl","m","String","match","unit","fsNum","fs","to","Math","round","clamp","min","max","px","_isThemeBorderShorthand","border","test","_borderColorFromShorthand","update","changedProperties","_rebuildStyleVars","presetChanged","revision","p","has","Object","keys","baseColor","resolveColor","textColor","ON_COLOR_FALLBACK_LIGHT","variantDefaults","solid","bg","shadow","hoverBg","hoverColor","hoverShadow","faded","hoverBorder","bordered","hoverShade","transparent","fadeMix","flat","ghost","skyBorderPrimaryShorthand","relief","darkShade","gradient","createGradient","link","effVariant","effColor","effSize","effRadius","effAnimation","current","v","assign","tuneSurfaceVariantForDefaultColor","semanticKey","resolveSemanticSurfaceKey","soft","semanticSoftSurfaceTokens","animationMode","chosen","hover","active","presetToTransform","hoverTransform","activeTransform","s","basePadding","baseGap","borderWidth","includes","parseInt","hoverBorderWidth","adjustedPadding","paddingParts","all","vertical","horizontal","adjustedVertical","top","right","bottom","left","iconPx","btnMinHeight","btnMinWidth","side","paddingValues","hoverBorderShorthand","usesThemeBorder","borderColor","borderColorHover","vars","resolveRadius","focusButton","renderRoot","querySelector","focus","clickButton","click","_createRipple","event","button","currentTarget","rect","getBoundingClientRect","ripple","document","createElement","offsetWidth","offsetHeight","x","clientX","y","clientY","style","width","height","getComputedStyle","backgroundColor","background","contrastOverlay","className","existing","querySelectorAll","remove","appendChild","addEventListener","formDisabledCallback","formOwner","formId","getElementById","closest","_handleClick","preventDefault","reset","requestSubmit","_iconOnlyName","render","iconOnlyName","ariaLabel","html","styleMap","ifDefined","when","nothing","dependencies","SkyIcon","formAssociated","styles","skyFocusRingHostStyles","css","unsafeCSS","cssOnFillEnhance","selector","fillVar","__decorateClass","property","reflect","prototype","Boolean","state","eventOptions","passive","customElement"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
-import { LitElement, PropertyValues } from 'lit';
-export type SkyCardElevation = 'none' | 'sm' | 'md' | 'lg';
-export type SkyCardSectionLayout = 'inline' | 'stack';
-export type SkyCardSectionTarget = 'both' | 'header' | 'footer' | 'none';
+import { LitElement, PropertyValues } from "lit";
+export type SkyCardElevation = "none" | "sm" | "md" | "lg";
+export type SkyCardSectionLayout = "inline" | "stack";
+export type SkyCardSectionTarget = "both" | "header" | "footer" | "none";
 /**
  * @element sky-card
  *
@@ -50,6 +50,7 @@ export type SkyCardSectionTarget = 'both' | 'header' | 'footer' | 'none';
  * @property {SkyCardSectionTarget} separators - Determines where separators should appear. Default: `"none"`.
  * @property {SkyCardSectionTarget} overlays - Determines where overlays should appear. Default: `"none"`.
  * @property {SkyCardSectionTarget} insets - Determines where insets should appear. Default: `"none"`.
+ * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `""`.
  * @method refreshLayout Recomputes card variables and section synchronization.
  *
  * @example
@@ -125,9 +126,16 @@ export declare class SkyCard extends LitElement {
     private static readonly SECTION_INSET_BG_MAP;
     private static _composeBackdrop;
     private static _composeElevation;
+    /** Named prop preset from nearest `sky-config-provider`. */
+    preset: string;
+    private _presets;
     static styles: import("lit").CSSResult;
     firstUpdated(): void;
-    protected willUpdate(changed: PropertyValues): void;
+    /**
+     * After PresetController hostUpdate — card chrome may come from presets.
+     * Keep flag recompute + CSS var apply here (not willUpdate).
+     */
+    protected update(changed: PropertyValues): void;
     private _wireSlotChangeHandlers;
     private _syncHeader;
     private _syncFooter;