@vonage/vivid 5.1.0 → 5.2.0

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;
     }

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;
     }

package/audio-player/index.cjs

@@ -1,52 +1,52 @@
-"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"),v=require("../bundled/repeat.cjs"),B=require("../bundled/class-names.cjs"),d=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=(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)}</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 +54,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();

package/audio-player/index.js

@@ -1,62 +1,83 @@
 import { B as b, b as f } from "../bundled/definition3.js";
 import { S as k, s as g } from "../bundled/definition5.js";
 import { M as v, m as B } from "../bundled/definition6.js";
-import { V as $, O as l, a as n, h as d, c as w, d as A } from "../bundled/vivid-element.js";
-import { M as T, m as L } from "../bundled/definition7.js";
-import { M as c } from "../bundled/enums.js";
-import { L as F } from "../bundled/localized.js";
-import { g as C } from "../bundled/playbackRates.js";
-import { r as R } from "../bundled/repeat.js";
-import { c as P } from "../bundled/class-names.js";
+import { V as $, O as l, a as n, h as c, c as w, d as A } from "../bundled/vivid-element.js";
+import { M as L, m as T } from "../bundled/definition7.js";
+import { M as u } from "../bundled/enums.js";
+import { L as S } from "../bundled/localized.js";
+import { g as R } from "../bundled/playbackRates.js";
+import { r as C } from "../bundled/repeat.js";
+import { c as F } from "../bundled/class-names.js";
 import { w as p } from "../bundled/when.js";
-const S = ':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 D = Object.defineProperty, o = (a, e, t, r) => {
-  for (var i = void 0, u = a.length - 1, m; u >= 0; u--)
-    (m = a[u]) && (i = m(e, t, i) || i);
-  return i && D(e, t, i), i;
+const P = ':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 E = Object.defineProperty, o = (a, e, t, r) => {
+  for (var i = void 0, d = a.length - 1, h; d >= 0; d--)
+    (h = a[d]) && (i = h(e, t, i) || i);
+  return i && E(e, t, i), i;
 };
 const y = {
   FORWARD: 1,
   BACKWARD: -1
 };
