@sky.ui/core 0.0.24 → 0.0.25

package/dist/sky-avatar/sky-avatar.js

@@ -1,4 +1,27 @@
-import{__decorate as t,__metadata as e}from"tslib";import{LitElement as i,css as r,nothing as o,html as s}from"lit";import{property as a,state as n,customElement as l}from"lit/decorators.js";import{when as d}from"lit/directives/when.js";import{keyed as p}from"lit/directives/keyed.js";import{resolveRadius as c}from"../helper/utils/size-resolver.js";import{resolveColor as h}from"../helper/utils/color-resolver.js";import{styleMap as y}from"lit/directives/style-map.js";import{classMap as v}from"lit/directives/class-map.js";const g={sm:"var(--sky-space-8, 2rem)",md:"var(--sky-space-10, 2.5rem)",lg:"var(--sky-space-12, 3rem)"},b={sm:32,md:40,lg:48};let m=class extends i{constructor(){super(...arguments),this.size="50px",this.image="",this.fit="cover",this.radius="md",this.alt="",this.color="dark",this.outline="",this.outlineOffset="2px",this.loading=!1,this.disabled=!1,this.interactive=!1,this.shadow=!1,this._imageError=!1,this._onImageLoad=()=>{this._imageError=!1},this._onImageError=()=>{this._imageError=!0}}static{this.styles=r`
+import{css as t,LitElement as e,nothing as i,html as r}from"lit";import{property as o,state as a,customElement as s}from"lit/decorators.js";import{when as n}from"lit/directives/when.js";import{keyed as l}from"lit/directives/keyed.js";import{resolveRadius as d}from"../helper/utils/size-resolver.js";import{resolveColor as p}from"../helper/utils/color-resolver.js";import{styleMap as c}from"lit/directives/style-map.js";import{classMap as h}from"lit/directives/class-map.js";var y=Object.defineProperty,v=Object.getOwnPropertyDescriptor,g=(t,e,i,r)=>{for(var o,a=r>1?void 0:r?v(e,i):e,s=t.length-1;s>=0;s--)(o=t[s])&&(a=(r?o(e,i,a):o(a))||a);return r&&a&&y(e,i,a),a};const b={sm:"var(--sky-space-8, 2rem)",md:"var(--sky-space-10, 2.5rem)",lg:"var(--sky-space-12, 3rem)"},m={sm:32,md:40,lg:48};let f=class extends e{constructor(){super(...arguments),this.size="50px",this.image="",this.fit="cover",this.radius="md",this.alt="",this.color="dark",this.outline="",this.outlineOffset="2px",this.loading=!1,this.disabled=!1,this.interactive=!1,this.shadow=!1,this._imageError=!1,this._onImageLoad=()=>{this._imageError=!1},this._onImageError=()=>{this._imageError=!0}}updated(t){super.updated(t),t.has("image")&&(this._imageError=!1);const e=b[this.size]??this.size;this.style.setProperty("--avatar-size",e),this.style.setProperty("--avatar-bg-size","contain"===this.fit?"contain":"cover"),this.style.setProperty("--avatar-border-radius",d(this.radius)),this.color&&this.style.setProperty("--slot-text-color",p(this.color)),this.adjustSpinnerSize()}_handleInteractiveClick(t){this.interactive&&!this.disabled&&(t.stopPropagation(),this.dispatchEvent(new Event("click",{bubbles:!0,composed:!0})))}_handleInteractiveKeydown(t){this.interactive&&!this.disabled&&("Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.dispatchEvent(new Event("click",{bubbles:!0,composed:!0}))))}adjustSpinnerSize(){const t=m[this.size]??parseFloat(this.size);if(Number.isFinite(t)){const e=.25*t,i=this.shadowRoot?.querySelector(".spinner");i&&(i.style.width=`${e}px`,i.style.height=`${e}px`,i.style.borderWidth=`${Math.max(1,e/10)}px`)}}render(){const t=this.image&&!this._imageError,e={};t&&(e.backgroundImage=`url(${encodeURI(this.image)})`),this.outline&&(e.outline=this.outline),this.outlineOffset&&(e.outlineOffset=this.outlineOffset);const o=this.interactive?"button":t&&this.alt?"img":i,a=this.interactive&&this.alt||t&&this.alt?this.alt:i;return r`
+      <div
+        class=${h({avatar:!0,"avatar--interactive":!!this.interactive})}
+        part="avatar"
+        style=${c(e)}
+        role=${o}
+        aria-label=${a}
+        tabindex=${this.interactive&&!this.disabled?"0":i}
+        @click=${this._handleInteractiveClick}
+        @keydown=${this._handleInteractiveKeydown}
+      >
+        ${this.image?r`<img
+              class="image-probe"
+              src=${this.image}
+              alt=""
+              @load=${this._onImageLoad}
+              @error=${this._onImageError}
+            />`:i}
+        <div class="loading-overlay" part="loading-overlay">
+          <div class="spinner" part="spinner"></div>
+        </div>
+        ${l(t?"_img_":"_slot_",n(!t,()=>r`<slot></slot>`,()=>i))}
+      </div>
+    `}};f.styles=t`
     :host {
       display: inline-flex;
       line-height: 0;
@@ -133,28 +156,5 @@ import{__decorate as t,__metadata as e}from"tslib";import{LitElement as i,css as
         opacity: var(--sky-opacity-muted, 0.7);
       }
     }
-  `}updated(t){super.updated(t),t.has("image")&&(this._imageError=!1);const e=g[this.size]??this.size;this.style.setProperty("--avatar-size",e),this.style.setProperty("--avatar-bg-size","contain"===this.fit?"contain":"cover"),this.style.setProperty("--avatar-border-radius",c(this.radius)),this.color&&this.style.setProperty("--slot-text-color",h(this.color)),this.adjustSpinnerSize()}_handleInteractiveClick(t){this.interactive&&!this.disabled&&(t.stopPropagation(),this.dispatchEvent(new Event("click",{bubbles:!0,composed:!0})))}_handleInteractiveKeydown(t){this.interactive&&!this.disabled&&("Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.dispatchEvent(new Event("click",{bubbles:!0,composed:!0}))))}adjustSpinnerSize(){const t=b[this.size]??parseFloat(this.size);if(Number.isFinite(t)){const e=.25*t,i=this.shadowRoot?.querySelector(".spinner");i&&(i.style.width=`${e}px`,i.style.height=`${e}px`,i.style.borderWidth=`${Math.max(1,e/10)}px`)}}render(){const t=this.image&&!this._imageError,e={};t&&(e.backgroundImage=`url(${encodeURI(this.image)})`),this.outline&&(e.outline=this.outline),this.outlineOffset&&(e.outlineOffset=this.outlineOffset);const i=this.interactive?"button":t&&this.alt?"img":o,r=this.interactive&&this.alt||t&&this.alt?this.alt:o;return s`
-      <div
-        class=${v({avatar:!0,"avatar--interactive":!!this.interactive})}
-        part="avatar"
-        style=${y(e)}
-        role=${i}
-        aria-label=${r}
-        tabindex=${this.interactive&&!this.disabled?"0":o}
-        @click=${this._handleInteractiveClick}
-        @keydown=${this._handleInteractiveKeydown}
-      >
-        ${this.image?s`<img
-              class="image-probe"
-              src=${this.image}
-              alt=""
-              @load=${this._onImageLoad}
-              @error=${this._onImageError}
-            />`:o}
-        <div class="loading-overlay" part="loading-overlay">
-          <div class="spinner" part="spinner"></div>
-        </div>
-        ${p(t?"_img_":"_slot_",d(!t,()=>s`<slot></slot>`,()=>o))}
-      </div>
-    `}};t([a({type:String}),e("design:type",String)],m.prototype,"size",void 0),t([a({type:String}),e("design:type",String)],m.prototype,"image",void 0),t([a({type:String,reflect:!0}),e("design:type",String)],m.prototype,"fit",void 0),t([a({type:String}),e("design:type",String)],m.prototype,"radius",void 0),t([a({type:String}),e("design:type",String)],m.prototype,"alt",void 0),t([a({type:String}),e("design:type",String)],m.prototype,"color",void 0),t([a({type:String}),e("design:type",String)],m.prototype,"outline",void 0),t([a({type:String}),e("design:type",String)],m.prototype,"outlineOffset",void 0),t([a({type:Boolean,reflect:!0}),e("design:type",Boolean)],m.prototype,"loading",void 0),t([a({type:Boolean,reflect:!0}),e("design:type",Boolean)],m.prototype,"disabled",void 0),t([a({type:Boolean}),e("design:type",Boolean)],m.prototype,"interactive",void 0),t([a({type:Boolean,reflect:!0}),e("design:type",Object)],m.prototype,"shadow",void 0),t([n(),e("design:type",Object)],m.prototype,"_imageError",void 0),m=t([l("sky-avatar")],m);export{m as SkyAvatar};
+  `,g([o({type:String})],f.prototype,"size",2),g([o({type:String})],f.prototype,"image",2),g([o({type:String,reflect:!0})],f.prototype,"fit",2),g([o({type:String})],f.prototype,"radius",2),g([o({type:String})],f.prototype,"alt",2),g([o({type:String})],f.prototype,"color",2),g([o({type:String})],f.prototype,"outline",2),g([o({type:String})],f.prototype,"outlineOffset",2),g([o({type:Boolean,reflect:!0})],f.prototype,"loading",2),g([o({type:Boolean,reflect:!0})],f.prototype,"disabled",2),g([o({type:Boolean})],f.prototype,"interactive",2),g([o({type:Boolean,reflect:!0})],f.prototype,"shadow",2),g([a()],f.prototype,"_imageError",2),f=g([s("sky-avatar")],f);export{f as SkyAvatar};
 //# sourceMappingURL=sky-avatar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sky-avatar.js","sources":["../../src/sky-avatar/sky-avatar.ts"],"sourcesContent":[null],"names":["SIZE_PRESETS","sm","md","lg","SIZE_PX","SkyAvatar","LitElement","constructor","this","size","image","fit","radius","alt","color","outline","outlineOffset","loading","disabled","interactive","shadow","_imageError","_onImageLoad","_onImageError","styles","css","updated","changed","super","has","resolvedSize","style","setProperty","resolveRadius","resolveColor","adjustSpinnerSize","_handleInteractiveClick","e","stopPropagation","dispatchEvent","Event","bubbles","composed","_handleInteractiveKeydown","key","preventDefault","avatarSizePx","parseFloat","Number","isFinite","spinnerSize","spinner","shadowRoot","querySelector","width","height","borderWidth","Math","max","render","showImage","avatarStyle","encodeURI","role","nothing","ariaLabel","html","classMap","avatar","styleMap","keyed","when","__decorate","property","type","String","prototype","reflect","Boolean","state","customElement"],"mappings":"6gBAWA,MAAMA,EAAuC,CAC3CC,GAAI,2BACJC,GAAI,8BACJC,GAAI,6BAGAC,EAAkC,CAAEH,GAAI,GAAIC,GAAI,GAAIC,GAAI,IA8DvD,IAAME,EAAN,cAAwBC,EAAxB,WAAAC,uBAGuBC,KAAAC,KAAe,OAGfD,KAAAE,MAAgB,GAGDF,KAAAG,IAAoB,QAGnCH,KAAAI,OAAiB,KAGjBJ,KAAAK,IAAc,GAGdL,KAAAM,MAAgB,OAGhBN,KAAAO,QAAkB,GAGlBP,KAAAQ,cAAwB,MAGRR,KAAAS,SAAmB,EAGnBT,KAAAU,UAAoB,EAGnCV,KAAAW,aAAuB,EAOpDX,KAAAY,QAAS,EAGQZ,KAAAa,aAAc,EAwKvBb,KAAAc,aAAe,KACrBd,KAAKa,aAAc,GAIbb,KAAAe,cAAgB,KACtBf,KAAKa,aAAc,EA8FvB,QAzQkBb,KAAAgB,OAASC,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuI1B,CAEO,OAAAC,CAAQC,GACfC,MAAMF,QAAQC,GAEVA,EAAQE,IAAI,WACdrB,KAAKa,aAAc,GAGrB,MAAMS,EAAe9B,EAAaQ,KAAKC,OAASD,KAAKC,KACrDD,KAAKuB,MAAMC,YAAY,gBAAiBF,GAExCtB,KAAKuB,MAAMC,YACT,mBACa,YAAbxB,KAAKG,IAAoB,UAAY,SAGvCH,KAAKuB,MAAMC,YACT,yBACAC,EAAczB,KAAKI,SAGjBJ,KAAKM,OACPN,KAAKuB,MAAMC,YAAY,oBAAqBE,EAAa1B,KAAKM,QAGhEN,KAAK2B,mBACP,CAaQ,uBAAAC,CAAwBC,GACzB7B,KAAKW,cAAeX,KAAKU,WAC9BmB,EAAEC,kBACF9B,KAAK+B,cAAc,IAAIC,MAAM,QAAS,CAAEC,SAAS,EAAMC,UAAU,KACnE,CAGQ,yBAAAC,CAA0BN,GAC3B7B,KAAKW,cAAeX,KAAKU,WAChB,UAAVmB,EAAEO,KAA6B,MAAVP,EAAEO,MACzBP,EAAEQ,iBACFrC,KAAK+B,cAAc,IAAIC,MAAM,QAAS,CAAEC,SAAS,EAAMC,UAAU,MAErE,CAKQ,iBAAAP,GACN,MAAMW,EACJ1C,EAAQI,KAAKC,OAASsC,WAAWvC,KAAKC,MACxC,GAAIuC,OAAOC,SAASH,GAAe,CACjC,MAAMI,EAA6B,IAAfJ,EACdK,EAAU3C,KAAK4C,YAAYC,cAA2B,YACxDF,IACFA,EAAQpB,MAAMuB,MAAQ,GAAGJ,MACzBC,EAAQpB,MAAMwB,OAAS,GAAGL,MAC1BC,EAAQpB,MAAMyB,YAAc,GAAGC,KAAKC,IAAI,EAAGR,EAAc,QAE7D,CACF,CAES,MAAAS,GACP,MAAMC,EAAYpD,KAAKE,QAAUF,KAAKa,YAChCwC,EAAsC,CAAA,EACxCD,IACFC,EAA6B,gBAAI,OAAOC,UAAUtD,KAAKE,WAErDF,KAAKO,UACP8C,EAAqB,QAAIrD,KAAKO,SAE5BP,KAAKQ,gBACP6C,EAA2B,cAAIrD,KAAKQ,eAGtC,MAAM+C,EAAOvD,KAAKW,YACd,SACAyC,GAAapD,KAAKK,IAChB,MACAmD,EACAC,EACJzD,KAAKW,aAAeX,KAAKK,KAErB+C,GAAapD,KAAKK,IADlBL,KAAKK,IAGHmD,EAER,OAAOE,CAAI;;gBAECC,EAAS,CACfC,QAAQ,EACR,wBAAyB5D,KAAKW;;gBAGxBkD,EAASR;eACVE;qBACME;mBACFzD,KAAKW,cAAgBX,KAAKU,SAAW,IAAM8C;iBAC7CxD,KAAK4B;mBACH5B,KAAKmC;;UAEdnC,KAAKE,MACHwD,CAAI;;oBAEI1D,KAAKE;;sBAEHF,KAAKc;uBACJd,KAAKe;gBAEhByC;;;;UAIFM,EACAV,EAAY,QAAU,SACtBW,GAAMX,EAAW,IAAMM,CAAI,gBAAiB,IAAMF;;KAI1D,GAnT4BQ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,kCAAgCtE,EAAAuE,UAAA,eAGtBJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,kCAA6BtE,EAAAuE,UAAA,gBAGJJ,EAAA,CAA1CC,EAAS,CAAEC,KAAMC,OAAQE,SAAS,6BAAoCxE,EAAAuE,UAAA,cAG3CJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,kCAAgCtE,EAAAuE,UAAA,iBAGtBJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,kCAA2BtE,EAAAuE,UAAA,cAGjBJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,kCAAiCtE,EAAAuE,UAAA,gBAGvBJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,kCAA+BtE,EAAAuE,UAAA,kBAGrBJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,kCAAwCtE,EAAAuE,UAAA,wBAGdJ,EAAA,CAA3CC,EAAS,CAAEC,KAAMI,QAASD,SAAS,8BAAiCxE,EAAAuE,UAAA,kBAGzBJ,EAAA,CAA3CC,EAAS,CAAEC,KAAMI,QAASD,SAAS,8BAAkCxE,EAAAuE,UAAA,mBAGzCJ,EAAA,CAA5BC,EAAS,CAAEC,KAAMI,oCAAwCzE,EAAAuE,UAAA,sBAO1DJ,EAAA,CADCC,EAAS,CAAEC,KAAMI,QAASD,SAAS,6BACrBxE,EAAAuE,UAAA,iBAGEJ,EAAA,CAAhBO,6BAAoC1E,EAAAuE,UAAA,sBA3C1BvE,EAASmE,EAAA,CADrBQ,EAAc,eACF3E"}
+{"version":3,"file":"sky-avatar.js","sources":["../../src/sky-avatar/sky-avatar.ts"],"sourcesContent":["import { LitElement, html, css, PropertyValues, nothing } from \"lit\";\r\nimport { customElement, property, state } from \"lit/decorators.js\";\r\nimport { when } from \"lit/directives/when.js\";\r\nimport { keyed } from \"lit/directives/keyed.js\";\r\nimport { resolveRadius } from \"../helper/utils/size-resolver\";\r\nimport { resolveColor } from \"../helper/utils/color-resolver\";\r\nimport { styleMap } from \"lit/directives/style-map.js\";\r\nimport { classMap } from \"lit/directives/class-map.js\";\r\n\r\nexport type SkyAvatarFit = \"cover\" | \"contain\";\r\n\r\nconst SIZE_PRESETS: Record<string, string> = {\r\n  sm: \"var(--sky-space-8, 2rem)\",\r\n  md: \"var(--sky-space-10, 2.5rem)\",\r\n  lg: \"var(--sky-space-12, 3rem)\",\r\n};\r\n\r\nconst SIZE_PX: Record<string, number> = { sm: 32, md: 40, lg: 48 };\r\n\r\n\r\n/**\r\n * @element sky-avatar\r\n *\r\n * @summary Avatar that renders image content or fallback slot content with configurable size, radius, outline, and loading state.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://library.sky-ui.com/components/avatar\r\n *\r\n * @slot - Fallback content (e.g., initials or an icon) rendered when `image` is empty.\r\n *\r\n * @property {string} size - Avatar size: preset `sm` | `md` | `lg` or CSS length (for example `50px`).\r\n * @property {string} image - Image URL; fallback slot is shown on load error.\r\n * @property {SkyAvatarFit} fit - Image fill mode: `cover` (default) or `contain`.\r\n * @property {string} radius - Border radius token or CSS value.\r\n * @property {string} color - Token or CSS color applied to fallback slot content.\r\n * @property {string} alt - Accessible name when image content conveys meaning.\r\n * @property {string} outline - CSS `outline` value.\r\n * @property {string} outlineOffset - CSS `outline-offset` value.\r\n * @property {boolean} loading - Shows loading overlay when true.\r\n * @property {boolean} disabled - Dims and disables pointer interactions.\r\n * @property {boolean} interactive - Enables interactive behavior with keyboard/click activation.\r\n * @property {boolean} shadow - When true, applies solid surface, border ring, and elevation; no backdrop blur.\r\n *\r\n * @csspart avatar - The avatar container element.\r\n * @csspart loading-overlay - The loading overlay container (shown when `loading` is true).\r\n * @csspart spinner - The spinner element shown when loading.\r\n *\r\n * @Behavior\r\n * - Applies image content when available; otherwise renders fallback slot content.\r\n * - Uses keyed rendering to reset avatar content when image availability changes.\r\n * - Scales spinner dimensions from resolved avatar size for numeric values.\r\n * - Respects reduced-motion preference by disabling spinner animation.\r\n *\r\n * @example\r\n * ```html\r\n * <sky-avatar size=\"56px\" radius=\"full\" color=\"primary\">\r\n *   JD\r\n * </sky-avatar>\r\n * ```\r\n * ```vue\r\n * <template>\r\n *   <sky-avatar size=\"56px\" radius=\"full\" color=\"primary\">\r\n *     JD\r\n *   </sky-avatar>\r\n * </template>\r\n * ```\r\n * ```jsx\r\n * export default function Demo() {\r\n *   return (\r\n *     <sky-avatar size=\"56px\" radius=\"full\" color=\"primary\">\r\n *       JD\r\n *     </sky-avatar>\r\n *   );\r\n * }\r\n * ```\r\n */\r\n@customElement(\"sky-avatar\")\r\nexport class SkyAvatar extends LitElement {\r\n\r\n  /** Avatar size: preset sm|md|lg or CSS length. @default \"50px\" */\r\n  @property({ type: String }) size: string = \"50px\";\r\n\r\n  /** Image URL. On error, slot is shown. @default \"\" */\r\n  @property({ type: String }) image: string = \"\";\r\n\r\n  /** How the image fills the avatar. @default \"cover\" */\r\n  @property({ type: String, reflect: true }) fit: SkyAvatarFit = \"cover\";\r\n\r\n  /** Border radius token or CSS value. @default \"md\" */\r\n  @property({ type: String }) radius: string = \"md\";\r\n\r\n  /** Accessible name when image is set. @default \"\" */\r\n  @property({ type: String }) alt: string = \"\";\r\n\r\n  /** Slot text/icon color token/CSS color. @default \"dark\" */\r\n  @property({ type: String }) color: string = \"dark\";\r\n\r\n  /** Outline string. @default \"\" */\r\n  @property({ type: String }) outline: string = \"\";\r\n\r\n  /** Outline offset value. @default \"2px\" */\r\n  @property({ type: String }) outlineOffset: string = \"2px\";\r\n\r\n  /** Loading state. @default false */\r\n  @property({ type: Boolean, reflect: true }) loading: boolean = false;\r\n\r\n  /** Disables the avatar. @default false */\r\n  @property({ type: Boolean, reflect: true }) disabled: boolean = false;\r\n\r\n  /** When true, focusable with focus ring and click. @default false */\r\n  @property({ type: Boolean }) interactive: boolean = false;\r\n\r\n  /**\r\n   * Elevated ring styling (`border`, inset shadow). No backdrop blur on avatar media.\r\n   * `false` (default) keeps the avatar minimal for inline use.\r\n   */\r\n  @property({ type: Boolean, reflect: true })\r\n  shadow = false;\r\n\r\n  /** True when image failed to load; show slot instead. */\r\n  @state() private _imageError = false;\r\n\r\n\r\n  static override styles = css`\r\n    :host {\r\n      display: inline-flex;\r\n      line-height: 0;\r\n      justify-content: center;\r\n      align-items: center;\r\n    }\r\n\r\n    :host([disabled]) {\r\n      opacity: var(--sky-opacity-disabled, 0.5);\r\n      pointer-events: none;\r\n    }\r\n\r\n    .avatar {\r\n      width: var(--avatar-size);\r\n      height: var(--avatar-size);\r\n      position: relative;\r\n      background-size: var(--avatar-bg-size, cover);\r\n      background-position: center;\r\n      background-repeat: no-repeat;\r\n      border-radius: var(--avatar-border-radius, var(--sky-radius-secondary));\r\n      display: flex;\r\n      color: var(--slot-text-color);\r\n      justify-content: center;\r\n      align-items: center;\r\n      background-clip: padding-box;\r\n      -webkit-background-clip: padding-box;\r\n      box-sizing: border-box;\r\n      overflow: hidden;\r\n      backdrop-filter: none;\r\n      -webkit-backdrop-filter: none;\r\n    }\r\n\r\n    :host([shadow]) .avatar {\r\n      background-color: var(--sky-glass-solid);\r\n      box-shadow:\r\n        var(--sky-box-shadow-inset),\r\n        var(--sky-box-shadow-primary);\r\n      border: var(--sky-border-primary);\r\n    }\r\n\r\n    :host([loading]) .avatar {\r\n      will-change: transform;\r\n      transform: translateZ(0);\r\n    }\r\n\r\n    .avatar:focus-visible {\r\n      outline: none;\r\n      box-shadow: var(--sky-focus-ring);\r\n    }\r\n\r\n    :host([shadow]) .avatar:focus-visible {\r\n      box-shadow:\r\n        var(--sky-focus-ring),\r\n        var(--sky-box-shadow-inset),\r\n        var(--sky-box-shadow-primary);\r\n    }\r\n\r\n    .avatar--interactive {\r\n      cursor: pointer;\r\n      -webkit-tap-highlight-color: transparent;\r\n    }\r\n\r\n    .image-probe {\r\n      position: absolute;\r\n      width: 0;\r\n      height: 0;\r\n      opacity: 0;\r\n      pointer-events: none;\r\n    }\r\n\r\n    ::slotted(*) {\r\n      font-family: var(--sky-font);\r\n      font-weight: var(--sky-font-weight-semibold, 600);\r\n      font-size: calc(var(--avatar-size) * 0.38);\r\n      line-height: 1;\r\n      letter-spacing: var(--sky-letter-spacing-normal, 0);\r\n      text-align: center;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      object-fit: contain;\r\n      backdrop-filter: none;\r\n      -webkit-backdrop-filter: none;\r\n    }\r\n\r\n    .loading-overlay {\r\n      position: absolute;\r\n      inset: 0;\r\n      border-radius: inherit;\r\n      background: var(--sky-overlay-secondary);\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      z-index: 1;\r\n      visibility: hidden;\r\n      backdrop-filter: none;\r\n      -webkit-backdrop-filter: none;\r\n    }\r\n    :host([loading]) .loading-overlay {\r\n      visibility: visible;\r\n    }\r\n\r\n    .spinner {\r\n      border-width: 2px;\r\n      border-style: solid;\r\n      border-color: var(--sky-border-light);\r\n      border-top-color: var(--slot-text-color, var(--sky-text-primary));\r\n      border-radius: var(--sky-radius-full);\r\n      width: 40px;\r\n      height: 40px;\r\n      animation: spin var(--sky-duration-slow, 1s) linear infinite;\r\n    }\r\n\r\n    @keyframes spin {\r\n      0% {\r\n        transform: rotate(0deg);\r\n      }\r\n      100% {\r\n        transform: rotate(360deg);\r\n      }\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      :host([loading]) .avatar {\r\n        will-change: auto;\r\n        transform: none;\r\n      }\r\n\r\n      .spinner {\r\n        animation: none;\r\n        border-top-color: var(--slot-text-color, var(--sky-text-primary));\r\n        opacity: var(--sky-opacity-muted, 0.7);\r\n      }\r\n    }\r\n  `;\r\n\r\n  override updated(changed: PropertyValues): void {\r\n    super.updated(changed);\r\n\r\n    if (changed.has(\"image\")) {\r\n      this._imageError = false;\r\n    }\r\n\r\n    const resolvedSize = SIZE_PRESETS[this.size] ?? this.size;\r\n    this.style.setProperty(\"--avatar-size\", resolvedSize);\r\n\r\n    this.style.setProperty(\r\n      \"--avatar-bg-size\",\r\n      this.fit === \"contain\" ? \"contain\" : \"cover\",\r\n    );\r\n\r\n    this.style.setProperty(\r\n      \"--avatar-border-radius\",\r\n      resolveRadius(this.radius),\r\n    );\r\n\r\n    if (this.color) {\r\n      this.style.setProperty(\"--slot-text-color\", resolveColor(this.color));\r\n    }\r\n\r\n    this.adjustSpinnerSize();\r\n  }\r\n\r\n  /** Marks image load success and keeps image rendering active. */\r\n  private _onImageLoad = (): void => {\r\n    this._imageError = false;\r\n  };\r\n\r\n  /** Marks image load failure and enables fallback slot rendering. */\r\n  private _onImageError = (): void => {\r\n    this._imageError = true;\r\n  };\r\n\r\n  /** Re-dispatches click in interactive mode for host-level consumers. */\r\n  private _handleInteractiveClick(e: Event): void {\r\n    if (!this.interactive || this.disabled) return;\r\n    e.stopPropagation();\r\n    this.dispatchEvent(new Event(\"click\", { bubbles: true, composed: true }));\r\n  }\r\n\r\n  /** Handles keyboard activation in interactive mode. */\r\n  private _handleInteractiveKeydown(e: KeyboardEvent): void {\r\n    if (!this.interactive || this.disabled) return;\r\n    if (e.key === \"Enter\" || e.key === \" \") {\r\n      e.preventDefault();\r\n      this.dispatchEvent(new Event(\"click\", { bubbles: true, composed: true }));\r\n    }\r\n  }\r\n\r\n\r\n\r\n  /** Derives spinner dimensions from current avatar size. */\r\n  private adjustSpinnerSize(): void {\r\n    const avatarSizePx =\r\n      SIZE_PX[this.size] ?? parseFloat(this.size);\r\n    if (Number.isFinite(avatarSizePx)) {\r\n      const spinnerSize = avatarSizePx * 0.25;\r\n      const spinner = this.shadowRoot?.querySelector<HTMLElement>(\".spinner\");\r\n      if (spinner) {\r\n        spinner.style.width = `${spinnerSize}px`;\r\n        spinner.style.height = `${spinnerSize}px`;\r\n        spinner.style.borderWidth = `${Math.max(1, spinnerSize / 10)}px`;\r\n      }\r\n    }\r\n  }\r\n\r\n  override render() {\r\n    const showImage = this.image && !this._imageError;\r\n    const avatarStyle: Record<string, string> = {};\r\n    if (showImage) {\r\n      avatarStyle[\"backgroundImage\"] = `url(${encodeURI(this.image)})`;\r\n    }\r\n    if (this.outline) {\r\n      avatarStyle[\"outline\"] = this.outline;\r\n    }\r\n    if (this.outlineOffset) {\r\n      avatarStyle[\"outlineOffset\"] = this.outlineOffset;\r\n    }\r\n\r\n    const role = this.interactive\r\n      ? \"button\"\r\n      : showImage && this.alt\r\n        ? \"img\"\r\n        : nothing;\r\n    const ariaLabel =\r\n      this.interactive && this.alt\r\n        ? this.alt\r\n        : showImage && this.alt\r\n          ? this.alt\r\n          : nothing;\r\n\r\n    return html`\r\n      <div\r\n        class=${classMap({\r\n          avatar: true,\r\n          \"avatar--interactive\": !!this.interactive,\r\n        })}\r\n        part=\"avatar\"\r\n        style=${styleMap(avatarStyle)}\r\n        role=${role}\r\n        aria-label=${ariaLabel}\r\n        tabindex=${this.interactive && !this.disabled ? \"0\" : nothing}\r\n        @click=${this._handleInteractiveClick}\r\n        @keydown=${this._handleInteractiveKeydown}\r\n      >\r\n        ${this.image\r\n          ? html`<img\r\n              class=\"image-probe\"\r\n              src=${this.image}\r\n              alt=\"\"\r\n              @load=${this._onImageLoad}\r\n              @error=${this._onImageError}\r\n            />`\r\n          : nothing}\r\n        <div class=\"loading-overlay\" part=\"loading-overlay\">\r\n          <div class=\"spinner\" part=\"spinner\"></div>\r\n        </div>\r\n        ${keyed(\r\n          showImage ? \"_img_\" : \"_slot_\",\r\n          when(!showImage, () => html`<slot></slot>`, () => nothing),\r\n        )}\r\n      </div>\r\n    `;\r\n  }\r\n}\r\n"],"names":["SIZE_PRESETS","sm","md","lg","SIZE_PX","SkyAvatar","LitElement","constructor","super","arguments","this","size","image","fit","radius","alt","color","outline","outlineOffset","loading","disabled","interactive","shadow","_imageError","_onImageLoad","_onImageError","updated","changed","has","resolvedSize","style","setProperty","resolveRadius","resolveColor","adjustSpinnerSize","_handleInteractiveClick","e","stopPropagation","dispatchEvent","Event","bubbles","composed","_handleInteractiveKeydown","key","preventDefault","avatarSizePx","parseFloat","Number","isFinite","spinnerSize","spinner","shadowRoot","querySelector","width","height","borderWidth","Math","max","render","showImage","avatarStyle","encodeURI","role","nothing","ariaLabel","html","classMap","avatar","styleMap","keyed","when","styles","css","__decorateClass","property","type","String","prototype","reflect","Boolean","state","customElement"],"mappings":"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"}

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

@@ -119,7 +119,7 @@ export declare class SkyBadge extends LitElement {
     placement: SkyBadgePlacement;
     private _badgeEl;
     /** Ref for the badge element (e.g. for tooltip anchor or positioning). */
-    badgeRef: import("lit-html/directives/ref").Ref<HTMLSpanElement>;
+    badgeRef: import("lit-html/directives/ref.js").Ref<HTMLSpanElement>;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult;
     protected updated(changed: PropertyValues<this>): void;

package/dist/sky-badge/sky-badge.js

@@ -1,4 +1,29 @@
-import{__decorate as t,__metadata as e}from"tslib";import{LitElement as i,css as o,nothing as s,html as r}from"lit";import{property as a,query as n,customElement as l}from"lit/decorators.js";import{when as d}from"lit/directives/when.js";import{createRef as p,ref as c}from"lit/directives/ref.js";import{resolveSemanticSurfaceKey as g,semanticSoftSurfaceTokens as h,resolveColor as b,resolveTextColorForToken as y}from"../helper/utils/color-resolver.js";import{styleMap as u}from"lit/directives/style-map.js";import{SkyIcon as f}from"../sky-icon/sky-icon.js";const v=["default","floating","inline"],m=["circle","pill","custom"],k=["custom","top-right","top-left","bottom-left","bottom-right","top-center"];let x=class extends i{constructor(){super(...arguments),this.statusColor="success",this.textColor="default",this.iconColor="",this.position="default",this.value="",this.isIcon=!1,this.size="",this.shape="custom",this.max=99,this.hideWhenZero=!1,this.show=!0,this.offsetX="0px",this.offsetY="0px",this.ring=!1,this.ringColor="primary",this.ringOffset="1px",this.badgeLabel=null,this.badgeAriaHidden=!1,this.interactive=!1,this.placement="custom",this.badgeRef=p(),this._onActivate=t=>{this.interactive&&this.dispatchEvent(new CustomEvent("badge-click",{detail:{originalEvent:t},bubbles:!0,composed:!0}))},this._onKeydown=t=>{this.interactive&&("Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this._onActivate(t)))}}static{this.dependencies={"sky-icon":f}}static{this.shadowRootOptions={mode:"open",delegatesFocus:!0}}static{this.styles=o`
+import{css as t,LitElement as e,nothing as o,html as i}from"lit";import{property as r,query as s,customElement as a}from"lit/decorators.js";import{when as n}from"lit/directives/when.js";import{createRef as l,ref as c}from"lit/directives/ref.js";import{resolveSemanticSurfaceKey as p,semanticSoftSurfaceTokens as d,resolveColor as h,resolveTextColorForToken as g}from"../helper/utils/color-resolver.js";import{styleMap as b}from"lit/directives/style-map.js";import{SkyIcon as u}from"../sky-icon/sky-icon.js";var f=Object.defineProperty,y=Object.getOwnPropertyDescriptor,m=(t,e,o,i)=>{for(var r,s=i>1?void 0:i?y(e,o):e,a=t.length-1;a>=0;a--)(r=t[a])&&(s=(i?r(e,o,s):r(s))||s);return i&&s&&f(e,o,s),s};const v=["default","floating","inline"],k=["circle","pill","custom"],x=["custom","top-right","top-left","bottom-left","bottom-right","top-center"];let _=class extends e{constructor(){super(...arguments),this.statusColor="success",this.textColor="default",this.iconColor="",this.position="default",this.value="",this.isIcon=!1,this.size="",this.shape="custom",this.max=99,this.hideWhenZero=!1,this.show=!0,this.offsetX="0px",this.offsetY="0px",this.ring=!1,this.ringColor="primary",this.ringOffset="1px",this.badgeLabel=null,this.badgeAriaHidden=!1,this.interactive=!1,this.placement="custom",this.badgeRef=l(),this._onActivate=t=>{this.interactive&&this.dispatchEvent(new CustomEvent("badge-click",{detail:{originalEvent:t},bubbles:!0,composed:!0}))},this._onKeydown=t=>{this.interactive&&("Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this._onActivate(t)))}}updated(t){t.has("size")&&/^\d+$/.test(this.size)&&(this.size=`${this.size}px`),t.has("position")&&!v.includes(this.position)&&(this.position="default"),t.has("shape")&&!k.includes(this.shape)&&(this.shape="custom"),t.has("placement")&&!x.includes(this.placement)&&(this.placement="custom")}showBadge(){this.show=!0}hideBadge(){this.show=!1}setValue(t){this.value=t}_computeAriaLabel(t){if(this.badgeAriaHidden)return null;if(this.badgeLabel)return this.badgeLabel;if(this.isIcon)return"";if(null==t||""===t)return"Badge";const e=Number(t);return isNaN(e)?`Badge: ${t}`:`Badge count: ${t}`}_computeAnchors(t){if("custom"===t)return{top:"0",right:"0",bottom:"auto",left:"auto"};switch(t){case"top-right":default:return{top:"0",right:"0",bottom:"auto",left:"auto"};case"top-left":return{top:"0",right:"auto",bottom:"auto",left:"0"};case"bottom-left":return{top:"auto",right:"auto",bottom:"0",left:"0"};case"bottom-right":return{top:"auto",right:"0",bottom:"0",left:"auto"};case"top-center":return{top:"0",right:"auto",bottom:"auto",left:"50%"}}}_resolveBadgeSurface(){const t=p(this.statusColor);if(t){const e=d(t,{bordered:!0}),o=this.textColor&&"default"!==this.textColor?h(this.textColor):e.color;return{bg:e.bg,color:o,border:e.border}}return{bg:h(this.statusColor),color:this.textColor&&"default"!==this.textColor?h(this.textColor):g(this.statusColor),border:"none"}}render(){const t=Number(this.value),e=!isNaN(t)&&!this.isIcon,r=this.hideWhenZero&&e&&0===t,s=this.show&&!r,a=this.isIcon?null:e&&this.max>0&&t>this.max?`${this.max}+`:this.value,l=["badge",this.position];this.ring&&l.push("ringed");const p="circle"===this.shape||"pill"===this.shape?"var(--sky-radius-full)":"var(--sky-badge-radius)",d=this._resolveBadgeSurface(),{top:g,right:u,bottom:f,left:y}=this._computeAnchors(this.placement),m={"--_badge-bg":d.bg,"--_badge-text-color":d.color,"--_badge-border":d.border,"--_badge-radius":p,"--_badge-size":this.size,"--_icon-size":this.size,"--_icon-color":h(this.iconColor||this.textColor),"--_ring-color":h(this.ringColor),"--_ring-offset":this.ringOffset,"--sky-badge-translate-x":this.offsetX,"--sky-badge-translate-y":this.offsetY,"--_anchor-top":g,"--_anchor-right":u,"--_anchor-bottom":f,"--_anchor-left":y},v=this._computeAriaLabel(a);return i`
+      <div class="container" part="container">
+        <slot></slot>
+        ${n(s,()=>i`
+            <span
+              class=${l.join(" ")}
+              part="badge"
+              style=${b(m)}
+              role=${this.interactive?"button":"status"}
+              aria-live=${this.interactive?"off":"polite"}
+              data-placement=${this.placement}
+              aria-atomic="true"
+              aria-label=${v??o}
+              aria-hidden=${this.badgeAriaHidden?"true":"false"}
+              tabindex=${this.interactive?0:-1}
+              @click=${this._onActivate}
+              @keydown=${this._onKeydown}
+              ${c(this.badgeRef)}
+            >
+              <slot name="badge">
+                ${n(this.isIcon,()=>i`<sky-icon part="icon" icon=${this.value} aria-hidden="true"></sky-icon>`,()=>i`${a}`)}
+              </slot>
+            </span>
+          `)}
+      </div>
+    `}};_.dependencies={"sky-icon":u},_.shadowRootOptions={mode:"open",delegatesFocus:!0},_.styles=t`
     :host {
       display: inline-block;
       position: relative;
@@ -121,30 +146,5 @@ import{__decorate as t,__metadata as e}from"tslib";import{LitElement as i,css as
         var(--sky-badge-translate-y)
       );
     }
-  `}updated(t){t.has("size")&&/^\d+$/.test(this.size)&&(this.size=`${this.size}px`),t.has("position")&&!v.includes(this.position)&&(this.position="default"),t.has("shape")&&!m.includes(this.shape)&&(this.shape="custom"),t.has("placement")&&!k.includes(this.placement)&&(this.placement="custom")}showBadge(){this.show=!0}hideBadge(){this.show=!1}setValue(t){this.value=t}_computeAriaLabel(t){if(this.badgeAriaHidden)return null;if(this.badgeLabel)return this.badgeLabel;if(this.isIcon)return"";if(null==t||""===t)return"Badge";const e=Number(t);return isNaN(e)?`Badge: ${t}`:`Badge count: ${t}`}_computeAnchors(t){if("custom"===t)return{top:"0",right:"0",bottom:"auto",left:"auto"};switch(t){case"top-right":default:return{top:"0",right:"0",bottom:"auto",left:"auto"};case"top-left":return{top:"0",right:"auto",bottom:"auto",left:"0"};case"bottom-left":return{top:"auto",right:"auto",bottom:"0",left:"0"};case"bottom-right":return{top:"auto",right:"0",bottom:"0",left:"auto"};case"top-center":return{top:"0",right:"auto",bottom:"auto",left:"50%"}}}_resolveBadgeSurface(){const t=g(this.statusColor);if(t){const e=h(t,{bordered:!0}),i=this.textColor&&"default"!==this.textColor?b(this.textColor):e.color;return{bg:e.bg,color:i,border:e.border}}return{bg:b(this.statusColor),color:this.textColor&&"default"!==this.textColor?b(this.textColor):y(this.statusColor),border:"none"}}render(){const t=Number(this.value),e=!isNaN(t)&&!this.isIcon,i=this.hideWhenZero&&e&&0===t,o=this.show&&!i,a=this.isIcon?null:e&&this.max>0&&t>this.max?`${this.max}+`:this.value,n=["badge",this.position];this.ring&&n.push("ringed");const l="circle"===this.shape||"pill"===this.shape?"var(--sky-radius-full)":"var(--sky-badge-radius)",p=this._resolveBadgeSurface(),{top:g,right:h,bottom:y,left:f}=this._computeAnchors(this.placement),v={"--_badge-bg":p.bg,"--_badge-text-color":p.color,"--_badge-border":p.border,"--_badge-radius":l,"--_badge-size":this.size,"--_icon-size":this.size,"--_icon-color":b(this.iconColor||this.textColor),"--_ring-color":b(this.ringColor),"--_ring-offset":this.ringOffset,"--sky-badge-translate-x":this.offsetX,"--sky-badge-translate-y":this.offsetY,"--_anchor-top":g,"--_anchor-right":h,"--_anchor-bottom":y,"--_anchor-left":f},m=this._computeAriaLabel(a);return r`
-      <div class="container" part="container">
-        <slot></slot>
-        ${d(o,()=>r`
-            <span
-              class=${n.join(" ")}
-              part="badge"
-              style=${u(v)}
-              role=${this.interactive?"button":"status"}
-              aria-live=${this.interactive?"off":"polite"}
-              data-placement=${this.placement}
-              aria-atomic="true"
-              aria-label=${m??s}
-              aria-hidden=${this.badgeAriaHidden?"true":"false"}
-              tabindex=${this.interactive?0:-1}
-              @click=${this._onActivate}
-              @keydown=${this._onKeydown}
-              ${c(this.badgeRef)}
-            >
-              <slot name="badge">
-                ${d(this.isIcon,()=>r`<sky-icon part="icon" icon=${this.value} aria-hidden="true"></sky-icon>`,()=>r`${a}`)}
-              </slot>
-            </span>
-          `)}
-      </div>
-    `}};t([a({type:String,reflect:!0}),e("design:type",String)],x.prototype,"statusColor",void 0),t([a({type:String,reflect:!0}),e("design:type",String)],x.prototype,"textColor",void 0),t([a({type:String,reflect:!0}),e("design:type",String)],x.prototype,"iconColor",void 0),t([a({type:String,reflect:!0}),e("design:type",String)],x.prototype,"position",void 0),t([a({type:String}),e("design:type",String)],x.prototype,"value",void 0),t([a({type:Boolean,reflect:!0}),e("design:type",Object)],x.prototype,"isIcon",void 0),t([a({type:String,reflect:!0}),e("design:type",String)],x.prototype,"size",void 0),t([a({type:String,reflect:!0}),e("design:type",String)],x.prototype,"shape",void 0),t([a({type:Number}),e("design:type",Object)],x.prototype,"max",void 0),t([a({type:Boolean}),e("design:type",Object)],x.prototype,"hideWhenZero",void 0),t([a({type:Boolean,reflect:!0}),e("design:type",Object)],x.prototype,"show",void 0),t([a({type:String}),e("design:type",String)],x.prototype,"offsetX",void 0),t([a({type:String}),e("design:type",String)],x.prototype,"offsetY",void 0),t([a({type:Boolean}),e("design:type",Object)],x.prototype,"ring",void 0),t([a({type:String}),e("design:type",String)],x.prototype,"ringColor",void 0),t([a({type:String}),e("design:type",String)],x.prototype,"ringOffset",void 0),t([a({type:String}),e("design:type",Object)],x.prototype,"badgeLabel",void 0),t([a({type:Boolean}),e("design:type",Object)],x.prototype,"badgeAriaHidden",void 0),t([a({type:Boolean}),e("design:type",Object)],x.prototype,"interactive",void 0),t([a({type:String,reflect:!0}),e("design:type",String)],x.prototype,"placement",void 0),t([n(".badge"),e("design:type",HTMLSpanElement)],x.prototype,"_badgeEl",void 0),x=t([l("sky-badge")],x);export{x as SkyBadge};
+  `,m([r({type:String,reflect:!0})],_.prototype,"statusColor",2),m([r({type:String,reflect:!0})],_.prototype,"textColor",2),m([r({type:String,reflect:!0})],_.prototype,"iconColor",2),m([r({type:String,reflect:!0})],_.prototype,"position",2),m([r({type:String})],_.prototype,"value",2),m([r({type:Boolean,reflect:!0})],_.prototype,"isIcon",2),m([r({type:String,reflect:!0})],_.prototype,"size",2),m([r({type:String,reflect:!0})],_.prototype,"shape",2),m([r({type:Number})],_.prototype,"max",2),m([r({type:Boolean})],_.prototype,"hideWhenZero",2),m([r({type:Boolean,reflect:!0})],_.prototype,"show",2),m([r({type:String})],_.prototype,"offsetX",2),m([r({type:String})],_.prototype,"offsetY",2),m([r({type:Boolean})],_.prototype,"ring",2),m([r({type:String})],_.prototype,"ringColor",2),m([r({type:String})],_.prototype,"ringOffset",2),m([r({type:String})],_.prototype,"badgeLabel",2),m([r({type:Boolean})],_.prototype,"badgeAriaHidden",2),m([r({type:Boolean})],_.prototype,"interactive",2),m([r({type:String,reflect:!0})],_.prototype,"placement",2),m([s(".badge")],_.prototype,"_badgeEl",2),_=m([a("sky-badge")],_);export{_ as SkyBadge};
 //# sourceMappingURL=sky-badge.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sky-badge.js","sources":["../../src/sky-badge/sky-badge.ts"],"sourcesContent":[null],"names":["SKY_BADGE_POSITIONS","SKY_BADGE_SHAPES","SKY_BADGE_PLACEMENTS","SkyBadge","LitElement","constructor","this","statusColor","textColor","iconColor","position","value","isIcon","size","shape","max","hideWhenZero","show","offsetX","offsetY","ring","ringColor","ringOffset","badgeLabel","badgeAriaHidden","interactive","placement","badgeRef","createRef","_onActivate","e","dispatchEvent","CustomEvent","detail","originalEvent","bubbles","composed","_onKeydown","key","preventDefault","dependencies","SkyIcon","shadowRootOptions","mode","delegatesFocus","styles","css","updated","changed","has","test","includes","showBadge","hideBadge","setValue","_computeAriaLabel","displayValue","n","Number","isNaN","_computeAnchors","top","right","bottom","left","_resolveBadgeSurface","semanticKey","resolveSemanticSurfaceKey","soft","semanticSoftSurfaceTokens","bordered","color","resolveColor","bg","border","resolveTextColorForToken","render","numeric","isNumeric","shouldHideZero","visible","cls","push","computedRadius","surface","badgeStyle","ariaLabel","html","when","join","styleMap","nothing","ref","__decorate","property","type","String","reflect","prototype","Boolean","query","HTMLSpanElement","customElement"],"mappings":"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"}
+{"version":3,"file":"sky-badge.js","sources":["../../src/sky-badge/sky-badge.ts"],"sourcesContent":["import { LitElement, html, css, PropertyValues, nothing } from \"lit\";\r\nimport { customElement, property, query } from \"lit/decorators.js\";\r\nimport { when } from \"lit/directives/when.js\";\r\nimport { ref, createRef } from \"lit/directives/ref.js\";\r\nimport {\r\n  resolveColor,\r\n  resolveTextColorForToken,\r\n  resolveSemanticSurfaceKey,\r\n  semanticSoftSurfaceTokens,\r\n} from \"../helper/utils/color-resolver\";\r\nimport { styleMap } from \"lit/directives/style-map.js\";\r\nimport { SkyIcon } from \"../sky-icon/sky-icon.js\";\r\n\r\nexport type SkyBadgeClickEventDetail = { originalEvent: Event };\r\nexport type SkyBadgePosition = \"default\" | \"floating\" | \"inline\";\r\nexport type SkyBadgeShape = \"circle\" | \"pill\" | \"custom\";\r\nexport type SkyBadgePlacement =\r\n  | \"custom\"\r\n  | \"top-right\"\r\n  | \"top-left\"\r\n  | \"bottom-left\"\r\n  | \"bottom-right\"\r\n  | \"top-center\";\r\n\r\nconst SKY_BADGE_POSITIONS: readonly SkyBadgePosition[] = [\r\n  \"default\",\r\n  \"floating\",\r\n  \"inline\",\r\n] as const;\r\nconst SKY_BADGE_SHAPES: readonly SkyBadgeShape[] = [\"circle\", \"pill\", \"custom\"] as const;\r\nconst SKY_BADGE_PLACEMENTS: readonly SkyBadgePlacement[] = [\r\n  \"custom\",\r\n  \"top-right\",\r\n  \"top-left\",\r\n  \"bottom-left\",\r\n  \"bottom-right\",\r\n  \"top-center\",\r\n] as const;\r\n\r\n/**\r\n * @element sky-badge\r\n *\r\n * @summary Badge for status dots, counts, or icons anchored to slotted content.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://library.sky-ui.com/components/badge\r\n * @dependency sky-icon\r\n *\r\n * @slot - The content the badge attaches to.\r\n * @slot badge - Optional slot to override the badge content entirely.\r\n *\r\n * @fires {CustomEvent<SkyBadgeClickEventDetail>} badge-click - Emitted when badge activation occurs via click, Enter, or Space while `interactive` is true.\r\n *\r\n * @csspart container - Wrapper around the slotted content and the badge.\r\n * @csspart badge - The badge element. Use `badgeRef` for positioning (e.g. tooltip anchor).\r\n * @csspart icon - The icon element when `isIcon` is true.\r\n *\r\n * @Behavior\r\n * - Visibility is controlled by `show` and `hideWhenZero`.\r\n * - Numeric values above `max` render as `<max>+`.\r\n * - Interactive mode supports click and keyboard activation.\r\n * - Reduced motion mode removes badge transitions.\r\n *\r\n * @property {string} statusColor - Badge background token or CSS color.\r\n * @property {string} textColor - Text color token or CSS color.\r\n * @property {string} iconColor - Icon color token or CSS color; falls back to `textColor` when empty.\r\n * @property {SkyBadgePosition} position - Layout mode: `default | floating | inline`.\r\n * @property {string} value - Badge text/count or icon name in icon mode.\r\n * @property {boolean} isIcon - Renders icon mode when true.\r\n * @property {string} size - Badge and icon size CSS length.\r\n * @property {SkyBadgeShape} shape - Badge shape: `circle | pill | custom`.\r\n * @property {number} max - Maximum numeric count before rendering overflow label.\r\n * @property {boolean} hideWhenZero - Hides badge when value resolves to numeric zero.\r\n * @property {boolean} show - Forces badge visibility independent of value.\r\n * @property {string} offsetX - Horizontal offset CSS length.\r\n * @property {string} offsetY - Vertical offset CSS length.\r\n * @property {boolean} ring - Enables visual ring around the badge.\r\n * @property {string} ringColor - Ring color token or CSS color.\r\n * @property {string} ringOffset - Ring offset CSS length.\r\n * @property {string | null} badgeLabel - ARIA label override.\r\n * @property {boolean} badgeAriaHidden - Hides badge from assistive technology when true.\r\n * @property {boolean} interactive - Enables focus/activation and `badge-click` emission.\r\n * @property {SkyBadgePlacement} placement - Anchor placement preset for badge positioning.\r\n * @method showBadge Forces badge visibility on.\r\n * @method hideBadge Forces badge visibility off.\r\n * @method setValue Updates badge value text or icon name.\r\n *\r\n * @example\r\n * ```html\r\n * <sky-badge value=\"5\" statuscolor=\"danger\" placement=\"top-right\">\r\n *   <sky-icon icon=\"mdi:bell-outline\"></sky-icon>\r\n * </sky-badge>\r\n * ```\r\n * ```vue\r\n * <template>\r\n *   <sky-badge value=\"5\" statuscolor=\"danger\" placement=\"top-right\">\r\n *     <sky-icon icon=\"mdi:bell-outline\"></sky-icon>\r\n *   </sky-badge>\r\n * </template>\r\n * ```\r\n * ```jsx\r\n * export default function Demo() {\r\n *   return (\r\n *     <sky-badge value=\"5\" statuscolor=\"danger\" placement=\"top-right\">\r\n *       <sky-icon icon=\"mdi:bell-outline\"></sky-icon>\r\n *     </sky-badge>\r\n *   );\r\n * }\r\n * ```\r\n */\r\n@customElement(\"sky-badge\")\r\nexport class SkyBadge extends LitElement {\r\n\r\n  static dependencies: Record<string, CustomElementConstructor> = {\r\n    \"sky-icon\": SkyIcon,\r\n  };\r\n\r\n  /** Background color of the badge. */\r\n  @property({ type: String, reflect: true })\r\n  statusColor: string = \"success\";\r\n\r\n  /** Color of text content inside the badge. */\r\n  @property({ type: String, reflect: true })\r\n  textColor: string = \"default\";\r\n\r\n  /** Color of the badge icon (when `isIcon` is true). */\r\n  @property({ type: String, reflect: true })\r\n  iconColor: string = \"\";\r\n\r\n  /** Position of the badge relative to content. */\r\n  @property({ type: String, reflect: true }) position: SkyBadgePosition = \"default\";\r\n\r\n  /** Value or icon name displayed inside the badge. */\r\n  @property({ type: String }) value: string = \"\";\r\n\r\n  /** Whether the badge should render as an icon instead of text. */\r\n  @property({ type: Boolean, reflect: true }) isIcon =\r\n    false;\r\n\r\n  /** Size (width/height) of the badge. e.g., `8px`, `1rem`. */\r\n  @property({ type: String, reflect: true }) size: string = \"\";\r\n\r\n  /** Shape of the badge. `circle`, `pill`, or `custom` (use `--sky-badge-radius`). */\r\n  @property({ type: String, reflect: true }) shape: SkyBadgeShape = \"custom\";\r\n\r\n  /** Maximum numeric count before showing e.g., `99+`. Ignored in icon mode. */\r\n  @property({ type: Number }) max = 99;\r\n\r\n  /** Do not render the badge if numeric value is `0`. */\r\n  @property({ type: Boolean }) hideWhenZero =\r\n    false;\r\n\r\n  /** Controls visibility regardless of value (useful for async data). */\r\n  @property({ type: Boolean, reflect: true }) show = true;\r\n\r\n  /** Pixel or CSS length offsets for `default`/`floating` positions. */\r\n  @property({ type: String }) offsetX: string = \"0px\";\r\n  @property({ type: String }) offsetY: string = \"0px\";\r\n\r\n  /** Optional outline ring around the badge. */\r\n  @property({ type: Boolean }) ring = false;\r\n  @property({ type: String }) ringColor: string =\r\n    \"primary\";\r\n  @property({ type: String }) ringOffset: string =\r\n    \"1px\";\r\n\r\n  /** Accessiblity: override the generated aria-label for screen readers. */\r\n  @property({ type: String }) badgeLabel:\r\n    | string\r\n    | null = null;\r\n\r\n  /** Accessibility: if true, hides the badge from assistive tech (purely decorative). */\r\n  @property({ type: Boolean })\r\n  badgeAriaHidden = false;\r\n\r\n  /** Make badge focusable/clickable and emit `badge-click`. */\r\n  @property({ type: Boolean }) interactive = false;\r\n\r\n  /** Corner preset; use \"custom\" to rely on offsetX/offsetY and existing behavior. */\r\n  @property({ type: String, reflect: true }) placement: SkyBadgePlacement = \"custom\";\r\n\r\n  @query(\".badge\") private _badgeEl!: HTMLSpanElement;\r\n\r\n  /** Ref for the badge element (e.g. for tooltip anchor or positioning). */\r\n  public badgeRef = createRef<HTMLSpanElement>();\r\n\r\n  static override shadowRootOptions: ShadowRootInit = {\r\n    mode: \"open\",\r\n    delegatesFocus: true,\r\n  };\r\n\r\n  static override styles = css`\r\n    :host {\r\n      display: inline-block;\r\n      position: relative;\r\n      box-sizing: border-box;\r\n      /* Theming: override with --sky-badge-* for custom sizing */\r\n      --sky-badge-radius: var(--sky-radius-secondary);\r\n      --sky-badge-padding: var(--sky-space-0\\\\.5, 0.125rem);\r\n      --sky-badge-font-size: var(--sky-font-size-xs, 0.75rem);\r\n      --sky-badge-font-weight: var(--sky-font-weight-bold, 700);\r\n      --sky-badge-shadow: none;\r\n      --sky-badge-translate-x: 0px;\r\n      --sky-badge-translate-y: 0px;\r\n    }\r\n\r\n    .container {\r\n      display: inline-flex;\r\n      position: relative;\r\n      align-items: center;\r\n    }\r\n\r\n    /* Badge base */\r\n    .badge {\r\n      min-height: 5px;\r\n      padding: var(--sky-badge-padding);\r\n      display: inline-flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      box-shadow: var(--sky-badge-shadow);\r\n      color: var(--_badge-text-color);\r\n      background-color: var(--_badge-bg);\r\n      border: var(--_badge-border, none);\r\n      font: var(--sky-text-caption);\r\n      font-weight: var(--sky-badge-font-weight);\r\n      font-size: var(--sky-badge-font-size);\r\n      line-height: var(--sky-line-height-none, 1);\r\n      letter-spacing: var(--sky-letter-spacing-tight, -0.01em);\r\n      position: absolute;\r\n      z-index: 1;\r\n      border-radius: var(--_badge-radius);\r\n      min-width: var(--_badge-size);\r\n      min-height: var(--_badge-size);\r\n      top: var(--_anchor-top, auto);\r\n      right: var(--_anchor-right, auto);\r\n      bottom: var(--_anchor-bottom, auto);\r\n      left: var(--_anchor-left, auto);\r\n      transform: translate(\r\n        var(--sky-badge-translate-x),\r\n        var(--sky-badge-translate-y)\r\n      );\r\n      user-select: none;\r\n      -webkit-user-select: none;\r\n      white-space: nowrap;\r\n      backdrop-filter: none;\r\n      -webkit-backdrop-filter: none;\r\n      transition: var(--sky-transition-fast);\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      .badge {\r\n        transition: none;\r\n      }\r\n    }\r\n\r\n    /* Floating offsets & overlap */\r\n    .badge.floating {\r\n      transform: translate(\r\n        calc(50% + var(--sky-badge-translate-x)),\r\n        calc(-50% + var(--sky-badge-translate-y))\r\n      );\r\n    }\r\n\r\n    /* Inline style participates in text flow */\r\n    .badge.inline {\r\n      position: static;\r\n      display: inline-flex;\r\n      margin-inline-start: var(--sky-space-1\\\\.5, 6px);\r\n      transform: translate(\r\n        var(--sky-badge-translate-x),\r\n        var(--sky-badge-translate-y)\r\n      );\r\n    }\r\n\r\n    /* Icon styling */\r\n    sky-icon[part=\"icon\"] {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      width: 1em;\r\n      height: 1em;\r\n      font-size: var(--_icon-size);\r\n      color: var(--_icon-color);\r\n      backdrop-filter: none;\r\n      -webkit-backdrop-filter: none;\r\n    }\r\n\r\n    /* Interactive affordances */\r\n    .badge[role=\"button\"] {\r\n      cursor: pointer;\r\n      outline: none;\r\n      -webkit-tap-highlight-color: transparent;\r\n    }\r\n    .badge[role=\"button\"]:focus-visible {\r\n      outline: none;\r\n      box-shadow: var(--sky-focus-ring);\r\n    }\r\n\r\n    /* Ring (outline) */\r\n    .badge.ringed::after {\r\n      content: \"\";\r\n      position: absolute;\r\n      inset: calc(-1 * var(--_ring-offset));\r\n      border-radius: inherit;\r\n      box-shadow: 0 0 0 2px var(--_ring-color);\r\n      pointer-events: none;\r\n    }\r\n\r\n    .badge[data-placement=\"top-center\"] {\r\n      transform: translate(\r\n        calc(-50% + var(--sky-badge-translate-x)),\r\n        var(--sky-badge-translate-y)\r\n      );\r\n    }\r\n  `;\r\n\r\n  protected override updated(changed: PropertyValues<this>): void {\r\n    if (changed.has(\"size\")) {\r\n      if (/^\\d+$/.test(this.size as string)) this.size = `${this.size}px`;\r\n    }\r\n    if (\r\n      changed.has(\"position\") &&\r\n      !SKY_BADGE_POSITIONS.includes(this.position)\r\n    ) {\r\n      this.position = \"default\";\r\n    }\r\n    if (changed.has(\"shape\") && !SKY_BADGE_SHAPES.includes(this.shape)) {\r\n      this.shape = \"custom\";\r\n    }\r\n    if (\r\n      changed.has(\"placement\") &&\r\n      !SKY_BADGE_PLACEMENTS.includes(this.placement)\r\n    ) {\r\n      this.placement = \"custom\";\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Forces badge visibility on.\r\n   *\r\n   * @returns {void}\r\n   */\r\n  public showBadge(): void {\r\n    this.show = true;\r\n  }\r\n\r\n  /**\r\n   * Forces badge visibility off.\r\n   *\r\n   * @returns {void}\r\n   */\r\n  public hideBadge(): void {\r\n    this.show = false;\r\n  }\r\n\r\n  /**\r\n   * Updates badge value for text/count or icon modes.\r\n   *\r\n   * @param value Badge value or icon name.\r\n   * @returns {void}\r\n   */\r\n  public setValue(value: string): void {\r\n    this.value = value;\r\n  }\r\n\r\n  /** Emits `badge-click` for interactive activation. */\r\n  private _onActivate = (e: Event) => {\r\n    if (!this.interactive) return;\r\n    this.dispatchEvent(\r\n      new CustomEvent<SkyBadgeClickEventDetail>(\"badge-click\", {\r\n        detail: { originalEvent: e },\r\n        bubbles: true,\r\n        composed: true,\r\n      })\r\n    );\r\n  };\r\n\r\n  /** Handles keyboard activation with Enter and Space. */\r\n  private _onKeydown = (e: KeyboardEvent) => {\r\n    if (!this.interactive) return;\r\n    if (e.key === \"Enter\" || e.key === \" \") {\r\n      e.preventDefault();\r\n      this._onActivate(e);\r\n    }\r\n  };\r\n\r\n  /** Computes accessible badge label from current render state. */\r\n  private _computeAriaLabel(displayValue: string | null): string | null {\r\n    if (this.badgeAriaHidden) return null;\r\n    if (this.badgeLabel) return this.badgeLabel;\r\n    if (this.isIcon) return \"\"; // purely visual when icon unless overridden\r\n    if (displayValue == null || displayValue === \"\") return \"Badge\";\r\n    const n = Number(displayValue);\r\n    return isNaN(n) ? `Badge: ${displayValue}` : `Badge count: ${displayValue}`;\r\n  }\r\n\r\n  /** Resolves anchor edges from placement preset. */\r\n  private _computeAnchors(placement: SkyBadgePlacement): {\r\n    top: string;\r\n    right: string;\r\n    bottom: string;\r\n    left: string;\r\n  } {\r\n    if (placement === \"custom\") {\r\n      return { top: \"0\", right: \"0\", bottom: \"auto\", left: \"auto\" };\r\n    }\r\n    switch (placement) {\r\n      case \"top-right\":\r\n        return { top: \"0\", right: \"0\", bottom: \"auto\", left: \"auto\" };\r\n      case \"top-left\":\r\n        return { top: \"0\", right: \"auto\", bottom: \"auto\", left: \"0\" };\r\n      case \"bottom-left\":\r\n        return { top: \"auto\", right: \"auto\", bottom: \"0\", left: \"0\" };\r\n      case \"bottom-right\":\r\n        return { top: \"auto\", right: \"0\", bottom: \"0\", left: \"auto\" };\r\n      case \"top-center\":\r\n        return { top: \"0\", right: \"auto\", bottom: \"auto\", left: \"50%\" };\r\n      default:\r\n        return { top: \"0\", right: \"0\", bottom: \"auto\", left: \"auto\" };\r\n    }\r\n  }\r\n\r\n  /** Maps semantic status tokens to soft badge surface colors. */\r\n  private _resolveBadgeSurface(): {\r\n    bg: string;\r\n    color: string;\r\n    border: string;\r\n  } {\r\n    const semanticKey = resolveSemanticSurfaceKey(this.statusColor);\r\n    if (semanticKey) {\r\n      const soft = semanticSoftSurfaceTokens(semanticKey, { bordered: true });\r\n      const color =\r\n        this.textColor && this.textColor !== \"default\"\r\n          ? resolveColor(this.textColor)\r\n          : soft.color;\r\n      return { bg: soft.bg, color, border: soft.border };\r\n    }\r\n\r\n    return {\r\n      bg: resolveColor(this.statusColor),\r\n      color:\r\n        this.textColor && this.textColor !== \"default\"\r\n          ? resolveColor(this.textColor)\r\n          : resolveTextColorForToken(this.statusColor),\r\n      border: \"none\",\r\n    };\r\n  }\r\n\r\n  override render() {\r\n    const numeric = Number(this.value);\r\n    const isNumeric = !isNaN(numeric) && !this.isIcon;\r\n    const shouldHideZero = this.hideWhenZero && isNumeric && numeric === 0;\r\n    const visible = this.show && !shouldHideZero;\r\n    const displayValue = this.isIcon\r\n      ? null\r\n      : isNumeric && this.max > 0 && numeric > this.max\r\n        ? `${this.max}+`\r\n        : this.value;\r\n\r\n    const cls = [\"badge\", this.position];\r\n    if (this.ring) cls.push(\"ringed\");\r\n\r\n    const computedRadius =\r\n      this.shape === \"circle\"\r\n        ? \"var(--sky-radius-full)\"\r\n        : this.shape === \"pill\"\r\n          ? \"var(--sky-radius-full)\"\r\n          : \"var(--sky-badge-radius)\";\r\n\r\n    const surface = this._resolveBadgeSurface();\r\n    const { top, right, bottom, left } = this._computeAnchors(this.placement);\r\n    const badgeStyle = {\r\n      \"--_badge-bg\": surface.bg,\r\n      \"--_badge-text-color\": surface.color,\r\n      \"--_badge-border\": surface.border,\r\n      \"--_badge-radius\": computedRadius,\r\n      \"--_badge-size\": this.size,\r\n      \"--_icon-size\": this.size,\r\n      \"--_icon-color\": resolveColor(this.iconColor || this.textColor),\r\n      \"--_ring-color\": resolveColor(this.ringColor),\r\n      \"--_ring-offset\": this.ringOffset,\r\n      \"--sky-badge-translate-x\": this.offsetX,\r\n      \"--sky-badge-translate-y\": this.offsetY,\r\n      \"--_anchor-top\": top,\r\n      \"--_anchor-right\": right,\r\n      \"--_anchor-bottom\": bottom,\r\n      \"--_anchor-left\": left,\r\n    };\r\n\r\n    const ariaLabel = this._computeAriaLabel(displayValue);\r\n\r\n    return html`\r\n      <div class=\"container\" part=\"container\">\r\n        <slot></slot>\r\n        ${when(\r\n      visible,\r\n      () => html`\r\n            <span\r\n              class=${cls.join(\" \")}\r\n              part=\"badge\"\r\n              style=${styleMap(badgeStyle)}\r\n              role=${this.interactive ? \"button\" : \"status\"}\r\n              aria-live=${this.interactive ? \"off\" : \"polite\"}\r\n              data-placement=${this.placement}\r\n              aria-atomic=\"true\"\r\n              aria-label=${ariaLabel ?? nothing}\r\n              aria-hidden=${this.badgeAriaHidden ? \"true\" : \"false\"}\r\n              tabindex=${this.interactive ? 0 : -1}\r\n              @click=${this._onActivate}\r\n              @keydown=${this._onKeydown}\r\n              ${ref(this.badgeRef)}\r\n            >\r\n              <slot name=\"badge\">\r\n                ${when(\r\n        this.isIcon,\r\n        () =>\r\n          html`<sky-icon part=\"icon\" icon=${this.value} aria-hidden=\"true\"></sky-icon>`,\r\n        () => html`${displayValue}`,\r\n      )}\r\n              </slot>\r\n            </span>\r\n          `,\r\n    )}\r\n      </div>\r\n    `;\r\n  }\r\n}\r\n"],"names":["SKY_BADGE_POSITIONS","SKY_BADGE_SHAPES","SKY_BADGE_PLACEMENTS","SkyBadge","LitElement","constructor","super","arguments","this","statusColor","textColor","iconColor","position","value","isIcon","size","shape","max","hideWhenZero","show","offsetX","offsetY","ring","ringColor","ringOffset","badgeLabel","badgeAriaHidden","interactive","placement","badgeRef","createRef","_onActivate","e","dispatchEvent","CustomEvent","detail","originalEvent","bubbles","composed","_onKeydown","key","preventDefault","updated","changed","has","test","includes","showBadge","hideBadge","setValue","_computeAriaLabel","displayValue","n","Number","isNaN","_computeAnchors","top","right","bottom","left","_resolveBadgeSurface","semanticKey","resolveSemanticSurfaceKey","soft","semanticSoftSurfaceTokens","bordered","color","resolveColor","bg","border","resolveTextColorForToken","render","numeric","isNumeric","shouldHideZero","visible","cls","push","computedRadius","surface","badgeStyle","ariaLabel","html","when","join","styleMap","nothing","ref","dependencies","SkyIcon","shadowRootOptions","mode","delegatesFocus","styles","css","__decorateClass","property","type","String","reflect","prototype","Boolean","query","customElement"],"mappings":"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"}

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

@@ -1,4 +1,27 @@
-import{__decorate as t,__metadata as o}from"tslib";import{LitElement as e,css as r,html as n,nothing as a}from"lit";import{property as i,state as s,eventOptions as d,customElement as l}from"lit/decorators.js";import{when as h}from"lit/directives/when.js";import{styleMap as p}from"lit/directives/style-map.js";import{resolveColor as c,resolveTextColorForToken as b,createGradient as v,tuneSurfaceVariantForDefaultColor as g,resolveSemanticSurfaceKey as u,semanticSoftSurfaceTokens as y,darkShade as f,fadeMix as m,skyBorderPrimaryShorthand as x,hoverShade as k}from"../helper/utils/color-resolver.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";let B=class extends e{static{this.dependencies={"sky-icon":$}}static{this.formAssociated=!0}static{this.styles=r`
+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`
+      <button
+        part="button"
+        style=${d(this._styleVars)}
+        type=${this.type}
+        form=${k(this.form??void 0)}
+        aria-label=${k(r)}
+        ?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>`)}
+            <slot @slotchange=${this._onSlotChange}></slot>
+            ${this._hasMeaningfulSlot?e:this.label}
+            ${l(this.iconR,()=>t`<sky-icon part="icon" icon="${this.iconR}"></sky-icon>`)}
+          `)}
+        ${l(this.loading,()=>t`
+            <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`
     :host {
       display: inline-block;
     }
@@ -204,28 +227,5 @@ import{__decorate as t,__metadata as o}from"tslib";import{LitElement as e,css as
         transform: rotate(360deg);
       }
     }
-  `}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=t=>{const o=t.target,e=this._slotHasMeaningfulContent(o);e!==this._hasMeaningfulSlot&&(this._hasMeaningfulSlot=e)},this.internals=this.attachInternals()}_slotHasMeaningfulContent(t){return t.assignedNodes({flatten:!0}).some(t=>t.nodeType===Node.ELEMENT_NODE||(t.textContent??"").trim().length>0)}_toSquarePadding(t){const o=parseFloat(t.trim().split(/\s+/)[0]);return`${Number.isFinite(o)?o:8}px`}_resolveSize(t){const o={xs:{padding:"3px 7px",fontSize:"12px",gap:"3px",icon:"14px",spinner:"14px"},sm:{padding:"5px 9px",fontSize:"14px",gap:"4px",icon:"16px",spinner:"16px"},md:{padding:"8px 14px",fontSize:"16px",gap:"5px",icon:"18px",spinner:"18px"},lg:{padding:"10px 18px",fontSize:"18px",gap:"6px",icon:"20px",spinner:"20px"},xl:{padding:"14px 24px",fontSize:"20px",gap:"8px",icon:"24px",spinner:"24px"}};if(o[t])return o[t];const e=String(t).trim().match(/^([\d.]+)(px|rem|em)?$/i),r=e?.[2]||"px",n=e?parseFloat(e[1]):16,a=`${n}${r}`,i=t=>`${Math.round(100*t)/100}${r}`,s=(t,o,e)=>Math.max(o,Math.min(e,t)),d=s(.55*n,4,18),l=s(.9*n,8,28),h=s(.3*n,3,10),p=s(1.125*n,12,28),c=p;return{padding:`${i(d)} ${i(l)}`,fontSize:a,gap:i(h),icon:i(p),spinner:i(c)}}_isThemeBorderShorthand(t){return!(!t||"none"===t)&&/^var\(--sky-border-/.test(t.trim())}_borderColorFromShorthand(t){if(!t||"none"===t||this._isThemeBorderShorthand(t))return"transparent";const o=t.match(/solid\s+(.+)$/);return o?.[1]?.trim()??"transparent"}willUpdate(t){if(!["color","variant","size","radius","animation","inGroup","disabled","loading","colors","iconOnly"].some(o=>t.has(o))&&Object.keys(this._styleVars).length>0)return;const o=c(this.color),e=b(this.color),r={solid:{bg:o,color:e,border:"none",shadow:"none",hoverBg:o,hoverColor:e,hoverShadow:"var(--sky-box-shadow-hover)"},faded:{bg:"var(--sky-hover-tertiary)",color:o,border:"1px solid var(--sky-text-tertiary)",shadow:"none",hoverBg:"var(--sky-hover-secondary)",hoverColor:o,hoverShadow:"none",hoverBorder:"1px solid var(--sky-text-secondary)"},bordered:{bg:"transparent",color:o,border:`2px solid ${o}`,shadow:"none",hoverBg:"transparent",hoverColor:o,hoverShadow:"none",hoverBorder:`2px solid ${k(o,25)}`},transparent:{bg:"transparent",color:o,border:"none",shadow:"none",hoverBg:m(o,15),hoverColor:o,hoverShadow:"none"},flat:{bg:m(o,20),color:k(o,30),border:"none",shadow:"none",hoverBg:m(o,25),hoverColor:k(o,35),hoverShadow:"none"},ghost:{bg:"transparent",color:o,border:`2px solid ${o}`,shadow:"none",hoverBg:o,hoverColor:e,hoverShadow:"none"},shadow:{bg:"var(--sky-glass-primary)",color:"var(--sky-text-primary)",border:x(),shadow:"none",hoverBg:"var(--sky-glass-primary)",hoverColor:o,hoverShadow:"var(--sky-box-shadow-hover)",hoverBorder:x()},relief:{bg:o,color:e,border:"none",shadow:`\n        inset 0 1px 0 rgba(255,255,255,0.4),\n        0 3px 0 ${f(o,40)},\n        0 4px 6px -1px ${m(o,40)}\n      `,hoverBg:o,hoverColor:e,hoverShadow:"none"},gradient:{bg:v(this.colors,o),color:e,border:"none",shadow:"none",hoverBg:v(this.colors,o),hoverColor:e,hoverShadow:"none"},link:{bg:"transparent",color:o,border:"none",shadow:"none",hoverBg:"transparent",hoverColor:o,hoverShadow:"none"}},n=this.variant in r?this.variant:"solid";let a={...r[n]};Object.assign(a,g(this.color,n,r[n]));const i=u(this.color);if(i&&("flat"===n||"faded"===n)){const t=y(i,{bordered:"faded"===n});Object.assign(a,{bg:t.bg,color:t.color,border:"faded"===n?t.border:"none",hoverBg:"var(--sky-hover-primary)",hoverColor:t.color,hoverShadow:"none",..."faded"===n?{hoverBorder:t.border}:{}})}const s=this.inGroup?"none":this.animation,d="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]:(t=>{switch(t){case"none":return{hover:"none",active:"none"};case"lift":return{hover:"translateY(-2px)",active:"translateY(-1px)"};case"push":return{hover:"translateY(2px)",active:"translateY(2px)"};case"scale":return{hover:"scale(1.05)",active:"scale(1.02)"};case"rotate":return{hover:"rotate(3deg)",active:"rotate(2deg)"};case"custom":return{hover:"var(--btn-hover-transform, none)",active:"var(--btn-active-transform, var(--btn-hover-transform, none))"};default:return{}}})(s),l=d.hover??"none",h=d.active??l??"none",p=this._resolveSize(this.size),S=this.iconOnly?this._toSquarePadding(p.padding):p.padding,$=this.iconOnly?"0":p.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 t=a.border.match(/(\d+)px/);B=t?parseInt(t[1]):0}let z=B;if(a.hoverBorder&&a.hoverBorder.includes("px")){const t=a.hoverBorder.match(/(\d+)px/);z=t?parseInt(t[1]):B}let O="link"===this.variant?"0":S;if(B>0){const t=S.split(" ");if(1===t.length){const o=parseFloat(t[0]);O=`${Math.max(o-B,2)}px`}else if(2===t.length){const o=parseFloat(t[0]),e=parseFloat(t[1]),r=Math.max(o-B,2);O=this.iconOnly?`${r}px`:`${r}px ${e}px`}else if(4===t.length){const o=parseFloat(t[0]),e=parseFloat(t[1]),r=parseFloat(t[2]),n=parseFloat(t[3]);O=`${Math.max(o-B,2)}px ${e}px ${Math.max(r-B,2)}px ${n}px`}}const j=parseFloat(p.fontSize),F=parseFloat(p.icon);let M,Y;if("link"===this.variant)M="auto";else if(this.iconOnly){const t=2*(parseFloat(O)||0)+F+2*B;M=`${t}px`,Y=`${t}px`}else{const t=O.split(" ");M=`${(t.length>=2?parseFloat(t[0])+parseFloat(t[2]||t[0]):2*parseFloat(t[0])||16)+j+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":l,"--btn-transform-active":h,"--btn-padding":O,"--btn-font-size":p.fontSize,"--btn-gap":$,"--icon-size":p.icon,"--spinner-size":p.spinner,"--btn-min-height":M,...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(t){const o=t.currentTarget,e=o.getBoundingClientRect(),r=document.createElement("span"),n=Math.max(o.offsetWidth,o.offsetHeight),a=t.clientX-e.left-n/2,i=t.clientY-e.top-n/2;r.style.width=r.style.height=`${n}px`,r.style.left=`${a}px`,r.style.top=`${i}px`;const s=getComputedStyle(o).backgroundColor||"",d=s.includes("255, 255, 255")||s.includes("rgba(0, 0, 0, 0)");r.style.background=d?"rgba(0, 0, 0, 0.2)":"rgba(255, 255, 255, 0.3)",r.className="ripple";const l=o.querySelectorAll(".ripple");l.length>=3&&l[0]&&l[0].remove(),o.appendChild(r),r.addEventListener("animationend",()=>r.remove())}formDisabledCallback(t){this.disabled=t}get formOwner(){if("undefined"==typeof document)return null;const t="string"==typeof this.form?this.form.trim():"";return this.internals.form||(t?document.getElementById(t):null)||this.closest("form")}_handleClick(t){if(this.disabled||this.loading)return void t.preventDefault();"button"===this.type&&t.preventDefault(),this._createRipple(t);const o=this.formOwner;"submit"!==this.type?"reset"!==this.type||o?.reset():o?.requestSubmit()}_iconOnlyName(){return this.iconL||this.iconR}render(){const t=this._iconOnlyName(),o=this.iconOnly&&(this.label||t)?this.label||t:void 0;return n`
-      <button
-        part="button"
-        style=${p(this._styleVars)}
-        type=${this.type}
-        form=${S(this.form??void 0)}
-        aria-label=${S(o)}
-        ?disabled=${this.disabled||this.loading}
-        ?loading=${this.loading}
-        @click=${this._handleClick}
-      >
-        ${h(this.iconOnly,()=>h(t,()=>n`<sky-icon part="icon" icon="${t}"></sky-icon>`),()=>n`
-            ${h(this.iconL,()=>n`<sky-icon part="icon" icon="${this.iconL}"></sky-icon>`)}
-            <slot @slotchange=${this._onSlotChange}></slot>
-            ${this._hasMeaningfulSlot?a:this.label}
-            ${h(this.iconR,()=>n`<sky-icon part="icon" icon="${this.iconR}"></sky-icon>`)}
-          `)}
-        ${h(this.loading,()=>n`
-            <div class="loading-overlay" part="loading-overlay">
-              <div class="spinner" part="spinner"></div>
-            </div>
-          `)}
-      </button>
-    `}};t([i({type:String,reflect:!0}),o("design:type",String)],B.prototype,"variant",void 0),t([i({type:String}),o("design:type",String)],B.prototype,"color",void 0),t([i({type:String}),o("design:type",String)],B.prototype,"type",void 0),t([i({type:String}),o("design:type",Object)],B.prototype,"form",void 0),t([i({type:String}),o("design:type",String)],B.prototype,"size",void 0),t([i({type:String}),o("design:type",String)],B.prototype,"radius",void 0),t([i({type:String}),o("design:type",Object)],B.prototype,"label",void 0),t([i({type:Boolean,reflect:!0}),o("design:type",Object)],B.prototype,"disabled",void 0),t([i({type:Boolean,reflect:!0}),o("design:type",Object)],B.prototype,"loading",void 0),t([i({type:String}),o("design:type",Object)],B.prototype,"iconL",void 0),t([i({type:String}),o("design:type",Object)],B.prototype,"iconR",void 0),t([i({type:Boolean,reflect:!0}),o("design:type",Object)],B.prototype,"iconOnly",void 0),t([i({type:String}),o("design:type",String)],B.prototype,"colors",void 0),t([i({type:String,reflect:!0}),o("design:type",String)],B.prototype,"animation",void 0),t([i({type:Boolean,reflect:!0}),o("design:type",Object)],B.prototype,"inGroup",void 0),t([s(),o("design:type",Object)],B.prototype,"_hasMeaningfulSlot",void 0),t([d({passive:!1}),o("design:type",Function),o("design:paramtypes",[MouseEvent]),o("design:returntype",void 0)],B.prototype,"_handleClick",null),B=t([l("sky-button"),o("design:paramtypes",[])],B);export{B as SkyButton};
+  `,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};
 //# sourceMappingURL=sky-button.js.map