@sky.ui/core 0.0.58 → 0.0.60

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  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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"}
+{"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      line-height: 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: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      flex-shrink: 0;\r\n      width: 1em;\r\n      height: 1em;\r\n      font-size: var(--icon-size, 18px);\r\n      line-height: 0;\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":"gpCAsGO,IAAMA,EAAN,cAAwBC,EAsU7B,WAAAC,GACEC,QA7TyCC,KAAAC,QAA4B,QAG3CD,KAAAE,MAAgB,UAGhBF,KAAAG,KAAsB,SAGtBH,KAAAI,KAAO,GAGPJ,KAAAK,KAAe,KAGfL,KAAAM,OAAiB,KAGjBN,KAAAO,MAAQ,SAGQP,KAAAQ,UAAW,EAGXR,KAAAS,SAAU,EAG1BT,KAAAU,MAAQ,GAGRV,KAAAW,MAAQ,GAGQX,KAAAY,UAAW,EAG3BZ,KAAAa,OAAiB,GAGFb,KAAAc,UAAgC,OAGhCd,KAAAe,OAAS,GAGRf,KAAAgB,SAAU,EAE7ChB,KAAQiB,oBAAqB,EAGtCjB,KAAQkB,WAAqC,CAAA,EAE7ClB,KAAQmB,SAAW,IAAIC,EAAiBpB,KAAM,CAC5CqB,SAAU,IAAMrB,KAAKgB,QACrBM,SAAU,KACRtB,KAAKuB,aAAc,KAIvBvB,KAAQwB,qBAAsB,EAE9BxB,KAAQuB,aAAc,EA+QtBvB,KAAQyB,cAAiBC,IACvB,MAAMC,EAAOD,EAAEE,OACTC,EAAO7B,KAAK8B,0BAA0BH,GAExCE,IAAS7B,KAAKiB,qBAAoBjB,KAAKiB,mBAAqBY,IAjBhE7B,KAAK+B,UAAY/B,KAAKgC,iBACxB,CAEQ,yBAAAF,CAA0BG,GAEhC,OADcA,EAAOC,cAAc,CAAEC,SAAS,IACjCC,KAAMC,GACjBA,EAAEC,WAAaC,KAAKC,eAEfH,EAAEI,aAAe,IAAIC,OAAOC,OAAS,EAE9C,CAWQ,gBAAAC,CAAiBC,GACvB,MAAMC,EAAKC,WAAWF,EAAQH,OAAOM,MAAM,OAAO,IAElD,MAAO,GADGC,OAAOC,SAASJ,GAAMA,EAAK,KAEvC,CAEQ,YAAAK,CAAaC,GAOnB,MAAMC,EASF,CACFC,GAAI,CACFT,QAAS,UACTU,SAAU,OACVC,IAAK,MACLC,KAAM,OACNC,QAAS,QAEXC,GAAI,CACFd,QAAS,UACTU,SAAU,OACVC,IAAK,MACLC,KAAM,OACNC,QAAS,QAEXE,GAAI,CACFf,QAAS,WACTU,SAAU,OACVC,IAAK,MACLC,KAAM,OACNC,QAAS,QAEXG,GAAI,CACFhB,QAAS,YACTU,SAAU,OACVC,IAAK,MACLC,KAAM,OACNC,QAAS,QAEXI,GAAI,CACFjB,QAAS,YACTU,SAAU,OACVC,IAAK,MACLC,KAAM,OACNC,QAAS,SAGb,GAAIL,EAAQD,GAAQ,OAAOC,EAAQD,GAEnC,MAAMW,EAAIC,OAAOZ,GACdV,OACAuB,MAAM,2BACHC,EAAOH,IAAI,IAAM,KACjBI,EAAQJ,EAAIhB,WAAWgB,EAAE,IAAM,GAC/BK,EAAK,GAAGD,IAAQD,IAEhBG,EAAMhC,GAAc,GAAGiC,KAAKC,MAAU,IAAJlC,GAAW,MAAM6B,IACnDM,EAAQ,CAACnC,EAAWoC,EAAaC,IACrCJ,KAAKI,IAAID,EAAKH,KAAKG,IAAIC,EAAKrC,IAExBS,EAAK0B,EAAc,IAARL,EAAc,EAAG,IAC5BQ,EAAKH,EAAc,GAARL,EAAa,EAAG,IAC3BX,EAAMgB,EAAc,GAARL,EAAa,EAAG,IAC5BV,EAAOe,EAAc,MAARL,EAAe,GAAI,IAChCT,EAAUD,EAEhB,MAAO,CACLZ,QAAS,GAAGwB,EAAGvB,MAAOuB,EAAGM,KACzBpB,SAAUa,EACVZ,IAAKa,EAAGb,GACRC,KAAMY,EAAGZ,GACTC,QAASW,EAAGX,GAEhB,CAGQ,uBAAAkB,CAAwBC,GAC9B,SAAKA,GAAqB,SAAXA,IACR,sBAAsBC,KAAKD,EAAOnC,OAC3C,CAGQ,yBAAAqC,CAA0BF,GAChC,IAAKA,GAAqB,SAAXA,GAAqB7E,KAAK4E,wBAAwBC,GAC/D,MAAO,cAET,MAAMZ,EAAQY,EAAOZ,MAAM,iBAC3B,OAAOA,IAAQ,IAAIvB,QAAU,aAC/B,CAOmB,MAAAsC,CAAOC,GACxBjF,KAAKkF,kBAAkBD,GACvBlF,MAAMiF,OAAOC,EACf,CAEQ,iBAAAC,CAAkBD,GACxB,MAaME,EAAgBnF,KAAKmB,SAASiE,WAAapF,KAAKwB,oBAKtD,KAHExB,KAAKuB,aACL4D,GAhBiB,CACjB,QACA,UACA,OACA,SACA,YACA,SACA,UACA,WACA,UACA,SACA,YAMW/C,KAAMiD,GAAMJ,EAAkBK,IAAID,MACtBE,OAAOC,KAAKxF,KAAKkB,YAAYyB,OAAS,EAC7D,OAEF3C,KAAKwB,oBAAsBxB,KAAKmB,SAASiE,SACzCpF,KAAKuB,aAAc,EAEnB,MAAMkE,EAAYC,EAAa1F,KAAKE,OAC9ByF,EAAYC,EAEZC,EAAkB,CACtBC,MAAO,CACLC,GAAIN,EACJvF,MAAOyF,EACPd,OAAQ,OACRmB,OAAQ,OACRC,QAASR,EACTS,WAAYP,EACZQ,YAAa,+BAEfC,MAAO,CACLL,GAAI,4BACJ7F,MAAOuF,EACPZ,OAAQ,qCACRmB,OAAQ,OACRC,QAAS,6BACTC,WAAYT,EACZU,YAAa,OACbE,YAAa,uCAEfC,SAAU,CACRP,GAAI,cACJ7F,MAAOuF,EACPZ,OAAQ,aAAaY,IACrBO,OAAQ,OACRC,QAAS,cACTC,WAAYT,EACZU,YAAa,OACbE,YAAa,aAAaE,EAAWd,EAAW,OAElDe,YAAa,CACXT,GAAI,cACJ7F,MAAOuF,EACPZ,OAAQ,OACRmB,OAAQ,OACRC,QAASQ,EAAQhB,EAAW,IAC5BS,WAAYT,EACZU,YAAa,QAEfO,KAAM,CACJX,GAAIU,EAAQhB,EAAW,IACvBvF,MAAOqG,EAAWd,EAAW,IAC7BZ,OAAQ,OACRmB,OAAQ,OACRC,QAASQ,EAAQhB,EAAW,IAC5BS,WAAYK,EAAWd,EAAW,IAClCU,YAAa,QAEfQ,MAAO,CACLZ,GAAI,cACJ7F,MAAOuF,EACPZ,OAAQ,aAAaY,IACrBO,OAAQ,OACRC,QAASR,EACTS,WAAYP,EACZQ,YAAa,QAEfH,OAAQ,CACND,GAAI,2BACJ7F,MAAO,0BACP2E,OAAQ+B,IACRZ,OAAQ,OACRC,QAAS,2BACTC,WAAYT,EACZU,YAAa,8BACbE,YAAaO,KAEfC,OAAQ,CACNd,GAAIN,EACJvF,MAAOyF,EACPd,OAAQ,OACRmB,OAAQ,mEAEEc,EAAUrB,EAAW,gCACdgB,EAAQhB,EAAW,cAEpCQ,QAASR,EACTS,WAAYP,EACZQ,YAAa,QAEfY,SAAU,CACRhB,GAAIiB,EAAehH,KAAKa,OAAQ4E,GAChCvF,MAAOyF,EACPd,OAAQ,OACRmB,OAAQ,OACRC,QAASe,EAAehH,KAAKa,OAAQ4E,GACrCS,WAAYP,EACZQ,YAAa,QAEfc,KAAM,CACJlB,GAAI,cACJ7F,MAAOuF,EACPZ,OAAQ,OACRmB,OAAQ,OACRC,QAAS,cACTC,WAAYT,EACZU,YAAa,SAwCXe,EAAalH,KAAKC,QAClBkH,EAAWnH,KAAKE,MAChBkH,EAAUpH,KAAKK,KACfgH,EAAYrH,KAAKM,OACjBgH,EAAetH,KAAKc,UAEpByG,EACJL,KAAcrB,EAAkBqB,EAAa,QAE/C,IAAIM,EAAI,IAAK3B,EAAgB0B,IAC7BhC,OAAOkC,OACLD,EACAE,EAAkCP,EAAUI,EAAS1B,EAAgB0B,KAGvE,MAAMI,EAAcC,EAA0BT,GAC9C,GAAIQ,IAA4B,SAAZJ,GAAkC,UAAZA,GAAsB,CAC9D,MAAMM,EAAOC,EAA0BH,EAAa,CAClDrB,SAAsB,UAAZiB,IAEZhC,OAAOkC,OAAOD,EAAG,CACfzB,GAAI8B,EAAK9B,GACT7F,MAAO2H,EAAK3H,MACZ2E,OAAoB,UAAZ0C,EAAsBM,EAAKhD,OAAS,OAC5CoB,QAAS,2BACTC,WAAY2B,EAAK3H,MACjBiG,YAAa,UACG,UAAZoB,EAAsB,CAAElB,YAAawB,EAAKhD,QAAW,CAAA,GAE7D,CAEA,MAAMkD,EAAgB/H,KAAKgB,QAAU,OAASsG,EACxCU,EACc,SAAlBD,EArEqB,CACrBjC,MAAO,CAAEmC,MAAO,mBAAoBC,OAAQ,oBAC5C9B,MAAO,CAAA,EACPE,SAAU,CAAA,EACVE,YAAa,CAAA,EACbE,KAAM,CAAA,EACNC,MAAO,CAAA,EACPX,OAAQ,CAAEiC,MAAO,mBAAoBC,OAAQ,oBAC7CnB,SAAU,CAAA,EACVF,OAAQ,CAAEoB,MAAO,kBAAmBC,OAAQ,mBAC5CjB,KAAM,CAAA,GA4DaM,GAzDK,CAAClC,IACzB,OAAQA,GACN,IAAK,OACH,MAAO,CAAE4C,MAAO,OAAQC,OAAQ,QAClC,IAAK,OACH,MAAO,CAAED,MAAO,mBAAoBC,OAAQ,oBAC9C,IAAK,OACH,MAAO,CAAED,MAAO,kBAAmBC,OAAQ,mBAC7C,IAAK,QACH,MAAO,CAAED,MAAO,cAAeC,OAAQ,eACzC,IAAK,SACH,MAAO,CAAED,MAAO,eAAgBC,OAAQ,gBAC1C,IAAK,SACH,MAAO,CACLD,MAAO,mCACPC,OACE,iEAEN,QACE,MAAO,CAAA,IAuCPC,CAAkBJ,GAClBK,EAAkBJ,EAAeC,OAAS,OAC1CI,EAAmBL,EAAeE,QAAUE,GAAkB,OAE9DE,EAAItI,KAAKmD,aAAaiE,GACtBmB,EAAcvI,KAAKY,SAAWZ,KAAK4C,iBAAiB0F,EAAEzF,SAAWyF,EAAEzF,QACnE2F,EAAUxI,KAAKY,SAAW,IAAM0H,EAAE9E,IAExC,IAAIiF,EAAc,EAIlB,GAHkC,aAAfvB,GAA4C,UAAfA,EAI9CuB,EAAc,UAHkB,UAAfvB,GAAyC,WAAfA,EAK3CuB,EAAc,UACLjB,EAAE3C,QAAU2C,EAAE3C,OAAO6D,SAAS,MAAO,CAC9C,MAAMzE,EAAQuD,EAAE3C,OAAOZ,MAAM,WAC7BwE,EAAcxE,EAAQ0E,SAAS1E,EAAM,IAAM,CAC7C,CAEA,IAAI2E,EAAmBH,EACvB,GAAKjB,EAAUnB,aAAgBmB,EAAUnB,YAAYqC,SAAS,MAAO,CACnE,MAAMzE,EAASuD,EAAUnB,YAAYpC,MAAM,WAC3C2E,EAAmB3E,EAAQ0E,SAAS1E,EAAM,IAAMwE,CAClD,CAGA,IAAII,EAAiC,SAAf3B,EAAwB,IAAMqB,EACpD,GAAIE,EAAc,EAAG,CAEnB,MAAMK,EAAeP,EAAYvF,MAAM,KACvC,GAA4B,IAAxB8F,EAAanG,OAAc,CAC7B,MAAMoG,EAAMhG,WAAW+F,EAAa,IAEpCD,EAAkB,GADDvE,KAAKI,IAAIqE,EAAMN,EAAa,MAE/C,MAAA,GAAmC,IAAxBK,EAAanG,OAAc,CAEpC,MAAMqG,EAAWjG,WAAW+F,EAAa,IACnCG,EAAalG,WAAW+F,EAAa,IAGrCI,EAAmB5E,KAAKI,IAAIsE,EAAWP,EAAa,GAC1DI,EAAkB7I,KAAKY,SACnB,GAAGsI,MACH,GAAGA,OAAsBD,KAC/B,MAAA,GAAmC,IAAxBH,EAAanG,OAAc,CAEpC,MAAMwG,EAAMpG,WAAW+F,EAAa,IAC9BM,EAAQrG,WAAW+F,EAAa,IAChCO,EAAStG,WAAW+F,EAAa,IACjCQ,EAAOvG,WAAW+F,EAAa,IAKrCD,EAAkB,GAFEvE,KAAKI,IAAIyE,EAAMV,EAAa,QAEVW,OADf9E,KAAKI,IAAI2E,EAASZ,EAAa,QACea,KACvE,CACF,CAEA,MAAM/F,EAAWR,WAAWuF,EAAE/E,UACxBgG,EAASxG,WAAWuF,EAAE7E,MAC5B,IAAI+F,EACAC,EACJ,GAAmB,SAAfvC,EACFsC,EAAe,YACjB,GAAWxJ,KAAKY,SAAU,CACxB,MACM8I,EAAa,GADP3G,WAAW8F,IAAoB,GACpBU,EAAuB,EAAdd,EAChCe,EAAe,GAAGE,MAClBD,EAAc,GAAGC,KACnB,KAAO,CACL,MAAMC,EAAgBd,EAAgB7F,MAAM,KAO5CwG,EAAe,IALbG,EAAchH,QAAU,EACpBI,WAAW4G,EAAc,IAC3B5G,WAAW4G,EAAc,IAAMA,EAAc,IACZ,EAA/B5G,WAAW4G,EAAc,KAAW,IACLpG,EAAW,EAAkB,EAAdkF,KAEtD,CAEA,MAAMmB,EAAwBpC,EAA+BnB,YACvDwD,EACJ7J,KAAK4E,wBAAwB4C,EAAE3C,SAC/B7E,KAAK4E,wBAAwBgF,GACzBE,EAAc9J,KAAK+E,0BAA0ByC,EAAE3C,QAC/CkF,EAAmB/J,KAAK+E,0BAC5B6E,GAAwBpC,EAAE3C,QAGtBmF,EAA+B,CACnC,cAAexC,EAAEtH,MACjB,eAAgBsH,EAAExB,OAClB,eACiB,SAAfkB,EAAwB,IAAM+C,EAAc5C,GAC9C,oBAAqBG,EAAEtB,WACvB,qBAAsBsB,EAAErB,YACxB,kBAAmB,OACnB,wBAAyBiC,EACzB,yBAA0BC,EAC1B,gBAAiBQ,EACjB,kBAAmBP,EAAE/E,SACrB,YAAaiF,EACb,cAAeF,EAAE7E,KACjB,iBAAkB6E,EAAE5E,QAGpB,mBAAoB8F,KAChBC,EAAc,CAAE,kBAAmBA,GAAgB,CAAA,EAGvD,qBAAsB,GAAGhB,MACzB,2BAA4B,GAAGG,MAG/B,yBAA0BnD,GAGxBoE,GACFG,EAAK,gBAAkBxC,EAAE3C,OACzBmF,EAAK,sBAAwBJ,GAAwBpC,EAAE3C,SAEvDmF,EAAK,sBAAwBF,EAC7BE,EAAK,4BAA8BD,GAGlB,aAAf7C,GACF8C,EAAK,YAAcxC,EAAEzB,GACrBiE,EAAK,kBAAoBxC,EAAEvB,QAE3B+D,EAAK,kBAAoBvE,EACzBuE,EAAK,wBAA0BvE,IAE/BuE,EAAK,kBAAoBxC,EAAEzB,GAC3BiE,EAAK,wBAA0BxC,EAAEvB,SAG/BjG,KAAKgB,UAGY,aAAfkG,GAGF8C,EAAK,YAAc,cACnBA,EAAK,kBAAoB,6CAEzBA,EAAK,wBAA0BA,EAAK,mBAAqB,cAE3DA,EAAK,qBAAuBA,EAAK,eAC7BH,EACFG,EAAK,sBAAwBA,EAAK,iBAAmBxC,EAAE3C,OAEvDmF,EAAK,4BAA8BA,EAAK,uBAAyBF,EAEnEE,EAAK,sBAAwB,OACV,WAAf9C,GACF8C,EAAK,yBAA2B,kBAChCA,EAAK,0BAA4B,oBAEjCA,EAAK,yBAA2B,OAChCA,EAAK,0BAA4B,SAIrChK,KAAKkB,WAAa8I,CACpB,CAOO,WAAAE,GACLlK,KAAKmK,WAAWC,cAAiC,WAAWC,OAC9D,CAOO,WAAAC,GACDtK,KAAKQ,UAAYR,KAAKS,SAC1BT,KAAKmK,WAAWC,cAAiC,WAAWG,OAC9D,CAEQ,aAAAC,CAAcC,GACpB,MAAMC,EAASD,EAAME,cACfC,EAAOF,EAAOG,wBACdC,EAASC,SAASC,cAAc,QAEhC3K,EAAOiE,KAAKI,IAAIgG,EAAOO,YAAaP,EAAOQ,cAC3CC,EAAIV,EAAMW,QAAUR,EAAKtB,KAAOjJ,EAAO,EACvCgL,EAAIZ,EAAMa,QAAUV,EAAKzB,IAAM9I,EAAO,EAE5CyK,EAAOS,MAAMC,MAAQV,EAAOS,MAAME,OAAS,GAAGpL,MAC9CyK,EAAOS,MAAMjC,KAAO,GAAG6B,MACvBL,EAAOS,MAAMpC,IAAM,GAAGkC,MAEtB,MAAMtF,EAAK2F,iBAAiBhB,GAAQiB,iBAAmB,GACvDb,EAAOS,MAAMK,WAAaC,EAAgB9F,GAE1C+E,EAAOgB,UAAY,SACnB,MAAMC,EAAWrB,EAAOsB,iBAAiB,WAErCD,EAASpJ,QADM,GACkBoJ,EAAS,IAC5CA,EAAS,GAAGE,SAEdvB,EAAOwB,YAAYpB,GACnBA,EAAOqB,iBAAiB,eAAgB,IAAMrB,EAAOmB,SACvD,CAEA,oBAAAG,CAAqB5L,GACnBR,KAAKQ,SAAWA,CAClB,CAEA,aAAI6L,GACF,GAAwB,oBAAbtB,SAA0B,OAAO,KAC5C,MAAMuB,EAA8B,iBAAdtM,KAAKI,KAAoBJ,KAAKI,KAAKsC,OAAS,GAClE,OACE1C,KAAK+B,UAAU3B,OACdkM,EAAUvB,SAASwB,eAAeD,GAAqC,OACxEtM,KAAKwM,QAAQ,OAEjB,CAGQ,YAAAC,CAAahC,GACnB,GAAIzK,KAAKQ,UAAYR,KAAKS,QAExB,YADAgK,EAAMiC,iBAKU,WAAd1M,KAAKG,MACPsK,EAAMiC,iBAGR1M,KAAKwK,cAAcC,GAEnB,MAAMrK,EAAOJ,KAAKqM,UACA,WAAdrM,KAAKG,KAIS,UAAdH,KAAKG,MACPC,GAAMuM,QAJNvM,GAAMwM,eAOV,CAEQ,aAAAC,GACN,OAAO7M,KAAKU,OAASV,KAAKW,KAC5B,CAES,MAAAmM,GACP,MAAMC,EAAe/M,KAAK6M,gBACpBG,EACJhN,KAAKY,WAAaZ,KAAKO,OAASwM,GAC5B/M,KAAKO,OAASwM,OACd,EAEN,OAAOE,CAAA;;;gBAGKC,EAASlN,KAAKkB;eACflB,KAAKG;eACLgN,EAAUnN,KAAKI;qBACT+M,EAAUH;oBACXhN,KAAKQ,UAAYR,KAAKS;mBACvBT,KAAKS;iBACPT,KAAKyM;;UAEZW,EACApN,KAAKY,SACL,IACEwM,EACEL,EACA,IAAME,gCAAmCF,kBAE7C,IAAME,CAAA;cACFG,EAAKpN,KAAKU,MAAO,IAAMuM,gCAAmCjN,KAAKU;gCAC7CV,KAAKyB;cACvBzB,KAAKiB,mBAAqBoM,EAAUrN,KAAKO;cACzC6M,EAAKpN,KAAKW,MAAO,IAAMsM,gCAAmCjN,KAAKW;;UAGnEyM,EACApN,KAAKS,QACL,IAAMwM,CAAA;;;;;;KAQd,GA/7BWrN,EAEJ0N,aAAyD,CAC9D,WAAYC,GAHH3N,EAMJ4N,gBAAiB,EANb5N,EAyEJ6N,OAAS,CACdC,EACAC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAsNEC,EACAC,EAAiB,CACf,CACEC,SACE,2GACFC,QAAS,kBAEX,CACED,SACE,oHACFC,QAAS,kBAEX,CACED,SACE,uQACFC,QAAS,kDAEX,CACED,SACE,yRACFC,QAAS,kDAEX,CACED,SACE,yKACFC,QAAS,kDAEX,CACED,SACE,2LACFC,QAAS;KArT0BC,EAAA,CAA1CC,EAAS,CAAE9N,KAAM6D,OAAQkK,SAAS,KAVxBtO,EAUgCuO,UAAA,UAAA,GAGfH,EAAA,CAA3BC,EAAS,CAAE9N,KAAM6D,UAbPpE,EAaiBuO,UAAA,QAAA,GAGAH,EAAA,CAA3BC,EAAS,CAAE9N,KAAM6D,UAhBPpE,EAgBiBuO,UAAA,OAAA,GAGAH,EAAA,CAA3BC,EAAS,CAAE9N,KAAM6D,UAnBPpE,EAmBiBuO,UAAA,OAAA,GAGAH,EAAA,CAA3BC,EAAS,CAAE9N,KAAM6D,UAtBPpE,EAsBiBuO,UAAA,OAAA,GAGAH,EAAA,CAA3BC,EAAS,CAAE9N,KAAM6D,UAzBPpE,EAyBiBuO,UAAA,SAAA,GAGAH,EAAA,CAA3BC,EAAS,CAAE9N,KAAM6D,UA5BPpE,EA4BiBuO,UAAA,QAAA,GAGgBH,EAAA,CAA3CC,EAAS,CAAE9N,KAAMiO,QAASF,SAAS,KA/BzBtO,EA+BiCuO,UAAA,WAAA,GAGAH,EAAA,CAA3CC,EAAS,CAAE9N,KAAMiO,QAASF,SAAS,KAlCzBtO,EAkCiCuO,UAAA,UAAA,GAGhBH,EAAA,CAA3BC,EAAS,CAAE9N,KAAM6D,UArCPpE,EAqCiBuO,UAAA,QAAA,GAGAH,EAAA,CAA3BC,EAAS,CAAE9N,KAAM6D,UAxCPpE,EAwCiBuO,UAAA,QAAA,GAGgBH,EAAA,CAA3CC,EAAS,CAAE9N,KAAMiO,QAASF,SAAS,KA3CzBtO,EA2CiCuO,UAAA,WAAA,GAGhBH,EAAA,CAA3BC,EAAS,CAAE9N,KAAM6D,UA9CPpE,EA8CiBuO,UAAA,SAAA,GAGeH,EAAA,CAA1CC,EAAS,CAAE9N,KAAM6D,OAAQkK,SAAS,KAjDxBtO,EAiDgCuO,UAAA,YAAA,GAGAH,EAAA,CAA1CC,EAAS,CAAE9N,KAAM6D,OAAQkK,SAAS,KApDxBtO,EAoDgCuO,UAAA,SAAA,GAGCH,EAAA,CAA3CC,EAAS,CAAE9N,KAAMiO,QAASF,SAAS,KAvDzBtO,EAuDiCuO,UAAA,UAAA,GAE3BH,EAAA,CAAhBK,KAzDUzO,EAyDMuO,UAAA,qBAAA,GAg0BTH,EAAA,CADPM,EAAa,CAAEC,SAAS,KAx3Bd3O,EAy3BHuO,UAAA,eAAA,GAz3BGvO,EAANoO,EAAA,CADNQ,EAAc,eACF5O"}

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

