@vonage/vivid 5.15.1 → 5.17.0

package/searchable-select/index.js

@@ -1,1120 +1,705 @@
-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/definition12.js";
-import { P as H, p as K } from "../bundled/definition16.js";
-import { V as F, O, U as q, a as u, n as A, o as p, h as d, c as U, d as D } from "../bundled/vivid-element.js";
-import { W as j, f as G } from "../bundled/mixins.js";
-import { d as J } from "../bundled/definition15.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 { D as ne } from "../bundled/divider.js";
-import { w as v } from "../bundled/when.js";
-import { s as T } from "../bundled/slotted.js";
-import { r as x } from "../bundled/ref.js";
-import { r as y } from "../bundled/repeat.js";
-import { c as w } from "../bundled/class-names.js";
-const re = ".label-wrapper{display:flex;flex-direction:row;align-items:center;gap:var(--label-wrapper-gap, 4px)}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 1 auto}.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(--focus-stroke-color, 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(--focus-stroke-color, 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(--focus-stroke-color, 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}", 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(--focus-stroke-color, 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;
+import { t as e } from "../bundled/localized.js";
+import { O as t, T as n, d as r, l as i, o as a, s as o, t as s, u as c, w as l } from "../bundled/vivid-element.js";
+import { n as u } from "../bundled/repeat.js";
+import { t as d } from "../bundled/ref.js";
+import { t as f } from "../bundled/when.js";
+import { t as p } from "../bundled/slotted.js";
+import { r as m, t as h } from "../bundled/definition2.js";
+import { t as g } from "../bundled/decorate.js";
+import { a as _, i as ee, n as v } from "../bundled/affix.js";
+import { t as y } from "../bundled/form-element.js";
+import { t as b } from "../bundled/with-success-text.js";
+import { t as x } from "../bundled/with-error-text.js";
+import { t as S } from "../bundled/with-contextual-help.js";
+import { n as C, t as w } from "../bundled/delegates-aria.js";
+import { t as T } from "../bundled/class-names.js";
+import { r as E, t as D } from "../bundled/definition5.js";
+import { n as O } from "../bundled/form-associated.js";
+import { i as k, r as A, t as j } from "../bundled/definition6.js";
+import { i as M, t as N } from "../bundled/definition8.js";
+import { a as P, t as F } from "../bundled/mixins.js";
+import { t as I } from "../bundled/scrollIntoView.js";
+import { i as L, r as R, t as te } from "../bundled/definition17.js";
+import { t as z } from "../bundled/definition19.js";
+import { t as B } from "../bundled/divider.js";
+//#region src/lib/searchable-select/searchable-select.scss?inline
+var V = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}.chevron{font:var(--vvd-typography-base-extended);flex-shrink:0;transition:transform .2s;display:flex;transform:rotate(0)}: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{--_low-ink-color:var(--vvd-color-neutral-600);inline-size:300px;display:inline-block}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{flex-direction:column;gap:4px;display:flex}.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));--_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{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);justify-content:space-between;align-items:center;gap:8px;padding-block:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s;display:flex}@supports selector(:has(*)){.fieldset:not(.has-highlighted-option):has(input:focus){box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,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(--focus-stroke-color,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{flex-direction:column;flex:1;gap:8px;min-block-size:24px;display:flex;overflow:hidden}.tag-row{gap:8px;inline-size:100%;display:flex}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;block-size:24px;font:var(--vvd-typography-base);background:0 0;border:none;outline:none;flex:1;min-inline-size:min(100px,40%);max-inline-size:100%}.contains-only-input input:not(:focus){opacity:0;pointer-events:none;block-size:0;inline-size:0;min-inline-size:0;position:absolute}.listbox{max-block-size:var(--searchable-select-height,408px);flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}.empty-message{color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);text-align:center;justify-content:center;align-items:center;min-block-size:40px;display:flex}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width,100%)}slot[name=icon]{font-size:20px}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}::slotted([data-vvd-component=option][data-highlighted]),[data-select-all][data-highlighted]{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,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;border-radius:8px}.divider{margin-block:10px;margin-inline:12px}", H = ".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{box-sizing:border-box;background-color:var(--fill-color);block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);font:var(--vvd-typography-base-bold);user-select:none;vertical-align:middle;align-items:center;column-gap:8px;max-inline-size:100%;padding-inline:8px;display:inline-flex;position:relative}.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{text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%;overflow:hidden}slot[name=icon]{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 1.5)}.remove-button{border-radius:inherit;cursor:pointer;outline:none;align-items:center;display:flex}.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(--focus-stroke-color,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));z-index:1;border-radius:inherit;content:\"\";pointer-events:none;display:block;position:absolute;inset:0}", U = 8, W = 100, G = 10, K = (e) => typeof e == "string", q = class extends S(F(x(b(y(w(v(e(O(s))))))))) {
+	constructor(...e) {
+		super(...e), 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._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 = (e, t) => {
+			K(e) || super.setFormValue(e, t);
+		}, this._changeDescription = "";
+	}
+	openChanged() {
+		this.open || this.#u(null);
+	}
+	valuesChanged() {
+		if (this._areOptionsInitialized) {
+			if (!this.multiple && this.values.length > 1) {
+				this.values = [this.values[0]];
+				return;
+			}
+			if (this.values.some((e) => !this.#n(e))) {
+				this.values = this.values.filter((e) => this.#n(e));
+				return;
+			}
+			this.value = this.values.length ? this.values[0] : "", this.#T(), this.#i(), this.$fastController.isConnected && this.#b(), this.#D();
+		}
+	}
+	#e(e) {
+		this.values = e, this.$emit("change", void 0, { bubbles: !1 }), this.$emit("input", void 0, { bubbles: !1 });
+	}
+	#t(e) {
+		let t = new Set(this.values), n = new Set(e);
+		this.values = [...this.values].filter((e) => n.has(e)).concat([...e].filter((e) => !t.has(e)));
+	}
+	initialValuesChanged() {
+		this.dirtyValue ||= (this.values = this.initialValues, !1);
+	}
+	#n(e) {
+		return this._slottedOptions.some((t) => t.value === e);
+	}
+	valueChanged(e, t) {
+		if (super.valueChanged(e, t), !this._areOptionsInitialized) return;
+		let n = this._slottedOptions.some((e) => e.value === t);
+		this.values[0] !== t && (this.values = n ? [t] : []);
+	}
+	get selectedIndex() {
+		return this.values.length ? this._slottedOptions.findIndex((e) => e.value === this.values[0]) : -1;
+	}
+	set selectedIndex(e) {
+		this.value = this._slottedOptions[e]?.value ?? "";
+	}
+	get options() {
+		return [...this._slottedOptions];
+	}
+	get selectedOptions() {
+		return this._slottedOptions.filter((e) => this.values.includes(e.value));
+	}
+	_currentSearchTextChanged() {
+		this.#l(), this.$emit("search-text-change", void 0, {
+			bubbles: !1,
+			composed: !1
+		});
+	}
+	get searchText() {
+		return this._currentSearchText ?? "";
+	}
+	get _inputValue() {
+		return this._currentSearchText ?? (!this.multiple && this.value !== "" ? this.#v(this.value) ?? "" : "");
+	}
+	_onInputInput(e) {
+		this._currentSearchText = e.target.value;
+	}
+	_onInputFocus(e) {
+		this.#l();
+	}
+	_onInputBlur(e) {
+		this.open = !1, this._currentSearchText = null, this._changeDescription = "";
+	}
+	_onInputKeydown(e) {
+		if (e.ctrlKey || e.shiftKey) return !0;
+		switch (e.key) {
+			case "Enter": return this.#d(), this._inputValue === "" && (this.open = !this.open), !1;
+			case "Escape":
+				this.open = !1;
+				break;
+			case "Home":
+				if (!this.open) {
+					this.open = !0;
+					break;
+				}
+				return this.#f(), !1;
+			case "End":
+				if (!this.open) {
+					this.open = !0;
+					break;
+				}
+				return this.#p(), !1;
+			case "PageUp":
+				if (!this.open) {
+					this.open = !0;
+					break;
+				}
+				return this.#m(), !1;
+			case "PageDown":
+				if (!this.open) {
+					this.open = !0;
+					break;
+				}
+				return this.#h(), !1;
+			case "ArrowUp":
+				if (!this.open) {
+					this.open = !0;
+					break;
+				}
+				return this.#g(), !1;
+			case "ArrowDown":
+				if (!this.open) {
+					this.open = !0;
+					break;
+				}
+				return this.#_(), !1;
+			case "ArrowLeft": return this.multiple && this._inputValue === "" && this.values.length && !this.externalTags ? (this.#x(this.#S(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: return this.open ||= !0, !0;
+		}
+		return !0;
+	}
+	_slottedOptionsChanged(e, t) {
+		let n = !!this.querySelectorAll(":not([slot])").length;
+		if (!t.length && n) return;
+		if (this._areOptionsInitialized = !0, e) {
+			this._slottedDisabledOptions = [];
+			for (let t of e) l.getNotifier(t).unsubscribe(this.#r, "selected");
+		}
+		/* v8 ignore else -- @preserve */
+		if (t) for (let e of t) e._displayCheckmark = !0, l.getNotifier(e).subscribe(this.#r, "selected");
+		let r = [];
+		for (let e of this._slottedOptions) (e.selected || e.value === this.value || this.values.includes(e.value)) && r.push(e.value), e.disabled && this._slottedDisabledOptions.push(e);
+		this.#t(r), this.#l(), this.#T();
+	}
+	#r = { handleChange: (e, t) => {
+		e.selected && !this.values.includes(e.value) ? this.values = [...this.values, e.value] : !e.selected && this.values.includes(e.value) && (this.values = this.values.filter((t) => t !== e.value));
+	} };
+	#i() {
+		for (let e of this._slottedOptions) e.selected = this.values.includes(e.value), this.#c(e);
+	}
+	#a(e) {
+		let t = e.value, n, r = !1, i = !this.values.includes(t);
+		this.multiple ? (n = i ? [...this.values, t] : this.values.filter((e) => e !== t), r = !0) : (i ? (n = [t], r = !0) : n = [], this.open = !1), this.#e(n), this._changeDescription = `${i ? this.locale.searchableSelect.optionSelectedMessage(e._getAccessibleName()) : this.locale.searchableSelect.optionDeselectedMessage(e._getAccessibleName())} ${this.multiple && this.maxSelected && this.maxSelected >= 1 ? this.locale.searchableSelect.maxSelectedMessage(this.values.length, this.maxSelected) : ""}`, r && (this._currentSearchText = null);
+	}
+	#o = /* @__PURE__ */ new Map();
+	#s(e) {
+		return e.querySelector("[slot=\"tag-icon\"]");
+	}
+	_tagIconSlotName(e) {
+		return `_tag-icon-${this.values.indexOf(e)}`;
+	}
+	#c(e) {
+		if (e.selected && this.#s(e)) {
+			let t = this.#o.get(e);
+			t || (t = this.#s(e).cloneNode(!0), this.#o.set(e, t)), t.slot = this._tagIconSlotName(e.value), this.appendChild(t);
+		} else {
+			let t = this.#o.get(e);
+			t && (t.remove(), this.#o.delete(e));
+		}
+	}
+	optionFilterChanged() {
+		this.#l();
+	}
+	loadingChanged(e, t) {
+		this._changeDescription = this.locale.searchableSelect.loadingOptionsMessage, e && !t && (this._changeDescription = "");
+	}
+	#l() {
+		let e = [], t = this.optionFilter ?? ((e, t) => e.text.toLowerCase().includes(t.toLowerCase()));
+		for (let n of this._slottedOptions ?? []) {
+			n._vvdSearchText = this.searchText;
+			let r = !this.searchText || t(n, this.searchText);
+			n._isNotMatching = !r, !n.hidden && r && e.push(n);
+		}
+		this.#u(null), this._filteredOptions = e;
+		let n = e.filter((e) => !e.disabled);
+		this._selectAllOption ? this._filteredEnabledOptions = [this._selectAllOption, ...n] : this._filteredEnabledOptions = n;
+	}
+	#u(e) {
+		if (typeof this._highlightedOptionIndex == "number") {
+			let e = this._filteredEnabledOptions[this._highlightedOptionIndex];
+			e._highlighted = !1, e.removeAttribute("data-highlighted");
+		}
+		if (typeof e == "number" && (e = this._filteredEnabledOptions.length ? Math.max(0, Math.min(this._filteredEnabledOptions.length - 1, e)) : null), this._highlightedOptionIndex = e, typeof this._highlightedOptionIndex == "number") {
+			let e = this._filteredEnabledOptions[this._highlightedOptionIndex];
+			e._highlighted = !0, e.setAttribute("data-highlighted", ""), I(e, this._listbox, "nearest"), this._changeDescription = this.locale.searchableSelect.optionFocusedMessage(e._getAccessibleName(), this._highlightedOptionIndex + 1, this._filteredEnabledOptions.length, e.selected);
+		}
+	}
+	#d() {
+		if (this._highlightedOptionIndex === null) return;
+		let e = this._filteredEnabledOptions[this._highlightedOptionIndex];
+		if (e.getAttribute("data-select-all") !== null) {
+			this._toggleSelectAll();
+			return;
+		}
+		this.#a(e);
+	}
+	#f() {
+		this.#u(0);
+	}
+	#p() {
+		this.#u(this._filteredEnabledOptions.length - 1);
+	}
+	#m() {
+		this.#u((this._highlightedOptionIndex ?? this._filteredEnabledOptions.length) - G);
+	}
+	#h() {
+		this.#u((this._highlightedOptionIndex ?? -1) + G);
+	}
+	#g() {
+		this.#u((this._highlightedOptionIndex ?? this._filteredEnabledOptions.length) - 1);
+	}
+	#_() {
+		this.#u((this._highlightedOptionIndex ?? -1) + 1);
+	}
+	_tagLabelForValue(e) {
+		return this._slottedOptions.find((t) => t.value === e).label;
+	}
+	_tagConnotationForValue(e) {
+		return this._slottedOptions.find((t) => t.value === e).tagConnotation;
+	}
+	_isTagDisabled(e) {
+		let t = this._slottedOptions.find((t) => t.value === e);
+		return this.disabled || t.disabled;
+	}
+	#v(e) {
+		return this._slottedOptions?.find((t) => t.value === e)?.label;
+	}
+	#y(e, t, n) {
+		let r = document.createElement(this._optionTagTagName);
+		r.label = e, r.removable = t, r.style.cssText = "position: absolute; visibility: hidden;", r.hasIconPlaceholder = n, this.shadowRoot.appendChild(r);
+		let i = r.getBoundingClientRect().width;
+		return r.remove(), i;
+	}
+	#b() {
+		if (!this.multiple) {
+			this._numElidedTags = 0, this._tagRows = [], this._lastTagRow = [];
+			return;
+		}
+		if (this.externalTags) {
+			this._numElidedTags = this.values.length, this._tagRows = [], this._lastTagRow = [];
+			return;
+		}
+		let e = this._contentArea.getBoundingClientRect().width, t = [[]], n = 0, r = W, i;
+		for (i = this.values.length - 1; i >= 0; i--) {
+			let a = this.maxLines && n === this.maxLines - 1, o = this.#y(this._tagLabelForValue(this.values[i]), !0, this.#s(this.selectedOptions[i]) !== null), s = {
+				value: this.values[i],
+				width: o
+			}, c = 0;
+			if (a) {
+				let e = i;
+				e && (c = U + this.#y(e.toString(), !1, !1));
+			}
+			if (r + U + o + c > e) {
+				if (a) if (i === this.values.length - 1) t[n].unshift(s), r += U + o;
+				else break;
+				else t.push([]), n++, t[n].unshift(s), r = o;
+				continue;
+			}
+			t[n].unshift(s), r += U + o;
+		}
+		this._numElidedTags = i + 1, t.reverse();
+		for (let n = 0; n < t.length - 1; n++) {
+			let r = t[n].map((e) => e.width).reduce((e, t) => e + t, 0) + (t[n].length - 1) * U;
+			for (n === 0 && this._numElidedTags && (r += U + this.#y(this._numElidedTags.toString(), !1, !1)); t[n + 1].length && r + U + t[n + 1][0].width <= e;) {
+				let e = t[n + 1].shift();
+				t[n].push(e), r += U + e.width;
+			}
+		}
+		let a = t.map((e) => e.map((e) => e.value));
+		this._tagRows = a.slice(0, -1), this._lastTagRow = a.slice(-1)[0];
+	}
+	_onTagRemoved(e) {
+		this.#e(this.values.filter((t) => t !== e)), this.#l();
+	}
+	_onTagKeydown(e) {
+		let n = parseInt(e.target.dataset.index);
+		switch (e.key) {
+			case "Backspace":
+			case "Delete":
+			case "Enter":
+			case " ":
+				this._onTagRemoved(this.values[n]), t.process(), this.#x(this.#w(n));
+				break;
+			case "ArrowLeft":
+				this.#x(this.#S(n) ?? n);
+				break;
+			case "ArrowRight":
+				this.#x(this.#C(n));
+				break;
+		}
+		return !0;
+	}
+	#x(e) {
+		e === null ? this._input.focus() : this.shadowRoot.querySelector(`[data-index="${e}"]`)?.focus();
+	}
+	#S(e) {
+		if (!this.values.length) return null;
+		for (let t = e - 1; t >= 0; t--) if (!this._isTagDisabled(this.values[t])) return t;
+		return null;
+	}
+	#C(e) {
+		if (!this.values.length) return null;
+		for (let t = e + 1; t < this.values.length; t++) if (!this._isTagDisabled(this.values[t])) return t;
+		return null;
+	}
+	#w(e) {
+		return this.#C(e - 1) ?? this.#S(e);
+	}
+	_onListboxClick(e) {
+		if (this.disabled) return;
+		let t = e.target.closest("option,[role=option],[data-vvd-component=option]");
+		if (t?.getAttribute("data-select-all") !== null) {
+			this._toggleSelectAll();
+			return;
+		}
+		t && !t.disabled && this.#a(t);
+	}
+	get _shouldShowClearButton() {
+		return this.clearable && this.values.length > 0;
+	}
+	_onClearButtonClick() {
+		this.#e(this.selectedOptions.filter((e) => e.disabled).map((e) => e.value));
+	}
+	maxSelectedChanged() {
+		this.#T();
+	}
+	#T() {
+		if (!this.multiple || !this._slottedOptions || typeof this.maxSelected != "number" || this.maxSelected <= 0) return;
+		let e = this._slottedOptions.filter((e) => !this._slottedDisabledOptions.includes(e));
+		if (this.values.length >= this.maxSelected) {
+			let t = e.filter((e) => !this.selectedOptions.includes(e));
+			for (let e of t) e.disabled = !0;
+		} else for (let t of e) t.disabled = !1;
+	}
+	get _hasSelectionCount() {
+		return this.multiple && this.maxSelected && this.maxSelected >= 1;
+	}
+	get _selectableOptions() {
+		return this._slottedOptions?.filter((e) => !this._slottedDisabledOptions.includes(e) && !e.disabled) ?? [];
+	}
+	get _selectAllLabel() {
+		return this._isAllSelected ? this.deselectAllText ?? this.locale.searchableSelect.deselectAllLabel : this.selectAllText ?? this.locale.searchableSelect.selectAllLabel;
+	}
+	get _isAllSelected() {
+		let e = this.values;
+		if (!this.multiple || !this._slottedOptions) return !1;
+		let t = this._selectableOptions;
+		if (t.length === 0) return !1;
+		let n = new Set(e);
+		return t.every((e) => n.has(e.value));
+	}
+	_toggleSelectAll() {
+		let e = this._selectableOptions.map((e) => e.value);
+		if (this._isAllSelected) {
+			let t = this.values.filter((t) => !e.includes(t));
+			this.#e(t), this._changeDescription = this.locale.searchableSelect.deselectedAllMessage;
+			return;
+		}
+		let t = e.filter((e) => !this.values.includes(e)), n = [...this.values, ...t];
+		this.#e(n), this._changeDescription = this.locale.searchableSelect.selectedAllMessage;
+	}
+	#E() {
+		return this.initialValues.length ? this.initialValues : this.initialValue ? [this.initialValue] : [];
+	}
+	nameChanged(e, t) {
+		super.nameChanged(e, t), this.#D();
+	}
+	#D() {
+		if (!this.name) this.setFormValue(null);
+		else {
+			let e = new FormData();
+			for (let t of this.values) e.append(this.name, t);
+			this.setFormValue(e);
+		}
+	}
+	formResetCallback() {
+		super.formResetCallback(), this.#e(this.#E());
+	}
+	#O = new ResizeObserver(() => {
+		this.#b();
+	});
+	_onFieldsetClick(e) {
+		this.disabled || e.defaultPrevented || (this._input.focus(), this.open = !0);
+	}
+	_onChevronClick() {
+		return this.open ? (this.open = !1, !1) : !0;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.values.length || (this.values = this.#E()), this.#O.observe(this._contentArea);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.#O.disconnect();
+	}
+	validate() {
+		super.validate(this._input ?? void 0);
+	}
+	focus(e) {
+		this._input?.focus(e);
+	}
+	_onMouseDown(e) {
+		let t = e.composedPath()[0];
+		return !e.defaultPrevented && t !== this._input && !this._isFromContextualHelp(e) ? (this._input.focus(), !1) : !0;
+	}
 };
