@vonage/vivid 5.23.1 → 5.25.0

package/searchable-select/index.js

@@ -6,24 +6,29 @@ import { t as f } from "../bundled/ref.js";
 import { t as p } from "../bundled/when.js";
 import { t as m } from "../bundled/decorate.js";
 import { t as h } from "../bundled/class-names.js";
-import { r as g, t as _ } from "../bundled/definition3.js";
+import { t as g } from "../bundled/definition3.js";
+import { t as _ } from "../bundled/icon.js";
 import { a as v, i as y, n as b } from "../bundled/affix.js";
 import { r as x, t as S } from "../bundled/definition5.js";
-import { n as C, t as w } from "../bundled/delegates-aria.js";
-import { n as T } from "../bundled/form-associated.js";
-import { i as E, r as D, t as O } from "../bundled/definition6.js";
-import { i as k, t as A } from "../bundled/definition8.js";
-import { r as j, t as M } from "../bundled/mixins.js";
-import { t as N } from "../bundled/form-element.js";
-import { t as P } from "../bundled/with-contextual-help.js";
-import { t as F } from "../bundled/with-error-text.js";
-import { t as I } from "../bundled/with-success-text.js";
-import { t as L } from "../bundled/scrollIntoView.js";
-import { i as R, r as z, t as ee } from "../bundled/definition17.js";
-import { t as B } from "../bundled/definition19.js";
+import { n as ee, t as te } from "../bundled/delegates-aria.js";
+import { n as ne } from "../bundled/form-associated.js";
+import { i as C, r as w, t as T } from "../bundled/definition6.js";
+import { i as E, t as D } from "../bundled/definition8.js";
+import { r as O, t as k } from "../bundled/mixins.js";
+import { t as A } from "../bundled/form-element.js";
+import { t as j } from "../bundled/with-contextual-help.js";
+import { t as M } from "../bundled/with-error-text.js";
+import { t as N } from "../bundled/with-success-text.js";
+import { t as P } from "../bundled/scrollIntoView.js";
+import { n as F, t as I } from "../bundled/option.js";
+import { t as L } from "../bundled/definition17.js";
+import { n as R } from "../bundled/optgroup.js";
+import { t as re } from "../bundled/definition18.js";
+import { t as z } from "../bundled/extractOptions.js";
+import { t as B } from "../bundled/definition20.js";
 import { t as V } from "../bundled/divider.js";
 //#region src/lib/searchable-select/searchable-select.scss?inline
