@vonage/vivid 3.10.0 → 3.12.0

package/shared/definition9.js

@@ -3,7 +3,7 @@ import { B as BaseProgress } from './base-progress.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 27 Apr 2023 09:20:45 GMT\n */\n.base {\n  align-items: center;\n  block-size: var(--_size);\n  color: var(--_appearance-color-text);\n  inline-size: var(--_size);\n  outline: none;\n}\n.base.connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta-500);\n}\n.base.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert-500);\n}\n.base.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success-500);\n}\n.base:not(.connotation-cta, .connotation-alert, .connotation-success) {\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base.size--5 {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n}\n.base.size--4 {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.base.size--3 {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 12));\n}\n.base.size--2 {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n}\n.base.size--1 {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 4));\n}\n.base.size-1 {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 4));\n}\n.base.size-2 {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n}\n.base.size-3 {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 12));\n}\n.base.size-4 {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 16));\n}\n.base.size-5 {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 20));\n}\n.base:not(.size--5, .size--4, .size--3, .size--2, .size--1, .size-1, .size-2, .size-3, .size-4, .size-5) {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n\n.progress {\n  width: 100%;\n  height: 100%;\n}\n\n.background {\n  fill: none;\n  stroke: transparent;\n  stroke-width: 1px;\n}\n\n.determinate {\n  fill: none;\n  stroke: currentColor;\n  stroke-linecap: round;\n  stroke-width: 1px;\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: 1px;\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}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 14 May 2023 08:16:54 GMT\n */\n.base {\n  align-items: center;\n  block-size: var(--_size);\n  color: var(--_appearance-color-text);\n  inline-size: var(--_size);\n  outline: none;\n}\n.base.connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta-500);\n}\n.base.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert-500);\n}\n.base.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success-500);\n}\n.base:not(.connotation-cta, .connotation-alert, .connotation-success) {\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base.size--5 {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n}\n.base.size--4 {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.base.size--3 {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 12));\n}\n.base.size--2 {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n}\n.base.size--1 {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 4));\n}\n.base.size-1 {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 4));\n}\n.base.size-2 {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n}\n.base.size-3 {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 12));\n}\n.base.size-4 {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 16));\n}\n.base.size-5 {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 20));\n}\n.base:not(.size--5, .size--4, .size--3, .size--2, .size--1, .size-1, .size-2, .size-3, .size-4, .size-5) {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n\n.progress {\n  width: 100%;\n  height: 100%;\n}\n\n.background {\n  fill: none;\n  stroke: transparent;\n  stroke-width: 1px;\n}\n\n.determinate {\n  fill: none;\n  stroke: currentColor;\n  stroke-linecap: round;\n  stroke-width: 1px;\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: 1px;\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}";
 
 class ProgressRing extends BaseProgress {}
 __decorate([attr, __metadata("design:type", String)], ProgressRing.prototype, "connotation", void 0);

package/shared/enums.js

@@ -27,20 +27,21 @@ var Appearance;
   Appearance["Fieldset"] = "fieldset";
   Appearance["Subtle"] = "subtle";
   Appearance["Ghost"] = "ghost";
+  Appearance["Listitem"] = "listitem";
 })(Appearance || (Appearance = {}));
 var Size;
 (function (Size) {
-  Size["UltraCondensed"] = "ultraCondensed";
-  Size["SuperCondensed"] = "superCondensed";
-  Size["ExtraCondensed"] = "extraCondensed";
-  Size["SemiCondensed"] = "semiCondensed";
+  Size["UltraCondensed"] = "ultra-condensed";
+  Size["SuperCondensed"] = "super-condensed";
+  Size["ExtraCondensed"] = "extra-condensed";
+  Size["SemiCondensed"] = "semi-condensed";
   Size["Condensed"] = "condensed";
   Size["Normal"] = "normal";
-  Size["SemiExpanded"] = "semiExpanded";
+  Size["SemiExpanded"] = "semi-expanded";
   Size["Expanded"] = "expanded";
-  Size["ExtraExpanded"] = "extraExpanded";
-  Size["SuperExpanded"] = "superExpanded";
-  Size["UltraExpanded"] = "ultraExpanded";
+  Size["ExtraExpanded"] = "extra-expanded";
+  Size["SuperExpanded"] = "super-expanded";
+  Size["UltraExpanded"] = "ultra-expanded";
 })(Size || (Size = {}));
 var LayoutSize;
 (function (LayoutSize) {
@@ -67,4 +68,4 @@ var AriaLive;
   AriaLive["Assertive"] = "assertive";
 })(AriaLive || (AriaLive = {}));
 
