@vonage/vivid 5.18.0 → 5.20.0

package/unbundled/definition35.js

@@ -1,256 +1,33 @@
-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 { 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}";
+import { d as createRegisterFunction, u as defineVividComponent } from "./vivid-element.js";
+import { n as applyHostSemantics } from "./host-semantics.js";
+import { n as DividerRole, t as Divider } from "./divider.js";
+import { html } from "@microsoft/fast-element";
+import { classNames } from "@microsoft/fast-web-utilities";
+//#region src/lib/divider/divider.scss?inline
+var divider_default = ":host{display:block}.base{--_connotation-color-soft:var(--vvd-divider-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-dim:var(--vvd-divider-accent-dim,var(--vvd-color-neutral-200));display:block}.base:not(.vertical){block-size:1px;inline-size:100%}.base.vertical{block-size:100%;inline-size:1px}.base.appearance-ghost{background-color:var(--_connotation-color-dim)}.base.appearance-subtle{background-color:var(--_connotation-color-soft)}";
 //#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))}";
+//#region src/lib/divider/divider.template.ts
+var getClasses = ({ orientation, appearance }) => classNames("base", [`${orientation}`, Boolean(orientation)], [`appearance-${appearance}`, Boolean(appearance)]);
+var getAriaOrientation = ({ role, orientation }) => role === DividerRole.presentation ? null : orientation;
 //#endregion
