diff --git a/build-tools/utils/custom-css-properties.js b/build-tools/utils/custom-css-properties.js
index 45c758b3d4..19bed49ad6 100644
--- a/build-tools/utils/custom-css-properties.js
+++ b/build-tools/utils/custom-css-properties.js
@@ -59,6 +59,8 @@ const customCssPropertiesList = [
   // Modal Custom Properties
   'modalCustomWidth',
   'modalCustomHeight',
+  // Table Custom Properties
+  'tableExpandableLevel',
   // Spinner Custom Properties
   'spinnerRotatorFrom',
   'spinnerRotatorTo',
diff --git a/src/container/__tests__/__snapshots__/styles.test.tsx.snap b/src/container/__tests__/__snapshots__/styles.test.tsx.snap
index 97e8f5a68a..7dbe985b77 100644
--- a/src/container/__tests__/__snapshots__/styles.test.tsx.snap
+++ b/src/container/__tests__/__snapshots__/styles.test.tsx.snap
@@ -64,7 +64,7 @@ exports[`getHeaderStyles handles all possible style configurations 2`] = `
 
 exports[`getHeaderStyles handles all possible style configurations 3`] = `
 {
-  "--awsui-container-style-border-radius-ka4djm": "8px",
+  "--awsui-container-style-border-radius-fikhx4": "8px",
   "background": "transparent",
   "paddingBlock": "12px",
   "paddingInline": "20px",
@@ -141,7 +141,7 @@ exports[`getRootStyles handles all possible style configurations 2`] = `
 
 exports[`getRootStyles handles all possible style configurations 3`] = `
 {
-  "--awsui-container-style-border-radius-ka4djm": "8px",
+  "--awsui-container-style-border-radius-fikhx4": "8px",
   "background": "#ffffff",
   "borderColor": "#e0e0e0",
   "borderWidth": "1px",
diff --git a/src/dropdown/__tests__/__snapshots__/styles.test.tsx.snap b/src/dropdown/__tests__/__snapshots__/styles.test.tsx.snap
index 7c05bece6d..716f1208cc 100644
--- a/src/dropdown/__tests__/__snapshots__/styles.test.tsx.snap
+++ b/src/dropdown/__tests__/__snapshots__/styles.test.tsx.snap
@@ -6,9 +6,9 @@ exports[`getDropdownStyles handles all possible style configurations 2`] = `unde
 
 exports[`getDropdownStyles handles all possible style configurations 3`] = `
 {
-  "--awsui-dropdown-content-border-color-ka4djm": "rgb(0, 0, 0)",
-  "--awsui-dropdown-content-border-radius-ka4djm": "8px",
-  "--awsui-dropdown-content-border-width-ka4djm": "2px",
+  "--awsui-dropdown-content-border-color-fikhx4": "rgb(0, 0, 0)",
+  "--awsui-dropdown-content-border-radius-fikhx4": "8px",
+  "--awsui-dropdown-content-border-width-fikhx4": "2px",
   "background": "rgb(255, 255, 255)",
 }
 `;
diff --git a/src/input/__tests__/__snapshots__/styles.test.tsx.snap b/src/input/__tests__/__snapshots__/styles.test.tsx.snap
index e0d4fb2112..ca08bc0dfa 100644
--- a/src/input/__tests__/__snapshots__/styles.test.tsx.snap
+++ b/src/input/__tests__/__snapshots__/styles.test.tsx.snap
@@ -2,30 +2,30 @@
 
 exports[`getInputStyles handles all possible style configurations 1`] = `
 {
-  "--awsui-style-background-default-ka4djm": undefined,
-  "--awsui-style-background-disabled-ka4djm": undefined,
-  "--awsui-style-background-focus-ka4djm": undefined,
-  "--awsui-style-background-hover-ka4djm": undefined,
-  "--awsui-style-background-readonly-ka4djm": undefined,
-  "--awsui-style-border-color-default-ka4djm": undefined,
-  "--awsui-style-border-color-disabled-ka4djm": undefined,
-  "--awsui-style-border-color-focus-ka4djm": undefined,
-  "--awsui-style-border-color-hover-ka4djm": undefined,
-  "--awsui-style-border-color-readonly-ka4djm": undefined,
-  "--awsui-style-box-shadow-default-ka4djm": undefined,
-  "--awsui-style-box-shadow-disabled-ka4djm": undefined,
-  "--awsui-style-box-shadow-focus-ka4djm": undefined,
-  "--awsui-style-box-shadow-hover-ka4djm": undefined,
-  "--awsui-style-box-shadow-readonly-ka4djm": undefined,
-  "--awsui-style-color-default-ka4djm": undefined,
-  "--awsui-style-color-disabled-ka4djm": undefined,
-  "--awsui-style-color-focus-ka4djm": undefined,
-  "--awsui-style-color-hover-ka4djm": undefined,
-  "--awsui-style-color-readonly-ka4djm": undefined,
-  "--awsui-style-placeholder-color-ka4djm": undefined,
-  "--awsui-style-placeholder-font-size-ka4djm": undefined,
-  "--awsui-style-placeholder-font-style-ka4djm": undefined,
-  "--awsui-style-placeholder-font-weight-ka4djm": undefined,
+  "--awsui-style-background-default-fikhx4": undefined,
+  "--awsui-style-background-disabled-fikhx4": undefined,
+  "--awsui-style-background-focus-fikhx4": undefined,
+  "--awsui-style-background-hover-fikhx4": undefined,
+  "--awsui-style-background-readonly-fikhx4": undefined,
+  "--awsui-style-border-color-default-fikhx4": undefined,
+  "--awsui-style-border-color-disabled-fikhx4": undefined,
+  "--awsui-style-border-color-focus-fikhx4": undefined,
+  "--awsui-style-border-color-hover-fikhx4": undefined,
+  "--awsui-style-border-color-readonly-fikhx4": undefined,
+  "--awsui-style-box-shadow-default-fikhx4": undefined,
+  "--awsui-style-box-shadow-disabled-fikhx4": undefined,
+  "--awsui-style-box-shadow-focus-fikhx4": undefined,
+  "--awsui-style-box-shadow-hover-fikhx4": undefined,
+  "--awsui-style-box-shadow-readonly-fikhx4": undefined,
+  "--awsui-style-color-default-fikhx4": undefined,
+  "--awsui-style-color-disabled-fikhx4": undefined,
+  "--awsui-style-color-focus-fikhx4": undefined,
+  "--awsui-style-color-hover-fikhx4": undefined,
+  "--awsui-style-color-readonly-fikhx4": undefined,
+  "--awsui-style-placeholder-color-fikhx4": undefined,
+  "--awsui-style-placeholder-font-size-fikhx4": undefined,
+  "--awsui-style-placeholder-font-style-fikhx4": undefined,
+  "--awsui-style-placeholder-font-weight-fikhx4": undefined,
   "borderRadius": undefined,
   "borderWidth": undefined,
   "fontSize": undefined,
@@ -37,30 +37,30 @@ exports[`getInputStyles handles all possible style configurations 1`] = `
 
 exports[`getInputStyles handles all possible style configurations 2`] = `
 {
-  "--awsui-style-background-default-ka4djm": undefined,
-  "--awsui-style-background-disabled-ka4djm": undefined,
-  "--awsui-style-background-focus-ka4djm": undefined,
-  "--awsui-style-background-hover-ka4djm": undefined,
-  "--awsui-style-background-readonly-ka4djm": undefined,
-  "--awsui-style-border-color-default-ka4djm": undefined,
-  "--awsui-style-border-color-disabled-ka4djm": undefined,
-  "--awsui-style-border-color-focus-ka4djm": undefined,
-  "--awsui-style-border-color-hover-ka4djm": undefined,
-  "--awsui-style-border-color-readonly-ka4djm": undefined,
-  "--awsui-style-box-shadow-default-ka4djm": undefined,
-  "--awsui-style-box-shadow-disabled-ka4djm": undefined,
-  "--awsui-style-box-shadow-focus-ka4djm": undefined,
-  "--awsui-style-box-shadow-hover-ka4djm": undefined,
-  "--awsui-style-box-shadow-readonly-ka4djm": undefined,
-  "--awsui-style-color-default-ka4djm": undefined,
-  "--awsui-style-color-disabled-ka4djm": undefined,
-  "--awsui-style-color-focus-ka4djm": undefined,
-  "--awsui-style-color-hover-ka4djm": undefined,
-  "--awsui-style-color-readonly-ka4djm": undefined,
-  "--awsui-style-placeholder-color-ka4djm": undefined,
-  "--awsui-style-placeholder-font-size-ka4djm": undefined,
-  "--awsui-style-placeholder-font-style-ka4djm": undefined,
-  "--awsui-style-placeholder-font-weight-ka4djm": undefined,
+  "--awsui-style-background-default-fikhx4": undefined,
+  "--awsui-style-background-disabled-fikhx4": undefined,
+  "--awsui-style-background-focus-fikhx4": undefined,
+  "--awsui-style-background-hover-fikhx4": undefined,
+  "--awsui-style-background-readonly-fikhx4": undefined,
+  "--awsui-style-border-color-default-fikhx4": undefined,
+  "--awsui-style-border-color-disabled-fikhx4": undefined,
+  "--awsui-style-border-color-focus-fikhx4": undefined,
+  "--awsui-style-border-color-hover-fikhx4": undefined,
+  "--awsui-style-border-color-readonly-fikhx4": undefined,
+  "--awsui-style-box-shadow-default-fikhx4": undefined,
+  "--awsui-style-box-shadow-disabled-fikhx4": undefined,
+  "--awsui-style-box-shadow-focus-fikhx4": undefined,
+  "--awsui-style-box-shadow-hover-fikhx4": undefined,
+  "--awsui-style-box-shadow-readonly-fikhx4": undefined,
+  "--awsui-style-color-default-fikhx4": undefined,
+  "--awsui-style-color-disabled-fikhx4": undefined,
+  "--awsui-style-color-focus-fikhx4": undefined,
+  "--awsui-style-color-hover-fikhx4": undefined,
+  "--awsui-style-color-readonly-fikhx4": undefined,
+  "--awsui-style-placeholder-color-fikhx4": undefined,
+  "--awsui-style-placeholder-font-size-fikhx4": undefined,
+  "--awsui-style-placeholder-font-style-fikhx4": undefined,
+  "--awsui-style-placeholder-font-weight-fikhx4": undefined,
   "borderRadius": undefined,
   "borderWidth": undefined,
   "fontSize": undefined,
@@ -72,30 +72,30 @@ exports[`getInputStyles handles all possible style configurations 2`] = `
 
 exports[`getInputStyles handles all possible style configurations 3`] = `
 {
-  "--awsui-style-background-default-ka4djm": "#ffffff",
-  "--awsui-style-background-disabled-ka4djm": "#f0f0f0",
-  "--awsui-style-background-focus-ka4djm": "#ffffff",
-  "--awsui-style-background-hover-ka4djm": "#fafafa",
-  "--awsui-style-background-readonly-ka4djm": "#ffffff",
-  "--awsui-style-border-color-default-ka4djm": "#cccccc",
-  "--awsui-style-border-color-disabled-ka4djm": "#e0e0e0",
-  "--awsui-style-border-color-focus-ka4djm": "#0073bb",
-  "--awsui-style-border-color-hover-ka4djm": "#999999",
-  "--awsui-style-border-color-readonly-ka4djm": "#e0e0e0",
-  "--awsui-style-box-shadow-default-ka4djm": "none",
-  "--awsui-style-box-shadow-disabled-ka4djm": "none",
-  "--awsui-style-box-shadow-focus-ka4djm": "0 0 0 2px #0073bb",
-  "--awsui-style-box-shadow-hover-ka4djm": "0 1px 2px rgba(0,0,0,0.1)",
-  "--awsui-style-box-shadow-readonly-ka4djm": "none",
-  "--awsui-style-color-default-ka4djm": "#000000",
-  "--awsui-style-color-disabled-ka4djm": "#999999",
-  "--awsui-style-color-focus-ka4djm": "#000000",
-  "--awsui-style-color-hover-ka4djm": "#000000",
-  "--awsui-style-color-readonly-ka4djm": "#000000",
-  "--awsui-style-placeholder-color-ka4djm": "#999999",
-  "--awsui-style-placeholder-font-size-ka4djm": "14px",
-  "--awsui-style-placeholder-font-style-ka4djm": "italic",
-  "--awsui-style-placeholder-font-weight-ka4djm": "400",
+  "--awsui-style-background-default-fikhx4": "#ffffff",
+  "--awsui-style-background-disabled-fikhx4": "#f0f0f0",
+  "--awsui-style-background-focus-fikhx4": "#ffffff",
+  "--awsui-style-background-hover-fikhx4": "#fafafa",
+  "--awsui-style-background-readonly-fikhx4": "#ffffff",
+  "--awsui-style-border-color-default-fikhx4": "#cccccc",
+  "--awsui-style-border-color-disabled-fikhx4": "#e0e0e0",
+  "--awsui-style-border-color-focus-fikhx4": "#0073bb",
+  "--awsui-style-border-color-hover-fikhx4": "#999999",
+  "--awsui-style-border-color-readonly-fikhx4": "#e0e0e0",
+  "--awsui-style-box-shadow-default-fikhx4": "none",
+  "--awsui-style-box-shadow-disabled-fikhx4": "none",
+  "--awsui-style-box-shadow-focus-fikhx4": "0 0 0 2px #0073bb",
+  "--awsui-style-box-shadow-hover-fikhx4": "0 1px 2px rgba(0,0,0,0.1)",
+  "--awsui-style-box-shadow-readonly-fikhx4": "none",
+  "--awsui-style-color-default-fikhx4": "#000000",
+  "--awsui-style-color-disabled-fikhx4": "#999999",
+  "--awsui-style-color-focus-fikhx4": "#000000",
+  "--awsui-style-color-hover-fikhx4": "#000000",
+  "--awsui-style-color-readonly-fikhx4": "#000000",
+  "--awsui-style-placeholder-color-fikhx4": "#999999",
+  "--awsui-style-placeholder-font-size-fikhx4": "14px",
+  "--awsui-style-placeholder-font-style-fikhx4": "italic",
+  "--awsui-style-placeholder-font-weight-fikhx4": "400",
   "borderRadius": "4px",
   "borderWidth": "1px",
   "fontSize": "14px",
diff --git a/src/item-card/__tests__/__snapshots__/styles.test.tsx.snap b/src/item-card/__tests__/__snapshots__/styles.test.tsx.snap
index 12256383c1..2b5f638460 100644
--- a/src/item-card/__tests__/__snapshots__/styles.test.tsx.snap
+++ b/src/item-card/__tests__/__snapshots__/styles.test.tsx.snap
@@ -42,11 +42,11 @@ exports[`getRootStyles handles all possible style configurations 2`] = `{}`;
 
 exports[`getRootStyles handles all possible style configurations 3`] = `
 {
-  "--awsui-style-item-card-background-default-ka4djm": "#ffffff",
-  "--awsui-style-item-card-border-color-default-ka4djm": "#e0e0e0",
-  "--awsui-style-item-card-border-radius-ka4djm": "8px",
-  "--awsui-style-item-card-border-width-default-ka4djm": "1px",
-  "--awsui-style-item-card-box-shadow-default-ka4djm": "0 1px 3px rgba(0,0,0,0.1)",
+  "--awsui-style-item-card-background-default-fikhx4": "#ffffff",
+  "--awsui-style-item-card-border-color-default-fikhx4": "#e0e0e0",
+  "--awsui-style-item-card-border-radius-fikhx4": "8px",
+  "--awsui-style-item-card-border-width-default-fikhx4": "1px",
+  "--awsui-style-item-card-box-shadow-default-fikhx4": "0 1px 3px rgba(0,0,0,0.1)",
   "borderRadius": "8px",
 }
 `;
diff --git a/src/segmented-control/__tests__/__snapshots__/styles.test.tsx.snap b/src/segmented-control/__tests__/__snapshots__/styles.test.tsx.snap
index 588e36f985..99da19f2a8 100644
--- a/src/segmented-control/__tests__/__snapshots__/styles.test.tsx.snap
+++ b/src/segmented-control/__tests__/__snapshots__/styles.test.tsx.snap
@@ -20,17 +20,17 @@ exports[`getSegmentedControlRootStyles handles all possible style configurations
 
 exports[`getSegmentedControlSegmentStyles handles all possible style configurations 1`] = `
 {
-  "--awsui-style-background-active-ka4djm": undefined,
-  "--awsui-style-background-default-ka4djm": undefined,
-  "--awsui-style-background-disabled-ka4djm": undefined,
-  "--awsui-style-background-hover-ka4djm": undefined,
-  "--awsui-style-color-active-ka4djm": undefined,
-  "--awsui-style-color-default-ka4djm": undefined,
-  "--awsui-style-color-disabled-ka4djm": undefined,
-  "--awsui-style-color-hover-ka4djm": undefined,
-  "--awsui-style-focus-ring-border-color-ka4djm": undefined,
-  "--awsui-style-focus-ring-border-radius-ka4djm": undefined,
-  "--awsui-style-focus-ring-border-width-ka4djm": undefined,
+  "--awsui-style-background-active-fikhx4": undefined,
+  "--awsui-style-background-default-fikhx4": undefined,
+  "--awsui-style-background-disabled-fikhx4": undefined,
+  "--awsui-style-background-hover-fikhx4": undefined,
+  "--awsui-style-color-active-fikhx4": undefined,
+  "--awsui-style-color-default-fikhx4": undefined,
+  "--awsui-style-color-disabled-fikhx4": undefined,
+  "--awsui-style-color-hover-fikhx4": undefined,
+  "--awsui-style-focus-ring-border-color-fikhx4": undefined,
+  "--awsui-style-focus-ring-border-radius-fikhx4": undefined,
+  "--awsui-style-focus-ring-border-width-fikhx4": undefined,
   "borderRadius": undefined,
   "fontSize": undefined,
   "paddingBlock": undefined,
@@ -40,17 +40,17 @@ exports[`getSegmentedControlSegmentStyles handles all possible style configurati
 
 exports[`getSegmentedControlSegmentStyles handles all possible style configurations 2`] = `
 {
-  "--awsui-style-background-active-ka4djm": undefined,
-  "--awsui-style-background-default-ka4djm": undefined,
-  "--awsui-style-background-disabled-ka4djm": undefined,
-  "--awsui-style-background-hover-ka4djm": undefined,
-  "--awsui-style-color-active-ka4djm": undefined,
-  "--awsui-style-color-default-ka4djm": undefined,
-  "--awsui-style-color-disabled-ka4djm": undefined,
-  "--awsui-style-color-hover-ka4djm": undefined,
-  "--awsui-style-focus-ring-border-color-ka4djm": undefined,
-  "--awsui-style-focus-ring-border-radius-ka4djm": undefined,
-  "--awsui-style-focus-ring-border-width-ka4djm": undefined,
+  "--awsui-style-background-active-fikhx4": undefined,
+  "--awsui-style-background-default-fikhx4": undefined,
+  "--awsui-style-background-disabled-fikhx4": undefined,
+  "--awsui-style-background-hover-fikhx4": undefined,
+  "--awsui-style-color-active-fikhx4": undefined,
+  "--awsui-style-color-default-fikhx4": undefined,
+  "--awsui-style-color-disabled-fikhx4": undefined,
+  "--awsui-style-color-hover-fikhx4": undefined,
+  "--awsui-style-focus-ring-border-color-fikhx4": undefined,
+  "--awsui-style-focus-ring-border-radius-fikhx4": undefined,
+  "--awsui-style-focus-ring-border-width-fikhx4": undefined,
   "borderRadius": undefined,
   "fontSize": undefined,
   "paddingBlock": undefined,
@@ -60,17 +60,17 @@ exports[`getSegmentedControlSegmentStyles handles all possible style configurati
 
 exports[`getSegmentedControlSegmentStyles handles all possible style configurations 3`] = `
 {
-  "--awsui-style-background-active-ka4djm": "#0073bb",
-  "--awsui-style-background-default-ka4djm": "#ffffff",
-  "--awsui-style-background-disabled-ka4djm": "#f0f0f0",
-  "--awsui-style-background-hover-ka4djm": "#fafafa",
-  "--awsui-style-color-active-ka4djm": "#ffffff",
-  "--awsui-style-color-default-ka4djm": "#000000",
-  "--awsui-style-color-disabled-ka4djm": "#999999",
-  "--awsui-style-color-hover-ka4djm": "#000000",
-  "--awsui-style-focus-ring-border-color-ka4djm": "#0073bb",
-  "--awsui-style-focus-ring-border-radius-ka4djm": "8px",
-  "--awsui-style-focus-ring-border-width-ka4djm": "2px",
+  "--awsui-style-background-active-fikhx4": "#0073bb",
+  "--awsui-style-background-default-fikhx4": "#ffffff",
+  "--awsui-style-background-disabled-fikhx4": "#f0f0f0",
+  "--awsui-style-background-hover-fikhx4": "#fafafa",
+  "--awsui-style-color-active-fikhx4": "#ffffff",
+  "--awsui-style-color-default-fikhx4": "#000000",
+  "--awsui-style-color-disabled-fikhx4": "#999999",
+  "--awsui-style-color-hover-fikhx4": "#000000",
+  "--awsui-style-focus-ring-border-color-fikhx4": "#0073bb",
+  "--awsui-style-focus-ring-border-radius-fikhx4": "8px",
+  "--awsui-style-focus-ring-border-width-fikhx4": "2px",
   "borderRadius": "6px",
   "fontSize": "14px",
   "paddingBlock": "8px",
diff --git a/src/slider/__tests__/__snapshots__/styles.test.tsx.snap b/src/slider/__tests__/__snapshots__/styles.test.tsx.snap
index c52ade99db..d651f0954f 100644
--- a/src/slider/__tests__/__snapshots__/styles.test.tsx.snap
+++ b/src/slider/__tests__/__snapshots__/styles.test.tsx.snap
@@ -2,36 +2,36 @@
 
 exports[`getSliderStyles handles all possible style configurations 1`] = `
 {
-  "--awsui-style-slider-handle-background-active-ka4djm": undefined,
-  "--awsui-style-slider-handle-background-default-ka4djm": undefined,
-  "--awsui-style-slider-handle-background-hover-ka4djm": undefined,
-  "--awsui-style-slider-handle-border-radius-ka4djm": undefined,
-  "--awsui-style-slider-range-background-active-ka4djm": undefined,
-  "--awsui-style-slider-range-background-default-ka4djm": undefined,
-  "--awsui-style-slider-track-background-color-ka4djm": undefined,
+  "--awsui-style-slider-handle-background-active-fikhx4": undefined,
+  "--awsui-style-slider-handle-background-default-fikhx4": undefined,
+  "--awsui-style-slider-handle-background-hover-fikhx4": undefined,
+  "--awsui-style-slider-handle-border-radius-fikhx4": undefined,
+  "--awsui-style-slider-range-background-active-fikhx4": undefined,
+  "--awsui-style-slider-range-background-default-fikhx4": undefined,
+  "--awsui-style-slider-track-background-color-fikhx4": undefined,
 }
 `;
 
 exports[`getSliderStyles handles all possible style configurations 2`] = `
 {
-  "--awsui-style-slider-handle-background-active-ka4djm": undefined,
-  "--awsui-style-slider-handle-background-default-ka4djm": undefined,
-  "--awsui-style-slider-handle-background-hover-ka4djm": undefined,
-  "--awsui-style-slider-handle-border-radius-ka4djm": undefined,
-  "--awsui-style-slider-range-background-active-ka4djm": undefined,
-  "--awsui-style-slider-range-background-default-ka4djm": undefined,
-  "--awsui-style-slider-track-background-color-ka4djm": undefined,
+  "--awsui-style-slider-handle-background-active-fikhx4": undefined,
+  "--awsui-style-slider-handle-background-default-fikhx4": undefined,
+  "--awsui-style-slider-handle-background-hover-fikhx4": undefined,
+  "--awsui-style-slider-handle-border-radius-fikhx4": undefined,
+  "--awsui-style-slider-range-background-active-fikhx4": undefined,
+  "--awsui-style-slider-range-background-default-fikhx4": undefined,
+  "--awsui-style-slider-track-background-color-fikhx4": undefined,
 }
 `;
 
 exports[`getSliderStyles handles all possible style configurations 3`] = `
 {
-  "--awsui-style-slider-handle-background-active-ka4djm": "#1d4ed8",
-  "--awsui-style-slider-handle-background-default-ka4djm": "#3b82f6",
-  "--awsui-style-slider-handle-background-hover-ka4djm": "#2563eb",
-  "--awsui-style-slider-handle-border-radius-ka4djm": "50%",
-  "--awsui-style-slider-range-background-active-ka4djm": "#2563eb",
-  "--awsui-style-slider-range-background-default-ka4djm": "#3b82f6",
-  "--awsui-style-slider-track-background-color-ka4djm": "#dbeafe",
+  "--awsui-style-slider-handle-background-active-fikhx4": "#1d4ed8",
+  "--awsui-style-slider-handle-background-default-fikhx4": "#3b82f6",
+  "--awsui-style-slider-handle-background-hover-fikhx4": "#2563eb",
+  "--awsui-style-slider-handle-border-radius-fikhx4": "50%",
+  "--awsui-style-slider-range-background-active-fikhx4": "#2563eb",
+  "--awsui-style-slider-range-background-default-fikhx4": "#3b82f6",
+  "--awsui-style-slider-track-background-color-fikhx4": "#dbeafe",
 }
 `;
diff --git a/src/table/__tests__/expandable-rows.test.tsx b/src/table/__tests__/expandable-rows.test.tsx
index 0d57af2be4..c8f3bad2fb 100644
--- a/src/table/__tests__/expandable-rows.test.tsx
+++ b/src/table/__tests__/expandable-rows.test.tsx
@@ -4,10 +4,13 @@ import * as React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 
 import TestI18nProvider from '../../../lib/components/i18n/testing';
+import customCssProps from '../../../lib/components/internal/generated/custom-css-properties';
 import { KeyCode } from '../../../lib/components/internal/keycode';
 import Table, { TableProps } from '../../../lib/components/table';
 import createWrapper from '../../../lib/components/test-utils/dom';
 
+import bodyCellStyles from '../../../lib/components/table/body-cell/styles.css.js';
+
 interface Instance {
   name: string;
   children?: Instance[];
@@ -196,6 +199,65 @@ describe('Expandable rows', () => {
     expect(table.findRows()[5].getElement()).toHaveAttribute('aria-posinset', '2');
   });
 
+  test('cells in the expandable column are indented by level, up to level 9', () => {
+    const deepItems: Instance[] = [{ name: '1' }];
+    let current = deepItems[0];
+    for (let level = 2; level <= 11; level++) {
+      current.children = [{ name: `${level}` }];
+      current = current.children[0];
+    }
+    const { table } = renderTable({
+      items: deepItems,
+      columnDefinitions: [...columnDefinitions, { header: 'other', cell: item => item.name }],
+      expandableRows: {
+        isItemExpandable: item => !!item.children,
+        expandedItems: flatten(deepItems),
+        getItemChildren: item => item.children ?? [],
+        onExpandableItemToggle: () => {},
+      },
+    });
+    const getLevel = (row: number, column: number) =>
+      table.findBodyCell(row, column)!.getElement().style.getPropertyValue(customCssProps.tableExpandableLevel);
+
+    expect(table.findRows().map((_, index) => getLevel(index + 1, 1))).toEqual([
+      '1',
+      '2',
+      '3',
+      '4',
+      '5',
+      '6',
+      '7',
+      '8',
+      '9',
+      '9',
+      '9',
+    ]);
+    expect(getLevel(1, 2)).toBe('');
+    // Apps select on the level classes, so they are kept even though they carry no styles.
+    expect(table.findBodyCell(2, 1)!.getElement()).toHaveClass(bodyCellStyles['expandable-level-2']);
+    expect(table.findBodyCell(11, 1)!.getElement()).toHaveClass(bodyCellStyles['expandable-level-next']);
+  });
+
+  test('cells in the expandable column are not indented while edited', () => {
+    const { table } = renderTable({
+      items: nestedItems,
+      columnDefinitions: [{ header: 'name', cell: item => item.name, editConfig: { editingCell: () => null } }],
+      expandableRows: {
+        isItemExpandable: item => !!item.children,
+        expandedItems: [nestedItems[0]],
+        getItemChildren: item => item.children ?? [],
+        onExpandableItemToggle: () => {},
+      },
+    });
+    const getLevel = () =>
+      table.findBodyCell(2, 1)!.getElement().style.getPropertyValue(customCssProps.tableExpandableLevel);
+
+    expect(getLevel()).toBe('2');
+    table.findEditCellButton(2, 1)!.click();
+    expect(table.findEditingCell()).not.toBe(null);
+    expect(getLevel()).toBe('');
+  });
+
   test('onExpandableItemToggle fires with item and expand state', () => {
     const onExpandableItemToggle = jest.fn();
     const { table } = renderTable({
diff --git a/src/table/body-cell/styles.scss b/src/table/body-cell/styles.scss
index 0626b35cd8..217788e651 100644
--- a/src/table/body-cell/styles.scss
+++ b/src/table/body-cell/styles.scss
@@ -48,6 +48,17 @@ $editing-cell-padding-block: awsui.$space-scaled-xxxs;
   }
 }
 
+// Indentation comes from the tableExpandableLevel custom property. The level classes are still
+// applied because apps select on them.
+@for $i from 0 through 9 {
+  .expandable-level-#{$i} {
+    /* no styles */
+  }
+}
+.expandable-level-next {
+  /* no styles */
+}
+
 .expandable-toggle-wrapper {
   position: absolute;
   inset-block: 0;
diff --git a/src/table/body-cell/td-element.tsx b/src/table/body-cell/td-element.tsx
index f1f4527a34..4b8ff72ff7 100644
--- a/src/table/body-cell/td-element.tsx
+++ b/src/table/body-cell/td-element.tsx
@@ -9,6 +9,7 @@ import { copyAnalyticsMetadataAttribute } from '@cloudscape-design/component-too
 
 import { useInternalComponentIcons } from '../../icon-provider/use-component-icons';
 import { ExpandToggleButton } from '../../internal/components/expand-toggle-button';
+import customCssProps from '../../internal/generated/custom-css-properties';
 import { InternalTableBodyCell } from '../../table-body-cell/internal';
 import { ColumnWidthStyle } from '../column-widths-utils';
 import { TableProps } from '../interfaces.js';
@@ -121,12 +122,17 @@ export const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElem
     const { tabIndex: cellTabIndex } = useSingleTabStopNavigation(cellRefObject);
     const tableIcons = useInternalComponentIcons('table');
     const isEditingActive = isEditing && !isEditingDisabled;
+    const isExpandableColumnCell = level !== undefined && !isEditingActive;
 
     return (
       <InternalTableBodyCell
         ref={mergedRef}
         tag={tag}
-        style={{ ...resizableStyle, ...stickyStyles.style }}
+        style={{
+          ...resizableStyle,
+          ...stickyStyles.style,
+          ...(isExpandableColumnCell && { [customCssProps.tableExpandableLevel]: getIndentationLevel(level) }),
+        }}
         className={clsx(
           isSelected && styles['body-cell-selected'],
           isNextSelected && styles['body-cell-next-selected'],
@@ -142,8 +148,8 @@ export const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElem
           isEditing && !isEditingDisabled && styles['body-cell-edit-active'],
           isEditing && isEditingDisabled && styles['body-cell-edit-disabled-popover'],
           hasSuccessIcon && styles['body-cell-has-success'],
-          level !== undefined && !isEditingActive && styles['body-cell-expandable'],
-          level !== undefined && !isEditingActive && styles[`expandable-level-${getLevelClassSuffix(level)}`],
+          isExpandableColumnCell && styles['body-cell-expandable'],
+          isExpandableColumnCell && styles[`expandable-level-${getLevelClassSuffix(level)}`],
           tableVariant && styles[`table-variant-${tableVariant}`],
           stickyStyles.className
         )}
@@ -180,6 +186,13 @@ export const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElem
   }
 );
 
+// Rows nested deeper than this are indented as much as this level.
+const maxIndentationLevel = 9;
+
+function getIndentationLevel(level: number) {
+  return 0 <= level && level <= maxIndentationLevel ? level : maxIndentationLevel;
+}
+
 function getLevelClassSuffix(level: number) {
-  return 0 <= level && level <= 9 ? level : 'next';
+  return 0 <= level && level <= maxIndentationLevel ? level : 'next';
 }
diff --git a/src/table/cell-base/_cell-box.scss b/src/table/cell-base/_cell-box.scss
index 94ed2ac4ca..e7195e9b71 100644
--- a/src/table/cell-base/_cell-box.scss
+++ b/src/table/cell-base/_cell-box.scss
@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 @use '../../internal/styles/tokens' as awsui;
+@use '../../internal/generated/custom-css-properties/index.scss' as custom-props;
 
 $cell-vertical-padding: awsui.$space-scaled-xs;
 // Extra padding so content doesn't shift on selection (VR: the selected border is wider than the divider).
@@ -21,8 +22,8 @@ $cell-negative-space-vertical: 2px;
 // A control cell omits the class, so no padding/negative-margin applies — nothing to override, at any
 // specificity, even as new edge/state rules are added.
 @mixin cell-padding-inline-start($padding) {
-  $max-nesting-levels: 9;
   $offset-padding: calc($padding - 1 * awsui.$border-divider-list-width);
+  $level: var(#{custom-props.$tableExpandableLevel});
 
   > .body-cell-content.with-paddings {
     padding-inline-start: $offset-padding;
@@ -31,24 +32,14 @@ $cell-negative-space-vertical: 2px;
     margin-inline-start: $offset-padding;
   }
 
-  @for $i from 0 through $max-nesting-levels {
-    &.expandable-level-#{$i} {
-      > .body-cell-content.with-paddings {
-        padding-inline-start: calc(#{$offset-padding} / 2);
-        margin-inline-start: calc(#{$offset-padding} / 2 + #{$i} * #{$cell-offset});
-      }
-      > .expandable-toggle-wrapper {
-        margin-inline-start: calc($offset-padding + ($i - 1) * $cell-offset);
-      }
-    }
-  }
-  &.expandable-level-next {
+  // The level is set inline on every expandable cell, so it is always defined here.
+  &.body-cell-expandable {
     > .body-cell-content.with-paddings {
       padding-inline-start: calc(#{$offset-padding} / 2);
-      margin-inline-start: calc(#{$offset-padding} / 2 + #{$max-nesting-levels} * #{$cell-offset});
+      margin-inline-start: calc(#{$offset-padding} / 2 + #{$level} * #{$cell-offset});
     }
     > .expandable-toggle-wrapper {
-      margin-inline-start: calc(#{$offset-padding} + (#{$max-nesting-levels} - 1) * #{$cell-offset});
+      margin-inline-start: calc(#{$offset-padding} + (#{$level} - 1) * #{$cell-offset});
     }
   }
 }
diff --git a/src/tabs/__tests__/__snapshots__/styles.test.tsx.snap b/src/tabs/__tests__/__snapshots__/styles.test.tsx.snap
index 18048fc427..a1851a350a 100644
--- a/src/tabs/__tests__/__snapshots__/styles.test.tsx.snap
+++ b/src/tabs/__tests__/__snapshots__/styles.test.tsx.snap
@@ -2,21 +2,21 @@
 
 exports[`getTabStyles transforms tab styles to CSS properties 1`] = `
 {
-  "--awsui-style-background-active-ka4djm": "#bfdbfe",
-  "--awsui-style-background-default-ka4djm": "#dbeafe",
-  "--awsui-style-background-disabled-ka4djm": "#f3f4f6",
-  "--awsui-style-background-hover-ka4djm": "#eff6ff",
-  "--awsui-style-border-color-active-ka4djm": "#1d4ed8",
-  "--awsui-style-border-color-default-ka4djm": "#3b82f6",
-  "--awsui-style-border-color-disabled-ka4djm": "#93c5fd",
-  "--awsui-style-border-color-hover-ka4djm": "#2563eb",
-  "--awsui-style-color-active-ka4djm": "#1e3a8a",
-  "--awsui-style-color-default-ka4djm": "#1e40af",
-  "--awsui-style-color-disabled-ka4djm": "#93c5fd",
-  "--awsui-style-color-hover-ka4djm": "#1e40af",
-  "--awsui-style-focus-ring-border-color-ka4djm": "#3b82f6",
-  "--awsui-style-focus-ring-border-radius-ka4djm": "4px",
-  "--awsui-style-focus-ring-border-width-ka4djm": "2px",
+  "--awsui-style-background-active-fikhx4": "#bfdbfe",
+  "--awsui-style-background-default-fikhx4": "#dbeafe",
+  "--awsui-style-background-disabled-fikhx4": "#f3f4f6",
+  "--awsui-style-background-hover-fikhx4": "#eff6ff",
+  "--awsui-style-border-color-active-fikhx4": "#1d4ed8",
+  "--awsui-style-border-color-default-fikhx4": "#3b82f6",
+  "--awsui-style-border-color-disabled-fikhx4": "#93c5fd",
+  "--awsui-style-border-color-hover-fikhx4": "#2563eb",
+  "--awsui-style-color-active-fikhx4": "#1e3a8a",
+  "--awsui-style-color-default-fikhx4": "#1e40af",
+  "--awsui-style-color-disabled-fikhx4": "#93c5fd",
+  "--awsui-style-color-hover-fikhx4": "#1e40af",
+  "--awsui-style-focus-ring-border-color-fikhx4": "#3b82f6",
+  "--awsui-style-focus-ring-border-radius-fikhx4": "4px",
+  "--awsui-style-focus-ring-border-width-fikhx4": "2px",
   "borderRadius": "4px",
   "borderWidth": "2px",
   "fontSize": "16px",
@@ -28,10 +28,10 @@ exports[`getTabStyles transforms tab styles to CSS properties 1`] = `
 
 exports[`getTabStyles transforms tab styles to CSS properties 2`] = `
 {
-  "--awsui-style-tabs-active-indicator-border-radius-ka4djm": "2px",
-  "--awsui-style-tabs-active-indicator-color-ka4djm": "#1d4ed8",
-  "--awsui-style-tabs-active-indicator-width-ka4djm": "3px",
-  "--awsui-style-tabs-separator-color-ka4djm": "#cbd5e1",
-  "--awsui-style-tabs-separator-width-ka4djm": "2px",
+  "--awsui-style-tabs-active-indicator-border-radius-fikhx4": "2px",
+  "--awsui-style-tabs-active-indicator-color-fikhx4": "#1d4ed8",
+  "--awsui-style-tabs-active-indicator-width-fikhx4": "3px",
+  "--awsui-style-tabs-separator-color-fikhx4": "#cbd5e1",
+  "--awsui-style-tabs-separator-width-fikhx4": "2px",
 }
 `;
diff --git a/src/text-filter/__tests__/__snapshots__/styles.test.tsx.snap b/src/text-filter/__tests__/__snapshots__/styles.test.tsx.snap
index 98648adbea..e82a13017a 100644
--- a/src/text-filter/__tests__/__snapshots__/styles.test.tsx.snap
+++ b/src/text-filter/__tests__/__snapshots__/styles.test.tsx.snap
@@ -2,30 +2,30 @@
 
 exports[`getTextFilterStyles handles all possible style configurations 1`] = `
 {
-  "--awsui-style-background-default-ka4djm": undefined,
-  "--awsui-style-background-disabled-ka4djm": undefined,
-  "--awsui-style-background-focus-ka4djm": undefined,
-  "--awsui-style-background-hover-ka4djm": undefined,
-  "--awsui-style-background-readonly-ka4djm": undefined,
-  "--awsui-style-border-color-default-ka4djm": undefined,
-  "--awsui-style-border-color-disabled-ka4djm": undefined,
-  "--awsui-style-border-color-focus-ka4djm": undefined,
-  "--awsui-style-border-color-hover-ka4djm": undefined,
-  "--awsui-style-border-color-readonly-ka4djm": undefined,
-  "--awsui-style-box-shadow-default-ka4djm": undefined,
-  "--awsui-style-box-shadow-disabled-ka4djm": undefined,
-  "--awsui-style-box-shadow-focus-ka4djm": undefined,
-  "--awsui-style-box-shadow-hover-ka4djm": undefined,
-  "--awsui-style-box-shadow-readonly-ka4djm": undefined,
-  "--awsui-style-color-default-ka4djm": undefined,
-  "--awsui-style-color-disabled-ka4djm": undefined,
-  "--awsui-style-color-focus-ka4djm": undefined,
-  "--awsui-style-color-hover-ka4djm": undefined,
-  "--awsui-style-color-readonly-ka4djm": undefined,
-  "--awsui-style-placeholder-color-ka4djm": undefined,
-  "--awsui-style-placeholder-font-size-ka4djm": undefined,
-  "--awsui-style-placeholder-font-style-ka4djm": undefined,
-  "--awsui-style-placeholder-font-weight-ka4djm": undefined,
+  "--awsui-style-background-default-fikhx4": undefined,
+  "--awsui-style-background-disabled-fikhx4": undefined,
+  "--awsui-style-background-focus-fikhx4": undefined,
+  "--awsui-style-background-hover-fikhx4": undefined,
+  "--awsui-style-background-readonly-fikhx4": undefined,
+  "--awsui-style-border-color-default-fikhx4": undefined,
+  "--awsui-style-border-color-disabled-fikhx4": undefined,
+  "--awsui-style-border-color-focus-fikhx4": undefined,
+  "--awsui-style-border-color-hover-fikhx4": undefined,
+  "--awsui-style-border-color-readonly-fikhx4": undefined,
+  "--awsui-style-box-shadow-default-fikhx4": undefined,
+  "--awsui-style-box-shadow-disabled-fikhx4": undefined,
+  "--awsui-style-box-shadow-focus-fikhx4": undefined,
+  "--awsui-style-box-shadow-hover-fikhx4": undefined,
+  "--awsui-style-box-shadow-readonly-fikhx4": undefined,
+  "--awsui-style-color-default-fikhx4": undefined,
+  "--awsui-style-color-disabled-fikhx4": undefined,
+  "--awsui-style-color-focus-fikhx4": undefined,
+  "--awsui-style-color-hover-fikhx4": undefined,
+  "--awsui-style-color-readonly-fikhx4": undefined,
+  "--awsui-style-placeholder-color-fikhx4": undefined,
+  "--awsui-style-placeholder-font-size-fikhx4": undefined,
+  "--awsui-style-placeholder-font-style-fikhx4": undefined,
+  "--awsui-style-placeholder-font-weight-fikhx4": undefined,
   "borderRadius": undefined,
   "borderWidth": undefined,
   "fontSize": undefined,
@@ -37,30 +37,30 @@ exports[`getTextFilterStyles handles all possible style configurations 1`] = `
 
 exports[`getTextFilterStyles handles all possible style configurations 2`] = `
 {
-  "--awsui-style-background-default-ka4djm": undefined,
-  "--awsui-style-background-disabled-ka4djm": undefined,
-  "--awsui-style-background-focus-ka4djm": undefined,
-  "--awsui-style-background-hover-ka4djm": undefined,
-  "--awsui-style-background-readonly-ka4djm": undefined,
-  "--awsui-style-border-color-default-ka4djm": undefined,
-  "--awsui-style-border-color-disabled-ka4djm": undefined,
-  "--awsui-style-border-color-focus-ka4djm": undefined,
-  "--awsui-style-border-color-hover-ka4djm": undefined,
-  "--awsui-style-border-color-readonly-ka4djm": undefined,
-  "--awsui-style-box-shadow-default-ka4djm": undefined,
-  "--awsui-style-box-shadow-disabled-ka4djm": undefined,
-  "--awsui-style-box-shadow-focus-ka4djm": undefined,
-  "--awsui-style-box-shadow-hover-ka4djm": undefined,
-  "--awsui-style-box-shadow-readonly-ka4djm": undefined,
-  "--awsui-style-color-default-ka4djm": undefined,
-  "--awsui-style-color-disabled-ka4djm": undefined,
-  "--awsui-style-color-focus-ka4djm": undefined,
-  "--awsui-style-color-hover-ka4djm": undefined,
-  "--awsui-style-color-readonly-ka4djm": undefined,
-  "--awsui-style-placeholder-color-ka4djm": undefined,
-  "--awsui-style-placeholder-font-size-ka4djm": undefined,
-  "--awsui-style-placeholder-font-style-ka4djm": undefined,
-  "--awsui-style-placeholder-font-weight-ka4djm": undefined,
+  "--awsui-style-background-default-fikhx4": undefined,
+  "--awsui-style-background-disabled-fikhx4": undefined,
+  "--awsui-style-background-focus-fikhx4": undefined,
+  "--awsui-style-background-hover-fikhx4": undefined,
+  "--awsui-style-background-readonly-fikhx4": undefined,
+  "--awsui-style-border-color-default-fikhx4": undefined,
+  "--awsui-style-border-color-disabled-fikhx4": undefined,
+  "--awsui-style-border-color-focus-fikhx4": undefined,
+  "--awsui-style-border-color-hover-fikhx4": undefined,
+  "--awsui-style-border-color-readonly-fikhx4": undefined,
+  "--awsui-style-box-shadow-default-fikhx4": undefined,
+  "--awsui-style-box-shadow-disabled-fikhx4": undefined,
+  "--awsui-style-box-shadow-focus-fikhx4": undefined,
+  "--awsui-style-box-shadow-hover-fikhx4": undefined,
+  "--awsui-style-box-shadow-readonly-fikhx4": undefined,
+  "--awsui-style-color-default-fikhx4": undefined,
+  "--awsui-style-color-disabled-fikhx4": undefined,
+  "--awsui-style-color-focus-fikhx4": undefined,
+  "--awsui-style-color-hover-fikhx4": undefined,
+  "--awsui-style-color-readonly-fikhx4": undefined,
+  "--awsui-style-placeholder-color-fikhx4": undefined,
+  "--awsui-style-placeholder-font-size-fikhx4": undefined,
+  "--awsui-style-placeholder-font-style-fikhx4": undefined,
+  "--awsui-style-placeholder-font-weight-fikhx4": undefined,
   "borderRadius": undefined,
   "borderWidth": undefined,
   "fontSize": undefined,
@@ -72,30 +72,30 @@ exports[`getTextFilterStyles handles all possible style configurations 2`] = `
 
 exports[`getTextFilterStyles handles all possible style configurations 3`] = `
 {
-  "--awsui-style-background-default-ka4djm": "#ffffff",
-  "--awsui-style-background-disabled-ka4djm": "#f0f0f0",
-  "--awsui-style-background-focus-ka4djm": "#ffffff",
-  "--awsui-style-background-hover-ka4djm": "#fafafa",
-  "--awsui-style-background-readonly-ka4djm": "#ffffff",
-  "--awsui-style-border-color-default-ka4djm": "#cccccc",
-  "--awsui-style-border-color-disabled-ka4djm": "#e0e0e0",
-  "--awsui-style-border-color-focus-ka4djm": "#0073bb",
-  "--awsui-style-border-color-hover-ka4djm": "#999999",
-  "--awsui-style-border-color-readonly-ka4djm": "#e0e0e0",
-  "--awsui-style-box-shadow-default-ka4djm": "none",
-  "--awsui-style-box-shadow-disabled-ka4djm": "none",
-  "--awsui-style-box-shadow-focus-ka4djm": "0 0 0 2px #0073bb",
-  "--awsui-style-box-shadow-hover-ka4djm": "0 1px 2px rgba(0,0,0,0.1)",
-  "--awsui-style-box-shadow-readonly-ka4djm": "none",
-  "--awsui-style-color-default-ka4djm": "#000000",
-  "--awsui-style-color-disabled-ka4djm": "#999999",
-  "--awsui-style-color-focus-ka4djm": "#000000",
-  "--awsui-style-color-hover-ka4djm": "#000000",
-  "--awsui-style-color-readonly-ka4djm": "#000000",
-  "--awsui-style-placeholder-color-ka4djm": "#999999",
-  "--awsui-style-placeholder-font-size-ka4djm": "14px",
-  "--awsui-style-placeholder-font-style-ka4djm": "italic",
-  "--awsui-style-placeholder-font-weight-ka4djm": "400",
+  "--awsui-style-background-default-fikhx4": "#ffffff",
+  "--awsui-style-background-disabled-fikhx4": "#f0f0f0",
+  "--awsui-style-background-focus-fikhx4": "#ffffff",
+  "--awsui-style-background-hover-fikhx4": "#fafafa",
+  "--awsui-style-background-readonly-fikhx4": "#ffffff",
+  "--awsui-style-border-color-default-fikhx4": "#cccccc",
+  "--awsui-style-border-color-disabled-fikhx4": "#e0e0e0",
+  "--awsui-style-border-color-focus-fikhx4": "#0073bb",
+  "--awsui-style-border-color-hover-fikhx4": "#999999",
+  "--awsui-style-border-color-readonly-fikhx4": "#e0e0e0",
+  "--awsui-style-box-shadow-default-fikhx4": "none",
+  "--awsui-style-box-shadow-disabled-fikhx4": "none",
+  "--awsui-style-box-shadow-focus-fikhx4": "0 0 0 2px #0073bb",
+  "--awsui-style-box-shadow-hover-fikhx4": "0 1px 2px rgba(0,0,0,0.1)",
+  "--awsui-style-box-shadow-readonly-fikhx4": "none",
+  "--awsui-style-color-default-fikhx4": "#000000",
+  "--awsui-style-color-disabled-fikhx4": "#999999",
+  "--awsui-style-color-focus-fikhx4": "#000000",
+  "--awsui-style-color-hover-fikhx4": "#000000",
+  "--awsui-style-color-readonly-fikhx4": "#000000",
+  "--awsui-style-placeholder-color-fikhx4": "#999999",
+  "--awsui-style-placeholder-font-size-fikhx4": "14px",
+  "--awsui-style-placeholder-font-style-fikhx4": "italic",
+  "--awsui-style-placeholder-font-weight-fikhx4": "400",
   "borderRadius": "4px",
   "borderWidth": "1px",
   "fontSize": "14px",
diff --git a/src/token/__tests__/__snapshots__/styles.test.tsx.snap b/src/token/__tests__/__snapshots__/styles.test.tsx.snap
index dc0879616c..9bda5448f1 100644
--- a/src/token/__tests__/__snapshots__/styles.test.tsx.snap
+++ b/src/token/__tests__/__snapshots__/styles.test.tsx.snap
@@ -2,19 +2,19 @@
 
 exports[`getTokenRootStyles handles all possible style configurations 1`] = `
 {
-  "--awsui-style-focus-ring-border-color-ka4djm": "#6366f1",
-  "--awsui-style-focus-ring-border-radius-ka4djm": "12px",
-  "--awsui-style-focus-ring-border-width-ka4djm": "2px",
-  "--awsui-token-style-background-default-ka4djm": "#eef2ff",
-  "--awsui-token-style-background-disabled-ka4djm": "#f1f5f9",
-  "--awsui-token-style-background-read-only-ka4djm": "#f8fafc",
-  "--awsui-token-style-border-color-default-ka4djm": "#c7d2fe",
-  "--awsui-token-style-border-color-disabled-ka4djm": "#e2e8f0",
-  "--awsui-token-style-border-color-read-only-ka4djm": "#cbd5e1",
-  "--awsui-token-style-dismiss-color-default-ka4djm": "#6366f1",
-  "--awsui-token-style-dismiss-color-disabled-ka4djm": "#cbd5e1",
-  "--awsui-token-style-dismiss-color-hover-ka4djm": "#4338ca",
-  "--awsui-token-style-dismiss-color-read-only-ka4djm": "#94a3b8",
+  "--awsui-style-focus-ring-border-color-fikhx4": "#6366f1",
+  "--awsui-style-focus-ring-border-radius-fikhx4": "12px",
+  "--awsui-style-focus-ring-border-width-fikhx4": "2px",
+  "--awsui-token-style-background-default-fikhx4": "#eef2ff",
+  "--awsui-token-style-background-disabled-fikhx4": "#f1f5f9",
+  "--awsui-token-style-background-read-only-fikhx4": "#f8fafc",
+  "--awsui-token-style-border-color-default-fikhx4": "#c7d2fe",
+  "--awsui-token-style-border-color-disabled-fikhx4": "#e2e8f0",
+  "--awsui-token-style-border-color-read-only-fikhx4": "#cbd5e1",
+  "--awsui-token-style-dismiss-color-default-fikhx4": "#6366f1",
+  "--awsui-token-style-dismiss-color-disabled-fikhx4": "#cbd5e1",
+  "--awsui-token-style-dismiss-color-hover-fikhx4": "#4338ca",
+  "--awsui-token-style-dismiss-color-read-only-fikhx4": "#94a3b8",
   "borderRadius": "24px",
   "borderWidth": "2px",
   "paddingBlock": "4px",