-const _ = 8, pe = 100, S = 10, he = (s) => typeof s == "string";
-class n extends ee(
-  j(
-    te(
-      ae(
-        oe(
-          X(
-            le(V(Z(F)))
-          )
-        )
-      )
-    )
-  )
-) {
-  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((o) => o !== t.value));
-      }
-    }, 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();
-    });
-  }
-  /**
-   * @internal
-   */
-  openChanged() {
-    this.open || this.#e(null);
-  }
-  /**
-   * @internal
-   */
-  valuesChanged() {
-    if (this._areOptionsInitialized) {
-      if (!this.multiple && this.values.length > 1) {
-        this.values = [this.values[0]];
-        return;
-      }
-      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.#_(), this.$fastController.isConnected && this.#u(), this.#g();
-    }
-  }
-  #t(t) {
-    this.values = t, this.$emit("change", void 0, {
-      bubbles: !1
-    }), this.$emit("input", void 0, {
-      bubbles: !1
-    });
-  }
-  #b(t) {
-    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
-   */
-  initialValuesChanged() {
-    this.dirtyValue || (this.values = this.initialValues, this.dirtyValue = !1);
-  }
-  #p(t) {
-    return this._slottedOptions.some((e) => e.value === t);
-  }
-  /**
-   * @internal
-   */
-  valueChanged(t, e) {
-    if (super.valueChanged(t, e), !this._areOptionsInitialized)
-      return;
-    const o = this._slottedOptions.some(
-      (a) => a.value === e
-    );
-    this.values[0] !== e && (this.values = o ? [e] : []);
-  }
-  get selectedIndex() {
-    return this.values.length ? this._slottedOptions.findIndex(
-      (t) => t.value === this.values[0]
-    ) : -1;
-  }
-  set selectedIndex(t) {
-    this.value = this._slottedOptions[t]?.value ?? "";
-  }
-  get options() {
-    return [...this._slottedOptions];
-  }
-  get selectedOptions() {
-    return this._slottedOptions.filter(
-      (t) => this.values.includes(t.value)
-    );
-  }
-  /**
-   * @internal
-   */
-  _currentSearchTextChanged() {
-    this.#o(), this.$emit("search-text-change", void 0, {
-      bubbles: !1,
-      composed: !1
-    });
-  }
-  /**
-   * The current search text of the component.
-   */
-  get searchText() {
-    return this._currentSearchText ?? "";
-  }
-  /**
-   * @internal
-   */
-  get _inputValue() {
-    return this._currentSearchText ?? (!this.multiple && this.value !== "" ? this.#k(this.value) ?? "" : "");
-  }
-  /**
-   * @internal
-   */
-  _onInputInput(t) {
-    this._currentSearchText = t.target.value;
-  }
-  /**
-   * @internal
-   */
-  _onInputFocus(t) {
-    this.#o();
-  }
-  /**
-   * @internal
-   */
-  _onInputBlur(t) {
-    this.open = !1, this._currentSearchText = null, this._changeDescription = "";
-  }
-  /**
-   * @internal
-   */
-  _onInputKeydown(t) {
-    if (t.ctrlKey || t.shiftKey)
-      return !0;
-    switch (t.key) {
-      case "Enter":
-        return this.#x(), this._inputValue === "" && (this.open = !this.open), !1;
-      case "Escape":
-        this.open = !1;
-        break;
-      case "Home":
-        if (!this.open) {
-          this.open = !0;
-          break;
-        }
-        return this.#y(), !1;
-      case "End":
-        if (!this.open) {
-          this.open = !0;
-          break;
-        }
-        return this.#w(), !1;
-      case "PageUp":
-        if (!this.open) {
-          this.open = !0;
-          break;
-        }
-        return this.#$(), !1;
-      case "PageDown":
-        if (!this.open) {
-          this.open = !0;
-          break;
-        }
-        return this.#O(), !1;
-      case "ArrowUp":
-        if (!this.open) {
-          this.open = !0;
-          break;
-        }
-        return this.#T(), !1;
-      case "ArrowDown":
-        if (!this.open) {
-          this.open = !0;
-          break;
-        }
-        return this.#S(), !1;
-      case "ArrowLeft":
-        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:
-        return this.open || (this.open = !0), !0;
-    }
-    return !0;
-  }
-  /**
-   * @internal
-   */
-  _slottedOptionsChanged(t, e) {
-    const o = !!this.querySelectorAll(":not([slot])").length;
-    if (!e.length && o)
-      return;
-    if (this._areOptionsInitialized = !0, t) {
-      this._slottedDisabledOptions = [];
-      for (const i of t)
-        O.getNotifier(i).unsubscribe(this.#s, "selected");
-    }
-    if (e)
-      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;
-  #_() {
-    for (const t of this._slottedOptions)
-      t.selected = this.values.includes(t.value), this.#m(t);
-  }
-  #h(t) {
-    const e = t.value;
-    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()
-    ), h = this.multiple && this.maxSelected && this.maxSelected >= 1 ? this.locale.searchableSelect.maxSelectedMessage(
-      this.values.length,
-      this.maxSelected
-    ) : "";
-    this._changeDescription = `${g} ${h}`, a && (this._currentSearchText = null);
-  }
-  #a;
-  #i(t) {
-    return t.querySelector('[slot="tag-icon"]');
-  }
-  /**
-   * @internal
-   */
-  _tagIconSlotName(t) {
-    return `_tag-icon-${this.values.indexOf(t)}`;
-  }
-  #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.#a.get(t);
-      e && (e.remove(), this.#a.delete(t));
-    }
-  }
-  /**
-   * @internal
-   */
-  optionFilterChanged() {
-    this.#o();
-  }
-  /**
-   * @internal
-   */
-  loadingChanged(t, e) {
-    this._changeDescription = this.locale.searchableSelect.loadingOptionsMessage, t && !e && (this._changeDescription = "");
-  }
-  #o() {
-    const t = [], e = this.optionFilter ?? ((a, i) => a.text.toLowerCase().includes(i.toLowerCase()));
-    for (const a of this._slottedOptions ?? []) {
-      a._vvdSearchText = this.searchText;
-      const i = !this.searchText || e(a, this.searchText);
-      a._isNotMatching = !i, !a.hidden && i && t.push(a);
-    }
-    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") {
-      const e = this._filteredEnabledOptions[this._highlightedOptionIndex];
-      e._highlighted = !1, e.removeAttribute("data-highlighted");
-    }
-    if (typeof t == "number" && (this._filteredEnabledOptions.length ? t = Math.max(
-      0,
-      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._getAccessibleName(),
-        this._highlightedOptionIndex + 1,
-        this._filteredEnabledOptions.length,
-        e.selected
-      );
-    }
-  }
-  #x() {
-    if (this._highlightedOptionIndex === null)
-      return;
-    const t = this._filteredEnabledOptions[this._highlightedOptionIndex];
-    if (t.getAttribute("data-select-all") !== null) {
-      this._toggleSelectAll();
-      return;
-    }
-    this.#h(t);
-  }
-  #y() {
-    this.#e(0);
-  }
-  #w() {
-    this.#e(
-      this._filteredEnabledOptions.length - 1
-    );
-  }
-  #$() {
-    this.#e(
-      (this._highlightedOptionIndex ?? this._filteredEnabledOptions.length) - S
-    );
-  }
-  #O() {
-    this.#e(
-      (this._highlightedOptionIndex ?? -1) + S
-    );
-  }
-  #T() {
-    this.#e(
-      (this._highlightedOptionIndex ?? this._filteredEnabledOptions.length) - 1
-    );
-  }
-  #S() {
-    this.#e(
-      (this._highlightedOptionIndex ?? -1) + 1
-    );
-  }
-  // --- Tags ---
-  /**
-   * @internal
-   */
-  _tagLabelForValue(t) {
-    return this._slottedOptions.find(
-      (o) => o.value === t
-    ).label;
-  }
-  /**
-   * @internal
-   */
-  _tagConnotationForValue(t) {
-    return this._slottedOptions.find(
-      (o) => o.value === t
-    ).tagConnotation;
-  }
-  /**
-   * @internal
-   */
-  _isTagDisabled(t) {
-    const e = this._slottedOptions.find(
-      (o) => o.value === t
-    );
-    return this.disabled || e.disabled;
-  }
-  #k(t) {
-    return this._slottedOptions?.find(
-      (o) => o.value === t
-    )?.label;
-  }
-  /**
-   * @internal
-   */
-  #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) {
-      this._numElidedTags = 0, this._tagRows = [], this._lastTagRow = [];
-      return;
-    }
-    if (this.externalTags) {
-      this._numElidedTags = this.values.length, this._tagRows = [], this._lastTagRow = [];
-      return;
-    }
-    const t = this._contentArea.getBoundingClientRect().width, e = [[]];
-    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.#i(this.selectedOptions[i]) !== null
-      ), l = {
-        value: this.values[i],
-        width: f
-      };
-      let c = 0;
-      if (h) {
-        const $ = i;
-        $ && (c = _ + this.#n($.toString(), !1, !1));
-      }
-      if (a + _ + f + c > t) {
-        if (h)
-          if (i === this.values.length - 1)
-            e[o].unshift(l), a += _ + f;
-          else
-            break;
-        else
-          e.push([]), o++, e[o].unshift(l), a = f;
-        continue;
-      }
-      e[o].unshift(l), a += _ + f;
-    }
-    this._numElidedTags = i + 1, e.reverse();
-    for (let h = 0; h < e.length - 1; h++) {
-      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((f) => f.value));
-    this._tagRows = g.slice(0, -1), this._lastTagRow = g.slice(-1)[0];
-  }
-  /**
-   * @internal
-   */
-  _onTagRemoved(t) {
-    this.#t(
-      this.values.filter((e) => e !== t)
-    ), this.#o();
-  }
-  /**
-   * @internal
-   */
-  _onTagKeydown(t) {
-    const e = parseInt(t.target.dataset.index);
-    switch (t.key) {
-      case "Backspace":
-      case "Delete":
-      case "Enter":
-      case " ": {
-        this._onTagRemoved(this.values[e]), q.process(), this.#l(this.#C(e));
-        break;
-      }
-      case "ArrowLeft":
-        this.#l(this.#r(e) ?? e);
-        break;
-      case "ArrowRight":
-        this.#l(this.#v(e));
-        break;
-    }
-    return !0;
-  }
-  #l(t) {
-    t === null ? this._input.focus() : this.shadowRoot.querySelector(`[data-index="${t}"]`)?.focus();
-  }
-  #r(t) {
-    if (!this.values.length)
-      return null;
-    for (let e = t - 1; e >= 0; e--)
-      if (!this._isTagDisabled(this.values[e]))
-        return e;
-    return null;
-  }
-  #v(t) {
-    if (!this.values.length)
-      return null;
-    for (let e = t + 1; e < this.values.length; e++)
-      if (!this._isTagDisabled(this.values[e]))
-        return e;
-    return null;
-  }
-  #C(t) {
-    return this.#v(t - 1) ?? this.#r(t);
-  }
-  /**
-   * @internal
-   */
-  _onListboxClick(t) {
-    if (this.disabled)
-      return;
-    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);
-  }
-  /**
-   * @internal
-   */
-  get _shouldShowClearButton() {
-    return this.clearable && this.values.length > 0;
-  }
-  /**
-   * @internal
-   */
-  _onClearButtonClick() {
-    this.#t(
-      this.selectedOptions.filter((t) => t.disabled).map((t) => t.value)
-    );
-  }
-  /**
-   * @internal
-   */
-  maxSelectedChanged() {
-    this.#c();
-  }
-  #c() {
-    if (!this.multiple || !this._slottedOptions || typeof this.maxSelected != "number" || this.maxSelected <= 0)
-      return;
-    const t = this._slottedOptions.filter(
-      (e) => !this._slottedDisabledOptions.includes(e)
-    );
-    if (this.values.length >= this.maxSelected) {
-      const e = t.filter(
-        (o) => !this.selectedOptions.includes(o)
-      );
-      for (const o of e)
-        o.disabled = !0;
-    } else
-      for (const e of t)
-        e.disabled = !1;
-  }
-  /**
-   * @internal
-   */
-  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] : [];
-  }
-  /**
-   * @internal
-   */
-  nameChanged(t, e) {
-    super.nameChanged(t, e), this.#g();
-  }
-  #g() {
-    if (!this.name)
-      this.setFormValue(null);
-    else {
-      const t = new FormData();
-      for (const e of this.values)
-        t.append(this.name, e);
-      this.setFormValue(t);
-    }
-  }
-  /**
-   * @internal
-   */
-  formResetCallback() {
-    super.formResetCallback(), this.#t(this.#f());
-  }
-  #d;
-  /**
-   * @internal
-   */
-  _onFieldsetClick(t) {
-    this.disabled || t.defaultPrevented || (this._input.focus(), this.open = !0);
-  }
-  /**
-   * @internal
-   */
-  _onChevronClick() {
-    return this.open ? (this.open = !1, !1) : !0;
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.values.length || (this.values = this.#f()), this.#d.observe(this._contentArea);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.#d.disconnect();
-  }
-  /**
-   * @internal
-   */
-  validate() {
-    super.validate(this._input ?? void 0);
-  }
-  /**
-   * @internal
-   */
-  focus(t) {
-    this._input?.focus(t);
-  }
-  /**
-   * @internal
-   */
-  _onMouseDown(t) {
-    const e = t.composedPath()[0];
-    return !t.defaultPrevented && e !== this._input && !this._isFromContextualHelp(t) ? (this._input.focus(), !1) : !0;
-  }
-}
-r([
-  u
-], n.prototype, "appearance");
-r([
-  u
-], n.prototype, "shape");
-r([
-  u({ mode: "boolean", attribute: "fixed-dropdown" })
-], n.prototype, "fixedDropdown");
-r([
-  u
-], n.prototype, "placeholder");
-r([
-  u({ mode: "boolean" })
-], n.prototype, "open");
-r([
-  u({ mode: "boolean" })
-], n.prototype, "multiple");
-r([
-  u({ attribute: "external-tags", mode: "boolean" })
-], n.prototype, "externalTags");
-r([
-  u({ attribute: "max-lines", converter: A })
-], n.prototype, "maxLines");
-r([
-  p
-], n.prototype, "values");
-r([
-  p
-], n.prototype, "initialValues");
-r([
-  p
-], n.prototype, "_input");
-r([
-  p
-], n.prototype, "_currentSearchText");
-r([
-  p
-], n.prototype, "_slottedOptions");
-r([
-  p
-], n.prototype, "optionFilter");
-r([
-  p
-], n.prototype, "_filteredOptions");
-r([
-  p
-], n.prototype, "_filteredEnabledOptions");
-r([
-  u({
-    mode: "boolean"
-  })
-], n.prototype, "loading");
-r([
-  p
-], n.prototype, "_highlightedOptionIndex");
-r([
-  p
-], n.prototype, "_contentArea");
-r([
-  p
-], n.prototype, "_numElidedTags");
-r([
-  p
-], n.prototype, "_tagRows");
-r([
-  p
-], n.prototype, "_lastTagRow");
-r([
-  p
-], n.prototype, "_listbox");
-r([
-  u({ mode: "boolean" })
-], n.prototype, "clearable");
-r([
-  u({ attribute: "max-selected", converter: A })
-], n.prototype, "maxSelected");
-r([
-  p
-], n.prototype, "_slottedDisabledOptions");
-r([
-  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([
-  p
-], n.prototype, "_anchor");
-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;
+g([i], q.prototype, "appearance", void 0), g([i], q.prototype, "shape", void 0), g([i({
+	mode: "boolean",
+	attribute: "fixed-dropdown"
+})], q.prototype, "fixedDropdown", void 0), g([i], q.prototype, "placeholder", void 0), g([i({ mode: "boolean" })], q.prototype, "open", void 0), g([i({ mode: "boolean" })], q.prototype, "multiple", void 0), g([i({
+	attribute: "external-tags",
+	mode: "boolean"
+})], q.prototype, "externalTags", void 0), g([i({
+	attribute: "max-lines",
+	converter: c
+})], q.prototype, "maxLines", void 0), g([n], q.prototype, "values", void 0), g([n], q.prototype, "initialValues", void 0), g([n], q.prototype, "_input", void 0), g([n], q.prototype, "_currentSearchText", void 0), g([n], q.prototype, "_slottedOptions", void 0), g([n], q.prototype, "optionFilter", void 0), g([n], q.prototype, "_filteredOptions", void 0), g([n], q.prototype, "_filteredEnabledOptions", void 0), g([i({ mode: "boolean" })], q.prototype, "loading", void 0), g([n], q.prototype, "_highlightedOptionIndex", void 0), g([n], q.prototype, "_contentArea", void 0), g([n], q.prototype, "_numElidedTags", void 0), g([n], q.prototype, "_tagRows", void 0), g([n], q.prototype, "_lastTagRow", void 0), g([n], q.prototype, "_listbox", void 0), g([i({ mode: "boolean" })], q.prototype, "clearable", void 0), g([i({
+	attribute: "max-selected",
+	converter: c
+})], q.prototype, "maxSelected", void 0), g([n], q.prototype, "_slottedDisabledOptions", void 0), g([i({
+	attribute: "enable-select-all",
+	mode: "boolean"
+})], q.prototype, "enableSelectAll", void 0), g([i({ attribute: "select-all-text" })], q.prototype, "selectAllText", void 0), g([i({ attribute: "deselect-all-text" })], q.prototype, "deselectAllText", void 0), g([n], q.prototype, "_selectAllOption", void 0), g([n], q.prototype, "_changeDescription", void 0), g([n], q.prototype, "_anchor", void 0);
+//#endregion
+//#region src/lib/searchable-select/option-tag.ts
+var J = class extends e(s) {
+	constructor(...e) {
+		super(...e), this.removable = !1, this.disabled = !1, this.hasIconPlaceholder = !1;
+	}
+	_onClickRemove() {
+		this.$emit("remove", void 0, { bubbles: !1 });
+	}
 };
-class b extends V(F) {
-  constructor() {
-    super(...arguments), this.removable = !1, this.disabled = !1, this.hasIconPlaceholder = !1;
-  }
-  _onClickRemove() {
-    this.$emit("remove", void 0, {
-      bubbles: !1
-    });
-  }
-}
-m([
-  u
-], b.prototype, "shape");
-m([
-  p
-], b.prototype, "connotation");
-m([
-  u
-], b.prototype, "label");
-m([
-  u({ mode: "boolean" })
-], b.prototype, "removable");
-m([
-  u({ mode: "boolean" })
-], b.prototype, "disabled");
-m([
-  p
-], b.prototype, "hasIconPlaceholder");
-const ve = (s) => w(
-  ["disabled", s.disabled],
-  [`appearance-${s.appearance}`, !!s.appearance],
-  [`shape-${s.shape}`, !!s.shape],
-  ["error", !!s.errorValidationMessage],
-  ["success", !!s.successText],
-  ["has-highlighted-option", s._highlightedOptionIndex !== null]
-);
-function fe() {
-  return d`
-		<label for="control" class="label" id="label"> ${(s) => s.label} </label>
+g([i], J.prototype, "shape", void 0), g([n], J.prototype, "connotation", void 0), g([i], J.prototype, "label", void 0), g([i({ mode: "boolean" })], J.prototype, "removable", void 0), g([i({ mode: "boolean" })], J.prototype, "disabled", void 0), g([n], J.prototype, "hasIconPlaceholder", void 0);
+//#endregion
+//#region src/lib/searchable-select/searchable-select.template.ts
+var Y = (e) => T(["disabled", e.disabled], [`appearance-${e.appearance}`, !!e.appearance], [`shape-${e.shape}`, !!e.shape], ["error", !!e.errorValidationMessage], ["success", !!e.successText], ["has-highlighted-option", e._highlightedOptionIndex !== null]);
+function X() {
+	return r`
+		<label for="control" class="label" id="label"> ${(e) => e.label} </label>
 	`;
 }
-function ge() {
-  return d`
+function Z() {
+	return r`
 		<span
 			id="selection-count"
 			class="selection-count"
-			aria-label="${(s) => s.locale.searchableSelect.maxSelectedMessage(
-    s.values.length,
-    s.maxSelected
-  )}"
-			>(${(s) => `${s.values.length}/${s.maxSelected}`})</span
+			aria-label="${(e) => e.locale.searchableSelect.maxSelectedMessage(e.values.length, e.maxSelected)}"
+			>(${(e) => `${e.values.length}/${e.maxSelected}`})</span
 		>
 	`;
 }
-const k = (s, t) => {
-  const e = s.tagFor(b);
-  return d`
+var Q = (e, t) => {
+	let n = e.tagFor(J);
+	return r`
 		<div class="tag-wrapper">
-			<${e}
+			<${n}
 				class="tag"
 				tabindex="-1"
-				data-index="${(o, a) => t(a).values.indexOf(o)}"
+				data-index="${(e, n) => t(n).values.indexOf(e)}"
 				removable
-				: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)}"
+				:label="${(e, n) => t(n)._tagLabelForValue(e)}"
+				:shape="${(e, n) => t(n).shape}"
+				:connotation="${(e, n) => t(n)._tagConnotationForValue(e)}"
+				?disabled="${(e, n) => t(n)._isTagDisabled(e)}"
+				@remove="${(e, n) => t(n)._onTagRemoved(e)}"
+				@keydown="${(e, n) => t(n)._onTagKeydown(n.event)}"
 				@mousedown="${() => !1}">
-				<slot slot="icon" name="${(o, a) => t(a)._tagIconSlotName(o)}"></slot>
-			</${e}>
+				<slot slot="icon" name="${(e, n) => t(n)._tagIconSlotName(e)}"></slot>
+			</${n}>
 		</div>
 	`;
-}, C = (s, t) => {
-  const e = s.tagFor(b);
-  return d`
-		<${e}
+}, $ = (e, t) => {
+	let n = e.tagFor(J);
+	return r`
+		<${n}
 			class="tag"
 			tabindex="-1"
-			:label="${(o, a) => t(o, a)._numElidedTags.toString()}"
-			:shape="${(o, a) => t(o, a).shape}"
-			?disabled="${(o, a) => t(o, a).disabled}"
+			:label="${(e, n) => t(e, n)._numElidedTags.toString()}"
+			:shape="${(e, n) => t(e, n).shape}"
+			?disabled="${(e, n) => t(e, n).disabled}"
 			@mousedown="${() => !1}">
-		</${e}>
+		</${n}>
 	`;
 };
-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,
-    (l) => l.parentContext.parent
-  ), h = C(s, (l, c) => l), f = C(
-    s,
-    (l, c) => c.parent
-  );
-  return d`
+function ne(e) {
+	let t = e.tagFor(k), n = e.tagFor(E), i = _(e), a = A(e), o = Q(e, (e) => e.parent), s = Q(e, (e) => e.parentContext.parent), c = $(e, (e, t) => e), l = $(e, (e, t) => t.parent);
+	return r`
 		<div
