chore: merge conflicts

.all-contributorsrc

@@ -1531,7 +1531,8 @@
       "avatar_url": "https://avatars.githubusercontent.com/u/7907338?v=4",
       "profile": "https://github.com/ychavoya",
       "contributions": [
-        "code"
+        "code",
+        "doc"
       ]
     },
     {

.github/renovate.json5

@@ -13,7 +13,7 @@
     'npm:unpublishSafe',
 
     // https://docs.renovatebot.com/presets-schedule/#scheduledaily
-    'schedule:weekday',
+    'schedule:every weekday',
   ],
   vulnerabilityAlerts: {
     enabled: true,

.github/workflows/add-to-project.yml

@@ -21,7 +21,7 @@ jobs:
     name: Add issue with enhancement label to the Proposals project
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/add-to-project@9bfe908f2eaa7ba10340b31e314148fcfe6a2458 # v1.0.1
+      - uses: actions/add-to-project@244f685bbc3b7adfa8466e08b698b5577571133e # v1.0.2
         with:
           labeled: ${{ env.LABEL_ENHANCEMENT }}
           project-url: ${{ env.PROPOSALS_PROJECT_URL }}
@@ -31,7 +31,7 @@ jobs:
     name: Add issue with typescript label to the TypeScript Adoption project
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/add-to-project@9bfe908f2eaa7ba10340b31e314148fcfe6a2458 # v1.0.1
+      - uses: actions/add-to-project@244f685bbc3b7adfa8466e08b698b5577571133e # v1.0.2
         with:
           labeled: ${{ env.LABEL_TYPESCRIPT }}
           project-url: ${{ env.TYPESCRIPT_PROJECT_URL }}
@@ -41,7 +41,7 @@ jobs:
     name: Add issue with AI4UX label to the AI4UX project
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/add-to-project@9bfe908f2eaa7ba10340b31e314148fcfe6a2458 # v1.0.1
+      - uses: actions/add-to-project@244f685bbc3b7adfa8466e08b698b5577571133e # v1.0.2
         with:
           labeled: ${{ env.LABEL_AI4UX }}
           project-url: ${{ env.AI4UX_PROJECT_URL }}
@@ -51,7 +51,7 @@ jobs:
     name: Add issue to the Design System project
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/add-to-project@9bfe908f2eaa7ba10340b31e314148fcfe6a2458 # v1.0.1
+      - uses: actions/add-to-project@244f685bbc3b7adfa8466e08b698b5577571133e # v1.0.2
         with:
           labeled: ${{ env.LABEL_ENHANCEMENT }}, ${{ env.LABEL_TYPESCRIPT }}
           label-operator: NOT

.github/workflows/codeql-analysis.yml

@@ -24,9 +24,9 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@23acc5c183826b7a8a97bce3cecc52db901f8251 # v3.25.10
+        uses: github/codeql-action/init@b611370bb5703a7efb587f9d136a52ea24c5c38c # v3.25.11
         with:
           languages: javascript
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@23acc5c183826b7a8a97bce3cecc52db901f8251 # v3.25.10
+        uses: github/codeql-action/analyze@b611370bb5703a7efb587f9d136a52ea24c5c38c # v3.25.11

README.md

@@ -290,7 +290,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://github.com/2nikhiltom"><img src="https://avatars.githubusercontent.com/2nikhiltom?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Nikhil Tomar</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=2nikhiltom" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/aninaantony"><img src="https://avatars.githubusercontent.com/u/164350784?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Anina Antony</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=aninaantony" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/ahmedsemih"><img src="https://avatars.githubusercontent.com/u/102798814?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ahmed Semih Erkan</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=ahmedsemih" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/ychavoya"><img src="https://avatars.githubusercontent.com/u/7907338?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Yael Chavoya</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=ychavoya" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/ychavoya"><img src="https://avatars.githubusercontent.com/u/7907338?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Yael Chavoya</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=ychavoya" title="Code">💻</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=ychavoya" title="Documentation">📖</a></td>
     <td align="center"><img src="https://avatars.githubusercontent.com/u/37899503?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Kilian Collender</b></sub><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=Kilian-Collender" title="Code">💻</a></td>
   </tr>
   <tr>

config/eslint-config-carbon/package.json

@@ -1,7 +1,7 @@
 {
   "name": "eslint-config-carbon",
   "description": "ESLint configuration for Carbon",
-  "version": "3.12.0",
+  "version": "3.13.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": {

e2e/components/Slider/Slider-test.avt.e2e.js

@@ -92,6 +92,53 @@ test.describe('@avt Slider', () => {
     await expect(page).toHaveNoACViolations('Slider-with-layer');
   });
 
+  test('@avt-advanced-states slider with custom format', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Slider',
+      id: 'components-slider--slider-with-custom-value-label',
+      globals: {
+        theme: 'white',
+      },
+    });
+
+    await expect(page).toHaveNoACViolations('Slider-with-custom-value-label');
+  });
+
+  test.slow('@avt-keyboard-nav slider with custom format', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Slider',
+      id: 'components-slider--slider-with-custom-value-label',
+      globals: {
+        theme: 'white',
+      },
+    });
+
+    // Test for label changes
+    // Initial value
+    await page.keyboard.press('Tab');
+    await expect(page.getByRole('slider')).toBeVisible();
+    await page.keyboard.press('Tab');
+
+    await expect(page.getByRole('slider')).toHaveAttribute(
+      'aria-valuetext',
+      'Medium'
+    );
+    // Move to high
+    await page.keyboard.press('Shift+ArrowRight');
+    await expect(page.getByRole('slider')).toHaveAttribute(
+      'aria-valuetext',
+      'High'
+    );
+
+    // Move to Low
+    await page.keyboard.press('Shift+ArrowLeft');
+    await page.keyboard.press('Shift+ArrowLeft');
+    await expect(page.getByRole('slider')).toHaveAttribute(
+      'aria-valuetext',
+      'Low'
+    );
+  });
+
   // Prevent timeout
   test.slow('@avt-keyboard-nav', async ({ page }) => {
     await visitStory(page, {

e2e/components/Slider/Slider-test.e2e.js

@@ -37,6 +37,14 @@ test.describe('Slider', () => {
           theme,
         });
       });
+
+      test('slider with formatLabel @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'Slider',
+          id: 'components-slider--slider-with-custom-value-label',
+          theme,
+        });
+      });
     });
   });
 });

