@vonage/vivid 5.25.0 → 5.27.0

package/unbundled/definition35.js

@@ -6,19 +6,19 @@ import { t as Localized } from "./localized.js";
 import { n as keyArrowRight$1, t as keyArrowLeft$1 } from "./key-codes.js";
 import { n as applyHostSemantics, t as HostSemantics } from "./host-semantics.js";
 import { n as visuallyHiddenDefinition, r as VisuallyHidden } from "./definition22.js";
-import { a as GenerateHeaderOptions, i as DataGridRowTypes, n as DataGridCellSortStates, r as DataGridCellTypes, t as DataGridCellRole } from "./data-grid.options.js";
+import { a as GenerateHeaderOptions, i as DataGridRowTypes, n as DataGridCellSortStates, o as dataGridConnotation, r as DataGridCellTypes, t as DataGridCellRole } from "./data-grid.options.js";
 import { Observable, RepeatDirective, Updates, attr, children, elements, html, normalizeBinding, nullableNumberConverter, observable, slotted, when } from "@microsoft/fast-element";
 import { classNames, eventFocus, eventFocusIn, eventFocusOut, eventKeyDown, keyArrowDown, keyArrowUp, keyEnd, keyEnter, keyEscape, keyFunction2, keyHome, keyPageDown, keyPageUp, keySpace } from "@microsoft/fast-web-utilities";
 //#region src/lib/data-grid/data-grid.scss?inline
 var data_grid_default = ":host{display:block}:host([generate-header=sticky]){max-block-size:400px}.base{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in sRGB, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base ::-webkit-scrollbar{width:4px}.base ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base{block-size:inherit;inline-size:100%;max-block-size:inherit;position:relative;overflow:auto}";
 //#endregion
 //#region src/lib/data-grid/data-grid-row.scss?inline
-var data_grid_row_default = ".base.connotation-cta{--_connotation-color-primary:var(--vvd-data-grid-row-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-data-grid-row-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-data-grid-row-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-firm:var(--vvd-data-grid-row-cta-firm,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-data-grid-row-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-data-grid-row-cta-soft,var(--vvd-color-cta-100));--_connotation-color-pale:var(--vvd-data-grid-row-cta-pale,var(--vvd-color-cta-300));--_connotation-color-dim:var(--vvd-data-grid-row-cta-dim,var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-data-grid-row-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-data-grid-row-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-data-grid-row-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-firm:var(--vvd-data-grid-row-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-data-grid-row-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-data-grid-row-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-pale:var(--vvd-data-grid-row-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-dim:var(--vvd-data-grid-row-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;width:100%;color:var(--vvd-color-canvas-text);display:grid}:host([row-type=sticky-header]) .base{z-index:9;background:var(--data-grid-row-background,var(--vvd-color-canvas));position:sticky;top:0}:host([row-type=hidden-header]) .base{display:none}:host([selected]:not([row-type*=header])) .base{background-color:var(--_appearance-color-fill)}";
+var data_grid_row_default = ".base{box-sizing:border-box;width:100%;color:var(--vvd-color-canvas-text);display:grid}:host([row-type=sticky-header]) .base{z-index:9;background:var(--data-grid-row-background,var(--vvd-color-canvas));position:sticky;top:0}:host([row-type=hidden-header]) .base{display:none}:host([selected]:not([row-type*=header])) .base{background-color:var(--_appearance-color-fill)}";
 //#endregion
 //#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(--vvd-color-canvas-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}";
+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{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(--vvd-color-canvas-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.10.4/node_modules/@microsoft/fast-element/dist/esm/interfaces.js
+//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.5/node_modules/@microsoft/fast-element/dist/esm/interfaces.js
 var kernelMode;
 var kernelAttr = "fast-kernel";
 try {
@@ -56,7 +56,6 @@ switch (kernelMode) {
 			contextEvent: `3.2${postfix}`,
 			elementRegistry: `4.2${postfix}`
 		});
-		break;
 }
 /**
 * Warning and error messages.
@@ -106,7 +105,7 @@ var isString = (object) => typeof object === "string";
 */
 var noop = () => void 0;
 //#endregion
-//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.4/node_modules/@microsoft/fast-element/dist/esm/polyfills.js
+//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.5/node_modules/@microsoft/fast-element/dist/esm/polyfills.js
 (function ensureGlobalThis() {
 	if (typeof globalThis !== "undefined") return;
 	if (typeof global !== "undefined") global.globalThis = global;
@@ -147,7 +146,7 @@ var noop = () => void 0;
 	};
 })();
 //#endregion
-//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.4/node_modules/@microsoft/fast-element/dist/esm/platform.js
+//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.5/node_modules/@microsoft/fast-element/dist/esm/platform.js
 var propConfig = {
 	configurable: false,
 	enumerable: false,
@@ -292,7 +291,7 @@ var DOM$1 = Object.freeze({
 	}
 });
 //#endregion
-//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.4/node_modules/@microsoft/fast-element/dist/esm/observation/notifier.js
+//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.5/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
@@ -426,7 +425,7 @@ var PropertyChangeNotifier = class {
 	}
 };
 //#endregion
