@vonage/vivid 5.23.1-preview.0 → 5.24.0

package/unbundled/definition19.cjs

@@ -1,99 +1,53 @@
 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_breadcrumb_item = require("./breadcrumb-item.cjs");
+const require_calendar_event = require("./calendar-event.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
-//#region src/lib/breadcrumb/breadcrumb.template.ts
-var breadcrumbTemplate = _microsoft_fast_element.html`
-	<nav
-		class="base"
-		${require_delegates_aria.delegateAria({ ariaLabel: (x) => x.ariaLabel || "breadcrumbs" })}
-	>
-		<div role="list" class="list">
-			<slot
-				${(0, _microsoft_fast_element.slotted)({
-	property: "slottedBreadcrumbItems",
-	filter: (0, _microsoft_fast_element.elements)()
-})}
-			></slot>
-		</div>
-	</nav>
-`;
+let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
+//#region src/lib/calendar-event/calendar-event.scss?inline
+var calendar_event_default = ":host{display:contents}.base.connotation-accent{--_connotation-color-primary:var(--vvd-calendar-event-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-calendar-event-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-contrast:var(--vvd-calendar-event-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-soft:var(--vvd-calendar-event-accent-soft,var(--vvd-color-neutral-100))}.base.connotation-cta{--_connotation-color-primary:var(--vvd-calendar-event-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-calendar-event-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-contrast:var(--vvd-calendar-event-cta-contrast,var(--vvd-color-cta-800));--_connotation-color-soft:var(--vvd-calendar-event-cta-soft,var(--vvd-color-cta-100))}.base.connotation-success{--_connotation-color-primary:var(--vvd-calendar-event-success-primary,var(--vvd-color-success-500));--_connotation-color-primary-text:var(--vvd-calendar-event-success-primary-text,var(--vvd-color-canvas));--_connotation-color-contrast:var(--vvd-calendar-event-success-contrast,var(--vvd-color-success-800));--_connotation-color-soft:var(--vvd-calendar-event-success-soft,var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary:var(--vvd-calendar-event-alert-primary,var(--vvd-color-alert-500));--_connotation-color-primary-text:var(--vvd-calendar-event-alert-primary-text,var(--vvd-color-canvas));--_connotation-color-contrast:var(--vvd-calendar-event-alert-contrast,var(--vvd-color-alert-800));--_connotation-color-soft:var(--vvd-calendar-event-alert-soft,var(--vvd-color-alert-100))}.base.connotation-warning{--_connotation-color-primary:var(--vvd-calendar-event-warning-primary,var(--vvd-color-warning-300));--_connotation-color-primary-text:var(--vvd-calendar-event-warning-primary-text,var(--vvd-color-canvas-text));--_connotation-color-contrast:var(--vvd-calendar-event-warning-contrast,var(--vvd-color-warning-800));--_connotation-color-soft:var(--vvd-calendar-event-warning-soft,var(--vvd-color-warning-100))}.base.connotation-announcement{--_connotation-color-primary:var(--vvd-calendar-event-announcement-primary,var(--vvd-color-announcement-500));--_connotation-color-primary-text:var(--vvd-calendar-event-announcement-primary-text,var(--vvd-color-canvas));--_connotation-color-contrast:var(--vvd-calendar-event-announcement-contrast,var(--vvd-color-announcement-800));--_connotation-color-soft:var(--vvd-calendar-event-announcement-soft,var(--vvd-color-announcement-100))}.base:not(.connotation-accent,.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary:var(--vvd-calendar-event-information-primary,var(--vvd-color-information-500));--_connotation-color-primary-text:var(--vvd-calendar-event-information-primary-text,var(--vvd-color-canvas));--_connotation-color-contrast:var(--vvd-calendar-event-information-contrast,var(--vvd-color-information-800));--_connotation-color-soft:var(--vvd-calendar-event-information-soft,var(--vvd-color-information-100))}.base{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.base.appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base{--vvd-calendar-event--indent:calc(0px + var(--vvd-calendar-event--overlap-count,0) * 8px);--focus-stroke-gap-color:transparent;z-index:var(--vvd-calendar-event--overlap-count);top:calc(var(--vvd-calendar-event--start,0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start,0)));box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:calc(var(--vvd-calendar-event--duration,1) * calc((100% - 23px) / 24) + calc(1px * (var(--vvd-calendar-event--duration,1) - 1)) - 4px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(100% - 8px - min(var(--vvd-calendar-event--indent), 32px));margin-block-start:2px;margin-inline:min(var(--vvd-calendar-event--indent), 32px) 8px;max-block-size:calc(100% - calc(var(--vvd-calendar-event--start,0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start,0))) - 4px);border-radius:8px;padding:4px 8px;position:absolute;overflow:hidden}@supports (contain:content){.base{contain:strict}}@supports not (contain:content){.base{overflow:hidden}}.base:focus{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));z-index:2000}:host([overlap-count]) .base{--focus-stroke-gap-color:var(--vvd-color-canvas)}:host([overlap-count]) .base:not(:focus){box-shadow:inset 0 0 0 1px var(--vvd-color-canvas)}h2{font:var(--vvd-typography-base-condensed-bold);margin:0}h2>strong{font:inherit}p{font:var(--vvd-typography-base-condensed);margin:0}";
 //#endregion
-//#region src/lib/breadcrumb/breadcrumb.scss?inline
-var breadcrumb_default = ".list{display:flex}";
-//#endregion
-//#region src/lib/breadcrumb/breadcrumb.ts
-/**
-* @public
-* @component breadcrumb
-* @slot - Default slot.
-*/
-var Breadcrumb = class extends require_delegates_aria.DelegatesAria(require_vivid_element.VividElement) {
-	/**
-	* @internal
-	*/
-	slottedBreadcrumbItemsChanged(_, newItems) {
-		/* v8 ignore else -- @preserve */
-		if (newItems) newItems.forEach((item, index) => {
-			const itemIsLastNode = index === newItems.length - 1;
-			this.setItemSeparator(item, itemIsLastNode);
-			this.setAriaCurrent(item, itemIsLastNode);
-		});
-	}
-	setItemSeparator(item, isLastNode) {
-		if (item instanceof require_breadcrumb_item.BreadcrumbItem) item.separator = !isLastNode;
-	}
-	/**
-	* Finds href on childnodes in the light DOM or shadow DOM.
-	* We look in the shadow DOM because we insert an anchor when breadcrumb-item has an href.
-	*/
-	findChildWithHref(node) {
-		if (node.childElementCount > 0) return node.querySelector("a[href]");
-		else if (node.shadowRoot) return node.shadowRoot.querySelector("a[href]");
-		else return null;
-	}
-	/**
-	*  Sets ARIA Current for the current node
-	* If child node with an anchor tag and with href is found then set aria-current to correct value for the child node,
-	* otherwise apply aria-current to the host element, with an href
-	*/
-	setAriaCurrent(item, isLastNode) {
-		const childNodeWithHref = this.findChildWithHref(item);
-		if (childNodeWithHref !== null) if (isLastNode) childNodeWithHref.setAttribute("aria-current", "page");
-		else childNodeWithHref.removeAttribute("aria-current");
-	}
+//#region src/lib/calendar-event/calendar-event.template.ts
+var getStyles = ({ start, duration, overlapCount }) => {
+	const stylesObj = {
+		...overlapCount && { "--vvd-calendar-event--overlap-count": overlapCount },
+		...start && { "--vvd-calendar-event--start": start },
+		...duration && { "--vvd-calendar-event--duration": duration }
+	};
+	return Object.entries(stylesObj).map((entry) => entry.join(":")).join(";");
 };
-require_decorate.__decorate([_microsoft_fast_element.observable], Breadcrumb.prototype, "slottedBreadcrumbItems", void 0);
+var CalendarEventTemplate = _microsoft_fast_element.html` <div
+	style="${getStyles}"
+	class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", [`connotation-${x.connotation}`, Boolean(x.connotation)], [`appearance-${x.appearance}`, Boolean(x.appearance)])}"
+	tabindex="0"
+	${require_delegates_aria.delegateAria({ role: "button" })}
+>
+	${(0, _microsoft_fast_element.when)((x) => x.heading, _microsoft_fast_element.html`<h2><strong>${(x) => x.heading}</strong></h2>`)}
+	${(0, _microsoft_fast_element.when)((x) => x.description, _microsoft_fast_element.html`<p>${(x) => x.description}</p>`)}
+</div>`;
 //#endregion
-//#region src/lib/breadcrumb/definition.ts
-/**
-* @internal
-*/
-var breadcrumbDefinition = require_vivid_element.defineVividComponent("breadcrumb", Breadcrumb, breadcrumbTemplate, [], { styles: breadcrumb_default });
+//#region src/lib/calendar-event/definition.ts
+/** @internal */
+var calendarEventDefinition = require_vivid_element.defineVividComponent("calendar-event", require_calendar_event.CalendarEvent, CalendarEventTemplate, [], {
+	styles: calendar_event_default,
+	shadowOptions: { delegatesFocus: true }
+});
 /**
-* Registers the breadcrumb elements with the design system.
+* Registers the calendar-event elements with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerBreadcrumb = require_vivid_element.createRegisterFunction(breadcrumbDefinition);
+var registerCalendarEvent = require_vivid_element.createRegisterFunction(calendarEventDefinition);
 //#endregion
-Object.defineProperty(exports, "Breadcrumb", {
-	enumerable: true,
-	get: function() {
-		return Breadcrumb;
-	}
-});
-Object.defineProperty(exports, "breadcrumbDefinition", {
+Object.defineProperty(exports, "calendarEventDefinition", {
 	enumerable: true,
 	get: function() {
-		return breadcrumbDefinition;
+		return calendarEventDefinition;
 	}
 });
-Object.defineProperty(exports, "registerBreadcrumb", {
+Object.defineProperty(exports, "registerCalendarEvent", {
 	enumerable: true,
 	get: function() {
-		return registerBreadcrumb;
+		return registerCalendarEvent;
 	}
 });

package/unbundled/definition19.js

@@ -1,81 +1,40 @@
-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 { t as BreadcrumbItem } from "./breadcrumb-item.js";
-import { elements, html, observable, slotted } from "@microsoft/fast-element";
-//#region src/lib/breadcrumb/breadcrumb.template.ts
-var breadcrumbTemplate = html`
-	<nav
-		class="base"
-		${delegateAria({ ariaLabel: (x) => x.ariaLabel || "breadcrumbs" })}
-	>
-		<div role="list" class="list">
-			<slot
-				${slotted({
-	property: "slottedBreadcrumbItems",
-	filter: elements()
-})}
-			></slot>
-		</div>
-	</nav>
-`;
+import { d as createRegisterFunction, u as defineVividComponent } from "./vivid-element.js";
+import { n as delegateAria } from "./delegates-aria.js";
+import { t as CalendarEvent } from "./calendar-event.js";
+import { html, when } from "@microsoft/fast-element";
+import { classNames } from "@microsoft/fast-web-utilities";
+//#region src/lib/calendar-event/calendar-event.scss?inline
+var calendar_event_default = ":host{display:contents}.base.connotation-accent{--_connotation-color-primary:var(--vvd-calendar-event-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-calendar-event-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-contrast:var(--vvd-calendar-event-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-soft:var(--vvd-calendar-event-accent-soft,var(--vvd-color-neutral-100))}.base.connotation-cta{--_connotation-color-primary:var(--vvd-calendar-event-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-calendar-event-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-contrast:var(--vvd-calendar-event-cta-contrast,var(--vvd-color-cta-800));--_connotation-color-soft:var(--vvd-calendar-event-cta-soft,var(--vvd-color-cta-100))}.base.connotation-success{--_connotation-color-primary:var(--vvd-calendar-event-success-primary,var(--vvd-color-success-500));--_connotation-color-primary-text:var(--vvd-calendar-event-success-primary-text,var(--vvd-color-canvas));--_connotation-color-contrast:var(--vvd-calendar-event-success-contrast,var(--vvd-color-success-800));--_connotation-color-soft:var(--vvd-calendar-event-success-soft,var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary:var(--vvd-calendar-event-alert-primary,var(--vvd-color-alert-500));--_connotation-color-primary-text:var(--vvd-calendar-event-alert-primary-text,var(--vvd-color-canvas));--_connotation-color-contrast:var(--vvd-calendar-event-alert-contrast,var(--vvd-color-alert-800));--_connotation-color-soft:var(--vvd-calendar-event-alert-soft,var(--vvd-color-alert-100))}.base.connotation-warning{--_connotation-color-primary:var(--vvd-calendar-event-warning-primary,var(--vvd-color-warning-300));--_connotation-color-primary-text:var(--vvd-calendar-event-warning-primary-text,var(--vvd-color-canvas-text));--_connotation-color-contrast:var(--vvd-calendar-event-warning-contrast,var(--vvd-color-warning-800));--_connotation-color-soft:var(--vvd-calendar-event-warning-soft,var(--vvd-color-warning-100))}.base.connotation-announcement{--_connotation-color-primary:var(--vvd-calendar-event-announcement-primary,var(--vvd-color-announcement-500));--_connotation-color-primary-text:var(--vvd-calendar-event-announcement-primary-text,var(--vvd-color-canvas));--_connotation-color-contrast:var(--vvd-calendar-event-announcement-contrast,var(--vvd-color-announcement-800));--_connotation-color-soft:var(--vvd-calendar-event-announcement-soft,var(--vvd-color-announcement-100))}.base:not(.connotation-accent,.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary:var(--vvd-calendar-event-information-primary,var(--vvd-color-information-500));--_connotation-color-primary-text:var(--vvd-calendar-event-information-primary-text,var(--vvd-color-canvas));--_connotation-color-contrast:var(--vvd-calendar-event-information-contrast,var(--vvd-color-information-800));--_connotation-color-soft:var(--vvd-calendar-event-information-soft,var(--vvd-color-information-100))}.base{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.base.appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base{--vvd-calendar-event--indent:calc(0px + var(--vvd-calendar-event--overlap-count,0) * 8px);--focus-stroke-gap-color:transparent;z-index:var(--vvd-calendar-event--overlap-count);top:calc(var(--vvd-calendar-event--start,0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start,0)));box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:calc(var(--vvd-calendar-event--duration,1) * calc((100% - 23px) / 24) + calc(1px * (var(--vvd-calendar-event--duration,1) - 1)) - 4px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(100% - 8px - min(var(--vvd-calendar-event--indent), 32px));margin-block-start:2px;margin-inline:min(var(--vvd-calendar-event--indent), 32px) 8px;max-block-size:calc(100% - calc(var(--vvd-calendar-event--start,0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start,0))) - 4px);border-radius:8px;padding:4px 8px;position:absolute;overflow:hidden}@supports (contain:content){.base{contain:strict}}@supports not (contain:content){.base{overflow:hidden}}.base:focus{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));z-index:2000}:host([overlap-count]) .base{--focus-stroke-gap-color:var(--vvd-color-canvas)}:host([overlap-count]) .base:not(:focus){box-shadow:inset 0 0 0 1px var(--vvd-color-canvas)}h2{font:var(--vvd-typography-base-condensed-bold);margin:0}h2>strong{font:inherit}p{font:var(--vvd-typography-base-condensed);margin:0}";
 //#endregion
-//#region src/lib/breadcrumb/breadcrumb.scss?inline
-var breadcrumb_default = ".list{display:flex}";
-//#endregion
-//#region src/lib/breadcrumb/breadcrumb.ts
-/**
-* @public
-* @component breadcrumb
-* @slot - Default slot.
-*/
-var Breadcrumb = class extends DelegatesAria(VividElement) {
-	/**
-	* @internal
-	*/
-	slottedBreadcrumbItemsChanged(_, newItems) {
-		/* v8 ignore else -- @preserve */
-		if (newItems) newItems.forEach((item, index) => {
-			const itemIsLastNode = index === newItems.length - 1;
-			this.setItemSeparator(item, itemIsLastNode);
-			this.setAriaCurrent(item, itemIsLastNode);
-		});
-	}
-	setItemSeparator(item, isLastNode) {
-		if (item instanceof BreadcrumbItem) item.separator = !isLastNode;
-	}
-	/**
-	* Finds href on childnodes in the light DOM or shadow DOM.
-	* We look in the shadow DOM because we insert an anchor when breadcrumb-item has an href.
-	*/
-	findChildWithHref(node) {
-		if (node.childElementCount > 0) return node.querySelector("a[href]");
-		else if (node.shadowRoot) return node.shadowRoot.querySelector("a[href]");
-		else return null;
-	}
-	/**
-	*  Sets ARIA Current for the current node
-	* If child node with an anchor tag and with href is found then set aria-current to correct value for the child node,
-	* otherwise apply aria-current to the host element, with an href
-	*/
-	setAriaCurrent(item, isLastNode) {
-		const childNodeWithHref = this.findChildWithHref(item);
-		if (childNodeWithHref !== null) if (isLastNode) childNodeWithHref.setAttribute("aria-current", "page");
-		else childNodeWithHref.removeAttribute("aria-current");
-	}
+//#region src/lib/calendar-event/calendar-event.template.ts
+var getStyles = ({ start, duration, overlapCount }) => {
+	const stylesObj = {
+		...overlapCount && { "--vvd-calendar-event--overlap-count": overlapCount },
+		...start && { "--vvd-calendar-event--start": start },
+		...duration && { "--vvd-calendar-event--duration": duration }
+	};
+	return Object.entries(stylesObj).map((entry) => entry.join(":")).join(";");
 };
-__decorate([observable], Breadcrumb.prototype, "slottedBreadcrumbItems", void 0);
 //#endregion
-//#region src/lib/breadcrumb/definition.ts
-/**
-* @internal
-*/
-var breadcrumbDefinition = defineVividComponent("breadcrumb", Breadcrumb, breadcrumbTemplate, [], { styles: breadcrumb_default });
+//#region src/lib/calendar-event/definition.ts
+/** @internal */
+var calendarEventDefinition = defineVividComponent("calendar-event", CalendarEvent, html` <div
+	style="${getStyles}"
+	class="${(x) => classNames("base", [`connotation-${x.connotation}`, Boolean(x.connotation)], [`appearance-${x.appearance}`, Boolean(x.appearance)])}"
+	tabindex="0"
+	${delegateAria({ role: "button" })}
+>
+	${when((x) => x.heading, html`<h2><strong>${(x) => x.heading}</strong></h2>`)}
+	${when((x) => x.description, html`<p>${(x) => x.description}</p>`)}
+</div>`, [], {
+	styles: calendar_event_default,
+	shadowOptions: { delegatesFocus: true }
+});
 /**
-* Registers the breadcrumb elements with the design system.
+* Registers the calendar-event elements with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerBreadcrumb = createRegisterFunction(breadcrumbDefinition);
+var registerCalendarEvent = createRegisterFunction(calendarEventDefinition);
 //#endregion
-export { registerBreadcrumb as n, Breadcrumb as r, breadcrumbDefinition as t };
+export { registerCalendarEvent as n, calendarEventDefinition as t };

package/unbundled/definition2.cjs

@@ -6,7 +6,7 @@ const require_affix = require("./affix.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)}";
+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-direction:column;flex:auto;gap:4px;min-inline-size:0;display:flex}.heading-primary{min-inline-size:0}.heading-secondary{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) .heading-secondary,.heading-button.size-condensed .heading-secondary{font:var(--vvd-typography-base)}.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)}";
 //#endregion
 //#region src/lib/accordion-item/accordion-item.ts
 /**
@@ -48,6 +48,7 @@ require_decorate.__decorate([_microsoft_fast_element.attr], AccordionItem.protot
 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([(0, _microsoft_fast_element.attr)({ attribute: "secondary-text" })], AccordionItem.prototype, "secondaryText", void 0);
 require_decorate.__decorate([_microsoft_fast_element.observable], AccordionItem.prototype, "_headingSlottedContent", void 0);
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
 	mode: "boolean",
@@ -58,14 +59,13 @@ require_decorate.__decorate([_microsoft_fast_element.observable], AccordionItem.
 require_decorate.__decorate([_microsoft_fast_element.attr], AccordionItem.prototype, "size", 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}"
+				class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("heading-button", [`appearance-${x.appearance}`, Boolean(x.appearance)], [`size-${x.size}`, Boolean(x.size)])}"
 				id="${(x) => x.id}"
 				aria-expanded="${(x) => x.expanded}"
 				aria-controls="${(x) => x.id}-panel"
@@ -76,8 +76,13 @@ var header = (context, hTagName) => {
 				${(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 class="heading-primary">
+						<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>
+					${(0, _microsoft_fast_element.when)((x) => Boolean(x.secondaryText), _microsoft_fast_element.html`<span class="heading-secondary"
+							>${(x) => x.secondaryText}</span
+						>`)}
 				</span>
 
 				<span class="meta">
@@ -105,9 +110,7 @@ var AccordionItemTemplate = (context) => _microsoft_fast_element.html`
 `;
 //#endregion
 //#region src/lib/accordion-item/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var accordionItemDefinition = require_vivid_element.defineVividComponent("accordion-item", AccordionItem, AccordionItemTemplate, [require_definition.iconDefinition], { styles: accordion_item_default });
 /**
 * Registers the accordion item elements with the design system.

package/unbundled/definition2.js

@@ -5,7 +5,7 @@ import { a as affixIconTemplateFactory, i as IconWrapper, n as AffixIconWithTrai
 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)}";
+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-direction:column;flex:auto;gap:4px;min-inline-size:0;display:flex}.heading-primary{min-inline-size:0}.heading-secondary{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) .heading-secondary,.heading-button.size-condensed .heading-secondary{font:var(--vvd-typography-base)}.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)}";
 //#endregion
 //#region src/lib/accordion-item/accordion-item.ts
 /**
@@ -47,6 +47,7 @@ __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([attr({ attribute: "secondary-text" })], AccordionItem.prototype, "secondaryText", void 0);
 __decorate([observable], AccordionItem.prototype, "_headingSlottedContent", void 0);
 __decorate([attr({
 	mode: "boolean",
@@ -57,14 +58,13 @@ __decorate([observable], AccordionItem.prototype, "_metaSlottedContent", void 0)
 __decorate([attr], AccordionItem.prototype, "size", 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}"
+				class="${(x) => classNames("heading-button", [`appearance-${x.appearance}`, Boolean(x.appearance)], [`size-${x.size}`, Boolean(x.size)])}"
 				id="${(x) => x.id}"
 				aria-expanded="${(x) => x.expanded}"
 				aria-controls="${(x) => x.id}-panel"
@@ -75,8 +75,13 @@ var header = (context, hTagName) => {
 				${(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 class="heading-primary">
+						<slot name="heading" ${slotted("_headingSlottedContent")}></slot>
+						${when((x) => x.heading && !x._headingSlottedContent?.length, html`${(x) => x.heading}`)}
+					</span>
+					${when((x) => Boolean(x.secondaryText), html`<span class="heading-secondary"
+							>${(x) => x.secondaryText}</span
+						>`)}
 				</span>
 
 				<span class="meta">
@@ -104,9 +109,7 @@ var AccordionItemTemplate = (context) => html`
 `;
 //#endregion
 //#region src/lib/accordion-item/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var accordionItemDefinition = defineVividComponent("accordion-item", AccordionItem, AccordionItemTemplate, [iconDefinition], { styles: accordion_item_default });
 /**
 * Registers the accordion item elements with the design system.