@vonage/vivid 5.19.0 → 5.20.1

package/unbundled/definition3.js

@@ -1,118 +1,171 @@
-import { c as createRegisterFunction, s as defineVividComponent, t as VividElement } from "./vivid-element.js";
-import { t as iconDefinition } from "./definition2.js";
+import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
-import { a as affixIconTemplateFactory, i as IconWrapper, n as AffixIconWithTrailing } from "./affix.js";
-import { attr, html, nullableNumberConverter, observable, ref, slotted, when } from "@microsoft/fast-element";
-import { classNames } from "@microsoft/fast-web-utilities";
-//#region src/lib/accordion-item/accordion-item.scss?inline
-var accordion_item_default = ":host{--_vvd-accordion-item-accent-firm-wrapper:var(--vvd-accordion-item-accent-firm)}.heading-button{--vvd-accordion-item-accent-firm:var(--_vvd-accordion-item-accent-firm-wrapper,var(--vvd-accordion-item-accent-primary))}:host{box-sizing:border-box;flex-direction:column;display:flex}.heading-container{margin:0}.heading-button,.heading-button.appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.heading-button.appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}@media (hover:hover){.heading-button:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.heading-button:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:transparent}.heading-button:hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:transparent}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}.heading-button:active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.heading-button:active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:transparent}.heading-button:active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-fierce);--_appearance-color-outline:transparent}.heading-button.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.heading-button.active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:transparent}.heading-button.active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-fierce);--_appearance-color-outline:transparent}.heading-button{--_connotation-color-primary:var(--vvd-accordion-item-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-accordion-item-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-accordion-item-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-accordion-item-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-faint:var(--vvd-accordion-item-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-accordion-item-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-firm:var(--vvd-accordion-item-accent-firm,var(--vvd-color-canvas-text));--focus-stroke-gap-color:transparent;background-color:var(--_appearance-color-fill);width:100%;color:var(--_appearance-color-text);cursor:pointer;text-align:left;border:none;align-items:center;padding:16px;display:flex}.heading-button:focus-visible{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))}.heading-button.size-condensed{font:var(--vvd-typography-base-extended-bold);gap:12px}.heading-button:not(.size-condensed){font:var(--vvd-typography-heading-4);gap:16px}.heading-content{flex:auto}.meta{max-width:var(--accordion-item-meta-inline-size,20%);color:var(--vvd-color-neutral-600);text-align:end;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;overflow:hidden}.heading-button:not(.size-condensed) .meta{font:var(--vvd-typography-base-bold)}.heading-button.size-condensed .meta{font:var(--vvd-typography-base-condensed-bold)}.region{padding:8px 32px 24px 16px;display:none}.region:not(.size-condensed).padded{padding-inline-start:52px}:host([expanded]) .region{display:block}.region.size-condensed.padded{padding-inline-start:44px}slot[name=icon]{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) slot[name=icon]{font:inherit}.heading-button.size-condensed slot[name=icon]{font:var(--vvd-typography-base-extended)}:host(:not([icon-trailing])) slot[name=icon]:last-of-type{color:var(--_appearance-color-text)}";
+import { r as AccordionItem, t as accordionItemDefinition } from "./definition2.js";
+import { attr, elements, html, observable, slotted } from "@microsoft/fast-element";
+import { classNames, keyArrowDown, keyArrowUp, keyEnd, keyHome, wrapInBounds } from "@microsoft/fast-web-utilities";
+//#region src/lib/accordion/accordion.scss?inline
+var accordion_default = ".base{box-sizing:border-box;flex-direction:column;display:flex}::slotted(:not(:only-of-type)){border-bottom:1px solid var(--vvd-color-neutral-200)}";
 //#endregion
