@sky.ui/core 0.0.41 → 0.0.43

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\";\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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"}
+{"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  resolveSemanticSurfaceKey,\r\n  semanticSoftSurfaceTokens,\r\n  skyBorderPrimaryShorthand,\r\n  tuneSurfaceVariantForDefaultColor,\r\n} from \"../helper/utils/color-resolver\";\r\nimport { cssOnFillEnhance, contrastOverlay, ON_COLOR_FALLBACK_LIGHT } from \"../helper/utils/contrast-color\";\r\nimport { resolveRadius } from \"../helper/utils/size-resolver\";\r\nimport { PresetController } from \"../helper/controllers/preset-controller\";\r\nimport { skyFocusRingHostStyles } from \"../helper/styles/focus-ring\";\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://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 * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.\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 * <sky-button preset=\"cancel\" label=\"Cancel\"></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 *   <sky-button preset=\"cancel\" label=\"Cancel\"></sky-button>\r\n * </template>\r\n * ```\r\n * ```jsx\r\n * export default function Demo() {\r\n *   return (\r\n *     <>\r\n *       <sky-button variant=\"gradient\" colors=\"linear@90deg: primary, secondary\" iconl=\"ion:add\" label=\"Create\"></sky-button>\r\n *       <sky-button preset=\"cancel\" label=\"Cancel\"></sky-button>\r\n *     </>\r\n *   );\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  /** Named prop preset from nearest `sky-config-provider`. */\r\n  @property({ type: String, reflect: true }) preset = \"\";\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  private _presets = new PresetController(this, {\r\n    isPaused: () => this.inGroup,\r\n    onChange: () => {\r\n      this._styleDirty = true;\r\n    },\r\n  });\r\n\r\n  private _lastPresetRevision = -1;\r\n  /** Set when presets change so `update()` rebuilds CSS vars after hostUpdate. */\r\n  private _styleDirty = true;\r\n\r\n  static styles = [\r\n    skyFocusRingHostStyles,\r\n    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       Glass shadow variant is excluded. Ghost is enhanced only on hover (fill becomes solid). */\r\n    ${unsafeCSS(\r\n      cssOnFillEnhance([\r\n        {\r\n          selector:\r\n            ':host(:is([variant=\"solid\"], [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=\"relief\"], [variant=\"gradient\"]):not([data-text-explicit])) button sky-icon',\r\n          fillVar: \"--btn-bg-color\",\r\n        },\r\n        {\r\n          selector:\r\n            ':host(:is([variant=\"solid\"], [variant=\"relief\"], [variant=\"gradient\"]):not([data-text-explicit])) button:hover:not(:disabled), :host(:is([variant=\"solid\"], [variant=\"relief\"], [variant=\"gradient\"]):not([data-text-explicit])) button:focus-visible:not(:disabled)',\r\n          fillVar: \"var(--btn-bg-color-hover, var(--btn-bg-color))\",\r\n        },\r\n        {\r\n          selector:\r\n            ':host(:is([variant=\"solid\"], [variant=\"relief\"], [variant=\"gradient\"]):not([data-text-explicit])) button:hover:not(:disabled) sky-icon, :host(:is([variant=\"solid\"], [variant=\"relief\"], [variant=\"gradient\"]):not([data-text-explicit])) button:focus-visible:not(:disabled) sky-icon',\r\n          fillVar: \"var(--btn-bg-color-hover, var(--btn-bg-color))\",\r\n        },\r\n        {\r\n          selector:\r\n            ':host([variant=\"ghost\"]:not([data-text-explicit])) button:hover:not(:disabled), :host([variant=\"ghost\"]: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          selector:\r\n            ':host([variant=\"ghost\"]:not([data-text-explicit])) button:hover:not(:disabled) sky-icon, :host([variant=\"ghost\"]:not([data-text-explicit])) button:focus-visible:not(:disabled) sky-icon',\r\n          fillVar: \"var(--btn-bg-color-hover, var(--btn-bg-color))\",\r\n        },\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  // Slot change handler (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  /**\r\n   * Lit order: `willUpdate` → controllers `hostUpdate` (presets) → `update`/render.\r\n   * Style vars must be built in `update()` so they see preset-applied props.\r\n   * Building in `willUpdate` left render with `{}` after PresetController cleared/wrote props.\r\n   */\r\n  protected override update(changedProperties: Map<string, unknown>): void {\r\n    this._rebuildStyleVars(changedProperties);\r\n    super.update(changedProperties);\r\n  }\r\n\r\n  private _rebuildStyleVars(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      \"preset\",\r\n      \"inGroup\",\r\n      \"disabled\",\r\n      \"loading\",\r\n      \"colors\",\r\n      \"iconOnly\",\r\n    ];\r\n    const presetChanged = this._presets.revision !== this._lastPresetRevision;\r\n    const needsStyleUpdate =\r\n      this._styleDirty ||\r\n      presetChanged ||\r\n      styleProps.some((p) => changedProperties.has(p));\r\n    if (!needsStyleUpdate && Object.keys(this._styleVars).length > 0) {\r\n      return;\r\n    }\r\n    this._lastPresetRevision = this._presets.revision;\r\n    this._styleDirty = false;\r\n\r\n    const baseColor = resolveColor(this.color);\r\n    const textColor = ON_COLOR_FALLBACK_LIGHT;\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 effVariant = this.variant;\r\n    const effColor = this.color;\r\n    const effSize = this.size;\r\n    const effRadius = this.radius;\r\n    const effAnimation = this.animation;\r\n\r\n    const current = (\r\n      effVariant in variantDefaults ? effVariant : \"solid\"\r\n    ) as keyof typeof variantDefaults;\r\n    let v = { ...variantDefaults[current] };\r\n    Object.assign(\r\n      v,\r\n      tuneSurfaceVariantForDefaultColor(effColor, current, variantDefaults[current]),\r\n    );\r\n\r\n    const semanticKey = resolveSemanticSurfaceKey(effColor);\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\" : effAnimation;\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(effSize);\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    let borderWidth = 0;\r\n    const hasBorder2 = effVariant === \"bordered\" || effVariant === \"ghost\";\r\n    const hasBorder1 = effVariant === \"faded\" || effVariant === \"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    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    // Reduce padding on bordered variants to preserve outer height.\r\n    let adjustedPadding = effVariant === \"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    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 (effVariant === \"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        effVariant === \"link\" ? \"0\" : resolveRadius(effRadius),\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      // Focus ring follows `color` (not global active-primary).\r\n      \"--sky-focus-ring-color\": baseColor,\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 (effVariant === \"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 (effVariant === \"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 (effVariant === \"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    ripple.style.background = contrastOverlay(bg);\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","preset","inGroup","_hasMeaningfulSlot","_styleVars","_presets","PresetController","isPaused","onChange","_styleDirty","_lastPresetRevision","_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","update","changedProperties","_rebuildStyleVars","presetChanged","revision","p","has","Object","keys","baseColor","resolveColor","textColor","ON_COLOR_FALLBACK_LIGHT","variantDefaults","solid","bg","shadow","hoverBg","hoverColor","hoverShadow","faded","hoverBorder","bordered","hoverShade","transparent","fadeMix","flat","ghost","skyBorderPrimaryShorthand","relief","darkShade","gradient","createGradient","link","effVariant","effColor","effSize","effRadius","effAnimation","current","v","assign","tuneSurfaceVariantForDefaultColor","semanticKey","resolveSemanticSurfaceKey","soft","semanticSoftSurfaceTokens","animationMode","chosen","hover","active","presetToTransform","hoverTransform","activeTransform","s","basePadding","baseGap","borderWidth","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","background","contrastOverlay","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","skyFocusRingHostStyles","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

@@ -10,7 +10,7 @@ export type SkyCardSectionTarget = "both" | "header" | "footer" | "none";
  * @status stable
  * @since 1.0.0
  *
- * @documentation https://library.sky-ui.com/components/card
+ * @documentation https://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.
@@ -50,6 +50,7 @@ export type SkyCardSectionTarget = "both" | "header" | "footer" | "none";
  * @property {SkyCardSectionTarget} separators - Determines where separators should appear. Default: `"none"`.
  * @property {SkyCardSectionTarget} overlays - Determines where overlays should appear. Default: `"none"`.
  * @property {SkyCardSectionTarget} insets - Determines where insets should appear. Default: `"none"`.
+ * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `""`.
  * @method refreshLayout Recomputes card variables and section synchronization.
  *
  * @example
@@ -125,9 +126,16 @@ export declare class SkyCard extends LitElement {
     private static readonly SECTION_INSET_BG_MAP;
     private static _composeBackdrop;
     private static _composeElevation;
+    /** Named prop preset from nearest `sky-config-provider`. */
+    preset: string;
+    private _presets;
     static styles: import("lit").CSSResult;
     firstUpdated(): void;
-    protected willUpdate(changed: PropertyValues): void;
+    /**
+     * After PresetController hostUpdate — card chrome may come from presets.
+     * Keep flag recompute + CSS var apply here (not willUpdate).
+     */
+    protected update(changed: PropertyValues): void;
     private _wireSlotChangeHandlers;
     private _syncHeader;
     private _syncFooter;

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

@@ -1,4 +1,4 @@
-import{css as e,LitElement as t,html as r}from"lit";import{property as o,customElement as a}from"lit/decorators.js";import{classMap as s}from"lit/directives/class-map.js";import{resolveRadius as i}from"../helper/utils/size-resolver.js";import{resolveColor as n}from"../helper/utils/color-resolver.js";var d=Object.defineProperty,l=Object.getOwnPropertyDescriptor,h=(e,t,r,o)=>{for(var a,s=o>1?void 0:o?l(t,r):t,i=e.length-1;i>=0;i--)(a=e[i])&&(s=(o?a(t,r,s):a(s))||s);return o&&s&&d(t,r,s),s};let p=class extends t{constructor(){super(...arguments),this.bg="primary",this.blurLevel="none",this.radius="md",this.bodyPadding="none",this.elevation="md",this.outlined=!1,this.clickable=!1,this.headerBg="transparent",this.headerBlur="none",this.headerPadding="md",this.headerLayout="inline",this.headerInsetGap="sm",this.headerRadius="md",this.headerSeparatorColor="border-light",this.footerBg="transparent",this.footerBlur="none",this.footerPadding="md",this.footerLayout="inline",this.footerInsetGap="sm",this.footerRadius="md",this.footerSeparatorColor="border-light",this.padRatio=1,this.separators="none",this.overlays="none",this.insets="none",this._effHeaderSeparator=!1,this._effFooterSeparator=!1,this._effHeaderOverlay=!1,this._effFooterOverlay=!1,this._effHeaderInset=!1,this._effFooterInset=!1,this._varsCache={}}static _composeBackdrop(e){const t=p.BLUR_MAP[e]??e;return"none"===t?"none":`${t} var(--sky-saturation-secondary) var(--sky-brightness-secondary)`}static _composeElevation(e){const t={none:null,sm:"var(--sky-box-shadow-primary)",md:"var(--sky-box-shadow-secondary)",lg:"var(--sky-box-shadow-tertiary)"}[e];return null===t?"none":void 0===t?e:`var(--sky-box-shadow-inset), ${t}`}firstUpdated(){this._wireSlotChangeHandlers(),this._syncHeader(),this._syncFooter()}willUpdate(e){(e.has("separators")||e.has("overlays")||e.has("insets"))&&this._computeEffectiveFlags(),(e.has("bg")||e.has("blurLevel")||e.has("radius")||e.has("elevation"))&&this._applyCardVars(),(e.has("headerPadding")||e.has("bodyPadding")||e.has("footerPadding")||e.has("padRatio"))&&this._applyPaddingVars(),(e.has("headerBg")||e.has("footerBg")||e.has("headerBlur")||e.has("footerBlur")||e.has("headerRadius")||e.has("footerRadius")||e.has("headerInsetGap")||e.has("footerInsetGap")||e.has("headerSeparatorColor")||e.has("footerSeparatorColor")||e.has("separators")||e.has("insets")||e.has("overlays"))&&this._applySectionChrome()}_wireSlotChangeHandlers(){this.renderRoot.querySelector("#slot-title")?.addEventListener("slotchange",()=>this._syncHeader()),this.renderRoot.querySelector("#slot-subtitle")?.addEventListener("slotchange",()=>this._syncHeader()),this.renderRoot.querySelector("#slot-actions")?.addEventListener("slotchange",()=>this._syncHeader()),this.renderRoot.querySelector("#slot-f-title")?.addEventListener("slotchange",()=>this._syncFooter()),this.renderRoot.querySelector("#slot-f-subtitle")?.addEventListener("slotchange",()=>this._syncFooter()),this.renderRoot.querySelector("#slot-f-actions")?.addEventListener("slotchange",()=>this._syncFooter())}_syncHeader(){const e=this.renderRoot.querySelector("#hdr"),t=[this.renderRoot.querySelector("#slot-title"),this.renderRoot.querySelector("#slot-subtitle"),this.renderRoot.querySelector("#slot-actions")].filter(Boolean),r=t.some(e=>e.assignedNodes({flatten:!0}).length>0);e?.toggleAttribute("has-content",r),t.forEach(e=>e.toggleAttribute("empty",0===e.assignedNodes({flatten:!0}).length))}_syncFooter(){const e=this.renderRoot.querySelector("#ftr"),t=[this.renderRoot.querySelector("#slot-f-title"),this.renderRoot.querySelector("#slot-f-subtitle"),this.renderRoot.querySelector("#slot-f-actions")].filter(Boolean),r=t.some(e=>e.assignedNodes({flatten:!0}).length>0);e?.toggleAttribute("has-content",r),t.forEach(e=>e.toggleAttribute("empty",0===e.assignedNodes({flatten:!0}).length))}_expandPair(e){switch(e){case"both":return[!0,!0];case"header":return[!0,!1];case"footer":return[!1,!0];default:return[!1,!1]}}_computeEffectiveFlags(){[this._effHeaderSeparator,this._effFooterSeparator]=this._expandPair(this.separators),[this._effHeaderOverlay,this._effFooterOverlay]=this._expandPair(this.overlays),[this._effHeaderInset,this._effFooterInset]=this._expandPair(this.insets)}_setVar(e,t){this._varsCache[e]!==t&&(this.style.setProperty(e,t),this._varsCache[e]=t)}_resolveSectionBg(e,t,r){return t&&!r?p.SECTION_INSET_BG_MAP[e]??e:p.BG_MAP[e]??e}_resolveSectionGlassSurface(e){return p.GLASS_BG_TIERS.has(e)?"var(--sky-glass-surface)":"none"}_applyCardVars(){this._setVar("--_card-bg",p.BG_MAP[this.bg]??this.bg),this._setVar("--_card-glass-surface",p.GLASS_BG_TIERS.has(this.bg)?"var(--sky-glass-surface)":"none"),this._setVar("--_card-backdrop",p._composeBackdrop(this.blurLevel)),this._setVar("--_card-radius",i(this.radius)),this._setVar("--_card-shadow",p._composeElevation(this.elevation)),this._setVar("--_card-shadow-hover","var(--sky-box-shadow-inset), var(--sky-box-shadow-hover)")}_applyPaddingVars(){const e=p.SIZE_MAP[this.headerPadding]??this.headerPadding,t=p.SIZE_MAP[this.bodyPadding]??this.bodyPadding,r=p.SIZE_MAP[this.footerPadding]??this.footerPadding,o=Number.isFinite(this.padRatio)?Math.max(0,this.padRatio):1;this._setVar("--_header-pad-y",e),this._setVar("--_header-pad-x",`calc(${e} * ${o})`),this._setVar("--_body-pad-y",t),this._setVar("--_body-pad-x",`calc(${t} * ${o})`),this._setVar("--_footer-pad-y",r),this._setVar("--_footer-pad-x",`calc(${r} * ${o})`)}_applySectionChrome(){const e=this._effHeaderInset?"0px":this._effHeaderSeparator?"1px":"0px",t=this._effFooterInset?"0px":this._effFooterSeparator?"1px":"0px";this._setVar("--_header-separator",e),this._setVar("--_footer-separator",t),this._setVar("--_header-separator-color",n(this.headerSeparatorColor)),this._setVar("--_footer-separator-color",n(this.footerSeparatorColor));const r=this._effHeaderInset&&this._effHeaderSeparator?"1px solid var(--sky-border-light)":"0 solid transparent",o=this._effFooterInset&&this._effFooterSeparator?"1px solid var(--sky-border-light)":"0 solid transparent";this._setVar("--_header-inset-border",r),this._setVar("--_footer-inset-border",o),this._setVar("--_header-bg",this._resolveSectionBg(this.headerBg,this._effHeaderInset,this._effHeaderOverlay)),this._setVar("--_footer-bg",this._resolveSectionBg(this.footerBg,this._effFooterInset,this._effFooterOverlay)),this._setVar("--_header-glass-surface",this._effHeaderOverlay?this._resolveSectionGlassSurface(this.headerBg):"none"),this._setVar("--_footer-glass-surface",this._effFooterOverlay?this._resolveSectionGlassSurface(this.footerBg):"none"),this._setVar("--_header-backdrop",this._effHeaderOverlay?p._composeBackdrop(this.headerBlur):"none"),this._setVar("--_footer-backdrop",this._effFooterOverlay?p._composeBackdrop(this.footerBlur):"none"),this._setVar("--_header-radius",i(this.headerRadius)),this._setVar("--_footer-radius",i(this.footerRadius)),this._setVar("--_header-inset-gap",p.SIZE_MAP[this.headerInsetGap]??this.headerInsetGap),this._setVar("--_footer-inset-gap",p.SIZE_MAP[this.footerInsetGap]??this.footerInsetGap)}refreshLayout(){this._computeEffectiveFlags(),this._applyCardVars(),this._applyPaddingVars(),this._applySectionChrome(),this._syncHeader(),this._syncFooter()}render(){const e="inline"===this.headerLayout?"row":"stack",t="inline"===this.footerLayout?"row":"stack",o=s({section:!0,[e]:!0,"overlay-top":!!this._effHeaderOverlay,inset:!!this._effHeaderInset}),a=s({section:!0,[t]:!0,"overlay-bottom":!!this._effFooterOverlay,inset:!!this._effFooterInset});return r`
+import{css as e,LitElement as t,html as r}from"lit";import{property as o,customElement as s}from"lit/decorators.js";import{classMap as a}from"lit/directives/class-map.js";import{resolveRadius as i}from"../helper/utils/size-resolver.js";import{resolveColor as n}from"../helper/utils/color-resolver.js";import{PresetController as d}from"../helper/controllers/preset-controller.js";var l=Object.defineProperty,p=Object.getOwnPropertyDescriptor,h=(e,t,r,o)=>{for(var s,a=o>1?void 0:o?p(t,r):t,i=e.length-1;i>=0;i--)(s=e[i])&&(a=(o?s(t,r,a):s(a))||a);return o&&a&&l(t,r,a),a};let c=class extends t{constructor(){super(...arguments),this.bg="primary",this.blurLevel="none",this.radius="md",this.bodyPadding="none",this.elevation="md",this.outlined=!1,this.clickable=!1,this.headerBg="transparent",this.headerBlur="none",this.headerPadding="md",this.headerLayout="inline",this.headerInsetGap="sm",this.headerRadius="md",this.headerSeparatorColor="border-light",this.footerBg="transparent",this.footerBlur="none",this.footerPadding="md",this.footerLayout="inline",this.footerInsetGap="sm",this.footerRadius="md",this.footerSeparatorColor="border-light",this.padRatio=1,this.separators="none",this.overlays="none",this.insets="none",this._effHeaderSeparator=!1,this._effFooterSeparator=!1,this._effHeaderOverlay=!1,this._effFooterOverlay=!1,this._effHeaderInset=!1,this._effFooterInset=!1,this._varsCache={},this.preset="",this._presets=new d(this)}static _composeBackdrop(e){const t=c.BLUR_MAP[e]??e;return"none"===t?"none":`${t} var(--sky-saturation-secondary) var(--sky-brightness-secondary)`}static _composeElevation(e){const t={none:null,sm:"var(--sky-box-shadow-primary)",md:"var(--sky-box-shadow-secondary)",lg:"var(--sky-box-shadow-tertiary)"}[e];return null===t?"none":void 0===t?e:`var(--sky-box-shadow-inset), ${t}`}firstUpdated(){this._wireSlotChangeHandlers(),this._syncHeader(),this._syncFooter()}update(e){(e.has("separators")||e.has("overlays")||e.has("insets"))&&this._computeEffectiveFlags(),(e.has("bg")||e.has("blurLevel")||e.has("radius")||e.has("elevation")||e.has("preset"))&&this._applyCardVars(),(e.has("headerPadding")||e.has("bodyPadding")||e.has("footerPadding")||e.has("padRatio")||e.has("preset"))&&this._applyPaddingVars(),(e.has("headerBg")||e.has("footerBg")||e.has("headerBlur")||e.has("footerBlur")||e.has("headerRadius")||e.has("footerRadius")||e.has("headerInsetGap")||e.has("footerInsetGap")||e.has("headerSeparatorColor")||e.has("footerSeparatorColor")||e.has("separators")||e.has("insets")||e.has("overlays")||e.has("preset"))&&this._applySectionChrome(),super.update(e)}_wireSlotChangeHandlers(){this.renderRoot.querySelector("#slot-title")?.addEventListener("slotchange",()=>this._syncHeader()),this.renderRoot.querySelector("#slot-subtitle")?.addEventListener("slotchange",()=>this._syncHeader()),this.renderRoot.querySelector("#slot-actions")?.addEventListener("slotchange",()=>this._syncHeader()),this.renderRoot.querySelector("#slot-f-title")?.addEventListener("slotchange",()=>this._syncFooter()),this.renderRoot.querySelector("#slot-f-subtitle")?.addEventListener("slotchange",()=>this._syncFooter()),this.renderRoot.querySelector("#slot-f-actions")?.addEventListener("slotchange",()=>this._syncFooter())}_syncHeader(){const e=this.renderRoot.querySelector("#hdr"),t=[this.renderRoot.querySelector("#slot-title"),this.renderRoot.querySelector("#slot-subtitle"),this.renderRoot.querySelector("#slot-actions")].filter(Boolean),r=t.some(e=>e.assignedNodes({flatten:!0}).length>0);e?.toggleAttribute("has-content",r),t.forEach(e=>e.toggleAttribute("empty",0===e.assignedNodes({flatten:!0}).length))}_syncFooter(){const e=this.renderRoot.querySelector("#ftr"),t=[this.renderRoot.querySelector("#slot-f-title"),this.renderRoot.querySelector("#slot-f-subtitle"),this.renderRoot.querySelector("#slot-f-actions")].filter(Boolean),r=t.some(e=>e.assignedNodes({flatten:!0}).length>0);e?.toggleAttribute("has-content",r),t.forEach(e=>e.toggleAttribute("empty",0===e.assignedNodes({flatten:!0}).length))}_expandPair(e){switch(e){case"both":return[!0,!0];case"header":return[!0,!1];case"footer":return[!1,!0];default:return[!1,!1]}}_computeEffectiveFlags(){[this._effHeaderSeparator,this._effFooterSeparator]=this._expandPair(this.separators),[this._effHeaderOverlay,this._effFooterOverlay]=this._expandPair(this.overlays),[this._effHeaderInset,this._effFooterInset]=this._expandPair(this.insets)}_setVar(e,t){this._varsCache[e]!==t&&(this.style.setProperty(e,t),this._varsCache[e]=t)}_resolveSectionBg(e,t,r){return t&&!r?c.SECTION_INSET_BG_MAP[e]??e:c.BG_MAP[e]??e}_resolveSectionGlassSurface(e){return c.GLASS_BG_TIERS.has(e)?"var(--sky-glass-surface)":"none"}_applyCardVars(){this._setVar("--_card-bg",c.BG_MAP[this.bg]??this.bg),this._setVar("--_card-glass-surface",c.GLASS_BG_TIERS.has(this.bg)?"var(--sky-glass-surface)":"none"),this._setVar("--_card-backdrop",c._composeBackdrop(this.blurLevel)),this._setVar("--_card-radius",i(this.radius)),this._setVar("--_card-shadow",c._composeElevation(this.elevation)),this._setVar("--_card-shadow-hover","var(--sky-box-shadow-inset), var(--sky-box-shadow-hover)")}_applyPaddingVars(){const e=c.SIZE_MAP[this.headerPadding]??this.headerPadding,t=c.SIZE_MAP[this.bodyPadding]??this.bodyPadding,r=c.SIZE_MAP[this.footerPadding]??this.footerPadding,o=Number.isFinite(this.padRatio)?Math.max(0,this.padRatio):1;this._setVar("--_header-pad-y",e),this._setVar("--_header-pad-x",`calc(${e} * ${o})`),this._setVar("--_body-pad-y",t),this._setVar("--_body-pad-x",`calc(${t} * ${o})`),this._setVar("--_footer-pad-y",r),this._setVar("--_footer-pad-x",`calc(${r} * ${o})`)}_applySectionChrome(){const e=this._effHeaderInset?"0px":this._effHeaderSeparator?"1px":"0px",t=this._effFooterInset?"0px":this._effFooterSeparator?"1px":"0px";this._setVar("--_header-separator",e),this._setVar("--_footer-separator",t),this._setVar("--_header-separator-color",n(this.headerSeparatorColor)),this._setVar("--_footer-separator-color",n(this.footerSeparatorColor));const r=this._effHeaderInset&&this._effHeaderSeparator?"1px solid var(--sky-border-light)":"0 solid transparent",o=this._effFooterInset&&this._effFooterSeparator?"1px solid var(--sky-border-light)":"0 solid transparent";this._setVar("--_header-inset-border",r),this._setVar("--_footer-inset-border",o),this._setVar("--_header-bg",this._resolveSectionBg(this.headerBg,this._effHeaderInset,this._effHeaderOverlay)),this._setVar("--_footer-bg",this._resolveSectionBg(this.footerBg,this._effFooterInset,this._effFooterOverlay)),this._setVar("--_header-glass-surface",this._effHeaderOverlay?this._resolveSectionGlassSurface(this.headerBg):"none"),this._setVar("--_footer-glass-surface",this._effFooterOverlay?this._resolveSectionGlassSurface(this.footerBg):"none"),this._setVar("--_header-backdrop",this._effHeaderOverlay?c._composeBackdrop(this.headerBlur):"none"),this._setVar("--_footer-backdrop",this._effFooterOverlay?c._composeBackdrop(this.footerBlur):"none"),this._setVar("--_header-radius",i(this.headerRadius)),this._setVar("--_footer-radius",i(this.footerRadius)),this._setVar("--_header-inset-gap",c.SIZE_MAP[this.headerInsetGap]??this.headerInsetGap),this._setVar("--_footer-inset-gap",c.SIZE_MAP[this.footerInsetGap]??this.footerInsetGap)}refreshLayout(){this._computeEffectiveFlags(),this._applyCardVars(),this._applyPaddingVars(),this._applySectionChrome(),this._syncHeader(),this._syncFooter()}render(){const e="inline"===this.headerLayout?"row":"stack",t="inline"===this.footerLayout?"row":"stack",o=a({section:!0,[e]:!0,"overlay-top":!!this._effHeaderOverlay,inset:!!this._effHeaderInset}),s=a({section:!0,[t]:!0,"overlay-bottom":!!this._effFooterOverlay,inset:!!this._effFooterInset});return r`
       <div class="card" part="card">
         <div class=${o} part="header" id="hdr">
           <div class="main">
@@ -10,7 +10,7 @@ import{css as e,LitElement as t,html as r}from"lit";import{property as o,customE
 
         <slot></slot>
 
-        <div class=${a} part="footer" id="ftr">
+        <div class=${s} part="footer" id="ftr">
           <div class="main">
             <slot name="footer-title" id="slot-f-title"></slot>
             <slot name="footer-subtitle" id="slot-f-subtitle"></slot>
@@ -18,7 +18,7 @@ import{css as e,LitElement as t,html as r}from"lit";import{property as o,customE
           <slot name="footer-actions" id="slot-f-actions"></slot>
         </div>
       </div>
-    `}};p.BG_MAP={primary:"var(--sky-glass-primary)",secondary:"var(--sky-glass-secondary)",tertiary:"var(--sky-glass-tertiary)",transparent:"transparent"},p.BLUR_MAP={none:"none",xs:"blur(2px)",sm:"var(--sky-blur-secondary)",md:"var(--sky-blur-secondary)",lg:"var(--sky-blur-tertiary)"},p.SIZE_MAP={none:"0",sm:"var(--sky-space-1\\.5, 6px)",md:"var(--sky-space-4, 16px)",lg:"var(--sky-space-6, 24px)",xl:"var(--sky-space-8, 32px)"},p.GLASS_BG_TIERS=new Set(["primary","secondary","tertiary"]),p.SECTION_INSET_BG_MAP={primary:"var(--sky-hover-primary)",secondary:"var(--sky-hover-secondary)",tertiary:"var(--sky-hover-tertiary)",transparent:"transparent"},p.styles=e`
+    `}};c.BG_MAP={primary:"var(--sky-glass-primary)",secondary:"var(--sky-glass-secondary)",tertiary:"var(--sky-glass-tertiary)",transparent:"transparent"},c.BLUR_MAP={none:"none",xs:"blur(2px)",sm:"var(--sky-blur-secondary)",md:"var(--sky-blur-secondary)",lg:"var(--sky-blur-tertiary)"},c.SIZE_MAP={none:"0",sm:"var(--sky-space-1\\.5, 6px)",md:"var(--sky-space-4, 16px)",lg:"var(--sky-space-6, 24px)",xl:"var(--sky-space-8, 32px)"},c.GLASS_BG_TIERS=new Set(["primary","secondary","tertiary"]),c.SECTION_INSET_BG_MAP={primary:"var(--sky-hover-primary)",secondary:"var(--sky-hover-secondary)",tertiary:"var(--sky-hover-tertiary)",transparent:"transparent"},c.styles=e`
     :host {
       display: block;
     }
@@ -214,5 +214,5 @@ import{css as e,LitElement as t,html as r}from"lit";import{property as o,customE
         transition: none;
       }
     }
-  `,h([o({type:String,reflect:!0})],p.prototype,"bg",2),h([o({type:String,reflect:!0})],p.prototype,"blurLevel",2),h([o({type:String,reflect:!0})],p.prototype,"radius",2),h([o({type:String,reflect:!0})],p.prototype,"bodyPadding",2),h([o({type:String,reflect:!0})],p.prototype,"elevation",2),h([o({type:Boolean,reflect:!0})],p.prototype,"outlined",2),h([o({type:Boolean,reflect:!0})],p.prototype,"clickable",2),h([o({type:String,reflect:!0})],p.prototype,"headerBg",2),h([o({type:String,reflect:!0})],p.prototype,"headerBlur",2),h([o({type:String,reflect:!0})],p.prototype,"headerPadding",2),h([o({type:String})],p.prototype,"headerLayout",2),h([o({type:String,reflect:!0})],p.prototype,"headerInsetGap",2),h([o({type:String,reflect:!0})],p.prototype,"headerRadius",2),h([o({type:String})],p.prototype,"headerSeparatorColor",2),h([o({type:String,reflect:!0})],p.prototype,"footerBg",2),h([o({type:String,reflect:!0})],p.prototype,"footerBlur",2),h([o({type:String,reflect:!0})],p.prototype,"footerPadding",2),h([o({type:String})],p.prototype,"footerLayout",2),h([o({type:String,reflect:!0})],p.prototype,"footerInsetGap",2),h([o({type:String,reflect:!0})],p.prototype,"footerRadius",2),h([o({type:String})],p.prototype,"footerSeparatorColor",2),h([o({type:Number})],p.prototype,"padRatio",2),h([o({type:String})],p.prototype,"separators",2),h([o({type:String})],p.prototype,"overlays",2),h([o({type:String})],p.prototype,"insets",2),p=h([a("sky-card")],p);export{p as SkyCard};
+  `,h([o({type:String,reflect:!0})],c.prototype,"bg",2),h([o({type:String,reflect:!0})],c.prototype,"blurLevel",2),h([o({type:String,reflect:!0})],c.prototype,"radius",2),h([o({type:String,reflect:!0})],c.prototype,"bodyPadding",2),h([o({type:String,reflect:!0})],c.prototype,"elevation",2),h([o({type:Boolean,reflect:!0})],c.prototype,"outlined",2),h([o({type:Boolean,reflect:!0})],c.prototype,"clickable",2),h([o({type:String,reflect:!0})],c.prototype,"headerBg",2),h([o({type:String,reflect:!0})],c.prototype,"headerBlur",2),h([o({type:String,reflect:!0})],c.prototype,"headerPadding",2),h([o({type:String})],c.prototype,"headerLayout",2),h([o({type:String,reflect:!0})],c.prototype,"headerInsetGap",2),h([o({type:String,reflect:!0})],c.prototype,"headerRadius",2),h([o({type:String})],c.prototype,"headerSeparatorColor",2),h([o({type:String,reflect:!0})],c.prototype,"footerBg",2),h([o({type:String,reflect:!0})],c.prototype,"footerBlur",2),h([o({type:String,reflect:!0})],c.prototype,"footerPadding",2),h([o({type:String})],c.prototype,"footerLayout",2),h([o({type:String,reflect:!0})],c.prototype,"footerInsetGap",2),h([o({type:String,reflect:!0})],c.prototype,"footerRadius",2),h([o({type:String})],c.prototype,"footerSeparatorColor",2),h([o({type:Number})],c.prototype,"padRatio",2),h([o({type:String})],c.prototype,"separators",2),h([o({type:String})],c.prototype,"overlays",2),h([o({type:String})],c.prototype,"insets",2),h([o({type:String,reflect:!0})],c.prototype,"preset",2),c=h([s("sky-card")],c);export{c as SkyCard};
 //# sourceMappingURL=sky-card.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sky-card.js","sources":["../../src/sky-card/sky-card.ts"],"sourcesContent":["import { LitElement, html, css, PropertyValues } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { resolveRadius } from \"../helper/utils/size-resolver\";\nimport { resolveColor } from \"../helper/utils/color-resolver\";\n\nexport type SkyCardElevation = \"none\" | \"sm\" | \"md\" | \"lg\";\nexport type SkyCardSectionLayout = \"inline\" | \"stack\";\nexport type SkyCardSectionTarget = \"both\" | \"header\" | \"footer\" | \"none\";\n\n/**\n * @element sky-card\n *\n * @summary Customizable card with configurable header/footer sections, blur/background styles, elevation, insets, overlays, and separators.\n *\n * @status stable\n * @since 1.0.0\n *\n * @documentation https://library.sky-ui.com/components/card\n *\n * @slot - Default slot for the card body content (replaces `bodyPadding` property if used).\n * @slot title - Slot for the card title.\n * @slot subtitle - Slot for the card subtitle.\n * @slot actions - Slot for the card actions (usually buttons).\n * @slot footer-title - Slot for the footer title.\n * @slot footer-subtitle - Slot for the footer subtitle.\n * @slot footer-actions - Slot for the footer actions (usually buttons).\n *\n * @csspart card - The main card container element.\n * @csspart header - The card header section.\n * @csspart footer - The card footer section.\n * @csspart ripple - The ripple animation element injected when the card is clicked.\n *\n * @property {string} bg - Background color of the card. Accepts color tokens or custom CSS colors. Default: `\"primary\"`.\n * @property {string} blurLevel - Level of blur applied to the background. Default: `\"none\"`.\n * @property {string} radius - Border radius of the card. Default: `\"md\"`.\n * @property {string} bodyPadding - Padding for the card body. Default: `\"none\"`.\n * @property {SkyCardElevation} elevation - Shadow depth of the card. Default: `\"md\"`.\n * @property {boolean} outlined - Whether the card has an outline. Default: `false`.\n * @property {boolean} clickable - Whether the card is clickable. Default: `false`.\n * @property {string} headerBg - Background color of the header. Default: `\"transparent\"`.\n * @property {string} headerBlur - Blur level for the header background. Default: `\"none\"`.\n * @property {string} headerPadding - Padding for the header. Default: `\"md\"`.\n * @property {SkyCardSectionLayout} headerLayout - Layout of the header content. Default: `\"inline\"`.\n * @property {string} headerInsetGap - Inset gap for the header section. Default: `\"sm\"`.\n * @property {string} headerRadius - Border radius for the header. Default: `\"md\"`.\n * @property {string} headerSeparatorColor - Color for the header separator. Default: `\"border-light\"`.\n * @property {string} footerBg - Background color of the footer. Default: `\"transparent\"`.\n * @property {string} footerBlur - Blur level for the footer background. Default: `\"none\"`.\n * @property {string} footerPadding - Padding for the footer. Default: `\"md\"`.\n * @property {SkyCardSectionLayout} footerLayout - Layout of the footer content. Default: `\"inline\"`.\n * @property {string} footerInsetGap - Inset gap for the footer section. Default: `\"sm\"`.\n * @property {string} footerRadius - Border radius for the footer. Default: `\"md\"`.\n * @property {string} footerSeparatorColor - Color for the footer separator. Default: `\"border-light\"`.\n * @property {number} padRatio - Ratio to adjust padding. Default: `1`.\n * @property {SkyCardSectionTarget} separators - Determines where separators should appear. Default: `\"none\"`.\n * @property {SkyCardSectionTarget} overlays - Determines where overlays should appear. Default: `\"none\"`.\n * @property {SkyCardSectionTarget} insets - Determines where insets should appear. Default: `\"none\"`.\n * @method refreshLayout Recomputes card variables and section synchronization.\n *\n * @example\n * ```html\n * <sky-card bg=\"primary\" elevation=\"lg\" headerpadding=\"md\">\n *   <span slot=\"title\">Monthly Report</span>\n *   <span slot=\"subtitle\">April 2026</span>\n *   <div>Total revenue increased by 18%.</div>\n *   <button slot=\"actions\">View Details</button>\n * </sky-card>\n * ```\n * ```vue\n * <template>\n *   <sky-card bg=\"primary\" elevation=\"lg\" headerpadding=\"md\">\n *     <span slot=\"title\">Monthly Report</span>\n *     <span slot=\"subtitle\">April 2026</span>\n *     <div>Total revenue increased by 18%.</div>\n *     <button slot=\"actions\">View Details</button>\n *   </sky-card>\n * </template>\n * ```\n * ```jsx\n * export default function Demo() {\n *   return (\n *     <sky-card bg=\"primary\" elevation=\"lg\" headerpadding=\"md\">\n *       <span slot=\"title\">Monthly Report</span>\n *       <span slot=\"subtitle\">April 2026</span>\n *       <div>Total revenue increased by 18%.</div>\n *       <button slot=\"actions\">View Details</button>\n *     </sky-card>\n *   );\n * }\n * ```\n */\n@customElement(\"sky-card\")\nexport class SkyCard extends LitElement {\n  @property({ type: String, reflect: true }) bg = \"primary\";\n  @property({ type: String, reflect: true }) blurLevel = \"none\";\n  @property({ type: String, reflect: true }) radius = \"md\";\n  @property({ type: String, reflect: true }) bodyPadding = \"none\";\n  @property({ type: String, reflect: true }) elevation: SkyCardElevation = \"md\";\n  @property({ type: Boolean, reflect: true }) outlined = false;\n  @property({ type: Boolean, reflect: true }) clickable = false;\n\n  @property({ type: String, reflect: true }) headerBg =\n    \"transparent\";\n  @property({ type: String, reflect: true })\n  headerBlur = \"none\";\n  @property({ type: String, reflect: true })\n  headerPadding = \"md\";\n  @property({ type: String }) headerLayout: SkyCardSectionLayout = \"inline\";\n  @property({ type: String, reflect: true })\n  headerInsetGap = \"sm\";\n  @property({ type: String, reflect: true })\n  headerRadius = \"md\";\n  @property({ type: String })\n  headerSeparatorColor = \"border-light\";\n\n  @property({ type: String, reflect: true }) footerBg =\n    \"transparent\";\n  @property({ type: String, reflect: true })\n  footerBlur = \"none\";\n  @property({ type: String, reflect: true })\n  footerPadding = \"md\";\n  @property({ type: String }) footerLayout: SkyCardSectionLayout = \"inline\";\n  @property({ type: String, reflect: true })\n  footerInsetGap = \"sm\";\n  @property({ type: String, reflect: true })\n  footerRadius = \"md\";\n  @property({ type: String })\n  footerSeparatorColor = \"border-light\";\n\n  @property({ type: Number }) padRatio = 1;\n\n  @property({ type: String }) separators: SkyCardSectionTarget = \"none\";\n  @property({ type: String }) overlays: SkyCardSectionTarget = \"none\";\n  @property({ type: String }) insets: SkyCardSectionTarget = \"none\";\n\n  private _effHeaderSeparator = false;\n  private _effFooterSeparator = false;\n  private _effHeaderOverlay = false;\n  private _effFooterOverlay = false;\n  private _effHeaderInset = false;\n  private _effFooterInset = false;\n  private _varsCache: Record<string, string> = {};\n\n  private static readonly BG_MAP = {\n    primary: \"var(--sky-glass-primary)\",\n    secondary: \"var(--sky-glass-secondary)\",\n    tertiary: \"var(--sky-glass-tertiary)\",\n    transparent: \"transparent\",\n  } as const;\n\n  private static readonly BLUR_MAP = {\n    none: \"none\",\n    xs: \"blur(2px)\",\n    sm: \"var(--sky-blur-secondary)\",\n    md: \"var(--sky-blur-secondary)\",\n    lg: \"var(--sky-blur-tertiary)\",\n  } as const;\n\n  private static readonly SIZE_MAP = {\n    none: \"0\",\n    sm: \"var(--sky-space-1\\\\.5, 6px)\",\n    md: \"var(--sky-space-4, 16px)\",\n    lg: \"var(--sky-space-6, 24px)\",\n    xl: \"var(--sky-space-8, 32px)\",\n  } as const;\n\n  private static readonly GLASS_BG_TIERS = new Set([\n    \"primary\",\n    \"secondary\",\n    \"tertiary\",\n  ]);\n\n  /** Non-overlay inset bars use hover tints — overlay sections own their own blur. */\n  private static readonly SECTION_INSET_BG_MAP = {\n    primary: \"var(--sky-hover-primary)\",\n    secondary: \"var(--sky-hover-secondary)\",\n    tertiary: \"var(--sky-hover-tertiary)\",\n    transparent: \"transparent\",\n  } as const;\n\n  private static _composeBackdrop(blurLevel: string): string {\n    const blur =\n      SkyCard.BLUR_MAP[blurLevel as keyof typeof SkyCard.BLUR_MAP] ?? blurLevel;\n    if (blur === \"none\") return \"none\";\n    return `${blur} var(--sky-saturation-secondary) var(--sky-brightness-secondary)`;\n  }\n\n  private static _composeElevation(level: SkyCardElevation | string): string {\n    const depthMap: Record<SkyCardElevation, string | null> = {\n      none: null,\n      sm: \"var(--sky-box-shadow-primary)\",\n      md: \"var(--sky-box-shadow-secondary)\",\n      lg: \"var(--sky-box-shadow-tertiary)\",\n    };\n    const depth = depthMap[level as SkyCardElevation];\n    if (depth === null) return \"none\";\n    if (depth === undefined) return level;\n    return `var(--sky-box-shadow-inset), ${depth}`;\n  }\n\n  static styles = css`\n    :host {\n      display: block;\n    }\n\n    .card {\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n      position: relative;\n      overflow: hidden;\n      box-sizing: border-box;\n      color: var(--sky-text-primary);\n      background: var(--_card-bg, var(--sky-glass-primary));\n      background-image: var(--_card-glass-surface, var(--sky-glass-surface));\n      border-radius: var(--_card-radius, var(--sky-radius-secondary));\n      backdrop-filter: var(--_card-backdrop, none);\n      -webkit-backdrop-filter: var(--_card-backdrop, none);\n      box-shadow: var(\n        --_card-shadow,\n        var(--sky-box-shadow-inset),\n        var(--sky-box-shadow-primary)\n      );\n      border: var(--_card-border, var(--sky-border-primary));\n      transition: var(--sky-transition-default);\n    }\n\n    :host([outlined]) .card {\n      box-shadow: none;\n      border: var(--sky-border-primary);\n    }\n    :host([clickable]) .card {\n      cursor: pointer;\n    }\n    :host([clickable]) .card:hover {\n      box-shadow: var(\n        --_card-shadow-hover,\n        var(--sky-box-shadow-inset),\n        var(--sky-box-shadow-hover)\n      );\n    }\n\n    .section {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--sky-space-1\\\\.5, 6px);\n      box-sizing: border-box;\n      min-width: 0;\n      background: transparent;\n      backdrop-filter: none;\n      -webkit-backdrop-filter: none;\n    }\n    .section.stack {\n      flex-direction: column;\n      align-items: stretch;\n      gap: var(--sky-space-1\\\\.5, 6px);\n    }\n    .section.row {\n      flex-direction: row;\n    }\n\n    .overlay-top {\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      z-index: 1;\n    }\n    .overlay-bottom {\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      z-index: 1;\n    }\n\n    .inset {\n      overflow: hidden;\n      box-shadow: none;\n    }\n    .section.inset[part=\"header\"] {\n      border: var(--_header-inset-border, 0 solid transparent);\n      border-radius: var(--_header-radius, var(--sky-radius-secondary));\n    }\n    .section.inset[part=\"footer\"] {\n      border: var(--_footer-inset-border, 0 solid transparent);\n      border-radius: var(--_footer-radius, var(--sky-radius-secondary));\n    }\n    .overlay-top.inset {\n      top: var(--_header-inset-gap, var(--sky-space-2, 8px));\n      left: var(--_header-inset-gap, var(--sky-space-2, 8px));\n      right: var(--_header-inset-gap, var(--sky-space-2, 8px));\n    }\n    .overlay-bottom.inset {\n      bottom: var(--_footer-inset-gap, var(--sky-space-2, 8px));\n      left: var(--_footer-inset-gap, var(--sky-space-2, 8px));\n      right: var(--_footer-inset-gap, var(--sky-space-2, 8px));\n    }\n\n    .section[part=\"header\"]:has(slot:not([empty])),\n    .section[part=\"header\"][has-content] {\n      background: var(--_header-bg);\n      background-image: var(--_header-glass-surface, none);\n      padding-block: var(--_header-pad-y, var(--sky-space-3, 12px));\n      padding-inline: var(--_header-pad-x, var(--sky-space-4, 16px));\n    }\n    .section[part=\"footer\"]:has(slot:not([empty])),\n    .section[part=\"footer\"][has-content] {\n      background: var(--_footer-bg);\n      background-image: var(--_footer-glass-surface, none);\n      padding-block: var(--_footer-pad-y, var(--sky-space-3, 12px));\n      padding-inline: var(--_footer-pad-x, var(--sky-space-4, 16px));\n    }\n\n    .section[part=\"header\"].overlay-top:has(slot:not([empty])),\n    .section[part=\"header\"].overlay-top[has-content] {\n      backdrop-filter: var(--_header-backdrop, none);\n      -webkit-backdrop-filter: var(--_header-backdrop, none);\n    }\n    .section[part=\"footer\"].overlay-bottom:has(slot:not([empty])),\n    .section[part=\"footer\"].overlay-bottom[has-content] {\n      backdrop-filter: var(--_footer-backdrop, none);\n      -webkit-backdrop-filter: var(--_footer-backdrop, none);\n    }\n\n    .section[part=\"header\"]:not(.inset):has(slot:not([empty])),\n    .section[part=\"header\"]:not(.inset)[has-content] {\n      border-bottom: var(--_header-separator, 0px) solid\n        var(--_header-separator-color, var(--sky-border-light));\n    }\n    .section[part=\"footer\"]:not(.inset):has(slot:not([empty])),\n    .section[part=\"footer\"]:not(.inset)[has-content] {\n      border-top: var(--_footer-separator, 0px) solid\n        var(--_footer-separator-color, var(--sky-border-light));\n    }\n\n    ::slotted(:not([slot])) {\n      box-sizing: border-box;\n      padding-block: var(--_body-pad-y, var(--sky-space-3, 12px));\n      padding-inline: var(--_body-pad-x, var(--sky-space-4, 16px));\n    }\n    slot[empty] {\n      display: none;\n    }\n\n    ::slotted([slot=\"title\"]) {\n      font-size: var(--sky-font-size-lg, 18px);\n      font-weight: var(--sky-font-weight-semibold, 600);\n      margin: 0;\n      color: var(--sky-text-primary);\n      text-align: start;\n      text-shadow: var(--sky-text-shadow-on-glass, none);\n    }\n    ::slotted([slot=\"subtitle\"]) {\n      font-size: var(--sky-font-size-sm, 14px);\n      margin: 0;\n      color: var(--sky-text-secondary);\n      text-align: start;\n      text-shadow: var(--sky-text-shadow-on-glass, none);\n    }\n    ::slotted([slot=\"actions\"]) {\n      display: inline-flex;\n      gap: var(--sky-space-1\\\\.5, 6px);\n      align-items: center;\n      margin-left: auto;\n    }\n    ::slotted([slot=\"footer-title\"]) {\n      font-size: var(--sky-font-size-md, 16px);\n      font-weight: var(--sky-font-weight-medium, 500);\n      margin: 0;\n      color: var(--sky-text-primary);\n      text-align: start;\n    }\n    ::slotted([slot=\"footer-subtitle\"]) {\n      font-size: var(--sky-font-size-xs, 12px);\n      margin: 0;\n      color: var(--sky-text-secondary);\n      text-align: start;\n    }\n    ::slotted([slot=\"footer-actions\"]) {\n      display: inline-flex;\n      gap: var(--sky-space-1\\\\.5, 6px);\n      align-items: center;\n      margin-left: auto;\n    }\n\n    .main {\n      width: 100%;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .card {\n        transition: none;\n      }\n    }\n  `;\n\n  override firstUpdated(): void {\n    this._wireSlotChangeHandlers();\n\n    this._syncHeader();\n    this._syncFooter();\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    if (\n      changed.has(\"separators\") ||\n      changed.has(\"overlays\") ||\n      changed.has(\"insets\")\n    ) {\n      this._computeEffectiveFlags();\n    }\n\n    if (\n      changed.has(\"bg\") ||\n      changed.has(\"blurLevel\") ||\n      changed.has(\"radius\") ||\n      changed.has(\"elevation\")\n    ) {\n      this._applyCardVars();\n    }\n    if (\n      changed.has(\"headerPadding\") ||\n      changed.has(\"bodyPadding\") ||\n      changed.has(\"footerPadding\") ||\n      changed.has(\"padRatio\")\n    ) {\n      this._applyPaddingVars();\n    }\n    if (\n      changed.has(\"headerBg\") ||\n      changed.has(\"footerBg\") ||\n      changed.has(\"headerBlur\") ||\n      changed.has(\"footerBlur\") ||\n      changed.has(\"headerRadius\") ||\n      changed.has(\"footerRadius\") ||\n      changed.has(\"headerInsetGap\") ||\n      changed.has(\"footerInsetGap\") ||\n      changed.has(\"headerSeparatorColor\") ||\n      changed.has(\"footerSeparatorColor\") ||\n      changed.has(\"separators\") ||\n      changed.has(\"insets\") ||\n      changed.has(\"overlays\")\n    ) {\n      this._applySectionChrome();\n    }\n  }\n\n  private _wireSlotChangeHandlers(): void {\n    this.renderRoot\n      .querySelector(\"#slot-title\")\n      ?.addEventListener(\"slotchange\", () => this._syncHeader());\n    this.renderRoot\n      .querySelector(\"#slot-subtitle\")\n      ?.addEventListener(\"slotchange\", () => this._syncHeader());\n    this.renderRoot\n      .querySelector(\"#slot-actions\")\n      ?.addEventListener(\"slotchange\", () => this._syncHeader());\n\n    this.renderRoot\n      .querySelector(\"#slot-f-title\")\n      ?.addEventListener(\"slotchange\", () => this._syncFooter());\n    this.renderRoot\n      .querySelector(\"#slot-f-subtitle\")\n      ?.addEventListener(\"slotchange\", () => this._syncFooter());\n    this.renderRoot\n      .querySelector(\"#slot-f-actions\")\n      ?.addEventListener(\"slotchange\", () => this._syncFooter());\n  }\n\n  private _syncHeader(): void {\n    const hdr = this.renderRoot.querySelector(\"#hdr\");\n    const slots = [\n      this.renderRoot.querySelector(\"#slot-title\") as HTMLSlotElement | null,\n      this.renderRoot.querySelector(\"#slot-subtitle\") as HTMLSlotElement | null,\n      this.renderRoot.querySelector(\"#slot-actions\") as HTMLSlotElement | null,\n    ].filter(Boolean) as HTMLSlotElement[];\n\n    const has = slots.some(\n      (s) => s.assignedNodes({ flatten: true }).length > 0\n    );\n    hdr?.toggleAttribute(\"has-content\", has);\n\n    slots.forEach((s) =>\n      s.toggleAttribute(\n        \"empty\",\n        s.assignedNodes({ flatten: true }).length === 0\n      )\n    );\n  }\n\n  private _syncFooter(): void {\n    const ftr = this.renderRoot.querySelector(\"#ftr\");\n    const slots = [\n      this.renderRoot.querySelector(\"#slot-f-title\") as HTMLSlotElement | null,\n      this.renderRoot.querySelector(\n        \"#slot-f-subtitle\"\n      ) as HTMLSlotElement | null,\n      this.renderRoot.querySelector(\n        \"#slot-f-actions\"\n      ) as HTMLSlotElement | null,\n    ].filter(Boolean) as HTMLSlotElement[];\n\n    const has = slots.some(\n      (s) => s.assignedNodes({ flatten: true }).length > 0\n    );\n    ftr?.toggleAttribute(\"has-content\", has);\n    slots.forEach((s) =>\n      s.toggleAttribute(\n        \"empty\",\n        s.assignedNodes({ flatten: true }).length === 0\n      )\n    );\n  }\n\n  private _expandPair(sh: SkyCardSectionTarget): [boolean, boolean] {\n    switch (sh) {\n      case \"both\":\n        return [true, true];\n      case \"header\":\n        return [true, false];\n      case \"footer\":\n        return [false, true];\n      case \"none\":\n      default:\n        return [false, false];\n    }\n  }\n\n  private _computeEffectiveFlags(): void {\n    [this._effHeaderSeparator, this._effFooterSeparator] = this._expandPair(\n      this.separators\n    );\n    [this._effHeaderOverlay, this._effFooterOverlay] = this._expandPair(\n      this.overlays\n    );\n    [this._effHeaderInset, this._effFooterInset] = this._expandPair(\n      this.insets\n    );\n  }\n\n  private _setVar(name: string, value: string): void {\n    if (this._varsCache[name] === value) return;\n    this.style.setProperty(name, value);\n    this._varsCache[name] = value;\n  }\n\n  private _resolveSectionBg(\n    token: string,\n    isInset: boolean,\n    isOverlay: boolean\n  ): string {\n    if (isInset && !isOverlay) {\n      return (\n        SkyCard.SECTION_INSET_BG_MAP[\n          token as keyof typeof SkyCard.SECTION_INSET_BG_MAP\n        ] ?? token\n      );\n    }\n    return SkyCard.BG_MAP[token as keyof typeof SkyCard.BG_MAP] ?? token;\n  }\n\n  private _resolveSectionGlassSurface(token: string): string {\n    return SkyCard.GLASS_BG_TIERS.has(token)\n      ? \"var(--sky-glass-surface)\"\n      : \"none\";\n  }\n\n  private _applyCardVars(): void {\n    this._setVar(\n      \"--_card-bg\",\n      SkyCard.BG_MAP[this.bg as keyof typeof SkyCard.BG_MAP] ?? this.bg\n    );\n    this._setVar(\n      \"--_card-glass-surface\",\n      SkyCard.GLASS_BG_TIERS.has(this.bg)\n        ? \"var(--sky-glass-surface)\"\n        : \"none\"\n    );\n\n    this._setVar(\n      \"--_card-backdrop\",\n      SkyCard._composeBackdrop(this.blurLevel)\n    );\n\n    this._setVar(\"--_card-radius\", resolveRadius(this.radius));\n    this._setVar(\n      \"--_card-shadow\",\n      SkyCard._composeElevation(this.elevation)\n    );\n    this._setVar(\n      \"--_card-shadow-hover\",\n      \"var(--sky-box-shadow-inset), var(--sky-box-shadow-hover)\"\n    );\n  }\n\n  private _applyPaddingVars(): void {\n    const h =\n      SkyCard.SIZE_MAP[this.headerPadding as keyof typeof SkyCard.SIZE_MAP] ??\n      this.headerPadding;\n    const b =\n      SkyCard.SIZE_MAP[this.bodyPadding as keyof typeof SkyCard.SIZE_MAP] ??\n      this.bodyPadding;\n    const f =\n      SkyCard.SIZE_MAP[this.footerPadding as keyof typeof SkyCard.SIZE_MAP] ??\n      this.footerPadding;\n\n    const ratio = Number.isFinite(this.padRatio)\n      ? Math.max(0, this.padRatio)\n      : 1;\n\n    this._setVar(\"--_header-pad-y\", h);\n    this._setVar(\"--_header-pad-x\", `calc(${h} * ${ratio})`);\n\n    this._setVar(\"--_body-pad-y\", b);\n    this._setVar(\"--_body-pad-x\", `calc(${b} * ${ratio})`);\n\n    this._setVar(\"--_footer-pad-y\", f);\n    this._setVar(\"--_footer-pad-x\", `calc(${f} * ${ratio})`);\n  }\n\n  private _applySectionChrome(): void {\n    const headerSep = this._effHeaderInset\n      ? \"0px\"\n      : this._effHeaderSeparator\n        ? \"1px\"\n        : \"0px\";\n    const footerSep = this._effFooterInset\n      ? \"0px\"\n      : this._effFooterSeparator\n        ? \"1px\"\n        : \"0px\";\n    this._setVar(\"--_header-separator\", headerSep);\n    this._setVar(\"--_footer-separator\", footerSep);\n\n    this._setVar(\"--_header-separator-color\", resolveColor(this.headerSeparatorColor));\n    this._setVar(\"--_footer-separator-color\", resolveColor(this.footerSeparatorColor));\n\n    const headerInsetBorder =\n      this._effHeaderInset && this._effHeaderSeparator\n        ? \"1px solid var(--sky-border-light)\"\n        : \"0 solid transparent\";\n    const footerInsetBorder =\n      this._effFooterInset && this._effFooterSeparator\n        ? \"1px solid var(--sky-border-light)\"\n        : \"0 solid transparent\";\n    this._setVar(\"--_header-inset-border\", headerInsetBorder);\n    this._setVar(\"--_footer-inset-border\", footerInsetBorder);\n\n    this._setVar(\n      \"--_header-bg\",\n      this._resolveSectionBg(\n        this.headerBg,\n        this._effHeaderInset,\n        this._effHeaderOverlay\n      )\n    );\n    this._setVar(\n      \"--_footer-bg\",\n      this._resolveSectionBg(\n        this.footerBg,\n        this._effFooterInset,\n        this._effFooterOverlay\n      )\n    );\n    this._setVar(\n      \"--_header-glass-surface\",\n      this._effHeaderOverlay\n        ? this._resolveSectionGlassSurface(this.headerBg)\n        : \"none\"\n    );\n    this._setVar(\n      \"--_footer-glass-surface\",\n      this._effFooterOverlay\n        ? this._resolveSectionGlassSurface(this.footerBg)\n        : \"none\"\n    );\n    this._setVar(\n      \"--_header-backdrop\",\n      this._effHeaderOverlay\n        ? SkyCard._composeBackdrop(this.headerBlur)\n        : \"none\"\n    );\n    this._setVar(\n      \"--_footer-backdrop\",\n      this._effFooterOverlay\n        ? SkyCard._composeBackdrop(this.footerBlur)\n        : \"none\"\n    );\n\n    this._setVar(\n      \"--_header-radius\",\n      resolveRadius(this.headerRadius)\n    );\n    this._setVar(\n      \"--_footer-radius\",\n      resolveRadius(this.footerRadius)\n    );\n    this._setVar(\n      \"--_header-inset-gap\",\n      SkyCard.SIZE_MAP[this.headerInsetGap as keyof typeof SkyCard.SIZE_MAP] ??\n      this.headerInsetGap\n    );\n    this._setVar(\n      \"--_footer-inset-gap\",\n      SkyCard.SIZE_MAP[this.footerInsetGap as keyof typeof SkyCard.SIZE_MAP] ??\n      this.footerInsetGap\n    );\n  }\n  /**\n   * Recomputes card variables and section synchronization.\n   *\n   * @returns {void}\n   */\n  public refreshLayout(): void {\n    this._computeEffectiveFlags();\n    this._applyCardVars();\n    this._applyPaddingVars();\n    this._applySectionChrome();\n    this._syncHeader();\n    this._syncFooter();\n  }\n\n  override render() {\n    const headerLayoutClass = this.headerLayout === \"inline\" ? \"row\" : \"stack\";\n    const footerLayoutClass = this.footerLayout === \"inline\" ? \"row\" : \"stack\";\n    const headerClasses = classMap({\n      section: true,\n      [headerLayoutClass]: true,\n      \"overlay-top\": !!this._effHeaderOverlay,\n      inset: !!this._effHeaderInset,\n    });\n    const footerClasses = classMap({\n      section: true,\n      [footerLayoutClass]: true,\n      \"overlay-bottom\": !!this._effFooterOverlay,\n      inset: !!this._effFooterInset,\n    });\n\n    return html`\n      <div class=\"card\" part=\"card\">\n        <div class=${headerClasses} part=\"header\" id=\"hdr\">\n          <div class=\"main\">\n            <slot name=\"title\" id=\"slot-title\"></slot>\n            <slot name=\"subtitle\" id=\"slot-subtitle\"></slot>\n          </div>\n          <slot name=\"actions\" id=\"slot-actions\"></slot>\n        </div>\n\n        <slot></slot>\n\n        <div class=${footerClasses} part=\"footer\" id=\"ftr\">\n          <div class=\"main\">\n            <slot name=\"footer-title\" id=\"slot-f-title\"></slot>\n            <slot name=\"footer-subtitle\" id=\"slot-f-subtitle\"></slot>\n          </div>\n          <slot name=\"footer-actions\" id=\"slot-f-actions\"></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["SkyCard","LitElement","constructor","super","arguments","this","bg","blurLevel","radius","bodyPadding","elevation","outlined","clickable","headerBg","headerBlur","headerPadding","headerLayout","headerInsetGap","headerRadius","headerSeparatorColor","footerBg","footerBlur","footerPadding","footerLayout","footerInsetGap","footerRadius","footerSeparatorColor","padRatio","separators","overlays","insets","_effHeaderSeparator","_effFooterSeparator","_effHeaderOverlay","_effFooterOverlay","_effHeaderInset","_effFooterInset","_varsCache","_composeBackdrop","blur","BLUR_MAP","_composeElevation","level","depth","none","sm","md","lg","firstUpdated","_wireSlotChangeHandlers","_syncHeader","_syncFooter","willUpdate","changed","has","_computeEffectiveFlags","_applyCardVars","_applyPaddingVars","_applySectionChrome","renderRoot","querySelector","addEventListener","hdr","slots","filter","Boolean","some","s","assignedNodes","flatten","length","toggleAttribute","forEach","ftr","_expandPair","sh","_setVar","name","value","style","setProperty","_resolveSectionBg","token","isInset","isOverlay","SECTION_INSET_BG_MAP","BG_MAP","_resolveSectionGlassSurface","GLASS_BG_TIERS","resolveRadius","h","SIZE_MAP","b","f","ratio","Number","isFinite","Math","max","headerSep","footerSep","resolveColor","headerInsetBorder","footerInsetBorder","refreshLayout","render","headerLayoutClass","footerLayoutClass","headerClasses","classMap","section","inset","footerClasses","html","primary","secondary","tertiary","transparent","xs","xl","Set","styles","css","__decorateClass","property","type","String","reflect","prototype","customElement"],"mappings":"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"}
+{"version":3,"file":"sky-card.js","sources":["../../src/sky-card/sky-card.ts"],"sourcesContent":["import { LitElement, html, css, PropertyValues } from \"lit\";\r\nimport { customElement, property } from \"lit/decorators.js\";\r\nimport { classMap } from \"lit/directives/class-map.js\";\r\nimport { resolveRadius } from \"../helper/utils/size-resolver\";\r\nimport { resolveColor } from \"../helper/utils/color-resolver\";\r\nimport { PresetController } from \"../helper/controllers/preset-controller\";\r\n\r\nexport type SkyCardElevation = \"none\" | \"sm\" | \"md\" | \"lg\";\r\nexport type SkyCardSectionLayout = \"inline\" | \"stack\";\r\nexport type SkyCardSectionTarget = \"both\" | \"header\" | \"footer\" | \"none\";\r\n\r\n/**\r\n * @element sky-card\r\n *\r\n * @summary Customizable card with configurable header/footer sections, blur/background styles, elevation, insets, overlays, and separators.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://sky-ui.com/components/card\r\n *\r\n * @slot - Default slot for the card body content (replaces `bodyPadding` property if used).\r\n * @slot title - Slot for the card title.\r\n * @slot subtitle - Slot for the card subtitle.\r\n * @slot actions - Slot for the card actions (usually buttons).\r\n * @slot footer-title - Slot for the footer title.\r\n * @slot footer-subtitle - Slot for the footer subtitle.\r\n * @slot footer-actions - Slot for the footer actions (usually buttons).\r\n *\r\n * @csspart card - The main card container element.\r\n * @csspart header - The card header section.\r\n * @csspart footer - The card footer section.\r\n * @csspart ripple - The ripple animation element injected when the card is clicked.\r\n *\r\n * @property {string} bg - Background color of the card. Accepts color tokens or custom CSS colors. Default: `\"primary\"`.\r\n * @property {string} blurLevel - Level of blur applied to the background. Default: `\"none\"`.\r\n * @property {string} radius - Border radius of the card. Default: `\"md\"`.\r\n * @property {string} bodyPadding - Padding for the card body. Default: `\"none\"`.\r\n * @property {SkyCardElevation} elevation - Shadow depth of the card. Default: `\"md\"`.\r\n * @property {boolean} outlined - Whether the card has an outline. Default: `false`.\r\n * @property {boolean} clickable - Whether the card is clickable. Default: `false`.\r\n * @property {string} headerBg - Background color of the header. Default: `\"transparent\"`.\r\n * @property {string} headerBlur - Blur level for the header background. Default: `\"none\"`.\r\n * @property {string} headerPadding - Padding for the header. Default: `\"md\"`.\r\n * @property {SkyCardSectionLayout} headerLayout - Layout of the header content. Default: `\"inline\"`.\r\n * @property {string} headerInsetGap - Inset gap for the header section. Default: `\"sm\"`.\r\n * @property {string} headerRadius - Border radius for the header. Default: `\"md\"`.\r\n * @property {string} headerSeparatorColor - Color for the header separator. Default: `\"border-light\"`.\r\n * @property {string} footerBg - Background color of the footer. Default: `\"transparent\"`.\r\n * @property {string} footerBlur - Blur level for the footer background. Default: `\"none\"`.\r\n * @property {string} footerPadding - Padding for the footer. Default: `\"md\"`.\r\n * @property {SkyCardSectionLayout} footerLayout - Layout of the footer content. Default: `\"inline\"`.\r\n * @property {string} footerInsetGap - Inset gap for the footer section. Default: `\"sm\"`.\r\n * @property {string} footerRadius - Border radius for the footer. Default: `\"md\"`.\r\n * @property {string} footerSeparatorColor - Color for the footer separator. Default: `\"border-light\"`.\r\n * @property {number} padRatio - Ratio to adjust padding. Default: `1`.\r\n * @property {SkyCardSectionTarget} separators - Determines where separators should appear. Default: `\"none\"`.\r\n * @property {SkyCardSectionTarget} overlays - Determines where overlays should appear. Default: `\"none\"`.\r\n * @property {SkyCardSectionTarget} insets - Determines where insets should appear. Default: `\"none\"`.\r\n * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.\r\n * @method refreshLayout Recomputes card variables and section synchronization.\r\n *\r\n * @example\r\n * ```html\r\n * <sky-card bg=\"primary\" elevation=\"lg\" headerpadding=\"md\">\r\n *   <span slot=\"title\">Monthly Report</span>\r\n *   <span slot=\"subtitle\">April 2026</span>\r\n *   <div>Total revenue increased by 18%.</div>\r\n *   <button slot=\"actions\">View Details</button>\r\n * </sky-card>\r\n * ```\r\n * ```vue\r\n * <template>\r\n *   <sky-card bg=\"primary\" elevation=\"lg\" headerpadding=\"md\">\r\n *     <span slot=\"title\">Monthly Report</span>\r\n *     <span slot=\"subtitle\">April 2026</span>\r\n *     <div>Total revenue increased by 18%.</div>\r\n *     <button slot=\"actions\">View Details</button>\r\n *   </sky-card>\r\n * </template>\r\n * ```\r\n * ```jsx\r\n * export default function Demo() {\r\n *   return (\r\n *     <sky-card bg=\"primary\" elevation=\"lg\" headerpadding=\"md\">\r\n *       <span slot=\"title\">Monthly Report</span>\r\n *       <span slot=\"subtitle\">April 2026</span>\r\n *       <div>Total revenue increased by 18%.</div>\r\n *       <button slot=\"actions\">View Details</button>\r\n *     </sky-card>\r\n *   );\r\n * }\r\n * ```\r\n */\r\n@customElement(\"sky-card\")\r\nexport class SkyCard extends LitElement {\r\n  @property({ type: String, reflect: true }) bg = \"primary\";\r\n  @property({ type: String, reflect: true }) blurLevel = \"none\";\r\n  @property({ type: String, reflect: true }) radius = \"md\";\r\n  @property({ type: String, reflect: true }) bodyPadding = \"none\";\r\n  @property({ type: String, reflect: true }) elevation: SkyCardElevation = \"md\";\r\n  @property({ type: Boolean, reflect: true }) outlined = false;\r\n  @property({ type: Boolean, reflect: true }) clickable = false;\r\n\r\n  @property({ type: String, reflect: true }) headerBg =\r\n    \"transparent\";\r\n  @property({ type: String, reflect: true })\r\n  headerBlur = \"none\";\r\n  @property({ type: String, reflect: true })\r\n  headerPadding = \"md\";\r\n  @property({ type: String }) headerLayout: SkyCardSectionLayout = \"inline\";\r\n  @property({ type: String, reflect: true })\r\n  headerInsetGap = \"sm\";\r\n  @property({ type: String, reflect: true })\r\n  headerRadius = \"md\";\r\n  @property({ type: String })\r\n  headerSeparatorColor = \"border-light\";\r\n\r\n  @property({ type: String, reflect: true }) footerBg =\r\n    \"transparent\";\r\n  @property({ type: String, reflect: true })\r\n  footerBlur = \"none\";\r\n  @property({ type: String, reflect: true })\r\n  footerPadding = \"md\";\r\n  @property({ type: String }) footerLayout: SkyCardSectionLayout = \"inline\";\r\n  @property({ type: String, reflect: true })\r\n  footerInsetGap = \"sm\";\r\n  @property({ type: String, reflect: true })\r\n  footerRadius = \"md\";\r\n  @property({ type: String })\r\n  footerSeparatorColor = \"border-light\";\r\n\r\n  @property({ type: Number }) padRatio = 1;\r\n\r\n  @property({ type: String }) separators: SkyCardSectionTarget = \"none\";\r\n  @property({ type: String }) overlays: SkyCardSectionTarget = \"none\";\r\n  @property({ type: String }) insets: SkyCardSectionTarget = \"none\";\r\n\r\n  private _effHeaderSeparator = false;\r\n  private _effFooterSeparator = false;\r\n  private _effHeaderOverlay = false;\r\n  private _effFooterOverlay = false;\r\n  private _effHeaderInset = false;\r\n  private _effFooterInset = false;\r\n  private _varsCache: Record<string, string> = {};\r\n\r\n  private static readonly BG_MAP = {\r\n    primary: \"var(--sky-glass-primary)\",\r\n    secondary: \"var(--sky-glass-secondary)\",\r\n    tertiary: \"var(--sky-glass-tertiary)\",\r\n    transparent: \"transparent\",\r\n  } as const;\r\n\r\n  private static readonly BLUR_MAP = {\r\n    none: \"none\",\r\n    xs: \"blur(2px)\",\r\n    sm: \"var(--sky-blur-secondary)\",\r\n    md: \"var(--sky-blur-secondary)\",\r\n    lg: \"var(--sky-blur-tertiary)\",\r\n  } as const;\r\n\r\n  private static readonly SIZE_MAP = {\r\n    none: \"0\",\r\n    sm: \"var(--sky-space-1\\\\.5, 6px)\",\r\n    md: \"var(--sky-space-4, 16px)\",\r\n    lg: \"var(--sky-space-6, 24px)\",\r\n    xl: \"var(--sky-space-8, 32px)\",\r\n  } as const;\r\n\r\n  private static readonly GLASS_BG_TIERS = new Set([\r\n    \"primary\",\r\n    \"secondary\",\r\n    \"tertiary\",\r\n  ]);\r\n\r\n  /** Non-overlay inset bars use hover tints — overlay sections own their own blur. */\r\n  private static readonly SECTION_INSET_BG_MAP = {\r\n    primary: \"var(--sky-hover-primary)\",\r\n    secondary: \"var(--sky-hover-secondary)\",\r\n    tertiary: \"var(--sky-hover-tertiary)\",\r\n    transparent: \"transparent\",\r\n  } as const;\r\n\r\n  private static _composeBackdrop(blurLevel: string): string {\r\n    const blur =\r\n      SkyCard.BLUR_MAP[blurLevel as keyof typeof SkyCard.BLUR_MAP] ?? blurLevel;\r\n    if (blur === \"none\") return \"none\";\r\n    return `${blur} var(--sky-saturation-secondary) var(--sky-brightness-secondary)`;\r\n  }\r\n\r\n  private static _composeElevation(level: SkyCardElevation | string): string {\r\n    const depthMap: Record<SkyCardElevation, string | null> = {\r\n      none: null,\r\n      sm: \"var(--sky-box-shadow-primary)\",\r\n      md: \"var(--sky-box-shadow-secondary)\",\r\n      lg: \"var(--sky-box-shadow-tertiary)\",\r\n    };\r\n    const depth = depthMap[level as SkyCardElevation];\r\n    if (depth === null) return \"none\";\r\n    if (depth === undefined) return level;\r\n    return `var(--sky-box-shadow-inset), ${depth}`;\r\n  }\r\n\r\n\r\n  /** Named prop preset from nearest `sky-config-provider`. */\r\n  @property({ type: String, reflect: true }) preset = \"\";\r\n\r\n  private _presets = new PresetController(this);\r\n\r\n  static styles = css`\r\n    :host {\r\n      display: block;\r\n    }\r\n\r\n    .card {\r\n      display: flex;\r\n      flex-direction: column;\r\n      width: 100%;\r\n      position: relative;\r\n      overflow: hidden;\r\n      box-sizing: border-box;\r\n      color: var(--sky-text-primary);\r\n      background: var(--_card-bg, var(--sky-glass-primary));\r\n      background-image: var(--_card-glass-surface, var(--sky-glass-surface));\r\n      border-radius: var(--_card-radius, var(--sky-radius-secondary));\r\n      backdrop-filter: var(--_card-backdrop, none);\r\n      -webkit-backdrop-filter: var(--_card-backdrop, none);\r\n      box-shadow: var(\r\n        --_card-shadow,\r\n        var(--sky-box-shadow-inset),\r\n        var(--sky-box-shadow-primary)\r\n      );\r\n      border: var(--_card-border, var(--sky-border-primary));\r\n      transition: var(--sky-transition-default);\r\n    }\r\n\r\n    :host([outlined]) .card {\r\n      box-shadow: none;\r\n      border: var(--sky-border-primary);\r\n    }\r\n    :host([clickable]) .card {\r\n      cursor: pointer;\r\n    }\r\n    :host([clickable]) .card:hover {\r\n      box-shadow: var(\r\n        --_card-shadow-hover,\r\n        var(--sky-box-shadow-inset),\r\n        var(--sky-box-shadow-hover)\r\n      );\r\n    }\r\n\r\n    .section {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      gap: var(--sky-space-1\\\\.5, 6px);\r\n      box-sizing: border-box;\r\n      min-width: 0;\r\n      background: transparent;\r\n      backdrop-filter: none;\r\n      -webkit-backdrop-filter: none;\r\n    }\r\n    .section.stack {\r\n      flex-direction: column;\r\n      align-items: stretch;\r\n      gap: var(--sky-space-1\\\\.5, 6px);\r\n    }\r\n    .section.row {\r\n      flex-direction: row;\r\n    }\r\n\r\n    .overlay-top {\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      right: 0;\r\n      z-index: 1;\r\n    }\r\n    .overlay-bottom {\r\n      position: absolute;\r\n      bottom: 0;\r\n      left: 0;\r\n      right: 0;\r\n      z-index: 1;\r\n    }\r\n\r\n    .inset {\r\n      overflow: hidden;\r\n      box-shadow: none;\r\n    }\r\n    .section.inset[part=\"header\"] {\r\n      border: var(--_header-inset-border, 0 solid transparent);\r\n      border-radius: var(--_header-radius, var(--sky-radius-secondary));\r\n    }\r\n    .section.inset[part=\"footer\"] {\r\n      border: var(--_footer-inset-border, 0 solid transparent);\r\n      border-radius: var(--_footer-radius, var(--sky-radius-secondary));\r\n    }\r\n    .overlay-top.inset {\r\n      top: var(--_header-inset-gap, var(--sky-space-2, 8px));\r\n      left: var(--_header-inset-gap, var(--sky-space-2, 8px));\r\n      right: var(--_header-inset-gap, var(--sky-space-2, 8px));\r\n    }\r\n    .overlay-bottom.inset {\r\n      bottom: var(--_footer-inset-gap, var(--sky-space-2, 8px));\r\n      left: var(--_footer-inset-gap, var(--sky-space-2, 8px));\r\n      right: var(--_footer-inset-gap, var(--sky-space-2, 8px));\r\n    }\r\n\r\n    .section[part=\"header\"]:has(slot:not([empty])),\r\n    .section[part=\"header\"][has-content] {\r\n      background: var(--_header-bg);\r\n      background-image: var(--_header-glass-surface, none);\r\n      padding-block: var(--_header-pad-y, var(--sky-space-3, 12px));\r\n      padding-inline: var(--_header-pad-x, var(--sky-space-4, 16px));\r\n    }\r\n    .section[part=\"footer\"]:has(slot:not([empty])),\r\n    .section[part=\"footer\"][has-content] {\r\n      background: var(--_footer-bg);\r\n      background-image: var(--_footer-glass-surface, none);\r\n      padding-block: var(--_footer-pad-y, var(--sky-space-3, 12px));\r\n      padding-inline: var(--_footer-pad-x, var(--sky-space-4, 16px));\r\n    }\r\n\r\n    .section[part=\"header\"].overlay-top:has(slot:not([empty])),\r\n    .section[part=\"header\"].overlay-top[has-content] {\r\n      backdrop-filter: var(--_header-backdrop, none);\r\n      -webkit-backdrop-filter: var(--_header-backdrop, none);\r\n    }\r\n    .section[part=\"footer\"].overlay-bottom:has(slot:not([empty])),\r\n    .section[part=\"footer\"].overlay-bottom[has-content] {\r\n      backdrop-filter: var(--_footer-backdrop, none);\r\n      -webkit-backdrop-filter: var(--_footer-backdrop, none);\r\n    }\r\n\r\n    .section[part=\"header\"]:not(.inset):has(slot:not([empty])),\r\n    .section[part=\"header\"]:not(.inset)[has-content] {\r\n      border-bottom: var(--_header-separator, 0px) solid\r\n        var(--_header-separator-color, var(--sky-border-light));\r\n    }\r\n    .section[part=\"footer\"]:not(.inset):has(slot:not([empty])),\r\n    .section[part=\"footer\"]:not(.inset)[has-content] {\r\n      border-top: var(--_footer-separator, 0px) solid\r\n        var(--_footer-separator-color, var(--sky-border-light));\r\n    }\r\n\r\n    ::slotted(:not([slot])) {\r\n      box-sizing: border-box;\r\n      padding-block: var(--_body-pad-y, var(--sky-space-3, 12px));\r\n      padding-inline: var(--_body-pad-x, var(--sky-space-4, 16px));\r\n    }\r\n    slot[empty] {\r\n      display: none;\r\n    }\r\n\r\n    ::slotted([slot=\"title\"]) {\r\n      font-size: var(--sky-font-size-lg, 18px);\r\n      font-weight: var(--sky-font-weight-semibold, 600);\r\n      margin: 0;\r\n      color: var(--sky-text-primary);\r\n      text-align: start;\r\n      text-shadow: var(--sky-text-shadow-on-glass, none);\r\n    }\r\n    ::slotted([slot=\"subtitle\"]) {\r\n      font-size: var(--sky-font-size-sm, 14px);\r\n      margin: 0;\r\n      color: var(--sky-text-secondary);\r\n      text-align: start;\r\n      text-shadow: var(--sky-text-shadow-on-glass, none);\r\n    }\r\n    ::slotted([slot=\"actions\"]) {\r\n      display: inline-flex;\r\n      gap: var(--sky-space-1\\\\.5, 6px);\r\n      align-items: center;\r\n      margin-left: auto;\r\n    }\r\n    ::slotted([slot=\"footer-title\"]) {\r\n      font-size: var(--sky-font-size-md, 16px);\r\n      font-weight: var(--sky-font-weight-medium, 500);\r\n      margin: 0;\r\n      color: var(--sky-text-primary);\r\n      text-align: start;\r\n    }\r\n    ::slotted([slot=\"footer-subtitle\"]) {\r\n      font-size: var(--sky-font-size-xs, 12px);\r\n      margin: 0;\r\n      color: var(--sky-text-secondary);\r\n      text-align: start;\r\n    }\r\n    ::slotted([slot=\"footer-actions\"]) {\r\n      display: inline-flex;\r\n      gap: var(--sky-space-1\\\\.5, 6px);\r\n      align-items: center;\r\n      margin-left: auto;\r\n    }\r\n\r\n    .main {\r\n      width: 100%;\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      .card {\r\n        transition: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  override firstUpdated(): void {\r\n    this._wireSlotChangeHandlers();\r\n\r\n    this._syncHeader();\r\n    this._syncFooter();\r\n  }\r\n\r\n  /**\r\n   * After PresetController hostUpdate — card chrome may come from presets.\r\n   * Keep flag recompute + CSS var apply here (not willUpdate).\r\n   */\r\n  protected override update(changed: PropertyValues): void {\r\n    if (\r\n      changed.has(\"separators\") ||\r\n      changed.has(\"overlays\") ||\r\n      changed.has(\"insets\")\r\n    ) {\r\n      this._computeEffectiveFlags();\r\n    }\r\n\r\n    if (\r\n      changed.has(\"bg\") ||\r\n      changed.has(\"blurLevel\") ||\r\n      changed.has(\"radius\") ||\r\n      changed.has(\"elevation\") ||\r\n      changed.has(\"preset\")\r\n    ) {\r\n      this._applyCardVars();\r\n    }\r\n    if (\r\n      changed.has(\"headerPadding\") ||\r\n      changed.has(\"bodyPadding\") ||\r\n      changed.has(\"footerPadding\") ||\r\n      changed.has(\"padRatio\") ||\r\n      changed.has(\"preset\")\r\n    ) {\r\n      this._applyPaddingVars();\r\n    }\r\n    if (\r\n      changed.has(\"headerBg\") ||\r\n      changed.has(\"footerBg\") ||\r\n      changed.has(\"headerBlur\") ||\r\n      changed.has(\"footerBlur\") ||\r\n      changed.has(\"headerRadius\") ||\r\n      changed.has(\"footerRadius\") ||\r\n      changed.has(\"headerInsetGap\") ||\r\n      changed.has(\"footerInsetGap\") ||\r\n      changed.has(\"headerSeparatorColor\") ||\r\n      changed.has(\"footerSeparatorColor\") ||\r\n      changed.has(\"separators\") ||\r\n      changed.has(\"insets\") ||\r\n      changed.has(\"overlays\") ||\r\n      changed.has(\"preset\")\r\n    ) {\r\n      this._applySectionChrome();\r\n    }\r\n    super.update(changed);\r\n  }\r\n\r\n  private _wireSlotChangeHandlers(): void {\r\n    this.renderRoot\r\n      .querySelector(\"#slot-title\")\r\n      ?.addEventListener(\"slotchange\", () => this._syncHeader());\r\n    this.renderRoot\r\n      .querySelector(\"#slot-subtitle\")\r\n      ?.addEventListener(\"slotchange\", () => this._syncHeader());\r\n    this.renderRoot\r\n      .querySelector(\"#slot-actions\")\r\n      ?.addEventListener(\"slotchange\", () => this._syncHeader());\r\n\r\n    this.renderRoot\r\n      .querySelector(\"#slot-f-title\")\r\n      ?.addEventListener(\"slotchange\", () => this._syncFooter());\r\n    this.renderRoot\r\n      .querySelector(\"#slot-f-subtitle\")\r\n      ?.addEventListener(\"slotchange\", () => this._syncFooter());\r\n    this.renderRoot\r\n      .querySelector(\"#slot-f-actions\")\r\n      ?.addEventListener(\"slotchange\", () => this._syncFooter());\r\n  }\r\n\r\n  private _syncHeader(): void {\r\n    const hdr = this.renderRoot.querySelector(\"#hdr\");\r\n    const slots = [\r\n      this.renderRoot.querySelector(\"#slot-title\") as HTMLSlotElement | null,\r\n      this.renderRoot.querySelector(\"#slot-subtitle\") as HTMLSlotElement | null,\r\n      this.renderRoot.querySelector(\"#slot-actions\") as HTMLSlotElement | null,\r\n    ].filter(Boolean) as HTMLSlotElement[];\r\n\r\n    const has = slots.some(\r\n      (s) => s.assignedNodes({ flatten: true }).length > 0\r\n    );\r\n    hdr?.toggleAttribute(\"has-content\", has);\r\n\r\n    slots.forEach((s) =>\r\n      s.toggleAttribute(\r\n        \"empty\",\r\n        s.assignedNodes({ flatten: true }).length === 0\r\n      )\r\n    );\r\n  }\r\n\r\n  private _syncFooter(): void {\r\n    const ftr = this.renderRoot.querySelector(\"#ftr\");\r\n    const slots = [\r\n      this.renderRoot.querySelector(\"#slot-f-title\") as HTMLSlotElement | null,\r\n      this.renderRoot.querySelector(\r\n        \"#slot-f-subtitle\"\r\n      ) as HTMLSlotElement | null,\r\n      this.renderRoot.querySelector(\r\n        \"#slot-f-actions\"\r\n      ) as HTMLSlotElement | null,\r\n    ].filter(Boolean) as HTMLSlotElement[];\r\n\r\n    const has = slots.some(\r\n      (s) => s.assignedNodes({ flatten: true }).length > 0\r\n    );\r\n    ftr?.toggleAttribute(\"has-content\", has);\r\n    slots.forEach((s) =>\r\n      s.toggleAttribute(\r\n        \"empty\",\r\n        s.assignedNodes({ flatten: true }).length === 0\r\n      )\r\n    );\r\n  }\r\n\r\n  private _expandPair(sh: SkyCardSectionTarget): [boolean, boolean] {\r\n    switch (sh) {\r\n      case \"both\":\r\n        return [true, true];\r\n      case \"header\":\r\n        return [true, false];\r\n      case \"footer\":\r\n        return [false, true];\r\n      case \"none\":\r\n      default:\r\n        return [false, false];\r\n    }\r\n  }\r\n\r\n  private _computeEffectiveFlags(): void {\r\n    [this._effHeaderSeparator, this._effFooterSeparator] = this._expandPair(\r\n      this.separators\r\n    );\r\n    [this._effHeaderOverlay, this._effFooterOverlay] = this._expandPair(\r\n      this.overlays\r\n    );\r\n    [this._effHeaderInset, this._effFooterInset] = this._expandPair(\r\n      this.insets\r\n    );\r\n  }\r\n\r\n  private _setVar(name: string, value: string): void {\r\n    if (this._varsCache[name] === value) return;\r\n    this.style.setProperty(name, value);\r\n    this._varsCache[name] = value;\r\n  }\r\n\r\n  private _resolveSectionBg(\r\n    token: string,\r\n    isInset: boolean,\r\n    isOverlay: boolean\r\n  ): string {\r\n    if (isInset && !isOverlay) {\r\n      return (\r\n        SkyCard.SECTION_INSET_BG_MAP[\r\n          token as keyof typeof SkyCard.SECTION_INSET_BG_MAP\r\n        ] ?? token\r\n      );\r\n    }\r\n    return SkyCard.BG_MAP[token as keyof typeof SkyCard.BG_MAP] ?? token;\r\n  }\r\n\r\n  private _resolveSectionGlassSurface(token: string): string {\r\n    return SkyCard.GLASS_BG_TIERS.has(token)\r\n      ? \"var(--sky-glass-surface)\"\r\n      : \"none\";\r\n  }\r\n\r\n  private _applyCardVars(): void {\r\n    this._setVar(\r\n      \"--_card-bg\",\r\n      SkyCard.BG_MAP[this.bg as keyof typeof SkyCard.BG_MAP] ?? this.bg\r\n    );\r\n    this._setVar(\r\n      \"--_card-glass-surface\",\r\n      SkyCard.GLASS_BG_TIERS.has(this.bg)\r\n        ? \"var(--sky-glass-surface)\"\r\n        : \"none\"\r\n    );\r\n\r\n    this._setVar(\r\n      \"--_card-backdrop\",\r\n      SkyCard._composeBackdrop(this.blurLevel)\r\n    );\r\n\r\n    this._setVar(\"--_card-radius\", resolveRadius(this.radius));\r\n    this._setVar(\r\n      \"--_card-shadow\",\r\n      SkyCard._composeElevation(this.elevation)\r\n    );\r\n    this._setVar(\r\n      \"--_card-shadow-hover\",\r\n      \"var(--sky-box-shadow-inset), var(--sky-box-shadow-hover)\"\r\n    );\r\n  }\r\n\r\n  private _applyPaddingVars(): void {\r\n    const h =\r\n      SkyCard.SIZE_MAP[this.headerPadding as keyof typeof SkyCard.SIZE_MAP] ??\r\n      this.headerPadding;\r\n    const b =\r\n      SkyCard.SIZE_MAP[this.bodyPadding as keyof typeof SkyCard.SIZE_MAP] ??\r\n      this.bodyPadding;\r\n    const f =\r\n      SkyCard.SIZE_MAP[this.footerPadding as keyof typeof SkyCard.SIZE_MAP] ??\r\n      this.footerPadding;\r\n\r\n    const ratio = Number.isFinite(this.padRatio)\r\n      ? Math.max(0, this.padRatio)\r\n      : 1;\r\n\r\n    this._setVar(\"--_header-pad-y\", h);\r\n    this._setVar(\"--_header-pad-x\", `calc(${h} * ${ratio})`);\r\n\r\n    this._setVar(\"--_body-pad-y\", b);\r\n    this._setVar(\"--_body-pad-x\", `calc(${b} * ${ratio})`);\r\n\r\n    this._setVar(\"--_footer-pad-y\", f);\r\n    this._setVar(\"--_footer-pad-x\", `calc(${f} * ${ratio})`);\r\n  }\r\n\r\n  private _applySectionChrome(): void {\r\n    const headerSep = this._effHeaderInset\r\n      ? \"0px\"\r\n      : this._effHeaderSeparator\r\n        ? \"1px\"\r\n        : \"0px\";\r\n    const footerSep = this._effFooterInset\r\n      ? \"0px\"\r\n      : this._effFooterSeparator\r\n        ? \"1px\"\r\n        : \"0px\";\r\n    this._setVar(\"--_header-separator\", headerSep);\r\n    this._setVar(\"--_footer-separator\", footerSep);\r\n\r\n    this._setVar(\"--_header-separator-color\", resolveColor(this.headerSeparatorColor));\r\n    this._setVar(\"--_footer-separator-color\", resolveColor(this.footerSeparatorColor));\r\n\r\n    const headerInsetBorder =\r\n      this._effHeaderInset && this._effHeaderSeparator\r\n        ? \"1px solid var(--sky-border-light)\"\r\n        : \"0 solid transparent\";\r\n    const footerInsetBorder =\r\n      this._effFooterInset && this._effFooterSeparator\r\n        ? \"1px solid var(--sky-border-light)\"\r\n        : \"0 solid transparent\";\r\n    this._setVar(\"--_header-inset-border\", headerInsetBorder);\r\n    this._setVar(\"--_footer-inset-border\", footerInsetBorder);\r\n\r\n    this._setVar(\r\n      \"--_header-bg\",\r\n      this._resolveSectionBg(\r\n        this.headerBg,\r\n        this._effHeaderInset,\r\n        this._effHeaderOverlay\r\n      )\r\n    );\r\n    this._setVar(\r\n      \"--_footer-bg\",\r\n      this._resolveSectionBg(\r\n        this.footerBg,\r\n        this._effFooterInset,\r\n        this._effFooterOverlay\r\n      )\r\n    );\r\n    this._setVar(\r\n      \"--_header-glass-surface\",\r\n      this._effHeaderOverlay\r\n        ? this._resolveSectionGlassSurface(this.headerBg)\r\n        : \"none\"\r\n    );\r\n    this._setVar(\r\n      \"--_footer-glass-surface\",\r\n      this._effFooterOverlay\r\n        ? this._resolveSectionGlassSurface(this.footerBg)\r\n        : \"none\"\r\n    );\r\n    this._setVar(\r\n      \"--_header-backdrop\",\r\n      this._effHeaderOverlay\r\n        ? SkyCard._composeBackdrop(this.headerBlur)\r\n        : \"none\"\r\n    );\r\n    this._setVar(\r\n      \"--_footer-backdrop\",\r\n      this._effFooterOverlay\r\n        ? SkyCard._composeBackdrop(this.footerBlur)\r\n        : \"none\"\r\n    );\r\n\r\n    this._setVar(\r\n      \"--_header-radius\",\r\n      resolveRadius(this.headerRadius)\r\n    );\r\n    this._setVar(\r\n      \"--_footer-radius\",\r\n      resolveRadius(this.footerRadius)\r\n    );\r\n    this._setVar(\r\n      \"--_header-inset-gap\",\r\n      SkyCard.SIZE_MAP[this.headerInsetGap as keyof typeof SkyCard.SIZE_MAP] ??\r\n      this.headerInsetGap\r\n    );\r\n    this._setVar(\r\n      \"--_footer-inset-gap\",\r\n      SkyCard.SIZE_MAP[this.footerInsetGap as keyof typeof SkyCard.SIZE_MAP] ??\r\n      this.footerInsetGap\r\n    );\r\n  }\r\n  /**\r\n   * Recomputes card variables and section synchronization.\r\n   *\r\n   * @returns {void}\r\n   */\r\n  public refreshLayout(): void {\r\n    this._computeEffectiveFlags();\r\n    this._applyCardVars();\r\n    this._applyPaddingVars();\r\n    this._applySectionChrome();\r\n    this._syncHeader();\r\n    this._syncFooter();\r\n  }\r\n\r\n  override render() {\r\n    const headerLayoutClass = this.headerLayout === \"inline\" ? \"row\" : \"stack\";\r\n    const footerLayoutClass = this.footerLayout === \"inline\" ? \"row\" : \"stack\";\r\n    const headerClasses = classMap({\r\n      section: true,\r\n      [headerLayoutClass]: true,\r\n      \"overlay-top\": !!this._effHeaderOverlay,\r\n      inset: !!this._effHeaderInset,\r\n    });\r\n    const footerClasses = classMap({\r\n      section: true,\r\n      [footerLayoutClass]: true,\r\n      \"overlay-bottom\": !!this._effFooterOverlay,\r\n      inset: !!this._effFooterInset,\r\n    });\r\n\r\n    return html`\r\n      <div class=\"card\" part=\"card\">\r\n        <div class=${headerClasses} part=\"header\" id=\"hdr\">\r\n          <div class=\"main\">\r\n            <slot name=\"title\" id=\"slot-title\"></slot>\r\n            <slot name=\"subtitle\" id=\"slot-subtitle\"></slot>\r\n          </div>\r\n          <slot name=\"actions\" id=\"slot-actions\"></slot>\r\n        </div>\r\n\r\n        <slot></slot>\r\n\r\n        <div class=${footerClasses} part=\"footer\" id=\"ftr\">\r\n          <div class=\"main\">\r\n            <slot name=\"footer-title\" id=\"slot-f-title\"></slot>\r\n            <slot name=\"footer-subtitle\" id=\"slot-f-subtitle\"></slot>\r\n          </div>\r\n          <slot name=\"footer-actions\" id=\"slot-f-actions\"></slot>\r\n        </div>\r\n      </div>\r\n    `;\r\n  }\r\n}\r\n"],"names":["SkyCard","LitElement","constructor","super","arguments","this","bg","blurLevel","radius","bodyPadding","elevation","outlined","clickable","headerBg","headerBlur","headerPadding","headerLayout","headerInsetGap","headerRadius","headerSeparatorColor","footerBg","footerBlur","footerPadding","footerLayout","footerInsetGap","footerRadius","footerSeparatorColor","padRatio","separators","overlays","insets","_effHeaderSeparator","_effFooterSeparator","_effHeaderOverlay","_effFooterOverlay","_effHeaderInset","_effFooterInset","_varsCache","preset","_presets","PresetController","_composeBackdrop","blur","BLUR_MAP","_composeElevation","level","depth","none","sm","md","lg","firstUpdated","_wireSlotChangeHandlers","_syncHeader","_syncFooter","update","changed","has","_computeEffectiveFlags","_applyCardVars","_applyPaddingVars","_applySectionChrome","renderRoot","querySelector","addEventListener","hdr","slots","filter","Boolean","some","s","assignedNodes","flatten","length","toggleAttribute","forEach","ftr","_expandPair","sh","_setVar","name","value","style","setProperty","_resolveSectionBg","token","isInset","isOverlay","SECTION_INSET_BG_MAP","BG_MAP","_resolveSectionGlassSurface","GLASS_BG_TIERS","resolveRadius","h","SIZE_MAP","b","f","ratio","Number","isFinite","Math","max","headerSep","footerSep","resolveColor","headerInsetBorder","footerInsetBorder","refreshLayout","render","headerLayoutClass","footerLayoutClass","headerClasses","classMap","section","inset","footerClasses","html","primary","secondary","tertiary","transparent","xs","xl","Set","styles","css","__decorateClass","property","type","String","reflect","prototype","customElement"],"mappings":"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"}