@vonage/vivid 5.2.0 → 5.4.0

package/searchable-select/definition.cjs

@@ -3,11 +3,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const button_definition = require('../unbundled/definition.cjs');
-const popup_definition = require('../unbundled/definition4.cjs');
+const popup_definition = require('../unbundled/definition5.cjs');
 const icon_definition = require('../icon/definition.cjs');
+const option_definition = require('../unbundled/definition3.cjs');
 const progressRing_definition = require('../progress-ring/definition.cjs');
 const vividElement = require('../unbundled/vivid-element.cjs');
 const mixins = require('../unbundled/mixins.cjs');
+const divider_definition = require('../divider/definition.cjs');
 const fastElement = require('@microsoft/fast-element');
 const scrollIntoView = require('../unbundled/scrollIntoView.cjs');
 const delegatesAria = require('../unbundled/delegates-aria.cjs');
@@ -19,9 +21,9 @@ const formElement = require('../unbundled/form-element.cjs');
 const affix = require('../unbundled/affix.cjs');
 const localized = require('../unbundled/localized.cjs');
 const fastWebUtilities = require('@microsoft/fast-web-utilities');
-const option = require('../unbundled/option.cjs');
+const divider = require('../unbundled/divider.cjs');
 
-const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host(:focus-visible){outline:none}:host{display:inline-block;inline-size:300px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{display:flex;flex-direction:column;gap:4px}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.selection-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary: var(--vvd-searchable-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-searchable-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-searchable-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-searchable-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-searchable-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-searchable-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-searchable-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-searchable-select-accent-fierce, var(--vvd-color-neutral-700))}.fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.fieldset.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.fieldset:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.fieldset:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.fieldset:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.fieldset:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.fieldset.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.fieldset.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.fieldset.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.fieldset.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.fieldset.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.fieldset{display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-block:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}@supports selector(:has(*)){.fieldset:not(.has-highlighted-option):has(input:focus){box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}}@supports not selector(:has(*)){.fieldset:not(.has-highlighted-option):focus-within{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}}:host(:not([shape=pill])) .fieldset{border-radius:8px}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{display:flex;overflow:hidden;flex:1;flex-direction:column;gap:8px;min-block-size:24px}.tag-row{display:flex;gap:8px;inline-size:100%}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;flex:1;border:none;background:none;block-size:24px;font:var(--vvd-typography-base);max-inline-size:100%;min-inline-size:min(100px,40%);outline:none}.contains-only-input input:not(:focus){position:absolute;block-size:0;inline-size:0;min-inline-size:0;opacity:0;pointer-events:none}.listbox{display:flex;flex-direction:column;padding:4px;gap:2px;max-block-size:var(--searchable-select-height, 408px);overflow-y:auto}.empty-message{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);min-block-size:40px;text-align:center}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width, 100%)}slot[name=icon]{font-size:20px}.visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}::slotted([data-vvd-component=option][data-highlighted]){border-radius:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}.label-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--label-wrapper-gap, 8px)}.label-wrapper[hidden]{display:none}.label-wrapper .label{flex:1 1 auto}.label-wrapper slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){margin-inline-start:auto}";
+const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host(:focus-visible){outline:none}:host{display:inline-block;inline-size:300px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{display:flex;flex-direction:column;gap:4px}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.selection-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary: var(--vvd-searchable-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-searchable-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-searchable-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-searchable-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-searchable-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-searchable-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-searchable-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-searchable-select-accent-fierce, var(--vvd-color-neutral-700))}.fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.fieldset.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.fieldset:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.fieldset:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.fieldset:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.fieldset:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.fieldset.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.fieldset.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.fieldset.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.fieldset.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.fieldset.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.fieldset{display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-block:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}@supports selector(:has(*)){.fieldset:not(.has-highlighted-option):has(input:focus){box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}}@supports not selector(:has(*)){.fieldset:not(.has-highlighted-option):focus-within{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}}:host(:not([shape=pill])) .fieldset{border-radius:8px}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{display:flex;overflow:hidden;flex:1;flex-direction:column;gap:8px;min-block-size:24px}.tag-row{display:flex;gap:8px;inline-size:100%}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;flex:1;border:none;background:none;block-size:24px;font:var(--vvd-typography-base);max-inline-size:100%;min-inline-size:min(100px,40%);outline:none}.contains-only-input input:not(:focus){position:absolute;block-size:0;inline-size:0;min-inline-size:0;opacity:0;pointer-events:none}.listbox{display:flex;flex-direction:column;padding:4px;gap:2px;max-block-size:var(--searchable-select-height, 408px);overflow-y:auto}.empty-message{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);min-block-size:40px;text-align:center}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width, 100%)}slot[name=icon]{font-size:20px}.visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}::slotted([data-vvd-component=option][data-highlighted]),[data-select-all][data-highlighted]{border-radius:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}.divider{margin-block:10px;margin-inline:12px}.label-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--label-wrapper-gap, 8px)}.label-wrapper[hidden]{display:none}.label-wrapper .label{flex:1 1 auto}.label-wrapper slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){margin-inline-start:auto}";
 
 const optionTagStyles = ".base.connotation-cta{--_connotation-color-contrast: var(--vvd-option-tag-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-contrast: var(--vvd-option-tag-accent-contrast, var(--vvd-color-neutral-800))}.base{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--fill-color);block-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;user-select:none;vertical-align:middle}.base:not(.disabled){--text-color: var(--_connotation-color-contrast);--fill-color: var(--_connotation-color-soft);--outline-color: transparent}@supports (background-color: color-mix(in srgb,black 50%,white)){.base:not(.disabled){--fill-color: color-mix( in srgb, var(--_connotation-color-contrast), transparent 87.5% )}}.base.disabled{--text-color: var(--vvd-color-neutral-300);--fill-color: var(--vvd-color-neutral-200);--outline-color: transparent}@supports (background-color: color-mix(in srgb,black 50%,white)){.base.disabled{--fill-color: color-mix( in srgb, var(--vvd-color-neutral-800), transparent 87.5% )}}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5)}.remove-button{display:flex;align-items:center;border-radius:inherit;cursor:pointer;outline:none}.disabled .remove-button{pointer-events:none}.remove-button:focus-visible:before{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}";
 
