@vonage/vivid 4.26.0 → 4.28.0

package/shared/picker-field/mixins/min-max-calendar-picker.d.ts

@@ -28,7 +28,7 @@ export declare const MinMaxCalendarPicker: <T_5 extends AbstractConstructor<{
     _hideDatesOutsideMonth: boolean;
     _lastFocussedDate: string | null;
     _isDateSelected(_: string): boolean;
-    _isDateAriaSelected(date: string): void;
+    _isDateAriaSelected(date: string): boolean;
     _isDateInSelectedRange(_: string): boolean;
     _isDateRangeStart(_: string): boolean;
     _isDateRangeEnd(_: string): boolean;
@@ -839,7 +839,7 @@ export declare const MinMaxCalendarPicker: <T_5 extends AbstractConstructor<{
     _hideDatesOutsideMonth: boolean;
     _lastFocussedDate: string | null;
     _isDateSelected(_: string): boolean;
-    _isDateAriaSelected(date: string): void;
+    _isDateAriaSelected(date: string): boolean;
     _isDateInSelectedRange(_: string): boolean;
     _isDateRangeStart(_: string): boolean;
     _isDateRangeEnd(_: string): boolean;

package/shared/picker-field/mixins/single-date-picker.d.ts

@@ -27,7 +27,7 @@ export declare const SingleDatePickerMixin: <T_6 extends AbstractConstructor<{
     _hideDatesOutsideMonth: boolean;
     _lastFocussedDate: string | null;
     _isDateSelected(_: string): boolean;
-    _isDateAriaSelected(date: string): void;
+    _isDateAriaSelected(date: string): boolean;
     _isDateInSelectedRange(_: string): boolean;
     _isDateRangeStart(_: string): boolean;
     _isDateRangeEnd(_: string): boolean;

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

@@ -217,8 +217,10 @@ const shouldDisplay12hClock = (x) => x.clock === "12h";
 const onPickerOptionClick = (x, column, optionValue) => {
   emitChange(x, column.updatedValue(x, optionValue));
   scrollToOption(x, column.id, optionValue, "start");
-  const nextPickerEl = x.shadowRoot.querySelector(
-    `#${column.id} + .picker`
+  const currentPicker = x.shadowRoot.querySelector(`#${column.id}`)?.closest(".picker-wrapper");
+  const nextPickerWrapper = currentPicker?.nextElementSibling;
+  const nextPickerEl = nextPickerWrapper?.querySelector(
+    ".picker"
   );
   if (nextPickerEl) {
     nextPickerEl.focus();
@@ -243,6 +245,7 @@ const onPickerKeyDown = (x, column, event) => {
     const newValue = options[newIndex].value;
     emitChange(x, column.updatedValue(x, newValue));
     scrollToOption(x, column.id, newValue, "nearest");
+    x._clearFocusedClasses();
   }
   return true;
 };
@@ -262,6 +265,7 @@ const onBaseKeyDown = (x, event) => {
     if (x.shadowRoot.activeElement !== terminalElement) {
       pickerField_template.ignoreEventInFocusTraps(event);
     }
+    x._applyFocusedClass();
   }
   return true;
 };
@@ -269,36 +273,40 @@ const emitChange = (x, time) => {
   x.$emit("change", time, { bubbles: false, composed: false });
 };
 const renderPicker = (column) => {
-  return vividElement.html`<ul
-		id="${column.id}"
-		class="picker"
-		role="listbox"
-		tabindex="0"
-		aria-label="${column.getLabel}"
-		aria-activedescendant="${(x) => column.getSelectedOptionValue(x) ? `${column.id}-${column.getSelectedOptionValue(x)}` : void 0}"
-		@keydown="${(x, c) => onPickerKeyDown(x, column, c.event)}"
-	>
-		${repeat.repeat(
+  return vividElement.html`<div class="picker-wrapper">
+		<ul
+			id="${column.id}"
+			class="picker"
+			role="listbox"
+			tabindex="0"
+			aria-label="${column.getLabel}"
+			aria-activedescendant="${(x) => column.getSelectedOptionValue(x) ? `${column.id}-${column.getSelectedOptionValue(x)}` : void 0}"
+			@keydown="${(x, c) => onPickerKeyDown(x, column, c.event)}"
+		>
+			${repeat.repeat(
     (x) => column.getOptions(x),
     vividElement.html`<li
-				id="${(x) => `${column.id}-${x.value}`}"
-				class="${(x, c) => classNames.classNames("option", [
+					id="${(x) => `${column.id}-${x.value}`}"
+					class="${(x, c) => classNames.classNames("option", [
       "selected",
       column.getSelectedOptionValue(c.parent) === x.value
     ])}"
-				aria-selected="${(x, c) => column.getSelectedOptionValue(c.parent) === x.value}"
-				role="option"
-				@click="${(x, c) => onPickerOptionClick(c.parent, column, x.value)}"
-			>
-				${(x) => x.label}
-			</li>`
+					aria-selected="${(x, c) => column.getSelectedOptionValue(c.parent) === x.value}"
+					role="option"
+					@click="${(x, c) => onPickerOptionClick(c.parent, column, x.value)}"
+				>
+					${(x) => x.label}
+				</li>`
   )}
-	</ul>`;
+		</ul>
+	</div>`;
 };
 const InlineTimePickerTemplate = () => {
   return vividElement.html`<div
 		class="time-pickers"
 		@keydown="${(x, { event }) => onBaseKeyDown(x, event)}"
+		@focusout="${(x) => x._onFocusOut()}"
+		@pointerdown="${(x) => x._onPointerDown()}"
 	>
 		${renderPicker(HoursColumn)} ${renderPicker(MinutesColumn)}
 		${when.when(shouldDisplaySecondsPicker, renderPicker(SecondsColumn))}
@@ -320,6 +328,19 @@ class InlineTimePicker extends localized.Localized(vividElement.VividElement) {
     super(...arguments);
     this.minutesStep = 1;
     this.clock = "24h";
+    this.focusedPickerClass = "focused";
+    /**
+     * @internal
+     */
+    this._onFocusOut = () => {
+      this._clearFocusedClasses();
+    };
+    /**
+     * @internal
+     */
+    this._onPointerDown = () => {
+      this._clearFocusedClasses();
+    };
   }
   valueChanged(_, newValue) {
     if (newValue !== void 0 && !isValidTimeStr(newValue)) {
@@ -365,6 +386,34 @@ class InlineTimePicker extends localized.Localized(vividElement.VividElement) {
       ".picker"
     );
     firstFocusableElement.focus(options);
+    this._applyFocusedClass();
+  }
+  /**
+   * @internal
+   * Apply 'focused' class to the wrapper element of an active picker
+   */
+  _applyFocusedClass() {
+    const pickers = this.shadowRoot.querySelectorAll(".picker");
+    requestAnimationFrame(() => {
+      const active = this.shadowRoot.activeElement;
+      pickers.forEach((el) => {
+        if (el === active) {
+          el.parentElement?.classList.add(this.focusedPickerClass);
+        } else {
+          el.parentElement?.classList.remove(this.focusedPickerClass);
+        }
+      });
+    });
+  }
+  /**
+   * @internal
+   * Clear 'focused' classes from all pickers wrappers
+   */
+  _clearFocusedClasses() {
+    const pickers = this.shadowRoot.querySelectorAll(".picker");
+    pickers.forEach((el) => {
+      el.parentElement?.classList.remove(this.focusedPickerClass);
+    });
   }
 }
 __decorateClass$2([
@@ -386,7 +435,7 @@ __decorateClass$2([
   vividElement.observable
 ], InlineTimePicker.prototype, "max");
 
-const styles = ":host{display:inline-block}.time-pickers{display:flex;overflow:hidden;justify-content:center;padding:4px;block-size:calc(28px * var(--_inline-time-picker-num-options-visible) + 4px * (var(--_inline-time-picker-num-options-visible) - 1));gap:4px}.time-pickers .picker{position:relative;display:flex;overflow:hidden;flex-direction:column;padding:0;border-radius:4px;margin:0;gap:4px;inline-size:50px;list-style:none}.time-pickers .picker:hover{overflow-y:auto}.time-pickers .picker:after{display:block;flex-shrink:0;block-size:calc(28px * (var(--_inline-time-picker-num-options-visible) - 1) + 4px * (var(--_inline-time-picker-num-options-visible) - 1 - 1));content:\"\"}.time-pickers .picker:focus-visible{--focus-stroke-gap-color: transparent;--focus-inset: -2px;box-shadow:0 0 0 4px color-mix(in srgb,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 .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))}.time-pickers .option{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.time-pickers .option:where(.hover,: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:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.time-pickers .option:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.time-pickers .option:where(.selected):where(.hover,: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:where(.selected):where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.time-pickers .option{display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:28px;color:var(--_appearance-color-text);cursor:pointer;font:var(--vvd-typography-base);inline-size:50px}";
+const styles = ":host{display:inline-block}.time-pickers{display:flex;overflow:hidden;justify-content:center;padding:4px;block-size:calc(28px * var(--_inline-time-picker-num-options-visible) + 4px * (var(--_inline-time-picker-num-options-visible) - 1));gap:4px}.time-pickers .picker-wrapper{position:relative;display:flex;flex-direction:column;border-radius:4px}.time-pickers .picker-wrapper.focused{--focus-stroke-gap-color: transparent;--focus-inset: -2px;box-shadow:0 0 0 4px color-mix(in srgb,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{position:relative;display:flex;overflow:hidden scroll;flex-direction:column;padding:0 4px;border-radius:4px;margin:0 -4px;gap:4px;inline-size:50px;list-style:none;scrollbar-width:none}.time-pickers .picker:hover{scrollbar-width:auto}.time-pickers .picker:after{display:block;flex-shrink:0;block-size:calc(28px * (var(--_inline-time-picker-num-options-visible) - 1) + 4px * (var(--_inline-time-picker-num-options-visible) - 1 - 1));content:\"\"}.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))}.time-pickers .option{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.time-pickers .option:where(.hover,: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:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.time-pickers .option:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.time-pickers .option:where(.selected):where(.hover,: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:where(.selected):where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.time-pickers .option{display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:28px;color:var(--_appearance-color-text);cursor:pointer;font:var(--vvd-typography-base);inline-size:50px}.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(--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))}";
 
 const inlineTimePickerDefinition = vividElement.defineVividComponent(
   "inline-time-picker",

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

@@ -215,8 +215,10 @@ const shouldDisplay12hClock = (x) => x.clock === "12h";
 const onPickerOptionClick = (x, column, optionValue) => {
   emitChange(x, column.updatedValue(x, optionValue));
   scrollToOption(x, column.id, optionValue, "start");
-  const nextPickerEl = x.shadowRoot.querySelector(
-    `#${column.id} + .picker`
+  const currentPicker = x.shadowRoot.querySelector(`#${column.id}`)?.closest(".picker-wrapper");
+  const nextPickerWrapper = currentPicker?.nextElementSibling;
+  const nextPickerEl = nextPickerWrapper?.querySelector(
+    ".picker"
   );
   if (nextPickerEl) {
     nextPickerEl.focus();
@@ -241,6 +243,7 @@ const onPickerKeyDown = (x, column, event) => {
     const newValue = options[newIndex].value;
     emitChange(x, column.updatedValue(x, newValue));
     scrollToOption(x, column.id, newValue, "nearest");
+    x._clearFocusedClasses();
   }
   return true;
 };
@@ -260,6 +263,7 @@ const onBaseKeyDown = (x, event) => {
     if (x.shadowRoot.activeElement !== terminalElement) {
       ignoreEventInFocusTraps(event);
     }
+    x._applyFocusedClass();
   }
   return true;
 };
@@ -267,36 +271,40 @@ const emitChange = (x, time) => {
   x.$emit("change", time, { bubbles: false, composed: false });
 };
 const renderPicker = (column) => {
-  return html`<ul
-		id="${column.id}"
-		class="picker"
-		role="listbox"
-		tabindex="0"
-		aria-label="${column.getLabel}"
-		aria-activedescendant="${(x) => column.getSelectedOptionValue(x) ? `${column.id}-${column.getSelectedOptionValue(x)}` : void 0}"
-		@keydown="${(x, c) => onPickerKeyDown(x, column, c.event)}"
-	>
-		${repeat(
+  return html`<div class="picker-wrapper">
+		<ul
+			id="${column.id}"
+			class="picker"
+			role="listbox"
+			tabindex="0"
+			aria-label="${column.getLabel}"
+			aria-activedescendant="${(x) => column.getSelectedOptionValue(x) ? `${column.id}-${column.getSelectedOptionValue(x)}` : void 0}"
+			@keydown="${(x, c) => onPickerKeyDown(x, column, c.event)}"
+		>
+			${repeat(
     (x) => column.getOptions(x),
     html`<li
-				id="${(x) => `${column.id}-${x.value}`}"
-				class="${(x, c) => classNames("option", [
+					id="${(x) => `${column.id}-${x.value}`}"
+					class="${(x, c) => classNames("option", [
       "selected",
       column.getSelectedOptionValue(c.parent) === x.value
     ])}"
-				aria-selected="${(x, c) => column.getSelectedOptionValue(c.parent) === x.value}"
-				role="option"
-				@click="${(x, c) => onPickerOptionClick(c.parent, column, x.value)}"
-			>
-				${(x) => x.label}
-			</li>`
+					aria-selected="${(x, c) => column.getSelectedOptionValue(c.parent) === x.value}"
+					role="option"
+					@click="${(x, c) => onPickerOptionClick(c.parent, column, x.value)}"
+				>
+					${(x) => x.label}
+				</li>`
   )}
-	</ul>`;
+		</ul>
+	</div>`;
 };
 const InlineTimePickerTemplate = () => {
   return html`<div
 		class="time-pickers"
 		@keydown="${(x, { event }) => onBaseKeyDown(x, event)}"
+		@focusout="${(x) => x._onFocusOut()}"
+		@pointerdown="${(x) => x._onPointerDown()}"
 	>
 		${renderPicker(HoursColumn)} ${renderPicker(MinutesColumn)}
 		${when(shouldDisplaySecondsPicker, renderPicker(SecondsColumn))}
@@ -318,6 +326,19 @@ class InlineTimePicker extends Localized(VividElement) {
     super(...arguments);
     this.minutesStep = 1;
     this.clock = "24h";
+    this.focusedPickerClass = "focused";
+    /**
+     * @internal
+     */
+    this._onFocusOut = () => {
+      this._clearFocusedClasses();
+    };
+    /**
+     * @internal
+     */
+    this._onPointerDown = () => {
+      this._clearFocusedClasses();
+    };
   }
   valueChanged(_, newValue) {
     if (newValue !== void 0 && !isValidTimeStr(newValue)) {
@@ -363,6 +384,34 @@ class InlineTimePicker extends Localized(VividElement) {
       ".picker"
     );
     firstFocusableElement.focus(options);
+    this._applyFocusedClass();
+  }
+  /**
+   * @internal
+   * Apply 'focused' class to the wrapper element of an active picker
+   */
+  _applyFocusedClass() {
+    const pickers = this.shadowRoot.querySelectorAll(".picker");
+    requestAnimationFrame(() => {
+      const active = this.shadowRoot.activeElement;
+      pickers.forEach((el) => {
+        if (el === active) {
+          el.parentElement?.classList.add(this.focusedPickerClass);
+        } else {
+          el.parentElement?.classList.remove(this.focusedPickerClass);
+        }
+      });
+    });
+  }
+  /**
+   * @internal
+   * Clear 'focused' classes from all pickers wrappers
+   */
+  _clearFocusedClasses() {
+    const pickers = this.shadowRoot.querySelectorAll(".picker");
+    pickers.forEach((el) => {
+      el.parentElement?.classList.remove(this.focusedPickerClass);
+    });
   }
 }
 __decorateClass$2([
@@ -384,7 +433,7 @@ __decorateClass$2([
   observable
 ], InlineTimePicker.prototype, "max");
 
-const styles = ":host{display:inline-block}.time-pickers{display:flex;overflow:hidden;justify-content:center;padding:4px;block-size:calc(28px * var(--_inline-time-picker-num-options-visible) + 4px * (var(--_inline-time-picker-num-options-visible) - 1));gap:4px}.time-pickers .picker{position:relative;display:flex;overflow:hidden;flex-direction:column;padding:0;border-radius:4px;margin:0;gap:4px;inline-size:50px;list-style:none}.time-pickers .picker:hover{overflow-y:auto}.time-pickers .picker:after{display:block;flex-shrink:0;block-size:calc(28px * (var(--_inline-time-picker-num-options-visible) - 1) + 4px * (var(--_inline-time-picker-num-options-visible) - 1 - 1));content:\"\"}.time-pickers .picker:focus-visible{--focus-stroke-gap-color: transparent;--focus-inset: -2px;box-shadow:0 0 0 4px color-mix(in srgb,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 .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))}.time-pickers .option{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.time-pickers .option:where(.hover,: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:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.time-pickers .option:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.time-pickers .option:where(.selected):where(.hover,: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:where(.selected):where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.time-pickers .option{display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:28px;color:var(--_appearance-color-text);cursor:pointer;font:var(--vvd-typography-base);inline-size:50px}";
+const styles = ":host{display:inline-block}.time-pickers{display:flex;overflow:hidden;justify-content:center;padding:4px;block-size:calc(28px * var(--_inline-time-picker-num-options-visible) + 4px * (var(--_inline-time-picker-num-options-visible) - 1));gap:4px}.time-pickers .picker-wrapper{position:relative;display:flex;flex-direction:column;border-radius:4px}.time-pickers .picker-wrapper.focused{--focus-stroke-gap-color: transparent;--focus-inset: -2px;box-shadow:0 0 0 4px color-mix(in srgb,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{position:relative;display:flex;overflow:hidden scroll;flex-direction:column;padding:0 4px;border-radius:4px;margin:0 -4px;gap:4px;inline-size:50px;list-style:none;scrollbar-width:none}.time-pickers .picker:hover{scrollbar-width:auto}.time-pickers .picker:after{display:block;flex-shrink:0;block-size:calc(28px * (var(--_inline-time-picker-num-options-visible) - 1) + 4px * (var(--_inline-time-picker-num-options-visible) - 1 - 1));content:\"\"}.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))}.time-pickers .option{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.time-pickers .option:where(.hover,: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:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.time-pickers .option:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.time-pickers .option:where(.selected):where(.hover,: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:where(.selected):where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.time-pickers .option{display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:28px;color:var(--_appearance-color-text);cursor:pointer;font:var(--vvd-typography-base);inline-size:50px}.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(--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))}";
 
 const inlineTimePickerDefinition = defineVividComponent(
   "inline-time-picker",

package/shared/vivid-element.cjs

@@ -2734,7 +2734,7 @@ const ReplacedPropHandling = (Base) => {
 
 class VividElement extends AriaMixin(ReplacedPropHandling(FASTElement)) {
   static {
-    this.VIVID_VERSION = "4.26.0";
+    this.VIVID_VERSION = "4.28.0";
   }
   /**
    * Add data-vvd-component attribute with component name globally,

package/shared/vivid-element.js

@@ -2732,7 +2732,7 @@ const ReplacedPropHandling = (Base) => {
 
 class VividElement extends AriaMixin(ReplacedPropHandling(FASTElement)) {
   static {
-    this.VIVID_VERSION = "4.26.0";
+    this.VIVID_VERSION = "4.28.0";
   }
   /**
    * Add data-vvd-component attribute with component name globally,

package/styles/core/all.css

@@ -1,11 +1,11 @@
 /**
  * Do not edit directly
- * Generated on Wed, 18 Jun 2025 09:28:14 GMT
+ * Generated on Thu, 26 Jun 2025 11:10:05 GMT
  */
 .vvd-root {
-  color-scheme: var(--vvd-color-scheme);
   background-color: var(--vvd-color-canvas);
   color: var(--vvd-color-canvas-text);
+  color-scheme: var(--vvd-color-scheme);
 }
 
 .vvd-scrollbar {
@@ -74,16 +74,16 @@
 .vvd-root:root > body {
   font: var(--vvd-typography-base);
   font-feature-settings: "kern"; /* turns on kerning */
-  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */
   -webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */
   -moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */
+  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */
 }
 .vvd-root:not(:root) {
   font: var(--vvd-typography-base);
   font-feature-settings: "kern"; /* turns on kerning */
-  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */
   -webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */
   -moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */
+  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */
 }
 .vvd-root p,
 .vvd-root .font-base {
@@ -185,10 +185,10 @@
 }
 .vvd-root sub,
 .vvd-root sup {
+  position: relative;
   font: var(--vvd-typography-base-condensed);
   font-size: 75%;
   line-height: 0;
-  position: relative;
   vertical-align: baseline;
 }
 .vvd-root sub {

package/styles/core/theme.css

@@ -1,11 +1,11 @@
 /**
  * Do not edit directly
- * Generated on Wed, 18 Jun 2025 09:28:14 GMT
+ * Generated on Thu, 26 Jun 2025 11:10:05 GMT
  */
 .vvd-root {
-  color-scheme: var(--vvd-color-scheme);
   background-color: var(--vvd-color-canvas);
   color: var(--vvd-color-canvas-text);
+  color-scheme: var(--vvd-color-scheme);
 }
 
 .vvd-scrollbar {

package/styles/core/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 18 Jun 2025 09:28:14 GMT
+ * Generated on Thu, 26 Jun 2025 11:10:05 GMT
  */
 .vvd-root:root {
   --vvd-size-font-scale-base: 1rem;
@@ -9,16 +9,16 @@
 .vvd-root:root > body {
   font: var(--vvd-typography-base);
   font-feature-settings: "kern"; /* turns on kerning */
-  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */
   -webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */
   -moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */
+  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */
 }
 .vvd-root:not(:root) {
   font: var(--vvd-typography-base);
   font-feature-settings: "kern"; /* turns on kerning */
-  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */
   -webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */
   -moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */
+  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */
 }
 .vvd-root p,
 .vvd-root .font-base {
@@ -120,10 +120,10 @@
 }
 .vvd-root sub,
 .vvd-root sup {
+  position: relative;
   font: var(--vvd-typography-base-condensed);
   font-size: 75%;
   line-height: 0;
-  position: relative;
   vertical-align: baseline;
 }
 .vvd-root sub {

package/styles/fonts/spezia-variable.css

@@ -1,55 +1,55 @@
 @font-face {
+  font-display: block;
   font-family: SpeziaCompleteVariableUpright;
   font-stretch: 50% 200%;
   font-weight: 1 1000;
-  font-display: block;
   src: url("https://fonts.resources.vonage.com/fonts/v2/SpeziaCompleteVariableUprightWeb.woff2") format("woff2");
 }
 @font-face {
+  font-display: block;
   font-family: SpeziaMonoCompleteVariable;
   font-stretch: 50% 200%;
   font-weight: 1 1000;
-  font-display: block;
   src: url("https://fonts.resources.vonage.com/fonts/v2/SpeziaMonoCompleteVariableWeb.woff2") format("woff2");
 }
 .vvd-root {
   --vvd-typography-headline: 500 condensed
   	calc(var(--vvd-size-font-scale-base, 16px) * 4.125) / 1.3333333333333333
-  	SpeziaCompleteVariableUpright;
+  	speziacompletevariableupright;
   --vvd-typography-subtitle: 500 condensed
   	calc(var(--vvd-size-font-scale-base, 16px) * 3.25) / 1.3076923076923077
-  	SpeziaCompleteVariableUpright;
+  	speziacompletevariableupright;
   --vvd-typography-heading-1: 500 condensed
   	calc(var(--vvd-size-font-scale-base, 16px) * 2.5) / 1.3
-  	SpeziaCompleteVariableUpright;
+  	speziacompletevariableupright;
   --vvd-typography-heading-2: 500 condensed
   	calc(var(--vvd-size-font-scale-base, 16px) * 2) / 1.375
-  	SpeziaCompleteVariableUpright;
+  	speziacompletevariableupright;
   --vvd-typography-heading-3: 500 condensed
   	calc(var(--vvd-size-font-scale-base, 16px) * 1.625) / 1.3846153846153846
-  	SpeziaCompleteVariableUpright;
+  	speziacompletevariableupright;
   --vvd-typography-heading-4: 500 condensed
   	calc(var(--vvd-size-font-scale-base, 16px) * 1.25) / 1.4
-  	SpeziaCompleteVariableUpright;
+  	speziacompletevariableupright;
   --vvd-typography-base: 400 ultra-condensed
   	calc(var(--vvd-size-font-scale-base, 16px) * 0.875) / 1.4285714285714286
-  	SpeziaCompleteVariableUpright;
+  	speziacompletevariableupright;
   --vvd-typography-base-bold: 600 ultra-condensed
   	calc(var(--vvd-size-font-scale-base, 16px) * 0.875) / 1.4285714285714286
-  	SpeziaCompleteVariableUpright;
+  	speziacompletevariableupright;
   --vvd-typography-base-code: 400 ultra-condensed
   	calc(var(--vvd-size-font-scale-base, 16px) * 0.875) / 1.4285714285714286
-  	SpeziaMonoCompleteVariable;
+  	speziamonocompletevariable;
   --vvd-typography-base-condensed: 400 ultra-condensed
   	calc(var(--vvd-size-font-scale-base, 16px) * 0.75) / 1.3333333333333333
-  	SpeziaCompleteVariableUpright;
+  	speziacompletevariableupright;
   --vvd-typography-base-condensed-bold: 600 ultra-condensed
   	calc(var(--vvd-size-font-scale-base, 16px) * 0.75) / 1.3333333333333333
-  	SpeziaCompleteVariableUpright;
+  	speziacompletevariableupright;
   --vvd-typography-base-extended: 400 ultra-condensed
   	calc(var(--vvd-size-font-scale-base, 16px)) / 1.5
-  	SpeziaCompleteVariableUpright;
+  	speziacompletevariableupright;
   --vvd-typography-base-extended-bold: 600 ultra-condensed
   	calc(var(--vvd-size-font-scale-base, 16px)) / 1.5
-  	SpeziaCompleteVariableUpright;
+  	speziacompletevariableupright;
 }

package/styles/tokens/theme-dark.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Wed, 18 Jun 2025 09:28:14 GMT
+ * Generated on Thu, 26 Jun 2025 11:10:05 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 18 Jun 2025 09:28:14 GMT
+ * Generated on Thu, 26 Jun 2025 11:10:05 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 18 Jun 2025 09:28:14 GMT
+ * Generated on Thu, 26 Jun 2025 11:10:05 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 18 Jun 2025 09:28:14 GMT
+ * Generated on Thu, 26 Jun 2025 11:10:05 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/theme-light.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Wed, 18 Jun 2025 09:28:14 GMT
+ * Generated on Thu, 26 Jun 2025 11:10:05 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 18 Jun 2025 09:28:14 GMT
+ * Generated on Thu, 26 Jun 2025 11:10:05 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 18 Jun 2025 09:28:14 GMT
+ * Generated on Thu, 26 Jun 2025 11:10:05 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 18 Jun 2025 09:28:14 GMT
+ * Generated on Thu, 26 Jun 2025 11:10:05 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/vivid-2-compat.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 18 Jun 2025 09:28:14 GMT
+ * Generated on Thu, 26 Jun 2025 11:10:05 GMT
  */
 .vvd-root, ::part(vvd-root),
 .vvd-theme-alternate, ::part(vvd-theme-alternate) {