-//#region src/lib/table/table-head.scss?inline
-var table_head_default = ":host{display:table-header-group}";
-//#endregion
-//#region src/lib/table/table-body.scss?inline
-var table_body_default = ":host{display:table-row-group}";
-//#endregion
-//#region src/lib/table/table-row.scss?inline
-var table_row_default = ":host{display:table-row}@media (hover:hover){:host:hover{background-color:var(--vvd-color-neutral-200)}}:host[selected]{background-color:var(--_appearance-color-fill)}.base.connotation-cta{--_connotation-color-primary:var(--vvd-data-grid-row-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-data-grid-row-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-data-grid-row-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-firm:var(--vvd-data-grid-row-cta-firm,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-data-grid-row-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-data-grid-row-cta-soft,var(--vvd-color-cta-100));--_connotation-color-pale:var(--vvd-data-grid-row-cta-pale,var(--vvd-color-cta-300));--_connotation-color-dim:var(--vvd-data-grid-row-cta-dim,var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-data-grid-row-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-data-grid-row-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-data-grid-row-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-firm:var(--vvd-data-grid-row-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-data-grid-row-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-data-grid-row-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-pale:var(--vvd-data-grid-row-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-dim:var(--vvd-data-grid-row-accent-dim,var(--vvd-color-neutral-200))}.base{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.base.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){.base.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}}.base.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}.base{box-sizing:border-box;width:100%;color:var(--vvd-color-canvas-text);display:contents}";
-//#endregion
-//#region src/lib/table/table-header-cell.scss?inline
-var table_header_cell_default = ":host{border-bottom:1px solid var(--vvd-color-neutral-300);vertical-align:middle;display:table-cell}:host.connotation-cta{--_connotation-color-primary:var(--vvd-data-grid-cell-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-data-grid-cell-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-data-grid-cell-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-firm:var(--vvd-data-grid-cell-cta-firm,var(--vvd-color-cta-600));--_connotation-color-soft:var(--vvd-data-grid-cell-cta-soft,var(--vvd-color-cta-100));--_connotation-color-faint:var(--vvd-data-grid-cell-cta-faint,var(--vvd-color-cta-50));--_connotation-color-pale:var(--vvd-data-grid-cell-cta-pale,var(--vvd-color-cta-300));--_connotation-color-dim:var(--vvd-data-grid-cell-cta-dim,var(--vvd-color-cta-200))}:host:not(.connotation-cta){--_connotation-color-primary:var(--vvd-data-grid-cell-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-data-grid-cell-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-data-grid-cell-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-firm:var(--vvd-data-grid-cell-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-data-grid-cell-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-faint:var(--vvd-data-grid-cell-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-pale:var(--vvd-data-grid-cell-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-dim:var(--vvd-data-grid-cell-accent-dim,var(--vvd-color-neutral-200))}:host{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){:host:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}:host.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}:host.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){:host.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}}:host.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}:host{--_table-cell-default-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));--_table-cell-default-white-space:nowrap}:host([role=columnheader]){border-bottom-color:var(--vvd-color-canvas-text)}:host(:focus-visible){outline:none}.base{box-sizing:border-box;block-size:100%;color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));padding:0;flex-direction:column;justify-content:center;padding-block:4px;padding-inline:12px;display:flex;overflow:hidden}:host(:focus-visible) .base{--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))}slot{text-overflow:ellipsis;inline-size:100%;white-space:var(--table-cell-white-space,var(--_table-cell-default-white-space));flex:none;display:block;overflow:hidden}";
-//#endregion
-//#region src/lib/table/table-cell.scss?inline
-var table_cell_default = ":host{border-bottom:1px solid var(--vvd-color-neutral-300);vertical-align:middle;display:table-cell}:host.connotation-cta{--_connotation-color-primary:var(--vvd-data-grid-cell-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-data-grid-cell-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-data-grid-cell-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-firm:var(--vvd-data-grid-cell-cta-firm,var(--vvd-color-cta-600));--_connotation-color-soft:var(--vvd-data-grid-cell-cta-soft,var(--vvd-color-cta-100));--_connotation-color-faint:var(--vvd-data-grid-cell-cta-faint,var(--vvd-color-cta-50));--_connotation-color-pale:var(--vvd-data-grid-cell-cta-pale,var(--vvd-color-cta-300));--_connotation-color-dim:var(--vvd-data-grid-cell-cta-dim,var(--vvd-color-cta-200))}:host:not(.connotation-cta){--_connotation-color-primary:var(--vvd-data-grid-cell-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-data-grid-cell-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-data-grid-cell-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-firm:var(--vvd-data-grid-cell-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-data-grid-cell-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-faint:var(--vvd-data-grid-cell-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-pale:var(--vvd-data-grid-cell-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-dim:var(--vvd-data-grid-cell-accent-dim,var(--vvd-color-neutral-200))}:host{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){:host:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}:host.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}:host.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){:host.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}}:host.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}:host:not([cell-type=columnheader]){--_table-cell-default-block-size:100%;--_table-cell-default-white-space:normal}:host[selected]{background-color:var(--_appearance-color-fill)}:host(:focus-visible){outline:none}.base{box-sizing:border-box;block-size:100%;color:var(--_appearance-color-text);font:var(--vvd-typography-base);min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));flex-direction:column;justify-content:center;padding-block:4px;padding-inline:12px;display:flex;overflow:hidden}:host(:focus-visible) .base{--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))}slot{flex:none;inline-size:100%;display:block}";
-//#endregion
-//#region src/lib/table/table.ts
-/**
-* @public
-* @component table
-* @slot - Default slot.
-*/
-var Table = class extends VividElement {};
-//#endregion
-//#region src/lib/table/table.template.ts
-var TableTemplate = (context) => {
-	return html`
-		<template role="table">
-			<div part="inner-container" class="table-inner-container">
-				<div part="content" class="table-content">
-					<slot></slot>
-				</div>
-			</div>
-		</template>
-	`;
-};
-//#endregion
-//#region src/lib/table/table-head.ts
-var tableHeadName = "table-head";
-/**
-* @public
-* @component table-head
-* @slot - Default slot.
-*/
-var TableHead = class extends VividElement {};
-//#endregion
-//#region src/lib/table/table-head.template.ts
-var TableHeadTemplate = (context) => {
-	return html`
-		<template>
-			<slot></slot>
-		</template>
-	`;
-};
-//#endregion
-//#region src/lib/table/table-body.ts
-/**
-* @public
-* @component table-body
-* @slot - Default slot.
-*/
-var TableBody = class extends VividElement {};
-//#endregion
-//#region src/lib/table/table-body.template.ts
-var TableBodyTemplate = (context) => {
-	return html`
-		<template>
-			<slot></slot>
-		</template>
-	`;
-};
-//#endregion
-//#region src/lib/table/table-row.ts
-/**
-* @public
-* @component table-row
-* @slot - Default slot.
-*/
-var TableRow = class extends HostSemantics(VividElement) {};
-//#endregion
-//#region src/lib/table/table-row.template.ts
-var TableRowTemplate = (context) => {
-	return html`
-		<template
-			${applyHostSemantics({ role: "row" })}
-		>
-			<div class="base">
-				<slot></slot>
-			</div>
-		</template>
-	`;
-};
-//#endregion
-//#region src/lib/table/table-header-cell.ts
-/**
-* @public
-* @component table-header-cell
-* @slot - Default slot.
-* @event {CustomEvent<HTMLElement>} cell-focused - Fires when the cell or its contents receive focus
-*/
-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) => {
-	const tableHeadTag = context.tagForNonDependency(tableHeadName);
-	return html`
-		<template
-			${applyHostSemantics({ role: (x) => x.closest(tableHeadTag) !== null ? DataGridCellRole.columnheader : DataGridCellRole.rowheader })}
-		>
-			<div class="base">
-				<slot></slot>
-			</div>
-		</template>
-	`;
-};
-//#endregion
-//#region src/lib/table/table-cell.ts
-/**
-* @public
-* @component table-cell
-* @slot - Default slot.
-* @event {CustomEvent<HTMLElement>} cell-focused - Fires when the cell or its contents receive focus
-*/
-var TableCell = class extends HostSemantics(VividElement) {};
-//#endregion
-//#region src/lib/table/table-cell.template.ts
-var TableCellTemplate = (context) => {
-	return html`
-		<template
-			${applyHostSemantics({ role: () => "cell" })}
-		>
-			<div class="base">
-				<slot></slot>
-			</div>
-		</template>
-	`;
-};
-//#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
-*/
-var tableCellDefinition = defineVividComponent("table-cell", TableCell, TableCellTemplate, [], { styles: table_cell_default });
-/**
-* @internal
-*/
-var tableHeaderCellDefinition = defineVividComponent("table-header-cell", TableHeaderCell, TableHeaderCellTemplate, [], { styles: table_header_cell_default });
+//#region src/lib/divider/definition.ts
 /**
 * @internal
 */
