@vonage/vivid 3.0.0-next.18 → 3.0.0-next.20

package/progress-ring/index.js

@@ -4,7 +4,7 @@ import { B as BaseProgress } from '../shared/base-progress.js';
 import { w as when } from '../shared/when.js';
 import { c as classNames } from '../shared/class-names.js';
 
-var css_248z = ".base {\n  align-items: center;\n  block-size: var(--_density);\n  inline-size: var(--_density);\n  outline: none;\n}\n.base.connotation-cta {\n  --connotation: var(--vvd-color-cta);\n  --on-connotation: var(--vvd-color-on-cta);\n}\n.base.connotation-alert {\n  --connotation: var(--vvd-color-alert);\n  --on-connotation: var(--vvd-color-on-alert);\n}\n.base.connotation-success {\n  --connotation: var(--vvd-color-success);\n  --on-connotation: var(--vvd-color-on-success);\n}\n.base:not(.connotation-cta, .connotation-alert, .connotation-success) {\n  --connotation: var(--vvd-color-primary);\n  --on-connotation: var(--vvd-color-on-primary);\n}\n.base.density-4 {\n  --_density: calc(4 * 4px);\n}\n.base.density-5 {\n  --_density: calc(5 * 4px);\n}\n.base.density-6 {\n  --_density: calc(6 * 4px);\n}\n.base.density-7 {\n  --_density: calc(7 * 4px);\n}\n.base.density-8 {\n  --_density: calc(8 * 4px);\n}\n.base.density-10 {\n  --_density: calc(10 * 4px);\n}\n.base.density-11 {\n  --_density: calc(11 * 4px);\n}\n.base.density-12 {\n  --_density: calc(12 * 4px);\n}\n.base:not(.density-4, .density-5, .density-6, .density-7, .density-8, .density-10, .density-11, .density-12) {\n  --_density: calc(9 * 4px);\n}\n\n.progress {\n  width: 100%;\n  height: 100%;\n}\n\n.background {\n  fill: none;\n  stroke: transparent;\n  stroke-width: 2px;\n}\n\n.determinate {\n  fill: none;\n  stroke: var(--connotation);\n  stroke-linecap: round;\n  stroke-width: 2px;\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n  transition: all 0.2s ease-in-out;\n}\n\n.indeterminate-indicator-1 {\n  animation: spin-infinite 2s linear infinite;\n  fill: none;\n  stroke: var(--connotation);\n  stroke-linecap: round;\n  stroke-width: 2px;\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n  transition: all 0.2s ease-in-out;\n}\n\n.base.paused .indeterminate-indicator-1 {\n  animation-play-state: paused;\n  stroke: var(--vvd-color-neutral);\n}\n\n.base.paused .determinate {\n  stroke: var(--vvd-color-neutral);\n}\n\n@keyframes spin-infinite {\n  0% {\n    stroke-dasharray: 0.01px 43.97px;\n    transform: rotate(0deg);\n  }\n  50% {\n    stroke-dasharray: 21.99px 21.99px;\n    transform: rotate(450deg);\n  }\n  100% {\n    stroke-dasharray: 0.01px 43.97px;\n    transform: rotate(1080deg);\n  }\n}";
+var css_248z = ".base {\n  align-items: center;\n  block-size: var(--_density);\n  color: var(--_appearance-color-text);\n  inline-size: var(--_density);\n  outline: none;\n}\n.base.connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta);\n}\n.base.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert);\n}\n.base.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success);\n}\n.base:not(.connotation-cta, .connotation-alert, .connotation-success) {\n  --_connotation-color-primary: var(--vvd-color-on-canvas);\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-50);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.base.density-4 {\n  --_density: calc(4 * 4px);\n}\n.base.density-5 {\n  --_density: calc(5 * 4px);\n}\n.base.density-6 {\n  --_density: calc(6 * 4px);\n}\n.base.density-7 {\n  --_density: calc(7 * 4px);\n}\n.base.density-8 {\n  --_density: calc(8 * 4px);\n}\n.base.density-10 {\n  --_density: calc(10 * 4px);\n}\n.base.density-11 {\n  --_density: calc(11 * 4px);\n}\n.base.density-12 {\n  --_density: calc(12 * 4px);\n}\n.base:not(.density-4, .density-5, .density-6, .density-7, .density-8, .density-10, .density-11, .density-12) {\n  --_density: calc(9 * 4px);\n}\n\n.progress {\n  width: 100%;\n  height: 100%;\n}\n\n.background {\n  fill: none;\n  stroke: transparent;\n  stroke-width: 2px;\n}\n\n.determinate {\n  fill: none;\n  stroke: currentColor;\n  stroke-linecap: round;\n  stroke-width: 2px;\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n  transition: all 0.2s ease-in-out;\n}\n\n.indeterminate-indicator-1 {\n  animation: spin-infinite 2s linear infinite;\n  fill: none;\n  stroke: currentColor;\n  stroke-linecap: round;\n  stroke-width: 2px;\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n  transition: all 0.2s ease-in-out;\n}\n\n.base.paused .indeterminate-indicator-1 {\n  animation-play-state: paused;\n}\n\n@keyframes spin-infinite {\n  0% {\n    stroke-dasharray: 0.01px 43.97px;\n    transform: rotate(0deg);\n  }\n  50% {\n    stroke-dasharray: 21.99px 21.99px;\n    transform: rotate(450deg);\n  }\n  100% {\n    stroke-dasharray: 0.01px 43.97px;\n    transform: rotate(1080deg);\n  }\n}";
 styleInject(css_248z);
 
 class ProgressRing extends BaseProgress {}
