From 7277e14ebf42ec4bc1df79ad8fd35246bb0fbc8d Mon Sep 17 00:00:00 2001
From: Amanuel Sisay <amanabiy@amazon.de>
Date: Fri, 13 Feb 2026 15:40:03 +0100
Subject: [PATCH 1/4] feat: add position prop, and size props

---
 build-tools/utils/custom-css-properties.js    |   3 +
 pages/modal/custom-dimensions.page.tsx        | 140 ++++++++++++++++++
 .../__snapshots__/documenter.test.ts.snap     |  42 +++++-
 src/modal/__tests__/modal.test.tsx            |  11 +-
 src/modal/index.tsx                           |  20 ++-
 src/modal/interfaces.ts                       |  30 +++-
 src/modal/internal.tsx                        |  54 ++++++-
 src/modal/styles.scss                         |  79 +++++++++-
 8 files changed, 358 insertions(+), 21 deletions(-)
 create mode 100644 pages/modal/custom-dimensions.page.tsx

diff --git a/build-tools/utils/custom-css-properties.js b/build-tools/utils/custom-css-properties.js
index 5f4048efa2..a3e444557d 100644
--- a/build-tools/utils/custom-css-properties.js
+++ b/build-tools/utils/custom-css-properties.js
@@ -50,6 +50,9 @@ const customCssPropertiesList = [
   'stackedNotificationsDefaultBottomMargin',
   // Dropdown Custom Properties
   'dropdownDefaultMaxWidth',
+  // Modal Custom Properties
+  'modalCustomWidth',
+  'modalCustomHeight',
   // Spinner Custom Properties
   'spinnerRotatorFrom',
   'spinnerRotatorTo',
diff --git a/pages/modal/custom-dimensions.page.tsx b/pages/modal/custom-dimensions.page.tsx
new file mode 100644
index 0000000000..290bae0a75
--- /dev/null
+++ b/pages/modal/custom-dimensions.page.tsx
@@ -0,0 +1,140 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+
+import Button from '~components/button';
+import Modal from '~components/modal';
+import SpaceBetween from '~components/space-between';
+
+export default function ModalCustomDimensionsPage() {
+  const [visible, setVisible] = useState(false);
+  const [widthVisible, setWidthVisible] = useState(false);
+  const [heightVisible, setHeightVisible] = useState(false);
+  const [bothVisible, setBothVisible] = useState(false);
+
+  return (
+    <SpaceBetween size="m">
+      <h1>Modal Custom Dimensions Demo</h1>
+
+      <SpaceBetween direction="horizontal" size="s">
+        <Button onClick={() => setVisible(true)}>Default Modal</Button>
+        <Button onClick={() => setWidthVisible(true)}>Custom Width (700px)</Button>
+        <Button onClick={() => setHeightVisible(true)}>Custom Height (400px)</Button>
+        <Button onClick={() => setBothVisible(true)}>Custom Width & Height</Button>
+      </SpaceBetween>
+
+      <Modal
+        visible={visible}
+        onDismiss={() => setVisible(false)}
+        header="Default Modal"
+        footer={
+          <SpaceBetween direction="horizontal" size="xs">
+            <Button variant="link" onClick={() => setVisible(false)}>
+              Cancel
+            </Button>
+            <Button variant="primary" onClick={() => setVisible(false)}>
+              Ok
+            </Button>
+          </SpaceBetween>
+        }
+      >
+        <p>This is a default modal without custom dimensions.</p>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua.
+        </p>
+      </Modal>
+
+      <Modal
+        visible={widthVisible}
+        onDismiss={() => setWidthVisible(false)}
+        header="Modal with Custom Width"
+        width={700}
+        footer={
+          <SpaceBetween direction="horizontal" size="xs">
+            <Button variant="link" onClick={() => setWidthVisible(false)}>
+              Cancel
+            </Button>
+            <Button variant="primary" onClick={() => setWidthVisible(false)}>
+              Ok
+            </Button>
+          </SpaceBetween>
+        }
+      >
+        <p>This modal has a custom width of 700px.</p>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
+        </p>
+      </Modal>
+
+      <Modal
+        visible={heightVisible}
+        onDismiss={() => setHeightVisible(false)}
+        header="Modal with Custom Height"
+        height={400}
+        footer={
+          <SpaceBetween direction="horizontal" size="xs">
+            <Button variant="link" onClick={() => setHeightVisible(false)}>
+              Cancel
+            </Button>
+            <Button variant="primary" onClick={() => setHeightVisible(false)}>
+              Ok
+            </Button>
+          </SpaceBetween>
+        }
+      >
+        <p>This modal has a custom height of 400px. Content should be scrollable if it exceeds this height.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
+        <p>Laboris nisi ut aliquip ex ea commodo consequat.</p>
+        <p>Duis aute irure dolor in reprehenderit in voluptate.</p>
+        <p>Velit esse cillum dolore eu fugiat nulla pariatur.</p>
+        <p>Excepteur sint occaecat cupidatat non proident.</p>
+        <p>Sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+        <p>More content to demonstrate scrolling...</p>
+        <p>Additional paragraph to test overflow behavior.</p>
+      </Modal>
+
+      <Modal
+        visible={bothVisible}
+        onDismiss={() => setBothVisible(false)}
+        header="Modal with Custom Width & Height"
+        width={800}
+        height={500}
+        footer={
+          <SpaceBetween direction="horizontal" size="xs">
+            <Button variant="link" onClick={() => setBothVisible(false)}>
+              Cancel
+            </Button>
+            <Button variant="primary" onClick={() => setBothVisible(false)}>
+              Ok
+            </Button>
+          </SpaceBetween>
+        }
+      >
+        <p>This modal has both custom width (800px) and height (500px).</p>
+        <p>The content area becomes scrollable when it exceeds the specified height.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
+        <p>Laboris nisi ut aliquip ex ea commodo consequat.</p>
+        <p>Duis aute irure dolor in reprehenderit in voluptate.</p>
+        <p>Velit esse cillum dolore eu fugiat nulla pariatur.</p>
+        <p>Excepteur sint occaecat cupidatat non proident.</p>
+        <p>Sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
+        <p>Laboris nisi ut aliquip ex ea commodo consequat.</p>
+        <p>Duis aute irure dolor in reprehenderit in voluptate.</p>
+        <p>Velit esse cillum dolore eu fugiat nulla pariatur.</p>
+        <p>More content to demonstrate the scrolling behavior with custom dimensions.</p>
+        <p>The footer should remain visible at the bottom of the modal.</p>
+      </Modal>
+    </SpaceBetween>
+  );
+}
diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
index be0b012e58..657515560d 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
@@ -17482,6 +17482,13 @@ The function will be called when a user clicks on the trigger button.",
       "optional": true,
       "type": "((options: { abortSignal: AbortSignal; }) => Promise<HTMLElement>)",
     },
