@crowdstrike/glide-core 0.32.2 → 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
@@ -70,6 +71,7 @@ let Button = class Button extends LitElement {
     }
     render() {
         return html `<glide-core-tooltip
+      class="tooltip"
       label=${this.tooltip ?? ''}
       ?disabled=${!this.disabled || !this.tooltip}
     >
@@ -92,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)}
         >
@@ -106,14 +105,11 @@ let Button = class Button extends LitElement {
           -->
         </slot>
 
-        ${this.label}
+        <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

@@ -22,6 +22,7 @@ export default [
       font-weight: var(--glide-core-typography-weight-bold);
       gap: var(--glide-core-spacing-base-xs);
       justify-content: center;
+      max-inline-size: 100%;
       padding-block: var(--glide-core-spacing-base-xs);
       padding-inline: var(--glide-core-spacing-base-md);
       transition-duration: var(--glide-core-duration-moderate-02);
@@ -143,6 +144,7 @@ export default [
         font-size: var(--glide-core-typography-size-body-default);
         font-weight: var(--glide-core-typography-weight-regular);
         padding: 0;
+        text-align: start;
 
         &.disabled {
           color: var(--glide-core-color-interactive-text-link--disabled);
@@ -167,16 +169,16 @@ export default [
       }
     }
 
-    .prefix-icon-slot {
-      &.hidden {
-        display: none;
-      }
+    .tooltip {
+      max-inline-size: 100%;
+      white-space: inherit;
     }
 
-    .suffix-icon-slot {
-      &.hidden {
-        display: none;
-      }
+    .label {
+      min-inline-size: 3ch;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: inherit;
     }
   `,
 ];

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

@@ -27,6 +27,7 @@ declare global {
  * @slot {Element} [private-icon]
  *
  * @fires {Event} change
+ * @fires {Event} input
  * @fires {Event} invalid
  *
  * @readonly

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';
 /**
@@ -40,6 +39,7 @@ import required from './library/required.js';
  * @slot {Element} [private-icon]
  *
  * @fires {Event} change
+ * @fires {Event} input
  * @fires {Event} invalid
  *
  * @readonly
@@ -68,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
@@ -354,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;
     }
@@ -436,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.
                 //
@@ -480,12 +482,12 @@ let Checkbox = class Checkbox extends LitElement {
         this.reportValidity();
         this.isBlurring = false;
     }
-    // Only "change" would need to be handled if not for some consumers needing
-    // to force Checkbox checked or unchecked until the user has completed some action.
+    // Only "change" would need to be handled if not for some consumers needing to
+    // force Checkbox checked or unchecked until the user has completed some action.
     //
-    // The way to force Checkbox checked or unchecked is to add an "input" or
-    // "change" handler and then immediately set `checked` back to its desired
-    // state inside that handler.
+    // The way they can force Checkbox to be checked or unchecked is to add an "input"
+    // or "change" handler and then immediately set `checked` back to its desired state
+    // inside that handler.
     //
     // To do that, consumers need to await `this.updateComplete` so `checked` isn't
     // immediately reverted after Checkbox updates, which happens asynchronously and
@@ -495,18 +497,25 @@ let Checkbox = class Checkbox extends LitElement {
     // why we're handling "input" as well: so that "input", like "change", results
     // in an update that can be awaited.
     //
-    // If "input" events were dispatched after "change" events, only handling
-    // "change" here would suffice because an update from "change" would already
-    // be pending by the time "input" is dispatched.
+    // If "input" events were dispatched after "change" events, only handling "change"
+    // here would suffice because an update from "change" would already be pending by
+    // the time "input" is dispatched.
     #onInputChangeOrInput(event) {
         if (event.target instanceof HTMLInputElement) {
             this.checked = event.target.checked;
         }
         // If the input has been interacted with it's no longer indeterminate.
         this.indeterminate = false;
+        // Our analyzer plugin (`add-events.ts`) doesn't and can't account for events that
+        // are implicitly dispatched by a native form control in a component. So we stop
+        // the original event and dispatch our own.
+        if (event.type === 'input') {
+            event.stopPropagation();
+            this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+        }
         if (event.type === 'change') {
-            // 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 }));
         }
     }

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'