@vonage/vivid 3.55.0 → 3.56.0

package/shared/definition29.cjs

@@ -570,7 +570,7 @@ index.__decorate([
     index.observable
 ], Menu$1.prototype, "items", void 0);
 
-const styles = ":host(:focus-visible){outline:none}:host([disabled]){pointer-events:none}.base{display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base: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}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base: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}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base: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}.base.connotation-cta{--_connotation-color-primary: var(--vvd-menu-item-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-menu-item-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-menu-item-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-menu-item-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-menu-item-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-menu-item-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-menu-item-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-menu-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-menu-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-menu-item-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-menu-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-menu-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-menu-item-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-menu-item-accent-dim, var(--vvd-color-neutral-200))}.base:not(.two-lines){gap:12px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:8px;padding-inline:12px}.base.two-lines{padding:12px;gap:16px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}:host(:not([role=presentation]):focus-visible) .base{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;border-radius:8px}.icon{flex-shrink:0;font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.action,.decorative{display:flex;place-content:center}.action{color:var(--_appearance-color-text)}:host(:not([check-appearance],[aria-checked=true])) .action{color:var(--vvd-color-neutral-500)}.base.trailing .action,.base.has-meta .action{order:2}.base:not(.disabled) .decorative{color:var(--vvd-color-neutral-600)}.base.disabled .decorative{color:var(--vvd-color-neutral-200)}.base.has-meta .decorative{order:1}.chevron{order:3}.text{display:flex;overflow:hidden;flex-direction:column;gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base);-webkit-line-clamp:var(--text-primary-line-clamp, 1)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{font:var(--vvd-typography-base-condensed);-webkit-line-clamp:var(--text-secondary-line-clamp, 1)}.base.two-lines:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-600)}.base.two-lines:not(.disabled).selected .text-secondary{color:var(--vvd-color-neutral-800)}";
+const styles = ":host(:focus-visible){outline:none}:host([disabled]){pointer-events:none}.base{display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base: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}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base: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}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base: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}.base.connotation-cta{--_connotation-color-primary: var(--vvd-menu-item-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-menu-item-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-menu-item-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-menu-item-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-menu-item-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-menu-item-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-menu-item-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-menu-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-menu-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-menu-item-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-menu-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-menu-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-menu-item-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-menu-item-accent-dim, var(--vvd-color-neutral-200))}.base:not(.two-lines){gap:12px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:8px;padding-inline:12px}.base.two-lines{padding:12px;gap:16px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}:host(:not([role=presentation]):focus-visible) .base{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;border-radius:8px}.icon{flex-shrink:0;font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.action,.decorative{display:flex;place-content:center}.action{color:var(--_appearance-color-text)}.base.trailing .action,.base.has-meta .action{order:2}:host(:not([check-appearance],[aria-checked=true],[disabled])) .action{color:var(--vvd-color-neutral-500)}.base:not(.disabled) .decorative{color:var(--vvd-color-neutral-600)}.base.disabled .decorative{color:var(--vvd-color-neutral-200)}.base.has-meta .decorative{order:1}.chevron{order:3}.text{display:flex;overflow:hidden;flex-direction:column;gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base);-webkit-line-clamp:var(--text-primary-line-clamp, 1)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed);-webkit-line-clamp:var(--text-secondary-line-clamp, 1)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}";
 
 var __defProp$1 = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/shared/definition29.js

@@ -568,7 +568,7 @@ __decorate([
     observable
 ], Menu$1.prototype, "items", void 0);
 
