@vonage/vivid 4.2.0 → 4.4.0

package/shared/slider.template.js

@@ -1,6 +1,8 @@
+import { P as Popup, a as PlacementStrategy } from './definition63.js';
 import { O as Orientation } from './aria.js';
 import { h as html } from './index.js';
 import { r as ref } from './ref.js';
+import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
 /**
@@ -21,6 +23,7 @@ const getClasses = ({ disabled, connotation }) => classNames(
   ["disabled", Boolean(disabled)],
   [`connotation-${connotation}`, Boolean(connotation)]
 );
+const getThumbClasses = ({ _focusVisible }) => classNames("thumb-container", ["focus-visible", _focusVisible]);
 const getMarkersTemplate = (isHorizontal, numMarkers) => {
   const placeholder = isHorizontal ? ["right", "center", "", "100% repeat-x"] : ["bottom", "top", "100%", "repeat-y"];
   return html` <div
@@ -31,9 +34,12 @@ const getMarkersTemplate = (isHorizontal, numMarkers) => {
 	"
 	></div>`;
 };
-const SliderTemplate = () => {
+const SliderTemplate = (context) => {
+  const popupTag = context.tagFor(Popup);
   return html`<template
 		role="${(x) => x.ariaLabel ? "presentation" : null}"
+		@focusin="${(x) => x._onFocusIn()}"
+		@focusout="${(x) => x._onFocusOut()}"
 	>
 		<div
 			role="slider"
@@ -57,11 +63,28 @@ const SliderTemplate = () => {
 				</div>
 				<div
 					${ref("thumb")}
-					class="thumb-container"
+					class="${(x) => getThumbClasses(x)}"
 					style="${(x) => x.position}"
 				></div>
-			</div></div
-	></template>`;
+				${when(
+    (x) => x.pin,
+    html`<${popupTag}
+					class="popup"
+					arrow
+					alternate
+					:anchor="${(x) => x.thumb}"
+					:open=${(x) => x._isThumbPopupOpen}
+					:placementStrategy=${(x) => x.orientation === Orientation.horizontal ? PlacementStrategy.AutoPlacementHorizontal : 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
+	>`;
 };
 
 export { SliderTemplate as S, getMarkersTemplate as g, limit as l };

package/shared/text-anchor.cjs

@@ -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 TextAnchor extends anchor.Anchor {

package/shared/text-anchor.js

@@ -9,8 +9,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 TextAnchor extends Anchor {

package/shared/video-player.cjs

@@ -65672,19 +65672,16 @@ 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 DEFAULT_PLAYBACK_RATES = "0.5, 1, 1.5, 2";
 function getPlaybackRatesArray(playbackRates) {
-  if (playbackRates === "")
-    return [];
+  if (playbackRates === "") return [];
   const ratesArray = [];
   playbackRates.split(",").forEach((numStr) => {
     const num = Number(numStr);
-    if (!isNaN(num))
-      ratesArray.push(num);
+    if (!isNaN(num)) ratesArray.push(num);
   });
   return ratesArray;
 }
@@ -65749,8 +65746,7 @@ class VideoPlayer extends index.FoundationElement {
    */
   #getSources() {
     const srcEles = this.querySelectorAll("source");
-    if (srcEles.length === 0 && !this.src)
-      return void 0;
+    if (srcEles.length === 0 && !this.src) return void 0;
     return this.src ? [{ src: this.src }] : Array.from(srcEles).map((el) => ({
       src: el.getAttribute("src"),
       type: el.getAttribute("type")

package/shared/video-player.js

@@ -65670,19 +65670,16 @@ 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 DEFAULT_PLAYBACK_RATES = "0.5, 1, 1.5, 2";
 function getPlaybackRatesArray(playbackRates) {
-  if (playbackRates === "")
-    return [];
+  if (playbackRates === "") return [];
   const ratesArray = [];
   playbackRates.split(",").forEach((numStr) => {
     const num = Number(numStr);
-    if (!isNaN(num))
-      ratesArray.push(num);
+    if (!isNaN(num)) ratesArray.push(num);
   });
   return ratesArray;
 }
@@ -65747,8 +65744,7 @@ class VideoPlayer extends FoundationElement {
    */
   #getSources() {
     const srcEles = this.querySelectorAll("source");
-    if (srcEles.length === 0 && !this.src)
-      return void 0;
+    if (srcEles.length === 0 && !this.src) return void 0;
     return this.src ? [{ src: this.src }] : Array.from(srcEles).map((el) => ({
       src: el.getAttribute("src"),
       type: el.getAttribute("type")

package/styles/core/all.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 11 Jul 2024 10:35:07 GMT
+ * Generated on Thu, 01 Aug 2024 12:52:05 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);

package/styles/core/theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 11 Jul 2024 10:35:07 GMT
+ * Generated on Thu, 01 Aug 2024 12:52:05 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);

package/styles/core/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 11 Jul 2024 10:35:07 GMT
+ * Generated on Thu, 01 Aug 2024 12:52:05 GMT
  */
 .vvd-root:root {
   --vvd-size-font-scale-base: 1rem;

package/styles/tokens/theme-dark.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Thu, 11 Jul 2024 10:35:07 GMT
+ * Generated on Thu, 01 Aug 2024 12:52:05 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 11 Jul 2024 10:35:07 GMT
+ * Generated on Thu, 01 Aug 2024 12:52:05 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 11 Jul 2024 10:35:07 GMT
+ * Generated on Thu, 01 Aug 2024 12:52:05 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 11 Jul 2024 10:35:07 GMT
+ * Generated on Thu, 01 Aug 2024 12:52:05 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/theme-light.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Thu, 11 Jul 2024 10:35:07 GMT
+ * Generated on Thu, 01 Aug 2024 12:52:05 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 11 Jul 2024 10:35:07 GMT
+ * Generated on Thu, 01 Aug 2024 12:52:05 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 11 Jul 2024 10:35:07 GMT
+ * Generated on Thu, 01 Aug 2024 12:52:05 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 11 Jul 2024 10:35:07 GMT
+ * Generated on Thu, 01 Aug 2024 12:52:05 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 11 Jul 2024 10:35:07 GMT
+ * Generated on Thu, 01 Aug 2024 12:52:05 GMT
  */
 .vvd-root, ::part(vvd-root),
 .vvd-theme-alternate, ::part(vvd-theme-alternate) {