@crowdstrike/glide-core 0.32.3 → 0.33.0

package/dist/accordion.js

@@ -13,7 +13,6 @@ import packageJson from '../package.json' with { type: 'json' };
 import chevronIcon from './icons/chevron.js';
 import styles from './accordion.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';
 /**
@@ -43,11 +42,13 @@ let Accordion = class Accordion extends LitElement {
         this.#suffixIconsSlotElementRef = createRef();
         this.#summaryElementRef = createRef();
     }
+    /* c8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
         delegatesFocus: true,
-        mode: shadowRootMode,
+        mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
+    /* c8 ignore end */
     static { this.styles = styles; }
     /**
      * @default false

package/dist/button-group.button.js

@@ -11,7 +11,6 @@ import { classMap } from 'lit/directives/class-map.js';
 import packageJson from '../package.json' with { type: 'json' };
 import styles from './button-group.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,12 @@ let ButtonGroupButton = class ButtonGroupButton extends LitElement {
         this.#iconSlotElementRef = createRef();
         this.#isSelected = 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/button-group.js

@@ -12,7 +12,6 @@ import packageJson from '../package.json' with { type: 'json' };
 import ButtonGroupButton from './button-group.button.js';
 import styles from './button-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';
 /**
@@ -32,10 +31,12 @@ let ButtonGroup = class ButtonGroup extends LitElement {
         this.#defaultSlotElementRef = createRef();
         this.#orientation = 'horizontal';
     }
+    /* 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/button.js

@@ -11,7 +11,6 @@ import { createRef, ref } from 'lit/directives/ref.js';
 import { customElement, property, state } from 'lit/decorators.js';
 import packageJson from '../package.json' with { type: 'json' };
 import styles from './button.styles.js';
-import shadowRootMode from './library/shadow-root-mode.js';
 import final from './library/final.js';
 import required from './library/required.js';
 /**
@@ -36,11 +35,13 @@ import required from './library/required.js';
  */
 let Button = class Button extends LitElement {
     static { this.formAssociated = true; }
+    /* c8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
         delegatesFocus: true,
-        mode: shadowRootMode,
+        mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
+    /* c8 ignore end */
     static { this.styles = styles; }
     // A getter and setter because Lit Analzyer doesn't recognize "aria-description"
     // as a valid attribute on the `<button>` and doesn't provide a way to selectively
@@ -93,11 +94,8 @@ let Button = class Button extends LitElement {
         ${ref(this.#buttonElementRef)}
       >
         <slot
-          class=${classMap({
-            'prefix-icon-slot': true,
-            hidden: this.variant === 'link',
-        })}
           name="prefix-icon"
+          ?hidden=${this.variant === 'link'}
           @slotchange=${this.#onPrefixIconSlotChange}
           ${ref(this.#prefixIconSlotElementRef)}
         >
@@ -110,11 +108,8 @@ let Button = class Button extends LitElement {
         <span class="label">${this.label}</span>
 
         <slot
-          class=${classMap({
-            'suffix-icon-slot': true,
-            hidden: this.variant === 'link',
-        })}
           name="suffix-icon"
+          ?hidden=${this.variant === 'link'}
           @slotchange=${this.#onSuffixIconSlotChange}
           ${ref(this.#suffixIconSlotElementRef)}
         >

package/dist/button.styles.js

@@ -174,23 +174,11 @@ export default [
       white-space: inherit;
     }
 
-    .prefix-icon-slot {
-      &.hidden {
-        display: none;
-      }
-    }
-
     .label {
       min-inline-size: 3ch;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: inherit;
     }
-
-    .suffix-icon-slot {
-      &.hidden {
-        display: none;
-      }
-    }
   `,
 ];

package/dist/checkbox-group.js

@@ -16,7 +16,6 @@ import packageJson from '../package.json' with { type: 'json' };
 import Checkbox from './checkbox.js';
 import styles from './checkbox-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 CheckboxGroup = class CheckboxGroup 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
@@ -298,7 +299,7 @@ let CheckboxGroup = class CheckboxGroup 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;
     }
@@ -363,12 +364,12 @@ let CheckboxGroup = class CheckboxGroup 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 Checkbox isn't the first invalid form control.
                 //

package/dist/checkbox.js

@@ -17,7 +17,6 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import packageJson from '../package.json' with { type: 'json' };
 import checkedIcon from './icons/checked.js';
 import styles from './checkbox.styles.js';
-import shadowRootMode from './library/shadow-root-mode.js';
 import final from './library/final.js';
 import required from './library/required.js';
 /**
@@ -69,10 +68,12 @@ import required from './library/required.js';
  */
 let Checkbox = class Checkbox 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 undefined
@@ -355,7 +356,7 @@ let Checkbox = class Checkbox extends LitElement {
     reportValidity() {
         this.privateIsReportValidityOrSubmit = 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;
     }
@@ -437,12 +438,12 @@ let Checkbox = class Checkbox extends LitElement {
             this.privateIsReportValidityOrSubmit = 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 Checkbox isn't the first invalid form control.
                 //

package/dist/checkbox.styles.js

@@ -44,7 +44,7 @@ export default [
       border-radius: var(--glide-core-rounding-base-radius-xxs);
       box-sizing: border-box;
       color: var(
-        --glide-core-private-color-checkbox-surface-background-selected--default
+        --glide-core-private-color-checkbox-surface-background-selected
       );
       display: flex;
       flex-shrink: 0; /* Don't shrink when the summary wraps. */

package/dist/drawer.js

@@ -12,7 +12,6 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import packageJson from '../package.json' with { type: 'json' };
 import styles from './drawer.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';
 /**
@@ -38,10 +37,12 @@ let Drawer = class Drawer extends LitElement {
         this.#defaultSlotElementRef = createRef();
         this.#isOpen = 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/dropdown.js

@@ -28,7 +28,6 @@ import magnifyingGlassIcon from './icons/magnifying-glass.js';
 import pencilIcon from './icons/pencil.js';
 import styles from './dropdown.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';
 import uniqueId from './library/unique-id.js';
@@ -94,10 +93,12 @@ import uniqueId from './library/unique-id.js';
  */
 let Dropdown = class Dropdown 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
@@ -918,9 +919,9 @@ let Dropdown = class Dropdown extends LitElement {
             -->
           </slot>
 
-          ${when(this.#isShowValidationFeedback && this.validityMessage, () => html `<span class="validity-message" data-test="validity-message"
-                >${unsafeHTML(this.validityMessage)}</span
-              >`)}
+          ${when(this.#isShowValidationFeedback && this.validityMessage, () => html `<span class="validity-message" data-test="validity-message">
+                ${unsafeHTML(this.validityMessage)}
+              </span>`)}
         </div>
       </glide-core-private-label>
     </div>`;
@@ -928,7 +929,7 @@ let Dropdown = class Dropdown 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;
     }
@@ -1095,7 +1096,7 @@ let Dropdown = class Dropdown extends LitElement {
             // We only want to focus the input if the "invalid" event resulted from either:
             //
             // 1. A form submission.
-            // 2. A call of `reportValidity()` that did not result from Checkbox's "blur"
+            // 2. A call of `reportValidity()` that did not result from Dropdown's "blur"
             //    event.
             if (this.isCheckingValidity || this.isBlurring) {
                 return;
@@ -1104,7 +1105,7 @@ let Dropdown = class Dropdown extends LitElement {
             const isFirstInvalidFormElement = this.form?.querySelector(':invalid') === this;
             if (isFirstInvalidFormElement) {
                 // Canceling the event means Dropdown won't get focus, even if we were to use
-                // `this.#internals.delegatesFocus`. So we have to focus manually.
+                // `delegatesFocus`. So we have to focus manually.
                 this.focus();
             }
         });
@@ -1461,8 +1462,7 @@ let Dropdown = class Dropdown extends LitElement {
                             this.#inputElementRef.value.value = this.activeOption.label;
                             this.inputValue = this.activeOption.label;
                             // One is subtracted to account for an apparent Chrome bug where `scrollWidth`
-                            // is off by one relative to `clientWidth` when they should be the same. It
-                            // happens whenever the input field was overflowing and now isn't.
+                            // is off by one relative to `clientWidth` when they should be the same.
                             this.isInputOverflowing =
                                 this.#inputElementRef.value.scrollWidth - 1 >
                                     this.#inputElementRef.value.clientWidth;
@@ -1874,7 +1874,9 @@ let Dropdown = class Dropdown extends LitElement {
     #onInputResize() {
         if (this.#inputElementRef.value) {
             this.isInputOverflowing =
-                this.#inputElementRef.value.scrollWidth >
+                // One is subtracted to account for an apparent Chrome bug where `scrollWidth`
+                // is off by one relative to `clientWidth` when they should be the same.
+                this.#inputElementRef.value.scrollWidth - 1 >
                     this.#inputElementRef.value.clientWidth;
         }
     }
@@ -1949,8 +1951,7 @@ let Dropdown = class Dropdown extends LitElement {
                     this.#inputElementRef.value.value = option.label;
                     this.inputValue = option.label;
                     // One is subtracted to account for an apparent Chrome bug where `scrollWidth`
-                    // is off by one relative to `clientWidth` when they should be the same. It
-                    // happens whenever the input field was overflowing and now isn't.
+                    // is off by one relative to `clientWidth` when they should be the same.
                     this.isInputOverflowing =
                         this.#inputElementRef.value.scrollWidth - 1 >
                             this.#inputElementRef.value.clientWidth;
@@ -2007,8 +2008,7 @@ let Dropdown = class Dropdown extends LitElement {
                     this.lastSelectedAndEnabledOption?.label ?? '';
                 this.inputValue = this.lastSelectedAndEnabledOption?.label ?? '';
                 // One is subtracted to account for an apparent Chrome bug where `scrollWidth`
-                // is off by one relative to `clientWidth` when they should be the same. It
-                // happens whenever the input field was overflowing and now isn't.
+                // is off by one relative to `clientWidth` when they should be the same.
                 this.isInputOverflowing =
                     this.#inputElementRef.value.scrollWidth - 1 >
                         this.#inputElementRef.value.clientWidth;
@@ -2077,8 +2077,7 @@ let Dropdown = class Dropdown extends LitElement {
                 this.#inputElementRef.value.value = event.target.label;
                 this.inputValue = event.target.label;
                 // One is subtracted to account for an apparent Chrome bug where `scrollWidth`
-                // is off by one relative to `clientWidth` when they should be the same. It
-                // happens whenever the input field was overflowing and now isn't.
+                // is off by one relative to `clientWidth` when they should be the same.
                 this.isInputOverflowing =
                     this.#inputElementRef.value.scrollWidth - 1 >
                         this.#inputElementRef.value.clientWidth;
@@ -2116,8 +2115,10 @@ let Dropdown = class Dropdown extends LitElement {
                 this.#inputElementRef.value.value =
                     this.lastSelectedAndEnabledOption.label;
                 this.inputValue = this.lastSelectedAndEnabledOption.label;
+                // One is subtracted to account for an apparent Chrome bug where `scrollWidth`
+                // is off by one relative to `clientWidth` when they should be the same.
                 this.isInputOverflowing =
-                    this.#inputElementRef.value.scrollWidth >
+                    this.#inputElementRef.value.scrollWidth - 1 >
                         this.#inputElementRef.value.clientWidth;
             }
             else {

package/dist/dropdown.option.d.ts

@@ -75,8 +75,10 @@ export default class DropdownOption extends LitElement {
     private get lastSelectedAndEnabledOption();
     click(): void;
     connectedCallback(): void;
+    private get countSuffix();
     disconnectedCallback(): void;
     firstUpdated(): void;
+    private get isCountGreaterThanZero();
     privateEdit(): void;
     privateUpdateCheckbox(): Promise<void>;
     render(): import("lit").TemplateResult<1>;

package/dist/dropdown.option.js

@@ -17,7 +17,6 @@ import checkedIcon from './icons/checked.js';
 import pencilIcon from './icons/pencil.js';
 import { LocalizeController } from './library/localize.js';
 import styles from './dropdown.option.styles.js';
-import shadowRootMode from './library/shadow-root-mode.js';
 import final from './library/final.js';
 import required from './library/required.js';
 import uniqueId from './library/unique-id.js';
@@ -76,10 +75,12 @@ let DropdownOption = class DropdownOption extends LitElement {
         this.#selected = 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
@@ -199,6 +200,13 @@ let DropdownOption = class DropdownOption extends LitElement {
         });
         this.#intersectionObserver.observe(this);
     }
+    get countSuffix() {
+        return typeof this.count === 'number' && this.count >= 0
+            ? this.count >= 1000
+                ? '999+'
+                : this.count.toString()
+            : '';
+    }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.#intersectionObserver?.disconnect();
@@ -208,6 +216,9 @@ let DropdownOption = class DropdownOption extends LitElement {
             this.#checkboxElementRef.value.checked = this.selected && !this.disabled;
         }
     }
+    get isCountGreaterThanZero() {
+        return typeof this.count === 'number' && this.count >= 0;
+    }
     privateEdit() {
         this.dispatchEvent(new Event('edit', { bubbles: true, composed: true }));
     }
@@ -274,7 +285,7 @@ let DropdownOption = class DropdownOption extends LitElement {
                 class=${classMap({
                     'edit-button': true,
                     active: this.privateIsEditActive,
-                    count: Boolean(this.count),
+                    count: this.isCountGreaterThanZero,
                     disabled: this.disabled,
                     multiple: Boolean(this.isMultiple),
                 })}
@@ -286,7 +297,7 @@ let DropdownOption = class DropdownOption extends LitElement {
                 ${pencilIcon}
               </button>`;
             })}
-            ${when(this.count && this.count > 0, () => {
+            ${when(this.isCountGreaterThanZero, () => {
                 return html `<div
                 class=${classMap({
                     'count-container': true,
@@ -294,15 +305,7 @@ let DropdownOption = class DropdownOption extends LitElement {
                 })}
                 data-test="count-container"
               >
-                ${when(
-                // `this.count` is guaranteed to be defined by the `when()` above.
-                //
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                this.count >= 1000, () => {
-                    return '999+';
-                }, () => {
-                    return this.count;
-                })}
+                ${this.countSuffix}
               </div>`;
             })}
           `;
@@ -311,7 +314,7 @@ let DropdownOption = class DropdownOption extends LitElement {
             <div
               class=${classMap({
                 option: true,
-                count: Boolean(this.count),
+                count: this.isCountGreaterThanZero,
                 disabled: this.disabled,
                 editable: this.editable,
             })}
@@ -369,7 +372,7 @@ let DropdownOption = class DropdownOption extends LitElement {
                   class=${classMap({
                     'edit-button': true,
                     active: this.privateActive && this.privateIsEditActive,
-                    count: Boolean(this.count),
+                    count: this.isCountGreaterThanZero,
                     disabled: this.disabled,
                 })}
                   data-test="edit-button"
@@ -381,7 +384,7 @@ let DropdownOption = class DropdownOption extends LitElement {
                 </button>`;
             })}
 
-              ${when(this.count && this.count > 0, () => {
+              ${when(this.isCountGreaterThanZero, () => {
                 return html `<div
                   class=${classMap({
                     'count-container': true,
@@ -389,15 +392,7 @@ let DropdownOption = class DropdownOption extends LitElement {
                 })}
                   data-test="count-container"
                 >
-                  ${when(
-                // `this.count` is guaranteed to be defined by the `when()` above.
-                //
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                this.count >= 1000, () => {
-                    return '999+';
-                }, () => {
-                    return this.count;
-                })}
+                  ${this.countSuffix}
                 </div>`;
             })}
             </div>
@@ -526,6 +521,12 @@ __decorate([
 __decorate([
     state()
 ], DropdownOption.prototype, "lastSelectedAndEnabledOption", null);
+__decorate([
+    state()
+], DropdownOption.prototype, "countSuffix", null);
+__decorate([
+    state()
+], DropdownOption.prototype, "isCountGreaterThanZero", null);
 __decorate([
     state()
 ], DropdownOption.prototype, "isLabelOverflow", void 0);

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