@vonage/vivid 5.25.0 → 5.27.0

package/unbundled/definition8.js

@@ -2,24 +2,32 @@ import { d as createRegisterFunction, t as VividElement, u as defineVividCompone
 import { t as iconDefinition } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
 import { a as affixIconTemplateFactory, i as IconWrapper, r as IconAriaHidden, t as AffixIcon } from "./affix.js";
+import { t as componentEnum } from "./component-enum.js";
 import { t as Localized } from "./localized.js";
 import { i as Button, t as buttonDefinition } from "./definition6.js";
-import { r as Connotation } from "./enums.js";
 import { r as Elevation, t as elevationDefinition } from "./definition7.js";
 import { t as handleEscapeKeyAndStopPropogation } from "./dialog.js";
 import { attr, html, nullableNumberConverter, ref, when } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
 //#region src/lib/alert/alert.scss?inline
-var alert_default = ".control{z-index:10;inline-size:max-content;max-inline-size:var(--alert-max-inline-size,fit-content);min-inline-size:var(--alert-min-inline-size,420px);border-radius:8px;margin-block:16px;margin-inline:auto;transition:opacity .15s cubic-bezier(0,0,.2,1),transform .15s cubic-bezier(0,0,.2,1);position:fixed;inset-block-end:0;inset-inline:0}@media (prefers-reduced-motion:reduce){.control{transition-duration:.01ms}}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block:0 auto}.control.placement-top-start,.control.placement-bottom-start{right:auto;margin-inline:16px;inset-inline-end:auto}.control.placement-top-end,.control.placement-bottom-end{margin-inline:16px;inset-inline-start:auto}.control:where(.strategy-static){inline-size:auto;margin:0;position:static}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}@media (width<=768px){.control{min-inline-size:var(--alert-min-inline-size,auto)}}.base.connotation-success{--_connotation-color-primary:var(--vvd-alert-success-primary,var(--vvd-color-success-500));--_connotation-color-primary-text:var(--vvd-alert-success-primary-text,var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary:var(--vvd-alert-information-primary,var(--vvd-color-information-500));--_connotation-color-primary-text:var(--vvd-alert-information-primary-text,var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary:var(--vvd-alert-alert-primary,var(--vvd-color-alert-500));--_connotation-color-primary-text:var(--vvd-alert-alert-primary-text,var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary:var(--vvd-alert-warning-primary,var(--vvd-color-warning-300));--_connotation-color-primary-text:var(--vvd-alert-warning-primary-text,var(--vvd-color-canvas-text))}.base.connotation-announcement{--_connotation-color-primary:var(--vvd-alert-announcement-primary,var(--vvd-color-announcement-500));--_connotation-color-primary-text:var(--vvd-alert-announcement-primary-text,var(--vvd-color-canvas))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary:var(--vvd-alert-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-alert-accent-primary-text,var(--vvd-color-canvas))}.base{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent;background-color:var(--vvd-color-neutral-50);color:var(--vvd-color-canvas-text);border-radius:8px;align-items:center;column-gap:16px;padding:16px;display:flex}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block:0 4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base .alert-text .headline+::slotted([slot=main i]:first-child):before,.base .alert-text .main-text+::slotted([slot=main i]:first-child):before{content:\"\";margin-top:8px;display:block}.base slot[name=icon]{color:var(--_appearance-color-fill);flex-shrink:0;font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start:16px}";
+var alert_default = ".control{z-index:10;inline-size:max-content;max-inline-size:var(--alert-max-inline-size,fit-content);min-inline-size:var(--alert-min-inline-size,420px);border-radius:8px;margin-block:16px;margin-inline:auto;transition:opacity .15s cubic-bezier(0,0,.2,1),transform .15s cubic-bezier(0,0,.2,1);position:fixed;inset-block-end:0;inset-inline:0}@media (prefers-reduced-motion:reduce){.control{transition-duration:.01ms}}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block:0 auto}.control.placement-top-start,.control.placement-bottom-start{right:auto;margin-inline:16px;inset-inline-end:auto}.control.placement-top-end,.control.placement-bottom-end{margin-inline:16px;inset-inline-start:auto}.control:where(.strategy-static){inline-size:auto;margin:0;position:static}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}@media (width<=768px){.control{min-inline-size:var(--alert-min-inline-size,auto)}}.base{background-color:var(--vvd-color-neutral-50);color:var(--vvd-color-canvas-text);border-radius:8px;align-items:center;column-gap:16px;padding:16px;display:flex}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block:0 4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base .alert-text .headline+::slotted([slot=main i]:first-child):before,.base .alert-text .main-text+::slotted([slot=main i]:first-child):before{content:\"\";margin-top:8px;display:block}.base slot[name=icon]{color:var(--_appearance-color-fill);flex-shrink:0;font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start:16px}";
 //#endregion
 //#region src/lib/alert/alert.ts
+var alertConnotation = componentEnum([
+	"accent",
+	"information",
+	"success",
+	"warning",
+	"announcement",
+	"alert"
+], "accent");
 var CONNOTATION_ICON_MAP = {
-	[Connotation.Accent]: "megaphone-line",
-	[Connotation.Information]: "info-line",
-	[Connotation.Success]: "check-circle-line",
-	[Connotation.Warning]: "warning-line",
-	[Connotation.Announcement]: "sparkles-line",
-	[Connotation.Alert]: "error-line"
+	accent: "megaphone-line",
+	information: "info-line",
+	success: "check-circle-line",
+	warning: "warning-line",
+	announcement: "sparkles-line",
+	alert: "error-line"
 };
 /**
 * @public
@@ -125,7 +133,7 @@ var AlertTemplate = (context) => {
 		<div class="${(x) => classNames("control", ["open", x.open], [`placement-${x.placement}`, Boolean(x.placement)], [`strategy-${x.strategy}`, Boolean(x.strategy)])}" ${ref("_controlEl")}>
 			<div
 				part="vvd-theme-alternate"
-				class="${(x) => classNames("base", [`connotation-${x.connotation}`, Boolean(x.connotation)])}"
+				class="${(x) => classNames("base", `connotation-${alertConnotation.parse(x.connotation)}`, "appearance-filled", "with-idle")}"
 				role="alert"
 				aria-hidden="${(x) => x.open ? "false" : "true"}"
 				?hidden="${(x) => !x.open}"

package/unbundled/definition80.cjs

@@ -1,166 +1,46 @@
-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_affix = require("./affix.cjs");
-const require_host_semantics = require("./host-semantics.cjs");
-let _microsoft_fast_element = require("@microsoft/fast-element");
-let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
-//#region src/lib/tree-item/tree-item.scss?inline
-var tree_item_default = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.control{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control:disabled,.control.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)),.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}@media (hover:hover){.control.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}}.control.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}.control{--_connotation-color-primary:var(--vvd-tree-item-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-tree-item-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-tree-item-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-faint:var(--vvd-tree-item-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-tree-item-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-firm:var(--vvd-tree-item-accent-firm,var(--vvd-color-canvas-text));box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);hyphens:auto;inline-size:100%;min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));vertical-align:middle;word-break:break-word;user-select:none;border-radius:8px;align-items:center;gap:12px;padding-inline:16px;text-decoration:none;display:inline-flex;position:relative}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}:host(:focus-visible) .control{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))}:host(:focus-visible) .control:not(.selected){--focus-stroke-gap-color:transparent}.control .text{font:var(--vvd-typography-base)}.expandCollapseButton{border-radius:8px;align-items:center;font-size:20px;display:flex}.expandCollapseButton .expandCollapseIcon{margin:4px}@media (hover:hover){.expandCollapseButton:hover{background-color:var(--vvd-color-neutral-100)}.selected .expandCollapseButton:hover{background-color:var(--vvd-color-neutral-700)}}.items{flex-direction:column;gap:4px;margin-block-start:4px;padding-inline-start:48px;display:flex}slot[name=icon]{font-size:20px;line-height:1}.control:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}";
-//#endregion
-//#region src/lib/tree-item/tree-item.ts
-function isTreeItemElement(el) {
-	return (0, _microsoft_fast_web_utilities.isHTMLElement)(el) && (el.getAttribute("role") === "treeitem" || el instanceof TreeItem);
-}
-/**
-* @public
-* @component tree-item
-* @slot item - To specify a child tree item.
-* @slot icon - The preferred way to add an icon to the component.
-* @event {CustomEvent<HTMLElement>} expanded-change - Fires a custom 'expanded-change' event when the expanded state changes
-* @event {CustomEvent<HTMLElement>} selected-change - Fires a custom 'selected-change' event when the selected state changes
-*/
-var TreeItem = class extends require_host_semantics.HostSemantics(require_affix.AffixIcon(require_vivid_element.VividElement)) {
-	constructor(..._args) {
-		super(..._args);
-		this.expanded = false;
-		this.selected = false;
-		this.disabled = false;
-		this.focusable = false;
-		this.isNestedItem = () => {
-			return isTreeItemElement(this.parentElement);
-		};
-		this.handleExpandCollapseButtonClick = (e) => {
-			if (!this.disabled && !e.defaultPrevented) this.expanded = !this.expanded;
-		};
-		this.handleFocus = (_e) => {
-			this.setAttribute("tabindex", "0");
-		};
-		this.handleBlur = (_e) => {
-			this.setAttribute("tabindex", "-1");
-		};
-	}
-	/** @internal */
-	expandedChanged() {
-		if (this.$fastController.isConnected) this.$emit("expanded-change", this);
-	}
-	/** @internal */
-	selectedChanged() {
-		if (this.$fastController.isConnected) this.$emit("selected-change", this);
-	}
-	itemsChanged() {
-		if (this.$fastController.isConnected) this.items.forEach((node) => {
-			/* v8 ignore else -- @preserve */
-			if (isTreeItemElement(node)) node.nested = true;
-		});
-	}
-	/**
-	* Places document focus on a tree item
-	*
-	* @param el - the element to focus
-	*/
-	static focusItem(el) {
-		el.focusable = true;
-		el.focus();
-	}
-	/**
-	* Gets number of children
-	*
-	* @internal
-	*/
-	childItemLength() {
-		return this.childItems.filter((item) => {
-			return isTreeItemElement(item);
-		}).length;
-	}
+const require_definition = require("./definition6.cjs");
+const require_definition$1 = require("./definition9.cjs");
+const require_definition$2 = require("./definition22.cjs");
+const require_definition$3 = require("./definition26.cjs");
+const require_picker_field_template = require("./picker-field.template.cjs");
+const require_time_selection_picker_template = require("./time-selection-picker.template.cjs");
+//#region src/lib/time-picker/time-picker.template.ts
+var TimePickerTemplate = (context) => {
+	return require_picker_field_template.PickerFieldTemplate(context, require_time_selection_picker_template.TimeSelectionPickerTemplate(context, 6), {
+		withSeparator: true,
+		padded: false
+	});
 };
-require_decorate.__decorate([_microsoft_fast_element.attr], TreeItem.prototype, "text", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], TreeItem.prototype, "expanded", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], TreeItem.prototype, "selected", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], TreeItem.prototype, "disabled", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], TreeItem.prototype, "focusable", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], TreeItem.prototype, "childItems", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], TreeItem.prototype, "items", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], TreeItem.prototype, "nested", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], TreeItem.prototype, "renderCollapsedChildren", void 0);
 //#endregion
