@vonage/vivid 5.24.0 → 5.25.0

package/unbundled/definition49.cjs

@@ -1,118 +1,622 @@
-require("./chunk.cjs");
+const require_chunk = require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
-const require_definition = require("./definition.cjs");
 const require_decorate = require("./decorate.cjs");
-const require_affix = require("./affix.cjs");
-const require_delegates_aria = require("./delegates-aria.cjs");
+const require_host_semantics = require("./host-semantics.cjs");
+const require_option = require("./option.cjs");
+const require_optgroup = require("./optgroup.cjs");
+const require_extractOptions = require("./extractOptions.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
-//#region src/lib/nav-disclosure/nav-disclosure.scss?inline
-var nav_disclosure_default = ".control.connotation-cta{--_connotation-color-primary:var(--vvd-nav-disclosure-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-nav-disclosure-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-nav-disclosure-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-contrast:var(--vvd-nav-disclosure-cta-contrast,var(--vvd-color-cta-800));--_connotation-color-fierce:var(--vvd-nav-disclosure-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-fierce-primary:var(--vvd-nav-disclosure-cta-fierce-primary,var(--vvd-color-cta-700));--_connotation-color-faint:var(--vvd-nav-disclosure-cta-faint,var(--vvd-color-cta-50));--_connotation-color-firm:var(--vvd-nav-disclosure-cta-firm,var(--vvd-color-cta-600));--_connotation-color-soft:var(--vvd-nav-disclosure-cta-soft,var(--vvd-color-cta-100))}.control:not(.connotation-cta){--_connotation-color-primary:var(--vvd-nav-disclosure-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-nav-disclosure-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-nav-disclosure-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-nav-disclosure-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-nav-disclosure-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-fierce-primary:var(--vvd-nav-disclosure-accent-fierce-primary,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-nav-disclosure-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-firm:var(--vvd-nav-disclosure-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-nav-disclosure-accent-soft,var(--vvd-color-neutral-100))}.control,.control.appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:transparent}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control.active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:transparent}.control.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.control.selected:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-firm), transparent 10%);--_appearance-color-outline:transparent}@media (hover:hover){.control.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}.control.selected:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline:transparent}}.control.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}.control.selected.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline:transparent}.control{box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);cursor:pointer;font:var(--vvd-typography-base);hyphens:auto;inline-size:100%;min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));vertical-align:middle;border-radius:8px;align-items:center;gap:12px;padding-block:10px;padding-inline:16px;text-decoration:none;display:flex}.control.current-closed{color:var(--_appearance-color-text)}@supports not (color:color-mix(in srgb, var(--one-color), var(--second-color))){.control.current-closed{background-color:var(--_connotation-color-primary)}}.control:not(.current-closed){color:var(--vvd-color-canvas-text);--focus-stroke-gap-color:transparent}.control:focus-visible{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))}.control{user-select:none}.control .toggleIcon{margin-inline-start:auto}slot[name=icon]{font-size:20px;line-height:1}.content{border-inline-start:1px solid var(--vvd-color-neutral-200);flex-direction:column;gap:4px;margin-block:4px;margin-inline-start:20px;padding-inline-start:12px;display:flex}details>summary{list-style:none}details>summary::-webkit-details-marker{display:none}";
+let scroll_into_view_if_needed = require("scroll-into-view-if-needed");
+scroll_into_view_if_needed = require_chunk.__toESM(scroll_into_view_if_needed, 1);
+//#region src/shared/listbox/with-options-filter.ts
+function applyFilter(allOptions, allElements, optionFilter, searchText) {
+	const newFilteredOptions = [];
+	for (const option of allOptions) {
+		option._vvdSearchText = searchText;
+		const matches = !searchText || optionFilter(option, searchText);
+		option._isNotMatching = !matches;
+		if (!option.hidden && !option.disabled && matches) newFilteredOptions.push(option);
+	}
+	for (const el of allElements) if (require_optgroup.isOptgroup(el)) {
+		const hasVisibleOption = Array.from(el.children).some((child) => require_option.isListboxOption(child) && !child._isNotMatching && !child.hidden);
+		el.style.display = hasVisibleOption ? "" : "none";
+	}
+	return newFilteredOptions;
+}
+var WithOptionsFilter = (Base) => {
+	class WithOptionsElement extends Base {
+		constructor(..._args) {
+			super(..._args);
+			this.searchText = "";
+			this._filteredOptions = [];
+		}
+		/** @internal */
+		_slottedOptionsChanged() {
+			super._slottedOptionsChanged();
+			this._updateFilter();
+		}
+		/** @internal */
+		searchTextChanged() {
+			this._updateFilter();
+		}
+		/** @internal */
+		optionFilterChanged() {
+			this._updateFilter();
+		}
+		/** @internal */
+		_updateFilter() {
+			this._filteredOptions = applyFilter(this._slottedOptions, this._slottedElements, this.optionFilter ?? ((option, searchText) => option.text.toLowerCase().includes(searchText.toLowerCase())), this.searchText);
+		}
+	}
+	require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+		attribute: "search-text",
+		mode: "fromView"
+	})], WithOptionsElement.prototype, "searchText", void 0);
+	require_decorate.__decorate([_microsoft_fast_element.observable], WithOptionsElement.prototype, "optionFilter", void 0);
+	require_decorate.__decorate([_microsoft_fast_element.observable], WithOptionsElement.prototype, "_filteredOptions", void 0);
+	return WithOptionsElement;
+};
+//#endregion
+//#region src/shared/listbox/with-options.ts
+/** A mixin for elements that accept slotted options */
+var WithOptions = (Base) => {
+	class WithOptionsElement extends Base {
+		constructor(..._args) {
+			super(..._args);
+			this._slottedElements = [];
+			this.#onOptgroupChange = () => {
+				this._slottedElementsChanged();
+			};
+			this._slottedOptions = [];
+		}
+		/** @internal */
+		_slottedElementsChanged() {
+			this._slottedOptions = require_extractOptions.extractOptions(this._slottedElements);
+		}
+		#onOptgroupChange;
+		connectedCallback() {
+			super.connectedCallback();
+			this.addEventListener("optgroup-change", this.#onOptgroupChange);
+		}
+		disconnectedCallback() {
+			super.disconnectedCallback();
+			this.removeEventListener("optgroup-change", this.#onOptgroupChange);
+		}
+		/** @internal */
+		_slottedOptionsChanged() {
+			for (const option of this._slottedOptions) if (!option.id) option.id = (0, _microsoft_fast_web_utilities.uniqueId)("option-");
+		}
+	}
+	require_decorate.__decorate([_microsoft_fast_element.observable], WithOptionsElement.prototype, "_slottedElements", void 0);
+	require_decorate.__decorate([_microsoft_fast_element.observable], WithOptionsElement.prototype, "_slottedOptions", void 0);
+	return WithOptionsElement;
+};
+var optionsTemplate = _microsoft_fast_element.html`<slot
+	${(0, _microsoft_fast_element.slotted)({
+	filter: ((n) => require_option.isListboxOption(n) || require_optgroup.isOptgroup(n)),
+	flatten: true,
+	property: "_slottedElements"
+})}
+>
+</slot>`;
+//#endregion
+//#region src/shared/listbox/selection.ts
+var modifierKeys = (e) => {
+	const modKey = e.ctrlKey || e.metaKey;
+	return e.shiftKey && modKey ? "ShiftMod" : e.shiftKey ? "Shift" : modKey ? "Mod" : null;
+};
+var selectionForMove = (state, ctx, move, mods) => {
+	if (move.amount === "step" && mods === "Mod") return null;
+	if (ctx.selectionMode === "multiple") {
+		if (move.amount === "step" && mods === "Shift") return {
+			action: {
+				type: "extend-from-anchor",
+				anchorIndex: state.rangeAnchorIndex ?? state.activeIndex
+			},
+			replaceExisting: false
+		};
+		if (move.amount === "limit" && mods === "ShiftMod") return {
+			action: { type: "select-from-current" },
+			replaceExisting: false
+		};
+	}
+	if (ctx.selectionBehavior === "replace") return {
+		action: { type: "select" },
+		replaceExisting: true
+	};
+	return null;
+};
+/** How the selection should change when an option is triggered (by pressing Space or clicking) */
+var selectionForTrigger = (ctx, mods) => {
+	if (mods === "Shift") return {
+		action: { type: "select-from-most-recent" },
+		replaceExisting: ctx.selectionBehavior === "replace"
+	};
+	if (mods === "Mod") return {
+		action: { type: "toggle" },
+		replaceExisting: false
+	};
+	if (ctx.selectionBehavior === "replace") return {
+		action: { type: "select" },
+		replaceExisting: true
+	};
+	return {
+		action: { type: "toggle" },
+		replaceExisting: false
+	};
+};
+function addRange(baseValues, ctx, fromIdx, toIdx) {
+	const baseSet = new Set(baseValues);
+	const [from, to] = [fromIdx, toIdx].sort((a, b) => a - b);
+	const newValues = [...baseValues];
+	for (let i = from; i <= to; i++) {
+		const v = ctx.selectable.optionValue(i);
+		if (!baseSet.has(v)) newValues.push(v);
+	}
+	return newValues;
+}
+function updateAnchoredRange(baseValues, ctx, anchorIdx, targetIdx, prevTargetIdx) {
+	const baseSet = new Set(baseValues);
+	const [from, , to] = [
+		anchorIdx,
+		targetIdx,
+		prevTargetIdx
+	].sort((a, b) => a - b);
+	let newValues = [...baseValues];
+	for (let i = from; i <= to; i++) {
+		const v = ctx.selectable.optionValue(i);
+		if (i < anchorIdx && i < targetIdx || i > anchorIdx && i > targetIdx) {
+			if (baseSet.has(v)) newValues = newValues.filter((val) => val !== v);
+		} else if (!baseSet.has(v)) newValues.push(v);
+	}
+	return newValues;
+}
+function mostRecentlySelectedIndex(state, ctx) {
+	const values = state.values;
+	for (let i = values.length - 1; i >= 0; i--) {
+		const index = ctx.selectable.optionIndex(values[i]);
+		if (index !== null) return index;
+	}
+	return null;
+}
+function applyAction(state, ctx, command) {
+	const newState = (v) => {
+		return {
+			...state,
+			values: v.values ?? state.values,
+			activeIndex: v.activeIndex ?? state.activeIndex,
+			rangeAnchorIndex: v.rangeAnchorIndex ?? null
+		};
+	};
+	if (command.type !== "action") return newState({});
+	const prevValues = state.values;
+	const { targetIndex, selection } = command;
+	const enforceRestrictions = (newValues) => {
+		if (ctx.selectionMode === "single" && newValues.length > 1) return [newValues[newValues.length - 1]];
+		if (ctx.requiredSelection !== "none") {
+			if (newValues.length === 0) return prevValues;
+			if (ctx.requiredSelection === "selectable") {
+				if (!newValues.some((v) => ctx.selectable.optionIndex(v) !== null)) return prevValues;
+			}
+		}
+		return newValues;
+	};
+	const targetValue = ctx.selectable.optionValue(targetIndex);
+	const baseValues = selection?.replaceExisting ? [] : prevValues;
+	switch (selection?.action.type) {
+		case void 0: return newState({ activeIndex: targetIndex });
+		case "select": return newState({
+			activeIndex: targetIndex,
+			values: enforceRestrictions(prevValues.includes(targetValue) ? prevValues : [...baseValues, targetValue])
+		});
+		case "toggle": return newState({
+			activeIndex: targetIndex,
+			values: enforceRestrictions(prevValues.includes(targetValue) ? baseValues.filter((v) => v !== targetValue) : [...baseValues, targetValue])
+		});
+		case "select-from-current": return newState({
+			activeIndex: targetIndex,
+			values: enforceRestrictions(addRange(baseValues, ctx, state.activeIndex, targetIndex))
+		});
+		case "select-from-most-recent": return newState({
+			activeIndex: targetIndex,
+			values: enforceRestrictions(addRange(baseValues, ctx, mostRecentlySelectedIndex(state, ctx) ?? 0, targetIndex))
+		});
+		case "extend-from-anchor": return newState({
+			values: enforceRestrictions(updateAnchoredRange(baseValues, ctx, selection.action.anchorIndex, targetIndex, state.activeIndex)),
+			activeIndex: targetIndex,
+			rangeAnchorIndex: selection.action.anchorIndex
+		});
+	}
+}
+//#endregion
+//#region src/shared/listbox/typeahead.ts
+var TypeaheadTimeout = 2e3;
+function typeaheadFromKey(state, _ctx, key, now) {
+	const typeahead = state.typeahead && state.typeahead.lastInputMs > now - TypeaheadTimeout ? state.typeahead : null;
+	return key.length === 1 && !(key === _microsoft_fast_web_utilities.keySpace && !typeahead) ? {
+		buffer: (typeahead?.buffer ?? "") + key,
+		lastInputMs: now
+	} : null;
+}
+function applyTypeahead(state, ctx, command) {
+	if (command.type !== "typeahead") return {
+		...state,
+		typeahead: null
+	};
+	const typeahead = command.typeahead;
+	for (let candidateIdx = (state.activeIndex + 1) % ctx.selectable.numOptions; candidateIdx !== state.activeIndex; candidateIdx = (candidateIdx + 1) % ctx.selectable.numOptions) if (ctx.selectable.optionText(candidateIdx).toLowerCase().startsWith(typeahead.buffer.toLowerCase())) return {
+		...applyAction(state, ctx, {
+			type: "action",
+			targetIndex: candidateIdx,
+			selection: command.selection
+		}),
+		typeahead
+	};
+	return {
+		...state,
+		typeahead
+	};
+}
+//#endregion
+//#region src/shared/listbox/options.ts
+var optionsInterface = (options) => ({
+	numOptions: options.length,
+	optionValue: (index) => options[index].value,
+	optionText: (index) => options[index].text,
+	optionIndex: (value) => {
+		const index = options.findIndex((o) => o.value === value);
+		return index === -1 ? null : index;
+	},
+	isEq: (newOptions) => options === newOptions
+});
+function initialValues(ctx, allOptions, providedValues) {
+	const selectedValues = allOptions.filter((option) => option.selected || providedValues.includes(option.value)).map((o) => o.value);
+	const maxSelected = ctx.selectionMode === "single" ? 1 : Infinity;
+	return ensureRequiredSelection(ctx, selectedValues.slice(0, maxSelected), maxSelected);
+}
+//#endregion
+//#region src/shared/listbox/state.ts
+function isUIState(state) {
+	return "activeIndex" in state;
+}
+function applyContextChange(state, newCtx, requestedValues) {
+	const validValues = requestedValues.filter((v) => newCtx.all.optionIndex(v) !== null);
+	const maxSelected = newCtx.selectionMode === "single" ? 1 : Infinity;
+	let values = validValues.slice(0, maxSelected);
+	values = ensureRequiredSelection(newCtx, values, maxSelected);
+	return {
+		...state,
+		values
+	};
+}
+/**
+* Applies the `requiredSelection` restriction to a set of values, selecting a selectable option if needed.
+* @internal
+*/
+function ensureRequiredSelection(ctx, values, maxSelected) {
+	if (ctx.requiredSelection === "none" || ctx.selectable.numOptions === 0) return values;
+	if (values.length === 0) return [ctx.selectable.optionValue(0)];
+	if (ctx.requiredSelection === "selectable") {
+		if (!values.some((v) => ctx.selectable.optionIndex(v) !== null)) return maxSelected === 1 ? [ctx.selectable.optionValue(0)] : [...values, ctx.selectable.optionValue(0)];
+	}
+	return values;
+}
+function initialState(ctx, providedOptions, providedValues) {
+	const values = initialValues(ctx, providedOptions, providedValues);
+	if (ctx.selectable.numOptions === 0) return valuesOnlyState(values);
+	let activeIndex = 0;
+	for (const candidate of values) {
+		const index = ctx.selectable.optionIndex(candidate);
+		if (index !== null) {
+			activeIndex = index;
+			break;
+		}
+	}
+	return {
+		values,
+		activeIndex,
+		typeahead: null,
+		rangeAnchorIndex: null
+	};
+}
+function valuesOnlyState(values) {
+	return { values };
+}
+//#endregion
+//#region src/shared/listbox/move.ts
+function moveFromKey(key) {
+	switch (key) {
+		case "Home": return {
+			direction: "backward",
+			amount: "limit"
+		};
+		case "End": return {
+			direction: "forward",
+			amount: "limit"
+		};
+		case "PageUp": return {
+			direction: "backward",
+			amount: "page"
+		};
+		case "PageDown": return {
+			direction: "forward",
+			amount: "page"
+		};
+		case "ArrowUp": return {
+			direction: "backward",
+			amount: "step"
+		};
+		case "ArrowDown": return {
+			direction: "forward",
+			amount: "step"
+		};
+	}
+	return null;
+}
+function moveIndex(index, numItems, pageSize, move) {
+	const limits = {
+		backward: 0,
+		forward: numItems - 1
+	};
+	const dirs = {
+		backward: -1,
+		forward: 1
+	};
+	const amounts = {
+		step: 1,
+		page: pageSize
+	};
+	switch (move.amount) {
+		case "limit": return limits[move.direction];
+		case "page":
+		case "step": return Math.min(limits.forward, Math.max(limits.backward, index + dirs[move.direction] * amounts[move.amount]));
+	}
+}
 //#endregion
-//#region src/lib/nav-disclosure/nav-disclosure.ts
+//#region src/shared/listbox/commands.ts
+var PageSize = 10;
+function commandFromKey(state, ctx, e, now) {
+	if (!isUIState(state)) return null;
+	const typeahead = typeaheadFromKey(state, ctx, e.key, now);
+	if (typeahead) return {
+		type: "typeahead",
+		typeahead,
+		selection: ctx.selectionBehavior === "replace" ? {
+			action: { type: "select" },
+			replaceExisting: true
+		} : null
+	};
+	const move = moveFromKey(e.key);
+	if (move) return {
+		type: "action",
+		targetIndex: moveIndex(state.activeIndex, ctx.selectable.numOptions, PageSize, move),
+		selection: selectionForMove(state, ctx, move, modifierKeys(e))
+	};
+	if (e.key === " ") return {
+		type: "action",
+		targetIndex: state.activeIndex,
+		selection: selectionForTrigger(ctx, modifierKeys(e))
+	};
+	return null;
+}
+function commandFromClick(_state, ctx, e, targetIndex) {
+	return {
+		type: "action",
+		targetIndex,
+		selection: selectionForTrigger(ctx, modifierKeys(e))
+	};
+}
+function apply(state, context, command) {
+	state = applyTypeahead(state, context, command);
+	state = applyAction(state, context, command);
+	return state;
+}
+//#endregion
+//#region src/lib/listbox/listbox.ts
+var deepEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);
 /**
 * @public
-* @component nav-disclosure
-* @slot - Default slot.
-* @slot meta - A slot to add additional content to the nav disclosure.
-* @slot icon - The preferred way to add an icon to the component.
-* @event {CustomEvent<undefined>} toggle - Event emitted when the nav disclosure is toggled.
-* @testSelector byLabel byLabel
-* @testAction expand toggleNavDisclosure true
-* @testAction collapse toggleNavDisclosure false
-* @testQuery current navCurrent true
-* @testQuery !current navCurrent false
-* @testQuery open open true
-* @testQuery closed open false
-* @testRef summary shadow summary
+* @component listbox
+* @slot - Holds the available options.
+* @slot no-matches - Message that appears when no options match the search query.
+* @event {CustomEvent<undefined>} change - Fired when the selected options change.
+* @vueModel modelValue value change `event.currentTarget.value`
+* @vueModel values values change `event.currentTarget.values`
 */
