@vonage/vivid 5.15.1 → 5.16.0

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

package/progress/index.cjs

@@ -1,17 +1,17 @@
-"use strict";const a=require("../bundled/vivid-element.cjs"),d=require("../bundled/base-progress.cjs"),v=require("../bundled/delegates-aria.cjs"),p=require("../bundled/when.cjs"),m=require("../bundled/class-names.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
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`),n=require(`../bundled/decorate.cjs`),r=require(`../bundled/class-names.cjs`),i=require(`../bundled/delegates-aria.cjs`),a=require(`../bundled/base-progress.cjs`);var o=`.base{outline:none;align-items:center;height:6px;margin:0}.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{align-items:center;block-size:100%;inline-size:100%;display:flex;position:relative;overflow:hidden}.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{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;inline-size:100%;display:flex}.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{inline-size:30%;animation:2s infinite indeterminate-1}.indicator-2{inline-size:60%;animation:2s infinite indeterminate-2}.indicator-1,.indicator-2{background-color:var(--vvd-color-neutral-100);opacity:0;block-size:100%;animation-timing-function:cubic-bezier(.4,0,.6,1);position:absolute}.connotation-pacific .indicator-1,.connotation-pacific .indicator-2{background-image:var(--_connotation-color-primary)}.paused .indicator-1,.paused .indicator-2{background-color:var(--_connotation-color-primary);animation-play-state:paused}.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%)}}`,s=class extends i.t(a.t){constructor(...e){super(...e),this.reverse=!1}};n.t([e.l()],s.prototype,`shape`,void 0),n.t([e.l()],s.prototype,`connotation`,void 0),n.t([e.l({mode:`boolean`})],s.prototype,`reverse`,void 0);var c=({connotation:e,shape:t,reverse:n,paused:i})=>r.t(`base`,[`connotation-${e}`,!!e],[`shape-${t}`,!!t],[`reverse`,!!n],[`paused`,!!i]);function l(){return e.d` <span
 		class="determinate"
-		style="width: ${o=>o.percentComplete}%"
-	></span>`}function y(){return a.html` <span class="indeterminate" name="indeterminate">
+		style="width: ${e=>e.percentComplete}%"
+	></span>`}function u(){return e.d` <span class="indeterminate" name="indeterminate">
 		<span class="indicator-1"></span>
 		<span class="indicator-2"></span>
-	</span>`}const _=a.html`<template>
+	</span>`}var d=e.d`<template>
 	<div
-		class="${g}"
-		${v.delegateAria({role:"progressbar",ariaValueNow:o=>o.value,ariaValueMin:o=>o.min,ariaValueMax:o=>o.max})}
+		class="${c}"
+		${i.n({role:`progressbar`,ariaValueNow:e=>e.value,ariaValueMin:e=>e.min,ariaValueMax:e=>e.max})}
 	>
 		<div class="progress">
-			${p.when(o=>typeof o.value=="number",b())}
-			${p.when(o=>typeof o.value!="number",y())}
+			${t.t(e=>typeof e.value==`number`,l())}
+			${t.t(e=>typeof e.value!=`number`,u())}
 		</div>
 	</div>
-</template>`,h=a.defineVividComponent("progress",e,_,[],{styles:u}),k=a.createRegisterFunction(h);k();
+</template>`,f=e.o(`progress`,s,d,[],{styles:o});e.s(f)();

package/progress/index.js

@@ -1,69 +1,47 @@
-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 { w as v } from "../bundled/when.js";
-import { c as b } from "../bundled/class-names.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;
+import { d as e, l as t, o as n, s as r } from "../bundled/vivid-element.js";
+import { t as i } from "../bundled/when.js";
+import { t as a } from "../bundled/decorate.js";
+import { t as o } from "../bundled/class-names.js";
+import { n as s, t as c } from "../bundled/delegates-aria.js";
+import { t as l } from "../bundled/base-progress.js";
+//#region src/lib/progress/progress.scss?inline
+var u = ".base{outline:none;align-items:center;height:6px;margin:0}.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{align-items:center;block-size:100%;inline-size:100%;display:flex;position:relative;overflow:hidden}.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{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;inline-size:100%;display:flex}.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{inline-size:30%;animation:2s infinite indeterminate-1}.indicator-2{inline-size:60%;animation:2s infinite indeterminate-2}.indicator-1,.indicator-2{background-color:var(--vvd-color-neutral-100);opacity:0;block-size:100%;animation-timing-function:cubic-bezier(.4,0,.6,1);position:absolute}.connotation-pacific .indicator-1,.connotation-pacific .indicator-2{background-image:var(--_connotation-color-primary)}.paused .indicator-1,.paused .indicator-2{background-color:var(--_connotation-color-primary);animation-play-state:paused}.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%)}}", d = class extends c(l) {
+	constructor(...e) {
+		super(...e), this.reverse = !1;
+	}
 };