-var H = ".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;display:flex;transform:rotate(0)}@media (prefers-reduced-motion:no-preference){.chevron{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{--_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-600);--_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-600);--_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{--_searchable-select-block-size:24px;--_searchable-select-padding-block:8px;--_searchable-select-padding-inline:16px;--_searchable-select-icon-size:20px;--_searchable-select-border-radius:8px;--_searchable-select-gap:8px;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:var(--_searchable-select-gap);padding-block:var(--_searchable-select-padding-block);padding-inline:var(--_searchable-select-padding-inline);transition:box-shadow .2s,background-color .2s;display:flex}.fieldset.size-condensed{--_searchable-select-block-size:20px;--_searchable-select-padding-block:6px;--_searchable-select-padding-inline:12px;--_searchable-select-gap:6px}.fieldset.size-condensed:not(.shape-pill){--_searchable-select-border-radius:4px}@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:var(--_searchable-select-border-radius)}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{gap:var(--_searchable-select-gap);min-block-size:var(--_searchable-select-block-size);flex-direction:column;flex:1;display:flex;overflow:hidden}.tag-row{gap:var(--_searchable-select-gap);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:var(--_searchable-select-block-size);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:var(--_searchable-select-icon-size)}.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}", U = ":host{display:block}.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{--_option-tag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));box-sizing:border-box;background-color:var(--fill-color);block-size:var(--_option-tag-block-size);box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);font:var(--vvd-typography-base-bold);user-select:none;align-items:center;column-gap:8px;max-inline-size:100%;padding-inline:8px;display:flex;position:relative}.base.size-condensed{--_option-tag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));padding-inline:4px}.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(var(--_option-tag-block-size) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(var(--_option-tag-block-size) / 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}", W = 8, G = 100, K = 10, q = (e) => typeof e == "string", J = class extends P(M(F(I(N(w(b(e(T(c))))))))) {
+var H = ".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;display:flex;transform:rotate(0)}@media (prefers-reduced-motion:no-preference){.chevron{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{--_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-600);--_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-600);--_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{--_searchable-select-block-size:24px;--_searchable-select-padding-block:8px;--_searchable-select-padding-inline:16px;--_searchable-select-icon-size:20px;--_searchable-select-border-radius:8px;--_searchable-select-gap:8px;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:var(--_searchable-select-gap);padding-block:var(--_searchable-select-padding-block);padding-inline:var(--_searchable-select-padding-inline);transition:box-shadow .2s,background-color .2s;display:flex}.fieldset.size-condensed{--_searchable-select-block-size:20px;--_searchable-select-padding-block:6px;--_searchable-select-padding-inline:12px;--_searchable-select-gap:6px}.fieldset.size-condensed:not(.shape-pill){--_searchable-select-border-radius:4px}@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:var(--_searchable-select-border-radius)}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{gap:var(--_searchable-select-gap);min-block-size:var(--_searchable-select-block-size);flex-direction:column;flex:1;display:flex;overflow:hidden}.tag-row{gap:var(--_searchable-select-gap);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:var(--_searchable-select-block-size);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:var(--_searchable-select-icon-size)}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.divider{margin-block:10px;margin-inline:12px}", U = ":host{display:block}.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{--_option-tag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));box-sizing:border-box;background-color:var(--fill-color);block-size:var(--_option-tag-block-size);box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);font:var(--vvd-typography-base-bold);user-select:none;align-items:center;column-gap:8px;max-inline-size:100%;padding-inline:8px;display:flex;position:relative}.base.size-condensed{--_option-tag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));padding-inline:4px}.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(var(--_option-tag-block-size) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(var(--_option-tag-block-size) / 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}", W = 8, G = 100, K = 10, q = (e) => typeof e == "string", J = class extends j(k(M(N(A(te(b(e(ne(c))))))))) {
 	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.#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));
@@ -31,7 +36,10 @@ var H = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex
 			q(e) || super.setFormValue(e, t);
 		}, this._changeDescription = "", this.#O = new ResizeObserver(() => {
 			this.#b();
-		});
+		}), this.#k = () => {
+			/* v8 ignore else */
+			this._slottedElements && this._slottedElementsChanged();
+		};
 	}
 	openChanged() {
 		this.open || this.#u(null);
@@ -149,6 +157,9 @@ var H = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex
 		}
 		return !0;
 	}
+	_slottedElementsChanged() {
+		this._slottedOptions = z(this._slottedElements);
+	}
 	_slottedOptionsChanged(e, t) {
 		let n = !!this.querySelectorAll(":not([slot])").length;
 		if (!t.length && n) return;
@@ -201,6 +212,11 @@ var H = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex
 			let r = !this.searchText || t(n, this.searchText);
 			n._isNotMatching = !r, !n.hidden && r && e.push(n);
 		}
+		/* v8 ignore next -- _slottedElements not yet set if filtering is triggered before slot initialises */
+		for (let e of this._slottedElements ?? []) if (R(e)) {
+			let t = Array.from(e.children).some((e) => F(e) && !e._isNotMatching && !e.hidden);
+			e.style.display = t ? "" : "none";
+		}
 		this.#u(null), this._filteredOptions = e;
 		let n = e.filter((e) => !e.disabled);
 		this._selectAllOption ? this._filteredEnabledOptions = [this._selectAllOption, ...n] : this._filteredEnabledOptions = n;
