@crowdstrike/glide-core 0.32.3 → 0.33.0

package/dist/label.js

@@ -16,7 +16,6 @@ import styles from './label.styles.js';
 import { LocalizeController } from './library/localize.js';
 import assertSlot from './library/assert-slot.js';
 import onResize from './library/on-resize.js';
-import shadowRootMode from './library/shadow-root-mode.js';
 import final from './library/final.js';
 /**
  * @attr {boolean} [disabled=false]
@@ -50,10 +49,12 @@ let Label = class Label extends LitElement {
         this.#localize = new LocalizeController(this);
         this.#summarySlotElementRef = createRef();
     }
+    /* c8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
-        mode: shadowRootMode,
+        mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
+    /* c8 ignore end */
     static { this.styles = styles; }
     render() {
         // `aria-hidden` is used on the tooltip so the contents of the label aren't

package/dist/library/assert-slot.js

@@ -48,11 +48,11 @@ class AssertSlot extends Directive {
                     part.element?.addEventListener('slotchange', () => {
                         if (isOptional &&
                             part.element instanceof HTMLSlotElement &&
-                            part.element.assignedNodes().length === 0) {
+                            part.element.assignedNodes({ flatten: true }).length === 0) {
                             return;
                         }
                         if (part.element instanceof HTMLSlotElement &&
-                            part.element.assignedNodes().length === 0) {
+                            part.element.assignedNodes({ flatten: true }).length === 0) {
                             if (slotted && slotted.length > 0) {
                                 const message = part.element.name
                                     ? `Expected the "${part.element.name}" slot of ${host.constructor.name} to have a slotted element that extends ${slotted

package/dist/library/assert-slot.test.js

@@ -51,6 +51,34 @@ let WhenNotUsedInsideATag = class WhenNotUsedInsideATag extends LitElement {
 WhenNotUsedInsideATag = __decorate([
     customElement('glide-core-when-not-used-inside-tag')
 ], WhenNotUsedInsideATag);
+let Reslotted = class Reslotted extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.optional = false;
+        this.slotted = [];
+    }
+    render() {
+        return html `<glide-core-with-slot
+      name=${ifDefined(this.name)}
+      .slotted=${this.slotted}
+      ?optional=${this.optional}
+    >
+      <slot name=${ifDefined(this.name)}></slot>
+    </glide-core-with-slot>`;
+    }
+};
+__decorate([
+    property()
+], Reslotted.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean })
+], Reslotted.prototype, "optional", void 0);
+__decorate([
+    property({ type: Array })
+], Reslotted.prototype, "slotted", void 0);
+Reslotted = __decorate([
+    customElement('glide-core-reslotted')
+], Reslotted);
 it('throws when a required default slot is empty', async () => {
     const stub = sinon.stub(console, 'error');
     const spy = sinon.spy();
@@ -283,3 +311,67 @@ it('throws when not used inside an opening tag', async () => {
     }
     expect(spy.args.at(0)?.at(0).message).to.equal("Directive must be inside the element's opening tag.");
 });
+it('throws when a reslotted and required default slot is empty', async () => {
+    const stub = sinon.stub(console, 'error');
+    const spy = sinon.spy();
+    const onerror = window.onerror;
+    // eslint-disable-next-line unicorn/prefer-add-event-listener
+    window.onerror = spy;
+    await fixture(html `<glide-core-reslotted
+      .slotted=${[HTMLDivElement]}
+    ></glide-core-reslotted>`);
+    expect(spy.callCount).to.equal(1);
+    expect(spy.args.at(0)?.at(0)).to.equal('Uncaught TypeError: Expected WithSlot to have a slotted element that extends HTMLDivElement.');
+    // eslint-disable-next-line unicorn/prefer-add-event-listener
+    window.onerror = onerror;
+    stub.restore();
+});
+it('throws when a reslotted default slot has the wrong element', async () => {
+    const stub = sinon.stub(console, 'error');
+    const spy = sinon.spy();
+    const onerror = window.onerror;
+    // eslint-disable-next-line unicorn/prefer-add-event-listener
+    window.onerror = spy;
+    await fixture(html `<glide-core-reslotted .slotted=${[HTMLDivElement]}>
+      <a href="/">Link</a>
+    </glide-core-reslotted>`);
+    expect(spy.callCount).to.equal(1);
+    expect(spy.args.at(0)?.at(0)).to.equal('Uncaught TypeError: Expected WithSlot to have a slotted element that extends HTMLDivElement. Extends HTMLAnchorElement instead.');
+    // eslint-disable-next-line unicorn/prefer-add-event-listener
+    window.onerror = onerror;
+    stub.restore();
+});
+it('does not throw when a reslotted default slot has the correct element', async () => {
+    const spy = sinon.spy();
+    window.addEventListener('error', spy);
+    await fixture(html `<glide-core-reslotted .slotted=${[HTMLDivElement]}>
+      <div>Content</div>
+    </glide-core-reslotted>`);
+    expect(spy.callCount).to.equal(0);
+});
+it('throws when a reslotted and required named slot is empty', async () => {
+    const stub = sinon.stub(console, 'error');
+    const spy = sinon.spy();
+    window.addEventListener('unhandledrejection', spy, { once: true });
+    await fixture(html `<glide-core-reslotted
+      name="test"
+      .slotted=${[HTMLDivElement]}
+    ></glide-core-reslotted>`);
+    await waitUntil(() => spy.callCount);
+    expect(spy.callCount).to.equal(1);
+    expect(spy.args.at(0)?.at(0) instanceof PromiseRejectionEvent).to.be.true;
+    expect(spy.args.at(0)?.at(0).reason.message).to.equal('Expected the "test" slot of WithSlot to have a slotted element that extends HTMLDivElement.');
+    stub.restore();
+});
+it('does not throw when a reslotted optional named slot is empty', async () => {
+    const spy = sinon.spy();
+    window.addEventListener('unhandledrejection', spy, { once: true });
+    await fixture(html `<glide-core-reslotted name="test" optional></glide-core-reslotted>`);
+    expect(spy.callCount).to.equal(0);
+});
+it('does not throw when a reslotted optional slot is empty', async () => {
+    const spy = sinon.spy();
+    window.addEventListener('unhandledrejection', spy, { once: true });
+    await fixture(html `<glide-core-reslotted optional></glide-core-reslotted>`);
+    expect(spy.callCount).to.equal(0);
+});

package/dist/link.js

@@ -11,7 +11,6 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import packageJson from '../package.json' with { type: 'json' };
 import styles from './link.styles.js';
-import shadowRootMode from './library/shadow-root-mode.js';
 import final from './library/final.js';
 import required from './library/required.js';
 /**
@@ -32,10 +31,11 @@ let Link = class Link extends LitElement {
         this.version = packageJson.version;
         this.#componentElementRef = createRef();
     }
+    /* c8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
         delegatesFocus: true,
-        mode: shadowRootMode,
+        mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
     static { this.styles = styles; }
     click() {

package/dist/menu.js

@@ -18,7 +18,6 @@ import Option from './option.js';
 import Input from './input.js';
 import assertSlot from './library/assert-slot.js';
 import styles from './menu.styles.js';
-import shadowRootMode from './library/shadow-root-mode.js';
 import final from './library/final.js';
 import uniqueId from './library/unique-id.js';
 /**
@@ -107,10 +106,12 @@ let Menu = class Menu extends LitElement {
         };
     }
     static { Menu_1 = this; }
+    /* c8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
-        mode: shadowRootMode,
+        mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
+    /* c8 ignore end */
     static { this.styles = styles; }
     /**
      * @default false
@@ -184,9 +185,9 @@ let Menu = class Menu extends LitElement {
     firstUpdated() {
         if (this.#optionsElement && this.#targetElement) {
             this.#optionsElement.privateLoading = this.loading;
-            this.#targetElement.ariaDescription = this.loading
-                ? this.#localize.term('loading')
-                : null;
+            if (this.loading) {
+                this.#targetElement.ariaDescription = this.#localize.term('loading');
+            }
         }
         if (this.open && !this.isTargetDisabled) {
             const openedSubMenus = this.#subMenus.filter(({ open }) => open);
@@ -298,8 +299,8 @@ let Menu = class Menu extends LitElement {
           @keydown=${this.#onTargetAndDefaultSlotKeyDown}
           @mousedown=${this.#onDefaultSlotMouseDown}
           @mouseover=${this.#onDefaultSlotMouseOver}
-          @private-disabled-change=${this.#onDefaultSlotDisabledChange}
-          @private-slot-change=${this.#onDefaultSlotSlotChange}
+          @disabled=${this.#onDefaultSlotDisabled}
+          @slotchange=${this.#onDefaultSlotSlotChange}
           @toggle=${this.#onDefaultSlotToggle}
           ${assertSlot([Element])}
           ${ref(this.#defaultSlotElementRef)}
@@ -457,7 +458,9 @@ let Menu = class Menu extends LitElement {
             this.#targetElement?.focus(options);
         }
     }
-    #hide() {
+    async #hide() {
+        // There's a comment in `#show()` explaining why.
+        await this.#activeOption?.updateComplete;
         this.#cleanUpFloatingUi?.();
         this.#defaultSlotElementRef.value?.hidePopover();
         if (this.#optionsElement) {
@@ -545,7 +548,7 @@ let Menu = class Menu extends LitElement {
             }
         });
     }
-    #onDefaultSlotDisabledChange(event) {
+    #onDefaultSlotDisabled(event) {
         if (this.#activeOption === event.target &&
             event.target instanceof Option &&
             event.target.disabled &&
@@ -1051,6 +1054,13 @@ let Menu = class Menu extends LitElement {
                 this.#hide();
             }
         });
+        /* c8 ignore start */
+        if (this.#targetElement?.ariaDescription !== null &&
+            this.#targetElement?.ariaDescription !== this.#localize.term('loading')) {
+            // eslint-disable-next-line no-console
+            console.warn("Menu will overwrite the `aria-description` on your target when Menu's `loading` attribute it set.");
+        }
+        /* c8 ignore end */
         if (this.#targetElement && this.#optionsElement) {
             observer.observe(this.#targetElement, {
                 attributeFilter: ['aria-disabled', 'disabled'],
@@ -1153,7 +1163,44 @@ let Menu = class Menu extends LitElement {
     #onTargetSlotInput() {
         this.open = true;
     }
-    #show() {
+    async #show() {
+        if (this.#previouslyActiveOption &&
+            !this.#previouslyActiveOption.disabled &&
+            this.#optionsElement) {
+            this.#previouslyActiveOption.privateActive = true;
+        }
+        else if (this.#firstEnabledOption && this.#optionsElement) {
+            this.#firstEnabledOption.privateActive = true;
+            this.#previouslyActiveOption = this.#firstEnabledOption;
+        }
+        if (this.#optionsElement && this.#activeOption?.id) {
+            this.#optionsElement.ariaActivedescendant = this.#activeOption.id;
+            this.#activeOption.privateTooltipOpen = this.privateOpenedViaKeyboard;
+        }
+        else if (this.#optionsElement) {
+            this.#optionsElement.ariaActivedescendant = '';
+        }
+        // If we don't wait for the Option to update, it'll briefly appear as inactive when
+        // Menu opens because `showPopover()` is synchronous and component updates are not.
+        //
+        // A side effect of waiting, however, is that calling `#show()` then immediately
+        // calling `#hide()` won't work as expected: Menu will never close because the
+        // `showPopover()` call below will be slightly delayed. So `hidePopover()`, via
+        // `#hide()`, will be called just before `showPopover()`.
+        //
+        // That's why we also wait for the Option to update in `#hide()`. `#hide()` being
+        // called immediately after `#show()` may seem unlikely. But Menu itself does it
+        // when multiple sub-Menus are initially open.
+        //
+        // When, for example, Menu and two of its sub-Menus are initially open, each
+        // sub-Menu's `open` setter will get called, and each `open` setter will call
+        // `#show()`.
+        //
+        // But two open sub-Menus doesn't make sense. So Menu, shortly after the sub-Menus'
+        // `open` setters are initially called, will set the `open` property of the other
+        // sub-Menu to `false` in `firstUpdated()`. Thus a `#hide()` call immediately after
+        // `#show()`.
+        await this.#activeOption?.updateComplete;
         this.#cleanUpFloatingUi?.();
         // Ideally, we wouldn't show the popover until after Floating UI has calculated its
         // position. But calling `showPopover()` changes the nature of how `top` and `left`
@@ -1206,27 +1253,11 @@ let Menu = class Menu extends LitElement {
         else if (!this.#isSubMenu && this.#targetElement) {
             this.#targetElement.ariaExpanded = 'true';
         }
-        if (this.#optionsElement && this.#activeOption?.id) {
-            this.#optionsElement.ariaActivedescendant = this.#activeOption.id;
-        }
-        if (this.#previouslyActiveOption &&
-            !this.#previouslyActiveOption.disabled &&
-            this.#optionsElement) {
-            this.#previouslyActiveOption.privateActive = true;
-            this.#previouslyActiveOption.privateTooltipOpen =
-                this.privateOpenedViaKeyboard;
-            this.#optionsElement.ariaActivedescendant =
-                this.#previouslyActiveOption.id;
-        }
-        else if (this.#firstEnabledOption && this.#optionsElement) {
-            this.#firstEnabledOption.privateActive = true;
-            this.#firstEnabledOption.privateTooltipOpen =
-                this.privateOpenedViaKeyboard;
-            this.#previouslyActiveOption = this.#firstEnabledOption;
-            this.#optionsElement.ariaActivedescendant = this.#firstEnabledOption.id;
+        if (this.#isSubMenu && this.#parentOption) {
+            this.#parentOption.ariaExpanded = 'true';
         }
-        else if (this.#optionsElement) {
-            this.#optionsElement.ariaActivedescendant = '';
+        else if (!this.#isSubMenu && this.#targetElement) {
+            this.#targetElement.ariaExpanded = 'true';
         }
         if (this.#targetElement && this.#defaultSlotElementRef.value) {
             this.#cleanUpFloatingUi = autoUpdate(this.#targetElement, this.#defaultSlotElementRef.value, () => {

package/dist/menu.styles.js

@@ -35,6 +35,7 @@ export default [
       padding-block-end: 0;
       padding-block-start: var(--glide-core-spacing-base-xxxs);
       padding-inline: var(--glide-core-spacing-base-xxxs);
+      position: absolute;
 
       /*
         This little hack replaces "padding-block-end", which the last option overlaps

package/dist/modal.icon-button.js

@@ -11,7 +11,6 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import packageJson from '../package.json' with { type: 'json' };
 import styles from './modal.icon-button.styles.js';
 import assertSlot from './library/assert-slot.js';
-import shadowRootMode from './library/shadow-root-mode.js';
 import final from './library/final.js';
 import required from './library/required.js';
 /**
@@ -27,10 +26,12 @@ let ModalIconButton = class ModalIconButton extends LitElement {
         super(...arguments);
         this.version = packageJson.version;
     }
+    /* c8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
-        mode: shadowRootMode,
+        mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
+    /* c8 ignore end */
     static { this.styles = styles; }
     render() {
         return html `

package/dist/modal.js

@@ -18,7 +18,6 @@ import Tooltip from './tooltip.js';
 import styles from './modal.styles.js';
 import xIcon from './icons/x.js';
 import assertSlot from './library/assert-slot.js';
-import shadowRootMode from './library/shadow-root-mode.js';
 import severityInformationalIcon from './icons/severity-informational.js';
 import severityMediumIcon from './icons/severity-medium.js';
 import severityCriticalIcon from './icons/severity-critical.js';
@@ -107,10 +106,12 @@ let Modal = class Modal extends LitElement {
             });
         };
     }
+    /* c8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
-        mode: shadowRootMode,
+        mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
+    /* c8 ignore end */
     static { this.styles = styles; }
     /**
      * @default false

package/dist/option.d.ts

@@ -28,6 +28,11 @@ declare global {
  * @slot {Element | Text} [content] - This is the unhappy path. It's the escape hatch where you can render arbitrary content and lay it out however you need to. If you go this route, `slot="icon"` and `slot="submenu"` will become unavailable. And the `label` and `description` attributes won't be rendered. The `label` attribute is still required. We'll show it in a tooltip when your content overflows. If you need a second line of text in the tooltip, provide you can provide it via the `description` attribute.
  * @slot {Element} [icon]
  * @slot {Menu} [submenu]
+ *
+ * @fires {Event} deselected
+ * @fires {Event} disabled
+ * @fires {Event} enabled
+ * @fires {Event} selected
  */
 export default class Option extends LitElement {
     #private;

package/dist/option.js

@@ -15,7 +15,6 @@ import packageJson from '../package.json' with { type: 'json' };
 import styles from './option.styles.js';
 import assertSlot from './library/assert-slot.js';
 import checkedIcon from './icons/checked.js';
-import shadowRootMode from './library/shadow-root-mode.js';
 import final from './library/final.js';
 import uniqueId from './library/unique-id.js';
 import Menu from './menu.js';
@@ -45,6 +44,11 @@ import required from './library/required.js';
  * @slot {Element | Text} [content] - This is the unhappy path. It's the escape hatch where you can render arbitrary content and lay it out however you need to. If you go this route, `slot="icon"` and `slot="submenu"` will become unavailable. And the `label` and `description` attributes won't be rendered. The `label` attribute is still required. We'll show it in a tooltip when your content overflows. If you need a second line of text in the tooltip, provide you can provide it via the `description` attribute.
  * @slot {Element} [icon]
  * @slot {Menu} [submenu]
+ *
+ * @fires {Event} deselected
+ * @fires {Event} disabled
+ * @fires {Event} enabled
+ * @fires {Event} selected
  */
 let Option = class Option extends LitElement {
     constructor() {
@@ -61,8 +65,8 @@ let Option = class Option extends LitElement {
         this.hasIconSlot = false;
         this.hasSubMenuSlot = false;
         this.isContentSlotOverflow = false;
-        // Set in `#onSubmenuToggle()`. Used to toggle the sub-Menu's target as open
-        // or closed visually.
+        // Set in `#onSubmenuToggle()`. Used to toggle the sub-Menu's target as open or
+        // closed visually.
         this.isSubmenuOpen = false;
         this.#containerElementRef = createRef();
         this.#contentSlotElementRef = createRef();
@@ -73,10 +77,12 @@ let Option = class Option extends LitElement {
         this.#labelElementRef = createRef();
         this.#tooltipElementRef = createRef();
     }
+    /* c8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
-        mode: shadowRootMode,
+        mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
+    /* c8 ignore end */
     static { this.styles = styles; }
     // Consumers may chose not to take the happy path and instead use the "content"
     // slot. In that case, we don't render `label`. But `label` still needs to be
@@ -116,9 +122,15 @@ let Option = class Option extends LitElement {
         return this.#isDisabled;
     }
     set disabled(isDisabled) {
+        const hasChanged = isDisabled !== this.#isDisabled;
         this.#isDisabled = isDisabled;
         this.ariaDisabled = isDisabled ? 'true' : 'false';
-        this.dispatchEvent(new Event('private-disabled-change', { bubbles: true }));
+        if (hasChanged && isDisabled) {
+            this.dispatchEvent(new Event('disabled', { bubbles: true }));
+        }
+        else if (hasChanged) {
+            this.dispatchEvent(new Event('enabled', { bubbles: true }));
+        }
     }
     get privateActive() {
         return this.#isActive;
@@ -142,8 +154,19 @@ let Option = class Option extends LitElement {
         return this.#isSelected;
     }
     set selected(isSelected) {
+        const hasChanged = isSelected !== this.#isSelected;
         this.ariaSelected = isSelected.toString();
         this.#isSelected = isSelected;
+        if (hasChanged && isSelected) {
+            this.dispatchEvent(new Event('selected', {
+                bubbles: true,
+            }));
+        }
+        else if (hasChanged) {
+            this.dispatchEvent(new Event('deselected', {
+                bubbles: true,
+            }));
+        }
     }
     click() {
         // You'd think this condition wouldn't be needed because `#onTooltipClick()` has a

package/dist/options.d.ts

@@ -20,6 +20,8 @@ declare global {
  * @attr {string} [version]
  *
  * @slot {Option | Text}
+ *
+ * @fires {Event} slotchange
  */
 export default class Options extends LitElement {
     #private;

package/dist/options.group.js

@@ -9,7 +9,6 @@ import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import packageJson from '../package.json' with { type: 'json' };
 import styles from './options.group.styles.js';
-import shadowRootMode from './library/shadow-root-mode.js';
 import final from './library/final.js';
 import assertSlot from './library/assert-slot.js';
 import Option from './option.js';
@@ -31,10 +30,12 @@ let OptionsGroup = class OptionsGroup extends LitElement {
         this.role = 'group';
         this.version = packageJson.version;
     }
+    /* c8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
-        mode: shadowRootMode,
+        mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
+    /* c8 ignore end */
     static { this.styles = styles; }
     /**
      * @default undefined

package/dist/options.js

@@ -5,14 +5,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, LitElement } from 'lit';
-import { classMap } from 'lit/directives/class-map.js';
 import { customElement, property } from 'lit/decorators.js';
 import { map } from 'lit/directives/map.js';
 import { when } from 'lit/directives/when.js';
 import { range } from 'lit/directives/range.js';
 import packageJson from '../package.json' with { type: 'json' };
 import styles from './options.styles.js';
-import shadowRootMode from './library/shadow-root-mode.js';
 import final from './library/final.js';
 import uniqueId from './library/unique-id.js';
 import assertSlot from './library/assert-slot.js';
@@ -47,6 +45,8 @@ import OptionsGroup from './options.group.js';
  * @attr {string} [version]
  *
  * @slot {Option | Text}
+ *
+ * @fires {Event} slotchange
  */
 let Options = class Options extends LitElement {
     constructor() {
@@ -66,10 +66,12 @@ let Options = class Options extends LitElement {
         this.tabIndex = -1;
         this.version = packageJson.version;
     }
+    /* c8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
-        mode: shadowRootMode,
+        mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
+    /* c8 ignore end */
     static { this.styles = styles; }
     render() {
         // Without `role="none"` VoiceOver doesn't announce how many options are available.
@@ -78,10 +80,7 @@ let Options = class Options extends LitElement {
         // `role="option"`).
         return html `<div class="component" role="none">
       <slot
-        class=${classMap({
-            'default-slot': true,
-            loading: this.privateLoading,
-        })}
+        ?hidden=${this.privateLoading}
         @slotchange=${this.#onDefaultSlotChange}
         ${assertSlot([OptionsGroup, Option, Text], true)}
       >
@@ -96,7 +95,7 @@ let Options = class Options extends LitElement {
     </div>`;
     }
     #onDefaultSlotChange() {
-        this.dispatchEvent(new Event('private-slot-change', { bubbles: true }));
+        this.dispatchEvent(new Event('slotchange', { bubbles: true }));
     }
 };
 __decorate([

package/dist/options.styles.js

@@ -11,11 +11,5 @@ export default [
       */
       display: block;
     }
-
-    .default-slot {
-      &.loading {
-        display: none;
-      }
-    }
   `,
 ];

package/dist/popover.js

@@ -13,7 +13,6 @@ import { customElement, property, state } from 'lit/decorators.js';
 import packageJson from '../package.json' with { type: 'json' };
 import styles from './popover.styles.js';
 import assertSlot from './library/assert-slot.js';
-import shadowRootMode from './library/shadow-root-mode.js';
 import final from './library/final.js';
 /**
  * @attr {boolean} [disabled=false]
@@ -76,10 +75,12 @@ let Popover = class Popover extends LitElement {
             this.open = false;
         };
     }
+    /* c8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
-        mode: shadowRootMode,
+        mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
+    /* c8 ignore end */
     static { this.styles = styles; }
     /**
      * @default false

package/dist/radio-group.js

@@ -17,7 +17,6 @@ import packageJson from '../package.json' with { type: 'json' };
 import RadioGroupRadio from './radio-group.radio.js';
 import styles from './radio-group.styles.js';
 import assertSlot from './library/assert-slot.js';
-import shadowRootMode from './library/shadow-root-mode.js';
 import final from './library/final.js';
 import required from './library/required.js';
 /**
@@ -64,10 +63,12 @@ import required from './library/required.js';
  */
 let RadioGroup = class RadioGroup extends LitElement {
     static { this.formAssociated = true; }
+    /* c8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
-        mode: shadowRootMode,
+        mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
+    /* c8 ignore end */
     static { this.styles = styles; }
     /**
      * @default false
@@ -334,7 +335,7 @@ let RadioGroup = class RadioGroup extends LitElement {
     reportValidity() {
         this.isReportValidityOrSubmit = true;
         const isValid = this.#internals.reportValidity();
-        // Ensures that getters referencing `this.validity.valid` are updated.
+        // Ensures getters referencing `this.validity.valid` re-run.
         this.requestUpdate();
         return isValid;
     }

package/dist/radio-group.radio.js

@@ -9,7 +9,6 @@ import { classMap } from 'lit/directives/class-map.js';
 import { customElement, property, state } from 'lit/decorators.js';
 import packageJson from '../package.json' with { type: 'json' };
 import styles from './radio-group.radio.styles.js';
-import shadowRootMode from './library/shadow-root-mode.js';
 import final from './library/final.js';
 import required from './library/required.js';
 /**
@@ -34,10 +33,12 @@ let RadioGroupRadio = class RadioGroupRadio extends LitElement {
         this.#privateRequired = false;
         this.#value = '';
     }
+    /* c8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
-        mode: shadowRootMode,
+        mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
+    /* c8 ignore end */
     static { this.styles = styles; }
     /**
      * @default undefined