@sky.ui/core 0.0.40 → 0.0.41

package/dist/sky-appbar/sky-appbar.js

@@ -1,8 +1,8 @@
 import{unsafeCSS as t,css as e,LitElement as r,nothing as o,html as a}from"lit";import{property as n,customElement as s}from"lit/decorators.js";import{isDefaultColorToken as i,resolveColor as l,resolveTextColorForToken as d}from"../helper/utils/color-resolver.js";import{cssOnFillEnhance as c}from"../helper/utils/contrast-color.js";import{SkyIcon as p}from"../sky-icon/sky-icon.js";var b=Object.defineProperty,y=Object.getOwnPropertyDescriptor,u=(t,e,r,o)=>{for(var a,n=o>1?void 0:o?y(e,r):e,s=t.length-1;s>=0;s--)(a=t[s])&&(n=(o?a(e,r,n):a(n))||n);return o&&n&&b(e,r,n),n};let k=class extends r{constructor(){super(...arguments),this.title="App Bar",this.color="default",this.url="",this.banner=!0,this.dense=!1,this.elevated=!1,this.leadingLabel="Open menu"}_applyColorSurface(){if(!i(this.color))return this.setAttribute("data-surface","solid"),this.style.setProperty("--appbar-bg-color",l(this.color)),void this.style.setProperty("--appbar-text-color",d(this.color));this.removeAttribute("data-surface"),this.style.removeProperty("--appbar-bg-color"),this.style.removeProperty("--appbar-text-color")}connectedCallback(){super.connectedCallback(),this._applyColorSurface(),this._applyBackgroundImage()}_applyBackgroundImage(){const t=this.url?`url(${this.url})`:"none";this.style.setProperty("--appbar-bg-image",t)}updated(t){t.has("color")&&this._applyColorSurface(),t.has("url")&&this._applyBackgroundImage()}render(){return a`
       ${this.url?a`
-              <div class="background" aria-hidden="true"></div>
-              <div class="background-overlay" aria-hidden="true"></div>
-            `:o}
+            <div class="background" aria-hidden="true"></div>
+            <div class="background-overlay" aria-hidden="true"></div>
+          `:o}
       <div
         class="content"
         part="content"
@@ -39,18 +39,24 @@ import{unsafeCSS as t,css as e,LitElement as r,nothing as o,html as a}from"lit";
       transition: var(--sky-transition-default);
     }
 