-//#region src/lib/tree-item/tree-item.template.ts
-var expandCollapseButton = (context) => {
-	const iconTag = context.tagFor(require_icon.Icon);
-	return _microsoft_fast_element.html`
-	<div aria-hidden="true"
-		class="expandCollapseButton"
-		@click="${(x, c) => x.handleExpandCollapseButtonClick(c.event)}"
-			${(0, _microsoft_fast_element.ref)("expandCollapseButton")}
-	>
-		<${iconTag} class="expandCollapseIcon" name="${(x) => x.expanded ? "chevron-down-line" : "chevron-right-line"}"></${iconTag}>
-	</div>`;
-};
-var TreeItemTemplate = (context) => {
-	const affixIconTemplate = require_affix.affixIconTemplateFactory(context);
-	const treeItemTagName = context.tagFor(TreeItem, true);
-	return _microsoft_fast_element.html` <template
-		slot="${(x) => x.isNestedItem() ? "item" : void 0}"
-		tabindex="-1"
-		${require_host_semantics.applyHostSemantics({
-		role: "treeitem",
-		ariaExpanded: (x) => x.childItems && x.childItems.length > 0 ? x.expanded : void 0,
-		ariaSelected: (x) => x.selected,
-		ariaDisabled: (x) => x.disabled
-	})}
-		@focusin="${(x, c) => x.handleFocus(c.event)}"
-		@focusout="${(x, c) => x.handleBlur(c.event)}"
-		${(0, _microsoft_fast_element.children)({
-		property: "childItems",
-		filter: (0, _microsoft_fast_element.elements)(treeItemTagName)
-	})}
-	>
-		<div
-			class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("control", ["disabled", x.disabled], ["selected", x.selected])}"
-		>
-			${(0, _microsoft_fast_element.when)((x) => x.childItems && x.childItems.length > 0, expandCollapseButton(context))}
-			${(x) => affixIconTemplate(x.icon, require_affix.IconWrapper.Slot)}
-			${(x) => x.text}
-		</div>
-		${(0, _microsoft_fast_element.when)((x) => x.childItems && x.childItems.length > 0 && x.expanded, _microsoft_fast_element.html` <div role="group" class="items">
-				<slot name="item" ${(0, _microsoft_fast_element.slotted)("items")}></slot>
-			</div>`)}
-	</template>`;
-};
-//#endregion
-//#region src/lib/tree-item/definition.ts
+//#region src/lib/time-picker/definition.ts
 /** @internal */
