@vonage/vivid 4.31.0 → 5.0.0

package/locales/de-DE.js

@@ -310,7 +310,8 @@ const deDE = {
     maxFilesExceededError: "Sie können keine weiteren Dateien auswählen.",
     fileTooBigError: "Die Datei ist zu groß ({{filesize}}MiB). Maximale Dateigröße: {{maxFilesize}}MiB.",
     removeFileLabel: "Datei entfernen",
-    invalidFilesError: "Eine oder mehrere ausgewählte Dateien sind ungültig. Bitte laden Sie nur gültige Dateitypen innerhalb der Größenbeschränkung hoch."
+    invalidFilesError: "Eine oder mehrere ausgewählte Dateien sind ungültig. Bitte laden Sie nur gültige Dateitypen innerhalb der Größenbeschränkung hoch.",
+    uploadFilesLabel: "Dateien hochladen"
   },
   audioPlayer: {
     playButtonLabel: "Abspielen",

package/locales/en-GB.cjs

@@ -144,7 +144,8 @@ const enGB = {
     maxFilesExceededError: "You can't select any more files.",
     fileTooBigError: "File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.",
     removeFileLabel: "Remove file",
-    invalidFilesError: "One or more selected files are invalid. Please upload only valid file types under the size limit."
+    invalidFilesError: "One or more selected files are invalid. Please upload only valid file types under the size limit.",
+    uploadFilesLabel: "Upload files"
   },
   audioPlayer: {
     playButtonLabel: "Play",

package/locales/en-GB.js

@@ -142,7 +142,8 @@ const enGB = {
     maxFilesExceededError: "You can't select any more files.",
     fileTooBigError: "File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.",
     removeFileLabel: "Remove file",
-    invalidFilesError: "One or more selected files are invalid. Please upload only valid file types under the size limit."
+    invalidFilesError: "One or more selected files are invalid. Please upload only valid file types under the size limit.",
+    uploadFilesLabel: "Upload files"
   },
   audioPlayer: {
     playButtonLabel: "Play",

package/locales/en-US.cjs

@@ -312,7 +312,8 @@ const enUS = {
     maxFilesExceededError: "You can't select any more files.",
     fileTooBigError: "File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.",
     removeFileLabel: "Remove file",
-    invalidFilesError: "One or more selected files are invalid. Please, upload only valid file types under the size limit."
+    invalidFilesError: "One or more selected files are invalid. Please, upload only valid file types under the size limit.",
+    uploadFilesLabel: "Upload files"
   },
   audioPlayer: {
     playButtonLabel: "Play",

package/locales/en-US.js

@@ -310,7 +310,8 @@ const enUS = {
     maxFilesExceededError: "You can't select any more files.",
     fileTooBigError: "File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.",
     removeFileLabel: "Remove file",
-    invalidFilesError: "One or more selected files are invalid. Please, upload only valid file types under the size limit."
+    invalidFilesError: "One or more selected files are invalid. Please, upload only valid file types under the size limit.",
+    uploadFilesLabel: "Upload files"
   },
   audioPlayer: {
     playButtonLabel: "Play",

package/locales/ja-JP.cjs

@@ -311,7 +311,8 @@ const jaJP = {
     maxFilesExceededError: "これ以上ファイルを選択できません。",
     fileTooBigError: "ファイルが大きすぎます ({{filesize}}MiB)。最大ファイルサイズ: {{maxFilesize}}MiB。",
     removeFileLabel: "ファイルを削除",
-    invalidFilesError: "選択したファイルの1つ以上が無効です。サイズ制限以下の有効なファイル形式のみをアップロードしてください。"
+    invalidFilesError: "選択したファイルの1つ以上が無効です。サイズ制限以下の有効なファイル形式のみをアップロードしてください。",
+    uploadFilesLabel: "ファイルをアップロード"
   },
   audioPlayer: {
     playButtonLabel: "開始",

package/locales/ja-JP.js

@@ -309,7 +309,8 @@ const jaJP = {
     maxFilesExceededError: "これ以上ファイルを選択できません。",
     fileTooBigError: "ファイルが大きすぎます ({{filesize}}MiB)。最大ファイルサイズ: {{maxFilesize}}MiB。",
     removeFileLabel: "ファイルを削除",
-    invalidFilesError: "選択したファイルの1つ以上が無効です。サイズ制限以下の有効なファイル形式のみをアップロードしてください。"
+    invalidFilesError: "選択したファイルの1つ以上が無効です。サイズ制限以下の有効なファイル形式のみをアップロードしてください。",
+    uploadFilesLabel: "ファイルをアップロード"
   },
   audioPlayer: {
     playButtonLabel: "開始",

package/locales/zh-CN.cjs

@@ -313,7 +313,8 @@ const zhCN = {
     maxFilesExceededError: "您不能再选择任何文件。",
     fileTooBigError: "文件太大 ({{filesize}}MiB)。最大文件大小: {{maxFilesize}}MiB。",
     removeFileLabel: "删除文件",
-    invalidFilesError: "所选的一个或多个文件无效。请仅上传大小限制内的有效文件类型。"
+    invalidFilesError: "所选的一个或多个文件无效。请仅上传大小限制内的有效文件类型。",
+    uploadFilesLabel: "上传文件"
   },
   audioPlayer: {
     playButtonLabel: "草創",

package/locales/zh-CN.js

@@ -311,7 +311,8 @@ const zhCN = {
     maxFilesExceededError: "您不能再选择任何文件。",
     fileTooBigError: "文件太大 ({{filesize}}MiB)。最大文件大小: {{maxFilesize}}MiB。",
     removeFileLabel: "删除文件",
-    invalidFilesError: "所选的一个或多个文件无效。请仅上传大小限制内的有效文件类型。"
+    invalidFilesError: "所选的一个或多个文件无效。请仅上传大小限制内的有效文件类型。",
+    uploadFilesLabel: "上传文件"
   },
   audioPlayer: {
     playButtonLabel: "草創",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vonage/vivid",
-  "version": "4.31.0",
+  "version": "5.0.0",
   "type": "module",
   "module": "./index.js",
   "main": "./index.cjs",

package/shared/aria/aria-mixin.d.ts

@@ -6,11 +6,10 @@ export declare const ariaAttributeName: (ariaPropertyName: AriaPropertyName) =>
 export type VividAriaBehaviour = 'default' | 'delegate' | 'host';
 export declare const AriaMixin: <T extends Constructor<FASTElement & HTMLElement>>(Base: T) => {
     new (...args: any[]): {
-        specialHandling: boolean;
         _vividAriaBehaviour: VividAriaBehaviour;
+        connectedCallback(): void;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-        connectedCallback(): void;
         disconnectedCallback(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         accessKey: string;
@@ -333,6 +332,48 @@ export declare const AriaMixin: <T extends Constructor<FASTElement & HTMLElement
         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;
     };
 } & T;
 export type AriaMixinElement = MixinType<typeof AriaMixin>;

package/shared/aria/attribute-removal.d.ts

@@ -0,0 +1,3 @@
+import { type AriaMixinElement, type AriaPropertyName } from './aria-mixin';
+export declare const handleAriaPropertyChange: (element: AriaMixinElement, ariaProperty: AriaPropertyName) => void;
+export declare const handleElementConnectedCallback: (element: AriaMixinElement) => void;

package/shared/aria/delegate-aria-behavior.d.ts

@@ -10,11 +10,9 @@ export declare class DelegateAriaBehavior<T> implements Behavior {
     private target;
     private readonly boundProperties;
     private readonly forwardedProperties;
-    private readonly isMitigationDisabled;
     constructor(target: HTMLElement, params: {
         boundProperties: BoundAriaProperties<T>;
         forwardedProperties: Set<AriaPropertyName>;
-        disableAccessibilityMitigation: boolean;
     });
     private source;
     bind(source: DelegatesAriaElement): void;
@@ -26,6 +24,5 @@ export declare class DelegateAriaBehavior<T> implements Behavior {
     private stopForwardingPropertiesToTarget;
     private onSourceAriaPropertyChanged;
     private forwardPropertyToTarget;
-    private mitigateAccessibilityIssues;
 }
 export {};

package/shared/aria/delegates-aria.d.ts

@@ -10,7 +10,6 @@ export declare const DelegatesAria: <T extends Constructor<VividElement>>(Base:
     new (...args: any[]): {
         _vividAriaBehaviour: "delegate";
         connectedCallback(): void;
-        specialHandling: boolean;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
         disconnectedCallback(): void;
@@ -335,6 +334,48 @@ export declare const DelegatesAria: <T extends Constructor<VividElement>>(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/aria/host-semantics.d.ts

@@ -7,7 +7,6 @@ export declare const HostSemantics: <T extends Constructor<VividElement>>(Base:
     new (...args: any[]): {
         _vividAriaBehaviour: "host";
         connectedCallback(): void;
-        specialHandling: boolean;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
         disconnectedCallback(): void;
@@ -332,6 +331,48 @@ export declare const HostSemantics: <T extends Constructor<VividElement>>(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/definition15.cjs

@@ -92,7 +92,11 @@ class Checkbox extends delegatesAria.DelegatesAria(
       this.proxy.readOnly = this.readOnly;
     }
   }
-  ariaCheckedChanged() {
+  /**
+   * @internal
+   */
+  ariaCheckedChanged(oldValue, newValue) {
+    super.ariaCheckedChanged(oldValue, newValue);
     if (this.ariaChecked === "mixed") {
       this.indeterminate = true;
     } else {

package/shared/definition15.js

@@ -90,7 +90,11 @@ class Checkbox extends DelegatesAria(
       this.proxy.readOnly = this.readOnly;
     }
   }
-  ariaCheckedChanged() {
+  /**
+   * @internal
+   */
+  ariaCheckedChanged(oldValue, newValue) {
+    super.ariaCheckedChanged(oldValue, newValue);
     if (this.ariaChecked === "mixed") {
       this.indeterminate = true;
     } else {

package/shared/definition17.cjs

@@ -5,6 +5,7 @@ const vividElement = require('./vivid-element.cjs');
 const definition = require('./definition66.cjs');
 const keyCodes = require('./key-codes.cjs');
 const repeat = require('./repeat.cjs');
+const hostSemantics = require('./host-semantics.cjs');
 const children = require('./children.cjs');
 const slotted = require('./slotted.cjs');
 const localized = require('./localized.cjs');
@@ -72,7 +73,7 @@ const defaultHeaderCellContentsTemplate = vividElement.html`
 		${(x) => x.columnDefinition.title === void 0 ? x.columnDefinition.columnDataKey : x.columnDefinition.title}
 	</template>
 `;
-class DataGridCell extends localized.Localized(vividElement.VividElement) {
+class DataGridCell extends localized.Localized(hostSemantics.HostSemantics(vividElement.VividElement)) {
   constructor() {
     super(...arguments);
     // eslint-disable-next-line @repo/repo/no-attribute-default-value
@@ -90,7 +91,21 @@ class DataGridCell extends localized.Localized(vividElement.VividElement) {
     };
     this._selectable = false;
     this.selected = false;
+    /**
+     * Indicates the selected status.
+     *
+     * @deprecated For setting selected state, please use `selected` property instead.
+     * @public
+     * HTML Attribute: aria-selected
+     */
     this.ariaSelected = null;
+    /**
+     * Indicates the sort status.
+     *
+     * @deprecated To set the sorting visual style please use `sortDirection` property.
+     * @public
+     * HTML Attribute: aria-sort
+     */
     this.ariaSort = null;
   }
   /**
@@ -280,54 +295,25 @@ class DataGridCell extends localized.Localized(vividElement.VividElement) {
       this.customCellView = null;
     }
   }
-  /**
-   *
-   * @private
-   */
-  calculateAriaSelectedValue() {
-    if (this._selectable && this.selected) return "true";
-    if (this._selectable && !this.selected) return "false";
-    return null;
-  }
-  /**
-   * @internal
-   */
-  _selectableChanged() {
-    this.ariaSelected = this.calculateAriaSelectedValue();
-  }
-  /**
-   * @internal
-   */
-  selectedChanged() {
-    this.ariaSelected = this.calculateAriaSelectedValue();
-  }
   /**
    * @internal
    */
-  ariaSelectedChanged(_, newValue) {
+  ariaSelectedChanged(prevValue, newValue) {
+    super.ariaSelectedChanged(prevValue, newValue);
     this._selectable = newValue !== null;
     this.selected = newValue === "true";
   }
   /**
    * @internal
    */
-  ariaSortChanged(_oldValue, newValue) {
+  ariaSortChanged(oldValue, newValue) {
+    super.ariaSortChanged(oldValue, newValue);
     if (newValue === null) {
       this.sortDirection = void 0;
       return;
     }
     this.sortDirection = newValue;
   }
-  /**
-   * @internal
-   */
-  sortDirectionChanged(_oldValue, newValue) {
-    if (newValue === void 0) {
-      this.ariaSort = null;
-      return;
-    }
-    this.ariaSort = newValue;
-  }
   #getColumnDataKey() {
     return this.columnDefinition && this.columnDefinition.columnDataKey ? this.columnDefinition.columnDataKey : this.textContent.trim();
   }
@@ -373,12 +359,6 @@ __decorateClass$2([
 __decorateClass$2([
   vividElement.attr({ mode: "boolean" })
 ], DataGridCell.prototype, "selected");
-__decorateClass$2([
-  vividElement.attr({ attribute: "aria-selected", mode: "fromView" })
-], DataGridCell.prototype, "ariaSelected");
-__decorateClass$2([
-  vividElement.attr({ attribute: "aria-sort" })
-], DataGridCell.prototype, "ariaSort");
 __decorateClass$2([
   vividElement.attr({ attribute: "sort-direction" })
 ], DataGridCell.prototype, "sortDirection");
@@ -392,7 +372,7 @@ var __decorateClass$1 = (decorators, target, key, kind) => {
   if (result) __defProp$1(target, key, result);
   return result;
 };
-class DataGridRow extends vividElement.VividElement {
+class DataGridRow extends hostSemantics.HostSemantics(vividElement.VividElement) {
   constructor() {
     super(...arguments);
     // eslint-disable-next-line @repo/repo/no-attribute-default-value
@@ -408,6 +388,13 @@ class DataGridRow extends vividElement.VividElement {
     this.updateRowStyle = () => {
       this.style.gridTemplateColumns = this.gridTemplateColumns;
     };
+    /**
+     * Indicates the selected status.
+     *
+     * @deprecated
+     * @public
+     * HTML Attribute: aria-selected
+     */
     this.ariaSelected = null;
     this._selectable = false;
     this.selected = false;
@@ -521,30 +508,11 @@ class DataGridRow extends vividElement.VividElement {
   /**
    * @internal
    */
-  ariaSelectedChanged(_oldValue, newValue) {
+  ariaSelectedChanged(oldValue, newValue) {
+    super.ariaSelectedChanged(oldValue, newValue);
     this._selectable = newValue !== null;
     this.selected = newValue === "true";
   }
-  /**
-   * @internal
-   */
-  _calculateAriaSelectedValue() {
-    if (this._selectable && this.selected) return "true";
-    if (this._selectable && !this.selected) return "false";
-    return null;
-  }
-  /**
-   * @internal
-   */
-  _selectableChanged() {
-    this.ariaSelected = this._calculateAriaSelectedValue();
-  }
-  /**
-   * @internal
-   */
-  selectedChanged() {
-    this.ariaSelected = this._calculateAriaSelectedValue();
-  }
 }
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass$1([
@@ -580,9 +548,6 @@ __decorateClass$1([
 __decorateClass$1([
   vividElement.observable
 ], DataGridRow.prototype, "cellElements");
-__decorateClass$1([
-  vividElement.attr({ attribute: "aria-selected" })
-], DataGridRow.prototype, "ariaSelected");
 __decorateClass$1([
   vividElement.observable
 ], DataGridRow.prototype, "_selectable");
@@ -640,7 +605,7 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
       );
       const focusRow = this.rowElements[focusRowIndex];
       const cells = focusRow.querySelectorAll(
-        '[role="cell"], [role="gridcell"], [role="columnheader"], [role="rowheader"], [cell-type]'
+        '[role="cell"], [role="gridcell"], [role="columnheader"], [role="rowheader"], [data-vvd-component="data-grid-cell"]'
       );
       const focusColumnIndex = Math.max(
         0,
@@ -656,7 +621,7 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
       if (mutations && mutations.length) {
         mutations.forEach((mutation) => {
           mutation.addedNodes.forEach((newNode) => {
-            if (newNode.nodeType === 1 && newNode.getAttribute("role") === "row") {
+            if (newNode.nodeType === 1 && (newNode.getAttribute("role") === "row" || newNode.getAttribute("row-type") === "default")) {
               newNode.columnDefinitions = this.columnDefinitions;
             }
           });
@@ -698,7 +663,8 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
       }
     };
     this.#handleClick = ({ target, ctrlKey, shiftKey, metaKey }) => {
-      if (target.getAttribute("role") !== "gridcell") return;
+      if (target.getAttribute("role") !== "gridcell" || target.getAttribute("cell-type") !== "default")
+        return;
       if (this.selectionMode === DataGridSelectionMode.singleCell || this.selectionMode === DataGridSelectionMode.multiCell) {
         this.#handleCellSelection({ target, ctrlKey, shiftKey, metaKey });
         return;
@@ -751,10 +717,10 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
      */
     this._resetSelection = (clear = false) => {
       const cells = Array.from(
-        this.querySelectorAll('[role="gridcell"], [cell-type]')
+        this.querySelectorAll('[role="gridcell"], [cell-type="default"]')
       );
       const rows = Array.from(
-        this.querySelectorAll('[role="row"], [row-type]')
+        this.querySelectorAll('[role="row"], [row-type="default"]')
       );
       if (this.selectionMode === DataGridSelectionMode.singleCell || this.selectionMode === DataGridSelectionMode.multiCell) {
         for (const cell of cells) {
@@ -1158,7 +1124,7 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
   applyFixedColumnStyling() {
     this.rowElements.forEach((row) => {
       const cells = row.querySelectorAll(
-        '[role="cell"], [role="gridcell"], [role="columnheader"]'
+        '[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]'
       );
       this.fixedColumnsPositions.forEach((position, index) => {
         if (index < cells.length) {
@@ -1178,7 +1144,7 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
     this.fixedColumnsPositions = [];
     if (this.rowElements.length === 0) return;
     const cells = this.rowElements[0].querySelectorAll(
-      '[role="cell"], [role="gridcell"], [role="columnheader"]'
+      '[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]'
     );
     let accumulator = 0;
     for (let i = 0; i < Math.min(this.fixedColumns, cells.length); i++) {
@@ -1197,7 +1163,7 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
     }
     this.rowElements.forEach((row) => {
       const cells = row.querySelectorAll(
-        '[role="cell"], [role="gridcell"], [role="columnheader"]'
+        '[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]'
       );
       this.fixedColumnsPositions.forEach((_, index) => {
         if (index < cells.length) {
@@ -1305,7 +1271,7 @@ const DataGridTemplate = (context) => {
 			:defaultRowItemTemplate="${rowItemTemplate}"
 			${children.children({
     property: "rowElements",
-    filter: slotted.elements("[role=row]")
+    filter: slotted.elements("[role=row],[data-vvd-component=data-grid-row]")
   })}
 		>
 			<div class="base">
@@ -1316,6 +1282,11 @@ const DataGridTemplate = (context) => {
 	`;
 };
 
+function calculateAriaSelectedValue$1(x) {
+  if (x._selectable && x.selected) return "true";
+  if (x._selectable && !x.selected) return "false";
+  return null;
+}
 function createCellItemTemplate(context) {
   const cellTag = context.tagFor(DataGridCell);
   return vividElement.html`
@@ -1344,14 +1315,17 @@ const DataGridRowTemplate = (context) => {
   const getBaseClasses = (x) => classNames.classNames("base", ["selected", !!x.selected]);
   return vividElement.html`
 		<template
-			role="row"
+			${hostSemantics.applyHostSemantics({
+    role: "row",
+    ariaSelected: calculateAriaSelectedValue$1
+  })}
 			class="${(x) => x.rowType !== "default" ? x.rowType : ""}"
 			:defaultCellItemTemplate="${cellItemTemplate}"
 			:defaultHeaderCellItemTemplate="${headerCellItemTemplate}"
 			${children.children({
     property: "cellElements",
     filter: slotted.elements(
-      '[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"],[cell-type]'
+      '[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"],[data-vvd-component="data-grid-cell"]'
     )
   })}
 		>
@@ -1377,6 +1351,11 @@ function getSortIcon(x) {
   }
   return "sort-solid";
 }
+function calculateAriaSelectedValue(x) {
+  if (x._selectable && x.selected) return "true";
+  if (x._selectable && !x.selected) return "false";
+  return null;
+}
 function renderSortIcons(c) {
   const iconTag = c.tagFor(definition$1.Icon);
   return vividElement.html`
@@ -1400,7 +1379,11 @@ const DataGridCellTemplate = (context) => {
   return vividElement.html`
 		<template
 			tabindex="-1"
-			role="${(x) => DataGridCellRole[x.cellType] ?? DataGridCellRole.default}"
+			${hostSemantics.applyHostSemantics({
+    role: (x) => DataGridCellRole[x.cellType] ?? DataGridCellRole.default,
+    ariaSelected: calculateAriaSelectedValue,
+    ariaSort: (x) => x.sortDirection ?? null
+  })}
 			@click="${(x) => x._handleInteraction()}"
 			@keydown="${(x, c) => handleKeyDown(x, c.event)}"
 		>
@@ -1408,7 +1391,7 @@ const DataGridCellTemplate = (context) => {
 				class="${getBaseClasses}"
 				role="${(x) => shouldShowSortIcons(x) ? "button" : void 0}"
 			>
-				${(x) => x.ariaSelected === "true" ? vividElement.html`<${visuallyHiddenTagName}>${(x2) => x2.locale.dataGrid.cell.selected}</${visuallyHiddenTagName}>` : null}
+				${(x) => x.selected ? vividElement.html`<${visuallyHiddenTagName}>${(x2) => x2.locale.dataGrid.cell.selected}</${visuallyHiddenTagName}>` : null}
 				<slot></slot>
 				${when.when(
     shouldShowSortIcons,