@warp-ds/elements 2.2.0-next.17 → 2.2.0-next.19

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

@@ -1,273 +1,248 @@
-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 { html } from 'lit';
-import { property, query, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { BaseFormAssociatedElement } from './form-associated-element';
-import { uniqueId } from './math';
-import './radio';
-// eslint-disable-next-line
-// @ts-ignore
-import { styles } from './radio-group-styles';
-import { RequiredValidator } from './required-validator';
-import { HasSlotController } from './slot';
-/**
- * @slot label - Alternative to the `label` attribute should you need custom HTML.
- */
-export class WRadioGroup extends BaseFormAssociatedElement {
-    static { this.css = [styles]; }
-    static get validators() {
-        const validators = [
-            RequiredValidator({
-                validationElement: Object.assign(document.createElement('input'), {
-                    required: true,
-                    type: 'radio',
-                    // we need an id that's guaranteed to be unique; users will never see this
-                    name: uniqueId('__w-radio'),
-                }),
-            }),
-        ];
-        return [...super.validators, ...validators];
-    }
-    get value() {
-        if (this.valueHasChanged) {
-            return this._value;
-        }
-        return this._value ?? this.defaultValue;
-    }
-    /** The current value of the radio group, submitted as a name/value pair with form data. */
-    set value(val) {
-        if (typeof val === 'number')
-            val = String(val);
-        this.valueHasChanged = true;
-        this._value = val;
-    }
-    //
-    // We need this because if we don't have it, FormValidation yells at us that it's "not focusable".
-    //   If we use `this.tabIndex = -1` we can't focus the radio inside.
-    //
-    static { this.shadowRootOptions = { ...BaseFormAssociatedElement.shadowRootOptions, delegatesFocus: true }; }
-    constructor() {
-        super();
-        this.hasSlotController = new HasSlotController(this, 'hint', 'label');
-        this.hasRadioButtons = false;
-        /**
-         * The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
-         * instead.
-         */
-        this.label = '';
-        /** The radio groups's hint. If you need to display HTML, use the `hint` slot instead. */
-        this.hint = '';
-        /** The name of the radio group, submitted as a name/value pair with form data. */
-        this.name = null;
-        /** Disables the radio group and all child radios. */
-        this.disabled = false;
-        /** The orientation in which to show radio items. */
-        this.orientation = 'vertical';
-        this._value = null;
-        /** The default value of the form control. Primarily used for resetting the form control. */
-        this.defaultValue = this.getAttribute('value') || null;
-        /** The radio group's size. This size will be applied to all child radios and radio buttons, except when explicitly overridden. */
-        this.size = 'medium';
-        /** Ensures a child radio is checked before allowing the containing form to submit. */
-        this.required = false;
-        /**
-         * Used for SSR. if true, will show slotted label on initial render.
-         */
-        this.withLabel = false;
-        /**
-         * Used for SSR. if true, will show slotted hint on initial render.
-         */
-        this.withHint = false;
-        this.handleRadioClick = (e) => {
-            const clickedRadio = e.target.closest('w-radio');
-            /* eslint-disable */
-            if (!clickedRadio || clickedRadio.disabled || clickedRadio.forceDisabled || this.disabled) {
-                return;
-            }
-            const oldValue = this.value;
-            this.value = clickedRadio.value;
-            clickedRadio.checked = true;
-            const radios = this.getAllRadios();
-            for (const radio of radios) {
-                if (clickedRadio === radio) {
-                    continue;
-                }
-                radio.checked = false;
-                radio.setAttribute('tabindex', '-1');
-            }
-            if (this.value !== oldValue) {
-                this.updateComplete.then(() => {
-                    this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
-                    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-                });
-            }
-        };
-        this.addEventListener('keydown', this.handleKeyDown);
-        this.addEventListener('click', this.handleRadioClick);
-    }
-    /**
-     * We use the first available radio as the validationTarget similar to native HTML that shows the validation popup on
-     * the first radio element.
-     */
-    get validationTarget() {
-        const radio = this.querySelector(':is(w-radio):not([disabled])');
-        if (!radio)
-            return undefined;
-        return radio;
-    }
-    updated(changedProperties) {
-        if (changedProperties.has('disabled') || changedProperties.has('value')) {
-            this.syncRadioElements();
-        }
-    }
-    formResetCallback(...args) {
-        this.value = this.defaultValue;
-        super.formResetCallback(...args);
-        this.syncRadioElements();
-    }
-    getAllRadios() {
-        return [...this.querySelectorAll('w-radio')];
-    }
-    handleLabelClick() {
-        this.focus();
+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 m,query as Q,state as U}from"lit/decorators.js";import{classMap as F}from"lit/directives/class-map.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 L}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 g,p=class extends ${constructor(){super();S(this,g,!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,g)||(this.constructor.elementProperties.forEach((i,o)=>{i.reflect&&this[o]!=null&&this.initialReflectedProperties.set(o,this[o])}),A(this,g,!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}))}};g=new WeakMap,l([L()],p.prototype,"dir",2),l([L()],p.prototype,"lang",2);var T=()=>({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[T()]}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:v,invalidKeys:u}=o.checkValidity(this);n||(i||(i=v),(u==null?void 0:u.length)>=0&&u.forEach(h=>e[h]=!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);var I="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";var H=(s=21)=>{let r="",t=crypto.getRandomValues(new Uint8Array(s|=0));for(;s--;)r+=I[t[s]&63];return r};function M(s=""){return`${s}${H()}`}import{html as j}from"lit";import{property as y,state as q}from"lit/decorators.js";import{css as K}from"lit";var D=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;
     }
-    async syncRadioElements() {
-        const radios = this.getAllRadios();
-        let hasRadioButtons = false;
-        // Add data attributes to support styling
-        radios.forEach((radio, index) => {
-            if (radio.appearance === 'button')
-                hasRadioButtons = true;
-            radio.setAttribute('size', this.size);
-            radio.toggleAttribute('data-w-radio-horizontal', this.orientation !== 'vertical');
-            radio.toggleAttribute('data-w-radio-vertical', this.orientation === 'vertical');
-            radio.toggleAttribute('data-w-radio-first', index === 0);
-            radio.toggleAttribute('data-w-radio-inner', index !== 0 && index !== radios.length - 1);
-            radio.toggleAttribute('data-w-radio-last', index === radios.length - 1);
-            // Set forceDisabled state based on radio group's disabled state
-            radio.forceDisabled = this.disabled;
-        });
-        // If at least one radio button exists, we assume it's a radio button group
-        this.hasRadioButtons = hasRadioButtons;
-        await Promise.all(radios.map(async (radio) => {
-            await radio.updateComplete;
-            if (!radio.disabled && radio.value === this.value) {
-                radio.checked = true;
-            }
-            else {
-                radio.checked = false;
-            }
-        }));
-        // Manage tabIndex based on disabled state and checked status
-        if (this.disabled) {
-            // If radio group is disabled, all radios should not be tabbable
-            radios.forEach((radio) => {
-                radio.tabIndex = -1;
-            });
-        }
-        else {
-            // Normal tabbing behavior
-            const enabledRadios = radios.filter((radio) => !radio.disabled);
-            const checkedRadio = enabledRadios.find((radio) => radio.checked);
-            if (enabledRadios.length > 0) {
-                if (checkedRadio) {
-                    // If there's a checked radio, it should be tabbable
-                    enabledRadios.forEach((radio) => {
-                        radio.tabIndex = radio.checked ? 0 : -1;
-                    });
-                }
-                else {
-                    // If no radio is checked, first enabled radio should be tabbable
-                    enabledRadios.forEach((radio, index) => {
-                        radio.tabIndex = index === 0 ? 0 : -1;
-                    });
-                }
-            }
-            // Disabled radios should never be tabbable
-            radios
-                .filter((radio) => radio.disabled)
-                .forEach((radio) => {
-                radio.tabIndex = -1;
-            });
-        }
+  }
+
+  :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;
     }
