@vonage/vivid 5.18.0 → 5.19.0

package/unbundled/definition58.js

@@ -1,4 +1,4 @@
-import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { c as createRegisterFunction, s as defineVividComponent, t as VividElement } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
 import { r as ProgressRing, t as progressRingDefinition } from "./definition6.js";
 import { n as WithObservableLocale } from "./localized.js";
@@ -191,7 +191,7 @@ __decorate([observable], Popover.prototype, "requestedOpenState", void 0);
 __decorate([volatile], Popover.prototype, "open", null);
 var popoverDefinition = defineVividComponent("rich-text-editor-popover", Popover, popoverTemplate, [popupDefinition], {});
 //#endregion
-//#region ../../node_modules/.pnpm/prosemirror-view@1.41.6/node_modules/prosemirror-view/style/prosemirror.css?inline
+//#region ../../node_modules/.pnpm/prosemirror-view@1.41.8/node_modules/prosemirror-view/style/prosemirror.css?inline
 var prosemirror_default = ".ProseMirror{word-wrap:break-word;white-space:pre-wrap;white-space:break-spaces;-webkit-font-variant-ligatures:none;font-variant-ligatures:none;font-feature-settings:\"liga\" 0;position:relative}.ProseMirror pre{white-space:pre-wrap}.ProseMirror li{position:relative}.ProseMirror-hideselection ::selection{background:0 0}.ProseMirror-hideselection ::selection{background:0 0}.ProseMirror-hideselection{caret-color:#0000}.ProseMirror [draggable][contenteditable=false]{user-select:text}.ProseMirror-selectednode{outline:2px solid #8cf}li.ProseMirror-selectednode{outline:none}li.ProseMirror-selectednode:after{content:\"\";pointer-events:none;border:2px solid #8cf;position:absolute;inset:-2px -2px -2px -32px}img.ProseMirror-separator{border:none!important;margin:0!important;display:inline!important}";
 //#endregion
 //#region src/lib/rich-text-editor/rte/utils/default-textblock.ts
@@ -228,7 +228,7 @@ var FeatureState = class {
 };
 //#endregion
 //#region src/lib/rich-text-editor/rte/features/internal/core.style.scss?inline
-var core_style_default = ".ProseMirror{padding:var(--editor-padding-block) var(--editor-padding-inline);outline:none;flex:1}.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%)}";
+var core_style_default = ".ProseMirror{padding:var(--editor-padding-block) var(--editor-padding-inline);outline:none;flex:1}.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/utils/ui.ts
 var isPropBinding = (prop) => typeof prop === "function";
@@ -310,6 +310,7 @@ var createButton = (ctx, props) => {
 	const size = () => variant() === "toolbar" ? "super-condensed" : "condensed";
 	const appearanceInactive = () => variant() === "popover-primary" ? "outlined" : "ghost-light";
 	const appearance = () => ctx.evalProp(props.active) ? "filled" : appearanceInactive();
+	const connotation = () => ctx.evalProp(props.connotation) ?? (variant() === "toolbar-menu" && ctx.evalProp(props.active) ? "cta" : void 0);
 	const disabled = () => Boolean(ctx.evalProp(ctx.props.disabled) || ctx.evalProp(props.disabled));
 	const button = ctx.rte.createComponent(Button);
 	ctx.bindToEl(button, {
@@ -318,8 +319,9 @@ var createButton = (ctx, props) => {
 		disabled,
 		icon: props.icon,
 		autofocus: props.autofocus,
-		connotation: props.connotation,
-		[props.icon ? "ariaLabel" : "label"]: props.label
+		connotation,
+		[props.icon ? "ariaLabel" : "label"]: props.label,
+		ariaPressed: () => ctx.evalProp(props.active) ? "true" : null
 	}, [on("click", props.onClick, (onClick) => () => {
 		if (!onClick()) ctx.view.focus();
 	})]);
@@ -365,6 +367,7 @@ var createMenuItem = (ctx, props) => {
 	return item;
 };
 var createButtonGroup = (ctx, props) => createDiv(ctx, {
+	slot: props.slot,
 	className: "ui-button-group",
 	children: props.children
 });
@@ -645,12 +648,14 @@ var RteCoreImpl = class extends RteFeatureImpl {
 				},
 				view: (view) => {
 					const popovers = view.dom.getRootNode().querySelector(".popovers");
-					const updatePopoversDisabled = () => {
-						popovers.classList.toggle("popovers--disabled", this.disabled.getValue(rte));
+					const updateDisabled = () => {
+						const disabled = this.disabled.getValue(rte);
+						popovers.classList.toggle("popovers--disabled", disabled);
+						view.dom.parentElement.classList.toggle("editor--disabled", disabled);
 					};
-					updatePopoversDisabled();
+					updateDisabled();
 					return { update: () => {
-						updatePopoversDisabled();
+						updateDisabled();
 					} };
 				}
 			})),
