@vonage/vivid 3.55.0 → 3.57.0

package/shared/definition5.js

@@ -10,7 +10,7 @@ import { w as when } from './when.js';
 import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ".base{display:inline-flex;align-items:center;padding:8px;color:var(--vvd-color-canvas-text);user-select:none}.base .slider{min-inline-size:var(--audio-player-min-inline-size, 200px)}.base .controls{display:flex;align-items:center;gap:16px}.base .time-stamp{display:inline-flex}.base .time-stamp .current-time,.base .time-stamp .total-time{margin-inline:6px;min-inline-size:32px}";
+const styles = ":host{display:block;max-inline-size:350px}.wrapper{container-type:inline-size}.base{display:inline-flex;box-sizing:border-box;align-items:center;padding:8px;color:var(--vvd-color-canvas-text);gap:16px;inline-size:100%;user-select:none}.base .slider{flex:1;grid-area:slider;min-inline-size:var(--audio-player-min-inline-size, 200px)}.base .controls{display:flex;align-items:center;justify-content:center;gap:8px;grid-area:controls}.base .time-stamp{display:inline-flex}.base .time-stamp .current-time,.base .time-stamp .total-time{margin-inline:6px;min-inline-size:32px}.base .playback{grid-area:playback}@container (max-width: 500px){.base.two-lines{display:inline-grid;grid-template:auto auto/1fr;grid-template-areas:\"slider\" \"controls\";inline-size:100%;row-gap:4px}.base.two-lines .time-stamp{margin-inline:auto 2px}.base.two-lines.playback{grid-template-areas:\"slider slider\" \"controls playback\";grid-template-columns:1fr auto}.base.two-lines.playback .time-stamp{margin-inline:auto}.base .slider{box-sizing:border-box;min-inline-size:auto;padding-inline:2px}}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -235,30 +235,33 @@ function renderTimestamp() {
 	</div>`;
 }
 const AudioPlayerTemplate = (context) => {
-  return html` <div
-		class="base ${getClasses}"
-		@keyup="${(x, c) => x._handleSliderEvent(c.event)}"
-		@keydown="${(x, c) => x._handleSliderEvent(c.event)}"
-		@mousedown="${(x, c) => x._handleSliderEvent(c.event)}"
-	>
-		<div class="controls">
-			${when(
+  return html` <div class="wrapper">
+		<div
+			class="base ${getClasses}"
+			@keyup="${(x, c) => x._handleSliderEvent(c.event)}"
+			@keydown="${(x, c) => x._handleSliderEvent(c.event)}"
+			@mousedown="${(x, c) => x._handleSliderEvent(c.event)}"
+		>
+			<div class="controls">
+				${when(
     (x) => x.skipBy && x.skipBy != MediaSkipBy.Zero,
     renderBackwardSkipButtons(context)
   )}
-			${renderButton(context)}
-			${when(
+				${renderButton(context)}
+				${when(
     (x) => x.skipBy && x.skipBy != MediaSkipBy.Zero,
     renderForwardSkipButtons(context)
   )}
-			${when((x) => !x.notime, renderTimestamp())} ${renderSlider(context)}
+				${when((x) => !x.notime, renderTimestamp())}
+			</div>
+			${renderSlider(context)}
+			<audio
+				${ref("_playerEl")}
+				src="${(x) => x.src}"
+				@timeupdate="${(x) => x._updateProgress()}"
+				@loadedmetadata="${(x) => x._updateTotalTime()}"
+			></audio>
 		</div>
-		<audio
-			${ref("_playerEl")}
-			src="${(x) => x.src}"
-			@timeupdate="${(x) => x._updateProgress()}"
-			@loadedmetadata="${(x) => x._updateTotalTime()}"
-		></audio>
 	</div>`;
 };
 

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.6";
+const ICONS_VERSION = "4.5.8";
 
 const numberConverter = {
   toView(value) {

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.6";
+const ICONS_VERSION = "4.5.8";
 
 const numberConverter = {
   toView(value) {

package/shared/localization/Locale.d.ts

@@ -11,6 +11,10 @@ import type { TimePickerLocale } from '../../lib/time-picker/locale';
 import type { RangeSliderLocale } from '../../lib/range-slider/locale';
 import type { DialPadLocale } from '../../lib/dial-pad/locale';
 export interface Locale {
+    lang: string;
+    common: {
+        useCommaAsDecimalSeparator: boolean;
+    };
     datePicker: DatePickerLocale;
     timePicker: TimePickerLocale;
     filePicker: FilePickerLocale;

package/styles/core/all.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 May 2024 13:06:12 GMT
+ * Generated on Wed, 22 May 2024 12:12:29 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);

package/styles/core/theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 May 2024 13:06:12 GMT
+ * Generated on Wed, 22 May 2024 12:12:29 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);

package/styles/core/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 May 2024 13:06:12 GMT
+ * Generated on Wed, 22 May 2024 12:12:29 GMT
  */
 .vvd-root:root {
   --vvd-size-font-scale-base: 1rem;

package/styles/tokens/theme-dark.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 May 2024 13:06:13 GMT
+ * Generated on Wed, 22 May 2024 12:12:30 GMT
  */
 /**
  * Do not edit directly
- * Generated on Fri, 10 May 2024 13:06:12 GMT
+ * Generated on Wed, 22 May 2024 12:12:29 GMT
  */
 /**
  * Do not edit directly
- * Generated on Fri, 10 May 2024 13:06:13 GMT
+ * Generated on Wed, 22 May 2024 12:12:30 GMT
  */
 /**
  * Do not edit directly
- * Generated on Fri, 10 May 2024 13:06:13 GMT
+ * Generated on Wed, 22 May 2024 12:12:30 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/theme-light.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 May 2024 13:06:12 GMT
+ * Generated on Wed, 22 May 2024 12:12:29 GMT
  */
 /**
  * Do not edit directly
- * Generated on Fri, 10 May 2024 13:06:13 GMT
+ * Generated on Wed, 22 May 2024 12:12:30 GMT
  */
 /**
  * Do not edit directly
- * Generated on Fri, 10 May 2024 13:06:13 GMT
+ * Generated on Wed, 22 May 2024 12:12:30 GMT
  */
 /**
  * Do not edit directly
- * Generated on Fri, 10 May 2024 13:06:13 GMT
+ * Generated on Wed, 22 May 2024 12:12:30 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 May 2024 13:06:12 GMT
+ * Generated on Wed, 22 May 2024 12:12:29 GMT
  */
 .vvd-root, ::part(vvd-root),
 .vvd-theme-alternate, ::part(vvd-theme-alternate) {

package/vivid.api.json

@@ -1501,6 +1501,15 @@
               "text": "Appearance.Ghost",
               "canonicalReference": "@vonage/vivid!Appearance.Ghost:member"
             },
+            {
+              "kind": "Content",
+              "text": " | "
+            },
+            {
+              "kind": "Reference",
+              "text": "Appearance.GhostLight",
+              "canonicalReference": "@vonage/vivid!Appearance.GhostLight:member"
+            },
             {
               "kind": "Content",
               "text": ">"
@@ -1515,7 +1524,7 @@
           "name": "ButtonAppearance",
           "typeTokenRange": {
             "startIndex": 1,
-            "endIndex": 11
+            "endIndex": 13
           }
         },
         {
@@ -2969,6 +2978,15 @@
               "text": "Connotation.Accent",
               "canonicalReference": "@vonage/vivid!Connotation.Accent:member"
             },
+            {
+              "kind": "Content",
+              "text": " | "
+            },
+            {
+              "kind": "Reference",
+              "text": "Connotation.Announcement",
+              "canonicalReference": "@vonage/vivid!Connotation.Announcement:member"
+            },
             {
               "kind": "Content",
               "text": ">"
@@ -2983,7 +3001,7 @@
           "name": "FabConnotation",
           "typeTokenRange": {
             "startIndex": 1,
-            "endIndex": 9
+            "endIndex": 11
           }
         },
         {