@vonage/vivid 5.23.1 → 5.24.0

package/unbundled/definition62.cjs

@@ -1,141 +1,813 @@
 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_slottable_request = require("./slottable-request.cjs");
+const require_affix = require("./affix.cjs");
+const require_form_associated = require("./form-associated.cjs");
+const require_localized = require("./localized.cjs");
+const require_definition$1 = require("./definition6.cjs");
+const require_dialog = require("./dialog.cjs");
+const require_definition$2 = require("./definition9.cjs");
+const require_host_semantics = require("./host-semantics.cjs");
+const require_mixins = require("./mixins.cjs");
+const require_form_element = require("./form-element.cjs");
+const require_with_error_text = require("./with-error-text.cjs");
+const require_with_success_text = require("./with-success-text.cjs");
+const require_with_contextual_help = require("./with-contextual-help.cjs");
+const require_definition$3 = require("./definition29.cjs");
+const require_definition$4 = require("./definition30.cjs");
+const require_listbox = require("./listbox.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
-let prosemirror_model = require("prosemirror-model");
-//#region src/lib/rich-text-view/rich-text-view.scss?inline
-var rich_text_view_default = ":host{display:contents}.content{overflow-wrap:break-word;white-space:break-spaces;display:contents}";
+let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
+//#region src/lib/select/select.scss?inline
+var select_default = ".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)}:host(:focus-visible){outline:none}:host{--_low-ink-color:var(--vvd-color-neutral-600);--focus-stroke-gap-color:transparent;flex-direction:column;gap:4px;display:inline-flex}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-600);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.control{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.control.appearance-ghost{--_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(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.control: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}}.control.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)}.control.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}.control: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)}.control:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control.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)}.control.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control.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)}.control.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control.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)}.control.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.control.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)}.control.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.control{--_connotation-color-primary:var(--vvd-select-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-select-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-select-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-intermediate:var(--vvd-select-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-faint:var(--vvd-select-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-select-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-firm:var(--vvd-select-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-fierce:var(--vvd-select-accent-fierce,var(--vvd-color-neutral-700));border-radius:var(--_select-control-border-radius);block-size:var(--_select-block-size);padding-inline:var(--_select-padding-inline);--_select-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);--_select-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_select-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);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;transition:box-shadow .2s,background-color .2s;display:flex}.control.size-condensed{--_select-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_select-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_select-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2)}.control.size-condensed:not(.shape-pill){--_select-control-border-radius:4px}.control-wrapper{position:relative}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.control:not(.shape-pill){--_select-control-border-radius:8px}.control.shape-pill{--_select-control-border-radius:24px}.listbox{max-height:var(--select-height,408px);flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}:host([multiple]:focus-visible) .listbox{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));border-radius:8px}.selected-value{white-space:nowrap;flex-grow:1;align-items:center;column-gap:12px;display:flex;overflow:hidden}.selected-value .text{text-overflow:ellipsis;max-inline-size:100%;overflow:hidden}.control.shows-placeholder .selected-value .text{color:var(--vvd-color-neutral-600)}.selected-value slot[name=icon]{flex:0 0 var(--_select-icon-size);font-size:var(--_select-icon-size);line-height:1}.control.has-meta .selected-value{padding-inline-end:8px}.feedback-wrapper{display:contents}::part(popup-base){inline-size:max-content;min-inline-size:var(--_select-fixed-width,100%)}:host([multiple]) ::part(popup-base){position:static}@supports selector(:has(*)){:host(:focus-within) .control:not(.has-activedescendant,:has(.clear-button:focus)){--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))}}@supports not selector(:has(*)){:host(:focus-within) .control:not(.has-activedescendant){--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))}}:host([multiple]),:host(:not(:focus-visible)){--_suppressable-focus-shadow:none;--_suppressable-focus-outline:none;--_suppressable-focus-outline-offset:0}:host([multiple]) .clear-button{margin-inline-start:auto}:host([multiple][clearable]) .label-wrapper{min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}";
 //#endregion
-//#region src/lib/rich-text-view/rich-text-view.ts
+//#region src/lib/select/select.ts
 /**
 * @public
-* @component rich-text-view
-* @dynamicSlot `@vonage/vivid#RteChildSlotProps` child - Used for custom rendered children.
+* @component select
+* @slot - Default slot.
+* @slot icon - The preferred way to add an icon to the select control.
+* @slot meta - Slot to add meta content to the select control.
+* @slot helper-text - Describes how to use the select. Alternative to the `helper-text` attribute.
+* @event {CustomEvent<undefined>} input - Fires a custom 'input' event when the value updates
+* @event {CustomEvent<HTMLElement>} change - Fires a custom 'change' event when the value updates
+* @vueModel modelValue value input,@lazy:change `event.currentTarget.value`
+* @testAction selectOptionByValue selectOptionByValue
+* @testAction selectOptionByText selectOptionByText
 */
-var RichTextView = class extends require_vivid_element.VividElement {
+var Select = class extends require_mixins.WithLightDOMFeedback(require_with_contextual_help.WithContextualHelp(require_with_error_text.WithErrorText(require_with_success_text.WithSuccessText(require_localized.Localized(require_form_element.FormElement(require_host_semantics.HostSemantics(require_affix.AffixIconWithTrailing(require_form_associated.FormAssociated(require_listbox.Listbox))))))))) {
 	constructor(..._args) {
 		super(..._args);
-		this._slotCounter = 0;
-		this._slottedChildren = /* @__PURE__ */ new Set();
-		this._slotRequests = /* @__PURE__ */ new Set();
-		this._contentElement = null;
+		this.proxy = document.createElement("select");
+		this.activeIndex = -1;
+		this.rangeStartIndex = -1;
+		this.open = false;
+		this.listboxId = (0, _microsoft_fast_web_utilities.uniqueId)("listbox-");
+		this.maxHeight = 0;
+		this.fixedDropdown = false;
+		this._feedbackWrapper = null;
+		this._isResetting = false;
+		this.clearable = false;
+		this._isClearButtonFocused = false;
+	}
+	/**
+	* Returns the last checked option.
+	*
+	* @internal
+	*/
+	get activeOption() {
+		return this.options[this.activeIndex];
+	}
+	/**
+	* Returns the list of checked options.
+	*
+	* @internal
+	*/
+	get checkedOptions() {
+		return this.options.filter((o) => o.checked);
+	}
+	/**
+	* Returns the index of the first selected option.
+	*
+	* @internal
+	*/
+	get firstSelectedOptionIndex() {
+		return this.options.indexOf(this.firstSelectedOption);
+	}
+	/**
+	* Updates the `ariaActiveDescendant` property when the active index changes.
+	*
+	* @internal
+	*/
+	activeIndexChanged(_, next) {
+		this._activeDescendant = this.options[next]?.id ?? "";
+		this.focusAndScrollOptionIntoView();
+	}
+	/**
+	* Toggles the checked state for the currently active option.
+	*
+	* @remarks
+	* Multiple-selection mode only.
+	*
+	* @internal
+	*/
+	checkActiveIndex() {
+		const activeItem = this.activeOption;
+		/* v8 ignore else -- @preserve */
+		if (activeItem) activeItem.checked = true;
+	}
+	/**
+	* Sets the active index to the first option and marks it as checked.
+	*
+	* @remarks
+	* Multi-selection mode only.
+	*
+	* @param preserveChecked - mark all options unchecked before changing the active index
+	*
+	* @internal
+	*/
+	checkFirstOption(preserveChecked) {
+		const firstSelectableIndex = this.getNextSelectableIndex(0);
+		if (firstSelectableIndex === -1) return;
+		if (preserveChecked) {
+			if (this.rangeStartIndex === -1) this.rangeStartIndex = this.activeIndex;
+			this.options.forEach((o, i) => {
+				o.checked = (0, _microsoft_fast_web_utilities.inRange)(i, firstSelectableIndex, this.rangeStartIndex + 1) && !o.disabled;
+			});
+		} else this.uncheckAllOptions();
+		this.activeIndex = firstSelectableIndex;
+		this.checkActiveIndex();
+	}
+	/**
+	* Decrements the active index and sets the matching option as checked.
+	*
+	* @remarks
+	* Multi-selection mode only.
+	*
+	* @param preserveChecked - mark all options unchecked before changing the active index
+	*
+	* @internal
+	*/
+	checkLastOption(preserveChecked) {
+		const lastSelectableIndex = this.getPreviousSelectableIndex(this.length - 1);
+		if (lastSelectableIndex === -1) return;
+		if (preserveChecked) {
+			if (this.rangeStartIndex === -1) this.rangeStartIndex = this.activeIndex;
+			this.options.forEach((o, i) => {
+				o.checked = (0, _microsoft_fast_web_utilities.inRange)(i, this.rangeStartIndex, lastSelectableIndex + 1) && !o.disabled;
+			});
+		} else this.uncheckAllOptions();
+		this.activeIndex = lastSelectableIndex;
+		this.checkActiveIndex();
+	}
+	/**
+	* Increments the active index and marks the matching option as checked.
+	*
+	* @remarks
+	* Multiple-selection mode only.
+	*
+	* @param preserveChecked - mark all options unchecked before changing the active index
+	*
+	* @internal
+	*/
+	checkNextOption(preserveChecked) {
+		const nextIndex = this.getNextSelectableIndex(this.activeIndex + 1);
+		if (nextIndex === -1) return;
+		if (preserveChecked) {
+			if (this.rangeStartIndex === -1) this.rangeStartIndex = this.activeIndex;
+			this.options.forEach((o, i) => {
+				o.checked = (0, _microsoft_fast_web_utilities.inRange)(i, this.rangeStartIndex, nextIndex + 1) && !o.disabled;
+			});
+		} else this.uncheckAllOptions();
+		this.activeIndex = nextIndex;
+		this.checkActiveIndex();
+	}
+	/**
+	* Decrements the active index and marks the matching option as checked.
+	*
+	* @remarks
+	* Multiple-selection mode only.
+	*
+	* @param preserveChecked - mark all options unchecked before changing the active index
+	*
+	* @internal
+	*/
+	checkPreviousOption(preserveChecked) {
+		const previousIndex = this.getPreviousSelectableIndex(this.activeIndex - 1);
+		if (previousIndex === -1) return;
+		if (preserveChecked) {
+			if (this.rangeStartIndex === -1) this.rangeStartIndex = this.activeIndex;
+			if (this.checkedOptions.length === 1) this.rangeStartIndex += 1;
+			this.options.forEach((o, i) => {
+				o.checked = (0, _microsoft_fast_web_utilities.inRange)(i, previousIndex, this.rangeStartIndex + 1) && !o.disabled;
+			});
+		} else this.uncheckAllOptions();
+		this.activeIndex = previousIndex;
+		this.checkActiveIndex();
 	}
 	/** @internal */
-	viewChanged(oldView, newView) {
-		if (oldView) this._removeStyles();
-		if (newView) this._addStyles(newView);
-		this._updateView();
-	}
-	_addStyles(view) {
-		const config = view[require_slottable_request.impl].config[require_slottable_request.impl];
-		this._styles = new _microsoft_fast_element.ElementStyles(require_slottable_request.sortedContributions(config.features.flatMap((f) => f.getStyles())));
-		this._styles.addStylesTo(this.shadowRoot);
-	}
-	_removeStyles() {
-		if (this._styles) {
-			this._styles.removeStylesFrom(this.shadowRoot);
-			this._styles = void 0;
+	focusAndScrollOptionIntoView() {
+		super.focusAndScrollOptionIntoView(this.activeOption);
+	}
+	/**
+	* In multiple-selection mode:
+	* If any options are selected, the first selected option is checked when
+	* the listbox receives focus. If no options are selected, the first
+	* selectable option is checked.
+	*
+	* @internal
+	*/
+	focusinHandler(e) {
+		if (!this.multiple) {
+			super.focusinHandler(e);
+			return;
+		}
+		/* v8 ignore else -- @preserve */
+		if (!this.shouldSkipFocus && e.target === e.currentTarget) {
+			this.uncheckAllOptions();
+			if (this.activeIndex === -1) this.activeIndex = this.firstSelectedOptionIndex !== -1 ? this.firstSelectedOptionIndex : 0;
+			this.checkActiveIndex();
+			this.setSelectedOptions();
+			this.focusAndScrollOptionIntoView();
+		}
+		this.shouldSkipFocus = false;
+	}
+	/** Sets an option as selected and gives it focus. */
+	setSelectedOptions() {
+		if (!this.multiple) {
+			super.setSelectedOptions();
+			return;
+		}
+		/* v8 ignore else -- @preserve */
+		if (this.$fastController.isConnected && this.options) {
+			this.selectedOptions = this.options.filter((o) => o.selected);
+			this.focusAndScrollOptionIntoView();
 		}
 	}
-	_cleanupLightDom() {
-		for (const el of this._slottedChildren) this.removeChild(el);
-		for (const slotName of this._slotRequests) require_slottable_request.dispatchSlottableRequest(this, "child", slotName, require_slottable_request.removeSymbol);
-		this._slottedChildren.clear();
-		this._slotRequests.clear();
-		this._slotCounter = 0;
-	}
-	_updateView() {
-		if (!this._contentElement) return;
-		this._contentElement.innerHTML = "";
-		this._cleanupLightDom();
-		if (this.view) this._contentElement.appendChild(this._renderView(this.view));
-	}
-	_renderView(rteView) {
-		const ctx = rteView[require_slottable_request.impl];
-		if (rteView.type === "node" && rteView.node.type === "doc") rteView = rteView.children;
-		if (rteView.type === "fragment") {
-			const frag = document.createDocumentFragment();
-			for (const child of rteView.content) frag.appendChild(this._renderView(child));
-			return frag;
+	/**
+	* Toggles the selected state of the provided options. If any provided items
+	* are in an unselected state, all items are set to selected. If every
+	* provided item is selected, they are all unselected.
+	*
+	* @internal
+	*/
+	toggleSelectedForAllCheckedOptions() {
+		const enabledCheckedOptions = this.checkedOptions.filter((o) => !o.disabled);
+		const force = !enabledCheckedOptions.every((o) => o.selected);
+		enabledCheckedOptions.forEach((o) => o.selected = force);
+		this.selectedIndex = this.options.indexOf(enabledCheckedOptions[enabledCheckedOptions.length - 1]);
+		this.setSelectedOptions();
+		this.updateValue(true);
+	}
+	/** @internal */
+	typeaheadBufferChanged(prev, next) {
+		if (!this.multiple) {
+			super.typeaheadBufferChanged(prev, next);
+			return;
 		}
-		const customRenderedView = ctx.options.renderChildView?.(rteView) ?? false;
-		if (customRenderedView) return this._handleCustomRender(rteView, customRenderedView);
-		else return this._renderDefault(rteView);
-	}
-	_handleCustomRender(rteView, customResult) {
-		const slotName = `child-view-${this._slotCounter++}`;
-		const slot = document.createElement("slot");
-		slot.setAttribute("name", slotName);
-		if (customResult === true) {
-			this._slotRequests.add(slotName);
-			require_slottable_request.dispatchSlottableRequest(this, "child", slotName, { view: rteView });
-		} else {
-			const { dom, contentDom = dom } = customResult;
-			const nestedView = document.createElement(this.tagName);
-			nestedView.view = rteView.children;
-			contentDom.appendChild(nestedView);
-			dom.setAttribute("slot", slotName);
-			this.appendChild(dom);
-			this._slottedChildren.add(dom);
+		/* v8 ignore if -- @preserve */
+		if (this.$fastController.isConnected) {
+			const typeaheadMatches = this.getTypeaheadMatches();
+			const activeIndex = this.options.indexOf(typeaheadMatches[0]);
+			if (activeIndex > -1) {
+				this.activeIndex = activeIndex;
+				this.uncheckAllOptions();
+				this.checkActiveIndex();
+			}
+			this.typeaheadExpired = false;
 		}
-		return slot;
-	}
-	_renderDefault(view) {
-		const schema = view[require_slottable_request.impl].config[require_slottable_request.impl].schema;
-		if (view.type === "node" && view.node.type === "text") return document.createTextNode(view.node.text);
-		const item = view.type === "node" ? view.node : view.mark;
-		const pmItem = view.type === "node" ? prosemirror_model.Node.fromJSON(schema, item) : prosemirror_model.Mark.fromJSON(schema, item);
-		const spec = pmItem instanceof prosemirror_model.Node ? pmItem.type.spec.toDOM(pmItem) : pmItem.type.spec.toDOM(pmItem, true);
-		const { dom, contentDOM = dom } = prosemirror_model.DOMSerializer.renderSpec(document, spec);
-		const childrenRendered = this._renderView(view.children);
-		contentDOM.appendChild(childrenRendered);
-		return dom;
+	}
+	/**
+	* Unchecks all options.
+	*
+	* @remarks
+	* Multiple-selection mode only.
+	*
+	* @param preserveChecked - reset the rangeStartIndex
+	*
+	* @internal
+	*/
+	uncheckAllOptions(preserveChecked = false) {
+		this.options.forEach((o) => o.checked = false);
+		/* v8 ignore else -- @preserve */
+		if (!preserveChecked) this.rangeStartIndex = -1;
+	}
+	/**
+	* Sets focus when the open property changes.
+	*
+	* @internal
+	*/
+	openChanged(prev, next) {
+		if (!this.collapsible) return;
+		if (this.open) {
+			this.focusAndScrollOptionIntoView();
+			this.indexWhenOpened = this.selectedIndex;
+			_microsoft_fast_element.Updates.enqueue(() => this.focus());
+			return;
+		}
+		const didClose = prev && !next;
+		const selectionChangedWhileOpen = this.indexWhenOpened !== this.selectedIndex;
+		if (didClose && selectionChangedWhileOpen) this.updateValue(true);
+	}
+	/**
+	* The component is collapsible when in single-selection mode.
+	*
+	* @internal
+	*/
+	get collapsible() {
+		return !this.multiple;
+	}
+	/** @internal */
+	valueChanged(prev, next) {
+		const nextSelectedIndex = this.options.findIndex((el) => el.value === next);
+		const validNextSelectedIndex = this._validSelectedIndex(nextSelectedIndex);
+		const nextValue = this.options[validNextSelectedIndex]?.value ?? "";
+		if (this.selectedIndex !== validNextSelectedIndex) this.selectedIndex = validNextSelectedIndex;
+		if (next !== nextValue) return;
+		super.valueChanged(prev, next);
+		this.updateDisplayValue();
+	}
+	/**
+	* Sets the value and display value to match the first selected option.
+	*
+	* @param shouldEmit - if true, the input and change events will be emitted
+	*
+	* @internal
+	*/
+	updateValue(shouldEmit) {
+		if (this.$fastController.isConnected) this.value = this.firstSelectedOption?.value ?? "";
+		if (shouldEmit) {
+			this.$emit("input");
+			this.$emit("change", this, {
+				bubbles: true,
+				composed: void 0
+			});
+		}
+	}
+	/**
+	* Updates the proxy value when the selected index changes.
+	*
+	* @param prev - the previous selected index
+	* @param next - the next selected index
+	*
+	* @internal
+	*/
+	selectedIndexChanged(prev, next) {
+		super.selectedIndexChanged(prev, next);
+		this.updateValue();
+	}
+	/**
+	* Handle opening and closing the listbox when the select is clicked.
+	*
+	* @param e - the mouse event
+	* @internal
+	*/
+	clickHandler(e) {
+		if (this.disabled || this._isFromContextualHelp(e)) return;
+		const clickedOption = e.target.closest(`option,[role=option],[data-vvd-component=option]`);
+		if (clickedOption && clickedOption.disabled) return;
+		if (this.multiple) {
+			this.uncheckAllOptions();
+			this.activeIndex = this.options.indexOf(clickedOption);
+			this.checkActiveIndex();
+			this.toggleSelectedForAllCheckedOptions();
+		} else super.clickHandler(e);
+		if (this.collapsible) this.open = !this.open;
+		return true;
+	}
+	/**
+	* Handles focus state when the element or its children lose focus.
+	*
+	* @param e - The focus event
+	* @internal
+	*/
+	focusoutHandler(e) {
+		if (this.multiple) this.uncheckAllOptions();
+		if (!this.open) return true;
+		const focusTarget = e.relatedTarget;
+		if (this.isSameNode(focusTarget)) {
+			this.focus();
+			return;
+		}
+		/* v8 ignore else -- @preserve */
+		if (!this.options.includes(focusTarget)) {
+			this.open = false;
+			if (this.indexWhenOpened !== this.selectedIndex) this.updateValue(true);
+		}
+	}
+	/**
+	* Updates the value when an option's value changes.
+	*
+	* @param source - the source object
+	* @param propertyName - the property to evaluate
+	*
+	* @internal
+	*/
+	handleChange(source, propertyName) {
+		super.handleChange(source, propertyName);
+		if (propertyName === "value") this.updateValue();
+	}
+	/**
+	* Prevents focus when a scrollbar is clicked.
+	*
+	* @param e - the mouse event object
+	*
+	* @internal
+	*/
+	mousedownHandler(e) {
+		if (e.offsetX >= 0 && e.offsetX <= this.listbox.scrollWidth) return super.mousedownHandler(e);
+		return this.collapsible;
 	}
 	/** @internal */
+	multipleChanged(_, next) {
+		this.options.forEach((o) => {
+			o.checked = next ? false : void 0;
+		});
+		this.setSelectedOptions();
+		/* v8 ignore if -- @preserve */
+		if (this.proxy) this.proxy.multiple = next;
+	}
+	/**
+	* Updates the selectedness of each option when the list of selected options changes.
+	*
+	* @param prev - the previous list of selected options
+	* @param next - the current list of selected options
+	*
+	* @internal
+	*/
+	selectedOptionsChanged(prev, next) {
+		super.selectedOptionsChanged(prev, next);
+		this.options.forEach((o, i) => {
+			const proxyOption = this.proxy.options.item(i);
+			if (proxyOption) proxyOption.selected = o.selected;
+		});
+	}
+	/**
+	* Resets and fills the proxy to match the component's options.
+	*
+	* @internal
+	*/
+	setProxyOptions() {
+		/* v8 ignore else -- @preserve */
+		if (this.proxy instanceof HTMLSelectElement && this.options) {
+			this.proxy.length = 0;
+			this.options.forEach((option) => {
+				const proxyOption = option.proxy || (option instanceof HTMLOptionElement ? option.cloneNode() : null);
+				if (proxyOption) this.proxy.options.add(proxyOption);
+			});
+		}
+	}
+	/**
+	* Handles keydown actions when the select is in multiple selection mode.
+	*
+	* @internal
+	*/
+	multipleKeydownHandler(e) {
+		if (this.disabled) return;
+		const { key, shiftKey } = e;
+		this.shouldSkipFocus = false;
+		switch (key) {
+			case _microsoft_fast_web_utilities.keyHome:
+				this.checkFirstOption(shiftKey);
+				return;
+			case _microsoft_fast_web_utilities.keyArrowDown:
+				this.checkNextOption(shiftKey);
+				return;
+			case _microsoft_fast_web_utilities.keyArrowUp:
+				this.checkPreviousOption(shiftKey);
+				return;
+			case _microsoft_fast_web_utilities.keyEnd:
+				this.checkLastOption(shiftKey);
+				return;
+			case _microsoft_fast_web_utilities.keyTab:
+				this.focusAndScrollOptionIntoView();
+				return;
+			case _microsoft_fast_web_utilities.keyEscape:
+				this.uncheckAllOptions();
+				this.checkActiveIndex();
+				return;
+			case _microsoft_fast_web_utilities.keySpace:
+				e.preventDefault();
+				/* v8 ignore else -- @preserve */
+				if (this.typeaheadExpired) {
+					this.toggleSelectedForAllCheckedOptions();
+					return;
+				}
+			default:
+				/* v8 ignore else -- @preserve */
+				if (key.length === 1) this.handleTypeAhead(key);
+				return;
+		}
+	}
+	/**
+	* Handle keyboard interaction for the select.
+	*
+	* @param e - the keyboard event
+	* @internal
+	*/
+	keydownHandler(e) {
+		const selectedIndexBefore = this.selectedIndex;
+		if (this.multiple) this.multipleKeydownHandler(e);
+		else super.keydownHandler(e);
+		switch (e.key) {
+			case _microsoft_fast_web_utilities.keySpace:
+				e.preventDefault();
+				if (this.collapsible && this.typeaheadExpired) this.open = !this.open;
+				break;
+			case _microsoft_fast_web_utilities.keyHome:
+			case _microsoft_fast_web_utilities.keyEnd:
+				e.preventDefault();
+				break;
+			case _microsoft_fast_web_utilities.keyEnter:
+				e.preventDefault();
+				this.open = !this.open;
+				break;
+			case _microsoft_fast_web_utilities.keyEscape:
+				if (this.collapsible && this.open) {
+					e.preventDefault();
+					this.open = false;
+				}
+				break;
+			case _microsoft_fast_web_utilities.keyTab:
+				if (this.collapsible && this.open) {
+					e.preventDefault();
+					this.open = false;
+				}
+				return true;
+		}
+		if (this.collapsible && !this.open && this.selectedIndex !== selectedIndexBefore) this.updateValue(true);
+		return !(e.key === _microsoft_fast_web_utilities.keyArrowDown || e.key === _microsoft_fast_web_utilities.keyArrowUp);
+	}
 	connectedCallback() {
 		super.connectedCallback();
-		this._updateView();
+		this.addEventListener("focusout", this.focusoutHandler);
+		this.addEventListener("contentchange", this.updateDisplayValue);
 	}
-	/** @internal */
 	disconnectedCallback() {
+		this.removeEventListener("focusout", this.focusoutHandler);
+		this.removeEventListener("contentchange", this.updateDisplayValue);
 		super.disconnectedCallback();
-		this._removeStyles();
-		this._cleanupLightDom();
+	}
+	/** @internal */
+	updateDisplayValue() {
+		if (this.collapsible) _microsoft_fast_element.Observable.notify(this, "displayValue");
+	}
+	get displayValue() {
+		_microsoft_fast_element.Observable.track(this, "displayValue");
+		return this.firstSelectedOption?.getAttribute("label") ?? this.firstSelectedOption?.text ?? this.placeholder ?? "";
+	}
+	_newDefaultSelectedIndex(prev, next, currentSelectIndex) {
+		const defaultSelectedIndex = super._newDefaultSelectedIndex(prev, next, currentSelectIndex);
+		if (defaultSelectedIndex === null && currentSelectIndex === -1 && !this.placeholder) {
+			const firstSelectableIndex = this.getNextSelectableIndex(0);
+			if (firstSelectableIndex !== -1) return firstSelectableIndex;
+		}
+		return defaultSelectedIndex;
+	}
+	_isDefaultSelected(option) {
+		return super._isDefaultSelected(option) || option.value === this.initialValue || !this._isResetting && option.value === this.value;
+	}
+	slottedOptionsChanged(prev, next) {
+		this.options.forEach((o) => {
+			_microsoft_fast_element.Observable.getNotifier(o).unsubscribe(this, "value");
+		});
+		super.slottedOptionsChanged(prev, next);
+		this.options.forEach((o) => {
+			_microsoft_fast_element.Observable.getNotifier(o).subscribe(this, "value");
+		});
+		this.setProxyOptions();
+		this.updateValue();
+		const scale = this.getAttribute("scale") || this.scale;
+		next.forEach((element) => {
+			if (scale) {
+				element.setAttribute("scale", scale);
+				element.scale = scale;
+			}
+		});
+		this.proxy.value = this.value;
+		this.validate();
+	}
+	formResetCallback() {
+		this.setProxyOptions();
+		this._isResetting = true;
+		this.selectedIndex = this._newDefaultSelectedIndex([], this.options, -1) ?? -1;
+		this._isResetting = false;
+	}
+	/** @internal */
+	get _shouldShowClearButton() {
+		if (!this.clearable) return false;
+		if (this.multiple) return this.selectedOptions?.length > 0;
+		return this.value !== "";
+	}
+	/** @internal */
+	_onClearButtonFocus() {
+		this._isClearButtonFocused = true;
+		this.activeIndex = -1;
+		this.uncheckAllOptions();
+	}
+	/** @internal */
+	_onClearButtonBlur() {
+		this._isClearButtonFocused = false;
+	}
+	/** @internal */
+	get _shouldShowLabelWrapper() {
+		return Boolean(this.label || this._hasContextualHelp || this.multiple && this._shouldShowClearButton);
+	}
+	/** @internal */
+	_onClearButtonClick() {
+		if (this.multiple) this.selectedOptions.forEach((o) => {
+			/* v8 ignore else -- @preserve */
+			if (!o.disabled) o.selected = false;
+		});
+		else this.selectedIndex = -1;
+		this.updateValue(true);
 	}
 };
-require_decorate.__decorate([_microsoft_fast_element.observable], RichTextView.prototype, "view", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Select.prototype, "activeIndex", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Select.prototype, "multiple", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+	attribute: "open",
+	mode: "boolean"
+})], Select.prototype, "open", void 0);
+require_decorate.__decorate([_microsoft_fast_element.volatile], Select.prototype, "collapsible", null);
+require_decorate.__decorate([_microsoft_fast_element.observable], Select.prototype, "control", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Select.prototype, "maxHeight", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Select.prototype, "_anchor", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)()], Select.prototype, "scale", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], Select.prototype, "appearance", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], Select.prototype, "shape", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+	mode: "boolean",
+	attribute: "fixed-dropdown"
+})], Select.prototype, "fixedDropdown", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], Select.prototype, "placeholder", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Select.prototype, "_feedbackWrapper", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Select.prototype, "metaSlottedContent", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Select.prototype, "clearable", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Select.prototype, "_isClearButtonFocused", void 0);
 //#endregion