@@ -1444,7 +1449,7 @@ var RteToolbarFeatureImpl = class extends RteFeatureImpl {
 var RteToolbarFeature = featureFacade(RteToolbarFeatureImpl);
 //#endregion
 //#region src/lib/rich-text-editor/rte/features/placeholder.style.scss?inline
-var placeholder_style_default = ".placeholder{display:contents}.placeholder:before{color:var(--vvd-color-neutral-600);content:attr(data-placeholder);font-size:var(--placeholder-font-size,inherit);inset-inline:var(--editor-padding-inline);line-height:inherit;pointer-events:none;position:absolute}";
+var placeholder_style_default = ".placeholder{display:contents}.placeholder:before{color:var(--vvd-color-neutral-600);content:attr(data-placeholder);font-size:var(--placeholder-font-size,inherit);inset-inline:var(--editor-padding-inline);line-height:inherit;pointer-events:none;position:absolute}.editor--disabled .placeholder:before{color:var(--vvd-color-neutral-300)}";
 //#endregion
 //#region src/lib/rich-text-editor/rte/features/placeholder.ts
 var RtePlaceholderFeatureImpl = class extends RteFeatureImpl {
@@ -2244,23 +2249,26 @@ var RteAlignmentFeatureImpl = class extends RteFeatureImpl {
 						return alignments.find((a) => a.value === currentAlign)?.icon ?? "align-left-line";
 					}
 				}),
-				children: [createButtonGroup(ctx, { children: alignments.map((align, index) => createButton(ctx, {
-					icon: align.icon,
-					label: () => ctx.rte.getLocale().richTextEditor.alignments[align.label],
+				children: [createButtonGroup(ctx, {
 					slot: "header",
-					noTooltip: true,
-					autofocus: () => {
-						const currentAlign = this.getAlignmentFromSelection(ctx.view.state);
-						if ((currentAlign === "mixed" || currentAlign === null) && index === 0) return true;
-						return align.value === currentAlign;
-					},
-					active: () => this.getAlignmentFromSelection(ctx.view.state) === align.value,
-					disabled: () => this.getAlignmentFromSelection(ctx.view.state) === null,
-					onClick: () => {
-						const { state, dispatch } = ctx.view;
-						this.setAlignment(align.value)(state, dispatch);
-					}
-				})) })]
+					children: alignments.map((align, index) => createButton(ctx, {
+						icon: align.icon,
+						label: () => ctx.rte.getLocale().richTextEditor.alignments[align.label],
+						noTooltip: true,
+						variant: "toolbar-menu",
+						autofocus: () => {
+							const currentAlign = this.getAlignmentFromSelection(ctx.view.state);
+							if ((currentAlign === "mixed" || currentAlign === null) && index === 0) return true;
+							return align.value === currentAlign;
+						},
+						active: () => this.getAlignmentFromSelection(ctx.view.state) === align.value,
+						disabled: () => this.getAlignmentFromSelection(ctx.view.state) === null,
+						onClick: () => {
+							const { state, dispatch } = ctx.view;
+							this.setAlignment(align.value)(state, dispatch);
+						}
+					}))
+				})]
 			})
 		}, 3)];
 	}

package/unbundled/definition59.cjs

