@vonage/vivid 5.15.0 → 5.16.0

package/popover/index.js

@@ -1,263 +1,174 @@
-import { E as m, e as u } from "../bundled/definition4.js";
-import { V as b, a as n, n as f, o as v, h as p, c as g, d as w } from "../bundled/vivid-element.js";
-import { i as E, f as _, b as x, h as k, c as y, o as $, d as A, e as P } from "../bundled/floating-ui.dom.js";
-import { D as C, d as L } from "../bundled/delegates-aria.js";
-import { L as T } from "../bundled/localized.js";
-import { I as B, i as D } from "../bundled/definition2.js";
-import { B as V, b as O } from "../bundled/definition3.js";
-import { s as z } from "../bundled/slotted.js";
-import { r as d } from "../bundled/ref.js";
-import { w as h } from "../bundled/when.js";
-import { c as F } from "../bundled/class-names.js";
-const H = ":host{display:inline-block}.base{white-space:initial;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.base{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base ::-webkit-scrollbar{width:4px}.base ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base{position:fixed;overflow:visible;padding:0;border:none;border-radius:8px;margin:0;inline-size:max-content;min-inline-size:fit-content}.base:focus-visible{outline:none}.base::backdrop{background-color:var(--popover-backdrop-bg, transparent)}.control{display:flex;flex-direction:column;padding:var(--popover-padding, 24px);border-radius:inherit;background:var(--vvd-color-surface-4dp);color:var(--vvd-color-canvas-text);gap:var(--popover-gap, 24px)}.control:not(.open){display:none}.control.condensed{--popover-padding: 12px;--popover-gap: 12px}.control.manual{padding-block-start:40px}.arrow{position:absolute;z-index:-1;width:8px;height:8px;background:var(--vvd-color-surface-4dp);transform:rotate(45deg)}.dismiss-button{position:absolute;inset-block-start:4px;inset-inline-end:4px}";
-var M = Object.defineProperty, r = (a, o, e, s) => {
-  for (var t = void 0, l = a.length - 1, c; l >= 0; l--)
-    (c = a[l]) && (t = c(o, e, t) || t);
-  return t && M(o, e, t), t;
+import { t as e } from "../bundled/localized.js";
+import { T as t, d as n, l as r, o as i, s as a, t as o, u as s } from "../bundled/vivid-element.js";
+import { t as c } from "../bundled/ref.js";
+import { t as l } from "../bundled/when.js";
+import { t as u } from "../bundled/slotted.js";
+import { r as d, t as f } from "../bundled/definition2.js";
+import { t as p } from "../bundled/decorate.js";
+import { t as m } from "../bundled/class-names.js";
+import { n as h, t as g } from "../bundled/delegates-aria.js";
+import { i as _, t as v } from "../bundled/definition6.js";
+import { r as y, t as b } from "../bundled/definition7.js";
+import { a as x, c as S, i as C, l as w, o as T, r as E, s as D, t as O } from "../bundled/floating-ui.dom.js";
+//#region src/lib/popover/popover.scss?inline
+var k = ":host{display:inline-block}.base{white-space:initial;--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base ::-webkit-scrollbar{width:4px}.base ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base{border:none;border-radius:8px;inline-size:max-content;min-inline-size:fit-content;margin:0;padding:0;position:fixed;overflow:visible}.base:focus-visible{outline:none}.base::backdrop{background-color:var(--popover-backdrop-bg,transparent)}.control{padding:var(--popover-padding,24px);border-radius:inherit;background:var(--vvd-color-surface-4dp);color:var(--vvd-color-canvas-text);gap:var(--popover-gap,24px);flex-direction:column;display:flex}.control:not(.open){display:none}.control.condensed{--popover-padding:12px;--popover-gap:12px}.control.manual{padding-block-start:40px}.arrow{z-index:-1;background:var(--vvd-color-surface-4dp);width:8px;height:8px;position:absolute;transform:rotate(45deg)}.dismiss-button{position:absolute;inset-block-start:4px;inset-inline-end:4px}", A = class extends e(g(o)) {
+	constructor(...e) {
+		super(...e), this.placement = "bottom", this.manual = !1, this.layout = "default", this.offset = 8, this.alternate = !1, this.dismissButtonAriaLabel = null, this.arrow = !1, this.open = !1;
+	}
+	placementChanged() {
+		this.#s();
+	}
+	arrowChanged() {
+		this.#s();
+	}
+	openChanged(e, t) {
+		if (!this._popoverEl) return;
+		let n = this._popoverEl.matches(":popover-open");
+		t && !n ? this._popoverEl.showPopover() : !t && n && this._popoverEl.hidePopover(), this.#s();
+	}
+	anchorChanged() {
+		this.#t();
+	}
+	_slottedAnchorChanged() {
+		this.#t();
+	}
+	#e = null;
+	#t() {
+		if (!this._popoverEl) return;
+		let e = this.anchor || this._slottedAnchor?.[0] || null;
+		this.#e !== e && (this.#e && this.#r(this.#e), this.#e = e, this.#e && this._popoverEl && (this.#n(this.#e), this.#s()));
+	}
+	#n(e) {
+		e.setAttribute("aria-haspopup", "dialog"), e instanceof HTMLButtonElement || e instanceof HTMLInputElement ? e.popoverTargetElement = this._popoverEl : e.addEventListener("click", this.#i);
+	}
+	#r(e) {
+		e.removeAttribute("aria-haspopup"), e instanceof HTMLButtonElement || e instanceof HTMLInputElement ? e.popoverTargetElement = null : e.removeEventListener("click", this.#i);
+	}
+	#i = () => {
+		this._popoverEl.togglePopover();
+	};
+	get #a() {
+		let e = [
+			D(),
+			x(),
+			w(),
+			T()
+		], t = this.offset ?? 0;
+		return this.arrow && this._arrowEl && (t = 12, e = [...e, O({
+			element: this._arrowEl,
+			padding: 10
+		})]), t > 0 && e.unshift(S(t)), e;
+	}
+	#o;
+	#s() {
+		this.#o?.(), this.open && this.#e && this._popoverEl && (this.#o = E(this.#e, this._popoverEl, this.#l));
+	}
+	#c;
+	#l = () => {
+		this.#c = this.updatePosition();
+	};
+	async updatePosition() {
+		/* v8 ignore if -- @preserve */
+		if (!this.open || !this.#e || !this._popoverEl) return;
+		let e = await C(this.#e, this._popoverEl, {
+			placement: this.placement,
+			strategy: "fixed",
+			middleware: this.#a
+		});
+		this.open && (this.#u(e), this.arrow && this._arrowEl && this.#d(e));
+	}
+	#u(e) {
+		let { x: t, y: n } = e;
+		Object.assign(this._popoverEl.style, {
+			left: `${t}px`,
+			top: `${n}px`,
+			visibility: e.middlewareData.hide?.referenceHidden ? "hidden" : "visible"
+		});
+	}
+	#d(e) {
+		/* v8 ignore if -- @preserve */
+		if (!this._arrowEl) return;
+		let { x: t, y: n } = e.middlewareData.arrow, r = {
+			left: "calc(100% - 4px)",
+			right: "-4px",
+			top: "calc(100% - 4px)",
+			bottom: "-4px"
+		}, i = e.placement.split("-")[0];
+		Object.assign(this._arrowEl.style, {
+			left: t ? `${t}px` : r[i],
+			top: n ? `${n}px` : r[i]
+		});
+	}
+	#f = (e) => {
+		let t = e.newState ? e.newState === "open" : this._popoverEl.matches(":popover-open");
+		this.open !== t && (this.open = t), this.$emit(t ? "open" : "close", void 0, { bubbles: !1 });
+	};
+	connectedCallback() {
+		/* v8 ignore else -- @preserve */
+		super.connectedCallback(), this.#t(), this._popoverEl && (this._popoverEl.addEventListener("toggle", this.#f), this.open && !this._popoverEl.matches(":popover-open") && (this._popoverEl.showPopover(), this.#s()));
+	}
+	disconnectedCallback() {
+		/* v8 ignore else -- @preserve */
+		super.disconnectedCallback(), this.#o?.(), this.#e &&= (this.#r(this.#e), null), this._popoverEl && this._popoverEl.removeEventListener("toggle", this.#f);
+	}
+	show() {
+		return this.open = !0, this.#c ?? Promise.resolve();
+	}
+	hide() {
+		this.open = !1;
+	}
+	toggle() {
+		this.open = !this.open;
+	}
 };