-var tableRowDefinition = defineVividComponent("table-row", TableRow, TableRowTemplate, [], { styles: table_row_default });
-/**
-* @internal
-*/
-var tableBodyDefinition = defineVividComponent("table-body", TableBody, TableBodyTemplate, [], { styles: table_body_default });
-/**
-* @internal
-*/
-var tableHeadDefinition = defineVividComponent("table-head", TableHead, TableHeadTemplate, [], { styles: table_head_default });
-/**
-* @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,
-	tableSortingButtonDefinition
-], { styles: table_default });
-/**
-* Registers the table element with the design system.
+var dividerDefinition = defineVividComponent("divider", Divider, html`<template
+	${applyHostSemantics({
+	role: (x) => x.role || DividerRole.separator,
+	ariaHidden: true,
+	ariaOrientation: getAriaOrientation
+})}
+>
+	<span class="${getClasses}"></span
+></template>`, [], { styles: divider_default });
+/**
+* Registers the divider elements with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerTable = createRegisterFunction(tableDefinition);
+var registerDivider = createRegisterFunction(dividerDefinition);
 //#endregion
-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 };
+export { registerDivider as n, dividerDefinition as t };

package/unbundled/definition36.cjs

@@ -1,46 +1,152 @@
 require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
-const require_host_semantics = require("./host-semantics.cjs");
-const require_divider = require("./divider.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$3 = require("./definition26.cjs");
+const require_definition$4 = require("./definition35.cjs");
+const require_picker_field_template = require("./picker-field.template.cjs");
+const require_calendar_picker_template = require("./calendar-picker.template.cjs");
+const require_single_value_picker = require("./single-value-picker.cjs");
+const require_single_date_picker = require("./single-date-picker.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
-let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
-//#region src/lib/divider/divider.scss?inline
-var divider_default = ":host{display:block}.base{--_connotation-color-soft:var(--vvd-divider-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-dim:var(--vvd-divider-accent-dim,var(--vvd-color-neutral-200));display:block}.base:not(.vertical){block-size:1px;inline-size:100%}.base.vertical{block-size:100%;inline-size:1px}.base.appearance-ghost{background-color:var(--_connotation-color-dim)}.base.appearance-subtle{background-color:var(--_connotation-color-soft)}";
+//#region src/lib/date-picker/date-picker.ts
+/**
+* Single date picker component.
+*
+* @public
+* @component date-picker
+* @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,@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)))) {
+	/**
+	* @internal
+	*/
+	_toPresentationValue(value) {
+		return require_calendar_picker_template.formatPresentationDate(value, this.locale.calendarPicker);
+	}
+	/**
+	* @internal
+	*/
+	_parsePresentationValue(presentationValue) {
+		return require_calendar_picker_template.parsePresentationDate(presentationValue, this.locale.calendarPicker);
+	}
+	/**
+	* @internal
+	*/
+	_dateValue() {
+		return this.value;
+	}
+	/**
+	* @internal
+	*/
+	_withUpdatedDate(dateStr) {
+		return dateStr;
+	}
+	constructor() {
+		super();
+		this._isValidValue = require_calendar_picker_template.isValidDateStr;
+		this._textFieldSize = "20";
+		this.proxy.type = "date";
+	}
+	/**
+	* @internal
+	*/
+	get _pickerButtonLabel() {
+		if (this.value) return this.locale.calendarPicker.changeDateLabel(this._toPresentationValue(this.value));
+		else return this.locale.calendarPicker.chooseDateLabel;
+	}
+	/**
+	* @internal
+	*/
+	get _dialogLabel() {
+		return this.locale.calendarPicker.chooseDateLabel;
+	}
+	/**
+	* @internal
+	*/
+	get _textFieldPlaceholder() {
+		return this.locale.calendarPicker.dateFormatPlaceholder;
+	}
+	/**
+	* Handle selecting a date from the calendar.
+	* @internal
+	*/
+	_onDateClick(date) {
+		super._onDateClick(date);
+		this._closePopup();
+	}
+	/**
+	* @internal
+	*/
+	_getCustomValidationError() {
+		if (this._isPresentationValueInvalid()) return this.locale.calendarPicker.invalidDateError;
+		return null;
+	}
+	/**
+	* @internal
+	*/
+	_focusableElsWithinDialog() {
+		return this._dialogEl.querySelectorAll("button, .vwc-button");
+	}
+	/**
+	* @internal
+	*/
+	get _pickerButtonIcon() {
+		return "calendar-line";
+	}
+};
+require_decorate.__decorate([_microsoft_fast_element.volatile], DatePicker.prototype, "_pickerButtonLabel", null);
 //#endregion