-//#region src/lib/accordion-item/accordion-item.ts
+//#region src/lib/accordion/accordion.ts
 /**
+* Expand mode for {@link Accordion}
 * @public
-* @component accordion-item
+*/
+var AccordionExpandMode$1 = {
+	/**
+	* Designates only a single AccordionItem can be open a time.
+	*/
+	single: "single",
+	/**
+	* Designates multiple AccordionItems can be open simultaneously.
+	*/
+	multi: "multi"
+};
+/**
+* @public
+* @component accordion
+* @event {CustomEvent<string | null>} change - Fires a custom 'change' event when the active item changes
 * @slot - Default slot.
-* @slot icon - The preferred way to add an icon to the component.
-* @slot meta - Used to add additional content to the heading.
-* @slot heading - Used to add content to the heading.
-* @event {CustomEvent<undefined>} change - Fires a custom 'change' event when the button is invoked
-* @testSelector byHeading byHeading
-* @testAction expand toggleAccordionItem true
-* @testAction collapse toggleAccordionItem false
-* @testQuery expanded expanded true
-* @testQuery collapsed expanded false
-* @testRef button shadow .heading-button
 */
-var AccordionItem = class extends AffixIconWithTrailing(VividElement) {
+var Accordion = class extends VividElement {
 	constructor(..._args) {
 		super(..._args);
-		this.headinglevel = 2;
-		this.expanded = false;
-		this.noIndicator = false;
-		this.clickHandler = () => {
-			this.expanded = !this.expanded;
+		this.expandmode = AccordionExpandMode$1.single;
+		this.activeItemIndex = 0;
+		this.change = () => {
+			this.$emit("change", this.activeid);
+		};
+		this.setItems = () => {
+			if (this.accordionItems.length === 0) return;
+			this.accordionIds = this.getItemIds();
+			this.activeid = this.accordionIds[this.activeItemIndex];
+			this.accordionItems.forEach((item, index) => {
+				/* v8 ignore else -- @preserve */
+				if (item instanceof AccordionItem) {
+					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;
+				}
+				const itemId = this.accordionIds[index];
+				item.setAttribute("id", typeof itemId !== "string" ? `accordion-${index + 1}` : itemId);
+				item.addEventListener("keydown", this.handleItemKeyDown);
+			});
+			/* v8 ignore else -- @preserve */
+			if (this.isSingleExpandMode()) (this.findExpandedItem() ?? this.accordionItems[0]).setAttribute("aria-disabled", "true");
+		};
+		this.removeItemListeners = (oldValue) => {
+			oldValue.forEach((item) => {
+				item.removeEventListener("change", this.activeItemChange);
+				item.removeEventListener("keydown", this.handleItemKeyDown);
+			});
+		};
+		this.activeItemChange = (event) => {
+			if (event.defaultPrevented || event.target !== event.currentTarget) return;
+			event.preventDefault();
+			const selectedItem = event.target;
+			this.activeid = selectedItem.getAttribute("id");
+			if (this.isSingleExpandMode()) {
+				this.resetItems();
+				selectedItem.expanded = true;
+				selectedItem.setAttribute("aria-disabled", "true");
+				this.accordionItems.forEach((item) => {
+					if (!item.hasAttribute("disabled") && item.id !== this.activeid) item.removeAttribute("aria-disabled");
+				});
+			}
+			this.activeItemIndex = Array.from(this.accordionItems).indexOf(selectedItem);
 			this.change();
 		};
-		this.change = () => {
-			this.$emit("change");
+		this.handleItemKeyDown = (event) => {
+			if (event.target !== event.currentTarget) return;
+			this.accordionIds = this.getItemIds();
+			switch (event.key) {
+				case keyArrowUp:
+					event.preventDefault();
+					this.adjust(event.target, -1);
+					break;
+				case keyArrowDown:
+					event.preventDefault();
+					this.adjust(event.target, 1);
+					break;
+				case keyHome:
+					this.focusItem(0);
+					break;
+				case keyEnd:
+					this.focusItem(this.accordionItems.length - 1);
+					break;
+			}
 		};
 	}
+	/**
+	* @internal
+	*/
+	accordionItemsChanged(oldValue) {
+		if (this.$fastController.isConnected) {
+			this.removeItemListeners(oldValue);
+			this.setItems();
+		}
+	}
+	findExpandedItem() {
+		for (let item = 0; item < this.accordionItems.length; item++) if (this.accordionItems[item].hasAttribute("expanded") === true) return this.accordionItems[item];
+		return null;
+	}
+	resetItems() {
+		this.accordionItems.forEach((item) => {
+			item.expanded = false;
+		});
+	}
+	getItemIds() {
+		return this.accordionItems.map((accordionItem) => {
+			return accordionItem.getAttribute("id");
+		});
+	}
+	isSingleExpandMode() {
+		return this.expandmode !== AccordionExpandMode$1.multi;
+	}
+	adjust(item, adjustment) {
+		this.focusItem(wrapInBounds(0, this.accordionItems.length - 1, this.accordionItems.indexOf(item) + adjustment));
+	}
+	focusItem(index) {
+		const element = this.accordionItems[index];
+		/* v8 ignore else -- @preserve */
+		if (element instanceof AccordionItem) element.expandbutton.focus();
+	}
+	closeAll() {
+		/* v8 ignore else -- @preserve */
+		if (this.expandmode === AccordionExpandMode$1.multi) this.accordionItems.forEach((item) => {
+			item.expanded = false;
+		});
+	}
 };
-__decorate([attr({
-	attribute: "heading-level",
-	mode: "fromView",
-	converter: nullableNumberConverter
-})], AccordionItem.prototype, "headinglevel", void 0);
-__decorate([attr], AccordionItem.prototype, "appearance", void 0);
-__decorate([attr({ mode: "boolean" })], AccordionItem.prototype, "expanded", void 0);
-__decorate([attr], AccordionItem.prototype, "id", void 0);
-__decorate([attr], AccordionItem.prototype, "heading", void 0);
-__decorate([observable], AccordionItem.prototype, "_headingSlottedContent", void 0);
-__decorate([attr({
-	mode: "boolean",
-	attribute: "no-indicator"
-})], AccordionItem.prototype, "noIndicator", void 0);
-__decorate([attr], AccordionItem.prototype, "meta", void 0);
-__decorate([observable], AccordionItem.prototype, "_metaSlottedContent", void 0);
-__decorate([attr], AccordionItem.prototype, "size", void 0);
+__decorate([attr({ attribute: "expand-mode" })], Accordion.prototype, "expandmode", void 0);
+__decorate([observable], Accordion.prototype, "accordionItems", void 0);
 //#endregion
-//#region src/lib/accordion-item/accordion-item.template.ts
-var getClasses = ({ appearance, size }) => classNames("heading-button", [`appearance-${appearance}`, Boolean(appearance)], [`size-${size}`, Boolean(size)]);
-var header = (context, hTagName) => {
-	const affixIconTemplate = affixIconTemplateFactory(context);
-	const hTag = html.partial(hTagName);
-	return html`
-		<${hTag} class="heading-container">
-			<button
-				class="${getClasses}"
-				id="${(x) => x.id}"
-				aria-expanded="${(x) => x.expanded}"
-				aria-controls="${(x) => x.id}-panel"
-				@click="${(x) => x.clickHandler()}"
-				${ref("expandbutton")}
-			>
-
-				${(x) => !x.iconTrailing ? affixIconTemplate(x.icon, IconWrapper.Slot) : null}
-
-				<span class="heading-content">
-					<slot name="heading" ${slotted("_headingSlottedContent")}></slot>
-					${when((x) => x.heading && !x._headingSlottedContent?.length, html`${(x) => x.heading}`)}
-				</span>
-
-				<span class="meta">
-					<slot name="meta" ${slotted("_metaSlottedContent")}></slot>
-					${when((x) => x.meta && !x._metaSlottedContent?.length, html`${(x) => x.meta}`)}
-				</span>
-
-				${(x) => x.icon && x.iconTrailing ? affixIconTemplate(x.icon) : null}
-				${(x) => !(x.icon && x.iconTrailing) && !x.noIndicator ? affixIconTemplate(x.expanded ? "chevron-up-line" : "chevron-down-line") : null}
-
-			</button>
-		</${hTag}>
-	`;
-};
-var AccordionItemTemplate = (context) => html`
-	${(x) => header(context, "h" + x.headinglevel)}
-	<div
-		id="${(x) => x.id}-panel"
-		aria-labelledby="${(x) => x.id}"
-		role="region"
-		class="region ${(x) => x.icon && !x.iconTrailing ? "padded" : ""} ${(x) => x.size ? `size-${x.size}` : ""}"
-	>
-		<slot></slot>
+//#region src/lib/accordion/accordion.template.ts
+var getClasses = (_) => classNames("base");
+var AccordionTemplate = html`
+	<div class="${getClasses}">
+		<slot ${slotted({
+	property: "accordionItems",
+	filter: elements()
+})}></slot>
 	</div>
 `;
 //#endregion
-//#region src/lib/accordion-item/definition.ts
+//#region src/lib/accordion/definition.ts
+var AccordionExpandMode = {
+	single: "single",
+	multi: "multi"
+};
 /**
 * @internal
 */
-var accordionItemDefinition = defineVividComponent("accordion-item", AccordionItem, AccordionItemTemplate, [iconDefinition], { styles: accordion_item_default });
+var accordionDefinition = defineVividComponent("accordion", Accordion, AccordionTemplate, [accordionItemDefinition], { styles: accordion_default });
 /**
-* Registers the accordion item elements with the design system.
+* Registers the accordion elements with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerAccordionItem = createRegisterFunction(accordionItemDefinition);
+var registerAccordion = createRegisterFunction(accordionDefinition);
 //#endregion
-export { registerAccordionItem as n, AccordionItem as r, accordionItemDefinition as t };
+export { Accordion as i, accordionDefinition as n, registerAccordion as r, AccordionExpandMode as t };

package/unbundled/definition30.cjs

@@ -1,6 +1,6 @@
 require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
-const require_definition = require("./definition2.cjs");
+const require_definition = require("./definition.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_affix = require("./affix.cjs");
 const require_form_associated = require("./form-associated.cjs");

package/unbundled/definition30.js

@@ -1,5 +1,5 @@
-import { c as createRegisterFunction, s as defineVividComponent } from "./vivid-element.js";
-import { t as iconDefinition } from "./definition2.js";
+import { d as createRegisterFunction, u as defineVividComponent } from "./vivid-element.js";
+import { t as iconDefinition } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
 import { a as affixIconTemplateFactory, i as IconWrapper, t as AffixIcon } from "./affix.js";
 import { n as FormAssociated } from "./form-associated.js";
@@ -10,7 +10,7 @@ import { t as WithContextualHelp } from "./with-contextual-help.js";
 import { r as chevronTemplateFactory } from "./definition7.js";
 import { t as handleEscapeKeyAndStopPropogation } from "./dialog.js";
 import { i as Popup, t as popupDefinition } from "./definition10.js";
-import { a as feedbackMessageDefinition, t as WithFeedback } from "./mixins.js";
+import { r as feedbackMessageDefinition, t as WithFeedback } from "./mixins.js";
 import { t as text_field_default } from "./text-field.js";
 import { t as listboxOptionDefinition } from "./definition29.js";
 import { t as Listbox } from "./listbox.js";

package/unbundled/definition31.cjs

@@ -1,6 +1,6 @@
 require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
-const require_definition = require("./definition2.cjs");
+const require_definition = require("./definition.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_utils = require("./utils.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");

package/unbundled/definition31.js

@@ -1,5 +1,5 @@
-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 { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
+import { r as Icon, t as iconDefinition } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
 import { t as getFlagIconName } from "./utils.js";
 import { attr, html, when } from "@microsoft/fast-element";

package/unbundled/definition32.js

@@ -1,4 +1,4 @@
-import { c as createRegisterFunction, s as defineVividComponent, t as VividElement } from "./vivid-element.js";
+import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
 import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
 import { t as Localized } from "./localized.js";

package/unbundled/definition33.cjs

@@ -1,8 +1,8 @@
 require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
-const require_definition = require("./definition.cjs");
 const require_numberConverter = require("./numberConverter.cjs");
 const require_decorate = require("./decorate.cjs");
+const require_definition = require("./definition6.cjs");
 const require_utils = require("./utils.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");

package/unbundled/definition33.js

@@ -1,7 +1,7 @@
-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 { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
 import { n as resolveIcon, r as PLACEHOLDER_ICON, t as numberConverter } from "./numberConverter.js";
 import { t as __decorate } from "./decorate.js";
+import { n as visuallyHiddenDefinition, r as VisuallyHidden } from "./definition6.js";
 import { t as getFlagIconName } from "./utils.js";
 import { attr, html, observable, when } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";

package/unbundled/definition34.cjs

@@ -1,9 +1,9 @@
 require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_definition = require("./definition.cjs");
-const require_definition$1 = require("./definition2.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_localized = require("./localized.cjs");
+const require_definition$1 = require("./definition6.cjs");
 const require_key_codes = require("./key-codes.cjs");
 const require_host_semantics = require("./host-semantics.cjs");
 const require_data_grid_options = require("./data-grid.options.cjs");
@@ -18,7 +18,7 @@ var data_grid_row_default = ".base.connotation-cta{--_connotation-color-primary:
 //#region src/lib/data-grid/data-grid-cell.scss?inline
 var data_grid_cell_default = ":host{block-size:100%;min-inline-size:80px}:host(:focus-visible){outline:none}:host([data-fixed]){z-index:5;background:var(--data-grid-cell-background,var(--vvd-color-surface-2dp));position:sticky}:host([data-fixed]):before{z-index:1;width:1px;content:\"\";pointer-events:none;block-size:100%;position:absolute;top:0;right:0;box-shadow:4px 0 4px #0000001a,2px 0 2px #0000000d,1px 0 1px #0000000d}.base.connotation-cta{--_connotation-color-primary:var(--vvd-data-grid-cell-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-data-grid-cell-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-data-grid-cell-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-firm:var(--vvd-data-grid-cell-cta-firm,var(--vvd-color-cta-600));--_connotation-color-soft:var(--vvd-data-grid-cell-cta-soft,var(--vvd-color-cta-100));--_connotation-color-faint:var(--vvd-data-grid-cell-cta-faint,var(--vvd-color-cta-50));--_connotation-color-pale:var(--vvd-data-grid-cell-cta-pale,var(--vvd-color-cta-300));--_connotation-color-dim:var(--vvd-data-grid-cell-cta-dim,var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-data-grid-cell-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-data-grid-cell-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-data-grid-cell-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-firm:var(--vvd-data-grid-cell-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-data-grid-cell-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-faint:var(--vvd-data-grid-cell-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-pale:var(--vvd-data-grid-cell-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-dim:var(--vvd-data-grid-cell-accent-dim,var(--vvd-color-neutral-200))}.base{--_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(--_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(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}@media (hover:hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}.base{box-sizing:border-box;border-bottom:1px solid var(--vvd-color-neutral-300);block-size:var(--data-grid-cell-block-size,var(--_data-grid-cell-default-block-size));color:var(--_appearance-color-text);font:var(--vvd-typography-base);min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));align-items:center;padding-block:13px 14px;padding-inline:12px;display:flex}:host(:focus-visible) .base{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}:host([cell-type=columnheader]) .base{border-color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);--_data-grid-cell-default-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));--_data-grid-cell-default-white-space:nowrap}:host(:not([cell-type=columnheader])) .base{--_data-grid-cell-default-block-size:100%;--_data-grid-cell-default-white-space:normal}:host([selected]:not([cell-type=columnheader])) .base{background-color:var(--_appearance-color-fill)}.content{align-items:center;display:flex;overflow:hidden}.content[role=button]{cursor:pointer}slot:not([name]){text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space,var(--_data-grid-cell-default-white-space));display:block;overflow:hidden}:host(:not([cell-type=columnheader][aria-sort])) slot:not([name]){inline-size:100%}.header-icon{flex-shrink:0;margin-inline-start:16px}slot[name=action-items]{flex-shrink:0;align-items:center;display:flex}.base.has-action-items slot[name=action-items]{margin-inline-start:16px}";
 //#endregion
-//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.8.3/node_modules/@microsoft/fast-element/dist/esm/interfaces.js
+//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.4/node_modules/@microsoft/fast-element/dist/esm/interfaces.js
 var kernelMode;
 var kernelAttr = "fast-kernel";
 try {
@@ -59,6 +59,38 @@ switch (kernelMode) {
 		break;
 }
 /**
+* Warning and error messages.
+* @internal
+*/
+var Message;
+(function(Message) {
+	Message[Message["needsArrayObservation"] = 1101] = "needsArrayObservation";
+	Message[Message["onlySetDOMPolicyOnce"] = 1201] = "onlySetDOMPolicyOnce";
+	Message[Message["bindingInnerHTMLRequiresTrustedTypes"] = 1202] = "bindingInnerHTMLRequiresTrustedTypes";
+	Message[Message["twoWayBindingRequiresObservables"] = 1203] = "twoWayBindingRequiresObservables";
+	Message[Message["hostBindingWithoutHost"] = 1204] = "hostBindingWithoutHost";
+	Message[Message["unsupportedBindingBehavior"] = 1205] = "unsupportedBindingBehavior";
+	Message[Message["directCallToHTMLTagNotAllowed"] = 1206] = "directCallToHTMLTagNotAllowed";
+	Message[Message["onlySetTemplatePolicyOnce"] = 1207] = "onlySetTemplatePolicyOnce";
+	Message[Message["cannotSetTemplatePolicyAfterCompilation"] = 1208] = "cannotSetTemplatePolicyAfterCompilation";
+	Message[Message["blockedByDOMPolicy"] = 1209] = "blockedByDOMPolicy";
+	Message[Message["missingElementDefinition"] = 1401] = "missingElementDefinition";
+	Message[Message["noRegistrationForContext"] = 1501] = "noRegistrationForContext";
+	Message[Message["noFactoryForResolver"] = 1502] = "noFactoryForResolver";
+	Message[Message["invalidResolverStrategy"] = 1503] = "invalidResolverStrategy";
+	Message[Message["cannotAutoregisterDependency"] = 1504] = "cannotAutoregisterDependency";
+	Message[Message["cannotResolveKey"] = 1505] = "cannotResolveKey";
+	Message[Message["cannotConstructNativeFunction"] = 1506] = "cannotConstructNativeFunction";
+	Message[Message["cannotJITRegisterNonConstructor"] = 1507] = "cannotJITRegisterNonConstructor";
+	Message[Message["cannotJITRegisterIntrinsic"] = 1508] = "cannotJITRegisterIntrinsic";
+	Message[Message["cannotJITRegisterInterface"] = 1509] = "cannotJITRegisterInterface";
+	Message[Message["invalidResolver"] = 1510] = "invalidResolver";
+	Message[Message["invalidKey"] = 1511] = "invalidKey";
+	Message[Message["noDefaultResolver"] = 1512] = "noDefaultResolver";
+	Message[Message["cyclicDependency"] = 1513] = "cyclicDependency";
+	Message[Message["connectUpdateRequiresController"] = 1514] = "connectUpdateRequiresController";
+})(Message || (Message = {}));
+/**
 * Determines whether or not an object is a function.
 * @public
 */
@@ -74,7 +106,7 @@ var isString = (object) => typeof object === "string";
 */
 var noop = () => void 0;
 //#endregion
-//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.8.3/node_modules/@microsoft/fast-element/dist/esm/polyfills.js
+//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.4/node_modules/@microsoft/fast-element/dist/esm/polyfills.js
 (function ensureGlobalThis() {
 	if (typeof globalThis !== "undefined") return;
 	if (typeof global !== "undefined") global.globalThis = global;
@@ -115,7 +147,7 @@ var noop = () => void 0;
 	};
 })();
 //#endregion
-//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.8.3/node_modules/@microsoft/fast-element/dist/esm/platform.js
+//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.4/node_modules/@microsoft/fast-element/dist/esm/platform.js
 var propConfig = {
 	configurable: false,
 	enumerable: false,
@@ -232,7 +264,7 @@ var DOM = Object.freeze({
 	* called by the application developer at the start of their program.
 	*/
 	setPolicy(value) {
-		if (defaultPolicy !== fastPolicy) throw FAST.error(1201);
+		if (defaultPolicy !== fastPolicy) throw FAST.error(Message.onlySetDOMPolicyOnce);
 		defaultPolicy = value;
 	},
 	/**
@@ -260,59 +292,7 @@ var DOM = Object.freeze({
 	}
 });
 //#endregion
-//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.8.3/node_modules/@microsoft/fast-element/dist/esm/observation/update-queue.js
-/**
-* The default UpdateQueue.
-* @public
-*/
-var Updates$1 = FAST.getById(KernelServiceId.updateQueue, () => {
-	const tasks = [];
-	const pendingErrors = [];
-	const rAF = globalThis.requestAnimationFrame;
-	let updateAsync = true;
-	function throwFirstError() {
-		if (pendingErrors.length) throw pendingErrors.shift();
-	}
-	function tryRunTask(task) {
-		try {
-			task.call();
-		} catch (error) {
-			if (updateAsync) {
-				pendingErrors.push(error);
-				setTimeout(throwFirstError, 0);
-			} else {
-				tasks.length = 0;
-				throw error;
-			}
-		}
-	}
-	function process() {
-		const capacity = 1024;
-		let index = 0;
-		while (index < tasks.length) {
-			tryRunTask(tasks[index]);
-			index++;
-			if (index > capacity) {
-				for (let scan = 0, newLength = tasks.length - index; scan < newLength; scan++) tasks[scan] = tasks[scan + index];
-				tasks.length -= index;
-				index = 0;
-			}
-		}
-		tasks.length = 0;
-	}
-	function enqueue(callable) {
-		tasks.push(callable);
-		if (tasks.length < 2) updateAsync ? rAF(process) : process();
-	}
-	return Object.freeze({
-		enqueue,
-		next: () => new Promise(enqueue),
-		process,
-		setMode: (isAsync) => updateAsync = isAsync
-	});
-});
-//#endregion
-//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.8.3/node_modules/@microsoft/fast-element/dist/esm/observation/notifier.js
+//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.4/node_modules/@microsoft/fast-element/dist/esm/observation/notifier.js
 /**
 * An implementation of {@link Notifier} that efficiently keeps track of
 * subscribers interested in a specific change notification on an
@@ -446,7 +426,59 @@ var PropertyChangeNotifier = class {
 	}
 };
 //#endregion
-//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.8.3/node_modules/@microsoft/fast-element/dist/esm/observation/observable.js
+//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.4/node_modules/@microsoft/fast-element/dist/esm/observation/update-queue.js
+/**
+* The default UpdateQueue.
+* @public
+*/
+var Updates$1 = FAST.getById(KernelServiceId.updateQueue, () => {
+	const tasks = [];
+	const pendingErrors = [];
+	const rAF = globalThis.requestAnimationFrame;
+	let updateAsync = true;
+	function throwFirstError() {
+		if (pendingErrors.length) throw pendingErrors.shift();
+	}
+	function tryRunTask(task) {
+		try {
+			task.call();
+		} catch (error) {
+			if (updateAsync) {
+				pendingErrors.push(error);
+				setTimeout(throwFirstError, 0);
+			} else {
+				tasks.length = 0;
+				throw error;
+			}
+		}
+	}
+	function process() {
+		const capacity = 1024;
+		let index = 0;
+		while (index < tasks.length) {
+			tryRunTask(tasks[index]);
+			index++;
+			if (index > capacity) {
+				for (let scan = 0, newLength = tasks.length - index; scan < newLength; scan++) tasks[scan] = tasks[scan + index];
+				tasks.length -= index;
+				index = 0;
+			}
+		}
+		tasks.length = 0;
+	}
+	function enqueue(callable) {
+		tasks.push(callable);
+		if (tasks.length < 2) updateAsync ? rAF(process) : process();
+	}
+	return Object.freeze({
+		enqueue,
+		next: () => new Promise(enqueue),
+		process,
+		setMode: (isAsync) => updateAsync = isAsync
+	});
+});
+//#endregion
+//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.4/node_modules/@microsoft/fast-element/dist/esm/observation/observable.js
 /**
 * Describes how the source's lifetime relates to its controller's lifetime.
 * @public
@@ -468,7 +500,7 @@ FAST.getById(KernelServiceId.observable, () => {
 	const notifierLookup = /* @__PURE__ */ new WeakMap();
 	let watcher = void 0;
 	let createArrayObserver = (array) => {
-		throw FAST.error(1101);
+		throw FAST.error(Message.needsArrayObservation);
 	};
 	function getNotifier(source) {
 		var _a;
@@ -725,7 +757,13 @@ var ExecutionContext = Object.freeze({
 	}
 });
 //#endregion
-//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.8.3/node_modules/@microsoft/fast-element/dist/esm/templating/markup.js
+//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.4/node_modules/@microsoft/fast-element/dist/esm/templating/markup.js
+/**
+* A unique per-session random marker string used to create placeholder tokens in HTML.
+* Bindings embedded in template literals are replaced with interpolation markers
+* of the form `fast-xxxxxx{id}fast-xxxxxx` so the compiler can later locate them in the
+* parsed DOM and associate each marker with its ViewBehaviorFactory.
+*/
 var marker = `fast-${Math.random().toString(36).substring(2, 8)}`;
 var interpolationStart = `${marker}{`;
 var interpolationEnd = `}${marker}`;
@@ -787,7 +825,7 @@ parse(value, factories) {
 	return result;
 } });
 //#endregion
-//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.8.3/node_modules/@microsoft/fast-element/dist/esm/utilities.js
+//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.4/node_modules/@microsoft/fast-element/dist/esm/utilities.js
 /**
 * Bridges between ViewBehaviors and HostBehaviors, enabling a host to
 * control ViewBehaviors.
@@ -1912,7 +1950,7 @@ function calculateAriaSelectedValue(x) {
 	return null;
 }
 function renderSortIcons(c) {
-	const iconTag = c.tagFor(require_definition$1.Icon);
+	const iconTag = c.tagFor(require_definition.Icon);
 	return _microsoft_fast_element.html`
 		${(0, _microsoft_fast_element.when)(shouldShowSortIcons, _microsoft_fast_element.html`
 				<${iconTag} class="header-icon" name="${getSortIcon}"></${iconTag}>
@@ -1949,7 +1987,7 @@ function handleClick(x, e) {
 	return true;
 }
 var DataGridCellTemplate = (context) => {
-	const visuallyHiddenTagName = context.tagFor(require_definition.VisuallyHidden);
+	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)]);
 	return _microsoft_fast_element.html`
 		<template
@@ -2000,7 +2038,7 @@ var DataGridCellTemplate = (context) => {
 /**
 * @internal
 */
-var dataGridCellDefinition = require_vivid_element.defineVividComponent("data-grid-cell", DataGridCell, DataGridCellTemplate, [require_definition$1.iconDefinition, require_definition.visuallyHiddenDefinition], { styles: data_grid_cell_default });
+var dataGridCellDefinition = require_vivid_element.defineVividComponent("data-grid-cell", DataGridCell, DataGridCellTemplate, [require_definition.iconDefinition, require_definition$1.visuallyHiddenDefinition], { styles: data_grid_cell_default });
 /**
 * @internal
 */