-			class="fieldset ${ve}"
-			@click="${(l, c) => l._onFieldsetClick(c.event)}"
-			${x("_anchor")}
+			class="fieldset ${Y}"
+			@click="${(e, t) => e._onFieldsetClick(t.event)}"
+			${d("_anchor")}
 		>
-			${(l) => o(l.icon, ie.Slot)}
-			<div class="content-area" ${x("_contentArea")}>
-				${y(
-    (l) => l._tagRows,
-    d`
+			${(e) => i(e.icon, ee.Slot)}
+			<div class="content-area" ${d("_contentArea")}>
+				${u((e) => e._tagRows, r`
 						<div class="tag-row">
-							${v(
-      (l, c) => c.isFirst && c.parent._numElidedTags,
-      f
-    )}
-							${y((l) => l, g)}
+							${f((e, t) => t.isFirst && t.parent._numElidedTags, l)}
+							${u((e) => e, s)}
 						</div>
-					`,
-    { positioning: !0 }
-  )}
+					`, { positioning: !0 })}
 				<div
-					class="tag-row ${(l) => w([
-    "contains-only-input",
-    l._tagRows.length > 0 && l._lastTagRow.length === 0
-  ])}"
+					class="tag-row ${(e) => T(["contains-only-input", e._tagRows.length > 0 && e._lastTagRow.length === 0])}"
 				>