-const styles = ":host(:focus-visible){outline:none}:host([disabled]){pointer-events:none}.base{display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base: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}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base: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}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base: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}.base.connotation-cta{--_connotation-color-primary: var(--vvd-menu-item-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-menu-item-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-menu-item-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-menu-item-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-menu-item-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-menu-item-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-menu-item-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-menu-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-menu-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-menu-item-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-menu-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-menu-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-menu-item-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-menu-item-accent-dim, var(--vvd-color-neutral-200))}.base:not(.two-lines){gap:12px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:8px;padding-inline:12px}.base.two-lines{padding:12px;gap:16px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}:host(:not([role=presentation]):focus-visible) .base{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;border-radius:8px}.icon{flex-shrink:0;font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.action,.decorative{display:flex;place-content:center}.action{color:var(--_appearance-color-text)}:host(:not([check-appearance],[aria-checked=true])) .action{color:var(--vvd-color-neutral-500)}.base.trailing .action,.base.has-meta .action{order:2}.base:not(.disabled) .decorative{color:var(--vvd-color-neutral-600)}.base.disabled .decorative{color:var(--vvd-color-neutral-200)}.base.has-meta .decorative{order:1}.chevron{order:3}.text{display:flex;overflow:hidden;flex-direction:column;gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base);-webkit-line-clamp:var(--text-primary-line-clamp, 1)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{font:var(--vvd-typography-base-condensed);-webkit-line-clamp:var(--text-secondary-line-clamp, 1)}.base.two-lines:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-600)}.base.two-lines:not(.disabled).selected .text-secondary{color:var(--vvd-color-neutral-800)}";
+const styles = ":host(:focus-visible){outline:none}:host([disabled]){pointer-events:none}.base{display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base: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}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base: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}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base: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}.base.connotation-cta{--_connotation-color-primary: var(--vvd-menu-item-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-menu-item-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-menu-item-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-menu-item-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-menu-item-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-menu-item-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-menu-item-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-menu-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-menu-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-menu-item-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-menu-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-menu-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-menu-item-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-menu-item-accent-dim, var(--vvd-color-neutral-200))}.base:not(.two-lines){gap:12px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:8px;padding-inline:12px}.base.two-lines{padding:12px;gap:16px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}:host(:not([role=presentation]):focus-visible) .base{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;border-radius:8px}.icon{flex-shrink:0;font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.action,.decorative{display:flex;place-content:center}.action{color:var(--_appearance-color-text)}.base.trailing .action,.base.has-meta .action{order:2}:host(:not([check-appearance],[aria-checked=true],[disabled])) .action{color:var(--vvd-color-neutral-500)}.base:not(.disabled) .decorative{color:var(--vvd-color-neutral-600)}.base.disabled .decorative{color:var(--vvd-color-neutral-200)}.base.has-meta .decorative{order:1}.chevron{order:3}.text{display:flex;overflow:hidden;flex-direction:column;gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base);-webkit-line-clamp:var(--text-primary-line-clamp, 1)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed);-webkit-line-clamp:var(--text-secondary-line-clamp, 1)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}";
 
 var __defProp$1 = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/shared/definition42.cjs