-var treeItemDefinition = require_vivid_element.defineVividComponent("tree-item", TreeItem, TreeItemTemplate, [require_definition.iconDefinition], { styles: tree_item_default });
+var timePickerDefinition = require_vivid_element.defineVividComponent("time-picker", require_time_selection_picker_template.TimePicker, TimePickerTemplate, [
+	require_definition$3.textFieldDefinition,
+	require_definition$1.popupDefinition,
+	require_definition.buttonDefinition,
+	require_time_selection_picker_template.inlineTimePickerDefinition,
+	require_definition$2.visuallyHiddenDefinition
+], {
+	styles: require_picker_field_template.picker_field_default,
+	shadowOptions: { delegatesFocus: true }
+});
 /**
-* Registers the tree-item element with the design system.
+* Registers the time-picker element with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerTreeItem = require_vivid_element.createRegisterFunction(treeItemDefinition);
+var registerTimePicker = require_vivid_element.createRegisterFunction(timePickerDefinition);
 //#endregion
-Object.defineProperty(exports, "TreeItem", {
-	enumerable: true,
-	get: function() {
-		return TreeItem;
-	}
-});
-Object.defineProperty(exports, "isTreeItemElement", {
-	enumerable: true,
-	get: function() {
-		return isTreeItemElement;
-	}
-});
-Object.defineProperty(exports, "registerTreeItem", {
+Object.defineProperty(exports, "registerTimePicker", {
 	enumerable: true,
 	get: function() {
-		return registerTreeItem;
+		return registerTimePicker;
 	}
 });
-Object.defineProperty(exports, "treeItemDefinition", {
+Object.defineProperty(exports, "timePickerDefinition", {
 	enumerable: true,
 	get: function() {
-		return treeItemDefinition;
+		return timePickerDefinition;
 	}
 });

package/unbundled/definition80.js

@@ -1,142 +1,35 @@
-import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
-import { t as iconDefinition } from "./definition.js";
-import { t as __decorate } from "./decorate.js";
-import { t as Icon } from "./icon.js";
-import { a as affixIconTemplateFactory, i as IconWrapper, t as AffixIcon } from "./affix.js";
-import { n as applyHostSemantics, t as HostSemantics } from "./host-semantics.js";
-import { attr, children, elements, html, observable, ref, slotted, when } from "@microsoft/fast-element";
-import { classNames, isHTMLElement } from "@microsoft/fast-web-utilities";
-//#region src/lib/tree-item/tree-item.scss?inline
-var tree_item_default = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.control{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control:disabled,.control.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)),.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}@media (hover:hover){.control.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}}.control.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}.control{--_connotation-color-primary:var(--vvd-tree-item-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-tree-item-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-tree-item-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-faint:var(--vvd-tree-item-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-tree-item-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-firm:var(--vvd-tree-item-accent-firm,var(--vvd-color-canvas-text));box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);hyphens:auto;inline-size:100%;min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));vertical-align:middle;word-break:break-word;user-select:none;border-radius:8px;align-items:center;gap:12px;padding-inline:16px;text-decoration:none;display:inline-flex;position:relative}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}:host(:focus-visible) .control{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))}:host(:focus-visible) .control:not(.selected){--focus-stroke-gap-color:transparent}.control .text{font:var(--vvd-typography-base)}.expandCollapseButton{border-radius:8px;align-items:center;font-size:20px;display:flex}.expandCollapseButton .expandCollapseIcon{margin:4px}@media (hover:hover){.expandCollapseButton:hover{background-color:var(--vvd-color-neutral-100)}.selected .expandCollapseButton:hover{background-color:var(--vvd-color-neutral-700)}}.items{flex-direction:column;gap:4px;margin-block-start:4px;padding-inline-start:48px;display:flex}slot[name=icon]{font-size:20px;line-height:1}.control:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}";
-//#endregion
-//#region src/lib/tree-item/tree-item.ts
-function isTreeItemElement(el) {
-	return isHTMLElement(el) && (el.getAttribute("role") === "treeitem" || el instanceof TreeItem);
-}
-/**
-* @public
-* @component tree-item
-* @slot item - To specify a child tree item.
-* @slot icon - The preferred way to add an icon to the component.
-* @event {CustomEvent<HTMLElement>} expanded-change - Fires a custom 'expanded-change' event when the expanded state changes
-* @event {CustomEvent<HTMLElement>} selected-change - Fires a custom 'selected-change' event when the selected state changes
-*/
-var TreeItem = class extends HostSemantics(AffixIcon(VividElement)) {
-	constructor(..._args) {
-		super(..._args);
-		this.expanded = false;
-		this.selected = false;
-		this.disabled = false;
-		this.focusable = false;
-		this.isNestedItem = () => {
-			return isTreeItemElement(this.parentElement);
-		};
-		this.handleExpandCollapseButtonClick = (e) => {
-			if (!this.disabled && !e.defaultPrevented) this.expanded = !this.expanded;
-		};
-		this.handleFocus = (_e) => {
-			this.setAttribute("tabindex", "0");
-		};
-		this.handleBlur = (_e) => {
-			this.setAttribute("tabindex", "-1");
-		};
-	}
-	/** @internal */
-	expandedChanged() {
-		if (this.$fastController.isConnected) this.$emit("expanded-change", this);
-	}
-	/** @internal */
-	selectedChanged() {
-		if (this.$fastController.isConnected) this.$emit("selected-change", this);
-	}
-	itemsChanged() {
-		if (this.$fastController.isConnected) this.items.forEach((node) => {
-			/* v8 ignore else -- @preserve */
-			if (isTreeItemElement(node)) node.nested = true;
-		});
-	}
-	/**
-	* Places document focus on a tree item
-	*
-	* @param el - the element to focus
-	*/
-	static focusItem(el) {
-		el.focusable = true;
-		el.focus();
-	}
-	/**
-	* Gets number of children
-	*
-	* @internal
-	*/
-	childItemLength() {
-		return this.childItems.filter((item) => {
-			return isTreeItemElement(item);
-		}).length;
-	}
-};
-__decorate([attr], TreeItem.prototype, "text", void 0);
-__decorate([attr({ mode: "boolean" })], TreeItem.prototype, "expanded", void 0);
-__decorate([attr({ mode: "boolean" })], TreeItem.prototype, "selected", void 0);
-__decorate([attr({ mode: "boolean" })], TreeItem.prototype, "disabled", void 0);
-__decorate([observable], TreeItem.prototype, "focusable", void 0);
-__decorate([observable], TreeItem.prototype, "childItems", void 0);
-__decorate([observable], TreeItem.prototype, "items", void 0);
-__decorate([observable], TreeItem.prototype, "nested", void 0);
-__decorate([observable], TreeItem.prototype, "renderCollapsedChildren", void 0);
-//#endregion
-//#region src/lib/tree-item/tree-item.template.ts
-var expandCollapseButton = (context) => {
-	const iconTag = context.tagFor(Icon);
-	return html`
-	<div aria-hidden="true"
-		class="expandCollapseButton"
-		@click="${(x, c) => x.handleExpandCollapseButtonClick(c.event)}"
-			${ref("expandCollapseButton")}
-	>
-		<${iconTag} class="expandCollapseIcon" name="${(x) => x.expanded ? "chevron-down-line" : "chevron-right-line"}"></${iconTag}>
-	</div>`;
-};
-var TreeItemTemplate = (context) => {
-	const affixIconTemplate = affixIconTemplateFactory(context);
-	const treeItemTagName = context.tagFor(TreeItem, true);
-	return html` <template
-		slot="${(x) => x.isNestedItem() ? "item" : void 0}"
-		tabindex="-1"
-		${applyHostSemantics({
-		role: "treeitem",
-		ariaExpanded: (x) => x.childItems && x.childItems.length > 0 ? x.expanded : void 0,
-		ariaSelected: (x) => x.selected,
-		ariaDisabled: (x) => x.disabled
-	})}
-		@focusin="${(x, c) => x.handleFocus(c.event)}"
-		@focusout="${(x, c) => x.handleBlur(c.event)}"
-		${children({
-		property: "childItems",
-		filter: elements(treeItemTagName)
-	})}
-	>
-		<div
-			class="${(x) => classNames("control", ["disabled", x.disabled], ["selected", x.selected])}"
-		>
-			${when((x) => x.childItems && x.childItems.length > 0, expandCollapseButton(context))}
-			${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
-			${(x) => x.text}
-		</div>
-		${when((x) => x.childItems && x.childItems.length > 0 && x.expanded, html` <div role="group" class="items">
-				<slot name="item" ${slotted("items")}></slot>
-			</div>`)}
-	</template>`;
+import { d as createRegisterFunction, u as defineVividComponent } from "./vivid-element.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 { r as picker_field_default, t as PickerFieldTemplate } from "./picker-field.template.js";
+import { n as TimePicker, s as inlineTimePickerDefinition, t as TimeSelectionPickerTemplate } from "./time-selection-picker.template.js";
+//#region src/lib/time-picker/time-picker.template.ts
+var TimePickerTemplate = (context) => {
+	return PickerFieldTemplate(context, TimeSelectionPickerTemplate(context, 6), {
+		withSeparator: true,
+		padded: false
+	});
 };
 //#endregion
-//#region src/lib/tree-item/definition.ts
+//#region src/lib/time-picker/definition.ts
 /** @internal */
-var treeItemDefinition = defineVividComponent("tree-item", TreeItem, TreeItemTemplate, [iconDefinition], { styles: tree_item_default });
+var timePickerDefinition = defineVividComponent("time-picker", TimePicker, TimePickerTemplate, [
+	textFieldDefinition,
+	popupDefinition,
+	buttonDefinition,
+	inlineTimePickerDefinition,
+	visuallyHiddenDefinition
+], {
+	styles: picker_field_default,
+	shadowOptions: { delegatesFocus: true }
+});
 /**
-* Registers the tree-item element with the design system.
+* Registers the time-picker element with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerTreeItem = createRegisterFunction(treeItemDefinition);
+var registerTimePicker = createRegisterFunction(timePickerDefinition);
 //#endregion
-export { isTreeItemElement as i, treeItemDefinition as n, TreeItem as r, registerTreeItem as t };
+export { timePickerDefinition as n, registerTimePicker as t };