@vonage/vivid 5.4.0 → 5.6.0

package/unbundled/base-color-picker.js

@@ -64,14 +64,22 @@ const BaseColorPicker = (Base) => {
       this.proxy = document.createElement("input");
       this.open = false;
       this.swatches = [];
-      /**
-       * @internal
-       */
       this._canvasColor = "";
     }
     connectedCallback() {
       super.connectedCallback();
-      this._refreshCanvasColor();
+      requestAnimationFrame(() => {
+        this._refreshCanvasColor();
+      });
+    }
+    /**
+     * @internal
+     */
+    get _computedCanvasColor() {
+      if (!this._canvasColor) {
+        this._canvasColor = getCSSCustomProperty("--vvd-color-canvas", this);
+      }
+      return this._canvasColor;
     }
     /**
      * @internal
@@ -83,8 +91,10 @@ const BaseColorPicker = (Base) => {
      * @internal
      */
     _applyContrastClass(color, threshold = 3) {
-      if (!color || !this._canvasColor) return false;
-      const ratio = getContrastRatio(color, this._canvasColor);
+      if (!color) return false;
+      const canvasColor = this._computedCanvasColor;
+      if (!canvasColor) return false;
+      const ratio = getContrastRatio(color, canvasColor);
       return ratio < threshold;
     }
     /**
@@ -107,7 +117,8 @@ const BaseColorPicker = (Base) => {
     }
     /**
      * @internal
-     */
+     * /
+    /* v8 ignore next -- @preserve */
     _handleColorSaving() {
     }
     /**
@@ -145,21 +156,25 @@ const BaseColorPicker = (Base) => {
       const currentCol = index % rowLength;
       const totalRows = Math.ceil(totalCells / rowLength);
       switch (event.key) {
-        case "ArrowRight":
+        case "ArrowRight": {
+          /* v8 ignore else -- @preserve */
           if (currentCol < rowLength - 1 && index + 1 < totalCells) {
             this._focusSwatchByIndex(index + 1);
           }
           return false;
+        }
         case "ArrowLeft":
           if (currentCol > 0) {
             this._focusSwatchByIndex(index - 1);
           }
           return false;
