@vonage/vivid 3.51.0 → 3.53.0

package/shared/definition38.cjs

@@ -5,7 +5,7 @@ const baseProgress = require('./base-progress.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
 
-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;background-color:var(--_connotation-color-primary);block-size:100%;border-radius:inherit;inline-size:100%}.determinate{background-color:var(--_connotation-color-primary);block-size:100%;border-radius:inherit;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%)}}\n";
+const styles = ".base{align-items:center;block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none}.base.connotation-cta{--_connotation-color-primary: var(--vvd-progress-ring-cta-primary, var(--vvd-color-cta-500))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-progress-ring-alert-primary, var(--vvd-color-alert-500))}.base.connotation-success{--_connotation-color-primary: var(--vvd-progress-ring-success-primary, var(--vvd-color-success-500))}.base:not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary: var(--vvd-progress-ring-accent-primary, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--_connotation-color-primary);--_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)))}.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)}}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -18,75 +18,79 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-class Progress extends baseProgress.BaseProgress {
+class ProgressRing extends baseProgress.BaseProgress {
   constructor() {
     super(...arguments);
     this.ariaLabel = null;
-    this.reverse = false;
   }
 }
 __decorateClass([
   index.attr({ attribute: "aria-label" })
-], Progress.prototype, "ariaLabel", 2);
+], ProgressRing.prototype, "ariaLabel", 2);
 __decorateClass([
-  index.attr()
-], Progress.prototype, "shape", 2);
+  index.attr
+], ProgressRing.prototype, "connotation", 2);
 __decorateClass([
-  index.attr()
-], Progress.prototype, "connotation", 2);
-__decorateClass([
-  index.attr({ mode: "boolean" })
-], Progress.prototype, "reverse", 2);
+  index.attr
+], ProgressRing.prototype, "size", 2);
 
