@sky.ui/core 0.0.38 → 0.0.39

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

@@ -1 +1 @@
-{"version":3,"file":"sky-alert.js","sources":["../../src/sky-alert/sky-alert.ts"],"sourcesContent":["import { LitElement, html, css, PropertyValues } from \"lit\";\r\nimport { customElement, property, state } from \"lit/decorators.js\";\r\nimport { styleMap } from \"lit/directives/style-map.js\";\r\nimport { classMap } from \"lit/directives/class-map.js\";\r\nimport { when } from \"lit/directives/when.js\";\r\nimport { resolveRadius } from \"../helper/utils/size-resolver\";\r\nimport {\r\n  resolveColor,\r\n  resolveTextColorForToken,\r\n  fadeMix,\r\n  hoverShade,\r\n  isDefaultColorToken,\r\n  tuneSurfaceVariantForDefaultColor,\r\n  resolveSemanticSurfaceKey,\r\n  semanticSoftSurfaceTokens,\r\n  skyBorderPrimaryShorthand,\r\n} from \"../helper/utils/color-resolver\";\r\nimport { SkyIcon } from \"../sky-icon/sky-icon.js\";\r\n\r\nexport type SkyAlertClosedEventDetail = { title: string; message: string };\r\nexport type SkyAlertStrip = \"start\" | \"end\" | \"both\" | \"none\";\r\nexport type SkyAlertVariant = \"flat\" | \"bordered\" | \"light\" | \"faded\" | \"solid\";\r\nexport type SkyAlertRoleType = \"alert\" | \"alertdialog\";\r\n/** Resolved size metrics returned by `SkyAlert._resolveSize()`. */\r\ntype SkyAlertResolvedSize = {\r\n  padding: string;\r\n  titleFontSize: string;\r\n  messageFontSize: string;\r\n  gap: string;\r\n  icon: string;\r\n  closeSize: string;\r\n  closeFontSize: string;\r\n  spinner: string;\r\n  stripWidth: string;\r\n  minHeight: string;\r\n};\r\n\r\n/**\r\n * @element sky-alert\r\n *\r\n * @summary Status alert banner with variants, optional icon, strip accents, actions, dismiss behavior, and loading state.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://library.sky-ui.com/components/alert\r\n * @dependency sky-icon\r\n *\r\n * @slot - Custom message content (used when `message` is empty).\r\n * @slot actions - Action buttons or links displayed on the trailing side.\r\n *\r\n * @property {string} title - Title text shown above the message.\r\n * @property {string} message - Message text rendered inside the alert.\r\n * @property {boolean} removable - Shows a dismiss button when enabled.\r\n * @property {string} color - Base color token or CSS color used by the alert.\r\n * @property {string} size - Preset size token (`xs | sm | md | lg | xl`) or CSS length.\r\n * @property {string} radius - Radius token or CSS length.\r\n * @property {string | null} icon - Optional leading icon name for `<sky-icon>`.\r\n * @property {SkyAlertStrip} strip - Strip accent placement.\r\n * @property {string} stripColor - Strip accent color token or CSS color.\r\n * @property {SkyAlertVariant} variant - Visual style variant.\r\n * @property {boolean} loading - Shows a loading overlay.\r\n * @property {SkyAlertRoleType} roleType - ARIA role for the alert container.\r\n * @method close Dispatches `alert-closed` and removes the alert from the DOM.\r\n *\r\n * @fires {CustomEvent<SkyAlertClosedEventDetail>} alert-closed - Fired when the alert is dismissed via the close button; bubbles and is composed.\r\n *\r\n * @csspart alert - The outer alert container.\r\n * @csspart icon - The optional leading icon.\r\n * @csspart content - The content container (title + message/slot).\r\n * @csspart title - The title text element.\r\n * @csspart message - The message text element (when `message` is provided).\r\n * @csspart actions - The trailing actions container.\r\n * @csspart close-button - The dismiss button (when `removable`).\r\n * @csspart loading-overlay - Overlay shown when `loading` is true.\r\n * @csspart loading-spinner - Spinner element shown inside the loading overlay.\r\n *\r\n * @Behavior\r\n * - `message` content takes priority over default-slot message content.\r\n * - Dismissing a removable alert dispatches `alert-closed` and removes the element.\r\n * - `strip` controls accent placement (`start`, `end`, `both`, `none`).\r\n * - `role-type=\"alert\"` maps to `aria-live=\"assertive\"`; `alertdialog` maps to `aria-live=\"polite\"`.\r\n * - Respects reduced motion preferences for entry, button hover rotation, and spinner animation.\r\n *\r\n * @example\r\n * ```html\r\n * <sky-alert title=\"Upload Complete\" message=\"Your file is now available.\" variant=\"bordered\" strip=\"start\" removable>\r\n *   <button slot=\"actions\">View</button>\r\n * </sky-alert>\r\n * ```\r\n * ```vue\r\n * <template>\r\n *   <sky-alert title=\"Upload Complete\" message=\"Your file is now available.\" variant=\"bordered\" strip=\"start\" removable>\r\n *     <button slot=\"actions\">View</button>\r\n *   </sky-alert>\r\n * </template>\r\n * ```\r\n * ```jsx\r\n * export default function Demo() {\r\n *   return (\r\n *     <sky-alert title=\"Upload Complete\" message=\"Your file is now available.\" variant=\"bordered\" strip=\"start\" removable>\r\n *       <button slot=\"actions\">View</button>\r\n *     </sky-alert>\r\n *   );\r\n * }\r\n * ```\r\n */\r\n\r\n@customElement(\"sky-alert\")\r\nexport class SkyAlert extends LitElement {\r\n\r\n  static dependencies: Record<string, CustomElementConstructor> = {\r\n    \"sky-icon\": SkyIcon,\r\n  };\r\n\r\n  /** Title text displayed above the message. @default \"\" */\r\n  @property({ type: String }) title: string = \"\";\r\n\r\n  /** Message text displayed inside the alert. @default \"\" */\r\n  @property({ type: String }) message: string = \"\";\r\n\r\n  /** Shows a close button that dismisses the alert. @default false */\r\n  @property({ type: Boolean }) removable: boolean = false;\r\n\r\n  /** Base color token or CSS color. @default \"primary\" */\r\n  @property({ type: String }) color: string = \"primary\";\r\n\r\n  /** Size token (`xs | sm | md | lg | xl`) or CSS length. @default \"md\" */\r\n  @property({ type: String }) size: string = \"md\";\r\n\r\n  /** Radius token or CSS length. @default \"md\" */\r\n  @property({ type: String }) radius: string = \"md\";\r\n\r\n  /** Optional leading icon name for `<sky-icon>`. @default null */\r\n  @property({ type: String }) icon: string | null = null;\r\n\r\n  /** Strip accent position. @default \"none\" */\r\n  @property({ type: String, reflect: true }) strip: SkyAlertStrip = \"none\";\r\n\r\n  /** Strip accent color. @default \"currentColor\" */\r\n  @property({ type: String })\r\n  stripColor: string = \"currentColor\";\r\n\r\n  /** Visual style variant. @default \"solid\" */\r\n  @property({ type: String, reflect: true })\r\n  variant: SkyAlertVariant = \"solid\";\r\n\r\n  /** Shows a loading overlay. @default false */\r\n  @property({ type: Boolean }) loading: boolean = false;\r\n\r\n  /** ARIA role applied to the alert container. @default \"alert\" */\r\n  @property({ type: String, reflect: true })\r\n  roleType: SkyAlertRoleType = \"alert\";\r\n\r\n  /** Internal style variables */\r\n  private _styleVars: Record<string, string> = {};\r\n\r\n  /** Cached result of _resolveSize for the last `size` value (avoids recomputing when only color/variant change). */\r\n  private _sizeCache: { size: string; result: SkyAlertResolvedSize } | null = null;\r\n\r\n  /** True when the actions slot has assigned content (used to show separator only when needed). */\r\n  @state() private _hasActionsSlotContent = false;\r\n\r\n  static override styles = css`\r\n    :host {\r\n      display: block;\r\n      font-family: var(--sky-font);\r\n      width: 100%;\r\n    }\r\n\r\n    .alert {\r\n      position: relative;\r\n      width: 100%;\r\n      box-sizing: border-box;\r\n      display: flex;\r\n      align-items: stretch;\r\n      gap: var(--alert-gap, var(--sky-space-2, 8px));\r\n      padding: var(--alert-padding);\r\n      border-radius: var(--alert-radius);\r\n      border: var(--alert-border, none);\r\n      color: var(--alert-color, var(--sky-text-primary));\r\n      background-color: var(--alert-bg, transparent);\r\n      backdrop-filter: none;\r\n      -webkit-backdrop-filter: none;\r\n      transition: var(--sky-transition-default);\r\n      min-height: var(--alert-min-height, 36px);\r\n      animation: skyc-fade-in var(--sky-duration-fast, 120ms) var(--sky-ease-out, ease-out);\r\n    }\r\n\r\n    /* Strip styles (logical properties for RTL) */\r\n    .alert.strip-start::before,\r\n    .alert.strip-end::after {\r\n      content: \"\";\r\n      position: absolute;\r\n      top: 0;\r\n      bottom: 0;\r\n      width: var(--strip-width, 4px);\r\n      background: var(--strip-color, currentColor);\r\n      z-index: 1;\r\n    }\r\n\r\n    .alert.strip-start::before {\r\n      inset-inline-start: 0;\r\n      border-start-start-radius: inherit;\r\n      border-end-start-radius: inherit;\r\n    }\r\n\r\n    .alert.strip-end::after {\r\n      inset-inline-end: 0;\r\n      border-start-end-radius: inherit;\r\n      border-end-end-radius: inherit;\r\n    }\r\n\r\n    .alert.strip-start {\r\n      border-start-start-radius: 0 !important;\r\n      border-end-start-radius: 0 !important;\r\n    }\r\n    .alert.strip-end {\r\n      border-start-end-radius: 0 !important;\r\n      border-end-end-radius: 0 !important;\r\n    }\r\n\r\n    .alert.strip-start.strip-end {\r\n      border-radius: 0 !important;\r\n    }\r\n\r\n    /* Remove borders on strip sides */\r\n    .alert.strip-start.bordered {\r\n      border-inline-start: none !important;\r\n    }\r\n    .alert.strip-end.bordered {\r\n      border-inline-end: none !important;\r\n    }\r\n    .alert.strip-start.strip-end.bordered {\r\n      border-inline-start: none !important;\r\n      border-inline-end: none !important;\r\n    }\r\n\r\n    .alert.faded.strip-start {\r\n      border-inline-start: none !important;\r\n    }\r\n    .alert.faded.strip-end {\r\n      border-inline-end: none !important;\r\n    }\r\n    .alert.faded.strip-start.strip-end {\r\n      border-inline-start: none !important;\r\n      border-inline-end: none !important;\r\n    }\r\n\r\n    .icon {\r\n      align-self: flex-start;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      font-size: var(--icon-size, 20px);\r\n      color: inherit;\r\n      flex-shrink: 0;\r\n      padding-block-start: 2px;\r\n    }\r\n\r\n    .content {\r\n      flex: 1 1 auto;\r\n      min-width: 0;\r\n      display: flex;\r\n      flex-direction: column;\r\n      justify-content: center;\r\n    }\r\n\r\n    .title {\r\n      font: var(--sky-text-title);\r\n      font-size: var(--title-font-size);\r\n      color: inherit;\r\n      margin: 0 0 var(--sky-space-1, 4px) 0;\r\n    }\r\n\r\n    .message {\r\n      margin: 0;\r\n      text-align: start;\r\n      font: var(--sky-text-body);\r\n      font-size: var(--message-font-size);\r\n      color: inherit;\r\n    }\r\n\r\n    ::slotted(*) {\r\n      font: var(--sky-text-body);\r\n      font-size: var(--message-font-size);\r\n    }\r\n\r\n    .actions {\r\n      display: inline-flex;\r\n      gap: var(--sky-space-2, 8px);\r\n      align-items: center;\r\n      justify-content: flex-end;\r\n      flex: 0 0 auto;\r\n      align-self: stretch;\r\n      border-inline-start: 1px solid var(--sky-border-light);\r\n      padding-inline-start: var(--sky-space-2, 8px);\r\n      margin-inline-start: var(--sky-space-1, 4px);\r\n    }\r\n\r\n    .actions-slot-placeholder {\r\n      position: absolute;\r\n      width: 0;\r\n      height: 0;\r\n      overflow: hidden;\r\n      opacity: 0;\r\n      pointer-events: none;\r\n    }\r\n\r\n    .close-button {\r\n      margin-inline-start: var(--sky-space-1\\\\.5, 6px);\r\n      display: inline-flex;\r\n      aspect-ratio: 1 / 1;\r\n      justify-content: center;\r\n      align-items: center;\r\n      width: var(--close-size, 24px);\r\n      height: var(--close-size, 24px);\r\n      box-sizing: border-box;\r\n      background: var(--close-bg, var(--sky-hover-primary));\r\n      border: none;\r\n      border-radius: var(--sky-radius-full, 50%);\r\n      font-size: var(--close-font-size, 16px);\r\n      cursor: pointer;\r\n      font-weight: var(--sky-font-weight-bold, 700);\r\n      color: var(--close-color, currentColor);\r\n      transition: var(--sky-transition-fast);\r\n      -webkit-tap-highlight-color: transparent;\r\n    }\r\n\r\n    .close-button:hover {\r\n      transform: rotate(90deg);\r\n      background: var(--close-hover-bg, var(--sky-hover-secondary));\r\n      color: var(--close-hover-color, currentColor);\r\n    }\r\n\r\n    .close-button:focus-visible {\r\n      outline: none;\r\n      box-shadow: var(--sky-focus-ring);\r\n      background: var(--close-hover-bg, var(--sky-hover-secondary));\r\n      color: var(--close-hover-color, currentColor);\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-secondary);\r\n      border-radius: inherit;\r\n      backdrop-filter: none;\r\n      -webkit-backdrop-filter: none;\r\n      z-index: 2;\r\n    }\r\n\r\n    .loading-spinner {\r\n      width: var(--spinner-size, 16px);\r\n      height: var(--spinner-size, 16px);\r\n      border: 2px solid currentColor;\r\n      border-top-color: transparent;\r\n      border-radius: var(--sky-radius-full, 50%);\r\n      animation: skyc-spin 0.8s linear infinite;\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      .alert {\r\n        animation: none;\r\n        transition: none;\r\n      }\r\n\r\n      .close-button {\r\n        transition: none;\r\n      }\r\n\r\n      .close-button:hover,\r\n      .close-button:focus-visible {\r\n        transform: none;\r\n      }\r\n\r\n      .loading-spinner {\r\n        animation: none;\r\n      }\r\n    }\r\n\r\n    @keyframes skyc-spin {\r\n      to {\r\n        transform: rotate(360deg);\r\n      }\r\n    }\r\n\r\n    @keyframes skyc-fade-in {\r\n      from {\r\n        opacity: 0;\r\n        transform: translateY(-2px);\r\n      }\r\n      to {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n      }\r\n    }\r\n  `;\r\n\r\n  /**\r\n   * Resolves size to get padding, font sizes, and other metrics.\r\n   * Result is memoized by `size` to avoid recomputing when only color/variant/radius change.\r\n   */\r\n  private _resolveSize(input: string): SkyAlertResolvedSize {\r\n    const key = String(input).trim();\r\n    if (this._sizeCache && this._sizeCache.size === key) return this._sizeCache.result;\r\n\r\n    const presets: Record<\r\n      string,\r\n      {\r\n        padding: string;\r\n        titleFontSize: string;\r\n        messageFontSize: string;\r\n        gap: string;\r\n        icon: string;\r\n        closeSize: string;\r\n        closeFontSize: string;\r\n        spinner: string;\r\n        stripWidth: string;\r\n        minHeight: string;\r\n      }\r\n    > = {\r\n      xs: {\r\n        padding: \"3px 7px\",\r\n        titleFontSize: \"12px\",\r\n        messageFontSize: \"11px\",\r\n        gap: \"4px\",\r\n        icon: \"14px\",\r\n        closeSize: \"18px\",\r\n        closeFontSize: \"12px\",\r\n        spinner: \"12px\",\r\n        stripWidth: \"2px\",\r\n        minHeight: \"28px\",\r\n      },\r\n      sm: {\r\n        padding: \"5px 9px\",\r\n        titleFontSize: \"14px\",\r\n        messageFontSize: \"13px\",\r\n        gap: \"6px\",\r\n        icon: \"16px\",\r\n        closeSize: \"20px\",\r\n        closeFontSize: \"14px\",\r\n        spinner: \"14px\",\r\n        stripWidth: \"3px\",\r\n        minHeight: \"32px\",\r\n      },\r\n      md: {\r\n        padding: \"8px 12px\",\r\n        titleFontSize: \"16px\",\r\n        messageFontSize: \"14px\",\r\n        gap: \"8px\",\r\n        icon: \"20px\",\r\n        closeSize: \"24px\",\r\n        closeFontSize: \"16px\",\r\n        spinner: \"16px\",\r\n        stripWidth: \"4px\",\r\n        minHeight: \"36px\",\r\n      },\r\n      lg: {\r\n        padding: \"10px 14px\",\r\n        titleFontSize: \"18px\",\r\n        messageFontSize: \"15px\",\r\n        gap: \"10px\",\r\n        icon: \"22px\",\r\n        closeSize: \"28px\",\r\n        closeFontSize: \"18px\",\r\n        spinner: \"18px\",\r\n        stripWidth: \"5px\",\r\n        minHeight: \"40px\",\r\n      },\r\n      xl: {\r\n        padding: \"12px 16px\",\r\n        titleFontSize: \"20px\",\r\n        messageFontSize: \"16px\",\r\n        gap: \"12px\",\r\n        icon: \"24px\",\r\n        closeSize: \"32px\",\r\n        closeFontSize: \"20px\",\r\n        spinner: \"20px\",\r\n        stripWidth: \"6px\",\r\n        minHeight: \"44px\",\r\n      },\r\n    };\r\n\r\n    if (presets[input]) {\r\n      this._sizeCache = { size: key, result: presets[input] };\r\n      return presets[input];\r\n    }\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 titleFs = fs;\r\n    const messageFs = clamp(fsNum * 0.875, 11, 16);\r\n    const py = clamp(fsNum * 0.5, 3, 12);\r\n    const px = clamp(fsNum * 0.75, 7, 16);\r\n    const gap = clamp(fsNum * 0.5, 4, 12);\r\n    const icon = clamp(fsNum * 1.25, 14, 24);\r\n    const closeSize = clamp(fsNum * 1.5, 18, 32);\r\n    const closeFont = clamp(fsNum * 1, 12, 20);\r\n    const spinner = clamp(fsNum * 1, 12, 20);\r\n    const stripWidth = clamp(fsNum * 0.25, 2, 6);\r\n    const minHeight = clamp(fsNum * 2.25, 28, 44);\r\n\r\n    return {\r\n      padding: `${to(py)} ${to(px)}`,\r\n      titleFontSize: titleFs,\r\n      messageFontSize: to(messageFs),\r\n      gap: to(gap),\r\n      icon: to(icon),\r\n      closeSize: to(closeSize),\r\n      closeFontSize: to(closeFont),\r\n      spinner: to(spinner),\r\n      stripWidth: to(stripWidth),\r\n      minHeight: to(minHeight),\r\n    };\r\n  }\r\n\r\n  /** Recomputes style variables when visual inputs change. */\r\n  override willUpdate(changedProperties: PropertyValues): void {\r\n    super.willUpdate(changedProperties);\r\n\r\n    if (\r\n      changedProperties.has(\"color\") ||\r\n      changedProperties.has(\"variant\") ||\r\n      changedProperties.has(\"stripColor\") ||\r\n      changedProperties.has(\"radius\") ||\r\n      changedProperties.has(\"size\")\r\n    ) {\r\n      this._updateStyleVars();\r\n    }\r\n  }\r\n\r\n  /** Initializes actions-slot presence state after first render. */\r\n  override firstUpdated(): void {\r\n    queueMicrotask(() => this._checkActionsSlot());\r\n  }\r\n\r\n  /** Computes CSS custom properties from current variant, size, and color inputs. */\r\n  private _updateStyleVars(): void {\r\n    const baseColor = resolveColor(this.color);\r\n    const textColor = resolveTextColorForToken(this.color);\r\n    const stripColorResolved = this.stripColor === \"currentColor\"\r\n      ? baseColor\r\n      : resolveColor(this.stripColor);\r\n\r\n    const s = this._resolveSize(this.size);\r\n\r\n    const semanticKey = resolveSemanticSurfaceKey(this.color);\r\n\r\n    const variantStyles = {\r\n      solid: {\r\n        bg: baseColor,\r\n        color: textColor,\r\n        border: \"none\",\r\n      },\r\n      flat: semanticKey\r\n        ? semanticSoftSurfaceTokens(semanticKey)\r\n        : {\r\n            bg: fadeMix(baseColor, 20),\r\n            color: hoverShade(baseColor, 30),\r\n            border: \"none\",\r\n          },\r\n      faded: semanticKey\r\n        ? semanticSoftSurfaceTokens(semanticKey, { bordered: true })\r\n        : {\r\n            bg: \"var(--sky-hover-tertiary)\",\r\n            color: baseColor,\r\n            border: \"1px solid var(--sky-text-tertiary)\",\r\n          },\r\n      bordered: {\r\n        bg: \"transparent\",\r\n        color: semanticKey\r\n          ? `var(--sky-${semanticKey}-primary-dark)`\r\n          : baseColor,\r\n        border: `2px solid ${baseColor}`,\r\n      },\r\n      light: {\r\n        bg: \"transparent\",\r\n        color: semanticKey\r\n          ? `var(--sky-${semanticKey}-primary-dark)`\r\n          : baseColor,\r\n        border: \"none\",\r\n      },\r\n    } as const;\r\n\r\n    const currentVariant = this.variant in variantStyles\r\n      ? this.variant as keyof typeof variantStyles\r\n      : \"flat\";\r\n\r\n    let v = tuneSurfaceVariantForDefaultColor(\r\n      this.color,\r\n      currentVariant,\r\n      variantStyles[currentVariant],\r\n    );\r\n\r\n    if (\r\n      isDefaultColorToken(this.color) &&\r\n      (currentVariant === \"flat\" || currentVariant === \"faded\")\r\n    ) {\r\n      v = {\r\n        ...v,\r\n        bg: \"var(--sky-glass-solid)\",\r\n        color: \"var(--sky-text-primary)\",\r\n        border: currentVariant === \"faded\" ? skyBorderPrimaryShorthand() : \"none\",\r\n      };\r\n    }\r\n\r\n    let closeBg = \"var(--sky-hover-primary)\";\r\n    let closeColor = \"currentColor\";\r\n    let closeHoverBg = \"var(--sky-hover-secondary)\";\r\n    let closeHoverColor = \"currentColor\";\r\n\r\n    if (currentVariant === \"solid\") {\r\n      closeBg = fadeMix(textColor, 20);\r\n      closeColor = textColor;\r\n      closeHoverBg = fadeMix(textColor, 30);\r\n      closeHoverColor = textColor;\r\n    } else if (currentVariant === \"flat\" || currentVariant === \"faded\") {\r\n      if (semanticKey) {\r\n        closeBg = `var(--sky-${semanticKey}-g0)`;\r\n        closeColor = v.color;\r\n        closeHoverBg = `var(--sky-${semanticKey}-g1)`;\r\n        closeHoverColor = v.color;\r\n      } else if (isDefaultColorToken(this.color)) {\r\n        closeBg = \"var(--sky-hover-primary)\";\r\n        closeColor = v.color;\r\n        closeHoverBg = \"var(--sky-hover-secondary)\";\r\n        closeHoverColor = v.color;\r\n      } else {\r\n        closeBg = fadeMix(baseColor, 15);\r\n        closeColor = v.color;\r\n        closeHoverBg = fadeMix(baseColor, 25);\r\n        closeHoverColor = v.color;\r\n      }\r\n    }\r\n\r\n    this._styleVars = {\r\n      \"--alert-bg\": v.bg,\r\n      \"--alert-color\": v.color,\r\n      \"--alert-border\": v.border,\r\n      \"--alert-radius\": resolveRadius(this.radius),\r\n      \"--alert-padding\": s.padding,\r\n      \"--alert-gap\": s.gap,\r\n      \"--alert-min-height\": s.minHeight,\r\n      \"--title-font-size\": s.titleFontSize,\r\n      \"--message-font-size\": s.messageFontSize,\r\n      \"--icon-size\": s.icon,\r\n      \"--close-size\": s.closeSize,\r\n      \"--close-font-size\": s.closeFontSize,\r\n      \"--spinner-size\": s.spinner,\r\n      \"--strip-color\": stripColorResolved,\r\n      \"--strip-width\": s.stripWidth,\r\n      \"--close-bg\": closeBg,\r\n      \"--close-color\": closeColor,\r\n      \"--close-hover-bg\": closeHoverBg,\r\n      \"--close-hover-color\": closeHoverColor,\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Dispatches `alert-closed` and removes the alert from the DOM.\r\n   *\r\n   * @returns {void}\r\n   */\r\n  public close(): void {\r\n    const evt = new CustomEvent<SkyAlertClosedEventDetail>(\"alert-closed\", {\r\n      detail: { title: this.title, message: this.message },\r\n      bubbles: true,\r\n      composed: true,\r\n    });\r\n    this.dispatchEvent(evt);\r\n    this.remove();\r\n  }\r\n\r\n  /** Returns the ARIA role applied to the alert container. */\r\n  private getAriaRole(): SkyAlertRoleType {\r\n    return this.roleType;\r\n  }\r\n\r\n  /** Checks whether the actions slot currently has meaningful assigned content. */\r\n  private _checkActionsSlot(): void {\r\n    const slot = this.renderRoot?.querySelector<HTMLSlotElement>('slot[name=\"actions\"]');\r\n    if (!slot) return;\r\n    const nodes = slot.assignedNodes({ flatten: true });\r\n    const hasContent = nodes.some(\r\n      (n) => n.nodeType !== Node.TEXT_NODE || (n.textContent?.trim().length ?? 0) > 0,\r\n    );\r\n    if (hasContent !== this._hasActionsSlotContent) {\r\n      this._hasActionsSlotContent = hasContent;\r\n    }\r\n  }\r\n\r\n  /** Updates action-slot state when the slot assignment changes. */\r\n  private _onActionsSlotChange(e: Event): void {\r\n    const slot = e.target as HTMLSlotElement;\r\n    const nodes = slot.assignedNodes({ flatten: true });\r\n    const hasContent = nodes.some(\r\n      (n) => n.nodeType !== Node.TEXT_NODE || (n.textContent?.trim().length ?? 0) > 0,\r\n    );\r\n    this._hasActionsSlotContent = hasContent;\r\n  }\r\n\r\n  override render() {\r\n    const roleAttr = this.getAriaRole();\r\n    const alertClasses = classMap({\r\n      alert: true,\r\n      [this.variant]: true,\r\n      \"strip-start\": this.strip === \"start\" || this.strip === \"both\",\r\n      \"strip-end\": this.strip === \"end\" || this.strip === \"both\",\r\n    });\r\n\r\n    return html`\r\n      <div\r\n        part=\"alert\"\r\n        class=${alertClasses}\r\n        role=\"${roleAttr}\"\r\n        aria-live=\"${this.roleType === \"alert\" ? \"assertive\" : \"polite\"}\"\r\n        style=${styleMap(this._styleVars)}\r\n      >\r\n        ${when(\r\n          this.icon,\r\n          () => html`<sky-icon part=\"icon\" class=\"icon\" icon=\"${this.icon!}\"></sky-icon>`,\r\n        )}\r\n\r\n        <div part=\"content\" class=\"content\">\r\n          ${when(\r\n            this.title,\r\n            () => html`<div part=\"title\" class=\"title\">${this.title}</div>`,\r\n          )}\r\n          ${when(\r\n            this.message,\r\n            () => html`<p part=\"message\" class=\"message\">${this.message}</p>`,\r\n            () => html`<slot></slot>`,\r\n          )}\r\n        </div>\r\n\r\n        ${when(\r\n          this._hasActionsSlotContent || this.removable,\r\n          () => html`\r\n            <div part=\"actions\" class=\"actions\">\r\n              <slot name=\"actions\" @slotchange=${this._onActionsSlotChange}></slot>\r\n              ${when(\r\n                this.removable,\r\n                () => html`\r\n                  <button\r\n                    part=\"close-button\"\r\n                    class=\"close-button\"\r\n                    type=\"button\"\r\n                    @click=${this.close}\r\n                    aria-label=\"Dismiss alert\"\r\n                    title=\"Dismiss\"\r\n                  >\r\n                    <sky-icon icon=\"ion:close\"></sky-icon>\r\n                  </button>\r\n                `,\r\n              )}\r\n            </div>\r\n          `,\r\n          () => html`\r\n            <div class=\"actions-slot-placeholder\" aria-hidden=\"true\">\r\n              <slot name=\"actions\" @slotchange=${this._onActionsSlotChange}></slot>\r\n            </div>\r\n          `,\r\n        )}\r\n\r\n        ${when(\r\n          this.loading,\r\n          () => html`\r\n            <div part=\"loading-overlay\" class=\"loading-overlay\">\r\n              <div part=\"loading-spinner\" class=\"loading-spinner\"></div>\r\n            </div>\r\n          `,\r\n        )}\r\n      </div>\r\n    `;\r\n  }\r\n}"],"names":["SkyAlert","LitElement","constructor","super","arguments","this","title","message","removable","color","size","radius","icon","strip","stripColor","variant","loading","roleType","_styleVars","_sizeCache","_hasActionsSlotContent","_resolveSize","input","key","String","trim","result","presets","xs","padding","titleFontSize","messageFontSize","gap","closeSize","closeFontSize","spinner","stripWidth","minHeight","sm","md","lg","xl","m","match","unit","fsNum","parseFloat","to","n","Math","round","clamp","min","max","titleFs","messageFs","py","px","closeFont","willUpdate","changedProperties","has","_updateStyleVars","firstUpdated","queueMicrotask","_checkActionsSlot","baseColor","resolveColor","textColor","resolveTextColorForToken","stripColorResolved","s","semanticKey","resolveSemanticSurfaceKey","variantStyles","solid","bg","border","flat","semanticSoftSurfaceTokens","fadeMix","hoverShade","faded","bordered","light","currentVariant","v","tuneSurfaceVariantForDefaultColor","isDefaultColorToken","skyBorderPrimaryShorthand","closeBg","closeColor","closeHoverBg","closeHoverColor","resolveRadius","close","evt","CustomEvent","detail","bubbles","composed","dispatchEvent","remove","getAriaRole","slot","renderRoot","querySelector","hasContent","assignedNodes","flatten","some","nodeType","Node","TEXT_NODE","textContent","length","_onActionsSlotChange","e","target","render","roleAttr","alertClasses","classMap","alert","html","styleMap","when","dependencies","SkyIcon","styles","css","__decorateClass","property","type","prototype","Boolean","reflect","state","customElement"],"mappings":"u2BA6GO,IAAMA,EAAN,cAAuBC,EAAvB,WAAAC,GAAAC,SAAAC,WAOuBC,KAAAC,MAAgB,GAGhBD,KAAAE,QAAkB,GAGjBF,KAAAG,WAAqB,EAGtBH,KAAAI,MAAgB,UAGhBJ,KAAAK,KAAe,KAGfL,KAAAM,OAAiB,KAGjBN,KAAAO,KAAsB,KAGPP,KAAAQ,MAAuB,OAIlER,KAAAS,WAAqB,eAIrBT,KAAAU,QAA2B,QAGEV,KAAAW,SAAmB,EAIhDX,KAAAY,SAA6B,QAG7BZ,KAAQa,WAAqC,CAAA,EAG7Cb,KAAQc,WAAoE,KAGnEd,KAAQe,wBAAyB,CAAA,CAqPlC,YAAAC,CAAaC,GACnB,MAAMC,EAAMC,OAAOF,GAAOG,OAC1B,GAAIpB,KAAKc,YAAcd,KAAKc,WAAWT,OAASa,EAAK,OAAOlB,KAAKc,WAAWO,OAE5E,MAAMC,EAcF,CACFC,GAAI,CACFC,QAAS,UACTC,cAAe,OACfC,gBAAiB,OACjBC,IAAK,MACLpB,KAAM,OACNqB,UAAW,OACXC,cAAe,OACfC,QAAS,OACTC,WAAY,MACZC,UAAW,QAEbC,GAAI,CACFT,QAAS,UACTC,cAAe,OACfC,gBAAiB,OACjBC,IAAK,MACLpB,KAAM,OACNqB,UAAW,OACXC,cAAe,OACfC,QAAS,OACTC,WAAY,MACZC,UAAW,QAEbE,GAAI,CACFV,QAAS,WACTC,cAAe,OACfC,gBAAiB,OACjBC,IAAK,MACLpB,KAAM,OACNqB,UAAW,OACXC,cAAe,OACfC,QAAS,OACTC,WAAY,MACZC,UAAW,QAEbG,GAAI,CACFX,QAAS,YACTC,cAAe,OACfC,gBAAiB,OACjBC,IAAK,OACLpB,KAAM,OACNqB,UAAW,OACXC,cAAe,OACfC,QAAS,OACTC,WAAY,MACZC,UAAW,QAEbI,GAAI,CACFZ,QAAS,YACTC,cAAe,OACfC,gBAAiB,OACjBC,IAAK,OACLpB,KAAM,OACNqB,UAAW,OACXC,cAAe,OACfC,QAAS,OACTC,WAAY,MACZC,UAAW,SAIf,GAAIV,EAAQL,GAEV,OADAjB,KAAKc,WAAa,CAAET,KAAMa,EAAKG,OAAQC,EAAQL,IACxCK,EAAQL,GAGjB,MAAMoB,EAAIlB,OAAOF,GACdG,OACAkB,MAAM,2BACHC,EAAOF,IAAI,IAAM,KACjBG,EAAQH,EAAII,WAAWJ,EAAE,IAAM,GAG/BK,EAAMC,GAAc,GAAGC,KAAKC,MAAU,IAAJF,GAAW,MAAMJ,IACnDO,EAAQ,CAACH,EAAWI,EAAaC,IACrCJ,KAAKI,IAAID,EAAKH,KAAKG,IAAIC,EAAKL,IAExBM,EANK,GAAGT,IAAQD,IAOhBW,EAAYJ,EAAc,KAARN,EAAe,GAAI,IACrCW,EAAKL,EAAc,GAARN,EAAa,EAAG,IAC3BY,EAAKN,EAAc,IAARN,EAAc,EAAG,IAC5Bb,EAAMmB,EAAc,GAARN,EAAa,EAAG,IAC5BjC,EAAOuC,EAAc,KAARN,EAAc,GAAI,IAC/BZ,EAAYkB,EAAc,IAARN,EAAa,GAAI,IACnCa,EAAYP,EAAc,EAARN,EAAW,GAAI,IACjCV,EAAUgB,EAAc,EAARN,EAAW,GAAI,IAC/BT,EAAae,EAAc,IAARN,EAAc,EAAG,GACpCR,EAAYc,EAAc,KAARN,EAAc,GAAI,IAE1C,MAAO,CACLhB,QAAS,GAAGkB,EAAGS,MAAOT,EAAGU,KACzB3B,cAAewB,EACfvB,gBAAiBgB,EAAGQ,GACpBvB,IAAKe,EAAGf,GACRpB,KAAMmC,EAAGnC,GACTqB,UAAWc,EAAGd,GACdC,cAAea,EAAGW,GAClBvB,QAASY,EAAGZ,GACZC,WAAYW,EAAGX,GACfC,UAAWU,EAAGV,GAElB,CAGS,UAAAsB,CAAWC,GAClBzD,MAAMwD,WAAWC,IAGfA,EAAkBC,IAAI,UACtBD,EAAkBC,IAAI,YACtBD,EAAkBC,IAAI,eACtBD,EAAkBC,IAAI,WACtBD,EAAkBC,IAAI,UAEtBxD,KAAKyD,kBAET,CAGS,YAAAC,GACPC,eAAe,IAAM3D,KAAK4D,oBAC5B,CAGQ,gBAAAH,GACN,MAAMI,EAAYC,EAAa9D,KAAKI,OAC9B2D,EAAYC,EAAyBhE,KAAKI,OAC1C6D,EAAyC,iBAApBjE,KAAKS,WAC5BoD,EACAC,EAAa9D,KAAKS,YAEhByD,EAAIlE,KAAKgB,aAAahB,KAAKK,MAE3B8D,EAAcC,EAA0BpE,KAAKI,OAE7CiE,EAAgB,CACpBC,MAAO,CACLC,GAAIV,EACJzD,MAAO2D,EACPS,OAAQ,QAEVC,KAAMN,EACFO,EAA0BP,GAC1B,CACEI,GAAII,EAAQd,EAAW,IACvBzD,MAAOwE,EAAWf,EAAW,IAC7BW,OAAQ,QAEdK,MAAOV,EACHO,EAA0BP,EAAa,CAAEW,UAAU,IACnD,CACEP,GAAI,4BACJnE,MAAOyD,EACPW,OAAQ,sCAEdM,SAAU,CACRP,GAAI,cACJnE,MAAO+D,EACH,aAAaA,kBACbN,EACJW,OAAQ,aAAaX,KAEvBkB,MAAO,CACLR,GAAI,cACJnE,MAAO+D,EACH,aAAaA,kBACbN,EACJW,OAAQ,SAINQ,EAAiBhF,KAAKU,WAAW2D,EACnCrE,KAAKU,QACL,OAEJ,IAAIuE,EAAIC,EACNlF,KAAKI,MACL4E,EACAX,EAAcW,KAIdG,EAAoBnF,KAAKI,QACL,SAAnB4E,GAAgD,UAAnBA,IAE9BC,EAAI,IACCA,EACHV,GAAI,yBACJnE,MAAO,0BACPoE,OAA2B,UAAnBQ,EAA6BI,IAA8B,SAIvE,IAAIC,EAAU,2BACVC,EAAa,eACbC,EAAe,6BACfC,EAAkB,eAEC,UAAnBR,GACFK,EAAUV,EAAQZ,EAAW,IAC7BuB,EAAavB,EACbwB,EAAeZ,EAAQZ,EAAW,IAClCyB,EAAkBzB,GACU,SAAnBiB,GAAgD,UAAnBA,IAClCb,GACFkB,EAAU,aAAalB,QACvBmB,EAAaL,EAAE7E,MACfmF,EAAe,aAAapB,QAC5BqB,EAAkBP,EAAE7E,OACX+E,EAAoBnF,KAAKI,QAClCiF,EAAU,2BACVC,EAAaL,EAAE7E,MACfmF,EAAe,6BACfC,EAAkBP,EAAE7E,QAEpBiF,EAAUV,EAAQd,EAAW,IAC7ByB,EAAaL,EAAE7E,MACfmF,EAAeZ,EAAQd,EAAW,IAClC2B,EAAkBP,EAAE7E,QAIxBJ,KAAKa,WAAa,CAChB,aAAcoE,EAAEV,GAChB,gBAAiBU,EAAE7E,MACnB,iBAAkB6E,EAAET,OACpB,iBAAkBiB,EAAczF,KAAKM,QACrC,kBAAmB4D,EAAE1C,QACrB,cAAe0C,EAAEvC,IACjB,qBAAsBuC,EAAElC,UACxB,oBAAqBkC,EAAEzC,cACvB,sBAAuByC,EAAExC,gBACzB,cAAewC,EAAE3D,KACjB,eAAgB2D,EAAEtC,UAClB,oBAAqBsC,EAAErC,cACvB,iBAAkBqC,EAAEpC,QACpB,gBAAiBmC,EACjB,gBAAiBC,EAAEnC,WACnB,aAAcsD,EACd,gBAAiBC,EACjB,mBAAoBC,EACpB,sBAAuBC,EAE3B,CAOO,KAAAE,GACL,MAAMC,EAAM,IAAIC,YAAuC,eAAgB,CACrEC,OAAQ,CAAE5F,MAAOD,KAAKC,MAAOC,QAASF,KAAKE,SAC3C4F,SAAS,EACTC,UAAU,IAEZ/F,KAAKgG,cAAcL,GACnB3F,KAAKiG,QACP,CAGQ,WAAAC,GACN,OAAOlG,KAAKY,QACd,CAGQ,iBAAAgD,GACN,MAAMuC,EAAOnG,KAAKoG,YAAYC,cAA+B,wBAC7D,IAAKF,EAAM,OACX,MACMG,EADQH,EAAKI,cAAc,CAAEC,SAAS,IACnBC,KACtB9D,GAAMA,EAAE+D,WAAaC,KAAKC,YAAcjE,EAAEkE,aAAazF,OAAO0F,QAAU,GAAK,GAE5ER,IAAetG,KAAKe,yBACtBf,KAAKe,uBAAyBuF,EAElC,CAGQ,oBAAAS,CAAqBC,GAC3B,MAEMV,EAFOU,EAAEC,OACIV,cAAc,CAAEC,SAAS,IACnBC,KACtB9D,GAAMA,EAAE+D,WAAaC,KAAKC,YAAcjE,EAAEkE,aAAazF,OAAO0F,QAAU,GAAK,GAEhF9G,KAAKe,uBAAyBuF,CAChC,CAES,MAAAY,GACP,MAAMC,EAAWnH,KAAKkG,cAChBkB,EAAeC,EAAS,CAC5BC,OAAO,EACP,CAACtH,KAAKU,UAAU,EAChB,cAA8B,UAAfV,KAAKQ,OAAoC,SAAfR,KAAKQ,MAC9C,YAA4B,QAAfR,KAAKQ,OAAkC,SAAfR,KAAKQ,QAG5C,OAAO+G,CAAA;;;gBAGKH;gBACAD;qBACuB,UAAlBnH,KAAKY,SAAuB,YAAc;gBAC/C4G,EAASxH,KAAKa;;UAEpB4G,EACAzH,KAAKO,KACL,IAAMgH,CAAA,4CAAgDvH,KAAKO;;;YAIzDkH,EACAzH,KAAKC,MACL,IAAMsH,CAAA,mCAAuCvH,KAAKC;YAElDwH,EACAzH,KAAKE,QACL,IAAMqH,CAAA,qCAAyCvH,KAAKE,cACpD,IAAMqH,CAAA;;;UAIRE,EACAzH,KAAKe,wBAA0Bf,KAAKG,UACpC,IAAMoH,CAAA;;iDAEiCvH,KAAK+G;gBACtCU,EACAzH,KAAKG,UACL,IAAMoH,CAAA;;;;;6BAKOvH,KAAK0F;;;;;;;;YAUxB,IAAM6B,CAAA;;iDAEiCvH,KAAK+G;;;;UAK5CU,EACAzH,KAAKW,QACL,IAAM4G,CAAA;;;;;;KAQd,GAtqBW5H,EAEJ+H,aAAyD,CAC9D,WAAYC,GAHHhI,EAsDKiI,OAASC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA/CGC,EAAA,CAA3BC,EAAS,CAAEC,KAAM7G,UAPPxB,EAOiBsI,UAAA,QAAA,GAGAH,EAAA,CAA3BC,EAAS,CAAEC,KAAM7G,UAVPxB,EAUiBsI,UAAA,UAAA,GAGCH,EAAA,CAA5BC,EAAS,CAAEC,KAAME,WAbPvI,EAakBsI,UAAA,YAAA,GAGDH,EAAA,CAA3BC,EAAS,CAAEC,KAAM7G,UAhBPxB,EAgBiBsI,UAAA,QAAA,GAGAH,EAAA,CAA3BC,EAAS,CAAEC,KAAM7G,UAnBPxB,EAmBiBsI,UAAA,OAAA,GAGAH,EAAA,CAA3BC,EAAS,CAAEC,KAAM7G,UAtBPxB,EAsBiBsI,UAAA,SAAA,GAGAH,EAAA,CAA3BC,EAAS,CAAEC,KAAM7G,UAzBPxB,EAyBiBsI,UAAA,OAAA,GAGeH,EAAA,CAA1CC,EAAS,CAAEC,KAAM7G,OAAQgH,SAAS,KA5BxBxI,EA4BgCsI,UAAA,QAAA,GAI3CH,EAAA,CADCC,EAAS,CAAEC,KAAM7G,UA/BPxB,EAgCXsI,UAAA,aAAA,GAIAH,EAAA,CADCC,EAAS,CAAEC,KAAM7G,OAAQgH,SAAS,KAnCxBxI,EAoCXsI,UAAA,UAAA,GAG6BH,EAAA,CAA5BC,EAAS,CAAEC,KAAME,WAvCPvI,EAuCkBsI,UAAA,UAAA,GAI7BH,EAAA,CADCC,EAAS,CAAEC,KAAM7G,OAAQgH,SAAS,KA1CxBxI,EA2CXsI,UAAA,WAAA,GASiBH,EAAA,CAAhBM,KApDUzI,EAoDMsI,UAAA,yBAAA,GApDNtI,EAANmI,EAAA,CADNO,EAAc,cACF1I"}
+{"version":3,"file":"sky-alert.js","sources":["../../src/sky-alert/sky-alert.ts"],"sourcesContent":["import { LitElement, html, css, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { customElement, property, state } from \"lit/decorators.js\";\r\nimport { styleMap } from \"lit/directives/style-map.js\";\r\nimport { classMap } from \"lit/directives/class-map.js\";\r\nimport { when } from \"lit/directives/when.js\";\r\nimport { resolveRadius } from \"../helper/utils/size-resolver\";\r\nimport {\r\n  resolveColor,\r\n  resolveTextColorForToken,\r\n  fadeMix,\r\n  hoverShade,\r\n  isDefaultColorToken,\r\n  tuneSurfaceVariantForDefaultColor,\r\n  resolveSemanticSurfaceKey,\r\n  semanticSoftSurfaceTokens,\r\n  skyBorderPrimaryShorthand,\r\n} from \"../helper/utils/color-resolver\";\r\nimport { cssOnFillEnhance } from \"../helper/utils/contrast-color\";\r\nimport { SkyIcon } from \"../sky-icon/sky-icon.js\";\r\n\r\nexport type SkyAlertClosedEventDetail = { title: string; message: string };\r\nexport type SkyAlertStrip = \"start\" | \"end\" | \"both\" | \"none\";\r\nexport type SkyAlertVariant = \"flat\" | \"bordered\" | \"light\" | \"faded\" | \"solid\";\r\nexport type SkyAlertRoleType = \"alert\" | \"alertdialog\";\r\n/** Resolved size metrics returned by `SkyAlert._resolveSize()`. */\r\ntype SkyAlertResolvedSize = {\r\n  padding: string;\r\n  titleFontSize: string;\r\n  messageFontSize: string;\r\n  gap: string;\r\n  icon: string;\r\n  closeSize: string;\r\n  closeFontSize: string;\r\n  spinner: string;\r\n  stripWidth: string;\r\n  minHeight: string;\r\n};\r\n\r\n/**\r\n * @element sky-alert\r\n *\r\n * @summary Status alert banner with variants, optional icon, strip accents, actions, dismiss behavior, and loading state.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://library.sky-ui.com/components/alert\r\n * @dependency sky-icon\r\n *\r\n * @slot - Custom message content (used when `message` is empty).\r\n * @slot actions - Action buttons or links displayed on the trailing side.\r\n *\r\n * @property {string} title - Title text shown above the message.\r\n * @property {string} message - Message text rendered inside the alert.\r\n * @property {boolean} removable - Shows a dismiss button when enabled.\r\n * @property {string} color - Base color token or CSS color used by the alert.\r\n * @property {string} size - Preset size token (`xs | sm | md | lg | xl`) or CSS length.\r\n * @property {string} radius - Radius token or CSS length.\r\n * @property {string | null} icon - Optional leading icon name for `<sky-icon>`.\r\n * @property {SkyAlertStrip} strip - Strip accent placement.\r\n * @property {string} stripColor - Strip accent color token or CSS color.\r\n * @property {SkyAlertVariant} variant - Visual style variant.\r\n * @property {boolean} loading - Shows a loading overlay.\r\n * @property {SkyAlertRoleType} roleType - ARIA role for the alert container.\r\n * @method close Dispatches `alert-closed` and removes the alert from the DOM.\r\n *\r\n * @fires {CustomEvent<SkyAlertClosedEventDetail>} alert-closed - Fired when the alert is dismissed via the close button; bubbles and is composed.\r\n *\r\n * @csspart alert - The outer alert container.\r\n * @csspart icon - The optional leading icon.\r\n * @csspart content - The content container (title + message/slot).\r\n * @csspart title - The title text element.\r\n * @csspart message - The message text element (when `message` is provided).\r\n * @csspart actions - The trailing actions container.\r\n * @csspart close-button - The dismiss button (when `removable`).\r\n * @csspart loading-overlay - Overlay shown when `loading` is true.\r\n * @csspart loading-spinner - Spinner element shown inside the loading overlay.\r\n *\r\n * @Behavior\r\n * - `message` content takes priority over default-slot message content.\r\n * - Dismissing a removable alert dispatches `alert-closed` and removes the element.\r\n * - `strip` controls accent placement (`start`, `end`, `both`, `none`).\r\n * - `role-type=\"alert\"` maps to `aria-live=\"assertive\"`; `alertdialog` maps to `aria-live=\"polite\"`.\r\n * - Respects reduced motion preferences for entry, button hover rotation, and spinner animation.\r\n *\r\n * @example\r\n * ```html\r\n * <sky-alert title=\"Upload Complete\" message=\"Your file is now available.\" variant=\"bordered\" strip=\"start\" removable>\r\n *   <button slot=\"actions\">View</button>\r\n * </sky-alert>\r\n * ```\r\n * ```vue\r\n * <template>\r\n *   <sky-alert title=\"Upload Complete\" message=\"Your file is now available.\" variant=\"bordered\" strip=\"start\" removable>\r\n *     <button slot=\"actions\">View</button>\r\n *   </sky-alert>\r\n * </template>\r\n * ```\r\n * ```jsx\r\n * export default function Demo() {\r\n *   return (\r\n *     <sky-alert title=\"Upload Complete\" message=\"Your file is now available.\" variant=\"bordered\" strip=\"start\" removable>\r\n *       <button slot=\"actions\">View</button>\r\n *     </sky-alert>\r\n *   );\r\n * }\r\n * ```\r\n */\r\n\r\n@customElement(\"sky-alert\")\r\nexport class SkyAlert extends LitElement {\r\n\r\n  static dependencies: Record<string, CustomElementConstructor> = {\r\n    \"sky-icon\": SkyIcon,\r\n  };\r\n\r\n  /** Title text displayed above the message. @default \"\" */\r\n  @property({ type: String }) title: string = \"\";\r\n\r\n  /** Message text displayed inside the alert. @default \"\" */\r\n  @property({ type: String }) message: string = \"\";\r\n\r\n  /** Shows a close button that dismisses the alert. @default false */\r\n  @property({ type: Boolean }) removable: boolean = false;\r\n\r\n  /** Base color token or CSS color. @default \"primary\" */\r\n  @property({ type: String }) color: string = \"primary\";\r\n\r\n  /** Size token (`xs | sm | md | lg | xl`) or CSS length. @default \"md\" */\r\n  @property({ type: String }) size: string = \"md\";\r\n\r\n  /** Radius token or CSS length. @default \"md\" */\r\n  @property({ type: String }) radius: string = \"md\";\r\n\r\n  /** Optional leading icon name for `<sky-icon>`. @default null */\r\n  @property({ type: String }) icon: string | null = null;\r\n\r\n  /** Strip accent position. @default \"none\" */\r\n  @property({ type: String, reflect: true }) strip: SkyAlertStrip = \"none\";\r\n\r\n  /** Strip accent color. @default \"currentColor\" */\r\n  @property({ type: String })\r\n  stripColor: string = \"currentColor\";\r\n\r\n  /** Visual style variant. @default \"solid\" */\r\n  @property({ type: String, reflect: true })\r\n  variant: SkyAlertVariant = \"solid\";\r\n\r\n  /** Shows a loading overlay. @default false */\r\n  @property({ type: Boolean }) loading: boolean = false;\r\n\r\n  /** ARIA role applied to the alert container. @default \"alert\" */\r\n  @property({ type: String, reflect: true })\r\n  roleType: SkyAlertRoleType = \"alert\";\r\n\r\n  /** Internal style variables */\r\n  private _styleVars: Record<string, string> = {};\r\n\r\n  /** Cached result of _resolveSize for the last `size` value (avoids recomputing when only color/variant change). */\r\n  private _sizeCache: { size: string; result: SkyAlertResolvedSize } | null = null;\r\n\r\n  /** True when the actions slot has assigned content (used to show separator only when needed). */\r\n  @state() private _hasActionsSlotContent = false;\r\n\r\n  static override styles = css`\r\n    :host {\r\n      display: block;\r\n      font-family: var(--sky-font);\r\n      width: 100%;\r\n    }\r\n\r\n    .alert {\r\n      position: relative;\r\n      width: 100%;\r\n      box-sizing: border-box;\r\n      display: flex;\r\n      align-items: stretch;\r\n      gap: var(--alert-gap, var(--sky-space-2, 8px));\r\n      padding: var(--alert-padding);\r\n      border-radius: var(--alert-radius);\r\n      border: var(--alert-border, none);\r\n      color: var(--alert-color, var(--sky-text-primary));\r\n      background-color: var(--alert-bg, transparent);\r\n      backdrop-filter: none;\r\n      -webkit-backdrop-filter: none;\r\n      transition: var(--sky-transition-default);\r\n      min-height: var(--alert-min-height, 36px);\r\n      animation: skyc-fade-in var(--sky-duration-fast, 120ms) var(--sky-ease-out, ease-out);\r\n    }\r\n\r\n    /* Strip styles (logical properties for RTL) */\r\n    .alert.strip-start::before,\r\n    .alert.strip-end::after {\r\n      content: \"\";\r\n      position: absolute;\r\n      top: 0;\r\n      bottom: 0;\r\n      width: var(--strip-width, 4px);\r\n      background: var(--strip-color, currentColor);\r\n      z-index: 1;\r\n    }\r\n\r\n    .alert.strip-start::before {\r\n      inset-inline-start: 0;\r\n      border-start-start-radius: inherit;\r\n      border-end-start-radius: inherit;\r\n    }\r\n\r\n    .alert.strip-end::after {\r\n      inset-inline-end: 0;\r\n      border-start-end-radius: inherit;\r\n      border-end-end-radius: inherit;\r\n    }\r\n\r\n    .alert.strip-start {\r\n      border-start-start-radius: 0 !important;\r\n      border-end-start-radius: 0 !important;\r\n    }\r\n    .alert.strip-end {\r\n      border-start-end-radius: 0 !important;\r\n      border-end-end-radius: 0 !important;\r\n    }\r\n\r\n    .alert.strip-start.strip-end {\r\n      border-radius: 0 !important;\r\n    }\r\n\r\n    /* Remove borders on strip sides */\r\n    .alert.strip-start.bordered {\r\n      border-inline-start: none !important;\r\n    }\r\n    .alert.strip-end.bordered {\r\n      border-inline-end: none !important;\r\n    }\r\n    .alert.strip-start.strip-end.bordered {\r\n      border-inline-start: none !important;\r\n      border-inline-end: none !important;\r\n    }\r\n\r\n    .alert.faded.strip-start {\r\n      border-inline-start: none !important;\r\n    }\r\n    .alert.faded.strip-end {\r\n      border-inline-end: none !important;\r\n    }\r\n    .alert.faded.strip-start.strip-end {\r\n      border-inline-start: none !important;\r\n      border-inline-end: none !important;\r\n    }\r\n\r\n    .icon {\r\n      align-self: flex-start;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      font-size: var(--icon-size, 20px);\r\n      color: inherit;\r\n      flex-shrink: 0;\r\n      padding-block-start: 2px;\r\n    }\r\n\r\n    .content {\r\n      flex: 1 1 auto;\r\n      min-width: 0;\r\n      display: flex;\r\n      flex-direction: column;\r\n      justify-content: center;\r\n    }\r\n\r\n    .title {\r\n      font: var(--sky-text-title);\r\n      font-size: var(--title-font-size);\r\n      color: inherit;\r\n      margin: 0 0 var(--sky-space-1, 4px) 0;\r\n    }\r\n\r\n    .message {\r\n      margin: 0;\r\n      text-align: start;\r\n      font: var(--sky-text-body);\r\n      font-size: var(--message-font-size);\r\n      color: inherit;\r\n    }\r\n\r\n    ::slotted(*) {\r\n      font: var(--sky-text-body);\r\n      font-size: var(--message-font-size);\r\n    }\r\n\r\n    .actions {\r\n      display: inline-flex;\r\n      gap: var(--sky-space-2, 8px);\r\n      align-items: center;\r\n      justify-content: flex-end;\r\n      flex: 0 0 auto;\r\n      align-self: stretch;\r\n      border-inline-start: 1px solid var(--sky-border-light);\r\n      padding-inline-start: var(--sky-space-2, 8px);\r\n      margin-inline-start: var(--sky-space-1, 4px);\r\n    }\r\n\r\n    .actions-slot-placeholder {\r\n      position: absolute;\r\n      width: 0;\r\n      height: 0;\r\n      overflow: hidden;\r\n      opacity: 0;\r\n      pointer-events: none;\r\n    }\r\n\r\n    .close-button {\r\n      margin-inline-start: var(--sky-space-1\\\\.5, 6px);\r\n      display: inline-flex;\r\n      aspect-ratio: 1 / 1;\r\n      justify-content: center;\r\n      align-items: center;\r\n      width: var(--close-size, 24px);\r\n      height: var(--close-size, 24px);\r\n      box-sizing: border-box;\r\n      background: var(--close-bg, var(--sky-hover-primary));\r\n      border: none;\r\n      border-radius: var(--sky-radius-full, 50%);\r\n      font-size: var(--close-font-size, 16px);\r\n      cursor: pointer;\r\n      font-weight: var(--sky-font-weight-bold, 700);\r\n      color: var(--close-color, currentColor);\r\n      transition: var(--sky-transition-fast);\r\n      -webkit-tap-highlight-color: transparent;\r\n    }\r\n\r\n    .close-button:hover {\r\n      transform: rotate(90deg);\r\n      background: var(--close-hover-bg, var(--sky-hover-secondary));\r\n      color: var(--close-hover-color, currentColor);\r\n    }\r\n\r\n    .close-button:focus-visible {\r\n      outline: none;\r\n      box-shadow: var(--sky-focus-ring);\r\n      background: var(--close-hover-bg, var(--sky-hover-secondary));\r\n      color: var(--close-hover-color, currentColor);\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-secondary);\r\n      border-radius: inherit;\r\n      backdrop-filter: none;\r\n      -webkit-backdrop-filter: none;\r\n      z-index: 2;\r\n    }\r\n\r\n    .loading-spinner {\r\n      width: var(--spinner-size, 16px);\r\n      height: var(--spinner-size, 16px);\r\n      border: 2px solid currentColor;\r\n      border-top-color: transparent;\r\n      border-radius: var(--sky-radius-full, 50%);\r\n      animation: skyc-spin 0.8s linear infinite;\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      .alert {\r\n        animation: none;\r\n        transition: none;\r\n      }\r\n\r\n      .close-button {\r\n        transition: none;\r\n      }\r\n\r\n      .close-button:hover,\r\n      .close-button:focus-visible {\r\n        transform: none;\r\n      }\r\n\r\n      .loading-spinner {\r\n        animation: none;\r\n      }\r\n    }\r\n\r\n    @keyframes skyc-spin {\r\n      to {\r\n        transform: rotate(360deg);\r\n      }\r\n    }\r\n\r\n    @keyframes skyc-fade-in {\r\n      from {\r\n        opacity: 0;\r\n        transform: translateY(-2px);\r\n      }\r\n      to {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n      }\r\n    }\r\n\r\n    ${unsafeCSS(\r\n      cssOnFillEnhance([\r\n        {\r\n          selector: \".alert.solid\",\r\n          fillVar: \"--alert-bg\",\r\n        },\r\n      ]),\r\n    )}\r\n  `;\r\n\r\n  /**\r\n   * Resolves size to get padding, font sizes, and other metrics.\r\n   * Result is memoized by `size` to avoid recomputing when only color/variant/radius change.\r\n   */\r\n  private _resolveSize(input: string): SkyAlertResolvedSize {\r\n    const key = String(input).trim();\r\n    if (this._sizeCache && this._sizeCache.size === key) return this._sizeCache.result;\r\n\r\n    const presets: Record<\r\n      string,\r\n      {\r\n        padding: string;\r\n        titleFontSize: string;\r\n        messageFontSize: string;\r\n        gap: string;\r\n        icon: string;\r\n        closeSize: string;\r\n        closeFontSize: string;\r\n        spinner: string;\r\n        stripWidth: string;\r\n        minHeight: string;\r\n      }\r\n    > = {\r\n      xs: {\r\n        padding: \"3px 7px\",\r\n        titleFontSize: \"12px\",\r\n        messageFontSize: \"11px\",\r\n        gap: \"4px\",\r\n        icon: \"14px\",\r\n        closeSize: \"18px\",\r\n        closeFontSize: \"12px\",\r\n        spinner: \"12px\",\r\n        stripWidth: \"2px\",\r\n        minHeight: \"28px\",\r\n      },\r\n      sm: {\r\n        padding: \"5px 9px\",\r\n        titleFontSize: \"14px\",\r\n        messageFontSize: \"13px\",\r\n        gap: \"6px\",\r\n        icon: \"16px\",\r\n        closeSize: \"20px\",\r\n        closeFontSize: \"14px\",\r\n        spinner: \"14px\",\r\n        stripWidth: \"3px\",\r\n        minHeight: \"32px\",\r\n      },\r\n      md: {\r\n        padding: \"8px 12px\",\r\n        titleFontSize: \"16px\",\r\n        messageFontSize: \"14px\",\r\n        gap: \"8px\",\r\n        icon: \"20px\",\r\n        closeSize: \"24px\",\r\n        closeFontSize: \"16px\",\r\n        spinner: \"16px\",\r\n        stripWidth: \"4px\",\r\n        minHeight: \"36px\",\r\n      },\r\n      lg: {\r\n        padding: \"10px 14px\",\r\n        titleFontSize: \"18px\",\r\n        messageFontSize: \"15px\",\r\n        gap: \"10px\",\r\n        icon: \"22px\",\r\n        closeSize: \"28px\",\r\n        closeFontSize: \"18px\",\r\n        spinner: \"18px\",\r\n        stripWidth: \"5px\",\r\n        minHeight: \"40px\",\r\n      },\r\n      xl: {\r\n        padding: \"12px 16px\",\r\n        titleFontSize: \"20px\",\r\n        messageFontSize: \"16px\",\r\n        gap: \"12px\",\r\n        icon: \"24px\",\r\n        closeSize: \"32px\",\r\n        closeFontSize: \"20px\",\r\n        spinner: \"20px\",\r\n        stripWidth: \"6px\",\r\n        minHeight: \"44px\",\r\n      },\r\n    };\r\n\r\n    if (presets[input]) {\r\n      this._sizeCache = { size: key, result: presets[input] };\r\n      return presets[input];\r\n    }\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 titleFs = fs;\r\n    const messageFs = clamp(fsNum * 0.875, 11, 16);\r\n    const py = clamp(fsNum * 0.5, 3, 12);\r\n    const px = clamp(fsNum * 0.75, 7, 16);\r\n    const gap = clamp(fsNum * 0.5, 4, 12);\r\n    const icon = clamp(fsNum * 1.25, 14, 24);\r\n    const closeSize = clamp(fsNum * 1.5, 18, 32);\r\n    const closeFont = clamp(fsNum * 1, 12, 20);\r\n    const spinner = clamp(fsNum * 1, 12, 20);\r\n    const stripWidth = clamp(fsNum * 0.25, 2, 6);\r\n    const minHeight = clamp(fsNum * 2.25, 28, 44);\r\n\r\n    return {\r\n      padding: `${to(py)} ${to(px)}`,\r\n      titleFontSize: titleFs,\r\n      messageFontSize: to(messageFs),\r\n      gap: to(gap),\r\n      icon: to(icon),\r\n      closeSize: to(closeSize),\r\n      closeFontSize: to(closeFont),\r\n      spinner: to(spinner),\r\n      stripWidth: to(stripWidth),\r\n      minHeight: to(minHeight),\r\n    };\r\n  }\r\n\r\n  /** Recomputes style variables when visual inputs change. */\r\n  override willUpdate(changedProperties: PropertyValues): void {\r\n    super.willUpdate(changedProperties);\r\n\r\n    if (\r\n      changedProperties.has(\"color\") ||\r\n      changedProperties.has(\"variant\") ||\r\n      changedProperties.has(\"stripColor\") ||\r\n      changedProperties.has(\"radius\") ||\r\n      changedProperties.has(\"size\")\r\n    ) {\r\n      this._updateStyleVars();\r\n    }\r\n  }\r\n\r\n  /** Initializes actions-slot presence state after first render. */\r\n  override firstUpdated(): void {\r\n    queueMicrotask(() => this._checkActionsSlot());\r\n  }\r\n\r\n  /** Computes CSS custom properties from current variant, size, and color inputs. */\r\n  private _updateStyleVars(): void {\r\n    const baseColor = resolveColor(this.color);\r\n    const textColor = resolveTextColorForToken(this.color);\r\n    const stripColorResolved = this.stripColor === \"currentColor\"\r\n      ? baseColor\r\n      : resolveColor(this.stripColor);\r\n\r\n    const s = this._resolveSize(this.size);\r\n\r\n    const semanticKey = resolveSemanticSurfaceKey(this.color);\r\n\r\n    const variantStyles = {\r\n      solid: {\r\n        bg: baseColor,\r\n        color: textColor,\r\n        border: \"none\",\r\n      },\r\n      flat: semanticKey\r\n        ? semanticSoftSurfaceTokens(semanticKey)\r\n        : {\r\n            bg: fadeMix(baseColor, 20),\r\n            color: hoverShade(baseColor, 30),\r\n            border: \"none\",\r\n          },\r\n      faded: semanticKey\r\n        ? semanticSoftSurfaceTokens(semanticKey, { bordered: true })\r\n        : {\r\n            bg: \"var(--sky-hover-tertiary)\",\r\n            color: baseColor,\r\n            border: \"1px solid var(--sky-text-tertiary)\",\r\n          },\r\n      bordered: {\r\n        bg: \"transparent\",\r\n        color: semanticKey\r\n          ? `var(--sky-${semanticKey}-primary-dark)`\r\n          : baseColor,\r\n        border: `2px solid ${baseColor}`,\r\n      },\r\n      light: {\r\n        bg: \"transparent\",\r\n        color: semanticKey\r\n          ? `var(--sky-${semanticKey}-primary-dark)`\r\n          : baseColor,\r\n        border: \"none\",\r\n      },\r\n    } as const;\r\n\r\n    const currentVariant = this.variant in variantStyles\r\n      ? this.variant as keyof typeof variantStyles\r\n      : \"flat\";\r\n\r\n    let v = tuneSurfaceVariantForDefaultColor(\r\n      this.color,\r\n      currentVariant,\r\n      variantStyles[currentVariant],\r\n    );\r\n\r\n    if (\r\n      isDefaultColorToken(this.color) &&\r\n      (currentVariant === \"flat\" || currentVariant === \"faded\")\r\n    ) {\r\n      v = {\r\n        ...v,\r\n        bg: \"var(--sky-glass-solid)\",\r\n        color: \"var(--sky-text-primary)\",\r\n        border: currentVariant === \"faded\" ? skyBorderPrimaryShorthand() : \"none\",\r\n      };\r\n    }\r\n\r\n    let closeBg = \"var(--sky-hover-primary)\";\r\n    let closeColor = \"currentColor\";\r\n    let closeHoverBg = \"var(--sky-hover-secondary)\";\r\n    let closeHoverColor = \"currentColor\";\r\n\r\n    if (currentVariant === \"solid\") {\r\n      closeBg = fadeMix(textColor, 20);\r\n      closeColor = textColor;\r\n      closeHoverBg = fadeMix(textColor, 30);\r\n      closeHoverColor = textColor;\r\n    } else if (currentVariant === \"flat\" || currentVariant === \"faded\") {\r\n      if (semanticKey) {\r\n        closeBg = `var(--sky-${semanticKey}-g0)`;\r\n        closeColor = v.color;\r\n        closeHoverBg = `var(--sky-${semanticKey}-g1)`;\r\n        closeHoverColor = v.color;\r\n      } else if (isDefaultColorToken(this.color)) {\r\n        closeBg = \"var(--sky-hover-primary)\";\r\n        closeColor = v.color;\r\n        closeHoverBg = \"var(--sky-hover-secondary)\";\r\n        closeHoverColor = v.color;\r\n      } else {\r\n        closeBg = fadeMix(baseColor, 15);\r\n        closeColor = v.color;\r\n        closeHoverBg = fadeMix(baseColor, 25);\r\n        closeHoverColor = v.color;\r\n      }\r\n    }\r\n\r\n    this._styleVars = {\r\n      \"--alert-bg\": v.bg,\r\n      \"--alert-color\": v.color,\r\n      \"--alert-border\": v.border,\r\n      \"--alert-radius\": resolveRadius(this.radius),\r\n      \"--alert-padding\": s.padding,\r\n      \"--alert-gap\": s.gap,\r\n      \"--alert-min-height\": s.minHeight,\r\n      \"--title-font-size\": s.titleFontSize,\r\n      \"--message-font-size\": s.messageFontSize,\r\n      \"--icon-size\": s.icon,\r\n      \"--close-size\": s.closeSize,\r\n      \"--close-font-size\": s.closeFontSize,\r\n      \"--spinner-size\": s.spinner,\r\n      \"--strip-color\": stripColorResolved,\r\n      \"--strip-width\": s.stripWidth,\r\n      \"--close-bg\": closeBg,\r\n      \"--close-color\": closeColor,\r\n      \"--close-hover-bg\": closeHoverBg,\r\n      \"--close-hover-color\": closeHoverColor,\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Dispatches `alert-closed` and removes the alert from the DOM.\r\n   *\r\n   * @returns {void}\r\n   */\r\n  public close(): void {\r\n    const evt = new CustomEvent<SkyAlertClosedEventDetail>(\"alert-closed\", {\r\n      detail: { title: this.title, message: this.message },\r\n      bubbles: true,\r\n      composed: true,\r\n    });\r\n    this.dispatchEvent(evt);\r\n    this.remove();\r\n  }\r\n\r\n  /** Returns the ARIA role applied to the alert container. */\r\n  private getAriaRole(): SkyAlertRoleType {\r\n    return this.roleType;\r\n  }\r\n\r\n  /** Checks whether the actions slot currently has meaningful assigned content. */\r\n  private _checkActionsSlot(): void {\r\n    const slot = this.renderRoot?.querySelector<HTMLSlotElement>('slot[name=\"actions\"]');\r\n    if (!slot) return;\r\n    const nodes = slot.assignedNodes({ flatten: true });\r\n    const hasContent = nodes.some(\r\n      (n) => n.nodeType !== Node.TEXT_NODE || (n.textContent?.trim().length ?? 0) > 0,\r\n    );\r\n    if (hasContent !== this._hasActionsSlotContent) {\r\n      this._hasActionsSlotContent = hasContent;\r\n    }\r\n  }\r\n\r\n  /** Updates action-slot state when the slot assignment changes. */\r\n  private _onActionsSlotChange(e: Event): void {\r\n    const slot = e.target as HTMLSlotElement;\r\n    const nodes = slot.assignedNodes({ flatten: true });\r\n    const hasContent = nodes.some(\r\n      (n) => n.nodeType !== Node.TEXT_NODE || (n.textContent?.trim().length ?? 0) > 0,\r\n    );\r\n    this._hasActionsSlotContent = hasContent;\r\n  }\r\n\r\n  override render() {\r\n    const roleAttr = this.getAriaRole();\r\n    const alertClasses = classMap({\r\n      alert: true,\r\n      [this.variant]: true,\r\n      \"strip-start\": this.strip === \"start\" || this.strip === \"both\",\r\n      \"strip-end\": this.strip === \"end\" || this.strip === \"both\",\r\n    });\r\n\r\n    return html`\r\n      <div\r\n        part=\"alert\"\r\n        class=${alertClasses}\r\n        role=\"${roleAttr}\"\r\n        aria-live=\"${this.roleType === \"alert\" ? \"assertive\" : \"polite\"}\"\r\n        style=${styleMap(this._styleVars)}\r\n      >\r\n        ${when(\r\n          this.icon,\r\n          () => html`<sky-icon part=\"icon\" class=\"icon\" icon=\"${this.icon!}\"></sky-icon>`,\r\n        )}\r\n\r\n        <div part=\"content\" class=\"content\">\r\n          ${when(\r\n            this.title,\r\n            () => html`<div part=\"title\" class=\"title\">${this.title}</div>`,\r\n          )}\r\n          ${when(\r\n            this.message,\r\n            () => html`<p part=\"message\" class=\"message\">${this.message}</p>`,\r\n            () => html`<slot></slot>`,\r\n          )}\r\n        </div>\r\n\r\n        ${when(\r\n          this._hasActionsSlotContent || this.removable,\r\n          () => html`\r\n            <div part=\"actions\" class=\"actions\">\r\n              <slot name=\"actions\" @slotchange=${this._onActionsSlotChange}></slot>\r\n              ${when(\r\n                this.removable,\r\n                () => html`\r\n                  <button\r\n                    part=\"close-button\"\r\n                    class=\"close-button\"\r\n                    type=\"button\"\r\n                    @click=${this.close}\r\n                    aria-label=\"Dismiss alert\"\r\n                    title=\"Dismiss\"\r\n                  >\r\n                    <sky-icon icon=\"ion:close\"></sky-icon>\r\n                  </button>\r\n                `,\r\n              )}\r\n            </div>\r\n          `,\r\n          () => html`\r\n            <div class=\"actions-slot-placeholder\" aria-hidden=\"true\">\r\n              <slot name=\"actions\" @slotchange=${this._onActionsSlotChange}></slot>\r\n            </div>\r\n          `,\r\n        )}\r\n\r\n        ${when(\r\n          this.loading,\r\n          () => html`\r\n            <div part=\"loading-overlay\" class=\"loading-overlay\">\r\n              <div part=\"loading-spinner\" class=\"loading-spinner\"></div>\r\n            </div>\r\n          `,\r\n        )}\r\n      </div>\r\n    `;\r\n  }\r\n}"],"names":["SkyAlert","LitElement","constructor","super","arguments","this","title","message","removable","color","size","radius","icon","strip","stripColor","variant","loading","roleType","_styleVars","_sizeCache","_hasActionsSlotContent","_resolveSize","input","key","String","trim","result","presets","xs","padding","titleFontSize","messageFontSize","gap","closeSize","closeFontSize","spinner","stripWidth","minHeight","sm","md","lg","xl","m","match","unit","fsNum","parseFloat","to","n","Math","round","clamp","min","max","titleFs","messageFs","py","px","closeFont","willUpdate","changedProperties","has","_updateStyleVars","firstUpdated","queueMicrotask","_checkActionsSlot","baseColor","resolveColor","textColor","resolveTextColorForToken","stripColorResolved","s","semanticKey","resolveSemanticSurfaceKey","variantStyles","solid","bg","border","flat","semanticSoftSurfaceTokens","fadeMix","hoverShade","faded","bordered","light","currentVariant","v","tuneSurfaceVariantForDefaultColor","isDefaultColorToken","skyBorderPrimaryShorthand","closeBg","closeColor","closeHoverBg","closeHoverColor","resolveRadius","close","evt","CustomEvent","detail","bubbles","composed","dispatchEvent","remove","getAriaRole","slot","renderRoot","querySelector","hasContent","assignedNodes","flatten","some","nodeType","Node","TEXT_NODE","textContent","length","_onActionsSlotChange","e","target","render","roleAttr","alertClasses","classMap","alert","html","styleMap","when","dependencies","SkyIcon","styles","css","unsafeCSS","cssOnFillEnhance","selector","fillVar","__decorateClass","property","type","prototype","Boolean","reflect","state","customElement"],"mappings":"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"}

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