-export { Appearance as A, Connotation as C, LayoutSize as L, Position as P, Role as R, Shape as S, ConnotationDecorative as a, Size as b, AriaLive as c };
+export { Appearance as A, Connotation as C, LayoutSize as L, Position as P, Role as R, Shape as S, Size as a, ConnotationDecorative as b, AriaLive as c };

package/shared/form-elements.js

@@ -2,7 +2,7 @@ import { _ as __decorate, a as attr, b as __metadata, o as observable, V as vola
 import { I as Icon } from './icon.js';
 import { w as when } from './when.js';
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 27 Apr 2023 09:20:45 GMT\n */\n.message {\n  display: flex;\n  contain: inline-size;\n  font: var(--vvd-typography-base-condensed);\n  gap: 4px;\n  grid-column: 1/-1;\n}\n.message-text {\n  color: var(--vvd-color-canvas-text);\n}\n.helper-message .message-text {\n  color: var(--_low-ink-color);\n}\n.message-icon {\n  font-size: 16px;\n}\n.success-message .message-icon {\n  color: var(--vvd-color-success-500);\n}\n.error-message .message-icon {\n  color: var(--vvd-color-alert-500);\n}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 14 May 2023 08:16:54 GMT\n */\n.message {\n  display: flex;\n  contain: inline-size;\n  font: var(--vvd-typography-base-condensed);\n  gap: 4px;\n  grid-column: 1/-1;\n}\n.message-text {\n  color: var(--vvd-color-canvas-text);\n}\n.helper-message .message-text {\n  color: var(--_low-ink-color);\n}\n.message-icon {\n  font-size: 16px;\n}\n.success-message .message-icon {\n  color: var(--vvd-color-success-500);\n}\n.error-message .message-icon {\n  color: var(--vvd-color-alert-500);\n}";
 
 let _2 = t => t,
   _t,

package/shared/index.js

@@ -6567,4 +6567,4 @@ const defaultPrefix = 'vwc';
 const designSystem = DesignSystem.getOrCreate();
 const registerFactory = registries => (prefix = defaultPrefix) => designSystem.withPrefix(prefix).register(...registries);
 
-export { HTMLDirective as $, AttachedBehaviorHTMLDirective as A, hasOwnProperty_1 as B, objectGetOwnPropertyDescriptor as C, isForced_1 as D, engineV8Version as E, FoundationElement as F, _export as G, defineBuiltIn$3 as H, objectSetPrototypeOf as I, setToStringTag$2 as J, functionCall as K, internalState as L, isObject$7 as M, iterators as N, Observable as O, getMethod$1 as P, lengthOfArrayLike$1 as Q, functionName as R, AttributeConfiguration as S, requireObjectCoercible$2 as T, __classPrivateFieldGet as U, volatile as V, __classPrivateFieldSet as W, booleanConverter as X, DOM as Y, SubscriberSet as Z, __decorate as _, attr as a, HTMLView as a0, objectKeys$1 as a1, toObject$2 as a2, indexedObject as a3, objectGetOwnPropertySymbols as a4, objectPropertyIsEnumerable as a5, copyConstructorProperties$1 as a6, designSystem as a7, __metadata as b, classofRaw as c, getBuiltIn$4 as d, emptyArray as e, objectDefineProperty as f, global$b as g, html as h, descriptors as i, objectIsPrototypeOf as j, functionUncurryThis as k, fails$a as l, isCallable$e as m, nullableNumberConverter as n, observable as o, inspectSource$1 as p, anObject$5 as q, registerFactory as r, isNullOrUndefined$2 as s, tryToString$1 as t, functionBindNative as u, aCallable$1 as v, wellKnownSymbol$6 as w, engineUserAgent as x, html$2 as y, documentCreateElement$2 as z };
+export { HTMLDirective as $, AttachedBehaviorHTMLDirective as A, hasOwnProperty_1 as B, objectGetOwnPropertyDescriptor as C, isForced_1 as D, engineV8Version as E, FoundationElement as F, _export as G, defineBuiltIn$3 as H, objectSetPrototypeOf as I, setToStringTag$2 as J, functionCall as K, internalState as L, isObject$7 as M, iterators as N, Observable as O, getMethod$1 as P, lengthOfArrayLike$1 as Q, functionName as R, AttributeConfiguration as S, requireObjectCoercible$2 as T, __classPrivateFieldGet as U, volatile as V, __classPrivateFieldSet as W, booleanConverter as X, DOM as Y, SubscriberSet as Z, __decorate as _, attr as a, HTMLView as a0, objectKeys$1 as a1, toObject$2 as a2, indexedObject as a3, objectGetOwnPropertySymbols as a4, objectPropertyIsEnumerable as a5, copyConstructorProperties$1 as a6, addToUnscopables$1 as a7, arrayIncludes as a8, designSystem as a9, __metadata as b, classofRaw as c, getBuiltIn$4 as d, emptyArray as e, objectDefineProperty as f, global$b as g, html as h, descriptors as i, objectIsPrototypeOf as j, functionUncurryThis as k, fails$a as l, isCallable$e as m, nullableNumberConverter as n, observable as o, inspectSource$1 as p, anObject$5 as q, registerFactory as r, isNullOrUndefined$2 as s, tryToString$1 as t, functionBindNative as u, aCallable$1 as v, wellKnownSymbol$6 as w, engineUserAgent as x, html$2 as y, documentCreateElement$2 as z };

package/shared/node-observation.js

@@ -0,0 +1,74 @@
+import { O as Observable, e as emptyArray } from './index.js';
+
+/**
+ * Creates a function that can be used to filter a Node array, selecting only elements.
+ * @param selector - An optional selector to restrict the filter to.
+ * @public
+ */
+function elements(selector) {
+    if (selector) {
+        return function (value, index, array) {
+            return value.nodeType === 1 && value.matches(selector);
+        };
+    }
+    return function (value, index, array) {
+        return value.nodeType === 1;
+    };
+}
+/**
+ * A base class for node observation.
+ * @internal
+ */
+class NodeObservationBehavior {
+    /**
+     * Creates an instance of NodeObservationBehavior.
+     * @param target - The target to assign the nodes property on.
+     * @param options - The options to use in configuring node observation.
+     */
+    constructor(target, options) {
+        this.target = target;
+        this.options = options;
+        this.source = null;
+    }
+    /**
+     * Bind this behavior to the source.
+     * @param source - The source to bind to.
+     * @param context - The execution context that the binding is operating within.
+     */
+    bind(source) {
+        const name = this.options.property;
+        this.shouldUpdate = Observable.getAccessors(source).some((x) => x.name === name);
+        this.source = source;
+        this.updateTarget(this.computeNodes());
+        if (this.shouldUpdate) {
+            this.observe();
+        }
+    }
+    /**
+     * Unbinds this behavior from the source.
+     * @param source - The source to unbind from.
+     */
+    unbind() {
+        this.updateTarget(emptyArray);
+        this.source = null;
+        if (this.shouldUpdate) {
+            this.disconnect();
+        }
+    }
+    /** @internal */
+    handleEvent() {
+        this.updateTarget(this.computeNodes());
+    }
+    computeNodes() {
+        let nodes = this.getNodes();
+        if (this.options.filter !== void 0) {
+            nodes = nodes.filter(this.options.filter);
+        }
+        return nodes;
+    }
+    updateTarget(value) {
+        this.source[this.options.property] = value;
+    }
+}
+
+export { NodeObservationBehavior as N, elements as e };

package/shared/patterns/form-elements/form-elements.d.ts

@@ -33,10 +33,10 @@ export declare function formElements<T extends {
         [x: string]: any;
         label?: string | undefined;
         userValid: boolean;
-        "__#9143@#blurred": boolean;
+        "__#9406@#blurred": boolean;
         readonly errorValidationMessage: any;
         connectedCallback(): void;
-        "__#9143@#handleInvalidEvent": () => void;
+        "__#9406@#handleInvalidEvent": () => void;
         disconnectedCallback(): void;
         validate: () => void;
     };
@@ -49,8 +49,8 @@ export declare function errorText<T extends {
     new (...args: any[]): {
         [x: string]: any;
         errorText?: string | undefined;
-        "__#9144@#shouldValidate": boolean;
-        "__#9144@#prevSuccessText": string;
+        "__#9407@#shouldValidate": boolean;
+        "__#9407@#prevSuccessText": string;
         errorTextChanged(_: string, newmsg: string | undefined): void;
     };
 } & T;

package/shared/slotted.js

@@ -1,75 +1,5 @@
-import { O as Observable, e as emptyArray, A as AttachedBehaviorHTMLDirective } from './index.js';
-
-/**
- * Creates a function that can be used to filter a Node array, selecting only elements.
- * @param selector - An optional selector to restrict the filter to.
- * @public
- */
-function elements(selector) {
-    if (selector) {
-        return function (value, index, array) {
-            return value.nodeType === 1 && value.matches(selector);
-        };
-    }
-    return function (value, index, array) {
-        return value.nodeType === 1;
-    };
-}
-/**
- * A base class for node observation.
- * @internal
- */
-class NodeObservationBehavior {
-    /**
-     * Creates an instance of NodeObservationBehavior.
-     * @param target - The target to assign the nodes property on.
-     * @param options - The options to use in configuring node observation.
-     */
-    constructor(target, options) {
-        this.target = target;
-        this.options = options;
-        this.source = null;
-    }
-    /**
-     * Bind this behavior to the source.
-     * @param source - The source to bind to.
-     * @param context - The execution context that the binding is operating within.
-     */
-    bind(source) {
-        const name = this.options.property;
-        this.shouldUpdate = Observable.getAccessors(source).some((x) => x.name === name);
-        this.source = source;
-        this.updateTarget(this.computeNodes());
-        if (this.shouldUpdate) {
-            this.observe();
-        }
-    }
-    /**
-     * Unbinds this behavior from the source.
-     * @param source - The source to unbind from.
-     */
-    unbind() {
-        this.updateTarget(emptyArray);
-        this.source = null;
-        if (this.shouldUpdate) {
-            this.disconnect();
-        }
-    }
-    /** @internal */
-    handleEvent() {
-        this.updateTarget(this.computeNodes());
-    }
-    computeNodes() {
-        let nodes = this.getNodes();
-        if (this.options.filter !== void 0) {
-            nodes = nodes.filter(this.options.filter);
-        }
-        return nodes;
-    }
-    updateTarget(value) {
-        this.source[this.options.property] = value;
-    }
-}
+import { A as AttachedBehaviorHTMLDirective } from './index.js';
+import { N as NodeObservationBehavior } from './node-observation.js';
 
 /**
  * The runtime behavior for slotted node observation.
@@ -116,4 +46,4 @@ function slotted(propertyOrOptions) {
     return new AttachedBehaviorHTMLDirective("fast-slotted", SlottedBehavior, propertyOrOptions);
 }
 
-export { NodeObservationBehavior as N, elements as e, slotted as s };
+export { slotted as s };

package/shared/text-field.js

@@ -1,3 +1,3 @@
-var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 27 Apr 2023 09:20:45 GMT\n */\n:host {\n  display: inline-block;\n}\n\n.base {\n  --_text-field-gutter: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2.5);\n  --_text-field-icon-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2);\n  display: inline-grid;\n  width: 100%;\n  gap: 4px;\n  grid-template-columns: min-content 1fr max-content;\n}\n.base {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.base.appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success-500);\n  --_connotation-color-backdrop: var(--vvd-color-success-50);\n  --_connotation-color-intermediate: var(--vvd-color-success-500);\n  --_connotation-color-firm: var(--vvd-color-success-600);\n  --_connotation-color-faint: var(--vvd-color-success-50);\n  --_connotation-color-soft: var(--vvd-color-success-100);\n}\n.base.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert-500);\n  --_connotation-color-backdrop: var(--vvd-color-alert-50);\n  --_connotation-color-intermediate: var(--vvd-color-alert-500);\n  --_connotation-color-firm: var(--vvd-color-alert-600);\n  --_connotation-color-faint: var(--vvd-color-alert-50);\n  --_connotation-color-soft: var(--vvd-color-alert-100);\n}\n.base:not(.connotation-success, .connotation-alert) {\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n  --_connotation-color-backdrop: var(--vvd-color-canvas);\n  --_connotation-color-intermediate: var(--vvd-color-neutral-500);\n  --_connotation-color-firm: var(--vvd-color-canvas-text);\n  --_connotation-color-faint: var(--vvd-color-neutral-50);\n  --_connotation-color-soft: var(--vvd-color-neutral-100);\n}\n@supports (user-select: none) {\n  .base {\n    user-select: none;\n  }\n}\n.base:not(.disabled) {\n  --_low-ink-color: var(--vvd-color-neutral-600);\n}\n.base.disabled {\n  --_low-ink-color: var(--_appearance-color-text);\n}\n\n.label {\n  color: var(--vvd-color-canvas-text);\n  contain: inline-size;\n  font: var(--vvd-typography-base);\n  grid-column: 1/4;\n  grid-row: 1;\n}\n.char-count + .label {\n  grid-column: 1/3;\n}\n\n.char-count {\n  color: var(--_low-ink-color);\n  font: var(--vvd-typography-base);\n  grid-column: 3/4;\n}\n\n.fieldset {\n  position: relative;\n  display: flex;\n  align-items: center;\n  grid-column: 1/4;\n  transition: color 0.2s;\n  /* Shape */\n}\n.base > .fieldset {\n  block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n.base:not(.shape-pill) .fieldset {\n  border-radius: 6px;\n}\n.base.shape-pill .fieldset {\n  border-radius: 24px;\n}\n\n.control {\n  width: 100%;\n  border: 0 none;\n  appearance: none; /* for box-shadow visibility on IOS */\n  background-color: var(--_appearance-color-fill);\n  block-size: 100%;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  font: var(--vvd-typography-base);\n  padding-block: 0;\n  padding-inline-end: var(--_text-field-gutter);\n  padding-inline-start: var(--_text-field-gutter);\n  transition: box-shadow 0.2s, background-color 0.2s;\n}\n.control:disabled {\n  cursor: not-allowed;\n  opacity: 1; /* 2. correct opacity on iOS */\n  -webkit-text-fill-color: var(--_appearance-color-text); /* 1. sets text fill to current `color` for safari */\n}\n.control::placeholder, .control:disabled::placeholder {\n  opacity: 1; /* 2. correct opacity on iOS */\n  -webkit-text-fill-color: var(--_low-ink-color); /* 1. sets text fill to current `color` for safari */\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n\n.icon {\n  position: absolute;\n  z-index: 1;\n  color: var(--_low-ink-color);\n  font-size: var(--_text-field-icon-size);\n  inset-inline-start: var(--_text-field-gutter);\n  line-height: 1;\n}\n.icon + .control {\n  padding-inline-start: calc(var(--_text-field-icon-size) + var(--_text-field-gutter) * 2);\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n  pointer-events: none;\n}\n.fieldset:not(:focus-visible, :focus-within) > .focus-indicator {\n  display: none;\n}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 14 May 2023 08:16:54 GMT\n */\n:host {\n  display: inline-block;\n}\n\n.base {\n  --_text-field-gutter: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2.5);\n  --_text-field-icon-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2);\n  display: inline-grid;\n  width: 100%;\n  gap: 4px;\n  grid-template-columns: min-content 1fr max-content;\n}\n.base {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.base.appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-600);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success-500);\n  --_connotation-color-backdrop: var(--vvd-color-success-50);\n  --_connotation-color-intermediate: var(--vvd-color-success-500);\n  --_connotation-color-firm: var(--vvd-color-success-600);\n  --_connotation-color-faint: var(--vvd-color-success-50);\n  --_connotation-color-soft: var(--vvd-color-success-100);\n}\n.base.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert-500);\n  --_connotation-color-backdrop: var(--vvd-color-alert-50);\n  --_connotation-color-intermediate: var(--vvd-color-alert-500);\n  --_connotation-color-firm: var(--vvd-color-alert-600);\n  --_connotation-color-faint: var(--vvd-color-alert-50);\n  --_connotation-color-soft: var(--vvd-color-alert-100);\n}\n.base:not(.connotation-success, .connotation-alert) {\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n  --_connotation-color-backdrop: var(--vvd-color-canvas);\n  --_connotation-color-intermediate: var(--vvd-color-neutral-500);\n  --_connotation-color-firm: var(--vvd-color-canvas-text);\n  --_connotation-color-faint: var(--vvd-color-neutral-50);\n  --_connotation-color-soft: var(--vvd-color-neutral-100);\n}\n@supports (user-select: none) {\n  .base {\n    user-select: none;\n  }\n}\n.base:not(.disabled) {\n  --_low-ink-color: var(--vvd-color-neutral-600);\n}\n.base.disabled {\n  --_low-ink-color: var(--_appearance-color-text);\n}\n\n.label {\n  color: var(--vvd-color-canvas-text);\n  contain: inline-size;\n  font: var(--vvd-typography-base);\n  grid-column: 1/4;\n  grid-row: 1;\n}\n.char-count + .label {\n  grid-column: 1/3;\n}\n\n.char-count {\n  color: var(--_low-ink-color);\n  font: var(--vvd-typography-base);\n  grid-column: 3/4;\n}\n\n.fieldset {\n  position: relative;\n  display: flex;\n  align-items: center;\n  grid-column: 1/4;\n  transition: color 0.2s;\n  /* Shape */\n}\n.base > .fieldset {\n  block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n.base:not(.shape-pill) .fieldset {\n  border-radius: 6px;\n}\n.base.shape-pill .fieldset {\n  border-radius: 24px;\n}\n\n.control {\n  width: 100%;\n  border: 0 none;\n  appearance: none; /* for box-shadow visibility on IOS */\n  background-color: var(--_appearance-color-fill);\n  block-size: 100%;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  font: var(--vvd-typography-base);\n  padding-block: 0;\n  padding-inline-end: var(--_text-field-gutter);\n  padding-inline-start: var(--_text-field-gutter);\n  transition: box-shadow 0.2s, background-color 0.2s;\n}\n.control:disabled {\n  cursor: not-allowed;\n  opacity: 1; /* 2. correct opacity on iOS */\n  -webkit-text-fill-color: var(--_appearance-color-text); /* 1. sets text fill to current `color` for safari */\n}\n.control::placeholder, .control:disabled::placeholder {\n  opacity: 1; /* 2. correct opacity on iOS */\n  -webkit-text-fill-color: var(--_low-ink-color); /* 1. sets text fill to current `color` for safari */\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n\n.icon {\n  position: absolute;\n  z-index: 1;\n  color: var(--_low-ink-color);\n  font-size: var(--_text-field-icon-size);\n  inset-inline-start: var(--_text-field-gutter);\n  line-height: 1;\n}\n.icon + .control {\n  padding-inline-start: calc(var(--_text-field-icon-size) + var(--_text-field-gutter) * 2);\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n  pointer-events: none;\n}\n.fieldset:not(:focus-visible, :focus-within) > .focus-indicator {\n  display: none;\n}";
 
 export { css_248z as c };

package/styles/core/all.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Apr 2023 09:20:45 GMT
+ * Generated on Sun, 14 May 2023 08:16:54 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, 27 Apr 2023 09:20:45 GMT
+ * Generated on Sun, 14 May 2023 08:16:54 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, 27 Apr 2023 09:20:45 GMT
+ * Generated on Sun, 14 May 2023 08:16:54 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, 27 Apr 2023 09:20:45 GMT
+ * Generated on Sun, 14 May 2023 08:16:54 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 27 Apr 2023 09:20:45 GMT
+ * Generated on Sun, 14 May 2023 08:16:54 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 27 Apr 2023 09:20:45 GMT
+ * Generated on Sun, 14 May 2023 08:16:54 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 27 Apr 2023 09:20:45 GMT
+ * Generated on Sun, 14 May 2023 08:16:54 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/theme-light.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Apr 2023 09:20:45 GMT
+ * Generated on Sun, 14 May 2023 08:16:54 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 27 Apr 2023 09:20:45 GMT
+ * Generated on Sun, 14 May 2023 08:16:54 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 27 Apr 2023 09:20:45 GMT
+ * Generated on Sun, 14 May 2023 08:16:54 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 27 Apr 2023 09:20:45 GMT
+ * Generated on Sun, 14 May 2023 08:16:54 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/tabs/index.js

@@ -20,5 +20,6 @@ import '../shared/key-codes.js';
 import '../shared/strings.js';
 import '../shared/numbers.js';
 import '../shared/slotted.js';
+import '../shared/node-observation.js';
 
 registerTabs();

package/tree-item/index.js

@@ -16,6 +16,7 @@ import '../shared/ref.js';
 import '../shared/apply-mixins.js';
 import '../shared/dom.js';
 import '../shared/focus2.js';
+import '../shared/node-observation.js';
 import '../shared/slotted.js';
 import '../shared/children.js';
 

package/tree-view/index.js

@@ -7,6 +7,7 @@ import '../shared/apply-mixins.js';
 import '../shared/dom.js';
 import '../shared/key-codes.js';
 import '../shared/slotted.js';
+import '../shared/node-observation.js';
 import '../shared/class-names.js';
 
 registerTreeView();

package/vivid.api.json

@@ -459,6 +459,27 @@
               "releaseTag": "Public",
               "name": "Ghost"
             },
+            {
+              "kind": "EnumMember",
+              "canonicalReference": "@vonage/vivid!Appearance.Listitem:member",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "Listitem = "
+                },
+                {
+                  "kind": "Content",
+                  "text": "\"listitem\""
+                }
+              ],
+              "initializerTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "releaseTag": "Public",
+              "name": "Listitem"
+            },
             {
               "kind": "EnumMember",
               "canonicalReference": "@vonage/vivid!Appearance.Outlined:member",
@@ -4090,7 +4111,7 @@
               "excerptTokens": [
                 {
                   "kind": "Content",
-                  "text": "anchor: "
+                  "text": "anchor?: "
                 },
                 {
                   "kind": "Content",
@@ -4107,7 +4128,7 @@
                 }
               ],
               "isReadonly": false,
-              "isOptional": false,
+              "isOptional": true,
               "releaseTag": "Public",
               "name": "anchor",
               "propertyTypeTokenRange": {
@@ -4124,23 +4145,23 @@
               "excerptTokens": [
                 {
                   "kind": "Content",
-                  "text": "protected anchorEl: "
+                  "text": "get anchorEl(): "
                 },
                 {
                   "kind": "Reference",
-                  "text": "Element",
-                  "canonicalReference": "!Element:interface"
+                  "text": "HTMLElement",
+                  "canonicalReference": "!HTMLElement:interface"
                 },
                 {
                   "kind": "Content",
-                  "text": " | null | undefined"
+                  "text": " | null"
                 },
                 {
                   "kind": "Content",
                   "text": ";"
                 }
               ],
-              "isReadonly": false,
+              "isReadonly": true,
               "isOptional": false,
               "releaseTag": "Public",
               "name": "anchorEl",
@@ -4149,7 +4170,7 @@
                 "endIndex": 3
               },
               "isStatic": false,
-              "isProtected": true
+              "isProtected": false
             },
             {
               "kind": "Property",
@@ -7263,7 +7284,7 @@
                 },
                 {
                   "kind": "Content",
-                  "text": "\"extraCondensed\""
+                  "text": "\"extra-condensed\""
                 }
               ],
               "initializerTokenRange": {
@@ -7284,7 +7305,7 @@
                 },
                 {
                   "kind": "Content",
-                  "text": "\"extraExpanded\""
+                  "text": "\"extra-expanded\""
                 }
               ],
               "initializerTokenRange": {
@@ -7326,7 +7347,7 @@
                 },
                 {
                   "kind": "Content",
-                  "text": "\"semiCondensed\""
+                  "text": "\"semi-condensed\""
                 }
               ],
               "initializerTokenRange": {
@@ -7347,7 +7368,7 @@
                 },
                 {
                   "kind": "Content",
-                  "text": "\"semiExpanded\""
+                  "text": "\"semi-expanded\""
                 }
               ],
               "initializerTokenRange": {
@@ -7368,7 +7389,7 @@
                 },
                 {
                   "kind": "Content",
-                  "text": "\"superCondensed\""
+                  "text": "\"super-condensed\""
                 }
               ],
               "initializerTokenRange": {
@@ -7389,7 +7410,7 @@
                 },
                 {
                   "kind": "Content",
-                  "text": "\"superExpanded\""
+                  "text": "\"super-expanded\""
                 }
               ],
               "initializerTokenRange": {
@@ -7410,7 +7431,7 @@
                 },
                 {
                   "kind": "Content",
-                  "text": "\"ultraCondensed\""
+                  "text": "\"ultra-condensed\""
                 }
               ],
               "initializerTokenRange": {
@@ -7431,7 +7452,7 @@
                 },
                 {
                   "kind": "Content",
-                  "text": "\"ultraExpanded\""
+                  "text": "\"ultra-expanded\""
                 }
               ],
               "initializerTokenRange": {