@vonage/vivid 5.15.1 → 5.17.0

package/unbundled/definition23.js

@@ -0,0 +1,143 @@
+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 delegateAria, t as DelegatesAria } from "./delegates-aria.js";
+import { t as CheckableFormAssociated } from "./form-associated.js";
+import { t as FormElement } from "./form-element.js";
+import { t as WithSuccessText } from "./with-success-text.js";
+import { t as WithErrorText } from "./with-error-text.js";
+import { a as feedbackMessageDefinition, t as WithFeedback } from "./mixins.js";
+import { attr, html, observable, slotted, when } from "@microsoft/fast-element";
+import { classNames } from "@microsoft/fast-web-utilities";
+//#region src/lib/checkbox/checkbox.scss?inline
+var checkbox_default = ":host{vertical-align:middle;--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-checkbox-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-checkbox-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-checkbox-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-checkbox-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-intermediate:var(--vvd-checkbox-cta-intermediate,var(--vvd-color-cta-500));--_connotation-color-firm:var(--vvd-checkbox-cta-firm,var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-checkbox-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-checkbox-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-checkbox-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-checkbox-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-intermediate:var(--vvd-checkbox-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--vvd-checkbox-accent-firm,var(--vvd-color-canvas-text))}.base{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:checked:where(:not(.disabled,:disabled)),.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:var(--_connotation-color-primary)}@media (hover:hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.base{vertical-align:middle;align-items:start;gap:8px;display:inline-flex}.base:focus-visible{outline:none}@supports (user-select:none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{background-color:var(--_appearance-color-fill);block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.base:focus-visible .control{--focus-stroke-gap-color:transparent}.base:focus-visible .control:after{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));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.base.error:not(.checked) .control{background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) - 4px)}.base:not(.checked) .indicator.checkmark,.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base);flex-wrap:wrap;align-items:center;column-gap:4px;display:flex}.hide-label label{display:none}.icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) * .6);line-height:1}";
+/**
+* @public
+* @component checkbox
+* @slot - The default slot allows you to use rich content as the checkbox's label.
+* @slot helper-text - Describes how to use the checkbox. Alternative to the `helper-text` attribute.
+* @event {CustomEvent<undefined>} change - Emitted when the checked state changes.
+* @event {CustomEvent<undefined>} input - Emitted when the checked state changes.
+* @vueModel modelValue checked change `event.currentTarget.checked`
+* @testAction check check #control
+* @testAction uncheck uncheck #control
+* @testQuery checked checkedState "checked"
+* @testQuery unchecked checkedState "unchecked"
+* @testQuery indeterminate checkedState "indeterminate"
+* @testRef control shadow div.control
+*/
+var Checkbox = class extends DelegatesAria(WithFeedback(WithErrorText(WithSuccessText(FormElement(CheckableFormAssociated(VividElement)))))) {
+	/**
+	* @internal
+	*/
+	readOnlyChanged() {
+		/* v8 ignore if -- @preserve */
+		if (this.proxy instanceof HTMLInputElement) this.proxy.readOnly = this.readOnly;
+	}
+	constructor() {
+		super();
+		this.tabindex = null;
+		this.proxy = document.createElement("input");
+		this.initialValue = "on";
+		this.defaultSlottedNodes = [];
+		this.indeterminate = false;
+		this.keypressHandler = (event) => {
+			if (event.target instanceof HTMLAnchorElement) return true;
+			if (!this.disabled && !this.readOnly) switch (event.key) {
+				case " ":
+					if (this.indeterminate) this.indeterminate = false;
+					this.checked = !this.checked;
+					break;
+			}
+			return false;
+		};
+		this.clickHandler = (event) => {
+			if (event.target instanceof HTMLAnchorElement) return true;
+			if (!this.disabled && !this.readOnly) {
+				if (this.indeterminate) this.indeterminate = false;
+				this.checked = !this.checked;
+			}
+			return false;
+		};
+		this.proxy.setAttribute("type", "checkbox");
+	}
+	/**
+	* @internal
+	*/
+	ariaCheckedChanged(oldValue, newValue) {
+		super.ariaCheckedChanged(oldValue, newValue);
+		if (this.ariaChecked === "mixed") this.indeterminate = true;
+		else {
+			this.indeterminate = false;
+			this.checked = this.ariaChecked === "true" ? true : false;
+		}
+	}
+	/**
+	* @internal
+	*/
+	checkedChanged(prev, next) {
+		super.checkedChanged(prev, next);
+		this.ariaChecked = next == true ? "true" : "false";
+		if (prev !== void 0) this.$emit("input");
+	}
+};
+__decorate([attr({ attribute: "tabindex" })], Checkbox.prototype, "tabindex", void 0);
+__decorate([attr], Checkbox.prototype, "connotation", void 0);
+__decorate([attr({
+	attribute: "readonly",
+	mode: "boolean"
+})], Checkbox.prototype, "readOnly", void 0);
+__decorate([observable], Checkbox.prototype, "defaultSlottedNodes", void 0);
+__decorate([attr({
+	attribute: "indeterminate",
+	mode: "boolean"
+})], Checkbox.prototype, "indeterminate", void 0);
+__decorate([observable], Checkbox.prototype, "slottedContent", void 0);
+//#endregion
+//#region src/lib/checkbox/checkbox.template.ts
+var getClasses = ({ connotation, readOnly, checked, disabled, indeterminate, errorValidationMessage, successText, label, slottedContent }) => classNames("base", [`connotation-${connotation}`, Boolean(connotation)], ["readonly", Boolean(readOnly)], ["checked", Boolean(checked) || Boolean(indeterminate)], ["disabled", Boolean(disabled)], ["error connotation-alert", Boolean(errorValidationMessage)], ["success connotation-success", !!successText], ["hide-label", !label && !slottedContent?.length]);
+var CheckboxTemplate = (context) => {
+	const iconTag = context.tagFor(Icon);
+	return html`<template>
+		<div
+			class="${getClasses}"
+			aria-describedby="${(x) => x._feedbackDescribedBy}"
+			${delegateAria({
+		role: "checkbox",
+		ariaChecked: (x) => x.indeterminate ? "mixed" : x.checked,
+		ariaRequired: (x) => x.required,
+		ariaDisabled: (x) => x.disabled,
+		ariaReadOnly: (x) => x.readOnly
+	})}
+			tabindex="${(x) => x.tabindex !== null ? x.tabindex : x.disabled ? null : 0}"
+			@keypress="${(x, c) => x.keypressHandler(c.event)}"
+			@click="${(x, c) => x.clickHandler(c.event)}"
+		>
+			<div class="control">
+				${when((x) => x.checked && !x.indeterminate, html`<${iconTag} name="check-solid" class="icon"></${iconTag}>`)}
+				${when((x) => x.indeterminate, html`<${iconTag} name="minus-solid" class="icon"></${iconTag}>`)}
+			</div>
+			${html`<label
+				>${(x) => x.label}<slot ${slotted("slottedContent")}></slot
+			></label>`}
+		</div>
+		${(x) => x._getFeedbackTemplate(context)}
+	</template>`;
+};
+//#endregion
+//#region src/lib/checkbox/definition.ts
+/**
+* @internal
+*/
+var checkboxDefinition = defineVividComponent("checkbox", Checkbox, CheckboxTemplate, [iconDefinition, feedbackMessageDefinition], {
+	styles: checkbox_default,
+	shadowOptions: { delegatesFocus: true }
+});
+/**
+* Registers the checkbox elements with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerCheckbox = createRegisterFunction(checkboxDefinition);
+//#endregion
+export { registerCheckbox as n, Checkbox as r, checkboxDefinition as t };

package/unbundled/definition24.cjs

@@ -0,0 +1,157 @@
+require("./chunk.cjs");
+const require_vivid_element = require("./vivid-element.cjs");
+const require_decorate = require("./decorate.cjs");
+const require_localized = require("./localized.cjs");
+const require_dialog = require("./dialog.cjs");
+const require_definition = require("./definition10.cjs");
+const require_anchored = require("./anchored.cjs");
+let _microsoft_fast_element = require("@microsoft/fast-element");
+let _microsoft_fast_web_utilities = require("@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 require_localized.Localized(require_anchored.Anchored(require_vivid_element.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) _microsoft_fast_element.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;
+	};
+};
+require_decorate.__decorate([_microsoft_fast_element.attr], Toggletip.prototype, "headline", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Toggletip.prototype, "alternate", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "fromView" })], Toggletip.prototype, "placement", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Toggletip.prototype, "open", void 0);
+//#endregion
+//#region src/lib/toggletip/toggletip.template.ts
+var getClasses = (_) => (0, _microsoft_fast_web_utilities.classNames)("control");
+var ToggletipTemplate = (context) => {
+	const popup = context.tagFor(require_definition.Popup);
+	return _microsoft_fast_element.html`
+		${require_anchored.anchorSlotTemplateFactory()}
+		<${popup}
+			@keydown="${(x, { event }) => {
+		if (x.open && require_dialog.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">
+				${(0, _microsoft_fast_element.when)((x) => x.headline, _microsoft_fast_element.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 = require_vivid_element.defineVividComponent("toggletip", Toggletip, ToggletipTemplate, [require_definition.popupDefinition], { styles: toggletip_default });
+/**
+* Registers the toggletip element with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerToggletip = require_vivid_element.createRegisterFunction(toggletipDefinition);
+//#endregion
+Object.defineProperty(exports, "Toggletip", {
+	enumerable: true,
+	get: function() {
+		return Toggletip;
+	}
+});
+Object.defineProperty(exports, "registerToggletip", {
+	enumerable: true,
+	get: function() {
+		return registerToggletip;
+	}
+});
+Object.defineProperty(exports, "toggletipDefinition", {
+	enumerable: true,
+	get: function() {
+		return toggletipDefinition;
+	}
+});

package/unbundled/definition24.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/definition25.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("./definition24.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/definition25.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 "./definition24.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 };