@maggioli-design-system/mds-modal 4.7.3 → 4.9.0

package/documentation.json

@@ -1,9 +1,9 @@
 {
-  "timestamp": "2024-01-10T08:00:22",
+  "timestamp": "2024-02-09T14:18:39",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.9.1",
-    "typescriptVersion": "5.2.2"
+    "version": "4.10.0",
+    "typescriptVersion": "5.3.3"
   },
   "components": [
     {
@@ -193,8 +193,18 @@
       "dependents": [
         "mds-header"
       ],
-      "dependencies": [],
+      "dependencies": [
+        "mds-button"
+      ],
       "dependencyGraph": {
+        "mds-modal": [
+          "mds-button"
+        ],
+        "mds-button": [
+          "mds-spinner",
+          "mds-icon",
+          "mds-text"
+        ],
         "mds-header": [
           "mds-modal"
         ]
@@ -222,6 +232,16 @@
       "docstring": "",
       "path": "src/components/mds-accordion-timer-item/meta/event-detail.ts"
     },
+    "src/type/variant.ts::ToneMinimalVariantType": {
+      "declaration": "export type ToneMinimalVariantType =\n| 'strong'\n| 'weak'",
+      "docstring": "",
+      "path": "src/type/variant.ts"
+    },
+    "src/type/variant.ts::ThemeFullVariantAvatarType": {
+      "declaration": "export type ThemeFullVariantAvatarType =\n  | 'amaranth'\n  | 'aqua'\n  | 'blue'\n  | 'error'\n  | 'green'\n  | 'info'\n  | 'lime'\n  | 'orange'\n  | 'orchid'\n  | 'primary'\n  | 'sky'\n  | 'success'\n  | 'violet'\n  | 'warning'\n  | 'yellow'",
+      "docstring": "",
+      "path": "src/type/variant.ts"
+    },
     "src/type/variant.ts::ThemeFullVariantType": {
       "declaration": "export type ThemeFullVariantType =\n  | 'amaranth'\n  | 'aqua'\n  | 'blue'\n  | 'dark'\n  | 'error'\n  | 'green'\n  | 'info'\n  | 'light'\n  | 'lime'\n  | 'orange'\n  | 'orchid'\n  | 'sky'\n  | 'success'\n  | 'violet'\n  | 'warning'\n  | 'yellow'",
       "docstring": "",
@@ -327,16 +347,26 @@
       "docstring": "",
       "path": "src/components/mds-dropdown/meta/event-detail.ts"
     },
-    "src/components/mds-file/meta/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  | '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  | 'ts'\n  | 'txt'\n  | 'wav'\n  | 'xar'\n  | 'xls'\n  | 'xlsx'\n  | 'zip'",
+    "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'",
       "docstring": "",
-      "path": "src/components/mds-file/meta/types.ts"
+      "path": "src/type/file-types.ts"
     },
     "src/components/mds-file/meta/event-detail.ts::MdsFileEventDetail": {
       "declaration": "export interface MdsFileEventDetail {\n  description: string\n  extension: string\n  filename: string\n  target: HTMLMdsFileElement\n  type: string\n}",
       "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: HTMLMdsFileElement\n}",
+      "docstring": "",
+      "path": "src/components/mds-file-preview/meta/event-detail.ts"
+    },
     "src/components/mds-filter/meta/event-detail.ts::MdsFilterEventDetail": {
       "declaration": "export interface MdsFilterEventDetail {\n  children: NodeListOf<HTMLMdsFilterItemElement>\n  value: string\n}",
       "docstring": "",
@@ -472,6 +502,11 @@
       "docstring": "",
       "path": "src/type/input.ts"
     },
+    "src/components/mds-input-upload/meta/types.ts::AttachmentSort": {
+      "declaration": "enum AttachmentSort {\n  status = 'status',\n  date = 'date',\n}",
+      "docstring": "",
+      "path": "src/components/mds-input-upload/meta/types.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": "",
@@ -512,6 +547,11 @@
       "docstring": "",
       "path": "src/components/mds-progress/meta/types.ts"
     },
+    "src/components/mds-push-notification/meta/types.ts::NotificationPreviewType": {
+      "declaration": "export type NotificationPreviewType =\n  | 'avatar'\n  | 'image'",
+      "docstring": "",
+      "path": "src/components/mds-push-notification/meta/types.ts"
+    },
     "src/components/mds-stepper-bar/meta/event-detail.ts::MdsStepperBarEventDetail": {
       "declaration": "export interface MdsStepperBarEventDetail {\n  step: number\n  value: string\n}",
       "docstring": "",
@@ -523,7 +563,7 @@
       "path": "src/components/mds-stepper-bar-item/meta/event-detail.ts"
     },
     "src/components/mds-tab/meta/event-detail.ts::MdsTabEventDetail": {
-      "declaration": "export interface MdsTabEventDetail {\n  id: number\n}",
+      "declaration": "export interface MdsTabEventDetail {\n  id: number\n  value?: string\n}",
       "docstring": "",
       "path": "src/components/mds-tab/meta/event-detail.ts"
     },
@@ -537,6 +577,16 @@
       "docstring": "",
       "path": "src/type/typography.ts"
     },