@@ -208,11 +224,11 @@ var H = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex
 	#u(e) {
 		if (typeof this._highlightedOptionIndex == "number") {
 			let e = this._filteredEnabledOptions[this._highlightedOptionIndex];
-			e._highlighted = !1, e.removeAttribute("data-highlighted");
+			e._highlighted = !1;
 		}
 		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", ""), L(e, this._listbox, "nearest"), this._changeDescription = this.locale.searchableSelect.optionFocusedMessage(e._getAccessibleName(), this._highlightedOptionIndex + 1, this._filteredEnabledOptions.length, e.selected);
+			e._highlighted = !0, P(e, this._listbox, "nearest"), this._changeDescription = this.locale.searchableSelect.optionFocusedMessage(e._getAccessibleName(), this._highlightedOptionIndex + 1, this._filteredEnabledOptions.length, e.selected);
 		}
 	}
 	#d() {
@@ -414,11 +430,12 @@ var H = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex
 		return this.open ? (this.open = !1, !1) : !0;
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.values.length || (this.values = this.#E()), this.#O.observe(this._contentArea);
+		super.connectedCallback(), this.values.length || (this.values = this.#E()), this.#O.observe(this._contentArea), this.addEventListener("optgroup-change", this.#k);
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.#O.disconnect();
+		super.disconnectedCallback(), this.removeEventListener("optgroup-change", this.#k), this.#O.disconnect();
 	}
+	#k;
 	validate() {
 		super.validate(this._input ?? void 0);
 	}
@@ -439,7 +456,7 @@ m([o], J.prototype, "appearance", void 0), m([o], J.prototype, "shape", void 0),
 })], J.prototype, "externalTags", void 0), m([o({
 	attribute: "max-lines",
 	converter: i
-})], J.prototype, "maxLines", void 0), m([t], J.prototype, "values", void 0), m([t], J.prototype, "initialValues", void 0), m([t], J.prototype, "_input", void 0), m([t], J.prototype, "_currentSearchText", void 0), m([t], J.prototype, "_slottedOptions", void 0), m([t], J.prototype, "optionFilter", void 0), m([t], J.prototype, "_filteredOptions", void 0), m([t], J.prototype, "_filteredEnabledOptions", void 0), m([o({ mode: "boolean" })], J.prototype, "loading", void 0), m([t], J.prototype, "_highlightedOptionIndex", void 0), m([t], J.prototype, "_contentArea", void 0), m([t], J.prototype, "_numElidedTags", void 0), m([t], J.prototype, "_tagRows", void 0), m([t], J.prototype, "_lastTagRow", void 0), m([t], J.prototype, "_listbox", void 0), m([o({ mode: "boolean" })], J.prototype, "clearable", void 0), m([o({
+})], J.prototype, "maxLines", void 0), m([t], J.prototype, "values", void 0), m([t], J.prototype, "initialValues", void 0), m([t], J.prototype, "_input", void 0), m([t], J.prototype, "_currentSearchText", void 0), m([t], J.prototype, "_slottedElements", void 0), m([t], J.prototype, "_slottedOptions", void 0), m([t], J.prototype, "optionFilter", void 0), m([t], J.prototype, "_filteredOptions", void 0), m([t], J.prototype, "_filteredEnabledOptions", void 0), m([o({ mode: "boolean" })], J.prototype, "loading", void 0), m([t], J.prototype, "_highlightedOptionIndex", void 0), m([t], J.prototype, "_contentArea", void 0), m([t], J.prototype, "_numElidedTags", void 0), m([t], J.prototype, "_tagRows", void 0), m([t], J.prototype, "_lastTagRow", void 0), m([t], J.prototype, "_listbox", void 0), m([o({ mode: "boolean" })], J.prototype, "clearable", void 0), m([o({
 	attribute: "max-selected",
 	converter: i
 })], J.prototype, "maxSelected", void 0), m([t], J.prototype, "_slottedDisabledOptions", void 0), m([o({
@@ -464,7 +481,7 @@ function X() {
 		<label for="control" class="label" id="label"> ${(e) => e.label} </label>
 	`;
 }
-function Z() {
+function ie() {
 	return s`
 		<span
 			id="selection-count"
@@ -474,7 +491,7 @@ function Z() {
 		>
 	`;
 }
-var Q = (e, t) => {
+var Z = (e, t) => {
 	let n = e.tagFor(Y);
 	return s`
 		<div class="tag-wrapper">
@@ -495,7 +512,7 @@ var Q = (e, t) => {
 			</${n}>
 		</div>
 	`;
-}, $ = (e, t) => {
+}, Q = (e, t) => {
 	let n = e.tagFor(Y);
 	return s`
 		<${n}
@@ -509,8 +526,8 @@ var Q = (e, t) => {
 		</${n}>
 	`;
 };
-function te(e) {
-	let t = e.tagFor(E), n = e.tagFor(x), r = v(e), i = D(e), a = Q(e, (e) => e.parent), o = Q(e, (e) => e.parentContext.parent), c = $(e, (e, t) => e), l = $(e, (e, t) => t.parent);
+function ae(e) {
+	let t = e.tagFor(C), n = e.tagFor(x), r = v(e), i = w(e), a = Z(e, (e) => e.parent), o = Z(e, (e) => e.parentContext.parent), c = Q(e, (e, t) => e), l = Q(e, (e, t) => t.parent);
 	return s`
 		<div
 			class="fieldset ${(e) => h(["disabled", e.disabled], [`appearance-${e.appearance}`, !!e.appearance], [`shape-${e.shape}`, !!e.shape], [`size-${e.scale}`, !!e.scale], ["error", !!e.errorValidationMessage], ["success", !!e.successText], ["has-highlighted-option", e._highlightedOptionIndex !== null])}"
@@ -534,7 +551,7 @@ function te(e) {
 						id="control"
 						class="control"
 						autocomplete="off"
-						${C({
+						${ee({
 		role: "combobox",
 		ariaAutoComplete: "list",
 		ariaHasPopup: "listbox",
@@ -578,11 +595,11 @@ function te(e) {
 		</div>
 	`;
 }
-function ne(e) {
+function oe(e) {
 	return e.open && e.fixedDropdown ? `--_searchable-select-fixed-width: ${Math.round(e.getBoundingClientRect().width)}px` : null;
 }
-function re(e) {
-	let t = e.tagFor(z), n = e.tagFor(V);
+function se(e) {
+	let t = e.tagFor(I), n = e.tagFor(V);
 	return s`
     <${t}
       data-select-all
@@ -596,14 +613,14 @@ function re(e) {
 		<${n} class="divider"></${n}>
   `;
 }
-function ie(e) {
-	let t = e.tagFor(k);
+function ce(e) {
+	let t = e.tagFor(E);
 	return s`
 		<div class="label-wrapper" ?hidden=${(e) => !e.label && !e._hasContextualHelp && !e._hasSelectionCount}>
 			${p((e) => e.label || e._hasSelectionCount, s`
 					<div>
 						${p((e) => e.label, X())}
-						${p((e) => e._hasSelectionCount, Z())}
+						${p((e) => e._hasSelectionCount, ie())}
 					</div>
 				`)}
 			<slot name="contextual-help" ${d("_contextualHelpSlottedContent")}></slot>
@@ -612,14 +629,14 @@ function ie(e) {
 			${(e) => e._changeDescription}
 		</span>
 		<div>
-			${te(e)}
+			${ae(e)}
 			<div class="popup-wrapper">
 				<${t}
 					:anchor="${(e) => e._anchor}"
 					:open="${(e) => e.open}"
 					class="popup"
 					placement="bottom-start"
-					style="${ne}"
+					style="${oe}"
 					strategy="${(e) => e.fixedDropdown ? "fixed" : "absolute"}">
 					<div
 						class="listbox"
@@ -630,12 +647,12 @@ function ie(e) {
 						@click="${(e, t) => e._onListboxClick(t.event)}"
 						@mousedown="${() => !1}"
 					>
-						${p((e) => e.enableSelectAll && e.multiple && !e.maxSelected, re(e))}
+						${p((e) => e.enableSelectAll && e.multiple && !e.maxSelected, se(e))}
 						<slot
 							${d({
-		filter: R,
+		filter: ((e) => F(e) || R(e)),
 		flatten: !0,
-		property: "_slottedOptions"
+		property: "_slottedElements"
 	})}>
 						</slot>
 						${p((e) => e._filteredOptions.length === 0, s`<div class="empty-message">
@@ -655,7 +672,7 @@ function ie(e) {
 		</div>
 	`;
 }
-var ae = (e) => {
+var le = (e) => {
 	let t = e.tagFor(Y, !0);
 	return s`
 		<template
@@ -663,14 +680,14 @@ var ae = (e) => {
 			@mousedown="${(e, t) => e._onMouseDown(t.event)}"
 		>
 			<div class="control-wrapper">
-				${ie(e)} ${(t) => t._getFeedbackTemplate(e)}
+				${ce(e)} ${(t) => t._getFeedbackTemplate(e)}
 			</div>
 		</template>
 	`;
 };
 //#endregion
 //#region src/lib/searchable-select/option-tag.template.ts
-function oe(e) {
+function $(e) {
 	return s`
 		<span
 			class="remove-button"
@@ -685,12 +702,12 @@ function oe(e) {
 }
 //#endregion
 //#region src/lib/searchable-select/index.ts
-r(l("searchable-select", J, ae, [
-	O,
-	A,
-	_,
+r(l("searchable-select", J, le, [
+	T,
+	D,
+	g,
 	l("option-tag", Y, (e) => {
-		let t = e.tagFor(g);
+		let t = e.tagFor(_);
 		return s`<span
 		class="${(e) => h("base", ["disabled", e.disabled], ["removable", e.removable], [`shape-${e.shape}`, !!e.shape], [`connotation-${e.connotation}`, !!e.connotation], [`size-${e.scale}`, !!e.scale])}"
 		aria-disabled="${(e) => e.disabled}"
@@ -699,15 +716,16 @@ r(l("searchable-select", J, ae, [
 			${p((e) => e.hasIconPlaceholder, s`<div class="icon-placeholder"></div>`)}
 		</slot>
 		${p((e) => e.label, (e) => s`<span class="label">${e.label}</span>`)}
-		${p((e) => e.removable, oe(t))}
+		${p((e) => e.removable, $(t))}
 	</span>`;
-	}, [_], {
+	}, [g], {
 		styles: [U],
 		shadowOptions: { delegatesFocus: !0 }
 	}),
 	S,
-	j,
-	ee,
+	O,
+	L,
+	re,
 	B
 ], { styles: H }))();
 //#endregion

package/select/definition.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_definition = require("../unbundled/definition61.cjs");
+const require_definition = require("../unbundled/definition63.cjs");
 exports.VwcSelectElement = require_definition.Select;
 exports.registerSelect = require_definition.registerSelect;
 exports.selectDefinition = require_definition.selectDefinition;

package/select/definition.js

@@ -1,2 +1,2 @@
-import { n as selectDefinition, r as Select, t as registerSelect } from "../unbundled/definition61.js";
+import { n as selectDefinition, r as Select, t as registerSelect } from "../unbundled/definition63.js";
 export { Select as VwcSelectElement, registerSelect, selectDefinition };

package/select/index.cjs

@@ -1 +1 @@
-require(`../bundled/definition18.cjs`).t();
+require(`../bundled/definition19.cjs`).t();

package/select/index.js

@@ -1,4 +1,4 @@
-import { t as e } from "../bundled/definition18.js";
+import { t as e } from "../bundled/definition19.js";
 //#region src/lib/select/index.ts
 e();
 //#endregion

package/selectable-box/definition.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_definition = require("../unbundled/definition64.cjs");
+const require_definition = require("../unbundled/definition66.cjs");
 exports.VwcSelectableBoxElement = require_definition.SelectableBox;
 exports.registerSelectableBox = require_definition.registerSelectableBox;
 exports.selectableBoxDefinition = require_definition.selectableBoxDefinition;

package/selectable-box/definition.js

@@ -1,2 +1,2 @@
-import { n as selectableBoxDefinition, r as SelectableBox, t as registerSelectableBox } from "../unbundled/definition64.js";
+import { n as selectableBoxDefinition, r as SelectableBox, t as registerSelectableBox } from "../unbundled/definition66.js";
 export { SelectableBox as VwcSelectableBoxElement, registerSelectableBox, selectableBoxDefinition };

package/shared/aria/delegates-aria.d.ts

@@ -10,6 +10,7 @@ export declare const DelegatesAria: <T extends Constructor<VividElement>>(Base:
     new (...args: any[]): {
         _vividAriaBehaviour: "delegate";
         connectedCallback(): void;
+        focus(...args: any[]): void;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
         disconnectedCallback: (() => void) & (() => void);
@@ -363,7 +364,6 @@ export declare const DelegatesAria: <T extends Constructor<VividElement>>(Base:
         nonce?: string;
         tabIndex: number;
         blur(): void;
-        focus(options?: FocusOptions): void;
         ariaControls: string | null;
         ariaDescribedBy: string | null;
         ariaDetails: string | null;

package/shared/aria/host-semantics.d.ts

@@ -7,6 +7,7 @@ export declare const HostSemantics: <T extends Constructor<VividElement>>(Base:
     new (...args: any[]): {
         _vividAriaBehaviour: "host";
         connectedCallback(): void;
+        focus(...args: any[]): void;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
         disconnectedCallback: (() => void) & (() => void);
@@ -360,7 +361,6 @@ export declare const HostSemantics: <T extends Constructor<VividElement>>(Base:
         nonce?: string;
         tabIndex: number;
         blur(): void;
-        focus(options?: FocusOptions): void;
         ariaControls: string | null;
         ariaDescribedBy: string | null;
         ariaDetails: string | null;

package/shared/color-picker/base-color-picker.d.ts

@@ -22,6 +22,7 @@ export declare const BaseColorPicker: <T extends Constructor<VividElement>>(Base
         _focusSwatchByIndex(index: number): void;
         _renderColorSwatch(iconTag: InlineTemplateDirective, tooltipTag: InlineTemplateDirective): import('@microsoft/fast-element').ViewTemplate<ColorSwatch, any>;
         get locale(): import('../localization/Locale').Locale;
+        focus(...args: any[]): void;
         _vividAriaBehaviour: import('../aria/aria-mixin').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
@@ -376,7 +377,6 @@ export declare const BaseColorPicker: <T extends Constructor<VividElement>>(Base
         nonce?: string;
         tabIndex: number;
         blur(): void;
-        focus(options?: FocusOptions): void;
         ariaControls: string | null;
         ariaDescribedBy: string | null;
         ariaDetails: string | null;

package/shared/feedback/feedback-message.d.ts

@@ -4,6 +4,7 @@ declare const FeedbackMessage_base: {
     new (...args: any[]): {
         get locale(): import('../localization/Locale').Locale;
         connectedCallback(): void;
+        focus(...args: any[]): void;
         _vividAriaBehaviour: import('../aria/aria-mixin').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
@@ -358,7 +359,6 @@ declare const FeedbackMessage_base: {
         nonce?: string;
         tabIndex: number;
         blur(): void;
-        focus(options?: FocusOptions): void;
         ariaControls: string | null;
         ariaDescribedBy: string | null;
         ariaDetails: string | null;

package/shared/feedback/mixins.d.ts

@@ -14,6 +14,7 @@ export declare const WithFeedback: <T extends Constructor<VividElement>>(Base: T
         _slottedHelperTextFeedbackType(): "none" | "helper";
         _getFeedbackTemplate(ctx: VividElementDefinitionContext): import('@microsoft/fast-element').ViewTemplate<any, any>;
         connectedCallback(): void;
+        focus(...args: any[]): void;
         _vividAriaBehaviour: import('../aria/aria-mixin').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
@@ -368,7 +369,6 @@ export declare const WithFeedback: <T extends Constructor<VividElement>>(Base: T
         nonce?: string;
         tabIndex: number;
         blur(): void;
-        focus(options?: FocusOptions): void;
         ariaControls: string | null;
         ariaDescribedBy: string | null;
         ariaDetails: string | null;
@@ -452,6 +452,7 @@ export declare const WithLightDOMFeedback: <T extends Constructor<VividElement>>
         };
         _slottedHelperTextFeedbackType(): "none" | "helper";
         connectedCallback(): void;
+        focus(...args: any[]): void;
         _vividAriaBehaviour: import('../aria/aria-mixin').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
@@ -806,7 +807,6 @@ export declare const WithLightDOMFeedback: <T extends Constructor<VividElement>>
         nonce?: string;
         tabIndex: number;
         blur(): void;
-        focus(options?: FocusOptions): void;
         ariaControls: string | null;
         ariaDescribedBy: string | null;
         ariaDetails: string | null;

package/shared/foundation/button/button.d.ts

@@ -3,6 +3,7 @@ declare const VividFoundationButton_base: {
     new (...args: any[]): {
         _vividAriaBehaviour: "delegate";
         connectedCallback(): void;
+        focus(...args: any[]): void;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
         disconnectedCallback: (() => void) & (() => void);
@@ -356,7 +357,6 @@ declare const VividFoundationButton_base: {
         nonce?: string;
         tabIndex: number;
         blur(): void;
-        focus(options?: FocusOptions): void;
         ariaControls: string | null;
         ariaDescribedBy: string | null;
         ariaDetails: string | null;
@@ -461,6 +461,7 @@ declare const VividFoundationButton_base: {
         setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
         _keypressHandler(e: KeyboardEvent): void;
         stopPropagation(e: Event): void;
+        focus(...args: any[]): void;
         _vividAriaBehaviour: import('../../aria/aria-mixin').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
@@ -814,7 +815,6 @@ declare const VividFoundationButton_base: {
         nonce?: string;
         tabIndex: number;
         blur(): void;
-        focus(options?: FocusOptions): void;
         ariaControls: string | null;
         ariaDescribedBy: string | null;
         ariaDetails: string | null;

package/shared/foundation/form-associated/form-associated.d.ts

@@ -40,6 +40,7 @@ export declare const FormAssociated: <T extends Constructor<VividElement>>(Base:
         setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
         _keypressHandler(e: KeyboardEvent): void;
         stopPropagation(e: Event): void;
+        focus(...args: any[]): void;
         _vividAriaBehaviour: import('../../aria/aria-mixin').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
@@ -393,7 +394,6 @@ export declare const FormAssociated: <T extends Constructor<VividElement>>(Base:
         nonce?: string;
         tabIndex: number;
         blur(): void;
-        focus(options?: FocusOptions): void;
         ariaControls: string | null;
         ariaDescribedBy: string | null;
         ariaDetails: string | null;
@@ -511,6 +511,7 @@ export declare const CheckableFormAssociated: <T extends Constructor<VividElemen
         setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
         _keypressHandler(e: KeyboardEvent): void;
         stopPropagation(e: Event): void;
+        focus(...args: any[]): void;
         _vividAriaBehaviour: import('../../aria/aria-mixin').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
@@ -864,7 +865,6 @@ export declare const CheckableFormAssociated: <T extends Constructor<VividElemen
         nonce?: string;
         tabIndex: number;
         blur(): void;
-        focus(options?: FocusOptions): void;
         ariaControls: string | null;
         ariaDescribedBy: string | null;
         ariaDetails: string | null;

package/shared/foundation/listbox/extractOptions.d.ts

@@ -0,0 +1,2 @@
+import { ListboxOption } from '../../../lib/option/option.ts';
+export declare function extractOptions(elements: Element[]): ListboxOption[];

package/shared/foundation/listbox/listbox.d.ts

@@ -13,4 +13,6 @@ export declare class Listbox extends VividElement {
     protected _newDefaultSelectedIndex(prev: ListboxOption[], next: ListboxOption[], _currentSelectedIndex: number): number | null;
     protected _isDefaultSelected(option: ListboxOption): boolean;
     protected setSelectedOptions(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
 }

package/shared/listbox/commands.d.ts

@@ -0,0 +1,17 @@
+import { TypeaheadState } from './typeahead.ts';
+import { Context, ListboxState, ListboxUIState } from './state.ts';
+import { Selection } from './selection.ts';
+export type ActionCommand = {
+    type: 'action';
+    targetIndex: number;
+    selection: Selection;
+};
+export type TypeaheadCommand = {
+    type: 'typeahead';
+    typeahead: TypeaheadState;
+    selection: Selection;
+};
+export type Command = ActionCommand | TypeaheadCommand;
+export declare function commandFromKey(state: ListboxState, ctx: Context, e: KeyboardEvent, now: number): Command | null;
+export declare function commandFromClick(_state: ListboxUIState, ctx: Context, e: MouseEvent, targetIndex: number): Command;
+export declare function apply(state: ListboxUIState, context: Context, command: Command): ListboxUIState;

package/shared/listbox/move.d.ts

@@ -0,0 +1,6 @@
+export type Move = {
+    direction: 'forward' | 'backward';
+    amount: 'step' | 'page' | 'limit';
+};
+export declare function moveFromKey(key: string): Move | null;
+export declare function moveIndex(index: number, numItems: number, pageSize: number, move: Move): number;

package/shared/listbox/options.d.ts

@@ -0,0 +1,12 @@
+import { ListboxOption } from '../../lib/option/option.ts';
+import { Context } from './state.ts';
+export type Value = string;
+export type Options = {
+    numOptions: number;
+    optionValue: (index: number) => Value;
+    optionText: (index: number) => string;
+    optionIndex: (value: Value) => number | null;
+    isEq: (options: ListboxOption[]) => boolean;
+};
+export declare const optionsInterface: (options: ListboxOption[]) => Options;
+export declare function initialValues(ctx: Context, allOptions: ListboxOption[], providedValues: Value[]): Value[];

package/shared/listbox/selection.d.ts

@@ -0,0 +1,28 @@
+import { Context, ListboxUIState } from './state.ts';
+import { Command } from './commands.ts';
+import { Value } from './options.ts';
+import { Move } from './move.ts';
+export type SelectAction = {
+    type: 'select';
+} | {
+    type: 'toggle';
+} | {
+    type: 'select-from-current';
+} | {
+    type: 'select-from-most-recent';
+} | {
+    type: 'extend-from-anchor';
+    anchorIndex: number;
+};
+export type Selection = {
+    action: SelectAction;
+    replaceExisting: boolean;
+} | null;
+type ModifierKeys = 'ShiftMod' | 'Shift' | 'Mod' | null;
+export declare const modifierKeys: (e: KeyboardEvent | MouseEvent) => ModifierKeys;
+export declare const selectionForMove: (state: ListboxUIState, ctx: Context, move: Move, mods: ModifierKeys) => Selection;
+export declare const selectionForTrigger: (ctx: Context, mods: ModifierKeys) => Selection;
+export declare function addRange(baseValues: Value[], ctx: Context, fromIdx: number, toIdx: number): Value[];
+export declare function updateAnchoredRange(baseValues: Value[], ctx: Context, anchorIdx: number, targetIdx: number, prevTargetIdx: number): Value[];
+export declare function applyAction(state: ListboxUIState, ctx: Context, command: Command): ListboxUIState;
+export {};