@vonage/vivid 5.23.1-preview.0 → 5.24.0

package/unbundled/time-selection-picker.template.cjs

@@ -213,9 +213,7 @@ var emitChange = (x, time) => {
 		composed: false
 	});
 };
-/**
-* Renders a picker for hours/minutes/etc. using a listbox pattern.
-*/
+/** Renders a picker for hours/minutes/etc. using a listbox pattern. */
 var renderPicker = (column) => {
 	return _microsoft_fast_element.html`<div class="picker-wrapper">
 		<ul
@@ -311,11 +309,9 @@ require_decorate.__decorate([_microsoft_fast_element.observable], InlineTimePick
 require_decorate.__decorate([_microsoft_fast_element.observable], InlineTimePicker.prototype, "max", void 0);
 //#endregion
 //#region src/shared/picker-field/mixins/inline-time-picker/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var inlineTimePickerDefinition = require_vivid_element.defineVividComponent("inline-time-picker", InlineTimePicker, InlineTimePickerTemplate, [], {
-	styles: ":host{display:inline-block}.time-pickers{block-size:calc(28px * var(--_inline-time-picker-num-options-visible) + 4px * (var(--_inline-time-picker-num-options-visible) - 1));justify-content:center;gap:4px;padding:4px;display:flex;overflow:hidden}.time-pickers .picker-wrapper{border-radius:4px;flex-direction:column;display:flex;position:relative}.time-pickers .picker-wrapper.focused:has(.picker:focus-visible){--focus-stroke-gap-color:transparent;--focus-inset:-2px;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))}.time-pickers .picker{scrollbar-width:none;border-radius:4px;flex-direction:column;gap:4px;inline-size:50px;margin:0 -4px;padding:0 4px;list-style:none;display:flex;position:relative;overflow:hidden scroll}@media (hover:hover){.time-pickers .picker:hover{scrollbar-width:auto}}.time-pickers .picker:after{block-size:calc(28px * (var(--_inline-time-picker-num-options-visible) - 1) + 4px * (var(--_inline-time-picker-num-options-visible) - 1 - 1));content:\"\";flex-shrink:0;display:block}.time-pickers .picker:focus-visible{outline:none}.time-pickers .option{--_connotation-color-primary:var(--vvd-time-picker-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-firm:var(--vvd-time-picker-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-time-picker-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-time-picker-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-dim:var(--vvd-time-picker-accent-dim,var(--vvd-color-neutral-200));--_connotation-color-pale:var(--vvd-time-picker-accent-pale,var(--vvd-color-neutral-300));--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.time-pickers .option:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.time-pickers .option.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.time-pickers .option:active:where(:not(.disabled,:disabled)),.time-pickers .option.active:where(:not(.disabled,:disabled)),.time-pickers .option.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){.time-pickers .option.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}}.time-pickers .option.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}.time-pickers .option.selected:disabled,.time-pickers .option.selected.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:transparent}.time-pickers .option{background-color:var(--_appearance-color-fill);block-size:28px;color:var(--_appearance-color-text);cursor:pointer;font:var(--vvd-typography-base);border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;inline-size:50px;display:flex}.time-pickers .picker-wrapper:not(.focused) .picker:focus-visible .option.selected{--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))}",
+	styles: ":host{display:inline-block}.time-pickers{block-size:calc(28px * var(--_inline-time-picker-num-options-visible) + 4px * (var(--_inline-time-picker-num-options-visible) - 1));justify-content:center;gap:4px;padding:4px;display:flex;overflow:hidden}.time-pickers .picker-wrapper{border-radius:4px;flex-direction:column;display:flex;position:relative}.time-pickers .picker-wrapper.focused:has(.picker:focus-visible){--focus-stroke-gap-color:transparent;--focus-inset:-2px;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))}.time-pickers .picker{scrollbar-width:none;border-radius:4px;flex-direction:column;gap:4px;inline-size:50px;margin:0 -4px;padding:0 4px;list-style:none;display:flex;position:relative;overflow:hidden scroll}@media (hover:hover){.time-pickers .picker:hover{scrollbar-width:auto}}.time-pickers .picker:after{block-size:calc(28px * (var(--_inline-time-picker-num-options-visible) - 1) + 4px * (var(--_inline-time-picker-num-options-visible) - 1 - 1));content:\"\";flex-shrink:0;display:block}.time-pickers .picker:focus-visible{outline:none}.time-pickers .option{--_connotation-color-primary:var(--vvd-time-picker-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-firm:var(--vvd-time-picker-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-time-picker-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-time-picker-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-dim:var(--vvd-time-picker-accent-dim,var(--vvd-color-neutral-200));--_connotation-color-pale:var(--vvd-time-picker-accent-pale,var(--vvd-color-neutral-300));--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.time-pickers .option:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.time-pickers .option.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.time-pickers .option:active:where(:not(.disabled,:disabled)),.time-pickers .option.active:where(:not(.disabled,:disabled)),.time-pickers .option.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){.time-pickers .option.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}}.time-pickers .option.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}.time-pickers .option.selected:disabled,.time-pickers .option.selected.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:transparent}.time-pickers .option{background-color:var(--_appearance-color-fill);block-size:28px;color:var(--_appearance-color-text);cursor:pointer;font:var(--vvd-typography-base);border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;inline-size:50px;display:flex}.time-pickers .picker-wrapper:not(.focused) .picker:focus-visible .option.selected{--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))}",
 	shadowOptions: { delegatesFocus: true }
 });
 require_vivid_element.createRegisterFunction(inlineTimePickerDefinition);
@@ -368,9 +364,7 @@ var parsePresentationTime = (input, use12HourClock) => {
 };
 //#endregion
 //#region src/shared/picker-field/mixins/time-selection-picker.ts
-/**
-* Mixin for pickers that allow selecting a time.
-*/
+/** Mixin for pickers that allow selecting a time. */
 var TimeSelectionPicker = (Base) => {
 	class TimeSelectionPickerElement extends Base {
 		constructor(..._args) {
@@ -381,21 +375,15 @@ var TimeSelectionPicker = (Base) => {
 				if (this.value) this._presentationValue = this._toPresentationValue(this.value);
 			} };
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		get _displaySeconds() {
 			return this.secondsStep !== null;
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		get _use12hClock() {
 			return this.clock ? this.clock === "12h" : this.locale.timePicker.defaultTo12HourClock;
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		get _timePlaceholder() {
 			let format = "hh:mm";
 			if (this._displaySeconds) format += ":ss";
@@ -411,23 +399,17 @@ var TimeSelectionPicker = (Base) => {
 		#stopObservingClockChanges() {
 			this.#clockChangeObserver.dispose();
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		connectedCallback() {
 			super.connectedCallback();
 			this.#startObservingClockChanges();
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		disconnectedCallback() {
 			super.disconnectedCallback();
 			this.#stopObservingClockChanges();
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		_onPickerButtonClick() {
 			super._onPickerButtonClick();
 			if (this._popupOpen) {
@@ -435,15 +417,11 @@ var TimeSelectionPicker = (Base) => {
 				this._inlineTimePickerEl.scrollSelectedOptionsToTop();
 			}
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		_onInlineTimePickerChange(event) {
 			this._updateValueDueToUserInteraction(this._withUpdatedTime(event.detail), false);
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		_onInlineTimePickerLastColumnSelected() {
 			this._closePopup();
 		}
@@ -481,45 +459,31 @@ var ValidTimeFilter = {
 * @testAction selectTime selectTime
 */
 var TimePicker = class extends TimeSelectionPicker(require_single_value_picker.SingleValuePicker(require_picker_field_template.PickerField)) {
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_toPresentationValue(value) {
 		return formatPresentationTime(value, this._displaySeconds, this._use12hClock);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_parsePresentationValue(presentationValue) {
 		return parsePresentationTime(presentationValue, this._use12hClock);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _timeValue() {
 		return this.value;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_withUpdatedTime(timeStr) {
 		return timeStr;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _resolvedMinTime() {
 		return this.min || null;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _resolvedMaxTime() {
 		return this.max || null;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	minChanged(_, newMin) {
 		/* v8 ignore if -- @preserve */
 		if (this.proxy instanceof HTMLInputElement) {
@@ -527,9 +491,7 @@ var TimePicker = class extends TimeSelectionPicker(require_single_value_picker.S
 			this.validate();
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	maxChanged(_, newMax) {
 		/* v8 ignore if -- @preserve */
 		if (this.proxy instanceof HTMLInputElement) {
@@ -545,28 +507,20 @@ var TimePicker = class extends TimeSelectionPicker(require_single_value_picker.S
 		this.proxy.type = "time";
 		this.proxy.step = "1";
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _textFieldPlaceholder() {
 		return this._timePlaceholder;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _pickerButtonIcon() {
 		return "clock-line";
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _pickerButtonLabel() {
 		if (this.value) return this.locale.timePicker.changeTimeLabel(this._toPresentationValue(this.value));
 		return this.locale.timePicker.chooseTimeLabel;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_onPickerButtonClick() {
 		super._onPickerButtonClick();
 		if (this._popupOpen) {
@@ -574,21 +528,15 @@ var TimePicker = class extends TimeSelectionPicker(require_single_value_picker.S
 			this._focusableElsWithinDialog()[0]?.focus();
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _dialogLabel() {
 		return this.locale.timePicker.chooseTimeLabel;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_focusableElsWithinDialog() {
 		return this._dialogEl.querySelectorAll("#inline-time-picker, .vwc-button");
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_getCustomValidationError() {
 		if (this._isPresentationValueInvalid()) return this.locale.timePicker.invalidTimeError;
 		return null;

package/unbundled/time-selection-picker.template.js

@@ -212,9 +212,7 @@ var emitChange = (x, time) => {
 		composed: false
 	});
 };
-/**
-* Renders a picker for hours/minutes/etc. using a listbox pattern.
-*/
+/** Renders a picker for hours/minutes/etc. using a listbox pattern. */
 var renderPicker = (column) => {
 	return html`<div class="picker-wrapper">
 		<ul
@@ -310,11 +308,9 @@ __decorate([observable], InlineTimePicker.prototype, "min", void 0);
 __decorate([observable], InlineTimePicker.prototype, "max", void 0);
 //#endregion
 //#region src/shared/picker-field/mixins/inline-time-picker/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var inlineTimePickerDefinition = defineVividComponent("inline-time-picker", InlineTimePicker, InlineTimePickerTemplate, [], {
-	styles: ":host{display:inline-block}.time-pickers{block-size:calc(28px * var(--_inline-time-picker-num-options-visible) + 4px * (var(--_inline-time-picker-num-options-visible) - 1));justify-content:center;gap:4px;padding:4px;display:flex;overflow:hidden}.time-pickers .picker-wrapper{border-radius:4px;flex-direction:column;display:flex;position:relative}.time-pickers .picker-wrapper.focused:has(.picker:focus-visible){--focus-stroke-gap-color:transparent;--focus-inset:-2px;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))}.time-pickers .picker{scrollbar-width:none;border-radius:4px;flex-direction:column;gap:4px;inline-size:50px;margin:0 -4px;padding:0 4px;list-style:none;display:flex;position:relative;overflow:hidden scroll}@media (hover:hover){.time-pickers .picker:hover{scrollbar-width:auto}}.time-pickers .picker:after{block-size:calc(28px * (var(--_inline-time-picker-num-options-visible) - 1) + 4px * (var(--_inline-time-picker-num-options-visible) - 1 - 1));content:\"\";flex-shrink:0;display:block}.time-pickers .picker:focus-visible{outline:none}.time-pickers .option{--_connotation-color-primary:var(--vvd-time-picker-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-firm:var(--vvd-time-picker-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-time-picker-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-time-picker-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-dim:var(--vvd-time-picker-accent-dim,var(--vvd-color-neutral-200));--_connotation-color-pale:var(--vvd-time-picker-accent-pale,var(--vvd-color-neutral-300));--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.time-pickers .option:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.time-pickers .option.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.time-pickers .option:active:where(:not(.disabled,:disabled)),.time-pickers .option.active:where(:not(.disabled,:disabled)),.time-pickers .option.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){.time-pickers .option.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}}.time-pickers .option.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}.time-pickers .option.selected:disabled,.time-pickers .option.selected.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:transparent}.time-pickers .option{background-color:var(--_appearance-color-fill);block-size:28px;color:var(--_appearance-color-text);cursor:pointer;font:var(--vvd-typography-base);border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;inline-size:50px;display:flex}.time-pickers .picker-wrapper:not(.focused) .picker:focus-visible .option.selected{--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))}",
+	styles: ":host{display:inline-block}.time-pickers{block-size:calc(28px * var(--_inline-time-picker-num-options-visible) + 4px * (var(--_inline-time-picker-num-options-visible) - 1));justify-content:center;gap:4px;padding:4px;display:flex;overflow:hidden}.time-pickers .picker-wrapper{border-radius:4px;flex-direction:column;display:flex;position:relative}.time-pickers .picker-wrapper.focused:has(.picker:focus-visible){--focus-stroke-gap-color:transparent;--focus-inset:-2px;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))}.time-pickers .picker{scrollbar-width:none;border-radius:4px;flex-direction:column;gap:4px;inline-size:50px;margin:0 -4px;padding:0 4px;list-style:none;display:flex;position:relative;overflow:hidden scroll}@media (hover:hover){.time-pickers .picker:hover{scrollbar-width:auto}}.time-pickers .picker:after{block-size:calc(28px * (var(--_inline-time-picker-num-options-visible) - 1) + 4px * (var(--_inline-time-picker-num-options-visible) - 1 - 1));content:\"\";flex-shrink:0;display:block}.time-pickers .picker:focus-visible{outline:none}.time-pickers .option{--_connotation-color-primary:var(--vvd-time-picker-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-firm:var(--vvd-time-picker-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-time-picker-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-time-picker-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-dim:var(--vvd-time-picker-accent-dim,var(--vvd-color-neutral-200));--_connotation-color-pale:var(--vvd-time-picker-accent-pale,var(--vvd-color-neutral-300));--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.time-pickers .option:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.time-pickers .option.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.time-pickers .option:active:where(:not(.disabled,:disabled)),.time-pickers .option.active:where(:not(.disabled,:disabled)),.time-pickers .option.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){.time-pickers .option.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}}.time-pickers .option.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}.time-pickers .option.selected:disabled,.time-pickers .option.selected.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:transparent}.time-pickers .option{background-color:var(--_appearance-color-fill);block-size:28px;color:var(--_appearance-color-text);cursor:pointer;font:var(--vvd-typography-base);border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;inline-size:50px;display:flex}.time-pickers .picker-wrapper:not(.focused) .picker:focus-visible .option.selected{--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))}",
 	shadowOptions: { delegatesFocus: true }
 });
 createRegisterFunction(inlineTimePickerDefinition);