-        case "ArrowDown":
+        case "ArrowDown": {
+          /* v8 ignore else -- @preserve */
           if (currentRow < totalRows - 1 && index + rowLength < totalCells) {
             this._focusSwatchByIndex(index + rowLength);
           }
           return false;
+        }
         case "ArrowUp":
           if (currentRow > 0) {
             this._focusSwatchByIndex(index - rowLength);
@@ -171,6 +186,7 @@ const BaseColorPicker = (Base) => {
             lastRowStart + currentCol,
             totalCells - 1
           );
+          /* v8 ignore else -- @preserve */
           if (index !== targetIndex) {
             this._focusSwatchByIndex(targetIndex);
           }
@@ -233,33 +249,38 @@ const BaseColorPicker = (Base) => {
     /**
      * @internal
      */
-    _renderColorSwatch(iconTag) {
+    _renderColorSwatch(iconTag, tooltipTag) {
       return html`
-				<button
-					class="swatch ${(x, c) => classNames(
+				<${tooltipTag} placement="top" 
+					text="${(x) => x.label ?? x.value}" 
+					exportparts="vvd-theme-alternate">
+					<button
+						slot="anchor"
+						class="swatch ${(x, c) => classNames(
         c.parent.value === x.value ? "selected" : "",
         c.parent._applyContrastClass(x.value) ? "contrast" : ""
       )}"
-					role="gridcell"
-					style="--swatch-color: ${(x) => x.value};"
-					tabindex="${(x, c) => c.index === 0 ? "0" : "-1"}"
-					aria-label="${(x, c) => c.parent.locale.baseColorPicker.colorSwatchLabel(
+						role="gridcell"
+						style="--swatch-color: ${(x) => x.value};"
+						tabindex="${(x, c) => c.index === 0 ? "0" : "-1"}"
+						aria-label="${(x, c) => c.parent.locale.baseColorPicker.colorSwatchLabel(
         x.value,
         x.label,
         c.parent.value === x.value
       )}"
-					@click="${(x, c) => c.parent._handleSwatchSelection(x.value)}"
-					@keydown="${(x, c) => c.parent._handleCellKeydown(
+						@click="${(x, c) => c.parent._handleSwatchSelection(x.value)}"
+						@keydown="${(x, c) => c.parent._handleCellKeydown(
         c.event,
         x.value,
         c.index
       )}"
-				>
-					${when(
+					>
+						${when(
         (x, c) => c.parent.value === x.value,
         html`<${iconTag} size="-6" name="check-solid" aria-hidden="true"></${iconTag}>`
       )}
-				</button>
+					</button>
+				</${tooltipTag}>
 			`;
     }
   }
@@ -269,6 +290,9 @@ const BaseColorPicker = (Base) => {
   __decorateClass([
     observable
   ], BaseColorPickerElement.prototype, "swatches");
+  __decorateClass([
+    observable
+  ], BaseColorPickerElement.prototype, "_canvasColor");
   return BaseColorPickerElement;
 };
 

package/unbundled/base-progress.cjs

@@ -21,6 +21,7 @@ class BaseProgress extends vividElement.VividElement {
    * @internal
    */
   valueChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.$fastController.isConnected) {
       this.updatePercentComplete();
     }
@@ -29,6 +30,7 @@ class BaseProgress extends vividElement.VividElement {
    * @internal
    */
   minChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.$fastController.isConnected) {
       this.updatePercentComplete();
     }
@@ -37,6 +39,7 @@ class BaseProgress extends vividElement.VividElement {
    * @private
    */
   maxChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.$fastController.isConnected) {
       this.updatePercentComplete();
     }

package/unbundled/base-progress.js

@@ -19,6 +19,7 @@ class BaseProgress extends VividElement {
    * @internal
    */
   valueChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.$fastController.isConnected) {
       this.updatePercentComplete();
     }
@@ -27,6 +28,7 @@ class BaseProgress extends VividElement {
    * @internal
    */
   minChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.$fastController.isConnected) {
       this.updatePercentComplete();
     }
@@ -35,6 +37,7 @@ class BaseProgress extends VividElement {
    * @private
    */
   maxChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.$fastController.isConnected) {
       this.updatePercentComplete();
     }

package/unbundled/button.cjs

@@ -28,6 +28,7 @@ class VividFoundationButton extends delegatesAria.DelegatesAria(
      * @internal
      */
     this.handleClick = (e) => {
+      /* v8 ignore else -- @preserve */
       if (this.disabled) {
         e.stopPropagation();
       }
@@ -55,6 +56,7 @@ class VividFoundationButton extends delegatesAria.DelegatesAria(
      * Relevant PR on the Firefox browser: https://phabricator.services.mozilla.com/D123858
      */
     this.handleUnsupportedDelegatesFocus = () => {
+      /* v8 ignore else -- @preserve */
       if (this.$fastController.definition.shadowOptions) {
         if (window.ShadowRoot && /* eslint-disable-next-line */
         !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") && this.$fastController.definition.shadowOptions.delegatesFocus) {
@@ -70,36 +72,42 @@ class VividFoundationButton extends delegatesAria.DelegatesAria(
   }
   // @ts-expect-error Function is delcared but not used
   formactionChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.formAction = this.formaction;
     }
   }
   // @ts-expect-error Function is delcared but not used
   formenctypeChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.formEnctype = this.formenctype;
     }
   }
   // @ts-expect-error Function is delcared but not used
   formmethodChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.formMethod = this.formmethod;
     }
   }
   // @ts-expect-error Function is delcared but not used
   formnovalidateChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.formNoValidate = this.formnovalidate;
     }
   }
   // @ts-expect-error Function is delcared but not used
   formtargetChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.formTarget = this.formtarget;
     }
   }
   // @ts-expect-error Function is delcared but not used
   typeChanged(previous, next) {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.type = this.type;
     }
@@ -125,11 +133,9 @@ class VividFoundationButton extends delegatesAria.DelegatesAria(
       });
     }
     const elements = Array.from(this.control.children);
