Scoped styles

playwright/accordion.spec.ts

@@ -2,19 +2,19 @@ import { test, expect } from "@playwright/test";
 
 test("test", async ({ page }) => {
   await page.goto("http://127.0.0.1:8080/component/?name=accordion&", { timeout: 20 * 60 * 1000 }); // Increase timeout to 20 minutes
-  // Get the first .accordion-item
-  const accordionItem = page.locator(".accordion-item");
-  // Click on the first .accordion-item
+  // Get the first .dx-accordion-item
+  const accordionItem = page.locator(".dx-accordion-item");
+  // Click on the first .dx-accordion-item
   const firstAccordionItem = accordionItem.first();
   await firstAccordionItem.locator("button").click();
-  // Verify that the first .accordion-item is expanded (data-open="true")
+  // Verify that the first .dx-accordion-item is expanded (data-open="true")
   await expect(firstAccordionItem).toHaveAttribute("data-open", "true");
 
-  // Click on the second .accordion-item
+  // Click on the second .dx-accordion-item
   const secondAccordionItem = accordionItem.nth(1);
   await secondAccordionItem.locator("button").click();
-  // Verify that the second .accordion-item is expanded (data-open="true")
+  // Verify that the second .dx-accordion-item is expanded (data-open="true")
   await expect(secondAccordionItem).toHaveAttribute("data-open", "true");
-  // Verify the first .accordion-item is collapsed (data-open="false")
+  // Verify the first .dx-accordion-item is collapsed (data-open="false")
   await expect(firstAccordionItem).toHaveAttribute("data-open", "false");
 });

playwright/alert-dialog.spec.ts