e2e/components/Tabs/Tabs-test.avt.e2e.js

@@ -33,6 +33,17 @@ test.describe('@avt Tabs', () => {
     await expect(page).toHaveNoACViolations('Tabs-contained');
   });
 
+  test('@avt-advanced-states tabs vertical', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Tabs',
+      id: 'components-tabs--vertical',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('Tabs-vertical');
+  });
+
   test('@avt-advanced-states tabs contained with icons', async ({ page }) => {
     await visitStory(page, {
       component: 'Tabs',
@@ -150,6 +161,53 @@ test.describe('@avt Tabs', () => {
     await expect(page.getByRole('tab', { name: 'Tab label 4' })).toBeFocused();
   });
 
+  test.slow('@avt-keyboard-nav', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Tabs',
+      id: 'components-tabs--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+
+    // Focus on the first tab via keyboard navigation
+    await page.keyboard.press('Tab');
+    await expect(page.getByRole('tab', { name: 'Tab label 1' })).toBeVisible();
+
+    // Focus should be on content within the first Tab
+    await page.keyboard.press('Tab');
+    await expect(
+      page.getByRole('tabpanel', { name: 'Tab Panel 1' })
+    ).toBeFocused();
+
+    // Moving back one tab stop we should back on Tab label 1
+    await page.keyboard.press('Shift+Tab');
+    await expect(page.getByRole('tab', { name: 'Tab label 1' })).toBeFocused();
+
+    // Nav through the default tab panel via keyboard navigation
+    await page.keyboard.press('ArrowDown');
+    await expect(page.getByRole('tab', { name: 'Tab label 2' })).toBeVisible();
+
+    // Move through the actions in the second tab
+    await page.keyboard.press('Tab');
+    await expect(page.getByRole('checkbox')).toBeVisible();
+
+    await page.keyboard.press('Tab');
+    await expect(page.getByRole('button', { name: 'Submit' })).toBeVisible();
+
+    await page.keyboard.press('Tab');
+    await expect(page.getByRole('textbox')).toBeVisible();
+
+    await page.keyboard.press('Shift+Tab');
+    await page.keyboard.press('Shift+Tab');
+    await page.keyboard.press('Shift+Tab');
+    await expect(page.getByRole('tab', { name: 'Tab label 2' })).toBeFocused();
+
+    // Continue to nav through the default tab panel via keyboard navigation
+    await page.keyboard.press('ArrowDown');
+    await expect(page.getByRole('tab', { name: 'Tab label 4' })).toBeFocused();
+  });
+
   test.slow('@avt-keyboard-nav - dismissable state', async ({ page }) => {
     await visitStory(page, {
       component: 'Tabs',

e2e/components/Tabs/Tabs-test.e2e.js

@@ -111,6 +111,14 @@ test.describe('Tabs', () => {
           theme,
         });
       });
+
+      test('vertical @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'Tabs',
+          id: 'components-tabs--vertical',
+          theme,
+        });
+      });
     });
   });
 });