@@ -19,7 +19,7 @@ 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;transition:transform .2s;display:flex;transform:rotate(0)}: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-400);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-300);--_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-300);--_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;transition:transform .2s;display:flex;transform:rotate(0)}: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
 /**

package/unbundled/definition59.js

@@ -1,4 +1,4 @@
-import { o as defineVividComponent, s as createRegisterFunction } from "./vivid-element.js";
+import { c as createRegisterFunction, s as defineVividComponent } 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, n as AffixIconWithTrailing } from "./affix.js";
@@ -18,7 +18,7 @@ import { t as Listbox } from "./listbox.js";
 import { Observable, Updates, attr, html, observable, ref, slotted, volatile, when } from "@microsoft/fast-element";
 import { classNames, inRange, keyArrowDown, keyArrowUp, keyEnd, keyEnter, keyEscape, keyHome, keySpace, keyTab, uniqueId } from "@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;transition:transform .2s;display:flex;transform:rotate(0)}: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-400);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-300);--_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-300);--_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;transition:transform .2s;display:flex;transform:rotate(0)}: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
 /**

package/unbundled/definition6.js

@@ -1,4 +1,4 @@
-import { o as defineVividComponent, s as createRegisterFunction } from "./vivid-element.js";
+import { c as createRegisterFunction, s as defineVividComponent } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
 import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
 import { t as BaseProgress } from "./base-progress.js";

package/unbundled/definition60.js

@@ -1,4 +1,4 @@
-import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { c as createRegisterFunction, s as defineVividComponent, t as VividElement } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
 import { c as impl, n as removeSymbol, s as sortedContributions, t as dispatchSlottableRequest } from "./slottable-request.js";
 import { ElementStyles, html, observable, ref } from "@microsoft/fast-element";

package/unbundled/definition61.cjs

@@ -21,7 +21,7 @@ const require_scrollIntoView = require("./scrollIntoView.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/lib/searchable-select/searchable-select.scss?inline
-var searchable_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;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(:focus-visible){outline:none}:host{--_low-ink-color:var(--vvd-color-neutral-600);inline-size:300px;display:inline-block}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{flex-direction:column;gap:4px;display:flex}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.selection-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary:var(--vvd-searchable-select-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-searchable-select-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-searchable-select-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-intermediate:var(--vvd-searchable-select-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-faint:var(--vvd-searchable-select-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-searchable-select-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-firm:var(--vvd-searchable-select-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-fierce:var(--vvd-searchable-select-accent-fierce,var(--vvd-color-neutral-700));--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.fieldset.appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.fieldset:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.fieldset:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.fieldset:disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.fieldset:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.fieldset.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.fieldset.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.fieldset.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.fieldset.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.fieldset.error:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:var(--vvd-color-alert-500)}.fieldset.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.fieldset.success:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:var(--vvd-color-success-500)}.fieldset.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.fieldset{--_searchable-select-block-size:24px;--_searchable-select-padding-block:8px;--_searchable-select-padding-inline:16px;--_searchable-select-icon-size:20px;--_searchable-select-border-radius:8px;--_searchable-select-gap:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);justify-content:space-between;align-items:center;gap:var(--_searchable-select-gap);padding-block:var(--_searchable-select-padding-block);padding-inline:var(--_searchable-select-padding-inline);transition:box-shadow .2s,background-color .2s;display:flex}.fieldset.size-condensed{--_searchable-select-block-size:20px;--_searchable-select-padding-block:6px;--_searchable-select-padding-inline:12px;--_searchable-select-gap:6px}.fieldset.size-condensed:not(.shape-pill){--_searchable-select-border-radius:4px}@supports selector(:has(*)){.fieldset:not(.has-highlighted-option):has(input:focus){box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent}}@supports not selector(:has(*)){.fieldset:not(.has-highlighted-option):focus-within{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent}}:host(:not([shape=pill])) .fieldset{border-radius:var(--_searchable-select-border-radius)}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{gap:var(--_searchable-select-gap);min-block-size:var(--_searchable-select-block-size);flex-direction:column;flex:1;display:flex;overflow:hidden}.tag-row{gap:var(--_searchable-select-gap);inline-size:100%;display:flex}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;block-size:var(--_searchable-select-block-size);font:var(--vvd-typography-base);background:0 0;border:none;outline:none;flex:1;min-inline-size:min(100px,40%);max-inline-size:100%}.contains-only-input input:not(:focus){opacity:0;pointer-events:none;block-size:0;inline-size:0;min-inline-size:0;position:absolute}.listbox{max-block-size:var(--searchable-select-height,408px);flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}.empty-message{color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);text-align:center;justify-content:center;align-items:center;min-block-size:40px;display:flex}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width,100%)}slot[name=icon]{font-size:var(--_searchable-select-icon-size)}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}::slotted([data-vvd-component=option][data-highlighted]),[data-select-all][data-highlighted]{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;border-radius:8px}.divider{margin-block:10px;margin-inline:12px}";
+var searchable_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;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(:focus-visible){outline:none}:host{--_low-ink-color:var(--vvd-color-neutral-600);inline-size:300px;display:inline-block}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{flex-direction:column;gap:4px;display:flex}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.selection-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary:var(--vvd-searchable-select-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-searchable-select-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-searchable-select-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-intermediate:var(--vvd-searchable-select-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-faint:var(--vvd-searchable-select-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-searchable-select-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-firm:var(--vvd-searchable-select-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-fierce:var(--vvd-searchable-select-accent-fierce,var(--vvd-color-neutral-700));--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.fieldset.appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.fieldset:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.fieldset:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.fieldset:disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.fieldset:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.fieldset.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.fieldset.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.fieldset.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.fieldset.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.fieldset.error:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:var(--vvd-color-alert-500)}.fieldset.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.fieldset.success:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:var(--vvd-color-success-500)}.fieldset.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.fieldset{--_searchable-select-block-size:24px;--_searchable-select-padding-block:8px;--_searchable-select-padding-inline:16px;--_searchable-select-icon-size:20px;--_searchable-select-border-radius:8px;--_searchable-select-gap:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);justify-content:space-between;align-items:center;gap:var(--_searchable-select-gap);padding-block:var(--_searchable-select-padding-block);padding-inline:var(--_searchable-select-padding-inline);transition:box-shadow .2s,background-color .2s;display:flex}.fieldset.size-condensed{--_searchable-select-block-size:20px;--_searchable-select-padding-block:6px;--_searchable-select-padding-inline:12px;--_searchable-select-gap:6px}.fieldset.size-condensed:not(.shape-pill){--_searchable-select-border-radius:4px}@supports selector(:has(*)){.fieldset:not(.has-highlighted-option):has(input:focus){box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent}}@supports not selector(:has(*)){.fieldset:not(.has-highlighted-option):focus-within{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent}}:host(:not([shape=pill])) .fieldset{border-radius:var(--_searchable-select-border-radius)}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{gap:var(--_searchable-select-gap);min-block-size:var(--_searchable-select-block-size);flex-direction:column;flex:1;display:flex;overflow:hidden}.tag-row{gap:var(--_searchable-select-gap);inline-size:100%;display:flex}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;block-size:var(--_searchable-select-block-size);font:var(--vvd-typography-base);background:0 0;border:none;outline:none;flex:1;min-inline-size:min(100px,40%);max-inline-size:100%}.contains-only-input input:not(:focus){opacity:0;pointer-events:none;block-size:0;inline-size:0;min-inline-size:0;position:absolute}.listbox{max-block-size:var(--searchable-select-height,408px);flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}.empty-message{color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);text-align:center;justify-content:center;align-items:center;min-block-size:40px;display:flex}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width,100%)}slot[name=icon]{font-size:var(--_searchable-select-icon-size)}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}::slotted([data-vvd-component=option][data-highlighted]),[data-select-all][data-highlighted]{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;border-radius:8px}.divider{margin-block:10px;margin-inline:12px}";
 //#endregion
 //#region src/lib/searchable-select/option-tag.scss?inline
 var option_tag_default = ":host{display:block}.base.connotation-cta{--_connotation-color-contrast:var(--vvd-option-tag-cta-contrast,var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-contrast:var(--vvd-option-tag-accent-contrast,var(--vvd-color-neutral-800))}.base{--_option-tag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));box-sizing:border-box;background-color:var(--fill-color);block-size:var(--_option-tag-block-size);box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);font:var(--vvd-typography-base-bold);user-select:none;align-items:center;column-gap:8px;max-inline-size:100%;padding-inline:8px;display:flex;position:relative}.base.size-condensed{--_option-tag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));padding-inline:4px}.base:not(.disabled){--text-color:var(--_connotation-color-contrast);--fill-color:var(--_connotation-color-soft);--outline-color:transparent}@supports (background-color:color-mix(in srgb, black 50%, white)){.base:not(.disabled){--fill-color:color-mix(in srgb, var(--_connotation-color-contrast), transparent 87.5%)}}.base.disabled{--text-color:var(--vvd-color-neutral-300);--fill-color:var(--vvd-color-neutral-200);--outline-color:transparent}@supports (background-color:color-mix(in srgb, black 50%, white)){.base.disabled{--fill-color:color-mix(in srgb, var(--vvd-color-neutral-800), transparent 87.5%)}}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.label{text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%;overflow:hidden}slot[name=icon]{font-size:calc(var(--_option-tag-block-size) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(var(--_option-tag-block-size) / 1.5)}.remove-button{border-radius:inherit;cursor:pointer;outline:none;align-items:center;display:flex}.disabled .remove-button{pointer-events:none}.remove-button:focus-visible:before{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));z-index:1;border-radius:inherit;content:\"\";pointer-events:none;display:block;position:absolute;inset:0}";
@@ -63,6 +63,11 @@ var SearchableSelect = class extends require_with_contextual_help.WithContextual
 		this.initialValues = [];
 		this._currentSearchText = null;
 		this._areOptionsInitialized = false;
+		this.#slottedOptionsChangeHandler = { handleChange: (source, _) => {
+			if (source.selected && !this.values.includes(source.value)) this.values = [...this.values, source.value];
+			else if (!source.selected && this.values.includes(source.value)) this.values = this.values.filter((option) => option !== source.value);
+		} };
+		this.#clonedTagIcons = /* @__PURE__ */ new Map();
 		this._filteredOptions = [];
 		this._filteredEnabledOptions = [];
 		this.loading = false;