-					${v(
-    (l) => l._tagRows.length === 0 && l._numElidedTags,
-    h
-  )}
-					${y((l) => l._lastTagRow, i)}
+					${f((e) => e._tagRows.length === 0 && e._numElidedTags, c)}
+					${u((e) => e._lastTagRow, o)}
 					<input
 						id="control"
 						class="control"
 						autocomplete="off"
 						aria-controls="listbox"
-						aria-describedby="${(l) => l._feedbackDescribedBy} ${(l) => l.multiple && l.maxSelected && l.maxSelected >= 1 ? "selection-count" : null}"
-						${Y({
-    role: "combobox",
-    ariaAutoComplete: "list",
-    ariaHasPopup: "listbox",
-    ariaExpanded: (l) => l.open
-  })}
-						placeholder="${(l) => l.multiple && l.values.length ? "" : l.placeholder}"
+						aria-describedby="${(e) => e._feedbackDescribedBy} ${(e) => e.multiple && e.maxSelected && e.maxSelected >= 1 ? "selection-count" : null}"
+						${C({
+		role: "combobox",
+		ariaAutoComplete: "list",
+		ariaHasPopup: "listbox",
+		ariaExpanded: (e) => e.open
+	})}
+						placeholder="${(e) => e.multiple && e.values.length ? "" : e.placeholder}"
 						type="text"
