@warp-ds/elements 2.2.0-next.1 → 2.2.0-next.11

package/dist/packages/rip-and-tear-radio/form-associated-element.js

@@ -0,0 +1,282 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { isServer } from 'lit';
+import { property } from 'lit/decorators.js';
+import BaseElement from './base-element.js';
+import { CustomErrorValidator } from './custom-error-validator.js';
+import { WInvalidEvent } from './invalid';
+// setFormValue omitted so that we can use `setValue`
+export class BaseFormAssociatedElement extends BaseElement {
+    static { this.formAssociated = true; }
+    /**
+     * Validators are static because they have `observedAttributes`, essentially attributes to "watch"
+     * for changes. Whenever these attributes change, we want to be notified and update the validator.
+     */
+    static get validators() {
+        return [CustomErrorValidator()];
+    }
+    // Append all Validator "observedAttributes" into the "observedAttributes" so they can run.
+    static get observedAttributes() {
+        const parentAttrs = new Set(super.observedAttributes || []);
+        for (const validator of this.validators) {
+            if (!validator.observedAttributes) {
+                continue;
+            }
+            for (const attr of validator.observedAttributes) {
+                parentAttrs.add(attr);
+            }
+        }
+        return [...parentAttrs];
+    }
+    constructor() {
+        super();
+        // Form attributes
+        /** The name of the input, submitted as a name/value pair with form data. */
+        this.name = null;
+        /** Disables the form control. */
+        this.disabled = false;
+        this.required = false;
+        this.assumeInteractionOn = ['input'];
+        this.validators = [];
+        // Should these be private?
+        this.valueHasChanged = false;
+        this.hasInteracted = false;
+        // This works around a limitation in Safari. It is a hacky way for us to preserve custom errors generated by the user.
+        this.customError = null;
+        this.emittedEvents = [];
+        this.emitInvalid = (e) => {
+            if (e.target !== this)
+                return;
+            // An "invalid" event counts as interacted, this is usually triggered by a button "submitting"
+            this.hasInteracted = true;
+            this.dispatchEvent(new WInvalidEvent());
+        };
+        this.handleInteraction = (event) => {
+            const emittedEvents = this.emittedEvents;
+            if (!emittedEvents.includes(event.type)) {
+                emittedEvents.push(event.type);
+            }
+            // Mark it as user-interacted as soon as all associated events have been emitted
+            if (emittedEvents.length === this.assumeInteractionOn?.length) {
+                this.hasInteracted = true;
+            }
+        };
+        if (!isServer) {
+            this.addEventListener('invalid', this.emitInvalid);
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.updateValidity();
+        // Lazily evaluate after the constructor to allow people to override the `assumeInteractionOn`
+        this.assumeInteractionOn.forEach((event) => {
+            this.addEventListener(event, this.handleInteraction);
+        });
+    }
+    firstUpdated(...args) {
+        super.firstUpdated(...args);
+        this.updateValidity();
+    }
+    willUpdate(changedProperties) {
+        if (!isServer && changedProperties.has('customError')) {
+            // We use null because it we really don't want it to show up in the attributes because `custom-error` does reflect
+            if (!this.customError) {
+                this.customError = null;
+            }
+            this.setCustomValidity(this.customError || '');
+        }
+        if (changedProperties.has('value') || changedProperties.has('disabled')) {
+            // @ts-expect-error Some components will use an accessors, other use a property, so we don't want to limit them.
+            const value = this.value;
+            // Accounts for the snowflake case on `<wa-select>`
+            if (Array.isArray(value)) {
+                if (this.name) {
+                    const formData = new FormData();
+                    for (const val of value) {
+                        formData.append(this.name, val);
+                    }
+                    this.setValue(formData, formData);
+                }
+            }
+            else {
+                this.setValue(value, value);
+            }
+        }
+        if (changedProperties.has('disabled')) {
+            this.customStates.set('disabled', this.disabled);
+            if (this.hasAttribute('disabled') || (!isServer && !this.matches(':disabled'))) {
+                this.toggleAttribute('disabled', this.disabled);
+            }
+        }
+        this.updateValidity();
+        super.willUpdate(changedProperties);
+    }
+    get labels() {
+        return this.internals.labels;
+    }
+    getForm() {
+        return this.internals.form;
+    }
+    get validity() {
+        return this.internals.validity;
+    }
+    // Not sure if this supports `novalidate`. Will need to test.
+    get willValidate() {
+        return this.internals.willValidate;
+    }
+    get validationMessage() {
+        return this.internals.validationMessage;
+    }
+    checkValidity() {
+        this.updateValidity();
+        return this.internals.checkValidity();
+    }
+    reportValidity() {
+        this.updateValidity();
+        // This seems reasonable. `reportValidity()` is kind of like "we expect you to have interacted"
+        this.hasInteracted = true;
+        return this.internals.reportValidity();
+    }
+    /**
+     * Override this to change where constraint validation popups are anchored.
+     */
+    get validationTarget() {
+        return (this.input || undefined);
+    }
+    setValidity(...args) {
+        const flags = args[0];
+        const message = args[1];
+        let anchor = args[2];
+        if (!anchor) {
+            anchor = this.validationTarget;
+        }
+        this.internals.setValidity(flags, message, anchor || undefined);
+        this.requestUpdate('validity');
+        this.setCustomStates();
+    }
+    setCustomStates() {
+        const required = Boolean(this.required);
+        const isValid = this.internals.validity.valid;
+        const hasInteracted = this.hasInteracted;
+        this.customStates.set('required', required);
+        this.customStates.set('optional', !required);
+        this.customStates.set('invalid', !isValid);
+        this.customStates.set('valid', isValid);
+        this.customStates.set('user-invalid', !isValid && hasInteracted);
+        this.customStates.set('user-valid', isValid && hasInteracted);
+    }
+    /**
+     * Do not use this when creating a "Validator". This is intended for end users of components.
+     * We track manually defined custom errors so we don't clear them on accident in our validators.
+     *
+     */
+    setCustomValidity(message) {
+        if (!message) {
+            // We use null because it we really don't want it to show up in the attributes because `custom-error` does reflect
+            this.customError = null;
+            this.setValidity({});
+            return;
+        }
+        this.customError = message;
+        this.setValidity({ customError: true }, message, this.validationTarget);
+    }
+    formResetCallback() {
+        this.resetValidity();
+        this.hasInteracted = false;
+        this.valueHasChanged = false;
+        this.emittedEvents = [];
+        this.updateValidity();
+    }
+    formDisabledCallback(isDisabled) {
+        this.disabled = isDisabled;
+        this.updateValidity();
+    }
+    /**
+     * Called when the browser is trying to restore element’s state to state in which case reason is "restore", or when
+     * the browser is trying to fulfill autofill on behalf of user in which case reason is "autocomplete". In the case of
+     * "restore", state is a string, File, or FormData object previously set as the second argument to setFormValue.
+     */
+    formStateRestoreCallback(state, reason) {
+        // @ts-expect-error We purposely do not have a value property. It makes things hard to extend.
+        this.value = state;
+        if (reason === 'restore') {
+            this.resetValidity();
+        }
+        this.updateValidity();
+    }
+    setValue(...args) {
+        const [value, state] = args;
+        this.internals.setFormValue(value, state);
+    }
+    get allValidators() {
+        const staticValidators = this.constructor.validators || [];
+        const validators = this.validators || [];
+        return [...staticValidators, ...validators];
+    }
+    /**
+     * Reset validity is a way of removing manual custom errors and native validation.
+     */
+    resetValidity() {
+        this.setCustomValidity('');
+        this.setValidity({});
+    }
+    updateValidity() {
+        if (this.disabled ||
+            this.hasAttribute('disabled') ||
+            !this.willValidate //
+        ) {
+            this.resetValidity();
+            return;
+        }
+        const validators = this.allValidators;
+        if (!validators?.length) {
+            // If there's no validators, we do nothing. We also don't want to mess with custom errors, so we just stop here.
+            return;
+        }
+        const flags = {
+            // Don't trust custom errors from the Browser. Safari breaks the spec.
+            customError: Boolean(this.customError),
+        };
+        const formControl = this.validationTarget || this.input || undefined;
+        let finalMessage = '';
+        for (const validator of validators) {
+            const { isValid, message, invalidKeys } = validator.checkValidity(this);
+            if (isValid) {
+                continue;
+            }
+            if (!finalMessage) {
+                finalMessage = message;
+            }
+            if (invalidKeys?.length >= 0) {
+                invalidKeys.forEach((str) => (flags[str] = true));
+            }
+        }
+        // This is a workaround for preserving custom errors
+        if (!finalMessage) {
+            finalMessage = this.validationMessage;
+        }
+        this.setValidity(flags, finalMessage, formControl);
+    }
+}
+__decorate([
+    property({ reflect: true })
+], BaseFormAssociatedElement.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean })
+], BaseFormAssociatedElement.prototype, "disabled", void 0);
+__decorate([
+    property({ state: true, attribute: false })
+], BaseFormAssociatedElement.prototype, "valueHasChanged", void 0);
+__decorate([
+    property({ state: true, attribute: false })
+], BaseFormAssociatedElement.prototype, "hasInteracted", void 0);
+__decorate([
+    property({ attribute: 'custom-error', reflect: true })
+], BaseFormAssociatedElement.prototype, "customError", void 0);
+__decorate([
+    property({ attribute: false, state: true, type: Object })
+], BaseFormAssociatedElement.prototype, "validity", null);