@@ -87,6 +89,7 @@ class SearchableSelect extends withContextualHelp.WithContextualHelp(
     this.clearable = false;
     this.maxSelected = null;
     this._slottedDisabledOptions = [];
+    this.enableSelectAll = false;
     // --- Form handling ---
     /**
      * @internal
@@ -451,9 +454,12 @@ class SearchableSelect extends withContextualHelp.WithContextualHelp(
     }
     this.#transitionHighlightedOptionTo(null);
     this._filteredOptions = newFilteredOptions;
-    this._filteredEnabledOptions = newFilteredOptions.filter(
-      (option) => !option.disabled
-    );
+    const enabled = newFilteredOptions.filter((o) => !o.disabled);
+    if (this._selectAllOption) {
+      this._filteredEnabledOptions = [this._selectAllOption, ...enabled];
+    } else {
+      this._filteredEnabledOptions = enabled;
+    }
   }
   #transitionHighlightedOptionTo(index) {
     if (typeof this._highlightedOptionIndex === "number") {
@@ -489,9 +495,12 @@ class SearchableSelect extends withContextualHelp.WithContextualHelp(
     if (this._highlightedOptionIndex === null) {
       return;
     }
-    this.#handleOptionInteraction(
-      this._filteredEnabledOptions[this._highlightedOptionIndex]
-    );
+    const highlightedOption = this._filteredEnabledOptions[this._highlightedOptionIndex];
+    if (highlightedOption.getAttribute("data-select-all") !== null) {
+      this._toggleSelectAll();
+      return;
+    }
+    this.#handleOptionInteraction(highlightedOption);
   }
   #highlightFirstOption() {
     this.#transitionHighlightedOptionTo(0);
@@ -662,7 +671,7 @@ class SearchableSelect extends withContextualHelp.WithContextualHelp(
       case "Enter":
       case " ": {
         this._onTagRemoved(this.values[tagIndex]);
-        fastElement.DOM.processUpdates();
+        fastElement.Updates.process();
         this.#moveTagFocusTo(this.#nextTagIndexForRemoved(tagIndex));
         break;
       }
@@ -717,6 +726,10 @@ class SearchableSelect extends withContextualHelp.WithContextualHelp(
     const capturedOption = e.target.closest(
       `option,[role=option],[data-vvd-component=option]`
     );
+    if (capturedOption?.getAttribute("data-select-all") !== null) {
+      this._toggleSelectAll();
+      return;
+    }
     if (capturedOption && !capturedOption.disabled) {
       this.#handleOptionInteraction(capturedOption);
     }
@@ -767,6 +780,51 @@ class SearchableSelect extends withContextualHelp.WithContextualHelp(
   get _hasSelectionCount() {
     return this.multiple && this.maxSelected && this.maxSelected >= 1;
   }
+  /**
+   * @internal
+   */
+  get _selectableOptions() {
+    return this._slottedOptions?.filter(
+      (o) => !this._slottedDisabledOptions.includes(o) && !o.disabled
+    ) ?? [];
+  }
+  /**
+   * @internal
+   */
+  get _selectAllLabel() {
+    return this._isAllSelected ? this.deselectAllText ?? this.locale.searchableSelect.deselectAllLabel : this.selectAllText ?? this.locale.searchableSelect.selectAllLabel;
+  }
+  /**
+   * @internal
+   */
+  get _isAllSelected() {
+    const selectedValues = this.values;
+    if (!this.multiple || !this._slottedOptions) return false;
+    const selectable = this._selectableOptions;
+    if (selectable.length === 0) return false;
+    const selected = new Set(selectedValues);
+    return selectable.every((o) => selected.has(o.value));
+  }
+  /**
+   * @internal
+   */
+  _toggleSelectAll() {
+    const selectableValues = this._selectableOptions.map((o) => o.value);
+    if (this._isAllSelected) {
+      const updatedValues2 = this.values.filter(
+        (v) => !selectableValues.includes(v)
+      );
+      this.#updateValuesThroughUserInteraction(updatedValues2);
+      this._changeDescription = this.locale.searchableSelect.deselectedAllMessage;
+      return;
+    }
+    const missingValues = selectableValues.filter(
+      (v) => !this.values.includes(v)
+    );
+    const updatedValues = [...this.values, ...missingValues];
+    this.#updateValuesThroughUserInteraction(updatedValues);
+    this._changeDescription = this.locale.searchableSelect.selectedAllMessage;
+  }
   #determineInitialValues() {
     return this.initialValues.length ? this.initialValues : this.initialValue ? [this.initialValue] : [];
   }
