@vonage/vivid 5.23.1-preview.0 → 5.24.0

package/unbundled/definition47.cjs

@@ -1,60 +1,199 @@
 require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_decorate = require("./decorate.cjs");
+const require_platform = require("./platform.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
-//#region src/lib/layout/layout.ts
+//#region src/lib/kbd-key/kbd-key.scss?inline
+var kbd_key_default = ":host{vertical-align:middle;display:inline-block}.base{--_connotation-color-primary:var(--vvd-kbd-key-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-kbd-key-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-soft:var(--vvd-kbd-key-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-contrast:var(--vvd-kbd-key-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-firm:var(--vvd-kbd-key-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-kbd-key-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-dim:var(--vvd-kbd-key-accent-dim,var(--vvd-color-neutral-200));--_connotation-color-pale:var(--vvd-kbd-key-accent-pale,var(--vvd-color-neutral-300));--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base{box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:var(--_kbd-key-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-condensed);font-size:calc(var(--_kbd-key-size) / 2);min-inline-size:var(--_kbd-key-size);padding-inline:calc(var(--_kbd-key-size) / 4);white-space:nowrap;border:0;justify-content:center;align-items:center;display:inline-flex}.base.appearance-dropshadow{--_kbd-key-shadow-size:calc(var(--_kbd-key-size) * .0415);background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 1px var(--vvd-color-neutral-300), var(--_kbd-key-shadow-size) var(--_kbd-key-shadow-size) 0 0 var(--vvd-color-neutral-300);color:var(--vvd-color-canvas-text)}.base.size-super-condensed{--_kbd-key-size:16px;border-radius:3px;font-size:10px}.base.size-condensed{--_kbd-key-size:24px;border-radius:6px}.base:not(.size-super-condensed,.size-condensed,.size-expanded){--_kbd-key-size:32px;border-radius:6px}.base.size-expanded{--_kbd-key-size:40px;border-radius:8px}";
+//#endregion
+//#region src/lib/kbd-key/kbd-key.ts
+var SUPPORTED_KEY_NAMES_SET = new Set([
+	"Alt",
+	"Control",
+	"Shift",
+	"Enter",
+	"Tab",
+	"Space",
+	"Backspace",
+	"Escape",
+	"ArrowUp",
+	"ArrowDown",
+	"ArrowLeft",
+	"ArrowRight",
+	"End",
+	"Home",
+	"PageUp",
+	"PageDown",
+	"A",
+	"B",
+	"C",
+	"D",
+	"E",
+	"F",
+	"G",
+	"H",
+	"I",
+	"J",
+	"K",
+	"L",
+	"M",
+	"N",
+	"O",
+	"P",
+	"Q",
+	"R",
+	"S",
+	"T",
+	"U",
+	"V",
+	"W",
+	"X",
+	"Y",
+	"Z",
+	"0",
+	"1",
+	"2",
+	"3",
+	"4",
+	"5",
+	"6",
+	"7",
+	"8",
+	"9",
+	"Mod",
+	"Custom"
+]);
+/**
+* Maps key names to their display labels on standard (non-Apple) platforms.
+* Keys not listed here display as their key-name string.
+*/
+var KEY_DISPLAY_MAP = {
+	Enter: "↵",
+	Tab: "⇥",
+	Space: "␣",
+	Backspace: "⌫",
+	Escape: "Esc",
+	Shift: "⇧",
+	Control: "Ctrl",
+	Alt: "Alt",
+	ArrowUp: "↑",
+	ArrowDown: "↓",
+	ArrowLeft: "←",
+	ArrowRight: "→",
+	End: "End",
+	Home: "Home",
+	PageUp: "PgUp",
+	PageDown: "PgDn"
+};
+var APPLE_DISPLAY_OVERRIDES = {
+	Control: "⌃",
+	Alt: "⌥"
+};
+/**
+* Aria labels for keys that display as symbols on standard platforms.
+* Keys displaying readable text (e.g. "Ctrl", "Esc") are omitted.
+*/
+var KEY_ARIA_LABEL_MAP = {
+	Enter: "Enter",
+	Tab: "Tab",
+	Space: "Space",
+	Backspace: "Backspace",
+	Shift: "Shift",
+	ArrowUp: "Up Arrow",
+	ArrowDown: "Down Arrow",
+	ArrowLeft: "Left Arrow",
+	ArrowRight: "Right Arrow"
+};
+var APPLE_ARIA_LABEL_OVERRIDES = {
+	Control: "Control",
+	Alt: "Option"
+};
 /**
-* [--layout-grid-template-columns=repeat([the `auto-sizing` mapped value],
-* minmax([the `column-basis` mapped value], 1fr))] - Controls the `grid-template-columns` of the layout.
-*
 * @public
-* @component layout
-* @slot - Default slot.
+* @component kbd-key
+* @slot - Default slot for custom content (used when name is "Custom").
 */
-var Layout = class extends require_vivid_element.VividElement {};
-require_decorate.__decorate([_microsoft_fast_element.attr], Layout.prototype, "gutters", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "column-basis" })], Layout.prototype, "columnBasis", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "column-spacing" })], Layout.prototype, "columnSpacing", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "row-spacing" })], Layout.prototype, "rowSpacing", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.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}";
+var KbdKey = class extends require_vivid_element.VividElement {
+	/** @internal */
+	get _isApple() {
+		if (this.keyboard === "apple") return true;
+		if (this.keyboard === "standard") return false;
+		return require_platform.isApplePlatform();
+	}
+	/** @internal */
+	get _displayLabel() {
+		/* v8 ignore if -- @preserve */
+		if (!this.name || this.name === "Custom") return "";
+		if (!SUPPORTED_KEY_NAMES_SET.has(this.name)) {
+			console.warn(`[kbd-key] Unsupported key name: "${this.name}". Nothing will be displayed.`);
+			return "";
+		}
+		if (this.name === "Mod") return this._isApple ? "⌘" : "Ctrl";
+		if (this._isApple && this.name in APPLE_DISPLAY_OVERRIDES) return APPLE_DISPLAY_OVERRIDES[this.name];
+		return KEY_DISPLAY_MAP[this.name] ?? this.name;
+	}
+	/** @internal */
+	get _ariaKeyLabel() {
+		if (!this.name || this.name === "Custom") return null;
+		if (this.name === "Mod") return this._isApple ? "Command" : null;
+		if (this._isApple && this.name in APPLE_ARIA_LABEL_OVERRIDES) return APPLE_ARIA_LABEL_OVERRIDES[this.name];
+		return KEY_ARIA_LABEL_MAP[this.name] ?? null;
+	}
+	/**
+	* Returns the aria-keyshortcuts key token for this element, or null if one
+	* cannot be determined.
+	*
+	* @internal
+	*/
+	_getKeyshortcutsKey() {
+		if (this.keyshortcutsKey !== void 0) return this.keyshortcutsKey || null;
+		if (!this.name) return null;
+		if (this.name === "Custom") return this.textContent.trim() || null;
+		if (this.name === "Mod") return this._isApple ? "Meta" : "Control";
+		return this.name;
+	}
+};
+require_decorate.__decorate([_microsoft_fast_element.attr], KbdKey.prototype, "name", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], KbdKey.prototype, "keyboard", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], KbdKey.prototype, "appearance", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], KbdKey.prototype, "size", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "keyshortcuts-key" })], KbdKey.prototype, "keyshortcutsKey", void 0);
 //#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}">
