@vonage/vivid 5.15.0 → 5.16.0

package/unbundled/definition29.js

@@ -0,0 +1,139 @@
+import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { t as __decorate } from "./decorate.js";
+import { t as Localized } from "./localized.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 { Updates, attr, html, when } from "@microsoft/fast-element";
+import { classNames } from "@microsoft/fast-web-utilities";
+//#region src/lib/toggletip/toggletip.scss?inline
+var toggletip_default = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.content-wrapper{width:var(--toggletip-inline-size,auto);max-inline-size:var(--toggletip-max-inline-size,30ch);padding:16px}.headline{font:var(--vvd-typography-base-bold);margin:0}.action-items{justify-content:flex-end;gap:10px;display:flex}::slotted([slot=action-items]){margin-block-start:16px}";
+//#endregion
+//#region src/lib/toggletip/toggletip.ts
+/**
+* @public
+* @component toggletip
+* @slot - The content to display in the toggletip.
+* @slot anchor - Used to set the anchor element for the toggletip.
+* @slot action-items - The content to display in the toggletip action items.
+* @testSelector byHeadline byHeadline
+* @testQuery open open true
+* @testQuery closed open false
+*/
+var Toggletip = class extends Localized(Anchored(VividElement)) {
+	constructor(..._args) {
+		super(..._args);
+		this.alternate = false;
+		this.placement = "right";
+		this.open = false;
+	}
+	#originalAriaLabel = null;
+	/**
+	* @internal
+	*/
+	openChanged(oldValue, newValue) {
+		if (oldValue === void 0) return;
+		if (newValue) this.setAttribute("role", "status");
+		else this.removeAttribute("role");
+		this.#updateListeners();
+		if (this._anchorEl) this.#updateAnchor(this._anchorEl);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.#updateListeners();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#updateListeners();
+	}
+	/**
+	* @internal
+	*/
+	_anchorElChanged(oldValue, newValue) {
+		if (oldValue) this.#cleanupAnchor(oldValue);
+		if (newValue) this.#setupAnchor(newValue);
+	}
+	#setupAnchor(a) {
+		a.addEventListener("click", this.#openIfClosed, true);
+		this.#originalAriaLabel = a.ariaLabel;
+		a.ariaLabel = `${this.locale.toggletip.anchorLabel(a.ariaLabel || "")}`;
+		this.#updateAnchor(a);
+	}
+	#updateAnchor(a) {
+		a.setAttribute("aria-expanded", this.open.toString());
+		a.setAttribute("data-expanded", this.open.toString());
+	}
+	#cleanupAnchor(a) {
+		a.removeEventListener("click", this.#openIfClosed, true);
+		a.removeAttribute("aria-expanded");
+		a.removeAttribute("data-expanded");
+		/* v8 ignore else -- @preserve */
+		if (a.ariaLabel) a.ariaLabel = this.#originalAriaLabel;
+	}
+	#openIfClosed = () => {
+		if (!this.open) Updates.enqueue(() => this.open = true);
+	};
+	#updateListeners() {
+		document.removeEventListener("click", this.#closeOnClickOutside);
+		document.removeEventListener("keydown", this.#closeOnEscape);
+		if (this.open && this.isConnected) {
+			document.addEventListener("click", this.#closeOnClickOutside);
+			document.addEventListener("keydown", this.#closeOnEscape);
+		}
+	}
+	#closeOnClickOutside = (e) => {
+		const clickedOutside = !this.contains(e.target);
+		const clickedOnAnchor = this._anchorEl?.contains(e.target);
+		if (clickedOutside || clickedOnAnchor) this.open = false;
+	};
+	#closeOnEscape = (e) => {
+		/* v8 ignore else -- @preserve */
+		if (e.key === "Escape") this.open = false;
+	};
+};
+__decorate([attr], Toggletip.prototype, "headline", void 0);
+__decorate([attr({ mode: "boolean" })], Toggletip.prototype, "alternate", void 0);
+__decorate([attr({ mode: "fromView" })], Toggletip.prototype, "placement", void 0);
+__decorate([attr({ mode: "boolean" })], Toggletip.prototype, "open", void 0);
+//#endregion
+//#region src/lib/toggletip/toggletip.template.ts
+var getClasses = (_) => classNames("control");
+var ToggletipTemplate = (context) => {
+	const popup = context.tagFor(Popup);
+	return html`
+		${anchorSlotTemplateFactory()}
+		<${popup}
+			@keydown="${(x, { event }) => {
+		if (x.open && handleEscapeKeyAndStopPropogation(event)) return false;
+		return true;
+	}}"
+			class="${getClasses}"
+			arrow
+			:anchor="${(x) => x._anchorEl}"
+			:open="${(x) => x.open}"
+			?alternate="${(x) => !x.alternate}"
+			placement="${(x) => x.placement}"
+			exportparts="vvd-theme-alternate"
+		>
+			<div class="content-wrapper">
+				${when((x) => x.headline, html`<h2 class="headline">${(x) => x.headline}</h2>`)}
+				<slot></slot>
+				<div class="action-items"><slot name="action-items"></slot></div>
+			</div>
+		</${popup}>
+	`;
+};
+//#endregion
+//#region src/lib/toggletip/definition.ts
+/**
+* @internal
+*/
+var toggletipDefinition = defineVividComponent("toggletip", Toggletip, ToggletipTemplate, [popupDefinition], { styles: toggletip_default });
+/**
+* Registers the toggletip element with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerToggletip = createRegisterFunction(toggletipDefinition);
+//#endregion
+export { toggletipDefinition as n, Toggletip as r, registerToggletip as t };

package/unbundled/definition3.cjs

@@ -1,290 +1,136 @@
-'use strict';
-
-const icon_definition = require('../icon/definition.cjs');
-const vividElement = require('./vivid-element.cjs');
-const fastElement = require('@microsoft/fast-element');
-const fastWebUtilities = require('@microsoft/fast-web-utilities');
-const affix = require('./affix.cjs');
-const hostSemantics = require('./host-semantics.cjs');
-
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
+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");
+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)}";
+//#endregion
+//#region src/lib/accordion-item/accordion-item.ts
+/**
+* @public
+* @component accordion-item
+* @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) {
+	constructor(..._args) {
+		super(..._args);
+		this.headinglevel = 2;
+		this.expanded = false;
+		this.noIndicator = false;
+		this.clickHandler = () => {
+			this.expanded = !this.expanded;
+			this.change();
+		};
+		this.change = () => {
+			this.$emit("change");
+		};
+	}
 };
-function isListboxOption(el) {
-  return fastWebUtilities.isHTMLElement(el) && (el.getAttribute("role") === "option" || el instanceof HTMLOptionElement || el instanceof ListboxOption);
-}
-class ListboxOption extends hostSemantics.HostSemantics(
-  affix.AffixIconWithTrailing(vividElement.VividElement)
-) {
-  constructor(text, value, defaultSelected, selected) {
-    super();
-    this.defaultSelected = false;
-    /**
-     * Tracks whether the "selected" property has been changed.
-     * @internal
-     */
-    this.dirtySelected = false;
-    // eslint-disable-next-line @repo/repo/no-attribute-default-value
-    this.value = "";
-    this._highlighted = false;
-    this._displayCheckmark = false;
-    this._vvdSearchText = "";
-    this._isNotMatching = false;
-    if (text) {
-      this.text = text;
-    }
-    if (value) {
-      this.value = value;
-    }
-    if (defaultSelected) {
-      this.defaultSelected = defaultSelected;
-    }
-    if (selected) {
-      this.selected = selected;
-    }
-    this.proxy = new Option(
-      this.text,
-      this.value,
-      this.defaultSelected,
-      this.selected
-    );
-    this.proxy.disabled = this.disabled;
-  }
-  defaultSelectedChanged() {
-    if (!this.dirtySelected) {
-      this.selected = this.defaultSelected;
-      if (this.proxy instanceof HTMLOptionElement) {
-        this.proxy.selected = this.defaultSelected;
-      }
-    }
-    if (this.proxy instanceof HTMLOptionElement) {
-      this.proxy.defaultSelected = this.defaultSelected;
-    }
-  }
-  disabledChanged() {
-    /* v8 ignore if -- @preserve */
-    if (this.proxy instanceof HTMLOptionElement) {
-      this.proxy.disabled = this.disabled;
-    }
-  }
-  /**
-   * @deprecated Use `defaultSelected` instead.
-   */
-  get selectedAttribute() {
-    return this.defaultSelected;
-  }
-  set selectedAttribute(value) {
-    this.defaultSelected = value;
-  }
-  selectedChanged() {
-    if (!this.dirtySelected) {
-      this.dirtySelected = true;
-    }
-    if (this.proxy instanceof HTMLOptionElement) {
-      this.proxy.selected = this.selected;
-    }
-  }
-  valueChanged() {
-    if (typeof this.value !== "string") {
-      this.value = "";
-      return;
-    }
-    if (this.proxy instanceof HTMLOptionElement) {
-      this.proxy.value = this.value;
-    }
-  }
-  get label() {
-    return this._label ?? this.text;
-  }
-  set label(value) {
-    this._label = value;
-  }
-  set text(value) {
-    this._text = value;
-  }
-  get text() {
-    return this._text ?? "";
-  }
-  /**
-   * Provides an accessible name for use by parent components.
-   * Note: Does not implement full accessible name computation, e.g. slotted content is missed.
-   * @internal
-   */
-  _getAccessibleName() {
-    return this.ariaLabel || `${this.text}${this.textSecondary ? ` ${this.textSecondary}` : ""}`;
-  }
-  get form() {
-    return null;
-  }
-  get _hasMatchedText() {
-    return Boolean(this.matchedText ?? this._vvdSearchText);
-  }
-  get _matchedRange() {
-    const matchedText = this.matchedText ?? this._vvdSearchText;
-    if (matchedText) {
-      const matchIndex = this.text.toLowerCase().indexOf(matchedText.toLowerCase());
-      return matchIndex === -1 ? { from: 0, to: 0 } : {
-        from: matchIndex,
-        to: matchIndex + matchedText.length
-      };
-    }
-    return { from: 0, to: 0 };
-  }
-  /**
-   * @internal
-   */
-  connectedCallback() {
-    super.connectedCallback();
-    if (!this.dirtySelected) {
-      this.selected = this.defaultSelected;
-      this.dirtySelected = false;
-    }
-  }
-}
-__decorateClass([
-  fastElement.attr({
-    converter: {
-      fromView: (value) => {
-        if (value === true || value === "true") {
-          return true;
-        }
-        if (value === false || value === "false") {
-          return false;
-        }
-        return void 0;
-      },
-      toView: (value) => value
-    }
-  })
-], ListboxOption.prototype, "checked", 2);
-__decorateClass([
-  fastElement.attr({ attribute: "selected", mode: "boolean" })
-], ListboxOption.prototype, "defaultSelected", 2);
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  fastElement.attr({ mode: "boolean" })
-], ListboxOption.prototype, "disabled", 2);
-__decorateClass([
-  fastElement.attr({ attribute: "current-selected", mode: "boolean" })
-], ListboxOption.prototype, "selected", 2);
-__decorateClass([
-  fastElement.attr({ attribute: "value" })
-], ListboxOption.prototype, "value", 2);
-__decorateClass([
-  fastElement.attr({
-    attribute: "label"
-  })
-], ListboxOption.prototype, "_label", 2);
-__decorateClass([
-  fastElement.attr({
-    attribute: "text"
-  })
-], ListboxOption.prototype, "_text", 2);
-__decorateClass([
-  fastElement.attr({ attribute: "text-secondary" })
-], ListboxOption.prototype, "textSecondary", 2);
-__decorateClass([
-  fastElement.observable
-], ListboxOption.prototype, "_highlighted", 2);
-__decorateClass([
-  fastElement.observable
-], ListboxOption.prototype, "_displayCheckmark", 2);
-__decorateClass([
-  fastElement.attr({ attribute: "matched-text" })
-], ListboxOption.prototype, "matchedText", 2);
-__decorateClass([
-  fastElement.observable
-], ListboxOption.prototype, "_vvdSearchText", 2);
-__decorateClass([
-  fastElement.volatile
-], ListboxOption.prototype, "_hasMatchedText", 1);
-__decorateClass([
-  fastElement.observable
-], ListboxOption.prototype, "_isNotMatching", 2);
-__decorateClass([
-  fastElement.volatile
-], ListboxOption.prototype, "_matchedRange", 1);
-__decorateClass([
-  fastElement.attr({ attribute: "tag-connotation" })
-], ListboxOption.prototype, "tagConnotation", 2);
+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);
+//#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")}
+			>
 
