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

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

@@ -0,0 +1,4 @@
+declare const treeActionsDictionary: string[];
+declare const treeAppearanceDictionary: string[];
+declare const treeIconDictionary: string[];
+export { treeActionsDictionary, treeAppearanceDictionary, treeIconDictionary, };

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/dist/types/type/tree.d.ts

@@ -0,0 +1,3 @@
+export type TreeAppearance = 'none' | 'depth';
+export type TreeIcon = 'folder' | 'chevron';
+export type TreeActions = 'auto' | 'visible';

package/documentation.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2024-12-19T14:37:09",
+  "timestamp": "2025-02-25T13:09:05",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.22.2",
+    "version": "4.25.1",
     "typescriptVersion": "5.5.4"
   },
   "components": [
@@ -70,7 +70,9 @@
             }
           ],
           "optional": true,
-          "required": false
+          "required": false,
+          "getter": false,
+          "setter": false
         },
         {
           "name": "opened",
@@ -92,7 +94,44 @@
             }
           ],
           "optional": false,
-          "required": false
+          "required": false,
+          "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",
@@ -156,7 +195,9 @@
             }
           ],
           "optional": true,
-          "required": false
+          "required": false,
+          "getter": false,
+          "setter": false
         }
       ],
       "methods": [],
@@ -210,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",
@@ -417,6 +463,11 @@
       "docstring": "",
       "path": "src/type/button.ts"
     },
+    "src/type/text.ts::TypographyTruncateType": {
+      "declaration": "export type TypographyTruncateType =\n  | 'all'\n  | 'none'\n  | 'word'",
+      "docstring": "",
+      "path": "src/type/text.ts"
+    },
     "src/type/variant.ts::ChipVariantType": {
       "declaration": "export type ChipVariantType =\n  | 'primary'\n  | 'secondary'\n  | 'dark'\n  | 'error'\n  | 'info'\n  | 'success'\n  | 'warning'",
       "docstring": "",
@@ -457,11 +508,6 @@
       "docstring": "",
       "path": "src/components/mds-file/meta/event-detail.ts"
     },
-    "src/type/text.ts::TypographyTruncateType": {
-      "declaration": "export type TypographyTruncateType =\n  | 'all'\n  | 'none'\n  | 'word'",
-      "docstring": "",
-      "path": "src/type/text.ts"
-    },
     "src/components/mds-file-preview/meta/event-detail.ts::MdsFilePreviewEventDetail": {
       "declaration": "export interface MdsFilePreviewEventDetail {\n  extension: string\n  filename: string\n  target: HTMLMdsFilePreviewElement\n}",
       "docstring": "",
@@ -492,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": "",
@@ -607,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": "",
@@ -627,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": "",
@@ -782,6 +848,26 @@
       "docstring": "",
       "path": "src/type/typography.ts"
     },
+    "src/type/tree.ts::TreeAppearance": {
+      "declaration": "export type TreeAppearance =\n  | 'none'\n  | 'depth'",
+      "docstring": "",
+      "path": "src/type/tree.ts"
+    },
+    "src/type/tree.ts::TreeIcon": {
+      "declaration": "export type TreeIcon =\n  | 'folder'\n  | 'chevron'",
+      "docstring": "",
+      "path": "src/type/tree.ts"
+    },
+    "src/type/tree.ts::TreeActions": {
+      "declaration": "export type TreeActions =\n  | 'auto'\n  | 'visible'",
+      "docstring": "",
+      "path": "src/type/tree.ts"
+    },
+    "src/components/mds-tree-item/meta/event-detail.ts::MdsTreeItemEventDetail": {
+      "declaration": "export interface MdsTreeItemEventDetail {\n  element: HTMLMdsTreeItemElement\n}",
+      "docstring": "",
+      "path": "src/components/mds-tree-item/meta/event-detail.ts"
+    },
     "src/components/mds-usage/meta/types.ts::UsageType": {
       "declaration": "export type UsageType =\n  | 'do'\n  | 'dont'\n  | 'info'\n  | 'warn'",
       "docstring": "",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maggioli-design-system/mds-modal",
-  "version": "5.2.1",
+  "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,9 +24,9 @@
     "test": "stencil test --spec --e2e"
   },
   "dependencies": {
-    "@maggioli-design-system/mds-button": "6.1.3",
-    "@maggioli-design-system/styles": "15.5.0",
-    "@stencil/core": "4.22.2",
+    "@maggioli-design-system/mds-button": "6.3.0",
+    "@maggioli-design-system/styles": "15.8.0",
+    "@stencil/core": "4.25.1",
     "clsx": "2.1.0"
   },
   "license": "MIT",

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

