@vonage/vivid 5.18.0 → 5.20.0

package/unbundled/definition28.js

@@ -1,5 +1,5 @@
-import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
-import { r as Icon, t as iconDefinition } from "./definition2.js";
+import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
+import { r as Icon, t as iconDefinition } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
 import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
 import { t as WithSuccessText } from "./with-success-text.js";
@@ -9,7 +9,7 @@ import { t as TrappedFocus } from "./trapped-focus.js";
 import { i as Button, t as buttonDefinition } from "./definition7.js";
 import { t as handleEscapeKeyAndStopPropogation } from "./dialog.js";
 import { i as Popup, t as popupDefinition } from "./definition10.js";
-import { a as feedbackMessageDefinition, t as WithFeedback } from "./mixins.js";
+import { r as feedbackMessageDefinition, t as WithFeedback } from "./mixins.js";
 import { n as textFieldDefinition, r as TextField } from "./definition26.js";
 import { n as tooltipDefinition, r as Tooltip } from "./definition27.js";
 import { n as isValidHexColor, t as BaseColorPicker } from "./base-color-picker.js";
@@ -55,7 +55,12 @@ var ColorPicker = class extends WithContextualHelp(WithFeedback(WithErrorText(Wi
 		this.disableSavedColors = false;
 		this.savedColors = [];
 		this.maxSwatches = 6;
+		this.#closeOnPointerOutside = (e) => {
+			if (this._isInPath(e, this._buttonEl) || this._isInPath(e, this._popupEl)) return;
+			this.open = false;
+		};
 		this.copyIconName = "copy-2-line";
+		this.#iconResetTimer = null;
 		this._copyValueToClipboard = async (value) => {
 			try {
 				await navigator.clipboard.writeText(value);
@@ -204,7 +209,8 @@ var ColorPicker = class extends WithContextualHelp(WithFeedback(WithErrorText(Wi
 	* @internal
 	*/
 	_onTextFieldInput(event) {
-		this.value = event.currentTarget.value;
+		const textField = event.currentTarget;
+		this.value = textField.value;
 	}
 	/**
 	* @internal
@@ -238,10 +244,7 @@ var ColorPicker = class extends WithContextualHelp(WithFeedback(WithErrorText(Wi
 	/**
 	* @internal
 	*/
-	#closeOnPointerOutside = (e) => {
-		if (this._isInPath(e, this._buttonEl) || this._isInPath(e, this._popupEl)) return;
-		this.open = false;
-	};
+	#closeOnPointerOutside;
 	connectedCallback() {
 		super.connectedCallback();
 		this.savedColors = this._loadSavedColors();
@@ -251,7 +254,7 @@ var ColorPicker = class extends WithContextualHelp(WithFeedback(WithErrorText(Wi
 		super.disconnectedCallback();
 		document.removeEventListener("mousedown", this.#closeOnPointerOutside, true);
 	}
-	#iconResetTimer = null;
+	#iconResetTimer;
 	/**
 	* @internal
 	*/

package/unbundled/definition29.cjs

@@ -1,6 +1,6 @@
 require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
-const require_definition = require("./definition2.cjs");
+const require_definition = require("./definition.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_affix = require("./affix.cjs");
 const require_host_semantics = require("./host-semantics.cjs");

package/unbundled/definition29.js

@@ -1,5 +1,5 @@
-import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
-import { r as Icon, t as iconDefinition } from "./definition2.js";
+import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
+import { r as Icon, t as iconDefinition } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
 import { a as affixIconTemplateFactory, i as IconWrapper, n as AffixIconWithTrailing } from "./affix.js";
 import { n as applyHostSemantics, t as HostSemantics } from "./host-semantics.js";

package/unbundled/definition3.cjs

@@ -1,136 +1,195 @@
 require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
-const require_definition = require("./definition2.cjs");
 const require_decorate = require("./decorate.cjs");
-const require_affix = require("./affix.cjs");
+const require_definition = require("./definition2.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
-//#region src/lib/accordion-item/accordion-item.scss?inline
-var accordion_item_default = ":host{--_vvd-accordion-item-accent-firm-wrapper:var(--vvd-accordion-item-accent-firm)}.heading-button{--vvd-accordion-item-accent-firm:var(--_vvd-accordion-item-accent-firm-wrapper,var(--vvd-accordion-item-accent-primary))}:host{box-sizing:border-box;flex-direction:column;display:flex}.heading-container{margin:0}.heading-button,.heading-button.appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.heading-button.appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}@media (hover:hover){.heading-button:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.heading-button:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:transparent}.heading-button:hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:transparent}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}.heading-button:active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.heading-button:active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:transparent}.heading-button:active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-fierce);--_appearance-color-outline:transparent}.heading-button.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.heading-button.active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:transparent}.heading-button.active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-fierce);--_appearance-color-outline:transparent}.heading-button{--_connotation-color-primary:var(--vvd-accordion-item-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-accordion-item-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-accordion-item-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-accordion-item-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-faint:var(--vvd-accordion-item-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-accordion-item-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-firm:var(--vvd-accordion-item-accent-firm,var(--vvd-color-canvas-text));--focus-stroke-gap-color:transparent;background-color:var(--_appearance-color-fill);width:100%;color:var(--_appearance-color-text);cursor:pointer;text-align:left;border:none;align-items:center;padding:16px;display:flex}.heading-button:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.heading-button.size-condensed{font:var(--vvd-typography-base-extended-bold);gap:12px}.heading-button:not(.size-condensed){font:var(--vvd-typography-heading-4);gap:16px}.heading-content{flex:auto}.meta{max-width:var(--accordion-item-meta-inline-size,20%);color:var(--vvd-color-neutral-600);text-align:end;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;overflow:hidden}.heading-button:not(.size-condensed) .meta{font:var(--vvd-typography-base-bold)}.heading-button.size-condensed .meta{font:var(--vvd-typography-base-condensed-bold)}.region{padding:8px 32px 24px 16px;display:none}.region:not(.size-condensed).padded{padding-inline-start:52px}:host([expanded]) .region{display:block}.region.size-condensed.padded{padding-inline-start:44px}slot[name=icon]{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) slot[name=icon]{font:inherit}.heading-button.size-condensed slot[name=icon]{font:var(--vvd-typography-base-extended)}:host(:not([icon-trailing])) slot[name=icon]:last-of-type{color:var(--_appearance-color-text)}";
+//#region src/lib/accordion/accordion.scss?inline
+var accordion_default = ".base{box-sizing:border-box;flex-direction:column;display:flex}::slotted(:not(:only-of-type)){border-bottom:1px solid var(--vvd-color-neutral-200)}";
 //#endregion
-//#region src/lib/accordion-item/accordion-item.ts
+//#region src/lib/accordion/accordion.ts
 /**
+* Expand mode for {@link Accordion}
 * @public
-* @component accordion-item
+*/
+var AccordionExpandMode$1 = {
+	/**
+	* Designates only a single AccordionItem can be open a time.
+	*/
+	single: "single",
+	/**
+	* Designates multiple AccordionItems can be open simultaneously.
+	*/
+	multi: "multi"
+};
+/**
+* @public
+* @component accordion
+* @event {CustomEvent<string | null>} change - Fires a custom 'change' event when the active item changes
 * @slot - Default slot.
-* @slot icon - The preferred way to add an icon to the component.
-* @slot meta - Used to add additional content to the heading.
-* @slot heading - Used to add content to the heading.
-* @event {CustomEvent<undefined>} change - Fires a custom 'change' event when the button is invoked
-* @testSelector byHeading byHeading
-* @testAction expand toggleAccordionItem true
-* @testAction collapse toggleAccordionItem false
-* @testQuery expanded expanded true
-* @testQuery collapsed expanded false
-* @testRef button shadow .heading-button
 */
-var AccordionItem = class extends require_affix.AffixIconWithTrailing(require_vivid_element.VividElement) {
+var Accordion = class extends require_vivid_element.VividElement {
 	constructor(..._args) {
 		super(..._args);
-		this.headinglevel = 2;
-		this.expanded = false;
-		this.noIndicator = false;
-		this.clickHandler = () => {
-			this.expanded = !this.expanded;
+		this.expandmode = AccordionExpandMode$1.single;
+		this.activeItemIndex = 0;
+		this.change = () => {
+			this.$emit("change", this.activeid);
+		};
+		this.setItems = () => {
+			if (this.accordionItems.length === 0) return;
+			this.accordionIds = this.getItemIds();
+			this.activeid = this.accordionIds[this.activeItemIndex];
+			this.accordionItems.forEach((item, index) => {
+				/* v8 ignore else -- @preserve */
+				if (item instanceof require_definition.AccordionItem) {
+					item.addEventListener("change", this.activeItemChange);
+					/* v8 ignore else -- @preserve */
+					if (this.isSingleExpandMode()) if (this.findExpandedItem() === null && index === 0) item.expanded = true;
+					else item !== this.findExpandedItem() ? item.expanded = false : item.expanded = true;
+				}
+				const itemId = this.accordionIds[index];
+				item.setAttribute("id", typeof itemId !== "string" ? `accordion-${index + 1}` : itemId);
+				item.addEventListener("keydown", this.handleItemKeyDown);
+			});
+			/* v8 ignore else -- @preserve */
+			if (this.isSingleExpandMode()) (this.findExpandedItem() ?? this.accordionItems[0]).setAttribute("aria-disabled", "true");
+		};
+		this.removeItemListeners = (oldValue) => {
+			oldValue.forEach((item) => {
+				item.removeEventListener("change", this.activeItemChange);
+				item.removeEventListener("keydown", this.handleItemKeyDown);
+			});
+		};
+		this.activeItemChange = (event) => {
+			if (event.defaultPrevented || event.target !== event.currentTarget) return;
+			event.preventDefault();
+			const selectedItem = event.target;
+			this.activeid = selectedItem.getAttribute("id");
+			if (this.isSingleExpandMode()) {
+				this.resetItems();
+				selectedItem.expanded = true;
+				selectedItem.setAttribute("aria-disabled", "true");
+				this.accordionItems.forEach((item) => {
+					if (!item.hasAttribute("disabled") && item.id !== this.activeid) item.removeAttribute("aria-disabled");
+				});
+			}
+			this.activeItemIndex = Array.from(this.accordionItems).indexOf(selectedItem);
 			this.change();
 		};
-		this.change = () => {
-			this.$emit("change");
+		this.handleItemKeyDown = (event) => {
+			if (event.target !== event.currentTarget) return;
+			this.accordionIds = this.getItemIds();
+			switch (event.key) {
+				case _microsoft_fast_web_utilities.keyArrowUp:
+					event.preventDefault();
+					this.adjust(event.target, -1);
+					break;
+				case _microsoft_fast_web_utilities.keyArrowDown:
+					event.preventDefault();
+					this.adjust(event.target, 1);
+					break;
+				case _microsoft_fast_web_utilities.keyHome:
+					this.focusItem(0);
+					break;
+				case _microsoft_fast_web_utilities.keyEnd:
+					this.focusItem(this.accordionItems.length - 1);
+					break;
+			}
 		};
 	}
+	/**
+	* @internal
+	*/
+	accordionItemsChanged(oldValue) {
+		if (this.$fastController.isConnected) {
+			this.removeItemListeners(oldValue);
+			this.setItems();
+		}
+	}
+	findExpandedItem() {
+		for (let item = 0; item < this.accordionItems.length; item++) if (this.accordionItems[item].hasAttribute("expanded") === true) return this.accordionItems[item];
+		return null;
+	}
+	resetItems() {
+		this.accordionItems.forEach((item) => {
+			item.expanded = false;
+		});
+	}
+	getItemIds() {
+		return this.accordionItems.map((accordionItem) => {
+			return accordionItem.getAttribute("id");
+		});
+	}
+	isSingleExpandMode() {
+		return this.expandmode !== AccordionExpandMode$1.multi;
+	}
+	adjust(item, adjustment) {
+		this.focusItem((0, _microsoft_fast_web_utilities.wrapInBounds)(0, this.accordionItems.length - 1, this.accordionItems.indexOf(item) + adjustment));
+	}
+	focusItem(index) {
+		const element = this.accordionItems[index];
+		/* v8 ignore else -- @preserve */
+		if (element instanceof require_definition.AccordionItem) element.expandbutton.focus();
+	}
+	closeAll() {
+		/* v8 ignore else -- @preserve */
+		if (this.expandmode === AccordionExpandMode$1.multi) this.accordionItems.forEach((item) => {
+			item.expanded = false;
+		});
+	}
 };
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
-	attribute: "heading-level",
-	mode: "fromView",
-	converter: _microsoft_fast_element.nullableNumberConverter
-})], AccordionItem.prototype, "headinglevel", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], AccordionItem.prototype, "appearance", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], AccordionItem.prototype, "expanded", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], AccordionItem.prototype, "id", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], AccordionItem.prototype, "heading", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], AccordionItem.prototype, "_headingSlottedContent", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
-	mode: "boolean",
-	attribute: "no-indicator"
-})], AccordionItem.prototype, "noIndicator", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], AccordionItem.prototype, "meta", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], AccordionItem.prototype, "_metaSlottedContent", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], AccordionItem.prototype, "size", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "expand-mode" })], Accordion.prototype, "expandmode", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Accordion.prototype, "accordionItems", void 0);
 //#endregion
