@vonage/vivid 4.29.0 → 4.30.1

package/shared/definition67.js

@@ -49,8 +49,9 @@ function getOppositeAxis(axis) {
 function getAxisLength(axis) {
   return axis === 'y' ? 'height' : 'width';
 }
+const yAxisSides = /*#__PURE__*/new Set(['top', 'bottom']);
 function getSideAxis(placement) {
-  return ['top', 'bottom'].includes(getSide(placement)) ? 'y' : 'x';
+  return yAxisSides.has(getSide(placement)) ? 'y' : 'x';
 }
 function getAlignmentAxis(placement) {
   return getOppositeAxis(getSideAxis(placement));
@@ -75,19 +76,19 @@ function getExpandedPlacements(placement) {
 function getOppositeAlignmentPlacement(placement) {
   return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
 }
+const lrPlacement = ['left', 'right'];
+const rlPlacement = ['right', 'left'];
+const tbPlacement = ['top', 'bottom'];
+const btPlacement = ['bottom', 'top'];
 function getSideList(side, isStart, rtl) {
-  const lr = ['left', 'right'];
-  const rl = ['right', 'left'];
-  const tb = ['top', 'bottom'];
-  const bt = ['bottom', 'top'];
   switch (side) {
     case 'top':
     case 'bottom':
-      if (rtl) return isStart ? rl : lr;
-      return isStart ? lr : rl;
+      if (rtl) return isStart ? rlPlacement : lrPlacement;
+      return isStart ? lrPlacement : rlPlacement;
     case 'left':
     case 'right':
-      return isStart ? tb : bt;
+      return isStart ? tbPlacement : btPlacement;
     default:
       return [];
   }
@@ -871,6 +872,8 @@ const inline$1 = function (options) {
   };
 };
 
+const originSides = /*#__PURE__*/new Set(['left', 'top']);
+
 // For type backwards-compatibility, the `OffsetOptions` type was also
 // Derivable.
 
@@ -884,7 +887,7 @@ async function convertValueToCoords(state, options) {
   const side = getSide(placement);
   const alignment = getAlignment(placement);
   const isVertical = getSideAxis(placement) === 'y';
-  const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
+  const mainAxisMulti = originSides.has(side) ? -1 : 1;
   const crossAxisMulti = rtl && isVertical ? -1 : 1;
   const rawValue = evaluate(options, state);
 
@@ -1083,6 +1086,7 @@ function isShadowRoot(value) {
   }
   return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
 }
+const invalidOverflowDisplayValues = /*#__PURE__*/new Set(['inline', 'contents']);
 function isOverflowElement(element) {
   const {
     overflow,
@@ -1090,27 +1094,32 @@ function isOverflowElement(element) {
     overflowY,
     display
   } = getComputedStyle(element);
-  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
+  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
 }
+const tableElements = /*#__PURE__*/new Set(['table', 'td', 'th']);
 function isTableElement(element) {
-  return ['table', 'td', 'th'].includes(getNodeName(element));
+  return tableElements.has(getNodeName(element));
 }
+const topLayerSelectors = [':popover-open', ':modal'];
 function isTopLayer(element) {
-  return [':popover-open', ':modal'].some(selector => {
+  return topLayerSelectors.some(selector => {
     try {
       return element.matches(selector);
-    } catch (e) {
+    } catch (_e) {
       return false;
     }
   });
 }
+const transformProperties = ['transform', 'translate', 'scale', 'rotate', 'perspective'];
+const willChangeValues = ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'];
+const containValues = ['paint', 'layout', 'strict', 'content'];
 function isContainingBlock(elementOrCss) {
   const webkit = isWebKit();
   const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
 
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
   // https://drafts.csswg.org/css-transforms-2/#individual-transforms
-  return ['transform', 'translate', 'scale', 'rotate', 'perspective'].some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
+  return transformProperties.some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || willChangeValues.some(value => (css.willChange || '').includes(value)) || containValues.some(value => (css.contain || '').includes(value));
 }
 function getContainingBlock(element) {
   let currentNode = getParentNode(element);
@@ -1128,8 +1137,9 @@ function isWebKit() {
   if (typeof CSS === 'undefined' || !CSS.supports) return false;
   return CSS.supports('-webkit-backdrop-filter', 'none');
 }
+const lastTraversableNodeNames = /*#__PURE__*/new Set(['html', 'body', '#document']);
 function isLastTraversableNode(node) {
-  return ['html', 'body', '#document'].includes(getNodeName(node));
+  return lastTraversableNodeNames.has(getNodeName(node));
 }
 function getComputedStyle(element) {
   return getWindow(element).getComputedStyle(element);
@@ -1434,6 +1444,7 @@ function getViewportRect(element, strategy) {
   };
 }
 
+const absoluteOrFixed = /*#__PURE__*/new Set(['absolute', 'fixed']);
 // Returns the inner client rect, subtracting scrollbars if present.
 function getInnerBoundingClientRect(element, strategy) {
   const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
@@ -1498,7 +1509,7 @@ function getClippingElementAncestors(element, cache) {
     if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
       currentContainingBlockComputedStyle = null;
     }
-    const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
+    const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && absoluteOrFixed.has(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
     if (shouldDropCurrentNode) {
       // Drop non-containing blocks.
       result = result.filter(ancestor => ancestor !== currentNode);

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

@@ -814,7 +814,7 @@ export declare const SingleDatePickerMixin: <T_6 extends AbstractConstructor<{
     _isInternalValueUpdate: boolean;
     valueChanged(previous: string, next: string): void;
     _updatePresentationValue(): void;
-    _updateValueDueToUserInteraction(newValue: string): void;
+    _updateValueDueToUserInteraction(newValue: string, isIntermediateUpdate: boolean): void;
     _onTextFieldChange(): void;
     _onTextFieldInput(event: Event): void;
     _isPresentationValueInvalid(): boolean;
@@ -2391,6 +2391,6 @@ export declare const SingleDatePickerMixin: <T_6 extends AbstractConstructor<{
     _toPresentationValue(value: string): string;
     _parsePresentationValue(presentationValue: string): string;
     _isInternalValueUpdate: boolean;
-    _updateValueDueToUserInteraction(newValue: string): void;
+    _updateValueDueToUserInteraction(newValue: string, isIntermediateUpdate: boolean): void;
     _isPresentationValueInvalid(): boolean;
 }) & T_6;

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

@@ -7,7 +7,7 @@ export declare const SingleValuePicker: <T extends AbstractConstructor<PickerFie
     _isInternalValueUpdate: boolean;
     valueChanged(previous: string, next: string): void;
     _updatePresentationValue(): void;
-    _updateValueDueToUserInteraction(newValue: string): void;
+    _updateValueDueToUserInteraction(newValue: string, isIntermediateUpdate: boolean): void;
     _onTextFieldChange(): void;
     _onTextFieldInput(event: Event): void;
     _isPresentationValueInvalid(): boolean;

package/shared/picker-field/mixins/time-selection-picker.d.ts

@@ -9,7 +9,7 @@ export declare const TimeSelectionPicker: <T_5 extends AbstractConstructor<{
     _isInternalValueUpdate: boolean;
     valueChanged(previous: string, next: string): void;
     _updatePresentationValue(): void;
-    _updateValueDueToUserInteraction(newValue: string): void;
+    _updateValueDueToUserInteraction(newValue: string, isIntermediateUpdate: boolean): void;
     _onTextFieldChange(): void;
     _onTextFieldInput(event: Event): void;
     _isPresentationValueInvalid(): boolean;
@@ -802,7 +802,7 @@ export declare const TimeSelectionPicker: <T_5 extends AbstractConstructor<{
     _isInternalValueUpdate: boolean;
     valueChanged: ((previous: string, next: string) => void) & ((_previous: string, _next: string) => void) & ((_previous: string, _next: string) => void);
     _updatePresentationValue: (() => void) & (() => void);
-    _updateValueDueToUserInteraction(newValue: string): void;
+    _updateValueDueToUserInteraction(newValue: string, isIntermediateUpdate: boolean): void;
     _onTextFieldChange: (() => void) & (() => void);
     _onTextFieldInput: ((event: Event) => void) & ((event: Event) => void);
     _isPresentationValueInvalid(): boolean;

package/shared/picker-field/mixins/time-selection-picker.template.d.ts

@@ -29,7 +29,7 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
     _isInternalValueUpdate: boolean;
     valueChanged: ((previous: string, next: string) => void) & ((_previous: string, _next: string) => void) & ((_previous: string, _next: string) => void);
     _updatePresentationValue: (() => void) & (() => void);
-    _updateValueDueToUserInteraction(newValue: string): void;
+    _updateValueDueToUserInteraction(newValue: string, isIntermediateUpdate: boolean): void;
     _onTextFieldChange: (() => void) & (() => void);
     _onTextFieldInput: ((event: Event) => void) & ((event: Event) => void);
     _isPresentationValueInvalid(): boolean;
@@ -797,7 +797,7 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
     _isInternalValueUpdate: boolean;
     valueChanged(previous: string, next: string): void;
     _updatePresentationValue(): void;
-    _updateValueDueToUserInteraction(newValue: string): void;
+    _updateValueDueToUserInteraction(newValue: string, isIntermediateUpdate: boolean): void;
     _onTextFieldChange(): void;
     _onTextFieldInput(event: Event): void;
     _isPresentationValueInvalid(): boolean;

package/shared/single-date-picker.cjs

@@ -15,7 +15,7 @@ const SingleDatePickerMixin = (Base) => {
      * @internal
      */
     _onDateClick(date) {
-      this._updateValueDueToUserInteraction(this._withUpdatedDate(date));
+      this._updateValueDueToUserInteraction(this._withUpdatedDate(date), false);
     }
     /**
      * @internal

package/shared/single-date-picker.js

@@ -13,7 +13,7 @@ const SingleDatePickerMixin = (Base) => {
      * @internal
      */
     _onDateClick(date) {
-      this._updateValueDueToUserInteraction(this._withUpdatedDate(date));
+      this._updateValueDueToUserInteraction(this._withUpdatedDate(date), false);
     }
     /**
      * @internal

package/shared/single-value-picker.cjs

@@ -37,27 +37,34 @@ const SingleValuePicker = (Base) => {
     /**
      * @internal
      */
-    _updateValueDueToUserInteraction(newValue) {
-      this.value = newValue;
-      this.$emit("change");
-      this.$emit("input");
+    _updateValueDueToUserInteraction(newValue, isIntermediateUpdate) {
+      if (this.value !== newValue) {
+        this._isInternalValueUpdate = true;
+        this.value = newValue;
+        this._isInternalValueUpdate = false;
+        this.$emit("input");
+      }
+      if (!isIntermediateUpdate) {
+        this._updatePresentationValue();
+        this.$emit("change");
+      }
     }
     /**
      * @internal
      */
     _onTextFieldChange() {
       if (this._presentationValue === "") {
-        this.value = "";
-        this.$emit("change");
+        this._updateValueDueToUserInteraction("", false);
         return;
       }
       try {
-        this.value = this._parsePresentationValue(this._presentationValue);
-        this.$emit("change");
+        this._updateValueDueToUserInteraction(
+          this._parsePresentationValue(this._presentationValue),
+          false
+        );
       } catch (_) {
         const invalidPresentationValue = this._presentationValue;
-        this.value = "";
-        this.$emit("change");
+        this._updateValueDueToUserInteraction("", false);
         this._presentationValue = invalidPresentationValue;
         return;
       }
@@ -67,24 +74,18 @@ const SingleValuePicker = (Base) => {
      */
     _onTextFieldInput(event) {
       super._onTextFieldInput(event);
-      this._isInternalValueUpdate = true;
       if (this._presentationValue === "") {
-        this.value = "";
-        this.$emit("input");
+        this._updateValueDueToUserInteraction("", true);
         return;
       }
       try {
-        const parsedValue = this._parsePresentationValue(
-          this._presentationValue
+        this._updateValueDueToUserInteraction(
+          this._parsePresentationValue(this._presentationValue),
+          true
         );
-        if (this.value !== parsedValue) {
-          this.value = parsedValue;
-          this.$emit("input");
-        }
       } catch (_) {
         return;
       }
-      this._isInternalValueUpdate = false;
     }
     /**
      * @internal
@@ -104,7 +105,7 @@ const SingleValuePicker = (Base) => {
      * @internal
      */
     _onClearClick() {
-      this._updateValueDueToUserInteraction("");
+      this._updateValueDueToUserInteraction("", false);
       super._onClearClick();
     }
   }

package/shared/single-value-picker.js

@@ -35,27 +35,34 @@ const SingleValuePicker = (Base) => {
     /**
      * @internal
      */
-    _updateValueDueToUserInteraction(newValue) {
-      this.value = newValue;
-      this.$emit("change");
-      this.$emit("input");
+    _updateValueDueToUserInteraction(newValue, isIntermediateUpdate) {
+      if (this.value !== newValue) {
+        this._isInternalValueUpdate = true;
+        this.value = newValue;
+        this._isInternalValueUpdate = false;
+        this.$emit("input");
+      }
+      if (!isIntermediateUpdate) {
+        this._updatePresentationValue();
+        this.$emit("change");
+      }
     }
     /**
      * @internal
      */
     _onTextFieldChange() {
       if (this._presentationValue === "") {
-        this.value = "";
-        this.$emit("change");
+        this._updateValueDueToUserInteraction("", false);
         return;
       }
       try {
-        this.value = this._parsePresentationValue(this._presentationValue);
-        this.$emit("change");
+        this._updateValueDueToUserInteraction(
+          this._parsePresentationValue(this._presentationValue),
+          false
+        );
       } catch (_) {
         const invalidPresentationValue = this._presentationValue;
-        this.value = "";
-        this.$emit("change");
+        this._updateValueDueToUserInteraction("", false);
         this._presentationValue = invalidPresentationValue;
         return;
       }
@@ -65,24 +72,18 @@ const SingleValuePicker = (Base) => {
      */
     _onTextFieldInput(event) {
       super._onTextFieldInput(event);
-      this._isInternalValueUpdate = true;
       if (this._presentationValue === "") {
-        this.value = "";
-        this.$emit("input");
+        this._updateValueDueToUserInteraction("", true);
         return;
       }
       try {
-        const parsedValue = this._parsePresentationValue(
-          this._presentationValue
+        this._updateValueDueToUserInteraction(
+          this._parsePresentationValue(this._presentationValue),
+          true
         );
-        if (this.value !== parsedValue) {
-          this.value = parsedValue;
-          this.$emit("input");
-        }
       } catch (_) {
         return;
       }
-      this._isInternalValueUpdate = false;
     }
     /**
      * @internal
@@ -102,7 +103,7 @@ const SingleValuePicker = (Base) => {
      * @internal
      */
     _onClearClick() {
-      this._updateValueDueToUserInteraction("");
+      this._updateValueDueToUserInteraction("", false);
       super._onClearClick();
     }
   }

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

@@ -435,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-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 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:has(.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 .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",
@@ -600,7 +600,8 @@ const TimeSelectionPicker = (Base) => {
      */
     _onInlineTimePickerChange(event) {
       this._updateValueDueToUserInteraction(
-        this._withUpdatedTime(event.detail)
+        this._withUpdatedTime(event.detail),
+        false
       );
     }
     /**
@@ -750,7 +751,7 @@ class TimePicker extends TimeSelectionPicker(
     super._onPickerButtonClick();
     if (this._popupOpen) {
       vividElement.DOM.processUpdates();
-      this._focusableElsWithinDialog()[0].focus();
+      this._focusableElsWithinDialog()[0]?.focus();
     }
   }
   // --- Dialog ---

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

@@ -433,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-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 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:has(.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 .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",
@@ -598,7 +598,8 @@ const TimeSelectionPicker = (Base) => {
      */
     _onInlineTimePickerChange(event) {
       this._updateValueDueToUserInteraction(
-        this._withUpdatedTime(event.detail)
+        this._withUpdatedTime(event.detail),
+        false
       );
     }
     /**
@@ -748,7 +749,7 @@ class TimePicker extends TimeSelectionPicker(
     super._onPickerButtonClick();
     if (this._popupOpen) {
       DOM.processUpdates();
-      this._focusableElsWithinDialog()[0].focus();
+      this._focusableElsWithinDialog()[0]?.focus();
     }
   }
   // --- Dialog ---

package/shared/vivid-element.cjs

@@ -2734,7 +2734,7 @@ const ReplacedPropHandling = (Base) => {
 
 class VividElement extends AriaMixin(ReplacedPropHandling(FASTElement)) {
   static {
-    this.VIVID_VERSION = "4.29.0";
+    this.VIVID_VERSION = "4.30.1";
   }
   /**
    * Add data-vvd-component attribute with component name globally,
@@ -2749,6 +2749,7 @@ class VividElement extends AriaMixin(ReplacedPropHandling(FASTElement)) {
 
 exports.AttachedBehaviorHTMLDirective = AttachedBehaviorHTMLDirective;
 exports.DOM = DOM;
+exports.ElementStyles = ElementStyles;
 exports.HTMLDirective = HTMLDirective;
 exports.HTMLView = HTMLView;
 exports.Observable = Observable;

package/shared/vivid-element.js

@@ -2732,7 +2732,7 @@ const ReplacedPropHandling = (Base) => {
 
 class VividElement extends AriaMixin(ReplacedPropHandling(FASTElement)) {
   static {
-    this.VIVID_VERSION = "4.29.0";
+    this.VIVID_VERSION = "4.30.1";
   }
   /**
    * Add data-vvd-component attribute with component name globally,
@@ -2745,4 +2745,4 @@ class VividElement extends AriaMixin(ReplacedPropHandling(FASTElement)) {
   }
 }
 
-export { AttachedBehaviorHTMLDirective as A, DOM as D, HTMLDirective as H, Observable as O, SubscriberSet as S, VividElement as V, attr as a, ariaAttributeName as b, ariaMixinProperties as c, createRegisterFunction as d, emptyArray as e, defineVividComponent as f, HTMLView as g, html as h, defaultExecutionContext as i, nullableNumberConverter as n, observable as o, replaces as r, subscribeToAriaPropertyChanges as s, unsubscribeFromAriaPropertyChanges as u, volatile as v };
+export { AttachedBehaviorHTMLDirective as A, DOM as D, ElementStyles as E, HTMLDirective as H, Observable as O, SubscriberSet as S, VividElement as V, attr as a, ariaAttributeName as b, ariaMixinProperties as c, createRegisterFunction as d, emptyArray as e, defineVividComponent as f, HTMLView as g, html as h, defaultExecutionContext as i, nullableNumberConverter as n, observable as o, replaces as r, subscribeToAriaPropertyChanges as s, unsubscribeFromAriaPropertyChanges as u, volatile as v };

package/styles/core/all.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 25 Jul 2025 10:55:57 GMT
+ * Generated on Thu, 14 Aug 2025 08:21:43 GMT
  */
 .vvd-root {
   background-color: var(--vvd-color-canvas);

package/styles/core/theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 25 Jul 2025 10:55:57 GMT
+ * Generated on Thu, 14 Aug 2025 08:21:43 GMT
  */
 .vvd-root {
   background-color: var(--vvd-color-canvas);

package/styles/core/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 25 Jul 2025 10:55:57 GMT
+ * Generated on Thu, 14 Aug 2025 08:21:43 GMT
  */
 .vvd-root:root {
   --vvd-size-font-scale-base: 1rem;

package/styles/tokens/theme-dark.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Fri, 25 Jul 2025 10:55:57 GMT
+ * Generated on Thu, 14 Aug 2025 08:21:43 GMT
  */
 /**
  * Do not edit directly
- * Generated on Fri, 25 Jul 2025 10:55:57 GMT
+ * Generated on Thu, 14 Aug 2025 08:21:43 GMT
  */
 /**
  * Do not edit directly
- * Generated on Fri, 25 Jul 2025 10:55:57 GMT
+ * Generated on Thu, 14 Aug 2025 08:21:43 GMT
  */
 /**
  * Do not edit directly
- * Generated on Fri, 25 Jul 2025 10:55:57 GMT
+ * Generated on Thu, 14 Aug 2025 08:21:43 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/theme-light.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Fri, 25 Jul 2025 10:55:57 GMT
+ * Generated on Thu, 14 Aug 2025 08:21:43 GMT
  */
 /**
  * Do not edit directly
- * Generated on Fri, 25 Jul 2025 10:55:57 GMT
+ * Generated on Thu, 14 Aug 2025 08:21:43 GMT
  */
 /**
  * Do not edit directly
- * Generated on Fri, 25 Jul 2025 10:55:57 GMT
+ * Generated on Thu, 14 Aug 2025 08:21:43 GMT
  */
 /**
  * Do not edit directly
- * Generated on Fri, 25 Jul 2025 10:55:57 GMT
+ * Generated on Thu, 14 Aug 2025 08:21:43 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 25 Jul 2025 10:55:57 GMT
+ * Generated on Thu, 14 Aug 2025 08:21:43 GMT
  */
 .vvd-root, ::part(vvd-root),
 .vvd-theme-alternate, ::part(vvd-theme-alternate) {