@crowdstrike/glide-core 0.9.0 → 0.9.2

package/dist/modal.test.basics.js

@@ -11,91 +11,89 @@ GlideCoreModal.shadowRootOptions.mode = 'open';
 it('registers', async () => {
     expect(window.customElements.get('glide-core-modal')).to.equal(GlideCoreModal);
 });
-it('is closed by default', async () => {
-    const element = await fixture(html `<glide-core-modal label="Modal title">
-      Modal Content
-    </glide-core-modal>`);
-    const dialog = element.shadowRoot?.querySelector('dialog');
+it('has defaults', async () => {
+    const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
+    const dialog = component.shadowRoot?.querySelector('dialog');
     expect(dialog).to.be.ok;
     expect(dialog?.hasAttribute('open')).to.be.false;
+    expect(component.size).to.equal('medium');
+    expect(component.getAttribute('size')).to.equal('medium');
+    expect(component.showBackButton).to.be.false;
+    expect(component.hasAttribute('show-back-button')).to.be.false;
 });
 it('renders the provided "label"', async () => {
-    const element = await fixture(html `<glide-core-modal label="Modal title">
-      Modal Content
-    </glide-core-modal>`);
-    element.showModal();
-    const label = element.shadowRoot?.querySelector('[data-test="heading"]');
+    const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
+    component.showModal();
+    const label = component.shadowRoot?.querySelector('[data-test="heading"]');
     expect(label).to.be.ok;
-    expect(label?.textContent?.trim()).to.equal('Modal title');
+    expect(label?.textContent?.trim()).to.equal('Label');
 });
 it('does not render the show back button in the label by default', async () => {
-    const element = await fixture(html `<glide-core-modal label="Modal title">
-      Modal Content
-    </glide-core-modal>`);
-    element.showModal();
-    expect(element.shadowRoot?.querySelector('[data-test="back-button"]')).to.be.null;
+    const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
+    component.showModal();
+    expect(component.shadowRoot?.querySelector('[data-test="back-button"]')).to.be.null;
 });
 it('renders the show back button in the label when provided with "show-back-button"', async () => {
-    const element = await fixture(html `<glide-core-modal label="Modal title" show-back-button>
-      Modal Content
+    const component = await fixture(html `<glide-core-modal label="Label" show-back-button>
+      Content
     </glide-core-modal>`);
-    element.showModal();
-    expect(element.shadowRoot?.querySelector('[data-test="back-button"]')).to.be.ok;
+    component.showModal();
+    expect(component.shadowRoot?.querySelector('[data-test="back-button"]')).to.be.ok;
 });
 it('renders the provided default slotted content', async () => {
-    const element = await fixture(html `<glide-core-modal label="Modal title">
+    const component = await fixture(html `<glide-core-modal label="Label">
       <p data-body>Inner content</p>
     </glide-core-modal>`);
-    element.showModal();
-    const body = element.querySelector('[data-body]');
+    component.showModal();
+    const body = component.querySelector('[data-body]');
     expect(body).to.be.ok;
 });
 it('renders the provided primary slot content', async () => {
-    const element = await fixture(html `<glide-core-modal label="Modal title">
-      Modal Content
+    const component = await fixture(html `<glide-core-modal label="Label">
+      Content
       <glide-core-button slot="primary" data-primary>Primary</glide-core-button>
     </glide-core-modal>`);
-    element.showModal();
-    const slotContent = element.querySelector('[data-primary]');
+    component.showModal();
+    const slotContent = component.querySelector('[data-primary]');
     expect(slotContent).to.be.ok;
-    const slotNodes = element.shadowRoot
+    const slotNodes = component.shadowRoot
         ?.querySelector('slot[name="primary"]')
         ?.assignedNodes();
     expect(slotNodes?.length).to.equal(1);
 });
 it('renders the provided secondary slot content', async () => {
-    const element = await fixture(html `<glide-core-modal label="Modal title">
-      Modal Content
+    const component = await fixture(html `<glide-core-modal label="Label">
+      Content
       <glide-core-button slot="secondary" data-secondary
         >Secondary</glide-core-button
       >
     </glide-core-modal>`);
-    element.showModal();
-    const slotContent = element.querySelector('[data-secondary]');
+    component.showModal();
+    const slotContent = component.querySelector('[data-secondary]');
     expect(slotContent).to.be.ok;
-    const slotNodes = element.shadowRoot
+    const slotNodes = component.shadowRoot
         ?.querySelector('slot[name="secondary"]')
         ?.assignedNodes();
     expect(slotNodes?.length).to.equal(1);
 });
 it('renders the provided tertiary slot content', async () => {
-    const element = await fixture(html `<glide-core-modal label="Modal title">
-      Modal Content
+    const component = await fixture(html `<glide-core-modal label="Label">
+      Content
       <glide-core-button slot="tertiary" data-tertiary
         >Tertiary</glide-core-button
       >
     </glide-core-modal>`);
-    element.showModal();
-    const slotContent = element.querySelector('[data-tertiary]');
+    component.showModal();
+    const slotContent = component.querySelector('[data-tertiary]');
     expect(slotContent).to.be.ok;
-    const slotNodes = element.shadowRoot
+    const slotNodes = component.shadowRoot
         ?.querySelector('slot[name="tertiary"]')
         ?.assignedNodes();
     expect(slotNodes?.length).to.equal(1);
 });
 it('renders the provided header-actions slot content', async () => {
-    const element = await fixture(html `<glide-core-modal label="Modal title">
-      Modal Content
+    const component = await fixture(html `<glide-core-modal label="Label">
+      Content
 
       <glide-core-modal-icon-button slot="header-actions" data-actions="1"
         >action1</glide-core-modal-icon-button
@@ -105,63 +103,61 @@ it('renders the provided header-actions slot content', async () => {
         >action2</glide-core-modal-icon-button
       >
     </glide-core-modal>`);
-    element.showModal();
-    const slotContent = element.querySelector('[data-actions]');
+    component.showModal();
+    const slotContent = component.querySelector('[data-actions]');
     expect(slotContent).to.be.ok;
-    const slotNodes = element.shadowRoot
+    const slotNodes = component.shadowRoot
         ?.querySelector('slot[name="header-actions"]')
         ?.assignedNodes();
     expect(slotNodes?.length).to.equal(2);
 });
 it('defaults the size to "medium"', async () => {
-    const element = await fixture(html `<glide-core-modal label="Modal title">
-      Modal Content
-    </glide-core-modal>`);
+    const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
     expect([
-        ...element.shadowRoot.querySelector('dialog')
+        ...component.shadowRoot.querySelector('dialog')
             .classList,
     ]).to.deep.equal(['component', 'medium']);
 });
 it('sets the size to "small"', async () => {
-    const element = await fixture(html `<glide-core-modal label="Modal title" size="small">
-      Modal Content
+    const component = await fixture(html `<glide-core-modal label="Label" size="small">
+      Content
     </glide-core-modal>`);
     expect([
-        ...element.shadowRoot.querySelector('dialog')
+        ...component.shadowRoot.querySelector('dialog')
             .classList,
     ]).to.deep.equal(['component', 'small']);
 });
 it('sets the size to "medium"', async () => {
-    const element = await fixture(html `<glide-core-modal label="Modal title" size="medium">
-      Modal Content
+    const component = await fixture(html `<glide-core-modal label="Label" size="medium">
+      Content
     </glide-core-modal>`);
     expect([
-        ...element.shadowRoot.querySelector('dialog')
+        ...component.shadowRoot.querySelector('dialog')
             .classList,
     ]).to.deep.equal(['component', 'medium']);
 });
 it('sets the size to "large"', async () => {
-    const element = await fixture(html `<glide-core-modal label="Modal title" size="large">
-      Modal Content
+    const component = await fixture(html `<glide-core-modal label="Label" size="large">
+      Content
     </glide-core-modal>`);
     expect([
-        ...element.shadowRoot.querySelector('dialog')
+        ...component.shadowRoot.querySelector('dialog')
             .classList,
     ]).to.deep.equal(['component', 'large']);
 });
 it('sets the size to "xlarge"', async () => {
-    const element = await fixture(html `<glide-core-modal label="Modal title" size="xlarge">
-      Modal Content
+    const component = await fixture(html `<glide-core-modal label="Label" size="xlarge">
+      Content
     </glide-core-modal>`);
     expect([
-        ...element.shadowRoot.querySelector('dialog')
+        ...component.shadowRoot.querySelector('dialog')
             .classList,
     ]).to.deep.equal(['component', 'xlarge']);
 });
 it('throws if it does not have a default slot', async () => {
     const spy = sinon.spy();
     try {
-        await fixture(html `<glide-core-modal label="Modal title"></glide-core-modal>`);
+        await fixture(html `<glide-core-modal label="Label"></glide-core-modal>`);
     }
     catch (error) {
         if (error instanceof ArgumentError) {
@@ -172,32 +168,32 @@ it('throws if it does not have a default slot', async () => {
 });
 it('throws an error when the "primary" footer slot has the incorrect type', async () => {
     await expectArgumentError(() => {
-        return fixture(html `<glide-core-modal label="Modal title">
-        Modal Content
+        return fixture(html `<glide-core-modal label="Label">
+        Content
         <span slot="primary">Primary</span>
       </glide-core-modal>`);
     });
 });
 it('throws an error when the "secondary" footer slot has the incorrect type', async () => {
     await expectArgumentError(() => {
-        return fixture(html `<glide-core-modal label="Modal title">
-        Modal Content
+        return fixture(html `<glide-core-modal label="Label">
+        Content
         <span slot="secondary">Secondary</span>
       </glide-core-modal>`);
     });
 });
 it('throws an error when the "header actions" slot has the incorrect type', async () => {
     await expectArgumentError(() => {
-        return fixture(html `<glide-core-modal label="Modal title">
-        Modal Content
+        return fixture(html `<glide-core-modal label="Label">
+        Content
         <span slot="header-actions">Header Action</span>
       </glide-core-modal>`);
     });
 });
 it('throws an error when the "tertiary" footer slot has the incorrect type', async () => {
     await expectArgumentError(() => {
-        return fixture(html `<glide-core-modal label="Modal title">
-        Modal Content
+        return fixture(html `<glide-core-modal label="Label">
+        Content
         <span slot="tertiary">Tertiary</span>
       </glide-core-modal>`);
     });

package/dist/modal.test.close.js

@@ -4,35 +4,31 @@ import { sendKeys } from '@web/test-runner-commands';
 import GlideCoreModal from './modal.js';
 GlideCoreModal.shadowRootOptions.mode = 'open';
 it('closes the modal when the close button is clicked', async () => {
-    const element = await fixture(html `<glide-core-modal label="Modal title">
-      Modal Content
-    </glide-core-modal>`);
-    element.showModal();
-    const button = element.shadowRoot.querySelector('[data-test="close-button"]');
+    const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
+    component.showModal();
+    const button = component.shadowRoot.querySelector('[data-test="close-button"]');
     expect(button).to.be.ok;
     button?.click();
-    expect(element
+    expect(component
         .shadowRoot.querySelector('dialog')
         ?.hasAttribute('open')).to.be.false;
 });
 it('closes the modal when the escape key is pressed', async () => {
-    const element = await fixture(html `<glide-core-modal label="Modal title">
-      Modal Content
-    </glide-core-modal>`);
-    element.showModal();
-    const dialogElement = element.shadowRoot.querySelector('dialog');
+    const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
+    component.showModal();
+    const dialogElement = component.shadowRoot.querySelector('dialog');
     expect(dialogElement?.hasAttribute('open')).to.be.true;
     await sendKeys({ press: 'Escape' });
     expect(dialogElement?.hasAttribute('open')).to.be.false;
 });
 it('closes the modal via "show-back-button"', async () => {
-    const element = await fixture(html `<glide-core-modal label="Modal title" show-back-button>
-      Modal Content
+    const component = await fixture(html `<glide-core-modal label="Label" show-back-button>
+      Content
     </glide-core-modal>`);
-    element.showModal();
-    const dialogElement = element.shadowRoot.querySelector('dialog');
+    component.showModal();
+    const dialogElement = component.shadowRoot.querySelector('dialog');
     expect(dialogElement?.hasAttribute('open')).to.be.true;
-    const button = element.shadowRoot.querySelector('[data-test="back-button"]');
+    const button = component.shadowRoot.querySelector('[data-test="back-button"]');
     expect(button).to.be.ok;
     button?.click();
     expect(dialogElement?.hasAttribute('open')).to.be.false;

package/dist/modal.test.events.js

@@ -7,44 +7,36 @@ import sinon from 'sinon';
 GlideCoreModal.shadowRootOptions.mode = 'open';
 it('dispatches a "close" event when the modal is closed via the "close" method', async () => {
     const spy = sinon.spy();
-    const element = await fixture(html `<glide-core-modal label="Modal title"
-      >Modal Content</glide-core-modal
-    >`);
-    element.addEventListener('close', spy);
-    element.showModal();
+    const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
+    component.addEventListener('close', spy);
+    component.showModal();
     expect(spy.callCount).to.equal(0);
-    element.close();
+    component.close();
     expect(spy.callCount).to.equal(1);
 });
 it('dispatches a "close" event when the modal is closed via the close button', async () => {
     const spy = sinon.spy();
-    const element = await fixture(html `<glide-core-modal label="Modal title"
-      >Modal Content</glide-core-modal
-    >`);
-    element.addEventListener('close', spy);
-    element.showModal();
-    const button = element.shadowRoot?.querySelector('[data-test="close-button"]');
+    const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
+    component.addEventListener('close', spy);
+    component.showModal();
+    const button = component.shadowRoot?.querySelector('[data-test="close-button"]');
     expect(button).to.be.ok;
     button?.click();
     expect(spy.callCount).to.equal(1);
 });
 it('dispatches a "close" event when the modal is closed via the escape key', async () => {
     const spy = sinon.spy();
-    const element = await fixture(html `<glide-core-modal label="Modal title"
-      >Modal Content</glide-core-modal
-    >`);
-    element.addEventListener('close', spy);
-    element.showModal();
+    const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
+    component.addEventListener('close', spy);
+    component.showModal();
     await sendKeys({ press: 'Escape' });
     expect(spy.callCount).to.equal(1);
 });
 it('does not dispatch a "close" event when the modal is open and non-escape keys are pressed', async () => {
     const spy = sinon.spy();
-    const element = await fixture(html `<glide-core-modal label="Modal title"
-      >Modal Content</glide-core-modal
-    >`);
-    element.addEventListener('close', spy);
-    element.showModal();
+    const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
+    component.addEventListener('close', spy);
+    component.showModal();
     // Tests only a couple keys.
     await sendKeys({ press: ' ' });
     expect(spy.callCount).to.equal(0);
@@ -53,24 +45,22 @@ it('does not dispatch a "close" event when the modal is open and non-escape keys
 });
 it('dispatches a "close" event when the modal is closed via "show-back-button"', async () => {
     const spy = sinon.spy();
-    const element = await fixture(html `<glide-core-modal label="Modal title" show-back-button>
-      Modal Content
+    const component = await fixture(html `<glide-core-modal label="Label" show-back-button>
+      Content
     </glide-core-modal>`);
-    element.addEventListener('close', spy);
-    element.showModal();
-    const button = element.shadowRoot?.querySelector('[data-test="back-button"]');
+    component.addEventListener('close', spy);
+    component.showModal();
+    const button = component.shadowRoot?.querySelector('[data-test="back-button"]');
     expect(button).to.be.ok;
     button?.click();
     expect(spy.callCount).to.equal(1);
 });
 it('does not emit a "close" event when clicking inside the dialog and the mouse is not positioned on a "close" button', async () => {
     const spy = sinon.spy();
-    const element = await fixture(html `<glide-core-modal label="Modal title"
-      >Modal Content</glide-core-modal
-    >`);
-    element.showModal();
-    element.addEventListener('close', spy);
-    const dialogElement = element?.shadowRoot?.querySelector('dialog');
+    const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
+    component.showModal();
+    component.addEventListener('close', spy);
+    const dialogElement = component?.shadowRoot?.querySelector('dialog');
     const boundingRectangle = dialogElement?.getBoundingClientRect();
     expect(boundingRectangle).is.not.null;
     const { top, left } = boundingRectangle;
@@ -80,26 +70,24 @@ it('does not emit a "close" event when clicking inside the dialog and the mouse
     });
     expect(spy.callCount).to.equal(0);
 });
-it(`does not emit a "close" event if a mousedown event's origin does not come from the dialog element`, async () => {
+it(`does not emit a "close" event if a mousedown event's origin does not come from the dialog component`, async () => {
     const spy = sinon.spy();
-    const element = await fixture(html `<glide-core-modal label="Modal title">
+    const component = await fixture(html `<glide-core-modal label="Label">
       <button data-test="target">Inside Body</button>
     </glide-core-modal>`);
-    element.showModal();
-    element.addEventListener('close', spy);
-    const button = element.querySelector('[data-test="target"]');
+    component.showModal();
+    component.addEventListener('close', spy);
+    const button = component.querySelector('[data-test="target"]');
     expect(button).to.be.ok;
     button?.dispatchEvent(new Event('mousedown', { bubbles: true }));
     expect(spy.callCount).to.equal(0);
 });
 it('emits a "close" event when clicking outside the dialog', async () => {
     const spy = sinon.spy();
-    const element = await fixture(html `<glide-core-modal label="Modal title"
-      >Modal Content</glide-core-modal
-    >`);
-    element.showModal();
-    element.addEventListener('close', spy);
-    const dialogElement = element?.shadowRoot?.querySelector('dialog');
+    const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
+    component.showModal();
+    component.addEventListener('close', spy);
+    const dialogElement = component?.shadowRoot?.querySelector('dialog');
     const boundingRectangle = dialogElement?.getBoundingClientRect();
     expect(boundingRectangle).is.not.null;
     const { top, left } = boundingRectangle;

package/dist/modal.test.lock-scroll.js

@@ -15,56 +15,46 @@ after(() => {
     removeSpy.restore();
 });
 it('adds the "private-glide-core-modal-lock-scroll" class to the documentElement when opened and removes it when closed', async () => {
-    const element = await fixture(html `<glide-core-modal label="Modal title"
-      >Modal Content</glide-core-modal
-    >`);
-    element.showModal();
+    const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
+    component.showModal();
     expect(addSpy.callCount).to.equal(1);
     expect(addSpy.calledWith('private-glide-core-modal-lock-scroll')).to.be.ok;
     expect(removeSpy.callCount).to.equal(0);
-    element.close();
+    component.close();
     expect(removeSpy.callCount).to.equal(1);
     expect(removeSpy.calledWith('private-glide-core-modal-lock-scroll')).to.be.ok;
     // Verify `add` was not called again for some reason
     expect(addSpy.callCount).to.equal(1);
 });
 it('removes the "private-glide-core-modal-lock-scroll" class when the close button is clicked', async () => {
-    const element = await fixture(html `<glide-core-modal label="Modal title"
-      >Modal Content</glide-core-modal
-    >`);
-    element.showModal();
+    const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
+    component.showModal();
     expect(removeSpy.callCount).to.equal(0);
-    const button = element.shadowRoot.querySelector('[data-test="close-button"]');
+    const button = component.shadowRoot.querySelector('[data-test="close-button"]');
     expect(button).to.be.ok;
     button?.click();
     expect(removeSpy.callCount).to.equal(1);
 });
 it('removes the "private-glide-core-modal-lock-scroll" class when the "close" method is called', async () => {
-    const element = await fixture(html `<glide-core-modal label="Modal title"
-      >Modal Content</glide-core-modal
-    >`);
-    element.showModal();
+    const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
+    component.showModal();
     expect(removeSpy.callCount).to.equal(0);
-    const dialogElement = element.shadowRoot.querySelector('dialog');
+    const dialogElement = component.shadowRoot.querySelector('dialog');
     expect(dialogElement?.hasAttribute('open')).to.be.true;
-    element.close();
+    component.close();
     expect(removeSpy.callCount).to.equal(1);
 });
 it('removes the "private-glide-core-modal-lock-scroll" class when the escape key is pressed', async () => {
-    const element = await fixture(html `<glide-core-modal label="Modal title"
-      >Modal Content</glide-core-modal
-    >`);
-    element.showModal();
+    const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
+    component.showModal();
     expect(removeSpy.callCount).to.equal(0);
     await sendKeys({ press: 'Escape' });
     expect(removeSpy.callCount).to.equal(1);
 });
 it('removes class "private-glide-core-modal-lock-scroll" from document when click is outside dialog', async () => {
-    const element = await fixture(html `<glide-core-modal label="Modal title"
-      >Modal Content</glide-core-modal
-    >`);
-    element.showModal();
-    const dialogElement = element?.shadowRoot?.querySelector('dialog');
+    const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
+    component.showModal();
+    const dialogElement = component?.shadowRoot?.querySelector('dialog');
     const boundingRectangle = dialogElement?.getBoundingClientRect();
     expect(boundingRectangle).is.not.null;
     expect(document.documentElement.classList.contains('private-glide-core-modal-lock-scroll')).to.be.true;

package/dist/modal.test.methods.js

@@ -3,22 +3,18 @@ import { expect, fixture, html } from '@open-wc/testing';
 import GlideCoreModal from './modal.js';
 GlideCoreModal.shadowRootOptions.mode = 'open';
 it('opens the modal when the "showModal" method is called and closes it when "close" is called', async () => {
-    const element = await fixture(html `<glide-core-modal label="Modal title">
-      Modal Content
-    </glide-core-modal>`);
-    element.showModal();
-    const dialogElement = element.shadowRoot?.querySelector('dialog');
+    const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
+    component.showModal();
+    const dialogElement = component.shadowRoot?.querySelector('dialog');
     expect(dialogElement?.hasAttribute('open')).to.be.true;
-    element.close();
+    component.close();
     expect(dialogElement?.hasAttribute('open')).to.be.false;
 });
 it('remains open when the "showModal" method is called twice', async () => {
-    const element = await fixture(html `<glide-core-modal label="Modal title">
-      Modal Content
-    </glide-core-modal>`);
-    element.showModal();
-    const dialogElement = element.shadowRoot?.querySelector('dialog');
+    const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
+    component.showModal();
+    const dialogElement = component.shadowRoot?.querySelector('dialog');
     expect(dialogElement?.hasAttribute('open')).to.be.true;
-    element.showModal();
+    component.showModal();
     expect(dialogElement?.hasAttribute('open')).to.be.true;
 });

package/dist/modal.test.scrollbars.js

@@ -11,10 +11,8 @@ afterEach(() => {
     setPropertySpy.restore();
 });
 it('sets the "--glide-scroll-size" variable when the browser does not support scrollbar-gutter', async () => {
-    const element = await fixture(html `<glide-core-modal label="Modal title">
-      Modal Content
-    </glide-core-modal>`);
-    element.showModal();
+    const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
+    component.showModal();
     expect(cssSupportsStub.calledWith('scrollbar-gutter')).to.be.ok;
     expect(setPropertySpy.callCount).to.equal(1);
 });

package/dist/radio-group.d.ts

@@ -8,10 +8,11 @@ declare global {
 }
 /**
  /**
- * @description A radio group with a label, and optional tooltip and description. Participates in forms and validation via `FormData` and various methods.
+ * @description A radio group with a label, and optional description and tooltip. Participates in forms and validation via `FormData` and various methods.
  *
- * @event change - Dispatched when a radio is clicked or checked by key press.
- * @event input - Dispatched when a radio is clicked or checked by key press.
+ * @event change - `(event: Event) => void`
+ * @event input - `(event: Event) => void`
+ * @event invalid - `(event: Event) => void`
  *
  * @slot - One or more of `<glide-core-radio>`.
  * @slot description - Additional information or context.

package/dist/radio-group.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,i,t,o){var s,d=arguments.length,a=d<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,t):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,i,t,o);else for(var r=e.length-1;r>=0;r--)(s=e[r])&&(a=(d<3?s(a):d>3?s(i,t,a):s(i,t))||a);return d>3&&a&&Object.defineProperty(i,t,a),a};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{ifDefined}from"lit/directives/if-defined.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(){this.isCheckingValidity=!0;const e=this.#e.checkValidity();return this.isCheckingValidity=!1,e}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.#d()}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.#a(e===this.#t,e)}render(){return html`<div class="component" @click="${this.#r}" @keydown="${this.#l}" ${ref(this.#n)}><glide-core-private-label orientation="horizontal" split="${ifDefined(this.privateSplit??void 0)}" ?disabled="${this.disabled}" ?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" @blur="${this.#c}"><slot ${ref(this.#o)} @slotchange="${this.#p}"></slot></div><slot name="tooltip" slot="tooltip"></slot><slot id="description" name="description" slot="description"></slot></glide-core-private-label></div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#e.reportValidity();return this.requestUpdate(),e}updated(e){this.hasUpdated&&(e.has("value")||e.has("required"))&&(this.#f(),this.#u(!this.#e.validity.valid),this.requestUpdate())}willUpdate(e){if(this.hasUpdated){if(e.has("required")&&this.#R(),e.has("disabled")){for(const e of this.#s)this.#m(this.disabled,e);!this.disabled&&this.#b()}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.isBlurring=!1,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.#v)}#n;#o;#t;#e;#C;#i;#d(){const e=this.#s.find((e=>e.checked));this.value=e?.value??this.#t?.value??"",this.#C=e??this.#t,this.required&&this.#R();for(const e of this.#s)this.disabled?this.#m(this.disabled,e):this.#m(e.disabled,e),e.addEventListener("blur",this.#y.bind(this));!this.disabled&&this.#b()}get#h(){const e=!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit;return this.#u(e),e}#c(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#r(e){if(this.disabled)return;if(e.target instanceof GlideCoreRadio&&e.target.disabled&&this.#C&&!this.#C.disabled)return void this.#C?.focus();const i=e.target;if(i instanceof GlideCoreRadio&&i&&!i.disabled){this.#a(!0,i);for(const e of this.#s)e!==i&&this.#a(!1,e)}}#p(){owSlot(this.#o.value),owSlotType(this.#o.value,[GlideCoreRadio]),this.#d()}#v(e){if(e.preventDefault(),!this.isCheckingValidity){if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}}#l(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.#a(!1,i),this.#a(!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.#a(!1,i),this.#a(!0,t));break}case" ":if(e.preventDefault(),!i.disabled&&!i.checked){this.#a(!0,i);for(const e of this.#s)e!==i&&this.#a(!1,e)}}}}#y(e){const i=e.relatedTarget;i&&i instanceof GlideCoreRadio&&this.#s.includes(i)||this.#c()}#f(){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))??[]}#a(e,i){i.checked=e,i.tabIndex=e?0:-1,e&&(this.#C=i,this.value=i.value,i.focus(),i.dispatchEvent(new Event("change",{bubbles:!0})),i.dispatchEvent(new Event("input",{bubbles:!0})))}#m(e,i){i.disabled=e,e&&(i.tabIndex=-1)}#u(e){for(const i of this.#s)i.invalid=e}#b(){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}#R(){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()],GlideCoreRadioGroup.prototype,"privateSplit",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,"isBlurring",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;
+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 r=e.length-1;r>=0;r--)(s=e[r])&&(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{ifDefined}from"lit/directives/if-defined.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(){this.isCheckingValidity=!0;const e=this.#e.checkValidity();return this.isCheckingValidity=!1,e}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.#r}" @keydown="${this.#l}" ${ref(this.#n)}><glide-core-private-label orientation="horizontal" split="${ifDefined(this.privateSplit??void 0)}" ?disabled="${this.disabled}" ?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" @blur="${this.#c}"><slot ${ref(this.#o)} @slotchange="${this.#p}"></slot></div><slot name="tooltip" slot="tooltip"></slot><slot id="description" name="description" slot="description"></slot></glide-core-private-label></div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#e.reportValidity();return this.requestUpdate(),e}updated(e){this.hasUpdated&&(e.has("value")||e.has("required"))&&(this.#f(),this.#u(!this.#e.validity.valid),this.requestUpdate())}willUpdate(e){if(this.hasUpdated){if(e.has("required")&&this.#R(),e.has("disabled")){for(const e of this.#s)this.#m(this.disabled,e);!this.disabled&&this.#b()}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.isBlurring=!1,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.#v)}#n;#o;#t;#e;#C;#i;#a(){const e=this.#s.find((e=>e.checked));this.value=e?.value??this.#t?.value??"",this.#C=e??this.#t,this.required&&this.#R();for(const e of this.#s)this.disabled?this.#m(this.disabled,e):this.#m(e.disabled,e),e.addEventListener("blur",this.#y.bind(this));!this.disabled&&this.#b()}get#h(){const e=!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit;return this.#u(e),e}#c(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#r(e){if(this.disabled)return;if(e.target instanceof GlideCoreRadio&&e.target.disabled&&this.#C&&!this.#C.disabled)return void this.#C?.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)}}#p(){owSlot(this.#o.value),owSlotType(this.#o.value,[GlideCoreRadio]),this.#a()}#v(e){if(e.preventDefault(),!this.isCheckingValidity){if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}}#l(e){if(!(this.disabled||e.target instanceof GlideCoreRadio&&e.target?.disabled)&&e.target instanceof GlideCoreRadio){const i=e.target;switch(e.key){case"Enter":this.form?.requestSubmit();break;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)}}}}#y(e){const i=e.relatedTarget;i&&i instanceof GlideCoreRadio&&this.#s.includes(i)||this.#c()}#f(){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.#C=i,this.value=i.value,i.focus(),i.dispatchEvent(new Event("change",{bubbles:!0})),i.dispatchEvent(new Event("input",{bubbles:!0})))}#m(e,i){i.disabled=e,e&&(i.tabIndex=-1)}#u(e){for(const i of this.#s)i.invalid=e}#b(){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}#R(){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()],GlideCoreRadioGroup.prototype,"privateSplit",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,"isBlurring",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.stories.d.ts

@@ -4,5 +4,5 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 declare const meta: Meta;
 export default meta;
 export declare const Vertical: StoryObj;
-export declare const VerticalWithToolip: StoryObj;
+export declare const VerticalWithTooltip: StoryObj;
 export declare const VerticalWithError: StoryObj;