-//#region src/lib/divider/divider.template.ts
-var getClasses = ({ orientation, appearance }) => (0, _microsoft_fast_web_utilities.classNames)("base", [`${orientation}`, Boolean(orientation)], [`appearance-${appearance}`, Boolean(appearance)]);
-var getAriaOrientation = ({ role, orientation }) => role === require_divider.DividerRole.presentation ? null : orientation;
-var DividerTemplate = _microsoft_fast_element.html`<template
-	${require_host_semantics.applyHostSemantics({
-	role: (x) => x.role || require_divider.DividerRole.separator,
-	ariaHidden: true,
-	ariaOrientation: getAriaOrientation
-})}
->
-	<span class="${getClasses}"></span
-></template>`;
+//#region src/lib/date-picker/date-picker.template.ts
+var DatePickerTemplate = (context) => {
+	return require_picker_field_template.PickerFieldTemplate(context, require_calendar_picker_template.CalendarPickerTemplate(context), {
+		withSeparator: false,
+		padded: true
+	});
+};
 //#endregion
-//#region src/lib/divider/definition.ts
+//#region src/lib/date-picker/definition.ts
 /**
 * @internal
 */
-var dividerDefinition = require_vivid_element.defineVividComponent("divider", require_divider.Divider, DividerTemplate, [], { styles: divider_default });
+var datePickerDefinition = require_vivid_element.defineVividComponent("date-picker", DatePicker, DatePickerTemplate, [
+	require_definition$1.buttonDefinition,
+	require_definition$2.popupDefinition,
+	require_definition$3.textFieldDefinition,
+	require_definition$4.dividerDefinition,
+	require_definition.visuallyHiddenDefinition
+], {
+	styles: [require_picker_field_template.picker_field_default, require_calendar_picker_template.calendar_picker_default],
+	shadowOptions: { delegatesFocus: true }
+});
 /**
-* Registers the divider elements with the design system.
+* Registers the date-picker element with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerDivider = require_vivid_element.createRegisterFunction(dividerDefinition);
+var registerDatePicker = require_vivid_element.createRegisterFunction(datePickerDefinition);
 //#endregion
-Object.defineProperty(exports, "dividerDefinition", {
+Object.defineProperty(exports, "DatePicker", {
+	enumerable: true,
+	get: function() {
+		return DatePicker;
+	}
+});
+Object.defineProperty(exports, "datePickerDefinition", {
 	enumerable: true,
 	get: function() {
-		return dividerDefinition;
+		return datePickerDefinition;
 	}
 });
-Object.defineProperty(exports, "registerDivider", {
+Object.defineProperty(exports, "registerDatePicker", {
 	enumerable: true,
 	get: function() {
-		return registerDivider;
+		return registerDatePicker;
 	}
 });

package/unbundled/definition36.js

@@ -1,33 +1,134 @@
-import { o as defineVividComponent, s as createRegisterFunction } from "./vivid-element.js";
-import { n as applyHostSemantics } from "./host-semantics.js";
-import { n as DividerRole, t as Divider } from "./divider.js";
-import { html } from "@microsoft/fast-element";
-import { classNames } from "@microsoft/fast-web-utilities";
-//#region src/lib/divider/divider.scss?inline
-var divider_default = ":host{display:block}.base{--_connotation-color-soft:var(--vvd-divider-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-dim:var(--vvd-divider-accent-dim,var(--vvd-color-neutral-200));display:block}.base:not(.vertical){block-size:1px;inline-size:100%}.base.vertical{block-size:100%;inline-size:1px}.base.appearance-ghost{background-color:var(--_connotation-color-dim)}.base.appearance-subtle{background-color:var(--_connotation-color-soft)}";
+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 { 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";
+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";
+import { t as SingleValuePicker } from "./single-value-picker.js";
+import { t as SingleDatePickerMixin } from "./single-date-picker.js";
+import { volatile } from "@microsoft/fast-element";
+//#region src/lib/date-picker/date-picker.ts
+/**
+* Single date picker component.
+*
+* @public
+* @component date-picker
+* @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,@lazy:change `event.currentTarget.value`
+* @testAction selectDate selectDate
+*/
+var DatePicker = class extends SingleDatePickerMixin(SingleValuePicker(MinMaxCalendarPicker(CalendarPicker(PickerField)))) {
+	/**
+	* @internal
+	*/
+	_toPresentationValue(value) {
+		return formatPresentationDate(value, this.locale.calendarPicker);
+	}
+	/**
+	* @internal
+	*/
+	_parsePresentationValue(presentationValue) {
+		return parsePresentationDate(presentationValue, this.locale.calendarPicker);
+	}
+	/**
+	* @internal
+	*/
+	_dateValue() {
+		return this.value;
+	}
+	/**
+	* @internal
+	*/
+	_withUpdatedDate(dateStr) {
+		return dateStr;
+	}
+	constructor() {
+		super();
+		this._isValidValue = isValidDateStr;
+		this._textFieldSize = "20";
+		this.proxy.type = "date";
+	}
+	/**
+	* @internal
+	*/
+	get _pickerButtonLabel() {
+		if (this.value) return this.locale.calendarPicker.changeDateLabel(this._toPresentationValue(this.value));
+		else return this.locale.calendarPicker.chooseDateLabel;
+	}
+	/**
+	* @internal
+	*/
+	get _dialogLabel() {
+		return this.locale.calendarPicker.chooseDateLabel;
+	}
+	/**
+	* @internal
+	*/
+	get _textFieldPlaceholder() {
+		return this.locale.calendarPicker.dateFormatPlaceholder;
+	}
+	/**
+	* Handle selecting a date from the calendar.
+	* @internal
+	*/
+	_onDateClick(date) {
+		super._onDateClick(date);
+		this._closePopup();
+	}
+	/**
+	* @internal
+	*/
+	_getCustomValidationError() {
+		if (this._isPresentationValueInvalid()) return this.locale.calendarPicker.invalidDateError;
+		return null;
+	}
+	/**
+	* @internal
+	*/
+	_focusableElsWithinDialog() {
+		return this._dialogEl.querySelectorAll("button, .vwc-button");
+	}
+	/**
+	* @internal
+	*/
+	get _pickerButtonIcon() {
+		return "calendar-line";
+	}
+};
+__decorate([volatile], DatePicker.prototype, "_pickerButtonLabel", null);
 //#endregion