-    if (elements) {
-      elements.forEach((span) => {
-        span.addEventListener("click", this.handleClick);
-      });
-    }
+    elements.forEach((span) => {
+      span.addEventListener("click", this.handleClick);
+    });
   }
   /**
    * @internal
@@ -137,11 +143,9 @@ class VividFoundationButton extends delegatesAria.DelegatesAria(
   disconnectedCallback() {
     super.disconnectedCallback();
     const elements = Array.from(this.control.children);
-    if (elements) {
-      elements.forEach((span) => {
-        span.removeEventListener("click", this.handleClick);
-      });
-    }
+    elements.forEach((span) => {
+      span.removeEventListener("click", this.handleClick);
+    });
   }
 }
 __decorateClass([

package/unbundled/button.js

@@ -26,6 +26,7 @@ class VividFoundationButton extends DelegatesAria(
      * @internal
      */
     this.handleClick = (e) => {
+      /* v8 ignore else -- @preserve */
       if (this.disabled) {
         e.stopPropagation();
       }
@@ -53,6 +54,7 @@ class VividFoundationButton extends DelegatesAria(
      * Relevant PR on the Firefox browser: https://phabricator.services.mozilla.com/D123858
      */
     this.handleUnsupportedDelegatesFocus = () => {
+      /* v8 ignore else -- @preserve */
       if (this.$fastController.definition.shadowOptions) {
         if (window.ShadowRoot && /* eslint-disable-next-line */
         !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") && this.$fastController.definition.shadowOptions.delegatesFocus) {
@@ -68,36 +70,42 @@ class VividFoundationButton extends DelegatesAria(
   }
   // @ts-expect-error Function is delcared but not used
   formactionChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.formAction = this.formaction;
     }
   }
   // @ts-expect-error Function is delcared but not used
   formenctypeChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.formEnctype = this.formenctype;
     }
   }
   // @ts-expect-error Function is delcared but not used
   formmethodChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.formMethod = this.formmethod;
     }
   }
   // @ts-expect-error Function is delcared but not used
   formnovalidateChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.formNoValidate = this.formnovalidate;
     }
   }
   // @ts-expect-error Function is delcared but not used
   formtargetChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.formTarget = this.formtarget;
     }
   }
   // @ts-expect-error Function is delcared but not used
   typeChanged(previous, next) {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.type = this.type;
     }
@@ -123,11 +131,9 @@ class VividFoundationButton extends DelegatesAria(
       });
     }
     const elements = Array.from(this.control.children);
