@vonage/vivid 5.24.0 → 5.25.0

package/unbundled/definition41.js

@@ -1,6 +1,7 @@
 import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
-import { r as Icon, t as iconDefinition } from "./definition.js";
+import { t as iconDefinition } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
+import { t as Icon } from "./icon.js";
 import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
 import { t as Localized } from "./localized.js";
 import { i as Button, t as buttonDefinition } from "./definition6.js";
@@ -15,11 +16,11 @@ var dialog_default = ".base{white-space:initial;box-sizing:border-box;color:var(
 /**
 * @public
 * @component dialog
-* @slot graphic - Use the graphic slot in order to replace the icon.
-* @slot body - Use the body slot in order to add custom HTML to the dialog.
-* @slot footer - Use the footer slot in order to add action buttons to the bottom of the dialog.
-* @slot main - Assign nodes to the main slot to fully override a dialog’s predefined flow and style with your own.
-* @slot action-items - Use the action-items slot in order to add action buttons to the bottom of the dialog.
+* @slot graphic - Use the graphic slot to replace the icon.
+* @slot body - Use the body slot to add custom HTML to the Dialog.
+* @slot footer - Use the footer slot to add additional content beside the action items.
+* @slot main - Assign nodes to the main slot to fully override a Dialog’s predefined flow and style with your own.
+* @slot action-items - Use the action-items slot to add action buttons to the bottom of the Dialog.
 * @event {CustomEvent<undefined>} open - The `open` event fires when the dialog opens.
 * @event {CustomEvent<string>} close - The `close` event fires when the dialog closes (either via user interaction or via the API). It returns the return value inside the event's details property.
 * @event {CustomEvent<undefined>} cancel - The `cancel` event fires when the user requests to close the dialog. You can prevent the dialog from closing by calling `.preventDefault()` on the event.
@@ -64,6 +65,7 @@ var Dialog = class extends Localized(DelegatesAria(VividElement)) {
 			}
 		}
 	}
+	/** Gets or sets the Dialog's return value, often used to indicate which button the user pressed to close it. */
 	set returnValue(value) {
 		/* v8 ignore else -- @preserve */
 		if (this.#dialog) this.#dialog.returnValue = value;
@@ -118,13 +120,16 @@ var Dialog = class extends Localized(DelegatesAria(VividElement)) {
 			cancelable: true
 		})) this.open = false;
 	}
+	/** Closes the Dialog. */
 	close() {
 		this.open = false;
 	}
+	/** Opens the Dialog as non-modal. */
 	show() {
 		if (this._openedAsModal && !this.modal) throw new DOMException("Failed to execute 'show' on 'Dialog': The dialog is already open as a modal dialog, and therefore cannot be opened as a non-modal dialog.", "InvalidStateError");
 		this.open = true;
 	}