-//#region src/lib/accordion-item/accordion-item.template.ts
-var getClasses = ({ appearance, size }) => (0, _microsoft_fast_web_utilities.classNames)("heading-button", [`appearance-${appearance}`, Boolean(appearance)], [`size-${size}`, Boolean(size)]);
-var header = (context, hTagName) => {
-	const affixIconTemplate = require_affix.affixIconTemplateFactory(context);
-	const hTag = _microsoft_fast_element.html.partial(hTagName);
-	return _microsoft_fast_element.html`
-		<${hTag} class="heading-container">
-			<button
-				class="${getClasses}"
-				id="${(x) => x.id}"
-				aria-expanded="${(x) => x.expanded}"
-				aria-controls="${(x) => x.id}-panel"
-				@click="${(x) => x.clickHandler()}"
-				${(0, _microsoft_fast_element.ref)("expandbutton")}
-			>
-
-				${(x) => !x.iconTrailing ? affixIconTemplate(x.icon, require_affix.IconWrapper.Slot) : null}
-
-				<span class="heading-content">
-					<slot name="heading" ${(0, _microsoft_fast_element.slotted)("_headingSlottedContent")}></slot>
-					${(0, _microsoft_fast_element.when)((x) => x.heading && !x._headingSlottedContent?.length, _microsoft_fast_element.html`${(x) => x.heading}`)}
-				</span>
-
-				<span class="meta">
-					<slot name="meta" ${(0, _microsoft_fast_element.slotted)("_metaSlottedContent")}></slot>
-					${(0, _microsoft_fast_element.when)((x) => x.meta && !x._metaSlottedContent?.length, _microsoft_fast_element.html`${(x) => x.meta}`)}
-				</span>
-
-				${(x) => x.icon && x.iconTrailing ? affixIconTemplate(x.icon) : null}
-				${(x) => !(x.icon && x.iconTrailing) && !x.noIndicator ? affixIconTemplate(x.expanded ? "chevron-up-line" : "chevron-down-line") : null}
-
-			</button>
-		</${hTag}>
-	`;
-};
-var AccordionItemTemplate = (context) => _microsoft_fast_element.html`
-	${(x) => header(context, "h" + x.headinglevel)}
-	<div
-		id="${(x) => x.id}-panel"
-		aria-labelledby="${(x) => x.id}"
-		role="region"
-		class="region ${(x) => x.icon && !x.iconTrailing ? "padded" : ""} ${(x) => x.size ? `size-${x.size}` : ""}"
-	>
-		<slot></slot>
+//#region src/lib/accordion/accordion.template.ts
+var getClasses = (_) => (0, _microsoft_fast_web_utilities.classNames)("base");
+var AccordionTemplate = _microsoft_fast_element.html`
+	<div class="${getClasses}">
+		<slot ${(0, _microsoft_fast_element.slotted)({
+	property: "accordionItems",
+	filter: (0, _microsoft_fast_element.elements)()
+})}></slot>
 	</div>
 `;
 //#endregion
-//#region src/lib/accordion-item/definition.ts
+//#region src/lib/accordion/definition.ts
+var AccordionExpandMode = {
+	single: "single",
+	multi: "multi"
+};
 /**
 * @internal
 */
-var accordionItemDefinition = require_vivid_element.defineVividComponent("accordion-item", AccordionItem, AccordionItemTemplate, [require_definition.iconDefinition], { styles: accordion_item_default });
+var accordionDefinition = require_vivid_element.defineVividComponent("accordion", Accordion, AccordionTemplate, [require_definition.accordionItemDefinition], { styles: accordion_default });
 /**
-* Registers the accordion item elements with the design system.
+* Registers the accordion elements with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerAccordionItem = require_vivid_element.createRegisterFunction(accordionItemDefinition);
+var registerAccordion = require_vivid_element.createRegisterFunction(accordionDefinition);
 //#endregion
-Object.defineProperty(exports, "AccordionItem", {
+Object.defineProperty(exports, "Accordion", {
+	enumerable: true,
+	get: function() {
+		return Accordion;
+	}
+});
+Object.defineProperty(exports, "AccordionExpandMode", {
 	enumerable: true,
 	get: function() {
-		return AccordionItem;
+		return AccordionExpandMode;
 	}
 });
-Object.defineProperty(exports, "accordionItemDefinition", {
+Object.defineProperty(exports, "accordionDefinition", {
 	enumerable: true,
 	get: function() {
-		return accordionItemDefinition;
+		return accordionDefinition;
 	}
 });
-Object.defineProperty(exports, "registerAccordionItem", {
+Object.defineProperty(exports, "registerAccordion", {
 	enumerable: true,
 	get: function() {
-		return registerAccordionItem;
+		return registerAccordion;
 	}
 });

package/unbundled/definition3.js

@@ -1,118 +1,171 @@
-import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
-import { t as iconDefinition } from "./definition2.js";
+import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
-import { a as affixIconTemplateFactory, i as IconWrapper, n as AffixIconWithTrailing } from "./affix.js";
-import { attr, html, nullableNumberConverter, observable, ref, slotted, when } from "@microsoft/fast-element";
-import { classNames } from "@microsoft/fast-web-utilities";
-//#region src/lib/accordion-item/accordion-item.scss?inline
-var accordion_item_default = ":host{--_vvd-accordion-item-accent-firm-wrapper:var(--vvd-accordion-item-accent-firm)}.heading-button{--vvd-accordion-item-accent-firm:var(--_vvd-accordion-item-accent-firm-wrapper,var(--vvd-accordion-item-accent-primary))}:host{box-sizing:border-box;flex-direction:column;display:flex}.heading-container{margin:0}.heading-button,.heading-button.appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.heading-button.appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}@media (hover:hover){.heading-button:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.heading-button:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:transparent}.heading-button:hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:transparent}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}.heading-button:active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.heading-button:active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:transparent}.heading-button:active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-fierce);--_appearance-color-outline:transparent}.heading-button.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.heading-button.active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:transparent}.heading-button.active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-fierce);--_appearance-color-outline:transparent}.heading-button{--_connotation-color-primary:var(--vvd-accordion-item-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-accordion-item-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-accordion-item-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-accordion-item-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-faint:var(--vvd-accordion-item-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-accordion-item-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-firm:var(--vvd-accordion-item-accent-firm,var(--vvd-color-canvas-text));--focus-stroke-gap-color:transparent;background-color:var(--_appearance-color-fill);width:100%;color:var(--_appearance-color-text);cursor:pointer;text-align:left;border:none;align-items:center;padding:16px;display:flex}.heading-button:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.heading-button.size-condensed{font:var(--vvd-typography-base-extended-bold);gap:12px}.heading-button:not(.size-condensed){font:var(--vvd-typography-heading-4);gap:16px}.heading-content{flex:auto}.meta{max-width:var(--accordion-item-meta-inline-size,20%);color:var(--vvd-color-neutral-600);text-align:end;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;overflow:hidden}.heading-button:not(.size-condensed) .meta{font:var(--vvd-typography-base-bold)}.heading-button.size-condensed .meta{font:var(--vvd-typography-base-condensed-bold)}.region{padding:8px 32px 24px 16px;display:none}.region:not(.size-condensed).padded{padding-inline-start:52px}:host([expanded]) .region{display:block}.region.size-condensed.padded{padding-inline-start:44px}slot[name=icon]{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) slot[name=icon]{font:inherit}.heading-button.size-condensed slot[name=icon]{font:var(--vvd-typography-base-extended)}:host(:not([icon-trailing])) slot[name=icon]:last-of-type{color:var(--_appearance-color-text)}";
+import { r as AccordionItem, t as accordionItemDefinition } from "./definition2.js";
+import { attr, elements, html, observable, slotted } from "@microsoft/fast-element";
+import { classNames, keyArrowDown, keyArrowUp, keyEnd, keyHome, wrapInBounds } from "@microsoft/fast-web-utilities";
+//#region src/lib/accordion/accordion.scss?inline
+var accordion_default = ".base{box-sizing:border-box;flex-direction:column;display:flex}::slotted(:not(:only-of-type)){border-bottom:1px solid var(--vvd-color-neutral-200)}";
 //#endregion
-//#region src/lib/accordion-item/accordion-item.ts
+//#region src/lib/accordion/accordion.ts
 /**
+* Expand mode for {@link Accordion}
 * @public
-* @component accordion-item
+*/
+var AccordionExpandMode$1 = {
+	/**
+	* Designates only a single AccordionItem can be open a time.
+	*/
+	single: "single",
+	/**
+	* Designates multiple AccordionItems can be open simultaneously.
+	*/
+	multi: "multi"
+};
+/**
+* @public
+* @component accordion
+* @event {CustomEvent<string | null>} change - Fires a custom 'change' event when the active item changes
 * @slot - Default slot.
-* @slot icon - The preferred way to add an icon to the component.
-* @slot meta - Used to add additional content to the heading.
-* @slot heading - Used to add content to the heading.
-* @event {CustomEvent<undefined>} change - Fires a custom 'change' event when the button is invoked
-* @testSelector byHeading byHeading
-* @testAction expand toggleAccordionItem true
-* @testAction collapse toggleAccordionItem false
-* @testQuery expanded expanded true
-* @testQuery collapsed expanded false
-* @testRef button shadow .heading-button
 */
-var AccordionItem = class extends AffixIconWithTrailing(VividElement) {
+var Accordion = class extends VividElement {
 	constructor(..._args) {
 		super(..._args);
-		this.headinglevel = 2;
-		this.expanded = false;
-		this.noIndicator = false;
-		this.clickHandler = () => {
-			this.expanded = !this.expanded;
+		this.expandmode = AccordionExpandMode$1.single;
+		this.activeItemIndex = 0;
+		this.change = () => {
+			this.$emit("change", this.activeid);
+		};
+		this.setItems = () => {
+			if (this.accordionItems.length === 0) return;
+			this.accordionIds = this.getItemIds();
+			this.activeid = this.accordionIds[this.activeItemIndex];
+			this.accordionItems.forEach((item, index) => {
+				/* v8 ignore else -- @preserve */
+				if (item instanceof AccordionItem) {
+					item.addEventListener("change", this.activeItemChange);
+					/* v8 ignore else -- @preserve */
+					if (this.isSingleExpandMode()) if (this.findExpandedItem() === null && index === 0) item.expanded = true;
+					else item !== this.findExpandedItem() ? item.expanded = false : item.expanded = true;
+				}
+				const itemId = this.accordionIds[index];
+				item.setAttribute("id", typeof itemId !== "string" ? `accordion-${index + 1}` : itemId);
+				item.addEventListener("keydown", this.handleItemKeyDown);
+			});
+			/* v8 ignore else -- @preserve */
+			if (this.isSingleExpandMode()) (this.findExpandedItem() ?? this.accordionItems[0]).setAttribute("aria-disabled", "true");
+		};
+		this.removeItemListeners = (oldValue) => {
+			oldValue.forEach((item) => {
+				item.removeEventListener("change", this.activeItemChange);
+				item.removeEventListener("keydown", this.handleItemKeyDown);
+			});
+		};
+		this.activeItemChange = (event) => {
+			if (event.defaultPrevented || event.target !== event.currentTarget) return;
+			event.preventDefault();
+			const selectedItem = event.target;
+			this.activeid = selectedItem.getAttribute("id");
+			if (this.isSingleExpandMode()) {
+				this.resetItems();
+				selectedItem.expanded = true;
+				selectedItem.setAttribute("aria-disabled", "true");
+				this.accordionItems.forEach((item) => {
+					if (!item.hasAttribute("disabled") && item.id !== this.activeid) item.removeAttribute("aria-disabled");
+				});
+			}
+			this.activeItemIndex = Array.from(this.accordionItems).indexOf(selectedItem);
 			this.change();
 		};
-		this.change = () => {
-			this.$emit("change");
+		this.handleItemKeyDown = (event) => {
+			if (event.target !== event.currentTarget) return;
+			this.accordionIds = this.getItemIds();
+			switch (event.key) {
+				case keyArrowUp:
+					event.preventDefault();
+					this.adjust(event.target, -1);
+					break;
+				case keyArrowDown:
+					event.preventDefault();
+					this.adjust(event.target, 1);
+					break;
+				case keyHome:
+					this.focusItem(0);
+					break;
+				case keyEnd:
+					this.focusItem(this.accordionItems.length - 1);
+					break;
+			}
 		};
 	}
+	/**
+	* @internal
+	*/
+	accordionItemsChanged(oldValue) {
+		if (this.$fastController.isConnected) {
+			this.removeItemListeners(oldValue);
+			this.setItems();
+		}
+	}
+	findExpandedItem() {
+		for (let item = 0; item < this.accordionItems.length; item++) if (this.accordionItems[item].hasAttribute("expanded") === true) return this.accordionItems[item];
+		return null;
+	}
+	resetItems() {
+		this.accordionItems.forEach((item) => {
+			item.expanded = false;
+		});
+	}
+	getItemIds() {
+		return this.accordionItems.map((accordionItem) => {
+			return accordionItem.getAttribute("id");
+		});
+	}
+	isSingleExpandMode() {
+		return this.expandmode !== AccordionExpandMode$1.multi;
+	}
+	adjust(item, adjustment) {
+		this.focusItem(wrapInBounds(0, this.accordionItems.length - 1, this.accordionItems.indexOf(item) + adjustment));
+	}
+	focusItem(index) {
+		const element = this.accordionItems[index];
+		/* v8 ignore else -- @preserve */
+		if (element instanceof AccordionItem) element.expandbutton.focus();
+	}
+	closeAll() {
+		/* v8 ignore else -- @preserve */
+		if (this.expandmode === AccordionExpandMode$1.multi) this.accordionItems.forEach((item) => {
+			item.expanded = false;
+		});
+	}
 };
-__decorate([attr({
-	attribute: "heading-level",
-	mode: "fromView",
-	converter: nullableNumberConverter
-})], AccordionItem.prototype, "headinglevel", void 0);
-__decorate([attr], AccordionItem.prototype, "appearance", void 0);
-__decorate([attr({ mode: "boolean" })], AccordionItem.prototype, "expanded", void 0);
-__decorate([attr], AccordionItem.prototype, "id", void 0);
-__decorate([attr], AccordionItem.prototype, "heading", void 0);
-__decorate([observable], AccordionItem.prototype, "_headingSlottedContent", void 0);
-__decorate([attr({
-	mode: "boolean",
-	attribute: "no-indicator"
-})], AccordionItem.prototype, "noIndicator", void 0);
-__decorate([attr], AccordionItem.prototype, "meta", void 0);
-__decorate([observable], AccordionItem.prototype, "_metaSlottedContent", void 0);
-__decorate([attr], AccordionItem.prototype, "size", void 0);
+__decorate([attr({ attribute: "expand-mode" })], Accordion.prototype, "expandmode", void 0);
+__decorate([observable], Accordion.prototype, "accordionItems", void 0);
 //#endregion
-//#region src/lib/accordion-item/accordion-item.template.ts
-var getClasses = ({ appearance, size }) => classNames("heading-button", [`appearance-${appearance}`, Boolean(appearance)], [`size-${size}`, Boolean(size)]);
-var header = (context, hTagName) => {
-	const affixIconTemplate = affixIconTemplateFactory(context);
-	const hTag = html.partial(hTagName);
-	return html`
-		<${hTag} class="heading-container">
-			<button
-				class="${getClasses}"
-				id="${(x) => x.id}"
-				aria-expanded="${(x) => x.expanded}"
-				aria-controls="${(x) => x.id}-panel"
-				@click="${(x) => x.clickHandler()}"
-				${ref("expandbutton")}
-			>
-
-				${(x) => !x.iconTrailing ? affixIconTemplate(x.icon, IconWrapper.Slot) : null}
-
-				<span class="heading-content">
-					<slot name="heading" ${slotted("_headingSlottedContent")}></slot>
-					${when((x) => x.heading && !x._headingSlottedContent?.length, html`${(x) => x.heading}`)}
-				</span>
-
-				<span class="meta">
-					<slot name="meta" ${slotted("_metaSlottedContent")}></slot>
-					${when((x) => x.meta && !x._metaSlottedContent?.length, html`${(x) => x.meta}`)}
-				</span>
-
-				${(x) => x.icon && x.iconTrailing ? affixIconTemplate(x.icon) : null}
-				${(x) => !(x.icon && x.iconTrailing) && !x.noIndicator ? affixIconTemplate(x.expanded ? "chevron-up-line" : "chevron-down-line") : null}
-
-			</button>
-		</${hTag}>
-	`;
-};
-var AccordionItemTemplate = (context) => html`
-	${(x) => header(context, "h" + x.headinglevel)}
-	<div
-		id="${(x) => x.id}-panel"
-		aria-labelledby="${(x) => x.id}"
-		role="region"
-		class="region ${(x) => x.icon && !x.iconTrailing ? "padded" : ""} ${(x) => x.size ? `size-${x.size}` : ""}"
-	>
-		<slot></slot>
+//#region src/lib/accordion/accordion.template.ts
+var getClasses = (_) => classNames("base");
+var AccordionTemplate = html`
+	<div class="${getClasses}">
+		<slot ${slotted({
+	property: "accordionItems",
+	filter: elements()
+})}></slot>
 	</div>
 `;
 //#endregion
-//#region src/lib/accordion-item/definition.ts
+//#region src/lib/accordion/definition.ts
+var AccordionExpandMode = {
+	single: "single",
+	multi: "multi"
+};
 /**
 * @internal
 */
-var accordionItemDefinition = defineVividComponent("accordion-item", AccordionItem, AccordionItemTemplate, [iconDefinition], { styles: accordion_item_default });
+var accordionDefinition = defineVividComponent("accordion", Accordion, AccordionTemplate, [accordionItemDefinition], { styles: accordion_default });
 /**
-* Registers the accordion item elements with the design system.
+* Registers the accordion elements with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerAccordionItem = createRegisterFunction(accordionItemDefinition);
+var registerAccordion = createRegisterFunction(accordionDefinition);
 //#endregion
-export { registerAccordionItem as n, AccordionItem as r, accordionItemDefinition as t };
+export { Accordion as i, accordionDefinition as n, registerAccordion as r, AccordionExpandMode as t };