@warp-ds/elements 2.10.0-next.15 → 2.10.0-next.18

package/dist/packages/checkbox/checkbox.js

@@ -1,276 +1,276 @@
 var he=Object.defineProperty;var pe=Object.getOwnPropertyDescriptor;var ee=t=>{throw TypeError(t)};var u=(t,r,e,a)=>{for(var l=a>1?void 0:a?pe(r,e):r,g=t.length-1,x;g>=0;g--)(x=t[g])&&(l=(a?x(r,e,l):x(l))||l);return a&&l&&he(r,e,l),l};var D=(t,r,e)=>r.has(t)||ee("Cannot "+e);var k=(t,r,e)=>(D(t,r,"read from private field"),e?e.call(t):r.get(t)),y=(t,r,e)=>r.has(t)?ee("Cannot add the same private member more than once"):r instanceof WeakSet?r.add(t):r.set(t,e),I=(t,r,e,a)=>(D(t,r,"write to private field"),a?a.call(t,e):r.set(t,e),e),b=(t,r,e)=>(D(t,r,"access private method"),e);var n=function(t,r,e,a){if(e==="a"&&!a)throw new TypeError("Private accessor was defined without a getter");if(typeof r=="function"?t!==r||!a:!r.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return e==="m"?a:e==="a"?a.call(t):a?a.value:r.get(t)},c=function(t,r,e,a,l){if(a==="m")throw new TypeError("Private method is not writable");if(a==="a"&&!l)throw new TypeError("Private accessor was defined without a setter");if(typeof r=="function"?t!==r||!l:!r.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return a==="a"?l.call(t,e):l?l.value=e:r.set(t,e),e};function re(t){var r,e,a,l,g,x,z,ce,M,N,R,B,X,E,Z,f,U,O,W;class be extends t{constructor(...o){var i,d,h;super(...o),r.add(this),this.internals=this.attachInternals(),e.set(this,!1),a.set(this,!1),l.set(this,!1),g.set(this,void 0),x.set(this,void 0),z.set(this,!0),M.set(this,""),N.set(this,()=>{c(this,l,!0,"f"),c(this,e,!0,"f"),n(this,r,"m",f).call(this)}),R.set(this,()=>{c(this,e,!1,"f"),n(this,r,"m",U).call(this,this.shouldFormValueUpdate()?n(this,M,"f"):""),!this.validity.valid&&n(this,l,"f")&&c(this,a,!0,"f");let m=n(this,r,"m",f).call(this);this.validationMessageCallback&&this.validationMessageCallback(m?this.internals.validationMessage:"")}),B.set(this,()=>{var m;n(this,z,"f")&&this.validationTarget&&(this.internals.setValidity(this.validity,this.validationMessage,this.validationTarget),c(this,z,!1,"f")),c(this,l,!0,"f"),c(this,a,!0,"f"),n(this,r,"m",f).call(this),(m=this===null||this===void 0?void 0:this.validationMessageCallback)===null||m===void 0||m.call(this,this.showError?this.internals.validationMessage:"")}),X.set(this,void 0),E.set(this,!1),Z.set(this,Promise.resolve()),(i=this.addEventListener)===null||i===void 0||i.call(this,"focus",n(this,N,"f")),(d=this.addEventListener)===null||d===void 0||d.call(this,"blur",n(this,R,"f")),(h=this.addEventListener)===null||h===void 0||h.call(this,"invalid",n(this,B,"f")),this.setValue(null)}static get formAssociated(){return!0}static get validators(){return this.formControlValidators||[]}static get observedAttributes(){let o=this.validators.map(h=>h.attribute).flat(),i=super.observedAttributes||[];return[...new Set([...i,...o])]}static getValidator(o){return this.validators.find(i=>i.attribute===o)||null}static getValidators(o){return this.validators.filter(i=>{var d;if(i.attribute===o||!((d=i.attribute)===null||d===void 0)&&d.includes(o))return!0})}get form(){return this.internals.form}get showError(){return n(this,r,"m",f).call(this)}checkValidity(){return this.internals.checkValidity()}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}attributeChangedCallback(o,i,d){var h;(h=super.attributeChangedCallback)===null||h===void 0||h.call(this,o,i,d);let S=this.constructor.getValidators(o);S?.length&&this.validationTarget&&this.setValue(n(this,M,"f"))}setValue(o){var i;c(this,a,!1,"f"),(i=this.validationMessageCallback)===null||i===void 0||i.call(this,""),c(this,M,o,"f");let h=this.shouldFormValueUpdate()?o:null;this.internals.setFormValue(h),n(this,r,"m",U).call(this,h),this.valueChangedCallback&&this.valueChangedCallback(h),n(this,r,"m",f).call(this)}shouldFormValueUpdate(){return!0}get validationComplete(){return new Promise(o=>o(n(this,Z,"f")))}formResetCallback(){var o,i;c(this,l,!1,"f"),c(this,a,!1,"f"),n(this,r,"m",f).call(this),(o=this.resetFormControl)===null||o===void 0||o.call(this),(i=this.validationMessageCallback)===null||i===void 0||i.call(this,n(this,r,"m",f).call(this)?this.validationMessage:"")}}return e=new WeakMap,a=new WeakMap,l=new WeakMap,g=new WeakMap,x=new WeakMap,z=new WeakMap,M=new WeakMap,N=new WeakMap,R=new WeakMap,B=new WeakMap,X=new WeakMap,E=new WeakMap,Z=new WeakMap,r=new WeakSet,ce=function(){let o=this.getRootNode(),i=`${this.localName}[name="${this.getAttribute("name")}"]`;return o.querySelectorAll(i)},f=function(){if(this.hasAttribute("disabled"))return!1;let o=n(this,a,"f")||n(this,l,"f")&&!this.validity.valid&&!n(this,e,"f");return o&&this.internals.states?this.internals.states.add("--show-error"):this.internals.states&&this.internals.states.delete("--show-error"),o},U=function(o){let i=this.constructor,d={},h=i.validators,m=[],S=h.some(v=>v.isValid instanceof Promise);n(this,E,"f")||(c(this,Z,new Promise(v=>{c(this,X,v,"f")}),"f"),c(this,E,!0,"f")),n(this,g,"f")&&(n(this,g,"f").abort(),c(this,x,n(this,g,"f"),"f"));let T=new AbortController;c(this,g,T,"f");let j,Q=!1;h.length&&(h.forEach(v=>{let G=v.key||"customError",C=v.isValid(this,o,T.signal);C instanceof Promise?(m.push(C),C.then(H=>{H!=null&&(d[G]=!H,j=n(this,r,"m",W).call(this,v,o),n(this,r,"m",O).call(this,d,j))})):(d[G]=!C,this.validity[G]!==!C&&(Q=!0),!C&&!j&&(j=n(this,r,"m",W).call(this,v,o)))}),Promise.allSettled(m).then(()=>{var v;T?.signal.aborted||(c(this,E,!1,"f"),(v=n(this,X,"f"))===null||v===void 0||v.call(this))}),(Q||!S)&&n(this,r,"m",O).call(this,d,j))},O=function(o,i){if(this.validationTarget)this.internals.setValidity(o,i,this.validationTarget),c(this,z,!1,"f");else{if(this.internals.setValidity(o,i),this.internals.validity.valid)return;c(this,z,!0,"f")}},W=function(o,i){if(this.validityCallback){let d=this.validityCallback(o.key||"customError");if(d)return d}return o.message instanceof Function?o.message(this,i):o.message},be}import{html as me,LitElement as ae}from"lit";import{property as w,query as we}from"lit/decorators.js";import{ifDefined as K}from"lit/directives/if-defined.js";import{live as ie}from"lit/directives/live.js";import{css as ve}from"lit";import{unsafeCSS as ue}from"lit";var oe=ve`
-  *,
-  :before,
-  :after {
-    box-sizing: border-box;
-    border-style: solid;
-    border-width: 0;
-    border-color: var(--w-s-color-border);
-  }
-  html {
-    font-size: 62.5%;
-  }
-  body {
-    background-color: var(--w-s-color-background);
-    min-height: 100%;
-    margin: 0;
-    overflow-y: scroll;
-  }
-  body,
-  :host {
-    -webkit-text-size-adjust: 100%;
-    tab-size: 4;
-    -webkit-tap-highlight-color: transparent;
-    font-family: var(--w-font-family);
-    font-size: var(--w-font-size-m);
-    line-height: var(--w-line-height-m);
-    color: var(--w-s-color-text);
-  }
-  hr {
-    color: inherit;
-    border-top-width: 1px;
-    height: 0;
-  }
-  abbr:where([title]) {
-    -webkit-text-decoration: underline dotted;
-    text-decoration: underline dotted;
-  }
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-size: inherit;
-    font-weight: 700;
-  }
-  a {
-    cursor: pointer;
-    color: var(--w-s-color-text-link);
-    text-decoration: none;
-  }
-  a:hover,
-  a:focus,
-  a:active {
-    text-decoration: underline;
-  }
-  a:focus-visible {
-    outline: 2px solid var(--w-s-color-border-focus);
-    outline-offset: 1px;
-  }
-  b,
-  strong {
-    font-weight: 700;
-  }
-  code,
-  kbd,
-  samp,
-  pre {
-    font-family:
-      ui-monospace,
-      SFMono-Regular,
-      Menlo,
-      Monaco,
-      Consolas,
-      Liberation Mono,
-      Courier New,
-      monospace;
-    font-size: 1em;
-  }
-  sub,
-  sup {
-    vertical-align: baseline;
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-  }
-  sub {
-    bottom: -0.25em;
-  }
-  sup {
-    top: -0.5em;
-  }
-  table {
-    text-indent: 0;
-    border-color: inherit;
-    border-collapse: collapse;
-  }
-  button,
-  input,
-  optgroup,
-  select,
-  textarea {
-    font-family: inherit;
-    font-size: 100%;
-    font-weight: inherit;
-    line-height: inherit;
-    color: inherit;
-    margin: 0;
-    padding: 0;
-  }
-  button,
-  select {
-    text-transform: none;
-  }
-  button,
-  [type='button'],
-  [type='reset'],
-  [type='submit'] {
-    -webkit-appearance: button;
-  }
-  :-moz-focusring {
-    outline: auto;
-  }
-  :-moz-ui-invalid {
-    box-shadow: none;
-  }
-  progress {
-    vertical-align: baseline;
-  }
-  ::-webkit-inner-spin-button {
-    height: auto;
-  }
-  ::-webkit-outer-spin-button {
-    height: auto;
-  }
-  [type='search'] {
-    -webkit-appearance: textfield;
-    outline-offset: -2px;
-  }
-  ::-webkit-search-decoration {
-    -webkit-appearance: none;
-  }
-  ::-webkit-file-upload-button {
-    -webkit-appearance: button;
-    font: inherit;
-  }
-  summary {
-    display: list-item;
-  }
-  blockquote,
-  dl,
-  dd,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  hr,
-  figure,
-  p,
-  pre {
-    margin: 0;
-  }
-  fieldset {
-    margin: 0;
-    padding: 0;
-  }
-  legend {
-    padding: 0;
-  }
-  ol,
-  ul,
-  menu {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-  textarea {
-    resize: vertical;
-  }
-  input::placeholder,
-  textarea::placeholder {
-    opacity: 1;
-    color: var(--w-s-color-text-placeholder);
-  }
-  button,
-  [role='button'] {
-    cursor: pointer;
-  }
-  :disabled {
-    cursor: default;
-  }
-  img,
-  svg,
-  video,
-  canvas,
-  audio,
-  iframe,
-  embed,
-  object {
-    vertical-align: middle;
-    display: block;
-  }
-  img,
-  video {
-    max-width: 100%;
-    height: auto;
-  }
-  h1 {
-    font-size: var(--w-font-size-xxl);
-    line-height: var(--w-line-height-xxl);
-  }
-  h2 {
-    font-size: var(--w-font-size-xl);
-    line-height: var(--w-line-height-xl);
-  }
-  h3 {
-    font-size: var(--w-font-size-l);
-    line-height: var(--w-line-height-l);
-  }
-  h4 {
-    font-size: var(--w-font-size-m);
-    line-height: var(--w-line-height-m);
-  }
-  h5 {
-    font-size: var(--w-font-size-s);
-    line-height: var(--w-line-height-s);
-  }
-  dt,
-  dd {
-    margin: 0 16px;
-  }
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  ul,
-  ol,
-  dl,
-  p,
-  blockquote {
-    margin: 0 0 8px;
-  }
-  [hidden] {
-    display: none !important;
-  }
-  [tabindex='-1']:focus:not(:focus-visible) {
-    outline: none;
-  }
-  legend {
-    float: left;
-    width: 100%;
-    margin: 0;
-    padding: 0;
-    display: table;
-  }
-  legend + * {
-    clear: both;
-  }
-  fieldset {
-    border: 0;
-    min-width: 0;
-    margin: 0;
-    padding: 0.01em 0 0;
-  }
-  body:not(:-moz-handler-blocked) fieldset {
-    display: table-cell;
-  }
-  svg {
-    pointer-events: none;
-  }
+	*,
+	:before,
+	:after {
+		box-sizing: border-box;
+		border-style: solid;
+		border-width: 0;
+		border-color: var(--w-s-color-border);
+	}
+	html {
+		font-size: 62.5%;
+	}
+	body {
+		background-color: var(--w-s-color-background);
+		min-height: 100%;
+		margin: 0;
+		overflow-y: scroll;
+	}
+	body,
+	:host {
+		-webkit-text-size-adjust: 100%;
+		tab-size: 4;
+		-webkit-tap-highlight-color: transparent;
+		font-family: var(--w-font-family);
+		font-size: var(--w-font-size-m);
+		line-height: var(--w-line-height-m);
+		color: var(--w-s-color-text);
+	}
+	hr {
+		color: inherit;
+		border-top-width: 1px;
+		height: 0;
+	}
+	abbr:where([title]) {
+		-webkit-text-decoration: underline dotted;
+		text-decoration: underline dotted;
+	}
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		font-size: inherit;
+		font-weight: 700;
+	}
+	a {
+		cursor: pointer;
+		color: var(--w-s-color-text-link);
+		text-decoration: none;
+	}
+	a:hover,
+	a:focus,
+	a:active {
+		text-decoration: underline;
+	}
+	a:focus-visible {
+		outline: 2px solid var(--w-s-color-border-focus);
+		outline-offset: 1px;
+	}
+	b,
+	strong {
+		font-weight: 700;
+	}
+	code,
+	kbd,
+	samp,
+	pre {
+		font-family:
+			ui-monospace,
+			SFMono-Regular,
+			Menlo,
+			Monaco,
+			Consolas,
+			Liberation Mono,
+			Courier New,
+			monospace;
+		font-size: 1em;
+	}
+	sub,
+	sup {
+		vertical-align: baseline;
+		font-size: 75%;
+		line-height: 0;
+		position: relative;
+	}
+	sub {
+		bottom: -0.25em;
+	}
+	sup {
+		top: -0.5em;
+	}
+	table {
+		text-indent: 0;
+		border-color: inherit;
+		border-collapse: collapse;
+	}
+	button,
+	input,
+	optgroup,
+	select,
+	textarea {
+		font-family: inherit;
+		font-size: 100%;
+		font-weight: inherit;
+		line-height: inherit;
+		color: inherit;
+		margin: 0;
+		padding: 0;
+	}
+	button,
+	select {
+		text-transform: none;
+	}
+	button,
+	[type="button"],
+	[type="reset"],
+	[type="submit"] {
+		-webkit-appearance: button;
+	}
+	:-moz-focusring {
+		outline: auto;
+	}
+	:-moz-ui-invalid {
+		box-shadow: none;
+	}
+	progress {
+		vertical-align: baseline;
+	}
+	::-webkit-inner-spin-button {
+		height: auto;
+	}
+	::-webkit-outer-spin-button {
+		height: auto;
+	}
+	[type="search"] {
+		-webkit-appearance: textfield;
+		outline-offset: -2px;
+	}
+	::-webkit-search-decoration {
+		-webkit-appearance: none;
+	}
+	::-webkit-file-upload-button {
+		-webkit-appearance: button;
+		font: inherit;
+	}
+	summary {
+		display: list-item;
+	}
+	blockquote,
+	dl,
+	dd,
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6,
+	hr,
+	figure,
+	p,
+	pre {
+		margin: 0;
+	}
+	fieldset {
+		margin: 0;
+		padding: 0;
+	}
+	legend {
+		padding: 0;
+	}
+	ol,
+	ul,
+	menu {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+	textarea {
+		resize: vertical;
+	}
+	input::placeholder,
+	textarea::placeholder {
+		opacity: 1;
+		color: var(--w-s-color-text-placeholder);
+	}
+	button,
+	[role="button"] {
+		cursor: pointer;
+	}
+	:disabled {
+		cursor: default;
+	}
+	img,
+	svg,
+	video,
+	canvas,
+	audio,
+	iframe,
+	embed,
+	object {
+		vertical-align: middle;
+		display: block;
+	}
+	img,
+	video {
+		max-width: 100%;
+		height: auto;
+	}
+	h1 {
+		font-size: var(--w-font-size-xxl);
+		line-height: var(--w-line-height-xxl);
+	}
+	h2 {
+		font-size: var(--w-font-size-xl);
+		line-height: var(--w-line-height-xl);
+	}
+	h3 {
+		font-size: var(--w-font-size-l);
+		line-height: var(--w-line-height-l);
+	}
+	h4 {
+		font-size: var(--w-font-size-m);
+		line-height: var(--w-line-height-m);
+	}
+	h5 {
+		font-size: var(--w-font-size-s);
+		line-height: var(--w-line-height-s);
+	}
+	dt,
+	dd {
+		margin: 0 16px;
+	}
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	ul,
+	ol,
+	dl,
+	p,
+	blockquote {
+		margin: 0 0 8px;
+	}
+	[hidden] {
+		display: none !important;
+	}
+	[tabindex="-1"]:focus:not(:focus-visible) {
+		outline: none;
+	}
+	legend {
+		float: left;
+		width: 100%;
+		margin: 0;
+		padding: 0;
+		display: table;
+	}
+	legend + * {
+		clear: both;
+	}
+	fieldset {
+		border: 0;
+		min-width: 0;
+		margin: 0;
+		padding: 0.01em 0 0;
+	}
+	body:not(:-moz-handler-blocked) fieldset {
+		display: table-cell;
+	}
+	svg {
+		pointer-events: none;
+	}
 `,ze=ue(`*, :before, :after {
             --w-rotate: 0;
             --w-rotate-x: 0;
@@ -2438,158 +2438,209 @@ var he=Object.defineProperty;var pe=Object.getOwnPropertyDescriptor;var ee=t=>{t
                 }
             }
         `);import{css as ge}from"lit";var te=ge`
-  :host {
-    --_label-font-size: var(--w-c-checkbox-label-font-size, var(--w-font-size-m));
-    --_label-line-height: var(--w-c-checkbox-label-line-height, var(--w-line-height-m));
-
-    --_control-size: var(--w-c-checkbox-control-size, 2rem);
-    --_gap: var(--w-c-checkbox-gap, 8px);
-    --_radius: var(--w-c-checkbox-radius, 4px);
-    --_border-width: var(--w-c-checkbox-border-width, 1px);
-
-    --_bg-default: var(--w-c-checkbox-bg, var(--w-s-color-background));
-    --_border-default: var(--w-c-checkbox-border-color, var(--w-s-color-border-strong));
-    --_icon-color: var(--w-c-checkbox-icon-color, var(--w-s-color-icon-inverted));
-
-    --_bg-checked: var(--w-c-checkbox-bg-checked, var(--w-s-color-background-primary));
-    --_border-checked: var(--w-c-checkbox-border-color-checked, var(--w-s-color-border-primary));
-    --_checked-icon: var(--w-c-checkbox-checked-icon, var(--w-icon-toggle-checked));
-
-    --_border-invalid: var(--w-c-checkbox-border-color-invalid, var(--w-s-color-border-negative));
-    --_bg-invalid-checked: var(--w-c-checkbox-bg-invalid-checked, var(--w-s-color-background-negative));
-
-    --_bg-disabled: var(--w-c-checkbox-bg-disabled, var(--w-s-color-background-disabled-subtle));
-    --_border-disabled: var(--w-c-checkbox-border-color-disabled, var(--w-s-color-border-disabled));
-    --_bg-disabled-checked: var(--w-c-checkbox-bg-disabled-checked, var(--w-s-color-background-disabled));
-
-    --_outline-width: var(--w-c-checkbox-outline-width, 2px);
-    --_outline-color: var(--w-c-checkbox-outline-color, var(--w-s-color-border-focus));
-    --_outline-offset: var(--w-c-checkbox-outline-offset, var(--w-outline-offset, 1px));
-
-    --_transition: var(--w-c-checkbox-transition, all 150ms cubic-bezier(0.4, 0, 0.2, 1));
-
-    --_bg: var(--_bg-default);
-    --_border-color: var(--_border-default);
-  }
-
-  :host([type='checkbox']) {
-    --_radius: var(--w-c-checkbox-radius, 4px);
-  }
-
-  :host([checked]),
-  :host([indeterminate]) {
-    --_bg: var(--_bg-checked);
-    --_border-color: var(--_border-checked);
-  }
-
-  :host([disabled]) {
-    --_bg: var(--_bg-disabled);
-    --_border-color: var(--_border-disabled);
-  }
-
-  :host([disabled][checked]),
-  :host([disabled][indeterminate]) {
-    --_bg: var(--_bg-disabled-checked);
-  }
-
-  [part~='label'] {
-    display: block;
-    font-size: var(--_label-font-size);
-    line-height: var(--_label-line-height);
-    user-select: none;
-    cursor: pointer;
-  }
-
-  [part='base'] {
-    display: grid;
-    grid-template-columns: var(--_control-size) max-content;
-    gap: var(--_gap);
-  }
-
-  [part='input'] {
-    position: absolute;
-    padding: 0;
-    margin: 0;
-    opacity: 0;
-    pointer-events: none;
-    inset: 0;
-  }
-
-  [part='control'] {
-    position: relative;
-    display: block;
-    height: var(--_control-size);
-    width: var(--_control-size);
-    flex-shrink: 0;
-
-    border-width: var(--_border-width);
-    border-style: solid;
-    border-color: var(--_border-color);
-    border-radius: var(--_radius);
-
-    background-color: var(--_bg);
-    color: var(--_icon-color);
-
-    cursor: pointer;
-    user-select: none;
-    appearance: none;
-    transition: var(--_transition);
-
-    font-weight: 700;
-    text-align: center;
-    line-height: var(--w-line-height-xs);
-    font-size: var(--w-font-size-m);
-  }
-
-  /* Invalid visuals are driven by the actual control state instead of host attributes.
+	:host {
+		--_label-font-size: var(
+			--w-c-checkbox-label-font-size,
+			var(--w-font-size-m)
+		);
+		--_label-line-height: var(
+			--w-c-checkbox-label-line-height,
+			var(--w-line-height-m)
+		);
+
+		--_control-size: var(--w-c-checkbox-control-size, 2rem);
+		--_gap: var(--w-c-checkbox-gap, 8px);
+		--_radius: var(--w-c-checkbox-radius, 4px);
+		--_border-width: var(--w-c-checkbox-border-width, 1px);
+
+		--_bg-default: var(--w-c-checkbox-bg, var(--w-s-color-background));
+		--_border-default: var(
+			--w-c-checkbox-border-color,
+			var(--w-s-color-border-strong)
+		);
+		--_icon-color: var(
+			--w-c-checkbox-icon-color,
+			var(--w-s-color-icon-inverted)
+		);
+
+		--_bg-checked: var(
+			--w-c-checkbox-bg-checked,
+			var(--w-s-color-background-primary)
+		);
+		--_border-checked: var(
+			--w-c-checkbox-border-color-checked,
+			var(--w-s-color-border-primary)
+		);
+		--_checked-icon: var(
+			--w-c-checkbox-checked-icon,
+			var(--w-icon-toggle-checked)
+		);
+
+		--_border-invalid: var(
+			--w-c-checkbox-border-color-invalid,
+			var(--w-s-color-border-negative)
+		);
+		--_bg-invalid-checked: var(
+			--w-c-checkbox-bg-invalid-checked,
+			var(--w-s-color-background-negative)
+		);
+
+		--_bg-disabled: var(
+			--w-c-checkbox-bg-disabled,
+			var(--w-s-color-background-disabled-subtle)
+		);
+		--_border-disabled: var(
+			--w-c-checkbox-border-color-disabled,
+			var(--w-s-color-border-disabled)
+		);
+		--_bg-disabled-checked: var(
+			--w-c-checkbox-bg-disabled-checked,
+			var(--w-s-color-background-disabled)
+		);
+
+		--_outline-width: var(--w-c-checkbox-outline-width, 2px);
+		--_outline-color: var(
+			--w-c-checkbox-outline-color,
+			var(--w-s-color-border-focus)
+		);
+		--_outline-offset: var(
+			--w-c-checkbox-outline-offset,
+			var(--w-outline-offset, 1px)
+		);
+
+		--_transition: var(
+			--w-c-checkbox-transition,
+			all 150ms cubic-bezier(0.4, 0, 0.2, 1)
+		);
+
+		--_bg: var(--_bg-default);
+		--_border-color: var(--_border-default);
+	}
+
+	:host([type="checkbox"]) {
+		--_radius: var(--w-c-checkbox-radius, 4px);
+	}
+
+	:host([checked]),
+	:host([indeterminate]) {
+		--_bg: var(--_bg-checked);
+		--_border-color: var(--_border-checked);
+	}
+
+	:host([disabled]) {
+		--_bg: var(--_bg-disabled);
+		--_border-color: var(--_border-disabled);
+	}
+
+	:host([disabled][checked]),
+	:host([disabled][indeterminate]) {
+		--_bg: var(--_bg-disabled-checked);
+	}
+
+	[part~="label"] {
+		display: block;
+		font-size: var(--_label-font-size);
+		line-height: var(--_label-line-height);
+		user-select: none;
+		cursor: pointer;
+	}
+
+	[part="base"] {
+		display: grid;
+		grid-template-columns: var(--_control-size) max-content;
+		gap: var(--_gap);
+	}
+
+	[part="input"] {
+		position: absolute;
+		padding: 0;
+		margin: 0;
+		opacity: 0;
+		pointer-events: none;
+		inset: 0;
+	}
+
+	[part="control"] {
+		position: relative;
+		display: block;
+		height: var(--_control-size);
+		width: var(--_control-size);
+		flex-shrink: 0;
+
+		border-width: var(--_border-width);
+		border-style: solid;
+		border-color: var(--_border-color);
+		border-radius: var(--_radius);
+
+		background-color: var(--_bg);
+		color: var(--_icon-color);
+
+		cursor: pointer;
+		user-select: none;
+		appearance: none;
+		transition: var(--_transition);
+
+		font-weight: 700;
+		text-align: center;
+		line-height: var(--w-line-height-xs);
+		font-size: var(--w-font-size-m);
+	}
+
+	/* Invalid visuals are driven by the actual control state instead of host attributes.
    * This preserves group-driven invalid styling without mutating host attributes. */
-  [part='control']:has(> [part='input'][aria-invalid='true']:not(:disabled)) {
-    border-color: var(--_border-invalid);
-  }
-
-  [part='control']:has(> [part='input'][aria-invalid='true']:is(:checked, :indeterminate):not(:disabled)) {
-    background-color: var(--_bg-invalid-checked);
-  }
-
-  :host(:focus-visible) {
-    outline: none;
-  }
-
-  [part='control']:has(> [part='input']:focus-visible:not(:disabled)),
-  :host(:focus-visible) [part='control'] {
-    outline: var(--_outline-width) solid var(--_outline-color);
-    outline-offset: var(--_outline-offset);
-  }
-
-  /* checked icon (keep driven by actual input state for parity) */
-  [part='control']:has(:checked) {
-    background-image: var(--_checked-icon);
-    background-position: center;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    :host { --w-c-checkbox-transition: none; }
-  }
+	[part="control"]:has(> [part="input"][aria-invalid="true"]:not(:disabled)) {
+		border-color: var(--_border-invalid);
+	}
+
+	[part="control"]:has(
+		> [part="input"][aria-invalid="true"]:is(:checked, :indeterminate):not(
+				:disabled
+			)
+	) {
+		background-color: var(--_bg-invalid-checked);
+	}
+
+	:host(:focus-visible) {
+		outline: none;
+	}
+
+	[part="control"]:has(> [part="input"]:focus-visible:not(:disabled)),
+	:host(:focus-visible) [part="control"] {
+		outline: var(--_outline-width) solid var(--_outline-color);
+		outline-offset: var(--_outline-offset);
+	}
+
+	/* checked icon (keep driven by actual input state for parity) */
+	[part="control"]:has(:checked) {
+		background-image: var(--_checked-icon);
+		background-position: center;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		:host {
+			--w-c-checkbox-transition: none;
+		}
+	}
 `;var F,_,A,$,L,s,q,ne,se,J,V,P,le,de,p=class extends re(ae){constructor(){super(...arguments);y(this,s);this.value=null;this.indeterminate=!1;this.checked=!1;this.disabled=!1;this.required=!1;this.invalid=!1;y(this,F,!1);y(this,_,!1);y(this,A,!1);y(this,$,()=>{b(this,s,q).call(this),b(this,s,V).call(this)});y(this,L,e=>{if(!this.disabled&&!e.defaultPrevented&&!(e.key!==" "&&e.key!=="Spacebar"&&e.key!=="Enter")){if(e.key==="Enter"&&this.internals.form){this.internals.form.requestSubmit();return}e.composedPath()[0]!==this.input&&(e.preventDefault(),this.click())}})}set name(e){this._ownName=e}get name(){return this._ownName||this._groupName}get _computedInvalid(){return this.invalid||this._groupInvalid===!0}connectedCallback(){super.connectedCallback();let e=this.getAttribute("value");this.value=e??"on",I(this,F,this.hasAttribute("checked")),this.checked=k(this,F),this.addEventListener("invalid",k(this,$)),this.addEventListener("keydown",k(this,L)),b(this,s,P).call(this)}handleClick(){this.disabled||(b(this,s,q).call(this),this.checked=!this.checked,this.indeterminate=!1,this.updateComplete.then(()=>{this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}))}updated(e){super.updated(e),(e.has("checked")||e.has("indeterminate"))&&b(this,s,le).call(this),b(this,s,de).call(this,e)&&(b(this,s,P).call(this),b(this,s,V).call(this))}resetFormControl(){this.checked=k(this,F),b(this,s,P).call(this),b(this,s,V).call(this)}click(){this.disabled||this.input?.click()}focus(e){this.input?.focus(e)}blur(){this.input?.blur()}get validationMessage(){return this.internals.validationMessage}get validity(){return this.internals.validity}checkValidity(){return b(this,s,V).call(this),this.internals.checkValidity()}reportValidity(){return b(this,s,q).call(this),b(this,s,V).call(this),this.internals.checkValidity()}render(){let e=!this.checked&&this.indeterminate,a=e?"mixed":this.checked?"true":"false";return me`
-      <label part="base" class="wrapper">
-        <span part="control" class="checkbox control">
-          <input
-            part="input"
-            class="input hide-toggle"
-            type="checkbox"
-            name=${K(this.name||void 0)}
-            value=${K(this.value)}
-            .indeterminate=${ie(this.indeterminate)}
-            .checked=${ie(this.checked)}
-            .disabled=${this.disabled}
-            .required=${this.required}
-            aria-checked=${a}
-            aria-invalid=${K(this._computedInvalid?"true":void 0)}
-            @click=${this.handleClick} />
-          ${e?"\u2013":""}
-        </span>
-
-        <slot part="label"></slot>
-      </label>
-    `}};F=new WeakMap,_=new WeakMap,A=new WeakMap,$=new WeakMap,L=new WeakMap,s=new WeakSet,q=function(){I(this,A,!0)},ne=function(){return this.input?.validationMessage||" "},se=function(){return this.input??void 0},J=function(e){this.internals.setValidity(e,b(this,s,ne).call(this),b(this,s,se).call(this))},V=function(){if(this.disabled){this.internals.setValidity({});return}let e=this.required&&!this.checked,a=this.invalid&&!k(this,_);if(e){I(this,_,!0),this.invalid=k(this,A),b(this,s,J).call(this,{valueMissing:!0});return}if(k(this,_)&&(this.invalid=!1,I(this,_,!1)),a){b(this,s,J).call(this,{customError:!0});return}this.internals.setValidity({})},P=function(){if(this.disabled){this.setValue(null);return}let e=this.checked?this.value:null;this.setValue(e)},le=function(){this.input&&(this.input.checked=this.checked,this.input.indeterminate=this.indeterminate)},de=function(e){return e.has("checked")||e.has("value")||e.has("disabled")||e.has("required")||e.has("invalid")},p.styles=[oe,te],p.shadowRootOptions={...ae.shadowRootOptions,delegatesFocus:!0},u([we('input[type="checkbox"]')],p.prototype,"input",2),u([w({reflect:!0})],p.prototype,"name",1),u([w({reflect:!0})],p.prototype,"value",2),u([w({type:Boolean,reflect:!0})],p.prototype,"indeterminate",2),u([w({type:Boolean,reflect:!0})],p.prototype,"checked",2),u([w({type:Boolean,reflect:!0})],p.prototype,"disabled",2),u([w({type:Boolean,reflect:!0})],p.prototype,"required",2),u([w({type:Boolean,reflect:!0})],p.prototype,"invalid",2),u([w({attribute:!1})],p.prototype,"_groupInvalid",2),u([w({attribute:!1})],p.prototype,"_groupName",2);var Xe=p;customElements.get("w-checkbox")||customElements.define("w-checkbox",p);export{Xe as WCheckbox,p as WarpCheckbox};
+			<label part="base">
+				<span part="control">
+					<input
+						part="input"
+						type="checkbox"
+						name=${K(this.name||void 0)}
+						value=${K(this.value)}
+						.indeterminate=${ie(this.indeterminate)}
+						.checked=${ie(this.checked)}
+						.disabled=${this.disabled}
+						.required=${this.required}
+						aria-checked=${a}
+						aria-invalid=${K(this._computedInvalid?"true":void 0)}
+						@click=${this.handleClick}
+					/>
+					${e?"\u2013":""}
+				</span>
+
+				<slot part="label"></slot>
+			</label>
+		`}};F=new WeakMap,_=new WeakMap,A=new WeakMap,$=new WeakMap,L=new WeakMap,s=new WeakSet,q=function(){I(this,A,!0)},ne=function(){return this.input?.validationMessage||" "},se=function(){return this.input??void 0},J=function(e){this.internals.setValidity(e,b(this,s,ne).call(this),b(this,s,se).call(this))},V=function(){if(this.disabled){this.internals.setValidity({});return}let e=this.required&&!this.checked,a=this.invalid&&!k(this,_);if(e){I(this,_,!0),this.invalid=k(this,A),b(this,s,J).call(this,{valueMissing:!0});return}if(k(this,_)&&(this.invalid=!1,I(this,_,!1)),a){b(this,s,J).call(this,{customError:!0});return}this.internals.setValidity({})},P=function(){if(this.disabled){this.setValue(null);return}let e=this.checked?this.value:null;this.setValue(e)},le=function(){this.input&&(this.input.checked=this.checked,this.input.indeterminate=this.indeterminate)},de=function(e){return e.has("checked")||e.has("value")||e.has("disabled")||e.has("required")||e.has("invalid")},p.styles=[oe,te],p.shadowRootOptions={...ae.shadowRootOptions,delegatesFocus:!0},u([we('input[type="checkbox"]')],p.prototype,"input",2),u([w({reflect:!0})],p.prototype,"name",1),u([w({reflect:!0})],p.prototype,"value",2),u([w({type:Boolean,reflect:!0})],p.prototype,"indeterminate",2),u([w({type:Boolean,reflect:!0})],p.prototype,"checked",2),u([w({type:Boolean,reflect:!0})],p.prototype,"disabled",2),u([w({type:Boolean,reflect:!0})],p.prototype,"required",2),u([w({type:Boolean,reflect:!0})],p.prototype,"invalid",2),u([w({attribute:!1})],p.prototype,"_groupInvalid",2),u([w({attribute:!1})],p.prototype,"_groupName",2);var Xe=p;customElements.get("w-checkbox")||customElements.define("w-checkbox",p);export{Xe as WCheckbox,p as WarpCheckbox};
 //# sourceMappingURL=checkbox.js.map