@@ -4,7 +4,7 @@ test('test', async ({ page }) => {
   await page.goto('http://127.0.0.1:8080/component/?name=alert_dialog&', { timeout: 20 * 60 * 1000 }); // Increase timeout to 20 minutes
   await page.getByRole('button', { name: 'Show Alert Dialog' }).click();
   // Assert the dialog is open
-  const dialog = page.locator('.alert-dialog-backdrop');
+  const dialog = page.locator('.dx-alert-dialog-backdrop');
   await expect(dialog).toHaveAttribute('data-state', 'open');
   // Assert the cancel button is focused
   const cancelButton = page.getByRole('button', { name: 'Cancel' });

playwright/avatar.spec.ts

@@ -3,13 +3,13 @@ import { test, expect } from "@playwright/test";
 test("test", async ({ page }) => {
   await page.goto("http://127.0.0.1:8080/component/?name=avatar&", { timeout: 20 * 60 * 1000 }); // Increase timeout to 20 minutes
   // Get the avatar element
-  const avatar = page.locator(".avatar-item").nth(0);
+  const avatar = page.locator(".dx-avatar-item").nth(0);
   // Verify the avatar has a loaded image
   let image = avatar.locator("img");
   await expect(image).toHaveAttribute("src", "https://avatars.githubusercontent.com/u/66571940?s=96&v=4");
 
   // Get the third avatar element (Error State - has invalid image URL, shows fallback)
-  const errorAvatar = page.locator(".avatar-item").nth(2);
+  const errorAvatar = page.locator(".dx-avatar-item").nth(2);
   // Verify the error state avatar has fallback text
   await expect(errorAvatar).toContainText("JK");
 });

playwright/calendar.spec.ts

@@ -5,16 +5,16 @@ test("test", async ({ page }) => {
     timeout: 20 * 60 * 1000,
   }); // Increase timeout to 20 minutes
   // Find the calendar element
-  const calendar = page.locator(".calendar").nth(0);
+  const calendar = page.locator(".dx-calendar").nth(0);
   // Find the calendar-nav-prev button
-  const prevButton = calendar.locator(".calendar-nav-prev");
+  const prevButton = calendar.locator(".dx-calendar-nav-prev");
   // Find the calendar-nav-next button
-  const nextButton = calendar.locator(".calendar-nav-next");
+  const nextButton = calendar.locator(".dx-calendar-nav-next");
 
   // Assert the calendar is displayed
   await expect(calendar).toBeVisible({ timeout: 30000 });
   // Assert the current month is displayed
-  const currentMonth = calendar.locator(".calendar-month-select");
+  const currentMonth = calendar.locator(".dx-calendar-month-select");
   let currentMonthText = await currentMonth.inputValue();
 
   // Click the previous button to go to the previous month
@@ -31,7 +31,7 @@ test("test", async ({ page }) => {
   // Move focus to the calendar with tab
   await page.keyboard.press("Tab");
   const focusedDay = calendar.locator(
-    '.calendar-grid-cell[data-month="current"]:focus'
+    '.dx-calendar-grid-cell[data-month="current"]:focus'
   );
   // Assert a day is focused
   const firstDay = focusedDay.first();
@@ -83,9 +83,9 @@ test("year navigation by moving 52 weeks with arrow keys", async ({ page }) => {
   });
 
   // Find the calendar element
-  const calendar = page.locator(".calendar").nth(0);
-  const monthSelect = calendar.locator(".calendar-month-select");
-  const yearSelect = calendar.locator(".calendar-year-select");
+  const calendar = page.locator(".dx-calendar").nth(0);
+  const monthSelect = calendar.locator(".dx-calendar-month-select");
+  const yearSelect = calendar.locator(".dx-calendar-year-select");
 
   // Assert the calendar is displayed
   await expect(calendar).toBeVisible({ timeout: 30000 });
@@ -110,7 +110,7 @@ test("year navigation by moving 52 weeks with arrow keys", async ({ page }) => {
 
   // Move focus to the calendar manually
   const firstDay = calendar
-    .locator('.calendar-grid-cell[data-month="current"]')
+    .locator('.dx-calendar-grid-cell[data-month="current"]')
     .first();
   await firstDay.focus();
 
@@ -148,9 +148,9 @@ test("shift + arrow keys navigation", async ({ page }) => {
   });
 
   // Find the calendar element
-  const calendar = page.locator(".calendar").nth(0);
-  const monthSelect = calendar.locator(".calendar-month-select");
-  const yearSelect = calendar.locator(".calendar-year-select");
+  const calendar = page.locator(".dx-calendar").nth(0);
+  const monthSelect = calendar.locator(".dx-calendar-month-select");
+  const yearSelect = calendar.locator(".dx-calendar-year-select");
 
   // Assert the calendar is displayed
   await expect(calendar).toBeVisible({ timeout: 30000 });
@@ -163,7 +163,7 @@ test("shift + arrow keys navigation", async ({ page }) => {
 
   // Move focus to the calendar
   const firstDay = calendar
-    .locator('.calendar-grid-cell[data-month="current"]')
+    .locator('.dx-calendar-grid-cell[data-month="current"]')
     .first();
   await firstDay.focus();
 
@@ -199,9 +199,9 @@ async function testArrowKeyNavigation(
   });
 
   // Find the calendar element
-  const calendar = page.locator(".calendar").nth(0);
-  const monthSelect = calendar.locator(".calendar-month-select");
-  const yearSelect = calendar.locator(".calendar-year-select");
+  const calendar = page.locator(".dx-calendar").nth(0);
+  const monthSelect = calendar.locator(".dx-calendar-month-select");
+  const yearSelect = calendar.locator(".dx-calendar-year-select");
 
   // Assert the calendar is displayed
   await expect(calendar).toBeVisible({ timeout: 30000 });
@@ -217,13 +217,13 @@ async function testArrowKeyNavigation(
 
   // Move focus to the starting day of the current month
   const startDay = calendar
-    .locator('.calendar-grid-cell[data-month="current"]')
+    .locator('.dx-calendar-grid-cell[data-month="current"]')
     [startPosition]();
   await startDay.focus();
 
   // Get the focused day selector
   const focusedDay = calendar.locator(
-    '.calendar-grid-cell[data-month="current"]:focus'
+    '.dx-calendar-grid-cell[data-month="current"]:focus'
   );
 
   // Array to track all days visited

playwright/collapsible.spec.ts

@@ -2,11 +2,11 @@ import { test, expect } from "@playwright/test";
 
 test("test", async ({ page }) => {
   await page.goto("http://127.0.0.1:8080/component/?name=collapsible&", { timeout: 20 * 60 * 1000 }); // Increase timeout to 20 minutes
-  // Get the .collapsible-content
-  const collapsibleContent = page.locator(".collapsible-content");
-  // Click on the .collapsible-trigger
-  const firstCollapsibleTrigger = page.locator(".collapsible-trigger");
+  // Get the .dx-collapsible-content
+  const collapsibleContent = page.locator(".dx-collapsible-content");
+  // Click on the .dx-collapsible-trigger
+  const firstCollapsibleTrigger = page.locator(".dx-collapsible-trigger");
   await firstCollapsibleTrigger.click();
-  // Verify that the first .collapsible-content is expanded (data-open="true")
+  // Verify that the first .dx-collapsible-content is expanded (data-open="true")
   await expect(collapsibleContent.first()).toHaveAttribute("data-open", "true");
 });

playwright/context-menu.spec.ts

@@ -7,7 +7,7 @@ test('pointer navigation', async ({ page }) => {
   });
 
   // Assert the context menu is visible
-  const contextMenu = page.locator('.context-menu-content');
+  const contextMenu = page.locator('.dx-context-menu-content');
   await expect(contextMenu).toHaveAttribute('data-state', 'open');
   // Click on the "Edit" menu item
   await page.getByRole('menuitem', { name: 'Edit' }).click();
@@ -22,7 +22,7 @@ test('keyboard navigation', async ({ page }) => {
   });
 
   // Assert the context menu is visible
-  const contextMenu = page.locator('.context-menu-content');
+  const contextMenu = page.locator('.dx-context-menu-content');
   await expect(contextMenu).toHaveAttribute('data-state', 'open');
   // Hit escape to close the context menu
   await page.keyboard.press('Escape');

playwright/dialog.spec.ts

@@ -4,7 +4,7 @@ test('test', async ({ page }) => {
   await page.goto('http://127.0.0.1:8080/component/?name=dialog&', { timeout: 20 * 60 * 1000 }); // Increase timeout to 20 minutes
   await page.getByRole('button', { name: 'Show Dialog' }).click();
   // Assert the dialog is open
-  const dialog = page.locator('.dialog-backdrop');
+  const dialog = page.locator('.dx-dialog-backdrop');
   await expect(dialog).toHaveAttribute('data-state', 'open');
   // Assert the close button is focused
   const closeButton = dialog.getByRole('button');

playwright/menubar.spec.ts

@@ -2,15 +2,15 @@ import { test, expect } from "@playwright/test";
 
 test("pointer navigation", async ({ page }) => {
   await page.goto("http://127.0.0.1:8080/component/?name=menubar&", { timeout: 20 * 60 * 1000 }); // Increase timeout to 20 minutes
-  const fileMenu = page.locator(".menubar-menu").first();
+  const fileMenu = page.locator(".dx-menubar-menu").first();
   const fileMenuButton = fileMenu.getByRole("menuitem", { name: "File" });
   await fileMenuButton.click();
   // Assert the menu is open
   const fileMenuContent = fileMenu.getByRole("menu");
   await expect(fileMenuContent).toHaveAttribute("data-state", "open");
 
   // After the menu is open, hover over the Edit menu item
-  const editMenu = page.locator(".menubar-menu").nth(1);
+  const editMenu = page.locator(".dx-menubar-menu").nth(1);
   const editMenuButton = editMenu.getByRole("menuitem", { name: "Edit" });
   await editMenuButton.hover();
   // Assert the Edit menu content is open
@@ -28,13 +28,13 @@ test("pointer navigation", async ({ page }) => {
 
 test("keyboard navigation", async ({ page }) => {
   await page.goto("http://127.0.0.1:8080/component/?name=menubar&", { timeout: 20 * 60 * 1000 }); // Increase timeout to 20 minutes
-  await page.locator(".menubar").focus();
-  const fileMenu = page.locator(".menubar-menu").first();
+  await page.locator(".dx-menubar").focus();
+  const fileMenu = page.locator(".dx-menubar-menu").first();
   const fileMenuButton = fileMenu.getByRole("menuitem", { name: "File" });
   // Go right with the keyboard
   await page.keyboard.press("ArrowRight");
   // Assert the focus is on the Edit menu item
-  const editMenu = page.locator(".menubar-menu").nth(1);
+  const editMenu = page.locator(".dx-menubar-menu").nth(1);
   const editMenuButton = editMenu.getByRole("menuitem", { name: "Edit" });
   await expect(editMenuButton).toBeFocused();
   // Go left with the keyboard

playwright/navbar.spec.ts

@@ -24,7 +24,7 @@ test('mobile navigation', async ({ page }) => {
 
 test('keyboard navigation', async ({ page }) => {
   await page.goto('http://127.0.0.1:8080/component/?name=navbar&', { timeout: 20 * 60 * 1000 }); // Increase timeout to 20 minutes
-  await page.locator('.navbar').focus();
+  await page.locator('.dx-navbar').focus();
   // Go right with the keyboard
   await page.keyboard.press('ArrowRight');
   // Assert the focus is on the information menu item

playwright/select.spec.ts

@@ -5,10 +5,10 @@ test("test", async ({ page }) => {
         timeout: 20 * 60 * 1000,
     }); // Increase timeout to 20 minutes
     // Find Select a fruit...
-    let selectTrigger = page.locator(".select-trigger");
+    let selectTrigger = page.locator(".dx-select-trigger");
     await selectTrigger.click();
     // Assert the select menu is open
-    const selectMenu = page.locator(".select-list");
+    const selectMenu = page.locator(".dx-select-list");
     await expect(selectMenu).toHaveAttribute("data-state", "open");
 
     // Assert the menu is focused
@@ -64,10 +64,10 @@ test("test", async ({ page }) => {
 test("tabbing out of menu closes the select menu", async ({ page }) => {
     await page.goto("http://127.0.0.1:8080/component/?name=select&");
     // Find Select a fruit...
-    let selectTrigger = page.locator(".select-trigger");
+    let selectTrigger = page.locator(".dx-select-trigger");
     await selectTrigger.click();
     // Assert the select menu is open
-    const selectMenu = page.locator(".select-list");
+    const selectMenu = page.locator(".dx-select-list");
     await expect(selectMenu).toHaveAttribute("data-state", "open");
 
     // Assert the menu is focused
@@ -80,10 +80,10 @@ test("tabbing out of menu closes the select menu", async ({ page }) => {
 test("tabbing out of item closes the select menu", async ({ page }) => {
     await page.goto("http://127.0.0.1:8080/component/?name=select&");
     // Find Select a fruit...
-    let selectTrigger = page.locator(".select-trigger");
+    let selectTrigger = page.locator(".dx-select-trigger");
     await selectTrigger.click();
     // Assert the select menu is open
-    const selectMenu = page.locator(".select-list");
+    const selectMenu = page.locator(".dx-select-list");
     await expect(selectMenu).toHaveAttribute("data-state", "open");
 
     // Assert the menu is focused
@@ -101,10 +101,10 @@ test("tabbing out of item closes the select menu", async ({ page }) => {
 test("options selected", async ({ page }) => {
     await page.goto("http://127.0.0.1:8080/component/?name=select&");
     // Find Select a fruit...
-    let selectTrigger = page.locator(".select-trigger");
+    let selectTrigger = page.locator(".dx-select-trigger");
     await selectTrigger.click();
     // Assert the select menu is open
-    const selectMenu = page.locator(".select-list");
+    const selectMenu = page.locator(".dx-select-list");
     await expect(selectMenu).toHaveAttribute("data-state", "open");
 
     // Assert no items have aria-selected
@@ -130,8 +130,8 @@ test("options selected", async ({ page }) => {
 test("down arrow selects first element", async ({ page }) => {
     await page.goto("http://127.0.0.1:8080/component/?name=select&");
     // Find Select a fruit...
-    let selectTrigger = page.locator(".select-trigger");
-    const selectMenu = page.locator(".select-list");
+    let selectTrigger = page.locator(".dx-select-trigger");
+    const selectMenu = page.locator(".dx-select-list");
     await selectTrigger.focus();
 
     // Select the first option
@@ -143,8 +143,8 @@ test("down arrow selects first element", async ({ page }) => {
 test("up arrow selects last element", async ({ page }) => {
     await page.goto("http://127.0.0.1:8080/component/?name=select&");
     // Find Select a fruit...
-    let selectTrigger = page.locator(".select-trigger");
-    const selectMenu = page.locator(".select-list");
+    let selectTrigger = page.locator(".dx-select-trigger");
+    const selectMenu = page.locator(".dx-select-list");
     await selectTrigger.focus();
 
     // Select the first option

playwright/sheet.spec.ts

@@ -7,7 +7,7 @@ test('sheet basic interactions', async ({ page }) => {
   await page.getByRole('button', { name: 'Right' }).click();
 
   // Assert the sheet is open
-  const sheet = page.locator('.sheet-root');
+  const sheet = page.locator('.dx-sheet-root');
   await expect(sheet).toHaveAttribute('data-state', 'open');
 
   // Assert the first input is focused (focus trap)
@@ -29,7 +29,7 @@ test('sheet basic interactions', async ({ page }) => {
   await expect(cancelButton).toBeFocused();
 
   await page.keyboard.press('Tab');
-  const closeButton = sheet.locator('.sheet-close');
+  const closeButton = sheet.locator('.dx-sheet-close');
   await expect(closeButton).toBeFocused();
 
   // Tab again should cycle back to first input
@@ -52,7 +52,7 @@ test('sheet basic interactions', async ({ page }) => {
 test('sheet opens from different sides', async ({ page }) => {
   await page.goto('http://127.0.0.1:8080/component/?name=sheet&', { timeout: 20 * 60 * 1000 });
 
-  const sheet = page.locator('.sheet-root');
+  const sheet = page.locator('.dx-sheet-root');
   const sheetContent = page.locator('[data-slot="sheet-content"]');
 
   // Test Top

playwright/sidebar.spec.ts

@@ -7,7 +7,7 @@ async function gotoSidebarBlock(page: Page) {
     timeout: 20 * 60 * 1000,
   });
 
-  await expect(page.locator(".sidebar-wrapper")).toBeVisible();
+  await expect(page.locator(".dx-sidebar-wrapper")).toBeVisible();
 }
 
 test("sidebar: preview page renders block", async ({ page }) => {
@@ -31,14 +31,14 @@ test("sidebar: preview page renders block", async ({ page }) => {
     throw new Error("Sidebar preview iframe has no content frame");
   }
 
-  await expect(frame.locator(".sidebar-wrapper")).toBeVisible();
+  await expect(frame.locator(".dx-sidebar-wrapper")).toBeVisible();
 });
 
 test.describe("sidebar: block route", () => {
   test("desktop: toggles via button and Ctrl+B", async ({ page }) => {
     await gotoSidebarBlock(page);
 
-    const sidebar = page.locator(".sidebar-desktop");
+    const sidebar = page.locator(".dx-sidebar-desktop");
     await expect(sidebar).toHaveAttribute("data-state", "expanded");
     const trigger = page.locator('[data-slot="sidebar-trigger"]');
     await expect(trigger).toHaveAccessibleName("Toggle Sidebar");
@@ -59,7 +59,7 @@ test.describe("sidebar: block route", () => {
   test("desktop: side switch updates data-side", async ({ page }) => {
     await gotoSidebarBlock(page);
 
-    const sidebar = page.locator(".sidebar-desktop");
+    const sidebar = page.locator(".dx-sidebar-desktop");
     await expect(sidebar).toHaveAttribute("data-side", "left");
 
     await page.getByRole("button", { name: "Right" }).click();
@@ -73,7 +73,7 @@ test.describe("sidebar: block route", () => {
   }) => {
     await gotoSidebarBlock(page);
 
-    const sidebar = page.locator(".sidebar-desktop");
+    const sidebar = page.locator(".dx-sidebar-desktop");
     const trigger = page.locator('[data-slot="sidebar-trigger"]');
 
     await page.getByRole("button", { name: "Icon" }).click();
@@ -106,7 +106,7 @@ test.describe("sidebar: block route", () => {
     const trigger = page.locator('[data-slot="sidebar-trigger"]');
     await trigger.tap();
 
-    const sheet = page.locator(".sheet-root");
+    const sheet = page.locator(".dx-sheet-root");
     await expect(sheet).toHaveAttribute("data-state", "open");
     await page.keyboard.press("Escape");
     await expect(sheet).toHaveCount(0);