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

package/dist/stats.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-11-25T16:44:46",
+  "timestamp": "2024-12-20T08:54:03",
   "compiler": {
     "name": "node",
     "version": "22.11.0"
@@ -9,18 +9,20 @@
     "fsNamespace": "mds-modal",
     "components": 1,
     "entries": 1,
-    "bundles": 93,
+    "bundles": 97,
     "outputs": [
       {
         "name": "dist-collection",
-        "files": 45,
+        "files": 49,
         "generatedFiles": [
           "./dist/collection/common/aria.js",
           "./dist/collection/common/date.js",
+          "./dist/collection/common/device.js",
           "./dist/collection/common/file.js",
           "./dist/collection/common/icon.js",
           "./dist/collection/common/keyboard-manager.js",
           "./dist/collection/common/locale.js",
+          "./dist/collection/common/slot.js",
           "./dist/collection/common/unit.js",
           "./dist/collection/common/yugop/core.js",
           "./dist/collection/common/yugop/index.js",
@@ -33,6 +35,7 @@
           "./dist/collection/components/mds-modal/meta/dictionary.js",
           "./dist/collection/components/mds-modal/meta/types.js",
           "./dist/collection/components/mds-modal/test/mds-modal.stories.js",
+          "./dist/collection/dictionary/animation.js",
           "./dist/collection/dictionary/autocomplete.js",
           "./dist/collection/dictionary/button.js",
           "./dist/collection/dictionary/color.js",
@@ -46,6 +49,7 @@
           "./dist/collection/dictionary/variant.js",
           "./dist/collection/fixtures/cities.js",
           "./dist/collection/fixtures/filenames.js",
+          "./dist/collection/type/animation.js",
           "./dist/collection/type/autocomplete.js",
           "./dist/collection/type/button.js",
           "./dist/collection/type/date.js",
@@ -99,23 +103,23 @@
           "./dist/mds-modal/index.esm.js",
           "./dist/mds-modal/mds-modal.esm.js",
           "./dist/mds-modal/mds-modal.js",
+          "./dist/mds-modal/p-08a99956.entry.js",
+          "./dist/mds-modal/p-0d78ea55.system.entry.js",
           "./dist/mds-modal/p-0ed6e0c8.js",
           "./dist/mds-modal/p-423dac35.system.js",
           "./dist/mds-modal/p-50ea2036.system.js",
           "./dist/mds-modal/p-56ba5cbf.system.js",
-          "./dist/mds-modal/p-63a918d2.system.entry.js",
-          "./dist/mds-modal/p-67200987.entry.js",
           "./dist/mds-modal/p-67c6f337.system.js",
           "./dist/mds-modal/p-e1255160.js",
           "./www/build/index.esm.js",
           "./www/build/mds-modal.esm.js",
           "./www/build/mds-modal.js",
+          "./www/build/p-08a99956.entry.js",
+          "./www/build/p-0d78ea55.system.entry.js",
           "./www/build/p-0ed6e0c8.js",
           "./www/build/p-423dac35.system.js",
           "./www/build/p-50ea2036.system.js",
           "./www/build/p-56ba5cbf.system.js",
-          "./www/build/p-63a918d2.system.entry.js",
-          "./www/build/p-67200987.entry.js",
           "./www/build/p-67c6f337.system.js",
           "./www/build/p-e1255160.js"
         ]
@@ -150,12 +154,12 @@
         "components": [
           "mds-modal"
         ],
-        "bundleId": "p-67200987",
-        "fileName": "p-67200987.entry.js",
+        "bundleId": "p-08a99956",
+        "fileName": "p-08a99956.entry.js",
         "imports": [
           "p-0ed6e0c8.js"
         ],
-        "originalByteSize": 19701
+        "originalByteSize": 20016
       }
     ],
     "esm": [
@@ -169,7 +173,7 @@
         "imports": [
           "index-1c34ac95.js"
         ],
-        "originalByteSize": 19705
+        "originalByteSize": 20020
       }
     ],
     "es5": [
@@ -183,7 +187,7 @@
         "imports": [
           "index-1c34ac95.js"
         ],
-        "originalByteSize": 19705
+        "originalByteSize": 20020
       }
     ],
     "system": [
@@ -192,12 +196,12 @@
         "components": [
           "mds-modal"
         ],
-        "bundleId": "p-63a918d2.system",
-        "fileName": "p-63a918d2.system.entry.js",
+        "bundleId": "p-0d78ea55.system",
+        "fileName": "p-0d78ea55.system.entry.js",
         "imports": [
           "p-423dac35.system.js"
         ],
-        "originalByteSize": 21220
+        "originalByteSize": 21559
       }
     ],
     "commonjs": [
@@ -211,7 +215,7 @@
         "imports": [
           "index-7b5471f5.js"
         ],
-        "originalByteSize": 19788
+        "originalByteSize": 20103
       }
     ]
   },
