@vonage/vivid 5.23.0 → 5.23.1

package/unbundled/definition46.js

@@ -114,17 +114,13 @@ var APPLE_ARIA_LABEL_OVERRIDES = {
 * @slot - Default slot for custom content (used when name is "Custom").
 */
 var KbdKey = class extends VividElement {
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _isApple() {
 		if (this.keyboard === "apple") return true;
 		if (this.keyboard === "standard") return false;
 		return isApplePlatform();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _displayLabel() {
 		/* v8 ignore if -- @preserve */
 		if (!this.name || this.name === "Custom") return "";
@@ -136,9 +132,7 @@ var KbdKey = class extends VividElement {
 		if (this._isApple && this.name in APPLE_DISPLAY_OVERRIDES) return APPLE_DISPLAY_OVERRIDES[this.name];
 		return KEY_DISPLAY_MAP[this.name] ?? this.name;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _ariaKeyLabel() {
 		if (!this.name || this.name === "Custom") return null;
 		if (this.name === "Mod") return this._isApple ? "Command" : null;
@@ -166,19 +160,16 @@ __decorate([attr], KbdKey.prototype, "size", void 0);
 __decorate([attr({ attribute: "keyshortcuts-key" })], KbdKey.prototype, "keyshortcutsKey", void 0);
 //#endregion
 //#region src/lib/kbd-key/kbd-key.template.ts
-var getClasses = ({ appearance, size }) => classNames("base", [`appearance-${appearance}`, Boolean(appearance)], [`size-${size}`, Boolean(size)]);
 var KbdKeyTemplate = () => {
 	return html`<kbd
-		class="${getClasses}"
+		class="${(x) => classNames("base", [`appearance-${x.appearance}`, Boolean(x.appearance)], [`size-${x.size}`, Boolean(x.size)])}"
 		aria-label="${(x) => x._ariaKeyLabel}"
 		>${when((x) => x.name === "Custom", html`<slot></slot>`)}${when((x) => Boolean(x.name && x.name !== "Custom" && x._displayLabel), html`${(x) => x._displayLabel}`)}</kbd
 	>`;
 };
 //#endregion
 //#region src/lib/kbd-key/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var kbdKeyDefinition = defineVividComponent("kbd-key", KbdKey, KbdKeyTemplate, [], { styles: kbd_key_default });
 /**
 * Registers the kbd-key element with the design system.

package/unbundled/definition47.cjs

@@ -23,15 +23,14 @@ require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "aut
 var layout_default = ".control{grid-auto-rows:var(--layout-grid-template-rows,min-content);display:grid}@media not all and (width>=600px){.control.column-basis-medium,.control.column-basis-large{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(100%, 1fr)))}}@media (width>=600px){.control.column-basis-small{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(160px, 1fr)))}.control:not(.column-basis-small):not(.column-basis-medium):not(.column-basis-large):not(.column-basis-block),.control.column-basis-medium{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(320px, 1fr)))}.control.column-basis-large{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(380px, 1fr)))}.control.column-basis-block{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(1fr, 1fr)))}}.control.column-spacing-small{column-gap:var(--layout-column-gap,calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))))}.control.column-spacing-small-inline{column-gap:var(--layout-column-gap,0 calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))))}.control.column-spacing-small-block{column-gap:var(--layout-column-gap,calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))) 0)}.control:not(.column-spacing-small):not(.column-spacing-small-inline):not(.column-spacing-small-block):not(.column-spacing-medium):not(.column-spacing-medium-inline):not(.column-spacing-medium-block):not(.column-spacing-large):not(.column-spacing-large-inline):not(.column-spacing-large-block),.control.column-spacing-medium{column-gap:var(--layout-column-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.column-spacing-medium-inline{column-gap:var(--layout-column-gap,0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.column-spacing-medium-block{column-gap:var(--layout-column-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) 0)}.control.column-spacing-large{column-gap:var(--layout-column-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)))}.control.column-spacing-large-inline{column-gap:var(--layout-column-gap,0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)))}.control.column-spacing-large-block{column-gap:var(--layout-column-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) 0)}.control.row-spacing-small{row-gap:var(--layout-row-gap,calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))))}.control.row-spacing-small-inline{row-gap:var(--layout-row-gap,0 calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))))}.control.row-spacing-small-block{row-gap:var(--layout-row-gap,calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))) 0)}.control:not(.row-spacing-small):not(.row-spacing-small-inline):not(.row-spacing-small-block):not(.row-spacing-medium):not(.row-spacing-medium-inline):not(.row-spacing-medium-block):not(.row-spacing-large):not(.row-spacing-large-inline):not(.row-spacing-large-block),.control.row-spacing-medium{row-gap:var(--layout-row-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.row-spacing-medium-inline{row-gap:var(--layout-row-gap,0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.row-spacing-medium-block{row-gap:var(--layout-row-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) 0)}.control.row-spacing-large{row-gap:var(--layout-row-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)))}.control.row-spacing-large-inline{row-gap:var(--layout-row-gap,0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)))}.control.row-spacing-large-block{row-gap:var(--layout-row-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) 0)}.control.gutters-small{margin:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.gutters-small-inline{margin:0 calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.gutters-small-block{margin:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))) 0}.control.gutters-medium{margin:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.gutters-medium-inline{margin:0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.gutters-medium-block{margin:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) 0}.control.gutters-large{margin:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.gutters-large-inline{margin:0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.gutters-large-block{margin:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) 0}.control.auto-sizing-fill{--_auto-sizing:auto-fill}.control:not(.auto-sizing-fill):not(.auto-sizing-fit),.control.auto-sizing-fit{--_auto-sizing:auto-fit}";
 //#endregion
 //#region src/lib/layout/layout.template.ts
-var getClasses = ({ columnBasis, gutters, columnSpacing, autoSizing, rowSpacing }) => (0, _microsoft_fast_web_utilities.classNames)("control", [`column-basis-${columnBasis}`, Boolean(columnBasis)], [`gutters-${gutters}`, Boolean(gutters)], [`column-spacing-${columnSpacing}`, Boolean(columnSpacing)], [`row-spacing-${rowSpacing ? rowSpacing : columnSpacing}`, Boolean(rowSpacing) || Boolean(columnSpacing)], [`auto-sizing-${autoSizing}`, Boolean(autoSizing)]);
-var layoutTemplate = _microsoft_fast_element.html` <div class="${getClasses}">
+var layoutTemplate = _microsoft_fast_element.html` <div
+	class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("control", [`column-basis-${x.columnBasis}`, Boolean(x.columnBasis)], [`gutters-${x.gutters}`, Boolean(x.gutters)], [`column-spacing-${x.columnSpacing}`, Boolean(x.columnSpacing)], [`row-spacing-${x.rowSpacing ? x.rowSpacing : x.columnSpacing}`, Boolean(x.rowSpacing) || Boolean(x.columnSpacing)], [`auto-sizing-${x.autoSizing}`, Boolean(x.autoSizing)])}"
+>
 	<slot></slot>
 </div>`;
 //#endregion
 //#region src/lib/layout/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var layoutDefinition = require_vivid_element.defineVividComponent("layout", Layout, layoutTemplate, [], { styles: layout_default });
 /**
 * Registers the layout elements with the design system.

package/unbundled/definition47.js

@@ -18,19 +18,13 @@ __decorate([attr({ attribute: "column-spacing" })], Layout.prototype, "columnSpa
 __decorate([attr({ attribute: "row-spacing" })], Layout.prototype, "rowSpacing", void 0);
 __decorate([attr({ attribute: "auto-sizing" })], Layout.prototype, "autoSizing", void 0);
 //#endregion
-//#region src/lib/layout/layout.scss?inline
-var layout_default = ".control{grid-auto-rows:var(--layout-grid-template-rows,min-content);display:grid}@media not all and (width>=600px){.control.column-basis-medium,.control.column-basis-large{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(100%, 1fr)))}}@media (width>=600px){.control.column-basis-small{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(160px, 1fr)))}.control:not(.column-basis-small):not(.column-basis-medium):not(.column-basis-large):not(.column-basis-block),.control.column-basis-medium{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(320px, 1fr)))}.control.column-basis-large{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(380px, 1fr)))}.control.column-basis-block{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(1fr, 1fr)))}}.control.column-spacing-small{column-gap:var(--layout-column-gap,calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))))}.control.column-spacing-small-inline{column-gap:var(--layout-column-gap,0 calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))))}.control.column-spacing-small-block{column-gap:var(--layout-column-gap,calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))) 0)}.control:not(.column-spacing-small):not(.column-spacing-small-inline):not(.column-spacing-small-block):not(.column-spacing-medium):not(.column-spacing-medium-inline):not(.column-spacing-medium-block):not(.column-spacing-large):not(.column-spacing-large-inline):not(.column-spacing-large-block),.control.column-spacing-medium{column-gap:var(--layout-column-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.column-spacing-medium-inline{column-gap:var(--layout-column-gap,0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.column-spacing-medium-block{column-gap:var(--layout-column-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) 0)}.control.column-spacing-large{column-gap:var(--layout-column-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)))}.control.column-spacing-large-inline{column-gap:var(--layout-column-gap,0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)))}.control.column-spacing-large-block{column-gap:var(--layout-column-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) 0)}.control.row-spacing-small{row-gap:var(--layout-row-gap,calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))))}.control.row-spacing-small-inline{row-gap:var(--layout-row-gap,0 calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))))}.control.row-spacing-small-block{row-gap:var(--layout-row-gap,calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))) 0)}.control:not(.row-spacing-small):not(.row-spacing-small-inline):not(.row-spacing-small-block):not(.row-spacing-medium):not(.row-spacing-medium-inline):not(.row-spacing-medium-block):not(.row-spacing-large):not(.row-spacing-large-inline):not(.row-spacing-large-block),.control.row-spacing-medium{row-gap:var(--layout-row-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.row-spacing-medium-inline{row-gap:var(--layout-row-gap,0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.row-spacing-medium-block{row-gap:var(--layout-row-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) 0)}.control.row-spacing-large{row-gap:var(--layout-row-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)))}.control.row-spacing-large-inline{row-gap:var(--layout-row-gap,0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)))}.control.row-spacing-large-block{row-gap:var(--layout-row-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) 0)}.control.gutters-small{margin:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.gutters-small-inline{margin:0 calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.gutters-small-block{margin:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))) 0}.control.gutters-medium{margin:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.gutters-medium-inline{margin:0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.gutters-medium-block{margin:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) 0}.control.gutters-large{margin:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.gutters-large-inline{margin:0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.gutters-large-block{margin:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) 0}.control.auto-sizing-fill{--_auto-sizing:auto-fill}.control:not(.auto-sizing-fill):not(.auto-sizing-fit),.control.auto-sizing-fit{--_auto-sizing:auto-fit}";
-//#endregion
-//#region src/lib/layout/layout.template.ts
-var getClasses = ({ columnBasis, gutters, columnSpacing, autoSizing, rowSpacing }) => classNames("control", [`column-basis-${columnBasis}`, Boolean(columnBasis)], [`gutters-${gutters}`, Boolean(gutters)], [`column-spacing-${columnSpacing}`, Boolean(columnSpacing)], [`row-spacing-${rowSpacing ? rowSpacing : columnSpacing}`, Boolean(rowSpacing) || Boolean(columnSpacing)], [`auto-sizing-${autoSizing}`, Boolean(autoSizing)]);
-//#endregion
 //#region src/lib/layout/definition.ts
-/**
-* @internal
-*/
-var layoutDefinition = defineVividComponent("layout", Layout, html` <div class="${getClasses}">
+/** @internal */
+var layoutDefinition = defineVividComponent("layout", Layout, html` <div
+	class="${(x) => classNames("control", [`column-basis-${x.columnBasis}`, Boolean(x.columnBasis)], [`gutters-${x.gutters}`, Boolean(x.gutters)], [`column-spacing-${x.columnSpacing}`, Boolean(x.columnSpacing)], [`row-spacing-${x.rowSpacing ? x.rowSpacing : x.columnSpacing}`, Boolean(x.rowSpacing) || Boolean(x.columnSpacing)], [`auto-sizing-${x.autoSizing}`, Boolean(x.autoSizing)])}"
+>
 	<slot></slot>
-</div>`, [], { styles: layout_default });
+</div>`, [], { styles: ".control{grid-auto-rows:var(--layout-grid-template-rows,min-content);display:grid}@media not all and (width>=600px){.control.column-basis-medium,.control.column-basis-large{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(100%, 1fr)))}}@media (width>=600px){.control.column-basis-small{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(160px, 1fr)))}.control:not(.column-basis-small):not(.column-basis-medium):not(.column-basis-large):not(.column-basis-block),.control.column-basis-medium{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(320px, 1fr)))}.control.column-basis-large{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(380px, 1fr)))}.control.column-basis-block{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(1fr, 1fr)))}}.control.column-spacing-small{column-gap:var(--layout-column-gap,calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))))}.control.column-spacing-small-inline{column-gap:var(--layout-column-gap,0 calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))))}.control.column-spacing-small-block{column-gap:var(--layout-column-gap,calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))) 0)}.control:not(.column-spacing-small):not(.column-spacing-small-inline):not(.column-spacing-small-block):not(.column-spacing-medium):not(.column-spacing-medium-inline):not(.column-spacing-medium-block):not(.column-spacing-large):not(.column-spacing-large-inline):not(.column-spacing-large-block),.control.column-spacing-medium{column-gap:var(--layout-column-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.column-spacing-medium-inline{column-gap:var(--layout-column-gap,0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.column-spacing-medium-block{column-gap:var(--layout-column-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) 0)}.control.column-spacing-large{column-gap:var(--layout-column-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)))}.control.column-spacing-large-inline{column-gap:var(--layout-column-gap,0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)))}.control.column-spacing-large-block{column-gap:var(--layout-column-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) 0)}.control.row-spacing-small{row-gap:var(--layout-row-gap,calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))))}.control.row-spacing-small-inline{row-gap:var(--layout-row-gap,0 calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))))}.control.row-spacing-small-block{row-gap:var(--layout-row-gap,calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))) 0)}.control:not(.row-spacing-small):not(.row-spacing-small-inline):not(.row-spacing-small-block):not(.row-spacing-medium):not(.row-spacing-medium-inline):not(.row-spacing-medium-block):not(.row-spacing-large):not(.row-spacing-large-inline):not(.row-spacing-large-block),.control.row-spacing-medium{row-gap:var(--layout-row-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.row-spacing-medium-inline{row-gap:var(--layout-row-gap,0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.row-spacing-medium-block{row-gap:var(--layout-row-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) 0)}.control.row-spacing-large{row-gap:var(--layout-row-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)))}.control.row-spacing-large-inline{row-gap:var(--layout-row-gap,0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)))}.control.row-spacing-large-block{row-gap:var(--layout-row-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) 0)}.control.gutters-small{margin:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.gutters-small-inline{margin:0 calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.gutters-small-block{margin:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))) 0}.control.gutters-medium{margin:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.gutters-medium-inline{margin:0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.gutters-medium-block{margin:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) 0}.control.gutters-large{margin:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.gutters-large-inline{margin:0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.gutters-large-block{margin:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) 0}.control.auto-sizing-fill{--_auto-sizing:auto-fill}.control:not(.auto-sizing-fill):not(.auto-sizing-fit),.control.auto-sizing-fit{--_auto-sizing:auto-fit}" });
 /**
 * Registers the layout elements with the design system.
 *

package/unbundled/definition48.cjs

@@ -7,7 +7,7 @@ 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/nav-disclosure/nav-disclosure.scss?inline
-var nav_disclosure_default = ".control.connotation-cta{--_connotation-color-primary:var(--vvd-nav-disclosure-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-nav-disclosure-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-nav-disclosure-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-contrast:var(--vvd-nav-disclosure-cta-contrast,var(--vvd-color-cta-800));--_connotation-color-fierce:var(--vvd-nav-disclosure-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-fierce-primary:var(--vvd-nav-disclosure-cta-fierce-primary,var(--vvd-color-cta-700));--_connotation-color-faint:var(--vvd-nav-disclosure-cta-faint,var(--vvd-color-cta-50));--_connotation-color-firm:var(--vvd-nav-disclosure-cta-firm,var(--vvd-color-cta-600));--_connotation-color-soft:var(--vvd-nav-disclosure-cta-soft,var(--vvd-color-cta-100))}.control:not(.connotation-cta){--_connotation-color-primary:var(--vvd-nav-disclosure-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-nav-disclosure-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-nav-disclosure-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-nav-disclosure-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-nav-disclosure-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-fierce-primary:var(--vvd-nav-disclosure-accent-fierce-primary,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-nav-disclosure-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-firm:var(--vvd-nav-disclosure-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-nav-disclosure-accent-soft,var(--vvd-color-neutral-100))}.control,.control.appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control: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}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-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}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control: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}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control.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}.control.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.control.selected:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-firm), transparent 10%);--_appearance-color-outline:transparent}@media (hover:hover){.control.selected: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.selected:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline:transparent}}.control.selected.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.selected.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline:transparent}.control{box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);cursor:pointer;font:var(--vvd-typography-base);hyphens:auto;inline-size:100%;min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));vertical-align:middle;border-radius:8px;align-items:center;gap:12px;padding-block:10px;padding-inline:16px;text-decoration:none;display:flex}.control.current-closed{color:var(--_appearance-color-text)}@supports not (color:color-mix(in srgb, var(--one-color), var(--second-color))){.control.current-closed{background-color:var(--_connotation-color-primary)}}.control:not(.current-closed){color:var(--vvd-color-canvas-text);--focus-stroke-gap-color:transparent}.control: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))}@supports (user-select:none){.control{user-select:none}}.control .toggleIcon{margin-inline-start:auto}slot[name=icon]{font-size:20px;line-height:1}.content{border-inline-start:1px solid var(--vvd-color-neutral-200);flex-direction:column;gap:4px;margin-block:4px;margin-inline-start:20px;padding-inline-start:12px;display:flex}details>summary{list-style:none}details>summary::-webkit-details-marker{display:none}";
+var nav_disclosure_default = ".control.connotation-cta{--_connotation-color-primary:var(--vvd-nav-disclosure-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-nav-disclosure-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-nav-disclosure-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-contrast:var(--vvd-nav-disclosure-cta-contrast,var(--vvd-color-cta-800));--_connotation-color-fierce:var(--vvd-nav-disclosure-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-fierce-primary:var(--vvd-nav-disclosure-cta-fierce-primary,var(--vvd-color-cta-700));--_connotation-color-faint:var(--vvd-nav-disclosure-cta-faint,var(--vvd-color-cta-50));--_connotation-color-firm:var(--vvd-nav-disclosure-cta-firm,var(--vvd-color-cta-600));--_connotation-color-soft:var(--vvd-nav-disclosure-cta-soft,var(--vvd-color-cta-100))}.control:not(.connotation-cta){--_connotation-color-primary:var(--vvd-nav-disclosure-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-nav-disclosure-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-nav-disclosure-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-nav-disclosure-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-nav-disclosure-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-fierce-primary:var(--vvd-nav-disclosure-accent-fierce-primary,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-nav-disclosure-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-firm:var(--vvd-nav-disclosure-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-nav-disclosure-accent-soft,var(--vvd-color-neutral-100))}.control,.control.appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control: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}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-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}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control: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}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control.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}.control.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.control.selected:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-firm), transparent 10%);--_appearance-color-outline:transparent}@media (hover:hover){.control.selected: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.selected:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline:transparent}}.control.selected.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.selected.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline:transparent}.control{box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);cursor:pointer;font:var(--vvd-typography-base);hyphens:auto;inline-size:100%;min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));vertical-align:middle;border-radius:8px;align-items:center;gap:12px;padding-block:10px;padding-inline:16px;text-decoration:none;display:flex}.control.current-closed{color:var(--_appearance-color-text)}@supports not (color:color-mix(in srgb, var(--one-color), var(--second-color))){.control.current-closed{background-color:var(--_connotation-color-primary)}}.control:not(.current-closed){color:var(--vvd-color-canvas-text);--focus-stroke-gap-color:transparent}.control: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))}.control{user-select:none}.control .toggleIcon{margin-inline-start:auto}slot[name=icon]{font-size:20px;line-height:1}.content{border-inline-start:1px solid var(--vvd-color-neutral-200);flex-direction:column;gap:4px;margin-block:4px;margin-inline-start:20px;padding-inline-start:12px;display:flex}details>summary{list-style:none}details>summary::-webkit-details-marker{display:none}";
 //#endregion
 //#region src/lib/nav-disclosure/nav-disclosure.ts
 /**
@@ -36,17 +36,13 @@ var NavDisclosure = class extends require_affix.AffixIcon(require_delegates_aria
 			this.$emit("toggle", void 0, { bubbles: false });
 		};
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	connectedCallback() {
 		super.connectedCallback();
 		this.details.addEventListener("toggle", this.#onToggle);
 		this.details.open = this.open;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.details.removeEventListener("toggle", this.#onToggle);
@@ -67,12 +63,11 @@ require_decorate.__decorate([require_vivid_element.replaces({
 })], NavDisclosure.prototype, "current", void 0);
 //#endregion
 //#region src/lib/nav-disclosure/nav-disclosure.template.ts
-var getClasses = ({ appearance, connotation, current, open }) => (0, _microsoft_fast_web_utilities.classNames)("control", [`appearance-${appearance}`, Boolean(appearance)], [`connotation-${connotation}`, Boolean(connotation)], ["current-closed selected", current && !open]);
 var NavDisclosureTemplate = (context) => {
 	const affixIconTemplate = require_affix.affixIconTemplateFactory(context);
 	const iconTag = context.tagFor(require_definition.Icon);
 	return _microsoft_fast_element.html`<details class="base" ${(0, _microsoft_fast_element.ref)("details")} ?open=${(x) => x.open}>
-		<summary class="${getClasses}"
+		<summary class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("control", [`appearance-${x.appearance}`, Boolean(x.appearance)], [`connotation-${x.connotation}`, Boolean(x.connotation)], ["current-closed selected", x.current && !x.open])}"
 			${require_delegates_aria.delegateAria({
 		role: "button",
 		ariaExpanded: (x) => x.open,
@@ -94,9 +89,7 @@ var NavDisclosureTemplate = (context) => {
 };
 //#endregion
 //#region src/lib/nav-disclosure/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var navDisclosureDefinition = require_vivid_element.defineVividComponent("nav-disclosure", NavDisclosure, NavDisclosureTemplate, [require_definition.iconDefinition], { styles: nav_disclosure_default });
 /**
 * Registers the nav-disclosure elements with the design system.

package/unbundled/definition48.js

@@ -6,7 +6,7 @@ import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
 import { attr, html, ref } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
 //#region src/lib/nav-disclosure/nav-disclosure.scss?inline
-var nav_disclosure_default = ".control.connotation-cta{--_connotation-color-primary:var(--vvd-nav-disclosure-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-nav-disclosure-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-nav-disclosure-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-contrast:var(--vvd-nav-disclosure-cta-contrast,var(--vvd-color-cta-800));--_connotation-color-fierce:var(--vvd-nav-disclosure-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-fierce-primary:var(--vvd-nav-disclosure-cta-fierce-primary,var(--vvd-color-cta-700));--_connotation-color-faint:var(--vvd-nav-disclosure-cta-faint,var(--vvd-color-cta-50));--_connotation-color-firm:var(--vvd-nav-disclosure-cta-firm,var(--vvd-color-cta-600));--_connotation-color-soft:var(--vvd-nav-disclosure-cta-soft,var(--vvd-color-cta-100))}.control:not(.connotation-cta){--_connotation-color-primary:var(--vvd-nav-disclosure-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-nav-disclosure-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-nav-disclosure-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-nav-disclosure-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-nav-disclosure-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-fierce-primary:var(--vvd-nav-disclosure-accent-fierce-primary,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-nav-disclosure-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-firm:var(--vvd-nav-disclosure-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-nav-disclosure-accent-soft,var(--vvd-color-neutral-100))}.control,.control.appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control: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}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-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}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control: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}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control.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}.control.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.control.selected:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-firm), transparent 10%);--_appearance-color-outline:transparent}@media (hover:hover){.control.selected: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.selected:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline:transparent}}.control.selected.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.selected.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline:transparent}.control{box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);cursor:pointer;font:var(--vvd-typography-base);hyphens:auto;inline-size:100%;min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));vertical-align:middle;border-radius:8px;align-items:center;gap:12px;padding-block:10px;padding-inline:16px;text-decoration:none;display:flex}.control.current-closed{color:var(--_appearance-color-text)}@supports not (color:color-mix(in srgb, var(--one-color), var(--second-color))){.control.current-closed{background-color:var(--_connotation-color-primary)}}.control:not(.current-closed){color:var(--vvd-color-canvas-text);--focus-stroke-gap-color:transparent}.control: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))}@supports (user-select:none){.control{user-select:none}}.control .toggleIcon{margin-inline-start:auto}slot[name=icon]{font-size:20px;line-height:1}.content{border-inline-start:1px solid var(--vvd-color-neutral-200);flex-direction:column;gap:4px;margin-block:4px;margin-inline-start:20px;padding-inline-start:12px;display:flex}details>summary{list-style:none}details>summary::-webkit-details-marker{display:none}";
+var nav_disclosure_default = ".control.connotation-cta{--_connotation-color-primary:var(--vvd-nav-disclosure-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-nav-disclosure-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-nav-disclosure-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-contrast:var(--vvd-nav-disclosure-cta-contrast,var(--vvd-color-cta-800));--_connotation-color-fierce:var(--vvd-nav-disclosure-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-fierce-primary:var(--vvd-nav-disclosure-cta-fierce-primary,var(--vvd-color-cta-700));--_connotation-color-faint:var(--vvd-nav-disclosure-cta-faint,var(--vvd-color-cta-50));--_connotation-color-firm:var(--vvd-nav-disclosure-cta-firm,var(--vvd-color-cta-600));--_connotation-color-soft:var(--vvd-nav-disclosure-cta-soft,var(--vvd-color-cta-100))}.control:not(.connotation-cta){--_connotation-color-primary:var(--vvd-nav-disclosure-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-nav-disclosure-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-nav-disclosure-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-nav-disclosure-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-nav-disclosure-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-fierce-primary:var(--vvd-nav-disclosure-accent-fierce-primary,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-nav-disclosure-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-firm:var(--vvd-nav-disclosure-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-nav-disclosure-accent-soft,var(--vvd-color-neutral-100))}.control,.control.appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control: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}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-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}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control: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}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control.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}.control.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.control.selected:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-firm), transparent 10%);--_appearance-color-outline:transparent}@media (hover:hover){.control.selected: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.selected:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline:transparent}}.control.selected.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.selected.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline:transparent}.control{box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);cursor:pointer;font:var(--vvd-typography-base);hyphens:auto;inline-size:100%;min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));vertical-align:middle;border-radius:8px;align-items:center;gap:12px;padding-block:10px;padding-inline:16px;text-decoration:none;display:flex}.control.current-closed{color:var(--_appearance-color-text)}@supports not (color:color-mix(in srgb, var(--one-color), var(--second-color))){.control.current-closed{background-color:var(--_connotation-color-primary)}}.control:not(.current-closed){color:var(--vvd-color-canvas-text);--focus-stroke-gap-color:transparent}.control: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))}.control{user-select:none}.control .toggleIcon{margin-inline-start:auto}slot[name=icon]{font-size:20px;line-height:1}.content{border-inline-start:1px solid var(--vvd-color-neutral-200);flex-direction:column;gap:4px;margin-block:4px;margin-inline-start:20px;padding-inline-start:12px;display:flex}details>summary{list-style:none}details>summary::-webkit-details-marker{display:none}";
 //#endregion
 //#region src/lib/nav-disclosure/nav-disclosure.ts
 /**
@@ -35,17 +35,13 @@ var NavDisclosure = class extends AffixIcon(DelegatesAria(VividElement)) {
 			this.$emit("toggle", void 0, { bubbles: false });
 		};
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	connectedCallback() {
 		super.connectedCallback();
 		this.details.addEventListener("toggle", this.#onToggle);
 		this.details.open = this.open;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.details.removeEventListener("toggle", this.#onToggle);
@@ -66,12 +62,11 @@ __decorate([replaces({
 })], NavDisclosure.prototype, "current", void 0);
 //#endregion
 //#region src/lib/nav-disclosure/nav-disclosure.template.ts
-var getClasses = ({ appearance, connotation, current, open }) => classNames("control", [`appearance-${appearance}`, Boolean(appearance)], [`connotation-${connotation}`, Boolean(connotation)], ["current-closed selected", current && !open]);
 var NavDisclosureTemplate = (context) => {
 	const affixIconTemplate = affixIconTemplateFactory(context);
 	const iconTag = context.tagFor(Icon);
 	return html`<details class="base" ${ref("details")} ?open=${(x) => x.open}>
-		<summary class="${getClasses}"
+		<summary class="${(x) => classNames("control", [`appearance-${x.appearance}`, Boolean(x.appearance)], [`connotation-${x.connotation}`, Boolean(x.connotation)], ["current-closed selected", x.current && !x.open])}"
 			${delegateAria({
 		role: "button",
 		ariaExpanded: (x) => x.open,
@@ -93,9 +88,7 @@ var NavDisclosureTemplate = (context) => {
 };
 //#endregion
 //#region src/lib/nav-disclosure/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var navDisclosureDefinition = defineVividComponent("nav-disclosure", NavDisclosure, NavDisclosureTemplate, [iconDefinition], { styles: nav_disclosure_default });
 /**
 * Registers the nav-disclosure elements with the design system.

package/unbundled/definition49.cjs

@@ -7,11 +7,10 @@ const require_linkable = require("./linkable.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/lib/nav-item/nav-item.scss?inline
-var nav_item_default = ".control{box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);font:var(--vvd-typography-base);hyphens:auto;inline-size:100%;min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));vertical-align:middle;border-radius:8px;align-items:center;gap:12px;text-decoration:none;display:inline-flex}.control.current{color:var(--_appearance-color-text)}@supports not (color:color-mix(in srgb, var(--one-color), var(--second-color))){.control.current{background-color:var(--_connotation-color-primary)}}.control.current:focus-visible{outline:none;position:relative}.control.current: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.connotation-cta{--_connotation-color-primary:var(--vvd-nav-item-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-nav-item-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-nav-item-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-contrast:var(--vvd-nav-item-cta-contrast,var(--vvd-color-cta-800));--_connotation-color-fierce:var(--vvd-nav-item-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-fierce-primary:var(--vvd-nav-item-cta-fierce-primary,var(--vvd-color-cta-700));--_connotation-color-faint:var(--vvd-nav-item-cta-faint,var(--vvd-color-cta-50));--_connotation-color-firm:var(--vvd-nav-item-cta-firm,var(--vvd-color-cta-600));--_connotation-color-soft:var(--vvd-nav-item-cta-soft,var(--vvd-color-cta-100))}.control:not(.connotation-cta){--_connotation-color-primary:var(--vvd-nav-item-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-nav-item-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-nav-item-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-nav-item-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-nav-item-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-fierce-primary:var(--vvd-nav-item-accent-fierce-primary,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-nav-item-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-firm:var(--vvd-nav-item-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-nav-item-accent-soft,var(--vvd-color-neutral-100))}.control,.control.appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control: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}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-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}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control: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}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control.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}.control.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.control.selected:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-firm), transparent 10%);--_appearance-color-outline:transparent}@media (hover:hover){.control.selected: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.selected:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline:transparent}}.control.selected.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.selected.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline:transparent}.control.icon-only{block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));place-content:center;display:flex;position:relative}.control.icon-only slot[name=meta]{display:block;position:absolute;inset-block-start:calc((calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - 20px) / 2);inset-inline-end:calc((calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - 20px) / 2);transform:translate(50%,-50%)}.control:not(.icon-only){padding-block:10px;padding-inline:16px}.control:not(.current){color:var(--vvd-color-canvas-text);--focus-stroke-gap-color:transparent}.control:not(.current):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))}:host(:dir(rtl)) .icon-only slot[name=meta]{transform:translate(-50%,-50%)}slot[name=icon]{font-size:20px;line-height:1}";
+var nav_item_default = ".control{box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);font:var(--vvd-typography-base);hyphens:auto;inline-size:100%;min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));vertical-align:middle;border-radius:8px;align-items:center;gap:12px;text-decoration:none;display:inline-flex}.control.current{color:var(--_appearance-color-text)}@supports not (color:color-mix(in srgb, var(--one-color), var(--second-color))){.control.current{background-color:var(--_connotation-color-primary)}}.control.current:focus-visible{outline:none;position:relative}.control.current: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.connotation-cta{--_connotation-color-primary:var(--vvd-nav-item-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-nav-item-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-nav-item-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-contrast:var(--vvd-nav-item-cta-contrast,var(--vvd-color-cta-800));--_connotation-color-fierce:var(--vvd-nav-item-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-fierce-primary:var(--vvd-nav-item-cta-fierce-primary,var(--vvd-color-cta-700));--_connotation-color-faint:var(--vvd-nav-item-cta-faint,var(--vvd-color-cta-50));--_connotation-color-firm:var(--vvd-nav-item-cta-firm,var(--vvd-color-cta-600));--_connotation-color-soft:var(--vvd-nav-item-cta-soft,var(--vvd-color-cta-100))}.control:not(.connotation-cta){--_connotation-color-primary:var(--vvd-nav-item-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-nav-item-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-nav-item-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-nav-item-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-nav-item-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-fierce-primary:var(--vvd-nav-item-accent-fierce-primary,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-nav-item-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-firm:var(--vvd-nav-item-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-nav-item-accent-soft,var(--vvd-color-neutral-100))}.control,.control.appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control: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}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-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}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control: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}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control.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}.control.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.control.selected:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-firm), transparent 10%);--_appearance-color-outline:transparent}@media (hover:hover){.control.selected: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.selected:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline:transparent}}.control.selected.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.selected.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline:transparent}.control.icon-only{block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));place-content:center;display:flex;position:relative}.control.icon-only slot[name=meta]{display:block;position:absolute;inset-block-start:calc((calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - 20px) / 2);inset-inline-end:calc((calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - 20px) / 2);transform:translate(50%,-50%)}.control:not(.icon-only){padding-block:10px;padding-inline:16px}.control:not(.current){color:var(--vvd-color-canvas-text);--focus-stroke-gap-color:transparent}.control:not(.current):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))}:host(:dir(rtl)) .icon-only slot[name=meta]{transform:translate(-50%,-50%)}slot[name=icon]{font-size:20px;line-height:1}";
 //#endregion
 //#region src/lib/nav-item/nav-item.ts
 /**
-* A Nav Item Custom HTML Element.
 * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }.
 *
 * @public
@@ -43,17 +42,14 @@ require_decorate.__decorate([require_vivid_element.replaces({
 })], NavItem.prototype, "current", void 0);
 //#endregion
 //#region src/lib/nav-item/nav-item.template.ts
-var getClasses = ({ text, connotation, appearance, current }) => (0, _microsoft_fast_web_utilities.classNames)("control", ["icon-only", !text], [`connotation-${connotation}`, Boolean(connotation)], [`appearance-${appearance}`, Boolean(appearance)], ["current selected", current]);
 var NavItemTemplate = (context) => {
 	const affixIconTemplate = require_affix.affixIconTemplateFactory(context);
 	return _microsoft_fast_element.html`${(x) => x._renderLinkElement(_microsoft_fast_element.html`${(x) => affixIconTemplate(x.icon, require_affix.IconWrapper.Slot)}
-				${(x) => x.text} <slot name="meta"></slot>`, getClasses)}`;
+				${(x) => x.text} <slot name="meta"></slot>`, (x) => (0, _microsoft_fast_web_utilities.classNames)("control", ["icon-only", !x.text], [`connotation-${x.connotation}`, Boolean(x.connotation)], [`appearance-${x.appearance}`, Boolean(x.appearance)], ["current selected", x.current]))}`;
 };
 //#endregion
 //#region src/lib/nav-item/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var navItemDefinition = require_vivid_element.defineVividComponent("nav-item", NavItem, NavItemTemplate, [require_definition.iconDefinition], {
 	styles: nav_item_default,
 	shadowOptions: { delegatesFocus: true }

package/unbundled/definition49.js

@@ -6,11 +6,10 @@ import { t as Linkable } from "./linkable.js";
 import { attr, html } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
 //#region src/lib/nav-item/nav-item.scss?inline
-var nav_item_default = ".control{box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);font:var(--vvd-typography-base);hyphens:auto;inline-size:100%;min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));vertical-align:middle;border-radius:8px;align-items:center;gap:12px;text-decoration:none;display:inline-flex}.control.current{color:var(--_appearance-color-text)}@supports not (color:color-mix(in srgb, var(--one-color), var(--second-color))){.control.current{background-color:var(--_connotation-color-primary)}}.control.current:focus-visible{outline:none;position:relative}.control.current: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.connotation-cta{--_connotation-color-primary:var(--vvd-nav-item-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-nav-item-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-nav-item-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-contrast:var(--vvd-nav-item-cta-contrast,var(--vvd-color-cta-800));--_connotation-color-fierce:var(--vvd-nav-item-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-fierce-primary:var(--vvd-nav-item-cta-fierce-primary,var(--vvd-color-cta-700));--_connotation-color-faint:var(--vvd-nav-item-cta-faint,var(--vvd-color-cta-50));--_connotation-color-firm:var(--vvd-nav-item-cta-firm,var(--vvd-color-cta-600));--_connotation-color-soft:var(--vvd-nav-item-cta-soft,var(--vvd-color-cta-100))}.control:not(.connotation-cta){--_connotation-color-primary:var(--vvd-nav-item-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-nav-item-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-nav-item-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-nav-item-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-nav-item-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-fierce-primary:var(--vvd-nav-item-accent-fierce-primary,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-nav-item-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-firm:var(--vvd-nav-item-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-nav-item-accent-soft,var(--vvd-color-neutral-100))}.control,.control.appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control: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}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-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}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control: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}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control.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}.control.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.control.selected:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-firm), transparent 10%);--_appearance-color-outline:transparent}@media (hover:hover){.control.selected: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.selected:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline:transparent}}.control.selected.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.selected.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline:transparent}.control.icon-only{block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));place-content:center;display:flex;position:relative}.control.icon-only slot[name=meta]{display:block;position:absolute;inset-block-start:calc((calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - 20px) / 2);inset-inline-end:calc((calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - 20px) / 2);transform:translate(50%,-50%)}.control:not(.icon-only){padding-block:10px;padding-inline:16px}.control:not(.current){color:var(--vvd-color-canvas-text);--focus-stroke-gap-color:transparent}.control:not(.current):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))}:host(:dir(rtl)) .icon-only slot[name=meta]{transform:translate(-50%,-50%)}slot[name=icon]{font-size:20px;line-height:1}";
+var nav_item_default = ".control{box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);font:var(--vvd-typography-base);hyphens:auto;inline-size:100%;min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));vertical-align:middle;border-radius:8px;align-items:center;gap:12px;text-decoration:none;display:inline-flex}.control.current{color:var(--_appearance-color-text)}@supports not (color:color-mix(in srgb, var(--one-color), var(--second-color))){.control.current{background-color:var(--_connotation-color-primary)}}.control.current:focus-visible{outline:none;position:relative}.control.current: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.connotation-cta{--_connotation-color-primary:var(--vvd-nav-item-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-nav-item-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-nav-item-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-contrast:var(--vvd-nav-item-cta-contrast,var(--vvd-color-cta-800));--_connotation-color-fierce:var(--vvd-nav-item-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-fierce-primary:var(--vvd-nav-item-cta-fierce-primary,var(--vvd-color-cta-700));--_connotation-color-faint:var(--vvd-nav-item-cta-faint,var(--vvd-color-cta-50));--_connotation-color-firm:var(--vvd-nav-item-cta-firm,var(--vvd-color-cta-600));--_connotation-color-soft:var(--vvd-nav-item-cta-soft,var(--vvd-color-cta-100))}.control:not(.connotation-cta){--_connotation-color-primary:var(--vvd-nav-item-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-nav-item-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-nav-item-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-nav-item-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-nav-item-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-fierce-primary:var(--vvd-nav-item-accent-fierce-primary,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-nav-item-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-firm:var(--vvd-nav-item-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-nav-item-accent-soft,var(--vvd-color-neutral-100))}.control,.control.appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control: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}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-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}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control: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}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control.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}.control.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.control.selected:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-firm), transparent 10%);--_appearance-color-outline:transparent}@media (hover:hover){.control.selected: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.selected:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline:transparent}}.control.selected.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.selected.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline:transparent}.control.icon-only{block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));place-content:center;display:flex;position:relative}.control.icon-only slot[name=meta]{display:block;position:absolute;inset-block-start:calc((calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - 20px) / 2);inset-inline-end:calc((calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - 20px) / 2);transform:translate(50%,-50%)}.control:not(.icon-only){padding-block:10px;padding-inline:16px}.control:not(.current){color:var(--vvd-color-canvas-text);--focus-stroke-gap-color:transparent}.control:not(.current):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))}:host(:dir(rtl)) .icon-only slot[name=meta]{transform:translate(-50%,-50%)}slot[name=icon]{font-size:20px;line-height:1}";
 //#endregion
 //#region src/lib/nav-item/nav-item.ts
 /**
-* A Nav Item Custom HTML Element.
 * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }.
 *
 * @public
@@ -42,17 +41,14 @@ __decorate([replaces({
 })], NavItem.prototype, "current", void 0);
 //#endregion
 //#region src/lib/nav-item/nav-item.template.ts
-var getClasses = ({ text, connotation, appearance, current }) => classNames("control", ["icon-only", !text], [`connotation-${connotation}`, Boolean(connotation)], [`appearance-${appearance}`, Boolean(appearance)], ["current selected", current]);
 var NavItemTemplate = (context) => {
 	const affixIconTemplate = affixIconTemplateFactory(context);
 	return html`${(x) => x._renderLinkElement(html`${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
-				${(x) => x.text} <slot name="meta"></slot>`, getClasses)}`;
+				${(x) => x.text} <slot name="meta"></slot>`, (x) => classNames("control", ["icon-only", !x.text], [`connotation-${x.connotation}`, Boolean(x.connotation)], [`appearance-${x.appearance}`, Boolean(x.appearance)], ["current selected", x.current]))}`;
 };
 //#endregion
 //#region src/lib/nav-item/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var navItemDefinition = defineVividComponent("nav-item", NavItem, NavItemTemplate, [iconDefinition], {
 	styles: nav_item_default,
 	shadowOptions: { delegatesFocus: true }

package/unbundled/definition5.cjs

@@ -18,11 +18,10 @@ require_decorate.__decorate([_microsoft_fast_element.attr], ProgressRing.prototy
 require_decorate.__decorate([_microsoft_fast_element.attr], ProgressRing.prototype, "size", void 0);
 //#endregion
 //#region src/lib/progress-ring/progress-ring.template.ts
-var getClasses = ({ connotation, size, paused }) => (0, _microsoft_fast_web_utilities.classNames)("base", ["disabled", paused], [`connotation-${connotation}`, !!connotation], [`size-${size}`, !!size]);
 var progressSegments = 44;
 var ProgressRingTemplate = _microsoft_fast_element.html`<template>
 	<div
-		class="${(x) => x.paused ? "paused" : ""} ${getClasses}"
+		class="${(x) => x.paused ? "paused" : ""} ${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", ["disabled", x.paused], [`connotation-${x.connotation}`, !!x.connotation], [`size-${x.size}`, !!x.size])}"
 		${require_delegates_aria.delegateAria({
 	role: "progressbar",
 	ariaValueNow: (x) => x.value,
@@ -57,9 +56,7 @@ var ProgressRingTemplate = _microsoft_fast_element.html`<template>
 </template>`;
 //#endregion
 //#region src/lib/progress-ring/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var progressRingDefinition = require_vivid_element.defineVividComponent("progress-ring", ProgressRing, ProgressRingTemplate, [], { styles: progress_ring_default });
 /**
 * Registers the progress-ring  elements with the design system.

package/unbundled/definition5.js

@@ -17,16 +17,13 @@ __decorate([attr], ProgressRing.prototype, "connotation", void 0);
 __decorate([attr], ProgressRing.prototype, "size", void 0);
 //#endregion
 //#region src/lib/progress-ring/progress-ring.template.ts
-var getClasses = ({ connotation, size, paused }) => classNames("base", ["disabled", paused], [`connotation-${connotation}`, !!connotation], [`size-${size}`, !!size]);
 var progressSegments = 44;
 //#endregion
 //#region src/lib/progress-ring/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var progressRingDefinition = defineVividComponent("progress-ring", ProgressRing, html`<template>
 	<div
-		class="${(x) => x.paused ? "paused" : ""} ${getClasses}"
+		class="${(x) => x.paused ? "paused" : ""} ${(x) => classNames("base", ["disabled", x.paused], [`connotation-${x.connotation}`, !!x.connotation], [`size-${x.size}`, !!x.size])}"
 		${delegateAria({
 	role: "progressbar",
 	ariaValueNow: (x) => x.value,

package/unbundled/definition50.cjs

@@ -21,9 +21,7 @@ var NavTemplate = _microsoft_fast_element.html`
 `;
 //#endregion
 //#region src/lib/nav/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var navDefinition = require_vivid_element.defineVividComponent("nav", Nav, NavTemplate, [], { styles: nav_default });
 /**
 * Registers the nav elements with the design system.

package/unbundled/definition50.js

@@ -13,9 +13,7 @@ var nav_default = "nav{flex-direction:column;gap:4px;display:flex}";
 var Nav = class extends DelegatesAria(VividElement) {};
 //#endregion
 //#region src/lib/nav/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var navDefinition = defineVividComponent("nav", Nav, html`
 	<nav ${delegateAria()}>
 		<slot></slot>

package/unbundled/definition51.cjs

@@ -20,14 +20,13 @@ require_decorate.__decorate([_microsoft_fast_element.attr], Note.prototype, "hea
 require_decorate.__decorate([_microsoft_fast_element.attr], Note.prototype, "connotation", void 0);
 //#endregion
 //#region src/lib/note/note.template.ts
-var getClasses = ({ connotation }) => (0, _microsoft_fast_web_utilities.classNames)("base", `connotation-${connotation}`);
 function getHeaderTemplate() {
 	return _microsoft_fast_element.html`<div class="headline">${(x) => x.headline}</div>`;
 }
 var NoteTemplate = (context) => {
 	const affixIconTemplate = require_affix.affixIconTemplateFactory(context);
 	return _microsoft_fast_element.html`
-		<div class="${getClasses}">
+		<div class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", `connotation-${x.connotation}`)}">
 			${(x) => affixIconTemplate(x.icon, require_affix.IconWrapper.Slot)}
 			<div class="text">
 				${(0, _microsoft_fast_element.when)((x) => x.headline, getHeaderTemplate())}
@@ -38,9 +37,7 @@ var NoteTemplate = (context) => {
 };
 //#endregion
 //#region src/lib/note/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var noteDefinition = require_vivid_element.defineVividComponent("note", Note, NoteTemplate, [require_definition.iconDefinition], { styles: note_default });
 /**
 * Registers the note elements with the design system.

package/unbundled/definition51.js

@@ -19,14 +19,13 @@ __decorate([attr], Note.prototype, "headline", void 0);
 __decorate([attr], Note.prototype, "connotation", void 0);
 //#endregion
 //#region src/lib/note/note.template.ts
-var getClasses = ({ connotation }) => classNames("base", `connotation-${connotation}`);
 function getHeaderTemplate() {
 	return html`<div class="headline">${(x) => x.headline}</div>`;
 }
 var NoteTemplate = (context) => {
 	const affixIconTemplate = affixIconTemplateFactory(context);
 	return html`
-		<div class="${getClasses}">
+		<div class="${(x) => classNames("base", `connotation-${x.connotation}`)}">
 			${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
 			<div class="text">
 				${when((x) => x.headline, getHeaderTemplate())}
@@ -37,9 +36,7 @@ var NoteTemplate = (context) => {
 };
 //#endregion
 //#region src/lib/note/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var noteDefinition = defineVividComponent("note", Note, NoteTemplate, [iconDefinition], { styles: note_default });
 /**
 * Registers the note elements with the design system.