@vonage/vivid 5.23.0 → 5.23.1

package/unbundled/definition22.js

@@ -1,160 +1,22 @@
 import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
-import { r as Icon, t as iconDefinition } from "./definition.js";
-import { t as __decorate } from "./decorate.js";
-import { n as delegateAria } from "./delegates-aria.js";
-import { t as Linkable } from "./linkable.js";
-import { t as Appearance } from "./enums.js";
-import { r as Elevation, t as elevationDefinition } from "./definition8.js";
-import { attr, html, observable, slotted, when } from "@microsoft/fast-element";
-import { classNames } from "@microsoft/fast-web-utilities";
-//#region src/lib/card/card.scss?inline
-var card_default = ":host{--_vvd-tinted-shadow-surface-0dp:drop-shadow(1px 0px 0px var(--card-border-color)) drop-shadow(0px 1px 0px var(--card-border-color)) drop-shadow(0px -1px 0px var(--card-border-color)) drop-shadow(-1px 0px 0px var(--card-border-color));display:flex}.base{text-align:start;border:0;border-radius:8px;outline:none;inline-size:100%;padding:0;text-decoration:none}.base:is(button,a):not(:disabled){cursor:pointer}.base:is(button,a):disabled{cursor:not-allowed}.base:is(button,a):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))}.wrapper{border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text);--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent;flex-flow:column;display:flex;overflow:hidden}@media (hover:hover){.wrapper:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.wrapper.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.wrapper:active:where(:not(.disabled,:disabled)),.wrapper.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.wrapper{--_connotation-color-primary:var(--vvd-card-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-card-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-card-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-card-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-card-cta-soft,var(--vvd-color-cta-100))}@media (hover:hover){.base:is(button,a):hover>.wrapper{background-color:var(--_appearance-color-fill)}}.main-content{flex-flow:column;padding:24px;display:flex}.body-wrapper{padding-top:16px}.hide-header .body-wrapper{padding-top:0}.hide-body .body-wrapper{display:none}.header{flex:1;align-items:flex-start;gap:8px;display:flex}.header-content{flex:1}.header-wrapper{gap:8px;display:flex}.header-headline,.header-subtitle{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.header-headline{font:var(--vvd-typography-heading-4);-webkit-line-clamp:var(--headline-line-clamp)}.header-subtitle{font:var(--vvd-typography-base);-webkit-line-clamp:var(--subtitle-line-clamp)}.hide-header .header{display:none}.header-subtitle,.text{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}.text{margin-top:12px;padding-right:8px}.footer{padding-bottom:24px;flex-direction:column;align-items:flex-end;margin-top:auto;padding-inline:24px;display:inline-flex}.hide-footer .footer{display:none}::slotted([slot=graphic i]),.icon{flex-shrink:0;align-self:baseline;margin-block-start:4px}.icon{font-size:20px}::slotted([slot=meta i]){flex-shrink:0;align-self:flex-start;margin-block-start:-8px;margin-inline:auto -8px}";
+import { html } from "@microsoft/fast-element";
+//#region src/lib/visually-hidden/visually-hidden.scss?inline
+var visually_hidden_default = ":host{display:contents}slot:not(:focus-within){clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;display:inline;position:absolute;overflow:hidden}";
 //#endregion
