@vonage/vivid 5.5.0 → 5.7.0

package/alert/index.js

@@ -1,20 +1,21 @@
-import { B as h, b as u } from "../bundled/definition3.js";
+import { B as u, b as h } from "../bundled/definition3.js";
 import { E as f, e as b } from "../bundled/definition4.js";
 import { V as y, a as i, n as x, h as c, c as g, d as _ } from "../bundled/vivid-element.js";
 import { i as $ } from "../bundled/definition2.js";
 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 { b as k, a as A, I as C, c as w } from "../bundled/affix.js";
+import { h as z } from "../bundled/index.js";
+import { L as I } from "../bundled/localized.js";
+import { r as E } from "../bundled/ref.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) => {
+const B = '.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 T = Object.defineProperty, r = (n, t, e, o) => {
   for (var s = void 0, m = n.length - 1, v; m >= 0; m--)
     (v = n[m]) && (s = v(t, e, s) || s);
-  return s && B(t, e, s), s;
+  return s && T(t, e, s), s;
 };
-const T = {
+const L = {
   [l.Accent]: "megaphone-line",
   [l.Information]: "info-line",
   [l.Success]: "check-circle-line",
@@ -22,10 +23,10 @@ const T = {
   [l.Announcement]: "sparkles-line",
   [l.Alert]: "error-line"
 };
-class a extends k(z(y)) {
+class a extends k(I(y)) {
   constructor() {
     super(...arguments), this.dismissButtonAriaLabel = null, this.removable = !1, this.placement = "bottom", this.timeoutms = 0, this.open = !1, this.#o = (t) => {
-      this.open && this.removable && E(t) && (this.open = !1);
+      this.open && this.removable && z(t) && (this.open = !1);
     }, this.#n = () => {
       this.open ? this.style.display = "contents" : this.style.display = "none";
     };
@@ -44,18 +45,13 @@ class a extends k(z(y)) {
         this.style.display = "none";
   }
   connectedCallback() {
-    super.connectedCallback(), this.addEventListener("keydown", this.#o), this.controlEl = this.shadowRoot.querySelector(
-      ".control"
-    ), this.controlEl && this.controlEl.addEventListener("transitionend", this.#n), this.#e();
+    super.connectedCallback(), this.addEventListener("keydown", this.#o), this._controlEl.addEventListener("transitionend", this.#n), this.#e();
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.#t && clearTimeout(this.#t), this.removeEventListener("keydown", this.#o), this.controlEl && this.controlEl.removeEventListener(
-      "transitionend",
-      this.#n
-    );
+    super.disconnectedCallback(), this.#t && clearTimeout(this.#t), this.removeEventListener("keydown", this.#o), this._controlEl.removeEventListener("transitionend", this.#n);
   }
   get conditionedIcon() {
-    return this.icon || this.connotation && T[this.connotation];
+    return this.icon || this.connotation && L[this.connotation];
   }
   #e() {
     this.#t && clearTimeout(this.#t), this.open && this.timeoutms > 0 && (this.#t = setTimeout(() => this.open = !1, this.timeoutms));
@@ -93,25 +89,25 @@ r([
 r([
   i({ mode: "boolean" })
 ], a.prototype, "open");
-const L = ({ connotation: n }) => d("base", [`connotation-${n}`, !!n]), O = ({ open: n, placement: t, strategy: e }) => d(
+const O = ({ connotation: n }) => d("base", [`connotation-${n}`, !!n]), D = ({ open: n, placement: t, strategy: e }) => d(
   "control",
   ["open", n],
   [`placement-${t}`, !!t],
   [`strategy-${e}`, !!e]
 );
-function D(n, t) {
-  const e = w(n), o = t.conditionedIcon, s = !t.icon && t.connotation ? {
+function N(n, t) {
+  const e = A(n), o = t.conditionedIcon, s = !t.icon && t.connotation ? {
     label: t.locale.connotationAnnoncement[`${t.connotation}Icon`],
     announceOnUpdate: !0
   } : void 0;
   return e(
     o,
-    A.Slot,
-    C.Hidden,
+    C.Slot,
+    w.Hidden,
     s
   );
 }
-function N(n) {
+function F(n) {
   return c`
 		<${n}
 			aria-label="${(t) => t.dismissButtonAriaLabel || t.locale.alert.dismissButtonLabel}"
@@ -122,37 +118,37 @@ function N(n) {
 			@click="${(t) => t.open = !1}">
 		</${n}>`;
 }
-const S = (n) => {
-  const t = n.tagFor(f), e = n.tagFor(h);
+const P = (n) => {
+  const t = n.tagFor(f), e = n.tagFor(u);
   return c`
 	<${t} class="elevation" dp='8' exportparts="vvd-theme-alternate">
-		<div class="${O}">
+		<div class="${D}" ${E("_controlEl")}>
 			<div
 				part="vvd-theme-alternate"
-				class="${L}"
+				class="${O}"
 				role="alert"
 				aria-hidden="${(o) => o.open ? "false" : "true"}"
-				${(o) => o.open ? "" : "hidden"}
+				?hidden="${(o) => !o.open}"
 			>
-				${(o) => D(n, o)}
+				${(o) => N(n, o)}
 				<div class="alert-text">
 					${p((o) => o.headline, c`<h2 class="headline">${(o) => o.headline}</h2>`)}
 					${p((o) => o.text, c`<div class="main-text">${(o) => o.text}</div>`)}
 					<slot name="main"></slot>
 				</div>
 				<slot class="action-items" name="action-items"></slot>
-				${p((o) => o.removable, N(e))}
+				${p((o) => o.removable, F(e))}
 			</div>
 		</div>
 	</${t}>
 	`;
-}, F = _(
+}, S = _(
   "alert",
   a,
-  S,
-  [$, u, b],
+  P,
+  [$, h, b],
   {
-    styles: I
+    styles: B
   }
-), P = g(F);
-P();
+), V = g(S);
+V();

package/audio-player/definition.cjs

@@ -79,6 +79,7 @@ class AudioPlayer extends localized.Localized(vividElement.VividElement) {
       const currentTime = this.currentTime;
       const isValid = Number.isFinite(duration) && duration > 0 && Number.isFinite(currentTime) && currentTime >= 0;
       const percent = isValid ? currentTime / duration * 100 : 0;
+      /* v8 ignore else -- @preserve */
       if (this.#sliderEl) {
         this.#isProgrammaticSliderUpdate = true;
         this.#sliderEl.value = percent.toString();
@@ -109,6 +110,7 @@ class AudioPlayer extends localized.Localized(vividElement.VividElement) {
       if (this.#isProgrammaticSliderUpdate) {
         return;
       }
+      /* v8 ignore else -- @preserve */
       if (this.#playerEl) {
         this.currentTime = this.duration * Number(this.#sliderEl.value) / 100;
       }
@@ -188,6 +190,7 @@ class AudioPlayer extends localized.Localized(vividElement.VividElement) {
       this.#audioBuffer = audioBuffer;
       fastElement.Observable.notify(this, "duration");
     } catch (e) {
+      /* v8 ignore else -- @preserve */
       if (e instanceof Error && e.name !== "AbortError") {
         console.error("Error loading audio:", e);
       }
@@ -245,6 +248,7 @@ class AudioPlayer extends localized.Localized(vividElement.VividElement) {
   }
   #setSliderInteractionListeners(add = true) {
     const action = add ? "addEventListener" : "removeEventListener";
+    /* v8 ignore else -- @preserve */
     if (this.#sliderEl) {
       this.#sliderEl[action]("change", this.#updateCurrentTimeOnSliderChange);
     }

package/audio-player/definition.js

@@ -75,6 +75,7 @@ class AudioPlayer extends Localized(VividElement) {
       const currentTime = this.currentTime;
       const isValid = Number.isFinite(duration) && duration > 0 && Number.isFinite(currentTime) && currentTime >= 0;
       const percent = isValid ? currentTime / duration * 100 : 0;
+      /* v8 ignore else -- @preserve */
       if (this.#sliderEl) {
         this.#isProgrammaticSliderUpdate = true;
         this.#sliderEl.value = percent.toString();
@@ -105,6 +106,7 @@ class AudioPlayer extends Localized(VividElement) {
       if (this.#isProgrammaticSliderUpdate) {
         return;
       }
+      /* v8 ignore else -- @preserve */
       if (this.#playerEl) {
         this.currentTime = this.duration * Number(this.#sliderEl.value) / 100;
       }
@@ -184,6 +186,7 @@ class AudioPlayer extends Localized(VividElement) {
       this.#audioBuffer = audioBuffer;
       Observable.notify(this, "duration");
     } catch (e) {
+      /* v8 ignore else -- @preserve */
       if (e instanceof Error && e.name !== "AbortError") {
         console.error("Error loading audio:", e);
       }
@@ -241,6 +244,7 @@ class AudioPlayer extends Localized(VividElement) {
   }
   #setSliderInteractionListeners(add = true) {
     const action = add ? "addEventListener" : "removeEventListener";
+    /* v8 ignore else -- @preserve */
     if (this.#sliderEl) {
       this.#sliderEl[action]("change", this.#updateCurrentTimeOnSliderChange);
     }

package/audio-player/index.cjs

@@ -1,4 +1,4 @@
-"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()}"
+"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;/* v8 ignore else -- @preserve */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=()=>{if(!this.paused&&this.#e.isDragging&&(this.pause(),this.#d=window.setInterval(()=>{this.#e.isDragging||(clearInterval(this.#d),this.play())},0)),this.#n)return;/* v8 ignore else -- @preserve */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){/* v8 ignore else -- @preserve */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";/* v8 ignore else -- @preserve */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'

package/audio-player/index.js

@@ -44,13 +44,17 @@ class s extends S($) {
     }, 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;
+      /* v8 ignore else -- @preserve */
       this.#e && (this.#n = !0, this.#e.value = i.toString(), this.#n = !1), r && i === 100 && this.pause();
     }, 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.#d = window.setInterval(() => {
+      if (!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);
+      }, 0)), this.#n)
+        return;
+      /* v8 ignore else -- @preserve */
+      this.#t && (this.currentTime = this.duration * Number(this.#e.value) / 100);
     }, this.#o = () => {
       l.notify(this, "paused");
     };
@@ -102,6 +106,7 @@ class s extends S($) {
       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) {
+      /* v8 ignore else -- @preserve */
       t instanceof Error && t.name !== "AbortError" && console.error("Error loading audio:", t);
     } finally {
       this.#i = void 0;
@@ -139,6 +144,7 @@ class s extends S($) {
   }
   #c(e = !0) {
     const t = e ? "addEventListener" : "removeEventListener";
+    /* v8 ignore else -- @preserve */
     this.#e && this.#e[t]("change", this.#u);
   }
   #l;

package/avatar/definition.cjs

@@ -9,7 +9,7 @@ const linkable = require('../unbundled/linkable.cjs');
 const fastWebUtilities = require('@microsoft/fast-web-utilities');
 const delegatesAria = require('../unbundled/delegates-aria.cjs');
 
-const styles = ":host{display:inline-block}.base.connotation-cta{--_connotation-color-primary: var(--vvd-avatar-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-avatar-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-avatar-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-avatar-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-avatar-cta-pale, var(--vvd-color-cta-300));--_connotation-color-soft: var(--vvd-avatar-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-avatar-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-avatar-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-avatar-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-avatar-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-fierce: var(--vvd-avatar-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-avatar-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-soft: var(--vvd-avatar-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-avatar-accent-contrast, var(--vvd-color-neutral-800))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border:none;border-radius:var(--_avatar-border-radius);background-color:var(--_appearance-color-fill);block-size:var(--_size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:var(--_size);vertical-align:middle}.base.size-condensed{--_size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-condensed .initials{font:var(--vvd-typography-base-condensed-bold)}.base.size-condensed .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base.size-expanded{--_size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-expanded .initials{font:var(--vvd-typography-heading-4)}.base.size-expanded .icon{font-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:is(a,button){cursor:pointer;--focus-stroke-gap-color: transparent}.base:not(.shape-pill){--_avatar-border-radius: 8px}.base:not(.shape-pill).size-condensed{--_avatar-border-radius: 4px}.base:not(.size-condensed,.size-expanded){--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base:not(.size-condensed,.size-expanded) .initials{font:var(--vvd-typography-base-extended-bold)}.base:not(.size-condensed,.size-expanded) .icon{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:is(a,button):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.base.shape-pill{--_avatar-border-radius: 50%}.base .initials{text-transform:uppercase}.base ::slotted([slot=graphic]){block-size:100%;inline-size:100%;object-fit:cover}";
+const styles = ":host{display:inline-block}.base.connotation-cta{--_connotation-color-primary: var(--vvd-avatar-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-avatar-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-avatar-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-avatar-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-avatar-cta-pale, var(--vvd-color-cta-300));--_connotation-color-soft: var(--vvd-avatar-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-avatar-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-avatar-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-avatar-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-avatar-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-fierce: var(--vvd-avatar-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-avatar-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-soft: var(--vvd-avatar-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-avatar-accent-contrast, var(--vvd-color-neutral-800))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border:none;border-radius:var(--_avatar-border-radius);background-color:var(--_appearance-color-fill);block-size:var(--_size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:var(--_size);vertical-align:middle}.base.size-condensed{--_size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-condensed .initials{font:var(--vvd-typography-base-condensed-bold)}.base.size-condensed .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base.size-expanded{--_size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-expanded .initials{font:var(--vvd-typography-heading-4)}.base.size-expanded .icon{font-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:is(a,button){cursor:pointer;--focus-stroke-gap-color: transparent}.base:not(.shape-pill){--_avatar-border-radius: 8px}.base:not(.shape-pill).size-condensed{--_avatar-border-radius: 4px}.base:not(.size-condensed,.size-expanded){--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base:not(.size-condensed,.size-expanded) .initials{font:var(--vvd-typography-base-extended-bold)}.base:not(.size-condensed,.size-expanded) .icon{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:is(a,button):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.base.shape-pill{--_avatar-border-radius: 50%}.base .initials{text-transform:uppercase}.base ::slotted([slot=graphic]){block-size:100%;inline-size:100%;object-fit:cover}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/avatar/definition.js

@@ -5,7 +5,7 @@ import { L as Linkable } from '../unbundled/linkable.js';
 import { classNames } from '@microsoft/fast-web-utilities';
 import { d as delegateAria } from '../unbundled/delegates-aria.js';
 
-const styles = ":host{display:inline-block}.base.connotation-cta{--_connotation-color-primary: var(--vvd-avatar-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-avatar-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-avatar-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-avatar-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-avatar-cta-pale, var(--vvd-color-cta-300));--_connotation-color-soft: var(--vvd-avatar-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-avatar-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-avatar-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-avatar-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-avatar-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-fierce: var(--vvd-avatar-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-avatar-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-soft: var(--vvd-avatar-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-avatar-accent-contrast, var(--vvd-color-neutral-800))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border:none;border-radius:var(--_avatar-border-radius);background-color:var(--_appearance-color-fill);block-size:var(--_size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:var(--_size);vertical-align:middle}.base.size-condensed{--_size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-condensed .initials{font:var(--vvd-typography-base-condensed-bold)}.base.size-condensed .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base.size-expanded{--_size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-expanded .initials{font:var(--vvd-typography-heading-4)}.base.size-expanded .icon{font-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:is(a,button){cursor:pointer;--focus-stroke-gap-color: transparent}.base:not(.shape-pill){--_avatar-border-radius: 8px}.base:not(.shape-pill).size-condensed{--_avatar-border-radius: 4px}.base:not(.size-condensed,.size-expanded){--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base:not(.size-condensed,.size-expanded) .initials{font:var(--vvd-typography-base-extended-bold)}.base:not(.size-condensed,.size-expanded) .icon{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:is(a,button):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.base.shape-pill{--_avatar-border-radius: 50%}.base .initials{text-transform:uppercase}.base ::slotted([slot=graphic]){block-size:100%;inline-size:100%;object-fit:cover}";
+const styles = ":host{display:inline-block}.base.connotation-cta{--_connotation-color-primary: var(--vvd-avatar-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-avatar-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-avatar-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-avatar-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-avatar-cta-pale, var(--vvd-color-cta-300));--_connotation-color-soft: var(--vvd-avatar-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-avatar-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-avatar-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-avatar-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-avatar-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-fierce: var(--vvd-avatar-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-avatar-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-soft: var(--vvd-avatar-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-avatar-accent-contrast, var(--vvd-color-neutral-800))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border:none;border-radius:var(--_avatar-border-radius);background-color:var(--_appearance-color-fill);block-size:var(--_size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:var(--_size);vertical-align:middle}.base.size-condensed{--_size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-condensed .initials{font:var(--vvd-typography-base-condensed-bold)}.base.size-condensed .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base.size-expanded{--_size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-expanded .initials{font:var(--vvd-typography-heading-4)}.base.size-expanded .icon{font-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:is(a,button){cursor:pointer;--focus-stroke-gap-color: transparent}.base:not(.shape-pill){--_avatar-border-radius: 8px}.base:not(.shape-pill).size-condensed{--_avatar-border-radius: 4px}.base:not(.size-condensed,.size-expanded){--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base:not(.size-condensed,.size-expanded) .initials{font:var(--vvd-typography-base-extended-bold)}.base:not(.size-condensed,.size-expanded) .icon{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:is(a,button):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.base.shape-pill{--_avatar-border-radius: 50%}.base .initials{text-transform:uppercase}.base ::slotted([slot=graphic]){block-size:100%;inline-size:100%;object-fit:cover}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/avatar/index.cjs

@@ -1,4 +1,4 @@
-"use strict";const d=require("../bundled/definition2.cjs"),o=require("../bundled/vivid-element.cjs"),u=require("../bundled/linkable.cjs"),b=require("../bundled/delegates-aria.cjs"),p=require("../bundled/when.cjs"),f=require("../bundled/class-names.cjs"),_=":host{display:inline-block}.base.connotation-cta{--_connotation-color-primary: var(--vvd-avatar-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-avatar-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-avatar-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-avatar-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-avatar-cta-pale, var(--vvd-color-cta-300));--_connotation-color-soft: var(--vvd-avatar-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-avatar-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-avatar-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-avatar-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-avatar-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-fierce: var(--vvd-avatar-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-avatar-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-soft: var(--vvd-avatar-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-avatar-accent-contrast, var(--vvd-color-neutral-800))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border:none;border-radius:var(--_avatar-border-radius);background-color:var(--_appearance-color-fill);block-size:var(--_size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:var(--_size);vertical-align:middle}.base.size-condensed{--_size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-condensed .initials{font:var(--vvd-typography-base-condensed-bold)}.base.size-condensed .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base.size-expanded{--_size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-expanded .initials{font:var(--vvd-typography-heading-4)}.base.size-expanded .icon{font-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:is(a,button){cursor:pointer;--focus-stroke-gap-color: transparent}.base:not(.shape-pill){--_avatar-border-radius: 8px}.base:not(.shape-pill).size-condensed{--_avatar-border-radius: 4px}.base:not(.size-condensed,.size-expanded){--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base:not(.size-condensed,.size-expanded) .initials{font:var(--vvd-typography-base-extended-bold)}.base:not(.size-condensed,.size-expanded) .icon{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:is(a,button):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.base.shape-pill{--_avatar-border-radius: 50%}.base .initials{text-transform:uppercase}.base ::slotted([slot=graphic]){block-size:100%;inline-size:100%;object-fit:cover}";var m=Object.defineProperty,c=(a,e,t,n)=>{for(var i=void 0,l=a.length-1,v;l>=0;l--)(v=a[l])&&(i=v(e,t,i)||i);return i&&m(e,t,i),i};class r extends u.Linkable(o.VividElement){constructor(){super(...arguments),this.clickable=!1}}c([o.attr],r.prototype,"connotation");c([o.attr],r.prototype,"shape");c([o.attr],r.prototype,"appearance");c([o.attr],r.prototype,"size");c([o.attr],r.prototype,"icon");c([o.attr],r.prototype,"initials");c([o.attr({mode:"boolean",attribute:"clickable"})],r.prototype,"clickable");const s=({appearance:a,connotation:e,shape:t,size:n})=>f.classNames("base",[`connotation-${e}`,!!e],[`appearance-${a}`,!!a],[`shape-${t}`,!!t],[`size-${n}`,!!n]);function x(a){return o.html`
+"use strict";const d=require("../bundled/definition2.cjs"),o=require("../bundled/vivid-element.cjs"),u=require("../bundled/linkable.cjs"),b=require("../bundled/delegates-aria.cjs"),p=require("../bundled/when.cjs"),f=require("../bundled/class-names.cjs"),_=":host{display:inline-block}.base.connotation-cta{--_connotation-color-primary: var(--vvd-avatar-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-avatar-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-avatar-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-avatar-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-avatar-cta-pale, var(--vvd-color-cta-300));--_connotation-color-soft: var(--vvd-avatar-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-avatar-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-avatar-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-avatar-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-avatar-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-fierce: var(--vvd-avatar-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-avatar-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-soft: var(--vvd-avatar-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-avatar-accent-contrast, var(--vvd-color-neutral-800))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border:none;border-radius:var(--_avatar-border-radius);background-color:var(--_appearance-color-fill);block-size:var(--_size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:var(--_size);vertical-align:middle}.base.size-condensed{--_size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-condensed .initials{font:var(--vvd-typography-base-condensed-bold)}.base.size-condensed .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base.size-expanded{--_size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-expanded .initials{font:var(--vvd-typography-heading-4)}.base.size-expanded .icon{font-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:is(a,button){cursor:pointer;--focus-stroke-gap-color: transparent}.base:not(.shape-pill){--_avatar-border-radius: 8px}.base:not(.shape-pill).size-condensed{--_avatar-border-radius: 4px}.base:not(.size-condensed,.size-expanded){--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base:not(.size-condensed,.size-expanded) .initials{font:var(--vvd-typography-base-extended-bold)}.base:not(.size-condensed,.size-expanded) .icon{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:is(a,button):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.base.shape-pill{--_avatar-border-radius: 50%}.base .initials{text-transform:uppercase}.base ::slotted([slot=graphic]){block-size:100%;inline-size:100%;object-fit:cover}";var m=Object.defineProperty,c=(a,e,t,n)=>{for(var i=void 0,l=a.length-1,v;l>=0;l--)(v=a[l])&&(i=v(e,t,i)||i);return i&&m(e,t,i),i};class r extends u.Linkable(o.VividElement){constructor(){super(...arguments),this.clickable=!1}}c([o.attr],r.prototype,"connotation");c([o.attr],r.prototype,"shape");c([o.attr],r.prototype,"appearance");c([o.attr],r.prototype,"size");c([o.attr],r.prototype,"icon");c([o.attr],r.prototype,"initials");c([o.attr({mode:"boolean",attribute:"clickable"})],r.prototype,"clickable");const s=({appearance:a,connotation:e,shape:t,size:n})=>f.classNames("base",[`connotation-${e}`,!!e],[`appearance-${a}`,!!a],[`shape-${t}`,!!t],[`size-${n}`,!!n]);function x(a){return o.html`
 		<${a} name="${e=>e.icon?`${e.icon}`:"user-line"}"></${a}>
 	`}function y(){return o.html`
 		<span class="initials">${({initials:a})=>a.substring(0,2)}</span>

package/avatar/index.js

@@ -1,16 +1,16 @@
 import { I as f, i as b } from "../bundled/definition2.js";
-import { V as m, a as c, h as n, c as u, d as _ } from "../bundled/vivid-element.js";
+import { V as u, a as c, h as n, c as m, d as _ } from "../bundled/vivid-element.js";
 import { L as x } from "../bundled/linkable.js";
 import { d as y } from "../bundled/delegates-aria.js";
 import { w as d } from "../bundled/when.js";
 import { c as z } from "../bundled/class-names.js";
-const h = ":host{display:inline-block}.base.connotation-cta{--_connotation-color-primary: var(--vvd-avatar-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-avatar-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-avatar-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-avatar-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-avatar-cta-pale, var(--vvd-color-cta-300));--_connotation-color-soft: var(--vvd-avatar-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-avatar-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-avatar-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-avatar-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-avatar-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-fierce: var(--vvd-avatar-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-avatar-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-soft: var(--vvd-avatar-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-avatar-accent-contrast, var(--vvd-color-neutral-800))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border:none;border-radius:var(--_avatar-border-radius);background-color:var(--_appearance-color-fill);block-size:var(--_size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:var(--_size);vertical-align:middle}.base.size-condensed{--_size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-condensed .initials{font:var(--vvd-typography-base-condensed-bold)}.base.size-condensed .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base.size-expanded{--_size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-expanded .initials{font:var(--vvd-typography-heading-4)}.base.size-expanded .icon{font-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:is(a,button){cursor:pointer;--focus-stroke-gap-color: transparent}.base:not(.shape-pill){--_avatar-border-radius: 8px}.base:not(.shape-pill).size-condensed{--_avatar-border-radius: 4px}.base:not(.size-condensed,.size-expanded){--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base:not(.size-condensed,.size-expanded) .initials{font:var(--vvd-typography-base-extended-bold)}.base:not(.size-condensed,.size-expanded) .icon{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:is(a,button):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.base.shape-pill{--_avatar-border-radius: 50%}.base .initials{text-transform:uppercase}.base ::slotted([slot=graphic]){block-size:100%;inline-size:100%;object-fit:cover}";
+const h = ":host{display:inline-block}.base.connotation-cta{--_connotation-color-primary: var(--vvd-avatar-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-avatar-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-avatar-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-avatar-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-avatar-cta-pale, var(--vvd-color-cta-300));--_connotation-color-soft: var(--vvd-avatar-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-avatar-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-avatar-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-avatar-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-avatar-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-fierce: var(--vvd-avatar-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-avatar-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-soft: var(--vvd-avatar-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-avatar-accent-contrast, var(--vvd-color-neutral-800))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border:none;border-radius:var(--_avatar-border-radius);background-color:var(--_appearance-color-fill);block-size:var(--_size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:var(--_size);vertical-align:middle}.base.size-condensed{--_size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-condensed .initials{font:var(--vvd-typography-base-condensed-bold)}.base.size-condensed .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base.size-expanded{--_size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-expanded .initials{font:var(--vvd-typography-heading-4)}.base.size-expanded .icon{font-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:is(a,button){cursor:pointer;--focus-stroke-gap-color: transparent}.base:not(.shape-pill){--_avatar-border-radius: 8px}.base:not(.shape-pill).size-condensed{--_avatar-border-radius: 4px}.base:not(.size-condensed,.size-expanded){--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base:not(.size-condensed,.size-expanded) .initials{font:var(--vvd-typography-base-extended-bold)}.base:not(.size-condensed,.size-expanded) .icon{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:is(a,button):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.base.shape-pill{--_avatar-border-radius: 50%}.base .initials{text-transform:uppercase}.base ::slotted([slot=graphic]){block-size:100%;inline-size:100%;object-fit:cover}";
 var g = Object.defineProperty, i = (a, o, e, t) => {
   for (var s = void 0, l = a.length - 1, p; l >= 0; l--)
     (p = a[l]) && (s = p(o, e, s) || s);
   return s && g(o, e, s), s;
 };
-class r extends x(m) {
+class r extends x(u) {
   constructor() {
     super(...arguments), this.clickable = !1;
   }
@@ -89,5 +89,5 @@ const A = (a) => {
   {
     styles: h
   }
-), C = u(B);
+), C = m(B);
 C();

package/banner/definition.cjs

@@ -61,10 +61,8 @@ class Banner extends affix.AffixIcon(localized.Localized(delegatesAria.Delegates
   remove() {
     this.$emit("removing");
     const banner = this.shadowRoot && this.shadowRoot.querySelector(".control");
-    if (banner) {
-      banner.classList.add("removing");
-      banner.addEventListener("transitionend", this.#handleRemoveEnd);
-    }
+    banner?.classList.add("removing");
+    banner?.addEventListener("transitionend", this.#handleRemoveEnd);
   }
   #handleRemoveEnd;
   #closeOnKeyDown;

package/banner/definition.js

@@ -57,10 +57,8 @@ class Banner extends AffixIcon(Localized(DelegatesAria(VividElement))) {
   remove() {
     this.$emit("removing");
     const banner = this.shadowRoot && this.shadowRoot.querySelector(".control");
-    if (banner) {
-      banner.classList.add("removing");
-      banner.addEventListener("transitionend", this.#handleRemoveEnd);
-    }
+    banner?.classList.add("removing");
+    banner?.addEventListener("transitionend", this.#handleRemoveEnd);
   }
   #handleRemoveEnd;
   #closeOnKeyDown;

package/banner/index.cjs

@@ -1,4 +1,4 @@
-"use strict";const m=require("../bundled/definition3.cjs"),u=require("../bundled/definition2.cjs"),e=require("../bundled/vivid-element.cjs"),c=require("../bundled/enums.cjs"),p=require("../bundled/delegates-aria.cjs"),s=require("../bundled/affix.cjs"),h=require("../bundled/localized.cjs"),b=require("../bundled/slotted.cjs"),f=require("../bundled/when.cjs"),y=require("../bundled/class-names.cjs"),g=":host{display:block}.control.connotation-success{--_connotation-color-primary: var(--vvd-banner-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-banner-success-primary-text, var(--vvd-color-canvas))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-banner-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-banner-alert-primary-text, var(--vvd-color-canvas))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-banner-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-banner-announcement-primary-text, var(--vvd-color-canvas))}.control.connotation-warning{--_connotation-color-primary: var(--vvd-banner-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-banner-warning-primary-text, var(--vvd-color-canvas-text))}.control:not(.connotation-success,.connotation-alert,.connotation-announcement,.connotation-warning){--_connotation-color-primary: var(--vvd-banner-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-banner-information-primary-text, var(--vvd-color-canvas))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control{overflow:hidden;max-height:160px;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);transition:max-height var(--transition-delay, .2s)}.control.removing{max-height:0}.header{display:flex;box-sizing:border-box;align-items:center;font:var(--vvd-typography-base-bold);inline-size:100%;min-block-size:calc(1px*(60 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.header .content{display:flex;flex-grow:1;align-items:center;justify-content:center;padding:10px 16px;column-gap:16px;inline-size:100%}.header .content slot[name=icon]{flex-shrink:0;font-size:20px;line-height:1}.header .content .action-items{flex-shrink:0}.header .dismiss-button{flex-shrink:0;margin-inline-end:8px}";var x=Object.defineProperty,i=(o,n,t,d)=>{for(var r=void 0,l=o.length-1,v;l>=0;l--)(v=o[l])&&(r=v(n,t,r)||r);return r&&x(n,t,r),r};const _={[c.Connotation.Information]:"info-solid",[c.Connotation.Announcement]:"megaphone-solid",[c.Connotation.Success]:"check-circle-solid",[c.Connotation.Warning]:"warning-solid",[c.Connotation.Alert]:"error-solid"},C=(o=c.Connotation.Information)=>_[o];class a extends s.AffixIcon(h.Localized(p.DelegatesAria(e.VividElement))){constructor(){super(...arguments),this.dismissButtonAriaLabel=null,this.removable=!1,this.#o=()=>{this.$emit("removed"),this.parentElement&&this.parentElement.removeChild(this)},this.#n=n=>{n.key!=="Escape"||!this.removable||this.remove()}}get conditionedIcon(){return this.icon??C(this.connotation)}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.#n)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.#n)}remove(){this.$emit("removing");const n=this.shadowRoot&&this.shadowRoot.querySelector(".control");n&&(n.classList.add("removing"),n.addEventListener("transitionend",this.#o))}#o;#n}i([e.attr({attribute:"dismiss-aria-label"})],a.prototype,"dismissButtonAriaLabel");i([e.attr({attribute:"action-href"})],a.prototype,"actionHref");i([e.attr({attribute:"action-text"})],a.prototype,"actionText");i([e.attr({mode:"boolean"})],a.prototype,"removable");i([e.attr()],a.prototype,"text");i([e.attr()],a.prototype,"connotation");i([e.observable],a.prototype,"actionItemsSlottedContent");const w=o=>y.classNames("control",[`connotation-${o.connotation}`,!!o.connotation]);function I(o){return e.html`
+"use strict";const m=require("../bundled/definition3.cjs"),u=require("../bundled/definition2.cjs"),e=require("../bundled/vivid-element.cjs"),c=require("../bundled/enums.cjs"),p=require("../bundled/delegates-aria.cjs"),s=require("../bundled/affix.cjs"),h=require("../bundled/localized.cjs"),b=require("../bundled/slotted.cjs"),y=require("../bundled/when.cjs"),f=require("../bundled/class-names.cjs"),g=":host{display:block}.control.connotation-success{--_connotation-color-primary: var(--vvd-banner-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-banner-success-primary-text, var(--vvd-color-canvas))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-banner-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-banner-alert-primary-text, var(--vvd-color-canvas))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-banner-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-banner-announcement-primary-text, var(--vvd-color-canvas))}.control.connotation-warning{--_connotation-color-primary: var(--vvd-banner-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-banner-warning-primary-text, var(--vvd-color-canvas-text))}.control:not(.connotation-success,.connotation-alert,.connotation-announcement,.connotation-warning){--_connotation-color-primary: var(--vvd-banner-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-banner-information-primary-text, var(--vvd-color-canvas))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control{overflow:hidden;max-height:160px;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);transition:max-height var(--transition-delay, .2s)}.control.removing{max-height:0}.header{display:flex;box-sizing:border-box;align-items:center;font:var(--vvd-typography-base-bold);inline-size:100%;min-block-size:calc(1px*(60 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.header .content{display:flex;flex-grow:1;align-items:center;justify-content:center;padding:10px 16px;column-gap:16px;inline-size:100%}.header .content slot[name=icon]{flex-shrink:0;font-size:20px;line-height:1}.header .content .action-items{flex-shrink:0}.header .dismiss-button{flex-shrink:0;margin-inline-end:8px}";var x=Object.defineProperty,i=(o,n,t,d)=>{for(var r=void 0,l=o.length-1,v;l>=0;l--)(v=o[l])&&(r=v(n,t,r)||r);return r&&x(n,t,r),r};const _={[c.Connotation.Information]:"info-solid",[c.Connotation.Announcement]:"megaphone-solid",[c.Connotation.Success]:"check-circle-solid",[c.Connotation.Warning]:"warning-solid",[c.Connotation.Alert]:"error-solid"},C=(o=c.Connotation.Information)=>_[o];class a extends s.AffixIcon(h.Localized(p.DelegatesAria(e.VividElement))){constructor(){super(...arguments),this.dismissButtonAriaLabel=null,this.removable=!1,this.#o=()=>{this.$emit("removed"),this.parentElement&&this.parentElement.removeChild(this)},this.#n=n=>{n.key!=="Escape"||!this.removable||this.remove()}}get conditionedIcon(){return this.icon??C(this.connotation)}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.#n)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.#n)}remove(){this.$emit("removing");const n=this.shadowRoot&&this.shadowRoot.querySelector(".control");n?.classList.add("removing"),n?.addEventListener("transitionend",this.#o)}#o;#n}i([e.attr({attribute:"dismiss-aria-label"})],a.prototype,"dismissButtonAriaLabel");i([e.attr({attribute:"action-href"})],a.prototype,"actionHref");i([e.attr({attribute:"action-text"})],a.prototype,"actionText");i([e.attr({mode:"boolean"})],a.prototype,"removable");i([e.attr()],a.prototype,"text");i([e.attr()],a.prototype,"connotation");i([e.observable],a.prototype,"actionItemsSlottedContent");const w=o=>f.classNames("control",[`connotation-${o.connotation}`,!!o.connotation]);function I(o){return e.html`
 	  <${o}
 	  		aria-label="${n=>n.dismissButtonAriaLabel||n.locale.banner.dismissButtonLabel}"
 			part="${n=>n.connotation==="warning"?"":"vvd-theme-alternate"}"
@@ -24,7 +24,7 @@
 					></slot>
 				</div>
 
-				${f.when(t=>t.removable,I(n))}
+				${y.when(t=>t.removable,I(n))}
 			</header>
 		</div>
 	`},A=e.defineVividComponent("banner",a,k,[u.iconDefinition,m.buttonDefinition],{styles:g}),L=e.createRegisterFunction(A);L();

package/banner/index.js

@@ -41,7 +41,7 @@ class a extends _(C(g(b))) {
   remove() {
     this.$emit("removing");
     const n = this.shadowRoot && this.shadowRoot.querySelector(".control");
-    n && (n.classList.add("removing"), n.addEventListener("transitionend", this.#o));
+    n?.classList.add("removing"), n?.addEventListener("transitionend", this.#o);
   }
   #o;
   #n;

package/breadcrumb/definition.cjs

@@ -41,6 +41,7 @@ class Breadcrumb extends delegatesAria.DelegatesAria(vividElement.VividElement)
    * @internal
    */
   slottedBreadcrumbItemsChanged(_, newItems) {
+    /* v8 ignore else -- @preserve */
     if (newItems) {
       newItems.forEach((item, index) => {
         const itemIsLastNode = index === newItems.length - 1;

package/breadcrumb/definition.js

@@ -37,6 +37,7 @@ class Breadcrumb extends DelegatesAria(VividElement) {
    * @internal
    */
   slottedBreadcrumbItemsChanged(_, newItems) {
+    /* v8 ignore else -- @preserve */
     if (newItems) {
       newItems.forEach((item, index) => {
         const itemIsLastNode = index === newItems.length - 1;

package/breadcrumb/index.cjs

@@ -9,4 +9,4 @@
 			></slot>
 		</div>
 	</nav>
-`,f=".list{display:flex}";var m=Object.defineProperty,h=(i,e,r,s)=>{for(var t=void 0,a=i.length-1,o;a>=0;a--)(o=i[a])&&(t=o(e,r,t)||t);return t&&m(e,r,t),t};class c extends d.DelegatesAria(l.VividElement){slottedBreadcrumbItemsChanged(e,r){r&&r.forEach((s,t)=>{const a=t===r.length-1;this.setItemSeparator(s,a),this.setAriaCurrent(s,a)})}setItemSeparator(e,r){e instanceof u.BreadcrumbItem&&(e.separator=!r)}findChildWithHref(e){return e.childElementCount>0?e.querySelector("a[href]"):e.shadowRoot?e.shadowRoot.querySelector("a[href]"):null}setAriaCurrent(e,r){const s=this.findChildWithHref(e);s!==null&&(r?s.setAttribute("aria-current","page"):s.removeAttribute("aria-current"))}}h([l.observable],c.prototype,"slottedBreadcrumbItems");const v=l.defineVividComponent("breadcrumb",c,b,[],{styles:f}),p=l.createRegisterFunction(v);p();
+`,f=".list{display:flex}";var m=Object.defineProperty,h=(i,e,r,s)=>{for(var t=void 0,a=i.length-1,o;a>=0;a--)(o=i[a])&&(t=o(e,r,t)||t);return t&&m(e,r,t),t};class c extends d.DelegatesAria(l.VividElement){slottedBreadcrumbItemsChanged(e,r){/* v8 ignore else -- @preserve */r&&r.forEach((s,t)=>{const a=t===r.length-1;this.setItemSeparator(s,a),this.setAriaCurrent(s,a)})}setItemSeparator(e,r){e instanceof u.BreadcrumbItem&&(e.separator=!r)}findChildWithHref(e){return e.childElementCount>0?e.querySelector("a[href]"):e.shadowRoot?e.shadowRoot.querySelector("a[href]"):null}setAriaCurrent(e,r){const s=this.findChildWithHref(e);s!==null&&(r?s.setAttribute("aria-current","page"):s.removeAttribute("aria-current"))}}h([l.observable],c.prototype,"slottedBreadcrumbItems");const v=l.defineVividComponent("breadcrumb",c,b,[],{styles:f}),p=l.createRegisterFunction(v);p();

package/breadcrumb/index.js

@@ -29,6 +29,7 @@ class l extends b(n) {
    * @internal
    */
   slottedBreadcrumbItemsChanged(e, r) {
+    /* v8 ignore else -- @preserve */
     r && r.forEach((a, t) => {
       const s = t === r.length - 1;
       this.setItemSeparator(a, s), this.setAriaCurrent(a, s);

package/breadcrumb-item/definition.cjs

@@ -8,7 +8,7 @@ const breadcrumbItem = require('../unbundled/breadcrumb-item.cjs');
 const fastElement = require('@microsoft/fast-element');
 const fastWebUtilities = require('@microsoft/fast-web-utilities');
 
-const styles = ".base{display:flex;align-items:center;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.base .separator{margin:0 16px;color:var(--vvd-color-neutral-600);font-size:12px}.control{font:inherit}.control:focus-visible{position:relative;outline:none}.control:focus-visible:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);--focus-stroke-gap-color: transparent;--focus-block-size-addition: 8px;--focus-border-radius: 4px}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}@media (hover: hover){.control:any-link:hover{text-decoration:underline}}";
+const styles = ".base{display:flex;align-items:center;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.base .separator{margin:0 16px;color:var(--vvd-color-neutral-600);font-size:12px}.control{font:inherit}.control:focus-visible{position:relative;outline:none}.control:focus-visible:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);--focus-stroke-gap-color: transparent;--focus-block-size-addition: 8px;--focus-border-radius: 4px}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}@media (hover: hover){.control:any-link:hover{text-decoration:underline}}";
 
 const getClasses = (_) => fastWebUtilities.classNames("base");
 const BreadcrumbItemTemplate = (context) => {

package/breadcrumb-item/definition.js

@@ -4,7 +4,7 @@ import { B as BreadcrumbItem } from '../unbundled/breadcrumb-item.js';
 import { when, html } from '@microsoft/fast-element';
 import { classNames } from '@microsoft/fast-web-utilities';
 
-const styles = ".base{display:flex;align-items:center;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.base .separator{margin:0 16px;color:var(--vvd-color-neutral-600);font-size:12px}.control{font:inherit}.control:focus-visible{position:relative;outline:none}.control:focus-visible:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);--focus-stroke-gap-color: transparent;--focus-block-size-addition: 8px;--focus-border-radius: 4px}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}@media (hover: hover){.control:any-link:hover{text-decoration:underline}}";
+const styles = ".base{display:flex;align-items:center;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.base .separator{margin:0 16px;color:var(--vvd-color-neutral-600);font-size:12px}.control{font:inherit}.control:focus-visible{position:relative;outline:none}.control:focus-visible:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);--focus-stroke-gap-color: transparent;--focus-block-size-addition: 8px;--focus-border-radius: 4px}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}@media (hover: hover){.control:any-link:hover{text-decoration:underline}}";
 
 const getClasses = (_) => classNames("base");
 const BreadcrumbItemTemplate = (context) => {

package/breadcrumb-item/index.cjs

@@ -1,5 +1,5 @@
-"use strict";const s=require("../bundled/definition2.cjs"),o=require("../bundled/vivid-element.cjs"),a=require("../bundled/breadcrumb-item.cjs"),t=require("../bundled/when.cjs"),c=require("../bundled/class-names.cjs"),l='.base{display:flex;align-items:center;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.base .separator{margin:0 16px;color:var(--vvd-color-neutral-600);font-size:12px}.control{font:inherit}.control:focus-visible{position:relative;outline:none}.control:focus-visible:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);--focus-stroke-gap-color: transparent;--focus-block-size-addition: 8px;--focus-border-radius: 4px}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}@media (hover: hover){.control:any-link:hover{text-decoration:underline}}',d=r=>c.classNames("base"),u=r=>{const n=r.tagFor(s.Icon);return o.html` <div role="listitem" class="${d}">
-		${t.when(e=>e.text&&!e.href,o.html`${e=>e.text}`)}
-		${t.when(e=>e.text&&e.href&&e.href.length>0,o.html`${e=>e._renderLinkElement(o.html`${i=>i.text}`,"control")}`)}
-		${t.when(e=>e.separator,o.html`<${n} class="separator" name="chevron-right-solid"></${n}>`)}
+"use strict";const s=require("../bundled/definition2.cjs"),o=require("../bundled/vivid-element.cjs"),a=require("../bundled/breadcrumb-item.cjs"),r=require("../bundled/when.cjs"),c=require("../bundled/class-names.cjs"),l='.base{display:flex;align-items:center;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.base .separator{margin:0 16px;color:var(--vvd-color-neutral-600);font-size:12px}.control{font:inherit}.control:focus-visible{position:relative;outline:none}.control:focus-visible:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);--focus-stroke-gap-color: transparent;--focus-block-size-addition: 8px;--focus-border-radius: 4px}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}@media (hover: hover){.control:any-link:hover{text-decoration:underline}}',d=t=>c.classNames("base"),u=t=>{const n=t.tagFor(s.Icon);return o.html` <div role="listitem" class="${d}">
+		${r.when(e=>e.text&&!e.href,o.html`${e=>e.text}`)}
+		${r.when(e=>e.text&&e.href&&e.href.length>0,o.html`${e=>e._renderLinkElement(o.html`${i=>i.text}`,"control")}`)}
+		${r.when(e=>e.separator,o.html`<${n} class="separator" name="chevron-right-solid"></${n}>`)}
 	</div>`},v=o.defineVividComponent("breadcrumb-item",a.BreadcrumbItem,u,[s.iconDefinition],{styles:l,shadowOptions:{delegatesFocus:!0}}),m=o.createRegisterFunction(v);m();