@vonage/vivid 5.2.0 → 5.4.0

package/searchable-select/index.js

@@ -1,38 +1,40 @@
-import { B as z, c as E, b as P } from "../bundled/definition3.js";
-import { P as L, p as M } from "../bundled/definition9.js";
-import { I as B, i as I } from "../bundled/definition2.js";
-import { P as A, p as W } from "../bundled/definition15.js";
-import { V as F, O as T, D as N, a as f, n as D, o as d, h as p, c as H, d as R } from "../bundled/vivid-element.js";
-import { W as K, f as j } from "../bundled/mixins.js";
-import { s as q } from "../bundled/scrollIntoView.js";
-import { D as U, d as G } from "../bundled/delegates-aria.js";
-import { F as J } from "../bundled/form-associated.js";
-import { W as Q } from "../bundled/with-contextual-help.js";
-import { W as X } from "../bundled/with-error-text.js";
-import { W as Y } from "../bundled/with-success-text.js";
-import { F as Z } from "../bundled/form-element.js";
-import { A as ee, a as te, I as oe } from "../bundled/affix.js";
+import { B as R, c as z, b as E } from "../bundled/definition3.js";
+import { P as L, p as P } from "../bundled/definition9.js";
+import { I as M, i as I } from "../bundled/definition2.js";
+import { i as B, L as W, l as N } from "../bundled/definition11.js";
+import { P as H, p as K } from "../bundled/definition15.js";
+import { V as F, O, U as j, a as u, n as A, o as p, h as d, c as q, d as D } from "../bundled/vivid-element.js";
+import { W as U, f as G } from "../bundled/mixins.js";
+import { d as J } from "../bundled/definition14.js";
+import { s as Q } from "../bundled/scrollIntoView.js";
+import { D as X, d as Y } from "../bundled/delegates-aria.js";
+import { F as Z } from "../bundled/form-associated.js";
+import { W as ee } from "../bundled/with-contextual-help.js";
+import { W as te } from "../bundled/with-error-text.js";
+import { W as ae } from "../bundled/with-success-text.js";
+import { F as oe } from "../bundled/form-element.js";
+import { A as le, a as se, I as ie } from "../bundled/affix.js";
 import { L as V } from "../bundled/localized.js";
-import { i as ae } from "../bundled/option.js";
+import { D as ne } from "../bundled/divider.js";
 import { w as v } from "../bundled/when.js";
-import { s as O } from "../bundled/slotted.js";
+import { s as T } from "../bundled/slotted.js";
 import { r as x } from "../bundled/ref.js";