e2e/components/Tile/Tile-test.avt.e2e.js

@@ -101,6 +101,12 @@ test.describe('@avt Tile', () => {
       },
     });
     await expect(page.locator('body')).toBeFocused();
+
+    // Pause to ensure the initial animation finishes before we interact
+    await expect(
+      page.getByRole('button', { name: 'Above the fold content here' })
+    ).toBeVisible();
+
     await page.keyboard.press('Tab');
     await expect(page.locator('#expandable-tile-1')).toBeFocused();
     await page.keyboard.press('Enter');
@@ -109,6 +115,31 @@ test.describe('@avt Tile', () => {
     );
   });
 
+  test('@avt-advanced-states ExpandableTile with interactive spacebar', async ({
+    page,
+  }) => {
+    await visitStory(page, {
+      component: 'ExpandableTile',
+      id: 'components-tile--expandable-with-interactive',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page.locator('body')).toBeFocused();
+
+    // Pause to ensure the initial animation finishes before we interact
+    await expect(page.getByLabel('Interact to Expand tile')).toBeVisible();
+
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+
+    await expect(page.getByLabel('Interact to Expand tile')).toBeFocused();
+    await page.keyboard.press('Space');
+    await expect(page.locator('#expandable-tile-1')).toHaveClass(
+      'cds--tile cds--tile--expandable cds--tile--expandable--interactive cds--tile--is-expanded'
+    );
+  });
+
   test('@avt-keyboard-nav SelectableTile', async ({ page }) => {
     await visitStory(page, {
       component: 'SelectableTile',
@@ -118,10 +149,14 @@ test.describe('@avt Tile', () => {
       },
     });
     await expect(page.locator('body')).toBeFocused();
+
+    // Pause to ensure the initial animation finishes before we interact
+    await expect(page.getByRole('checkbox')).toBeVisible();
+
     await page.keyboard.press('Tab');
-    await expect(page.locator('#selectable-tile-1')).toBeFocused();
+    await expect(page.getByRole('checkbox')).toBeFocused();
     await page.keyboard.press('Enter');
-    await expect(page.locator('#selectable-tile-1')).toHaveClass(
+    await expect(page.getByRole('checkbox')).toHaveClass(
       'cds--tile cds--tile--selectable cds--tile--is-selected'
     );
   });
@@ -135,9 +170,13 @@ test.describe('@avt Tile', () => {
       },
     });
     await expect(page.locator('body')).toBeFocused();
+
+    // Pause to ensure the initial animation finishes before we interact
+    await expect(page.getByRole('radio').nth(0)).toBeVisible();
+
     await page.keyboard.press('Tab');
-    await expect(page.locator('#radio-tile-2')).toBeFocused();
+    await expect(page.getByRole('radio').nth(1)).toBeFocused();
     await page.keyboard.press('ArrowUp');
-    await expect(page.locator('#radio-tile-1')).toBeChecked();
+    await expect(page.getByRole('radio').nth(0)).toBeChecked();
   });
 });

examples/class-prefix/package.json

@@ -1,15 +1,15 @@
 {
   "name": "class-prefix",
   "private": true,
-  "version": "0.57.0",
+  "version": "0.58.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.60.0",
+    "@carbon/react": "^1.61.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/codesandbox-styles/package.json

@@ -1,7 +1,7 @@
 {
   "name": "codesandbox-styles",
   "private": true,
-  "version": "0.63.0",
+  "version": "0.64.0",
   "type": "module",
   "scripts": {
     "dev": "vite"
@@ -11,6 +11,6 @@
     "vite": "^4.3.8"
   },
   "dependencies": {
-    "@carbon/styles": "^1.60.0"
+    "@carbon/styles": "^1.61.0"
   }
 }

examples/custom-theme/package.json

@@ -1,15 +1,15 @@
 {
   "name": "custom-theme",
   "private": true,
-  "version": "0.58.0",
+  "version": "0.59.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.60.0",
+    "@carbon/react": "^1.61.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/id-prefix/package.json

@@ -1,15 +1,15 @@
 {
   "name": "id-prefix",
   "private": true,
-  "version": "0.57.0",
+  "version": "0.58.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.60.0",
+    "@carbon/react": "^1.61.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },