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

package/dist/types/dictionary/keyboard.d.ts

@@ -0,0 +1,2 @@
+declare const keyboardKeyNameDictionary: string[];
+export { keyboardKeyNameDictionary, };

package/dist/types/type/keyboard.d.ts

@@ -0,0 +1,12 @@
+export type KeyboardKeyData = {
+    alias: string;
+    description: string;
+    group: string;
+    keyCodes: string[];
+    keyboardPosition?: {
+        left?: boolean;
+        right?: boolean;
+    };
+};
+export type KeyboardKeyName = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | 'a' | 'alt' | 'altleft' | 'altright' | 'arrowdown' | 'arrowleft' | 'arrowright' | 'arrowup' | 'b' | 'backspace' | 'c' | 'capslock' | 'command' | 'commandleft' | 'commandright' | 'control' | 'controlleft' | 'controlright' | 'd' | 'delete' | 'e' | 'end' | 'enter' | 'escape' | 'f' | 'f1' | 'f10' | 'f11' | 'f12' | 'f2' | 'f3' | 'f4' | 'f5' | 'f6' | 'f7' | 'f8' | 'f9' | 'g' | 'h' | 'home' | 'i' | 'j' | 'k' | 'l' | 'm' | 'n' | 'o' | 'option' | 'optionleft' | 'optionright' | 'p' | 'pagedown' | 'pageup' | 'q' | 'r' | 's' | 'shift' | 'shiftleft' | 'shiftright' | 'space' | 't' | 'tab' | 'u' | 'v' | 'w' | 'windows' | 'windowsleft' | 'windowsright' | 'x' | 'y' | 'z';
+export type KeyboardKeyMap = Record<KeyboardKeyName, KeyboardKeyData>;

