@vonage/vivid 5.0.0 → 5.2.0

package/pagination/index.js

@@ -1,3 +1,194 @@
-import { r as registerPagination } from '../shared/definition38.js';
-
-registerPagination();
+import { B as y, b as z } from "../bundled/definition3.js";
+import { V as w, a as c, o as g, v as B, h as p, c as S, d as _ } from "../bundled/vivid-element.js";
+import { L as P } from "../bundled/localized.js";
+import { a as u, b as v } from "../bundled/enums.js";
+import { e as L } from "../bundled/slotted.js";
+import { c as C } from "../bundled/class-names.js";
+import { r as b } from "../bundled/ref.js";
+import { c as E } from "../bundled/children.js";
+import { r as D } from "../bundled/repeat.js";
+import { w as m } from "../bundled/when.js";
+const A = ".control{display:inline-flex;justify-content:space-between}.control:not(.shape-pill){border-radius:4px}.control.shape-pill{border-radius:16px}.buttons-wrapper{display:flex;column-gap:4px}.vwc-pagination-button[size=super-condensed]{--base-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=condensed]{--base-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=normal]{--base-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button::part(button){padding-inline:0}.dots{align-self:center;text-align:center}.dots:not(.size-super-condensed){font:var(--vvd-typography-base-bold)}.dots.size-super-condensed{font:var(--vvd-typography-base-condensed-bold);inline-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-condensed{inline-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-normal{inline-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}";
+var N = Object.defineProperty, O = Object.getOwnPropertyDescriptor, a = (s, e, t, n) => {
+  for (var i = n > 1 ? void 0 : n ? O(e, t) : e, r = s.length - 1, l; r >= 0; r--)
+    (l = s[r]) && (i = (n ? l(e, t, i) : l(i)) || i);
+  return n && i && N(e, t, i), i;
+};
+const d = 7, x = {
+  fromView: (s) => parseInt(s, 10),
+  toView: (s) => s.toString()
+};
+class o extends P(w) {
+  constructor() {
+    super(), this.navIcons = !1, this.total = 0, this.selectedIndex = 0, this.addEventListener("tabpressed", (e) => {
+      const { value: t, shiftKey: n } = e.detail, i = this.paginationButtons.findIndex(
+        (I) => Number(I.label) === t
+      ), r = n ? -1 : 1, l = i + r;
+      if (l < 0)
+        return this.prevButton.focus();
+      if (l > this.paginationButtons.length - 1)
+        return this.nextButton.focus();
+      this.paginationButtons && this.paginationButtons[i + r].focus();
+    });
+  }
+  get pagesList() {
+    return new Array(
+      this.total < d ? this.total : d
+    ).fill(0).map((e, t, n) => {
+      if (t === 0) return 1;
+      if (t === n.length - 1) return this.total;
+      if (this.selectedIndex !== void 0 && this.total > d) {
+        if (this.selectedIndex < 4 && t === d - 2)
+          return "...";
+        if (this.selectedIndex >= 4 && this.selectedIndex <= this.total - 5) {
+          if (t > 1 && t < d - 2)
+            return this.selectedIndex + (t - 2);
+          if (t === 1 || t === d - 2) return "...";
+        }
+        if (this.selectedIndex > this.total - 5) {
+          if (t > 1) return this.total - (6 - t);
+          if (t === 1) return "...";
+        }
+      }
+      return t + 1;
+    });
+  }
+  totalChanged(e, t) {
+    if (t < 0) {
+      this.total = 0;
+      return;
+    }
+    this.#t();
+  }
+  selectedIndexChanged(e, t) {
+    e !== void 0 && (this.$emit("pagination-change", {
+      selectedIndex: t,
+      total: this.total,
+      oldIndex: e
+    }), this.#t());
+  }
+  paginationButtonsChanged(e, t) {
+    t.forEach((n) => {
+      n.shadowRoot.querySelector("button").setAttribute("part", "button");
+    });
+  }
+  get #e() {
+    return Math.max(0, Math.min(this.selectedIndex ?? 0, this.total - 1));
+  }
+  #t() {
+    this.selectedIndex !== this.#e && window.queueMicrotask(() => {
+      this.selectedIndex !== this.#e && (this.selectedIndex = this.#e);
+    });
+  }
+}
+a([
+  c
+], o.prototype, "size", 2);
+a([
+  c
+], o.prototype, "shape", 2);
+a([
+  g
+], o.prototype, "paginationButtons", 2);
+a([
+  g
+], o.prototype, "prevButton", 2);
+a([
+  g
+], o.prototype, "nextButton", 2);
+a([
+  c({ attribute: "nav-icons", mode: "boolean" })
+], o.prototype, "navIcons", 2);
+a([
+  B
+], o.prototype, "pagesList", 1);
+a([
+  c({ mode: "reflect", converter: x })
+], o.prototype, "total", 2);
+a([
+  c({
+    mode: "reflect",
+    converter: x,
+    attribute: "selected-index"
+  })
+], o.prototype, "selectedIndex", 2);
+const R = [
+  u.SuperCondensed,
+  u.Condensed,
+  u.Normal
+], T = [v.Rounded, v.Pill], $ = (s, { parent: e }) => e.selectedIndex = Number(s) - 1, K = (s, { event: e, parent: t }) => {
+  (e.key === " " || e.key === "Enter") && $(s, { parent: t }), e.key === "Tab" && e.target.dispatchEvent(
+    new CustomEvent("tabpressed", {
+      detail: { value: s, shiftKey: e.shiftKey },
+      bubbles: !0,
+      composed: !0
+    })
+  );
+}, M = (s) => C("control");
+function V(s, { parent: e }) {
+  return e.selectedIndex === Number(s) - 1 ? "filled" : "ghost";
+}
+const j = (s) => p` ${m(
+  (e) => e !== "...",
+  p`
+		<${s} class="vwc-pagination-button"
+			label="${(e) => e}"
+			appearance="${V}"
+			size="${(e, { parent: t }) => h(t)}"
+			shape="${(e, { parent: t }) => f(t)}"
+			style="inline-size: ${(e) => k(e)};"
+			tabindex="0"
+			aria-label="${(e, { parent: t }) => t.locale.pagination.goToPageLabel(e)}"
+			aria-current="${(e, { parent: t }) => t.selectedIndex === Number(e) - 1}"
+			@click="${$}"
+			@keydown="${K}">
+		</${s}>
+	`
+)}
+${m(
+  (e) => e === "...",
+  p` <div
+		class="dots size-${(e, { parent: t }) => h(t)}"
+		aria-hidden="true"
+	>
+		...
+	</div>`
+)}`, h = (s) => !s.size || !R.includes(s.size) ? u.SuperCondensed : s.size, f = (s) => !s.shape || !T.includes(s.shape) ? v.Rounded : s.shape, k = (s) => `calc(var(--base-size) + ${String(s).length - 1}ch)`, W = (s) => {
+  const e = s.tagFor(y), t = j(e);
+  return p`
+	<div class="${M}">
+		<${e} class="prev-button" ${b("prevButton")}
+			label="${(n) => n.navIcons ? null : "Previous"}"
+			icon="${(n) => n.navIcons ? "chevron-left-line" : null}"
+			size="${h}"
+			shape="${f}"
+			?disabled="${(n) => n.total === 0 || n.selectedIndex === 0}"
+			@click="${(n) => n.selectedIndex !== void 0 && n.selectedIndex--}"
+			aria-label="${(n) => n.locale.pagination.previousPageLabel}"
+		></${e}>
+		<div id="buttons-wrapper" class="buttons-wrapper" ${E({
+    property: "paginationButtons",
+    filter: L(e)
+  })}>
+			${D((n) => n.pagesList, t, { positioning: !0 })}
+		</div>
+		<${e} class="next-button" ${b("nextButton")}
+			label="${(n) => n.navIcons ? null : "Next"}"
+			icon="${(n) => n.navIcons ? "chevron-right-line" : null}"
+			size="${h}"
+			shape="${f}"
+			?disabled="${(n) => n.total === 0 || n.selectedIndex === n.total - 1}"
+			@click="${(n) => n.selectedIndex !== void 0 && n.selectedIndex++}"
+			aria-label="${(n) => n.locale.pagination.nextPageLabel}"
+		></${e}>
+</div>`;
+}, q = _(
+  "pagination",
+  o,
+  W,
+  [z],
+  {
+    styles: A
+  }
+), F = S(q);
+F();

