@vonage/vivid 5.15.1 → 5.16.0

package/unbundled/definition3.js

@@ -1,284 +1,118 @@
-import { VwcIconElement as Icon, iconDefinition } from '../icon/definition.js';
-import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from './vivid-element.js';
-import { attr, observable, volatile, when, html } from '@microsoft/fast-element';
-import { isHTMLElement, classNames } from '@microsoft/fast-web-utilities';
-import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
-import { H as HostSemantics, a as applyHostSemantics } from './host-semantics.js';
-
-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;
+import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { t as iconDefinition } from "./definition2.js";
+import { t as __decorate } from "./decorate.js";
+import { a as affixIconTemplateFactory, i as IconWrapper, n as AffixIconWithTrailing } from "./affix.js";
+import { attr, html, nullableNumberConverter, observable, ref, slotted, when } from "@microsoft/fast-element";
+import { classNames } from "@microsoft/fast-web-utilities";
+//#region src/lib/accordion-item/accordion-item.scss?inline
+var accordion_item_default = ":host{--_vvd-accordion-item-accent-firm-wrapper:var(--vvd-accordion-item-accent-firm)}.heading-button{--vvd-accordion-item-accent-firm:var(--_vvd-accordion-item-accent-firm-wrapper,var(--vvd-accordion-item-accent-primary))}:host{box-sizing:border-box;flex-direction:column;display:flex}.heading-container{margin:0}.heading-button,.heading-button.appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.heading-button.appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}@media (hover:hover){.heading-button:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.heading-button:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:transparent}.heading-button:hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:transparent}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}.heading-button:active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.heading-button:active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:transparent}.heading-button:active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-fierce);--_appearance-color-outline:transparent}.heading-button.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.heading-button.active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:transparent}.heading-button.active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-fierce);--_appearance-color-outline:transparent}.heading-button{--_connotation-color-primary:var(--vvd-accordion-item-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-accordion-item-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-accordion-item-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-accordion-item-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-faint:var(--vvd-accordion-item-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-accordion-item-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-firm:var(--vvd-accordion-item-accent-firm,var(--vvd-color-canvas-text));--focus-stroke-gap-color:transparent;background-color:var(--_appearance-color-fill);width:100%;color:var(--_appearance-color-text);cursor:pointer;text-align:left;border:none;align-items:center;padding:16px;display:flex}.heading-button:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.heading-button.size-condensed{font:var(--vvd-typography-base-extended-bold);gap:12px}.heading-button:not(.size-condensed){font:var(--vvd-typography-heading-4);gap:16px}.heading-content{flex:auto}.meta{max-width:var(--accordion-item-meta-inline-size,20%);color:var(--vvd-color-neutral-600);text-align:end;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;overflow:hidden}.heading-button:not(.size-condensed) .meta{font:var(--vvd-typography-base-bold)}.heading-button.size-condensed .meta{font:var(--vvd-typography-base-condensed-bold)}.region{padding:8px 32px 24px 16px;display:none}.region:not(.size-condensed).padded{padding-inline-start:52px}:host([expanded]) .region{display:block}.region.size-condensed.padded{padding-inline-start:44px}slot[name=icon]{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) slot[name=icon]{font:inherit}.heading-button.size-condensed slot[name=icon]{font:var(--vvd-typography-base-extended)}:host(:not([icon-trailing])) slot[name=icon]:last-of-type{color:var(--_appearance-color-text)}";
+//#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 AffixIconWithTrailing(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 isHTMLElement(el) && (el.getAttribute("role") === "option" || el instanceof HTMLOptionElement || el instanceof ListboxOption);
-}
-class ListboxOption extends HostSemantics(
-  AffixIconWithTrailing(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() {
-    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([
-  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([
-  attr({ attribute: "selected", mode: "boolean" })
-], ListboxOption.prototype, "defaultSelected", 2);
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  attr({ mode: "boolean" })
-], ListboxOption.prototype, "disabled", 2);
-__decorateClass([
-  attr({ attribute: "current-selected", mode: "boolean" })
-], ListboxOption.prototype, "selected", 2);
-__decorateClass([
-  attr({ attribute: "value" })
-], ListboxOption.prototype, "value", 2);
-__decorateClass([
-  attr({
-    attribute: "label"
-  })
-], ListboxOption.prototype, "_label", 2);
-__decorateClass([
-  attr({
-    attribute: "text"
-  })
-], ListboxOption.prototype, "_text", 2);
-__decorateClass([
-  attr({ attribute: "text-secondary" })
-], ListboxOption.prototype, "textSecondary", 2);
-__decorateClass([
-  observable
-], ListboxOption.prototype, "_highlighted", 2);
-__decorateClass([
-  observable
-], ListboxOption.prototype, "_displayCheckmark", 2);
-__decorateClass([
-  attr({ attribute: "matched-text" })
-], ListboxOption.prototype, "matchedText", 2);
-__decorateClass([
-  observable
-], ListboxOption.prototype, "_vvdSearchText", 2);
-__decorateClass([
-  volatile
-], ListboxOption.prototype, "_hasMatchedText", 1);
-__decorateClass([
-  observable
-], ListboxOption.prototype, "_isNotMatching", 2);
-__decorateClass([
-  volatile
-], ListboxOption.prototype, "_matchedRange", 1);
-__decorateClass([
-  attr({ attribute: "tag-connotation" })
-], ListboxOption.prototype, "tagConnotation", 2);
+__decorate([attr({
+	attribute: "heading-level",
+	mode: "fromView",
+	converter: nullableNumberConverter
+})], AccordionItem.prototype, "headinglevel", void 0);
+__decorate([attr], AccordionItem.prototype, "appearance", void 0);
+__decorate([attr({ mode: "boolean" })], AccordionItem.prototype, "expanded", void 0);
+__decorate([attr], AccordionItem.prototype, "id", void 0);
+__decorate([attr], AccordionItem.prototype, "heading", void 0);
+__decorate([observable], AccordionItem.prototype, "_headingSlottedContent", void 0);
+__decorate([attr({
+	mode: "boolean",
+	attribute: "no-indicator"
+})], AccordionItem.prototype, "noIndicator", void 0);
+__decorate([attr], AccordionItem.prototype, "meta", void 0);
+__decorate([observable], AccordionItem.prototype, "_metaSlottedContent", void 0);
+__decorate([attr], AccordionItem.prototype, "size", void 0);
+//#endregion
+//#region src/lib/accordion-item/accordion-item.template.ts
+var getClasses = ({ appearance, size }) => classNames("heading-button", [`appearance-${appearance}`, Boolean(appearance)], [`size-${size}`, Boolean(size)]);
+var header = (context, hTagName) => {
+	const affixIconTemplate = affixIconTemplateFactory(context);
+	const hTag = html.partial(hTagName);
+	return html`
+		<${hTag} class="heading-container">
+			<button
+				class="${getClasses}"
+				id="${(x) => x.id}"
+				aria-expanded="${(x) => x.expanded}"
+				aria-controls="${(x) => x.id}-panel"
+				@click="${(x) => x.clickHandler()}"
+				${ref("expandbutton")}
+			>
 
-const getClasses = (x) => 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 html`${when(
-    (x) => x.text || x.textSecondary,
-    html`<span class="text">
-			${when(
-      (x) => x.text,
-      html`<span class="text-primary">
-					${when(
-        (x) => x._hasMatchedText,
-        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>`
-    )}
-			${when(
-      (x) => x.textSecondary,
-      html`<span class="text-secondary">${(x) => x.textSecondary}</span>`
-    )}
-		</span>`
-  )}`;
-}
-const ListboxOptionTemplate = (context) => {
-  const affixIconTemplate = affixIconTemplateFactory(context);
-  const iconTag = context.tagFor(Icon);
-  return html`
-		<template
-			${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, IconWrapper.Slot)} ${text()}
-				<slot name="trailing-meta"></slot>
-				${when(
-    (x) => x._displayCheckmark && x.selected,
-    html`<${iconTag} class="checkmark" name="check-line"></${iconTag}>`
-  )}
-			</div>
-		</template>
-	`;
-};
+				${(x) => !x.iconTrailing ? affixIconTemplate(x.icon, 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" ${slotted("_headingSlottedContent")}></slot>
+					${when((x) => x.heading && !x._headingSlottedContent?.length, html`${(x) => x.heading}`)}
+				</span>
 
-const listboxOptionDefinition = defineVividComponent(
-  "option",
-  ListboxOption,
-  ListboxOptionTemplate,
-  [iconDefinition],
-  {
-    styles
-  }
-);
-const registerOption = createRegisterFunction(listboxOptionDefinition);
+				<span class="meta">
+					<slot name="meta" ${slotted("_metaSlottedContent")}></slot>
+					${when((x) => x.meta && !x._metaSlottedContent?.length, html`${(x) => x.meta}`)}
+				</span>
 
-export { ListboxOption as L, isListboxOption as i, listboxOptionDefinition as l, registerOption as r };
+				${(x) => x.icon && x.iconTrailing ? affixIconTemplate(x.icon) : null}
+				${(x) => !(x.icon && x.iconTrailing) && !x.noIndicator ? affixIconTemplate(x.expanded ? "chevron-up-line" : "chevron-down-line") : null}
+
+			</button>
+		</${hTag}>
+	`;
+};
+var AccordionItemTemplate = (context) => html`
+	${(x) => header(context, "h" + x.headinglevel)}
+	<div
+		id="${(x) => x.id}-panel"
+		aria-labelledby="${(x) => x.id}"
+		role="region"
+		class="region ${(x) => x.icon && !x.iconTrailing ? "padded" : ""} ${(x) => x.size ? `size-${x.size}` : ""}"
+	>
+		<slot></slot>
+	</div>
+`;
+//#endregion
+//#region src/lib/accordion-item/definition.ts
+/**
+* @internal
+*/
+var accordionItemDefinition = defineVividComponent("accordion-item", AccordionItem, AccordionItemTemplate, [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 = createRegisterFunction(accordionItemDefinition);
+//#endregion
+export { registerAccordionItem as n, AccordionItem as r, accordionItemDefinition as t };

package/unbundled/definition30.cjs

@@ -0,0 +1,75 @@
+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_definition$1 = require("./definition29.cjs");
+let _microsoft_fast_element = require("@microsoft/fast-element");
+let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
+//#region src/lib/contextual-help/contextual-help.ts
+/**
+* @public
+* @component contextual-help
+* @slot - Default slot.
+* @slot icon - Custom icon slot (optional).
+*/
+var ContextualHelp = class extends require_vivid_element.VividElement {
+	constructor(..._args) {
+		super(..._args);
+		this.placement = "right";
+	}
+};
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "fromView" })], ContextualHelp.prototype, "placement", void 0);
+//#endregion
+//#region src/lib/contextual-help/contextual-help.template.ts
+var getClasses = (_) => (0, _microsoft_fast_web_utilities.classNames)("control");
+/**
+* The template for the ContextualHelp component.
+*
+* @param context - element definition context
+* @public
+*/
+var ContextualHelpTemplate = (context) => {
+	const toggletipTag = context.tagFor(require_definition$1.Toggletip);
+	const iconTag = context.tagFor(require_definition.Icon);
+	return _microsoft_fast_element.html`
+		<${toggletipTag} class="base" exportparts="vvd-theme-alternate">
+			<button class="${getClasses}" slot="anchor">
+        <slot name="icon" slot="icon">
+          <${iconTag} name="help-solid"></${iconTag}>
+        </slot>
+			</button>
+			<slot></slot>
+		</${toggletipTag}>
+	`;
+};
+//#endregion
+//#region src/lib/contextual-help/definition.ts
+/**
+* @internal
+*/
+var contextualHelpDefinition = require_vivid_element.defineVividComponent("contextual-help", ContextualHelp, ContextualHelpTemplate, [require_definition.iconDefinition, require_definition$1.toggletipDefinition], { styles: ".control{--_connotation-color-primary:var(--vvd-button-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-button-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-button-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-button-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm:var(--vvd-button-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-button-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-faint:var(--vvd-button-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-fierce-primary:var(--vvd-button-accent-fierce-primary,var(--vvd-color-canvas-text));--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control:disabled,.control.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)),.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control{--focus-stroke-gap-color:transparent;box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size,24px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);cursor:pointer;padding-inline:calc(var(--_button-block-size,24px) / 6);vertical-align:middle;border:0;border-radius:50%;justify-content:center;align-items:center;margin:0;display:inline-flex}@supports (aspect-ratio:auto){.control{aspect-ratio:1;padding:0}}.control: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))}slot[name=icon]{font-size:var(--_button-icon-size,16px);line-height:1}" });
+/**
+* Registers the contextual-help element with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerContextualHelp = require_vivid_element.createRegisterFunction(contextualHelpDefinition);
+//#endregion
+Object.defineProperty(exports, "ContextualHelp", {
+	enumerable: true,
+	get: function() {
+		return ContextualHelp;
+	}
+});
+Object.defineProperty(exports, "contextualHelpDefinition", {
+	enumerable: true,
+	get: function() {
+		return contextualHelpDefinition;
+	}
+});
+Object.defineProperty(exports, "registerContextualHelp", {
+	enumerable: true,
+	get: function() {
+		return registerContextualHelp;
+	}
+});

package/unbundled/definition30.js

@@ -0,0 +1,57 @@
+import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { r as Icon, t as iconDefinition } from "./definition2.js";
+import { t as __decorate } from "./decorate.js";
+import { n as toggletipDefinition, r as Toggletip } from "./definition29.js";
+import { attr, html } from "@microsoft/fast-element";
+import { classNames } from "@microsoft/fast-web-utilities";
+//#region src/lib/contextual-help/contextual-help.ts
+/**
+* @public
+* @component contextual-help
+* @slot - Default slot.
+* @slot icon - Custom icon slot (optional).
+*/
+var ContextualHelp = class extends VividElement {
+	constructor(..._args) {
+		super(..._args);
+		this.placement = "right";
+	}
+};
+__decorate([attr({ mode: "fromView" })], ContextualHelp.prototype, "placement", void 0);
+//#endregion
+//#region src/lib/contextual-help/contextual-help.template.ts
+var getClasses = (_) => classNames("control");
+/**
+* The template for the ContextualHelp component.
+*
+* @param context - element definition context
+* @public
+*/
+var ContextualHelpTemplate = (context) => {
+	const toggletipTag = context.tagFor(Toggletip);
+	const iconTag = context.tagFor(Icon);
+	return html`
+		<${toggletipTag} class="base" exportparts="vvd-theme-alternate">
+			<button class="${getClasses}" slot="anchor">
+        <slot name="icon" slot="icon">
+          <${iconTag} name="help-solid"></${iconTag}>
+        </slot>
+			</button>
+			<slot></slot>
+		</${toggletipTag}>
+	`;
+};
+//#endregion
+//#region src/lib/contextual-help/definition.ts
+/**
+* @internal
+*/
+var contextualHelpDefinition = defineVividComponent("contextual-help", ContextualHelp, ContextualHelpTemplate, [iconDefinition, toggletipDefinition], { styles: ".control{--_connotation-color-primary:var(--vvd-button-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-button-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-button-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-button-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm:var(--vvd-button-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-button-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-faint:var(--vvd-button-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-fierce-primary:var(--vvd-button-accent-fierce-primary,var(--vvd-color-canvas-text));--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control:disabled,.control.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)),.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control{--focus-stroke-gap-color:transparent;box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size,24px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);cursor:pointer;padding-inline:calc(var(--_button-block-size,24px) / 6);vertical-align:middle;border:0;border-radius:50%;justify-content:center;align-items:center;margin:0;display:inline-flex}@supports (aspect-ratio:auto){.control{aspect-ratio:1;padding:0}}.control: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))}slot[name=icon]{font-size:var(--_button-icon-size,16px);line-height:1}" });
+/**
+* Registers the contextual-help element with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerContextualHelp = createRegisterFunction(contextualHelpDefinition);
+//#endregion
+export { registerContextualHelp as n, ContextualHelp as r, contextualHelpDefinition as t };