@warp-ds/elements 2.2.0-next.2 → 2.2.0-next.20

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

@@ -0,0 +1,38 @@
+import type { PropertyValues } from 'lit';
+import { BaseFormAssociatedElement } from './form-associated-element';
+export declare class WRadio extends BaseFormAssociatedElement {
+    static css: import("lit").CSSResult[];
+    checked: boolean;
+    /** @internal Used by radio group to force disable radios while preserving their original disabled state. */
+    forceDisabled: boolean;
+    /**
+     * The string pointing to a form's id.
+     */
+    form: string | null;
+    /** The radio's value. When selected, the radio group will receive this value. */
+    value: string;
+    /** The radio's value. When selected, the radio group will receive this value. */
+    appearance: 'default' | 'button' | 'clickable';
+    /**
+     * The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this
+     * attribute can typically be omitted.
+     */
+    size: 'small' | 'medium' | 'large';
+    /** Disables the radio. */
+    disabled: boolean;
+    constructor();
+    connectedCallback(): void;
+    private setInitialAttributes;
+    updated(changedProperties: PropertyValues<this>): void;
+    /**
+     * @override
+     */
+    setValue(): void;
+    private handleClick;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'w-radio': WRadio;
+    }
+}

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

@@ -0,0 +1,183 @@
+var T=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var v=r=>{throw TypeError(r)};var s=(r,i,t,e)=>{for(var a=e>1?void 0:e?M(i,t):i,o=r.length-1,d;o>=0;o--)(d=r[o])&&(a=(e?d(i,t,a):d(a))||a);return e&&a&&T(i,t,a),a};var g=(r,i,t)=>i.has(r)||v("Cannot "+t);var y=(r,i,t)=>(g(r,i,"read from private field"),t?t.call(r):i.get(r)),w=(r,i,t)=>i.has(r)?v("Cannot add the same private member more than once"):i instanceof WeakSet?i.add(r):i.set(r,t),V=(r,i,t,e)=>(g(r,i,"write to private field"),e?e.call(r,t):i.set(r,t),t);import{html as P}from"lit";import{property as f,state as C}from"lit/decorators.js";import{isServer as b}from"lit";import{property as u}from"lit/decorators.js";import{LitElement as z,unsafeCSS as F}from"lit";import{property as E}from"lit/decorators.js";import{css as L}from"lit";var k=L`
+  :host {
+    box-sizing: border-box !important;
+  }
+
+  :host *,
+  :host *::before,
+  :host *::after {
+    box-sizing: inherit !important;
+  }
+`;var h,c=class extends z{constructor(){super();w(this,h,!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[k,...t].map(e=>typeof e=="string"?F(e):e)}attributeChangedCallback(t,e,a){y(this,h)||(this.constructor.elementProperties.forEach((o,d)=>{o.reflect&&this[d]!=null&&this.initialReflectedProperties.set(d,this[d])}),V(this,h,!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}))}};h=new WeakMap,s([E()],c.prototype,"dir",2),s([E()],c.prototype,"lang",2);var S=()=>({observedAttributes:["custom-error"],checkValidity(r){let i={message:"",isValid:!0,invalidKeys:[]};return r.customError&&(i.message=r.customError,i.isValid=!1,i.invalidKeys=["customError"]),i}});var m=class extends Event{constructor(){super("w-invalid",{bubbles:!0,cancelable:!1,composed:!0})}};var n=class extends c{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 m))};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)};b||this.addEventListener("invalid",this.emitInvalid)}static get validators(){return[S()]}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(!b&&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 o of e)a.append(this.name,o);this.setValue(a,a)}}else this.setValue(e,e)}t.has("disabled")&&(this.customStates.set("disabled",this.disabled),(this.hasAttribute("disabled")||!b&&!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],o=t[2];o||(o=this.validationTarget),this.internals.setValidity(e,a,o||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,o="";for(let d of t){let{isValid:I,message:A,invalidKeys:p}=d.checkValidity(this);I||(o||(o=A),(p==null?void 0:p.length)>=0&&p.forEach(D=>e[D]=!0))}o||(o=this.validationMessage),this.setValidity(e,o,a)}};n.formAssociated=!0,s([u({reflect:!0})],n.prototype,"name",2),s([u({type:Boolean})],n.prototype,"disabled",2),s([u({state:!0,attribute:!1})],n.prototype,"valueHasChanged",2),s([u({state:!0,attribute:!1})],n.prototype,"hasInteracted",2),s([u({attribute:"custom-error",reflect:!0})],n.prototype,"customError",2),s([u({attribute:!1,state:!0,type:Object})],n.prototype,"validity",1);import{css as H}from"lit";var x=H`
+  :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);
+  }
+
+  :host([appearance='button']) .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 l=class extends n{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 P`
+      <span part="control" class="control"></span>
+      <slot part="label" class="label"></slot>
+    `}};l.css=[x],s([C()],l.prototype,"checked",2),s([C()],l.prototype,"forceDisabled",2),s([f({reflect:!0})],l.prototype,"form",2),s([f({reflect:!0})],l.prototype,"value",2),s([f({reflect:!0})],l.prototype,"appearance",2),s([f({reflect:!0})],l.prototype,"size",2),s([f({type:Boolean})],l.prototype,"disabled",2);export{l as WRadio};
+//# sourceMappingURL=radio.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/rip-and-tear-radio/radio.ts", "../../../packages/rip-and-tear-radio/form-associated-element.ts", "../../../packages/rip-and-tear-radio/base-element.ts", "../../../packages/rip-and-tear-radio/host-styles.ts", "../../../packages/rip-and-tear-radio/custom-error-validator.ts", "../../../packages/rip-and-tear-radio/invalid.ts", "../../../packages/rip-and-tear-radio/radio-styles.ts"],
+  "sourcesContent": ["import type { PropertyValues } from 'lit';\nimport { html } from 'lit';\n\nimport { property, state } from 'lit/decorators.js';\n\nimport { BaseFormAssociatedElement } from './form-associated-element';\n// eslint-disable-next-line\n// @ts-ignore\nimport { styles } from './radio-styles';\n\nexport class WRadio extends BaseFormAssociatedElement {\n  static css = [styles];\n\n  @state() checked = false;\n\n  /** @internal Used by radio group to force disable radios while preserving their original disabled state. */\n  @state() forceDisabled = false;\n\n  /**\n   * The string pointing to a form's id.\n   */\n  @property({ reflect: true }) form: string | null = null;\n\n  /** The radio's value. When selected, the radio group will receive this value. */\n  @property({ reflect: true }) value: string;\n\n  /** The radio's value. When selected, the radio group will receive this value. */\n  @property({ reflect: true }) appearance: 'default' | 'button' | 'clickable' = 'default';\n\n  /**\n   * The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this\n   * attribute can typically be omitted.\n   */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Disables the radio. */\n  @property({ type: Boolean }) disabled = false;\n\n  constructor() {\n    super();\n    this.addEventListener('click', this.handleClick);\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setInitialAttributes();\n  }\n\n  private setInitialAttributes() {\n    this.setAttribute('role', 'radio');\n    this.tabIndex = 0;\n    this.setAttribute('aria-disabled', this.disabled || this.forceDisabled ? 'true' : 'false');\n  }\n\n  updated(changedProperties: PropertyValues<this>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('checked')) {\n      this.customStates.set('checked', this.checked);\n      this.setAttribute('aria-checked', this.checked ? 'true' : 'false');\n      // Only set tabIndex if not disabled\n      if (!this.disabled && !this.forceDisabled) {\n        this.tabIndex = this.checked ? 0 : -1;\n      }\n    }\n\n    if (changedProperties.has('disabled') || changedProperties.has('forceDisabled')) {\n      const effectivelyDisabled = this.disabled || this.forceDisabled;\n      this.customStates.set('disabled', effectivelyDisabled);\n      this.setAttribute('aria-disabled', effectivelyDisabled ? 'true' : 'false');\n\n      // Set tabIndex based on disabled state\n      if (effectivelyDisabled) {\n        this.tabIndex = -1;\n      } else {\n        // Restore proper tabIndex - this will be managed by the radio group\n        this.tabIndex = this.checked ? 0 : -1;\n      }\n    }\n  }\n\n  /**\n   * @override\n   */\n  setValue(): void {\n    // We override `setValue` because we don't want to set form values from here. We want to do that in \"RadioGroup\" itself.\n  }\n\n  // Update the handleClick method (around line 75)\n  private handleClick = () => {\n    if (!this.disabled && !this.forceDisabled) {\n      this.checked = true;\n    }\n  };\n\n  render() {\n    return html`\n      <span part=\"control\" class=\"control\"></span>\n      <slot part=\"label\" class=\"label\"></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'w-radio': WRadio;\n  }\n}\n", "import { LitElement, isServer } from 'lit';\n\nimport { property } from 'lit/decorators.js';\n\nimport BaseElement from './base-element.js';\nimport { CustomErrorValidator } from './custom-error-validator.js';\nimport { WInvalidEvent } from './invalid';\n\nexport interface Validator<T extends BaseFormAssociatedElement = BaseFormAssociatedElement> {\n  observedAttributes?: string[];\n  checkValidity: (element: T) => {\n    message: string;\n    isValid: boolean;\n    invalidKeys: Exclude<keyof ValidityState, 'valid'>[];\n  };\n  message?: string | ((element: T) => string);\n}\n\nexport interface BaseFormControl extends BaseElement {\n  // Form attributes\n  name: null | string;\n  disabled?: boolean;\n  defaultValue?: unknown;\n  defaultChecked?: boolean;\n  checked?: boolean;\n  defaultSelected?: boolean;\n  selected?: boolean;\n  form?: string | null;\n\n  value?: unknown;\n\n  // Constraint validation attributes\n  pattern?: string;\n  min?: number | string | Date;\n  max?: number | string | Date;\n  step?: number | 'any';\n  required?: boolean;\n  minlength?: number;\n  maxlength?: number;\n\n  // Form validation properties\n  readonly validity: ValidityState;\n  readonly validationMessage: string;\n\n  // Form validation methods\n  checkValidity: () => boolean;\n  getForm: () => HTMLFormElement | null;\n  reportValidity: () => boolean;\n  setCustomValidity: (message: string) => void;\n\n  // Form properties\n  hasInteracted: boolean;\n  valueHasChanged?: boolean;\n\n  /** Convenience API for `setCustomValidity()` */\n  customError: null | string;\n}\n\n// setFormValue omitted so that we can use `setValue`\nexport class BaseFormAssociatedElement extends BaseElement implements Omit<ElementInternals, 'form' | 'setFormValue'>, BaseFormControl {\n  static formAssociated = true;\n\n  /**\n   * Validators are static because they have `observedAttributes`, essentially attributes to \"watch\"\n   * for changes. Whenever these attributes change, we want to be notified and update the validator.\n   */\n  static get validators(): Validator[] {\n    return [CustomErrorValidator()];\n  }\n\n  // Append all Validator \"observedAttributes\" into the \"observedAttributes\" so they can run.\n  static get observedAttributes() {\n    const parentAttrs = new Set(super.observedAttributes || []);\n\n    for (const validator of this.validators) {\n      if (!validator.observedAttributes) {\n        continue;\n      }\n\n      for (const attr of validator.observedAttributes) {\n        parentAttrs.add(attr);\n      }\n    }\n\n    return [...parentAttrs];\n  }\n\n  // Form attributes\n  /** The name of the input, submitted as a name/value pair with form data. */\n  @property({ reflect: true }) name: string | null = null;\n\n  /** Disables the form control. */\n  @property({ type: Boolean }) disabled = false;\n\n  required: boolean = false;\n\n  assumeInteractionOn: string[] = ['input'];\n\n  // Additional\n  input?: (HTMLElement & { value: unknown }) | HTMLInputElement | HTMLTextAreaElement;\n\n  validators: Validator[] = [];\n\n  // Should these be private?\n  @property({ state: true, attribute: false }) valueHasChanged: boolean = false;\n  @property({ state: true, attribute: false }) hasInteracted: boolean = false;\n\n  // This works around a limitation in Safari. It is a hacky way for us to preserve custom errors generated by the user.\n  @property({ attribute: 'custom-error', reflect: true }) customError: string | null = null;\n\n  private emittedEvents: string[] = [];\n\n  constructor() {\n    super();\n\n    if (!isServer) {\n      this.addEventListener('invalid', this.emitInvalid);\n    }\n  }\n  // this bullshit makes no sense but tsc is angry about it\n  // this needs both 'private' and 'typeof' or it will be angry and we don't know why\n  // eslint-disable-next-line\n  // @ts-ignore\n  private states: typeof CustomStateSet;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.updateValidity();\n\n    // Lazily evaluate after the constructor to allow people to override the `assumeInteractionOn`\n    this.assumeInteractionOn.forEach((event) => {\n      this.addEventListener(event, this.handleInteraction);\n    });\n  }\n\n  firstUpdated(...args: Parameters<LitElement['firstUpdated']>) {\n    super.firstUpdated(...args);\n    this.updateValidity();\n  }\n\n  emitInvalid = (e: Event) => {\n    if (e.target !== this) return;\n\n    // An \"invalid\" event counts as interacted, this is usually triggered by a button \"submitting\"\n    this.hasInteracted = true;\n    this.dispatchEvent(new WInvalidEvent());\n  };\n\n  protected willUpdate(changedProperties: Parameters<LitElement['willUpdate']>[0]) {\n    if (!isServer && changedProperties.has('customError')) {\n      // We use null because it we really don't want it to show up in the attributes because `custom-error` does reflect\n      if (!this.customError) {\n        this.customError = null;\n      }\n      this.setCustomValidity(this.customError || '');\n    }\n\n    if (changedProperties.has('value') || changedProperties.has('disabled')) {\n      // @ts-expect-error Some components will use an accessors, other use a property, so we don't want to limit them.\n      const value = this.value as unknown;\n\n      // Accounts for the snowflake case on `<wa-select>`\n      if (Array.isArray(value)) {\n        if (this.name) {\n          const formData = new FormData();\n          for (const val of value) {\n            formData.append(this.name, val as string);\n          }\n          this.setValue(formData, formData);\n        }\n      } else {\n        this.setValue(value as FormData | string | File | null, value as FormData | string | File | null);\n      }\n    }\n\n    if (changedProperties.has('disabled')) {\n      this.customStates.set('disabled', this.disabled);\n\n      if (this.hasAttribute('disabled') || (!isServer && !this.matches(':disabled'))) {\n        this.toggleAttribute('disabled', this.disabled);\n      }\n    }\n\n    this.updateValidity();\n    super.willUpdate(changedProperties);\n  }\n\n  private handleInteraction = (event: Event) => {\n    const emittedEvents = this.emittedEvents;\n    if (!emittedEvents.includes(event.type)) {\n      emittedEvents.push(event.type);\n    }\n\n    // Mark it as user-interacted as soon as all associated events have been emitted\n    if (emittedEvents.length === this.assumeInteractionOn?.length) {\n      this.hasInteracted = true;\n    }\n  };\n\n  get labels() {\n    return this.internals.labels;\n  }\n\n  getForm() {\n    return this.internals.form;\n  }\n\n  @property({ attribute: false, state: true, type: Object })\n  get validity() {\n    return this.internals.validity;\n  }\n\n  // Not sure if this supports `novalidate`. Will need to test.\n  get willValidate() {\n    return this.internals.willValidate;\n  }\n\n  get validationMessage() {\n    return this.internals.validationMessage;\n  }\n\n  checkValidity() {\n    this.updateValidity();\n    return this.internals.checkValidity();\n  }\n\n  reportValidity() {\n    this.updateValidity();\n    // This seems reasonable. `reportValidity()` is kind of like \"we expect you to have interacted\"\n    this.hasInteracted = true;\n    return this.internals.reportValidity();\n  }\n\n  /**\n   * Override this to change where constraint validation popups are anchored.\n   */\n  get validationTarget(): undefined | HTMLElement {\n    return (this.input || undefined) as undefined | HTMLElement;\n  }\n\n  setValidity(...args: Parameters<typeof this.internals.setValidity>) {\n    const flags = args[0];\n    const message = args[1];\n    let anchor = args[2];\n\n    if (!anchor) {\n      anchor = this.validationTarget;\n    }\n\n    this.internals.setValidity(flags, message, anchor || undefined);\n    this.requestUpdate('validity');\n    this.setCustomStates();\n  }\n\n  setCustomStates() {\n    const required = Boolean(this.required);\n    const isValid = this.internals.validity.valid;\n    const hasInteracted = this.hasInteracted;\n\n    this.customStates.set('required', required);\n    this.customStates.set('optional', !required);\n    this.customStates.set('invalid', !isValid);\n    this.customStates.set('valid', isValid);\n    this.customStates.set('user-invalid', !isValid && hasInteracted);\n    this.customStates.set('user-valid', isValid && hasInteracted);\n  }\n\n  /**\n   * Do not use this when creating a \"Validator\". This is intended for end users of components.\n   * We track manually defined custom errors so we don't clear them on accident in our validators.\n   *\n   */\n  setCustomValidity(message: string) {\n    if (!message) {\n      // We use null because it we really don't want it to show up in the attributes because `custom-error` does reflect\n      this.customError = null;\n      this.setValidity({});\n      return;\n    }\n\n    this.customError = message;\n    this.setValidity({ customError: true }, message, this.validationTarget);\n  }\n\n  formResetCallback() {\n    this.resetValidity();\n    this.hasInteracted = false;\n    this.valueHasChanged = false;\n    this.emittedEvents = [];\n    this.updateValidity();\n  }\n\n  formDisabledCallback(isDisabled: boolean) {\n    this.disabled = isDisabled;\n\n    this.updateValidity();\n  }\n\n  /**\n   * Called when the browser is trying to restore element\u2019s state to state in which case reason is \"restore\", or when\n   * the browser is trying to fulfill autofill on behalf of user in which case reason is \"autocomplete\". In the case of\n   * \"restore\", state is a string, File, or FormData object previously set as the second argument to setFormValue.\n   */\n  formStateRestoreCallback(state: string | File | FormData | null, reason: 'autocomplete' | 'restore') {\n    // @ts-expect-error We purposely do not have a value property. It makes things hard to extend.\n    this.value = state;\n\n    if (reason === 'restore') {\n      this.resetValidity();\n    }\n\n    this.updateValidity();\n  }\n\n  setValue(...args: Parameters<typeof this.internals.setFormValue>) {\n    const [value, state] = args;\n\n    this.internals.setFormValue(value, state);\n  }\n\n  get allValidators() {\n    const staticValidators = (this.constructor as typeof BaseFormAssociatedElement).validators || [];\n\n    const validators = this.validators || [];\n    return [...staticValidators, ...validators];\n  }\n\n  /**\n   * Reset validity is a way of removing manual custom errors and native validation.\n   */\n  resetValidity() {\n    this.setCustomValidity('');\n    this.setValidity({});\n  }\n\n  updateValidity() {\n    if (\n      this.disabled ||\n      this.hasAttribute('disabled') ||\n      !this.willValidate //\n    ) {\n      this.resetValidity();\n\n      return;\n    }\n\n    const validators = this.allValidators;\n\n    if (!validators?.length) {\n      // If there's no validators, we do nothing. We also don't want to mess with custom errors, so we just stop here.\n      return;\n    }\n\n    type ValidityKey = { -readonly [P in keyof ValidityState]: ValidityState[P] };\n\n    const flags: Partial<ValidityKey> = {\n      // Don't trust custom errors from the Browser. Safari breaks the spec.\n      customError: Boolean(this.customError),\n    };\n\n    const formControl = this.validationTarget || this.input || undefined;\n\n    let finalMessage = '';\n\n    for (const validator of validators) {\n      const { isValid, message, invalidKeys } = validator.checkValidity(this);\n\n      if (isValid) {\n        continue;\n      }\n\n      if (!finalMessage) {\n        finalMessage = message;\n      }\n\n      if (invalidKeys?.length >= 0) {\n        (invalidKeys as (keyof ValidityState)[]).forEach((str) => (flags[str] = true));\n      }\n    }\n\n    // This is a workaround for preserving custom errors\n    if (!finalMessage) {\n      finalMessage = this.validationMessage;\n    }\n\n    this.setValidity(flags, finalMessage, formControl);\n  }\n}\n", "// eslint-disable-next-line\n// @ts-nocheck\nimport type { CSSResult, CSSResultGroup } from 'lit';\nimport { LitElement, unsafeCSS } from 'lit';\n\nimport { property } from 'lit/decorators.js';\n\nimport { styles as hostStyles } from './host-styles';\n\n// Augment Lit's module\ndeclare module 'lit' {\n  interface PropertyDeclaration {\n    /**\n     * Specifies the property\u2019s default value\n     */\n    /* eslint-disable */\n    default?: any;\n    /* eslint-disable */\n    initial?: any;\n  }\n}\n\nexport default class BaseElement extends LitElement {\n  /**\n   * One or more CSS files to include in the component's shadow root. Host styles are automatically prepended. We use\n   * this instead of Lit's styles property because we're importing CSS files as strings and need to convert them using\n   * unsafeCSS.\n   */\n  static css?: CSSResultGroup | CSSResult | string | (CSSResult | string)[];\n\n  /**\n   * Override the default styles property to fetch and convert string CSS files. Components can override this behavior\n   * by setting their own `static styles = []` property.\n   */\n  static get styles(): CSSResultGroup {\n    const styles = Array.isArray(this.css) ? this.css : this.css ? [this.css] : [];\n    return [hostStyles, ...styles].map((style) => (typeof style === 'string' ? unsafeCSS(style) : style));\n  }\n\n  #hasRecordedInitialProperties = false;\n  initialReflectedProperties: Map<string, unknown> = new Map();\n  internals: ElementInternals;\n\n  // Make localization attributes reactive\n  @property() dir: string;\n  @property() lang: string;\n\n  constructor() {\n    super();\n\n    try {\n      this.internals = this.attachInternals();\n    } catch {\n      /* Need to tell people if they need a polyfill. */\n\n      console.error('Element internals are not supported in your browser. Consider using a polyfill');\n    }\n\n    this.customStates.set('wa-defined', true);\n\n    const Self = this.constructor as typeof BaseElement;\n    for (const [property, spec] of Self.elementProperties) {\n      if (spec.default === 'inherit' && spec.initial !== undefined && typeof property === 'string') {\n        this.customStates.set(`initial-${property}-${spec.initial}`, true);\n      }\n    }\n  }\n\n  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {\n    if (!this.#hasRecordedInitialProperties) {\n      (this.constructor as typeof BaseElement).elementProperties.forEach((obj, prop: keyof typeof this & string) => {\n\n          if (obj.reflect && this[prop] != null) {\n          this.initialReflectedProperties.set(prop, this[prop]);\n        }\n      });\n\n      this.#hasRecordedInitialProperties = true;\n    }\n\n    super.attributeChangedCallback(name, oldValue, newValue);\n  }\n\n  protected willUpdate(changedProperties: Parameters<LitElement['willUpdate']>[0]): void {\n    super.willUpdate(changedProperties);\n\n    // Run the morph fixing *after* willUpdate.\n    this.initialReflectedProperties.forEach((value, prop: string & keyof typeof this) => {\n      // If a prop changes to `null`, we assume this happens via an attribute changing to `null`.\n\n      if (changedProperties.has(prop) && this[prop] == null) {\n        // Silly type gymnastics to appease the compiler.\n        (this as Record<string, unknown>)[prop] = value;\n      }\n    });\n  }\n\n  /**\n   * Methods for setting and checking custom states.\n   */\n  public customStates = {\n    /** Adds or removes the specified custom state. */\n    set: (customState: string, active: boolean) => {\n      if (!this.internals?.states) return;\n      if (active) {\n        this.internals.states.add(customState);\n      } else {\n        this.internals.states.delete(customState);\n      }\n    },\n\n    /** Determines whether or not the element currently has the specified state. */\n    has: (customState: string) => {\n      if (!this.internals?.states) return false;\n      return this.internals.states.has(customState);\n    },\n  };\n\n  /**\n   * Given a native event, this function cancels it and dispatches it again from the host element using the desired\n   * event options.\n   */\n  relayNativeEvent(event: Event, eventOptions?: EventInit) {\n    event.stopImmediatePropagation();\n\n    this.dispatchEvent(\n      new (event.constructor as typeof Event)(event.type, {\n        ...event,\n        ...eventOptions,\n      }),\n    );\n  }\n}\n", "import { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    box-sizing: border-box !important;\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit !important;\n  }\n`;\n", "import type { Validator } from './form-associated-element';\n\n/**\n * This validator is for if you have an exact copy of your element in the shadow DOM. Rather than needing\n * custom translations and error messages, you can simply rely on the element \"formControl\" in your shadow dom.\n */\nexport const CustomErrorValidator = (): Validator => {\n  return {\n    observedAttributes: ['custom-error'],\n    checkValidity(element) {\n      const validity: ReturnType<Validator['checkValidity']> = {\n        message: '',\n        isValid: true,\n        invalidKeys: [],\n      };\n\n      if (element.customError) {\n        validity.message = element.customError;\n        validity.isValid = false;\n        validity.invalidKeys = ['customError'];\n      }\n\n      return validity;\n    },\n  };\n};\n", "export class WInvalidEvent extends Event {\n  constructor() {\n    super('w-invalid', { bubbles: true, cancelable: false, composed: true });\n  }\n}\n\ndeclare global {\n  interface GlobalEventHandlersEventMap {\n    'wa-invalid': WInvalidEvent;\n  }\n}\n", "import { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    color: var(--wa-form-control-value-color);\n    display: inline-flex;\n    flex-direction: row;\n    align-items: top;\n    font-family: inherit;\n    font-weight: var(--wa-form-control-value-font-weight);\n    line-height: var(--wa-form-control-value-line-height);\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  :host(:focus) {\n    outline: none;\n  }\n\n  [part~='label'] {\n    display: inline;\n  }\n\n  [part~='hint'] {\n    margin-block-start: 0.5em;\n  }\n\n  /* Default appearance */\n  :host([appearance='default']) .control {\n    flex: 0 0 auto;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--wa-form-control-toggle-size, 2rem);\n    height: var(--wa-form-control-toggle-size, 2rem);\n    border-color: var(--wa-form-control-border-color, gray);\n    border-radius: 50%;\n    border-style: var(--wa-form-control-border-style, solid);\n    border-width: var(--wa-form-control-border-width, 1px);\n    background-color: var(--wa-form-control-background-color, white);\n    color: transparent;\n    transition-property: all;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 150ms;\n\n    margin-inline-end: 0.5em;\n  }\n\n  :host([appearance='clickable']) .control {\n    position: absolute;\n    inset: 0;\n    height: 100%;\n    width: 100%;\n    cursor: pointer;\n  }\n\n  /* Checked */\n  :host(:state(checked)):not(:host([appearance='clickable'])) .control {\n    /* color: var(--checked-icon-color, white); */\n    border-color: var(--wa-form-control-activated-color, blue);\n    background-color: var(--wa-form-control-background-color, white);\n    border-width: 0.6rem;\n  }\n\n  /* Focus */\n  :host(:focus-visible) .control {\n    outline: 2px solid var(--w-s-color-border-focus);\n    outline-offset: var(--w-outline-offset, 1px);\n  }\n\n  :host([appearance='clickable']:focus-visible) .control {\n    outline-offset: -4px;\n    border-radius: 8px;\n  }\n\n  /* Disabled */\n  :host(:state(disabled)) {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  /* Button appearance */\n  :host([appearance='button']) {\n    align-items: center;\n    min-height: var(--wa-form-control-height);\n    background-color: var(--wa-color-surface-default);\n    border: var(--wa-form-control-border-width) var(--wa-form-control-border-style) var(--wa-form-control-border-color);\n    border-radius: var(--wa-border-radius-m);\n    padding: 0 var(--wa-form-control-padding-inline);\n    transition:\n      background-color var(--wa-transition-fast),\n      border-color var(--wa-transition-fast);\n  }\n\n  :host([appearance='button']) .control {\n    display: none;\n  }\n\n  /* Horizontal grouping - remove inner border radius */\n  :host([appearance='button'][data-wa-radio-horizontal][data-wa-radio-inner]) {\n    border-radius: 0;\n  }\n\n  :host([appearance='button'][data-wa-radio-horizontal][data-wa-radio-first]) {\n    border-start-end-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  :host([appearance='button'][data-wa-radio-horizontal][data-wa-radio-last]) {\n    border-start-start-radius: 0;\n    border-end-start-radius: 0;\n  }\n\n  /* Vertical grouping - remove inner border radius */\n  :host([appearance='button'][data-wa-radio-vertical][data-wa-radio-inner]) {\n    border-radius: 0;\n  }\n\n  :host([appearance='button'][data-wa-radio-vertical][data-wa-radio-first]) {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  :host([appearance='button'][data-wa-radio-vertical][data-wa-radio-last]) {\n    border-start-start-radius: 0;\n    border-start-end-radius: 0;\n  }\n\n  @media (hover: hover) {\n    :host([appearance='button']:hover:not(:state(disabled), :state(checked))) {\n      background-color: color-mix(in srgb, var(--wa-color-surface-default) 95%, var(--wa-color-mix-hover));\n    }\n  }\n\n  :host([appearance='button']:focus-visible) {\n    outline: var(--wa-focus-ring);\n    outline-offset: var(--wa-focus-ring-offset);\n  }\n\n  :host([appearance='button']:state(checked)) {\n    border-color: var(--wa-form-control-activated-color);\n    background-color: var(--wa-color-brand-fill-quiet);\n  }\n\n  :host([appearance='button']:state(checked):focus-visible) {\n    outline: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-brand-border-loud);\n    outline-offset: var(--wa-focus-ring-offset);\n  }\n\n  /* Remove inner borders and handle overlap */\n  :host([appearance='button'][data-wa-radio-horizontal]:not([data-wa-radio-first])) {\n    margin-inline-start: calc(-1 * var(--wa-form-control-border-width));\n  }\n\n  :host([appearance='button'][data-wa-radio-vertical]:not([data-wa-radio-first])) {\n    margin-block-start: calc(-1 * var(--wa-form-control-border-width));\n  }\n\n  /* Ensure interactive states are visible above adjacent buttons */\n  :host([appearance='button']:hover),\n  :host([appearance='button']:state(checked)) {\n    position: relative;\n    z-index: 1;\n  }\n\n  :host([appearance='button']:focus-visible) {\n    z-index: 2;\n  }\n`;\n"],
+  "mappings": "mhBACA,OAAS,QAAAA,MAAY,MAErB,OAAS,YAAAC,EAAU,SAAAC,MAAa,oBCHhC,OAAqB,YAAAC,MAAgB,MAErC,OAAS,YAAAC,MAAgB,oBCCzB,OAAS,cAAAC,EAAY,aAAAC,MAAiB,MAEtC,OAAS,YAAAC,MAAgB,oBCLzB,OAAS,OAAAC,MAAW,MAEb,IAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EDFtB,IAAAE,EAsBqBC,EAArB,cAAyCC,CAAW,CAyBlD,aAAc,CACZ,MAAM,EATRC,EAAA,KAAAH,EAAgC,IAChC,gCAAmD,IAAI,IA4DvD,KAAO,aAAe,CAEpB,IAAK,CAACI,EAAqBC,IAAoB,CAtGnD,IAAAC,GAuGWA,EAAA,KAAK,YAAL,MAAAA,EAAgB,SACjBD,EACF,KAAK,UAAU,OAAO,IAAID,CAAW,EAErC,KAAK,UAAU,OAAO,OAAOA,CAAW,EAE5C,EAGA,IAAMA,GAAwB,CAhHlC,IAAAE,EAiHM,OAAKA,EAAA,KAAK,YAAL,MAAAA,EAAgB,OACd,KAAK,UAAU,OAAO,IAAIF,CAAW,EADR,EAEtC,CACF,EAlEE,GAAI,CACF,KAAK,UAAY,KAAK,gBAAgB,CACxC,OAAQ,GAGN,QAAQ,MAAM,gFAAgF,CAChG,CAEA,KAAK,aAAa,IAAI,aAAc,EAAI,EAExC,IAAMG,EAAO,KAAK,YAClB,OAAW,CAACC,EAAUC,CAAI,IAAKF,EAAK,kBAC9BE,EAAK,UAAY,WAAaA,EAAK,UAAY,QAAa,OAAOD,GAAa,UAClF,KAAK,aAAa,IAAI,WAAWA,CAAQ,IAAIC,EAAK,OAAO,GAAI,EAAI,CAGvE,CAhCA,WAAW,QAAyB,CAClC,IAAMC,EAAS,MAAM,QAAQ,KAAK,GAAG,EAAI,KAAK,IAAM,KAAK,IAAM,CAAC,KAAK,GAAG,EAAI,CAAC,EAC7E,MAAO,CAACA,EAAY,GAAGA,CAAM,EAAE,IAAKC,GAAW,OAAOA,GAAU,SAAWC,EAAUD,CAAK,EAAIA,CAAM,CACtG,CA+BA,yBAAyBE,EAAcC,EAAyBC,EAAyB,CAClFC,EAAA,KAAKhB,KACP,KAAK,YAAmC,kBAAkB,QAAQ,CAACiB,EAAKC,IAAqC,CAEtGD,EAAI,SAAW,KAAKC,CAAI,GAAK,MACjC,KAAK,2BAA2B,IAAIA,EAAM,KAAKA,CAAI,CAAC,CAExD,CAAC,EAEDC,EAAA,KAAKnB,EAAgC,KAGvC,MAAM,yBAAyBa,EAAMC,EAAUC,CAAQ,CACzD,CAEU,WAAWK,EAAkE,CACrF,MAAM,WAAWA,CAAiB,EAGlC,KAAK,2BAA2B,QAAQ,CAACC,EAAOH,IAAqC,CAG/EE,EAAkB,IAAIF,CAAI,GAAK,KAAKA,CAAI,GAAK,OAE9C,KAAiCA,CAAI,EAAIG,EAE9C,CAAC,CACH,CA2BA,iBAAiBC,EAAcC,EAA0B,CACvDD,EAAM,yBAAyB,EAE/B,KAAK,cACH,IAAKA,EAAM,YAA6BA,EAAM,KAAM,CAClD,GAAGA,EACH,GAAGC,CACL,CAAC,CACH,CACF,CACF,EA7FEvB,EAAA,YAKYwB,EAAA,CAAXhB,EAAS,GAtBSP,EAsBP,mBACAuB,EAAA,CAAXhB,EAAS,GAvBSP,EAuBP,oBEvCP,IAAMwB,EAAuB,KAC3B,CACL,mBAAoB,CAAC,cAAc,EACnC,cAAcC,EAAS,CACrB,IAAMC,EAAmD,CACvD,QAAS,GACT,QAAS,GACT,YAAa,CAAC,CAChB,EAEA,OAAID,EAAQ,cACVC,EAAS,QAAUD,EAAQ,YAC3BC,EAAS,QAAU,GACnBA,EAAS,YAAc,CAAC,aAAa,GAGhCA,CACT,CACF,GCxBK,IAAMC,EAAN,cAA4B,KAAM,CACvC,aAAc,CACZ,MAAM,YAAa,CAAE,QAAS,GAAM,WAAY,GAAO,SAAU,EAAK,CAAC,CACzE,CACF,EJuDO,IAAMC,EAAN,cAAwCC,CAAwF,CAqDrI,aAAc,CACZ,MAAM,EAxBqB,UAAsB,KAGtB,cAAW,GAExC,cAAoB,GAEpB,yBAAgC,CAAC,OAAO,EAKxC,gBAA0B,CAAC,EAGkB,qBAA2B,GAC3B,mBAAyB,GAGd,iBAA6B,KAErF,KAAQ,cAA0B,CAAC,EA8BnC,iBAAeC,GAAa,CACtBA,EAAE,SAAW,OAGjB,KAAK,cAAgB,GACrB,KAAK,cAAc,IAAIC,CAAe,EACxC,EAyCA,KAAQ,kBAAqBC,GAAiB,CA3LhD,IAAAC,EA4LI,IAAMC,EAAgB,KAAK,cACtBA,EAAc,SAASF,EAAM,IAAI,GACpCE,EAAc,KAAKF,EAAM,IAAI,EAI3BE,EAAc,WAAWD,EAAA,KAAK,sBAAL,YAAAA,EAA0B,UACrD,KAAK,cAAgB,GAEzB,EAlFOE,GACH,KAAK,iBAAiB,UAAW,KAAK,WAAW,CAErD,CApDA,WAAW,YAA0B,CACnC,MAAO,CAACC,EAAqB,CAAC,CAChC,CAGA,WAAW,oBAAqB,CAC9B,IAAMC,EAAc,IAAI,IAAI,MAAM,oBAAsB,CAAC,CAAC,EAE1D,QAAWC,KAAa,KAAK,WAC3B,GAAKA,EAAU,mBAIf,QAAWC,KAAQD,EAAU,mBAC3BD,EAAY,IAAIE,CAAI,EAIxB,MAAO,CAAC,GAAGF,CAAW,CACxB,CAwCA,mBAAoB,CAClB,MAAM,kBAAkB,EACxB,KAAK,eAAe,EAGpB,KAAK,oBAAoB,QAASL,GAAU,CAC1C,KAAK,iBAAiBA,EAAO,KAAK,iBAAiB,CACrD,CAAC,CACH,CAEA,gBAAgBQ,EAA8C,CAC5D,MAAM,aAAa,GAAGA,CAAI,EAC1B,KAAK,eAAe,CACtB,CAUU,WAAWC,EAA4D,CAS/E,GARI,CAACN,GAAYM,EAAkB,IAAI,aAAa,IAE7C,KAAK,cACR,KAAK,YAAc,MAErB,KAAK,kBAAkB,KAAK,aAAe,EAAE,GAG3CA,EAAkB,IAAI,OAAO,GAAKA,EAAkB,IAAI,UAAU,EAAG,CAEvE,IAAMC,EAAQ,KAAK,MAGnB,GAAI,MAAM,QAAQA,CAAK,GACrB,GAAI,KAAK,KAAM,CACb,IAAMC,EAAW,IAAI,SACrB,QAAWC,KAAOF,EAChBC,EAAS,OAAO,KAAK,KAAMC,CAAa,EAE1C,KAAK,SAASD,EAAUA,CAAQ,CAClC,OAEA,KAAK,SAASD,EAA0CA,CAAwC,CAEpG,CAEID,EAAkB,IAAI,UAAU,IAClC,KAAK,aAAa,IAAI,WAAY,KAAK,QAAQ,GAE3C,KAAK,aAAa,UAAU,GAAM,CAACN,GAAY,CAAC,KAAK,QAAQ,WAAW,IAC1E,KAAK,gBAAgB,WAAY,KAAK,QAAQ,GAIlD,KAAK,eAAe,EACpB,MAAM,WAAWM,CAAiB,CACpC,CAcA,IAAI,QAAS,CACX,OAAO,KAAK,UAAU,MACxB,CAEA,SAAU,CACR,OAAO,KAAK,UAAU,IACxB,CAGA,IAAI,UAAW,CACb,OAAO,KAAK,UAAU,QACxB,CAGA,IAAI,cAAe,CACjB,OAAO,KAAK,UAAU,YACxB,CAEA,IAAI,mBAAoB,CACtB,OAAO,KAAK,UAAU,iBACxB,CAEA,eAAgB,CACd,YAAK,eAAe,EACb,KAAK,UAAU,cAAc,CACtC,CAEA,gBAAiB,CACf,YAAK,eAAe,EAEpB,KAAK,cAAgB,GACd,KAAK,UAAU,eAAe,CACvC,CAKA,IAAI,kBAA4C,CAC9C,OAAQ,KAAK,OAAS,MACxB,CAEA,eAAeD,EAAqD,CAClE,IAAMK,EAAQL,EAAK,CAAC,EACdM,EAAUN,EAAK,CAAC,EAClBO,EAASP,EAAK,CAAC,EAEdO,IACHA,EAAS,KAAK,kBAGhB,KAAK,UAAU,YAAYF,EAAOC,EAASC,GAAU,MAAS,EAC9D,KAAK,cAAc,UAAU,EAC7B,KAAK,gBAAgB,CACvB,CAEA,iBAAkB,CAChB,IAAMC,EAAW,EAAQ,KAAK,SACxBC,EAAU,KAAK,UAAU,SAAS,MAClCC,EAAgB,KAAK,cAE3B,KAAK,aAAa,IAAI,WAAYF,CAAQ,EAC1C,KAAK,aAAa,IAAI,WAAY,CAACA,CAAQ,EAC3C,KAAK,aAAa,IAAI,UAAW,CAACC,CAAO,EACzC,KAAK,aAAa,IAAI,QAASA,CAAO,EACtC,KAAK,aAAa,IAAI,eAAgB,CAACA,GAAWC,CAAa,EAC/D,KAAK,aAAa,IAAI,aAAcD,GAAWC,CAAa,CAC9D,CAOA,kBAAkBJ,EAAiB,CACjC,GAAI,CAACA,EAAS,CAEZ,KAAK,YAAc,KACnB,KAAK,YAAY,CAAC,CAAC,EACnB,MACF,CAEA,KAAK,YAAcA,EACnB,KAAK,YAAY,CAAE,YAAa,EAAK,EAAGA,EAAS,KAAK,gBAAgB,CACxE,CAEA,mBAAoB,CAClB,KAAK,cAAc,EACnB,KAAK,cAAgB,GACrB,KAAK,gBAAkB,GACvB,KAAK,cAAgB,CAAC,EACtB,KAAK,eAAe,CACtB,CAEA,qBAAqBK,EAAqB,CACxC,KAAK,SAAWA,EAEhB,KAAK,eAAe,CACtB,CAOA,yBAAyBC,EAAwCC,EAAoC,CAEnG,KAAK,MAAQD,EAETC,IAAW,WACb,KAAK,cAAc,EAGrB,KAAK,eAAe,CACtB,CAEA,YAAYb,EAAsD,CAChE,GAAM,CAACE,EAAOU,CAAK,EAAIZ,EAEvB,KAAK,UAAU,aAAaE,EAAOU,CAAK,CAC1C,CAEA,IAAI,eAAgB,CAClB,IAAME,EAAoB,KAAK,YAAiD,YAAc,CAAC,EAEzFC,EAAa,KAAK,YAAc,CAAC,EACvC,MAAO,CAAC,GAAGD,EAAkB,GAAGC,CAAU,CAC5C,CAKA,eAAgB,CACd,KAAK,kBAAkB,EAAE,EACzB,KAAK,YAAY,CAAC,CAAC,CACrB,CAEA,gBAAiB,CACf,GACE,KAAK,UACL,KAAK,aAAa,UAAU,GAC5B,CAAC,KAAK,aACN,CACA,KAAK,cAAc,EAEnB,MACF,CAEA,IAAMA,EAAa,KAAK,cAExB,GAAI,EAACA,GAAA,MAAAA,EAAY,QAEf,OAKF,IAAMV,EAA8B,CAElC,YAAa,EAAQ,KAAK,WAC5B,EAEMW,EAAc,KAAK,kBAAoB,KAAK,OAAS,OAEvDC,EAAe,GAEnB,QAAWnB,KAAaiB,EAAY,CAClC,GAAM,CAAE,QAAAN,EAAS,QAAAH,EAAS,YAAAY,CAAY,EAAIpB,EAAU,cAAc,IAAI,EAElEW,IAICQ,IACHA,EAAeX,IAGbY,GAAA,YAAAA,EAAa,SAAU,GACxBA,EAAwC,QAASC,GAASd,EAAMc,CAAG,EAAI,EAAK,EAEjF,CAGKF,IACHA,EAAe,KAAK,mBAGtB,KAAK,YAAYZ,EAAOY,EAAcD,CAAW,CACnD,CACF,EAxUa5B,EACJ,eAAiB,GA6BKgC,EAAA,CAA5BC,EAAS,CAAE,QAAS,EAAK,CAAC,GA9BhBjC,EA8BkB,oBAGAgC,EAAA,CAA5BC,EAAS,CAAE,KAAM,OAAQ,CAAC,GAjChBjC,EAiCkB,wBAYgBgC,EAAA,CAA5CC,EAAS,CAAE,MAAO,GAAM,UAAW,EAAM,CAAC,GA7ChCjC,EA6CkC,+BACAgC,EAAA,CAA5CC,EAAS,CAAE,MAAO,GAAM,UAAW,EAAM,CAAC,GA9ChCjC,EA8CkC,6BAGWgC,EAAA,CAAvDC,EAAS,CAAE,UAAW,eAAgB,QAAS,EAAK,CAAC,GAjD3CjC,EAiD6C,2BAoGpDgC,EAAA,CADHC,EAAS,CAAE,UAAW,GAAO,MAAO,GAAM,KAAM,MAAO,CAAC,GApJ9CjC,EAqJP,wBKhNN,OAAS,OAAAkC,MAAW,MAEb,IAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ENQf,IAAME,EAAN,cAAqBC,CAA0B,CA4BpD,aAAc,CACZ,MAAM,EA1BC,aAAU,GAGV,mBAAgB,GAKI,UAAsB,KAMtB,gBAAiD,UAMjD,UAAqC,SAGrC,cAAW,GAqDxC,KAAQ,YAAc,IAAM,CACtB,CAAC,KAAK,UAAY,CAAC,KAAK,gBAC1B,KAAK,QAAU,GAEnB,EArDE,KAAK,iBAAiB,QAAS,KAAK,WAAW,CACjD,CAEA,mBAAoB,CAClB,MAAM,kBAAkB,EACxB,KAAK,qBAAqB,CAC5B,CAEQ,sBAAuB,CAC7B,KAAK,aAAa,OAAQ,OAAO,EACjC,KAAK,SAAW,EAChB,KAAK,aAAa,gBAAiB,KAAK,UAAY,KAAK,cAAgB,OAAS,OAAO,CAC3F,CAEA,QAAQC,EAAyC,CAY/C,GAXA,MAAM,QAAQA,CAAiB,EAE3BA,EAAkB,IAAI,SAAS,IACjC,KAAK,aAAa,IAAI,UAAW,KAAK,OAAO,EAC7C,KAAK,aAAa,eAAgB,KAAK,QAAU,OAAS,OAAO,EAE7D,CAAC,KAAK,UAAY,CAAC,KAAK,gBAC1B,KAAK,SAAW,KAAK,QAAU,EAAI,KAInCA,EAAkB,IAAI,UAAU,GAAKA,EAAkB,IAAI,eAAe,EAAG,CAC/E,IAAMC,EAAsB,KAAK,UAAY,KAAK,cAClD,KAAK,aAAa,IAAI,WAAYA,CAAmB,EACrD,KAAK,aAAa,gBAAiBA,EAAsB,OAAS,OAAO,EAGrEA,EACF,KAAK,SAAW,GAGhB,KAAK,SAAW,KAAK,QAAU,EAAI,EAEvC,CACF,CAKA,UAAiB,CAEjB,CASA,QAAS,CACP,OAAOC;AAAA;AAAA;AAAA,KAIT,CACF,EA3FaJ,EACJ,IAAM,CAACK,CAAM,EAEXC,EAAA,CAARC,EAAM,GAHIP,EAGF,uBAGAM,EAAA,CAARC,EAAM,GANIP,EAMF,6BAKoBM,EAAA,CAA5BE,EAAS,CAAE,QAAS,EAAK,CAAC,GAXhBR,EAWkB,oBAGAM,EAAA,CAA5BE,EAAS,CAAE,QAAS,EAAK,CAAC,GAdhBR,EAckB,qBAGAM,EAAA,CAA5BE,EAAS,CAAE,QAAS,EAAK,CAAC,GAjBhBR,EAiBkB,0BAMAM,EAAA,CAA5BE,EAAS,CAAE,QAAS,EAAK,CAAC,GAvBhBR,EAuBkB,oBAGAM,EAAA,CAA5BE,EAAS,CAAE,KAAM,OAAQ,CAAC,GA1BhBR,EA0BkB",
+  "names": ["html", "property", "state", "isServer", "property", "LitElement", "unsafeCSS", "property", "css", "styles", "_hasRecordedInitialProperties", "BaseElement", "LitElement", "__privateAdd", "customState", "active", "_a", "Self", "property", "spec", "styles", "style", "unsafeCSS", "name", "oldValue", "newValue", "__privateGet", "obj", "prop", "__privateSet", "changedProperties", "value", "event", "eventOptions", "__decorateClass", "CustomErrorValidator", "element", "validity", "WInvalidEvent", "BaseFormAssociatedElement", "BaseElement", "e", "WInvalidEvent", "event", "_a", "emittedEvents", "isServer", "CustomErrorValidator", "parentAttrs", "validator", "attr", "args", "changedProperties", "value", "formData", "val", "flags", "message", "anchor", "required", "isValid", "hasInteracted", "isDisabled", "state", "reason", "staticValidators", "validators", "formControl", "finalMessage", "invalidKeys", "str", "__decorateClass", "property", "css", "styles", "WRadio", "BaseFormAssociatedElement", "changedProperties", "effectivelyDisabled", "html", "styles", "__decorateClass", "state", "property"]
+}

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

@@ -0,0 +1,8 @@
+import type { StoryObj } from '@storybook/web-components-vite';
+import './index';
+declare const _default: {
+    title: string;
+    render: () => import("lit").TemplateResult<1>;
+};
+export default _default;
+export declare const Default: StoryObj;

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

@@ -0,0 +1,275 @@
+var U=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&&U(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 Y}from"lit";import{html as K}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 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:h}=o.checkValidity(this);n||(i||(i=v),(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 j}from"lit";var I=j`
+  :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);
+  }
+
+  :host([appearance='button']) .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 K`
+      <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 O}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 v=e.some(f=>f.tagName.toLowerCase()==="w-radio-button");this.getAllRadios().forEach(f=>{f.checked=!1,v||f.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=${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([O()],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([O()],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));var Xt={title:"Forms/Radio",render:()=>Y`
+      <w-radio-group label="Group" name="foobar" value="foo">
+        <w-radio value="foo">foo</w-radio>
+        <w-radio value="bar">bar</w-radio>
+      </w-radio-group>
+    `},Jt={};export{Jt as Default,Xt as default};
+//# sourceMappingURL=radio.stories.js.map