@@ -581,6 +585,18 @@
               "annotation": "prop",
               "mode": "$"
             },
+            {
+              "name": "--mds-modal-window-radius",
+              "docs": "Set the border radius of the window",
+              "annotation": "prop",
+              "mode": "$"
+            },
+            {
+              "name": "--mds-modal-window-distance",
+              "docs": "Set the distance between the modal window and the screen bounds",
+              "annotation": "prop",
+              "mode": "$"
+            },
             {
               "name": "--mds-modal-window-shadow",
               "docs": "Set the box shadow of the window",
@@ -670,7 +686,6 @@
             "onClick",
             "name",
             "class",
-            "role",
             "part",
             "icon",
             "variant",
@@ -706,10 +721,12 @@
   "sourceGraph": {
     "./src/common/aria.ts": [],
     "./src/common/date.ts": [],
+    "./src/common/device.ts": [],
     "./src/common/file.ts": [],
     "./src/common/icon.ts": [],
     "./src/common/keyboard-manager.ts": [],
     "./src/common/locale.ts": [],
+    "./src/common/slot.ts": [],
     "./src/common/unit.ts": [],
     "./src/common/yugop/core.ts": [
       "./src/common/yugop/utils/math",
@@ -733,6 +750,7 @@
     "./src/components/mds-modal/test/mds-modal.stories.tsx": [
       "./src/components/mds-modal/meta/dictionary"
     ],
+    "./src/dictionary/animation.ts": [],
     "./src/dictionary/autocomplete.ts": [],
     "./src/dictionary/button.ts": [],
     "./src/dictionary/color.ts": [],
@@ -749,6 +767,7 @@
     "./src/dictionary/variant.ts": [],
     "./src/fixtures/cities.ts": [],
     "./src/fixtures/filenames.ts": [],
+    "./src/type/animation.ts": [],
     "./src/type/autocomplete.ts": [],
     "./src/type/button.ts": [],
     "./src/type/date.ts": [],

package/dist/types/common/aria.d.ts

@@ -1,5 +1,7 @@
 declare const unslugName: (name: string) => string;
 declare const setAttributeIfEmpty: (element: HTMLElement, attribute: string, value: string) => string;
+declare const removeAttributesIf: (element: HTMLElement, attribute: string, valueCheck: string | undefined, cleanAttributes: string | string[]) => boolean;
+declare const ifAttribute: (element: HTMLElement, attribute: string, valueCheck?: string) => boolean;
 declare const hashValue: (value: string) => string;
 declare const hashRandomValue: (value?: string) => string;
-export { unslugName, setAttributeIfEmpty, hashRandomValue, hashValue, };
+export { hashRandomValue, hashValue, removeAttributesIf, setAttributeIfEmpty, ifAttribute, unslugName, };

package/dist/types/common/device.d.ts

@@ -0,0 +1,2 @@
+declare const isMobileDevice: () => boolean;
+export { isMobileDevice, };

package/dist/types/common/slot.d.ts

@@ -0,0 +1,2 @@
+declare const hasSlottedElements: (el: HTMLElement, name?: string) => boolean;
+export { hasSlottedElements, };

package/dist/types/components/mds-modal/test/mds-modal.stories.d.ts

@@ -5,7 +5,6 @@ declare const _default: {
             description: string;
             type: {
                 name: string;
-                required: boolean;
             };
         };
         position: {
@@ -16,12 +15,13 @@ declare const _default: {
             options: string[];
             type: {
                 name: string;
-                required: boolean;
             };
         };
     };
 };
 export default _default;
 export declare const Default: any;
-export declare const CustomWindow: any;
+export declare const DefaultWindowCustomized: any;
+export declare const CustomWindowElement: any;
+export declare const Interactive: any;
 export declare const ARIATest: any;

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

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

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

@@ -1,2 +1,4 @@
+declare const typographyTagDictionary: string[];
+declare const typographyHeadingTagDictionary: string[];
 declare const truncateDictionary: string[];
-export { truncateDictionary, };
+export { truncateDictionary, typographyHeadingTagDictionary, typographyTagDictionary, };

package/dist/types/fixtures/filenames.d.ts

@@ -1,2 +1,63 @@
 declare const filesList: string[];
-export { filesList, };
+declare const namedFilesList: {
+    '7z': string;
+    'No extension file': string;
+    'png with URL': string;
+    ace: string;
+    ai: string;
+    db: string;
+    default: string;
+    dmg: string;
+    doc: string;
+    docm: string;
+    docx: string;
+    eml: string;
+    eps: string;
+    exe: string;
+    flac: string;
+    gif: string;
+    htm: string;
+    html: string;
+    jpe: string;
+    jpeg: string;
+    jpg: string;
+    js: string;
+    json: string;
+    jsx: string;
+    m2v: string;
+    mp2: string;
+    mp3: string;
+    mp4: string;
+    mp4v: string;
+    mpeg: string;
+    mpg4: string;
+    mpg: string;
+    mpga: string;
+    odf: string;
+    odp: string;
+    ods: string;
+    odt: string;
+    ole: string;
+    p7m: string;
+    pdf: string;
+    php: string;
+    png: string;
+    ppt: string;
+    rar: string;
+    rtf: string;
+    sass: string;
+    shtml: string;
+    svg: string;
+    tar: string;
+    ts: string;
+    tsd: string;
+    txt: string;
+    wav: string;
+    webp: string;
+    xar: string;
+    xls: string;
+    xlsx: string;
+    xml: string;
+    zip: string;
+};
+export { filesList, namedFilesList, };

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

@@ -0,0 +1 @@
+export type HorizontalActionsAnimationType = 'fade' | 'slide';

package/dist/types/type/file-types.d.ts

@@ -1 +1 @@
-export type ExtensionSuffixType = '7z' | 'ace' | 'ai' | 'db' | 'default' | 'dmg' | 'doc' | 'docm' | 'docx' | 'eml' | 'eps' | 'exe' | 'flac' | 'gif' | 'heic' | 'htm' | 'html' | 'jpe' | 'jpeg' | 'jpg' | 'js' | 'json' | 'jsx' | 'm2v' | 'mp2' | 'mp3' | 'mp4' | 'mp4v' | 'mpeg' | 'mpg' | 'mpg4' | 'mpga' | 'odp' | 'ods' | 'odt' | 'pdf' | 'php' | 'png' | 'ppt' | 'rar' | 'rtf' | 'sass' | 'shtml' | 'svg' | 'tar' | 'tiff' | 'ts' | 'txt' | 'wav' | 'webp' | 'xar' | 'xls' | 'xlsx' | 'zip';
+export type ExtensionSuffixType = '7z' | 'ace' | 'ai' | 'db' | 'default' | 'dmg' | 'doc' | 'docm' | 'docx' | 'eml' | 'eps' | 'exe' | 'flac' | 'gif' | 'heic' | 'htm' | 'html' | 'jpe' | 'jpeg' | 'jpg' | 'js' | 'json' | 'jsx' | 'm2v' | 'mp2' | 'mp3' | 'mp4' | 'mp4v' | 'mpeg' | 'mpg' | 'mpg4' | 'mpga' | 'odf' | 'odp' | 'ods' | 'odt' | 'odt' | 'ole' | 'p7m' | 'pdf' | 'php' | 'png' | 'ppt' | 'rar' | 'rtf' | 'sass' | 'shtml' | 'svg' | 'tar' | 'tiff' | 'ts' | 'tsd' | 'txt' | 'wav' | 'webp' | 'xar' | 'xls' | 'xlsx' | 'xml' | 'zip';

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

@@ -1 +1,3 @@
+export type TypographyTagType = 'abbr' | 'address' | 'article' | 'b' | 'bdo' | 'blockquote' | 'cite' | 'code' | 'dd' | 'del' | 'details' | 'dfn' | 'div' | 'dl' | 'dt' | 'em' | 'figcaption' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'i' | 'ins' | 'kbd' | 'label' | 'legend' | 'li' | 'mark' | 'ol' | 'p' | 'pre' | 'q' | 'rb' | 'rt' | 'ruby' | 's' | 'samp' | 'small' | 'span' | 'strong' | 'sub' | 'summary' | 'sup' | 'time' | 'u' | 'ul' | 'var';
+export type TypographyHeadingTagType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 export type TypographyTruncateType = 'all' | 'none' | 'word';

package/dist/types/type/variant-file-format.d.ts

@@ -1,5 +1,5 @@
 import { ThemeFullVariantType } from "./variant";
-type FileFormat = 'archive' | 'attachment' | 'audio' | 'code' | 'data' | 'document' | 'email' | 'executable' | 'image' | 'markup' | 'slide' | 'spreadsheet' | 'text' | 'vector' | 'video';
+type FileFormat = 'archive' | 'attachment' | 'audio' | 'certificate' | 'code' | 'data' | 'document' | 'email' | 'executable' | 'image' | 'markup' | 'slide' | 'spreadsheet' | 'text' | 'vector' | 'video';
 interface FileFormatVariant {
     icon: string;
     variant: ThemeFullVariantType;

package/documentation.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-11-25T16:00:58",
+  "timestamp": "2024-12-19T14:37:09",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.22.2",
@@ -225,11 +225,21 @@
           "annotation": "prop",
           "docs": "Set the background color of the window"
         },
+        {
+          "name": "--mds-modal-window-distance",
+          "annotation": "prop",
+          "docs": "Set the distance between the modal window and the screen bounds"
+        },
         {
           "name": "--mds-modal-window-overflow",
           "annotation": "prop",
           "docs": "Set the overflow of the window"
         },
+        {
+          "name": "--mds-modal-window-radius",
+          "annotation": "prop",
+          "docs": "Set the border radius of the window"
+        },
         {
           "name": "--mds-modal-window-shadow",
           "annotation": "prop",
@@ -438,7 +448,7 @@
       "path": "src/components/mds-dropdown/meta/event-detail.ts"
     },
     "src/type/file-types.ts::ExtensionSuffixType": {
-      "declaration": "export type ExtensionSuffixType =\n  | '7z'\n  | 'ace'\n  | 'ai'\n  | 'db'\n  | 'default'\n  | 'dmg'\n  | 'doc'\n  | 'docm'\n  | 'docx'\n  | 'eml'\n  | 'eps'\n  | 'exe'\n  | 'flac'\n  | 'gif'\n  | 'heic'\n  | 'htm'\n  | 'html'\n  | 'jpe'\n  | 'jpeg'\n  | 'jpg'\n  | 'js'\n  | 'json'\n  | 'jsx'\n  | 'm2v'\n  | 'mp2'\n  | 'mp3'\n  | 'mp4'\n  | 'mp4v'\n  | 'mpeg'\n  | 'mpg'\n  | 'mpg4'\n  | 'mpga'\n  | 'odp'\n  | 'ods'\n  | 'odt'\n  | 'pdf'\n  | 'php'\n  | 'png'\n  | 'ppt'\n  | 'rar'\n  | 'rtf'\n  | 'sass'\n  | 'shtml'\n  | 'svg'\n  | 'tar'\n  | 'tiff'\n  | 'ts'\n  | 'txt'\n  | 'wav'\n  | 'webp'\n  | 'xar'\n  | 'xls'\n  | 'xlsx'\n  | 'zip'",
+      "declaration": "export type ExtensionSuffixType =\n  | '7z'\n  | 'ace'\n  | 'ai'\n  | 'db'\n  | 'default'\n  | 'dmg'\n  | 'doc'\n  | 'docm'\n  | 'docx'\n  | 'eml'\n  | 'eps'\n  | 'exe'\n  | 'flac'\n  | 'gif'\n  | 'heic'\n  | 'htm'\n  | 'html'\n  | 'jpe'\n  | 'jpeg'\n  | 'jpg'\n  | 'js'\n  | 'json'\n  | 'jsx'\n  | 'm2v'\n  | 'mp2'\n  | 'mp3'\n  | 'mp4'\n  | 'mp4v'\n  | 'mpeg'\n  | 'mpg'\n  | 'mpg4'\n  | 'mpga'\n  | 'odf'\n  | 'odp'\n  | 'ods'\n  | 'odt'\n  | 'odt'\n  | 'ole'\n  | 'p7m'\n  | 'pdf'\n  | 'php'\n  | 'png'\n  | 'ppt'\n  | 'rar'\n  | 'rtf'\n  | 'sass'\n  | 'shtml'\n  | 'svg'\n  | 'tar'\n  | 'tiff'\n  | 'ts'\n  | 'tsd'\n  | 'txt'\n  | 'wav'\n  | 'webp'\n  | 'xar'\n  | 'xls'\n  | 'xlsx'\n  | 'xml'\n  | 'zip'",
       "docstring": "",
       "path": "src/type/file-types.ts"
     },
@@ -677,11 +687,6 @@
       "docstring": "",
       "path": "src/components/mds-progress/meta/types.ts"
     },
-    "src/type/date.ts::ISO8601Date": {
-      "declaration": "type ISO8601Date = ISO8601DateFormat<string, 'ISO8601Date'>",
-      "docstring": "",
-      "path": "src/type/date.ts"
-    },
     "src/components/mds-push-notification/meta/types.ts::NotificationDateFormatType": {
       "declaration": "string",
       "docstring": "",
@@ -697,6 +702,11 @@
       "docstring": "",
       "path": "src/components/mds-push-notification/meta/event-detail.ts"
     },
+    "src/type/text.ts::TypographyHeadingTagType": {
+      "declaration": "export type TypographyHeadingTagType =\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'",
+      "docstring": "",
+      "path": "src/type/text.ts"
+    },
     "src/components/mds-stepper-bar/meta/event-detail.ts::MdsStepperBarEventDetail": {
       "declaration": "export interface MdsStepperBarEventDetail {\n  step: number\n  value: string\n}",
       "docstring": "",
@@ -707,6 +717,11 @@
       "docstring": "",
       "path": "src/components/mds-stepper-bar-item/meta/event-detail.ts"
     },
+    "src/type/animation.ts::HorizontalActionsAnimationType": {
+      "declaration": "export type HorizontalActionsAnimationType =\n  | 'fade'\n  | 'slide'",
+      "docstring": "",
+      "path": "src/type/animation.ts"
+    },
     "src/components/mds-tab/meta/event-detail.ts::MdsTabEventDetail": {
       "declaration": "export interface MdsTabEventDetail {\n  id: number\n  value?: string\n}",
       "docstring": "",
@@ -727,8 +742,18 @@
       "docstring": "",
       "path": "src/components/mds-tab-item/meta/event-detail.ts"
     },
+    "src/components/mds-table/meta/event-detail.ts::MdsTableSelectionEventDetail": {
+      "declaration": "export interface MdsTableSelectionEventDetail {\n  rows: MdsTableRowSelection[]\n}",
+      "docstring": "",
+      "path": "src/components/mds-table/meta/event-detail.ts"
+    },
+    "src/components/mds-table/meta/type.ts::MdsTableRowSelection": {
+      "declaration": "{\n  index: number\n  value?: string | number\n}",
+      "docstring": "",
+      "path": "src/components/mds-table/meta/type.ts"
+    },
     "src/components/mds-table-header-cell/meta/types.ts::SortDirectionType": {
-      "declaration": "export type SortDirectionType =\n  | 'asc'\n  | 'desc'\n  | 'none'",
+      "declaration": "export type SortDirectionType =\n  | 'ascending'\n  | 'descending'\n  | 'none'",
       "docstring": "",
       "path": "src/components/mds-table-header-cell/meta/types.ts"
     },
@@ -737,10 +762,10 @@
       "docstring": "",
       "path": "src/components/mds-text/meta/types.ts"
     },