-const getClasses = ({
-  connotation,
-  shape,
-  reverse,
-  paused
-}) => classNames.classNames(
+const getClasses = ({ connotation, size, paused }) => classNames.classNames(
   "base",
-  [`connotation-${connotation}`, Boolean(connotation)],
-  [`shape-${shape}`, Boolean(shape)],
-  ["reverse", Boolean(reverse)],
-  ["paused", Boolean(paused)]
+  ["disabled", !!paused],
+  [`connotation-${connotation}`, !!connotation],
+  [`size-${size}`, !!size]
 );
-function determinate() {
-  return index.html`
-		<span class="determinate" style="width: ${(x) => x.percentComplete}%"></span>`;
-}
-function indeterminate() {
-  return index.html`
-		<span class="indeterminate" name="indeterminate">
-			<span class="indicator-1"></span>
-			<span class="indicator-2"></span>
-		 </span>`;
-}
-const ProgressTemplate = (_) => {
-  return index.html`<template role="${(x) => x.ariaLabel ? "presentation" : null}">
-    <div
+const progressSegments = 44;
+const ProgressRingTemplate = (_) => index.html`<template role="${(x) => x.ariaLabel ? "presentation" : null}">
+	<div
 		role="progressbar"
 		aria-label="${(x) => x.ariaLabel}"
 		aria-valuenow="${(x) => x.value}"
 		aria-valuemin="${(x) => x.min}"
 		aria-valuemax="${(x) => x.max}"
-		class="${getClasses}"
-    >
-		<div class="progress">
-		  ${when.when((x) => typeof x.value === "number", determinate())}
-		  ${when.when((x) => typeof x.value !== "number", indeterminate())}
-    	</div>
+		class="${(x) => x.paused ? "paused" : ""} ${getClasses}"
+	>
+		${when.when(
+  (x) => typeof x.value === "number",
+  index.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.when(
+  (x) => typeof x.value !== "number",
+  index.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>`;
-};
+</template>`;
 
-const progressDefinition = Progress.compose({
-  baseName: "progress",
-  template: ProgressTemplate,
+const progressRingDefinition = ProgressRing.compose({
+  baseName: "progress-ring",
+  template: ProgressRingTemplate,
   styles
 });
-const progressRegistries = [progressDefinition()];
-const registerProgress = index.registerFactory(progressRegistries);
+const progressRingRegistries = [progressRingDefinition()];
+const registerProgressRing = index.registerFactory(progressRingRegistries);
 
-exports.progressDefinition = progressDefinition;
-exports.progressRegistries = progressRegistries;
-exports.registerProgress = registerProgress;
+exports.ProgressRing = ProgressRing;
+exports.progressRingDefinition = progressRingDefinition;
+exports.progressRingRegistries = progressRingRegistries;
+exports.registerProgressRing = registerProgressRing;

package/shared/definition38.js

@@ -3,7 +3,7 @@ import { B as BaseProgress } from './base-progress.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-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;background-color:var(--_connotation-color-primary);block-size:100%;border-radius:inherit;inline-size:100%}.determinate{background-color:var(--_connotation-color-primary);block-size:100%;border-radius:inherit;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%)}}\n";
+const styles = ".base{align-items:center;block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none}.base.connotation-cta{--_connotation-color-primary: var(--vvd-progress-ring-cta-primary, var(--vvd-color-cta-500))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-progress-ring-alert-primary, var(--vvd-color-alert-500))}.base.connotation-success{--_connotation-color-primary: var(--vvd-progress-ring-success-primary, var(--vvd-color-success-500))}.base:not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary: var(--vvd-progress-ring-accent-primary, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--_connotation-color-primary);--_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)))}.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)}}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -16,73 +16,76 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-class Progress extends BaseProgress {
+class ProgressRing extends BaseProgress {
   constructor() {
     super(...arguments);
     this.ariaLabel = null;
-    this.reverse = false;
   }
 }
 __decorateClass([
   attr({ attribute: "aria-label" })
-], Progress.prototype, "ariaLabel", 2);
+], ProgressRing.prototype, "ariaLabel", 2);
 __decorateClass([
-  attr()
-], Progress.prototype, "shape", 2);
+  attr
+], ProgressRing.prototype, "connotation", 2);
 __decorateClass([
-  attr()
-], Progress.prototype, "connotation", 2);
-__decorateClass([
-  attr({ mode: "boolean" })
-], Progress.prototype, "reverse", 2);
+  attr
+], ProgressRing.prototype, "size", 2);
 
-const getClasses = ({
-  connotation,
-  shape,
-  reverse,
-  paused
-}) => classNames(
+const getClasses = ({ connotation, size, paused }) => classNames(
   "base",
-  [`connotation-${connotation}`, Boolean(connotation)],
-  [`shape-${shape}`, Boolean(shape)],
-  ["reverse", Boolean(reverse)],
-  ["paused", Boolean(paused)]
+  ["disabled", !!paused],
+  [`connotation-${connotation}`, !!connotation],
+  [`size-${size}`, !!size]
 );
-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 = (_) => {
-  return html`<template role="${(x) => x.ariaLabel ? "presentation" : null}">
-    <div
+const progressSegments = 44;
+const ProgressRingTemplate = (_) => html`<template role="${(x) => x.ariaLabel ? "presentation" : null}">
+	<div
 		role="progressbar"
 		aria-label="${(x) => x.ariaLabel}"
 		aria-valuenow="${(x) => x.value}"
 		aria-valuemin="${(x) => x.min}"
 		aria-valuemax="${(x) => x.max}"
-		class="${getClasses}"
-    >
-		<div class="progress">
-		  ${when((x) => typeof x.value === "number", determinate())}
-		  ${when((x) => typeof x.value !== "number", indeterminate())}
-    	</div>
+		class="${(x) => x.paused ? "paused" : ""} ${getClasses}"
+	>
+		${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>`;
-};
+</template>`;
 
-const progressDefinition = Progress.compose({
-  baseName: "progress",
-  template: ProgressTemplate,
+const progressRingDefinition = ProgressRing.compose({
+  baseName: "progress-ring",
+  template: ProgressRingTemplate,
   styles
 });
-const progressRegistries = [progressDefinition()];
-const registerProgress = registerFactory(progressRegistries);
+const progressRingRegistries = [progressRingDefinition()];
+const registerProgressRing = registerFactory(progressRingRegistries);
 
-export { progressRegistries as a, progressDefinition as p, registerProgress as r };
+export { ProgressRing as P, progressRingRegistries as a, progressRingDefinition as p, registerProgressRing as r };