@@ -109,7 +109,7 @@ let RangeSlider = class extends FormAssociatedRangeSlider {
     this.ariaStartLabel = null;
     this.ariaEndLabel = null;
     this.markers = false;
-    this.valueTextFormatter = (value) => value;
+    this.valueTextFormatter = (value) => parseFloat(value).toLocaleString(this.locale.lang);
     // --- Thumbs ---
     /**
      * @internal

package/shared/definition42.js

@@ -107,7 +107,7 @@ let RangeSlider = class extends FormAssociatedRangeSlider {
     this.ariaStartLabel = null;
     this.ariaEndLabel = null;
     this.markers = false;
-    this.valueTextFormatter = (value) => value;
+    this.valueTextFormatter = (value) => parseFloat(value).toLocaleString(this.locale.lang);
     // --- Thumbs ---
     /**
      * @internal

package/shared/definition46.cjs

@@ -1,12 +1,16 @@
 'use strict';
 
 const index = require('./index.cjs');
+require('./affix.cjs');
+require('./index2.cjs');
+const localized = require('./localized.cjs');
 const direction = require('./direction.cjs');
 const numbers = require('./numbers.cjs');
 const formAssociated = require('./form-associated.cjs');
 const aria = require('./aria2.cjs');
 const keyCodes = require('./key-codes.cjs');
 const slider_template = require('./slider.template.cjs');
+const applyMixins = require('./apply-mixins.cjs');
 
 /**
  * Converts a pixel coordinate on the track to a percent of the track's range
@@ -498,6 +502,7 @@ class Slider extends Slider$1 {
     this.ariaLabel = null;
     this.ariaValuetext = null;
     this.markers = false;
+    this.valueTextFormatter = (value) => parseFloat(value).toLocaleString(this.locale.lang);
   }
   /**
    * TO BE REMOVED WHEN UPGRADING TO FAST-FOUNDATION 3
@@ -534,6 +539,10 @@ __decorateClass([
 __decorateClass([
   index.attr
 ], Slider.prototype, "connotation");
+__decorateClass([
+  index.observable
+], Slider.prototype, "valueTextFormatter");
+applyMixins.applyMixins(Slider, localized.Localized);
 
 const sliderDefinition = Slider.compose({
   baseName: "slider",

package/shared/definition46.js

@@ -1,10 +1,14 @@
 import { F as FoundationElement, _ as __decorate, a as attr, o as observable, n as nullableNumberConverter, r as registerFactory } from './index.js';
+import './affix.js';
+import './index2.js';
+import { L as Localized } from './localized.js';
 import { D as Direction, g as getDirection } from './direction.js';
 import { l as limit } from './numbers.js';
 import { F as FormAssociated } from './form-associated.js';
 import { O as Orientation } from './aria2.js';
 import { g as keyHome, d as keyEnd, f as keyArrowDown, i as keyArrowLeft, e as keyArrowUp, h as keyArrowRight } from './key-codes.js';
 import { l as limit$1, S as SliderTemplate } from './slider.template.js';
+import { a as applyMixins } from './apply-mixins.js';
 
 /**
  * Converts a pixel coordinate on the track to a percent of the track's range
@@ -496,6 +500,7 @@ class Slider extends Slider$1 {
     this.ariaLabel = null;
     this.ariaValuetext = null;
     this.markers = false;
+    this.valueTextFormatter = (value) => parseFloat(value).toLocaleString(this.locale.lang);
   }
   /**
    * TO BE REMOVED WHEN UPGRADING TO FAST-FOUNDATION 3
@@ -532,6 +537,10 @@ __decorateClass([
 __decorateClass([
   attr
 ], Slider.prototype, "connotation");
+__decorateClass([
+  observable
+], Slider.prototype, "valueTextFormatter");
+applyMixins(Slider, Localized);
 
 const sliderDefinition = Slider.compose({
   baseName: "slider",

package/shared/definition5.cjs

@@ -12,7 +12,7 @@ const when = require('./when.cjs');
 const ref = require('./ref.cjs');
 const classNames = require('./class-names.cjs');
 
-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) => {
@@ -237,30 +237,33 @@ function renderTimestamp() {
 	</div>`;
 }
 const AudioPlayerTemplate = (context) => {
-  return index.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.when(
+  return index.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.when(
     (x) => x.skipBy && x.skipBy != enums.MediaSkipBy.Zero,
     renderBackwardSkipButtons(context)
   )}
-			${renderButton(context)}
-			${when.when(
+				${renderButton(context)}
+				${when.when(
     (x) => x.skipBy && x.skipBy != enums.MediaSkipBy.Zero,
     renderForwardSkipButtons(context)
   )}
-			${when.when((x) => !x.notime, renderTimestamp())} ${renderSlider(context)}
+				${when.when((x) => !x.notime, renderTimestamp())}
+			</div>
+			${renderSlider(context)}
+			<audio
+				${ref.ref("_playerEl")}
+				src="${(x) => x.src}"
+				@timeupdate="${(x) => x._updateProgress()}"
+				@loadedmetadata="${(x) => x._updateTotalTime()}"
+			></audio>
 		</div>
-		<audio
-			${ref.ref("_playerEl")}
-			src="${(x) => x.src}"
-			@timeupdate="${(x) => x._updateProgress()}"
-			@loadedmetadata="${(x) => x._updateTotalTime()}"
-		></audio>
 	</div>`;
 };
 

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.7";
 
 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.7";
 
 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 Mon, 20 May 2024 13:37:53 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 Mon, 20 May 2024 13:37:53 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 Mon, 20 May 2024 13:37:53 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 Mon, 20 May 2024 13:37:53 GMT
  */
 /**
  * Do not edit directly
- * Generated on Fri, 10 May 2024 13:06:12 GMT
+ * Generated on Mon, 20 May 2024 13:37:53 GMT
  */
 /**
  * Do not edit directly
- * Generated on Fri, 10 May 2024 13:06:13 GMT
+ * Generated on Mon, 20 May 2024 13:37:53 GMT
  */
 /**
  * Do not edit directly
- * Generated on Fri, 10 May 2024 13:06:13 GMT
+ * Generated on Mon, 20 May 2024 13:37:53 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 Mon, 20 May 2024 13:37:53 GMT
  */
 /**
  * Do not edit directly
- * Generated on Fri, 10 May 2024 13:06:13 GMT
+ * Generated on Mon, 20 May 2024 13:37:53 GMT
  */
 /**
  * Do not edit directly
- * Generated on Fri, 10 May 2024 13:06:13 GMT
+ * Generated on Mon, 20 May 2024 13:37:53 GMT
  */
 /**
  * Do not edit directly
- * Generated on Fri, 10 May 2024 13:06:13 GMT
+ * Generated on Mon, 20 May 2024 13:37:53 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 Mon, 20 May 2024 13:37:53 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
           }
         },
         {