-var NavDisclosure = class extends require_affix.AffixIcon(require_delegates_aria.DelegatesAria(require_vivid_element.VividElement)) {
+var Listbox = class extends WithOptionsFilter(WithOptions(require_host_semantics.HostSemantics(require_vivid_element.VividElement))) {
 	constructor(..._args) {
 		super(..._args);
-		this.open = false;
-		this.current = false;
-		this.#onToggle = () => {
-			this.open = this.details.open;
-			this.$emit("toggle", void 0, { bubbles: false });
+		this.selectionMode = "single";
+		this.selectionBehavior = "toggle";
+		this.requiredSelection = "none";
+		this._activeDescendantId = null;
+		this.values = [];
+		this._state = valuesOnlyState([]);
+		this._ctx = {
+			selectionMode: "single",
+			selectionBehavior: "toggle",
+			requiredSelection: "none",
+			selectable: optionsInterface([]),
+			all: optionsInterface([])
+		};
+		this._externalChangeQueued = false;
+	}
+	/** @internal */
+	selectionModeChanged() {
+		this._registerExternalChange();
+	}
+	/** @internal */
+	selectionBehaviorChanged() {
+		this._registerExternalChange();
+	}
+	/** @internal */
+	requiredSelectionChanged() {
+		this._registerExternalChange();
+	}
+	/** @internal */
+	_filteredOptionsChanged() {
+		this._registerExternalChange();
+	}
+	/** @internal */
+	valuesChanged() {
+		if (this._state && !deepEqual(this._state.values, this.values)) this._registerExternalChange();
+	}
+	/** The first selected option value, or `null` if no option is selected. In single-selection mode, this can be used as an alternative to `values`. */
+	get value() {
+		return this.values[0] ?? null;
+	}
+	set value(value) {
+		this.values = value === null ? [] : [value];
+	}
+	/**
+	* Use a microtask to batch multiple synchronous changes. Otherwise, we may update the state based on half-applied changes.
+	* @internal
+	*/
+	_registerExternalChange() {
+		if (!this._externalChangeQueued) {
+			this._externalChangeQueued = true;
+			queueMicrotask(() => this._applyPendingExternalChanges());
+		}
+	}
+	/**
+	* React to external changes of props or options
+	* @internal
+	*/
+	_applyPendingExternalChanges() {
+		this._externalChangeQueued = false;
+		if (!this._ctx.all.isEq(this._slottedOptions) || !this._ctx.selectable.isEq(this._filteredOptions)) {
+			this._initializeState();
+			return;
+		}
+		const newCtx = {
+			...this._ctx,
+			selectionMode: this.selectionMode,
+			selectionBehavior: this.selectionBehavior,
+			requiredSelection: this.requiredSelection
 		};
+		this._ctx = newCtx;
+		this._applyNewState(applyContextChange(this._state, newCtx, this.values));
 	}
 	/** @internal */
-	connectedCallback() {
-		super.connectedCallback();
-		this.details.addEventListener("toggle", this.#onToggle);
-		this.details.open = this.open;
+	_initializeState() {
+		this._ctx = {
+			selectionMode: this.selectionMode,
+			selectionBehavior: this.selectionBehavior,
+			requiredSelection: this.requiredSelection,
+			selectable: optionsInterface(this._filteredOptions),
+			all: optionsInterface(this._slottedOptions)
+		};
+		if (!this._slottedOptions?.length) {
+			this._state = valuesOnlyState([]);
+			this._activeDescendantId = null;
+			return;
+		}
+		this._applyNewState(initialState(this._ctx, this._slottedOptions, this.values));
 	}
 	/** @internal */
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.details.removeEventListener("toggle", this.#onToggle);
+	_applyNewState(toState) {
+		if (isUIState(toState)) {
+			const activeOption = this._filteredOptions[toState.activeIndex];
+			this._activeDescendantId = activeOption.id;
+			(0, scroll_into_view_if_needed.default)(activeOption, {
+				block: "nearest",
+				scrollMode: "if-needed"
+			});
+		} else this._activeDescendantId = null;
+		const valuesChanged = !deepEqual(this.values, toState.values);
+		this._state = toState;
+		this.values = [...toState.values];
+		this._updateSlottedOptions();
+		if (valuesChanged) this.$emit("change", void 0, {
+			bubbles: false,
+			composed: false
+		});
+	}
+	/** @internal */
+	_updateSlottedOptions() {
+		for (const option of this._slottedOptions) {
+			option.selected = this.values.includes(option.value);
+			option._highlighted = Boolean(this._activeDescendantId && option.id === this._activeDescendantId);
+		}
+	}
+	/** @internal */
+	_onKeydown(e) {
+		const command = commandFromKey(this._state, this._ctx, e, Date.now());
+		if (command) {
+			this._applyNewState(apply(this._state, this._ctx, command));
+			return false;
+		}
+		return true;
+	}
+	/** @internal */
+	_onClick(e) {
+		const clickedOnOption = e.target.closest(`[data-vvd-component=option]`);
+		const targetIndex = clickedOnOption ? this._filteredOptions.indexOf(clickedOnOption) : -1;
+		if (targetIndex === -1) return true;
+		const state = this._state;
+		this._applyNewState(apply(state, this._ctx, commandFromClick(state, this._ctx, e, targetIndex)));
+		return false;
 	}
-	#onToggle;
 };
-require_decorate.__decorate([_microsoft_fast_element.attr], NavDisclosure.prototype, "label", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], NavDisclosure.prototype, "appearance", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], NavDisclosure.prototype, "connotation", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], NavDisclosure.prototype, "open", void 0);
-require_decorate.__decorate([require_vivid_element.replaces({
-	deprecatedPropertyName: "ariaCurrent",
-	fromDeprecated: (v) => Boolean(v),
-	toDeprecated: (v) => v ? "true" : null
-}), (0, _microsoft_fast_element.attr)({
-	attribute: "current",
-	mode: "boolean"
-})], NavDisclosure.prototype, "current", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+	attribute: "selection-mode",
+	mode: "fromView"
+})], Listbox.prototype, "selectionMode", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+	attribute: "selection-behavior",
+	mode: "fromView"
+})], Listbox.prototype, "selectionBehavior", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+	attribute: "required-selection",
+	mode: "fromView"
+})], Listbox.prototype, "requiredSelection", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Listbox.prototype, "_activeDescendantId", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Listbox.prototype, "values", void 0);
+//#endregion
+//#region src/lib/listbox/listbox.scss?inline
+var listbox_default = ":host{outline:none;flex-direction:column;gap:2px;display:flex}:host(:not(:focus-visible)){--_suppressable-focus-shadow:none;--_suppressable-focus-outline:none;--_suppressable-focus-outline-offset:0}";
 //#endregion