-    if (elements) {
-      elements.forEach((span) => {
-        span.addEventListener("click", this.handleClick);
-      });
-    }
+    elements.forEach((span) => {
+      span.addEventListener("click", this.handleClick);
+    });
   }
   /**
    * @internal
@@ -135,11 +141,9 @@ class VividFoundationButton extends DelegatesAria(
   disconnectedCallback() {
     super.disconnectedCallback();
     const elements = Array.from(this.control.children);
-    if (elements) {
-      elements.forEach((span) => {
-        span.removeEventListener("click", this.handleClick);
-      });
-    }
+    elements.forEach((span) => {
+      span.removeEventListener("click", this.handleClick);
+    });
   }
 }
 __decorateClass([

package/unbundled/calendar-picker.template.cjs

@@ -7,7 +7,7 @@ const divider = require('./divider.cjs');
 const button_definition = require('./definition.cjs');
 const visuallyHidden_definition = require('../visually-hidden/definition.cjs');
 
-const calendarStyles = ".segments{display:inline-flex;gap:24px}.segment{display:flex;flex-direction:column;gap:12px}.segment .header{display:flex;align-items:center;padding-block:8px}.segment .title{display:flex;flex-grow:1;justify-content:center}.segment .title-action{border-radius:8px;block-size:24px;font:var(--vvd-typography-base-extended);padding-inline:8px}.calendar{display:flex;flex-direction:column;margin-top:8px;gap:4px}.calendar .calendar-separator{margin-inline:10px}.calendar .calendar-weekdays{display:flex;justify-content:center}.calendar .calendar-weekday{display:inline-flex;align-items:center;justify-content:center;block-size:16px;font:var(--vvd-typography-base-condensed);inline-size:40px}.calendar .calendar-week{display:flex;justify-content:center}.calendar .calendar-day{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:28px;font:var(--vvd-typography-base);margin-inline:6px}.calendar .calendar-day.start,.calendar .calendar-day.end{border:2px solid var(--vvd-color-cta-50);background-color:var(--vvd-color-cta-200)}.calendar:focus-visible .calendar .calendar-day.start,.calendar:focus-visible .calendar .calendar-day.end{border-width:3px}.calendar .calendar-day:before,.calendar .calendar-day:after{position:absolute;z-index:-1;display:block;width:20px;height:28px}.calendar .calendar-day:before{right:50%}.calendar .calendar-day:after{left:50%}.calendar .calendar-day.range:before,.calendar .calendar-day.range:after{background-color:var(--vvd-color-cta-50)}.calendar .calendar-day.range:not(.start):before,.calendar .calendar-day.range:not(.end):after{content:\"\"}.calendar .calendar-day.outside-month,.calendar .calendar-day:disabled{color:var(--vvd-color-neutral-400)}.months-separator{margin-inline:-12px}.month-grid{display:flex;flex-direction:column;gap:34px}.month-grid .months-row{display:flex;justify-content:center;gap:29px}.month-grid .month{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:48px;font:var(--vvd-typography-base-extended);text-transform:uppercase}.month-grid .month:disabled{color:var(--vvd-color-neutral-400)}.button{--_connotation-color-primary: var(--vvd-date-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-date-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-date-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-date-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-date-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-date-picker-accent-pale, var(--vvd-color-neutral-300))}.button{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.button:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.button.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.button:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button.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){.button.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}}.button.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}.button.selected:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.button.selected.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.button{position:relative;padding:0;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer}.button:disabled{cursor:not-allowed}.button:focus:not(.title-action),.button.title-action:focus-visible{--focus-stroke-gap-color: transparent;color:var(--vvd-color-canvas-text);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))}.button:focus:not(.title-action).start,.button:focus:not(.title-action).end,.button.title-action:focus-visible.start,.button.title-action:focus-visible.end{border-width:3px}.button.current{border:1px solid var(--vvd-color-neutral-200)}.button.selected{border:1px solid var(--vvd-color-neutral-900)}";
+const calendarStyles = ".segments{gap:24px}@media (width >= 648px){.segments{display:inline-flex}}.segment{display:flex;flex-direction:column;gap:12px}.segment .header{display:flex;align-items:center;padding-block:8px}.segment .title{display:flex;flex-grow:1;justify-content:center}.segment .title-action{border-radius:8px;block-size:24px;font:var(--vvd-typography-base-extended);padding-inline:8px}.calendar{display:flex;flex-direction:column;margin-top:8px;gap:4px}.calendar .calendar-separator{margin-inline:10px}.calendar .calendar-weekdays{display:flex;justify-content:center}.calendar .calendar-weekday{display:inline-flex;align-items:center;justify-content:center;block-size:16px;font:var(--vvd-typography-base-condensed);inline-size:40px}.calendar .calendar-week{display:flex;justify-content:center}.calendar .calendar-day{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:28px;font:var(--vvd-typography-base);margin-inline:6px}.calendar .calendar-day.start,.calendar .calendar-day.end{border:2px solid var(--vvd-color-cta-50);background-color:var(--vvd-color-cta-200)}.calendar:focus-visible .calendar .calendar-day.start,.calendar:focus-visible .calendar .calendar-day.end{border-width:3px}.calendar .calendar-day:before,.calendar .calendar-day:after{position:absolute;z-index:-1;display:block;width:20px;height:28px}.calendar .calendar-day:before{right:50%}.calendar .calendar-day:after{left:50%}.calendar .calendar-day.range:before,.calendar .calendar-day.range:after{background-color:var(--vvd-color-cta-50)}.calendar .calendar-day.range:not(.start):before,.calendar .calendar-day.range:not(.end):after{content:\"\"}.calendar .calendar-day.outside-month,.calendar .calendar-day:disabled{color:var(--vvd-color-neutral-400)}.months-separator{margin-inline:-12px}.month-grid{display:flex;flex-direction:column;gap:34px}.month-grid .months-row{display:flex;justify-content:center;gap:29px}.month-grid .month{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:48px;font:var(--vvd-typography-base-extended);text-transform:uppercase}.month-grid .month:disabled{color:var(--vvd-color-neutral-400)}.button{--_connotation-color-primary: var(--vvd-date-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-date-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-date-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-date-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-date-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-date-picker-accent-pale, var(--vvd-color-neutral-300))}.button{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.button:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.button.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.button:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button.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){.button.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}}.button.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}.button.selected:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.button.selected.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.button{position:relative;padding:0;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer}.button:disabled{cursor:not-allowed}.button:focus:not(.title-action),.button.title-action:focus-visible{--focus-stroke-gap-color: transparent;color:var(--vvd-color-canvas-text);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))}.button:focus:not(.title-action).start,.button:focus:not(.title-action).end,.button.title-action:focus-visible.start,.button.title-action:focus-visible.end{border-width:3px}.button.current{border:1px solid var(--vvd-color-neutral-200)}.button.selected{border:1px solid var(--vvd-color-neutral-900)}";
 
 const formatDateStr = (date) => dateFns.formatISO(date, { representation: "date" });
 const currentDateStr = (now = /* @__PURE__ */ new Date()) => formatDateStr(now);