+	/** Opens the Dialog as modal. */
 	showModal() {
 		if (this.open && !this._openedAsModal) throw new DOMException("Failed to execute 'showModal' on 'Dialog': The dialog is already open as a non-modal dialog, and therefore cannot be opened as a modal dialog.", "InvalidStateError");
 		this._openedAsModal = true;

package/unbundled/definition42.cjs

@@ -2,6 +2,7 @@ require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_definition = require("./definition.cjs");
 const require_decorate = require("./decorate.cjs");
+const require_icon = require("./icon.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/lib/empty-state/empty-state.scss?inline
@@ -13,9 +14,9 @@ var empty_state_default = ":host{display:block}.base.connotation-cta{--_connotat
 *
 * @public
 * @component empty-state
-* @slot - The default slot controls the body text of the empty state
-* @slot graphic - The graphic slot allows overriding the icon with a custom illustration
-* @slot action-items - Slot to add action items to the empty state
+* @slot - The default slot controls the body text of the empty state.
+* @slot graphic - The graphic slot allows overriding the icon with a custom illustration.
+* @slot action-items - Slot to add action items to the empty state.
 */
 var EmptyState = class extends require_vivid_element.VividElement {};
 require_decorate.__decorate([_microsoft_fast_element.attr], EmptyState.prototype, "connotation", void 0);
@@ -26,7 +27,7 @@ require_decorate.__decorate([_microsoft_fast_element.observable], EmptyState.pro
 //#endregion
 //#region src/lib/empty-state/empty-state.template.ts
 var EmptyStateTemplate = (context) => {
-	const iconTag = context.tagFor(require_definition.Icon);
+	const iconTag = context.tagFor(require_icon.Icon);
 	return _microsoft_fast_element.html` <div
 		class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", [`connotation-${x.connotation}`, Boolean(x.connotation)], ["no-actions", x.slottedActionItems?.length === 0])}"
 		aria-labelledby="${(x) => x.headline ? "empty-state-headline" : null}"

package/unbundled/definition42.js

@@ -1,6 +1,7 @@
 import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
-import { r as Icon, t as iconDefinition } from "./definition.js";
+import { t as iconDefinition } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
+import { t as Icon } from "./icon.js";
 import { attr, html, observable, slotted, when } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
 //#region src/lib/empty-state/empty-state.scss?inline
@@ -12,9 +13,9 @@ var empty_state_default = ":host{display:block}.base.connotation-cta{--_connotat
 *
 * @public
 * @component empty-state
-* @slot - The default slot controls the body text of the empty state
-* @slot graphic - The graphic slot allows overriding the icon with a custom illustration
-* @slot action-items - Slot to add action items to the empty state
+* @slot - The default slot controls the body text of the empty state.
+* @slot graphic - The graphic slot allows overriding the icon with a custom illustration.
+* @slot action-items - Slot to add action items to the empty state.
 */
 var EmptyState = class extends VividElement {};
 __decorate([attr], EmptyState.prototype, "connotation", void 0);

package/unbundled/definition44.cjs

@@ -2,6 +2,7 @@ require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_definition = require("./definition.cjs");
 const require_decorate = require("./decorate.cjs");
+const require_icon = require("./icon.cjs");
 const require_delegates_aria = require("./delegates-aria.cjs");
 const require_form_associated = require("./form-associated.cjs");
 const require_localized = require("./localized.cjs");
@@ -78,7 +79,7 @@ function isAcceptedFileType(file, accept) {
 /**
 * @public
 * @component file-picker
-* @slot helper-text - Describes how to use the file-picker. Alternative to the `helper-text` attribute.
+* @slot helper-text - Describes how to use the File Picker. Alternative to the `helper-text` attribute.
 * @event {CustomEvent<undefined>} change - Emitted when files are added or removed.
 */
 var FilePicker = class extends require_with_contextual_help.WithContextualHelp(require_mixins.WithFeedback(require_with_error_text.WithErrorText(require_form_element.FormElement(require_delegates_aria.DelegatesAria(require_localized.Localized(require_form_associated.FormAssociated(require_vivid_element.VividElement))))))) {
@@ -322,7 +323,7 @@ var renderFileSize = (x, size) => {
 		${dictFileSizeUnits[selectedUnit]}`;
 };
 var FilePickerTemplate = (context) => {
-	const iconTag = context.tagFor(require_definition.Icon);
+	const iconTag = context.tagFor(require_icon.Icon);
 	const buttonTag = context.tagFor(require_definition$1.Button);
 	return _microsoft_fast_element.html`
 		<div class="base">

package/unbundled/definition44.js

@@ -1,6 +1,7 @@
 import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
-import { r as Icon, t as iconDefinition } from "./definition.js";
+import { t as iconDefinition } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
+import { t as Icon } from "./icon.js";
 import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
 import { n as FormAssociated } from "./form-associated.js";
 import { t as Localized } from "./localized.js";
@@ -77,7 +78,7 @@ function isAcceptedFileType(file, accept) {
 /**
 * @public
 * @component file-picker
-* @slot helper-text - Describes how to use the file-picker. Alternative to the `helper-text` attribute.
+* @slot helper-text - Describes how to use the File Picker. Alternative to the `helper-text` attribute.
 * @event {CustomEvent<undefined>} change - Emitted when files are added or removed.
 */
 var FilePicker = class extends WithContextualHelp(WithFeedback(WithErrorText(FormElement(DelegatesAria(Localized(FormAssociated(VividElement))))))) {

package/unbundled/definition45.cjs

@@ -13,8 +13,8 @@ var header_default = ".base{z-index:1;block-size:calc(calc(1px * (40 + 4 * clamp
 * @public
 * @component header
 * @slot - Default slot.
-* @slot action-items - Nodes assigned to action-items slot will be set at the end of the header.
-* @slot app-content - Content vertically aligned with header.
+* @slot action-items - Nodes assigned to the `action-items` slot will be set at the end of the Header.
+* @slot app-content - Content vertically aligned with the Header.
 */
 var Header = class extends require_delegates_aria.DelegatesAria(require_vivid_element.VividElement) {
 	constructor(..._args) {

package/unbundled/definition45.js

@@ -12,8 +12,8 @@ var header_default = ".base{z-index:1;block-size:calc(calc(1px * (40 + 4 * clamp
 * @public
 * @component header
 * @slot - Default slot.
-* @slot action-items - Nodes assigned to action-items slot will be set at the end of the header.
-* @slot app-content - Content vertically aligned with header.
+* @slot action-items - Nodes assigned to the `action-items` slot will be set at the end of the Header.
+* @slot app-content - Content vertically aligned with the Header.
 */
 var Header = class extends DelegatesAria(VividElement) {
 	constructor(..._args) {