@crowdstrike/glide-core 0.32.3 → 0.34.0

package/dist/dropdown.styles.js

@@ -93,9 +93,10 @@ export default [
       }
 
       &.readonly {
-        background-color: transparent;
+        background-color: var(
+          --glide-core-color-interactive-surface-container--disabled
+        );
         border-color: transparent;
-        padding-inline-start: 0;
       }
 
       &.quiet {
@@ -249,6 +250,14 @@ export default [
       align-content: center;
       color: var(--glide-core-color-interactive-text-link);
       white-space: nowrap;
+
+      &.disabled {
+        color: var(--glide-core-color-interactive-text-link--disabled);
+      }
+
+      &.readonly {
+        color: var(--glide-core-color-interactive-text-default);
+      }
     }
 
     .single-select-icon-slot {

package/dist/form-controls-layout.js

@@ -17,7 +17,6 @@ import Slider from './slider.js';
 import TextArea from './textarea.js';
 import styles from './form-controls-layout.styles.js';
 import assertSlot from './library/assert-slot.js';
-import shadowRootMode from './library/shadow-root-mode.js';
 import final from './library/final.js';
 /**
  * @attr {'left'|'middle'|'right'} [split='left']
@@ -34,10 +33,12 @@ let FormControlsLayout = class FormControlsLayout extends LitElement {
         this.#slotElementRef = createRef();
         this.#split = 'left';
     }
+    /* c8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
-        mode: shadowRootMode,
+        mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
+    /* c8 ignore end */
     static { this.styles = styles; }
     /**
      * @default 'left'

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.d.ts

@@ -11,6 +11,9 @@ declare global {
  * @attr {string} [version]
  *
  * @slot {Element | string} - The content of the alert
+ *
+ * @readonly
+ * @prop {string} ariaLabel
  */
 export default class InlineAlert extends LitElement {
     #private;
@@ -18,6 +21,7 @@ export default class InlineAlert extends LitElement {
     static styles: import("lit").CSSResult[];
     variant: 'informational' | 'medium' | 'high' | 'critical';
     readonly version: string;
+    get ariaLabel(): string;
     firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/inline-alert.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { createRef, ref } from 'lit/directives/ref.js';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import packageJson from '../package.json' with { type: 'json' };
 import styles from './inline-alert.styles.js';
@@ -15,8 +15,8 @@ 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';
+import { LocalizeController } from './library/localize.js';
 /**
  * @attr {'informational'|'medium'|'high'|'critical'} [variant='informational']
  *
@@ -24,6 +24,9 @@ import final from './library/final.js';
  * @attr {string} [version]
  *
  * @slot {Element | string} - The content of the alert
+ *
+ * @readonly
+ * @prop {string} ariaLabel
  */
 let InlineAlert = class InlineAlert extends LitElement {
     constructor() {
@@ -32,12 +35,24 @@ let InlineAlert = class InlineAlert extends LitElement {
         this.version = packageJson.version;
         this.#animationDuration = 100;
         this.#componentElementRef = createRef();
+        this.#localize = new LocalizeController(this);
     }
+    /* c8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
-        mode: shadowRootMode,
+        mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
+    /* c8 ignore end */
     static { this.styles = styles; }
+    get ariaLabel() {
+        return this.#localize.term(this.variant === 'informational'
+            ? 'severityInformational'
+            : this.variant === 'medium'
+                ? 'severityMedium'
+                : this.variant === 'high'
+                    ? 'severityHigh'
+                    : 'severityCritical');
+    }
     firstUpdated() {
         this.#componentElementRef.value?.addEventListener('animationend', () => {
             this.#componentElementRef.value?.classList.remove('added');
@@ -46,14 +61,14 @@ let InlineAlert = class InlineAlert extends LitElement {
     render() {
         return html `
       <div
+        aria-label=${this.ariaLabel}
         class=${classMap({
             component: true,
             added: true,
             [this.variant]: true,
         })}
-        role="alert"
-        aria-labelledby="label"
         data-test="component"
+        role="alert"
         style="--private-animation-duration: ${this.#animationDuration}ms"
         ${ref(this.#componentElementRef)}
       >
@@ -67,7 +82,7 @@ let InlineAlert = class InlineAlert extends LitElement {
           ${icons[this.variant]}
         </div>
 
-        <div id="label" class="content">
+        <div class="content">
           <slot ${assertSlot()}>
             <!--
               The content of the alert
@@ -81,6 +96,7 @@ let InlineAlert = class InlineAlert extends LitElement {
     }
     #animationDuration;
     #componentElementRef;
+    #localize;
 };
 __decorate([
     property({ reflect: true, useDefault: true })
@@ -88,6 +104,9 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], InlineAlert.prototype, "version", void 0);
+__decorate([
+    state()
+], InlineAlert.prototype, "ariaLabel", null);
 InlineAlert = __decorate([
     customElement('glide-core-inline-alert'),
     final

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.
                 //

package/dist/input.styles.js

@@ -86,9 +86,10 @@ export default [
         with ":read-only": https://bugs.chromium.org/p/chromium/issues/detail?id=1519649
       */
       &.readonly {
-        background-color: transparent;
+        background-color: var(
+          --glide-core-color-interactive-surface-container--disabled
+        );
         border: 1px solid transparent;
-        padding-inline-start: 0;
       }
 
       &.disabled {

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/library/localize.d.ts

@@ -18,6 +18,7 @@ export interface Translation extends DefaultTranslation {
     severityInformational: string;
     severityCritical: string;
     severityMedium: string;
+    severityHigh: string;
     success: string;
     error: string;
     informational: string;

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;