@crowdstrike/glide-core 0.5.0 → 0.5.2

package/dist/radio-group.js

@@ -1 +1 @@
-"use strict";var tt=Object.defineProperty;var et=Object.getOwnPropertyDescriptor;var m=(n,d,t,e)=>{for(var i=e>1?void 0:e?et(d,t):d,b=n.length-1,A;b>=0;b--)(A=n[b])&&(i=(e?A(d,t,i):A(i))||i);return e&&i&&tt(d,t,i),i};var O=(n,d,t)=>{if(!d.has(n))throw TypeError("Cannot "+t)};var s=(n,d,t)=>(O(n,d,"read from private field"),t?t.call(n):d.get(n)),o=(n,d,t)=>{if(d.has(n))throw TypeError("Cannot add the same private member more than once");d instanceof WeakSet?d.add(n):d.set(n,t)},E=(n,d,t,e)=>(O(n,d,"write to private field"),e?e.call(n,t):d.set(n,t),t);var a=(n,d,t)=>(O(n,d,"access private method"),t);var R,g,p,c,y,I,V,F,S,B,$,X,x,Y,C,Z,D,_,U,G,l,r,u,v,w,T,q,H,L,z,M,K;import"./label.js";import"./tooltip.js";import{LitElement as N,html as it}from"lit";import{classMap as st}from"lit/directives/class-map.js";import{createRef as j,ref as J}from"lit/directives/ref.js";import{customElement as at,property as k,state as P}from"lit/decorators.js";import{owSlot as Q,owSlotType as W}from"./library/ow.js";import f from"./radio.js";import lt from"./radio-group.styles.js";let h=class extends N{constructor(){super();o(this,V);o(this,S);o(this,$);o(this,x);o(this,C);o(this,D);o(this,U);o(this,l);o(this,u);o(this,w);o(this,q);o(this,L);o(this,M);this.description="";this.disabled=!1;this.label="";this.hideLabel=!1;this.name="";this.required=!1;this.value="";this.isCheckingValidity=!1;this.isReportValidityOrSubmit=!1;o(this,R,j());o(this,g,j());o(this,p,void 0);o(this,c,void 0);o(this,y,void 0);o(this,I,({formData:t})=>{this.name&&this.value.length>0&&!this.disabled&&t.append(this.name,this.value)});E(this,c,this.attachInternals()),this.addEventListener("invalid",a(this,C,Z))}checkValidity(){return this.isCheckingValidity=!0,s(this,c).checkValidity()}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",s(this,I)),E(this,p,void 0)}firstUpdated(){Q(s(this,g).value),W(s(this,g).value,[f]),E(this,p,s(this,l,r).find(t=>t.checked)),a(this,V,F).call(this)}focus(t){let e=s(this,l,r).find(i=>i.checked);e||(e=s(this,l,r).find(i=>i.tabIndex===0)),e?.focus(t)}get form(){return s(this,c).form}get validity(){return s(this,c).validity}get willValidate(){return s(this,c).willValidate}formAssociatedCallback(){this.form?.addEventListener("formdata",s(this,I))}formResetCallback(){if(s(this,p)&&this.contains(s(this,p)))for(const t of s(this,l,r))a(this,u,v).call(this,t===s(this,p),t)}render(){return it`<div class="component" @click="${a(this,$,X)}" @keydown="${a(this,D,_)}" ${J(s(this,R))}><glide-core-label orientation="horizontal" ?error="${s(this,S,B)}" ?hide="${this.hideLabel}" ?required="${this.required}"><label id="label" data-test="label">${this.label}</label><div class="${st({"radio-container":!0,vertical:!0,invalid:s(this,S,B)})}" role="radiogroup" slot="control" aria-labelledby="label description"><slot ${J(s(this,g))} @slotchange="${a(this,x,Y)}"></slot></div><slot name="tooltip" slot="tooltip"></slot><slot id="description" name="description" slot="description"></slot></glide-core-label></div>`}reportValidity(){return s(this,c).reportValidity()}updated(t){this.hasUpdated&&(t.has("value")||t.has("required"))&&(a(this,U,G).call(this),a(this,q,H).call(this,!s(this,c).validity.valid),this.requestUpdate())}willUpdate(t){if(this.hasUpdated){if(t.has("required")&&a(this,M,K).call(this),t.has("disabled")){for(const e of s(this,l,r))a(this,w,T).call(this,this.disabled,e);!this.disabled&&a(this,L,z).call(this)}if(t.has("value"))for(const e of s(this,l,r))e.checked=e.value===this.value}}};R=new WeakMap,g=new WeakMap,p=new WeakMap,c=new WeakMap,y=new WeakMap,I=new WeakMap,V=new WeakSet,F=function(){const t=s(this,l,r).find(e=>e.checked);this.value=t?.value??s(this,p)?.value??"",E(this,y,t??s(this,p)),this.required&&a(this,M,K).call(this);for(const e of s(this,l,r))this.disabled?a(this,w,T).call(this,this.disabled,e):a(this,w,T).call(this,e.disabled,e);!this.disabled&&a(this,L,z).call(this)},S=new WeakSet,B=function(){const t=!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit;return a(this,q,H).call(this,t),t},$=new WeakSet,X=function(t){if(this.disabled)return;if(t.target instanceof f&&t.target.disabled&&s(this,y)&&!s(this,y).disabled){s(this,y)?.focus();return}const e=t.target;if(e instanceof f&&e&&!e.disabled){a(this,u,v).call(this,!0,e);for(const i of s(this,l,r))i!==e&&a(this,u,v).call(this,!1,i)}},x=new WeakSet,Y=function(){Q(s(this,g).value),W(s(this,g).value,[f]),a(this,V,F).call(this)},C=new WeakSet,Z=function(t){t.preventDefault(),this.isCheckingValidity||(this.isReportValidityOrSubmit=!0,this.focus())},D=new WeakSet,_=function(t){if(!(this.disabled||t.target instanceof f&&t.target?.disabled)&&t.target instanceof f){const e=t.target;switch(t.key){case"ArrowUp":case"ArrowLeft":{t.preventDefault();let i=e.previousElementSibling;for(;(!i||i instanceof f&&i.disabled||!(i instanceof f))&&i!==e;)if(i===null){const b=s(this,l,r).at(-1);b&&(i=b)}else i=i.previousElementSibling;i&&i instanceof f&&!i.disabled&&i!==e&&(a(this,u,v).call(this,!1,e),a(this,u,v).call(this,!0,i));break}case"ArrowDown":case"ArrowRight":{t.preventDefault();let i=e.nextElementSibling;for(;(!i||i instanceof f&&i.disabled||!(i instanceof f))&&i!==e;)if(i===null){const b=s(this,l,r).at(0);b&&(i=b)}else i=i.nextElementSibling;i&&i instanceof f&&!i.disabled&&i!==e&&(a(this,u,v).call(this,!1,e),a(this,u,v).call(this,!0,i));break}case" ":{if(t.preventDefault(),!e.disabled&&!e.checked){a(this,u,v).call(this,!0,e);for(const i of s(this,l,r))i!==e&&a(this,u,v).call(this,!1,i)}break}}}},U=new WeakSet,G=function(){const t=s(this,l,r).find(e=>e.checked);this.required&&!t?s(this,c).setValidity({valueMissing:!0}," ",s(this,R).value):s(this,c).setValidity({})},l=new WeakSet,r=function(){return s(this,g).value?.assignedElements().filter(t=>t instanceof f)??[]},u=new WeakSet,v=function(t,e){e.checked=t,e.tabIndex=t?0:-1,t&&(E(this,y,e),this.value=e.value,e.focus(),e.dispatchEvent(new Event("change",{bubbles:!0})),e.dispatchEvent(new Event("input",{bubbles:!0})))},w=new WeakSet,T=function(t,e){e.disabled=t,t&&(e.tabIndex=-1)},q=new WeakSet,H=function(t){for(const e of s(this,l,r))e.invalid=t},L=new WeakSet,z=function(){if(this.disabled||s(this,l,r).every(i=>i.disabled))return;let t=null;const e=s(this,l,r).find(i=>!i.disabled&&i.checked);if(e)t=e;else{const i=s(this,l,r).find(b=>!b.disabled);i&&(t=i)}if(t)for(const i of s(this,l,r))i.tabIndex=i===t?0:-1},M=new WeakSet,K=function(){for(const t of s(this,l,r))t.required=this.required},h.formAssociated=!0,h.shadowRootOptions={...N.shadowRootOptions,mode:"closed"},h.styles=lt,m([k()],h.prototype,"description",2),m([k({type:Boolean,reflect:!0})],h.prototype,"disabled",2),m([k()],h.prototype,"label",2),m([k({attribute:"hide-label",type:Boolean})],h.prototype,"hideLabel",2),m([k()],h.prototype,"name",2),m([k({type:Boolean,reflect:!0})],h.prototype,"required",2),m([k({reflect:!0})],h.prototype,"value",2),m([P()],h.prototype,"isCheckingValidity",2),m([P()],h.prototype,"isReportValidityOrSubmit",2),h=m([at("glide-core-radio-group")],h);export{h as default};
+var __decorate=this&&this.__decorate||function(e,i,t,o){var s,a=arguments.length,d=a<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,t):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)d=Reflect.decorate(e,i,t,o);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(d=(a<3?s(d):a>3?s(i,t,d):s(i,t))||d);return a>3&&d&&Object.defineProperty(i,t,d),d};import"./label.js";import"./tooltip.js";import{LitElement,html}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{owSlot,owSlotType}from"./library/ow.js";import GlideCoreRadio from"./radio.js";import styles from"./radio-group.styles.js";let GlideCoreRadioGroup=class GlideCoreRadioGroup extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}checkValidity(){return this.isCheckingValidity=!0,this.#e.checkValidity()}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#i),this.#t=void 0}firstUpdated(){owSlot(this.#o.value),owSlotType(this.#o.value,[GlideCoreRadio]),this.#t=this.#s.find((e=>e.checked)),this.#a()}focus(e){let i=this.#s.find((e=>e.checked));i||(i=this.#s.find((e=>0===e.tabIndex))),i?.focus(e)}get form(){return this.#e.form}get validity(){return this.#e.validity}get willValidate(){return this.#e.willValidate}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#i)}formResetCallback(){if(this.#t&&this.contains(this.#t))for(const e of this.#s)this.#d(e===this.#t,e)}render(){return html`<div class="component" @click="${this.#l}" @keydown="${this.#r}" ${ref(this.#n)}><glide-core-label orientation="horizontal" ?error="${this.#h}" ?hide="${this.hideLabel}" ?required="${this.required}"><label id="label" data-test="label">${this.label}</label><div class="${classMap({"radio-container":!0,vertical:!0,invalid:this.#h})}" role="radiogroup" slot="control" aria-labelledby="label description"><slot ${ref(this.#o)} @slotchange="${this.#c}"></slot></div><slot name="tooltip" slot="tooltip"></slot><slot id="description" name="description" slot="description"></slot></glide-core-label></div>`}reportValidity(){return this.#e.reportValidity()}updated(e){this.hasUpdated&&(e.has("value")||e.has("required"))&&(this.#p(),this.#f(!this.#e.validity.valid),this.requestUpdate())}willUpdate(e){if(this.hasUpdated){if(e.has("required")&&this.#u(),e.has("disabled")){for(const e of this.#s)this.#R(this.disabled,e);!this.disabled&&this.#m()}if(e.has("value"))for(const e of this.#s)e.checked=e.value===this.value}}constructor(){super(),this.description="",this.disabled=!1,this.label="",this.hideLabel=!1,this.name="",this.required=!1,this.value="",this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#n=createRef(),this.#o=createRef(),this.#t=void 0,this.#i=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,this.value)},this.#e=this.attachInternals(),this.addEventListener("invalid",this.#b)}#n;#o;#t;#e;#v;#i;#a(){const e=this.#s.find((e=>e.checked));this.value=e?.value??this.#t?.value??"",this.#v=e??this.#t,this.required&&this.#u();for(const e of this.#s)this.disabled?this.#R(this.disabled,e):this.#R(e.disabled,e);!this.disabled&&this.#m()}get#h(){const e=!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit;return this.#f(e),e}#l(e){if(this.disabled)return;if(e.target instanceof GlideCoreRadio&&e.target.disabled&&this.#v&&!this.#v.disabled)return void this.#v?.focus();const i=e.target;if(i instanceof GlideCoreRadio&&i&&!i.disabled){this.#d(!0,i);for(const e of this.#s)e!==i&&this.#d(!1,e)}}#c(){owSlot(this.#o.value),owSlotType(this.#o.value,[GlideCoreRadio]),this.#a()}#b(e){e.preventDefault(),this.isCheckingValidity||(this.isReportValidityOrSubmit=!0,this.focus())}#r(e){if(!(this.disabled||e.target instanceof GlideCoreRadio&&e.target?.disabled)&&e.target instanceof GlideCoreRadio){const i=e.target;switch(e.key){case"ArrowUp":case"ArrowLeft":{e.preventDefault();let t=i.previousElementSibling;for(;(!t||t instanceof GlideCoreRadio&&t.disabled||!(t instanceof GlideCoreRadio))&&t!==i;)if(null===t){const e=this.#s.at(-1);e&&(t=e)}else t=t.previousElementSibling;t&&t instanceof GlideCoreRadio&&!t.disabled&&t!==i&&(this.#d(!1,i),this.#d(!0,t));break}case"ArrowDown":case"ArrowRight":{e.preventDefault();let t=i.nextElementSibling;for(;(!t||t instanceof GlideCoreRadio&&t.disabled||!(t instanceof GlideCoreRadio))&&t!==i;)if(null===t){const e=this.#s.at(0);e&&(t=e)}else t=t.nextElementSibling;t&&t instanceof GlideCoreRadio&&!t.disabled&&t!==i&&(this.#d(!1,i),this.#d(!0,t));break}case" ":if(e.preventDefault(),!i.disabled&&!i.checked){this.#d(!0,i);for(const e of this.#s)e!==i&&this.#d(!1,e)}}}}#p(){const e=this.#s.find((e=>e.checked));this.required&&!e?this.#e.setValidity({valueMissing:!0}," ",this.#n.value):this.#e.setValidity({})}get#s(){return this.#o.value?.assignedElements().filter((e=>e instanceof GlideCoreRadio))??[]}#d(e,i){i.checked=e,i.tabIndex=e?0:-1,e&&(this.#v=i,this.value=i.value,i.focus(),i.dispatchEvent(new Event("change",{bubbles:!0})),i.dispatchEvent(new Event("input",{bubbles:!0})))}#R(e,i){i.disabled=e,e&&(i.tabIndex=-1)}#f(e){for(const i of this.#s)i.invalid=e}#m(){if(this.disabled||this.#s.every((e=>e.disabled)))return;let e=null;const i=this.#s.find((e=>!e.disabled&&e.checked));if(i)e=i;else{const i=this.#s.find((e=>!e.disabled));i&&(e=i)}if(e)for(const i of this.#s)i.tabIndex=i===e?0:-1}#u(){for(const e of this.#s)e.required=this.required}};__decorate([property()],GlideCoreRadioGroup.prototype,"description",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreRadioGroup.prototype,"disabled",void 0),__decorate([property()],GlideCoreRadioGroup.prototype,"label",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreRadioGroup.prototype,"hideLabel",void 0),__decorate([property()],GlideCoreRadioGroup.prototype,"name",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreRadioGroup.prototype,"required",void 0),__decorate([property({reflect:!0})],GlideCoreRadioGroup.prototype,"value",void 0),__decorate([state()],GlideCoreRadioGroup.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreRadioGroup.prototype,"isReportValidityOrSubmit",void 0),GlideCoreRadioGroup=__decorate([customElement("glide-core-radio-group")],GlideCoreRadioGroup);export default GlideCoreRadioGroup;

package/dist/radio-group.styles.js

@@ -1,4 +1,4 @@
-"use strict";import{css as e}from"lit";export default[e`
+import{css}from"lit";export default[css`
     .component {
       color: var(--glide-core-text-body-1);
       display: inline-flex;
@@ -37,4 +37,4 @@
         align-items: flex-start;
       }
     }
-  `];
+  `];