-//#region src/lib/rich-text-view/rich-text-view.template.ts
-var RichTextViewTemplate = () => _microsoft_fast_element.html`<div class="content rich-text" ${(0, _microsoft_fast_element.ref)("_contentElement")}></div>`;
+//#region src/lib/select/select.template.ts
+function renderLabel() {
+	return _microsoft_fast_element.html` <label
+		for="${(x) => x.multiple ? null : "control"}"
+		class="label"
+		id="label"
+	>
+		${(x) => x.label}
+	</label>`;
+}
+function renderPlaceholder(context) {
+	const optionTag = context.tagFor(require_definition$3.ListboxOption);
+	return _microsoft_fast_element.html`
+		<${optionTag} text="${(x) => x.placeholder}" hidden disabled>
+		</${optionTag}>`;
+}
+function renderClearButton(context) {
+	const buttonTag = context.tagFor(require_definition$1.Button);
+	return _microsoft_fast_element.html`
+		<${buttonTag}
+			aria-label="${(x) => x.locale.select.clearButtonLabel}"
+			aria-hidden="${(x) => x._isClearButtonFocused ? "false" : "true"}"
+			@click="${(x, c) => {
+		x._onClearButtonClick();
+		c.event.stopPropagation();
+	}}"
+			@mousedown="${() => false}"
+			@keydown="${(x, c) => {
+		/* v8 ignore next -- @preserve */
+		if (c.event.key === "Tab") x._onClearButtonBlur();
+		c.event.stopPropagation();
+		return true;
+	}}"
+			@focusin="${(x, c) => {
+		c.event.stopPropagation();
+		x._onClearButtonFocus();
+	}}"
+			@focusout="${(x) => x._onClearButtonBlur()}"
+			?disabled="${(x) => x.disabled}"
+			:shape="${(x) => x.shape}"
+			size="super-condensed"
+			icon="close-line"
+			appearance="ghost-light"
+			class="clear-button"
+			tabindex="0"
+		></${buttonTag}>
+	`;
+}
+function selectValue(context) {
+	const affixIconTemplate = require_affix.affixIconTemplateFactory(context);
+	const chevronTemplate = require_definition$1.chevronTemplateFactory(context);
+	return _microsoft_fast_element.html` <div
+		class="control ${(x) => (0, _microsoft_fast_web_utilities.classNames)(["has-activedescendant", Boolean(x._activeDescendant) && x.open], ["disabled", x.disabled], [`appearance-${x.appearance}`, Boolean(x.appearance)], [`shape-${x.shape}`, Boolean(x.shape)], ["has-meta", Boolean(x.metaSlottedContent?.length)], ["error", Boolean(x.errorValidationMessage)], ["success", !!x.successText], ["shows-placeholder", Boolean(x.placeholder) && !x.value], [`size-${x.scale}`, Boolean(x.scale)])}"
+		${(0, _microsoft_fast_element.ref)("_anchor")}
+		id="control"
+		?disabled="${(x) => x.disabled}"
+	>
+		<div class="selected-value">
+			${(x) => affixIconTemplate(x.icon, require_affix.IconWrapper.Slot)}
+			<span class="text">${(x) => x.displayValue}</span>
+			<slot name="meta" ${(0, _microsoft_fast_element.slotted)("metaSlottedContent")}></slot>
+		</div>
+		${(0, _microsoft_fast_element.when)((x) => x._shouldShowClearButton, renderClearButton(context))}
+		${chevronTemplate}
+	</div>`;
+}
+function setFixedDropdownVarWidth(x) {
+	return x.open && x.fixedDropdown ? `--_select-fixed-width: ${Math.round(x.getBoundingClientRect().width)}px` : null;
+}
+/** @param context - element definition context */
+function renderControl(context) {
+	const popupTag = context.tagFor(require_definition$2.Popup);
+	return _microsoft_fast_element.html`
+			<div class="label-wrapper" ?hidden=${(x) => !x._shouldShowLabelWrapper}>
+				${(0, _microsoft_fast_element.when)((x) => x.label, renderLabel())}
+				${(0, _microsoft_fast_element.when)((x) => x.multiple && x._shouldShowClearButton, renderClearButton(context))}
+				<slot name="contextual-help" ${(0, _microsoft_fast_element.slotted)("_contextualHelpSlottedContent")}></slot>
+			</div>
+			<div class="control-wrapper">
+				${(0, _microsoft_fast_element.when)((x) => !x.multiple, selectValue(context))}
+				<${popupTag} class="popup"
+					style="${setFixedDropdownVarWidth}"
+					?open="${(x) => x.collapsible ? x.open : true}"
+					:anchor="${(x) => x._anchor}"
+					placement="bottom-start"
+					strategy="${(x) => x.fixedDropdown ? null : "absolute"}">
+					<div class="listbox"
+						id="${(x) => x.listboxId}"
+						role="listbox"
+						aria-multiselectable="${(x) => x.multiple}"
+						aria-label="${(x) => x.multiple && !x.label && x.ariaLabel ? x.ariaLabel : null}"
+						aria-labelledby="${(x) => x.multiple && x.label ? "label" : null}"
+						?disabled="${(x) => x.disabled}"
+						?hidden="${(x) => x.collapsible ? !x.open : false}"
+						${(0, _microsoft_fast_element.ref)("listbox")}>
+						${(0, _microsoft_fast_element.when)((x) => x.placeholder, renderPlaceholder(context))}
+						<slot
+							${(0, _microsoft_fast_element.slotted)({
+		filter: require_listbox.Listbox.slottedOptionFilter,
+		flatten: true,
+		property: "slottedOptions"
+	})}>
+						</slot>
+				 	</div>
+				</${popupTag}>
+			</div>
+		`;
+}
+/** Ignore events that originate from feedback, e.g. a click on link */
+function ifNotFromFeedback(handler) {
+	return (x, c) => {
+		if (!c.event.composedPath().includes(x._feedbackWrapper)) {
+			handler(x, c.event);
+			return;
+		}
+		return true;
+	};
+}
+var SelectTemplate = (context) => {
+	return _microsoft_fast_element.html`
+		<template
+			${require_host_semantics.applyHostSemantics({
+		role: "combobox",
+		ariaLabel: (x) => x.ariaLabel ?? x.label,
+		ariaHasPopup: (x) => x.collapsible ? "listbox" : "false",
+		ariaExpanded: (x) => x.open,
+		ariaDisabled: (x) => x.disabled
+	})}
+			aria-controls="${(x) => x.listboxId}"
+			aria-activedescendant="${(x) => x.open ? x._activeDescendant : null}"
+			aria-describedby="${(x) => x._feedbackDescribedBy}"
+			tabindex="${(x) => !x.disabled ? "0" : null}"
+			@click="${ifNotFromFeedback((x, e) => x.clickHandler(e))}"
+			@focusin="${ifNotFromFeedback((x, e) => x.focusinHandler(e))}"
+			@focusout="${ifNotFromFeedback((x, e) => x.focusoutHandler(e))}"
+			@keydown="${ifNotFromFeedback((x, e) => {
+		if (x.open) require_dialog.handleEscapeKeyAndStopPropogation(e);
+		return x.keydownHandler(e);
+	})}"
+			@mousedown="${ifNotFromFeedback((x, e) => x.mousedownHandler(e))}"
+		>
+			${renderControl(context)}
+			<div class="feedback-wrapper" ${(0, _microsoft_fast_element.ref)("_feedbackWrapper")}>
+				${(x) => x._getFeedbackTemplate(context)}
+			</div>
+		</template>
+	`;
+};
 //#endregion