@@ -1 +1 @@
-{"version":3,"file":"sky-chip.js","sources":["../../src/sky-chip/sky-chip.ts"],"sourcesContent":["import { LitElement, html, css, nothing, unsafeCSS, PropertyValues } from \"lit\";\r\nimport { customElement, property } from \"lit/decorators.js\";\r\nimport { when } from \"lit/directives/when.js\";\r\nimport { styleMap } from \"lit/directives/style-map.js\";\r\nimport { classMap } from \"lit/directives/class-map.js\";\r\nimport {\r\n  isDefaultColorToken,\r\n  resolveAccentColorForToken,\r\n  resolveColor,\r\n  resolveInkColorForToken,\r\n} from \"../helper/utils/color-resolver\";\r\nimport { cssOnFillEnhance, 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 { SkyIcon } from \"../sky-icon/sky-icon.js\";\r\nimport { skyFocusRingHostStyles } from \"../helper/styles/focus-ring\";\r\n\r\nexport type SkyChipVariant =\r\n  | \"solid\"\r\n  | \"flat\"\r\n  | \"shadow\"\r\n  | \"bordered\"\r\n  | \"faded\"\r\n  | \"light\"\r\n  | \"dot\";\r\nexport type SkyChipRemovedEventDetail = { label: string };\r\n\r\n/**\r\n * @element sky-chip\r\n *\r\n * @summary Customizable chip for tags or selections with icon support, removable action, loading state, and visual variants.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://sky-ui.com/components/chip\r\n * @dependency sky-icon\r\n *\r\n * @slot - Default slot for the chip label or any other content.\r\n * @slot prefix - Optional prefix content that can be placed before the label.\r\n * @slot suffix - Optional suffix content that can be placed after the label.\r\n *\r\n * @csspart chip - The visual representation of the chip component.\r\n * @csspart icon - The icons displayed within the chip.\r\n * @csspart close-button - The button for removing the chip.\r\n * @csspart loading-spinner - The spinner that appears during loading.\r\n * @csspart error-message - The error message displayed for invalid chips.\r\n *\r\n * @property {string} label - The label displayed on the chip. Default: `\"\"`.\r\n * @property {boolean} removable - Whether the chip can be removed by the user. Default: `false`.\r\n * @property {string} color - The background color of the chip, can accept tokens or custom CSS color. Default: `\"primary\"`.\r\n * @property {string} radius - The border radius of the chip. Default: `\"full\"`.\r\n * @property {string} size - The size of the chip, which affects padding and font size. Default: `\"md\"`.\r\n * @property {string} iconL - Left icon; shown only when the `prefix` slot is empty. Default: `null`.\r\n * @property {string} iconR - Right icon; shown only when the `suffix` slot is empty. Default: `null`.\r\n * @property {boolean} loading - Whether the chip is in a loading state. Default: `false`.\r\n * @property {boolean} disabled - Whether the chip is disabled. Default: `false`.\r\n * @property {SkyChipVariant} variant - Visual style variant. Default: `\"flat\"`.\r\n * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.\r\n * @method removeChip Dispatches `chip-removed` and removes the chip from the DOM.\r\n *\r\n * @fires {CustomEvent<SkyChipRemovedEventDetail>} chip-removed - Fired when the chip is removed by user action.\r\n *\r\n * @Behavior\r\n * - Uses default slot content when present, otherwise falls back to `label`.\r\n * - `iconL` / `iconR` render only when `prefix` / `suffix` slots have no meaningful content.\r\n * - Emits `chip-removed` and removes itself when removable close action is triggered.\r\n * - Resolves color tokens and radius/size presets to CSS values at render time.\r\n *\r\n * @example\r\n * ```html\r\n * <sky-chip label=\"Active Filter\" removable iconl=\"ion:funnel\" variant=\"light\"></sky-chip>\r\n * ```\r\n * ```vue\r\n * <template>\r\n *   <sky-chip label=\"Active Filter\" removable iconl=\"ion:funnel\" variant=\"light\"></sky-chip>\r\n * </template>\r\n * ```\r\n * ```jsx\r\n * export default function Demo() {\r\n *   return <sky-chip label=\"Active Filter\" removable iconl=\"ion:funnel\" variant=\"light\"></sky-chip>;\r\n * }\r\n * ```\r\n */\r\n@customElement(\"sky-chip\")\r\nexport class SkyChip extends LitElement {\r\n\r\n  static dependencies: Record<string, CustomElementConstructor> = {\r\n    \"sky-icon\": SkyIcon,\r\n  };\r\n\r\n  @property({ type: String }) label: string = \"\";\r\n  @property({ type: Boolean }) removable: boolean = false;\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  /** Radius can be any CSS radius value */\r\n  @property({ type: String }) radius: string = \"full\";\r\n\r\n  /** Size controls padding + font-size (xs, sm, md, lg, xl or numeric like \"14px\") */\r\n  @property({ type: String }) size: string = \"md\";\r\n\r\n  @property({ type: String }) iconL: string | null = null;\r\n  @property({ type: String }) iconR: string | null = null;\r\n  @property({ type: Boolean }) loading: boolean = false;\r\n  @property({ type: Boolean, reflect: true }) disabled: boolean = false;\r\n  @property({ type: String, reflect: true }) variant: SkyChipVariant = \"flat\";\r\n\r\n  /** Named prop preset from nearest `sky-config-provider`. */\r\n  @property({ type: String, reflect: true }) preset = \"\";\r\n\r\n  private _presets = new PresetController(this);\r\n\r\n  static override styles = [\r\n    skyFocusRingHostStyles,\r\n    css`\r\n    :host {\r\n      display: inline-block;\r\n      font-family: var(--sky-font);\r\n      z-index: 1;\r\n      --sky-focus-ring-color: var(--chip-bg-color, var(--sky-active-primary));\r\n    }\r\n\r\n    :host([disabled]) {\r\n      pointer-events: none;\r\n      opacity: var(--sky-opacity-disabled, 0.6);\r\n    }\r\n\r\n    .chip {\r\n      position: relative;\r\n      display: flex;\r\n      gap: 2px;\r\n      width: max-content;\r\n      align-items: center;\r\n      border-radius: var(--sky-radius-secondary);\r\n      color: var(--chip-text-color);\r\n      font-weight: var(--sky-font-weight-medium, 500);\r\n      transition: background-color 0.3s ease, color 0.3s ease,\r\n        box-shadow 0.2s ease, transform 0.2s ease;\r\n      cursor: pointer;\r\n      background-color: var(--chip-bg-color);\r\n    }\r\n\r\n    .close-button {\r\n      position: relative;\r\n      display: flex;\r\n      height: 18px;\r\n      width: 18px;\r\n      justify-content: center;\r\n      font-size: inherit;\r\n      align-items: center;\r\n      background-color: var(--sky-hover-primary);\r\n      backdrop-filter: none;\r\n      -webkit-backdrop-filter: none;\r\n      border: none;\r\n      border-radius: var(--sky-radius-full);\r\n      cursor: pointer;\r\n      color: var(--sky-text-primary);\r\n      transition: color 0.2s ease, background-color 0.2s ease;\r\n    }\r\n\r\n    .close-button sky-icon {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      line-height: 1;\r\n      transition: color 0.3s ease;\r\n    }\r\n\r\n    :dir(rtl) .close-button {\r\n      margin-right: var(--sky-space-1, 5px);\r\n      margin-left: unset;\r\n    }\r\n\r\n    .close-button:hover {\r\n      color: var(--sky-danger-primary);\r\n    }\r\n\r\n    .close-button:focus-visible {\r\n      outline: none;\r\n      box-shadow: var(--sky-focus-ring);\r\n    }\r\n\r\n    .close-button:hover sky-icon,\r\n    .close-button:focus-visible sky-icon{\r\n      color: var(--sky-danger-primary);\r\n      outline: none;\r\n    }\r\n\r\n    .icon {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      color: var(--chip-text-color);\r\n    }\r\n\r\n    sky-icon {\r\n      display: inline-block;\r\n      width: 1em;\r\n      height: 1em;\r\n    }\r\n\r\n    ::slotted([slot=\"prefix\"]),\r\n    ::slotted([slot=\"suffix\"]) {\r\n      display: inline-flex;\r\n      align-items: center;\r\n    }\r\n\r\n    .loading-overlay {\r\n      position: absolute;\r\n      inset: 0;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      background: var(--sky-overlay-primary);\r\n      border-radius: inherit;\r\n    }\r\n\r\n    .loading-spinner {\r\n      width: 14px;\r\n      height: 14px;\r\n      border: 2px solid var(--sky-border-light, var(--sky-text-tertiary));\r\n      border-top-color: var(--chip-bg-color);\r\n      border-radius: var(--sky-radius-full);\r\n      animation: spin 0.8s linear infinite;\r\n    }\r\n\r\n    @keyframes spin {\r\n      from {\r\n        transform: rotate(0deg);\r\n      }\r\n      to {\r\n        transform: rotate(360deg);\r\n      }\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      .chip,\r\n      .close-button,\r\n      .close-button sky-icon {\r\n        transition: none;\r\n      }\r\n      .loading-spinner {\r\n        animation: none;\r\n      }\r\n    }\r\n\r\n    .chip.bordered {\r\n      border: 1px solid var(--chip-ink-color, var(--chip-bg-color));\r\n      color: var(--chip-ink-color, var(--chip-bg-color));\r\n      background: transparent;\r\n    }\r\n\r\n    .chip.light {\r\n      background: transparent;\r\n      color: var(--chip-ink-color, var(--chip-bg-color));\r\n    }\r\n\r\n    .chip.flat {\r\n      box-shadow: none;\r\n      background: color-mix(\r\n        in srgb,\r\n        var(--chip-fill-color, var(--chip-bg-color)) 20%,\r\n        transparent\r\n      );\r\n      color: var(--chip-ink-color, var(--chip-bg-color));\r\n    }\r\n\r\n    .chip.faded {\r\n      background-color: var(--sky-glass-primary);\r\n      border: 1px solid var(--sky-text-tertiary);\r\n      color: var(--chip-ink-color, var(--chip-bg-color));\r\n    }\r\n\r\n    .chip.shadow {\r\n      box-shadow: var(--sky-box-shadow-primary);\r\n    }\r\n\r\n    .chip.shadow:hover {\r\n      box-shadow: var(--sky-box-shadow-hover);\r\n    }\r\n\r\n    .chip.faded .icon,\r\n    .chip.flat .icon,\r\n    .chip.light .icon,\r\n    .chip.dot .icon,\r\n    .chip.bordered .icon {\r\n      color: var(--chip-ink-color, var(--chip-bg-color));\r\n    }\r\n\r\n    .chip.dot {\r\n      padding-left: var(--sky-space-5, 20px) !important;\r\n      position: relative;\r\n      background-color: transparent;\r\n      border: 1px solid var(--sky-text-tertiary);\r\n      color: var(--sky-text-primary);\r\n    }\r\n\r\n    .chip.dot::before {\r\n      content: \"\";\r\n      position: absolute;\r\n      left: var(--sky-space-1\\\\.5, 6px);\r\n      top: 50%;\r\n      transform: translateY(-50%);\r\n      width: var(--sky-space-2, 8px);\r\n      height: var(--sky-space-2, 8px);\r\n      border-radius: var(--sky-radius-full);\r\n      background-color: var(--chip-accent-color, var(--chip-bg-color));\r\n    }\r\n\r\n    /* Solid / shadow chips: enhance label + icon FG against fill. */\r\n    ${unsafeCSS(\r\n      cssOnFillEnhance([\r\n        {\r\n          selector: \".chip.solid, .chip.shadow\",\r\n          fillVar: \"--chip-bg-color\",\r\n        },\r\n        {\r\n          selector: \".chip.solid .icon, .chip.shadow .icon\",\r\n          fillVar: \"--chip-bg-color\",\r\n        },\r\n      ]),\r\n    )}\r\n  `,\r\n  ];\r\n\r\n  private _prefixFilled = false;\r\n  private _suffixFilled = false;\r\n  private _defaultFilled = false;\r\n  private _slotFlagsSeeded = false;\r\n\r\n  /** Updates host CSS variables from current color token/value. */\r\n  protected override updated(changed: PropertyValues): void {\r\n    if (!changed.has(\"color\")) return;\r\n\r\n    const bgColor = resolveColor(this.color);\r\n    const textColor = isDefaultColorToken(this.color)\r\n      ? \"var(--sky-text-primary)\"\r\n      : ON_COLOR_FALLBACK_LIGHT;\r\n\r\n    this.style.setProperty(\"--chip-bg-color\", bgColor);\r\n    this.style.setProperty(\"--chip-text-color\", textColor);\r\n\r\n    if (isDefaultColorToken(this.color)) {\r\n      this.style.setProperty(\"--chip-ink-color\", resolveInkColorForToken(this.color));\r\n      this.style.setProperty(\r\n        \"--chip-accent-color\",\r\n        resolveAccentColorForToken(this.color),\r\n      );\r\n      this.style.setProperty(\"--chip-fill-color\", \"var(--sky-hover-tertiary)\");\r\n    } else {\r\n      this.style.removeProperty(\"--chip-ink-color\");\r\n      this.style.removeProperty(\"--chip-accent-color\");\r\n      this.style.removeProperty(\"--chip-fill-color\");\r\n    }\r\n  }\r\n\r\n  /** Size resolver similar to button: controls padding + font-size */\r\n  private _resolveSize(\r\n    input: string\r\n  ): {\r\n    padding: string;\r\n    fontSize: string;\r\n  } {\r\n    const presets: Record<string, { padding: string; fontSize: string }> = {\r\n      xs: { padding: \"2px 4px\", fontSize: \"11px\" },\r\n      sm: { padding: \"3px 6px\", fontSize: \"12px\" },\r\n      md: { padding: \"4px 8px\", fontSize: \"13px\" },\r\n      lg: { padding: \"5px 10px\", fontSize: \"14px\" },\r\n      xl: { padding: \"6px 12px\", fontSize: \"15px\" },\r\n    };\r\n\r\n    if (presets[input]) return presets[input];\r\n\r\n    const m = String(input).trim().match(/^([\\d.]+)(px|rem|em)?$/i);\r\n    const unit = m?.[2] || \"px\";\r\n    const fsNum = m ? parseFloat(m[1]) : 13;\r\n    const fs = `${fsNum}${unit}`;\r\n\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.4, 2, 10);\r\n    const px = clamp(fsNum * 0.8, 6, 16);\r\n\r\n    const to = (n: number) => `${Math.round(n * 100) / 100}${unit}`;\r\n\r\n    return {\r\n      padding: `${to(py)} ${to(px)}`,\r\n      fontSize: fs,\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Dispatches `chip-removed` and removes the chip from the DOM.\r\n   *\r\n   * @returns {void}\r\n   */\r\n  public removeChip(): void {\r\n    const removeEvent = new CustomEvent<SkyChipRemovedEventDetail>(\"chip-removed\", {\r\n      detail: { label: this.label },\r\n      bubbles: true,\r\n      composed: true,\r\n    });\r\n    this.dispatchEvent(removeEvent);\r\n    this.remove();\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  /** Light DOM check works before the shadow tree exists (first render). */\r\n  private _hasPrefixSlotContent(): boolean {\r\n    return this._prefixFilled;\r\n  }\r\n\r\n  private _hasSuffixSlotContent(): boolean {\r\n    return this._suffixFilled;\r\n  }\r\n\r\n  private _hasDefaultSlotContent(): boolean {\r\n    return this._defaultFilled;\r\n  }\r\n\r\n  private _seedSlotFlagsFromLightDom(): void {\r\n    this._prefixFilled = !!this.querySelector('[slot=\"prefix\"]');\r\n    this._suffixFilled = !!this.querySelector('[slot=\"suffix\"]');\r\n    this._defaultFilled = false;\r\n    for (const n of Array.from(this.childNodes)) {\r\n      if (n.nodeType === Node.ELEMENT_NODE) {\r\n        const slot = (n as Element).getAttribute(\"slot\");\r\n        if (slot === \"prefix\" || slot === \"suffix\") continue;\r\n        this._defaultFilled = true;\r\n        break;\r\n      }\r\n      if ((n.textContent ?? \"\").trim().length > 0) {\r\n        this._defaultFilled = true;\r\n        break;\r\n      }\r\n    }\r\n    this._slotFlagsSeeded = true;\r\n  }\r\n\r\n  override willUpdate(): void {\r\n    if (!this._slotFlagsSeeded) this._seedSlotFlagsFromLightDom();\r\n  }\r\n\r\n  private _onSlotChange = (e: Event): void => {\r\n    const slot = e.target as HTMLSlotElement | null;\r\n    if (!slot || slot.tagName !== \"SLOT\") return;\r\n    this._slotFlagsSeeded = true;\r\n    const filled = this._slotHasMeaningfulContent(slot);\r\n    const name = slot.name;\r\n    if (name === \"prefix\") {\r\n      if (this._prefixFilled === filled) return;\r\n      this._prefixFilled = filled;\r\n    } else if (name === \"suffix\") {\r\n      if (this._suffixFilled === filled) return;\r\n      this._suffixFilled = filled;\r\n    } else {\r\n      if (this._defaultFilled === filled) return;\r\n      this._defaultFilled = filled;\r\n    }\r\n    this.requestUpdate();\r\n  };\r\n\r\n  override render() {\r\n    const sizeDef = this._resolveSize(this.size);\r\n    const chipStyle = {\r\n      padding: sizeDef.padding,\r\n      borderRadius: resolveRadius(this.radius),\r\n      fontSize: sizeDef.fontSize,\r\n    };\r\n\r\n    return html`\r\n      <div\r\n        class=${classMap({\r\n          chip: true,\r\n          [this.variant]: true,\r\n          loading: this.loading,\r\n        })}\r\n        style=${styleMap(chipStyle)}\r\n        part=\"chip\"\r\n      >\r\n        <slot name=\"prefix\" @slotchange=${this._onSlotChange}></slot>\r\n        ${when(!this._hasPrefixSlotContent() && this.iconL, () => html`\r\n          <sky-icon class=\"icon\" part=\"icon\" icon=\"${this.iconL!}\"></sky-icon>\r\n        `)}\r\n        <slot @slotchange=${this._onSlotChange}></slot>\r\n        ${this._hasDefaultSlotContent() ? nothing : this.label}\r\n        <slot name=\"suffix\" @slotchange=${this._onSlotChange}></slot>\r\n        ${when(!this._hasSuffixSlotContent() && this.iconR, () => html`\r\n          <sky-icon class=\"icon icon-right\" part=\"icon\" icon=\"${this.iconR!}\"></sky-icon>\r\n        `)}\r\n        ${when(this.removable, () => html`\r\n          <button\r\n            class=\"close-button\"\r\n            part=\"close-button\"\r\n            type=\"button\"\r\n            aria-label=\"Remove chip\"\r\n            @click=${this.removeChip}\r\n          >\r\n            <sky-icon icon=\"ion:close\"></sky-icon>\r\n          </button>\r\n        `)}\r\n        ${when(this.loading, () => html`\r\n          <div class=\"loading-overlay\" part=\"loading-overlay\">\r\n            <div class=\"loading-spinner\" part=\"loading-spinner\"></div>\r\n          </div>\r\n        `)}\r\n      </div>\r\n    `;\r\n  }\r\n}"],"names":["SkyChip","LitElement","constructor","super","arguments","this","label","removable","color","radius","size","iconL","iconR","loading","disabled","variant","preset","_presets","PresetController","_prefixFilled","_suffixFilled","_defaultFilled","_slotFlagsSeeded","_onSlotChange","e","slot","target","tagName","filled","_slotHasMeaningfulContent","name","requestUpdate","updated","changed","has","bgColor","resolveColor","textColor","isDefaultColorToken","ON_COLOR_FALLBACK_LIGHT","style","setProperty","resolveInkColorForToken","resolveAccentColorForToken","removeProperty","_resolveSize","input","presets","xs","padding","fontSize","sm","md","lg","xl","m","String","trim","match","unit","fsNum","parseFloat","fs","clamp","n","min","max","Math","py","px","to","round","removeChip","removeEvent","CustomEvent","detail","bubbles","composed","dispatchEvent","remove","slotEl","assignedNodes","flatten","some","nodeType","Node","ELEMENT_NODE","textContent","length","_hasPrefixSlotContent","_hasSuffixSlotContent","_hasDefaultSlotContent","_seedSlotFlagsFromLightDom","querySelector","Array","from","childNodes","getAttribute","willUpdate","render","sizeDef","chipStyle","borderRadius","resolveRadius","html","classMap","chip","styleMap","when","nothing","dependencies","SkyIcon","styles","skyFocusRingHostStyles","css","unsafeCSS","cssOnFillEnhance","selector","fillVar","__decorateClass","property","type","prototype","Boolean","reflect","customElement"],"mappings":"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"}
+{"version":3,"file":"sky-chip.js","sources":["../../src/sky-chip/sky-chip.ts"],"sourcesContent":["import { LitElement, html, css, nothing, unsafeCSS, PropertyValues } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { when } from \"lit/directives/when.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport {\n  isDefaultColorToken,\n  resolveAccentColorForToken,\n  resolveColor,\n  resolveInkColorForToken,\n} from \"../helper/utils/color-resolver\";\nimport { cssOnFillEnhance, ON_COLOR_FALLBACK_LIGHT } from \"../helper/utils/contrast-color\";\nimport { resolveRadius } from \"../helper/utils/size-resolver\";\nimport { PresetController } from \"../helper/controllers/preset-controller\";\nimport { SkyIcon } from \"../sky-icon/sky-icon.js\";\nimport { skyFocusRingHostStyles } from \"../helper/styles/focus-ring\";\n\nexport type SkyChipVariant =\n  | \"solid\"\n  | \"flat\"\n  | \"shadow\"\n  | \"bordered\"\n  | \"faded\"\n  | \"light\"\n  | \"dot\";\nexport type SkyChipRemovedEventDetail = { label: string };\n\n/**\n * @element sky-chip\n *\n * @summary Customizable chip for tags or selections with icon support, removable action, loading state, and visual variants.\n *\n * @status stable\n * @since 1.0.0\n *\n * @documentation https://sky-ui.com/components/chip\n * @dependency sky-icon\n *\n * @slot - Default slot for the chip label or any other content.\n * @slot prefix - Optional prefix content that can be placed before the label.\n * @slot suffix - Optional suffix content that can be placed after the label.\n *\n * @csspart chip - The visual representation of the chip component.\n * @csspart icon - The icons displayed within the chip.\n * @csspart close-button - The button for removing the chip.\n * @csspart loading-spinner - The spinner that appears during loading.\n * @csspart error-message - The error message displayed for invalid chips.\n *\n * @property {string} label - The label displayed on the chip. Default: `\"\"`.\n * @property {boolean} removable - Whether the chip can be removed by the user. Default: `false`.\n * @property {string} color - The background color of the chip, can accept tokens or custom CSS color. Default: `\"primary\"`.\n * @property {string} radius - The border radius of the chip. Default: `\"full\"`.\n * @property {string} size - The size of the chip, which affects padding and font size. Default: `\"md\"`.\n * @property {string} iconL - Left icon; shown only when the `prefix` slot is empty. Default: `null`.\n * @property {string} iconR - Right icon; shown only when the `suffix` slot is empty. Default: `null`.\n * @property {boolean} loading - Whether the chip is in a loading state. Default: `false`.\n * @property {boolean} disabled - Whether the chip is disabled. Default: `false`.\n * @property {SkyChipVariant} variant - Visual style variant. Default: `\"flat\"`.\n * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.\n * @method removeChip Dispatches `chip-removed` and removes the chip from the DOM.\n *\n * @fires {CustomEvent<SkyChipRemovedEventDetail>} chip-removed - Fired when the chip is removed by user action.\n *\n * @Behavior\n * - Uses default slot content when present, otherwise falls back to `label`.\n * - `iconL` / `iconR` render only when `prefix` / `suffix` slots have no meaningful content.\n * - Emits `chip-removed` and removes itself when removable close action is triggered.\n * - Resolves color tokens and radius/size presets to CSS values at render time.\n *\n * @example\n * ```html\n * <sky-chip label=\"Active Filter\" removable iconl=\"ion:funnel\" variant=\"light\"></sky-chip>\n * ```\n * ```vue\n * <template>\n *   <sky-chip label=\"Active Filter\" removable iconl=\"ion:funnel\" variant=\"light\"></sky-chip>\n * </template>\n * ```\n * ```jsx\n * export default function Demo() {\n *   return <sky-chip label=\"Active Filter\" removable iconl=\"ion:funnel\" variant=\"light\"></sky-chip>;\n * }\n * ```\n */\n@customElement(\"sky-chip\")\nexport class SkyChip extends LitElement {\n\n  static dependencies: Record<string, CustomElementConstructor> = {\n    \"sky-icon\": SkyIcon,\n  };\n\n  @property({ type: String }) label: string = \"\";\n  @property({ type: Boolean }) removable: boolean = false;\n\n  /** Accepts preset tokens OR any valid CSS color (e.g., #0af, rgb(), var(--x)) */\n  @property({ type: String }) color: string = \"primary\";\n\n  /** Radius can be any CSS radius value */\n  @property({ type: String }) radius: string = \"full\";\n\n  /** Size controls padding + font-size (xs, sm, md, lg, xl or numeric like \"14px\") */\n  @property({ type: String }) size: string = \"md\";\n\n  @property({ type: String }) iconL: string | null = null;\n  @property({ type: String }) iconR: string | null = null;\n  @property({ type: Boolean }) loading: boolean = false;\n  @property({ type: Boolean, reflect: true }) disabled: boolean = false;\n  @property({ type: String, reflect: true }) variant: SkyChipVariant = \"flat\";\n\n  /** Named prop preset from nearest `sky-config-provider`. */\n  @property({ type: String, reflect: true }) preset = \"\";\n\n  private _presets = new PresetController(this);\n\n  static override styles = [\n    skyFocusRingHostStyles,\n    css`\n    :host {\n      display: inline-block;\n      font-family: var(--sky-font);\n      z-index: 1;\n      --sky-focus-ring-color: var(--chip-bg-color, var(--sky-active-primary));\n    }\n\n    :host([disabled]) {\n      pointer-events: none;\n      opacity: var(--sky-opacity-disabled, 0.6);\n    }\n\n    .chip {\n      position: relative;\n      display: flex;\n      gap: 2px;\n      width: max-content;\n      align-items: center;\n      border-radius: var(--sky-radius-secondary);\n      color: var(--chip-text-color);\n      font-weight: var(--sky-font-weight-medium, 500);\n      transition: background-color 0.3s ease, color 0.3s ease,\n        box-shadow 0.2s ease, transform 0.2s ease;\n      cursor: pointer;\n      background-color: var(--chip-bg-color);\n    }\n\n    .close-button {\n      position: relative;\n      display: flex;\n      height: 18px;\n      width: 18px;\n      justify-content: center;\n      font-size: inherit;\n      align-items: center;\n      background-color: var(--sky-hover-primary);\n      backdrop-filter: none;\n      -webkit-backdrop-filter: none;\n      border: none;\n      border-radius: var(--sky-radius-full);\n      cursor: pointer;\n      color: var(--sky-text-primary);\n      transition: color 0.2s ease, background-color 0.2s ease;\n    }\n\n    .close-button sky-icon {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 1;\n      transition: color 0.3s ease;\n    }\n\n    :dir(rtl) .close-button {\n      margin-right: var(--sky-space-1, 5px);\n      margin-left: unset;\n    }\n\n    .close-button:hover {\n      color: var(--sky-danger-primary);\n    }\n\n    .close-button:focus-visible {\n      outline: none;\n      box-shadow: var(--sky-focus-ring);\n    }\n\n    .close-button:hover sky-icon,\n    .close-button:focus-visible sky-icon{\n      color: var(--sky-danger-primary);\n      outline: none;\n    }\n\n    .icon {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: var(--chip-text-color);\n    }\n\n    sky-icon {\n      display: inline-block;\n      width: 1em;\n      height: 1em;\n    }\n\n    ::slotted([slot=\"prefix\"]),\n    ::slotted([slot=\"suffix\"]) {\n      display: inline-flex;\n      align-items: center;\n    }\n\n    .loading-overlay {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: var(--sky-overlay-primary);\n      border-radius: inherit;\n    }\n\n    .loading-spinner {\n      width: 14px;\n      height: 14px;\n      border: 2px solid var(--sky-border-light, var(--sky-text-tertiary));\n      border-top-color: var(--chip-bg-color);\n      border-radius: var(--sky-radius-full);\n      animation: spin 0.8s linear infinite;\n    }\n\n    @keyframes spin {\n      from {\n        transform: rotate(0deg);\n      }\n      to {\n        transform: rotate(360deg);\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .chip,\n      .close-button,\n      .close-button sky-icon {\n        transition: none;\n      }\n      .loading-spinner {\n        animation: none;\n      }\n    }\n\n    .chip.bordered {\n      border: 1px solid var(--chip-ink-color, var(--chip-bg-color));\n      color: var(--chip-ink-color, var(--chip-bg-color));\n      background: transparent;\n    }\n\n    .chip.light {\n      background: transparent;\n      color: var(--chip-ink-color, var(--chip-bg-color));\n    }\n\n    .chip.flat {\n      box-shadow: none;\n      background: color-mix(\n        in srgb,\n        var(--chip-fill-color, var(--chip-bg-color)) 20%,\n        transparent\n      );\n      color: var(--chip-ink-color, var(--chip-bg-color));\n    }\n\n    .chip.faded {\n      background-color: var(--sky-glass-primary);\n      border: 1px solid var(--sky-text-tertiary);\n      color: var(--chip-ink-color, var(--chip-bg-color));\n    }\n\n    .chip.shadow {\n      box-shadow: var(--sky-box-shadow-primary);\n    }\n\n    .chip.shadow:hover {\n      box-shadow: var(--sky-box-shadow-hover);\n    }\n\n    .chip.faded .icon,\n    .chip.flat .icon,\n    .chip.light .icon,\n    .chip.dot .icon,\n    .chip.bordered .icon {\n      color: var(--chip-ink-color, var(--chip-bg-color));\n    }\n\n    .chip.dot {\n      padding-left: var(--sky-space-5, 20px) !important;\n      position: relative;\n      background-color: transparent;\n      border: 1px solid var(--sky-text-tertiary);\n      color: var(--sky-text-primary);\n    }\n\n    .chip.dot::before {\n      content: \"\";\n      position: absolute;\n      left: var(--sky-space-1\\\\.5, 6px);\n      top: 50%;\n      transform: translateY(-50%);\n      width: var(--sky-space-2, 8px);\n      height: var(--sky-space-2, 8px);\n      border-radius: var(--sky-radius-full);\n      background-color: var(--chip-accent-color, var(--chip-bg-color));\n    }\n\n    /* Solid / shadow chips: enhance label + icon FG against fill. */\n    ${unsafeCSS(\n      cssOnFillEnhance([\n        {\n          selector: \".chip.solid, .chip.shadow\",\n          fillVar: \"--chip-bg-color\",\n        },\n        {\n          selector: \".chip.solid .icon, .chip.shadow .icon\",\n          fillVar: \"--chip-bg-color\",\n        },\n      ]),\n    )}\n  `,\n  ];\n\n  private _prefixFilled = false;\n  private _suffixFilled = false;\n  private _defaultFilled = false;\n  private _slotFlagsSeeded = false;\n\n  /** Updates host CSS variables from current color token/value. */\n  protected override updated(changed: PropertyValues): void {\n    if (!changed.has(\"color\")) return;\n\n    const bgColor = resolveColor(this.color);\n    const textColor = isDefaultColorToken(this.color)\n      ? \"var(--sky-text-primary)\"\n      : ON_COLOR_FALLBACK_LIGHT;\n\n    this.style.setProperty(\"--chip-bg-color\", bgColor);\n    this.style.setProperty(\"--chip-text-color\", textColor);\n\n    if (isDefaultColorToken(this.color)) {\n      this.style.setProperty(\"--chip-ink-color\", resolveInkColorForToken(this.color));\n      this.style.setProperty(\n        \"--chip-accent-color\",\n        resolveAccentColorForToken(this.color),\n      );\n      this.style.setProperty(\"--chip-fill-color\", \"var(--sky-hover-tertiary)\");\n    } else {\n      this.style.removeProperty(\"--chip-ink-color\");\n      this.style.removeProperty(\"--chip-accent-color\");\n      this.style.removeProperty(\"--chip-fill-color\");\n    }\n  }\n\n  /** Size resolver similar to button: controls padding + font-size */\n  private _resolveSize(\n    input: string\n  ): {\n    padding: string;\n    fontSize: string;\n  } {\n    const presets: Record<string, { padding: string; fontSize: string }> = {\n      xs: { padding: \"2px 4px\", fontSize: \"11px\" },\n      sm: { padding: \"3px 6px\", fontSize: \"12px\" },\n      md: { padding: \"4px 8px\", fontSize: \"13px\" },\n      lg: { padding: \"5px 10px\", fontSize: \"14px\" },\n      xl: { padding: \"6px 12px\", fontSize: \"15px\" },\n    };\n\n    if (presets[input]) return presets[input];\n\n    const m = String(input).trim().match(/^([\\d.]+)(px|rem|em)?$/i);\n    const unit = m?.[2] || \"px\";\n    const fsNum = m ? parseFloat(m[1]) : 13;\n    const fs = `${fsNum}${unit}`;\n\n    const clamp = (n: number, min: number, max: number) =>\n      Math.max(min, Math.min(max, n));\n\n    const py = clamp(fsNum * 0.4, 2, 10);\n    const px = clamp(fsNum * 0.8, 6, 16);\n\n    const to = (n: number) => `${Math.round(n * 100) / 100}${unit}`;\n\n    return {\n      padding: `${to(py)} ${to(px)}`,\n      fontSize: fs,\n    };\n  }\n\n  /**\n   * Dispatches `chip-removed` and removes the chip from the DOM.\n   *\n   * @returns {void}\n   */\n  public removeChip(): void {\n    const removeEvent = new CustomEvent<SkyChipRemovedEventDetail>(\"chip-removed\", {\n      detail: { label: this.label },\n      bubbles: true,\n      composed: true,\n    });\n    this.dispatchEvent(removeEvent);\n    this.remove();\n  }\n\n  private _slotHasMeaningfulContent(slotEl: HTMLSlotElement): boolean {\n    const nodes = slotEl.assignedNodes({ flatten: true });\n    return nodes.some((n) =>\n      n.nodeType === Node.ELEMENT_NODE\n        ? true\n        : (n.textContent ?? \"\").trim().length > 0\n    );\n  }\n\n  /** Light DOM check works before the shadow tree exists (first render). */\n  private _hasPrefixSlotContent(): boolean {\n    return this._prefixFilled;\n  }\n\n  private _hasSuffixSlotContent(): boolean {\n    return this._suffixFilled;\n  }\n\n  private _hasDefaultSlotContent(): boolean {\n    return this._defaultFilled;\n  }\n\n  private _seedSlotFlagsFromLightDom(): void {\n    this._prefixFilled = !!this.querySelector('[slot=\"prefix\"]');\n    this._suffixFilled = !!this.querySelector('[slot=\"suffix\"]');\n    this._defaultFilled = false;\n    for (const n of Array.from(this.childNodes)) {\n      if (n.nodeType === Node.ELEMENT_NODE) {\n        const slot = (n as Element).getAttribute(\"slot\");\n        if (slot === \"prefix\" || slot === \"suffix\") continue;\n        this._defaultFilled = true;\n        break;\n      }\n      if ((n.textContent ?? \"\").trim().length > 0) {\n        this._defaultFilled = true;\n        break;\n      }\n    }\n    this._slotFlagsSeeded = true;\n  }\n\n  override willUpdate(): void {\n    if (!this._slotFlagsSeeded) this._seedSlotFlagsFromLightDom();\n  }\n\n  private _onSlotChange = (e: Event): void => {\n    const slot = e.target as HTMLSlotElement | null;\n    if (!slot || slot.tagName !== \"SLOT\") return;\n    this._slotFlagsSeeded = true;\n    const filled = this._slotHasMeaningfulContent(slot);\n    const name = slot.name;\n    if (name === \"prefix\") {\n      if (this._prefixFilled === filled) return;\n      this._prefixFilled = filled;\n    } else if (name === \"suffix\") {\n      if (this._suffixFilled === filled) return;\n      this._suffixFilled = filled;\n    } else {\n      if (this._defaultFilled === filled) return;\n      this._defaultFilled = filled;\n    }\n    this.requestUpdate();\n  };\n\n  override render() {\n    const sizeDef = this._resolveSize(this.size);\n    const chipStyle = {\n      padding: sizeDef.padding,\n      borderRadius: resolveRadius(this.radius),\n      fontSize: sizeDef.fontSize,\n    };\n\n    return html`\n      <div\n        class=${classMap({\n          chip: true,\n          [this.variant]: true,\n          loading: this.loading,\n        })}\n        style=${styleMap(chipStyle)}\n        part=\"chip\"\n      >\n        <slot name=\"prefix\" @slotchange=${this._onSlotChange}></slot>\n        ${when(!this._hasPrefixSlotContent() && this.iconL, () => html`\n          <sky-icon class=\"icon\" part=\"icon\" icon=\"${this.iconL!}\"></sky-icon>\n        `)}\n        <slot @slotchange=${this._onSlotChange}></slot>\n        ${this._hasDefaultSlotContent() ? nothing : this.label}\n        <slot name=\"suffix\" @slotchange=${this._onSlotChange}></slot>\n        ${when(!this._hasSuffixSlotContent() && this.iconR, () => html`\n          <sky-icon class=\"icon icon-right\" part=\"icon\" icon=\"${this.iconR!}\"></sky-icon>\n        `)}\n        ${when(this.removable, () => html`\n          <button\n            class=\"close-button\"\n            part=\"close-button\"\n            type=\"button\"\n            aria-label=\"Remove chip\"\n            @click=${this.removeChip}\n          >\n            <sky-icon icon=\"ion:close\"></sky-icon>\n          </button>\n        `)}\n        ${when(this.loading, () => html`\n          <div class=\"loading-overlay\" part=\"loading-overlay\">\n            <div class=\"loading-spinner\" part=\"loading-spinner\"></div>\n          </div>\n        `)}\n      </div>\n    `;\n  }\n}"],"names":["SkyChip","LitElement","constructor","super","arguments","this","label","removable","color","radius","size","iconL","iconR","loading","disabled","variant","preset","_presets","PresetController","_prefixFilled","_suffixFilled","_defaultFilled","_slotFlagsSeeded","_onSlotChange","e","slot","target","tagName","filled","_slotHasMeaningfulContent","name","requestUpdate","updated","changed","has","bgColor","resolveColor","textColor","isDefaultColorToken","ON_COLOR_FALLBACK_LIGHT","style","setProperty","resolveInkColorForToken","resolveAccentColorForToken","removeProperty","_resolveSize","input","presets","xs","padding","fontSize","sm","md","lg","xl","m","String","trim","match","unit","fsNum","parseFloat","fs","clamp","n","min","max","Math","py","px","to","round","removeChip","removeEvent","CustomEvent","detail","bubbles","composed","dispatchEvent","remove","slotEl","assignedNodes","flatten","some","nodeType","Node","ELEMENT_NODE","textContent","length","_hasPrefixSlotContent","_hasSuffixSlotContent","_hasDefaultSlotContent","_seedSlotFlagsFromLightDom","querySelector","Array","from","childNodes","getAttribute","willUpdate","render","sizeDef","chipStyle","borderRadius","resolveRadius","html","classMap","chip","styleMap","when","nothing","dependencies","SkyIcon","styles","skyFocusRingHostStyles","css","unsafeCSS","cssOnFillEnhance","selector","fillVar","__decorateClass","property","type","prototype","Boolean","reflect","customElement"],"mappings":"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"}