package/popup/definition.cjs

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

package/popup/definition.js

@@ -0,0 +1,4 @@
+import '../unbundled/definition.js';
+import '../unbundled/definition5.js';
+import '../unbundled/vivid-element.js';
+export { p as popupDefinition, r as registerPopup } from '../unbundled/definition4.js';

package/popup/index.cjs

@@ -1,5 +1 @@
-'use strict';
-
-const definition = require('../shared/definition67.cjs');
-
-definition.registerPopup();
+"use strict";const e=require("../bundled/definition9.cjs");e.registerPopup();

package/popup/index.js

@@ -1,3 +1,2 @@
-import { r as registerPopup } from '../shared/definition67.js';
-
-registerPopup();
+import { r } from "../bundled/definition9.js";
+r();

package/{shared/definition40.cjs → progress/definition.cjs}

@@ -1,10 +1,12 @@
 'use strict';
 
-const vividElement = require('./vivid-element.cjs');
-const baseProgress = require('./base-progress.cjs');
-const delegatesAria = require('./delegates-aria.cjs');
-const classNames = require('./class-names.cjs');
-const when = require('./when.cjs');
+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%)}}";
 
@@ -24,16 +26,16 @@ class Progress extends delegatesAria.DelegatesAria(baseProgress.BaseProgress) {
   }
 }
 __decorateClass([
-  vividElement.attr()
+  fastElement.attr()
 ], Progress.prototype, "shape");
 __decorateClass([
-  vividElement.attr()
+  fastElement.attr()
 ], Progress.prototype, "connotation");
 __decorateClass([
-  vividElement.attr({ mode: "boolean" })
+  fastElement.attr({ mode: "boolean" })
 ], Progress.prototype, "reverse");
 
