@sky.ui/core 0.0.36 → 0.0.39

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

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

package/dist/sky-checkbox/sky-checkbox.js

@@ -1,4 +1,4 @@
-import{LitElement as e,css as t,nothing as i,html as s}from"lit";import{property as r,state as a,customElement as o}from"lit/decorators.js";import{when as n}from"lit/directives/when.js";import{classMap as c}from"lit/directives/class-map.js";import{styleMap as h}from"lit/directives/style-map.js";import{resolveColor as l}from"../helper/utils/color-resolver.js";import{FormControlBase as d}from"../helper/internals/form-control-base.js";var p=Object.defineProperty,u=Object.getOwnPropertyDescriptor,v=(e,t,i,s)=>{for(var r,a=s>1?void 0:s?u(t,i):t,o=e.length-1;o>=0;o--)(r=e[o])&&(a=(s?r(t,i,a):r(a))||a);return s&&a&&p(t,i,a),a};let y=class extends d{constructor(){super(...arguments),this.label="",this.id="",this.value="",this.color="primary",this.defaultChecked=!1,this.showErrors=!1,this.prefix="",this.suffix="",this.prefixColor="",this.suffixColor="",this.validationActive=!1,this.invalid=!1,this._checked=!1,this._indeterminate=!1,this.validationErrors=[],this._hasMeaningfulSlot=!1,this._inputId=`sky-cb-${Math.random().toString(36).slice(2)}`,this._onSlotChange=e=>{const t=e.target,i=this._slotHasMeaningfulContent(t);i!==this._hasMeaningfulSlot&&(this._hasMeaningfulSlot=i)},this.handleBlur=e=>{this.validationActive=!0,this.validateInput();const t=this.shadowRoot?.querySelector(".cbx");t?.classList.remove("active"),this.syncValidity()},this._onKeyDown=e=>{this.disabled||this.readonly||" "!==e.key&&"Enter"!==e.key||(e.preventDefault(),this._inputElement?.click())}}get checked(){return this._checked}set checked(e){const t=this._checked;this._checked=e,e&&this.indeterminate&&(this.indeterminate=!1,this._inputElement&&(this._inputElement.indeterminate=!1)),this.requestUpdate("checked",t),this._inputElement&&(this._inputElement.checked=e,this._inputElement.indeterminate=this.indeterminate),this._updateVisualState(),this.syncFormValue(),this.syncValidity()}get indeterminate(){return this._indeterminate}set indeterminate(e){const t=this._indeterminate;this._indeterminate=e,e&&this.checked&&(this.checked=!1),this.requestUpdate("indeterminate",t),this._inputElement&&(this._inputElement.indeterminate=e),this._updateVisualState(),this.syncValidity()}getFormValue(){return this.name?this.disabled?null:this.checked?this.value&&""!==this.value.trim()?this.value:"on":null:null}setValueFromFormState(e){if(null===e)return this.checked=!1,void(this.indeterminate=!1);"string"==typeof e&&(this.value&&""!==this.value.trim()?this.checked=e===this.value:this.checked="on"===e||"true"===e||"1"===e,this.indeterminate=!1)}getValidityAnchor(){return this.shadowRoot?.querySelector('input[type="checkbox"]')??void 0}isEmpty(){return!this.checked}getNativeControl(){return this.shadowRoot?.querySelector('input[type="checkbox"]')}onFormReset(){this.checked=this.defaultChecked,this.indeterminate=!1,this.validationErrors=[],this.invalid=!1,this.validationActive=!1}willUpdate(e){e.has("color")&&this.style.setProperty("--checkbox-color",l(this.color))}updated(e){super.updated(e),this._inputElement||(this._inputElement=this.shadowRoot?.querySelector('input[type="checkbox"]')),this._inputElement&&(this._inputElement.checked=this.checked,this._inputElement.indeterminate=this.indeterminate,this._inputElement.disabled=this.disabled||this.readonly),this._updateVisualState(),(e.has("checked")||e.has("name")||e.has("disabled")||e.has("readonly")||e.has("required")||e.has("value"))&&(this.syncFormValue(),this.syncValidity())}handleChange(e){const t=e.target;if(this.disabled||this.readonly)return this._inputElement&&(this._inputElement.checked=this.checked,this._inputElement.indeterminate=this.indeterminate),e.preventDefault(),void e.stopPropagation();this.checked=t.checked,this.validateInput();const i=this.value&&""!==this.value.trim()?this.checked?this.value:void 0:this.checked;this.dispatchEvent(new CustomEvent("value-changed",{detail:{checked:this.checked,value:i},bubbles:!0,composed:!0}))}validateInput(){if(!this.validationActive)return!0;this.validationErrors=[],this.required&&!this.checked&&(this.validationErrors=[this.requiredMessage]),this.dispatchEvent(new CustomEvent("validation-error",{detail:{errors:[...this.validationErrors]},bubbles:!0,composed:!0}));const e=this.shadowRoot?.querySelector(".cbx");this.validationErrors.length?e?.classList.add("invalid"):e?.classList.remove("invalid");const t=0===this.validationErrors.length;return this.invalid=!t,t}check(){this.disabled||this.readonly||(this.checked=!0,this.indeterminate=!1)}uncheck(){this.disabled||this.readonly||(this.checked=!1,this.indeterminate=!1)}toggle(){this.disabled||this.readonly||(this.checked=!this.checked,this.indeterminate=!1)}reset(){this.onFormReset(),this.syncFormValue(),this.syncValidity(),this.dispatchEvent(new CustomEvent("value-cleared",{detail:{value:this.value,checked:this.checked},bubbles:!0,composed:!0}))}_updateVisualState(){const e=this.shadowRoot?.querySelector(".cbx");e&&(this.checked?(e.classList.add("checked"),e.classList.remove("indeterminate")):this.indeterminate?(e.classList.add("indeterminate"),e.classList.remove("checked")):e.classList.remove("checked","indeterminate"))}_slotHasMeaningfulContent(e){return e.assignedNodes({flatten:!0}).some(e=>e.nodeType===Node.ELEMENT_NODE||(e.textContent??"").trim().length>0)}get _hasTextContent(){return!!this.prefix||!!this.suffix||!!this.label||this._hasMeaningfulSlot}render(){const e=this._hasTextContent,t=c({"checkbox-wrapper":!0,"no-text":!e}),r=c({cbx:!0,checked:this.checked,indeterminate:this.indeterminate}),a=c({box:!0,"box--checked":this.checked,"box--indeterminate":this.indeterminate,"box--invalid":this.validationErrors.length>0}),o="box"+(this.checked?" box--checked":"")+(this.indeterminate?" box--indeterminate":"")+(this.validationErrors.length?" box--invalid":"");return s`
+import{LitElement as e,unsafeCSS as t,css as i,nothing as s,html as r}from"lit";import{property as o,state as a,customElement as n}from"lit/decorators.js";import{when as c}from"lit/directives/when.js";import{classMap as h}from"lit/directives/class-map.js";import{styleMap as l}from"lit/directives/style-map.js";import{resolveColor as d}from"../helper/utils/color-resolver.js";import{cssOnFillEnhance as p}from"../helper/utils/contrast-color.js";import{FormControlBase as u}from"../helper/internals/form-control-base.js";var v=Object.defineProperty,y=Object.getOwnPropertyDescriptor,k=(e,t,i,s)=>{for(var r,o=s>1?void 0:s?y(t,i):t,a=e.length-1;a>=0;a--)(r=e[a])&&(o=(s?r(t,i,o):r(o))||o);return s&&o&&v(t,i,o),o};let m=class extends u{constructor(){super(...arguments),this.label="",this.id="",this.value="",this.color="primary",this.defaultChecked=!1,this.showErrors=!1,this.prefix="",this.suffix="",this.prefixColor="",this.suffixColor="",this.validationActive=!1,this.invalid=!1,this._checked=!1,this._indeterminate=!1,this.validationErrors=[],this._hasMeaningfulSlot=!1,this._inputId=`sky-cb-${Math.random().toString(36).slice(2)}`,this._onSlotChange=e=>{const t=e.target,i=this._slotHasMeaningfulContent(t);i!==this._hasMeaningfulSlot&&(this._hasMeaningfulSlot=i)},this.handleBlur=e=>{this.validationActive=!0,this.validateInput();const t=this.shadowRoot?.querySelector(".cbx");t?.classList.remove("active"),this.syncValidity()},this._onKeyDown=e=>{this.disabled||this.readonly||" "!==e.key&&"Enter"!==e.key||(e.preventDefault(),this._inputElement?.click())}}get checked(){return this._checked}set checked(e){const t=this._checked;this._checked=e,e&&this.indeterminate&&(this.indeterminate=!1,this._inputElement&&(this._inputElement.indeterminate=!1)),this.requestUpdate("checked",t),this._inputElement&&(this._inputElement.checked=e,this._inputElement.indeterminate=this.indeterminate),this._updateVisualState(),this.syncFormValue(),this.syncValidity()}get indeterminate(){return this._indeterminate}set indeterminate(e){const t=this._indeterminate;this._indeterminate=e,e&&this.checked&&(this.checked=!1),this.requestUpdate("indeterminate",t),this._inputElement&&(this._inputElement.indeterminate=e),this._updateVisualState(),this.syncValidity()}getFormValue(){return this.name?this.disabled?null:this.checked?this.value&&""!==this.value.trim()?this.value:"on":null:null}setValueFromFormState(e){if(null===e)return this.checked=!1,void(this.indeterminate=!1);"string"==typeof e&&(this.value&&""!==this.value.trim()?this.checked=e===this.value:this.checked="on"===e||"true"===e||"1"===e,this.indeterminate=!1)}getValidityAnchor(){return this.shadowRoot?.querySelector('input[type="checkbox"]')??void 0}isEmpty(){return!this.checked}getNativeControl(){return this.shadowRoot?.querySelector('input[type="checkbox"]')}onFormReset(){this.checked=this.defaultChecked,this.indeterminate=!1,this.validationErrors=[],this.invalid=!1,this.validationActive=!1}willUpdate(e){e.has("color")&&this.style.setProperty("--checkbox-color",d(this.color))}updated(e){super.updated(e),this._inputElement||(this._inputElement=this.shadowRoot?.querySelector('input[type="checkbox"]')),this._inputElement&&(this._inputElement.checked=this.checked,this._inputElement.indeterminate=this.indeterminate,this._inputElement.disabled=this.disabled||this.readonly),this._updateVisualState(),(e.has("checked")||e.has("name")||e.has("disabled")||e.has("readonly")||e.has("required")||e.has("value"))&&(this.syncFormValue(),this.syncValidity())}handleChange(e){const t=e.target;if(this.disabled||this.readonly)return this._inputElement&&(this._inputElement.checked=this.checked,this._inputElement.indeterminate=this.indeterminate),e.preventDefault(),void e.stopPropagation();this.checked=t.checked,this.validateInput();const i=this.value&&""!==this.value.trim()?this.checked?this.value:void 0:this.checked;this.dispatchEvent(new CustomEvent("value-changed",{detail:{checked:this.checked,value:i},bubbles:!0,composed:!0}))}validateInput(){if(!this.validationActive)return!0;this.validationErrors=[],this.required&&!this.checked&&(this.validationErrors=[this.requiredMessage]),this.dispatchEvent(new CustomEvent("validation-error",{detail:{errors:[...this.validationErrors]},bubbles:!0,composed:!0}));const e=this.shadowRoot?.querySelector(".cbx");this.validationErrors.length?e?.classList.add("invalid"):e?.classList.remove("invalid");const t=0===this.validationErrors.length;return this.invalid=!t,t}check(){this.disabled||this.readonly||(this.checked=!0,this.indeterminate=!1)}uncheck(){this.disabled||this.readonly||(this.checked=!1,this.indeterminate=!1)}toggle(){this.disabled||this.readonly||(this.checked=!this.checked,this.indeterminate=!1)}reset(){this.onFormReset(),this.syncFormValue(),this.syncValidity(),this.dispatchEvent(new CustomEvent("value-cleared",{detail:{value:this.value,checked:this.checked},bubbles:!0,composed:!0}))}_updateVisualState(){const e=this.shadowRoot?.querySelector(".cbx");e&&(this.checked?(e.classList.add("checked"),e.classList.remove("indeterminate")):this.indeterminate?(e.classList.add("indeterminate"),e.classList.remove("checked")):e.classList.remove("checked","indeterminate"))}_slotHasMeaningfulContent(e){return e.assignedNodes({flatten:!0}).some(e=>e.nodeType===Node.ELEMENT_NODE||(e.textContent??"").trim().length>0)}get _hasTextContent(){return!!this.prefix||!!this.suffix||!!this.label||this._hasMeaningfulSlot}render(){const e=this._hasTextContent,t=h({"checkbox-wrapper":!0,"no-text":!e}),i=h({cbx:!0,checked:this.checked,indeterminate:this.indeterminate}),o=h({box:!0,"box--checked":this.checked,"box--indeterminate":this.indeterminate,"box--invalid":this.validationErrors.length>0}),a="box"+(this.checked?" box--checked":"")+(this.indeterminate?" box--indeterminate":"")+(this.validationErrors.length?" box--invalid":"");return r`
       <div class=${t} part="wrapper">
         <input
           type="checkbox"
@@ -15,31 +15,31 @@ import{LitElement as e,css as t,nothing as i,html as s}from"lit";import{property
           aria-invalid="${this.validationErrors.length>0}"
           aria-readonly="${this.readonly}"
         />
-        <label class=${r} part="label" for="${this._inputId}">
-          <span part=${o} class=${a}>
+        <label class=${i} part="label" for="${this._inputId}">
+          <span part=${a} class=${o}>
             <svg viewBox="0 0 12 10" class="checkmark" part="checkmark">
               <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
             </svg>
             <div class="indeterminate-line" part="indeterminate-line"></div>
           </span>
           <slot @slotchange=${this._onSlotChange}></slot>
-          ${n(e,()=>{const e=h({textAlign:"start",color:"var(--sky-text-primary)"}),t=h({color:this.prefixColor,display:"inline-block"}),r=h({color:this.suffixColor,display:"inline-block"});return s`
+          ${c(e,()=>{const e=l({textAlign:"start",color:"var(--sky-text-primary)"}),t=l({color:this.prefixColor,display:"inline-block"}),i=l({color:this.suffixColor,display:"inline-block"});return r`
               <span style=${e} part="text">
                 <div style=${t} part="prefix">
                   ${this.prefix}
                 </div>
-                ${this._hasMeaningfulSlot?i:this.label}
-                <div style=${r} part="suffix">
+                ${this._hasMeaningfulSlot?s:this.label}
+                <div style=${i} part="suffix">
                   ${this.suffix}
                 </div>
               </span>
             `})}
         </label>
       </div>
-      ${n(this.showErrors&&this.validationErrors.length>0&&this.validationActive,()=>s`<div class="error-message" part="error-message">
+      ${c(this.showErrors&&this.validationErrors.length>0&&this.validationActive,()=>r`<div class="error-message" part="error-message">
           ${this.validationErrors[0]}
         </div>`)}
-    `}};y.shadowRootOptions={...e.shadowRootOptions,delegatesFocus:!0},y.styles=t`
+    `}};m.shadowRootOptions={...e.shadowRootOptions,delegatesFocus:!0},m.styles=i`
     :host {
       display: block;
       position: relative;
@@ -111,7 +111,7 @@ import{LitElement as e,css as t,nothing as i,html as s}from"lit";import{property
       width: 12px;
       height: 10px;
       fill: none;
-      stroke: var(--sky-text-white);
+      stroke: var(--sky-on-color-fallback-light, var(--sky-text-white));
       stroke-width: 2;
       stroke-linecap: round;
       stroke-linejoin: round;
@@ -202,7 +202,7 @@ input[type="checkbox"]:checked + .cbx span:first-child {
     .indeterminate-line {
       width: 10px;
       height: 2px;
-      background-color: var(--sky-text-white);
+      background-color: var(--sky-on-color-fallback-light, var(--sky-text-white));
       position: absolute;
       border-radius: 1px;
       transition: opacity 0.2s ease, transform 0.2s ease;
@@ -283,5 +283,7 @@ input[type="checkbox"]:checked + .cbx span:first-child {
         transition: none;
       }
     }
-  `,v([r({type:String})],y.prototype,"label",2),v([r({type:String})],y.prototype,"id",2),v([r({type:String})],y.prototype,"value",2),v([r({type:String})],y.prototype,"color",2),v([r({type:Boolean})],y.prototype,"defaultChecked",2),v([r({type:Boolean})],y.prototype,"showErrors",2),v([r({type:String})],y.prototype,"prefix",2),v([r({type:String})],y.prototype,"suffix",2),v([r({type:String})],y.prototype,"prefixColor",2),v([r({type:String})],y.prototype,"suffixColor",2),v([r({type:Boolean,reflect:!0})],y.prototype,"validationActive",2),v([r({type:Boolean,reflect:!0})],y.prototype,"invalid",2),v([a()],y.prototype,"_checked",2),v([a()],y.prototype,"_indeterminate",2),v([a()],y.prototype,"validationErrors",2),v([a()],y.prototype,"_hasMeaningfulSlot",2),v([r({type:Boolean,reflect:!0})],y.prototype,"checked",1),v([r({type:Boolean,reflect:!0})],y.prototype,"indeterminate",1),y=v([o("sky-checkbox")],y);export{y as SkyCheckbox};
+
+    ${t(p([{selector:'input[type="checkbox"]:checked + .cbx span:first-child svg, .cbx.checked span:first-child svg',fillVar:"var(--checkbox-color, var(--sky-active-primary))",property:"stroke"},{selector:".indeterminate-line, .indeterminate .indeterminate-line",fillVar:"var(--checkbox-color, var(--sky-active-primary))",property:"background-color"}]))}
+  `,k([o({type:String})],m.prototype,"label",2),k([o({type:String})],m.prototype,"id",2),k([o({type:String})],m.prototype,"value",2),k([o({type:String})],m.prototype,"color",2),k([o({type:Boolean})],m.prototype,"defaultChecked",2),k([o({type:Boolean})],m.prototype,"showErrors",2),k([o({type:String})],m.prototype,"prefix",2),k([o({type:String})],m.prototype,"suffix",2),k([o({type:String})],m.prototype,"prefixColor",2),k([o({type:String})],m.prototype,"suffixColor",2),k([o({type:Boolean,reflect:!0})],m.prototype,"validationActive",2),k([o({type:Boolean,reflect:!0})],m.prototype,"invalid",2),k([a()],m.prototype,"_checked",2),k([a()],m.prototype,"_indeterminate",2),k([a()],m.prototype,"validationErrors",2),k([a()],m.prototype,"_hasMeaningfulSlot",2),k([o({type:Boolean,reflect:!0})],m.prototype,"checked",1),k([o({type:Boolean,reflect:!0})],m.prototype,"indeterminate",1),m=k([n("sky-checkbox")],m);export{m as SkyCheckbox};
 //# sourceMappingURL=sky-checkbox.js.map