@crowdstrike/glide-core 0.9.6 → 0.10.0

package/dist/menu.test.focus.js

@@ -5,19 +5,6 @@ import { aTimeout, assert, elementUpdated, expect, fixture, html, } from '@open-
 import { sendKeys } from '@web/test-runner-commands';
 import GlideCoreMenu from './menu.js';
 GlideCoreMenu.shadowRootOptions.mode = 'open';
-it('focuses the target on `focus()`', async () => {
-    const component = await fixture(html `<glide-core-menu>
-      <button slot="target">Target</button>
-
-      <glide-core-menu-options>
-        <glide-core-menu-link label="Link"></glide-core-menu-link>
-      </glide-core-menu-options>
-    </glide-core-menu>`);
-    component.focus();
-    const target = component.querySelector('button');
-    assert(target);
-    expect(document.activeElement).to.equal(target);
-});
 it('closes when it loses focus', async () => {
     const component = await fixture(html `<glide-core-menu open>
       <button slot="target">Target</button>
@@ -26,7 +13,7 @@ it('closes when it loses focus', async () => {
         <glide-core-menu-link label="Link"></glide-core-menu-link>
       </glide-core-menu-options>
     </glide-core-menu>`);
-    component.focus();
+    component.querySelector('button')?.focus();
     await sendKeys({ press: 'Tab' });
     const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
     const options = component.querySelector('glide-core-menu-options');
@@ -44,7 +31,7 @@ it('remains open when the options component is focused', async () => {
     </glide-core-menu>`);
     // Wait for Floating UI.
     await aTimeout(0);
-    component.focus();
+    component.querySelector('button')?.focus();
     const options = component.querySelector('glide-core-menu-options');
     const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
     options?.focus();
@@ -61,7 +48,7 @@ it('remains open when an option is focused', async () => {
     </glide-core-menu>`);
     // Wait for Floating UI.
     await aTimeout(0);
-    component.focus();
+    component.querySelector('button')?.focus();
     const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
     const option = component.querySelector('glide-core-menu-link');
     assert(option);
@@ -80,7 +67,7 @@ it('sets an inactive option as active when focused', async () => {
     </glide-core-menu>`);
     // Wait for Floating UI.
     await aTimeout(0);
-    component.focus();
+    component.querySelector('button')?.focus();
     const button = component.querySelector('glide-core-menu-button');
     const link = component.querySelector('glide-core-menu-link');
     const options = component.querySelector('glide-core-menu-options');
@@ -103,7 +90,7 @@ it('sets an already active option as active when focused', async () => {
     </glide-core-menu>`);
     // Wait for Floating UI.
     await aTimeout(0);
-    component.focus();
+    component.querySelector('button')?.focus();
     const button = component.querySelector('glide-core-menu-button');
     const link = component.querySelector('glide-core-menu-link');
     const options = component.querySelector('glide-core-menu-options');

package/dist/menu.test.interactions.js

@@ -11,6 +11,7 @@ import { LitElement } from 'lit';
 import { aTimeout, assert, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
 import { customElement } from 'lit/decorators.js';
 import { sendKeys } from '@web/test-runner-commands';
+import { sendMouse } from '@web/test-runner-commands';
 import GlideCoreMenu from './menu.js';
 let GlideCoreNestedSlot = class GlideCoreNestedSlot extends LitElement {
     static { this.shadowRootOptions = {
@@ -30,8 +31,27 @@ let GlideCoreNestedSlot = class GlideCoreNestedSlot extends LitElement {
 GlideCoreNestedSlot = __decorate([
     customElement('glide-core-nested-slot')
 ], GlideCoreNestedSlot);
+let GlideCoreMenuInAnotherComponent = class GlideCoreMenuInAnotherComponent extends LitElement {
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        mode: 'closed',
+    }; }
+    render() {
+        return html `<glide-core-menu open>
+      <button slot="target">Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
+    </glide-core-menu>`;
+    }
+};
+GlideCoreMenuInAnotherComponent = __decorate([
+    customElement('glide-core-menu-in-another-component')
+], GlideCoreMenuInAnotherComponent);
 GlideCoreMenu.shadowRootOptions.mode = 'open';
 GlideCoreNestedSlot.shadowRootOptions.mode = 'open';
+GlideCoreMenuInAnotherComponent.shadowRootOptions.mode = 'open';
 it('opens on click', async () => {
     const component = await fixture(html `<glide-core-menu>
       <button slot="target">Target</button>
@@ -377,19 +397,23 @@ it('sets `privateSize` on the options component when `size` is changed programma
     const options = component.querySelector('glide-core-menu-options');
     expect(options?.privateSize).to.equal('small');
 });
-it('closes when clicked', async () => {
-    const component = await fixture(html `<glide-core-menu open>
-      <button slot="target">Target</button>
-
-      <glide-core-menu-options>
-        <glide-core-menu-link label="Link"></glide-core-menu-link>
-      </glide-core-menu-options>
-    </glide-core-menu>`);
-    component.querySelector('button')?.click();
-    const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
-    const options = component.querySelector('glide-core-menu-options');
-    const target = component.querySelector('button');
-    expect(component.open).to.be.false;
+it('closes when its target clicked', async () => {
+    const component = await fixture(html `<glide-core-menu-in-another-component></glide-core-menu-in-another-component>`);
+    // Wait for it to open.
+    await aTimeout(0);
+    const target = component.shadowRoot?.querySelector('button');
+    assert(target);
+    const { x, y } = target.getBoundingClientRect();
+    // Calling `click()` won't do because Menu relies on a "mouseup" event to
+    // decide if it should close.
+    await sendMouse({
+        type: 'click',
+        position: [Math.ceil(x), Math.ceil(y)],
+    });
+    const menu = component.shadowRoot?.querySelector('glide-core-menu');
+    const defaultSlot = menu?.shadowRoot?.querySelector('slot:not([name])');
+    const options = menu?.querySelector('glide-core-menu-options');
+    expect(menu?.open).to.be.false;
     expect(defaultSlot?.checkVisibility()).to.be.false;
     expect(options?.getAttribute('aria-activedescendant')).to.equal('');
     expect(target?.ariaExpanded).to.equal('false');
@@ -422,7 +446,7 @@ it('closes on Escape', async () => {
     </glide-core-menu>`);
     // Wait for it to open
     await aTimeout(0);
-    component.focus();
+    component.querySelector('button')?.focus();
     await sendKeys({ press: 'Escape' });
     const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
     const options = component.querySelector('glide-core-menu-options');
@@ -457,7 +481,7 @@ it('closes when an option is selected via Enter', async () => {
         <glide-core-menu-link label="Link"></glide-core-menu-link>
       </glide-core-menu-options>
     </glide-core-menu>`);
-    component.focus();
+    component.querySelector('button')?.focus();
     component
         .querySelector('glide-core-menu-link')
         ?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
@@ -478,7 +502,7 @@ it('closes when an option is selected via Space', async () => {
         <glide-core-menu-link label="Link"></glide-core-menu-link>
       </glide-core-menu-options>
     </glide-core-menu>`);
-    component.focus();
+    component.querySelector('button')?.focus();
     await sendKeys({ press: ' ' });
     const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
     const options = component.querySelector('glide-core-menu-options');
@@ -617,7 +641,7 @@ it('activates the next option on ArrowDown', async () => {
   `);
     // Wait for Floating UI.
     await aTimeout(0);
-    component.focus();
+    component.querySelector('button')?.focus();
     const links = component.querySelectorAll('glide-core-menu-link');
     const options = component.querySelector('glide-core-menu-options');
     links[1].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
@@ -640,7 +664,7 @@ it('activates the previous option on ArrowUp', async () => {
   `);
     // Wait for Floating UI.
     await aTimeout(0);
-    component.focus();
+    component.querySelector('button')?.focus();
     const links = component.querySelectorAll('glide-core-menu-link');
     const options = component.querySelector('glide-core-menu-options');
     links[1].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
@@ -662,7 +686,7 @@ it('activates the first option on Home', async () => {
   `);
     // Wait for Floating UI.
     await aTimeout(0);
-    component.focus();
+    component.querySelector('button')?.focus();
     const links = component.querySelectorAll('glide-core-menu-link');
     const options = component.querySelector('glide-core-menu-options');
     links[1].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
@@ -684,7 +708,7 @@ it('activates the first option on PageUp', async () => {
   `);
     // Wait for Floating UI.
     await aTimeout(0);
-    component.focus();
+    component.querySelector('button')?.focus();
     const links = component.querySelectorAll('glide-core-menu-link');
     const options = component.querySelector('glide-core-menu-options');
     links[1].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
@@ -706,7 +730,7 @@ it('activates the first option on Meta + ArrowUp', async () => {
   `);
     // Wait for Floating UI.
     await aTimeout(0);
-    component.focus();
+    component.querySelector('button')?.focus();
     const links = component.querySelectorAll('glide-core-menu-link');
     const options = component.querySelector('glide-core-menu-options');
     links[1].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
@@ -730,7 +754,7 @@ it('activates the last option on End', async () => {
   `);
     // Wait for Floating UI.
     await aTimeout(0);
-    component.focus();
+    component.querySelector('button')?.focus();
     await sendKeys({ press: 'End' });
     const links = component.querySelectorAll('glide-core-menu-link');
     const options = component.querySelector('glide-core-menu-options');
@@ -752,7 +776,7 @@ it('activates the last option on PageDown', async () => {
     component.querySelector('button')?.click();
     // Wait for Floating UI.
     await aTimeout(0);
-    component.focus();
+    component.querySelector('button')?.focus();
     const links = component.querySelectorAll('glide-core-menu-link');
     const options = component.querySelector('glide-core-menu-options');
     links[0].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
@@ -774,7 +798,7 @@ it('activates the last option on Meta + ArrowDown', async () => {
   `);
     // Wait for Floating UI.
     await aTimeout(0);
-    component.focus();
+    component.querySelector('button')?.focus();
     const links = component.querySelectorAll('glide-core-menu-link');
     const options = component.querySelector('glide-core-menu-options');
     links[0].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));

package/dist/modal.d.ts

@@ -6,31 +6,20 @@ declare global {
     }
 }
 /**
- * @description A Modal dialog component which interrupts interaction with the rest of the page.
- *
- * @event close - Emitted when the Modal closes.
+ * @event close - `(event: "close", listener: (event: Event)) => void) => void`
  *
  * @slot - The content of the modal.
- *
- * @slot header-actions - A slot for placing additional header actions. These are co-located with the close button.
- *                        Use the `glide-core-modal-icon-button` component only.
- *
- * @slot primary - A slot for rendering a primary action button. Normally a "Continue", "Next", or "Submit" action.
- *
- * @slot secondary - A slot for rendering a secondary action button. Normally a "Cancel" action.
- *
- * @slot tertiary - A slot for rendering an icon+tooltip for additional information,
- *                  or a tertiary action button.
+ * @slot header-actions - One or more of `<glide-core-modal-icon-button>`.
+ * @slot primary - One of `<glide-core-button>`.
+ * @slot secondary - One of `<glide-core-button>`.
+ * @slot tertiary - One or more of `<glide-core-button>` or `<glide-core-modal-tertiary-icon>`.
  */
 export default class GlideCoreModal extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
-    /** The title text for the Modal. */
     label: string;
-    /** Adds a back/dismiss button in the Modal header. */
-    showBackButton: boolean;
-    /** Fixed-size options for the Modal. */
+    backButton: boolean;
     size?: 'small' | 'medium' | 'large' | 'xlarge';
     close(): void;
     connectedCallback(): void;

package/dist/modal.icon-button.d.ts

@@ -6,8 +6,6 @@ declare global {
     }
 }
 /**
- * @description A Modal Icon Button. Should be used only in the "header-actions" slot of a Modal.
- *
  * @slot - The content of the button. Should only be an icon. The icon should also leverage the
  *         "label" attribute for accessibility so that it is read to screenreaders.
  *

package/dist/modal.icon-button.test.basics.js

@@ -18,19 +18,19 @@ it('renders and sets default attributes', async () => {
     expect(component).to.be.ok;
     const buttonElement = component.shadowRoot?.querySelector('glide-core-icon-button');
     expect(buttonElement).to.be.not.null;
-    expect(buttonElement).to.have.attribute('variant', 'tertiary');
+    expect(buttonElement?.getAttribute('variant')).to.equal('tertiary');
 });
 it('adds an accessible label when given', async () => {
     const component = await fixture(html `<glide-core-modal-icon-button label="test-label"
       >Test</glide-core-modal-icon-button
     >`);
     const buttonElement = component.shadowRoot?.querySelector('glide-core-icon-button');
-    expect(buttonElement).to.have.attribute('label', 'test-label');
+    expect(buttonElement?.getAttribute('label')).to.equal('test-label');
 });
 it('does not add an acceessible label when not given', async () => {
     const component = await fixture(html `<glide-core-modal-icon-button>Test</glide-core-modal-icon-button>`);
     const buttonElement = component.shadowRoot?.querySelector('glide-core-icon-button');
-    expect(buttonElement).to.have.attribute('label', '');
+    expect(buttonElement?.getAttribute('label')).to.equal('');
 });
 it('throws if it does not have a default slot', async () => {
     const spy = sinon.spy();

package/dist/modal.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,l){var n,r=arguments.length,i=r<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,o,l);else for(var s=e.length-1;s>=0;s--)(n=e[s])&&(i=(r<3?n(i):r>3?n(t,o,i):n(t,o))||i);return r>3&&i&&Object.defineProperty(t,o,i),i};import"./modal.icon-button.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{when}from"lit/directives/when.js";import GlideCoreButton from"./button.js";import GlideCoreModalIconButton from"./modal.icon-button.js";import GlideCoreModalTertiaryIcon from"./modal.tertiary-icon.js";import ow,{owSlot,owSlotType}from"./library/ow.js";import styles from"./modal.styles.js";const globalStylesheet=new CSSStyleSheet;globalStylesheet.insertRule("\n  @supports (scrollbar-gutter: stable) {\n    .private-glide-core-modal-lock-scroll {\n      scrollbar-gutter: stable !important;\n      overflow: hidden !important;\n    }\n  }\n"),globalStylesheet.insertRule("\n  @supports not (scrollbar-gutter: stable) {\n    .private-glide-core-modal-lock-scroll {\n      padding-right: var(--glide-scroll-size, 0.9375rem) !important;\n      overflow: hidden !important;\n    }\n  }\n");let GlideCoreModal=class GlideCoreModal extends LitElement{constructor(){super(...arguments),this.label="",this.showBackButton=!1,this.size="medium",this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#l=createRef(),this.#n=createRef(),this.#r=createRef(),this.#i=new LocalizeController(this)}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}close(){this.#e.value?.open&&(document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.dispatchEvent(new Event("close")),this.#e.value?.close())}connectedCallback(){super.connectedCallback();document.adoptedStyleSheets.includes(globalStylesheet)||document.adoptedStyleSheets.push(globalStylesheet)}disconnectedCallback(){super.disconnectedCallback(),document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),document.adoptedStyleSheets=document.adoptedStyleSheets.filter((e=>e!==globalStylesheet))}firstUpdated(){owSlot(this.#t.value),owSlotType(this.#r.value,[GlideCoreModalIconButton]),owSlotType(this.#o.value,[GlideCoreButton]),owSlotType(this.#l.value,[GlideCoreButton]),owSlotType(this.#n.value,[GlideCoreModalTertiaryIcon,GlideCoreButton])}render(){return html`<dialog class="${classMap({component:!0,small:"small"===this.size,medium:"medium"===this.size,large:"large"===this.size,xlarge:"xlarge"===this.size})}" tabindex="-1" @keydown="${this.#s}" @mousedown="${this.#a}" ${ref(this.#e)}><header class="header"><h2 class="label" data-test="heading" id="heading">${when(this.showBackButton,(()=>html`<glide-core-modal-icon-button data-test="back-button" @click="${this.#c}"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><title>${this.#i.term("dismiss")}</title><path d="M12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20V18ZM20 14.5C20 16.433 18.433 18 16.5 18V20C19.5376 20 22 17.5376 22 14.5H20ZM16.5 11C18.433 11 20 12.567 20 14.5H22C22 11.4624 19.5376 9 16.5 9V11ZM16.5 18H12V20H16.5V18ZM16.5 9H3V11H16.5V9Z" fill="currentColor"/><path d="M7 6L3 10L7 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></glide-core-modal-icon-button>`))} ${this.label}</h2><div class="header-actions" role="toolbar"><slot name="header-actions" @slotchange="${this.#d}" ${ref(this.#r)}></slot><glide-core-modal-icon-button data-test="close-button" @click="${this.#c}"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><title>${this.#i.term("close")}</title><path d="M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></glide-core-modal-icon-button></div></header><article aria-labelledby="heading" class="body" role="region" tabindex="0"><slot @slotchange="${this.#m}" ${ref(this.#t)}></slot></article><footer class="footer"><menu class="menu"><li class="flex align-center"><slot name="tertiary" @slotchange="${this.#h}" ${ref(this.#n)}></slot></li><li><menu class="actions"><li><slot name="secondary" @slotchange="${this.#u}" ${ref(this.#l)}></slot></li><li><slot name="primary" @slotchange="${this.#f}" ${ref(this.#o)}></slot></li></menu></li></menu></footer></dialog>`}showModal(){if(!this.#e.value?.open){if(document.documentElement.classList.add("private-glide-core-modal-lock-scroll"),!window.CSS.supports("scrollbar-gutter","stable")){const e=Math.abs(window.innerWidth-document.documentElement.clientWidth);document.documentElement.style.setProperty("--glide-scroll-size",`${e}px`)}this.#e.value?.showModal(),this.#e.value?.focus()}}#e;#t;#o;#l;#n;#r;#i;#c(){document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.dispatchEvent(new Event("close")),this.#e.value?.close()}#m(){ow(this.#e.value,ow.object.instanceOf(HTMLDialogElement)),owSlot(this.#t.value)}#f(){owSlotType(this.#o.value,[GlideCoreButton])}#u(){owSlotType(this.#l.value,[GlideCoreButton])}#h(){ow(this.#e.value,ow.object.instanceOf(HTMLDialogElement)),owSlotType(this.#n.value,[GlideCoreModalTertiaryIcon,GlideCoreButton])}#d(){owSlotType(this.#r.value,[GlideCoreModalIconButton])}#s(e){"Escape"===e.key&&(document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.dispatchEvent(new Event("close")),this.#e.value?.close())}#a(e){if(e.target!==this.#e.value)return;const t=this.#e.value?.getBoundingClientRect();if(t){t.top<=e.clientY&&e.clientY<=t.top+t.height&&t.left<=e.clientX&&e.clientX<=t.left+t.width||(document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.dispatchEvent(new Event("close")),this.#e.value?.close())}}};__decorate([property({reflect:!0})],GlideCoreModal.prototype,"label",void 0),__decorate([property({attribute:"show-back-button",type:Boolean,reflect:!0})],GlideCoreModal.prototype,"showBackButton",void 0),__decorate([property({reflect:!0})],GlideCoreModal.prototype,"size",void 0),GlideCoreModal=__decorate([customElement("glide-core-modal")],GlideCoreModal);export default GlideCoreModal;
+var __decorate=this&&this.__decorate||function(e,t,o,l){var n,r=arguments.length,i=r<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,o,l);else for(var s=e.length-1;s>=0;s--)(n=e[s])&&(i=(r<3?n(i):r>3?n(t,o,i):n(t,o))||i);return r>3&&i&&Object.defineProperty(t,o,i),i};import"./modal.icon-button.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{when}from"lit/directives/when.js";import GlideCoreButton from"./button.js";import GlideCoreModalIconButton from"./modal.icon-button.js";import GlideCoreModalTertiaryIcon from"./modal.tertiary-icon.js";import ow,{owSlot,owSlotType}from"./library/ow.js";import styles from"./modal.styles.js";const globalStylesheet=new CSSStyleSheet;globalStylesheet.insertRule("\n  @supports (scrollbar-gutter: stable) {\n    .private-glide-core-modal-lock-scroll {\n      scrollbar-gutter: stable !important;\n      overflow: hidden !important;\n    }\n  }\n"),globalStylesheet.insertRule("\n  @supports not (scrollbar-gutter: stable) {\n    .private-glide-core-modal-lock-scroll {\n      padding-right: var(--glide-scroll-size, 0.9375rem) !important;\n      overflow: hidden !important;\n    }\n  }\n");let GlideCoreModal=class GlideCoreModal extends LitElement{constructor(){super(...arguments),this.label="",this.backButton=!1,this.size="medium",this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#l=createRef(),this.#n=createRef(),this.#r=createRef(),this.#i=new LocalizeController(this)}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}close(){this.#e.value?.open&&(document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.dispatchEvent(new Event("close")),this.#e.value?.close())}connectedCallback(){super.connectedCallback();document.adoptedStyleSheets.includes(globalStylesheet)||document.adoptedStyleSheets.push(globalStylesheet)}disconnectedCallback(){super.disconnectedCallback(),document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),document.adoptedStyleSheets=document.adoptedStyleSheets.filter((e=>e!==globalStylesheet))}firstUpdated(){owSlot(this.#t.value),owSlotType(this.#r.value,[GlideCoreModalIconButton]),owSlotType(this.#o.value,[GlideCoreButton]),owSlotType(this.#l.value,[GlideCoreButton]),owSlotType(this.#n.value,[GlideCoreModalTertiaryIcon,GlideCoreButton])}render(){return html`<dialog class="${classMap({component:!0,small:"small"===this.size,medium:"medium"===this.size,large:"large"===this.size,xlarge:"xlarge"===this.size})}" tabindex="-1" @keydown="${this.#s}" @mousedown="${this.#a}" ${ref(this.#e)}><header class="header"><h2 class="label" data-test="heading" id="heading">${when(this.backButton,(()=>html`<glide-core-modal-icon-button class="icon-button" data-test="back-button" @click="${this.#c}"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><title>${this.#i.term("dismiss")}</title><path d="M12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20V18ZM20 14.5C20 16.433 18.433 18 16.5 18V20C19.5376 20 22 17.5376 22 14.5H20ZM16.5 11C18.433 11 20 12.567 20 14.5H22C22 11.4624 19.5376 9 16.5 9V11ZM16.5 18H12V20H16.5V18ZM16.5 9H3V11H16.5V9Z" fill="currentColor"/><path d="M7 6L3 10L7 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></glide-core-modal-icon-button>`))} ${this.label}</h2><div class="header-actions" role="toolbar"><slot name="header-actions" @slotchange="${this.#d}" ${ref(this.#r)}></slot><glide-core-modal-icon-button class="icon-button" data-test="close-button" @click="${this.#c}"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><title>${this.#i.term("close")}</title><path d="M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></glide-core-modal-icon-button></div></header><article aria-labelledby="heading" class="body" role="region" tabindex="0"><slot @slotchange="${this.#m}" ${ref(this.#t)}></slot></article><footer class="footer"><menu class="menu"><li class="flex align-center"><slot name="tertiary" @slotchange="${this.#u}" ${ref(this.#n)}></slot></li><li><menu class="actions"><li><slot name="secondary" @slotchange="${this.#h}" ${ref(this.#l)}></slot></li><li><slot name="primary" @slotchange="${this.#f}" ${ref(this.#o)}></slot></li></menu></li></menu></footer></dialog>`}showModal(){if(!this.#e.value?.open){if(document.documentElement.classList.add("private-glide-core-modal-lock-scroll"),!window.CSS.supports("scrollbar-gutter","stable")){const e=Math.abs(window.innerWidth-document.documentElement.clientWidth);document.documentElement.style.setProperty("--glide-scroll-size",`${e}px`)}this.#e.value?.showModal(),this.#e.value?.focus()}}#e;#t;#o;#l;#n;#r;#i;#c(){document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.dispatchEvent(new Event("close")),this.#e.value?.close()}#m(){ow(this.#e.value,ow.object.instanceOf(HTMLDialogElement)),owSlot(this.#t.value)}#f(){owSlotType(this.#o.value,[GlideCoreButton])}#h(){owSlotType(this.#l.value,[GlideCoreButton])}#u(){ow(this.#e.value,ow.object.instanceOf(HTMLDialogElement)),owSlotType(this.#n.value,[GlideCoreModalTertiaryIcon,GlideCoreButton])}#d(){owSlotType(this.#r.value,[GlideCoreModalIconButton])}#s(e){"Escape"===e.key&&(document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.dispatchEvent(new Event("close")),this.#e.value?.close())}#a(e){if(e.target!==this.#e.value)return;const t=this.#e.value?.getBoundingClientRect();if(t){t.top<=e.clientY&&e.clientY<=t.top+t.height&&t.left<=e.clientX&&e.clientX<=t.left+t.width||(document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.dispatchEvent(new Event("close")),this.#e.value?.close())}}};__decorate([property({reflect:!0})],GlideCoreModal.prototype,"label",void 0),__decorate([property({attribute:"back-button",type:Boolean,reflect:!0})],GlideCoreModal.prototype,"backButton",void 0),__decorate([property({reflect:!0})],GlideCoreModal.prototype,"size",void 0),GlideCoreModal=__decorate([customElement("glide-core-modal")],GlideCoreModal);export default GlideCoreModal;

package/dist/modal.styles.js

@@ -24,22 +24,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       }
     }
 
-    @media (prefers-reduced-motion) {
-      /**
-        ':host' is targeted here to increase specificity so that
-        we don't need to use '!important' to turn off the animation.
-      */
-      :host .component {
-        &[open] {
-          animation: none;
-        }
-
-        &::backdrop {
-          animation: none;
-        }
-      }
-    }
-
     .component {
       backdrop-filter: blur(100px);
       background-color: var(--glide-core-surface-modal);
@@ -54,8 +38,11 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       padding: 1.25rem;
 
       &[open] {
-        animation: modal-open 250ms;
         opacity: 1;
+
+        @media (prefers-reduced-motion: no-preference) {
+          animation: modal-open 250ms;
+        }
       }
 
       &:focus {
@@ -63,18 +50,21 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       }
 
       &::backdrop {
-        animation: backdrop-fade-in 250ms;
-
         /* prefix required for Safari */
         /* stylelint-disable-next-line property-no-vendor-prefix */
         -webkit-backdrop-filter: blur(3px);
         backdrop-filter: blur(3px);
         background-color: rgba(0 0 0 / 40%);
+
+        @media (prefers-reduced-motion: no-preference) {
+          animation: backdrop-fade-in 250ms;
+        }
       }
 
       ::slotted([slot='tertiary']) {
         --size: 1rem;
 
+        display: contents;
         size: 1rem;
       }
     }
@@ -123,6 +113,10 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       line-height: 1;
     }
 
+    .icon-button {
+      display: contents;
+    }
+
     .body {
       line-height: 1;
       overflow: auto;

package/dist/modal.tertiary-icon.d.ts

@@ -6,9 +6,6 @@ declare global {
     }
 }
 /**
- * @description A Modal tertiary icon wrapper.  Provides opinionated styling and accessibility for icons in Modals.
- *  Should be used only in the "tertiary" slot of a Modal.
- *
  * @slot - The icon to be rendered.
  */
 export default class GlideCoreModalTertiaryIcon extends LitElement {

package/dist/modal.tertiary-icon.test.basics.js

@@ -27,7 +27,7 @@ it('adds an accessible label when given', async () => {
       >Test</glide-core-modal-tertiary-icon
     >`);
     const spanElement = component.shadowRoot?.querySelector('span');
-    expect(spanElement).to.have.attribute('aria-label', 'test-label');
+    expect(spanElement?.getAttribute('aria-label')).to.equal('test-label');
 });
 it('does not add an acceessible label when not given', async () => {
     const component = await fixture(html `<glide-core-modal-tertiary-icon>Test</glide-core-modal-tertiary-icon>`);
@@ -39,12 +39,12 @@ it('sets the tooltip placement when attribute "tooltip-placement" is given', asy
       >Test</glide-core-modal-tertiary-icon
     >`);
     const toolTip = component.shadowRoot?.querySelector('glide-core-tooltip');
-    expect(toolTip).to.have.attribute('placement', 'right');
+    expect(toolTip?.getAttribute('placement')).to.equal('right');
 });
 it('sets the tooltip placement to "bottom" when attribute "tooltip-placement" is not given', async () => {
     const component = await fixture(html `<glide-core-modal-tertiary-icon>Test</glide-core-modal-tertiary-icon>`);
     const toolTip = component.shadowRoot?.querySelector('glide-core-tooltip');
-    expect(toolTip).to.have.attribute('placement', 'bottom');
+    expect(toolTip?.getAttribute('placement')).to.equal('bottom');
 });
 it('throws if it does not have a default slot', async () => {
     const spy = sinon.spy();

package/dist/modal.test.basics.js

@@ -18,8 +18,8 @@ it('has defaults', async () => {
     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;
+    expect(component.backButton).to.be.false;
+    expect(component.hasAttribute('back-button')).to.be.false;
 });
 it('renders the provided "label"', async () => {
     const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
@@ -33,8 +33,8 @@ it('does not render the show back button in the label by default', async () => {
     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 component = await fixture(html `<glide-core-modal label="Label" show-back-button>
+it('renders the show back button in the label when provided with "back-button"', async () => {
+    const component = await fixture(html `<glide-core-modal label="Label" back-button>
       Content
     </glide-core-modal>`);
     component.showModal();
@@ -51,7 +51,11 @@ it('renders the provided default slotted content', async () => {
 it('renders the provided primary slot content', async () => {
     const component = await fixture(html `<glide-core-modal label="Label">
       Content
-      <glide-core-button slot="primary" data-primary>Primary</glide-core-button>
+      <glide-core-button
+        label="Primary"
+        slot="primary"
+        data-primary
+      ></glide-core-button>
     </glide-core-modal>`);
     component.showModal();
     const slotContent = component.querySelector('[data-primary]');

package/dist/modal.test.close.js

@@ -21,8 +21,8 @@ it('closes the modal when the escape key is pressed', async () => {
     await sendKeys({ press: 'Escape' });
     expect(dialogElement?.hasAttribute('open')).to.be.false;
 });
-it('closes the modal via "show-back-button"', async () => {
-    const component = await fixture(html `<glide-core-modal label="Label" show-back-button>
+it('closes the modal via "back-button"', async () => {
+    const component = await fixture(html `<glide-core-modal label="Label" back-button>
       Content
     </glide-core-modal>`);
     component.showModal();

package/dist/modal.test.events.js

@@ -43,9 +43,9 @@ it('does not dispatch a "close" event when the modal is open and non-escape keys
     await sendKeys({ press: 'Enter' });
     expect(spy.callCount).to.equal(0);
 });
-it('dispatches a "close" event when the modal is closed via "show-back-button"', async () => {
+it('dispatches a "close" event when the modal is closed via "back-button"', async () => {
     const spy = sinon.spy();
-    const component = await fixture(html `<glide-core-modal label="Label" show-back-button>
+    const component = await fixture(html `<glide-core-modal label="Label" back-button>
       Content
     </glide-core-modal>`);
     component.addEventListener('close', spy);

package/dist/radio-group.d.ts

@@ -7,9 +7,6 @@ declare global {
     }
 }
 /**
- /**
- * @description A radio group with a label, and optional description and tooltip. Participates in forms and validation via `FormData` and various methods.
- *
  * @event change - `(event: Event) => void`
  * @event input - `(event: Event) => void`
  * @event invalid - `(event: Event) => void`

package/dist/radio-group.js

@@ -1 +1 @@
-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;
+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({reflect:!0})],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;