@@ -933,6 +991,18 @@ __decorateClass$1([
 __decorateClass$1([
   fastElement.observable
 ], SearchableSelect.prototype, "_slottedDisabledOptions");
+__decorateClass$1([
+  fastElement.attr({ attribute: "enable-select-all", mode: "boolean" })
+], SearchableSelect.prototype, "enableSelectAll");
+__decorateClass$1([
+  fastElement.attr({ attribute: "select-all-text" })
+], SearchableSelect.prototype, "selectAllText");
+__decorateClass$1([
+  fastElement.attr({ attribute: "deselect-all-text" })
+], SearchableSelect.prototype, "deselectAllText");
+__decorateClass$1([
+  fastElement.observable
+], SearchableSelect.prototype, "_selectAllOption");
 __decorateClass$1([
   fastElement.observable
 ], SearchableSelect.prototype, "_changeDescription");
@@ -1148,6 +1218,22 @@ function setFixedDropdownVarWidth(x) {
     x.getBoundingClientRect().width
   )}px` : null;
 }
+function renderSelectAll(context) {
+  const optionTag = context.tagFor(option_definition.ListboxOption);
+  const dividerTag = context.tagFor(divider.Divider);
+  return fastElement.html`
+    <${optionTag}
+      data-select-all
+      tabindex="-1"
+      :text="${(x) => x._selectAllLabel}"
+      :selected="${(x) => x._isAllSelected}"
+      :_displayCheckmark="${() => true}"
+      ?disabled="${(x) => x._selectableOptions.length === 0}"
+      ${fastElement.ref("_selectAllOption")}>
+    </${optionTag}>
+		<${dividerTag} class="divider"></${dividerTag}>
+  `;
+}
 function renderControl(context) {
   const popupTag = context.tagFor(popup_definition.Popup);
   return fastElement.html`
@@ -1185,9 +1271,13 @@ function renderControl(context) {
 						@click="${(x, c) => x._onListboxClick(c.event)}"
 						@mousedown="${() => false}"
 					>
+						${fastElement.when(
+    (x) => x.enableSelectAll && x.multiple && !x.maxSelected,
+    renderSelectAll(context)
+  )}
 						<slot
 							${fastElement.slotted({
-    filter: option.isListboxOption,
+    filter: option_definition.isListboxOption,
     flatten: true,
     property: "_slottedOptions"
   })}>
@@ -1222,10 +1312,10 @@ function renderControl(context) {
 	`;
 }
 const SearchableSelectTemplate = (context) => {
-  const optionTagTag = context.tagFor(OptionTag);
+  const optionTagName = context.tagFor(OptionTag, true);
   return fastElement.html`
 		<template
-			:_optionTagTagName="${() => optionTagTag}"
+			:_optionTagTagName="${() => optionTagName}"
 			@mousedown="${(x, c) => x._onMouseDown(c.event)}"
 		>
 			<div class="control-wrapper">
@@ -1294,7 +1384,9 @@ const searchableSelectDefinition = vividElement.defineVividComponent(
     icon_definition.iconDefinition,
     optionTagDefinition,
     progressRing_definition.progressRingDefinition,
-    mixins.feedbackMessageDefinition
+    mixins.feedbackMessageDefinition,
+    option_definition.listboxOptionDefinition,
+    divider_definition.dividerDefinition
   ],
   {
     styles

package/searchable-select/definition.js

@@ -1,10 +1,12 @@
 import { B as Button, c as chevronTemplateFactory, b as buttonDefinition } from '../unbundled/definition.js';
-import { P as Popup, p as popupDefinition } from '../unbundled/definition4.js';
+import { P as Popup, p as popupDefinition } from '../unbundled/definition5.js';
 import { VwcIconElement as Icon, iconDefinition } from '../icon/definition.js';
+import { i as isListboxOption, L as ListboxOption, l as listboxOptionDefinition } from '../unbundled/definition3.js';
 import { VwcProgressRingElement as ProgressRing, progressRingDefinition } from '../progress-ring/definition.js';
 import { V as VividElement, c as createRegisterFunction, d as defineVividComponent } from '../unbundled/vivid-element.js';
 import { a as WithFeedback, f as feedbackMessageDefinition } from '../unbundled/mixins.js';
-import { Observable, DOM, attr, nullableNumberConverter, observable, html, when, slotted, ref, repeat } from '@microsoft/fast-element';
+import { dividerDefinition } from '../divider/definition.js';
+import { Observable, Updates, attr, nullableNumberConverter, observable, html, when, slotted, ref, repeat } from '@microsoft/fast-element';
 import { s as scrollIntoView } from '../unbundled/scrollIntoView.js';
 import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-aria.js';
 import { F as FormAssociated } from '../unbundled/form-associated.js';
@@ -12,12 +14,12 @@ import { W as WithContextualHelp } from '../unbundled/with-contextual-help.js';
 import { W as WithErrorText } from '../unbundled/with-error-text.js';
 import { W as WithSuccessText } from '../unbundled/with-success-text.js';
 import { F as FormElement } from '../unbundled/form-element.js';
-import { A as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
+import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
 import { L as Localized } from '../unbundled/localized.js';
 import { classNames } from '@microsoft/fast-web-utilities';
-import { i as isListboxOption } from '../unbundled/option.js';
+import { D as Divider } from '../unbundled/divider.js';
 
-const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host(:focus-visible){outline:none}:host{display:inline-block;inline-size:300px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{display:flex;flex-direction:column;gap:4px}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.selection-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary: var(--vvd-searchable-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-searchable-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-searchable-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-searchable-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-searchable-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-searchable-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-searchable-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-searchable-select-accent-fierce, var(--vvd-color-neutral-700))}.fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.fieldset.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.fieldset:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.fieldset:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.fieldset:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.fieldset:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.fieldset.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.fieldset.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.fieldset.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.fieldset.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.fieldset.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.fieldset{display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-block:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}@supports selector(:has(*)){.fieldset:not(.has-highlighted-option):has(input:focus){box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}}@supports not selector(:has(*)){.fieldset:not(.has-highlighted-option):focus-within{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}}:host(:not([shape=pill])) .fieldset{border-radius:8px}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{display:flex;overflow:hidden;flex:1;flex-direction:column;gap:8px;min-block-size:24px}.tag-row{display:flex;gap:8px;inline-size:100%}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;flex:1;border:none;background:none;block-size:24px;font:var(--vvd-typography-base);max-inline-size:100%;min-inline-size:min(100px,40%);outline:none}.contains-only-input input:not(:focus){position:absolute;block-size:0;inline-size:0;min-inline-size:0;opacity:0;pointer-events:none}.listbox{display:flex;flex-direction:column;padding:4px;gap:2px;max-block-size:var(--searchable-select-height, 408px);overflow-y:auto}.empty-message{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);min-block-size:40px;text-align:center}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width, 100%)}slot[name=icon]{font-size:20px}.visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}::slotted([data-vvd-component=option][data-highlighted]){border-radius:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}.label-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--label-wrapper-gap, 8px)}.label-wrapper[hidden]{display:none}.label-wrapper .label{flex:1 1 auto}.label-wrapper slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){margin-inline-start:auto}";
+const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host(:focus-visible){outline:none}:host{display:inline-block;inline-size:300px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{display:flex;flex-direction:column;gap:4px}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.selection-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary: var(--vvd-searchable-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-searchable-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-searchable-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-searchable-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-searchable-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-searchable-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-searchable-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-searchable-select-accent-fierce, var(--vvd-color-neutral-700))}.fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.fieldset.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.fieldset:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.fieldset:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.fieldset:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.fieldset:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.fieldset.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.fieldset.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.fieldset.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.fieldset.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.fieldset.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.fieldset{display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-block:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}@supports selector(:has(*)){.fieldset:not(.has-highlighted-option):has(input:focus){box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}}@supports not selector(:has(*)){.fieldset:not(.has-highlighted-option):focus-within{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}}:host(:not([shape=pill])) .fieldset{border-radius:8px}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{display:flex;overflow:hidden;flex:1;flex-direction:column;gap:8px;min-block-size:24px}.tag-row{display:flex;gap:8px;inline-size:100%}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;flex:1;border:none;background:none;block-size:24px;font:var(--vvd-typography-base);max-inline-size:100%;min-inline-size:min(100px,40%);outline:none}.contains-only-input input:not(:focus){position:absolute;block-size:0;inline-size:0;min-inline-size:0;opacity:0;pointer-events:none}.listbox{display:flex;flex-direction:column;padding:4px;gap:2px;max-block-size:var(--searchable-select-height, 408px);overflow-y:auto}.empty-message{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);min-block-size:40px;text-align:center}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width, 100%)}slot[name=icon]{font-size:20px}.visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}::slotted([data-vvd-component=option][data-highlighted]),[data-select-all][data-highlighted]{border-radius:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}.divider{margin-block:10px;margin-inline:12px}.label-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--label-wrapper-gap, 8px)}.label-wrapper[hidden]{display:none}.label-wrapper .label{flex:1 1 auto}.label-wrapper slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){margin-inline-start:auto}";
 
 const optionTagStyles = ".base.connotation-cta{--_connotation-color-contrast: var(--vvd-option-tag-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-contrast: var(--vvd-option-tag-accent-contrast, var(--vvd-color-neutral-800))}.base{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--fill-color);block-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;user-select:none;vertical-align:middle}.base:not(.disabled){--text-color: var(--_connotation-color-contrast);--fill-color: var(--_connotation-color-soft);--outline-color: transparent}@supports (background-color: color-mix(in srgb,black 50%,white)){.base:not(.disabled){--fill-color: color-mix( in srgb, var(--_connotation-color-contrast), transparent 87.5% )}}.base.disabled{--text-color: var(--vvd-color-neutral-300);--fill-color: var(--vvd-color-neutral-200);--outline-color: transparent}@supports (background-color: color-mix(in srgb,black 50%,white)){.base.disabled{--fill-color: color-mix( in srgb, var(--vvd-color-neutral-800), transparent 87.5% )}}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5)}.remove-button{display:flex;align-items:center;border-radius:inherit;cursor:pointer;outline:none}.disabled .remove-button{pointer-events:none}.remove-button:focus-visible:before{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}";
 
