@warp-ds/elements 2.5.0-next.1 → 2.5.0

package/dist/packages/radio-group/radio-group.js

@@ -1,2648 +0,0 @@
-var X=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var V=i=>{throw TypeError(i)};var n=(i,o,e,r)=>{for(var t=r>1?void 0:r?P(o,e):o,a=i.length-1,s;a>=0;a--)(s=i[a])&&(t=(r?s(o,e,t):s(t))||t);return r&&t&&X(o,e,t),t};var C=(i,o,e)=>o.has(i)||V("Cannot "+e);var S=(i,o,e)=>(C(i,o,"read from private field"),e?e.call(i):o.get(i)),A=(i,o,e)=>o.has(i)?V("Cannot add the same private member more than once"):o instanceof WeakSet?o.add(i):o.set(i,e),R=(i,o,e,r)=>(C(i,o,"write to private field"),r?r.call(i,e):o.set(i,e),e);import{html as G}from"lit";import{property as u,query as W,state as F}from"lit/decorators.js";import{classMap as O}from"lit/directives/class-map.js";import{isServer as E}from"lit";import{property as m}from"lit/decorators.js";import{LitElement as Z,unsafeCSS as $}from"lit";import{property as T}from"lit/decorators.js";import{css as B}from"lit";var L=B`
-  :host {
-    box-sizing: border-box !important;
-  }
-
-  :host *,
-  :host *::before,
-  :host *::after {
-    box-sizing: inherit !important;
-  }
-`;var f,g=class extends Z{constructor(){super();A(this,f,!1);this.initialReflectedProperties=new Map;this.customStates={set:(e,r)=>{var t;(t=this.internals)!=null&&t.states&&(r?this.internals.states.add(e):this.internals.states.delete(e))},has:e=>{var r;return(r=this.internals)!=null&&r.states?this.internals.states.has(e):!1}};try{this.internals=this.attachInternals()}catch(r){console.error("Element internals are not supported in your browser. Consider using a polyfill")}this.customStates.set("wa-defined",!0);let e=this.constructor;for(let[r,t]of e.elementProperties)t.default==="inherit"&&t.initial!==void 0&&typeof r=="string"&&this.customStates.set(`initial-${r}-${t.initial}`,!0)}static get styles(){let e=Array.isArray(this.css)?this.css:this.css?[this.css]:[];return[L,...e].map(r=>typeof r=="string"?$(r):r)}attributeChangedCallback(e,r,t){S(this,f)||(this.constructor.elementProperties.forEach((a,s)=>{a.reflect&&this[s]!=null&&this.initialReflectedProperties.set(s,this[s])}),R(this,f,!0)),super.attributeChangedCallback(e,r,t)}willUpdate(e){super.willUpdate(e),this.initialReflectedProperties.forEach((r,t)=>{e.has(t)&&this[t]==null&&(this[t]=r)})}relayNativeEvent(e,r){e.stopImmediatePropagation(),this.dispatchEvent(new e.constructor(e.type,{...e,...r}))}};f=new WeakMap,n([T()],g.prototype,"dir",2),n([T()],g.prototype,"lang",2);var I=()=>({observedAttributes:["custom-error"],checkValidity(i){let o={message:"",isValid:!0,invalidKeys:[]};return i.customError&&(o.message=i.customError,o.isValid=!1,o.invalidKeys=["customError"]),o}});var x=class extends Event{constructor(){super("w-invalid",{bubbles:!0,cancelable:!1,composed:!0})}};var c=class extends g{constructor(){super();this.name=null;this.disabled=!1;this.required=!1;this.assumeInteractionOn=["input"];this.validators=[];this.valueHasChanged=!1;this.hasInteracted=!1;this.customError=null;this.emittedEvents=[];this.emitInvalid=e=>{e.target===this&&(this.hasInteracted=!0,this.dispatchEvent(new x))};this.handleInteraction=e=>{var t;let r=this.emittedEvents;r.includes(e.type)||r.push(e.type),r.length===((t=this.assumeInteractionOn)==null?void 0:t.length)&&(this.hasInteracted=!0)};E||this.addEventListener("invalid",this.emitInvalid)}static get validators(){return[I()]}static get observedAttributes(){let e=new Set(super.observedAttributes||[]);for(let r of this.validators)if(r.observedAttributes)for(let t of r.observedAttributes)e.add(t);return[...e]}connectedCallback(){super.connectedCallback(),this.updateValidity(),this.assumeInteractionOn.forEach(e=>{this.addEventListener(e,this.handleInteraction)})}firstUpdated(...e){super.firstUpdated(...e),this.updateValidity()}willUpdate(e){if(!E&&e.has("customError")&&(this.customError||(this.customError=null),this.setCustomValidity(this.customError||"")),e.has("value")||e.has("disabled")){let r=this.value;if(Array.isArray(r)){if(this.name){let t=new FormData;for(let a of r)t.append(this.name,a);this.setValue(t,t)}}else this.setValue(r,r)}e.has("disabled")&&(this.customStates.set("disabled",this.disabled),(this.hasAttribute("disabled")||!E&&!this.matches(":disabled"))&&this.toggleAttribute("disabled",this.disabled)),this.updateValidity(),super.willUpdate(e)}get labels(){return this.internals.labels}getForm(){return this.internals.form}get validity(){return this.internals.validity}get willValidate(){return this.internals.willValidate}get validationMessage(){return this.internals.validationMessage}checkValidity(){return this.updateValidity(),this.internals.checkValidity()}reportValidity(){return this.updateValidity(),this.hasInteracted=!0,this.internals.reportValidity()}get validationTarget(){return this.input||void 0}setValidity(...e){let r=e[0],t=e[1],a=e[2];a||(a=this.validationTarget),this.internals.setValidity(r,t,a||void 0),this.requestUpdate("validity"),this.setCustomStates()}setCustomStates(){let e=!!this.required,r=this.internals.validity.valid,t=this.hasInteracted;this.customStates.set("required",e),this.customStates.set("optional",!e),this.customStates.set("invalid",!r),this.customStates.set("valid",r),this.customStates.set("user-invalid",!r&&t),this.customStates.set("user-valid",r&&t)}setCustomValidity(e){if(!e){this.customError=null,this.setValidity({});return}this.customError=e,this.setValidity({customError:!0},e,this.validationTarget)}formResetCallback(){this.resetValidity(),this.hasInteracted=!1,this.valueHasChanged=!1,this.emittedEvents=[],this.updateValidity()}formDisabledCallback(e){this.disabled=e,this.updateValidity()}formStateRestoreCallback(e,r){this.value=e,r==="restore"&&this.resetValidity(),this.updateValidity()}setValue(...e){let[r,t]=e;this.internals.setFormValue(r,t)}get allValidators(){let e=this.constructor.validators||[],r=this.validators||[];return[...e,...r]}resetValidity(){this.setCustomValidity(""),this.setValidity({})}updateValidity(){if(this.disabled||this.hasAttribute("disabled")||!this.willValidate){this.resetValidity();return}let e=this.allValidators;if(!(e!=null&&e.length))return;let r={customError:!!this.customError},t=this.validationTarget||this.input||void 0,a="";for(let s of e){let{isValid:l,message:v,invalidKeys:h}=s.checkValidity(this);l||(a||(a=v),(h==null?void 0:h.length)>=0&&h.forEach(k=>r[k]=!0))}a||(a=this.validationMessage),this.setValidity(r,a,t)}};c.formAssociated=!0,n([m({reflect:!0})],c.prototype,"name",2),n([m({type:Boolean})],c.prototype,"disabled",2),n([m({state:!0,attribute:!1})],c.prototype,"valueHasChanged",2),n([m({state:!0,attribute:!1})],c.prototype,"hasInteracted",2),n([m({attribute:"custom-error",reflect:!0})],c.prototype,"customError",2),n([m({attribute:!1,state:!0,type:Object})],c.prototype,"validity",1);var M="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";var H=(i=21)=>{let o="",e=crypto.getRandomValues(new Uint8Array(i|=0));for(;i--;)o+=M[e[i]&63];return o};function q(i=""){return`${i}${H()}`}import{html as J}from"lit";import{property as w,state as j}from"lit/decorators.js";import{css as D}from"lit";var Y=D`
-  *,
-  :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=D`*, :before, :after {
-            --w-rotate: 0;
-            --w-rotate-x: 0;
-            --w-rotate-y: 0;
-            --w-rotate-z: 0;
-            --w-scale-x: 1;
-            --w-scale-y: 1;
-            --w-scale-z: 1;
-            --w-skew-x: 0;
-            --w-skew-y: 0;
-            --w-translate-x: 0;
-            --w-translate-y: 0;
-            --w-translate-z: 0
-        }
-
-            .h4, .t4 {
-                font-weight: 700;
-                font-size: var(--w-font-size-m);
-                line-height: var(--w-line-height-m)
-            }
-
-            .t3 {
-                font-weight: 700;
-                font-size: var(--w-font-size-l);
-                line-height: var(--w-line-height-l)
-            }
-
-            @media (min-width: 480px) {
-                .sm\\:h3 {
-                    font-weight: 700;
-                    font-size: var(--w-font-size-l);
-                    line-height: var(--w-line-height-l)
-                }
-            }
-
-            .text-center {
-                text-align: center
-            }
-
-            .before\\:text-center:before {
-                text-align: center
-            }
-
-            .text-left {
-                text-align: left
-            }
-
-            .text-right {
-                text-align: right
-            }
-
-            .align-middle {
-                vertical-align: middle
-            }
-
-            .animate-inprogress {
-                background-image: linear-gradient(135deg, rgba(0, 0, 0, .05) 25%, transparent 0, transparent 50%, rgba(0, 0, 0, .05) 0, rgba(0, 0, 0, .05) 75%, transparent 0, transparent) !important;
-                background-size: 30px 30px;
-                animation: animate-inprogress 3s linear infinite
-            }
-
-            @keyframes animate-inprogress {
-                0% {
-                    background-position: 0 0
-                }
-                to {
-                    background-position: 60px 0
-                }
-            }
-
-            .\\[--w-modal-max-height\\:80\\%\\] {
-                --w-modal-max-height: 80%
-            }
-
-            .\\[--w-modal-width\\:640px\\] {
-                --w-modal-width: 640px
-            }
-
-            .focus\\:\\[--w-outline-offset\\:-2px\\]:focus {
-                --w-outline-offset: -2px
-            }
-
-            .backdrop-blur {
-                -webkit-backdrop-filter: blur(4px);
-                backdrop-filter: blur(4px)
-            }
-
-            .peer:checked ~ .peer-checked\\:before\\:bg-center:before {
-                background-position: center
-            }
-
-            .hover\\:bg-clip-padding:hover {
-                -webkit-background-clip: padding-box;
-                background-clip: padding-box
-            }
-
-            .bg-transparent, .group\\/steph:first-child .group-first\\/steph\\:bg-transparent, .group\\/steph:last-child .group-last\\/steph\\:bg-transparent {
-                background-color: transparent
-            }
-
-            .bg-\\[--w-black\\/25\\] {
-                background-color: rgba(var(--w-rgb-black), .25)
-            }
-
-            .bg-\\[--w-black\\/70\\], .bg-\\[var\\(--w-black\\)\\/70\\] {
-                background-color: rgba(var(--w-rgb-black), .7)
-            }
-
-            .bg-\\[--w-color-badge-info-background\\] {
-                background-color: var(--w-color-badge-info-background)
-            }
-
-            .bg-\\[--w-color-badge-negative-background\\] {
-                background-color: var(--w-color-badge-negative-background)
-            }
-
-            .bg-\\[--w-color-badge-neutral-background\\] {
-                background-color: var(--w-color-badge-neutral-background)
-            }
-
-            .bg-\\[--w-color-badge-positive-background\\] {
-                background-color: var(--w-color-badge-positive-background)
-            }
-
-            .bg-\\[--w-color-badge-sponsored-background\\] {
-                background-color: var(--w-color-badge-sponsored-background)
-            }
-
-            .bg-\\[--w-color-badge-warning-background\\] {
-                background-color: var(--w-color-badge-warning-background)
-            }
-
-            .bg-\\[--w-color-button-primary-background\\] {
-                background-color: var(--w-color-button-primary-background)
-            }
-
-            .bg-\\[--w-color-buttongroup-utility-background-selected\\] {
-                background-color: var(--w-color-buttongroup-utility-background-selected)
-            }
-
-            .bg-\\[--w-color-callout-background\\] {
-                background-color: var(--w-color-callout-background)
-            }
-
-            .bg-\\[--w-color-pill-suggestion-background\\] {
-                background-color: var(--w-color-pill-suggestion-background)
-            }
-
-            .bg-\\[--w-color-switch-track-background\\] {
-                background-color: var(--w-color-switch-track-background)
-            }
-
-            .bg-\\[--w-s-color-surface-elevated-100\\] {
-                background-color: var(--w-s-color-surface-elevated-100)
-            }
-
-            .bg-\\[--w-s-color-surface-elevated-300\\] {
-                background-color: var(--w-s-color-surface-elevated-300)
-            }
-
-            .bg-\\[--w-s-icon-selected\\] {
-                background-color: var(--w-s-icon-selected)
-            }
-
-            .group:hover .group-hover\\:bg-\\[--w-color-switch-track-background-hover\\] {
-                background-color: var(--w-color-switch-track-background-hover)
-            }
-
-            .hover\\:bg-\\[--w-color-button-pill-background-hover\\]:hover {
-                background-color: var(--w-color-button-pill-background-hover)
-            }
-
-            .hover\\:bg-\\[--w-color-button-primary-background-hover\\]:hover {
-                background-color: var(--w-color-button-primary-background-hover)
-            }
-
-            .hover\\:bg-\\[--w-color-buttongroup-utility-background-hover\\]:hover {
-                background-color: var(--w-color-buttongroup-utility-background-hover)
-            }
-
-            .hover\\:bg-\\[--w-color-pill-suggestion-background-hover\\]:hover {
-                background-color: var(--w-color-pill-suggestion-background-hover)
-            }
-
-            .hover\\:bg-\\[--w-s-icon-subtle\\]:hover {
-                background-color: var(--w-s-icon-subtle)
-            }
-
-            .hover\\:bg-\\[var\\(--w-black\\)\\/85\\]:hover {
-                background-color: rgba(var(--w-rgb-black), .85)
-            }
-
-            .active\\:bg-\\[--w-color-button-pill-background-active\\]:active {
-                background-color: var(--w-color-button-pill-background-active)
-            }
-
-            .active\\:bg-\\[--w-color-button-primary-background-active\\]:active {
-                background-color: var(--w-color-button-primary-background-active)
-            }
-
-            .active\\:bg-\\[--w-color-buttongroup-utility-background-selected\\]:active {
-                background-color: var(--w-color-buttongroup-utility-background-selected)
-            }
-
-            .active\\:bg-\\[--w-color-pill-suggestion-background-active\\]:active {
-                background-color: var(--w-color-pill-suggestion-background-active)
-            }
-
-            .active\\:bg-\\[var\\(--w-black\\)\\]:active {
-                background-color: var(--w-black)
-            }
-
-            .peer:checked ~ .peer-checked\\:before\\:bg-\\[url\\(var\\(--w-icon-toggle-checked\\)\\)\\]:before {
-                background-image: var(--w-icon-toggle-checked)
-            }
-
-            .appearance-none {
-                -moz-appearance: none;
-                appearance: none;
-                -webkit-appearance: none
-            }
-
-            .will-change-height {
-                will-change: height
-            }
-
-            .border, .border-1 {
-                border-width: 1px
-            }
-
-            .border-b {
-                border-bottom-width: 1px
-            }
-
-            .before\\:border:before {
-                border-width: 1px
-            }
-
-            .border-0 {
-                border-width: 0
-            }
-
-            .border-2 {
-                border-width: 2px
-            }
-
-            .border-b-0 {
-                border-bottom-width: 0
-            }
-
-            .border-b-4 {
-                border-bottom-width: 4px
-            }
-
-            .border-l-4 {
-                border-left-width: 4px
-            }
-
-            .border-r-0, .group:not(:last-of-type) .group-not-last-of-type\\:border-r-0 {
-                border-right-width: 0
-            }
-
-            .peer:checked ~ .peer-checked\\:before\\:border-\\[6\\]:before {
-                border-width: .6rem
-            }
-
-            .border-transparent {
-                border-color: transparent
-            }
-
-            .border-\\[--w-color-buttongroup-utility-border\\] {
-                border-color: var(--w-color-buttongroup-utility-border)
-            }
-
-            .border-\\[--w-color-callout-border\\] {
-                border-color: var(--w-color-callout-border)
-            }
-
-            .border-\\[--w-s-color-background-inverted\\] {
-                border-color: var(--w-s-color-background-inverted)
-            }
-
-            .border-\\[--w-s-color-surface-elevated-300\\] {
-                border-color: var(--w-s-color-surface-elevated-300)
-            }
-
-            .active\\:border-\\[--w-color-buttongroup-utility-border-selected\\]:active {
-                border-color: var(--w-color-buttongroup-utility-border-selected)
-            }
-
-            .divide-x > * + * {
-                --w-divide-x-reverse: 0;
-                border-left-width: calc(1px * calc(1 - var(--w-divide-x-reverse)));
-                border-right-width: calc(1px * var(--w-divide-x-reverse))
-            }
-
-            .divide-y > * + * {
-                --w-divide-y-reverse: 0;
-                border-top-width: calc(1px * calc(1 - var(--w-divide-y-reverse)));
-                border-bottom-width: calc(1px * var(--w-divide-y-reverse))
-            }
-
-            .rounded-4 {
-                border-radius: 4px
-            }
-
-            .rounded-8 {
-                border-radius: 8px
-            }
-
-            .rounded-full {
-                border-radius: 9999px
-            }
-
-            .before\\:rounded-2:before {
-                border-radius: 2px
-            }
-
-            .before\\:rounded-full:before {
-                border-radius: 9999px
-            }
-
-            .rounded-b-0 {
-                border-bottom-left-radius: 0;
-                border-bottom-right-radius: 0
-            }
-
-            .rounded-bl-0 {
-                border-bottom-left-radius: 0
-            }
-
-            .rounded-br-0 {
-                border-bottom-right-radius: 0
-            }
-
-            .rounded-l-0 {
-                border-top-left-radius: 0;
-                border-bottom-left-radius: 0
-            }
-
-            .rounded-l-full {
-                border-top-left-radius: 9999px;
-                border-bottom-left-radius: 9999px
-            }
-
-            .rounded-r-0 {
-                border-top-right-radius: 0;
-                border-bottom-right-radius: 0
-            }
-
-            .rounded-r-full {
-                border-top-right-radius: 9999px;
-                border-bottom-right-radius: 9999px
-            }
-
-            .rounded-tl-0 {
-                border-top-left-radius: 0
-            }
-
-            .rounded-tl-4 {
-                border-top-left-radius: 4px
-            }
-
-            .rounded-tr-0 {
-                border-top-right-radius: 0
-            }
-
-            .group:first-of-type .group-first-of-type\\:rounded-bl-8 {
-                border-bottom-left-radius: 8px
-            }
-
-            .group:first-of-type .group-first-of-type\\:rounded-tl-8 {
-                border-top-left-radius: 8px
-            }
-
-            .first\\:rounded-lb-4:first-child {
-                border-bottom-left-radius: 4px
-            }
-
-            .first\\:rounded-lt-4:first-child {
-                border-top-left-radius: 4px
-            }
-
-            .first\\:rounded-rt-4:first-child {
-                border-top-right-radius: 4px
-            }
-
-            .group:last-of-type .group-last-of-type\\:rounded-br-8 {
-                border-bottom-right-radius: 8px
-            }
-
-            .group:last-of-type .group-last-of-type\\:rounded-tr-8 {
-                border-top-right-radius: 8px
-            }
-
-            .last\\:rounded-lb-4:last-child {
-                border-bottom-left-radius: 4px
-            }
-
-            .last\\:rounded-rb-4:last-child {
-                border-bottom-right-radius: 4px
-            }
-
-            .last\\:rounded-rt-4:last-child {
-                border-top-right-radius: 4px
-            }
-
-            .caret-current {
-                caret-color: currentColor
-            }
-
-            .opacity-25 {
-                opacity: 25%
-            }
-
-            .block {
-                display: block
-            }
-
-            .before\\:block:before {
-                display: block
-            }
-
-            .inline-block {
-                display: inline-block
-            }
-
-            .inline {
-                display: inline
-            }
-
-            .flex, .open\\:flex[open] {
-                display: flex
-            }
-
-            .inline-flex {
-                display: inline-flex
-            }
-
-            .grid {
-                display: grid
-            }
-
-            .inline-grid {
-                display: inline-grid
-            }
-
-            .hidden, .group\\/stepv:last-child .group-last\\/stepv\\:hidden {
-                display: none
-            }
-
-            .before\\:hidden:before {
-                display: none
-            }
-
-            .hover\\:underline:hover {
-                text-decoration-line: underline
-            }
-
-            .focus\\:underline:focus {
-                text-decoration-line: underline
-            }
-
-            .focus-visible\\:underline:focus-visible {
-                text-decoration-line: underline
-            }
-
-            .active\\:underline:active {
-                text-decoration-line: underline
-            }
-
-            .hover\\:no-underline:hover {
-                text-decoration: none
-            }
-
-            .focus\\:no-underline:focus {
-                text-decoration: none
-            }
-
-            .active\\:no-underline:active {
-                text-decoration: none
-            }
-
-            .flex-1 {
-                flex: 1 1 0%
-            }
-
-            .shrink {
-                flex-shrink: 1
-            }
-
-            .shrink-0 {
-                flex-shrink: 0
-            }
-
-            .shrink-0\\! {
-                flex-shrink: 0 !important
-            }
-
-            .grow, .grow-1 {
-                flex-grow: 1
-            }
-
-            .basis-auto {
-                flex-basis: auto
-            }
-
-            .flex-col {
-                flex-direction: column
-            }
-
-            .focus-within\\:focusable:focus-within {
-                outline: 2px solid var(--w-s-color-border-focus);
-                outline-offset: var(--w-outline-offset, 1px)
-            }
-
-            .focusable:focus, .focusable:focus-visible {
-                outline: 2px solid var(--w-s-color-border-focus);
-                outline-offset: var(--w-outline-offset, 1px)
-            }
-
-            .focusable:not(:focus-visible) {
-                outline: none
-            }
-
-            .peer:focus ~ .peer-focus\\:focusable, .peer:focus-visible ~ .peer-focus\\:focusable {
-                outline: 2px solid var(--w-s-color-border-focus);
-                outline-offset: var(--w-outline-offset, 1px)
-            }
-
-            .peer:not(:focus-visible) ~ .peer-focus\\:focusable {
-                outline: none
-            }
-
-            .focusable-inset {
-                --w-outline-offset: -3px
-            }
-
-            .gap-12 {
-                gap: 1.2rem
-            }
-
-            .gap-8 {
-                gap: .8rem
-            }
-
-            .gap-x-16 {
-                column-gap: 1.6rem
-            }
-
-            .gap-y-16 {
-                row-gap: 1.6rem
-            }
-
-            .row-span-2 {
-                grid-row: span 2/span 2
-            }
-
-            .col-span-2 {
-                grid-column: span 2/span 2
-            }
-
-            .col-span-3 {
-                grid-column: span 3/span 3
-            }
-
-            .row-start-1 {
-                grid-row-start: 1
-            }
-
-            .row-start-2 {
-                grid-row-start: 2
-            }
-
-            .col-start-2 {
-                grid-column-start: 2
-            }
-
-            .auto-rows-auto {
-                grid-auto-rows: auto
-            }
-
-            .grid-flow-col {
-                grid-auto-flow: column
-            }
-
-            .grid-rows-\\[20px_auto\\] {
-                grid-template-rows:20px auto
-            }
-
-            .grid-rows-\\[auto_20px\\] {
-                grid-template-rows:auto 20px
-            }
-
-            .grid-cols-\\[1fr_20px_1fr\\] {
-                grid-template-columns:1fr 20px 1fr
-            }
-
-            .grid-cols-\\[1fr_20px\\] {
-                grid-template-columns:1fr 20px
-            }
-
-            .grid-cols-\\[20px_1fr\\] {
-                grid-template-columns:20px 1fr
-            }
-
-            .grid-cols-\\[auto_1fr_auto\\] {
-                grid-template-columns:auto 1fr auto
-            }
-
-            .grid-cols-1 {
-                grid-template-columns:repeat(1, minmax(0, 1fr))
-            }
-
-            .grid-cols-2 {
-                grid-template-columns:repeat(2, minmax(0, 1fr))
-            }
-
-            .grid-cols-3 {
-                grid-template-columns:repeat(3, minmax(0, 1fr))
-            }
-
-            .grid-cols-4 {
-                grid-template-columns:repeat(4, minmax(0, 1fr))
-            }
-
-            .grid-cols-5 {
-                grid-template-columns:repeat(5, minmax(0, 1fr))
-            }
-
-            .grid-cols-6 {
-                grid-template-columns:repeat(6, minmax(0, 1fr))
-            }
-
-            .grid-cols-7 {
-                grid-template-columns:repeat(7, minmax(0, 1fr))
-            }
-
-            .grid-cols-8 {
-                grid-template-columns:repeat(8, minmax(0, 1fr))
-            }
-
-            .grid-cols-9 {
-                grid-template-columns:repeat(9, minmax(0, 1fr))
-            }
-
-            .overflow-hidden {
-                overflow: hidden
-            }
-
-            .overflow-x-hidden {
-                overflow-x: hidden
-            }
-
-            .overflow-y-auto {
-                overflow-y: auto
-            }
-
-            .list-none {
-                list-style-type: none
-            }
-
-            .outline-\\[--w-s-color-border-negative\\]\\! {
-                outline-color: var(--w-s-color-border-negative) !important
-            }
-
-            .outline-none {
-                outline: 2px solid transparent;
-                outline-offset: 2px
-            }
-
-            .focus\\:outline-none:focus {
-                outline: 2px solid transparent;
-                outline-offset: 2px
-            }
-
-            .items-start {
-                align-items: flex-start
-            }
-
-            .items-end {
-                align-items: flex-end
-            }
-
-            .items-center {
-                align-items: center
-            }
-
-            .self-center {
-                align-self: center
-            }
-
-            .inset-0 {
-                top: 0rem;
-                right: 0rem;
-                bottom: 0rem;
-                left: 0rem
-            }
-
-            .-bottom-0 {
-                bottom: -0rem
-            }
-
-            .bottom-0 {
-                bottom: 0rem
-            }
-
-            .bottom-10 {
-                bottom: 1rem
-            }
-
-            .bottom-16 {
-                bottom: 1.6rem
-            }
-
-            .left-0 {
-                left: 0rem
-            }
-
-            .left-4 {
-                left: .4rem
-            }
-
-            .right-0 {
-                right: 0rem
-            }
-
-            .right-8 {
-                right: .8rem
-            }
-
-            .top-\\[1\\.92rem\\] {
-                top: 1.92rem
-            }
-
-            .top-0 {
-                top: 0rem
-            }
-
-            .top-20 {
-                top: 2rem
-            }
-
-            .top-4 {
-                top: .4rem
-            }
-
-            .top-8 {
-                top: .8rem
-            }
-
-            .before\\:bottom-0:before {
-                bottom: 0rem
-            }
-
-            .before\\:left-0:before {
-                left: 0rem
-            }
-
-            .before\\:right-0:before {
-                right: 0rem
-            }
-
-            .before\\:top-2:before {
-                top: .2rem
-            }
-
-            .-bottom-\\[8px\\] {
-                bottom: -8px
-            }
-
-            .-left-\\[8px\\] {
-                left: -8px
-            }
-
-            .-right-\\[8px\\] {
-                right: -8px
-            }
-
-            .-top-\\[8px\\] {
-                top: -8px
-            }
-
-            .top-\\[19px\\] {
-                top: 19px
-            }
-
-            .top-\\[30\\%\\] {
-                top: 30%
-            }
-
-            .justify-end {
-                justify-content: flex-end
-            }
-
-            .justify-center {
-                justify-content: center
-            }
-
-            .justify-between {
-                justify-content: space-between
-            }
-
-            .justify-items-center {
-                justify-items: center
-            }
-
-            .justify-self-start {
-                justify-self: start
-            }
-
-            .justify-self-end {
-                justify-self: end
-            }
-
-            .justify-self-center {
-                justify-self: center
-            }
-
-            .absolute {
-                position: absolute
-            }
-
-            .fixed {
-                position: fixed
-            }
-
-            .relative {
-                position: relative
-            }
-
-            .open\\:fixed[open] {
-                position: fixed
-            }
-
-            .before\\:absolute:before {
-                position: absolute
-            }
-
-            .z-10, .peer:checked ~ .peer-checked\\:z-10 {
-                z-index: 10
-            }
-
-            .z-30 {
-                z-index: 30
-            }
-
-            .z-50 {
-                z-index: 50
-            }
-
-            .hover\\:z-30:hover {
-                z-index: 30
-            }
-
-            .\\!s-bg-selected {
-                background-color: var(--w-s-color-background-selected) !important
-            }
-
-            .s-bg {
-                background-color: var(--w-s-color-background)
-            }
-
-            .s-bg-disabled {
-                background-color: var(--w-s-color-background-disabled)
-            }
-
-            .s-bg-disabled-subtle {
-                background-color: var(--w-s-color-background-disabled-subtle)
-            }
-
-            .s-bg-info-subtle {
-                background-color: var(--w-s-color-background-info-subtle)
-            }
-
-            .s-bg-inverted {
-                background-color: var(--w-s-color-background-inverted)
-            }
-
-            .s-bg-negative {
-                background-color: var(--w-s-color-background-negative)
-            }
-
-            .s-bg-negative-subtle {
-                background-color: var(--w-s-color-background-negative-subtle)
-            }
-
-            .s-bg-positive-subtle {
-                background-color: var(--w-s-color-background-positive-subtle)
-            }
-
-            .s-bg-primary, .peer:checked ~ .peer-checked\\:s-bg-primary {
-                background-color: var(--w-s-color-background-primary)
-            }
-
-            .s-bg-selected {
-                background-color: var(--w-s-color-background-selected)
-            }
-
-            .s-bg-subtle {
-                background-color: var(--w-s-color-background-subtle)
-            }
-
-            .s-bg-warning-subtle {
-                background-color: var(--w-s-color-background-warning-subtle)
-            }
-
-            .peer:checked:hover ~ .peer-checked\\:peer-hover\\:before\\:s-bg-negative-hover:before {
-                background-color: var(--w-s-color-background-negative-hover)
-            }
-
-            .peer:checked:hover ~ .peer-checked\\:peer-hover\\:before\\:s-bg-primary-hover:before {
-                background-color: var(--w-s-color-background-primary-hover)
-            }
-
-            .peer:checked ~ .peer-checked\\:before\\:s-bg-disabled:before {
-                background-color: var(--w-s-color-background-disabled)
-            }
-
-            .peer:checked ~ .peer-checked\\:before\\:s-bg-negative:before {
-                background-color: var(--w-s-color-background-negative)
-            }
-
-            .peer:checked ~ .peer-checked\\:before\\:s-bg-primary:before {
-                background-color: var(--w-s-color-background-primary)
-            }
-
-            .peer:indeterminate ~ .peer-indeterminate\\:before\\:s-bg-disabled:before {
-                background-color: var(--w-s-color-background-disabled)
-            }
-
-            .peer:indeterminate ~ .peer-indeterminate\\:before\\:s-bg-negative:before {
-                background-color: var(--w-s-color-background-negative)
-            }
-
-            .peer:indeterminate ~ .peer-indeterminate\\:before\\:s-bg-primary:before {
-                background-color: var(--w-s-color-background-primary)
-            }
-
-            .peer:indeterminate ~ .peer-indeterminate\\:hover\\:before\\:s-bg-negative-hover:hover:before {
-                background-color: var(--w-s-color-background-negative-hover)
-            }
-
-            .peer:indeterminate ~ .peer-indeterminate\\:hover\\:before\\:s-bg-primary-hover:hover:before {
-                background-color: var(--w-s-color-background-primary-hover)
-            }
-
-            .\\!hover\\:s-bg-selected-hover:hover {
-                background-color: var(--w-s-color-background-selected-hover) !important
-            }
-
-            .group:hover .group-hover\\:s-bg-primary-hover {
-                background-color: var(--w-s-color-background-primary-hover)
-            }
-
-            .hover\\:before\\:s-bg-hover:hover:before {
-                background-color: var(--w-s-color-background-hover)
-            }
-
-            .hover\\:before\\:s-bg-negative-subtle-hover:hover:before {
-                background-color: var(--w-s-color-background-negative-subtle-hover)
-            }
-
-            .hover\\:s-bg-hover:hover {
-                background-color: var(--w-s-color-background-hover)
-            }
-
-            .hover\\:s-bg-negative-hover:hover {
-                background-color: var(--w-s-color-background-negative-hover)
-            }
-
-            .hover\\:s-bg-negative-subtle-hover:hover {
-                background-color: var(--w-s-color-background-negative-subtle-hover)
-            }
-
-            .hover\\:s-bg-primary-hover:hover {
-                background-color: var(--w-s-color-background-primary-hover)
-            }
-
-            .hover\\:s-bg-selected-hover:hover {
-                background-color: var(--w-s-color-background-selected-hover)
-            }
-
-            .peer:hover:not(:checked) ~ .peer-hover\\:peer-not-checked\\:s-bg-hover {
-                background-color: var(--w-s-color-background-hover)
-            }
-
-            .peer:hover ~ .peer-hover\\:before\\:s-bg-hover:before {
-                background-color: var(--w-s-color-background-hover)
-            }
-
-            .peer:hover ~ .peer-hover\\:before\\:s-bg-negative-subtle:before {
-                background-color: var(--w-s-color-background-negative-subtle)
-            }
-
-            .focus\\:s-bg-primary-hover:focus {
-                background-color: var(--w-s-color-background-primary-hover)
-            }
-
-            .\\!active\\:s-bg-selected-active:active {
-                background-color: var(--w-s-color-background-selected-active) !important
-            }
-
-            .active\\:s-bg-active:active {
-                background-color: var(--w-s-color-background-active)
-            }
-
-            .active\\:s-bg-negative-active:active {
-                background-color: var(--w-s-color-background-negative-active)
-            }
-
-            .active\\:s-bg-negative-subtle-active:active {
-                background-color: var(--w-s-color-background-negative-subtle-active)
-            }
-
-            .active\\:s-bg-primary-active:active {
-                background-color: var(--w-s-color-background-primary-active)
-            }
-
-            .active\\:s-bg-selected-active:active {
-                background-color: var(--w-s-color-background-selected-active)
-            }
-
-            .before\\:s-bg-disabled-subtle:before {
-                background-color: var(--w-s-color-background-disabled-subtle)
-            }
-
-            .before\\:s-bg:before {
-                background-color: var(--w-s-color-background)
-            }
-
-            .s-text {
-                color: var(--w-s-color-text)
-            }
-
-            .s-text-disabled {
-                color: var(--w-s-color-text-disabled)
-            }
-
-            .s-text-inverted, .peer:checked ~ .peer-checked\\:s-text-inverted {
-                color: var(--w-s-color-text-inverted)
-            }
-
-            .s-text-inverted-static {
-                color: var(--w-s-color-text-inverted-static)
-            }
-
-            .s-text-link {
-                color: var(--w-s-color-text-link)
-            }
-
-            .s-text-negative {
-                color: var(--w-s-color-text-negative)
-            }
-
-            .s-text-subtle {
-                color: var(--w-s-color-text-subtle)
-            }
-
-            .hover\\:s-text-link:hover {
-                color: var(--w-s-color-text-link)
-            }
-
-            .active\\:s-text:active {
-                color: var(--w-s-color-text)
-            }
-
-            .placeholder\\:s-text-placeholder::placeholder {
-                color: var(--w-s-color-text-placeholder)
-            }
-
-            .s-icon {
-                color: var(--w-s-color-icon)
-            }
-
-            .s-icon-info {
-                color: var(--w-s-color-icon-info)
-            }
-
-            .s-icon-inverted {
-                color: var(--w-s-color-icon-inverted)
-            }
-
-            .s-icon-negative {
-                color: var(--w-s-color-icon-negative)
-            }
-
-            .s-icon-positive {
-                color: var(--w-s-color-icon-positive)
-            }
-
-            .s-icon-warning {
-                color: var(--w-s-color-icon-warning)
-            }
-
-            .hover\\:s-icon-hover:hover {
-                color: var(--w-s-color-icon-hover)
-            }
-
-            .active\\:s-icon-active:active {
-                color: var(--w-s-color-icon-active)
-            }
-
-            .before\\:s-icon-inverted:before {
-                color: var(--w-s-color-icon-inverted)
-            }
-
-            .s-border {
-                border-color: var(--w-s-color-border)
-            }
-
-            .s-border-disabled {
-                border-color: var(--w-s-color-border-disabled)
-            }
-
-            .s-border-info-subtle {
-                border-color: var(--w-s-color-border-info-subtle)
-            }
-
-            .s-border-l-info {
-                border-left-color: var(--w-s-color-border-info)
-            }
-
-            .s-border-l-negative {
-                border-left-color: var(--w-s-color-border-negative)
-            }
-
-            .s-border-l-positive {
-                border-left-color: var(--w-s-color-border-positive)
-            }
-
-            .s-border-l-warning {
-                border-left-color: var(--w-s-color-border-warning)
-            }
-
-            .s-border-negative {
-                border-color: var(--w-s-color-border-negative)
-            }
-
-            .s-border-negative-subtle {
-                border-color: var(--w-s-color-border-negative-subtle)
-            }
-
-            .s-border-positive-subtle {
-                border-color: var(--w-s-color-border-positive-subtle)
-            }
-
-            .s-border-primary, .peer:checked ~ .peer-checked\\:s-border-primary {
-                border-color: var(--w-s-color-border-primary)
-            }
-
-            .s-border-selected {
-                border-color: var(--w-s-color-border-selected)
-            }
-
-            .s-border-warning-subtle {
-                border-color: var(--w-s-color-border-warning-subtle)
-            }
-
-            .peer:checked:hover ~ .peer-checked\\:peer-hover\\:before\\:s-border-negative-hover:before {
-                border-color: var(--w-s-color-border-negative-hover)
-            }
-
-            .peer:checked:hover ~ .peer-checked\\:peer-hover\\:before\\:s-border-primary-hover:before {
-                border-color: var(--w-s-color-border-primary-hover)
-            }
-
-            .peer:checked:hover ~ .peer-checked\\:peer-hover\\:before\\:s-border-selected-hover:before {
-                border-color: var(--w-s-color-border-selected-hover)
-            }
-
-            .peer:checked ~ .peer-checked\\:before\\:s-border-disabled:before {
-                border-color: var(--w-s-color-border-disabled)
-            }
-
-            .peer:checked ~ .peer-checked\\:before\\:s-border-negative:before {
-                border-color: var(--w-s-color-border-negative)
-            }
-
-            .peer:checked ~ .peer-checked\\:before\\:s-border-primary:before {
-                border-color: var(--w-s-color-border-primary)
-            }
-
-            .peer:checked ~ .peer-checked\\:before\\:s-border-selected:before {
-                border-color: var(--w-s-color-border-selected)
-            }
-
-            .peer:indeterminate ~ .peer-indeterminate\\:before\\:s-border-disabled:before {
-                border-color: var(--w-s-color-border-disabled)
-            }
-
-            .peer:indeterminate ~ .peer-indeterminate\\:before\\:s-border-negative:before {
-                border-color: var(--w-s-color-border-negative)
-            }
-
-            .peer:indeterminate ~ .peer-indeterminate\\:before\\:s-border-primary:before {
-                border-color: var(--w-s-color-border-primary)
-            }
-
-            .peer:indeterminate ~ .peer-indeterminate\\:hover\\:before\\:s-border-negative-hover:hover:before {
-                border-color: var(--w-s-color-border-negative-hover)
-            }
-
-            .peer:indeterminate ~ .peer-indeterminate\\:hover\\:before\\:s-border-primary-hover:hover:before {
-                border-color: var(--w-s-color-border-primary-hover)
-            }
-
-            .group:hover .group-hover\\:s-border-selected-hover {
-                border-color: var(--w-s-color-border-selected-hover)
-            }
-
-            .hover\\:before\\:s-border-negative-hover:hover:before {
-                border-color: var(--w-s-color-border-negative-hover)
-            }
-
-            .hover\\:before\\:s-border-primary:hover:before {
-                border-color: var(--w-s-color-border-primary)
-            }
-
-            .hover\\:s-border-disabled:hover {
-                border-color: var(--w-s-color-border-disabled)
-            }
-
-            .hover\\:s-border-hover:hover {
-                border-color: var(--w-s-color-border-hover)
-            }
-
-            .hover\\:s-border-negative-hover:hover {
-                border-color: var(--w-s-color-border-negative-hover)
-            }
-
-            .hover\\:s-border-primary-hover:hover {
-                border-color: var(--w-s-color-border-primary-hover)
-            }
-
-            .hover\\:s-border-primary:hover {
-                border-color: var(--w-s-color-border-primary)
-            }
-
-            .hover\\:s-border-selected-hover:hover {
-                border-color: var(--w-s-color-border-selected-hover)
-            }
-
-            .peer:hover ~ .peer-hover\\:before\\:s-border-negative-hover:before {
-                border-color: var(--w-s-color-border-negative-hover)
-            }
-
-            .peer:hover ~ .peer-hover\\:before\\:s-border-primary:before {
-                border-color: var(--w-s-color-border-primary)
-            }
-
-            .focus\\:s-border-primary-hover:focus {
-                border-color: var(--w-s-color-border-primary-hover)
-            }
-
-            .active\\:s-border-active:active {
-                border-color: var(--w-s-color-border-active)
-            }
-
-            .active\\:s-border-disabled:active {
-                border-color: var(--w-s-color-border-disabled)
-            }
-
-            .active\\:s-border-primary-active:active {
-                border-color: var(--w-s-color-border-primary-active)
-            }
-
-            .active\\:s-border-selected-active:active {
-                border-color: var(--w-s-color-border-selected-active)
-            }
-
-            .active\\:s-border-selected:active {
-                border-color: var(--w-s-color-border-selected)
-            }
-
-            .group:active .group-active\\:s-border-active {
-                border-color: var(--w-s-color-border-active)
-            }
-
-            .group:active .group-active\\:s-border-selected-active {
-                border-color: var(--w-s-color-border-selected-active)
-            }
-
-            .before\\:s-border-disabled:before {
-                border-color: var(--w-s-color-border-disabled)
-            }
-
-            .before\\:s-border-negative:before {
-                border-color: var(--w-s-color-border-negative)
-            }
-
-            .s-surface-sunken {
-                background-color: var(--w-s-color-surface-sunken)
-            }
-
-            .s-surface-elevated-200 {
-                background-color: var(--w-s-color-surface-elevated-200);
-                box-shadow: var(--w-s-shadow-surface-elevated-200)
-            }
-
-            .hover\\:s-surface-elevated-200-hover:hover {
-                background-color: var(--w-s-color-surface-elevated-200-hover);
-                box-shadow: var(--w-s-shadow-surface-elevated-200-hover)
-            }
-
-            .active\\:s-surface-elevated-200-active:active {
-                background-color: var(--w-s-color-surface-elevated-200-active);
-                box-shadow: var(--w-s-shadow-surface-elevated-200-active)
-            }
-
-            .drop-shadow-m {
-                filter: drop-shadow(rgba(64, 64, 64, .24) 0 3px 8px) drop-shadow(rgba(64, 64, 64, .16) 0 3px 6px)
-            }
-
-            .shadow-m {
-                box-shadow: var(--w-shadow-m)
-            }
-
-            .shadow-s {
-                box-shadow: var(--w-shadow-s)
-            }
-
-            .shadow-\\[--w-shadow-slider\\] {
-                box-shadow: var(--w-shadow-slider)
-            }
-
-            .hover\\:shadow-\\[--w-shadow-slider-handle-hover\\]:hover {
-                box-shadow: var(--w-shadow-slider-handle-hover)
-            }
-
-            .focus\\:shadow-\\[--w-shadow-slider-handle-hover\\]:focus {
-                box-shadow: var(--w-shadow-slider-handle-hover)
-            }
-
-            .active\\:shadow-\\[--w-shadow-slider-handle-active\\]:active {
-                box-shadow: var(--w-shadow-slider-handle-active)
-            }
-
-            .h-0 {
-                height: 0rem
-            }
-
-            .h-16 {
-                height: 1.6rem
-            }
-
-            .h-2 {
-                height: .2rem
-            }
-
-            .h-20 {
-                height: 2rem
-            }
-
-            .h-24 {
-                height: 2.4rem
-            }
-
-            .h-4 {
-                height: .4rem
-            }
-
-            .h-44 {
-                height: 4.4rem
-            }
-
-            .h-6 {
-                height: .6rem
-            }
-
-            .h-8 {
-                height: .8rem
-            }
-
-            .h-full {
-                height: 100%
-            }
-
-            .h-unset {
-                height: unset
-            }
-
-            .max-h-unset {
-                max-height: unset
-            }
-
-            .max-w-full {
-                max-width: 100%
-            }
-
-            .max-w-max {
-                max-width: max-content
-            }
-
-            .max-w-unset {
-                max-width: unset
-            }
-
-            .min-h-32 {
-                min-height: 3.2rem
-            }
-
-            .min-h-40 {
-                min-height: 4rem
-            }
-
-            .min-w-16 {
-                min-width: 1.6rem
-            }
-
-            .min-w-32 {
-                min-width: 3.2rem
-            }
-
-            .w-16 {
-                width: 1.6rem
-            }
-
-            .w-2 {
-                width: .2rem
-            }
-
-            .w-20 {
-                width: 2rem
-            }
-
-            .w-24 {
-                width: 2.4rem
-            }
-
-            .w-32 {
-                width: 3.2rem
-            }
-
-            .w-40 {
-                width: 4rem
-            }
-
-            .w-44 {
-                width: 4.4rem
-            }
-
-            .w-8 {
-                width: .8rem
-            }
-
-            .w-full {
-                width: 100%
-            }
-
-            .w-max {
-                width: max-content
-            }
-
-            .w-unset {
-                width: unset
-            }
-
-            .before\\:h-20:before {
-                height: 2rem
-            }
-
-            .before\\:h-full:before {
-                height: 100%
-            }
-
-            .before\\:w-20:before {
-                width: 2rem
-            }
-
-            .before\\:w-32:before {
-                width: 3.2rem
-            }
-
-            .h-\\[--w-modal-height\\] {
-                height: var(--w-modal-height)
-            }
-
-            .h-\\[14px\\] {
-                height: 14px
-            }
-
-            .h-\\[16px\\] {
-                height: 16px
-            }
-
-            .max-h-\\[--w-modal-max-height\\] {
-                max-height: var(--w-modal-max-height)
-            }
-
-            .min-h-\\[--w-modal-min-height\\] {
-                min-height: var(--w-modal-min-height)
-            }
-
-            .min-h-\\[32px\\] {
-                min-height: 32px
-            }
-
-            .min-h-\\[40px\\] {
-                min-height: 40px
-            }
-
-            .min-h-\\[42\\] {
-                min-height: 4.2rem
-            }
-
-            .min-h-\\[44px\\] {
-                min-height: 44px
-            }
-
-            .min-w-\\[32px\\] {
-                min-width: 32px
-            }
-
-            .min-w-\\[40px\\] {
-                min-width: 40px
-            }
-
-            .min-w-\\[44px\\] {
-                min-width: 44px
-            }
-
-            .w-\\[--w-modal-width\\] {
-                width: var(--w-modal-width)
-            }
-
-            .w-\\[14px\\] {
-                width: 14px
-            }
-
-            .w-\\[16px\\] {
-                width: 16px
-            }
-
-            .space-x-8 > :not([hidden]) ~ :not([hidden]) {
-                --w-space-x-reverse: 0;
-                margin-left: calc(.8rem * calc(1 - var(--w-space-x-reverse)));
-                margin-right: calc(.8rem * var(--w-space-x-reverse))
-            }
-
-            .space-y-16 > :not([hidden]) ~ :not([hidden]) {
-                --w-space-y-reverse: 0;
-                margin-top: calc(1.6rem * calc(1 - var(--w-space-y-reverse)));
-                margin-bottom: calc(1.6rem * var(--w-space-y-reverse))
-            }
-
-            .m-0 {
-                margin: 0rem
-            }
-
-            .m-auto {
-                margin: auto
-            }
-
-            .-mx-16 {
-                margin-left: -1.6rem;
-                margin-right: -1.6rem
-            }
-
-            .mx-0 {
-                margin-left: 0rem;
-                margin-right: 0rem
-            }
-
-            .mx-8 {
-                margin-left: .8rem;
-                margin-right: .8rem
-            }
-
-            .mx-auto {
-                margin-left: auto;
-                margin-right: auto
-            }
-
-            .-mb-1 {
-                margin-bottom: -.1rem
-            }
-
-            .-ml-8 {
-                margin-left: -.8rem
-            }
-
-            .-mr-1 {
-                margin-right: -.1rem
-            }
-
-            .-mr-8 {
-                margin-right: -.8rem
-            }
-
-            .-mt-2 {
-                margin-top: -.2rem
-            }
-
-            .-mt-4 {
-                margin-top: -.4rem
-            }
-
-            .last-child\\:mb-0 > :last-child, .mb-0 {
-                margin-bottom: 0rem
-            }
-
-            .mb-32 {
-                margin-bottom: 3.2rem
-            }
-
-            .ml-8 {
-                margin-left: .8rem
-            }
-
-            .ml-auto {
-                margin-left: auto
-            }
-
-            .mr-8 {
-                margin-right: .8rem
-            }
-
-            .mt-16 {
-                margin-top: 1.6rem
-            }
-
-            .mt-4 {
-                margin-top: .4rem
-            }
-
-            .group:not(:first-child) .group-not-first\\:-ml-2 {
-                margin-left: -.2rem
-            }
-
-            .last\\:mb-0:last-child {
-                margin-bottom: 0rem
-            }
-
-            .last\\:mr-0:last-child {
-                margin-right: 0rem
-            }
-
-            .m-\\[8px\\] {
-                margin: 8px
-            }
-
-            .p-0 {
-                padding: 0rem
-            }
-
-            .p-16 {
-                padding: 1.6rem
-            }
-
-            .p-4 {
-                padding: .4rem
-            }
-
-            .p-8 {
-                padding: .8rem
-            }
-
-            .px-0 {
-                padding-left: 0rem;
-                padding-right: 0rem
-            }
-
-            .px-1 {
-                padding-left: .1rem;
-                padding-right: .1rem
-            }
-
-            .px-12 {
-                padding-left: 1.2rem;
-                padding-right: 1.2rem
-            }
-
-            .px-14 {
-                padding-left: 1.4rem;
-                padding-right: 1.4rem
-            }
-
-            .px-16 {
-                padding-left: 1.6rem;
-                padding-right: 1.6rem
-            }
-
-            .px-8 {
-                padding-left: .8rem;
-                padding-right: .8rem
-            }
-
-            .py-0 {
-                padding-top: 0rem;
-                padding-bottom: 0rem
-            }
-
-            .py-1 {
-                padding-top: .1rem;
-                padding-bottom: .1rem
-            }
-
-            .py-10 {
-                padding-top: 1rem;
-                padding-bottom: 1rem
-            }
-
-            .py-12 {
-                padding-top: 1.2rem;
-                padding-bottom: 1.2rem
-            }
-
-            .py-2 {
-                padding-top: .2rem;
-                padding-bottom: .2rem
-            }
-
-            .py-4 {
-                padding-top: .4rem;
-                padding-bottom: .4rem
-            }
-
-            .py-6 {
-                padding-top: .6rem;
-                padding-bottom: .6rem
-            }
-
-            .py-8 {
-                padding-top: .8rem;
-                padding-bottom: .8rem
-            }
-
-            .pb-0 {
-                padding-bottom: 0rem
-            }
-
-            .pb-32 {
-                padding-bottom: 3.2rem
-            }
-
-            .pb-4 {
-                padding-bottom: .4rem
-            }
-
-            .pb-8 {
-                padding-bottom: .8rem
-            }
-
-            .pl-0 {
-                padding-left: 0rem
-            }
-
-            .pl-1 {
-                padding-left: .1rem
-            }
-
-            .pl-12 {
-                padding-left: 1.2rem
-            }
-
-            .pl-28 {
-                padding-left: 2.8rem
-            }
-
-            .pl-4 {
-                padding-left: .4rem
-            }
-
-            .pl-8 {
-                padding-left: .8rem
-            }
-
-            .pr-12 {
-                padding-right: 1.2rem
-            }
-
-            .pr-14 {
-                padding-right: 1.4rem
-            }
-
-            .pr-2 {
-                padding-right: .2rem
-            }
-
-            .pr-32 {
-                padding-right: 3.2rem
-            }
-
-            .pr-40 {
-                padding-right: 4rem
-            }
-
-            .pt-0 {
-                padding-top: 0rem
-            }
-
-            .pt-1 {
-                padding-top: .1rem
-            }
-
-            .pt-16 {
-                padding-top: 1.6rem
-            }
-
-            .pt-24 {
-                padding-top: 2.4rem
-            }
-
-            .pt-8 {
-                padding-top: .8rem
-            }
-
-            .group\\/step:last-child .group-last\\/step\\:last\\:pb-0:last-child {
-                padding-bottom: 0rem
-            }
-
-            .last\\:pb-1:last-child {
-                padding-bottom: .1rem
-            }
-
-            .last\\:pr-1:last-child {
-                padding-right: .1rem
-            }
-
-            .p-\\[8px\\] {
-                padding: 8px
-            }
-
-            .px-\\[15px\\] {
-                padding-left: 15px;
-                padding-right: 15px
-            }
-
-            .px-\\[8px\\] {
-                padding-left: 8px;
-                padding-right: 8px
-            }
-
-            .py-\\[11px\\] {
-                padding-top: 11px;
-                padding-bottom: 11px
-            }
-
-            .py-\\[5px\\] {
-                padding-top: 5px;
-                padding-bottom: 5px
-            }
-
-            .py-\\[7px\\] {
-                padding-top: 7px;
-                padding-bottom: 7px
-            }
-
-            .pl-\\[var\\(--w-prefix-width\\,_40px\\)\\] {
-                padding-left: var(--w-prefix-width, 40px)
-            }
-
-            .invisible {
-                visibility: hidden
-            }
-
-            .backface-hidden {
-                backface-visibility: hidden
-            }
-
-            .break-words {
-                overflow-wrap: break-word
-            }
-
-            .before\\:content-\\[\\"–\\"\\]:before {
-                content: "–"
-            }
-
-            .before\\:content-\\[\\"\\"\\]:before {
-                content: ""
-            }
-
-            .cursor-default {
-                cursor: default
-            }
-
-            .cursor-pointer {
-                cursor: pointer
-            }
-
-            .antialiased {
-                -webkit-font-smoothing: antialiased;
-                -moz-osx-font-smoothing: grayscale;
-                font-smoothing: grayscale
-            }
-
-            .font-bold {
-                font-weight: 700
-            }
-
-            .before\\:font-bold:before {
-                font-weight: 700
-            }
-
-            .font-normal {
-                font-weight: 400
-            }
-
-            .pointer-events-auto {
-                pointer-events: auto
-            }
-
-            .pointer-events-none {
-                pointer-events: none
-            }
-
-            .before\\:pointer-events-none:before {
-                pointer-events: none
-            }
-
-            .pb-safe-\\[32\\] {
-                padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px))
-            }
-
-            .sr-only {
-                position: absolute;
-                width: 1px;
-                height: 1px;
-                padding: 0;
-                margin: -1px;
-                overflow: hidden;
-                clip: rect(0, 0, 0, 0);
-                white-space: nowrap;
-                border-width: 0
-            }
-
-            .touch-pan-y {
-                touch-action: pan-y
-            }
-
-            .select-none {
-                -webkit-user-select: none;
-                user-select: none
-            }
-
-            .translate-x-20 {
-                --w-translate-x: 2rem;
-                transform: translate(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotate(var(--w-rotate-z)) skew(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))
-            }
-
-            .translate-z-0 {
-                --w-translate-z: 0rem;
-                transform: translate(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotate(var(--w-rotate-z)) skew(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))
-            }
-
-            .-rotate-180, .part-\\[w-icon-chevron-down-16-part\\]\\:-rotate-180::part(w-icon-chevron-down-16-part) {
-                --w-rotate-x: 0;
-                --w-rotate-y: 0;
-                --w-rotate-z: 0;
-                --w-rotate: -180deg;
-                transform: translate(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotate(var(--w-rotate-z)) skew(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))
-            }
-
-            .part-\\[w-icon-chevron-up-16-part\\]\\:rotate-180::part(w-icon-chevron-up-16-part), .rotate-180 {
-                --w-rotate-x: 0;
-                --w-rotate-y: 0;
-                --w-rotate-z: 0;
-                --w-rotate: 180deg;
-                transform: translate(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotate(var(--w-rotate-z)) skew(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))
-            }
-
-            .rotate-90 {
-                --w-rotate-x: 0;
-                --w-rotate-y: 0;
-                --w-rotate-z: 0;
-                --w-rotate: 90deg;
-                transform: translate(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotate(var(--w-rotate-z)) skew(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))
-            }
-
-            .part-\\[w-icon-chevron-down-16-part\\]\\:transform::part(w-icon-chevron-down-16-part), .part-\\[w-icon-chevron-up-16-part\\]\\:transform::part(w-icon-chevron-up-16-part), .transform {
-                transform: translate(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotate(var(--w-rotate-z)) skew(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))
-            }
-
-            .part-\\[w-icon-chevron-down-16-part\\]\\:transform-gpu::part(w-icon-chevron-down-16-part), .part-\\[w-icon-chevron-up-16-part\\]\\:transform-gpu::part(w-icon-chevron-up-16-part), .transform-gpu {
-                transform: translate3d(var(--w-translate-x), var(--w-translate-y), var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotate(var(--w-rotate-z)) skew(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))
-            }
-
-            .part-\\[w-icon-chevron-down-16-part\\]\\:transition-transform::part(w-icon-chevron-down-16-part), .part-\\[w-icon-chevron-up-16-part\\]\\:transition-transform::part(w-icon-chevron-up-16-part), .transition-transform {
-                transition-property: transform;
-                transition-timing-function: cubic-bezier(.4, 0, .2, 1);
-                transition-duration: .15s
-            }
-
-            .transition-300 {
-                transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-                transition-timing-function: cubic-bezier(.4, 0, .2, 1);
-                transition-duration: .3s
-            }
-
-            .transition-all {
-                transition-property: all;
-                transition-timing-function: cubic-bezier(.4, 0, .2, 1);
-                transition-duration: .15s
-            }
-
-            .transition-colors {
-                transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-                transition-timing-function: cubic-bezier(.4, 0, .2, 1);
-                transition-duration: .15s
-            }
-
-            .transition-shadow {
-                transition-property: box-shadow;
-                transition-timing-function: cubic-bezier(.4, 0, .2, 1);
-                transition-duration: .15s
-            }
-
-            .before\\:transition-all:before {
-                transition-property: all;
-                transition-timing-function: cubic-bezier(.4, 0, .2, 1);
-                transition-duration: .15s
-            }
-
-            .duration-300 {
-                transition-duration: .3s
-            }
-
-            .ease-in-out, .part-\\[w-icon-chevron-down-16-part\\]\\:ease-in-out::part(w-icon-chevron-down-16-part), .part-\\[w-icon-chevron-up-16-part\\]\\:ease-in-out::part(w-icon-chevron-up-16-part) {
-                transition-timing-function: cubic-bezier(.4, 0, .2, 1)
-            }
-
-            .text-m {
-                font-size: var(--w-font-size-m);
-                line-height: var(--w-line-height-m)
-            }
-
-            .text-s {
-                font-size: var(--w-font-size-s);
-                line-height: var(--w-line-height-s)
-            }
-
-            .text-xs {
-                font-size: var(--w-font-size-xs);
-                line-height: var(--w-line-height-xs)
-            }
-
-            .leading-m {
-                line-height: var(--w-line-height-m)
-            }
-
-            .before\\:leading-xs:before {
-                line-height: var(--w-line-height-xs)
-            }
-
-            .leading-\\[24\\] {
-                line-height: 2.4rem
-            }
-
-            @media (max-width: 479.9px) {
-                .lt-sm\\:rounded-b-0 {
-                    border-bottom-left-radius: 0;
-                    border-bottom-right-radius: 0
-                }
-            }
-            @media (min-width: 480px) {
-                .sm\\:border-b-0 {
-                    border-bottom-width: 0
-                }
-
-                .sm\\:rounded-8 {
-                    border-radius: 8px
-                }
-
-                .sm\\:rounded-b-8 {
-                    border-bottom-left-radius: 8px;
-                    border-bottom-right-radius: 8px
-                }
-
-                .sm\\:gap-16 {
-                    gap: 1.6rem
-                }
-
-                .sm\\:place-content-center {
-                    place-content: center
-                }
-
-                .sm\\:place-items-center {
-                    place-items: center
-                }
-
-                .sm\\:h-24 {
-                    height: 2.4rem
-                }
-
-                .sm\\:min-h-48 {
-                    min-height: 4.8rem
-                }
-
-                .sm\\:w-24 {
-                    width: 2.4rem
-                }
-
-                .sm\\:min-h-\\[32px\\] {
-                    min-height: 32px
-                }
-
-                .sm\\:min-h-\\[44px\\] {
-                    min-height: 44px
-                }
-
-                .sm\\:min-h-\\[45\\] {
-                    min-height: 4.5rem
-                }
-
-                .sm\\:min-w-\\[32px\\] {
-                    min-width: 32px
-                }
-
-                .sm\\:min-w-\\[44px\\] {
-                    min-width: 44px
-                }
-
-                .sm\\:mx-0 {
-                    margin-left: 0rem;
-                    margin-right: 0rem
-                }
-
-                .sm\\:mx-16 {
-                    margin-left: 1.6rem;
-                    margin-right: 1.6rem
-                }
-
-                .sm\\:-ml-12 {
-                    margin-left: -1.2rem
-                }
-
-                .sm\\:-mr-12 {
-                    margin-right: -1.2rem
-                }
-
-                .sm\\:-mt-8 {
-                    margin-top: -.8rem
-                }
-
-                .sm\\:px-32 {
-                    padding-left: 3.2rem;
-                    padding-right: 3.2rem
-                }
-
-                .sm\\:py-0 {
-                    padding-top: 0rem;
-                    padding-bottom: 0rem
-                }
-
-                .sm\\:pb-32 {
-                    padding-bottom: 3.2rem
-                }
-
-                .sm\\:pt-24 {
-                    padding-top: 2.4rem
-                }
-
-                .sm\\:pt-32 {
-                    padding-top: 3.2rem
-                }
-            }
-            @media (min-width: 768px) {
-                .md\\:block {
-                    display: block
-                }
-
-                .md\\:hidden {
-                    display: none
-                }
-            }
-        `;import{css as K}from"lit";var N=K`
-  [part~='label'] {
-    display: block;
-    font-size: var(--w-font-size-m);
-    line-height: var(--w-line-height-m);
-    user-select: none;
-    cursor: pointer;
-  }
-  .wrapper {
-    display: grid;
-    grid-template-columns: 2rem max-content;
-    gap: 8px;
-  }
-  .hide-toggle {
-    position: absolute;
-    padding: 0;
-    margin: 0;
-    opacity: 0;
-    pointer-events: none;
-    inset: 0;
-  }
-  .control {
-    display: block;
-    border-width: 1px;
-    transition-property: all;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
-    cursor: pointer;
-    appearance: none;
-    user-select: none;
-    flex-shrink: 0;
-    height: 2rem;
-    width: 2rem;
-    background-color: var(--w-s-color-background);
-    border-color: var(--w-s-color-border-strong);
-    color: var(--w-s-color-icon-inverted);
-    font-weight: 700;
-    text-align: center;
-    line-height: var(--w-line-height-xs);
-    font-size: var(--w-font-size-m);
-  }
-  .checkbox {
-    position: relative;
-  }
-  :host([type='checkbox']) .control {
-    border-radius: 4px;
-  }
-  .checkbox:has(:checked, :indeterminate),
-  :host([type='checkbox'][checked]) .control,
-  :host([type='checkbox'][indeterminate]) .control {
-    background-color: var(--w-s-color-background-primary);
-    border-color: var(--w-s-color-border-primary);
-  }
-  .checkbox:has(:checked),
-  :host([type='checkbox'][checked]) .control {
-    background-image: var(--w-icon-toggle-checked);
-    background-position: center;
-  }
-  :host([type='radio']) .control,
-  :host([role='radio']) .control {
-    border-radius: 50%;
-  }
-  :host([type='radio'][checked]) .control,
-  /* :state is newly available, so we set an attribute in radio for compat */
-  :host([role='radio'][checked-ui]) .control,
-  :host([role='radio']:state(checked)) .control {
-    border-color: var(--w-s-color-border-selected);
-    border-width: 0.6rem;
-  }
-  .checkbox:has(:invalid),
-  :host([invalid]) .control {
-    border-color: var(--w-s-color-border-negative) !important;
-  }
-  /* handles invalid checkbox state inside w-checkbox */
-  .checkbox:has(:checked, :indeterminate):has(:invalid),
-  /* allows invalid to be set on the w-checkbox element */
-  :host([invalid]) .checkbox:has(:checked, :indeterminate),
-  :host([type='checkbox'][invalid][checked]) .control,
-  :host([type='checkbox'][invalid][indeterminate]) .control {
-    background-color: var(--w-s-color-background-negative);
-  }
-
-  :host(:focus-visible) {
-    outline: none;
-  }
-  .checkbox:has(> input:focus-visible:not(:disabled)),
-  :host(:focus-visible) .control {
-    outline: 2px solid var(--w-s-color-border-focus);
-    outline-offset: var(--w-outline-offset, 1px);
-  }
-
-  :host([type='radio'][disabled]) .control,
-  /* :state is newly available, so we set an attribute in radio for compat */
-  :host([role='radio'][disabled-ui]) .control,
-  :host([role='radio']:state(disabled)) .control,
-  :host([type='checkbox'][disabled]) .control,
-  .checkbox:has(> input:disabled) {
-    border-color: var(--w-s-color-border-disabled);
-    background-color: var(--w-s-color-background-disabled-subtle);
-  }
-
-  :host([type='checkbox'][disabled][checked]) .control,
-  :host([type='checkbox'][disabled][indeterminate]) .control,
-  .checkbox:has(:checked, :indeterminate):has(> input:disabled) {
-    background-color: var(--w-s-color-background-disabled);
-  }
-`;var b=class extends c{constructor(){super();this.checked=!1;this.forceDisabled=!1;this.form=null;this.appearance="default";this.size="medium";this.disabled=!1;this.handleClick=()=>{!this.disabled&&!this.forceDisabled&&(this.checked=!0)};this.addEventListener("click",this.handleClick)}connectedCallback(){super.connectedCallback(),this.setInitialAttributes()}setInitialAttributes(){this.setAttribute("role","radio"),this.tabIndex=0,this.setAttribute("aria-disabled",this.disabled||this.forceDisabled?"true":"false")}updated(e){if(super.updated(e),e.has("checked")&&(this.customStates.set("checked",this.checked),this[this.checked?"setAttribute":"removeAttribute"]("checked-ui",""),this.setAttribute("aria-checked",this.checked?"true":"false"),!this.disabled&&!this.forceDisabled&&(this.tabIndex=this.checked?0:-1)),e.has("disabled")||e.has("forceDisabled")){let r=this.disabled||this.forceDisabled;this.customStates.set("disabled",r),this[r?"setAttribute":"removeAttribute"]("disabled-ui",""),this.setAttribute("aria-disabled",r?"true":"false"),r?this.tabIndex=-1:this.tabIndex=this.checked?0:-1}}setValue(){}render(){return J`
-      <div class="wrapper">
-        <div part="control" class="control"></div>
-        <slot part="label" class="label"></slot>
-      </div>
-    `}};b.css=[Y,N],n([j()],b.prototype,"checked",2),n([j()],b.prototype,"forceDisabled",2),n([w({reflect:!0})],b.prototype,"form",2),n([w({reflect:!0})],b.prototype,"value",2),n([w({reflect:!0})],b.prototype,"appearance",2),n([w({reflect:!0})],b.prototype,"size",2),n([w({type:Boolean})],b.prototype,"disabled",2);customElements.get("w-radio")||customElements.define("w-radio",b);var _=(i={})=>{let{validationElement:o,validationProperty:e}=i;o||(o=Object.assign(document.createElement("input"),{required:!0})),e||(e="value");let r={observedAttributes:["required"],message:o.validationMessage,checkValidity(t){var h;let a={message:"",isValid:!0,invalidKeys:[]};return((h=t.required)!=null?h:t.hasAttribute("required"))&&!t[e]&&(a.message=typeof r.message=="function"?r.message(t):r.message||"",a.isValid=!1,a.invalidKeys.push("valueMissing")),a}};return r};var y=class{constructor(o,...e){this.slotNames=[];this.handleSlotChange=o=>{let e=o.target;(this.slotNames.includes("[default]")&&!e.name||e.name&&this.slotNames.includes(e.name))&&this.host.requestUpdate()};(this.host=o).addController(this),this.slotNames=e}hasDefaultSlot(){return[...this.host.childNodes].some(o=>{var e;if(o.nodeType===Node.TEXT_NODE&&((e=o.textContent)==null?void 0:e.trim())!=="")return!0;if(o.nodeType===Node.ELEMENT_NODE){let r=o;if(r.tagName.toLowerCase()==="w-visually-hidden")return!1;if(!r.hasAttribute("slot"))return!0}return!1})}hasNamedSlot(o){return this.host.querySelector(`:scope > [slot="${o}"]`)!==null}test(o){return o==="[default]"?this.hasDefaultSlot():this.hasNamedSlot(o)}hostConnected(){var o;(o=this.host.shadowRoot)==null||o.addEventListener("slotchange",this.handleSlotChange)}hostDisconnected(){var o;(o=this.host.shadowRoot)==null||o.removeEventListener("slotchange",this.handleSlotChange)}};import{css as Q}from"lit";var U=Q`
-  :host {
-    display: block;
-  }
-
-  .form-control {
-    position: relative;
-    border: none;
-    padding: 0;
-    margin: 0;
-  }
-
-  .label {
-    font-size: var(--w-font-size-s);
-    line-height: var(--w-line-height-s);
-    font-weight: 700;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    font-smoothing: grayscale;
-    cursor: pointer;
-    padding-bottom: 0.4rem;
-    color: var(--w-s-color-text);
-    display: block;
-  }
-
-  .radio-group-required .label::after {
-    content: var(--wa-form-control-required-content);
-    margin-inline-start: var(--wa-form-control-required-content-offset);
-  }
-
-  .button-group {
-    display: flex;
-  }
-
-  [part~='form-control-input'] {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-  }
-
-  /* Horizontal */
-  :host([orientation='horizontal']) [part~='form-control-input'] {
-    flex-direction: row;
-    gap: 1em;
-  }
-
-  /* Help text */
-  [part~='hint'] {
-    margin-block-start: 0.5em;
-  }
-
-  /* Radios have the "button" appearance */
-  :host fieldset.has-radio-buttons {
-    [part~='form-control-input'] {
-      gap: 0;
-    }
-  }
-`;var d=class extends c{constructor(){super();this.hasSlotController=new y(this,"hint","label");this.hasRadioButtons=!1;this.label="";this.hint="";this.name=null;this.disabled=!1;this.orientation="vertical";this._value=null;this.defaultValue=this.getAttribute("value")||null;this.size="medium";this.required=!1;this.withLabel=!1;this.withHint=!1;this.handleRadioClick=e=>{let r=e.target.closest("w-radio");if(!r||r.disabled||r.forceDisabled||this.disabled)return;let t=this.value;this.value=r.value,r.checked=!0;let a=this.getAllRadios();for(let s of a)r!==s&&(s.checked=!1,s.setAttribute("tabindex","-1"));this.value!==t&&this.updateComplete.then(()=>{this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))})};this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("click",this.handleRadioClick)}static get validators(){let e=[_({validationElement:Object.assign(document.createElement("input"),{required:!0,type:"radio",name:q("__w-radio")})})];return[...super.validators,...e]}get value(){var e;return this.valueHasChanged?this._value:(e=this._value)!=null?e:this.defaultValue}set value(e){typeof e=="number"&&(e=String(e)),this.valueHasChanged=!0,this._value=e}get validationTarget(){let e=this.querySelector(":is(w-radio):not([disabled])");if(e)return e}updated(e){(e.has("disabled")||e.has("value"))&&this.syncRadioElements()}formResetCallback(...e){this.value=this.defaultValue,super.formResetCallback(...e),this.syncRadioElements()}getAllRadios(){return[...this.querySelectorAll("w-radio")]}handleLabelClick(){this.focus()}async syncRadioElements(){let e=this.getAllRadios(),r=!1;if(e.forEach((t,a)=>{t.appearance==="button"&&(r=!0),t.setAttribute("size",this.size),t.toggleAttribute("data-w-radio-horizontal",this.orientation!=="vertical"),t.toggleAttribute("data-w-radio-vertical",this.orientation==="vertical"),t.toggleAttribute("data-w-radio-first",a===0),t.toggleAttribute("data-w-radio-inner",a!==0&&a!==e.length-1),t.toggleAttribute("data-w-radio-last",a===e.length-1),t.forceDisabled=this.disabled}),this.hasRadioButtons=r,await Promise.all(e.map(async t=>{await t.updateComplete,!t.disabled&&t.value===this.value?t.checked=!0:t.checked=!1})),this.disabled)e.forEach(t=>{t.tabIndex=-1});else{let t=e.filter(s=>!s.disabled),a=t.find(s=>s.checked);t.length>0&&(a?t.forEach(s=>{s.tabIndex=s.checked?0:-1}):t.forEach((s,l)=>{s.tabIndex=l===0?0:-1})),e.filter(s=>s.disabled).forEach(s=>{s.tabIndex=-1})}}handleKeyDown(e){var h,k,z;if(!["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"," "].includes(e.key)||this.disabled)return;let r=this.getAllRadios().filter(p=>!p.disabled);if(r.length<=0)return;e.preventDefault();let t=this.value,a=(h=r.find(p=>p.checked))!=null?h:r[0],s=e.key===" "?0:["ArrowUp","ArrowLeft"].includes(e.key)?-1:1,l=r.indexOf(a)+s;l||(l=0),l<0&&(l=r.length-1),l>r.length-1&&(l=0);let v=r.some(p=>p.tagName.toLowerCase()==="w-radio-button");this.getAllRadios().forEach(p=>{p.checked=!1,v||p.setAttribute("tabindex","-1")}),this.value=r[l].value,r[l].checked=!0,v?(z=(k=r[l].shadowRoot)==null?void 0:k.querySelector("button"))==null||z.focus():(r[l].setAttribute("tabindex","0"),r[l].focus()),this.value!==t&&this.updateComplete.then(()=>{this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}),e.preventDefault()}focus(e){if(this.disabled)return;let r=this.getAllRadios(),t=r.find(l=>l.checked),a=r.find(l=>!l.disabled),s=t||a;s&&s.focus(e)}render(){let e=this.hasUpdated?this.hasSlotController.test("label"):this.withLabel,r=this.hasUpdated?this.hasSlotController.test("hint"):this.withHint,t=this.label?!0:!!e,a=this.hint?!0:!!r;return G`
-      <fieldset
-        part="form-control"
-        class=${O({"form-control":!0,"form-control-radio-group":!0,"form-control-has-label":t,"has-radio-buttons":this.hasRadioButtons})}
-        role="radiogroup"
-        aria-labelledby="label"
-        aria-describedby="hint"
-        aria-errormessage="error-message"
-        aria-orientation=${this.orientation}>
-        <label
-          part="form-control-label"
-          id="label"
-          class="label"
-          aria-hidden=${t?"false":"true"}
-          @click=${this.handleLabelClick}>
-          <slot name="label">${this.label}</slot>
-        </label>
-
-        <slot part="form-control-input" @slotchange=${this.syncRadioElements}></slot>
-
-        <slot
-          id="hint"
-          name="hint"
-          part="hint"
-          class=${O({"has-slotted":a})}
-          aria-hidden=${a?"false":"true"}
-          >${this.hint}</slot
-        >
-      </fieldset>
-    `}};d.css=[U],d.shadowRootOptions={...c.shadowRootOptions,delegatesFocus:!0},n([F()],d.prototype,"hasRadioButtons",2),n([W("slot:not([name])")],d.prototype,"defaultSlot",2),n([u()],d.prototype,"label",2),n([u({attribute:"hint"})],d.prototype,"hint",2),n([u({reflect:!0})],d.prototype,"name",2),n([u({type:Boolean,reflect:!0})],d.prototype,"disabled",2),n([u({reflect:!0})],d.prototype,"orientation",2),n([F()],d.prototype,"value",1),n([u({attribute:"value",reflect:!0})],d.prototype,"defaultValue",2),n([u({reflect:!0})],d.prototype,"size",2),n([u({type:Boolean,reflect:!0})],d.prototype,"required",2),n([u({type:Boolean,attribute:"with-label"})],d.prototype,"withLabel",2),n([u({type:Boolean,attribute:"with-hint"})],d.prototype,"withHint",2);customElements.get("w-radio-group")||customElements.define("w-radio-group",d);export{d as WRadioGroup};
-//# sourceMappingURL=radio-group.js.map