@vonage/vivid 5.18.0 → 5.20.0

package/unbundled/definition45.js

@@ -1,68 +1,59 @@
-import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
-import { t as __decorate } from "./decorate.js";
-import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
-import { r as Elevation, t as elevationDefinition } from "./definition8.js";
-import { attr, html } from "@microsoft/fast-element";
-import { classNames } from "@microsoft/fast-web-utilities";
-//#region src/lib/header/header.scss?inline
-var header_default = ".base{z-index:1;block-size: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)));font:var(--vvd-typography-heading-4);inline-size:100%}.base .header-content{align-items:center;column-gap:4px;display:inline-flex}.container{box-sizing:border-box;background-color:var(--header-bg-color,var(--vvd-color-canvas));block-size:inherit;color:var(--vvd-color-canvas-text);justify-content:space-between;column-gap:12px;padding-block:8px;padding-inline:16px;display:flex}.container[part~=vvd-theme-alternate]{color-scheme:var(--vvd-color-scheme)}.app-content{--vvd-header-block-size: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)))}";
+import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
+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/header/header.ts
+//#region src/lib/kbd-shortcut/kbd-shortcut.ts
+/** Modifier key names in aria-keyshortcuts. */
+var MODIFIER_NAMES = new Set([
+	"Control",
+	"Alt",
+	"Shift",
+	"Meta"
+]);
 /**
 * @public
-* @component header
-* @slot - Default slot.
-* @slot action-items - Nodes assigned to action-items slot will be set at the end of the header.
-* @slot app-content - Content vertically aligned with header.
+* @component kbd-shortcut
+* @slot - Default slot for Kbd elements.
 */
-var Header = class extends DelegatesAria(VividElement) {
-	constructor(..._args) {
-		super(..._args);
-		this.elevationShadow = false;
-		this.alternate = false;
+var KbdShortcut = class extends VividElement {
+	/**
+	* 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.
+	*/
+	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({
-	attribute: "elevation-shadow",
-	mode: "boolean"
-})], Header.prototype, "elevationShadow", void 0);
-__decorate([attr({ mode: "boolean" })], Header.prototype, "alternate", void 0);
 //#endregion
-//#region src/lib/header/header.template.ts
-var getPartAlternate = ({ alternate }) => classNames(["vvd-theme-alternate", Boolean(alternate)]);
-var headerTemplate = (context) => {
-	const elevationTag = context.tagFor(Elevation);
-	return html`
-    <${elevationTag} dp="4" ?no-shadow=${(x) => !x.elevationShadow}>
-      <header class="base" part="base" ${delegateAria()}>
-        <!-- a container is needed to distinguish the surface background color of the
-        element from its shadow when applying elevation with alternate -->
-        <div class="container" part="${getPartAlternate}">
-          <section class="header-content">
-            <slot></slot>
-          </section>
-          <section class="header-content">
-            <slot name="action-items"></slot>
-          </section>
-        </div>
-      </header>
-    </${elevationTag}>
-    <div class="app-content">
-      <slot name="app-content"></slot>
-    </div>
-	`;
+//#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/header/definition.ts
+//#region src/lib/kbd-shortcut/definition.ts
 /**
 * @internal
 */
-var headerDefinition = defineVividComponent("header", Header, headerTemplate, [elevationDefinition], { styles: header_default });
+var kbdShortcutDefinition = defineVividComponent("kbd-shortcut", KbdShortcut, KbdShortcutTemplate, [], { styles: kbd_shortcut_default });
 /**
-* Registers the header elements with the design system.
+* Registers the kbd-shortcut element with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerHeader = createRegisterFunction(headerDefinition);
+var registerKbdShortcut = createRegisterFunction(kbdShortcutDefinition);
 //#endregion
-export { registerHeader as n, Header as r, headerDefinition as t };
+export { registerKbdShortcut as n, KbdShortcut as r, kbdShortcutDefinition as t };

package/unbundled/definition46.cjs

@@ -1,60 +1,208 @@
 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 getClasses = ({ appearance, size }) => (0, _microsoft_fast_web_utilities.classNames)("base", [`appearance-${appearance}`, Boolean(appearance)], [`size-${size}`, Boolean(size)]);
+var KbdKeyTemplate = () => {
+	return _microsoft_fast_element.html`<kbd
+		class="${getClasses}"
+		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;
 	}
 });

package/unbundled/definition46.js

@@ -1,41 +1,190 @@
-import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
-import { 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 getClasses = ({ appearance, size }) => classNames("base", [`appearance-${appearance}`, Boolean(appearance)], [`size-${size}`, Boolean(size)]);
+var KbdKeyTemplate = () => {
+	return html`<kbd
+		class="${getClasses}"
+		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
+//#region src/lib/kbd-key/definition.ts
 /**
 * @internal
 */
-var layoutDefinition = defineVividComponent("layout", Layout, html` <div class="${getClasses}">
-	<slot></slot>
-</div>`, [], { styles: layout_default });
+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 };