@vonage/vivid 4.3.0 → 4.4.0

package/shared/definition46.js

@@ -1,4 +1,5 @@
-import { F as FoundationElement, _ as __decorate, a as attr, o as observable, n as nullableNumberConverter, r as registerFactory } from './index.js';
+import { F as FoundationElement, _ as __decorate, a as attr, o as observable, n as nullableNumberConverter, v as volatile, r as registerFactory } from './index.js';
+import { p as popupRegistries } from './definition63.js';
 import './affix.js';
 import './index2.js';
 import { L as Localized } from './localized.js';
@@ -482,24 +483,70 @@ __decorate([
     attr
 ], Slider$1.prototype, "mode", void 0);
 
-const styles = ":host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control{--_thumb-size: 12px;--_thumb-interaction-indicator-size: 36px;--_track-start-inset-inline-start: 0;--_track-start-inset-block-start: 0;cursor:pointer;outline:none;user-select:none}.control.connotation-cta{--_connotation-color-primary: var(--vvd-slider-cta-primary, var(--vvd-color-cta-500))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-slider-accent-primary, var(--vvd-color-canvas-text))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control .positioning-region{position:relative}.control .track{position:absolute;border-radius:4px;background:var(--_track-background-color)}.control .track-start{position:absolute;border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));margin-inline-start:calc(var(--_thumb-size) / 2);min-inline-size:var(--_thumb-size)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);right:0;left:0;block-size:2px}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start: 1px;border-bottom-left-radius:0;border-top-left-radius:0}.control.horizontal .track .mark{position:absolute;block-size:6px;inline-size:100%;inset-block-start:-2px;inset-inline-start:0}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{position:absolute;block-size:100%;inline-size:6px;inset-block-start:0;inset-inline-start:-2px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}:host([markers]) .control.vertical .track-start{--_track-start-inset-block-start: 1px;border-radius:0}.control.disabled{--_track-background-color: var(--vvd-color-neutral-100);--_track-start-background-color: var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color: var(--vvd-color-neutral-300);--_track-start-background-color: var(--_appearance-color-fill)}.control:not(.disabled) .mark{color:var(--vvd-color-neutral-950)}.control.disabled .mark{color:var(--_track-start-background-color)}.thumb-container{position:absolute;border-radius:50%;block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);outline-color:transparent;touch-action:none}:focus-visible .thumb-container,.thumb-container:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--_thumb-interaction-indicator-alpha: .05;border-radius:50%}.control.horizontal .thumb-container{transform:translate(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}.control:not(.disabled) .thumb-container:hover{--_thumb-interaction-indicator-alpha: .12}.control:not(.disabled) .thumb-container:active{--_thumb-interaction-indicator-alpha: .25}.thumb-container:before{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-interaction-indicator-size);content:\"\";inline-size:var(--_thumb-interaction-indicator-size);opacity:var(--_thumb-interaction-indicator-alpha, 0);transition:opacity .2s ease-out 0s}.thumb-container:after{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-size);content:\"\";inline-size:var(--_thumb-size);inset:calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2)}";
+const styles = ":host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control{--_thumb-size: 12px;--_thumb-interaction-indicator-size: 36px;--_track-start-inset-inline-start: 0;--_track-start-inset-block-start: 0;cursor:pointer;outline:none;user-select:none}.control.connotation-cta{--_connotation-color-primary: var(--vvd-slider-cta-primary, var(--vvd-color-cta-500))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-slider-accent-primary, var(--vvd-color-canvas-text))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control .positioning-region{position:relative}.control .track{position:absolute;border-radius:4px;background:var(--_track-background-color)}.control .track-start{position:absolute;border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));margin-inline-start:calc(var(--_thumb-size) / 2);min-inline-size:var(--_thumb-size)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);right:0;left:0;block-size:2px}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start: 1px;border-bottom-left-radius:0;border-top-left-radius:0}.control.horizontal .track .mark{position:absolute;block-size:6px;inline-size:100%;inset-block-start:-2px;inset-inline-start:0}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{position:absolute;block-size:100%;inline-size:6px;inset-block-start:0;inset-inline-start:-2px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}:host([markers]) .control.vertical .track-start{--_track-start-inset-block-start: 1px;border-radius:0}.control.disabled{--_track-background-color: var(--vvd-color-neutral-100);--_track-start-background-color: var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color: var(--vvd-color-neutral-300);--_track-start-background-color: var(--_appearance-color-fill)}.control:not(.disabled) .mark{color:var(--vvd-color-neutral-950)}.control.disabled .mark{color:var(--_track-start-background-color)}.thumb-container{position:absolute;border-radius:50%;block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);outline:none;touch-action:none}.thumb-container.focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--_thumb-interaction-indicator-alpha: .05;border-radius:50%}.control.horizontal .thumb-container{transform:translate(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}.control:not(.disabled) .thumb-container:hover{--_thumb-interaction-indicator-alpha: .12}.control:not(.disabled) .thumb-container:active{--_thumb-interaction-indicator-alpha: .25}.thumb-container:before{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-interaction-indicator-size);content:\"\";inline-size:var(--_thumb-interaction-indicator-size);opacity:var(--_thumb-interaction-indicator-alpha, 0);transition:opacity .2s ease-out 0s}.thumb-container:after{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-size);content:\"\";inline-size:var(--_thumb-size);inset:calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2)}.popup{pointer-events:none}.tooltip{width:auto;padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}";
 
 var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
 class Slider extends Slider$1 {
   constructor() {
-    super(...arguments);
+    super();
     this.ariaLabel = null;
     this.ariaValuetext = null;
     this.markers = false;
+    this.pin = false;
     this.valueTextFormatter = (value) => parseFloat(value).toLocaleString(this.locale.lang);
+    this._focusVisible = false;
+    this._hoveringOnThumb = false;
+    this.#isNonVisibleFocus = false;
+    /**
+     * @internal
+     */
+    this._onFocusIn = () => {
+      if (!this.#isNonVisibleFocus) {
+        this._focusVisible = true;
+      }
+    };
+    /**
+     * @internal
+     */
+    this._onFocusOut = () => {
+      this._focusVisible = false;
+    };
+    this.#onMouseOver = () => {
+      this._hoveringOnThumb = true;
+    };
+    this.#onMouseOut = () => {
+      this._hoveringOnThumb = false;
+    };
+    const fastSliderInternals = this;
+    const originalHandleMouseDown = fastSliderInternals.handleMouseDown;
+    fastSliderInternals.handleMouseDown = (e) => {
+      this.#isNonVisibleFocus = true;
+      originalHandleMouseDown(e);
+      this.#isNonVisibleFocus = false;
+      if (e && !this.disabled && !this.readOnly) {
+        this.isDragging = true;
+      }
+    };
+    const originalHandleThumbMouseDown = fastSliderInternals.handleThumbMouseDown;
+    fastSliderInternals.handleThumbMouseDown = (e) => {
+      this.#isNonVisibleFocus = true;
+      originalHandleThumbMouseDown(e);
+      this.#isNonVisibleFocus = false;
+    };
+    const originalKeypressHandler = fastSliderInternals.keypressHandler;
+    fastSliderInternals.keypressHandler = (e) => {
+      this._focusVisible = true;
+      originalKeypressHandler(e);
+    };
   }
   /**
    * TO BE REMOVED WHEN UPGRADING TO FAST-FOUNDATION 3
@@ -521,24 +568,62 @@ class Slider extends Slider$1 {
       super.valueChanged(previous, value);
     }
   }
+  get _isThumbPopupOpen() {
+    return this._focusVisible || this._hoveringOnThumb || this.isDragging;
+  }
+  #isNonVisibleFocus;
+  connectedCallback() {
+    super.connectedCallback();
+    this.#registerThumbListeners();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#unregisterThumbListeners();
+  }
+  #registerThumbListeners() {
+    this.thumb.addEventListener("mouseover", this.#onMouseOver, {
+      passive: true
+    });
+    this.thumb.addEventListener("mouseout", this.#onMouseOut, {
+      passive: true
+    });
+  }
+  #unregisterThumbListeners() {
+    this.thumb.removeEventListener("mouseover", this.#onMouseOver);
+    this.thumb.removeEventListener("mouseout", this.#onMouseOut);
+  }
+  #onMouseOver;
+  #onMouseOut;
 }
 __decorateClass([
   attr({ attribute: "aria-label" })
-], Slider.prototype, "ariaLabel");
+], Slider.prototype, "ariaLabel", 2);
 __decorateClass([
   attr({ attribute: "aria-valuetext" })
-], Slider.prototype, "ariaValuetext");
+], Slider.prototype, "ariaValuetext", 2);
 __decorateClass([
   attr({
     mode: "boolean"
   })
-], Slider.prototype, "markers");
+], Slider.prototype, "markers", 2);
+__decorateClass([
+  attr({ mode: "boolean" })
+], Slider.prototype, "pin", 2);
 __decorateClass([
   attr
-], Slider.prototype, "connotation");
+], Slider.prototype, "connotation", 2);
 __decorateClass([
   observable
-], Slider.prototype, "valueTextFormatter");
+], Slider.prototype, "valueTextFormatter", 2);
+__decorateClass([
+  observable
+], Slider.prototype, "_focusVisible", 2);
+__decorateClass([
+  observable
+], Slider.prototype, "_hoveringOnThumb", 2);
+__decorateClass([
+  volatile
+], Slider.prototype, "_isThumbPopupOpen", 1);
 applyMixins(Slider, Localized);
 
 const sliderDefinition = Slider.compose({
@@ -549,7 +634,7 @@ const sliderDefinition = Slider.compose({
     delegatesFocus: true
   }
 });
-const sliderRegistries = [sliderDefinition()];
+const sliderRegistries = [...popupRegistries, sliderDefinition()];
 const registerSlider = registerFactory(sliderRegistries);
 
 export { Slider as S, sliderRegistries as a, registerSlider as r, sliderDefinition as s };

package/shared/definition56.cjs

@@ -16,7 +16,7 @@ const when = require('./when.cjs');
 const repeat = require('./repeat.cjs');
 const classNames = require('./class-names.cjs');
 
-const styles = ":host{display:inline-block}.base,.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;border-top:1px solid var(--vvd-color-neutral-200);gap:8px}.time-pickers{display:flex;overflow:hidden;padding:4px;block-size:188px;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;scrollbar-width:thin}.time-pickers .picker:hover{overflow-y:auto}.time-pickers .picker:after{display:block;flex-shrink:0;block-size:156px;content:\"\"}.time-pickers .picker:focus-visible{--focus-stroke-gap-color: transparent;--focus-inset: -2px;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.time-pickers .item{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 .item{--_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 .item{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.time-pickers .item: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 .item: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 .item: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 .item: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 .item: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}";
+const styles = ":host{display:inline-block}.base,.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;border-top:1px solid var(--vvd-color-neutral-200);gap:8px}.time-pickers{display:flex;overflow:hidden;justify-content:center;padding:4px;block-size:188px;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;scrollbar-width:thin}.time-pickers .picker:hover{overflow-y:auto}.time-pickers .picker:after{display:block;flex-shrink:0;block-size:156px;content:\"\"}.time-pickers .picker:focus-visible{--focus-stroke-gap-color: transparent;--focus-inset: -2px;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.time-pickers .item{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 .item{--_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 .item{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.time-pickers .item: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 .item: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 .item: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 .item: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 .item: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}";
 
 class _TimePicker extends index.FoundationElement {
 }

package/shared/definition56.js

@@ -14,7 +14,7 @@ import { w as when } from './when.js';
 import { r as repeat } from './repeat.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ":host{display:inline-block}.base,.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;border-top:1px solid var(--vvd-color-neutral-200);gap:8px}.time-pickers{display:flex;overflow:hidden;padding:4px;block-size:188px;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;scrollbar-width:thin}.time-pickers .picker:hover{overflow-y:auto}.time-pickers .picker:after{display:block;flex-shrink:0;block-size:156px;content:\"\"}.time-pickers .picker:focus-visible{--focus-stroke-gap-color: transparent;--focus-inset: -2px;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.time-pickers .item{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 .item{--_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 .item{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.time-pickers .item: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 .item: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 .item: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 .item: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 .item: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}";
+const styles = ":host{display:inline-block}.base,.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;border-top:1px solid var(--vvd-color-neutral-200);gap:8px}.time-pickers{display:flex;overflow:hidden;justify-content:center;padding:4px;block-size:188px;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;scrollbar-width:thin}.time-pickers .picker:hover{overflow-y:auto}.time-pickers .picker:after{display:block;flex-shrink:0;block-size:156px;content:\"\"}.time-pickers .picker:focus-visible{--focus-stroke-gap-color: transparent;--focus-inset: -2px;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.time-pickers .item{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 .item{--_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 .item{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.time-pickers .item: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 .item: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 .item: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 .item: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 .item: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}";
 
 class _TimePicker extends FoundationElement {
 }

package/shared/definition63.cjs

@@ -8,6 +8,8 @@ const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
 
 const sides = ['top', 'right', 'bottom', 'left'];
+const alignments = ['start', 'end'];
+const placements = /*#__PURE__*/sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []);
 const min = Math.min;
 const max = Math.max;
 const round = Math.round;
