@crowdstrike/glide-core 0.32.3 → 0.34.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
@@ -237,7 +238,8 @@ let Checkbox = class Checkbox extends LitElement {
             disabled: this.disabled,
         })}
               >
-                <div class="checked-icon">${checkedIcon}</div>
+                <div class="checked-icon" role="none">${checkedIcon}</div>
+
                 ${icons.indeterminate}
               </div>
             </div>
@@ -287,7 +289,7 @@ let Checkbox = class Checkbox extends LitElement {
               Screenreaders will come across the tooltip naturally as focus moves toward
               the Checkbox.
             -->
-            <div class="input-and-checkbox" slot="control">
+            <div class="input-and-checkbox" slot="control" role="none">
               <input
                 aria-describedby="summary description"
                 aria-invalid=${this.#isShowValidationFeedback}
@@ -355,7 +357,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 +439,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
@@ -567,6 +568,7 @@ let Dropdown = class Dropdown extends LitElement {
                           removable
                           ?disabled=${this.disabled || this.readonly}
                           ?private-editable=${option.editable}
+                          ?private-readonly=${this.readonly}
                           @edit=${this.#onTagEdit}
                           @remove=${this.#onTagRemove.bind(this, option)}
                         >
@@ -597,7 +599,11 @@ let Dropdown = class Dropdown extends LitElement {
             this.selectedAndEnabledOptions.length > this.tagOverflowLimit, () => {
             return html `<div
                   aria-hidden="true"
-                  class="tag-overflow-text"
+                  class=${classMap({
+                'tag-overflow-text': true,
+                disabled: this.disabled,
+                readonly: this.readonly,
+            })}
                   id="tag-overflow-text"
                 >
                   +
@@ -649,6 +655,7 @@ let Dropdown = class Dropdown extends LitElement {
             .isCommunicateItemCountToScreenreaders
             ? 'item-count'
             : ''}"
+                  aria-required=${this.required}
                   autocapitalize="off"
                   autocomplete="off"
                   class=${classMap({
@@ -754,32 +761,31 @@ let Dropdown = class Dropdown extends LitElement {
                     ${pencilIcon}
                   </glide-core-icon-button>`;
         })}
-
-              <button
-                aria-controls="options"
-                aria-describedby="description"
-                aria-expanded=${this.open && !this.disabled}
-                aria-haspopup="listbox"
-                aria-hidden=${this.filterable || this.isFilterable}
-                aria-labelledby="selected-option-labels label loading-feedback"
-                class="primary-button"
-                data-test="primary-button"
-                id="primary-button"
-                tabindex=${this.filterable || this.isFilterable || this.disabled
-            ? '-1'
-            : '0'}
-                type="button"
-                ?disabled=${this.disabled}
-                @focusin=${this.#onPrimaryButtonFocusin}
-                @focusout=${this.#onPrimaryButtonFocusout}
-                ${ref(this.#primaryButtonElementRef)}
-              >
-                ${when(this.isFiltering, () => {
-            return html `<div data-test="magnifying-glass-icon">
-                      ${magnifyingGlassIcon}
-                    </div>`;
-        }, () => chevronIcon)}
-              </button>
+              ${when(!(this.disabled || this.readonly), () => {
+            return html `<button
+                  aria-controls="options"
+                  aria-describedby="description"
+                  aria-expanded=${this.open}
+                  aria-haspopup="listbox"
+                  aria-hidden=${this.filterable || this.isFilterable}
+                  aria-labelledby="selected-option-labels label loading-feedback"
+                  aria-required=${this.required}
+                  class="primary-button"
+                  data-test="primary-button"
+                  id="primary-button"
+                  tabindex=${this.filterable || this.isFilterable ? '-1' : '0'}
+                  type="button"
+                  @focusin=${this.#onPrimaryButtonFocusin}
+                  @focusout=${this.#onPrimaryButtonFocusout}
+                  ${ref(this.#primaryButtonElementRef)}
+                >
+                  ${when(this.isFiltering, () => {
+                return html `<div data-test="magnifying-glass-icon">
+                        ${magnifyingGlassIcon}
+                      </div>`;
+            }, () => chevronIcon)}
+                </button>`;
+        })}
             </div>
           </div>
 
@@ -918,9 +924,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 +934,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 +1101,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 +1110,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 +1467,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 +1879,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 +1956,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 +2013,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 +2082,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 +2120,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);