-const getClasses = ({ connotation, shape, reverse, paused }) => classNames.classNames(
+const getClasses = ({ connotation, shape, reverse, paused }) => fastWebUtilities.classNames(
   "base",
   [`connotation-${connotation}`, Boolean(connotation)],
   [`shape-${shape}`, Boolean(shape)],
@@ -41,18 +43,18 @@ const getClasses = ({ connotation, shape, reverse, paused }) => classNames.class
   ["paused", Boolean(paused)]
 );
 function determinate() {
-  return vividElement.html` <span
+  return fastElement.html` <span
 		class="determinate"
 		style="width: ${(x) => x.percentComplete}%"
 	></span>`;
 }
 function indeterminate() {
-  return vividElement.html` <span class="indeterminate" name="indeterminate">
+  return fastElement.html` <span class="indeterminate" name="indeterminate">
 		<span class="indicator-1"></span>
 		<span class="indicator-2"></span>
 	</span>`;
 }
-const ProgressTemplate = vividElement.html`<template>
+const ProgressTemplate = fastElement.html`<template>
 	<div
 		class="${getClasses}"
 		${delegatesAria.delegateAria({
@@ -63,8 +65,8 @@ const ProgressTemplate = vividElement.html`<template>
 })}
 	>
 		<div class="progress">
-			${when.when((x) => typeof x.value === "number", determinate())}
-			${when.when((x) => typeof x.value !== "number", indeterminate())}
+			${fastElement.when((x) => typeof x.value === "number", determinate())}
+			${fastElement.when((x) => typeof x.value !== "number", indeterminate())}
 		</div>
 	</div>
 </template>`;
@@ -80,6 +82,6 @@ const progressDefinition = vividElement.defineVividComponent(
 );
 const registerProgress = vividElement.createRegisterFunction(progressDefinition);
 
-exports.Progress = Progress;
+exports.VwcProgressElement = Progress;
 exports.progressDefinition = progressDefinition;
 exports.registerProgress = registerProgress;

package/{shared/definition40.js → progress/definition.js}

@@ -1,8 +1,8 @@
-import { a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
-import { B as BaseProgress } from './base-progress.js';
-import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
-import { c as classNames } from './class-names.js';
-import { w as when } from './when.js';
+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%)}}";
 
@@ -78,4 +78,4 @@ const progressDefinition = defineVividComponent(
 );
 const registerProgress = createRegisterFunction(progressDefinition);
 
-export { Progress as P, progressDefinition as p, registerProgress as r };
+export { Progress as VwcProgressElement, progressDefinition, registerProgress };

package/progress/index.cjs

@@ -1,5 +1,17 @@
-'use strict';
-
-const definition = require('../shared/definition40.cjs');
-
-definition.registerProgress();
+"use strict";const a=require("../bundled/vivid-element.cjs"),d=require("../bundled/base-progress.cjs"),v=require("../bundled/delegates-aria.cjs"),m=require("../bundled/class-names.cjs"),p=require("../bundled/when.cjs"),u=".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 f=Object.defineProperty,s=(o,n,t,c)=>{for(var r=void 0,i=o.length-1,l;i>=0;i--)(l=o[i])&&(r=l(n,t,r)||r);return r&&f(n,t,r),r};class e extends v.DelegatesAria(d.BaseProgress){constructor(){super(...arguments),this.reverse=!1}}s([a.attr()],e.prototype,"shape");s([a.attr()],e.prototype,"connotation");s([a.attr({mode:"boolean"})],e.prototype,"reverse");const g=({connotation:o,shape:n,reverse:t,paused:c})=>m.classNames("base",[`connotation-${o}`,!!o],[`shape-${n}`,!!n],["reverse",!!t],["paused",!!c]);function b(){return a.html` <span
+		class="determinate"
+		style="width: ${o=>o.percentComplete}%"
+	></span>`}function y(){return a.html` <span class="indeterminate" name="indeterminate">
+		<span class="indicator-1"></span>
+		<span class="indicator-2"></span>
+	</span>`}const _=a.html`<template>
+	<div
+		class="${g}"
+		${v.delegateAria({role:"progressbar",ariaValueNow:o=>o.value,ariaValueMin:o=>o.min,ariaValueMax:o=>o.max})}
+	>
+		<div class="progress">
+			${p.when(o=>typeof o.value=="number",b())}
+			${p.when(o=>typeof o.value!="number",y())}
+		</div>
+	</div>
+</template>`,h=a.defineVividComponent("progress",e,_,[],{styles:u}),k=a.createRegisterFunction(h);k();

package/progress/index.js

@@ -1,3 +1,69 @@
-import { r as registerProgress } from '../shared/definition40.js';
-
-registerProgress();
+import { a as i, h as s, c as d, d as m } from "../bundled/vivid-element.js";
+import { B as f } from "../bundled/base-progress.js";
+import { D as u, d as g } from "../bundled/delegates-aria.js";
+import { c as b } from "../bundled/class-names.js";
+import { w as v } from "../bundled/when.js";
+const y = ".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 _ = Object.defineProperty, c = (o, r, n, l) => {
+  for (var a = void 0, e = o.length - 1, p; e >= 0; e--)
+    (p = o[e]) && (a = p(r, n, a) || a);
+  return a && _(r, n, a), a;
+};
+class t extends u(f) {
+  constructor() {
+    super(...arguments), this.reverse = !1;
+  }
+}
+c([
+  i()
+], t.prototype, "shape");
+c([
+  i()
+], t.prototype, "connotation");
+c([
+  i({ mode: "boolean" })
+], t.prototype, "reverse");
+const h = ({ connotation: o, shape: r, reverse: n, paused: l }) => b(
+  "base",
+  [`connotation-${o}`, !!o],
+  [`shape-${r}`, !!r],
+  ["reverse", !!n],
+  ["paused", !!l]
+);
+function k() {
+  return s` <span
+		class="determinate"
+		style="width: ${(o) => o.percentComplete}%"
+	></span>`;
+}
+function x() {
+  return s` <span class="indeterminate" name="indeterminate">
+		<span class="indicator-1"></span>
+		<span class="indicator-2"></span>
+	</span>`;
+}
+const z = s`<template>
+	<div
+		class="${h}"
+		${g({
+  role: "progressbar",
+  ariaValueNow: (o) => o.value,
+  ariaValueMin: (o) => o.min,
+  ariaValueMax: (o) => o.max
+})}
+	>
+		<div class="progress">
+			${v((o) => typeof o.value == "number", k())}
+			${v((o) => typeof o.value != "number", x())}
+		</div>
+	</div>
+</template>`, $ = m(
+  "progress",
+  t,
+  z,
+  [],
+  {
+    styles: y
+  }
+), B = d($);
+B();

package/{shared/definition39.cjs → progress-ring/definition.cjs}

@@ -1,12 +1,14 @@
 'use strict';
 
-const vividElement = require('./vivid-element.cjs');
-const baseProgress = require('./base-progress.cjs');
-const delegatesAria = require('./delegates-aria.cjs');
-const classNames = require('./class-names.cjs');
-const when = require('./when.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const styles = ":host{--_vvd-progress-ring-accent-firm-wrapper: var( --vvd-progress-ring-accent-firm );--_vvd-progress-ring-cta-firm-wrapper: var( --vvd-progress-ring-cta-firm );--_vvd-progress-ring-alert-firm-wrapper: var( --vvd-progress-ring-alert-firm );--_vvd-progress-ring-success-firm-wrapper: var( --vvd-progress-ring-success-firm )}.base{--vvd-progress-ring-accent-firm: var( --_vvd-progress-ring-accent-firm-wrapper, var(--vvd-progress-ring-accent-primary) );--vvd-progress-ring-cta-firm: var( --_vvd-progress-ring-cta-firm-wrapper, var(--vvd-progress-ring-cta-primary) );--vvd-progress-ring-alert-firm: var( --_vvd-progress-ring-alert-firm-wrapper, var(--vvd-progress-ring-alert-primary) );--vvd-progress-ring-success-firm: var( --_vvd-progress-ring-success-firm-wrapper, var(--vvd-progress-ring-success-primary) )}.base.connotation-cta{--_connotation-color-firm: var(--vvd-progress-ring-cta-firm, var(--vvd-color-cta-600))}.base.connotation-alert{--_connotation-color-firm: var(--vvd-progress-ring-alert-firm, var(--vvd-color-alert-600))}.base.connotation-success{--_connotation-color-firm: var(--vvd-progress-ring-success-firm, var(--vvd-color-success-600))}.base:not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-firm: var(--vvd-progress-ring-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.size--6{--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) }.base.size--5{--_size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--4{--_size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--3{--_size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--2{--_size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--1{--_size: calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-1{--_size: calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-2{--_size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-3{--_size: calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-4{--_size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-5{--_size: calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-1,.size-2,.size-3,.size-4,.size-5){--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base{align-items:center;block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none}.progress{width:100%;height:100%}.background{fill:none;stroke:transparent;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.indeterminate-indicator-1{animation:spin-infinite 2s linear infinite;fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01px 43.97px;transform:rotate(0)}50%{stroke-dasharray:21.99px 21.99px;transform:rotate(450deg)}to{stroke-dasharray:.01px 43.97px;transform:rotate(1080deg)}}";
+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 = ":host{--_vvd-progress-ring-accent-firm-wrapper: var( --vvd-progress-ring-accent-firm );--_vvd-progress-ring-cta-firm-wrapper: var( --vvd-progress-ring-cta-firm );--_vvd-progress-ring-alert-firm-wrapper: var( --vvd-progress-ring-alert-firm );--_vvd-progress-ring-success-firm-wrapper: var( --vvd-progress-ring-success-firm )}.base{--vvd-progress-ring-accent-firm: var( --_vvd-progress-ring-accent-firm-wrapper, var(--vvd-progress-ring-accent-primary) );--vvd-progress-ring-cta-firm: var( --_vvd-progress-ring-cta-firm-wrapper, var(--vvd-progress-ring-cta-primary) );--vvd-progress-ring-alert-firm: var( --_vvd-progress-ring-alert-firm-wrapper, var(--vvd-progress-ring-alert-primary) );--vvd-progress-ring-success-firm: var( --_vvd-progress-ring-success-firm-wrapper, var(--vvd-progress-ring-success-primary) )}.base.connotation-cta{--_connotation-color-firm: var(--vvd-progress-ring-cta-firm, var(--vvd-color-cta-600))}.base.connotation-alert{--_connotation-color-firm: var(--vvd-progress-ring-alert-firm, var(--vvd-color-alert-600))}.base.connotation-success{--_connotation-color-firm: var(--vvd-progress-ring-success-firm, var(--vvd-color-success-600))}.base:not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-firm: var(--vvd-progress-ring-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.size--6{--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) }.base.size--5{--_size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--4{--_size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--3{--_size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--2{--_size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--1{--_size: calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-1{--_size: calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-2{--_size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-3{--_size: calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-4{--_size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-5{--_size: calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-1,.size-2,.size-3,.size-4,.size-5){--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base{align-items:center;block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none}.progress{width:100%;height:100%}.background{fill:none;stroke:transparent;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.indeterminate-indicator-1{animation:spin-infinite 2s linear infinite;fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01px 43.97px;transform:rotate(0)}50%{stroke-dasharray:21.99px 21.99px;transform:rotate(450deg)}to{stroke-dasharray:.01px 43.97px;transform:rotate(1080deg)}}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -20,20 +22,20 @@ var __decorateClass = (decorators, target, key, kind) => {
 class ProgressRing extends delegatesAria.DelegatesAria(baseProgress.BaseProgress) {
 }
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], ProgressRing.prototype, "connotation");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], ProgressRing.prototype, "size");
 
-const getClasses = ({ connotation, size, paused }) => classNames.classNames(
+const getClasses = ({ connotation, size, paused }) => fastWebUtilities.classNames(
   "base",
   ["disabled", !!paused],
   [`connotation-${connotation}`, !!connotation],
   [`size-${size}`, !!size]
 );
 const progressSegments = 44;
-const ProgressRingTemplate = vividElement.html`<template>
+const ProgressRingTemplate = fastElement.html`<template>
 	<div
 		class="${(x) => x.paused ? "paused" : ""} ${getClasses}"
 		${delegatesAria.delegateAria({
@@ -43,9 +45,9 @@ const ProgressRingTemplate = vividElement.html`<template>
   ariaValueMax: (x) => x.max
 })}
 	>
