@vonage/vivid 4.22.0 → 4.24.0

package/shared/vivid-element.js

@@ -2589,10 +2589,100 @@ const defineVividComponent = (name, type, template, dependencies, options) => ({
   options
 });
 
-class VividElement extends FASTElement {
+const ariaChangeSubscribers = /* @__PURE__ */ new WeakMap();
+const getSubscribers = (source) => {
+  let subscribers = ariaChangeSubscribers.get(source);
+  if (!subscribers) {
+    subscribers = [];
+    ariaChangeSubscribers.set(source, subscribers);
+  }
+  return subscribers;
+};
+const subscribeToAriaPropertyChanges = (source, listener) => {
+  getSubscribers(source).push(listener);
+};
+const unsubscribeFromAriaPropertyChanges = (source, listener) => {
+  getSubscribers(source).splice(getSubscribers(source).indexOf(listener), 1);
+};
+const publishAriaPropertyChange = (source, changedAriaProperty) => {
+  getSubscribers(source).forEach((s) => s(source, changedAriaProperty));
+};
+
+const ariaMixinProperties = [
+  "role",
+  "ariaAtomic",
+  "ariaAutoComplete",
+  "ariaBusy",
+  "ariaChecked",
+  "ariaColCount",
+  "ariaColIndex",
+  "ariaColIndexText",
+  "ariaColSpan",
+  "ariaCurrent",
+  "ariaDescription",
+  "ariaDisabled",
+  "ariaExpanded",
+  "ariaHasPopup",
+  "ariaHidden",
+  "ariaInvalid",
+  "ariaKeyShortcuts",
+  "ariaLabel",
+  "ariaLevel",
+  "ariaLive",
+  "ariaModal",
+  "ariaMultiLine",
+  "ariaMultiSelectable",
+  "ariaOrientation",
+  "ariaPlaceholder",
+  "ariaPosInSet",
+  "ariaPressed",
+  "ariaReadOnly",
+  "ariaRequired",
+  "ariaRoleDescription",
+  "ariaRowCount",
+  "ariaRowIndex",
+  "ariaRowIndexText",
+  "ariaRowSpan",
+  "ariaSelected",
+  "ariaSetSize",
+  "ariaSort",
+  "ariaValueMax",
+  "ariaValueMin",
+  "ariaValueNow",
+  "ariaValueText",
+  "ariaRelevant"
+  // Non-standard
+];
+const ariaAttributeName = (ariaPropertyName) => ariaPropertyName.replace("aria", "aria-").toLowerCase();
+const AriaMixin = (Base) => {
+  class AriaMixinElement extends Base {
+    constructor(...args) {
+      super(args);
+      this.specialHandling = false;
+      this._vividAriaBehaviour = "default";
+      for (const ariaProperty of ariaMixinProperties) {
+        this[ariaProperty] = null;
+      }
+    }
+  }
+  for (const ariaProperty of ariaMixinProperties) {
+    attr({
+      attribute: ariaAttributeName(ariaProperty),
+      mode: "reflect"
+    })(AriaMixinElement.prototype, ariaProperty);
+    AriaMixinElement.prototype[`${ariaProperty}Changed`] = function() {
+      if (this._vividAriaBehaviour !== "default") {
+        publishAriaPropertyChange(this, ariaProperty);
+      }
+    };
+  }
+  return AriaMixinElement;
+};
+
+class VividElement extends AriaMixin(FASTElement) {
   static {
-    this.VIVID_VERSION = "4.22.0";
+    this.VIVID_VERSION = "4.24.0";
   }
 }
 
-export { AttachedBehaviorHTMLDirective as A, DOM as D, HTMLDirective as H, Observable as O, SubscriberSet as S, VividElement as V, attr as a, booleanConverter as b, AttributeConfiguration as c, createRegisterFunction as d, emptyArray as e, defineVividComponent as f, HTMLView as g, html as h, defaultExecutionContext as i, nullableNumberConverter as n, observable as o, volatile as v };
+export { AttachedBehaviorHTMLDirective as A, DOM as D, HTMLDirective as H, Observable as O, SubscriberSet as S, VividElement as V, attr as a, booleanConverter as b, AttributeConfiguration as c, ariaAttributeName as d, emptyArray as e, ariaMixinProperties as f, createRegisterFunction as g, html as h, defineVividComponent as i, HTMLView as j, defaultExecutionContext as k, nullableNumberConverter as n, observable as o, subscribeToAriaPropertyChanges as s, unsubscribeFromAriaPropertyChanges as u, volatile as v };

package/styles/core/all.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 22 Apr 2025 12:52:38 GMT
+ * Generated on Mon, 12 May 2025 14:52:13 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);