-	<slot></slot>
-</div>`;
+//#region src/lib/kbd-key/kbd-key.template.ts
+var KbdKeyTemplate = () => {
+	return _microsoft_fast_element.html`<kbd
+		class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", [`appearance-${x.appearance}`, Boolean(x.appearance)], [`size-${x.size}`, Boolean(x.size)])}"
+		aria-label="${(x) => x._ariaKeyLabel}"
+		>${(0, _microsoft_fast_element.when)((x) => x.name === "Custom", _microsoft_fast_element.html`<slot></slot>`)}${(0, _microsoft_fast_element.when)((x) => Boolean(x.name && x.name !== "Custom" && x._displayLabel), _microsoft_fast_element.html`${(x) => x._displayLabel}`)}</kbd
+	>`;
+};
 //#endregion
-//#region src/lib/layout/definition.ts
-/**
-* @internal
-*/
-var layoutDefinition = require_vivid_element.defineVividComponent("layout", Layout, layoutTemplate, [], { styles: layout_default });
+//#region src/lib/kbd-key/definition.ts
+/** @internal */
+var kbdKeyDefinition = require_vivid_element.defineVividComponent("kbd-key", KbdKey, KbdKeyTemplate, [], { styles: kbd_key_default });
 /**
-* Registers the layout elements with the design system.
+* Registers the kbd-key element with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerLayout = require_vivid_element.createRegisterFunction(layoutDefinition);
+var registerKbdKey = require_vivid_element.createRegisterFunction(kbdKeyDefinition);
 //#endregion
-Object.defineProperty(exports, "Layout", {
+Object.defineProperty(exports, "KbdKey", {
 	enumerable: true,
 	get: function() {
-		return Layout;
+		return KbdKey;
 	}
 });
-Object.defineProperty(exports, "layoutDefinition", {
+Object.defineProperty(exports, "kbdKeyDefinition", {
 	enumerable: true,
 	get: function() {
-		return layoutDefinition;
+		return kbdKeyDefinition;
 	}
 });
-Object.defineProperty(exports, "registerLayout", {
+Object.defineProperty(exports, "registerKbdKey", {
 	enumerable: true,
 	get: function() {
-		return registerLayout;
+		return registerKbdKey;
 	}
 });

package/unbundled/definition47.js

@@ -1,41 +1,181 @@
 import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
-import { attr, html } from "@microsoft/fast-element";
+import { t as isApplePlatform } from "./platform.js";
+import { attr, html, when } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
-//#region src/lib/layout/layout.ts
+//#region src/lib/kbd-key/kbd-key.scss?inline
+var kbd_key_default = ":host{vertical-align:middle;display:inline-block}.base{--_connotation-color-primary:var(--vvd-kbd-key-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-kbd-key-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-soft:var(--vvd-kbd-key-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-contrast:var(--vvd-kbd-key-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-firm:var(--vvd-kbd-key-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-kbd-key-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-dim:var(--vvd-kbd-key-accent-dim,var(--vvd-color-neutral-200));--_connotation-color-pale:var(--vvd-kbd-key-accent-pale,var(--vvd-color-neutral-300));--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base{box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:var(--_kbd-key-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-condensed);font-size:calc(var(--_kbd-key-size) / 2);min-inline-size:var(--_kbd-key-size);padding-inline:calc(var(--_kbd-key-size) / 4);white-space:nowrap;border:0;justify-content:center;align-items:center;display:inline-flex}.base.appearance-dropshadow{--_kbd-key-shadow-size:calc(var(--_kbd-key-size) * .0415);background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 1px var(--vvd-color-neutral-300), var(--_kbd-key-shadow-size) var(--_kbd-key-shadow-size) 0 0 var(--vvd-color-neutral-300);color:var(--vvd-color-canvas-text)}.base.size-super-condensed{--_kbd-key-size:16px;border-radius:3px;font-size:10px}.base.size-condensed{--_kbd-key-size:24px;border-radius:6px}.base:not(.size-super-condensed,.size-condensed,.size-expanded){--_kbd-key-size:32px;border-radius:6px}.base.size-expanded{--_kbd-key-size:40px;border-radius:8px}";
+//#endregion
+//#region src/lib/kbd-key/kbd-key.ts
+var SUPPORTED_KEY_NAMES_SET = new Set([
+	"Alt",
+	"Control",
+	"Shift",
+	"Enter",
+	"Tab",
+	"Space",
+	"Backspace",
+	"Escape",
+	"ArrowUp",
+	"ArrowDown",
+	"ArrowLeft",
+	"ArrowRight",
+	"End",
+	"Home",
+	"PageUp",
+	"PageDown",
+	"A",
+	"B",
+	"C",
+	"D",
+	"E",
+	"F",
+	"G",
+	"H",
+	"I",
+	"J",
+	"K",
+	"L",
+	"M",
+	"N",
+	"O",
+	"P",
+	"Q",
+	"R",
+	"S",
+	"T",
+	"U",
+	"V",
+	"W",
+	"X",
+	"Y",
+	"Z",
+	"0",
+	"1",
+	"2",
+	"3",
+	"4",
+	"5",
+	"6",
+	"7",
+	"8",
+	"9",
+	"Mod",
+	"Custom"
+]);
+/**
+* Maps key names to their display labels on standard (non-Apple) platforms.
+* Keys not listed here display as their key-name string.
+*/
+var KEY_DISPLAY_MAP = {
+	Enter: "↵",
+	Tab: "⇥",
+	Space: "␣",
+	Backspace: "⌫",
+	Escape: "Esc",
+	Shift: "⇧",
+	Control: "Ctrl",
+	Alt: "Alt",
+	ArrowUp: "↑",
+	ArrowDown: "↓",
+	ArrowLeft: "←",
+	ArrowRight: "→",
+	End: "End",
+	Home: "Home",
+	PageUp: "PgUp",
+	PageDown: "PgDn"
+};
+var APPLE_DISPLAY_OVERRIDES = {
+	Control: "⌃",
+	Alt: "⌥"
+};
+/**
+* Aria labels for keys that display as symbols on standard platforms.
+* Keys displaying readable text (e.g. "Ctrl", "Esc") are omitted.
+*/
+var KEY_ARIA_LABEL_MAP = {
+	Enter: "Enter",
+	Tab: "Tab",
+	Space: "Space",
+	Backspace: "Backspace",
+	Shift: "Shift",
+	ArrowUp: "Up Arrow",
+	ArrowDown: "Down Arrow",
+	ArrowLeft: "Left Arrow",
+	ArrowRight: "Right Arrow"
+};
+var APPLE_ARIA_LABEL_OVERRIDES = {
+	Control: "Control",
+	Alt: "Option"
+};
 /**
-* [--layout-grid-template-columns=repeat([the `auto-sizing` mapped value],
-* minmax([the `column-basis` mapped value], 1fr))] - Controls the `grid-template-columns` of the layout.
-*
 * @public
-* @component layout
-* @slot - Default slot.
+* @component kbd-key
+* @slot - Default slot for custom content (used when name is "Custom").
 */
-var Layout = class extends VividElement {};
-__decorate([attr], Layout.prototype, "gutters", void 0);
-__decorate([attr({ attribute: "column-basis" })], Layout.prototype, "columnBasis", void 0);
-__decorate([attr({ attribute: "column-spacing" })], Layout.prototype, "columnSpacing", void 0);
-__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}";
+var KbdKey = class extends VividElement {
+	/** @internal */
+	get _isApple() {
+		if (this.keyboard === "apple") return true;
+		if (this.keyboard === "standard") return false;
+		return isApplePlatform();
+	}
+	/** @internal */
+	get _displayLabel() {
+		/* v8 ignore if -- @preserve */
+		if (!this.name || this.name === "Custom") return "";
+		if (!SUPPORTED_KEY_NAMES_SET.has(this.name)) {
+			console.warn(`[kbd-key] Unsupported key name: "${this.name}". Nothing will be displayed.`);
+			return "";
+		}
+		if (this.name === "Mod") return this._isApple ? "⌘" : "Ctrl";
+		if (this._isApple && this.name in APPLE_DISPLAY_OVERRIDES) return APPLE_DISPLAY_OVERRIDES[this.name];
+		return KEY_DISPLAY_MAP[this.name] ?? this.name;
+	}
+	/** @internal */
+	get _ariaKeyLabel() {
+		if (!this.name || this.name === "Custom") return null;
+		if (this.name === "Mod") return this._isApple ? "Command" : null;
+		if (this._isApple && this.name in APPLE_ARIA_LABEL_OVERRIDES) return APPLE_ARIA_LABEL_OVERRIDES[this.name];
+		return KEY_ARIA_LABEL_MAP[this.name] ?? null;
+	}
+	/**
+	* Returns the aria-keyshortcuts key token for this element, or null if one
+	* cannot be determined.
+	*
+	* @internal
+	*/
+	_getKeyshortcutsKey() {
+		if (this.keyshortcutsKey !== void 0) return this.keyshortcutsKey || null;
+		if (!this.name) return null;
+		if (this.name === "Custom") return this.textContent.trim() || null;
+		if (this.name === "Mod") return this._isApple ? "Meta" : "Control";
+		return this.name;
+	}
+};
+__decorate([attr], KbdKey.prototype, "name", void 0);
+__decorate([attr], KbdKey.prototype, "keyboard", void 0);
+__decorate([attr], KbdKey.prototype, "appearance", void 0);
+__decorate([attr], KbdKey.prototype, "size", void 0);
+__decorate([attr({ attribute: "keyshortcuts-key" })], KbdKey.prototype, "keyshortcutsKey", void 0);
 //#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)]);
+//#region src/lib/kbd-key/kbd-key.template.ts
+var KbdKeyTemplate = () => {
+	return html`<kbd
+		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/layout/definition.ts
-/**
-* @internal
-*/
-var layoutDefinition = defineVividComponent("layout", Layout, html` <div class="${getClasses}">
-	<slot></slot>
-</div>`, [], { styles: layout_default });
+//#region src/lib/kbd-key/definition.ts
+/** @internal */
+var kbdKeyDefinition = defineVividComponent("kbd-key", KbdKey, KbdKeyTemplate, [], { styles: kbd_key_default });
 /**
-* Registers the layout elements with the design system.
+* Registers the kbd-key element with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerLayout = createRegisterFunction(layoutDefinition);
+var registerKbdKey = createRegisterFunction(kbdKeyDefinition);
 //#endregion
-export { registerLayout as n, Layout as r, layoutDefinition as t };
+export { registerKbdKey as n, KbdKey as r, kbdKeyDefinition as t };

package/unbundled/definition48.cjs

@@ -1,125 +1,59 @@
 require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
-const require_definition = require("./definition.cjs");
 const require_decorate = require("./decorate.cjs");
-const require_affix = require("./affix.cjs");
-const require_delegates_aria = require("./delegates-aria.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
-//#region src/lib/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}";
-//#endregion
-//#region src/lib/nav-disclosure/nav-disclosure.ts
+//#region src/lib/layout/layout.ts
 /**
+* [--layout-grid-template-columns=repeat([the `auto-sizing` mapped value],
+* minmax([the `column-basis` mapped value], 1fr))] - Controls the `grid-template-columns` of the layout.
+*
 * @public
-* @component nav-disclosure
+* @component layout
 * @slot - Default slot.
-* @slot meta - A slot to add additional content to the nav disclosure.
-* @slot icon - The preferred way to add an icon to the component.
-* @event {CustomEvent<undefined>} toggle - Event emitted when the nav disclosure is toggled.
-* @testSelector byLabel byLabel
-* @testAction expand toggleNavDisclosure true
-* @testAction collapse toggleNavDisclosure false
-* @testQuery current navCurrent true
-* @testQuery !current navCurrent false
-* @testQuery open open true
-* @testQuery closed open false
-* @testRef summary shadow summary
 */
