From aeafec34ad41f8f5bc881f3f664e7df37afd0b38 Mon Sep 17 00:00:00 2001
From: Amanuel Sisay <amanabiy@amazon.de>
Date: Mon, 16 Feb 2026 23:01:03 +0100
Subject: [PATCH 1/5] feat: add x-large and xx-large sizes to modal

---
 .../__snapshots__/documenter.test.ts.snap     |  6 ++++--
 src/modal/__tests__/modal.test.tsx            |  2 +-
 src/modal/interfaces.ts                       |  6 +++---
 src/modal/styles.scss                         | 19 ++++++++++++++-----
 4 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
index 01fbd65f7e..db61226c82 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
@@ -17542,8 +17542,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",
@@ -17552,6 +17552,8 @@ largest size allowed by the design guidelines. Other sizes
           "max",
           "medium",
           "large",
+          "x-large",
+          "xx-large",
         ],
       },
       "name": "size",
diff --git a/src/modal/__tests__/modal.test.tsx b/src/modal/__tests__/modal.test.tsx
index 94d43364e1..d36bb7ab3d 100644
--- a/src/modal/__tests__/modal.test.tsx
+++ b/src/modal/__tests__/modal.test.tsx
@@ -112,7 +112,7 @@ 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]);
       });
diff --git a/src/modal/interfaces.ts b/src/modal/interfaces.ts
index f13a4b90c3..de33a935b9 100644
--- a/src/modal/interfaces.ts
+++ b/src/modal/interfaces.ts
@@ -26,8 +26,8 @@ export interface BaseModalProps {
 export interface ModalProps extends BaseComponentProps, BaseModalProps {
   /**
    * 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;
   /**
@@ -81,7 +81,7 @@ 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 interface DismissDetail {
     reason: string;
diff --git a/src/modal/styles.scss b/src/modal/styles.scss
index dfaf049e6c..270bd03c5b 100644
--- a/src/modal/styles.scss
+++ b/src/modal/styles.scss
@@ -33,7 +33,6 @@ $modal-z-index: 5000;
 
 .focus-lock {
   align-self: flex-start;
-  margin-block: auto;
   margin-inline: auto;
   padding-block: awsui.$space-s;
   padding-inline: 0;
@@ -66,11 +65,21 @@ $modal-z-index: 5000;
     max-inline-size: 820px;
   }
 
-  &.max.breakpoint-xs {
+  &.x-large {
+    max-inline-size: 1024px;
+  }
+
+  &.xx-large {
+    max-inline-size: 1280px;
+  }
+
+  &.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;
+    inline-size: calc(100vw - (2 * 4 * #{styles.$base-size} + #{awsui.$space-xxxl}));
+    &.max {
+      margin-block: auto;
+      margin-inline: auto;
+    }
   }
 }
 

From 78805119233bf21a7b7ccb51c95b45bf3ea9d3aa Mon Sep 17 00:00:00 2001
From: Amanuel Sisay <amanabiy@amazon.de>
Date: Mon, 16 Feb 2026 23:21:02 +0100
Subject: [PATCH 2/5] feat: Add position prop to modal

---
 .../__snapshots__/documenter.test.ts.snap     | 22 +++++++++++++++++++
 src/modal/__tests__/modal.test.tsx            |  9 ++++++++
 src/modal/index.tsx                           | 14 ++++++++++--
 src/modal/interfaces.ts                       | 12 ++++++++++
 src/modal/internal.tsx                        |  8 ++++++-
 src/modal/styles.scss                         |  8 +++++++
 6 files changed, 70 insertions(+), 3 deletions(-)

diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
index db61226c82..b24be0c032 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
@@ -17520,6 +17520,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
diff --git a/src/modal/__tests__/modal.test.tsx b/src/modal/__tests__/modal.test.tsx
index d36bb7ab3d..a185397d0c 100644
--- a/src/modal/__tests__/modal.test.tsx
+++ b/src/modal/__tests__/modal.test.tsx
@@ -119,6 +119,15 @@ describe('Modal component', () => {
     });
   });
 
+  describe('position property', () => {
+    it('displays correct position', () => {
+      (['center', 'top'] as ModalProps.Position[]).forEach(position => {
+        const wrapper = renderModal({ position });
+        expect(wrapper.findFocusLock().getElement()).toHaveClass(styles[`position-${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..4195ce68c8 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', ...props }: ModalProps) {
   const { isInFunnel } = useFunnel();
   const analyticsMetadata = getAnalyticsMetadataProps(props as BasePropsWithAnalyticsMetadata);
   const baseComponentProps = useBaseComponent(
@@ -78,6 +78,7 @@ export default function Modal({ size = 'medium', ...props }: ModalProps) {
     {
       props: {
         size,
+        position,
         disableContentPaddings: props.disableContentPaddings,
         flowType: analyticsMetadata.flowType,
       },
@@ -95,12 +96,21 @@ export default function Modal({ size = 'medium', ...props }: ModalProps) {
         analyticsMetadata={analyticsMetadata}
         baseComponentProps={baseComponentProps}
         size={size}
+        position={position}
         {...props}
       />
     );
   }
 
-  return <InternalModal size={size} {...props} {...baseComponentProps} __injectAnalyticsComponentMetadata={true} />;
+  return (
+    <InternalModal
+      size={size}
+      position={position}
+      {...props}
+      {...baseComponentProps}
+      __injectAnalyticsComponentMetadata={true}
+    />
+  );
 }
 
 applyDisplayName(Modal, 'Modal');
diff --git a/src/modal/interfaces.ts b/src/modal/interfaces.ts
index de33a935b9..99ff019aaf 100644
--- a/src/modal/interfaces.ts
+++ b/src/modal/interfaces.ts
@@ -30,6 +30,17 @@ export interface ModalProps extends BaseComponentProps, BaseModalProps {
    * `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.
@@ -82,6 +93,7 @@ export interface ModalProps extends BaseComponentProps, BaseModalProps {
 
 export namespace ModalProps {
   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..c04be72dba 100644
--- a/src/modal/internal.tsx
+++ b/src/modal/internal.tsx
@@ -94,6 +94,7 @@ function PortaledModal({
   children,
   footer,
   disableContentPaddings,
+  position = 'center',
   onButtonClick = () => {},
   onDismiss,
   __internalRootRef,
@@ -247,7 +248,12 @@ 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'], styles[`position-${position}`])}
+            >
               <div
                 className={clsx(
                   styles.dialog,
diff --git a/src/modal/styles.scss b/src/modal/styles.scss
index 270bd03c5b..74ca49d3bf 100644
--- a/src/modal/styles.scss
+++ b/src/modal/styles.scss
@@ -38,6 +38,14 @@ $modal-z-index: 5000;
   padding-inline: 0;
   z-index: $modal-z-index;
   pointer-events: none;
+
+  &.position-top {
+    margin-block-start: 0;
+  }
+
+  &.position-center {
+    margin-block: auto;
+  }
 }
 
 .dialog {

From 9ddfa7b131ea95d450697c8cec0cd42032717de3 Mon Sep 17 00:00:00 2001
From: Amanuel Sisay <amanabiy@amazon.de>
Date: Mon, 16 Feb 2026 23:33:08 +0100
Subject: [PATCH 3/5] feat: Add custom width and height

---
 build-tools/utils/custom-css-properties.js    |   3 +
 .../__snapshots__/documenter.test.ts.snap     |  14 ++
 .../__snapshots__/styles.test.tsx.snap        | 144 +++++++++---------
 src/modal/index.tsx                           |   8 +-
 src/modal/interfaces.ts                       |  12 ++
 src/modal/internal.tsx                        |  29 +++-
 src/modal/styles.scss                         |  26 +++-
 .../__snapshots__/styles.test.tsx.snap        |  66 ++++----
 .../__snapshots__/styles.test.tsx.snap        |  42 ++---
 .../__snapshots__/styles.test.tsx.snap        |  40 ++---
 .../__snapshots__/styles.test.tsx.snap        | 144 +++++++++---------
 11 files changed, 304 insertions(+), 224 deletions(-)

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/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
index b24be0c032..dfff460c96 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
@@ -17503,6 +17503,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
@@ -17589,6 +17596,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/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/modal/index.tsx b/src/modal/index.tsx
index 4195ce68c8..59bdf18530 100644
--- a/src/modal/index.tsx
+++ b/src/modal/index.tsx
@@ -70,7 +70,7 @@ function ModalWithAnalyticsFunnel({
   );
 }
 
-export default function Modal({ size = 'medium', position = 'center', ...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(
@@ -81,6 +81,8 @@ export default function Modal({ size = 'medium', position = 'center', ...props }
         position,
         disableContentPaddings: props.disableContentPaddings,
         flowType: analyticsMetadata.flowType,
+        width,
+        height,
       },
       metadata: {
         hasResourceType: Boolean(analyticsMetadata?.resourceType),
@@ -97,6 +99,8 @@ export default function Modal({ size = 'medium', position = 'center', ...props }
         baseComponentProps={baseComponentProps}
         size={size}
         position={position}
+        width={width}
+        height={height}
         {...props}
       />
     );
@@ -106,6 +110,8 @@ export default function Modal({ size = 'medium', position = 'center', ...props }
     <InternalModal
       size={size}
       position={position}
+      width={width}
+      height={height}
       {...props}
       {...baseComponentProps}
       __injectAnalyticsComponentMetadata={true}
diff --git a/src/modal/interfaces.ts b/src/modal/interfaces.ts
index 99ff019aaf..b2e8b650c3 100644
--- a/src/modal/interfaces.ts
+++ b/src/modal/interfaces.ts
@@ -24,6 +24,18 @@ 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:
diff --git a/src/modal/internal.tsx b/src/modal/internal.tsx
index c04be72dba..55e7813097 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) {
@@ -97,6 +100,8 @@ function PortaledModal({
   position = 'center',
   onButtonClick = () => {},
   onDismiss,
+  width,
+  height,
   __internalRootRef,
   __injectAnalyticsComponentMetadata,
   __funnelProps,
@@ -220,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>
@@ -257,14 +271,17 @@ function PortaledModal({
               <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.container, hasCustomHeight && styles['custom-height-container'])}>
                   <div className={clsx(styles.header, analyticsSelectors.header)}>
                     <InternalHeader
                       variant="h2"
@@ -297,7 +314,11 @@ 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} />
diff --git a/src/modal/styles.scss b/src/modal/styles.scss
index 74ca49d3bf..4de6af659e 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;
 
@@ -60,13 +61,14 @@ $modal-z-index: 5000;
 
   z-index: $modal-z-index;
   pointer-events: all;
+  $modal-size-medium: 600px;
 
   &.small {
     max-inline-size: 320px;
   }
 
   &.medium {
-    max-inline-size: 600px;
+    max-inline-size: $modal-size-medium;
   }
 
   &.large {
@@ -81,6 +83,10 @@ $modal-z-index: 5000;
     max-inline-size: 1280px;
   }
 
+  &.custom-width {
+    max-inline-size: var(#{custom-props.$modalCustomWidth, $modal-size-medium});
+  }
+
   &.breakpoint-xs {
     // viewport - (closed app layout panel widths + 20px on each side)
     inline-size: calc(100vw - (2 * 4 * #{styles.$base-size} + #{awsui.$space-xxxl}));
@@ -89,6 +95,12 @@ $modal-z-index: 5000;
       margin-inline: auto;
     }
   }
+
+  &.custom-height {
+    $modal-max-height: calc(100vh - 2 * #{awsui.$space-s});
+    block-size: var(#{custom-props.$modalCustomHeight}, $modal-max-height);
+    max-block-size: $modal-max-height;
+  }
 }
 
 .container {
@@ -102,6 +114,12 @@ $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;
+
+  &.custom-height-container {
+    display: flex;
+    flex-direction: column;
+    block-size: 100%;
+  }
 }
 
 .content {
@@ -113,6 +131,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 {
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",

From b46f7807e9b734bc5c70def6ef5e0a27aa9a8bd6 Mon Sep 17 00:00:00 2001
From: Amanuel Sisay <amanabiy@amazon.de>
Date: Mon, 16 Feb 2026 23:33:35 +0100
Subject: [PATCH 4/5] feat: Add playground

---
 pages/modal/playground.page.tsx | 149 ++++++++++++++++++++++++++++++++
 1 file changed, 149 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..a35a5d57de
--- /dev/null
+++ b/pages/modal/playground.page.tsx
@@ -0,0 +1,149 @@
+// 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' | 'x-large' | 'xx-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: 'x-large', label: 'X-Large' },
+                { value: 'xx-large', label: 'XX-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 14fe57eab112fd178ebb9de10cf9e54600a5f926 Mon Sep 17 00:00:00 2001
From: Amanuel Sisay <amanabiy@amazon.de>
Date: Mon, 16 Feb 2026 23:56:23 +0100
Subject: [PATCH 5/5] fix: apply footer stuck styles when custom height is set

---
 src/modal/internal.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/modal/internal.tsx b/src/modal/internal.tsx
index 55e7813097..39414d5c19 100644
--- a/src/modal/internal.tsx
+++ b/src/modal/internal.tsx
@@ -325,7 +325,10 @@ function PortaledModal({
                     </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 || hasCustomHeight) && styles['footer--stuck'])}
+                        >
                           {footer}
                         </div>
                       </ButtonContext.Provider>