@vonage/vivid 5.15.1 → 5.16.0

package/unbundled/definition28.js

@@ -0,0 +1,528 @@
+import { o as defineVividComponent, s as createRegisterFunction } from "./vivid-element.js";
+import { t as iconDefinition } from "./definition2.js";
+import { t as __decorate } from "./decorate.js";
+import { a as affixIconTemplateFactory, i as IconWrapper, t as AffixIcon } from "./affix.js";
+import { n as FormAssociated } from "./form-associated.js";
+import { t as FormElement } from "./form-element.js";
+import { t as WithSuccessText } from "./with-success-text.js";
+import { t as WithErrorText } from "./with-error-text.js";
+import { t as WithContextualHelp } from "./with-contextual-help.js";
+import { r as chevronTemplateFactory } from "./definition7.js";
+import { t as handleEscapeKeyAndStopPropogation } from "./dialog.js";
+import { i as Popup, t as popupDefinition } from "./definition10.js";
+import { a as feedbackMessageDefinition, t as WithFeedback } from "./mixins.js";
+import { t as listboxOptionDefinition } from "./definition27.js";
+import { t as text_field_default } from "./text-field.js";
+import { t as Listbox } from "./listbox.js";
+import { Observable, attr, html, observable, ref, slotted, when } from "@microsoft/fast-element";
+import { classNames, limit, uniqueId } from "@microsoft/fast-web-utilities";
+//#region src/lib/combobox/combobox.scss?inline
+var combobox_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;transition:transform .2s;display:flex;transform:rotate(0)}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host{--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex;position:relative}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end:8px;--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.base: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)}.base: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}}.base.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)}.base.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}.base:disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.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)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.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)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.base.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)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);pointer-events:none;line-height:1;display:inline-block;position:absolute;inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px;display:flex;position:relative}.listbox{max-height:var(--combobox-height,408px);contain:paint;border-radius:8px;flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width,100%)}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--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(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{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;z-index:1;border-radius:inherit;content:\"\";pointer-events:none;display:block;position:absolute;inset:0}}::slotted([data-vvd-component=option][current-selected]){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}";
+//#endregion
+//#region src/lib/combobox/combobox.options.ts
+/**
+* Autocomplete values for combobox.
+* @public
+*/
+var ComboboxAutocomplete = {
+	inline: "inline",
+	list: "list",
+	both: "both",
+	none: "none"
+};
+//#endregion
+//#region src/lib/combobox/combobox.ts
+/**
+* @public
+* @component combobox
+* @slot - Default slot.
+* @slot icon - The preferred way to add an icon to the combobox control.
+* @slot meta - Slot to add meta content to the combobox control.
+* @slot helper-text - Describes how to use the combobox. Alternative to the `helper-text` attribute.
+* @event {CustomEvent<undefined>} change - Fires a custom 'change' event when the value updates
+* @vueModel modelValue value change `event.currentTarget.value`
+* @testAction fill comboboxFill
+* @testAction clear comboboxClear
+* @testAction selectOptionByText selectOptionByText
+* @testAction selectOptionByValue selectOptionByValue
+* @testRef control shadow input.control
+*/
+var Combobox = class extends WithContextualHelp(WithFeedback(WithErrorText(WithSuccessText(FormElement(AffixIcon(FormAssociated(Listbox))))))) {
+	constructor(..._args) {
+		super(..._args);
+		this.filteredOptions = [];
+		this.filter = "";
+		this.fixedDropdown = false;
+		this.listboxId = uniqueId("listbox-");
+		this.maxHeight = 0;
+		this.open = false;
+		this.proxy = document.createElement("input");
+	}
+	/**
+	* @internal
+	*/
+	formResetCallback() {
+		super.formResetCallback();
+		this.selectedIndex = this._newDefaultSelectedIndex([], this.options, -1) ?? -1;
+		this.value = this.firstSelectedOption?.text || "";
+	}
+	/** {@inheritDoc (FormAssociated:interface).validate} */
+	validate() {
+		super.validate(this.control);
+	}
+	get isAutocompleteInline() {
+		return this.autocomplete === ComboboxAutocomplete.inline || this.isAutocompleteBoth;
+	}
+	get isAutocompleteList() {
+		return this.autocomplete === ComboboxAutocomplete.list || this.isAutocompleteBoth;
+	}
+	get isAutocompleteBoth() {
+		return this.autocomplete === ComboboxAutocomplete.both;
+	}
+	/**
+	* @internal
+	*/
+	openChanged() {
+		if (this.open) this.enqueueScrollSelectedOptionIntoViewIfNeeded();
+	}
+	/**
+	* A read-only list of options.
+	*
+	* @public
+	* @remarks
+	* Overrides `Listbox.options`.
+	*/
+	get options() {
+		Observable.track(this, "options");
+		return this.filteredOptions.length ? this.filteredOptions : this._options;
+	}
+	set options(value) {
+		super.options = value;
+	}
+	/**
+	* Updates the placeholder on the proxy element.
+	* @internal
+	*/
+	placeholderChanged() {
+		/* v8 ignore if -- @preserve */
+		if (this.proxy instanceof HTMLInputElement) this.proxy.placeholder = this.placeholder;
+	}
+	/**
+	* @internal
+	*/
+	valueChanged(prev, next) {
+		if (this.$fastController.isConnected && this.options) {
+			const selectedIndex = this.options.findIndex((el) => el.text.toLowerCase() === next.toLowerCase());
+			this.selectedIndex = this.options[this.selectedIndex]?.text !== this.options[selectedIndex]?.text ? selectedIndex : this.selectedIndex;
+		}
+		super.valueChanged(prev, next);
+	}
+	/**
+	* Handle opening and closing the listbox when the combobox is clicked.
+	*
+	* @param e - the mouse event
+	* @internal
+	*/
+	clickHandler(e) {
+		if (this.disabled || this._isFromContextualHelp(e)) return;
+		if (this.open) {
+			const capturedOption = e.target.closest(`option,[role=option],[data-vvd-component=option]`);
+			if (!capturedOption || capturedOption.disabled) return;
+			this.selectedOptions = [capturedOption];
+			this.control.value = capturedOption.text;
+			this.clearSelectionRange();
+			this.updateValue(true);
+		}
+		this.open = !this.open;
+		if (this.open) this.control.focus();
+		return true;
+	}
+	/**
+	* Handle closing the listbox when the combobox is open and the chevron icon is clicked.
+	*
+	* @param e - the mouse event
+	* @internal
+	*/
+	_chevronIconClickHandler(e) {
+		if (!this.open) return;
+		e.stopPropagation();
+		this.open = false;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.value) this.initialValue = this.value;
+		this._popup.anchor = this._anchor;
+	}
+	/**
+	* Filter available options by text value.
+	*
+	* @public
+	*/
+	filterOptions() {
+		if (!this.autocomplete || this.autocomplete === ComboboxAutocomplete.none) this.filter = "";
+		this.filteredOptions = this._options.filter((o) => o.text.toLowerCase().startsWith(this.filter.toLowerCase()));
+		if (this.isAutocompleteList) this._options.forEach((o) => {
+			o.hidden = !this.filteredOptions.includes(o);
+		});
+	}
+	/**
+	* Focus the control and scroll the first selected option into view.
+	*
+	* @internal
+	* @remarks
+	* Overrides: `Listbox.focusAndScrollOptionIntoView`
+	*/
+	focusAndScrollOptionIntoView() {
+		if (this.contains(document.activeElement)) {
+			this.control.focus();
+			this.enqueueScrollSelectedOptionIntoViewIfNeeded();
+		}
+	}
+	/**
+	* @internal
+	*/
+	enqueueScrollSelectedOptionIntoViewIfNeeded() {
+		const firstSelectedOption = this.firstSelectedOption;
+		/* v8 ignore else -- @preserve */
+		if (firstSelectedOption) requestAnimationFrame(() => {
+			firstSelectedOption.scrollIntoView({ block: "nearest" });
+		});
+	}
+	/**
+	* Handle focus state when the element or its children lose focus.
+	*
+	* @param e - The focus event
+	* @internal
+	*/
+	focusoutHandler(e) {
+		this.syncValue();
+		if (!this.open) return true;
+		const focusTarget = e.relatedTarget;
+		if (this.isSameNode(focusTarget)) {
+			this.focus();
+			return;
+		}
+		this.open = false;
+	}
+	/**
+	* Handle content changes on the control input.
+	*
+	* @param e - the input event
+	* @internal
+	*/
+	inputHandler(e) {
+		this.filter = this.control.value;
+		this.filterOptions();
+		if (!this.isAutocompleteInline) this.selectedIndex = this.options.map((option) => option.text).indexOf(this.control.value);
+		if (e.inputType.includes("deleteContent") || !this.filter.length) return true;
+		if (this.isAutocompleteList && !this.open) this.open = true;
+		if (this.isAutocompleteInline) if (this.filteredOptions.length) {
+			this.selectedOptions = [this.filteredOptions[0]];
+			this.selectedIndex = this.options.indexOf(this.firstSelectedOption);
+			this.setInlineSelection();
+		} else this.selectedIndex = -1;
+	}
+	/**
+	* Handle keydown actions for listbox navigation.
+	*
+	* @param e - the keyboard event
+	* @internal
+	*/
+	keydownHandler(e) {
+		const key = e.key;
+		if (e.ctrlKey || e.shiftKey) return true;
+		switch (key) {
+			case "Enter":
+				this.syncValue();
+				/* v8 ignore else -- @preserve */
+				if (this.isAutocompleteInline) this.filter = this.value;
+				this.open = false;
+				this.clearSelectionRange();
+				break;
+			case "Escape":
+				/* v8 ignore else -- @preserve */
+				if (!this.isAutocompleteInline) this.selectedIndex = -1;
+				if (this.open) {
+					this.open = false;
+					break;
+				}
+				this.value = "";
+				this.control.value = "";
+				this.filter = "";
+				this.filterOptions();
+				break;
+			case "Tab":
+				this.setInputToSelection();
+				if (!this.open) return true;
+				e.preventDefault();
+				this.open = false;
+				break;
+			case "ArrowUp":
+			case "ArrowDown":
+				this.filterOptions();
+				if (!this.open) {
+					this.open = true;
+					break;
+				}
+				/* v8 ignore else -- @preserve */
+				if (this.filteredOptions.length > 0) super.keydownHandler(e);
+				if (this.isAutocompleteInline) this.setInlineSelection();
+				break;
+			default: return true;
+		}
+	}
+	/**
+	* Ensure that the selectedIndex is within the current allowable filtered range.
+	*
+	* @param prev - the previous selected index value
+	* @param next - the current selected index value
+	*
+	* @internal
+	*/
+	selectedIndexChanged(prev, next) {
+		if (this.$fastController.isConnected) {
+			next = limit(-1, this.options.length - 1, next);
+			if (next !== this.selectedIndex) {
+				this.selectedIndex = next;
+				return;
+			}
+			super.selectedIndexChanged(prev, next);
+		}
+	}
+	/**
+	* Move focus to the previous selectable option.
+	*
+	* @internal
+	* @remarks
+	* Overrides `Listbox.selectPreviousOption`
+	*/
+	selectPreviousOption() {
+		if (!this.disabled && this.selectedIndex >= 0) this.selectedIndex = this.selectedIndex - 1;
+	}
+	_isDefaultSelected(option) {
+		return super._isDefaultSelected(option) || option.text !== "" && option.text === this.initialValue;
+	}
+	/**
+	* Focus and set the content of the control based on the first selected option.
+	*
+	* @internal
+	*/
+	setInputToSelection() {
+		if (this.firstSelectedOption) {
+			this.control.value = this.firstSelectedOption.text;
+			this.control.focus();
+		}
+	}
+	/**
+	* Focus, set and select the content of the control based on the first selected option.
+	*
+	* @internal
+	*/
+	setInlineSelection() {
+		/* v8 ignore else -- @preserve */
+		if (this.firstSelectedOption) {
+			this.setInputToSelection();
+			this.control.setSelectionRange(this.filter.length, this.control.value.length, "backward");
+		}
+	}
+	/**
+	* Determines if a value update should involve emitting a change event, then updates the value.
+	*
+	* @internal
+	*/
+	syncValue() {
+		const newValue = this.firstSelectedOption?.text ?? this.control.value;
+		this.updateValue(this.value !== newValue);
+	}
+	/**
+	* Ensure that the entire list of options is used when setting the selected property.
+	*
+	* @param prev - the previous list of selected options
+	* @param next - the current list of selected options
+	*
+	* @internal
+	* @remarks
+	* Overrides: `Listbox.selectedOptionsChanged`
+	*/
+	selectedOptionsChanged(_prev, next) {
+		if (this.$fastController.isConnected) this._options.forEach((o) => {
+			o.selected = next.includes(o);
+		});
+	}
+	/**
+	* Synchronize the form-associated proxy and update the value property of the element.
+	*
+	* @param prev - the previous collection of slotted option elements
+	* @param next - the next collection of slotted option elements
+	*
+	* @internal
+	*/
+	slottedOptionsChanged(prev, next) {
+		super.slottedOptionsChanged(prev, next);
+		this.updateValue();
+		const scale = this.getAttribute("scale") || this.scale;
+		next.forEach((element) => {
+			if (scale) {
+				element.setAttribute("scale", scale);
+				element.scale = scale;
+			}
+		});
+	}
+	/**
+	* Sets the value and to match the first selected option.
+	*
+	* @param shouldEmit - if true, the change event will be emitted
+	*
+	* @internal
+	*/
+	updateValue(shouldEmit) {
+		if (this.$fastController.isConnected) this.value = this.firstSelectedOption?.text || this.control.value;
+		if (shouldEmit) this.$emit("change");
+	}
+	/**
+	* @internal
+	*/
+	clearSelectionRange() {
+		const controlValueLength = this.control.value.length;
+		this.control.setSelectionRange(controlValueLength, controlValueLength);
+	}
+};
+__decorate([attr({
+	attribute: "autocomplete",
+	mode: "fromView"
+})], Combobox.prototype, "autocomplete", void 0);
+__decorate([attr], Combobox.prototype, "appearance", void 0);
+__decorate([attr], Combobox.prototype, "shape", void 0);
+__decorate([attr()], Combobox.prototype, "scale", void 0);
+__decorate([attr], Combobox.prototype, "placement", void 0);
+__decorate([attr({
+	mode: "boolean",
+	attribute: "fixed-dropdown"
+})], Combobox.prototype, "fixedDropdown", void 0);
+__decorate([observable], Combobox.prototype, "metaSlottedContent", void 0);
+__decorate([observable], Combobox.prototype, "maxHeight", void 0);
+__decorate([attr({
+	attribute: "open",
+	mode: "boolean"
+})], Combobox.prototype, "open", void 0);
+__decorate([attr], Combobox.prototype, "placeholder", void 0);
+//#endregion
+//#region src/lib/combobox/combobox.template.ts
+var getStateClasses = ({ icon, iconSlottedContent, metaSlottedContent, errorValidationMessage, successText, shape, scale, disabled, placeholder, label, appearance, open, _activeDescendant }) => classNames("base", ["disabled", disabled], [`shape-${shape}`, Boolean(shape)], [`size-${scale}`, Boolean(scale)], ["placeholder", Boolean(placeholder)], [`appearance-${appearance}`, Boolean(appearance)], ["no-label", !label], ["has-icon", !!icon || Boolean(iconSlottedContent?.length)], ["has-meta", Boolean(metaSlottedContent?.length)], ["has-activedescendant", Boolean(_activeDescendant) && open], ["error", Boolean(errorValidationMessage)], ["success", !!successText]);
+function renderLabel() {
+	return html` <label for="control" class="label">
+		${(x) => x.label}
+	</label>`;
+}
+function setFixedDropdownVarWidth(x) {
+	return x.open && x.fixedDropdown ? `--_combobox-fixed-width: ${Math.round(x.getBoundingClientRect().width)}px` : null;
+}
+function renderInput(context) {
+	const affixIconTemplate = affixIconTemplateFactory(context);
+	const chevronTemplate = chevronTemplateFactory(context);
+	return html` <div class="${getStateClasses}" ${ref("_anchor")}>
+		<div
+			class="label-wrapper"
+			?hidden=${(x) => !x.label && !x._hasContextualHelp}
+		>
+			${when((x) => x.label, renderLabel())}
+			<slot
+				name="contextual-help"
+				${slotted("_contextualHelpSlottedContent")}
+			></slot>
+		</div>
+		<div class="fieldset">
+			${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
+			<div class="wrapper">
+				<input
+					id="control"
+					autocomplete="off"
+					class="control"
+					aria-activedescendant="${(x) => x.open ? x._activeDescendant : null}"
+					aria-autocomplete="${(x) => x.autocomplete}"
+					aria-controls="${(x) => x.listboxId}"
+					aria-expanded="${(x) => x.open}"
+					aria-haspopup="listbox"
+					aria-describedby="${(x) => x._feedbackDescribedBy}"
+					placeholder="${(x) => x.placeholder}"
+					role="combobox"
+					type="text"
+					?disabled="${(x) => x.disabled}"
+					:value="${(x) => x.value}"
+					@input="${(x, c) => x.inputHandler(c.event)}"
+					${ref("control")}
+				/>
+			</div>
+			<div class="leading-items-wrapper">
+				<slot name="meta" ${slotted("metaSlottedContent")}></slot>
+				<div
+					@click="${(x, c) => x._chevronIconClickHandler(c.event)}"
+				>
+					${chevronTemplate}
+				</div>
+			</div>
+		</div>
+	</div>`;
+}
+var comboboxTemplate = (context) => {
+	const popupTag = context.tagFor(Popup);
+	return html`
+		<template
+			tabindex="${(x) => !x.disabled ? "0" : null}"
+			@click="${(x, c) => x.clickHandler(c.event)}"
+			@focusout="${(x, c) => x.focusoutHandler(c.event)}"
+			@keydown="${(x, { event }) => {
+		x.open && handleEscapeKeyAndStopPropogation(event);
+		return x.keydownHandler(event);
+	}}"
+		>
+			<div class="control-wrapper">
+				${() => renderInput(context)}
+				<${popupTag} class="popup"
+					style="${setFixedDropdownVarWidth}"
+					?open="${(x) => x.open}"
+					placement="${(x) => x.placement ?? "bottom-start"}"
+					strategy="${(x) => x.fixedDropdown ? "fixed" : "absolute"}"
+					${ref("_popup")}>
+					<div id="${(x) => x.listboxId}"
+						class="listbox"
+						role="listbox"
+						?disabled="${(x) => x.disabled}"
+						${ref("listbox")}>
+						<slot ${slotted({
+		filter: Listbox.slottedOptionFilter,
+		flatten: true,
+		property: "slottedOptions"
+	})}>
+						</slot>
+					</div>
+				</${popupTag}>
+			</div>
+			<div class="feedback-wrapper" @click="${(_, c) => c.event.stopPropagation()}">
+				${(x) => x._getFeedbackTemplate(context)}
+			</div>
+    </template>
+	`;
+};
+//#endregion
+//#region src/lib/combobox/definition.ts
+/**
+* @internal
+*/
+var comboboxDefinition = defineVividComponent("combobox", Combobox, comboboxTemplate, [
+	iconDefinition,
+	popupDefinition,
+	listboxOptionDefinition,
+	feedbackMessageDefinition
+], {
+	styles: [text_field_default, combobox_default],
+	shadowOptions: { delegatesFocus: true }
+});
+/**
+* Registers the combobox elements with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerCombobox = createRegisterFunction(comboboxDefinition);
+//#endregion
+export { registerCombobox as n, Combobox as r, comboboxDefinition as t };

package/unbundled/definition29.cjs

@@ -0,0 +1,157 @@
+require("./chunk.cjs");
+const require_vivid_element = require("./vivid-element.cjs");
+const require_decorate = require("./decorate.cjs");
+const require_localized = require("./localized.cjs");
+const require_dialog = require("./dialog.cjs");
+const require_definition = require("./definition10.cjs");
+const require_anchored = require("./anchored.cjs");
+let _microsoft_fast_element = require("@microsoft/fast-element");
+let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
+//#region src/lib/toggletip/toggletip.scss?inline
+var toggletip_default = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.content-wrapper{width:var(--toggletip-inline-size,auto);max-inline-size:var(--toggletip-max-inline-size,30ch);padding:16px}.headline{font:var(--vvd-typography-base-bold);margin:0}.action-items{justify-content:flex-end;gap:10px;display:flex}::slotted([slot=action-items]){margin-block-start:16px}";
+//#endregion
+//#region src/lib/toggletip/toggletip.ts
+/**
+* @public
+* @component toggletip
+* @slot - The content to display in the toggletip.
+* @slot anchor - Used to set the anchor element for the toggletip.
+* @slot action-items - The content to display in the toggletip action items.
+* @testSelector byHeadline byHeadline
+* @testQuery open open true
+* @testQuery closed open false
+*/
+var Toggletip = class extends require_localized.Localized(require_anchored.Anchored(require_vivid_element.VividElement)) {
+	constructor(..._args) {
+		super(..._args);
+		this.alternate = false;
+		this.placement = "right";
+		this.open = false;
+	}
+	#originalAriaLabel = null;
+	/**
+	* @internal
+	*/
+	openChanged(oldValue, newValue) {
+		if (oldValue === void 0) return;
+		if (newValue) this.setAttribute("role", "status");
+		else this.removeAttribute("role");
+		this.#updateListeners();
+		if (this._anchorEl) this.#updateAnchor(this._anchorEl);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.#updateListeners();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#updateListeners();
+	}
+	/**
+	* @internal
+	*/
+	_anchorElChanged(oldValue, newValue) {
+		if (oldValue) this.#cleanupAnchor(oldValue);
+		if (newValue) this.#setupAnchor(newValue);
+	}
+	#setupAnchor(a) {
+		a.addEventListener("click", this.#openIfClosed, true);
+		this.#originalAriaLabel = a.ariaLabel;
+		a.ariaLabel = `${this.locale.toggletip.anchorLabel(a.ariaLabel || "")}`;
+		this.#updateAnchor(a);
+	}
+	#updateAnchor(a) {
+		a.setAttribute("aria-expanded", this.open.toString());
+		a.setAttribute("data-expanded", this.open.toString());
+	}
+	#cleanupAnchor(a) {
+		a.removeEventListener("click", this.#openIfClosed, true);
+		a.removeAttribute("aria-expanded");
+		a.removeAttribute("data-expanded");
+		/* v8 ignore else -- @preserve */
+		if (a.ariaLabel) a.ariaLabel = this.#originalAriaLabel;
+	}
+	#openIfClosed = () => {
+		if (!this.open) _microsoft_fast_element.Updates.enqueue(() => this.open = true);
+	};
+	#updateListeners() {
+		document.removeEventListener("click", this.#closeOnClickOutside);
+		document.removeEventListener("keydown", this.#closeOnEscape);
+		if (this.open && this.isConnected) {
+			document.addEventListener("click", this.#closeOnClickOutside);
+			document.addEventListener("keydown", this.#closeOnEscape);
+		}
+	}
+	#closeOnClickOutside = (e) => {
+		const clickedOutside = !this.contains(e.target);
+		const clickedOnAnchor = this._anchorEl?.contains(e.target);
+		if (clickedOutside || clickedOnAnchor) this.open = false;
+	};
+	#closeOnEscape = (e) => {
+		/* v8 ignore else -- @preserve */
+		if (e.key === "Escape") this.open = false;
+	};
+};
+require_decorate.__decorate([_microsoft_fast_element.attr], Toggletip.prototype, "headline", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Toggletip.prototype, "alternate", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "fromView" })], Toggletip.prototype, "placement", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Toggletip.prototype, "open", void 0);
+//#endregion
+//#region src/lib/toggletip/toggletip.template.ts
+var getClasses = (_) => (0, _microsoft_fast_web_utilities.classNames)("control");
+var ToggletipTemplate = (context) => {
+	const popup = context.tagFor(require_definition.Popup);
+	return _microsoft_fast_element.html`
+		${require_anchored.anchorSlotTemplateFactory()}
+		<${popup}
+			@keydown="${(x, { event }) => {
+		if (x.open && require_dialog.handleEscapeKeyAndStopPropogation(event)) return false;
+		return true;
+	}}"
+			class="${getClasses}"
+			arrow
+			:anchor="${(x) => x._anchorEl}"
+			:open="${(x) => x.open}"
+			?alternate="${(x) => !x.alternate}"
+			placement="${(x) => x.placement}"
+			exportparts="vvd-theme-alternate"
+		>
+			<div class="content-wrapper">
+				${(0, _microsoft_fast_element.when)((x) => x.headline, _microsoft_fast_element.html`<h2 class="headline">${(x) => x.headline}</h2>`)}
+				<slot></slot>
+				<div class="action-items"><slot name="action-items"></slot></div>
+			</div>
+		</${popup}>
+	`;
+};
+//#endregion
+//#region src/lib/toggletip/definition.ts
+/**
+* @internal
+*/
+var toggletipDefinition = require_vivid_element.defineVividComponent("toggletip", Toggletip, ToggletipTemplate, [require_definition.popupDefinition], { styles: toggletip_default });
+/**
+* Registers the toggletip element with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerToggletip = require_vivid_element.createRegisterFunction(toggletipDefinition);
+//#endregion
+Object.defineProperty(exports, "Toggletip", {
+	enumerable: true,
+	get: function() {
+		return Toggletip;
+	}
+});
+Object.defineProperty(exports, "registerToggletip", {
+	enumerable: true,
+	get: function() {
+		return registerToggletip;
+	}
+});
+Object.defineProperty(exports, "toggletipDefinition", {
+	enumerable: true,
+	get: function() {
+		return toggletipDefinition;
+	}
+});