-//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.4/node_modules/@microsoft/fast-element/dist/esm/observation/update-queue.js
+//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.5/node_modules/@microsoft/fast-element/dist/esm/observation/update-queue.js
 /**
 * The default UpdateQueue.
 * @public
@@ -478,7 +477,7 @@ var Updates$1 = FAST.getById(KernelServiceId.updateQueue, () => {
 	});
 });
 //#endregion
-//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.4/node_modules/@microsoft/fast-element/dist/esm/observation/observable.js
+//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.5/node_modules/@microsoft/fast-element/dist/esm/observation/observable.js
 /**
 * Describes how the source's lifetime relates to its controller's lifetime.
 * @public
@@ -757,7 +756,7 @@ var ExecutionContext$1 = Object.freeze({
 	}
 });
 //#endregion
-//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.4/node_modules/@microsoft/fast-element/dist/esm/templating/markup.js
+//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.5/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
@@ -825,7 +824,7 @@ parse(value, factories) {
 	return result;
 } });
 //#endregion
-//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.4/node_modules/@microsoft/fast-element/dist/esm/utilities.js
+//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.5/node_modules/@microsoft/fast-element/dist/esm/utilities.js
 /**
 * Bridges between ViewBehaviors and HostBehaviors, enabling a host to
 * control ViewBehaviors.
@@ -1102,12 +1101,11 @@ var DataGrid = class DataGrid extends VividElement {
 				}
 				break;
 			case keyEnd:
-				/* v8 ignore else -- @preserve */
-				if (e.ctrlKey && this.columnDefinitions !== null) {
-					e.preventDefault();
-					this.focusOnCell(this.rowElements.length - 1, this.columnDefinitions.length - 1, true);
-				}
-				break;
+ /* v8 ignore else -- @preserve */
+			if (e.ctrlKey && this.columnDefinitions !== null) {
+				e.preventDefault();
+				this.focusOnCell(this.rowElements.length - 1, this.columnDefinitions.length - 1, true);
+			}
 		}
 	}
 	queueFocusUpdate() {
@@ -1493,12 +1491,10 @@ var DataGridRow = class extends HostSemantics(VividElement) {
 					e.preventDefault();
 				}
 				break;
-			case keyEnd:
-				if (!e.ctrlKey) {
-					this.cellElements[this.cellElements.length - 1].focus();
-					e.preventDefault();
-				}
-				break;
+			case keyEnd: if (!e.ctrlKey) {
+				this.cellElements[this.cellElements.length - 1].focus();
+				e.preventDefault();
+			}
 		}
 	}
 	updateItemTemplate() {
@@ -1679,13 +1675,11 @@ var DataGridCell = class extends Localized(HostSemantics(VividElement)) {
 					if (focusTarget !== null) focusTarget.focus();
 				}
 				break;
-			default:
-				if (this.columnDefinition !== null && this.columnDefinition.cellInternalFocusQueue !== true && typeof this.columnDefinition.cellFocusTargetCallback === "function") {
-					const focusTarget = this.columnDefinition.cellFocusTargetCallback(this);
-					/* v8 ignore else -- @preserve */
-					if (focusTarget !== null) focusTarget.focus();
-				}
-				break;
+			default: if (this.columnDefinition !== null && this.columnDefinition.cellInternalFocusQueue !== true && typeof this.columnDefinition.cellFocusTargetCallback === "function") {
+				const focusTarget = this.columnDefinition.cellFocusTargetCallback(this);
+				/* v8 ignore else -- @preserve */
+				if (focusTarget !== null) focusTarget.focus();
+			}
 		}
 		this.$emit("cell-focused", this);
 	}
@@ -1711,23 +1705,20 @@ var DataGridCell = class extends Localized(HostSemantics(VividElement)) {
 							e.preventDefault();
 						}
 						break;
-					default:
-						if (this.columnDefinition.cellFocusTargetCallback !== void 0) {
-							const focusTarget = this.columnDefinition.cellFocusTargetCallback(this);
-							/* v8 ignore else -- @preserve */
-							if (focusTarget !== null) focusTarget.focus();
-							e.preventDefault();
-						}
-						break;
+					default: if (this.columnDefinition.cellFocusTargetCallback !== void 0) {
+						const focusTarget = this.columnDefinition.cellFocusTargetCallback(this);
+						/* v8 ignore else -- @preserve */
+						if (focusTarget !== null) focusTarget.focus();
+						e.preventDefault();
+					}
 				}
 				break;
 			case keyEscape:
-				/* v8 ignore else -- @preserve */
-				if (this.contains(document.activeElement) && document.activeElement !== this) {
-					this.focus();
-					e.preventDefault();
-				}
-				break;
+ /* v8 ignore else -- @preserve */
+			if (this.contains(document.activeElement) && document.activeElement !== this) {
+				this.focus();
+				e.preventDefault();
+			}
 		}
 	}
 	updateCellView() {
@@ -1739,10 +1730,8 @@ var DataGridCell = class extends Localized(HostSemantics(VividElement)) {
 				else this.customCellView = defaultHeaderCellContentsTemplate.render(this, this);
 				break;
 			case DataGridCellTypes.rowHeader:
-			case DataGridCellTypes.default:
-				if (this.columnDefinition.cellTemplate !== void 0) this.customCellView = this.columnDefinition.cellTemplate.render(this, this);
-				else this.customCellView = defaultCellContentsTemplate.render(this, this);
-				break;
+			case DataGridCellTypes.default: if (this.columnDefinition.cellTemplate !== void 0) this.customCellView = this.columnDefinition.cellTemplate.render(this, this);
+			else this.customCellView = defaultCellContentsTemplate.render(this, this);
 		}
 		if (!this.columnDefinition?.sortable) this.sortDirection = void 0;
 		else if (this.columnDefinition.sortDirection) this.sortDirection = this.columnDefinition.sortDirection;
@@ -1844,7 +1833,7 @@ var DataGridRowTemplate = (context) => {
 	})}
 		>
 			<div
-				class="${(x) => classNames("base", ["selected", !!x.selected], [`connotation-${x.connotation}`, Boolean(x.connotation)])}"
+				class="${(x) => classNames("base", `connotation-${dataGridConnotation.parse(x.connotation)}`, "appearance-listitem", "with-idle", "with-hover", "with-selected", "with-selectedAndHover", ["selected", !!x.selected])}"
 				style="grid-template-columns: ${(x) => x.gridTemplateColumns};"
 			>
 				<slot ${slotted("slottedCellElements")}></slot>
@@ -1918,7 +1907,7 @@ var DataGridCellTemplate = (context) => {
 			@keydown="${(x, c) => handleKeyDown(x, c.event)}"
 		>
 			<div
-				class="${(x) => classNames("base", ["selected", x.selected], ["has-action-items", Boolean(x._actionItemsSlottedContent?.length)], [`connotation-${x.connotation}`, Boolean(x.connotation)])}"
+				class="${(x) => classNames("base", `connotation-${dataGridConnotation.parse(x.connotation)}`, "appearance-listitem", "with-idle", "with-hover", "with-selected", "with-selectedAndHover", ["selected", x.selected], ["has-action-items", Boolean(x._actionItemsSlottedContent?.length)])}"
 			>
 				<div
 					class="content"

package/unbundled/definition36.cjs

@@ -1,11 +1,10 @@
-require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_host_semantics = require("./host-semantics.cjs");
 const require_divider = require("./divider.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/lib/divider/divider.scss?inline
-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)}";
+var divider_default = ":host,.base{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 getAriaOrientation = ({ role, orientation }) => role === require_divider.DividerRole.presentation ? null : orientation;
@@ -17,7 +16,7 @@ var DividerTemplate = _microsoft_fast_element.html`<template
 })}
 >
 	<span
-		class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", [x.orientation, Boolean(x.orientation)], [`appearance-${x.appearance}`, Boolean(x.appearance)])}"
+		class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", "connotation-accent", [x.orientation, Boolean(x.orientation)], `appearance-${require_divider.dividerAppearance.parse(x.appearance)}`)}"
 	></span
 ></template>`;
 //#endregion