-//#region src/lib/nav-disclosure/nav-disclosure.template.ts
-var NavDisclosureTemplate = (context) => {
-	const affixIconTemplate = require_affix.affixIconTemplateFactory(context);
-	const iconTag = context.tagFor(require_definition.Icon);
-	return _microsoft_fast_element.html`<details class="base" ${(0, _microsoft_fast_element.ref)("details")} ?open=${(x) => x.open}>
-		<summary class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("control", [`appearance-${x.appearance}`, Boolean(x.appearance)], [`connotation-${x.connotation}`, Boolean(x.connotation)], ["current-closed selected", x.current && !x.open])}"
-			${require_delegates_aria.delegateAria({
-		role: "button",
-		ariaExpanded: (x) => x.open,
-		ariaCurrent: (x) => x.open ? null : x.current || x.ariaCurrent ? "true" : null,
-		ariaControls: "disclosure-content"
+//#region src/lib/listbox/listbox.template.ts
+var listboxTemplate = (_context) => {
+	return _microsoft_fast_element.html`<template
+		tabindex="0"
+		${require_host_semantics.applyHostSemantics({
+		role: "listbox",
+		ariaMultiSelectable: (x) => x.selectionMode === "multiple" ? "true" : void 0
 	})}
-		>
-			${(x) => affixIconTemplate(x.icon, require_affix.IconWrapper.Slot)}
-			${(x) => x.label}
-			<slot name="meta"></slot>
-			<${iconTag} class="toggleIcon" name=${(x) => x.open ? "chevron-up-line" : "chevron-down-line"}
-				aria-hidden="true"></${iconTag}>
-		</summary>
-		<div class="content" id="disclosure-content">
-			<slot></slot>
-		</div>
-	</details>
-	`;
+		aria-activedescendant="${(x) => x._activeDescendantId}"
+		@click="${(x, c) => x._onClick(c.event)}"
+		@keydown="${(x, c) => x._onKeydown(c.event)}"
+		>${optionsTemplate}${(0, _microsoft_fast_element.when)((x) => x.searchText !== "" && x._filteredOptions.length === 0, _microsoft_fast_element.html`<slot name="no-matches"></slot>`)}</template
+	>`;
 };
 //#endregion