-function h(a) {
+function m(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 E = !0, I = !1, z = {
+const D = !0, I = !1, z = {
   toView(a) {
     return a;
   },
   fromView(a) {
-    return Object.values(c).includes(a) ? a : void 0;
+    return Object.values(u).includes(a) ? a : void 0;
   }
 };
-class s extends F($) {
+class s extends S($) {
   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 = () => {
+      this.paused ? (this.#r(), this.#t.play()) : this.#t.pause(), this.#o();
+    }, this.#r = () => {
       l.notify(this, "currentTime");
       const e = this.duration, t = this.currentTime, r = Number.isFinite(e) && e > 0 && Number.isFinite(t) && t >= 0, i = r ? t / e * 100 : 0;
       this.#e && (this.#n = !0, this.#e.value = i.toString(), this.#n = !1), r && i === 100 && this.pause();
-    }, this.#r = () => {
+    }, this.#s = () => {
       l.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());
+      !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 = () => {
       l.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;
+    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 r = this.getCurrentSrc();
+    this.revokeSrc(), this.#a = void 0, this.#i && (this.#i.abort(), this.#i = void 0);
+    const i = t && (this.canPlayType(t.type) || !e) ? URL.createObjectURL(t) : e;
+    if (r && this.#t.removeAttribute("src"), i || e)
+      try {
+        this.#t.src = i;
+      } catch (d) {
+        console.log("Falling back to original URL due to error:", d), this.#t.src = e;
+      }
   }
   get playbackRate() {
     return l.track(this, "playbackRate"), this.#t.playbackRate;
@@ -76,9 +97,12 @@ class s extends F($) {
     this.#i = new AbortController();
     const e = this.#i.signal;
     try {
-      const r = await (await fetch(this.src, { signal: e })).arrayBuffer(), i = new window.AudioContext(), u = await i.decodeAudioData(r);
-      i.close(), this.#a = u, l.notify(this, "duration");
-    } catch {
+      const r = await (await fetch(this.src, { signal: e })).blob();
+      this.setSrc(this.src, r);
+      const i = await r.arrayBuffer(), d = new window.AudioContext(), h = await d.decodeAudioData(i);
+      d.close(), this.#a = h, l.notify(this, "duration");
+    } catch (t) {
+      t instanceof Error && t.name !== "AbortError" && console.error("Error loading audio:", t);
     } finally {
       this.#i = void 0;
     }
@@ -102,25 +126,25 @@ class s extends F($) {
   #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();
+    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.#d(!1), this.pause(), this.#t.removeEventListener("timeupdate", this.#s), this.#t.removeEventListener("loadedmetadata", this.#r), this.#t.removeEventListener("durationchange", this.#r);
+    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(I);
   }
   pause() {
-    this.#l(E);
+    this.#l(D);
   }
-  #d(e = !0) {
+  #c(e = !0) {
     const t = e ? "addEventListener" : "removeEventListener";
     this.#e && this.#e[t]("change", this.#u);
   }
   #l;
-  #s;
   #r;
-  #c;
+  #s;
+  #d;
   #u;
   #o;
   /**
@@ -180,7 +204,7 @@ const M = ({
   duration: t,
   skipBy: r,
   playbackRates: i
-}) => P(
+}) => F(
   ["disabled", !!e || !t],
   [
     "two-lines",
@@ -190,7 +214,7 @@ const M = ({
 ), N = (a, { parent: e }) => a === e.playbackRate;
 function O(a) {
   const e = a.tagFor(b);
-  return d`<${e} class="pause" @click="${(t) => t.paused ? t.play() : t.pause()}"
+  return c`<${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'
@@ -198,12 +222,12 @@ function O(a) {
 	?disabled="${(t) => t.disabled || !t.duration}"
   ></${e}>`;
 }
-function V(a) {
+function U(a) {
   const e = a.tagFor(b);
-  return d`
+  return c`
 		<${e} class="skip backward"
 			@click="${(t) => t.skip(y.BACKWARD)}"
-		icon="${(t) => t.skipBy == c.Five ? "5-sec-backward-line" : t.skipBy == c.Thirty ? "30-sec-backward-line" : "10-sec-backward-line"}"
+		icon="${(t) => t.skipBy == u.Five ? "5-sec-backward-line" : t.skipBy == u.Thirty ? "30-sec-backward-line" : "10-sec-backward-line"}"
 		size='condensed'
 		aria-label="${(t) => t.skipBackwardButtonAriaLabel || t.locale.audioPlayer.skipBackwardButton}"
 		connotation="${(t) => t.connotation}"
@@ -211,12 +235,12 @@ function V(a) {
 		></${e}>
 	`;
 }
-function _(a) {
+function V(a) {
   const e = a.tagFor(b);
-  return d`
+  return c`
 		<${e} class="skip forward"
 		@click="${(t) => t.skip(y.FORWARD)}"
-		icon="${(t) => t.skipBy == c.Five ? "5-sec-forward-line" : t.skipBy == c.Thirty ? "30-sec-forward-line" : "10-sec-forward-line"}"
+		icon="${(t) => t.skipBy == u.Five ? "5-sec-forward-line" : t.skipBy == u.Thirty ? "30-sec-forward-line" : "10-sec-forward-line"}"
 		size='condensed'
 		aria-label="${(t) => t.skipForwardButtonAriaLabel || t.locale.audioPlayer.skipForwardButton}"
 		connotation="${(t) => t.connotation}"
@@ -224,54 +248,54 @@ function _(a) {
 		></${e}>
 	`;
 }
-function W(a) {
+function _(a) {
   const e = a.tagFor(k);
-  return d`
+  return c`
 	<${e}
 		class="slider"
 		aria-label="${(t) => t.sliderAriaLabel || t.locale.audioPlayer.sliderLabel}"
 		max="100"
-		aria-valuetext="${(t) => h(t.currentTime)}"
+		aria-valuetext="${(t) => m(t.currentTime)}"
 		connotation="${(t) => t.connotation}"
 		?disabled="${(t) => t.disabled || !t.duration}"
 		internal-part>
 	</${e}>`;
 }
 function j() {
-  return d` <div class="time-stamp">
-		<span class="current-time">${(a) => h(a.currentTime)}</span>
+  return c` <div class="time-stamp">
+		<span class="current-time">${(a) => m(a.currentTime)}</span>
 		${p(
     (a) => a.duration && a.duration !== 1 / 0,
-    d`
+    c`
 				<span>/</span>
-				<span class="total-time">${(a) => h(a.duration)}</span>
+				<span class="total-time">${(a) => m(a.duration)}</span>
 			`
   )}
 	</div>`;
 }
-function K(a, e) {
+function W(a, e) {
   return e.parent.playbackRate = a, !0;
 }
-const U = (a) => {
-  const e = a.tagFor(v), t = a.tagFor(b), r = a.tagFor(T);
-  return d` <div class="wrapper">
+const K = (a) => {
+  const e = a.tagFor(v), t = a.tagFor(b), r = a.tagFor(L);
+  return c` <div class="wrapper">
 		<div class="base ${M}">
 			<div class="controls">
 				${p(
-    (i) => i.skipBy && i.skipBy != c.Zero,
-    V(a)
+    (i) => i.skipBy && i.skipBy != u.Zero,
+    U(a)
   )}
 				${O(a)}
 				${p(
-    (i) => i.skipBy && i.skipBy != c.Zero,
-    _(a)
+    (i) => i.skipBy && i.skipBy != u.Zero,
+    V(a)
   )}
 				${p((i) => !i.notime, j())}
 			</div>
-			${W(a)}
+			${_(a)}
 			${p(
     (i) => !!i.playbackRates,
-    d`
+    c`
 			<${e} class="playback-rates" placement="top-start" auto-dismiss id="playback-menu" position-strategy="absolute">
 				<${t} id="playback-open-button"
 							  class="playback-button"
@@ -283,9 +307,9 @@ const U = (a) => {
 							  ?disabled="${(i) => i.disabled || !i.duration}"
 				></${t}>
 
-				${R(
-      (i) => C(i.playbackRates),
-      d`<${r} @click="${K}"
+				${C(
+      (i) => R(i.playbackRates),
+      c`<${r} @click="${W}"
 																			 control-type="radio"
 																			 class="playback-rate"
 																			 text="${(i) => i}"
@@ -299,10 +323,10 @@ const U = (a) => {
 }, Z = A(
   "audio-player",
   s,
-  U,
-  [f, g, B, L],
+  K,
+  [f, g, B, T],
   {
-    styles: S
+    styles: P
   }
 ), q = w(
   Z

package/bundled/definition13.cjs

@@ -1,9 +1,9 @@
-"use strict";const T=require("./definition2.cjs"),t=require("./vivid-element.cjs"),d=require("./mixins.cjs"),_=require("./definition12.cjs"),q=require("./definition11.cjs"),x=require("./delegates-aria.cjs"),k=require("./form-associated.cjs"),E=require("./with-contextual-help.cjs"),M=require("./char-count.cjs"),H=require("./with-error-text.cjs"),F=require("./with-success-text.cjs"),L=require("./form-element.cjs"),v=require("./affix.cjs"),w=require("./text-field.cjs"),D=require("./class-names.cjs"),m=require("./when.cjs"),c=require("./slotted.cjs"),S=require("./ref.cjs");var N=Object.defineProperty,i=(n,a,e,h)=>{for(var l=void 0,s=n.length-1,r;s>=0;s--)(r=n[s])&&(l=r(a,e,l)||l);return l&&N(a,e,l),l};const O={text:"text"},A="_vvd-3-text-field-safari-workaround",y=t.ElementStyles.create([`
+"use strict";const T=require("./definition2.cjs"),t=require("./vivid-element.cjs"),d=require("./mixins.cjs"),_=require("./definition12.cjs"),q=require("./definition11.cjs"),x=require("./delegates-aria.cjs"),k=require("./form-associated.cjs"),E=require("./char-count.cjs"),M=require("./with-contextual-help.cjs"),H=require("./with-error-text.cjs"),F=require("./with-success-text.cjs"),L=require("./form-element.cjs"),v=require("./affix.cjs"),w=require("./text-field.cjs"),D=require("./class-names.cjs"),m=require("./when.cjs"),c=require("./slotted.cjs"),S=require("./ref.cjs");var N=Object.defineProperty,i=(n,a,e,h)=>{for(var l=void 0,s=n.length-1,r;s>=0;s--)(r=n[s])&&(l=r(a,e,l)||l);return l&&N(a,e,l),l};const O={text:"text"},A="_vvd-3-text-field-safari-workaround",y=t.ElementStyles.create([`
 	.${A}::placeholder {
 		opacity: 1 !important;
 		-webkit-text-fill-color: var(--_low-ink-color) !important;
 	}
-`]),B=n=>{const a=n.getRootNode();y.isAttachedTo(a)||y.addStylesTo(a)};class o extends E.WithContextualHelp(d.WithLightDOMFeedback(M.WithCharCount(H.WithErrorText(F.WithSuccessText(L.FormElement(v.AffixIcon(x.DelegatesAria(k.FormAssociated(t.VividElement))))))))){constructor(){super(...arguments),this.proxy=document.createElement("input"),this.type=O.text,this.#e=d.generateRandomId()}readOnlyChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly,this.validate())}autofocusChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.autofocus=this.autofocus,this.validate())}placeholderChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.placeholder=this.placeholder)}typeChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.type=this.type,this.validate())}listChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.setAttribute("list",this.list),this.validate())}maxlengthChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.maxLength=this.maxlength,this.validate())}minlengthChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.minLength=this.minlength,this.validate())}patternChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.pattern=this.pattern,this.validate())}sizeChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.size=this.size)}spellcheckChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.spellcheck=this.spellcheck)}valueChanged(a,e){super.valueChanged(a,e),this._updateControlValueIfNeeded(),this.charCount&&this.maxlength&&this._updateCharCountRemaining()}_updateControlValueIfNeeded(){this.control&&this.control.value!==this.value&&(this.control.value=this.value)}select(){this.control.select()}handleTextInput(){this.value=this.control.value}handleChange(){this.$emit("change")}validate(){super.validate(this.control)}connectedCallback(){super.connectedCallback(),this.proxy.setAttribute("type",this.type),this.validate(),this.autofocus&&t.DOM.queueUpdate(()=>{this.focus()}),this._updateControlValueIfNeeded(),B(this),this._renderCharCountRemaining()}focus(){this.control?.focus()}#e;get _uniqueId(){return this.id||this.#e}}i([t.attr({attribute:"readonly",mode:"boolean"})],o.prototype,"readOnly");i([t.attr({mode:"boolean"})],o.prototype,"autofocus");i([t.attr],o.prototype,"placeholder");i([t.attr],o.prototype,"type");i([t.attr],o.prototype,"list");i([t.attr({converter:t.nullableNumberConverter})],o.prototype,"maxlength");i([t.attr({converter:t.nullableNumberConverter})],o.prototype,"minlength");i([t.attr],o.prototype,"pattern");i([t.attr({converter:t.nullableNumberConverter})],o.prototype,"size");i([t.attr({mode:"boolean"})],o.prototype,"spellcheck");i([t.attr],o.prototype,"appearance");i([t.attr],o.prototype,"shape");i([t.attr],o.prototype,"autoComplete");i([t.attr()],o.prototype,"scale");i([t.attr({attribute:"inputmode"})],o.prototype,"inputMode");i([t.observable],o.prototype,"actionItemsSlottedContent");i([t.observable],o.prototype,"leadingActionItemsSlottedContent");const g=n=>`vvd-text-field-control-${n}`,W=({errorValidationMessage:n,disabled:a,value:e,readOnly:h,placeholder:l,appearance:s,shape:r,label:C,successText:$,actionItemsSlottedContent:I,leadingActionItemsSlottedContent:p,icon:u,scale:f})=>D.classNames(["error",!!n],["disabled",a],["has-value",!!e],["readonly",h],["placeholder",!!l],[`appearance-${s}`,!!s],[`shape-${r}`,!!r],["no-label",!C],["has-icon",!!u],["success",!!$],["action-items",!!I?.length],["leading-action-items",!!p?.length],["no-leading",!(p?.length||u)],[`size-${f}`,!!f]),z=n=>{const a=v.affixIconTemplateFactory(n);return t.html`
+`]),B=n=>{const a=n.getRootNode();y.isAttachedTo(a)||y.addStylesTo(a)};class o extends M.WithContextualHelp(d.WithLightDOMFeedback(E.WithCharCount(H.WithErrorText(F.WithSuccessText(L.FormElement(v.AffixIcon(x.DelegatesAria(k.FormAssociated(t.VividElement))))))))){constructor(){super(...arguments),this.proxy=document.createElement("input"),this.type=O.text,this.#e=d.generateRandomId()}readOnlyChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly,this.validate())}autofocusChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.autofocus=this.autofocus,this.validate())}placeholderChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.placeholder=this.placeholder)}typeChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.type=this.type,this.validate())}listChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.setAttribute("list",this.list),this.validate())}maxlengthChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.maxLength=this.maxlength,this.validate())}minlengthChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.minLength=this.minlength,this.validate())}patternChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.pattern=this.pattern,this.validate())}sizeChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.size=this.size)}spellcheckChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.spellcheck=this.spellcheck)}valueChanged(a,e){super.valueChanged(a,e),this._updateControlValueIfNeeded(),this.charCount&&this.maxlength&&this._updateCharCountRemaining()}_updateControlValueIfNeeded(){this.control&&this.control.value!==this.value&&(this.control.value=this.value)}select(){this.control.select()}handleTextInput(){this.value=this.control.value}handleChange(){this.$emit("change")}validate(){super.validate(this.control)}connectedCallback(){super.connectedCallback(),this.proxy.setAttribute("type",this.type),this.validate(),this.autofocus&&t.DOM.queueUpdate(()=>{this.focus()}),this._updateControlValueIfNeeded(),B(this),this._renderCharCountRemaining()}focus(){this.control?.focus()}#e;get _uniqueId(){return this.id||this.#e}}i([t.attr({attribute:"readonly",mode:"boolean"})],o.prototype,"readOnly");i([t.attr({mode:"boolean"})],o.prototype,"autofocus");i([t.attr],o.prototype,"placeholder");i([t.attr],o.prototype,"type");i([t.attr],o.prototype,"list");i([t.attr({converter:t.nullableNumberConverter})],o.prototype,"maxlength");i([t.attr({converter:t.nullableNumberConverter})],o.prototype,"minlength");i([t.attr],o.prototype,"pattern");i([t.attr({converter:t.nullableNumberConverter})],o.prototype,"size");i([t.attr({mode:"boolean"})],o.prototype,"spellcheck");i([t.attr],o.prototype,"appearance");i([t.attr],o.prototype,"shape");i([t.attr],o.prototype,"autoComplete");i([t.attr()],o.prototype,"scale");i([t.attr({attribute:"inputmode"})],o.prototype,"inputMode");i([t.observable],o.prototype,"actionItemsSlottedContent");i([t.observable],o.prototype,"leadingActionItemsSlottedContent");const g=n=>`vvd-text-field-control-${n}`,W=({errorValidationMessage:n,disabled:a,value:e,readOnly:h,placeholder:l,appearance:s,shape:r,label:C,successText:$,actionItemsSlottedContent:I,leadingActionItemsSlottedContent:p,icon:u,scale:f})=>D.classNames(["error",!!n],["disabled",a],["has-value",!!e],["readonly",h],["placeholder",!!l],[`appearance-${s}`,!!s],[`shape-${r}`,!!r],["no-label",!C],["has-icon",!!u],["success",!!$],["action-items",!!I?.length],["leading-action-items",!!p?.length],["no-leading",!(p?.length||u)],[`size-${f}`,!!f]),z=n=>{const a=v.affixIconTemplateFactory(n);return t.html`
 		<div class="base ${W}">
 			<div
 				class="label-suffix"

package/bundled/definition13.js

@@ -5,8 +5,8 @@ import { v as W } from "./definition12.js";
 import { c as S } from "./definition11.js";
 import { D as w, d as O } from "./delegates-aria.js";
 import { F as B } from "./form-associated.js";
-import { W as A } from "./with-contextual-help.js";
-import { W as N } from "./char-count.js";
+import { W as A } from "./char-count.js";
+import { W as N } from "./with-contextual-help.js";
 import { W as z } from "./with-error-text.js";
 import { W as V } from "./with-success-text.js";
 import { F as q } from "./form-element.js";
@@ -37,9 +37,9 @@ const K = {
   const s = i.getRootNode();
   v.isAttachedTo(s) || v.addStylesTo(s);
 };
-class t extends A(
+class t extends N(
   L(
-    N(
+    A(
       z(
         V(
           q(R(w(B(_))))