-//#region src/lib/card/card.ts
-/**
-* @public
-* @component card
-* @slot body - The body slot is for the main content of the card. Displayed between the header and footer content.
-* @slot graphic - The graphic slot overrides the icon property.
-* @slot media - The media slot is mainly for images or video content above the card header.
-* @slot meta - The meta slot is for action content in the card header.
-* @slot footer - The footer slot is for content in the card footer.
-* @slot main - Assign nodes to main slot to fully override a card's predefined flow and style with your own.
-* @testQuery headline headline
-*/
-var Card = class extends Linkable(VividElement) {
-	constructor(..._args) {
-		super(..._args);
-		this.clickableCard = false;
-	}
-};
-__decorate([attr], Card.prototype, "appearance", void 0);
-__decorate([attr], Card.prototype, "headline", void 0);
-__decorate([attr], Card.prototype, "subtitle", void 0);
-__decorate([attr], Card.prototype, "text", void 0);
-__decorate([attr], Card.prototype, "icon", void 0);
-__decorate([attr], Card.prototype, "elevation", void 0);
-__decorate([attr({
-	mode: "boolean",
-	attribute: "clickable-card"
-})], Card.prototype, "clickableCard", void 0);
-__decorate([observable], Card.prototype, "bodySlottedContent", void 0);
-__decorate([observable], Card.prototype, "footerSlottedContent", void 0);
-__decorate([observable], Card.prototype, "graphicSlottedContent", void 0);
-__decorate([observable], Card.prototype, "hasMetaSlottedContent", void 0);
+//#region src/lib/visually-hidden/visually-hidden.ts
+/** @component visually-hidden */
+var VisuallyHidden = class extends VividElement {};
 //#endregion
-//#region src/lib/card/card.template.ts
-var getClasses = (_) => classNames("base", ["hide-footer", !_.footerSlottedContent || !_.footerSlottedContent.length], ["hide-header", shouldHideHeader(_)], ["hide-body", !_.bodySlottedContent || !_.bodySlottedContent.length]);
-function renderHeaderIcon(iconTag) {
-	return html`
-		<${iconTag} class="icon" inline name="${(x) => x.icon}"></${iconTag}>`;
-}
-function Headline() {
-	return html`
-		<div class="header-headline" id="card-headline">${(x) => x.headline}</div>
-	`;
-}
-function Subtitle() {
-	return html` <div class="header-subtitle">${(x) => x.subtitle}</div> `;
-}
-function headerContent() {
-	return html`
-		<div class="header-content">
-			${when((x) => x.headline, Headline())}
-			${when((x) => x.subtitle, Subtitle())}
-		</div>
-	`;
-}
-/**
-header
-*/
-function renderHeader(iconTag) {
-	return html` <div class="header">
-		<slot name="graphic" ${slotted("graphicSlottedContent")}
-			>${when((x) => x.icon, renderHeaderIcon(iconTag))}</slot
-		>
-		${when((x) => x.headline || x.subtitle, headerContent())}
-	</div>`;
-}
-function shouldHideHeader(card) {
-	return !card.headline && !card.subtitle && !card.icon && (!card.graphicSlottedContent || !card.graphicSlottedContent.length);
-}
-function renderMetaSlot() {
-	return html` <slot name="meta" ${slotted("metaSlottedContent")}></slot> `;
-}
-function text() {
-	return html` <div class="text">${(x) => x.text}</div> `;
-}
-function renderButtonElement(content) {
-	return html`<button
-		class="${getClasses}"
-		type="button"
-		${delegateAria({ ariaLabelledBy: (x) => x.headline ? "card-headline" : null })}
-	>
-		${content}
-	</button>`;
-}
-function renderCardBaseElement(x, content) {
-	if (x.href) return x._renderLinkElement(content, getClasses);
-	else if (x.clickableCard) return renderButtonElement(content);
-	else return html`<div
-			class="${getClasses}"
-			aria-labelledby="${(x) => x.headline ? "card-headline" : null}"
-		>
-			${content}
-		</div>`;
-}
-function renderCardContent(context) {
-	const iconTag = context.tagFor(Icon);
-	return html`
-		${(x) => renderCardBaseElement(x, html`<div class="wrapper">
-					<div class="vwc-card-media">
-						<slot name="media"></slot>
-					</div>
-					<slot name="main">
-						<div class="main-content">
-							<div class="header-wrapper">
-								${renderHeader(iconTag)} ${renderMetaSlot()}
-							</div>
-							${when((x) => x.text, text())}
-							<div class="body-wrapper">
-								<slot name="body" ${slotted("bodySlottedContent")}></slot>
-							</div>
-						</div>
-					</slot>
-					<div class="footer">
-						<slot name="footer" ${slotted("footerSlottedContent")}></slot>
-					</div>
-				</div> `)}
-	`;
-}
-var CardTemplate = (context) => {
-	const elevationTag = context.tagFor(Elevation);
-	return html`
-		${when((x) => x.appearance !== Appearance.Ghost && x.appearance !== Appearance.Outlined, html`
-			<${elevationTag} dp=${(x) => x.elevation ?? "4"}>
-			  ${renderCardContent(context)}
-			</${elevationTag}>
-		`)}
-		${when((x) => x.appearance === Appearance.Outlined, html`
-			<${elevationTag} dp='0')}>
-			  ${renderCardContent(context)}
-			</${elevationTag}>
-		`)}
-		${when((x) => x.appearance === Appearance.Ghost, html` ${renderCardContent(context)} `)}
-	`;
-};
+//#region src/lib/visually-hidden/visually-hidden.template.ts
+var VisuallyHiddenTemplate = () => html`<slot></slot>`;
 //#endregion