package/documentation.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-02-06T07:52:44",
+  "timestamp": "2025-02-25T13:09:05",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.25.1",
@@ -98,6 +98,41 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "overflow",
+          "type": "\"auto\" | \"manual\"",
+          "complexType": {
+            "original": "ModalOverflowType",
+            "resolved": "\"auto\" | \"manual\"",
+            "references": {
+              "ModalOverflowType": {
+                "location": "import",
+                "path": "./meta/types",
+                "id": "src/components/mds-modal/meta/types.ts::ModalOverflowType"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "overflow",
+          "reflectToAttr": true,
+          "docs": "Specifies if the component prevents the body from scrolling when modal window is opened",
+          "docsTags": [],
+          "default": "'auto'",
+          "values": [
+            {
+              "value": "auto",
+              "type": "string"
+            },
+            {
+              "value": "manual",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "position",
           "type": "\"bottom\" | \"bottom-left\" | \"bottom-right\" | \"center\" | \"left\" | \"right\" | \"top\" | \"top-left\" | \"top-right\" | undefined",
@@ -216,6 +251,11 @@
           "annotation": "prop",
           "docs": "Set the color of the close icon button to the top left."
         },
+        {
+          "name": "--mds-modal-custom-window-distance",
+          "annotation": "prop",
+          "docs": "Set the distance between the slotted modal window and the screen bounds"
+        },
         {
           "name": "--mds-modal-overlay-color",
           "annotation": "prop",
@@ -498,6 +538,11 @@
       "docstring": "",
       "path": "src/components/mds-header/meta/event-detail.ts"
     },
+    "src/components/mds-header/meta/event-detail.ts::MdsHeaderVisibilityEventDetail": {
+      "declaration": "export interface MdsHeaderVisibilityEventDetail {\n  visibility: boolean\n}",
+      "docstring": "",
+      "path": "src/components/mds-header/meta/event-detail.ts"
+    },
     "src/components/mds-horizontal-scroll/meta/types.ts::ViewportType": {
       "declaration": "export type ViewportType =\n  | 'all'\n  | 'tv'\n  | 'xlarge'\n  | 'large'\n  | 'wide'\n  | 'desktop'\n  | 'tablet'\n  | 'none'",
       "docstring": "",
@@ -613,6 +658,16 @@
       "docstring": "",
       "path": "src/components/mds-input-upload/meta/types.ts"
     },
+    "src/components/mds-keyboard/meta/type.ts::KeyboardTest": {
+      "declaration": "export type KeyboardTest =\n  | 'pass'\n  | 'fail'",
+      "docstring": "",
+      "path": "src/components/mds-keyboard/meta/type.ts"
+    },
+    "src/type/keyboard.ts::KeyboardKeyName": {
+      "declaration": "export type KeyboardKeyName =\n  | '0'\n  | '1'\n  | '2'\n  | '3'\n  | '4'\n  | '5'\n  | '6'\n  | '7'\n  | '8'\n  | '9'\n  | 'a'\n  | 'alt'\n  | 'altleft'\n  | 'altright'\n  | 'arrowdown'\n  | 'arrowleft'\n  | 'arrowright'\n  | 'arrowup'\n  | 'b'\n  | 'backspace'\n  | 'c'\n  | 'capslock'\n  | 'command'\n  | 'commandleft'\n  | 'commandright'\n  | 'control'\n  | 'controlleft'\n  | 'controlright'\n  | 'd'\n  | 'delete'\n  | 'e'\n  | 'end'\n  | 'enter'\n  | 'escape'\n  | 'f'\n  | 'f1'\n  | 'f10'\n  | 'f11'\n  | 'f12'\n  | 'f2'\n  | 'f3'\n  | 'f4'\n  | 'f5'\n  | 'f6'\n  | 'f7'\n  | 'f8'\n  | 'f9'\n  | 'g'\n  | 'h'\n  | 'home'\n  | 'i'\n  | 'j'\n  | 'k'\n  | 'l'\n  | 'm'\n  | 'n'\n  | 'o'\n  | 'option'\n  | 'optionleft'\n  | 'optionright'\n  | 'p'\n  | 'pagedown'\n  | 'pageup'\n  | 'q'\n  | 'r'\n  | 's'\n  | 'shift'\n  | 'shiftleft'\n  | 'shiftright'\n  | 'space'\n  | 't'\n  | 'tab'\n  | 'u'\n  | 'v'\n  | 'w'\n  | 'windows'\n  | 'windowsleft'\n  | 'windowsright'\n  | 'x'\n  | 'y'\n  | 'z'",
+      "docstring": "",
+      "path": "src/type/keyboard.ts"
+    },
     "src/type/typography.ts::TypographyType": {
       "declaration": "export type TypographyType =\n  | 'action'\n  | 'caption'\n  | 'snippet'\n  | 'detail'\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  | 'hack'\n  | 'label'\n  | 'option'\n  | 'paragraph'\n  | 'tip'",
       "docstring": "",
@@ -633,6 +688,11 @@
       "docstring": "",
       "path": "src/components/mds-modal/meta/types.ts"
     },
+    "src/components/mds-modal/meta/types.ts::ModalOverflowType": {
+      "declaration": "export type ModalOverflowType =\n  | 'auto'\n  | 'manual'",
+      "docstring": "",
+      "path": "src/components/mds-modal/meta/types.ts"
+    },
     "src/type/variant.ts::LabelVariantType": {
       "declaration": "export type LabelVariantType =\n  | 'amaranth'\n  | 'aqua'\n  | 'blue'\n  | 'green'\n  | 'lime'\n  | 'orange'\n  | 'orchid'\n  | 'sky'\n  | 'violet'\n  | 'yellow'",
       "docstring": "",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maggioli-design-system/mds-modal",
-  "version": "5.3.0",
+  "version": "5.4.0",
   "description": "mds-modal is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -24,8 +24,8 @@
     "test": "stencil test --spec --e2e"
   },
   "dependencies": {
-    "@maggioli-design-system/mds-button": "6.2.0",
-    "@maggioli-design-system/styles": "15.7.0",
+    "@maggioli-design-system/mds-button": "6.3.0",
+    "@maggioli-design-system/styles": "15.8.0",
     "@stencil/core": "4.25.1",
     "clsx": "2.1.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/mds-modal.css

@@ -12,6 +12,7 @@
  * @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
  */
@@ -28,6 +29,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,6 +48,10 @@
   z-index: var(--mds-modal-z-index, 1000);
 }
 
+:host ::slotted([slot="window"]) {
+  margin: var(--mds-modal-custom-window-distance);
+}
+
 :host( [position="top"] ) {
   align-items: flex-start;
   justify-content: center;
@@ -113,4 +119,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                                                                                         |
 
 
 ----------------------------------------------

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

@@ -1,7 +1,7 @@
 
 import { h } from '@stencil/core'
 import { useState } from 'react'
-import { modalPositionDictionary } from '../meta/dictionary'
+import { modalPositionDictionary, modalOverflowDictionary } from '../meta/dictionary'
 
 export default {
   title: 'UI / Modal',
@@ -10,6 +10,12 @@ export default {
       description: 'Specifies if the modal is opened or not',
       type: { name: 'boolean' },
     },
+    overflow: {
+      description: 'Specifies if the component prevents the body from scrolling when modal window is opened',
+      control: { type: 'select' },
+      options: modalOverflowDictionary,
+      type: { name: 'string' },
+    },
     position: {
       control: { type: 'select' },
       description: 'Specifies the animation position of the modal window',
@@ -27,7 +33,7 @@ const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@nintendo.com
 const Template = args =>
   <mds-modal {...args}>
     <header slot="top" class="p-800 flex gap-400 items-center border-b border-solid border-0 border-tone-neutral-09 max-w-[400px]">
-      <mds-img class="w-1600" src="/logo-gruppo-maggioli-512w.webp"/>
+      <mds-img class="w-1600" src="./logo-gruppo-maggioli-512w.webp"/>
       <div class="text-tone-neutral-02">
         <mds-text typography="h5" class="truncate min-w-0">Maggioli Editore</mds-text>
         <mds-text typography="detail" class="truncate min-w-0">Menu di servizio</mds-text>
@@ -40,7 +46,7 @@ const Template = args =>
     </div>
     <footer slot="bottom" class="p-800 flex gap-400 text-tone-neutral-02 border-t border-solid border-0 border-tone-neutral-09 max-w-[400px]">
       <mds-author class="flex-grow">
-        <mds-avatar slot="avatar" class="w-1600 mobile:w-1200" src="/avatar-01-200x200.jpeg"/>
+        <mds-avatar slot="avatar" class="w-1600 mobile:w-1200" src="./avatar-01-200x200.jpeg"/>
         <mds-text typography="h6">{ fullName }</mds-text>
         <mds-text typography="caption" class="text-tone-neutral-04">{ email }</mds-text>
       </mds-author>
@@ -48,6 +54,41 @@ const Template = args =>
     </footer>
   </mds-modal>
 
+const TemplateOverflow = args =>
+  <div>
+    <div class="grid">
+      {Array(40).fill(null).map((_value, index) => (
+        <div key={index} class="h-[100px] flex items-start justify-center text-center border-0 border-t border-solid border-t-tone-neutral-07">
+          <mds-text class="px-200 py-100 rounded-b-lg bg-tone-neutral-10 border-t-0 border border-solid border-tone-neutral-07" typography="snippet" tag="div">
+            { index === 0 ? '0px' : index + '00px' }
+          </mds-text>
+        </div>
+      ))}
+    </div>
+    <mds-modal {...args}>
+      <header slot="top" class="p-800 flex gap-400 items-center border-b border-solid border-0 border-tone-neutral-09 max-w-[400px]">
+        <mds-img class="w-1600" src="./logo-gruppo-maggioli-512w.webp"/>
+        <div class="text-tone-neutral-02">
+          <mds-text typography="h5" class="truncate min-w-0">Maggioli Editore</mds-text>
+          <mds-text typography="detail" class="truncate min-w-0">Menu di servizio</mds-text>
+        </div>
+      </header>
+      <div class="p-800 max-w-[400px]">
+        <mds-text>
+          As a multi-brand design system, our components need to be flexible enough for any one of our brands to use them for multiple use cases. To achieve this, we ensure that all of the brands are involved in the specification stage, giving us more confidence that we’re future-proofing our components as more brands adopt NewsKit.
+        </mds-text>
+      </div>
+      <footer slot="bottom" class="p-800 flex gap-400 text-tone-neutral-02 border-t border-solid border-0 border-tone-neutral-09 max-w-[400px]">
+        <mds-author class="flex-grow">
+          <mds-avatar slot="avatar" class="w-1600 mobile:w-1200" src="./avatar-01-200x200.jpeg"/>
+          <mds-text typography="h6">{ fullName }</mds-text>
+          <mds-text typography="caption" class="text-tone-neutral-04">{ email }</mds-text>
+        </mds-author>
+        <mds-button icon="mdi/dots-vertical" variant="light"></mds-button>
+      </footer>
+    </mds-modal>
+  </div>
+
 const CustomTemplate = args =>
   <mds-modal {...args}>
     <mds-banner slot="window" class="max-w-xl mx-6" deletable headline="Action required">
@@ -80,15 +121,28 @@ const InteractiveTemplate = () => {
 export const Default = Template.bind({})
 Default.args = {
   position: 'right',
+  opened: true,
+}
+
+export const BodyOverflowDisabled = TemplateOverflow.bind({})
+BodyOverflowDisabled.args = {
+  overflow: 'auto',
+  opened: true,
+  position: 'right',
 }
 
 export const DefaultWindowCustomized = Template.bind({})
 DefaultWindowCustomized.args = {
   position: 'right',
+  opened: true,
   style: { '--mds-modal-window-distance': '1rem', '--mds-modal-window-radius': '1rem' },
 }
 export const CustomWindowElement = CustomTemplate.bind({})
+CustomWindowElement.args = {
+  opened: true,
+}
 export const Interactive = InteractiveTemplate.bind({})
+
 export const ARIATest = CustomTemplate.bind({})
 ARIATest.args = {
   opened: true,

package/src/components.d.ts

@@ -5,8 +5,8 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { ModalAnimationStateType, ModalPositionType } from "./components/mds-modal/meta/types";
-export { ModalAnimationStateType, ModalPositionType } from "./components/mds-modal/meta/types";
+import { ModalAnimationStateType, ModalOverflowType, ModalPositionType } from "./components/mds-modal/meta/types";
+export { ModalAnimationStateType, ModalOverflowType, ModalPositionType } from "./components/mds-modal/meta/types";
 export namespace Components {
     interface MdsModal {
         /**
@@ -17,6 +17,10 @@ export namespace Components {
           * Specifies if the modal is opened or not
          */
         "opened": boolean;
+        /**
+          * Specifies if the component prevents the body from scrolling when modal window is opened
+         */
+        "overflow": ModalOverflowType;
         /**
           * Specifies the animation position of the modal window
          */
@@ -68,6 +72,10 @@ declare namespace LocalJSX {
           * Specifies if the modal is opened or not
          */
         "opened"?: boolean;
+        /**
+          * Specifies if the component prevents the body from scrolling when modal window is opened
+         */
+        "overflow"?: ModalOverflowType;
         /**
           * Specifies the animation position of the modal window
          */