@@ -367,9 +363,7 @@ var parsePresentationTime = (input, use12HourClock) => {
 };
 //#endregion
 //#region src/shared/picker-field/mixins/time-selection-picker.ts
-/**
-* Mixin for pickers that allow selecting a time.
-*/
+/** Mixin for pickers that allow selecting a time. */
 var TimeSelectionPicker = (Base) => {
 	class TimeSelectionPickerElement extends Base {
 		constructor(..._args) {
@@ -380,21 +374,15 @@ var TimeSelectionPicker = (Base) => {
 				if (this.value) this._presentationValue = this._toPresentationValue(this.value);
 			} };
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		get _displaySeconds() {
 			return this.secondsStep !== null;
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		get _use12hClock() {
 			return this.clock ? this.clock === "12h" : this.locale.timePicker.defaultTo12HourClock;
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		get _timePlaceholder() {
 			let format = "hh:mm";
 			if (this._displaySeconds) format += ":ss";
@@ -410,23 +398,17 @@ var TimeSelectionPicker = (Base) => {
 		#stopObservingClockChanges() {
 			this.#clockChangeObserver.dispose();
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		connectedCallback() {
 			super.connectedCallback();
 			this.#startObservingClockChanges();
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		disconnectedCallback() {
 			super.disconnectedCallback();
 			this.#stopObservingClockChanges();
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		_onPickerButtonClick() {
 			super._onPickerButtonClick();
 			if (this._popupOpen) {
@@ -434,15 +416,11 @@ var TimeSelectionPicker = (Base) => {
 				this._inlineTimePickerEl.scrollSelectedOptionsToTop();
 			}
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		_onInlineTimePickerChange(event) {
 			this._updateValueDueToUserInteraction(this._withUpdatedTime(event.detail), false);
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		_onInlineTimePickerLastColumnSelected() {
 			this._closePopup();
 		}
@@ -480,45 +458,31 @@ var ValidTimeFilter = {
 * @testAction selectTime selectTime
 */
 var TimePicker = class extends TimeSelectionPicker(SingleValuePicker(PickerField)) {
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_toPresentationValue(value) {
 		return formatPresentationTime(value, this._displaySeconds, this._use12hClock);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_parsePresentationValue(presentationValue) {
 		return parsePresentationTime(presentationValue, this._use12hClock);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _timeValue() {
 		return this.value;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_withUpdatedTime(timeStr) {
 		return timeStr;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _resolvedMinTime() {
 		return this.min || null;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _resolvedMaxTime() {
 		return this.max || null;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	minChanged(_, newMin) {
 		/* v8 ignore if -- @preserve */
 		if (this.proxy instanceof HTMLInputElement) {
@@ -526,9 +490,7 @@ var TimePicker = class extends TimeSelectionPicker(SingleValuePicker(PickerField
 			this.validate();
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	maxChanged(_, newMax) {
 		/* v8 ignore if -- @preserve */
 		if (this.proxy instanceof HTMLInputElement) {
@@ -544,28 +506,20 @@ var TimePicker = class extends TimeSelectionPicker(SingleValuePicker(PickerField
 		this.proxy.type = "time";
 		this.proxy.step = "1";
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _textFieldPlaceholder() {
 		return this._timePlaceholder;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _pickerButtonIcon() {
 		return "clock-line";
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _pickerButtonLabel() {
 		if (this.value) return this.locale.timePicker.changeTimeLabel(this._toPresentationValue(this.value));
 		return this.locale.timePicker.chooseTimeLabel;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_onPickerButtonClick() {
 		super._onPickerButtonClick();
 		if (this._popupOpen) {
@@ -573,21 +527,15 @@ var TimePicker = class extends TimeSelectionPicker(SingleValuePicker(PickerField
 			this._focusableElsWithinDialog()[0]?.focus();
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _dialogLabel() {
 		return this.locale.timePicker.chooseTimeLabel;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_focusableElsWithinDialog() {
 		return this._dialogEl.querySelectorAll("#inline-time-picker, .vwc-button");
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_getCustomValidationError() {
 		if (this._isPresentationValueInvalid()) return this.locale.timePicker.invalidTimeError;
 		return null;

package/unbundled/trapped-focus.cjs

@@ -3,9 +3,7 @@ var ignoredEvents = /* @__PURE__ */ new WeakSet();
 var ignoreEventInFocusTraps = (event) => {
 	ignoredEvents.add(event);
 };
-/**
-* Mixin for elements that trap focus.
-*/
+/** Mixin for elements that trap focus. */
 var TrappedFocus = (Base) => {
 	class TrappedFocusElement extends Base {
 		/**

package/unbundled/trapped-focus.js

@@ -3,9 +3,7 @@ var ignoredEvents = /* @__PURE__ */ new WeakSet();
 var ignoreEventInFocusTraps = (event) => {
 	ignoredEvents.add(event);
 };
-/**
-* Mixin for elements that trap focus.
-*/
+/** Mixin for elements that trap focus. */
 var TrappedFocus = (Base) => {
 	class TrappedFocusElement extends Base {
 		/**

package/unbundled/vivid-element.cjs

@@ -7,9 +7,7 @@ function resolve(templateOrResolveFunction, ctx) {
 }
 var registeredTags = /* @__PURE__ */ new Set();
 var tagByType = /* @__PURE__ */ new Map();
-/**
-* Creates a function that registers a component and its dependencies with the given prefix.
-*/
+/** Creates a function that registers a component and its dependencies with the given prefix. */
 var createRegisterFunction = (definition) => (prefix = "vwc") => {
 	const prefixed = (name) => `${prefix}-${name}`;
 	const registerComponent = (componentDefinition) => {
@@ -103,9 +101,7 @@ var handleElementConnectedCallback = (element) => {
 };
 //#endregion
 //#region src/shared/aria/aria-mixin.ts
-/**
-* Value properties of the ARIAMixin (see: https://www.w3.org/TR/wai-aria-1.3/#ARIAMixin) which is applied to Element.
-*/
+/** Value properties of the ARIAMixin (see: https://www.w3.org/TR/wai-aria-1.3/#ARIAMixin) which is applied to Element. */
 var ariaValueProperties = [
 	"role",
 	"ariaAtomic",
@@ -154,9 +150,7 @@ var ariaValueProperties = [
 * Single-element IDREF properties of the ARIAMixin
 * Not yet supported.
 */
-/**
-* Multi-element IDREF properties of the ARIAMixin.
-*/
+/** Multi-element IDREF properties of the ARIAMixin. */
 var ariaIdrefsProperties = [
 	"ariaControls",
 	"ariaDescribedBy",
@@ -172,9 +166,7 @@ var ariaProperties = [...ariaValueProperties, ...ariaIdrefsProperties];
 * e.g. `ariaLabel` → `aria-label`
 */
 var ariaAttributeName = (ariaPropertyName) => ariaPropertyName.replace("aria", "aria-").toLowerCase();
-/**
-* Mixin for all components. Declares all ARIA attributes.
-*/
+/** Mixin for all components. Declares all ARIA attributes. */
 var AriaMixin = (Base) => {
 	class AriaMixinElement extends Base {
 		constructor(...args) {
@@ -201,9 +193,7 @@ var AriaMixin = (Base) => {
 };
 //#endregion
 //#region src/shared/framework/reactive-controller.ts
-/**
-* Mixin implementing ReactiveControllerHost for custom elements.
-*/
+/** Mixin implementing ReactiveControllerHost for custom elements. */
 var ReactiveControllerHostSupport = (Base) => {
 	class ReactiveControllerHostSupportElement extends Base {
 		#controllers = /* @__PURE__ */ new Set();
@@ -244,9 +234,7 @@ function createMetadataLocator() {
 	};
 }
 var locateReplacedPropMetadata = createMetadataLocator();
-/**
-* Decorator to mark a property as deprecated and replaced by another property.
-*/
+/** Decorator to mark a property as deprecated and replaced by another property. */
 var replaces = (config) => ($target, $prop) => {
 	locateReplacedPropMetadata($target.constructor).push({
 		newPropertyName: $prop,
@@ -299,7 +287,7 @@ var ReplacedPropHandling = (Base) => {
 */
 var VividElement = class extends AriaMixin(ReplacedPropHandling(ReactiveControllerHostSupport(_microsoft_fast_element.FASTElement))) {
 	static {
-		this.VIVID_VERSION = "5.23.0";
+		this.VIVID_VERSION = "5.24.0";
 	}
 	/**
 	* Add data-vvd-component attribute with component name globally,
@@ -310,6 +298,15 @@ var VividElement = class extends AriaMixin(ReplacedPropHandling(ReactiveControll
 		const name = this.constructor.componentName;
 		this.setAttribute("data-vvd-component", name);
 	}
+	/** @internal */
+	focus(...args) {
+		const controlEl = this.control;
+		if (this.$fastController.definition.shadowOptions?.delegatesFocus && controlEl) {
+			controlEl.focus(...args);
+			return;
+		}
+		super.focus(...args);
+	}
 };
 //#endregion
 Object.defineProperty(exports, "VividElement", {

package/unbundled/vivid-element.js

@@ -6,9 +6,7 @@ function resolve(templateOrResolveFunction, ctx) {
 }
 var registeredTags = /* @__PURE__ */ new Set();
 var tagByType = /* @__PURE__ */ new Map();
-/**
-* Creates a function that registers a component and its dependencies with the given prefix.
-*/
+/** Creates a function that registers a component and its dependencies with the given prefix. */
 var createRegisterFunction = (definition) => (prefix = "vwc") => {
 	const prefixed = (name) => `${prefix}-${name}`;
 	const registerComponent = (componentDefinition) => {
@@ -102,9 +100,7 @@ var handleElementConnectedCallback = (element) => {
 };
 //#endregion
 //#region src/shared/aria/aria-mixin.ts
-/**
-* Value properties of the ARIAMixin (see: https://www.w3.org/TR/wai-aria-1.3/#ARIAMixin) which is applied to Element.
-*/
+/** Value properties of the ARIAMixin (see: https://www.w3.org/TR/wai-aria-1.3/#ARIAMixin) which is applied to Element. */
 var ariaValueProperties = [
 	"role",
 	"ariaAtomic",
@@ -153,9 +149,7 @@ var ariaValueProperties = [
 * Single-element IDREF properties of the ARIAMixin
 * Not yet supported.
 */
-/**
-* Multi-element IDREF properties of the ARIAMixin.
-*/
+/** Multi-element IDREF properties of the ARIAMixin. */
 var ariaIdrefsProperties = [
 	"ariaControls",
 	"ariaDescribedBy",
@@ -171,9 +165,7 @@ var ariaProperties = [...ariaValueProperties, ...ariaIdrefsProperties];
 * e.g. `ariaLabel` → `aria-label`
 */
 var ariaAttributeName = (ariaPropertyName) => ariaPropertyName.replace("aria", "aria-").toLowerCase();
-/**
-* Mixin for all components. Declares all ARIA attributes.
-*/
+/** Mixin for all components. Declares all ARIA attributes. */
 var AriaMixin = (Base) => {
 	class AriaMixinElement extends Base {
 		constructor(...args) {
@@ -200,9 +192,7 @@ var AriaMixin = (Base) => {
 };
 //#endregion
 //#region src/shared/framework/reactive-controller.ts
-/**
-* Mixin implementing ReactiveControllerHost for custom elements.
-*/
+/** Mixin implementing ReactiveControllerHost for custom elements. */
 var ReactiveControllerHostSupport = (Base) => {
 	class ReactiveControllerHostSupportElement extends Base {
 		#controllers = /* @__PURE__ */ new Set();
@@ -243,9 +233,7 @@ function createMetadataLocator() {
 	};
 }
 var locateReplacedPropMetadata = createMetadataLocator();
-/**
-* Decorator to mark a property as deprecated and replaced by another property.
-*/
+/** Decorator to mark a property as deprecated and replaced by another property. */
 var replaces = (config) => ($target, $prop) => {
 	locateReplacedPropMetadata($target.constructor).push({
 		newPropertyName: $prop,
@@ -298,7 +286,7 @@ var ReplacedPropHandling = (Base) => {
 */
 var VividElement = class extends AriaMixin(ReplacedPropHandling(ReactiveControllerHostSupport(FASTElement))) {
 	static {
-		this.VIVID_VERSION = "5.23.0";
+		this.VIVID_VERSION = "5.24.0";
 	}
 	/**
 	* Add data-vvd-component attribute with component name globally,
@@ -309,6 +297,15 @@ var VividElement = class extends AriaMixin(ReplacedPropHandling(ReactiveControll
 		const name = this.constructor.componentName;
 		this.setAttribute("data-vvd-component", name);
 	}
+	/** @internal */
+	focus(...args) {
+		const controlEl = this.control;
+		if (this.$fastController.definition.shadowOptions?.delegatesFocus && controlEl) {
+			controlEl.focus(...args);
+			return;
+		}
+		super.focus(...args);
+	}
 };
 //#endregion
 export { ariaValueProperties as a, subscribeToAriaPropertyChanges as c, createRegisterFunction as d, ariaIdrefsProperties as i, unsubscribeFromAriaPropertyChanges as l, replaces as n, handleAriaPropertyChange as o, ariaAttributeName as r, publishAriaPropertyChange as s, VividElement as t, defineVividComponent as u };