@vonage/vivid 5.23.0 → 5.23.1

package/unbundled/definition38.cjs

@@ -2,8 +2,8 @@ require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_definition = require("./definition6.cjs");
-const require_definition$1 = require("./definition7.cjs");
-const require_definition$2 = require("./definition10.cjs");
+const require_definition$1 = require("./definition9.cjs");
+const require_definition$2 = require("./definition22.cjs");
 const require_definition$3 = require("./definition26.cjs");
 const require_definition$4 = require("./definition35.cjs");
 const require_picker_field_template = require("./picker-field.template.cjs");
@@ -75,39 +75,27 @@ var DateTimePicker = class extends require_time_selection_picker_template.TimeSe
 	get _resolvedMaxTime() {
 		return this.maxTime || this.max && extractDatePart(this.max) === this._dateValue() && extractTimePart(this.max) || "";
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_toPresentationValue(value) {
 		return formatPresentationDateTime(value, this.locale.calendarPicker, this._displaySeconds, this._use12hClock);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_parsePresentationValue(presentationValue) {
 		return parsePresentationDateTime(presentationValue, this.locale.calendarPicker, this._use12hClock);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_dateValue() {
 		return extractDatePart(this.value);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_withUpdatedDate(dateStr) {
 		return `${dateStr}T${extractTimePart(this.value) || "00:00:00"}`;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _timeValue() {
 		return extractTimePart(this.value);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_withUpdatedTime(timeStr) {
 		return `${extractDatePart(this.value) || require_calendar_picker_template.currentDateStr()}T${timeStr}`;
 	}
@@ -124,9 +112,7 @@ var DateTimePicker = class extends require_time_selection_picker_template.TimeSe
 		this.maxDate = "";
 		this.maxTime = "";
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_getCustomValidationError() {
 		if (this._isPresentationValueInvalid()) return this.locale.dateTimePicker.invalidDateTimeError;
 		if (this._dateValue() && this._resolvedMinDate && require_calendar_picker_template.compareDateStr(this._dateValue(), this._resolvedMinDate) < 0) return this.locale.dateTimePicker.dateBeforeMinDateError(require_calendar_picker_template.formatPresentationDate(this._resolvedMinDate, this.locale.calendarPicker));
@@ -135,34 +121,24 @@ var DateTimePicker = class extends require_time_selection_picker_template.TimeSe
 		if (this._timeValue && this._resolvedMaxTime && require_time_selection_picker_template.compareTimeStr(this._timeValue, this._resolvedMaxTime) > 0) return this.locale.dateTimePicker.timeAfterMaxTimeError(require_time_selection_picker_template.formatPresentationTime(this._resolvedMaxTime, this._displaySeconds, this._use12hClock));
 		return null;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _textFieldPlaceholder() {
 		return `${this.locale.calendarPicker.dateFormatPlaceholder} ${this._timePlaceholder}`;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _pickerButtonLabel() {
 		if (this.value) return this.locale.dateTimePicker.changeDateTimeLabel(this._toPresentationValue(this.value));
 		else return this.locale.dateTimePicker.chooseDateTimeLabel;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_focusableElsWithinDialog() {
 		return this._dialogEl.querySelectorAll("#inline-time-picker, button, .vwc-button");
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _pickerButtonIcon() {
 		return "calendar-clock-line";
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _dialogLabel() {
 		return this.locale.dateTimePicker.chooseDateTimeLabel;
 	}
@@ -202,16 +178,14 @@ var DateTimePickerTemplate = (context) => {
 };
 //#endregion
 //#region src/lib/date-time-picker/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var dateTimePickerDefinition = require_vivid_element.defineVividComponent("date-time-picker", DateTimePicker, DateTimePickerTemplate, [
-	require_definition$1.buttonDefinition,
-	require_definition$2.popupDefinition,
+	require_definition.buttonDefinition,
+	require_definition$1.popupDefinition,
 	require_definition$3.textFieldDefinition,
 	require_definition$4.dividerDefinition,
 	require_time_selection_picker_template.inlineTimePickerDefinition,
-	require_definition.visuallyHiddenDefinition
+	require_definition$2.visuallyHiddenDefinition
 ], {
 	styles: [
 		require_picker_field_template.picker_field_default,

package/unbundled/definition38.js

@@ -1,8 +1,8 @@
 import { d as createRegisterFunction, u as defineVividComponent } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
-import { n as visuallyHiddenDefinition } from "./definition6.js";
-import { t as buttonDefinition } from "./definition7.js";
-import { t as popupDefinition } from "./definition10.js";
+import { t as buttonDefinition } from "./definition6.js";
+import { t as popupDefinition } from "./definition9.js";
+import { n as visuallyHiddenDefinition } from "./definition22.js";
 import { n as textFieldDefinition } from "./definition26.js";
 import { t as dividerDefinition } from "./definition35.js";
 import { n as PickerField, r as picker_field_default, t as PickerFieldTemplate } from "./picker-field.template.js";
@@ -74,39 +74,27 @@ var DateTimePicker = class extends TimeSelectionPicker(SingleDatePickerMixin(Sin
 	get _resolvedMaxTime() {
 		return this.maxTime || this.max && extractDatePart(this.max) === this._dateValue() && extractTimePart(this.max) || "";
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_toPresentationValue(value) {
 		return formatPresentationDateTime(value, this.locale.calendarPicker, this._displaySeconds, this._use12hClock);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_parsePresentationValue(presentationValue) {
 		return parsePresentationDateTime(presentationValue, this.locale.calendarPicker, this._use12hClock);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_dateValue() {
 		return extractDatePart(this.value);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_withUpdatedDate(dateStr) {
 		return `${dateStr}T${extractTimePart(this.value) || "00:00:00"}`;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _timeValue() {
 		return extractTimePart(this.value);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_withUpdatedTime(timeStr) {
 		return `${extractDatePart(this.value) || currentDateStr()}T${timeStr}`;
 	}
@@ -123,9 +111,7 @@ var DateTimePicker = class extends TimeSelectionPicker(SingleDatePickerMixin(Sin
 		this.maxDate = "";
 		this.maxTime = "";
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_getCustomValidationError() {
 		if (this._isPresentationValueInvalid()) return this.locale.dateTimePicker.invalidDateTimeError;
 		if (this._dateValue() && this._resolvedMinDate && compareDateStr(this._dateValue(), this._resolvedMinDate) < 0) return this.locale.dateTimePicker.dateBeforeMinDateError(formatPresentationDate(this._resolvedMinDate, this.locale.calendarPicker));
@@ -134,34 +120,24 @@ var DateTimePicker = class extends TimeSelectionPicker(SingleDatePickerMixin(Sin
 		if (this._timeValue && this._resolvedMaxTime && compareTimeStr(this._timeValue, this._resolvedMaxTime) > 0) return this.locale.dateTimePicker.timeAfterMaxTimeError(formatPresentationTime(this._resolvedMaxTime, this._displaySeconds, this._use12hClock));
 		return null;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _textFieldPlaceholder() {
 		return `${this.locale.calendarPicker.dateFormatPlaceholder} ${this._timePlaceholder}`;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _pickerButtonLabel() {
 		if (this.value) return this.locale.dateTimePicker.changeDateTimeLabel(this._toPresentationValue(this.value));
 		else return this.locale.dateTimePicker.chooseDateTimeLabel;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_focusableElsWithinDialog() {
 		return this._dialogEl.querySelectorAll("#inline-time-picker, button, .vwc-button");
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _pickerButtonIcon() {
 		return "calendar-clock-line";
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _dialogLabel() {
 		return this.locale.dateTimePicker.chooseDateTimeLabel;
 	}
@@ -201,9 +177,7 @@ var DateTimePickerTemplate = (context) => {
 };
 //#endregion
 //#region src/lib/date-time-picker/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var dateTimePickerDefinition = defineVividComponent("date-time-picker", DateTimePicker, DateTimePickerTemplate, [
 	buttonDefinition,
 	popupDefinition,

package/unbundled/definition39.cjs

@@ -4,12 +4,12 @@ const require_definition = require("./definition.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_localized = require("./localized.cjs");
 const require_definition$1 = require("./definition6.cjs");
-const require_definition$2 = require("./definition7.cjs");
+const require_definition$2 = require("./definition22.cjs");
 const require_definition$3 = require("./definition26.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/lib/dial-pad/dial-pad.scss?inline
-var dial_pad_default = ":host{inline-size:230px;margin:16px;display:inline-block}.base{box-sizing:border-box;grid-template-rows:80px 1fr auto;display:grid}.base.no-input{grid-template-rows:1fr auto}.digits{grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(3,1fr);gap:16px;inline-size:100%;display:grid}.phone-field{grid-column:1/-1;align-self:flex-start}.digit-btn{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.digit-btn:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}}.digit-btn.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}.digit-btn:disabled,.digit-btn.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-100)}.digit-btn{--_connotation-color-contrast:var(--vvd-dial-pad-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-soft:var(--vvd-dial-pad-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-pale:var(--vvd-dial-pad-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-fierce:var(--vvd-dial-pad-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm-all:var(--vvd-dial-pad-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-faint:var(--vvd-dial-pad-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-dim:var(--vvd-dial-pad-accent-dim,var(--vvd-color-neutral-200));--vvd-button-accent-firm:var(--_appearance-color-text);box-shadow:0 0 0 1px var(--_appearance-color-outline);border-radius:16px;flex-direction:column;inline-size:100%;display:flex;overflow:hidden}.digit-btn:not(.disabled) .digit-btn-num{color:var(--vvd-color-canvas-text)}.digit-btn:focus-within{--focus-stroke-gap-color:transparent;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))}.call-btn{grid-column:1/-1;margin-block-start:32px}.base.size-condensed{grid-template-rows:60px 1fr auto}.base.size-condensed .digits{grid-template-rows:repeat(4,.85fr);gap:8px}.base.size-condensed .call-btn{margin-block-start:12px}.base.size-condensed .digit-btn-num{padding-top:6px}";
+var dial_pad_default = ":host{inline-size:230px;margin:16px;display:inline-block}.base{box-sizing:border-box;grid-template-rows:80px 1fr auto;display:grid}.base.no-input{grid-template-rows:1fr auto}.digits{grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(3,1fr);gap:16px;inline-size:100%;display:grid}.phone-field{grid-column:1/-1;align-self:flex-start}.digit-btn{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.digit-btn:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}}.digit-btn.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}.digit-btn:disabled,.digit-btn.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-100)}.digit-btn{--_connotation-color-contrast:var(--vvd-dial-pad-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-soft:var(--vvd-dial-pad-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-pale:var(--vvd-dial-pad-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-fierce:var(--vvd-dial-pad-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm-all:var(--vvd-dial-pad-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-faint:var(--vvd-dial-pad-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-dim:var(--vvd-dial-pad-accent-dim,var(--vvd-color-neutral-200));--vvd-button-accent-firm:var(--_appearance-color-text);box-shadow:0 0 0 1px var(--_appearance-color-outline);border-radius:16px;flex-direction:column;inline-size:100%;display:flex;overflow:hidden}.digit-btn:not(.disabled) .digit-btn-num{color:var(--vvd-color-canvas-text)}.digit-btn:focus-within{--focus-stroke-gap-color:transparent;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))}.call-btn{grid-column:1/-1;margin-block-start:32px}.base.size-condensed{grid-template-rows:60px 1fr auto}.base.size-condensed .digits{grid-template-rows:repeat(4,.85fr);gap:8px}.base.size-condensed .call-btn{margin-block-start:12px}.base.size-condensed .digit-btn-num{padding-top:6px}";
 //#endregion
 //#region src/lib/dial-pad/dial-pad.ts
 /**
@@ -25,7 +25,6 @@ var dial_pad_default = ":host{inline-size:230px;margin:16px;display:inline-block
 * @event {CustomEvent<undefined>} dial - Emitted when the call button is clicked
 * @event {CustomEvent<undefined>} end-call - Emitted when the end call button is clicked
 * @vueModel modelValue value input,@lazy:change `event.currentTarget.value`
-*
 */
 var DialPad = class extends require_localized.Localized(require_vivid_element.VividElement) {
 	constructor(..._args) {
@@ -60,9 +59,7 @@ var DialPad = class extends require_localized.Localized(require_vivid_element.Vi
 			this._textFieldEl.reportValidity();
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_startLongPress(digit, event) {
 		if (this.disabled || this.callActive || digit !== "0") return;
 		this._clearLongPressTimer();
@@ -75,9 +72,7 @@ var DialPad = class extends require_localized.Localized(require_vivid_element.Vi
 			this.$emit("change");
 		}, 600);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_startKeyboardLongPress() {
 		if (this.disabled || this.callActive) return;
 		if (this._longPressTimeoutId !== null) return;
@@ -89,9 +84,7 @@ var DialPad = class extends require_localized.Localized(require_vivid_element.Vi
 			this.$emit("change");
 		}, 650);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_endLongPress() {
 		this._clearLongPressTimer();
 		window.setTimeout(() => {
@@ -110,9 +103,7 @@ var DialPad = class extends require_localized.Localized(require_vivid_element.Vi
 		}, 0);
 		return wasLongPress;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_cancelLongPress() {
 		this._clearLongPressTimer();
 	}
@@ -125,16 +116,12 @@ var DialPad = class extends require_localized.Localized(require_vivid_element.Vi
 	/**
 	* Moves focus into the Dial Pad. If `no-input` attribute is specified, it will be the first digit
 	* button. Otherwise, the input field will be focused.
-	*
-	* @public
 	*/
 	focus() {
 		const digitBtns = this.shadowRoot?.querySelectorAll(".digits .digit-btn");
 		(this._textFieldEl || digitBtns?.[0])?.focus();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_announceValidationError(message) {
 		this._errorAnnouncement = "";
 		window.queueMicrotask(() => {
@@ -144,9 +131,7 @@ var DialPad = class extends require_localized.Localized(require_vivid_element.Vi
 			} else this._clearErrorAnnouncement();
 		});
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_clearErrorAnnouncement() {
 		this._errorAnnouncement = "";
 		this._forceAnnouncementToggle = false;
@@ -201,7 +186,6 @@ var DIAL_PAD_BUTTONS = [
 	new DialPadButton("0", "+", "digitZeroLabel", "zero-solid", "btn0"),
 	new DialPadButton("#", null, "digitHashtagLabel", "hashtag-solid", "btnHashtag")
 ];
-var getClasses = ({ noInput, size }) => (0, _microsoft_fast_web_utilities.classNames)("base", [`size-${size}`, Boolean(size)], ["no-input", noInput]);
 function handleKeyDown(x, e) {
 	if (e.key === _microsoft_fast_web_utilities.keyEnter && !x.pending && !x.disabled && !x.callActive && !x.noCall && x.value.length > 0 && e.target instanceof HTMLInputElement) x._onDial();
 	else if (e.key === " " || e.key === "Space") {
@@ -362,11 +346,13 @@ function renderErrorAnnouncement(visuallyHiddenTag) {
 	</${visuallyHiddenTag}>`;
 }
 var DialPadTemplate = (context) => {
-	const buttonTag = context.tagFor(require_definition$2.Button);
+	const buttonTag = context.tagFor(require_definition$1.Button);
 	const iconTag = context.tagFor(require_definition.Icon);
 	const textFieldTag = context.tagFor(require_definition$3.TextField);
-	const visuallyHiddenTag = context.tagFor(require_definition$1.VisuallyHidden);
-	return _microsoft_fast_element.html` <div class="${getClasses}">
+	const visuallyHiddenTag = context.tagFor(require_definition$2.VisuallyHidden);
+	return _microsoft_fast_element.html` <div
+		class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", [`size-${x.size}`, Boolean(x.size)], ["no-input", x.noInput])}"
+	>
 		${(0, _microsoft_fast_element.when)((x) => !x.noInput, renderTextField(textFieldTag, buttonTag))}
 		<div class="digits">${renderDigits(buttonTag, iconTag)}</div>
 		${(0, _microsoft_fast_element.when)((x) => !x.noCall, renderDialButton(buttonTag))}
@@ -375,14 +361,12 @@ var DialPadTemplate = (context) => {
 };
 //#endregion
 //#region src/lib/dial-pad/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var dialPadDefinition = require_vivid_element.defineVividComponent("dial-pad", DialPad, DialPadTemplate, [
-	require_definition$2.buttonDefinition,
+	require_definition$1.buttonDefinition,
 	require_definition$3.textFieldDefinition,
 	require_definition.iconDefinition,
-	require_definition$1.visuallyHiddenDefinition
+	require_definition$2.visuallyHiddenDefinition
 ], { styles: dial_pad_default });
 /**
 * Registers the dial-pad element with the design system.

package/unbundled/definition39.js

@@ -2,13 +2,13 @@ import { d as createRegisterFunction, t as VividElement, u as defineVividCompone
 import { r as Icon, t as iconDefinition } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
 import { t as Localized } from "./localized.js";
-import { n as visuallyHiddenDefinition, r as VisuallyHidden } from "./definition6.js";
-import { i as Button, t as buttonDefinition } from "./definition7.js";
+import { i as Button, t as buttonDefinition } from "./definition6.js";
+import { n as visuallyHiddenDefinition, r as VisuallyHidden } from "./definition22.js";
 import { n as textFieldDefinition, r as TextField } from "./definition26.js";
 import { attr, html, observable, ref, repeat, when } from "@microsoft/fast-element";
 import { classNames, keyEnter } from "@microsoft/fast-web-utilities";
 //#region src/lib/dial-pad/dial-pad.scss?inline
-var dial_pad_default = ":host{inline-size:230px;margin:16px;display:inline-block}.base{box-sizing:border-box;grid-template-rows:80px 1fr auto;display:grid}.base.no-input{grid-template-rows:1fr auto}.digits{grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(3,1fr);gap:16px;inline-size:100%;display:grid}.phone-field{grid-column:1/-1;align-self:flex-start}.digit-btn{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.digit-btn:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}}.digit-btn.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}.digit-btn:disabled,.digit-btn.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-100)}.digit-btn{--_connotation-color-contrast:var(--vvd-dial-pad-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-soft:var(--vvd-dial-pad-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-pale:var(--vvd-dial-pad-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-fierce:var(--vvd-dial-pad-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm-all:var(--vvd-dial-pad-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-faint:var(--vvd-dial-pad-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-dim:var(--vvd-dial-pad-accent-dim,var(--vvd-color-neutral-200));--vvd-button-accent-firm:var(--_appearance-color-text);box-shadow:0 0 0 1px var(--_appearance-color-outline);border-radius:16px;flex-direction:column;inline-size:100%;display:flex;overflow:hidden}.digit-btn:not(.disabled) .digit-btn-num{color:var(--vvd-color-canvas-text)}.digit-btn:focus-within{--focus-stroke-gap-color:transparent;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))}.call-btn{grid-column:1/-1;margin-block-start:32px}.base.size-condensed{grid-template-rows:60px 1fr auto}.base.size-condensed .digits{grid-template-rows:repeat(4,.85fr);gap:8px}.base.size-condensed .call-btn{margin-block-start:12px}.base.size-condensed .digit-btn-num{padding-top:6px}";
+var dial_pad_default = ":host{inline-size:230px;margin:16px;display:inline-block}.base{box-sizing:border-box;grid-template-rows:80px 1fr auto;display:grid}.base.no-input{grid-template-rows:1fr auto}.digits{grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(3,1fr);gap:16px;inline-size:100%;display:grid}.phone-field{grid-column:1/-1;align-self:flex-start}.digit-btn{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.digit-btn:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}}.digit-btn.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}.digit-btn:disabled,.digit-btn.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-100)}.digit-btn{--_connotation-color-contrast:var(--vvd-dial-pad-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-soft:var(--vvd-dial-pad-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-pale:var(--vvd-dial-pad-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-fierce:var(--vvd-dial-pad-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm-all:var(--vvd-dial-pad-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-faint:var(--vvd-dial-pad-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-dim:var(--vvd-dial-pad-accent-dim,var(--vvd-color-neutral-200));--vvd-button-accent-firm:var(--_appearance-color-text);box-shadow:0 0 0 1px var(--_appearance-color-outline);border-radius:16px;flex-direction:column;inline-size:100%;display:flex;overflow:hidden}.digit-btn:not(.disabled) .digit-btn-num{color:var(--vvd-color-canvas-text)}.digit-btn:focus-within{--focus-stroke-gap-color:transparent;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))}.call-btn{grid-column:1/-1;margin-block-start:32px}.base.size-condensed{grid-template-rows:60px 1fr auto}.base.size-condensed .digits{grid-template-rows:repeat(4,.85fr);gap:8px}.base.size-condensed .call-btn{margin-block-start:12px}.base.size-condensed .digit-btn-num{padding-top:6px}";
 //#endregion
 //#region src/lib/dial-pad/dial-pad.ts
 /**
@@ -24,7 +24,6 @@ var dial_pad_default = ":host{inline-size:230px;margin:16px;display:inline-block
 * @event {CustomEvent<undefined>} dial - Emitted when the call button is clicked
 * @event {CustomEvent<undefined>} end-call - Emitted when the end call button is clicked
 * @vueModel modelValue value input,@lazy:change `event.currentTarget.value`
-*
 */
 var DialPad = class extends Localized(VividElement) {
 	constructor(..._args) {
@@ -59,9 +58,7 @@ var DialPad = class extends Localized(VividElement) {
 			this._textFieldEl.reportValidity();
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_startLongPress(digit, event) {
 		if (this.disabled || this.callActive || digit !== "0") return;
 		this._clearLongPressTimer();
@@ -74,9 +71,7 @@ var DialPad = class extends Localized(VividElement) {
 			this.$emit("change");
 		}, 600);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_startKeyboardLongPress() {
 		if (this.disabled || this.callActive) return;
 		if (this._longPressTimeoutId !== null) return;
@@ -88,9 +83,7 @@ var DialPad = class extends Localized(VividElement) {
 			this.$emit("change");
 		}, 650);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_endLongPress() {
 		this._clearLongPressTimer();
 		window.setTimeout(() => {
@@ -109,9 +102,7 @@ var DialPad = class extends Localized(VividElement) {
 		}, 0);
 		return wasLongPress;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_cancelLongPress() {
 		this._clearLongPressTimer();
 	}
@@ -124,16 +115,12 @@ var DialPad = class extends Localized(VividElement) {
 	/**
 	* Moves focus into the Dial Pad. If `no-input` attribute is specified, it will be the first digit
 	* button. Otherwise, the input field will be focused.
-	*
-	* @public
 	*/
 	focus() {
 		const digitBtns = this.shadowRoot?.querySelectorAll(".digits .digit-btn");
 		(this._textFieldEl || digitBtns?.[0])?.focus();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_announceValidationError(message) {
 		this._errorAnnouncement = "";
 		window.queueMicrotask(() => {
@@ -143,9 +130,7 @@ var DialPad = class extends Localized(VividElement) {
 			} else this._clearErrorAnnouncement();
 		});
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_clearErrorAnnouncement() {
 		this._errorAnnouncement = "";
 		this._forceAnnouncementToggle = false;
@@ -200,7 +185,6 @@ var DIAL_PAD_BUTTONS = [
 	new DialPadButton("0", "+", "digitZeroLabel", "zero-solid", "btn0"),
 	new DialPadButton("#", null, "digitHashtagLabel", "hashtag-solid", "btnHashtag")
 ];
-var getClasses = ({ noInput, size }) => classNames("base", [`size-${size}`, Boolean(size)], ["no-input", noInput]);
 function handleKeyDown(x, e) {
 	if (e.key === keyEnter && !x.pending && !x.disabled && !x.callActive && !x.noCall && x.value.length > 0 && e.target instanceof HTMLInputElement) x._onDial();
 	else if (e.key === " " || e.key === "Space") {
@@ -365,7 +349,9 @@ var DialPadTemplate = (context) => {
 	const iconTag = context.tagFor(Icon);
 	const textFieldTag = context.tagFor(TextField);
 	const visuallyHiddenTag = context.tagFor(VisuallyHidden);
-	return html` <div class="${getClasses}">
+	return html` <div
+		class="${(x) => classNames("base", [`size-${x.size}`, Boolean(x.size)], ["no-input", x.noInput])}"
+	>
 		${when((x) => !x.noInput, renderTextField(textFieldTag, buttonTag))}
 		<div class="digits">${renderDigits(buttonTag, iconTag)}</div>
 		${when((x) => !x.noCall, renderDialButton(buttonTag))}
@@ -374,9 +360,7 @@ var DialPadTemplate = (context) => {
 };
 //#endregion
 //#region src/lib/dial-pad/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var dialPadDefinition = defineVividComponent("dial-pad", DialPad, DialPadTemplate, [
 	buttonDefinition,
 	textFieldDefinition,

package/unbundled/definition4.cjs

@@ -24,24 +24,15 @@ require_decorate.__decorate([_microsoft_fast_element.attr], ActionGroup.prototyp
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], ActionGroup.prototype, "tight", void 0);
 //#endregion
 //#region src/lib/action-group/action-group.template.ts
-var getClasses = ({ appearance, shape, tight }) => (0, _microsoft_fast_web_utilities.classNames)("base", [`appearance-${appearance}`, Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], ["tight", tight]);
-/**
-* The template for the action-group component.
-*
-* @param context - element definition context
-* @public
-*/
 var ActionGroupTemplate = _microsoft_fast_element.html`<div
-	class="${getClasses}"
+	class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", [`appearance-${x.appearance}`, Boolean(x.appearance)], [`shape-${x.shape}`, Boolean(x.shape)], ["tight", x.tight])}"
 	${require_delegates_aria.delegateAria({ role: (x) => x.role ? x.role : "group" })}
 >
 	<slot></slot>
 </div>`;
 //#endregion
 //#region src/lib/action-group/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var actionGroupDefinition = require_vivid_element.defineVividComponent("action-group", ActionGroup, ActionGroupTemplate, [], { styles: action_group_default });
 /**
 * Registers the action-group elements with the design system.

package/unbundled/definition4.js

@@ -22,15 +22,10 @@ __decorate([attr], ActionGroup.prototype, "shape", void 0);
 __decorate([attr], ActionGroup.prototype, "appearance", void 0);
 __decorate([attr({ mode: "boolean" })], ActionGroup.prototype, "tight", void 0);
 //#endregion
-//#region src/lib/action-group/action-group.template.ts
-var getClasses = ({ appearance, shape, tight }) => classNames("base", [`appearance-${appearance}`, Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], ["tight", tight]);
-//#endregion
 //#region src/lib/action-group/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var actionGroupDefinition = defineVividComponent("action-group", ActionGroup, html`<div
-	class="${getClasses}"
+	class="${(x) => classNames("base", [`appearance-${x.appearance}`, Boolean(x.appearance)], [`shape-${x.shape}`, Boolean(x.shape)], ["tight", x.tight])}"
 	${delegateAria({ role: (x) => x.role ? x.role : "group" })}
 >
 	<slot></slot>