@crowdstrike/glide-core 0.9.6 → 0.10.0

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

@@ -31,36 +31,36 @@ it('renders appropriate attributes on glide-core-radio', async () => {
     </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].getAttribute('value')).to.equal('value-1');
+    expect(radios[0].getAttribute('tabindex')).to.equal('-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');
+    expect(radios[0].getAttribute('role')).to.equal('radio');
+    expect(radios[0].getAttribute('aria-checked')).to.equal('false');
+    expect(radios[0].getAttribute('aria-disabled')).to.equal('false');
+    expect(radios[0].getAttribute('aria-invalid')).to.equal('false');
+    expect(radios[0].getAttribute('aria-required')).to.equal('false');
+    expect(radios[1].getAttribute('value')).to.equal('value-2');
+    expect(radios[1].getAttribute('tabindex')).to.equal('0');
+    expect(radios[1].hasAttribute('checked')).to.be.true;
+    expect(radios[1].getAttribute('role')).to.equal('radio');
+    expect(radios[1].getAttribute('aria-checked')).to.equal('true');
+    expect(radios[1].getAttribute('aria-disabled')).to.equal('false');
+    expect(radios[1].getAttribute('aria-invalid')).to.equal('false');
+    expect(radios[1].getAttribute('aria-required')).to.equal('false');
 });
 it('renders a label, radio group, description, and tooltip when given', async () => {
-    const group = await fixture(html `
+    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>
       <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 label = component.shadowRoot?.querySelector('[data-test="label"]');
+    const radioGroup = component?.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(component).to.not.be.null;
     expect(label).to.not.be.null;
     expect(radioGroup).to.not.be.null;
     expect(tooltip).to.not.be.null;
@@ -84,10 +84,10 @@ it('sets "required" attributes on radios when "required" is set on the group', a
     </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');
+    expect(radios[0].hasAttribute('required')).to.be.true;
+    expect(radios[0].getAttribute('aria-required')).to.equal('true');
+    expect(radios[1].hasAttribute('required')).to.be.true;
+    expect(radios[1].getAttribute('aria-required')).to.equal('true');
 });
 it('does not set "required" attributes on radios when "required" is not set on the group', async () => {
     await fixture(html `
@@ -98,9 +98,9 @@ it('does not set "required" attributes on radios when "required" is not set on t
   `);
     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[0].getAttribute('aria-required')).to.equal('false');
     expect(radios[1]).to.not.have.attribute('required');
-    expect(radios[1]).to.have.attribute('aria-required', 'false');
+    expect(radios[1].getAttribute('aria-required')).to.equal('false');
 });
 it('renders radios as "disabled" when "disabled" is set on the group', async () => {
     await fixture(html `
@@ -109,8 +109,8 @@ it('renders radios as "disabled" when "disabled" is set on the group', async ()
     </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?.hasAttribute('disabled')).to.be.true;
+    expect(radio?.getAttribute('aria-disabled')).to.equal('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 () => {
@@ -121,7 +121,7 @@ it('does not render radios as "disabled" when "disabled" is not set on the 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?.getAttribute('aria-disabled')).to.equal('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 () => {
@@ -132,17 +132,17 @@ it('renders radios as "disabled" when "disabled" is dynamically set and removed
   `);
     const radio = document.querySelector('glide-core-radio');
     expect(radio).to.not.have.attribute('disabled');
-    expect(radio).to.have.attribute('aria-disabled', 'false');
+    expect(radio?.getAttribute('aria-disabled')).to.equal('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?.hasAttribute('disabled')).to.be.true;
+    expect(radio?.getAttribute('aria-disabled')).to.equal('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?.getAttribute('aria-disabled')).to.equal('false');
     expect(radio?.shadowRoot?.querySelector('.disabled')).to.be.null;
 });
 it('sets the radio group to an empty value when no radio is "checked"', async () => {
@@ -156,9 +156,9 @@ it('sets the radio group to an empty value when no radio is "checked"', async ()
     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[0]?.getAttribute('aria-checked')).to.equal('false');
     expect(radios[1]).to.not.have.attribute('checked');
-    expect(radios[1]).to.have.attribute('aria-checked', 'false');
+    expect(radios[1]?.getAttribute('aria-checked')).to.equal('false');
 });
 it('sets the group "value" when a radio is set as "checked"', async () => {
     await fixture(html `
@@ -168,7 +168,7 @@ it('sets the group "value" when a radio is set as "checked"', async () => {
     </glide-core-radio-group>
   `);
     const group = document.querySelector('glide-core-radio-group');
-    expect(group).to.have.attribute('value', 'value-2');
+    expect(group?.getAttribute('value')).to.equal('value-2');
 });
 it('throws an error when an component other than `glide-core-radio` is a child of the default slot', async () => {
     await expectArgumentError(() => {
@@ -194,9 +194,9 @@ it('sets the first radio to be tabbable when none are checked', async () => {
     </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');
+    expect(radios[0]?.getAttribute('tabindex')).to.equal('0');
+    expect(radios[1]?.getAttribute('tabindex')).to.equal('-1');
+    expect(radios[2]?.getAttribute('tabindex')).to.equal('-1');
 });
 it('sets the first non-disabled radio as tabbable when none are checked', async () => {
     await fixture(html `<glide-core-radio-group name="name">
@@ -206,9 +206,9 @@ it('sets the first non-disabled radio as tabbable when none are checked', async
     </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');
+    expect(radios[0]?.getAttribute('tabindex')).to.equal('-1');
+    expect(radios[1]?.getAttribute('tabindex')).to.equal('0');
+    expect(radios[2]?.getAttribute('tabindex')).to.equal('-1');
 });
 it('no radios are tabbable when the group is "disabled"', async () => {
     await fixture(html `<glide-core-radio-group name="name" disabled>
@@ -222,9 +222,9 @@ it('no radios are tabbable when the group is "disabled"', async () => {
     </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');
+    expect(radios[0]?.getAttribute('tabindex')).to.equal('-1');
+    expect(radios[1]?.getAttribute('tabindex')).to.equal('-1');
+    expect(radios[2]?.getAttribute('tabindex')).to.equal('-1');
 });
 it('disabled radios are not tabbable', async () => {
     await fixture(html `<glide-core-radio-group name="name">
@@ -233,8 +233,8 @@ it('disabled radios are not tabbable', async () => {
     </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');
+    expect(radios[0]?.getAttribute('tabindex')).to.equal('-1');
+    expect(radios[1]?.getAttribute('tabindex')).to.equal('-1');
 });
 it('sets only the "checked" radio as tabbable', async () => {
     await fixture(html `<glide-core-radio-group name="name">
@@ -248,9 +248,9 @@ it('sets only the "checked" radio as tabbable', async () => {
     </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');
+    expect(radios[0]?.getAttribute('tabindex')).to.equal('-1');
+    expect(radios[1]?.getAttribute('tabindex')).to.equal('-1');
+    expect(radios[2]?.getAttribute('tabindex')).to.equal('0');
 });
 it('has reactive radio attribute "aria-checked"', async () => {
     await fixture(html `<glide-core-radio-group name="name">
@@ -258,13 +258,13 @@ it('has reactive radio attribute "aria-checked"', async () => {
     </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');
+    expect(radio?.getAttribute('aria-checked')).to.equal('false');
     radio?.setAttribute('checked', '');
     await elementUpdated(radio);
-    expect(radio).to.have.attribute('aria-checked', 'true');
+    expect(radio?.getAttribute('aria-checked')).to.equal('true');
     radio?.removeAttribute('checked');
     await elementUpdated(radio);
-    expect(radio).to.have.attribute('aria-checked', 'false');
+    expect(radio?.getAttribute('aria-checked')).to.equal('false');
 });
 it('has reactive radio attribute "aria-disabled"', async () => {
     await fixture(html `<glide-core-radio-group name="name">
@@ -272,13 +272,13 @@ it('has reactive radio attribute "aria-disabled"', async () => {
     </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');
+    expect(radio?.getAttribute('aria-disabled')).to.equal('false');
     radio?.setAttribute('disabled', '');
     await elementUpdated(radio);
-    expect(radio).to.have.attribute('aria-disabled', 'true');
+    expect(radio?.getAttribute('aria-disabled')).to.equal('true');
     radio?.removeAttribute('disabled');
     await elementUpdated(radio);
-    expect(radio).to.have.attribute('aria-disabled', 'false');
+    expect(radio?.getAttribute('aria-disabled')).to.equal('false');
 });
 it('has reactive radio attribute "aria-required"', async () => {
     await fixture(html `<glide-core-radio-group name="name">
@@ -286,13 +286,13 @@ it('has reactive radio attribute "aria-required"', async () => {
     </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');
+    expect(radio?.getAttribute('aria-required')).to.equal('false');
     radio?.setAttribute('required', '');
     await elementUpdated(radio);
-    expect(radio).to.have.attribute('aria-required', 'true');
+    expect(radio?.getAttribute('aria-required')).to.equal('true');
     radio?.removeAttribute('required');
     await elementUpdated(radio);
-    expect(radio).to.have.attribute('aria-required', 'false');
+    expect(radio?.getAttribute('aria-required')).to.equal('false');
 });
 it('has reactive radio attribute "aria-invalid"', async () => {
     await fixture(html `<glide-core-radio-group name="name">
@@ -300,13 +300,13 @@ it('has reactive radio attribute "aria-invalid"', async () => {
     </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');
+    expect(radio?.getAttribute('aria-invalid')).to.equal('false');
     radio?.setAttribute('invalid', '');
     await elementUpdated(radio);
-    expect(radio).to.have.attribute('aria-invalid', 'true');
+    expect(radio?.getAttribute('aria-invalid')).to.equal('true');
     radio?.removeAttribute('invalid');
     await elementUpdated(radio);
-    expect(radio).to.have.attribute('aria-invalid', 'false');
+    expect(radio?.getAttribute('aria-invalid')).to.equal('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>`);

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

@@ -188,7 +188,7 @@ it('changes the "checked" attribute when clicking', async () => {
     radios[2].click();
     await elementUpdated(component);
     expect(radios[2]).to.have.focus;
-    expect(radios[2]).to.have.attribute('checked');
+    expect(radios[2]?.hasAttribute('checked')).to.be.true;
     expect(radios[0]).to.not.have.attribute('checked');
 });
 it('does not change focus nor the "checked" attribute when clicking a disabled radio', async () => {
@@ -201,7 +201,7 @@ it('does not change focus nor the "checked" attribute when clicking a disabled r
     radios[1].click();
     await elementUpdated(component);
     expect(radios[0]).to.have.focus;
-    expect(radios[0]).to.have.attribute('checked');
+    expect(radios[0]?.hasAttribute('checked')).to.be.true;
     expect(radios[1]).to.not.have.attribute('checked');
 });
 it('does not change focus nor the "checked" attribute when clicking a disabled group', async () => {
@@ -214,7 +214,7 @@ it('does not change focus nor the "checked" attribute when clicking a disabled g
     radios[1].click();
     await elementUpdated(component);
     expect(radios[0]).to.not.have.focus;
-    expect(radios[0]).to.have.attribute('checked');
+    expect(radios[0]?.hasAttribute('checked')).to.be.true;
     expect(radios[1]).to.not.have.attribute('checked');
 });
 it('changes the "checked" attribute when pressing arrow and space keys', async () => {
@@ -227,24 +227,24 @@ it('changes the "checked" attribute when pressing arrow and space keys', async (
     await sendKeys({ press: 'Tab' });
     await sendKeys({ press: 'ArrowRight' });
     expect(radios[1]).to.have.focus;
-    expect(radios[1]).to.have.attribute('checked');
+    expect(radios[1]?.hasAttribute('checked')).to.be.true;
     expect(radios[0]).to.not.have.attribute('checked');
     await sendKeys({ press: 'ArrowDown' });
     expect(radios[2]).to.have.focus;
-    expect(radios[2]).to.have.attribute('checked');
+    expect(radios[2]?.hasAttribute('checked')).to.be.true;
     expect(radios[1]).to.not.have.attribute('checked');
     await sendKeys({ press: 'ArrowUp' });
     expect(radios[1]).to.have.focus;
-    expect(radios[1]).to.have.attribute('checked');
+    expect(radios[1]?.hasAttribute('checked')).to.be.true;
     expect(radios[2]).to.not.have.attribute('checked');
     await sendKeys({ press: 'ArrowLeft' });
     expect(radios[0]).to.have.focus;
-    expect(radios[0]).to.have.attribute('checked');
+    expect(radios[0]?.hasAttribute('checked')).to.be.true;
     expect(radios[1]).to.not.have.attribute('checked');
     radios[2].focus();
     await sendKeys({ press: ' ' });
     expect(radios[2]).to.have.focus;
-    expect(radios[2]).to.have.attribute('checked');
+    expect(radios[2]?.hasAttribute('checked')).to.be.true;
     expect(radios[0]).to.not.have.attribute('checked');
 });
 it('does not change the "checked" attribute nor focus when pressing arrow and space keys when the group is disabled', async () => {
@@ -257,22 +257,22 @@ it('does not change the "checked" attribute nor focus when pressing arrow and sp
     radios[0].focus();
     await sendKeys({ press: 'ArrowRight' });
     expect(radios[0]).to.have.focus;
-    expect(radios[0]).to.have.attribute('checked');
+    expect(radios[0]?.hasAttribute('checked')).to.be.true;
     expect(radios[2]).to.not.have.attribute('checked');
     await sendKeys({ press: 'ArrowDown' });
     expect(radios[0]).to.have.focus;
-    expect(radios[0]).to.have.attribute('checked');
+    expect(radios[0]?.hasAttribute('checked')).to.be.true;
     expect(radios[2]).to.not.have.attribute('checked');
     await sendKeys({ press: 'ArrowUp' });
     expect(radios[0]).to.have.focus;
-    expect(radios[0]).to.have.attribute('checked');
+    expect(radios[0]?.hasAttribute('checked')).to.be.true;
     expect(radios[1]).to.not.have.attribute('checked');
     await sendKeys({ press: 'ArrowLeft' });
     expect(radios[0]).to.have.focus;
-    expect(radios[0]).to.have.attribute('checked');
+    expect(radios[0]?.hasAttribute('checked')).to.be.true;
     expect(radios[1]).to.not.have.attribute('checked');
     radios[1].focus();
     await sendKeys({ press: ' ' });
-    expect(radios[0]).to.have.attribute('checked');
+    expect(radios[0]?.hasAttribute('checked')).to.be.true;
     expect(radios[1]).to.not.have.attribute('checked');
 });

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

@@ -88,7 +88,7 @@ it('reports validity if blurred', async () => {
         ?.hasAttribute('error')).to.be.false;
     await sendKeys({ press: 'Tab' });
     expect(document.activeElement === document.body).to.be.true;
-    expect(component.validity.valid).to.equal(false);
+    expect(component.validity.valid).to.be.false;
     expect(component.shadowRoot
         ?.querySelector('glide-core-private-label')
         ?.hasAttribute('error')).to.be.true;

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

@@ -41,13 +41,13 @@ it('can reset correctly when the checked radios are changed', async () => {
     const radios = component.querySelectorAll('glide-core-radio');
     radios[0].click();
     await elementUpdated(component);
-    expect(radios[0]).to.have.attribute('checked');
+    expect(radios[0]?.hasAttribute('checked')).to.be.true;
     expect(radios[1]).to.not.have.attribute('checked');
     expect(component.value).to.equal('value-1');
     form.reset();
     await elementUpdated(component);
     expect(radios[0]).to.not.have.attribute('checked');
-    expect(radios[1]).to.have.attribute('checked');
+    expect(radios[1]?.hasAttribute('checked')).to.be.true;
     expect(component.value).to.equal('value-2');
 });
 it('has `formData` when a radio is checked', async () => {

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

@@ -81,9 +81,9 @@ it('adds an error class after `reportValidity` is called when invalid and requir
     expect(isComponentErrorClass).to.be.true;
     const radios = document.querySelectorAll('glide-core-radio');
     expect(radios[0]?.invalid).to.be.true;
-    expect(radios[0]).to.have.attribute('aria-invalid', 'true');
+    expect(radios[0]?.getAttribute('aria-invalid')).to.equal('true');
     expect(radios[1]?.invalid).to.be.true;
-    expect(radios[1]).to.have.attribute('aria-invalid', 'true');
+    expect(radios[1]?.getAttribute('aria-invalid')).to.equal('true');
 });
 it('does not add an error class by default', async () => {
     const form = document.createElement('form');
@@ -105,9 +105,9 @@ it('does not add an error class by default', async () => {
         ?.classList.contains('invalid');
     expect(isRadioError).to.be.false;
     expect(radios[0]?.invalid).to.be.false;
-    expect(radios[0]).to.have.attribute('aria-invalid', 'false');
+    expect(radios[0]?.getAttribute('aria-invalid')).to.equal('false');
     expect(radios[1]?.invalid).to.be.false;
-    expect(radios[1]).to.have.attribute('aria-invalid', 'false');
+    expect(radios[1]?.getAttribute('aria-invalid')).to.equal('false');
 });
 it('does not add an error class after `reportValidity` is called when not required', async () => {
     const form = document.createElement('form');
@@ -131,9 +131,9 @@ it('does not add an error class after `reportValidity` is called when not requir
         ?.classList.contains('invalid');
     expect(isRadioError).to.be.false;
     expect(radios[0]?.invalid).to.be.false;
-    expect(radios[0]).to.have.attribute('aria-invalid', 'false');
+    expect(radios[0]?.getAttribute('aria-invalid')).to.equal('false');
     expect(radios[1]?.invalid).to.be.false;
-    expect(radios[1]).to.have.attribute('aria-invalid', 'false');
+    expect(radios[1]?.getAttribute('aria-invalid')).to.equal('false');
 });
 it('does not add an error class after `reportValidity` is called when required and a radio is checked', async () => {
     const form = document.createElement('form');
@@ -157,9 +157,9 @@ it('does not add an error class after `reportValidity` is called when required a
         ?.classList.contains('invalid');
     expect(isRadioError).to.be.false;
     expect(radios[0]?.invalid).to.be.false;
-    expect(radios[0]).to.have.attribute('aria-invalid', 'false');
+    expect(radios[0]?.getAttribute('aria-invalid')).to.equal('false');
     expect(radios[1]?.invalid).to.be.false;
-    expect(radios[1]).to.have.attribute('aria-invalid', 'false');
+    expect(radios[1]?.getAttribute('aria-invalid')).to.equal('false');
 });
 it('does not add an error class after `reportValidity` is called when required but disabled', async () => {
     const form = document.createElement('form');
@@ -183,9 +183,9 @@ it('does not add an error class after `reportValidity` is called when required b
         ?.classList.contains('invalid');
     expect(isRadioError).to.be.false;
     expect(radios[0]?.invalid).to.be.false;
-    expect(radios[0]).to.have.attribute('aria-invalid', 'false');
+    expect(radios[0]?.getAttribute('aria-invalid')).to.equal('false');
     expect(radios[1]?.invalid).to.be.false;
-    expect(radios[1]).to.have.attribute('aria-invalid', 'false');
+    expect(radios[1]?.getAttribute('aria-invalid')).to.equal('false');
 });
 it('does not add an error class after `checkValidity` is called when required', async () => {
     const form = document.createElement('form');
@@ -209,9 +209,9 @@ it('does not add an error class after `checkValidity` is called when required',
         ?.classList.contains('invalid');
     expect(isRadioError).to.be.false;
     expect(radios[0]?.invalid).to.be.false;
-    expect(radios[0]).to.have.attribute('aria-invalid', 'false');
+    expect(radios[0]?.getAttribute('aria-invalid')).to.equal('false');
     expect(radios[1]?.invalid).to.be.false;
-    expect(radios[1]).to.have.attribute('aria-invalid', 'false');
+    expect(radios[1]?.getAttribute('aria-invalid')).to.equal('false');
 });
 it('sets radios as valid initially when required', async () => {
     const form = document.createElement('form');

package/dist/radio.d.ts

@@ -4,9 +4,6 @@ declare global {
         'glide-core-radio': GlideCoreRadio;
     }
 }
-/**
- * @description A radio element for use with `<glide-core-radio-group>`.
- */
 export default class GlideCoreRadio extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;

package/dist/radio.styles.js

@@ -13,16 +13,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       }
     }
 
-    @media (prefers-reduced-motion: reduce) {
-      /**
-        ':host' is targeted here to increase specificity so that
-        we don't need to use '!important' to turn off the animation.
-      */
-      :host .component .radio-circle.checked.animate::after {
-        animation: none;
-      }
-    }
-
     :host {
       display: flex;
       outline: none;
@@ -74,8 +64,10 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
 
         &.animate {
           &.checked {
-            &::after {
-              animation: animate-radio 250ms cubic-bezier(0.25, 0, 0.3, 1);
+            @media (prefers-reduced-motion: no-preference) {
+              &::after {
+                animation: animate-radio 250ms cubic-bezier(0.25, 0, 0.3, 1);
+              }
             }
           }
         }

package/dist/split-button.d.ts

@@ -1,4 +1,3 @@
-import './menu.js';
 import { LitElement } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
@@ -6,22 +5,20 @@ declare global {
     }
 }
 /**
- * @description A button to be used in the `primary-action` slot of `glide-core-split-container`.
+ * @slot - One of `<glide-core-split-button-primary-button>` or `<glide-core-split-button-primary-link>`.
  *
- * @slot prefix - An optional icon slot to display before the label.
- * @slot - A label for the contents of the button.
+ * @slot secondary-button - One of `<glide-core-split-button-secondary-button>`.
  */
 export default class GlideCoreSplitButton extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
-    ariaControls: string | null;
-    ariaExpanded: 'true' | 'false' | null;
-    ariaHasPopup: 'true' | 'false' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | null;
-    disabled: boolean;
-    variant: 'primary' | 'secondary';
-    size: 'large' | 'small';
+    get size(): 'large' | 'small';
+    set size(size: 'large' | 'small');
+    get variant(): 'primary' | 'secondary';
+    set variant(variant: 'primary' | 'secondary');
     firstUpdated(): void;
+    private get secondaryButtonElement();
+    private get primaryButtonElement();
     render(): import("lit").TemplateResult<1>;
-    private hasPrefixSlot;
 }

package/dist/split-button.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(t,e,o,i){var l,r=arguments.length,a=r<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,i);else for(var s=t.length-1;s>=0;s--)(l=t[s])&&(a=(r<3?l(a):r>3?l(e,o,a):l(e,o))||a);return r>3&&a&&Object.defineProperty(e,o,a),a};import"./menu.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{ifDefined}from"lit/directives/if-defined.js";import{owSlot,owSlotType}from"./library/ow.js";import styles from"./split-button.styles.js";let GlideCoreSplitButton=class GlideCoreSplitButton extends LitElement{constructor(){super(...arguments),this.ariaControls=null,this.ariaExpanded=null,this.ariaHasPopup=null,this.disabled=!1,this.variant="primary",this.size="large",this.hasPrefixSlot=!1,this.#t=createRef(),this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#t.value),owSlotType(this.#t.value,[Text])}render(){return html`<button aria-controls="${ifDefined(this.ariaControls??void 0)}" aria-expanded="${ifDefined(this.ariaExpanded??void 0)}" aria-haspopup="${ifDefined(this.ariaHasPopup??void 0)}" class="${classMap({component:!0,disabled:this.disabled,[this.variant]:!0,[this.size]:!0,"has-prefix":this.hasPrefixSlot})}" data-test="split-button" type="button" ?disabled="${this.disabled}"><slot name="prefix" @slotchange="${this.#o}" ${ref(this.#e)} data-test="prefix-slot"></slot><slot @slotchange="${this.#i}" ${ref(this.#t)} data-test="default-slot"></slot></button>`}#t;#e;#i(){owSlot(this.#t.value),owSlotType(this.#t.value,[Text])}#o(){const t=this.#e.value?.assignedNodes();this.hasPrefixSlot=!!(t&&t.length>0)}};__decorate([property({attribute:"aria-controls",reflect:!0})],GlideCoreSplitButton.prototype,"ariaControls",void 0),__decorate([property({attribute:"aria-expanded",reflect:!0})],GlideCoreSplitButton.prototype,"ariaExpanded",void 0),__decorate([property({attribute:"aria-haspopup",reflect:!0})],GlideCoreSplitButton.prototype,"ariaHasPopup",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreSplitButton.prototype,"disabled",void 0),__decorate([property({reflect:!0})],GlideCoreSplitButton.prototype,"variant",void 0),__decorate([property({reflect:!0})],GlideCoreSplitButton.prototype,"size",void 0),__decorate([state()],GlideCoreSplitButton.prototype,"hasPrefixSlot",void 0),GlideCoreSplitButton=__decorate([customElement("glide-core-split-button")],GlideCoreSplitButton);export default GlideCoreSplitButton;
+var __decorate=this&&this.__decorate||function(t,e,o,n){var i,r=arguments.length,l=r<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,o,n);else for(var a=t.length-1;a>=0;a--)(i=t[a])&&(l=(r<3?i(l):r>3?i(e,o,l):i(e,o))||l);return r>3&&l&&Object.defineProperty(e,o,l),l};import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{owSlot,owSlotType}from"./library/ow.js";import GlideCoreSplitButtonPrimaryButton from"./split-button.primary-button.js";import GlideCoreSplitButtonPrimaryLink from"./split-button.primary-link.js";import GlideCoreSplitButtonSecondaryButton from"./split-button.secondary-button.js";import styles from"./split-button.styles.js";let GlideCoreSplitButton=class GlideCoreSplitButton extends LitElement{static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get size(){return this.#t}set size(t){this.#t=t,this.primaryButtonElement&&(this.primaryButtonElement.privateSize=t),this.secondaryButtonElement&&(this.secondaryButtonElement.privateSize=t)}get variant(){return this.#e}set variant(t){this.#e=t,this.primaryButtonElement&&(this.primaryButtonElement.privateVariant=t),this.secondaryButtonElement&&(this.secondaryButtonElement.privateVariant=t)}firstUpdated(){owSlot(this.#o.value),owSlot(this.#n.value),owSlotType(this.#o.value,[GlideCoreSplitButtonPrimaryButton,GlideCoreSplitButtonPrimaryLink]),owSlotType(this.#n.value,[GlideCoreSplitButtonSecondaryButton])}get secondaryButtonElement(){const t=this.#n.value?.assignedElements().at(0);if(t instanceof GlideCoreSplitButtonSecondaryButton)return t}get primaryButtonElement(){const t=this.#o.value?.assignedElements().at(0);if(t instanceof GlideCoreSplitButtonPrimaryButton||t instanceof GlideCoreSplitButtonPrimaryLink)return t}render(){return html`<div class="component"><slot @slotchange="${this.#i}" ${ref(this.#o)}></slot><slot name="secondary-button" @slotchange="${this.#r}" ${ref(this.#n)}></slot></div>`}#o=createRef();#n=createRef();#t="large";#e="primary";#i(){owSlot(this.#o.value),owSlotType(this.#o.value,[GlideCoreSplitButtonPrimaryButton,GlideCoreSplitButtonPrimaryLink]),this.primaryButtonElement&&(this.primaryButtonElement.privateSize=this.size,this.primaryButtonElement.privateVariant=this.variant)}#r(){owSlotType(this.#n.value,[GlideCoreSplitButtonSecondaryButton]),this.secondaryButtonElement&&(this.secondaryButtonElement.privateSize=this.size,this.secondaryButtonElement.privateVariant=this.variant)}};__decorate([property({reflect:!0})],GlideCoreSplitButton.prototype,"size",null),__decorate([property({reflect:!0})],GlideCoreSplitButton.prototype,"variant",null),GlideCoreSplitButton=__decorate([customElement("glide-core-split-button")],GlideCoreSplitButton);export default GlideCoreSplitButton;

package/dist/split-button.primary-button.d.ts

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-split-button-primary-button': GlideCoreSplitButtonPrimaryButton;
+    }
+}
+/**
+ * @slot icon - An optional icon before the label.
+ */
+export default class GlideCoreSplitButtonPrimaryButton extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    ariaControls: string | null;
+    ariaExpanded: 'true' | 'false' | null;
+    ariaHasPopup: 'true' | 'false' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | null;
+    disabled: boolean;
+    label?: string;
+    privateSize: 'large' | 'small';
+    privateVariant: 'primary' | 'secondary';
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/split-button.primary-button.js

@@ -0,0 +1 @@
+var __decorate=this&&this.__decorate||function(t,e,o,r){var i,a=arguments.length,l=a<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,o,r);else for(var p=t.length-1;p>=0;p--)(i=t[p])&&(l=(a<3?i(l):a>3?i(e,o,l):i(e,o))||l);return a>3&&l&&Object.defineProperty(e,o,l),l};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import styles from"./split-button.primary-button.styles.js";let GlideCoreSplitButtonPrimaryButton=class GlideCoreSplitButtonPrimaryButton extends LitElement{constructor(){super(...arguments),this.ariaControls=null,this.ariaExpanded=null,this.ariaHasPopup=null,this.disabled=!1,this.privateSize="large",this.privateVariant="primary"}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}render(){return html`<button aria-controls="${ifDefined(this.ariaControls??void 0)}" aria-expanded="${ifDefined(this.ariaExpanded??void 0)}" aria-haspopup="${ifDefined(this.ariaHasPopup??void 0)}" class="${classMap({component:!0,disabled:this.disabled,[this.privateVariant]:!0,[this.privateSize]:!0})}" data-test="component" type="button" ?disabled="${this.disabled}"><slot name="icon"></slot>${this.label}</button>`}};__decorate([property({attribute:"aria-controls",reflect:!0})],GlideCoreSplitButtonPrimaryButton.prototype,"ariaControls",void 0),__decorate([property({attribute:"aria-expanded",reflect:!0})],GlideCoreSplitButtonPrimaryButton.prototype,"ariaExpanded",void 0),__decorate([property({attribute:"aria-haspopup",reflect:!0})],GlideCoreSplitButtonPrimaryButton.prototype,"ariaHasPopup",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreSplitButtonPrimaryButton.prototype,"disabled",void 0),__decorate([property({reflect:!0})],GlideCoreSplitButtonPrimaryButton.prototype,"label",void 0),__decorate([state()],GlideCoreSplitButtonPrimaryButton.prototype,"privateSize",void 0),__decorate([state()],GlideCoreSplitButtonPrimaryButton.prototype,"privateVariant",void 0),GlideCoreSplitButtonPrimaryButton=__decorate([customElement("glide-core-split-button-primary-button")],GlideCoreSplitButtonPrimaryButton);export default GlideCoreSplitButtonPrimaryButton;