package/styles/core/theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 22 Apr 2025 12:52:38 GMT
+ * Generated on Mon, 12 May 2025 14:52:13 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);

package/styles/core/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 22 Apr 2025 12:52:38 GMT
+ * Generated on Mon, 12 May 2025 14:52:13 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 Tue, 22 Apr 2025 12:52:38 GMT
+ * Generated on Mon, 12 May 2025 14:52:14 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 22 Apr 2025 12:52:38 GMT
+ * Generated on Mon, 12 May 2025 14:52:14 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 22 Apr 2025 12:52:38 GMT
+ * Generated on Mon, 12 May 2025 14:52:14 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 22 Apr 2025 12:52:38 GMT
+ * Generated on Mon, 12 May 2025 14:52:14 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/theme-light.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Tue, 22 Apr 2025 12:52:38 GMT
+ * Generated on Mon, 12 May 2025 14:52:14 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 22 Apr 2025 12:52:38 GMT
+ * Generated on Mon, 12 May 2025 14:52:14 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 22 Apr 2025 12:52:38 GMT
+ * Generated on Mon, 12 May 2025 14:52:14 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 22 Apr 2025 12:52:38 GMT
+ * Generated on Mon, 12 May 2025 14:52:14 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 22 Apr 2025 12:52:38 GMT
+ * Generated on Mon, 12 May 2025 14:52:13 GMT
  */
 .vvd-root, ::part(vvd-root),
 .vvd-theme-alternate, ::part(vvd-theme-alternate) {

package/text-anchor/index.js

@@ -1,5 +1,5 @@
 import { i as iconDefinition } from '../shared/definition28.js';
-import { d as createRegisterFunction, f as defineVividComponent } from '../shared/vivid-element.js';
+import { g as createRegisterFunction, i as defineVividComponent } from '../shared/vivid-element.js';
 import { T as TextAnchor } from '../shared/text-anchor.js';
 import { t as textAnchorTemplate } from '../shared/text-anchor.template.js';
 

package/vivid.api.json

@@ -1,7 +1,7 @@
 {
   "metadata": {
     "toolPackage": "@microsoft/api-extractor",
-    "toolVersion": "7.52.2",
+    "toolVersion": "7.52.5",
     "schemaVersion": 1011,
     "oldestForwardsCompatibleVersion": 1001,
     "tsdocConfig": {
@@ -10490,8 +10490,8 @@
             },
             {
               "kind": "Reference",
-              "text": "VividElement",
-              "canonicalReference": "@vonage/vivid!~VividElement:class"
+              "text": "Breadcrumb_base",
+              "canonicalReference": "@vonage/vivid!~Breadcrumb_base"
             },
             {
               "kind": "Content",
@@ -11478,8 +11478,8 @@
             },
             {
               "kind": "Reference",
-              "text": "VividElement",
-              "canonicalReference": "@vonage/vivid!~VividElement:class"
+              "text": "CalendarEvent_base",
+              "canonicalReference": "@vonage/vivid!~CalendarEvent_base"
             },
             {
               "kind": "Content",
@@ -17544,8 +17544,8 @@
             },
             {
               "kind": "Reference",
-              "text": "VividElement",
-              "canonicalReference": "@vonage/vivid!~VividElement:class"
+              "text": "Header_base",
+              "canonicalReference": "@vonage/vivid!~Header_base"
             },
             {
               "kind": "Content",
@@ -18964,8 +18964,8 @@
             },
             {
               "kind": "Reference",
-              "text": "VividElement",
-              "canonicalReference": "@vonage/vivid!~VividElement:class"
+              "text": "Nav_base",
+              "canonicalReference": "@vonage/vivid!~Nav_base"
             },
             {
               "kind": "Content",
@@ -21681,8 +21681,8 @@
             },
             {
               "kind": "Reference",
-              "text": "VividElement",
-              "canonicalReference": "@vonage/vivid!~VividElement:class"
+              "text": "RadioGroup_base",
+              "canonicalReference": "@vonage/vivid!~RadioGroup_base"
             },
             {
               "kind": "Content",
@@ -22749,6 +22749,67 @@
               "isAbstract": false,
               "name": "focus"
             },
+            {
+              "kind": "Property",
+              "canonicalReference": "@vonage/vivid!VwcRichTextEditorElement#placeholder:member",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "placeholder?: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "string"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": true,
+              "releaseTag": "Public",
+              "name": "placeholder",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "isStatic": false,
+              "isProtected": false,
+              "isAbstract": false
+            },
+            {
+              "kind": "Method",
+              "canonicalReference": "@vonage/vivid!VwcRichTextEditorElement#placeholderChanged:member(1)",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "placeholderChanged(): "
+                },
+                {
+                  "kind": "Content",
+                  "text": "void"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isStatic": false,
+              "returnTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "releaseTag": "Public",
+              "isProtected": false,
+              "overloadIndex": 1,
+              "parameters": [],
+              "isOptional": false,
+              "isAbstract": false,
+              "name": "placeholderChanged"
+            },
             {
               "kind": "Property",
               "canonicalReference": "@vonage/vivid!VwcRichTextEditorElement#selectionEnd:member",
@@ -22871,6 +22932,37 @@
               "isAbstract": false,
               "name": "selectionStartChanged"
             },
+            {
+              "kind": "Property",
+              "canonicalReference": "@vonage/vivid!VwcRichTextEditorElement#selectionStyles:member",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "get selectionStyles(): "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "SelectionStyles",
+                  "canonicalReference": "@vonage/vivid!~SelectionStyles:interface"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": true,
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "selectionStyles",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "isStatic": false,
+              "isProtected": false,
+              "isAbstract": false
+            },
             {
               "kind": "Method",
               "canonicalReference": "@vonage/vivid!VwcRichTextEditorElement#setSelectionDecoration:member(1)",
@@ -22919,6 +23011,55 @@
               "isAbstract": false,
               "name": "setSelectionDecoration"
             },
+            {
+              "kind": "Method",
+              "canonicalReference": "@vonage/vivid!VwcRichTextEditorElement#setSelectionTextSize:member(1)",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "setSelectionTextSize(textSize: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "RICH_TEXT_EDITOR_MENUBAR_TEXT_SIZES",
+                  "canonicalReference": "@vonage/vivid!~RICH_TEXT_EDITOR_MENUBAR_TEXT_SIZES:type"
+                },
+                {
+                  "kind": "Content",
+                  "text": "): "
+                },
+                {
+                  "kind": "Content",
+                  "text": "void"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isStatic": false,
+              "returnTypeTokenRange": {
+                "startIndex": 3,
+                "endIndex": 4
+              },
+              "releaseTag": "Public",
+              "isProtected": false,
+              "overloadIndex": 1,
+              "parameters": [
+                {
+                  "parameterName": "textSize",
+                  "parameterTypeTokenRange": {
+                    "startIndex": 1,
+                    "endIndex": 2
+                  },
+                  "isOptional": false
+                }
+              ],
+              "isOptional": false,
+              "isAbstract": false,
+              "name": "setSelectionTextSize"
+            },
             {
               "kind": "Method",
               "canonicalReference": "@vonage/vivid!VwcRichTextEditorElement#setTextBlock:member(1)",
@@ -23302,6 +23443,36 @@
               "isProtected": false,
               "isAbstract": false
             },
+            {
+              "kind": "Property",
+              "canonicalReference": "@vonage/vivid!VwcSearchableSelectElement#maxSelected:member",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "maxSelected: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "number | null"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "maxSelected",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "isStatic": false,
+              "isProtected": false,
+              "isAbstract": false
+            },
             {
               "kind": "Property",
               "canonicalReference": "@vonage/vivid!VwcSearchableSelectElement#multiple:member",
@@ -26129,8 +26300,8 @@
             },
             {
               "kind": "Reference",
-              "text": "VividElement",
-              "canonicalReference": "@vonage/vivid!~VividElement:class"
+              "text": "TabPanel_base",
+              "canonicalReference": "@vonage/vivid!~TabPanel_base"
             },
             {
               "kind": "Content",
@@ -26241,7 +26412,7 @@
               "excerptTokens": [
                 {
                   "kind": "Content",
-                  "text": "activetab: "
+                  "text": "get activetab(): "
                 },
                 {
                   "kind": "Reference",
@@ -26253,7 +26424,7 @@
                   "text": ";"
                 }
               ],
-              "isReadonly": false,
+              "isReadonly": true,
               "isOptional": false,
               "releaseTag": "Public",
               "name": "activetab",
@@ -29323,8 +29494,8 @@
             },
             {
               "kind": "Reference",
-              "text": "VividElement",
-              "canonicalReference": "@vonage/vivid!~VividElement:class"
+              "text": "TreeView_base",
+              "canonicalReference": "@vonage/vivid!~TreeView_base"
             },
             {
               "kind": "Content",

package/shared/Reflector.cjs

@@ -1,71 +0,0 @@
-'use strict';
-
-const vividElement = require('./vivid-element.cjs');
-
-class Reflector {
-  #reflectedProperties = /* @__PURE__ */ new Map();
-  #source;
-  #target;
-  constructor(source, target) {
-    this.#source = source;
-    this.#target = target;
-  }
-  attribute(propertyName, attributeName) {
-    this.#addReflectedProperty(propertyName, {
-      type: "attribute",
-      destination: attributeName
-    });
-  }
-  booleanAttribute(propertyName, attributeName) {
-    this.#addReflectedProperty(propertyName, {
-      type: "boolean-attribute",
-      destination: attributeName
-    });
-  }
-  property(propertyName, targetProperty, skipIfEqual = false) {
-    this.#addReflectedProperty(propertyName, {
-      type: "property",
-      destination: targetProperty,
-      skipIfEqual
-    });
-  }
-  destroy() {
-    const notifier = vividElement.Observable.getNotifier(this.#source);
-    for (const prop of this.#reflectedProperties.keys()) {
-      notifier.unsubscribe(this.#propertyChangeHandler, prop);
-    }
-    this.#reflectedProperties.clear();
-  }
-  #addReflectedProperty(name, reflected) {
-    this.#reflectedProperties.set(name, reflected);
-    const notifier = vividElement.Observable.getNotifier(this.#source);
-    notifier.subscribe(this.#propertyChangeHandler, name);
-    this.#propertyChangeHandler.handleChange(this.#source, name);
-  }
-  #propertyChangeHandler = {
-    handleChange: (source, propertyName) => {
-      const reflectedProperty = this.#reflectedProperties.get(propertyName);
-      const value = source[propertyName];
-      switch (reflectedProperty.type) {
-        case "boolean-attribute":
-          vividElement.DOM.setBooleanAttribute(
-            this.#target,
-            reflectedProperty.destination,
-            Boolean(value)
-          );
-          break;
-        case "attribute":
-          vividElement.DOM.setAttribute(this.#target, reflectedProperty.destination, value);
-          break;
-        case "property":
-          if (reflectedProperty.skipIfEqual && this.#target[reflectedProperty.destination] === value) {
-            return;
-          }
-          this.#target[reflectedProperty.destination] = value;
-          break;
-      }
-    }
-  };
-}
-
-exports.Reflector = Reflector;

package/shared/Reflector.js

@@ -1,69 +0,0 @@
-import { O as Observable, D as DOM } from './vivid-element.js';
-
-class Reflector {
-  #reflectedProperties = /* @__PURE__ */ new Map();
-  #source;
-  #target;
-  constructor(source, target) {
-    this.#source = source;
-    this.#target = target;
-  }
-  attribute(propertyName, attributeName) {
-    this.#addReflectedProperty(propertyName, {
-      type: "attribute",
-      destination: attributeName
-    });
-  }
-  booleanAttribute(propertyName, attributeName) {
-    this.#addReflectedProperty(propertyName, {
-      type: "boolean-attribute",
-      destination: attributeName
-    });
-  }
-  property(propertyName, targetProperty, skipIfEqual = false) {
-    this.#addReflectedProperty(propertyName, {
-      type: "property",
-      destination: targetProperty,
-      skipIfEqual
-    });
-  }
-  destroy() {
-    const notifier = Observable.getNotifier(this.#source);
-    for (const prop of this.#reflectedProperties.keys()) {
-      notifier.unsubscribe(this.#propertyChangeHandler, prop);
-    }
-    this.#reflectedProperties.clear();
-  }
-  #addReflectedProperty(name, reflected) {
-    this.#reflectedProperties.set(name, reflected);
-    const notifier = Observable.getNotifier(this.#source);
-    notifier.subscribe(this.#propertyChangeHandler, name);
-    this.#propertyChangeHandler.handleChange(this.#source, name);
-  }
-  #propertyChangeHandler = {
-    handleChange: (source, propertyName) => {
-      const reflectedProperty = this.#reflectedProperties.get(propertyName);
-      const value = source[propertyName];
-      switch (reflectedProperty.type) {
-        case "boolean-attribute":
-          DOM.setBooleanAttribute(
-            this.#target,
-            reflectedProperty.destination,
-            Boolean(value)
-          );
-          break;
-        case "attribute":
-          DOM.setAttribute(this.#target, reflectedProperty.destination, value);
-          break;
-        case "property":
-          if (reflectedProperty.skipIfEqual && this.#target[reflectedProperty.destination] === value) {
-            return;
-          }
-          this.#target[reflectedProperty.destination] = value;
-          break;
-      }
-    }
-  };
-}
-
-export { Reflector as R };