From 67a99f5a7f19a7da858d02d50d9a8ad8660d23b1 Mon Sep 17 00:00:00 2001
From: SamTV12345 <noreply@samtv.fyi>
Date: Mon, 24 Aug 2026 19:16:44 +0200
Subject: [PATCH 1/6] feat(deps)!: update React dependencies to v19

Bump react, react-dom, @types/react and @types/react-dom to v19 in the
workspace and the integration demo app, and update the peer ranges of
all packages and the package generator template to ^18 || ^19.

NumberInputProps drops the conflicting div onChange (stricter event
types in @types/react@19), the MenuToggleInForm example uses the scoped
React.JSX namespace, snapshots are regenerated for the new useId format
and the Select template tests no longer rely on React 18 deferring
unmounts past awaited user events.

BREAKING CHANGE: React 17 is no longer supported, the react and
react-dom peer dependencies are now ^18 || ^19.
---
 package.json                                  |   8 +-
 packages/react-charts/package.json            |   4 +-
 packages/react-code-editor/package.json       |   4 +-
 .../__snapshots__/CodeEditor.test.tsx.snap    |   6 +-
 .../CodeEditorControl.test.tsx.snap           |   2 +-
 packages/react-core/package.json              |   4 +-
 .../AboutModalBoxCloseButton.test.tsx.snap    |   6 +-
 .../AboutModalBoxHeader.test.tsx.snap         |   2 +-
 .../AlertActionCloseButton.test.tsx.snap      |   2 +-
 .../AlertActionLink.test.tsx.snap             |   2 +-
 .../__snapshots__/Breadcrumb.test.tsx.snap    |   8 +-
 .../__snapshots__/Button.test.tsx.snap        |   2 +-
 .../__snapshots__/Card.test.tsx.snap          |   4 +-
 .../__snapshots__/CardHeader.test.tsx.snap    |   2 +-
 .../__snapshots__/ClipboardCopy.test.tsx.snap |   2 +-
 .../ClipboardCopyButton.test.tsx.snap         |   2 +-
 .../ClipboardCopyToggle.test.tsx.snap         |   2 +-
 .../__snapshots__/Compass.test.tsx.snap       |   2 +-
 .../CompassContent.test.tsx.snap              |   2 +-
 .../CompassNavHome.test.tsx.snap              |   4 +-
 .../CompassNavSearch.test.tsx.snap            |   4 +-
 .../__snapshots__/DataListCheck.test.tsx.snap |   2 +-
 .../DataListToggle.test.tsx.snap              |   2 +-
 .../DataListToggle.test.tsx.snap              |   2 +-
 .../__snapshots__/DatePicker.test.tsx.snap    | 110 +--
 .../DrawerPanelContent.test.tsx.snap          |   2 +-
 .../__snapshots__/Drawer.test.tsx.snap        |  34 +-
 .../DualListSelector.test.tsx.snap            |   2 +-
 .../__snapshots__/EmptyState.test.tsx.snap    |   4 +-
 .../ExpandableSection.test.tsx.snap           |  10 +-
 .../__snapshots__/FileUpload.test.tsx.snap    |   6 +-
 .../FileUploadField.test.tsx.snap             |   6 +-
 .../__snapshots__/ActionGroup.test.tsx.snap   |   2 +-
 .../__snapshots__/Form.test.tsx.snap          |   6 +-
 .../FormFieldGroup.test.tsx.snap              |  10 +-
 .../__snapshots__/FormGroup.test.tsx.snap     |  20 +-
 .../__snapshots__/FormSelect.test.tsx.snap    |  18 +-
 .../__snapshots__/JumpLinks.test.tsx.snap     |  58 +-
 .../__snapshots__/Label.test.tsx.snap         |  30 +-
 .../__snapshots__/LabelGroup.test.tsx.snap    |   2 +-
 .../__snapshots__/LoginForm.test.tsx.snap     |  48 +-
 .../LoginMainHeader.test.tsx.snap             |   2 +-
 .../__snapshots__/LoginPage.test.tsx.snap     |   6 +-
 .../__snapshots__/Menu.test.tsx.snap          |   2 +-
 .../__snapshots__/MenuToggle.test.tsx.snap    |  18 +-
 .../MenuToggle/examples/MenuToggleInForm.tsx  |   2 +-
 .../__snapshots__/ModalContent.test.tsx.snap  |   2 +-
 .../MultipleFileUploadButton.test.tsx.snap    |   8 +-
 .../MultipleFileUploadMain.test.tsx.snap      |   8 +-
 .../MultipleFileUploadStatus.test.tsx.snap    |  40 +-
 ...MultipleFileUploadStatusItem.test.tsx.snap |  16 +-
 .../__snapshots__/NavExpandable.test.tsx.snap |   2 +-
 .../__snapshots__/NavItem.test.tsx.snap       |   2 +-
 .../__tests__/__snapshots__/Nav.test.tsx.snap | 112 ++--
 .../NotificationBadge.test.tsx.snap           |   6 +-
 .../components/NumberInput/NumberInput.tsx    |   2 +-
 .../__snapshots__/NumberInput.test.tsx.snap   |  78 +--
 .../OverflowMenuDropdownItem.test.tsx.snap    |   2 +-
 .../__snapshots__/Page.test.tsx.snap          |  44 +-
 .../PaginationNavigation.test.tsx.snap        |  10 +-
 .../PaginationOptionsMenu.test.tsx.snap       |   2 +-
 .../__snapshots__/Pagination.test.tsx.snap    | 292 ++++----
 .../PopoverCloseButton.test.tsx.snap          |   2 +-
 .../__snapshots__/Radio.test.tsx.snap         |  20 +-
 .../__snapshots__/SearchInput.test.tsx.snap   |   4 +-
 .../__snapshots__/SkipToContent.test.tsx.snap |   2 +-
 .../__snapshots__/Slider.test.tsx.snap        |  28 +-
 .../__snapshots__/Switch.test.tsx.snap        |  16 +-
 .../__tests__/__snapshots__/Tab.test.tsx.snap |   2 +-
 .../__snapshots__/Tabs.test.tsx.snap          |  34 +-
 .../__snapshots__/TextInput.test.tsx.snap     |  15 +-
 .../__snapshots__/Toolbar.test.tsx.snap       |  16 +-
 .../__snapshots__/Chip.test.tsx.snap          |   2 +-
 .../DualListSelector.test.tsx.snap            |  48 +-
 .../__snapshots__/ModalContent.test.tsx.snap  |  16 +-
 .../WizardFooterInternal.test.tsx.snap        |   6 +-
 .../__snapshots__/WizardNav.test.tsx.snap     |   2 +-
 .../__snapshots__/WizardNavItem.test.tsx.snap |   2 +-
 .../__snapshots__/Wizard.test.tsx.snap        |  54 +-
 .../__snapshots__/GenerateId.test.tsx.snap    |   2 +-
 packages/react-drag-drop/package.json         |   4 +-
 .../__snapshots__/DragDrop.test.tsx.snap      |   6 +-
 packages/react-icons/package.json             |   4 +-
 .../demo-app-ts/package.json                  |   4 +-
 packages/react-table/package.json             |   4 +-
 .../__snapshots__/RowWrapper.test.tsx.snap    |   4 +-
 .../__snapshots__/Table.test.tsx.snap         |   2 +-
 .../__tests__/__snapshots__/Tr.test.tsx.snap  |   4 +-
 .../__snapshots__/transformers.test.tsx.snap  |  25 +-
 .../__snapshots__/Table.test.tsx.snap         | 632 +++++++++---------
 packages/react-templates/package.json         |   4 +-
 .../SimpleDropdown.test.tsx.snap              |   4 +-
 .../Select/__tests__/CheckboxSelect.test.tsx  |   4 +-
 .../__tests__/MultiTypeaheadSelect.test.tsx   |   5 +-
 .../Select/__tests__/SimpleSelect.test.tsx    |   6 +-
 .../Select/__tests__/TypeaheadSelect.test.tsx |   4 +-
 .../CheckboxSelectSnapshots.test.tsx.snap     |   4 +-
 .../MultiTypeaheadSelect.test.tsx.snap        |   4 +-
 .../__snapshots__/SimpleSelect.test.tsx.snap  |   4 +-
 .../TypeaheadSelect.test.tsx.snap             |   4 +-
 scripts/generators/package/package.json.hbs   |   4 +-
 yarn.lock                                     | 101 ++-
 102 files changed, 1100 insertions(+), 1112 deletions(-)

diff --git a/package.json b/package.json
index 41662fc6405..0cc8e4471ec 100644
--- a/package.json
+++ b/package.json
@@ -43,8 +43,8 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "29.5.14",
     "@types/node": "^22.16.5",
-    "@types/react": "^18.3.28",
-    "@types/react-dom": "^18.3.7",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.5",
     "babel-jest": "^29.7.0",
     "concurrently": "^9.2.1",
     "eslint": "^9.32.0",
@@ -68,8 +68,8 @@
     "plop": "^4.0.5",
     "prettier": "^3.8.1",
     "publint": "^0.3.18",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
     "rimraf": "^6.1.3",
     "rollup": "^4.57.1",
     "rollup-plugin-scss": "^4.0.1",
diff --git a/packages/react-charts/package.json b/packages/react-charts/package.json
index 06a373825e5..d17c1634e89 100644
--- a/packages/react-charts/package.json
+++ b/packages/react-charts/package.json
@@ -52,8 +52,8 @@
   },
   "peerDependencies": {
     "echarts": "^5.6.0 || ^6.0.0",
-    "react": "^17 || ^18 || ^19",
-    "react-dom": "^17 || ^18 || ^19",
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19",
     "victory-area": "^37.3.6",
     "victory-axis": "^37.3.6",
     "victory-bar": "^37.3.6",
diff --git a/packages/react-code-editor/package.json b/packages/react-code-editor/package.json
index 65a678c0dbf..7a4f5b7953c 100644
--- a/packages/react-code-editor/package.json
+++ b/packages/react-code-editor/package.json
@@ -38,8 +38,8 @@
     "tslib": "^2.8.1"
   },
   "peerDependencies": {
-    "react": "^17 || ^18 || ^19",
-    "react-dom": "^17 || ^18 || ^19"
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
   },
   "devDependencies": {
     "monaco-editor": "^0.56.0"
diff --git a/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap b/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap
index 88173df32e3..c6275d8a4b5 100644
--- a/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap
+++ b/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap
@@ -25,7 +25,7 @@ exports[`Matches snapshot with control buttons enabled 1`] = `
               <button
                 aria-label="Copy code to clipboard"
                 class="pf-v6-c-button pf-m-plain"
-                data-ouia-component-id="OUIA-Generated-Button-plain-:r1:"
+                data-ouia-component-id="OUIA-Generated-Button-plain-_r_1_"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"
@@ -55,7 +55,7 @@ exports[`Matches snapshot with control buttons enabled 1`] = `
               <button
                 aria-label="Upload code"
                 class="pf-v6-c-button pf-m-plain"
-                data-ouia-component-id="OUIA-Generated-Button-plain-:r3:"
+                data-ouia-component-id="OUIA-Generated-Button-plain-_r_3_"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"
@@ -85,7 +85,7 @@ exports[`Matches snapshot with control buttons enabled 1`] = `
               <button
                 aria-label="Download code"
                 class="pf-v6-c-button pf-m-plain"
-                data-ouia-component-id="OUIA-Generated-Button-plain-:r5:"
+                data-ouia-component-id="OUIA-Generated-Button-plain-_r_5_"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"
diff --git a/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditorControl.test.tsx.snap b/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditorControl.test.tsx.snap
index 5751d125bc9..a64e158def0 100644
--- a/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditorControl.test.tsx.snap
+++ b/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditorControl.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`Matches snapshot 1`] = `
   >
     <button
       class="pf-v6-c-button pf-m-plain"
-      data-ouia-component-id="OUIA-Generated-Button-plain-:r1:"
+      data-ouia-component-id="OUIA-Generated-Button-plain-_r_1_"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       type="button"
diff --git a/packages/react-core/package.json b/packages/react-core/package.json
index 656a87c6ec3..1e4e6faaa73 100644
--- a/packages/react-core/package.json
+++ b/packages/react-core/package.json
@@ -60,7 +60,7 @@
     "fs-extra": "^11.3.3"
   },
   "peerDependencies": {
-    "react": "^17 || ^18 || ^19",
-    "react-dom": "^17 || ^18 || ^19"
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
   }
 }
diff --git a/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap b/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap
index a49f0976bb0..bd769574eba 100644
--- a/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap
+++ b/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`AboutModalBoxCloseButton Test 1`] = `
     <button
       aria-label="Close Dialog"
       class="pf-v6-c-button pf-m-plain"
-      data-ouia-component-id="OUIA-Generated-Button-plain-:r0:"
+      data-ouia-component-id="OUIA-Generated-Button-plain-_r_0_"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       type="button"
@@ -43,7 +43,7 @@ exports[`AboutModalBoxCloseButton Test close button aria label 1`] = `
     <button
       aria-label="Klose Daylok"
       class="pf-v6-c-button pf-m-plain"
-      data-ouia-component-id="OUIA-Generated-Button-plain-:r2:"
+      data-ouia-component-id="OUIA-Generated-Button-plain-_r_2_"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       type="button"
@@ -78,7 +78,7 @@ exports[`AboutModalBoxCloseButton Test onclose 1`] = `
     <button
       aria-label="Close Dialog"
       class="pf-v6-c-button pf-m-plain"
-      data-ouia-component-id="OUIA-Generated-Button-plain-:r1:"
+      data-ouia-component-id="OUIA-Generated-Button-plain-_r_1_"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       type="button"
diff --git a/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxHeader.test.tsx.snap b/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxHeader.test.tsx.snap
index aac3b538c69..ce697e1e2c3 100644
--- a/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxHeader.test.tsx.snap
+++ b/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxHeader.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`AboutModalBoxHeader Test 1`] = `
   >
     <h1
       class="pf-v6-c-title pf-m-4xl"
-      data-ouia-component-id="OUIA-Generated-Title-:r0:"
+      data-ouia-component-id="OUIA-Generated-Title-_r_0_"
       data-ouia-component-type="PF6/Title"
       data-ouia-safe="true"
       id="id"
diff --git a/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap b/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap
index 28db37204e9..c1384c7ee94 100644
--- a/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap
+++ b/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`AlertActionCloseButton should match snapshot 1`] = `
   <button
     aria-label="Close some label alert: test title"
     class="pf-v6-c-button pf-m-plain"
-    data-ouia-component-id="OUIA-Generated-Button-plain-:r0:"
+    data-ouia-component-id="OUIA-Generated-Button-plain-_r_0_"
     data-ouia-component-type="PF6/Button"
     data-ouia-safe="true"
     type="button"
diff --git a/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionLink.test.tsx.snap b/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionLink.test.tsx.snap
index c615ed2d152..32700501584 100644
--- a/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionLink.test.tsx.snap
+++ b/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionLink.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`AlertActionLink should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <button
     class="pf-v6-c-button pf-m-link pf-m-inline ''"
-    data-ouia-component-id="OUIA-Generated-Button-link-:r0:"
+    data-ouia-component-id="OUIA-Generated-Button-link-_r_0_"
     data-ouia-component-type="PF6/Button"
     data-ouia-safe="true"
     type="button"
diff --git a/packages/react-core/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap b/packages/react-core/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap
index 34823bf90ad..7f5e552797b 100644
--- a/packages/react-core/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap
+++ b/packages/react-core/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`Breadcrumb component should render breadcrumb with aria-label 1`] = `
   <nav
     aria-label="custom label"
     class="pf-v6-c-breadcrumb"
-    data-ouia-component-id="OUIA-Generated-Breadcrumb-:r2:"
+    data-ouia-component-id="OUIA-Generated-Breadcrumb-_r_2_"
     data-ouia-component-type="PF6/Breadcrumb"
     data-ouia-safe="true"
   >
@@ -22,7 +22,7 @@ exports[`Breadcrumb component should render breadcrumb with children 1`] = `
   <nav
     aria-label="Breadcrumb"
     class="pf-v6-c-breadcrumb"
-    data-ouia-component-id="OUIA-Generated-Breadcrumb-:r3:"
+    data-ouia-component-id="OUIA-Generated-Breadcrumb-_r_3_"
     data-ouia-component-type="PF6/Breadcrumb"
     data-ouia-safe="true"
   >
@@ -78,7 +78,7 @@ exports[`Breadcrumb component should render breadcrumb with className 1`] = `
   <nav
     aria-label="Breadcrumb"
     class="pf-v6-c-breadcrumb className"
-    data-ouia-component-id="OUIA-Generated-Breadcrumb-:r1:"
+    data-ouia-component-id="OUIA-Generated-Breadcrumb-_r_1_"
     data-ouia-component-type="PF6/Breadcrumb"
     data-ouia-safe="true"
   >
@@ -95,7 +95,7 @@ exports[`Breadcrumb component should render default breadcrumb 1`] = `
   <nav
     aria-label="Breadcrumb"
     class="pf-v6-c-breadcrumb"
-    data-ouia-component-id="OUIA-Generated-Breadcrumb-:r0:"
+    data-ouia-component-id="OUIA-Generated-Breadcrumb-_r_0_"
     data-ouia-component-type="PF6/Breadcrumb"
     data-ouia-safe="true"
   >
diff --git a/packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap b/packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap
index eb99ad0e5ec..2b3761e9d47 100644
--- a/packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`Renders basic button 1`] = `
   <button
     aria-label="basic button"
     class="pf-v6-c-button pf-m-primary"
-    data-ouia-component-id="OUIA-Generated-Button-primary-:r36:"
+    data-ouia-component-id="OUIA-Generated-Button-primary-_r_36_"
     data-ouia-component-type="PF6/Button"
     data-ouia-safe="true"
     type="button"
diff --git a/packages/react-core/src/components/Card/__tests__/__snapshots__/Card.test.tsx.snap b/packages/react-core/src/components/Card/__tests__/__snapshots__/Card.test.tsx.snap
index cad89cf924a..b06e0d79b8c 100644
--- a/packages/react-core/src/components/Card/__tests__/__snapshots__/Card.test.tsx.snap
+++ b/packages/react-core/src/components/Card/__tests__/__snapshots__/Card.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Card card with isCompact applied  1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-card pf-m-compact"
-    data-ouia-component-id="OUIA-Generated-Card-:r5:"
+    data-ouia-component-id="OUIA-Generated-Card-_r_5_"
     data-ouia-component-type="PF6/Card"
     data-ouia-safe="true"
     id=""
@@ -16,7 +16,7 @@ exports[`Card renders with PatternFly Core styles 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-card"
-    data-ouia-component-id="OUIA-Generated-Card-:r0:"
+    data-ouia-component-id="OUIA-Generated-Card-_r_0_"
     data-ouia-component-type="PF6/Card"
     data-ouia-safe="true"
     id=""
diff --git a/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeader.test.tsx.snap b/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeader.test.tsx.snap
index 7f8cc924f81..c3c810905bc 100644
--- a/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeader.test.tsx.snap
+++ b/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeader.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`CardHeader onExpand adds the toggle button 1`] = `
     >
       <button
         class="pf-v6-c-button pf-m-plain"
-        data-ouia-component-id="OUIA-Generated-Button-plain-:r1:"
+        data-ouia-component-id="OUIA-Generated-Button-plain-_r_1_"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
diff --git a/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopy.test.tsx.snap b/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopy.test.tsx.snap
index d144f76ba03..ad0a0e6c57b 100644
--- a/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopy.test.tsx.snap
+++ b/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopy.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`Matches snapshot 1`] = `
         <input
           aria-invalid="false"
           aria-label="Copyable input"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-:r2j:"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-_r_2j_"
           data-ouia-component-type="PF6/TextInput"
           data-ouia-safe="true"
           id="text-input-generated-id"
diff --git a/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyButton.test.tsx.snap b/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyButton.test.tsx.snap
index ca675c524f9..5751d9a15a1 100644
--- a/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyButton.test.tsx.snap
+++ b/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyButton.test.tsx.snap
@@ -30,7 +30,7 @@ exports[`Matches snapshot 1`] = `
     <button
       aria-label="Copyable input"
       class="pf-v6-c-button pf-m-control"
-      data-ouia-component-id="OUIA-Generated-Button-control-:r0:"
+      data-ouia-component-id="OUIA-Generated-Button-control-_r_0_"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       id="button-id"
diff --git a/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap b/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap
index c318dccc369..86934252bfd 100644
--- a/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap
+++ b/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`Matches snapshot 1`] = `
   <button
     aria-expanded="false"
     class="pf-v6-c-button pf-m-control"
-    data-ouia-component-id="OUIA-Generated-Button-control-:r0:"
+    data-ouia-component-id="OUIA-Generated-Button-control-_r_0_"
     data-ouia-component-type="PF6/Button"
     data-ouia-safe="true"
     id="main-id"
diff --git a/packages/react-core/src/components/Compass/__tests__/__snapshots__/Compass.test.tsx.snap b/packages/react-core/src/components/Compass/__tests__/__snapshots__/Compass.test.tsx.snap
index 5aff63c8d11..b001c55a0b8 100644
--- a/packages/react-core/src/components/Compass/__tests__/__snapshots__/Compass.test.tsx.snap
+++ b/packages/react-core/src/components/Compass/__tests__/__snapshots__/Compass.test.tsx.snap
@@ -55,7 +55,7 @@ exports[`Matches the snapshot with drawer 1`] = `
   >
     <div
       class="pf-v6-c-drawer pf-m-expanded pf-m-pill"
-      data-ouia-component-id="OUIA-Generated-Drawer-:r1:"
+      data-ouia-component-id="OUIA-Generated-Drawer-_r_1_"
       data-ouia-component-type="PF6/Drawer"
       data-ouia-safe="true"
     >
diff --git a/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassContent.test.tsx.snap b/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassContent.test.tsx.snap
index a31b1dcecec..35687c839a4 100644
--- a/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassContent.test.tsx.snap
+++ b/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassContent.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Matches the snapshot with drawer 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-drawer pf-m-expanded pf-m-pill"
-    data-ouia-component-id="OUIA-Generated-Drawer-:r1:"
+    data-ouia-component-id="OUIA-Generated-Drawer-_r_1_"
     data-ouia-component-type="PF6/Drawer"
     data-ouia-safe="true"
   >
diff --git a/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassNavHome.test.tsx.snap b/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassNavHome.test.tsx.snap
index 96703d6ebaa..e376d3ad85d 100644
--- a/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassNavHome.test.tsx.snap
+++ b/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassNavHome.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`Matches the snapshot 1`] = `
     <button
       aria-label="Home"
       class="pf-v6-c-button pf-m-plain pf-m-circle"
-      data-ouia-component-id="OUIA-Generated-Button-plain-:rh:"
+      data-ouia-component-id="OUIA-Generated-Button-plain-_r_h_"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       type="button"
@@ -61,7 +61,7 @@ exports[`Matches the snapshot with custom props 1`] = `
     <button
       aria-label="Custom home"
       class="pf-v6-c-button pf-m-plain pf-m-circle"
-      data-ouia-component-id="OUIA-Generated-Button-plain-:rj:"
+      data-ouia-component-id="OUIA-Generated-Button-plain-_r_j_"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       type="button"
diff --git a/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassNavSearch.test.tsx.snap b/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassNavSearch.test.tsx.snap
index c6e1a8b4953..ed77f053a56 100644
--- a/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassNavSearch.test.tsx.snap
+++ b/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassNavSearch.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`Matches the snapshot 1`] = `
     <button
       aria-label="Search"
       class="pf-v6-c-button pf-m-plain pf-m-circle"
-      data-ouia-component-id="OUIA-Generated-Button-plain-:rh:"
+      data-ouia-component-id="OUIA-Generated-Button-plain-_r_h_"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       type="button"
@@ -54,7 +54,7 @@ exports[`Matches the snapshot with custom props 1`] = `
     <button
       aria-label="Custom search"
       class="pf-v6-c-button pf-m-plain pf-m-circle"
-      data-ouia-component-id="OUIA-Generated-Button-plain-:rj:"
+      data-ouia-component-id="OUIA-Generated-Button-plain-_r_j_"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       type="button"
diff --git a/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListCheck.test.tsx.snap b/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListCheck.test.tsx.snap
index 111df143cec..052873e0e84 100644
--- a/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListCheck.test.tsx.snap
+++ b/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListCheck.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`DataListCheck should match snapshot (auto-generated) 1`] = `
           aria-invalid="false"
           aria-labelledby="string"
           class="pf-v6-c-check__input"
-          data-ouia-component-id="OUIA-Generated-Checkbox-:r2:"
+          data-ouia-component-id="OUIA-Generated-Checkbox-_r_2_"
           data-ouia-component-type="PF6/Checkbox"
           data-ouia-safe="true"
           id="test"
diff --git a/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListToggle.test.tsx.snap b/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListToggle.test.tsx.snap
index da7429404bb..6fbd511208d 100644
--- a/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListToggle.test.tsx.snap
+++ b/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListToggle.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`DataListToggle should match snapshot (auto-generated) 1`] = `
         aria-expanded="false"
         aria-label="'Details'"
         class="pf-v6-c-button pf-m-plain"
-        data-ouia-component-id="OUIA-Generated-Button-plain-:r0:"
+        data-ouia-component-id="OUIA-Generated-Button-plain-_r_0_"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         id="string"
diff --git a/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListToggle.test.tsx.snap b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListToggle.test.tsx.snap
index 3030121ed4f..67afc7ab4af 100644
--- a/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListToggle.test.tsx.snap
+++ b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListToggle.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`Renders to match snapshot 1`] = `
         aria-label="Details"
         aria-labelledby=" ex-toggle2"
         class="pf-v6-c-button pf-m-plain"
-        data-ouia-component-id="OUIA-Generated-Button-plain-:r0:"
+        data-ouia-component-id="OUIA-Generated-Button-plain-_r_0_"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         id="ex-toggle2"
diff --git a/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap b/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap
index 33eacf9ca05..af5ce1364b0 100644
--- a/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap
+++ b/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap
@@ -21,7 +21,7 @@ exports[`With popover opened 1`] = `
             <input
               aria-invalid="false"
               aria-label="Date picker"
-              data-ouia-component-id="OUIA-Generated-TextInputBase-:r11:"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-_r_11_"
               data-ouia-component-type="PF6/TextInput"
               data-ouia-safe="true"
               placeholder="YYYY-MM-DD"
@@ -37,7 +37,7 @@ exports[`With popover opened 1`] = `
             aria-haspopup="dialog"
             aria-label="Toggle date picker"
             class="pf-v6-c-button pf-m-control"
-            data-ouia-component-id="OUIA-Generated-Button-control-:r12:"
+            data-ouia-component-id="OUIA-Generated-Button-control-_r_12_"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -64,11 +64,11 @@ exports[`With popover opened 1`] = `
       </div>
     </div>
     <div
-      aria-describedby="popover-pf-:ru:-body"
+      aria-describedby="popover-pf-_r_u_-body"
       aria-label=""
       aria-modal="true"
       class="pf-v6-c-popover pf-m-no-padding pf-m-width-auto pf-m-bottom"
-      data-ouia-component-id="OUIA-Generated-Popover-:rv:"
+      data-ouia-component-id="OUIA-Generated-Popover-_r_v_"
       data-ouia-component-type="PF6/Popover"
       data-ouia-safe="true"
       data-popper-escaped="true"
@@ -85,11 +85,11 @@ exports[`With popover opened 1`] = `
       >
         <div
           class="pf-v6-c-popover__body"
-          id="popover-pf-:ru:-body"
+          id="popover-pf-_r_u_-body"
         >
           <div
             class="pf-v6-c-calendar-month"
-            data-ouia-component-id="OUIA-Generated-CalendarMonth-:r13:"
+            data-ouia-component-id="OUIA-Generated-CalendarMonth-_r_13_"
             data-ouia-component-type="PF6/CalendarMonth"
             data-ouia-safe="true"
           >
@@ -102,7 +102,7 @@ exports[`With popover opened 1`] = `
                 <button
                   aria-label="Previous month"
                   class="pf-v6-c-button pf-m-plain"
-                  data-ouia-component-id="OUIA-Generated-Button-plain-:r15:"
+                  data-ouia-component-id="OUIA-Generated-Button-plain-_r_15_"
                   data-ouia-component-type="PF6/Button"
                   data-ouia-safe="true"
                   type="button"
@@ -137,7 +137,7 @@ exports[`With popover opened 1`] = `
                   >
                     <span
                       hidden=""
-                      id="hidden-month-span:r14:"
+                      id="hidden-month-span_r_14_"
                     >
                       Month
                     </span>
@@ -145,7 +145,7 @@ exports[`With popover opened 1`] = `
                       aria-expanded="false"
                       aria-haspopup="menu"
                       class="pf-v6-c-menu-toggle"
-                      data-ouia-component-id="OUIA-Generated-MenuToggle-:r18:"
+                      data-ouia-component-id="OUIA-Generated-MenuToggle-_r_18_"
                       data-ouia-component-type="PF6/MenuToggle"
                       data-ouia-safe="true"
                       style="width: 140px;"
@@ -154,7 +154,7 @@ exports[`With popover opened 1`] = `
                       <span
                         class="pf-v6-c-menu-toggle__text"
                       >
-                        March
+                        März
                       </span>
                       <span
                         class="pf-v6-c-menu-toggle__controls"
@@ -192,7 +192,7 @@ exports[`With popover opened 1`] = `
                       <input
                         aria-invalid="false"
                         aria-label="Select year"
-                        data-ouia-component-id="OUIA-Generated-TextInputBase-:r1a:"
+                        data-ouia-component-id="OUIA-Generated-TextInputBase-_r_1a_"
                         data-ouia-component-type="PF6/TextInput"
                         data-ouia-safe="true"
                         type="number"
@@ -208,7 +208,7 @@ exports[`With popover opened 1`] = `
                 <button
                   aria-label="Next month"
                   class="pf-v6-c-button pf-m-plain"
-                  data-ouia-component-id="OUIA-Generated-Button-plain-:r1b:"
+                  data-ouia-component-id="OUIA-Generated-Button-plain-_r_1b_"
                   data-ouia-component-type="PF6/Button"
                   data-ouia-safe="true"
                   type="button"
@@ -247,7 +247,7 @@ exports[`With popover opened 1`] = `
                     <span
                       class="pf-v6-screen-reader"
                     >
-                      Sunday
+                      Sonntag
                     </span>
                     <span
                       aria-hidden="true"
@@ -262,7 +262,7 @@ exports[`With popover opened 1`] = `
                     <span
                       class="pf-v6-screen-reader"
                     >
-                      Monday
+                      Montag
                     </span>
                     <span
                       aria-hidden="true"
@@ -277,12 +277,12 @@ exports[`With popover opened 1`] = `
                     <span
                       class="pf-v6-screen-reader"
                     >
-                      Tuesday
+                      Dienstag
                     </span>
                     <span
                       aria-hidden="true"
                     >
-                      T
+                      D
                     </span>
                   </th>
                   <th
@@ -292,12 +292,12 @@ exports[`With popover opened 1`] = `
                     <span
                       class="pf-v6-screen-reader"
                     >
-                      Wednesday
+                      Mittwoch
                     </span>
                     <span
                       aria-hidden="true"
                     >
-                      W
+                      M
                     </span>
                   </th>
                   <th
@@ -307,12 +307,12 @@ exports[`With popover opened 1`] = `
                     <span
                       class="pf-v6-screen-reader"
                     >
-                      Thursday
+                      Donnerstag
                     </span>
                     <span
                       aria-hidden="true"
                     >
-                      T
+                      D
                     </span>
                   </th>
                   <th
@@ -322,7 +322,7 @@ exports[`With popover opened 1`] = `
                     <span
                       class="pf-v6-screen-reader"
                     >
-                      Friday
+                      Freitag
                     </span>
                     <span
                       aria-hidden="true"
@@ -337,7 +337,7 @@ exports[`With popover opened 1`] = `
                     <span
                       class="pf-v6-screen-reader"
                     >
-                      Saturday
+                      Samstag
                     </span>
                     <span
                       aria-hidden="true"
@@ -355,7 +355,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="1 March 2020"
+                      aria-label="1 März 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -367,7 +367,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="2 March 2020"
+                      aria-label="2 März 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -379,7 +379,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="3 March 2020"
+                      aria-label="3 März 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -391,7 +391,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="4 March 2020"
+                      aria-label="4 März 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -403,7 +403,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="5 March 2020"
+                      aria-label="5 März 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -415,7 +415,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="6 March 2020"
+                      aria-label="6 März 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -427,7 +427,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="7 March 2020"
+                      aria-label="7 März 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -443,7 +443,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="8 March 2020"
+                      aria-label="8 März 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -455,7 +455,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="9 March 2020"
+                      aria-label="9 März 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -467,7 +467,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="10 March 2020"
+                      aria-label="10 März 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -479,7 +479,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="11 March 2020"
+                      aria-label="11 März 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -491,7 +491,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="12 March 2020"
+                      aria-label="12 März 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -503,7 +503,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="13 March 2020"
+                      aria-label="13 März 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -515,7 +515,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="14 March 2020"
+                      aria-label="14 März 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -531,7 +531,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="15 March 2020"
+                      aria-label="15 März 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -543,7 +543,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="16 March 2020"
+                      aria-label="16 März 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -555,7 +555,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell pf-m-selected"
                   >
                     <button
-                      aria-label="17 March 2020"
+                      aria-label="17 März 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="0"
                       type="button"
@@ -567,7 +567,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="18 March 2020"
+                      aria-label="18 März 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -579,7 +579,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="19 March 2020"
+                      aria-label="19 März 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -591,7 +591,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="20 March 2020"
+                      aria-label="20 März 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -603,7 +603,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="21 March 2020"
+                      aria-label="21 März 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -619,7 +619,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="22 March 2020"
+                      aria-label="22 März 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -631,7 +631,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="23 March 2020"
+                      aria-label="23 März 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -643,7 +643,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="24 March 2020"
+                      aria-label="24 März 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -655,7 +655,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="25 March 2020"
+                      aria-label="25 März 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -667,7 +667,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="26 March 2020"
+                      aria-label="26 März 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -679,7 +679,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="27 March 2020"
+                      aria-label="27 März 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -691,7 +691,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="28 March 2020"
+                      aria-label="28 März 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -707,7 +707,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="29 March 2020"
+                      aria-label="29 März 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -719,7 +719,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="30 March 2020"
+                      aria-label="30 März 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -731,7 +731,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="31 March 2020"
+                      aria-label="31 März 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -819,7 +819,7 @@ exports[`disabled date picker 1`] = `
             <input
               aria-invalid="false"
               aria-label="disabled date picker"
-              data-ouia-component-id="OUIA-Generated-TextInputBase-:r3:"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-_r_3_"
               data-ouia-component-type="PF6/TextInput"
               data-ouia-safe="true"
               disabled=""
@@ -836,7 +836,7 @@ exports[`disabled date picker 1`] = `
             aria-haspopup="dialog"
             aria-label="Toggle date picker"
             class="pf-v6-c-button pf-m-control"
-            data-ouia-component-id="OUIA-Generated-Button-control-:r4:"
+            data-ouia-component-id="OUIA-Generated-Button-control-_r_4_"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             disabled=""
diff --git a/packages/react-core/src/components/Drawer/__tests__/Generated/__snapshots__/DrawerPanelContent.test.tsx.snap b/packages/react-core/src/components/Drawer/__tests__/Generated/__snapshots__/DrawerPanelContent.test.tsx.snap
index 9c0d67ba622..9eb1696addd 100644
--- a/packages/react-core/src/components/Drawer/__tests__/Generated/__snapshots__/DrawerPanelContent.test.tsx.snap
+++ b/packages/react-core/src/components/Drawer/__tests__/Generated/__snapshots__/DrawerPanelContent.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`DrawerPanelContent should match snapshot (auto-generated) 1`] = `
   <div
     class="pf-v6-c-drawer__panel ''"
     hidden=""
-    id="pf-drawer-panel-:r0:"
+    id="pf-drawer-panel-_r_0_"
     inert=""
   />
 </DocumentFragment>
diff --git a/packages/react-core/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap b/packages/react-core/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
index 94616ec5619..f2ae7e29b7d 100644
--- a/packages/react-core/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
+++ b/packages/react-core/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Drawer expands from bottom 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-drawer pf-m-expanded pf-m-panel-bottom"
-    data-ouia-component-id="OUIA-Generated-Drawer-:rd:"
+    data-ouia-component-id="OUIA-Generated-Drawer-_r_d_"
     data-ouia-component-type="PF6/Drawer"
     data-ouia-safe="true"
   >
@@ -22,7 +22,7 @@ exports[`Drawer expands from bottom 1`] = `
       </div>
       <div
         class="pf-v6-c-drawer__panel"
-        id="pf-drawer-panel-:re:"
+        id="pf-drawer-panel-_r_e_"
       >
         <div
           class="pf-v6-c-drawer__head"
@@ -39,7 +39,7 @@ exports[`Drawer expands from bottom 1`] = `
               <button
                 aria-label="Close drawer panel"
                 class="pf-v6-c-button pf-m-plain"
-                data-ouia-component-id="OUIA-Generated-Button-plain-:rf:"
+                data-ouia-component-id="OUIA-Generated-Button-plain-_r_f_"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"
@@ -80,7 +80,7 @@ exports[`Drawer has resizable callback and id 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-drawer pf-m-expanded pf-m-panel-left"
-    data-ouia-component-id="OUIA-Generated-Drawer-:rj:"
+    data-ouia-component-id="OUIA-Generated-Drawer-_r_j_"
     data-ouia-component-type="PF6/Drawer"
     data-ouia-safe="true"
   >
@@ -134,7 +134,7 @@ exports[`Drawer has resizable callback and id 1`] = `
                 <button
                   aria-label="Close drawer panel"
                   class="pf-v6-c-button pf-m-plain"
-                  data-ouia-component-id="OUIA-Generated-Button-plain-:rl:"
+                  data-ouia-component-id="OUIA-Generated-Button-plain-_r_l_"
                   data-ouia-component-type="PF6/Button"
                   data-ouia-safe="true"
                   type="button"
@@ -176,7 +176,7 @@ exports[`Drawer has resizable css and color variants 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-drawer pf-m-expanded pf-m-panel-left"
-    data-ouia-component-id="OUIA-Generated-Drawer-:rg:"
+    data-ouia-component-id="OUIA-Generated-Drawer-_r_g_"
     data-ouia-component-type="PF6/Drawer"
     data-ouia-safe="true"
   >
@@ -194,11 +194,11 @@ exports[`Drawer has resizable css and color variants 1`] = `
       </div>
       <div
         class="pf-v6-c-drawer__panel pf-m-resizable pf-m-secondary"
-        id="pf-drawer-panel-:rh:"
+        id="pf-drawer-panel-_r_h_"
         style="--pf-v6-c-drawer__panel--md--FlexBasis: 300px; --pf-v6-c-drawer__panel--md--FlexBasis--min: 200px; --pf-v6-c-drawer__panel--md--FlexBasis--max: 400px;"
       >
         <div
-          aria-controls="pf-drawer-panel-:rh:"
+          aria-controls="pf-drawer-panel-_r_h_"
           aria-label="Resize"
           aria-orientation="vertical"
           aria-valuemax="100"
@@ -231,7 +231,7 @@ exports[`Drawer has resizable css and color variants 1`] = `
                 <button
                   aria-label="Close drawer panel"
                   class="pf-v6-c-button pf-m-plain"
-                  data-ouia-component-id="OUIA-Generated-Button-plain-:ri:"
+                  data-ouia-component-id="OUIA-Generated-Button-plain-_r_i_"
                   data-ouia-component-type="PF6/Button"
                   data-ouia-safe="true"
                   type="button"
@@ -292,7 +292,7 @@ exports[`Drawer isExpanded = false and isInline = false and isStatic = false 1`]
       <div
         class="pf-v6-c-drawer__panel"
         hidden=""
-        id="pf-drawer-panel-:r4:"
+        id="pf-drawer-panel-_r_4_"
         inert=""
       />
     </div>
@@ -323,7 +323,7 @@ exports[`Drawer isExpanded = false and isInline = true and isStatic = false 1`]
       <div
         class="pf-v6-c-drawer__panel"
         hidden=""
-        id="pf-drawer-panel-:r9:"
+        id="pf-drawer-panel-_r_9_"
         inert=""
       />
     </div>
@@ -353,7 +353,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`]
       </div>
       <div
         class="pf-v6-c-drawer__panel"
-        id="pf-drawer-panel-:r1:"
+        id="pf-drawer-panel-_r_1_"
       >
         <div
           class="pf-v6-c-drawer__head"
@@ -370,7 +370,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`]
               <button
                 aria-label="Close drawer panel"
                 class="pf-v6-c-button pf-m-plain"
-                data-ouia-component-id="OUIA-Generated-Button-plain-:r2:"
+                data-ouia-component-id="OUIA-Generated-Button-plain-_r_2_"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"
@@ -429,7 +429,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] =
       </div>
       <div
         class="pf-v6-c-drawer__panel"
-        id="pf-drawer-panel-:rb:"
+        id="pf-drawer-panel-_r_b_"
       >
         <div
           class="pf-v6-c-drawer__head"
@@ -446,7 +446,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] =
               <button
                 aria-label="Close drawer panel"
                 class="pf-v6-c-button pf-m-plain"
-                data-ouia-component-id="OUIA-Generated-Button-plain-:rc:"
+                data-ouia-component-id="OUIA-Generated-Button-plain-_r_c_"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"
@@ -505,7 +505,7 @@ exports[`Drawer isExpanded = true and isInline = true and isStatic = false 1`] =
       </div>
       <div
         class="pf-v6-c-drawer__panel"
-        id="pf-drawer-panel-:r6:"
+        id="pf-drawer-panel-_r_6_"
       >
         <div
           class="pf-v6-c-drawer__head"
@@ -522,7 +522,7 @@ exports[`Drawer isExpanded = true and isInline = true and isStatic = false 1`] =
               <button
                 aria-label="Close drawer panel"
                 class="pf-v6-c-button pf-m-plain"
-                data-ouia-component-id="OUIA-Generated-Button-plain-:r7:"
+                data-ouia-component-id="OUIA-Generated-Button-plain-_r_7_"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"
diff --git a/packages/react-core/src/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap b/packages/react-core/src/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap
index 54aa64d71a9..7aac8d57e7e 100644
--- a/packages/react-core/src/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap
+++ b/packages/react-core/src/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap
@@ -129,7 +129,7 @@ exports[`Matches snapshot 1`] = `
     data-ouia-component-type="PF6/DualListSelector"
     data-ouia-safe="true"
     data-testid="test-id"
-    id="pf-:re:"
+    id="pf-_r_e_"
   />
 </DocumentFragment>
 `;
diff --git a/packages/react-core/src/components/EmptyState/__tests__/__snapshots__/EmptyState.test.tsx.snap b/packages/react-core/src/components/EmptyState/__tests__/__snapshots__/EmptyState.test.tsx.snap
index 68a1da19621..1a5e81f72d9 100644
--- a/packages/react-core/src/components/EmptyState/__tests__/__snapshots__/EmptyState.test.tsx.snap
+++ b/packages/react-core/src/components/EmptyState/__tests__/__snapshots__/EmptyState.test.tsx.snap
@@ -95,7 +95,7 @@ exports[`EmptyState Main 1`] = `
         >
           <button
             class="pf-v6-c-button pf-m-primary"
-            data-ouia-component-id="OUIA-Generated-Button-primary-:r0:"
+            data-ouia-component-id="OUIA-Generated-Button-primary-_r_0_"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -113,7 +113,7 @@ exports[`EmptyState Main 1`] = `
           <button
             aria-label="learn more action"
             class="pf-v6-c-button pf-m-link"
-            data-ouia-component-id="OUIA-Generated-Button-link-:r1:"
+            data-ouia-component-id="OUIA-Generated-Button-link-_r_1_"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
diff --git a/packages/react-core/src/components/ExpandableSection/__tests__/__snapshots__/ExpandableSection.test.tsx.snap b/packages/react-core/src/components/ExpandableSection/__tests__/__snapshots__/ExpandableSection.test.tsx.snap
index 1225988eca1..588407adddc 100644
--- a/packages/react-core/src/components/ExpandableSection/__tests__/__snapshots__/ExpandableSection.test.tsx.snap
+++ b/packages/react-core/src/components/ExpandableSection/__tests__/__snapshots__/ExpandableSection.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`Disclosure ExpandableSection 1`] = `
       <button
         aria-controls="content-id"
         class="pf-v6-c-button pf-m-link"
-        data-ouia-component-id="OUIA-Generated-Button-link-:rh:"
+        data-ouia-component-id="OUIA-Generated-Button-link-_r_h_"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         id="toggle-id"
@@ -69,7 +69,7 @@ exports[`ExpandableSection 1`] = `
       <button
         aria-controls="content-id"
         class="pf-v6-c-button pf-m-link"
-        data-ouia-component-id="OUIA-Generated-Button-link-:r2:"
+        data-ouia-component-id="OUIA-Generated-Button-link-_r_2_"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         id="toggle-id"
@@ -125,7 +125,7 @@ exports[`Renders ExpandableSection expanded 1`] = `
         aria-controls="content-id"
         aria-expanded="true"
         class="pf-v6-c-button pf-m-link"
-        data-ouia-component-id="OUIA-Generated-Button-link-:r5:"
+        data-ouia-component-id="OUIA-Generated-Button-link-_r_5_"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         id="toggle-id"
@@ -180,7 +180,7 @@ exports[`Renders ExpandableSection indented 1`] = `
         aria-controls="content-id"
         aria-expanded="true"
         class="pf-v6-c-button pf-m-link"
-        data-ouia-component-id="OUIA-Generated-Button-link-:rk:"
+        data-ouia-component-id="OUIA-Generated-Button-link-_r_k_"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         id="toggle-id"
@@ -234,7 +234,7 @@ exports[`Renders Uncontrolled ExpandableSection 1`] = `
       <button
         aria-controls="content-id"
         class="pf-v6-c-button pf-m-link"
-        data-ouia-component-id="OUIA-Generated-Button-link-:re:"
+        data-ouia-component-id="OUIA-Generated-Button-link-_r_e_"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         id="toggle-id"
diff --git a/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap b/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap
index 0e553eccf3f..ae67c8e8177 100644
--- a/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap
+++ b/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap
@@ -21,7 +21,7 @@ exports[`simple fileupload 1`] = `
             <input
               aria-invalid="false"
               aria-label="Drag a file here or browse to upload"
-              data-ouia-component-id="OUIA-Generated-TextInputBase-:r1:"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-_r_1_"
               data-ouia-component-type="PF6/TextInput"
               data-ouia-safe="true"
               id="simple-text-file-filename"
@@ -38,7 +38,7 @@ exports[`simple fileupload 1`] = `
         >
           <button
             class="pf-v6-c-button pf-m-control"
-            data-ouia-component-id="OUIA-Generated-Button-control-:r2:"
+            data-ouia-component-id="OUIA-Generated-Button-control-_r_2_"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -55,7 +55,7 @@ exports[`simple fileupload 1`] = `
         >
           <button
             class="pf-v6-c-button pf-m-control"
-            data-ouia-component-id="OUIA-Generated-Button-control-:r3:"
+            data-ouia-component-id="OUIA-Generated-Button-control-_r_3_"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             disabled=""
diff --git a/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap b/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap
index 0a3ca4b8c22..dedc3ebd01d 100644
--- a/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap
+++ b/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`simple fileuploadfield 1`] = `
             <input
               aria-invalid="false"
               aria-label="Do something custom with this!"
-              data-ouia-component-id="OUIA-Generated-TextInputBase-:r1:"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-_r_1_"
               data-ouia-component-type="PF6/TextInput"
               data-ouia-safe="true"
               id="custom-file-upload-filename"
@@ -37,7 +37,7 @@ exports[`simple fileuploadfield 1`] = `
         >
           <button
             class="pf-v6-c-button pf-m-control"
-            data-ouia-component-id="OUIA-Generated-Button-control-:r2:"
+            data-ouia-component-id="OUIA-Generated-Button-control-_r_2_"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -54,7 +54,7 @@ exports[`simple fileuploadfield 1`] = `
         >
           <button
             class="pf-v6-c-button pf-m-control"
-            data-ouia-component-id="OUIA-Generated-Button-control-:r3:"
+            data-ouia-component-id="OUIA-Generated-Button-control-_r_3_"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
diff --git a/packages/react-core/src/components/Form/__tests__/__snapshots__/ActionGroup.test.tsx.snap b/packages/react-core/src/components/Form/__tests__/__snapshots__/ActionGroup.test.tsx.snap
index 39e1455c0a4..734e531d133 100644
--- a/packages/react-core/src/components/Form/__tests__/__snapshots__/ActionGroup.test.tsx.snap
+++ b/packages/react-core/src/components/Form/__tests__/__snapshots__/ActionGroup.test.tsx.snap
@@ -24,7 +24,7 @@ exports[`ActionGroup component should render horizontal form ActionGroup variant
 <DocumentFragment>
   <form
     class="pf-v6-c-form pf-m-horizontal"
-    data-ouia-component-id="OUIA-Generated-Form-:r0:"
+    data-ouia-component-id="OUIA-Generated-Form-_r_0_"
     data-ouia-component-type="PF6/Form"
     data-ouia-safe="true"
     novalidate=""
diff --git a/packages/react-core/src/components/Form/__tests__/__snapshots__/Form.test.tsx.snap b/packages/react-core/src/components/Form/__tests__/__snapshots__/Form.test.tsx.snap
index 6e3d5b0f859..8124a00eec0 100644
--- a/packages/react-core/src/components/Form/__tests__/__snapshots__/Form.test.tsx.snap
+++ b/packages/react-core/src/components/Form/__tests__/__snapshots__/Form.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Form component should render default form variant 1`] = `
 <DocumentFragment>
   <form
     class="pf-v6-c-form"
-    data-ouia-component-id="OUIA-Generated-Form-:r0:"
+    data-ouia-component-id="OUIA-Generated-Form-_r_0_"
     data-ouia-component-type="PF6/Form"
     data-ouia-safe="true"
     novalidate=""
@@ -16,7 +16,7 @@ exports[`Form component should render form with limited width 1`] = `
 <DocumentFragment>
   <form
     class="pf-v6-c-form pf-m-limit-width"
-    data-ouia-component-id="OUIA-Generated-Form-:r2:"
+    data-ouia-component-id="OUIA-Generated-Form-_r_2_"
     data-ouia-component-type="PF6/Form"
     data-ouia-safe="true"
     novalidate=""
@@ -28,7 +28,7 @@ exports[`Form component should render horizontal form variant 1`] = `
 <DocumentFragment>
   <form
     class="pf-v6-c-form pf-m-horizontal"
-    data-ouia-component-id="OUIA-Generated-Form-:r1:"
+    data-ouia-component-id="OUIA-Generated-Form-_r_1_"
     data-ouia-component-type="PF6/Form"
     data-ouia-safe="true"
     novalidate=""
diff --git a/packages/react-core/src/components/Form/__tests__/__snapshots__/FormFieldGroup.test.tsx.snap b/packages/react-core/src/components/Form/__tests__/__snapshots__/FormFieldGroup.test.tsx.snap
index 8be9e616530..40f504699bf 100644
--- a/packages/react-core/src/components/Form/__tests__/__snapshots__/FormFieldGroup.test.tsx.snap
+++ b/packages/react-core/src/components/Form/__tests__/__snapshots__/FormFieldGroup.test.tsx.snap
@@ -16,12 +16,12 @@ exports[`Check expandable form field group example against snapshot 1`] = `
         <button
           aria-expanded="true"
           aria-label="toggle"
-          aria-labelledby="title-text-id2 form-field-group-toggle:r2:"
+          aria-labelledby="title-text-id2 form-field-group-toggle_r_2_"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r3:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_3_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
-          id="form-field-group-toggle:r2:"
+          id="form-field-group-toggle_r_2_"
           type="button"
         >
           <span
@@ -75,7 +75,7 @@ exports[`Check expandable form field group example against snapshot 1`] = `
       >
         <button
           class="pf-v6-c-button pf-m-primary"
-          data-ouia-component-id="OUIA-Generated-Button-primary-:r4:"
+          data-ouia-component-id="OUIA-Generated-Button-primary-_r_4_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -123,7 +123,7 @@ exports[`Check form field group example against snapshot 1`] = `
       >
         <button
           class="pf-v6-c-button pf-m-primary"
-          data-ouia-component-id="OUIA-Generated-Button-primary-:r1:"
+          data-ouia-component-id="OUIA-Generated-Button-primary-_r_1_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
diff --git a/packages/react-core/src/components/Form/__tests__/__snapshots__/FormGroup.test.tsx.snap b/packages/react-core/src/components/Form/__tests__/__snapshots__/FormGroup.test.tsx.snap
index 963cdc3e163..78b3d84b85a 100644
--- a/packages/react-core/src/components/Form/__tests__/__snapshots__/FormGroup.test.tsx.snap
+++ b/packages/react-core/src/components/Form/__tests__/__snapshots__/FormGroup.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`FormGroup should render correctly when label is not a string with Child
 <DocumentFragment>
   <div
     class="pf-v6-c-form__group"
-    data-ouia-component-id="OUIA-Generated-FormGroup-:ro:"
+    data-ouia-component-id="OUIA-Generated-FormGroup-_r_o_"
     data-ouia-component-type="PF6/FormGroup"
     data-ouia-safe="true"
   >
@@ -44,7 +44,7 @@ exports[`FormGroup should render default form group variant 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-form__group"
-    data-ouia-component-id="OUIA-Generated-FormGroup-:r0:"
+    data-ouia-component-id="OUIA-Generated-FormGroup-_r_0_"
     data-ouia-component-type="PF6/FormGroup"
     data-ouia-safe="true"
   >
@@ -78,7 +78,7 @@ exports[`FormGroup should render form group variant with node label 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-form__group"
-    data-ouia-component-id="OUIA-Generated-FormGroup-:ra:"
+    data-ouia-component-id="OUIA-Generated-FormGroup-_r_a_"
     data-ouia-component-type="PF6/FormGroup"
     data-ouia-safe="true"
   >
@@ -114,7 +114,7 @@ exports[`FormGroup should render form group variant with required label 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-form__group"
-    data-ouia-component-id="OUIA-Generated-FormGroup-:r8:"
+    data-ouia-component-id="OUIA-Generated-FormGroup-_r_8_"
     data-ouia-component-type="PF6/FormGroup"
     data-ouia-safe="true"
   >
@@ -154,7 +154,7 @@ exports[`FormGroup should render form group variant without label 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-form__group"
-    data-ouia-component-id="OUIA-Generated-FormGroup-:rm:"
+    data-ouia-component-id="OUIA-Generated-FormGroup-_r_m_"
     data-ouia-component-type="PF6/FormGroup"
     data-ouia-safe="true"
   >
@@ -173,7 +173,7 @@ exports[`FormGroup should render form group with additional label info 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-form__group"
-    data-ouia-component-id="OUIA-Generated-FormGroup-:rc:"
+    data-ouia-component-id="OUIA-Generated-FormGroup-_r_c_"
     data-ouia-component-type="PF6/FormGroup"
     data-ouia-safe="true"
   >
@@ -218,14 +218,14 @@ exports[`FormGroup should render horizontal form group variant 1`] = `
 <DocumentFragment>
   <form
     class="pf-v6-c-form pf-m-horizontal"
-    data-ouia-component-id="OUIA-Generated-Form-:rg:"
+    data-ouia-component-id="OUIA-Generated-Form-_r_g_"
     data-ouia-component-type="PF6/Form"
     data-ouia-safe="true"
     novalidate=""
   >
     <div
       class="pf-v6-c-form__group"
-      data-ouia-component-id="OUIA-Generated-FormGroup-:rh:"
+      data-ouia-component-id="OUIA-Generated-FormGroup-_r_h_"
       data-ouia-component-type="PF6/FormGroup"
       data-ouia-safe="true"
     >
@@ -260,14 +260,14 @@ exports[`FormGroup should render stacked horizontal form group variant 1`] = `
 <DocumentFragment>
   <form
     class="pf-v6-c-form pf-m-horizontal"
-    data-ouia-component-id="OUIA-Generated-Form-:rj:"
+    data-ouia-component-id="OUIA-Generated-Form-_r_j_"
     data-ouia-component-type="PF6/Form"
     data-ouia-safe="true"
     novalidate=""
   >
     <div
       class="pf-v6-c-form__group"
-      data-ouia-component-id="OUIA-Generated-FormGroup-:rk:"
+      data-ouia-component-id="OUIA-Generated-FormGroup-_r_k_"
       data-ouia-component-type="PF6/FormGroup"
       data-ouia-safe="true"
     >
diff --git a/packages/react-core/src/components/FormSelect/__tests__/__snapshots__/FormSelect.test.tsx.snap b/packages/react-core/src/components/FormSelect/__tests__/__snapshots__/FormSelect.test.tsx.snap
index 1706ddc5703..d18b58f34a7 100644
--- a/packages/react-core/src/components/FormSelect/__tests__/__snapshots__/FormSelect.test.tsx.snap
+++ b/packages/react-core/src/components/FormSelect/__tests__/__snapshots__/FormSelect.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`FormSelect Disabled FormSelect input  1`] = `
     <select
       aria-invalid="false"
       aria-label="disabled FormSelect"
-      data-ouia-component-id="OUIA-Generated-FormSelect-:r5:"
+      data-ouia-component-id="OUIA-Generated-FormSelect-_r_5_"
       data-ouia-component-type="PF6/FormSelect"
       data-ouia-safe="true"
       disabled=""
@@ -53,7 +53,7 @@ exports[`FormSelect FormSelect input with aria-label does not generate console e
     <select
       aria-invalid="false"
       aria-label="label"
-      data-ouia-component-id="OUIA-Generated-FormSelect-:r7:"
+      data-ouia-component-id="OUIA-Generated-FormSelect-_r_7_"
       data-ouia-component-type="PF6/FormSelect"
       data-ouia-safe="true"
     >
@@ -97,7 +97,7 @@ exports[`FormSelect FormSelect input with id does not generate console error 1`]
     <select
       aria-invalid="false"
       aria-label="label"
-      data-ouia-component-id="OUIA-Generated-FormSelect-:r9:"
+      data-ouia-component-id="OUIA-Generated-FormSelect-_r_9_"
       data-ouia-component-type="PF6/FormSelect"
       data-ouia-safe="true"
       id="id"
@@ -141,7 +141,7 @@ exports[`FormSelect FormSelect input with no aria-label or id generates console
   >
     <select
       aria-invalid="false"
-      data-ouia-component-id="OUIA-Generated-FormSelect-:rb:"
+      data-ouia-component-id="OUIA-Generated-FormSelect-_r_b_"
       data-ouia-component-type="PF6/FormSelect"
       data-ouia-safe="true"
     >
@@ -185,7 +185,7 @@ exports[`FormSelect Grouped FormSelect input 1`] = `
     <select
       aria-invalid="false"
       aria-label="grouped FormSelect"
-      data-ouia-component-id="OUIA-Generated-FormSelect-:r3:"
+      data-ouia-component-id="OUIA-Generated-FormSelect-_r_3_"
       data-ouia-component-type="PF6/FormSelect"
       data-ouia-safe="true"
     >
@@ -275,7 +275,7 @@ exports[`FormSelect Simple FormSelect input 1`] = `
     <select
       aria-invalid="false"
       aria-label="simple FormSelect"
-      data-ouia-component-id="OUIA-Generated-FormSelect-:r1:"
+      data-ouia-component-id="OUIA-Generated-FormSelect-_r_1_"
       data-ouia-component-type="PF6/FormSelect"
       data-ouia-safe="true"
     >
@@ -357,7 +357,7 @@ exports[`FormSelect invalid FormSelect input 1`] = `
     <select
       aria-invalid="true"
       aria-label="invalid FormSelect"
-      data-ouia-component-id="OUIA-Generated-FormSelect-:rd:"
+      data-ouia-component-id="OUIA-Generated-FormSelect-_r_d_"
       data-ouia-component-type="PF6/FormSelect"
       data-ouia-safe="true"
     >
@@ -418,7 +418,7 @@ exports[`FormSelect validated success FormSelect input 1`] = `
     <select
       aria-invalid="false"
       aria-label="validated FormSelect"
-      data-ouia-component-id="OUIA-Generated-FormSelect-:rf:"
+      data-ouia-component-id="OUIA-Generated-FormSelect-_r_f_"
       data-ouia-component-type="PF6/FormSelect"
       data-ouia-safe="true"
     >
@@ -479,7 +479,7 @@ exports[`FormSelect validated warning FormSelect input 1`] = `
     <select
       aria-invalid="false"
       aria-label="validated FormSelect"
-      data-ouia-component-id="OUIA-Generated-FormSelect-:rh:"
+      data-ouia-component-id="OUIA-Generated-FormSelect-_r_h_"
       data-ouia-component-type="PF6/FormSelect"
       data-ouia-safe="true"
     >
diff --git a/packages/react-core/src/components/JumpLinks/__tests__/__snapshots__/JumpLinks.test.tsx.snap b/packages/react-core/src/components/JumpLinks/__tests__/__snapshots__/JumpLinks.test.tsx.snap
index b51b59168f0..e85c6616608 100644
--- a/packages/react-core/src/components/JumpLinks/__tests__/__snapshots__/JumpLinks.test.tsx.snap
+++ b/packages/react-core/src/components/JumpLinks/__tests__/__snapshots__/JumpLinks.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`expandable vertical with subsection 1`] = `
 <DocumentFragment>
   <nav
-    aria-labelledby="pf-:rg:"
+    aria-labelledby="pf-_r_g_"
     class="pf-v6-c-jump-links pf-m-vertical pf-m-expandable"
   >
     <div
@@ -18,10 +18,10 @@ exports[`expandable vertical with subsection 1`] = `
           <button
             aria-expanded="false"
             class="pf-v6-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-:rh:"
+            data-ouia-component-id="OUIA-Generated-Button-plain-_r_h_"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
-            id="pf-:rg:"
+            id="pf-_r_g_"
             type="button"
           >
             <span
@@ -54,7 +54,7 @@ exports[`expandable vertical with subsection 1`] = `
         </div>
       </div>
       <ul
-        aria-labelledby="pf-:rg:"
+        aria-labelledby="pf-_r_g_"
         class="pf-v6-c-jump-links__list"
         role="list"
       >
@@ -66,7 +66,7 @@ exports[`expandable vertical with subsection 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-:ri:"
+              data-ouia-component-id="OUIA-Generated-Button-link-_r_i_"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -91,7 +91,7 @@ exports[`expandable vertical with subsection 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-:rj:"
+              data-ouia-component-id="OUIA-Generated-Button-link-_r_j_"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -120,7 +120,7 @@ exports[`expandable vertical with subsection 1`] = `
               >
                 <a
                   class="pf-v6-c-button pf-m-link"
-                  data-ouia-component-id="OUIA-Generated-Button-link-:rk:"
+                  data-ouia-component-id="OUIA-Generated-Button-link-_r_k_"
                   data-ouia-component-type="PF6/Button"
                   data-ouia-safe="true"
                   href="#"
@@ -145,7 +145,7 @@ exports[`expandable vertical with subsection 1`] = `
               >
                 <a
                   class="pf-v6-c-button pf-m-link"
-                  data-ouia-component-id="OUIA-Generated-Button-link-:rl:"
+                  data-ouia-component-id="OUIA-Generated-Button-link-_r_l_"
                   data-ouia-component-type="PF6/Button"
                   data-ouia-safe="true"
                   href="#"
@@ -170,7 +170,7 @@ exports[`expandable vertical with subsection 1`] = `
               >
                 <a
                   class="pf-v6-c-button pf-m-link"
-                  data-ouia-component-id="OUIA-Generated-Button-link-:rm:"
+                  data-ouia-component-id="OUIA-Generated-Button-link-_r_m_"
                   data-ouia-component-type="PF6/Button"
                   data-ouia-safe="true"
                   href="#"
@@ -197,7 +197,7 @@ exports[`expandable vertical with subsection 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-:rn:"
+              data-ouia-component-id="OUIA-Generated-Button-link-_r_n_"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -222,7 +222,7 @@ exports[`expandable vertical with subsection 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-:ro:"
+              data-ouia-component-id="OUIA-Generated-Button-link-_r_o_"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -268,7 +268,7 @@ exports[`jumplinks centered 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-:r5:"
+              data-ouia-component-id="OUIA-Generated-Button-link-_r_5_"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -294,7 +294,7 @@ exports[`jumplinks centered 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-:r6:"
+              data-ouia-component-id="OUIA-Generated-Button-link-_r_6_"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -319,7 +319,7 @@ exports[`jumplinks centered 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-:r7:"
+              data-ouia-component-id="OUIA-Generated-Button-link-_r_7_"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -345,7 +345,7 @@ exports[`jumplinks centered 1`] = `
 exports[`jumplinks with label 1`] = `
 <DocumentFragment>
   <nav
-    aria-labelledby="pf-:r8:"
+    aria-labelledby="pf-_r_8_"
     class="pf-v6-c-jump-links pf-m-center"
   >
     <div
@@ -356,13 +356,13 @@ exports[`jumplinks with label 1`] = `
       >
         <div
           class="pf-v6-c-jump-links__label"
-          id="pf-:r8:"
+          id="pf-_r_8_"
         >
           Jump to section
         </div>
       </div>
       <ul
-        aria-labelledby="pf-:r8:"
+        aria-labelledby="pf-_r_8_"
         class="pf-v6-c-jump-links__list"
         role="list"
       >
@@ -374,7 +374,7 @@ exports[`jumplinks with label 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-:r9:"
+              data-ouia-component-id="OUIA-Generated-Button-link-_r_9_"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -400,7 +400,7 @@ exports[`jumplinks with label 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-:ra:"
+              data-ouia-component-id="OUIA-Generated-Button-link-_r_a_"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -425,7 +425,7 @@ exports[`jumplinks with label 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-:rb:"
+              data-ouia-component-id="OUIA-Generated-Button-link-_r_b_"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -471,7 +471,7 @@ exports[`simple jumplinks 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-:r1:"
+              data-ouia-component-id="OUIA-Generated-Button-link-_r_1_"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -497,7 +497,7 @@ exports[`simple jumplinks 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-:r2:"
+              data-ouia-component-id="OUIA-Generated-Button-link-_r_2_"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -522,7 +522,7 @@ exports[`simple jumplinks 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-:r3:"
+              data-ouia-component-id="OUIA-Generated-Button-link-_r_3_"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -548,7 +548,7 @@ exports[`simple jumplinks 1`] = `
 exports[`vertical with label 1`] = `
 <DocumentFragment>
   <nav
-    aria-labelledby="pf-:rc:"
+    aria-labelledby="pf-_r_c_"
     class="pf-v6-c-jump-links pf-m-vertical"
   >
     <div
@@ -559,13 +559,13 @@ exports[`vertical with label 1`] = `
       >
         <div
           class="pf-v6-c-jump-links__label"
-          id="pf-:rc:"
+          id="pf-_r_c_"
         >
           Jump to section
         </div>
       </div>
       <ul
-        aria-labelledby="pf-:rc:"
+        aria-labelledby="pf-_r_c_"
         class="pf-v6-c-jump-links__list"
         role="list"
       >
@@ -577,7 +577,7 @@ exports[`vertical with label 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-:rd:"
+              data-ouia-component-id="OUIA-Generated-Button-link-_r_d_"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -603,7 +603,7 @@ exports[`vertical with label 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-:re:"
+              data-ouia-component-id="OUIA-Generated-Button-link-_r_e_"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -628,7 +628,7 @@ exports[`vertical with label 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-:rf:"
+              data-ouia-component-id="OUIA-Generated-Button-link-_r_f_"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
diff --git a/packages/react-core/src/components/Label/__tests__/__snapshots__/Label.test.tsx.snap b/packages/react-core/src/components/Label/__tests__/__snapshots__/Label.test.tsx.snap
index 949765a0a10..e5a34eb3231 100644
--- a/packages/react-core/src/components/Label/__tests__/__snapshots__/Label.test.tsx.snap
+++ b/packages/react-core/src/components/Label/__tests__/__snapshots__/Label.test.tsx.snap
@@ -21,7 +21,7 @@ exports[`Label editable label 1`] = `
       <button
         aria-label="Close Something"
         class="pf-v6-c-button pf-m-plain pf-m-no-padding"
-        data-ouia-component-id="OUIA-Generated-Button-plain-:r2:"
+        data-ouia-component-id="OUIA-Generated-Button-plain-_r_2_"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -158,7 +158,7 @@ exports[`Label label with close button 1`] = `
       <button
         aria-label="Close Something"
         class="pf-v6-c-button pf-m-plain pf-m-no-padding"
-        data-ouia-component-id="OUIA-Generated-Button-plain-:r0:"
+        data-ouia-component-id="OUIA-Generated-Button-plain-_r_0_"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -206,7 +206,7 @@ exports[`Label label with close button and outline variant 1`] = `
       <button
         aria-label="Close Something"
         class="pf-v6-c-button pf-m-plain pf-m-no-padding"
-        data-ouia-component-id="OUIA-Generated-Button-plain-:r1:"
+        data-ouia-component-id="OUIA-Generated-Button-plain-_r_1_"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -380,10 +380,10 @@ exports[`Label label with orange color with outline variant 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Label label with purple color 1`] = `
+exports[`Label label with orangered color 1`] = `
 <DocumentFragment>
   <span
-    class="pf-v6-c-label pf-m-purple pf-m-filled"
+    class="pf-v6-c-label pf-m-orangered pf-m-filled"
   >
     <span
       class="pf-v6-c-label__content"
@@ -398,10 +398,10 @@ exports[`Label label with purple color 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Label label with purple color with outline variant 1`] = `
+exports[`Label label with orangered color with outline variant 1`] = `
 <DocumentFragment>
   <span
-    class="pf-v6-c-label pf-m-purple pf-m-outline"
+    class="pf-v6-c-label pf-m-orangered pf-m-outline"
   >
     <span
       class="pf-v6-c-label__content"
@@ -416,10 +416,10 @@ exports[`Label label with purple color with outline variant 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Label label with red color 1`] = `
+exports[`Label label with purple color 1`] = `
 <DocumentFragment>
   <span
-    class="pf-v6-c-label pf-m-red pf-m-filled"
+    class="pf-v6-c-label pf-m-purple pf-m-filled"
   >
     <span
       class="pf-v6-c-label__content"
@@ -434,10 +434,10 @@ exports[`Label label with red color 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Label label with red color with outline variant 1`] = `
+exports[`Label label with purple color with outline variant 1`] = `
 <DocumentFragment>
   <span
-    class="pf-v6-c-label pf-m-red pf-m-outline"
+    class="pf-v6-c-label pf-m-purple pf-m-outline"
   >
     <span
       class="pf-v6-c-label__content"
@@ -452,10 +452,10 @@ exports[`Label label with red color with outline variant 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Label label with orangered color 1`] = `
+exports[`Label label with red color 1`] = `
 <DocumentFragment>
   <span
-    class="pf-v6-c-label pf-m-orangered pf-m-filled"
+    class="pf-v6-c-label pf-m-red pf-m-filled"
   >
     <span
       class="pf-v6-c-label__content"
@@ -470,10 +470,10 @@ exports[`Label label with orangered color 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Label label with orangered color with outline variant 1`] = `
+exports[`Label label with red color with outline variant 1`] = `
 <DocumentFragment>
   <span
-    class="pf-v6-c-label pf-m-orangered pf-m-outline"
+    class="pf-v6-c-label pf-m-red pf-m-outline"
   >
     <span
       class="pf-v6-c-label__content"
diff --git a/packages/react-core/src/components/Label/__tests__/__snapshots__/LabelGroup.test.tsx.snap b/packages/react-core/src/components/Label/__tests__/__snapshots__/LabelGroup.test.tsx.snap
index df89d7ac90a..988811da562 100644
--- a/packages/react-core/src/components/Label/__tests__/__snapshots__/LabelGroup.test.tsx.snap
+++ b/packages/react-core/src/components/Label/__tests__/__snapshots__/LabelGroup.test.tsx.snap
@@ -256,7 +256,7 @@ exports[`LabelGroup label group with closable category 1`] = `
         aria-label="Close label group"
         aria-labelledby="remove_group_generated-id generated-id"
         class="pf-v6-c-button pf-m-plain pf-m-small"
-        data-ouia-component-id="OUIA-Generated-Button-plain-:r0:"
+        data-ouia-component-id="OUIA-Generated-Button-plain-_r_0_"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         id="remove_group_generated-id"
diff --git a/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginForm.test.tsx.snap b/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginForm.test.tsx.snap
index 9cf2c27823d..4ecf569e355 100644
--- a/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginForm.test.tsx.snap
+++ b/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginForm.test.tsx.snap
@@ -4,14 +4,14 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
 <DocumentFragment>
   <form
     class="pf-v6-c-form"
-    data-ouia-component-id="OUIA-Generated-Form-:r1s:"
+    data-ouia-component-id="OUIA-Generated-Form-_r_1s_"
     data-ouia-component-type="PF6/Form"
     data-ouia-safe="true"
     novalidate=""
   >
     <div
       class="pf-v6-c-form__group"
-      data-ouia-component-id="OUIA-Generated-FormGroup-:r1t:"
+      data-ouia-component-id="OUIA-Generated-FormGroup-_r_1t_"
       data-ouia-component-type="PF6/FormGroup"
       data-ouia-safe="true"
     >
@@ -44,7 +44,7 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
         >
           <input
             aria-invalid="false"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:r20:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-_r_20_"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             id="pf-login-username-id"
@@ -58,7 +58,7 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
     </div>
     <div
       class="pf-v6-c-form__group"
-      data-ouia-component-id="OUIA-Generated-FormGroup-:r21:"
+      data-ouia-component-id="OUIA-Generated-FormGroup-_r_21_"
       data-ouia-component-type="PF6/FormGroup"
       data-ouia-safe="true"
     >
@@ -91,7 +91,7 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
         >
           <input
             aria-invalid="false"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:r24:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-_r_24_"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             id="pf-login-password-id"
@@ -105,7 +105,7 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
     </div>
     <div
       class="pf-v6-c-form__group"
-      data-ouia-component-id="OUIA-Generated-FormGroup-:r25:"
+      data-ouia-component-id="OUIA-Generated-FormGroup-_r_25_"
       data-ouia-component-type="PF6/FormGroup"
       data-ouia-safe="true"
     >
@@ -118,7 +118,7 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
           <input
             aria-invalid="false"
             class="pf-v6-c-check__input"
-            data-ouia-component-id="OUIA-Generated-Checkbox-:r28:"
+            data-ouia-component-id="OUIA-Generated-Checkbox-_r_28_"
             data-ouia-component-type="PF6/Checkbox"
             data-ouia-safe="true"
             id="pf-login-remember-me-id"
@@ -135,7 +135,7 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
     </div>
     <div
       class="pf-v6-c-form__group pf-m-action"
-      data-ouia-component-id="OUIA-Generated-FormGroup-:r29:"
+      data-ouia-component-id="OUIA-Generated-FormGroup-_r_29_"
       data-ouia-component-type="PF6/FormGroup"
       data-ouia-safe="true"
     >
@@ -144,7 +144,7 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
       >
         <button
           class="pf-v6-c-button pf-m-primary pf-m-block"
-          data-ouia-component-id="OUIA-Generated-Button-primary-:r2b:"
+          data-ouia-component-id="OUIA-Generated-Button-primary-_r_2b_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="submit"
@@ -165,14 +165,14 @@ exports[`LoginForm LoginForm with show password 1`] = `
 <DocumentFragment>
   <form
     class="pf-v6-c-form"
-    data-ouia-component-id="OUIA-Generated-Form-:r2c:"
+    data-ouia-component-id="OUIA-Generated-Form-_r_2c_"
     data-ouia-component-type="PF6/Form"
     data-ouia-safe="true"
     novalidate=""
   >
     <div
       class="pf-v6-c-form__group"
-      data-ouia-component-id="OUIA-Generated-FormGroup-:r2d:"
+      data-ouia-component-id="OUIA-Generated-FormGroup-_r_2d_"
       data-ouia-component-type="PF6/FormGroup"
       data-ouia-safe="true"
     >
@@ -205,7 +205,7 @@ exports[`LoginForm LoginForm with show password 1`] = `
         >
           <input
             aria-invalid="false"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:r2g:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-_r_2g_"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             id="pf-login-username-id"
@@ -219,7 +219,7 @@ exports[`LoginForm LoginForm with show password 1`] = `
     </div>
     <div
       class="pf-v6-c-form__group"
-      data-ouia-component-id="OUIA-Generated-FormGroup-:r2h:"
+      data-ouia-component-id="OUIA-Generated-FormGroup-_r_2h_"
       data-ouia-component-type="PF6/FormGroup"
       data-ouia-safe="true"
     >
@@ -258,7 +258,7 @@ exports[`LoginForm LoginForm with show password 1`] = `
             >
               <input
                 aria-invalid="false"
-                data-ouia-component-id="OUIA-Generated-TextInputBase-:r2k:"
+                data-ouia-component-id="OUIA-Generated-TextInputBase-_r_2k_"
                 data-ouia-component-type="PF6/TextInput"
                 data-ouia-safe="true"
                 id="pf-login-password-id"
@@ -275,7 +275,7 @@ exports[`LoginForm LoginForm with show password 1`] = `
             <button
               aria-label="Show password"
               class="pf-v6-c-button pf-m-control"
-              data-ouia-component-id="OUIA-Generated-Button-control-:r2l:"
+              data-ouia-component-id="OUIA-Generated-Button-control-_r_2l_"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               type="button"
@@ -304,7 +304,7 @@ exports[`LoginForm LoginForm with show password 1`] = `
     </div>
     <div
       class="pf-v6-c-form__group pf-m-action"
-      data-ouia-component-id="OUIA-Generated-FormGroup-:r2m:"
+      data-ouia-component-id="OUIA-Generated-FormGroup-_r_2m_"
       data-ouia-component-type="PF6/FormGroup"
       data-ouia-safe="true"
     >
@@ -313,7 +313,7 @@ exports[`LoginForm LoginForm with show password 1`] = `
       >
         <button
           class="pf-v6-c-button pf-m-primary pf-m-block"
-          data-ouia-component-id="OUIA-Generated-Button-primary-:r2o:"
+          data-ouia-component-id="OUIA-Generated-Button-primary-_r_2o_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="submit"
@@ -334,14 +334,14 @@ exports[`LoginForm should render Login form 1`] = `
 <DocumentFragment>
   <form
     class="pf-v6-c-form"
-    data-ouia-component-id="OUIA-Generated-Form-:r0:"
+    data-ouia-component-id="OUIA-Generated-Form-_r_0_"
     data-ouia-component-type="PF6/Form"
     data-ouia-safe="true"
     novalidate=""
   >
     <div
       class="pf-v6-c-form__group"
-      data-ouia-component-id="OUIA-Generated-FormGroup-:r1:"
+      data-ouia-component-id="OUIA-Generated-FormGroup-_r_1_"
       data-ouia-component-type="PF6/FormGroup"
       data-ouia-safe="true"
     >
@@ -374,7 +374,7 @@ exports[`LoginForm should render Login form 1`] = `
         >
           <input
             aria-invalid="false"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:r4:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-_r_4_"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             id="pf-login-username-id"
@@ -388,7 +388,7 @@ exports[`LoginForm should render Login form 1`] = `
     </div>
     <div
       class="pf-v6-c-form__group"
-      data-ouia-component-id="OUIA-Generated-FormGroup-:r5:"
+      data-ouia-component-id="OUIA-Generated-FormGroup-_r_5_"
       data-ouia-component-type="PF6/FormGroup"
       data-ouia-safe="true"
     >
@@ -421,7 +421,7 @@ exports[`LoginForm should render Login form 1`] = `
         >
           <input
             aria-invalid="false"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:r8:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-_r_8_"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             id="pf-login-password-id"
@@ -435,7 +435,7 @@ exports[`LoginForm should render Login form 1`] = `
     </div>
     <div
       class="pf-v6-c-form__group pf-m-action"
-      data-ouia-component-id="OUIA-Generated-FormGroup-:r9:"
+      data-ouia-component-id="OUIA-Generated-FormGroup-_r_9_"
       data-ouia-component-type="PF6/FormGroup"
       data-ouia-safe="true"
     >
@@ -444,7 +444,7 @@ exports[`LoginForm should render Login form 1`] = `
       >
         <button
           class="pf-v6-c-button pf-m-primary pf-m-block"
-          data-ouia-component-id="OUIA-Generated-Button-primary-:rb:"
+          data-ouia-component-id="OUIA-Generated-Button-primary-_r_b_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="submit"
diff --git a/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginMainHeader.test.tsx.snap b/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginMainHeader.test.tsx.snap
index e570b4516f6..2aec6809cab 100644
--- a/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginMainHeader.test.tsx.snap
+++ b/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginMainHeader.test.tsx.snap
@@ -23,7 +23,7 @@ exports[`LoginMainHeader title and subtitle are rendered correctly 1`] = `
   >
     <h2
       class="pf-v6-c-title pf-m-3xl"
-      data-ouia-component-id="OUIA-Generated-Title-:r0:"
+      data-ouia-component-id="OUIA-Generated-Title-_r_0_"
       data-ouia-component-type="PF6/Title"
       data-ouia-safe="true"
     >
diff --git a/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginPage.test.tsx.snap b/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginPage.test.tsx.snap
index 304c515983d..a6f5b4ed2e0 100644
--- a/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginPage.test.tsx.snap
+++ b/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginPage.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`brand is absent without brandImgSrc and brandImgProps.src 1`] = `
         >
           <h2
             class="pf-v6-c-title pf-m-3xl"
-            data-ouia-component-id="OUIA-Generated-Title-:r1:"
+            data-ouia-component-id="OUIA-Generated-Title-_r_1_"
             data-ouia-component-type="PF6/Title"
             data-ouia-safe="true"
           >
@@ -68,7 +68,7 @@ exports[`brand is present with brandImgSrc prop 1`] = `
         >
           <h2
             class="pf-v6-c-title pf-m-3xl"
-            data-ouia-component-id="OUIA-Generated-Title-:r2:"
+            data-ouia-component-id="OUIA-Generated-Title-_r_2_"
             data-ouia-component-type="PF6/Title"
             data-ouia-safe="true"
           >
@@ -121,7 +121,7 @@ exports[`check loginpage example against snapshot 1`] = `
         >
           <h2
             class="pf-v6-c-title pf-m-3xl"
-            data-ouia-component-id="OUIA-Generated-Title-:r0:"
+            data-ouia-component-id="OUIA-Generated-Title-_r_0_"
             data-ouia-component-type="PF6/Title"
             data-ouia-safe="true"
           >
diff --git a/packages/react-core/src/components/Menu/__tests__/__snapshots__/Menu.test.tsx.snap b/packages/react-core/src/components/Menu/__tests__/__snapshots__/Menu.test.tsx.snap
index b5048703d17..906ca988fe4 100644
--- a/packages/react-core/src/components/Menu/__tests__/__snapshots__/Menu.test.tsx.snap
+++ b/packages/react-core/src/components/Menu/__tests__/__snapshots__/Menu.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Menu should render Menu successfully 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-menu"
-    data-ouia-component-id="OUIA-Generated-Menu-:r1:"
+    data-ouia-component-id="OUIA-Generated-Menu-_r_1_"
     data-ouia-component-type="PF6/Menu"
     data-ouia-safe="true"
   >
diff --git a/packages/react-core/src/components/MenuToggle/__tests__/__snapshots__/MenuToggle.test.tsx.snap b/packages/react-core/src/components/MenuToggle/__tests__/__snapshots__/MenuToggle.test.tsx.snap
index 80c8e87e218..37048ef32e6 100644
--- a/packages/react-core/src/components/MenuToggle/__tests__/__snapshots__/MenuToggle.test.tsx.snap
+++ b/packages/react-core/src/components/MenuToggle/__tests__/__snapshots__/MenuToggle.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Old Snapshot tests - remove when refactoring passes additional classes
     aria-expanded="false"
     aria-haspopup="menu"
     class="pf-v6-c-menu-toggle test-class"
-    data-ouia-component-id="OUIA-Generated-MenuToggle-:r3:"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-_r_3_"
     data-ouia-component-type="PF6/MenuToggle"
     data-ouia-safe="true"
     type="button"
@@ -47,7 +47,7 @@ exports[`Old Snapshot tests - remove when refactoring renders successfully 1`] =
     aria-expanded="false"
     aria-haspopup="menu"
     class="pf-v6-c-menu-toggle"
-    data-ouia-component-id="OUIA-Generated-MenuToggle-:r1:"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-_r_1_"
     data-ouia-component-type="PF6/MenuToggle"
     data-ouia-safe="true"
     type="button"
@@ -88,7 +88,7 @@ exports[`Old Snapshot tests - remove when refactoring shows badge 1`] = `
     aria-expanded="false"
     aria-haspopup="menu"
     class="pf-v6-c-menu-toggle"
-    data-ouia-component-id="OUIA-Generated-MenuToggle-:rh:"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-_r_h_"
     data-ouia-component-type="PF6/MenuToggle"
     data-ouia-safe="true"
     type="button"
@@ -138,7 +138,7 @@ exports[`Old Snapshot tests - remove when refactoring shows icon 1`] = `
     aria-expanded="false"
     aria-haspopup="menu"
     class="pf-v6-c-menu-toggle"
-    data-ouia-component-id="OUIA-Generated-MenuToggle-:rf:"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-_r_f_"
     data-ouia-component-type="PF6/MenuToggle"
     data-ouia-safe="true"
     type="button"
@@ -196,7 +196,7 @@ exports[`Old Snapshot tests - remove when refactoring shows isDisabled 1`] = `
     aria-expanded="false"
     aria-haspopup="menu"
     class="pf-v6-c-menu-toggle pf-m-disabled"
-    data-ouia-component-id="OUIA-Generated-MenuToggle-:r7:"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-_r_7_"
     data-ouia-component-type="PF6/MenuToggle"
     data-ouia-safe="true"
     disabled=""
@@ -238,7 +238,7 @@ exports[`Old Snapshot tests - remove when refactoring shows isExpanded 1`] = `
     aria-expanded="true"
     aria-haspopup="menu"
     class="pf-v6-c-menu-toggle pf-m-expanded"
-    data-ouia-component-id="OUIA-Generated-MenuToggle-:r5:"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-_r_5_"
     data-ouia-component-type="PF6/MenuToggle"
     data-ouia-safe="true"
     type="button"
@@ -279,7 +279,7 @@ exports[`Old Snapshot tests - remove when refactoring shows isPlain 1`] = `
     aria-expanded="false"
     aria-haspopup="menu"
     class="pf-v6-c-menu-toggle pf-m-plain"
-    data-ouia-component-id="OUIA-Generated-MenuToggle-plain-:rb:"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-plain-_r_b_"
     data-ouia-component-type="PF6/MenuToggle"
     data-ouia-safe="true"
     type="button"
@@ -311,7 +311,7 @@ exports[`Old Snapshot tests - remove when refactoring shows isPrimary 1`] = `
     aria-expanded="false"
     aria-haspopup="menu"
     class="pf-v6-c-menu-toggle pf-m-primary"
-    data-ouia-component-id="OUIA-Generated-MenuToggle-primary-:r9:"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-primary-_r_9_"
     data-ouia-component-type="PF6/MenuToggle"
     data-ouia-safe="true"
     type="button"
@@ -352,7 +352,7 @@ exports[`Old Snapshot tests - remove when refactoring shows plain text 1`] = `
     aria-expanded="false"
     aria-haspopup="menu"
     class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
-    data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-:rd:"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-_r_d_"
     data-ouia-component-type="PF6/MenuToggle"
     data-ouia-safe="true"
     type="button"
diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggleInForm.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuToggleInForm.tsx
index 8134bd2c3ca..4c8aa48d0e6 100644
--- a/packages/react-core/src/components/MenuToggle/examples/MenuToggleInForm.tsx
+++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggleInForm.tsx
@@ -1,6 +1,6 @@
 import { MenuToggle } from '@patternfly/react-core';
 
-export const MenuToggleInForm = (): JSX.Element => (
+export const MenuToggleInForm = (): React.JSX.Element => (
   <MenuToggle aria-haspopup={false} isInForm aria-label="Menu toggle in a form">
     In form
   </MenuToggle>
diff --git a/packages/react-core/src/components/Modal/__tests__/__snapshots__/ModalContent.test.tsx.snap b/packages/react-core/src/components/Modal/__tests__/__snapshots__/ModalContent.test.tsx.snap
index cf21acb282a..e3cd0bc2531 100644
--- a/packages/react-core/src/components/Modal/__tests__/__snapshots__/ModalContent.test.tsx.snap
+++ b/packages/react-core/src/components/Modal/__tests__/__snapshots__/ModalContent.test.tsx.snap
@@ -103,7 +103,7 @@ exports[`Modal Content Test with onclose 1`] = `
           <button
             aria-label="Close"
             class="pf-v6-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-:r0:"
+            data-ouia-component-id="OUIA-Generated-Button-plain-_r_0_"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
diff --git a/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadButton.test.tsx.snap b/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadButton.test.tsx.snap
index cf407820e03..8cbe260dd5d 100644
--- a/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadButton.test.tsx.snap
+++ b/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadButton.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`MultipleFileUploadButton renders custom class names 1`] = `
   >
     <button
       class="pf-v6-c-button pf-m-secondary"
-      data-ouia-component-id="OUIA-Generated-Button-secondary-:r1:"
+      data-ouia-component-id="OUIA-Generated-Button-secondary-_r_1_"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       type="button"
@@ -30,7 +30,7 @@ exports[`MultipleFileUploadButton renders with aria-label applied to the button
     <button
       aria-label="test"
       class="pf-v6-c-button pf-m-secondary"
-      data-ouia-component-id="OUIA-Generated-Button-secondary-:r2:"
+      data-ouia-component-id="OUIA-Generated-Button-secondary-_r_2_"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       type="button"
@@ -52,7 +52,7 @@ exports[`MultipleFileUploadButton renders with expected class names 1`] = `
   >
     <button
       class="pf-v6-c-button pf-m-secondary"
-      data-ouia-component-id="OUIA-Generated-Button-secondary-:r0:"
+      data-ouia-component-id="OUIA-Generated-Button-secondary-_r_0_"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       type="button"
@@ -74,7 +74,7 @@ exports[`MultipleFileUploadButton renders with label applied to the button 1`] =
   >
     <button
       class="pf-v6-c-button pf-m-secondary"
-      data-ouia-component-id="OUIA-Generated-Button-secondary-:r3:"
+      data-ouia-component-id="OUIA-Generated-Button-secondary-_r_3_"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       type="button"
diff --git a/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadMain.test.tsx.snap b/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadMain.test.tsx.snap
index 720f0eff5e2..ccbeb85109e 100644
--- a/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadMain.test.tsx.snap
+++ b/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadMain.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`MultipleFileUploadMain passes props to the info component as expected 1
     >
       <button
         class="pf-v6-c-button pf-m-secondary"
-        data-ouia-component-id="OUIA-Generated-Button-secondary-:r3:"
+        data-ouia-component-id="OUIA-Generated-Button-secondary-_r_3_"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -60,7 +60,7 @@ exports[`MultipleFileUploadMain passes props to the title as expected 1`] = `
     >
       <button
         class="pf-v6-c-button pf-m-secondary"
-        data-ouia-component-id="OUIA-Generated-Button-secondary-:r2:"
+        data-ouia-component-id="OUIA-Generated-Button-secondary-_r_2_"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -86,7 +86,7 @@ exports[`MultipleFileUploadMain renders custom class names 1`] = `
     >
       <button
         class="pf-v6-c-button pf-m-secondary"
-        data-ouia-component-id="OUIA-Generated-Button-secondary-:r1:"
+        data-ouia-component-id="OUIA-Generated-Button-secondary-_r_1_"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -112,7 +112,7 @@ exports[`MultipleFileUploadMain renders with expected class names 1`] = `
     >
       <button
         class="pf-v6-c-button pf-m-secondary"
-        data-ouia-component-id="OUIA-Generated-Button-secondary-:r0:"
+        data-ouia-component-id="OUIA-Generated-Button-secondary-_r_0_"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
diff --git a/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatus.test.tsx.snap b/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatus.test.tsx.snap
index f9a9364418a..f5636046461 100644
--- a/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatus.test.tsx.snap
+++ b/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatus.test.tsx.snap
@@ -14,13 +14,13 @@ exports[`MultipleFileUploadStatus renders custom class names 1`] = `
         class="pf-v6-c-expandable-section__toggle"
       >
         <button
-          aria-controls="pf-expandable-section-:r2:-content"
+          aria-controls="pf-expandable-section-_r_2_-content"
           aria-expanded="true"
           class="pf-v6-c-button pf-m-link"
-          data-ouia-component-id="OUIA-Generated-Button-link-:r3:"
+          data-ouia-component-id="OUIA-Generated-Button-link-_r_3_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
-          id="pf-expandable-section-:r2:-toggle"
+          id="pf-expandable-section-_r_2_-toggle"
           type="button"
         >
           <span
@@ -61,9 +61,9 @@ exports[`MultipleFileUploadStatus renders custom class names 1`] = `
         </button>
       </div>
       <div
-        aria-labelledby="pf-expandable-section-:r2:-toggle"
+        aria-labelledby="pf-expandable-section-_r_2_-toggle"
         class="pf-v6-c-expandable-section__content"
-        id="pf-expandable-section-:r2:-content"
+        id="pf-expandable-section-_r_2_-content"
         role="region"
       >
         <ul
@@ -92,13 +92,13 @@ exports[`MultipleFileUploadStatus renders status toggle icon 1`] = `
         class="pf-v6-c-expandable-section__toggle"
       >
         <button
-          aria-controls="pf-expandable-section-:r6:-content"
+          aria-controls="pf-expandable-section-_r_6_-content"
           aria-expanded="true"
           class="pf-v6-c-button pf-m-link"
-          data-ouia-component-id="OUIA-Generated-Button-link-:r7:"
+          data-ouia-component-id="OUIA-Generated-Button-link-_r_7_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
-          id="pf-expandable-section-:r6:-toggle"
+          id="pf-expandable-section-_r_6_-toggle"
           type="button"
         >
           <span
@@ -153,9 +153,9 @@ exports[`MultipleFileUploadStatus renders status toggle icon 1`] = `
         </button>
       </div>
       <div
-        aria-labelledby="pf-expandable-section-:r6:-toggle"
+        aria-labelledby="pf-expandable-section-_r_6_-toggle"
         class="pf-v6-c-expandable-section__content"
-        id="pf-expandable-section-:r6:-content"
+        id="pf-expandable-section-_r_6_-content"
         role="region"
       >
         <ul
@@ -184,13 +184,13 @@ exports[`MultipleFileUploadStatus renders status toggle text 1`] = `
         class="pf-v6-c-expandable-section__toggle"
       >
         <button
-          aria-controls="pf-expandable-section-:r4:-content"
+          aria-controls="pf-expandable-section-_r_4_-content"
           aria-expanded="true"
           class="pf-v6-c-button pf-m-link"
-          data-ouia-component-id="OUIA-Generated-Button-link-:r5:"
+          data-ouia-component-id="OUIA-Generated-Button-link-_r_5_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
-          id="pf-expandable-section-:r4:-toggle"
+          id="pf-expandable-section-_r_4_-toggle"
           type="button"
         >
           <span
@@ -233,9 +233,9 @@ exports[`MultipleFileUploadStatus renders status toggle text 1`] = `
         </button>
       </div>
       <div
-        aria-labelledby="pf-expandable-section-:r4:-toggle"
+        aria-labelledby="pf-expandable-section-_r_4_-toggle"
         class="pf-v6-c-expandable-section__content"
-        id="pf-expandable-section-:r4:-content"
+        id="pf-expandable-section-_r_4_-content"
         role="region"
       >
         <ul
@@ -264,13 +264,13 @@ exports[`MultipleFileUploadStatus renders with expected class names 1`] = `
         class="pf-v6-c-expandable-section__toggle"
       >
         <button
-          aria-controls="pf-expandable-section-:r0:-content"
+          aria-controls="pf-expandable-section-_r_0_-content"
           aria-expanded="true"
           class="pf-v6-c-button pf-m-link"
-          data-ouia-component-id="OUIA-Generated-Button-link-:r1:"
+          data-ouia-component-id="OUIA-Generated-Button-link-_r_1_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
-          id="pf-expandable-section-:r0:-toggle"
+          id="pf-expandable-section-_r_0_-toggle"
           type="button"
         >
           <span
@@ -311,9 +311,9 @@ exports[`MultipleFileUploadStatus renders with expected class names 1`] = `
         </button>
       </div>
       <div
-        aria-labelledby="pf-expandable-section-:r0:-toggle"
+        aria-labelledby="pf-expandable-section-_r_0_-toggle"
         class="pf-v6-c-expandable-section__content"
-        id="pf-expandable-section-:r0:-content"
+        id="pf-expandable-section-_r_0_-content"
         role="region"
       >
         <ul
diff --git a/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatusItem.test.tsx.snap b/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatusItem.test.tsx.snap
index 42f15aae2a1..e3706e8a1ba 100644
--- a/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatusItem.test.tsx.snap
+++ b/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatusItem.test.tsx.snap
@@ -93,7 +93,7 @@ exports[`MultipleFileUploadStatusItem renders custom aria labels 1`] = `
       <button
         aria-label="buttonAriaLabel"
         class="pf-v6-c-button pf-m-plain"
-        data-ouia-component-id="OUIA-Generated-Button-plain-:rf:"
+        data-ouia-component-id="OUIA-Generated-Button-plain-_r_f_"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -211,7 +211,7 @@ exports[`MultipleFileUploadStatusItem renders custom class names 1`] = `
       <button
         aria-label="Remove from list"
         class="pf-v6-c-button pf-m-plain"
-        data-ouia-component-id="OUIA-Generated-Button-plain-:r3:"
+        data-ouia-component-id="OUIA-Generated-Button-plain-_r_3_"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -331,7 +331,7 @@ exports[`MultipleFileUploadStatusItem renders custom file name/size/icon/progres
       <button
         aria-label="Remove from list"
         class="pf-v6-c-button pf-m-plain"
-        data-ouia-component-id="OUIA-Generated-Button-plain-:r7:"
+        data-ouia-component-id="OUIA-Generated-Button-plain-_r_7_"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -451,7 +451,7 @@ exports[`MultipleFileUploadStatusItem renders custom function progressAriaLiveMe
       <button
         aria-label="Remove from list"
         class="pf-v6-c-button pf-m-plain"
-        data-ouia-component-id="OUIA-Generated-Button-plain-:r9:"
+        data-ouia-component-id="OUIA-Generated-Button-plain-_r_9_"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -588,7 +588,7 @@ exports[`MultipleFileUploadStatusItem renders custom progress value/variant when
       <button
         aria-label="Remove from list"
         class="pf-v6-c-button pf-m-plain"
-        data-ouia-component-id="OUIA-Generated-Button-plain-:rd:"
+        data-ouia-component-id="OUIA-Generated-Button-plain-_r_d_"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -708,7 +708,7 @@ exports[`MultipleFileUploadStatusItem renders expected values from a passed file
       <button
         aria-label="Remove from list"
         class="pf-v6-c-button pf-m-plain"
-        data-ouia-component-id="OUIA-Generated-Button-plain-:r5:"
+        data-ouia-component-id="OUIA-Generated-Button-plain-_r_5_"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -826,7 +826,7 @@ exports[`MultipleFileUploadStatusItem renders with expected class names 1`] = `
       <button
         aria-label="Remove from list"
         class="pf-v6-c-button pf-m-plain"
-        data-ouia-component-id="OUIA-Generated-Button-plain-:r1:"
+        data-ouia-component-id="OUIA-Generated-Button-plain-_r_1_"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -946,7 +946,7 @@ exports[`MultipleFileUploadStatusItem rendersdefault progressAriaLiveMessage whe
       <button
         aria-label="Remove from list"
         class="pf-v6-c-button pf-m-plain"
-        data-ouia-component-id="OUIA-Generated-Button-plain-:rb:"
+        data-ouia-component-id="OUIA-Generated-Button-plain-_r_b_"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
diff --git a/packages/react-core/src/components/Nav/__tests__/Generated/__snapshots__/NavExpandable.test.tsx.snap b/packages/react-core/src/components/Nav/__tests__/Generated/__snapshots__/NavExpandable.test.tsx.snap
index 4db03db6f45..0a4508d1457 100644
--- a/packages/react-core/src/components/Nav/__tests__/Generated/__snapshots__/NavExpandable.test.tsx.snap
+++ b/packages/react-core/src/components/Nav/__tests__/Generated/__snapshots__/NavExpandable.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`NavExpandable should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <li
     class="pf-v6-c-nav__item ''"
-    data-ouia-component-id="OUIA-Generated-NavExpandable-:r1:"
+    data-ouia-component-id="OUIA-Generated-NavExpandable-_r_1_"
     data-ouia-component-type="PF6/NavExpandable"
     data-ouia-safe="true"
   >
diff --git a/packages/react-core/src/components/Nav/__tests__/Generated/__snapshots__/NavItem.test.tsx.snap b/packages/react-core/src/components/Nav/__tests__/Generated/__snapshots__/NavItem.test.tsx.snap
index 98f9c36ec0f..704eaed8e0f 100644
--- a/packages/react-core/src/components/Nav/__tests__/Generated/__snapshots__/NavItem.test.tsx.snap
+++ b/packages/react-core/src/components/Nav/__tests__/Generated/__snapshots__/NavItem.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`NavItem should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <li
     class="pf-v6-c-nav__item ''"
-    data-ouia-component-id="OUIA-Generated-NavItem-:r0:"
+    data-ouia-component-id="OUIA-Generated-NavItem-_r_0_"
     data-ouia-component-type="PF6/NavItem"
     data-ouia-safe="true"
   >
diff --git a/packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap b/packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap
index 13d8b3c0156..1669d944c9c 100644
--- a/packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap
+++ b/packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`Nav Default Nav List - Trigger item active update 1`] = `
   <nav
     aria-label="Global"
     class="pf-v6-c-nav"
-    data-ouia-component-id="OUIA-Generated-Nav-:rj:"
+    data-ouia-component-id="OUIA-Generated-Nav-_r_d_"
     data-ouia-component-type="PF6/Nav"
     data-ouia-safe="true"
   >
@@ -15,7 +15,7 @@ exports[`Nav Default Nav List - Trigger item active update 1`] = `
     >
       <li
         class="pf-v6-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-:rk:"
+        data-ouia-component-id="OUIA-Generated-NavItem-_r_e_"
         data-ouia-component-type="PF6/NavItem"
         data-ouia-safe="true"
       >
@@ -32,7 +32,7 @@ exports[`Nav Default Nav List - Trigger item active update 1`] = `
       </li>
       <li
         class="pf-v6-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-:rl:"
+        data-ouia-component-id="OUIA-Generated-NavItem-_r_f_"
         data-ouia-component-type="PF6/NavItem"
         data-ouia-safe="true"
       >
@@ -49,7 +49,7 @@ exports[`Nav Default Nav List - Trigger item active update 1`] = `
       </li>
       <li
         class="pf-v6-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-:rm:"
+        data-ouia-component-id="OUIA-Generated-NavItem-_r_g_"
         data-ouia-component-type="PF6/NavItem"
         data-ouia-safe="true"
       >
@@ -66,7 +66,7 @@ exports[`Nav Default Nav List - Trigger item active update 1`] = `
       </li>
       <li
         class="pf-v6-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-:rn:"
+        data-ouia-component-id="OUIA-Generated-NavItem-_r_h_"
         data-ouia-component-type="PF6/NavItem"
         data-ouia-safe="true"
       >
@@ -91,7 +91,7 @@ exports[`Nav Default Nav List 1`] = `
   <nav
     aria-label="Global"
     class="pf-v6-c-nav test-nav-class"
-    data-ouia-component-id="OUIA-Generated-Nav-:r1:"
+    data-ouia-component-id="OUIA-Generated-Nav-_r_1_"
     data-ouia-component-type="PF6/Nav"
     data-ouia-safe="true"
   >
@@ -101,7 +101,7 @@ exports[`Nav Default Nav List 1`] = `
     >
       <li
         class="pf-v6-c-nav__item test-nav-item-class"
-        data-ouia-component-id="OUIA-Generated-NavItem-:r2:"
+        data-ouia-component-id="OUIA-Generated-NavItem-_r_2_"
         data-ouia-component-type="PF6/NavItem"
         data-ouia-safe="true"
       >
@@ -118,7 +118,7 @@ exports[`Nav Default Nav List 1`] = `
       </li>
       <li
         class="pf-v6-c-nav__item test-nav-item-class"
-        data-ouia-component-id="OUIA-Generated-NavItem-:r3:"
+        data-ouia-component-id="OUIA-Generated-NavItem-_r_3_"
         data-ouia-component-type="PF6/NavItem"
         data-ouia-safe="true"
       >
@@ -135,7 +135,7 @@ exports[`Nav Default Nav List 1`] = `
       </li>
       <li
         class="pf-v6-c-nav__item test-nav-item-class"
-        data-ouia-component-id="OUIA-Generated-NavItem-:r4:"
+        data-ouia-component-id="OUIA-Generated-NavItem-_r_4_"
         data-ouia-component-type="PF6/NavItem"
         data-ouia-safe="true"
       >
@@ -152,7 +152,7 @@ exports[`Nav Default Nav List 1`] = `
       </li>
       <li
         class="pf-v6-c-nav__item test-nav-item-class"
-        data-ouia-component-id="OUIA-Generated-NavItem-:r5:"
+        data-ouia-component-id="OUIA-Generated-NavItem-_r_5_"
         data-ouia-component-type="PF6/NavItem"
         data-ouia-safe="true"
       >
@@ -177,7 +177,7 @@ exports[`Nav Expandable Nav List - Trigger toggle 1`] = `
   <nav
     aria-label="Global"
     class="pf-v6-c-nav"
-    data-ouia-component-id="OUIA-Generated-Nav-:r19:"
+    data-ouia-component-id="OUIA-Generated-Nav-_r_13_"
     data-ouia-component-type="PF6/Nav"
     data-ouia-safe="true"
   >
@@ -187,7 +187,7 @@ exports[`Nav Expandable Nav List - Trigger toggle 1`] = `
     >
       <li
         class="pf-v6-c-nav__item expandable-group"
-        data-ouia-component-id="OUIA-Generated-NavExpandable-:r1b:"
+        data-ouia-component-id="OUIA-Generated-NavExpandable-_r_15_"
         data-ouia-component-type="PF6/NavExpandable"
         data-ouia-safe="true"
       >
@@ -231,7 +231,7 @@ exports[`Nav Expandable Nav List - Trigger toggle 1`] = `
           >
             <li
               class="pf-v6-c-nav__item"
-              data-ouia-component-id="OUIA-Generated-NavItem-:r1c:"
+              data-ouia-component-id="OUIA-Generated-NavItem-_r_16_"
               data-ouia-component-type="PF6/NavItem"
               data-ouia-safe="true"
             >
@@ -248,7 +248,7 @@ exports[`Nav Expandable Nav List - Trigger toggle 1`] = `
             </li>
             <li
               class="pf-v6-c-nav__item"
-              data-ouia-component-id="OUIA-Generated-NavItem-:r1d:"
+              data-ouia-component-id="OUIA-Generated-NavItem-_r_17_"
               data-ouia-component-type="PF6/NavItem"
               data-ouia-safe="true"
             >
@@ -265,7 +265,7 @@ exports[`Nav Expandable Nav List - Trigger toggle 1`] = `
             </li>
             <li
               class="pf-v6-c-nav__item"
-              data-ouia-component-id="OUIA-Generated-NavItem-:r1e:"
+              data-ouia-component-id="OUIA-Generated-NavItem-_r_18_"
               data-ouia-component-type="PF6/NavItem"
               data-ouia-safe="true"
             >
@@ -282,7 +282,7 @@ exports[`Nav Expandable Nav List - Trigger toggle 1`] = `
             </li>
             <li
               class="pf-v6-c-nav__item"
-              data-ouia-component-id="OUIA-Generated-NavItem-:r1f:"
+              data-ouia-component-id="OUIA-Generated-NavItem-_r_19_"
               data-ouia-component-type="PF6/NavItem"
               data-ouia-safe="true"
             >
@@ -310,7 +310,7 @@ exports[`Nav Expandable Nav List 1`] = `
   <nav
     aria-label="Global"
     class="pf-v6-c-nav"
-    data-ouia-component-id="OUIA-Generated-Nav-:rp:"
+    data-ouia-component-id="OUIA-Generated-Nav-_r_j_"
     data-ouia-component-type="PF6/Nav"
     data-ouia-safe="true"
   >
@@ -320,7 +320,7 @@ exports[`Nav Expandable Nav List 1`] = `
     >
       <li
         class="pf-v6-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavExpandable-:rr:"
+        data-ouia-component-id="OUIA-Generated-NavExpandable-_r_l_"
         data-ouia-component-type="PF6/NavExpandable"
         data-ouia-safe="true"
       >
@@ -364,7 +364,7 @@ exports[`Nav Expandable Nav List 1`] = `
           >
             <li
               class="pf-v6-c-nav__item"
-              data-ouia-component-id="OUIA-Generated-NavItem-:rs:"
+              data-ouia-component-id="OUIA-Generated-NavItem-_r_m_"
               data-ouia-component-type="PF6/NavItem"
               data-ouia-safe="true"
             >
@@ -381,7 +381,7 @@ exports[`Nav Expandable Nav List 1`] = `
             </li>
             <li
               class="pf-v6-c-nav__item"
-              data-ouia-component-id="OUIA-Generated-NavItem-:rt:"
+              data-ouia-component-id="OUIA-Generated-NavItem-_r_n_"
               data-ouia-component-type="PF6/NavItem"
               data-ouia-safe="true"
             >
@@ -398,7 +398,7 @@ exports[`Nav Expandable Nav List 1`] = `
             </li>
             <li
               class="pf-v6-c-nav__item"
-              data-ouia-component-id="OUIA-Generated-NavItem-:ru:"
+              data-ouia-component-id="OUIA-Generated-NavItem-_r_o_"
               data-ouia-component-type="PF6/NavItem"
               data-ouia-safe="true"
             >
@@ -415,7 +415,7 @@ exports[`Nav Expandable Nav List 1`] = `
             </li>
             <li
               class="pf-v6-c-nav__item"
-              data-ouia-component-id="OUIA-Generated-NavItem-:rv:"
+              data-ouia-component-id="OUIA-Generated-NavItem-_r_p_"
               data-ouia-component-type="PF6/NavItem"
               data-ouia-safe="true"
             >
@@ -443,7 +443,7 @@ exports[`Nav Expandable Nav List with aria label 1`] = `
   <nav
     aria-label="Test"
     class="pf-v6-c-nav"
-    data-ouia-component-id="OUIA-Generated-Nav-:r1h:"
+    data-ouia-component-id="OUIA-Generated-Nav-_r_1b_"
     data-ouia-component-type="PF6/Nav"
     data-ouia-safe="true"
   >
@@ -453,7 +453,7 @@ exports[`Nav Expandable Nav List with aria label 1`] = `
     >
       <li
         class="pf-v6-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavExpandable-:r1j:"
+        data-ouia-component-id="OUIA-Generated-NavExpandable-_r_1d_"
         data-ouia-component-type="PF6/NavExpandable"
         data-ouia-safe="true"
       >
@@ -502,7 +502,7 @@ exports[`Nav Expandable Nav List with aria label 1`] = `
           >
             <li
               class="pf-v6-c-nav__item"
-              data-ouia-component-id="OUIA-Generated-NavItem-:r1k:"
+              data-ouia-component-id="OUIA-Generated-NavItem-_r_1e_"
               data-ouia-component-type="PF6/NavItem"
               data-ouia-safe="true"
             >
@@ -519,7 +519,7 @@ exports[`Nav Expandable Nav List with aria label 1`] = `
             </li>
             <li
               class="pf-v6-c-nav__item"
-              data-ouia-component-id="OUIA-Generated-NavItem-:r1l:"
+              data-ouia-component-id="OUIA-Generated-NavItem-_r_1f_"
               data-ouia-component-type="PF6/NavItem"
               data-ouia-safe="true"
             >
@@ -536,7 +536,7 @@ exports[`Nav Expandable Nav List with aria label 1`] = `
             </li>
             <li
               class="pf-v6-c-nav__item"
-              data-ouia-component-id="OUIA-Generated-NavItem-:r1m:"
+              data-ouia-component-id="OUIA-Generated-NavItem-_r_1g_"
               data-ouia-component-type="PF6/NavItem"
               data-ouia-safe="true"
             >
@@ -553,7 +553,7 @@ exports[`Nav Expandable Nav List with aria label 1`] = `
             </li>
             <li
               class="pf-v6-c-nav__item"
-              data-ouia-component-id="OUIA-Generated-NavItem-:r1n:"
+              data-ouia-component-id="OUIA-Generated-NavItem-_r_1h_"
               data-ouia-component-type="PF6/NavItem"
               data-ouia-safe="true"
             >
@@ -581,7 +581,7 @@ exports[`Nav Horizontal Nav List 1`] = `
   <nav
     aria-label="Global"
     class="pf-v6-c-nav pf-m-horizontal"
-    data-ouia-component-id="OUIA-Generated-Nav-horizontal-:r25:"
+    data-ouia-component-id="OUIA-Generated-Nav-horizontal-_r_1v_"
     data-ouia-component-type="PF6/Nav"
     data-ouia-safe="true"
   >
@@ -591,7 +591,7 @@ exports[`Nav Horizontal Nav List 1`] = `
     >
       <li
         class="pf-v6-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-:r27:"
+        data-ouia-component-id="OUIA-Generated-NavItem-_r_21_"
         data-ouia-component-type="PF6/NavItem"
         data-ouia-safe="true"
       >
@@ -608,7 +608,7 @@ exports[`Nav Horizontal Nav List 1`] = `
       </li>
       <li
         class="pf-v6-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-:r28:"
+        data-ouia-component-id="OUIA-Generated-NavItem-_r_22_"
         data-ouia-component-type="PF6/NavItem"
         data-ouia-safe="true"
       >
@@ -625,7 +625,7 @@ exports[`Nav Horizontal Nav List 1`] = `
       </li>
       <li
         class="pf-v6-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-:r29:"
+        data-ouia-component-id="OUIA-Generated-NavItem-_r_23_"
         data-ouia-component-type="PF6/NavItem"
         data-ouia-safe="true"
       >
@@ -642,7 +642,7 @@ exports[`Nav Horizontal Nav List 1`] = `
       </li>
       <li
         class="pf-v6-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-:r2a:"
+        data-ouia-component-id="OUIA-Generated-NavItem-_r_24_"
         data-ouia-component-type="PF6/NavItem"
         data-ouia-safe="true"
       >
@@ -667,7 +667,7 @@ exports[`Nav Horizontal SubNav List 1`] = `
   <nav
     aria-label="Local"
     class="pf-v6-c-nav pf-m-horizontal pf-m-subnav"
-    data-ouia-component-id="OUIA-Generated-Nav-horizontal-subnav-:r2d:"
+    data-ouia-component-id="OUIA-Generated-Nav-horizontal-subnav-_r_27_"
     data-ouia-component-type="PF6/Nav"
     data-ouia-safe="true"
   >
@@ -677,7 +677,7 @@ exports[`Nav Horizontal SubNav List 1`] = `
     >
       <li
         class="pf-v6-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-:r2f:"
+        data-ouia-component-id="OUIA-Generated-NavItem-_r_29_"
         data-ouia-component-type="PF6/NavItem"
         data-ouia-safe="true"
       >
@@ -694,7 +694,7 @@ exports[`Nav Horizontal SubNav List 1`] = `
       </li>
       <li
         class="pf-v6-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-:r2g:"
+        data-ouia-component-id="OUIA-Generated-NavItem-_r_2a_"
         data-ouia-component-type="PF6/NavItem"
         data-ouia-safe="true"
       >
@@ -711,7 +711,7 @@ exports[`Nav Horizontal SubNav List 1`] = `
       </li>
       <li
         class="pf-v6-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-:r2h:"
+        data-ouia-component-id="OUIA-Generated-NavItem-_r_2b_"
         data-ouia-component-type="PF6/NavItem"
         data-ouia-safe="true"
       >
@@ -728,7 +728,7 @@ exports[`Nav Horizontal SubNav List 1`] = `
       </li>
       <li
         class="pf-v6-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-:r2i:"
+        data-ouia-component-id="OUIA-Generated-NavItem-_r_2c_"
         data-ouia-component-type="PF6/NavItem"
         data-ouia-safe="true"
       >
@@ -753,7 +753,7 @@ exports[`Nav Nav Grouped List 1`] = `
   <nav
     aria-label="Global"
     class="pf-v6-c-nav"
-    data-ouia-component-id="OUIA-Generated-Nav-:r1p:"
+    data-ouia-component-id="OUIA-Generated-Nav-_r_1j_"
     data-ouia-component-type="PF6/Nav"
     data-ouia-safe="true"
   >
@@ -777,7 +777,7 @@ exports[`Nav Nav Grouped List 1`] = `
         >
           <li
             class="pf-v6-c-nav__item"
-            data-ouia-component-id="OUIA-Generated-NavItem-:r1r:"
+            data-ouia-component-id="OUIA-Generated-NavItem-_r_1l_"
             data-ouia-component-type="PF6/NavItem"
             data-ouia-safe="true"
           >
@@ -794,7 +794,7 @@ exports[`Nav Nav Grouped List 1`] = `
           </li>
           <li
             class="pf-v6-c-nav__item"
-            data-ouia-component-id="OUIA-Generated-NavItem-:r1s:"
+            data-ouia-component-id="OUIA-Generated-NavItem-_r_1m_"
             data-ouia-component-type="PF6/NavItem"
             data-ouia-safe="true"
           >
@@ -811,7 +811,7 @@ exports[`Nav Nav Grouped List 1`] = `
           </li>
           <li
             class="pf-v6-c-nav__item"
-            data-ouia-component-id="OUIA-Generated-NavItem-:r1t:"
+            data-ouia-component-id="OUIA-Generated-NavItem-_r_1n_"
             data-ouia-component-type="PF6/NavItem"
             data-ouia-safe="true"
           >
@@ -828,7 +828,7 @@ exports[`Nav Nav Grouped List 1`] = `
           </li>
           <li
             class="pf-v6-c-nav__item"
-            data-ouia-component-id="OUIA-Generated-NavItem-:r1u:"
+            data-ouia-component-id="OUIA-Generated-NavItem-_r_1o_"
             data-ouia-component-type="PF6/NavItem"
             data-ouia-safe="true"
           >
@@ -866,7 +866,7 @@ exports[`Nav Nav Grouped List 1`] = `
         >
           <li
             class="pf-v6-c-nav__item"
-            data-ouia-component-id="OUIA-Generated-NavItem-:r20:"
+            data-ouia-component-id="OUIA-Generated-NavItem-_r_1q_"
             data-ouia-component-type="PF6/NavItem"
             data-ouia-safe="true"
           >
@@ -883,7 +883,7 @@ exports[`Nav Nav Grouped List 1`] = `
           </li>
           <li
             class="pf-v6-c-nav__item"
-            data-ouia-component-id="OUIA-Generated-NavItem-:r21:"
+            data-ouia-component-id="OUIA-Generated-NavItem-_r_1r_"
             data-ouia-component-type="PF6/NavItem"
             data-ouia-safe="true"
           >
@@ -900,7 +900,7 @@ exports[`Nav Nav Grouped List 1`] = `
           </li>
           <li
             class="pf-v6-c-nav__item"
-            data-ouia-component-id="OUIA-Generated-NavItem-:r22:"
+            data-ouia-component-id="OUIA-Generated-NavItem-_r_1s_"
             data-ouia-component-type="PF6/NavItem"
             data-ouia-safe="true"
           >
@@ -917,7 +917,7 @@ exports[`Nav Nav Grouped List 1`] = `
           </li>
           <li
             class="pf-v6-c-nav__item"
-            data-ouia-component-id="OUIA-Generated-NavItem-:r23:"
+            data-ouia-component-id="OUIA-Generated-NavItem-_r_1t_"
             data-ouia-component-type="PF6/NavItem"
             data-ouia-safe="true"
           >
@@ -944,7 +944,7 @@ exports[`Nav Nav List with custom item nodes 1`] = `
   <nav
     aria-label="Global"
     class="pf-v6-c-nav"
-    data-ouia-component-id="OUIA-Generated-Nav-:r2l:"
+    data-ouia-component-id="OUIA-Generated-Nav-_r_2f_"
     data-ouia-component-type="PF6/Nav"
     data-ouia-safe="true"
   >
@@ -954,7 +954,7 @@ exports[`Nav Nav List with custom item nodes 1`] = `
     >
       <li
         class="pf-v6-c-nav__item test-nav-item-class"
-        data-ouia-component-id="OUIA-Generated-NavItem-:r2m:"
+        data-ouia-component-id="OUIA-Generated-NavItem-_r_2g_"
         data-ouia-component-type="PF6/NavItem"
         data-ouia-safe="true"
       >
@@ -974,7 +974,7 @@ exports[`Nav Nav List with flyout 1`] = `
   <nav
     aria-label="Global"
     class="pf-v6-c-nav"
-    data-ouia-component-id="OUIA-Generated-Nav-:r2o:"
+    data-ouia-component-id="OUIA-Generated-Nav-_r_2i_"
     data-ouia-component-type="PF6/Nav"
     data-ouia-safe="true"
   >
@@ -984,7 +984,7 @@ exports[`Nav Nav List with flyout 1`] = `
     >
       <li
         class="pf-v6-c-nav__item pf-m-flyout test-nav-item-class"
-        data-ouia-component-id="OUIA-Generated-NavItem-:r2p:"
+        data-ouia-component-id="OUIA-Generated-NavItem-_r_2j_"
         data-ouia-component-type="PF6/NavItem"
         data-ouia-safe="true"
       >
@@ -1036,7 +1036,7 @@ exports[`Nav Renders nav list in strict mode 1`] = `
   <nav
     aria-label="Global"
     class="pf-v6-c-nav test-nav-class"
-    data-ouia-component-id="OUIA-Generated-Nav-:r9:"
+    data-ouia-component-id="OUIA-Generated-Nav-_r_7_"
     data-ouia-component-type="PF6/Nav"
     data-ouia-safe="true"
   >
@@ -1046,7 +1046,7 @@ exports[`Nav Renders nav list in strict mode 1`] = `
     >
       <li
         class="pf-v6-c-nav__item test-nav-item-class"
-        data-ouia-component-id="OUIA-Generated-NavItem-:rb:"
+        data-ouia-component-id="OUIA-Generated-NavItem-_r_8_"
         data-ouia-component-type="PF6/NavItem"
         data-ouia-safe="true"
       >
@@ -1063,7 +1063,7 @@ exports[`Nav Renders nav list in strict mode 1`] = `
       </li>
       <li
         class="pf-v6-c-nav__item test-nav-item-class"
-        data-ouia-component-id="OUIA-Generated-NavItem-:rd:"
+        data-ouia-component-id="OUIA-Generated-NavItem-_r_9_"
         data-ouia-component-type="PF6/NavItem"
         data-ouia-safe="true"
       >
@@ -1080,7 +1080,7 @@ exports[`Nav Renders nav list in strict mode 1`] = `
       </li>
       <li
         class="pf-v6-c-nav__item test-nav-item-class"
-        data-ouia-component-id="OUIA-Generated-NavItem-:rf:"
+        data-ouia-component-id="OUIA-Generated-NavItem-_r_a_"
         data-ouia-component-type="PF6/NavItem"
         data-ouia-safe="true"
       >
@@ -1097,7 +1097,7 @@ exports[`Nav Renders nav list in strict mode 1`] = `
       </li>
       <li
         class="pf-v6-c-nav__item test-nav-item-class"
-        data-ouia-component-id="OUIA-Generated-NavItem-:rh:"
+        data-ouia-component-id="OUIA-Generated-NavItem-_r_b_"
         data-ouia-component-type="PF6/NavItem"
         data-ouia-safe="true"
       >
diff --git a/packages/react-core/src/components/NotificationBadge/__tests__/__snapshots__/NotificationBadge.test.tsx.snap b/packages/react-core/src/components/NotificationBadge/__tests__/__snapshots__/NotificationBadge.test.tsx.snap
index 9fafce22462..ccd4ec494de 100644
--- a/packages/react-core/src/components/NotificationBadge/__tests__/__snapshots__/NotificationBadge.test.tsx.snap
+++ b/packages/react-core/src/components/NotificationBadge/__tests__/__snapshots__/NotificationBadge.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`NotificationBadge count 1`] = `
   <button
     aria-expanded="false"
     class="pf-v6-c-button pf-m-stateful pf-m-read"
-    data-ouia-component-id="OUIA-Generated-Button-stateful-:r2:"
+    data-ouia-component-id="OUIA-Generated-Button-stateful-_r_2_"
     data-ouia-component-type="PF6/Button"
     data-ouia-safe="true"
     type="button"
@@ -41,7 +41,7 @@ exports[`false NotificationBadge needs attention 1`] = `
   <button
     aria-expanded="false"
     class="pf-v6-c-button pf-m-stateful pf-m-attention"
-    data-ouia-component-id="OUIA-Generated-Button-stateful-:r1:"
+    data-ouia-component-id="OUIA-Generated-Button-stateful-_r_1_"
     data-ouia-component-type="PF6/Button"
     data-ouia-safe="true"
     type="button"
@@ -77,7 +77,7 @@ exports[`true NotificationBadge needs attention 1`] = `
   <button
     aria-expanded="false"
     class="pf-v6-c-button pf-m-stateful pf-m-attention"
-    data-ouia-component-id="OUIA-Generated-Button-stateful-:r0:"
+    data-ouia-component-id="OUIA-Generated-Button-stateful-_r_0_"
     data-ouia-component-type="PF6/Button"
     data-ouia-safe="true"
     type="button"
diff --git a/packages/react-core/src/components/NumberInput/NumberInput.tsx b/packages/react-core/src/components/NumberInput/NumberInput.tsx
index a0bc57c28bb..84f0b54947b 100644
--- a/packages/react-core/src/components/NumberInput/NumberInput.tsx
+++ b/packages/react-core/src/components/NumberInput/NumberInput.tsx
@@ -8,7 +8,7 @@ import { KeyTypes, ValidatedOptions } from '../../helpers';
 import { TextInput } from '../TextInput';
 import cssFormControlWidthChars from '@patternfly/react-tokens/dist/esm/c_number_input_c_form_control_width_chars';
 
-export interface NumberInputProps extends React.HTMLProps<HTMLDivElement> {
+export interface NumberInputProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
   /** Value of the number input */
   value?: number | '';
   /** Additional classes added to the number input */
diff --git a/packages/react-core/src/components/NumberInput/__tests__/__snapshots__/NumberInput.test.tsx.snap b/packages/react-core/src/components/NumberInput/__tests__/__snapshots__/NumberInput.test.tsx.snap
index fd10a371a16..cf7ec7f0a21 100644
--- a/packages/react-core/src/components/NumberInput/__tests__/__snapshots__/NumberInput.test.tsx.snap
+++ b/packages/react-core/src/components/NumberInput/__tests__/__snapshots__/NumberInput.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`numberInput disables lower threshold 1`] = `
         <button
           aria-label="Minus"
           class="pf-v6-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-:ro:"
+          data-ouia-component-id="OUIA-Generated-Button-control-_r_o_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -52,7 +52,7 @@ exports[`numberInput disables lower threshold 1`] = `
           <input
             aria-invalid="false"
             aria-label="Input"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:rq:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-_r_q_"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             readonly=""
@@ -67,7 +67,7 @@ exports[`numberInput disables lower threshold 1`] = `
         <button
           aria-label="Plus"
           class="pf-v6-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-:rr:"
+          data-ouia-component-id="OUIA-Generated-Button-control-_r_r_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -114,7 +114,7 @@ exports[`numberInput disables upper threshold 1`] = `
         <button
           aria-label="Minus"
           class="pf-v6-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-:rs:"
+          data-ouia-component-id="OUIA-Generated-Button-control-_r_s_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -151,7 +151,7 @@ exports[`numberInput disables upper threshold 1`] = `
           <input
             aria-invalid="false"
             aria-label="Input"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:ru:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-_r_u_"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             readonly=""
@@ -166,7 +166,7 @@ exports[`numberInput disables upper threshold 1`] = `
         <button
           aria-label="Plus"
           class="pf-v6-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-:rv:"
+          data-ouia-component-id="OUIA-Generated-Button-control-_r_v_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -214,7 +214,7 @@ exports[`numberInput passes button props successfully 1`] = `
         <button
           aria-label="Minus"
           class="pf-v6-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-:r1g:"
+          data-ouia-component-id="OUIA-Generated-Button-control-_r_1g_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           id="minus-id"
@@ -252,7 +252,7 @@ exports[`numberInput passes button props successfully 1`] = `
           <input
             aria-invalid="false"
             aria-label="Input"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:r1i:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-_r_1i_"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             readonly=""
@@ -267,7 +267,7 @@ exports[`numberInput passes button props successfully 1`] = `
         <button
           aria-label="Plus"
           class="pf-v6-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-:r1j:"
+          data-ouia-component-id="OUIA-Generated-Button-control-_r_1j_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           id="plus-id"
@@ -315,7 +315,7 @@ exports[`numberInput passes input props successfully 1`] = `
         <button
           aria-label="Minus"
           class="pf-v6-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-:r1c:"
+          data-ouia-component-id="OUIA-Generated-Button-control-_r_1c_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -352,7 +352,7 @@ exports[`numberInput passes input props successfully 1`] = `
           <input
             aria-invalid="false"
             aria-label="Input"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:r1e:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-_r_1e_"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             name="test-name"
@@ -367,7 +367,7 @@ exports[`numberInput passes input props successfully 1`] = `
         <button
           aria-label="Plus"
           class="pf-v6-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-:r1f:"
+          data-ouia-component-id="OUIA-Generated-Button-control-_r_1f_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -415,7 +415,7 @@ exports[`numberInput renders custom width 1`] = `
         <button
           aria-label="Minus"
           class="pf-v6-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-:r18:"
+          data-ouia-component-id="OUIA-Generated-Button-control-_r_18_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -452,7 +452,7 @@ exports[`numberInput renders custom width 1`] = `
           <input
             aria-invalid="false"
             aria-label="Input"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:r1a:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-_r_1a_"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             readonly=""
@@ -467,7 +467,7 @@ exports[`numberInput renders custom width 1`] = `
         <button
           aria-label="Plus"
           class="pf-v6-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-:r1b:"
+          data-ouia-component-id="OUIA-Generated-Button-control-_r_1b_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -515,7 +515,7 @@ exports[`numberInput renders defaults & extra props 1`] = `
         <button
           aria-label="Minus"
           class="pf-v6-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-:r0:"
+          data-ouia-component-id="OUIA-Generated-Button-control-_r_0_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -552,7 +552,7 @@ exports[`numberInput renders defaults & extra props 1`] = `
           <input
             aria-invalid="false"
             aria-label="Input"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:r2:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-_r_2_"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             readonly=""
@@ -567,7 +567,7 @@ exports[`numberInput renders defaults & extra props 1`] = `
         <button
           aria-label="Plus"
           class="pf-v6-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-:r3:"
+          data-ouia-component-id="OUIA-Generated-Button-control-_r_3_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -614,7 +614,7 @@ exports[`numberInput renders disabled 1`] = `
         <button
           aria-label="Minus"
           class="pf-v6-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-:rk:"
+          data-ouia-component-id="OUIA-Generated-Button-control-_r_k_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -652,7 +652,7 @@ exports[`numberInput renders disabled 1`] = `
           <input
             aria-invalid="false"
             aria-label="Input"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:rm:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-_r_m_"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             disabled=""
@@ -668,7 +668,7 @@ exports[`numberInput renders disabled 1`] = `
         <button
           aria-label="Plus"
           class="pf-v6-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-:rn:"
+          data-ouia-component-id="OUIA-Generated-Button-control-_r_n_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -716,7 +716,7 @@ exports[`numberInput renders error validated 1`] = `
         <button
           aria-label="Minus"
           class="pf-v6-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-:r8:"
+          data-ouia-component-id="OUIA-Generated-Button-control-_r_8_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -753,7 +753,7 @@ exports[`numberInput renders error validated 1`] = `
           <input
             aria-invalid="true"
             aria-label="Input"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:ra:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-_r_a_"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             readonly=""
@@ -789,7 +789,7 @@ exports[`numberInput renders error validated 1`] = `
         <button
           aria-label="Plus"
           class="pf-v6-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-:rb:"
+          data-ouia-component-id="OUIA-Generated-Button-control-_r_b_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -836,7 +836,7 @@ exports[`numberInput renders success validated 1`] = `
         <button
           aria-label="Minus"
           class="pf-v6-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-:r4:"
+          data-ouia-component-id="OUIA-Generated-Button-control-_r_4_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -873,7 +873,7 @@ exports[`numberInput renders success validated 1`] = `
           <input
             aria-invalid="false"
             aria-label="Input"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:r6:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-_r_6_"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             readonly=""
@@ -909,7 +909,7 @@ exports[`numberInput renders success validated 1`] = `
         <button
           aria-label="Plus"
           class="pf-v6-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-:r7:"
+          data-ouia-component-id="OUIA-Generated-Button-control-_r_7_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -961,7 +961,7 @@ exports[`numberInput renders unit & position 1`] = `
         <button
           aria-label="Minus"
           class="pf-v6-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-:r14:"
+          data-ouia-component-id="OUIA-Generated-Button-control-_r_14_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -998,7 +998,7 @@ exports[`numberInput renders unit & position 1`] = `
           <input
             aria-invalid="false"
             aria-label="Input"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:r16:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-_r_16_"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             readonly=""
@@ -1013,7 +1013,7 @@ exports[`numberInput renders unit & position 1`] = `
         <button
           aria-label="Plus"
           class="pf-v6-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-:r17:"
+          data-ouia-component-id="OUIA-Generated-Button-control-_r_17_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -1060,7 +1060,7 @@ exports[`numberInput renders unit 1`] = `
         <button
           aria-label="Minus"
           class="pf-v6-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-:r10:"
+          data-ouia-component-id="OUIA-Generated-Button-control-_r_10_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -1097,7 +1097,7 @@ exports[`numberInput renders unit 1`] = `
           <input
             aria-invalid="false"
             aria-label="Input"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:r12:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-_r_12_"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             readonly=""
@@ -1112,7 +1112,7 @@ exports[`numberInput renders unit 1`] = `
         <button
           aria-label="Plus"
           class="pf-v6-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-:r13:"
+          data-ouia-component-id="OUIA-Generated-Button-control-_r_13_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -1164,7 +1164,7 @@ exports[`numberInput renders value 1`] = `
         <button
           aria-label="Minus"
           class="pf-v6-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-:rg:"
+          data-ouia-component-id="OUIA-Generated-Button-control-_r_g_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -1201,7 +1201,7 @@ exports[`numberInput renders value 1`] = `
           <input
             aria-invalid="false"
             aria-label="Input"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:ri:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-_r_i_"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             readonly=""
@@ -1216,7 +1216,7 @@ exports[`numberInput renders value 1`] = `
         <button
           aria-label="Plus"
           class="pf-v6-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-:rj:"
+          data-ouia-component-id="OUIA-Generated-Button-control-_r_j_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -1263,7 +1263,7 @@ exports[`numberInput renders warning validated 1`] = `
         <button
           aria-label="Minus"
           class="pf-v6-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-:rc:"
+          data-ouia-component-id="OUIA-Generated-Button-control-_r_c_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -1300,7 +1300,7 @@ exports[`numberInput renders warning validated 1`] = `
           <input
             aria-invalid="false"
             aria-label="Input"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:re:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-_r_e_"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             readonly=""
@@ -1336,7 +1336,7 @@ exports[`numberInput renders warning validated 1`] = `
         <button
           aria-label="Plus"
           class="pf-v6-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-:rf:"
+          data-ouia-component-id="OUIA-Generated-Button-control-_r_f_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
diff --git a/packages/react-core/src/components/OverflowMenu/__tests__/Generated/__snapshots__/OverflowMenuDropdownItem.test.tsx.snap b/packages/react-core/src/components/OverflowMenu/__tests__/Generated/__snapshots__/OverflowMenuDropdownItem.test.tsx.snap
index 1094f7e3e5c..5f37afa8709 100644
--- a/packages/react-core/src/components/OverflowMenu/__tests__/Generated/__snapshots__/OverflowMenuDropdownItem.test.tsx.snap
+++ b/packages/react-core/src/components/OverflowMenu/__tests__/Generated/__snapshots__/OverflowMenuDropdownItem.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`OverflowMenuDropdownItem should match snapshot 1`] = `
 <DocumentFragment>
   <li
     class="pf-v6-c-menu__list-item"
-    data-ouia-component-id="OUIA-Generated-DropdownItem-:r0:"
+    data-ouia-component-id="OUIA-Generated-DropdownItem-_r_0_"
     data-ouia-component-type="PF6/DropdownItem"
     data-ouia-safe="true"
     role="none"
diff --git a/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap b/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap
index c7376a7f41f..e37846e24e8 100644
--- a/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap
+++ b/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap
@@ -123,7 +123,7 @@ exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax
             <nav
               aria-label="Breadcrumb"
               class="pf-v6-c-breadcrumb"
-              data-ouia-component-id="OUIA-Generated-Breadcrumb-:r3:"
+              data-ouia-component-id="OUIA-Generated-Breadcrumb-_r_3_"
               data-ouia-component-type="PF6/Breadcrumb"
               data-ouia-safe="true"
             >
@@ -275,7 +275,7 @@ exports[`Page Check page to verify breadcrumb is created 1`] = `
               <nav
                 aria-label="Breadcrumb"
                 class="pf-v6-c-breadcrumb"
-                data-ouia-component-id="OUIA-Generated-Breadcrumb-:r0:"
+                data-ouia-component-id="OUIA-Generated-Breadcrumb-_r_0_"
                 data-ouia-component-type="PF6/Breadcrumb"
                 data-ouia-safe="true"
               >
@@ -428,7 +428,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
               <nav
                 aria-label="Breadcrumb"
                 class="pf-v6-c-breadcrumb"
-                data-ouia-component-id="OUIA-Generated-Breadcrumb-:r6:"
+                data-ouia-component-id="OUIA-Generated-Breadcrumb-_r_6_"
                 data-ouia-component-type="PF6/Breadcrumb"
                 data-ouia-safe="true"
               >
@@ -530,7 +530,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
           <nav
             aria-label="Nav"
             class="pf-v6-c-nav pf-m-horizontal pf-m-subnav"
-            data-ouia-component-id="OUIA-Generated-Nav-horizontal-subnav-:r8:"
+            data-ouia-component-id="OUIA-Generated-Nav-horizontal-subnav-_r_8_"
             data-ouia-component-type="PF6/Nav"
             data-ouia-safe="true"
           >
@@ -540,7 +540,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
             >
               <li
                 class="pf-v6-c-nav__item"
-                data-ouia-component-id="OUIA-Generated-NavItem-:ra:"
+                data-ouia-component-id="OUIA-Generated-NavItem-_r_a_"
                 data-ouia-component-type="PF6/NavItem"
                 data-ouia-safe="true"
               >
@@ -557,7 +557,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
               </li>
               <li
                 class="pf-v6-c-nav__item"
-                data-ouia-component-id="OUIA-Generated-NavItem-:rb:"
+                data-ouia-component-id="OUIA-Generated-NavItem-_r_b_"
                 data-ouia-component-type="PF6/NavItem"
                 data-ouia-safe="true"
               >
@@ -573,7 +573,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
               </li>
               <li
                 class="pf-v6-c-nav__item"
-                data-ouia-component-id="OUIA-Generated-NavItem-:rc:"
+                data-ouia-component-id="OUIA-Generated-NavItem-_r_c_"
                 data-ouia-component-type="PF6/NavItem"
                 data-ouia-safe="true"
               >
@@ -589,7 +589,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
               </li>
               <li
                 class="pf-v6-c-nav__item"
-                data-ouia-component-id="OUIA-Generated-NavItem-:rd:"
+                data-ouia-component-id="OUIA-Generated-NavItem-_r_d_"
                 data-ouia-component-type="PF6/NavItem"
                 data-ouia-safe="true"
               >
@@ -605,7 +605,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
               </li>
               <li
                 class="pf-v6-c-nav__item"
-                data-ouia-component-id="OUIA-Generated-NavItem-:re:"
+                data-ouia-component-id="OUIA-Generated-NavItem-_r_e_"
                 data-ouia-component-type="PF6/NavItem"
                 data-ouia-safe="true"
               >
@@ -678,7 +678,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
               <nav
                 aria-label="Nav"
                 class="pf-v6-c-nav pf-m-horizontal pf-m-subnav"
-                data-ouia-component-id="OUIA-Generated-Nav-horizontal-subnav-:rh:"
+                data-ouia-component-id="OUIA-Generated-Nav-horizontal-subnav-_r_h_"
                 data-ouia-component-type="PF6/Nav"
                 data-ouia-safe="true"
               >
@@ -688,7 +688,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
                 >
                   <li
                     class="pf-v6-c-nav__item"
-                    data-ouia-component-id="OUIA-Generated-NavItem-:rj:"
+                    data-ouia-component-id="OUIA-Generated-NavItem-_r_j_"
                     data-ouia-component-type="PF6/NavItem"
                     data-ouia-safe="true"
                   >
@@ -705,7 +705,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
                   </li>
                   <li
                     class="pf-v6-c-nav__item"
-                    data-ouia-component-id="OUIA-Generated-NavItem-:rk:"
+                    data-ouia-component-id="OUIA-Generated-NavItem-_r_k_"
                     data-ouia-component-type="PF6/NavItem"
                     data-ouia-safe="true"
                   >
@@ -721,7 +721,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
                   </li>
                   <li
                     class="pf-v6-c-nav__item"
-                    data-ouia-component-id="OUIA-Generated-NavItem-:rl:"
+                    data-ouia-component-id="OUIA-Generated-NavItem-_r_l_"
                     data-ouia-component-type="PF6/NavItem"
                     data-ouia-safe="true"
                   >
@@ -737,7 +737,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
                   </li>
                   <li
                     class="pf-v6-c-nav__item"
-                    data-ouia-component-id="OUIA-Generated-NavItem-:rm:"
+                    data-ouia-component-id="OUIA-Generated-NavItem-_r_m_"
                     data-ouia-component-type="PF6/NavItem"
                     data-ouia-safe="true"
                   >
@@ -753,7 +753,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
                   </li>
                   <li
                     class="pf-v6-c-nav__item"
-                    data-ouia-component-id="OUIA-Generated-NavItem-:rn:"
+                    data-ouia-component-id="OUIA-Generated-NavItem-_r_n_"
                     data-ouia-component-type="PF6/NavItem"
                     data-ouia-safe="true"
                   >
@@ -789,7 +789,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
                     <nav
                       aria-label="Breadcrumb"
                       class="pf-v6-c-breadcrumb"
-                      data-ouia-component-id="OUIA-Generated-Breadcrumb-:rp:"
+                      data-ouia-component-id="OUIA-Generated-Breadcrumb-_r_p_"
                       data-ouia-component-type="PF6/Breadcrumb"
                       data-ouia-safe="true"
                     >
@@ -920,7 +920,7 @@ exports[`Page Check page to verify skip to content points to main content region
     >
       <a
         class="pf-v6-c-button pf-m-primary"
-        data-ouia-component-id="OUIA-Generated-Button-primary-:rq:"
+        data-ouia-component-id="OUIA-Generated-Button-primary-_r_q_"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         href="#main-content-page-layout-test-nav"
@@ -964,7 +964,7 @@ exports[`Page Check page to verify skip to content points to main content region
               <nav
                 aria-label="Breadcrumb"
                 class="pf-v6-c-breadcrumb"
-                data-ouia-component-id="OUIA-Generated-Breadcrumb-:rr:"
+                data-ouia-component-id="OUIA-Generated-Breadcrumb-_r_r_"
                 data-ouia-component-type="PF6/Breadcrumb"
                 data-ouia-safe="true"
               >
@@ -1161,7 +1161,7 @@ exports[`Page Sticky bottom breadcrumb on all height breakpoints - PageBreadcrum
             <nav
               aria-label="Breadcrumb"
               class="pf-v6-c-breadcrumb"
-              data-ouia-component-id="OUIA-Generated-Breadcrumb-:r5:"
+              data-ouia-component-id="OUIA-Generated-Breadcrumb-_r_5_"
               data-ouia-component-type="PF6/Breadcrumb"
               data-ouia-safe="true"
             >
@@ -1313,7 +1313,7 @@ exports[`Page Verify sticky bottom breadcrumb on all height breakpoints 1`] = `
               <nav
                 aria-label="Breadcrumb"
                 class="pf-v6-c-breadcrumb"
-                data-ouia-component-id="OUIA-Generated-Breadcrumb-:r2:"
+                data-ouia-component-id="OUIA-Generated-Breadcrumb-_r_2_"
                 data-ouia-component-type="PF6/Breadcrumb"
                 data-ouia-safe="true"
               >
@@ -1463,7 +1463,7 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints - PageBread
             <nav
               aria-label="Breadcrumb"
               class="pf-v6-c-breadcrumb"
-              data-ouia-component-id="OUIA-Generated-Breadcrumb-:r4:"
+              data-ouia-component-id="OUIA-Generated-Breadcrumb-_r_4_"
               data-ouia-component-type="PF6/Breadcrumb"
               data-ouia-safe="true"
             >
@@ -1615,7 +1615,7 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints 1`] = `
               <nav
                 aria-label="Breadcrumb"
                 class="pf-v6-c-breadcrumb"
-                data-ouia-component-id="OUIA-Generated-Breadcrumb-:r1:"
+                data-ouia-component-id="OUIA-Generated-Breadcrumb-_r_1_"
                 data-ouia-component-type="PF6/Breadcrumb"
                 data-ouia-safe="true"
               >
diff --git a/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationNavigation.test.tsx.snap b/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationNavigation.test.tsx.snap
index b0d1c14b399..7e23dd8058a 100644
--- a/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationNavigation.test.tsx.snap
+++ b/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationNavigation.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
         aria-label="Go to first page"
         class="pf-v6-c-button pf-m-plain"
         data-action="first"
-        data-ouia-component-id="OUIA-Generated-Button-plain-:r0:"
+        data-ouia-component-id="OUIA-Generated-Button-plain-_r_0_"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -50,7 +50,7 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
         aria-label="Go to previous page"
         class="pf-v6-c-button pf-m-plain"
         data-action="previous"
-        data-ouia-component-id="OUIA-Generated-Button-plain-:r1:"
+        data-ouia-component-id="OUIA-Generated-Button-plain-_r_1_"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -83,7 +83,7 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
         <input
           aria-invalid="false"
           aria-label="Current page"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-:r3:"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-_r_3_"
           data-ouia-component-type="PF6/TextInput"
           data-ouia-safe="true"
           max="0"
@@ -100,7 +100,7 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
         aria-label="Go to next page"
         class="pf-v6-c-button pf-m-plain"
         data-action="next"
-        data-ouia-component-id="OUIA-Generated-Button-plain-:r4:"
+        data-ouia-component-id="OUIA-Generated-Button-plain-_r_4_"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -131,7 +131,7 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
         aria-label="Go to last page"
         class="pf-v6-c-button pf-m-plain"
         data-action="last"
-        data-ouia-component-id="OUIA-Generated-Button-plain-:r5:"
+        data-ouia-component-id="OUIA-Generated-Button-plain-_r_5_"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
diff --git a/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationOptionsMenu.test.tsx.snap b/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationOptionsMenu.test.tsx.snap
index 11f32b6df6b..e0e77ecd4ca 100644
--- a/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationOptionsMenu.test.tsx.snap
+++ b/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationOptionsMenu.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`PaginationOptionsMenu should match snapshot (auto-generated) 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
-      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-:r1:"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-_r_1_"
       data-ouia-component-type="PF6/MenuToggle"
       data-ouia-safe="true"
       id="''-toggle"
diff --git a/packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap b/packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap
index e03c93ff80c..3b17b8fa1e2 100644
--- a/packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap
+++ b/packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-pagination pf-m-inset-2xl pf-m-inset-2xl-on-sm pf-m-inset-2xl-on-md pf-m-inset-2xl-on-lg pf-m-inset-2xl-on-xl pf-m-inset-2xl-on-2xl"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-:rdq:"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-_r_dq_"
     data-ouia-component-type="PF6/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
@@ -29,7 +29,7 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
         aria-expanded="false"
         aria-haspopup="listbox"
         class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
-        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-:rds:"
+        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-_r_ds_"
         data-ouia-component-type="PF6/MenuToggle"
         data-ouia-safe="true"
         id="options-menu-top-toggle"
@@ -81,7 +81,7 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
           aria-label="Go to first page"
           class="pf-v6-c-button pf-m-plain"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rdt:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_dt_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -113,7 +113,7 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
           aria-label="Go to previous page"
           class="pf-v6-c-button pf-m-plain"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rdu:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_du_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -147,7 +147,7 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
           <input
             aria-invalid="false"
             aria-label="Current page"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:re0:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-_r_e0_"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             max="2"
@@ -164,7 +164,7 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
           aria-label="Go to next page"
           class="pf-v6-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:re1:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_e1_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -195,7 +195,7 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
           aria-label="Go to last page"
           class="pf-v6-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:re2:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_e2_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -229,7 +229,7 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-pagination pf-m-inset-lg pf-m-inset-lg-on-sm pf-m-inset-lg-on-md pf-m-inset-lg-on-lg pf-m-inset-lg-on-xl pf-m-inset-lg-on-2xl"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-:rd8:"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-_r_d8_"
     data-ouia-component-type="PF6/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
@@ -254,7 +254,7 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
         aria-expanded="false"
         aria-haspopup="listbox"
         class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
-        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-:rda:"
+        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-_r_da_"
         data-ouia-component-type="PF6/MenuToggle"
         data-ouia-safe="true"
         id="options-menu-top-toggle"
@@ -306,7 +306,7 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
           aria-label="Go to first page"
           class="pf-v6-c-button pf-m-plain"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rdb:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_db_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -338,7 +338,7 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
           aria-label="Go to previous page"
           class="pf-v6-c-button pf-m-plain"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rdc:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_dc_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -372,7 +372,7 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
           <input
             aria-invalid="false"
             aria-label="Current page"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:rde:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-_r_de_"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             max="2"
@@ -389,7 +389,7 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
           aria-label="Go to next page"
           class="pf-v6-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rdf:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_df_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -420,7 +420,7 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
           aria-label="Go to last page"
           class="pf-v6-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rdg:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_dg_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -454,7 +454,7 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-pagination pf-m-inset-md pf-m-inset-md-on-sm pf-m-inset-md-on-md pf-m-inset-md-on-lg pf-m-inset-md-on-xl pf-m-inset-md-on-2xl"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-:rcv:"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-_r_cv_"
     data-ouia-component-type="PF6/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
@@ -479,7 +479,7 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
         aria-expanded="false"
         aria-haspopup="listbox"
         class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
-        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-:rd1:"
+        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-_r_d1_"
         data-ouia-component-type="PF6/MenuToggle"
         data-ouia-safe="true"
         id="options-menu-top-toggle"
@@ -531,7 +531,7 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
           aria-label="Go to first page"
           class="pf-v6-c-button pf-m-plain"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rd2:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_d2_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -563,7 +563,7 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
           aria-label="Go to previous page"
           class="pf-v6-c-button pf-m-plain"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rd3:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_d3_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -597,7 +597,7 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
           <input
             aria-invalid="false"
             aria-label="Current page"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:rd5:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-_r_d5_"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             max="2"
@@ -614,7 +614,7 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
           aria-label="Go to next page"
           class="pf-v6-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rd6:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_d6_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -645,7 +645,7 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
           aria-label="Go to last page"
           class="pf-v6-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rd7:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_d7_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -679,7 +679,7 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-pagination pf-m-inset-none pf-m-inset-none-on-sm pf-m-inset-none-on-md pf-m-inset-none-on-lg pf-m-inset-none-on-xl pf-m-inset-none-on-2xl"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-:rcd:"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-_r_cd_"
     data-ouia-component-type="PF6/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
@@ -704,7 +704,7 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
         aria-expanded="false"
         aria-haspopup="listbox"
         class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
-        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-:rcf:"
+        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-_r_cf_"
         data-ouia-component-type="PF6/MenuToggle"
         data-ouia-safe="true"
         id="options-menu-top-toggle"
@@ -756,7 +756,7 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
           aria-label="Go to first page"
           class="pf-v6-c-button pf-m-plain"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rcg:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_cg_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -788,7 +788,7 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
           aria-label="Go to previous page"
           class="pf-v6-c-button pf-m-plain"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rch:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_ch_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -822,7 +822,7 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
           <input
             aria-invalid="false"
             aria-label="Current page"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:rcj:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-_r_cj_"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             max="2"
@@ -839,7 +839,7 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
           aria-label="Go to next page"
           class="pf-v6-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rck:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_ck_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -870,7 +870,7 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
           aria-label="Go to last page"
           class="pf-v6-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rcl:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_cl_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -904,7 +904,7 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-pagination pf-m-inset-sm pf-m-inset-sm-on-sm pf-m-inset-sm-on-md pf-m-inset-sm-on-lg pf-m-inset-sm-on-xl pf-m-inset-sm-on-2xl"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-:rcm:"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-_r_cm_"
     data-ouia-component-type="PF6/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
@@ -929,7 +929,7 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
         aria-expanded="false"
         aria-haspopup="listbox"
         class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
-        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-:rco:"
+        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-_r_co_"
         data-ouia-component-type="PF6/MenuToggle"
         data-ouia-safe="true"
         id="options-menu-top-toggle"
@@ -981,7 +981,7 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
           aria-label="Go to first page"
           class="pf-v6-c-button pf-m-plain"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rcp:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_cp_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -1013,7 +1013,7 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
           aria-label="Go to previous page"
           class="pf-v6-c-button pf-m-plain"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rcq:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_cq_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -1047,7 +1047,7 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
           <input
             aria-invalid="false"
             aria-label="Current page"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:rcs:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-_r_cs_"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             max="2"
@@ -1064,7 +1064,7 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
           aria-label="Go to next page"
           class="pf-v6-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rct:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_ct_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -1095,7 +1095,7 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
           aria-label="Go to last page"
           class="pf-v6-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rcu:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_cu_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -1129,7 +1129,7 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-pagination pf-m-inset-xl pf-m-inset-xl-on-sm pf-m-inset-xl-on-md pf-m-inset-xl-on-lg pf-m-inset-xl-on-xl pf-m-inset-xl-on-2xl"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-:rdh:"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-_r_dh_"
     data-ouia-component-type="PF6/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
@@ -1154,7 +1154,7 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
         aria-expanded="false"
         aria-haspopup="listbox"
         class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
-        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-:rdj:"
+        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-_r_dj_"
         data-ouia-component-type="PF6/MenuToggle"
         data-ouia-safe="true"
         id="options-menu-top-toggle"
@@ -1206,7 +1206,7 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
           aria-label="Go to first page"
           class="pf-v6-c-button pf-m-plain"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rdk:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_dk_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -1238,7 +1238,7 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
           aria-label="Go to previous page"
           class="pf-v6-c-button pf-m-plain"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rdl:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_dl_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -1272,7 +1272,7 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
           <input
             aria-invalid="false"
             aria-label="Current page"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:rdn:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-_r_dn_"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             max="2"
@@ -1289,7 +1289,7 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
           aria-label="Go to next page"
           class="pf-v6-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rdo:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_do_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -1320,7 +1320,7 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
           aria-label="Go to last page"
           class="pf-v6-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rdp:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_dp_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -1354,7 +1354,7 @@ exports[`Pagination component render custom pagination toggle 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-pagination"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-:r3j:"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-_r_3j_"
     data-ouia-component-type="PF6/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
@@ -1372,7 +1372,7 @@ exports[`Pagination component render custom pagination toggle 1`] = `
         aria-expanded="false"
         aria-haspopup="listbox"
         class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
-        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-:r3l:"
+        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-_r_3l_"
         data-ouia-component-type="PF6/MenuToggle"
         data-ouia-safe="true"
         id="options-menu-top-toggle"
@@ -1417,7 +1417,7 @@ exports[`Pagination component render custom pagination toggle 1`] = `
           aria-label="Go to first page"
           class="pf-v6-c-button pf-m-plain"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r3m:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_3m_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -1449,7 +1449,7 @@ exports[`Pagination component render custom pagination toggle 1`] = `
           aria-label="Go to previous page"
           class="pf-v6-c-button pf-m-plain"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r3n:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_3n_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -1483,7 +1483,7 @@ exports[`Pagination component render custom pagination toggle 1`] = `
           <input
             aria-invalid="false"
             aria-label="Current page"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:r3p:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-_r_3p_"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             max="4"
@@ -1505,7 +1505,7 @@ exports[`Pagination component render custom pagination toggle 1`] = `
           aria-label="Go to next page"
           class="pf-v6-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r3q:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_3q_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -1536,7 +1536,7 @@ exports[`Pagination component render custom pagination toggle 1`] = `
           aria-label="Go to last page"
           class="pf-v6-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r3r:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_3r_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -1569,7 +1569,7 @@ exports[`Pagination component render custom perPageOptions 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-pagination"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-:r2h:"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-_r_2h_"
     data-ouia-component-type="PF6/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
@@ -1594,7 +1594,7 @@ exports[`Pagination component render custom perPageOptions 1`] = `
         aria-expanded="false"
         aria-haspopup="listbox"
         class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
-        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-:r2j:"
+        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-_r_2j_"
         data-ouia-component-type="PF6/MenuToggle"
         data-ouia-safe="true"
         id="options-menu-top-toggle"
@@ -1646,7 +1646,7 @@ exports[`Pagination component render custom perPageOptions 1`] = `
           aria-label="Go to first page"
           class="pf-v6-c-button pf-m-plain"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r2k:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_2k_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -1678,7 +1678,7 @@ exports[`Pagination component render custom perPageOptions 1`] = `
           aria-label="Go to previous page"
           class="pf-v6-c-button pf-m-plain"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r2l:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_2l_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -1712,7 +1712,7 @@ exports[`Pagination component render custom perPageOptions 1`] = `
           <input
             aria-invalid="false"
             aria-label="Current page"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:r2n:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-_r_2n_"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             max="4"
@@ -1734,7 +1734,7 @@ exports[`Pagination component render custom perPageOptions 1`] = `
           aria-label="Go to next page"
           class="pf-v6-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r2o:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_2o_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -1765,7 +1765,7 @@ exports[`Pagination component render custom perPageOptions 1`] = `
           aria-label="Go to last page"
           class="pf-v6-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r2p:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_2p_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -1798,7 +1798,7 @@ exports[`Pagination component render custom start end 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-pagination"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-:r31:"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-_r_31_"
     data-ouia-component-type="PF6/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
@@ -1823,7 +1823,7 @@ exports[`Pagination component render custom start end 1`] = `
         aria-expanded="false"
         aria-haspopup="listbox"
         class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
-        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-:r33:"
+        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-_r_33_"
         data-ouia-component-type="PF6/MenuToggle"
         data-ouia-safe="true"
         id="options-menu-top-toggle"
@@ -1875,7 +1875,7 @@ exports[`Pagination component render custom start end 1`] = `
           aria-label="Go to first page"
           class="pf-v6-c-button pf-m-plain"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r34:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_34_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -1906,7 +1906,7 @@ exports[`Pagination component render custom start end 1`] = `
           aria-label="Go to previous page"
           class="pf-v6-c-button pf-m-plain"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r35:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_35_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -1939,7 +1939,7 @@ exports[`Pagination component render custom start end 1`] = `
           <input
             aria-invalid="false"
             aria-label="Current page"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:r37:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-_r_37_"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             max="4"
@@ -1961,7 +1961,7 @@ exports[`Pagination component render custom start end 1`] = `
           aria-label="Go to next page"
           class="pf-v6-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r38:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_38_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -1992,7 +1992,7 @@ exports[`Pagination component render custom start end 1`] = `
           aria-label="Go to last page"
           class="pf-v6-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r39:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_39_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -2025,7 +2025,7 @@ exports[`Pagination component render empty per page options 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-pagination"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-:r2q:"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-_r_2q_"
     data-ouia-component-type="PF6/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
@@ -2054,7 +2054,7 @@ exports[`Pagination component render empty per page options 1`] = `
           aria-label="Go to first page"
           class="pf-v6-c-button pf-m-plain"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r2r:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_2r_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -2086,7 +2086,7 @@ exports[`Pagination component render empty per page options 1`] = `
           aria-label="Go to previous page"
           class="pf-v6-c-button pf-m-plain"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r2s:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_2s_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -2120,7 +2120,7 @@ exports[`Pagination component render empty per page options 1`] = `
           <input
             aria-invalid="false"
             aria-label="Current page"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:r2u:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-_r_2u_"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             max="4"
@@ -2142,7 +2142,7 @@ exports[`Pagination component render empty per page options 1`] = `
           aria-label="Go to next page"
           class="pf-v6-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r2v:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_2v_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -2173,7 +2173,7 @@ exports[`Pagination component render empty per page options 1`] = `
           aria-label="Go to last page"
           class="pf-v6-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r30:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_30_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -2206,7 +2206,7 @@ exports[`Pagination component render last page 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-pagination"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-:r28:"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-_r_28_"
     data-ouia-component-type="PF6/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
@@ -2231,7 +2231,7 @@ exports[`Pagination component render last page 1`] = `
         aria-expanded="false"
         aria-haspopup="listbox"
         class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
-        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-:r2a:"
+        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-_r_2a_"
         data-ouia-component-type="PF6/MenuToggle"
         data-ouia-safe="true"
         id="options-menu-top-toggle"
@@ -2283,7 +2283,7 @@ exports[`Pagination component render last page 1`] = `
           aria-label="Go to first page"
           class="pf-v6-c-button pf-m-plain"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r2b:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_2b_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -2314,7 +2314,7 @@ exports[`Pagination component render last page 1`] = `
           aria-label="Go to previous page"
           class="pf-v6-c-button pf-m-plain"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r2c:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_2c_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -2347,7 +2347,7 @@ exports[`Pagination component render last page 1`] = `
           <input
             aria-invalid="false"
             aria-label="Current page"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:r2e:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-_r_2e_"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             max="2"
@@ -2369,7 +2369,7 @@ exports[`Pagination component render last page 1`] = `
           aria-label="Go to next page"
           class="pf-v6-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r2f:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_2f_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -2401,7 +2401,7 @@ exports[`Pagination component render last page 1`] = `
           aria-label="Go to last page"
           class="pf-v6-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r2g:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_2g_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -2435,7 +2435,7 @@ exports[`Pagination component render limited number of pages 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-pagination"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-:r1m:"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-_r_1m_"
     data-ouia-component-type="PF6/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
@@ -2460,7 +2460,7 @@ exports[`Pagination component render limited number of pages 1`] = `
         aria-expanded="false"
         aria-haspopup="listbox"
         class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
-        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-:r1o:"
+        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-_r_1o_"
         data-ouia-component-type="PF6/MenuToggle"
         data-ouia-safe="true"
         id="options-menu-top-toggle"
@@ -2512,7 +2512,7 @@ exports[`Pagination component render limited number of pages 1`] = `
           aria-label="Go to first page"
           class="pf-v6-c-button pf-m-plain"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r1p:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_1p_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -2544,7 +2544,7 @@ exports[`Pagination component render limited number of pages 1`] = `
           aria-label="Go to previous page"
           class="pf-v6-c-button pf-m-plain"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r1q:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_1q_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -2578,7 +2578,7 @@ exports[`Pagination component render limited number of pages 1`] = `
           <input
             aria-invalid="false"
             aria-label="Current page"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:r1s:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-_r_1s_"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             disabled=""
@@ -2601,7 +2601,7 @@ exports[`Pagination component render limited number of pages 1`] = `
           aria-label="Go to next page"
           class="pf-v6-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r1t:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_1t_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -2633,7 +2633,7 @@ exports[`Pagination component render limited number of pages 1`] = `
           aria-label="Go to last page"
           class="pf-v6-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r1u:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_1u_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -2667,7 +2667,7 @@ exports[`Pagination component render should render correctly bottom 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-pagination pf-m-bottom"
-    data-ouia-component-id="OUIA-Generated-Pagination-bottom-:r9:"
+    data-ouia-component-id="OUIA-Generated-Pagination-bottom-_r_9_"
     data-ouia-component-type="PF6/Pagination"
     data-ouia-safe="true"
     id="options-menu-bottom-pagination"
@@ -2680,7 +2680,7 @@ exports[`Pagination component render should render correctly bottom 1`] = `
         aria-expanded="false"
         aria-haspopup="listbox"
         class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
-        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-:rb:"
+        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-_r_b_"
         data-ouia-component-type="PF6/MenuToggle"
         data-ouia-safe="true"
         id="options-menu-bottom-toggle"
@@ -2732,7 +2732,7 @@ exports[`Pagination component render should render correctly bottom 1`] = `
           aria-label="Go to first page"
           class="pf-v6-c-button pf-m-plain"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rc:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_c_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -2764,7 +2764,7 @@ exports[`Pagination component render should render correctly bottom 1`] = `
           aria-label="Go to previous page"
           class="pf-v6-c-button pf-m-plain"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rd:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_d_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -2798,7 +2798,7 @@ exports[`Pagination component render should render correctly bottom 1`] = `
           <input
             aria-invalid="false"
             aria-label="Current page"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:rf:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-_r_f_"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             max="2"
@@ -2820,7 +2820,7 @@ exports[`Pagination component render should render correctly bottom 1`] = `
           aria-label="Go to next page"
           class="pf-v6-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rg:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_g_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -2851,7 +2851,7 @@ exports[`Pagination component render should render correctly bottom 1`] = `
           aria-label="Go to last page"
           class="pf-v6-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rh:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_h_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -2884,7 +2884,7 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
 <DocumentFragment>
   <div
     class="pf-v6-c-pagination pf-m-bottom pf-m-sticky"
-    data-ouia-component-id="OUIA-Generated-Pagination-bottom-:r14:"
+    data-ouia-component-id="OUIA-Generated-Pagination-bottom-_r_14_"
     data-ouia-component-type="PF6/Pagination"
     data-ouia-safe="true"
     id="options-menu-bottom-pagination"
@@ -2897,7 +2897,7 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
         aria-expanded="false"
         aria-haspopup="listbox"
         class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
-        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-:r16:"
+        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-_r_16_"
         data-ouia-component-type="PF6/MenuToggle"
         data-ouia-safe="true"
         id="options-menu-bottom-toggle"
@@ -2949,7 +2949,7 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
           aria-label="Go to first page"
           class="pf-v6-c-button pf-m-plain"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r17:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_17_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -2981,7 +2981,7 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
           aria-label="Go to previous page"
           class="pf-v6-c-button pf-m-plain"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r18:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_18_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -3015,7 +3015,7 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
           <input
             aria-invalid="false"
             aria-label="Current page"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:r1a:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-_r_1a_"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             max="2"
@@ -3037,7 +3037,7 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
           aria-label="Go to next page"
           class="pf-v6-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r1b:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_1b_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -3068,7 +3068,7 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
           aria-label="Go to last page"
           class="pf-v6-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r1c:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_1c_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -3101,7 +3101,7 @@ exports[`Pagination component render should render correctly compact 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-pagination"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-:ri:"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-_r_i_"
     data-ouia-component-type="PF6/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
@@ -3126,7 +3126,7 @@ exports[`Pagination component render should render correctly compact 1`] = `
         aria-expanded="false"
         aria-haspopup="listbox"
         class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
-        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-:rk:"
+        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-_r_k_"
         data-ouia-component-type="PF6/MenuToggle"
         data-ouia-safe="true"
         id="options-menu-top-toggle"
@@ -3178,7 +3178,7 @@ exports[`Pagination component render should render correctly compact 1`] = `
           aria-label="Go to first page"
           class="pf-v6-c-button pf-m-plain"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rl:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_l_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -3210,7 +3210,7 @@ exports[`Pagination component render should render correctly compact 1`] = `
           aria-label="Go to previous page"
           class="pf-v6-c-button pf-m-plain"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rm:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_m_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -3244,7 +3244,7 @@ exports[`Pagination component render should render correctly compact 1`] = `
           <input
             aria-invalid="false"
             aria-label="Current page"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:ro:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-_r_o_"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             max="2"
@@ -3266,7 +3266,7 @@ exports[`Pagination component render should render correctly compact 1`] = `
           aria-label="Go to next page"
           class="pf-v6-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rp:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_p_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -3297,7 +3297,7 @@ exports[`Pagination component render should render correctly compact 1`] = `
           aria-label="Go to last page"
           class="pf-v6-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rq:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_q_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -3330,7 +3330,7 @@ exports[`Pagination component render should render correctly disabled 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-pagination"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-:r1d:"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-_r_1d_"
     data-ouia-component-type="PF6/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
@@ -3355,7 +3355,7 @@ exports[`Pagination component render should render correctly disabled 1`] = `
         aria-expanded="false"
         aria-haspopup="listbox"
         class="pf-v6-c-menu-toggle pf-m-plain pf-m-text pf-m-disabled"
-        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-:r1f:"
+        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-_r_1f_"
         data-ouia-component-type="PF6/MenuToggle"
         data-ouia-safe="true"
         disabled=""
@@ -3408,7 +3408,7 @@ exports[`Pagination component render should render correctly disabled 1`] = `
           aria-label="Go to first page"
           class="pf-v6-c-button pf-m-plain"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r1g:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_1g_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -3440,7 +3440,7 @@ exports[`Pagination component render should render correctly disabled 1`] = `
           aria-label="Go to previous page"
           class="pf-v6-c-button pf-m-plain"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r1h:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_1h_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -3474,7 +3474,7 @@ exports[`Pagination component render should render correctly disabled 1`] = `
           <input
             aria-invalid="false"
             aria-label="Current page"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:r1j:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-_r_1j_"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             disabled=""
@@ -3497,7 +3497,7 @@ exports[`Pagination component render should render correctly disabled 1`] = `
           aria-label="Go to next page"
           class="pf-v6-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r1k:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_1k_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -3529,7 +3529,7 @@ exports[`Pagination component render should render correctly disabled 1`] = `
           aria-label="Go to last page"
           class="pf-v6-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r1l:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_1l_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -3563,7 +3563,7 @@ exports[`Pagination component render should render correctly sticky 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-pagination pf-m-sticky"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-:rr:"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-_r_r_"
     data-ouia-component-type="PF6/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
@@ -3588,7 +3588,7 @@ exports[`Pagination component render should render correctly sticky 1`] = `
         aria-expanded="false"
         aria-haspopup="listbox"
         class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
-        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-:rt:"
+        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-_r_t_"
         data-ouia-component-type="PF6/MenuToggle"
         data-ouia-safe="true"
         id="options-menu-top-toggle"
@@ -3640,7 +3640,7 @@ exports[`Pagination component render should render correctly sticky 1`] = `
           aria-label="Go to first page"
           class="pf-v6-c-button pf-m-plain"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:ru:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_u_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -3672,7 +3672,7 @@ exports[`Pagination component render should render correctly sticky 1`] = `
           aria-label="Go to previous page"
           class="pf-v6-c-button pf-m-plain"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rv:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_v_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -3706,7 +3706,7 @@ exports[`Pagination component render should render correctly sticky 1`] = `
           <input
             aria-invalid="false"
             aria-label="Current page"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:r11:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-_r_11_"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             max="2"
@@ -3728,7 +3728,7 @@ exports[`Pagination component render should render correctly sticky 1`] = `
           aria-label="Go to next page"
           class="pf-v6-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r12:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_12_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -3759,7 +3759,7 @@ exports[`Pagination component render should render correctly sticky 1`] = `
           aria-label="Go to last page"
           class="pf-v6-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r13:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_13_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -3792,7 +3792,7 @@ exports[`Pagination component render should render correctly top 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-pagination"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-:r0:"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-_r_0_"
     data-ouia-component-type="PF6/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
@@ -3817,7 +3817,7 @@ exports[`Pagination component render should render correctly top 1`] = `
         aria-expanded="false"
         aria-haspopup="listbox"
         class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
-        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-:r2:"
+        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-_r_2_"
         data-ouia-component-type="PF6/MenuToggle"
         data-ouia-safe="true"
         id="options-menu-top-toggle"
@@ -3869,7 +3869,7 @@ exports[`Pagination component render should render correctly top 1`] = `
           aria-label="Go to first page"
           class="pf-v6-c-button pf-m-plain"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r3:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_3_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -3901,7 +3901,7 @@ exports[`Pagination component render should render correctly top 1`] = `
           aria-label="Go to previous page"
           class="pf-v6-c-button pf-m-plain"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r4:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_4_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -3935,7 +3935,7 @@ exports[`Pagination component render should render correctly top 1`] = `
           <input
             aria-invalid="false"
             aria-label="Current page"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:r6:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-_r_6_"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             max="2"
@@ -3957,7 +3957,7 @@ exports[`Pagination component render should render correctly top 1`] = `
           aria-label="Go to next page"
           class="pf-v6-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r7:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_7_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -3988,7 +3988,7 @@ exports[`Pagination component render should render correctly top 1`] = `
           aria-label="Go to last page"
           class="pf-v6-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r8:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_8_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -4021,7 +4021,7 @@ exports[`Pagination component render titles 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-pagination"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-:r3a:"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-_r_3a_"
     data-ouia-component-type="PF6/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
@@ -4046,7 +4046,7 @@ exports[`Pagination component render titles 1`] = `
         aria-expanded="false"
         aria-haspopup="listbox"
         class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
-        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-:r3c:"
+        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-_r_3c_"
         data-ouia-component-type="PF6/MenuToggle"
         data-ouia-safe="true"
         id="options-menu-top-toggle"
@@ -4098,7 +4098,7 @@ exports[`Pagination component render titles 1`] = `
           aria-label="Go to first page"
           class="pf-v6-c-button pf-m-plain"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r3d:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_3d_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -4130,7 +4130,7 @@ exports[`Pagination component render titles 1`] = `
           aria-label="Go to previous page"
           class="pf-v6-c-button pf-m-plain"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r3e:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_3e_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -4164,7 +4164,7 @@ exports[`Pagination component render titles 1`] = `
           <input
             aria-invalid="false"
             aria-label="Current page"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:r3g:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-_r_3g_"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             max="4"
@@ -4186,7 +4186,7 @@ exports[`Pagination component render titles 1`] = `
           aria-label="Go to next page"
           class="pf-v6-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r3h:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_3h_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -4217,7 +4217,7 @@ exports[`Pagination component render titles 1`] = `
           aria-label="Go to last page"
           class="pf-v6-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r3i:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_3i_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -4250,7 +4250,7 @@ exports[`Pagination component render up drop direction 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-pagination"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-:r3s:"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-_r_3s_"
     data-ouia-component-type="PF6/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
@@ -4275,7 +4275,7 @@ exports[`Pagination component render up drop direction 1`] = `
         aria-expanded="false"
         aria-haspopup="listbox"
         class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
-        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-:r3u:"
+        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-_r_3u_"
         data-ouia-component-type="PF6/MenuToggle"
         data-ouia-safe="true"
         id="options-menu-top-toggle"
@@ -4327,7 +4327,7 @@ exports[`Pagination component render up drop direction 1`] = `
           aria-label="Go to first page"
           class="pf-v6-c-button pf-m-plain"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r3v:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_3v_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -4359,7 +4359,7 @@ exports[`Pagination component render up drop direction 1`] = `
           aria-label="Go to previous page"
           class="pf-v6-c-button pf-m-plain"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r40:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_40_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -4393,7 +4393,7 @@ exports[`Pagination component render up drop direction 1`] = `
           <input
             aria-invalid="false"
             aria-label="Current page"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:r42:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-_r_42_"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             max="4"
@@ -4415,7 +4415,7 @@ exports[`Pagination component render up drop direction 1`] = `
           aria-label="Go to next page"
           class="pf-v6-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r43:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_43_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -4446,7 +4446,7 @@ exports[`Pagination component render up drop direction 1`] = `
           aria-label="Go to last page"
           class="pf-v6-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r44:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_44_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -4479,7 +4479,7 @@ exports[`Pagination component render zero results 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-pagination"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-:r1v:"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-_r_1v_"
     data-ouia-component-type="PF6/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
@@ -4504,7 +4504,7 @@ exports[`Pagination component render zero results 1`] = `
         aria-expanded="false"
         aria-haspopup="listbox"
         class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
-        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-:r21:"
+        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-_r_21_"
         data-ouia-component-type="PF6/MenuToggle"
         data-ouia-safe="true"
         id="options-menu-top-toggle"
@@ -4556,7 +4556,7 @@ exports[`Pagination component render zero results 1`] = `
           aria-label="Go to first page"
           class="pf-v6-c-button pf-m-plain"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r22:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_22_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -4588,7 +4588,7 @@ exports[`Pagination component render zero results 1`] = `
           aria-label="Go to previous page"
           class="pf-v6-c-button pf-m-plain"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r23:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_23_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -4622,7 +4622,7 @@ exports[`Pagination component render zero results 1`] = `
           <input
             aria-invalid="false"
             aria-label="Current page"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:r25:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-_r_25_"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             disabled=""
@@ -4645,7 +4645,7 @@ exports[`Pagination component render zero results 1`] = `
           aria-label="Go to next page"
           class="pf-v6-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r26:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_26_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -4677,7 +4677,7 @@ exports[`Pagination component render zero results 1`] = `
           aria-label="Go to last page"
           class="pf-v6-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r27:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_27_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
diff --git a/packages/react-core/src/components/Popover/__tests__/Generated/__snapshots__/PopoverCloseButton.test.tsx.snap b/packages/react-core/src/components/Popover/__tests__/Generated/__snapshots__/PopoverCloseButton.test.tsx.snap
index 0a1af1190d4..516a7f03855 100644
--- a/packages/react-core/src/components/Popover/__tests__/Generated/__snapshots__/PopoverCloseButton.test.tsx.snap
+++ b/packages/react-core/src/components/Popover/__tests__/Generated/__snapshots__/PopoverCloseButton.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`PopoverCloseButton should match snapshot (auto-generated) 1`] = `
     <button
       aria-label="string"
       class="pf-v6-c-button pf-m-plain"
-      data-ouia-component-id="OUIA-Generated-Button-plain-:r0:"
+      data-ouia-component-id="OUIA-Generated-Button-plain-_r_0_"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       style="pointer-events: auto;"
diff --git a/packages/react-core/src/components/Radio/__tests__/__snapshots__/Radio.test.tsx.snap b/packages/react-core/src/components/Radio/__tests__/__snapshots__/Radio.test.tsx.snap
index 8923ebaefbf..96ef4a4d66a 100644
--- a/packages/react-core/src/components/Radio/__tests__/__snapshots__/Radio.test.tsx.snap
+++ b/packages/react-core/src/components/Radio/__tests__/__snapshots__/Radio.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`Radio controlled 1`] = `
       aria-label="check"
       checked=""
       class="pf-v6-c-radio__input"
-      data-ouia-component-id="OUIA-Generated-Radio-:r1:"
+      data-ouia-component-id="OUIA-Generated-Radio-_r_1_"
       data-ouia-component-type="PF6/Radio"
       data-ouia-safe="true"
       id="check"
@@ -30,7 +30,7 @@ exports[`Radio isDisabled 1`] = `
       aria-invalid="false"
       aria-label="check"
       class="pf-v6-c-radio__input"
-      data-ouia-component-id="OUIA-Generated-Radio-:r5:"
+      data-ouia-component-id="OUIA-Generated-Radio-_r_5_"
       data-ouia-component-type="PF6/Radio"
       data-ouia-safe="true"
       disabled=""
@@ -51,7 +51,7 @@ exports[`Radio isLabelWrapped 1`] = `
     <input
       aria-invalid="false"
       class="pf-v6-c-radio__input"
-      data-ouia-component-id="OUIA-Generated-Radio-:r9:"
+      data-ouia-component-id="OUIA-Generated-Radio-_r_9_"
       data-ouia-component-type="PF6/Radio"
       data-ouia-safe="true"
       id="check"
@@ -76,7 +76,7 @@ exports[`Radio label is function 1`] = `
       aria-invalid="false"
       checked=""
       class="pf-v6-c-radio__input"
-      data-ouia-component-id="OUIA-Generated-Radio-:rd:"
+      data-ouia-component-id="OUIA-Generated-Radio-_r_d_"
       data-ouia-component-type="PF6/Radio"
       data-ouia-safe="true"
       id="check"
@@ -104,7 +104,7 @@ exports[`Radio label is node 1`] = `
       aria-invalid="false"
       checked=""
       class="pf-v6-c-radio__input"
-      data-ouia-component-id="OUIA-Generated-Radio-:rf:"
+      data-ouia-component-id="OUIA-Generated-Radio-_r_f_"
       data-ouia-component-type="PF6/Radio"
       data-ouia-safe="true"
       id="check"
@@ -132,7 +132,7 @@ exports[`Radio label is string 1`] = `
       aria-invalid="false"
       checked=""
       class="pf-v6-c-radio__input"
-      data-ouia-component-id="OUIA-Generated-Radio-:rb:"
+      data-ouia-component-id="OUIA-Generated-Radio-_r_b_"
       data-ouia-component-type="PF6/Radio"
       data-ouia-safe="true"
       id="check"
@@ -163,7 +163,7 @@ exports[`Radio labelPosition is "start" 1`] = `
     <input
       aria-invalid="false"
       class="pf-v6-c-radio__input"
-      data-ouia-component-id="OUIA-Generated-Radio-:r7:"
+      data-ouia-component-id="OUIA-Generated-Radio-_r_7_"
       data-ouia-component-type="PF6/Radio"
       data-ouia-safe="true"
       id="check"
@@ -184,7 +184,7 @@ exports[`Radio passing HTML attribute 1`] = `
       aria-labelledby="labelId"
       checked=""
       class="pf-v6-c-radio__input"
-      data-ouia-component-id="OUIA-Generated-Radio-:rj:"
+      data-ouia-component-id="OUIA-Generated-Radio-_r_j_"
       data-ouia-component-type="PF6/Radio"
       data-ouia-safe="true"
       id="check"
@@ -210,7 +210,7 @@ exports[`Radio passing class 1`] = `
       aria-invalid="false"
       checked=""
       class="pf-v6-c-radio__input"
-      data-ouia-component-id="OUIA-Generated-Radio-:rh:"
+      data-ouia-component-id="OUIA-Generated-Radio-_r_h_"
       data-ouia-component-type="PF6/Radio"
       data-ouia-safe="true"
       id="check"
@@ -236,7 +236,7 @@ exports[`Radio uncontrolled 1`] = `
       aria-invalid="false"
       aria-label="check"
       class="pf-v6-c-radio__input"
-      data-ouia-component-id="OUIA-Generated-Radio-:r3:"
+      data-ouia-component-id="OUIA-Generated-Radio-_r_3_"
       data-ouia-component-type="PF6/Radio"
       data-ouia-safe="true"
       id="check"
diff --git a/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap b/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap
index c8783dc12bc..118e567202e 100644
--- a/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap
+++ b/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap
@@ -375,7 +375,7 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                 >
                   <label
                     class="pf-v6-c-form__label"
-                    for="pf-:r0:"
+                    for="pf-_r_0_"
                   >
                     <span
                       class="pf-v6-c-form__label-text"
@@ -393,7 +393,7 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                   >
                     <input
                       aria-invalid="false"
-                      id="pf-:r0:"
+                      id="pf-_r_0_"
                       type="text"
                       value=""
                     />
diff --git a/packages/react-core/src/components/SkipToContent/__tests__/__snapshots__/SkipToContent.test.tsx.snap b/packages/react-core/src/components/SkipToContent/__tests__/__snapshots__/SkipToContent.test.tsx.snap
index b401a526182..7b4cbba853c 100644
--- a/packages/react-core/src/components/SkipToContent/__tests__/__snapshots__/SkipToContent.test.tsx.snap
+++ b/packages/react-core/src/components/SkipToContent/__tests__/__snapshots__/SkipToContent.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`Verify Skip To Content 1`] = `
   >
     <a
       class="pf-v6-c-button pf-m-primary"
-      data-ouia-component-id="OUIA-Generated-Button-primary-:r0:"
+      data-ouia-component-id="OUIA-Generated-Button-primary-_r_0_"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       href="#main-content"
diff --git a/packages/react-core/src/components/Slider/__tests__/__snapshots__/Slider.test.tsx.snap b/packages/react-core/src/components/Slider/__tests__/__snapshots__/Slider.test.tsx.snap
index dea3a20938c..66fb8becb54 100644
--- a/packages/react-core/src/components/Slider/__tests__/__snapshots__/Slider.test.tsx.snap
+++ b/packages/react-core/src/components/Slider/__tests__/__snapshots__/Slider.test.tsx.snap
@@ -65,7 +65,7 @@ exports[`slider renders continuous slider 1`] = `
         <input
           aria-invalid="false"
           aria-label="Slider value input"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-:r2:"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-_r_2_"
           data-ouia-component-type="PF6/TextInput"
           data-ouia-safe="true"
           type="number"
@@ -81,7 +81,7 @@ exports[`slider renders continuous slider with custom steps 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-slider"
-    data-ouia-component-id="OUIA-Generated-Slider-:r7:"
+    data-ouia-component-id="OUIA-Generated-Slider-_r_7_"
     data-ouia-component-type="PF6/Slider"
     data-ouia-safe="true"
     style="--pf-v6-c-slider--value: 50%; --pf-v6-c-slider__value--c-form-control--width-chars: 1;"
@@ -147,7 +147,7 @@ exports[`slider renders disabled slider 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-slider pf-m-disabled"
-    data-ouia-component-id="OUIA-Generated-Slider-:rh:"
+    data-ouia-component-id="OUIA-Generated-Slider-_r_h_"
     data-ouia-component-type="PF6/Slider"
     data-ouia-safe="true"
     style="--pf-v6-c-slider--value: 50%; --pf-v6-c-slider__value--c-form-control--width-chars: 1;"
@@ -207,7 +207,7 @@ exports[`slider renders discrete slider 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-slider"
-    data-ouia-component-id="OUIA-Generated-Slider-:r3:"
+    data-ouia-component-id="OUIA-Generated-Slider-_r_3_"
     data-ouia-component-type="PF6/Slider"
     data-ouia-safe="true"
     style="--pf-v6-c-slider--value: 40%; --pf-v6-c-slider__value--c-form-control--width-chars: 2;"
@@ -268,7 +268,7 @@ exports[`slider renders discrete slider 1`] = `
         <input
           aria-invalid="false"
           aria-label="Slider value input"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-:r5:"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-_r_5_"
           data-ouia-component-type="PF6/TextInput"
           data-ouia-safe="true"
           type="number"
@@ -284,7 +284,7 @@ exports[`slider renders discrete slider with custom steps 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-slider"
-    data-ouia-component-id="OUIA-Generated-Slider-:r6:"
+    data-ouia-component-id="OUIA-Generated-Slider-_r_6_"
     data-ouia-component-type="PF6/Slider"
     data-ouia-safe="true"
     style="--pf-v6-c-slider--value: 50%; --pf-v6-c-slider__value--c-form-control--width-chars: 1;"
@@ -379,7 +379,7 @@ exports[`slider renders slider with input 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-slider"
-    data-ouia-component-id="OUIA-Generated-Slider-:r8:"
+    data-ouia-component-id="OUIA-Generated-Slider-_r_8_"
     data-ouia-component-type="PF6/Slider"
     data-ouia-safe="true"
     style="--pf-v6-c-slider--value: 50%; --pf-v6-c-slider__value--c-form-control--width-chars: 2;"
@@ -446,7 +446,7 @@ exports[`slider renders slider with input 1`] = `
             <input
               aria-invalid="false"
               aria-label="Slider value input"
-              data-ouia-component-id="OUIA-Generated-TextInputBase-:ra:"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-_r_a_"
               data-ouia-component-type="PF6/TextInput"
               data-ouia-safe="true"
               type="number"
@@ -473,7 +473,7 @@ exports[`slider renders slider with input above thumb 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-slider"
-    data-ouia-component-id="OUIA-Generated-Slider-:rb:"
+    data-ouia-component-id="OUIA-Generated-Slider-_r_b_"
     data-ouia-component-type="PF6/Slider"
     data-ouia-safe="true"
     style="--pf-v6-c-slider--value: 50%; --pf-v6-c-slider__value--c-form-control--width-chars: 2;"
@@ -539,7 +539,7 @@ exports[`slider renders slider with input above thumb 1`] = `
               <input
                 aria-invalid="false"
                 aria-label="Slider value input"
-                data-ouia-component-id="OUIA-Generated-TextInputBase-:rd:"
+                data-ouia-component-id="OUIA-Generated-TextInputBase-_r_d_"
                 data-ouia-component-type="PF6/TextInput"
                 data-ouia-safe="true"
                 type="number"
@@ -567,7 +567,7 @@ exports[`slider renders slider with input actions 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-slider"
-    data-ouia-component-id="OUIA-Generated-Slider-:re:"
+    data-ouia-component-id="OUIA-Generated-Slider-_r_e_"
     data-ouia-component-type="PF6/Slider"
     data-ouia-safe="true"
     style="--pf-v6-c-slider--value: 50%; --pf-v6-c-slider__value--c-form-control--width-chars: 1;"
@@ -578,7 +578,7 @@ exports[`slider renders slider with input actions 1`] = `
       <button
         aria-label="Minus"
         class="pf-v6-c-button pf-m-plain"
-        data-ouia-component-id="OUIA-Generated-Button-plain-:rf:"
+        data-ouia-component-id="OUIA-Generated-Button-plain-_r_f_"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -637,7 +637,7 @@ exports[`slider renders slider with input actions 1`] = `
       <button
         aria-label="Plus"
         class="pf-v6-c-button pf-m-plain"
-        data-ouia-component-id="OUIA-Generated-Button-plain-:rg:"
+        data-ouia-component-id="OUIA-Generated-Button-plain-_r_g_"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -651,7 +651,7 @@ exports[`slider renders slider with tooltip on thumb 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-slider"
-    data-ouia-component-id="OUIA-Generated-Slider-:ri:"
+    data-ouia-component-id="OUIA-Generated-Slider-_r_i_"
     data-ouia-component-type="PF6/Slider"
     data-ouia-safe="true"
     style="--pf-v6-c-slider--value: 50%; --pf-v6-c-slider__value--c-form-control--width-chars: 1;"
diff --git a/packages/react-core/src/components/Switch/__tests__/__snapshots__/Switch.test.tsx.snap b/packages/react-core/src/components/Switch/__tests__/__snapshots__/Switch.test.tsx.snap
index bbeae159c92..310ba6761ae 100644
--- a/packages/react-core/src/components/Switch/__tests__/__snapshots__/Switch.test.tsx.snap
+++ b/packages/react-core/src/components/Switch/__tests__/__snapshots__/Switch.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Switch no label switch is checked 1`] = `
 <DocumentFragment>
   <label
     class="pf-v6-c-switch"
-    data-ouia-component-id="OUIA-Generated-Switch-:rd:"
+    data-ouia-component-id="OUIA-Generated-Switch-_r_d_"
     data-ouia-component-type="PF6/Switch"
     data-ouia-safe="true"
     for="no-label-switch-is-checked"
@@ -46,7 +46,7 @@ exports[`Switch no label switch is not checked 1`] = `
 <DocumentFragment>
   <label
     class="pf-v6-c-switch"
-    data-ouia-component-id="OUIA-Generated-Switch-:rf:"
+    data-ouia-component-id="OUIA-Generated-Switch-_r_f_"
     data-ouia-component-type="PF6/Switch"
     data-ouia-safe="true"
     for="no-label-switch-is-not-checked"
@@ -87,7 +87,7 @@ exports[`Switch switch is checked 1`] = `
 <DocumentFragment>
   <label
     class="pf-v6-c-switch"
-    data-ouia-component-id="OUIA-Generated-Switch-:r5:"
+    data-ouia-component-id="OUIA-Generated-Switch-_r_5_"
     data-ouia-component-type="PF6/Switch"
     data-ouia-safe="true"
     for="switch-is-checked"
@@ -117,7 +117,7 @@ exports[`Switch switch is checked and disabled 1`] = `
 <DocumentFragment>
   <label
     class="pf-v6-c-switch"
-    data-ouia-component-id="OUIA-Generated-Switch-:rh:"
+    data-ouia-component-id="OUIA-Generated-Switch-_r_h_"
     data-ouia-component-type="PF6/Switch"
     data-ouia-safe="true"
     for="switch-is-checked-and-disabled"
@@ -160,7 +160,7 @@ exports[`Switch switch is not checked 1`] = `
 <DocumentFragment>
   <label
     class="pf-v6-c-switch"
-    data-ouia-component-id="OUIA-Generated-Switch-:r7:"
+    data-ouia-component-id="OUIA-Generated-Switch-_r_7_"
     data-ouia-component-type="PF6/Switch"
     data-ouia-safe="true"
     for="switch-is-not-checked"
@@ -189,7 +189,7 @@ exports[`Switch switch is not checked and disabled 1`] = `
 <DocumentFragment>
   <label
     class="pf-v6-c-switch"
-    data-ouia-component-id="OUIA-Generated-Switch-:rj:"
+    data-ouia-component-id="OUIA-Generated-Switch-_r_j_"
     data-ouia-component-type="PF6/Switch"
     data-ouia-safe="true"
     for="switch-is-not-checked-and-disabled"
@@ -231,7 +231,7 @@ exports[`Switch switch with only label is checked 1`] = `
 <DocumentFragment>
   <label
     class="pf-v6-c-switch"
-    data-ouia-component-id="OUIA-Generated-Switch-:r9:"
+    data-ouia-component-id="OUIA-Generated-Switch-_r_9_"
     data-ouia-component-type="PF6/Switch"
     data-ouia-safe="true"
     for="switch-is-checked"
@@ -262,7 +262,7 @@ exports[`Switch switch with only label is not checked 1`] = `
 <DocumentFragment>
   <label
     class="pf-v6-c-switch"
-    data-ouia-component-id="OUIA-Generated-Switch-:rb:"
+    data-ouia-component-id="OUIA-Generated-Switch-_r_b_"
     data-ouia-component-type="PF6/Switch"
     data-ouia-safe="true"
     for="switch-is-not-checked"
diff --git a/packages/react-core/src/components/Tabs/__tests__/__snapshots__/Tab.test.tsx.snap b/packages/react-core/src/components/Tabs/__tests__/__snapshots__/Tab.test.tsx.snap
index b2255be7f8d..9df894dcec1 100644
--- a/packages/react-core/src/components/Tabs/__tests__/__snapshots__/Tab.test.tsx.snap
+++ b/packages/react-core/src/components/Tabs/__tests__/__snapshots__/Tab.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`renders tab action 1`] = `
       <button
         aria-label="Tab action"
         class="pf-v6-c-button pf-m-plain"
-        data-ouia-component-id="OUIA-Generated-Button-plain-:r0:"
+        data-ouia-component-id="OUIA-Generated-Button-plain-_r_0_"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
diff --git a/packages/react-core/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap b/packages/react-core/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap
index 864927b376c..b1517f85ba6 100644
--- a/packages/react-core/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap
+++ b/packages/react-core/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`should not render tablist aria-label or aria-labelledby when neither is
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-:r3b:"
+    data-ouia-component-id="OUIA-Generated-Tabs-_r_3b_"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="noTabListLabelTabs"
@@ -89,7 +89,7 @@ exports[`should render accessible tabs 1`] = `
   <nav
     aria-label="accessible Tabs example"
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-:r1v:"
+    data-ouia-component-id="OUIA-Generated-Tabs-_r_1v_"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="accessibleTabs"
@@ -206,7 +206,7 @@ exports[`should render box tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-box pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-:r1t:"
+    data-ouia-component-id="OUIA-Generated-Tabs-_r_1t_"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="boxTabs"
@@ -365,7 +365,7 @@ exports[`should render box tabs of secondary variant 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-box pf-m-secondary pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-:r2j:"
+    data-ouia-component-id="OUIA-Generated-Tabs-_r_2j_"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="boxSecondaryVariantTabs"
@@ -482,7 +482,7 @@ exports[`should render expandable vertical tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-vertical pf-m-expandable pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-:r1n:"
+    data-ouia-component-id="OUIA-Generated-Tabs-_r_1n_"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="verticalTabs"
@@ -497,7 +497,7 @@ exports[`should render expandable vertical tabs 1`] = `
         <button
           aria-labelledby="generated-id-text generated-id-button"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r1o:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_1o_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           id="generated-id-button"
@@ -689,7 +689,7 @@ exports[`should render filled tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-fill pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-:r21:"
+    data-ouia-component-id="OUIA-Generated-Tabs-_r_21_"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="filledTabs"
@@ -806,7 +806,7 @@ exports[`should render simple tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-:r1b:"
+    data-ouia-component-id="OUIA-Generated-Tabs-_r_1b_"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="simpleTabs"
@@ -965,7 +965,7 @@ exports[`should render subtabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-:r23:"
+    data-ouia-component-id="OUIA-Generated-Tabs-_r_23_"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="primarieTabs"
@@ -1051,7 +1051,7 @@ exports[`should render subtabs 1`] = `
   >
     <div
       class="pf-v6-c-tabs pf-m-animate-current pf-m-subtab pf-m-initializing-accent"
-      data-ouia-component-id="OUIA-Generated-Tabs-:r25:"
+      data-ouia-component-id="OUIA-Generated-Tabs-_r_25_"
       data-ouia-component-type="PF6/Tabs"
       data-ouia-safe="true"
       id="subtabs"
@@ -1194,7 +1194,7 @@ exports[`should render tablist aria-label when provided 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-:r37:"
+    data-ouia-component-id="OUIA-Generated-Tabs-_r_37_"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="tabListLabelTabs"
@@ -1284,7 +1284,7 @@ exports[`should render tablist aria-labelledby when provided 1`] = `
   </h2>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-:r39:"
+    data-ouia-component-id="OUIA-Generated-Tabs-_r_39_"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="tabListLabelledByTabs"
@@ -1369,7 +1369,7 @@ exports[`should render tabs with eventKey Strings 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-:r27:"
+    data-ouia-component-id="OUIA-Generated-Tabs-_r_27_"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="eventKeyTabs"
@@ -1487,7 +1487,7 @@ exports[`should render tabs with no bottom border 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-no-border-bottom pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-:r2l:"
+    data-ouia-component-id="OUIA-Generated-Tabs-_r_2l_"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="noBottomBorderTabs"
@@ -1604,7 +1604,7 @@ exports[`should render tabs with separate content 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-:r29:"
+    data-ouia-component-id="OUIA-Generated-Tabs-_r_29_"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="separateTabs"
@@ -1731,7 +1731,7 @@ exports[`should render uncontrolled tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-:r1j:"
+    data-ouia-component-id="OUIA-Generated-Tabs-_r_1j_"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
@@ -1889,7 +1889,7 @@ exports[`should render vertical tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-vertical pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-:r1l:"
+    data-ouia-component-id="OUIA-Generated-Tabs-_r_1l_"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="verticalTabs"
diff --git a/packages/react-core/src/components/TextInput/__tests__/__snapshots__/TextInput.test.tsx.snap b/packages/react-core/src/components/TextInput/__tests__/__snapshots__/TextInput.test.tsx.snap
index ea00d6d786a..ece9cc7d9dc 100644
--- a/packages/react-core/src/components/TextInput/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/packages/react-core/src/components/TextInput/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`TextInput default read only text input 1`] = `
     <input
       aria-invalid="false"
       aria-label="default read only text input"
-      data-ouia-component-id="OUIA-Generated-TextInputBase-:r9:"
+      data-ouia-component-id="OUIA-Generated-TextInputBase-_r_9_"
       data-ouia-component-type="PF6/TextInput"
       data-ouia-safe="true"
       readonly=""
@@ -27,12 +27,11 @@ exports[`TextInput disabled text input 1`] = `
     <input
       aria-invalid="false"
       aria-label="disabled text input"
-      data-ouia-component-id="OUIA-Generated-TextInputBase-:r5:"
+      data-ouia-component-id="OUIA-Generated-TextInputBase-_r_5_"
       data-ouia-component-type="PF6/TextInput"
       data-ouia-safe="true"
       disabled=""
       type="text"
-      value=""
     />
   </span>
 </DocumentFragment>
@@ -46,7 +45,7 @@ exports[`TextInput invalid text input 1`] = `
     <input
       aria-invalid="true"
       aria-label="invalid text input"
-      data-ouia-component-id="OUIA-Generated-TextInputBase-:rd:"
+      data-ouia-component-id="OUIA-Generated-TextInputBase-_r_d_"
       data-ouia-component-type="PF6/TextInput"
       data-ouia-safe="true"
       type="text"
@@ -85,7 +84,7 @@ exports[`TextInput plain read only text input 1`] = `
     <input
       aria-invalid="false"
       aria-label="plain read only text input"
-      data-ouia-component-id="OUIA-Generated-TextInputBase-:rb:"
+      data-ouia-component-id="OUIA-Generated-TextInputBase-_r_b_"
       data-ouia-component-type="PF6/TextInput"
       data-ouia-safe="true"
       readonly=""
@@ -104,7 +103,7 @@ exports[`TextInput read only text input using isReadOnly 1`] = `
     <input
       aria-invalid="false"
       aria-label="read only text input"
-      data-ouia-component-id="OUIA-Generated-TextInputBase-:r7:"
+      data-ouia-component-id="OUIA-Generated-TextInputBase-_r_7_"
       data-ouia-component-type="PF6/TextInput"
       data-ouia-safe="true"
       readonly=""
@@ -123,7 +122,7 @@ exports[`TextInput simple text input 1`] = `
     <input
       aria-invalid="false"
       aria-label="simple text input"
-      data-ouia-component-id="OUIA-Generated-TextInputBase-:r3:"
+      data-ouia-component-id="OUIA-Generated-TextInputBase-_r_3_"
       data-ouia-component-type="PF6/TextInput"
       data-ouia-safe="true"
       type="text"
@@ -141,7 +140,7 @@ exports[`TextInput validated text input error 1`] = `
     <input
       aria-invalid="true"
       aria-label="validated text input"
-      data-ouia-component-id="OUIA-Generated-TextInputBase-:rj:"
+      data-ouia-component-id="OUIA-Generated-TextInputBase-_r_j_"
       data-ouia-component-type="PF6/TextInput"
       data-ouia-safe="true"
       type="text"
diff --git a/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap b/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap
index fd7222e1c81..a0dcd2aeb45 100644
--- a/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap
+++ b/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Toolbar should render inset 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-toolbar pf-m-inset-none pf-m-inset-sm-on-md pf-m-inset-2xl-on-xl pf-m-inset-lg-on-2xl"
-    data-ouia-component-id="OUIA-Generated-Toolbar-:r1:"
+    data-ouia-component-id="OUIA-Generated-Toolbar-_r_1_"
     data-ouia-component-type="PF6/Toolbar"
     data-ouia-safe="true"
     id="toolbar"
@@ -51,7 +51,7 @@ exports[`Toolbar should render with custom label content 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-toolbar pf-m-toggle-group-container"
-    data-ouia-component-id="OUIA-Generated-Toolbar-:r7:"
+    data-ouia-component-id="OUIA-Generated-Toolbar-_r_7_"
     data-ouia-component-type="PF6/Toolbar"
     data-ouia-safe="true"
     id="toolbar-with-filter"
@@ -72,7 +72,7 @@ exports[`Toolbar should render with custom label content 1`] = `
               aria-haspopup="false"
               aria-label="Show Filters"
               class="pf-v6-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-:r8:"
+              data-ouia-component-id="OUIA-Generated-Button-plain-_r_8_"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               type="button"
@@ -144,7 +144,7 @@ exports[`Toolbar should render with custom label content 1`] = `
                       <button
                         aria-label="Close New"
                         class="pf-v6-c-button pf-m-plain pf-m-no-padding"
-                        data-ouia-component-id="OUIA-Generated-Button-plain-:rb:"
+                        data-ouia-component-id="OUIA-Generated-Button-plain-_r_b_"
                         data-ouia-component-type="PF6/Button"
                         data-ouia-safe="true"
                         type="button"
@@ -191,7 +191,7 @@ exports[`Toolbar should render with custom label content 1`] = `
                       <button
                         aria-label="Close Pending"
                         class="pf-v6-c-button pf-m-plain pf-m-no-padding"
-                        data-ouia-component-id="OUIA-Generated-Button-plain-:rc:"
+                        data-ouia-component-id="OUIA-Generated-Button-plain-_r_c_"
                         data-ouia-component-type="PF6/Button"
                         data-ouia-safe="true"
                         type="button"
@@ -226,7 +226,7 @@ exports[`Toolbar should render with custom label content 1`] = `
                 aria-label="Close label group"
                 aria-labelledby="remove_group_generated-id generated-id"
                 class="pf-v6-c-button pf-m-plain pf-m-small"
-                data-ouia-component-id="OUIA-Generated-Button-plain-:rd:"
+                data-ouia-component-id="OUIA-Generated-Button-plain-_r_d_"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 id="remove_group_generated-id"
@@ -267,7 +267,7 @@ exports[`Toolbar should render with custom label content 1`] = `
         >
           <button
             class="pf-v6-c-button pf-m-link pf-m-inline"
-            data-ouia-component-id="OUIA-Generated-Button-link-:r9:"
+            data-ouia-component-id="OUIA-Generated-Button-link-_r_9_"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -284,7 +284,7 @@ exports[`Toolbar should render with custom label content 1`] = `
         >
           <button
             class="pf-v6-c-button pf-m-link pf-m-inline"
-            data-ouia-component-id="OUIA-Generated-Button-link-:ra:"
+            data-ouia-component-id="OUIA-Generated-Button-link-_r_a_"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
diff --git a/packages/react-core/src/deprecated/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap b/packages/react-core/src/deprecated/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
index f7a2cf39742..1dc22ce3bed 100644
--- a/packages/react-core/src/deprecated/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
+++ b/packages/react-core/src/deprecated/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
@@ -25,7 +25,7 @@ exports[`Matches snapshot 1`] = `
       <button
         aria-label="Close Chip text"
         class="pf-v6-c-button pf-m-plain pf-m-no-padding"
-        data-ouia-component-id="OUIA-Generated-Button-plain-:r2e:"
+        data-ouia-component-id="OUIA-Generated-Button-plain-_r_2e_"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
diff --git a/packages/react-core/src/deprecated/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap b/packages/react-core/src/deprecated/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap
index 75ded2577ae..69a42d6e6d8 100644
--- a/packages/react-core/src/deprecated/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap
+++ b/packages/react-core/src/deprecated/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap
@@ -109,7 +109,7 @@ exports[`DualListSelector basic 1`] = `
           aria-disabled="true"
           aria-label="Add selected"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r5:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_5_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -142,7 +142,7 @@ exports[`DualListSelector basic 1`] = `
           aria-disabled="false"
           aria-label="Add all"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r6:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_6_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           tabindex="-1"
@@ -174,7 +174,7 @@ exports[`DualListSelector basic 1`] = `
           aria-disabled="true"
           aria-label="Remove all"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r7:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_7_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -207,7 +207,7 @@ exports[`DualListSelector basic 1`] = `
           aria-disabled="true"
           aria-label="Remove selected"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r8:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_8_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -383,7 +383,7 @@ exports[`DualListSelector basic with disabled controls 1`] = `
           aria-disabled="true"
           aria-label="Add selected"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r16:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_16_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -416,7 +416,7 @@ exports[`DualListSelector basic with disabled controls 1`] = `
           aria-disabled="true"
           aria-label="Add all"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r17:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_17_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -449,7 +449,7 @@ exports[`DualListSelector basic with disabled controls 1`] = `
           aria-disabled="true"
           aria-label="Remove all"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r18:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_18_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -482,7 +482,7 @@ exports[`DualListSelector basic with disabled controls 1`] = `
           aria-disabled="true"
           aria-label="Remove selected"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r19:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_19_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -669,7 +669,7 @@ exports[`DualListSelector with actions 1`] = `
           aria-disabled="true"
           aria-label="Add selected"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r1q:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_1q_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -702,7 +702,7 @@ exports[`DualListSelector with actions 1`] = `
           aria-disabled="false"
           aria-label="Add all"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r1r:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_1r_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           tabindex="-1"
@@ -734,7 +734,7 @@ exports[`DualListSelector with actions 1`] = `
           aria-disabled="false"
           aria-label="Remove all"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r1s:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_1s_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           tabindex="-1"
@@ -766,7 +766,7 @@ exports[`DualListSelector with actions 1`] = `
           aria-disabled="true"
           aria-label="Remove selected"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r1t:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_1t_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -1007,7 +1007,7 @@ exports[`DualListSelector with custom status 1`] = `
           aria-disabled="true"
           aria-label="Add selected"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rr:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_r_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -1040,7 +1040,7 @@ exports[`DualListSelector with custom status 1`] = `
           aria-disabled="false"
           aria-label="Add all"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rs:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_s_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           tabindex="-1"
@@ -1072,7 +1072,7 @@ exports[`DualListSelector with custom status 1`] = `
           aria-disabled="true"
           aria-label="Remove all"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rt:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_t_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -1105,7 +1105,7 @@ exports[`DualListSelector with custom status 1`] = `
           aria-disabled="true"
           aria-label="Remove selected"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:ru:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_u_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -1323,7 +1323,7 @@ exports[`DualListSelector with search inputs 1`] = `
           aria-disabled="true"
           aria-label="Add selected"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rg:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_g_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -1356,7 +1356,7 @@ exports[`DualListSelector with search inputs 1`] = `
           aria-disabled="false"
           aria-label="Add all"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rh:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_h_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           tabindex="-1"
@@ -1388,7 +1388,7 @@ exports[`DualListSelector with search inputs 1`] = `
           aria-disabled="true"
           aria-label="Remove all"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:ri:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_i_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -1421,7 +1421,7 @@ exports[`DualListSelector with search inputs 1`] = `
           aria-disabled="true"
           aria-label="Remove selected"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rj:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_j_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -1716,7 +1716,7 @@ exports[`DualListSelector with tree 1`] = `
           aria-disabled="true"
           aria-label="Add selected"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r1f:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_1f_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -1749,7 +1749,7 @@ exports[`DualListSelector with tree 1`] = `
           aria-disabled="false"
           aria-label="Add all"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r1g:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_1g_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           tabindex="-1"
@@ -1781,7 +1781,7 @@ exports[`DualListSelector with tree 1`] = `
           aria-disabled="true"
           aria-label="Remove all"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r1h:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_1h_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -1814,7 +1814,7 @@ exports[`DualListSelector with tree 1`] = `
           aria-disabled="true"
           aria-label="Remove selected"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r1i:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_1i_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
diff --git a/packages/react-core/src/deprecated/components/Modal/__tests__/__snapshots__/ModalContent.test.tsx.snap b/packages/react-core/src/deprecated/components/Modal/__tests__/__snapshots__/ModalContent.test.tsx.snap
index 96ccbb5cac3..c1dc51f12a2 100644
--- a/packages/react-core/src/deprecated/components/Modal/__tests__/__snapshots__/ModalContent.test.tsx.snap
+++ b/packages/react-core/src/deprecated/components/Modal/__tests__/__snapshots__/ModalContent.test.tsx.snap
@@ -24,7 +24,7 @@ exports[`Modal Content Test description 1`] = `
           <button
             aria-label="Close"
             class="pf-v6-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-:r2:"
+            data-ouia-component-id="OUIA-Generated-Button-plain-_r_2_"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -103,7 +103,7 @@ exports[`Modal Content Test isOpen 1`] = `
           <button
             aria-label="Close"
             class="pf-v6-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-:r1:"
+            data-ouia-component-id="OUIA-Generated-Button-plain-_r_1_"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -177,7 +177,7 @@ exports[`Modal Content Test only body 1`] = `
           <button
             aria-label="Close"
             class="pf-v6-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-:r0:"
+            data-ouia-component-id="OUIA-Generated-Button-plain-_r_0_"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -251,7 +251,7 @@ exports[`Modal Content Test with footer 1`] = `
           <button
             aria-label="Close"
             class="pf-v6-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-:r3:"
+            data-ouia-component-id="OUIA-Generated-Button-plain-_r_3_"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -330,7 +330,7 @@ exports[`Modal Content Test with onclose 1`] = `
           <button
             aria-label="Close"
             class="pf-v6-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-:r5:"
+            data-ouia-component-id="OUIA-Generated-Button-plain-_r_5_"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -409,7 +409,7 @@ exports[`Modal Content test without footer 1`] = `
           <button
             aria-label="Close"
             class="pf-v6-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-:r4:"
+            data-ouia-component-id="OUIA-Generated-Button-plain-_r_4_"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -483,7 +483,7 @@ exports[`Modal Test with custom footer 1`] = `
           <button
             aria-label="Close"
             class="pf-v6-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-:r7:"
+            data-ouia-component-id="OUIA-Generated-Button-plain-_r_7_"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -566,7 +566,7 @@ exports[`Modal Test with custom header 1`] = `
           <button
             aria-label="Close"
             class="pf-v6-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-:r6:"
+            data-ouia-component-id="OUIA-Generated-Button-plain-_r_6_"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
diff --git a/packages/react-core/src/deprecated/components/Wizard/__tests__/Generated/__snapshots__/WizardFooterInternal.test.tsx.snap b/packages/react-core/src/deprecated/components/Wizard/__tests__/Generated/__snapshots__/WizardFooterInternal.test.tsx.snap
index 76dd85ed957..2100f59affd 100644
--- a/packages/react-core/src/deprecated/components/Wizard/__tests__/Generated/__snapshots__/WizardFooterInternal.test.tsx.snap
+++ b/packages/react-core/src/deprecated/components/Wizard/__tests__/Generated/__snapshots__/WizardFooterInternal.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`WizardFooterInternal should match snapshot (auto-generated) 1`] = `
         >
           <button
             class="pf-v6-c-button pf-m-secondary"
-            data-ouia-component-id="OUIA-Generated-Button-secondary-:r0:"
+            data-ouia-component-id="OUIA-Generated-Button-secondary-_r_0_"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             disabled=""
@@ -36,7 +36,7 @@ exports[`WizardFooterInternal should match snapshot (auto-generated) 1`] = `
         >
           <button
             class="pf-v6-c-button pf-m-primary"
-            data-ouia-component-id="OUIA-Generated-Button-primary-:r1:"
+            data-ouia-component-id="OUIA-Generated-Button-primary-_r_1_"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="submit"
@@ -59,7 +59,7 @@ exports[`WizardFooterInternal should match snapshot (auto-generated) 1`] = `
         >
           <button
             class="pf-v6-c-button pf-m-link"
-            data-ouia-component-id="OUIA-Generated-Button-link-:r2:"
+            data-ouia-component-id="OUIA-Generated-Button-link-_r_2_"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
diff --git a/packages/react-core/src/deprecated/components/Wizard/__tests__/Generated/__snapshots__/WizardNav.test.tsx.snap b/packages/react-core/src/deprecated/components/Wizard/__tests__/Generated/__snapshots__/WizardNav.test.tsx.snap
index 9cf7881b4ac..9b1ee9629d3 100644
--- a/packages/react-core/src/deprecated/components/Wizard/__tests__/Generated/__snapshots__/WizardNav.test.tsx.snap
+++ b/packages/react-core/src/deprecated/components/Wizard/__tests__/Generated/__snapshots__/WizardNav.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`WizardNav should match snapshot (auto-generated) 1`] = `
     aria-label="string"
     aria-labelledby="string"
     class="pf-v6-c-wizard__nav"
-    data-ouia-component-id="OUIA-Generated-WizardNav-:r0:"
+    data-ouia-component-id="OUIA-Generated-WizardNav-_r_0_"
     data-ouia-component-type="PF6/WizardNav"
     data-ouia-safe="true"
   >
diff --git a/packages/react-core/src/deprecated/components/Wizard/__tests__/Generated/__snapshots__/WizardNavItem.test.tsx.snap b/packages/react-core/src/deprecated/components/Wizard/__tests__/Generated/__snapshots__/WizardNavItem.test.tsx.snap
index 35d6d1e47be..cc4a61fb987 100644
--- a/packages/react-core/src/deprecated/components/Wizard/__tests__/Generated/__snapshots__/WizardNavItem.test.tsx.snap
+++ b/packages/react-core/src/deprecated/components/Wizard/__tests__/Generated/__snapshots__/WizardNavItem.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`WizardNavItem should match snapshot (auto-generated) 1`] = `
     <button
       aria-current="false"
       class="pf-v6-c-wizard__nav-link"
-      data-ouia-component-id="OUIA-Generated-WizardNavItem-:r0:"
+      data-ouia-component-id="OUIA-Generated-WizardNavItem-_r_0_"
       data-ouia-component-type="PF6/WizardNavItem"
       data-ouia-safe="true"
       type="button"
diff --git a/packages/react-core/src/deprecated/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap b/packages/react-core/src/deprecated/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap
index 8e02704b87d..762001bd295 100644
--- a/packages/react-core/src/deprecated/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap
+++ b/packages/react-core/src/deprecated/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
         <button
           aria-label="Close"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rc:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_c_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -101,7 +101,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
         <nav
           aria-labelledby="pf-wizard-title-1"
           class="pf-v6-c-wizard__nav"
-          data-ouia-component-id="OUIA-Generated-WizardNav-:rd:"
+          data-ouia-component-id="OUIA-Generated-WizardNav-_r_d_"
           data-ouia-component-type="PF6/WizardNav"
           data-ouia-safe="true"
         >
@@ -115,7 +115,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
               <button
                 aria-current="step"
                 class="pf-v6-c-wizard__nav-link pf-m-current"
-                data-ouia-component-id="OUIA-Generated-WizardNavItem-:re:"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-_r_e_"
                 data-ouia-component-type="PF6/WizardNavItem"
                 data-ouia-safe="true"
                 type="button"
@@ -134,7 +134,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
                 aria-current="false"
                 aria-expanded="false"
                 class="pf-v6-c-wizard__nav-link"
-                data-ouia-component-id="OUIA-Generated-WizardNavItem-:rf:"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-_r_f_"
                 data-ouia-component-type="PF6/WizardNavItem"
                 data-ouia-safe="true"
                 type="button"
@@ -180,7 +180,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
                   <button
                     aria-current="false"
                     class="pf-v6-c-wizard__nav-link"
-                    data-ouia-component-id="OUIA-Generated-WizardNavItem-:rh:"
+                    data-ouia-component-id="OUIA-Generated-WizardNavItem-_r_h_"
                     data-ouia-component-type="PF6/WizardNavItem"
                     data-ouia-safe="true"
                     type="button"
@@ -198,7 +198,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
                   <button
                     aria-current="false"
                     class="pf-v6-c-wizard__nav-link"
-                    data-ouia-component-id="OUIA-Generated-WizardNavItem-:ri:"
+                    data-ouia-component-id="OUIA-Generated-WizardNavItem-_r_i_"
                     data-ouia-component-type="PF6/WizardNavItem"
                     data-ouia-safe="true"
                     type="button"
@@ -218,7 +218,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
               <button
                 aria-current="false"
                 class="pf-v6-c-wizard__nav-link"
-                data-ouia-component-id="OUIA-Generated-WizardNavItem-:rj:"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-_r_j_"
                 data-ouia-component-type="PF6/WizardNavItem"
                 data-ouia-safe="true"
                 type="button"
@@ -236,7 +236,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
               <button
                 aria-current="false"
                 class="pf-v6-c-wizard__nav-link"
-                data-ouia-component-id="OUIA-Generated-WizardNavItem-:rk:"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-_r_k_"
                 data-ouia-component-type="PF6/WizardNavItem"
                 data-ouia-safe="true"
                 type="button"
@@ -276,7 +276,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
             >
               <button
                 class="pf-v6-c-button pf-m-secondary"
-                data-ouia-component-id="OUIA-Generated-Button-secondary-:rl:"
+                data-ouia-component-id="OUIA-Generated-Button-secondary-_r_l_"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 disabled=""
@@ -294,7 +294,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
             >
               <button
                 class="pf-v6-c-button pf-m-primary"
-                data-ouia-component-id="OUIA-Generated-Button-primary-:rm:"
+                data-ouia-component-id="OUIA-Generated-Button-primary-_r_m_"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="submit"
@@ -315,7 +315,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
             >
               <button
                 class="pf-v6-c-button pf-m-link"
-                data-ouia-component-id="OUIA-Generated-Button-link-:rn:"
+                data-ouia-component-id="OUIA-Generated-Button-link-_r_n_"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"
@@ -349,7 +349,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
         <button
           aria-label="Close"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r0:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_0_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -436,7 +436,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
         <nav
           aria-labelledby="pf-wizard-title-0"
           class="pf-v6-c-wizard__nav"
-          data-ouia-component-id="OUIA-Generated-WizardNav-:r1:"
+          data-ouia-component-id="OUIA-Generated-WizardNav-_r_1_"
           data-ouia-component-type="PF6/WizardNav"
           data-ouia-safe="true"
         >
@@ -450,7 +450,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
               <button
                 aria-current="step"
                 class="pf-v6-c-wizard__nav-link pf-m-current"
-                data-ouia-component-id="OUIA-Generated-WizardNavItem-:r2:"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-_r_2_"
                 data-ouia-component-type="PF6/WizardNavItem"
                 data-ouia-safe="true"
                 id="step-A"
@@ -469,7 +469,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
               <button
                 aria-current="false"
                 class="pf-v6-c-wizard__nav-link"
-                data-ouia-component-id="OUIA-Generated-WizardNavItem-:r3:"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-_r_3_"
                 data-ouia-component-type="PF6/WizardNavItem"
                 data-ouia-safe="true"
                 id="step-B"
@@ -491,7 +491,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
                   <button
                     aria-current="false"
                     class="pf-v6-c-wizard__nav-link"
-                    data-ouia-component-id="OUIA-Generated-WizardNavItem-:r5:"
+                    data-ouia-component-id="OUIA-Generated-WizardNavItem-_r_5_"
                     data-ouia-component-type="PF6/WizardNavItem"
                     data-ouia-safe="true"
                     id="step-B-1"
@@ -510,7 +510,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
                   <button
                     aria-current="false"
                     class="pf-v6-c-wizard__nav-link"
-                    data-ouia-component-id="OUIA-Generated-WizardNavItem-:r6:"
+                    data-ouia-component-id="OUIA-Generated-WizardNavItem-_r_6_"
                     data-ouia-component-type="PF6/WizardNavItem"
                     data-ouia-safe="true"
                     id="step-B-2"
@@ -531,7 +531,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
               <button
                 aria-current="false"
                 class="pf-v6-c-wizard__nav-link"
-                data-ouia-component-id="OUIA-Generated-WizardNavItem-:r7:"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-_r_7_"
                 data-ouia-component-type="PF6/WizardNavItem"
                 data-ouia-safe="true"
                 id="step-C"
@@ -550,7 +550,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
               <button
                 aria-current="false"
                 class="pf-v6-c-wizard__nav-link"
-                data-ouia-component-id="OUIA-Generated-WizardNavItem-:r8:"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-_r_8_"
                 data-ouia-component-type="PF6/WizardNavItem"
                 data-ouia-safe="true"
                 id="step-D"
@@ -591,7 +591,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
             >
               <button
                 class="pf-v6-c-button pf-m-secondary"
-                data-ouia-component-id="OUIA-Generated-Button-secondary-:r9:"
+                data-ouia-component-id="OUIA-Generated-Button-secondary-_r_9_"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 disabled=""
@@ -609,7 +609,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
             >
               <button
                 class="pf-v6-c-button pf-m-primary"
-                data-ouia-component-id="OUIA-Generated-Button-primary-:ra:"
+                data-ouia-component-id="OUIA-Generated-Button-primary-_r_a_"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="submit"
@@ -630,7 +630,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
             >
               <button
                 class="pf-v6-c-button pf-m-link"
-                data-ouia-component-id="OUIA-Generated-Button-link-:rb:"
+                data-ouia-component-id="OUIA-Generated-Button-link-_r_b_"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"
@@ -701,7 +701,7 @@ exports[`Wizard bare wiz 1`] = `
       >
         <nav
           class="pf-v6-c-wizard__nav"
-          data-ouia-component-id="OUIA-Generated-WizardNav-:ro:"
+          data-ouia-component-id="OUIA-Generated-WizardNav-_r_o_"
           data-ouia-component-type="PF6/WizardNav"
           data-ouia-safe="true"
         >
@@ -715,7 +715,7 @@ exports[`Wizard bare wiz 1`] = `
               <button
                 aria-current="step"
                 class="pf-v6-c-wizard__nav-link pf-m-current"
-                data-ouia-component-id="OUIA-Generated-WizardNavItem-:rp:"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-_r_p_"
                 data-ouia-component-type="PF6/WizardNavItem"
                 data-ouia-safe="true"
                 type="button"
@@ -755,7 +755,7 @@ exports[`Wizard bare wiz 1`] = `
             >
               <button
                 class="pf-v6-c-button pf-m-secondary"
-                data-ouia-component-id="OUIA-Generated-Button-secondary-:rq:"
+                data-ouia-component-id="OUIA-Generated-Button-secondary-_r_q_"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 disabled=""
@@ -773,7 +773,7 @@ exports[`Wizard bare wiz 1`] = `
             >
               <button
                 class="pf-v6-c-button pf-m-primary"
-                data-ouia-component-id="OUIA-Generated-Button-primary-:rr:"
+                data-ouia-component-id="OUIA-Generated-Button-primary-_r_r_"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="submit"
@@ -794,7 +794,7 @@ exports[`Wizard bare wiz 1`] = `
             >
               <button
                 class="pf-v6-c-button pf-m-link"
-                data-ouia-component-id="OUIA-Generated-Button-link-:rs:"
+                data-ouia-component-id="OUIA-Generated-Button-link-_r_s_"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"
diff --git a/packages/react-core/src/helpers/GenerateId/__tests__/__snapshots__/GenerateId.test.tsx.snap b/packages/react-core/src/helpers/GenerateId/__tests__/__snapshots__/GenerateId.test.tsx.snap
index 2becfad7ef4..51a3359ae95 100644
--- a/packages/react-core/src/helpers/GenerateId/__tests__/__snapshots__/GenerateId.test.tsx.snap
+++ b/packages/react-core/src/helpers/GenerateId/__tests__/__snapshots__/GenerateId.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`generates id 1`] = `
 <DocumentFragment>
   <div
-    id="pf-random-id-:r0:"
+    id="pf-random-id-_r_0_"
   >
     div with random ID
   </div>
diff --git a/packages/react-drag-drop/package.json b/packages/react-drag-drop/package.json
index a5dfa8259f2..4049168abf0 100644
--- a/packages/react-drag-drop/package.json
+++ b/packages/react-drag-drop/package.json
@@ -38,7 +38,7 @@
     "resize-observer-polyfill": "^1.5.1"
   },
   "peerDependencies": {
-    "react": "^17 || ^18 || ^19",
-    "react-dom": "^17 || ^18 || ^19"
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
   }
 }
diff --git a/packages/react-drag-drop/src/components/DragDrop/__tests__/__snapshots__/DragDrop.test.tsx.snap b/packages/react-drag-drop/src/components/DragDrop/__tests__/__snapshots__/DragDrop.test.tsx.snap
index 684035212a0..61253c67ab9 100644
--- a/packages/react-drag-drop/src/components/DragDrop/__tests__/__snapshots__/DragDrop.test.tsx.snap
+++ b/packages/react-drag-drop/src/components/DragDrop/__tests__/__snapshots__/DragDrop.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`renders some divs 1`] = `
           aria-label="Drag button"
           aria-roledescription="sortable"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r0:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_0_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           role="button"
@@ -55,7 +55,7 @@ exports[`renders some divs 1`] = `
           aria-label="Drag button"
           aria-roledescription="sortable"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r1:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_1_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           role="button"
@@ -95,7 +95,7 @@ exports[`renders some divs 1`] = `
           aria-label="Drag button"
           aria-roledescription="sortable"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r2:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_2_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           role="button"
diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json
index 297ec4b959c..041442912fc 100644
--- a/packages/react-icons/package.json
+++ b/packages/react-icons/package.json
@@ -43,7 +43,7 @@
     "fs-extra": "^11.3.3"
   },
   "peerDependencies": {
-    "react": "^17 || ^18 || ^19",
-    "react-dom": "^17 || ^18 || ^19"
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
   }
 }
diff --git a/packages/react-integration/demo-app-ts/package.json b/packages/react-integration/demo-app-ts/package.json
index 3c634cc5e12..7a59d76ccb5 100644
--- a/packages/react-integration/demo-app-ts/package.json
+++ b/packages/react-integration/demo-app-ts/package.json
@@ -9,8 +9,8 @@
   },
   "dependencies": {
     "@patternfly/react-core": "workspace:^",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
     "react-router": "^7.12.0",
     "react-router-dom": "^7.12.0"
   },
diff --git a/packages/react-table/package.json b/packages/react-table/package.json
index 767d2768510..cdaf246f5c3 100644
--- a/packages/react-table/package.json
+++ b/packages/react-table/package.json
@@ -48,7 +48,7 @@
     "tslib": "^2.8.1"
   },
   "peerDependencies": {
-    "react": "^17 || ^18 || ^19",
-    "react-dom": "^17 || ^18 || ^19"
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
   }
 }
diff --git a/packages/react-table/src/components/Table/__tests__/__snapshots__/RowWrapper.test.tsx.snap b/packages/react-table/src/components/Table/__tests__/__snapshots__/RowWrapper.test.tsx.snap
index 580e1eb80d5..5e59ed8161d 100644
--- a/packages/react-table/src/components/Table/__tests__/__snapshots__/RowWrapper.test.tsx.snap
+++ b/packages/react-table/src/components/Table/__tests__/__snapshots__/RowWrapper.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`RowWrapper renders correctly 1`] = `
     <tbody>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r0:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_0_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       />
@@ -21,7 +21,7 @@ exports[`RowWrapper renders expanded correctly 1`] = `
     <tbody>
       <tr
         class="pf-v6-c-table__tr pf-v6-c-table__expandable-row pf-m-expanded"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r1:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_1_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       />
diff --git a/packages/react-table/src/components/Table/__tests__/__snapshots__/Table.test.tsx.snap b/packages/react-table/src/components/Table/__tests__/__snapshots__/Table.test.tsx.snap
index 458ee110df7..2806084cc38 100644
--- a/packages/react-table/src/components/Table/__tests__/__snapshots__/Table.test.tsx.snap
+++ b/packages/react-table/src/components/Table/__tests__/__snapshots__/Table.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Matches snapshot without children 1`] = `
 <DocumentFragment>
   <table
     class="pf-v6-c-table pf-m-grid-md"
-    data-ouia-component-id="OUIA-Generated-Table-:rb:"
+    data-ouia-component-id="OUIA-Generated-Table-_r_b_"
     data-ouia-component-type="PF6/Table"
     data-ouia-safe="true"
     role="grid"
diff --git a/packages/react-table/src/components/Table/__tests__/__snapshots__/Tr.test.tsx.snap b/packages/react-table/src/components/Table/__tests__/__snapshots__/Tr.test.tsx.snap
index a51373e5829..4ab2d06444a 100644
--- a/packages/react-table/src/components/Table/__tests__/__snapshots__/Tr.test.tsx.snap
+++ b/packages/react-table/src/components/Table/__tests__/__snapshots__/Tr.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Matches snapshot with children 1`] = `
     <tbody>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r5:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_5_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -25,7 +25,7 @@ exports[`Matches snapshot without children 1`] = `
     <tbody>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r4:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_4_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       />
diff --git a/packages/react-table/src/components/Table/utils/__snapshots__/transformers.test.tsx.snap b/packages/react-table/src/components/Table/utils/__snapshots__/transformers.test.tsx.snap
index 794dc9c70d5..393806981a0 100644
--- a/packages/react-table/src/components/Table/utils/__snapshots__/transformers.test.tsx.snap
+++ b/packages/react-table/src/components/Table/utils/__snapshots__/transformers.test.tsx.snap
@@ -3,13 +3,24 @@
 exports[`Transformer functions sortable asc 1`] = `
 {
   "aria-sort": "ascending",
-  "children": <SortColumn
-    isSortedBy={true}
-    onSort={[Function]}
-    sortDirection="asc"
-  >
-    
-  </SortColumn>,
+  "children": {
+    "$$typeof": Symbol(react.transitional.element),
+    "_owner": null,
+    "_store": {},
+    "key": null,
+    "props": {
+      "aria-label": undefined,
+      "children": "",
+      "favoriteButtonProps": undefined,
+      "isSortedBy": true,
+      "onSort": [Function],
+      "sortDirection": "asc",
+      "tooltip": undefined,
+      "tooltipHasDefaultBehavior": undefined,
+      "tooltipProps": undefined,
+    },
+    "type": [Function],
+  },
   "className": "pf-v6-c-table__sort pf-m-selected",
 }
 `;
diff --git a/packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap b/packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap
index 8aee80f883d..093d7edaa15 100644
--- a/packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap
+++ b/packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`Table Actions table 1`] = `
   <table
     aria-label="Aria labeled"
     class="pf-v6-c-table pf-m-grid-md"
-    data-ouia-component-id="OUIA-Generated-Table-:r6t:"
+    data-ouia-component-id="OUIA-Generated-Table-_r_6t_"
     data-ouia-component-type="PF6/Table"
     data-ouia-safe="true"
     role="grid"
@@ -15,7 +15,7 @@ exports[`Table Actions table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r6u:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_6u_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -108,7 +108,7 @@ exports[`Table Actions table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r6v:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_6v_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -163,7 +163,7 @@ exports[`Table Actions table 1`] = `
             aria-haspopup="menu"
             aria-label="Kebab toggle"
             class="pf-v6-c-menu-toggle pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-MenuToggle-plain-:r73:"
+            data-ouia-component-id="OUIA-Generated-MenuToggle-plain-_r_73_"
             data-ouia-component-type="PF6/MenuToggle"
             data-ouia-safe="true"
             type="button"
@@ -190,7 +190,7 @@ exports[`Table Actions table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r74:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_74_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -245,7 +245,7 @@ exports[`Table Actions table 1`] = `
             aria-haspopup="menu"
             aria-label="Kebab toggle"
             class="pf-v6-c-menu-toggle pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-MenuToggle-plain-:r78:"
+            data-ouia-component-id="OUIA-Generated-MenuToggle-plain-_r_78_"
             data-ouia-component-type="PF6/MenuToggle"
             data-ouia-safe="true"
             type="button"
@@ -272,7 +272,7 @@ exports[`Table Actions table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r79:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_79_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -327,7 +327,7 @@ exports[`Table Actions table 1`] = `
             aria-haspopup="menu"
             aria-label="Kebab toggle"
             class="pf-v6-c-menu-toggle pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-MenuToggle-plain-:r7d:"
+            data-ouia-component-id="OUIA-Generated-MenuToggle-plain-_r_7d_"
             data-ouia-component-type="PF6/MenuToggle"
             data-ouia-safe="true"
             type="button"
@@ -354,7 +354,7 @@ exports[`Table Actions table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r7e:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_7e_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -409,7 +409,7 @@ exports[`Table Actions table 1`] = `
             aria-haspopup="menu"
             aria-label="Kebab toggle"
             class="pf-v6-c-menu-toggle pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-MenuToggle-plain-:r7i:"
+            data-ouia-component-id="OUIA-Generated-MenuToggle-plain-_r_7i_"
             data-ouia-component-type="PF6/MenuToggle"
             data-ouia-safe="true"
             type="button"
@@ -436,7 +436,7 @@ exports[`Table Actions table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r7j:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_7j_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -491,7 +491,7 @@ exports[`Table Actions table 1`] = `
             aria-haspopup="menu"
             aria-label="Kebab toggle"
             class="pf-v6-c-menu-toggle pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-MenuToggle-plain-:r7n:"
+            data-ouia-component-id="OUIA-Generated-MenuToggle-plain-_r_7n_"
             data-ouia-component-type="PF6/MenuToggle"
             data-ouia-safe="true"
             type="button"
@@ -518,7 +518,7 @@ exports[`Table Actions table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r7o:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_7o_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -573,7 +573,7 @@ exports[`Table Actions table 1`] = `
             aria-haspopup="menu"
             aria-label="Kebab toggle"
             class="pf-v6-c-menu-toggle pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-MenuToggle-plain-:r7s:"
+            data-ouia-component-id="OUIA-Generated-MenuToggle-plain-_r_7s_"
             data-ouia-component-type="PF6/MenuToggle"
             data-ouia-safe="true"
             type="button"
@@ -600,7 +600,7 @@ exports[`Table Actions table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r7t:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_7t_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -655,7 +655,7 @@ exports[`Table Actions table 1`] = `
             aria-haspopup="menu"
             aria-label="Kebab toggle"
             class="pf-v6-c-menu-toggle pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-MenuToggle-plain-:r81:"
+            data-ouia-component-id="OUIA-Generated-MenuToggle-plain-_r_81_"
             data-ouia-component-type="PF6/MenuToggle"
             data-ouia-safe="true"
             type="button"
@@ -682,7 +682,7 @@ exports[`Table Actions table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r82:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_82_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -737,7 +737,7 @@ exports[`Table Actions table 1`] = `
             aria-haspopup="menu"
             aria-label="Kebab toggle"
             class="pf-v6-c-menu-toggle pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-MenuToggle-plain-:r86:"
+            data-ouia-component-id="OUIA-Generated-MenuToggle-plain-_r_86_"
             data-ouia-component-type="PF6/MenuToggle"
             data-ouia-safe="true"
             type="button"
@@ -764,7 +764,7 @@ exports[`Table Actions table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r87:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_87_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -819,7 +819,7 @@ exports[`Table Actions table 1`] = `
             aria-haspopup="menu"
             aria-label="Kebab toggle"
             class="pf-v6-c-menu-toggle pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-MenuToggle-plain-:r8b:"
+            data-ouia-component-id="OUIA-Generated-MenuToggle-plain-_r_8b_"
             data-ouia-component-type="PF6/MenuToggle"
             data-ouia-safe="true"
             type="button"
@@ -854,7 +854,7 @@ exports[`Table Cell header table 1`] = `
   <table
     aria-label="Aria labeled"
     class="pf-v6-c-table pf-m-grid-md"
-    data-ouia-component-id="OUIA-Generated-Table-:r8c:"
+    data-ouia-component-id="OUIA-Generated-Table-_r_8c_"
     data-ouia-component-type="PF6/Table"
     data-ouia-safe="true"
     role="grid"
@@ -864,7 +864,7 @@ exports[`Table Cell header table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r8d:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_8d_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -951,7 +951,7 @@ exports[`Table Cell header table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r8e:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_8e_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -1002,7 +1002,7 @@ exports[`Table Cell header table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r8f:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_8f_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -1053,7 +1053,7 @@ exports[`Table Cell header table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r8g:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_8g_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -1104,7 +1104,7 @@ exports[`Table Cell header table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r8h:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_8h_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -1155,7 +1155,7 @@ exports[`Table Cell header table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r8i:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_8i_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -1206,7 +1206,7 @@ exports[`Table Cell header table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r8j:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_8j_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -1257,7 +1257,7 @@ exports[`Table Cell header table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r8k:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_8k_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -1308,7 +1308,7 @@ exports[`Table Cell header table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r8l:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_8l_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -1359,7 +1359,7 @@ exports[`Table Cell header table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r8m:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_8m_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -1418,7 +1418,7 @@ exports[`Table Collapsible nested table 1`] = `
   <table
     aria-label="Aria labeled"
     class="pf-v6-c-table pf-m-grid-md"
-    data-ouia-component-id="OUIA-Generated-Table-:r9a:"
+    data-ouia-component-id="OUIA-Generated-Table-_r_9a_"
     data-ouia-component-type="PF6/Table"
     data-ouia-safe="true"
     role="grid"
@@ -1428,7 +1428,7 @@ exports[`Table Collapsible nested table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r9b:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_9b_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -1522,7 +1522,7 @@ exports[`Table Collapsible nested table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r9c:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_9c_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -1536,7 +1536,7 @@ exports[`Table Collapsible nested table 1`] = `
             aria-label="Details"
             aria-labelledby="simple-node0 expandable-toggle0"
             class="pf-v6-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-:r9d:"
+            data-ouia-component-id="OUIA-Generated-Button-plain-_r_9d_"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             id="expandable-toggle0"
@@ -1612,7 +1612,7 @@ exports[`Table Collapsible nested table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr pf-v6-c-table__expandable-row"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r9e:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_9e_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
         hidden=""
@@ -1627,7 +1627,7 @@ exports[`Table Collapsible nested table 1`] = `
             aria-label="Details"
             aria-labelledby="simple-node1 expandable-toggle1"
             class="pf-v6-c-button pf-m-plain pf-m-expanded"
-            data-ouia-component-id="OUIA-Generated-Button-plain-:r9f:"
+            data-ouia-component-id="OUIA-Generated-Button-plain-_r_9f_"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             id="expandable-toggle1"
@@ -1708,7 +1708,7 @@ exports[`Table Collapsible nested table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr pf-v6-c-table__expandable-row"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r9g:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_9g_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
         hidden=""
@@ -1775,7 +1775,7 @@ exports[`Table Collapsible nested table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r9h:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_9h_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -1789,7 +1789,7 @@ exports[`Table Collapsible nested table 1`] = `
             aria-label="Details"
             aria-labelledby="simple-node3 expandable-toggle3"
             class="pf-v6-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-:r9i:"
+            data-ouia-component-id="OUIA-Generated-Button-plain-_r_9i_"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             id="expandable-toggle3"
@@ -1865,7 +1865,7 @@ exports[`Table Collapsible nested table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr pf-v6-c-table__expandable-row"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r9j:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_9j_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
         hidden=""
@@ -1932,7 +1932,7 @@ exports[`Table Collapsible nested table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r9k:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_9k_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -1993,7 +1993,7 @@ exports[`Table Collapsible nested table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r9l:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_9l_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -2054,7 +2054,7 @@ exports[`Table Collapsible nested table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r9m:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_9m_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -2115,7 +2115,7 @@ exports[`Table Collapsible nested table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r9n:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_9n_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -2179,7 +2179,7 @@ exports[`Table Collapsible table 1`] = `
   <table
     aria-label="Aria labeled"
     class="pf-v6-c-table pf-m-grid-md"
-    data-ouia-component-id="OUIA-Generated-Table-:r8n:"
+    data-ouia-component-id="OUIA-Generated-Table-_r_8n_"
     data-ouia-component-type="PF6/Table"
     data-ouia-safe="true"
     role="grid"
@@ -2189,7 +2189,7 @@ exports[`Table Collapsible table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r8o:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_8o_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -2283,7 +2283,7 @@ exports[`Table Collapsible table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r8p:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_8p_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -2297,7 +2297,7 @@ exports[`Table Collapsible table 1`] = `
             aria-label="Details"
             aria-labelledby="simple-node0 expandable-toggle0"
             class="pf-v6-c-button pf-m-plain pf-m-expanded"
-            data-ouia-component-id="OUIA-Generated-Button-plain-:r8q:"
+            data-ouia-component-id="OUIA-Generated-Button-plain-_r_8q_"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             id="expandable-toggle0"
@@ -2373,7 +2373,7 @@ exports[`Table Collapsible table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr pf-v6-c-table__expandable-row pf-m-expanded"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r8r:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_8r_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -2439,7 +2439,7 @@ exports[`Table Collapsible table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r8s:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_8s_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -2500,7 +2500,7 @@ exports[`Table Collapsible table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r8t:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_8t_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -2514,7 +2514,7 @@ exports[`Table Collapsible table 1`] = `
             aria-label="Details"
             aria-labelledby="simple-node3 expandable-toggle3"
             class="pf-v6-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-:r8u:"
+            data-ouia-component-id="OUIA-Generated-Button-plain-_r_8u_"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             id="expandable-toggle3"
@@ -2590,7 +2590,7 @@ exports[`Table Collapsible table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr pf-v6-c-table__expandable-row"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r8v:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_8v_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
         hidden=""
@@ -2657,7 +2657,7 @@ exports[`Table Collapsible table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r90:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_90_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -2718,7 +2718,7 @@ exports[`Table Collapsible table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r91:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_91_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -2779,7 +2779,7 @@ exports[`Table Collapsible table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r92:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_92_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -2840,7 +2840,7 @@ exports[`Table Collapsible table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r93:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_93_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -2904,7 +2904,7 @@ exports[`Table Compact table with Radio select 1`] = `
   <table
     aria-label="Compact table with radio"
     class="pf-v6-c-table pf-m-grid-md pf-m-compact"
-    data-ouia-component-id="OUIA-Generated-Table-:rb8:"
+    data-ouia-component-id="OUIA-Generated-Table-_r_b8_"
     data-ouia-component-type="PF6/Table"
     data-ouia-safe="true"
     role="grid"
@@ -2914,7 +2914,7 @@ exports[`Table Compact table with Radio select 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rb9:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_b9_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -3008,7 +3008,7 @@ exports[`Table Compact table with Radio select 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rba:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_ba_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -3024,7 +3024,7 @@ exports[`Table Compact table with Radio select 1`] = `
               aria-invalid="false"
               aria-label="Select row 0"
               class="pf-v6-c-radio__input"
-              data-ouia-component-id="OUIA-Generated-Radio-:rbc:"
+              data-ouia-component-id="OUIA-Generated-Radio-_r_bc_"
               data-ouia-component-type="PF6/Radio"
               data-ouia-safe="true"
               id="select-0"
@@ -3080,7 +3080,7 @@ exports[`Table Compact table with Radio select 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr pf-v6-c-table__expandable-row"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rbd:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_bd_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
         hidden=""
@@ -3137,7 +3137,7 @@ exports[`Table Compact table with Radio select 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr pf-v6-c-table__expandable-row"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rbe:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_be_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
         hidden=""
@@ -3199,7 +3199,7 @@ exports[`Table Compact table with Radio select 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rbf:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_bf_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -3215,7 +3215,7 @@ exports[`Table Compact table with Radio select 1`] = `
               aria-invalid="false"
               aria-label="Select row 3"
               class="pf-v6-c-radio__input"
-              data-ouia-component-id="OUIA-Generated-Radio-:rbh:"
+              data-ouia-component-id="OUIA-Generated-Radio-_r_bh_"
               data-ouia-component-type="PF6/Radio"
               data-ouia-safe="true"
               id="select-3"
@@ -3271,7 +3271,7 @@ exports[`Table Compact table with Radio select 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr pf-v6-c-table__expandable-row"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rbi:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_bi_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
         hidden=""
@@ -3333,7 +3333,7 @@ exports[`Table Compact table with Radio select 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rbj:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_bj_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -3349,7 +3349,7 @@ exports[`Table Compact table with Radio select 1`] = `
               aria-invalid="false"
               aria-label="Select row 5"
               class="pf-v6-c-radio__input"
-              data-ouia-component-id="OUIA-Generated-Radio-:rbl:"
+              data-ouia-component-id="OUIA-Generated-Radio-_r_bl_"
               data-ouia-component-type="PF6/Radio"
               data-ouia-safe="true"
               id="select-5"
@@ -3410,7 +3410,7 @@ exports[`Table Compact table with Radio select 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rbm:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_bm_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -3426,7 +3426,7 @@ exports[`Table Compact table with Radio select 1`] = `
               aria-invalid="false"
               aria-label="Select row 6"
               class="pf-v6-c-radio__input"
-              data-ouia-component-id="OUIA-Generated-Radio-:rbo:"
+              data-ouia-component-id="OUIA-Generated-Radio-_r_bo_"
               data-ouia-component-type="PF6/Radio"
               data-ouia-safe="true"
               id="select-6"
@@ -3487,7 +3487,7 @@ exports[`Table Compact table with Radio select 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rbp:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_bp_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -3503,7 +3503,7 @@ exports[`Table Compact table with Radio select 1`] = `
               aria-invalid="false"
               aria-label="Select row 7"
               class="pf-v6-c-radio__input"
-              data-ouia-component-id="OUIA-Generated-Radio-:rbr:"
+              data-ouia-component-id="OUIA-Generated-Radio-_r_br_"
               data-ouia-component-type="PF6/Radio"
               data-ouia-safe="true"
               id="select-7"
@@ -3564,7 +3564,7 @@ exports[`Table Compact table with Radio select 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rbs:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_bs_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -3580,7 +3580,7 @@ exports[`Table Compact table with Radio select 1`] = `
               aria-invalid="false"
               aria-label="Select row 8"
               class="pf-v6-c-radio__input"
-              data-ouia-component-id="OUIA-Generated-Radio-:rbu:"
+              data-ouia-component-id="OUIA-Generated-Radio-_r_bu_"
               data-ouia-component-type="PF6/Radio"
               data-ouia-safe="true"
               id="select-8"
@@ -3644,7 +3644,7 @@ exports[`Table Compound Expandable table 1`] = `
   <table
     aria-label="Aria labeled"
     class="pf-v6-c-table pf-m-grid-md"
-    data-ouia-component-id="OUIA-Generated-Table-:r94:"
+    data-ouia-component-id="OUIA-Generated-Table-_r_94_"
     data-ouia-component-type="PF6/Table"
     data-ouia-safe="true"
     role="grid"
@@ -3654,7 +3654,7 @@ exports[`Table Compound Expandable table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r95:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_95_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -3684,7 +3684,7 @@ exports[`Table Compound Expandable table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r96:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_96_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -3729,7 +3729,7 @@ exports[`Table Compound Expandable table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr pf-v6-c-table__expandable-row pf-m-expanded"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r97:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_97_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -3750,7 +3750,7 @@ exports[`Table Compound Expandable table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r98:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_98_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -3795,7 +3795,7 @@ exports[`Table Compound Expandable table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr pf-v6-c-table__expandable-row"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r99:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_99_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
         hidden=""
@@ -3820,7 +3820,7 @@ exports[`Table Control text table 1`] = `
   <table
     aria-label="Aria labeled"
     class="pf-v6-c-table pf-m-grid-md"
-    data-ouia-component-id="OUIA-Generated-Table-:rbv:"
+    data-ouia-component-id="OUIA-Generated-Table-_r_bv_"
     data-ouia-component-type="PF6/Table"
     data-ouia-safe="true"
     role="grid"
@@ -3830,7 +3830,7 @@ exports[`Table Control text table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rc0:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_c0_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -3887,7 +3887,7 @@ exports[`Table Control text table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rc1:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_c1_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -3938,7 +3938,7 @@ exports[`Table Control text table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr pf-v6-c-table__expandable-row"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rc2:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_c2_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
         hidden=""
@@ -3990,7 +3990,7 @@ exports[`Table Control text table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr pf-v6-c-table__expandable-row"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rc3:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_c3_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
         hidden=""
@@ -4047,7 +4047,7 @@ exports[`Table Control text table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rc4:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_c4_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -4098,7 +4098,7 @@ exports[`Table Control text table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr pf-v6-c-table__expandable-row"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rc5:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_c5_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
         hidden=""
@@ -4155,7 +4155,7 @@ exports[`Table Control text table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rc6:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_c6_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -4211,7 +4211,7 @@ exports[`Table Control text table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rc7:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_c7_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -4267,7 +4267,7 @@ exports[`Table Control text table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rc8:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_c8_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -4323,7 +4323,7 @@ exports[`Table Control text table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rc9:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_c9_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -4382,7 +4382,7 @@ exports[`Table Header width table 1`] = `
   <table
     aria-label="Aria labeled"
     class="pf-v6-c-table pf-m-grid-md"
-    data-ouia-component-id="OUIA-Generated-Table-:rca:"
+    data-ouia-component-id="OUIA-Generated-Table-_r_ca_"
     data-ouia-component-type="PF6/Table"
     data-ouia-safe="true"
     role="grid"
@@ -4392,7 +4392,7 @@ exports[`Table Header width table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rcb:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_cb_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -4449,7 +4449,7 @@ exports[`Table Header width table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rcc:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_cc_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -4500,7 +4500,7 @@ exports[`Table Header width table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr pf-v6-c-table__expandable-row"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rcd:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_cd_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
         hidden=""
@@ -4552,7 +4552,7 @@ exports[`Table Header width table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr pf-v6-c-table__expandable-row"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rce:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_ce_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
         hidden=""
@@ -4609,7 +4609,7 @@ exports[`Table Header width table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rcf:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_cf_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -4660,7 +4660,7 @@ exports[`Table Header width table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr pf-v6-c-table__expandable-row"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rcg:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_cg_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
         hidden=""
@@ -4717,7 +4717,7 @@ exports[`Table Header width table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rch:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_ch_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -4773,7 +4773,7 @@ exports[`Table Header width table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rci:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_ci_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -4829,7 +4829,7 @@ exports[`Table Header width table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rcj:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_cj_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -4885,7 +4885,7 @@ exports[`Table Header width table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rck:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_ck_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -4944,7 +4944,7 @@ exports[`Table Selectable table 1`] = `
   <table
     aria-label="Aria labeled"
     class="pf-v6-c-table pf-m-grid-md"
-    data-ouia-component-id="OUIA-Generated-Table-:r9o:"
+    data-ouia-component-id="OUIA-Generated-Table-_r_9o_"
     data-ouia-component-type="PF6/Table"
     data-ouia-safe="true"
     role="grid"
@@ -4954,7 +4954,7 @@ exports[`Table Selectable table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r9p:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_9p_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -4972,7 +4972,7 @@ exports[`Table Selectable table 1`] = `
               aria-invalid="false"
               aria-label="Select all rows"
               class="pf-v6-c-check__input"
-              data-ouia-component-id="OUIA-Generated-Checkbox-:r9r:"
+              data-ouia-component-id="OUIA-Generated-Checkbox-_r_9r_"
               data-ouia-component-type="PF6/Checkbox"
               data-ouia-safe="true"
               id="select-all"
@@ -5063,7 +5063,7 @@ exports[`Table Selectable table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r9s:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_9s_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -5079,7 +5079,7 @@ exports[`Table Selectable table 1`] = `
               aria-invalid="false"
               aria-label="Select row 0"
               class="pf-v6-c-check__input"
-              data-ouia-component-id="OUIA-Generated-Checkbox-:r9u:"
+              data-ouia-component-id="OUIA-Generated-Checkbox-_r_9u_"
               data-ouia-component-type="PF6/Checkbox"
               data-ouia-safe="true"
               id="select-0"
@@ -5134,7 +5134,7 @@ exports[`Table Selectable table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr pf-v6-c-table__expandable-row"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r9v:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_9v_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
         hidden=""
@@ -5191,7 +5191,7 @@ exports[`Table Selectable table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr pf-v6-c-table__expandable-row"
-        data-ouia-component-id="OUIA-Generated-TableRow-:ra0:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_a0_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
         hidden=""
@@ -5253,7 +5253,7 @@ exports[`Table Selectable table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:ra1:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_a1_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -5269,7 +5269,7 @@ exports[`Table Selectable table 1`] = `
               aria-invalid="false"
               aria-label="Select row 3"
               class="pf-v6-c-check__input"
-              data-ouia-component-id="OUIA-Generated-Checkbox-:ra3:"
+              data-ouia-component-id="OUIA-Generated-Checkbox-_r_a3_"
               data-ouia-component-type="PF6/Checkbox"
               data-ouia-safe="true"
               id="select-3"
@@ -5324,7 +5324,7 @@ exports[`Table Selectable table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr pf-v6-c-table__expandable-row"
-        data-ouia-component-id="OUIA-Generated-TableRow-:ra4:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_a4_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
         hidden=""
@@ -5386,7 +5386,7 @@ exports[`Table Selectable table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:ra5:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_a5_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -5402,7 +5402,7 @@ exports[`Table Selectable table 1`] = `
               aria-invalid="false"
               aria-label="Select row 5"
               class="pf-v6-c-check__input"
-              data-ouia-component-id="OUIA-Generated-Checkbox-:ra7:"
+              data-ouia-component-id="OUIA-Generated-Checkbox-_r_a7_"
               data-ouia-component-type="PF6/Checkbox"
               data-ouia-safe="true"
               id="select-5"
@@ -5462,7 +5462,7 @@ exports[`Table Selectable table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:ra8:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_a8_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -5478,7 +5478,7 @@ exports[`Table Selectable table 1`] = `
               aria-invalid="false"
               aria-label="Select row 6"
               class="pf-v6-c-check__input"
-              data-ouia-component-id="OUIA-Generated-Checkbox-:raa:"
+              data-ouia-component-id="OUIA-Generated-Checkbox-_r_aa_"
               data-ouia-component-type="PF6/Checkbox"
               data-ouia-safe="true"
               id="select-6"
@@ -5538,7 +5538,7 @@ exports[`Table Selectable table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rab:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_ab_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -5554,7 +5554,7 @@ exports[`Table Selectable table 1`] = `
               aria-invalid="false"
               aria-label="Select row 7"
               class="pf-v6-c-check__input"
-              data-ouia-component-id="OUIA-Generated-Checkbox-:rad:"
+              data-ouia-component-id="OUIA-Generated-Checkbox-_r_ad_"
               data-ouia-component-type="PF6/Checkbox"
               data-ouia-safe="true"
               id="select-7"
@@ -5614,7 +5614,7 @@ exports[`Table Selectable table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rae:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_ae_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -5630,7 +5630,7 @@ exports[`Table Selectable table 1`] = `
               aria-invalid="false"
               aria-label="Select row 8"
               class="pf-v6-c-check__input"
-              data-ouia-component-id="OUIA-Generated-Checkbox-:rag:"
+              data-ouia-component-id="OUIA-Generated-Checkbox-_r_ag_"
               data-ouia-component-type="PF6/Checkbox"
               data-ouia-safe="true"
               id="select-8"
@@ -5693,7 +5693,7 @@ exports[`Table Selectable table with Radio 1`] = `
   <table
     aria-label="Aria labeled"
     class="pf-v6-c-table pf-m-grid-md"
-    data-ouia-component-id="OUIA-Generated-Table-:rah:"
+    data-ouia-component-id="OUIA-Generated-Table-_r_ah_"
     data-ouia-component-type="PF6/Table"
     data-ouia-safe="true"
     role="grid"
@@ -5703,7 +5703,7 @@ exports[`Table Selectable table with Radio 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rai:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_ai_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -5797,7 +5797,7 @@ exports[`Table Selectable table with Radio 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:raj:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_aj_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -5813,7 +5813,7 @@ exports[`Table Selectable table with Radio 1`] = `
               aria-invalid="false"
               aria-label="Select row 0"
               class="pf-v6-c-radio__input"
-              data-ouia-component-id="OUIA-Generated-Radio-:ral:"
+              data-ouia-component-id="OUIA-Generated-Radio-_r_al_"
               data-ouia-component-type="PF6/Radio"
               data-ouia-safe="true"
               id="select-0"
@@ -5869,7 +5869,7 @@ exports[`Table Selectable table with Radio 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr pf-v6-c-table__expandable-row"
-        data-ouia-component-id="OUIA-Generated-TableRow-:ram:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_am_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
         hidden=""
@@ -5926,7 +5926,7 @@ exports[`Table Selectable table with Radio 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr pf-v6-c-table__expandable-row"
-        data-ouia-component-id="OUIA-Generated-TableRow-:ran:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_an_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
         hidden=""
@@ -5988,7 +5988,7 @@ exports[`Table Selectable table with Radio 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rao:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_ao_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -6004,7 +6004,7 @@ exports[`Table Selectable table with Radio 1`] = `
               aria-invalid="false"
               aria-label="Select row 3"
               class="pf-v6-c-radio__input"
-              data-ouia-component-id="OUIA-Generated-Radio-:raq:"
+              data-ouia-component-id="OUIA-Generated-Radio-_r_aq_"
               data-ouia-component-type="PF6/Radio"
               data-ouia-safe="true"
               id="select-3"
@@ -6060,7 +6060,7 @@ exports[`Table Selectable table with Radio 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr pf-v6-c-table__expandable-row"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rar:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_ar_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
         hidden=""
@@ -6122,7 +6122,7 @@ exports[`Table Selectable table with Radio 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:ras:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_as_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -6138,7 +6138,7 @@ exports[`Table Selectable table with Radio 1`] = `
               aria-invalid="false"
               aria-label="Select row 5"
               class="pf-v6-c-radio__input"
-              data-ouia-component-id="OUIA-Generated-Radio-:rau:"
+              data-ouia-component-id="OUIA-Generated-Radio-_r_au_"
               data-ouia-component-type="PF6/Radio"
               data-ouia-safe="true"
               id="select-5"
@@ -6199,7 +6199,7 @@ exports[`Table Selectable table with Radio 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rav:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_av_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -6215,7 +6215,7 @@ exports[`Table Selectable table with Radio 1`] = `
               aria-invalid="false"
               aria-label="Select row 6"
               class="pf-v6-c-radio__input"
-              data-ouia-component-id="OUIA-Generated-Radio-:rb1:"
+              data-ouia-component-id="OUIA-Generated-Radio-_r_b1_"
               data-ouia-component-type="PF6/Radio"
               data-ouia-safe="true"
               id="select-6"
@@ -6276,7 +6276,7 @@ exports[`Table Selectable table with Radio 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rb2:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_b2_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -6292,7 +6292,7 @@ exports[`Table Selectable table with Radio 1`] = `
               aria-invalid="false"
               aria-label="Select row 7"
               class="pf-v6-c-radio__input"
-              data-ouia-component-id="OUIA-Generated-Radio-:rb4:"
+              data-ouia-component-id="OUIA-Generated-Radio-_r_b4_"
               data-ouia-component-type="PF6/Radio"
               data-ouia-safe="true"
               id="select-7"
@@ -6353,7 +6353,7 @@ exports[`Table Selectable table with Radio 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rb5:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_b5_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -6369,7 +6369,7 @@ exports[`Table Selectable table with Radio 1`] = `
               aria-invalid="false"
               aria-label="Select row 8"
               class="pf-v6-c-radio__input"
-              data-ouia-component-id="OUIA-Generated-Radio-:rb7:"
+              data-ouia-component-id="OUIA-Generated-Radio-_r_b7_"
               data-ouia-component-type="PF6/Radio"
               data-ouia-safe="true"
               id="select-8"
@@ -6433,7 +6433,7 @@ exports[`Table Selectable table with selected expandable row 1`] = `
   <table
     aria-label="Aria labeled"
     class="pf-v6-c-table pf-m-grid-md"
-    data-ouia-component-id="OUIA-Generated-Table-:rcl:"
+    data-ouia-component-id="OUIA-Generated-Table-_r_cl_"
     data-ouia-component-type="PF6/Table"
     data-ouia-safe="true"
     role="grid"
@@ -6443,7 +6443,7 @@ exports[`Table Selectable table with selected expandable row 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rcm:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_cm_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -6462,7 +6462,7 @@ exports[`Table Selectable table with selected expandable row 1`] = `
               aria-label="Select all rows"
               checked=""
               class="pf-v6-c-check__input"
-              data-ouia-component-id="OUIA-Generated-Checkbox-:rco:"
+              data-ouia-component-id="OUIA-Generated-Checkbox-_r_co_"
               data-ouia-component-type="PF6/Checkbox"
               data-ouia-safe="true"
               id="select-all"
@@ -6487,7 +6487,7 @@ exports[`Table Selectable table with selected expandable row 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rcp:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_cp_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -6504,7 +6504,7 @@ exports[`Table Selectable table with selected expandable row 1`] = `
               aria-label="Select row 0"
               checked=""
               class="pf-v6-c-check__input"
-              data-ouia-component-id="OUIA-Generated-Checkbox-:rcr:"
+              data-ouia-component-id="OUIA-Generated-Checkbox-_r_cr_"
               data-ouia-component-type="PF6/Checkbox"
               data-ouia-safe="true"
               id="select-0"
@@ -6523,7 +6523,7 @@ exports[`Table Selectable table with selected expandable row 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rcs:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_cs_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -6551,7 +6551,7 @@ exports[`Table Simple Actions table 1`] = `
   <table
     aria-label="Aria labeled"
     class="pf-v6-c-table pf-m-grid-md"
-    data-ouia-component-id="OUIA-Generated-Table-:r59:"
+    data-ouia-component-id="OUIA-Generated-Table-_r_59_"
     data-ouia-component-type="PF6/Table"
     data-ouia-safe="true"
     role="grid"
@@ -6561,7 +6561,7 @@ exports[`Table Simple Actions table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r5a:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_5a_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -6654,7 +6654,7 @@ exports[`Table Simple Actions table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r5b:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_5b_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -6709,7 +6709,7 @@ exports[`Table Simple Actions table 1`] = `
             aria-haspopup="menu"
             aria-label="Kebab toggle"
             class="pf-v6-c-menu-toggle pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-MenuToggle-plain-:r5f:"
+            data-ouia-component-id="OUIA-Generated-MenuToggle-plain-_r_5f_"
             data-ouia-component-type="PF6/MenuToggle"
             data-ouia-safe="true"
             type="button"
@@ -6736,7 +6736,7 @@ exports[`Table Simple Actions table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r5g:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_5g_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -6791,7 +6791,7 @@ exports[`Table Simple Actions table 1`] = `
             aria-haspopup="menu"
             aria-label="Kebab toggle"
             class="pf-v6-c-menu-toggle pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-MenuToggle-plain-:r5k:"
+            data-ouia-component-id="OUIA-Generated-MenuToggle-plain-_r_5k_"
             data-ouia-component-type="PF6/MenuToggle"
             data-ouia-safe="true"
             type="button"
@@ -6818,7 +6818,7 @@ exports[`Table Simple Actions table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r5l:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_5l_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -6873,7 +6873,7 @@ exports[`Table Simple Actions table 1`] = `
             aria-haspopup="menu"
             aria-label="Kebab toggle"
             class="pf-v6-c-menu-toggle pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-MenuToggle-plain-:r5p:"
+            data-ouia-component-id="OUIA-Generated-MenuToggle-plain-_r_5p_"
             data-ouia-component-type="PF6/MenuToggle"
             data-ouia-safe="true"
             type="button"
@@ -6900,7 +6900,7 @@ exports[`Table Simple Actions table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r5q:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_5q_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -6955,7 +6955,7 @@ exports[`Table Simple Actions table 1`] = `
             aria-haspopup="menu"
             aria-label="Kebab toggle"
             class="pf-v6-c-menu-toggle pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-MenuToggle-plain-:r5u:"
+            data-ouia-component-id="OUIA-Generated-MenuToggle-plain-_r_5u_"
             data-ouia-component-type="PF6/MenuToggle"
             data-ouia-safe="true"
             type="button"
@@ -6982,7 +6982,7 @@ exports[`Table Simple Actions table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r5v:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_5v_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -7037,7 +7037,7 @@ exports[`Table Simple Actions table 1`] = `
             aria-haspopup="menu"
             aria-label="Kebab toggle"
             class="pf-v6-c-menu-toggle pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-MenuToggle-plain-:r63:"
+            data-ouia-component-id="OUIA-Generated-MenuToggle-plain-_r_63_"
             data-ouia-component-type="PF6/MenuToggle"
             data-ouia-safe="true"
             type="button"
@@ -7064,7 +7064,7 @@ exports[`Table Simple Actions table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r64:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_64_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -7119,7 +7119,7 @@ exports[`Table Simple Actions table 1`] = `
             aria-haspopup="menu"
             aria-label="Kebab toggle"
             class="pf-v6-c-menu-toggle pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-MenuToggle-plain-:r68:"
+            data-ouia-component-id="OUIA-Generated-MenuToggle-plain-_r_68_"
             data-ouia-component-type="PF6/MenuToggle"
             data-ouia-safe="true"
             type="button"
@@ -7146,7 +7146,7 @@ exports[`Table Simple Actions table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r69:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_69_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -7201,7 +7201,7 @@ exports[`Table Simple Actions table 1`] = `
             aria-haspopup="menu"
             aria-label="Kebab toggle"
             class="pf-v6-c-menu-toggle pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-MenuToggle-plain-:r6d:"
+            data-ouia-component-id="OUIA-Generated-MenuToggle-plain-_r_6d_"
             data-ouia-component-type="PF6/MenuToggle"
             data-ouia-safe="true"
             type="button"
@@ -7228,7 +7228,7 @@ exports[`Table Simple Actions table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r6e:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_6e_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -7283,7 +7283,7 @@ exports[`Table Simple Actions table 1`] = `
             aria-haspopup="menu"
             aria-label="Kebab toggle"
             class="pf-v6-c-menu-toggle pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-MenuToggle-plain-:r6i:"
+            data-ouia-component-id="OUIA-Generated-MenuToggle-plain-_r_6i_"
             data-ouia-component-type="PF6/MenuToggle"
             data-ouia-safe="true"
             type="button"
@@ -7310,7 +7310,7 @@ exports[`Table Simple Actions table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r6j:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_6j_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -7365,7 +7365,7 @@ exports[`Table Simple Actions table 1`] = `
             aria-haspopup="menu"
             aria-label="Kebab toggle"
             class="pf-v6-c-menu-toggle pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-MenuToggle-plain-:r6n:"
+            data-ouia-component-id="OUIA-Generated-MenuToggle-plain-_r_6n_"
             data-ouia-component-type="PF6/MenuToggle"
             data-ouia-safe="true"
             type="button"
@@ -7392,7 +7392,7 @@ exports[`Table Simple Actions table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r6o:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_6o_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -7447,7 +7447,7 @@ exports[`Table Simple Actions table 1`] = `
             aria-haspopup="menu"
             aria-label="Kebab toggle"
             class="pf-v6-c-menu-toggle pf-m-plain pf-m-disabled"
-            data-ouia-component-id="OUIA-Generated-MenuToggle-plain-:r6s:"
+            data-ouia-component-id="OUIA-Generated-MenuToggle-plain-_r_6s_"
             data-ouia-component-type="PF6/MenuToggle"
             data-ouia-safe="true"
             disabled=""
@@ -7483,7 +7483,7 @@ exports[`Table Table variants Breakpoint -  1`] = `
   <table
     aria-label="Aria labeled"
     class="pf-v6-c-table"
-    data-ouia-component-id="OUIA-Generated-Table-:r2s:"
+    data-ouia-component-id="OUIA-Generated-Table-_r_2s_"
     data-ouia-component-type="PF6/Table"
     data-ouia-safe="true"
     role="grid"
@@ -7493,7 +7493,7 @@ exports[`Table Table variants Breakpoint -  1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r2t:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_2t_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -7580,7 +7580,7 @@ exports[`Table Table variants Breakpoint -  1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r2u:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_2u_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -7627,7 +7627,7 @@ exports[`Table Table variants Breakpoint -  1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r2v:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_2v_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -7674,7 +7674,7 @@ exports[`Table Table variants Breakpoint -  1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r30:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_30_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -7721,7 +7721,7 @@ exports[`Table Table variants Breakpoint -  1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r31:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_31_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -7768,7 +7768,7 @@ exports[`Table Table variants Breakpoint -  1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r32:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_32_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -7815,7 +7815,7 @@ exports[`Table Table variants Breakpoint -  1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r33:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_33_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -7862,7 +7862,7 @@ exports[`Table Table variants Breakpoint -  1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r34:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_34_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -7909,7 +7909,7 @@ exports[`Table Table variants Breakpoint -  1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r35:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_35_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -7956,7 +7956,7 @@ exports[`Table Table variants Breakpoint -  1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r36:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_36_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -8011,7 +8011,7 @@ exports[`Table Table variants Breakpoint - grid 1`] = `
   <table
     aria-label="Aria labeled"
     class="pf-v6-c-table pf-m-grid"
-    data-ouia-component-id="OUIA-Generated-Table-:r37:"
+    data-ouia-component-id="OUIA-Generated-Table-_r_37_"
     data-ouia-component-type="PF6/Table"
     data-ouia-safe="true"
     role="grid"
@@ -8021,7 +8021,7 @@ exports[`Table Table variants Breakpoint - grid 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r38:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_38_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -8108,7 +8108,7 @@ exports[`Table Table variants Breakpoint - grid 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r39:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_39_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -8155,7 +8155,7 @@ exports[`Table Table variants Breakpoint - grid 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r3a:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_3a_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -8202,7 +8202,7 @@ exports[`Table Table variants Breakpoint - grid 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r3b:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_3b_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -8249,7 +8249,7 @@ exports[`Table Table variants Breakpoint - grid 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r3c:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_3c_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -8296,7 +8296,7 @@ exports[`Table Table variants Breakpoint - grid 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r3d:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_3d_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -8343,7 +8343,7 @@ exports[`Table Table variants Breakpoint - grid 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r3e:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_3e_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -8390,7 +8390,7 @@ exports[`Table Table variants Breakpoint - grid 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r3f:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_3f_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -8437,7 +8437,7 @@ exports[`Table Table variants Breakpoint - grid 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r3g:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_3g_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -8484,7 +8484,7 @@ exports[`Table Table variants Breakpoint - grid 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r3h:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_3h_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -8539,7 +8539,7 @@ exports[`Table Table variants Breakpoint - grid-2xl 1`] = `
   <table
     aria-label="Aria labeled"
     class="pf-v6-c-table pf-m-grid-2xl"
-    data-ouia-component-id="OUIA-Generated-Table-:r4j:"
+    data-ouia-component-id="OUIA-Generated-Table-_r_4j_"
     data-ouia-component-type="PF6/Table"
     data-ouia-safe="true"
     role="grid"
@@ -8549,7 +8549,7 @@ exports[`Table Table variants Breakpoint - grid-2xl 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r4k:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_4k_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -8636,7 +8636,7 @@ exports[`Table Table variants Breakpoint - grid-2xl 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r4l:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_4l_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -8683,7 +8683,7 @@ exports[`Table Table variants Breakpoint - grid-2xl 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r4m:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_4m_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -8730,7 +8730,7 @@ exports[`Table Table variants Breakpoint - grid-2xl 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r4n:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_4n_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -8777,7 +8777,7 @@ exports[`Table Table variants Breakpoint - grid-2xl 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r4o:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_4o_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -8824,7 +8824,7 @@ exports[`Table Table variants Breakpoint - grid-2xl 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r4p:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_4p_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -8871,7 +8871,7 @@ exports[`Table Table variants Breakpoint - grid-2xl 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r4q:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_4q_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -8918,7 +8918,7 @@ exports[`Table Table variants Breakpoint - grid-2xl 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r4r:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_4r_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -8965,7 +8965,7 @@ exports[`Table Table variants Breakpoint - grid-2xl 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r4s:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_4s_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -9012,7 +9012,7 @@ exports[`Table Table variants Breakpoint - grid-2xl 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r4t:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_4t_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -9067,7 +9067,7 @@ exports[`Table Table variants Breakpoint - grid-lg 1`] = `
   <table
     aria-label="Aria labeled"
     class="pf-v6-c-table pf-m-grid-lg"
-    data-ouia-component-id="OUIA-Generated-Table-:r3t:"
+    data-ouia-component-id="OUIA-Generated-Table-_r_3t_"
     data-ouia-component-type="PF6/Table"
     data-ouia-safe="true"
     role="grid"
@@ -9077,7 +9077,7 @@ exports[`Table Table variants Breakpoint - grid-lg 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r3u:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_3u_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -9164,7 +9164,7 @@ exports[`Table Table variants Breakpoint - grid-lg 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r3v:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_3v_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -9211,7 +9211,7 @@ exports[`Table Table variants Breakpoint - grid-lg 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r40:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_40_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -9258,7 +9258,7 @@ exports[`Table Table variants Breakpoint - grid-lg 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r41:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_41_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -9305,7 +9305,7 @@ exports[`Table Table variants Breakpoint - grid-lg 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r42:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_42_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -9352,7 +9352,7 @@ exports[`Table Table variants Breakpoint - grid-lg 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r43:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_43_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -9399,7 +9399,7 @@ exports[`Table Table variants Breakpoint - grid-lg 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r44:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_44_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -9446,7 +9446,7 @@ exports[`Table Table variants Breakpoint - grid-lg 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r45:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_45_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -9493,7 +9493,7 @@ exports[`Table Table variants Breakpoint - grid-lg 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r46:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_46_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -9540,7 +9540,7 @@ exports[`Table Table variants Breakpoint - grid-lg 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r47:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_47_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -9595,7 +9595,7 @@ exports[`Table Table variants Breakpoint - grid-md 1`] = `
   <table
     aria-label="Aria labeled"
     class="pf-v6-c-table pf-m-grid-md"
-    data-ouia-component-id="OUIA-Generated-Table-:r3i:"
+    data-ouia-component-id="OUIA-Generated-Table-_r_3i_"
     data-ouia-component-type="PF6/Table"
     data-ouia-safe="true"
     role="grid"
@@ -9605,7 +9605,7 @@ exports[`Table Table variants Breakpoint - grid-md 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r3j:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_3j_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -9692,7 +9692,7 @@ exports[`Table Table variants Breakpoint - grid-md 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r3k:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_3k_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -9739,7 +9739,7 @@ exports[`Table Table variants Breakpoint - grid-md 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r3l:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_3l_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -9786,7 +9786,7 @@ exports[`Table Table variants Breakpoint - grid-md 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r3m:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_3m_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -9833,7 +9833,7 @@ exports[`Table Table variants Breakpoint - grid-md 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r3n:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_3n_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -9880,7 +9880,7 @@ exports[`Table Table variants Breakpoint - grid-md 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r3o:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_3o_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -9927,7 +9927,7 @@ exports[`Table Table variants Breakpoint - grid-md 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r3p:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_3p_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -9974,7 +9974,7 @@ exports[`Table Table variants Breakpoint - grid-md 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r3q:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_3q_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -10021,7 +10021,7 @@ exports[`Table Table variants Breakpoint - grid-md 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r3r:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_3r_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -10068,7 +10068,7 @@ exports[`Table Table variants Breakpoint - grid-md 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r3s:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_3s_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -10123,7 +10123,7 @@ exports[`Table Table variants Breakpoint - grid-xl 1`] = `
   <table
     aria-label="Aria labeled"
     class="pf-v6-c-table pf-m-grid-xl"
-    data-ouia-component-id="OUIA-Generated-Table-:r48:"
+    data-ouia-component-id="OUIA-Generated-Table-_r_48_"
     data-ouia-component-type="PF6/Table"
     data-ouia-safe="true"
     role="grid"
@@ -10133,7 +10133,7 @@ exports[`Table Table variants Breakpoint - grid-xl 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r49:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_49_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -10220,7 +10220,7 @@ exports[`Table Table variants Breakpoint - grid-xl 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r4a:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_4a_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -10267,7 +10267,7 @@ exports[`Table Table variants Breakpoint - grid-xl 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r4b:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_4b_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -10314,7 +10314,7 @@ exports[`Table Table variants Breakpoint - grid-xl 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r4c:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_4c_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -10361,7 +10361,7 @@ exports[`Table Table variants Breakpoint - grid-xl 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r4d:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_4d_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -10408,7 +10408,7 @@ exports[`Table Table variants Breakpoint - grid-xl 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r4e:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_4e_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -10455,7 +10455,7 @@ exports[`Table Table variants Breakpoint - grid-xl 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r4f:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_4f_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -10502,7 +10502,7 @@ exports[`Table Table variants Breakpoint - grid-xl 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r4g:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_4g_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -10549,7 +10549,7 @@ exports[`Table Table variants Breakpoint - grid-xl 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r4h:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_4h_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -10596,7 +10596,7 @@ exports[`Table Table variants Breakpoint - grid-xl 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r4i:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_4i_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -10651,7 +10651,7 @@ exports[`Table Table variants Size - compact 1`] = `
   <table
     aria-label="Aria labeled"
     class="pf-v6-c-table pf-m-grid-md pf-m-compact"
-    data-ouia-component-id="OUIA-Generated-Table-:r4u:"
+    data-ouia-component-id="OUIA-Generated-Table-_r_4u_"
     data-ouia-component-type="PF6/Table"
     data-ouia-safe="true"
     role="grid"
@@ -10661,7 +10661,7 @@ exports[`Table Table variants Size - compact 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r4v:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_4v_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -10748,7 +10748,7 @@ exports[`Table Table variants Size - compact 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r50:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_50_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -10795,7 +10795,7 @@ exports[`Table Table variants Size - compact 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r51:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_51_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -10842,7 +10842,7 @@ exports[`Table Table variants Size - compact 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r52:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_52_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -10889,7 +10889,7 @@ exports[`Table Table variants Size - compact 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r53:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_53_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -10936,7 +10936,7 @@ exports[`Table Table variants Size - compact 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r54:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_54_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -10983,7 +10983,7 @@ exports[`Table Table variants Size - compact 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r55:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_55_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -11030,7 +11030,7 @@ exports[`Table Table variants Size - compact 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r56:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_56_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -11077,7 +11077,7 @@ exports[`Table Table variants Size - compact 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r57:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_57_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -11124,7 +11124,7 @@ exports[`Table Table variants Size - compact 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r58:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_58_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -11181,7 +11181,7 @@ exports[`Table simple Editable table 1`] = `
   >
     <table
       class="pf-v6-c-table pf-m-grid-md"
-      data-ouia-component-id="OUIA-Generated-Table-:r1c:"
+      data-ouia-component-id="OUIA-Generated-Table-_r_1c_"
       data-ouia-component-type="PF6/Table"
       data-ouia-safe="true"
       role="grid"
@@ -11194,7 +11194,7 @@ exports[`Table simple Editable table 1`] = `
       >
         <tr
           class="pf-v6-c-table__tr"
-          data-ouia-component-id="OUIA-Generated-TableRow-:r1d:"
+          data-ouia-component-id="OUIA-Generated-TableRow-_r_1d_"
           data-ouia-component-type="PF6/TableRow"
           data-ouia-safe="true"
         >
@@ -11249,7 +11249,7 @@ exports[`Table simple Editable table 1`] = `
       >
         <tr
           class="pf-v6-c-table__tr pf-m-inline-editable"
-          data-ouia-component-id="OUIA-Generated-TableRow-:r1e:"
+          data-ouia-component-id="OUIA-Generated-TableRow-_r_1e_"
           data-ouia-component-type="PF6/TableRow"
           data-ouia-safe="true"
         >
@@ -11273,7 +11273,7 @@ exports[`Table simple Editable table 1`] = `
                 <input
                   aria-invalid="false"
                   aria-label="Row 1 cell 1 content"
-                  data-ouia-component-id="OUIA-Generated-TextInputBase-:r1g:"
+                  data-ouia-component-id="OUIA-Generated-TextInputBase-_r_1g_"
                   data-ouia-component-type="PF6/TextInput"
                   data-ouia-safe="true"
                   type="text"
@@ -11306,7 +11306,7 @@ exports[`Table simple Editable table 1`] = `
                 <input
                   aria-invalid="false"
                   aria-label="Row 1 cell 2 content"
-                  data-ouia-component-id="OUIA-Generated-TextInputBase-:r1i:"
+                  data-ouia-component-id="OUIA-Generated-TextInputBase-_r_1i_"
                   data-ouia-component-type="PF6/TextInput"
                   data-ouia-safe="true"
                   disabled=""
@@ -11340,7 +11340,7 @@ exports[`Table simple Editable table 1`] = `
                 <input
                   aria-invalid="false"
                   aria-label="Row 1 cell 3 content"
-                  data-ouia-component-id="OUIA-Generated-TextInputBase-:r1k:"
+                  data-ouia-component-id="OUIA-Generated-TextInputBase-_r_1k_"
                   data-ouia-component-type="PF6/TextInput"
                   data-ouia-safe="true"
                   type="text"
@@ -11373,7 +11373,7 @@ exports[`Table simple Editable table 1`] = `
                 <input
                   aria-invalid="false"
                   aria-label="Row 1 cell 4 content"
-                  data-ouia-component-id="OUIA-Generated-TextInputBase-:r1m:"
+                  data-ouia-component-id="OUIA-Generated-TextInputBase-_r_1m_"
                   data-ouia-component-type="PF6/TextInput"
                   data-ouia-safe="true"
                   type="text"
@@ -11400,7 +11400,7 @@ exports[`Table simple Editable table 1`] = `
                 <button
                   aria-label="Save row edits for row 0"
                   class="pf-v6-c-button pf-m-plain"
-                  data-ouia-component-id="OUIA-Generated-Button-plain-:r1n:"
+                  data-ouia-component-id="OUIA-Generated-Button-plain-_r_1n_"
                   data-ouia-component-type="PF6/Button"
                   data-ouia-safe="true"
                   type="button"
@@ -11430,7 +11430,7 @@ exports[`Table simple Editable table 1`] = `
                 <button
                   aria-label="Cancel row edits for row 0"
                   class="pf-v6-c-button pf-m-plain"
-                  data-ouia-component-id="OUIA-Generated-Button-plain-:r1o:"
+                  data-ouia-component-id="OUIA-Generated-Button-plain-_r_1o_"
                   data-ouia-component-type="PF6/Button"
                   data-ouia-safe="true"
                   type="button"
@@ -11461,7 +11461,7 @@ exports[`Table simple Editable table 1`] = `
               <button
                 aria-label="Place row 0 in edit mode"
                 class="pf-v6-c-button pf-m-plain"
-                data-ouia-component-id="OUIA-Generated-Button-plain-:r1p:"
+                data-ouia-component-id="OUIA-Generated-Button-plain-_r_1p_"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"
@@ -11489,7 +11489,7 @@ exports[`Table simple Editable table 1`] = `
         </tr>
         <tr
           class="pf-v6-c-table__tr"
-          data-ouia-component-id="OUIA-Generated-TableRow-:r1q:"
+          data-ouia-component-id="OUIA-Generated-TableRow-_r_1q_"
           data-ouia-component-type="PF6/TableRow"
           data-ouia-safe="true"
         >
@@ -11513,7 +11513,7 @@ exports[`Table simple Editable table 1`] = `
                 <input
                   aria-invalid="false"
                   aria-label="Row 1 cell 1 content"
-                  data-ouia-component-id="OUIA-Generated-TextInputBase-:r1s:"
+                  data-ouia-component-id="OUIA-Generated-TextInputBase-_r_1s_"
                   data-ouia-component-type="PF6/TextInput"
                   data-ouia-safe="true"
                   type="text"
@@ -11546,7 +11546,7 @@ exports[`Table simple Editable table 1`] = `
                 <input
                   aria-invalid="false"
                   aria-label="Row 2 cell 2 content"
-                  data-ouia-component-id="OUIA-Generated-TextInputBase-:r1u:"
+                  data-ouia-component-id="OUIA-Generated-TextInputBase-_r_1u_"
                   data-ouia-component-type="PF6/TextInput"
                   data-ouia-safe="true"
                   disabled=""
@@ -11580,7 +11580,7 @@ exports[`Table simple Editable table 1`] = `
                 <input
                   aria-invalid="false"
                   aria-label="Row 2 cell 3 content"
-                  data-ouia-component-id="OUIA-Generated-TextInputBase-:r20:"
+                  data-ouia-component-id="OUIA-Generated-TextInputBase-_r_20_"
                   data-ouia-component-type="PF6/TextInput"
                   data-ouia-safe="true"
                   type="text"
@@ -11613,7 +11613,7 @@ exports[`Table simple Editable table 1`] = `
                 <input
                   aria-invalid="false"
                   aria-label="Row 2 cell 4 content"
-                  data-ouia-component-id="OUIA-Generated-TextInputBase-:r22:"
+                  data-ouia-component-id="OUIA-Generated-TextInputBase-_r_22_"
                   data-ouia-component-type="PF6/TextInput"
                   data-ouia-safe="true"
                   type="text"
@@ -11640,7 +11640,7 @@ exports[`Table simple Editable table 1`] = `
                 <button
                   aria-label="Save row edits for row 1"
                   class="pf-v6-c-button pf-m-plain"
-                  data-ouia-component-id="OUIA-Generated-Button-plain-:r23:"
+                  data-ouia-component-id="OUIA-Generated-Button-plain-_r_23_"
                   data-ouia-component-type="PF6/Button"
                   data-ouia-safe="true"
                   type="button"
@@ -11670,7 +11670,7 @@ exports[`Table simple Editable table 1`] = `
                 <button
                   aria-label="Cancel row edits for row 1"
                   class="pf-v6-c-button pf-m-plain"
-                  data-ouia-component-id="OUIA-Generated-Button-plain-:r24:"
+                  data-ouia-component-id="OUIA-Generated-Button-plain-_r_24_"
                   data-ouia-component-type="PF6/Button"
                   data-ouia-safe="true"
                   type="button"
@@ -11701,7 +11701,7 @@ exports[`Table simple Editable table 1`] = `
               <button
                 aria-label="Place row 1 in edit mode"
                 class="pf-v6-c-button pf-m-plain"
-                data-ouia-component-id="OUIA-Generated-Button-plain-:r25:"
+                data-ouia-component-id="OUIA-Generated-Button-plain-_r_25_"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"
@@ -11738,7 +11738,7 @@ exports[`Table simple Row click table 1`] = `
   <table
     aria-label="Row click table"
     class="pf-v6-c-table pf-m-grid-md"
-    data-ouia-component-id="OUIA-Generated-Table-:r2h:"
+    data-ouia-component-id="OUIA-Generated-Table-_r_2h_"
     data-ouia-component-type="PF6/Table"
     data-ouia-safe="true"
     role="grid"
@@ -11748,7 +11748,7 @@ exports[`Table simple Row click table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r2i:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_2i_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -11835,7 +11835,7 @@ exports[`Table simple Row click table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r2j:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_2j_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -11882,7 +11882,7 @@ exports[`Table simple Row click table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r2k:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_2k_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -11929,7 +11929,7 @@ exports[`Table simple Row click table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r2l:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_2l_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -11976,7 +11976,7 @@ exports[`Table simple Row click table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r2m:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_2m_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -12023,7 +12023,7 @@ exports[`Table simple Row click table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r2n:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_2n_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -12070,7 +12070,7 @@ exports[`Table simple Row click table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r2o:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_2o_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -12117,7 +12117,7 @@ exports[`Table simple Row click table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r2p:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_2p_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -12164,7 +12164,7 @@ exports[`Table simple Row click table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r2q:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_2q_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -12211,7 +12211,7 @@ exports[`Table simple Row click table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r2r:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_2r_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -12266,7 +12266,7 @@ exports[`Table simple Sortable table 1`] = `
   <table
     aria-label="Aria labeled"
     class="pf-v6-c-table pf-m-grid-md"
-    data-ouia-component-id="OUIA-Generated-Table-:r26:"
+    data-ouia-component-id="OUIA-Generated-Table-_r_26_"
     data-ouia-component-type="PF6/Table"
     data-ouia-safe="true"
     role="grid"
@@ -12276,7 +12276,7 @@ exports[`Table simple Sortable table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r27:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_27_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -12363,7 +12363,7 @@ exports[`Table simple Sortable table 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r28:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_28_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -12410,7 +12410,7 @@ exports[`Table simple Sortable table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r29:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_29_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -12457,7 +12457,7 @@ exports[`Table simple Sortable table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r2a:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_2a_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -12504,7 +12504,7 @@ exports[`Table simple Sortable table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r2b:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_2b_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -12551,7 +12551,7 @@ exports[`Table simple Sortable table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r2c:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_2c_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -12598,7 +12598,7 @@ exports[`Table simple Sortable table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r2d:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_2d_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -12645,7 +12645,7 @@ exports[`Table simple Sortable table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r2e:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_2e_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -12692,7 +12692,7 @@ exports[`Table simple Sortable table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r2f:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_2f_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -12739,7 +12739,7 @@ exports[`Table simple Sortable table 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r2g:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_2g_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -12794,7 +12794,7 @@ exports[`Table simple aria-label 1`] = `
   <table
     aria-label="Aria labeled"
     class="pf-v6-c-table pf-m-grid-md"
-    data-ouia-component-id="OUIA-Generated-Table-:r11:"
+    data-ouia-component-id="OUIA-Generated-Table-_r_11_"
     data-ouia-component-type="PF6/Table"
     data-ouia-safe="true"
     role="grid"
@@ -12804,7 +12804,7 @@ exports[`Table simple aria-label 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r12:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_12_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -12861,7 +12861,7 @@ exports[`Table simple aria-label 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r13:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_13_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -12908,7 +12908,7 @@ exports[`Table simple aria-label 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r14:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_14_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -12955,7 +12955,7 @@ exports[`Table simple aria-label 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r15:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_15_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -13002,7 +13002,7 @@ exports[`Table simple aria-label 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r16:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_16_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -13049,7 +13049,7 @@ exports[`Table simple aria-label 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r17:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_17_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -13096,7 +13096,7 @@ exports[`Table simple aria-label 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r18:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_18_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -13143,7 +13143,7 @@ exports[`Table simple aria-label 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r19:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_19_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -13190,7 +13190,7 @@ exports[`Table simple aria-label 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r1a:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_1a_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -13237,7 +13237,7 @@ exports[`Table simple aria-label 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r1b:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_1b_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -13291,7 +13291,7 @@ exports[`Table simple caption 1`] = `
 <DocumentFragment>
   <table
     class="pf-v6-c-table pf-m-grid-md"
-    data-ouia-component-id="OUIA-Generated-Table-:r0:"
+    data-ouia-component-id="OUIA-Generated-Table-_r_0_"
     data-ouia-component-type="PF6/Table"
     data-ouia-safe="true"
     role="grid"
@@ -13304,7 +13304,7 @@ exports[`Table simple caption 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r1:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_1_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -13361,7 +13361,7 @@ exports[`Table simple caption 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r2:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_2_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -13408,7 +13408,7 @@ exports[`Table simple caption 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r3:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_3_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -13455,7 +13455,7 @@ exports[`Table simple caption 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r4:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_4_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -13502,7 +13502,7 @@ exports[`Table simple caption 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r5:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_5_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -13549,7 +13549,7 @@ exports[`Table simple caption 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r6:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_6_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -13596,7 +13596,7 @@ exports[`Table simple caption 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r7:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_7_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -13643,7 +13643,7 @@ exports[`Table simple caption 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r8:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_8_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -13690,7 +13690,7 @@ exports[`Table simple caption 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r9:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_9_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -13737,7 +13737,7 @@ exports[`Table simple caption 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:ra:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_a_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -13794,7 +13794,7 @@ exports[`Table simple header 1`] = `
   </h4>
   <table
     class="pf-v6-c-table pf-m-grid-md"
-    data-ouia-component-id="OUIA-Generated-Table-:rm:"
+    data-ouia-component-id="OUIA-Generated-Table-_r_m_"
     data-ouia-component-type="PF6/Table"
     data-ouia-safe="true"
     role="grid"
@@ -13804,7 +13804,7 @@ exports[`Table simple header 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rn:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_n_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -13861,7 +13861,7 @@ exports[`Table simple header 1`] = `
     >
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:ro:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_o_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -13908,7 +13908,7 @@ exports[`Table simple header 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rp:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_p_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -13955,7 +13955,7 @@ exports[`Table simple header 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rq:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_q_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -14002,7 +14002,7 @@ exports[`Table simple header 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rr:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_r_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -14049,7 +14049,7 @@ exports[`Table simple header 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rs:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_s_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -14096,7 +14096,7 @@ exports[`Table simple header 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rt:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_t_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -14143,7 +14143,7 @@ exports[`Table simple header 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:ru:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_u_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -14190,7 +14190,7 @@ exports[`Table simple header 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:rv:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_v_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -14237,7 +14237,7 @@ exports[`Table simple header 1`] = `
       </tr>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-:r10:"
+        data-ouia-component-id="OUIA-Generated-TableRow-_r_10_"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
diff --git a/packages/react-templates/package.json b/packages/react-templates/package.json
index 8018d4ed2ae..7eec4313b9a 100644
--- a/packages/react-templates/package.json
+++ b/packages/react-templates/package.json
@@ -40,7 +40,7 @@
     "tslib": "^2.8.1"
   },
   "peerDependencies": {
-    "react": "^17 || ^18 || ^19",
-    "react-dom": "^17 || ^18 || ^19"
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
   }
 }
diff --git a/packages/react-templates/src/components/Dropdown/__tests__/__snapshots__/SimpleDropdown.test.tsx.snap b/packages/react-templates/src/components/Dropdown/__tests__/__snapshots__/SimpleDropdown.test.tsx.snap
index f1f674692c7..65ff9cda365 100644
--- a/packages/react-templates/src/components/Dropdown/__tests__/__snapshots__/SimpleDropdown.test.tsx.snap
+++ b/packages/react-templates/src/components/Dropdown/__tests__/__snapshots__/SimpleDropdown.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Dropdown items Matches snapshot 1`] = `
     aria-expanded="true"
     aria-haspopup="menu"
     class="pf-v6-c-menu-toggle pf-m-expanded"
-    data-ouia-component-id="OUIA-Generated-MenuToggle-default-:r4j:"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-default-_r_4j_"
     data-ouia-component-type="PF6/MenuToggle"
     data-ouia-safe="true"
     type="button"
@@ -47,7 +47,7 @@ exports[`Dropdown toggle Matches snapshot 1`] = `
     aria-expanded="false"
     aria-haspopup="menu"
     class="pf-v6-c-menu-toggle"
-    data-ouia-component-id="OUIA-Generated-MenuToggle-default-:r2d:"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-default-_r_2d_"
     data-ouia-component-type="PF6/MenuToggle"
     data-ouia-safe="true"
     type="button"
diff --git a/packages/react-templates/src/components/Select/__tests__/CheckboxSelect.test.tsx b/packages/react-templates/src/components/Select/__tests__/CheckboxSelect.test.tsx
index 8e61c69a073..151f5af3027 100644
--- a/packages/react-templates/src/components/Select/__tests__/CheckboxSelect.test.tsx
+++ b/packages/react-templates/src/components/Select/__tests__/CheckboxSelect.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { CheckboxSelect } from '../CheckboxSelect';
 import styles from '@patternfly/react-styles/css/components/Badge/badge';
@@ -136,8 +136,6 @@ test('toggles the select menu when the toggle button is clicked', async () => {
 
   await user.click(toggleButton);
 
-  await waitForElementToBeRemoved(() => screen.queryByRole('menu'));
-
   expect(screen.queryByRole('menu')).not.toBeInTheDocument();
 });
 
diff --git a/packages/react-templates/src/components/Select/__tests__/MultiTypeaheadSelect.test.tsx b/packages/react-templates/src/components/Select/__tests__/MultiTypeaheadSelect.test.tsx
index f631384c18f..9fd169dfab6 100644
--- a/packages/react-templates/src/components/Select/__tests__/MultiTypeaheadSelect.test.tsx
+++ b/packages/react-templates/src/components/Select/__tests__/MultiTypeaheadSelect.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen, waitForElementToBeRemoved, within } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { MultiTypeaheadSelect } from '../MultiTypeaheadSelect';
 import styles from '@patternfly/react-styles/css/components/Menu/menu';
@@ -106,7 +106,6 @@ describe('MultiTypeaheadSelect', () => {
 
     expect(input).toHaveValue('');
 
-    await user.click(toggle);
     expect(screen.getByRole('option', { name: 'Option 1' })).not.toHaveClass(styles.modifiers.selected);
   });
 
@@ -130,8 +129,6 @@ describe('MultiTypeaheadSelect', () => {
 
     await user.click(toggle);
 
-    await waitForElementToBeRemoved(menu);
-
     expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
   });
 
diff --git a/packages/react-templates/src/components/Select/__tests__/SimpleSelect.test.tsx b/packages/react-templates/src/components/Select/__tests__/SimpleSelect.test.tsx
index 71a59f70dc1..11fca39cec3 100644
--- a/packages/react-templates/src/components/Select/__tests__/SimpleSelect.test.tsx
+++ b/packages/react-templates/src/components/Select/__tests__/SimpleSelect.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { SimpleSelect } from '../SimpleSelect';
 
@@ -44,7 +44,7 @@ test('selects options when clicked', async () => {
   const option1 = screen.getByText('Option 1');
   await user.click(option1);
 
-  expect(option1).toBeInTheDocument();
+  expect(toggle).toHaveTextContent('Option 1');
 });
 
 test('calls the onSelect callback with the selected value when an option is selected', async () => {
@@ -92,8 +92,6 @@ test('toggles the select menu when the toggle button is clicked', async () => {
 
   await user.click(toggleButton);
 
-  await waitForElementToBeRemoved(() => screen.queryByRole('listbox'));
-
   expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
 });
 
diff --git a/packages/react-templates/src/components/Select/__tests__/TypeaheadSelect.test.tsx b/packages/react-templates/src/components/Select/__tests__/TypeaheadSelect.test.tsx
index a5de6afae0f..4b4701b7675 100644
--- a/packages/react-templates/src/components/Select/__tests__/TypeaheadSelect.test.tsx
+++ b/packages/react-templates/src/components/Select/__tests__/TypeaheadSelect.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { TypeaheadSelect } from '../TypeaheadSelect';
 import styles from '@patternfly/react-styles/css/components/Menu/menu';
@@ -127,8 +127,6 @@ test('toggles the select menu when the toggle button is clicked', async () => {
 
   await user.click(toggle);
 
-  await waitForElementToBeRemoved(menu);
-
   expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
 });
 
diff --git a/packages/react-templates/src/components/Select/__tests__/__snapshots__/CheckboxSelectSnapshots.test.tsx.snap b/packages/react-templates/src/components/Select/__tests__/__snapshots__/CheckboxSelectSnapshots.test.tsx.snap
index 2ff72a53fb0..c2c2cf81057 100644
--- a/packages/react-templates/src/components/Select/__tests__/__snapshots__/CheckboxSelectSnapshots.test.tsx.snap
+++ b/packages/react-templates/src/components/Select/__tests__/__snapshots__/CheckboxSelectSnapshots.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`checkbox select with no props snapshot 1`] = `
     aria-expanded="false"
     aria-haspopup="menu"
     class="pf-v6-c-menu-toggle"
-    data-ouia-component-id="OUIA-Generated-MenuToggle-:r2:"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-_r_2_"
     data-ouia-component-type="PF6/MenuToggle"
     data-ouia-safe="true"
     style="width: 200px;"
@@ -48,7 +48,7 @@ exports[`opened checkbox select snapshot 1`] = `
     aria-expanded="true"
     aria-haspopup="menu"
     class="pf-v6-c-menu-toggle pf-m-expanded"
-    data-ouia-component-id="OUIA-Generated-MenuToggle-:r5:"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-_r_5_"
     data-ouia-component-type="PF6/MenuToggle"
     data-ouia-safe="true"
     style="width: 200px;"
diff --git a/packages/react-templates/src/components/Select/__tests__/__snapshots__/MultiTypeaheadSelect.test.tsx.snap b/packages/react-templates/src/components/Select/__tests__/__snapshots__/MultiTypeaheadSelect.test.tsx.snap
index 307ae3f03b4..69c16941f27 100644
--- a/packages/react-templates/src/components/Select/__tests__/__snapshots__/MultiTypeaheadSelect.test.tsx.snap
+++ b/packages/react-templates/src/components/Select/__tests__/__snapshots__/MultiTypeaheadSelect.test.tsx.snap
@@ -34,7 +34,7 @@ exports[`MultiTypeaheadSelect Matches snapshot 1`] = `
         <button
           aria-label="Clear input value"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r4u:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_4u_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -64,7 +64,7 @@ exports[`MultiTypeaheadSelect Matches snapshot 1`] = `
       aria-haspopup="menu"
       aria-label="Multi select Typeahead menu toggle"
       class="pf-v6-c-menu-toggle__button"
-      data-ouia-component-id="OUIA-Generated-MenuToggle-typeahead-:r4t:"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-typeahead-_r_4t_"
       data-ouia-component-type="PF6/MenuToggle"
       data-ouia-safe="true"
       tabindex="-1"
diff --git a/packages/react-templates/src/components/Select/__tests__/__snapshots__/SimpleSelect.test.tsx.snap b/packages/react-templates/src/components/Select/__tests__/__snapshots__/SimpleSelect.test.tsx.snap
index ac7cf2cc67e..37513c2adf7 100644
--- a/packages/react-templates/src/components/Select/__tests__/__snapshots__/SimpleSelect.test.tsx.snap
+++ b/packages/react-templates/src/components/Select/__tests__/__snapshots__/SimpleSelect.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Matches snapshot 1`] = `
     aria-expanded="true"
     aria-haspopup="menu"
     class="pf-v6-c-menu-toggle pf-m-expanded"
-    data-ouia-component-id="OUIA-Generated-MenuToggle-:r22:"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-_r_22_"
     data-ouia-component-type="PF6/MenuToggle"
     data-ouia-safe="true"
     style="width: 200px;"
@@ -48,7 +48,7 @@ exports[`checkbox select with no props snapshot 1`] = `
     aria-expanded="false"
     aria-haspopup="menu"
     class="pf-v6-c-menu-toggle"
-    data-ouia-component-id="OUIA-Generated-MenuToggle-:r1v:"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-_r_1v_"
     data-ouia-component-type="PF6/MenuToggle"
     data-ouia-safe="true"
     style="width: 200px;"
diff --git a/packages/react-templates/src/components/Select/__tests__/__snapshots__/TypeaheadSelect.test.tsx.snap b/packages/react-templates/src/components/Select/__tests__/__snapshots__/TypeaheadSelect.test.tsx.snap
index dd241adb510..84ddd5d777d 100644
--- a/packages/react-templates/src/components/Select/__tests__/__snapshots__/TypeaheadSelect.test.tsx.snap
+++ b/packages/react-templates/src/components/Select/__tests__/__snapshots__/TypeaheadSelect.test.tsx.snap
@@ -34,7 +34,7 @@ exports[`Matches snapshot 1`] = `
         <button
           aria-label="Clear input value"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r4i:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-_r_4i_"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -64,7 +64,7 @@ exports[`Matches snapshot 1`] = `
       aria-haspopup="menu"
       aria-label="Typeahead menu toggle"
       class="pf-v6-c-menu-toggle__button"
-      data-ouia-component-id="OUIA-Generated-MenuToggle-typeahead-:r4h:"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-typeahead-_r_4h_"
       data-ouia-component-type="PF6/MenuToggle"
       data-ouia-safe="true"
       tabindex="-1"
diff --git a/scripts/generators/package/package.json.hbs b/scripts/generators/package/package.json.hbs
index 061bbe2b171..68d7099e1b4 100644
--- a/scripts/generators/package/package.json.hbs
+++ b/scripts/generators/package/package.json.hbs
@@ -39,7 +39,7 @@
     {{/if}}
   },
   "peerDependencies": {
-    "react": "^16.8 || ^17 || ^18",
-    "react-dom": "^16.8 || ^17 || ^18"
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 224de12951b..7b15e2b79a0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5091,8 +5091,8 @@ __metadata:
     tslib: "npm:^2.8.1"
   peerDependencies:
     echarts: ^5.6.0 || ^6.0.0
-    react: ^17 || ^18 || ^19
-    react-dom: ^17 || ^18 || ^19
+    react: ^18 || ^19
+    react-dom: ^18 || ^19
     victory-area: ^37.3.6
     victory-axis: ^37.3.6
     victory-bar: ^37.3.6
@@ -5162,8 +5162,8 @@ __metadata:
     react-dropzone: "npm:14.3.5"
     tslib: "npm:^2.8.1"
   peerDependencies:
-    react: ^17 || ^18 || ^19
-    react-dom: ^17 || ^18 || ^19
+    react: ^18 || ^19
+    react-dom: ^18 || ^19
   languageName: unknown
   linkType: soft
 
@@ -5182,8 +5182,8 @@ __metadata:
     react-dropzone: "npm:^14.3.5"
     tslib: "npm:^2.8.1"
   peerDependencies:
-    react: ^17 || ^18 || ^19
-    react-dom: ^17 || ^18 || ^19
+    react: ^18 || ^19
+    react-dom: ^18 || ^19
   languageName: unknown
   linkType: soft
 
@@ -5220,8 +5220,8 @@ __metadata:
     "@patternfly/react-styles": "workspace:^"
     resize-observer-polyfill: "npm:^1.5.1"
   peerDependencies:
-    react: ^17 || ^18 || ^19
-    react-dom: ^17 || ^18 || ^19
+    react: ^18 || ^19
+    react-dom: ^18 || ^19
   languageName: unknown
   linkType: soft
 
@@ -5237,8 +5237,8 @@ __metadata:
     fs-extra: "npm:^11.3.3"
     tslib: "npm:^2.8.1"
   peerDependencies:
-    react: ^17 || ^18 || ^19
-    react-dom: ^17 || ^18 || ^19
+    react: ^18 || ^19
+    react-dom: ^18 || ^19
   languageName: unknown
   linkType: soft
 
@@ -5275,8 +5275,8 @@ __metadata:
     "@testing-library/user-event": "npm:^14.6.1"
     "@types/jest": "npm:29.5.14"
     "@types/node": "npm:^22.16.5"
-    "@types/react": "npm:^18.3.28"
-    "@types/react-dom": "npm:^18.3.7"
+    "@types/react": "npm:^19.2.18"
+    "@types/react-dom": "npm:^19.2.5"
     babel-jest: "npm:^29.7.0"
     concurrently: "npm:^9.2.1"
     eslint: "npm:^9.32.0"
@@ -5300,8 +5300,8 @@ __metadata:
     plop: "npm:^4.0.5"
     prettier: "npm:^3.8.1"
     publint: "npm:^0.3.18"
-    react: "npm:^18.3.1"
-    react-dom: "npm:^18.3.1"
+    react: "npm:^19.2.8"
+    react-dom: "npm:^19.2.8"
     rimraf: "npm:^6.1.3"
     rollup: "npm:^4.57.1"
     rollup-plugin-scss: "npm:^4.0.1"
@@ -5336,8 +5336,8 @@ __metadata:
     lodash: "npm:^4.18.1"
     tslib: "npm:^2.8.1"
   peerDependencies:
-    react: ^17 || ^18 || ^19
-    react-dom: ^17 || ^18 || ^19
+    react: ^18 || ^19
+    react-dom: ^18 || ^19
   languageName: unknown
   linkType: soft
 
@@ -5351,8 +5351,8 @@ __metadata:
     "@patternfly/react-tokens": "workspace:^"
     tslib: "npm:^2.8.1"
   peerDependencies:
-    react: ^17 || ^18 || ^19
-    react-dom: ^17 || ^18 || ^19
+    react: ^18 || ^19
+    react-dom: ^18 || ^19
   languageName: unknown
   linkType: soft
 
@@ -6969,13 +6969,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/prop-types@npm:*":
-  version: 15.7.14
-  resolution: "@types/prop-types@npm:15.7.14"
-  checksum: 10c0/1ec775160bfab90b67a782d735952158c7e702ca4502968aa82565bd8e452c2de8601c8dfe349733073c31179116cf7340710160d3836aa8a1ef76d1532893b1
-  languageName: node
-  linkType: hard
-
 "@types/qs@npm:*":
   version: 6.9.15
   resolution: "@types/qs@npm:6.9.15"
@@ -6990,22 +6983,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:^18.3.7":
-  version: 18.3.7
-  resolution: "@types/react-dom@npm:18.3.7"
+"@types/react-dom@npm:^19.2.5":
+  version: 19.2.5
+  resolution: "@types/react-dom@npm:19.2.5"
   peerDependencies:
-    "@types/react": ^18.0.0
-  checksum: 10c0/8bd309e2c3d1604a28a736a24f96cbadf6c05d5288cfef8883b74f4054c961b6b3a5e997fd5686e492be903c8f3380dba5ec017eff3906b1256529cd2d39603e
+    "@types/react": ^19.2.0
+  checksum: 10c0/7a59467b043debf392d109daa1ba672e791f20ce6f24ae81fb54715f890f8119d24967e61e3644b6307428603b695b7d59e69eaf531bd1963a74a6cb462f5f49
   languageName: node
   linkType: hard
 
-"@types/react@npm:^18.3.28":
-  version: 18.3.28
-  resolution: "@types/react@npm:18.3.28"
+"@types/react@npm:^19.2.18":
+  version: 19.2.18
+  resolution: "@types/react@npm:19.2.18"
   dependencies:
-    "@types/prop-types": "npm:*"
     csstype: "npm:^3.2.2"
-  checksum: 10c0/683e19cd12b5c691215529af2e32b5ffbaccae3bf0ba93bfafa0e460e8dfee18423afed568be2b8eadf4b837c3749dd296a4f64e2d79f68fa66962c05f5af661
+  checksum: 10c0/d04216172b4b4362b310017c210dfbe019fb4f4e7dffd0313e70b3acb3051d5c3e76e7e84e3cf4c6a3c824993ffadfe3949e589a6398a09d4200e7670e2962de
   languageName: node
   linkType: hard
 
@@ -10816,8 +10808,8 @@ __metadata:
   dependencies:
     "@patternfly/react-core": "workspace:^"
     "@vitejs/plugin-react-swc": "npm:^3.11.0"
-    react: "npm:^18.3.1"
-    react-dom: "npm:^18.3.1"
+    react: "npm:^19.2.8"
+    react-dom: "npm:^19.2.8"
     react-router: "npm:^7.12.0"
     react-router-dom: "npm:^7.12.0"
     vite: "npm:^6.2.2"
@@ -16774,7 +16766,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loose-envify@npm:^1.0.0, loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0":
+"loose-envify@npm:^1.0.0, loose-envify@npm:^1.4.0":
   version: 1.4.0
   resolution: "loose-envify@npm:1.4.0"
   dependencies:
@@ -19888,15 +19880,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:^18.3.1":
-  version: 18.3.1
-  resolution: "react-dom@npm:18.3.1"
+"react-dom@npm:^19.2.8":
+  version: 19.2.8
+  resolution: "react-dom@npm:19.2.8"
   dependencies:
-    loose-envify: "npm:^1.1.0"
-    scheduler: "npm:^0.23.2"
+    scheduler: "npm:^0.27.0"
   peerDependencies:
-    react: ^18.3.1
-  checksum: 10c0/a752496c1941f958f2e8ac56239172296fcddce1365ce45222d04a1947e0cc5547df3e8447f855a81d6d39f008d7c32eab43db3712077f09e3f67c4874973e85
+    react: ^19.2.8
+  checksum: 10c0/41ba2247b76f687fcfe5bbc99f514d6b851d8c8041c2f5ded36ed05bd7fdc5208cacbac9de51e3e6633e77f96f44cec9f0d4a5a55184dba4e00738f224439134
   languageName: node
   linkType: hard
 
@@ -19985,12 +19976,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:^18.3.1":
-  version: 18.3.1
-  resolution: "react@npm:18.3.1"
-  dependencies:
-    loose-envify: "npm:^1.1.0"
-  checksum: 10c0/283e8c5efcf37802c9d1ce767f302dd569dd97a70d9bb8c7be79a789b9902451e0d16334b05d73299b20f048cbc3c7d288bbbde10b701fa194e2089c237dbea3
+"react@npm:^19.2.8":
+  version: 19.2.8
+  resolution: "react@npm:19.2.8"
+  checksum: 10c0/5f86bdb56426652fd6d989d30a6f2e603c057272c47c9ca3a3fbe190a3a39ee9ccce937d63cfc039717abed1b8891d6a499134bc35311acc07eafdacd86537cd
   languageName: node
   linkType: hard
 
@@ -21184,12 +21173,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"scheduler@npm:^0.23.2":
-  version: 0.23.2
-  resolution: "scheduler@npm:0.23.2"
-  dependencies:
-    loose-envify: "npm:^1.1.0"
-  checksum: 10c0/26383305e249651d4c58e6705d5f8425f153211aef95f15161c151f7b8de885f24751b377e4a0b3dd42cce09aad3f87a61dab7636859c0d89b7daf1a1e2a5c78
+"scheduler@npm:^0.27.0":
+  version: 0.27.0
+  resolution: "scheduler@npm:0.27.0"
+  checksum: 10c0/4f03048cb05a3c8fddc45813052251eca00688f413a3cee236d984a161da28db28ba71bd11e7a3dd02f7af84ab28d39fb311431d3b3772fed557945beb00c452
   languageName: node
   linkType: hard
 

From 510744cf5a42a9c179ec92ff3dd398655a5e8e9f Mon Sep 17 00:00:00 2001
From: SamTV12345 <noreply@samtv.fyi>
Date: Mon, 24 Aug 2026 21:13:02 +0200
Subject: [PATCH 2/6] fix(react-table): keep React elements atomic in
 mergeProps

lodash's deep merge recursed into React elements passed through cell
props and transform results. React 19 turned the element owner chain
into plain objects, so the merge walked the entire rendered tree per
cell and server-side rendering of the deprecated Table hung or ran out
of memory. Elements are now kept by reference instead of being spread
or merged into.
---
 .../Table/base/__tests__/merge-props.test.tsx | 38 +++++++++++
 .../src/components/Table/base/merge-props.ts  | 63 ++++++++++++-------
 2 files changed, 77 insertions(+), 24 deletions(-)
 create mode 100644 packages/react-table/src/components/Table/base/__tests__/merge-props.test.tsx

diff --git a/packages/react-table/src/components/Table/base/__tests__/merge-props.test.tsx b/packages/react-table/src/components/Table/base/__tests__/merge-props.test.tsx
new file mode 100644
index 00000000000..ae7ee96ea15
--- /dev/null
+++ b/packages/react-table/src/components/Table/base/__tests__/merge-props.test.tsx
@@ -0,0 +1,38 @@
+import { isValidElement } from 'react';
+import { mergeProps } from '../merge-props';
+
+test('merges plain props deeply', () => {
+  const result = mergeProps({ style: { color: 'red' }, id: 'a' }, { style: { background: 'blue' } });
+
+  expect(result).toEqual({ style: { color: 'red', background: 'blue' }, id: 'a' });
+});
+
+test('merges class names into a single string', () => {
+  expect(mergeProps({ className: 'foo' }, { className: 'bar' })).toEqual({ className: 'foo bar' });
+});
+
+test('composes children when both sides provide them', () => {
+  const result = mergeProps({ children: <div id="outer" /> }, { children: <span id="inner" /> });
+
+  expect(isValidElement(result.children)).toBe(true);
+  expect(result.children.type).toBe('div');
+  expect(result.children.props.children.type).toBe('span');
+});
+
+test('keeps a lone React element child by reference instead of spreading it', () => {
+  const child = <button type="button">toggle</button>;
+  const result = mergeProps({ className: 'cell' }, { children: child });
+
+  // Spreading the element into a plain object would expose React internals
+  // (e.g. the React 19 owner chain) to lodash's deep merge and hang SSR.
+  expect(result.children).toBe(child);
+});
+
+test('treats React elements under arbitrary keys as atomic values', () => {
+  const icon = <svg data-id="first" />;
+  const replacement = <svg data-id="second" />;
+  const result = mergeProps({ title: icon }, { title: replacement });
+
+  expect(result.title).toBe(replacement);
+  expect(mergeProps({ title: icon }, { other: 1 }).title).toBe(icon);
+});
diff --git a/packages/react-table/src/components/Table/base/merge-props.ts b/packages/react-table/src/components/Table/base/merge-props.ts
index e07a9f151ca..a4a854155bd 100644
--- a/packages/react-table/src/components/Table/base/merge-props.ts
+++ b/packages/react-table/src/components/Table/base/merge-props.ts
@@ -4,10 +4,46 @@
  * Forked from reactabular-table version 8.14.0
  * https://github.com/reactabular/reactabular/tree/v8.14.0/packages/reactabular-table/src
  */
-import { cloneElement } from 'react';
+import { cloneElement, isValidElement } from 'react';
 import mergeWith from 'lodash/mergeWith';
 import { css } from '@patternfly/react-styles';
 
+const customizer = (a: any, b: any, key: any) => {
+  if (key === 'children') {
+    if (a && b) {
+      // compose the two
+      return cloneElement(a, {
+        children: b
+      });
+    }
+
+    // React elements must be kept as-is; spreading them into plain objects
+    // exposes their internals (e.g. the React 19 owner chain) to lodash's
+    // deep merge, which then walks the entire element graph.
+    if (isValidElement(a) || isValidElement(b) || a === undefined || b === undefined) {
+      return b === undefined ? a : b;
+    }
+
+    // Children have to be merged in reverse order for Reactabular
+    // logic to work.
+    return { ...b, ...a };
+  }
+
+  if (key === 'className') {
+    // Process class names through classNames to merge properly
+    // as a string.
+    return css(a, b);
+  }
+
+  // React elements are atomic values; letting lodash recurse into their
+  // internals hangs the merge under React 19.
+  if (isValidElement(a) || isValidElement(b)) {
+    return b === undefined ? a : b;
+  }
+
+  return undefined;
+};
+
 /**
  * @param {any} props - Props
  */
@@ -16,30 +52,9 @@ export function mergeProps(...props: any) {
   const restProps = props.slice(1);
 
   if (!restProps.length) {
-    return mergeWith({}, firstProps);
+    return mergeWith({}, firstProps, customizer);
   }
 
   // Avoid mutating the first prop collection
-  return mergeWith(mergeWith({}, firstProps), ...restProps, (a: any, b: any, key: any) => {
-    if (key === 'children') {
-      if (a && b) {
-        // compose the two
-        return cloneElement(a, {
-          children: b
-        });
-      }
-
-      // Children have to be merged in reverse order for Reactabular
-      // logic to work.
-      return { ...b, ...a };
-    }
-
-    if (key === 'className') {
-      // Process class names through classNames to merge properly
-      // as a string.
-      return css(a, b);
-    }
-
-    return undefined;
-  });
+  return mergeWith(mergeWith({}, firstProps, customizer), ...restProps, customizer);
 }

From 26817af00b0260304e4d466302c4a49cc8b69ad8 Mon Sep 17 00:00:00 2001
From: SamTV12345 <noreply@samtv.fyi>
Date: Mon, 24 Aug 2026 21:15:17 +0200
Subject: [PATCH 3/6] fix(react-tokens): escape reserved words in generated
 token modules

The new switch component tokens generated `export const switch = ...`,
which is a syntax error that breaks consumers of the token files,
including the docs build. Reserved words now get a prefixed local
binding that is re-exported under the original name, keeping the
public API unchanged.
---
 packages/react-tokens/scripts/writeTokens.mjs | 34 ++++++++++++++++---
 1 file changed, 29 insertions(+), 5 deletions(-)

diff --git a/packages/react-tokens/scripts/writeTokens.mjs b/packages/react-tokens/scripts/writeTokens.mjs
index cc2aa0b749d..bc6983c9ac8 100644
--- a/packages/react-tokens/scripts/writeTokens.mjs
+++ b/packages/react-tokens/scripts/writeTokens.mjs
@@ -4,14 +4,33 @@ import { generateTokens } from './generateTokens.mjs';
 
 const outDir = resolve(import.meta.dirname, '../dist');
 
-const writeESMExport = (tokenName, tokenString) =>
+// Words that cannot be used as binding identifiers (e.g. the `switch` component token),
+// so `export const <token>` / `declare const <token>` would be a syntax error.
+// prettier-ignore
+const RESERVED_WORDS = new Set([
+  'await', 'break', 'case', 'catch', 'class', 'const', 'continue', 'debugger', 'default', 'delete',
+  'do', 'else', 'enum', 'export', 'extends', 'false', 'finally', 'for', 'function', 'if',
+  'implements', 'import', 'in', 'instanceof', 'interface', 'let', 'new', 'null', 'package',
+  'private', 'protected', 'public', 'return', 'static', 'super', 'switch', 'this', 'throw',
+  'true', 'try', 'typeof', 'var', 'void', 'while', 'with', 'yield'
+]);
+
+const getLocalName = (tokenName) => (RESERVED_WORDS.has(tokenName) ? `_${tokenName}` : tokenName);
+
+const writeESMExport = (tokenName, tokenString) => {
+  const localName = getLocalName(tokenName);
+  const exportStatement =
+    localName === tokenName
+      ? `export const ${tokenName} = ${tokenString};`
+      : `const ${localName} = ${tokenString};\nexport { ${localName} as ${tokenName} };`;
   outputFileSync(
     join(outDir, 'esm/', `${tokenName}.js`),
     `
-export const ${tokenName} = ${tokenString};
-export default ${tokenName};
+${exportStatement}
+export default ${localName};
 `.trim()
   );
+};
 
 const writeCJSExport = (tokenName, tokenString) =>
   outputFileSync(
@@ -25,9 +44,14 @@ exports["default"] = exports.${tokenName};
   );
 
 const writeDTSExport = (tokenName, tokenString) => {
+  const localName = getLocalName(tokenName);
+  const exportStatement =
+    localName === tokenName
+      ? `export const ${tokenName}: ${tokenString};`
+      : `declare const ${localName}: ${tokenString};\nexport { ${localName} as ${tokenName} };`;
   const text = `
-export const ${tokenName}: ${tokenString};
-export default ${tokenName};
+${exportStatement}
+export default ${localName};
 `.trim();
   const filename = `${tokenName}.d.ts`;
   outputFileSync(join(outDir, 'esm', filename), text);

From 08d3ffba52e7bc678fabd9892c0c99aa5f465837 Mon Sep 17 00:00:00 2001
From: SamTV12345 <noreply@samtv.fyi>
Date: Mon, 24 Aug 2026 21:15:19 +0200
Subject: [PATCH 4/6] chore(docs): make prerendering React 19 compatible

react-ssr-prepass reads ReactCurrentDispatcher from the React
internals, which React 19 no longer exposes, so the docs prerender
crashed. It was only used to await AsyncComponent.preload() before
renderToString, and the loading-state render already triggers
preload() itself, so a yarn patch on the documentation-framework
replaces it with re-rendering until no loading placeholder is left.
The same fix should land in the documentation-framework itself.
---
 .gitignore                                    |  3 +-
 ...tion-framework-npm-6.49.2-02e7a8d840.patch | 65 ++++++++++++++++
 package.json                                  |  3 +-
 yarn.lock                                     | 78 ++++++++++++++++++-
 4 files changed, 146 insertions(+), 3 deletions(-)
 create mode 100644 .yarn/patches/@patternfly-documentation-framework-npm-6.49.2-02e7a8d840.patch

diff --git a/.gitignore b/.gitignore
index 07168936c32..53b4196ca9a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -31,4 +31,5 @@ lerna-debug.log
 .vscode
 # For vim
 *.swp
-.yarn
+.yarn/*
+!.yarn/patches
diff --git a/.yarn/patches/@patternfly-documentation-framework-npm-6.49.2-02e7a8d840.patch b/.yarn/patches/@patternfly-documentation-framework-npm-6.49.2-02e7a8d840.patch
new file mode 100644
index 00000000000..8702eb371e2
--- /dev/null
+++ b/.yarn/patches/@patternfly-documentation-framework-npm-6.49.2-02e7a8d840.patch
@@ -0,0 +1,65 @@
+diff --git a/scripts/webpack/prerender.js b/scripts/webpack/prerender.js
+index 37306139a11cabc0c89e2eee637ea8af88693cd9..03f0c1d909a9bc516c5006cb4f8805c250e060bf 100644
+--- a/scripts/webpack/prerender.js
++++ b/scripts/webpack/prerender.js
+@@ -1,10 +1,44 @@
+ const React = require('react');
+ const ReactDOMServer = require('react-dom/server');
+ const { ServerLocation } = require('@reach/router');
+-const ssrPrepass = require('react-ssr-prepass');
+ // react, react-dom, and @reach/router are all EXCLUDED from the ssr-bundle.js
+ // The versions imported above are used instead, which allows us to use <ServerLocation>
+-// const ssrPrepass = require('react-ssr-prepass');
++
++// Let pending dynamic imports (AsyncComponent.preload) settle before re-rendering
++const flushAsync = () => new Promise((resolve) => setImmediate(() => setImmediate(resolve)));
++
++// The loading state rendered by asyncComponentFactory while a page chunk loads
++const LOADING_MARKER = 'style="height:100vh">Loading...';
++
++// react-ssr-prepass walked the element tree to await AsyncComponent.preload(), but it
++// relies on React internals that no longer exist in React 19. AsyncComponent already
++// kicks off preload() from its loading-state render, so rendering to a fixpoint with
++// plain renderToString preloads the same chunks using only public React APIs.
++let prerenderCount = 0;
++
++async function renderToStringWithPreload(element) {
++  const maxPasses = 4;
++  const start = Date.now();
++  let passes = 1;
++  let html = ReactDOMServer.renderToString(element);
++  if (++prerenderCount % 25 === 0) {
++    console.log(`  [prerender #${prerenderCount}] heap=${Math.round(process.memoryUsage().heapUsed / 1048576)}MB`);
++  }
++
++  for (; passes < maxPasses && html.includes(LOADING_MARKER); passes++) {
++    // The first render has kicked off preload(); give the dynamic imports a chance
++    // to settle, then render again until no loading placeholder is left.
++    await (passes === 1 ? flushAsync() : new Promise((resolve) => setTimeout(resolve, 50)));
++    html = ReactDOMServer.renderToString(element);
++  }
++
++  const elapsed = Date.now() - start;
++  if (elapsed > 5000 || html.includes(LOADING_MARKER)) {
++    console.log(`  rendered in ${passes} passes, ${elapsed}ms${html.includes(LOADING_MARKER) ? ' (loading placeholder left!)' : ''}`);
++  }
++
++  return html;
++}
+ 
+ // This function is effectively synchronous because it mutates global.setTimeout
+ // Only allow one copy at a time to run
+@@ -44,12 +78,7 @@ async function prerender(url) {
+   const WrappedApp = React.createElement(ServerLocation, { url },
+     React.createElement(App)
+   );
+-  await ssrPrepass(WrappedApp, element => {
+-    if (element.type.name === 'AsyncComponent') {
+-      return element.type.preload();
+-    }
+-  });
+-  const string = ReactDOMServer.renderToString(WrappedApp);
++  const string = await renderToStringWithPreload(WrappedApp);
+ 
+   return string;
+ }
diff --git a/package.json b/package.json
index 0cc8e4471ec..92f5157babe 100644
--- a/package.json
+++ b/package.json
@@ -124,6 +124,7 @@
     ]
   },
   "resolutions": {
-    "dompurify": "3.4.13"
+    "dompurify": "3.4.13",
+    "@patternfly/documentation-framework": "patch:@patternfly/documentation-framework@npm%3A6.49.2#~/.yarn/patches/@patternfly-documentation-framework-npm-6.49.2-02e7a8d840.patch"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 7b15e2b79a0..f32b56d8ed9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4963,7 +4963,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@patternfly/documentation-framework@npm:^6.40.0":
+"@patternfly/documentation-framework@npm:6.49.2":
   version: 6.49.2
   resolution: "@patternfly/documentation-framework@npm:6.49.2"
   dependencies:
@@ -5039,6 +5039,82 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@patternfly/documentation-framework@patch:@patternfly/documentation-framework@npm%3A6.49.2#~/.yarn/patches/@patternfly-documentation-framework-npm-6.49.2-02e7a8d840.patch":
+  version: 6.49.2
+  resolution: "@patternfly/documentation-framework@patch:@patternfly/documentation-framework@npm%3A6.49.2#~/.yarn/patches/@patternfly-documentation-framework-npm-6.49.2-02e7a8d840.patch::version=6.49.2&hash=e7d433"
+  dependencies:
+    "@babel/core": "npm:^7.29.0"
+    "@babel/preset-env": "npm:7.29.0"
+    "@babel/preset-react": "npm:^7.28.5"
+    "@mdx-js/util": "npm:1.6.22"
+    "@patternfly/ast-helpers": "npm:^1.26.2"
+    "@reach/router": "npm:@gatsbyjs/reach-router@1.3.9"
+    "@rspack/core": "npm:^1.7.7"
+    "@rspack/dev-server": "npm:^1.2.1"
+    autoprefixer: "npm:10.4.27"
+    babel-loader: "npm:^10.0.0"
+    camelcase-css: "npm:2.0.1"
+    chokidar: "npm:4.0.3"
+    codesandbox: "npm:2.2.3"
+    commander: "npm:4.1.1"
+    css-loader: "npm:6.11.0"
+    detab: "npm:2.0.4"
+    express: "npm:4.22.1"
+    file-loader: "npm:6.2.0"
+    file-saver: "npm:1.3.8"
+    fs-extra: "npm:9.1.0"
+    glob: "npm:12.0.0"
+    handlebars: "npm:4.7.8"
+    hast-to-hyperscript: "npm:9.0.1"
+    hast-util-to-text: "npm:2.0.1"
+    html-formatter: "npm:0.1.9"
+    html-webpack-plugin: "npm:5.6.6"
+    js-yaml: "npm:4.1.1"
+    mdast-util-to-hast: "npm:9.1.2"
+    mdurl: "npm:1.0.1"
+    null-loader: "npm:4.0.1"
+    parse-entities: "npm:2.0.0"
+    path-browserify: "npm:1.0.1"
+    postcss: "npm:^8.5.8"
+    postcss-loader: "npm:7.3.4"
+    process: "npm:^0.11.10"
+    puppeteer: "npm:^24.37.5"
+    puppeteer-cluster: "npm:^0.25.0"
+    react-docgen: "npm:6.0.4"
+    react-ssr-prepass: "npm:1.6.0"
+    remark-footnotes: "npm:1.0.0"
+    remark-frontmatter: "npm:2.0.0"
+    remark-mdx: "npm:2.0.0-next.8"
+    remark-mdxjs: "npm:2.0.0-next.8"
+    remark-parse: "npm:8.0.3"
+    remark-squeeze-paragraphs: "npm:4.0.0"
+    sharp: "npm:0.34.5"
+    style-to-object: "npm:0.4.4"
+    to-vfile: "npm:6.1.0"
+    typedoc: "npm:0.23.28"
+    typescript: "npm:4.9.5"
+    unified: "npm:9.2.2"
+    unist-util-remove: "npm:2.1.0"
+    unist-util-visit: "npm:2.0.3"
+    url-loader: "npm:4.1.1"
+    vfile-reporter: "npm:6.0.2"
+    webpack-bundle-analyzer: "npm:5.2.0"
+    webpack-dev-server: "npm:5.2.3"
+    webpack-merge: "npm:5.10.0"
+  peerDependencies:
+    "@patternfly/patternfly": ^6.6.0
+    "@patternfly/react-code-editor": ^6.6.0
+    "@patternfly/react-core": ^6.6.0
+    "@patternfly/react-icons": ^6.6.0
+    "@patternfly/react-table": ^6.6.0
+    react: ^17.0.0 || ^18.0.0
+    react-dom: ^17.0.0 || ^18.0.0
+  bin:
+    pf-docs-framework: scripts/cli/cli.js
+  checksum: 10c0/315007bd0c1b780c3f789027c8443267e30564fc4b6fc31f14d06dca1cbed8907b7b5bfa006c3149803365c58ee1380df09f5f10e0994426771bb39516418ef3
+  languageName: node
+  linkType: hard
+
 "@patternfly/patternfly-a11y@npm:5.2.1":
   version: 5.2.1
   resolution: "@patternfly/patternfly-a11y@npm:5.2.1"

From b4d26c333111a96bb6d2a717e5a7b389373f236a Mon Sep 17 00:00:00 2001
From: SamTV12345 <noreply@samtv.fyi>
Date: Mon, 24 Aug 2026 21:26:59 +0200
Subject: [PATCH 5/6] fix(react-tokens): avoid duplicate default export for
 reserved-word tokens

A token named `default` would have produced both an aliased default
re-export and `export default`, which is a duplicate export. The alias
is now skipped for `default`, and `eval`/`arguments` (invalid binding
names in strict mode) are treated as reserved as well.
---
 packages/react-tokens/scripts/writeTokens.mjs | 32 +++++++++++--------
 1 file changed, 19 insertions(+), 13 deletions(-)

diff --git a/packages/react-tokens/scripts/writeTokens.mjs b/packages/react-tokens/scripts/writeTokens.mjs
index bc6983c9ac8..b135d0071c8 100644
--- a/packages/react-tokens/scripts/writeTokens.mjs
+++ b/packages/react-tokens/scripts/writeTokens.mjs
@@ -4,29 +4,35 @@ import { generateTokens } from './generateTokens.mjs';
 
 const outDir = resolve(import.meta.dirname, '../dist');
 
-// Words that cannot be used as binding identifiers (e.g. the `switch` component token),
-// so `export const <token>` / `declare const <token>` would be a syntax error.
+// Words that cannot be used as binding identifiers in strict mode code (e.g. the
+// `switch` component token), so `export const <token>` / `declare const <token>`
+// would be a syntax error.
 // prettier-ignore
 const RESERVED_WORDS = new Set([
-  'await', 'break', 'case', 'catch', 'class', 'const', 'continue', 'debugger', 'default', 'delete',
-  'do', 'else', 'enum', 'export', 'extends', 'false', 'finally', 'for', 'function', 'if',
-  'implements', 'import', 'in', 'instanceof', 'interface', 'let', 'new', 'null', 'package',
-  'private', 'protected', 'public', 'return', 'static', 'super', 'switch', 'this', 'throw',
-  'true', 'try', 'typeof', 'var', 'void', 'while', 'with', 'yield'
+  'arguments', 'await', 'break', 'case', 'catch', 'class', 'const', 'continue', 'debugger',
+  'default', 'delete', 'do', 'else', 'enum', 'eval', 'export', 'extends', 'false', 'finally',
+  'for', 'function', 'if', 'implements', 'import', 'in', 'instanceof', 'interface', 'let',
+  'new', 'null', 'package', 'private', 'protected', 'public', 'return', 'static', 'super',
+  'switch', 'this', 'throw', 'true', 'try', 'typeof', 'var', 'void', 'while', 'with', 'yield'
 ]);
 
 const getLocalName = (tokenName) => (RESERVED_WORDS.has(tokenName) ? `_${tokenName}` : tokenName);
 
+// `export default` already declares the `default` export name, so an extra
+// `export { _default as default }` alias would be a duplicate export.
+const getAliasExport = (localName, tokenName) =>
+  localName === tokenName || tokenName === 'default' ? '' : `\nexport { ${localName} as ${tokenName} };`;
+
 const writeESMExport = (tokenName, tokenString) => {
   const localName = getLocalName(tokenName);
-  const exportStatement =
+  const declaration =
     localName === tokenName
       ? `export const ${tokenName} = ${tokenString};`
-      : `const ${localName} = ${tokenString};\nexport { ${localName} as ${tokenName} };`;
+      : `const ${localName} = ${tokenString};`;
   outputFileSync(
     join(outDir, 'esm/', `${tokenName}.js`),
     `
-${exportStatement}
+${declaration}${getAliasExport(localName, tokenName)}
 export default ${localName};
 `.trim()
   );
@@ -45,12 +51,12 @@ exports["default"] = exports.${tokenName};
 
 const writeDTSExport = (tokenName, tokenString) => {
   const localName = getLocalName(tokenName);
-  const exportStatement =
+  const declaration =
     localName === tokenName
       ? `export const ${tokenName}: ${tokenString};`
-      : `declare const ${localName}: ${tokenString};\nexport { ${localName} as ${tokenName} };`;
+      : `declare const ${localName}: ${tokenString};`;
   const text = `
-${exportStatement}
+${declaration}${getAliasExport(localName, tokenName)}
 export default ${localName};
 `.trim();
   const filename = `${tokenName}.d.ts`;

From 5bc048c6274f8d40876e547e07dbfcfdaa5262ab Mon Sep 17 00:00:00 2001
From: SamTV12345 <noreply@samtv.fyi>
Date: Tue, 25 Aug 2026 18:21:10 +0200
Subject: [PATCH 6/6] chore: restore snapshot to be english

---
 .../__snapshots__/DatePicker.test.tsx.snap    | 84 +++++++++----------
 1 file changed, 42 insertions(+), 42 deletions(-)

diff --git a/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap b/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap
index af5ce1364b0..f6d5aa01f3d 100644
--- a/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap
+++ b/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap
@@ -154,7 +154,7 @@ exports[`With popover opened 1`] = `
                       <span
                         class="pf-v6-c-menu-toggle__text"
                       >
-                        März
+                        March
                       </span>
                       <span
                         class="pf-v6-c-menu-toggle__controls"
@@ -247,7 +247,7 @@ exports[`With popover opened 1`] = `
                     <span
                       class="pf-v6-screen-reader"
                     >
-                      Sonntag
+                      Sunday
                     </span>
                     <span
                       aria-hidden="true"
@@ -262,7 +262,7 @@ exports[`With popover opened 1`] = `
                     <span
                       class="pf-v6-screen-reader"
                     >
-                      Montag
+                      Monday
                     </span>
                     <span
                       aria-hidden="true"
@@ -277,12 +277,12 @@ exports[`With popover opened 1`] = `
                     <span
                       class="pf-v6-screen-reader"
                     >
-                      Dienstag
+                      Tuesday
                     </span>
                     <span
                       aria-hidden="true"
                     >
-                      D
+                      T
                     </span>
                   </th>
                   <th
@@ -292,12 +292,12 @@ exports[`With popover opened 1`] = `
                     <span
                       class="pf-v6-screen-reader"
                     >
-                      Mittwoch
+                      Wednesday
                     </span>
                     <span
                       aria-hidden="true"
                     >
-                      M
+                      W
                     </span>
                   </th>
                   <th
@@ -307,12 +307,12 @@ exports[`With popover opened 1`] = `
                     <span
                       class="pf-v6-screen-reader"
                     >
-                      Donnerstag
+                      Thursday
                     </span>
                     <span
                       aria-hidden="true"
                     >
-                      D
+                      T
                     </span>
                   </th>
                   <th
@@ -322,7 +322,7 @@ exports[`With popover opened 1`] = `
                     <span
                       class="pf-v6-screen-reader"
                     >
-                      Freitag
+                      Friday
                     </span>
                     <span
                       aria-hidden="true"
@@ -337,7 +337,7 @@ exports[`With popover opened 1`] = `
                     <span
                       class="pf-v6-screen-reader"
                     >
-                      Samstag
+                      Saturday
                     </span>
                     <span
                       aria-hidden="true"
@@ -355,7 +355,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="1 März 2020"
+                      aria-label="1 March 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -367,7 +367,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="2 März 2020"
+                      aria-label="2 March 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -379,7 +379,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="3 März 2020"
+                      aria-label="3 March 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -391,7 +391,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="4 März 2020"
+                      aria-label="4 March 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -403,7 +403,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="5 März 2020"
+                      aria-label="5 March 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -415,7 +415,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="6 März 2020"
+                      aria-label="6 March 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -427,7 +427,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="7 März 2020"
+                      aria-label="7 March 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -443,7 +443,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="8 März 2020"
+                      aria-label="8 March 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -455,7 +455,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="9 März 2020"
+                      aria-label="9 March 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -467,7 +467,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="10 März 2020"
+                      aria-label="10 March 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -479,7 +479,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="11 März 2020"
+                      aria-label="11 March 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -491,7 +491,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="12 März 2020"
+                      aria-label="12 March 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -503,7 +503,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="13 März 2020"
+                      aria-label="13 March 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -515,7 +515,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="14 März 2020"
+                      aria-label="14 March 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -531,7 +531,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="15 März 2020"
+                      aria-label="15 March 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -543,7 +543,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="16 März 2020"
+                      aria-label="16 March 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -555,7 +555,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell pf-m-selected"
                   >
                     <button
-                      aria-label="17 März 2020"
+                      aria-label="17 March 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="0"
                       type="button"
@@ -567,7 +567,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="18 März 2020"
+                      aria-label="18 March 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -579,7 +579,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="19 März 2020"
+                      aria-label="19 March 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -591,7 +591,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="20 März 2020"
+                      aria-label="20 March 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -603,7 +603,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="21 März 2020"
+                      aria-label="21 March 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -619,7 +619,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="22 März 2020"
+                      aria-label="22 March 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -631,7 +631,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="23 März 2020"
+                      aria-label="23 March 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -643,7 +643,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="24 März 2020"
+                      aria-label="24 March 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -655,7 +655,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="25 März 2020"
+                      aria-label="25 March 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -667,7 +667,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="26 März 2020"
+                      aria-label="26 March 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -679,7 +679,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="27 März 2020"
+                      aria-label="27 March 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -691,7 +691,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="28 März 2020"
+                      aria-label="28 March 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -707,7 +707,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="29 März 2020"
+                      aria-label="29 March 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -719,7 +719,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="30 März 2020"
+                      aria-label="30 March 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -731,7 +731,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v6-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="31 März 2020"
+                      aria-label="31 March 2020"
                       class="pf-v6-c-calendar-month__date"
                       tabindex="-1"
                       type="button"