@sky.ui/core 0.0.41 → 0.0.43

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

@@ -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
  *
@@ -65,6 +65,7 @@ export type SkyCheckboxValueClearedDetail = {
  * @property {string} prefixColor - The color for the prefix text. Default: `""`.
  * @property {string} suffixColor - The color for the suffix text. Default: `""`.
  * @property {boolean} defaultChecked - Default checked state for reset operations. Default: `false`.
+ * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `""`.
  * @method check Sets checked state to `true`.
  * @method uncheck Sets checked state to `false`.
  * @method toggle Toggles checked state.
@@ -120,14 +121,16 @@ export declare class SkyCheckbox extends FormControlBase {
     set checked(v: boolean);
     get indeterminate(): boolean;
     set indeterminate(v: boolean);
-    static styles: import("lit").CSSResult;
+    /** Named prop preset from nearest `sky-config-provider`. */
+    preset: string;
+    private _presets;
+    static styles: import("lit").CSSResult[];
     protected getFormValue(): FormState;
     protected setValueFromFormState(state: FormState): void;
     protected getValidityAnchor(): HTMLElement | undefined;
     protected isEmpty(): boolean;
     protected getNativeControl(): HTMLElement | null;
     protected onFormReset(): void;
-    willUpdate(changed: Map<string | number | symbol, unknown>): void;
     updated(changed: Map<string, unknown>): void;
     private handleChange;
     private validateInput;

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

@@ -1,4 +1,4 @@
-import{LitElement as e,unsafeCSS as t,css as i,nothing as s,html as r}from"lit";import{property as o,state as a,customElement as n}from"lit/decorators.js";import{when as c}from"lit/directives/when.js";import{classMap as h}from"lit/directives/class-map.js";import{styleMap as l}from"lit/directives/style-map.js";import{resolveColor as d}from"../helper/utils/color-resolver.js";import{cssOnFillEnhance as p}from"../helper/utils/contrast-color.js";import{FormControlBase as u}from"../helper/internals/form-control-base.js";var v=Object.defineProperty,y=Object.getOwnPropertyDescriptor,k=(e,t,i,s)=>{for(var r,o=s>1?void 0:s?y(t,i):t,a=e.length-1;a>=0;a--)(r=e[a])&&(o=(s?r(t,i,o):r(o))||o);return s&&o&&v(t,i,o),o};let m=class extends u{constructor(){super(...arguments),this.label="",this.id="",this.value="",this.color="primary",this.defaultChecked=!1,this.showErrors=!1,this.prefix="",this.suffix="",this.prefixColor="",this.suffixColor="",this.validationActive=!1,this.invalid=!1,this._checked=!1,this._indeterminate=!1,this.validationErrors=[],this._hasMeaningfulSlot=!1,this._inputId=`sky-cb-${Math.random().toString(36).slice(2)}`,this._onSlotChange=e=>{const t=e.target,i=this._slotHasMeaningfulContent(t);i!==this._hasMeaningfulSlot&&(this._hasMeaningfulSlot=i)},this.handleBlur=e=>{this.validationActive=!0,this.validateInput();const t=this.shadowRoot?.querySelector(".cbx");t?.classList.remove("active"),this.syncValidity()},this._onKeyDown=e=>{this.disabled||this.readonly||" "!==e.key&&"Enter"!==e.key||(e.preventDefault(),this._inputElement?.click())}}get checked(){return this._checked}set checked(e){const t=this._checked;this._checked=e,e&&this.indeterminate&&(this.indeterminate=!1,this._inputElement&&(this._inputElement.indeterminate=!1)),this.requestUpdate("checked",t),this._inputElement&&(this._inputElement.checked=e,this._inputElement.indeterminate=this.indeterminate),this._updateVisualState(),this.syncFormValue(),this.syncValidity()}get indeterminate(){return this._indeterminate}set indeterminate(e){const t=this._indeterminate;this._indeterminate=e,e&&this.checked&&(this.checked=!1),this.requestUpdate("indeterminate",t),this._inputElement&&(this._inputElement.indeterminate=e),this._updateVisualState(),this.syncValidity()}getFormValue(){return this.name?this.disabled?null:this.checked?this.value&&""!==this.value.trim()?this.value:"on":null:null}setValueFromFormState(e){if(null===e)return this.checked=!1,void(this.indeterminate=!1);"string"==typeof e&&(this.value&&""!==this.value.trim()?this.checked=e===this.value:this.checked="on"===e||"true"===e||"1"===e,this.indeterminate=!1)}getValidityAnchor(){return this.shadowRoot?.querySelector('input[type="checkbox"]')??void 0}isEmpty(){return!this.checked}getNativeControl(){return this.shadowRoot?.querySelector('input[type="checkbox"]')}onFormReset(){this.checked=this.defaultChecked,this.indeterminate=!1,this.validationErrors=[],this.invalid=!1,this.validationActive=!1}willUpdate(e){e.has("color")&&this.style.setProperty("--checkbox-color",d(this.color))}updated(e){super.updated(e),this._inputElement||(this._inputElement=this.shadowRoot?.querySelector('input[type="checkbox"]')),this._inputElement&&(this._inputElement.checked=this.checked,this._inputElement.indeterminate=this.indeterminate,this._inputElement.disabled=this.disabled||this.readonly),this._updateVisualState(),(e.has("checked")||e.has("name")||e.has("disabled")||e.has("readonly")||e.has("required")||e.has("value"))&&(this.syncFormValue(),this.syncValidity())}handleChange(e){const t=e.target;if(this.disabled||this.readonly)return this._inputElement&&(this._inputElement.checked=this.checked,this._inputElement.indeterminate=this.indeterminate),e.preventDefault(),void e.stopPropagation();this.checked=t.checked,this.validateInput();const i=this.value&&""!==this.value.trim()?this.checked?this.value:void 0:this.checked;this.dispatchEvent(new CustomEvent("value-changed",{detail:{checked:this.checked,value:i},bubbles:!0,composed:!0}))}validateInput(){if(!this.validationActive)return!0;this.validationErrors=[],this.required&&!this.checked&&(this.validationErrors=[this.requiredMessage]),this.dispatchEvent(new CustomEvent("validation-error",{detail:{errors:[...this.validationErrors]},bubbles:!0,composed:!0}));const e=this.shadowRoot?.querySelector(".cbx");this.validationErrors.length?e?.classList.add("invalid"):e?.classList.remove("invalid");const t=0===this.validationErrors.length;return this.invalid=!t,t}check(){this.disabled||this.readonly||(this.checked=!0,this.indeterminate=!1)}uncheck(){this.disabled||this.readonly||(this.checked=!1,this.indeterminate=!1)}toggle(){this.disabled||this.readonly||(this.checked=!this.checked,this.indeterminate=!1)}reset(){this.onFormReset(),this.syncFormValue(),this.syncValidity(),this.dispatchEvent(new CustomEvent("value-cleared",{detail:{value:this.value,checked:this.checked},bubbles:!0,composed:!0}))}_updateVisualState(){const e=this.shadowRoot?.querySelector(".cbx");e&&(this.checked?(e.classList.add("checked"),e.classList.remove("indeterminate")):this.indeterminate?(e.classList.add("indeterminate"),e.classList.remove("checked")):e.classList.remove("checked","indeterminate"))}_slotHasMeaningfulContent(e){return e.assignedNodes({flatten:!0}).some(e=>e.nodeType===Node.ELEMENT_NODE||(e.textContent??"").trim().length>0)}get _hasTextContent(){return!!this.prefix||!!this.suffix||!!this.label||this._hasMeaningfulSlot}render(){const e=this._hasTextContent,t=h({"checkbox-wrapper":!0,"no-text":!e}),i=h({cbx:!0,checked:this.checked,indeterminate:this.indeterminate}),o=h({box:!0,"box--checked":this.checked,"box--indeterminate":this.indeterminate,"box--invalid":this.validationErrors.length>0}),a="box"+(this.checked?" box--checked":"")+(this.indeterminate?" box--indeterminate":"")+(this.validationErrors.length?" box--invalid":"");return r`
+import{LitElement as e,unsafeCSS as t,css as i,nothing as s,html as r}from"lit";import{property as o,state as a,customElement as n}from"lit/decorators.js";import{when as c}from"lit/directives/when.js";import{classMap as h}from"lit/directives/class-map.js";import{styleMap as l}from"lit/directives/style-map.js";import{resolveColor as d}from"../helper/utils/color-resolver.js";import{cssOnFillEnhance as p}from"../helper/utils/contrast-color.js";import{FormControlBase as u}from"../helper/internals/form-control-base.js";import{PresetController as v}from"../helper/controllers/preset-controller.js";import{skyFocusRingHostStyles as y}from"../helper/styles/focus-ring.js";var k=Object.defineProperty,m=Object.getOwnPropertyDescriptor,f=(e,t,i,s)=>{for(var r,o=s>1?void 0:s?m(t,i):t,a=e.length-1;a>=0;a--)(r=e[a])&&(o=(s?r(t,i,o):r(o))||o);return s&&o&&k(t,i,o),o};let b=class extends u{constructor(){super(...arguments),this.label="",this.id="",this.value="",this.color="primary",this.defaultChecked=!1,this.showErrors=!1,this.prefix="",this.suffix="",this.prefixColor="",this.suffixColor="",this.validationActive=!1,this.invalid=!1,this._checked=!1,this._indeterminate=!1,this.validationErrors=[],this._hasMeaningfulSlot=!1,this._inputId=`sky-cb-${Math.random().toString(36).slice(2)}`,this.preset="",this._presets=new v(this),this._onSlotChange=e=>{const t=e.target,i=this._slotHasMeaningfulContent(t);i!==this._hasMeaningfulSlot&&(this._hasMeaningfulSlot=i)},this.handleBlur=e=>{this.validationActive=!0,this.validateInput();const t=this.shadowRoot?.querySelector(".cbx");t?.classList.remove("active"),this.syncValidity()},this._onKeyDown=e=>{this.disabled||this.readonly||" "!==e.key&&"Enter"!==e.key||(e.preventDefault(),this._inputElement?.click())}}get checked(){return this._checked}set checked(e){const t=this._checked;this._checked=e,e&&this.indeterminate&&(this.indeterminate=!1,this._inputElement&&(this._inputElement.indeterminate=!1)),this.requestUpdate("checked",t),this._inputElement&&(this._inputElement.checked=e,this._inputElement.indeterminate=this.indeterminate),this._updateVisualState(),this.syncFormValue(),this.syncValidity()}get indeterminate(){return this._indeterminate}set indeterminate(e){const t=this._indeterminate;this._indeterminate=e,e&&this.checked&&(this.checked=!1),this.requestUpdate("indeterminate",t),this._inputElement&&(this._inputElement.indeterminate=e),this._updateVisualState(),this.syncValidity()}getFormValue(){return this.name?this.disabled?null:this.checked?this.value&&""!==this.value.trim()?this.value:"on":null:null}setValueFromFormState(e){if(null===e)return this.checked=!1,void(this.indeterminate=!1);"string"==typeof e&&(this.value&&""!==this.value.trim()?this.checked=e===this.value:this.checked="on"===e||"true"===e||"1"===e,this.indeterminate=!1)}getValidityAnchor(){return this.shadowRoot?.querySelector('input[type="checkbox"]')??void 0}isEmpty(){return!this.checked}getNativeControl(){return this.shadowRoot?.querySelector('input[type="checkbox"]')}onFormReset(){this.checked=this.defaultChecked,this.indeterminate=!1,this.validationErrors=[],this.invalid=!1,this.validationActive=!1}updated(e){super.updated(e),this.style.setProperty("--checkbox-color",d(this.color)),this._inputElement||(this._inputElement=this.shadowRoot?.querySelector('input[type="checkbox"]')),this._inputElement&&(this._inputElement.checked=this.checked,this._inputElement.indeterminate=this.indeterminate,this._inputElement.disabled=this.disabled||this.readonly),this._updateVisualState(),(e.has("checked")||e.has("name")||e.has("disabled")||e.has("readonly")||e.has("required")||e.has("value"))&&(this.syncFormValue(),this.syncValidity())}handleChange(e){const t=e.target;if(this.disabled||this.readonly)return this._inputElement&&(this._inputElement.checked=this.checked,this._inputElement.indeterminate=this.indeterminate),e.preventDefault(),void e.stopPropagation();this.checked=t.checked,this.validateInput();const i=this.value&&""!==this.value.trim()?this.checked?this.value:void 0:this.checked;this.dispatchEvent(new CustomEvent("value-changed",{detail:{checked:this.checked,value:i},bubbles:!0,composed:!0}))}validateInput(){if(!this.validationActive)return!0;this.validationErrors=[],this.required&&!this.checked&&(this.validationErrors=[this.requiredMessage]),this.dispatchEvent(new CustomEvent("validation-error",{detail:{errors:[...this.validationErrors]},bubbles:!0,composed:!0}));const e=this.shadowRoot?.querySelector(".cbx");this.validationErrors.length?e?.classList.add("invalid"):e?.classList.remove("invalid");const t=0===this.validationErrors.length;return this.invalid=!t,t}check(){this.disabled||this.readonly||(this.checked=!0,this.indeterminate=!1)}uncheck(){this.disabled||this.readonly||(this.checked=!1,this.indeterminate=!1)}toggle(){this.disabled||this.readonly||(this.checked=!this.checked,this.indeterminate=!1)}reset(){this.onFormReset(),this.syncFormValue(),this.syncValidity(),this.dispatchEvent(new CustomEvent("value-cleared",{detail:{value:this.value,checked:this.checked},bubbles:!0,composed:!0}))}_updateVisualState(){const e=this.shadowRoot?.querySelector(".cbx");e&&(this.checked?(e.classList.add("checked"),e.classList.remove("indeterminate")):this.indeterminate?(e.classList.add("indeterminate"),e.classList.remove("checked")):e.classList.remove("checked","indeterminate"))}_slotHasMeaningfulContent(e){return e.assignedNodes({flatten:!0}).some(e=>e.nodeType===Node.ELEMENT_NODE||(e.textContent??"").trim().length>0)}get _hasTextContent(){return!!this.prefix||!!this.suffix||!!this.label||this._hasMeaningfulSlot}render(){const e=this._hasTextContent,t=h({"checkbox-wrapper":!0,"no-text":!e}),i=h({cbx:!0,checked:this.checked,indeterminate:this.indeterminate}),o=h({box:!0,"box--checked":this.checked,"box--indeterminate":this.indeterminate,"box--invalid":this.validationErrors.length>0}),a="box"+(this.checked?" box--checked":"")+(this.indeterminate?" box--indeterminate":"")+(this.validationErrors.length?" box--invalid":"");return r`
       <div class=${t} part="wrapper">
         <input
           type="checkbox"
@@ -39,22 +39,25 @@ import{LitElement as e,unsafeCSS as t,css as i,nothing as s,html as r}from"lit";
       ${c(this.showErrors&&this.validationErrors.length>0&&this.validationActive,()=>r`<div class="error-message" part="error-message">
           ${this.validationErrors[0]}
         </div>`)}
-    `}};m.shadowRootOptions={...e.shadowRootOptions,delegatesFocus:!0},m.styles=i`
+    `}};b.shadowRootOptions={...e.shadowRootOptions,delegatesFocus:!0},b.styles=[y,i`
     :host {
       display: block;
       position: relative;
       font-family: var(--sky-font);
+      /* Tint focus ring with the control color (not global active-primary). */
+      --sky-focus-ring-color: var(--checkbox-color, var(--sky-active-primary));
     }
 
-: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, var(--sky-active-primary)) !important;
+    }
 
     .checkbox-wrapper {
       position: relative;
@@ -101,7 +104,8 @@ import{LitElement as e,unsafeCSS as t,css as i,nothing as s,html as r}from"lit";
       justify-content: center;
       transform: translateZ(0);
       contain: layout;
-      overflow: hidden;
+      /* visible so --sky-focus-ring (outer box-shadow) is not clipped */
+      overflow: visible;
       transition: background-color 0.2s ease, border-color 0.2s ease,
         box-shadow 0.2s ease;
     }
@@ -131,6 +135,12 @@ import{LitElement as e,unsafeCSS as t,css as i,nothing as s,html as r}from"lit";
       transition: box-shadow 0.2s ease;
     }
 
+    /* Keep focus ring above hover shadow when both apply */
+    :host(:focus-within) input[type="checkbox"]:checked + .cbx:hover span:first-child,
+    :host(:focus) input[type="checkbox"]:checked + .cbx:hover span:first-child {
+      box-shadow: var(--sky-focus-ring);
+    }
+
     .cbx span:first-child:before {
       content: "";
       inset: 0;
@@ -147,29 +157,26 @@ import{LitElement as e,unsafeCSS as t,css as i,nothing as s,html as r}from"lit";
       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 {
-      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));
-
-  transform: none; /* Ensure no transform applied */
-}
+    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;
+    }
 
     input[type="checkbox"]:checked + .cbx span:first-child svg.checkmark {
       stroke-dashoffset: 0;
@@ -189,15 +196,15 @@ input[type="checkbox"]:checked + .cbx span:first-child {
     }
 
     .cbx.checked span:first-child {
-  background: var(--checkbox-color, var(--sky-active-primary));
-  border-color: var(--checkbox-color, var(--sky-active-primary));
+      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;
-}
+    .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;
@@ -271,8 +278,8 @@ input[type="checkbox"]:checked + .cbx span:first-child {
     }
 
     .checkbox-wrapper.no-text {
-  gap: 0;
-}
+      gap: 0;
+    }
 
     @media (prefers-reduced-motion: reduce) {
       .cbx,
@@ -285,5 +292,5 @@ input[type="checkbox"]:checked + .cbx span:first-child {
     }
 
     ${t(p([{selector:'input[type="checkbox"]:checked + .cbx span:first-child svg, .cbx.checked span:first-child svg',fillVar:"var(--checkbox-color, var(--sky-active-primary))",property:"stroke"},{selector:".indeterminate-line, .indeterminate .indeterminate-line",fillVar:"var(--checkbox-color, var(--sky-active-primary))",property:"background-color"}]))}
-  `,k([o({type:String})],m.prototype,"label",2),k([o({type:String})],m.prototype,"id",2),k([o({type:String})],m.prototype,"value",2),k([o({type:String})],m.prototype,"color",2),k([o({type:Boolean})],m.prototype,"defaultChecked",2),k([o({type:Boolean})],m.prototype,"showErrors",2),k([o({type:String})],m.prototype,"prefix",2),k([o({type:String})],m.prototype,"suffix",2),k([o({type:String})],m.prototype,"prefixColor",2),k([o({type:String})],m.prototype,"suffixColor",2),k([o({type:Boolean,reflect:!0})],m.prototype,"validationActive",2),k([o({type:Boolean,reflect:!0})],m.prototype,"invalid",2),k([a()],m.prototype,"_checked",2),k([a()],m.prototype,"_indeterminate",2),k([a()],m.prototype,"validationErrors",2),k([a()],m.prototype,"_hasMeaningfulSlot",2),k([o({type:Boolean,reflect:!0})],m.prototype,"checked",1),k([o({type:Boolean,reflect:!0})],m.prototype,"indeterminate",1),m=k([n("sky-checkbox")],m);export{m as SkyCheckbox};
+  `],f([o({type:String})],b.prototype,"label",2),f([o({type:String})],b.prototype,"id",2),f([o({type:String})],b.prototype,"value",2),f([o({type:String})],b.prototype,"color",2),f([o({type:Boolean})],b.prototype,"defaultChecked",2),f([o({type:Boolean})],b.prototype,"showErrors",2),f([o({type:String})],b.prototype,"prefix",2),f([o({type:String})],b.prototype,"suffix",2),f([o({type:String})],b.prototype,"prefixColor",2),f([o({type:String})],b.prototype,"suffixColor",2),f([o({type:Boolean,reflect:!0})],b.prototype,"validationActive",2),f([o({type:Boolean,reflect:!0})],b.prototype,"invalid",2),f([a()],b.prototype,"_checked",2),f([a()],b.prototype,"_indeterminate",2),f([a()],b.prototype,"validationErrors",2),f([a()],b.prototype,"_hasMeaningfulSlot",2),f([o({type:Boolean,reflect:!0})],b.prototype,"checked",1),f([o({type:Boolean,reflect:!0})],b.prototype,"indeterminate",1),f([o({type:String,reflect:!0})],b.prototype,"preset",2),b=f([n("sky-checkbox")],b);export{b as SkyCheckbox};
 //# sourceMappingURL=sky-checkbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sky-checkbox.js","sources":["../../src/sky-checkbox/sky-checkbox.ts"],"sourcesContent":["import { LitElement, html, css, nothing, unsafeCSS } from \"lit\";\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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"}