@@ -83,6 +85,7 @@ class SearchableSelect extends WithContextualHelp(
     this.clearable = false;
     this.maxSelected = null;
     this._slottedDisabledOptions = [];
+    this.enableSelectAll = false;
     // --- Form handling ---
     /**
      * @internal
@@ -447,9 +450,12 @@ class SearchableSelect extends WithContextualHelp(
     }
     this.#transitionHighlightedOptionTo(null);
     this._filteredOptions = newFilteredOptions;
-    this._filteredEnabledOptions = newFilteredOptions.filter(
-      (option) => !option.disabled
-    );
+    const enabled = newFilteredOptions.filter((o) => !o.disabled);
+    if (this._selectAllOption) {
+      this._filteredEnabledOptions = [this._selectAllOption, ...enabled];
+    } else {
+      this._filteredEnabledOptions = enabled;
+    }
   }
   #transitionHighlightedOptionTo(index) {
     if (typeof this._highlightedOptionIndex === "number") {
@@ -485,9 +491,12 @@ class SearchableSelect extends WithContextualHelp(
     if (this._highlightedOptionIndex === null) {
       return;
     }
-    this.#handleOptionInteraction(
-      this._filteredEnabledOptions[this._highlightedOptionIndex]
-    );
+    const highlightedOption = this._filteredEnabledOptions[this._highlightedOptionIndex];
+    if (highlightedOption.getAttribute("data-select-all") !== null) {
+      this._toggleSelectAll();
+      return;
+    }
+    this.#handleOptionInteraction(highlightedOption);
   }
   #highlightFirstOption() {
     this.#transitionHighlightedOptionTo(0);
@@ -658,7 +667,7 @@ class SearchableSelect extends WithContextualHelp(
       case "Enter":
       case " ": {
         this._onTagRemoved(this.values[tagIndex]);
-        DOM.processUpdates();
+        Updates.process();
         this.#moveTagFocusTo(this.#nextTagIndexForRemoved(tagIndex));
         break;
       }
@@ -713,6 +722,10 @@ class SearchableSelect extends WithContextualHelp(
     const capturedOption = e.target.closest(
       `option,[role=option],[data-vvd-component=option]`
     );
+    if (capturedOption?.getAttribute("data-select-all") !== null) {
+      this._toggleSelectAll();
+      return;
+    }
     if (capturedOption && !capturedOption.disabled) {
       this.#handleOptionInteraction(capturedOption);
     }
@@ -763,6 +776,51 @@ class SearchableSelect extends WithContextualHelp(
   get _hasSelectionCount() {
     return this.multiple && this.maxSelected && this.maxSelected >= 1;
   }
+  /**
+   * @internal
+   */
+  get _selectableOptions() {
+    return this._slottedOptions?.filter(
+      (o) => !this._slottedDisabledOptions.includes(o) && !o.disabled
+    ) ?? [];
+  }
+  /**
+   * @internal
+   */
+  get _selectAllLabel() {
+    return this._isAllSelected ? this.deselectAllText ?? this.locale.searchableSelect.deselectAllLabel : this.selectAllText ?? this.locale.searchableSelect.selectAllLabel;
+  }
+  /**
+   * @internal
+   */
+  get _isAllSelected() {
+    const selectedValues = this.values;
+    if (!this.multiple || !this._slottedOptions) return false;
+    const selectable = this._selectableOptions;
+    if (selectable.length === 0) return false;
+    const selected = new Set(selectedValues);
+    return selectable.every((o) => selected.has(o.value));
+  }
+  /**
+   * @internal
+   */
+  _toggleSelectAll() {
+    const selectableValues = this._selectableOptions.map((o) => o.value);
+    if (this._isAllSelected) {
+      const updatedValues2 = this.values.filter(
+        (v) => !selectableValues.includes(v)
+      );
+      this.#updateValuesThroughUserInteraction(updatedValues2);
+      this._changeDescription = this.locale.searchableSelect.deselectedAllMessage;
+      return;
+    }
+    const missingValues = selectableValues.filter(
+      (v) => !this.values.includes(v)
+    );
+    const updatedValues = [...this.values, ...missingValues];
+    this.#updateValuesThroughUserInteraction(updatedValues);
+    this._changeDescription = this.locale.searchableSelect.selectedAllMessage;
+  }
   #determineInitialValues() {
     return this.initialValues.length ? this.initialValues : this.initialValue ? [this.initialValue] : [];
   }
