@vonage/vivid 5.0.0 → 5.2.0

package/audio-player/index.js

@@ -1,3 +1,334 @@
-import { r as registerAudioPlayer } from '../shared/definition5.js';
+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 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 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 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 D = !0, I = !1, z = {
+  toView(a) {
+    return a;
+  },
+  fromView(a) {
+    return Object.values(u).includes(a) ? a : void 0;
+  }
+};
+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.#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.#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(() => {
+        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.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;
+  }
+  set playbackRate(e) {
+    this.#t.playbackRate = e, l.notify(this, "playbackRate");
+  }
+  get paused() {
+    return l.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 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;
+    }
+  }
+  get duration() {
+    l.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 l.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(I);
+  }
+  pause() {
+    this.#l(D);
+  }
+  #c(e = !0) {
+    const t = e ? "addEventListener" : "removeEventListener";
+    this.#e && this.#e[t]("change", this.#u);
+  }
+  #l;
+  #r;
+  #s;
+  #d;
+  #u;
+  #o;
+  /**
+   * Skips the current time by the skipBy value
+   *
+   * @param skipDirection - the direction to skip
+   *
+   * @internal
+   */
+  skip(e) {
+    const t = this.currentTime, r = parseInt(this.skipBy) * e, i = t + r;
+    this.currentTime = Math.max(0, Math.min(this.duration, i));
+  }
+}
+o([
+  n({ attribute: "play-button-aria-label" })
+], s.prototype, "playButtonAriaLabel");
+o([
+  n({ attribute: "pause-button-aria-label" })
+], s.prototype, "pauseButtonAriaLabel");
+o([
+  n({ attribute: "slider-aria-label" })
+], s.prototype, "sliderAriaLabel");
+o([
+  n({ attribute: "skip-forward-aria-label" })
+], s.prototype, "skipForwardButtonAriaLabel");
+o([
+  n({ attribute: "skip-backward-aria-label" })
+], s.prototype, "skipBackwardButtonAriaLabel");
+o([
+  n
+], s.prototype, "connotation");
+o([
+  n
+], s.prototype, "src");
+o([
+  n({ mode: "boolean" })
+], s.prototype, "disabled");
+o([
+  n({ mode: "boolean" })
+], s.prototype, "notime");
+o([
+  n({
+    attribute: "skip-by",
+    converter: z
+  })
+], s.prototype, "skipBy");
+o([
+  n({ attribute: "playback-rates" })
+], s.prototype, "playbackRates");
+o([
+  n({ mode: "boolean", attribute: "duration-fallback" })
+], s.prototype, "durationFallback");
+const M = ({
+  notime: a,
+  disabled: e,
+  duration: t,
+  skipBy: r,
+  playbackRates: i
+}) => F(
+  ["disabled", !!e || !t],
+  [
+    "two-lines",
+    !a && (!!Number(r) || !!i)
+  ],
+  ["playback", !!i]
+), N = (a, { parent: e }) => a === e.playbackRate;
+function O(a) {
+  const e = a.tagFor(b);
+  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'
+	connotation="${(t) => t.connotation}"
+	?disabled="${(t) => t.disabled || !t.duration}"
+  ></${e}>`;
+}
+function U(a) {
+  const e = a.tagFor(b);
+  return c`
+		<${e} class="skip backward"
+			@click="${(t) => t.skip(y.BACKWARD)}"
+		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}"
+		?disabled="${(t) => t.disabled || !t.duration}"
+		></${e}>
+	`;
+}
+function V(a) {
+  const e = a.tagFor(b);
+  return c`
+		<${e} class="skip forward"
+		@click="${(t) => t.skip(y.FORWARD)}"
+		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}"
+		?disabled="${(t) => t.disabled || !t.duration}"
+		></${e}>
+	`;
+}
+function _(a) {
+  const e = a.tagFor(k);
+  return c`
+	<${e}
+		class="slider"
+		aria-label="${(t) => t.sliderAriaLabel || t.locale.audioPlayer.sliderLabel}"
+		max="100"
+		aria-valuetext="${(t) => m(t.currentTime)}"
+		connotation="${(t) => t.connotation}"
+		?disabled="${(t) => t.disabled || !t.duration}"
+		internal-part>
+	</${e}>`;
+}
+function j() {
+  return c` <div class="time-stamp">
+		<span class="current-time">${(a) => m(a.currentTime)}</span>
+		${p(
+    (a) => a.duration && a.duration !== 1 / 0,
+    c`
+				<span>/</span>
+				<span class="total-time">${(a) => m(a.duration)}</span>
+			`
+  )}
+	</div>`;
+}
+function W(a, e) {
+  return e.parent.playbackRate = a, !0;
+}
+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 != u.Zero,
+    U(a)
+  )}
+				${O(a)}
+				${p(
+    (i) => i.skipBy && i.skipBy != u.Zero,
+    V(a)
+  )}
+				${p((i) => !i.notime, j())}
+			</div>
+			${_(a)}
+			${p(
+    (i) => !!i.playbackRates,
+    c`
+			<${e} class="playback-rates" placement="top-start" auto-dismiss id="playback-menu" position-strategy="absolute">
+				<${t} id="playback-open-button"
+							  class="playback-button"
+							  slot="anchor"
+							  icon="playback-speed-line"
+							  aria-label="play back rates"
+							  size='condensed'
+							  connotation="${(i) => i.connotation}"
+							  ?disabled="${(i) => i.disabled || !i.duration}"
+				></${t}>
 
