@vonage/vivid 4.16.2 → 4.18.0

package/shared/definition38.cjs

@@ -2,10 +2,11 @@
 
 const vividElement = require('./vivid-element.cjs');
 const baseProgress = require('./base-progress.cjs');
-const when = require('./when.cjs');
+const delegatesAria = require('./delegates-aria.cjs');
 const classNames = require('./class-names.cjs');
+const when = require('./when.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;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%)}}";
+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)}}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -16,46 +17,23 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Progress extends baseProgress.BaseProgress {
-  constructor() {
-    super(...arguments);
-    this.ariaLabel = null;
-    this.reverse = false;
-  }
+class ProgressRing extends delegatesAria.DelegatesAria(baseProgress.BaseProgress) {
 }
 __decorateClass([
-  vividElement.attr({ attribute: "aria-label" })
-], Progress.prototype, "ariaLabel");
-__decorateClass([
-  vividElement.attr()
-], Progress.prototype, "shape");
+  vividElement.attr
+], ProgressRing.prototype, "connotation");
 __decorateClass([
-  vividElement.attr()
-], Progress.prototype, "connotation");
-__decorateClass([
-  vividElement.attr({ mode: "boolean" })
-], Progress.prototype, "reverse");
+  vividElement.attr
+], ProgressRing.prototype, "size");
 
-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 vividElement.html` <span
-		class="determinate"
-		style="width: ${(x) => x.percentComplete}%"
-	></span>`;
-}
-function indeterminate() {
-  return vividElement.html` <span class="indeterminate" name="indeterminate">
-		<span class="indicator-1"></span>
-		<span class="indicator-2"></span>
-	</span>`;
-}
-const ProgressTemplate = vividElement.html`<template
+const progressSegments = 44;
+const ProgressRingTemplate = vividElement.html`<template
 	role="${(x) => x.ariaLabel ? "presentation" : null}"
 >
 	<div
@@ -64,25 +42,53 @@ const ProgressTemplate = vividElement.html`<template
 		aria-valuenow="${(x) => x.value}"
 		aria-valuemin="${(x) => x.min}"
 		aria-valuemax="${(x) => x.max}"
-		class="${getClasses}"
+		class="${(x) => x.paused ? "paused" : ""} ${getClasses}"
 	>
-		<div class="progress">
-			${when.when((x) => typeof x.value === "number", determinate())}
-			${when.when((x) => typeof x.value !== "number", indeterminate())}
-		</div>
+		${when.when(
+  (x) => typeof x.value === "number",
+  vividElement.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",
+  vividElement.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 progressDefinition = vividElement.defineVividComponent(
-  "progress",
-  Progress,
-  ProgressTemplate,
+const progressRingDefinition = vividElement.defineVividComponent(
+  "progress-ring",
+  ProgressRing,
+  ProgressRingTemplate,
   [],
   {
     styles
   }
 );
-const registerProgress = vividElement.createRegisterFunction(progressDefinition);
+const registerProgressRing = vividElement.createRegisterFunction(
+  progressRingDefinition
+);
 
-exports.progressDefinition = progressDefinition;
-exports.registerProgress = registerProgress;
+exports.ProgressRing = ProgressRing;
+exports.progressRingDefinition = progressRingDefinition;
+exports.registerProgressRing = registerProgressRing;

package/shared/definition38.js

@@ -1,9 +1,10 @@
-import { a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
+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 { w as when } from './when.js';
+import { D as DelegatesAria } from './delegates-aria.js';
 import { c as classNames } from './class-names.js';
+import { w as when } from './when.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;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%)}}";
+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)}}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -14,46 +15,23 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Progress extends BaseProgress {
-  constructor() {
-    super(...arguments);
-    this.ariaLabel = null;
-    this.reverse = false;
-  }
+class ProgressRing extends DelegatesAria(BaseProgress) {
 }
 __decorateClass([
-  attr({ attribute: "aria-label" })
-], Progress.prototype, "ariaLabel");
-__decorateClass([
-  attr()
-], Progress.prototype, "shape");
+  attr
+], ProgressRing.prototype, "connotation");
 __decorateClass([
-  attr()
-], Progress.prototype, "connotation");
-__decorateClass([
-  attr({ mode: "boolean" })
-], Progress.prototype, "reverse");
+  attr
+], ProgressRing.prototype, "size");
 
-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 = html`<template
+const progressSegments = 44;
+const ProgressRingTemplate = html`<template
 	role="${(x) => x.ariaLabel ? "presentation" : null}"
 >
 	<div
@@ -62,24 +40,51 @@ const ProgressTemplate = html`<template
 		aria-valuenow="${(x) => x.value}"
 		aria-valuemin="${(x) => x.min}"
 		aria-valuemax="${(x) => x.max}"
