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

package/dist/packages/radio/radio.js

@@ -1,276 +1,276 @@
 var Q=Object.defineProperty;var ee=Object.getOwnPropertyDescriptor;var W=a=>{throw TypeError(a)};var m=(a,r,e,o)=>{for(var i=o>1?void 0:o?ee(r,e):r,h=a.length-1,b;h>=0;h--)(b=a[h])&&(i=(o?b(r,e,i):b(i))||i);return o&&i&&Q(r,e,i),i};var D=(a,r,e)=>r.has(a)||W("Cannot "+e);var V=(a,r,e)=>(D(a,r,"read from private field"),e?e.call(a):r.get(a)),j=(a,r,e)=>r.has(a)?W("Cannot add the same private member more than once"):r instanceof WeakSet?r.add(a):r.set(a,e),x=(a,r,e,o)=>(D(a,r,"write to private field"),o?o.call(a,e):r.set(a,e),e);var n=function(a,r,e,o){if(e==="a"&&!o)throw new TypeError("Private accessor was defined without a getter");if(typeof r=="function"?a!==r||!o:!r.has(a))throw new TypeError("Cannot read private member from an object whose class did not declare it");return e==="m"?o:e==="a"?o.call(a):o?o.value:r.get(a)},d=function(a,r,e,o,i){if(o==="m")throw new TypeError("Private method is not writable");if(o==="a"&&!i)throw new TypeError("Private accessor was defined without a setter");if(typeof r=="function"?a!==r||!i:!r.has(a))throw new TypeError("Cannot write private member to an object whose class did not declare it");return o==="a"?i.call(a,e):i?i.value=e:r.set(a,e),e};function N(a){var r,e,o,i,h,b,w,f,v,R,G,X,A,M,Y,k,Z,L,O;class J extends a{constructor(...t){var s,l,c;super(...t),r.add(this),this.internals=this.attachInternals(),e.set(this,!1),o.set(this,!1),i.set(this,!1),h.set(this,void 0),b.set(this,void 0),w.set(this,!0),v.set(this,""),R.set(this,()=>{d(this,i,!0,"f"),d(this,e,!0,"f"),n(this,r,"m",k).call(this)}),G.set(this,()=>{d(this,e,!1,"f"),n(this,r,"m",Z).call(this,this.shouldFormValueUpdate()?n(this,v,"f"):""),!this.validity.valid&&n(this,i,"f")&&d(this,o,!0,"f");let g=n(this,r,"m",k).call(this);this.validationMessageCallback&&this.validationMessageCallback(g?this.internals.validationMessage:"")}),X.set(this,()=>{var g;n(this,w,"f")&&this.validationTarget&&(this.internals.setValidity(this.validity,this.validationMessage,this.validationTarget),d(this,w,!1,"f")),d(this,i,!0,"f"),d(this,o,!0,"f"),n(this,r,"m",k).call(this),(g=this===null||this===void 0?void 0:this.validationMessageCallback)===null||g===void 0||g.call(this,this.showError?this.internals.validationMessage:"")}),A.set(this,void 0),M.set(this,!1),Y.set(this,Promise.resolve()),(s=this.addEventListener)===null||s===void 0||s.call(this,"focus",n(this,R,"f")),(l=this.addEventListener)===null||l===void 0||l.call(this,"blur",n(this,G,"f")),(c=this.addEventListener)===null||c===void 0||c.call(this,"invalid",n(this,X,"f")),this.setValue(null)}static get formAssociated(){return!0}static get validators(){return this.formControlValidators||[]}static get observedAttributes(){let t=this.validators.map(c=>c.attribute).flat(),s=super.observedAttributes||[];return[...new Set([...s,...t])]}static getValidator(t){return this.validators.find(s=>s.attribute===t)||null}static getValidators(t){return this.validators.filter(s=>{var l;if(s.attribute===t||!((l=s.attribute)===null||l===void 0)&&l.includes(t))return!0})}get form(){return this.internals.form}get showError(){return n(this,r,"m",k).call(this)}checkValidity(){return this.internals.checkValidity()}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}attributeChangedCallback(t,s,l){var c;(c=super.attributeChangedCallback)===null||c===void 0||c.call(this,t,s,l);let S=this.constructor.getValidators(t);S?.length&&this.validationTarget&&this.setValue(n(this,v,"f"))}setValue(t){var s;d(this,o,!1,"f"),(s=this.validationMessageCallback)===null||s===void 0||s.call(this,""),d(this,v,t,"f");let c=this.shouldFormValueUpdate()?t:null;this.internals.setFormValue(c),n(this,r,"m",Z).call(this,c),this.valueChangedCallback&&this.valueChangedCallback(c),n(this,r,"m",k).call(this)}shouldFormValueUpdate(){return!0}get validationComplete(){return new Promise(t=>t(n(this,Y,"f")))}formResetCallback(){var t,s;d(this,i,!1,"f"),d(this,o,!1,"f"),n(this,r,"m",k).call(this),(t=this.resetFormControl)===null||t===void 0||t.call(this),(s=this.validationMessageCallback)===null||s===void 0||s.call(this,n(this,r,"m",k).call(this)?this.validationMessage:"")}}return e=new WeakMap,o=new WeakMap,i=new WeakMap,h=new WeakMap,b=new WeakMap,w=new WeakMap,v=new WeakMap,R=new WeakMap,G=new WeakMap,X=new WeakMap,A=new WeakMap,M=new WeakMap,Y=new WeakMap,r=new WeakSet,f=function(){let t=this.getRootNode(),s=`${this.localName}[name="${this.getAttribute("name")}"]`;return t.querySelectorAll(s)},k=function(){if(this.hasAttribute("disabled"))return!1;let t=n(this,o,"f")||n(this,i,"f")&&!this.validity.valid&&!n(this,e,"f");return t&&this.internals.states?this.internals.states.add("--show-error"):this.internals.states&&this.internals.states.delete("--show-error"),t},Z=function(t){let s=this.constructor,l={},c=s.validators,g=[],S=c.some(u=>u.isValid instanceof Promise);n(this,M,"f")||(d(this,Y,new Promise(u=>{d(this,A,u,"f")}),"f"),d(this,M,!0,"f")),n(this,h,"f")&&(n(this,h,"f").abort(),d(this,b,n(this,h,"f"),"f"));let T=new AbortController;d(this,h,T,"f");let I,U=!1;c.length&&(c.forEach(u=>{let P=u.key||"customError",C=u.isValid(this,t,T.signal);C instanceof Promise?(g.push(C),C.then(q=>{q!=null&&(l[P]=!q,I=n(this,r,"m",O).call(this,u,t),n(this,r,"m",L).call(this,l,I))})):(l[P]=!C,this.validity[P]!==!C&&(U=!0),!C&&!I&&(I=n(this,r,"m",O).call(this,u,t)))}),Promise.allSettled(g).then(()=>{var u;T?.signal.aborted||(d(this,M,!1,"f"),(u=n(this,A,"f"))===null||u===void 0||u.call(this))}),(U||!S)&&n(this,r,"m",L).call(this,l,I))},L=function(t,s){if(this.validationTarget)this.internals.setValidity(t,s,this.validationTarget),d(this,w,!1,"f");else{if(this.internals.setValidity(t,s),this.internals.validity.valid)return;d(this,w,!0,"f")}},O=function(t,s){if(this.validityCallback){let l=this.validityCallback(t.key||"customError");if(l)return l}return t.message instanceof Function?t.message(this,s):t.message},J}import{html as ie,LitElement as K}from"lit";import{property as y}from"lit/decorators.js";import{css as re}from"lit";import{unsafeCSS as oe}from"lit";var B=re`
-  *,
-  :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;
+	}
 `,be=oe(`*, :before, :after {
             --w-rotate: 0;
             --w-rotate-x: 0;
@@ -2438,179 +2438,218 @@ var Q=Object.defineProperty;var ee=Object.getOwnPropertyDescriptor;var W=a=>{thr
                 }
             }
         `);import{css as te}from"lit";var $=te`
-  :host {
-    box-sizing: border-box !important;
-  }
-
-  :host *,
-  :host *::before,
-  :host *::after {
-    box-sizing: inherit !important;
-  }
+	:host {
+		box-sizing: border-box !important;
+	}
+
+	:host *,
+	:host *::before,
+	:host *::after {
+		box-sizing: inherit !important;
+	}
 `;import{css as ae}from"lit";var H=ae`
-  :host {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--_gap);
-
-    --_gap: var(--w-c-radio-gap, 8px);
-
-    --_size: var(--w-c-radio-size, 2rem);
-    --_radius: var(--w-c-radio-radius, 50%);
-    --_border-width: var(--w-c-radio-border-width, 1px);
-    --_checked-border-width: var(--w-c-radio-checked-border-width, 0.6rem);
-
-    --_bg: var(--w-c-radio-bg, var(--w-s-color-background));
-    --_border-color: var(--w-c-radio-border-color, var(--w-s-color-border-strong));
-    --_border-color-checked: var(--w-c-radio-border-color-checked, var(--w-s-color-border-selected));
-    --_border-color-invalid: var(--w-c-radio-border-color-invalid, var(--w-s-color-border-negative));
-
-    --_outline-width: var(--w-c-radio-outline-width, 2px);
-    --_outline-color: var(--w-c-radio-outline-color, var(--w-s-color-border-focus));
-    --_outline-offset: var(--w-c-radio-outline-offset, var(--w-outline-offset, 1px));
-
-    --_border-color-disabled: var(--w-c-radio-border-color-disabled, var(--w-s-color-border-disabled));
-    --_bg-disabled: var(--w-c-radio-bg-disabled, var(--w-s-color-background-disabled-subtle));
-
-    --_label-font-size: var(--w-c-radio-label-font-size, var(--w-font-size-m));
-    --_label-line-height: var(--w-c-radio-label-line-height, var(--w-line-height-m));
-    --_label-color: var(--w-c-radio-label-color, currentColor);
-    --_label-color-disabled: var(--w-c-radio-label-color-disabled, var(--w-s-color-text-disabled));
-
-    --_cursor: var(--w-c-radio-cursor, pointer);
-    --_cursor-disabled: var(--w-c-radio-cursor-disabled, not-allowed);
-
-    --_transition: var(
-      --w-c-radio-transition,
-      border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-      border-width 150ms cubic-bezier(0.4, 0, 0.2, 1),
-      background-color 150ms cubic-bezier(0.4, 0, 0.2, 1)
-    );
-  }
-
-  :host([disabled]),
-  :host([disabled-ui]) {
-    --w-c-radio-border-color: var(--w-c-radio-border-color-disabled, var(--w-s-color-border-disabled));
-    --w-c-radio-bg: var(--w-c-radio-bg-disabled, var(--w-s-color-background-disabled-subtle));
-    --w-c-radio-border-color-checked: var(--w-c-radio-border-color-disabled, var(--w-s-color-border-disabled));
-    --w-c-radio-label-color: var(--w-c-radio-label-color-disabled, var(--w-s-color-text-disabled));
-    --w-c-radio-cursor: var(--w-c-radio-cursor-disabled, not-allowed);
-  }
-
-  .wrapper {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--_gap);
-  }
-
-  [part='control'] {
-    appearance: none;
-    -webkit-appearance: none;
-    margin: 0;
-
-    width: var(--_size);
-    height: var(--_size);
-    border-style: solid;
-    border-width: var(--_border-width);
-    border-color: var(--_border-color);
-    border-radius: var(--_radius);
-    background-color: var(--_bg);
-    cursor: var(--_cursor);
-    flex-shrink: 0;
-
-    transition: var(--_transition);
-  }
-
-  :host([checked]) [part='control'],
-  :host([checked-ui]) [part='control'],
-  :host([role='radio'][checked-ui]) [part='control'],
-  :host([role='radio']:state(checked)) [part='control'] {
-    border-color: var(--_border-color-checked);
-    border-width: var(--_checked-border-width);
-  }
-
-  :host([invalid]) [part='control'] {
-    border-color: var(--_border-color-invalid);
-  }
-
-  :host(:focus-visible) {
-    outline: none;
-  }
-
-  :host(:focus-visible) [part='control'] {
-    outline: var(--_outline-width) solid var(--_outline-color);
-    outline-offset: var(--_outline-offset);
-  }
-
-  :host([disabled]) [part='control'],
-  :host([disabled-ui]) [part='control'],
-  :host([role='radio']:state(disabled)) [part='control'] {
-    border-color: var(--_border-color-disabled);
-    background-color: var(--_bg-disabled);
-    cursor: var(--_cursor-disabled);
-  }
-
-  :host([disabled]) [part='label'],
-  :host([disabled-ui]) [part='label'] {
-    color: var(--_label-color-disabled);
-    cursor: var(--_cursor-disabled);
-  }
-
-  :host([disabled][checked]),
-  :host([disabled][checked-ui]),
-  :host([disabled-ui][checked-ui]) [part='control'] {
-    border-color: var(--_border-color-disabled);
-  }
-
-  [part='label'] {
-    font-size: var(--_label-font-size);
-    line-height: var(--_label-line-height);
-    color: var(--_label-color);
-    user-select: none;
-    cursor: var(--_cursor);
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    :host {
-      --w-c-radio-transition: none;
-    }
-  }
-
-  @media (forced-colors: active) {
-    :host {
-      --w-c-radio-bg: Canvas;
-      --w-c-radio-border-color: ButtonText;
-      --w-c-radio-border-color-checked: Highlight;
-      --w-c-radio-outline-color: Highlight;
-      --w-c-radio-bg-disabled: Canvas;
-      --w-c-radio-border-color-disabled: GrayText;
-      --w-c-radio-label-color: CanvasText;
-      --w-c-radio-label-color-disabled: GrayText;
-    }
-
-    [part='control'] {
-      forced-color-adjust: none;
-    }
-
-    :host([checked]) [part='control'],
-    :host([checked-ui]) [part='control'],
-    :host([role='radio']:state(checked)) [part='control'] {
-      background-color: var(--_border-color-checked);
-      border-color: var(--_border-color-checked);
-    }
-
-    :host([disabled][checked]),
-    :host([disabled][checked-ui]),
-    :host([disabled-ui][checked-ui]) [part='control'],
-    :host([role='radio']:state(disabled):state(checked)) [part='control'] {
-      background-color: var(--_border-color-disabled);
-      border-color: var(--_border-color-disabled);
-    }
-  }
-`;var F,z,_,p=class extends N(K){constructor(){super();this.value=null;this.checked=!1;this.disabled=!1;this.required=!1;this.invalid=!1;j(this,F,!1);j(this,z,!1);j(this,_,!1);this.handleClick=()=>{this.isInGroup()||this.disabled||(x(this,_,!0),!this.checked&&(this.checked=!0,this.updateComplete.then(()=>{this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))})))};this.handleInvalid=()=>{x(this,_,!0),this.updateValidity()};this.handleKeyDown=e=>{if(!this.isInGroup()&&!this.disabled&&!e.defaultPrevented){if(["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(e.key)){let o=this.getStandaloneNamedRadios().filter(v=>!v.disabled);if(o.length<=1)return;e.preventDefault();let i=o.find(v=>v.checked)??o.find(v=>v===this)??o[0],h=e.key==="ArrowUp"||e.key==="ArrowLeft"?-1:1,w=(o.indexOf(i)+h+o.length)%o.length,f=o[w];x(f,_,!0),f.checked||(f.checked=!0,f.updateComplete.then(()=>{f.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))})),f.focus();return}if(!(e.key!==" "&&e.key!=="Spacebar"&&e.key!=="Enter")){if(e.key==="Enter"&&this.internals.form){this.internals.form.requestSubmit();return}e.preventDefault(),this.click()}}};this.addEventListener("click",this.handleClick),this.addEventListener("invalid",this.handleInvalid),this.addEventListener("keydown",this.handleKeyDown)}get tabIndex(){return this._internalTabIndex}set tabIndex(e){this._groupTabIndex=e}connectedCallback(){super.connectedCallback(),this.value=this.getAttribute("value")??"on",x(this,F,this.hasAttribute("checked")),this.checked=V(this,F),this.internals.role="radio",this.syncAriaDisabled(),this.syncFormValue(),this.updateValidity()}syncAriaDisabled(){this.internals.ariaDisabled=this.disabled?"true":"false"}syncAriaChecked(){this.internals.ariaChecked=this.checked?"true":"false"}willUpdate(e){this.shouldSyncFormState(e)&&(this.syncFormValue(),this.updateValidity())}updated(e){super.updated(e),e.has("checked")&&(this.syncAriaChecked(),this.checked&&!this.isInGroup()&&(this.uncheckOtherRadios(),this.syncStandaloneTabOrder())),e.has("disabled")&&(this.syncAriaDisabled(),this.isInGroup()||this.syncStandaloneTabOrder()),e.has("invalid")&&(this.internals.ariaInvalid=this.invalid?"true":null),e.has("name")&&this.checked&&!this.isInGroup()&&this.uncheckOtherRadios()}resetFormControl(){this.checked=V(this,F),this.syncFormValue(),this.updateValidity()}get validationMessage(){return this.internals.validationMessage}get validity(){return this.internals.validity}checkValidity(){return this.updateValidity(),this.internals.checkValidity()}reportValidity(){return x(this,_,!0),this.updateValidity(),this.internals.checkValidity()}isInGroup(){return!!this.closest("w-radio-group")}getRadioScope(){return this.internals.form??this.closest("form")??document}getStandaloneNamedRadios(){if(!this.name)return[this];let e=this.getRadioScope();return Array.from(e.querySelectorAll(`w-radio[name="${this.name}"]`)).filter(o=>!o.closest("w-radio-group"))}syncStandaloneTabOrder(){let e=this.getStandaloneNamedRadios(),o=e.filter(b=>!b.disabled),h=o.find(b=>b.checked)??o[0]??null;e.forEach(b=>{b._standaloneTabIndex=b===h?0:-1})}get _internalTabIndex(){return this.disabled?-1:this._groupTabIndex!==void 0?this._groupTabIndex:this._standaloneTabIndex!==void 0?this._standaloneTabIndex:0}firstUpdated(){this.isInGroup()||this.syncStandaloneTabOrder()}uncheckOtherRadios(){if(!this.name)return;let e=this.getRadioScope();Array.from(e.querySelectorAll(`w-radio[name="${this.name}"]`)).forEach(i=>{i!==this&&(i.closest("w-radio-group")||i.checked&&(i.checked=!1))})}updateValidity(){if(this.disabled||this.isInGroup()){this.internals.setValidity({});return}let e=this.required&&!this.checked,o=this.invalid&&!V(this,z);if(e){x(this,z,!0),this.invalid=V(this,_),this.internals.setValidity({valueMissing:!0},this.internals.validationMessage||" ");return}if(V(this,z)&&(this.invalid=!1,x(this,z,!1)),o){this.internals.setValidity({customError:!0},this.internals.validationMessage||" ");return}this.internals.setValidity({})}syncFormValue(){if(this.disabled){this.setValue(null);return}this.setValue(this.checked?this.value:null)}shouldSyncFormState(e){return e.has("checked")||e.has("value")||e.has("disabled")||e.has("required")||e.has("invalid")}render(){return ie`
-      <div class="wrapper" tabindex="${this._internalTabIndex}">
-        <div part="control" class="control"></div>
-        <slot part="label" class="label"></slot>
-      </div>
-    `}};F=new WeakMap,z=new WeakMap,_=new WeakMap,p.styles=[$,B,H],p.shadowRootOptions={...K.shadowRootOptions,delegatesFocus:!0},m([y({reflect:!0})],p.prototype,"name",2),m([y({reflect:!0})],p.prototype,"value",2),m([y({type:Boolean,reflect:!0})],p.prototype,"checked",2),m([y({type:Boolean,reflect:!0})],p.prototype,"disabled",2),m([y({type:Boolean,reflect:!0})],p.prototype,"required",2),m([y({type:Boolean,reflect:!0})],p.prototype,"invalid",2),m([y({attribute:!1})],p.prototype,"_groupTabIndex",2),m([y({attribute:!1})],p.prototype,"_standaloneTabIndex",2);var _e=p;customElements.get("w-radio")||customElements.define("w-radio",p);export{_e as WRadio,p as WarpRadio};
+	:host {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--_gap);
+
+		--_gap: var(--w-c-radio-gap, 8px);
+
+		--_size: var(--w-c-radio-size, 2rem);
+		--_radius: var(--w-c-radio-radius, 50%);
+		--_border-width: var(--w-c-radio-border-width, 1px);
+		--_checked-border-width: var(--w-c-radio-checked-border-width, 0.6rem);
+
+		--_bg: var(--w-c-radio-bg, var(--w-s-color-background));
+		--_border-color: var(
+			--w-c-radio-border-color,
+			var(--w-s-color-border-strong)
+		);
+		--_border-color-checked: var(
+			--w-c-radio-border-color-checked,
+			var(--w-s-color-border-selected)
+		);
+		--_border-color-invalid: var(
+			--w-c-radio-border-color-invalid,
+			var(--w-s-color-border-negative)
+		);
+
+		--_outline-width: var(--w-c-radio-outline-width, 2px);
+		--_outline-color: var(
+			--w-c-radio-outline-color,
+			var(--w-s-color-border-focus)
+		);
+		--_outline-offset: var(
+			--w-c-radio-outline-offset,
+			var(--w-outline-offset, 1px)
+		);
+
+		--_border-color-disabled: var(
+			--w-c-radio-border-color-disabled,
+			var(--w-s-color-border-disabled)
+		);
+		--_bg-disabled: var(
+			--w-c-radio-bg-disabled,
+			var(--w-s-color-background-disabled-subtle)
+		);
+
+		--_label-font-size: var(--w-c-radio-label-font-size, var(--w-font-size-m));
+		--_label-line-height: var(
+			--w-c-radio-label-line-height,
+			var(--w-line-height-m)
+		);
+		--_label-color: var(--w-c-radio-label-color, currentColor);
+		--_label-color-disabled: var(
+			--w-c-radio-label-color-disabled,
+			var(--w-s-color-text-disabled)
+		);
+
+		--_cursor: var(--w-c-radio-cursor, pointer);
+		--_cursor-disabled: var(--w-c-radio-cursor-disabled, not-allowed);
+
+		--_transition: var(
+			--w-c-radio-transition,
+			border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+			border-width 150ms cubic-bezier(0.4, 0, 0.2, 1),
+			background-color 150ms cubic-bezier(0.4, 0, 0.2, 1)
+		);
+	}
+
+	:host([disabled]),
+	:host([disabled-ui]) {
+		--w-c-radio-border-color: var(
+			--w-c-radio-border-color-disabled,
+			var(--w-s-color-border-disabled)
+		);
+		--w-c-radio-bg: var(
+			--w-c-radio-bg-disabled,
+			var(--w-s-color-background-disabled-subtle)
+		);
+		--w-c-radio-border-color-checked: var(
+			--w-c-radio-border-color-disabled,
+			var(--w-s-color-border-disabled)
+		);
+		--w-c-radio-label-color: var(
+			--w-c-radio-label-color-disabled,
+			var(--w-s-color-text-disabled)
+		);
+		--w-c-radio-cursor: var(--w-c-radio-cursor-disabled, not-allowed);
+	}
+
+	.wrapper {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--_gap);
+	}
+
+	[part="control"] {
+		appearance: none;
+		-webkit-appearance: none;
+		margin: 0;
+
+		width: var(--_size);
+		height: var(--_size);
+		border-style: solid;
+		border-width: var(--_border-width);
+		border-color: var(--_border-color);
+		border-radius: var(--_radius);
+		background-color: var(--_bg);
+		cursor: var(--_cursor);
+		flex-shrink: 0;
+
+		transition: var(--_transition);
+	}
+
+	:host([checked]) [part="control"],
+	:host([checked-ui]) [part="control"],
+	:host([role="radio"][checked-ui]) [part="control"],
+	:host([role="radio"]:state(checked)) [part="control"] {
+		border-color: var(--_border-color-checked);
+		border-width: var(--_checked-border-width);
+	}
+
+	:host([invalid]) [part="control"] {
+		border-color: var(--_border-color-invalid);
+	}
+
+	:host(:focus-visible) {
+		outline: none;
+	}
+
+	:host(:focus-visible) [part="control"] {
+		outline: var(--_outline-width) solid var(--_outline-color);
+		outline-offset: var(--_outline-offset);
+	}
+
+	:host([disabled]) [part="control"],
+	:host([disabled-ui]) [part="control"],
+	:host([role="radio"]:state(disabled)) [part="control"] {
+		border-color: var(--_border-color-disabled);
+		background-color: var(--_bg-disabled);
+		cursor: var(--_cursor-disabled);
+	}
+
+	:host([disabled]) [part="label"],
+	:host([disabled-ui]) [part="label"] {
+		color: var(--_label-color-disabled);
+		cursor: var(--_cursor-disabled);
+	}
+
+	:host([disabled][checked]),
+	:host([disabled][checked-ui]),
+	:host([disabled-ui][checked-ui]) [part="control"] {
+		border-color: var(--_border-color-disabled);
+	}
+
+	[part="label"] {
+		font-size: var(--_label-font-size);
+		line-height: var(--_label-line-height);
+		color: var(--_label-color);
+		user-select: none;
+		cursor: var(--_cursor);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		:host {
+			--w-c-radio-transition: none;
+		}
+	}
+
+	@media (forced-colors: active) {
+		:host {
+			--w-c-radio-bg: Canvas;
+			--w-c-radio-border-color: ButtonText;
+			--w-c-radio-border-color-checked: Highlight;
+			--w-c-radio-outline-color: Highlight;
+			--w-c-radio-bg-disabled: Canvas;
+			--w-c-radio-border-color-disabled: GrayText;
+			--w-c-radio-label-color: CanvasText;
+			--w-c-radio-label-color-disabled: GrayText;
+		}
+
+		[part="control"] {
+			forced-color-adjust: none;
+		}
+
+		:host([checked]) [part="control"],
+		:host([checked-ui]) [part="control"],
+		:host([role="radio"]:state(checked)) [part="control"] {
+			background-color: var(--_border-color-checked);
+			border-color: var(--_border-color-checked);
+		}
+
+		:host([disabled][checked]),
+		:host([disabled][checked-ui]),
+		:host([disabled-ui][checked-ui]) [part="control"],
+		:host([role="radio"]:state(disabled):state(checked)) [part="control"] {
+			background-color: var(--_border-color-disabled);
+			border-color: var(--_border-color-disabled);
+		}
+	}
+`;var F,z,_,p=class extends N(K){constructor(){super();this.value=null;this.checked=!1;this.disabled=!1;this.required=!1;this.invalid=!1;j(this,F,!1);j(this,z,!1);j(this,_,!1);this.handleClick=()=>{this.isInGroup()||this.disabled||(x(this,_,!0),!this.checked&&(this.checked=!0,this.updateComplete.then(()=>{this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))})))};this.handleInvalid=()=>{x(this,_,!0),this.updateValidity()};this.handleKeyDown=e=>{if(!this.isInGroup()&&!this.disabled&&!e.defaultPrevented){if(["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(e.key)){let o=this.getStandaloneNamedRadios().filter(v=>!v.disabled);if(o.length<=1)return;e.preventDefault();let i=o.find(v=>v.checked)??o.find(v=>v===this)??o[0],h=e.key==="ArrowUp"||e.key==="ArrowLeft"?-1:1,w=(o.indexOf(i)+h+o.length)%o.length,f=o[w];x(f,_,!0),f.checked||(f.checked=!0,f.updateComplete.then(()=>{f.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))})),f.focus();return}if(!(e.key!==" "&&e.key!=="Spacebar"&&e.key!=="Enter")){if(e.key==="Enter"&&this.internals.form){this.internals.form.requestSubmit();return}e.preventDefault(),this.click()}}};this.addEventListener("click",this.handleClick),this.addEventListener("invalid",this.handleInvalid),this.addEventListener("keydown",this.handleKeyDown)}get tabIndex(){return this._internalTabIndex}set tabIndex(e){this._groupTabIndex=e}connectedCallback(){super.connectedCallback(),this.value=this.getAttribute("value")??"on",x(this,F,this.hasAttribute("checked")),this.checked=V(this,F),this.internals.role="radio",this.syncAriaDisabled(),this.syncFormValue(),this.updateValidity()}syncAriaDisabled(){this.internals.ariaDisabled=this.disabled?"true":"false"}syncAriaChecked(){this.internals.ariaChecked=this.checked?"true":"false"}willUpdate(e){this.shouldSyncFormState(e)&&(this.syncFormValue(),this.updateValidity())}updated(e){super.updated(e),e.has("checked")&&(this.syncAriaChecked(),this.checked&&!this.isInGroup()&&(this.uncheckOtherRadios(),this.syncStandaloneTabOrder())),e.has("disabled")&&(this.syncAriaDisabled(),this.isInGroup()||this.syncStandaloneTabOrder()),e.has("invalid")&&(this.internals.ariaInvalid=this.invalid?"true":null),e.has("name")&&this.checked&&!this.isInGroup()&&this.uncheckOtherRadios()}resetFormControl(){this.checked=V(this,F),this.syncFormValue(),this.updateValidity()}get validationMessage(){return this.internals.validationMessage}get validity(){return this.internals.validity}checkValidity(){return this.updateValidity(),this.internals.checkValidity()}reportValidity(){return x(this,_,!0),this.updateValidity(),this.internals.checkValidity()}isInGroup(){return!!this.closest("w-radio-group")}getRadioScope(){return this.internals.form??this.closest("form")??document}getStandaloneNamedRadios(){return this.name?[...this.getRadioScope().querySelectorAll(`w-radio[name="${this.name}"]`)].filter(o=>!o.closest("w-radio-group")):[this]}syncStandaloneTabOrder(){let e=this.getStandaloneNamedRadios(),o=e.filter(b=>!b.disabled),h=o.find(b=>b.checked)??o[0]??null;e.forEach(b=>{b._standaloneTabIndex=b===h?0:-1})}get _internalTabIndex(){return this.disabled?-1:this._groupTabIndex!==void 0?this._groupTabIndex:this._standaloneTabIndex!==void 0?this._standaloneTabIndex:0}firstUpdated(){this.isInGroup()||this.syncStandaloneTabOrder()}uncheckOtherRadios(){if(!this.name)return;[...this.getRadioScope().querySelectorAll(`w-radio[name="${this.name}"]`)].forEach(i=>{i!==this&&(i.closest("w-radio-group")||i.checked&&(i.checked=!1))})}updateValidity(){if(this.disabled||this.isInGroup()){this.internals.setValidity({});return}let e=this.required&&!this.checked,o=this.invalid&&!V(this,z);if(e){x(this,z,!0),this.invalid=V(this,_),this.internals.setValidity({valueMissing:!0},this.internals.validationMessage||" ");return}if(V(this,z)&&(this.invalid=!1,x(this,z,!1)),o){this.internals.setValidity({customError:!0},this.internals.validationMessage||" ");return}this.internals.setValidity({})}syncFormValue(){if(this.disabled){this.setValue(null);return}this.setValue(this.checked?this.value:null)}shouldSyncFormState(e){return e.has("checked")||e.has("value")||e.has("disabled")||e.has("required")||e.has("invalid")}render(){return ie`
+			<div class="wrapper" tabindex="${this._internalTabIndex}">
+				<div part="control" class="control"></div>
+				<slot part="label" class="label"></slot>
+			</div>
+		`}};F=new WeakMap,z=new WeakMap,_=new WeakMap,p.styles=[$,B,H],p.shadowRootOptions={...K.shadowRootOptions,delegatesFocus:!0},m([y({reflect:!0})],p.prototype,"name",2),m([y({reflect:!0})],p.prototype,"value",2),m([y({type:Boolean,reflect:!0})],p.prototype,"checked",2),m([y({type:Boolean,reflect:!0})],p.prototype,"disabled",2),m([y({type:Boolean,reflect:!0})],p.prototype,"required",2),m([y({type:Boolean,reflect:!0})],p.prototype,"invalid",2),m([y({attribute:!1})],p.prototype,"_groupTabIndex",2),m([y({attribute:!1})],p.prototype,"_standaloneTabIndex",2);var _e=p;customElements.get("w-radio")||customElements.define("w-radio",p);export{_e as WRadio,p as WarpRadio};
 //# sourceMappingURL=radio.js.map