-    :host(:not([data-surface='solid'])) {
+    :host(:not([data-surface="solid"])) {
       background: var(--sky-glass-secondary);
       background-image: var(--sky-glass-surface);
-      backdrop-filter: var(--sky-blur-secondary) var(--sky-saturation-secondary)
+      backdrop-filter:
+        var(--sky-blur-secondary)
+        var(--sky-saturation-secondary)
+        var(--sky-brightness-secondary);
+      -webkit-backdrop-filter:
+        var(--sky-blur-secondary)
+        var(--sky-saturation-secondary)
         var(--sky-brightness-secondary);
-      -webkit-backdrop-filter: var(--sky-blur-secondary)
-        var(--sky-saturation-secondary) var(--sky-brightness-secondary);
       border-bottom: var(--sky-border-secondary);
-      box-shadow: var(--sky-box-shadow-inset), var(--sky-box-shadow-primary);
+      box-shadow:
+        var(--sky-box-shadow-inset),
+        var(--sky-box-shadow-primary);
     }
 
-    :host([data-surface='solid']) {
+    :host([data-surface="solid"]) {
       background-color: var(--appbar-bg-color);
       color: var(--appbar-text-color);
       backdrop-filter: none;
@@ -59,11 +65,13 @@ import{unsafeCSS as t,css as e,LitElement as r,nothing as o,html as a}from"lit";
       box-shadow: var(--sky-box-shadow-primary);
     }
 
-    :host([elevated]:not([data-surface='solid'])) {
-      box-shadow: var(--sky-box-shadow-inset), var(--sky-box-shadow-secondary);
+    :host([elevated]:not([data-surface="solid"])) {
+      box-shadow:
+        var(--sky-box-shadow-inset),
+        var(--sky-box-shadow-secondary);
     }
 
-    :host([elevated][data-surface='solid']) {
+    :host([elevated][data-surface="solid"]) {
       box-shadow: var(--sky-box-shadow-secondary);
     }
 
@@ -179,13 +187,13 @@ import{unsafeCSS as t,css as e,LitElement as r,nothing as o,html as a}from"lit";
     }
 
     .actions ::slotted(button),
-    .actions ::slotted([role='button']) {
+    .actions ::slotted([role="button"]) {
       min-width: var(--sky-touch-target, 44px);
       min-height: var(--sky-touch-target, 44px);
       box-sizing: border-box;
     }
 
-    :host-context([dir='rtl']) .leading-button .icon {
+    :host-context([dir="rtl"]) .leading-button .icon {
       transform: scaleX(-1);
     }
 
@@ -198,7 +206,7 @@ import{unsafeCSS as t,css as e,LitElement as r,nothing as o,html as a}from"lit";
         transition: none;
       }
 
-      :host-context([dir='rtl']) .leading-button .icon {
+      :host-context([dir="rtl"]) .leading-button .icon {
         transform: none;
       }
     }

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

@@ -1 +1 @@
-{"version":3,"file":"sky-appbar.js","sources":["../../src/sky-appbar/sky-appbar.ts"],"sourcesContent":["import { LitElement, html, css, PropertyValues, nothing, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport {\n  resolveColor,\n  resolveTextColorForToken,\n  isDefaultColorToken,\n} from '../helper/utils/color-resolver';\nimport { cssOnFillEnhance } from '../helper/utils/contrast-color';\nimport { SkyIcon } from '../sky-icon/sky-icon.js';\n\n/**\n * @element sky-appbar\n *\n * @summary Application top bar with title, optional leading control, trailing actions, and optional color/image background.\n *\n * @status stable\n * @since 1.0.0\n *\n * @documentation https://sky-ui.com/components/appbar\n * @dependency sky-icon\n *\n * @slot button - Leading area (e.g., menu/back button). Defaults to a hamburger icon.\n * @slot - Trailing actions (icons/buttons). This is the default slot.\n *\n * @property {string} title - Title text displayed in the app bar.\n * @property {string} color - Semantic token or CSS color for bar background; foreground color is derived for contrast.\n * @property {string} url - Background image URL.\n * @property {boolean} banner - Uses `role=\"banner\"` when true, otherwise `role=\"group\"`.\n * @property {boolean} dense - Enables compact vertical spacing.\n * @property {boolean} elevated - Applies elevated shadow styling.\n * @property {string} leadingLabel - Accessible label for default leading button fallback.\n *\n * @csspart content - Wrapper that contains the leading slot, title, and actions.\n * @csspart leading - Container for the leading slot (e.g. menu button).\n * @csspart title - The title area (contains .title-text with the title string).\n * @csspart actions - The trailing actions container.\n *\n * @Behavior\n * - `color` resolves background via `resolveColor()` and text/icon color via `resolveTextColorForToken()`.\n * - `url` renders a background layer behind content.\n * - `banner` should be true only for the primary page app bar landmark.\n * - In RTL contexts, the default leading icon is mirrored unless reduced motion is enabled.\n *\n * @example\n * ```html\n * <sky-appbar title=\"Dashboard\" color=\"primary\" dense>\n *   <button slot=\"button\">Menu</button>\n *   <sky-icon icon=\"ion:search\"></sky-icon>\n * </sky-appbar>\n * ```\n * ```vue\n * <template>\n *   <sky-appbar title=\"Dashboard\" color=\"primary\" dense>\n *     <button slot=\"button\">Menu</button>\n *     <sky-icon icon=\"ion:search\"></sky-icon>\n *   </sky-appbar>\n * </template>\n * ```\n * ```jsx\n * export default function Demo() {\n *   return (\n *     <sky-appbar title=\"Dashboard\" color=\"primary\" dense>\n *       <button slot=\"button\">Menu</button>\n *       <sky-icon icon=\"ion:search\"></sky-icon>\n *     </sky-appbar>\n *   );\n * }\n * ```\n */\n@customElement('sky-appbar')\nexport class SkyAppbar extends LitElement {\n  static dependencies: Record<string, CustomElementConstructor> = {\n    'sky-icon': SkyIcon,\n  };\n\n  /** Title text displayed in the app bar. @default \"App Bar\" */\n  @property({ type: String }) title = 'App Bar';\n\n  /**\n   * Bar background token or CSS color; when set, foreground uses `resolveTextColorForToken` for contrast.\n   * @default \"default\"\n   */\n  @property({ type: String }) color = 'default';\n\n  /** Background image URL. @default \"\" */\n  @property({ type: String }) url = '';\n\n  /** When true, the bar has role=\"banner\" (main app header). Set false for secondary bars. @default true */\n  @property({ type: Boolean }) banner = true;\n\n  /** When true, reduces vertical padding for a compact bar. @default false */\n  @property({ type: Boolean }) dense = false;\n\n  /** When true, applies stronger shadow (e.g. for sticky bar after scroll). @default false */\n  @property({ type: Boolean }) elevated = false;\n\n  /** Accessible label for the default leading button when no slot content is provided. @default \"Open menu\" */\n  @property({ type: String }) leadingLabel = 'Open menu';\n\n  static override styles = css`\n    :host {\n      width: 100%;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      position: relative;\n      font-family: var(--sky-font);\n      overflow: hidden;\n      color: var(--appbar-text-color, var(--sky-text-primary));\n      transition: var(--sky-transition-default);\n    }\n\n    :host(:not([data-surface='solid'])) {\n      background: var(--sky-glass-secondary);\n      background-image: var(--sky-glass-surface);\n      backdrop-filter: var(--sky-blur-secondary) var(--sky-saturation-secondary)\n        var(--sky-brightness-secondary);\n      -webkit-backdrop-filter: var(--sky-blur-secondary)\n        var(--sky-saturation-secondary) var(--sky-brightness-secondary);\n      border-bottom: var(--sky-border-secondary);\n      box-shadow: var(--sky-box-shadow-inset), var(--sky-box-shadow-primary);\n    }\n\n    :host([data-surface='solid']) {\n      background-color: var(--appbar-bg-color);\n      color: var(--appbar-text-color);\n      backdrop-filter: none;\n      -webkit-backdrop-filter: none;\n      border-bottom: var(--sky-border-primary);\n      box-shadow: var(--sky-box-shadow-primary);\n    }\n\n    :host([elevated]:not([data-surface='solid'])) {\n      box-shadow: var(--sky-box-shadow-inset), var(--sky-box-shadow-secondary);\n    }\n\n    :host([elevated][data-surface='solid']) {\n      box-shadow: var(--sky-box-shadow-secondary);\n    }\n\n    .background {\n      position: absolute;\n      inset: 0;\n      width: 100%;\n      height: 100%;\n      background-image: var(--appbar-bg-image, none);\n      background-size: cover;\n      background-position: center;\n      z-index: -2;\n      pointer-events: none;\n    }\n\n    .background-overlay {\n      position: absolute;\n      inset: 0;\n      background: var(--appbar-bg-overlay, transparent);\n      z-index: -1;\n      pointer-events: none;\n      backdrop-filter: none;\n      -webkit-backdrop-filter: none;\n    }\n\n    .content {\n      display: flex;\n      padding: var(--sky-space-2, 8px) var(--sky-space-4, 16px);\n      align-items: center;\n      justify-content: space-between;\n      width: 100%;\n      position: relative;\n      gap: var(--sky-space-2, 8px);\n      backdrop-filter: none;\n      -webkit-backdrop-filter: none;\n    }\n\n    :host([dense]) .content {\n      padding-block: var(--sky-space-1, 4px);\n    }\n\n    .title-area {\n      flex: 1 1 auto;\n      min-width: 0;\n      padding-inline-start: var(--sky-space-2\\\\.5, 10px);\n    }\n\n    .title-text {\n      font: var(--sky-text-title);\n      backdrop-filter: none;\n      -webkit-backdrop-filter: none;\n    }\n\n    .leading {\n      display: flex;\n      align-items: center;\n      flex-shrink: 0;\n      backdrop-filter: none;\n      -webkit-backdrop-filter: none;\n    }\n\n    .leading ::slotted(*) {\n      cursor: pointer;\n    }\n\n    .leading-button {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      margin: 0;\n      padding: 0;\n      border: none;\n      background: none;\n      cursor: pointer;\n      font: inherit;\n      color: inherit;\n      -webkit-tap-highlight-color: transparent;\n      min-width: var(--sky-touch-target, 44px);\n      min-height: var(--sky-touch-target, 44px);\n      box-sizing: border-box;\n      border-radius: var(--sky-radius-primary);\n      backdrop-filter: none;\n      -webkit-backdrop-filter: none;\n      transition: var(--sky-transition-fast);\n    }\n\n    .leading-button:hover {\n      background: var(--sky-hover-primary);\n    }\n\n    .leading-button:focus-visible,\n    .leading ::slotted(*:focus-visible),\n    .actions ::slotted(*:focus-visible) {\n      outline: none;\n      box-shadow: var(--sky-focus-ring);\n    }\n\n    .icon {\n      cursor: pointer;\n      font-size: var(--sky-font-size-xl, 1.25rem);\n      display: flex;\n      align-items: center;\n    }\n\n    .actions {\n      display: flex;\n      align-items: center;\n      gap: var(--sky-space-2, 8px);\n      padding-inline-start: var(--sky-space-2\\\\.5, 10px);\n      flex-shrink: 0;\n      backdrop-filter: none;\n      -webkit-backdrop-filter: none;\n    }\n\n    .actions ::slotted(button),\n    .actions ::slotted([role='button']) {\n      min-width: var(--sky-touch-target, 44px);\n      min-height: var(--sky-touch-target, 44px);\n      box-sizing: border-box;\n    }\n\n    :host-context([dir='rtl']) .leading-button .icon {\n      transform: scaleX(-1);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      :host,\n      .content,\n      .leading-button,\n      .leading ::slotted(*),\n      .actions ::slotted(*) {\n        transition: none;\n      }\n\n      :host-context([dir='rtl']) .leading-button .icon {\n        transform: none;\n      }\n    }\n\n    ${unsafeCSS(\n      cssOnFillEnhance([\n        {\n          selector: ':host([data-surface=\"solid\"])',\n          fillVar: '--appbar-bg-color',\n        },\n      ])\n    )}\n  `;\n\n  /** Applies glass vs solid surface tokens from `color`. */\n  private _applyColorSurface(): void {\n    if (!isDefaultColorToken(this.color)) {\n      this.setAttribute('data-surface', 'solid');\n      this.style.setProperty('--appbar-bg-color', resolveColor(this.color));\n      this.style.setProperty(\n        '--appbar-text-color',\n        resolveTextColorForToken(this.color)\n      );\n      return;\n    }\n\n    this.removeAttribute('data-surface');\n    this.style.removeProperty('--appbar-bg-color');\n    this.style.removeProperty('--appbar-text-color');\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._applyColorSurface();\n    this._applyBackgroundImage();\n  }\n\n  /** Sets background image CSS variable from `url`. */\n  private _applyBackgroundImage(): void {\n    const image = this.url ? `url(${this.url})` : 'none';\n    this.style.setProperty('--appbar-bg-image', image);\n  }\n\n  /** Updates host style variables when visual input properties change. */\n  protected override updated(changedProperties: PropertyValues): void {\n    if (changedProperties.has('color')) {\n      this._applyColorSurface();\n    }\n\n    if (changedProperties.has('url')) {\n      this._applyBackgroundImage();\n    }\n  }\n\n  override render() {\n    return html`\n      ${\n        this.url\n          ? html`\n              <div class=\"background\" aria-hidden=\"true\"></div>\n              <div class=\"background-overlay\" aria-hidden=\"true\"></div>\n            `\n          : nothing\n      }\n      <div\n        class=\"content\"\n        part=\"content\"\n        role=\"${this.banner ? 'banner' : 'group'}\"\n      >\n        <div class=\"leading\" part=\"leading\">\n          <slot name=\"button\">\n            <button\n              type=\"button\"\n              class=\"leading-button\"\n              aria-label=\"${this.leadingLabel}\"\n            >\n              <sky-icon class=\"icon\" icon=\"mdi:menu\"></sky-icon>\n            </button>\n          </slot>\n        </div>\n        <div class=\"title-area\" part=\"title\">\n          <span class=\"title-text\">${this.title}</span>\n        </div>\n        <div class=\"actions\" part=\"actions\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["SkyAppbar","LitElement","constructor","super","arguments","this","title","color","url","banner","dense","elevated","leadingLabel","_applyColorSurface","isDefaultColorToken","setAttribute","style","setProperty","resolveColor","resolveTextColorForToken","removeAttribute","removeProperty","connectedCallback","_applyBackgroundImage","image","updated","changedProperties","has","render","html","nothing","dependencies","SkyIcon","styles","css","unsafeCSS","cssOnFillEnhance","selector","fillVar","__decorateClass","property","type","String","prototype","Boolean","customElement"],"mappings":"+jBAsEO,IAAMA,EAAN,cAAwBC,EAAxB,WAAAC,GAAAC,SAAAC,WAMuBC,KAAAC,MAAQ,UAMRD,KAAAE,MAAQ,UAGRF,KAAAG,IAAM,GAGLH,KAAAI,QAAS,EAGTJ,KAAAK,OAAQ,EAGRL,KAAAM,UAAW,EAGZN,KAAAO,aAAe,WAAA,CA8LnC,kBAAAC,GACN,IAAKC,EAAoBT,KAAKE,OAO5B,OANAF,KAAKU,aAAa,eAAgB,SAClCV,KAAKW,MAAMC,YAAY,oBAAqBC,EAAab,KAAKE,aAC9DF,KAAKW,MAAMC,YACT,sBACAE,EAAyBd,KAAKE,QAKlCF,KAAKe,gBAAgB,gBACrBf,KAAKW,MAAMK,eAAe,qBAC1BhB,KAAKW,MAAMK,eAAe,sBAC5B,CAES,iBAAAC,GACPnB,MAAMmB,oBACNjB,KAAKQ,qBACLR,KAAKkB,uBACP,CAGQ,qBAAAA,GACN,MAAMC,EAAQnB,KAAKG,IAAM,OAAOH,KAAKG,OAAS,OAC9CH,KAAKW,MAAMC,YAAY,oBAAqBO,EAC9C,CAGmB,OAAAC,CAAQC,GACrBA,EAAkBC,IAAI,UACxBtB,KAAKQ,qBAGHa,EAAkBC,IAAI,QACxBtB,KAAKkB,uBAET,CAES,MAAAK,GACP,OAAOC,CAAA;QAEHxB,KAAKG,IACDqB,CAAA;;;cAIAC;;;;gBAKIzB,KAAKI,OAAS,SAAW;;;;;;;4BAObJ,KAAKO;;;;;;;qCAOIP,KAAKC;;;;;;KAOxC,GAlSWN,EACJ+B,aAAyD,CAC9D,WAAYC,GAFHhC,EA6BKiC,OAASC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAiLrBC,EACAC,EAAiB,CACf,CACEC,SAAU,gCACVC,QAAS;IA5MWC,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UANP1C,EAMiB2C,UAAA,QAAA,GAMAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAZP1C,EAYiB2C,UAAA,QAAA,GAGAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAfP1C,EAeiB2C,UAAA,MAAA,GAGCJ,EAAA,CAA5BC,EAAS,CAAEC,KAAMG,WAlBP5C,EAkBkB2C,UAAA,SAAA,GAGAJ,EAAA,CAA5BC,EAAS,CAAEC,KAAMG,WArBP5C,EAqBkB2C,UAAA,QAAA,GAGAJ,EAAA,CAA5BC,EAAS,CAAEC,KAAMG,WAxBP5C,EAwBkB2C,UAAA,WAAA,GAGDJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UA3BP1C,EA2BiB2C,UAAA,eAAA,GA3BjB3C,EAANuC,EAAA,CADNM,EAAc,eACF7C"}
+{"version":3,"file":"sky-appbar.js","sources":["../../src/sky-appbar/sky-appbar.ts"],"sourcesContent":["import { LitElement, html, css, PropertyValues, nothing, unsafeCSS } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport {\n  resolveColor,\n  resolveTextColorForToken,\n  isDefaultColorToken,\n} from \"../helper/utils/color-resolver\";\nimport { cssOnFillEnhance } from \"../helper/utils/contrast-color\";\nimport { SkyIcon } from \"../sky-icon/sky-icon.js\";\n\n/**\n * @element sky-appbar\n *\n * @summary Application top bar with title, optional leading control, trailing actions, and optional color/image background.\n *\n * @status stable\n * @since 1.0.0\n *\n * @documentation https://library.sky-ui.com/components/appbar\n * @dependency sky-icon\n *\n * @slot button - Leading area (e.g., menu/back button). Defaults to a hamburger icon.\n * @slot - Trailing actions (icons/buttons). This is the default slot.\n *\n * @property {string} title - Title text displayed in the app bar.\n * @property {string} color - Semantic token or CSS color for bar background; foreground color is derived for contrast.\n * @property {string} url - Background image URL.\n * @property {boolean} banner - Uses `role=\"banner\"` when true, otherwise `role=\"group\"`.\n * @property {boolean} dense - Enables compact vertical spacing.\n * @property {boolean} elevated - Applies elevated shadow styling.\n * @property {string} leadingLabel - Accessible label for default leading button fallback.\n *\n * @csspart content - Wrapper that contains the leading slot, title, and actions.\n * @csspart leading - Container for the leading slot (e.g. menu button).\n * @csspart title - The title area (contains .title-text with the title string).\n * @csspart actions - The trailing actions container.\n *\n * @Behavior\n * - `color` resolves background via `resolveColor()` and text/icon color via `resolveTextColorForToken()`.\n * - `url` renders a background layer behind content.\n * - `banner` should be true only for the primary page app bar landmark.\n * - In RTL contexts, the default leading icon is mirrored unless reduced motion is enabled.\n *\n * @example\n * ```html\n * <sky-appbar title=\"Dashboard\" color=\"primary\" dense>\n *   <button slot=\"button\">Menu</button>\n *   <sky-icon icon=\"ion:search\"></sky-icon>\n * </sky-appbar>\n * ```\n * ```vue\n * <template>\n *   <sky-appbar title=\"Dashboard\" color=\"primary\" dense>\n *     <button slot=\"button\">Menu</button>\n *     <sky-icon icon=\"ion:search\"></sky-icon>\n *   </sky-appbar>\n * </template>\n * ```\n * ```jsx\n * export default function Demo() {\n *   return (\n *     <sky-appbar title=\"Dashboard\" color=\"primary\" dense>\n *       <button slot=\"button\">Menu</button>\n *       <sky-icon icon=\"ion:search\"></sky-icon>\n *     </sky-appbar>\n *   );\n * }\n * ```\n */\n@customElement(\"sky-appbar\")\nexport class SkyAppbar extends LitElement {\n\n  static dependencies: Record<string, CustomElementConstructor> = {\n    \"sky-icon\": SkyIcon,\n  };\n\n  /** Title text displayed in the app bar. @default \"App Bar\" */\n  @property({ type: String }) title = \"App Bar\";\n\n  /**\n   * Bar background token or CSS color; when set, foreground uses `resolveTextColorForToken` for contrast.\n   * @default \"default\"\n   */\n  @property({ type: String }) color = \"default\";\n\n  /** Background image URL. @default \"\" */\n  @property({ type: String }) url = \"\";\n\n  /** When true, the bar has role=\"banner\" (main app header). Set false for secondary bars. @default true */\n  @property({ type: Boolean }) banner = true;\n\n  /** When true, reduces vertical padding for a compact bar. @default false */\n  @property({ type: Boolean }) dense = false;\n\n  /** When true, applies stronger shadow (e.g. for sticky bar after scroll). @default false */\n  @property({ type: Boolean }) elevated = false;\n\n  /** Accessible label for the default leading button when no slot content is provided. @default \"Open menu\" */\n  @property({ type: String }) leadingLabel = \"Open menu\";\n\n  static override styles = css`\n    :host {\n      width: 100%;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      position: relative;\n      font-family: var(--sky-font);\n      overflow: hidden;\n      color: var(--appbar-text-color, var(--sky-text-primary));\n      transition: var(--sky-transition-default);\n    }\n\n    :host(:not([data-surface=\"solid\"])) {\n      background: var(--sky-glass-secondary);\n      background-image: var(--sky-glass-surface);\n      backdrop-filter:\n        var(--sky-blur-secondary)\n        var(--sky-saturation-secondary)\n        var(--sky-brightness-secondary);\n      -webkit-backdrop-filter:\n        var(--sky-blur-secondary)\n        var(--sky-saturation-secondary)\n        var(--sky-brightness-secondary);\n      border-bottom: var(--sky-border-secondary);\n      box-shadow:\n        var(--sky-box-shadow-inset),\n        var(--sky-box-shadow-primary);\n    }\n\n    :host([data-surface=\"solid\"]) {\n      background-color: var(--appbar-bg-color);\n      color: var(--appbar-text-color);\n      backdrop-filter: none;\n      -webkit-backdrop-filter: none;\n      border-bottom: var(--sky-border-primary);\n      box-shadow: var(--sky-box-shadow-primary);\n    }\n\n    :host([elevated]:not([data-surface=\"solid\"])) {\n      box-shadow:\n        var(--sky-box-shadow-inset),\n        var(--sky-box-shadow-secondary);\n    }\n\n    :host([elevated][data-surface=\"solid\"]) {\n      box-shadow: var(--sky-box-shadow-secondary);\n    }\n\n    .background {\n      position: absolute;\n      inset: 0;\n      width: 100%;\n      height: 100%;\n      background-image: var(--appbar-bg-image, none);\n      background-size: cover;\n      background-position: center;\n      z-index: -2;\n      pointer-events: none;\n    }\n\n    .background-overlay {\n      position: absolute;\n      inset: 0;\n      background: var(--appbar-bg-overlay, transparent);\n      z-index: -1;\n      pointer-events: none;\n      backdrop-filter: none;\n      -webkit-backdrop-filter: none;\n    }\n\n    .content {\n      display: flex;\n      padding: var(--sky-space-2, 8px) var(--sky-space-4, 16px);\n      align-items: center;\n      justify-content: space-between;\n      width: 100%;\n      position: relative;\n      gap: var(--sky-space-2, 8px);\n      backdrop-filter: none;\n      -webkit-backdrop-filter: none;\n    }\n\n    :host([dense]) .content {\n      padding-block: var(--sky-space-1, 4px);\n    }\n\n    .title-area {\n      flex: 1 1 auto;\n      min-width: 0;\n      padding-inline-start: var(--sky-space-2\\\\.5, 10px);\n    }\n\n    .title-text {\n      font: var(--sky-text-title);\n      backdrop-filter: none;\n      -webkit-backdrop-filter: none;\n    }\n\n    .leading {\n      display: flex;\n      align-items: center;\n      flex-shrink: 0;\n      backdrop-filter: none;\n      -webkit-backdrop-filter: none;\n    }\n\n    .leading ::slotted(*) {\n      cursor: pointer;\n    }\n\n    .leading-button {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      margin: 0;\n      padding: 0;\n      border: none;\n      background: none;\n      cursor: pointer;\n      font: inherit;\n      color: inherit;\n      -webkit-tap-highlight-color: transparent;\n      min-width: var(--sky-touch-target, 44px);\n      min-height: var(--sky-touch-target, 44px);\n      box-sizing: border-box;\n      border-radius: var(--sky-radius-primary);\n      backdrop-filter: none;\n      -webkit-backdrop-filter: none;\n      transition: var(--sky-transition-fast);\n    }\n\n    .leading-button:hover {\n      background: var(--sky-hover-primary);\n    }\n\n    .leading-button:focus-visible,\n    .leading ::slotted(*:focus-visible),\n    .actions ::slotted(*:focus-visible) {\n      outline: none;\n      box-shadow: var(--sky-focus-ring);\n    }\n\n    .icon {\n      cursor: pointer;\n      font-size: var(--sky-font-size-xl, 1.25rem);\n      display: flex;\n      align-items: center;\n    }\n\n    .actions {\n      display: flex;\n      align-items: center;\n      gap: var(--sky-space-2, 8px);\n      padding-inline-start: var(--sky-space-2\\\\.5, 10px);\n      flex-shrink: 0;\n      backdrop-filter: none;\n      -webkit-backdrop-filter: none;\n    }\n\n    .actions ::slotted(button),\n    .actions ::slotted([role=\"button\"]) {\n      min-width: var(--sky-touch-target, 44px);\n      min-height: var(--sky-touch-target, 44px);\n      box-sizing: border-box;\n    }\n\n    :host-context([dir=\"rtl\"]) .leading-button .icon {\n      transform: scaleX(-1);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      :host,\n      .content,\n      .leading-button,\n      .leading ::slotted(*),\n      .actions ::slotted(*) {\n        transition: none;\n      }\n\n      :host-context([dir=\"rtl\"]) .leading-button .icon {\n        transform: none;\n      }\n    }\n\n    ${unsafeCSS(\n      cssOnFillEnhance([\n        {\n          selector: ':host([data-surface=\"solid\"])',\n          fillVar: \"--appbar-bg-color\",\n        },\n      ]),\n    )}\n  `;\n\n  /** Applies glass vs solid surface tokens from `color`. */\n  private _applyColorSurface(): void {\n    if (!isDefaultColorToken(this.color)) {\n      this.setAttribute(\"data-surface\", \"solid\");\n      this.style.setProperty(\"--appbar-bg-color\", resolveColor(this.color));\n      this.style.setProperty(\n        \"--appbar-text-color\",\n        resolveTextColorForToken(this.color),\n      );\n      return;\n    }\n\n    this.removeAttribute(\"data-surface\");\n    this.style.removeProperty(\"--appbar-bg-color\");\n    this.style.removeProperty(\"--appbar-text-color\");\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._applyColorSurface();\n    this._applyBackgroundImage();\n  }\n\n  /** Sets background image CSS variable from `url`. */\n  private _applyBackgroundImage(): void {\n    const image = this.url ? `url(${this.url})` : \"none\";\n    this.style.setProperty(\"--appbar-bg-image\", image);\n  }\n\n  /** Updates host style variables when visual input properties change. */\n  protected override updated(changedProperties: PropertyValues): void {\n    if (changedProperties.has(\"color\")) {\n      this._applyColorSurface();\n    }\n\n    if (changedProperties.has(\"url\")) {\n      this._applyBackgroundImage();\n    }\n  }\n\n  override render() {\n    return html`\n      ${this.url\n        ? html`\n            <div class=\"background\" aria-hidden=\"true\"></div>\n            <div class=\"background-overlay\" aria-hidden=\"true\"></div>\n          `\n        : nothing}\n      <div\n        class=\"content\"\n        part=\"content\"\n        role=\"${this.banner ? \"banner\" : \"group\"}\"\n      >\n        <div class=\"leading\" part=\"leading\">\n          <slot name=\"button\">\n            <button\n              type=\"button\"\n              class=\"leading-button\"\n              aria-label=\"${this.leadingLabel}\"\n            >\n              <sky-icon class=\"icon\" icon=\"mdi:menu\"></sky-icon>\n            </button>\n          </slot>\n        </div>\n        <div class=\"title-area\" part=\"title\">\n          <span class=\"title-text\">${this.title}</span>\n        </div>\n        <div class=\"actions\" part=\"actions\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["SkyAppbar","LitElement","constructor","super","arguments","this","title","color","url","banner","dense","elevated","leadingLabel","_applyColorSurface","isDefaultColorToken","setAttribute","style","setProperty","resolveColor","resolveTextColorForToken","removeAttribute","removeProperty","connectedCallback","_applyBackgroundImage","image","updated","changedProperties","has","render","html","nothing","dependencies","SkyIcon","styles","css","unsafeCSS","cssOnFillEnhance","selector","fillVar","__decorateClass","property","type","String","prototype","Boolean","customElement"],"mappings":"+jBAsEO,IAAMA,EAAN,cAAwBC,EAAxB,WAAAC,GAAAC,SAAAC,WAOuBC,KAAAC,MAAQ,UAMRD,KAAAE,MAAQ,UAGRF,KAAAG,IAAM,GAGLH,KAAAI,QAAS,EAGTJ,KAAAK,OAAQ,EAGRL,KAAAM,UAAW,EAGZN,KAAAO,aAAe,WAAA,CAsMnC,kBAAAC,GACN,IAAKC,EAAoBT,KAAKE,OAO5B,OANAF,KAAKU,aAAa,eAAgB,SAClCV,KAAKW,MAAMC,YAAY,oBAAqBC,EAAab,KAAKE,aAC9DF,KAAKW,MAAMC,YACT,sBACAE,EAAyBd,KAAKE,QAKlCF,KAAKe,gBAAgB,gBACrBf,KAAKW,MAAMK,eAAe,qBAC1BhB,KAAKW,MAAMK,eAAe,sBAC5B,CAES,iBAAAC,GACPnB,MAAMmB,oBACNjB,KAAKQ,qBACLR,KAAKkB,uBACP,CAGQ,qBAAAA,GACN,MAAMC,EAAQnB,KAAKG,IAAM,OAAOH,KAAKG,OAAS,OAC9CH,KAAKW,MAAMC,YAAY,oBAAqBO,EAC9C,CAGmB,OAAAC,CAAQC,GACrBA,EAAkBC,IAAI,UACxBtB,KAAKQ,qBAGHa,EAAkBC,IAAI,QACxBtB,KAAKkB,uBAET,CAES,MAAAK,GACP,OAAOC,CAAA;QACHxB,KAAKG,IACHqB,CAAA;;;YAIAC;;;;gBAIMzB,KAAKI,OAAS,SAAW;;;;;;;4BAObJ,KAAKO;;;;;;;qCAOIP,KAAKC;;;;;;KAOxC,GAzSWN,EAEJ+B,aAAyD,CAC9D,WAAYC,GAHHhC,EA8BKiC,OAASC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAyLrBC,EACAC,EAAiB,CACf,CACEC,SAAU,gCACVC,QAAS;IApNWC,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAPP1C,EAOiB2C,UAAA,QAAA,GAMAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAbP1C,EAaiB2C,UAAA,QAAA,GAGAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAhBP1C,EAgBiB2C,UAAA,MAAA,GAGCJ,EAAA,CAA5BC,EAAS,CAAEC,KAAMG,WAnBP5C,EAmBkB2C,UAAA,SAAA,GAGAJ,EAAA,CAA5BC,EAAS,CAAEC,KAAMG,WAtBP5C,EAsBkB2C,UAAA,QAAA,GAGAJ,EAAA,CAA5BC,EAAS,CAAEC,KAAMG,WAzBP5C,EAyBkB2C,UAAA,WAAA,GAGDJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UA5BP1C,EA4BiB2C,UAAA,eAAA,GA5BjB3C,EAANuC,EAAA,CADNM,EAAc,eACF7C"}

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

@@ -1,5 +1,5 @@
-import { LitElement, PropertyValues } from 'lit';
-export type SkyAvatarFit = 'cover' | 'contain';
+import { LitElement, PropertyValues } from "lit";
+export type SkyAvatarFit = "cover" | "contain";
 /**
  * @element sky-avatar
  *
@@ -8,7 +8,7 @@ export type SkyAvatarFit = 'cover' | 'contain';
  * @status stable
  * @since 1.0.0
  *
- * @documentation https://sky-ui.com/components/avatar
+ * @documentation https://library.sky-ui.com/components/avatar
  *
  * @slot - Fallback content (e.g., initials or an icon) rendered when `image` is empty.
  *

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

@@ -10,12 +10,12 @@ import{css as t,LitElement as e,nothing as i,html as r}from"lit";import{property
         @keydown=${this._handleInteractiveKeydown}
       >
         ${this.image?r`<img
-                class="image-probe"
-                src=${this.image}
-                alt=""
-                @load=${this._onImageLoad}
-                @error=${this._onImageError}
-              />`:i}
+              class="image-probe"
+              src=${this.image}
+              alt=""
+              @load=${this._onImageLoad}
+              @error=${this._onImageError}
+            />`:i}
         <div class="loading-overlay" part="loading-overlay">
           <div class="spinner" part="spinner"></div>
         </div>
@@ -56,7 +56,9 @@ import{css as t,LitElement as e,nothing as i,html as r}from"lit";import{property
 
     :host([shadow]) .avatar {
       background-color: var(--sky-glass-solid);
-      box-shadow: var(--sky-box-shadow-inset), var(--sky-box-shadow-primary);
+      box-shadow:
+        var(--sky-box-shadow-inset),
+        var(--sky-box-shadow-primary);
       border: var(--sky-border-primary);
     }
 
@@ -72,7 +74,8 @@ import{css as t,LitElement as e,nothing as i,html as r}from"lit";import{property
 
     :host([shadow]) .avatar:focus-visible {
       box-shadow:
-        var(--sky-focus-ring), var(--sky-box-shadow-inset),
+        var(--sky-focus-ring),
+        var(--sky-box-shadow-inset),
         var(--sky-box-shadow-primary);
     }
 

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';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { when } from 'lit/directives/when.js';\nimport { keyed } from 'lit/directives/keyed.js';\nimport { resolveRadius } from '../helper/utils/size-resolver';\nimport { resolveColor } from '../helper/utils/color-resolver';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nexport type SkyAvatarFit = 'cover' | 'contain';\n\nconst SIZE_PRESETS: Record<string, string> = {\n  sm: 'var(--sky-space-8, 2rem)',\n  md: 'var(--sky-space-10, 2.5rem)',\n  lg: 'var(--sky-space-12, 3rem)',\n};\n\nconst SIZE_PX: Record<string, number> = { sm: 32, md: 40, lg: 48 };\n\n/**\n * @element sky-avatar\n *\n * @summary Avatar that renders image content or fallback slot content with configurable size, radius, outline, and loading state.\n *\n * @status stable\n * @since 1.0.0\n *\n * @documentation https://sky-ui.com/components/avatar\n *\n * @slot - Fallback content (e.g., initials or an icon) rendered when `image` is empty.\n *\n * @property {string} size - Avatar size: preset `sm` | `md` | `lg` or CSS length (for example `50px`).\n * @property {string} image - Image URL; fallback slot is shown on load error.\n * @property {SkyAvatarFit} fit - Image fill mode: `cover` (default) or `contain`.\n * @property {string} radius - Border radius token or CSS value.\n * @property {string} color - Token or CSS color applied to fallback slot content.\n * @property {string} alt - Accessible name when image content conveys meaning.\n * @property {string} outline - CSS `outline` value.\n * @property {string} outlineOffset - CSS `outline-offset` value.\n * @property {boolean} loading - Shows loading overlay when true.\n * @property {boolean} disabled - Dims and disables pointer interactions.\n * @property {boolean} interactive - Enables interactive behavior with keyboard/click activation.\n * @property {boolean} shadow - When true, applies solid surface, border ring, and elevation; no backdrop blur.\n *\n * @csspart avatar - The avatar container element.\n * @csspart loading-overlay - The loading overlay container (shown when `loading` is true).\n * @csspart spinner - The spinner element shown when loading.\n *\n * @Behavior\n * - Applies image content when available; otherwise renders fallback slot content.\n * - Uses keyed rendering to reset avatar content when image availability changes.\n * - Scales spinner dimensions from resolved avatar size for numeric values.\n * - Respects reduced-motion preference by disabling spinner animation.\n *\n * @example\n * ```html\n * <sky-avatar size=\"56px\" radius=\"full\" color=\"primary\">\n *   JD\n * </sky-avatar>\n * ```\n * ```vue\n * <template>\n *   <sky-avatar size=\"56px\" radius=\"full\" color=\"primary\">\n *     JD\n *   </sky-avatar>\n * </template>\n * ```\n * ```jsx\n * export default function Demo() {\n *   return (\n *     <sky-avatar size=\"56px\" radius=\"full\" color=\"primary\">\n *       JD\n *     </sky-avatar>\n *   );\n * }\n * ```\n */\n@customElement('sky-avatar')\nexport class SkyAvatar extends LitElement {\n  /** Avatar size: preset sm|md|lg or CSS length. @default \"50px\" */\n  @property({ type: String }) size: string = '50px';\n\n  /** Image URL. On error, slot is shown. @default \"\" */\n  @property({ type: String }) image: string = '';\n\n  /** How the image fills the avatar. @default \"cover\" */\n  @property({ type: String, reflect: true }) fit: SkyAvatarFit = 'cover';\n\n  /** Border radius token or CSS value. @default \"md\" */\n  @property({ type: String }) radius: string = 'md';\n\n  /** Accessible name when image is set. @default \"\" */\n  @property({ type: String }) alt: string = '';\n\n  /** Slot text/icon color token/CSS color. @default \"dark\" */\n  @property({ type: String }) color: string = 'dark';\n\n  /** Outline string. @default \"\" */\n  @property({ type: String }) outline: string = '';\n\n  /** Outline offset value. @default \"2px\" */\n  @property({ type: String }) outlineOffset: string = '2px';\n\n  /** Loading state. @default false */\n  @property({ type: Boolean, reflect: true }) loading: boolean = false;\n\n  /** Disables the avatar. @default false */\n  @property({ type: Boolean, reflect: true }) disabled: boolean = false;\n\n  /** When true, focusable with focus ring and click. @default false */\n  @property({ type: Boolean }) interactive: boolean = false;\n\n  /**\n   * Elevated ring styling (`border`, inset shadow). No backdrop blur on avatar media.\n   * `false` (default) keeps the avatar minimal for inline use.\n   */\n  @property({ type: Boolean, reflect: true })\n  shadow = false;\n\n  /** True when image failed to load; show slot instead. */\n  @state() private _imageError = false;\n\n  static override styles = css`\n    :host {\n      display: inline-flex;\n      line-height: 0;\n      justify-content: center;\n      align-items: center;\n    }\n\n    :host([disabled]) {\n      opacity: var(--sky-opacity-disabled, 0.5);\n      pointer-events: none;\n    }\n\n    .avatar {\n      width: var(--avatar-size);\n      height: var(--avatar-size);\n      position: relative;\n      background-size: var(--avatar-bg-size, cover);\n      background-position: center;\n      background-repeat: no-repeat;\n      border-radius: var(--avatar-border-radius, var(--sky-radius-secondary));\n      display: flex;\n      color: var(--slot-text-color);\n      justify-content: center;\n      align-items: center;\n      background-clip: padding-box;\n      -webkit-background-clip: padding-box;\n      box-sizing: border-box;\n      overflow: hidden;\n      backdrop-filter: none;\n      -webkit-backdrop-filter: none;\n    }\n\n    :host([shadow]) .avatar {\n      background-color: var(--sky-glass-solid);\n      box-shadow: var(--sky-box-shadow-inset), var(--sky-box-shadow-primary);\n      border: var(--sky-border-primary);\n    }\n\n    :host([loading]) .avatar {\n      will-change: transform;\n      transform: translateZ(0);\n    }\n\n    .avatar:focus-visible {\n      outline: none;\n      box-shadow: var(--sky-focus-ring);\n    }\n\n    :host([shadow]) .avatar:focus-visible {\n      box-shadow:\n        var(--sky-focus-ring), var(--sky-box-shadow-inset),\n        var(--sky-box-shadow-primary);\n    }\n\n    .avatar--interactive {\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n    }\n\n    .image-probe {\n      position: absolute;\n      width: 0;\n      height: 0;\n      opacity: 0;\n      pointer-events: none;\n    }\n\n    ::slotted(*) {\n      font-family: var(--sky-font);\n      font-weight: var(--sky-font-weight-semibold, 600);\n      font-size: calc(var(--avatar-size) * 0.38);\n      line-height: 1;\n      letter-spacing: var(--sky-letter-spacing-normal, 0);\n      text-align: center;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      object-fit: contain;\n      backdrop-filter: none;\n      -webkit-backdrop-filter: none;\n    }\n\n    .loading-overlay {\n      position: absolute;\n      inset: 0;\n      border-radius: inherit;\n      background: var(--sky-overlay-secondary);\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      z-index: 1;\n      visibility: hidden;\n      backdrop-filter: none;\n      -webkit-backdrop-filter: none;\n    }\n    :host([loading]) .loading-overlay {\n      visibility: visible;\n    }\n\n    .spinner {\n      border-width: 2px;\n      border-style: solid;\n      border-color: var(--sky-border-light);\n      border-top-color: var(--slot-text-color, var(--sky-text-primary));\n      border-radius: var(--sky-radius-full);\n      width: 40px;\n      height: 40px;\n      animation: spin var(--sky-duration-slow, 1s) linear infinite;\n    }\n\n    @keyframes spin {\n      0% {\n        transform: rotate(0deg);\n      }\n      100% {\n        transform: rotate(360deg);\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      :host([loading]) .avatar {\n        will-change: auto;\n        transform: none;\n      }\n\n      .spinner {\n        animation: none;\n        border-top-color: var(--slot-text-color, var(--sky-text-primary));\n        opacity: var(--sky-opacity-muted, 0.7);\n      }\n    }\n  `;\n\n  override updated(changed: PropertyValues): void {\n    super.updated(changed);\n\n    if (changed.has('image')) {\n      this._imageError = false;\n    }\n\n    const resolvedSize = SIZE_PRESETS[this.size] ?? this.size;\n    this.style.setProperty('--avatar-size', resolvedSize);\n\n    this.style.setProperty(\n      '--avatar-bg-size',\n      this.fit === 'contain' ? 'contain' : 'cover'\n    );\n\n    this.style.setProperty(\n      '--avatar-border-radius',\n      resolveRadius(this.radius)\n    );\n\n    if (this.color) {\n      this.style.setProperty('--slot-text-color', resolveColor(this.color));\n    }\n\n    this.adjustSpinnerSize();\n  }\n\n  /** Marks image load success and keeps image rendering active. */\n  private _onImageLoad = (): void => {\n    this._imageError = false;\n  };\n\n  /** Marks image load failure and enables fallback slot rendering. */\n  private _onImageError = (): void => {\n    this._imageError = true;\n  };\n\n  /** Re-dispatches click in interactive mode for host-level consumers. */\n  private _handleInteractiveClick(e: Event): void {\n    if (!this.interactive || this.disabled) return;\n    e.stopPropagation();\n    this.dispatchEvent(new Event('click', { bubbles: true, composed: true }));\n  }\n\n  /** Handles keyboard activation in interactive mode. */\n  private _handleInteractiveKeydown(e: KeyboardEvent): void {\n    if (!this.interactive || this.disabled) return;\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this.dispatchEvent(new Event('click', { bubbles: true, composed: true }));\n    }\n  }\n\n  /** Derives spinner dimensions from current avatar size. */\n  private adjustSpinnerSize(): void {\n    const avatarSizePx = SIZE_PX[this.size] ?? parseFloat(this.size);\n    if (Number.isFinite(avatarSizePx)) {\n      const spinnerSize = avatarSizePx * 0.25;\n      const spinner = this.shadowRoot?.querySelector<HTMLElement>('.spinner');\n      if (spinner) {\n        spinner.style.width = `${spinnerSize}px`;\n        spinner.style.height = `${spinnerSize}px`;\n        spinner.style.borderWidth = `${Math.max(1, spinnerSize / 10)}px`;\n      }\n    }\n  }\n\n  override render() {\n    const showImage = this.image && !this._imageError;\n    const avatarStyle: Record<string, string> = {};\n    if (showImage) {\n      avatarStyle['backgroundImage'] = `url(${encodeURI(this.image)})`;\n    }\n    if (this.outline) {\n      avatarStyle['outline'] = this.outline;\n    }\n    if (this.outlineOffset) {\n      avatarStyle['outlineOffset'] = this.outlineOffset;\n    }\n\n    const role = this.interactive\n      ? 'button'\n      : showImage && this.alt\n        ? 'img'\n        : nothing;\n    const ariaLabel =\n      this.interactive && this.alt\n        ? this.alt\n        : showImage && this.alt\n          ? this.alt\n          : nothing;\n\n    return html`\n      <div\n        class=${classMap({\n          avatar: true,\n          'avatar--interactive': !!this.interactive,\n        })}\n        part=\"avatar\"\n        style=${styleMap(avatarStyle)}\n        role=${role}\n        aria-label=${ariaLabel}\n        tabindex=${this.interactive && !this.disabled ? '0' : nothing}\n        @click=${this._handleInteractiveClick}\n        @keydown=${this._handleInteractiveKeydown}\n      >\n        ${\n          this.image\n            ? html`<img\n                class=\"image-probe\"\n                src=${this.image}\n                alt=\"\"\n                @load=${this._onImageLoad}\n                @error=${this._onImageError}\n              />`\n            : nothing\n        }\n        <div class=\"loading-overlay\" part=\"loading-overlay\">\n          <div class=\"spinner\" part=\"spinner\"></div>\n        </div>\n        ${keyed(\n          showImage ? '_img_' : '_slot_',\n          when(\n            !showImage,\n            () => html`<slot></slot>`,\n            () => nothing\n          )\n        )}\n      </div>\n    `;\n  }\n}\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\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":"0pBAWA,MAAMA,EAAuC,CAC3CC,GAAI,2BACJC,GAAI,8BACJC,GAAI,6BAGAC,EAAkC,CAAEH,GAAI,GAAIC,GAAI,GAAIC,GAAI,IA8DvD,IAAME,EAAN,cAAwBC,EAAxB,WAAAC,GAAAC,SAAAC,WAGuBC,KAAAC,KAAe,OAGfD,KAAAE,MAAgB,GAGDF,KAAAG,IAAoB,QAGnCH,KAAAI,OAAiB,KAGjBJ,KAAAK,IAAc,GAGdL,KAAAM,MAAgB,OAGhBN,KAAAO,QAAkB,GAGlBP,KAAAQ,cAAwB,MAGRR,KAAAS,SAAmB,EAGnBT,KAAAU,UAAoB,EAGnCV,KAAAW,aAAuB,EAOpDX,KAAAY,QAAS,EAGAZ,KAAQa,aAAc,EAwK/Bb,KAAQc,aAAe,KACrBd,KAAKa,aAAc,GAIrBb,KAAQe,cAAgB,KACtBf,KAAKa,aAAc,EACrB,CAnCS,OAAAG,CAAQC,GACfnB,MAAMkB,QAAQC,GAEVA,EAAQC,IAAI,WACdlB,KAAKa,aAAc,GAGrB,MAAMM,EAAe7B,EAAaU,KAAKC,OAASD,KAAKC,KACrDD,KAAKoB,MAAMC,YAAY,gBAAiBF,GAExCnB,KAAKoB,MAAMC,YACT,mBACa,YAAbrB,KAAKG,IAAoB,UAAY,SAGvCH,KAAKoB,MAAMC,YACT,yBACAC,EAActB,KAAKI,SAGjBJ,KAAKM,OACPN,KAAKoB,MAAMC,YAAY,oBAAqBE,EAAavB,KAAKM,QAGhEN,KAAKwB,mBACP,CAaQ,uBAAAC,CAAwBC,GACzB1B,KAAKW,cAAeX,KAAKU,WAC9BgB,EAAEC,kBACF3B,KAAK4B,cAAc,IAAIC,MAAM,QAAS,CAAEC,SAAS,EAAMC,UAAU,KACnE,CAGQ,yBAAAC,CAA0BN,GAC3B1B,KAAKW,cAAeX,KAAKU,WAChB,UAAVgB,EAAEO,KAA6B,MAAVP,EAAEO,MACzBP,EAAEQ,iBACFlC,KAAK4B,cAAc,IAAIC,MAAM,QAAS,CAAEC,SAAS,EAAMC,UAAU,MAErE,CAKQ,iBAAAP,GACN,MAAMW,EACJzC,EAAQM,KAAKC,OAASmC,WAAWpC,KAAKC,MACxC,GAAIoC,OAAOC,SAASH,GAAe,CACjC,MAAMI,EAA6B,IAAfJ,EACdK,EAAUxC,KAAKyC,YAAYC,cAA2B,YACxDF,IACFA,EAAQpB,MAAMuB,MAAQ,GAAGJ,MACzBC,EAAQpB,MAAMwB,OAAS,GAAGL,MAC1BC,EAAQpB,MAAMyB,YAAc,GAAGC,KAAKC,IAAI,EAAGR,EAAc,QAE7D,CACF,CAES,MAAAS,GACP,MAAMC,EAAYjD,KAAKE,QAAUF,KAAKa,YAChCqC,EAAsC,CAAA,EACxCD,IACFC,EAA6B,gBAAI,OAAOC,UAAUnD,KAAKE,WAErDF,KAAKO,UACP2C,EAAqB,QAAIlD,KAAKO,SAE5BP,KAAKQ,gBACP0C,EAA2B,cAAIlD,KAAKQ,eAGtC,MAAM4C,EAAOpD,KAAKW,YACd,SACAsC,GAAajD,KAAKK,IAChB,MACAgD,EACAC,EACJtD,KAAKW,aAAeX,KAAKK,KAErB4C,GAAajD,KAAKK,IADlBL,KAAKK,IAGHgD,EAER,OAAOE,CAAA;;gBAEKC,EAAS,CACfC,QAAQ,EACR,wBAAyBzD,KAAKW;;gBAGxB+C,EAASR;eACVE;qBACME;mBACFtD,KAAKW,cAAgBX,KAAKU,SAAW,IAAM2C;iBAC7CrD,KAAKyB;mBACHzB,KAAKgC;;UAEdhC,KAAKE,MACHqD,CAAA;;oBAEQvD,KAAKE;;sBAEHF,KAAKc;uBACJd,KAAKe;gBAEhBsC;;;;UAIFM,EACAV,EAAY,QAAU,SACtBW,GAAMX,EAAW,IAAMM,CAAA,gBAAqB,IAAMF;;KAI1D,GAtTW1D,EA8CKkE,OAASC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA3CGC,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAHPvE,EAGiBwE,UAAA,OAAA,GAGAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UANPvE,EAMiBwE,UAAA,QAAA,GAGeJ,EAAA,CAA1CC,EAAS,CAAEC,KAAMC,OAAQE,SAAS,KATxBzE,EASgCwE,UAAA,MAAA,GAGfJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAZPvE,EAYiBwE,UAAA,SAAA,GAGAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAfPvE,EAeiBwE,UAAA,MAAA,GAGAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAlBPvE,EAkBiBwE,UAAA,QAAA,GAGAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UArBPvE,EAqBiBwE,UAAA,UAAA,GAGAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAxBPvE,EAwBiBwE,UAAA,gBAAA,GAGgBJ,EAAA,CAA3CC,EAAS,CAAEC,KAAMI,QAASD,SAAS,KA3BzBzE,EA2BiCwE,UAAA,UAAA,GAGAJ,EAAA,CAA3CC,EAAS,CAAEC,KAAMI,QAASD,SAAS,KA9BzBzE,EA8BiCwE,UAAA,WAAA,GAGfJ,EAAA,CAA5BC,EAAS,CAAEC,KAAMI,WAjCP1E,EAiCkBwE,UAAA,cAAA,GAO7BJ,EAAA,CADCC,EAAS,CAAEC,KAAMI,QAASD,SAAS,KAvCzBzE,EAwCXwE,UAAA,SAAA,GAGiBJ,EAAA,CAAhBO,KA3CU3E,EA2CMwE,UAAA,cAAA,GA3CNxE,EAANoE,EAAA,CADNQ,EAAc,eACF5E"}

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

@@ -1,10 +1,10 @@
-import { LitElement, PropertyValues } from 'lit';
+import { LitElement, PropertyValues } from "lit";
 export type SkyBadgeClickEventDetail = {
     originalEvent: Event;
 };
-export type SkyBadgePosition = 'default' | 'floating' | 'inline';
-export type SkyBadgeShape = 'circle' | 'pill' | 'custom';
-export type SkyBadgePlacement = 'custom' | 'top-right' | 'top-left' | 'bottom-left' | 'bottom-right' | 'top-center';
+export type SkyBadgePosition = "default" | "floating" | "inline";
+export type SkyBadgeShape = "circle" | "pill" | "custom";
+export type SkyBadgePlacement = "custom" | "top-right" | "top-left" | "bottom-left" | "bottom-right" | "top-center";
 /**
  * @element sky-badge
  *
@@ -13,7 +13,7 @@ export type SkyBadgePlacement = 'custom' | 'top-right' | 'top-left' | 'bottom-le
  * @status stable
  * @since 1.0.0
  *
- * @documentation https://sky-ui.com/components/badge
+ * @documentation https://library.sky-ui.com/components/badge
  * @dependency sky-icon
  *
  * @slot - The content the badge attaches to.

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

@@ -19,11 +19,7 @@ import{unsafeCSS as t,css as e,LitElement as o,nothing as i,html as r}from"lit";
               ${d(this.badgeRef)}
             >
               <slot name="badge">
-                ${l(this.isIcon,()=>r`<sky-icon
-                      part="icon"
-                      icon=${this.value}
-                      aria-hidden="true"
-                    ></sky-icon>`,()=>r`${a}`)}
+                ${l(this.isIcon,()=>r`<sky-icon part="icon" icon=${this.value} aria-hidden="true"></sky-icon>`,()=>r`${a}`)}
               </slot>
             </span>
           `)}
@@ -112,7 +108,7 @@ import{unsafeCSS as t,css as e,LitElement as o,nothing as i,html as r}from"lit";
     }
 
     /* Icon styling */
-    sky-icon[part='icon'] {
+    sky-icon[part="icon"] {
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -125,19 +121,19 @@ import{unsafeCSS as t,css as e,LitElement as o,nothing as i,html as r}from"lit";
     }
 
     /* Interactive affordances */
-    .badge[role='button'] {
+    .badge[role="button"] {
       cursor: pointer;
       outline: none;
       -webkit-tap-highlight-color: transparent;
     }
-    .badge[role='button']:focus-visible {
+    .badge[role="button"]:focus-visible {
       outline: none;
       box-shadow: var(--sky-focus-ring);
     }
 
     /* Ring (outline) */
     .badge.ringed::after {
-      content: '';
+      content: "";
       position: absolute;
       inset: calc(-1 * var(--_ring-offset));
       border-radius: inherit;
@@ -145,7 +141,7 @@ import{unsafeCSS as t,css as e,LitElement as o,nothing as i,html as r}from"lit";
       pointer-events: none;
     }
 
-    .badge[data-placement='top-center'] {
+    .badge[data-placement="top-center"] {
       transform: translate(
         calc(-50% + var(--sky-badge-translate-x)),
         var(--sky-badge-translate-y)

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

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

@@ -1,7 +1,7 @@
-import { LitElement } from 'lit';
-export type SkyButtonVariant = 'solid' | 'faded' | 'bordered' | 'transparent' | 'flat' | 'ghost' | 'relief' | 'gradient' | 'shadow' | 'link';
-export type SkyButtonType = 'button' | 'submit' | 'reset';
-export type SkyButtonAnimation = 'auto' | 'none' | 'lift' | 'push' | 'scale' | 'rotate' | 'custom';
+import { LitElement } from "lit";
+export type SkyButtonVariant = "solid" | "faded" | "bordered" | "transparent" | "flat" | "ghost" | "relief" | "gradient" | "shadow" | "link";
+export type SkyButtonType = "button" | "submit" | "reset";
+export type SkyButtonAnimation = "auto" | "none" | "lift" | "push" | "scale" | "rotate" | "custom";
 /**
  * @element sky-button
  *
@@ -10,7 +10,7 @@ export type SkyButtonAnimation = 'auto' | 'none' | 'lift' | 'push' | 'scale' | '
  * @status stable
  * @since 1.0.0
  *
- * @documentation https://sky-ui.com/components/button
+ * @documentation https://library.sky-ui.com/components/button
  * @dependency sky-icon
  *
  * @slot - Default slot for the button label (replaces `label` property if used).