@vonage/vivid 5.24.0 → 5.27.0

package/unbundled/definition47.js

@@ -1,181 +1,57 @@
 import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
-import { t as __decorate } from "./decorate.js";
-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/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}";
+import { html } from "@microsoft/fast-element";
+//#region src/lib/kbd-shortcut/kbd-shortcut.scss?inline
+var kbd_shortcut_default = ":host{display:inline-block}.base{white-space:nowrap;align-items:center;gap:.3em;display:inline-flex}";
 //#endregion
-//#region src/lib/kbd-key/kbd-key.ts
-var SUPPORTED_KEY_NAMES_SET = new Set([
-	"Alt",
+//#region src/lib/kbd-shortcut/kbd-shortcut.ts
+/** Modifier key names in aria-keyshortcuts. */
+var MODIFIER_NAMES = /* @__PURE__ */ new Set([
 	"Control",
+	"Alt",
 	"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"
+	"Meta"
 ]);
 /**
-* 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"
-};
-/**
 * @public
-* @component kbd-key
-* @slot - Default slot for custom content (used when name is "Custom").
+* @component kbd-shortcut
+* @slot - Default slot for Kbd elements.
 */
-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;
-	}
+var KbdShortcut = class extends VividElement {
 	/**
-	* Returns the aria-keyshortcuts key token for this element, or null if one
-	* cannot be determined.
-	*
-	* @internal
+	* Returns a valid aria-keyshortcuts value based on the slotted kbd-key elements.
+	* Modifiers are sorted to be first as required by the spec.
+	* Returns null if no keys are available.
 	*/
-	_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;
+	getKeyshortcutsValue() {
+		const keys = Array.from(this.children).filter((el) => typeof el._getKeyshortcutsKey === "function");
+		if (keys.length === 0) return null;
+		const names = [];
+		for (const key of keys) {
+			const name = key._getKeyshortcutsKey();
+			if (name !== null) names.push(name);
+		}
+		if (names.length === 0) return null;
+		const modifiers = names.filter((n) => MODIFIER_NAMES.has(n));
+		const nonModifiers = names.filter((n) => !MODIFIER_NAMES.has(n));
+		return [...modifiers, ...nonModifiers].join("+");
 	}
 };
-__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/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
-	>`;
+//#region src/lib/kbd-shortcut/kbd-shortcut.template.ts
+var KbdShortcutTemplate = () => {
+	return html`<span class="base" role="group"
+		><slot></slot
+	></span>`;
 };
 //#endregion
-//#region src/lib/kbd-key/definition.ts
+//#region src/lib/kbd-shortcut/definition.ts
 /** @internal */
-var kbdKeyDefinition = defineVividComponent("kbd-key", KbdKey, KbdKeyTemplate, [], { styles: kbd_key_default });
+var kbdShortcutDefinition = defineVividComponent("kbd-shortcut", KbdShortcut, KbdShortcutTemplate, [], { styles: kbd_shortcut_default });
 /**
-* Registers the kbd-key element with the design system.
+* Registers the kbd-shortcut element with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerKbdKey = createRegisterFunction(kbdKeyDefinition);
+var registerKbdShortcut = createRegisterFunction(kbdShortcutDefinition);
 //#endregion
-export { registerKbdKey as n, KbdKey as r, kbdKeyDefinition as t };
+export { registerKbdShortcut as n, KbdShortcut as r, kbdShortcutDefinition as t };

package/unbundled/definition48.cjs

@@ -1,59 +1,204 @@
-require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_decorate = require("./decorate.cjs");
+const require_component_enum = require("./component-enum.cjs");
+const require_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{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 = /* @__PURE__ */ 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"
+};
+var kbdKeyAppearance = require_component_enum.componentEnum([
+	"outlined",
+	"subtle",
+	"dropshadow"
+], "outlined");
 /**
-* [--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 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>`;
+//#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", "connotation-accent", `appearance-${kbdKeyAppearance.parse(x.appearance)}`, "with-idle", [`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
+//#region src/lib/kbd-key/definition.ts
 /** @internal */
-var layoutDefinition = require_vivid_element.defineVividComponent("layout", Layout, layoutTemplate, [], { styles: layout_default });
+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;
 	}
 });