@vonage/vivid 4.9.0 → 4.11.0

package/shared/slider.template.cjs

@@ -1,9 +1,9 @@
 'use strict';
 
 const definition = require('./definition64.cjs');
-const aria = require('./aria.cjs');
 const index = require('./index.cjs');
 const ref = require('./ref.cjs');
+const aria = require('./aria.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
 
@@ -20,6 +20,25 @@ function limit(min, max, value) {
     return Math.min(Math.max(value, min), max);
 }
 
+const getDecimalPlaces = (num) => {
+  const match = num.toString().match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
+  return Math.max(
+    0,
+    // Number of digits right of decimal point.
+    (match[1] ? match[1].length : 0) - // Adjust for scientific notation.
+    (match[2] ? +match[2] : 0)
+  );
+};
+const roundToStepValue = (value, step) => {
+  const decimalPlaces = getDecimalPlaces(step);
+  const factor = Math.pow(10, decimalPlaces);
+  const roundedValue = Math.round(value / step) * step;
+  return Math.round(roundedValue * factor) / factor;
+};
+
+const lerp = (a, b, value) => a + (b - a) * value;
+const inverseLerp = (a, b, value) => limit(0, 1, (value - a) / (b - a));
+
 const getClasses = ({ disabled, connotation }) => classNames.classNames(
   "control",
   ["disabled", Boolean(disabled)],
@@ -91,4 +110,7 @@ const SliderTemplate = (context) => {
 
 exports.SliderTemplate = SliderTemplate;
 exports.getMarkersTemplate = getMarkersTemplate;
+exports.inverseLerp = inverseLerp;
+exports.lerp = lerp;
 exports.limit = limit;
+exports.roundToStepValue = roundToStepValue;

package/shared/slider.template.js

@@ -1,7 +1,7 @@
 import { P as Popup, a as PlacementStrategy } from './definition64.js';
-import { O as Orientation } from './aria.js';
 import { h as html } from './index.js';
 import { r as ref } from './ref.js';
+import { O as Orientation } from './aria.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
@@ -18,6 +18,25 @@ function limit(min, max, value) {
     return Math.min(Math.max(value, min), max);
 }
 
+const getDecimalPlaces = (num) => {
+  const match = num.toString().match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
+  return Math.max(
+    0,
+    // Number of digits right of decimal point.
+    (match[1] ? match[1].length : 0) - // Adjust for scientific notation.
+    (match[2] ? +match[2] : 0)
+  );
+};
+const roundToStepValue = (value, step) => {
+  const decimalPlaces = getDecimalPlaces(step);
+  const factor = Math.pow(10, decimalPlaces);
+  const roundedValue = Math.round(value / step) * step;
+  return Math.round(roundedValue * factor) / factor;
+};
+
+const lerp = (a, b, value) => a + (b - a) * value;
+const inverseLerp = (a, b, value) => limit(0, 1, (value - a) / (b - a));
+
 const getClasses = ({ disabled, connotation }) => classNames(
   "control",
   ["disabled", Boolean(disabled)],
@@ -87,4 +106,4 @@ const SliderTemplate = (context) => {
 	>`;
 };
 
-export { SliderTemplate as S, getMarkersTemplate as g, limit as l };
+export { SliderTemplate as S, limit as a, getMarkersTemplate as g, inverseLerp as i, lerp as l, roundToStepValue as r };

package/styles/core/all.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 10 Oct 2024 12:10:49 GMT
+ * Generated on Wed, 13 Nov 2024 14:14:30 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);

package/styles/core/theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 10 Oct 2024 12:10:49 GMT
+ * Generated on Wed, 13 Nov 2024 14:14:30 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);

package/styles/core/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 10 Oct 2024 12:10:49 GMT
+ * Generated on Wed, 13 Nov 2024 14:14:30 GMT
  */
 .vvd-root:root {
   --vvd-size-font-scale-base: 1rem;

package/styles/tokens/theme-dark.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Thu, 10 Oct 2024 12:10:49 GMT
+ * Generated on Wed, 13 Nov 2024 14:14:30 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 10 Oct 2024 12:10:49 GMT
+ * Generated on Wed, 13 Nov 2024 14:14:30 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 10 Oct 2024 12:10:49 GMT
+ * Generated on Wed, 13 Nov 2024 14:14:30 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 10 Oct 2024 12:10:49 GMT
+ * Generated on Wed, 13 Nov 2024 14:14:30 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";
@@ -79,16 +79,6 @@
   --vvd-color-announcement-700: #f8b9e7;
   --vvd-color-announcement-800: #ffdcf7;
   --vvd-color-announcement-900: #ffedfb;
-  --vvd-color-alert-50: #3e0004;
-  --vvd-color-alert-100: #6e0000;
-  --vvd-color-alert-200: #9f0202;
-  --vvd-color-alert-300: #cd0d0d;
-  --vvd-color-alert-400: #e61d1d;
-  --vvd-color-alert-500: #f75959;
-  --vvd-color-alert-600: #fe9696;
-  --vvd-color-alert-700: #ffbbbb;
-  --vvd-color-alert-800: #fedfdf;
-  --vvd-color-alert-900: #ffeef2;
   --vvd-color-success-50: #0a1e11;
   --vvd-color-success-100: #183a1e;
   --vvd-color-success-200: #155923;
@@ -99,6 +89,26 @@
   --vvd-color-success-700: #86e090;
   --vvd-color-success-800: #cfeed4;
   --vvd-color-success-900: #e1f8e5;
+  --vvd-color-alert-50: #3e0004;
+  --vvd-color-alert-100: #6e0000;
+  --vvd-color-alert-200: #9f0202;
+  --vvd-color-alert-300: #cd0d0d;
+  --vvd-color-alert-400: #e61d1d;
+  --vvd-color-alert-500: #f75959;
+  --vvd-color-alert-600: #fe9696;
+  --vvd-color-alert-700: #ffbbbb;
+  --vvd-color-alert-800: #fedfdf;
+  --vvd-color-alert-900: #ffeef2;
+  --vvd-color-neutral-tint-50: #191828;
+  --vvd-color-neutral-tint-100: #31304f;
+  --vvd-color-neutral-tint-200: #494977;
+  --vvd-color-neutral-tint-300: #63628d;
+  --vvd-color-neutral-tint-400: #727198;
+  --vvd-color-neutral-tint-500: #908fae;
+  --vvd-color-neutral-tint-600: #b2b1c7;
+  --vvd-color-neutral-tint-700: #cbcbd9;
+  --vvd-color-neutral-tint-800: #e5e5ec;
+  --vvd-color-neutral-tint-900: #f2f3f9;
   --vvd-color-surface-0dp: #0d0d0d;
   --vvd-color-surface-2dp: linear-gradient(#ffffff0f, #ffffff0f), #0d0d0d;
   --vvd-color-surface-4dp: linear-gradient(#ffffff14, #ffffff14), #0d0d0d;
@@ -209,6 +219,17 @@
   --vvd-color-alert-800: #6e0000;
   --vvd-color-alert-900: #3e0004;
   --vvd-color-alert-950: #250004;
+  --vvd-color-neutral-tint-50: #f2f3f9;
+  --vvd-color-neutral-tint-100: #e5e5ec;
+  --vvd-color-neutral-tint-200: #cbcbd9;
+  --vvd-color-neutral-tint-300: #b2b1c7;
+  --vvd-color-neutral-tint-400: #908fae;
+  --vvd-color-neutral-tint-500: #727198;
+  --vvd-color-neutral-tint-600: #63628d;
+  --vvd-color-neutral-tint-700: #494977;
+  --vvd-color-neutral-tint-800: #31304f;
+  --vvd-color-neutral-tint-900: #191828;
+  --vvd-color-neutral-tint-950: #0d0c15;
   --vvd-color-surface-0dp: #ffffff;
   --vvd-color-surface-2dp: #ffffff;
   --vvd-color-surface-4dp: #ffffff;

package/styles/tokens/theme-light.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Thu, 10 Oct 2024 12:10:49 GMT
+ * Generated on Wed, 13 Nov 2024 14:14:30 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 10 Oct 2024 12:10:49 GMT
+ * Generated on Wed, 13 Nov 2024 14:14:30 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 10 Oct 2024 12:10:49 GMT
+ * Generated on Wed, 13 Nov 2024 14:14:30 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 10 Oct 2024 12:10:49 GMT
+ * Generated on Wed, 13 Nov 2024 14:14:30 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";
@@ -105,6 +105,17 @@
   --vvd-color-alert-800: #6e0000;
   --vvd-color-alert-900: #3e0004;
   --vvd-color-alert-950: #250004;
+  --vvd-color-neutral-tint-50: #f2f3f9;
+  --vvd-color-neutral-tint-100: #e5e5ec;
+  --vvd-color-neutral-tint-200: #cbcbd9;
+  --vvd-color-neutral-tint-300: #b2b1c7;
+  --vvd-color-neutral-tint-400: #908fae;
+  --vvd-color-neutral-tint-500: #727198;
+  --vvd-color-neutral-tint-600: #63628d;
+  --vvd-color-neutral-tint-700: #494977;
+  --vvd-color-neutral-tint-800: #31304f;
+  --vvd-color-neutral-tint-900: #191828;
+  --vvd-color-neutral-tint-950: #0d0c15;
   --vvd-color-surface-0dp: #ffffff;
   --vvd-color-surface-2dp: #ffffff;
   --vvd-color-surface-4dp: #ffffff;
@@ -189,16 +200,6 @@
   --vvd-color-announcement-700: #f8b9e7;
   --vvd-color-announcement-800: #ffdcf7;
   --vvd-color-announcement-900: #ffedfb;
-  --vvd-color-alert-50: #3e0004;
-  --vvd-color-alert-100: #6e0000;
-  --vvd-color-alert-200: #9f0202;
-  --vvd-color-alert-300: #cd0d0d;
-  --vvd-color-alert-400: #e61d1d;
-  --vvd-color-alert-500: #f75959;
-  --vvd-color-alert-600: #fe9696;
-  --vvd-color-alert-700: #ffbbbb;
-  --vvd-color-alert-800: #fedfdf;
-  --vvd-color-alert-900: #ffeef2;
   --vvd-color-success-50: #0a1e11;
   --vvd-color-success-100: #183a1e;
   --vvd-color-success-200: #155923;
@@ -209,6 +210,26 @@
   --vvd-color-success-700: #86e090;
   --vvd-color-success-800: #cfeed4;
   --vvd-color-success-900: #e1f8e5;
+  --vvd-color-alert-50: #3e0004;
+  --vvd-color-alert-100: #6e0000;
+  --vvd-color-alert-200: #9f0202;
+  --vvd-color-alert-300: #cd0d0d;
+  --vvd-color-alert-400: #e61d1d;
+  --vvd-color-alert-500: #f75959;
+  --vvd-color-alert-600: #fe9696;
+  --vvd-color-alert-700: #ffbbbb;
+  --vvd-color-alert-800: #fedfdf;
+  --vvd-color-alert-900: #ffeef2;
+  --vvd-color-neutral-tint-50: #191828;
+  --vvd-color-neutral-tint-100: #31304f;
+  --vvd-color-neutral-tint-200: #494977;
+  --vvd-color-neutral-tint-300: #63628d;
+  --vvd-color-neutral-tint-400: #727198;
+  --vvd-color-neutral-tint-500: #908fae;
+  --vvd-color-neutral-tint-600: #b2b1c7;
+  --vvd-color-neutral-tint-700: #cbcbd9;
+  --vvd-color-neutral-tint-800: #e5e5ec;
+  --vvd-color-neutral-tint-900: #f2f3f9;
   --vvd-color-surface-0dp: #0d0d0d;
   --vvd-color-surface-2dp: linear-gradient(#ffffff0f, #ffffff0f), #0d0d0d;
   --vvd-color-surface-4dp: linear-gradient(#ffffff14, #ffffff14), #0d0d0d;

package/styles/tokens/vivid-2-compat.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 10 Oct 2024 12:10:49 GMT
+ * Generated on Wed, 13 Nov 2024 14:14:30 GMT
  */
 .vvd-root, ::part(vvd-root),
 .vvd-theme-alternate, ::part(vvd-theme-alternate) {

package/vivid.api.json

@@ -1,7 +1,7 @@
 {
   "metadata": {
     "toolPackage": "@microsoft/api-extractor",
-    "toolVersion": "7.47.7",
+    "toolVersion": "7.47.11",
     "schemaVersion": 1011,
     "oldestForwardsCompatibleVersion": 1001,
     "tsdocConfig": {
@@ -607,6 +607,27 @@
               },
               "releaseTag": "Public",
               "name": "Subtle"
+            },
+            {
+              "kind": "EnumMember",
+              "canonicalReference": "@vonage/vivid!Appearance.SubtleLight:member",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "SubtleLight = "
+                },
+                {
+                  "kind": "Content",
+                  "text": "\"subtle-light\""
+                }
+              ],
+              "initializerTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "releaseTag": "Public",
+              "name": "SubtleLight"
             }
           ]
         },
@@ -1190,6 +1211,15 @@
               "text": "Appearance.Subtle",
               "canonicalReference": "@vonage/vivid!Appearance.Subtle:member"
             },
+            {
+              "kind": "Content",
+              "text": " | "
+            },
+            {
+              "kind": "Reference",
+              "text": "Appearance.SubtleLight",
+              "canonicalReference": "@vonage/vivid!Appearance.SubtleLight:member"
+            },
             {
               "kind": "Content",
               "text": ">"
@@ -1204,7 +1234,7 @@
           "name": "BadgeAppearance",
           "typeTokenRange": {
             "startIndex": 1,
-            "endIndex": 11
+            "endIndex": 13
           }
         },
         {
@@ -1638,6 +1668,15 @@
               "kind": "Content",
               "text": " | "
             },
+            {
+              "kind": "Reference",
+              "text": "Connotation.Announcement",
+              "canonicalReference": "@vonage/vivid!Connotation.Announcement:member"
+            },
+            {
+              "kind": "Content",
+              "text": " | "
+            },
             {
               "kind": "Reference",
               "text": "Connotation.CTA",
@@ -1675,7 +1714,7 @@
           "name": "ButtonConnotation",
           "typeTokenRange": {
             "startIndex": 1,
-            "endIndex": 13
+            "endIndex": 15
           }
         },
         {
@@ -3857,6 +3896,15 @@
               "text": "Connotation.Information",
               "canonicalReference": "@vonage/vivid!Connotation.Information:member"
             },
+            {
+              "kind": "Content",
+              "text": " | "
+            },
+            {
+              "kind": "Reference",
+              "text": "Connotation.Announcement",
+              "canonicalReference": "@vonage/vivid!Connotation.Announcement:member"
+            },
             {
               "kind": "Content",
               "text": ">"
@@ -3871,7 +3919,7 @@
           "name": "IconConnotation",
           "typeTokenRange": {
             "startIndex": 1,
-            "endIndex": 17
+            "endIndex": 19
           }
         },
         {
@@ -10542,6 +10590,15 @@
               "kind": "Content",
               "text": " | "
             },
+            {
+              "kind": "Reference",
+              "text": "Connotation.Announcement",
+              "canonicalReference": "@vonage/vivid!Connotation.Announcement:member"
+            },
+            {
+              "kind": "Content",
+              "text": " | "
+            },
             {
               "kind": "Reference",
               "text": "Connotation.CTA",
@@ -10579,7 +10636,7 @@
           "name": "SplitButtonConnotation",
           "typeTokenRange": {
             "startIndex": 1,
-            "endIndex": 13
+            "endIndex": 15
           }
         },
         {

package/shared/aria2.cjs

@@ -1,11 +0,0 @@
-'use strict';
-
-/**
- * Standard orientation values
- */
-const Orientation = {
-    horizontal: "horizontal",
-    vertical: "vertical",
-};
-
-exports.Orientation = Orientation;

package/shared/aria2.js

@@ -1,9 +0,0 @@
-/**
- * Standard orientation values
- */
-const Orientation = {
-    horizontal: "horizontal",
-    vertical: "vertical",
-};
-
-export { Orientation as O };

package/shared/button.cjs

@@ -1,202 +0,0 @@
-'use strict';
-
-const index = require('./index.cjs');
-const applyMixins = require('./apply-mixins.cjs');
-const formAssociated = require('./form-associated.cjs');
-const ariaGlobal = require('./aria-global.cjs');
-const startEnd = require('./start-end.cjs');
-
-class _Button extends index.FoundationElement {
-}
-/**
- * A form-associated base class for the {@link @microsoft/fast-foundation#(Button:class)} component.
- *
- * @internal
- */
-class FormAssociatedButton extends formAssociated.FormAssociated(_Button) {
-    constructor() {
-        super(...arguments);
-        this.proxy = document.createElement("input");
-    }
-}
-
-/**
- * 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
- */
-let Button$1 = class Button extends FormAssociatedButton {
-    constructor() {
-        super(...arguments);
-        /**
-         * Prevent events to propagate if disabled and has no slotted content wrapped in HTML elements
-         * @internal
-         */
-        this.handleClick = (e) => {
-            var _a;
-            if (this.disabled && ((_a = this.defaultSlottedContent) === null || _a === void 0 ? void 0 : _a.length) <= 1) {
-                e.stopPropagation();
-            }
-        };
-        /**
-         * Submits the parent form
-         */
-        this.handleSubmission = () => {
-            if (!this.form) {
-                return;
-            }
-            const attached = this.proxy.isConnected;
-            if (!attached) {
-                this.attachProxy();
-            }
-            // Browser support for requestSubmit is not comprehensive
-            // so click the proxy if it isn't supported
-            typeof this.form.requestSubmit === "function"
-                ? this.form.requestSubmit(this.proxy)
-                : this.proxy.click();
-            if (!attached) {
-                this.detachProxy();
-            }
-        };
-        /**
-         * Resets the parent form
-         */
-        this.handleFormReset = () => {
-            var _a;
-            (_a = this.form) === null || _a === void 0 ? void 0 : _a.reset();
-        };
-        /**
-         * Overrides the focus call for where delegatesFocus is unsupported.
-         * This check works for Chrome, Edge Chromium, FireFox, and Safari
-         * Relevant PR on the Firefox browser: https://phabricator.services.mozilla.com/D123858
-         */
-        this.handleUnsupportedDelegatesFocus = () => {
-            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)) {
-                this.focus = () => {
-                    this.control.focus();
-                };
-            }
-        };
-    }
-    formactionChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.formAction = this.formaction;
-        }
-    }
-    formenctypeChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.formEnctype = this.formenctype;
-        }
-    }
-    formmethodChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.formMethod = this.formmethod;
-        }
-    }
-    formnovalidateChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.formNoValidate = this.formnovalidate;
-        }
-    }
-    formtargetChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.formTarget = this.formtarget;
-        }
-    }
-    typeChanged(previous, next) {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.type = this.type;
-        }
-        next === "submit" && this.addEventListener("click", this.handleSubmission);
-        previous === "submit" && this.removeEventListener("click", this.handleSubmission);
-        next === "reset" && this.addEventListener("click", this.handleFormReset);
-        previous === "reset" && this.removeEventListener("click", this.handleFormReset);
-    }
-    /** {@inheritDoc (FormAssociated:interface).validate} */
-    validate() {
-        super.validate(this.control);
-    }
-    /**
-     * @internal
-     */
-    connectedCallback() {
-        var _a;
-        super.connectedCallback();
-        this.proxy.setAttribute("type", this.type);
-        this.handleUnsupportedDelegatesFocus();
-        const elements = Array.from((_a = this.control) === null || _a === void 0 ? void 0 : _a.children);
-        if (elements) {
-            elements.forEach((span) => {
-                span.addEventListener("click", this.handleClick);
-            });
-        }
-    }
-    /**
-     * @internal
-     */
-    disconnectedCallback() {
-        var _a;
-        super.disconnectedCallback();
-        const elements = Array.from((_a = this.control) === null || _a === void 0 ? void 0 : _a.children);
-        if (elements) {
-            elements.forEach((span) => {
-                span.removeEventListener("click", this.handleClick);
-            });
-        }
-    }
-};
-index.__decorate([
-    index.attr({ mode: "boolean" })
-], Button$1.prototype, "autofocus", void 0);
-index.__decorate([
-    index.attr({ attribute: "form" })
-], Button$1.prototype, "formId", void 0);
-index.__decorate([
-    index.attr
-], Button$1.prototype, "formaction", void 0);
-index.__decorate([
-    index.attr
-], Button$1.prototype, "formenctype", void 0);
-index.__decorate([
-    index.attr
-], Button$1.prototype, "formmethod", void 0);
-index.__decorate([
-    index.attr({ mode: "boolean" })
-], Button$1.prototype, "formnovalidate", void 0);
-index.__decorate([
-    index.attr
-], Button$1.prototype, "formtarget", void 0);
-index.__decorate([
-    index.attr
-], Button$1.prototype, "type", void 0);
-index.__decorate([
-    index.observable
-], Button$1.prototype, "defaultSlottedContent", void 0);
-/**
- * Includes ARIA states and properties relating to the ARIA button role
- *
- * @public
- */
-class DelegatesARIAButton {
-}
-index.__decorate([
-    index.attr({ attribute: "aria-expanded" })
-], DelegatesARIAButton.prototype, "ariaExpanded", void 0);
-index.__decorate([
-    index.attr({ attribute: "aria-pressed" })
-], DelegatesARIAButton.prototype, "ariaPressed", void 0);
-applyMixins.applyMixins(DelegatesARIAButton, ariaGlobal.ARIAGlobalStatesAndProperties);
-applyMixins.applyMixins(Button$1, startEnd.StartEnd, DelegatesARIAButton);
-
-exports.Button = Button$1;