-		class="${getClasses}"
+		class="${(x) => x.paused ? "paused" : ""} ${getClasses}"
 	>
-		<div class="progress">
-			${when((x) => typeof x.value === "number", determinate())}
-			${when((x) => typeof x.value !== "number", indeterminate())}
-		</div>
+		${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 progressDefinition = defineVividComponent(
-  "progress",
-  Progress,
-  ProgressTemplate,
+const progressRingDefinition = defineVividComponent(
+  "progress-ring",
+  ProgressRing,
+  ProgressRingTemplate,
   [],
   {
     styles
   }
 );
-const registerProgress = createRegisterFunction(progressDefinition);
+const registerProgressRing = createRegisterFunction(
+  progressRingDefinition
+);
 
-export { progressDefinition as p, registerProgress as r };
+export { ProgressRing as P, progressRingDefinition as p, registerProgressRing as r };

package/shared/definition39.cjs

@@ -1,13 +1,12 @@
 'use strict';
 
 const vividElement = require('./vivid-element.cjs');
-const definition = require('./definition40.cjs');
-const keyCodes = require('./key-codes.cjs');
-const aria = require('./aria.cjs');
-const slotted = require('./slotted.cjs');
+const baseProgress = require('./base-progress.cjs');
+const delegatesAria = require('./delegates-aria.cjs');
+const classNames = require('./class-names.cjs');
 const when = require('./when.cjs');
 
-const styles = ".positioning-region{display:flex;flex-wrap:wrap;gap:8px}.positioning-region.vertical{flex-direction:column}label+.positioning-region{margin-block-start:8px}label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}";
+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) => {
@@ -18,274 +17,70 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class RadioGroup extends vividElement.VividElement {
+class Progress extends delegatesAria.DelegatesAria(baseProgress.BaseProgress) {
   constructor() {
     super(...arguments);
-    this.orientation = // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
-    aria.Orientation.horizontal;
-    this.slottedRadioButtons = [];
-    this.radioChangeHandler = (e) => {
-      const changedRadio = e.target;
-      if (changedRadio.checked) {
-        this.slottedRadioButtons.forEach((radio) => {
-          if (radio !== changedRadio) {
-            radio.checked = false;
-          }
-        });
-        this.value = changedRadio.value;
-        this.#setTabRovingTarget(changedRadio);
-      }
-      e.stopPropagation();
-    };
-    this.moveToRadioByIndex = (group, index) => {
-      const radio = group[index];
-      if (!this.isInsideToolbar && !radio.readOnly) {
-        radio.checked = true;
-      }
-      radio.focus();
-    };
-    this.moveRightOffGroup = () => {
-      this.nextElementSibling?.focus();
-    };
-    this.moveLeftOffGroup = () => {
-      this.previousElementSibling?.focus();
-    };
-    this.moveRight = (e) => {
-      const radio = e.target;
-      const group = this.#focusableRadioButtons;
-      let index = 0;
-      index = group.indexOf(radio) + 1;
-      if (index === group.length && this.isInsideToolbar && e.key === keyCodes.keyArrowRight) {
-        this.moveRightOffGroup();
-        return;
-      }
-      if (index === group.length) {
-        index = 0;
-      }
-      this.moveToRadioByIndex(group, index);
-    };
-    this.moveLeft = (e) => {
-      const radio = e.target;
-      const group = this.#focusableRadioButtons;
-      let index = group.indexOf(radio) - 1;
-      if (this.isInsideToolbar && e.key === keyCodes.keyArrowLeft && index < 0) {
-        this.moveLeftOffGroup();
-        return;
-      }
-      index = index < 0 ? group.length - 1 : index;
-      this.moveToRadioByIndex(group, index);
-    };
-    /**
-     * keyboard handling per https://w3c.github.io/aria-practices/#for-radio-groups-not-contained-in-a-toolbar
-     * navigation is different when there is an ancestor with role='toolbar'
-     *
-     * @internal
-     */
-    this.keydownHandler = (e) => {
-      switch (e.key) {
-        case keyCodes.keyEnter:
-          this.checkFocusedRadio(e.target);
-          break;
-        case keyCodes.keyArrowRight:
-        case keyCodes.keyArrowDown:
-          this.moveRight(e);
-          break;
-        case keyCodes.keyArrowLeft:
-        case keyCodes.keyArrowUp:
-          this.moveLeft(e);
-          break;
-        default:
-          return true;
-      }
-    };
-  }
-  /**
-   * @internal
-   */
-  readOnlyChanged() {
-    this.slottedRadioButtons.forEach((radio) => {
-      if (this.readOnly) {
-        radio.readOnly = true;
-      } else {
-        radio.readOnly = false;
-      }
-    });
-  }
-  /**
-   * @internal
-   */
-  disabledChanged() {
-    this.slottedRadioButtons.forEach((radio) => {
-      if (this.disabled) {
-        radio.disabled = true;
-      } else {
-        radio.disabled = false;
-      }
-    });
-  }
-  nameChanged() {
-    this.slottedRadioButtons.forEach((radio) => {
-      radio.setAttribute("name", this.name);
-    });
-  }
-  /**
-   * @internal
-   */
-  valueChanged() {
-    this.slottedRadioButtons.forEach((radio) => {
-      if (radio.value === this.value) {
-        radio.checked = true;
-      }
-    });
-    this.$emit("change");
-  }
-  get #focusableRadioButtons() {
-    return this.slottedRadioButtons.filter((radio) => !radio.disabled);
-  }
-  /**
-   * @internal
-   */
-  slottedRadioButtonsChanged() {
-    if (this.slottedRadioButtons && this.slottedRadioButtons.length > 0) {
-      this.setupRadioButtons();
-    }
-  }
-  get isInsideToolbar() {
-    return !!this.closest('[role="toolbar"]');
-  }
-  /**
-   * @internal
-   */
-  connectedCallback() {
-    super.connectedCallback();
-    this.setupRadioButtons();
-  }
-  disconnectedCallback() {
-    this.slottedRadioButtons.forEach((radio) => {
-      radio.removeEventListener(
-        "change",
-        this.radioChangeHandler
-      );
-    });
-  }
-  setupRadioButtons() {
-    let foundMatchingVal = false;
-    for (const radio of this.slottedRadioButtons) {
-      if (this.name !== void 0) {
-        radio.setAttribute("name", this.name);
-      }
-      if (this.disabled) {
-        radio.disabled = true;
-      }
-      if (this.readOnly) {
-        radio.readOnly = true;
-      }
-      if (this.value && this.value === radio.value) {
-        radio.checked = true;
-        this.#setTabRovingTarget(radio);
-        foundMatchingVal = true;
-      } else {
-        radio.checked = false;
-      }
-      radio.addEventListener(
-        "change",
-        this.radioChangeHandler
-      );
-    }
-    if (this.value === void 0 && this.slottedRadioButtons.length > 0) {
-      const checkedRadios = this.slottedRadioButtons.filter(
-        (radio) => radio.hasAttribute("checked")
-      );
-      if (checkedRadios.length > 0 && !foundMatchingVal) {
-        const lastCheckedRadio = checkedRadios[checkedRadios.length - 1];
-        lastCheckedRadio.checked = true;
-        this.#setTabRovingTarget(lastCheckedRadio);
-      } else {
-        this.#setTabRovingTarget(this.slottedRadioButtons[0]);
-      }
-    }
-  }
-  /**
-   * @internal
-   */
-  focusInHandler(e) {
-    this.#setTabRovingTarget(e.target);
-  }
-  #setTabRovingTarget(radio) {
-    radio.setAttribute("tabindex", "0");
-    for (const slottedRadio of this.slottedRadioButtons) {
-      if (slottedRadio !== radio) {
-        slottedRadio.setAttribute("tabindex", "-1");
-      }
-    }
-  }
-  checkFocusedRadio(target) {
-    if (!target.readOnly) {
-      target.checked = true;
-    }
+    this.reverse = false;
   }
 }
 __decorateClass([
-  vividElement.attr
-], RadioGroup.prototype, "label");
-__decorateClass([
-  vividElement.attr({ attribute: "readonly", mode: "boolean" })
-], RadioGroup.prototype, "readOnly");
-__decorateClass([
-  vividElement.attr({ attribute: "disabled", mode: "boolean" })
-], RadioGroup.prototype, "disabled");
-__decorateClass([
-  vividElement.attr
-], RadioGroup.prototype, "name");
-__decorateClass([
-  vividElement.attr
-], RadioGroup.prototype, "value");
+  vividElement.attr()
+], Progress.prototype, "shape");
 __decorateClass([
-  vividElement.attr
-], RadioGroup.prototype, "orientation");
+  vividElement.attr()
+], Progress.prototype, "connotation");
 __decorateClass([
-  vividElement.observable
-], RadioGroup.prototype, "slottedRadioButtons");
+  vividElement.attr({ mode: "boolean" })
+], Progress.prototype, "reverse");
 
