@vonage/vivid 5.18.0 → 5.19.0

package/unbundled/definition27.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 { i as Popup, t as popupDefinition } from "./definition10.js";
@@ -21,6 +21,18 @@ var Tooltip = class extends Anchored(VividElement) {
 	constructor(..._args) {
 		super(..._args);
 		this.open = false;
+		this.#show = () => {
+			this.open = true;
+			this.#updateAnchorExpanded();
+		};
+		this.#hide = () => {
+			this.open = false;
+			this.#updateAnchorExpanded();
+		};
+		this.#closeOnEscape = (e) => {
+			/* v8 ignore else -- @preserve */
+			if (e.key === "Escape") this.#hide();
+		};
 	}
 	connectedCallback() {
 		super.connectedCallback();
@@ -53,14 +65,8 @@ var Tooltip = class extends Anchored(VividElement) {
 		a.removeAttribute("aria-haspopup");
 		a.removeAttribute("aria-expanded");
 	}
-	#show = () => {
-		this.open = true;
-		this.#updateAnchorExpanded();
-	};
-	#hide = () => {
-		this.open = false;
-		this.#updateAnchorExpanded();
-	};
+	#show;
+	#hide;
 	#updateAnchorExpanded() {
 		if (this._anchorEl) this._anchorEl.setAttribute("aria-expanded", String(this.open));
 	}