@@ -554,6 +554,7 @@ const MinMaxCalendarPicker = (SuperClass) => {
      * @internal
      */
     minChanged(_, newMin) {
+      /* v8 ignore if -- @preserve */
       if (this.proxy instanceof HTMLInputElement) {
         this.proxy.min = newMin;
         this.validate();
@@ -569,6 +570,7 @@ const MinMaxCalendarPicker = (SuperClass) => {
      * @internal
      */
     maxChanged(_, newMax) {
+      /* v8 ignore if -- @preserve */
       if (this.proxy instanceof HTMLInputElement) {
         this.proxy.max = newMax;
         this.validate();

package/unbundled/calendar-picker.template.js

@@ -5,7 +5,7 @@ import { D as Divider } from './divider.js';
 import { B as Button } from './definition.js';
 import { VwcVisuallyHiddenElement as VisuallyHidden } from '../visually-hidden/definition.js';
 
-const calendarStyles = ".segments{display:inline-flex;gap:24px}.segment{display:flex;flex-direction:column;gap:12px}.segment .header{display:flex;align-items:center;padding-block:8px}.segment .title{display:flex;flex-grow:1;justify-content:center}.segment .title-action{border-radius:8px;block-size:24px;font:var(--vvd-typography-base-extended);padding-inline:8px}.calendar{display:flex;flex-direction:column;margin-top:8px;gap:4px}.calendar .calendar-separator{margin-inline:10px}.calendar .calendar-weekdays{display:flex;justify-content:center}.calendar .calendar-weekday{display:inline-flex;align-items:center;justify-content:center;block-size:16px;font:var(--vvd-typography-base-condensed);inline-size:40px}.calendar .calendar-week{display:flex;justify-content:center}.calendar .calendar-day{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:28px;font:var(--vvd-typography-base);margin-inline:6px}.calendar .calendar-day.start,.calendar .calendar-day.end{border:2px solid var(--vvd-color-cta-50);background-color:var(--vvd-color-cta-200)}.calendar:focus-visible .calendar .calendar-day.start,.calendar:focus-visible .calendar .calendar-day.end{border-width:3px}.calendar .calendar-day:before,.calendar .calendar-day:after{position:absolute;z-index:-1;display:block;width:20px;height:28px}.calendar .calendar-day:before{right:50%}.calendar .calendar-day:after{left:50%}.calendar .calendar-day.range:before,.calendar .calendar-day.range:after{background-color:var(--vvd-color-cta-50)}.calendar .calendar-day.range:not(.start):before,.calendar .calendar-day.range:not(.end):after{content:\"\"}.calendar .calendar-day.outside-month,.calendar .calendar-day:disabled{color:var(--vvd-color-neutral-400)}.months-separator{margin-inline:-12px}.month-grid{display:flex;flex-direction:column;gap:34px}.month-grid .months-row{display:flex;justify-content:center;gap:29px}.month-grid .month{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:48px;font:var(--vvd-typography-base-extended);text-transform:uppercase}.month-grid .month:disabled{color:var(--vvd-color-neutral-400)}.button{--_connotation-color-primary: var(--vvd-date-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-date-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-date-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-date-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-date-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-date-picker-accent-pale, var(--vvd-color-neutral-300))}.button{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.button:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.button.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.button:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button.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){.button.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}}.button.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}.button.selected:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.button.selected.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.button{position:relative;padding:0;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer}.button:disabled{cursor:not-allowed}.button:focus:not(.title-action),.button.title-action:focus-visible{--focus-stroke-gap-color: transparent;color:var(--vvd-color-canvas-text);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))}.button:focus:not(.title-action).start,.button:focus:not(.title-action).end,.button.title-action:focus-visible.start,.button.title-action:focus-visible.end{border-width:3px}.button.current{border:1px solid var(--vvd-color-neutral-200)}.button.selected{border:1px solid var(--vvd-color-neutral-900)}";
+const calendarStyles = ".segments{gap:24px}@media (width >= 648px){.segments{display:inline-flex}}.segment{display:flex;flex-direction:column;gap:12px}.segment .header{display:flex;align-items:center;padding-block:8px}.segment .title{display:flex;flex-grow:1;justify-content:center}.segment .title-action{border-radius:8px;block-size:24px;font:var(--vvd-typography-base-extended);padding-inline:8px}.calendar{display:flex;flex-direction:column;margin-top:8px;gap:4px}.calendar .calendar-separator{margin-inline:10px}.calendar .calendar-weekdays{display:flex;justify-content:center}.calendar .calendar-weekday{display:inline-flex;align-items:center;justify-content:center;block-size:16px;font:var(--vvd-typography-base-condensed);inline-size:40px}.calendar .calendar-week{display:flex;justify-content:center}.calendar .calendar-day{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:28px;font:var(--vvd-typography-base);margin-inline:6px}.calendar .calendar-day.start,.calendar .calendar-day.end{border:2px solid var(--vvd-color-cta-50);background-color:var(--vvd-color-cta-200)}.calendar:focus-visible .calendar .calendar-day.start,.calendar:focus-visible .calendar .calendar-day.end{border-width:3px}.calendar .calendar-day:before,.calendar .calendar-day:after{position:absolute;z-index:-1;display:block;width:20px;height:28px}.calendar .calendar-day:before{right:50%}.calendar .calendar-day:after{left:50%}.calendar .calendar-day.range:before,.calendar .calendar-day.range:after{background-color:var(--vvd-color-cta-50)}.calendar .calendar-day.range:not(.start):before,.calendar .calendar-day.range:not(.end):after{content:\"\"}.calendar .calendar-day.outside-month,.calendar .calendar-day:disabled{color:var(--vvd-color-neutral-400)}.months-separator{margin-inline:-12px}.month-grid{display:flex;flex-direction:column;gap:34px}.month-grid .months-row{display:flex;justify-content:center;gap:29px}.month-grid .month{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:48px;font:var(--vvd-typography-base-extended);text-transform:uppercase}.month-grid .month:disabled{color:var(--vvd-color-neutral-400)}.button{--_connotation-color-primary: var(--vvd-date-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-date-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-date-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-date-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-date-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-date-picker-accent-pale, var(--vvd-color-neutral-300))}.button{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.button:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.button.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.button:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button.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){.button.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}}.button.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}.button.selected:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.button.selected.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.button{position:relative;padding:0;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer}.button:disabled{cursor:not-allowed}.button:focus:not(.title-action),.button.title-action:focus-visible{--focus-stroke-gap-color: transparent;color:var(--vvd-color-canvas-text);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))}.button:focus:not(.title-action).start,.button:focus:not(.title-action).end,.button.title-action:focus-visible.start,.button.title-action:focus-visible.end{border-width:3px}.button.current{border:1px solid var(--vvd-color-neutral-200)}.button.selected{border:1px solid var(--vvd-color-neutral-900)}";
 
 const formatDateStr = (date) => formatISO(date, { representation: "date" });
 const currentDateStr = (now = /* @__PURE__ */ new Date()) => formatDateStr(now);
@@ -552,6 +552,7 @@ const MinMaxCalendarPicker = (SuperClass) => {
      * @internal
      */
     minChanged(_, newMin) {
+      /* v8 ignore if -- @preserve */
       if (this.proxy instanceof HTMLInputElement) {
         this.proxy.min = newMin;
         this.validate();
@@ -567,6 +568,7 @@ const MinMaxCalendarPicker = (SuperClass) => {
      * @internal
      */
     maxChanged(_, newMax) {
+      /* v8 ignore if -- @preserve */
       if (this.proxy instanceof HTMLInputElement) {
         this.proxy.max = newMax;
         this.validate();

package/unbundled/definition.cjs

@@ -37,6 +37,7 @@ class Button extends affix.AffixIconWithTrailing(
    * Prevents interaction when disabled or pending.
    */
   clickHandler(event) {
+    /* v8 ignore else -- @preserve */
     if (this.disabled || this.pending) {
       event.preventDefault();
       event.stopImmediatePropagation();

package/unbundled/definition.js

@@ -35,6 +35,7 @@ class Button extends AffixIconWithTrailing(
    * Prevents interaction when disabled or pending.
    */
   clickHandler(event) {
+    /* v8 ignore else -- @preserve */
     if (this.disabled || this.pending) {
       event.preventDefault();
       event.stopImmediatePropagation();

package/unbundled/definition2.cjs

@@ -107,12 +107,14 @@ class MenuItem extends hostSemantics.HostSemantics(affix.AffixIcon(vividElement.
             this.#emitSyntheticClick();
           }
           return false;
-        case keyCodes.keyArrowRight:
+        case keyCodes.keyArrowRight: {
+          /* v8 ignore else -- @preserve */
           if (this.submenu) {
             this.expanded = true;
             this.#emitSyntheticClick();
           }
           return false;
+        }
         case keyCodes.keyArrowLeft:
           if (this.expanded) {
             this.#emitSyntheticClick();
@@ -130,6 +132,7 @@ class MenuItem extends hostSemantics.HostSemantics(affix.AffixIcon(vividElement.
    * @internal
    */
   expandedChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.$fastController.isConnected) {
       if (this.submenu && !this.expanded) {
         this.submenu.collapseExpandedItem();

package/unbundled/definition2.js

@@ -105,12 +105,14 @@ class MenuItem extends HostSemantics(AffixIcon(VividElement)) {
             this.#emitSyntheticClick();
           }
           return false;
-        case keyArrowRight:
+        case keyArrowRight: {
+          /* v8 ignore else -- @preserve */
           if (this.submenu) {
             this.expanded = true;
             this.#emitSyntheticClick();
           }
           return false;
+        }
         case keyArrowLeft:
           if (this.expanded) {
             this.#emitSyntheticClick();
@@ -128,6 +130,7 @@ class MenuItem extends HostSemantics(AffixIcon(VividElement)) {
    * @internal
    */
   expandedChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.$fastController.isConnected) {
       if (this.submenu && !this.expanded) {
         this.submenu.collapseExpandedItem();

package/unbundled/definition3.cjs

@@ -69,6 +69,7 @@ class ListboxOption extends hostSemantics.HostSemantics(
     }
   }
   disabledChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLOptionElement) {
       this.proxy.disabled = this.disabled;
     }

package/unbundled/definition3.js

@@ -67,6 +67,7 @@ class ListboxOption extends HostSemantics(
     }
   }
   disabledChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLOptionElement) {
       this.proxy.disabled = this.disabled;
     }

package/unbundled/definition4.cjs

@@ -76,6 +76,7 @@ class TreeItem extends hostSemantics.HostSemantics(affix.AffixIcon(vividElement.
   itemsChanged() {
     if (this.$fastController.isConnected) {
       this.items.forEach((node) => {
+        /* v8 ignore else -- @preserve */
         if (isTreeItemElement(node)) {
           node.nested = true;
         }

package/unbundled/definition4.js

@@ -74,6 +74,7 @@ class TreeItem extends HostSemantics(AffixIcon(VividElement)) {
   itemsChanged() {
     if (this.$fastController.isConnected) {
       this.items.forEach((node) => {
+        /* v8 ignore else -- @preserve */
         if (isTreeItemElement(node)) {
           node.nested = true;
         }

package/unbundled/definition5.cjs

@@ -77,7 +77,8 @@ class Popup extends vividElement.VividElement {
             maxHeight: `${availableHeight}px`
           });
         }
-      })
+      }),
+      dom.shift()
     ];
     let offsetValue = this.offset ?? 0;
     if (this.arrow) {
@@ -245,7 +246,7 @@ __decorateClass([
   fastElement.observable
 ], Popup.prototype, "anchor");
 
-const styles = ":host{display:var(--_popup-display, inline)}.control{border-radius:inherit;background:var(--vvd-color-surface-4dp);contain:layout}.control:not(.open){display:none}.popup-wrapper{white-space:initial;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.popup-wrapper{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.popup-wrapper ::-webkit-scrollbar{width:4px}.popup-wrapper ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.popup-wrapper ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.popup-wrapper{z-index:var(--_popup-z-index, 10);overflow:visible;padding:0;border:none;border-radius:8px;margin:0;inline-size:max-content}.popup-wrapper:not(.absolute){position:fixed}.popup-wrapper.absolute{position:absolute;top:0;left:0}.popup-content{display:grid;color:var(--vvd-color-canvas-text)}.dismissible .popup-content{align-content:start;grid-template-columns:1fr auto}.arrow{position:absolute;z-index:-1;width:8px;height:8px;background:var(--vvd-color-surface-4dp);transform:rotate(45deg)}.dismissible-button{align-self:flex-start;margin-block-start:4px;margin-inline-end:4px}";
+const styles = ":host{display:var(--_popup-display, inline)}.control{border-radius:inherit;background:var(--vvd-color-surface-4dp);contain:layout}.control:not(.open){display:none}.popup-wrapper{white-space:initial;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.popup-wrapper{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.popup-wrapper ::-webkit-scrollbar{width:4px}.popup-wrapper ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.popup-wrapper ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.popup-wrapper{z-index:var(--_popup-z-index, 10);overflow:visible;padding:0;border:none;border-radius:8px;margin:0;inline-size:max-content;min-inline-size:fit-content}.popup-wrapper:not(.absolute){position:fixed}.popup-wrapper.absolute{position:absolute;top:0;left:0}.popup-content{display:grid;color:var(--vvd-color-canvas-text)}.dismissible .popup-content{align-content:start;grid-template-columns:1fr auto}.arrow{position:absolute;z-index:-1;width:8px;height:8px;background:var(--vvd-color-surface-4dp);transform:rotate(45deg)}.dismissible-button{align-self:flex-start;margin-block-start:4px;margin-inline-end:4px}";
 
 const getClasses = ({ open, dismissible, alternate }) => fastWebUtilities.classNames(
   "control",

package/unbundled/definition5.js

@@ -2,7 +2,7 @@ import { B as Button, b as buttonDefinition } from './definition.js';
 import { E as Elevation, e as elevationDefinition } from './definition6.js';
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from './vivid-element.js';
 import { attr, nullableNumberConverter, observable, ref, when, html } from '@microsoft/fast-element';
-import { inline, autoPlacement, flip, hide, size, arrow, offset, autoUpdate, computePosition } from '@floating-ui/dom';
+import { inline, autoPlacement, flip, hide, size, shift, arrow, offset, autoUpdate, computePosition } from '@floating-ui/dom';
 import { classNames } from '@microsoft/fast-web-utilities';
 
 var __defProp = Object.defineProperty;
@@ -75,7 +75,8 @@ class Popup extends VividElement {
             maxHeight: `${availableHeight}px`
           });
         }
-      })
+      }),
+      shift()
     ];
     let offsetValue = this.offset ?? 0;
     if (this.arrow) {
@@ -243,7 +244,7 @@ __decorateClass([
   observable
 ], Popup.prototype, "anchor");
 
-const styles = ":host{display:var(--_popup-display, inline)}.control{border-radius:inherit;background:var(--vvd-color-surface-4dp);contain:layout}.control:not(.open){display:none}.popup-wrapper{white-space:initial;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.popup-wrapper{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.popup-wrapper ::-webkit-scrollbar{width:4px}.popup-wrapper ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.popup-wrapper ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.popup-wrapper{z-index:var(--_popup-z-index, 10);overflow:visible;padding:0;border:none;border-radius:8px;margin:0;inline-size:max-content}.popup-wrapper:not(.absolute){position:fixed}.popup-wrapper.absolute{position:absolute;top:0;left:0}.popup-content{display:grid;color:var(--vvd-color-canvas-text)}.dismissible .popup-content{align-content:start;grid-template-columns:1fr auto}.arrow{position:absolute;z-index:-1;width:8px;height:8px;background:var(--vvd-color-surface-4dp);transform:rotate(45deg)}.dismissible-button{align-self:flex-start;margin-block-start:4px;margin-inline-end:4px}";
+const styles = ":host{display:var(--_popup-display, inline)}.control{border-radius:inherit;background:var(--vvd-color-surface-4dp);contain:layout}.control:not(.open){display:none}.popup-wrapper{white-space:initial;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.popup-wrapper{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.popup-wrapper ::-webkit-scrollbar{width:4px}.popup-wrapper ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.popup-wrapper ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.popup-wrapper{z-index:var(--_popup-z-index, 10);overflow:visible;padding:0;border:none;border-radius:8px;margin:0;inline-size:max-content;min-inline-size:fit-content}.popup-wrapper:not(.absolute){position:fixed}.popup-wrapper.absolute{position:absolute;top:0;left:0}.popup-content{display:grid;color:var(--vvd-color-canvas-text)}.dismissible .popup-content{align-content:start;grid-template-columns:1fr auto}.arrow{position:absolute;z-index:-1;width:8px;height:8px;background:var(--vvd-color-surface-4dp);transform:rotate(45deg)}.dismissible-button{align-self:flex-start;margin-block-start:4px;margin-inline-end:4px}";
 
 const getClasses = ({ open, dismissible, alternate }) => classNames(
   "control",

package/unbundled/delegates-aria.cjs

@@ -69,6 +69,7 @@ class DelegateAriaBehavior {
   // }
   startForwardingPropertiesToTarget(source, delegatedProperties, target) {
     for (const key of delegatedProperties) {
+      /* v8 ignore else -- @preserve */
       if (!(key in this.boundProperties)) {
         this.forwardPropertyToTarget(target, key, source[key]);
       }

package/unbundled/delegates-aria.js

@@ -67,6 +67,7 @@ class DelegateAriaBehavior {
   // }
   startForwardingPropertiesToTarget(source, delegatedProperties, target) {
     for (const key of delegatedProperties) {
+      /* v8 ignore else -- @preserve */
       if (!(key in this.boundProperties)) {
         this.forwardPropertyToTarget(target, key, source[key]);
       }