@@ -929,6 +987,18 @@ __decorateClass$1([
 __decorateClass$1([
   observable
 ], SearchableSelect.prototype, "_slottedDisabledOptions");
+__decorateClass$1([
+  attr({ attribute: "enable-select-all", mode: "boolean" })
+], SearchableSelect.prototype, "enableSelectAll");
+__decorateClass$1([
+  attr({ attribute: "select-all-text" })
+], SearchableSelect.prototype, "selectAllText");
+__decorateClass$1([
+  attr({ attribute: "deselect-all-text" })
+], SearchableSelect.prototype, "deselectAllText");
+__decorateClass$1([
+  observable
+], SearchableSelect.prototype, "_selectAllOption");
 __decorateClass$1([
   observable
 ], SearchableSelect.prototype, "_changeDescription");
@@ -1144,6 +1214,22 @@ function setFixedDropdownVarWidth(x) {
     x.getBoundingClientRect().width
   )}px` : null;
 }
+function renderSelectAll(context) {
+  const optionTag = context.tagFor(ListboxOption);
+  const dividerTag = context.tagFor(Divider);
+  return html`
+    <${optionTag}
+      data-select-all
+      tabindex="-1"
+      :text="${(x) => x._selectAllLabel}"
+      :selected="${(x) => x._isAllSelected}"
+      :_displayCheckmark="${() => true}"
+      ?disabled="${(x) => x._selectableOptions.length === 0}"
+      ${ref("_selectAllOption")}>
+    </${optionTag}>
+		<${dividerTag} class="divider"></${dividerTag}>
+  `;
+}
 function renderControl(context) {
   const popupTag = context.tagFor(Popup);
   return html`
@@ -1181,6 +1267,10 @@ function renderControl(context) {
 						@click="${(x, c) => x._onListboxClick(c.event)}"
 						@mousedown="${() => false}"
 					>
+						${when(
+    (x) => x.enableSelectAll && x.multiple && !x.maxSelected,
+    renderSelectAll(context)
+  )}
 						<slot
 							${slotted({
     filter: isListboxOption,
@@ -1218,10 +1308,10 @@ function renderControl(context) {
 	`;
 }
 const SearchableSelectTemplate = (context) => {
-  const optionTagTag = context.tagFor(OptionTag);
+  const optionTagName = context.tagFor(OptionTag, true);
   return html`
 		<template
-			:_optionTagTagName="${() => optionTagTag}"
+			:_optionTagTagName="${() => optionTagName}"
 			@mousedown="${(x, c) => x._onMouseDown(c.event)}"
 		>
 			<div class="control-wrapper">
@@ -1290,7 +1380,9 @@ const searchableSelectDefinition = defineVividComponent(
     iconDefinition,
     optionTagDefinition,
     progressRingDefinition,
-    feedbackMessageDefinition
+    feedbackMessageDefinition,
+    listboxOptionDefinition,
+    dividerDefinition
   ],
   {
     styles