npm - @sky.ui/core - Versions diffs - 0.0.39 → 0.0.40 - Mend

@sky.ui/core 0.0.39 → 0.0.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (86) hide show

package/dist/custom-elements.json +1730 -1730
package/dist/helper/controllers/animation-controller.d.ts +4 -4
package/dist/helper/controllers/animation-controller.js.map +1 -1
package/dist/helper/controllers/popover-controller.d.ts +11 -11
package/dist/helper/controllers/popover-controller.js.map +1 -1
package/dist/helper/iconify-offline.js.map +1 -1
package/dist/helper/internals/form-control-base.d.ts +4 -4
package/dist/helper/internals/form-control-base.js.map +1 -1
package/dist/helper/utils/color-resolver.js.map +1 -1
package/dist/helper/utils/contrast-color.d.ts +4 -4
package/dist/helper/utils/contrast-color.js.map +1 -1
package/dist/helper/utils/size-resolver.js.map +1 -1
package/dist/sky-alert/sky-alert.d.ts +5 -5
package/dist/sky-alert/sky-alert.js +16 -6
package/dist/sky-alert/sky-alert.js.map +1 -1
package/dist/sky-appbar/sky-appbar.d.ts +2 -2
package/dist/sky-appbar/sky-appbar.js +15 -23
package/dist/sky-appbar/sky-appbar.js.map +1 -1
package/dist/sky-avatar/sky-avatar.d.ts +3 -3
package/dist/sky-avatar/sky-avatar.js +8 -11
package/dist/sky-avatar/sky-avatar.js.map +1 -1
package/dist/sky-badge/sky-badge.d.ts +5 -5
package/dist/sky-badge/sky-badge.js +10 -6
package/dist/sky-badge/sky-badge.js.map +1 -1
package/dist/sky-button/sky-button.d.ts +5 -5
package/dist/sky-button/sky-button.js +24 -15
package/dist/sky-button/sky-button.js.map +1 -1
package/dist/sky-card/sky-card.d.ts +5 -5
package/dist/sky-card/sky-card.js +20 -20
package/dist/sky-card/sky-card.js.map +1 -1
package/dist/sky-checkbox/sky-checkbox.d.ts +2 -2
package/dist/sky-checkbox/sky-checkbox.js +67 -59
package/dist/sky-checkbox/sky-checkbox.js.map +1 -1
package/dist/sky-chip/sky-chip.d.ts +3 -3
package/dist/sky-chip/sky-chip.js +34 -25
package/dist/sky-chip/sky-chip.js.map +1 -1
package/dist/sky-col/sky-col.d.ts +4 -4
package/dist/sky-col/sky-col.js +8 -3
package/dist/sky-col/sky-col.js.map +1 -1
package/dist/sky-combobox/sky-combobox.d.ts +8 -8
package/dist/sky-combobox/sky-combobox.js +201 -168
package/dist/sky-combobox/sky-combobox.js.map +1 -1
package/dist/sky-dialog/sky-dialog.d.ts +4 -4
package/dist/sky-dialog/sky-dialog.js +17 -19
package/dist/sky-dialog/sky-dialog.js.map +1 -1
package/dist/sky-divider/sky-divider.d.ts +3 -3
package/dist/sky-divider/sky-divider.js.map +1 -1
package/dist/sky-flexbox/sky-flexbox.d.ts +7 -7
package/dist/sky-flexbox/sky-flexbox.js +2 -2
package/dist/sky-flexbox/sky-flexbox.js.map +1 -1
package/dist/sky-flexcol/sky-flexcol.d.ts +3 -3
package/dist/sky-flexcol/sky-flexcol.js.map +1 -1
package/dist/sky-form/sky-form.d.ts +12 -12
package/dist/sky-form/sky-form.js +12 -12
package/dist/sky-form/sky-form.js.map +1 -1
package/dist/sky-grid/sky-grid.d.ts +2 -2
package/dist/sky-grid/sky-grid.js.map +1 -1
package/dist/sky-icon/sky-icon.d.ts +1 -1
package/dist/sky-icon/sky-icon.js +1 -1
package/dist/sky-icon/sky-icon.js.map +1 -1
package/dist/sky-image/sky-image.d.ts +5 -5
package/dist/sky-image/sky-image.js.map +1 -1
package/dist/sky-image/srcset-utils.js.map +1 -1
package/dist/sky-input/sky-input.d.ts +6 -6
package/dist/sky-input/sky-input.js +103 -88
package/dist/sky-input/sky-input.js.map +1 -1
package/dist/sky-list/sky-list.d.ts +4 -4
package/dist/sky-list/sky-list.js +1 -3
package/dist/sky-list/sky-list.js.map +1 -1
package/dist/sky-listitem/sky-listitem.d.ts +2 -2
package/dist/sky-listitem/sky-listitem.js +4 -7
package/dist/sky-listitem/sky-listitem.js.map +1 -1
package/dist/sky-radio/sky-radio.d.ts +3 -3
package/dist/sky-radio/sky-radio.js +6 -3
package/dist/sky-radio/sky-radio.js.map +1 -1
package/dist/sky-row/sky-row.d.ts +2 -2
package/dist/sky-row/sky-row.js.map +1 -1
package/dist/sky-sheet/sky-sheet.d.ts +6 -6
package/dist/sky-sheet/sky-sheet.js +21 -21
package/dist/sky-sheet/sky-sheet.js.map +1 -1
package/dist/sky-simple-table/sky-simple-table.d.ts +4 -4
package/dist/sky-simple-table/sky-simple-table.js +4 -1
package/dist/sky-simple-table/sky-simple-table.js.map +1 -1
package/dist/sky-theme-provider/sky-theme-provider.d.ts +27 -27
package/dist/sky-theme-provider/sky-theme-provider.js.map +1 -1
package/package.json +2 -2

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

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

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

@@ -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://library.sky-ui.com/components/checkbox
+ * @documentation https://sky-ui.com/components/checkbox
  *
  * @uiVModel checked value-changed detail=checked
  *

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

@@ -25,20 +25,16 @@ 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;
@@ -46,15 +42,16 @@ 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;
@@ -102,7 +99,9 @@ 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;
     }
@@ -117,7 +116,9 @@ 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);
     }
@@ -126,13 +127,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;
@@ -141,71 +142,80 @@ 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);
     }
@@ -228,7 +238,6 @@ input[type="checkbox"]:checked + .cbx span:first-child {
       transform: scaleX(1);
     }
     .error-message {
       font-size: var(--sky-font-size-xs);
       color: var(--sky-danger-primary);
@@ -247,7 +256,6 @@ input[type="checkbox"]:checked + .cbx span:first-child {
     }
     :host([validationactive]:invalid) .cbx span:first-child {
       border-color: var(--sky-danger-primary);
     }
     :host([validationactive]:invalid) .cbx span:first-child svg.checkmark {
@@ -271,8 +279,8 @@ input[type="checkbox"]:checked + .cbx span:first-child {
     }
     .checkbox-wrapper.no-text {
-  gap: 0;
-}
+      gap: 0;
+    }
     @media (prefers-reduced-motion: reduce) {
       .cbx,

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

	@@ -1 +1 @@
1	- {"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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"}
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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"}

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

@@ -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://library.sky-ui.com/components/chip
+ * @documentation https://sky-ui.com/components/chip
  * @dependency sky-icon
  *
  * @slot - Default slot for the chip label or any other content.