-import { c as y } from "../bundled/class-names.js";
-import { r as w } from "../bundled/repeat.js";
-const ie = ".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}", se = '.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}';
-var le = Object.defineProperty, r = (s, t, e, a) => {
-  for (var i = void 0, l = s.length - 1, g; l >= 0; l--)
-    (g = s[l]) && (i = g(t, e, i) || i);
-  return i && le(t, e, i), i;
+import { r as y } from "../bundled/repeat.js";
+import { c as w } from "../bundled/class-names.js";
+const re = ".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}", ce = '.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}';
+var de = Object.defineProperty, r = (s, t, e, o) => {
+  for (var a = void 0, i = s.length - 1, g; i >= 0; i--)
+    (g = s[i]) && (a = g(t, e, a) || a);
+  return a && de(t, e, a), a;
 };
-const m = 8, ne = 100, S = 10, re = (s) => typeof s == "string";
-class n extends Q(
-  K(
-    X(
-      Y(
-        Z(
-          U(
-            ee(V(J(F)))
+const _ = 8, pe = 100, S = 10, he = (s) => typeof s == "string";
+class n extends ee(
+  U(
+    te(
+      ae(
+        oe(
+          X(
+            le(V(Z(F)))
           )
         )
       )
@@ -42,11 +44,11 @@ class n extends Q(
   constructor() {
     super(...arguments), this.fixedDropdown = !1, this.open = !1, this.multiple = !1, this.externalTags = !1, this.maxLines = null, this.values = [], this.initialValues = [], this._currentSearchText = null, this._areOptionsInitialized = !1, this.#s = {
       handleChange: (t, e) => {
-        t.selected && !this.values.includes(t.value) ? this.values = [...this.values, t.value] : !t.selected && this.values.includes(t.value) && (this.values = this.values.filter((a) => a !== t.value));
+        t.selected && !this.values.includes(t.value) ? this.values = [...this.values, t.value] : !t.selected && this.values.includes(t.value) && (this.values = this.values.filter((o) => o !== t.value));
       }
-    }, this.#t = /* @__PURE__ */ new Map(), this._filteredOptions = [], this._filteredEnabledOptions = [], this.loading = !1, this._highlightedOptionIndex = null, this._numElidedTags = 0, this._tagRows = [], this._lastTagRow = [], this.clearable = !1, this.maxSelected = null, this._slottedDisabledOptions = [], this.proxy = document.createElement("input"), this.setFormValue = (t, e) => {
-      re(t) || super.setFormValue(t, e);
-    }, this._changeDescription = "", this.#p = new ResizeObserver(() => {
+    }, this.#a = /* @__PURE__ */ new Map(), this._filteredOptions = [], this._filteredEnabledOptions = [], this.loading = !1, this._highlightedOptionIndex = null, this._numElidedTags = 0, this._tagRows = [], this._lastTagRow = [], this.clearable = !1, this.maxSelected = null, this._slottedDisabledOptions = [], this.enableSelectAll = !1, this.proxy = document.createElement("input"), this.setFormValue = (t, e) => {
+      he(t) || super.setFormValue(t, e);
+    }, this._changeDescription = "", this.#d = new ResizeObserver(() => {
       this.#u();
     });
   }
@@ -65,14 +67,14 @@ class n extends Q(
         this.values = [this.values[0]];
         return;
       }
-      if (this.values.some((t) => !this.#d(t))) {
-        this.values = this.values.filter((t) => this.#d(t));
+      if (this.values.some((t) => !this.#p(t))) {
+        this.values = this.values.filter((t) => this.#p(t));
         return;
       }
-      this.value = this.values.length ? this.values[0] : "", this.#c(), this.#m(), this.$fastController.isConnected && this.#u(), this.#g();
+      this.value = this.values.length ? this.values[0] : "", this.#c(), this.#_(), this.$fastController.isConnected && this.#u(), this.#g();
     }
   }
-  #a(t) {
+  #t(t) {
     this.values = t, this.$emit("change", void 0, {
       bubbles: !1
     }), this.$emit("input", void 0, {
@@ -80,8 +82,8 @@ class n extends Q(
     });
   }
   #b(t) {
-    const e = new Set(this.values), a = new Set(t);
-    this.values = [...this.values].filter((i) => a.has(i)).concat([...t].filter((i) => !e.has(i)));
+    const e = new Set(this.values), o = new Set(t);
+    this.values = [...this.values].filter((a) => o.has(a)).concat([...t].filter((a) => !e.has(a)));
   }
   /**
    * @internal
@@ -89,7 +91,7 @@ class n extends Q(
   initialValuesChanged() {
     this.dirtyValue || (this.values = this.initialValues, this.dirtyValue = !1);
   }
-  #d(t) {
+  #p(t) {
     return this._slottedOptions.some((e) => e.value === t);
   }
   /**
@@ -98,10 +100,10 @@ class n extends Q(
   valueChanged(t, e) {
     if (super.valueChanged(t, e), !this._areOptionsInitialized)
       return;
-    const a = this._slottedOptions.some(
-      (i) => i.value === e
+    const o = this._slottedOptions.some(
+      (a) => a.value === e
     );
-    this.values[0] !== e && (this.values = a ? [e] : []);
+    this.values[0] !== e && (this.values = o ? [e] : []);
   }
   get selectedIndex() {
     return this.values.length ? this._slottedOptions.findIndex(
@@ -175,13 +177,13 @@ class n extends Q(
           this.open = !0;
           break;
         }
-        return this.#w(), !1;
+        return this.#y(), !1;
       case "End":
         if (!this.open) {
           this.open = !0;
           break;
         }
-        return this.#y(), !1;
+        return this.#w(), !1;
       case "PageUp":
         if (!this.open) {
           this.open = !0;
@@ -193,13 +195,13 @@ class n extends Q(
           this.open = !0;
           break;
         }
-        return this.#T(), !1;
+        return this.#O(), !1;
       case "ArrowUp":
         if (!this.open) {
           this.open = !0;
           break;
         }
-        return this.#O(), !1;
+        return this.#T(), !1;
       case "ArrowDown":
         if (!this.open) {
           this.open = !0;
@@ -207,7 +209,7 @@ class n extends Q(
         }
         return this.#S(), !1;
       case "ArrowLeft":
-        return this.multiple && this._inputValue === "" && this.values.length && !this.externalTags ? (this.#i(this.#r(this.values.length)), !1) : !0;
+        return this.multiple && this._inputValue === "" && this.values.length && !this.externalTags ? (this.#l(this.#r(this.values.length)), !1) : !0;
       case "Backspace":
         return this.multiple && this._inputValue === "" && this.values.length ? (this._onTagRemoved(this.values[this.values.length - 1]), !1) : !0;
       default:
@@ -219,33 +221,33 @@ class n extends Q(
    * @internal
    */
   _slottedOptionsChanged(t, e) {
-    const a = !!this.querySelectorAll(":not([slot])").length;
-    if (!e.length && a)
+    const o = !!this.querySelectorAll(":not([slot])").length;
+    if (!e.length && o)
       return;
     if (this._areOptionsInitialized = !0, t) {
       this._slottedDisabledOptions = [];
-      for (const l of t)
-        T.getNotifier(l).unsubscribe(this.#s, "selected");
+      for (const i of t)
+        O.getNotifier(i).unsubscribe(this.#s, "selected");
     }
     if (e)
-      for (const l of e)
-        l._displayCheckmark = !0, T.getNotifier(l).subscribe(this.#s, "selected");
-    const i = [];
-    for (const l of this._slottedOptions)
-      (l.selected || l.value === this.value || this.values.includes(l.value)) && i.push(l.value), l.disabled && this._slottedDisabledOptions.push(l);
-    this.#b(i), this.#o(), this.#c();
+      for (const i of e)
+        i._displayCheckmark = !0, O.getNotifier(i).subscribe(this.#s, "selected");
+    const a = [];
+    for (const i of this._slottedOptions)
+      (i.selected || i.value === this.value || this.values.includes(i.value)) && a.push(i.value), i.disabled && this._slottedDisabledOptions.push(i);
+    this.#b(a), this.#o(), this.#c();
   }
   #s;
-  #m() {
+  #_() {
     for (const t of this._slottedOptions)
-      t.selected = this.values.includes(t.value), this.#_(t);
+      t.selected = this.values.includes(t.value), this.#m(t);
   }
   #h(t) {
     const e = t.value;
-    let a, i = !1;
-    const l = !this.values.includes(e);
-    this.multiple ? (l ? a = [...this.values, e] : a = this.values.filter((u) => u !== e), i = !0) : (l ? (a = [e], i = !0) : a = [], this.open = !1), this.#a(a);
-    const g = l ? this.locale.searchableSelect.optionSelectedMessage(
+    let o, a = !1;
+    const i = !this.values.includes(e);
+    this.multiple ? (i ? o = [...this.values, e] : o = this.values.filter((f) => f !== e), a = !0) : (i ? (o = [e], a = !0) : o = [], this.open = !1), this.#t(o);
+    const g = i ? this.locale.searchableSelect.optionSelectedMessage(
       t._getAccessibleName()
     ) : this.locale.searchableSelect.optionDeselectedMessage(
       t._getAccessibleName()
@@ -253,10 +255,10 @@ class n extends Q(
       this.values.length,
       this.maxSelected
     ) : "";
-    this._changeDescription = `${g} ${h}`, i && (this._currentSearchText = null);
+    this._changeDescription = `${g} ${h}`, a && (this._currentSearchText = null);
   }
-  #t;
-  #l(t) {
+  #a;
+  #i(t) {
     return t.querySelector('[slot="tag-icon"]');
   }
   /**
@@ -265,13 +267,13 @@ class n extends Q(
   _tagIconSlotName(t) {
     return `_tag-icon-${this.values.indexOf(t)}`;
   }
-  #_(t) {
-    if (t.selected && this.#l(t)) {
-      let e = this.#t.get(t);
-      e || (e = this.#l(t).cloneNode(!0), this.#t.set(t, e)), e.slot = this._tagIconSlotName(t.value), this.appendChild(e);
+  #m(t) {
+    if (t.selected && this.#i(t)) {
+      let e = this.#a.get(t);
+      e || (e = this.#i(t).cloneNode(!0), this.#a.set(t, e)), e.slot = this._tagIconSlotName(t.value), this.appendChild(e);
     } else {
-      const e = this.#t.get(t);
-      e && (e.remove(), this.#t.delete(t));
+      const e = this.#a.get(t);
+      e && (e.remove(), this.#a.delete(t));
     }
   }
   /**
@@ -293,9 +295,9 @@ class n extends Q(
       const i = !this.searchText || e(a, this.searchText);
       a._isNotMatching = !i, !a.hidden && i && t.push(a);
     }
-    this.#e(null), this._filteredOptions = t, this._filteredEnabledOptions = t.filter(
-      (a) => !a.disabled
-    );
+    this.#e(null), this._filteredOptions = t;
+    const o = t.filter((a) => !a.disabled);
+    this._selectAllOption ? this._filteredEnabledOptions = [this._selectAllOption, ...o] : this._filteredEnabledOptions = o;
   }
   #e(t) {
     if (typeof this._highlightedOptionIndex == "number") {
@@ -307,7 +309,7 @@ class n extends Q(
       Math.min(this._filteredEnabledOptions.length - 1, t)
     ) : t = null), this._highlightedOptionIndex = t, typeof this._highlightedOptionIndex == "number") {
       const e = this._filteredEnabledOptions[this._highlightedOptionIndex];
-      e._highlighted = !0, e.setAttribute("data-highlighted", ""), q(e, this._listbox, "nearest"), this._changeDescription = this.locale.searchableSelect.optionFocusedMessage(
+      e._highlighted = !0, e.setAttribute("data-highlighted", ""), Q(e, this._listbox, "nearest"), this._changeDescription = this.locale.searchableSelect.optionFocusedMessage(
         e._getAccessibleName(),
         this._highlightedOptionIndex + 1,
         this._filteredEnabledOptions.length,
@@ -316,14 +318,19 @@ class n extends Q(
     }
   }
   #x() {
-    this._highlightedOptionIndex !== null && this.#h(
-      this._filteredEnabledOptions[this._highlightedOptionIndex]
-    );
+    if (this._highlightedOptionIndex === null)
+      return;
+    const t = this._filteredEnabledOptions[this._highlightedOptionIndex];
+    if (t.getAttribute("data-select-all") !== null) {
+      this._toggleSelectAll();
+      return;
+    }
+    this.#h(t);
   }
-  #w() {
+  #y() {
     this.#e(0);
   }
-  #y() {
+  #w() {
     this.#e(
       this._filteredEnabledOptions.length - 1
     );
@@ -333,12 +340,12 @@ class n extends Q(
       (this._highlightedOptionIndex ?? this._filteredEnabledOptions.length) - S
     );
   }
-  #T() {
+  #O() {
     this.#e(
       (this._highlightedOptionIndex ?? -1) + S
     );
   }
-  #O() {
+  #T() {
     this.#e(
       (this._highlightedOptionIndex ?? this._filteredEnabledOptions.length) - 1
     );
@@ -354,7 +361,7 @@ class n extends Q(
    */
   _tagLabelForValue(t) {
     return this._slottedOptions.find(
-      (a) => a.value === t
+      (o) => o.value === t
     ).label;
   }
   /**
@@ -362,7 +369,7 @@ class n extends Q(
    */
   _tagConnotationForValue(t) {
     return this._slottedOptions.find(
-      (a) => a.value === t
+      (o) => o.value === t
     ).tagConnotation;
   }
   /**
@@ -370,23 +377,23 @@ class n extends Q(
    */
   _isTagDisabled(t) {
     const e = this._slottedOptions.find(
-      (a) => a.value === t
+      (o) => o.value === t
     );
     return this.disabled || e.disabled;
   }
   #k(t) {
     return this._slottedOptions?.find(
-      (a) => a.value === t
+      (o) => o.value === t
     )?.label;
   }
   /**
    * @internal
    */
-  #n(t, e, a) {
-    const i = document.createElement(this._optionTagTagName);
-    i.label = t, i.removable = e, i.style.cssText = "position: absolute; visibility: hidden;", i.hasIconPlaceholder = a, this.shadowRoot.appendChild(i);
-    const l = i.getBoundingClientRect().width;
-    return i.remove(), l;
+  #n(t, e, o) {
+    const a = document.createElement(this._optionTagTagName);
+    a.label = t, a.removable = e, a.style.cssText = "position: absolute; visibility: hidden;", a.hasIconPlaceholder = o, this.shadowRoot.appendChild(a);
+    const i = a.getBoundingClientRect().width;
+    return a.remove(), i;
   }
   #u() {
     if (!this.multiple) {
@@ -398,49 +405,49 @@ class n extends Q(
       return;
     }
     const t = this._contentArea.getBoundingClientRect().width, e = [[]];
-    let a = 0, i = ne, l;
-    for (l = this.values.length - 1; l >= 0; l--) {
-      const h = this.maxLines && a === this.maxLines - 1, u = this.#n(
-        this._tagLabelForValue(this.values[l]),
+    let o = 0, a = pe, i;
+    for (i = this.values.length - 1; i >= 0; i--) {
+      const h = this.maxLines && o === this.maxLines - 1, f = this.#n(
+        this._tagLabelForValue(this.values[i]),
         !0,
-        this.#l(this.selectedOptions[l]) !== null
-      ), o = {
-        value: this.values[l],
-        width: u
+        this.#i(this.selectedOptions[i]) !== null
+      ), l = {
+        value: this.values[i],
+        width: f
       };
       let c = 0;
       if (h) {
-        const $ = l;
-        $ && (c = m + this.#n($.toString(), !1, !1));
+        const $ = i;
+        $ && (c = _ + this.#n($.toString(), !1, !1));
       }
-      if (i + m + u + c > t) {
+      if (a + _ + f + c > t) {
         if (h)
-          if (l === this.values.length - 1)
-            e[a].unshift(o), i += m + u;
+          if (i === this.values.length - 1)
+            e[o].unshift(l), a += _ + f;
           else
             break;
         else
-          e.push([]), a++, e[a].unshift(o), i = u;
+          e.push([]), o++, e[o].unshift(l), a = f;
         continue;
       }
-      e[a].unshift(o), i += m + u;
+      e[o].unshift(l), a += _ + f;
     }
-    this._numElidedTags = l + 1, e.reverse();
+    this._numElidedTags = i + 1, e.reverse();
     for (let h = 0; h < e.length - 1; h++) {
-      let u = e[h].map((o) => o.width).reduce((o, c) => o + c, 0) + (e[h].length - 1) * m;
-      for (h === 0 && this._numElidedTags && (u += m + this.#n(this._numElidedTags.toString(), !1, !1)); e[h + 1].length && u + m + e[h + 1][0].width <= t; ) {
-        const o = e[h + 1].shift();
-        e[h].push(o), u += m + o.width;
+      let f = e[h].map((l) => l.width).reduce((l, c) => l + c, 0) + (e[h].length - 1) * _;
+      for (h === 0 && this._numElidedTags && (f += _ + this.#n(this._numElidedTags.toString(), !1, !1)); e[h + 1].length && f + _ + e[h + 1][0].width <= t; ) {
+        const l = e[h + 1].shift();
+        e[h].push(l), f += _ + l.width;
       }
     }
-    const g = e.map((h) => h.map((u) => u.value));
+    const g = e.map((h) => h.map((f) => f.value));
     this._tagRows = g.slice(0, -1), this._lastTagRow = g.slice(-1)[0];
   }
   /**
    * @internal
    */
   _onTagRemoved(t) {
-    this.#a(
+    this.#t(
       this.values.filter((e) => e !== t)
     ), this.#o();
   }
@@ -454,19 +461,19 @@ class n extends Q(
       case "Delete":
       case "Enter":
       case " ": {
-        this._onTagRemoved(this.values[e]), N.processUpdates(), this.#i(this.#C(e));
+        this._onTagRemoved(this.values[e]), j.process(), this.#l(this.#C(e));
         break;
       }
       case "ArrowLeft":
-        this.#i(this.#r(e) ?? e);
+        this.#l(this.#r(e) ?? e);
         break;
       case "ArrowRight":
-        this.#i(this.#v(e));
+        this.#l(this.#v(e));
         break;
     }
     return !0;
   }
-  #i(t) {
+  #l(t) {
     t === null ? this._input.focus() : this.shadowRoot.querySelector(`[data-index="${t}"]`)?.focus();
   }
   #r(t) {
@@ -497,6 +504,10 @@ class n extends Q(
     const e = t.target.closest(
       "option,[role=option],[data-vvd-component=option]"
     );
+    if (e?.getAttribute("data-select-all") !== null) {
+      this._toggleSelectAll();
+      return;
+    }
     e && !e.disabled && this.#h(e);
   }
   /**
@@ -509,7 +520,7 @@ class n extends Q(
    * @internal
    */
   _onClearButtonClick() {
-    this.#a(
+    this.#t(
       this.selectedOptions.filter((t) => t.disabled).map((t) => t.value)
     );
   }
@@ -527,10 +538,10 @@ class n extends Q(
     );
     if (this.values.length >= this.maxSelected) {
       const e = t.filter(
-        (a) => !this.selectedOptions.includes(a)
+        (o) => !this.selectedOptions.includes(o)
       );
-      for (const a of e)
-        a.disabled = !0;
+      for (const o of e)
+        o.disabled = !0;
     } else
       for (const e of t)
         e.disabled = !1;
@@ -541,6 +552,48 @@ class n extends Q(
   get _hasSelectionCount() {
     return this.multiple && this.maxSelected && this.maxSelected >= 1;
   }
+  /**
+   * @internal
+   */
+  get _selectableOptions() {
+    return this._slottedOptions?.filter(
+      (t) => !this._slottedDisabledOptions.includes(t) && !t.disabled
+    ) ?? [];
+  }
+  /**
+   * @internal
+   */
+  get _selectAllLabel() {
+    return this._isAllSelected ? this.deselectAllText ?? this.locale.searchableSelect.deselectAllLabel : this.selectAllText ?? this.locale.searchableSelect.selectAllLabel;
+  }
+  /**
+   * @internal
+   */
+  get _isAllSelected() {
+    const t = this.values;
+    if (!this.multiple || !this._slottedOptions) return !1;
+    const e = this._selectableOptions;
+    if (e.length === 0) return !1;
+    const o = new Set(t);
+    return e.every((a) => o.has(a.value));
+  }
+  /**
+   * @internal
+   */
+  _toggleSelectAll() {
+    const t = this._selectableOptions.map((a) => a.value);
+    if (this._isAllSelected) {
+      const a = this.values.filter(
+        (i) => !t.includes(i)
+      );
+      this.#t(a), this._changeDescription = this.locale.searchableSelect.deselectedAllMessage;
+      return;
+    }
+    const e = t.filter(
+      (a) => !this.values.includes(a)
+    ), o = [...this.values, ...e];
+    this.#t(o), this._changeDescription = this.locale.searchableSelect.selectedAllMessage;
+  }
   #f() {
     return this.initialValues.length ? this.initialValues : this.initialValue ? [this.initialValue] : [];
   }
@@ -564,9 +617,9 @@ class n extends Q(
    * @internal
    */
   formResetCallback() {
-    super.formResetCallback(), this.#a(this.#f());
+    super.formResetCallback(), this.#t(this.#f());
   }
-  #p;
+  #d;
   /**
    * @internal
    */
@@ -580,10 +633,10 @@ class n extends Q(
     return this.open ? (this.open = !1, !1) : !0;
   }
   connectedCallback() {
-    super.connectedCallback(), this.values.length || (this.values = this.#f()), this.#p.observe(this._contentArea);
+    super.connectedCallback(), this.values.length || (this.values = this.#f()), this.#d.observe(this._contentArea);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.#p.disconnect();
+    super.disconnectedCallback(), this.#d.disconnect();
   }
   /**
    * @internal
@@ -606,95 +659,107 @@ class n extends Q(
   }
 }
 r([
-  f
+  u
 ], n.prototype, "appearance");
 r([
-  f
+  u
 ], n.prototype, "shape");
 r([
-  f({ mode: "boolean", attribute: "fixed-dropdown" })
+  u({ mode: "boolean", attribute: "fixed-dropdown" })
 ], n.prototype, "fixedDropdown");
 r([
-  f
+  u
 ], n.prototype, "placeholder");
 r([
-  f({ mode: "boolean" })
+  u({ mode: "boolean" })
 ], n.prototype, "open");
 r([
-  f({ mode: "boolean" })
+  u({ mode: "boolean" })
 ], n.prototype, "multiple");
 r([
-  f({ attribute: "external-tags", mode: "boolean" })
+  u({ attribute: "external-tags", mode: "boolean" })
 ], n.prototype, "externalTags");
 r([
-  f({ attribute: "max-lines", converter: D })
+  u({ attribute: "max-lines", converter: A })
 ], n.prototype, "maxLines");
 r([
-  d
+  p
 ], n.prototype, "values");
 r([
-  d
+  p
 ], n.prototype, "initialValues");
 r([
-  d
+  p
 ], n.prototype, "_input");
 r([
-  d
+  p
 ], n.prototype, "_currentSearchText");
 r([
-  d
+  p
 ], n.prototype, "_slottedOptions");
 r([
-  d
+  p
 ], n.prototype, "optionFilter");
 r([
-  d
+  p
 ], n.prototype, "_filteredOptions");
 r([
-  d
+  p
 ], n.prototype, "_filteredEnabledOptions");
 r([
-  f({
+  u({
     mode: "boolean"
   })
 ], n.prototype, "loading");
 r([
-  d
+  p
 ], n.prototype, "_highlightedOptionIndex");
 r([
-  d
+  p
 ], n.prototype, "_contentArea");
 r([
-  d
+  p
 ], n.prototype, "_numElidedTags");
 r([
-  d
+  p
 ], n.prototype, "_tagRows");
 r([
-  d
+  p
 ], n.prototype, "_lastTagRow");
 r([
-  d
+  p
 ], n.prototype, "_listbox");
 r([
-  f({ mode: "boolean" })
+  u({ mode: "boolean" })
 ], n.prototype, "clearable");
 r([
-  f({ attribute: "max-selected", converter: D })
+  u({ attribute: "max-selected", converter: A })
 ], n.prototype, "maxSelected");
 r([
-  d
+  p
 ], n.prototype, "_slottedDisabledOptions");
 r([
-  d
+  u({ attribute: "enable-select-all", mode: "boolean" })
+], n.prototype, "enableSelectAll");
+r([
+  u({ attribute: "select-all-text" })
+], n.prototype, "selectAllText");
+r([
+  u({ attribute: "deselect-all-text" })
+], n.prototype, "deselectAllText");
+r([
+  p
+], n.prototype, "_selectAllOption");
+r([
+  p
 ], n.prototype, "_changeDescription");
 r([
-  d
+  p
 ], n.prototype, "_anchor");
-var ce = Object.defineProperty, _ = (s, t, e, a) => {
-  for (var i = void 0, l = s.length - 1, g; l >= 0; l--)
-    (g = s[l]) && (i = g(t, e, i) || i);
-  return i && ce(t, e, i), i;
+var ue = Object.defineProperty, m = (s, t, e, o) => {
+  for (var a = void 0, i = s.length - 1, g; i >= 0; i--)
+    (g = s[i]) && (a = g(t, e, a) || a);
+  return a && ue(t, e, a), a;
 };
 class b extends V(F) {
   constructor() {
@@ -706,25 +771,25 @@ class b extends V(F) {
     });
   }
 }
-_([
-  f
+m([
+  u
 ], b.prototype, "shape");
-_([
-  d
+m([
+  p
 ], b.prototype, "connotation");
-_([
-  f
+m([
+  u
 ], b.prototype, "label");
-_([
-  f({ mode: "boolean" })
+m([
+  u({ mode: "boolean" })
 ], b.prototype, "removable");
-_([
-  f({ mode: "boolean" })
+m([
+  u({ mode: "boolean" })
 ], b.prototype, "disabled");
-_([
-  d
+m([
+  p
 ], b.prototype, "hasIconPlaceholder");
-const pe = (s) => y(
+const ve = (s) => w(
   ["disabled", s.disabled],
   [`appearance-${s.appearance}`, !!s.appearance],
   [`shape-${s.shape}`, !!s.shape],
@@ -732,13 +797,13 @@ const pe = (s) => y(
   ["success", !!s.successText],
   ["has-highlighted-option", s._highlightedOptionIndex !== null]
 );
-function de() {
-  return p`
+function fe() {
+  return d`
 		<label for="control" class="label" id="label"> ${(s) => s.label} </label>
 	`;
 }
-function he() {
-  return p`
+function ge() {
+  return d`
 		<span
 			id="selection-count"
 			class="selection-count"
@@ -752,163 +817,178 @@ function he() {
 }
 const k = (s, t) => {
   const e = s.tagFor(b);
-  return p`
+  return d`
 		<div class="tag-wrapper">
 			<${e}
 				class="tag"
 				tabindex="-1"
-				data-index="${(a, i) => t(i).values.indexOf(a)}"
+				data-index="${(o, a) => t(a).values.indexOf(o)}"
 				removable
-				:label="${(a, i) => t(i)._tagLabelForValue(a)}"
-				:shape="${(a, i) => t(i).shape}"
-				:connotation="${(a, i) => t(i)._tagConnotationForValue(a)}"
-				?disabled="${(a, i) => t(i)._isTagDisabled(a)}"
-				@remove="${(a, i) => t(i)._onTagRemoved(a)}"
-				@keydown="${(a, i) => t(i)._onTagKeydown(i.event)}"
+				:label="${(o, a) => t(a)._tagLabelForValue(o)}"
+				:shape="${(o, a) => t(a).shape}"
+				:connotation="${(o, a) => t(a)._tagConnotationForValue(o)}"
+				?disabled="${(o, a) => t(a)._isTagDisabled(o)}"
+				@remove="${(o, a) => t(a)._onTagRemoved(o)}"
+				@keydown="${(o, a) => t(a)._onTagKeydown(a.event)}"
 				@mousedown="${() => !1}">
-				<slot slot="icon" name="${(a, i) => t(i)._tagIconSlotName(a)}"></slot>
+				<slot slot="icon" name="${(o, a) => t(a)._tagIconSlotName(o)}"></slot>
 			</${e}>
 		</div>
 	`;
 }, C = (s, t) => {
   const e = s.tagFor(b);
-  return p`
+  return d`
 		<${e}
 			class="tag"
 			tabindex="-1"
-			:label="${(a, i) => t(a, i)._numElidedTags.toString()}"
-			:shape="${(a, i) => t(a, i).shape}"
-			?disabled="${(a, i) => t(a, i).disabled}"
+			:label="${(o, a) => t(o, a)._numElidedTags.toString()}"
+			:shape="${(o, a) => t(o, a).shape}"
+			?disabled="${(o, a) => t(o, a).disabled}"
 			@mousedown="${() => !1}">
 		</${e}>
 	`;
 };
-function ue(s) {
-  const t = s.tagFor(z), e = s.tagFor(A), a = te(s), i = E(s), l = k(s, (o) => o.parent), g = k(
+function be(s) {
+  const t = s.tagFor(R), e = s.tagFor(H), o = se(s), a = z(s), i = k(s, (l) => l.parent), g = k(
     s,
-    (o) => o.parentContext.parent
-  ), h = C(s, (o, c) => o), u = C(
+    (l) => l.parentContext.parent
+  ), h = C(s, (l, c) => l), f = C(
     s,
-    (o, c) => c.parent
+    (l, c) => c.parent
   );
-  return p`
+  return d`
 		<div
-			class="fieldset ${pe}"
-			@click="${(o, c) => o._onFieldsetClick(c.event)}"
+			class="fieldset ${ve}"
+			@click="${(l, c) => l._onFieldsetClick(c.event)}"
 			${x("_anchor")}
 		>
-			${(o) => a(o.icon, oe.Slot)}
+			${(l) => o(l.icon, ie.Slot)}
 			<div class="content-area" ${x("_contentArea")}>
-				${w(
-    (o) => o._tagRows,
-    p`
+				${y(
+    (l) => l._tagRows,
+    d`
 						<div class="tag-row">
 							${v(
-      (o, c) => c.isFirst && c.parent._numElidedTags,
-      u
+      (l, c) => c.isFirst && c.parent._numElidedTags,
+      f
     )}
-							${w((o) => o, g)}
+							${y((l) => l, g)}
 						</div>
 					`,
     { positioning: !0 }
   )}
 				<div
-					class="tag-row ${(o) => y([
+					class="tag-row ${(l) => w([
     "contains-only-input",
-    o._tagRows.length > 0 && o._lastTagRow.length === 0
+    l._tagRows.length > 0 && l._lastTagRow.length === 0
   ])}"
 				>
 					${v(
-    (o) => o._tagRows.length === 0 && o._numElidedTags,
+    (l) => l._tagRows.length === 0 && l._numElidedTags,
     h
   )}
-					${w((o) => o._lastTagRow, l)}
+					${y((l) => l._lastTagRow, i)}
 					<input
 						id="control"
 						class="control"
 						autocomplete="off"
 						aria-controls="listbox"
-						aria-describedby="${(o) => o._feedbackDescribedBy} ${(o) => o.multiple && o.maxSelected && o.maxSelected >= 1 ? "selection-count" : null}"
-						${G({
+						aria-describedby="${(l) => l._feedbackDescribedBy} ${(l) => l.multiple && l.maxSelected && l.maxSelected >= 1 ? "selection-count" : null}"
+						${Y({
     role: "combobox",
     ariaAutoComplete: "list",
     ariaHasPopup: "listbox",
-    ariaExpanded: (o) => o.open
+    ariaExpanded: (l) => l.open
   })}
-						placeholder="${(o) => o.multiple && o.values.length ? "" : o.placeholder}"
+						placeholder="${(l) => l.multiple && l.values.length ? "" : l.placeholder}"
 						type="text"
-						?disabled="${(o) => o.disabled}"
-						:value="${(o) => o._inputValue}"
-						@input="${(o, c) => {
-    o._onInputInput(c.event), c.event.stopPropagation();
+						?disabled="${(l) => l.disabled}"
+						:value="${(l) => l._inputValue}"
+						@input="${(l, c) => {
+    l._onInputInput(c.event), c.event.stopPropagation();
   }}"
-						@change="${(o, c) => {
+						@change="${(l, c) => {
     c.event.stopPropagation();
   }}"
-						@focus="${(o, c) => o._onInputFocus(c.event)}"
-						@blur="${(o, c) => o._onInputBlur(c.event)}"
-						@keydown="${(o, c) => o._onInputKeydown(c.event)}"
+						@focus="${(l, c) => l._onInputFocus(c.event)}"
+						@blur="${(l, c) => l._onInputBlur(c.event)}"
+						@keydown="${(l, c) => l._onInputKeydown(c.event)}"
 						${x("_input")}
 					/>
 				</div>
 			</div>
 			<slot name="meta"></slot>
 			${v(
-    (o) => o._shouldShowClearButton,
-    p`<${t}
-					aria-label="${(o) => o.locale.searchableSelect.clearButtonLabel}"
-					@click="${(o) => o._onClearButtonClick()}"
+    (l) => l._shouldShowClearButton,
+    d`<${t}
+					aria-label="${(l) => l.locale.searchableSelect.clearButtonLabel}"
+					@click="${(l) => l._onClearButtonClick()}"
 					@mousedown="${() => !1}"
-					?disabled="${(o) => o.disabled}"
-					:shape="${(o) => o.shape}"
+					?disabled="${(l) => l.disabled}"
+					:shape="${(l) => l.shape}"
 					size="super-condensed"
 					icon="close-line"
 					appearance="ghost-light"
 					tabindex="0"
 				></${t}>`
   )}
-			<div @mousedown="${() => !1}" @click="${(o) => o._onChevronClick()}">
+			<div @mousedown="${() => !1}" @click="${(l) => l._onChevronClick()}">
 				${v(
-    (o) => o.loading,
-    p`<${e} indeterminate size="-6" aria-hidden="true"></${e}>`
+    (l) => l.loading,
+    d`<${e} indeterminate size="-6" aria-hidden="true"></${e}>`
   )}
-				${v((o) => !o.loading, i)}
+				${v((l) => !l.loading, a)}
 			</div>
 		</div>
 	`;
 }
-function ve(s) {
+function _e(s) {
   return s.open && s.fixedDropdown ? `--_searchable-select-fixed-width: ${Math.round(
     s.getBoundingClientRect().width
   )}px` : null;
 }
-function fe(s) {
+function me(s) {
+  const t = s.tagFor(W), e = s.tagFor(ne);
+  return d`
+    <${t}
+      data-select-all
+      tabindex="-1"
+      :text="${(o) => o._selectAllLabel}"
+      :selected="${(o) => o._isAllSelected}"
+      :_displayCheckmark="${() => !0}"
+      ?disabled="${(o) => o._selectableOptions.length === 0}"
+      ${x("_selectAllOption")}>
+    </${t}>
+		<${e} class="divider"></${e}>
+  `;
+}
+function xe(s) {
   const t = s.tagFor(L);
-  return p`
+  return d`
 		<div class="label-wrapper" ?hidden=${(e) => !e.label && !e._hasContextualHelp && !e._hasSelectionCount}>
 			${v(
     (e) => e.label || e._hasSelectionCount,
-    p`
+    d`
 					<div>
-						${v((e) => e.label, de())}
-						${v((e) => e._hasSelectionCount, he())}
+						${v((e) => e.label, fe())}
+						${v((e) => e._hasSelectionCount, ge())}
 					</div>
 				`
   )}
-			<slot name="contextual-help" ${O("_contextualHelpSlottedContent")}></slot>
+			<slot name="contextual-help" ${T("_contextualHelpSlottedContent")}></slot>
 		</div>
 		<span aria-live="assertive" aria-relevant="text" class="visually-hidden">
 			${(e) => e._changeDescription}
 		</span>
 		<div>
-			${ue(s)}
+			${be(s)}
 			<div class="popup-wrapper">
 				<${t}
 					:anchor="${(e) => e._anchor}"
 					:open="${(e) => e.open}"
 					class="popup"
 					placement="bottom-start"
-					style="${ve}"
+					style="${_e}"
 					strategy="${(e) => e.fixedDropdown ? "fixed" : "absolute"}">
 					<div
 						class="listbox"
@@ -916,34 +996,38 @@ function fe(s) {
 						aria-multiselectable="${(e) => e.multiple}"
 						aria-required="${(e) => e.required}"
 						${x("_listbox")}
-						@click="${(e, a) => e._onListboxClick(a.event)}"
+						@click="${(e, o) => e._onListboxClick(o.event)}"
 						@mousedown="${() => !1}"
 					>
+						${v(
+    (e) => e.enableSelectAll && e.multiple && !e.maxSelected,
+    me(s)
+  )}
 						<slot
-							${O({
-    filter: ae,
+							${T({
+    filter: B,
     flatten: !0,
     property: "_slottedOptions"
   })}>
 						</slot>
 						${v(
     (e) => e._filteredOptions.length === 0,
-    p`<div class="empty-message">
+    d`<div class="empty-message">
 								${v(
       (e) => e.loading,
-      p`<slot name="loading-options">
+      d`<slot name="loading-options">
 										${(e) => e.locale.searchableSelect.loadingOptionsMessage}
 									</slot>`
     )}
 								${v(
       (e) => !e.loading && e.searchText === "",
-      p`<slot name="no-options">
+      d`<slot name="no-options">
 										${(e) => e.locale.searchableSelect.noOptionsMessage}
 									</slot>`
     )}
 								${v(
       (e) => !e.loading && e.searchText !== "",
-      p`<slot name="no-matches">
+      d`<slot name="no-matches">
 										${(e) => e.locale.searchableSelect.noMatchesMessage}
 									</slot>`
     )}
@@ -955,27 +1039,27 @@ function fe(s) {
 		</div>
 	`;
 }
-const ge = (s) => {
-  const t = s.tagFor(b);
-  return p`
+const ye = (s) => {
+  const t = s.tagFor(b, !0);
+  return d`
 		<template
 			:_optionTagTagName="${() => t}"
-			@mousedown="${(e, a) => e._onMouseDown(a.event)}"
+			@mousedown="${(e, o) => e._onMouseDown(o.event)}"
 		>
 			<div class="control-wrapper">
-				${fe(s)} ${(e) => e._getFeedbackTemplate(s)}
+				${xe(s)} ${(e) => e._getFeedbackTemplate(s)}
 			</div>
 		</template>
 	`;
-}, be = ({ shape: s, connotation: t, disabled: e, removable: a }) => y(
+}, we = ({ shape: s, connotation: t, disabled: e, removable: o }) => w(
   "base",
   ["disabled", e],
-  ["removable", a],
+  ["removable", o],
   [`shape-${s}`, !!s],
   [`connotation-${t}`, !!t]
 );
-function me(s) {
-  return p`
+function $e(s) {
+  return d`
 		<span
 			class="remove-button"
 			aria-label="${(t) => t.locale.searchableSelect.removeTagButtonLabel(t.label)}"
@@ -987,48 +1071,50 @@ function me(s) {
 		</span>
 	`;
 }
-const _e = (s) => {
-  const t = s.tagFor(B);
-  return p`<span class="${be}" aria-disabled="${(e) => e.disabled}">
+const Oe = (s) => {
+  const t = s.tagFor(M);
+  return d`<span class="${we}" aria-disabled="${(e) => e.disabled}">
 		<slot name="icon" aria-hidden="true">
 			${v(
     (e) => e.hasIconPlaceholder,
-    p`<div class="icon-placeholder"></div>`
+    d`<div class="icon-placeholder"></div>`
   )}
 		</slot>
 		${v(
     (e) => e.label,
-    (e) => p`<span class="label">${e.label}</span>`
+    (e) => d`<span class="label">${e.label}</span>`
   )}
-		${v((e) => e.removable, me(t))}
+		${v((e) => e.removable, $e(t))}
 	</span>`;
-}, xe = R(
+}, Te = D(
   "option-tag",
   b,
-  _e,
+  Oe,
   [I],
   {
-    styles: [se],
+    styles: [ce],
     shadowOptions: {
       delegatesFocus: !0
     }
   }
-), we = R(
+), Se = D(
   "searchable-select",
   n,
-  ge,
+  ye,
   [
+    E,
     P,
-    M,
     I,
-    xe,
-    W,
-    j
+    Te,
+    K,
+    G,
+    N,
+    J
   ],
   {
-    styles: ie
+    styles: re
   }
-), ye = H(
-  we
+), ke = q(
+  Se
 );
-ye();
+ke();