@@ -80,6 +85,9 @@ var SearchableSelect = class extends require_with_contextual_help.WithContextual
 			super.setFormValue(value, state);
 		};
 		this._changeDescription = "";
+		this.#resizeObserver = new ResizeObserver(() => {
+			this.#updateTagLayout();
+		});
 	}
 	/**
 	* @internal
@@ -291,10 +299,7 @@ var SearchableSelect = class extends require_with_contextual_help.WithContextual
 		this.#updateFilteredOptions();
 		this.#updateSelectionLimit();
 	}
-	#slottedOptionsChangeHandler = { handleChange: (source, _) => {
-		if (source.selected && !this.values.includes(source.value)) this.values = [...this.values, source.value];
-		else if (!source.selected && this.values.includes(source.value)) this.values = this.values.filter((option) => option !== source.value);
-	} };
+	#slottedOptionsChangeHandler;
 	#updateSelectedOnSlottedOptions() {
 		for (const option of this._slottedOptions) {
 			option.selected = this.values.includes(option.value);
@@ -318,10 +323,12 @@ var SearchableSelect = class extends require_with_contextual_help.WithContextual
 			this.open = false;
 		}
 		this.#updateValuesThroughUserInteraction(newValues);
-		this._changeDescription = `${isSelection ? this.locale.searchableSelect.optionSelectedMessage(option._getAccessibleName()) : this.locale.searchableSelect.optionDeselectedMessage(option._getAccessibleName())} ${this.multiple && this.maxSelected && this.maxSelected >= 1 ? this.locale.searchableSelect.maxSelectedMessage(this.values.length, this.maxSelected) : ""}`;
+		const optionMessage = isSelection ? this.locale.searchableSelect.optionSelectedMessage(option._getAccessibleName()) : this.locale.searchableSelect.optionDeselectedMessage(option._getAccessibleName());
+		const maxSelectedMessage = this.multiple && this.maxSelected && this.maxSelected >= 1 ? this.locale.searchableSelect.maxSelectedMessage(this.values.length, this.maxSelected) : "";
+		this._changeDescription = `${optionMessage} ${maxSelectedMessage}`;
 		if (shouldClearSearchText) this._currentSearchText = null;
 	}
-	#clonedTagIcons = /* @__PURE__ */ new Map();
+	#clonedTagIcons;
 	#tagIconOfOption(option) {
 		return option.querySelector("[slot=\"tag-icon\"]");
 	}
