@vonage/vivid 5.20.1 → 5.22.0

package/unbundled/definition28.cjs

@@ -127,7 +127,7 @@ var ColorPicker = class extends require_with_contextual_help.WithContextualHelp(
 		const value = this.value;
 		if (typeof value !== "string" || !require_base_color_picker.isValidHexColor(value)) return;
 		const swatches = Array.isArray(this.savedColors) ? [...this.savedColors] : [];
-		const idx = swatches.findIndex((s) => s?.value === value);
+		const idx = swatches.findIndex((s) => s.value === value);
 		if (idx !== -1) swatches.splice(idx, 1);
 		swatches.unshift({ value });
 		this.savedColors = swatches.slice(0, this._maxSwatchesNormalized);
@@ -188,7 +188,7 @@ var ColorPicker = class extends require_with_contextual_help.WithContextualHelp(
 	*/
 	maxSwatchesChanged() {
 		const maxCount = this._maxSwatchesNormalized;
-		if (this.savedColors?.length > maxCount) {
+		if (this.savedColors.length > maxCount) {
 			this.savedColors = this.savedColors.slice(0, maxCount);
 			this._setSavedColors(this.savedColors);
 		}
@@ -197,7 +197,7 @@ var ColorPicker = class extends require_with_contextual_help.WithContextualHelp(
 	* @internal
 	*/
 	_onPickerColorChanged(e) {
-		if (typeof e.detail?.value === "string") this.value = e.detail?.value;
+		if (typeof e.detail.value === "string") this.value = e.detail.value;
 	}
 	/**
 	* @internal
@@ -325,7 +325,7 @@ require_decorate.__decorate([_microsoft_fast_element.observable], ColorPicker.pr
 function renderTextField(textFieldTag, iconTag) {
 	const getClasses = (_) => (0, _microsoft_fast_web_utilities.classNames)("control");
 	return _microsoft_fast_element.html`
-		<${textFieldTag} 
+		<${textFieldTag}
 			id="text-field"
 			class="${getClasses}"
 			pattern="${ColorPicker.HEX_COLOR_PATTERN.source}"
@@ -349,15 +349,15 @@ function renderTextField(textFieldTag, iconTag) {
 			${require_delegates_aria.delegateAria()}
 			${(0, _microsoft_fast_element.ref)("_textFieldEl")}
 		>
-			<button 
+			<button
 				aria-label="${(x) => x.locale.colorPicker.pickerButtonLabel}"
 				aria-expanded="${(x) => x.open}"
   			aria-haspopup="dialog"
-				class="button ${(x) => (0, _microsoft_fast_web_utilities.classNames)(x._applyContrastClass(x._buttonColor) ? "contrast" : "", x.disabled ? "disabled" : "")}" 
-				style="--button-color: ${(x) => x._buttonColor};" 
+				class="button ${(x) => (0, _microsoft_fast_web_utilities.classNames)(x._applyContrastClass(x._buttonColor) ? "contrast" : "", x.disabled ? "disabled" : "")}"
+				style="--button-color: ${(x) => x._buttonColor};"
 				?disabled="${(x) => x.disabled}"
 				@click="${(x) => x._onButtonClick()}"
-				slot="action-items" 
+				slot="action-items"
 				${(0, _microsoft_fast_element.ref)("_buttonEl")}>
 				<${iconTag} name="edit-line"></${iconTag}>
 			</button>
@@ -380,8 +380,8 @@ function renderPopupHeader(buttonTag, iconTag) {
 			<h2 class="header-title" id="color-picker-title">
 				<slot name="popup-text">${(x) => x.locale.colorPicker.popupLabel}</slot>
 			</h2>
-			<${buttonTag} size="condensed" 
-				aria-label="${(x) => x.locale.colorPicker.closeButtonLabel}" 
+			<${buttonTag} size="condensed"
+				aria-label="${(x) => x.locale.colorPicker.closeButtonLabel}"
 				@click="${(x) => x._handleCloseRequest()}">
 				<${iconTag} slot="icon" name="close-line"></${iconTag}>
 			</${buttonTag}>
@@ -405,17 +405,17 @@ function renderPopupBody(buttonTag, iconTag, tooltipTag) {
 					@color-changed="${(x, c) => x._onPickerColorChanged(c.event)}"
 					${(0, _microsoft_fast_element.ref)("_vcHexInputEl")}
 				>
-					<input name="hex-code-input" aria-label="${(x) => x.locale.colorPicker.hexInputLabel}" 
+					<input name="hex-code-input" aria-label="${(x) => x.locale.colorPicker.hexInputLabel}"
 						placeholder="${(x) => x.placeholder}"
-    				@blur="${(x, c) => c.event.stopImmediatePropagation()}"
+    				@blur="${(_, c) => c.event.stopImmediatePropagation()}"
 						part="input">
 				</${_microsoft_fast_element.html.partial(vcInputTag)}>
-				<${tooltipTag} placement="top" 
-					text="${(x) => x.locale.colorPicker.copyButtonLabel}" 
+				<${tooltipTag} placement="top"
+					text="${(x) => x.locale.colorPicker.copyButtonLabel}"
 					exportparts="vvd-theme-alternate">
-					<${buttonTag} 
-						slot="anchor" size="normal" 
-						aria-label="${(x) => x.locale.colorPicker.copyButtonLabel}" 
+					<${buttonTag}
+						slot="anchor" size="normal"
+						aria-label="${(x) => x.locale.colorPicker.copyButtonLabel}"
 						@click="${(x) => x._copyValueToClipboard(x.value)}">
 						<${iconTag} slot="icon" name="${(x) => x.copyIconName}"></${iconTag}>
 					</${buttonTag}>
@@ -445,8 +445,8 @@ function renderPopupFooter(buttonTag, iconTag, tooltipTag) {
 			>
 				${(0, _microsoft_fast_element.repeat)((x) => x.allSwatches, (x) => x._renderColorSwatch(iconTag, tooltipTag), { positioning: true })}
 				${(0, _microsoft_fast_element.when)((x) => !x.disableSavedColors, _microsoft_fast_element.html`
-						<${tooltipTag} placement="top" 
-							text="${(x) => x.locale.colorPicker.saveButtonLabel}" 
+						<${tooltipTag} placement="top"
+							text="${(x) => x.locale.colorPicker.saveButtonLabel}"
 							exportparts="vvd-theme-alternate">
 							<${buttonTag}
 								slot="anchor"
@@ -491,11 +491,11 @@ var ColorPickerTemplate = (context) => {
 				:open="${(x) => x.open}"
 				:anchor="${(x) => x._buttonEl}"
 				placement="top"
-				offset="10" 
+				offset="10"
 				${(0, _microsoft_fast_element.ref)("_popupEl")}>
-				<div class="dialog" 
-					role="dialog" 
-					aria-modal="true" 
+				<div class="dialog"
+					role="dialog"
+					aria-modal="true"
 					aria-labelledby="color-picker-title">
 					${renderPopupHeader(buttonTag, iconTag)}
 					${renderPopupBody(buttonTag, iconTag, tooltipTag)}

package/unbundled/definition28.js

@@ -126,7 +126,7 @@ var ColorPicker = class extends WithContextualHelp(WithFeedback(WithErrorText(Wi
 		const value = this.value;
 		if (typeof value !== "string" || !isValidHexColor(value)) return;
 		const swatches = Array.isArray(this.savedColors) ? [...this.savedColors] : [];
-		const idx = swatches.findIndex((s) => s?.value === value);
+		const idx = swatches.findIndex((s) => s.value === value);
 		if (idx !== -1) swatches.splice(idx, 1);
 		swatches.unshift({ value });
 		this.savedColors = swatches.slice(0, this._maxSwatchesNormalized);
@@ -187,7 +187,7 @@ var ColorPicker = class extends WithContextualHelp(WithFeedback(WithErrorText(Wi
 	*/
 	maxSwatchesChanged() {
 		const maxCount = this._maxSwatchesNormalized;
-		if (this.savedColors?.length > maxCount) {
+		if (this.savedColors.length > maxCount) {
 			this.savedColors = this.savedColors.slice(0, maxCount);
 			this._setSavedColors(this.savedColors);
 		}
@@ -196,7 +196,7 @@ var ColorPicker = class extends WithContextualHelp(WithFeedback(WithErrorText(Wi
 	* @internal
 	*/
 	_onPickerColorChanged(e) {
-		if (typeof e.detail?.value === "string") this.value = e.detail?.value;
+		if (typeof e.detail.value === "string") this.value = e.detail.value;
 	}
 	/**
 	* @internal
@@ -324,7 +324,7 @@ __decorate([observable], ColorPicker.prototype, "_ariaLiveDescription", void 0);
 function renderTextField(textFieldTag, iconTag) {
 	const getClasses = (_) => classNames("control");
 	return html`
-		<${textFieldTag} 
+		<${textFieldTag}
 			id="text-field"
 			class="${getClasses}"
 			pattern="${ColorPicker.HEX_COLOR_PATTERN.source}"
@@ -348,15 +348,15 @@ function renderTextField(textFieldTag, iconTag) {
 			${delegateAria()}
 			${ref("_textFieldEl")}
 		>
-			<button 
+			<button
 				aria-label="${(x) => x.locale.colorPicker.pickerButtonLabel}"
 				aria-expanded="${(x) => x.open}"
   			aria-haspopup="dialog"
-				class="button ${(x) => classNames(x._applyContrastClass(x._buttonColor) ? "contrast" : "", x.disabled ? "disabled" : "")}" 
-				style="--button-color: ${(x) => x._buttonColor};" 
+				class="button ${(x) => classNames(x._applyContrastClass(x._buttonColor) ? "contrast" : "", x.disabled ? "disabled" : "")}"
+				style="--button-color: ${(x) => x._buttonColor};"
 				?disabled="${(x) => x.disabled}"
 				@click="${(x) => x._onButtonClick()}"
-				slot="action-items" 
+				slot="action-items"
 				${ref("_buttonEl")}>
 				<${iconTag} name="edit-line"></${iconTag}>
 			</button>
@@ -379,8 +379,8 @@ function renderPopupHeader(buttonTag, iconTag) {
 			<h2 class="header-title" id="color-picker-title">
 				<slot name="popup-text">${(x) => x.locale.colorPicker.popupLabel}</slot>
 			</h2>
-			<${buttonTag} size="condensed" 
-				aria-label="${(x) => x.locale.colorPicker.closeButtonLabel}" 
+			<${buttonTag} size="condensed"
+				aria-label="${(x) => x.locale.colorPicker.closeButtonLabel}"
 				@click="${(x) => x._handleCloseRequest()}">
 				<${iconTag} slot="icon" name="close-line"></${iconTag}>
 			</${buttonTag}>
@@ -404,17 +404,17 @@ function renderPopupBody(buttonTag, iconTag, tooltipTag) {
 					@color-changed="${(x, c) => x._onPickerColorChanged(c.event)}"
 					${ref("_vcHexInputEl")}
 				>
-					<input name="hex-code-input" aria-label="${(x) => x.locale.colorPicker.hexInputLabel}" 
+					<input name="hex-code-input" aria-label="${(x) => x.locale.colorPicker.hexInputLabel}"
 						placeholder="${(x) => x.placeholder}"
-    				@blur="${(x, c) => c.event.stopImmediatePropagation()}"
+    				@blur="${(_, c) => c.event.stopImmediatePropagation()}"
 						part="input">
 				</${html.partial(vcInputTag)}>
-				<${tooltipTag} placement="top" 
-					text="${(x) => x.locale.colorPicker.copyButtonLabel}" 
+				<${tooltipTag} placement="top"
+					text="${(x) => x.locale.colorPicker.copyButtonLabel}"
 					exportparts="vvd-theme-alternate">
-					<${buttonTag} 
-						slot="anchor" size="normal" 
-						aria-label="${(x) => x.locale.colorPicker.copyButtonLabel}" 
+					<${buttonTag}
+						slot="anchor" size="normal"
+						aria-label="${(x) => x.locale.colorPicker.copyButtonLabel}"
 						@click="${(x) => x._copyValueToClipboard(x.value)}">
 						<${iconTag} slot="icon" name="${(x) => x.copyIconName}"></${iconTag}>
 					</${buttonTag}>
@@ -444,8 +444,8 @@ function renderPopupFooter(buttonTag, iconTag, tooltipTag) {
 			>
 				${repeat((x) => x.allSwatches, (x) => x._renderColorSwatch(iconTag, tooltipTag), { positioning: true })}
 				${when((x) => !x.disableSavedColors, html`
-						<${tooltipTag} placement="top" 
-							text="${(x) => x.locale.colorPicker.saveButtonLabel}" 
+						<${tooltipTag} placement="top"
+							text="${(x) => x.locale.colorPicker.saveButtonLabel}"
 							exportparts="vvd-theme-alternate">
 							<${buttonTag}
 								slot="anchor"
@@ -490,11 +490,11 @@ var ColorPickerTemplate = (context) => {
 				:open="${(x) => x.open}"
 				:anchor="${(x) => x._buttonEl}"
 				placement="top"
-				offset="10" 
+				offset="10"
 				${ref("_popupEl")}>
-				<div class="dialog" 
-					role="dialog" 
-					aria-modal="true" 
+				<div class="dialog"
+					role="dialog"
+					aria-modal="true"
 					aria-labelledby="color-picker-title">
 					${renderPopupHeader(buttonTag, iconTag)}
 					${renderPopupBody(buttonTag, iconTag, tooltipTag)}

package/unbundled/definition29.cjs

@@ -165,7 +165,7 @@ require_decorate.__decorate([_microsoft_fast_element.attr], ListboxOption.protot
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "tag-connotation" })], ListboxOption.prototype, "tagConnotation", void 0);
 //#endregion
 //#region src/lib/option/option.template.ts
-var getClasses = (x) => (0, _microsoft_fast_web_utilities.classNames)("base", [`connotation-${x.connotation}`, Boolean(x.connotation)], ["disabled", x.disabled], ["selected", Boolean(x.selected)], ["hover", Boolean(x._highlighted)], ["active", Boolean(x.checked)], ["icon", Boolean(x.icon)], ["two-lines", Boolean(x.text?.length) && Boolean(x.textSecondary?.length)]);
+var getClasses = (x) => (0, _microsoft_fast_web_utilities.classNames)("base", [`connotation-${x.connotation}`, Boolean(x.connotation)], ["disabled", x.disabled], ["selected", x.selected], ["hover", x._highlighted], ["active", Boolean(x.checked)], ["icon", Boolean(x.icon)], ["two-lines", Boolean(x.text?.length) && Boolean(x.textSecondary?.length)]);
 function text() {
 	return _microsoft_fast_element.html`${(0, _microsoft_fast_element.when)((x) => x.text || x.textSecondary, _microsoft_fast_element.html`<span class="text">
 			${(0, _microsoft_fast_element.when)((x) => x.text, _microsoft_fast_element.html`<span class="text-primary">

package/unbundled/definition29.js

@@ -164,7 +164,7 @@ __decorate([attr], ListboxOption.prototype, "connotation", void 0);
 __decorate([attr({ attribute: "tag-connotation" })], ListboxOption.prototype, "tagConnotation", void 0);
 //#endregion
 //#region src/lib/option/option.template.ts
-var getClasses = (x) => classNames("base", [`connotation-${x.connotation}`, Boolean(x.connotation)], ["disabled", x.disabled], ["selected", Boolean(x.selected)], ["hover", Boolean(x._highlighted)], ["active", Boolean(x.checked)], ["icon", Boolean(x.icon)], ["two-lines", Boolean(x.text?.length) && Boolean(x.textSecondary?.length)]);
+var getClasses = (x) => classNames("base", [`connotation-${x.connotation}`, Boolean(x.connotation)], ["disabled", x.disabled], ["selected", x.selected], ["hover", x._highlighted], ["active", Boolean(x.checked)], ["icon", Boolean(x.icon)], ["two-lines", Boolean(x.text?.length) && Boolean(x.textSecondary?.length)]);
 function text() {
 	return html`${when((x) => x.text || x.textSecondary, html`<span class="text">
 			${when((x) => x.text, html`<span class="text-primary">

package/unbundled/definition3.cjs

@@ -46,7 +46,7 @@ var Accordion = class extends require_vivid_element.VividElement {
 					item.addEventListener("change", this.activeItemChange);
 					/* v8 ignore else -- @preserve */
 					if (this.isSingleExpandMode()) if (this.findExpandedItem() === null && index === 0) item.expanded = true;
-					else item !== this.findExpandedItem() ? item.expanded = false : item.expanded = true;
+					else item.expanded = item === this.findExpandedItem();
 				}
 				const itemId = this.accordionIds[index];
 				item.setAttribute("id", typeof itemId !== "string" ? `accordion-${index + 1}` : itemId);
@@ -108,7 +108,7 @@ var Accordion = class extends require_vivid_element.VividElement {
 		}
 	}
 	findExpandedItem() {
-		for (let item = 0; item < this.accordionItems.length; item++) if (this.accordionItems[item].hasAttribute("expanded") === true) return this.accordionItems[item];
+		for (let item = 0; item < this.accordionItems.length; item++) if (this.accordionItems[item].hasAttribute("expanded")) return this.accordionItems[item];
 		return null;
 	}
 	resetItems() {

package/unbundled/definition3.js

@@ -45,7 +45,7 @@ var Accordion = class extends VividElement {
 					item.addEventListener("change", this.activeItemChange);
 					/* v8 ignore else -- @preserve */
 					if (this.isSingleExpandMode()) if (this.findExpandedItem() === null && index === 0) item.expanded = true;
-					else item !== this.findExpandedItem() ? item.expanded = false : item.expanded = true;
+					else item.expanded = item === this.findExpandedItem();
 				}
 				const itemId = this.accordionIds[index];
 				item.setAttribute("id", typeof itemId !== "string" ? `accordion-${index + 1}` : itemId);
@@ -107,7 +107,7 @@ var Accordion = class extends VividElement {
 		}
 	}
 	findExpandedItem() {
-		for (let item = 0; item < this.accordionItems.length; item++) if (this.accordionItems[item].hasAttribute("expanded") === true) return this.accordionItems[item];
+		for (let item = 0; item < this.accordionItems.length; item++) if (this.accordionItems[item].hasAttribute("expanded")) return this.accordionItems[item];
 		return null;
 	}
 	resetItems() {

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-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}";
+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;display:flex;transform:rotate(0)}@media (prefers-reduced-motion:no-preference){.chevron{transition:transform .2s}}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}: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
 /**
@@ -242,31 +242,31 @@ var Combobox = class extends require_with_contextual_help.WithContextualHelp(req
 				if (this.isAutocompleteInline) this.filter = this.value;
 				this.open = false;
 				this.clearSelectionRange();
-				break;
+				return;
 			case "Escape":
 				/* v8 ignore else -- @preserve */
 				if (!this.isAutocompleteInline) this.selectedIndex = -1;
 				if (this.open) {
 					this.open = false;
-					break;
+					return;
 				}
 				this.value = "";
 				this.control.value = "";
 				this.filter = "";
 				this.filterOptions();
-				break;
+				return;
 			case "Tab":
 				this.setInputToSelection();
 				if (!this.open) return true;
 				e.preventDefault();
 				this.open = false;
-				break;
+				return;
 			case "ArrowUp":
 			case "ArrowDown":
 				this.filterOptions();
 				if (!this.open) {
 					this.open = true;
-					break;
+					return;
 				}
 				/* v8 ignore else -- @preserve */
 				if (this.filteredOptions.length > 0) {
@@ -275,7 +275,7 @@ var Combobox = class extends require_with_contextual_help.WithContextualHelp(req
 					this._isNavigatingWithKeyboard = false;
 				}
 				if (this.isAutocompleteInline) this.setInlineSelection();
-				break;
+				return;
 			default: return true;
 		}
 	}
@@ -488,7 +488,7 @@ var comboboxTemplate = (context) => {
 			@click="${(x, c) => x.clickHandler(c.event)}"
 			@focusout="${(x, c) => x.focusoutHandler(c.event)}"
 			@keydown="${(x, { event }) => {
-		x.open && require_dialog.handleEscapeKeyAndStopPropogation(event);
+		if (x.open) require_dialog.handleEscapeKeyAndStopPropogation(event);
 		return x.keydownHandler(event);
 	}}"
 		>

package/unbundled/definition30.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-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}";
+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;display:flex;transform:rotate(0)}@media (prefers-reduced-motion:no-preference){.chevron{transition:transform .2s}}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}: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
 /**
@@ -241,31 +241,31 @@ var Combobox = class extends WithContextualHelp(WithFeedback(WithErrorText(WithS
 				if (this.isAutocompleteInline) this.filter = this.value;
 				this.open = false;
 				this.clearSelectionRange();
-				break;
+				return;
 			case "Escape":
 				/* v8 ignore else -- @preserve */
 				if (!this.isAutocompleteInline) this.selectedIndex = -1;
 				if (this.open) {
 					this.open = false;
-					break;
+					return;
 				}
 				this.value = "";
 				this.control.value = "";
 				this.filter = "";
 				this.filterOptions();
-				break;
+				return;
 			case "Tab":
 				this.setInputToSelection();
 				if (!this.open) return true;
 				e.preventDefault();
 				this.open = false;
-				break;
+				return;
 			case "ArrowUp":
 			case "ArrowDown":
 				this.filterOptions();
 				if (!this.open) {
 					this.open = true;
-					break;
+					return;
 				}
 				/* v8 ignore else -- @preserve */
 				if (this.filteredOptions.length > 0) {
@@ -274,7 +274,7 @@ var Combobox = class extends WithContextualHelp(WithFeedback(WithErrorText(WithS
 					this._isNavigatingWithKeyboard = false;
 				}
 				if (this.isAutocompleteInline) this.setInlineSelection();
-				break;
+				return;
 			default: return true;
 		}
 	}
@@ -487,7 +487,7 @@ var comboboxTemplate = (context) => {
 			@click="${(x, c) => x.clickHandler(c.event)}"
 			@focusout="${(x, c) => x.focusoutHandler(c.event)}"
 			@keydown="${(x, { event }) => {
-		x.open && handleEscapeKeyAndStopPropogation(event);
+		if (x.open) handleEscapeKeyAndStopPropogation(event);
 		return x.keydownHandler(event);
 	}}"
 		>

package/unbundled/definition32.cjs

@@ -225,7 +225,7 @@ var CountryGroupTemplate = (context) => {
 							connotation="cta"
 							appearance="duotone"
 							shape="pill"
-							text="${(x) => "+" + x.overflowCount}"
+							text="${(x) => `+${x.overflowCount}`}"
 						></${badgeTag}>
 					</div>
 				`)}

package/unbundled/definition32.js

@@ -224,7 +224,7 @@ var CountryGroupTemplate = (context) => {
 							connotation="cta"
 							appearance="duotone"
 							shape="pill"
-							text="${(x) => "+" + x.overflowCount}"
+							text="${(x) => `+${x.overflowCount}`}"
 						></${badgeTag}>
 					</div>
 				`)}

