@vonage/vivid 5.1.0 → 5.3.0

package/accordion-item/definition.cjs

@@ -78,8 +78,9 @@ const getClasses = ({ appearance, size }) => fastWebUtilities.classNames(
   [`appearance-${appearance}`, Boolean(appearance)],
   [`size-${size}`, Boolean(size)]
 );
-const header = (context, hTag) => {
+const header = (context, hTagName) => {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
+  const hTag = fastElement.html.partial(hTagName);
   return fastElement.html`
 		<${hTag} class="heading-container">
 			<button

package/accordion-item/definition.js

@@ -74,8 +74,9 @@ const getClasses = ({ appearance, size }) => classNames(
   [`appearance-${appearance}`, Boolean(appearance)],
   [`size-${size}`, Boolean(size)]
 );
-const header = (context, hTag) => {
+const header = (context, hTagName) => {
   const affixIconTemplate = affixIconTemplateFactory(context);
+  const hTag = html.partial(hTagName);
   return html`
 		<${hTag} class="heading-container">
 			<button

package/alert/index.cjs

@@ -1,4 +1,4 @@
-"use strict";const p=require("../bundled/definition3.cjs"),u=require("../bundled/definition4.cjs"),e=require("../bundled/vivid-element.cjs"),f=require("../bundled/definition2.cjs"),l=require("../bundled/enums.cjs"),c=require("../bundled/affix.cjs"),b=require("../bundled/index.cjs"),y=require("../bundled/localized.cjs"),h=require("../bundled/class-names.cjs"),m=require("../bundled/when.cjs"),x='.control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline:0;margin-block:16px;margin-inline:auto;max-inline-size:var(--alert-max-inline-size, fit-content);min-inline-size:var(--alert-min-inline-size, 420px);transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block:0 auto}.control.placement-top-start,.control.placement-bottom-start{right:auto;inset-inline-end:auto;margin-inline:16px}.control.placement-top-end,.control.placement-bottom-end{inset-inline-start:auto;margin-inline:16px}.control:where(.strategy-static){position:static;margin:0;inline-size:auto}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}@media (width <= 768px){.control{min-inline-size:var(--alert-min-inline-size, auto)}}.base.connotation-success{--_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-alert-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-alert-announcement-primary-text, var(--vvd-color-canvas))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base{display:flex;align-items:center;padding:16px;border-radius:8px;background-color:var(--vvd-color-neutral-50);color:var(--vvd-color-canvas-text);column-gap:16px}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block:0 4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base .alert-text .headline+::slotted([slot=main i]:first-child):before,.base .alert-text .main-text+::slotted([slot=main i]:first-child):before{display:block;margin-top:8px;content:""}.base slot[name=icon]{flex-shrink:0;color:var(--_appearance-color-fill);font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start:16px}';var g=Object.defineProperty,r=(o,t,i,n)=>{for(var s=void 0,d=o.length-1,v;d>=0;d--)(v=o[d])&&(s=v(t,i,s)||s);return s&&g(t,i,s),s};const _={[l.Connotation.Accent]:"megaphone-line",[l.Connotation.Information]:"info-line",[l.Connotation.Success]:"check-circle-line",[l.Connotation.Warning]:"warning-line",[l.Connotation.Announcement]:"sparkles-line",[l.Connotation.Alert]:"error-line"};class a extends c.AffixIcon(y.Localized(e.VividElement)){constructor(){super(...arguments),this.dismissButtonAriaLabel=null,this.removable=!1,this.placement="bottom",this.timeoutms=0,this.open=!1,this.#n=t=>{this.open&&this.removable&&b.handleEscapeKeyAndStopPropogation(t)&&(this.open=!1)},this.#o=()=>{this.open?this.style.display="contents":this.style.display="none"}}#t;openChanged(t,i){if(t!==void 0)if(this.$emit(i?"open":"close"),this.#e(),i){this.style.display="contents";const n=this.shadowRoot.querySelector(".dismiss-button");this.removable&&n&&n.focus()}else this.style.display="none"}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.#n),this.controlEl=this.shadowRoot.querySelector(".control"),this.controlEl&&this.controlEl.addEventListener("transitionend",this.#o),this.#e()}disconnectedCallback(){super.disconnectedCallback(),this.#t&&clearTimeout(this.#t),this.removeEventListener("keydown",this.#n),this.controlEl&&this.controlEl.removeEventListener("transitionend",this.#o)}get conditionedIcon(){return this.icon||this.connotation&&_[this.connotation]}#e(){this.#t&&clearTimeout(this.#t),this.open&&this.timeoutms>0&&(this.#t=setTimeout(()=>this.open=!1,this.timeoutms))}#n;#o}r([e.attr({attribute:"dismiss-button-aria-label"})],a.prototype,"dismissButtonAriaLabel");r([e.attr({mode:"boolean"})],a.prototype,"removable");r([e.attr({mode:"fromView"})],a.prototype,"placement");r([e.attr],a.prototype,"headline");r([e.attr],a.prototype,"text");r([e.attr({mode:"fromView",converter:e.nullableNumberConverter})],a.prototype,"timeoutms");r([e.attr],a.prototype,"connotation");r([e.attr],a.prototype,"strategy");r([e.attr({mode:"boolean"})],a.prototype,"open");const $=({connotation:o})=>h.classNames("base",[`connotation-${o}`,!!o]),C=({open:o,placement:t,strategy:i})=>h.classNames("control",["open",o],[`placement-${t}`,!!t],[`strategy-${i}`,!!i]);function w(o,t){const i=c.affixIconTemplateFactory(o),n=t.conditionedIcon,s=!t.icon&&t.connotation?{label:t.locale.connotationAnnoncement[`${t.connotation}Icon`],announceOnUpdate:!0}:void 0;return i(n,c.IconWrapper.Slot,c.IconAriaHidden.Hidden,s)}function k(o){return e.html`
+"use strict";const p=require("../bundled/definition3.cjs"),u=require("../bundled/definition4.cjs"),e=require("../bundled/vivid-element.cjs"),f=require("../bundled/definition2.cjs"),l=require("../bundled/enums.cjs"),c=require("../bundled/affix.cjs"),b=require("../bundled/index.cjs"),y=require("../bundled/localized.cjs"),m=require("../bundled/when.cjs"),h=require("../bundled/class-names.cjs"),x='.control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline:0;margin-block:16px;margin-inline:auto;max-inline-size:var(--alert-max-inline-size, fit-content);min-inline-size:var(--alert-min-inline-size, 420px);transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block:0 auto}.control.placement-top-start,.control.placement-bottom-start{right:auto;inset-inline-end:auto;margin-inline:16px}.control.placement-top-end,.control.placement-bottom-end{inset-inline-start:auto;margin-inline:16px}.control:where(.strategy-static){position:static;margin:0;inline-size:auto}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}@media (width <= 768px){.control{min-inline-size:var(--alert-min-inline-size, auto)}}.base.connotation-success{--_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-alert-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-alert-announcement-primary-text, var(--vvd-color-canvas))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base{display:flex;align-items:center;padding:16px;border-radius:8px;background-color:var(--vvd-color-neutral-50);color:var(--vvd-color-canvas-text);column-gap:16px}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block:0 4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base .alert-text .headline+::slotted([slot=main i]:first-child):before,.base .alert-text .main-text+::slotted([slot=main i]:first-child):before{display:block;margin-top:8px;content:""}.base slot[name=icon]{flex-shrink:0;color:var(--_appearance-color-fill);font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start:16px}';var g=Object.defineProperty,r=(o,t,i,n)=>{for(var s=void 0,d=o.length-1,v;d>=0;d--)(v=o[d])&&(s=v(t,i,s)||s);return s&&g(t,i,s),s};const _={[l.Connotation.Accent]:"megaphone-line",[l.Connotation.Information]:"info-line",[l.Connotation.Success]:"check-circle-line",[l.Connotation.Warning]:"warning-line",[l.Connotation.Announcement]:"sparkles-line",[l.Connotation.Alert]:"error-line"};class a extends c.AffixIcon(y.Localized(e.VividElement)){constructor(){super(...arguments),this.dismissButtonAriaLabel=null,this.removable=!1,this.placement="bottom",this.timeoutms=0,this.open=!1,this.#n=t=>{this.open&&this.removable&&b.handleEscapeKeyAndStopPropogation(t)&&(this.open=!1)},this.#o=()=>{this.open?this.style.display="contents":this.style.display="none"}}#t;openChanged(t,i){if(t!==void 0)if(this.$emit(i?"open":"close"),this.#e(),i){this.style.display="contents";const n=this.shadowRoot.querySelector(".dismiss-button");this.removable&&n&&n.focus()}else this.style.display="none"}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.#n),this.controlEl=this.shadowRoot.querySelector(".control"),this.controlEl&&this.controlEl.addEventListener("transitionend",this.#o),this.#e()}disconnectedCallback(){super.disconnectedCallback(),this.#t&&clearTimeout(this.#t),this.removeEventListener("keydown",this.#n),this.controlEl&&this.controlEl.removeEventListener("transitionend",this.#o)}get conditionedIcon(){return this.icon||this.connotation&&_[this.connotation]}#e(){this.#t&&clearTimeout(this.#t),this.open&&this.timeoutms>0&&(this.#t=setTimeout(()=>this.open=!1,this.timeoutms))}#n;#o}r([e.attr({attribute:"dismiss-button-aria-label"})],a.prototype,"dismissButtonAriaLabel");r([e.attr({mode:"boolean"})],a.prototype,"removable");r([e.attr({mode:"fromView"})],a.prototype,"placement");r([e.attr],a.prototype,"headline");r([e.attr],a.prototype,"text");r([e.attr({mode:"fromView",converter:e.nullableNumberConverter})],a.prototype,"timeoutms");r([e.attr],a.prototype,"connotation");r([e.attr],a.prototype,"strategy");r([e.attr({mode:"boolean"})],a.prototype,"open");const $=({connotation:o})=>h.classNames("base",[`connotation-${o}`,!!o]),C=({open:o,placement:t,strategy:i})=>h.classNames("control",["open",o],[`placement-${t}`,!!t],[`strategy-${i}`,!!i]);function w(o,t){const i=c.affixIconTemplateFactory(o),n=t.conditionedIcon,s=!t.icon&&t.connotation?{label:t.locale.connotationAnnoncement[`${t.connotation}Icon`],announceOnUpdate:!0}:void 0;return i(n,c.IconWrapper.Slot,c.IconAriaHidden.Hidden,s)}function k(o){return e.html`
 		<${o}
 			aria-label="${t=>t.dismissButtonAriaLabel||t.locale.alert.dismissButtonLabel}"
 			size="condensed"

package/alert/index.js

@@ -6,8 +6,8 @@ import { C as l } from "../bundled/enums.js";
 import { b as k, a as w, I as A, c as C } from "../bundled/affix.js";
 import { h as E } from "../bundled/index.js";
 import { L as z } from "../bundled/localized.js";
-import { c as d } from "../bundled/class-names.js";
 import { w as p } from "../bundled/when.js";
+import { c as d } from "../bundled/class-names.js";
 const I = '.control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline:0;margin-block:16px;margin-inline:auto;max-inline-size:var(--alert-max-inline-size, fit-content);min-inline-size:var(--alert-min-inline-size, 420px);transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block:0 auto}.control.placement-top-start,.control.placement-bottom-start{right:auto;inset-inline-end:auto;margin-inline:16px}.control.placement-top-end,.control.placement-bottom-end{inset-inline-start:auto;margin-inline:16px}.control:where(.strategy-static){position:static;margin:0;inline-size:auto}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}@media (width <= 768px){.control{min-inline-size:var(--alert-min-inline-size, auto)}}.base.connotation-success{--_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-alert-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-alert-announcement-primary-text, var(--vvd-color-canvas))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base{display:flex;align-items:center;padding:16px;border-radius:8px;background-color:var(--vvd-color-neutral-50);color:var(--vvd-color-canvas-text);column-gap:16px}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block:0 4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base .alert-text .headline+::slotted([slot=main i]:first-child):before,.base .alert-text .main-text+::slotted([slot=main i]:first-child):before{display:block;margin-top:8px;content:""}.base slot[name=icon]{flex-shrink:0;color:var(--_appearance-color-fill);font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start:16px}';
 var B = Object.defineProperty, r = (n, t, e, o) => {
   for (var s = void 0, m = n.length - 1, v; m >= 0; m--)

package/audio-player/definition.cjs

@@ -119,15 +119,43 @@ class AudioPlayer extends localized.Localized(vividElement.VividElement) {
   }
   srcChanged() {
     if (this.src === void 0) {
-      this.#playerEl.removeAttribute("src");
+      this.setSrc("");
     } else {
-      this.#playerEl.src = this.src;
+      this.setSrc(this.src);
+    }
+  }
+  revokeSrc() {
+    const src = this.getCurrentSrc();
+    if (src && src.startsWith("blob:")) {
+      URL.revokeObjectURL(src);
     }
+  }
+  getCurrentSrc() {
+    return this.#playerEl.currentSrc || this.#playerEl.src || "";
+  }
+  canPlayType(type) {
+    return this.#playerEl.canPlayType(type) !== "";
+  }
+  setSrc(url, blob) {
+    const prevSrc = this.getCurrentSrc();
+    this.revokeSrc();
     this.#audioBuffer = void 0;
     if (this.#fetchAbortController) {
       this.#fetchAbortController.abort();
+      this.#fetchAbortController = void 0;
+    }
+    const newSrc = blob && (this.canPlayType(blob.type) || !url) ? URL.createObjectURL(blob) : url;
+    if (prevSrc) {
+      this.#playerEl.removeAttribute("src");
+    }
+    if (newSrc || url) {
+      try {
+        this.#playerEl.src = newSrc;
+      } catch (error) {
+        console.log("Falling back to original URL due to error:", error);
+        this.#playerEl.src = url;
+      }
     }
-    this.#fetchAbortController = void 0;
   }
   get playbackRate() {
     fastElement.Observable.track(this, "playbackRate");
@@ -151,13 +179,18 @@ class AudioPlayer extends localized.Localized(vividElement.VividElement) {
     const signal = this.#fetchAbortController.signal;
     try {
       const response = await fetch(this.src, { signal });
-      const arrayBuffer = await response.arrayBuffer();
+      const blob = await response.blob();
+      this.setSrc(this.src, blob);
+      const arrayBuffer = await blob.arrayBuffer();
       const audioContext = new window.AudioContext();
       const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
       audioContext.close();
       this.#audioBuffer = audioBuffer;
       fastElement.Observable.notify(this, "duration");
     } catch (e) {
+      if (e instanceof Error && e.name !== "AbortError") {
+        console.error("Error loading audio:", e);
+      }
     } finally {
       this.#fetchAbortController = void 0;
     }
@@ -344,12 +377,14 @@ function renderSlider(context) {
 }
 function renderTimestamp() {
   return fastElement.html` <div class="time-stamp">
-		<span class="current-time">${(x) => formatTime(x.currentTime)}</span>
+		<span class="current-time"
+			>${(x) => formatTime(x.currentTime || 0)}</span
+		>
 		${fastElement.when(
     (x) => x.duration && x.duration !== Infinity,
     fastElement.html`
 				<span>/</span>
-				<span class="total-time">${(x) => formatTime(x.duration)}</span>
+				<span class="total-time">${(x) => formatTime(x?.duration)}</span>
 			`
   )}
 	</div>`;

package/audio-player/definition.js

@@ -115,15 +115,43 @@ class AudioPlayer extends Localized(VividElement) {
   }
   srcChanged() {
     if (this.src === void 0) {
-      this.#playerEl.removeAttribute("src");
+      this.setSrc("");
     } else {
-      this.#playerEl.src = this.src;
+      this.setSrc(this.src);
+    }
+  }
+  revokeSrc() {
+    const src = this.getCurrentSrc();
+    if (src && src.startsWith("blob:")) {
+      URL.revokeObjectURL(src);
     }
+  }
+  getCurrentSrc() {
+    return this.#playerEl.currentSrc || this.#playerEl.src || "";
+  }
+  canPlayType(type) {
+    return this.#playerEl.canPlayType(type) !== "";
+  }
+  setSrc(url, blob) {
+    const prevSrc = this.getCurrentSrc();
+    this.revokeSrc();
     this.#audioBuffer = void 0;
     if (this.#fetchAbortController) {
       this.#fetchAbortController.abort();
+      this.#fetchAbortController = void 0;
+    }
+    const newSrc = blob && (this.canPlayType(blob.type) || !url) ? URL.createObjectURL(blob) : url;
+    if (prevSrc) {
+      this.#playerEl.removeAttribute("src");
+    }
+    if (newSrc || url) {
+      try {
+        this.#playerEl.src = newSrc;
+      } catch (error) {
+        console.log("Falling back to original URL due to error:", error);
+        this.#playerEl.src = url;
+      }
     }
-    this.#fetchAbortController = void 0;
   }
   get playbackRate() {
     Observable.track(this, "playbackRate");
@@ -147,13 +175,18 @@ class AudioPlayer extends Localized(VividElement) {
     const signal = this.#fetchAbortController.signal;
     try {
       const response = await fetch(this.src, { signal });
-      const arrayBuffer = await response.arrayBuffer();
+      const blob = await response.blob();
+      this.setSrc(this.src, blob);
+      const arrayBuffer = await blob.arrayBuffer();
       const audioContext = new window.AudioContext();
       const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
       audioContext.close();
       this.#audioBuffer = audioBuffer;
       Observable.notify(this, "duration");
     } catch (e) {
+      if (e instanceof Error && e.name !== "AbortError") {
+        console.error("Error loading audio:", e);
+      }
     } finally {
       this.#fetchAbortController = void 0;
     }
@@ -340,12 +373,14 @@ function renderSlider(context) {
 }
 function renderTimestamp() {
   return html` <div class="time-stamp">
-		<span class="current-time">${(x) => formatTime(x.currentTime)}</span>
+		<span class="current-time"
+			>${(x) => formatTime(x.currentTime || 0)}</span
+		>
 		${when(
     (x) => x.duration && x.duration !== Infinity,
     html`
 				<span>/</span>
-				<span class="total-time">${(x) => formatTime(x.duration)}</span>
+				<span class="total-time">${(x) => formatTime(x?.duration)}</span>
 			`
   )}
 	</div>`;

package/audio-player/index.cjs

@@ -1,52 +1,54 @@
-"use strict";const u=require("../bundled/definition3.cjs"),h=require("../bundled/definition5.cjs"),y=require("../bundled/definition6.cjs"),s=require("../bundled/vivid-element.cjs"),m=require("../bundled/definition7.cjs"),l=require("../bundled/enums.cjs"),f=require("../bundled/localized.cjs"),g=require("../bundled/playbackRates.cjs"),v=require("../bundled/repeat.cjs"),B=require("../bundled/class-names.cjs"),c=require("../bundled/when.cjs"),$=':host{display:block}.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:8px;inline-size:100%;user-select:none}.base.disabled{color:var(--vvd-color-neutral-300)}.base .slider{flex:1;grid-area:slider}.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-button{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 w=Object.defineProperty,o=(a,e,t,n)=>{for(var i=void 0,d=a.length-1,b;d>=0;d--)(b=a[d])&&(i=b(e,t,i)||i);return i&&w(e,t,i),i};const k={FORWARD:1,BACKWARD:-1};function p(a){if(!a||Number.isNaN(a))return"0:00";const e=Math.floor(a/60),t=Math.floor(a%60);return e+":"+(t<10?"0"+t:t)}const A=!0,T=!1,L={toView(a){return a},fromView(a){return Object.values(l.MediaSkipBy).includes(a)?a:void 0}};class r extends f.Localized(s.VividElement){constructor(){super(),this.playButtonAriaLabel=null,this.pauseButtonAriaLabel=null,this.sliderAriaLabel=null,this.skipForwardButtonAriaLabel=null,this.skipBackwardButtonAriaLabel=null,this.disabled=!1,this.notime=!1,this.playbackRates=null,this.#t=new Audio,this.#n=!1,this.durationFallback=!1,this.#l=e=>{if(e===this.paused){this.#o();return}this.paused?(this.#s(),this.#t.play()):this.#t.pause(),this.#o()},this.#s=()=>{s.Observable.notify(this,"currentTime");const e=this.duration,t=this.currentTime,n=Number.isFinite(e)&&e>0&&Number.isFinite(t)&&t>=0,i=n?t/e*100:0;this.#e&&(this.#n=!0,this.#e.value=i.toString(),this.#n=!1),n&&i===100&&this.pause()},this.#r=()=>{s.Observable.notify(this,"duration"),(!Number.isFinite(this.#t.duration)||this.#t.duration<=0)&&this.durationFallback&&this.#p()},this.#u=()=>{!this.paused&&this.#e.isDragging&&(this.pause(),this.#c=window.setInterval(()=>{this.#e.isDragging||(clearInterval(this.#c),this.play())},0)),!this.#n&&this.#t&&(this.currentTime=this.duration*Number(this.#e.value)/100)},this.#o=()=>{s.Observable.notify(this,"paused")}}srcChanged(){this.src===void 0?this.#t.removeAttribute("src"):this.#t.src=this.src,this.#a=void 0,this.#i&&this.#i.abort(),this.#i=void 0}get playbackRate(){return s.Observable.track(this,"playbackRate"),this.#t.playbackRate}set playbackRate(e){this.#t.playbackRate=e,s.Observable.notify(this,"playbackRate")}get paused(){return s.Observable.track(this,"paused"),this.#t.paused}set paused(e){}#a;#i;async#p(){if(this.#a||!this.src)return;this.#i=new AbortController;const e=this.#i.signal;try{const n=await(await fetch(this.src,{signal:e})).arrayBuffer(),i=new window.AudioContext,d=await i.decodeAudioData(n);i.close(),this.#a=d,s.Observable.notify(this,"duration")}catch{}finally{this.#i=void 0}}get duration(){s.Observable.track(this,"duration");const e=this.#t.duration;return Number.isFinite(e)&&e>0?e:this.#a&&this.#a.duration>0?this.#a.duration:e}set duration(e){}get currentTime(){return s.Observable.track(this,"currentTime"),this.#t.currentTime}set currentTime(e){this.#t.currentTime=e}get#e(){return this.shadowRoot.querySelector(".slider")}#t;#n;connectedCallback(){super.connectedCallback(),this.#t.addEventListener("timeupdate",this.#s),this.#t.addEventListener("loadedmetadata",this.#r),this.#t.addEventListener("durationchange",this.#r),this.#d(),this.#o(),this.#s()}disconnectedCallback(){super.disconnectedCallback(),this.#d(!1),this.pause(),this.#t.removeEventListener("timeupdate",this.#s),this.#t.removeEventListener("loadedmetadata",this.#r),this.#t.removeEventListener("durationchange",this.#r)}play(){this.#l(T)}pause(){this.#l(A)}#d(e=!0){const t=e?"addEventListener":"removeEventListener";this.#e&&this.#e[t]("change",this.#u)}#l;#s;#r;#c;#u;#o;skip(e){const t=this.currentTime,n=parseInt(this.skipBy)*e,i=t+n;this.currentTime=Math.max(0,Math.min(this.duration,i))}}o([s.attr({attribute:"play-button-aria-label"})],r.prototype,"playButtonAriaLabel");o([s.attr({attribute:"pause-button-aria-label"})],r.prototype,"pauseButtonAriaLabel");o([s.attr({attribute:"slider-aria-label"})],r.prototype,"sliderAriaLabel");o([s.attr({attribute:"skip-forward-aria-label"})],r.prototype,"skipForwardButtonAriaLabel");o([s.attr({attribute:"skip-backward-aria-label"})],r.prototype,"skipBackwardButtonAriaLabel");o([s.attr],r.prototype,"connotation");o([s.attr],r.prototype,"src");o([s.attr({mode:"boolean"})],r.prototype,"disabled");o([s.attr({mode:"boolean"})],r.prototype,"notime");o([s.attr({attribute:"skip-by",converter:L})],r.prototype,"skipBy");o([s.attr({attribute:"playback-rates"})],r.prototype,"playbackRates");o([s.attr({mode:"boolean",attribute:"duration-fallback"})],r.prototype,"durationFallback");const F=({notime:a,disabled:e,duration:t,skipBy:n,playbackRates:i})=>B.classNames(["disabled",!!e||!t],["two-lines",!a&&(!!Number(n)||!!i)],["playback",!!i]),R=(a,{parent:e})=>a===e.playbackRate;function C(a){const e=a.tagFor(u.Button);return s.html`<${e} class="pause" @click="${t=>t.paused?t.play():t.pause()}"
+"use strict";const u=require("../bundled/definition3.cjs"),h=require("../bundled/definition5.cjs"),y=require("../bundled/definition6.cjs"),r=require("../bundled/vivid-element.cjs"),m=require("../bundled/definition7.cjs"),c=require("../bundled/enums.cjs"),f=require("../bundled/localized.cjs"),g=require("../bundled/playbackRates.cjs"),d=require("../bundled/when.cjs"),v=require("../bundled/repeat.cjs"),B=require("../bundled/class-names.cjs"),$=':host{display:block}.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:8px;inline-size:100%;user-select:none}.base.disabled{color:var(--vvd-color-neutral-300)}.base .slider{flex:1;grid-area:slider}.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-button{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 w=Object.defineProperty,o=(i,e,t,s)=>{for(var a=void 0,l=i.length-1,p;l>=0;l--)(p=i[l])&&(a=p(e,t,a)||a);return a&&w(e,t,a),a};const k={FORWARD:1,BACKWARD:-1};function b(i){if(!i||Number.isNaN(i))return"0:00";const e=Math.floor(i/60),t=Math.floor(i%60);return e+":"+(t<10?"0"+t:t)}const A=!0,L=!1,T={toView(i){return i},fromView(i){return Object.values(c.MediaSkipBy).includes(i)?i:void 0}};class n extends f.Localized(r.VividElement){constructor(){super(),this.playButtonAriaLabel=null,this.pauseButtonAriaLabel=null,this.sliderAriaLabel=null,this.skipForwardButtonAriaLabel=null,this.skipBackwardButtonAriaLabel=null,this.disabled=!1,this.notime=!1,this.playbackRates=null,this.#t=new Audio,this.#n=!1,this.durationFallback=!1,this.#l=e=>{if(e===this.paused){this.#o();return}this.paused?(this.#r(),this.#t.play()):this.#t.pause(),this.#o()},this.#r=()=>{r.Observable.notify(this,"currentTime");const e=this.duration,t=this.currentTime,s=Number.isFinite(e)&&e>0&&Number.isFinite(t)&&t>=0,a=s?t/e*100:0;this.#e&&(this.#n=!0,this.#e.value=a.toString(),this.#n=!1),s&&a===100&&this.pause()},this.#s=()=>{r.Observable.notify(this,"duration"),(!Number.isFinite(this.#t.duration)||this.#t.duration<=0)&&this.durationFallback&&this.#p()},this.#u=()=>{!this.paused&&this.#e.isDragging&&(this.pause(),this.#d=window.setInterval(()=>{this.#e.isDragging||(clearInterval(this.#d),this.play())},0)),!this.#n&&this.#t&&(this.currentTime=this.duration*Number(this.#e.value)/100)},this.#o=()=>{r.Observable.notify(this,"paused")}}srcChanged(){this.src===void 0?this.setSrc(""):this.setSrc(this.src)}revokeSrc(){const e=this.getCurrentSrc();e&&e.startsWith("blob:")&&URL.revokeObjectURL(e)}getCurrentSrc(){return this.#t.currentSrc||this.#t.src||""}canPlayType(e){return this.#t.canPlayType(e)!==""}setSrc(e,t){const s=this.getCurrentSrc();this.revokeSrc(),this.#i=void 0,this.#a&&(this.#a.abort(),this.#a=void 0);const a=t&&(this.canPlayType(t.type)||!e)?URL.createObjectURL(t):e;if(s&&this.#t.removeAttribute("src"),a||e)try{this.#t.src=a}catch(l){console.log("Falling back to original URL due to error:",l),this.#t.src=e}}get playbackRate(){return r.Observable.track(this,"playbackRate"),this.#t.playbackRate}set playbackRate(e){this.#t.playbackRate=e,r.Observable.notify(this,"playbackRate")}get paused(){return r.Observable.track(this,"paused"),this.#t.paused}set paused(e){}#i;#a;async#p(){if(this.#i||!this.src)return;this.#a=new AbortController;const e=this.#a.signal;try{const s=await(await fetch(this.src,{signal:e})).blob();this.setSrc(this.src,s);const a=await s.arrayBuffer(),l=new window.AudioContext,p=await l.decodeAudioData(a);l.close(),this.#i=p,r.Observable.notify(this,"duration")}catch(t){t instanceof Error&&t.name!=="AbortError"&&console.error("Error loading audio:",t)}finally{this.#a=void 0}}get duration(){r.Observable.track(this,"duration");const e=this.#t.duration;return Number.isFinite(e)&&e>0?e:this.#i&&this.#i.duration>0?this.#i.duration:e}set duration(e){}get currentTime(){return r.Observable.track(this,"currentTime"),this.#t.currentTime}set currentTime(e){this.#t.currentTime=e}get#e(){return this.shadowRoot.querySelector(".slider")}#t;#n;connectedCallback(){super.connectedCallback(),this.#t.addEventListener("timeupdate",this.#r),this.#t.addEventListener("loadedmetadata",this.#s),this.#t.addEventListener("durationchange",this.#s),this.#c(),this.#o(),this.#r()}disconnectedCallback(){super.disconnectedCallback(),this.#c(!1),this.pause(),this.#t.removeEventListener("timeupdate",this.#r),this.#t.removeEventListener("loadedmetadata",this.#s),this.#t.removeEventListener("durationchange",this.#s)}play(){this.#l(L)}pause(){this.#l(A)}#c(e=!0){const t=e?"addEventListener":"removeEventListener";this.#e&&this.#e[t]("change",this.#u)}#l;#r;#s;#d;#u;#o;skip(e){const t=this.currentTime,s=parseInt(this.skipBy)*e,a=t+s;this.currentTime=Math.max(0,Math.min(this.duration,a))}}o([r.attr({attribute:"play-button-aria-label"})],n.prototype,"playButtonAriaLabel");o([r.attr({attribute:"pause-button-aria-label"})],n.prototype,"pauseButtonAriaLabel");o([r.attr({attribute:"slider-aria-label"})],n.prototype,"sliderAriaLabel");o([r.attr({attribute:"skip-forward-aria-label"})],n.prototype,"skipForwardButtonAriaLabel");o([r.attr({attribute:"skip-backward-aria-label"})],n.prototype,"skipBackwardButtonAriaLabel");o([r.attr],n.prototype,"connotation");o([r.attr],n.prototype,"src");o([r.attr({mode:"boolean"})],n.prototype,"disabled");o([r.attr({mode:"boolean"})],n.prototype,"notime");o([r.attr({attribute:"skip-by",converter:T})],n.prototype,"skipBy");o([r.attr({attribute:"playback-rates"})],n.prototype,"playbackRates");o([r.attr({mode:"boolean",attribute:"duration-fallback"})],n.prototype,"durationFallback");const S=({notime:i,disabled:e,duration:t,skipBy:s,playbackRates:a})=>B.classNames(["disabled",!!e||!t],["two-lines",!i&&(!!Number(s)||!!a)],["playback",!!a]),R=(i,{parent:e})=>i===e.playbackRate;function C(i){const e=i.tagFor(u.Button);return r.html`<${e} class="pause" @click="${t=>t.paused?t.play():t.pause()}"
 	icon="${t=>t.paused?"play-solid":"pause-solid"}"
 	aria-label="${t=>t.paused?t.playButtonAriaLabel||t.locale.audioPlayer.playButtonLabel:t.pauseButtonAriaLabel||t.locale.audioPlayer.pauseButtonLabel}"
 	size='condensed'
 	connotation="${t=>t.connotation}"
 	?disabled="${t=>t.disabled||!t.duration}"
-  ></${e}>`}function S(a){const e=a.tagFor(u.Button);return s.html`
+  ></${e}>`}function F(i){const e=i.tagFor(u.Button);return r.html`
 		<${e} class="skip backward"
 			@click="${t=>t.skip(k.BACKWARD)}"
-		icon="${t=>t.skipBy==l.MediaSkipBy.Five?"5-sec-backward-line":t.skipBy==l.MediaSkipBy.Thirty?"30-sec-backward-line":"10-sec-backward-line"}"
+		icon="${t=>t.skipBy==c.MediaSkipBy.Five?"5-sec-backward-line":t.skipBy==c.MediaSkipBy.Thirty?"30-sec-backward-line":"10-sec-backward-line"}"
 		size='condensed'
 		aria-label="${t=>t.skipBackwardButtonAriaLabel||t.locale.audioPlayer.skipBackwardButton}"
 		connotation="${t=>t.connotation}"
 		?disabled="${t=>t.disabled||!t.duration}"
 		></${e}>
-	`}function P(a){const e=a.tagFor(u.Button);return s.html`
+	`}function P(i){const e=i.tagFor(u.Button);return r.html`
 		<${e} class="skip forward"
 		@click="${t=>t.skip(k.FORWARD)}"
-		icon="${t=>t.skipBy==l.MediaSkipBy.Five?"5-sec-forward-line":t.skipBy==l.MediaSkipBy.Thirty?"30-sec-forward-line":"10-sec-forward-line"}"
+		icon="${t=>t.skipBy==c.MediaSkipBy.Five?"5-sec-forward-line":t.skipBy==c.MediaSkipBy.Thirty?"30-sec-forward-line":"10-sec-forward-line"}"
 		size='condensed'
 		aria-label="${t=>t.skipForwardButtonAriaLabel||t.locale.audioPlayer.skipForwardButton}"
 		connotation="${t=>t.connotation}"
 		?disabled="${t=>t.disabled||!t.duration}"
 		></${e}>
-	`}function O(a){const e=a.tagFor(h.Slider);return s.html`
+	`}function E(i){const e=i.tagFor(h.Slider);return r.html`
 	<${e}
 		class="slider"
 		aria-label="${t=>t.sliderAriaLabel||t.locale.audioPlayer.sliderLabel}"
 		max="100"
-		aria-valuetext="${t=>p(t.currentTime)}"
+		aria-valuetext="${t=>b(t.currentTime)}"
 		connotation="${t=>t.connotation}"
 		?disabled="${t=>t.disabled||!t.duration}"
 		internal-part>
-	</${e}>`}function E(){return s.html` <div class="time-stamp">
-		<span class="current-time">${a=>p(a.currentTime)}</span>
-		${c.when(a=>a.duration&&a.duration!==1/0,s.html`
+	</${e}>`}function O(){return r.html` <div class="time-stamp">
+		<span class="current-time"
+			>${i=>b(i.currentTime||0)}</span
+		>
+		${d.when(i=>i.duration&&i.duration!==1/0,r.html`
 				<span>/</span>
-				<span class="total-time">${a=>p(a.duration)}</span>
+				<span class="total-time">${i=>b(i?.duration)}</span>
 			`)}
-	</div>`}function M(a,e){return e.parent.playbackRate=a,!0}const z=a=>{const e=a.tagFor(y.Menu),t=a.tagFor(u.Button),n=a.tagFor(m.MenuItem);return s.html` <div class="wrapper">
-		<div class="base ${F}">
+	</div>`}function M(i,e){return e.parent.playbackRate=i,!0}const z=i=>{const e=i.tagFor(y.Menu),t=i.tagFor(u.Button),s=i.tagFor(m.MenuItem);return r.html` <div class="wrapper">
+		<div class="base ${S}">
 			<div class="controls">
-				${c.when(i=>i.skipBy&&i.skipBy!=l.MediaSkipBy.Zero,S(a))}
-				${C(a)}
-				${c.when(i=>i.skipBy&&i.skipBy!=l.MediaSkipBy.Zero,P(a))}
-				${c.when(i=>!i.notime,E())}
+				${d.when(a=>a.skipBy&&a.skipBy!=c.MediaSkipBy.Zero,F(i))}
+				${C(i)}
+				${d.when(a=>a.skipBy&&a.skipBy!=c.MediaSkipBy.Zero,P(i))}
+				${d.when(a=>!a.notime,O())}
 			</div>
-			${O(a)}
-			${c.when(i=>!!i.playbackRates,s.html`
+			${E(i)}
+			${d.when(a=>!!a.playbackRates,r.html`
 			<${e} class="playback-rates" placement="top-start" auto-dismiss id="playback-menu" position-strategy="absolute">
 				<${t} id="playback-open-button"
 							  class="playback-button"
@@ -54,16 +56,16 @@
 							  icon="playback-speed-line"
 							  aria-label="play back rates"
 							  size='condensed'
-							  connotation="${i=>i.connotation}"
-							  ?disabled="${i=>i.disabled||!i.duration}"
+							  connotation="${a=>a.connotation}"
+							  ?disabled="${a=>a.disabled||!a.duration}"
 				></${t}>
 
-				${v.repeat(i=>g.getPlaybackRatesArray(i.playbackRates),s.html`<${n} @click="${M}"
+				${v.repeat(a=>g.getPlaybackRatesArray(a.playbackRates),r.html`<${s} @click="${M}"
 																			 control-type="radio"
 																			 class="playback-rate"
-																			 text="${i=>i}"
+																			 text="${a=>a}"
 																			 check-appearance="tick-only"
-																			 ?checked="${R}"></${n}>`)}
+																			 ?checked="${R}"></${s}>`)}
 			</${e}>`)}
 		</div>
-	</div>`},D=s.defineVividComponent("audio-player",r,z,[u.buttonDefinition,h.sliderDefinition,y.menuDefinition,m.menuItemDefinition],{styles:$}),I=s.createRegisterFunction(D);I();
+	</div>`},D=r.defineVividComponent("audio-player",n,z,[u.buttonDefinition,h.sliderDefinition,y.menuDefinition,m.menuItemDefinition],{styles:$}),I=r.createRegisterFunction(D);I();