-//#region src/lib/divider/divider.template.ts
-var getClasses = ({ orientation, appearance }) => classNames("base", [`${orientation}`, Boolean(orientation)], [`appearance-${appearance}`, Boolean(appearance)]);
-var getAriaOrientation = ({ role, orientation }) => role === DividerRole.presentation ? null : orientation;
+//#region src/lib/date-picker/date-picker.template.ts
+var DatePickerTemplate = (context) => {
+	return PickerFieldTemplate(context, CalendarPickerTemplate(context), {
+		withSeparator: false,
+		padded: true
+	});
+};
 //#endregion
-//#region src/lib/divider/definition.ts
+//#region src/lib/date-picker/definition.ts
 /**
 * @internal
 */
-var dividerDefinition = defineVividComponent("divider", Divider, html`<template
-	${applyHostSemantics({
-	role: (x) => x.role || DividerRole.separator,
-	ariaHidden: true,
-	ariaOrientation: getAriaOrientation
-})}
->
-	<span class="${getClasses}"></span
-></template>`, [], { styles: divider_default });
+var datePickerDefinition = defineVividComponent("date-picker", DatePicker, DatePickerTemplate, [
+	buttonDefinition,
+	popupDefinition,
+	textFieldDefinition,
+	dividerDefinition,
+	visuallyHiddenDefinition
+], {
+	styles: [picker_field_default, calendar_picker_default],
+	shadowOptions: { delegatesFocus: true }
+});
 /**
-* Registers the divider elements with the design system.
+* Registers the date-picker element with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerDivider = createRegisterFunction(dividerDefinition);
+var registerDatePicker = createRegisterFunction(datePickerDefinition);
 //#endregion
-export { registerDivider as n, dividerDefinition as t };
+export { registerDatePicker as n, DatePicker as r, datePickerDefinition as t };