-//#region src/lib/nav-disclosure/definition.ts
+//#region src/lib/listbox/definition.ts
 /** @internal */
-var navDisclosureDefinition = require_vivid_element.defineVividComponent("nav-disclosure", NavDisclosure, NavDisclosureTemplate, [require_definition.iconDefinition], { styles: nav_disclosure_default });
+var listboxDefinition = require_vivid_element.defineVividComponent("listbox", Listbox, listboxTemplate, [], { styles: listbox_default });
 /**
-* Registers the nav-disclosure elements with the design system.
+* Registers the listbox elements with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerNavDisclosure = require_vivid_element.createRegisterFunction(navDisclosureDefinition);
+var registerListbox = require_vivid_element.createRegisterFunction(listboxDefinition);
 //#endregion
-Object.defineProperty(exports, "NavDisclosure", {
+Object.defineProperty(exports, "Listbox", {
 	enumerable: true,
 	get: function() {
-		return NavDisclosure;
+		return Listbox;
 	}
 });
-Object.defineProperty(exports, "navDisclosureDefinition", {
+Object.defineProperty(exports, "listboxDefinition", {
 	enumerable: true,
 	get: function() {
-		return navDisclosureDefinition;
+		return listboxDefinition;
 	}
 });
-Object.defineProperty(exports, "registerNavDisclosure", {
+Object.defineProperty(exports, "registerListbox", {
 	enumerable: true,
 	get: function() {
-		return registerNavDisclosure;
+		return registerListbox;
 	}
 });