@sky.ui/core 0.0.40 → 0.0.41

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

@@ -42,7 +42,7 @@ import{unsafeCSS as o,css as t,LitElement as r,html as e,nothing as n}from"lit";
       gap: 0;
     }
 
-    :host([variant='link']) button {
+    :host([variant="link"]) button {
       width: auto;
       border-radius: 0;
       text-decoration: none;
@@ -52,16 +52,14 @@ import{unsafeCSS as o,css as t,LitElement as r,html as e,nothing as n}from"lit";
       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%;
@@ -90,10 +88,7 @@ import{unsafeCSS as o,css as t,LitElement as r,html as e,nothing as n}from"lit";
       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;
@@ -105,10 +100,8 @@ import{unsafeCSS as o,css as t,LitElement as r,html as e,nothing as n}from"lit";
       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),
@@ -118,17 +111,14 @@ import{unsafeCSS as o,css as t,LitElement as r,html as e,nothing as n}from"lit";
       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(
@@ -148,13 +138,14 @@ import{unsafeCSS as o,css as t,LitElement as r,html as e,nothing as n}from"lit";
       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(
@@ -170,7 +161,7 @@ import{unsafeCSS as o,css as t,LitElement as r,html as e,nothing as n}from"lit";
 
     @media (prefers-reduced-motion: reduce) {
       button,
-      :host([variant='link']) button {
+      :host([variant="link"]) button {
         transition: none;
       }
 

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

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

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

@@ -1,7 +1,7 @@
-import { LitElement, PropertyValues } from 'lit';
-export type SkyCardElevation = 'none' | 'sm' | 'md' | 'lg';
-export type SkyCardSectionLayout = 'inline' | 'stack';
-export type SkyCardSectionTarget = 'both' | 'header' | 'footer' | 'none';
+import { LitElement, PropertyValues } from "lit";
+export type SkyCardElevation = "none" | "sm" | "md" | "lg";
+export type SkyCardSectionLayout = "inline" | "stack";
+export type SkyCardSectionTarget = "both" | "header" | "footer" | "none";
 /**
  * @element sky-card
  *
@@ -10,7 +10,7 @@ export type SkyCardSectionTarget = 'both' | 'header' | 'footer' | 'none';
  * @status stable
  * @since 1.0.0
  *
- * @documentation https://sky-ui.com/components/card
+ * @documentation https://library.sky-ui.com/components/card
  *
  * @slot - Default slot for the card body content (replaces `bodyPadding` property if used).
  * @slot title - Slot for the card title.

package/dist/sky-card/sky-card.js

@@ -99,11 +99,11 @@ import{css as e,LitElement as t,html as r}from"lit";import{property as o,customE
       overflow: hidden;
       box-shadow: none;
     }
-    .section.inset[part='header'] {
+    .section.inset[part="header"] {
       border: var(--_header-inset-border, 0 solid transparent);
       border-radius: var(--_header-radius, var(--sky-radius-secondary));
     }
-    .section.inset[part='footer'] {
+    .section.inset[part="footer"] {
       border: var(--_footer-inset-border, 0 solid transparent);
       border-radius: var(--_footer-radius, var(--sky-radius-secondary));
     }
@@ -118,39 +118,39 @@ import{css as e,LitElement as t,html as r}from"lit";import{property as o,customE
       right: var(--_footer-inset-gap, var(--sky-space-2, 8px));
     }
 
-    .section[part='header']:has(slot:not([empty])),
-    .section[part='header'][has-content] {
+    .section[part="header"]:has(slot:not([empty])),
+    .section[part="header"][has-content] {
       background: var(--_header-bg);
       background-image: var(--_header-glass-surface, none);
       padding-block: var(--_header-pad-y, var(--sky-space-3, 12px));
       padding-inline: var(--_header-pad-x, var(--sky-space-4, 16px));
     }
-    .section[part='footer']:has(slot:not([empty])),
-    .section[part='footer'][has-content] {
+    .section[part="footer"]:has(slot:not([empty])),
+    .section[part="footer"][has-content] {
       background: var(--_footer-bg);
       background-image: var(--_footer-glass-surface, none);
       padding-block: var(--_footer-pad-y, var(--sky-space-3, 12px));
       padding-inline: var(--_footer-pad-x, var(--sky-space-4, 16px));
     }
 
-    .section[part='header'].overlay-top:has(slot:not([empty])),
-    .section[part='header'].overlay-top[has-content] {
+    .section[part="header"].overlay-top:has(slot:not([empty])),
+    .section[part="header"].overlay-top[has-content] {
       backdrop-filter: var(--_header-backdrop, none);
       -webkit-backdrop-filter: var(--_header-backdrop, none);
     }
-    .section[part='footer'].overlay-bottom:has(slot:not([empty])),
-    .section[part='footer'].overlay-bottom[has-content] {
+    .section[part="footer"].overlay-bottom:has(slot:not([empty])),
+    .section[part="footer"].overlay-bottom[has-content] {
       backdrop-filter: var(--_footer-backdrop, none);
       -webkit-backdrop-filter: var(--_footer-backdrop, none);
     }
 
-    .section[part='header']:not(.inset):has(slot:not([empty])),
-    .section[part='header']:not(.inset)[has-content] {
+    .section[part="header"]:not(.inset):has(slot:not([empty])),
+    .section[part="header"]:not(.inset)[has-content] {
       border-bottom: var(--_header-separator, 0px) solid
         var(--_header-separator-color, var(--sky-border-light));
     }
-    .section[part='footer']:not(.inset):has(slot:not([empty])),
-    .section[part='footer']:not(.inset)[has-content] {
+    .section[part="footer"]:not(.inset):has(slot:not([empty])),
+    .section[part="footer"]:not(.inset)[has-content] {
       border-top: var(--_footer-separator, 0px) solid
         var(--_footer-separator-color, var(--sky-border-light));
     }
@@ -164,7 +164,7 @@ import{css as e,LitElement as t,html as r}from"lit";import{property as o,customE
       display: none;
     }
 
-    ::slotted([slot='title']) {
+    ::slotted([slot="title"]) {
       font-size: var(--sky-font-size-lg, 18px);
       font-weight: var(--sky-font-weight-semibold, 600);
       margin: 0;
@@ -172,33 +172,33 @@ import{css as e,LitElement as t,html as r}from"lit";import{property as o,customE
       text-align: start;
       text-shadow: var(--sky-text-shadow-on-glass, none);
     }
-    ::slotted([slot='subtitle']) {
+    ::slotted([slot="subtitle"]) {
       font-size: var(--sky-font-size-sm, 14px);
       margin: 0;
       color: var(--sky-text-secondary);
       text-align: start;
       text-shadow: var(--sky-text-shadow-on-glass, none);
     }
-    ::slotted([slot='actions']) {
+    ::slotted([slot="actions"]) {
       display: inline-flex;
       gap: var(--sky-space-1\\.5, 6px);
       align-items: center;
       margin-left: auto;
     }
-    ::slotted([slot='footer-title']) {
+    ::slotted([slot="footer-title"]) {
       font-size: var(--sky-font-size-md, 16px);
       font-weight: var(--sky-font-weight-medium, 500);
       margin: 0;
       color: var(--sky-text-primary);
       text-align: start;
     }
-    ::slotted([slot='footer-subtitle']) {
+    ::slotted([slot="footer-subtitle"]) {
       font-size: var(--sky-font-size-xs, 12px);
       margin: 0;
       color: var(--sky-text-secondary);
       text-align: start;
     }
-    ::slotted([slot='footer-actions']) {
+    ::slotted([slot="footer-actions"]) {
       display: inline-flex;
       gap: var(--sky-space-1\\.5, 6px);
       align-items: center;