-//#region src/lib/card/definition.ts
-/**
-* @internal
-*/
-var cardDefinition = defineVividComponent("card", Card, CardTemplate, [iconDefinition, elevationDefinition], { styles: card_default });
+//#region src/lib/visually-hidden/definition.ts
+var visuallyHiddenDefinition = defineVividComponent("visually-hidden", VisuallyHidden, VisuallyHiddenTemplate, [], { styles: visually_hidden_default });
 /**
-* Registers the card elements with the design system.
+* Registers the visually-hidden element with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerCard = createRegisterFunction(cardDefinition);
+var registerVisuallyHidden = createRegisterFunction(visuallyHiddenDefinition);
 //#endregion
-export { registerCard as n, Card as r, cardDefinition as t };
+export { visuallyHiddenDefinition as n, VisuallyHidden as r, registerVisuallyHidden as t };

package/unbundled/definition23.cjs

@@ -4,14 +4,14 @@ const require_definition = require("./definition.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_delegates_aria = require("./delegates-aria.cjs");
 const require_form_associated = require("./form-associated.cjs");
+const require_mixins = require("./mixins.cjs");
 const require_form_element = require("./form-element.cjs");
-const require_with_success_text = require("./with-success-text.cjs");
 const require_with_error_text = require("./with-error-text.cjs");
-const require_mixins = require("./mixins.cjs");
+const require_with_success_text = require("./with-success-text.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@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-600);--_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}";
+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-600);--_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}.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
@@ -28,9 +28,7 @@ var checkbox_default = ":host{vertical-align:middle;--_low-ink-color:var(--vvd-c
 * @testRef control shadow div.control
 */
 var Checkbox = class extends require_delegates_aria.DelegatesAria(require_mixins.WithFeedback(require_with_error_text.WithErrorText(require_with_success_text.WithSuccessText(require_form_element.FormElement(require_form_associated.CheckableFormAssociated(require_vivid_element.VividElement)))))) {
-	/**
-	* @internal
-	*/
+	/** @internal */
 	readOnlyChanged() {
 		/* v8 ignore if -- @preserve */
 		if (this.proxy instanceof HTMLInputElement) this.proxy.readOnly = this.readOnly;
@@ -62,9 +60,7 @@ var Checkbox = class extends require_delegates_aria.DelegatesAria(require_mixins
 		};
 		this.proxy.setAttribute("type", "checkbox");
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	ariaCheckedChanged(oldValue, newValue) {
 		super.ariaCheckedChanged(oldValue, newValue);
 		if (this.ariaChecked === "mixed") this.indeterminate = true;
@@ -73,9 +69,7 @@ var Checkbox = class extends require_delegates_aria.DelegatesAria(require_mixins
 			this.checked = this.ariaChecked === "true" ? true : false;
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	checkedChanged(prev, next) {
 		super.checkedChanged(prev, next);
 		this.ariaChecked = next ? "true" : "false";
@@ -96,12 +90,11 @@ require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
 require_decorate.__decorate([_microsoft_fast_element.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 }) => (0, _microsoft_fast_web_utilities.classNames)("base", [`connotation-${connotation}`, Boolean(connotation)], ["readonly", readOnly], ["checked", checked || indeterminate], ["disabled", disabled], ["error connotation-alert", Boolean(errorValidationMessage)], ["success connotation-success", !!successText], ["hide-label", !label && !slottedContent?.length]);
 var CheckboxTemplate = (context) => {
 	const iconTag = context.tagFor(require_definition.Icon);
 	return _microsoft_fast_element.html`<template>
 		<div
-			class="${getClasses}"
+			class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", [`connotation-${x.connotation}`, Boolean(x.connotation)], ["readonly", x.readOnly], ["checked", x.checked || x.indeterminate], ["disabled", x.disabled], ["error connotation-alert", Boolean(x.errorValidationMessage)], ["success connotation-success", !!x.successText], ["hide-label", !x.label && !x.slottedContent?.length])}"
 			${require_delegates_aria.delegateAria({
 		role: "checkbox",
 		ariaChecked: (x) => x.indeterminate ? "mixed" : x.checked,
@@ -127,9 +120,7 @@ var CheckboxTemplate = (context) => {
 };
 //#endregion
 //#region src/lib/checkbox/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var checkboxDefinition = require_vivid_element.defineVividComponent("checkbox", Checkbox, CheckboxTemplate, [require_definition.iconDefinition, require_mixins.feedbackMessageDefinition], {
 	styles: checkbox_default,
 	shadowOptions: { delegatesFocus: true }

package/unbundled/definition23.js

@@ -3,14 +3,14 @@ import { r as Icon, t as iconDefinition } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
 import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
 import { t as CheckableFormAssociated } from "./form-associated.js";
+import { r as feedbackMessageDefinition, t as WithFeedback } from "./mixins.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 { r as feedbackMessageDefinition, t as WithFeedback } from "./mixins.js";
+import { t as WithSuccessText } from "./with-success-text.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-600);--_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}";
+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-600);--_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}.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
@@ -27,9 +27,7 @@ var checkbox_default = ":host{vertical-align:middle;--_low-ink-color:var(--vvd-c
 * @testRef control shadow div.control
 */
 var Checkbox = class extends DelegatesAria(WithFeedback(WithErrorText(WithSuccessText(FormElement(CheckableFormAssociated(VividElement)))))) {
-	/**
-	* @internal
-	*/
+	/** @internal */
 	readOnlyChanged() {
 		/* v8 ignore if -- @preserve */
 		if (this.proxy instanceof HTMLInputElement) this.proxy.readOnly = this.readOnly;
@@ -61,9 +59,7 @@ var Checkbox = class extends DelegatesAria(WithFeedback(WithErrorText(WithSucces
 		};
 		this.proxy.setAttribute("type", "checkbox");
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	ariaCheckedChanged(oldValue, newValue) {
 		super.ariaCheckedChanged(oldValue, newValue);
 		if (this.ariaChecked === "mixed") this.indeterminate = true;
@@ -72,9 +68,7 @@ var Checkbox = class extends DelegatesAria(WithFeedback(WithErrorText(WithSucces
 			this.checked = this.ariaChecked === "true" ? true : false;
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	checkedChanged(prev, next) {
 		super.checkedChanged(prev, next);
 		this.ariaChecked = next ? "true" : "false";
@@ -95,12 +89,11 @@ __decorate([attr({
 __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", readOnly], ["checked", checked || indeterminate], ["disabled", 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}"
+			class="${(x) => classNames("base", [`connotation-${x.connotation}`, Boolean(x.connotation)], ["readonly", x.readOnly], ["checked", x.checked || x.indeterminate], ["disabled", x.disabled], ["error connotation-alert", Boolean(x.errorValidationMessage)], ["success connotation-success", !!x.successText], ["hide-label", !x.label && !x.slottedContent?.length])}"
 			${delegateAria({
 		role: "checkbox",
 		ariaChecked: (x) => x.indeterminate ? "mixed" : x.checked,
@@ -126,9 +119,7 @@ var CheckboxTemplate = (context) => {
 };
 //#endregion
 //#region src/lib/checkbox/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var checkboxDefinition = defineVividComponent("checkbox", Checkbox, CheckboxTemplate, [iconDefinition, feedbackMessageDefinition], {
 	styles: checkbox_default,
 	shadowOptions: { delegatesFocus: true }

package/unbundled/definition24.cjs

@@ -3,7 +3,7 @@ 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_definition = require("./definition9.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");
@@ -42,9 +42,7 @@ var Toggletip = class extends require_localized.Localized(require_anchored.Ancho
 		};
 	}
 	#originalAriaLabel;
-	/**
-	* @internal
-	*/
+	/** @internal */
 	openChanged(oldValue, newValue) {
 		if (oldValue === void 0) return;
 		if (newValue) this.setAttribute("role", "status");
@@ -60,9 +58,7 @@ var Toggletip = class extends require_localized.Localized(require_anchored.Ancho
 		super.disconnectedCallback();
 		this.#updateListeners();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_anchorElChanged(oldValue, newValue) {
 		if (oldValue) this.#cleanupAnchor(oldValue);
 		if (newValue) this.#setupAnchor(newValue);
@@ -130,9 +126,7 @@ var ToggletipTemplate = (context) => {
 };
 //#endregion
 //#region src/lib/toggletip/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var toggletipDefinition = require_vivid_element.defineVividComponent("toggletip", Toggletip, ToggletipTemplate, [require_definition.popupDefinition], { styles: toggletip_default });
 /**
 * Registers the toggletip element with the design system.

package/unbundled/definition24.js

@@ -2,7 +2,7 @@ import { d as createRegisterFunction, t as VividElement, u as defineVividCompone
 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 { i as Popup, t as popupDefinition } from "./definition9.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";
@@ -41,9 +41,7 @@ var Toggletip = class extends Localized(Anchored(VividElement)) {
 		};
 	}
 	#originalAriaLabel;
-	/**
-	* @internal
-	*/
+	/** @internal */
 	openChanged(oldValue, newValue) {
 		if (oldValue === void 0) return;
 		if (newValue) this.setAttribute("role", "status");
@@ -59,9 +57,7 @@ var Toggletip = class extends Localized(Anchored(VividElement)) {
 		super.disconnectedCallback();
 		this.#updateListeners();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_anchorElChanged(oldValue, newValue) {
 		if (oldValue) this.#cleanupAnchor(oldValue);
 		if (newValue) this.#setupAnchor(newValue);
@@ -129,9 +125,7 @@ var ToggletipTemplate = (context) => {
 };
 //#endregion
 //#region src/lib/toggletip/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var toggletipDefinition = defineVividComponent("toggletip", Toggletip, ToggletipTemplate, [popupDefinition], { styles: toggletip_default });
 /**
 * Registers the toggletip element with the design system.

package/unbundled/definition25.cjs

@@ -22,12 +22,6 @@ require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "fromView
 //#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);
@@ -44,10 +38,8 @@ var ContextualHelpTemplate = (context) => {
 };
 //#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}" });
+/** @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.
 *

package/unbundled/definition25.js

@@ -21,12 +21,6 @@ __decorate([attr({ mode: "fromView" })], ContextualHelp.prototype, "placement",
 //#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);
@@ -43,10 +37,8 @@ var ContextualHelpTemplate = (context) => {
 };
 //#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}" });
+/** @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.
 *