@vonage/vivid 5.23.0 → 5.23.1

package/unbundled/definition60.js

@@ -2,10 +2,10 @@ import { d as createRegisterFunction, t as VividElement, u as defineVividCompone
 import { t as __decorate } from "./decorate.js";
 import { r as ProgressRing, t as progressRingDefinition } from "./definition5.js";
 import { n as WithObservableLocale } from "./localized.js";
-import { i as Button, t as buttonDefinition } from "./definition7.js";
-import { i as Popup, r as PlacementStrategy, t as popupDefinition } from "./definition10.js";
-import { i as MenuItem, t as menuItemDefinition } from "./definition12.js";
-import { r as Menu, t as menuDefinition } from "./definition13.js";
+import { i as Button, t as buttonDefinition } from "./definition6.js";
+import { i as Popup, r as PlacementStrategy, t as popupDefinition } from "./definition9.js";
+import { i as MenuItem, t as menuItemDefinition } from "./definition11.js";
+import { r as Menu, t as menuDefinition } from "./definition12.js";
 import { t as Divider } from "./divider.js";
 import { t as generateRandomId } from "./randomId.js";
 import { n as textFieldDefinition, r as TextField } from "./definition26.js";
@@ -28,7 +28,7 @@ import { InputRule, inputRules, undoInputRule } from "prosemirror-inputrules";
 import { RemoveMarkStep, ReplaceAroundStep, dropPoint } from "prosemirror-transform";
 import { marks } from "prosemirror-schema-basic";
 //#region src/lib/rich-text-editor/rich-text-editor.scss?inline
-var rich_text_editor_default = ":host{display:block}.rte{--editor-padding-inline:var(--rich-text-editor-padding-inline,16px);--editor-padding-block:var(--rich-text-editor-padding-block,8px);block-size:100%;max-block-size:inherit;min-block-size:inherit;flex-direction:column;display:flex}.editor{display:contents}.editor-viewport{contain:layout;flex-direction:column;flex:1;min-block-size:0;display:flex;position:relative;overflow:hidden}.editor-scroll-area{background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin;flex-direction:column;flex:1;min-block-size:0;display:flex;overflow-y:auto}.editor-scroll-area ::-webkit-scrollbar{width:4px}.editor-scroll-area ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.editor-scroll-area ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.popovers--disabled>*{display:none!important}";
+var rich_text_editor_default = ":host{display:block}.rte{--editor-padding-inline:var(--rich-text-editor-padding-inline,16px);--editor-padding-block:var(--rich-text-editor-padding-block,8px);block-size:100%;max-block-size:inherit;min-block-size:inherit;flex-direction:column;display:flex}.editor{display:contents}.editor-viewport{contain:layout;flex-direction:column;flex:1;min-block-size:0;display:flex;position:relative;overflow:hidden}.editor-scroll-area{background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in sRGB, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin;flex-direction:column;flex:1;min-block-size:0;display:flex;overflow-y:auto}.editor-scroll-area ::-webkit-scrollbar{width:4px}.editor-scroll-area ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.editor-scroll-area ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.popovers--disabled>*{display:none!important}";
 //#endregion
 //#region src/lib/rich-text-editor/rich-text-editor.ts
 /**
@@ -44,9 +44,7 @@ var rich_text_editor_default = ":host{display:block}.rte{--editor-padding-inline
 * @dynamicSlot `{ id: string }` suggestions-empty - Empty state if no suggestions are found.
 */
 var RichTextEditor = class extends WithObservableLocale(VividElement) {
-	/**
-	* @internal
-	*/
+	/** @internal */
 	instanceChanged(prevInstance) {
 		prevInstance?.[impl].destroyViewIfNeeded();
 		this._initViewIfNeeded();
@@ -71,9 +69,7 @@ var RichTextEditor = class extends WithObservableLocale(VividElement) {
 		super.disconnectedCallback();
 		this._destroyViewIfNeeded();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	localeChanged() {
 		this._syncStateIfNeeded();
 	}
@@ -245,7 +241,7 @@ var FeatureState = class {
 };
 //#endregion
 //#region src/lib/rich-text-editor/rte/features/internal/core.style.scss?inline
-var core_style_default = ".ProseMirror{box-sizing:border-box;padding:var(--editor-padding-block) var(--editor-padding-inline);outline:none;flex:1 0 0}.ProseMirror-selectednode{--focus-stroke-gap-color:transparent;--focus-border-radius:2px;outline:none;position:relative}.ProseMirror-selectednode: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));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.editor--disabled .ProseMirror{color:var(--vvd-color-neutral-300);cursor:not-allowed}";
+var core_style_default = ".ProseMirror{box-sizing:border-box;padding:var(--editor-padding-block) var(--editor-padding-inline);outline:none;flex:1 0 0}.ProseMirror-selectednode{--focus-stroke-gap-color:transparent;--focus-border-radius:2px;outline:none;position:relative}.ProseMirror-selectednode: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));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.editor--disabled .ProseMirror{color:var(--vvd-color-neutral-300);cursor:not-allowed}";
 //#endregion
 //#region src/lib/rich-text-editor/rte/features/internal/foreign-html.ts
 var RteForeignHtmlFeatureImpl = class extends RteFeatureImpl {
@@ -273,13 +269,30 @@ var atomCursorFix = ($cursor) => {
 	if (nodeBefore && nodeBefore.isInline && nodeBefore.isAtom && !nodeBefore.isText) return {};
 	return null;
 };
+/**
+* When the cursor is positioned directly before an inline atom node (e.g. an image)
+* that wraps to the next line, browsers may display the cursor on the next line even
+* though typing inserts text on the previous line. A ZWSP between cursor and atom will be
+* layouted to the previous line and therefore fix the cursor position.
+*/
+var beforeAtomCursorFix = ($cursor) => {
+	const nodeAfter = $cursor.nodeAfter;
+	if (nodeAfter && nodeAfter.isInline && nodeAfter.isAtom && !nodeAfter.isText) return { afterCursor: true };
+	return null;
+};
+function createZwspWidget(style) {
+	const span = document.createElement("span");
+	span.textContent = "​";
+	for (const [prop, value] of Object.entries(style)) span.style.setProperty(prop, value);
+	return span;
+}
 var RteCursorFixFeatureImpl = class extends RteFeatureImpl {
 	constructor(..._args) {
 		super(..._args);
 		this.name = "RteCursorFix";
 	}
 	getPlugins(rte) {
-		const cursorFixes = [atomCursorFix];
+		const cursorFixes = [atomCursorFix, beforeAtomCursorFix];
 		for (const markType of Object.values(rte.schema.marks)) {
 			const spec = markType.spec;
 			if (spec.cursorFix) cursorFixes.push(spec.cursorFix);
@@ -287,27 +300,28 @@ var RteCursorFixFeatureImpl = class extends RteFeatureImpl {
 		return [this.contribution(new Plugin({ props: { decorations: (state) => {
 			const { $cursor } = state.selection;
 			if (!$cursor) return null;
-			let cursorFix = null;
+			const decorations = [];
+			const cursorFixStyles = {};
+			let before = false;
+			let after = false;
 			for (const fn of cursorFixes) {
 				const result = fn($cursor, state);
-				if (result) Object.assign(cursorFix ??= {}, result);
+				if (!result) continue;
+				if (result.style) Object.assign(cursorFixStyles, result.style);
+				if (result.afterCursor) after = true;
+				else before = true;
 			}
-			if (!cursorFix) return null;
-			return DecorationSet.create(state.doc, [Decoration.widget($cursor.pos, () => {
-				const span = document.createElement("span");
-				span.textContent = "​";
-				for (const [prop, value] of Object.entries(cursorFix)) span.style.setProperty(prop, value);
-				return span;
-			}, { side: -1 })]);
+			if (before) decorations.push(Decoration.widget($cursor.pos, () => createZwspWidget(cursorFixStyles), { side: -1 }));
+			if (after) decorations.push(Decoration.widget($cursor.pos, () => createZwspWidget(cursorFixStyles), { side: 1 }));
+			if (decorations.length === 0) return null;
+			return DecorationSet.create(state.doc, decorations);
 		} } }))];
 	}
 };
 featureFacade(RteCursorFixFeatureImpl);
 //#endregion
 //#region src/lib/rich-text-editor/rte/features/internal/core.ts
-/**
-* Plugin to bring state from the host web component into ProseMirror.
-*/
+/** Plugin to bring state from the host web component into ProseMirror. */
 var hostBridgePlugin = new Plugin({ state: {
 	init() {
 		return null;
@@ -334,7 +348,7 @@ var RteCoreImpl = class extends RteFeatureImpl {
 		];
 	}
 	getPlugins(rte) {
-		const enterKeyChainCommands = chainCommands(newlineInCode, createParagraphNear, liftEmptyBlock, splitBlockAs((node, atEnd, $from) => {
+		const splitFn = splitBlockAs((node, atEnd, $from) => {
 			if (!atEnd) return {
 				type: node.type,
 				attrs: node.attrs
@@ -343,7 +357,13 @@ var RteCoreImpl = class extends RteFeatureImpl {
 				type: defaultTextblockForMatch($from.node($from.depth - 1).contentMatchAt($from.indexAfter($from.depth - 1))),
 				attrs: rte.textblockAttrs.extractFromNode(node)
 			};
+		});
+		const splitFnKeepMarks = (state, dispatch) => splitFn(state, dispatch && ((tr) => {
+			const marks = state.storedMarks || state.selection.$to.parentOffset && state.selection.$from.marks();
+			if (marks) tr.ensureMarks(marks);
+			dispatch(tr);
 		}));
+		const enterKeyChainCommands = chainCommands(newlineInCode, createParagraphNear, liftEmptyBlock, splitFnKeepMarks);
 		return [
 			this.contribution(this.disabled.plugin),
 			this.contribution(new Plugin({
@@ -437,15 +457,11 @@ var RteHtmlParser = class {
 	constructor(config, options) {
 		this[impl] = new RteHtmlParserImpl(config[impl], options);
 	}
-	/**
-	* Converts an HTML string to an RteDocument.
-	*/
+	/** Converts an HTML string to an RteDocument. */
 	parseDocument(html, options) {
 		return this[impl].parser.parse(this.parseHtml(html, options), { preserveWhitespace: true }).toJSON();
 	}
-	/**
-	* Converts an HTML string to an RteFragment.
-	*/
+	/** Converts an HTML string to an RteFragment. */
 	parseFragment(html, options) {
 		return this[impl].parser.parseSlice(this.parseHtml(html, options), { preserveWhitespace: true }).content.toJSON() ?? [];
 	}
@@ -466,6 +482,7 @@ var RteHtmlParserImpl = class {
 		options?.modifyParseRules?.(rules);
 		this.parser = buildDomParser(config.schema, rules);
 	}
+	/** Used by the editor when foreign HTML is pasted or dropped */
 	transform(html) {
 		return DOMPurify.sanitize(html);
 	}
@@ -501,15 +518,11 @@ var RteHtmlSerializer = class {
 	constructor(config, options) {
 		this[impl] = new RteHtmlSerializerImpl(config[impl], options);
 	}
-	/**
-	* Converts an RteDocument to an HTML string.
-	*/
+	/** Converts an RteDocument to an HTML string. */
 	serializeDocument(doc, options) {
 		return this[impl].serializeFragment(doc.content, options);
 	}
-	/**
-	* Converts an RteFragment to an HTML string.
-	*/
+	/** Converts an RteFragment to an HTML string. */
 	serializeFragment(fragment, options) {
 		return this[impl].serializeFragment(fragment, options);
 	}
@@ -565,15 +578,11 @@ var RteInstance = class {
 		};
 		this[impl] = new RteInstanceImpl(this, config, options);
 	}
-	/**
-	* Returns the current document state.
-	*/
+	/** Returns the current document state. */
 	getDocument() {
 		return this[impl].state.doc.toJSON();
 	}
-	/**
-	* Reset the editor to its initial state. Optionally, an initial document can be provided.
-	*/
+	/** Reset the editor to its initial state. Optionally, an initial document can be provided. */
 	reset(initialDocument) {
 		this[impl].reset(initialDocument);
 	}
@@ -884,9 +893,11 @@ var UiCtx = class {
 		this.props = props;
 		this.bindings = [];
 	}
+	/** Evaluates a prop, returning its current value. */
 	evalProp(prop) {
 		return isPropBinding(prop) ? prop(this) : prop;
 	}
+	/** On every state change, prop is re-evaluated and passed to bindFn. */
 	bindProp(prop, bindFn) {
 		if (prop === void 0) return;
 		else if (isPropBinding(prop)) {
@@ -895,12 +906,15 @@ var UiCtx = class {
 			binding();
 		} else bindFn(prop);
 	}
+	/** To be called on each state update to refresh all bindings. */
 	updateBindings() {
 		for (const binding of this.bindings) binding();
 	}
+	/** Whether to return focus to the editor after a toolbar action */
 	shouldReturnFocusToEditor() {
 		return this.evalProp(this.props.shouldReturnFocusToEditor);
 	}
+	/** Utility to more conveniently bind props to elements */
 	bindToEl(target, props = {}, events = [], children = []) {
 		for (const name in props) this.bindProp(props[name], (value) => {
 			target[name] = value;
@@ -1311,15 +1325,11 @@ var RteBasicTextBlocksImpl = class extends RteFeatureImpl {
 };
 //#endregion
 //#region src/lib/rich-text-editor/rte/utils/text-before-cursor.ts
-/**
-* Get the text content before the cursor position in the current text block.
-*/
+/** Get the text content before the cursor position in the current text block. */
 var textBeforeCursor = ($cursor) => $cursor.parent.textBetween(0, $cursor.parentOffset, void 0, "");
 //#endregion
 //#region src/lib/rich-text-editor/rte/features/internal/input-rules.ts
-/**
-* Aggregates all input rules from other features.
-*/
+/** Aggregates all input rules from other features. */
 var RteInputRulesFeatureImpl = class extends RteFeatureImpl {
 	constructor(..._args) {
 		super(..._args);
@@ -1579,7 +1589,10 @@ var RteHardBreakFeatureImpl = class extends RteFeatureImpl {
 	}
 	getPlugins(_rte) {
 		const forceBreak = (state, dispatch) => {
-			dispatch?.(state.tr.replaceSelectionWith(state.schema.nodes.hardBreak.create(), true).scrollIntoView());
+			const marks = state.storedMarks || state.selection.$from.marks();
+			const tr = state.tr.replaceSelectionWith(state.schema.nodes.hardBreak.create(), true).scrollIntoView();
+			if (marks.length) tr.setStoredMarks(marks);
+			dispatch?.(tr);
 			return true;
 		};
 		const keyBindings = { "Shift-Enter": forceBreak };
@@ -1630,10 +1643,10 @@ var RteFontSizePickerFeatureImpl = class extends RteFeatureImpl {
 				const storedMarks = state.storedMarks;
 				if (!storedMarks) return null;
 				const fontSizeMark = storedMarks.find((m) => m.type.name === "fontSize");
-				if (fontSizeMark) return { "font-size": fontSizeMark.attrs.size };
+				if (fontSizeMark) return { style: { "font-size": fontSizeMark.attrs.size } };
 				if (storedMarks.length === 0) {
 					const defaultSize = this.defaultFontSizeForNode?.[$cursor.parent.type.name];
-					if (defaultSize) return { "font-size": defaultSize };
+					if (defaultSize) return { style: { "font-size": defaultSize } };
 				}
 				return null;
 			}
@@ -1977,6 +1990,7 @@ var RteTextColorPickerFeatureImpl = class extends RteFeatureImpl {
 			}
 		}, 6)];
 	}
+	/** Determine the color of the current selection or null if colors are mixed */
 	getSelectionColor(state) {
 		const { selection } = state;
 		const { textColor } = state.schema.marks;
@@ -2820,6 +2834,7 @@ var RteInlineImageFeatureImpl = class extends RteFeatureImpl {
 					};
 				}
 			}],
+			/** Since we use a NodeView, this is only used for HTML serialization */
 			toDOM: (node) => {
 				const { imageUrl, alt, size, naturalWidth, naturalHeight } = node.attrs;
 				const resolvedUrl = this.config.serializeUrlToHtml ? this.config.serializeUrlToHtml(imageUrl) : imageUrl;
@@ -3206,6 +3221,7 @@ var RteAtomFeatureImpl = class extends RteFeatureImpl {
 				tag: `span[data-atom-type="${this.atomName}"][data-value]`,
 				getAttrs: (dom) => ({ value: dom.getAttribute("data-value") })
 			}],
+			/** Since we use a NodeView, toDOM is only used for Rich Text View */
 			toDOM: (node) => {
 				const serializedValue = this.config.serializeValueToHtml ? this.config.serializeValueToHtml(node.attrs.value) : node.attrs.value;
 				if (serializedValue === null) return document.createDocumentFragment();
@@ -3281,7 +3297,7 @@ var RteKeyboardShortcutsFeatureImpl = class extends RteFeatureImpl {
 var RteKeyboardShortcutsFeature = featureFacade(RteKeyboardShortcutsFeatureImpl);
 //#endregion
 //#region src/lib/rich-text-editor/rte/features/suggest.style.scss?inline
-var suggest_style_default = ".suggest-popover{flex-direction:column;gap:2px;max-block-size:408px;min-inline-size:128px;max-inline-size:248px;padding:4px;display:flex}.suggest-loading-widget{vertical-align:middle;white-space:normal;align-items:center;margin-inline-start:2px;display:inline-flex}.suggest-empty-message{color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);text-align:center;justify-content:center;align-items:center;min-block-size:40px;display:flex}.suggest-item--visible-focus{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent}";
+var suggest_style_default = ".suggest-popover{flex-direction:column;gap:2px;max-block-size:408px;min-inline-size:128px;max-inline-size:248px;padding:4px;display:flex}.suggest-loading-widget{vertical-align:middle;white-space:normal;align-items:center;margin-inline-start:2px;display:inline-flex}.suggest-empty-message{color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);text-align:center;justify-content:center;align-items:center;min-block-size:40px;display:flex}.suggest-item--visible-focus{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent}";
 //#endregion
 //#region src/lib/rich-text-editor/rte/features/suggest.ts
 var isPopoverOpen = (state) => Boolean(state?.suggestions && !state.dismissed);

package/unbundled/definition61.cjs

@@ -4,22 +4,22 @@ const require_definition = require("./definition.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_affix = require("./affix.cjs");
 const require_form_associated = require("./form-associated.cjs");
-const require_form_element = require("./form-element.cjs");
-const require_with_success_text = require("./with-success-text.cjs");
-const require_with_error_text = require("./with-error-text.cjs");
-const require_with_contextual_help = require("./with-contextual-help.cjs");
 const require_localized = require("./localized.cjs");
-const require_definition$1 = require("./definition7.cjs");
+const require_definition$1 = require("./definition6.cjs");
 const require_dialog = require("./dialog.cjs");
-const require_definition$2 = require("./definition10.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_listbox = require("./listbox.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 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(:not([multiple]):focus-visible) ::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}: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))}";
+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(:not([multiple]):focus-visible) ::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}: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/select/select.ts
 /**
@@ -185,9 +185,7 @@ var Select = class extends require_mixins.WithLightDOMFeedback(require_with_cont
 		this.activeIndex = previousIndex;
 		this.checkActiveIndex();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	focusAndScrollOptionIntoView() {
 		super.focusAndScrollOptionIntoView(this.activeOption);
 	}
@@ -214,11 +212,7 @@ var Select = class extends require_mixins.WithLightDOMFeedback(require_with_cont
 		}
 		this.shouldSkipFocus = false;
 	}
-	/**
-	* Sets an option as selected and gives it focus.
-	*
-	* @public
-	*/
+	/** Sets an option as selected and gives it focus. */
 	setSelectedOptions() {
 		if (!this.multiple) {
 			super.setSelectedOptions();
@@ -245,9 +239,7 @@ var Select = class extends require_mixins.WithLightDOMFeedback(require_with_cont
 		this.setSelectedOptions();
 		this.updateValue(true);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	typeaheadBufferChanged(prev, next) {
 		if (!this.multiple) {
 			super.typeaheadBufferChanged(prev, next);
@@ -305,9 +297,7 @@ var Select = class extends require_mixins.WithLightDOMFeedback(require_with_cont
 	get collapsible() {
 		return !this.multiple;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	valueChanged(prev, next) {
 		const nextSelectedIndex = this.options.findIndex((el) => el.value === next);
 		const validNextSelectedIndex = this._validSelectedIndex(nextSelectedIndex);
@@ -408,9 +398,7 @@ var Select = class extends require_mixins.WithLightDOMFeedback(require_with_cont
 		if (e.offsetX >= 0 && e.offsetX <= this.listbox.scrollWidth) return super.mousedownHandler(e);
 		return this.collapsible;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	multipleChanged(_, next) {
 		this.options.forEach((o) => {
 			o.checked = next ? false : void 0;
@@ -540,10 +528,7 @@ var Select = class extends require_mixins.WithLightDOMFeedback(require_with_cont
 		this.removeEventListener("contentchange", this.updateDisplayValue);
 		super.disconnectedCallback();
 	}
-	/**
-	*
-	* @internal
-	*/
+	/** @internal */
 	updateDisplayValue() {
 		if (this.collapsible) _microsoft_fast_element.Observable.notify(this, "displayValue");
 	}
@@ -588,37 +573,27 @@ var Select = class extends require_mixins.WithLightDOMFeedback(require_with_cont
 		this.selectedIndex = this._newDefaultSelectedIndex([], this.options, -1) ?? -1;
 		this._isResetting = false;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _shouldShowClearButton() {
 		if (!this.clearable) return false;
 		if (this.multiple) return this.selectedOptions?.length > 0;
 		return this.value !== "";
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_onClearButtonFocus() {
 		this._isClearButtonFocused = true;
 		this.activeIndex = -1;
 		this.uncheckAllOptions();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_onClearButtonBlur() {
 		this._isClearButtonFocused = false;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _shouldShowLabelWrapper() {
 		return Boolean(this.label || this._hasContextualHelp || this.multiple && this._shouldShowClearButton);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_onClearButtonClick() {
 		if (this.multiple) this.selectedOptions.forEach((o) => {
 			/* v8 ignore else -- @preserve */
@@ -652,7 +627,6 @@ require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean"
 require_decorate.__decorate([_microsoft_fast_element.observable], Select.prototype, "_isClearButtonFocused", void 0);
 //#endregion
 //#region src/lib/select/select.template.ts
-var getStateClasses = ({ shape, disabled, appearance, metaSlottedContent, errorValidationMessage, successText, placeholder, value, scale, _activeDescendant, open }) => (0, _microsoft_fast_web_utilities.classNames)(["has-activedescendant", Boolean(_activeDescendant) && open], ["disabled", disabled], [`appearance-${appearance}`, Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], ["has-meta", Boolean(metaSlottedContent?.length)], ["error", Boolean(errorValidationMessage)], ["success", !!successText], ["shows-placeholder", Boolean(placeholder) && !value], [`size-${scale}`, Boolean(scale)]);
 function renderLabel() {
 	return _microsoft_fast_element.html` <label
 		for="${(x) => x.multiple ? null : "control"}"
@@ -704,7 +678,7 @@ function selectValue(context) {
 	const affixIconTemplate = require_affix.affixIconTemplateFactory(context);
 	const chevronTemplate = require_definition$1.chevronTemplateFactory(context);
 	return _microsoft_fast_element.html` <div
-		class="control ${getStateClasses}"
+		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}"
@@ -721,9 +695,7 @@ function selectValue(context) {
 function setFixedDropdownVarWidth(x) {
 	return x.open && x.fixedDropdown ? `--_select-fixed-width: ${Math.round(x.getBoundingClientRect().width)}px` : null;
 }
-/**
-* @param context - element definition context
-*/
+/** @param context - element definition context */
 function renderControl(context) {
 	const popupTag = context.tagFor(require_definition$2.Popup);
 	return _microsoft_fast_element.html`
@@ -762,9 +734,7 @@ function renderControl(context) {
 			</div>
 		`;
 }
-/**
-* Ignore events that originate from feedback, e.g. a click on link
-*/
+/** 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)) {
@@ -806,9 +776,7 @@ var SelectTemplate = (context) => {
 };
 //#endregion
 //#region src/lib/select/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var selectDefinition = require_vivid_element.defineVividComponent("select", Select, SelectTemplate, [
 	require_definition$2.popupDefinition,
 	require_definition.iconDefinition,