@@ -673,9 +680,7 @@ var SearchableSelect = class extends require_with_contextual_help.WithContextual
 		super.formResetCallback();
 		this.#updateValuesThroughUserInteraction(this.#determineInitialValues());
 	}
-	#resizeObserver = new ResizeObserver(() => {
-		this.#updateTagLayout();
-	});
+	#resizeObserver;
 	/**
 	* @internal
 	*/

package/unbundled/definition61.js

@@ -1,4 +1,4 @@
-import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { c as createRegisterFunction, s as defineVividComponent, t as VividElement } from "./vivid-element.js";
 import { r as Icon, t as iconDefinition } from "./definition2.js";
 import { t as __decorate } from "./decorate.js";
 import { a as affixIconTemplateFactory, i as IconWrapper, n as AffixIconWithTrailing } from "./affix.js";
@@ -20,7 +20,7 @@ import { t as scrollIntoView } from "./scrollIntoView.js";
 import { Observable, Updates, attr, html, nullableNumberConverter, observable, ref, repeat, slotted, when } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
 //#region src/lib/searchable-select/searchable-select.scss?inline
-var searchable_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;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(:focus-visible){outline:none}:host{--_low-ink-color:var(--vvd-color-neutral-600);inline-size:300px;display:inline-block}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{flex-direction:column;gap:4px;display:flex}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.selection-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary:var(--vvd-searchable-select-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-searchable-select-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-searchable-select-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-intermediate:var(--vvd-searchable-select-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-faint:var(--vvd-searchable-select-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-searchable-select-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-firm:var(--vvd-searchable-select-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-fierce:var(--vvd-searchable-select-accent-fierce,var(--vvd-color-neutral-700));--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.fieldset.appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.fieldset:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.fieldset:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.fieldset:disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.fieldset:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.fieldset.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.fieldset.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.fieldset.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.fieldset.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.fieldset.error:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:var(--vvd-color-alert-500)}.fieldset.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.fieldset.success:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:var(--vvd-color-success-500)}.fieldset.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.fieldset{--_searchable-select-block-size:24px;--_searchable-select-padding-block:8px;--_searchable-select-padding-inline:16px;--_searchable-select-icon-size:20px;--_searchable-select-border-radius:8px;--_searchable-select-gap:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);justify-content:space-between;align-items:center;gap:var(--_searchable-select-gap);padding-block:var(--_searchable-select-padding-block);padding-inline:var(--_searchable-select-padding-inline);transition:box-shadow .2s,background-color .2s;display:flex}.fieldset.size-condensed{--_searchable-select-block-size:20px;--_searchable-select-padding-block:6px;--_searchable-select-padding-inline:12px;--_searchable-select-gap:6px}.fieldset.size-condensed:not(.shape-pill){--_searchable-select-border-radius:4px}@supports selector(:has(*)){.fieldset:not(.has-highlighted-option):has(input:focus){box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent}}@supports not selector(:has(*)){.fieldset:not(.has-highlighted-option):focus-within{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent}}:host(:not([shape=pill])) .fieldset{border-radius:var(--_searchable-select-border-radius)}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{gap:var(--_searchable-select-gap);min-block-size:var(--_searchable-select-block-size);flex-direction:column;flex:1;display:flex;overflow:hidden}.tag-row{gap:var(--_searchable-select-gap);inline-size:100%;display:flex}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;block-size:var(--_searchable-select-block-size);font:var(--vvd-typography-base);background:0 0;border:none;outline:none;flex:1;min-inline-size:min(100px,40%);max-inline-size:100%}.contains-only-input input:not(:focus){opacity:0;pointer-events:none;block-size:0;inline-size:0;min-inline-size:0;position:absolute}.listbox{max-block-size:var(--searchable-select-height,408px);flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}.empty-message{color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);text-align:center;justify-content:center;align-items:center;min-block-size:40px;display:flex}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width,100%)}slot[name=icon]{font-size:var(--_searchable-select-icon-size)}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}::slotted([data-vvd-component=option][data-highlighted]),[data-select-all][data-highlighted]{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;border-radius:8px}.divider{margin-block:10px;margin-inline:12px}";
+var searchable_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;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(:focus-visible){outline:none}:host{--_low-ink-color:var(--vvd-color-neutral-600);inline-size:300px;display:inline-block}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{flex-direction:column;gap:4px;display:flex}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.selection-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary:var(--vvd-searchable-select-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-searchable-select-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-searchable-select-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-intermediate:var(--vvd-searchable-select-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-faint:var(--vvd-searchable-select-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-searchable-select-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-firm:var(--vvd-searchable-select-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-fierce:var(--vvd-searchable-select-accent-fierce,var(--vvd-color-neutral-700));--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.fieldset.appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.fieldset:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.fieldset:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.fieldset:disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.fieldset:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.fieldset.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.fieldset.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.fieldset.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.fieldset.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.fieldset.error:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:var(--vvd-color-alert-500)}.fieldset.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.fieldset.success:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:var(--vvd-color-success-500)}.fieldset.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.fieldset{--_searchable-select-block-size:24px;--_searchable-select-padding-block:8px;--_searchable-select-padding-inline:16px;--_searchable-select-icon-size:20px;--_searchable-select-border-radius:8px;--_searchable-select-gap:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);justify-content:space-between;align-items:center;gap:var(--_searchable-select-gap);padding-block:var(--_searchable-select-padding-block);padding-inline:var(--_searchable-select-padding-inline);transition:box-shadow .2s,background-color .2s;display:flex}.fieldset.size-condensed{--_searchable-select-block-size:20px;--_searchable-select-padding-block:6px;--_searchable-select-padding-inline:12px;--_searchable-select-gap:6px}.fieldset.size-condensed:not(.shape-pill){--_searchable-select-border-radius:4px}@supports selector(:has(*)){.fieldset:not(.has-highlighted-option):has(input:focus){box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent}}@supports not selector(:has(*)){.fieldset:not(.has-highlighted-option):focus-within{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent}}:host(:not([shape=pill])) .fieldset{border-radius:var(--_searchable-select-border-radius)}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{gap:var(--_searchable-select-gap);min-block-size:var(--_searchable-select-block-size);flex-direction:column;flex:1;display:flex;overflow:hidden}.tag-row{gap:var(--_searchable-select-gap);inline-size:100%;display:flex}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;block-size:var(--_searchable-select-block-size);font:var(--vvd-typography-base);background:0 0;border:none;outline:none;flex:1;min-inline-size:min(100px,40%);max-inline-size:100%}.contains-only-input input:not(:focus){opacity:0;pointer-events:none;block-size:0;inline-size:0;min-inline-size:0;position:absolute}.listbox{max-block-size:var(--searchable-select-height,408px);flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}.empty-message{color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);text-align:center;justify-content:center;align-items:center;min-block-size:40px;display:flex}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width,100%)}slot[name=icon]{font-size:var(--_searchable-select-icon-size)}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}::slotted([data-vvd-component=option][data-highlighted]),[data-select-all][data-highlighted]{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;border-radius:8px}.divider{margin-block:10px;margin-inline:12px}";
 //#endregion
 //#region src/lib/searchable-select/option-tag.scss?inline
 var option_tag_default = ":host{display:block}.base.connotation-cta{--_connotation-color-contrast:var(--vvd-option-tag-cta-contrast,var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-contrast:var(--vvd-option-tag-accent-contrast,var(--vvd-color-neutral-800))}.base{--_option-tag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));box-sizing:border-box;background-color:var(--fill-color);block-size:var(--_option-tag-block-size);box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);font:var(--vvd-typography-base-bold);user-select:none;align-items:center;column-gap:8px;max-inline-size:100%;padding-inline:8px;display:flex;position:relative}.base.size-condensed{--_option-tag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));padding-inline:4px}.base:not(.disabled){--text-color:var(--_connotation-color-contrast);--fill-color:var(--_connotation-color-soft);--outline-color:transparent}@supports (background-color:color-mix(in srgb, black 50%, white)){.base:not(.disabled){--fill-color:color-mix(in srgb, var(--_connotation-color-contrast), transparent 87.5%)}}.base.disabled{--text-color:var(--vvd-color-neutral-300);--fill-color:var(--vvd-color-neutral-200);--outline-color:transparent}@supports (background-color:color-mix(in srgb, black 50%, white)){.base.disabled{--fill-color:color-mix(in srgb, var(--vvd-color-neutral-800), transparent 87.5%)}}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.label{text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%;overflow:hidden}slot[name=icon]{font-size:calc(var(--_option-tag-block-size) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(var(--_option-tag-block-size) / 1.5)}.remove-button{border-radius:inherit;cursor:pointer;outline:none;align-items:center;display:flex}.disabled .remove-button{pointer-events:none}.remove-button:focus-visible:before{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));z-index:1;border-radius:inherit;content:\"\";pointer-events:none;display:block;position:absolute;inset:0}";
