@vonage/vivid 5.23.0 → 5.23.1

package/unbundled/definition55.cjs

@@ -4,13 +4,13 @@ const require_definition = require("./definition.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_delegates_aria = require("./delegates-aria.cjs");
 const require_localized = require("./localized.cjs");
-const require_definition$1 = require("./definition7.cjs");
-const require_definition$2 = require("./definition8.cjs");
+const require_definition$1 = require("./definition6.cjs");
+const require_definition$2 = require("./definition7.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 let _floating_ui_dom = require("@floating-ui/dom");
 //#region src/lib/popover/popover.scss?inline
-var popover_default = ":host{display:inline-block}.base{white-space:initial;--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base ::-webkit-scrollbar{width:4px}.base ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base{border:none;border-radius:8px;inline-size:max-content;min-inline-size:fit-content;margin:0;padding:0;position:fixed;overflow:visible}.base:focus-visible{outline:none}.base::backdrop{background-color:var(--popover-backdrop-bg,transparent)}.control{padding:var(--popover-padding,24px);border-radius:inherit;background:var(--vvd-color-surface-4dp);color:var(--vvd-color-canvas-text);gap:var(--popover-gap,24px);flex-direction:column;display:flex}.control:not(.open){display:none}.control.condensed{--popover-padding:12px;--popover-gap:12px}.control.manual{padding-block-start:40px}.arrow{z-index:-1;background:var(--vvd-color-surface-4dp);width:8px;height:8px;position:absolute;transform:rotate(45deg)}.dismiss-button{position:absolute;inset-block-start:4px;inset-inline-end:4px}";
+var popover_default = ":host{display:inline-block}.base{white-space:initial;--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in sRGB, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base ::-webkit-scrollbar{width:4px}.base ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base{border:none;border-radius:8px;inline-size:max-content;min-inline-size:fit-content;margin:0;padding:0;position:fixed;overflow:visible}.base:focus-visible{outline:none}.base::backdrop{background-color:var(--popover-backdrop-bg,transparent)}.control{padding:var(--popover-padding,24px);border-radius:inherit;background:var(--vvd-color-surface-4dp);color:var(--vvd-color-canvas-text);gap:var(--popover-gap,24px);flex-direction:column;display:flex}.control:not(.open){display:none}.control.condensed{--popover-padding:12px;--popover-gap:12px}.control.manual{padding-block-start:40px}.arrow{z-index:-1;background:var(--vvd-color-surface-4dp);width:8px;height:8px;position:absolute;transform:rotate(45deg)}.dismiss-button{position:absolute;inset-block-start:4px;inset-inline-end:4px}";
 //#endregion
 //#region src/lib/popover/popover.ts
 /**
@@ -46,21 +46,15 @@ var Popover = class extends require_localized.Localized(require_delegates_aria.D
 			this.$emit(isOpen ? "open" : "close", void 0, { bubbles: false });
 		};
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	placementChanged() {
 		this.#updateAutoUpdate();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	arrowChanged() {
 		this.#updateAutoUpdate();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	openChanged(_oldValue, newValue) {
 		if (!this._popoverEl) return;
 		const isOpen = this._popoverEl.matches(":popover-open");
@@ -68,25 +62,17 @@ var Popover = class extends require_localized.Localized(require_delegates_aria.D
 		else if (!newValue && isOpen) this._popoverEl.hidePopover();
 		this.#updateAutoUpdate();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	anchorChanged() {
 		this.#updateAnchor();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_slottedAnchorChanged() {
 		this.#updateAnchor();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	#currentAnchor;
-	/**
-	* @internal
-	*/
+	/** @internal */
 	#updateAnchor() {
 		if (!this._popoverEl) return;
 		const newAnchor = this.anchor || this._slottedAnchor?.[0] || null;
@@ -98,29 +84,21 @@ var Popover = class extends require_localized.Localized(require_delegates_aria.D
 			this.#updateAutoUpdate();
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	#bindTrigger(anchor) {
 		anchor.setAttribute("aria-haspopup", "dialog");
 		if (anchor instanceof HTMLButtonElement || anchor instanceof HTMLInputElement) anchor.popoverTargetElement = this._popoverEl;
 		else anchor.addEventListener("click", this.#manualToggle);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	#unbindTrigger(anchor) {
 		anchor.removeAttribute("aria-haspopup");
 		if (anchor instanceof HTMLButtonElement || anchor instanceof HTMLInputElement) anchor.popoverTargetElement = null;
 		else anchor.removeEventListener("click", this.#manualToggle);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	#manualToggle;
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get #middleware() {
 		let middleware = [
 			(0, _floating_ui_dom.inline)(),
@@ -141,13 +119,9 @@ var Popover = class extends require_localized.Localized(require_delegates_aria.D
 		if (offsetValue > 0) middleware.unshift((0, _floating_ui_dom.offset)(offsetValue));
 		return middleware;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	#cleanup;
-	/**
-	* @internal
-	*/
+	/** @internal */
 	#updateAutoUpdate() {
 		this.#cleanup?.();
 		if (this.open && this.#currentAnchor && this._popoverEl) this.#cleanup = (0, _floating_ui_dom.autoUpdate)(this.#currentAnchor, this._popoverEl, this.#autoUpdateCallback);
@@ -157,14 +131,9 @@ var Popover = class extends require_localized.Localized(require_delegates_aria.D
 	* @internal
 	*/
 	#lastPositionUpdate;
-	/**
-	* @internal
-	*/
+	/** @internal */
 	#autoUpdateCallback;
-	/**
-	* Updates the position of the popover
-	* @public
-	*/
+	/** Updates the position of the popover */
 	async updatePosition() {
 		/* v8 ignore if -- @preserve */
 		if (!this.open || !this.#currentAnchor || !this._popoverEl) return;
@@ -178,9 +147,7 @@ var Popover = class extends require_localized.Localized(require_delegates_aria.D
 		this.#assignPopoverPosition(positionData);
 		if (this.arrow && this._arrowEl) this.#assignArrowPosition(positionData);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	#assignPopoverPosition(data) {
 		const { x, y } = data;
 		Object.assign(this._popoverEl.style, {
@@ -189,9 +156,7 @@ var Popover = class extends require_localized.Localized(require_delegates_aria.D
 			visibility: data.middlewareData.hide?.referenceHidden ? "hidden" : "visible"
 		});
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	#assignArrowPosition(data) {
 		/* v8 ignore if -- @preserve */
 		if (!this._arrowEl) return;
@@ -262,13 +227,6 @@ require_decorate.__decorate([_microsoft_fast_element.observable], Popover.protot
 require_decorate.__decorate([_microsoft_fast_element.observable], Popover.prototype, "_slottedAnchor", void 0);
 //#endregion
 //#region src/lib/popover/popover.template.ts
-var getClasses = ({ open, manual, layout }) => (0, _microsoft_fast_web_utilities.classNames)("control", ["open", open], ["manual", manual], ["condensed", layout === "condensed"]);
-/**
-* The template for the Popover component.
-*
-* @param context - element definition context
-* @public
-*/
 var popoverTemplate = (context) => {
 	const elevationTag = context.tagFor(require_definition$2.Elevation);
 	const buttonTag = context.tagFor(require_definition$1.Button);
@@ -276,8 +234,8 @@ var popoverTemplate = (context) => {
 	return _microsoft_fast_element.html`
 		<slot name="anchor" ${(0, _microsoft_fast_element.slotted)("_slottedAnchor")}></slot>
 		<${elevationTag}>
-			<div class="base" 
-				${(0, _microsoft_fast_element.ref)("_popoverEl")} 
+			<div class="base"
+				${(0, _microsoft_fast_element.ref)("_popoverEl")}
 				popover="${(x) => x.manual ? "manual" : "auto"}"
 				tabindex="-1"
 				autofocus
@@ -286,7 +244,7 @@ var popoverTemplate = (context) => {
 		ariaModal: "false"
 	})}
 			>
-				<div class="${getClasses}" 
+				<div class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("control", ["open", x.open], ["manual", x.manual], ["condensed", x.layout === "condensed"])}"
 					part="${(x) => x.alternate ? "vvd-theme-alternate" : ""}">
 					<slot></slot>
 					<slot name="footer"></slot>

package/unbundled/definition55.js

@@ -3,13 +3,13 @@ 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 Localized } from "./localized.js";
-import { i as Button, t as buttonDefinition } from "./definition7.js";
-import { r as Elevation, t as elevationDefinition } from "./definition8.js";
+import { i as Button, t as buttonDefinition } from "./definition6.js";
+import { r as Elevation, t as elevationDefinition } from "./definition7.js";
 import { attr, html, nullableNumberConverter, observable, ref, slotted, when } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
 import { arrow, autoUpdate, computePosition, flip, hide, inline, offset, shift } from "@floating-ui/dom";
 //#region src/lib/popover/popover.scss?inline
-var popover_default = ":host{display:inline-block}.base{white-space:initial;--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base ::-webkit-scrollbar{width:4px}.base ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base{border:none;border-radius:8px;inline-size:max-content;min-inline-size:fit-content;margin:0;padding:0;position:fixed;overflow:visible}.base:focus-visible{outline:none}.base::backdrop{background-color:var(--popover-backdrop-bg,transparent)}.control{padding:var(--popover-padding,24px);border-radius:inherit;background:var(--vvd-color-surface-4dp);color:var(--vvd-color-canvas-text);gap:var(--popover-gap,24px);flex-direction:column;display:flex}.control:not(.open){display:none}.control.condensed{--popover-padding:12px;--popover-gap:12px}.control.manual{padding-block-start:40px}.arrow{z-index:-1;background:var(--vvd-color-surface-4dp);width:8px;height:8px;position:absolute;transform:rotate(45deg)}.dismiss-button{position:absolute;inset-block-start:4px;inset-inline-end:4px}";
+var popover_default = ":host{display:inline-block}.base{white-space:initial;--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in sRGB, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base ::-webkit-scrollbar{width:4px}.base ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base{border:none;border-radius:8px;inline-size:max-content;min-inline-size:fit-content;margin:0;padding:0;position:fixed;overflow:visible}.base:focus-visible{outline:none}.base::backdrop{background-color:var(--popover-backdrop-bg,transparent)}.control{padding:var(--popover-padding,24px);border-radius:inherit;background:var(--vvd-color-surface-4dp);color:var(--vvd-color-canvas-text);gap:var(--popover-gap,24px);flex-direction:column;display:flex}.control:not(.open){display:none}.control.condensed{--popover-padding:12px;--popover-gap:12px}.control.manual{padding-block-start:40px}.arrow{z-index:-1;background:var(--vvd-color-surface-4dp);width:8px;height:8px;position:absolute;transform:rotate(45deg)}.dismiss-button{position:absolute;inset-block-start:4px;inset-inline-end:4px}";
 //#endregion
 //#region src/lib/popover/popover.ts
 /**
@@ -45,21 +45,15 @@ var Popover = class extends Localized(DelegatesAria(VividElement)) {
 			this.$emit(isOpen ? "open" : "close", void 0, { bubbles: false });
 		};
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	placementChanged() {
 		this.#updateAutoUpdate();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	arrowChanged() {
 		this.#updateAutoUpdate();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	openChanged(_oldValue, newValue) {
 		if (!this._popoverEl) return;
 		const isOpen = this._popoverEl.matches(":popover-open");
@@ -67,25 +61,17 @@ var Popover = class extends Localized(DelegatesAria(VividElement)) {
 		else if (!newValue && isOpen) this._popoverEl.hidePopover();
 		this.#updateAutoUpdate();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	anchorChanged() {
 		this.#updateAnchor();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_slottedAnchorChanged() {
 		this.#updateAnchor();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	#currentAnchor;
-	/**
-	* @internal
-	*/
+	/** @internal */
 	#updateAnchor() {
 		if (!this._popoverEl) return;
 		const newAnchor = this.anchor || this._slottedAnchor?.[0] || null;
@@ -97,29 +83,21 @@ var Popover = class extends Localized(DelegatesAria(VividElement)) {
 			this.#updateAutoUpdate();
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	#bindTrigger(anchor) {
 		anchor.setAttribute("aria-haspopup", "dialog");
 		if (anchor instanceof HTMLButtonElement || anchor instanceof HTMLInputElement) anchor.popoverTargetElement = this._popoverEl;
 		else anchor.addEventListener("click", this.#manualToggle);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	#unbindTrigger(anchor) {
 		anchor.removeAttribute("aria-haspopup");
 		if (anchor instanceof HTMLButtonElement || anchor instanceof HTMLInputElement) anchor.popoverTargetElement = null;
 		else anchor.removeEventListener("click", this.#manualToggle);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	#manualToggle;
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get #middleware() {
 		let middleware = [
 			inline(),
@@ -140,13 +118,9 @@ var Popover = class extends Localized(DelegatesAria(VividElement)) {
 		if (offsetValue > 0) middleware.unshift(offset(offsetValue));
 		return middleware;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	#cleanup;
-	/**
-	* @internal
-	*/
+	/** @internal */
 	#updateAutoUpdate() {
 		this.#cleanup?.();
 		if (this.open && this.#currentAnchor && this._popoverEl) this.#cleanup = autoUpdate(this.#currentAnchor, this._popoverEl, this.#autoUpdateCallback);
@@ -156,14 +130,9 @@ var Popover = class extends Localized(DelegatesAria(VividElement)) {
 	* @internal
 	*/
 	#lastPositionUpdate;
-	/**
-	* @internal
-	*/
+	/** @internal */
 	#autoUpdateCallback;
-	/**
-	* Updates the position of the popover
-	* @public
-	*/
+	/** Updates the position of the popover */
 	async updatePosition() {
 		/* v8 ignore if -- @preserve */
 		if (!this.open || !this.#currentAnchor || !this._popoverEl) return;
@@ -177,9 +146,7 @@ var Popover = class extends Localized(DelegatesAria(VividElement)) {
 		this.#assignPopoverPosition(positionData);
 		if (this.arrow && this._arrowEl) this.#assignArrowPosition(positionData);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	#assignPopoverPosition(data) {
 		const { x, y } = data;
 		Object.assign(this._popoverEl.style, {
@@ -188,9 +155,7 @@ var Popover = class extends Localized(DelegatesAria(VividElement)) {
 			visibility: data.middlewareData.hide?.referenceHidden ? "hidden" : "visible"
 		});
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	#assignArrowPosition(data) {
 		/* v8 ignore if -- @preserve */
 		if (!this._arrowEl) return;
@@ -261,13 +226,6 @@ __decorate([observable], Popover.prototype, "anchor", void 0);
 __decorate([observable], Popover.prototype, "_slottedAnchor", void 0);
 //#endregion
 //#region src/lib/popover/popover.template.ts
-var getClasses = ({ open, manual, layout }) => classNames("control", ["open", open], ["manual", manual], ["condensed", layout === "condensed"]);
-/**
-* The template for the Popover component.
-*
-* @param context - element definition context
-* @public
-*/
 var popoverTemplate = (context) => {
 	const elevationTag = context.tagFor(Elevation);
 	const buttonTag = context.tagFor(Button);
@@ -275,8 +233,8 @@ var popoverTemplate = (context) => {
 	return html`
 		<slot name="anchor" ${slotted("_slottedAnchor")}></slot>
 		<${elevationTag}>
-			<div class="base" 
-				${ref("_popoverEl")} 
+			<div class="base"
+				${ref("_popoverEl")}
 				popover="${(x) => x.manual ? "manual" : "auto"}"
 				tabindex="-1"
 				autofocus
@@ -285,7 +243,7 @@ var popoverTemplate = (context) => {
 		ariaModal: "false"
 	})}
 			>
-				<div class="${getClasses}" 
+				<div class="${(x) => classNames("control", ["open", x.open], ["manual", x.manual], ["condensed", x.layout === "condensed"])}"
 					part="${(x) => x.alternate ? "vvd-theme-alternate" : ""}">
 					<slot></slot>
 					<slot name="footer"></slot>

package/unbundled/definition56.cjs

@@ -24,7 +24,6 @@ require_decorate.__decorate([(0, _microsoft_fast_element.attr)()], Progress.prot
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Progress.prototype, "reverse", void 0);
 //#endregion
 //#region src/lib/progress/progress.template.ts
-var getClasses = ({ connotation, shape, reverse, paused }) => (0, _microsoft_fast_web_utilities.classNames)("base", [`connotation-${connotation}`, Boolean(connotation)], [`shape-${shape}`, Boolean(shape)], ["reverse", reverse], ["paused", paused]);
 function determinate() {
 	return _microsoft_fast_element.html` <span
 		class="determinate"
@@ -39,7 +38,7 @@ function indeterminate() {
 }
 var ProgressTemplate = _microsoft_fast_element.html`<template>
 	<div
-		class="${getClasses}"
+		class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", [`connotation-${x.connotation}`, Boolean(x.connotation)], [`shape-${x.shape}`, Boolean(x.shape)], ["reverse", x.reverse], ["paused", x.paused])}"
 		${require_delegates_aria.delegateAria({
 	role: "progressbar",
 	ariaValueNow: (x) => x.value,
@@ -55,9 +54,7 @@ var ProgressTemplate = _microsoft_fast_element.html`<template>
 </template>`;
 //#endregion
 //#region src/lib/progress/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var progressDefinition = require_vivid_element.defineVividComponent("progress", Progress, ProgressTemplate, [], { styles: progress_default });
 /**
 * Registers the progress elements with the design system.

package/unbundled/definition56.js

@@ -23,7 +23,6 @@ __decorate([attr()], Progress.prototype, "connotation", void 0);
 __decorate([attr({ mode: "boolean" })], Progress.prototype, "reverse", void 0);
 //#endregion
 //#region src/lib/progress/progress.template.ts
-var getClasses = ({ connotation, shape, reverse, paused }) => classNames("base", [`connotation-${connotation}`, Boolean(connotation)], [`shape-${shape}`, Boolean(shape)], ["reverse", reverse], ["paused", paused]);
 function determinate() {
 	return html` <span
 		class="determinate"
@@ -38,12 +37,10 @@ function indeterminate() {
 }
 //#endregion
 //#region src/lib/progress/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var progressDefinition = defineVividComponent("progress", Progress, html`<template>
 	<div
-		class="${getClasses}"
+		class="${(x) => classNames("base", [`connotation-${x.connotation}`, Boolean(x.connotation)], [`shape-${x.shape}`, Boolean(x.shape)], ["reverse", x.reverse], ["paused", x.paused])}"
 		${delegateAria({
 	role: "progressbar",
 	ariaValueNow: (x) => x.value,

package/unbundled/definition57.cjs

@@ -7,7 +7,7 @@ const require_with_error_text = require("./with-error-text.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/lib/radio/radio.scss?inline
-var radio_default = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-radio-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-radio-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-radio-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-intermediate:var(--vvd-radio-cta-intermediate,var(--vvd-color-cta-500));--_connotation-color-firm:var(--vvd-radio-cta-firm,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-radio-cta-fierce,var(--vvd-color-cta-700))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-radio-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-radio-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-radio-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-intermediate:var(--vvd-radio-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--vvd-radio-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-fierce:var(--vvd-radio-accent-fierce,var(--vvd-color-neutral-700))}.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{cursor:pointer;align-items:center;gap:8px;display:inline-flex}@supports (user-select:none){.base{user-select:none}}.base.disabled{pointer-events:none}.control{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);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));border-radius:50%;flex-shrink:0;position:relative}.base:not(.checked) .control{background-color:var(--_appearance-color-fill)}.control:after{border-radius:inherit;background-color:var(--_appearance-color-outline);content:\"\";opacity:1;transition:opacity .2s;position:absolute;inset:5px}.base:not(.checked) .control:after{opacity:0}:host(:focus-visible) .control{--focus-stroke-gap-color:transparent;position:relative}:host(:focus-visible) .control:before{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%)}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}";
+var radio_default = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-radio-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-radio-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-radio-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-intermediate:var(--vvd-radio-cta-intermediate,var(--vvd-color-cta-500));--_connotation-color-firm:var(--vvd-radio-cta-firm,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-radio-cta-fierce,var(--vvd-color-cta-700))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-radio-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-radio-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-radio-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-intermediate:var(--vvd-radio-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--vvd-radio-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-fierce:var(--vvd-radio-accent-fierce,var(--vvd-color-neutral-700))}.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{cursor:pointer;user-select:none;align-items:center;gap:8px;display:inline-flex}.base.disabled{pointer-events:none}.control{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);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));border-radius:50%;flex-shrink:0;position:relative}.base:not(.checked) .control{background-color:var(--_appearance-color-fill)}.control:after{border-radius:inherit;background-color:var(--_appearance-color-outline);content:\"\";opacity:1;transition:opacity .2s;position:absolute;inset:5px}.base:not(.checked) .control:after{opacity:0}:host(:focus-visible) .control{--focus-stroke-gap-color:transparent;position:relative}:host(:focus-visible) .control:before{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%)}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}";
 //#endregion
 //#region src/lib/radio/radio.ts
 /**
@@ -20,16 +20,12 @@ var radio_default = ":host(:focus-visible){outline:none}:host([disabled]){cursor
 * @testRef control shadow .control
 */
 var Radio = class extends require_with_error_text.WithErrorText(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;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	defaultCheckedChanged() {
 		if (this.$fastController.isConnected && !this.dirtyChecked) {
 			/* v8 ignore else -- @preserve */
@@ -79,18 +75,14 @@ var Radio = class extends require_with_error_text.WithErrorText(require_form_ele
 		this.checked = this.defaultChecked;
 		this.dirtyChecked = false;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	nameChanged(previous, next) {
 		super.nameChanged(previous, next);
 		if (next !== null) this.proxy.setAttribute("name", this.name);
 		else this.proxy.removeAttribute("name");
 		_microsoft_fast_element.Updates.enqueue(this.validate);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	connectedCallback() {
 		super.connectedCallback();
 		_microsoft_fast_element.Updates.enqueue(this.validate);
@@ -111,9 +103,7 @@ var Radio = class extends require_with_error_text.WithErrorText(require_form_ele
 	isInsideRadioGroup() {
 		return this.closest("[data-vvd-component=\"radio-group\"]") !== null;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	clickHandler(_) {
 		if (!this.disabled && !this.readOnly && !this.checked) this.checked = true;
 	}
@@ -127,9 +117,7 @@ var Radio = class extends require_with_error_text.WithErrorText(require_form_ele
 	}
 	#validateValueMissingWithSiblings;
 	#syncSiblingsRequiredValidationStatus;
-	/**
-	* @internal
-	*/
+	/** @internal */
 	validate(anchor) {
 		super.validate(anchor);
 		if (this.proxy) {
@@ -147,7 +135,6 @@ require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
 require_decorate.__decorate([_microsoft_fast_element.observable], Radio.prototype, "defaultSlottedNodes", void 0);
 //#endregion
 //#region src/lib/radio/radio.template.ts
-var getClasses = ({ connotation, checked, readOnly, disabled }) => (0, _microsoft_fast_web_utilities.classNames)("base", [`connotation-${connotation}`, Boolean(connotation)], ["checked", checked], ["readonly", readOnly], ["disabled", disabled]);
 var RadioTemplate = _microsoft_fast_element.html`<template
 	aria-checked="${(x) => x?.checked}"
 	aria-disabled="${(x) => x?.disabled}"
@@ -156,16 +143,16 @@ var RadioTemplate = _microsoft_fast_element.html`<template
 	@click="${(x, c) => x?.clickHandler(c.event)}"
 	role="radio"
 >
-	<div class="${getClasses}">
+	<div
+		class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", [`connotation-${x.connotation}`, Boolean(x.connotation)], ["checked", x.checked], ["readonly", x.readOnly], ["disabled", x.disabled])}"
+	>
 		<div class="control"></div>
 		${(0, _microsoft_fast_element.when)((x) => x?.label, _microsoft_fast_element.html`<label class="label">${(x) => x?.label}</label>`)}
 	</div>
 </template>`;
 //#endregion
 //#region src/lib/radio/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var radioDefinition = require_vivid_element.defineVividComponent("radio", Radio, RadioTemplate, [], { styles: radio_default });
 /**
 * Registers the radio elements with the design system.