-						?disabled="${(l) => l.disabled}"
-						:value="${(l) => l._inputValue}"
-						@input="${(l, c) => {
-    l._onInputInput(c.event), c.event.stopPropagation();
-  }}"
-						@change="${(l, c) => {
-    c.event.stopPropagation();
-  }}"
-						@focus="${(l, c) => l._onInputFocus(c.event)}"
-						@blur="${(l, c) => l._onInputBlur(c.event)}"
-						@keydown="${(l, c) => l._onInputKeydown(c.event)}"
-						${x("_input")}
+						?disabled="${(e) => e.disabled}"
+						:value="${(e) => e._inputValue}"
+						@input="${(e, t) => {
+		e._onInputInput(t.event), t.event.stopPropagation();
+	}}"
+						@change="${(e, t) => {
+		t.event.stopPropagation();
+	}}"
+						@focus="${(e, t) => e._onInputFocus(t.event)}"
+						@blur="${(e, t) => e._onInputBlur(t.event)}"
+						@keydown="${(e, t) => e._onInputKeydown(t.event)}"
+						${d("_input")}
 					/>
 				</div>
 			</div>
 			<slot name="meta"></slot>
-			${v(
-    (l) => l._shouldShowClearButton,
-    d`<${t}
-					aria-label="${(l) => l.locale.searchableSelect.clearButtonLabel}"
-					@click="${(l) => l._onClearButtonClick()}"
+			${f((e) => e._shouldShowClearButton, r`<${t}
+					aria-label="${(e) => e.locale.searchableSelect.clearButtonLabel}"
+					@click="${(e) => e._onClearButtonClick()}"
 					@mousedown="${() => !1}"
-					?disabled="${(l) => l.disabled}"
-					:shape="${(l) => l.shape}"
+					?disabled="${(e) => e.disabled}"
+					:shape="${(e) => e.shape}"
 					size="super-condensed"
 					icon="close-line"
 					appearance="ghost-light"
 					tabindex="0"
-				></${t}>`
-  )}
-			<div @mousedown="${() => !1}" @click="${(l) => l._onChevronClick()}">
-				${v(
-    (l) => l.loading,
-    d`<${e} indeterminate size="-6" aria-hidden="true"></${e}>`
-  )}
-				${v((l) => !l.loading, a)}
+				></${t}>`)}
+			<div @mousedown="${() => !1}" @click="${(e) => e._onChevronClick()}">
+				${f((e) => e.loading, r`<${n} indeterminate size="-6" aria-hidden="true"></${n}>`)}
+				${f((e) => !e.loading, a)}
 			</div>
 		</div>
 	`;
 }
-function _e(s) {
-  return s.open && s.fixedDropdown ? `--_searchable-select-fixed-width: ${Math.round(
-    s.getBoundingClientRect().width
-  )}px` : null;
+function re(e) {
+	return e.open && e.fixedDropdown ? `--_searchable-select-fixed-width: ${Math.round(e.getBoundingClientRect().width)}px` : null;
 }
-function me(s) {
-  const t = s.tagFor(W), e = s.tagFor(ne);
-  return d`
+function ie(e) {
+	let t = e.tagFor(R), n = e.tagFor(B);
+	return r`
     <${t}
       data-select-all
       tabindex="-1"
-      :text="${(o) => o._selectAllLabel}"
-      :selected="${(o) => o._isAllSelected}"
+      :text="${(e) => e._selectAllLabel}"
+      :selected="${(e) => e._isAllSelected}"
       :_displayCheckmark="${() => !0}"
-      ?disabled="${(o) => o._selectableOptions.length === 0}"
-      ${x("_selectAllOption")}>
+      ?disabled="${(e) => e._selectableOptions.length === 0}"
+      ${d("_selectAllOption")}>
     </${t}>
-		<${e} class="divider"></${e}>
+		<${n} class="divider"></${n}>
   `;
 }
