@vonage/vivid 4.31.0 → 5.0.0

package/shared/picker-field/picker-field.d.ts

@@ -11,7 +11,6 @@ declare const PickerField_base: {
         _slottedHelperTextFeedbackType(): "none" | "helper";
         _getFeedbackTemplate(ctx: import("../design-system/defineVividComponent").VividElementDefinitionContext): import("@microsoft/fast-element").ViewTemplate<any, any>;
         connectedCallback(): void;
-        specialHandling: boolean;
         _vividAriaBehaviour: import("../aria/aria-mixin").VividAriaBehaviour;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
@@ -337,6 +336,48 @@ declare const PickerField_base: {
         ariaDescription: string | null;
         ariaRowIndexText: string | null;
         ariaRelevant: string | null;
+        roleChanged(prev: string | null, next: string | null): void;
+        ariaAtomicChanged(prev: string | null, next: string | null): void;
+        ariaAutoCompleteChanged(prev: string | null, next: string | null): void;
+        ariaBusyChanged(prev: string | null, next: string | null): void;
+        ariaCheckedChanged(prev: string | null, next: string | null): void;
+        ariaColCountChanged(prev: string | null, next: string | null): void;
+        ariaColIndexChanged(prev: string | null, next: string | null): void;
+        ariaColIndexTextChanged(prev: string | null, next: string | null): void;
+        ariaColSpanChanged(prev: string | null, next: string | null): void;
+        ariaCurrentChanged(prev: string | null, next: string | null): void;
+        ariaDescriptionChanged(prev: string | null, next: string | null): void;
+        ariaDisabledChanged(prev: string | null, next: string | null): void;
+        ariaExpandedChanged(prev: string | null, next: string | null): void;
+        ariaHasPopupChanged(prev: string | null, next: string | null): void;
+        ariaHiddenChanged(prev: string | null, next: string | null): void;
+        ariaInvalidChanged(prev: string | null, next: string | null): void;
+        ariaKeyShortcutsChanged(prev: string | null, next: string | null): void;
+        ariaLabelChanged(prev: string | null, next: string | null): void;
+        ariaLevelChanged(prev: string | null, next: string | null): void;
+        ariaLiveChanged(prev: string | null, next: string | null): void;
+        ariaModalChanged(prev: string | null, next: string | null): void;
+        ariaMultiLineChanged(prev: string | null, next: string | null): void;
+        ariaMultiSelectableChanged(prev: string | null, next: string | null): void;
+        ariaOrientationChanged(prev: string | null, next: string | null): void;
+        ariaPlaceholderChanged(prev: string | null, next: string | null): void;
+        ariaPosInSetChanged(prev: string | null, next: string | null): void;
+        ariaPressedChanged(prev: string | null, next: string | null): void;
+        ariaReadOnlyChanged(prev: string | null, next: string | null): void;
+        ariaRequiredChanged(prev: string | null, next: string | null): void;
+        ariaRoleDescriptionChanged(prev: string | null, next: string | null): void;
+        ariaRowCountChanged(prev: string | null, next: string | null): void;
+        ariaRowIndexChanged(prev: string | null, next: string | null): void;
+        ariaRowIndexTextChanged(prev: string | null, next: string | null): void;
+        ariaRowSpanChanged(prev: string | null, next: string | null): void;
+        ariaSelectedChanged(prev: string | null, next: string | null): void;
+        ariaSetSizeChanged(prev: string | null, next: string | null): void;
+        ariaSortChanged(prev: string | null, next: string | null): void;
+        ariaValueMaxChanged(prev: string | null, next: string | null): void;
+        ariaValueMinChanged(prev: string | null, next: string | null): void;
+        ariaValueNowChanged(prev: string | null, next: string | null): void;
+        ariaValueTextChanged(prev: string | null, next: string | null): void;
+        ariaRelevantChanged(prev: string | null, next: string | null): void;
         "__#1@#handleReplacedProp"(replacedProp: {
             newPropertyName: string;
             deprecatedPropertyName: string;
@@ -392,7 +433,6 @@ declare const PickerField_base: {
         setFormValue(value: string | File | FormData | null, state?: string | File | FormData | null | undefined): void;
         _keypressHandler(e: KeyboardEvent): void;
         stopPropagation(e: Event): void;
-        specialHandling: boolean;
         _vividAriaBehaviour: import("../aria/aria-mixin").VividAriaBehaviour;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
@@ -717,6 +757,48 @@ declare const PickerField_base: {
         ariaDescription: string | null;
         ariaRowIndexText: string | null;
         ariaRelevant: string | null;
+        roleChanged(prev: string | null, next: string | null): void;
+        ariaAtomicChanged(prev: string | null, next: string | null): void;
+        ariaAutoCompleteChanged(prev: string | null, next: string | null): void;
+        ariaBusyChanged(prev: string | null, next: string | null): void;
+        ariaCheckedChanged(prev: string | null, next: string | null): void;
+        ariaColCountChanged(prev: string | null, next: string | null): void;
+        ariaColIndexChanged(prev: string | null, next: string | null): void;
+        ariaColIndexTextChanged(prev: string | null, next: string | null): void;
+        ariaColSpanChanged(prev: string | null, next: string | null): void;
+        ariaCurrentChanged(prev: string | null, next: string | null): void;
+        ariaDescriptionChanged(prev: string | null, next: string | null): void;
+        ariaDisabledChanged(prev: string | null, next: string | null): void;
+        ariaExpandedChanged(prev: string | null, next: string | null): void;
+        ariaHasPopupChanged(prev: string | null, next: string | null): void;
+        ariaHiddenChanged(prev: string | null, next: string | null): void;
+        ariaInvalidChanged(prev: string | null, next: string | null): void;
+        ariaKeyShortcutsChanged(prev: string | null, next: string | null): void;
+        ariaLabelChanged(prev: string | null, next: string | null): void;
+        ariaLevelChanged(prev: string | null, next: string | null): void;
+        ariaLiveChanged(prev: string | null, next: string | null): void;
+        ariaModalChanged(prev: string | null, next: string | null): void;
+        ariaMultiLineChanged(prev: string | null, next: string | null): void;
+        ariaMultiSelectableChanged(prev: string | null, next: string | null): void;
+        ariaOrientationChanged(prev: string | null, next: string | null): void;
+        ariaPlaceholderChanged(prev: string | null, next: string | null): void;
+        ariaPosInSetChanged(prev: string | null, next: string | null): void;
+        ariaPressedChanged(prev: string | null, next: string | null): void;
+        ariaReadOnlyChanged(prev: string | null, next: string | null): void;
+        ariaRequiredChanged(prev: string | null, next: string | null): void;
+        ariaRoleDescriptionChanged(prev: string | null, next: string | null): void;
+        ariaRowCountChanged(prev: string | null, next: string | null): void;
+        ariaRowIndexChanged(prev: string | null, next: string | null): void;
+        ariaRowIndexTextChanged(prev: string | null, next: string | null): void;
+        ariaRowSpanChanged(prev: string | null, next: string | null): void;
+        ariaSelectedChanged(prev: string | null, next: string | null): void;
+        ariaSetSizeChanged(prev: string | null, next: string | null): void;
+        ariaSortChanged(prev: string | null, next: string | null): void;
+        ariaValueMaxChanged(prev: string | null, next: string | null): void;
+        ariaValueMinChanged(prev: string | null, next: string | null): void;
+        ariaValueNowChanged(prev: string | null, next: string | null): void;
+        ariaValueTextChanged(prev: string | null, next: string | null): void;
+        ariaRelevantChanged(prev: string | null, next: string | null): void;
         "__#1@#handleReplacedProp"(replacedProp: {
             newPropertyName: string;
             deprecatedPropertyName: string;
@@ -766,7 +848,6 @@ declare const PickerField_base: {
         setFormValue(value: string | File | FormData | null, state?: string | File | FormData | null | undefined): void;
         _keypressHandler(e: KeyboardEvent): void;
         stopPropagation(e: Event): void;
-        specialHandling: boolean;
         _vividAriaBehaviour: import("../aria/aria-mixin").VividAriaBehaviour;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
@@ -1091,6 +1172,48 @@ declare const PickerField_base: {
         ariaDescription: string | null;
         ariaRowIndexText: string | null;
         ariaRelevant: string | null;
+        roleChanged(prev: string | null, next: string | null): void;
+        ariaAtomicChanged(prev: string | null, next: string | null): void;
+        ariaAutoCompleteChanged(prev: string | null, next: string | null): void;
+        ariaBusyChanged(prev: string | null, next: string | null): void;
+        ariaCheckedChanged(prev: string | null, next: string | null): void;
+        ariaColCountChanged(prev: string | null, next: string | null): void;
+        ariaColIndexChanged(prev: string | null, next: string | null): void;
+        ariaColIndexTextChanged(prev: string | null, next: string | null): void;
+        ariaColSpanChanged(prev: string | null, next: string | null): void;
+        ariaCurrentChanged(prev: string | null, next: string | null): void;
+        ariaDescriptionChanged(prev: string | null, next: string | null): void;
+        ariaDisabledChanged(prev: string | null, next: string | null): void;
+        ariaExpandedChanged(prev: string | null, next: string | null): void;
+        ariaHasPopupChanged(prev: string | null, next: string | null): void;
+        ariaHiddenChanged(prev: string | null, next: string | null): void;
+        ariaInvalidChanged(prev: string | null, next: string | null): void;
+        ariaKeyShortcutsChanged(prev: string | null, next: string | null): void;
+        ariaLabelChanged(prev: string | null, next: string | null): void;
+        ariaLevelChanged(prev: string | null, next: string | null): void;
+        ariaLiveChanged(prev: string | null, next: string | null): void;
+        ariaModalChanged(prev: string | null, next: string | null): void;
+        ariaMultiLineChanged(prev: string | null, next: string | null): void;
+        ariaMultiSelectableChanged(prev: string | null, next: string | null): void;
+        ariaOrientationChanged(prev: string | null, next: string | null): void;
+        ariaPlaceholderChanged(prev: string | null, next: string | null): void;
+        ariaPosInSetChanged(prev: string | null, next: string | null): void;
+        ariaPressedChanged(prev: string | null, next: string | null): void;
+        ariaReadOnlyChanged(prev: string | null, next: string | null): void;
+        ariaRequiredChanged(prev: string | null, next: string | null): void;
+        ariaRoleDescriptionChanged(prev: string | null, next: string | null): void;
+        ariaRowCountChanged(prev: string | null, next: string | null): void;
+        ariaRowIndexChanged(prev: string | null, next: string | null): void;
+        ariaRowIndexTextChanged(prev: string | null, next: string | null): void;
+        ariaRowSpanChanged(prev: string | null, next: string | null): void;
+        ariaSelectedChanged(prev: string | null, next: string | null): void;
+        ariaSetSizeChanged(prev: string | null, next: string | null): void;
+        ariaSortChanged(prev: string | null, next: string | null): void;
+        ariaValueMaxChanged(prev: string | null, next: string | null): void;
+        ariaValueMinChanged(prev: string | null, next: string | null): void;
+        ariaValueNowChanged(prev: string | null, next: string | null): void;
+        ariaValueTextChanged(prev: string | null, next: string | null): void;
+        ariaRelevantChanged(prev: string | null, next: string | null): void;
         "__#1@#handleReplacedProp"(replacedProp: {
             newPropertyName: string;
             deprecatedPropertyName: string;
@@ -1102,7 +1225,6 @@ declare const PickerField_base: {
     new (...args: any[]): {
         _trappedFocus(event: KeyboardEvent, getFocusableEls: () => NodeListOf<HTMLElement>): boolean;
         connectedCallback(): void;
-        specialHandling: boolean;
         _vividAriaBehaviour: import("../aria/aria-mixin").VividAriaBehaviour;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
@@ -1428,6 +1550,48 @@ declare const PickerField_base: {
         ariaDescription: string | null;
         ariaRowIndexText: string | null;
         ariaRelevant: string | null;
+        roleChanged(prev: string | null, next: string | null): void;
+        ariaAtomicChanged(prev: string | null, next: string | null): void;
+        ariaAutoCompleteChanged(prev: string | null, next: string | null): void;
+        ariaBusyChanged(prev: string | null, next: string | null): void;
+        ariaCheckedChanged(prev: string | null, next: string | null): void;
+        ariaColCountChanged(prev: string | null, next: string | null): void;
+        ariaColIndexChanged(prev: string | null, next: string | null): void;
+        ariaColIndexTextChanged(prev: string | null, next: string | null): void;
+        ariaColSpanChanged(prev: string | null, next: string | null): void;
+        ariaCurrentChanged(prev: string | null, next: string | null): void;
+        ariaDescriptionChanged(prev: string | null, next: string | null): void;
+        ariaDisabledChanged(prev: string | null, next: string | null): void;
+        ariaExpandedChanged(prev: string | null, next: string | null): void;
+        ariaHasPopupChanged(prev: string | null, next: string | null): void;
+        ariaHiddenChanged(prev: string | null, next: string | null): void;
+        ariaInvalidChanged(prev: string | null, next: string | null): void;
+        ariaKeyShortcutsChanged(prev: string | null, next: string | null): void;
+        ariaLabelChanged(prev: string | null, next: string | null): void;
+        ariaLevelChanged(prev: string | null, next: string | null): void;
+        ariaLiveChanged(prev: string | null, next: string | null): void;
+        ariaModalChanged(prev: string | null, next: string | null): void;
+        ariaMultiLineChanged(prev: string | null, next: string | null): void;
+        ariaMultiSelectableChanged(prev: string | null, next: string | null): void;
+        ariaOrientationChanged(prev: string | null, next: string | null): void;
+        ariaPlaceholderChanged(prev: string | null, next: string | null): void;
+        ariaPosInSetChanged(prev: string | null, next: string | null): void;
+        ariaPressedChanged(prev: string | null, next: string | null): void;
+        ariaReadOnlyChanged(prev: string | null, next: string | null): void;
+        ariaRequiredChanged(prev: string | null, next: string | null): void;
+        ariaRoleDescriptionChanged(prev: string | null, next: string | null): void;
+        ariaRowCountChanged(prev: string | null, next: string | null): void;
+        ariaRowIndexChanged(prev: string | null, next: string | null): void;
+        ariaRowIndexTextChanged(prev: string | null, next: string | null): void;
+        ariaRowSpanChanged(prev: string | null, next: string | null): void;
+        ariaSelectedChanged(prev: string | null, next: string | null): void;
+        ariaSetSizeChanged(prev: string | null, next: string | null): void;
+        ariaSortChanged(prev: string | null, next: string | null): void;
+        ariaValueMaxChanged(prev: string | null, next: string | null): void;
+        ariaValueMinChanged(prev: string | null, next: string | null): void;
+        ariaValueNowChanged(prev: string | null, next: string | null): void;
+        ariaValueTextChanged(prev: string | null, next: string | null): void;
+        ariaRelevantChanged(prev: string | null, next: string | null): void;
         "__#1@#handleReplacedProp"(replacedProp: {
             newPropertyName: string;
             deprecatedPropertyName: string;
@@ -1439,7 +1603,6 @@ declare const PickerField_base: {
     new (...args: any[]): {
         readonly locale: import("../localization/Locale").Locale;
         connectedCallback(): void;
-        specialHandling: boolean;
         _vividAriaBehaviour: import("../aria/aria-mixin").VividAriaBehaviour;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
@@ -1765,6 +1928,48 @@ declare const PickerField_base: {
         ariaDescription: string | null;
         ariaRowIndexText: string | null;
         ariaRelevant: string | null;
+        roleChanged(prev: string | null, next: string | null): void;
+        ariaAtomicChanged(prev: string | null, next: string | null): void;
+        ariaAutoCompleteChanged(prev: string | null, next: string | null): void;
+        ariaBusyChanged(prev: string | null, next: string | null): void;
+        ariaCheckedChanged(prev: string | null, next: string | null): void;
+        ariaColCountChanged(prev: string | null, next: string | null): void;
+        ariaColIndexChanged(prev: string | null, next: string | null): void;
+        ariaColIndexTextChanged(prev: string | null, next: string | null): void;
+        ariaColSpanChanged(prev: string | null, next: string | null): void;
+        ariaCurrentChanged(prev: string | null, next: string | null): void;
+        ariaDescriptionChanged(prev: string | null, next: string | null): void;
+        ariaDisabledChanged(prev: string | null, next: string | null): void;
+        ariaExpandedChanged(prev: string | null, next: string | null): void;
+        ariaHasPopupChanged(prev: string | null, next: string | null): void;
+        ariaHiddenChanged(prev: string | null, next: string | null): void;
+        ariaInvalidChanged(prev: string | null, next: string | null): void;
+        ariaKeyShortcutsChanged(prev: string | null, next: string | null): void;
+        ariaLabelChanged(prev: string | null, next: string | null): void;
+        ariaLevelChanged(prev: string | null, next: string | null): void;
+        ariaLiveChanged(prev: string | null, next: string | null): void;
+        ariaModalChanged(prev: string | null, next: string | null): void;
+        ariaMultiLineChanged(prev: string | null, next: string | null): void;
+        ariaMultiSelectableChanged(prev: string | null, next: string | null): void;
+        ariaOrientationChanged(prev: string | null, next: string | null): void;
+        ariaPlaceholderChanged(prev: string | null, next: string | null): void;
+        ariaPosInSetChanged(prev: string | null, next: string | null): void;
+        ariaPressedChanged(prev: string | null, next: string | null): void;
+        ariaReadOnlyChanged(prev: string | null, next: string | null): void;
+        ariaRequiredChanged(prev: string | null, next: string | null): void;
+        ariaRoleDescriptionChanged(prev: string | null, next: string | null): void;
+        ariaRowCountChanged(prev: string | null, next: string | null): void;
+        ariaRowIndexChanged(prev: string | null, next: string | null): void;
+        ariaRowIndexTextChanged(prev: string | null, next: string | null): void;
+        ariaRowSpanChanged(prev: string | null, next: string | null): void;
+        ariaSelectedChanged(prev: string | null, next: string | null): void;
+        ariaSetSizeChanged(prev: string | null, next: string | null): void;
+        ariaSortChanged(prev: string | null, next: string | null): void;
+        ariaValueMaxChanged(prev: string | null, next: string | null): void;
+        ariaValueMinChanged(prev: string | null, next: string | null): void;
+        ariaValueNowChanged(prev: string | null, next: string | null): void;
+        ariaValueTextChanged(prev: string | null, next: string | null): void;
+        ariaRelevantChanged(prev: string | null, next: string | null): void;
         "__#1@#handleReplacedProp"(replacedProp: {
             newPropertyName: string;
             deprecatedPropertyName: string;
@@ -1809,7 +2014,6 @@ declare const PickerField_base: {
         setFormValue(value: string | File | FormData | null, state?: string | File | FormData | null | undefined): void;
         _keypressHandler(e: KeyboardEvent): void;
         stopPropagation(e: Event): void;
-        specialHandling: boolean;
         _vividAriaBehaviour: import("../aria/aria-mixin").VividAriaBehaviour;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
@@ -2134,6 +2338,48 @@ declare const PickerField_base: {
         ariaDescription: string | null;
         ariaRowIndexText: string | null;
         ariaRelevant: string | null;
+        roleChanged(prev: string | null, next: string | null): void;
+        ariaAtomicChanged(prev: string | null, next: string | null): void;
+        ariaAutoCompleteChanged(prev: string | null, next: string | null): void;
+        ariaBusyChanged(prev: string | null, next: string | null): void;
+        ariaCheckedChanged(prev: string | null, next: string | null): void;
+        ariaColCountChanged(prev: string | null, next: string | null): void;
+        ariaColIndexChanged(prev: string | null, next: string | null): void;
+        ariaColIndexTextChanged(prev: string | null, next: string | null): void;
+        ariaColSpanChanged(prev: string | null, next: string | null): void;
+        ariaCurrentChanged(prev: string | null, next: string | null): void;
+        ariaDescriptionChanged(prev: string | null, next: string | null): void;
+        ariaDisabledChanged(prev: string | null, next: string | null): void;
+        ariaExpandedChanged(prev: string | null, next: string | null): void;
+        ariaHasPopupChanged(prev: string | null, next: string | null): void;
+        ariaHiddenChanged(prev: string | null, next: string | null): void;
+        ariaInvalidChanged(prev: string | null, next: string | null): void;
+        ariaKeyShortcutsChanged(prev: string | null, next: string | null): void;
+        ariaLabelChanged(prev: string | null, next: string | null): void;
+        ariaLevelChanged(prev: string | null, next: string | null): void;
+        ariaLiveChanged(prev: string | null, next: string | null): void;
+        ariaModalChanged(prev: string | null, next: string | null): void;
+        ariaMultiLineChanged(prev: string | null, next: string | null): void;
+        ariaMultiSelectableChanged(prev: string | null, next: string | null): void;
+        ariaOrientationChanged(prev: string | null, next: string | null): void;
+        ariaPlaceholderChanged(prev: string | null, next: string | null): void;
+        ariaPosInSetChanged(prev: string | null, next: string | null): void;
+        ariaPressedChanged(prev: string | null, next: string | null): void;
+        ariaReadOnlyChanged(prev: string | null, next: string | null): void;
+        ariaRequiredChanged(prev: string | null, next: string | null): void;
+        ariaRoleDescriptionChanged(prev: string | null, next: string | null): void;
+        ariaRowCountChanged(prev: string | null, next: string | null): void;
+        ariaRowIndexChanged(prev: string | null, next: string | null): void;
+        ariaRowIndexTextChanged(prev: string | null, next: string | null): void;
+        ariaRowSpanChanged(prev: string | null, next: string | null): void;
+        ariaSelectedChanged(prev: string | null, next: string | null): void;
+        ariaSetSizeChanged(prev: string | null, next: string | null): void;
+        ariaSortChanged(prev: string | null, next: string | null): void;
+        ariaValueMaxChanged(prev: string | null, next: string | null): void;
+        ariaValueMinChanged(prev: string | null, next: string | null): void;
+        ariaValueNowChanged(prev: string | null, next: string | null): void;
+        ariaValueTextChanged(prev: string | null, next: string | null): void;
+        ariaRelevantChanged(prev: string | null, next: string | null): void;
         "__#1@#handleReplacedProp"(replacedProp: {
             newPropertyName: string;
             deprecatedPropertyName: string;

package/shared/vivid-element.cjs

@@ -2611,6 +2611,53 @@ const publishAriaPropertyChange = (source, changedAriaProperty) => {
   getSubscribers(source).forEach((s) => s(source, changedAriaProperty));
 };
 
+const shouldRemoveAriaAttributes = (behavior) => behavior === "delegate";
+const dataPropertyName = (ariaPropertyName) => `vvd${ariaPropertyName.charAt(0).toUpperCase()}${ariaPropertyName.slice(1)}`;
+const reflectAriaProperty = (element, ariaProperty) => {
+  if (shouldRemoveAriaAttributes(element._vividAriaBehaviour)) {
+    const value = element[ariaProperty];
+    element[`_${ariaProperty}`] = null;
+    element.removeAttribute(ariaAttributeName(ariaProperty));
+    element[`_${ariaProperty}`] = value;
+    if (element[ariaProperty] !== null) {
+      element.dataset[dataPropertyName(ariaProperty)] = element[ariaProperty];
+    } else {
+      delete element.dataset[dataPropertyName(ariaProperty)];
+    }
+  } else {
+    DOM.setAttribute(
+      element,
+      ariaAttributeName(ariaProperty),
+      element[ariaProperty]
+    );
+  }
+};
+const changedAriaProperties = /* @__PURE__ */ new WeakMap();
+const recordAriaPropertyChange = (element, ariaProperty) => {
+  const changedProperties = changedAriaProperties.get(element);
+  if (!changedProperties) {
+    changedAriaProperties.set(element, /* @__PURE__ */ new Set([ariaProperty]));
+  } else {
+    changedProperties.add(ariaProperty);
+  }
+};
+const handleAriaPropertyChange = (element, ariaProperty) => {
+  if (element.isConnected) {
+    reflectAriaProperty(element, ariaProperty);
+  } else {
+    recordAriaPropertyChange(element, ariaProperty);
+  }
+};
+const handleElementConnectedCallback = (element) => {
+  const changedProperties = changedAriaProperties.get(element);
+  if (changedProperties) {
+    for (const ariaProperty of changedProperties) {
+      reflectAriaProperty(element, ariaProperty);
+    }
+    changedAriaProperties.delete(element);
+  }
+};
+
 const ariaMixinProperties = [
   "role",
   "ariaAtomic",
@@ -2660,20 +2707,24 @@ const ariaAttributeName = (ariaPropertyName) => ariaPropertyName.replace("aria",
 const AriaMixin = (Base) => {
   class AriaMixinElement extends Base {
     constructor(...args) {
-      super(args);
-      this.specialHandling = false;
+      super(...args);
       this._vividAriaBehaviour = "default";
       for (const ariaProperty of ariaMixinProperties) {
-        this[ariaProperty] = null;
+        this[`_${ariaProperty}`] = null;
       }
     }
+    connectedCallback() {
+      super.connectedCallback();
+      handleElementConnectedCallback(this);
+    }
   }
   for (const ariaProperty of ariaMixinProperties) {
     attr({
       attribute: ariaAttributeName(ariaProperty),
-      mode: "reflect"
+      mode: "fromView"
     })(AriaMixinElement.prototype, ariaProperty);
     AriaMixinElement.prototype[`${ariaProperty}Changed`] = function() {
+      handleAriaPropertyChange(this, ariaProperty);
       if (this._vividAriaBehaviour !== "default") {
         publishAriaPropertyChange(this, ariaProperty);
       }
@@ -2734,7 +2785,7 @@ const ReplacedPropHandling = (Base) => {
 
 class VividElement extends AriaMixin(ReplacedPropHandling(FASTElement)) {
   static {
-    this.VIVID_VERSION = "4.31.0";
+    this.VIVID_VERSION = "5.0.0";
   }
   /**
    * Add data-vvd-component attribute with component name globally,

package/shared/vivid-element.js

@@ -2609,6 +2609,53 @@ const publishAriaPropertyChange = (source, changedAriaProperty) => {
   getSubscribers(source).forEach((s) => s(source, changedAriaProperty));
 };
 
+const shouldRemoveAriaAttributes = (behavior) => behavior === "delegate";
+const dataPropertyName = (ariaPropertyName) => `vvd${ariaPropertyName.charAt(0).toUpperCase()}${ariaPropertyName.slice(1)}`;
+const reflectAriaProperty = (element, ariaProperty) => {
+  if (shouldRemoveAriaAttributes(element._vividAriaBehaviour)) {
+    const value = element[ariaProperty];
+    element[`_${ariaProperty}`] = null;
+    element.removeAttribute(ariaAttributeName(ariaProperty));
+    element[`_${ariaProperty}`] = value;
+    if (element[ariaProperty] !== null) {
+      element.dataset[dataPropertyName(ariaProperty)] = element[ariaProperty];
+    } else {
+      delete element.dataset[dataPropertyName(ariaProperty)];
+    }
+  } else {
+    DOM.setAttribute(
+      element,
+      ariaAttributeName(ariaProperty),
+      element[ariaProperty]
+    );
+  }
+};
+const changedAriaProperties = /* @__PURE__ */ new WeakMap();
+const recordAriaPropertyChange = (element, ariaProperty) => {
+  const changedProperties = changedAriaProperties.get(element);
+  if (!changedProperties) {
+    changedAriaProperties.set(element, /* @__PURE__ */ new Set([ariaProperty]));
+  } else {
+    changedProperties.add(ariaProperty);
+  }
+};
+const handleAriaPropertyChange = (element, ariaProperty) => {
+  if (element.isConnected) {
+    reflectAriaProperty(element, ariaProperty);
+  } else {
+    recordAriaPropertyChange(element, ariaProperty);
+  }
+};
+const handleElementConnectedCallback = (element) => {
+  const changedProperties = changedAriaProperties.get(element);
+  if (changedProperties) {
+    for (const ariaProperty of changedProperties) {
+      reflectAriaProperty(element, ariaProperty);
+    }
+    changedAriaProperties.delete(element);
+  }
+};
+
 const ariaMixinProperties = [
   "role",
   "ariaAtomic",
@@ -2658,20 +2705,24 @@ const ariaAttributeName = (ariaPropertyName) => ariaPropertyName.replace("aria",
 const AriaMixin = (Base) => {
   class AriaMixinElement extends Base {
     constructor(...args) {
-      super(args);
-      this.specialHandling = false;
+      super(...args);
       this._vividAriaBehaviour = "default";
       for (const ariaProperty of ariaMixinProperties) {
-        this[ariaProperty] = null;
+        this[`_${ariaProperty}`] = null;
       }
     }
+    connectedCallback() {
+      super.connectedCallback();
+      handleElementConnectedCallback(this);
+    }
   }
   for (const ariaProperty of ariaMixinProperties) {
     attr({
       attribute: ariaAttributeName(ariaProperty),
-      mode: "reflect"
+      mode: "fromView"
     })(AriaMixinElement.prototype, ariaProperty);
     AriaMixinElement.prototype[`${ariaProperty}Changed`] = function() {
+      handleAriaPropertyChange(this, ariaProperty);
       if (this._vividAriaBehaviour !== "default") {
         publishAriaPropertyChange(this, ariaProperty);
       }
@@ -2732,7 +2783,7 @@ const ReplacedPropHandling = (Base) => {
 
 class VividElement extends AriaMixin(ReplacedPropHandling(FASTElement)) {
   static {
-    this.VIVID_VERSION = "4.31.0";
+    this.VIVID_VERSION = "5.0.0";
   }
   /**
    * Add data-vvd-component attribute with component name globally,

package/vivid.api.json

@@ -12188,37 +12188,6 @@
               "overloadIndex": 1,
               "parameters": []
             },
-            {
-              "kind": "Method",
-              "canonicalReference": "@vonage/vivid!VwcCheckboxElement#ariaCheckedChanged:member(1)",
-              "docComment": "",
-              "excerptTokens": [
-                {
-                  "kind": "Content",
-                  "text": "ariaCheckedChanged(): "
-                },
-                {
-                  "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": "ariaCheckedChanged"
-            },
             {
               "kind": "Property",
               "canonicalReference": "@vonage/vivid!VwcCheckboxElement#connotation:member",
@@ -13843,8 +13812,8 @@
             },
             {
               "kind": "Reference",
-              "text": "VividElement",
-              "canonicalReference": "@vonage/vivid!~VividElement:class"
+              "text": "DataGridRow_base",
+              "canonicalReference": "@vonage/vivid!~DataGridRow_base"
             },
             {
               "kind": "Content",
@@ -21450,36 +21419,6 @@
               "overloadIndex": 1,
               "parameters": []
             },
-            {
-              "kind": "Property",
-              "canonicalReference": "@vonage/vivid!VwcRadioElement#ariaLabel:member",
-              "docComment": "",
-              "excerptTokens": [
-                {
-                  "kind": "Content",
-                  "text": "ariaLabel: "
-                },
-                {
-                  "kind": "Content",
-                  "text": "string | null"
-                },
-                {
-                  "kind": "Content",
-                  "text": ";"
-                }
-              ],
-              "isReadonly": false,
-              "isOptional": false,
-              "releaseTag": "Public",
-              "name": "ariaLabel",
-              "propertyTypeTokenRange": {
-                "startIndex": 1,
-                "endIndex": 2
-              },
-              "isStatic": false,
-              "isProtected": false,
-              "isAbstract": false
-            },
             {
               "kind": "Property",
               "canonicalReference": "@vonage/vivid!VwcRadioElement#connotation:member",
@@ -23938,36 +23877,6 @@
               "isProtected": false,
               "isAbstract": false
             },
-            {
-              "kind": "Property",
-              "canonicalReference": "@vonage/vivid!VwcSelectableBoxElement#clickable:member",
-              "docComment": "",
-              "excerptTokens": [
-                {
-                  "kind": "Content",
-                  "text": "clickable: "
-                },
-                {
-                  "kind": "Content",
-                  "text": "boolean"
-                },
-                {
-                  "kind": "Content",
-                  "text": ";"
-                }
-              ],
-              "isReadonly": false,
-              "isOptional": false,
-              "releaseTag": "Public",
-              "name": "clickable",
-              "propertyTypeTokenRange": {
-                "startIndex": 1,
-                "endIndex": 2
-              },
-              "isStatic": false,
-              "isProtected": false,
-              "isAbstract": false
-            },
             {
               "kind": "Property",
               "canonicalReference": "@vonage/vivid!VwcSelectableBoxElement#clickableBox:member",