@@ -1,8 +1,8 @@
-import{css as t,LitElement as e,nothing as r,html as o}from"lit";import{property as a,customElement as n}from"lit/decorators.js";import{isDefaultColorToken as i,resolveColor as s,resolveTextColorForToken as l}from"../helper/utils/color-resolver.js";import{SkyIcon as d}from"../sky-icon/sky-icon.js";var c=Object.defineProperty,p=Object.getOwnPropertyDescriptor,b=(t,e,r,o)=>{for(var a,n=o>1?void 0:o?p(e,r):e,i=t.length-1;i>=0;i--)(a=t[i])&&(n=(o?a(e,r,n):a(n))||n);return o&&n&&c(e,r,n),n};let y=class extends e{constructor(){super(...arguments),this.title="App Bar",this.color="default",this.url="",this.banner=!0,this.dense=!1,this.elevated=!1,this.leadingLabel="Open menu"}_applyColorSurface(){if(!i(this.color))return this.setAttribute("data-surface","solid"),this.style.setProperty("--appbar-bg-color",s(this.color)),void this.style.setProperty("--appbar-text-color",l(this.color));this.removeAttribute("data-surface"),this.style.removeProperty("--appbar-bg-color"),this.style.removeProperty("--appbar-text-color")}connectedCallback(){super.connectedCallback(),this._applyColorSurface(),this._applyBackgroundImage()}_applyBackgroundImage(){const t=this.url?`url(${this.url})`:"none";this.style.setProperty("--appbar-bg-image",t)}updated(t){t.has("color")&&this._applyColorSurface(),t.has("url")&&this._applyBackgroundImage()}render(){return o`
-      ${this.url?o`
+import{unsafeCSS as t,css as e,LitElement as r,nothing as o,html as a}from"lit";import{property as n,customElement as s}from"lit/decorators.js";import{isDefaultColorToken as i,resolveColor as l,resolveTextColorForToken as d}from"../helper/utils/color-resolver.js";import{cssOnFillEnhance as c}from"../helper/utils/contrast-color.js";import{SkyIcon as p}from"../sky-icon/sky-icon.js";var b=Object.defineProperty,y=Object.getOwnPropertyDescriptor,u=(t,e,r,o)=>{for(var a,n=o>1?void 0:o?y(e,r):e,s=t.length-1;s>=0;s--)(a=t[s])&&(n=(o?a(e,r,n):a(n))||n);return o&&n&&b(e,r,n),n};let k=class extends r{constructor(){super(...arguments),this.title="App Bar",this.color="default",this.url="",this.banner=!0,this.dense=!1,this.elevated=!1,this.leadingLabel="Open menu"}_applyColorSurface(){if(!i(this.color))return this.setAttribute("data-surface","solid"),this.style.setProperty("--appbar-bg-color",l(this.color)),void this.style.setProperty("--appbar-text-color",d(this.color));this.removeAttribute("data-surface"),this.style.removeProperty("--appbar-bg-color"),this.style.removeProperty("--appbar-text-color")}connectedCallback(){super.connectedCallback(),this._applyColorSurface(),this._applyBackgroundImage()}_applyBackgroundImage(){const t=this.url?`url(${this.url})`:"none";this.style.setProperty("--appbar-bg-image",t)}updated(t){t.has("color")&&this._applyColorSurface(),t.has("url")&&this._applyBackgroundImage()}render(){return a`
+      ${this.url?a`
             <div class="background" aria-hidden="true"></div>
             <div class="background-overlay" aria-hidden="true"></div>
-          `:r}
+          `:o}
       <div
         class="content"
         part="content"
@@ -26,7 +26,7 @@ import{css as t,LitElement as e,nothing as r,html as o}from"lit";import{property
           <slot></slot>
         </div>
       </div>
-    `}};y.dependencies={"sky-icon":d},y.styles=t`
+    `}};k.dependencies={"sky-icon":p},k.styles=e`
     :host {
       width: 100%;
       display: flex;
@@ -211,5 +211,6 @@ import{css as t,LitElement as e,nothing as r,html as o}from"lit";import{property
       }
     }
 
-  `,b([a({type:String})],y.prototype,"title",2),b([a({type:String})],y.prototype,"color",2),b([a({type:String})],y.prototype,"url",2),b([a({type:Boolean})],y.prototype,"banner",2),b([a({type:Boolean})],y.prototype,"dense",2),b([a({type:Boolean})],y.prototype,"elevated",2),b([a({type:String})],y.prototype,"leadingLabel",2),y=b([n("sky-appbar")],y);export{y as SkyAppbar};
+    ${t(c([{selector:':host([data-surface="solid"])',fillVar:"--appbar-bg-color"}]))}
+  `,u([n({type:String})],k.prototype,"title",2),u([n({type:String})],k.prototype,"color",2),u([n({type:String})],k.prototype,"url",2),u([n({type:Boolean})],k.prototype,"banner",2),u([n({type:Boolean})],k.prototype,"dense",2),u([n({type:Boolean})],k.prototype,"elevated",2),u([n({type:String})],k.prototype,"leadingLabel",2),k=u([s("sky-appbar")],k);export{k as SkyAppbar};
 //# sourceMappingURL=sky-appbar.js.map

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

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

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

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

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

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