@vonage/vivid 4.11.0 → 4.12.1

package/shared/radio.js

@@ -1,126 +1,16 @@
-import { F as FoundationElement, _ as __decorate, a as attr, o as observable } from './index.js';
 import { C as CheckableFormAssociated } from './form-associated.js';
-import { a as keySpace } from './key-codes.js';
+import { F as FoundationElement, a as attr, o as observable } from './index.js';
+import { k as keySpace } from './key-codes.js';
 
 class _Radio extends FoundationElement {
 }
-/**
- * A form-associated base class for the {@link @microsoft/fast-foundation#(Radio:class)} component.
- *
- * @internal
- */
 class FormAssociatedRadio extends CheckableFormAssociated(_Radio) {
-    constructor() {
-        super(...arguments);
-        this.proxy = document.createElement("input");
-    }
+  constructor() {
+    super(...arguments);
+    this.proxy = document.createElement("input");
+  }
 }
 
-/**
- * A Radio Custom HTML Element.
- * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#radio | ARIA radio }.
- *
- * @slot checked-indicator - The checked indicator
- * @slot - The default slot for the label
- * @csspart control - The element representing the visual radio control
- * @csspart label - The label
- * @fires change - Emits a custom change event when the checked state changes
- *
- * @public
- */
-let Radio$1 = class Radio extends FormAssociatedRadio {
-    constructor() {
-        super();
-        /**
-         * The element's value to be included in form submission when checked.
-         * Default to "on" to reach parity with input[type="radio"]
-         *
-         * @internal
-         */
-        this.initialValue = "on";
-        /**
-         * @internal
-         */
-        this.keypressHandler = (e) => {
-            switch (e.key) {
-                case keySpace:
-                    if (!this.checked && !this.readOnly) {
-                        this.checked = true;
-                    }
-                    return;
-            }
-            return true;
-        };
-        this.proxy.setAttribute("type", "radio");
-    }
-    readOnlyChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.readOnly = this.readOnly;
-        }
-    }
-    /**
-     * @internal
-     */
-    defaultCheckedChanged() {
-        var _a;
-        if (this.$fastController.isConnected && !this.dirtyChecked) {
-            // Setting this.checked will cause us to enter a dirty state,
-            // but if we are clean when defaultChecked is changed, we want to stay
-            // in a clean state, so reset this.dirtyChecked
-            if (!this.isInsideRadioGroup()) {
-                this.checked = (_a = this.defaultChecked) !== null && _a !== void 0 ? _a : false;
-                this.dirtyChecked = false;
-            }
-        }
-    }
-    /**
-     * @internal
-     */
-    connectedCallback() {
-        var _a, _b;
-        super.connectedCallback();
-        this.validate();
-        if (((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.getAttribute("role")) !== "radiogroup" &&
-            this.getAttribute("tabindex") === null) {
-            if (!this.disabled) {
-                this.setAttribute("tabindex", "0");
-            }
-        }
-        if (this.checkedAttribute) {
-            if (!this.dirtyChecked) {
-                // Setting this.checked will cause us to enter a dirty state,
-                // but if we are clean when defaultChecked is changed, we want to stay
-                // in a clean state, so reset this.dirtyChecked
-                if (!this.isInsideRadioGroup()) {
-                    this.checked = (_b = this.defaultChecked) !== null && _b !== void 0 ? _b : false;
-                    this.dirtyChecked = false;
-                }
-            }
-        }
-    }
-    isInsideRadioGroup() {
-        const parent = this.closest("[role=radiogroup]");
-        return parent !== null;
-    }
-    /**
-     * @internal
-     */
-    clickHandler(e) {
-        if (!this.disabled && !this.readOnly && !this.checked) {
-            this.checked = true;
-        }
-    }
-};
-__decorate([
-    attr({ attribute: "readonly", mode: "boolean" })
-], Radio$1.prototype, "readOnly", void 0);
-__decorate([
-    observable
-], Radio$1.prototype, "name", void 0);
-__decorate([
-    observable
-], Radio$1.prototype, "defaultSlottedNodes", void 0);
-
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0 ;
@@ -130,10 +20,86 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Radio extends Radio$1 {
+class Radio extends FormAssociatedRadio {
   constructor() {
-    super(...arguments);
+    super();
     this.ariaLabel = null;
+    /**
+     * The element's value to be included in form submission when checked.
+     * Default to "on" to reach parity with input[type="radio"]
+     *
+     * @internal
+     */
+    this.initialValue = "on";
+    this.defaultSlottedNodes = [];
+    /**
+     * @internal
+     */
+    this.keypressHandler = (e) => {
+      switch (e.key) {
+        case keySpace:
+          if (!this.checked && !this.readOnly) {
+            this.checked = true;
+          }
+          return;
+      }
+      return true;
+    };
+    this.proxy.setAttribute("type", "radio");
+  }
+  // Map to proxy element
+  /**
+   * @internal
+   */
+  readOnlyChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.readOnly = this.readOnly;
+    }
+  }
+  /**
+   * @internal
+   */
+  defaultCheckedChanged() {
+    if (this.$fastController.isConnected && !this.dirtyChecked) {
+      if (!this.isInsideRadioGroup()) {
+        this.checked = this.defaultChecked;
+        this.dirtyChecked = false;
+      }
+    }
+  }
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    this.validate();
+    if (this.parentElement.getAttribute("role") !== "radiogroup" && this.getAttribute("tabindex") === null) {
+      if (!this.disabled) {
+        this.setAttribute("tabindex", "0");
+      }
+    }
+    if (this.checkedAttribute) {
+      if (!this.dirtyChecked) {
+        if (!this.isInsideRadioGroup()) {
+          this.checked = this.defaultChecked;
+          this.dirtyChecked = false;
+        }
+      }
+    }
+  }
+  isInsideRadioGroup() {
+    const parent = this.closest(
+      "[role=radiogroup]"
+    );
+    return parent !== null;
+  }
+  /**
+   * @internal
+   */
+  clickHandler(_) {
+    if (!this.disabled && !this.readOnly && !this.checked) {
+      this.checked = true;
+    }
   }
 }
 __decorateClass([
@@ -145,5 +111,14 @@ __decorateClass([
 __decorateClass([
   attr
 ], Radio.prototype, "connotation");
+__decorateClass([
+  attr({ attribute: "readonly", mode: "boolean" })
+], Radio.prototype, "readOnly");
+__decorateClass([
+  observable
+], Radio.prototype, "name");
+__decorateClass([
+  observable
+], Radio.prototype, "defaultSlottedNodes");
 
 export { Radio as R };

package/shared/slider.template.cjs

@@ -1,5 +1,6 @@
 'use strict';
 
+const numbers = require('./numbers.cjs');
 const definition = require('./definition64.cjs');
 const index = require('./index.cjs');
 const ref = require('./ref.cjs');
@@ -7,19 +8,6 @@ const aria = require('./aria.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
 
-/**
- * This method keeps a given value within the bounds of a min and max value. If the value
- * is larger than the max, the minimum value will be returned. If the value is smaller than the minimum,
- * the maximum will be returned. Otherwise, the value is returned un-changed.
- */
-/**
- * Ensures that a value is between a min and max value. If value is lower than min, min will be returned.
- * If value is greater than max, max will be returned.
- */
-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(
@@ -37,7 +25,7 @@ const roundToStepValue = (value, step) => {
 };
 
 const lerp = (a, b, value) => a + (b - a) * value;
-const inverseLerp = (a, b, value) => limit(0, 1, (value - a) / (b - a));
+const inverseLerp = (a, b, value) => numbers.limit(0, 1, (value - a) / (b - a));
 
 const getClasses = ({ disabled, connotation }) => classNames.classNames(
   "control",
@@ -112,5 +100,4 @@ exports.SliderTemplate = SliderTemplate;
 exports.getMarkersTemplate = getMarkersTemplate;
 exports.inverseLerp = inverseLerp;
 exports.lerp = lerp;
-exports.limit = limit;
 exports.roundToStepValue = roundToStepValue;

package/shared/slider.template.js

@@ -1,3 +1,4 @@
+import { l as limit } from './numbers.js';
 import { P as Popup, a as PlacementStrategy } from './definition64.js';
 import { h as html } from './index.js';
 import { r as ref } from './ref.js';
@@ -5,19 +6,6 @@ import { O as Orientation } from './aria.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-/**
- * This method keeps a given value within the bounds of a min and max value. If the value
- * is larger than the max, the minimum value will be returned. If the value is smaller than the minimum,
- * the maximum will be returned. Otherwise, the value is returned un-changed.
- */
-/**
- * Ensures that a value is between a min and max value. If value is lower than min, min will be returned.
- * If value is greater than max, max will be returned.
- */
-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(
@@ -106,4 +94,4 @@ const SliderTemplate = (context) => {
 	>`;
 };
 
-export { SliderTemplate as S, limit as a, getMarkersTemplate as g, inverseLerp as i, lerp as l, roundToStepValue as r };
+export { SliderTemplate as S, getMarkersTemplate as g, inverseLerp as i, lerp as l, roundToStepValue as r };

package/shared/strings.cjs

@@ -1,5 +1,29 @@
 'use strict';
 
+/**
+ * This method keeps a given value within the bounds of a min and max value. If the value
+ * is larger than the max, the minimum value will be returned. If the value is smaller than the minimum,
+ * the maximum will be returned. Otherwise, the value is returned un-changed.
+ */
+/**
+ * Ensures that a value is between a min and max value. If value is lower than min, min will be returned.
+ * If value is greater than max, max will be returned.
+ */
+function limit(min, max, value) {
+    return Math.min(Math.max(value, min), max);
+}
+/**
+ * Determines if a number value is within a specified range.
+ *
+ * @param value - the value to check
+ * @param min - the range start
+ * @param max - the range end
+ */
+function inRange(value, min, max = 0) {
+    [min, max] = [min, max].sort((a, b) => a - b);
+    return min <= value && value < max;
+}
+
 let uniqueIdCounter = 0;
 /**
  * Generates a unique ID based on incrementing a counter.
@@ -8,4 +32,6 @@ function uniqueId(prefix = "") {
     return `${prefix}${uniqueIdCounter++}`;
 }
 
+exports.inRange = inRange;
+exports.limit = limit;
 exports.uniqueId = uniqueId;

package/shared/strings.js

@@ -1,3 +1,27 @@
+/**
+ * This method keeps a given value within the bounds of a min and max value. If the value
+ * is larger than the max, the minimum value will be returned. If the value is smaller than the minimum,
+ * the maximum will be returned. Otherwise, the value is returned un-changed.
+ */
+/**
+ * Ensures that a value is between a min and max value. If value is lower than min, min will be returned.
+ * If value is greater than max, max will be returned.
+ */
+function limit(min, max, value) {
+    return Math.min(Math.max(value, min), max);
+}
+/**
+ * Determines if a number value is within a specified range.
+ *
+ * @param value - the value to check
+ * @param min - the range start
+ * @param max - the range end
+ */
+function inRange(value, min, max = 0) {
+    [min, max] = [min, max].sort((a, b) => a - b);
+    return min <= value && value < max;
+}
+
 let uniqueIdCounter = 0;
 /**
  * Generates a unique ID based on incrementing a counter.
@@ -6,4 +30,4 @@ function uniqueId(prefix = "") {
     return `${prefix}${uniqueIdCounter++}`;
 }
 
-export { uniqueId as u };
+export { inRange as i, limit as l, uniqueId as u };

package/styles/core/all.css

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

package/styles/core/theme.css

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

package/styles/core/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 13 Nov 2024 14:14:30 GMT
+ * Generated on Wed, 20 Nov 2024 13:40:01 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 Wed, 13 Nov 2024 14:14:30 GMT
+ * Generated on Wed, 20 Nov 2024 13:40:01 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 13 Nov 2024 14:14:30 GMT
+ * Generated on Wed, 20 Nov 2024 13:40:01 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 13 Nov 2024 14:14:30 GMT
+ * Generated on Wed, 20 Nov 2024 13:40:01 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 13 Nov 2024 14:14:30 GMT
+ * Generated on Wed, 20 Nov 2024 13:40:01 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/theme-light.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Wed, 13 Nov 2024 14:14:30 GMT
+ * Generated on Wed, 20 Nov 2024 13:40:01 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 13 Nov 2024 14:14:30 GMT
+ * Generated on Wed, 20 Nov 2024 13:40:01 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 13 Nov 2024 14:14:30 GMT
+ * Generated on Wed, 20 Nov 2024 13:40:01 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 13 Nov 2024 14:14:30 GMT
+ * Generated on Wed, 20 Nov 2024 13:40:01 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 13 Nov 2024 14:14:30 GMT
+ * Generated on Wed, 20 Nov 2024 13:40:01 GMT
  */
 .vvd-root, ::part(vvd-root),
 .vvd-theme-alternate, ::part(vvd-theme-alternate) {