-    handleKeyDown(event) {
-        if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' '].includes(event.key) || this.disabled) {
-            return;
-        }
-        const radios = this.getAllRadios().filter((radio) => !radio.disabled);
-        if (radios.length <= 0) {
-            return;
-        }
-        event.preventDefault();
-        const oldValue = this.value;
-        const checkedRadio = radios.find((radio) => radio.checked) ?? radios[0];
-        const incr = event.key === ' ' ? 0 : ['ArrowUp', 'ArrowLeft'].includes(event.key) ? -1 : 1;
-        let index = radios.indexOf(checkedRadio) + incr;
-        if (!index)
-            index = 0;
-        if (index < 0) {
-            index = radios.length - 1;
-        }
-        if (index > radios.length - 1) {
-            index = 0;
-        }
-        const hasRadioButtons = radios.some((radio) => radio.tagName.toLowerCase() === 'w-radio-button');
-        this.getAllRadios().forEach((radio) => {
-            radio.checked = false;
-            if (!hasRadioButtons) {
-                radio.setAttribute('tabindex', '-1');
-            }
-        });
-        this.value = radios[index].value;
-        radios[index].checked = true;
-        if (!hasRadioButtons) {
-            radios[index].setAttribute('tabindex', '0');
-            radios[index].focus();
-        }
-        else {
-            radios[index].shadowRoot.querySelector('button').focus();
-        }
-        if (this.value !== oldValue) {
-            this.updateComplete.then(() => {
-                this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
-                this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-            });
-        }
-        event.preventDefault();
+  }
+
+  /* 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));
     }
-    /** Sets focus on the radio group. */
-    focus(options) {
-        if (this.disabled)
-            return;
-        const radios = this.getAllRadios();
-        const checked = radios.find((radio) => radio.checked);
-        const firstEnabledRadio = radios.find((radio) => !radio.disabled);
-        const radioToFocus = checked || firstEnabledRadio;
-        // Call focus for the checked radio. If no radio is checked, focus the first one that isn't disabled.
-        if (radioToFocus) {
-            radioToFocus.focus(options);
-        }
+  }
+
+  :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 f=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>
+    `}};f.css=[D],l([q()],f.prototype,"checked",2),l([q()],f.prototype,"forceDisabled",2),l([y({reflect:!0})],f.prototype,"form",2),l([y({reflect:!0})],f.prototype,"value",2),l([y({reflect:!0})],f.prototype,"appearance",2),l([y({reflect:!0})],f.prototype,"size",2),l([y({type:Boolean})],f.prototype,"disabled",2);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;
     }
-    render() {
-        const hasLabelSlot = this.hasUpdated ? this.hasSlotController.test('label') : this.withLabel;
-        const hasHintSlot = this.hasUpdated ? this.hasSlotController.test('hint') : this.withHint;
-        const hasLabel = this.label ? true : !!hasLabelSlot;
-        const hasHint = this.hint ? true : !!hasHintSlot;
-        return html `
+  }
+`;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 u;let i={message:"",isValid:!0,invalidKeys:[]};return((u=a.required)!=null?u: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:M("__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 u;if(!["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"," "].includes(t.key)||this.disabled)return;let e=this.getAllRadios().filter(h=>!h.disabled);if(e.length<=0)return;t.preventDefault();let a=this.value,i=(u=e.find(h=>h.checked))!=null?u: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 v=e.some(h=>h.tagName.toLowerCase()==="w-radio-button");this.getAllRadios().forEach(h=>{h.checked=!1,v||h.setAttribute("tabindex","-1")}),this.value=e[n].value,e[n].checked=!0,v?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=${classMap({
-            'form-control': true,
-            'form-control-radio-group': true,
-            'form-control-has-label': hasLabel,
-            'has-radio-buttons': this.hasRadioButtons,
-        })}
+        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"
@@ -277,7 +252,7 @@ export class WRadioGroup extends BaseFormAssociatedElement {
           part="form-control-label"
           id="label"
           class="label"
-          aria-hidden=${hasLabel ? 'false' : 'true'}
+          aria-hidden=${a?"false":"true"}
           @click=${this.handleLabelClick}>
           <slot name="label">${this.label}</slot>
         </label>
@@ -288,52 +263,10 @@ export class WRadioGroup extends BaseFormAssociatedElement {
           id="hint"
           name="hint"
           part="hint"
-          class=${classMap({
-            'has-slotted': hasHint,
-        })}
-          aria-hidden=${hasHint ? 'false' : 'true'}
+          class=${F({"has-slotted":i})}
+          aria-hidden=${i?"false":"true"}
           >${this.hint}</slot
         >
       </fieldset>
-    `;
-    }
-}
-__decorate([
-    state()
-], WRadioGroup.prototype, "hasRadioButtons", void 0);
-__decorate([
-    query('slot:not([name])')
-], WRadioGroup.prototype, "defaultSlot", void 0);
-__decorate([
-    property()
-], WRadioGroup.prototype, "label", void 0);
-__decorate([
-    property({ attribute: 'hint' })
-], WRadioGroup.prototype, "hint", void 0);
-__decorate([
-    property({ reflect: true })
-], WRadioGroup.prototype, "name", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], WRadioGroup.prototype, "disabled", void 0);
-__decorate([
-    property({ reflect: true })
-], WRadioGroup.prototype, "orientation", void 0);
-__decorate([
-    state()
-], WRadioGroup.prototype, "value", null);
-__decorate([
-    property({ attribute: 'value', reflect: true })
-], WRadioGroup.prototype, "defaultValue", void 0);
-__decorate([
-    property({ reflect: true })
-], WRadioGroup.prototype, "size", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], WRadioGroup.prototype, "required", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'with-label' })
-], WRadioGroup.prototype, "withLabel", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'with-hint' })
-], WRadioGroup.prototype, "withHint", void 0);
+    `}};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);export{d as WRadioGroup};
+//# sourceMappingURL=radio-group.js.map