@sky.ui/core 0.0.38 → 0.0.40

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"sky-badge.js","sources":["../../src/sky-badge/sky-badge.ts"],"sourcesContent":["import { LitElement, html, css, PropertyValues, nothing } from \"lit\";\r\nimport { customElement, property, query } from \"lit/decorators.js\";\r\nimport { when } from \"lit/directives/when.js\";\r\nimport { ref, createRef } from \"lit/directives/ref.js\";\r\nimport {\r\n  resolveColor,\r\n  resolveTextColorForToken,\r\n  resolveSemanticSurfaceKey,\r\n  semanticSoftSurfaceTokens,\r\n} from \"../helper/utils/color-resolver\";\r\nimport { styleMap } from \"lit/directives/style-map.js\";\r\nimport { SkyIcon } from \"../sky-icon/sky-icon.js\";\r\n\r\nexport type SkyBadgeClickEventDetail = { originalEvent: Event };\r\nexport type SkyBadgePosition = \"default\" | \"floating\" | \"inline\";\r\nexport type SkyBadgeShape = \"circle\" | \"pill\" | \"custom\";\r\nexport type SkyBadgePlacement =\r\n  | \"custom\"\r\n  | \"top-right\"\r\n  | \"top-left\"\r\n  | \"bottom-left\"\r\n  | \"bottom-right\"\r\n  | \"top-center\";\r\n\r\nconst SKY_BADGE_POSITIONS: readonly SkyBadgePosition[] = [\r\n  \"default\",\r\n  \"floating\",\r\n  \"inline\",\r\n] as const;\r\nconst SKY_BADGE_SHAPES: readonly SkyBadgeShape[] = [\"circle\", \"pill\", \"custom\"] as const;\r\nconst SKY_BADGE_PLACEMENTS: readonly SkyBadgePlacement[] = [\r\n  \"custom\",\r\n  \"top-right\",\r\n  \"top-left\",\r\n  \"bottom-left\",\r\n  \"bottom-right\",\r\n  \"top-center\",\r\n] as const;\r\n\r\n/**\r\n * @element sky-badge\r\n *\r\n * @summary Badge for status dots, counts, or icons anchored to slotted content.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://library.sky-ui.com/components/badge\r\n * @dependency sky-icon\r\n *\r\n * @slot - The content the badge attaches to.\r\n * @slot badge - Optional slot to override the badge content entirely.\r\n *\r\n * @fires {CustomEvent<SkyBadgeClickEventDetail>} badge-click - Emitted when badge activation occurs via click, Enter, or Space while `interactive` is true.\r\n *\r\n * @csspart container - Wrapper around the slotted content and the badge.\r\n * @csspart badge - The badge element. Use `badgeRef` for positioning (e.g. tooltip anchor).\r\n * @csspart icon - The icon element when `isIcon` is true.\r\n *\r\n * @Behavior\r\n * - Visibility is controlled by `show` and `hideWhenZero`.\r\n * - Numeric values above `max` render as `<max>+`.\r\n * - Interactive mode supports click and keyboard activation.\r\n * - Reduced motion mode removes badge transitions.\r\n *\r\n * @property {string} statusColor - Badge background token or CSS color.\r\n * @property {string} textColor - Text color token or CSS color.\r\n * @property {string} iconColor - Icon color token or CSS color; falls back to `textColor` when empty.\r\n * @property {SkyBadgePosition} position - Layout mode: `default | floating | inline`.\r\n * @property {string} value - Badge text/count or icon name in icon mode.\r\n * @property {boolean} isIcon - Renders icon mode when true.\r\n * @property {string} size - Badge and icon size CSS length.\r\n * @property {SkyBadgeShape} shape - Badge shape: `circle | pill | custom`.\r\n * @property {number} max - Maximum numeric count before rendering overflow label.\r\n * @property {boolean} hideWhenZero - Hides badge when value resolves to numeric zero.\r\n * @property {boolean} show - Forces badge visibility independent of value.\r\n * @property {string} offsetX - Horizontal offset CSS length.\r\n * @property {string} offsetY - Vertical offset CSS length.\r\n * @property {boolean} ring - Enables visual ring around the badge.\r\n * @property {string} ringColor - Ring color token or CSS color.\r\n * @property {string} ringOffset - Ring offset CSS length.\r\n * @property {string | null} badgeLabel - ARIA label override.\r\n * @property {boolean} badgeAriaHidden - Hides badge from assistive technology when true.\r\n * @property {boolean} interactive - Enables focus/activation and `badge-click` emission.\r\n * @property {SkyBadgePlacement} placement - Anchor placement preset for badge positioning.\r\n * @method showBadge Forces badge visibility on.\r\n * @method hideBadge Forces badge visibility off.\r\n * @method setValue Updates badge value text or icon name.\r\n *\r\n * @example\r\n * ```html\r\n * <sky-badge value=\"5\" statuscolor=\"danger\" placement=\"top-right\">\r\n *   <sky-icon icon=\"mdi:bell-outline\"></sky-icon>\r\n * </sky-badge>\r\n * ```\r\n * ```vue\r\n * <template>\r\n *   <sky-badge value=\"5\" statuscolor=\"danger\" placement=\"top-right\">\r\n *     <sky-icon icon=\"mdi:bell-outline\"></sky-icon>\r\n *   </sky-badge>\r\n * </template>\r\n * ```\r\n * ```jsx\r\n * export default function Demo() {\r\n *   return (\r\n *     <sky-badge value=\"5\" statuscolor=\"danger\" placement=\"top-right\">\r\n *       <sky-icon icon=\"mdi:bell-outline\"></sky-icon>\r\n *     </sky-badge>\r\n *   );\r\n * }\r\n * ```\r\n */\r\n@customElement(\"sky-badge\")\r\nexport class SkyBadge extends LitElement {\r\n\r\n  static dependencies: Record<string, CustomElementConstructor> = {\r\n    \"sky-icon\": SkyIcon,\r\n  };\r\n\r\n  /** Background color of the badge. */\r\n  @property({ type: String, reflect: true })\r\n  statusColor: string = \"success\";\r\n\r\n  /** Color of text content inside the badge. */\r\n  @property({ type: String, reflect: true })\r\n  textColor: string = \"default\";\r\n\r\n  /** Color of the badge icon (when `isIcon` is true). */\r\n  @property({ type: String, reflect: true })\r\n  iconColor: string = \"\";\r\n\r\n  /** Position of the badge relative to content. */\r\n  @property({ type: String, reflect: true }) position: SkyBadgePosition = \"default\";\r\n\r\n  /** Value or icon name displayed inside the badge. */\r\n  @property({ type: String }) value: string = \"\";\r\n\r\n  /** Whether the badge should render as an icon instead of text. */\r\n  @property({ type: Boolean, reflect: true }) isIcon =\r\n    false;\r\n\r\n  /** Size (width/height) of the badge. e.g., `8px`, `1rem`. */\r\n  @property({ type: String, reflect: true }) size: string = \"\";\r\n\r\n  /** Shape of the badge. `circle`, `pill`, or `custom` (use `--sky-badge-radius`). */\r\n  @property({ type: String, reflect: true }) shape: SkyBadgeShape = \"custom\";\r\n\r\n  /** Maximum numeric count before showing e.g., `99+`. Ignored in icon mode. */\r\n  @property({ type: Number }) max = 99;\r\n\r\n  /** Do not render the badge if numeric value is `0`. */\r\n  @property({ type: Boolean }) hideWhenZero =\r\n    false;\r\n\r\n  /** Controls visibility regardless of value (useful for async data). */\r\n  @property({ type: Boolean, reflect: true }) show = true;\r\n\r\n  /** Pixel or CSS length offsets for `default`/`floating` positions. */\r\n  @property({ type: String }) offsetX: string = \"0px\";\r\n  @property({ type: String }) offsetY: string = \"0px\";\r\n\r\n  /** Optional outline ring around the badge. */\r\n  @property({ type: Boolean }) ring = false;\r\n  @property({ type: String }) ringColor: string =\r\n    \"primary\";\r\n  @property({ type: String }) ringOffset: string =\r\n    \"1px\";\r\n\r\n  /** Accessiblity: override the generated aria-label for screen readers. */\r\n  @property({ type: String }) badgeLabel:\r\n    | string\r\n    | null = null;\r\n\r\n  /** Accessibility: if true, hides the badge from assistive tech (purely decorative). */\r\n  @property({ type: Boolean })\r\n  badgeAriaHidden = false;\r\n\r\n  /** Make badge focusable/clickable and emit `badge-click`. */\r\n  @property({ type: Boolean }) interactive = false;\r\n\r\n  /** Corner preset; use \"custom\" to rely on offsetX/offsetY and existing behavior. */\r\n  @property({ type: String, reflect: true }) placement: SkyBadgePlacement = \"custom\";\r\n\r\n  @query(\".badge\") private _badgeEl!: HTMLSpanElement;\r\n\r\n  /** Ref for the badge element (e.g. for tooltip anchor or positioning). */\r\n  public badgeRef = createRef<HTMLSpanElement>();\r\n\r\n  static override shadowRootOptions: ShadowRootInit = {\r\n    mode: \"open\",\r\n    delegatesFocus: true,\r\n  };\r\n\r\n  static override styles = css`\r\n    :host {\r\n      display: inline-block;\r\n      position: relative;\r\n      box-sizing: border-box;\r\n      /* Theming: override with --sky-badge-* for custom sizing */\r\n      --sky-badge-radius: var(--sky-radius-secondary);\r\n      --sky-badge-padding: var(--sky-space-0\\\\.5, 0.125rem);\r\n      --sky-badge-font-size: var(--sky-font-size-xs, 0.75rem);\r\n      --sky-badge-font-weight: var(--sky-font-weight-bold, 700);\r\n      --sky-badge-shadow: none;\r\n      --sky-badge-translate-x: 0px;\r\n      --sky-badge-translate-y: 0px;\r\n    }\r\n\r\n    .container {\r\n      display: inline-flex;\r\n      position: relative;\r\n      align-items: center;\r\n    }\r\n\r\n    /* Badge base */\r\n    .badge {\r\n      min-height: 5px;\r\n      padding: var(--sky-badge-padding);\r\n      display: inline-flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      box-shadow: var(--sky-badge-shadow);\r\n      color: var(--_badge-text-color);\r\n      background-color: var(--_badge-bg);\r\n      border: var(--_badge-border, none);\r\n      font: var(--sky-text-caption);\r\n      font-weight: var(--sky-badge-font-weight);\r\n      font-size: var(--sky-badge-font-size);\r\n      line-height: var(--sky-line-height-none, 1);\r\n      letter-spacing: var(--sky-letter-spacing-tight, -0.01em);\r\n      position: absolute;\r\n      z-index: 1;\r\n      border-radius: var(--_badge-radius);\r\n      min-width: var(--_badge-size);\r\n      min-height: var(--_badge-size);\r\n      top: var(--_anchor-top, auto);\r\n      right: var(--_anchor-right, auto);\r\n      bottom: var(--_anchor-bottom, auto);\r\n      left: var(--_anchor-left, auto);\r\n      transform: translate(\r\n        var(--sky-badge-translate-x),\r\n        var(--sky-badge-translate-y)\r\n      );\r\n      user-select: none;\r\n      -webkit-user-select: none;\r\n      white-space: nowrap;\r\n      backdrop-filter: none;\r\n      -webkit-backdrop-filter: none;\r\n      transition: var(--sky-transition-fast);\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      .badge {\r\n        transition: none;\r\n      }\r\n    }\r\n\r\n    /* Floating offsets & overlap */\r\n    .badge.floating {\r\n      transform: translate(\r\n        calc(50% + var(--sky-badge-translate-x)),\r\n        calc(-50% + var(--sky-badge-translate-y))\r\n      );\r\n    }\r\n\r\n    /* Inline style participates in text flow */\r\n    .badge.inline {\r\n      position: static;\r\n      display: inline-flex;\r\n      margin-inline-start: var(--sky-space-1\\\\.5, 6px);\r\n      transform: translate(\r\n        var(--sky-badge-translate-x),\r\n        var(--sky-badge-translate-y)\r\n      );\r\n    }\r\n\r\n    /* Icon styling */\r\n    sky-icon[part=\"icon\"] {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      width: 1em;\r\n      height: 1em;\r\n      font-size: var(--_icon-size);\r\n      color: var(--_icon-color);\r\n      backdrop-filter: none;\r\n      -webkit-backdrop-filter: none;\r\n    }\r\n\r\n    /* Interactive affordances */\r\n    .badge[role=\"button\"] {\r\n      cursor: pointer;\r\n      outline: none;\r\n      -webkit-tap-highlight-color: transparent;\r\n    }\r\n    .badge[role=\"button\"]:focus-visible {\r\n      outline: none;\r\n      box-shadow: var(--sky-focus-ring);\r\n    }\r\n\r\n    /* Ring (outline) */\r\n    .badge.ringed::after {\r\n      content: \"\";\r\n      position: absolute;\r\n      inset: calc(-1 * var(--_ring-offset));\r\n      border-radius: inherit;\r\n      box-shadow: 0 0 0 2px var(--_ring-color);\r\n      pointer-events: none;\r\n    }\r\n\r\n    .badge[data-placement=\"top-center\"] {\r\n      transform: translate(\r\n        calc(-50% + var(--sky-badge-translate-x)),\r\n        var(--sky-badge-translate-y)\r\n      );\r\n    }\r\n  `;\r\n\r\n  protected override updated(changed: PropertyValues<this>): void {\r\n    if (changed.has(\"size\")) {\r\n      if (/^\\d+$/.test(this.size as string)) this.size = `${this.size}px`;\r\n    }\r\n    if (\r\n      changed.has(\"position\") &&\r\n      !SKY_BADGE_POSITIONS.includes(this.position)\r\n    ) {\r\n      this.position = \"default\";\r\n    }\r\n    if (changed.has(\"shape\") && !SKY_BADGE_SHAPES.includes(this.shape)) {\r\n      this.shape = \"custom\";\r\n    }\r\n    if (\r\n      changed.has(\"placement\") &&\r\n      !SKY_BADGE_PLACEMENTS.includes(this.placement)\r\n    ) {\r\n      this.placement = \"custom\";\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Forces badge visibility on.\r\n   *\r\n   * @returns {void}\r\n   */\r\n  public showBadge(): void {\r\n    this.show = true;\r\n  }\r\n\r\n  /**\r\n   * Forces badge visibility off.\r\n   *\r\n   * @returns {void}\r\n   */\r\n  public hideBadge(): void {\r\n    this.show = false;\r\n  }\r\n\r\n  /**\r\n   * Updates badge value for text/count or icon modes.\r\n   *\r\n   * @param value Badge value or icon name.\r\n   * @returns {void}\r\n   */\r\n  public setValue(value: string): void {\r\n    this.value = value;\r\n  }\r\n\r\n  /** Emits `badge-click` for interactive activation. */\r\n  private _onActivate = (e: Event) => {\r\n    if (!this.interactive) return;\r\n    this.dispatchEvent(\r\n      new CustomEvent<SkyBadgeClickEventDetail>(\"badge-click\", {\r\n        detail: { originalEvent: e },\r\n        bubbles: true,\r\n        composed: true,\r\n      })\r\n    );\r\n  };\r\n\r\n  /** Handles keyboard activation with Enter and Space. */\r\n  private _onKeydown = (e: KeyboardEvent) => {\r\n    if (!this.interactive) return;\r\n    if (e.key === \"Enter\" || e.key === \" \") {\r\n      e.preventDefault();\r\n      this._onActivate(e);\r\n    }\r\n  };\r\n\r\n  /** Computes accessible badge label from current render state. */\r\n  private _computeAriaLabel(displayValue: string | null): string | null {\r\n    if (this.badgeAriaHidden) return null;\r\n    if (this.badgeLabel) return this.badgeLabel;\r\n    if (this.isIcon) return \"\"; // purely visual when icon unless overridden\r\n    if (displayValue == null || displayValue === \"\") return \"Badge\";\r\n    const n = Number(displayValue);\r\n    return isNaN(n) ? `Badge: ${displayValue}` : `Badge count: ${displayValue}`;\r\n  }\r\n\r\n  /** Resolves anchor edges from placement preset. */\r\n  private _computeAnchors(placement: SkyBadgePlacement): {\r\n    top: string;\r\n    right: string;\r\n    bottom: string;\r\n    left: string;\r\n  } {\r\n    if (placement === \"custom\") {\r\n      return { top: \"0\", right: \"0\", bottom: \"auto\", left: \"auto\" };\r\n    }\r\n    switch (placement) {\r\n      case \"top-right\":\r\n        return { top: \"0\", right: \"0\", bottom: \"auto\", left: \"auto\" };\r\n      case \"top-left\":\r\n        return { top: \"0\", right: \"auto\", bottom: \"auto\", left: \"0\" };\r\n      case \"bottom-left\":\r\n        return { top: \"auto\", right: \"auto\", bottom: \"0\", left: \"0\" };\r\n      case \"bottom-right\":\r\n        return { top: \"auto\", right: \"0\", bottom: \"0\", left: \"auto\" };\r\n      case \"top-center\":\r\n        return { top: \"0\", right: \"auto\", bottom: \"auto\", left: \"50%\" };\r\n      default:\r\n        return { top: \"0\", right: \"0\", bottom: \"auto\", left: \"auto\" };\r\n    }\r\n  }\r\n\r\n  /** Maps semantic status tokens to soft badge surface colors. */\r\n  private _resolveBadgeSurface(): {\r\n    bg: string;\r\n    color: string;\r\n    border: string;\r\n  } {\r\n    const semanticKey = resolveSemanticSurfaceKey(this.statusColor);\r\n    if (semanticKey) {\r\n      const soft = semanticSoftSurfaceTokens(semanticKey, { bordered: true });\r\n      const color =\r\n        this.textColor && this.textColor !== \"default\"\r\n          ? resolveColor(this.textColor)\r\n          : soft.color;\r\n      return { bg: soft.bg, color, border: soft.border };\r\n    }\r\n\r\n    return {\r\n      bg: resolveColor(this.statusColor),\r\n      color:\r\n        this.textColor && this.textColor !== \"default\"\r\n          ? resolveColor(this.textColor)\r\n          : resolveTextColorForToken(this.statusColor),\r\n      border: \"none\",\r\n    };\r\n  }\r\n\r\n  override render() {\r\n    const numeric = Number(this.value);\r\n    const isNumeric = !isNaN(numeric) && !this.isIcon;\r\n    const shouldHideZero = this.hideWhenZero && isNumeric && numeric === 0;\r\n    const visible = this.show && !shouldHideZero;\r\n    const displayValue = this.isIcon\r\n      ? null\r\n      : isNumeric && this.max > 0 && numeric > this.max\r\n        ? `${this.max}+`\r\n        : this.value;\r\n\r\n    const cls = [\"badge\", this.position];\r\n    if (this.ring) cls.push(\"ringed\");\r\n\r\n    const computedRadius =\r\n      this.shape === \"circle\"\r\n        ? \"var(--sky-radius-full)\"\r\n        : this.shape === \"pill\"\r\n          ? \"var(--sky-radius-full)\"\r\n          : \"var(--sky-badge-radius)\";\r\n\r\n    const surface = this._resolveBadgeSurface();\r\n    const { top, right, bottom, left } = this._computeAnchors(this.placement);\r\n    const badgeStyle = {\r\n      \"--_badge-bg\": surface.bg,\r\n      \"--_badge-text-color\": surface.color,\r\n      \"--_badge-border\": surface.border,\r\n      \"--_badge-radius\": computedRadius,\r\n      \"--_badge-size\": this.size,\r\n      \"--_icon-size\": this.size,\r\n      \"--_icon-color\": resolveColor(this.iconColor || this.textColor),\r\n      \"--_ring-color\": resolveColor(this.ringColor),\r\n      \"--_ring-offset\": this.ringOffset,\r\n      \"--sky-badge-translate-x\": this.offsetX,\r\n      \"--sky-badge-translate-y\": this.offsetY,\r\n      \"--_anchor-top\": top,\r\n      \"--_anchor-right\": right,\r\n      \"--_anchor-bottom\": bottom,\r\n      \"--_anchor-left\": left,\r\n    };\r\n\r\n    const ariaLabel = this._computeAriaLabel(displayValue);\r\n\r\n    return html`\r\n      <div class=\"container\" part=\"container\">\r\n        <slot></slot>\r\n        ${when(\r\n      visible,\r\n      () => html`\r\n            <span\r\n              class=${cls.join(\" \")}\r\n              part=\"badge\"\r\n              style=${styleMap(badgeStyle)}\r\n              role=${this.interactive ? \"button\" : \"status\"}\r\n              aria-live=${this.interactive ? \"off\" : \"polite\"}\r\n              data-placement=${this.placement}\r\n              aria-atomic=\"true\"\r\n              aria-label=${ariaLabel ?? nothing}\r\n              aria-hidden=${this.badgeAriaHidden ? \"true\" : \"false\"}\r\n              tabindex=${this.interactive ? 0 : -1}\r\n              @click=${this._onActivate}\r\n              @keydown=${this._onKeydown}\r\n              ${ref(this.badgeRef)}\r\n            >\r\n              <slot name=\"badge\">\r\n                ${when(\r\n        this.isIcon,\r\n        () =>\r\n          html`<sky-icon part=\"icon\" icon=${this.value} aria-hidden=\"true\"></sky-icon>`,\r\n        () => html`${displayValue}`,\r\n      )}\r\n              </slot>\r\n            </span>\r\n          `,\r\n    )}\r\n      </div>\r\n    `;\r\n  }\r\n}\r\n"],"names":["SKY_BADGE_POSITIONS","SKY_BADGE_SHAPES","SKY_BADGE_PLACEMENTS","SkyBadge","LitElement","constructor","super","arguments","this","statusColor","textColor","iconColor","position","value","isIcon","size","shape","max","hideWhenZero","show","offsetX","offsetY","ring","ringColor","ringOffset","badgeLabel","badgeAriaHidden","interactive","placement","badgeRef","createRef","_onActivate","e","dispatchEvent","CustomEvent","detail","originalEvent","bubbles","composed","_onKeydown","key","preventDefault","updated","changed","has","test","includes","showBadge","hideBadge","setValue","_computeAriaLabel","displayValue","n","Number","isNaN","_computeAnchors","top","right","bottom","left","_resolveBadgeSurface","semanticKey","resolveSemanticSurfaceKey","soft","semanticSoftSurfaceTokens","bordered","color","resolveColor","bg","border","resolveTextColorForToken","render","numeric","isNumeric","shouldHideZero","visible","cls","push","computedRadius","surface","badgeStyle","ariaLabel","html","when","join","styleMap","nothing","ref","dependencies","SkyIcon","shadowRootOptions","mode","delegatesFocus","styles","css","__decorateClass","property","type","String","reflect","prototype","Boolean","query","customElement"],"mappings":"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"}
+{"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":"+wBAyBA,MAAMA,EAAmD,CACvD,UACA,WACA,UAEIC,EAA6C,CACjD,SACA,OACA,UAEIC,EAAqD,CACzD,SACA,YACA,WACA,cACA,eACA,cA6EK,IAAMC,EAAN,cAAuBC,EAAvB,WAAAC,GAAAC,SAAAC,WAOLC,KAAAC,YAAsB,UAItBD,KAAAE,UAAoB,UAIpBF,KAAAG,UAAoB,GAGuBH,KAAAI,SACzC,UAG0BJ,KAAAK,MAAgB,GAGAL,KAAAM,QAAS,EAGVN,KAAAO,KAAe,GAGfP,KAAAQ,MAAuB,SAGtCR,KAAAS,IAAM,GAGLT,KAAAU,cAAe,EAGAV,KAAAW,MAAO,EAGvBX,KAAAY,QAAkB,MAClBZ,KAAAa,QAAkB,MAGjBb,KAAAc,MAAO,EACRd,KAAAe,UAAoB,UACpBf,KAAAgB,WAAqB,MAGrBhB,KAAAiB,WAA4B,KAIxDjB,KAAAkB,iBAAkB,EAGWlB,KAAAmB,aAAc,EAGAnB,KAAAoB,UACzC,SAKFpB,KAAOqB,SAAWC,IAoMlBtB,KAAQuB,YAAeC,IAChBxB,KAAKmB,aACVnB,KAAKyB,cACH,IAAIC,YAAsC,cAAe,CACvDC,OAAQ,CAAEC,cAAeJ,GACzBK,SAAS,EACTC,UAAU,MAMhB9B,KAAQ+B,WAAcP,IACfxB,KAAKmB,cACI,UAAVK,EAAEQ,KAA6B,MAAVR,EAAEQ,MACzBR,EAAES,iBACFjC,KAAKuB,YAAYC,KAErB,CApEmB,OAAAU,CAAQC,GACrBA,EAAQC,IAAI,SACV,QAAQC,KAAKrC,KAAKO,QAAiBP,KAAKO,KAAO,GAAGP,KAAKO,UAG3D4B,EAAQC,IAAI,cACX5C,EAAoB8C,SAAStC,KAAKI,YAEnCJ,KAAKI,SAAW,WAEd+B,EAAQC,IAAI,WAAa3C,EAAiB6C,SAAStC,KAAKQ,SAC1DR,KAAKQ,MAAQ,UAGb2B,EAAQC,IAAI,eACX1C,EAAqB4C,SAAStC,KAAKoB,aAEpCpB,KAAKoB,UAAY,SAErB,CAOO,SAAAmB,GACLvC,KAAKW,MAAO,CACd,CAOO,SAAA6B,GACLxC,KAAKW,MAAO,CACd,CAQO,QAAA8B,CAASpC,GACdL,KAAKK,MAAQA,CACf,CAwBQ,iBAAAqC,CAAkBC,GACxB,GAAI3C,KAAKkB,gBAAiB,OAAO,KACjC,GAAIlB,KAAKiB,WAAY,OAAOjB,KAAKiB,WACjC,GAAIjB,KAAKM,OAAQ,MAAO,GACxB,GAAoB,MAAhBqC,GAAyC,KAAjBA,EAAqB,MAAO,QACxD,MAAMC,EAAIC,OAAOF,GACjB,OAAOG,MAAMF,GAAK,UAAUD,IAAiB,gBAAgBA,GAC/D,CAGQ,eAAAI,CAAgB3B,GAMtB,GAAkB,WAAdA,EACF,MAAO,CAAE4B,IAAK,IAAKC,MAAO,IAAKC,OAAQ,OAAQC,KAAM,QAEvD,OAAQ/B,GACN,IAAK,YAUL,QACE,MAAO,CAAE4B,IAAK,IAAKC,MAAO,IAAKC,OAAQ,OAAQC,KAAM,QATvD,IAAK,WACH,MAAO,CAAEH,IAAK,IAAKC,MAAO,OAAQC,OAAQ,OAAQC,KAAM,KAC1D,IAAK,cACH,MAAO,CAAEH,IAAK,OAAQC,MAAO,OAAQC,OAAQ,IAAKC,KAAM,KAC1D,IAAK,eACH,MAAO,CAAEH,IAAK,OAAQC,MAAO,IAAKC,OAAQ,IAAKC,KAAM,QACvD,IAAK,aACH,MAAO,CAAEH,IAAK,IAAKC,MAAO,OAAQC,OAAQ,OAAQC,KAAM,OAI9D,CAGQ,oBAAAC,GAKN,MAAMC,EAAcC,EAA0BtD,KAAKC,aACnD,GAAIoD,EAAa,CACf,MAAME,EAAOC,EAA0BH,EAAa,CAAEI,UAAU,IAC1DC,EACJ1D,KAAKE,WAAgC,YAAnBF,KAAKE,UACnByD,EAAa3D,KAAKE,WAClBqD,EAAKG,MACX,MAAO,CAAEE,GAAIL,EAAKK,GAAIF,QAAOG,OAAQN,EAAKM,OAC5C,CAEA,MAAO,CACLD,GAAID,EAAa3D,KAAKC,aACtByD,MACE1D,KAAKE,WAAgC,YAAnBF,KAAKE,UACnByD,EAAa3D,KAAKE,WAClB4D,EAAyB9D,KAAKC,aACpC4D,OAAQ,OAEZ,CAES,MAAAE,GACP,MAAMC,EAAUnB,OAAO7C,KAAKK,OACtB4D,GAAanB,MAAMkB,KAAahE,KAAKM,OACrC4D,EAAiBlE,KAAKU,cAAgBuD,GAAyB,IAAZD,EACnDG,EAAUnE,KAAKW,OAASuD,EACxBvB,EAAe3C,KAAKM,OACtB,KACA2D,GAAajE,KAAKS,IAAM,GAAKuD,EAAUhE,KAAKS,IAC1C,GAAGT,KAAKS,OACRT,KAAKK,MAEL+D,EAAM,CAAC,QAASpE,KAAKI,UACvBJ,KAAKc,MAAMsD,EAAIC,KAAK,UAExB,MAAMC,EACW,WAAftE,KAAKQ,OAEc,SAAfR,KAAKQ,MADL,yBAGE,0BAEF+D,EAAUvE,KAAKoD,uBACfoB,IACHlB,EAA0BtD,KAAKC,cAC9BD,KAAKE,WAAgC,YAAnBF,KAAKE,YACrB8C,IAAEA,QAAKC,EAAAC,OAAOA,EAAAC,KAAQA,GAASnD,KAAK+C,gBAAgB/C,KAAKoB,WACzDqD,EAAa,CACjB,cAAeF,EAAQX,GACvB,sBAAuBW,EAAQb,MAC/B,kBAAmBa,EAAQV,OAC3B,kBAAmBS,EACnB,gBAAiBtE,KAAKO,KACtB,eAAgBP,KAAKO,KACrB,gBAAiBoD,EAAa3D,KAAKG,WAAaH,KAAKE,WACrD,gBAAiByD,EAAa3D,KAAKe,WACnC,iBAAkBf,KAAKgB,WACvB,0BAA2BhB,KAAKY,QAChC,0BAA2BZ,KAAKa,QAChC,gBAAiBmC,EACjB,kBAAmBC,EACnB,mBAAoBC,EACpB,iBAAkBC,GAGduB,EAAY1E,KAAK0C,kBAAkBC,GAEzC,OAAOgC,CAAA;;;UAGDC,EACAT,EACA,IAAMQ,CAAA;;sBAEMP,EAAIS,KAAK;;sBAETC,EAASL;qBACVzE,KAAKmB,YAAc,SAAW;0BACzBnB,KAAKmB,YAAc,MAAQ;+BACtBnB,KAAKoB;qCACCoD;;2BAEVE,GAAaK;4BACZ/E,KAAKkB,gBAAkB,OAAS;yBACnClB,KAAKmB,YAAc,GAAI;uBACzBnB,KAAKuB;yBACHvB,KAAK+B;gBACdiD,EAAIhF,KAAKqB;;;kBAGPuD,EACA5E,KAAKM,OACL,IACEqE,CAAA;;6BAES3E,KAAKK;;kCAGhB,IAAMsE,IAAOhC;;;;;KAQ7B,GA/aWhD,EACJsF,aAAyD,CAC9D,WAAYC,GAFHvF,EAsEKwF,kBAAoC,CAClDC,KAAM,OACNC,gBAAgB,GAxEP1F,EA2EK2F,OAASC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA6HrBC,EACAC,EAAiB,CACf,CACEC,SAAU,8BACVC,QAAS,eAEX,CACED,SAAU,oDACVC,QAAS;IAzMjBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KANxBrG,EAOXsG,UAAA,cAAA,GAIAL,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KAVxBrG,EAWXsG,UAAA,YAAA,GAIAL,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KAdxBrG,EAeXsG,UAAA,YAAA,GAG2CL,EAAA,CAA1CC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KAlBxBrG,EAkBgCsG,UAAA,WAAA,GAIfL,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAtBPpG,EAsBiBsG,UAAA,QAAA,GAGgBL,EAAA,CAA3CC,EAAS,CAAEC,KAAMI,QAASF,SAAS,KAzBzBrG,EAyBiCsG,UAAA,SAAA,GAGDL,EAAA,CAA1CC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KA5BxBrG,EA4BgCsG,UAAA,OAAA,GAGAL,EAAA,CAA1CC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KA/BxBrG,EA+BgCsG,UAAA,QAAA,GAGfL,EAAA,CAA3BC,EAAS,CAAEC,KAAMjD,UAlCPlD,EAkCiBsG,UAAA,MAAA,GAGCL,EAAA,CAA5BC,EAAS,CAAEC,KAAMI,WArCPvG,EAqCkBsG,UAAA,eAAA,GAGeL,EAAA,CAA3CC,EAAS,CAAEC,KAAMI,QAASF,SAAS,KAxCzBrG,EAwCiCsG,UAAA,OAAA,GAGhBL,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UA3CPpG,EA2CiBsG,UAAA,UAAA,GACAL,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UA5CPpG,EA4CiBsG,UAAA,UAAA,GAGCL,EAAA,CAA5BC,EAAS,CAAEC,KAAMI,WA/CPvG,EA+CkBsG,UAAA,OAAA,GACDL,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAhDPpG,EAgDiBsG,UAAA,YAAA,GACAL,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAjDPpG,EAiDiBsG,UAAA,aAAA,GAGAL,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UApDPpG,EAoDiBsG,UAAA,aAAA,GAI5BL,EAAA,CADCC,EAAS,CAAEC,KAAMI,WAvDPvG,EAwDXsG,UAAA,kBAAA,GAG6BL,EAAA,CAA5BC,EAAS,CAAEC,KAAMI,WA3DPvG,EA2DkBsG,UAAA,cAAA,GAGcL,EAAA,CAA1CC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KA9DxBrG,EA8DgCsG,UAAA,YAAA,GAGlBL,EAAA,CAAxBO,EAAM,WAjEIxG,EAiEcsG,UAAA,WAAA,GAjEdtG,EAANiG,EAAA,CADNQ,EAAc,cACFzG"}

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://library.sky-ui.com/components/button
+ * @documentation https://sky-ui.com/components/button
  * @dependency sky-icon
  *
  * @slot - Default slot for the button label (replaces `label` property if used).

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

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