@sky.ui/core 0.0.41 → 0.0.43

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

@@ -1,27 +1,27 @@
-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`
+import{css as t,LitElement as e,nothing as r,html as i}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";import{PresetController as y}from"../helper/controllers/preset-controller.js";var v=Object.defineProperty,g=Object.getOwnPropertyDescriptor,m=(t,e,r,i)=>{for(var o,a=i>1?void 0:i?g(e,r):e,s=t.length-1;s>=0;s--)(o=t[s])&&(a=(i?o(e,r,a):o(a))||a);return i&&a&&v(e,r,a),a};const b={sm:"var(--sky-space-8, 2rem)",md:"var(--sky-space-10, 2.5rem)",lg:"var(--sky-space-12, 3rem)"},f={sm:32,md:40,lg:48};let u=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.preset="",this._presets=new y(this),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=f[this.size]??parseFloat(this.size);if(Number.isFinite(t)){const e=.25*t,r=this.shadowRoot?.querySelector(".spinner");r&&(r.style.width=`${e}px`,r.style.height=`${e}px`,r.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":r,a=this.interactive&&this.alt||t&&this.alt?this.alt:r;return i`
       <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}
+        tabindex=${this.interactive&&!this.disabled?"0":r}
         @click=${this._handleInteractiveClick}
         @keydown=${this._handleInteractiveKeydown}
       >
-        ${this.image?r`<img
+        ${this.image?i`<img
               class="image-probe"
               src=${this.image}
               alt=""
               @load=${this._onImageLoad}
               @error=${this._onImageError}
-            />`:i}
+            />`:r}
         <div class="loading-overlay" part="loading-overlay">
           <div class="spinner" part="spinner"></div>
         </div>
-        ${l(t?"_img_":"_slot_",n(!t,()=>r`<slot></slot>`,()=>i))}
+        ${l(t?"_img_":"_slot_",n(!t,()=>i`<slot></slot>`,()=>r))}
       </div>
-    `}};f.styles=t`
+    `}};u.styles=t`
     :host {
       display: inline-flex;
       line-height: 0;
@@ -156,5 +156,5 @@ import{css as t,LitElement as e,nothing as i,html as r}from"lit";import{property
         opacity: var(--sky-opacity-muted, 0.7);
       }
     }