-    "src/components/mds-text/meta/types.ts::TypographyTagType": {
+    "src/type/text.ts::TypographyTagType": {
       "declaration": "export type TypographyTagType =\n  | 'abbr'\n  | 'address'\n  | 'article'\n  | 'b'\n  | 'bdo'\n  | 'blockquote'\n  | 'cite'\n  | 'code'\n  | 'dd'\n  | 'del'\n  | 'details'\n  | 'dfn'\n  | 'div'\n  | 'dl'\n  | 'dt'\n  | 'em'\n  | 'figcaption'\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  | 'i'\n  | 'ins'\n  | 'kbd'\n  | 'label'\n  | 'legend'\n  | 'li'\n  | 'mark'\n  | 'ol'\n  | 'p'\n  | 'pre'\n  | 'q'\n  | 'rb'\n  | 'rt'\n  | 'ruby'\n  | 's'\n  | 'samp'\n  | 'small'\n  | 'span'\n  | 'strong'\n  | 'sub'\n  | 'summary'\n  | 'sup'\n  | 'time'\n  | 'u'\n  | 'ul'\n  | 'var'",
       "docstring": "",
-      "path": "src/components/mds-text/meta/types.ts"
+      "path": "src/type/text.ts"
     },
     "src/type/variant.ts::ThemeLuminanceVariantType": {
       "declaration": "export type ThemeLuminanceVariantType =\n  | 'dark'\n  | 'light'",

package/package.json

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

package/readme.md

@@ -49,7 +49,9 @@ This is a web-component from Maggioli Design System [Magma](https://magma.maggio
 | `--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/common/aria.ts

@@ -20,6 +20,24 @@ const setAttributeIfEmpty = (element: HTMLElement, attribute: string, value: str
   return value
 }
 
+const removeAttributesIf = (element: HTMLElement, attribute: string, valueCheck: string = 'true', cleanAttributes: string | string[]): boolean => {
+  if (ifAttribute(element, attribute, valueCheck)) {
+    const attributesList = Array.isArray(cleanAttributes) ? cleanAttributes : [cleanAttributes]
+    attributesList.forEach(attributeToRemove => {
+      element.removeAttribute(attributeToRemove)
+    })
+    return true
+  }
+  return false
+}
+
+const ifAttribute = (element: HTMLElement, attribute: string, valueCheck: string = 'true'): boolean => {
+  if (element.hasAttribute(attribute) && element.getAttribute(attribute) === valueCheck) {
+    return true
+  }
+  return false
+}
+
 const hashValue = (value: string): string => `${value}-${hash(value)}`
 
 const hashRandomValue = (value?: string): string => {
@@ -32,8 +50,10 @@ const hashRandomValue = (value?: string): string => {
 }
 
 export {
-  unslugName,
-  setAttributeIfEmpty,
   hashRandomValue,
   hashValue,
+  removeAttributesIf,
+  setAttributeIfEmpty,
+  ifAttribute,
+  unslugName,
 }

package/src/common/device.ts

@@ -0,0 +1,9 @@
+const isMobileDevice = (): boolean => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const userAgent = navigator.userAgent || navigator.vendor || (window as any).opera
+  return /android|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent)
+}
+
+export {
+  isMobileDevice,
+}

package/src/common/keyboard-manager.ts

@@ -36,14 +36,14 @@ export class KeyboardManager {
 
   attachEscapeBehavior = (callback: () => void): void => {
     this.escapeCallback = callback
-    if (window !== undefined) {
+    if (typeof window !== 'undefined') {
       window.addEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this))
     }
   }
 
   detachEscapeBehavior = (): void => {
     this.escapeCallback = () => { return }
-    if (window !== undefined) {
+    if (typeof window !== 'undefined') {
       window.removeEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this))
     }
   }

package/src/common/slot.ts

@@ -0,0 +1,15 @@
+const hasSlottedElements = (el: HTMLElement, name?: string): boolean => {
+  let query = 'slot'
+  if (name) {
+    query = `slot[name=${name}]`
+  }
+  const slot: HTMLSlotElement = el.shadowRoot?.querySelector(query) as HTMLSlotElement
+  if (slot) {
+    return slot.assignedNodes().length > 0
+  }
+  return false
+}
+
+export {
+  hasSlottedElements,
+}

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

@@ -4,7 +4,8 @@
 }
 
 :host([position="left"]) .window {
-  height: 100dvh;
+  height: 100%;
+  max-height: calc(100dvh - calc(var(--mds-modal-window-distance) * 2));
   max-width: calc(100vw - 80px);
 }
 

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

@@ -4,7 +4,8 @@
 }
 
 :host([position="right"]) .window {
-  height: 100dvh;
+  height: 100%;
+  max-height: calc(100dvh - calc(var(--mds-modal-window-distance) * 2));
   max-width: calc(100vw - 80px);
 }
 

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

@@ -1,14 +1,4 @@
-:host {
-  @apply
-    mobile:p-400
-    p-800;
-}
-
 :host .window {
-  @apply
-    mobile:-m-400
-    -m-800;
-
   transition-delay: 0s, calc(var(--mds-modal-transition-duration) / 2);
 }
 

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

@@ -10,6 +10,8 @@
  * @prop --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`.
  * @prop --mds-modal-window-background: Set the background color of the window
  * @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-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
  */
@@ -23,7 +25,9 @@
   --mds-modal-transition-outro-ease: theme('transitionTimingFunction.in-out-quint');
   --mds-modal-window-background: theme('colors.tone-neutral');
   --mds-modal-window-overflow: auto;
+  --mds-modal-window-radius: 0;
   --mds-modal-window-shadow: theme('boxShadow.2xl');
+  --mds-modal-window-distance: 0;
   --mds-modal-z-index: var(--magma-modal-z-index);
 
   @apply ease-in-out-expo;
@@ -76,9 +80,11 @@
   @apply gap-0;
 
   background-color: var(--mds-modal-window-background);
+  border-radius: var(--mds-modal-window-radius);
   box-shadow: var(--mds-modal-window-shadow);
   display: grid;
   grid-template-rows: 1fr;
+  margin: var(--mds-modal-window-distance);
   overflow: var(--mds-modal-window-overflow);
 }
 

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

@@ -51,6 +51,7 @@ export class MdsModal {
   @Event({ bubbles: true, composed: true, eventName: 'mdsModalHide' }) hideEvent: EventEmitter<void>
 
   private updateCSSCustomProps = (): void => {
+    if (typeof window === 'undefined') return
     const elementStyles = window.getComputedStyle(this.host)
     this.cssTransitionDuration = elementStyles.getPropertyValue('--mds-modal-transition-duration') ?? '500'
   }
@@ -86,7 +87,7 @@ export class MdsModal {
     this.window = this.host.querySelector('[slot="window"]') !== null
 
     if (this.window) {
-      this.host.querySelector('[slot="window"]')?.setAttribute('role', 'modal')
+      this.host.querySelector('[slot="window"]')?.setAttribute('role', 'dialog')
     }
   }
 
@@ -132,7 +133,7 @@ export class MdsModal {
       <Host aria-modal={clsx(this.opened ? 'true' : 'false' )} onClick={(e: Event) => { this.closeModal(e) }}>
         { this.window
           ? <slot name="window"/>
-          : <div class={clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`)} role="dialog" part="window">
+          : <div class={clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`)} part="window">
             { this.top &&
               <slot name="top"/>
             }