@vonage/vivid 4.13.0 → 4.14.1

package/shared/slider.template.js

@@ -1,6 +1,6 @@
 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 { P as Popup, a as PlacementStrategy } from './definition63.js';
+import { h as html } from './vivid-element.js';
 import { r as ref } from './ref.js';
 import { O as Orientation } from './aria.js';
 import { w as when } from './when.js';

package/shared/slotted.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index.cjs');
+const vividElement = require('./vivid-element.cjs');
 
 /**
  * Creates a function that can be used to filter a Node array, selecting only elements.
@@ -39,7 +39,7 @@ class NodeObservationBehavior {
      */
     bind(source) {
         const name = this.options.property;
-        this.shouldUpdate = index.Observable.getAccessors(source).some((x) => x.name === name);
+        this.shouldUpdate = vividElement.Observable.getAccessors(source).some((x) => x.name === name);
         this.source = source;
         this.updateTarget(this.computeNodes());
         if (this.shouldUpdate) {
@@ -51,7 +51,7 @@ class NodeObservationBehavior {
      * @param source - The source to unbind from.
      */
     unbind() {
-        this.updateTarget(index.emptyArray);
+        this.updateTarget(vividElement.emptyArray);
         this.source = null;
         if (this.shouldUpdate) {
             this.disconnect();
@@ -115,7 +115,7 @@ function slotted(propertyOrOptions) {
     if (typeof propertyOrOptions === "string") {
         propertyOrOptions = { property: propertyOrOptions };
     }
-    return new index.AttachedBehaviorHTMLDirective("fast-slotted", SlottedBehavior, propertyOrOptions);
+    return new vividElement.AttachedBehaviorHTMLDirective("fast-slotted", SlottedBehavior, propertyOrOptions);
 }
 
 exports.NodeObservationBehavior = NodeObservationBehavior;

package/shared/slotted.js

@@ -1,4 +1,4 @@
-import { O as Observable, e as emptyArray, b as AttachedBehaviorHTMLDirective } from './index.js';
+import { O as Observable, e as emptyArray, b as AttachedBehaviorHTMLDirective } from './vivid-element.js';
 
 /**
  * Creates a function that can be used to filter a Node array, selecting only elements.

package/shared/strings.cjs

@@ -1,29 +1,5 @@
 '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.
@@ -32,6 +8,4 @@ function uniqueId(prefix = "") {
     return `${prefix}${uniqueIdCounter++}`;
 }
 
-exports.inRange = inRange;
-exports.limit = limit;
 exports.uniqueId = uniqueId;

package/shared/strings.js

@@ -1,27 +1,3 @@
-/**
- * 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.
@@ -30,4 +6,4 @@ function uniqueId(prefix = "") {
     return `${prefix}${uniqueIdCounter++}`;
 }
 
-export { inRange as i, limit as l, uniqueId as u };
+export { uniqueId as u };

package/shared/strings2.cjs

@@ -0,0 +1,37 @@
+'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.
+ */
+function uniqueId(prefix = "") {
+    return `${prefix}${uniqueIdCounter++}`;
+}
+
+exports.inRange = inRange;
+exports.limit = limit;
+exports.uniqueId = uniqueId;

package/shared/strings2.js

@@ -0,0 +1,33 @@
+/**
+ * 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.
+ */
+function uniqueId(prefix = "") {
+    return `${prefix}${uniqueIdCounter++}`;
+}
+
+export { inRange as i, limit as l, uniqueId as u };

package/shared/text-anchor.cjs

@@ -1,91 +1,9 @@
 'use strict';
 
 const affix = require('./affix.cjs');
-const index = require('./index.cjs');
 const applyMixins = require('./apply-mixins.cjs');
-const ariaGlobal = require('./aria-global.cjs');
-const startEnd = require('./start-end.cjs');
-
-/**
- * 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 index.FoundationElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * 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 = () => {
-                    var _a;
-                    (_a = this.control) === null || _a === void 0 ? void 0 : _a.focus();
-                };
-            }
-        };
-    }
-    /**
-     * @internal
-     */
-    connectedCallback() {
-        super.connectedCallback();
-        this.handleUnsupportedDelegatesFocus();
-    }
-}
-index.__decorate([
-    index.attr
-], Anchor.prototype, "download", void 0);
-index.__decorate([
-    index.attr
-], Anchor.prototype, "href", void 0);
-index.__decorate([
-    index.attr
-], Anchor.prototype, "hreflang", void 0);
-index.__decorate([
-    index.attr
-], Anchor.prototype, "ping", void 0);
-index.__decorate([
-    index.attr
-], Anchor.prototype, "referrerpolicy", void 0);
-index.__decorate([
-    index.attr
-], Anchor.prototype, "rel", void 0);
-index.__decorate([
-    index.attr
-], Anchor.prototype, "target", void 0);
-index.__decorate([
-    index.attr
-], Anchor.prototype, "type", void 0);
-index.__decorate([
-    index.observable
-], Anchor.prototype, "defaultSlottedContent", void 0);
-/**
- * Includes ARIA states and properties relating to the ARIA link role
- *
- * @public
- */
-class DelegatesARIALink {
-}
-index.__decorate([
-    index.attr({ attribute: "aria-expanded" })
-], DelegatesARIALink.prototype, "ariaExpanded", void 0);
-applyMixins.applyMixins(DelegatesARIALink, ariaGlobal.ARIAGlobalStatesAndProperties);
-applyMixins.applyMixins(Anchor, startEnd.StartEnd, DelegatesARIALink);
+const anchor = require('./anchor.cjs');
+const vividElement = require('./vivid-element.cjs');
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -96,7 +14,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class TextAnchor extends Anchor {
+class TextAnchor extends vividElement.VividElement {
   /**
    * Allows subclasses to provide a body template that will be rendered inside the anchor.
    * @internal
@@ -106,14 +24,14 @@ class TextAnchor extends Anchor {
   }
 }
 __decorateClass([
-  index.attr
+  vividElement.attr
 ], TextAnchor.prototype, "text");
 __decorateClass([
-  index.attr
+  vividElement.attr
 ], TextAnchor.prototype, "connotation");
 __decorateClass([
-  index.attr
+  vividElement.attr
 ], TextAnchor.prototype, "appearance");
-applyMixins.applyMixins(TextAnchor, affix.AffixIcon);
+applyMixins.applyMixins(TextAnchor, affix.AffixIcon, anchor.Anchor);
 
 exports.TextAnchor = TextAnchor;

package/shared/text-anchor.js

@@ -1,89 +1,7 @@
 import { A as AffixIcon } from './affix.js';
-import { F as FoundationElement, _ as __decorate, a as attr, o as observable } from './index.js';
 import { a as applyMixins } from './apply-mixins.js';
-import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
-import { S as StartEnd } from './start-end.js';
-
-/**
- * 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 {
-    constructor() {
-        super(...arguments);
-        /**
-         * 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 = () => {
-                    var _a;
-                    (_a = this.control) === null || _a === void 0 ? void 0 : _a.focus();
-                };
-            }
-        };
-    }
-    /**
-     * @internal
-     */
-    connectedCallback() {
-        super.connectedCallback();
-        this.handleUnsupportedDelegatesFocus();
-    }
-}
-__decorate([
-    attr
-], Anchor.prototype, "download", void 0);
-__decorate([
-    attr
-], Anchor.prototype, "href", void 0);
-__decorate([
-    attr
-], Anchor.prototype, "hreflang", void 0);
-__decorate([
-    attr
-], Anchor.prototype, "ping", void 0);
-__decorate([
-    attr
-], Anchor.prototype, "referrerpolicy", void 0);
-__decorate([
-    attr
-], Anchor.prototype, "rel", void 0);
-__decorate([
-    attr
-], Anchor.prototype, "target", void 0);
-__decorate([
-    attr
-], Anchor.prototype, "type", void 0);
-__decorate([
-    observable
-], Anchor.prototype, "defaultSlottedContent", void 0);
-/**
- * Includes ARIA states and properties relating to the ARIA link role
- *
- * @public
- */
-class DelegatesARIALink {
-}
-__decorate([
-    attr({ attribute: "aria-expanded" })
-], DelegatesARIALink.prototype, "ariaExpanded", void 0);
-applyMixins(DelegatesARIALink, ARIAGlobalStatesAndProperties);
-applyMixins(Anchor, StartEnd, DelegatesARIALink);
+import { A as Anchor } from './anchor.js';
+import { V as VividElement, a as attr } from './vivid-element.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -94,7 +12,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class TextAnchor extends Anchor {
+class TextAnchor extends VividElement {
   /**
    * Allows subclasses to provide a body template that will be rendered inside the anchor.
    * @internal
@@ -112,6 +30,6 @@ __decorateClass([
 __decorateClass([
   attr
 ], TextAnchor.prototype, "appearance");
-applyMixins(TextAnchor, AffixIcon);
+applyMixins(TextAnchor, AffixIcon, Anchor);
 
 export { TextAnchor as T };

package/shared/text-anchor.template.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 const affix = require('./affix.cjs');
-const index = require('./index.cjs');
+const vividElement = require('./vivid-element.cjs');
 const ref = require('./ref.cjs');
 const classNames = require('./class-names.cjs');
 
@@ -13,7 +13,7 @@ const getClasses = ({ text, connotation, appearance }) => classNames.classNames(
 );
 const textAnchorTemplate = (context) => {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  return index.html`<a
+  return vividElement.html`<a
 		class="${getClasses}"
 		download="${(x) => x.download}"
 		href="${(x) => x.href}"

package/shared/text-anchor.template.js

@@ -1,5 +1,5 @@
 import { a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
-import { h as html } from './index.js';
+import { h as html } from './vivid-element.js';
 import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
 

package/shared/text-field2.cjs

@@ -1,12 +1,12 @@
 'use strict';
 
-const index = require('./index.cjs');
+const applyMixins = require('./apply-mixins.cjs');
+const vividElement = require('./vivid-element.cjs');
 const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
 const formAssociated = require('./form-associated.cjs');
-const icon = require('./icon.cjs');
-const ariaGlobal = require('./aria-global2.cjs');
+const definition = require('./definition27.cjs');
 const formElements = require('./form-elements.cjs');
-const applyMixins = require('./apply-mixins.cjs');
+const ariaGlobal = require('./aria-global.cjs');
 const affix = require('./affix.cjs');
 
 const byteToHex = [];
@@ -92,7 +92,7 @@ class Reflector {
     });
   }
   destroy() {
-    const notifier = index.Observable.getNotifier(this.#source);
+    const notifier = vividElement.Observable.getNotifier(this.#source);
     for (const prop of this.#reflectedProperties.keys()) {
       notifier.unsubscribe(this.#propertyChangeHandler, prop);
     }
@@ -100,7 +100,7 @@ class Reflector {
   }
   #addReflectedProperty(name, reflected) {
     this.#reflectedProperties.set(name, reflected);
-    const notifier = index.Observable.getNotifier(this.#source);
+    const notifier = vividElement.Observable.getNotifier(this.#source);
     notifier.subscribe(this.#propertyChangeHandler, name);
     this.#propertyChangeHandler.handleChange(this.#source, name);
   }
@@ -110,14 +110,14 @@ class Reflector {
       const value = source[propertyName];
       switch (reflectedProperty.type) {
         case "boolean-attribute":
-          index.DOM.setBooleanAttribute(
+          vividElement.DOM.setBooleanAttribute(
             this.#target,
             reflectedProperty.destination,
             Boolean(value)
           );
           break;
         case "attribute":
-          index.DOM.setAttribute(this.#target, reflectedProperty.destination, value);
+          vividElement.DOM.setAttribute(this.#target, reflectedProperty.destination, value);
           break;
         case "property":
           if (reflectedProperty.skipIfEqual && this.#target[reflectedProperty.destination] === value) {
@@ -130,7 +130,7 @@ class Reflector {
   };
 }
 
-class _TextField extends index.FoundationElement {
+class _TextField extends vividElement.VividElement {
 }
 class FormAssociatedTextField extends formAssociated.FormAssociated(_TextField) {
   constructor() {
@@ -181,7 +181,7 @@ const TextFieldType = {
   url: "url"
 };
 const safariWorkaroundClassName = "_vvd-3-text-field-safari-workaround";
-const getSafariWorkaroundStyleSheet = icon.memoizeWith(
+const getSafariWorkaroundStyleSheet = definition.memoizeWith(
   () => "",
   () => {
     const styleSheet = new CSSStyleSheet();
@@ -355,7 +355,7 @@ exports.TextField = class TextField extends FormAssociatedTextField {
     this.proxy.setAttribute("type", this.type);
     this.validate();
     if (this.autofocus) {
-      index.DOM.queueUpdate(() => {
+      vividElement.DOM.queueUpdate(() => {
         this.focus();
       });
     }
@@ -502,55 +502,55 @@ updateMirroredHelperText_fn = function() {
   }
 };
 __decorateClass([
-  index.attr({ attribute: "readonly", mode: "boolean" })
+  vividElement.attr({ attribute: "readonly", mode: "boolean" })
 ], exports.TextField.prototype, "readOnly", 2);
 __decorateClass([
-  index.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], exports.TextField.prototype, "autofocus", 2);
 __decorateClass([
-  index.attr
+  vividElement.attr
 ], exports.TextField.prototype, "placeholder", 2);
 __decorateClass([
-  index.attr
+  vividElement.attr
 ], exports.TextField.prototype, "type", 2);
 __decorateClass([
-  index.attr
+  vividElement.attr
 ], exports.TextField.prototype, "list", 2);
 __decorateClass([
-  index.attr({ converter: index.nullableNumberConverter })
+  vividElement.attr({ converter: vividElement.nullableNumberConverter })
 ], exports.TextField.prototype, "maxlength", 2);
 __decorateClass([
-  index.attr({ converter: index.nullableNumberConverter })
+  vividElement.attr({ converter: vividElement.nullableNumberConverter })
 ], exports.TextField.prototype, "minlength", 2);
 __decorateClass([
-  index.attr
+  vividElement.attr
 ], exports.TextField.prototype, "pattern", 2);
 __decorateClass([
-  index.attr({ converter: index.nullableNumberConverter })
+  vividElement.attr({ converter: vividElement.nullableNumberConverter })
 ], exports.TextField.prototype, "size", 2);
 __decorateClass([
-  index.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], exports.TextField.prototype, "spellcheck", 2);
 __decorateClass([
-  index.attr
+  vividElement.attr
 ], exports.TextField.prototype, "appearance", 2);
 __decorateClass([
-  index.attr
+  vividElement.attr
 ], exports.TextField.prototype, "shape", 2);
 __decorateClass([
-  index.attr
+  vividElement.attr
 ], exports.TextField.prototype, "autoComplete", 2);
 __decorateClass([
-  index.attr()
+  vividElement.attr()
 ], exports.TextField.prototype, "scale", 2);
 __decorateClass([
-  index.attr({ attribute: "inputmode" })
+  vividElement.attr({ attribute: "inputmode" })
 ], exports.TextField.prototype, "inputMode", 2);
 __decorateClass([
-  index.observable
+  vividElement.observable
 ], exports.TextField.prototype, "actionItemsSlottedContent", 2);
 __decorateClass([
-  index.observable
+  vividElement.observable
 ], exports.TextField.prototype, "leadingActionItemsSlottedContent", 2);
 exports.TextField = __decorateClass([
   formElements.errorText,

package/shared/text-field2.js

@@ -1,10 +1,10 @@
-import { O as Observable, D as DOM, F as FoundationElement, a as attr, n as nullableNumberConverter, o as observable } from './index.js';
+import { a as applyMixins } from './apply-mixins.js';
+import { O as Observable, D as DOM, V as VividElement, a as attr, n as nullableNumberConverter, o as observable } from './vivid-element.js';
 import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
 import { F as FormAssociated } from './form-associated.js';
-import { m as memoizeWith } from './icon.js';
-import { A as ARIAGlobalStatesAndProperties } from './aria-global2.js';
+import { m as memoizeWith } from './definition27.js';
 import { e as errorText, f as formElements, F as FormElementSuccessText, a as FormElementHelperText, b as FormElementCharCount } from './form-elements.js';
-import { a as applyMixins } from './apply-mixins.js';
+import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
 import { A as AffixIcon } from './affix.js';
 
 const byteToHex = [];
@@ -128,7 +128,7 @@ class Reflector {
   };
 }
 
-class _TextField extends FoundationElement {
+class _TextField extends VividElement {
 }
 class FormAssociatedTextField extends FormAssociated(_TextField) {
   constructor() {