@vonage/vivid 5.25.0 → 5.28.0

package/unbundled/definition45.js

@@ -1,65 +1,87 @@
 import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } 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 "./definition7.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)))}";
-//#endregion
-//#region src/lib/header/header.ts
+import { n as feedbackMessageDefinition, t as FeedbackMessage } from "./feedback-message.js";
+import { attr, html, observable, slotted } from "@microsoft/fast-element";
+//#region src/lib/form-field/form-field.ts
 /**
 * @public
-* @component header
-* @slot - Default slot.
-* @slot action-items - Nodes assigned to the `action-items` slot will be set at the end of the Header.
-* @slot app-content - Content vertically aligned with the Header.
+* @component form-field
+* @slot - The field's control(s).
+* @slot label - The field's label.
+* @slot contextual-help - Contextual help, displayed next to the label.
+* @slot accessory - Generic slot rendered at the end of the label row, opposite the label. Typically used for a character counter or similar meta info.
+* @slot message - A description, error or success message for the field.
 */
-var Header = class extends DelegatesAria(VividElement) {
-	constructor(..._args) {
-		super(..._args);
-		this.elevationShadow = false;
-		this.alternate = false;
+var FormField = class extends VividElement {
+	/** @internal */
+	get _hasLabelRow() {
+		const labelLength = this._labelSlottedContent?.length ?? 0;
+		const contextualHelpLength = this._contextualHelpSlottedContent?.length ?? 0;
+		const accessoryLength = this._accessorySlottedContent?.length ?? 0;
+		return labelLength + contextualHelpLength + accessoryLength > 0;
+	}
+	/** @internal */
+	get _hasAccessory() {
+		return Boolean(this._accessorySlottedContent?.length);
+	}
+	/** @internal */
+	_getMessageType() {
+		const state = this.state;
+		if (!this._messageSlottedContent?.length) return "none";
+		return state ?? "helper";
 	}
 };
-__decorate([attr({
-	attribute: "elevation-shadow",
-	mode: "boolean"
-})], Header.prototype, "elevationShadow", void 0);
-__decorate([attr({ mode: "boolean" })], Header.prototype, "alternate", void 0);
+__decorate([attr], FormField.prototype, "state", void 0);
+__decorate([observable], FormField.prototype, "_labelSlottedContent", void 0);
+__decorate([observable], FormField.prototype, "_contextualHelpSlottedContent", void 0);
+__decorate([observable], FormField.prototype, "_accessorySlottedContent", void 0);
+__decorate([observable], FormField.prototype, "_messageSlottedContent", void 0);
+//#endregion
+//#region src/lib/form-field/form-field.scss?inline
+var form_field_default = ":host{display:inline-block}.base{overflow-wrap:anywhere;grid-template-columns:100%;gap:4px;display:grid}.label-row:not([hidden]){justify-content:space-between;align-items:baseline;gap:8px;display:flex}.label-group{align-items:center;gap:4px;display:inline-flex}slot[name=label]{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.accessory{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.message{font:var(--vvd-typography-base-condensed)}";
 //#endregion
-//#region src/lib/header/header.template.ts
-var headerTemplate = (context) => {
-	const elevationTag = context.tagFor(Elevation);
+//#region src/lib/form-field/form-field.template.ts
+var FormFieldTemplate = (context) => {
+	const feedbackTag = context.tagFor(FeedbackMessage);
 	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="${(x) => classNames("container", ["vvd-theme-alternate", x.alternate])}">
-          <section class="header-content" part="main">
-            <slot></slot>
-          </section>
-          <section class="header-content" part="action-items">
-            <slot name="action-items"></slot>
-          </section>
-        </div>
-      </header>
-    </${elevationTag}>
-    <div class="app-content">
-      <slot name="app-content"></slot>
-    </div>
+		<div class="base">
+			<div class="label-row" ?hidden="${(x) => !x._hasLabelRow}">
+				<span class="label-group">
+					<slot
+						name="label"
+						${slotted("_labelSlottedContent")}
+					></slot>
+					<slot
+						name="contextual-help"
+						${slotted("_contextualHelpSlottedContent")}
+					></slot>
+				</span>
+				<span class="accessory" ?hidden="${(x) => !x._hasAccessory}">
+					<slot
+						name="accessory"
+						${slotted("_accessorySlottedContent")}
+					></slot>
+				</span>
+			</div>
+			<slot></slot>
+			<${feedbackTag} class="message" :type="${(x) => x._getMessageType()}">
+				<slot
+					name="message"
+					${slotted("_messageSlottedContent")}
+				></slot>
+			</${feedbackTag}>
+		</div>
 	`;
 };
 //#endregion
-//#region src/lib/header/definition.ts
+//#region src/lib/form-field/definition.ts
 /** @internal */
-var headerDefinition = defineVividComponent("header", Header, headerTemplate, [elevationDefinition], { styles: header_default });
+var formFieldDefinition = defineVividComponent("form-field", FormField, FormFieldTemplate, [feedbackMessageDefinition], { styles: form_field_default });
 /**
-* Registers the header elements with the design system.
+* Registers the form-field elements with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerHeader = createRegisterFunction(headerDefinition);
+var registerFormField = createRegisterFunction(formFieldDefinition);
 //#endregion
-export { registerHeader as n, Header as r, headerDefinition as t };
+export { registerFormField as n, FormField as r, formFieldDefinition as t };

package/unbundled/definition46.cjs

@@ -1,75 +1,82 @@
-require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
+const require_decorate = require("./decorate.cjs");
+const require_delegates_aria = require("./delegates-aria.cjs");
+const require_definition = require("./definition7.cjs");
 let _microsoft_fast_element = require("@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}";
+let _microsoft_fast_web_utilities = require("@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)))}";
 //#endregion
-//#region src/lib/kbd-shortcut/kbd-shortcut.ts
-/** Modifier key names in aria-keyshortcuts. */
-var MODIFIER_NAMES = new Set([
-	"Control",
-	"Alt",
-	"Shift",
-	"Meta"
-]);
+//#region src/lib/header/header.ts
 /**
 * @public
-* @component kbd-shortcut
-* @slot - Default slot for Kbd elements.
+* @component header
+* @slot - Default slot.
+* @slot action-items - Nodes assigned to the `action-items` slot will be set at the end of the Header.
+* @slot app-content - Content vertically aligned with the Header.
 */
-var KbdShortcut = class extends require_vivid_element.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("+");
+var Header = class extends require_delegates_aria.DelegatesAria(require_vivid_element.VividElement) {
+	constructor(..._args) {
+		super(..._args);
+		this.elevationShadow = false;
+		this.alternate = false;
 	}
 };
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+	attribute: "elevation-shadow",
+	mode: "boolean"
+})], Header.prototype, "elevationShadow", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Header.prototype, "alternate", void 0);
 //#endregion
-//#region src/lib/kbd-shortcut/kbd-shortcut.template.ts
-var KbdShortcutTemplate = () => {
-	return _microsoft_fast_element.html`<span class="base" role="group"
-		><slot></slot
-	></span>`;
+//#region src/lib/header/header.template.ts
+var headerTemplate = (context) => {
+	const elevationTag = context.tagFor(require_definition.Elevation);
+	return _microsoft_fast_element.html`
+    <${elevationTag} dp="4" ?no-shadow=${(x) => !x.elevationShadow}>
+      <header class="base" part="base" ${require_delegates_aria.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="${(x) => (0, _microsoft_fast_web_utilities.classNames)("container", ["vvd-theme-alternate", x.alternate])}">
+          <section class="header-content" part="main">
+            <slot></slot>
+          </section>
+          <section class="header-content" part="action-items">
+            <slot name="action-items"></slot>
+          </section>
+        </div>
+      </header>
+    </${elevationTag}>
+    <div class="app-content">
+      <slot name="app-content"></slot>
+    </div>
+	`;
 };
 //#endregion
-//#region src/lib/kbd-shortcut/definition.ts
+//#region src/lib/header/definition.ts
 /** @internal */
-var kbdShortcutDefinition = require_vivid_element.defineVividComponent("kbd-shortcut", KbdShortcut, KbdShortcutTemplate, [], { styles: kbd_shortcut_default });
+var headerDefinition = require_vivid_element.defineVividComponent("header", Header, headerTemplate, [require_definition.elevationDefinition], { styles: header_default });
 /**
-* Registers the kbd-shortcut element with the design system.
+* Registers the header elements with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerKbdShortcut = require_vivid_element.createRegisterFunction(kbdShortcutDefinition);
+var registerHeader = require_vivid_element.createRegisterFunction(headerDefinition);
 //#endregion
-Object.defineProperty(exports, "KbdShortcut", {
+Object.defineProperty(exports, "Header", {
 	enumerable: true,
 	get: function() {
-		return KbdShortcut;
+		return Header;
 	}
 });
-Object.defineProperty(exports, "kbdShortcutDefinition", {
+Object.defineProperty(exports, "headerDefinition", {
 	enumerable: true,
 	get: function() {
-		return kbdShortcutDefinition;
+		return headerDefinition;
 	}
 });
-Object.defineProperty(exports, "registerKbdShortcut", {
+Object.defineProperty(exports, "registerHeader", {
 	enumerable: true,
 	get: function() {
-		return registerKbdShortcut;
+		return registerHeader;
 	}
 });

package/unbundled/definition46.js

@@ -1,57 +1,65 @@
 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}";
+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 "./definition7.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)))}";
 //#endregion
-//#region src/lib/kbd-shortcut/kbd-shortcut.ts
-/** Modifier key names in aria-keyshortcuts. */
-var MODIFIER_NAMES = new Set([
-	"Control",
-	"Alt",
-	"Shift",
-	"Meta"
-]);
+//#region src/lib/header/header.ts
 /**
 * @public
-* @component kbd-shortcut
-* @slot - Default slot for Kbd elements.
+* @component header
+* @slot - Default slot.
+* @slot action-items - Nodes assigned to the `action-items` slot will be set at the end of the Header.
+* @slot app-content - Content vertically aligned with the Header.
 */
-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("+");
+var Header = class extends DelegatesAria(VividElement) {
+	constructor(..._args) {
+		super(..._args);
+		this.elevationShadow = false;
+		this.alternate = false;
 	}
 };
+__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/kbd-shortcut/kbd-shortcut.template.ts
-var KbdShortcutTemplate = () => {
-	return html`<span class="base" role="group"
-		><slot></slot
-	></span>`;
+//#region src/lib/header/header.template.ts
+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="${(x) => classNames("container", ["vvd-theme-alternate", x.alternate])}">
+          <section class="header-content" part="main">
+            <slot></slot>
+          </section>
+          <section class="header-content" part="action-items">
+            <slot name="action-items"></slot>
+          </section>
+        </div>
+      </header>
+    </${elevationTag}>
+    <div class="app-content">
+      <slot name="app-content"></slot>
+    </div>
+	`;
 };
 //#endregion
-//#region src/lib/kbd-shortcut/definition.ts
+//#region src/lib/header/definition.ts
 /** @internal */
-var kbdShortcutDefinition = defineVividComponent("kbd-shortcut", KbdShortcut, KbdShortcutTemplate, [], { styles: kbd_shortcut_default });
+var headerDefinition = defineVividComponent("header", Header, headerTemplate, [elevationDefinition], { styles: header_default });
 /**
-* Registers the kbd-shortcut element with the design system.
+* Registers the header elements with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerKbdShortcut = createRegisterFunction(kbdShortcutDefinition);
+var registerHeader = createRegisterFunction(headerDefinition);
 //#endregion
-export { registerKbdShortcut as n, KbdShortcut as r, kbdShortcutDefinition as t };
+export { registerHeader as n, Header as r, headerDefinition as t };

package/unbundled/definition47.cjs

@@ -1,199 +1,74 @@
-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/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}";
+//#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 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;
-	}
+var KbdShortcut = class extends require_vivid_element.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("+");
 	}
 };
-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/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
-	>`;
+//#region src/lib/kbd-shortcut/kbd-shortcut.template.ts
+var KbdShortcutTemplate = () => {
+	return _microsoft_fast_element.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 = require_vivid_element.defineVividComponent("kbd-key", KbdKey, KbdKeyTemplate, [], { styles: kbd_key_default });
+var kbdShortcutDefinition = require_vivid_element.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 = require_vivid_element.createRegisterFunction(kbdKeyDefinition);
+var registerKbdShortcut = require_vivid_element.createRegisterFunction(kbdShortcutDefinition);
 //#endregion
-Object.defineProperty(exports, "KbdKey", {
+Object.defineProperty(exports, "KbdShortcut", {
 	enumerable: true,
 	get: function() {
-		return KbdKey;
+		return KbdShortcut;
 	}
 });
-Object.defineProperty(exports, "kbdKeyDefinition", {
+Object.defineProperty(exports, "kbdShortcutDefinition", {
 	enumerable: true,
 	get: function() {
-		return kbdKeyDefinition;
+		return kbdShortcutDefinition;
 	}
 });
-Object.defineProperty(exports, "registerKbdKey", {
+Object.defineProperty(exports, "registerKbdShortcut", {
 	enumerable: true,
 	get: function() {
-		return registerKbdKey;
+		return registerKbdShortcut;
 	}
 });