@crowdstrike/glide-core 0.29.2 → 0.30.0

package/dist/radio-group.js

@@ -1,36 +1,309 @@
-var __decorate=this&&this.__decorate||function(e,t,i,a){var s,o=arguments.length,r=o<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,a);else for(var d=e.length-1;d>=0;d--)(s=e[d])&&(r=(o<3?s(r):o>3?s(t,i,r):s(t,i))||r);return o>3&&r&&Object.defineProperty(t,i,r),r};import"./label.js";import"./tooltip.js";import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import RadioGroupRadio from"./radio-group.radio.js";import styles from"./radio-group.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let RadioGroup=class RadioGroup extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#e}set disabled(e){this.#e=e;const t=this.#t.findLast((e=>e.checked));for(const i of this.#t){this.#i=!0,i.disabled=e,this.#i=!1;const a=this.#t.find((e=>!e.disabled));e?i.tabIndex=-1:i===t?i.tabIndex=0:t||i!==a||(i.tabIndex=0)}e?this.#a="":t&&(this.#a=t.value)}get required(){return this.#s}set required(e){this.#s=e;for(const t of this.#t)t.privateRequired=e}get value(){return this.#a}set value(e){if(this.#a=e,!this.#o)for(const t of this.#t){const i=Boolean(""!==e&&t.value===e);t.checked=!!i,t.tabIndex=i?0:-1,t.checked&&t.disabled&&(t.disabled=!1)}}checkValidity(){this.isCheckingValidity=!0;const e=this.#r.checkValidity();return this.isCheckingValidity=!1,e}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#d)}firstUpdated(){for(const e of this.#t)e.privateRequired=this.required,e.tabIndex=-1,this.disabled&&(e.disabled=this.disabled);const e=this.#t.findLast((({checked:e,disabled:t})=>e&&!t));if(e)return this.#a=e.value,this.disabled||(e.tabIndex=0),this.#o=!0,this.setAttribute("value",e.value),void(this.#o=!1);if(!e&&""!==this.value){const e=this.#t.findLast((({value:e})=>e===this.value));return!this.disabled&&e?.disabled&&(e.disabled=!1),void(e&&(e.checked=!0,e.tabIndex=0))}const t=this.#t.find((({disabled:e})=>!e));t&&(t.tabIndex=0)}focus(e){const t=this.#t.find((({checked:e,disabled:t})=>e&&!t))??this.#t.find((({tabIndex:e})=>0===e));t?.focus(e)}get form(){return this.#r.form}get validity(){const e=this.#t.some((({checked:e})=>e));return!this.required||e||this.disabled?this.required&&this.#r.validity.valueMissing&&e?(this.#r.setValidity({}),this.#r.validity):this.required&&this.disabled&&!e?(this.#r.setValidity({valueMissing:!0}," ",this.#n.value),this.#r.validity):(this.required||!this.#r.validity.valueMissing||e||this.#r.setValidity({}),this.#r.validity):(this.#r.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#n.value),this.#r.validity)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#d)}formResetCallback(){this.value=this.getAttribute("value")??""}render(){return html`
+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 './label.js';
+import './tooltip.js';
+import { html, LitElement } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { customElement, property, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { when } from 'lit/directives/when.js';
+import packageJson from '../package.json' with { type: 'json' };
+import RadioGroupRadio from './radio-group.radio.js';
+import styles from './radio-group.styles.js';
+import assertSlot from './library/assert-slot.js';
+import shadowRootMode from './library/shadow-root-mode.js';
+import final from './library/final.js';
+import required from './library/required.js';
+/**
+ * @attr {string} label
+ * @attr {boolean} [disabled=false]
+ * @attr {boolean} [hide-label=false]
+ * @attr {string} [name='']
+ * @attr {'horizontal'} [orientation='horizontal']
+ * @attr {boolean} [required=false]
+ * @attr {string} [tooltip]
+ * @attr {string} [value='']
+ *
+ * @readonly
+ * @attr {string} [version]
+ *
+ * @slot {Radio}
+ * @slot {Element | string} [description] - Additional information or context
+ *
+ * @fires {Event} invalid
+ *
+ * @readonly
+ * @prop {HTMLFormElement | null} form
+ *
+ * @readonly
+ * @prop {ValidityState} validity
+ *
+ * @method checkValidity
+ * @returns boolean
+ *
+ * @method formAssociatedCallback
+ * @method formResetCallback
+ *
+ * @method reportValidity
+ * @returns boolean
+ *
+ * @method resetValidityFeedback
+ *
+ * @method setCustomValidity
+ * @param {string} message
+ *
+ * @method setValidity
+ * @param {ValidityStateFlags} [flags]
+ * @param {string} [message]
+ */
+let RadioGroup = class RadioGroup extends LitElement {
+    static { this.formAssociated = true; }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        mode: shadowRootMode,
+    }; }
+    static { this.styles = styles; }
+    /**
+     * @default false
+     */
+    get disabled() {
+        return this.#isDisabled;
+    }
+    set disabled(isDisabled) {
+        this.#isDisabled = isDisabled;
+        const lastCheckedRadio = this.#radioElements.findLast((radio) => radio.checked);
+        for (const radio of this.#radioElements) {
+            this.#isEnablingOrDisablingTheGroup = true;
+            radio.disabled = isDisabled;
+            this.#isEnablingOrDisablingTheGroup = false;
+            const firstEnabledRadio = this.#radioElements.find((radio) => !radio.disabled);
+            if (isDisabled) {
+                radio.tabIndex = -1;
+            }
+            else if (radio === lastCheckedRadio) {
+                radio.tabIndex = 0;
+            }
+            else if (!lastCheckedRadio && radio === firstEnabledRadio) {
+                radio.tabIndex = 0;
+            }
+        }
+        if (isDisabled) {
+            this.#value = '';
+        }
+        else if (lastCheckedRadio) {
+            this.#value = lastCheckedRadio.value;
+        }
+    }
+    /**
+     * @default false
+     */
+    get required() {
+        return this.#isRequired;
+    }
+    set required(isRequired) {
+        this.#isRequired = isRequired;
+        // Changes to `required` change the validity state. If no radios are
+        // checked and Radio Group is `required`, then Radio Group is invalid.
+        // However, if `required` is programmatically removed, then Radio Group
+        // is suddenly valid.
+        for (const radio of this.#radioElements) {
+            radio.privateRequired = isRequired;
+        }
+    }
+    // Intentionally not reflected to match native.
+    /**
+     * @default ''
+     */
+    get value() {
+        return this.#value;
+    }
+    set value(value) {
+        this.#value = value;
+        if (this.#isSettingValueAttributeInitially) {
+            return;
+        }
+        for (const radio of this.#radioElements) {
+            // If both `value` and the radio's `value` are empty strings, the
+            // desired outcome from the perspective of the consumer is almost
+            // certainly not to check the radio.
+            const isChecked = Boolean(value !== '' && radio.value === value);
+            radio.checked = isChecked ? true : false;
+            radio.tabIndex = isChecked ? 0 : -1;
+            // We have a few options if `value` is set programmatically to include
+            // the value of a disabled Radio. We can throw, remove the value from
+            // `value`, or enable the Radio.
+            //
+            // Throwing is attractive because the inclusion of a disabled Radio
+            // in `value` is likely a mistake, either due to bad data or developer
+            // error.
+            //
+            // But we only throw in development. So the form will be submitted with
+            // the new `value` in production regardless if it was by mistake. By enabling
+            // the Radio, we at least ensure the user is aware of the fact that it'll
+            // be included in the submission.
+            if (radio.checked && radio.disabled) {
+                radio.disabled = false;
+            }
+        }
+    }
+    checkValidity() {
+        this.isCheckingValidity = true;
+        const isValid = this.#internals.checkValidity();
+        this.isCheckingValidity = false;
+        return isValid;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.form?.removeEventListener('formdata', this.#onFormdata);
+    }
+    firstUpdated() {
+        for (const radio of this.#radioElements) {
+            radio.privateRequired = this.required;
+            radio.tabIndex = -1;
+            if (this.disabled) {
+                radio.disabled = this.disabled;
+            }
+        }
+        // There's nothing to stop developers from adding a `checked` attribute to more
+        // than one radio. How native handles it with `<select>` is to choose the last
+        // selected option. This mimics that behavior, which seems reasonable.
+        const lastCheckedRadio = this.#radioElements.findLast(({ checked, disabled }) => checked && !disabled);
+        if (lastCheckedRadio) {
+            this.#value = lastCheckedRadio.value;
+            if (!this.disabled) {
+                lastCheckedRadio.tabIndex = 0;
+            }
+            // When there's not a default `value` set on the group and a radio is checked
+            // set, we need to manually set `value` on the group. That way when `form.reset()`
+            // is called we know what value to reset back to.
+            //
+            // `#isSettingValueAttributeInitially` is used to guard against the `value` the
+            // setter unchecking every radio but the last. We try our best not to change state
+            // set by the consumer. If a consumer checks multiple radios, either initially or
+            // programmatically, we leave them checked and simply don't show them as checked to
+            // the user. That way what the user sees matches what gets submitted with the form.
+            this.#isSettingValueAttributeInitially = true;
+            this.setAttribute('value', lastCheckedRadio.value);
+            this.#isSettingValueAttributeInitially = false;
+            return;
+        }
+        // When `value` is set on initial render, its setter is called before
+        // `connectedCallback()` and thus before the default slot has any assigned
+        // elements. So we set it again here after the initial render is complete
+        // so `this.#radioElements` isn't empty.
+        //
+        // Additionally, `#onDefaultSlotChange()` is called after `firstUpdated()`
+        // and sets `value` based on which radios are checked. And the initial `value`
+        // may conflict with the one derived from which radios are checked.
+        //
+        // So we have a decision to make. On first render, do we defer to the initial
+        // `value` and check a radio below? Or do we defer to `#onDefaultSlotChange()`
+        // and let that method change `value` from its initial value based on which radios
+        // are checked?
+        //
+        // It's largely a toss-up. But the latter seems like the logical choice given
+        // `#onDefaultSlotChange()` is called after `firstUpdated()`. In other words, we
+        // defer to the lifecycle. `#onDefaultSlotChange()` is called second. So it gets
+        // to override what `value` was initially.
+        //
+        // If no radios are checked, then it's obvious that the consumer's intention is
+        // to check radios based on the initial `value` and that the initial `value` is
+        // the intended one. So we proceed.
+        if (!lastCheckedRadio && this.value !== '') {
+            const lastRadioWithMatchingValue = this.#radioElements.findLast(({ value }) => value === this.value);
+            if (!this.disabled && lastRadioWithMatchingValue?.disabled) {
+                lastRadioWithMatchingValue.disabled = false;
+            }
+            if (lastRadioWithMatchingValue) {
+                lastRadioWithMatchingValue.checked = true;
+                lastRadioWithMatchingValue.tabIndex = 0;
+            }
+            return;
+        }
+        const firstEnabledRadio = this.#radioElements.find(({ disabled }) => !disabled);
+        if (firstEnabledRadio) {
+            firstEnabledRadio.tabIndex = 0;
+            return;
+        }
+    }
+    focus(options) {
+        const radio = this.#radioElements.find(({ checked, disabled }) => checked && !disabled) ?? this.#radioElements.find(({ tabIndex }) => tabIndex === 0);
+        radio?.focus(options);
+    }
+    get form() {
+        return this.#internals.form;
+    }
+    get validity() {
+        const isChecked = this.#radioElements.some(({ checked }) => checked);
+        if (this.required && !isChecked && !this.disabled) {
+            // A validation message is required but unused because we disable native validation
+            // feedback. And an empty string isn't allowed. Thus a single space.
+            this.#internals.setValidity({ customError: Boolean(this.validityMessage), valueMissing: true }, ' ', this.#componentElementRef.value);
+            return this.#internals.validity;
+        }
+        if (this.required && this.#internals.validity.valueMissing && isChecked) {
+            this.#internals.setValidity({});
+            return this.#internals.validity;
+        }
+        if (this.required && this.disabled && !isChecked) {
+            this.#internals.setValidity({ valueMissing: true }, ' ', this.#componentElementRef.value);
+            return this.#internals.validity;
+        }
+        if (!this.required && this.#internals.validity.valueMissing && !isChecked) {
+            this.#internals.setValidity({});
+            return this.#internals.validity;
+        }
+        return this.#internals.validity;
+    }
+    formAssociatedCallback() {
+        this.form?.addEventListener('formdata', this.#onFormdata);
+    }
+    formResetCallback() {
+        this.value = this.getAttribute('value') ?? '';
+    }
+    render() {
+        return html `
       <div
         class="component"
-        @click=${this.#l}
-        @keydown=${this.#h}
-        ${ref(this.#n)}
+        @click=${this.#onComponentClick}
+        @keydown=${this.#onComponentKeydown}
+        ${ref(this.#componentElementRef)}
       >
         <glide-core-private-label
           label=${ifDefined(this.label)}
           orientation=${this.orientation}
-          split=${ifDefined(this.privateSplit??void 0)}
+          split=${ifDefined(this.privateSplit ?? undefined)}
           tooltip=${ifDefined(this.tooltip)}
           ?disabled=${this.disabled}
-          ?error=${this.#c}
+          ?error=${this.#isShowValidationFeedback}
           ?hide=${this.hideLabel}
           ?required=${this.required}
         >
           <label id="label" data-test="label"> ${this.label} </label>
 
           <div
-            class=${classMap({"radio-container":!0,invalid:this.#c})}
+            class=${classMap({
+            'radio-container': true,
+            invalid: this.#isShowValidationFeedback,
+        })}
             role="radiogroup"
             slot="control"
             aria-labelledby="label description"
           >
             <slot
-              @focusout=${this.#u}
-              @private-checked-change=${this.#p}
-              @private-disabled-change=${this.#f}
-              @private-value-change=${this.#m}
-              @slotchange=${this.#b}
+              @focusout=${this.#onRadioGroupFocusout}
+              @private-checked-change=${this.#onRadiosCheckedChange}
+              @private-disabled-change=${this.#onRadiosDisabledChange}
+              @private-value-change=${this.#onRadiosValueChange}
+              @slotchange=${this.#onDefaultSlotChange}
               ${assertSlot([RadioGroupRadio])}
-              ${ref(this.#g)}
+              ${ref(this.#defaultSlotElementRef)}
             >
               <!-- @type {Radio} -->
             </slot>
@@ -38,7 +311,10 @@ var __decorate=this&&this.__decorate||function(e,t,i,a){var s,o=arguments.length
 
           <div id="description" slot="description">
             <slot
-              class=${classMap({"description-slot":!0,hidden:Boolean(this.#c&&this.validityMessage)})}
+              class=${classMap({
+            'description-slot': true,
+            hidden: Boolean(this.#isShowValidationFeedback && this.validityMessage),
+        })}
               name="description"
             >
               <!--
@@ -47,10 +323,341 @@ var __decorate=this&&this.__decorate||function(e,t,i,a){var s,o=arguments.length
               -->
             </slot>
 
-            ${when(this.#c&&this.validityMessage,(()=>html`<div data-test="validity-message">
+            ${when(this.#isShowValidationFeedback && this.validityMessage, () => html `<div data-test="validity-message">
                   ${unsafeHTML(this.validityMessage)}
-                </div>`))}
+                </div>`)}
           </div>
         </glide-core-private-label>
       </div>
-    `}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#r.reportValidity();return this.requestUpdate(),e}resetValidityFeedback(){this.isReportValidityOrSubmit=!1}setCustomValidity(e){this.validityMessage=e,""===e?this.#r.setValidity({customError:!1},"",this.#n.value):this.#r.setValidity({customError:!0,valueMissing:this.#r.validity.valueMissing}," ",this.#n.value)}setValidity(e,t){this.validityMessage=t,this.#r.setValidity(e," ",this.#n.value)}constructor(){super(),this.hideLabel=!1,this.name="",this.orientation="horizontal",this.version=packageJson.version,this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#n=createRef(),this.#g=createRef(),this.#e=!1,this.#i=!1,this.#s=!1,this.#o=!1,this.#a="",this.#d=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,this.value)},this.#r=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e.preventDefault(),!this.isCheckingValidity){if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}}))}#n;#g;#r;#e;#i;#s;#o;#a;#d;get#c(){const e=!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit;for(const t of this.#t)t.privateInvalid=e;return e}#v(e){this.#t.find((({tabIndex:e})=>0===e))?.setAttribute("tabindex","-1"),this.#a=e.value,e.checked=!0,e.tabIndex=0,e.focus()}#l(e){if(!this.disabled)if(e.target instanceof RadioGroupRadio&&e.target.disabled){const e=this.#t.find((({checked:e})=>e));e?.focus()}else if(e.target instanceof RadioGroupRadio&&!e.target.disabled){const t=this.#t.filter((t=>t!==e.target));for(const e of t)e.checked=!1,e.tabIndex=-1;this.#v(e.target)}}#h(e){if(!(this.disabled||e.target instanceof RadioGroupRadio&&e.target?.disabled)&&e.target instanceof RadioGroupRadio)switch(e.key){case"Enter":this.form?.requestSubmit();break;case"ArrowUp":case"ArrowLeft":{e.preventDefault();const t=this.#t.slice(0,this.#t.indexOf(e.target)).findLast((e=>!e.disabled)),i=this.#t.findLast((e=>!e.disabled));t&&t!==e.target?(this.#R(e.target),this.#v(t)):i&&i!==e.target&&(this.#R(e.target),this.#v(i));break}case"ArrowDown":case"ArrowRight":{e.preventDefault();const t=this.#t.find(((t,i)=>!t.disabled&&e.target instanceof RadioGroupRadio&&i>this.#t.indexOf(e.target))),i=this.#t.find((e=>!e.disabled));t&&t!==e.target?(this.#R(e.target),this.#v(t)):i&&i!==e.target&&(this.#R(e.target),this.#v(i));break}case" ":if(e.preventDefault(),!e.target.disabled&&!e.target.checked){this.#v(e.target);for(const t of this.#t)t!==e.target&&this.#R(t)}}}#b(){const e=this.#t.findLast((({checked:e,disabled:t})=>e&&!t));e&&(this.#a=e.value)}#u(e){(null===e.relatedTarget||e.relatedTarget instanceof Node&&!this.contains(e.relatedTarget))&&(this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1)}get#t(){return this.#g.value?this.#g.value.assignedElements().filter((e=>e instanceof RadioGroupRadio)):[]}#p(e){if(e.target instanceof RadioGroupRadio&&e.target.checked&&!e.detail.old&&e.detail.new){const t=this.#t.find((({tabIndex:e})=>0===e));t&&t!==e.target&&this.#R(t),this.#a=e.target.value,e.target.tabIndex=e.target.disabled?-1:0}}#f(e){if(!this.#i){if(e.target instanceof RadioGroupRadio&&e.target.disabled){const t=this.#t.findLast((e=>e.checked&&!e.disabled));e.target.checked&&!t?this.#a="":t&&(this.#a=t.value);const i=this.#t.find(((t,i)=>!t.disabled&&e.target instanceof RadioGroupRadio&&i>this.#t.indexOf(e.target)));if(i&&0===e.target.tabIndex)return i.tabIndex=0,void(e.target.tabIndex=-1);const a=this.#t.find((e=>!e.disabled));if(a&&0===e.target.tabIndex)return a.tabIndex=0,void(e.target.tabIndex=-1)}if(e.target instanceof RadioGroupRadio&&!this.disabled){this.#t.some((({tabIndex:e})=>0===e))||(e.target.tabIndex=0);const t=this.#t.findLast((e=>e.checked&&!e.disabled));e.target===t&&(this.#a=e.target.value)}else;}}#m(e){const t=this.#t.findLast((e=>e.checked&&!this.disabled));e.target instanceof RadioGroupRadio&&e.target.checked&&e.detail.new&&e.target===t?this.#a=e.target.value:e.target instanceof RadioGroupRadio&&e.target.checked&&e.target===t&&(this.#a="")}#R(e){e.checked=!1,e.tabIndex=-1}};__decorate([property({reflect:!0}),required],RadioGroup.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],RadioGroup.prototype,"disabled",null),__decorate([property({attribute:"hide-label",type:Boolean})],RadioGroup.prototype,"hideLabel",void 0),__decorate([property({reflect:!0,useDefault:!0})],RadioGroup.prototype,"name",void 0),__decorate([property({reflect:!0})],RadioGroup.prototype,"orientation",void 0),__decorate([property()],RadioGroup.prototype,"privateSplit",void 0),__decorate([property({reflect:!0})],RadioGroup.prototype,"tooltip",void 0),__decorate([property({reflect:!0,type:Boolean})],RadioGroup.prototype,"required",null),__decorate([property()],RadioGroup.prototype,"value",null),__decorate([property({reflect:!0})],RadioGroup.prototype,"version",void 0),__decorate([state()],RadioGroup.prototype,"isBlurring",void 0),__decorate([state()],RadioGroup.prototype,"isCheckingValidity",void 0),__decorate([state()],RadioGroup.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],RadioGroup.prototype,"validityMessage",void 0),RadioGroup=__decorate([customElement("glide-core-radio-group"),final],RadioGroup);export default RadioGroup;
+    `;
+    }
+    reportValidity() {
+        this.isReportValidityOrSubmit = true;
+        const isValid = this.#internals.reportValidity();
+        // Ensures that getters referencing `this.validity.valid` are updated.
+        this.requestUpdate();
+        return isValid;
+    }
+    resetValidityFeedback() {
+        this.isReportValidityOrSubmit = false;
+    }
+    setCustomValidity(message) {
+        this.validityMessage = message;
+        if (message === '') {
+            this.#internals.setValidity({ customError: false }, '', this.#componentElementRef.value);
+        }
+        else {
+            this.#internals.setValidity({
+                customError: true,
+                valueMissing: this.#internals.validity.valueMissing,
+            }, ' ', this.#componentElementRef.value);
+        }
+    }
+    setValidity(flags, message) {
+        this.validityMessage = message;
+        this.#internals.setValidity(flags, ' ', this.#componentElementRef.value);
+    }
+    constructor() {
+        super();
+        this.hideLabel = false;
+        this.name = '';
+        this.orientation = 'horizontal';
+        this.version = packageJson.version;
+        this.isBlurring = false;
+        this.isCheckingValidity = false;
+        this.isReportValidityOrSubmit = false;
+        this.#componentElementRef = createRef();
+        this.#defaultSlotElementRef = createRef();
+        this.#isDisabled = false;
+        this.#isEnablingOrDisablingTheGroup = false;
+        this.#isRequired = false;
+        this.#isSettingValueAttributeInitially = false;
+        this.#value = '';
+        // An arrow function field instead of a method so `this` is closed over and
+        // set to the component instead of the form.
+        this.#onFormdata = ({ formData }) => {
+            if (this.name && this.value.length > 0 && !this.disabled) {
+                formData.append(this.name, this.value);
+            }
+        };
+        this.#internals = this.attachInternals();
+        this.addEventListener('invalid', (event) => {
+            event.preventDefault();
+            if (!this.isCheckingValidity) {
+                // Canceled so a native validation message isn't shown.
+                event?.preventDefault();
+                // We only want to focus the radios if the invalid event resulted from either:
+                // 1. Form submission
+                // 2. a call to reportValidity that did NOT result from the input blur event
+                if (this.isCheckingValidity || this.isBlurring) {
+                    return;
+                }
+                this.isReportValidityOrSubmit = true;
+                const isFirstInvalidFormElement = this.form?.querySelector(':invalid') === this;
+                if (isFirstInvalidFormElement) {
+                    this.focus();
+                }
+            }
+        });
+    }
+    #componentElementRef;
+    #defaultSlotElementRef;
+    #internals;
+    #isDisabled;
+    #isEnablingOrDisablingTheGroup;
+    #isRequired;
+    #isSettingValueAttributeInitially;
+    #value;
+    // An arrow function field instead of a method so `this` is closed over and
+    // set to the component instead of the form.
+    #onFormdata;
+    get #isShowValidationFeedback() {
+        const isInvalid = !this.disabled && !this.validity.valid && this.isReportValidityOrSubmit;
+        for (const radioItem of this.#radioElements) {
+            radioItem.privateInvalid = isInvalid;
+        }
+        return isInvalid;
+    }
+    #checkRadio(radio) {
+        this.#radioElements
+            .find(({ tabIndex }) => tabIndex === 0)
+            ?.setAttribute('tabindex', '-1');
+        this.#value = radio.value;
+        radio.checked = true;
+        radio.tabIndex = 0;
+        radio.focus();
+    }
+    #onComponentClick(event) {
+        if (this.disabled) {
+            return;
+        }
+        // If the user clicks on a disabled radio, then attempts to use the keyboard, the
+        // focus would normally be stuck on the disabled element. Since the general pattern
+        // is for focus to follow selection, it does so here, going to the last checked
+        // radio.
+        if (event.target instanceof RadioGroupRadio && event.target.disabled) {
+            const selectedRadio = this.#radioElements.find(({ checked }) => checked);
+            selectedRadio?.focus();
+            return;
+        }
+        if (event.target instanceof RadioGroupRadio && !event.target.disabled) {
+            const radiosToUncheck = this.#radioElements.filter((radio) => radio !== event.target);
+            for (const radio of radiosToUncheck) {
+                radio.checked = false;
+                radio.tabIndex = -1;
+            }
+            this.#checkRadio(event.target);
+        }
+    }
+    #onComponentKeydown(event) {
+        if (this.disabled ||
+            (event.target instanceof RadioGroupRadio && event.target?.disabled)) {
+            return;
+        }
+        if (event.target instanceof RadioGroupRadio) {
+            switch (event.key) {
+                case 'Enter': {
+                    this.form?.requestSubmit();
+                    break;
+                }
+                case 'ArrowUp':
+                case 'ArrowLeft': {
+                    event.preventDefault();
+                    const previousEnabledRadio = this.#radioElements
+                        .slice(0, this.#radioElements.indexOf(event.target))
+                        .findLast((radio) => !radio.disabled);
+                    const lastEnabledRadio = this.#radioElements.findLast((radio) => !radio.disabled);
+                    if (previousEnabledRadio && previousEnabledRadio !== event.target) {
+                        this.#uncheckRadio(event.target);
+                        this.#checkRadio(previousEnabledRadio);
+                    }
+                    else if (lastEnabledRadio && lastEnabledRadio !== event.target) {
+                        this.#uncheckRadio(event.target);
+                        this.#checkRadio(lastEnabledRadio);
+                    }
+                    break;
+                }
+                case 'ArrowDown':
+                case 'ArrowRight': {
+                    event.preventDefault();
+                    const nextEnabledRadio = this.#radioElements.find((radio, index) => {
+                        return (!radio.disabled &&
+                            event.target instanceof RadioGroupRadio &&
+                            index > this.#radioElements.indexOf(event.target));
+                    });
+                    const firstEnabledRadio = this.#radioElements.find((radio) => !radio.disabled);
+                    if (nextEnabledRadio && nextEnabledRadio !== event.target) {
+                        this.#uncheckRadio(event.target);
+                        this.#checkRadio(nextEnabledRadio);
+                    }
+                    else if (firstEnabledRadio && firstEnabledRadio !== event.target) {
+                        this.#uncheckRadio(event.target);
+                        this.#checkRadio(firstEnabledRadio);
+                    }
+                    break;
+                }
+                case ' ': {
+                    event.preventDefault();
+                    if (!event.target.disabled && !event.target.checked) {
+                        this.#checkRadio(event.target);
+                        for (const radio of this.#radioElements) {
+                            if (radio !== event.target) {
+                                this.#uncheckRadio(radio);
+                            }
+                        }
+                    }
+                    break;
+                }
+            }
+        }
+    }
+    #onDefaultSlotChange() {
+        const lastCheckedRadio = this.#radioElements.findLast(({ checked, disabled }) => {
+            return checked && !disabled;
+        });
+        if (lastCheckedRadio) {
+            this.#value = lastCheckedRadio.value;
+        }
+    }
+    #onRadioGroupFocusout(event) {
+        // If `event.relatedTarget` is `null`, the user has clicked an element outside
+        // Radio Group that cannot receive focus. Otherwise, the user has either clicked
+        // an element outside Radio Group that can receive focus or else has tabbed away
+        // from Radio Group.
+        const isFocusLost = event.relatedTarget === null ||
+            (event.relatedTarget instanceof Node &&
+                !this.contains(event.relatedTarget));
+        if (isFocusLost) {
+            this.isBlurring = true;
+            this.reportValidity();
+            this.isBlurring = false;
+        }
+    }
+    get #radioElements() {
+        return this.#defaultSlotElementRef.value
+            ? this.#defaultSlotElementRef.value
+                .assignedElements()
+                .filter((element) => element instanceof RadioGroupRadio)
+            : [];
+    }
+    #onRadiosCheckedChange(event) {
+        if (event.target instanceof RadioGroupRadio &&
+            event.target.checked &&
+            !event.detail.old &&
+            event.detail.new) {
+            const checkedRadio = this.#radioElements.find(({ tabIndex }) => tabIndex === 0);
+            if (checkedRadio && checkedRadio !== event.target) {
+                this.#uncheckRadio(checkedRadio);
+            }
+            this.#value = event.target.value;
+            event.target.tabIndex = event.target.disabled ? -1 : 0;
+        }
+    }
+    #onRadiosDisabledChange(event) {
+        if (this.#isEnablingOrDisablingTheGroup) {
+            return;
+        }
+        if (event.target instanceof RadioGroupRadio && event.target.disabled) {
+            const lastCheckedAndEnabledRadio = this.#radioElements.findLast((radio) => radio.checked && !radio.disabled);
+            if (event.target.checked && !lastCheckedAndEnabledRadio) {
+                this.#value = '';
+            }
+            else if (lastCheckedAndEnabledRadio) {
+                this.#value = lastCheckedAndEnabledRadio.value;
+            }
+            const nextEnabledRadio = this.#radioElements.find((radio, index) => {
+                return (!radio.disabled &&
+                    event.target instanceof RadioGroupRadio &&
+                    index > this.#radioElements.indexOf(event.target));
+            });
+            if (nextEnabledRadio && event.target.tabIndex === 0) {
+                nextEnabledRadio.tabIndex = 0;
+                event.target.tabIndex = -1;
+                return;
+            }
+            const firstEnabledRadio = this.#radioElements.find((radio) => !radio.disabled);
+            if (firstEnabledRadio && event.target.tabIndex === 0) {
+                firstEnabledRadio.tabIndex = 0;
+                event.target.tabIndex = -1;
+                return;
+            }
+        }
+        if (event.target instanceof RadioGroupRadio && !this.disabled) {
+            const hasTabbableRadio = this.#radioElements.some(({ tabIndex }) => tabIndex === 0);
+            if (!hasTabbableRadio) {
+                event.target.tabIndex = 0;
+            }
+            const lastCheckedAndEnabledRadio = this.#radioElements.findLast((radio) => radio.checked && !radio.disabled);
+            if (event.target === lastCheckedAndEnabledRadio) {
+                this.#value = event.target.value;
+            }
+            return;
+        }
+    }
+    #onRadiosValueChange(event) {
+        const lastCheckedAndEnabledRadio = this.#radioElements.findLast((radio) => radio.checked && !this.disabled);
+        if (event.target instanceof RadioGroupRadio &&
+            event.target.checked &&
+            event.detail.new &&
+            event.target === lastCheckedAndEnabledRadio) {
+            this.#value = event.target.value;
+        }
+        else if (event.target instanceof RadioGroupRadio &&
+            event.target.checked &&
+            event.target === lastCheckedAndEnabledRadio) {
+            this.#value = '';
+        }
+    }
+    #uncheckRadio(radio) {
+        radio.checked = false;
+        radio.tabIndex = -1;
+    }
+};
+__decorate([
+    property({ reflect: true }),
+    required
+], RadioGroup.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], RadioGroup.prototype, "disabled", null);
+__decorate([
+    property({ attribute: 'hide-label', type: Boolean })
+], RadioGroup.prototype, "hideLabel", void 0);
+__decorate([
+    property({ reflect: true, useDefault: true })
+], RadioGroup.prototype, "name", void 0);
+__decorate([
+    property({ reflect: true })
+], RadioGroup.prototype, "orientation", void 0);
+__decorate([
+    property()
+], RadioGroup.prototype, "privateSplit", void 0);
+__decorate([
+    property({ reflect: true })
+], RadioGroup.prototype, "tooltip", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], RadioGroup.prototype, "required", null);
+__decorate([
+    property()
+], RadioGroup.prototype, "value", null);
+__decorate([
+    property({ reflect: true })
+], RadioGroup.prototype, "version", void 0);
+__decorate([
+    state()
+], RadioGroup.prototype, "isBlurring", void 0);
+__decorate([
+    state()
+], RadioGroup.prototype, "isCheckingValidity", void 0);
+__decorate([
+    state()
+], RadioGroup.prototype, "isReportValidityOrSubmit", void 0);
+__decorate([
+    state()
+], RadioGroup.prototype, "validityMessage", void 0);
+RadioGroup = __decorate([
+    customElement('glide-core-radio-group'),
+    final
+], RadioGroup);
+export default RadioGroup;