+{"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\nimport { PresetController } from \"../helper/controllers/preset-controller\";\r\nimport { skyFocusRingHostStyles } from \"../helper/styles/focus-ring\";\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://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 * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.\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\r\n  /** Named prop preset from nearest `sky-config-provider`. */\r\n  @property({ type: String, reflect: true }) preset = \"\";\r\n\r\n  private _presets = new PresetController(this);\r\n\r\n  static override styles = [\r\n    skyFocusRingHostStyles,\r\n    css`\r\n    :host {\r\n      display: block;\r\n      position: relative;\r\n      font-family: var(--sky-font);\r\n      /* Tint focus ring with the control color (not global active-primary). */\r\n      --sky-focus-ring-color: var(--checkbox-color, var(--sky-active-primary));\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,\r\n    :host(:focus) .cbx span:first-child {\r\n      box-shadow: var(--sky-focus-ring);\r\n      border-color: var(--checkbox-color, var(--sky-active-primary)) !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      /* visible so --sky-focus-ring (outer box-shadow) is not clipped */\r\n      overflow: visible;\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    /* Keep focus ring above hover shadow when both apply */\r\n    :host(:focus-within) input[type=\"checkbox\"]:checked + .cbx:hover span:first-child,\r\n    :host(:focus) input[type=\"checkbox\"]:checked + .cbx:hover span:first-child {\r\n      box-shadow: var(--sky-focus-ring);\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\n    input[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    input[type=\"checkbox\"]:focus-visible + .cbx span:first-child,\r\n    input[type=\"checkbox\"]:focus + .cbx span:first-child {\r\n      outline: none;\r\n    }\r\n\r\n    input[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      transform: none;\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\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 updated(changed: Map<string, unknown>): void {\r\n    super.updated(changed);\r\n\r\n    // After PresetController hostUpdate — color may come from presets.\r\n    this.style.setProperty(\"--checkbox-color\", resolveColor(this.color));\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    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","preset","_presets","PresetController","_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","updated","changed","style","setProperty","resolveColor","has","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","skyFocusRingHostStyles","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

@@ -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.
@@ -34,6 +34,7 @@ export type SkyChipRemovedEventDetail = {
  * @property {boolean} loading - Whether the chip is in a loading state. Default: `false`.
  * @property {boolean} disabled - Whether the chip is disabled. Default: `false`.
  * @property {SkyChipVariant} variant - Visual style variant. Default: `"flat"`.
+ * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `""`.
  * @method removeChip Dispatches `chip-removed` and removes the chip from the DOM.
  *
  * @fires {CustomEvent<SkyChipRemovedEventDetail>} chip-removed - Fired when the chip is removed by user action.
@@ -74,7 +75,10 @@ export declare class SkyChip extends LitElement {
     loading: boolean;
     disabled: boolean;
     variant: SkyChipVariant;
-    static styles: import("lit").CSSResult;
+    /** Named prop preset from nearest `sky-config-provider`. */
+    preset: string;
+    private _presets;
+    static styles: import("lit").CSSResult[];
     /** Updates host CSS variables from current color token/value. */
     protected updated(): void;
     /** Size resolver similar to button: controls padding + font-size */

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

@@ -1,20 +1,20 @@
-import{unsafeCSS as o,css as t,LitElement as e,nothing as i,html as r}from"lit";import{property as s,customElement as n}from"lit/decorators.js";import{when as a}from"lit/directives/when.js";import{styleMap as l}from"lit/directives/style-map.js";import{classMap as c}from"lit/directives/class-map.js";import{resolveColor as p,resolveTextColorForToken as h,isDefaultColorToken as d,resolveInkColorForToken as y,resolveAccentColorForToken as f}from"../helper/utils/color-resolver.js";import{cssOnFillEnhance as u}from"../helper/utils/contrast-color.js";import{resolveRadius as g}from"../helper/utils/size-resolver.js";import{SkyIcon as v}from"../sky-icon/sky-icon.js";var b=Object.defineProperty,m=Object.getOwnPropertyDescriptor,x=(o,t,e,i)=>{for(var r,s=i>1?void 0:i?m(t,e):t,n=o.length-1;n>=0;n--)(r=o[n])&&(s=(i?r(t,e,s):r(s))||s);return i&&s&&b(t,e,s),s};let k=class extends e{constructor(){super(...arguments),this.label="",this.removable=!1,this.color="primary",this.radius="full",this.size="md",this.iconL=null,this.iconR=null,this.loading=!1,this.disabled=!1,this.variant="flat",this._onSlotChange=()=>{this.requestUpdate()}}updated(){const o=p(this.color),t=h(this.color);this.style.setProperty("--chip-bg-color",o),this.style.setProperty("--chip-text-color",t),d(this.color)?(this.style.setProperty("--chip-ink-color",y(this.color)),this.style.setProperty("--chip-accent-color",f(this.color)),this.style.setProperty("--chip-fill-color","var(--sky-hover-tertiary)")):(this.style.removeProperty("--chip-ink-color"),this.style.removeProperty("--chip-accent-color"),this.style.removeProperty("--chip-fill-color"))}_resolveSize(o){const t={xs:{padding:"2px 4px",fontSize:"11px"},sm:{padding:"3px 6px",fontSize:"12px"},md:{padding:"4px 8px",fontSize:"13px"},lg:{padding:"5px 10px",fontSize:"14px"},xl:{padding:"6px 12px",fontSize:"15px"}};if(t[o])return t[o];const e=String(o).trim().match(/^([\d.]+)(px|rem|em)?$/i),i=e?.[2]||"px",r=e?parseFloat(e[1]):13,s=`${r}${i}`,n=(o,t,e)=>Math.max(t,Math.min(e,o)),a=n(.4*r,2,10),l=n(.8*r,6,16),c=o=>`${Math.round(100*o)/100}${i}`;return{padding:`${c(a)} ${c(l)}`,fontSize:s}}removeChip(){const o=new CustomEvent("chip-removed",{detail:{label:this.label},bubbles:!0,composed:!0});this.dispatchEvent(o),this.remove()}_slotHasMeaningfulContent(o){return o.assignedNodes({flatten:!0}).some(o=>o.nodeType===Node.ELEMENT_NODE||(o.textContent??"").trim().length>0)}_hasPrefixSlotContent(){if(this.querySelector('[slot="prefix"]'))return!0;const o=this.shadowRoot?.querySelector('slot[name="prefix"]');return!!o&&this._slotHasMeaningfulContent(o)}_hasSuffixSlotContent(){if(this.querySelector('[slot="suffix"]'))return!0;const o=this.shadowRoot?.querySelector('slot[name="suffix"]');return!!o&&this._slotHasMeaningfulContent(o)}_hasDefaultSlotContent(){for(const o of Array.from(this.childNodes)){if(o.nodeType===Node.ELEMENT_NODE){const t=o.getAttribute("slot");if("prefix"===t||"suffix"===t)continue;return!0}if((o.textContent??"").trim().length>0)return!0}const o=this.shadowRoot?.querySelector("slot:not([name])");return!!o&&this._slotHasMeaningfulContent(o)}render(){const o=this._resolveSize(this.size),t={padding:o.padding,borderRadius:g(this.radius),fontSize:o.fontSize};return r`
+import{unsafeCSS as o,css as t,LitElement as e,nothing as r,html as i}from"lit";import{property as s,customElement as n}from"lit/decorators.js";import{when as a}from"lit/directives/when.js";import{styleMap as l}from"lit/directives/style-map.js";import{classMap as c}from"lit/directives/class-map.js";import{resolveColor as p,isDefaultColorToken as h,resolveInkColorForToken as d,resolveAccentColorForToken as y}from"../helper/utils/color-resolver.js";import{cssOnFillEnhance as f,ON_COLOR_FALLBACK_LIGHT as u}from"../helper/utils/contrast-color.js";import{resolveRadius as g}from"../helper/utils/size-resolver.js";import{PresetController as v}from"../helper/controllers/preset-controller.js";import{SkyIcon as b}from"../sky-icon/sky-icon.js";import{skyFocusRingHostStyles as m}from"../helper/styles/focus-ring.js";var x=Object.defineProperty,k=Object.getOwnPropertyDescriptor,S=(o,t,e,r)=>{for(var i,s=r>1?void 0:r?k(t,e):t,n=o.length-1;n>=0;n--)(i=o[n])&&(s=(r?i(t,e,s):i(s))||s);return r&&s&&x(t,e,s),s};let w=class extends e{constructor(){super(...arguments),this.label="",this.removable=!1,this.color="primary",this.radius="full",this.size="md",this.iconL=null,this.iconR=null,this.loading=!1,this.disabled=!1,this.variant="flat",this.preset="",this._presets=new v(this),this._onSlotChange=()=>{this.requestUpdate()}}updated(){const o=p(this.color),t=h(this.color)?"var(--sky-text-primary)":u;this.style.setProperty("--chip-bg-color",o),this.style.setProperty("--chip-text-color",t),h(this.color)?(this.style.setProperty("--chip-ink-color",d(this.color)),this.style.setProperty("--chip-accent-color",y(this.color)),this.style.setProperty("--chip-fill-color","var(--sky-hover-tertiary)")):(this.style.removeProperty("--chip-ink-color"),this.style.removeProperty("--chip-accent-color"),this.style.removeProperty("--chip-fill-color"))}_resolveSize(o){const t={xs:{padding:"2px 4px",fontSize:"11px"},sm:{padding:"3px 6px",fontSize:"12px"},md:{padding:"4px 8px",fontSize:"13px"},lg:{padding:"5px 10px",fontSize:"14px"},xl:{padding:"6px 12px",fontSize:"15px"}};if(t[o])return t[o];const e=String(o).trim().match(/^([\d.]+)(px|rem|em)?$/i),r=e?.[2]||"px",i=e?parseFloat(e[1]):13,s=`${i}${r}`,n=(o,t,e)=>Math.max(t,Math.min(e,o)),a=n(.4*i,2,10),l=n(.8*i,6,16),c=o=>`${Math.round(100*o)/100}${r}`;return{padding:`${c(a)} ${c(l)}`,fontSize:s}}removeChip(){const o=new CustomEvent("chip-removed",{detail:{label:this.label},bubbles:!0,composed:!0});this.dispatchEvent(o),this.remove()}_slotHasMeaningfulContent(o){return o.assignedNodes({flatten:!0}).some(o=>o.nodeType===Node.ELEMENT_NODE||(o.textContent??"").trim().length>0)}_hasPrefixSlotContent(){if(this.querySelector('[slot="prefix"]'))return!0;const o=this.shadowRoot?.querySelector('slot[name="prefix"]');return!!o&&this._slotHasMeaningfulContent(o)}_hasSuffixSlotContent(){if(this.querySelector('[slot="suffix"]'))return!0;const o=this.shadowRoot?.querySelector('slot[name="suffix"]');return!!o&&this._slotHasMeaningfulContent(o)}_hasDefaultSlotContent(){for(const o of Array.from(this.childNodes)){if(o.nodeType===Node.ELEMENT_NODE){const t=o.getAttribute("slot");if("prefix"===t||"suffix"===t)continue;return!0}if((o.textContent??"").trim().length>0)return!0}const o=this.shadowRoot?.querySelector("slot:not([name])");return!!o&&this._slotHasMeaningfulContent(o)}render(){const o=this._resolveSize(this.size),t={padding:o.padding,borderRadius:g(this.radius),fontSize:o.fontSize};return i`
       <div
         class=${c({chip:!0,[this.variant]:!0,loading:this.loading})}
         style=${l(t)}
         part="chip"
       >
         <slot name="prefix" @slotchange=${this._onSlotChange}></slot>
-        ${a(!this._hasPrefixSlotContent()&&this.iconL,()=>r`
+        ${a(!this._hasPrefixSlotContent()&&this.iconL,()=>i`
           <sky-icon class="icon" part="icon" icon="${this.iconL}"></sky-icon>
         `)}
         <slot @slotchange=${this._onSlotChange}></slot>
-        ${this._hasDefaultSlotContent()?i:this.label}
+        ${this._hasDefaultSlotContent()?r:this.label}
         <slot name="suffix" @slotchange=${this._onSlotChange}></slot>
-        ${a(!this._hasSuffixSlotContent()&&this.iconR,()=>r`
+        ${a(!this._hasSuffixSlotContent()&&this.iconR,()=>i`
           <sky-icon class="icon icon-right" part="icon" icon="${this.iconR}"></sky-icon>
         `)}
-        ${a(this.removable,()=>r`
+        ${a(this.removable,()=>i`
           <button
             class="close-button"
             part="close-button"
@@ -25,17 +25,18 @@ import{unsafeCSS as o,css as t,LitElement as e,nothing as i,html as r}from"lit";
             <sky-icon icon="ion:close"></sky-icon>
           </button>
         `)}
-        ${a(this.loading,()=>r`
+        ${a(this.loading,()=>i`
           <div class="loading-overlay" part="loading-overlay">
             <div class="loading-spinner" part="loading-spinner"></div>
           </div>
         `)}
       </div>
-    `}};k.dependencies={"sky-icon":v},k.styles=t`
+    `}};w.dependencies={"sky-icon":b},w.styles=[m,t`
     :host {
       display: inline-block;
       font-family: var(--sky-font);
       z-index: 1;
+      --sky-focus-ring-color: var(--chip-bg-color, var(--sky-active-primary));
     }
 
     :host([disabled]) {
@@ -226,6 +227,6 @@ import{unsafeCSS as o,css as t,LitElement as e,nothing as i,html as r}from"lit";
     }
 
     /* Solid / shadow chips: enhance label + icon FG against fill. */
-    ${o(u([{selector:".chip.solid, .chip.shadow",fillVar:"--chip-bg-color"},{selector:".chip.solid .icon, .chip.shadow .icon",fillVar:"--chip-bg-color"}]))}
-  `,x([s({type:String})],k.prototype,"label",2),x([s({type:Boolean})],k.prototype,"removable",2),x([s({type:String})],k.prototype,"color",2),x([s({type:String})],k.prototype,"radius",2),x([s({type:String})],k.prototype,"size",2),x([s({type:String})],k.prototype,"iconL",2),x([s({type:String})],k.prototype,"iconR",2),x([s({type:Boolean})],k.prototype,"loading",2),x([s({type:Boolean,reflect:!0})],k.prototype,"disabled",2),x([s({type:String,reflect:!0})],k.prototype,"variant",2),k=x([n("sky-chip")],k);export{k as SkyChip};
+    ${o(f([{selector:".chip.solid, .chip.shadow",fillVar:"--chip-bg-color"},{selector:".chip.solid .icon, .chip.shadow .icon",fillVar:"--chip-bg-color"}]))}
+  `],S([s({type:String})],w.prototype,"label",2),S([s({type:Boolean})],w.prototype,"removable",2),S([s({type:String})],w.prototype,"color",2),S([s({type:String})],w.prototype,"radius",2),S([s({type:String})],w.prototype,"size",2),S([s({type:String})],w.prototype,"iconL",2),S([s({type:String})],w.prototype,"iconR",2),S([s({type:Boolean})],w.prototype,"loading",2),S([s({type:Boolean,reflect:!0})],w.prototype,"disabled",2),S([s({type:String,reflect:!0})],w.prototype,"variant",2),S([s({type:String,reflect:!0})],w.prototype,"preset",2),w=S([n("sky-chip")],w);export{w as SkyChip};
 //# sourceMappingURL=sky-chip.js.map