-const getClasses = (x) => fastWebUtilities.classNames(
-  "base",
-  ["disabled", x.disabled],
-  ["selected", Boolean(x.selected)],
-  ["hover", Boolean(x._highlighted)],
-  ["active", Boolean(x.checked)],
-  ["icon", Boolean(x.icon)],
-  ["two-lines", Boolean(x.text?.length) && Boolean(x.textSecondary?.length)]
-);
-function text() {
-  return fastElement.html`${fastElement.when(
-    (x) => x.text || x.textSecondary,
-    fastElement.html`<span class="text">
-			${fastElement.when(
-      (x) => x.text,
-      fastElement.html`<span class="text-primary">
-					${fastElement.when(
-        (x) => x._hasMatchedText,
-        fastElement.html`${(x) => x.text.slice(0, x._matchedRange.from)}<span class="match"
-								>${(x) => x.text.slice(x._matchedRange.from, x._matchedRange.to)}</span
-							>`
-      )}${(x) => x.text.slice(x._matchedRange.to)}
-				</span>`
-    )}
-			${fastElement.when(
-      (x) => x.textSecondary,
-      fastElement.html`<span class="text-secondary">${(x) => x.textSecondary}</span>`
-    )}
-		</span>`
-  )}`;
-}
-const ListboxOptionTemplate = (context) => {
-  const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  const iconTag = context.tagFor(icon_definition.VwcIconElement);
-  return fastElement.html`
-		<template
-			${hostSemantics.applyHostSemantics({
-    role: "option",
-    ariaChecked: (x) => x.checked,
-    ariaSelected: (x) => x.selected,
-    ariaDisabled: (x) => x.disabled
-  })}
-			style="${(x) => x._isNotMatching ? "display: none" : ""}"
-		>
-			<div class="${getClasses}">
-				${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)} ${text()}
-				<slot name="trailing-meta"></slot>
-				${fastElement.when(
-    (x) => x._displayCheckmark && x.selected,
-    fastElement.html`<${iconTag} class="checkmark" name="check-line"></${iconTag}>`
-  )}
-			</div>
-		</template>
-	`;
-};
+				${(x) => !x.iconTrailing ? affixIconTemplate(x.icon, require_affix.IconWrapper.Slot) : null}
 