package/dist/radio-group.test.basics.js

@@ -0,0 +1,323 @@
+import './radio-group.js';
+import './radio.js';
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import GlideCoreRadio from './radio.js';
+import GlideCoreRadioGroup from './radio-group.js';
+import expectArgumentError from './library/expect-argument-error.js';
+GlideCoreRadio.shadowRootOptions.mode = 'open';
+GlideCoreRadioGroup.shadowRootOptions.mode = 'open';
+it('registers', async () => {
+    expect(window.customElements.get('glide-core-radio-group')).to.equal(GlideCoreRadioGroup);
+    expect(window.customElements.get('glide-core-radio')).to.equal(GlideCoreRadio);
+});
+it('is accessible', async () => {
+    const element = await fixture(html `
+    <glide-core-radio-group label="label" name="name" value="value-1">
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+      <glide-core-radio value="value-2" label="Two"></glide-core-radio>
+      <glide-core-radio value="value-3" label="Three"></glide-core-radio>
+      <span slot="tooltip">Tooltip</span>
+      <div slot="description">Description</div>
+    </glide-core-radio-group>
+  `);
+    await expect(element).to.be.accessible();
+});
+it('renders appropriate attributes on glide-core-radio', async () => {
+    await fixture(html `
+    <glide-core-radio-group label="label" name="name">
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+      <glide-core-radio value="value-2" label="Two" checked></glide-core-radio>
+    </glide-core-radio-group>
+  `);
+    const radios = document.querySelectorAll('glide-core-radio');
+    expect(radios[0]).to.have.attribute('value', 'value-1');
+    expect(radios[0]).to.have.attribute('tabindex', '-1');
+    expect(radios[0]).to.not.have.attribute('checked');
+    expect(radios[0]).to.have.attribute('role', 'radio');
+    expect(radios[0]).to.have.attribute('aria-checked', 'false');
+    expect(radios[0]).to.have.attribute('aria-disabled', 'false');
+    expect(radios[0]).to.have.attribute('aria-invalid', 'false');
+    expect(radios[0]).to.have.attribute('aria-required', 'false');
+    expect(radios[1]).to.have.attribute('value', 'value-2');
+    expect(radios[1]).to.have.attribute('tabindex', '0');
+    expect(radios[1]).to.have.attribute('checked');
+    expect(radios[1]).to.have.attribute('role', 'radio');
+    expect(radios[1]).to.have.attribute('aria-checked', 'true');
+    expect(radios[1]).to.have.attribute('aria-disabled', 'false');
+    expect(radios[1]).to.have.attribute('aria-invalid', 'false');
+    expect(radios[1]).to.have.attribute('aria-required', 'false');
+});
+it('renders a label, radio group, description, and tooltip when given', async () => {
+    const group = await fixture(html `
+    <glide-core-radio-group label="label" name="name" value="value-1">
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+      <span slot="tooltip" data-test="tooltip">Tooltip</span>
+      <div slot="description" data-test="description">Description</div>
+    </glide-core-radio-group>
+  `);
+    const label = group.shadowRoot?.querySelector('[data-test="label"]');
+    const radioGroup = group?.shadowRoot?.querySelector('[role="radiogroup"]');
+    const tooltip = document.querySelector('[data-test="tooltip"]');
+    const description = document?.querySelector('[data-test="description"]');
+    expect(group).to.not.be.null;
+    expect(label).to.not.be.null;
+    expect(radioGroup).to.not.be.null;
+    expect(tooltip).to.not.be.null;
+    expect(description).to.not.be.null;
+});
+it('does not render a required symbol when a "label" is given and "required" is not set', async () => {
+    await fixture(html `
+    <glide-core-radio-group label="label" name="name" value="value-1">
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+    </glide-core-radio-group>
+  `);
+    const group = document.querySelector('glide-core-radio-group');
+    const requiredSymbol = group?.shadowRoot?.querySelector('[data-test="label-required"]');
+    expect(requiredSymbol).to.be.null;
+});
+it('sets "required" attributes on radios when "required" is set on the group', async () => {
+    await fixture(html `
+    <glide-core-radio-group label="label" name="name" value="value-1" required>
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+      <glide-core-radio value="value-2" label="Two"></glide-core-radio>
+    </glide-core-radio-group>
+  `);
+    const radios = document.querySelectorAll('glide-core-radio');
+    expect(radios[0]).to.have.attribute('required');
+    expect(radios[0]).to.have.attribute('aria-required', 'true');
+    expect(radios[1]).to.have.attribute('required');
+    expect(radios[1]).to.have.attribute('aria-required', 'true');
+});
+it('does not set "required" attributes on radios when "required" is not set on the group', async () => {
+    await fixture(html `
+    <glide-core-radio-group label="label" name="name" value="value-1">
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+      <glide-core-radio value="value-2" label="Two"></glide-core-radio>
+    </glide-core-radio-group>
+  `);
+    const radios = document.querySelectorAll('glide-core-radio');
+    expect(radios[0]).to.not.have.attribute('required');
+    expect(radios[0]).to.have.attribute('aria-required', 'false');
+    expect(radios[1]).to.not.have.attribute('required');
+    expect(radios[1]).to.have.attribute('aria-required', 'false');
+});
+it('renders radios as "disabled" when "disabled" is set on the group', async () => {
+    await fixture(html `
+    <glide-core-radio-group label="label" name="name" value="value-1" disabled>
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+    </glide-core-radio-group>
+  `);
+    const radio = document.querySelector('glide-core-radio');
+    expect(radio).to.have.attribute('disabled');
+    expect(radio).to.have.attribute('aria-disabled', 'true');
+    expect(radio?.shadowRoot?.querySelector('.disabled')).to.be.not.null;
+});
+it('does not render radios as "disabled" when "disabled" is not set on the group', async () => {
+    await fixture(html `
+    <glide-core-radio-group label="label" name="name" value="value-1">
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+    </glide-core-radio-group>
+  `);
+    const radio = document.querySelector('glide-core-radio');
+    expect(radio).to.not.have.attribute('disabled');
+    expect(radio).to.have.attribute('aria-disabled', 'false');
+    expect(radio?.shadowRoot?.querySelector('.disabled')).to.be.null;
+});
+it('renders radios as "disabled" when "disabled" is dynamically set and removed on the group', async () => {
+    const component = await fixture(html `
+    <glide-core-radio-group label="label" name="name" value="value-1">
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+    </glide-core-radio-group>
+  `);
+    const radio = document.querySelector('glide-core-radio');
+    expect(radio).to.not.have.attribute('disabled');
+    expect(radio).to.have.attribute('aria-disabled', 'false');
+    expect(radio?.shadowRoot?.querySelector('.disabled')).to.be.null;
+    component.disabled = true;
+    await elementUpdated(component);
+    expect(radio).to.have.attribute('disabled');
+    expect(radio).to.have.attribute('aria-disabled', 'true');
+    expect(radio?.shadowRoot?.querySelector('.disabled')).to.be.not.null;
+    component.disabled = false;
+    await elementUpdated(component);
+    expect(radio).to.not.have.attribute('disabled');
+    expect(radio).to.have.attribute('aria-disabled', 'false');
+    expect(radio?.shadowRoot?.querySelector('.disabled')).to.be.null;
+});
+it('sets the radio group to an empty value when no radio is "checked"', async () => {
+    const component = await fixture(html `
+    <glide-core-radio-group label="label" name="name">
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+      <glide-core-radio value="value-2" label="Two"></glide-core-radio>
+    </glide-core-radio-group>
+  `);
+    const radios = document.querySelectorAll('glide-core-radio');
+    expect(component.value).to.equal('');
+    expect(radios.length).to.equal(2);
+    expect(radios[0]).to.not.have.attribute('checked');
+    expect(radios[0]).to.have.attribute('aria-checked', 'false');
+    expect(radios[1]).to.not.have.attribute('checked');
+    expect(radios[1]).to.have.attribute('aria-checked', 'false');
+});
+it('sets the group "value" when a radio is set as "checked"', async () => {
+    await fixture(html `
+    <glide-core-radio-group label="label" name="name">
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+      <glide-core-radio value="value-2" checked label="Two"></glide-core-radio>
+    </glide-core-radio-group>
+  `);
+    const group = document.querySelector('glide-core-radio-group');
+    expect(group).to.have.attribute('value', 'value-2');
+});
+it('throws an error when an element other than `glide-core-radio` is a child of the default slot', async () => {
+    await expectArgumentError(() => {
+        return fixture(html `
+      <glide-core-radio-group label="label" name="name">
+        <div>Option 1</div>
+        <glide-core-radio value="value-2" label="Two"></glide-core-radio>
+      </glide-core-radio-group>
+    `);
+    });
+});
+it('throws an error when the group has no children', async () => {
+    await expectArgumentError(() => {
+        return fixture(html `<glide-core-radio-group label="label" name="name">
+      </glide-core-radio-group>`);
+    });
+});
+it('sets the first radio to be tabbable when none are checked', async () => {
+    await fixture(html `<glide-core-radio-group name="name">
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+      <glide-core-radio value="value-2" label="Two"></glide-core-radio>
+      <glide-core-radio value="value-3" label="Three"></glide-core-radio>
+    </glide-core-radio-group>`);
+    const radios = document.querySelectorAll('glide-core-radio');
+    expect(radios.length).to.equal(3);
+    expect(radios[0]).to.have.attribute('tabindex', '0');
+    expect(radios[1]).to.have.attribute('tabindex', '-1');
+    expect(radios[2]).to.have.attribute('tabindex', '-1');
+});
+it('sets the first non-disabled radio as tabbable when none are checked', async () => {
+    await fixture(html `<glide-core-radio-group name="name">
+      <glide-core-radio value="value-1" disabled label="One"></glide-core-radio>
+      <glide-core-radio value="value-2" label="Two"></glide-core-radio>
+      <glide-core-radio value="value-3" label="Three"></glide-core-radio>
+    </glide-core-radio-group>`);
+    const radios = document.querySelectorAll('glide-core-radio');
+    expect(radios.length).to.equal(3);
+    expect(radios[0]).to.have.attribute('tabindex', '-1');
+    expect(radios[1]).to.have.attribute('tabindex', '0');
+    expect(radios[2]).to.have.attribute('tabindex', '-1');
+});
+it('no radios are tabbable when the group is "disabled"', async () => {
+    await fixture(html `<glide-core-radio-group name="name" disabled>
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+      <glide-core-radio value="value-2" label="Two"></glide-core-radio>
+      <glide-core-radio
+        value="value-3"
+        checked
+        label="Three"
+      ></glide-core-radio>
+    </glide-core-radio-group>`);
+    const radios = document.querySelectorAll('glide-core-radio');
+    expect(radios.length).to.equal(3);
+    expect(radios[0]).to.have.attribute('tabindex', '-1');
+    expect(radios[1]).to.have.attribute('tabindex', '-1');
+    expect(radios[2]).to.have.attribute('tabindex', '-1');
+});
+it('disabled radios are not tabbable', async () => {
+    await fixture(html `<glide-core-radio-group name="name">
+      <glide-core-radio value="value-1" disabled label="One"></glide-core-radio>
+      <glide-core-radio value="value-2" disabled label="Two"></glide-core-radio>
+    </glide-core-radio-group>`);
+    const radios = document.querySelectorAll('glide-core-radio');
+    expect(radios.length).to.equal(2);
+    expect(radios[0]).to.have.attribute('tabindex', '-1');
+    expect(radios[1]).to.have.attribute('tabindex', '-1');
+});
+it('sets only the "checked" radio as tabbable', async () => {
+    await fixture(html `<glide-core-radio-group name="name">
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+      <glide-core-radio value="value-2" label="Two"></glide-core-radio>
+      <glide-core-radio
+        value="value-3"
+        label="Three"
+        checked
+      ></glide-core-radio>
+    </glide-core-radio-group>`);
+    const radios = document.querySelectorAll('glide-core-radio');
+    expect(radios.length).to.equal(3);
+    expect(radios[0]).to.have.attribute('tabindex', '-1');
+    expect(radios[1]).to.have.attribute('tabindex', '-1');
+    expect(radios[2]).to.have.attribute('tabindex', '0');
+});
+it('has reactive radio attribute "aria-checked"', async () => {
+    await fixture(html `<glide-core-radio-group name="name">
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+    </glide-core-radio-group>`);
+    const radio = document.querySelector('glide-core-radio');
+    expect(radio).to.not.be.null;
+    expect(radio).to.have.attribute('aria-checked', 'false');
+    radio?.setAttribute('checked', '');
+    await elementUpdated(radio);
+    expect(radio).to.have.attribute('aria-checked', 'true');
+    radio?.removeAttribute('checked');
+    await elementUpdated(radio);
+    expect(radio).to.have.attribute('aria-checked', 'false');
+});
+it('has reactive radio attribute "aria-disabled"', async () => {
+    await fixture(html `<glide-core-radio-group name="name">
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+    </glide-core-radio-group>`);
+    const radio = document.querySelector('glide-core-radio');
+    expect(radio).to.not.be.null;
+    expect(radio).to.have.attribute('aria-disabled', 'false');
+    radio?.setAttribute('disabled', '');
+    await elementUpdated(radio);
+    expect(radio).to.have.attribute('aria-disabled', 'true');
+    radio?.removeAttribute('disabled');
+    await elementUpdated(radio);
+    expect(radio).to.have.attribute('aria-disabled', 'false');
+});
+it('has reactive radio attribute "aria-required"', async () => {
+    await fixture(html `<glide-core-radio-group name="name">
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+    </glide-core-radio-group>`);
+    const radio = document.querySelector('glide-core-radio');
+    expect(radio).to.not.be.null;
+    expect(radio).to.have.attribute('aria-required', 'false');
+    radio?.setAttribute('required', '');
+    await elementUpdated(radio);
+    expect(radio).to.have.attribute('aria-required', 'true');
+    radio?.removeAttribute('required');
+    await elementUpdated(radio);
+    expect(radio).to.have.attribute('aria-required', 'false');
+});
+it('has reactive radio attribute "aria-invalid"', async () => {
+    await fixture(html `<glide-core-radio-group name="name">
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+    </glide-core-radio-group>`);
+    const radio = document.querySelector('glide-core-radio');
+    expect(radio).to.not.be.null;
+    expect(radio).to.have.attribute('aria-invalid', 'false');
+    radio?.setAttribute('invalid', '');
+    await elementUpdated(radio);
+    expect(radio).to.have.attribute('aria-invalid', 'true');
+    radio?.removeAttribute('invalid');
+    await elementUpdated(radio);
+    expect(radio).to.have.attribute('aria-invalid', 'false');
+});
+it('adds a label to radio when given', async () => {
+    const component = await fixture(html `<glide-core-radio value="value-1" label="One"></glide-core-radio>`);
+    const label = component.shadowRoot.querySelector('.component')?.textContent;
+    expect(label).to.contain('One');
+    expect(component.ariaLabel).to.equal('One');
+});
+it('changes the radio label dynamically as when given', async () => {
+    const component = await fixture(html `<glide-core-radio value="value-1" label="One"></glide-core-radio>`);
+    component.label = 'Two';
+    await elementUpdated(component);
+    const label = component.shadowRoot.querySelector('.component')?.textContent;
+    expect(label).to.contain('Two');
+    expect(component.ariaLabel).to.equal('Two');
+});