-function xe(s) {
-  const t = s.tagFor(L);
-  return d`
+function ae(e) {
+	let t = e.tagFor(M);
+	return r`
 		<div class="label-wrapper" ?hidden=${(e) => !e.label && !e._hasContextualHelp && !e._hasSelectionCount}>
-			${v(
-    (e) => e.label || e._hasSelectionCount,
-    d`
+			${f((e) => e.label || e._hasSelectionCount, r`
 					<div>
-						${v((e) => e.label, fe())}
-						${v((e) => e._hasSelectionCount, ge())}
+						${f((e) => e.label, X())}
+						${f((e) => e._hasSelectionCount, Z())}
 					</div>
-				`
-  )}
-			<slot name="contextual-help" ${T("_contextualHelpSlottedContent")}></slot>
+				`)}
+			<slot name="contextual-help" ${p("_contextualHelpSlottedContent")}></slot>
 		</div>
 		<span aria-live="assertive" aria-relevant="text" class="visually-hidden">
 			${(e) => e._changeDescription}
 		</span>
 		<div>
-			${be(s)}
+			${ne(e)}
 			<div class="popup-wrapper">
 				<${t}
 					:anchor="${(e) => e._anchor}"
 					:open="${(e) => e.open}"
 					class="popup"
 					placement="bottom-start"
-					style="${_e}"
+					style="${re}"
 					strategy="${(e) => e.fixedDropdown ? "fixed" : "absolute"}">
 					<div
 						class="listbox"
 						role="listbox"
 						aria-multiselectable="${(e) => e.multiple}"
 						aria-required="${(e) => e.required}"
-						${x("_listbox")}
-						@click="${(e, o) => e._onListboxClick(o.event)}"
+						${d("_listbox")}
+						@click="${(e, t) => e._onListboxClick(t.event)}"
 						@mousedown="${() => !1}"
 					>
-						${v(
-    (e) => e.enableSelectAll && e.multiple && !e.maxSelected,
-    me(s)
-  )}
+						${f((e) => e.enableSelectAll && e.multiple && !e.maxSelected, ie(e))}
 						<slot
-							${T({
-    filter: B,
-    flatten: !0,
-    property: "_slottedOptions"
-  })}>
+							${p({
+		filter: L,
+		flatten: !0,
+		property: "_slottedOptions"
+	})}>
 						</slot>
-						${v(
-    (e) => e._filteredOptions.length === 0,
-    d`<div class="empty-message">
-								${v(
-      (e) => e.loading,
-      d`<slot name="loading-options">
+						${f((e) => e._filteredOptions.length === 0, r`<div class="empty-message">
+								${f((e) => e.loading, r`<slot name="loading-options">
 										${(e) => e.locale.searchableSelect.loadingOptionsMessage}
-									</slot>`
-    )}
-								${v(
-      (e) => !e.loading && e.searchText === "",
-      d`<slot name="no-options">
+									</slot>`)}
+								${f((e) => !e.loading && e.searchText === "", r`<slot name="no-options">
 										${(e) => e.locale.searchableSelect.noOptionsMessage}
-									</slot>`
-    )}
-								${v(
-      (e) => !e.loading && e.searchText !== "",
-      d`<slot name="no-matches">
+									</slot>`)}
+								${f((e) => !e.loading && e.searchText !== "", r`<slot name="no-matches">
 										${(e) => e.locale.searchableSelect.noMatchesMessage}
-									</slot>`
-    )}
-							</div>`
-  )}
+									</slot>`)}
+							</div>`)}
 					</div>
 				</${t}>
 			</div>
 		</div>
 	`;
 }
-const ye = (s) => {
-  const t = s.tagFor(b, !0);
-  return d`
+var oe = (e) => {
+	let t = e.tagFor(J, !0);
+	return r`
 		<template
 			:_optionTagTagName="${() => t}"
-			@mousedown="${(e, o) => e._onMouseDown(o.event)}"
+			@mousedown="${(e, t) => e._onMouseDown(t.event)}"
 		>
 			<div class="control-wrapper">
-				${xe(s)} ${(e) => e._getFeedbackTemplate(s)}
+				${ae(e)} ${(t) => t._getFeedbackTemplate(e)}
 			</div>
 		</template>
 	`;
-}, we = ({ shape: s, connotation: t, disabled: e, removable: o }) => w(
-  "base",
-  ["disabled", e],
-  ["removable", o],
-  [`shape-${s}`, !!s],
-  [`connotation-${t}`, !!t]
-);
-function $e(s) {
-  return d`
+}, se = ({ shape: e, connotation: t, disabled: n, removable: r }) => T("base", ["disabled", n], ["removable", r], [`shape-${e}`, !!e], [`connotation-${t}`, !!t]);
+function ce(e) {
+	return r`
 		<span
 			class="remove-button"
-			aria-label="${(t) => t.locale.searchableSelect.removeTagButtonLabel(t.label)}"
+			aria-label="${(e) => e.locale.searchableSelect.removeTagButtonLabel(e.label)}"
 			role="button"
-			tabindex="${(t) => t.disabled ? null : 0}"
-			@click="${(t) => t._onClickRemove()}"
+			tabindex="${(e) => e.disabled ? null : 0}"
+			@click="${(e) => e._onClickRemove()}"
 		>
-			<${s} name="close-line"></${s}>
+			<${e} name="close-line"></${e}>
 		</span>
 	`;
 }
-const Oe = (s) => {
-  const t = s.tagFor(M);
-  return d`<span class="${we}" aria-disabled="${(e) => e.disabled}">
+//#endregion
+//#region src/lib/searchable-select/index.ts
+o(a("searchable-select", q, oe, [
+	j,
+	N,
+	h,
+	a("option-tag", J, (e) => {
+		let t = e.tagFor(m);
+		return r`<span class="${se}" aria-disabled="${(e) => e.disabled}">
 		<slot name="icon" aria-hidden="true">
-			${v(
-    (e) => e.hasIconPlaceholder,
-    d`<div class="icon-placeholder"></div>`
-  )}
+			${f((e) => e.hasIconPlaceholder, r`<div class="icon-placeholder"></div>`)}
 		</slot>
-		${v(
-    (e) => e.label,
-    (e) => d`<span class="label">${e.label}</span>`
-  )}
-		${v((e) => e.removable, $e(t))}
+		${f((e) => e.label, (e) => r`<span class="label">${e.label}</span>`)}
+		${f((e) => e.removable, ce(t))}
 	</span>`;
-}, Te = D(
-  "option-tag",
-  b,
-  Oe,
-  [I],
-  {
-    styles: [ce],
-    shadowOptions: {
-      delegatesFocus: !0
-    }
-  }
-), Se = D(
-  "searchable-select",
-  n,
-  ye,
-  [
-    E,
-    P,
-    I,
-    Te,
-    K,
-    G,
-    N,
-    J
-  ],
-  {
-    styles: re
-  }
-), ke = U(
-  Se
-);
-ke();
+	}, [h], {
+		styles: [H],
+		shadowOptions: { delegatesFocus: !0 }
+	}),
+	D,
+	P,
+	te,
+	z
+], { styles: V }))();
+//#endregion