-registerAudioPlayer();
+				${C(
+      (i) => R(i.playbackRates),
+      c`<${r} @click="${W}"
+																			 control-type="radio"
+																			 class="playback-rate"
+																			 text="${(i) => i}"
+																			 check-appearance="tick-only"
+																			 ?checked="${N}"></${r}>`
+    )}
+			</${e}>`
+  )}
+		</div>
+	</div>`;
+}, Z = A(
+  "audio-player",
+  s,
+  K,
+  [f, g, B, T],
+  {
+    styles: P
+  }
+), q = w(
+  Z
+);
+q();

package/{shared/definition6.cjs → avatar/definition.cjs}

@@ -1,11 +1,13 @@
 'use strict';
 
-const definition = require('./definition28.cjs');
-const vividElement = require('./vivid-element.cjs');
-const linkable = require('./linkable.cjs');
-const delegatesAria = require('./delegates-aria.cjs');
-const when = require('./when.cjs');
-const classNames = require('./class-names.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const icon_definition = require('../icon/definition.cjs');
+const vividElement = require('../unbundled/vivid-element.cjs');
+const fastElement = require('@microsoft/fast-element');
+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}";
 
@@ -25,31 +27,31 @@ class Avatar extends linkable.Linkable(vividElement.VividElement) {
   }
 }
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], Avatar.prototype, "connotation");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], Avatar.prototype, "shape");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], Avatar.prototype, "appearance");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], Avatar.prototype, "size");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], Avatar.prototype, "icon");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], Avatar.prototype, "initials");
 __decorateClass([
-  vividElement.attr({
+  fastElement.attr({
     mode: "boolean",
     attribute: "clickable"
   })
 ], Avatar.prototype, "clickable");
 
-const getClasses = ({ appearance, connotation, shape, size }) => classNames.classNames(
+const getClasses = ({ appearance, connotation, shape, size }) => fastWebUtilities.classNames(
   "base",
   [`connotation-${connotation}`, Boolean(connotation)],
   [`appearance-${appearance}`, Boolean(appearance)],
@@ -57,12 +59,12 @@ const getClasses = ({ appearance, connotation, shape, size }) => classNames.clas
   [`size-${size}`, Boolean(size)]
 );
 function renderIcon(iconTag) {
-  return vividElement.html`
+  return fastElement.html`
 		<${iconTag} name="${(x) => x.icon ? `${x.icon}` : "user-line"}"></${iconTag}>
 	`;
 }
 function renderInitials() {
-  return vividElement.html`
+  return fastElement.html`
 		<span class="initials">${({ initials }) => initials.substring(0, 2)}</span>
 	`;
 }
@@ -70,7 +72,7 @@ function renderAvatarBaseElement(x, content) {
   if (x.href) {
     return x._renderLinkElement(content, getClasses);
   } else if (x.clickable) {
-    return vividElement.html`<button
+    return fastElement.html`<button
 			type="button"
 			class="${getClasses}"
 			${delegatesAria.delegateAria()}
@@ -78,19 +80,19 @@ function renderAvatarBaseElement(x, content) {
 			${content}
 		</button>`;
   } else {
-    return vividElement.html`<span class="${getClasses}">${content}</span>`;
+    return fastElement.html`<span class="${getClasses}">${content}</span>`;
   }
 }
 const AvatarTemplate = (context) => {
-  const iconTag = context.tagFor(definition.Icon);
-  return vividElement.html`
+  const iconTag = context.tagFor(icon_definition.VwcIconElement);
+  return fastElement.html`
 		${(x) => renderAvatarBaseElement(
     x,
-    vividElement.html`<slot name="graphic">
-					${when.when((x2) => x2.initials, renderInitials())}
-					${when.when(
+    fastElement.html`<slot name="graphic">
+					${fastElement.when((x2) => x2.initials, renderInitials())}
+					${fastElement.when(
       (x2) => !x2.initials,
-      vividElement.html`<span class="icon"
+      fastElement.html`<span class="icon"
 							><slot name="icon">${renderIcon(iconTag)}</slot></span
 						>`
     )}</slot
@@ -103,13 +105,13 @@ const avatarDefinition = vividElement.defineVividComponent(
   "avatar",
   Avatar,
   AvatarTemplate,
-  [definition.iconDefinition],
+  [icon_definition.iconDefinition],
   {
     styles
   }
 );
 const registerAvatar = vividElement.createRegisterFunction(avatarDefinition);
 
-exports.Avatar = Avatar;
+exports.VwcAvatarElement = Avatar;
 exports.avatarDefinition = avatarDefinition;
 exports.registerAvatar = registerAvatar;

package/{shared/definition6.js → avatar/definition.js}

@@ -1,9 +1,9 @@
-import { I as Icon, i as iconDefinition } from './definition28.js';
-import { V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
-import { L as Linkable } from './linkable.js';
-import { d as delegateAria } from './delegates-aria.js';
-import { w as when } from './when.js';
-import { c as classNames } from './class-names.js';
+import { VwcIconElement as Icon, iconDefinition } from '../icon/definition.js';
+import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
+import { attr, when, html } from '@microsoft/fast-element';
+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}";
 
@@ -108,4 +108,4 @@ const avatarDefinition = defineVividComponent(
 );
 const registerAvatar = createRegisterFunction(avatarDefinition);
 
-export { Avatar as A, avatarDefinition as a, registerAvatar as r };
+export { Avatar as VwcAvatarElement, avatarDefinition, registerAvatar };

package/avatar/index.cjs

@@ -1,5 +1,18 @@
-'use strict';
-
-const definition = require('../shared/definition6.cjs');
-
-definition.registerAvatar();
+"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`
+		<${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>
+	`}function h(a,e){return a.href?a._renderLinkElement(e,s):a.clickable?o.html`<button
+			type="button"
+			class="${s}"
+			${b.delegateAria()}
+		>
+			${e}
+		</button>`:o.html`<span class="${s}">${e}</span>`}const z=a=>{const e=a.tagFor(d.Icon);return o.html`
+		${t=>h(t,o.html`<slot name="graphic">
+					${p.when(n=>n.initials,y())}
+					${p.when(n=>!n.initials,o.html`<span class="icon"
+							><slot name="icon">${x(e)}</slot></span
+						>`)}</slot
+				>`)}
+	`},g=o.defineVividComponent("avatar",r,z,[d.iconDefinition],{styles:_}),$=o.createRegisterFunction(g);$();

package/avatar/index.js

@@ -1,3 +1,93 @@
-import { r as registerAvatar } from '../shared/definition6.js';
-
-registerAvatar();
+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 { 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}";
+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) {
+  constructor() {
+    super(...arguments), this.clickable = !1;
+  }
+}
+i([
+  c
+], r.prototype, "connotation");
+i([
+  c
+], r.prototype, "shape");
+i([
+  c
+], r.prototype, "appearance");
+i([
+  c
+], r.prototype, "size");
+i([
+  c
+], r.prototype, "icon");
+i([
+  c
+], r.prototype, "initials");
+i([
+  c({
+    mode: "boolean",
+    attribute: "clickable"
+  })
+], r.prototype, "clickable");
+const v = ({ appearance: a, connotation: o, shape: e, size: t }) => z(
+  "base",
+  [`connotation-${o}`, !!o],
+  [`appearance-${a}`, !!a],
+  [`shape-${e}`, !!e],
+  [`size-${t}`, !!t]
+);
+function $(a) {
+  return n`
+		<${a} name="${(o) => o.icon ? `${o.icon}` : "user-line"}"></${a}>
+	`;
+}
+function k() {
+  return n`
+		<span class="initials">${({ initials: a }) => a.substring(0, 2)}</span>
+	`;
+}
+function w(a, o) {
+  return a.href ? a._renderLinkElement(o, v) : a.clickable ? n`<button
+			type="button"
+			class="${v}"
+			${y()}
+		>
+			${o}
+		</button>` : n`<span class="${v}">${o}</span>`;
+}
+const A = (a) => {
+  const o = a.tagFor(f);
+  return n`
+		${(e) => w(
+    e,
+    n`<slot name="graphic">
+					${d((t) => t.initials, k())}
+					${d(
+      (t) => !t.initials,
+      n`<span class="icon"
+							><slot name="icon">${$(o)}</slot></span
+						>`
+    )}</slot
+				>`
+  )}
+	`;
+}, B = _(
+  "avatar",
+  r,
+  A,
+  [b],
+  {
+    styles: h
+  }
+), C = u(B);
+C();