-class i extends T(C(b)) {
-  constructor() {
-    super(...arguments), this.placement = "bottom", this.manual = !1, this.layout = "default", this.offset = 8, this.alternate = !1, this.dismissButtonAriaLabel = null, this.arrow = !1, this.open = !1, this.#o = null, this.#s = () => {
-      this._popoverEl.togglePopover();
-    }, this.#l = () => {
-      this.#n = this.updatePosition();
-    }, this.#r = (o) => {
-      const e = o.newState ? o.newState === "open" : this._popoverEl.matches(":popover-open");
-      this.open !== e && (this.open = e), this.$emit(e ? "open" : "close", void 0, { bubbles: !1 });
-    };
-  }
-  placementChanged() {
-    this.#e();
-  }
-  arrowChanged() {
-    this.#e();
-  }
-  openChanged(o, e) {
-    if (!this._popoverEl) return;
-    const s = this._popoverEl.matches(":popover-open");
-    e && !s ? this._popoverEl.showPopover() : !e && s && this._popoverEl.hidePopover(), this.#e();
-  }
-  anchorChanged() {
-    this.#t();
-  }
-  _slottedAnchorChanged() {
-    this.#t();
-  }
-  #o;
-  /**
-   * @internal
-   */
-  #t() {
-    if (!this._popoverEl) return;
-    const o = this.anchor || this._slottedAnchor?.[0] || null;
-    this.#o !== o && (this.#o && this.#a(this.#o), this.#o = o, this.#o && this._popoverEl && (this.#p(this.#o), this.#e()));
-  }
-  /**
-   * @internal
-   */
-  #p(o) {
-    o.setAttribute("aria-haspopup", "dialog"), o instanceof HTMLButtonElement || o instanceof HTMLInputElement ? o.popoverTargetElement = this._popoverEl : o.addEventListener("click", this.#s);
-  }
-  /**
-   * @internal
-   */
-  #a(o) {
-    o.removeAttribute("aria-haspopup"), o instanceof HTMLButtonElement || o instanceof HTMLInputElement ? o.popoverTargetElement = null : o.removeEventListener("click", this.#s);
-  }
-  #s;
-  // --- Floating UI Logic ---
-  /**
-   * @internal
-   */
-  get #c() {
-    let o = [E(), _(), x(), k()];
-    /* v8 ignore next -- @preserve */
-    let e = this.offset ?? 0;
-    this.arrow && this._arrowEl && (e = 12, o = [
-      ...o,
-      y({ element: this._arrowEl, padding: 10 })
-    ]);
-    /* v8 ignore else -- @preserve */
-    return e > 0 && o.unshift($(e)), o;
-  }
-  /**
-   * @internal
-   */
-  #i;
-  /**
-   * @internal
-   */
-  #e() {
-    this.#i?.(), this.open && this.#o && this._popoverEl && (this.#i = A(
-      this.#o,
-      this._popoverEl,
-      this.#l
-    ));
-  }
-  /**
-   * Tracks the promise of the last position update.
-   * @internal
-   */
-  #n;
-  #l;
-  /**
-   * Updates the position of the popover
-   * @public
-   */
-  async updatePosition() {
-    /* v8 ignore if -- @preserve */
-    if (!this.open || !this.#o || !this._popoverEl) return;
-    const o = await P(
-      this.#o,
-      this._popoverEl,
-      {
-        placement: this.placement,
-        strategy: "fixed",
-        middleware: this.#c
-      }
-    );
-    /* v8 ignore if -- @preserve */
-    this.open && (this.#d(o), this.arrow && this._arrowEl && this.#h(o));
-  }
-  /**
-   * @internal
-   */
-  #d(o) {
-    const { x: e, y: s } = o;
-    Object.assign(this._popoverEl.style, {
-      left: `${e}px`,
-      top: `${s}px`,
-      visibility: o.middlewareData.hide?.referenceHidden ? "hidden" : "visible"
-    });
-  }
-  /**
-   * @internal
-   */
-  #h(o) {
-    /* v8 ignore if -- @preserve */
-    if (!this._arrowEl) return;
-    const { x: e, y: s } = o.middlewareData.arrow, t = {
-      left: "calc(100% - 4px)",
-      right: "-4px",
-      top: "calc(100% - 4px)",
-      bottom: "-4px"
-    }, l = o.placement.split("-")[0];
-    Object.assign(this._arrowEl.style, {
-      left: e ? `${e}px` : t[l],
-      top: s ? `${s}px` : t[l]
-    });
-  }
-  #r;
-  connectedCallback() {
-    super.connectedCallback(), this.#t();
-    /* v8 ignore else -- @preserve */
-    this._popoverEl && (this._popoverEl.addEventListener("toggle", this.#r), this.open && !this._popoverEl.matches(":popover-open") && (this._popoverEl.showPopover(), this.#e()));
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.#i?.(), this.#o && (this.#a(this.#o), this.#o = null);
-    /* v8 ignore else -- @preserve */
-    this._popoverEl && this._popoverEl.removeEventListener("toggle", this.#r);
-  }
-  // --- Methods ---
-  show() {
-    return this.open = !0, this.#n ?? Promise.resolve();
-  }
-  hide() {
-    this.open = !1;
-  }
-  toggle() {
-    this.open = !this.open;
-  }
-}
-r([
-  n({ mode: "fromView" })
-], i.prototype, "placement");
-r([
-  n({ mode: "boolean" })
-], i.prototype, "manual");
-r([
-  n({ mode: "fromView" })
-], i.prototype, "layout");
-r([
-  n({
-    attribute: "offset",
-    mode: "fromView",
-    converter: f
-  })
-], i.prototype, "offset");
-r([
-  n({
-    mode: "boolean"
-  })
-], i.prototype, "alternate");
-r([
-  n({ attribute: "dismiss-button-aria-label" })
-], i.prototype, "dismissButtonAriaLabel");
-r([
-  n({ mode: "boolean" })
-], i.prototype, "arrow");
-r([
-  n({ mode: "boolean" })
-], i.prototype, "open");
-r([
-  v
-], i.prototype, "anchor");
-r([
-  v
-], i.prototype, "_slottedAnchor");
-const I = ({ open: a, manual: o, layout: e }) => F(
-  "control",
-  ["open", !!a],
-  ["manual", !!o],
-  ["condensed", e === "condensed"]
-), U = (a) => {
-  const o = a.tagFor(m), e = a.tagFor(V), s = a.tagFor(B);
-  return p`
-		<slot name="anchor" ${z("_slottedAnchor")}></slot>
-		<${o}>
+p([r({ mode: "fromView" })], A.prototype, "placement", void 0), p([r({ mode: "boolean" })], A.prototype, "manual", void 0), p([r({ mode: "fromView" })], A.prototype, "layout", void 0), p([r({
+	attribute: "offset",
+	mode: "fromView",
+	converter: s
+})], A.prototype, "offset", void 0), p([r({ mode: "boolean" })], A.prototype, "alternate", void 0), p([r({ attribute: "dismiss-button-aria-label" })], A.prototype, "dismissButtonAriaLabel", void 0), p([r({ mode: "boolean" })], A.prototype, "arrow", void 0), p([r({ mode: "boolean" })], A.prototype, "open", void 0), p([t], A.prototype, "anchor", void 0), p([t], A.prototype, "_slottedAnchor", void 0);
+//#endregion
+//#region src/lib/popover/popover.template.ts
+var j = ({ open: e, manual: t, layout: n }) => m("control", ["open", !!e], ["manual", !!t], ["condensed", n === "condensed"]);
+//#endregion
+//#region src/lib/popover/index.ts
+a(i("popover", A, (e) => {
+	let t = e.tagFor(y), r = e.tagFor(_), i = e.tagFor(d);
+	return n`
+		<slot name="anchor" ${u("_slottedAnchor")}></slot>
+		<${t}>
 			<div class="base" 
-				${d("_popoverEl")} 
-				popover="${(t) => t.manual ? "manual" : "auto"}"
+				${c("_popoverEl")} 
+				popover="${(e) => e.manual ? "manual" : "auto"}"
 				tabindex="-1"
 				autofocus
-				${L({
-    role: "dialog",
-    ariaModal: "false"
-  })}
+				${h({
+		role: "dialog",
+		ariaModal: "false"
+	})}
 			>
-				<div class="${I}" 
-					part="${(t) => t.alternate ? "vvd-theme-alternate" : ""}">
+				<div class="${j}" 
+					part="${(e) => e.alternate ? "vvd-theme-alternate" : ""}">
 					<slot></slot>
 					<slot name="footer"></slot>
-					${h(
-    (t) => t.manual,
-    p`<${e}
-							aria-label="${(t) => t.dismissButtonAriaLabel || t.locale.popover.dismissButtonLabel}"
+					${l((e) => e.manual, n`<${r}
+							aria-label="${(e) => e.dismissButtonAriaLabel || e.locale.popover.dismissButtonLabel}"
 							type="button"
 							size="condensed"
 							class="dismiss-button"
-							@click="${(t) => t.hide()}">
-							<${s} name="close-line" slot="icon"></${s}>
-						</${e}>`
-  )}
-					${h(
-    (t) => t.arrow,
-    p`<div class="arrow" ${d("_arrowEl")}></div>`
-  )}
+							@click="${(e) => e.hide()}">
+							<${i} name="close-line" slot="icon"></${i}>
+						</${r}>`)}
+					${l((e) => e.arrow, n`<div class="arrow" ${c("_arrowEl")}></div>`)}
 				</div>
 			</div>
-		</${o}>
+		</${t}>
 	`;
-}, j = w(
-  "popover",
-  i,
-  U,
-  [O, D, u],
-  {
-    styles: H,
-    shadowOptions: {
-      delegatesFocus: !0
-    }
-  }
-), N = g(j);
-N();
+}, [
+	v,
+	f,
+	b
+], {
+	styles: k,
+	shadowOptions: { delegatesFocus: !0 }
+}))();
+//#endregion

package/popup/definition.cjs

@@ -1,13 +1,5 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-require('../unbundled/definition.cjs');
-require('../unbundled/definition6.cjs');
-require('../unbundled/vivid-element.cjs');
-const popup_definition = require('../unbundled/definition5.cjs');
-
-
-
-exports.popupDefinition = popup_definition.popupDefinition;
-exports.registerPopup = popup_definition.registerPopup;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../unbundled/definition2.cjs");
+const require_definition$1 = require("../unbundled/definition10.cjs");
+exports.popupDefinition = require_definition$1.popupDefinition;
+exports.registerPopup = require_definition$1.registerPopup;

package/popup/definition.js

@@ -1,4 +1,3 @@
-import '../unbundled/definition.js';
-import '../unbundled/definition6.js';
-import '../unbundled/vivid-element.js';
-export { p as popupDefinition, r as registerPopup } from '../unbundled/definition5.js';
+import "../unbundled/definition2.js";
+import { n as registerPopup, t as popupDefinition } from "../unbundled/definition10.js";
+export { popupDefinition, registerPopup };

package/popup/index.cjs

@@ -1 +1 @@
-"use strict";const e=require("../bundled/definition9.cjs");e.registerPopup();
+require(`../bundled/vivid-element.cjs`),require(`../bundled/definition2.cjs`),require(`../bundled/definition8.cjs`).n();

package/popup/index.js

@@ -1,2 +1,6 @@
-import { r } from "../bundled/definition9.js";
-r();
+import "../bundled/vivid-element.js";
+import "../bundled/definition2.js";
+import { n as e } from "../bundled/definition8.js";
+//#region src/lib/popup/index.ts
+e();
+//#endregion

package/progress/definition.cjs

@@ -1,87 +1,5 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const vividElement = require('../unbundled/vivid-element.cjs');
-const fastElement = require('@microsoft/fast-element');
-const baseProgress = require('../unbundled/base-progress.cjs');
-const delegatesAria = require('../unbundled/delegates-aria.cjs');
-const fastWebUtilities = require('@microsoft/fast-web-utilities');
-
-const styles = ".base{height:6px;align-items:center;margin:0;outline:none}.base:not(.connotation-pacific).connotation-cta{--_connotation-color-primary: var(--vvd-progress-cta-primary, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-progress-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-pacific).connotation-alert{--_connotation-color-primary: var(--vvd-progress-alert-primary, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-progress-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-pacific).connotation-success{--_connotation-color-primary: var(--vvd-progress-success-primary, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-progress-success-soft, var(--vvd-color-success-100))}.base:not(.connotation-pacific):not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary: var(--vvd-progress-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-progress-accent-soft, var(--vvd-color-neutral-100))}.base:not(.connotation-pacific){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-pacific{--_connotation-color-primary: linear-gradient(to right, var(--vvd-color-information-200), var(--vvd-color-cta-600))}.progress{position:relative;display:flex;overflow:hidden;align-items:center;block-size:100%;inline-size:100%}.base:not(.connotation-pacific) .progress{background-color:var(--_appearance-color-fill)}.base.connotation-pacific .progress{background-color:var(--vvd-color-neutral-100)}.base:not(.shape-sharp) .progress{border-radius:4px}.indeterminate{display:flex;border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;inline-size:100%}.determinate{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;transition:all .2s ease-in-out}.connotation-pacific .determinate{background-image:var(--_connotation-color-primary)}.reverse .determinate{position:absolute;right:0}.paused .determinate{background:var(--vvd-color-neutral-300)}.indicator-1{animation:indeterminate-1 2s infinite;inline-size:30%}.indicator-2{animation:indeterminate-2 2s infinite;inline-size:60%}.indicator-1,.indicator-2{position:absolute;animation-timing-function:cubic-bezier(.4,0,.6,1);background-color:var(--vvd-color-neutral-100);block-size:100%;opacity:0}.connotation-pacific .indicator-1,.connotation-pacific .indicator-2{background-image:var(--_connotation-color-primary)}.paused .indicator-1,.paused .indicator-2{animation-play-state:paused;background-color:var(--_connotation-color-primary)}.reverse .indicator-1,.reverse .indicator-2{animation-direction:reverse}@keyframes indeterminate-1{0%{opacity:1;transform:translate(-100%)}70%{opacity:1;transform:translate(300%)}70.01%{opacity:0}to{opacity:0;transform:translate(300%)}}@keyframes indeterminate-2{0%{opacity:0;transform:translate(-150%)}29.99%{opacity:0}30%{opacity:1;transform:translate(-150%)}to{opacity:1;transform:translate(166.66%)}}";
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-class Progress extends delegatesAria.DelegatesAria(baseProgress.BaseProgress) {
-  constructor() {
-    super(...arguments);
-    this.reverse = false;
-  }
-}
-__decorateClass([
-  fastElement.attr()
-], Progress.prototype, "shape");
-__decorateClass([
-  fastElement.attr()
-], Progress.prototype, "connotation");
-__decorateClass([
-  fastElement.attr({ mode: "boolean" })
-], Progress.prototype, "reverse");
-
-const getClasses = ({ connotation, shape, reverse, paused }) => fastWebUtilities.classNames(
-  "base",
-  [`connotation-${connotation}`, Boolean(connotation)],
-  [`shape-${shape}`, Boolean(shape)],
-  ["reverse", Boolean(reverse)],
-  ["paused", Boolean(paused)]
-);
-function determinate() {
-  return fastElement.html` <span
-		class="determinate"
-		style="width: ${(x) => x.percentComplete}%"
-	></span>`;
-}
-function indeterminate() {
-  return fastElement.html` <span class="indeterminate" name="indeterminate">
-		<span class="indicator-1"></span>
-		<span class="indicator-2"></span>
-	</span>`;
-}
-const ProgressTemplate = fastElement.html`<template>
-	<div
-		class="${getClasses}"
-		${delegatesAria.delegateAria({
-  role: "progressbar",
-  ariaValueNow: (x) => x.value,
-  ariaValueMin: (x) => x.min,
-  ariaValueMax: (x) => x.max
-})}
-	>
-		<div class="progress">
-			${fastElement.when((x) => typeof x.value === "number", determinate())}
-			${fastElement.when((x) => typeof x.value !== "number", indeterminate())}
-		</div>
-	</div>
-</template>`;
-
-const progressDefinition = vividElement.defineVividComponent(
-  "progress",
-  Progress,
-  ProgressTemplate,
-  [],
-  {
-    styles
-  }
-);
-const registerProgress = vividElement.createRegisterFunction(progressDefinition);
-
-exports.VwcProgressElement = Progress;
-exports.progressDefinition = progressDefinition;
-exports.registerProgress = registerProgress;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_definition = require("../unbundled/definition52.cjs");
+exports.VwcProgressElement = require_definition.Progress;
+exports.progressDefinition = require_definition.progressDefinition;
+exports.registerProgress = require_definition.registerProgress;

package/progress/definition.js

@@ -1,81 +1,2 @@
-import { d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
-import { attr, when, html } from '@microsoft/fast-element';
-import { B as BaseProgress } from '../unbundled/base-progress.js';
-import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-aria.js';
-import { classNames } from '@microsoft/fast-web-utilities';
-
-const styles = ".base{height:6px;align-items:center;margin:0;outline:none}.base:not(.connotation-pacific).connotation-cta{--_connotation-color-primary: var(--vvd-progress-cta-primary, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-progress-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-pacific).connotation-alert{--_connotation-color-primary: var(--vvd-progress-alert-primary, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-progress-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-pacific).connotation-success{--_connotation-color-primary: var(--vvd-progress-success-primary, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-progress-success-soft, var(--vvd-color-success-100))}.base:not(.connotation-pacific):not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary: var(--vvd-progress-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-progress-accent-soft, var(--vvd-color-neutral-100))}.base:not(.connotation-pacific){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-pacific{--_connotation-color-primary: linear-gradient(to right, var(--vvd-color-information-200), var(--vvd-color-cta-600))}.progress{position:relative;display:flex;overflow:hidden;align-items:center;block-size:100%;inline-size:100%}.base:not(.connotation-pacific) .progress{background-color:var(--_appearance-color-fill)}.base.connotation-pacific .progress{background-color:var(--vvd-color-neutral-100)}.base:not(.shape-sharp) .progress{border-radius:4px}.indeterminate{display:flex;border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;inline-size:100%}.determinate{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;transition:all .2s ease-in-out}.connotation-pacific .determinate{background-image:var(--_connotation-color-primary)}.reverse .determinate{position:absolute;right:0}.paused .determinate{background:var(--vvd-color-neutral-300)}.indicator-1{animation:indeterminate-1 2s infinite;inline-size:30%}.indicator-2{animation:indeterminate-2 2s infinite;inline-size:60%}.indicator-1,.indicator-2{position:absolute;animation-timing-function:cubic-bezier(.4,0,.6,1);background-color:var(--vvd-color-neutral-100);block-size:100%;opacity:0}.connotation-pacific .indicator-1,.connotation-pacific .indicator-2{background-image:var(--_connotation-color-primary)}.paused .indicator-1,.paused .indicator-2{animation-play-state:paused;background-color:var(--_connotation-color-primary)}.reverse .indicator-1,.reverse .indicator-2{animation-direction:reverse}@keyframes indeterminate-1{0%{opacity:1;transform:translate(-100%)}70%{opacity:1;transform:translate(300%)}70.01%{opacity:0}to{opacity:0;transform:translate(300%)}}@keyframes indeterminate-2{0%{opacity:0;transform:translate(-150%)}29.99%{opacity:0}30%{opacity:1;transform:translate(-150%)}to{opacity:1;transform:translate(166.66%)}}";
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-class Progress extends DelegatesAria(BaseProgress) {
-  constructor() {
-    super(...arguments);
-    this.reverse = false;
-  }
-}
-__decorateClass([
-  attr()
-], Progress.prototype, "shape");
-__decorateClass([
-  attr()
-], Progress.prototype, "connotation");
-__decorateClass([
-  attr({ mode: "boolean" })
-], Progress.prototype, "reverse");
-
-const getClasses = ({ connotation, shape, reverse, paused }) => classNames(
-  "base",
-  [`connotation-${connotation}`, Boolean(connotation)],
-  [`shape-${shape}`, Boolean(shape)],
-  ["reverse", Boolean(reverse)],
-  ["paused", Boolean(paused)]
-);
-function determinate() {
-  return html` <span
-		class="determinate"
-		style="width: ${(x) => x.percentComplete}%"
-	></span>`;
-}
-function indeterminate() {
-  return html` <span class="indeterminate" name="indeterminate">
-		<span class="indicator-1"></span>
-		<span class="indicator-2"></span>
-	</span>`;
-}
-const ProgressTemplate = html`<template>
-	<div
-		class="${getClasses}"
-		${delegateAria({
-  role: "progressbar",
-  ariaValueNow: (x) => x.value,
-  ariaValueMin: (x) => x.min,
-  ariaValueMax: (x) => x.max
-})}
-	>
-		<div class="progress">
-			${when((x) => typeof x.value === "number", determinate())}
-			${when((x) => typeof x.value !== "number", indeterminate())}
-		</div>
-	</div>
-</template>`;
-
-const progressDefinition = defineVividComponent(
-  "progress",
-  Progress,
-  ProgressTemplate,
-  [],
-  {
-    styles
-  }
-);
-const registerProgress = createRegisterFunction(progressDefinition);
-
+import { n as registerProgress, r as Progress, t as progressDefinition } from "../unbundled/definition52.js";
 export { Progress as VwcProgressElement, progressDefinition, registerProgress };