@crowdstrike/glide-core 0.32.2 → 0.33.0

package/dist/icon-button.js

@@ -12,7 +12,6 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import packageJson from '../package.json' with { type: 'json' };
 import styles from './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';
 /**
@@ -42,10 +41,11 @@ let IconButton = class IconButton extends LitElement {
         this.#buttonElementRef = createRef();
         this.#defaultSlotElementRef = createRef();
     }
+    /* c8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
         delegatesFocus: true,
-        mode: shadowRootMode,
+        mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
     static { this.styles = styles; }
     // A getter and setter because Lit Analzyer doesn't recognize "aria-description"

package/dist/inline-alert.js

@@ -15,7 +15,6 @@ import severityInformationalIcon from './icons/severity-informational.js';
 import severityMediumIcon from './icons/severity-medium.js';
 import severityCriticalIcon from './icons/severity-critical.js';
 import assertSlot from './library/assert-slot.js';
-import shadowRootMode from './library/shadow-root-mode.js';
 import final from './library/final.js';
 /**
  * @attr {'informational'|'medium'|'high'|'critical'} [variant='informational']
@@ -33,10 +32,12 @@ let InlineAlert = class InlineAlert extends LitElement {
         this.#animationDuration = 100;
         this.#componentElementRef = createRef();
     }
+    /* c8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
-        mode: shadowRootMode,
+        mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
+    /* c8 ignore end */
     static { this.styles = styles; }
     firstUpdated() {
         this.#componentElementRef.value?.addEventListener('animationend', () => {

package/dist/input.js

@@ -19,7 +19,6 @@ import { LocalizeController } from './library/localize.js';
 import magnifyingGlassIcon from './icons/magnifying-glass.js';
 import styles from './input.styles.js';
 import xIcon from './icons/x.js';
-import shadowRootMode from './library/shadow-root-mode.js';
 import final from './library/final.js';
 import required from './library/required.js';
 /**
@@ -82,9 +81,10 @@ import required from './library/required.js';
  */
 let Input = class Input extends LitElement {
     static { this.formAssociated = true; }
+    /* c8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
-        mode: shadowRootMode,
+        mode: window.navigator.webdriver ? 'open' : 'closed',
         delegatesFocus: true,
     }; }
     static { this.styles = styles; }
@@ -318,7 +318,7 @@ let Input = class Input 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;
     }
@@ -397,12 +397,12 @@ let Input = class Input extends LitElement {
             this.isReportValidityOrSubmit = true;
             const isFirstInvalidFormElement = this.form?.querySelector(':invalid') === this;
             if (isFirstInvalidFormElement) {
-                // - `this.#internals.delegatesFocus` is preferred because it's declarative. But
-                //    it's limited to focusing the first focusable element. That doesn't work for
-                //    us because our first focusable element is the tooltip when it's present.
+                // - `delegatesFocus` is preferred because it's declarative. But it's limited to
+                //    focusing the first focusable element. That doesn't work for us because the first
+                //    focusable element is the Tooltip when it's present.
                 //
                 // - Canceling this event means the input won't get focus, even if we were to use
-                //   `this.#internals.delegatesFocus`.
+                //   `delegatesFocus`.
                 //
                 // - The browser will ignore this if Input isn't the first invalid form control.
                 //
@@ -453,8 +453,8 @@ let Input = class Input extends LitElement {
         if (this.#inputElementRef.value?.value) {
             this.value = this.#inputElementRef.value?.value;
         }
-        // Unlike "input" events, "change" events aren't composed. So we have to
-        // manually dispatch them.
+        // Unlike "input" events, "change" events aren't composed. So we have to manually
+        // dispatch them.
         this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
     }
     #onInputFocus() {

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)}
@@ -416,20 +417,28 @@ let Menu = class Menu extends LitElement {
         return this.closest('glide-core-option');
     }
     get #subMenus() {
-        return [
-            ...this.querySelectorAll(
-            // The "content" slot case.
-            ':scope > glide-core-options > glide-core-option > [slot="content"] > glide-core-menu'),
-            ...this.querySelectorAll(
-            // The "content" slot and Options Group case.
-            ':scope > glide-core-options > glide-core-options-group > glide-core-option > [slot="content"] > glide-core-menu'),
-            ...this.querySelectorAll(
-            // The "content" slot fallback case.
-            ':scope > glide-core-options > glide-core-option > [slot="submenu"]'),
-            ...this.querySelectorAll(
-            // The "content" slot fallback and Options Group case.
-            ':scope > glide-core-options > glide-core-options-group > glide-core-option > [slot="submenu"]'),
-        ];
+        const assignedElements = this.#defaultSlotElementRef.value?.assignedElements({ flatten: true });
+        if (!assignedElements) {
+            return [];
+        }
+        return assignedElements
+            .filter((element) => element instanceof Options)
+            .flatMap((element) => {
+            return [
+                ...element.querySelectorAll(
+                // The "content" slot case.
+                ':scope > glide-core-option > [slot="content"] > glide-core-menu'),
+                ...element.querySelectorAll(
+                // The "content" slot and Options Group case.
+                ':scope > glide-core-options-group > glide-core-option > [slot="content"] > glide-core-menu'),
+                ...element.querySelectorAll(
+                // The "content" slot fallback case.
+                ':scope > glide-core-option > [slot="submenu"]'),
+                ...element.querySelectorAll(
+                // The "content" slot fallback and Options Group case.
+                ':scope > glide-core-options-group > glide-core-option > [slot="submenu"]'),
+            ];
+        });
     }
     get #targetElement() {
         const element = this.#targetSlotElementRef.value
@@ -449,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) {
@@ -537,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 &&
@@ -1043,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'],
@@ -1145,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`
@@ -1198,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