@maggioli-design-system/mds-modal 3.1.0 → 3.3.0

package/dist/stats.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2022-09-27T10:53:55",
+  "timestamp": "2023-01-20T18:23:55",
   "compiler": {
     "name": "node",
     "version": "18.3.0"
@@ -9,12 +9,13 @@
     "fsNamespace": "mds-modal",
     "components": 1,
     "entries": 1,
-    "bundles": 65,
+    "bundles": 66,
     "outputs": [
       {
         "name": "dist-collection",
-        "files": 24,
+        "files": 25,
         "generatedFiles": [
+          "./dist/collection/common/aria.js",
           "./dist/collection/components/mds-modal/mds-modal.js",
           "./dist/collection/components/mds-modal/meta/dictionary.js",
           "./dist/collection/components/mds-modal/meta/types.js",
@@ -55,17 +56,17 @@
         "name": "dist-lazy",
         "files": 35,
         "generatedFiles": [
-          "./dist/cjs/index-90939077.js",
+          "./dist/cjs/index-6de6438b.js",
           "./dist/cjs/index.cjs.js",
           "./dist/cjs/loader.cjs.js",
           "./dist/cjs/mds-modal.cjs.entry.js",
           "./dist/cjs/mds-modal.cjs.js",
-          "./dist/esm-es5/index-5dfae565.js",
+          "./dist/esm-es5/index-640a40d3.js",
           "./dist/esm-es5/index.js",
           "./dist/esm-es5/loader.js",
           "./dist/esm-es5/mds-modal.entry.js",
           "./dist/esm-es5/mds-modal.js",
-          "./dist/esm/index-5dfae565.js",
+          "./dist/esm/index-640a40d3.js",
           "./dist/esm/index.js",
           "./dist/esm/loader.js",
           "./dist/esm/mds-modal.entry.js",
@@ -75,21 +76,21 @@
           "./dist/mds-modal/index.esm.js",
           "./dist/mds-modal/mds-modal.esm.js",
           "./dist/mds-modal/mds-modal.js",
-          "./dist/mds-modal/p-19fa0f59.js",
-          "./dist/mds-modal/p-4288d1a7.system.entry.js",
+          "./dist/mds-modal/p-0f3e1d2d.system.js",
+          "./dist/mds-modal/p-2c61dab9.system.entry.js",
           "./dist/mds-modal/p-50ea2036.system.js",
-          "./dist/mds-modal/p-5935b9a5.system.js",
-          "./dist/mds-modal/p-9c47a964.system.js",
-          "./dist/mds-modal/p-f1135a2e.entry.js",
+          "./dist/mds-modal/p-6fde22cf.js",
+          "./dist/mds-modal/p-ba28961b.entry.js",
+          "./dist/mds-modal/p-bea21063.system.js",
           "./www/build/index.esm.js",
           "./www/build/mds-modal.esm.js",
           "./www/build/mds-modal.js",
-          "./www/build/p-19fa0f59.js",
-          "./www/build/p-4288d1a7.system.entry.js",
+          "./www/build/p-0f3e1d2d.system.js",
+          "./www/build/p-2c61dab9.system.entry.js",
           "./www/build/p-50ea2036.system.js",
-          "./www/build/p-5935b9a5.system.js",
-          "./www/build/p-9c47a964.system.js",
-          "./www/build/p-f1135a2e.entry.js"
+          "./www/build/p-6fde22cf.js",
+          "./www/build/p-ba28961b.entry.js",
+          "./www/build/p-bea21063.system.js"
         ]
       },
       {
@@ -122,12 +123,12 @@
         "components": [
           "mds-modal"
         ],
-        "bundleId": "p-f1135a2e",
-        "fileName": "p-f1135a2e.entry.js",
+        "bundleId": "p-ba28961b",
+        "fileName": "p-ba28961b.entry.js",
         "imports": [
-          "p-19fa0f59.js"
+          "p-6fde22cf.js"
         ],
-        "originalByteSize": 18965
+        "originalByteSize": 19835
       }
     ],
     "esm": [
@@ -139,9 +140,9 @@
         "bundleId": "mds-modal",
         "fileName": "mds-modal.entry.js",
         "imports": [
-          "index-5dfae565.js"
+          "index-640a40d3.js"
         ],
-        "originalByteSize": 18969
+        "originalByteSize": 19839
       }
     ],
     "es5": [
@@ -153,9 +154,9 @@
         "bundleId": "mds-modal",
         "fileName": "mds-modal.entry.js",
         "imports": [
-          "index-5dfae565.js"
+          "index-640a40d3.js"
         ],
-        "originalByteSize": 18969
+        "originalByteSize": 19839
       }
     ],
     "system": [
@@ -164,12 +165,12 @@
         "components": [
           "mds-modal"
         ],
-        "bundleId": "p-4288d1a7.system",
-        "fileName": "p-4288d1a7.system.entry.js",
+        "bundleId": "p-2c61dab9.system",
+        "fileName": "p-2c61dab9.system.entry.js",
         "imports": [
-          "p-9c47a964.system.js"
+          "p-0f3e1d2d.system.js"
         ],
-        "originalByteSize": 19710
+        "originalByteSize": 20742
       }
     ],
     "commonjs": [
@@ -181,9 +182,9 @@
         "bundleId": "mds-modal.cjs",
         "fileName": "mds-modal.cjs.entry.js",
         "imports": [
-          "index-90939077.js"
+          "index-6de6438b.js"
         ],
-        "originalByteSize": 19046
+        "originalByteSize": 19916
       }
     ]
   },