-const styles = ":host([disabled]){cursor:not-allowed}.base{--_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-option-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text, var(--_appearance-color-text));font:var(--vvd-typography-base);gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word}.base{--_option-min-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }.base:not(.two-lines){--_option-gap: calc( calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 3);padding-block:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4)}.base.two-lines{gap:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.4);padding-block:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) }:host([scale=condensed]) .base:not(.two-lines){--_option-gap: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/5) ;padding-block:calc(calc(1px*(36 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 6)}:host([scale=condensed]) .base.two-lines{gap:calc(calc(1px*(36 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 3);padding-block:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4)}.base.active{--focus-stroke-color: var(--vvd-color-cta-500);--focus-stroke-gap-color: transparent;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))}.base.hidden{display:none}.text{display:flex;flex-direction:column;font:var(--vvd-typography-base);gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:block;font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{font-size:var(--_option-icon-size)}";
+				<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>
 
-const listboxOptionDefinition = vividElement.defineVividComponent(
-  "option",
-  ListboxOption,
-  ListboxOptionTemplate,
-  [icon_definition.iconDefinition],
-  {
-    styles
-  }
-);
-const registerOption = vividElement.createRegisterFunction(listboxOptionDefinition);
+				<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>
 
-exports.ListboxOption = ListboxOption;
-exports.isListboxOption = isListboxOption;
-exports.listboxOptionDefinition = listboxOptionDefinition;
-exports.registerOption = registerOption;
+				${(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>
+	</div>
+`;
+//#endregion
+//#region src/lib/accordion-item/definition.ts
+/**
+* @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.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerAccordionItem = require_vivid_element.createRegisterFunction(accordionItemDefinition);
+//#endregion
+Object.defineProperty(exports, "AccordionItem", {
+	enumerable: true,
+	get: function() {
+		return AccordionItem;
+	}
+});
+Object.defineProperty(exports, "accordionItemDefinition", {
+	enumerable: true,
+	get: function() {
+		return accordionItemDefinition;
+	}
+});
+Object.defineProperty(exports, "registerAccordionItem", {
+	enumerable: true,
+	get: function() {
+		return registerAccordionItem;
+	}
+});