+    "src/components/mds-tab-item/meta/event-detail.ts::MdsTabItemEventDetail": {
+      "declaration": "export interface MdsTabItemEventDetail {\n  target: HTMLMdsTabItemElement\n  value?: string\n}",
+      "docstring": "",
+      "path": "src/components/mds-tab-item/meta/event-detail.ts"
+    },
+    "src/components/mds-text/meta/types.ts::TextAnimationType": {
+      "declaration": "export type TextAnimationType =\n  | 'none'\n  | 'yugop'",
+      "docstring": "",
+      "path": "src/components/mds-text/meta/types.ts"
+    },
     "src/components/mds-text/meta/types.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": "",
@@ -547,11 +597,6 @@
       "docstring": "",
       "path": "src/type/variant.ts"
     },
-    "src/type/variant.ts::ToneMinimalVariantType": {
-      "declaration": "export type ToneMinimalVariantType =\n| 'strong'\n| 'weak'",
-      "docstring": "",
-      "path": "src/type/variant.ts"
-    },
     "src/components/mds-toast/meta/types.ts::ToastPosition": {
       "declaration": "export type ToastPosition =\n  | 'top-left'\n  | 'top-center'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-center'\n  | 'bottom-right'",
       "docstring": "",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maggioli-design-system/mds-modal",
-  "version": "4.7.3",
+  "version": "4.9.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 JavaScirpt framework you are using.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -24,8 +24,9 @@
     "test": "stencil test --spec --e2e"
   },
   "dependencies": {
-    "@maggioli-design-system/styles": "14.1.0",
-    "@stencil/core": "4.9.1",
+    "@maggioli-design-system/mds-button": "4.16.0",
+    "@maggioli-design-system/styles": "14.2.1",
+    "@stencil/core": "4.10.0",
     "clsx": "2.1.0"
   },
   "license": "MIT",

package/readme.md

