@vonage/vivid 5.16.0 → 5.17.0

package/unbundled/definition33.cjs

@@ -1,11 +1,17 @@
 require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
+const require_definition = require("./definition2.cjs");
+const require_decorate = require("./decorate.cjs");
+const require_delegates_aria = require("./delegates-aria.cjs");
 const require_host_semantics = require("./host-semantics.cjs");
 const require_data_grid_options = require("./data-grid.options.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 //#region src/lib/table/table.scss?inline
 var table_default = ":host{border-collapse:collapse;border-spacing:0;inline-size:100%}.table-inner-container{--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}.table-inner-container ::-webkit-scrollbar{width:4px}.table-inner-container ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.table-inner-container ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.table-inner-container{inline-size:100%;display:block;overflow-x:auto}.table-content{inline-size:100%;display:table;overflow-x:auto}";
 //#endregion
+//#region src/lib/table/table-sorting-button.scss?inline
+var table_sorting_button_default = "button{aspect-ratio:1;cursor:pointer;background:0 0;border:none;border-radius:8px}button:focus-visible{--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))}";
+//#endregion
 //#region src/lib/table/table-head.scss?inline
 var table_head_default = ":host{display:table-header-group}";
 //#endregion
@@ -105,7 +111,23 @@ var TableRowTemplate = (context) => {
 * @slot - Default slot.
 * @event {CustomEvent<HTMLElement>} cell-focused - Fires when the cell or its contents receive focus
 */
-var TableHeaderCell = class extends require_host_semantics.HostSemantics(require_vivid_element.VividElement) {};
+var TableHeaderCell = class extends require_host_semantics.HostSemantics(require_vivid_element.VividElement) {
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("sort", this.#sortHandler);
+	}
+	#sortHandler(event) {
+		const direction = event.detail;
+		if (direction === "asc") this.setAttribute("aria-sort", "ascending");
+		else if (direction === "desc") this.setAttribute("aria-sort", "descending");
+		else if (direction === "none") this.setAttribute("aria-sort", "none");
+		else this.removeAttribute("aria-sort");
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener("sort", this.#sortHandler);
+	}
+};
 //#endregion
 //#region src/lib/table/table-header-cell.template.ts
 var TableHeaderCellTemplate = (context) => {
@@ -143,6 +165,52 @@ var TableCellTemplate = (context) => {
 	`;
 };
 //#endregion
+//#region src/lib/table/table-sorting-button.ts
+/**
+* @public
+* @component table-sorting-button
+* @slot - Default slot.
+* @event {CustomEvent<undefined>} sort - Emitted when sorting button is clicked.
+*/
+var TableSortingButton = class extends require_delegates_aria.DelegatesAria(require_vivid_element.VividElement) {
+	get #nextDirection() {
+		if (!this.direction || this.direction === "none") return "asc";
+		else if (this.direction === "asc") return "desc";
+		else return "none";
+	}
+	toggleSort() {
+		if (!this.$emit("sort", this.#nextDirection)) return;
+		this.direction = this.#nextDirection;
+		this.dispatchEvent(new CustomEvent("sort", {
+			detail: this.direction,
+			bubbles: true,
+			composed: true
+		}));
+	}
+};
+require_decorate.__decorate([_microsoft_fast_element.attr], TableSortingButton.prototype, "direction", void 0);
+//#endregion
+//#region src/lib/table/table-sorting-button.template.ts
+var TableSortingButtonTemplate = (context) => {
+	const iconTag = context.tagFor(require_definition.Icon);
+	return _microsoft_fast_element.html`
+		<template
+			@click="${(x) => x.toggleSort()}"
+			${require_host_semantics.applyHostSemantics({ role: "button" })}
+		>
+			<button>
+				${(x) => {
+		switch (x.direction) {
+			case "asc": return _microsoft_fast_element.html`<${iconTag} name="sort-asc-line"></${iconTag}>`;
+			case "desc": return _microsoft_fast_element.html`<${iconTag} name="sort-desc-line"></${iconTag}>`;
+			default: return _microsoft_fast_element.html`<${iconTag} name="sort-line"></${iconTag}>`;
+		}
+	}}
+			</button>
+		</template>
+	`;
+};
+//#endregion
 //#region src/lib/table/definition.ts
 /**
 * @internal
@@ -167,12 +235,17 @@ var tableHeadDefinition = require_vivid_element.defineVividComponent("table-head
 /**
 * @internal
 */
+var tableSortingButtonDefinition = require_vivid_element.defineVividComponent("table-sorting-button", TableSortingButton, TableSortingButtonTemplate, [require_definition.iconDefinition], { styles: table_sorting_button_default });
+/**
+* @internal
+*/
 var tableDefinition = require_vivid_element.defineVividComponent("table", Table, TableTemplate, [
 	tableCellDefinition,
 	tableHeaderCellDefinition,
 	tableRowDefinition,
 	tableHeadDefinition,
-	tableBodyDefinition
+	tableBodyDefinition,
+	tableSortingButtonDefinition
 ], { styles: table_default });
 /**
 * Registers the table element with the design system.
@@ -217,6 +290,12 @@ Object.defineProperty(exports, "TableRow", {
 		return TableRow;
 	}
 });
+Object.defineProperty(exports, "TableSortingButton", {
+	enumerable: true,
+	get: function() {
+		return TableSortingButton;
+	}
+});
 Object.defineProperty(exports, "registerTable", {
 	enumerable: true,
 	get: function() {
@@ -259,3 +338,9 @@ Object.defineProperty(exports, "tableRowDefinition", {
 		return tableRowDefinition;
 	}
 });
+Object.defineProperty(exports, "tableSortingButtonDefinition", {
+	enumerable: true,
+	get: function() {
+		return tableSortingButtonDefinition;
+	}
+});

package/unbundled/definition33.js

@@ -1,10 +1,16 @@
 import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { r as Icon, t as iconDefinition } from "./definition2.js";
+import { t as __decorate } from "./decorate.js";
+import { t as DelegatesAria } from "./delegates-aria.js";
 import { n as applyHostSemantics, t as HostSemantics } from "./host-semantics.js";
 import { t as DataGridCellRole } from "./data-grid.options.js";
-import { html } from "@microsoft/fast-element";
+import { attr, html } from "@microsoft/fast-element";
 //#region src/lib/table/table.scss?inline
 var table_default = ":host{border-collapse:collapse;border-spacing:0;inline-size:100%}.table-inner-container{--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}.table-inner-container ::-webkit-scrollbar{width:4px}.table-inner-container ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.table-inner-container ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.table-inner-container{inline-size:100%;display:block;overflow-x:auto}.table-content{inline-size:100%;display:table;overflow-x:auto}";
 //#endregion
+//#region src/lib/table/table-sorting-button.scss?inline
+var table_sorting_button_default = "button{aspect-ratio:1;cursor:pointer;background:0 0;border:none;border-radius:8px}button:focus-visible{--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))}";
+//#endregion
 //#region src/lib/table/table-head.scss?inline
 var table_head_default = ":host{display:table-header-group}";
 //#endregion
@@ -104,7 +110,23 @@ var TableRowTemplate = (context) => {
 * @slot - Default slot.
 * @event {CustomEvent<HTMLElement>} cell-focused - Fires when the cell or its contents receive focus
 */
-var TableHeaderCell = class extends HostSemantics(VividElement) {};
+var TableHeaderCell = class extends HostSemantics(VividElement) {
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("sort", this.#sortHandler);
+	}
+	#sortHandler(event) {
+		const direction = event.detail;
+		if (direction === "asc") this.setAttribute("aria-sort", "ascending");
+		else if (direction === "desc") this.setAttribute("aria-sort", "descending");
+		else if (direction === "none") this.setAttribute("aria-sort", "none");
+		else this.removeAttribute("aria-sort");
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener("sort", this.#sortHandler);
+	}
+};
 //#endregion
 //#region src/lib/table/table-header-cell.template.ts
 var TableHeaderCellTemplate = (context) => {
@@ -142,6 +164,52 @@ var TableCellTemplate = (context) => {
 	`;
 };
 //#endregion
+//#region src/lib/table/table-sorting-button.ts
+/**
+* @public
+* @component table-sorting-button
+* @slot - Default slot.
+* @event {CustomEvent<undefined>} sort - Emitted when sorting button is clicked.
+*/
+var TableSortingButton = class extends DelegatesAria(VividElement) {
+	get #nextDirection() {
+		if (!this.direction || this.direction === "none") return "asc";
+		else if (this.direction === "asc") return "desc";
+		else return "none";
+	}
+	toggleSort() {
+		if (!this.$emit("sort", this.#nextDirection)) return;
+		this.direction = this.#nextDirection;
+		this.dispatchEvent(new CustomEvent("sort", {
+			detail: this.direction,
+			bubbles: true,
+			composed: true
+		}));
+	}
+};
+__decorate([attr], TableSortingButton.prototype, "direction", void 0);
+//#endregion
+//#region src/lib/table/table-sorting-button.template.ts
+var TableSortingButtonTemplate = (context) => {
+	const iconTag = context.tagFor(Icon);
+	return html`
+		<template
+			@click="${(x) => x.toggleSort()}"
+			${applyHostSemantics({ role: "button" })}
+		>
+			<button>
+				${(x) => {
+		switch (x.direction) {
+			case "asc": return html`<${iconTag} name="sort-asc-line"></${iconTag}>`;
+			case "desc": return html`<${iconTag} name="sort-desc-line"></${iconTag}>`;
+			default: return html`<${iconTag} name="sort-line"></${iconTag}>`;
+		}
+	}}
+			</button>
+		</template>
+	`;
+};
+//#endregion
 //#region src/lib/table/definition.ts
 /**
 * @internal
@@ -166,12 +234,17 @@ var tableHeadDefinition = defineVividComponent("table-head", TableHead, TableHea
 /**
 * @internal
 */
+var tableSortingButtonDefinition = defineVividComponent("table-sorting-button", TableSortingButton, TableSortingButtonTemplate, [iconDefinition], { styles: table_sorting_button_default });
+/**
+* @internal
+*/
 var tableDefinition = defineVividComponent("table", Table, TableTemplate, [
 	tableCellDefinition,
 	tableHeaderCellDefinition,
 	tableRowDefinition,
 	tableHeadDefinition,
-	tableBodyDefinition
+	tableBodyDefinition,
+	tableSortingButtonDefinition
 ], { styles: table_default });
 /**
 * Registers the table element with the design system.
@@ -180,4 +253,4 @@ var tableDefinition = defineVividComponent("table", Table, TableTemplate, [
 */
 var registerTable = createRegisterFunction(tableDefinition);
 //#endregion
-export { tableHeadDefinition as a, TableCell as c, TableBody as d, TableHead as f, tableDefinition as i, TableHeaderCell as l, tableBodyDefinition as n, tableHeaderCellDefinition as o, Table as p, tableCellDefinition as r, tableRowDefinition as s, registerTable as t, TableRow as u };
+export { tableHeadDefinition as a, tableSortingButtonDefinition as c, TableHeaderCell as d, TableRow as f, Table as h, tableDefinition as i, TableSortingButton as l, TableHead as m, tableBodyDefinition as n, tableHeaderCellDefinition as o, TableBody as p, tableCellDefinition as r, tableRowDefinition as s, registerTable as t, TableCell as u };

package/unbundled/definition35.cjs

@@ -4,7 +4,7 @@ const require_definition = require("./definition.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_definition$1 = require("./definition7.cjs");
 const require_definition$2 = require("./definition10.cjs");
-const require_definition$3 = require("./definition25.cjs");
+const require_definition$3 = require("./definition26.cjs");
 const require_definition$4 = require("./definition34.cjs");
 const require_picker_field_template = require("./picker-field.template.cjs");
 const require_calendar_picker_template = require("./calendar-picker.template.cjs");
@@ -20,7 +20,7 @@ let _microsoft_fast_element = require("@microsoft/fast-element");
 * @slot helper-text - Describes how to use the date-picker. Alternative to the `helper-text` attribute.
 * @event {CustomEvent<undefined>} input - Emitted when the date is changed by the user.
 * @event {CustomEvent<undefined>} change - Emitted when the date is changed by the user.
-* @vueModel modelValue value input `event.currentTarget.value`
+* @vueModel modelValue value input,@lazy:change `event.currentTarget.value`
 * @testAction selectDate selectDate
 */
 var DatePicker = class extends require_single_date_picker.SingleDatePickerMixin(require_single_value_picker.SingleValuePicker(require_calendar_picker_template.MinMaxCalendarPicker(require_calendar_picker_template.CalendarPicker(require_picker_field_template.PickerField)))) {

package/unbundled/definition35.js

@@ -3,7 +3,7 @@ import { n as visuallyHiddenDefinition } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
 import { t as buttonDefinition } from "./definition7.js";
 import { t as popupDefinition } from "./definition10.js";
-import { n as textFieldDefinition } from "./definition25.js";
+import { n as textFieldDefinition } from "./definition26.js";
 import { t as dividerDefinition } from "./definition34.js";
 import { n as PickerField, r as picker_field_default, t as PickerFieldTemplate } from "./picker-field.template.js";
 import { a as formatPresentationDate, i as CalendarPicker, l as isValidDateStr, n as MinMaxCalendarPicker, o as parsePresentationDate, t as CalendarPickerTemplate, u as calendar_picker_default } from "./calendar-picker.template.js";
@@ -19,7 +19,7 @@ import { volatile } from "@microsoft/fast-element";
 * @slot helper-text - Describes how to use the date-picker. Alternative to the `helper-text` attribute.
 * @event {CustomEvent<undefined>} input - Emitted when the date is changed by the user.
 * @event {CustomEvent<undefined>} change - Emitted when the date is changed by the user.
-* @vueModel modelValue value input `event.currentTarget.value`
+* @vueModel modelValue value input,@lazy:change `event.currentTarget.value`
 * @testAction selectDate selectDate
 */
 var DatePicker = class extends SingleDatePickerMixin(SingleValuePicker(MinMaxCalendarPicker(CalendarPicker(PickerField)))) {

package/unbundled/definition36.cjs

@@ -4,7 +4,7 @@ const require_definition = require("./definition.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_definition$1 = require("./definition7.cjs");
 const require_definition$2 = require("./definition10.cjs");
-const require_definition$3 = require("./definition25.cjs");
+const require_definition$3 = require("./definition26.cjs");
 const require_definition$4 = require("./definition34.cjs");
 const require_picker_field_template = require("./picker-field.template.cjs");
 const require_calendar_picker_template = require("./calendar-picker.template.cjs");

package/unbundled/definition36.js

@@ -3,7 +3,7 @@ import { n as visuallyHiddenDefinition } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
 import { t as buttonDefinition } from "./definition7.js";
 import { t as popupDefinition } from "./definition10.js";
-import { n as textFieldDefinition } from "./definition25.js";
+import { n as textFieldDefinition } from "./definition26.js";
 import { t as dividerDefinition } from "./definition34.js";
 import { n as PickerField, r as picker_field_default, t as PickerFieldTemplate } from "./picker-field.template.js";
 import { a as formatPresentationDate, i as CalendarPicker, l as isValidDateStr, n as MinMaxCalendarPicker, o as parsePresentationDate, s as compareDateStr, t as CalendarPickerTemplate, u as calendar_picker_default } from "./calendar-picker.template.js";

package/unbundled/definition37.cjs

@@ -4,7 +4,7 @@ const require_definition = require("./definition.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_definition$1 = require("./definition7.cjs");
 const require_definition$2 = require("./definition10.cjs");
-const require_definition$3 = require("./definition25.cjs");
+const require_definition$3 = require("./definition26.cjs");
 const require_definition$4 = require("./definition34.cjs");
 const require_picker_field_template = require("./picker-field.template.cjs");
 const require_calendar_picker_template = require("./calendar-picker.template.cjs");
@@ -55,19 +55,23 @@ var ValidDateTimeFilter = {
 * @slot helper-text - Describes how to use the date-picker. Alternative to the `helper-text` attribute.
 * @event {CustomEvent<undefined>} input - Emitted when the date is changed by the user.
 * @event {CustomEvent<undefined>} change - Emitted when the date is changed by the user.
-* @vueModel modelValue value input `event.currentTarget.value`
+* @vueModel modelValue value input,@lazy:change `event.currentTarget.value`
 * @testAction selectDateTime selectDateTime
 */
 var DateTimePicker = class extends require_time_selection_picker_template.TimeSelectionPicker(require_single_date_picker.SingleDatePickerMixin(require_single_value_picker.SingleValuePicker(require_calendar_picker_template.CalendarPicker(require_picker_field_template.PickerField)))) {
+	/** @internal */
 	get _resolvedMinDate() {
 		return this.minDate || extractDatePart(this.min);
 	}
+	/** @internal */
 	get _resolvedMaxDate() {
 		return this.maxDate || extractDatePart(this.max);
 	}
+	/** @internal */
 	get _resolvedMinTime() {
 		return this.minTime || this.min && extractDatePart(this.min) === this._dateValue() && extractTimePart(this.min) || "";
 	}
+	/** @internal */
 	get _resolvedMaxTime() {
 		return this.maxTime || this.max && extractDatePart(this.max) === this._dateValue() && extractTimePart(this.max) || "";
 	}

package/unbundled/definition37.js

@@ -3,7 +3,7 @@ import { n as visuallyHiddenDefinition } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
 import { t as buttonDefinition } from "./definition7.js";
 import { t as popupDefinition } from "./definition10.js";
-import { n as textFieldDefinition } from "./definition25.js";
+import { n as textFieldDefinition } from "./definition26.js";
 import { t as dividerDefinition } from "./definition34.js";
 import { n as PickerField, r as picker_field_default, t as PickerFieldTemplate } from "./picker-field.template.js";
 import { a as formatPresentationDate, c as currentDateStr, i as CalendarPicker, l as isValidDateStr, o as parsePresentationDate, r as ValidDateFilter, s as compareDateStr, t as CalendarPickerTemplate, u as calendar_picker_default } from "./calendar-picker.template.js";
@@ -54,19 +54,23 @@ var ValidDateTimeFilter = {
 * @slot helper-text - Describes how to use the date-picker. Alternative to the `helper-text` attribute.
 * @event {CustomEvent<undefined>} input - Emitted when the date is changed by the user.
 * @event {CustomEvent<undefined>} change - Emitted when the date is changed by the user.
-* @vueModel modelValue value input `event.currentTarget.value`
+* @vueModel modelValue value input,@lazy:change `event.currentTarget.value`
 * @testAction selectDateTime selectDateTime
 */
 var DateTimePicker = class extends TimeSelectionPicker(SingleDatePickerMixin(SingleValuePicker(CalendarPicker(PickerField)))) {
+	/** @internal */
 	get _resolvedMinDate() {
 		return this.minDate || extractDatePart(this.min);
 	}
+	/** @internal */
 	get _resolvedMaxDate() {
 		return this.maxDate || extractDatePart(this.max);
 	}
+	/** @internal */
 	get _resolvedMinTime() {
 		return this.minTime || this.min && extractDatePart(this.min) === this._dateValue() && extractTimePart(this.min) || "";
 	}
+	/** @internal */
 	get _resolvedMaxTime() {
 		return this.maxTime || this.max && extractDatePart(this.max) === this._dateValue() && extractTimePart(this.max) || "";
 	}

package/unbundled/definition38.cjs

@@ -5,11 +5,11 @@ const require_definition$1 = require("./definition2.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_localized = require("./localized.cjs");
 const require_definition$2 = require("./definition7.cjs");
-const require_definition$3 = require("./definition25.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-top:32px}";
+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,7 @@ var dial_pad_default = ":host{inline-size:230px;margin:16px;display:inline-block
 * @event {CustomEvent<HTMLElement>}keypad-click - Emitted when a digit button is clicked
 * @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 `event.currentTarget.value`
+* @vueModel modelValue value input,@lazy:change `event.currentTarget.value`
 *
 */
 var DialPad = class extends require_localized.Localized(require_vivid_element.VividElement) {
@@ -170,6 +170,7 @@ require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
 	mode: "boolean",
 	attribute: "no-input"
 })], DialPad.prototype, "noInput", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], DialPad.prototype, "size", void 0);
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "end-call-button-label" })], DialPad.prototype, "endCallButtonLabel", void 0);
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "call-button-label" })], DialPad.prototype, "callButtonLabel", void 0);
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "delete-aria-label" })], DialPad.prototype, "deleteAriaLabel", void 0);
@@ -200,7 +201,7 @@ var DIAL_PAD_BUTTONS = [
 	new DialPadButton("0", "+", "digitZeroLabel", "zero-solid", "btn0"),
 	new DialPadButton("#", null, "digitHashtagLabel", "hashtag-solid", "btnHashtag")
 ];
