@vonage/vivid 5.23.0 → 5.23.1

package/unbundled/definition57.js

@@ -6,7 +6,7 @@ import { t as WithErrorText } from "./with-error-text.js";
 import { Updates, attr, html, observable, when } from "@microsoft/fast-element";
 import { classNames, keySpace } from "@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
 /**
@@ -19,16 +19,12 @@ var radio_default = ":host(:focus-visible){outline:none}:host([disabled]){cursor
 * @testRef control shadow .control
 */
 var Radio = class extends WithErrorText(FormElement(CheckableFormAssociated(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 */
@@ -78,18 +74,14 @@ var Radio = class extends WithErrorText(FormElement(CheckableFormAssociated(Vivi
 		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");
 		Updates.enqueue(this.validate);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	connectedCallback() {
 		super.connectedCallback();
 		Updates.enqueue(this.validate);
@@ -110,9 +102,7 @@ var Radio = class extends WithErrorText(FormElement(CheckableFormAssociated(Vivi
 	isInsideRadioGroup() {
 		return this.closest("[data-vvd-component=\"radio-group\"]") !== null;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	clickHandler(_) {
 		if (!this.disabled && !this.readOnly && !this.checked) this.checked = true;
 	}
@@ -126,9 +116,7 @@ var Radio = class extends WithErrorText(FormElement(CheckableFormAssociated(Vivi
 	}
 	#validateValueMissingWithSiblings;
 	#syncSiblingsRequiredValidationStatus;
-	/**
-	* @internal
-	*/
+	/** @internal */
 	validate(anchor) {
 		super.validate(anchor);
 		if (this.proxy) {
@@ -145,13 +133,8 @@ __decorate([attr({
 })], Radio.prototype, "readOnly", void 0);
 __decorate([observable], Radio.prototype, "defaultSlottedNodes", void 0);
 //#endregion
-//#region src/lib/radio/radio.template.ts
-var getClasses = ({ connotation, checked, readOnly, disabled }) => classNames("base", [`connotation-${connotation}`, Boolean(connotation)], ["checked", checked], ["readonly", readOnly], ["disabled", disabled]);
-//#endregion
 //#region src/lib/radio/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var radioDefinition = defineVividComponent("radio", Radio, html`<template
 	aria-checked="${(x) => x?.checked}"
 	aria-disabled="${(x) => x?.disabled}"
@@ -160,7 +143,9 @@ var radioDefinition = defineVividComponent("radio", Radio, html`<template
 	@click="${(x, c) => x?.clickHandler(c.event)}"
 	role="radio"
 >
-	<div class="${getClasses}">
+	<div
+		class="${(x) => classNames("base", [`connotation-${x.connotation}`, Boolean(x.connotation)], ["checked", x.checked], ["readonly", x.readOnly], ["disabled", x.disabled])}"
+	>
 		<div class="control"></div>
 		${when((x) => x?.label, html`<label class="label">${(x) => x?.label}</label>`)}
 	</div>

package/unbundled/definition58.cjs

@@ -92,27 +92,21 @@ var RadioGroup = class extends require_mixins.WithFeedback(require_vivid_element
 			}
 		};
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	requiredChanged() {
 		this.slottedRadioButtons.forEach((radio) => {
 			if (this.required) radio.required = true;
 			else radio.required = false;
 		});
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	readOnlyChanged() {
 		this.slottedRadioButtons.forEach((radio) => {
 			if (this.readOnly) radio.readOnly = true;
 			else radio.readOnly = false;
 		});
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	disabledChanged() {
 		this.slottedRadioButtons.forEach((radio) => {
 			if (this.disabled) radio.disabled = true;
@@ -124,26 +118,20 @@ var RadioGroup = class extends require_mixins.WithFeedback(require_vivid_element
 			radio.setAttribute("name", this.name);
 		});
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	valueChanged() {
 		this.slottedRadioButtons.forEach((radio) => {
 			if (radio.value === this.value) radio.checked = true;
 		});
 		this.$emit("change");
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	handleSlotChange() {
 		if (this.errorText) this.slottedRadioButtons.forEach((radio) => {
 			radio.errorText = this.errorText;
 		});
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	errorTextChanged(_, newErrorText) {
 		if (newErrorText) this.errorValidationMessage = newErrorText;
 		else this.errorValidationMessage = "";
@@ -151,18 +139,14 @@ var RadioGroup = class extends require_mixins.WithFeedback(require_vivid_element
 	get #focusableRadioButtons() {
 		return this.slottedRadioButtons.filter((radio) => !radio.disabled);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	slottedRadioButtonsChanged() {
 		if (this.slottedRadioButtons.length > 0) this.setupRadioButtons();
 	}
 	get isInsideToolbar() {
 		return !!this.closest("[role=\"toolbar\"]");
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	connectedCallback() {
 		super.connectedCallback();
 		this.setupRadioButtons();
@@ -197,9 +181,7 @@ var RadioGroup = class extends require_mixins.WithFeedback(require_vivid_element
 			} else this.#setTabRovingTarget(this.slottedRadioButtons[0]);
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	focusInHandler(e) {
 		this.#setTabRovingTarget(e.target);
 	}
@@ -268,9 +250,7 @@ var RadioGroupTemplate = (context) => {
 };
 //#endregion
 //#region src/lib/radio-group/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var radioGroupDefinition = require_vivid_element.defineVividComponent("radio-group", RadioGroup, RadioGroupTemplate, [require_definition.radioDefinition, require_mixins.feedbackMessageDefinition], { styles: radio_group_default });
 /**
 * Registers the radio-group elements with the design system.

package/unbundled/definition58.js

@@ -91,27 +91,21 @@ var RadioGroup = class extends WithFeedback(VividElement) {
 			}
 		};
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	requiredChanged() {
 		this.slottedRadioButtons.forEach((radio) => {
 			if (this.required) radio.required = true;
 			else radio.required = false;
 		});
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	readOnlyChanged() {
 		this.slottedRadioButtons.forEach((radio) => {
 			if (this.readOnly) radio.readOnly = true;
 			else radio.readOnly = false;
 		});
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	disabledChanged() {
 		this.slottedRadioButtons.forEach((radio) => {
 			if (this.disabled) radio.disabled = true;
@@ -123,26 +117,20 @@ var RadioGroup = class extends WithFeedback(VividElement) {
 			radio.setAttribute("name", this.name);
 		});
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	valueChanged() {
 		this.slottedRadioButtons.forEach((radio) => {
 			if (radio.value === this.value) radio.checked = true;
 		});
 		this.$emit("change");
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	handleSlotChange() {
 		if (this.errorText) this.slottedRadioButtons.forEach((radio) => {
 			radio.errorText = this.errorText;
 		});
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	errorTextChanged(_, newErrorText) {
 		if (newErrorText) this.errorValidationMessage = newErrorText;
 		else this.errorValidationMessage = "";
@@ -150,18 +138,14 @@ var RadioGroup = class extends WithFeedback(VividElement) {
 	get #focusableRadioButtons() {
 		return this.slottedRadioButtons.filter((radio) => !radio.disabled);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	slottedRadioButtonsChanged() {
 		if (this.slottedRadioButtons.length > 0) this.setupRadioButtons();
 	}
 	get isInsideToolbar() {
 		return !!this.closest("[role=\"toolbar\"]");
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	connectedCallback() {
 		super.connectedCallback();
 		this.setupRadioButtons();
@@ -196,9 +180,7 @@ var RadioGroup = class extends WithFeedback(VividElement) {
 			} else this.#setTabRovingTarget(this.slottedRadioButtons[0]);
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	focusInHandler(e) {
 		this.#setTabRovingTarget(e.target);
 	}
@@ -267,9 +249,7 @@ var RadioGroupTemplate = (context) => {
 };
 //#endregion
 //#region src/lib/radio-group/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var radioGroupDefinition = defineVividComponent("radio-group", RadioGroup, RadioGroupTemplate, [radioDefinition, feedbackMessageDefinition], { styles: radio_group_default });
 /**
 * Registers the radio-group elements with the design system.

package/unbundled/definition59.cjs

@@ -2,15 +2,15 @@ require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_form_associated = require("./form-associated.cjs");
-const require_form_element = require("./form-element.cjs");
 const require_localized = require("./localized.cjs");
-const require_definition = require("./definition10.cjs");
+const require_definition = require("./definition9.cjs");
 const require_key_codes = require("./key-codes.cjs");
 const require_slider_template = require("./slider.template.cjs");
+const require_form_element = require("./form-element.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/lib/range-slider/range-slider.scss?inline
-var range_slider_default = ":host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control.connotation-cta{--_connotation-color-primary:var(--vvd-slider-cta-primary,var(--vvd-color-cta-500))}.control:not(.connotation-cta){--_connotation-color-primary:var(--vvd-slider-accent-primary,var(--vvd-color-canvas-text))}.control{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent;--_thumb-size:12px;--_thumb-interaction-indicator-size:36px;--_track-start-inset-inline-start:0;--_track-start-inset-block-start:0;cursor:pointer;user-select:none;outline:none}.control .positioning-region{position:relative}.control .track{background:var(--_track-background-color);border-radius:4px;position:absolute}.control .track-start{border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;position:absolute;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));min-inline-size:var(--_thumb-size);margin-inline-start:calc(var(--_thumb-size) / 2)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:2px;left:0;right:0}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start:1px;border-top-left-radius:0;border-bottom-left-radius:0}.control.horizontal .track .mark{block-size:6px;inline-size:100%;position:absolute;inset-block-start:-2px;inset-inline-start:0}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{block-size:100%;inline-size:6px;position:absolute;inset-block-start:0;inset-inline-start:-2px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}:host([markers]) .control.vertical .track-start{--_track-start-inset-block-start:1px;border-radius:0}.control.disabled{--_track-background-color:var(--vvd-color-neutral-100);--_track-start-background-color:var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color:var(--vvd-color-neutral-300);--_track-start-background-color:var(--_appearance-color-fill)}.control:not(.disabled) .mark{color:var(--vvd-color-neutral-950)}.control.disabled .mark{color:var(--_track-start-background-color)}.thumb-container{block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);touch-action:none;border-radius:50%;outline:none;position:absolute}.thumb-container.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));--focus-stroke-gap-color:transparent;--_thumb-interaction-indicator-alpha:.05;border-radius:50%}.control.horizontal .thumb-container{transform:translateX(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}@media (hover:hover){.control:not(.disabled) .thumb-container:hover{--_thumb-interaction-indicator-alpha:.12}}.control:not(.disabled) .thumb-container:active{--_thumb-interaction-indicator-alpha:.25}.thumb-container:before{border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-interaction-indicator-size);content:\"\";inline-size:var(--_thumb-interaction-indicator-size);opacity:var(--_thumb-interaction-indicator-alpha,0);transition:opacity .2s ease-out;display:block;position:absolute}.thumb-container:after{border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-size);content:\"\";inline-size:var(--_thumb-size);inset:calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2);display:block;position:absolute}.popup{pointer-events:none}.tooltip{width:auto;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);padding:8px 12px}:host([internal-part]) .thumb-container{opacity:0;transition:opacity .2s}:host([internal-part]) .control.horizontal .track{block-size:4px;top:16px;overflow:hidden}:host([internal-part]) .control:focus .thumb-container{opacity:1}@media (hover:hover){:host([internal-part]) .control:hover .thumb-container{opacity:1}}.control,:host([markers]) .control.horizontal .track-start,:host([markers]) .control.vertical .track-start{--_track-start-inset-inline-start:auto;--_track-start-inset-block-start:auto}";
+var range_slider_default = ":host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control.connotation-cta{--_connotation-color-primary:var(--vvd-slider-cta-primary,var(--vvd-color-cta-500))}.control:not(.connotation-cta){--_connotation-color-primary:var(--vvd-slider-accent-primary,var(--vvd-color-canvas-text))}.control{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent;--_thumb-size:12px;--_thumb-interaction-indicator-size:36px;--_track-start-inset-inline-start:0;--_track-start-inset-block-start:0;cursor:pointer;user-select:none;outline:none}.control .positioning-region{position:relative}.control .track{background:var(--_track-background-color);border-radius:4px;position:absolute}.control .track-start{border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;position:absolute;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));min-inline-size:var(--_thumb-size);margin-inline-start:calc(var(--_thumb-size) / 2)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:2px;left:0;right:0}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start:1px;border-top-left-radius:0;border-bottom-left-radius:0}.control.horizontal .track .mark{block-size:6px;inline-size:100%;position:absolute;inset-block-start:-2px;inset-inline-start:0}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{block-size:100%;inline-size:6px;position:absolute;inset-block-start:0;inset-inline-start:-2px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}:host([markers]) .control.vertical .track-start{--_track-start-inset-block-start:1px;border-radius:0}.control.disabled{--_track-background-color:var(--vvd-color-neutral-100);--_track-start-background-color:var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color:var(--vvd-color-neutral-300);--_track-start-background-color:var(--_appearance-color-fill)}.control:not(.disabled) .mark{color:var(--vvd-color-neutral-950)}.control.disabled .mark{color:var(--_track-start-background-color)}.thumb-container{block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);touch-action:none;border-radius:50%;outline:none;position:absolute}.thumb-container.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));--focus-stroke-gap-color:transparent;--_thumb-interaction-indicator-alpha:.05;border-radius:50%}.control.horizontal .thumb-container{transform:translateX(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}@media (hover:hover){.control:not(.disabled) .thumb-container:hover{--_thumb-interaction-indicator-alpha:.12}}.control:not(.disabled) .thumb-container:active{--_thumb-interaction-indicator-alpha:.25}.thumb-container:before{border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-interaction-indicator-size);content:\"\";inline-size:var(--_thumb-interaction-indicator-size);opacity:var(--_thumb-interaction-indicator-alpha,0);display:block;position:absolute}@media (prefers-reduced-motion:no-preference){.thumb-container:before{transition:opacity .2s ease-out}}.thumb-container:after{border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-size);content:\"\";inline-size:var(--_thumb-size);inset:calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2);display:block;position:absolute}.popup{pointer-events:none}.tooltip{width:auto;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);padding:8px 12px}:host([internal-part]) .thumb-container{opacity:0}@media (prefers-reduced-motion:no-preference){:host([internal-part]) .thumb-container{transition:opacity .2s}}:host([internal-part]) .control.horizontal .track{block-size:4px;top:16px;overflow:hidden}:host([internal-part]) .control:focus .thumb-container{opacity:1}@media (hover:hover){:host([internal-part]) .control:hover .thumb-container{opacity:1}}.control,:host([markers]) .control.horizontal .track-start,:host([markers]) .control.vertical .track-start{--_track-start-inset-inline-start:auto;--_track-start-inset-block-start:auto}";
 //#endregion
 //#region src/lib/range-slider/range-slider.ts
 var Direction = {
@@ -125,9 +125,7 @@ var RangeSlider = class extends require_localized.Localized(require_form_element
 		};
 	}
 	#isInternalValueUpdate;
-	/**
-	* @internal
-	*/
+	/** @internal */
 	startChanged() {
 		this.currentStart = this.start;
 		if (!this.#isInternalValueUpdate) {
@@ -136,35 +134,25 @@ var RangeSlider = class extends require_localized.Localized(require_form_element
 		}
 		if (this.$fastController.isConnected) this.#updateThumbPositions();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	initialStartChanged(_, newValue) {
 		if (newValue && !this.dirtyValue) {
 			this.start = newValue;
 			this.dirtyValue = false;
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	currentStartChanged() {
 		this.start = this.currentStart;
 	}
-	/**
-	* The start property, typed as a number.
-	*
-	* @public
-	*/
+	/** The start property, typed as a number. */
 	get startAsNumber() {
 		return parseFloat(this.start);
 	}
 	set startAsNumber(next) {
 		this.start = next.toString();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	endChanged() {
 		this.currentEnd = this.end;
 		if (!this.#isInternalValueUpdate) {
@@ -173,26 +161,18 @@ var RangeSlider = class extends require_localized.Localized(require_form_element
 		}
 		if (this.$fastController.isConnected) this.#updateThumbPositions();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	initialEndChanged(_, newValue) {
 		if (newValue && !this.dirtyValue) {
 			this.end = newValue;
 			this.dirtyValue = false;
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	currentEndChanged() {
 		this.end = this.currentEnd;
 	}
-	/**
-	* The end property, typed as a number.
-	*
-	* @public
-	*/
+	/** The end property, typed as a number. */
 	get endAsNumber() {
 		return parseFloat(this.end);
 	}
@@ -219,15 +199,11 @@ var RangeSlider = class extends require_localized.Localized(require_form_element
 	#applyStep(thumb, direction) {
 		this.#updateValues({ [thumb]: this.#roundToNearestStep(thumb, Number(this[thumb]) + direction * this.step).toString() });
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	orientationChanged() {
 		if (this.$fastController.isConnected) this.#updateThumbPositions();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	nameChanged(previous, next) {
 		super.nameChanged(previous, next);
 		this.#updateFormValue();
@@ -306,9 +282,7 @@ var RangeSlider = class extends require_localized.Localized(require_form_element
 		thumb.focus();
 		this.#isNonVisibleFocus = false;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_isThumbPopupOpen(thumb) {
 		return this._visiblyFocusedThumb === thumb || this._hoveredThumb === thumb || this._draggingThumb === thumb;
 	}
@@ -350,9 +324,7 @@ var RangeSlider = class extends require_localized.Localized(require_form_element
 			this.#thumbs[thumb].removeEventListener("blur", this.#onThumbBlur);
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_onMouseDown(e) {
 		if (this.disabled || this._draggingThumb) return;
 		const value = this.#calculateValueFromMouseEvent(e);
@@ -418,14 +390,15 @@ require_decorate.__decorate([_microsoft_fast_element.observable], RangeSlider.pr
 require_decorate.__decorate([_microsoft_fast_element.observable], RangeSlider.prototype, "_selectedRangeCss", void 0);
 //#endregion
 //#region src/lib/range-slider/range-slider.template.ts
-var getClasses = ({ disabled, connotation }) => (0, _microsoft_fast_web_utilities.classNames)("control", ["disabled", disabled], [`connotation-${connotation}`, Boolean(connotation)]);
 var getThumbClassesFor = (thumb) => ({ _visiblyFocusedThumb }) => (0, _microsoft_fast_web_utilities.classNames)("thumb-container", ["focus-visible", _visiblyFocusedThumb === thumb]);
 var RangeSliderTemplate = (context) => {
 	const popupTag = context.tagFor(require_definition.Popup);
 	return _microsoft_fast_element.html` <template
 		@mousedown="${(x, c) => x._onMouseDown(c.event)}"
 	>
-		<div class="${getClasses} ${(x) => x.orientation}">
+		<div
+			class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("control", ["disabled", x.disabled], [`connotation-${x.connotation}`, Boolean(x.connotation)])} ${(x) => x.orientation}"
+		>
 			<div class="positioning-region">
 				<div ${(0, _microsoft_fast_element.ref)("_trackEl")} class="track">
 					<div class="track-start" style="${(x) => x._selectedRangeCss}"></div>
@@ -493,9 +466,7 @@ var RangeSliderTemplate = (context) => {
 };
 //#endregion
 //#region src/lib/range-slider/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var rangeSliderDefinition = require_vivid_element.defineVividComponent("range-slider", RangeSlider, RangeSliderTemplate, [require_definition.popupDefinition], {
 	styles: range_slider_default,
 	shadowOptions: { delegatesFocus: true }