@@ -431,7 +432,7 @@
           "hasComponentDidRenderFn": true,
           "hasComponentDidUnloadFn": false,
           "hasConnectedCallbackFn": false,
-          "hasDisconnectedCallbackFn": false,
+          "hasDisconnectedCallbackFn": true,
           "hasElement": false,
           "hasEvent": true,
           "hasLifecycle": true,
@@ -468,9 +469,11 @@
           "hasWatchCallback": true,
           "isPlain": false,
           "htmlAttrNames": [
+            "aria-modal",
             "class",
             "onClick",
             "name",
+            "role",
             "innerHTML"
           ],
           "htmlTagNames": [
@@ -492,10 +495,11 @@
   ],
   "componentGraph": {
     "sc-mds-modal": [
-      "p-19fa0f59.js"
+      "p-6fde22cf.js"
     ]
   },
   "sourceGraph": {
+    "./src/common/aria.ts": [],
     "./src/components/mds-modal/mds-modal.tsx": [],
     "./src/components/mds-modal/meta/dictionary.ts": [],
     "./src/components/mds-modal/meta/types.ts": [],

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

@@ -0,0 +1,4 @@
+declare const unslugName: (name: string) => string;
+declare const setAttributeIfEmpty: (element: HTMLElement, attribute: string, value: string) => string;
+declare const hashValue: (value: string) => string;
+export { unslugName, setAttributeIfEmpty, hashValue, };

package/dist/types/components/mds-modal/meta/types.d.ts

@@ -1,2 +1,2 @@
-export declare type ModalPositionType = 'bottom' | 'center' | 'left' | 'right' | 'top';
-export declare type ModalAnimationStateType = 'intro' | 'outro';
+export type ModalPositionType = 'bottom' | 'center' | 'left' | 'right' | 'top';
+export type ModalAnimationStateType = 'intro' | 'outro';

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

@@ -24,3 +24,4 @@ declare const _default: {
 export default _default;
 export declare const Default: any;
 export declare const CustomWindow: any;
+export declare const ARIATest: any;

package/dist/types/stencil-public-runtime.d.ts

@@ -133,7 +133,7 @@ export interface ListenOptions {
      */
     passive?: boolean;
 }
-export declare type ListenTargetOptions = 'body' | 'document' | 'window';
+export type ListenTargetOptions = 'body' | 'document' | 'window';
 export interface StateDecorator {
     (): PropertyDecorator;
 }
@@ -214,14 +214,16 @@ export declare const State: StateDecorator;
  * https://stenciljs.com/docs/reactive-data#watch-decorator
  */
 export declare const Watch: WatchDecorator;
-export declare type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
-export declare type ErrorHandler = (err: any, element?: HTMLElement) => void;
+export type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
+export type ErrorHandler = (err: any, element?: HTMLElement) => void;
 /**
  * `setMode()` is used for libraries which provide multiple "modes" for styles.
  */
 export declare const setMode: (handler: ResolutionHandler) => void;
 /**
- * getMode
+ * `getMode()` is used for libraries which provide multiple "modes" for styles.
+ * @param ref a reference to the node to get styles for
+ * @returns the current mode or undefined, if not found
  */
 export declare function getMode<T = string | undefined>(ref: any): T;
 export declare function setPlatformHelpers(helpers: {
@@ -234,6 +236,9 @@ export declare function setPlatformHelpers(helpers: {
 /**
  * Get the base path to where the assets can be found. Use `setAssetPath(path)`
  * if the path needs to be customized.
+ * @param path the path to use in calculating the asset path. this value will be
+ * used in conjunction with the base asset path
+ * @returns the base path
  */
 export declare function getAssetPath(path: string): string;
 /**
@@ -246,22 +251,38 @@ export declare function getAssetPath(path: string): string;
  * `setAssetPath(document.currentScript.src)`, or using a bundler's replace plugin to
  * dynamically set the path at build time, such as `setAssetPath(process.env.ASSET_PATH)`.
  * But do note that this configuration depends on how your script is bundled, or lack of
- * bunding, and where your assets can be loaded from. Additionally custom bundling
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
  * will have to ensure the static assets are copied to its build directory.
+ * @param path the asset path to set
+ * @returns the set path
  */
 export declare function setAssetPath(path: string): string;
 /**
- * getElement
+ * Used to specify a nonce value that corresponds with an application's
+ * [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP).
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a `meta` tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) and will result in the same behavior.
+ * @param nonce The value to be used for the nonce attribute.
+ */
+export declare function setNonce(nonce: string): void;
+/**
+ * Retrieve a Stencil element for a given reference
+ * @param ref the ref to get the Stencil element for
+ * @returns a reference to the element
  */
 export declare function getElement(ref: any): HTMLStencilElement;
 /**
  * Schedules a new render of the given instance or element even if no state changed.
  *
- * Notice `forceUpdate()` is not syncronous and might perform the DOM render in the next frame.
+ * Notice `forceUpdate()` is not synchronous and might perform the DOM render in the next frame.
+ *
+ * @param ref the node/element to force the re-render of
  */
 export declare function forceUpdate(ref: any): void;
 /**
  * getRenderingRef
+ * @returns the rendering ref
  */
 export declare function getRenderingRef(): any;
 export interface HTMLStencilElement extends HTMLElement {
@@ -272,6 +293,8 @@ export interface HTMLStencilElement extends HTMLElement {
  * in the best moment to perform DOM mutation without causing layout thrashing.
  *
  * For further information: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing
+ *
+ * @param task the DOM-write to schedule
  */
 export declare function writeTask(task: RafCallback): void;
 /**
@@ -279,6 +302,8 @@ export declare function writeTask(task: RafCallback): void;
  * in the best moment to perform DOM reads without causing layout thrashing.
  *
  * For further information: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing
+ *
+ * @param task the DOM-read to schedule
  */
 export declare function readTask(task: RafCallback): void;
 /**
@@ -417,8 +442,44 @@ interface HostAttributes {
     ref?: (el: HTMLElement | null) => void;
     [prop: string]: any;
 }
+/**
+ * Utilities for working with functional Stencil components. An object
+ * conforming to this interface is passed by the Stencil runtime as the third
+ * argument to a functional component, allowing component authors to work with
+ * features like children.
+ *
+ * The children of a functional component will be passed as the second
+ * argument, so a functional component which uses these utils to transform its
+ * children might look like the following:
+ *
+ * ```ts
+ * export const AddClass: FunctionalComponent = (_, children, utils) => (
+ *  utils.map(children, child => ({
+ *    ...child,
+ *    vattrs: {
+ *      ...child.vattrs,
+ *      class: `${child.vattrs.class} add-class`
+ *    }
+ *  }))
+ * );
+ * ```
+ *
+ * For more see the Stencil documentation, here:
+ * https://stenciljs.com/docs/functional-components
+ */
 export interface FunctionalUtilities {
+    /**
+     * Utility for reading the children of a functional component at runtime.
+     * Since the Stencil runtime uses a different interface for children it is
+     * not recommendeded to read the children directly, and is preferable to use
+     * this utility to, for instance, perform a side effect for each child.
+     */
     forEach: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => void) => void;
+    /**
+     * Utility for transforming the children of a functional component. Given an
+     * array of children and a callback this will return a list of the results of
+     * passing each child to the supplied callback.
+     */
     map: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => ChildNode) => VNode[];
 }
 export interface FunctionalComponent<T = {}> {

package/dist/types/types/autocomplete.d.ts

@@ -1,2 +1,2 @@
-export declare type AutocompleteType = 'additional-name' | 'address' | 'address-level1' | 'address-level2' | 'address-level3' | 'address-level4' | 'address-line1' | 'address-line2' | 'address-line3' | 'bday' | 'bday-day' | 'bday-month' | 'bday-year' | 'cc-additional-name' | 'cc-csc' | 'cc-exp' | 'cc-exp-month' | 'cc-exp-year' | 'cc-family-name' | 'cc-family-name' | 'cc-given-name' | 'cc-name' | 'cc-number' | 'cc-type' | 'country' | 'country-name' | 'current-password' | 'email' | 'family-name' | 'given-name' | 'honorific-prefix' | 'honorific-suffix' | 'impp' | 'language' | 'name' | 'new-password' | 'nickname' | 'off' | 'on' | 'one-time-code' | 'organization' | 'organization-title' | 'photo' | 'postal-code' | 'sex' | 'street-address' | 'tel' | 'tel-area-code' | 'tel-country-code' | 'tel-extension' | 'tel-local' | 'tel-national' | 'transaction-amount' | 'transaction-currency' | 'url' | 'username';
-export declare type InputTextType = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'textarea' | 'time' | 'url';
+export type AutocompleteType = 'additional-name' | 'address' | 'address-level1' | 'address-level2' | 'address-level3' | 'address-level4' | 'address-line1' | 'address-line2' | 'address-line3' | 'bday' | 'bday-day' | 'bday-month' | 'bday-year' | 'cc-additional-name' | 'cc-csc' | 'cc-exp' | 'cc-exp-month' | 'cc-exp-year' | 'cc-family-name' | 'cc-family-name' | 'cc-given-name' | 'cc-name' | 'cc-number' | 'cc-type' | 'country' | 'country-name' | 'current-password' | 'email' | 'family-name' | 'given-name' | 'honorific-prefix' | 'honorific-suffix' | 'impp' | 'language' | 'name' | 'new-password' | 'nickname' | 'off' | 'on' | 'one-time-code' | 'organization' | 'organization-title' | 'photo' | 'postal-code' | 'sex' | 'street-address' | 'tel' | 'tel-area-code' | 'tel-country-code' | 'tel-extension' | 'tel-local' | 'tel-national' | 'transaction-amount' | 'transaction-currency' | 'url' | 'username';
+export type InputTextType = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'textarea' | 'time' | 'url';

package/dist/types/types/button.d.ts

@@ -1,4 +1,4 @@
-export declare type ButtonType = 'a' | 'button' | 'reset' | 'submit';
-export declare type ButtonSizeType = 'sm' | 'md' | 'lg' | 'xl';
-export declare type ButtonIconPositionType = 'left' | 'right';
-export declare type ButtonVariantType = 'primary' | 'dark' | 'light' | 'error' | 'info' | 'success' | 'warning';
+export type ButtonType = 'a' | 'button' | 'reset' | 'submit';
+export type ButtonSizeType = 'sm' | 'md' | 'lg' | 'xl';
+export type ButtonIconPositionType = 'left' | 'right';
+export type ButtonVariantType = 'primary' | 'dark' | 'light' | 'error' | 'info' | 'success' | 'warning';

package/dist/types/types/floating-ui.d.ts

@@ -1,2 +1,2 @@
-export declare type FloatingUIPlacement = 'bottom' | 'bottom-end' | 'bottom-start' | 'left' | 'left-end' | 'left-start' | 'right' | 'right-end' | 'right-start' | 'top' | 'top-end' | 'top-start';
-export declare type FloatingUIStrategy = 'absolute' | 'fixed';
+export type FloatingUIPlacement = 'bottom' | 'bottom-end' | 'bottom-start' | 'left' | 'left-end' | 'left-start' | 'right' | 'right-end' | 'right-start' | 'top' | 'top-end' | 'top-start';
+export type FloatingUIStrategy = 'absolute' | 'fixed';

package/dist/types/types/form-rel.d.ts

@@ -1 +1 @@
-export declare type FormRelType = 'external' | 'help' | 'license' | 'next' | 'nofollow' | 'noopener' | 'noreferrer' | 'opener' | 'prev' | 'search';
+export type FormRelType = 'external' | 'help' | 'license' | 'next' | 'nofollow' | 'noopener' | 'noreferrer' | 'opener' | 'prev' | 'search';

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

@@ -1 +1 @@
-export declare type InputTextType = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'textarea' | 'time' | 'url';
+export type InputTextType = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'textarea' | 'time' | 'url';

package/dist/types/types/input-value-type.d.ts

@@ -1 +1 @@
-export declare type InputValueType = null | number | string | undefined;
+export type InputValueType = null | number | string | undefined;

package/dist/types/types/loading.d.ts

@@ -1 +1 @@
-export declare type LoadingType = 'eager' | 'lazy';
+export type LoadingType = 'eager' | 'lazy';

package/dist/types/types/typography.d.ts

@@ -1,8 +1,8 @@
-export declare type TypographyType = 'action' | 'caption' | 'code' | 'detail' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'hack' | 'label' | 'option' | 'paragraph' | 'tip';
-export declare type TypographyVariants = 'title' | 'info' | 'read' | 'mono';
-export declare type TypographyTitleType = 'action' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-export declare type TypographyInfoType = 'caption' | 'detail' | 'label' | 'option' | 'paragraph' | 'tip';
-export declare type TypographyReadType = 'caption' | 'detail' | 'paragraph';
-export declare type TypographySmallerType = 'tip' | 'option';
-export declare type TypographyMonoType = 'code' | 'hack';
-export declare type TypographyTooltipType = 'caption' | 'detail' | 'tip';
+export type TypographyType = 'action' | 'caption' | 'snippet' | 'detail' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'hack' | 'label' | 'option' | 'paragraph' | 'tip';
+export type TypographyVariants = 'title' | 'info' | 'read' | 'code';
+export type TypographyTitleType = 'action' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type TypographyInfoType = 'caption' | 'detail' | 'label' | 'option' | 'paragraph' | 'tip';
+export type TypographyReadType = 'caption' | 'detail' | 'paragraph';
+export type TypographySmallerType = 'tip' | 'option';
+export type TypographyMonoType = 'snippet' | 'hack';
+export type TypographyTooltipType = 'caption' | 'detail' | 'tip';

package/dist/types/types/variant.d.ts

@@ -1,10 +1,10 @@
-export declare type ThemeStatusVariantType = 'error' | 'info' | 'success' | 'warning';
-export declare type ThemeVariantType = 'dark' | 'error' | 'info' | 'light' | 'primary' | 'success' | 'warning';
-export declare type ThemeFullVariantType = 'amaranth' | 'aqua' | 'blue' | 'dark' | 'error' | 'green' | 'info' | 'light' | 'lime' | 'orange' | 'orchid' | 'sky' | 'success' | 'violet' | 'warning' | 'yellow';
-export declare type ThemeLuminanceVariantType = 'dark' | 'light';
-export declare type LabelVariantType = 'amaranth' | 'aqua' | 'blue' | 'green' | 'lime' | 'orange' | 'orchid' | 'sky' | 'violet' | 'yellow';
-export declare type ActionVariantType = 'primary' | 'dark' | 'light';
-export declare type StateVariantType = 'disabled' | 'focused' | 'readonly';
-export declare type ToneVariantType = 'strong' | 'weak' | 'ghost' | 'quiet';
-export declare type ToneSimpleVariantType = 'strong' | 'weak' | 'quiet';
-export declare type ToneMinimalVariantType = 'strong' | 'weak';
+export type ThemeStatusVariantType = 'error' | 'info' | 'success' | 'warning';
+export type ThemeVariantType = 'dark' | 'error' | 'info' | 'light' | 'primary' | 'success' | 'warning';
+export type ThemeFullVariantType = 'amaranth' | 'aqua' | 'blue' | 'dark' | 'error' | 'green' | 'info' | 'light' | 'lime' | 'orange' | 'orchid' | 'sky' | 'success' | 'violet' | 'warning' | 'yellow';
+export type ThemeLuminanceVariantType = 'dark' | 'light';
+export type LabelVariantType = 'amaranth' | 'aqua' | 'blue' | 'green' | 'lime' | 'orange' | 'orchid' | 'sky' | 'violet' | 'yellow';
+export type ActionVariantType = 'primary' | 'dark' | 'light';
+export type StateVariantType = 'disabled' | 'focused' | 'readonly';
+export type ToneVariantType = 'strong' | 'weak' | 'ghost' | 'quiet';
+export type ToneSimpleVariantType = 'strong' | 'weak' | 'quiet';
+export type ToneMinimalVariantType = 'strong' | 'weak';

package/loader/index.d.ts

@@ -10,3 +10,12 @@ export interface CustomElementsDefineOptions {
 }
 export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): Promise<void>;
 export declare function applyPolyfills(): Promise<void>;
+
+/** 
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare function setNonce(nonce: string): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maggioli-design-system/mds-modal",
-  "version": "3.1.0",
+  "version": "3.3.0",
   "description": "mds-modal is a web-component from Maggioli Design System Magma, 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",
@@ -23,15 +23,15 @@
     "test": "stencil test --spec --e2e"
   },
   "dependencies": {
-    "@maggioli-design-system/styles": "^8.2.0",
-    "@stencil/core": "^2.18.0",
+    "@maggioli-design-system/styles": "^10.0.1",
+    "@stencil/core": "^2.22.1",
     "clsx": "^1.2.1"
   },
   "license": "MIT",
   "author": {
     "name": "Vittorio Vittori",
     "email": "vittorio.vittori@maggioli.it",
-    "url": "http://vit.to"
+    "url": "https://vitto.github.io/vit.to/"
   },
   "contributors": [
     {

package/src/common/aria.ts

@@ -0,0 +1,27 @@
+const hash = (s: string): string => {
+  let i: number, h: number
+  for (i = 0, h = 0; i < s.length; i ++) {
+    h = Math.imul(31, h) + s.charCodeAt(i) | 0
+  }
+  return h.toString()
+}
+
+const unslugName = (name: string): string => {
+  return name.split('/').slice(-1).pop().replace(/-/g, ' ')
+}
+
+const setAttributeIfEmpty = (element: HTMLElement, attribute: string, value: string): string => {
+  if (element.hasAttribute(attribute)) {
+    return element.getAttribute(attribute)
+  }
+  element.setAttribute(attribute, value)
+  return value
+}
+
+const hashValue = (value: string): string => `${value}-${hash(value)}`
+
+export {
+  unslugName,
+  setAttributeIfEmpty,
+  hashValue,
+}

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

@@ -41,6 +41,11 @@ export class MdsModal {
     if (this.position === null) {
       this.position = 'right'
     }
+
+    if (this.window) {
+      const modal = this.hostElement.querySelector('[slot="window"]')
+      modal.setAttribute('role', 'modal')
+    }
   }
 
   componentWillRender (): void {
@@ -55,6 +60,17 @@ export class MdsModal {
       this.hostElement.classList.add(this.animationName(this.animationState))
       window.clearTimeout(this.animationDeelay)
     }, 500)
+
+    if (this.opened) {
+      this.addKeyboardEscapeListener()
+      return
+    }
+
+    this.removeKeyboardEscapeListener()
+  }
+
+  disconnectedCallback (): void {
+    this.removeKeyboardEscapeListener()
   }
 
   private animationName = (customState: string = null, customPosition: string = null): string => {
@@ -69,10 +85,31 @@ export class MdsModal {
     this.hostElement.classList.remove(this.animationName('outro', oldValue))
   }
 
+  private checkKeyboardEscape = (event: KeyboardEvent): void => {
+    if (event.code === 'Escape') {
+      this.close.emit()
+    }
+  }
+
+  private addKeyboardEscapeListener (): void {
+    window.addEventListener('keydown', this.checkKeyboardEscape.bind(this))
+  }
+
+  private removeKeyboardEscapeListener (): void {
+    window.removeEventListener('keydown', this.checkKeyboardEscape.bind(this))
+  }
+
   @Watch('opened')
   openedChange (newValue: boolean): void {
     this.stateOpened = newValue
     window.clearTimeout(this.animationDeelay)
+
+    if (newValue) {
+      this.addKeyboardEscapeListener()
+      return
+    }
+
+    this.removeKeyboardEscapeListener()
   }
 
   /**
@@ -97,14 +134,12 @@ export class MdsModal {
 
   render () {
     return (
-      <Host class={clsx(
-        this.stateOpened && this.animationName('opened'),
-      )} onClick={(e: Event) => { this.closeModal(e) }}>
+      <Host aria-modal={clsx(this.opened ? 'true' : 'false' )} class={clsx(this.stateOpened && this.animationName('opened'))} 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' : ''}`)}>
+          <div class={clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`)} role="dialog">
             { this.top &&
               <slot name="top"/>
             }

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

@@ -9,9 +9,8 @@ describe('mds-modal', () => {
 
     // La riga seguente non è valida perché `animate-right-intro` viene impostato in `componentDidRender`
     // e quindi appena instanziato non è presente come classe
-    // expect(element).toHaveClasses(['animate-right', 'hydrated', 'animate-right-intro'])
-    expect(element).toHaveClasses(['animate-right', 'hydrated'])
-
+    expect(element).toHaveClass('animate-right')
+    expect(element).toHaveAttribute('hydrated')
     expect(element).toHaveAttribute('position')
 
     expect(element.getAttribute('position')).toBe('right')
@@ -19,7 +18,7 @@ describe('mds-modal', () => {
     expect(element).not.toHaveAttribute('opened')
 
     expect(element.shadowRoot).toEqualHtml(`
-      <div class="window">
+      <div class="window" role="dialog">
         <slot></slot>
       </div>
       <i class="close svg">
@@ -39,7 +38,7 @@ describe('mds-modal', () => {
     expect(element.getAttribute('opened')).not.toBe('false')
 
     expect(element.shadowRoot).toEqualHtml(`
-      <div class="window">
+      <div class="window" role="dialog">
         <slot></slot>
       </div>
       <i class="close svg">

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

@@ -1,5 +1,6 @@
 
 import { h } from '@stencil/core'
+import { useState } from 'react'
 import { modalPositionDictionary } from '../meta/dictionary'
 
 export default {
@@ -58,5 +59,24 @@ const CustomTemplate = args =>
     </mds-banner>
   </mds-modal>
 
+const AriaTemplate = () => {
+  // Click not working with reader
+  const [opened, setOpened] = useState(false)
+  window.addEventListener('close', () => { setOpened(false) })
+  return <div>
+    <mds-button onClick={() => setOpened(true) }>Apri modale</mds-button>
+    <mds-modal opened={opened} onClose={() => setOpened(false)}>
+      <mds-banner slot="window" class="max-w-xl mx-6" deletable headline="Action required">
+        <mds-text typography="detail">
+          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>
+        <mds-button slot="actions" variant="dark" tone="quiet" onClick={() => setOpened(false) }>Cancel</mds-button>
+        <mds-button slot="actions" variant="primary">Confirm</mds-button>
+      </mds-banner>
+    </mds-modal>
+  </div>
+}
+
 export const Default = Template.bind({})
 export const CustomWindow = CustomTemplate.bind({})
+export const ARIATest = AriaTemplate.bind({})