@@ -62,6 +62,11 @@ var SearchableSelect = class extends WithContextualHelp(WithFeedback(WithErrorTe
 		this.initialValues = [];
 		this._currentSearchText = null;
 		this._areOptionsInitialized = false;
+		this.#slottedOptionsChangeHandler = { handleChange: (source, _) => {
+			if (source.selected && !this.values.includes(source.value)) this.values = [...this.values, source.value];
+			else if (!source.selected && this.values.includes(source.value)) this.values = this.values.filter((option) => option !== source.value);
+		} };
+		this.#clonedTagIcons = /* @__PURE__ */ new Map();
 		this._filteredOptions = [];
 		this._filteredEnabledOptions = [];
 		this.loading = false;
@@ -79,6 +84,9 @@ var SearchableSelect = class extends WithContextualHelp(WithFeedback(WithErrorTe
 			super.setFormValue(value, state);
 		};
 		this._changeDescription = "";
+		this.#resizeObserver = new ResizeObserver(() => {
+			this.#updateTagLayout();
+		});
 	}
 	/**
 	* @internal
@@ -290,10 +298,7 @@ var SearchableSelect = class extends WithContextualHelp(WithFeedback(WithErrorTe
 		this.#updateFilteredOptions();
 		this.#updateSelectionLimit();
 	}
-	#slottedOptionsChangeHandler = { handleChange: (source, _) => {
-		if (source.selected && !this.values.includes(source.value)) this.values = [...this.values, source.value];
-		else if (!source.selected && this.values.includes(source.value)) this.values = this.values.filter((option) => option !== source.value);
-	} };
+	#slottedOptionsChangeHandler;
 	#updateSelectedOnSlottedOptions() {
 		for (const option of this._slottedOptions) {
 			option.selected = this.values.includes(option.value);
@@ -317,10 +322,12 @@ var SearchableSelect = class extends WithContextualHelp(WithFeedback(WithErrorTe
 			this.open = false;
 		}
 		this.#updateValuesThroughUserInteraction(newValues);
-		this._changeDescription = `${isSelection ? this.locale.searchableSelect.optionSelectedMessage(option._getAccessibleName()) : this.locale.searchableSelect.optionDeselectedMessage(option._getAccessibleName())} ${this.multiple && this.maxSelected && this.maxSelected >= 1 ? this.locale.searchableSelect.maxSelectedMessage(this.values.length, this.maxSelected) : ""}`;
+		const optionMessage = isSelection ? this.locale.searchableSelect.optionSelectedMessage(option._getAccessibleName()) : this.locale.searchableSelect.optionDeselectedMessage(option._getAccessibleName());
+		const maxSelectedMessage = this.multiple && this.maxSelected && this.maxSelected >= 1 ? this.locale.searchableSelect.maxSelectedMessage(this.values.length, this.maxSelected) : "";
+		this._changeDescription = `${optionMessage} ${maxSelectedMessage}`;
 		if (shouldClearSearchText) this._currentSearchText = null;
 	}
-	#clonedTagIcons = /* @__PURE__ */ new Map();
+	#clonedTagIcons;
 	#tagIconOfOption(option) {
 		return option.querySelector("[slot=\"tag-icon\"]");
 	}
