@vonage/vivid 4.21.1 → 4.23.0

package/shared/vivid-element.cjs

@@ -2591,9 +2591,99 @@ 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.21.1";
+    this.VIVID_VERSION = "4.23.0";
   }
 }
 
@@ -2605,6 +2695,8 @@ exports.HTMLView = HTMLView;
 exports.Observable = Observable;
 exports.SubscriberSet = SubscriberSet;
 exports.VividElement = VividElement;
+exports.ariaAttributeName = ariaAttributeName;
+exports.ariaMixinProperties = ariaMixinProperties;
 exports.attr = attr;
 exports.booleanConverter = booleanConverter;
 exports.createRegisterFunction = createRegisterFunction;
@@ -2614,4 +2706,6 @@ exports.emptyArray = emptyArray;
 exports.html = html;
 exports.nullableNumberConverter = nullableNumberConverter;
 exports.observable = observable;
+exports.subscribeToAriaPropertyChanges = subscribeToAriaPropertyChanges;
+exports.unsubscribeFromAriaPropertyChanges = unsubscribeFromAriaPropertyChanges;
 exports.volatile = volatile;

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.21.1";
+    this.VIVID_VERSION = "4.23.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 Thu, 10 Apr 2025 14:24:10 GMT
+ * Generated on Wed, 30 Apr 2025 09:20:16 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);

package/styles/core/theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 10 Apr 2025 14:24:10 GMT
+ * Generated on Wed, 30 Apr 2025 09:20:16 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);

package/styles/core/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 10 Apr 2025 14:24:10 GMT
+ * Generated on Wed, 30 Apr 2025 09:20:16 GMT
  */
 .vvd-root:root {
   --vvd-size-font-scale-base: 1rem;

package/styles/tokens/theme-dark.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Thu, 10 Apr 2025 14:24:10 GMT
+ * Generated on Wed, 30 Apr 2025 09:20:16 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 10 Apr 2025 14:24:10 GMT
+ * Generated on Wed, 30 Apr 2025 09:20:16 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 10 Apr 2025 14:24:10 GMT
+ * Generated on Wed, 30 Apr 2025 09:20:16 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 10 Apr 2025 14:24:10 GMT
+ * Generated on Wed, 30 Apr 2025 09:20:16 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/theme-light.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Thu, 10 Apr 2025 14:24:10 GMT
+ * Generated on Wed, 30 Apr 2025 09:20:16 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 10 Apr 2025 14:24:10 GMT
+ * Generated on Wed, 30 Apr 2025 09:20:16 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 10 Apr 2025 14:24:10 GMT
+ * Generated on Wed, 30 Apr 2025 09:20:16 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 10 Apr 2025 14:24:10 GMT
+ * Generated on Wed, 30 Apr 2025 09:20:16 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 10 Apr 2025 14:24:10 GMT
+ * Generated on Wed, 30 Apr 2025 09:20:16 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';