@vonage/vivid 4.2.0 → 4.4.0

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
@@ -1623,10 +1728,37 @@ var __decorateClass = (decorators, target, key, kind) => {
   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);
+  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);
@@ -1634,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 }) {
@@ -1662,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();
   }
   /**
@@ -1684,7 +1829,10 @@ class Popup extends FoundationElement {
       this.#cleanup = autoUpdate(
         this.anchorEl,
         this.popupEl,
-        () => this.updatePosition()
+        () => this.updatePosition(),
+        {
+          animationFrame: this.animationFrame
+        }
       );
     }
   }
@@ -1763,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");
@@ -1817,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/definition7.cjs

@@ -13,8 +13,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   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);
+  if (result) __defProp(target, key, result);
   return result;
 };
 class Badge extends index.FoundationElement {

package/shared/definition7.js

@@ -11,8 +11,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   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);
+  if (result) __defProp(target, key, result);
   return result;
 };
 class Badge extends FoundationElement {

package/shared/definition8.cjs

@@ -20,8 +20,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   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);
+  if (result) __defProp(target, key, result);
   return result;
 };
 const connotationIconMap = /* @__PURE__ */ new Map([

package/shared/definition8.js

@@ -18,8 +18,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   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);
+  if (result) __defProp(target, key, result);
   return result;
 };
 const connotationIconMap = /* @__PURE__ */ new Map([

package/shared/definition9.cjs

@@ -16,8 +16,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   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);
+  if (result) __defProp(target, key, result);
   return result;
 };
 class BreadcrumbItem extends breadcrumbItem.BreadcrumbItem {

package/shared/definition9.js

@@ -14,8 +14,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   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);
+  if (result) __defProp(target, key, result);
   return result;
 };
 class BreadcrumbItem extends BreadcrumbItem$1 {

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;

package/shared/enums.js

@@ -32,6 +32,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";
@@ -83,4 +88,4 @@ var MediaSkipBy = /* @__PURE__ */ ((MediaSkipBy2) => {
   return MediaSkipBy2;
 })(MediaSkipBy || {});
 
-export { Appearance as A, Connotation as C, LayoutSize as L, MediaSkipBy as M, Position as P, Role as R, Shape as S, TabsGutters as T, ConnotationDecorative as a, Size as b, AriaLive as c };
+export { Appearance as A, Connotation as C, IconDecoration as I, LayoutSize as L, MediaSkipBy as M, Position as P, Role as R, Shape as S, TabsGutters as T, ConnotationDecorative as a, Size as b, AriaLive as c };

package/shared/icon.cjs

@@ -141,7 +141,7 @@ _has._curry2(function memoizeWith(mFn, fn) {
 });
 
 const ICONS_BASE_URL = "https://icon.resources.vonage.com";
-const ICONS_VERSION = "4.5.9";
+const ICONS_VERSION = "4.6.0";
 
 const numberConverter = {
   toView(value) {
@@ -181,8 +181,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp(target, key, result);
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
 const PLACEHOLDER_DELAY = 500;

package/shared/icon.js

@@ -139,7 +139,7 @@ _curry2(function memoizeWith(mFn, fn) {
 });
 
 const ICONS_BASE_URL = "https://icon.resources.vonage.com";
-const ICONS_VERSION = "4.5.9";
+const ICONS_VERSION = "4.6.0";
 
 const numberConverter = {
   toView(value) {
@@ -179,8 +179,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp(target, key, result);
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
 const PLACEHOLDER_DELAY = 500;

package/shared/index2.cjs

@@ -15,8 +15,7 @@ var __decorateClass$1 = (decorators, target, key, kind) => {
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result)
-    __defProp$1(target, key, result);
+  if (result) __defProp$1(target, key, result);
   return result;
 };
 class FormElementHelperText {
@@ -203,8 +202,7 @@ function errorText(constructor) {
       super(...args);
       this._validate = this.validate;
       this.validate = () => {
-        if (!this.#blockValidateCalls)
-          this._validate();
+        if (!this.#blockValidateCalls) this._validate();
       };
     }
     errorTextChanged(_, newErrorText) {
@@ -237,8 +235,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   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);
+  if (result) __defProp(target, key, result);
   return result;
 };
 class CurrentLocale {

package/shared/index2.js

@@ -13,8 +13,7 @@ var __decorateClass$1 = (decorators, target, key, kind) => {
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result)
-    __defProp$1(target, key, result);
+  if (result) __defProp$1(target, key, result);
   return result;
 };
 class FormElementHelperText {
@@ -201,8 +200,7 @@ function errorText(constructor) {
       super(...args);
       this._validate = this.validate;
       this.validate = () => {
-        if (!this.#blockValidateCalls)
-          this._validate();
+        if (!this.#blockValidateCalls) this._validate();
       };
     }
     errorTextChanged(_, newErrorText) {
@@ -235,8 +233,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   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);
+  if (result) __defProp(target, key, result);
   return result;
 };
 class CurrentLocale {

package/shared/listbox.cjs

@@ -998,8 +998,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   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);
+  if (result) __defProp(target, key, result);
   return result;
 };
 class Listbox extends ListboxElement {

package/shared/listbox.js

@@ -996,8 +996,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   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);
+  if (result) __defProp(target, key, result);
   return result;
 };
 class Listbox extends ListboxElement {

package/shared/patterns/anchored.d.ts

@@ -14,10 +14,10 @@ export declare function anchored<T extends {
         _slottedAnchor?: HTMLElement[] | undefined;
         _slottedAnchorChanged(): void;
         _anchorEl?: HTMLElement | undefined;
-        "__#5@#updateAnchorEl": () => void;
-        "__#5@#observer"?: MutationObserver | undefined;
-        "__#5@#observeMissingAnchor": (anchorId: string) => void;
-        "__#5@#cleanupObserverIfNeeded": () => void;
+        "__#6@#updateAnchorEl": () => void;
+        "__#6@#observer"?: MutationObserver | undefined;
+        "__#6@#observeMissingAnchor": (anchorId: string) => void;
+        "__#6@#cleanupObserverIfNeeded": () => void;
         connectedCallback(): void;
         disconnectedCallback(): void;
     };

package/shared/patterns/chevron.d.ts

@@ -0,0 +1,2 @@
+import type { ElementDefinitionContext } from '@microsoft/fast-foundation';
+export declare const chevronTemplateFactory: (context: ElementDefinitionContext) => import("@microsoft/fast-element").ViewTemplate<any, any>;

package/shared/presentationDate.cjs

@@ -17,7 +17,7 @@ const trappedFocus = require('./trapped-focus.cjs');
 const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
 const formAssociated = require('./form-associated.cjs');
 
-const styles = ":host{display:inline-block}.base{display:inline-block;inline-size:100%}.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column;padding:12px;gap:12px}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;gap:8px}.segments{display: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:6px}.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;--focus-inset: -2px}.calendar .calendar-day.start,.calendar .calendar-day.end{border:2px solid var(--vvd-color-cta-50);background-color:var(--vvd-color-cta-200)}.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{position:relative;padding:0;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer}.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}.button: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}.button: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}.button:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button: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}.button: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}.button:focus-visible{--focus-stroke-gap-color: transparent;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));color:var(--vvd-color-canvas-text)}.button.current{border:1px solid var(--vvd-color-neutral-200)}.button:disabled{cursor:not-allowed}";
+const styles = ":host{display:inline-block}.base{display:inline-block;inline-size:100%}.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column;padding:12px;gap:12px}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;gap:8px}.segments{display: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;--focus-inset: -2px}.calendar .calendar-day.start,.calendar .calendar-day.end{border:2px solid var(--vvd-color-cta-50);background-color:var(--vvd-color-cta-200)}.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{position:relative;padding:0;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer}.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}.button: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}.button: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}.button:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button: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}.button: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}.button:focus-visible{--focus-stroke-gap-color: transparent;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));color:var(--vvd-color-canvas-text)}.button.current{border:1px solid var(--vvd-color-neutral-200)}.button:disabled{cursor:not-allowed}";
 
 function _typeof(obj) {
   "@babel/helpers - typeof";
@@ -5669,8 +5669,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp(target, key, result);
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
 const ValidDateFilter = {

package/shared/presentationDate.js

@@ -15,7 +15,7 @@ import { T as TrappedFocus } from './trapped-focus.js';
 import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
 import { F as FormAssociated } from './form-associated.js';
 
-const styles = ":host{display:inline-block}.base{display:inline-block;inline-size:100%}.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column;padding:12px;gap:12px}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;gap:8px}.segments{display: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:6px}.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;--focus-inset: -2px}.calendar .calendar-day.start,.calendar .calendar-day.end{border:2px solid var(--vvd-color-cta-50);background-color:var(--vvd-color-cta-200)}.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{position:relative;padding:0;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer}.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}.button: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}.button: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}.button:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button: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}.button: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}.button:focus-visible{--focus-stroke-gap-color: transparent;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));color:var(--vvd-color-canvas-text)}.button.current{border:1px solid var(--vvd-color-neutral-200)}.button:disabled{cursor:not-allowed}";
+const styles = ":host{display:inline-block}.base{display:inline-block;inline-size:100%}.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column;padding:12px;gap:12px}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;gap:8px}.segments{display: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;--focus-inset: -2px}.calendar .calendar-day.start,.calendar .calendar-day.end{border:2px solid var(--vvd-color-cta-50);background-color:var(--vvd-color-cta-200)}.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{position:relative;padding:0;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer}.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}.button: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}.button: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}.button:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button: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}.button: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}.button:focus-visible{--focus-stroke-gap-color: transparent;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));color:var(--vvd-color-canvas-text)}.button.current{border:1px solid var(--vvd-color-neutral-200)}.button:disabled{cursor:not-allowed}";
 
 function _typeof(obj) {
   "@babel/helpers - typeof";
@@ -5667,8 +5667,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp(target, key, result);
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
 const ValidDateFilter = {

package/shared/radio.cjs

@@ -129,8 +129,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   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);
+  if (result) __defProp(target, key, result);
   return result;
 };
 class Radio extends Radio$1 {

package/shared/radio.js

@@ -127,8 +127,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   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);
+  if (result) __defProp(target, key, result);
   return result;
 };
 class Radio extends Radio$1 {

package/shared/slider.template.cjs

@@ -1,8 +1,10 @@
 'use strict';
 
+const definition = require('./definition63.cjs');
 const aria = require('./aria.cjs');
 const index = require('./index.cjs');
 const ref = require('./ref.cjs');
+const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
 
 /**
@@ -23,6 +25,7 @@ const getClasses = ({ disabled, connotation }) => classNames.classNames(
   ["disabled", Boolean(disabled)],
   [`connotation-${connotation}`, Boolean(connotation)]
 );
+const getThumbClasses = ({ _focusVisible }) => classNames.classNames("thumb-container", ["focus-visible", _focusVisible]);
 const getMarkersTemplate = (isHorizontal, numMarkers) => {
   const placeholder = isHorizontal ? ["right", "center", "", "100% repeat-x"] : ["bottom", "top", "100%", "repeat-y"];
   return index.html` <div
@@ -33,9 +36,12 @@ const getMarkersTemplate = (isHorizontal, numMarkers) => {
 	"
 	></div>`;
 };
-const SliderTemplate = () => {
+const SliderTemplate = (context) => {
+  const popupTag = context.tagFor(definition.Popup);
   return index.html`<template
 		role="${(x) => x.ariaLabel ? "presentation" : null}"
+		@focusin="${(x) => x._onFocusIn()}"
+		@focusout="${(x) => x._onFocusOut()}"
 	>
 		<div
 			role="slider"
@@ -59,11 +65,28 @@ const SliderTemplate = () => {
 				</div>
 				<div
 					${ref.ref("thumb")}
-					class="thumb-container"
+					class="${(x) => getThumbClasses(x)}"
 					style="${(x) => x.position}"
 				></div>
-			</div></div
-	></template>`;
+				${when.when(
+    (x) => x.pin,
+    index.html`<${popupTag}
+					class="popup"
+					arrow
+					alternate
+					:anchor="${(x) => x.thumb}"
+					:open=${(x) => x._isThumbPopupOpen}
+					:placementStrategy=${(x) => x.orientation === aria.Orientation.horizontal ? definition.PlacementStrategy.AutoPlacementHorizontal : definition.PlacementStrategy.AutoPlacementVertical}
+					animation-frame
+					exportparts="vvd-theme-alternate"
+					aria-hidden="true"
+				>
+					<div class="tooltip">${(x) => x.ariaValuetext || x.valueTextFormatter(x.value)}</div>
+				</${popupTag}>`
+  )}
+			</div>
+		</div></template
+	>`;
 };
 
 exports.SliderTemplate = SliderTemplate;