-  `,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};
+  `,m([o({type:String})],u.prototype,"size",2),m([o({type:String})],u.prototype,"image",2),m([o({type:String,reflect:!0})],u.prototype,"fit",2),m([o({type:String})],u.prototype,"radius",2),m([o({type:String})],u.prototype,"alt",2),m([o({type:String})],u.prototype,"color",2),m([o({type:String})],u.prototype,"outline",2),m([o({type:String})],u.prototype,"outlineOffset",2),m([o({type:Boolean,reflect:!0})],u.prototype,"loading",2),m([o({type:Boolean,reflect:!0})],u.prototype,"disabled",2),m([o({type:Boolean})],u.prototype,"interactive",2),m([o({type:Boolean,reflect:!0})],u.prototype,"shadow",2),m([a()],u.prototype,"_imageError",2),m([o({type:String,reflect:!0})],u.prototype,"preset",2),u=m([s("sky-avatar")],u);export{u 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":["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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"}
+{"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\nimport { PresetController } from \"../helper/controllers/preset-controller\";\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://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 * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.\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\r\n  /** Named prop preset from nearest `sky-config-provider`. */\r\n  @property({ type: String, reflect: true }) preset = \"\";\r\n\r\n  private _presets = new PresetController(this);\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","preset","_presets","PresetController","_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

@@ -13,7 +13,7 @@ export type SkyBadgePlacement = "custom" | "top-right" | "top-left" | "bottom-le
  * @status stable
  * @since 1.0.0
  *
- * @documentation https://library.sky-ui.com/components/badge
+ * @documentation https://sky-ui.com/components/badge
  * @dependency sky-icon
  *
  * @slot - The content the badge attaches to.
@@ -51,6 +51,7 @@ export type SkyBadgePlacement = "custom" | "top-right" | "top-left" | "bottom-le
  * @property {boolean} badgeAriaHidden - Hides badge from assistive technology when true.
  * @property {boolean} interactive - Enables focus/activation and `badge-click` emission.
  * @property {SkyBadgePlacement} placement - Anchor placement preset for badge positioning.
+ * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `""`.
  * @method showBadge Forces badge visibility on.
  * @method hideBadge Forces badge visibility off.
  * @method setValue Updates badge value text or icon name.
@@ -117,11 +118,14 @@ export declare class SkyBadge extends LitElement {
     interactive: boolean;
     /** Corner preset; use "custom" to rely on offsetX/offsetY and existing behavior. */
     placement: SkyBadgePlacement;
+    /** Named prop preset from nearest `sky-config-provider`. */
+    preset: string;
+    private _presets;
     private _badgeEl;
     /** Ref for the badge element (e.g. for tooltip anchor or positioning). */
     badgeRef: import("lit-html/directives/ref.js").Ref<HTMLSpanElement>;
     static shadowRootOptions: ShadowRootInit;
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
     protected updated(changed: PropertyValues<this>): void;
     /**
      * Forces badge visibility on.

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

@@ -1,11 +1,11 @@
-import{unsafeCSS as t,css as e,LitElement as o,nothing as i,html as r}from"lit";import{property as s,query as a,customElement as n}from"lit/decorators.js";import{when as l}from"lit/directives/when.js";import{createRef as c,ref as d}from"lit/directives/ref.js";import{resolveSemanticSurfaceKey as p,semanticSoftSurfaceTokens as h,resolveColor as g,resolveTextColorForToken as b}from"../helper/utils/color-resolver.js";import{cssOnFillEnhance as u}from"../helper/utils/contrast-color.js";import{styleMap as f}from"lit/directives/style-map.js";import{SkyIcon as y}from"../sky-icon/sky-icon.js";var m=Object.defineProperty,v=Object.getOwnPropertyDescriptor,k=(t,e,o,i)=>{for(var r,s=i>1?void 0:i?v(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&&m(e,o,s),s};const x=["default","floating","inline"],_=["circle","pill","custom"],w=["custom","top-right","top-left","bottom-left","bottom-right","top-center"];let C=class extends o{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=c(),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")&&!x.includes(this.position)&&(this.position="default"),t.has("shape")&&!_.includes(this.shape)&&(this.shape="custom"),t.has("placement")&&!w.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=h(t,{bordered:!0}),o=this.textColor&&"default"!==this.textColor?g(this.textColor):e.color;return{bg:e.bg,color:o,border:e.border}}return{bg:g(this.statusColor),color:this.textColor&&"default"!==this.textColor?g(this.textColor):b(this.statusColor),border:"none"}}render(){const t=Number(this.value),e=!isNaN(t)&&!this.isIcon,o=this.hideWhenZero&&e&&0===t,s=this.show&&!o,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 c="circle"===this.shape||"pill"===this.shape?"var(--sky-radius-full)":"var(--sky-badge-radius)",h=this._resolveBadgeSurface(),b=!(p(this.statusColor)||this.textColor&&"default"!==this.textColor),{top:u,right:y,bottom:m,left:v}=this._computeAnchors(this.placement),k={"--_badge-bg":h.bg,"--_badge-text-color":h.color,"--_badge-border":h.border,"--_badge-radius":c,"--_badge-size":this.size,"--_icon-size":this.size,"--_icon-color":g(this.iconColor||this.textColor),"--_ring-color":g(this.ringColor),"--_ring-offset":this.ringOffset,"--sky-badge-translate-x":this.offsetX,"--sky-badge-translate-y":this.offsetY,"--_anchor-top":u,"--_anchor-right":y,"--_anchor-bottom":m,"--_anchor-left":v},x=this._computeAriaLabel(a);return r`
+import{unsafeCSS as t,css as e,LitElement as o,nothing as i,html as r}from"lit";import{property as s,query as a,customElement as n}from"lit/decorators.js";import{when as l}from"lit/directives/when.js";import{createRef as c,ref as p}from"lit/directives/ref.js";import{resolveSemanticSurfaceKey as d,semanticSoftSurfaceTokens as h,resolveColor as g}from"../helper/utils/color-resolver.js";import{cssOnFillEnhance as b,ON_COLOR_FALLBACK_LIGHT as f}from"../helper/utils/contrast-color.js";import{styleMap as u}from"lit/directives/style-map.js";import{PresetController as y}from"../helper/controllers/preset-controller.js";import{SkyIcon as m}from"../sky-icon/sky-icon.js";import{skyFocusRingHostStyles as v}from"../helper/styles/focus-ring.js";var k=Object.defineProperty,x=Object.getOwnPropertyDescriptor,_=(t,e,o,i)=>{for(var r,s=i>1?void 0:i?x(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&&k(e,o,s),s};const w=["default","floating","inline"],C=["circle","pill","custom"],$=["custom","top-right","top-left","bottom-left","bottom-right","top-center"];let z=class extends o{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.preset="",this._presets=new y(this),this.badgeRef=c(),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")&&!w.includes(this.position)&&(this.position="default"),t.has("shape")&&!C.includes(this.shape)&&(this.shape="custom"),t.has("placement")&&!$.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=d(this.statusColor);if(t){const e=h(t,{bordered:!0}),o=this.textColor&&"default"!==this.textColor?g(this.textColor):e.color;return{bg:e.bg,color:o,border:e.border}}return{bg:g(this.statusColor),color:this.textColor&&"default"!==this.textColor?g(this.textColor):f,border:"none"}}render(){const t=Number(this.value),e=!isNaN(t)&&!this.isIcon,o=this.hideWhenZero&&e&&0===t,s=this.show&&!o,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 c="circle"===this.shape||"pill"===this.shape?"var(--sky-radius-full)":"var(--sky-badge-radius)",h=this._resolveBadgeSurface(),b=!(d(this.statusColor)||this.textColor&&"default"!==this.textColor),{top:f,right:y,bottom:m,left:v}=this._computeAnchors(this.placement),k={"--_badge-bg":h.bg,"--_badge-text-color":h.color,"--_badge-border":h.border,"--_badge-radius":c,"--_badge-size":this.size,"--_icon-size":this.size,"--_icon-color":this.iconColor?g(this.iconColor):this.textColor&&"default"!==this.textColor?g(this.textColor):h.color,"--_ring-color":g(this.ringColor),"--_ring-offset":this.ringOffset,"--sky-badge-translate-x":this.offsetX,"--sky-badge-translate-y":this.offsetY,"--_anchor-top":f,"--_anchor-right":y,"--_anchor-bottom":m,"--_anchor-left":v,"--sky-focus-ring-color":h.bg},x=this._computeAriaLabel(a);return r`
       <div class="container" part="container">
         <slot></slot>
         ${l(s,()=>r`
             <span
               class=${n.join(" ")}
               part="badge"
-              style=${f(k)}
+              style=${u(k)}
               role=${this.interactive?"button":"status"}
               aria-live=${this.interactive?"off":"polite"}
               data-placement=${this.placement}
@@ -16,7 +16,7 @@ import{unsafeCSS as t,css as e,LitElement as o,nothing as i,html as r}from"lit";
               tabindex=${this.interactive?0:-1}
               @click=${this._onActivate}
               @keydown=${this._onKeydown}
-              ${d(this.badgeRef)}
+              ${p(this.badgeRef)}
             >
               <slot name="badge">
                 ${l(this.isIcon,()=>r`<sky-icon part="icon" icon=${this.value} aria-hidden="true"></sky-icon>`,()=>r`${a}`)}
@@ -24,7 +24,7 @@ import{unsafeCSS as t,css as e,LitElement as o,nothing as i,html as r}from"lit";
             </span>
           `)}
       </div>
-    `}};C.dependencies={"sky-icon":y},C.shadowRootOptions={mode:"open",delegatesFocus:!0},C.styles=e`
+    `}};z.dependencies={"sky-icon":m},z.shadowRootOptions={mode:"open",delegatesFocus:!0},z.styles=[v,e`
     :host {
       display: inline-block;
       position: relative;
@@ -149,6 +149,6 @@ import{unsafeCSS as t,css as e,LitElement as o,nothing as i,html as r}from"lit";
     }
 
     /* Custom solid status fills (not soft semantic surfaces). */
-    ${t(u([{selector:".badge[data-solid-contrast]",fillVar:"--_badge-bg"},{selector:'.badge[data-solid-contrast] sky-icon[part="icon"]',fillVar:"--_badge-bg"}]))}
-  `,k([s({type:String,reflect:!0})],C.prototype,"statusColor",2),k([s({type:String,reflect:!0})],C.prototype,"textColor",2),k([s({type:String,reflect:!0})],C.prototype,"iconColor",2),k([s({type:String,reflect:!0})],C.prototype,"position",2),k([s({type:String})],C.prototype,"value",2),k([s({type:Boolean,reflect:!0})],C.prototype,"isIcon",2),k([s({type:String,reflect:!0})],C.prototype,"size",2),k([s({type:String,reflect:!0})],C.prototype,"shape",2),k([s({type:Number})],C.prototype,"max",2),k([s({type:Boolean})],C.prototype,"hideWhenZero",2),k([s({type:Boolean,reflect:!0})],C.prototype,"show",2),k([s({type:String})],C.prototype,"offsetX",2),k([s({type:String})],C.prototype,"offsetY",2),k([s({type:Boolean})],C.prototype,"ring",2),k([s({type:String})],C.prototype,"ringColor",2),k([s({type:String})],C.prototype,"ringOffset",2),k([s({type:String})],C.prototype,"badgeLabel",2),k([s({type:Boolean})],C.prototype,"badgeAriaHidden",2),k([s({type:Boolean})],C.prototype,"interactive",2),k([s({type:String,reflect:!0})],C.prototype,"placement",2),k([a(".badge")],C.prototype,"_badgeEl",2),C=k([n("sky-badge")],C);export{C as SkyBadge};
+    ${t(b([{selector:".badge[data-solid-contrast]",fillVar:"--_badge-bg"},{selector:'.badge[data-solid-contrast] sky-icon[part="icon"]',fillVar:"--_badge-bg"}]))}
+  `],_([s({type:String,reflect:!0})],z.prototype,"statusColor",2),_([s({type:String,reflect:!0})],z.prototype,"textColor",2),_([s({type:String,reflect:!0})],z.prototype,"iconColor",2),_([s({type:String,reflect:!0})],z.prototype,"position",2),_([s({type:String})],z.prototype,"value",2),_([s({type:Boolean,reflect:!0})],z.prototype,"isIcon",2),_([s({type:String,reflect:!0})],z.prototype,"size",2),_([s({type:String,reflect:!0})],z.prototype,"shape",2),_([s({type:Number})],z.prototype,"max",2),_([s({type:Boolean})],z.prototype,"hideWhenZero",2),_([s({type:Boolean,reflect:!0})],z.prototype,"show",2),_([s({type:String})],z.prototype,"offsetX",2),_([s({type:String})],z.prototype,"offsetY",2),_([s({type:Boolean})],z.prototype,"ring",2),_([s({type:String})],z.prototype,"ringColor",2),_([s({type:String})],z.prototype,"ringOffset",2),_([s({type:String})],z.prototype,"badgeLabel",2),_([s({type:Boolean})],z.prototype,"badgeAriaHidden",2),_([s({type:Boolean})],z.prototype,"interactive",2),_([s({type:String,reflect:!0})],z.prototype,"placement",2),_([s({type:String,reflect:!0})],z.prototype,"preset",2),_([a(".badge")],z.prototype,"_badgeEl",2),z=_([n("sky-badge")],z);export{z 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":["import { LitElement, html, css, PropertyValues, nothing, unsafeCSS } 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 { cssOnFillEnhance } from \"../helper/utils/contrast-color\";\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    /* Custom solid status fills (not soft semantic surfaces). */\r\n    ${unsafeCSS(\r\n      cssOnFillEnhance([\r\n        {\r\n          selector: \".badge[data-solid-contrast]\",\r\n          fillVar: \"--_badge-bg\",\r\n        },\r\n        {\r\n          selector: '.badge[data-solid-contrast] sky-icon[part=\"icon\"]',\r\n          fillVar: \"--_badge-bg\",\r\n        },\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 solidContrast =\r\n      !resolveSemanticSurfaceKey(this.statusColor) &&\r\n      (!this.textColor || this.textColor === \"default\");\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              ?data-solid-contrast=${solidContrast}\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","solidContrast","badgeStyle","ariaLabel","html","when","join","styleMap","nothing","ref","dependencies","SkyIcon","shadowRootOptions","mode","delegatesFocus","styles","css","unsafeCSS","cssOnFillEnhance","selector","fillVar","__decorateClass","property","type","String","reflect","prototype","Boolean","query","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, unsafeCSS } 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  resolveSemanticSurfaceKey,\r\n  semanticSoftSurfaceTokens,\r\n} from \"../helper/utils/color-resolver\";\r\nimport { cssOnFillEnhance, ON_COLOR_FALLBACK_LIGHT } from \"../helper/utils/contrast-color\";\r\nimport { styleMap } from \"lit/directives/style-map.js\";\r\nimport { PresetController } from \"../helper/controllers/preset-controller\";\r\nimport { SkyIcon } from \"../sky-icon/sky-icon.js\";\r\nimport { skyFocusRingHostStyles } from \"../helper/styles/focus-ring\";\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://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 * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.\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  /** Named prop preset from nearest `sky-config-provider`. */\r\n  @property({ type: String, reflect: true }) preset = \"\";\r\n\r\n  private _presets = new PresetController(this);\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 = [\r\n    skyFocusRingHostStyles,\r\n    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    /* Custom solid status fills (not soft semantic surfaces). */\r\n    ${unsafeCSS(\r\n      cssOnFillEnhance([\r\n        {\r\n          selector: \".badge[data-solid-contrast]\",\r\n          fillVar: \"--_badge-bg\",\r\n        },\r\n        {\r\n          selector: '.badge[data-solid-contrast] sky-icon[part=\"icon\"]',\r\n          fillVar: \"--_badge-bg\",\r\n        },\r\n      ]),\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          : ON_COLOR_FALLBACK_LIGHT,\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 solidContrast =\r\n      !resolveSemanticSurfaceKey(this.statusColor) &&\r\n      (!this.textColor || this.textColor === \"default\");\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\": this.iconColor\r\n        ? resolveColor(this.iconColor)\r\n        : this.textColor && this.textColor !== \"default\"\r\n          ? resolveColor(this.textColor)\r\n          : surface.color,\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      \"--sky-focus-ring-color\": surface.bg,\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              ?data-solid-contrast=${solidContrast}\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","preset","_presets","PresetController","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","ON_COLOR_FALLBACK_LIGHT","render","numeric","isNumeric","shouldHideZero","visible","cls","push","computedRadius","surface","solidContrast","badgeStyle","ariaLabel","html","when","join","styleMap","nothing","ref","dependencies","SkyIcon","shadowRootOptions","mode","delegatesFocus","styles","skyFocusRingHostStyles","css","unsafeCSS","cssOnFillEnhance","selector","fillVar","__decorateClass","property","type","String","reflect","prototype","Boolean","query","customElement"],"mappings":"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"}

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

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

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

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