@sky.ui/core 0.0.40 → 0.0.41

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

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

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

@@ -1,4 +1,4 @@
-import { FormControlBase, FormState } from '../helper/internals/form-control-base';
+import { FormControlBase, FormState } from "../helper/internals/form-control-base";
 export interface CheckboxProperties {
     label: string;
     checked: boolean;
@@ -38,7 +38,7 @@ export type SkyCheckboxValueClearedDetail = {
  * @status stable
  * @since 1.0.0
  *
- * @documentation https://sky-ui.com/components/checkbox
+ * @documentation https://library.sky-ui.com/components/checkbox
  *
  * @uiVModel checked value-changed detail=checked
  *

package/dist/sky-checkbox/sky-checkbox.js

@@ -25,16 +25,20 @@ import{LitElement as e,unsafeCSS as t,css as i,nothing as s,html as r}from"lit";
           <slot @slotchange=${this._onSlotChange}></slot>
           ${c(e,()=>{const e=l({textAlign:"start",color:"var(--sky-text-primary)"}),t=l({color:this.prefixColor,display:"inline-block"}),i=l({color:this.suffixColor,display:"inline-block"});return r`
               <span style=${e} part="text">
-                <div style=${t} part="prefix">${this.prefix}</div>
+                <div style=${t} part="prefix">
+                  ${this.prefix}
+                </div>
                 ${this._hasMeaningfulSlot?s:this.label}
-                <div style=${i} part="suffix">${this.suffix}</div>
+                <div style=${i} part="suffix">
+                  ${this.suffix}
+                </div>
               </span>
             `})}
         </label>
       </div>
       ${c(this.showErrors&&this.validationErrors.length>0&&this.validationActive,()=>r`<div class="error-message" part="error-message">
-            ${this.validationErrors[0]}
-          </div>`)}
+          ${this.validationErrors[0]}
+        </div>`)}
     `}};m.shadowRootOptions={...e.shadowRootOptions,delegatesFocus:!0},m.styles=i`
     :host {
       display: block;
@@ -42,16 +46,15 @@ import{LitElement as e,unsafeCSS as t,css as i,nothing as s,html as r}from"lit";
       font-family: var(--sky-font);
     }
 
-    :host([readonly]) .cbx {
-      cursor: default;
-    }
+:host([readonly]) .cbx {
+  cursor: default;
+}
 
-    /* Show focus UI whenever anything inside is focused */
-    :host(:focus-within) .cbx span:first-child,
-    :host(:focus) .cbx span:first-child {
-      box-shadow: var(--sky-focus-ring);
-      border-color: var(--checkbox-color) !important;
-    }
+/* Show focus UI whenever anything inside is focused */
+:host(:focus-within) .cbx span:first-child,:host(:focus) .cbx span:first-child {
+ box-shadow: var(--sky-focus-ring);
+ border-color: var(--checkbox-color)!important;
+}
 
     .checkbox-wrapper {
       position: relative;
@@ -99,9 +102,7 @@ import{LitElement as e,unsafeCSS as t,css as i,nothing as s,html as r}from"lit";
       transform: translateZ(0);
       contain: layout;
       overflow: hidden;
-      transition:
-        background-color 0.2s ease,
-        border-color 0.2s ease,
+      transition: background-color 0.2s ease, border-color 0.2s ease,
         box-shadow 0.2s ease;
     }
 
@@ -116,9 +117,7 @@ import{LitElement as e,unsafeCSS as t,css as i,nothing as s,html as r}from"lit";
       stroke-linejoin: round;
       stroke-dasharray: 16px;
       stroke-dashoffset: 16px;
-      transition:
-        stroke-dashoffset 0.2s ease,
-        transform 0.2s ease;
+      transition: stroke-dashoffset 0.2s ease, transform 0.2s ease;
       transform: translate3d(0, 0, 0);
     }
 
@@ -127,13 +126,13 @@ import{LitElement as e,unsafeCSS as t,css as i,nothing as s,html as r}from"lit";
       border-color: var(--sky-text-tertiary);
     }
 
-    input[type='checkbox']:checked + .cbx:hover span:first-child {
+    input[type="checkbox"]:checked + .cbx:hover span:first-child {
       box-shadow: var(--sky-box-shadow-hover);
       transition: box-shadow 0.2s ease;
     }
 
     .cbx span:first-child:before {
-      content: '';
+      content: "";
       inset: 0;
       width: auto;
       height: auto;
@@ -142,80 +141,71 @@ import{LitElement as e,unsafeCSS as t,css as i,nothing as s,html as r}from"lit";
       transform: scale(0);
       opacity: 0;
       border-radius: 50%;
-      transition:
-        transform 0.2s ease-out,
-        opacity 0.2s ease-out;
+      transition: transform 0.2s ease-out, opacity 0.2s ease-out;
       position: absolute;
       z-index: -1;
       pointer-events: none;
     }
 
-    input[type='checkbox'] {
-      position: absolute;
-      opacity: 0;
-      width: 1px;
-      height: 1px;
-      margin: 0;
-      padding: 0;
-      border: 0;
-    }
+input[type="checkbox"] {
+  position: absolute;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  padding: 0;
+  border: 0;
 
-    input[type='checkbox']:focus-visible + .cbx span:first-child,
-    input[type='checkbox']:focus + .cbx span:first-child {
+}
+
+    input[type="checkbox"]:focus-visible + .cbx span:first-child,
+    input[type="checkbox"]:focus + .cbx span:first-child {
       border-color: var(--sky-text-tertiary);
-      outline: none;
+      outline:none;
     }
 
-    input[type='checkbox']:checked + .cbx span:first-child {
-      background: var(--checkbox-color, var(--sky-active-primary));
-      border-color: var(--checkbox-color, var(--sky-active-primary));
+input[type="checkbox"]:checked + .cbx span:first-child {
+  background: var(--checkbox-color, var(--sky-active-primary));
+  border-color: var(--checkbox-color, var(--sky-active-primary));
 
-      transform: none; /* Ensure no transform applied */
-    }
+  transform: none; /* Ensure no transform applied */
+}
 
-    input[type='checkbox']:checked + .cbx span:first-child svg.checkmark {
+    input[type="checkbox"]:checked + .cbx span:first-child svg.checkmark {
       stroke-dashoffset: 0;
-      transition:
-        stroke-dashoffset 0.2s ease-in-out 0.1s,
+      transition: stroke-dashoffset 0.2s ease-in-out 0.1s,
         transform 0.2s ease-in-out 0.1s;
     }
 
-    input[type='checkbox']:not(:checked) + .cbx span:first-child svg.checkmark {
+    input[type="checkbox"]:not(:checked) + .cbx span:first-child svg.checkmark {
       transition: opacity 0.2s ease-in-out;
       opacity: 0;
     }
 
-    input[type='checkbox']:checked + .cbx span:first-child:before {
+    input[type="checkbox"]:checked + .cbx span:first-child:before {
       transform: scale(3.5);
       opacity: 0;
-      transition:
-        transform 0.2s ease-out,
-        opacity 0.2s ease-out;
+      transition: transform 0.2s ease-out, opacity 0.2s ease-out;
     }
 
     .cbx.checked span:first-child {
-      background: var(--checkbox-color, var(--sky-active-primary));
-      border-color: var(--checkbox-color, var(--sky-active-primary));
-    }
-    .cbx.checked span:first-child svg.checkmark {
-      stroke-dashoffset: 0;
-      transition:
-        stroke-dashoffset 0.2s ease-in-out 0.1s,
-        transform 0.2s ease-in-out 0.1s;
-    }
+  background: var(--checkbox-color, var(--sky-active-primary));
+  border-color: var(--checkbox-color, var(--sky-active-primary));
+
+}
+.cbx.checked span:first-child svg.checkmark {
+  stroke-dashoffset: 0;
+  transition: stroke-dashoffset 0.2s ease-in-out 0.1s,
+              transform 0.2s ease-in-out 0.1s;
+}
 
     .indeterminate-line {
       width: 10px;
       height: 2px;
-      background-color: var(
-        --sky-on-color-fallback-light,
-        var(--sky-text-white)
-      );
+      background-color: var(--sky-on-color-fallback-light, var(--sky-text-white));
       position: absolute;
       border-radius: 1px;
-      transition:
-        opacity 0.2s ease,
-        transform 0.2s ease;
+      transition: opacity 0.2s ease, transform 0.2s ease;
       opacity: 0;
       transform: scaleX(0);
     }
@@ -238,6 +228,7 @@ import{LitElement as e,unsafeCSS as t,css as i,nothing as s,html as r}from"lit";
       transform: scaleX(1);
     }
 
+
     .error-message {
       font-size: var(--sky-font-size-xs);
       color: var(--sky-danger-primary);
@@ -256,6 +247,7 @@ import{LitElement as e,unsafeCSS as t,css as i,nothing as s,html as r}from"lit";
     }
 
     :host([validationactive]:invalid) .cbx span:first-child {
+
       border-color: var(--sky-danger-primary);
     }
     :host([validationactive]:invalid) .cbx span:first-child svg.checkmark {
@@ -279,8 +271,8 @@ import{LitElement as e,unsafeCSS as t,css as i,nothing as s,html as r}from"lit";
     }
 
     .checkbox-wrapper.no-text {
-      gap: 0;
-    }
+  gap: 0;
+}
 
     @media (prefers-reduced-motion: reduce) {
       .cbx,

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

@@ -1 +1 @@
-{"version":3,"file":"sky-checkbox.js","sources":["../../src/sky-checkbox/sky-checkbox.ts"],"sourcesContent":["import { LitElement, html, css, nothing, unsafeCSS } from 'lit';\nimport { property, customElement, state } from 'lit/decorators.js';\nimport { when } from 'lit/directives/when.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { resolveColor } from '../helper/utils/color-resolver';\nimport { cssOnFillEnhance } from '../helper/utils/contrast-color';\nimport {\n  FormControlBase,\n  FormState,\n} from '../helper/internals/form-control-base';\n\nexport interface CheckboxProperties {\n  label: string;\n  checked: boolean;\n  disabled: boolean;\n  indeterminate: boolean;\n  id: string;\n  value: string;\n  color: string;\n  required: boolean;\n  validationErrors: string[];\n  validationActive: boolean;\n  defaultChecked: boolean;\n  requiredMessage: string;\n  showErrors: boolean;\n  prefix: string;\n  suffix: string;\n  prefixColor: string;\n  suffixColor: string;\n}\n/** `checked` is always the boolean model; `value` keeps form/legacy semantics (see `handleChange`). */\nexport type SkyCheckboxValueChangedDetail = {\n  checked: boolean;\n  value: string | boolean | undefined;\n};\nexport type SkyCheckboxValidationErrorDetail = { errors: string[] };\nexport type SkyCheckboxValueClearedDetail = { value: string; checked: boolean };\n\n/**\n * @element sky-checkbox\n *\n * @summary Form-associated checkbox with validation, indeterminate state, and customizable label/prefix/suffix rendering.\n *\n * @status stable\n * @since 1.0.0\n *\n * @documentation https://sky-ui.com/components/checkbox\n *\n * @uiVModel checked value-changed detail=checked\n *\n * @slot - Default slot for the checkbox label or other content.\n * @slot prefix - Optional prefix content that can be placed before the label.\n * @slot suffix - Optional suffix content that can be placed after the label.\n *\n * @csspart wrapper - The wrapper element for the checkbox.\n * @csspart input - The native input element used for the checkbox.\n * @csspart label - The label element for the checkbox, used for styling.\n * @csspart box - The visual box for the checkbox, which includes the checkmark and indeterminate state.\n * @csspart checkmark - The checkmark icon that appears when the checkbox is checked.\n * @csspart indeterminate-line - The line representing the indeterminate state of the checkbox.\n * @csspart error-message - The error message displayed if the checkbox is invalid.\n *\n * @property {string} label - The label for the checkbox. Default: `\"\"`.\n * @property {boolean} checked - Whether the checkbox is checked. Default: `false`.\n * @property {boolean} indeterminate - Whether the checkbox is in the indeterminate state. Default: `false`.\n * @property {string} color - The color used for the checkbox and its checkmark. Default: `\"primary\"`.\n * @property {string} value - The value of the checkbox, which gets submitted with the form. Default: `\"\"`.\n * @property {boolean} showErrors - Whether to display validation error messages. Default: `false`.\n * @property {string} prefix - Optional prefix text or content before the label. Default: `\"\"`.\n * @property {string} suffix - Optional suffix text or content after the label. Default: `\"\"`.\n * @property {string} prefixColor - The color for the prefix text. Default: `\"\"`.\n * @property {string} suffixColor - The color for the suffix text. Default: `\"\"`.\n * @property {boolean} defaultChecked - Default checked state for reset operations. Default: `false`.\n * @method check Sets checked state to `true`.\n * @method uncheck Sets checked state to `false`.\n * @method toggle Toggles checked state.\n * @method reset Resets checkbox state to defaults and clears UI validation state.\n *\n * @fires {CustomEvent<SkyCheckboxValueChangedDetail>} value-changed - Fired when checked state changes; `detail.checked` is always boolean (use for v-model). `detail.value` is the form token when the `value` prop is set, else mirrors `checked`.\n * @fires {CustomEvent<SkyCheckboxValidationErrorDetail>} validation-error - Fired when validation errors are updated.\n * @fires {CustomEvent<SkyCheckboxValueClearedDetail>} value-cleared - Fired when checkbox is reset programmatically.\n *\n * @example\n * ```html\n * <sky-checkbox label=\"Accept Terms\" required showerrors prefix=\"Legal\"></sky-checkbox>\n * ```\n * ```vue\n * <template>\n *   <sky-checkbox label=\"Accept Terms\" required showerrors prefix=\"Legal\"></sky-checkbox>\n * </template>\n * ```\n * ```jsx\n * export default function Demo() {\n *   return <sky-checkbox label=\"Accept Terms\" required showerrors prefix=\"Legal\"></sky-checkbox>;\n * }\n * ```\n */\n@customElement('sky-checkbox')\nexport class SkyCheckbox extends FormControlBase {\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  @property({ type: String }) label = '';\n  @property({ type: String }) override id = '';\n  @property({ type: String }) value = '';\n  @property({ type: String }) color = 'primary';\n  @property({ type: Boolean }) defaultChecked = false;\n  @property({ type: Boolean }) showErrors = false;\n  @property({ type: String }) override prefix = '';\n  @property({ type: String }) suffix = '';\n  @property({ type: String }) prefixColor = '';\n  @property({ type: String }) suffixColor = '';\n  @property({ type: Boolean, reflect: true }) validationActive: boolean = false;\n  @property({ type: Boolean, reflect: true }) invalid: boolean = false;\n  @state() private _checked = false;\n  @state() private _indeterminate = false;\n  @state() private validationErrors: string[] = [];\n  @state() private _hasMeaningfulSlot = false;\n\n  private _inputElement?: HTMLInputElement;\n  private _inputId = `sky-cb-${Math.random().toString(36).slice(2)}`;\n\n  @property({ type: Boolean, reflect: true })\n  get checked() {\n    return this._checked;\n  }\n  set checked(v: boolean) {\n    const old = this._checked;\n    this._checked = v;\n\n    if (v && this.indeterminate) {\n      this.indeterminate = false;\n      if (this._inputElement) this._inputElement.indeterminate = false;\n    }\n\n    this.requestUpdate('checked', old);\n\n    if (this._inputElement) {\n      this._inputElement.checked = v;\n      this._inputElement.indeterminate = this.indeterminate;\n    }\n\n    this._updateVisualState();\n\n    this.syncFormValue();\n    this.syncValidity();\n  }\n\n  @property({ type: Boolean, reflect: true })\n  get indeterminate() {\n    return this._indeterminate;\n  }\n  set indeterminate(v: boolean) {\n    const old = this._indeterminate;\n    this._indeterminate = v;\n\n    if (v && this.checked) this.checked = false;\n\n    this.requestUpdate('indeterminate', old);\n\n    if (this._inputElement) this._inputElement.indeterminate = v;\n\n    this._updateVisualState();\n\n    this.syncValidity();\n  }\n\n  static override styles = css`\n    :host {\n      display: block;\n      position: relative;\n      font-family: var(--sky-font);\n    }\n\n    :host([readonly]) .cbx {\n      cursor: default;\n    }\n\n    /* Show focus UI whenever anything inside is focused */\n    :host(:focus-within) .cbx span:first-child,\n    :host(:focus) .cbx span:first-child {\n      box-shadow: var(--sky-focus-ring);\n      border-color: var(--checkbox-color) !important;\n    }\n\n    .checkbox-wrapper {\n      position: relative;\n      display: flex;\n      align-items: center;\n      gap: var(--sky-space-1, 5px);\n    }\n\n    :host([disabled]) {\n      pointer-events: none;\n      opacity: var(--sky-opacity-disabled, 0.6);\n    }\n\n    .cbx {\n      display: flex;\n      align-items: center;\n      cursor: pointer;\n      user-select: none;\n      gap: var(--sky-space-1, 5px);\n      transition: color 0.2s ease;\n      font-family: var(--sky-font);\n      font-size: var(--sky-font-size-sm);\n      line-height: var(--sky-line-height-snug, 1.25);\n      color: var(--sky-text-primary);\n    }\n\n    .cbx span {\n      display: inline-block;\n      vertical-align: middle;\n    }\n\n    .cbx span:first-child {\n      position: relative;\n      box-sizing: border-box;\n      width: 18px;\n      height: 18px;\n      flex-shrink: 0;\n      border-radius: min(6px, var(--sky-radius-primary));\n      vertical-align: middle;\n      background: var(--sky-glass-solid);\n      border: 2px solid var(--sky-text-tertiary);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transform: translateZ(0);\n      contain: layout;\n      overflow: hidden;\n      transition:\n        background-color 0.2s ease,\n        border-color 0.2s ease,\n        box-shadow 0.2s ease;\n    }\n\n    .cbx span:first-child svg {\n      position: absolute;\n      width: 12px;\n      height: 10px;\n      fill: none;\n      stroke: var(--sky-on-color-fallback-light, var(--sky-text-white));\n      stroke-width: 2;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n      stroke-dasharray: 16px;\n      stroke-dashoffset: 16px;\n      transition:\n        stroke-dashoffset 0.2s ease,\n        transform 0.2s ease;\n      transform: translate3d(0, 0, 0);\n    }\n\n    .cbx:hover span:first-child {\n      background-color: var(--sky-hover-primary);\n      border-color: var(--sky-text-tertiary);\n    }\n\n    input[type='checkbox']:checked + .cbx:hover span:first-child {\n      box-shadow: var(--sky-box-shadow-hover);\n      transition: box-shadow 0.2s ease;\n    }\n\n    .cbx span:first-child:before {\n      content: '';\n      inset: 0;\n      width: auto;\n      height: auto;\n      background: var(--checkbox-color, var(--sky-active-primary));\n      display: block;\n      transform: scale(0);\n      opacity: 0;\n      border-radius: 50%;\n      transition:\n        transform 0.2s ease-out,\n        opacity 0.2s ease-out;\n      position: absolute;\n      z-index: -1;\n      pointer-events: none;\n    }\n\n    input[type='checkbox'] {\n      position: absolute;\n      opacity: 0;\n      width: 1px;\n      height: 1px;\n      margin: 0;\n      padding: 0;\n      border: 0;\n    }\n\n    input[type='checkbox']:focus-visible + .cbx span:first-child,\n    input[type='checkbox']:focus + .cbx span:first-child {\n      border-color: var(--sky-text-tertiary);\n      outline: none;\n    }\n\n    input[type='checkbox']:checked + .cbx span:first-child {\n      background: var(--checkbox-color, var(--sky-active-primary));\n      border-color: var(--checkbox-color, var(--sky-active-primary));\n\n      transform: none; /* Ensure no transform applied */\n    }\n\n    input[type='checkbox']:checked + .cbx span:first-child svg.checkmark {\n      stroke-dashoffset: 0;\n      transition:\n        stroke-dashoffset 0.2s ease-in-out 0.1s,\n        transform 0.2s ease-in-out 0.1s;\n    }\n\n    input[type='checkbox']:not(:checked) + .cbx span:first-child svg.checkmark {\n      transition: opacity 0.2s ease-in-out;\n      opacity: 0;\n    }\n\n    input[type='checkbox']:checked + .cbx span:first-child:before {\n      transform: scale(3.5);\n      opacity: 0;\n      transition:\n        transform 0.2s ease-out,\n        opacity 0.2s ease-out;\n    }\n\n    .cbx.checked span:first-child {\n      background: var(--checkbox-color, var(--sky-active-primary));\n      border-color: var(--checkbox-color, var(--sky-active-primary));\n    }\n    .cbx.checked span:first-child svg.checkmark {\n      stroke-dashoffset: 0;\n      transition:\n        stroke-dashoffset 0.2s ease-in-out 0.1s,\n        transform 0.2s ease-in-out 0.1s;\n    }\n\n    .indeterminate-line {\n      width: 10px;\n      height: 2px;\n      background-color: var(\n        --sky-on-color-fallback-light,\n        var(--sky-text-white)\n      );\n      position: absolute;\n      border-radius: 1px;\n      transition:\n        opacity 0.2s ease,\n        transform 0.2s ease;\n      opacity: 0;\n      transform: scaleX(0);\n    }\n\n    .indeterminate-active {\n      opacity: 1;\n      transform: scaleX(1);\n    }\n\n    .checked .checkmark {\n      stroke-dashoffset: 0;\n    }\n\n    .indeterminate .checkmark {\n      display: none;\n    }\n\n    .indeterminate .indeterminate-line {\n      opacity: 1;\n      transform: scaleX(1);\n    }\n\n    .error-message {\n      font-size: var(--sky-font-size-xs);\n      color: var(--sky-danger-primary);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      pointer-events: none;\n      margin-left: var(--sky-space-1, 5px);\n      width: 100%;\n      text-align: start;\n      font-family: var(--sky-font);\n    }\n    :dir(rtl) .error-message {\n      margin-right: var(--sky-space-1, 5px);\n      margin-left: unset;\n    }\n\n    :host([validationactive]:invalid) .cbx span:first-child {\n      border-color: var(--sky-danger-primary);\n    }\n    :host([validationactive]:invalid) .cbx span:first-child svg.checkmark {\n      stroke-dashoffset: 0;\n    }\n    :host([validationactive]:invalid) .cbx span:first-child:before {\n      transform: scale(3.5);\n      opacity: 0;\n    }\n    :host([validationactive]:invalid) .error-message {\n      display: block;\n    }\n\n    :host([indeterminate]) .indeterminate-line {\n      opacity: 1;\n      transform: scaleX(1);\n    }\n    :host([indeterminate]) .cbx span:first-child {\n      background-color: var(--checkbox-color);\n      border-color: var(--checkbox-color);\n    }\n\n    .checkbox-wrapper.no-text {\n      gap: 0;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .cbx,\n      .cbx span:first-child,\n      .cbx span:first-child svg,\n      .cbx span:first-child:before,\n      .indeterminate-line {\n        transition: none;\n      }\n    }\n\n    ${unsafeCSS(\n      cssOnFillEnhance([\n        {\n          selector:\n            'input[type=\"checkbox\"]:checked + .cbx span:first-child svg, .cbx.checked span:first-child svg',\n          fillVar: 'var(--checkbox-color, var(--sky-active-primary))',\n          property: 'stroke',\n        },\n        {\n          selector: '.indeterminate-line, .indeterminate .indeterminate-line',\n          fillVar: 'var(--checkbox-color, var(--sky-active-primary))',\n          property: 'background-color',\n        },\n      ])\n    )}\n  `;\n\n  protected override getFormValue(): FormState {\n    if (!this.name) return null;\n    if (this.disabled) return null;\n\n    if (!this.checked) return null;\n\n    if (this.value && this.value.trim() !== '') return this.value;\n\n    return 'on';\n  }\n\n  protected override setValueFromFormState(state: FormState): void {\n    if (state === null) {\n      this.checked = false;\n      this.indeterminate = false;\n      return;\n    }\n\n    if (typeof state === 'string') {\n      if (this.value && this.value.trim() !== '') {\n        this.checked = state === this.value;\n      } else {\n        this.checked = state === 'on' || state === 'true' || state === '1';\n      }\n      this.indeterminate = false;\n    }\n  }\n\n  protected override getValidityAnchor(): HTMLElement | undefined {\n    return (\n      (this.shadowRoot?.querySelector(\n        'input[type=\"checkbox\"]'\n      ) as HTMLElement) ?? undefined\n    );\n  }\n\n  protected override isEmpty(): boolean {\n    return !this.checked;\n  }\n\n  protected override getNativeControl(): HTMLElement | null {\n    return this.shadowRoot?.querySelector(\n      'input[type=\"checkbox\"]'\n    ) as HTMLInputElement | null;\n  }\n\n  protected override onFormReset(): void {\n    this.checked = this.defaultChecked;\n    this.indeterminate = false;\n\n    this.validationErrors = [];\n    this.invalid = false;\n    this.validationActive = false;\n  }\n\n  override willUpdate(changed: Map<string | number | symbol, unknown>): void {\n    if (changed.has('color')) {\n      this.style.setProperty('--checkbox-color', resolveColor(this.color));\n    }\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    super.updated(changed);\n\n    if (!this._inputElement) {\n      this._inputElement = this.shadowRoot?.querySelector(\n        'input[type=\"checkbox\"]'\n      ) as HTMLInputElement;\n    }\n\n    if (this._inputElement) {\n      this._inputElement.checked = this.checked;\n      this._inputElement.indeterminate = this.indeterminate;\n      this._inputElement.disabled = this.disabled || this.readonly;\n    }\n\n    this._updateVisualState();\n\n    if (\n      changed.has('checked') ||\n      changed.has('name') ||\n      changed.has('disabled') ||\n      changed.has('readonly') ||\n      changed.has('required') ||\n      changed.has('value')\n    ) {\n      this.syncFormValue();\n      this.syncValidity();\n    }\n  }\n\n  private handleChange(event: Event): void {\n    const target = event.target as HTMLInputElement;\n\n    if (this.disabled || this.readonly) {\n      if (this._inputElement) {\n        this._inputElement.checked = this.checked;\n        this._inputElement.indeterminate = this.indeterminate;\n      }\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    this.checked = target.checked;\n\n    // UI validation\n    this.validateInput();\n\n    const emittedValue =\n      this.value && this.value.trim() !== ''\n        ? this.checked\n          ? this.value\n          : undefined\n        : this.checked;\n\n    this.dispatchEvent(\n      new CustomEvent<SkyCheckboxValueChangedDetail>('value-changed', {\n        detail: { checked: this.checked, value: emittedValue },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private validateInput(): boolean {\n    if (!this.validationActive) return true;\n\n    this.validationErrors = [];\n    if (this.required && !this.checked) {\n      this.validationErrors = [this.requiredMessage]; // from base\n    }\n\n    this.dispatchEvent(\n      new CustomEvent<SkyCheckboxValidationErrorDetail>('validation-error', {\n        detail: { errors: [...this.validationErrors] },\n        bubbles: true,\n        composed: true,\n      })\n    );\n\n    const cbx = this.shadowRoot?.querySelector('.cbx') as HTMLElement | null;\n    if (this.validationErrors.length) cbx?.classList.add('invalid');\n    else cbx?.classList.remove('invalid');\n\n    const isValid = this.validationErrors.length === 0;\n    this.invalid = !isValid;\n\n    return isValid;\n  }\n\n  /**\n   * Sets checked state to `true`.\n   *\n   * @returns {void}\n   */\n  public check(): void {\n    if (this.disabled || this.readonly) return;\n    this.checked = true;\n    this.indeterminate = false;\n  }\n\n  /**\n   * Sets checked state to `false`.\n   *\n   * @returns {void}\n   */\n  public uncheck(): void {\n    if (this.disabled || this.readonly) return;\n    this.checked = false;\n    this.indeterminate = false;\n  }\n\n  /**\n   * Toggles checked state.\n   *\n   * @returns {void}\n   */\n  public toggle(): void {\n    if (this.disabled || this.readonly) return;\n    this.checked = !this.checked;\n    this.indeterminate = false;\n  }\n\n  /**\n   * Resets checkbox state to defaults and clears UI validation state.\n   *\n   * @returns {void}\n   */\n  public reset(): void {\n    this.onFormReset();\n    this.syncFormValue();\n    this.syncValidity();\n\n    this.dispatchEvent(\n      new CustomEvent<SkyCheckboxValueClearedDetail>('value-cleared', {\n        detail: { value: this.value, checked: this.checked },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private _updateVisualState(): void {\n    const cbx = this.shadowRoot?.querySelector('.cbx');\n    if (!cbx) return;\n\n    if (this.checked) {\n      cbx.classList.add('checked');\n      cbx.classList.remove('indeterminate');\n    } else if (this.indeterminate) {\n      cbx.classList.add('indeterminate');\n      cbx.classList.remove('checked');\n    } else {\n      cbx.classList.remove('checked', 'indeterminate');\n    }\n  }\n\n  private _slotHasMeaningfulContent(slotEl: HTMLSlotElement): boolean {\n    const nodes = slotEl.assignedNodes({ flatten: true });\n    return nodes.some((n) =>\n      n.nodeType === Node.ELEMENT_NODE\n        ? true\n        : (n.textContent ?? '').trim().length > 0\n    );\n  }\n\n  private _onSlotChange = (e: Event) => {\n    const slot = e.target as HTMLSlotElement;\n    const next = this._slotHasMeaningfulContent(slot);\n    if (next !== this._hasMeaningfulSlot) this._hasMeaningfulSlot = next;\n  };\n\n  private get _hasTextContent(): boolean {\n    return (\n      !!this.prefix || !!this.suffix || !!this.label || this._hasMeaningfulSlot\n    );\n  }\n\n  private handleBlur = (_e: FocusEvent): void => {\n    this.validationActive = true;\n    this.validateInput();\n\n    const cbx = this.shadowRoot?.querySelector('.cbx');\n    cbx?.classList.remove('active');\n\n    this.syncValidity();\n  };\n  private _onKeyDown = (e: KeyboardEvent): void => {\n    if (this.disabled || this.readonly) return;\n\n    if (e.key === ' ' || e.key === 'Enter') {\n      e.preventDefault();\n      this._inputElement?.click();\n    }\n  };\n\n  override render() {\n    const hasText = this._hasTextContent;\n    const wrapperClasses = classMap({\n      'checkbox-wrapper': true,\n      'no-text': !hasText,\n    });\n    const labelClasses = classMap({\n      cbx: true,\n      checked: this.checked,\n      indeterminate: this.indeterminate,\n    });\n    const boxClasses = classMap({\n      box: true,\n      'box--checked': this.checked,\n      'box--indeterminate': this.indeterminate,\n      'box--invalid': this.validationErrors.length > 0,\n    });\n    const boxPart =\n      'box' +\n      (this.checked ? ' box--checked' : '') +\n      (this.indeterminate ? ' box--indeterminate' : '') +\n      (this.validationErrors.length ? ' box--invalid' : '');\n\n    return html`\n      <div class=${wrapperClasses} part=\"wrapper\">\n        <input\n          type=\"checkbox\"\n          id=\"${this._inputId}\"\n          class=\"inp-cbx\"\n          part=\"input\"\n          .checked=\"${this.checked}\"\n          @blur=${this.handleBlur}\n          @keydown=${this._onKeyDown}\n          .disabled=\"${this.disabled || this.readonly}\"\n          .value=\"${this.value}\"\n          @change=${this.handleChange}\n          aria-checked=${this.indeterminate ? 'mixed' : this.checked}\n          aria-invalid=\"${this.validationErrors.length > 0}\"\n          aria-readonly=\"${this.readonly}\"\n        />\n        <label class=${labelClasses} part=\"label\" for=\"${this._inputId}\">\n          <span part=${boxPart} class=${boxClasses}>\n            <svg viewBox=\"0 0 12 10\" class=\"checkmark\" part=\"checkmark\">\n              <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\n            </svg>\n            <div class=\"indeterminate-line\" part=\"indeterminate-line\"></div>\n          </span>\n          <slot @slotchange=${this._onSlotChange}></slot>\n          ${when(hasText, () => {\n            const textStyle = styleMap({\n              textAlign: 'start',\n              color: 'var(--sky-text-primary)',\n            });\n            const prefixStyle = styleMap({\n              color: this.prefixColor,\n              display: 'inline-block',\n            });\n            const suffixStyle = styleMap({\n              color: this.suffixColor,\n              display: 'inline-block',\n            });\n            return html`\n              <span style=${textStyle} part=\"text\">\n                <div style=${prefixStyle} part=\"prefix\">${this.prefix}</div>\n                ${this._hasMeaningfulSlot ? nothing : this.label}\n                <div style=${suffixStyle} part=\"suffix\">${this.suffix}</div>\n              </span>\n            `;\n          })}\n        </label>\n      </div>\n      ${when(\n        this.showErrors &&\n          this.validationErrors.length > 0 &&\n          this.validationActive,\n        () =>\n          html`<div class=\"error-message\" part=\"error-message\">\n            ${this.validationErrors[0]}\n          </div>`\n      )}\n    `;\n  }\n}\n"],"names":["SkyCheckbox","FormControlBase","constructor","super","arguments","this","label","id","value","color","defaultChecked","showErrors","prefix","suffix","prefixColor","suffixColor","validationActive","invalid","_checked","_indeterminate","validationErrors","_hasMeaningfulSlot","_inputId","Math","random","toString","slice","_onSlotChange","e","slot","target","next","_slotHasMeaningfulContent","handleBlur","_e","validateInput","cbx","shadowRoot","querySelector","classList","remove","syncValidity","_onKeyDown","disabled","readonly","key","preventDefault","_inputElement","click","checked","v","old","indeterminate","requestUpdate","_updateVisualState","syncFormValue","getFormValue","name","trim","setValueFromFormState","state","getValidityAnchor","isEmpty","getNativeControl","onFormReset","willUpdate","changed","has","style","setProperty","resolveColor","updated","handleChange","event","stopPropagation","emittedValue","dispatchEvent","CustomEvent","detail","bubbles","composed","required","requiredMessage","errors","length","add","isValid","check","uncheck","toggle","reset","slotEl","assignedNodes","flatten","some","n","nodeType","Node","ELEMENT_NODE","textContent","_hasTextContent","render","hasText","wrapperClasses","classMap","labelClasses","boxClasses","box","boxPart","html","when","textStyle","styleMap","textAlign","prefixStyle","display","suffixStyle","nothing","shadowRootOptions","LitElement","delegatesFocus","styles","css","unsafeCSS","cssOnFillEnhance","selector","fillVar","property","__decorateClass","type","String","prototype","Boolean","reflect","customElement"],"mappings":"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"}
+{"version":3,"file":"sky-checkbox.js","sources":["../../src/sky-checkbox/sky-checkbox.ts"],"sourcesContent":["import { LitElement, html, css, nothing, unsafeCSS } from \"lit\";\r\nimport { property, customElement, state } from \"lit/decorators.js\";\r\nimport { when } from \"lit/directives/when.js\";\r\nimport { classMap } from \"lit/directives/class-map.js\";\r\nimport { styleMap } from \"lit/directives/style-map.js\";\r\nimport { resolveColor } from \"../helper/utils/color-resolver\";\r\nimport { cssOnFillEnhance } from \"../helper/utils/contrast-color\";\r\nimport { FormControlBase, FormState } from \"../helper/internals/form-control-base\";\r\n\r\nexport interface CheckboxProperties {\r\n  label: string;\r\n  checked: boolean;\r\n  disabled: boolean;\r\n  indeterminate: boolean;\r\n  id: string;\r\n  value: string;\r\n  color: string;\r\n  required: boolean;\r\n  validationErrors: string[];\r\n  validationActive: boolean;\r\n  defaultChecked: boolean;\r\n  requiredMessage: string;\r\n  showErrors: boolean;\r\n  prefix: string;\r\n  suffix: string;\r\n  prefixColor: string;\r\n  suffixColor: string;\r\n}\r\n/** `checked` is always the boolean model; `value` keeps form/legacy semantics (see `handleChange`). */\r\nexport type SkyCheckboxValueChangedDetail = {\r\n  checked: boolean;\r\n  value: string | boolean | undefined;\r\n};\r\nexport type SkyCheckboxValidationErrorDetail = { errors: string[] };\r\nexport type SkyCheckboxValueClearedDetail = { value: string; checked: boolean };\r\n\r\n/**\r\n * @element sky-checkbox\r\n *\r\n * @summary Form-associated checkbox with validation, indeterminate state, and customizable label/prefix/suffix rendering.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://library.sky-ui.com/components/checkbox\r\n *\r\n * @uiVModel checked value-changed detail=checked\r\n *\r\n * @slot - Default slot for the checkbox label or other content.\r\n * @slot prefix - Optional prefix content that can be placed before the label.\r\n * @slot suffix - Optional suffix content that can be placed after the label.\r\n *\r\n * @csspart wrapper - The wrapper element for the checkbox.\r\n * @csspart input - The native input element used for the checkbox.\r\n * @csspart label - The label element for the checkbox, used for styling.\r\n * @csspart box - The visual box for the checkbox, which includes the checkmark and indeterminate state.\r\n * @csspart checkmark - The checkmark icon that appears when the checkbox is checked.\r\n * @csspart indeterminate-line - The line representing the indeterminate state of the checkbox.\r\n * @csspart error-message - The error message displayed if the checkbox is invalid.\r\n *\r\n * @property {string} label - The label for the checkbox. Default: `\"\"`.\r\n * @property {boolean} checked - Whether the checkbox is checked. Default: `false`.\r\n * @property {boolean} indeterminate - Whether the checkbox is in the indeterminate state. Default: `false`.\r\n * @property {string} color - The color used for the checkbox and its checkmark. Default: `\"primary\"`.\r\n * @property {string} value - The value of the checkbox, which gets submitted with the form. Default: `\"\"`.\r\n * @property {boolean} showErrors - Whether to display validation error messages. Default: `false`.\r\n * @property {string} prefix - Optional prefix text or content before the label. Default: `\"\"`.\r\n * @property {string} suffix - Optional suffix text or content after the label. Default: `\"\"`.\r\n * @property {string} prefixColor - The color for the prefix text. Default: `\"\"`.\r\n * @property {string} suffixColor - The color for the suffix text. Default: `\"\"`.\r\n * @property {boolean} defaultChecked - Default checked state for reset operations. Default: `false`.\r\n * @method check Sets checked state to `true`.\r\n * @method uncheck Sets checked state to `false`.\r\n * @method toggle Toggles checked state.\r\n * @method reset Resets checkbox state to defaults and clears UI validation state.\r\n *\r\n * @fires {CustomEvent<SkyCheckboxValueChangedDetail>} value-changed - Fired when checked state changes; `detail.checked` is always boolean (use for v-model). `detail.value` is the form token when the `value` prop is set, else mirrors `checked`.\r\n * @fires {CustomEvent<SkyCheckboxValidationErrorDetail>} validation-error - Fired when validation errors are updated.\r\n * @fires {CustomEvent<SkyCheckboxValueClearedDetail>} value-cleared - Fired when checkbox is reset programmatically.\r\n *\r\n * @example\r\n * ```html\r\n * <sky-checkbox label=\"Accept Terms\" required showerrors prefix=\"Legal\"></sky-checkbox>\r\n * ```\r\n * ```vue\r\n * <template>\r\n *   <sky-checkbox label=\"Accept Terms\" required showerrors prefix=\"Legal\"></sky-checkbox>\r\n * </template>\r\n * ```\r\n * ```jsx\r\n * export default function Demo() {\r\n *   return <sky-checkbox label=\"Accept Terms\" required showerrors prefix=\"Legal\"></sky-checkbox>;\r\n * }\r\n * ```\r\n */\r\n@customElement(\"sky-checkbox\")\r\nexport class SkyCheckbox extends FormControlBase {\r\n  static override shadowRootOptions = {\r\n    ...LitElement.shadowRootOptions,\r\n    delegatesFocus: true,\r\n  };\r\n\r\n  @property({ type: String }) label = \"\";\r\n  @property({ type: String }) override id = \"\";\r\n  @property({ type: String }) value = \"\";\r\n  @property({ type: String }) color = \"primary\";\r\n  @property({ type: Boolean }) defaultChecked = false;\r\n  @property({ type: Boolean }) showErrors = false;\r\n  @property({ type: String }) override prefix = \"\";\r\n  @property({ type: String }) suffix = \"\";\r\n  @property({ type: String }) prefixColor = \"\";\r\n  @property({ type: String }) suffixColor = \"\";\r\n  @property({ type: Boolean, reflect: true }) validationActive: boolean = false;\r\n  @property({ type: Boolean, reflect: true }) invalid: boolean = false;\r\n  @state() private _checked = false;\r\n  @state() private _indeterminate = false;\r\n  @state() private validationErrors: string[] = [];\r\n  @state() private _hasMeaningfulSlot = false;\r\n\r\n  private _inputElement?: HTMLInputElement;\r\n  private _inputId = `sky-cb-${Math.random().toString(36).slice(2)}`;\r\n\r\n  @property({ type: Boolean, reflect: true })\r\n  get checked() {\r\n    return this._checked;\r\n  }\r\n  set checked(v: boolean) {\r\n    const old = this._checked;\r\n    this._checked = v;\r\n\r\n    if (v && this.indeterminate) {\r\n      this.indeterminate = false;\r\n      if (this._inputElement) this._inputElement.indeterminate = false;\r\n    }\r\n\r\n    this.requestUpdate(\"checked\", old);\r\n\r\n    if (this._inputElement) {\r\n      this._inputElement.checked = v;\r\n      this._inputElement.indeterminate = this.indeterminate;\r\n    }\r\n\r\n    this._updateVisualState();\r\n\r\n    this.syncFormValue();\r\n    this.syncValidity();\r\n  }\r\n\r\n  @property({ type: Boolean, reflect: true })\r\n  get indeterminate() {\r\n    return this._indeterminate;\r\n  }\r\n  set indeterminate(v: boolean) {\r\n    const old = this._indeterminate;\r\n    this._indeterminate = v;\r\n\r\n    if (v && this.checked) this.checked = false;\r\n\r\n    this.requestUpdate(\"indeterminate\", old);\r\n\r\n    if (this._inputElement) this._inputElement.indeterminate = v;\r\n\r\n    this._updateVisualState();\r\n\r\n    this.syncValidity();\r\n  }\r\n\r\n  static override styles = css`\r\n    :host {\r\n      display: block;\r\n      position: relative;\r\n      font-family: var(--sky-font);\r\n    }\r\n\r\n:host([readonly]) .cbx {\r\n  cursor: default;\r\n}\r\n\r\n/* Show focus UI whenever anything inside is focused */\r\n:host(:focus-within) .cbx span:first-child,:host(:focus) .cbx span:first-child {\r\n box-shadow: var(--sky-focus-ring);\r\n border-color: var(--checkbox-color)!important;\r\n}\r\n\r\n    .checkbox-wrapper {\r\n      position: relative;\r\n      display: flex;\r\n      align-items: center;\r\n      gap: var(--sky-space-1, 5px);\r\n    }\r\n\r\n    :host([disabled]) {\r\n      pointer-events: none;\r\n      opacity: var(--sky-opacity-disabled, 0.6);\r\n    }\r\n\r\n    .cbx {\r\n      display: flex;\r\n      align-items: center;\r\n      cursor: pointer;\r\n      user-select: none;\r\n      gap: var(--sky-space-1, 5px);\r\n      transition: color 0.2s ease;\r\n      font-family: var(--sky-font);\r\n      font-size: var(--sky-font-size-sm);\r\n      line-height: var(--sky-line-height-snug, 1.25);\r\n      color: var(--sky-text-primary);\r\n    }\r\n\r\n    .cbx span {\r\n      display: inline-block;\r\n      vertical-align: middle;\r\n    }\r\n\r\n    .cbx span:first-child {\r\n      position: relative;\r\n      box-sizing: border-box;\r\n      width: 18px;\r\n      height: 18px;\r\n      flex-shrink: 0;\r\n      border-radius: min(6px, var(--sky-radius-primary));\r\n      vertical-align: middle;\r\n      background: var(--sky-glass-solid);\r\n      border: 2px solid var(--sky-text-tertiary);\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      transform: translateZ(0);\r\n      contain: layout;\r\n      overflow: hidden;\r\n      transition: background-color 0.2s ease, border-color 0.2s ease,\r\n        box-shadow 0.2s ease;\r\n    }\r\n\r\n    .cbx span:first-child svg {\r\n      position: absolute;\r\n      width: 12px;\r\n      height: 10px;\r\n      fill: none;\r\n      stroke: var(--sky-on-color-fallback-light, var(--sky-text-white));\r\n      stroke-width: 2;\r\n      stroke-linecap: round;\r\n      stroke-linejoin: round;\r\n      stroke-dasharray: 16px;\r\n      stroke-dashoffset: 16px;\r\n      transition: stroke-dashoffset 0.2s ease, transform 0.2s ease;\r\n      transform: translate3d(0, 0, 0);\r\n    }\r\n\r\n    .cbx:hover span:first-child {\r\n      background-color: var(--sky-hover-primary);\r\n      border-color: var(--sky-text-tertiary);\r\n    }\r\n\r\n    input[type=\"checkbox\"]:checked + .cbx:hover span:first-child {\r\n      box-shadow: var(--sky-box-shadow-hover);\r\n      transition: box-shadow 0.2s ease;\r\n    }\r\n\r\n    .cbx span:first-child:before {\r\n      content: \"\";\r\n      inset: 0;\r\n      width: auto;\r\n      height: auto;\r\n      background: var(--checkbox-color, var(--sky-active-primary));\r\n      display: block;\r\n      transform: scale(0);\r\n      opacity: 0;\r\n      border-radius: 50%;\r\n      transition: transform 0.2s ease-out, opacity 0.2s ease-out;\r\n      position: absolute;\r\n      z-index: -1;\r\n      pointer-events: none;\r\n    }\r\n\r\ninput[type=\"checkbox\"] {\r\n  position: absolute;\r\n  opacity: 0;\r\n  width: 1px;\r\n  height: 1px;\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n\r\n}\r\n\r\n    input[type=\"checkbox\"]:focus-visible + .cbx span:first-child,\r\n    input[type=\"checkbox\"]:focus + .cbx span:first-child {\r\n      border-color: var(--sky-text-tertiary);\r\n      outline:none;\r\n    }\r\n\r\ninput[type=\"checkbox\"]:checked + .cbx span:first-child {\r\n  background: var(--checkbox-color, var(--sky-active-primary));\r\n  border-color: var(--checkbox-color, var(--sky-active-primary));\r\n\r\n  transform: none; /* Ensure no transform applied */\r\n}\r\n\r\n    input[type=\"checkbox\"]:checked + .cbx span:first-child svg.checkmark {\r\n      stroke-dashoffset: 0;\r\n      transition: stroke-dashoffset 0.2s ease-in-out 0.1s,\r\n        transform 0.2s ease-in-out 0.1s;\r\n    }\r\n\r\n    input[type=\"checkbox\"]:not(:checked) + .cbx span:first-child svg.checkmark {\r\n      transition: opacity 0.2s ease-in-out;\r\n      opacity: 0;\r\n    }\r\n\r\n    input[type=\"checkbox\"]:checked + .cbx span:first-child:before {\r\n      transform: scale(3.5);\r\n      opacity: 0;\r\n      transition: transform 0.2s ease-out, opacity 0.2s ease-out;\r\n    }\r\n\r\n    .cbx.checked span:first-child {\r\n  background: var(--checkbox-color, var(--sky-active-primary));\r\n  border-color: var(--checkbox-color, var(--sky-active-primary));\r\n\r\n}\r\n.cbx.checked span:first-child svg.checkmark {\r\n  stroke-dashoffset: 0;\r\n  transition: stroke-dashoffset 0.2s ease-in-out 0.1s,\r\n              transform 0.2s ease-in-out 0.1s;\r\n}\r\n\r\n    .indeterminate-line {\r\n      width: 10px;\r\n      height: 2px;\r\n      background-color: var(--sky-on-color-fallback-light, var(--sky-text-white));\r\n      position: absolute;\r\n      border-radius: 1px;\r\n      transition: opacity 0.2s ease, transform 0.2s ease;\r\n      opacity: 0;\r\n      transform: scaleX(0);\r\n    }\r\n\r\n    .indeterminate-active {\r\n      opacity: 1;\r\n      transform: scaleX(1);\r\n    }\r\n\r\n    .checked .checkmark {\r\n      stroke-dashoffset: 0;\r\n    }\r\n\r\n    .indeterminate .checkmark {\r\n      display: none;\r\n    }\r\n\r\n    .indeterminate .indeterminate-line {\r\n      opacity: 1;\r\n      transform: scaleX(1);\r\n    }\r\n\r\n\r\n    .error-message {\r\n      font-size: var(--sky-font-size-xs);\r\n      color: var(--sky-danger-primary);\r\n      white-space: nowrap;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n      pointer-events: none;\r\n      margin-left: var(--sky-space-1, 5px);\r\n      width: 100%;\r\n      text-align: start;\r\n      font-family: var(--sky-font);\r\n    }\r\n    :dir(rtl) .error-message {\r\n      margin-right: var(--sky-space-1, 5px);\r\n      margin-left: unset;\r\n    }\r\n\r\n    :host([validationactive]:invalid) .cbx span:first-child {\r\n\r\n      border-color: var(--sky-danger-primary);\r\n    }\r\n    :host([validationactive]:invalid) .cbx span:first-child svg.checkmark {\r\n      stroke-dashoffset: 0;\r\n    }\r\n    :host([validationactive]:invalid) .cbx span:first-child:before {\r\n      transform: scale(3.5);\r\n      opacity: 0;\r\n    }\r\n    :host([validationactive]:invalid) .error-message {\r\n      display: block;\r\n    }\r\n\r\n    :host([indeterminate]) .indeterminate-line {\r\n      opacity: 1;\r\n      transform: scaleX(1);\r\n    }\r\n    :host([indeterminate]) .cbx span:first-child {\r\n      background-color: var(--checkbox-color);\r\n      border-color: var(--checkbox-color);\r\n    }\r\n\r\n    .checkbox-wrapper.no-text {\r\n  gap: 0;\r\n}\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      .cbx,\r\n      .cbx span:first-child,\r\n      .cbx span:first-child svg,\r\n      .cbx span:first-child:before,\r\n      .indeterminate-line {\r\n        transition: none;\r\n      }\r\n    }\r\n\r\n    ${unsafeCSS(\r\n      cssOnFillEnhance([\r\n        {\r\n          selector:\r\n            'input[type=\"checkbox\"]:checked + .cbx span:first-child svg, .cbx.checked span:first-child svg',\r\n          fillVar: \"var(--checkbox-color, var(--sky-active-primary))\",\r\n          property: \"stroke\",\r\n        },\r\n        {\r\n          selector: \".indeterminate-line, .indeterminate .indeterminate-line\",\r\n          fillVar: \"var(--checkbox-color, var(--sky-active-primary))\",\r\n          property: \"background-color\",\r\n        },\r\n      ]),\r\n    )}\r\n  `;\r\n\r\n  protected override getFormValue(): FormState {\r\n    if (!this.name) return null;\r\n    if (this.disabled) return null;\r\n\r\n    if (!this.checked) return null;\r\n\r\n    if (this.value && this.value.trim() !== \"\") return this.value;\r\n\r\n    return \"on\";\r\n  }\r\n\r\n  protected override setValueFromFormState(state: FormState): void {\r\n    if (state === null) {\r\n      this.checked = false;\r\n      this.indeterminate = false;\r\n      return;\r\n    }\r\n\r\n    if (typeof state === \"string\") {\r\n      if (this.value && this.value.trim() !== \"\") {\r\n        this.checked = state === this.value;\r\n      } else {\r\n        this.checked = state === \"on\" || state === \"true\" || state === \"1\";\r\n      }\r\n      this.indeterminate = false;\r\n    }\r\n  }\r\n\r\n  protected override getValidityAnchor(): HTMLElement | undefined {\r\n    return (this.shadowRoot?.querySelector('input[type=\"checkbox\"]') as HTMLElement) ?? undefined;\r\n  }\r\n\r\n  protected override isEmpty(): boolean {\r\n    return !this.checked;\r\n  }\r\n\r\n  protected override getNativeControl(): HTMLElement | null {\r\n    return this.shadowRoot?.querySelector('input[type=\"checkbox\"]') as HTMLInputElement | null;\r\n  }\r\n\r\n  protected override onFormReset(): void {\r\n    this.checked = this.defaultChecked;\r\n    this.indeterminate = false;\r\n\r\n    this.validationErrors = [];\r\n    this.invalid = false;\r\n    this.validationActive = false;\r\n  }\r\n\r\n  override willUpdate(changed: Map<string | number | symbol, unknown>): void {\r\n    if (changed.has(\"color\")) {\r\n      this.style.setProperty(\"--checkbox-color\", resolveColor(this.color));\r\n    }\r\n  }\r\n\r\n  override updated(changed: Map<string, unknown>): void {\r\n    super.updated(changed);\r\n\r\n    if (!this._inputElement) {\r\n      this._inputElement = this.shadowRoot?.querySelector(\r\n        'input[type=\"checkbox\"]'\r\n      ) as HTMLInputElement;\r\n    }\r\n\r\n    if (this._inputElement) {\r\n      this._inputElement.checked = this.checked;\r\n      this._inputElement.indeterminate = this.indeterminate;\r\n      this._inputElement.disabled = this.disabled || this.readonly;\r\n    }\r\n\r\n    this._updateVisualState();\r\n\r\n    if (\r\n      changed.has(\"checked\") ||\r\n      changed.has(\"name\") ||\r\n      changed.has(\"disabled\") ||\r\n      changed.has(\"readonly\") ||\r\n      changed.has(\"required\") ||\r\n      changed.has(\"value\")\r\n    ) {\r\n      this.syncFormValue();\r\n      this.syncValidity();\r\n    }\r\n  }\r\n\r\n  private handleChange(event: Event): void {\r\n    const target = event.target as HTMLInputElement;\r\n\r\n    if (this.disabled || this.readonly) {\r\n      if (this._inputElement) {\r\n        this._inputElement.checked = this.checked;\r\n        this._inputElement.indeterminate = this.indeterminate;\r\n      }\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      return;\r\n    }\r\n\r\n    this.checked = target.checked;\r\n\r\n    // UI validation\r\n    this.validateInput();\r\n\r\n    const emittedValue =\r\n      this.value && this.value.trim() !== \"\"\r\n        ? this.checked ? this.value : undefined\r\n        : this.checked;\r\n\r\n    this.dispatchEvent(\r\n      new CustomEvent<SkyCheckboxValueChangedDetail>(\"value-changed\", {\r\n        detail: { checked: this.checked, value: emittedValue },\r\n        bubbles: true,\r\n        composed: true,\r\n      })\r\n    );\r\n  }\r\n\r\n  private validateInput(): boolean {\r\n    if (!this.validationActive) return true;\r\n\r\n    this.validationErrors = [];\r\n    if (this.required && !this.checked) {\r\n      this.validationErrors = [this.requiredMessage]; // from base\r\n    }\r\n\r\n    this.dispatchEvent(\r\n      new CustomEvent<SkyCheckboxValidationErrorDetail>(\"validation-error\", {\r\n        detail: { errors: [...this.validationErrors] },\r\n        bubbles: true,\r\n        composed: true,\r\n      })\r\n    );\r\n\r\n    const cbx = this.shadowRoot?.querySelector(\".cbx\") as HTMLElement | null;\r\n    if (this.validationErrors.length) cbx?.classList.add(\"invalid\");\r\n    else cbx?.classList.remove(\"invalid\");\r\n\r\n    const isValid = this.validationErrors.length === 0;\r\n    this.invalid = !isValid;\r\n\r\n    return isValid;\r\n  }\r\n\r\n  /**\r\n   * Sets checked state to `true`.\r\n   *\r\n   * @returns {void}\r\n   */\r\n  public check(): void {\r\n    if (this.disabled || this.readonly) return;\r\n    this.checked = true;\r\n    this.indeterminate = false;\r\n  }\r\n\r\n  /**\r\n   * Sets checked state to `false`.\r\n   *\r\n   * @returns {void}\r\n   */\r\n  public uncheck(): void {\r\n    if (this.disabled || this.readonly) return;\r\n    this.checked = false;\r\n    this.indeterminate = false;\r\n  }\r\n\r\n  /**\r\n   * Toggles checked state.\r\n   *\r\n   * @returns {void}\r\n   */\r\n  public toggle(): void {\r\n    if (this.disabled || this.readonly) return;\r\n    this.checked = !this.checked;\r\n    this.indeterminate = false;\r\n  }\r\n\r\n  /**\r\n   * Resets checkbox state to defaults and clears UI validation state.\r\n   *\r\n   * @returns {void}\r\n   */\r\n  public reset(): void {\r\n    this.onFormReset();\r\n    this.syncFormValue();\r\n    this.syncValidity();\r\n\r\n    this.dispatchEvent(\r\n      new CustomEvent<SkyCheckboxValueClearedDetail>(\"value-cleared\", {\r\n        detail: { value: this.value, checked: this.checked },\r\n        bubbles: true,\r\n        composed: true,\r\n      })\r\n    );\r\n  }\r\n\r\n  private _updateVisualState(): void {\r\n    const cbx = this.shadowRoot?.querySelector(\".cbx\");\r\n    if (!cbx) return;\r\n\r\n    if (this.checked) {\r\n      cbx.classList.add(\"checked\");\r\n      cbx.classList.remove(\"indeterminate\");\r\n    } else if (this.indeterminate) {\r\n      cbx.classList.add(\"indeterminate\");\r\n      cbx.classList.remove(\"checked\");\r\n    } else {\r\n      cbx.classList.remove(\"checked\", \"indeterminate\");\r\n    }\r\n  }\r\n\r\n  private _slotHasMeaningfulContent(slotEl: HTMLSlotElement): boolean {\r\n    const nodes = slotEl.assignedNodes({ flatten: true });\r\n    return nodes.some((n) =>\r\n      n.nodeType === Node.ELEMENT_NODE\r\n        ? true\r\n        : (n.textContent ?? \"\").trim().length > 0\r\n    );\r\n  }\r\n\r\n  private _onSlotChange = (e: Event) => {\r\n    const slot = e.target as HTMLSlotElement;\r\n    const next = this._slotHasMeaningfulContent(slot);\r\n    if (next !== this._hasMeaningfulSlot) this._hasMeaningfulSlot = next;\r\n  };\r\n\r\n  private get _hasTextContent(): boolean {\r\n    return !!this.prefix || !!this.suffix || !!this.label || this._hasMeaningfulSlot;\r\n  }\r\n\r\n  private handleBlur = (_e: FocusEvent): void => {\r\n    this.validationActive = true;\r\n    this.validateInput();\r\n\r\n    const cbx = this.shadowRoot?.querySelector(\".cbx\");\r\n    cbx?.classList.remove(\"active\");\r\n\r\n    this.syncValidity();\r\n  };\r\n  private _onKeyDown = (e: KeyboardEvent): void => {\r\n    if (this.disabled || this.readonly) return;\r\n\r\n    if (e.key === \" \" || e.key === \"Enter\") {\r\n      e.preventDefault();\r\n      this._inputElement?.click();\r\n    }\r\n  };\r\n\r\n\r\n  override render() {\r\n    const hasText = this._hasTextContent;\r\n    const wrapperClasses = classMap({\r\n      \"checkbox-wrapper\": true,\r\n      \"no-text\": !hasText,\r\n    });\r\n    const labelClasses = classMap({\r\n      cbx: true,\r\n      checked: this.checked,\r\n      indeterminate: this.indeterminate,\r\n    });\r\n    const boxClasses = classMap({\r\n      box: true,\r\n      \"box--checked\": this.checked,\r\n      \"box--indeterminate\": this.indeterminate,\r\n      \"box--invalid\": this.validationErrors.length > 0,\r\n    });\r\n    const boxPart =\r\n      \"box\" +\r\n      (this.checked ? \" box--checked\" : \"\") +\r\n      (this.indeterminate ? \" box--indeterminate\" : \"\") +\r\n      (this.validationErrors.length ? \" box--invalid\" : \"\");\r\n\r\n    return html`\r\n      <div class=${wrapperClasses} part=\"wrapper\">\r\n        <input\r\n          type=\"checkbox\"\r\n          id=\"${this._inputId}\"\r\n          class=\"inp-cbx\"\r\n          part=\"input\"\r\n          .checked=\"${this.checked}\"\r\n          @blur=${this.handleBlur}\r\n          @keydown=${this._onKeyDown}\r\n          .disabled=\"${this.disabled || this.readonly}\"\r\n          .value=\"${this.value}\"\r\n          @change=${this.handleChange}\r\n          aria-checked=${this.indeterminate ? \"mixed\" : this.checked}\r\n          aria-invalid=\"${this.validationErrors.length > 0}\"\r\n          aria-readonly=\"${this.readonly}\"\r\n        />\r\n        <label class=${labelClasses} part=\"label\" for=\"${this._inputId}\">\r\n          <span part=${boxPart} class=${boxClasses}>\r\n            <svg viewBox=\"0 0 12 10\" class=\"checkmark\" part=\"checkmark\">\r\n              <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\r\n            </svg>\r\n            <div class=\"indeterminate-line\" part=\"indeterminate-line\"></div>\r\n          </span>\r\n          <slot @slotchange=${this._onSlotChange}></slot>\r\n          ${when(\r\n            hasText,\r\n            () => {\r\n              const textStyle = styleMap({ textAlign: \"start\", color: \"var(--sky-text-primary)\" });\r\n              const prefixStyle = styleMap({ color: this.prefixColor, display: \"inline-block\" });\r\n              const suffixStyle = styleMap({ color: this.suffixColor, display: \"inline-block\" });\r\n              return html`\r\n              <span style=${textStyle} part=\"text\">\r\n                <div style=${prefixStyle} part=\"prefix\">\r\n                  ${this.prefix}\r\n                </div>\r\n                ${this._hasMeaningfulSlot ? nothing : this.label}\r\n                <div style=${suffixStyle} part=\"suffix\">\r\n                  ${this.suffix}\r\n                </div>\r\n              </span>\r\n            `;\r\n            },\r\n          )}\r\n        </label>\r\n      </div>\r\n      ${when(\r\n        this.showErrors &&\r\n          this.validationErrors.length > 0 &&\r\n          this.validationActive,\r\n        () => html`<div class=\"error-message\" part=\"error-message\">\r\n          ${this.validationErrors[0]}\r\n        </div>`,\r\n      )}\r\n    `;\r\n  }\r\n}"],"names":["SkyCheckbox","FormControlBase","constructor","super","arguments","this","label","id","value","color","defaultChecked","showErrors","prefix","suffix","prefixColor","suffixColor","validationActive","invalid","_checked","_indeterminate","validationErrors","_hasMeaningfulSlot","_inputId","Math","random","toString","slice","_onSlotChange","e","slot","target","next","_slotHasMeaningfulContent","handleBlur","_e","validateInput","cbx","shadowRoot","querySelector","classList","remove","syncValidity","_onKeyDown","disabled","readonly","key","preventDefault","_inputElement","click","checked","v","old","indeterminate","requestUpdate","_updateVisualState","syncFormValue","getFormValue","name","trim","setValueFromFormState","state","getValidityAnchor","isEmpty","getNativeControl","onFormReset","willUpdate","changed","has","style","setProperty","resolveColor","updated","handleChange","event","stopPropagation","emittedValue","dispatchEvent","CustomEvent","detail","bubbles","composed","required","requiredMessage","errors","length","add","isValid","check","uncheck","toggle","reset","slotEl","assignedNodes","flatten","some","n","nodeType","Node","ELEMENT_NODE","textContent","_hasTextContent","render","hasText","wrapperClasses","classMap","labelClasses","boxClasses","box","boxPart","html","when","textStyle","styleMap","textAlign","prefixStyle","display","suffixStyle","nothing","shadowRootOptions","LitElement","delegatesFocus","styles","css","unsafeCSS","cssOnFillEnhance","selector","fillVar","property","__decorateClass","type","String","prototype","Boolean","reflect","customElement"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
-import { LitElement } from 'lit';
-export type SkyChipVariant = 'solid' | 'flat' | 'shadow' | 'bordered' | 'faded' | 'light' | 'dot';
+import { LitElement } from "lit";
+export type SkyChipVariant = "solid" | "flat" | "shadow" | "bordered" | "faded" | "light" | "dot";
 export type SkyChipRemovedEventDetail = {
     label: string;
 };
@@ -11,7 +11,7 @@ export type SkyChipRemovedEventDetail = {
  * @status stable
  * @since 1.0.0
  *
- * @documentation https://sky-ui.com/components/chip
+ * @documentation https://library.sky-ui.com/components/chip
  * @dependency sky-icon
  *
  * @slot - Default slot for the chip label or any other content.