+    {
+      "description": "Specifies the height of the modal. When provided, the modal content becomes scrollable if it exceeds the specified height.
+If the specified height exceeds available viewport space, the modal will use the maximum available space.",
+      "name": "height",
+      "optional": true,
+      "type": "number",
+    },
     {
       "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
 use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
@@ -17499,6 +17506,28 @@ render to an element under \`document.body\`.",
       "optional": true,
       "type": "HTMLElement",
     },
+    {
+      "defaultValue": "'center'",
+      "description": "Controls the vertical positioning of the modal.
+
+- \`center\` (default) - Modal is vertically centered in viewport and re-centers
+  when content height changes. Use for dialogs with static, predictable content.
+
+- \`top\` - Modal anchors at fixed distance and grows downward
+  as content expands. Use when content changes dynamically to prevent disruptive
+  vertical repositioning that causes users to lose focus.",
+      "inlineType": {
+        "name": "ModalProps.Position",
+        "type": "union",
+        "values": [
+          "center",
+          "top",
+        ],
+      },
+      "name": "position",
+      "optional": true,
+      "type": "string",
+    },
     {
       "description": "Use this property when \`getModalRoot\` is used to clean up the modal root
 element after a user closes the dialog. The function receives the return value
@@ -17521,8 +17550,8 @@ of the most recent getModalRoot call as an argument.",
     {
       "defaultValue": "'medium'",
       "description": "Sets the width of the modal. \`max\` uses variable width up to the
-largest size allowed by the design guidelines. Other sizes
-(\`small\`/\`medium\`/\`large\`) have fixed widths.",
+largest size allowed by the design guidelines. Other sizes:
+\`small\` (320px), \`medium\` (600px), \`large\` (820px), \`x-large\` (1024px), \`xx-large\` (1280px).",
       "inlineType": {
         "name": "ModalProps.Size",
         "type": "union",
@@ -17531,6 +17560,8 @@ largest size allowed by the design guidelines. Other sizes
           "max",
           "medium",
           "large",
+          "x-large",
+          "xx-large",
         ],
       },
       "name": "size",
@@ -17544,6 +17575,13 @@ Set this property to \`true\` to show them.",
       "optional": false,
       "type": "boolean",
     },
+    {
+      "description": "Specifies the width of the modal. When provided, takes precedence over the \`size\` property.
+If the specified width exceeds available viewport space, the modal will use the maximum available space.",
+      "name": "width",
+      "optional": true,
+      "type": "number",
+    },
   ],
   "regions": [
     {
diff --git a/src/modal/__tests__/modal.test.tsx b/src/modal/__tests__/modal.test.tsx
index 94d43364e1..c70fba989f 100644
--- a/src/modal/__tests__/modal.test.tsx
+++ b/src/modal/__tests__/modal.test.tsx
@@ -112,13 +112,22 @@ describe('Modal component', () => {
 
   describe('size property', () => {
     it('displays correct size', () => {
-      (['small', 'medium', 'large', 'max'] as ModalProps.Size[]).forEach(size => {
+      (['small', 'medium', 'large', 'x-large', 'xx-large', 'max'] as ModalProps.Size[]).forEach(size => {
         const wrapper = renderModal({ size });
         expect(wrapper.findDialog().getElement()).toHaveClass(styles[size]);
       });
     });
   });
 
+  describe('position property', () => {
+    it('displays correct position', () => {
+      (['center', 'top'] as ModalProps.Position[]).forEach(position => {
+        const wrapper = renderModal({ position });
+        expect(wrapper.findDialog().getElement()).toHaveClass(styles[position]);
+      });
+    });
+  });
+
   describe('dismiss on click', () => {
     it('closes the dialog when clicked on the overlay section of the container', () => {
       const onDismissSpy = jest.fn();
diff --git a/src/modal/index.tsx b/src/modal/index.tsx
index c2b6982958..59bdf18530 100644
--- a/src/modal/index.tsx
+++ b/src/modal/index.tsx
@@ -70,7 +70,7 @@ function ModalWithAnalyticsFunnel({
   );
 }
 
-export default function Modal({ size = 'medium', ...props }: ModalProps) {
+export default function Modal({ size = 'medium', position = 'center', width, height, ...props }: ModalProps) {
   const { isInFunnel } = useFunnel();
   const analyticsMetadata = getAnalyticsMetadataProps(props as BasePropsWithAnalyticsMetadata);
   const baseComponentProps = useBaseComponent(
@@ -78,8 +78,11 @@ export default function Modal({ size = 'medium', ...props }: ModalProps) {
     {
       props: {
         size,
+        position,
         disableContentPaddings: props.disableContentPaddings,
         flowType: analyticsMetadata.flowType,
+        width,
+        height,
       },
       metadata: {
         hasResourceType: Boolean(analyticsMetadata?.resourceType),
@@ -95,12 +98,25 @@ export default function Modal({ size = 'medium', ...props }: ModalProps) {
         analyticsMetadata={analyticsMetadata}
         baseComponentProps={baseComponentProps}
         size={size}
+        position={position}
+        width={width}
+        height={height}
         {...props}
       />
     );
   }
 
-  return <InternalModal size={size} {...props} {...baseComponentProps} __injectAnalyticsComponentMetadata={true} />;
+  return (
+    <InternalModal
+      size={size}
+      position={position}
+      width={width}
+      height={height}
+      {...props}
+      {...baseComponentProps}
+      __injectAnalyticsComponentMetadata={true}
+    />
+  );
 }
 
 applyDisplayName(Modal, 'Modal');
diff --git a/src/modal/interfaces.ts b/src/modal/interfaces.ts
index f13a4b90c3..b2e8b650c3 100644
--- a/src/modal/interfaces.ts
+++ b/src/modal/interfaces.ts
@@ -24,12 +24,35 @@ export interface BaseModalProps {
 }
 
 export interface ModalProps extends BaseComponentProps, BaseModalProps {
+  /**
+   * Specifies the width of the modal. When provided, takes precedence over the `size` property.
+   * If the specified width exceeds available viewport space, the modal will use the maximum available space.
+   */
+  width?: number;
+
+  /**
+   * Specifies the height of the modal. When provided, the modal content becomes scrollable if it exceeds the specified height.
+   * If the specified height exceeds available viewport space, the modal will use the maximum available space.
+   */
+  height?: number;
+
   /**
    * Sets the width of the modal. `max` uses variable width up to the
-   * largest size allowed by the design guidelines. Other sizes
-   * (`small`/`medium`/`large`) have fixed widths.
+   * largest size allowed by the design guidelines. Other sizes:
+   * `small` (320px), `medium` (600px), `large` (820px), `x-large` (1024px), `xx-large` (1280px).
    */
   size?: ModalProps.Size;
+  /**
+   * Controls the vertical positioning of the modal.
+   *
+   * - `center` (default) - Modal is vertically centered in viewport and re-centers
+   *   when content height changes. Use for dialogs with static, predictable content.
+   *
+   * - `top` - Modal anchors at fixed distance and grows downward
+   *   as content expands. Use when content changes dynamically to prevent disruptive
+   *   vertical repositioning that causes users to lose focus.
+   */
+  position?: ModalProps.Position;
   /**
    * Determines whether the modal is displayed on the screen. Modals are hidden by default.
    * Set this property to `true` to show them.
@@ -81,7 +104,8 @@ export interface ModalProps extends BaseComponentProps, BaseModalProps {
 }
 
 export namespace ModalProps {
-  export type Size = 'small' | 'medium' | 'large' | 'max';
+  export type Size = 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'max';
+  export type Position = 'center' | 'top';
 
   export interface DismissDetail {
     reason: string;
diff --git a/src/modal/internal.tsx b/src/modal/internal.tsx
index 79e9e88c31..b084a23b1a 100644
--- a/src/modal/internal.tsx
+++ b/src/modal/internal.tsx
@@ -25,6 +25,7 @@ import { ButtonContext, ButtonContextProps } from '../internal/context/button-co
 import { ModalContext } from '../internal/context/modal-context';
 import ResetContextsForModal from '../internal/context/reset-contexts-for-modal';
 import { fireNonCancelableEvent } from '../internal/events';
+import customCssProps from '../internal/generated/custom-css-properties';
 import { useContainerBreakpoints } from '../internal/hooks/container-queries';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
 import { useIntersectionObserver } from '../internal/hooks/use-intersection-observer';
@@ -73,6 +74,8 @@ type InternalModalProps = SomeRequired<ModalProps, 'size'> &
     __injectAnalyticsComponentMetadata?: boolean;
     onButtonClick?: ButtonContextProps['onClick'];
     referrerId?: string;
+    width?: number;
+    height?: number;
   };
 
 export default function InternalModal({ modalRoot, getModalRoot, removeModalRoot, ...rest }: InternalModalProps) {
@@ -94,8 +97,11 @@ function PortaledModal({
   children,
   footer,
   disableContentPaddings,
+  position = 'center',
   onButtonClick = () => {},
   onDismiss,
+  width,
+  height,
   __internalRootRef,
   __injectAnalyticsComponentMetadata,
   __funnelProps,
@@ -219,6 +225,15 @@ function PortaledModal({
   const headerRef = useRef<HTMLDivElement>(null);
   const { subStepRef } = useFunnelSubStep();
 
+  // Calculate custom styles for width and height using CSS custom properties
+  const dialogCustomStyles: React.CSSProperties = {
+    ...(width !== undefined && { [customCssProps.modalCustomWidth]: `${width}px` }),
+    ...(height !== undefined && { [customCssProps.modalCustomHeight]: `${height}px` }),
+  };
+
+  const hasCustomWidth = width !== undefined && width !== 0;
+  const hasCustomHeight = height !== undefined && height !== 0;
+
   return (
     <FunnelNameSelectorContext.Provider value={`.${styles['header--text']}`}>
       <ResetContextsForModal>
@@ -247,19 +262,33 @@ function PortaledModal({
             style={footerHeight ? { scrollPaddingBottom: footerHeight } : undefined}
             data-awsui-referrer-id={subStepRef.current?.id || referrerId}
           >
-            <FocusLock disabled={!visible} autoFocus={true} restoreFocus={true} className={styles['focus-lock']}>
+            <FocusLock
+              disabled={!visible}
+              autoFocus={true}
+              restoreFocus={true}
+              className={clsx(styles['focus-lock'], position === 'top' && styles['position-top'])}
+            >
               <div
                 className={clsx(
                   styles.dialog,
-                  styles[size],
+                  !hasCustomWidth && styles[size],
                   styles[`breakpoint-${breakpoint}`],
-                  isRefresh && styles.refresh
+                  isRefresh && styles.refresh,
+                  hasCustomWidth && styles['custom-width'],
+                  hasCustomHeight && styles['custom-height']
                 )}
+                style={dialogCustomStyles}
                 onKeyDown={escKeyHandler}
                 {...metadataAttribute}
               >
-                <div className={styles.container}>
-                  <div className={clsx(styles.header, analyticsSelectors.header)}>
+                <div className={clsx(styles.container, hasCustomHeight && styles['custom-height-container'])}>
+                  <div
+                    className={clsx(
+                      styles.header,
+                      analyticsSelectors.header,
+                      hasCustomHeight && styles['custom-height-header']
+                    )}
+                  >
                     <InternalHeader
                       variant="h2"
                       __disableActionsWrapping={true}
@@ -291,14 +320,25 @@ function PortaledModal({
                     <div
                       ref={__subStepRef}
                       {...__subStepFunnelProps}
-                      className={clsx(styles.content, { [styles['no-paddings']]: disableContentPaddings })}
+                      className={clsx(
+                        styles.content,
+                        { [styles['no-paddings']]: disableContentPaddings },
+                        hasCustomHeight && styles['custom-height-content']
+                      )}
                     >
                       {children}
                       <div ref={stickySentinelRef} />
                     </div>
                     {footer && (
                       <ButtonContext.Provider value={{ onClick: onButtonClick }}>
-                        <div ref={footerRef} className={clsx(styles.footer, footerStuck && styles['footer--stuck'])}>
+                        <div
+                          ref={footerRef}
+                          className={clsx(
+                            styles.footer,
+                            footerStuck && styles['footer--stuck'],
+                            hasCustomHeight && styles['custom-height-footer']
+                          )}
+                        >
                           {footer}
                         </div>
                       </ButtonContext.Provider>
diff --git a/src/modal/styles.scss b/src/modal/styles.scss
index dfaf049e6c..bfe6142bd8 100644
--- a/src/modal/styles.scss
+++ b/src/modal/styles.scss
@@ -7,6 +7,7 @@
 @use '../internal/styles/tokens' as awsui;
 @use '../container/shared' as container;
 @use './motion';
+@use '../internal/generated/custom-css-properties/index.scss' as custom-props;
 
 $modal-z-index: 5000;
 
@@ -39,6 +40,10 @@ $modal-z-index: 5000;
   padding-inline: 0;
   z-index: $modal-z-index;
   pointer-events: none;
+
+  &.position-top {
+    margin-block-start: awsui.$space-s;
+  }
 }
 
 .dialog {
@@ -54,6 +59,11 @@ $modal-z-index: 5000;
   z-index: $modal-z-index;
   pointer-events: all;
 
+  $max-modal-size: calc(100vw - (2 * 4 * #{styles.$base-size} + #{awsui.$space-xxxl}));
+  $modal-size-large: 820px;
+  $modal-size-x-large: 1024px;
+  $modal-size-xx-large: 1280px;
+
   &.small {
     max-inline-size: 320px;
   }
@@ -63,14 +73,48 @@ $modal-z-index: 5000;
   }
 
   &.large {
-    max-inline-size: 820px;
+    max-inline-size: $modal-size-large;
+  }
+
+  &.x-large {
+    max-inline-size: $modal-size-x-large;
   }
 
-  &.max.breakpoint-xs {
-    // viewport - (closed app layout panel widths + 20px on each side)
-    max-inline-size: calc(100vw - (2 * 4 * #{styles.$base-size} + #{awsui.$space-xxxl}));
-    margin-block: auto;
-    margin-inline: auto;
+  &.custom-width {
+    max-inline-size: var(#{custom-props.$modalCustomWidth});
+  }
+
+  &.xx-large {
+    max-inline-size: $modal-size-xx-large;
+  }
+
+  &.breakpoint-xs {
+    // viewport - (previous closed app layout panel widths + 20px on each side)
+    inline-size: calc(100vw - (2 * 4 * #{styles.$base-size} + #{awsui.$space-xxxl}));
+    &.large {
+      max-inline-size: $modal-size-large;
+    }
+
+    &.x-large {
+      max-inline-size: $modal-size-x-large;
+    }
+
+    &.xx-large {
+      max-inline-size: $modal-size-xx-large;
+    }
+
+    &.max {
+      margin-block: auto;
+      margin-inline: auto;
+    }
+
+    &.custom-width {
+      max-inline-size: var(#{custom-props.$modalCustomWidth});
+    }
+  }
+
+  &.custom-height {
+    block-size: min(var(#{custom-props.$modalCustomHeight}), calc(100vh - 2 * #{awsui.$space-s}));
   }
 }
 
@@ -85,6 +129,14 @@ $modal-z-index: 5000;
   border-end-start-radius: awsui.$border-radius-container;
   border-end-end-radius: awsui.$border-radius-container;
   box-shadow: awsui.$shadow-modal;
+
+  // When custom height is set, enable flex layout for scrollable content
+  &.custom-height-container {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    block-size: 100%;
+  }
 }
 
 .content {
@@ -96,6 +148,12 @@ $modal-z-index: 5000;
     padding-block: 0;
     padding-inline: 0;
   }
+
+  // When custom height is set, make content scrollable
+  &.custom-height-content {
+    flex-grow: 1;
+    overflow: auto;
+  }
 }
 
 .header {
@@ -108,6 +166,11 @@ $modal-z-index: 5000;
   border-start-end-radius: awsui.$border-radius-container;
   border-end-start-radius: 0;
   border-end-end-radius: 0;
+
+  // When custom height is set, prevent header from shrinking
+  &.custom-height-header {
+    flex-shrink: 0;
+  }
 }
 
 .header--text {
@@ -132,6 +195,10 @@ $modal-z-index: 5000;
     border-end-end-radius: awsui.$border-radius-container;
   }
 
+  &.custom-height-footer {
+    flex-shrink: 0;
+  }
+
   &:after {
     content: '';
     display: table;

From 2f880594a9a7c8d67b43bb1b4b9029736fc19290 Mon Sep 17 00:00:00 2001
From: Amanuel Sisay <amanabiy@amazon.de>
Date: Fri, 13 Feb 2026 15:52:24 +0100
Subject: [PATCH 2/4] test: add playground

---
 pages/modal/playground.page.tsx | 147 ++++++++++++++++++++++++++++++++
 1 file changed, 147 insertions(+)
 create mode 100644 pages/modal/playground.page.tsx

diff --git a/pages/modal/playground.page.tsx b/pages/modal/playground.page.tsx
new file mode 100644
index 0000000000..b3253725ae
--- /dev/null
+++ b/pages/modal/playground.page.tsx
@@ -0,0 +1,147 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+
+import Box from '~components/box';
+import Button from '~components/button';
+import Checkbox from '~components/checkbox';
+import FormField from '~components/form-field';
+import Input from '~components/input';
+import Modal from '~components/modal';
+import Select from '~components/select';
+import SpaceBetween from '~components/space-between';
+
+export default function ModalPlayground() {
+  const [visible, setVisible] = useState(false);
+  const [size, setSize] = useState<'small' | 'medium' | 'large' | 'max'>('medium');
+  const [position, setPosition] = useState<'center' | 'top'>('center');
+  const [width, setWidth] = useState('');
+  const [height, setHeight] = useState('');
+  const [disableContentPaddings, setDisableContentPaddings] = useState(false);
+  const [contentLines, setContentLines] = useState(10);
+  const [hasFooter, setHasFooter] = useState(true);
+  const [headerText, setHeaderText] = useState('Modal Playground');
+  const [closeAriaLabel, setCloseAriaLabel] = useState('');
+
+  return (
+    <Box padding="l">
+      <SpaceBetween size="l">
+        <h1>Modal Playground</h1>
+
+        <SpaceBetween size="m">
+          <FormField label="Size">
+            <Select
+              selectedOption={{ value: size }}
+              onChange={({ detail }) => setSize(detail.selectedOption.value as any)}
+              options={[
+                { value: 'small', label: 'Small' },
+                { value: 'medium', label: 'Medium' },
+                { value: 'large', label: 'Large' },
+                { value: 'max', label: 'Max' },
+              ]}
+            />
+          </FormField>
+
+          <FormField label="Position">
+            <Select
+              selectedOption={{ value: position }}
+              onChange={({ detail }) => setPosition(detail.selectedOption.value as any)}
+              options={[
+                { value: 'center', label: 'Center' },
+                { value: 'top', label: 'Top' },
+              ]}
+            />
+          </FormField>
+
+          <FormField label="Header Text">
+            <Input value={headerText} onChange={({ detail }) => setHeaderText(detail.value)} />
+          </FormField>
+
+          <FormField label="Close Aria Label">
+            <Input
+              value={closeAriaLabel}
+              onChange={({ detail }) => setCloseAriaLabel(detail.value)}
+              placeholder="Default: Close modal"
+            />
+          </FormField>
+
+          <FormField label="Custom Width (px)">
+            <Input
+              value={width}
+              onChange={({ detail }) => setWidth(detail.value)}
+              placeholder="Leave empty for default"
+              type="number"
+            />
+          </FormField>
+
+          <FormField label="Custom Height (px)">
+            <Input
+              value={height}
+              onChange={({ detail }) => setHeight(detail.value)}
+              placeholder="Leave empty for default"
+              type="number"
+            />
+          </FormField>
+
+          <FormField label="Content Lines">
+            <Input
+              value={String(contentLines)}
+              onChange={({ detail }) => setContentLines(Number(detail.value) || 10)}
+              type="number"
+            />
+          </FormField>
+
+          <Checkbox
+            checked={disableContentPaddings}
+            onChange={({ detail }) => setDisableContentPaddings(detail.checked)}
+          >
+            Disable content paddings
+          </Checkbox>
+
+          <Checkbox checked={hasFooter} onChange={({ detail }) => setHasFooter(detail.checked)}>
+            Show footer
+          </Checkbox>
+
+          <Button variant="primary" onClick={() => setVisible(true)}>
+            Open Modal
+          </Button>
+        </SpaceBetween>
+
+        <Modal
+          visible={visible}
+          onDismiss={() => setVisible(false)}
+          size={size}
+          position={position}
+          width={width ? Number(width) : undefined}
+          height={height ? Number(height) : undefined}
+          disableContentPaddings={disableContentPaddings}
+          closeAriaLabel={closeAriaLabel || undefined}
+          header={headerText}
+          footer={
+            hasFooter ? (
+              <Box float="right">
+                <SpaceBetween direction="horizontal" size="xs">
+                  <Button variant="link" onClick={() => setVisible(false)}>
+                    Cancel
+                  </Button>
+                  <Button variant="primary" onClick={() => setVisible(false)}>
+                    Confirm
+                  </Button>
+                </SpaceBetween>
+              </Box>
+            ) : undefined
+          }
+        >
+          <SpaceBetween size="m">
+            {Array.from({ length: contentLines }, (_, i) => (
+              <Box key={i}>
+                Line {i + 1}: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt
+                ut labore et dolore magna aliqua.
+              </Box>
+            ))}
+          </SpaceBetween>
+        </Modal>
+      </SpaceBetween>
+    </Box>
+  );
+}

From df54cade2607fef7596e0a7c7a086b82471286d9 Mon Sep 17 00:00:00 2001
From: Amanuel Sisay <amanabiy@amazon.de>
Date: Fri, 13 Feb 2026 16:39:58 +0100
Subject: [PATCH 3/4] fix: fix only since it is applied when it is top

---
 src/modal/__tests__/modal.test.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modal/__tests__/modal.test.tsx b/src/modal/__tests__/modal.test.tsx
index c70fba989f..a066f9077b 100644
--- a/src/modal/__tests__/modal.test.tsx
+++ b/src/modal/__tests__/modal.test.tsx
@@ -121,9 +121,9 @@ describe('Modal component', () => {
 
   describe('position property', () => {
     it('displays correct position', () => {
-      (['center', 'top'] as ModalProps.Position[]).forEach(position => {
+      (['top'] as ModalProps.Position[]).forEach(position => {
         const wrapper = renderModal({ position });
-        expect(wrapper.findDialog().getElement()).toHaveClass(styles[position]);
+        expect(wrapper.findFocusLock().getElement()).toHaveClass(styles['position-top']);
       });
     });
   });

From 694e38d88a3ffaae5ed06475399f8da5223b6889 Mon Sep 17 00:00:00 2001
From: Amanuel Sisay <amanabiy@amazon.de>
Date: Fri, 13 Feb 2026 17:00:22 +0100
Subject: [PATCH 4/4] fix: update snapshots

---
 .../__snapshots__/styles.test.tsx.snap        | 144 +++++++++---------
 .../__snapshots__/styles.test.tsx.snap        |  66 ++++----
 .../__snapshots__/styles.test.tsx.snap        |  42 ++---
 .../__snapshots__/styles.test.tsx.snap        |  40 ++---
 .../__snapshots__/styles.test.tsx.snap        | 144 +++++++++---------
 5 files changed, 218 insertions(+), 218 deletions(-)

diff --git a/src/input/__tests__/__snapshots__/styles.test.tsx.snap b/src/input/__tests__/__snapshots__/styles.test.tsx.snap
index 5137108c04..6463ab4237 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-4hh3rt": undefined,
-  "--awsui-style-background-disabled-4hh3rt": undefined,
-  "--awsui-style-background-focus-4hh3rt": undefined,
-  "--awsui-style-background-hover-4hh3rt": undefined,
-  "--awsui-style-background-readonly-4hh3rt": undefined,
-  "--awsui-style-border-color-default-4hh3rt": undefined,
-  "--awsui-style-border-color-disabled-4hh3rt": undefined,
-  "--awsui-style-border-color-focus-4hh3rt": undefined,
-  "--awsui-style-border-color-hover-4hh3rt": undefined,
-  "--awsui-style-border-color-readonly-4hh3rt": undefined,
-  "--awsui-style-box-shadow-default-4hh3rt": undefined,
-  "--awsui-style-box-shadow-disabled-4hh3rt": undefined,
-  "--awsui-style-box-shadow-focus-4hh3rt": undefined,
-  "--awsui-style-box-shadow-hover-4hh3rt": undefined,
-  "--awsui-style-box-shadow-readonly-4hh3rt": undefined,
-  "--awsui-style-color-default-4hh3rt": undefined,
-  "--awsui-style-color-disabled-4hh3rt": undefined,
-  "--awsui-style-color-focus-4hh3rt": undefined,
-  "--awsui-style-color-hover-4hh3rt": undefined,
-  "--awsui-style-color-readonly-4hh3rt": undefined,
-  "--awsui-style-placeholder-color-4hh3rt": undefined,
-  "--awsui-style-placeholder-font-size-4hh3rt": undefined,
-  "--awsui-style-placeholder-font-style-4hh3rt": undefined,
-  "--awsui-style-placeholder-font-weight-4hh3rt": undefined,
+  "--awsui-style-background-default-udgrlr": undefined,
+  "--awsui-style-background-disabled-udgrlr": undefined,
+  "--awsui-style-background-focus-udgrlr": undefined,
+  "--awsui-style-background-hover-udgrlr": undefined,
+  "--awsui-style-background-readonly-udgrlr": undefined,
+  "--awsui-style-border-color-default-udgrlr": undefined,
+  "--awsui-style-border-color-disabled-udgrlr": undefined,
+  "--awsui-style-border-color-focus-udgrlr": undefined,
+  "--awsui-style-border-color-hover-udgrlr": undefined,
+  "--awsui-style-border-color-readonly-udgrlr": undefined,
+  "--awsui-style-box-shadow-default-udgrlr": undefined,
+  "--awsui-style-box-shadow-disabled-udgrlr": undefined,
+  "--awsui-style-box-shadow-focus-udgrlr": undefined,
+  "--awsui-style-box-shadow-hover-udgrlr": undefined,
+  "--awsui-style-box-shadow-readonly-udgrlr": undefined,
+  "--awsui-style-color-default-udgrlr": undefined,
+  "--awsui-style-color-disabled-udgrlr": undefined,
+  "--awsui-style-color-focus-udgrlr": undefined,
+  "--awsui-style-color-hover-udgrlr": undefined,
+  "--awsui-style-color-readonly-udgrlr": undefined,
+  "--awsui-style-placeholder-color-udgrlr": undefined,
+  "--awsui-style-placeholder-font-size-udgrlr": undefined,
+  "--awsui-style-placeholder-font-style-udgrlr": undefined,
+  "--awsui-style-placeholder-font-weight-udgrlr": 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-4hh3rt": undefined,
-  "--awsui-style-background-disabled-4hh3rt": undefined,
-  "--awsui-style-background-focus-4hh3rt": undefined,
-  "--awsui-style-background-hover-4hh3rt": undefined,
-  "--awsui-style-background-readonly-4hh3rt": undefined,
-  "--awsui-style-border-color-default-4hh3rt": undefined,
-  "--awsui-style-border-color-disabled-4hh3rt": undefined,
-  "--awsui-style-border-color-focus-4hh3rt": undefined,
-  "--awsui-style-border-color-hover-4hh3rt": undefined,
-  "--awsui-style-border-color-readonly-4hh3rt": undefined,
-  "--awsui-style-box-shadow-default-4hh3rt": undefined,
-  "--awsui-style-box-shadow-disabled-4hh3rt": undefined,
-  "--awsui-style-box-shadow-focus-4hh3rt": undefined,
-  "--awsui-style-box-shadow-hover-4hh3rt": undefined,
-  "--awsui-style-box-shadow-readonly-4hh3rt": undefined,
-  "--awsui-style-color-default-4hh3rt": undefined,
-  "--awsui-style-color-disabled-4hh3rt": undefined,
-  "--awsui-style-color-focus-4hh3rt": undefined,
-  "--awsui-style-color-hover-4hh3rt": undefined,
-  "--awsui-style-color-readonly-4hh3rt": undefined,
-  "--awsui-style-placeholder-color-4hh3rt": undefined,
-  "--awsui-style-placeholder-font-size-4hh3rt": undefined,
-  "--awsui-style-placeholder-font-style-4hh3rt": undefined,
-  "--awsui-style-placeholder-font-weight-4hh3rt": undefined,
+  "--awsui-style-background-default-udgrlr": undefined,
+  "--awsui-style-background-disabled-udgrlr": undefined,
+  "--awsui-style-background-focus-udgrlr": undefined,
+  "--awsui-style-background-hover-udgrlr": undefined,
+  "--awsui-style-background-readonly-udgrlr": undefined,
+  "--awsui-style-border-color-default-udgrlr": undefined,
+  "--awsui-style-border-color-disabled-udgrlr": undefined,
+  "--awsui-style-border-color-focus-udgrlr": undefined,
+  "--awsui-style-border-color-hover-udgrlr": undefined,
+  "--awsui-style-border-color-readonly-udgrlr": undefined,
+  "--awsui-style-box-shadow-default-udgrlr": undefined,
+  "--awsui-style-box-shadow-disabled-udgrlr": undefined,
+  "--awsui-style-box-shadow-focus-udgrlr": undefined,
+  "--awsui-style-box-shadow-hover-udgrlr": undefined,
+  "--awsui-style-box-shadow-readonly-udgrlr": undefined,
+  "--awsui-style-color-default-udgrlr": undefined,
+  "--awsui-style-color-disabled-udgrlr": undefined,
+  "--awsui-style-color-focus-udgrlr": undefined,
+  "--awsui-style-color-hover-udgrlr": undefined,
+  "--awsui-style-color-readonly-udgrlr": undefined,
+  "--awsui-style-placeholder-color-udgrlr": undefined,
+  "--awsui-style-placeholder-font-size-udgrlr": undefined,
+  "--awsui-style-placeholder-font-style-udgrlr": undefined,
+  "--awsui-style-placeholder-font-weight-udgrlr": 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-4hh3rt": "#ffffff",
-  "--awsui-style-background-disabled-4hh3rt": "#f0f0f0",
-  "--awsui-style-background-focus-4hh3rt": "#ffffff",
-  "--awsui-style-background-hover-4hh3rt": "#fafafa",
-  "--awsui-style-background-readonly-4hh3rt": "#ffffff",
-  "--awsui-style-border-color-default-4hh3rt": "#cccccc",
-  "--awsui-style-border-color-disabled-4hh3rt": "#e0e0e0",
-  "--awsui-style-border-color-focus-4hh3rt": "#0073bb",
-  "--awsui-style-border-color-hover-4hh3rt": "#999999",
-  "--awsui-style-border-color-readonly-4hh3rt": "#e0e0e0",
-  "--awsui-style-box-shadow-default-4hh3rt": "none",
-  "--awsui-style-box-shadow-disabled-4hh3rt": "none",
-  "--awsui-style-box-shadow-focus-4hh3rt": "0 0 0 2px #0073bb",
-  "--awsui-style-box-shadow-hover-4hh3rt": "0 1px 2px rgba(0,0,0,0.1)",
-  "--awsui-style-box-shadow-readonly-4hh3rt": "none",
-  "--awsui-style-color-default-4hh3rt": "#000000",
-  "--awsui-style-color-disabled-4hh3rt": "#999999",
-  "--awsui-style-color-focus-4hh3rt": "#000000",
-  "--awsui-style-color-hover-4hh3rt": "#000000",
-  "--awsui-style-color-readonly-4hh3rt": "#000000",
-  "--awsui-style-placeholder-color-4hh3rt": "#999999",
-  "--awsui-style-placeholder-font-size-4hh3rt": "14px",
-  "--awsui-style-placeholder-font-style-4hh3rt": "italic",
-  "--awsui-style-placeholder-font-weight-4hh3rt": "400",
+  "--awsui-style-background-default-udgrlr": "#ffffff",
+  "--awsui-style-background-disabled-udgrlr": "#f0f0f0",
+  "--awsui-style-background-focus-udgrlr": "#ffffff",
+  "--awsui-style-background-hover-udgrlr": "#fafafa",
+  "--awsui-style-background-readonly-udgrlr": "#ffffff",
+  "--awsui-style-border-color-default-udgrlr": "#cccccc",
+  "--awsui-style-border-color-disabled-udgrlr": "#e0e0e0",
+  "--awsui-style-border-color-focus-udgrlr": "#0073bb",
+  "--awsui-style-border-color-hover-udgrlr": "#999999",
+  "--awsui-style-border-color-readonly-udgrlr": "#e0e0e0",
+  "--awsui-style-box-shadow-default-udgrlr": "none",
+  "--awsui-style-box-shadow-disabled-udgrlr": "none",
+  "--awsui-style-box-shadow-focus-udgrlr": "0 0 0 2px #0073bb",
+  "--awsui-style-box-shadow-hover-udgrlr": "0 1px 2px rgba(0,0,0,0.1)",
+  "--awsui-style-box-shadow-readonly-udgrlr": "none",
+  "--awsui-style-color-default-udgrlr": "#000000",
+  "--awsui-style-color-disabled-udgrlr": "#999999",
+  "--awsui-style-color-focus-udgrlr": "#000000",
+  "--awsui-style-color-hover-udgrlr": "#000000",
+  "--awsui-style-color-readonly-udgrlr": "#000000",
+  "--awsui-style-placeholder-color-udgrlr": "#999999",
+  "--awsui-style-placeholder-font-size-udgrlr": "14px",
+  "--awsui-style-placeholder-font-style-udgrlr": "italic",
+  "--awsui-style-placeholder-font-weight-udgrlr": "400",
   "borderRadius": "4px",
   "borderWidth": "1px",
   "fontSize": "14px",
diff --git a/src/segmented-control/__tests__/__snapshots__/styles.test.tsx.snap b/src/segmented-control/__tests__/__snapshots__/styles.test.tsx.snap
index 42d7b5a174..e268527866 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-4hh3rt": undefined,
-  "--awsui-style-background-default-4hh3rt": undefined,
-  "--awsui-style-background-disabled-4hh3rt": undefined,
-  "--awsui-style-background-hover-4hh3rt": undefined,
-  "--awsui-style-color-active-4hh3rt": undefined,
-  "--awsui-style-color-default-4hh3rt": undefined,
-  "--awsui-style-color-disabled-4hh3rt": undefined,
-  "--awsui-style-color-hover-4hh3rt": undefined,
-  "--awsui-style-focus-ring-border-color-4hh3rt": undefined,
-  "--awsui-style-focus-ring-border-radius-4hh3rt": undefined,
-  "--awsui-style-focus-ring-border-width-4hh3rt": undefined,
+  "--awsui-style-background-active-udgrlr": undefined,
+  "--awsui-style-background-default-udgrlr": undefined,
+  "--awsui-style-background-disabled-udgrlr": undefined,
+  "--awsui-style-background-hover-udgrlr": undefined,
+  "--awsui-style-color-active-udgrlr": undefined,
+  "--awsui-style-color-default-udgrlr": undefined,
+  "--awsui-style-color-disabled-udgrlr": undefined,
+  "--awsui-style-color-hover-udgrlr": undefined,
+  "--awsui-style-focus-ring-border-color-udgrlr": undefined,
+  "--awsui-style-focus-ring-border-radius-udgrlr": undefined,
+  "--awsui-style-focus-ring-border-width-udgrlr": 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-4hh3rt": undefined,
-  "--awsui-style-background-default-4hh3rt": undefined,
-  "--awsui-style-background-disabled-4hh3rt": undefined,
-  "--awsui-style-background-hover-4hh3rt": undefined,
-  "--awsui-style-color-active-4hh3rt": undefined,
-  "--awsui-style-color-default-4hh3rt": undefined,
-  "--awsui-style-color-disabled-4hh3rt": undefined,
-  "--awsui-style-color-hover-4hh3rt": undefined,
-  "--awsui-style-focus-ring-border-color-4hh3rt": undefined,
-  "--awsui-style-focus-ring-border-radius-4hh3rt": undefined,
-  "--awsui-style-focus-ring-border-width-4hh3rt": undefined,
+  "--awsui-style-background-active-udgrlr": undefined,
+  "--awsui-style-background-default-udgrlr": undefined,
+  "--awsui-style-background-disabled-udgrlr": undefined,
+  "--awsui-style-background-hover-udgrlr": undefined,
+  "--awsui-style-color-active-udgrlr": undefined,
+  "--awsui-style-color-default-udgrlr": undefined,
+  "--awsui-style-color-disabled-udgrlr": undefined,
+  "--awsui-style-color-hover-udgrlr": undefined,
+  "--awsui-style-focus-ring-border-color-udgrlr": undefined,
+  "--awsui-style-focus-ring-border-radius-udgrlr": undefined,
+  "--awsui-style-focus-ring-border-width-udgrlr": 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-4hh3rt": "#0073bb",
-  "--awsui-style-background-default-4hh3rt": "#ffffff",
-  "--awsui-style-background-disabled-4hh3rt": "#f0f0f0",
-  "--awsui-style-background-hover-4hh3rt": "#fafafa",
-  "--awsui-style-color-active-4hh3rt": "#ffffff",
-  "--awsui-style-color-default-4hh3rt": "#000000",
-  "--awsui-style-color-disabled-4hh3rt": "#999999",
-  "--awsui-style-color-hover-4hh3rt": "#000000",
-  "--awsui-style-focus-ring-border-color-4hh3rt": "#0073bb",
-  "--awsui-style-focus-ring-border-radius-4hh3rt": "8px",
-  "--awsui-style-focus-ring-border-width-4hh3rt": "2px",
+  "--awsui-style-background-active-udgrlr": "#0073bb",
+  "--awsui-style-background-default-udgrlr": "#ffffff",
+  "--awsui-style-background-disabled-udgrlr": "#f0f0f0",
+  "--awsui-style-background-hover-udgrlr": "#fafafa",
+  "--awsui-style-color-active-udgrlr": "#ffffff",
+  "--awsui-style-color-default-udgrlr": "#000000",
+  "--awsui-style-color-disabled-udgrlr": "#999999",
+  "--awsui-style-color-hover-udgrlr": "#000000",
+  "--awsui-style-focus-ring-border-color-udgrlr": "#0073bb",
+  "--awsui-style-focus-ring-border-radius-udgrlr": "8px",
+  "--awsui-style-focus-ring-border-width-udgrlr": "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 0bbae37e46..c4af0aa7ec 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-4hh3rt": undefined,
-  "--awsui-style-slider-handle-background-default-4hh3rt": undefined,
-  "--awsui-style-slider-handle-background-hover-4hh3rt": undefined,
-  "--awsui-style-slider-handle-border-radius-4hh3rt": undefined,
-  "--awsui-style-slider-range-background-active-4hh3rt": undefined,
-  "--awsui-style-slider-range-background-default-4hh3rt": undefined,
-  "--awsui-style-slider-track-background-color-4hh3rt": undefined,
+  "--awsui-style-slider-handle-background-active-udgrlr": undefined,
+  "--awsui-style-slider-handle-background-default-udgrlr": undefined,
+  "--awsui-style-slider-handle-background-hover-udgrlr": undefined,
+  "--awsui-style-slider-handle-border-radius-udgrlr": undefined,
+  "--awsui-style-slider-range-background-active-udgrlr": undefined,
+  "--awsui-style-slider-range-background-default-udgrlr": undefined,
+  "--awsui-style-slider-track-background-color-udgrlr": undefined,
 }
 `;
 
 exports[`getSliderStyles handles all possible style configurations 2`] = `
 {
-  "--awsui-style-slider-handle-background-active-4hh3rt": undefined,
-  "--awsui-style-slider-handle-background-default-4hh3rt": undefined,
-  "--awsui-style-slider-handle-background-hover-4hh3rt": undefined,
-  "--awsui-style-slider-handle-border-radius-4hh3rt": undefined,
-  "--awsui-style-slider-range-background-active-4hh3rt": undefined,
-  "--awsui-style-slider-range-background-default-4hh3rt": undefined,
-  "--awsui-style-slider-track-background-color-4hh3rt": undefined,
+  "--awsui-style-slider-handle-background-active-udgrlr": undefined,
+  "--awsui-style-slider-handle-background-default-udgrlr": undefined,
+  "--awsui-style-slider-handle-background-hover-udgrlr": undefined,
+  "--awsui-style-slider-handle-border-radius-udgrlr": undefined,
+  "--awsui-style-slider-range-background-active-udgrlr": undefined,
+  "--awsui-style-slider-range-background-default-udgrlr": undefined,
+  "--awsui-style-slider-track-background-color-udgrlr": undefined,
 }
 `;
 
 exports[`getSliderStyles handles all possible style configurations 3`] = `
 {
-  "--awsui-style-slider-handle-background-active-4hh3rt": "#1d4ed8",
-  "--awsui-style-slider-handle-background-default-4hh3rt": "#3b82f6",
-  "--awsui-style-slider-handle-background-hover-4hh3rt": "#2563eb",
-  "--awsui-style-slider-handle-border-radius-4hh3rt": "50%",
-  "--awsui-style-slider-range-background-active-4hh3rt": "#2563eb",
-  "--awsui-style-slider-range-background-default-4hh3rt": "#3b82f6",
-  "--awsui-style-slider-track-background-color-4hh3rt": "#dbeafe",
+  "--awsui-style-slider-handle-background-active-udgrlr": "#1d4ed8",
+  "--awsui-style-slider-handle-background-default-udgrlr": "#3b82f6",
+  "--awsui-style-slider-handle-background-hover-udgrlr": "#2563eb",
+  "--awsui-style-slider-handle-border-radius-udgrlr": "50%",
+  "--awsui-style-slider-range-background-active-udgrlr": "#2563eb",
+  "--awsui-style-slider-range-background-default-udgrlr": "#3b82f6",
+  "--awsui-style-slider-track-background-color-udgrlr": "#dbeafe",
 }
 `;
diff --git a/src/tabs/__tests__/__snapshots__/styles.test.tsx.snap b/src/tabs/__tests__/__snapshots__/styles.test.tsx.snap
index 1819d94ef3..972234241c 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-4hh3rt": "#bfdbfe",
-  "--awsui-style-background-default-4hh3rt": "#dbeafe",
-  "--awsui-style-background-disabled-4hh3rt": "#f3f4f6",
-  "--awsui-style-background-hover-4hh3rt": "#eff6ff",
-  "--awsui-style-border-color-active-4hh3rt": "#1d4ed8",
-  "--awsui-style-border-color-default-4hh3rt": "#3b82f6",
-  "--awsui-style-border-color-disabled-4hh3rt": "#93c5fd",
-  "--awsui-style-border-color-hover-4hh3rt": "#2563eb",
-  "--awsui-style-color-active-4hh3rt": "#1e3a8a",
-  "--awsui-style-color-default-4hh3rt": "#1e40af",
-  "--awsui-style-color-disabled-4hh3rt": "#93c5fd",
-  "--awsui-style-color-hover-4hh3rt": "#1e40af",
-  "--awsui-style-focus-ring-border-color-4hh3rt": "#3b82f6",
-  "--awsui-style-focus-ring-border-radius-4hh3rt": "4px",
-  "--awsui-style-focus-ring-border-width-4hh3rt": "2px",
+  "--awsui-style-background-active-udgrlr": "#bfdbfe",
+  "--awsui-style-background-default-udgrlr": "#dbeafe",
+  "--awsui-style-background-disabled-udgrlr": "#f3f4f6",
+  "--awsui-style-background-hover-udgrlr": "#eff6ff",
+  "--awsui-style-border-color-active-udgrlr": "#1d4ed8",
+  "--awsui-style-border-color-default-udgrlr": "#3b82f6",
+  "--awsui-style-border-color-disabled-udgrlr": "#93c5fd",
+  "--awsui-style-border-color-hover-udgrlr": "#2563eb",
+  "--awsui-style-color-active-udgrlr": "#1e3a8a",
+  "--awsui-style-color-default-udgrlr": "#1e40af",
+  "--awsui-style-color-disabled-udgrlr": "#93c5fd",
+  "--awsui-style-color-hover-udgrlr": "#1e40af",
+  "--awsui-style-focus-ring-border-color-udgrlr": "#3b82f6",
+  "--awsui-style-focus-ring-border-radius-udgrlr": "4px",
+  "--awsui-style-focus-ring-border-width-udgrlr": "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-4hh3rt": "2px",
-  "--awsui-style-tabs-active-indicator-color-4hh3rt": "#1d4ed8",
-  "--awsui-style-tabs-active-indicator-width-4hh3rt": "3px",
-  "--awsui-style-tabs-separator-color-4hh3rt": "#cbd5e1",
-  "--awsui-style-tabs-separator-width-4hh3rt": "2px",
+  "--awsui-style-tabs-active-indicator-border-radius-udgrlr": "2px",
+  "--awsui-style-tabs-active-indicator-color-udgrlr": "#1d4ed8",
+  "--awsui-style-tabs-active-indicator-width-udgrlr": "3px",
+  "--awsui-style-tabs-separator-color-udgrlr": "#cbd5e1",
+  "--awsui-style-tabs-separator-width-udgrlr": "2px",
 }
 `;
diff --git a/src/text-filter/__tests__/__snapshots__/styles.test.tsx.snap b/src/text-filter/__tests__/__snapshots__/styles.test.tsx.snap
index 1656057a7d..1239724226 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-4hh3rt": undefined,
-  "--awsui-style-background-disabled-4hh3rt": undefined,
-  "--awsui-style-background-focus-4hh3rt": undefined,
-  "--awsui-style-background-hover-4hh3rt": undefined,
-  "--awsui-style-background-readonly-4hh3rt": undefined,
-  "--awsui-style-border-color-default-4hh3rt": undefined,
-  "--awsui-style-border-color-disabled-4hh3rt": undefined,
-  "--awsui-style-border-color-focus-4hh3rt": undefined,
-  "--awsui-style-border-color-hover-4hh3rt": undefined,
-  "--awsui-style-border-color-readonly-4hh3rt": undefined,
-  "--awsui-style-box-shadow-default-4hh3rt": undefined,
-  "--awsui-style-box-shadow-disabled-4hh3rt": undefined,
-  "--awsui-style-box-shadow-focus-4hh3rt": undefined,
-  "--awsui-style-box-shadow-hover-4hh3rt": undefined,
-  "--awsui-style-box-shadow-readonly-4hh3rt": undefined,
-  "--awsui-style-color-default-4hh3rt": undefined,
-  "--awsui-style-color-disabled-4hh3rt": undefined,
-  "--awsui-style-color-focus-4hh3rt": undefined,
-  "--awsui-style-color-hover-4hh3rt": undefined,
-  "--awsui-style-color-readonly-4hh3rt": undefined,
-  "--awsui-style-placeholder-color-4hh3rt": undefined,
-  "--awsui-style-placeholder-font-size-4hh3rt": undefined,
-  "--awsui-style-placeholder-font-style-4hh3rt": undefined,
-  "--awsui-style-placeholder-font-weight-4hh3rt": undefined,
+  "--awsui-style-background-default-udgrlr": undefined,
+  "--awsui-style-background-disabled-udgrlr": undefined,
+  "--awsui-style-background-focus-udgrlr": undefined,
+  "--awsui-style-background-hover-udgrlr": undefined,
+  "--awsui-style-background-readonly-udgrlr": undefined,
+  "--awsui-style-border-color-default-udgrlr": undefined,
+  "--awsui-style-border-color-disabled-udgrlr": undefined,
+  "--awsui-style-border-color-focus-udgrlr": undefined,
+  "--awsui-style-border-color-hover-udgrlr": undefined,
+  "--awsui-style-border-color-readonly-udgrlr": undefined,
+  "--awsui-style-box-shadow-default-udgrlr": undefined,
+  "--awsui-style-box-shadow-disabled-udgrlr": undefined,
+  "--awsui-style-box-shadow-focus-udgrlr": undefined,
+  "--awsui-style-box-shadow-hover-udgrlr": undefined,
+  "--awsui-style-box-shadow-readonly-udgrlr": undefined,
+  "--awsui-style-color-default-udgrlr": undefined,
+  "--awsui-style-color-disabled-udgrlr": undefined,
+  "--awsui-style-color-focus-udgrlr": undefined,
+  "--awsui-style-color-hover-udgrlr": undefined,
+  "--awsui-style-color-readonly-udgrlr": undefined,
+  "--awsui-style-placeholder-color-udgrlr": undefined,
+  "--awsui-style-placeholder-font-size-udgrlr": undefined,
+  "--awsui-style-placeholder-font-style-udgrlr": undefined,
+  "--awsui-style-placeholder-font-weight-udgrlr": 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-4hh3rt": undefined,
-  "--awsui-style-background-disabled-4hh3rt": undefined,
-  "--awsui-style-background-focus-4hh3rt": undefined,
-  "--awsui-style-background-hover-4hh3rt": undefined,
-  "--awsui-style-background-readonly-4hh3rt": undefined,
-  "--awsui-style-border-color-default-4hh3rt": undefined,
-  "--awsui-style-border-color-disabled-4hh3rt": undefined,
-  "--awsui-style-border-color-focus-4hh3rt": undefined,
-  "--awsui-style-border-color-hover-4hh3rt": undefined,
-  "--awsui-style-border-color-readonly-4hh3rt": undefined,
-  "--awsui-style-box-shadow-default-4hh3rt": undefined,
-  "--awsui-style-box-shadow-disabled-4hh3rt": undefined,
-  "--awsui-style-box-shadow-focus-4hh3rt": undefined,
-  "--awsui-style-box-shadow-hover-4hh3rt": undefined,
-  "--awsui-style-box-shadow-readonly-4hh3rt": undefined,
-  "--awsui-style-color-default-4hh3rt": undefined,
-  "--awsui-style-color-disabled-4hh3rt": undefined,
-  "--awsui-style-color-focus-4hh3rt": undefined,
-  "--awsui-style-color-hover-4hh3rt": undefined,
-  "--awsui-style-color-readonly-4hh3rt": undefined,
-  "--awsui-style-placeholder-color-4hh3rt": undefined,
-  "--awsui-style-placeholder-font-size-4hh3rt": undefined,
-  "--awsui-style-placeholder-font-style-4hh3rt": undefined,
-  "--awsui-style-placeholder-font-weight-4hh3rt": undefined,
+  "--awsui-style-background-default-udgrlr": undefined,
+  "--awsui-style-background-disabled-udgrlr": undefined,
+  "--awsui-style-background-focus-udgrlr": undefined,
+  "--awsui-style-background-hover-udgrlr": undefined,
+  "--awsui-style-background-readonly-udgrlr": undefined,
+  "--awsui-style-border-color-default-udgrlr": undefined,
+  "--awsui-style-border-color-disabled-udgrlr": undefined,
+  "--awsui-style-border-color-focus-udgrlr": undefined,
+  "--awsui-style-border-color-hover-udgrlr": undefined,
+  "--awsui-style-border-color-readonly-udgrlr": undefined,
+  "--awsui-style-box-shadow-default-udgrlr": undefined,
+  "--awsui-style-box-shadow-disabled-udgrlr": undefined,
+  "--awsui-style-box-shadow-focus-udgrlr": undefined,
+  "--awsui-style-box-shadow-hover-udgrlr": undefined,
+  "--awsui-style-box-shadow-readonly-udgrlr": undefined,
+  "--awsui-style-color-default-udgrlr": undefined,
+  "--awsui-style-color-disabled-udgrlr": undefined,
+  "--awsui-style-color-focus-udgrlr": undefined,
+  "--awsui-style-color-hover-udgrlr": undefined,
+  "--awsui-style-color-readonly-udgrlr": undefined,
+  "--awsui-style-placeholder-color-udgrlr": undefined,
+  "--awsui-style-placeholder-font-size-udgrlr": undefined,
+  "--awsui-style-placeholder-font-style-udgrlr": undefined,
+  "--awsui-style-placeholder-font-weight-udgrlr": 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-4hh3rt": "#ffffff",
-  "--awsui-style-background-disabled-4hh3rt": "#f0f0f0",
-  "--awsui-style-background-focus-4hh3rt": "#ffffff",
-  "--awsui-style-background-hover-4hh3rt": "#fafafa",
-  "--awsui-style-background-readonly-4hh3rt": "#ffffff",
-  "--awsui-style-border-color-default-4hh3rt": "#cccccc",
-  "--awsui-style-border-color-disabled-4hh3rt": "#e0e0e0",
-  "--awsui-style-border-color-focus-4hh3rt": "#0073bb",
-  "--awsui-style-border-color-hover-4hh3rt": "#999999",
-  "--awsui-style-border-color-readonly-4hh3rt": "#e0e0e0",
-  "--awsui-style-box-shadow-default-4hh3rt": "none",
-  "--awsui-style-box-shadow-disabled-4hh3rt": "none",
-  "--awsui-style-box-shadow-focus-4hh3rt": "0 0 0 2px #0073bb",
-  "--awsui-style-box-shadow-hover-4hh3rt": "0 1px 2px rgba(0,0,0,0.1)",
-  "--awsui-style-box-shadow-readonly-4hh3rt": "none",
-  "--awsui-style-color-default-4hh3rt": "#000000",
-  "--awsui-style-color-disabled-4hh3rt": "#999999",
-  "--awsui-style-color-focus-4hh3rt": "#000000",
-  "--awsui-style-color-hover-4hh3rt": "#000000",
-  "--awsui-style-color-readonly-4hh3rt": "#000000",
-  "--awsui-style-placeholder-color-4hh3rt": "#999999",
-  "--awsui-style-placeholder-font-size-4hh3rt": "14px",
-  "--awsui-style-placeholder-font-style-4hh3rt": "italic",
-  "--awsui-style-placeholder-font-weight-4hh3rt": "400",
+  "--awsui-style-background-default-udgrlr": "#ffffff",
+  "--awsui-style-background-disabled-udgrlr": "#f0f0f0",
+  "--awsui-style-background-focus-udgrlr": "#ffffff",
+  "--awsui-style-background-hover-udgrlr": "#fafafa",
+  "--awsui-style-background-readonly-udgrlr": "#ffffff",
+  "--awsui-style-border-color-default-udgrlr": "#cccccc",
+  "--awsui-style-border-color-disabled-udgrlr": "#e0e0e0",
+  "--awsui-style-border-color-focus-udgrlr": "#0073bb",
+  "--awsui-style-border-color-hover-udgrlr": "#999999",
+  "--awsui-style-border-color-readonly-udgrlr": "#e0e0e0",
+  "--awsui-style-box-shadow-default-udgrlr": "none",
+  "--awsui-style-box-shadow-disabled-udgrlr": "none",
+  "--awsui-style-box-shadow-focus-udgrlr": "0 0 0 2px #0073bb",
+  "--awsui-style-box-shadow-hover-udgrlr": "0 1px 2px rgba(0,0,0,0.1)",
+  "--awsui-style-box-shadow-readonly-udgrlr": "none",
+  "--awsui-style-color-default-udgrlr": "#000000",
+  "--awsui-style-color-disabled-udgrlr": "#999999",
+  "--awsui-style-color-focus-udgrlr": "#000000",
+  "--awsui-style-color-hover-udgrlr": "#000000",
+  "--awsui-style-color-readonly-udgrlr": "#000000",
+  "--awsui-style-placeholder-color-udgrlr": "#999999",
+  "--awsui-style-placeholder-font-size-udgrlr": "14px",
+  "--awsui-style-placeholder-font-style-udgrlr": "italic",
+  "--awsui-style-placeholder-font-weight-udgrlr": "400",
   "borderRadius": "4px",
   "borderWidth": "1px",
   "fontSize": "14px",