package/dist/packages/rip-and-tear-radio/host-styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/packages/rip-and-tear-radio/host-styles.js

@@ -0,0 +1,12 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    box-sizing: border-box !important;
+  }
+
+  :host *,
+  :host *::before,
+  :host *::after {
+    box-sizing: inherit !important;
+  }
+`;

package/dist/packages/rip-and-tear-radio/index.d.ts

@@ -0,0 +1,8 @@
+import { WRadio } from './radio';
+import { WRadioGroup } from './radio-group';
+declare global {
+    interface HTMLElementTagNameMap {
+        'w-radio': WRadio;
+        'w-radio-group': WRadioGroup;
+    }
+}

package/dist/packages/rip-and-tear-radio/index.js

@@ -0,0 +1,272 @@
+var O=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var V=s=>{throw TypeError(s)};var l=(s,r,t,e)=>{for(var a=e>1?void 0:e?B(r,t):r,i=s.length-1,o;i>=0;i--)(o=s[i])&&(a=(e?o(r,t,a):o(a))||a);return e&&a&&O(r,t,a),a};var x=(s,r,t)=>r.has(s)||V("Cannot "+t);var C=(s,r,t)=>(x(s,r,"read from private field"),t?t.call(s):r.get(s)),S=(s,r,t)=>r.has(s)?V("Cannot add the same private member more than once"):r instanceof WeakSet?r.add(s):r.set(s,t),A=(s,r,t,e)=>(x(s,r,"write to private field"),e?e.call(s,t):r.set(s,t),t);import{html as j}from"lit";import{property as y,state as M}from"lit/decorators.js";import{isServer as k}from"lit";import{property as b}from"lit/decorators.js";import{LitElement as $,unsafeCSS as _}from"lit";import{property as T}from"lit/decorators.js";import{css as P}from"lit";var R=P`
+  :host {
+    box-sizing: border-box !important;
+  }
+
+  :host *,
+  :host *::before,
+  :host *::after {
+    box-sizing: inherit !important;
+  }
+`;var v,p=class extends ${constructor(){super();S(this,v,!1);this.initialReflectedProperties=new Map;this.customStates={set:(t,e)=>{var a;(a=this.internals)!=null&&a.states&&(e?this.internals.states.add(t):this.internals.states.delete(t))},has:t=>{var e;return(e=this.internals)!=null&&e.states?this.internals.states.has(t):!1}};try{this.internals=this.attachInternals()}catch(e){console.error("Element internals are not supported in your browser. Consider using a polyfill")}this.customStates.set("wa-defined",!0);let t=this.constructor;for(let[e,a]of t.elementProperties)a.default==="inherit"&&a.initial!==void 0&&typeof e=="string"&&this.customStates.set(`initial-${e}-${a.initial}`,!0)}static get styles(){let t=Array.isArray(this.css)?this.css:this.css?[this.css]:[];return[R,...t].map(e=>typeof e=="string"?_(e):e)}attributeChangedCallback(t,e,a){C(this,v)||(this.constructor.elementProperties.forEach((i,o)=>{i.reflect&&this[o]!=null&&this.initialReflectedProperties.set(o,this[o])}),A(this,v,!0)),super.attributeChangedCallback(t,e,a)}willUpdate(t){super.willUpdate(t),this.initialReflectedProperties.forEach((e,a)=>{t.has(a)&&this[a]==null&&(this[a]=e)})}relayNativeEvent(t,e){t.stopImmediatePropagation(),this.dispatchEvent(new t.constructor(t.type,{...t,...e}))}};v=new WeakMap,l([T()],p.prototype,"dir",2),l([T()],p.prototype,"lang",2);var L=()=>({observedAttributes:["custom-error"],checkValidity(s){let r={message:"",isValid:!0,invalidKeys:[]};return s.customError&&(r.message=s.customError,r.isValid=!1,r.invalidKeys=["customError"]),r}});var w=class extends Event{constructor(){super("w-invalid",{bubbles:!0,cancelable:!1,composed:!0})}};var c=class extends p{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=t=>{t.target===this&&(this.hasInteracted=!0,this.dispatchEvent(new w))};this.handleInteraction=t=>{var a;let e=this.emittedEvents;e.includes(t.type)||e.push(t.type),e.length===((a=this.assumeInteractionOn)==null?void 0:a.length)&&(this.hasInteracted=!0)};k||this.addEventListener("invalid",this.emitInvalid)}static get validators(){return[L()]}static get observedAttributes(){let t=new Set(super.observedAttributes||[]);for(let e of this.validators)if(e.observedAttributes)for(let a of e.observedAttributes)t.add(a);return[...t]}connectedCallback(){super.connectedCallback(),this.updateValidity(),this.assumeInteractionOn.forEach(t=>{this.addEventListener(t,this.handleInteraction)})}firstUpdated(...t){super.firstUpdated(...t),this.updateValidity()}willUpdate(t){if(!k&&t.has("customError")&&(this.customError||(this.customError=null),this.setCustomValidity(this.customError||"")),t.has("value")||t.has("disabled")){let e=this.value;if(Array.isArray(e)){if(this.name){let a=new FormData;for(let i of e)a.append(this.name,i);this.setValue(a,a)}}else this.setValue(e,e)}t.has("disabled")&&(this.customStates.set("disabled",this.disabled),(this.hasAttribute("disabled")||!k&&!this.matches(":disabled"))&&this.toggleAttribute("disabled",this.disabled)),this.updateValidity(),super.willUpdate(t)}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(...t){let e=t[0],a=t[1],i=t[2];i||(i=this.validationTarget),this.internals.setValidity(e,a,i||void 0),this.requestUpdate("validity"),this.setCustomStates()}setCustomStates(){let t=!!this.required,e=this.internals.validity.valid,a=this.hasInteracted;this.customStates.set("required",t),this.customStates.set("optional",!t),this.customStates.set("invalid",!e),this.customStates.set("valid",e),this.customStates.set("user-invalid",!e&&a),this.customStates.set("user-valid",e&&a)}setCustomValidity(t){if(!t){this.customError=null,this.setValidity({});return}this.customError=t,this.setValidity({customError:!0},t,this.validationTarget)}formResetCallback(){this.resetValidity(),this.hasInteracted=!1,this.valueHasChanged=!1,this.emittedEvents=[],this.updateValidity()}formDisabledCallback(t){this.disabled=t,this.updateValidity()}formStateRestoreCallback(t,e){this.value=t,e==="restore"&&this.resetValidity(),this.updateValidity()}setValue(...t){let[e,a]=t;this.internals.setFormValue(e,a)}get allValidators(){let t=this.constructor.validators||[],e=this.validators||[];return[...t,...e]}resetValidity(){this.setCustomValidity(""),this.setValidity({})}updateValidity(){if(this.disabled||this.hasAttribute("disabled")||!this.willValidate){this.resetValidity();return}let t=this.allValidators;if(!(t!=null&&t.length))return;let e={customError:!!this.customError},a=this.validationTarget||this.input||void 0,i="";for(let o of t){let{isValid:n,message:g,invalidKeys:h}=o.checkValidity(this);n||(i||(i=g),(h==null?void 0:h.length)>=0&&h.forEach(f=>e[f]=!0))}i||(i=this.validationMessage),this.setValidity(e,i,a)}};c.formAssociated=!0,l([b({reflect:!0})],c.prototype,"name",2),l([b({type:Boolean})],c.prototype,"disabled",2),l([b({state:!0,attribute:!1})],c.prototype,"valueHasChanged",2),l([b({state:!0,attribute:!1})],c.prototype,"hasInteracted",2),l([b({attribute:"custom-error",reflect:!0})],c.prototype,"customError",2),l([b({attribute:!1,state:!0,type:Object})],c.prototype,"validity",1);import{css as K}from"lit";var I=K`
+  :host {
+    color: var(--wa-form-control-value-color);
+    display: inline-flex;
+    flex-direction: row;
+    align-items: top;
+    font-family: inherit;
+    font-weight: var(--wa-form-control-value-font-weight);
+    line-height: var(--wa-form-control-value-line-height);
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  :host(:focus) {
+    outline: none;
+  }
+
+  [part~='label'] {
+    display: inline;
+  }
+
+  [part~='hint'] {
+    margin-block-start: 0.5em;
+  }
+
+  /* Default appearance */
+  :host([appearance='default']) {
+    .control {
+      flex: 0 0 auto;
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--wa-form-control-toggle-size, 2rem);
+      height: var(--wa-form-control-toggle-size, 2rem);
+      border-color: var(--wa-form-control-border-color, gray);
+      border-radius: 50%;
+      border-style: var(--wa-form-control-border-style, solid);
+      border-width: var(--wa-form-control-border-width, 1px);
+      background-color: var(--wa-form-control-background-color, white);
+      color: transparent;
+      transition-property: all;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-duration: 150ms;
+
+      margin-inline-end: 0.5em;
+    }
+  }
+
+  :host([appearance='clickable']) .control {
+    position: absolute;
+    inset: 0;
+    height: 100%;
+    width: 100%;
+    cursor: pointer;
+  }
+
+  /* Checked */
+  :host(:state(checked)):not(:host([appearance='clickable'])) .control {
+    /* color: var(--checked-icon-color, white); */
+    border-color: var(--wa-form-control-activated-color, blue);
+    background-color: var(--wa-form-control-background-color, white);
+    border-width: 0.6rem;
+  }
+
+  /* Focus */
+  :host(:focus-visible) .control {
+    outline: 2px solid var(--w-s-color-border-focus);
+    outline-offset: var(--w-outline-offset, 1px);
+  }
+
+  :host([appearance='clickable']:focus-visible) .control {
+    outline-offset: -4px;
+    border-radius: 8px;
+  }
+
+  /* Disabled */
+  :host(:state(disabled)) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  /* Button appearance */
+  :host([appearance='button']) {
+    align-items: center;
+    min-height: var(--wa-form-control-height);
+    background-color: var(--wa-color-surface-default);
+    border: var(--wa-form-control-border-width) var(--wa-form-control-border-style) var(--wa-form-control-border-color);
+    border-radius: var(--wa-border-radius-m);
+    padding: 0 var(--wa-form-control-padding-inline);
+    transition:
+      background-color var(--wa-transition-fast),
+      border-color var(--wa-transition-fast);
+
+    .control {
+      display: none;
+    }
+  }
+
+  /* Horizontal grouping - remove inner border radius */
+  :host([appearance='button'][data-wa-radio-horizontal][data-wa-radio-inner]) {
+    border-radius: 0;
+  }
+
+  :host([appearance='button'][data-wa-radio-horizontal][data-wa-radio-first]) {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  :host([appearance='button'][data-wa-radio-horizontal][data-wa-radio-last]) {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+
+  /* Vertical grouping - remove inner border radius */
+  :host([appearance='button'][data-wa-radio-vertical][data-wa-radio-inner]) {
+    border-radius: 0;
+  }
+
+  :host([appearance='button'][data-wa-radio-vertical][data-wa-radio-first]) {
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  :host([appearance='button'][data-wa-radio-vertical][data-wa-radio-last]) {
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+  }
+
+  @media (hover: hover) {
+    :host([appearance='button']:hover:not(:state(disabled), :state(checked))) {
+      background-color: color-mix(in srgb, var(--wa-color-surface-default) 95%, var(--wa-color-mix-hover));
+    }
+  }
+
+  :host([appearance='button']:focus-visible) {
+    outline: var(--wa-focus-ring);
+    outline-offset: var(--wa-focus-ring-offset);
+  }
+
+  :host([appearance='button']:state(checked)) {
+    border-color: var(--wa-form-control-activated-color);
+    background-color: var(--wa-color-brand-fill-quiet);
+  }
+
+  :host([appearance='button']:state(checked):focus-visible) {
+    outline: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-brand-border-loud);
+    outline-offset: var(--wa-focus-ring-offset);
+  }
+
+  /* Remove inner borders and handle overlap */
+  :host([appearance='button'][data-wa-radio-horizontal]:not([data-wa-radio-first])) {
+    margin-inline-start: calc(-1 * var(--wa-form-control-border-width));
+  }
+
+  :host([appearance='button'][data-wa-radio-vertical]:not([data-wa-radio-first])) {
+    margin-block-start: calc(-1 * var(--wa-form-control-border-width));
+  }
+
+  /* Ensure interactive states are visible above adjacent buttons */
+  :host([appearance='button']:hover),
+  :host([appearance='button']:state(checked)) {
+    position: relative;
+    z-index: 1;
+  }
+
+  :host([appearance='button']:focus-visible) {
+    z-index: 2;
+  }
+`;var u=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(t){if(super.updated(t),t.has("checked")&&(this.customStates.set("checked",this.checked),this.setAttribute("aria-checked",this.checked?"true":"false"),!this.disabled&&!this.forceDisabled&&(this.tabIndex=this.checked?0:-1)),t.has("disabled")||t.has("forceDisabled")){let e=this.disabled||this.forceDisabled;this.customStates.set("disabled",e),this.setAttribute("aria-disabled",e?"true":"false"),e?this.tabIndex=-1:this.tabIndex=this.checked?0:-1}}setValue(){}render(){return j`
+      <span part="control" class="control"></span>
+      <slot part="label" class="label"></slot>
+    `}};u.css=[I],l([M()],u.prototype,"checked",2),l([M()],u.prototype,"forceDisabled",2),l([y({reflect:!0})],u.prototype,"form",2),l([y({reflect:!0})],u.prototype,"value",2),l([y({reflect:!0})],u.prototype,"appearance",2),l([y({reflect:!0})],u.prototype,"size",2),l([y({type:Boolean})],u.prototype,"disabled",2);import{html as J}from"lit";import{property as m,query as Q,state as U}from"lit/decorators.js";import{classMap as F}from"lit/directives/class-map.js";var H="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";var D=(s=21)=>{let r="",t=crypto.getRandomValues(new Uint8Array(s|=0));for(;s--;)r+=H[t[s]&63];return r};function q(s=""){return`${s}${D()}`}import{css as X}from"lit";var N=X`
+  :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;
+    gap: 0.75em;
+  }
+
+  /* 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 z=(s={})=>{let{validationElement:r,validationProperty:t}=s;r||(r=Object.assign(document.createElement("input"),{required:!0})),t||(t="value");let e={observedAttributes:["required"],message:r.validationMessage,checkValidity(a){var h;let i={message:"",isValid:!0,invalidKeys:[]};return((h=a.required)!=null?h:a.hasAttribute("required"))&&!a[t]&&(i.message=typeof e.message=="function"?e.message(a):e.message||"",i.isValid=!1,i.invalidKeys.push("valueMissing")),i}};return e};var E=class{constructor(r,...t){this.slotNames=[];this.handleSlotChange=r=>{let t=r.target;(this.slotNames.includes("[default]")&&!t.name||t.name&&this.slotNames.includes(t.name))&&this.host.requestUpdate()};(this.host=r).addController(this),this.slotNames=t}hasDefaultSlot(){return[...this.host.childNodes].some(r=>{if(r.nodeType===Node.TEXT_NODE&&r.textContent.trim()!=="")return!0;if(r.nodeType===Node.ELEMENT_NODE){let t=r;if(t.tagName.toLowerCase()==="w-visually-hidden")return!1;if(!t.hasAttribute("slot"))return!0}return!1})}hasNamedSlot(r){return this.host.querySelector(`:scope > [slot="${r}"]`)!==null}test(r){return r==="[default]"?this.hasDefaultSlot():this.hasNamedSlot(r)}hostConnected(){this.host.shadowRoot.addEventListener("slotchange",this.handleSlotChange)}hostDisconnected(){this.host.shadowRoot.removeEventListener("slotchange",this.handleSlotChange)}};var d=class extends c{constructor(){super();this.hasSlotController=new E(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=t=>{let e=t.target.closest("w-radio");if(!e||e.disabled||e.forceDisabled||this.disabled)return;let a=this.value;this.value=e.value,e.checked=!0;let i=this.getAllRadios();for(let o of i)e!==o&&(o.checked=!1,o.setAttribute("tabindex","-1"));this.value!==a&&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 t=[z({validationElement:Object.assign(document.createElement("input"),{required:!0,type:"radio",name:q("__w-radio")})})];return[...super.validators,...t]}get value(){var t;return this.valueHasChanged?this._value:(t=this._value)!=null?t:this.defaultValue}set value(t){typeof t=="number"&&(t=String(t)),this.valueHasChanged=!0,this._value=t}get validationTarget(){let t=this.querySelector(":is(w-radio):not([disabled])");if(t)return t}updated(t){(t.has("disabled")||t.has("value"))&&this.syncRadioElements()}formResetCallback(...t){this.value=this.defaultValue,super.formResetCallback(...t),this.syncRadioElements()}getAllRadios(){return[...this.querySelectorAll("w-radio")]}handleLabelClick(){this.focus()}async syncRadioElements(){let t=this.getAllRadios(),e=!1;if(t.forEach((a,i)=>{a.appearance==="button"&&(e=!0),a.setAttribute("size",this.size),a.toggleAttribute("data-w-radio-horizontal",this.orientation!=="vertical"),a.toggleAttribute("data-w-radio-vertical",this.orientation==="vertical"),a.toggleAttribute("data-w-radio-first",i===0),a.toggleAttribute("data-w-radio-inner",i!==0&&i!==t.length-1),a.toggleAttribute("data-w-radio-last",i===t.length-1),a.forceDisabled=this.disabled}),this.hasRadioButtons=e,await Promise.all(t.map(async a=>{await a.updateComplete,!a.disabled&&a.value===this.value?a.checked=!0:a.checked=!1})),this.disabled)t.forEach(a=>{a.tabIndex=-1});else{let a=t.filter(o=>!o.disabled),i=a.find(o=>o.checked);a.length>0&&(i?a.forEach(o=>{o.tabIndex=o.checked?0:-1}):a.forEach((o,n)=>{o.tabIndex=n===0?0:-1})),t.filter(o=>o.disabled).forEach(o=>{o.tabIndex=-1})}}handleKeyDown(t){var h;if(!["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"," "].includes(t.key)||this.disabled)return;let e=this.getAllRadios().filter(f=>!f.disabled);if(e.length<=0)return;t.preventDefault();let a=this.value,i=(h=e.find(f=>f.checked))!=null?h:e[0],o=t.key===" "?0:["ArrowUp","ArrowLeft"].includes(t.key)?-1:1,n=e.indexOf(i)+o;n||(n=0),n<0&&(n=e.length-1),n>e.length-1&&(n=0);let g=e.some(f=>f.tagName.toLowerCase()==="w-radio-button");this.getAllRadios().forEach(f=>{f.checked=!1,g||f.setAttribute("tabindex","-1")}),this.value=e[n].value,e[n].checked=!0,g?e[n].shadowRoot.querySelector("button").focus():(e[n].setAttribute("tabindex","0"),e[n].focus()),this.value!==a&&this.updateComplete.then(()=>{this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}),t.preventDefault()}focus(t){if(this.disabled)return;let e=this.getAllRadios(),a=e.find(n=>n.checked),i=e.find(n=>!n.disabled),o=a||i;o&&o.focus(t)}render(){let t=this.hasUpdated?this.hasSlotController.test("label"):this.withLabel,e=this.hasUpdated?this.hasSlotController.test("hint"):this.withHint,a=this.label?!0:!!t,i=this.hint?!0:!!e;return J`
+      <fieldset
+        part="form-control"
+        class=${F({"form-control":!0,"form-control-radio-group":!0,"form-control-has-label":a,"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=${a?"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=${F({"has-slotted":i})}
+          aria-hidden=${i?"false":"true"}
+          >${this.hint}</slot
+        >
+      </fieldset>
+    `}};d.css=[N],d.shadowRootOptions={...c.shadowRootOptions,delegatesFocus:!0},l([U()],d.prototype,"hasRadioButtons",2),l([Q("slot:not([name])")],d.prototype,"defaultSlot",2),l([m()],d.prototype,"label",2),l([m({attribute:"hint"})],d.prototype,"hint",2),l([m({reflect:!0})],d.prototype,"name",2),l([m({type:Boolean,reflect:!0})],d.prototype,"disabled",2),l([m({reflect:!0})],d.prototype,"orientation",2),l([U()],d.prototype,"value",1),l([m({attribute:"value",reflect:!0})],d.prototype,"defaultValue",2),l([m({reflect:!0})],d.prototype,"size",2),l([m({type:Boolean,reflect:!0})],d.prototype,"required",2),l([m({type:Boolean,attribute:"with-label"})],d.prototype,"withLabel",2),l([m({type:Boolean,attribute:"with-hint"})],d.prototype,"withHint",2);customElements.get("w-radio")||(customElements.define("w-radio",u),customElements.define("w-radio-group",d));
+//# sourceMappingURL=index.js.map