@@ -68,10 +74,7 @@ var Tooltip = class extends Anchored(VividElement) {
 		document.removeEventListener("keydown", this.#closeOnEscape);
 		if (this.open && this.isConnected) document.addEventListener("keydown", this.#closeOnEscape);
 	}
-	#closeOnEscape = (e) => {
-		/* v8 ignore else -- @preserve */
-		if (e.key === "Escape") this.#hide();
-	};
+	#closeOnEscape;
 	/**
 	* @internal
 	*/

package/unbundled/definition28.cjs

@@ -56,7 +56,12 @@ var ColorPicker = class extends require_with_contextual_help.WithContextualHelp(
 		this.disableSavedColors = false;
 		this.savedColors = [];
 		this.maxSwatches = 6;
+		this.#closeOnPointerOutside = (e) => {
+			if (this._isInPath(e, this._buttonEl) || this._isInPath(e, this._popupEl)) return;
+			this.open = false;
+		};
 		this.copyIconName = "copy-2-line";
+		this.#iconResetTimer = null;
 		this._copyValueToClipboard = async (value) => {
 			try {
 				await navigator.clipboard.writeText(value);
@@ -205,7 +210,8 @@ var ColorPicker = class extends require_with_contextual_help.WithContextualHelp(
 	* @internal
 	*/
 	_onTextFieldInput(event) {
-		this.value = event.currentTarget.value;
+		const textField = event.currentTarget;
+		this.value = textField.value;
 	}
 	/**
 	* @internal
@@ -239,10 +245,7 @@ var ColorPicker = class extends require_with_contextual_help.WithContextualHelp(
 	/**
 	* @internal
 	*/
-	#closeOnPointerOutside = (e) => {
-		if (this._isInPath(e, this._buttonEl) || this._isInPath(e, this._popupEl)) return;
-		this.open = false;
-	};
+	#closeOnPointerOutside;
 	connectedCallback() {
 		super.connectedCallback();
 		this.savedColors = this._loadSavedColors();
@@ -252,7 +255,7 @@ var ColorPicker = class extends require_with_contextual_help.WithContextualHelp(
 		super.disconnectedCallback();
 		document.removeEventListener("mousedown", this.#closeOnPointerOutside, true);
 	}
-	#iconResetTimer = null;
+	#iconResetTimer;
 	/**
 	* @internal
 	*/

package/unbundled/definition28.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 { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
@@ -55,7 +55,12 @@ var ColorPicker = class extends WithContextualHelp(WithFeedback(WithErrorText(Wi
 		this.disableSavedColors = false;
 		this.savedColors = [];
 		this.maxSwatches = 6;
+		this.#closeOnPointerOutside = (e) => {
+			if (this._isInPath(e, this._buttonEl) || this._isInPath(e, this._popupEl)) return;
+			this.open = false;
+		};
 		this.copyIconName = "copy-2-line";
+		this.#iconResetTimer = null;
 		this._copyValueToClipboard = async (value) => {
 			try {
 				await navigator.clipboard.writeText(value);
@@ -204,7 +209,8 @@ var ColorPicker = class extends WithContextualHelp(WithFeedback(WithErrorText(Wi
 	* @internal
 	*/
 	_onTextFieldInput(event) {
-		this.value = event.currentTarget.value;
+		const textField = event.currentTarget;
+		this.value = textField.value;
 	}
 	/**
 	* @internal
@@ -238,10 +244,7 @@ var ColorPicker = class extends WithContextualHelp(WithFeedback(WithErrorText(Wi
 	/**
 	* @internal
 	*/
-	#closeOnPointerOutside = (e) => {
-		if (this._isInPath(e, this._buttonEl) || this._isInPath(e, this._popupEl)) return;
-		this.open = false;
-	};
+	#closeOnPointerOutside;
 	connectedCallback() {
 		super.connectedCallback();
 		this.savedColors = this._loadSavedColors();
@@ -251,7 +254,7 @@ var ColorPicker = class extends WithContextualHelp(WithFeedback(WithErrorText(Wi
 		super.disconnectedCallback();
 		document.removeEventListener("mousedown", this.#closeOnPointerOutside, true);
 	}
-	#iconResetTimer = null;
+	#iconResetTimer;
 	/**
 	* @internal
 	*/

package/unbundled/definition29.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";

package/unbundled/definition3.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, n as AffixIconWithTrailing } from "./affix.js";

package/unbundled/definition30.cjs

@@ -18,7 +18,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/combobox/combobox.scss?inline
-var combobox_default = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}.chevron{font:var(--vvd-typography-base-extended);flex-shrink:0;transition:transform .2s;display:flex;transform:rotate(0)}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host{--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex;position:relative}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end:8px;--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.base:disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);pointer-events:none;line-height:1;display:inline-block;position:absolute;inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px;display:flex;position:relative}.listbox{max-height:var(--combobox-height,408px);contain:paint;border-radius:8px;flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width,100%)}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;z-index:1;border-radius:inherit;content:\"\";pointer-events:none;display:block;position:absolute;inset:0}}::slotted([data-vvd-component=option][current-selected]){border-radius:8px}:host(.has-activedescendant) ::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}";
+var combobox_default = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}.chevron{font:var(--vvd-typography-base-extended);flex-shrink:0;transition:transform .2s;display:flex;transform:rotate(0)}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host{--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex;position:relative}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end:8px;--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.base:disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);pointer-events:none;line-height:1;display:inline-block;position:absolute;inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px;display:flex;position:relative}.listbox{max-height:var(--combobox-height,408px);contain:paint;border-radius:8px;flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width,100%)}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;z-index:1;border-radius:inherit;content:\"\";pointer-events:none;display:block;position:absolute;inset:0}}::slotted([data-vvd-component=option][current-selected]){border-radius:8px}:host(.has-activedescendant) ::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}";
 //#endregion
 //#region src/lib/combobox/combobox.options.ts
 /**
@@ -115,7 +115,9 @@ var Combobox = class extends require_with_contextual_help.WithContextualHelp(req
 	valueChanged(prev, next) {
 		if (this.$fastController.isConnected && this.options) {
 			const selectedIndex = this.options.findIndex((el) => el.text.toLowerCase() === next.toLowerCase());
-			this.selectedIndex = this.options[this.selectedIndex]?.text !== this.options[selectedIndex]?.text ? selectedIndex : this.selectedIndex;
+			const prevSelectedValue = this.options[this.selectedIndex]?.text;
+			const nextSelectedValue = this.options[selectedIndex]?.text;
+			this.selectedIndex = prevSelectedValue !== nextSelectedValue ? selectedIndex : this.selectedIndex;
 		}
 		super.valueChanged(prev, next);
 	}

package/unbundled/definition30.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, t as AffixIcon } from "./affix.js";
@@ -17,7 +17,7 @@ import { t as Listbox } from "./listbox.js";
 import { Observable, attr, html, observable, ref, slotted, when } from "@microsoft/fast-element";
 import { classNames, limit, uniqueId } from "@microsoft/fast-web-utilities";
 //#region src/lib/combobox/combobox.scss?inline
-var combobox_default = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}.chevron{font:var(--vvd-typography-base-extended);flex-shrink:0;transition:transform .2s;display:flex;transform:rotate(0)}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host{--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex;position:relative}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end:8px;--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.base:disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);pointer-events:none;line-height:1;display:inline-block;position:absolute;inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px;display:flex;position:relative}.listbox{max-height:var(--combobox-height,408px);contain:paint;border-radius:8px;flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width,100%)}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;z-index:1;border-radius:inherit;content:\"\";pointer-events:none;display:block;position:absolute;inset:0}}::slotted([data-vvd-component=option][current-selected]){border-radius:8px}:host(.has-activedescendant) ::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}";
+var combobox_default = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}.chevron{font:var(--vvd-typography-base-extended);flex-shrink:0;transition:transform .2s;display:flex;transform:rotate(0)}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host{--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex;position:relative}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end:8px;--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.base:disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);pointer-events:none;line-height:1;display:inline-block;position:absolute;inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px;display:flex;position:relative}.listbox{max-height:var(--combobox-height,408px);contain:paint;border-radius:8px;flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width,100%)}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;z-index:1;border-radius:inherit;content:\"\";pointer-events:none;display:block;position:absolute;inset:0}}::slotted([data-vvd-component=option][current-selected]){border-radius:8px}:host(.has-activedescendant) ::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}";
 //#endregion
 //#region src/lib/combobox/combobox.options.ts
 /**
@@ -114,7 +114,9 @@ var Combobox = class extends WithContextualHelp(WithFeedback(WithErrorText(WithS
 	valueChanged(prev, next) {
 		if (this.$fastController.isConnected && this.options) {
 			const selectedIndex = this.options.findIndex((el) => el.text.toLowerCase() === next.toLowerCase());
-			this.selectedIndex = this.options[this.selectedIndex]?.text !== this.options[selectedIndex]?.text ? selectedIndex : this.selectedIndex;
+			const prevSelectedValue = this.options[this.selectedIndex]?.text;
+			const nextSelectedValue = this.options[selectedIndex]?.text;
+			this.selectedIndex = prevSelectedValue !== nextSelectedValue ? selectedIndex : this.selectedIndex;
 		}
 		super.valueChanged(prev, next);
 	}

package/unbundled/definition31.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 getFlagIconName } from "./utils.js";

package/unbundled/definition32.cjs

@@ -25,14 +25,36 @@ var CountryGroup = class extends require_localized.Localized(require_delegates_a
 		this.lastVisibleIndex = 0;
 		this.computedAriaLabel = null;
 		this.popupOpen = false;
+		this.#observer = null;
+		this.#visibleMap = /* @__PURE__ */ new Map();
+		this.#candidateVisible = -1;
+		this.#candidateStreak = 0;
+		this.#onSlotChange = () => {
+			this.#syncFromSlot();
+			this.#updateAriaLabel();
+			this.#requestFit();
+		};
+		this.#handleIntersection = (entries) => {
+			for (const entry of entries) this.#visibleMap.set(entry.target, (entry.intersectionRatio ?? 0) >= FULLY_VISIBLE_INTERSECTION_RATIO);
+			this.#requestFit();
+			let firstHidden = -1;
+			for (let i = 0; i < this.items.length; i++) if (!(this.#visibleMap.get(this.items[i]) ?? true)) {
+				firstHidden = i;
+				break;
+			}
+			let nextVisible = firstHidden === -1 ? this.items.length : firstHidden;
+			if (firstHidden === this.items.length - 1 && this.badgeEl && (this.#visibleMap.get(this.badgeEl) ?? false)) nextVisible = this.items.length;
+			if (nextVisible < this.items.length && this.badgeEl && this.#visibleMap.has(this.badgeEl) && this.#visibleMap.get(this.badgeEl) === false) nextVisible = Math.max(1, nextVisible - 1);
+			this.#proposeVisibleCount(nextVisible);
+		};
 	}
 	get overflowCount() {
 		return Math.max(0, this.items.length - this.lastVisibleIndex);
 	}
-	#observer = null;
-	#visibleMap = /* @__PURE__ */ new Map();
-	#candidateVisible = -1;
-	#candidateStreak = 0;
+	#observer;
+	#visibleMap;
+	#candidateVisible;
+	#candidateStreak;
 	#countryNameForCode(code) {
 		if (!code) return "";
 		return require_utils.countries.find((c) => c.code.toUpperCase() === code.toUpperCase())?.label ?? "";
@@ -81,11 +103,7 @@ var CountryGroup = class extends require_localized.Localized(require_delegates_a
 		this.#candidateStreak = 0;
 		super.disconnectedCallback();
 	}
-	#onSlotChange = () => {
-		this.#syncFromSlot();
-		this.#updateAriaLabel();
-		this.#requestFit();
-	};
+	#onSlotChange;
 	#ensureObserver() {
 		if (this.#observer) return;
 		this.#observer = new IntersectionObserver(this.#handleIntersection, {
@@ -104,7 +122,8 @@ var CountryGroup = class extends require_localized.Localized(require_delegates_a
 		if (this.badgeEl && this.overflowCount > 0) observer.observe(this.badgeEl);
 	}
 	#syncFromSlot() {
-		this.items = this.slotEl.assignedElements({ flatten: true }).filter((n) => n instanceof require_definition$2.Country);
+		const assigned = this.slotEl.assignedElements({ flatten: true });
+		this.items = assigned.filter((n) => n instanceof require_definition$2.Country);
 		this.#visibleMap.clear();
 		for (const el of this.items) this.#visibleMap.set(el, true);
 		this.lastVisibleIndex = this.items.length;
@@ -123,19 +142,7 @@ var CountryGroup = class extends require_localized.Localized(require_delegates_a
 		const joined = names.join(", ");
 		this.computedAriaLabel = joined ? `${prefix} ${joined}` : prefix;
 	}
-	#handleIntersection = (entries) => {
-		for (const entry of entries) this.#visibleMap.set(entry.target, (entry.intersectionRatio ?? 0) >= FULLY_VISIBLE_INTERSECTION_RATIO);
-		this.#requestFit();
-		let firstHidden = -1;
-		for (let i = 0; i < this.items.length; i++) if (!(this.#visibleMap.get(this.items[i]) ?? true)) {
-			firstHidden = i;
-			break;
-		}
-		let nextVisible = firstHidden === -1 ? this.items.length : firstHidden;
-		if (firstHidden === this.items.length - 1 && this.badgeEl && (this.#visibleMap.get(this.badgeEl) ?? false)) nextVisible = this.items.length;
-		if (nextVisible < this.items.length && this.badgeEl && this.#visibleMap.has(this.badgeEl) && this.#visibleMap.get(this.badgeEl) === false) nextVisible = Math.max(1, nextVisible - 1);
-		this.#proposeVisibleCount(nextVisible);
-	};
+	#handleIntersection;
 	#proposeVisibleCount(nextVisible) {
 		if (this.#candidateVisible === nextVisible) this.#candidateStreak++;
 		else {

package/unbundled/definition32.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 { t as Localized } from "./localized.js";
@@ -24,14 +24,36 @@ var CountryGroup = class extends Localized(DelegatesAria(VividElement)) {
 		this.lastVisibleIndex = 0;
 		this.computedAriaLabel = null;
 		this.popupOpen = false;
+		this.#observer = null;
+		this.#visibleMap = /* @__PURE__ */ new Map();
+		this.#candidateVisible = -1;
+		this.#candidateStreak = 0;
+		this.#onSlotChange = () => {
+			this.#syncFromSlot();
+			this.#updateAriaLabel();
+			this.#requestFit();
+		};
+		this.#handleIntersection = (entries) => {
+			for (const entry of entries) this.#visibleMap.set(entry.target, (entry.intersectionRatio ?? 0) >= FULLY_VISIBLE_INTERSECTION_RATIO);
+			this.#requestFit();
+			let firstHidden = -1;
+			for (let i = 0; i < this.items.length; i++) if (!(this.#visibleMap.get(this.items[i]) ?? true)) {
+				firstHidden = i;
+				break;
+			}
+			let nextVisible = firstHidden === -1 ? this.items.length : firstHidden;
+			if (firstHidden === this.items.length - 1 && this.badgeEl && (this.#visibleMap.get(this.badgeEl) ?? false)) nextVisible = this.items.length;
+			if (nextVisible < this.items.length && this.badgeEl && this.#visibleMap.has(this.badgeEl) && this.#visibleMap.get(this.badgeEl) === false) nextVisible = Math.max(1, nextVisible - 1);
+			this.#proposeVisibleCount(nextVisible);
+		};
 	}
 	get overflowCount() {
 		return Math.max(0, this.items.length - this.lastVisibleIndex);
 	}
-	#observer = null;
-	#visibleMap = /* @__PURE__ */ new Map();
-	#candidateVisible = -1;
-	#candidateStreak = 0;
+	#observer;
+	#visibleMap;
+	#candidateVisible;
+	#candidateStreak;
 	#countryNameForCode(code) {
 		if (!code) return "";
 		return countries.find((c) => c.code.toUpperCase() === code.toUpperCase())?.label ?? "";
@@ -80,11 +102,7 @@ var CountryGroup = class extends Localized(DelegatesAria(VividElement)) {
 		this.#candidateStreak = 0;
 		super.disconnectedCallback();
 	}
-	#onSlotChange = () => {
-		this.#syncFromSlot();
-		this.#updateAriaLabel();
-		this.#requestFit();
-	};
+	#onSlotChange;
 	#ensureObserver() {
 		if (this.#observer) return;
 		this.#observer = new IntersectionObserver(this.#handleIntersection, {
@@ -103,7 +121,8 @@ var CountryGroup = class extends Localized(DelegatesAria(VividElement)) {
 		if (this.badgeEl && this.overflowCount > 0) observer.observe(this.badgeEl);
 	}
 	#syncFromSlot() {
-		this.items = this.slotEl.assignedElements({ flatten: true }).filter((n) => n instanceof Country);
+		const assigned = this.slotEl.assignedElements({ flatten: true });
+		this.items = assigned.filter((n) => n instanceof Country);
 		this.#visibleMap.clear();
 		for (const el of this.items) this.#visibleMap.set(el, true);
 		this.lastVisibleIndex = this.items.length;
@@ -122,19 +141,7 @@ var CountryGroup = class extends Localized(DelegatesAria(VividElement)) {
 		const joined = names.join(", ");
 		this.computedAriaLabel = joined ? `${prefix} ${joined}` : prefix;
 	}
-	#handleIntersection = (entries) => {
-		for (const entry of entries) this.#visibleMap.set(entry.target, (entry.intersectionRatio ?? 0) >= FULLY_VISIBLE_INTERSECTION_RATIO);
-		this.#requestFit();
-		let firstHidden = -1;
-		for (let i = 0; i < this.items.length; i++) if (!(this.#visibleMap.get(this.items[i]) ?? true)) {
-			firstHidden = i;
-			break;
-		}
-		let nextVisible = firstHidden === -1 ? this.items.length : firstHidden;
-		if (firstHidden === this.items.length - 1 && this.badgeEl && (this.#visibleMap.get(this.badgeEl) ?? false)) nextVisible = this.items.length;
-		if (nextVisible < this.items.length && this.badgeEl && this.#visibleMap.has(this.badgeEl) && this.#visibleMap.get(this.badgeEl) === false) nextVisible = Math.max(1, nextVisible - 1);
-		this.#proposeVisibleCount(nextVisible);
-	};
+	#handleIntersection;
 	#proposeVisibleCount(nextVisible) {
 		if (this.#candidateVisible === nextVisible) this.#candidateStreak++;
 		else {

package/unbundled/definition33.cjs

@@ -21,9 +21,11 @@ var Flag = class extends require_vivid_element.VividElement {
 	constructor(..._args) {
 		super(..._args);
 		this.flagLoaded = false;
+		this.#currentRequestId = 0;
+		this.#abortController = null;
 	}
-	#currentRequestId = 0;
-	#abortController = null;
+	#currentRequestId;
+	#abortController;
 	/**
 	* @internal
 	*/

package/unbundled/definition33.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 { n as visuallyHiddenDefinition, r as VisuallyHidden } from "./definition.js";
 import { n as resolveIcon, r as PLACEHOLDER_ICON, t as numberConverter } from "./numberConverter.js";
 import { t as __decorate } from "./decorate.js";
@@ -20,9 +20,11 @@ var Flag = class extends VividElement {
 	constructor(..._args) {
 		super(..._args);
 		this.flagLoaded = false;
+		this.#currentRequestId = 0;
+		this.#abortController = null;
 	}
-	#currentRequestId = 0;
-	#abortController = null;
+	#currentRequestId;
+	#abortController;
 	/**
 	* @internal
 	*/