-var getClasses = ({ noInput }) => (0, _microsoft_fast_web_utilities.classNames)("base", ["no-input", Boolean(noInput)]);
+var getClasses = ({ noInput, size }) => (0, _microsoft_fast_web_utilities.classNames)("base", [`size-${size}`, Boolean(size)], ["no-input", Boolean(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") {
@@ -285,6 +286,7 @@ function renderTextField(textFieldTag, buttonTag) {
 			@focus="${stopPropagation}"
 			@blur="${stopPropagation}"
 			?autofocus="${(x) => x.autofocus}"
+			scale="${(x) => x.size === "condensed" ? "condensed" : "normal"}">
 			>
          ${(0, _microsoft_fast_element.when)((x) => x.value && x.value.length && x.value.length > 0, _microsoft_fast_element.html`<${buttonTag}
                 slot="action-items"
@@ -344,7 +346,7 @@ function renderDigits(buttonTag, iconTag) {
 }
 function renderDialButton(buttonTag) {
 	return _microsoft_fast_element.html`<${buttonTag} class="call-btn"
-        size="expanded"
+        size="${(x) => x.size === "condensed" ? "normal" : "expanded"}"
         appearance="filled"
         icon="${(x) => x.callActive ? "disable-call-line" : "call-line"}"
         connotation="${(x) => x.callActive ? "alert" : "cta"}"

package/unbundled/definition38.js

@@ -4,11 +4,11 @@ import { r as Icon, t as iconDefinition } from "./definition2.js";
 import { t as __decorate } from "./decorate.js";
 import { t as Localized } from "./localized.js";
 import { i as Button, t as buttonDefinition } from "./definition7.js";
-import { n as textFieldDefinition, r as TextField } from "./definition25.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-top:32px}";
+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
 /**
@@ -23,7 +23,7 @@ var dial_pad_default = ":host{inline-size:230px;margin:16px;display:inline-block
 * @event {CustomEvent<HTMLElement>}keypad-click - Emitted when a digit button is clicked
 * @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 `event.currentTarget.value`
+* @vueModel modelValue value input,@lazy:change `event.currentTarget.value`
 *
 */
 var DialPad = class extends Localized(VividElement) {
@@ -169,6 +169,7 @@ __decorate([attr({
 	mode: "boolean",
 	attribute: "no-input"
 })], DialPad.prototype, "noInput", void 0);
+__decorate([attr], DialPad.prototype, "size", void 0);
 __decorate([attr({ attribute: "end-call-button-label" })], DialPad.prototype, "endCallButtonLabel", void 0);
 __decorate([attr({ attribute: "call-button-label" })], DialPad.prototype, "callButtonLabel", void 0);
 __decorate([attr({ attribute: "delete-aria-label" })], DialPad.prototype, "deleteAriaLabel", void 0);
@@ -199,7 +200,7 @@ var DIAL_PAD_BUTTONS = [
 	new DialPadButton("0", "+", "digitZeroLabel", "zero-solid", "btn0"),
 	new DialPadButton("#", null, "digitHashtagLabel", "hashtag-solid", "btnHashtag")
 ];
-var getClasses = ({ noInput }) => classNames("base", ["no-input", Boolean(noInput)]);
+var getClasses = ({ noInput, size }) => classNames("base", [`size-${size}`, Boolean(size)], ["no-input", Boolean(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") {
@@ -284,6 +285,7 @@ function renderTextField(textFieldTag, buttonTag) {
 			@focus="${stopPropagation}"
 			@blur="${stopPropagation}"
 			?autofocus="${(x) => x.autofocus}"
+			scale="${(x) => x.size === "condensed" ? "condensed" : "normal"}">
 			>
          ${when((x) => x.value && x.value.length && x.value.length > 0, html`<${buttonTag}
                 slot="action-items"
@@ -343,7 +345,7 @@ function renderDigits(buttonTag, iconTag) {
 }
 function renderDialButton(buttonTag) {
 	return html`<${buttonTag} class="call-btn"
-        size="expanded"
+        size="${(x) => x.size === "condensed" ? "normal" : "expanded"}"
         appearance="filled"
         icon="${(x) => x.callActive ? "disable-call-line" : "call-line"}"
         connotation="${(x) => x.callActive ? "alert" : "cta"}"

package/unbundled/definition39.cjs

@@ -85,6 +85,7 @@ var Dialog = class extends require_localized.Localized(require_delegates_aria.De
 			this.$emit("open", void 0, { bubbles: false });
 		}
 	}
+	/** @internal */
 	get _showDismissButton() {
 		return this.#isDismissibleVia("dismiss-button");
 	}

package/unbundled/definition39.js

@@ -84,6 +84,7 @@ var Dialog = class extends Localized(DelegatesAria(VividElement)) {
 			this.$emit("open", void 0, { bubbles: false });
 		}
 	}
+	/** @internal */
 	get _showDismissButton() {
 		return this.#isDismissibleVia("dismiss-button");
 	}