-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
+a([t()], d.prototype, "shape", void 0), a([t()], d.prototype, "connotation", void 0), a([t({ mode: "boolean" })], d.prototype, "reverse", void 0);
+//#endregion
+//#region src/lib/progress/progress.template.ts
+var f = ({ connotation: e, shape: t, reverse: n, paused: r }) => o("base", [`connotation-${e}`, !!e], [`shape-${t}`, !!t], ["reverse", !!n], ["paused", !!r]);
+function p() {
+	return e` <span
 		class="determinate"
-		style="width: ${(o) => o.percentComplete}%"
+		style="width: ${(e) => e.percentComplete}%"
 	></span>`;
 }
-function x() {
-  return s` <span class="indeterminate" name="indeterminate">
+function m() {
+	return e` <span class="indeterminate" name="indeterminate">
 		<span class="indicator-1"></span>
 		<span class="indicator-2"></span>
 	</span>`;
 }
-const z = s`<template>
+//#endregion
+//#region src/lib/progress/index.ts
+r(n("progress", d, e`<template>
 	<div
-		class="${h}"
-		${g({
-  role: "progressbar",
-  ariaValueNow: (o) => o.value,
-  ariaValueMin: (o) => o.min,
-  ariaValueMax: (o) => o.max
+		class="${f}"
+		${s({
+	role: "progressbar",
+	ariaValueNow: (e) => e.value,
+	ariaValueMin: (e) => e.min,
+	ariaValueMax: (e) => e.max
 })}
 	>
 		<div class="progress">
-			${v((o) => typeof o.value == "number", k())}
-			${v((o) => typeof o.value != "number", x())}
+			${i((e) => typeof e.value == "number", p())}
+			${i((e) => typeof e.value != "number", m())}
 		</div>
 	</div>
-</template>`, $ = m(
-  "progress",
-  t,
-  z,
-  [],
-  {
-    styles: y
-  }
-), B = d($);
-B();
+</template>`, [], { styles: u }))();
+//#endregion

package/progress-ring/definition.cjs

@@ -1,95 +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 = ":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) => {
-  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 ProgressRing extends delegatesAria.DelegatesAria(baseProgress.BaseProgress) {
-}
-__decorateClass([
-  fastElement.attr
-], ProgressRing.prototype, "connotation");
-__decorateClass([
-  fastElement.attr
-], ProgressRing.prototype, "size");
-
-const getClasses = ({ connotation, size, paused }) => fastWebUtilities.classNames(
-  "base",
-  ["disabled", !!paused],
-  [`connotation-${connotation}`, !!connotation],
-  [`size-${size}`, !!size]
-);
-const progressSegments = 44;
-const ProgressRingTemplate = fastElement.html`<template>
-	<div
-		class="${(x) => x.paused ? "paused" : ""} ${getClasses}"
-		${delegatesAria.delegateAria({
-  role: "progressbar",
-  ariaValueNow: (x) => x.value,
-  ariaValueMin: (x) => x.min,
-  ariaValueMax: (x) => x.max
-})}
-	>
-		${fastElement.when(
-  (x) => typeof x.value === "number",
-  fastElement.html`
-				<svg class="progress" viewBox="0 0 16 16">
-					<circle class="background" cx="8px" cy="8px" r="7px"></circle>
-					<circle
-						class="determinate"
-						style="stroke-dasharray: ${(x) => progressSegments * x.percentComplete / 100}px ${progressSegments}px"
-						cx="8px"
-						cy="8px"
-						r="7px"
-					></circle>
-				</svg>
-			`
-)}
-		${fastElement.when(
-  (x) => typeof x.value !== "number",
-  fastElement.html`
-				<svg class="progress" viewBox="0 0 16 16">
-					<circle class="background" cx="8px" cy="8px" r="7px"></circle>
-					<circle
-						class="indeterminate-indicator-1"
-						cx="8px"
-						cy="8px"
-						r="7px"
-					></circle>
-				</svg>
-			`
-)}
-	</div>
-</template>`;
-
-const progressRingDefinition = vividElement.defineVividComponent(
-  "progress-ring",
-  ProgressRing,
-  ProgressRingTemplate,
-  [],
-  {
-    styles
-  }
-);
-const registerProgressRing = vividElement.createRegisterFunction(
-  progressRingDefinition
-);
-
-exports.VwcProgressRingElement = ProgressRing;
-exports.progressRingDefinition = progressRingDefinition;
-exports.registerProgressRing = registerProgressRing;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_definition = require("../unbundled/definition6.cjs");
+exports.VwcProgressRingElement = require_definition.ProgressRing;
+exports.progressRingDefinition = require_definition.progressRingDefinition;
+exports.registerProgressRing = require_definition.registerProgressRing;

package/progress-ring/definition.js

@@ -1,89 +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 = ":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) => {
-  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 ProgressRing extends DelegatesAria(BaseProgress) {
-}
-__decorateClass([
-  attr
-], ProgressRing.prototype, "connotation");
-__decorateClass([
-  attr
-], ProgressRing.prototype, "size");
-
-const getClasses = ({ connotation, size, paused }) => classNames(
-  "base",
-  ["disabled", !!paused],
-  [`connotation-${connotation}`, !!connotation],
-  [`size-${size}`, !!size]
-);
-const progressSegments = 44;
-const ProgressRingTemplate = html`<template>
-	<div
-		class="${(x) => x.paused ? "paused" : ""} ${getClasses}"
-		${delegateAria({
-  role: "progressbar",
-  ariaValueNow: (x) => x.value,
-  ariaValueMin: (x) => x.min,
-  ariaValueMax: (x) => x.max
-})}
-	>
-		${when(
-  (x) => typeof x.value === "number",
-  html`
-				<svg class="progress" viewBox="0 0 16 16">
-					<circle class="background" cx="8px" cy="8px" r="7px"></circle>
-					<circle
-						class="determinate"
-						style="stroke-dasharray: ${(x) => progressSegments * x.percentComplete / 100}px ${progressSegments}px"
-						cx="8px"
-						cy="8px"
-						r="7px"
-					></circle>
-				</svg>
-			`
-)}
-		${when(
-  (x) => typeof x.value !== "number",
-  html`
-				<svg class="progress" viewBox="0 0 16 16">
-					<circle class="background" cx="8px" cy="8px" r="7px"></circle>
-					<circle
-						class="indeterminate-indicator-1"
-						cx="8px"
-						cy="8px"
-						r="7px"
-					></circle>
-				</svg>
-			`
-)}
-	</div>
-</template>`;
-
-const progressRingDefinition = defineVividComponent(
-  "progress-ring",
-  ProgressRing,
-  ProgressRingTemplate,
-  [],
-  {
-    styles
-  }
-);
-const registerProgressRing = createRegisterFunction(
-  progressRingDefinition
-);
-
+import { n as registerProgressRing, r as ProgressRing, t as progressRingDefinition } from "../unbundled/definition6.js";
 export { ProgressRing as VwcProgressRingElement, progressRingDefinition, registerProgressRing };

package/progress-ring/index.cjs

@@ -1 +1 @@
-"use strict";const e=require("../bundled/definition16.cjs");e.registerProgressRing();
+require(`../bundled/vivid-element.cjs`),require(`../bundled/definition5.cjs`).n();

package/progress-ring/index.js

@@ -1,2 +1,5 @@
-import { r } from "../bundled/definition16.js";
-r();
+import "../bundled/vivid-element.js";
+import { n as e } from "../bundled/definition5.js";
+//#region src/lib/progress-ring/index.ts
+e();
+//#endregion