package/unbundled/definition36.js

@@ -1,17 +1,14 @@
 import { d as createRegisterFunction, u as defineVividComponent } from "./vivid-element.js";
 import { n as applyHostSemantics } from "./host-semantics.js";
-import { n as DividerRole, t as Divider } from "./divider.js";
+import { n as DividerRole, r as dividerAppearance, t as Divider } from "./divider.js";
 import { html } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
 //#region src/lib/divider/divider.scss?inline
-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)}";
+var divider_default = ":host,.base{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 getAriaOrientation = ({ role, orientation }) => role === DividerRole.presentation ? null : orientation;
-//#endregion
-//#region src/lib/divider/definition.ts
-/** @internal */
-var dividerDefinition = defineVividComponent("divider", Divider, html`<template
+var DividerTemplate = html`<template
 	${applyHostSemantics({
 	role: (x) => x.role || DividerRole.separator,
 	ariaHidden: true,
@@ -19,9 +16,13 @@ var dividerDefinition = defineVividComponent("divider", Divider, html`<template
 })}
 >
 	<span
-		class="${(x) => classNames("base", [x.orientation, Boolean(x.orientation)], [`appearance-${x.appearance}`, Boolean(x.appearance)])}"
+		class="${(x) => classNames("base", "connotation-accent", [x.orientation, Boolean(x.orientation)], `appearance-${dividerAppearance.parse(x.appearance)}`)}"
 	></span
-></template>`, [], { styles: divider_default });
+></template>`;
+//#endregion
+//#region src/lib/divider/definition.ts
+/** @internal */
+var dividerDefinition = defineVividComponent("divider", Divider, DividerTemplate, [], { styles: divider_default });
 /**
 * Registers the divider elements with the design system.
 *

package/unbundled/definition37.cjs

@@ -1,4 +1,3 @@
-require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_definition = require("./definition6.cjs");

package/unbundled/definition38.cjs

@@ -1,4 +1,3 @@
-require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_definition = require("./definition6.cjs");

package/unbundled/definition39.cjs

@@ -1,4 +1,3 @@
-require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_definition = require("./definition6.cjs");

package/unbundled/definition4.cjs

@@ -1,13 +1,14 @@
-require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_decorate = require("./decorate.cjs");
+const require_component_enum = require("./component-enum.cjs");
 const require_delegates_aria = require("./delegates-aria.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/lib/action-group/action-group.scss?inline
-var action_group_default = ":host{display:inline-block}.base{--_connotation-color-primary:var(--vvd-action-group-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-intermediate:var(--vvd-action-group-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-faint:var(--vvd-action-group-accent-faint,var(--vvd-color-neutral-50));--_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}.base{box-sizing:border-box;background-color:var(--_appearance-color-fill);inline-size:inherit;vertical-align:middle;align-items:center;display:flex;position:relative}.base:before{z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";pointer-events:none;position:absolute;inset:0}.base:not(.tight){column-gap:4px;padding:4px}.base:not(.shape-pill){border-radius:8px}.base.shape-pill{border-radius:24px}::slotted([data-vvd-component=divider]){align-self:stretch;margin-block:4px}";
+var action_group_default = ":host{display:inline-block}.base{box-sizing:border-box;background-color:var(--_appearance-color-fill);inline-size:inherit;vertical-align:middle;align-items:center;display:flex;position:relative}.base:before{z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";pointer-events:none;position:absolute;inset:0}.base:not(.tight){column-gap:4px;padding:4px}.base:not(.shape-pill){border-radius:8px}.base.shape-pill{border-radius:24px}::slotted([data-vvd-component=divider]){align-self:stretch;margin-block:4px}";
 //#endregion
 //#region src/lib/action-group/action-group.ts
+var actionGroupAppearance = require_component_enum.componentEnum(["fieldset", "ghost"], "fieldset");
 /**
 * @public
 * @component action-group
@@ -25,7 +26,7 @@ require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean"
 //#endregion
 //#region src/lib/action-group/action-group.template.ts
 var ActionGroupTemplate = _microsoft_fast_element.html`<div
-	class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", [`appearance-${x.appearance}`, Boolean(x.appearance)], [`shape-${x.shape}`, Boolean(x.shape)], ["tight", x.tight])}"
+	class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", "connotation-accent", `appearance-${actionGroupAppearance.parse(x.appearance)}`, "with-idle", [`shape-${x.shape}`, Boolean(x.shape)], ["tight", x.tight])}"
 	${require_delegates_aria.delegateAria({ role: (x) => x.role ? x.role : "group" })}
 >
 	<slot></slot>

package/unbundled/definition4.js

@@ -1,12 +1,14 @@
 import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
+import { t as componentEnum } from "./component-enum.js";
 import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
 import { attr, html } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
 //#region src/lib/action-group/action-group.scss?inline
-var action_group_default = ":host{display:inline-block}.base{--_connotation-color-primary:var(--vvd-action-group-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-intermediate:var(--vvd-action-group-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-faint:var(--vvd-action-group-accent-faint,var(--vvd-color-neutral-50));--_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}.base{box-sizing:border-box;background-color:var(--_appearance-color-fill);inline-size:inherit;vertical-align:middle;align-items:center;display:flex;position:relative}.base:before{z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";pointer-events:none;position:absolute;inset:0}.base:not(.tight){column-gap:4px;padding:4px}.base:not(.shape-pill){border-radius:8px}.base.shape-pill{border-radius:24px}::slotted([data-vvd-component=divider]){align-self:stretch;margin-block:4px}";
+var action_group_default = ":host{display:inline-block}.base{box-sizing:border-box;background-color:var(--_appearance-color-fill);inline-size:inherit;vertical-align:middle;align-items:center;display:flex;position:relative}.base:before{z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";pointer-events:none;position:absolute;inset:0}.base:not(.tight){column-gap:4px;padding:4px}.base:not(.shape-pill){border-radius:8px}.base.shape-pill{border-radius:24px}::slotted([data-vvd-component=divider]){align-self:stretch;margin-block:4px}";
 //#endregion
 //#region src/lib/action-group/action-group.ts
+var actionGroupAppearance = componentEnum(["fieldset", "ghost"], "fieldset");
 /**
 * @public
 * @component action-group
@@ -22,14 +24,17 @@ __decorate([attr], ActionGroup.prototype, "shape", void 0);
 __decorate([attr], ActionGroup.prototype, "appearance", void 0);
 __decorate([attr({ mode: "boolean" })], ActionGroup.prototype, "tight", void 0);
 //#endregion
-//#region src/lib/action-group/definition.ts
-/** @internal */
-var actionGroupDefinition = defineVividComponent("action-group", ActionGroup, html`<div
-	class="${(x) => classNames("base", [`appearance-${x.appearance}`, Boolean(x.appearance)], [`shape-${x.shape}`, Boolean(x.shape)], ["tight", x.tight])}"
+//#region src/lib/action-group/action-group.template.ts
+var ActionGroupTemplate = html`<div
+	class="${(x) => classNames("base", "connotation-accent", `appearance-${actionGroupAppearance.parse(x.appearance)}`, "with-idle", [`shape-${x.shape}`, Boolean(x.shape)], ["tight", x.tight])}"
 	${delegateAria({ role: (x) => x.role ? x.role : "group" })}
 >
 	<slot></slot>
-</div>`, [], { styles: action_group_default });
+</div>`;
+//#endregion
+//#region src/lib/action-group/definition.ts
+/** @internal */
+var actionGroupDefinition = defineVividComponent("action-group", ActionGroup, ActionGroupTemplate, [], { styles: action_group_default });
 /**
 * Registers the action-group elements with the design system.
 *

package/unbundled/definition40.cjs

@@ -1,4 +1,3 @@
-require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_definition = require("./definition.cjs");
 const require_decorate = require("./decorate.cjs");
@@ -10,7 +9,7 @@ const require_definition$3 = require("./definition26.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/lib/dial-pad/dial-pad.scss?inline
-var dial_pad_default = ":host{inline-size:230px;margin:16px;display:inline-block}.base{box-sizing:border-box;grid-template-rows:80px 1fr auto;display:grid}.base.no-input{grid-template-rows:1fr auto}.digits{grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(3,1fr);gap:16px;inline-size:100%;display:grid}.phone-field{grid-column:1/-1;align-self:flex-start}.digit-btn{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.digit-btn:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}}.digit-btn.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}.digit-btn:disabled,.digit-btn.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-100)}.digit-btn{--_connotation-color-contrast:var(--vvd-dial-pad-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-soft:var(--vvd-dial-pad-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-pale:var(--vvd-dial-pad-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-fierce:var(--vvd-dial-pad-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm-all:var(--vvd-dial-pad-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-faint:var(--vvd-dial-pad-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-dim:var(--vvd-dial-pad-accent-dim,var(--vvd-color-neutral-200));--vvd-button-accent-firm:var(--_appearance-color-text);box-shadow:0 0 0 1px var(--_appearance-color-outline);border-radius:16px;flex-direction:column;inline-size:100%;display:flex;overflow:hidden}.digit-btn:not(.disabled) .digit-btn-num{color:var(--vvd-color-canvas-text)}.digit-btn:focus-within{--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))}.call-btn{grid-column:1/-1;margin-block-start:32px}.base.size-condensed{grid-template-rows:60px 1fr auto}.base.size-condensed .digits{grid-template-rows:repeat(4,.85fr);gap:8px}.base.size-condensed .call-btn{margin-block-start:12px}.base.size-condensed .digit-btn-num{padding-top:6px}.base.size-condensed.no-letters .digit-btn-num{padding-top:0}";
+var dial_pad_default = ":host{inline-size:230px;margin:16px;display:inline-block}.base{box-sizing:border-box;grid-template-rows:80px 1fr auto;display:grid}.base.no-input{grid-template-rows:1fr auto}.digits{grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(3,1fr);gap:16px;inline-size:100%;display:grid}.phone-field{grid-column:1/-1;align-self:flex-start}.digit-btn{--vvd-button-accent-firm:var(--_appearance-color-text);box-shadow:0 0 0 1px var(--_appearance-color-outline);border-radius:16px;flex-direction:column;inline-size:100%;display:flex;overflow:hidden}.digit-btn:not(.disabled) .digit-btn-num{color:var(--vvd-color-canvas-text)}.digit-btn:focus-within{--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))}.call-btn{grid-column:1/-1;margin-block-start:32px}.base.size-condensed{grid-template-rows:60px 1fr auto}.base.size-condensed .digits{grid-template-rows:repeat(4,.85fr);gap:8px}.base.size-condensed .call-btn{margin-block-start:12px}.base.size-condensed .digit-btn-num{padding-top:6px}.base.size-condensed.no-letters .digit-btn-num{padding-top:0}";
 //#endregion
 //#region src/lib/dial-pad/dial-pad.ts
 /**
@@ -244,6 +243,7 @@ var DIAL_PAD_BUTTONS = [
 		value: "0",
 		alwaysVisibleLetters: "+",
 		ariaLabel: "digitZeroLabel",
+		ariaDescription: "digitZeroDescription",
 		icon: "zero-solid",
 		id: "btn0"
 	},
@@ -372,9 +372,10 @@ function renderDigits(buttonTag, iconTag) {
 					  shape="pill"
 					  label="${(x, c) => (c.parent.noLetters ? null : x.letters) ?? x.alwaysVisibleLetters}"
 					  size='condensed'
-					  class="digit-btn"
+					  class="digit-btn connotation-accent appearance-duotone with-idle with-hover with-disabled"
 						?autofocus="${(_, c) => c.parent.autofocus && c.parent.noInput && c.index === 0}"
-					  aria-label="${(x, c) => c.parent.noLetters ? x.value : c.parent.locale.dialPad[x.ariaLabel]}"
+					  aria-label="${(x, c) => c.parent.noLetters && x.letters ? x.value : c.parent.locale.dialPad[x.ariaLabel]}"
+					  aria-description="${(x, c) => x.ariaDescription ? c.parent.locale.dialPad[x.ariaDescription] : null}"
 					  ?disabled="${(_, c) => c.parent.disabled}"
 					  @pointerdown="${(x, c) => c.parent._startLongPress(x.value, c.event)}"
 					  @pointerup="${(_, c) => c.parent._endLongPress()}"

package/unbundled/definition40.js

@@ -9,7 +9,7 @@ import { n as textFieldDefinition, r as TextField } from "./definition26.js";
 import { attr, html, observable, ref, repeat, when } from "@microsoft/fast-element";
 import { classNames, keyEnter } from "@microsoft/fast-web-utilities";
 //#region src/lib/dial-pad/dial-pad.scss?inline
-var dial_pad_default = ":host{inline-size:230px;margin:16px;display:inline-block}.base{box-sizing:border-box;grid-template-rows:80px 1fr auto;display:grid}.base.no-input{grid-template-rows:1fr auto}.digits{grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(3,1fr);gap:16px;inline-size:100%;display:grid}.phone-field{grid-column:1/-1;align-self:flex-start}.digit-btn{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.digit-btn:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}}.digit-btn.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}.digit-btn:disabled,.digit-btn.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-100)}.digit-btn{--_connotation-color-contrast:var(--vvd-dial-pad-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-soft:var(--vvd-dial-pad-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-pale:var(--vvd-dial-pad-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-fierce:var(--vvd-dial-pad-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm-all:var(--vvd-dial-pad-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-faint:var(--vvd-dial-pad-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-dim:var(--vvd-dial-pad-accent-dim,var(--vvd-color-neutral-200));--vvd-button-accent-firm:var(--_appearance-color-text);box-shadow:0 0 0 1px var(--_appearance-color-outline);border-radius:16px;flex-direction:column;inline-size:100%;display:flex;overflow:hidden}.digit-btn:not(.disabled) .digit-btn-num{color:var(--vvd-color-canvas-text)}.digit-btn:focus-within{--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))}.call-btn{grid-column:1/-1;margin-block-start:32px}.base.size-condensed{grid-template-rows:60px 1fr auto}.base.size-condensed .digits{grid-template-rows:repeat(4,.85fr);gap:8px}.base.size-condensed .call-btn{margin-block-start:12px}.base.size-condensed .digit-btn-num{padding-top:6px}.base.size-condensed.no-letters .digit-btn-num{padding-top:0}";
+var dial_pad_default = ":host{inline-size:230px;margin:16px;display:inline-block}.base{box-sizing:border-box;grid-template-rows:80px 1fr auto;display:grid}.base.no-input{grid-template-rows:1fr auto}.digits{grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(3,1fr);gap:16px;inline-size:100%;display:grid}.phone-field{grid-column:1/-1;align-self:flex-start}.digit-btn{--vvd-button-accent-firm:var(--_appearance-color-text);box-shadow:0 0 0 1px var(--_appearance-color-outline);border-radius:16px;flex-direction:column;inline-size:100%;display:flex;overflow:hidden}.digit-btn:not(.disabled) .digit-btn-num{color:var(--vvd-color-canvas-text)}.digit-btn:focus-within{--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))}.call-btn{grid-column:1/-1;margin-block-start:32px}.base.size-condensed{grid-template-rows:60px 1fr auto}.base.size-condensed .digits{grid-template-rows:repeat(4,.85fr);gap:8px}.base.size-condensed .call-btn{margin-block-start:12px}.base.size-condensed .digit-btn-num{padding-top:6px}.base.size-condensed.no-letters .digit-btn-num{padding-top:0}";
 //#endregion
 //#region src/lib/dial-pad/dial-pad.ts
 /**
@@ -243,6 +243,7 @@ var DIAL_PAD_BUTTONS = [
 		value: "0",
 		alwaysVisibleLetters: "+",
 		ariaLabel: "digitZeroLabel",
+		ariaDescription: "digitZeroDescription",
 		icon: "zero-solid",
 		id: "btn0"
 	},
@@ -371,9 +372,10 @@ function renderDigits(buttonTag, iconTag) {
 					  shape="pill"
 					  label="${(x, c) => (c.parent.noLetters ? null : x.letters) ?? x.alwaysVisibleLetters}"
 					  size='condensed'
-					  class="digit-btn"
+					  class="digit-btn connotation-accent appearance-duotone with-idle with-hover with-disabled"
 						?autofocus="${(_, c) => c.parent.autofocus && c.parent.noInput && c.index === 0}"
-					  aria-label="${(x, c) => c.parent.noLetters ? x.value : c.parent.locale.dialPad[x.ariaLabel]}"
+					  aria-label="${(x, c) => c.parent.noLetters && x.letters ? x.value : c.parent.locale.dialPad[x.ariaLabel]}"
+					  aria-description="${(x, c) => x.ariaDescription ? c.parent.locale.dialPad[x.ariaDescription] : null}"
 					  ?disabled="${(_, c) => c.parent.disabled}"
 					  @pointerdown="${(x, c) => c.parent._startLongPress(x.value, c.event)}"
 					  @pointerup="${(_, c) => c.parent._endLongPress()}"

package/unbundled/definition41.cjs

@@ -1,4 +1,3 @@
-require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_definition = require("./definition.cjs");
 const require_decorate = require("./decorate.cjs");

package/unbundled/definition42.cjs

@@ -1,14 +1,22 @@
-require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_definition = require("./definition.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_icon = require("./icon.cjs");
+const require_component_enum = require("./component-enum.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/lib/empty-state/empty-state.scss?inline
-var empty_state_default = ":host{display:block}.base.connotation-cta{--_connotation-color-firm-all:var(--vvd-empty-state-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-dim:var(--vvd-empty-state-cta-dim,var(--vvd-color-cta-200));--_connotation-color-faint:var(--vvd-empty-state-cta-faint,var(--vvd-color-cta-50));--_connotation-color-primary:var(--vvd-empty-state-cta-primary,var(--vvd-color-cta-500))}.base.connotation-success{--_connotation-color-firm-all:var(--vvd-empty-state-success-firm-all,var(--vvd-color-success-600));--_connotation-color-dim:var(--vvd-empty-state-success-dim,var(--vvd-color-success-200));--_connotation-color-faint:var(--vvd-empty-state-success-faint,var(--vvd-color-success-50));--_connotation-color-primary:var(--vvd-empty-state-success-primary,var(--vvd-color-success-500))}.base.connotation-alert{--_connotation-color-firm-all:var(--vvd-empty-state-alert-firm-all,var(--vvd-color-alert-600));--_connotation-color-dim:var(--vvd-empty-state-alert-dim,var(--vvd-color-alert-200));--_connotation-color-faint:var(--vvd-empty-state-alert-faint,var(--vvd-color-alert-50));--_connotation-color-primary:var(--vvd-empty-state-alert-primary,var(--vvd-color-alert-500))}.base.connotation-warning{--_connotation-color-firm-all:var(--vvd-empty-state-warning-firm-all,var(--vvd-color-warning-600));--_connotation-color-dim:var(--vvd-empty-state-warning-dim,var(--vvd-color-warning-200));--_connotation-color-faint:var(--vvd-empty-state-warning-faint,var(--vvd-color-warning-50));--_connotation-color-primary:var(--vvd-empty-state-warning-primary,var(--vvd-color-warning-300))}.base.connotation-information{--_connotation-color-firm-all:var(--vvd-empty-state-information-firm-all,var(--vvd-color-information-600));--_connotation-color-dim:var(--vvd-empty-state-information-dim,var(--vvd-color-information-200));--_connotation-color-faint:var(--vvd-empty-state-information-faint,var(--vvd-color-information-50));--_connotation-color-primary:var(--vvd-empty-state-information-primary,var(--vvd-color-information-500))}.base.connotation-announcement{--_connotation-color-firm-all:var(--vvd-empty-state-announcement-firm-all,var(--vvd-color-announcement-600));--_connotation-color-dim:var(--vvd-empty-state-announcement-dim,var(--vvd-color-announcement-200));--_connotation-color-faint:var(--vvd-empty-state-announcement-faint,var(--vvd-color-announcement-50));--_connotation-color-primary:var(--vvd-empty-state-announcement-primary,var(--vvd-color-announcement-500))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-firm-all:var(--vvd-empty-state-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-dim:var(--vvd-empty-state-accent-dim,var(--vvd-color-neutral-200));--_connotation-color-faint:var(--vvd-empty-state-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-primary:var(--vvd-empty-state-accent-primary,var(--vvd-color-canvas-text))}.base{--_empty-state-icon-container:120px;--_empty-state-icon-background:var(--_connotation-color-faint);--_empty-state-icon-font-size:52px;box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;gap:24px;block-size:100%;display:flex}.icon-container{background-color:var(--_empty-state-icon-background);block-size:var(--_empty-state-icon-container);box-shadow:inset 0 0 0 21px color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);font-size:var(--_empty-state-icon-font-size);inline-size:var(--_empty-state-icon-container);--_empty-state-icon-background:transparent;--_empty-state-icon-font-size:40px;border-radius:50%;justify-content:center;align-items:center;display:flex}.icon-container .icon{border:1px solid var(--_connotation-color-dim);border-radius:inherit;color:var(--_connotation-color-firm-all);padding:19px}.content{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-align:center;flex-direction:column;gap:8px;display:flex}header{color:var(--_connotation-color-firm-all);font:var(--vvd-typography-base-extended-bold)}.actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.base.no-actions .actions{display:none}";
+var empty_state_default = ":host{display:block}.base{--_empty-state-icon-container:120px;--_empty-state-icon-background:var(--_connotation-color-faint);--_empty-state-icon-font-size:52px;box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;gap:24px;block-size:100%;display:flex}.icon-container{background-color:var(--_empty-state-icon-background);block-size:var(--_empty-state-icon-container);box-shadow:inset 0 0 0 21px color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);font-size:var(--_empty-state-icon-font-size);inline-size:var(--_empty-state-icon-container);--_empty-state-icon-background:transparent;--_empty-state-icon-font-size:40px;border-radius:50%;justify-content:center;align-items:center;display:flex}.icon-container .icon{border:1px solid var(--_connotation-color-dim);border-radius:inherit;color:var(--_connotation-color-firm-all);padding:19px}.content{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-align:center;flex-direction:column;gap:8px;display:flex}header{color:var(--_connotation-color-firm-all);font:var(--vvd-typography-base-extended-bold)}.actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.base.no-actions .actions{display:none}";
 //#endregion
 //#region src/lib/empty-state/empty-state.ts
+var emptyStateConnotation = require_component_enum.componentEnum([
+	"accent",
+	"cta",
+	"success",
+	"alert",
+	"warning",
+	"information"
+], "accent");
 /**
 * An empty state element. Used when there is no data to display to the user.
 *
@@ -29,7 +37,7 @@ require_decorate.__decorate([_microsoft_fast_element.observable], EmptyState.pro
 var EmptyStateTemplate = (context) => {
 	const iconTag = context.tagFor(require_icon.Icon);
 	return _microsoft_fast_element.html` <div
-		class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", [`connotation-${x.connotation}`, Boolean(x.connotation)], ["no-actions", x.slottedActionItems?.length === 0])}"
+		class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", `connotation-${emptyStateConnotation.parse(x.connotation)}`, ["no-actions", x.slottedActionItems?.length === 0])}"
 		aria-labelledby="${(x) => x.headline ? "empty-state-headline" : null}"
 	>
 		<slot name="graphic">

package/unbundled/definition42.js

@@ -2,12 +2,21 @@ import { d as createRegisterFunction, t as VividElement, u as defineVividCompone
 import { t as iconDefinition } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
 import { t as Icon } from "./icon.js";
+import { t as componentEnum } from "./component-enum.js";
 import { attr, html, observable, slotted, when } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
 //#region src/lib/empty-state/empty-state.scss?inline
-var empty_state_default = ":host{display:block}.base.connotation-cta{--_connotation-color-firm-all:var(--vvd-empty-state-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-dim:var(--vvd-empty-state-cta-dim,var(--vvd-color-cta-200));--_connotation-color-faint:var(--vvd-empty-state-cta-faint,var(--vvd-color-cta-50));--_connotation-color-primary:var(--vvd-empty-state-cta-primary,var(--vvd-color-cta-500))}.base.connotation-success{--_connotation-color-firm-all:var(--vvd-empty-state-success-firm-all,var(--vvd-color-success-600));--_connotation-color-dim:var(--vvd-empty-state-success-dim,var(--vvd-color-success-200));--_connotation-color-faint:var(--vvd-empty-state-success-faint,var(--vvd-color-success-50));--_connotation-color-primary:var(--vvd-empty-state-success-primary,var(--vvd-color-success-500))}.base.connotation-alert{--_connotation-color-firm-all:var(--vvd-empty-state-alert-firm-all,var(--vvd-color-alert-600));--_connotation-color-dim:var(--vvd-empty-state-alert-dim,var(--vvd-color-alert-200));--_connotation-color-faint:var(--vvd-empty-state-alert-faint,var(--vvd-color-alert-50));--_connotation-color-primary:var(--vvd-empty-state-alert-primary,var(--vvd-color-alert-500))}.base.connotation-warning{--_connotation-color-firm-all:var(--vvd-empty-state-warning-firm-all,var(--vvd-color-warning-600));--_connotation-color-dim:var(--vvd-empty-state-warning-dim,var(--vvd-color-warning-200));--_connotation-color-faint:var(--vvd-empty-state-warning-faint,var(--vvd-color-warning-50));--_connotation-color-primary:var(--vvd-empty-state-warning-primary,var(--vvd-color-warning-300))}.base.connotation-information{--_connotation-color-firm-all:var(--vvd-empty-state-information-firm-all,var(--vvd-color-information-600));--_connotation-color-dim:var(--vvd-empty-state-information-dim,var(--vvd-color-information-200));--_connotation-color-faint:var(--vvd-empty-state-information-faint,var(--vvd-color-information-50));--_connotation-color-primary:var(--vvd-empty-state-information-primary,var(--vvd-color-information-500))}.base.connotation-announcement{--_connotation-color-firm-all:var(--vvd-empty-state-announcement-firm-all,var(--vvd-color-announcement-600));--_connotation-color-dim:var(--vvd-empty-state-announcement-dim,var(--vvd-color-announcement-200));--_connotation-color-faint:var(--vvd-empty-state-announcement-faint,var(--vvd-color-announcement-50));--_connotation-color-primary:var(--vvd-empty-state-announcement-primary,var(--vvd-color-announcement-500))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-firm-all:var(--vvd-empty-state-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-dim:var(--vvd-empty-state-accent-dim,var(--vvd-color-neutral-200));--_connotation-color-faint:var(--vvd-empty-state-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-primary:var(--vvd-empty-state-accent-primary,var(--vvd-color-canvas-text))}.base{--_empty-state-icon-container:120px;--_empty-state-icon-background:var(--_connotation-color-faint);--_empty-state-icon-font-size:52px;box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;gap:24px;block-size:100%;display:flex}.icon-container{background-color:var(--_empty-state-icon-background);block-size:var(--_empty-state-icon-container);box-shadow:inset 0 0 0 21px color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);font-size:var(--_empty-state-icon-font-size);inline-size:var(--_empty-state-icon-container);--_empty-state-icon-background:transparent;--_empty-state-icon-font-size:40px;border-radius:50%;justify-content:center;align-items:center;display:flex}.icon-container .icon{border:1px solid var(--_connotation-color-dim);border-radius:inherit;color:var(--_connotation-color-firm-all);padding:19px}.content{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-align:center;flex-direction:column;gap:8px;display:flex}header{color:var(--_connotation-color-firm-all);font:var(--vvd-typography-base-extended-bold)}.actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.base.no-actions .actions{display:none}";
+var empty_state_default = ":host{display:block}.base{--_empty-state-icon-container:120px;--_empty-state-icon-background:var(--_connotation-color-faint);--_empty-state-icon-font-size:52px;box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;gap:24px;block-size:100%;display:flex}.icon-container{background-color:var(--_empty-state-icon-background);block-size:var(--_empty-state-icon-container);box-shadow:inset 0 0 0 21px color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);font-size:var(--_empty-state-icon-font-size);inline-size:var(--_empty-state-icon-container);--_empty-state-icon-background:transparent;--_empty-state-icon-font-size:40px;border-radius:50%;justify-content:center;align-items:center;display:flex}.icon-container .icon{border:1px solid var(--_connotation-color-dim);border-radius:inherit;color:var(--_connotation-color-firm-all);padding:19px}.content{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-align:center;flex-direction:column;gap:8px;display:flex}header{color:var(--_connotation-color-firm-all);font:var(--vvd-typography-base-extended-bold)}.actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.base.no-actions .actions{display:none}";
 //#endregion
 //#region src/lib/empty-state/empty-state.ts
+var emptyStateConnotation = componentEnum([
+	"accent",
+	"cta",
+	"success",
+	"alert",
+	"warning",
+	"information"
+], "accent");
 /**
 * An empty state element. Used when there is no data to display to the user.
 *
@@ -28,7 +37,7 @@ __decorate([observable], EmptyState.prototype, "slottedActionItems", void 0);
 var EmptyStateTemplate = (context) => {
 	const iconTag = context.tagFor(Icon);
 	return html` <div
-		class="${(x) => classNames("base", [`connotation-${x.connotation}`, Boolean(x.connotation)], ["no-actions", x.slottedActionItems?.length === 0])}"
+		class="${(x) => classNames("base", `connotation-${emptyStateConnotation.parse(x.connotation)}`, ["no-actions", x.slottedActionItems?.length === 0])}"
 		aria-labelledby="${(x) => x.headline ? "empty-state-headline" : null}"
 	>
 		<slot name="graphic">

package/unbundled/definition43.cjs

@@ -1,4 +1,3 @@
-require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_definition = require("./definition.cjs");
 const require_decorate = require("./decorate.cjs");
@@ -8,9 +7,14 @@ const require_button = require("./button.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/lib/fab/fab.scss?inline
-var fab_default = ".control.connotation-accent{--_connotation-color-primary:var(--vvd-fab-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-fab-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-fab-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-fab-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-fab-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm:var(--vvd-fab-accent-firm,var(--vvd-color-canvas-text))}.control.connotation-cta{--_connotation-color-primary:var(--vvd-fab-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-fab-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-fab-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-contrast:var(--vvd-fab-cta-contrast,var(--vvd-color-cta-800));--_connotation-color-fierce:var(--vvd-fab-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-firm:var(--vvd-fab-cta-firm,var(--vvd-color-cta-600))}.control.connotation-announcement{--_connotation-color-primary:var(--vvd-fab-announcement-primary,var(--vvd-color-announcement-500));--_connotation-color-primary-text:var(--vvd-fab-announcement-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-fab-announcement-primary-increment,var(--vvd-color-announcement-600));--_connotation-color-contrast:var(--vvd-fab-announcement-contrast,var(--vvd-color-announcement-800));--_connotation-color-fierce:var(--vvd-fab-announcement-fierce,var(--vvd-color-announcement-700));--_connotation-color-firm:var(--vvd-fab-announcement-firm,var(--vvd-color-announcement-600))}.control{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}.control:disabled,.control.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)),.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-fierce);--_appearance-color-outline:transparent}.control{--_fab-inline-padding:12px;box-sizing:border-box;border-radius:var(--_fab-border-radius);background:var(--_appearance-color-fill,var(--_elevation-fill));block-size:var(--_fab-block-size);color:var(--_appearance-color-text,var(--vvd-color-canvas-text));align-items:center;column-gap:var(--fab-icon-gap);filter:var(--_elevation-shadow);font:var(--vvd-typography-base-bold);padding-inline:var(--_fab-inline-padding);vertical-align:middle;border:0;transition:background-color .15s linear,filter .15s linear;display:inline-flex}.control:not(.connotation-accent,.connotation-cta,.connotation-announcement){--focus-stroke-gap-color:transparent}.control:focus-visible{outline:none;position:relative}.control:focus-visible:after{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.control{user-select:none}.control.size-expanded{--_fab-border-radius:40px;--_fab-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16));--_fab-inline-padding:20px}.control.size-condensed{--_fab-border-radius:20px;--_fab-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));font:var(--vvd-typography-base-condensed-bold)}.control.size-condensed [data-vvd-component=icon]{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2)}.control:not(.size-expanded,.size-condensed){--_fab-border-radius:24px;--_fab-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.control:not(.size-condensed){font:var(--vvd-typography-base-bold)}.control.icon-only{--_fab-inline-padding:0;border-radius:50%;place-content:center}@supports (aspect-ratio:1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio:1){.control.icon-only{inline-size:var(--_fab-block-size)}}.control:not(.icon-only){--fab-icon-gap:10px}.control.disabled{--_elevation-fill:var(--_vvd-tinted-color-surface-nonedp,var(--vvd-color-surface-nonedp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-nonedp,var(--vvd-shadow-surface-nonedp));cursor:not-allowed}.control:not(.disabled){--_elevation-fill:var(--_vvd-tinted-color-surface-4dp,var(--vvd-color-surface-4dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-4dp,var(--vvd-shadow-surface-4dp));cursor:pointer}@media (hover:hover){.control:not(.disabled):hover{--_elevation-fill:var(--_vvd-tinted-color-surface-12dp,var(--vvd-color-surface-12dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-12dp,var(--vvd-shadow-surface-12dp))}}.control:not(.disabled):active{--_elevation-fill:var(--_vvd-tinted-color-surface-24dp,var(--vvd-color-surface-24dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-24dp,var(--vvd-shadow-surface-24dp))}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{order:1;display:inline-block}.control.size-extended slot[name=icon]{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16)) / 2.3333)}.control:not(.size-extended) slot[name=icon]{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2)}";
+var fab_default = ".control{--_fab-inline-padding:12px;box-sizing:border-box;border-radius:var(--_fab-border-radius);background:var(--_appearance-color-fill,var(--_elevation-fill));block-size:var(--_fab-block-size);color:var(--_appearance-color-text,var(--vvd-color-canvas-text));align-items:center;column-gap:var(--fab-icon-gap);filter:var(--_elevation-shadow);font:var(--vvd-typography-base-bold);padding-inline:var(--_fab-inline-padding);vertical-align:middle;border:0;transition:background-color .15s linear,filter .15s linear;display:inline-flex}.control:not(.connotation-accent,.connotation-cta,.connotation-announcement){--focus-stroke-gap-color:transparent}.control:focus-visible{outline:none;position:relative}.control:focus-visible:after{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.control{user-select:none}.control.size-expanded{--_fab-border-radius:40px;--_fab-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16));--_fab-inline-padding:20px}.control.size-condensed{--_fab-border-radius:20px;--_fab-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));font:var(--vvd-typography-base-condensed-bold)}.control.size-condensed [data-vvd-component=icon]{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2)}.control:not(.size-expanded,.size-condensed){--_fab-border-radius:24px;--_fab-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.control:not(.size-condensed){font:var(--vvd-typography-base-bold)}.control.icon-only{--_fab-inline-padding:0;border-radius:50%;place-content:center}@supports (aspect-ratio:1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio:1){.control.icon-only{inline-size:var(--_fab-block-size)}}.control:not(.icon-only){--fab-icon-gap:10px}.control.disabled{--_elevation-fill:var(--_vvd-tinted-color-surface-nonedp,var(--vvd-color-surface-nonedp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-nonedp,var(--vvd-shadow-surface-nonedp));cursor:not-allowed}.control:not(.disabled){--_elevation-fill:var(--_vvd-tinted-color-surface-4dp,var(--vvd-color-surface-4dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-4dp,var(--vvd-shadow-surface-4dp));cursor:pointer}@media (hover:hover){.control:not(.disabled):hover{--_elevation-fill:var(--_vvd-tinted-color-surface-12dp,var(--vvd-color-surface-12dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-12dp,var(--vvd-shadow-surface-12dp))}}.control:not(.disabled):active{--_elevation-fill:var(--_vvd-tinted-color-surface-24dp,var(--vvd-color-surface-24dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-24dp,var(--vvd-shadow-surface-24dp))}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{order:1;display:inline-block}.control.size-extended slot[name=icon]{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16)) / 2.3333)}.control:not(.size-extended) slot[name=icon]{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2)}";
 //#endregion
 //#region src/lib/fab/fab.ts
+var FAB_CONNOTATIONS = [
+	"cta",
+	"accent",
+	"announcement"
+];
 /**
 * @public
 * @component fab
@@ -45,7 +49,7 @@ var FabTemplate = (context) => {
 	const affixIconTemplate = require_affix.affixIconTemplateFactory(context);
 	return _microsoft_fast_element.html`
 		<button
-			class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("control", [`connotation-${x.connotation}`, Boolean(x.connotation)], [`size-${x.size}`, Boolean(x.size)], ["icon-only", !x.label && !!(x.icon || x.iconSlottedContent?.length)], ["icon-trailing", x.iconTrailing], ["disabled", x.disabled])} "
+			class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("control", "appearance-filled", "with-idle", "with-hover", "with-active", "with-disabled", [`connotation-${x.connotation}`, FAB_CONNOTATIONS.includes(x.connotation ?? "")], [`size-${x.size}`, Boolean(x.size)], ["icon-only", !x.label && !!(x.icon || x.iconSlottedContent?.length)], ["icon-trailing", x.iconTrailing], ["disabled", x.disabled])} "
 			?autofocus="${(x) => x.autofocus}"
 			form="${(x) => x.formId}"
 			formaction="${(x) => x.formaction}"