@vonage/vivid 5.19.0 → 5.20.1

package/unbundled/definition27.js

@@ -1,12 +1,14 @@
-import { c as createRegisterFunction, s as defineVividComponent, 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 { t as WithKbdShortcut } from "./kbd-shortcut.js";
 import { t as handleEscapeKeyAndStopPropogation } from "./dialog.js";
 import { i as Popup, t as popupDefinition } from "./definition10.js";
 import { n as anchorSlotTemplateFactory, t as Anchored } from "./anchored.js";
-import { attr, html } from "@microsoft/fast-element";
+import { n as renderInLightDOM, t as generateRandomId } from "./randomId.js";
+import { DOM, attr, elements, html, slotted } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
 //#region src/lib/tooltip/tooltip.scss?inline
-var tooltip_default = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size,auto);box-sizing:border-box;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);max-inline-size:var(--tooltip-max-inline-size,30ch);padding:8px 12px}";
+var tooltip_default = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size,auto);box-sizing:border-box;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);max-inline-size:var(--tooltip-max-inline-size,30ch);flex-direction:column;align-items:flex-start;gap:4px;padding:8px 12px;display:flex}";
 //#endregion
 //#region src/lib/tooltip/tooltip.ts
 /**
@@ -17,23 +19,27 @@ var tooltip_default = ":host :host{display:var(--_popup-display,inline)}:host :h
 * @testQuery open open true
 * @testQuery closed open false
 */
-var Tooltip = class extends Anchored(VividElement) {
+var Tooltip = class extends WithKbdShortcut(Anchored(VividElement)) {
 	constructor(..._args) {
 		super(..._args);
 		this.open = false;
+		this._descriptionId = `vwc-tooltip-desc-${generateRandomId()}`;
 		this.#show = () => {
 			this.open = true;
-			this.#updateAnchorExpanded();
 		};
 		this.#hide = () => {
 			this.open = false;
-			this.#updateAnchorExpanded();
 		};
 		this.#closeOnEscape = (e) => {
 			/* v8 ignore else -- @preserve */
 			if (e.key === "Escape") this.#hide();
 		};
 	}
+	/** @internal */
+	_kbdAriaShortcutsValueChanged() {
+		if (!this._anchorEl) return;
+		DOM.setAttribute(this._anchorEl, "aria-keyshortcuts", this._kbdAriaShortcutsValue);
+	}
 	connectedCallback() {
 		super.connectedCallback();
 		this.#updateListeners();
@@ -54,22 +60,23 @@ var Tooltip = class extends Anchored(VividElement) {
 		a.addEventListener("mouseout", this.#hide);
 		a.addEventListener("focusin", this.#show);
 		a.addEventListener("focusout", this.#hide);
-		a.setAttribute("aria-haspopup", "true");
-		a.setAttribute("aria-expanded", String(this.open));
+		const existing = a.getAttribute("aria-describedby") ?? a.ariaDescribedBy;
+		a.setAttribute("aria-describedby", existing ? `${existing} ${this._descriptionId}` : this._descriptionId);
+		DOM.setAttribute(a, "aria-keyshortcuts", this._kbdAriaShortcutsValue);
 	}
 	#cleanupAnchor(a) {
 		a.removeEventListener("mouseover", this.#show);
 		a.removeEventListener("mouseout", this.#hide);
 		a.removeEventListener("focusin", this.#show);
 		a.removeEventListener("focusout", this.#hide);
-		a.removeAttribute("aria-haspopup");
-		a.removeAttribute("aria-expanded");
+		const tokens = (a.getAttribute("aria-describedby") ?? a.ariaDescribedBy ?? "").split(" ").filter((t) => t !== this._descriptionId);
+		const newDescribedBy = tokens.length ? tokens.join(" ") : null;
+		if (a.hasAttribute("aria-describedby")) DOM.setAttribute(a, "aria-describedby", newDescribedBy);
+		else a.ariaDescribedBy = newDescribedBy;
+		a.removeAttribute("aria-keyshortcuts");
 	}
 	#show;
 	#hide;
-	#updateAnchorExpanded() {
-		if (this._anchorEl) this._anchorEl.setAttribute("aria-expanded", String(this.open));
-	}
 	#updateListeners() {
 		document.removeEventListener("keydown", this.#closeOnEscape);
 		if (this.open && this.isConnected) document.addEventListener("keydown", this.#closeOnEscape);
@@ -93,6 +100,7 @@ var TooltipTemplate = (context) => {
 	const popupTag = context.tagFor(Popup);
 	return html`
 ${anchorSlotTemplateFactory()}
+${renderInLightDOM(html`<span slot="_description" id="${(x) => x._descriptionId}">${(x) => x.text}</span>`)}
 <${popupTag} class="${getClasses}" arrow alternate
 	:placement=${(x) => x.placement}
 	:anchor="${(x) => x._anchorEl}"
@@ -102,7 +110,13 @@ ${anchorSlotTemplateFactory()}
 	}}"
   exportparts="vvd-theme-alternate">
   <div part="vvd-theme-alternate" class="tooltip" role="tooltip">
-		${(x) => x.text}
+		<span class="text"><slot name="_description"></slot></span>
+		<slot name="kbd-shortcut"
+			${slotted({
+		property: "_kbdShortcutSlotted",
+		filter: elements()
+	})}
+		></slot>
   </div>
 </${popupTag}>`;
 };

package/unbundled/definition28.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_delegates_aria = require("./delegates-aria.cjs");
 const require_with_success_text = require("./with-success-text.cjs");

package/unbundled/definition28.js

@@ -1,5 +1,5 @@
-import { c as createRegisterFunction, s as defineVividComponent, 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";

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 { c as createRegisterFunction, s as defineVividComponent, 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;
 	}
 });