@@ -57,9 +57,17 @@ This is a web-component from Maggioli Design System [Magma](https://magma.maggio
 
  - [mds-header](../mds-header)
 
+### Depends on
+
+- [mds-button](../mds-button)
+
 ### Graph
 ```mermaid
 graph TD;
+  mds-modal --> mds-button
+  mds-button --> mds-spinner
+  mds-button --> mds-icon
+  mds-button --> mds-text
   mds-header --> mds-modal
   style mds-modal fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/src/common/file.ts

@@ -0,0 +1,63 @@
+import { fileExtensionsDictionary, ExtensionInfo } from '@dictionary/file-extensions'
+import { fileFormatsVariant } from '@type/variant-file-format'
+
+interface FileFormatsVariants {
+  color: string
+  icon: string
+  iconBackground: string
+  variant: string
+}
+
+const sanitizeFilename = (filename: string, error: string = 'Attribute "filename" is undefined.') => {
+  if (filename === undefined ) {
+    throw console.error(error)
+  }
+  if (filename.includes('/')) {
+    return filename.split('/').pop() ?? ''
+  }
+  return filename
+}
+
+const sanitizeSuffix = (rawFilename: string) => {
+  const filename = sanitizeFilename(rawFilename)
+  if (filename.includes('.')) {
+    return filename.split('.').pop() ?? ''
+  }
+  return filename
+}
+
+const getName = (rawFilename: string): string => {
+  const filename = sanitizeFilename(rawFilename)
+  if (filename.includes('.')) {
+    return filename.split('.')[0] ?? ''
+  }
+  return filename
+}
+
+const getSuffix = (rawFilename: string, suffixOverride?: string): string => {
+  const suffix = sanitizeSuffix(rawFilename)
+  const filename = sanitizeFilename(rawFilename)
+  if (suffixOverride !== null && suffixOverride !== undefined) {
+    return suffixOverride.toLowerCase()
+  }
+  if (suffix !== filename) {
+    return suffix
+  }
+  return 'default'
+}
+
+const getExtensionInfos = (rawFilename: string, suffixOverride?: string): ExtensionInfo => {
+  const suffix = getSuffix(rawFilename, suffixOverride).toLocaleLowerCase()
+  return fileExtensionsDictionary[suffix] ?? fileExtensionsDictionary.default
+}
+
+const getFormatsVariant = (rawFilename: string, suffixOverride?: string): FileFormatsVariants => {
+  return fileFormatsVariant[getExtensionInfos(rawFilename, suffixOverride).format]
+}
+
+export {
+  getExtensionInfos,
+  getFormatsVariant,
+  getSuffix,
+  getName,
+}

package/src/common/icon.ts

@@ -0,0 +1,25 @@
+const BASE64_SVG_ICON = 'data:image/svg+xml;base64,'
+const MARKUP_SVG_ICON = '<svg '
+
+const isIconFormatIsBase64 = (icon?: string): boolean => {
+  if (!icon) {
+    return false
+  }
+  return icon.startsWith(BASE64_SVG_ICON)
+}
+
+const isIconFormatIsSVG = (icon?: string): boolean => {
+  if (!icon) {
+    return false
+  }
+  return icon.startsWith(MARKUP_SVG_ICON)
+}
+
+
+
+export {
+  isIconFormatIsBase64,
+  isIconFormatIsSVG,
+  BASE64_SVG_ICON,
+  MARKUP_SVG_ICON,
+}

package/src/common/unit.ts

@@ -1,14 +1,33 @@
 const cssDurationToMilliseconds = (duration: string, defaultValue = 1000): number => {
+
+  if (duration.includes('ms')) {
+    return Number(duration.replace('ms', ''))
+  }
+
   if (duration.includes('s')) {
     return Number(duration.replace('s', '')) * 1000
   }
 
-  if (duration.includes('ms')) {
-    return Number(duration.replace('s', ''))
+  return defaultValue
+}
+
+const cssSizeToNumber = (size: string, defaultValue = 0): number => {
+  if (size.includes('px')) {
+    return Number(size.replace('px', ''))
+  }
+
+  if (size.includes('rem')) {
+    return Number(size.replace('rem', '')) * 16
   }
 
+  if (size.includes('em')) {
+    return Number(size.replace('em', '')) * 16
+  }
+  
   return defaultValue
 }
+
 export {
   cssDurationToMilliseconds,
+  cssSizeToNumber,
 }

package/src/common/yugop/core.ts

@@ -0,0 +1,47 @@
+import { generator } from './utils/prng'
+import { strToCharCodeArray } from './utils/string'
+import { randomSign, minMaxLooped } from './utils/math'
+const rand = generator()
+
+const random: (arg0: number, arg1: number) => () => number = (
+  base,
+  offset,
+) => () => (base + rand.range(0, offset)) * randomSign()
+
+export const generateRandomCharCodeArray: (
+  arg0: number,
+  arg1: number
+) => (arg0: string) => number[] = (base, offset) => str =>
+  strToCharCodeArray(str).map(random(base, offset))
+type Options = {
+  str: string
+  minCharCode: number
+  maxCharCode: number
+  placeholderChar: string
+  charStep: number
+}
+export const charCodeArrayToString: (
+  arg0: Options
+) => (arg0: number[]) => string = ({
+  str,
+  minCharCode,
+  maxCharCode,
+  placeholderChar,
+  charStep,
+}) => charCodes =>
+  charCodes.reduce((acc, item, index) => {
+    if (item !== 0) {
+      if (Math.abs(item) > charStep) {
+        return acc + placeholderChar
+      }
+
+      return (
+        acc +
+        String.fromCharCode(
+          minMaxLooped(minCharCode, maxCharCode)(str.charCodeAt(index) + item),
+        )
+      )
+    }
+
+    return acc + str.charAt(index)
+  }, '')

package/src/common/yugop/index.ts

@@ -0,0 +1,4 @@
+// taken from https://github.com/zenoplex/random-text
+
+// @flow
+export { default } from './random-text'

package/src/common/yugop/random-text.ts

@@ -0,0 +1,95 @@
+import { generateRandomCharCodeArray, charCodeArrayToString } from './core'
+import { noop } from './utils/noop'
+
+type Options = {
+  str: string
+  speed?: number
+  placeholderChar?: string
+  frameOffset?: number
+  charOffset?: number
+  charStep?: number
+  minCharCode?: number
+  maxCharCode?: number
+  onProgress?: (arg0: string) => void
+  onComplete?: (arg0: string) => void
+}
+
+class RandomText {
+  static defaults: Options = {
+    str: '',
+    speed: 2,
+    placeholderChar: '_',
+    frameOffset: 30,
+    charOffset: 20,
+    charStep: 10,
+    minCharCode: 32,
+    maxCharCode: 122,
+    onProgress: noop,
+    onComplete: noop,
+  }
+  str: string
+  speed: number
+  placeholderChar: string
+  frameOffset: number
+  charOffset: number
+  charStep: number
+  minCharCode: number
+  maxCharCode: number
+  onProgress: (...args: Array<string>) => string
+  onComplete: (...args: Array<string>) => string
+  rafId: number // TODO: should be #rafId for private
+
+  constructor (options: Options) {
+    Object.assign(this, { ...RandomText.defaults, ...options })
+  }
+
+  start = (): void => {
+    const { frameOffset, charOffset, str, speed } = this
+    const randoms = generateRandomCharCodeArray(frameOffset, charOffset)(str)
+    this.stop()
+    this.rafId = requestAnimationFrame(() => {
+      this.step(randoms, speed, speed)
+    })
+  }
+
+  stop (): void {
+    cancelAnimationFrame(this.rafId)
+  }
+
+  step (randoms: number[], stepCount: number, speed: number): void {
+    const {
+      str,
+      charStep,
+      minCharCode,
+      maxCharCode,
+      placeholderChar,
+      onProgress,
+      onComplete,
+    } = this
+    const stepArray = randoms.slice(0, stepCount)
+    const steppedArray = stepArray.map(item => {
+      if (item > 0) return item - 1
+      if (item < 0) return item + 1
+      return 0
+    })
+    const output = charCodeArrayToString({
+      str,
+      minCharCode,
+      maxCharCode,
+      placeholderChar,
+      charStep,
+    })(steppedArray)
+    const updatedRandoms = [...steppedArray, ...randoms.slice(stepCount)]
+    onProgress(output)
+
+    if (output !== str) {
+      this.rafId = requestAnimationFrame(() => {
+        this.step(updatedRandoms, stepCount + speed, speed)
+      })
+    } else {
+      onComplete(output)
+    }
+  }
+}
+
+export default RandomText

package/src/common/yugop/utils/math.ts

@@ -0,0 +1,21 @@
+import { generator } from './prng'
+
+const rand = generator()
+export const randomSign: () => number = () =>
+  (Math.round(Math.random()) - 0.5) * 2
+export const generateRandomNumbers: (
+  arg0: number
+) => (
+  arg0: number
+) => (arg0: number) => number[] = base => charOffset => length =>
+  [...Array(length)].map(
+    () => (base + rand.range(0, charOffset)) * randomSign(),
+  )
+export const minMaxLooped: (
+  arg0: number,
+  arg1: number
+) => (arg0: number) => number = (min, max) => value => {
+  if (value > max) return min + (value - max)
+  if (value < min) return max + (value - min)
+  return value
+}

package/src/common/yugop/utils/noop.ts

@@ -0,0 +1 @@
+export const noop: (...rest: unknown[]) => unknown = () => {}

package/src/common/yugop/utils/prng.ts

@@ -0,0 +1,35 @@
+const int32 = 2147483647
+
+const gen: (arg0: number) => number = v => (v * 16807) % int32
+
+const randomFloat: (arg0: number) => number = v => gen(v) / int32
+
+const randomInt: (arg0: number) => number = v => gen(v)
+
+type Generator = (
+  _?: number
+) => {
+  random: () => number
+  randomFloat: () => number
+  range: (min: number, max: number) => number
+  rangeFloat: (min: number, max: number) => number
+}
+export const generator: Generator = (seed = 1) => {
+  let value = seed < 1 ? 1 : seed
+
+  const next: () => number = () => {
+    value = randomInt(value)
+    return value
+  }
+
+  return {
+    random: () => next(),
+    randomFloat: () => randomFloat(next()),
+    range: (min, max) => {
+      const minimum = min - 0.4999
+      const maximum = max + 0.4999
+      return Math.round(minimum + (maximum - minimum) * randomFloat(next()))
+    },
+    rangeFloat: (min, max) => min + (max - min) * randomFloat(next()),
+  }
+}

package/src/common/yugop/utils/string.ts

@@ -0,0 +1,4 @@
+// export const strToCharCodeArray: string => number[] = str => str.split('').map(item => item.charCodeAt(0));
+
+export const strToCharCodeArray: (arg0: string) => number[] = str =>
+  str.split('').map(item => item.charCodeAt(0))

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

@@ -19,8 +19,8 @@
   @apply animate-left-opened;
 }
 
-:host( .to-left-opened ) .close,
-:host( .to-left-opened.to-left-outro ) .close {
+:host( .to-left-opened ) .button-close,
+:host( .to-left-opened.to-left-outro ) .button-close {
   @apply opacity-100;
 
   transform: translate(-24px, 24px) rotate(0);
@@ -31,11 +31,11 @@
   @apply animate-left-outro;
 }
 
-:host( .to-left-outro ) .close {
+:host( .to-left-outro ) .button-close {
   transform: translate(24px, 24px) rotate(-90deg);
 }
 
-:host( .to-left ) .close {
+:host( .to-left ) .button-close {
   @apply right-0;
 
   transform: translate(36px, 24px) rotate(90deg);

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

@@ -19,8 +19,8 @@
   @apply animate-right-opened;
 }
 
-:host( .to-right-opened ) .close,
-:host( .to-right-opened.to-right-outro ) .close {
+:host( .to-right-opened ) .button-close,
+:host( .to-right-opened.to-right-outro ) .button-close {
   @apply opacity-100;
 
   transform: translate(24px, 24px) rotate(0);
@@ -31,11 +31,11 @@
   @apply animate-right-outro;
 }
 
-:host( .to-right-outro ) .close {
+:host( .to-right-outro ) .button-close {
   transform: translate(-24px, 24px) rotate(90deg);
 }
 
-:host( .to-right ) .close {
+:host( .to-right ) .button-close {
   @apply left-0;
 
   transform: translate(-36px, 24px) rotate(-90deg);

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

@@ -60,25 +60,30 @@
   pointer-events: auto;
 }
 
-.close {
+.button-close {
   @apply
     duration-500
     ease-in-out-quart
-    h-900
     opacity-0
     rounded-full
-    text-4xl
-    top-0
-    w-900;
+    top-0;
 
-  cursor: pointer;
-  fill: inherit;
+  --mds-button-icon-color: theme('colors.tone-neutral');
+  --mds-button-background: transparent;
+
+  height: auto;
   position: absolute;
   transform: translate(0, 24px) rotate(90deg);
   transform-origin: center;
   transition-property: opacity, outline, outline-offset, transform;
 }
 
+.button-close::part(icon) {
+  @apply
+    h-900
+    w-900;
+}
+
 .window {
   @apply
     gap-0

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

@@ -138,7 +138,7 @@ export class MdsModal {
             }
           </div>
         }
-        { !this.window && <i innerHTML={miBaselineClose} tabindex="0" onClick={(e: Event) => { this.closeModal(e) }} class="svg close focus-bounce-light"/> }
+        { !this.window && <mds-button icon={miBaselineClose} onClick={(e: Event) => { this.closeModal(e) }} class="button-close"></mds-button> }
       </Host>
     )
   }

package/src/components/mds-modal/test/mds-modal.e2e.ts

@@ -16,17 +16,6 @@ describe('mds-modal', () => {
     expect(element.getAttribute('position')).toBe('right')
 
     expect(element).not.toHaveAttribute('opened')
-
-    expect(element.shadowRoot).toEqualHtml(`
-      <div class="window" part="window" role="dialog">
-        <slot></slot>
-      </div>
-      <i class="close focus-bounce-light svg" tabindex="0">
-        <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
-          <path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"></path>
-        </svg>
-      </i>
-    `)
   })
 
   it('renders opened', async () => {
@@ -35,18 +24,7 @@ describe('mds-modal', () => {
 
     const element = await page.find('mds-modal')
 
-    expect(element.getAttribute('opened')).not.toBe('false')
-
-    expect(element.shadowRoot).toEqualHtml(`
-      <div class="window" part="window" role="dialog">
-        <slot></slot>
-      </div>
-      <i class="close focus-bounce-light svg" tabindex="0">
-        <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
-          <path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"></path>
-        </svg>
-      </i>
-    `)
+    expect(element).toHaveAttribute('opened')
   })
 
   it('can be closed', async () => {