-		${when.when(
+		${fastElement.when(
   (x) => typeof x.value === "number",
-  vividElement.html`
+  fastElement.html`
 				<svg class="progress" viewBox="0 0 16 16">
 					<circle class="background" cx="8px" cy="8px" r="7px"></circle>
 					<circle
@@ -58,9 +60,9 @@ const ProgressRingTemplate = vividElement.html`<template>
 				</svg>
 			`
 )}
-		${when.when(
+		${fastElement.when(
   (x) => typeof x.value !== "number",
-  vividElement.html`
+  fastElement.html`
 				<svg class="progress" viewBox="0 0 16 16">
 					<circle class="background" cx="8px" cy="8px" r="7px"></circle>
 					<circle
@@ -88,6 +90,6 @@ const registerProgressRing = vividElement.createRegisterFunction(
   progressRingDefinition
 );
 
-exports.ProgressRing = ProgressRing;
+exports.VwcProgressRingElement = ProgressRing;
 exports.progressRingDefinition = progressRingDefinition;
 exports.registerProgressRing = registerProgressRing;

package/{shared/definition39.js → progress-ring/definition.js}

@@ -1,10 +1,10 @@
-import { a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
-import { B as BaseProgress } from './base-progress.js';
-import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
-import { c as classNames } from './class-names.js';
-import { w as when } from './when.js';
+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 = ":host{--_vvd-progress-ring-accent-firm-wrapper: var( --vvd-progress-ring-accent-firm );--_vvd-progress-ring-cta-firm-wrapper: var( --vvd-progress-ring-cta-firm );--_vvd-progress-ring-alert-firm-wrapper: var( --vvd-progress-ring-alert-firm );--_vvd-progress-ring-success-firm-wrapper: var( --vvd-progress-ring-success-firm )}.base{--vvd-progress-ring-accent-firm: var( --_vvd-progress-ring-accent-firm-wrapper, var(--vvd-progress-ring-accent-primary) );--vvd-progress-ring-cta-firm: var( --_vvd-progress-ring-cta-firm-wrapper, var(--vvd-progress-ring-cta-primary) );--vvd-progress-ring-alert-firm: var( --_vvd-progress-ring-alert-firm-wrapper, var(--vvd-progress-ring-alert-primary) );--vvd-progress-ring-success-firm: var( --_vvd-progress-ring-success-firm-wrapper, var(--vvd-progress-ring-success-primary) )}.base.connotation-cta{--_connotation-color-firm: var(--vvd-progress-ring-cta-firm, var(--vvd-color-cta-600))}.base.connotation-alert{--_connotation-color-firm: var(--vvd-progress-ring-alert-firm, var(--vvd-color-alert-600))}.base.connotation-success{--_connotation-color-firm: var(--vvd-progress-ring-success-firm, var(--vvd-color-success-600))}.base:not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-firm: var(--vvd-progress-ring-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.size--6{--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) }.base.size--5{--_size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--4{--_size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--3{--_size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--2{--_size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--1{--_size: calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-1{--_size: calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-2{--_size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-3{--_size: calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-4{--_size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-5{--_size: calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-1,.size-2,.size-3,.size-4,.size-5){--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base{align-items:center;block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none}.progress{width:100%;height:100%}.background{fill:none;stroke:transparent;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.indeterminate-indicator-1{animation:spin-infinite 2s linear infinite;fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01px 43.97px;transform:rotate(0)}50%{stroke-dasharray:21.99px 21.99px;transform:rotate(450deg)}to{stroke-dasharray:.01px 43.97px;transform:rotate(1080deg)}}";
+const styles = ":host{--_vvd-progress-ring-accent-firm-wrapper: var( --vvd-progress-ring-accent-firm );--_vvd-progress-ring-cta-firm-wrapper: var( --vvd-progress-ring-cta-firm );--_vvd-progress-ring-alert-firm-wrapper: var( --vvd-progress-ring-alert-firm );--_vvd-progress-ring-success-firm-wrapper: var( --vvd-progress-ring-success-firm )}.base{--vvd-progress-ring-accent-firm: var( --_vvd-progress-ring-accent-firm-wrapper, var(--vvd-progress-ring-accent-primary) );--vvd-progress-ring-cta-firm: var( --_vvd-progress-ring-cta-firm-wrapper, var(--vvd-progress-ring-cta-primary) );--vvd-progress-ring-alert-firm: var( --_vvd-progress-ring-alert-firm-wrapper, var(--vvd-progress-ring-alert-primary) );--vvd-progress-ring-success-firm: var( --_vvd-progress-ring-success-firm-wrapper, var(--vvd-progress-ring-success-primary) )}.base.connotation-cta{--_connotation-color-firm: var(--vvd-progress-ring-cta-firm, var(--vvd-color-cta-600))}.base.connotation-alert{--_connotation-color-firm: var(--vvd-progress-ring-alert-firm, var(--vvd-color-alert-600))}.base.connotation-success{--_connotation-color-firm: var(--vvd-progress-ring-success-firm, var(--vvd-color-success-600))}.base:not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-firm: var(--vvd-progress-ring-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.size--6{--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) }.base.size--5{--_size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--4{--_size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--3{--_size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--2{--_size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--1{--_size: calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-1{--_size: calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-2{--_size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-3{--_size: calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-4{--_size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-5{--_size: calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-1,.size-2,.size-3,.size-4,.size-5){--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base{align-items:center;block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none}.progress{width:100%;height:100%}.background{fill:none;stroke:transparent;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.indeterminate-indicator-1{animation:spin-infinite 2s linear infinite;fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01px 43.97px;transform:rotate(0)}50%{stroke-dasharray:21.99px 21.99px;transform:rotate(450deg)}to{stroke-dasharray:.01px 43.97px;transform:rotate(1080deg)}}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -86,4 +86,4 @@ const registerProgressRing = createRegisterFunction(
   progressRingDefinition
 );
 
-export { ProgressRing as P, progressRingDefinition as p, registerProgressRing as r };
+export { ProgressRing as VwcProgressRingElement, progressRingDefinition, registerProgressRing };

package/progress-ring/index.cjs

@@ -1,5 +1 @@
-'use strict';
-
-const definition = require('../shared/definition39.cjs');
-
-definition.registerProgressRing();
+"use strict";const e=require("../bundled/definition15.cjs");e.registerProgressRing();

package/progress-ring/index.js

@@ -1,3 +1,2 @@
-import { r as registerProgressRing } from '../shared/definition39.js';
-
-registerProgressRing();
+import { r } from "../bundled/definition15.js";
+r();