-var NavDisclosure = class extends require_affix.AffixIcon(require_delegates_aria.DelegatesAria(require_vivid_element.VividElement)) {
-	constructor(..._args) {
-		super(..._args);
-		this.open = false;
-		this.current = false;
-		this.#onToggle = () => {
-			this.open = this.details.open;
-			this.$emit("toggle", void 0, { bubbles: false });
-		};
-	}
-	/**
-	* @internal
-	*/
-	connectedCallback() {
-		super.connectedCallback();
-		this.details.addEventListener("toggle", this.#onToggle);
-		this.details.open = this.open;
-	}
-	/**
-	* @internal
-	*/
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.details.removeEventListener("toggle", this.#onToggle);
-	}
-	#onToggle;
-};
-require_decorate.__decorate([_microsoft_fast_element.attr], NavDisclosure.prototype, "label", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], NavDisclosure.prototype, "appearance", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], NavDisclosure.prototype, "connotation", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], NavDisclosure.prototype, "open", void 0);
-require_decorate.__decorate([require_vivid_element.replaces({
-	deprecatedPropertyName: "ariaCurrent",
-	fromDeprecated: (v) => Boolean(v),
-	toDeprecated: (v) => v ? "true" : null
-}), (0, _microsoft_fast_element.attr)({
-	attribute: "current",
-	mode: "boolean"
-})], NavDisclosure.prototype, "current", void 0);
+var Layout = class extends require_vivid_element.VividElement {};
+require_decorate.__decorate([_microsoft_fast_element.attr], Layout.prototype, "gutters", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "column-basis" })], Layout.prototype, "columnBasis", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "column-spacing" })], Layout.prototype, "columnSpacing", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "row-spacing" })], Layout.prototype, "rowSpacing", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "auto-sizing" })], Layout.prototype, "autoSizing", 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}"
-			${require_delegates_aria.delegateAria({
-		role: "button",
-		ariaExpanded: (x) => x.open,
-		ariaCurrent: (x) => x.open ? null : x.current || x.ariaCurrent ? "true" : null,
-		ariaControls: "disclosure-content"
-	})}
-		>
-			${(x) => affixIconTemplate(x.icon, require_affix.IconWrapper.Slot)}
-			${(x) => x.label}
-			<slot name="meta"></slot>
-			<${iconTag} class="toggleIcon" name=${(x) => x.open ? "chevron-up-line" : "chevron-down-line"}
-				aria-hidden="true"></${iconTag}>
-		</summary>
-		<div class="content" id="disclosure-content">
-			<slot></slot>
-		</div>
-	</details>
-	`;
-};
+//#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/nav-disclosure/definition.ts
-/**
-* @internal
-*/
-var navDisclosureDefinition = require_vivid_element.defineVividComponent("nav-disclosure", NavDisclosure, NavDisclosureTemplate, [require_definition.iconDefinition], { styles: nav_disclosure_default });
+//#region src/lib/layout/layout.template.ts
+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 */
+var layoutDefinition = require_vivid_element.defineVividComponent("layout", Layout, layoutTemplate, [], { styles: layout_default });
 /**
-* Registers the nav-disclosure elements with the design system.
+* Registers the layout elements with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerNavDisclosure = require_vivid_element.createRegisterFunction(navDisclosureDefinition);
+var registerLayout = require_vivid_element.createRegisterFunction(layoutDefinition);
 //#endregion
-Object.defineProperty(exports, "NavDisclosure", {
+Object.defineProperty(exports, "Layout", {
 	enumerable: true,
 	get: function() {
-		return NavDisclosure;
+		return Layout;
 	}
 });
-Object.defineProperty(exports, "navDisclosureDefinition", {
+Object.defineProperty(exports, "layoutDefinition", {
 	enumerable: true,
 	get: function() {
-		return navDisclosureDefinition;
+		return layoutDefinition;
 	}
 });
-Object.defineProperty(exports, "registerNavDisclosure", {
+Object.defineProperty(exports, "registerLayout", {
 	enumerable: true,
 	get: function() {
-		return registerNavDisclosure;
+		return registerLayout;
 	}
 });