@@ -0,0 +1,263 @@
+import {
+  arrow,
+  autoPlacement,
+  autoUpdate,
+  computePosition,
+  flip,
+  Middleware,
+  MiddlewareData,
+  offset,
+  shift,
+} from '@floating-ui/dom'
+import { FloatingUIPlacement, FloatingUIStrategy } from '@type/floating-ui'
+import { cssDurationToMilliseconds } from './unit'
+import { setAttributeIfEmpty } from './aria'
+import { HTMLStencilElement } from '@stencil/core/internal'
+
+export interface FloatingElement extends PositionOptions {
+  host: HTMLFloatingElement,
+}
+
+export interface HTMLFloatingElement extends HTMLStencilElement, PositionOptions {
+  visible: boolean,
+}
+
+export interface PositionOptions {
+  arrow: boolean;
+  arrowPadding: number;
+  autoPlacement: boolean;
+  flip: boolean;
+  offset: number;
+  placement: FloatingUIPlacement;
+  shift: boolean;
+  shiftPadding: number;
+  strategy: FloatingUIStrategy;
+}
+
+export class FloatingController {
+  private _caller: HTMLElement
+  private readonly _host: HTMLFloatingElement
+  arrowEl: HTMLElement | undefined
+
+  private cleanupAutoUpdate: () => void
+
+  constructor (host: HTMLFloatingElement, arrowEl?: HTMLElement) {
+    this._host = host
+    this.arrowEl = arrowEl
+  }
+
+  updateCaller (target: string): HTMLElement {
+    // search caller in document or rootNode of host (if target is in shadowDOM)
+    const caller = (this._host.parentElement?.shadowRoot?.querySelector(target) as HTMLElement) ??
+      ((this._host.getRootNode() as HTMLElement).querySelector(target) as HTMLElement)
+
+    if (!caller) {
+      throw Error(`Target not found: ${target}`)
+    }
+
+    this._caller = caller
+
+    setAttributeIfEmpty(this._caller, 'aria-haspopup', 'true')
+    setAttributeIfEmpty(this._caller, 'aria-controls', target)
+    setAttributeIfEmpty(this._host, 'role', 'menu')
+    setAttributeIfEmpty(this._host, 'aria-labelledby', target)
+    return caller
+  }
+
+  private readonly arrowInset = (
+    middleware: MiddlewareData,
+    arrowPosition: string,
+  ): { bottom?: string; left?: string; right?: string; top?: string } => {
+    const { arrow } = middleware
+    const inset = { bottom: '', left: '', right: '', top: '' }
+
+    if (arrow === undefined) {
+      return {}
+    }
+
+    switch (arrowPosition) {
+    case 'bottom':
+      inset.left = arrow.x !== null ? `${arrow.x}px` : ''
+      inset.top = '100%'
+      break
+    case 'left':
+      inset.right = '100%'
+      inset.top = arrow.y !== null ? `${arrow.y}px` : ''
+      break
+    case 'right':
+      inset.left = '100%'
+      inset.top = arrow.y !== null ? `${arrow.y}px` : ''
+      break
+    case 'top':
+      inset.left = arrow.x !== null ? `${arrow.x}px` : ''
+      inset.top = ''
+      break
+    default:
+      break
+    }
+    return inset
+  }
+
+  private readonly arrowTransform = (
+    arrowPosition: string,
+  ): { transform: string } => {
+    let transformProps = this._host.arrow && this._host.visible ? 'scale(1)' : 'scale(0)'
+    switch (arrowPosition) {
+    case 'bottom':
+      transformProps = `rotate(180deg) ${transformProps} translate(0, -100%)`
+      break
+    case 'left':
+      transformProps = `rotate(-90deg) ${transformProps} translate(50%, -50%)`
+      break
+    case 'right':
+      transformProps = `rotate(90deg) ${transformProps} translate(-50%, -50%)`
+      break
+    case 'top':
+      transformProps = `rotate(0deg) ${transformProps} translate(0, 0)`
+      break
+    default:
+      break
+    }
+    return { transform: transformProps }
+  }
+
+  private readonly arrowTransformOrigin = (
+    arrowPosition: string,
+  ): { transformOrigin: string } => {
+    switch (arrowPosition) {
+    case 'bottom':
+      return { transformOrigin: 'center top' }
+    case 'left':
+      return { transformOrigin: 'right center' }
+    case 'right':
+      return { transformOrigin: 'left center' }
+    case 'top':
+      return { transformOrigin: 'center bottom' }
+    default:
+      return { transformOrigin: 'center top' }
+    }
+  }
+
+  private readonly calculatePosition = (): void => {
+    if (!this._caller) return
+
+    const middleware: Middleware[] = new Array<Middleware>()
+    const config: { padding?: number } = {}
+
+    if (this._host.shiftPadding) {
+      config.padding = this._host.shiftPadding
+    }
+
+    if (this._host.autoPlacement) {
+      middleware.push(autoPlacement())
+    }
+
+    if (this._host.offset) {
+      middleware.push(offset(this._host.offset))
+    }
+
+    if (!this._host.autoPlacement && this._host.flip) {
+      middleware.push(flip(config))
+    }
+
+    if (this._host.shift) {
+      middleware.push(shift(config))
+    }
+
+    if (this.arrowEl && this._host.arrow) {
+      middleware.push(
+        arrow({
+          element: this.arrowEl,
+          padding: this._host.arrowPadding,
+        }),
+      )
+    }
+
+    computePosition(this._caller, this._host, {
+      middleware,
+      placement: this._host.placement,
+      strategy: this._host.strategy,
+    }).then(({ x, y, placement, middlewareData }) => {
+      Object.assign(this._host.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+      })
+
+      const arrowStyle = {}
+      const arrowPosition = {
+        top: 'bottom',
+        right: 'left',
+        bottom: 'top',
+        left: 'right',
+      }[placement.split('-')[0]]
+
+      if (arrowPosition && this.arrowEl) {
+        Object.assign(arrowStyle, this.arrowTransform(arrowPosition))
+        Object.assign(
+          arrowStyle,
+          this.arrowInset(middlewareData, arrowPosition),
+        )
+        Object.assign(arrowStyle, this.arrowTransformOrigin(arrowPosition))
+        Object.assign(this.arrowEl.style, arrowStyle)
+      }
+    })
+  }
+
+  updatePosition (): void {
+    if (this.cleanupAutoUpdate) this.cleanupAutoUpdate()
+    this.cleanupAutoUpdate = autoUpdate(this._caller, this._host, this.calculatePosition)
+  }
+
+  dismiss (): void {
+    this.cleanupAutoUpdate()
+  }
+}
+
+export class 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: 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, 4000)`
+    this.cssBackdropDuration = `var(--${this.backdropId}-animation-duration, 300ms)`
+  }
+
+  attachBackdrop (): void {
+    if (!this.backdropEl) {
+      this.backdropEl = document.createElement('div')
+      this.backdropEl.className = this.backdropId
+      this.backdropEl.style.inset = '0'
+      this.backdropEl.style.pointerEvents = 'none'
+      this.backdropEl.style.position = 'fixed'
+      this.backdropEl.style.transition = `background-color ${this.cssBackdropDuration} ease-out`
+      this.backdropEl.style.zIndex = this.cssBackdropZIndex
+    }
+    this.backdropEl.style.backgroundColor = this.backdropBackgroundHidden
+    document.body.appendChild(this.backdropEl)
+
+    clearTimeout(this.backdropTimer)
+    this.backdropTimer = setTimeout(() => {
+      this.backdropEl.style.backgroundColor = this.backdropBackgroundVisible
+    }, 1)
+  }
+
+  detachBackdrop (): void {
+    if (!this.backdropEl) {
+      return
+    }
+    this.backdropEl.style.backgroundColor = 'transparent'
+    clearTimeout(this.backdropTimer)
+    this.backdropTimer = setTimeout(() => {
+      this.backdropEl.remove()
+    }, cssDurationToMilliseconds(this.cssBackdropDuration))
+  }
+}

package/src/common/slot.ts

@@ -1,8 +1,16 @@
 const hasSlottedElements = (el: HTMLElement, name?: string): boolean => {
-  let query = 'slot'
-  if (name) {
-    query = `slot[name=${name}]`
+  const query = name ? `slot[name="${name}"]` : 'slot:not([name])'
+
+  const slot: HTMLSlotElement = el.shadowRoot?.querySelector(query) as HTMLSlotElement
+  if (slot) {
+    return slot.assignedElements({ flatten: true }).length > 0
   }
+  return false
+}
+
+const hasSlottedNodes = (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
@@ -10,6 +18,18 @@ const hasSlottedElements = (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';