package/unbundled/definition34.cjs

@@ -1146,7 +1146,7 @@ var DataGrid = class DataGrid extends require_vivid_element.VividElement {
 	}
 	queueFocusUpdate() {
 		if (this.isUpdatingFocus && this.contains(document.activeElement)) return;
-		if (this.pendingFocusUpdate === false) {
+		if (!this.pendingFocusUpdate) {
 			this.pendingFocusUpdate = true;
 			_microsoft_fast_element.Updates.enqueue(() => this.updateFocus());
 		}
@@ -1176,7 +1176,7 @@ var DataGrid = class DataGrid extends require_vivid_element.VividElement {
 	*
 	* @internal
 	*/
-	slottedRowElementsChanged(_oldValue, _newValue) {
+	slottedRowElementsChanged() {
 		this._resetSelection();
 	}
 	get #selectedRows() {
@@ -1534,18 +1534,19 @@ var DataGridRow = class extends require_host_semantics.HostSemantics(require_viv
 	*/
 	handleKeydown(e) {
 		if (e.defaultPrevented) return;
-		let newFocusColumnIndex = 0;
 		switch (e.key) {
-			case require_key_codes.keyArrowLeft:
-				newFocusColumnIndex = Math.max(0, this.focusColumnIndex - 1);
+			case require_key_codes.keyArrowLeft: {
+				const newFocusColumnIndex = Math.max(0, this.focusColumnIndex - 1);
 				this.cellElements[newFocusColumnIndex].focus();
 				e.preventDefault();
 				break;
-			case require_key_codes.keyArrowRight:
-				newFocusColumnIndex = Math.min(this.cellElements.length - 1, this.focusColumnIndex + 1);
+			}
+			case require_key_codes.keyArrowRight: {
+				const newFocusColumnIndex = Math.min(this.cellElements.length - 1, this.focusColumnIndex + 1);
 				this.cellElements[newFocusColumnIndex].focus();
 				e.preventDefault();
 				break;
+			}
 			case _microsoft_fast_web_utilities.keyHome:
 				if (!e.ctrlKey) {
 					this.cellElements[0].focus();
@@ -1988,7 +1989,7 @@ function handleClick(x, e) {
 }
 var DataGridCellTemplate = (context) => {
 	const visuallyHiddenTagName = context.tagFor(require_definition$1.VisuallyHidden);
-	const getBaseClasses = ({ selected, _actionItemsSlottedContent }) => (0, _microsoft_fast_web_utilities.classNames)("base", ["selected", !!selected], ["has-action-items", Boolean(_actionItemsSlottedContent?.length)]);
+	const getBaseClasses = ({ selected, _actionItemsSlottedContent }) => (0, _microsoft_fast_web_utilities.classNames)("base", ["selected", selected], ["has-action-items", Boolean(_actionItemsSlottedContent?.length)]);
 	return _microsoft_fast_element.html`
 		<template
 			tabindex="-1"

package/unbundled/definition34.js

@@ -1145,7 +1145,7 @@ var DataGrid = class DataGrid extends VividElement {
 	}
 	queueFocusUpdate() {
 		if (this.isUpdatingFocus && this.contains(document.activeElement)) return;
-		if (this.pendingFocusUpdate === false) {
+		if (!this.pendingFocusUpdate) {
 			this.pendingFocusUpdate = true;
 			Updates.enqueue(() => this.updateFocus());
 		}
@@ -1175,7 +1175,7 @@ var DataGrid = class DataGrid extends VividElement {
 	*
 	* @internal
 	*/
-	slottedRowElementsChanged(_oldValue, _newValue) {
+	slottedRowElementsChanged() {
 		this._resetSelection();
 	}
 	get #selectedRows() {
@@ -1533,18 +1533,19 @@ var DataGridRow = class extends HostSemantics(VividElement) {
 	*/
 	handleKeydown(e) {
 		if (e.defaultPrevented) return;
-		let newFocusColumnIndex = 0;
 		switch (e.key) {
-			case keyArrowLeft$1:
-				newFocusColumnIndex = Math.max(0, this.focusColumnIndex - 1);
+			case keyArrowLeft$1: {
+				const newFocusColumnIndex = Math.max(0, this.focusColumnIndex - 1);
 				this.cellElements[newFocusColumnIndex].focus();
 				e.preventDefault();
 				break;
-			case keyArrowRight$1:
-				newFocusColumnIndex = Math.min(this.cellElements.length - 1, this.focusColumnIndex + 1);
+			}
+			case keyArrowRight$1: {
+				const newFocusColumnIndex = Math.min(this.cellElements.length - 1, this.focusColumnIndex + 1);
 				this.cellElements[newFocusColumnIndex].focus();
 				e.preventDefault();
 				break;
+			}
 			case keyHome:
 				if (!e.ctrlKey) {
 					this.cellElements[0].focus();
@@ -1987,7 +1988,7 @@ function handleClick(x, e) {
 }
 var DataGridCellTemplate = (context) => {
 	const visuallyHiddenTagName = context.tagFor(VisuallyHidden);
-	const getBaseClasses = ({ selected, _actionItemsSlottedContent }) => classNames("base", ["selected", !!selected], ["has-action-items", Boolean(_actionItemsSlottedContent?.length)]);
+	const getBaseClasses = ({ selected, _actionItemsSlottedContent }) => classNames("base", ["selected", selected], ["has-action-items", Boolean(_actionItemsSlottedContent?.length)]);
 	return html`
 		<template
 			tabindex="-1"

package/unbundled/definition35.cjs

@@ -8,7 +8,7 @@ let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 var divider_default = ":host{display:block}.base{--_connotation-color-soft:var(--vvd-divider-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-dim:var(--vvd-divider-accent-dim,var(--vvd-color-neutral-200));display:block}.base:not(.vertical){block-size:1px;inline-size:100%}.base.vertical{block-size:100%;inline-size:1px}.base.appearance-ghost{background-color:var(--_connotation-color-dim)}.base.appearance-subtle{background-color:var(--_connotation-color-soft)}";
 //#endregion
 //#region src/lib/divider/divider.template.ts
-var getClasses = ({ orientation, appearance }) => (0, _microsoft_fast_web_utilities.classNames)("base", [`${orientation}`, Boolean(orientation)], [`appearance-${appearance}`, Boolean(appearance)]);
+var getClasses = ({ orientation, appearance }) => (0, _microsoft_fast_web_utilities.classNames)("base", [orientation, Boolean(orientation)], [`appearance-${appearance}`, Boolean(appearance)]);
 var getAriaOrientation = ({ role, orientation }) => role === require_divider.DividerRole.presentation ? null : orientation;
 var DividerTemplate = _microsoft_fast_element.html`<template
 	${require_host_semantics.applyHostSemantics({

package/unbundled/definition35.js

@@ -7,7 +7,7 @@ import { classNames } from "@microsoft/fast-web-utilities";
 var divider_default = ":host{display:block}.base{--_connotation-color-soft:var(--vvd-divider-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-dim:var(--vvd-divider-accent-dim,var(--vvd-color-neutral-200));display:block}.base:not(.vertical){block-size:1px;inline-size:100%}.base.vertical{block-size:100%;inline-size:1px}.base.appearance-ghost{background-color:var(--_connotation-color-dim)}.base.appearance-subtle{background-color:var(--_connotation-color-soft)}";
 //#endregion
 //#region src/lib/divider/divider.template.ts
-var getClasses = ({ orientation, appearance }) => classNames("base", [`${orientation}`, Boolean(orientation)], [`appearance-${appearance}`, Boolean(appearance)]);
+var getClasses = ({ orientation, appearance }) => classNames("base", [orientation, Boolean(orientation)], [`appearance-${appearance}`, Boolean(appearance)]);
 var getAriaOrientation = ({ role, orientation }) => role === DividerRole.presentation ? null : orientation;
 //#endregion
 //#region src/lib/divider/definition.ts

package/unbundled/definition39.cjs

@@ -48,7 +48,7 @@ var DialPad = class extends require_localized.Localized(require_vivid_element.Vi
 		this._onDial = () => {
 			if (!this._textFieldEl.checkValidity()) this._announceValidationError(this._textFieldEl.errorValidationMessage ?? "");
 			else this._clearErrorAnnouncement();
-			this.callActive ? this.$emit("end-call") : this.$emit("dial");
+			this.$emit(this.callActive ? "end-call" : "dial");
 		};
 		this.autofocus = false;
 		this._errorAnnouncement = "";
@@ -201,7 +201,7 @@ var DIAL_PAD_BUTTONS = [
 	new DialPadButton("0", "+", "digitZeroLabel", "zero-solid", "btn0"),
 	new DialPadButton("#", null, "digitHashtagLabel", "hashtag-solid", "btnHashtag")
 ];
-var getClasses = ({ noInput, size }) => (0, _microsoft_fast_web_utilities.classNames)("base", [`size-${size}`, Boolean(size)], ["no-input", Boolean(noInput)]);
+var getClasses = ({ noInput, size }) => (0, _microsoft_fast_web_utilities.classNames)("base", [`size-${size}`, Boolean(size)], ["no-input", noInput]);
 function handleKeyDown(x, e) {
 	if (e.key === _microsoft_fast_web_utilities.keyEnter && !x.pending && !x.disabled && !x.callActive && !x.noCall && x.value.length > 0 && e.target instanceof HTMLInputElement) x._onDial();
 	else if (e.key === " " || e.key === "Space") {