@vonage/vivid 5.23.0 → 5.23.1

package/unbundled/calendar-picker.template.js

@@ -1,12 +1,12 @@
 import { t as __decorate } from "./decorate.js";
-import { r as VisuallyHidden } from "./definition6.js";
-import { i as Button } from "./definition7.js";
+import { i as Button } from "./definition6.js";
 import { t as Divider } from "./divider.js";
+import { r as VisuallyHidden } from "./definition22.js";
 import { Updates, attr, html, observable, repeat, volatile, when } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
 import { addDays } from "date-fns";
 //#region src/shared/picker-field/mixins/calendar-picker.scss?inline
-var calendar_picker_default = ".segments{gap:24px}@media (width>=648px){.segments{display:inline-flex}}.segment{flex-direction:column;gap:12px;display:flex}.segment .header{align-items:center;padding-block:8px;display:flex}.segment .title{flex-grow:1;justify-content:center;display:flex}.segment .title-action{block-size:24px;font:var(--vvd-typography-base-extended);border-radius:8px;padding-inline:8px}.calendar{flex-direction:column;gap:4px;margin-top:8px;display:flex}.calendar .calendar-separator{margin-inline:10px}.calendar .calendar-weekdays{justify-content:center;display:flex}.calendar .calendar-weekday{block-size:16px;font:var(--vvd-typography-base-condensed);justify-content:center;align-items:center;inline-size:40px;display:inline-flex}.calendar .calendar-week{justify-content:center;display:flex}.calendar .calendar-day{aspect-ratio:1;block-size:28px;font:var(--vvd-typography-base);border-radius:50%;justify-content:center;align-items:center;margin-inline:6px;display:inline-flex}.calendar .calendar-day.start,.calendar .calendar-day.end{border:2px solid var(--vvd-color-cta-50);background-color:var(--vvd-color-cta-200)}.calendar:focus-visible .calendar .calendar-day.start,.calendar:focus-visible .calendar .calendar-day.end{border-width:3px}.calendar .calendar-day:before,.calendar .calendar-day:after{z-index:-1;width:20px;height:28px;display:block;position:absolute}.calendar .calendar-day:before{right:50%}.calendar .calendar-day:after{left:50%}.calendar .calendar-day.range:before,.calendar .calendar-day.range:after{background-color:var(--vvd-color-cta-50)}.calendar .calendar-day.range:not(.start):before,.calendar .calendar-day.range:not(.end):after{content:\"\"}.calendar .calendar-day.outside-month,.calendar .calendar-day:disabled{color:var(--vvd-color-neutral-400)}.months-separator{margin-inline:-12px}.month-grid{flex-direction:column;gap:34px;display:flex}.month-grid .months-row{justify-content:center;gap:29px;display:flex}.month-grid .month{aspect-ratio:1;block-size:48px;font:var(--vvd-typography-base-extended);text-transform:uppercase;border-radius:50%;justify-content:center;align-items:center;display:inline-flex}.month-grid .month:disabled{color:var(--vvd-color-neutral-400)}.button{--_connotation-color-primary:var(--vvd-date-picker-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-firm:var(--vvd-date-picker-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-date-picker-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-date-picker-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-dim:var(--vvd-date-picker-accent-dim,var(--vvd-color-neutral-200));--_connotation-color-pale:var(--vvd-date-picker-accent-pale,var(--vvd-color-neutral-300));--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.button:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.button.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.button:active:where(:not(.disabled,:disabled)),.button.active:where(:not(.disabled,:disabled)),.button.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}@media (hover:hover){.button.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}}.button.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}.button.selected:disabled,.button.selected.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:transparent}.button{background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer;border:none;padding:0;position:relative}.button:disabled{cursor:not-allowed}.button:focus-visible{--focus-stroke-gap-color:transparent;color:var(--vvd-color-canvas-text);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))}.button:focus-visible.start,.button:focus-visible.end{border-width:3px}.button.current{border:1px solid var(--vvd-color-neutral-200)}.button.selected{border:1px solid var(--vvd-color-neutral-900)}";
+var calendar_picker_default = ".segments{gap:24px}@media (width>=648px){.segments{display:inline-flex}}.segment{flex-direction:column;gap:12px;display:flex}.segment .header{align-items:center;padding-block:8px;display:flex}.segment .title{flex-grow:1;justify-content:center;display:flex}.segment .title-action{block-size:24px;font:var(--vvd-typography-base-extended);border-radius:8px;padding-inline:8px}.calendar{flex-direction:column;gap:4px;margin-top:8px;display:flex}.calendar .calendar-separator{margin-inline:10px}.calendar .calendar-weekdays{justify-content:center;display:flex}.calendar .calendar-weekday{block-size:16px;font:var(--vvd-typography-base-condensed);justify-content:center;align-items:center;inline-size:40px;display:inline-flex}.calendar .calendar-week{justify-content:center;display:flex}.calendar .calendar-day{aspect-ratio:1;block-size:28px;font:var(--vvd-typography-base);border-radius:50%;justify-content:center;align-items:center;margin-inline:6px;display:inline-flex}.calendar .calendar-day.start,.calendar .calendar-day.end{border:2px solid var(--vvd-color-cta-50);background-color:var(--vvd-color-cta-200)}.calendar:focus-visible .calendar .calendar-day.start,.calendar:focus-visible .calendar .calendar-day.end{border-width:3px}.calendar .calendar-day:before,.calendar .calendar-day:after{z-index:-1;width:20px;height:28px;display:block;position:absolute}.calendar .calendar-day:before{right:50%}.calendar .calendar-day:after{left:50%}.calendar .calendar-day.range:before,.calendar .calendar-day.range:after{background-color:var(--vvd-color-cta-50)}.calendar .calendar-day.range:not(.start):before,.calendar .calendar-day.range:not(.end):after{content:\"\"}.calendar .calendar-day.outside-month,.calendar .calendar-day:disabled{color:var(--vvd-color-neutral-400)}.months-separator{margin-inline:-12px}.month-grid{flex-direction:column;gap:34px;display:flex}.month-grid .months-row{justify-content:center;gap:29px;display:flex}.month-grid .month{aspect-ratio:1;block-size:48px;font:var(--vvd-typography-base-extended);text-transform:uppercase;border-radius:50%;justify-content:center;align-items:center;display:inline-flex}.month-grid .month:disabled{color:var(--vvd-color-neutral-400)}.button{--_connotation-color-primary:var(--vvd-date-picker-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-firm:var(--vvd-date-picker-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-date-picker-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-date-picker-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-dim:var(--vvd-date-picker-accent-dim,var(--vvd-color-neutral-200));--_connotation-color-pale:var(--vvd-date-picker-accent-pale,var(--vvd-color-neutral-300));--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.button:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.button.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.button:active:where(:not(.disabled,:disabled)),.button.active:where(:not(.disabled,:disabled)),.button.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}@media (hover:hover){.button.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}}.button.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}.button.selected:disabled,.button.selected.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:transparent}.button{background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer;border:none;padding:0;position:relative}.button:disabled{cursor:not-allowed}.button:focus-visible{--focus-stroke-gap-color:transparent;color:var(--vvd-color-canvas-text);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))}.button:focus-visible.start,.button:focus-visible.end{border-width:3px}.button.current{border:1px solid var(--vvd-color-neutral-200)}.button.selected{border:1px solid var(--vvd-color-neutral-900)}";
 //#endregion
 //#region ../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/_lib/addLeadingZeros.js
 function addLeadingZeros(number, targetLength) {
@@ -4490,9 +4490,7 @@ var buildCalendarGrid = (month, locale) => {
 */
 var CalendarPicker = (Base) => {
 	class CalendarPickerElement extends Base {
-		/**
-		* @internal
-		*/
+		/** @internal */
 		_adjustSelectedMonthToEnsureVisibilityOf(date) {
 			const month = monthOfDate(date);
 			const firstDisplayedMonth = this._selectedMonth;
@@ -4506,9 +4504,7 @@ var CalendarPicker = (Base) => {
 			}
 			return false;
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		_isDateInValidRange(date) {
 			return (!this._resolvedMinDate || compareDateStr(date, this._resolvedMinDate) >= 0) && (!this._resolvedMaxDate || compareDateStr(date, this._resolvedMaxDate) <= 0);
 		}
@@ -4518,9 +4514,7 @@ var CalendarPicker = (Base) => {
 		#isMonthBeforeValidRange(month) {
 			return this._resolvedMinDate && compareMonths(month, monthOfDate(this._resolvedMinDate)) < 0;
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		_isMonthInValidRange(month) {
 			return !(this.#isMonthBeforeValidRange(month) || this.#isMonthAfterValidRange(month));
 		}
@@ -4536,16 +4530,12 @@ var CalendarPicker = (Base) => {
 			this._lastFocussedMonth = null;
 			this.value = "";
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		_closePopup(restoreFocusToTextField = true) {
 			super._closePopup(restoreFocusToTextField);
 			this._monthPickerYear = null;
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		_onPickerButtonClick() {
 			super._onPickerButtonClick();
 			if (this._popupOpen) {
@@ -4554,23 +4544,17 @@ var CalendarPicker = (Base) => {
 				if (tabbableDate) this.shadowRoot.querySelector(`[data-date="${tabbableDate}"]`).focus();
 			}
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		_onTitleActionClick() {
 			if (this._inMonthPicker) this._monthPickerYear = null;
 			else this._monthPickerYear = this._selectedMonth.year;
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		get _isPrevYearDisabled() {
 			const prevYear = (this._inMonthPicker ? this._monthPickerYear : this._selectedMonth.year) - 1;
 			return this._resolvedMinDate && prevYear < yearOfDate(this._resolvedMinDate);
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		_onPrevYearClick() {
 			if (this._inMonthPicker) this._monthPickerYear = this._monthPickerYear - 1;
 			else this._selectedMonth = {
@@ -4578,16 +4562,12 @@ var CalendarPicker = (Base) => {
 				month: this._selectedMonth.month
 			};
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		get _isNextYearDisabled() {
 			const nextYear = (this._inMonthPicker ? this._monthPickerYear : this._selectedMonth.year) + 1;
 			return this._resolvedMaxDate && nextYear > yearOfDate(this._resolvedMaxDate);
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		_onNextYearClick() {
 			if (this._inMonthPicker) this._monthPickerYear = this._monthPickerYear + 1;
 			else this._selectedMonth = {
@@ -4595,33 +4575,23 @@ var CalendarPicker = (Base) => {
 				month: this._selectedMonth.month
 			};
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		get _isPrevMonthDisabled() {
 			return this.#isMonthBeforeValidRange(addMonths(this._selectedMonth, -1));
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		_onPrevMonthClick() {
 			this._selectedMonth = addMonths(this._selectedMonth, -1);
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		get _isNextMonthDisabled() {
 			return this.#isMonthAfterValidRange(addMonths(this._selectedMonth, 1));
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		_onNextMonthClick() {
 			this._selectedMonth = addMonths(this._selectedMonth, 1);
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		get _segments() {
 			const segments = [];
 			if (this._inMonthPicker) segments.push({
@@ -4654,9 +4624,7 @@ var CalendarPicker = (Base) => {
 			}
 			return segments;
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		_isDateSelected(_) {
 			return false;
 		}
@@ -4667,25 +4635,17 @@ var CalendarPicker = (Base) => {
 		_isDateInSelectedRange(_) {
 			return false;
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		_isDateRangeStart(_) {
 			return false;
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		_isDateRangeEnd(_) {
 			return false;
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		_onDateMouseEnter(_) {}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		_onDateMouseLeave(_) {}
 		/**
 		* Handle keydown on a date in the calendar.
@@ -4704,9 +4664,7 @@ var CalendarPicker = (Base) => {
 			}
 			return true;
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		_onDateFocus(date) {
 			this._lastFocussedDate = date;
 		}
@@ -4726,9 +4684,7 @@ var CalendarPicker = (Base) => {
 			const lastVisibleMonth = addMonths(this._selectedMonth, this._numCalendars - 1);
 			return candidates.find((date) => date && compareMonths(monthOfDate(date), firstVisibleMonth) >= 0 && compareMonths(monthOfDate(date), lastVisibleMonth) <= 0 && this._isDateInValidRange(date)) ?? null;
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		get _inMonthPicker() {
 			return this._monthPickerYear !== null;
 		}
@@ -4760,9 +4716,7 @@ var CalendarPicker = (Base) => {
 			}
 			return true;
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		_onMonthFocus(month) {
 			this._lastFocussedMonth = month;
 		}
@@ -4802,14 +4756,10 @@ var ValidDateFilter = {
 		return value;
 	}
 };
-/**
-* Mixin for calendar pickers where min/max is a date.
-*/
+/** Mixin for calendar pickers where min/max is a date. */
 var MinMaxCalendarPicker = (SuperClass) => {
 	class MinMaxDatePickerElement extends SuperClass {
-		/**
-		* @internal
-		*/
+		/** @internal */
 		minChanged(_, newMin) {
 			/* v8 ignore if -- @preserve */
 			if (this.proxy instanceof HTMLInputElement) {
@@ -4817,15 +4767,11 @@ var MinMaxCalendarPicker = (SuperClass) => {
 				this.validate();
 			}
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		get _resolvedMinDate() {
 			return this.min;
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		maxChanged(_, newMax) {
 			/* v8 ignore if -- @preserve */
 			if (this.proxy instanceof HTMLInputElement) {

package/unbundled/char-count.cjs

@@ -1,12 +1,10 @@
 require("./chunk.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_localized = require("./localized.cjs");
-const require_definition = require("./definition6.cjs");
+const require_definition = require("./definition22.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 //#region src/shared/patterns/char-count/char-count.ts
-/**
-* Mixin for elements that can display a character count
-*/
+/** Mixin for elements that can display a character count */
 var WithCharCount = (Base) => {
 	class ElementWithCharCount extends require_localized.Localized(Base) {
 		constructor(..._args) {

package/unbundled/char-count.js

@@ -1,11 +1,9 @@
 import { t as __decorate } from "./decorate.js";
 import { t as Localized } from "./localized.js";
-import { r as VisuallyHidden } from "./definition6.js";
+import { r as VisuallyHidden } from "./definition22.js";
 import { attr, html, ref } from "@microsoft/fast-element";
 //#region src/shared/patterns/char-count/char-count.ts
-/**
-* Mixin for elements that can display a character count
-*/
+/** Mixin for elements that can display a character count */
 var WithCharCount = (Base) => {
 	class ElementWithCharCount extends Localized(Base) {
 		constructor(..._args) {

package/unbundled/data-grid.options.cjs

@@ -2,8 +2,6 @@
 /**
 * Enumerates the data grid auto generated header options
 * default option generates a non-sticky header row
-*
-* @public
 */
 var DataGridCellSortStates = {
 	none: "none",
@@ -14,39 +12,25 @@ var DataGridCellSortStates = {
 /**
 * Enumerates the data grid auto generated header options
 * default option generates a non-sticky header row
-*
-* @public
 */
 var GenerateHeaderOptions = {
 	none: "none",
 	default: "default",
 	sticky: "sticky"
 };
-/**
-* Enumerates possible data grid cell types.
-*
-* @public
-*/
+/** Enumerates possible data grid cell types. */
 var DataGridCellTypes = {
 	default: "default",
 	columnHeader: "columnheader",
 	rowHeader: "rowheader"
 };
-/**
-* Enumerates possible data grid row types
-*
-* @public
-*/
+/** Enumerates possible data grid row types */
 var DataGridRowTypes = {
 	default: "default",
 	header: "header",
 	stickyHeader: "sticky-header"
 };
-/**
-* Roles for the data grid cell
-*
-* @public
-*/
+/** Roles for the data grid cell */
 var DataGridCellRole = {
 	columnheader: "columnheader",
 	rowheader: "rowheader",

package/unbundled/data-grid.options.js

@@ -2,8 +2,6 @@
 /**
 * Enumerates the data grid auto generated header options
 * default option generates a non-sticky header row
-*
-* @public
 */
 var DataGridCellSortStates = {
 	none: "none",
@@ -14,39 +12,25 @@ var DataGridCellSortStates = {
 /**
 * Enumerates the data grid auto generated header options
 * default option generates a non-sticky header row
-*
-* @public
 */
 var GenerateHeaderOptions = {
 	none: "none",
 	default: "default",
 	sticky: "sticky"
 };
-/**
-* Enumerates possible data grid cell types.
-*
-* @public
-*/
+/** Enumerates possible data grid cell types. */
 var DataGridCellTypes = {
 	default: "default",
 	columnHeader: "columnheader",
 	rowHeader: "rowheader"
 };
-/**
-* Enumerates possible data grid row types
-*
-* @public
-*/
+/** Enumerates possible data grid row types */
 var DataGridRowTypes = {
 	default: "default",
 	header: "header",
 	stickyHeader: "sticky-header"
 };
-/**
-* Roles for the data grid cell
-*
-* @public
-*/
+/** Roles for the data grid cell */
 var DataGridCellRole = {
 	columnheader: "columnheader",
 	rowheader: "rowheader",

package/unbundled/definition.cjs

@@ -25,9 +25,7 @@ var Icon = class extends require_vivid_element.VividElement {
 	}
 	#currentRequestId;
 	#abortController;
-	/**
-	* @internal
-	*/
+	/** @internal */
 	async nameChanged() {
 		const requestId = ++this.#currentRequestId;
 		if (this.#abortController) this.#abortController.abort();
@@ -66,12 +64,11 @@ require_decorate.__decorate([_microsoft_fast_element.attr], Icon.prototype, "lab
 require_decorate.__decorate([_microsoft_fast_element.attr], Icon.prototype, "name", void 0);
 //#endregion
 //#region src/lib/icon/icon.template.ts
-var getClasses = ({ connotation, size }) => (0, _microsoft_fast_web_utilities.classNames)("control", [`connotation-${connotation}`, Boolean(connotation)], [`size-${size}`, typeof size === "number"]);
 var iconTemplate = () => {
 	const isDecorative = (x) => !x.label || x.label.trim().length === 0;
 	return _microsoft_fast_element.html`
 		<span
-			class="${getClasses}"
+			class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("control", [`connotation-${x.connotation}`, Boolean(x.connotation)], [`size-${x.size}`, typeof x.size === "number"])}"
 			role="${(x) => isDecorative(x) ? null : "img"}"
 			?aria-hidden="${(x) => isDecorative(x)}"
 			aria-label="${(x) => x.label || null}"
@@ -85,9 +82,7 @@ var iconTemplate = () => {
 };
 //#endregion
 //#region src/lib/icon/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var iconDefinition = require_vivid_element.defineVividComponent("icon", Icon, iconTemplate, [], { styles: icon_default });
 /**
 * Registers the icon component & its prerequisite components with the design system.

package/unbundled/definition.js

@@ -24,9 +24,7 @@ var Icon = class extends VividElement {
 	}
 	#currentRequestId;
 	#abortController;
-	/**
-	* @internal
-	*/
+	/** @internal */
 	async nameChanged() {
 		const requestId = ++this.#currentRequestId;
 		if (this.#abortController) this.#abortController.abort();
@@ -65,12 +63,11 @@ __decorate([attr], Icon.prototype, "label", void 0);
 __decorate([attr], Icon.prototype, "name", void 0);
 //#endregion
 //#region src/lib/icon/icon.template.ts
-var getClasses = ({ connotation, size }) => classNames("control", [`connotation-${connotation}`, Boolean(connotation)], [`size-${size}`, typeof size === "number"]);
 var iconTemplate = () => {
 	const isDecorative = (x) => !x.label || x.label.trim().length === 0;
 	return html`
 		<span
-			class="${getClasses}"
+			class="${(x) => classNames("control", [`connotation-${x.connotation}`, Boolean(x.connotation)], [`size-${x.size}`, typeof x.size === "number"])}"
 			role="${(x) => isDecorative(x) ? null : "img"}"
 			?aria-hidden="${(x) => isDecorative(x)}"
 			aria-label="${(x) => x.label || null}"
@@ -84,9 +81,7 @@ var iconTemplate = () => {
 };
 //#endregion
 //#region src/lib/icon/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var iconDefinition = defineVividComponent("icon", Icon, iconTemplate, [], { styles: icon_default });
 /**
 * Registers the icon component & its prerequisite components with the design system.