package/dist/sky-color-picker/color-model.d.ts

@@ -0,0 +1,26 @@
+/** HSVA: h 0–360, s/v/a 0–1 */
+export type Hsva = {
+    h: number;
+    s: number;
+    v: number;
+    a: number;
+};
+export type Rgba = {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+};
+export declare function clamp(n: number, min: number, max: number): number;
+export declare function hsva(h: number, s: number, v: number, a?: number): Hsva;
+export declare function hsvaToRgba({ h, s, v, a }: Hsva): Rgba;
+export declare function rgbaToHsva({ r, g, b, a }: Rgba): Hsva;
+/** Opaque `#rrggbb`, or `#rrggbbaa` when alpha < 1. */
+export declare function hsvaToCss(color: Hsva): string;
+export declare function hsvaToHex6(color: Hsva): string;
+export declare function expandHex(raw: string): string | null;
+export declare function hexToHsva(input: string): Hsva | null;
+/** Parse hex / rgb(a) / `transparent`. Returns null if unknown. */
+export declare function parseCssColor(input: string | null | undefined): Hsva | null;
+export declare function hueCss(h: number): string;
+export type ColorFormat = 'hex' | 'hsb' | 'rgb';

package/dist/sky-color-picker/color-model.js

@@ -0,0 +1,2 @@
+function t(t,n,r){return Math.min(r,Math.max(n,t))}function n(n,r,e,a=1){return{h:(n%360+360)%360,s:t(r,0,1),v:t(e,0,1),a:t(a,0,1)}}function r({h:t,s:n,v:r,a:e}){const a=r*n,s=a*(1-Math.abs(t/60%2-1)),o=r-a;let u=0,i=0,c=0;return t<60?(u=a,i=s):t<120?(u=s,i=a):t<180?(i=a,c=s):t<240?(i=s,c=a):t<300?(u=s,c=a):(u=a,c=s),{r:Math.round(255*(u+o)),g:Math.round(255*(i+o)),b:Math.round(255*(c+o)),a:e}}function e({r:t,g:r,b:e,a:a}){const s=t/255,o=r/255,u=e/255,i=Math.max(s,o,u),c=i-Math.min(s,o,u);let l=0;0!==c&&(l=i===s?(o-u)/c%6:i===o?(u-s)/c+2:(s-o)/c+4,l*=60,l<0&&(l+=360));return n(l,0===i?0:c/i,i,a)}function a(n){return t(Math.round(n),0,255).toString(16).padStart(2,"0")}function s(t){const{r:n,g:e,b:s,a:o}=r(t),u=`#${a(n)}${a(e)}${a(s)}`;return o>=.999?u:`${u}${a(255*o)}`}function o(t){const{r:n,g:e,b:s}=r(t);return`#${a(n)}${a(e)}${a(s)}`}function u(t){let n=t.trim().replace(/^#/,"").toLowerCase();return 3!==n.length&&4!==n.length||(n=n.split("").map(t=>t+t).join("")),/^[0-9a-f]{6}([0-9a-f]{2})?$/.test(n)?`#${n}`:null}function i(t){const n=u(t);if(!n)return null;const r=n.slice(1);return e({r:parseInt(r.slice(0,2),16),g:parseInt(r.slice(2,4),16),b:parseInt(r.slice(4,6),16),a:8===r.length?parseInt(r.slice(6,8),16)/255:1})}function c(r){const a=(r||"").trim().toLowerCase();if(!a||"none"===a||"transparent"===a)return n(0,0,1,0);const s=i(a);if(s)return s;const o=function(n){const r=n.trim().match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*([\d.]+%?))?\s*\)$/i);if(!r)return null;const e=r[4];let a=1;return null!=e&&(a=e.endsWith("%")?parseFloat(e)/100:parseFloat(e)),{r:t(parseFloat(r[1]),0,255),g:t(parseFloat(r[2]),0,255),b:t(parseFloat(r[3]),0,255),a:t(a,0,1)}}(a);return o?e(o):null}function l(t){return`hsl(${Math.round(t)} 100% 50%)`}export{t as clamp,u as expandHex,i as hexToHsva,n as hsva,s as hsvaToCss,o as hsvaToHex6,r as hsvaToRgba,l as hueCss,c as parseCssColor,e as rgbaToHsva};
+//# sourceMappingURL=color-model.js.map

package/dist/sky-color-picker/color-model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-model.js","sources":["../../src/sky-color-picker/color-model.ts"],"sourcesContent":["/** HSVA: h 0–360, s/v/a 0–1 */\r\nexport type Hsva = { h: number; s: number; v: number; a: number }\r\nexport type Rgba = { r: number; g: number; b: number; a: number }\r\n\r\nexport function clamp(n: number, min: number, max: number): number {\r\n  return Math.min(max, Math.max(min, n))\r\n}\r\n\r\nexport function hsva(h: number, s: number, v: number, a = 1): Hsva {\r\n  return {\r\n    h: ((h % 360) + 360) % 360,\r\n    s: clamp(s, 0, 1),\r\n    v: clamp(v, 0, 1),\r\n    a: clamp(a, 0, 1),\r\n  }\r\n}\r\n\r\nexport function hsvaToRgba({ h, s, v, a }: Hsva): Rgba {\r\n  const c = v * s\r\n  const x = c * (1 - Math.abs(((h / 60) % 2) - 1))\r\n  const m = v - c\r\n  let r = 0\r\n  let g = 0\r\n  let b = 0\r\n  if (h < 60) {\r\n    r = c\r\n    g = x\r\n  } else if (h < 120) {\r\n    r = x\r\n    g = c\r\n  } else if (h < 180) {\r\n    g = c\r\n    b = x\r\n  } else if (h < 240) {\r\n    g = x\r\n    b = c\r\n  } else if (h < 300) {\r\n    r = x\r\n    b = c\r\n  } else {\r\n    r = c\r\n    b = x\r\n  }\r\n  return {\r\n    r: Math.round((r + m) * 255),\r\n    g: Math.round((g + m) * 255),\r\n    b: Math.round((b + m) * 255),\r\n    a,\r\n  }\r\n}\r\n\r\nexport function rgbaToHsva({ r, g, b, a }: Rgba): Hsva {\r\n  const rn = r / 255\r\n  const gn = g / 255\r\n  const bn = b / 255\r\n  const max = Math.max(rn, gn, bn)\r\n  const min = Math.min(rn, gn, bn)\r\n  const d = max - min\r\n  let h = 0\r\n  if (d !== 0) {\r\n    if (max === rn) h = ((gn - bn) / d) % 6\r\n    else if (max === gn) h = (bn - rn) / d + 2\r\n    else h = (rn - gn) / d + 4\r\n    h *= 60\r\n    if (h < 0) h += 360\r\n  }\r\n  const s = max === 0 ? 0 : d / max\r\n  return hsva(h, s, max, a)\r\n}\r\n\r\nfunction hexByte(n: number): string {\r\n  return clamp(Math.round(n), 0, 255).toString(16).padStart(2, '0')\r\n}\r\n\r\n/** Opaque `#rrggbb`, or `#rrggbbaa` when alpha < 1. */\r\nexport function hsvaToCss(color: Hsva): string {\r\n  const { r, g, b, a } = hsvaToRgba(color)\r\n  const rgb = `#${hexByte(r)}${hexByte(g)}${hexByte(b)}`\r\n  if (a >= 0.999) return rgb\r\n  return `${rgb}${hexByte(a * 255)}`\r\n}\r\n\r\nexport function hsvaToHex6(color: Hsva): string {\r\n  const { r, g, b } = hsvaToRgba(color)\r\n  return `#${hexByte(r)}${hexByte(g)}${hexByte(b)}`\r\n}\r\n\r\nexport function expandHex(raw: string): string | null {\r\n  let h = raw.trim().replace(/^#/, '').toLowerCase()\r\n  if (h.length === 3 || h.length === 4) {\r\n    h = h\r\n      .split('')\r\n      .map((c) => c + c)\r\n      .join('')\r\n  }\r\n  if (!/^[0-9a-f]{6}([0-9a-f]{2})?$/.test(h)) return null\r\n  return `#${h}`\r\n}\r\n\r\nexport function hexToHsva(input: string): Hsva | null {\r\n  const hex = expandHex(input)\r\n  if (!hex) return null\r\n  const h = hex.slice(1)\r\n  const r = parseInt(h.slice(0, 2), 16)\r\n  const g = parseInt(h.slice(2, 4), 16)\r\n  const b = parseInt(h.slice(4, 6), 16)\r\n  const a = h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1\r\n  return rgbaToHsva({ r, g, b, a })\r\n}\r\n\r\nfunction parseRgbFn(input: string): Rgba | null {\r\n  const m = input\r\n    .trim()\r\n    .match(\r\n      /^rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)(?:\\s*,\\s*([\\d.]+%?))?\\s*\\)$/i,\r\n    )\r\n  if (!m) return null\r\n  const aRaw = m[4]\r\n  let a = 1\r\n  if (aRaw != null) {\r\n    a = aRaw.endsWith('%') ? parseFloat(aRaw) / 100 : parseFloat(aRaw)\r\n  }\r\n  return {\r\n    r: clamp(parseFloat(m[1]), 0, 255),\r\n    g: clamp(parseFloat(m[2]), 0, 255),\r\n    b: clamp(parseFloat(m[3]), 0, 255),\r\n    a: clamp(a, 0, 1),\r\n  }\r\n}\r\n\r\n/** Parse hex / rgb(a) / `transparent`. Returns null if unknown. */\r\nexport function parseCssColor(input: string | null | undefined): Hsva | null {\r\n  const v = (input || '').trim().toLowerCase()\r\n  if (!v || v === 'none' || v === 'transparent') return hsva(0, 0, 1, 0)\r\n  const hex = hexToHsva(v)\r\n  if (hex) return hex\r\n  const rgb = parseRgbFn(v)\r\n  if (rgb) return rgbaToHsva(rgb)\r\n  return null\r\n}\r\n\r\nexport function hueCss(h: number): string {\r\n  return `hsl(${Math.round(h)} 100% 50%)`\r\n}\r\n\r\nexport type ColorFormat = 'hex' | 'hsb' | 'rgb'\r\n"],"names":["clamp","n","min","max","Math","hsva","h","s","v","a","hsvaToRgba","c","x","abs","m","r","g","b","round","rgbaToHsva","rn","gn","bn","d","hexByte","toString","padStart","hsvaToCss","color","rgb","hsvaToHex6","expandHex","raw","trim","replace","toLowerCase","length","split","map","join","test","hexToHsva","input","hex","slice","parseInt","parseCssColor","match","aRaw","endsWith","parseFloat","parseRgbFn","hueCss"],"mappings":"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"}

package/dist/sky-color-picker/index.d.ts

@@ -0,0 +1 @@
+export * from "./sky-color-picker";

package/dist/sky-color-picker/index.js

@@ -0,0 +1 @@
+export * from './sky-color-picker.js';

package/dist/sky-color-picker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/sky-color-picker/sky-color-picker.d.ts

@@ -0,0 +1,101 @@
+import { LitElement, type PropertyValues } from 'lit';
+import { type ColorFormat } from './color-model.js';
+export type SkyColorPickerDetail = {
+    value: string;
+};
+/**
+ * @element sky-color-picker
+ *
+ * @summary Saturation/brightness field, hue + opacity sliders, Hex/HSB/RGB, and optional eyedropper — a custom picker the native OS dialog cannot match.
+ *
+ * @status stable
+ * @since 1.0.0
+ *
+ * @documentation https://sky-ui.com/components/color-picker
+ *
+ * @dependency sky-button
+ * @dependency sky-input
+ * @dependency sky-dropdown
+ * @dependency sky-dropdown-item
+ *
+ * @csspart field - Saturation/brightness square.
+ * @csspart hue - Hue slider track.
+ * @csspart alpha - Opacity slider track.
+ * @csspart format - Hex / HSB / RGB dropdown.
+ * @csspart done - Confirm button.
+ *
+ * @uiVModel value color-change detail=value
+ *
+ * @property {string} value - CSS color (`#rgb`, `#rrggbb`, `#rrggbbaa`, `rgb()`, `rgba()`, `transparent`). Default: `"#000000"`.
+ * @property {ColorFormat} format - Numeric display mode. Default: `"hex"`.
+ * @property {boolean} alpha - Show opacity slider and emit hex8 when a < 1. Default: `true`.
+ * @property {boolean} eyedropper - Show eyedropper when `EyeDropper` exists. Default: `true`.
+ * @property {boolean} actions - Show Done / Cancel. Default: `true`.
+ *
+ * @event {CustomEvent<SkyColorPickerDetail>} color-input - Live while dragging (does not commit v-model).
+ * @event {CustomEvent<SkyColorPickerDetail>} color-change - Committed value (Done, or live when `actions` is false).
+ * @event {CustomEvent<SkyColorPickerDetail>} color-done - Done pressed.
+ * @event {CustomEvent<SkyColorPickerDetail>} color-cancel - Cancel pressed (original value).
+ *
+ * @fires {CustomEvent<SkyColorPickerDetail>} color-input
+ * @fires {CustomEvent<SkyColorPickerDetail>} color-change
+ * @fires {CustomEvent<SkyColorPickerDetail>} color-done
+ * @fires {CustomEvent<SkyColorPickerDetail>} color-cancel
+ *
+ * @example
+ * ```html
+ * <sky-color-picker value="#a23a3a94"></sky-color-picker>
+ * ```
+ */
+export declare class SkyColorPicker extends LitElement {
+    value: string;
+    format: ColorFormat;
+    alpha: boolean;
+    eyedropper: boolean;
+    actions: boolean;
+    private _hsva;
+    private _hexDraft;
+    private _svEl?;
+    private _hueEl?;
+    private _alphaEl?;
+    private _drag;
+    private _origin;
+    private _syncedFromProp;
+    static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    private _hsvaEq;
+    private _applyValue;
+    private get _css();
+    private _emit;
+    private _setHsva;
+    private _onSvDown;
+    private _onHueDown;
+    private _onAlphaDown;
+    private _onWinMove;
+    private _onWinUp;
+    private _ratio;
+    private _svFromEvent;
+    private _hueFromEvent;
+    private _alphaFromEvent;
+    private _eventValue;
+    private _onHexInput;
+    private _onRgb;
+    private _onHsb;
+    private _onPct;
+    private _eyedrop;
+    private _done;
+    private _cancel;
+    /** Nested sky-dropdown open/close is composed; stop it so the mixer parent stays open. */
+    private _stopBubble;
+    private _onFormatSelect;
+    private get _formatLabel();
+    private get _canEye();
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sky-color-picker': SkyColorPicker;
+    }
+}