@maggioli-design-system/mds-modal 5.3.0 → 5.5.0

package/readme.md

@@ -9,11 +9,12 @@ This is a web-component from Maggioli Design System [Magma](https://magma.maggio
 
 ## Properties
 
-| Property    | Attribute   | Description                                           | Type                                                                                                                              | Default    |
-| ----------- | ----------- | ----------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | ---------- |
-| `animating` | `animating` | Specifies if the component is animating itself or not | `"intro" \| "none" \| "outro" \| undefined`                                                                                       | `'none'`   |
-| `opened`    | `opened`    | Specifies if the modal is opened or not               | `boolean`                                                                                                                         | `false`    |
-| `position`  | `position`  | Specifies the animation position of the modal window  | `"bottom" \| "bottom-left" \| "bottom-right" \| "center" \| "left" \| "right" \| "top" \| "top-left" \| "top-right" \| undefined` | `'center'` |
+| Property    | Attribute   | Description                                                                             | Type                                                                                                                              | Default    |
+| ----------- | ----------- | --------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | ---------- |
+| `animating` | `animating` | Specifies if the component is animating itself or not                                   | `"intro" \| "none" \| "outro" \| undefined`                                                                                       | `'none'`   |
+| `opened`    | `opened`    | Specifies if the modal is opened or not                                                 | `boolean`                                                                                                                         | `false`    |
+| `overflow`  | `overflow`  | Specifies if the component prevents the body from scrolling when modal window is opened | `"auto" \| "manual"`                                                                                                              | `'auto'`   |
+| `position`  | `position`  | Specifies the animation position of the modal window                                    | `"bottom" \| "bottom-left" \| "bottom-right" \| "center" \| "left" \| "right" \| "top" \| "top-left" \| "top-right" \| undefined` | `'center'` |
 
 
 ## Events
@@ -43,17 +44,18 @@ This is a web-component from Maggioli Design System [Magma](https://magma.maggio
 
 ## CSS Custom Properties
 
-| Name                            | Description                                                                                                                                        |
-| ------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--mds-modal-close-icon-color`  | Set the color of the close icon button to the top left.                                                                                            |
-| `--mds-modal-overlay-color`     | Set the overlay color of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.         |
-| `--mds-modal-overlay-opacity`   | Set the overlay color opacity of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`. |
-| `--mds-modal-window-background` | Set the background color of the window                                                                                                             |
-| `--mds-modal-window-distance`   | Set the distance between the modal window and the screen bounds                                                                                    |
-| `--mds-modal-window-overflow`   | Set the overflow of the window                                                                                                                     |
-| `--mds-modal-window-radius`     | Set the border radius of the window                                                                                                                |
-| `--mds-modal-window-shadow`     | Set the box shadow of the window                                                                                                                   |
-| `--mds-modal-z-index`           | Set the z-index of the window when the component is opened                                                                                         |
+| Name                                 | Description                                                                                                                                        |
+| ------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--mds-modal-close-icon-color`       | Set the color of the close icon button to the top left.                                                                                            |
+| `--mds-modal-custom-window-distance` | Set the distance between the slotted modal window and the screen bounds                                                                            |
+| `--mds-modal-overlay-color`          | Set the overlay color of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.         |
+| `--mds-modal-overlay-opacity`        | Set the overlay color opacity of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`. |
+| `--mds-modal-window-background`      | Set the background color of the window                                                                                                             |
+| `--mds-modal-window-distance`        | Set the distance between the modal window and the screen bounds                                                                                    |
+| `--mds-modal-window-overflow`        | Set the overflow of the window                                                                                                                     |
+| `--mds-modal-window-radius`          | Set the border radius of the window                                                                                                                |
+| `--mds-modal-window-shadow`          | Set the box shadow of the window                                                                                                                   |
+| `--mds-modal-z-index`                | Set the z-index of the window when the component is opened                                                                                         |
 
 
 ## Dependencies

package/src/common/floating-controller.ts

@@ -214,21 +214,21 @@ export class FloatingController {
 }
 
 export class Backdrop {
-  private readonly defaultBackdropId = 'mds-backdrop'
+  private readonly defaultBackdropId = 'magma-backdrop'
   private readonly backdropBackgroundVisible = 'rgba(var(--magma-backdrop-color, 0 0 0) / var(--magma-backdrop-opacity, 0.1))'
   private readonly backdropBackgroundHidden = 'rgba(var(--magma-backdrop-color, 0 0 0) / 0)'
 
-  private readonly backdropId
-  private readonly cssBackdropZIndex
-  private readonly cssBackdropDuration
+  private readonly backdropId: string
+  private readonly cssBackdropZIndex: string
+  private readonly cssBackdropDuration: string
 
   private backdropEl: HTMLElement
   private backdropTimer: NodeJS.Timeout
 
   constructor (backdropId?: string) {
     this.backdropId = backdropId ?? this.defaultBackdropId
-    this.cssBackdropZIndex = `var(--${this.backdropId}-z-index)`
-    this.cssBackdropDuration = `var(--${this.backdropId}-duration)`
+    this.cssBackdropZIndex = `var(--${this.backdropId}-z-index, 4000)`
+    this.cssBackdropDuration = `var(--${this.backdropId}-animation-duration, 300ms)`
   }
 
   attachBackdrop (): void {

package/src/common/slot.ts

@@ -18,7 +18,18 @@ const hasSlottedNodes = (el: HTMLElement, name?: string): boolean => {
   return false
 }
 
+const hasSlotted = (el: HTMLElement, name?: string): boolean => {
+  const query = name ? `slot[name="${name}"]` : 'slot:not([name])'
+
+  const slot: HTMLSlotElement = el.shadowRoot?.querySelector(query) as HTMLSlotElement
+  if (slot) {
+    return slot.assignedNodes().length > 0 || slot.assignedElements().length > 0
+  }
+  return false
+}
+
 export {
   hasSlottedElements,
   hasSlottedNodes,
+  hasSlotted,
 }

package/src/common/string.ts

@@ -0,0 +1,42 @@
+const levenshteinDistance = (a: string, b: string): number => {
+  const dp: number[][] = Array.from({ length: a.length + 1 }, (_, i) =>
+    // eslint-disable-next-line no-nested-ternary
+    Array.from({ length: b.length + 1 }, (_, j) => (i === 0 ? j : j === 0 ? i : 0)),
+  )
+
+  for (let i = 1; i <= a.length; i++) {
+    for (let j = 1; j <= b.length; j++) {
+      if (a[i - 1] === b[j - 1]) {
+        dp[i][j] = dp[i - 1][j - 1]
+      } else {
+        dp[i][j] = 1 + Math.min(dp[i - 1][j], dp[i][j - 1], dp[i - 1][j - 1])
+      }
+    }
+  }
+
+  return dp[a.length][b.length]
+}
+
+
+const closest = (input: string, validCodes: string[]): string => {
+  let [closest] = validCodes
+  let minDistance = levenshteinDistance(input, closest)
+
+  for (const code of validCodes) {
+    const distance = levenshteinDistance(input, code)
+    if (distance < minDistance) {
+      minDistance = distance
+      closest = code
+    }
+  }
+
+  return closest
+}
+
+const firstLetterUppercase = (str: string): string => str.charAt(0).toUpperCase() + str.slice(1)
+
+export {
+  closest,
+  firstLetterUppercase,
+  levenshteinDistance,
+}

package/src/components/mds-modal/css/mds-modal-animate-bottom-left.css

@@ -8,8 +8,8 @@
   width: 100vw;
 }
 
-:host([position="bottom-left"][opened="false"]) > ::slotted( [slot="window"] ),
-:host([position="bottom-left"]:not([opened])) > ::slotted( [slot="window"] ) {
+:host([position="bottom-left"][opened="false"]) > ::slotted([slot="window"]),
+:host([position="bottom-left"]:not([opened])) > ::slotted([slot="window"]) {
   transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);
 }
 

package/src/components/mds-modal/css/mds-modal-animate-bottom-right.css

@@ -8,8 +8,8 @@
   width: 100vw;
 }
 
-:host([position="bottom-right"][opened="false"]) > ::slotted( [slot="window"] ),
-:host([position="bottom-right"]:not([opened])) > ::slotted( [slot="window"] ) {
+:host([position="bottom-right"][opened="false"]) > ::slotted([slot="window"]),
+:host([position="bottom-right"]:not([opened])) > ::slotted([slot="window"]) {
   transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);
 }
 

package/src/components/mds-modal/css/mds-modal-animate-bottom.css

@@ -8,8 +8,8 @@
   width: 100vw;
 }
 
-:host([position="bottom"][opened="false"]) > ::slotted( [slot="window"] ),
-:host([position="bottom"]:not([opened])) > ::slotted( [slot="window"] ) {
+:host([position="bottom"][opened="false"]) > ::slotted([slot="window"]),
+:host([position="bottom"]:not([opened])) > ::slotted([slot="window"]) {
   transform: rotateX(22deg) rotateY(0) scale(0.5) translate(0, 80%);
 }
 

package/src/components/mds-modal/css/mds-modal-animate-center.css

@@ -7,8 +7,8 @@
   transition-delay: 0s;
 }
 
-:host([position="center"][opened="false"]) > ::slotted( [slot="window"] ),
-:host([position="center"]:not([opened])) > ::slotted( [slot="window"] ) {
+:host([position="center"][opened="false"]) > ::slotted([slot="window"]),
+:host([position="center"]:not([opened])) > ::slotted([slot="window"]) {
   transform: rotateX(0) rotateY(22deg) scale(0.5) translate(0, 40%);
 }
 

package/src/components/mds-modal/css/mds-modal-animate-left.css

@@ -9,8 +9,8 @@
   max-width: calc(100vw - 80px);
 }
 
-:host([position="left"][opened="false"]) > ::slotted( [slot="window"] ),
-:host([position="left"]:not([opened])) > ::slotted( [slot="window"] ) {
+:host([position="left"][opened="false"]) > ::slotted([slot="window"]),
+:host([position="left"]:not([opened])) > ::slotted([slot="window"]) {
   transform: rotateX(0) rotateY(22deg) rotateZ(0) scale(0.5) translate(-100%, 0%);
 }
 

package/src/components/mds-modal/css/mds-modal-animate-right.css

@@ -9,8 +9,8 @@
   max-width: calc(100vw - 80px);
 }
 
-:host([position="right"][opened="false"]) > ::slotted( [slot="window"] ),
-:host([position="right"]:not([opened])) > ::slotted( [slot="window"] ) {
+:host([position="right"][opened="false"]) > ::slotted([slot="window"]),
+:host([position="right"]:not([opened])) > ::slotted([slot="window"]) {
   transform: rotateX(0) rotateY(-22deg) rotateZ(0) scale(0.5) translate(100%, 0%);
 }
 

package/src/components/mds-modal/css/mds-modal-animate-top-left.css

@@ -8,8 +8,8 @@
   width: 100vw;
 }
 
-:host([position="top-left"][opened="false"]) > ::slotted( [slot="window"] ),
-:host([position="top-left"]:not([opened])) > ::slotted( [slot="window"] ) {
+:host([position="top-left"][opened="false"]) > ::slotted([slot="window"]),
+:host([position="top-left"]:not([opened])) > ::slotted([slot="window"]) {
   transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);
 }
 

package/src/components/mds-modal/css/mds-modal-animate-top-right.css

@@ -8,8 +8,8 @@
   width: 100vw;
 }
 
