@vonage/vivid 5.25.0 → 5.28.0

package/unbundled/definition48.js

@@ -1,35 +1,187 @@
 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 componentEnum } from "./component-enum.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/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 = 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 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);
+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/kbd-key/kbd-key.template.ts
+var KbdKeyTemplate = () => {
+	return html`<kbd
+		class="${(x) => classNames("base", "connotation-accent", `appearance-${kbdKeyAppearance.parse(x.appearance)}`, "with-idle", [`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
+//#region src/lib/kbd-key/definition.ts
 /** @internal */
-var layoutDefinition = defineVividComponent("layout", Layout, html` <div
-	class="${(x) => classNames("control", [`column-basis-${x.columnBasis}`, Boolean(x.columnBasis)], [`gutters-${x.gutters}`, Boolean(x.gutters)], [`column-spacing-${x.columnSpacing}`, Boolean(x.columnSpacing)], [`row-spacing-${x.rowSpacing ? x.rowSpacing : x.columnSpacing}`, Boolean(x.rowSpacing) || Boolean(x.columnSpacing)], [`auto-sizing-${x.autoSizing}`, Boolean(x.autoSizing)])}"
->
-	<slot></slot>
-</div>`, [], { styles: ".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 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 };