@@ -421,6 +423,109 @@ const arrow = options => ({
   }
 });
 
+function getPlacementList(alignment, autoAlignment, allowedPlacements) {
+  const allowedPlacementsSortedByAlignment = alignment ? [...allowedPlacements.filter(placement => getAlignment(placement) === alignment), ...allowedPlacements.filter(placement => getAlignment(placement) !== alignment)] : allowedPlacements.filter(placement => getSide(placement) === placement);
+  return allowedPlacementsSortedByAlignment.filter(placement => {
+    if (alignment) {
+      return getAlignment(placement) === alignment || (autoAlignment ? getOppositeAlignmentPlacement(placement) !== placement : false);
+    }
+    return true;
+  });
+}
+/**
+ * Optimizes the visibility of the floating element by choosing the placement
+ * that has the most space available automatically, without needing to specify a
+ * preferred placement. Alternative to `flip`.
+ * @see https://floating-ui.com/docs/autoPlacement
+ */
+const autoPlacement = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: 'autoPlacement',
+    options,
+    async fn(state) {
+      var _middlewareData$autoP, _middlewareData$autoP2, _placementsThatFitOnE;
+      const {
+        rects,
+        middlewareData,
+        placement,
+        platform,
+        elements
+      } = state;
+      const {
+        crossAxis = false,
+        alignment,
+        allowedPlacements = placements,
+        autoAlignment = true,
+        ...detectOverflowOptions
+      } = evaluate(options, state);
+      const placements$1 = alignment !== undefined || allowedPlacements === placements ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements;
+      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const currentIndex = ((_middlewareData$autoP = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP.index) || 0;
+      const currentPlacement = placements$1[currentIndex];
+      if (currentPlacement == null) {
+        return {};
+      }
+      const alignmentSides = getAlignmentSides(currentPlacement, rects, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)));
+
+      // Make `computeCoords` start from the right place.
+      if (placement !== currentPlacement) {
+        return {
+          reset: {
+            placement: placements$1[0]
+          }
+        };
+      }
+      const currentOverflows = [overflow[getSide(currentPlacement)], overflow[alignmentSides[0]], overflow[alignmentSides[1]]];
+      const allOverflows = [...(((_middlewareData$autoP2 = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP2.overflows) || []), {
+        placement: currentPlacement,
+        overflows: currentOverflows
+      }];
+      const nextPlacement = placements$1[currentIndex + 1];
+
+      // There are more placements to check.
+      if (nextPlacement) {
+        return {
+          data: {
+            index: currentIndex + 1,
+            overflows: allOverflows
+          },
+          reset: {
+            placement: nextPlacement
+          }
+        };
+      }
+      const placementsSortedByMostSpace = allOverflows.map(d => {
+        const alignment = getAlignment(d.placement);
+        return [d.placement, alignment && crossAxis ?
+        // Check along the mainAxis and main crossAxis side.
+        d.overflows.slice(0, 2).reduce((acc, v) => acc + v, 0) :
+        // Check only the mainAxis.
+        d.overflows[0], d.overflows];
+      }).sort((a, b) => a[1] - b[1]);
+      const placementsThatFitOnEachSide = placementsSortedByMostSpace.filter(d => d[2].slice(0,
+      // Aligned placements should not check their opposite crossAxis
+      // side.
+      getAlignment(d[0]) ? 2 : 3).every(v => v <= 0));
+      const resetPlacement = ((_placementsThatFitOnE = placementsThatFitOnEachSide[0]) == null ? void 0 : _placementsThatFitOnE[0]) || placementsSortedByMostSpace[0][0];
+      if (resetPlacement !== placement) {
+        return {
+          data: {
+            index: currentIndex + 1,
+            overflows: allOverflows
+          },
+          reset: {
+            placement: resetPlacement
+          }
+        };
+      }
+      return {};
+    }
+  };
+};
+
 /**
  * Optimizes the visibility of the floating element by flipping the `placement`
  * in order to keep it in view when the preferred placement(s) will overflow the
@@ -1628,6 +1733,34 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
+const PlacementStrategy = {
+  Flip: "flip",
+  AutoPlacementHorizontal: "auto-placement-horizontal",
+  AutoPlacementVertical: "auto-placement-vertical"
+};
+const placementStrategyMiddlewares = {
+  [PlacementStrategy.Flip]: flip(),
+  [PlacementStrategy.AutoPlacementHorizontal]: autoPlacement({
+    allowedPlacements: [
+      "bottom",
+      "top",
+      "bottom-start",
+      "bottom-end",
+      "top-start",
+      "top-end"
+    ]
+  }),
+  [PlacementStrategy.AutoPlacementVertical]: autoPlacement({
+    allowedPlacements: [
+      "left",
+      "right",
+      "left-start",
+      "left-end",
+      "right-start",
+      "right-end"
+    ]
+  })
+};
 class Popup extends index.FoundationElement {
   constructor() {
     super(...arguments);
@@ -1635,12 +1768,19 @@ class Popup extends index.FoundationElement {
     this.dismissible = false;
     this.arrow = false;
     this.alternate = false;
+    /**
+     * The placement strategy of the popup.
+     *
+     * @public
+     */
+    this.placementStrategy = PlacementStrategy.Flip;
+    this.animationFrame = false;
     this.strategy = "fixed";
   }
   get #middleware() {
     let middleware = [
       inline(),
-      flip(),
+      placementStrategyMiddlewares[this.placementStrategy],
       hide(),
       size({
         apply({ availableWidth, availableHeight, elements }) {
@@ -1663,6 +1803,12 @@ class Popup extends index.FoundationElement {
   #cleanup;
   openChanged(_, newValue) {
     newValue ? this.$emit("vwc-popup:open") : this.$emit("vwc-popup:close");
+    index.DOM.queueUpdate(() => this.#updateAutoUpdate());
+  }
+  /**
+   * @internal
+   */
+  animationFrameChanged() {
     this.#updateAutoUpdate();
   }
   /**
@@ -1685,7 +1831,10 @@ class Popup extends index.FoundationElement {
       this.#cleanup = autoUpdate(
         this.anchorEl,
         this.popupEl,
-        () => this.updatePosition()
+        () => this.updatePosition(),
+        {
+          animationFrame: this.animationFrame
+        }
       );
     }
   }
@@ -1764,6 +1913,9 @@ __decorateClass([
 __decorateClass([
   index.attr({ mode: "fromView" })
 ], Popup.prototype, "placement");
+__decorateClass([
+  index.attr({ mode: "boolean", attribute: "animation-frame" })
+], Popup.prototype, "animationFrame");
 __decorateClass([
   index.attr({ mode: "fromView" })
 ], Popup.prototype, "strategy");
@@ -1818,6 +1970,7 @@ const popupRegistries = [
 ];
 const registerPopup = index.registerFactory(popupRegistries);
 
+exports.PlacementStrategy = PlacementStrategy;
 exports.Popup = Popup;
 exports.popupRegistries = popupRegistries;
 exports.registerPopup = registerPopup;

package/shared/definition63.js

@@ -1,4 +1,4 @@
-import { a as attr, F as FoundationElement, o as observable, h as html, r as registerFactory } from './index.js';
+import { a as attr, F as FoundationElement, D as DOM, o as observable, h as html, r as registerFactory } from './index.js';
 import { B as Button, a as buttonRegistries } from './definition11.js';
 import { E as Elevation, e as elevationRegistries } from './definition62.js';
 import { r as ref } from './ref.js';
@@ -6,6 +6,8 @@ import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
 const sides = ['top', 'right', 'bottom', 'left'];
+const alignments = ['start', 'end'];
+const placements = /*#__PURE__*/sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []);
 const min = Math.min;
 const max = Math.max;
 const round = Math.round;
@@ -419,6 +421,109 @@ const arrow = options => ({
   }
 });
 
+function getPlacementList(alignment, autoAlignment, allowedPlacements) {
+  const allowedPlacementsSortedByAlignment = alignment ? [...allowedPlacements.filter(placement => getAlignment(placement) === alignment), ...allowedPlacements.filter(placement => getAlignment(placement) !== alignment)] : allowedPlacements.filter(placement => getSide(placement) === placement);
+  return allowedPlacementsSortedByAlignment.filter(placement => {
+    if (alignment) {
+      return getAlignment(placement) === alignment || (autoAlignment ? getOppositeAlignmentPlacement(placement) !== placement : false);
+    }
+    return true;
+  });
+}
+/**
+ * Optimizes the visibility of the floating element by choosing the placement
+ * that has the most space available automatically, without needing to specify a
+ * preferred placement. Alternative to `flip`.
+ * @see https://floating-ui.com/docs/autoPlacement
+ */
+const autoPlacement = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: 'autoPlacement',
+    options,
+    async fn(state) {
+      var _middlewareData$autoP, _middlewareData$autoP2, _placementsThatFitOnE;
+      const {
+        rects,
+        middlewareData,
+        placement,
+        platform,
+        elements
+      } = state;
+      const {
+        crossAxis = false,
+        alignment,
+        allowedPlacements = placements,
+        autoAlignment = true,
+        ...detectOverflowOptions
+      } = evaluate(options, state);
+      const placements$1 = alignment !== undefined || allowedPlacements === placements ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements;
+      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const currentIndex = ((_middlewareData$autoP = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP.index) || 0;
+      const currentPlacement = placements$1[currentIndex];
+      if (currentPlacement == null) {
+        return {};
+      }
+      const alignmentSides = getAlignmentSides(currentPlacement, rects, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)));
+
+      // Make `computeCoords` start from the right place.
+      if (placement !== currentPlacement) {
+        return {
+          reset: {
+            placement: placements$1[0]
+          }
+        };
+      }
+      const currentOverflows = [overflow[getSide(currentPlacement)], overflow[alignmentSides[0]], overflow[alignmentSides[1]]];
+      const allOverflows = [...(((_middlewareData$autoP2 = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP2.overflows) || []), {
+        placement: currentPlacement,
+        overflows: currentOverflows
+      }];
+      const nextPlacement = placements$1[currentIndex + 1];
+
+      // There are more placements to check.
+      if (nextPlacement) {
+        return {
+          data: {
+            index: currentIndex + 1,
+            overflows: allOverflows
+          },
+          reset: {
+            placement: nextPlacement
+          }
+        };
+      }
+      const placementsSortedByMostSpace = allOverflows.map(d => {
+        const alignment = getAlignment(d.placement);
+        return [d.placement, alignment && crossAxis ?
+        // Check along the mainAxis and main crossAxis side.
+        d.overflows.slice(0, 2).reduce((acc, v) => acc + v, 0) :
+        // Check only the mainAxis.
+        d.overflows[0], d.overflows];
+      }).sort((a, b) => a[1] - b[1]);
+      const placementsThatFitOnEachSide = placementsSortedByMostSpace.filter(d => d[2].slice(0,
+      // Aligned placements should not check their opposite crossAxis
+      // side.
+      getAlignment(d[0]) ? 2 : 3).every(v => v <= 0));
+      const resetPlacement = ((_placementsThatFitOnE = placementsThatFitOnEachSide[0]) == null ? void 0 : _placementsThatFitOnE[0]) || placementsSortedByMostSpace[0][0];
+      if (resetPlacement !== placement) {
+        return {
+          data: {
+            index: currentIndex + 1,
+            overflows: allOverflows
+          },
+          reset: {
+            placement: resetPlacement
+          }
+        };
+      }
+      return {};
+    }
+  };
+};
+
 /**
  * Optimizes the visibility of the floating element by flipping the `placement`
  * in order to keep it in view when the preferred placement(s) will overflow the
@@ -1626,6 +1731,34 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
+const PlacementStrategy = {
+  Flip: "flip",
+  AutoPlacementHorizontal: "auto-placement-horizontal",
+  AutoPlacementVertical: "auto-placement-vertical"
+};
+const placementStrategyMiddlewares = {
+  [PlacementStrategy.Flip]: flip(),
+  [PlacementStrategy.AutoPlacementHorizontal]: autoPlacement({
+    allowedPlacements: [
+      "bottom",
+      "top",
+      "bottom-start",
+      "bottom-end",
+      "top-start",
+      "top-end"
+    ]
+  }),
+  [PlacementStrategy.AutoPlacementVertical]: autoPlacement({
+    allowedPlacements: [
+      "left",
+      "right",
+      "left-start",
+      "left-end",
+      "right-start",
+      "right-end"
+    ]
+  })
+};
 class Popup extends FoundationElement {
   constructor() {
     super(...arguments);
@@ -1633,12 +1766,19 @@ class Popup extends FoundationElement {
     this.dismissible = false;
     this.arrow = false;
     this.alternate = false;
+    /**
+     * The placement strategy of the popup.
+     *
+     * @public
+     */
+    this.placementStrategy = PlacementStrategy.Flip;
+    this.animationFrame = false;
     this.strategy = "fixed";
   }
   get #middleware() {
     let middleware = [
       inline(),
-      flip(),
+      placementStrategyMiddlewares[this.placementStrategy],
       hide(),
       size({
         apply({ availableWidth, availableHeight, elements }) {
@@ -1661,6 +1801,12 @@ class Popup extends FoundationElement {
   #cleanup;
   openChanged(_, newValue) {
     newValue ? this.$emit("vwc-popup:open") : this.$emit("vwc-popup:close");
+    DOM.queueUpdate(() => this.#updateAutoUpdate());
+  }
+  /**
+   * @internal
+   */
+  animationFrameChanged() {
     this.#updateAutoUpdate();
   }
   /**
@@ -1683,7 +1829,10 @@ class Popup extends FoundationElement {
       this.#cleanup = autoUpdate(
         this.anchorEl,
         this.popupEl,
-        () => this.updatePosition()
+        () => this.updatePosition(),
+        {
+          animationFrame: this.animationFrame
+        }
       );
     }
   }
@@ -1762,6 +1911,9 @@ __decorateClass([
 __decorateClass([
   attr({ mode: "fromView" })
 ], Popup.prototype, "placement");
+__decorateClass([
+  attr({ mode: "boolean", attribute: "animation-frame" })
+], Popup.prototype, "animationFrame");
 __decorateClass([
   attr({ mode: "fromView" })
 ], Popup.prototype, "strategy");
@@ -1816,4 +1968,4 @@ const popupRegistries = [
 ];
 const registerPopup = registerFactory(popupRegistries);
 
-export { Popup as P, popupRegistries as p, registerPopup as r };
+export { Popup as P, PlacementStrategy as a, popupRegistries as p, registerPopup as r };

package/shared/enums.cjs

@@ -34,6 +34,11 @@ var Appearance = /* @__PURE__ */ ((Appearance2) => {
   Appearance2["Elevated"] = "elevated";
   return Appearance2;
 })(Appearance || {});
+var IconDecoration = /* @__PURE__ */ ((IconDecoration2) => {
+  IconDecoration2["Filled"] = "filled";
+  IconDecoration2["Outlined"] = "outlined";
+  return IconDecoration2;
+})(IconDecoration || {});
 var Size = /* @__PURE__ */ ((Size2) => {
   Size2["UltraCondensed"] = "ultra-condensed";
   Size2["SuperCondensed"] = "super-condensed";
@@ -89,6 +94,7 @@ exports.Appearance = Appearance;
 exports.AriaLive = AriaLive;
 exports.Connotation = Connotation;
 exports.ConnotationDecorative = ConnotationDecorative;
+exports.IconDecoration = IconDecoration;
 exports.LayoutSize = LayoutSize;
 exports.MediaSkipBy = MediaSkipBy;
 exports.Position = Position;