-:host([position="top-right"][opened="false"]) > ::slotted( [slot="window"] ),
-:host([position="top-right"]:not([opened])) > ::slotted( [slot="window"] ) {
+:host([position="top-right"][opened="false"]) > ::slotted([slot="window"]),
+:host([position="top-right"]:not([opened])) > ::slotted([slot="window"]) {
   transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);
 }
 

package/src/components/mds-modal/css/mds-modal-animate-top.css

@@ -8,8 +8,8 @@
   width: 100vw;
 }
 
-:host([position="top"][opened="false"]) > ::slotted( [slot="window"] ),
-:host([position="top"]:not([opened])) > ::slotted( [slot="window"] ) {
+:host([position="top"][opened="false"]) > ::slotted( [slot="window"]),
+:host([position="top"]:not([opened])) > ::slotted( [slot="window"]) {
   transform: rotateX(-22deg) rotateY(0) scale(0.5) translate(0, -80%);
 }
 

package/src/components/mds-modal/css/mds-modal-animate.css

@@ -3,21 +3,21 @@
 }
 
 
-:host([opened]:not([opened="false"]) ) {
+:host([opened]:not([opened="false"])) {
   background-color: rgba(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity));
   pointer-events: auto;
 }
 
 :host .window,
-:host > ::slotted( [slot="window"] ) {
+:host > ::slotted([slot="window"]) {
   opacity: 0;
   transition-duration: var(--mds-modal-transition-duration);
   transition-property: transform, opacity;
   transition-timing-function: var(--mds-modal-transition-outro-ease);
 }
 
-:host([opened]:not([opened="false"]) ) .window,
-:host([opened]:not([opened="false"]) ) > ::slotted( [slot="window"] ) {
+:host([opened]:not([opened="false"])) .window,
+:host([opened]:not([opened="false"])) > ::slotted( [slot="window"]) {
   opacity: 1;
   transform: rotate(0) scale(1) translateY(0);
   transition-delay: 0s;

package/src/components/mds-modal/css/mds-modal-pref-animation.css

@@ -1,30 +1,21 @@
-@tailwind utilities;
-
-@container style(--magma-pref-animation: reduce) {
-  :host,
-  .action-close,
-  .window {
-    transition-duration: 0s !important;
-  }
+:host-context(.pref-animation-reduce) {
+  --mds-modal-transition-duration: 0s;
+}
 
-  :host {
+:host-context(.pref-animation-reduce),
+:host-context(.pref-animation-reduce) .action-close,
+:host-context(.pref-animation-reduce) .window {
+  transition-duration: 0s !important;
+}
 
+@media (prefers-reduced-motion) {
+  :host-context(.pref-animation-system) {
     --mds-modal-transition-duration: 0s;
   }
-}
-
-@container style(--magma-pref-animation: system) {
-
-  @media (prefers-reduced-motion) {
-    :host,
-    .action-close,
-    .window {
-      transition-duration: 0s !important;
-    }
 
-    :host {
-
-      --mds-modal-transition-duration: 0s;
-    }
+  :host-context(.pref-animation-system),
+  :host-context(.pref-animation-system) .action-close,
+  :host-context(.pref-animation-system) .window {
+    transition-duration: 0s !important;
   }
 }

package/src/components/mds-modal/css/mds-modal-pref-contrast.css

@@ -1,18 +1,10 @@
-@tailwind utilities;
-
-@container style(--magma-pref-contrast: more) {
-  :host {
-
-    --mds-modal-window-shadow: theme('boxShadow.outline-strong-50'), theme('boxShadow.2xl');
-  }
+:host-context(.pref-contrast-more) {
+  --mds-modal-window-shadow: theme('boxShadow.outline-strong-50'), theme('boxShadow.2xl');
 }
 
-@container style(--magma-pref-contrast: system) {
-
-  @media (prefers-contrast: more) {
-    :host {
 
-      --mds-modal-window-shadow: theme('boxShadow.outline-strong-50'), theme('boxShadow.2xl');
-    }
+@media (prefers-contrast: more) {
+  :host-context(.pref-contrast-system) {
+    --mds-modal-window-shadow: theme('boxShadow.outline-strong-50'), theme('boxShadow.2xl');
   }
 }

package/src/components/mds-modal/css/mds-modal-pref-theme.css

@@ -1,20 +1,11 @@
-@tailwind utilities;
-
-@container style(--magma-pref-theme: dark) {
-  :host {
+:host-context(.pref-theme-dark) {
+  --mds-modal-window-background: theme('colors.tone-neutral-09');
+  --mds-modal-window-shadow: theme('boxShadow.outline'), theme('boxShadow.xl');
+}
 
+@media (prefers-color-scheme: dark) {
+  :host-context(.pref-theme-system) {
     --mds-modal-window-background: theme('colors.tone-neutral-09');
     --mds-modal-window-shadow: theme('boxShadow.outline'), theme('boxShadow.xl');
   }
 }
-
-@container style(--magma-pref-theme: system) {
-
-  @media (prefers-color-scheme: dark) {
-    :host {
-
-      --mds-modal-window-background: theme('colors.tone-neutral-09');
-      --mds-modal-window-shadow: theme('boxShadow.outline'), theme('boxShadow.xl');
-    }
-  }
-}

package/src/components/mds-modal/mds-modal.css

@@ -1,8 +1,6 @@
 @import '~@maggioli-design-system/styles/dist/css/animations.css'; /* included for focus effect */
 @import '../../tailwind/components.css';
-
 @tailwind components;
-@tailwind utilities;
 
 /**
  * @prop --mds-modal-close-icon-color: Set the color of the close icon button to the top left.
@@ -12,12 +10,12 @@
  * @prop --mds-modal-window-overflow: Set the overflow of the window
  * @prop --mds-modal-window-radius: Set the border radius of the window
  * @prop --mds-modal-window-distance: Set the distance between the modal window and the screen bounds
+ * @prop --mds-modal-custom-window-distance: Set the distance between the slotted modal window and the screen bounds
  * @prop --mds-modal-window-shadow: Set the box shadow of the window
  * @prop --mds-modal-z-index: Set the z-index of the window when the component is opened
  */
 
 :host {
-
   --mds-modal-overlay-color: var(--magma-overlay-color, 0 0 0);
   --mds-modal-overlay-opacity: var(--magma-overlay-opacity, 0.5);
   --mds-modal-transition-duration: 500ms;
@@ -28,6 +26,7 @@
   --mds-modal-window-radius: 0;
   --mds-modal-window-shadow: theme('boxShadow.2xl');
   --mds-modal-window-distance: 0;
+  --mds-modal-custom-window-distance: theme('spacing.600');
   --mds-modal-z-index: var(--magma-modal-z-index);
 
   @apply ease-in-out-expo;
@@ -46,12 +45,16 @@
   z-index: var(--mds-modal-z-index, 1000);
 }
 
-:host( [position="top"] ) {
+:host ::slotted([slot="window"]) {
+  margin: var(--mds-modal-custom-window-distance);
+}
+
+:host([position="top"]) {
   align-items: flex-start;
   justify-content: center;
 }
 
-:host( [position="bottom"] ) {
+:host([position="bottom"]) {
   align-items: flex-end;
   justify-content: center;
 }
@@ -113,4 +116,4 @@
 @import './css/mds-modal-pref-animation.css';
 @import './css/mds-modal-pref-contrast.css';
 @import './css/mds-modal-pref-theme.css';
-
+@import '../../tailwind/fouc.css';

package/src/components/mds-modal/mds-modal.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx'
 import { Component, Element, Event, EventEmitter, Host, h, Listen, Prop, Watch } from '@stencil/core'
-import { ModalPositionType, ModalAnimationStateType } from './meta/types'
+import { ModalPositionType, ModalAnimationStateType, ModalOverflowType } from './meta/types'
 import { cssDurationToMilliseconds } from '@common/unit'
 
 /**
@@ -20,6 +20,7 @@ export class MdsModal {
   private animationDelayTimeout: NodeJS.Timeout
   private window = false
   private top = false
+  private bodyOverflow: string
   private bottom = false
   private cssTransitionDuration: string
 
@@ -40,6 +41,11 @@ export class MdsModal {
    */
   @Prop({ reflect: true, mutable: true }) animating?: ModalAnimationStateType = 'none'
 
+  /**
+   * Specifies if the component prevents the body from scrolling when modal window is opened
+   */
+  @Prop({ reflect: true }) readonly overflow: ModalOverflowType = 'auto'
+
   /**
    * Emits when a modal is closed
    */
@@ -69,6 +75,25 @@ export class MdsModal {
     clearTimeout(this.animationDelayTimeout)
   }
 
+  private disableOverflow = (): void => {
+    if (document) {
+      if (document.body.style.overflow) {
+        this.bodyOverflow = document.body.style.overflow
+      }
+      document.body.style.overflow = 'hidden'
+    }
+  }
+
+  private enableOverflow = (): void => {
+    if (document) {
+      if (this.bodyOverflow) {
+        document.body.style.overflow = this.bodyOverflow
+      } else {
+        document.body.style.removeProperty('overflow')
+      }
+    }
+  }
+
   private animateOpenWindow = (): void => {
     this.animating = 'intro'
     clearTimeout(this.animationDelayTimeout)
@@ -86,6 +111,10 @@ export class MdsModal {
     this.top = this.host.querySelector('[slot="top"]') !== null
     this.window = this.host.querySelector('[slot="window"]') !== null
 
+    if (this.overflow === 'auto' && this.opened) {
+      this.disableOverflow()
+    }
+
     if (this.window) {
       this.host.querySelector('[slot="window"]')?.setAttribute('role', 'dialog')
     }
@@ -112,9 +141,15 @@ export class MdsModal {
   @Watch('opened')
   handleOpenProp (newValue: boolean): void {
     if (newValue) {
+      if (this.overflow === 'auto') {
+        this.disableOverflow()
+      }
       this.animateOpenWindow()
       return
     }
+    if (this.overflow === 'auto') {
+      this.enableOverflow()
+    }
     this.animateCloseWindow()
   }
 

package/src/components/mds-modal/meta/dictionary.ts

@@ -10,6 +10,12 @@ const modalPositionDictionary = [
   'top-right',
 ]
 
+const modalOverflowDictionary = [
+  'auto',
+  'manual',
+]
+
 export {
+  modalOverflowDictionary,
   modalPositionDictionary,
 }

package/src/components/mds-modal/meta/types.ts

@@ -13,3 +13,7 @@ export type ModalAnimationStateType =
   | 'intro'
   | 'none'
   | 'outro'
+
+export type ModalOverflowType =
+  | 'auto'
+  | 'manual'

package/src/components/mds-modal/readme.md

@@ -7,11 +7,12 @@
 
 ## Properties
 
-| Property    | Attribute   | Description                                           | Type                                                                                                                              | Default    |
-| ----------- | ----------- | ----------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | ---------- |
-| `animating` | `animating` | Specifies if the component is animating itself or not | `"intro" \| "none" \| "outro" \| undefined`                                                                                       | `'none'`   |
-| `opened`    | `opened`    | Specifies if the modal is opened or not               | `boolean`                                                                                                                         | `false`    |
-| `position`  | `position`  | Specifies the animation position of the modal window  | `"bottom" \| "bottom-left" \| "bottom-right" \| "center" \| "left" \| "right" \| "top" \| "top-left" \| "top-right" \| undefined` | `'center'` |
+| Property    | Attribute   | Description                                                                             | Type                                                                                                                              | Default    |
+| ----------- | ----------- | --------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | ---------- |
+| `animating` | `animating` | Specifies if the component is animating itself or not                                   | `"intro" \| "none" \| "outro" \| undefined`                                                                                       | `'none'`   |
+| `opened`    | `opened`    | Specifies if the modal is opened or not                                                 | `boolean`                                                                                                                         | `false`    |
+| `overflow`  | `overflow`  | Specifies if the component prevents the body from scrolling when modal window is opened | `"auto" \| "manual"`                                                                                                              | `'auto'`   |
+| `position`  | `position`  | Specifies the animation position of the modal window                                    | `"bottom" \| "bottom-left" \| "bottom-right" \| "center" \| "left" \| "right" \| "top" \| "top-left" \| "top-right" \| undefined` | `'center'` |
 
 
 ## Events
@@ -41,17 +42,18 @@
 
 ## CSS Custom Properties
 
-| Name                            | Description                                                                                                                                        |
-| ------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--mds-modal-close-icon-color`  | Set the color of the close icon button to the top left.                                                                                            |
-| `--mds-modal-overlay-color`     | Set the overlay color of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.         |
-| `--mds-modal-overlay-opacity`   | Set the overlay color opacity of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`. |
-| `--mds-modal-window-background` | Set the background color of the window                                                                                                             |
-| `--mds-modal-window-distance`   | Set the distance between the modal window and the screen bounds                                                                                    |
-| `--mds-modal-window-overflow`   | Set the overflow of the window                                                                                                                     |
-| `--mds-modal-window-radius`     | Set the border radius of the window                                                                                                                |
-| `--mds-modal-window-shadow`     | Set the box shadow of the window                                                                                                                   |
-| `--mds-modal-z-index`           | Set the z-index of the window when the component is opened                                                                                         |
+| Name                                 | Description                                                                                                                                        |
+| ------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--mds-modal-close-icon-color`       | Set the color of the close icon button to the top left.                                                                                            |
+| `--mds-modal-custom-window-distance` | Set the distance between the slotted modal window and the screen bounds                                                                            |
+| `--mds-modal-overlay-color`          | Set the overlay color of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.         |
+| `--mds-modal-overlay-opacity`        | Set the overlay color opacity of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`. |
+| `--mds-modal-window-background`      | Set the background color of the window                                                                                                             |
+| `--mds-modal-window-distance`        | Set the distance between the modal window and the screen bounds                                                                                    |
+| `--mds-modal-window-overflow`        | Set the overflow of the window                                                                                                                     |
+| `--mds-modal-window-radius`          | Set the border radius of the window                                                                                                                |
+| `--mds-modal-window-shadow`          | Set the box shadow of the window                                                                                                                   |
+| `--mds-modal-z-index`                | Set the z-index of the window when the component is opened                                                                                         |
 
 
 ----------------------------------------------