-//#region src/lib/rich-text-view/definition.ts
-var richTextViewDefinition = require_vivid_element.defineVividComponent("rich-text-view", RichTextView, RichTextViewTemplate, [], {
-	styles: rich_text_view_default,
-	shadowOptions: { delegatesFocus: true }
-});
+//#region src/lib/select/definition.ts
+/** @internal */
+var selectDefinition = require_vivid_element.defineVividComponent("select", Select, SelectTemplate, [
+	require_definition$2.popupDefinition,
+	require_definition.iconDefinition,
+	require_definition$3.listboxOptionDefinition,
+	require_definition$4.optgroupDefinition,
+	require_definition$1.buttonDefinition,
+	require_mixins.feedbackMessageDefinition
+], { styles: select_default });
 /**
-* Registers the rich-text-view element with the design system.
+* Registers the select elements with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerRichTextView = require_vivid_element.createRegisterFunction(richTextViewDefinition);
+var registerSelect = require_vivid_element.createRegisterFunction(selectDefinition);
 //#endregion
-Object.defineProperty(exports, "RichTextView", {
+Object.defineProperty(exports, "Select", {
 	enumerable: true,
 	get: function() {
-		return RichTextView;
+		return Select;
 	}
 });
-Object.defineProperty(exports, "registerRichTextView", {
+Object.defineProperty(exports, "registerSelect", {
 	enumerable: true,
 	get: function() {
-		return registerRichTextView;
+		return registerSelect;
 	}
 });
-Object.defineProperty(exports, "richTextViewDefinition", {
+Object.defineProperty(exports, "selectDefinition", {
 	enumerable: true,
 	get: function() {
-		return richTextViewDefinition;
+		return selectDefinition;
 	}
 });