@@ -672,9 +679,7 @@ var SearchableSelect = class extends WithContextualHelp(WithFeedback(WithErrorTe
 		super.formResetCallback();
 		this.#updateValuesThroughUserInteraction(this.#determineInitialValues());
 	}
-	#resizeObserver = new ResizeObserver(() => {
-		this.#updateTagLayout();
-	});
+	#resizeObserver;
 	/**
 	* @internal
 	*/

package/unbundled/definition62.js

@@ -1,4 +1,4 @@
-import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { c as createRegisterFunction, s as defineVividComponent, t as VividElement } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
 import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
 import { r as Connotation } from "./enums.js";

package/unbundled/definition63.js

@@ -1,4 +1,4 @@
-import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { c as createRegisterFunction, s as defineVividComponent, t as VividElement } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
 import { t as handleEscapeKeyAndStopPropogation } from "./dialog.js";
 import { attr, html, when } from "@microsoft/fast-element";

package/unbundled/definition64.cjs

@@ -26,6 +26,23 @@ var SimpleColorPicker = class extends require_anchored.Anchored(require_base_col
 		super(..._args);
 		this.placement = "top-start";
 		this.swatchesPerRow = 7;
+		this.#openedByKeyboard = false;
+		this.#openPopup = () => {
+			if (!this.open) {
+				this.#openedByKeyboard = false;
+				_microsoft_fast_element.Updates.enqueue(() => this.open = true);
+			}
+		};
+		this.#handleAnchorKeydown = (event) => {
+			/* v8 ignore next -- @preserve */
+			if (event.key === "Enter" || event.key === " ") {
+				if (!this.open) {
+					this.#openedByKeyboard = true;
+					_microsoft_fast_element.Updates.enqueue(() => this.open = true);
+				}
+				event.preventDefault();
+			}
+		};
 		this._closeOnClickOutside = (e) => {
 			const clickedOutside = !this.contains(e.target);
 			const clickedOnAnchor = this._anchorEl?.contains(e.target);
@@ -120,29 +137,15 @@ var SimpleColorPicker = class extends require_anchored.Anchored(require_base_col
 	/**
 	* @internal
 	*/
-	#openedByKeyboard = false;
+	#openedByKeyboard;
 	/**
 	* @internal
 	*/
-	#openPopup = () => {
-		if (!this.open) {
-			this.#openedByKeyboard = false;
-			_microsoft_fast_element.Updates.enqueue(() => this.open = true);
-		}
-	};
+	#openPopup;
 	/**
 	* @internal
 	*/
-	#handleAnchorKeydown = (event) => {
-		/* v8 ignore next -- @preserve */
-		if (event.key === "Enter" || event.key === " ") {
-			if (!this.open) {
-				this.#openedByKeyboard = true;
-				_microsoft_fast_element.Updates.enqueue(() => this.open = true);
-			}
-			event.preventDefault();
-		}
-	};
+	#handleAnchorKeydown;
 };
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "fromView" })], SimpleColorPicker.prototype, "placement", void 0);
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({

package/unbundled/definition64.js

@@ -1,4 +1,4 @@
-import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { c as createRegisterFunction, s as defineVividComponent, t as VividElement } from "./vivid-element.js";
 import { r as Icon, t as iconDefinition } from "./definition2.js";
 import { t as __decorate } from "./decorate.js";
 import { t as handleEscapeKeyAndStopPropogation } from "./dialog.js";
@@ -25,6 +25,23 @@ var SimpleColorPicker = class extends Anchored(BaseColorPicker(VividElement)) {
 		super(..._args);
 		this.placement = "top-start";
 		this.swatchesPerRow = 7;
+		this.#openedByKeyboard = false;
+		this.#openPopup = () => {
+			if (!this.open) {
+				this.#openedByKeyboard = false;
+				Updates.enqueue(() => this.open = true);
+			}
+		};
+		this.#handleAnchorKeydown = (event) => {
+			/* v8 ignore next -- @preserve */
+			if (event.key === "Enter" || event.key === " ") {
+				if (!this.open) {
+					this.#openedByKeyboard = true;
+					Updates.enqueue(() => this.open = true);
+				}
+				event.preventDefault();
+			}
+		};
 		this._closeOnClickOutside = (e) => {
 			const clickedOutside = !this.contains(e.target);
 			const clickedOnAnchor = this._anchorEl?.contains(e.target);
@@ -119,29 +136,15 @@ var SimpleColorPicker = class extends Anchored(BaseColorPicker(VividElement)) {
 	/**
 	* @internal
 	*/
-	#openedByKeyboard = false;
+	#openedByKeyboard;
 	/**
 	* @internal
 	*/
-	#openPopup = () => {
-		if (!this.open) {
-			this.#openedByKeyboard = false;
-			Updates.enqueue(() => this.open = true);
-		}
-	};
+	#openPopup;
 	/**
 	* @internal
 	*/
-	#handleAnchorKeydown = (event) => {
-		/* v8 ignore next -- @preserve */
-		if (event.key === "Enter" || event.key === " ") {
-			if (!this.open) {
-				this.#openedByKeyboard = true;
-				Updates.enqueue(() => this.open = true);
-			}
-			event.preventDefault();
-		}
-	};
+	#handleAnchorKeydown;
 };
 __decorate([attr({ mode: "fromView" })], SimpleColorPicker.prototype, "placement", void 0);
 __decorate([attr({

package/unbundled/definition65.js

@@ -1,4 +1,4 @@
-import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { c as createRegisterFunction, s as defineVividComponent, t as VividElement } 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";

package/unbundled/definition66.js

@@ -1,4 +1,4 @@
-import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { c as createRegisterFunction, s as defineVividComponent, t as VividElement } 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";