-const RadioGroupTemplate = (context) => {
-  return vividElement.html`
-		<template
-			role="radiogroup"
-			aria-disabled="${(x) => x.disabled}"
-			aria-readonly="${(x) => x.readOnly}"
-			aria-orientation="${(x) => x.orientation}"
-			@keydown="${(x, c) => x.keydownHandler(c.event)}"
-			@focusin="${(x, c) => x.focusInHandler(c.event)}"
-		>
-			${when.when(
-    (x) => x.label,
-    vividElement.html`<label>${(x) => x.label}</label>`
-  )}
-
-			<div
-				class="positioning-region ${(x) => x.orientation === aria.Orientation.horizontal ? "horizontal" : "vertical"}"
-			>
-				<slot
-					${slotted.slotted({
-    property: "slottedRadioButtons",
-    filter: slotted.elements(context.tagFor(definition.Radio))
-  })}
-				></slot>
-			</div>
-		</template>
-	`;
-};
+const getClasses = ({ connotation, shape, reverse, paused }) => classNames.classNames(
+  "base",
+  [`connotation-${connotation}`, Boolean(connotation)],
+  [`shape-${shape}`, Boolean(shape)],
+  ["reverse", Boolean(reverse)],
+  ["paused", Boolean(paused)]
+);
+function determinate() {
+  return vividElement.html` <span
+		class="determinate"
+		style="width: ${(x) => x.percentComplete}%"
+	></span>`;
+}
+function indeterminate() {
+  return vividElement.html` <span class="indeterminate" name="indeterminate">
+		<span class="indicator-1"></span>
+		<span class="indicator-2"></span>
+	</span>`;
+}
+const ProgressTemplate = vividElement.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>
+	</div>
+</template>`;
 
-const radioGroupDefinition = vividElement.defineVividComponent(
-  "radio-group",
-  RadioGroup,
-  RadioGroupTemplate,
-  [definition.radioDefinition],
+const progressDefinition = vividElement.defineVividComponent(
+  "progress",
+  Progress,
+  ProgressTemplate,
+  [],
   {
     styles
   }
 );
-const registerRadioGroup = vividElement.createRegisterFunction(radioGroupDefinition);
+const registerProgress = vividElement.createRegisterFunction(progressDefinition);
 
-exports.radioGroupDefinition = radioGroupDefinition;
-exports.registerRadioGroup = registerRadioGroup;
+exports.Progress = Progress;
+exports.progressDefinition = progressDefinition;
+exports.registerProgress = registerProgress;