@@ -20,8 +20,9 @@ let _2 = t => t,
 
 const getClasses = ({
   connotation,
-  density
-}) => classNames('base', [`connotation-${connotation}`, !!connotation], [`density-${(density ? Number(density) : 0) + 9}`, !!density]);
+  density,
+  paused
+}) => classNames('base', ['disabled', !!paused], [`connotation-${connotation}`, !!connotation], [`density-${(density ? Number(density) : 0) + 9}`, !!density]);
 
 const progressSegments = 44;
 const ProgressRingTemplate = _ => html(_t || (_t = _2`

package/shared/anchor.js

@@ -6,6 +6,12 @@ import { A as ARIAGlobalStatesAndProperties, S as StartEnd } from './aria-global
  * An Anchor Custom HTML Element.
  * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }.
  *
+ * @slot start - Content which can be provided before the anchor content
+ * @slot end - Content which can be provided after the anchor content
+ * @slot - The default slot for anchor content
+ * @csspart control - The anchor element
+ * @csspart content - The element wrapping anchor content
+ *
  * @public
  */
 class Anchor extends FoundationElement {
@@ -20,7 +26,8 @@ class Anchor extends FoundationElement {
             var _a;
             // Check to see if delegatesFocus is supported
             if (window.ShadowRoot &&
-                !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") && ((_a = this.$fastController.definition.shadowOptions) === null || _a === void 0 ? void 0 : _a.delegatesFocus)) {
+                !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") &&
+                ((_a = this.$fastController.definition.shadowOptions) === null || _a === void 0 ? void 0 : _a.delegatesFocus)) {
                 this.focus = () => {
                     this.control.focus();
                 };

package/shared/base-progress.js

@@ -4,6 +4,11 @@ import { F as FoundationElement, _ as __decorate, a as attr, n as nullableNumber
  * An Progress HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
  *
+ * @slot indeterminate - The slot for a custom indeterminate indicator
+ * @csspart progress - Represents the progress element
+ * @csspart determinate - The determinate indicator
+ * @csspart indeterminate - The indeterminate indicator
+ *
  * @public
  */
 class BaseProgress extends FoundationElement {

package/shared/button.js

@@ -21,6 +21,12 @@ class FormAssociatedButton extends FormAssociated(_Button) {
  * A Button Custom HTML Element.
  * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element }.
  *
+ * @slot start - Content which can be provided before the button content
+ * @slot end - Content which can be provided after the button content
+ * @slot - The default slot for button content
+ * @csspart control - The button element
+ * @csspart content - The element wrapping button content
+ *
  * @public
  */
 class Button extends FormAssociatedButton {
@@ -72,7 +78,8 @@ class Button extends FormAssociatedButton {
             var _a;
             // Check to see if delegatesFocus is supported
             if (window.ShadowRoot &&
-                !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") && ((_a = this.$fastController.definition.shadowOptions) === null || _a === void 0 ? void 0 : _a.delegatesFocus)) {
+                !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") &&
+                ((_a = this.$fastController.definition.shadowOptions) === null || _a === void 0 ? void 0 : _a.delegatesFocus)) {
                 this.focus = () => {
                     this.control.focus();
                 };

package/shared/enums.js

@@ -1,8 +1,7 @@
 var Connotation;
 
 (function (Connotation) {
-  Connotation["Canvas"] = "canvas";
-  Connotation["Primary"] = "primary";
+  Connotation["Accent"] = "accent";
   Connotation["CTA"] = "cta";
   Connotation["Success"] = "success";
   Connotation["Alert"] = "alert";

package/shared/es.object.assign.js

@@ -1,4 +1,4 @@
-import { d as descriptors, C as functionUncurryThis, x as functionCall, g as fails$1, l as toObject$1, Q as indexedObject, R as objectGetOwnPropertySymbols, S as objectPropertyIsEnumerable, _ as _export } from './object-set-prototype-of.js';
+import { d as descriptors, D as functionUncurryThis, u as functionCall, g as fails$1, k as toObject$1, Q as indexedObject, R as objectGetOwnPropertySymbols, S as objectPropertyIsEnumerable, _ as _export } from './object-set-prototype-of.js';
 import { o as objectKeys$1 } from './web.dom-collections.iterator.js';
 
 var DESCRIPTORS = descriptors;
@@ -11,9 +11,9 @@ var propertyIsEnumerableModule = objectPropertyIsEnumerable;
 var toObject = toObject$1;
 var IndexedObject = indexedObject;
 
-// eslint-disable-next-line es/no-object-assign -- safe
+// eslint-disable-next-line es-x/no-object-assign -- safe
 var $assign = Object.assign;
-// eslint-disable-next-line es/no-object-defineproperty -- required for testing
+// eslint-disable-next-line es-x/no-object-defineproperty -- required for testing
 var defineProperty = Object.defineProperty;
 var concat = uncurryThis([].concat);
 
@@ -33,7 +33,7 @@ var objectAssign = !$assign || fails(function () {
   // should work with symbols and should have deterministic property order (V8 bug)
   var A = {};
   var B = {};
-  // eslint-disable-next-line es/no-symbol -- safe
+  // eslint-disable-next-line es-x/no-symbol -- safe
   var symbol = Symbol();
   var alphabet = 'abcdefghijklmnopqrst';
   A[symbol] = 7;
@@ -63,7 +63,7 @@ var assign = objectAssign;
 
 // `Object.assign` method
 // https://tc39.es/ecma262/#sec-object.assign
-// eslint-disable-next-line es/no-object-assign -- required for testing
-$({ target: 'Object', stat: true, forced: Object.assign !== assign }, {
+// eslint-disable-next-line es-x/no-object-assign -- required for testing
+$({ target: 'Object', stat: true, arity: 2, forced: Object.assign !== assign }, {
   assign: assign
 });