@maggioli-design-system/mds-modal 3.0.0 → 3.2.1

package/dist/mds-modal/p-931319fa.js

@@ -0,0 +1,2 @@
+let e,t,n=!1;const l={},s=e=>"object"==(e=typeof e)||"function"===e,o=(e,t,...n)=>{let l=null,o=!1,i=!1;const r=[],a=t=>{for(let n=0;n<t.length;n++)l=t[n],Array.isArray(l)?a(l):null!=l&&"boolean"!=typeof l&&((o="function"!=typeof e&&!s(l))&&(l+=""),o&&i?r[r.length-1].t+=l:r.push(o?c(null,l):l),i=o)};if(a(n),t){const e=t.className||t.class;e&&(t.class="object"!=typeof e?e:Object.keys(e).filter((t=>e[t])).join(" "))}const u=c(e,null);return u.l=t,r.length>0&&(u.o=r),u},c=(e,t)=>({i:0,u:e,t,h:null,o:null,l:null}),i={},r=e=>q(e).m,a=(e,t,n)=>{const l=r(e);return{emit:e=>u(l,t,{bubbles:!!(4&n),composed:!!(2&n),cancelable:!!(1&n),detail:e})}},u=(e,t,n)=>{const l=K.ce(t,n);return e.dispatchEvent(l),l},f=new WeakMap,d=e=>"sc-"+e.$,h=(e,t,n,l,o,c)=>{if(n!==l){let i=V(e,t),r=t.toLowerCase();if("class"===t){const t=e.classList,s=y(n),o=y(l);t.remove(...s.filter((e=>e&&!o.includes(e)))),t.add(...o.filter((e=>e&&!s.includes(e))))}else if(i||"o"!==t[0]||"n"!==t[1]){const r=s(l);if((i||r&&null!==l)&&!o)try{if(e.tagName.includes("-"))e[t]=l;else{const s=null==l?"":l;"list"===t?i=!1:null!=n&&e[t]==s||(e[t]=s)}}catch(e){}null==l||!1===l?!1===l&&""!==e.getAttribute(t)||e.removeAttribute(t):(!i||4&c||o)&&!r&&e.setAttribute(t,l=!0===l?"":l)}else t="-"===t[2]?t.slice(3):V(I,r)?r.slice(2):r[2]+t.slice(3),n&&K.rel(e,t,n,!1),l&&K.ael(e,t,l,!1)}},m=/\s/,y=e=>e?e.split(m):[],$=(e,t,n,s)=>{const o=11===t.h.nodeType&&t.h.host?t.h.host:t.h,c=e&&e.l||l,i=t.l||l;for(s in c)s in i||h(o,s,c[s],void 0,n,t.i);for(s in i)h(o,s,c[s],i[s],n,t.i)},p=(t,n,l)=>{const s=n.o[l];let o,c,i=0;if(null!==s.t)o=s.h=J.createTextNode(s.t);else if(o=s.h=J.createElement(s.u),$(null,s,!1),null!=e&&o["s-si"]!==e&&o.classList.add(o["s-si"]=e),s.o)for(i=0;i<s.o.length;++i)c=p(t,s,i),c&&o.appendChild(c);return o},b=(e,n,l,s,o,c)=>{let i,r=e;for(r.shadowRoot&&r.tagName===t&&(r=r.shadowRoot);o<=c;++o)s[o]&&(i=p(null,l,o),i&&(s[o].h=i,r.insertBefore(i,n)))},w=(e,t,n,l)=>{for(;t<=n;++t)(l=e[t])&&l.h.remove()},S=(e,t)=>e.u===t.u,g=(e,t)=>{const n=t.h=e.h,l=e.o,s=t.o,o=t.t;null===o?("slot"===t.u||$(e,t,!1),null!==l&&null!==s?((e,t,n,l)=>{let s,o=0,c=0,i=t.length-1,r=t[0],a=t[i],u=l.length-1,f=l[0],d=l[u];for(;o<=i&&c<=u;)null==r?r=t[++o]:null==a?a=t[--i]:null==f?f=l[++c]:null==d?d=l[--u]:S(r,f)?(g(r,f),r=t[++o],f=l[++c]):S(a,d)?(g(a,d),a=t[--i],d=l[--u]):S(r,d)?(g(r,d),e.insertBefore(r.h,a.h.nextSibling),r=t[++o],d=l[--u]):S(a,f)?(g(a,f),e.insertBefore(a.h,r.h),a=t[--i],f=l[++c]):(s=p(t&&t[c],n,c),f=l[++c],s&&r.h.parentNode.insertBefore(s,r.h));o>i?b(e,null==l[u+1]?null:l[u+1].h,n,l,c,u):c>u&&w(t,o,i)})(n,l,t,s):null!==s?(null!==e.t&&(n.textContent=""),b(n,null,t,s,0,s.length-1)):null!==l&&w(l,0,l.length-1)):e.t!==o&&(n.data=o)},j=(e,t)=>{t&&!e.p&&t["s-p"]&&t["s-p"].push(new Promise((t=>e.p=t)))},v=(e,t)=>{if(e.i|=16,!(4&e.i))return j(e,e.S),se((()=>M(e,t)));e.i|=512},M=(e,t)=>{const n=e.g;let l;return t&&(e.i|=256,e.j&&(e.j.map((([e,t])=>R(n,e,t))),e.j=null),l=R(n,"componentWillLoad")),l=W(l,(()=>R(n,"componentWillRender"))),W(l,(()=>k(e,n,t)))},k=async(e,t,n)=>{const l=e.m,s=l["s-rc"];n&&(e=>{const t=e.v,n=e.m,l=t.i,s=((e,t)=>{let n=d(t);const l=G.get(n);if(e=11===e.nodeType?e:J,l)if("string"==typeof l){let t,s=f.get(e=e.head||e);s||f.set(e,s=new Set),s.has(n)||(t=J.createElement("style"),t.innerHTML=l,e.insertBefore(t,e.querySelector("link")),s&&s.add(n))}else e.adoptedStyleSheets.includes(l)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,l]);return n})(n.shadowRoot?n.shadowRoot:n.getRootNode(),t);10&l&&(n["s-sc"]=s,n.classList.add(s+"-h"))})(e);C(e,t),s&&(s.map((e=>e())),l["s-rc"]=void 0);{const t=l["s-p"],n=()=>O(e);0===t.length?n():(Promise.all(t).then(n),e.i|=4,t.length=0)}},C=(n,l)=>{try{l=l.render(),n.i&=-17,n.i|=2,((n,l)=>{const s=n.m,r=n.v,a=n.M||c(null,null),u=(e=>e&&e.u===i)(l)?l:o(null,null,l);t=s.tagName,r.k&&(u.l=u.l||{},r.k.map((([e,t])=>u.l[t]=s[e]))),u.u=null,u.i|=4,n.M=u,u.h=a.h=s.shadowRoot||s,e=s["s-sc"],g(a,u)})(n,l)}catch(e){_(e,n.m)}return null},O=e=>{const t=e.m,n=e.S;R(e.g,"componentDidRender"),64&e.i||(e.i|=64,x(t),e.C(t),n||P()),e.p&&(e.p(),e.p=void 0),512&e.i&&le((()=>v(e,!1))),e.i&=-517},P=()=>{x(J.documentElement),le((()=>u(I,"appload",{detail:{namespace:"mds-modal"}})))},R=(e,t,n)=>{if(e&&e[t])try{return e[t](n)}catch(e){_(e)}},W=(e,t)=>e&&e.then?e.then(t):t(),x=e=>e.classList.add("hydrated"),E=(e,t,n)=>{if(t.O){e.watchers&&(t.P=e.watchers);const l=Object.entries(t.O),o=e.prototype;if(l.map((([e,[l]])=>{(31&l||2&n&&32&l)&&Object.defineProperty(o,e,{get(){return((e,t)=>q(this).R.get(t))(0,e)},set(n){((e,t,n,l)=>{const o=q(e),c=o.m,i=o.R.get(t),r=o.i,a=o.g;if(n=((e,t)=>null==e||s(e)?e:4&t?"false"!==e&&(""===e||!!e):1&t?e+"":e)(n,l.O[t][0]),(!(8&r)||void 0===i)&&n!==i&&(!Number.isNaN(i)||!Number.isNaN(n))&&(o.R.set(t,n),a)){if(l.P&&128&r){const e=l.P[t];e&&e.map((e=>{try{a[e](n,i,t)}catch(e){_(e,c)}}))}2==(18&r)&&v(o,!1)}})(this,e,n,t)},configurable:!0,enumerable:!0})})),1&n){const n=new Map;o.attributeChangedCallback=function(e,t,l){K.jmp((()=>{const t=n.get(e);if(this.hasOwnProperty(t))l=this[t],delete this[t];else if(o.hasOwnProperty(t)&&"number"==typeof this[t]&&this[t]==l)return;this[t]=(null!==l||"boolean"!=typeof this[t])&&l}))},e.observedAttributes=l.filter((([e,t])=>15&t[0])).map((([e,l])=>{const s=l[1]||e;return n.set(s,e),512&l[0]&&t.k.push([e,s]),s}))}}return e},L=(e,t={})=>{const n=[],l=t.exclude||[],s=I.customElements,o=J.head,c=o.querySelector("meta[charset]"),i=J.createElement("style"),r=[];let a,u=!0;Object.assign(K,t),K.W=new URL(t.resourcesUrl||"./",J.baseURI).href,e.map((e=>{e[1].map((t=>{const o={i:t[0],$:t[1],O:t[2],L:t[3]};o.O=t[2],o.L=t[3],o.k=[],o.P={};const c=o.$,i=class extends HTMLElement{constructor(e){super(e),F(e=this,o),1&o.i&&e.attachShadow({mode:"open"})}connectedCallback(){a&&(clearTimeout(a),a=null),u?r.push(this):K.jmp((()=>(e=>{if(0==(1&K.i)){const t=q(e),n=t.v,l=()=>{};if(1&t.i)N(e,t,n.L);else{t.i|=1;{let n=e;for(;n=n.parentNode||n.host;)if(n["s-p"]){j(t,t.S=n);break}}n.O&&Object.entries(n.O).map((([t,[n]])=>{if(31&n&&e.hasOwnProperty(t)){const n=e[t];delete e[t],e[t]=n}})),(async(e,t,n,l,s)=>{if(0==(32&t.i)){{if(t.i|=32,(s=B(n)).then){const e=()=>{};s=await s,e()}s.isProxied||(n.P=s.watchers,E(s,n,2),s.isProxied=!0);const e=()=>{};t.i|=8;try{new s(t)}catch(e){_(e)}t.i&=-9,t.i|=128,e()}if(s.style){let e=s.style;const t=d(n);if(!G.has(t)){const l=()=>{};((e,t,n)=>{let l=G.get(e);X&&n?(l=l||new CSSStyleSheet,"string"==typeof l?l=t:l.replaceSync(t)):l=t,G.set(e,l)})(t,e,!!(1&n.i)),l()}}}const o=t.S,c=()=>v(t,!0);o&&o["s-rc"]?o["s-rc"].push(c):c()})(0,t,n)}l()}})(this)))}disconnectedCallback(){K.jmp((()=>(()=>{if(0==(1&K.i)){const e=q(this),t=e.g;e.N&&(e.N.map((e=>e())),e.N=void 0),R(t,"disconnectedCallback")}})()))}componentOnReady(){return q(this).T}};o.A=e[0],l.includes(c)||s.get(c)||(n.push(c),s.define(c,E(i,o,1)))}))})),i.innerHTML=n+"{visibility:hidden}.hydrated{visibility:inherit}",i.setAttribute("data-styles",""),o.insertBefore(i,c?c.nextSibling:o.firstChild),u=!1,r.length?r.map((e=>e.connectedCallback())):K.jmp((()=>a=setTimeout(P,30)))},N=(e,t,n)=>{n&&n.map((([n,l,s])=>{const o=A(e,n),c=T(t,s),i=H(n);K.ael(o,l,c,i),(t.N=t.N||[]).push((()=>K.rel(o,l,c,i)))}))},T=(e,t)=>n=>{try{256&e.i?e.g[t](n):(e.j=e.j||[]).push([t,n])}catch(e){_(e)}},A=(e,t)=>4&t?J:e,H=e=>0!=(2&e),U=new WeakMap,q=e=>U.get(e),D=(e,t)=>U.set(t.g=e,t),F=(e,t)=>{const n={i:0,m:e,v:t,R:new Map};return n.T=new Promise((e=>n.C=e)),e["s-p"]=[],e["s-rc"]=[],N(e,n,t.L),U.set(e,n)},V=(e,t)=>t in e,_=(e,t)=>(0,console.error)(e,t),z=new Map,B=e=>{const t=e.$.replace(/-/g,"_"),n=e.A,l=z.get(n);return l?l[t]:import(`./${n}.entry.js`).then((e=>(z.set(n,e),e[t])),_)
+/*!__STENCIL_STATIC_IMPORT_SWITCH__*/},G=new Map,I="undefined"!=typeof window?window:{},J=I.document||{head:{}},K={i:0,W:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,l)=>e.addEventListener(t,n,l),rel:(e,t,n,l)=>e.removeEventListener(t,n,l),ce:(e,t)=>new CustomEvent(e,t)},Q=e=>Promise.resolve(e),X=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replaceSync}catch(e){}return!1})(),Y=[],Z=[],ee=(e,t)=>l=>{e.push(l),n||(n=!0,t&&4&K.i?le(ne):K.raf(ne))},te=e=>{for(let t=0;t<e.length;t++)try{e[t](performance.now())}catch(e){_(e)}e.length=0},ne=()=>{te(Y),te(Z),(n=Y.length>0)&&K.raf(ne)},le=e=>Q().then(e),se=ee(Z,!0);export{i as H,L as b,a as c,r as g,o as h,Q as p,D as r}

package/dist/mds-modal/{p-bd6bb90a.system.js → p-a2cf985e.system.js}

@@ -1 +1 @@
-System.register(["./p-656f0e04.system.js"],(function(e,t){"use strict";var n,r;return{setters:[function(e){n=e.p;r=e.b}],execute:function(){var e=function(){var e=t.meta.url;var r={};if(e!==""){r.resourcesUrl=new URL(".",e).href}return n(r)};e().then((function(e){return r([["p-4e7d20d9.system",[[1,"mds-modal",{opened:[1540],position:[1537],stateOpened:[32]},[[4,"close","onCloseListener"]]]]]],e)}))}}}));
+System.register(["./p-76a04b9e.system.js"],(function(e,t){"use strict";var n,r;return{setters:[function(e){n=e.p;r=e.b}],execute:function(){var e=function(){var e=t.meta.url;var r={};if(e!==""){r.resourcesUrl=new URL(".",e).href}return n(r)};e().then((function(e){return r([["p-52cd3b82.system",[[1,"mds-modal",{opened:[1540],position:[1537],stateOpened:[32]},[[4,"close","onCloseListener"]]]]]],e)}))}}}));

package/dist/stats.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2022-06-27T08:49:16",
+  "timestamp": "2022-12-06T12:59:43",
   "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-6f89e656.js",
+          "./dist/cjs/index-d859a858.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-7c9adc93.js",
+          "./dist/esm-es5/index-a5a41aa8.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-7c9adc93.js",
+          "./dist/esm/index-a5a41aa8.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-4e7d20d9.system.entry.js",
+          "./dist/mds-modal/p-4fe02e5f.entry.js",
           "./dist/mds-modal/p-50ea2036.system.js",
-          "./dist/mds-modal/p-656f0e04.system.js",
-          "./dist/mds-modal/p-b8cb7be9.js",
-          "./dist/mds-modal/p-bd6bb90a.system.js",
-          "./dist/mds-modal/p-f8c5b0c2.entry.js",
+          "./dist/mds-modal/p-52cd3b82.system.entry.js",
+          "./dist/mds-modal/p-76a04b9e.system.js",
+          "./dist/mds-modal/p-931319fa.js",
+          "./dist/mds-modal/p-a2cf985e.system.js",
           "./www/build/index.esm.js",
           "./www/build/mds-modal.esm.js",
           "./www/build/mds-modal.js",
-          "./www/build/p-4e7d20d9.system.entry.js",
+          "./www/build/p-4fe02e5f.entry.js",
           "./www/build/p-50ea2036.system.js",
-          "./www/build/p-656f0e04.system.js",
-          "./www/build/p-b8cb7be9.js",
-          "./www/build/p-bd6bb90a.system.js",
-          "./www/build/p-f8c5b0c2.entry.js"
+          "./www/build/p-52cd3b82.system.entry.js",
+          "./www/build/p-76a04b9e.system.js",
+          "./www/build/p-931319fa.js",
+          "./www/build/p-a2cf985e.system.js"
         ]
       },
       {
@@ -122,12 +123,12 @@
         "components": [
           "mds-modal"
         ],
-        "bundleId": "p-f8c5b0c2",
-        "fileName": "p-f8c5b0c2.entry.js",
+        "bundleId": "p-4fe02e5f",
+        "fileName": "p-4fe02e5f.entry.js",
         "imports": [
-          "p-b8cb7be9.js"
+          "p-931319fa.js"
         ],
-        "originalByteSize": 19232
+        "originalByteSize": 19835
       }
     ],
     "esm": [
@@ -139,9 +140,9 @@
         "bundleId": "mds-modal",
         "fileName": "mds-modal.entry.js",
         "imports": [
-          "index-7c9adc93.js"
+          "index-a5a41aa8.js"
         ],
-        "originalByteSize": 19236
+        "originalByteSize": 19839
       }
     ],
     "es5": [
@@ -153,9 +154,9 @@
         "bundleId": "mds-modal",
         "fileName": "mds-modal.entry.js",
         "imports": [
-          "index-7c9adc93.js"
+          "index-a5a41aa8.js"
         ],
-        "originalByteSize": 19236
+        "originalByteSize": 19839
       }
     ],
     "system": [
@@ -164,12 +165,12 @@
         "components": [
           "mds-modal"
         ],
-        "bundleId": "p-4e7d20d9.system",
-        "fileName": "p-4e7d20d9.system.entry.js",
+        "bundleId": "p-52cd3b82.system",
+        "fileName": "p-52cd3b82.system.entry.js",
         "imports": [
-          "p-656f0e04.system.js"
+          "p-76a04b9e.system.js"
         ],
-        "originalByteSize": 19812
+        "originalByteSize": 20742
       }
     ],
     "commonjs": [
@@ -181,9 +182,9 @@
         "bundleId": "mds-modal.cjs",
         "fileName": "mds-modal.cjs.entry.js",
         "imports": [
-          "index-6f89e656.js"
+          "index-d859a858.js"
         ],
-        "originalByteSize": 19313
+        "originalByteSize": 19916
       }
     ]
   },
@@ -402,7 +403,7 @@
               "styleIdentifier": "mdsModalStyle",
               "externalStyles": [
                 {
-                  "absolutePath": "/builds/maggiolispa/ricerca-sviluppo-new-media/design-system/projects/stencil/.build/mds-modal/src/components/mds-modal/mds-modal.css",
+                  "absolutePath": "/builds/maggiolispa/ricerca-sviluppo-new-media/magma/design-system/projects/stencil/.build/mds-modal/src/components/mds-modal/mds-modal.css",
                   "relativePath": "mds-modal.css",
                   "originalComponentPath": "mds-modal.css"
                 }
@@ -418,8 +419,8 @@
             "tags": [],
             "text": ""
           },
-          "jsFilePath": "/builds/maggiolispa/ricerca-sviluppo-new-media/design-system/projects/stencil/.build/mds-modal/src/components/mds-modal/mds-modal.js",
-          "sourceFilePath": "/builds/maggiolispa/ricerca-sviluppo-new-media/design-system/projects/stencil/.build/mds-modal/src/components/mds-modal/mds-modal.tsx",
+          "jsFilePath": "/builds/maggiolispa/ricerca-sviluppo-new-media/magma/design-system/projects/stencil/.build/mds-modal/src/components/mds-modal/mds-modal.js",
+          "sourceFilePath": "/builds/maggiolispa/ricerca-sviluppo-new-media/magma/design-system/projects/stencil/.build/mds-modal/src/components/mds-modal/mds-modal.tsx",
           "sourceMapPath": null,
           "hasAttributeChangedCallbackFn": false,
           "hasComponentWillLoadFn": true,
@@ -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-b8cb7be9.js"
+      "p-931319fa.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/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

@@ -221,7 +221,9 @@ export declare type ErrorHandler = (err: any, element?: HTMLElement) => void;
  */
 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,29 @@ 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
+ * 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 +284,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 +293,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;
 /**

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 TypographyType = 'action' | 'caption' | 'snippet' | 'detail' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'hack' | 'label' | 'option' | 'paragraph' | 'tip';
+export declare type TypographyVariants = 'title' | 'info' | 'read' | 'code';
 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 TypographyMonoType = 'snippet' | 'hack';
 export declare type TypographyTooltipType = 'caption' | 'detail' | 'tip';

package/loader/package.json

@@ -1,5 +1,6 @@
 {
   "name": "mds-modal-loader",
+  "private": true,
   "typings": "./index.d.ts",
   "module": "./index.js",
   "main": "./index.cjs.js",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maggioli-design-system/mds-modal",
-  "version": "3.0.0",
+  "version": "3.2.1",
   "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,9 +23,9 @@
     "test": "stencil test --spec --e2e"
   },
   "dependencies": {
-    "@maggioli-design-system/styles": "^8.0.0",
-    "@stencil/core": "^2.17.0",
-    "clsx": "^1.1.1"
+    "@maggioli-design-system/styles": "^10.0.0",
+    "@stencil/core": "^2.19.3",
+    "clsx": "^1.2.1"
   },
   "license": "MIT",
   "author": {

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/.gitlab-ci.yml

@@ -21,5 +21,5 @@ modal-publish:
 # INSTALL TEST
 modal-install-test:
   extends: [.base-stencil-install-test, .base-modal]
-  needs: [modal-publish]
-
+  dependencies: [base-stencil-build, modal-isolate]
+  needs: [base-stencil-build, modal-isolate, modal-publish]

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

@@ -68,7 +68,6 @@
 }
 
 :host {
-
   --overlay-color: var(--overlay-color, 0 0 0);
   --overlay-opacity: var(--overlay-opacity, 0.5);
   --window-background: theme('colors.tone-neutral');
@@ -86,6 +85,7 @@
 
   background-color: rgba(var(--overlay-color, 0 0 0) / 0);
   perspective: 600px;
+  z-index: var(--modal-z-index, 1000);
 }
 
 :host ( [position=top] ) {

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

@@ -19,7 +19,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 +39,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({})

package/src/dictionary/typography.ts

@@ -1,7 +1,7 @@
 const typographyDictionary = [
   'action',
   'caption',
-  'code',
+  'snippet',
   'detail',
   'h1',
   'h2',
@@ -20,11 +20,11 @@ const typographyVariationsDictionary = [
   'title',
   'info',
   'read',
-  'mono',
+  'code',
 ]
 
 const typographyMonoDictionary = [
-  'code',
+  'snippet',
   'hack',
 ]
 

package/src/fixtures/icons.json

@@ -18,17 +18,17 @@
     "mi/baseline/badge",
     "mi/baseline/book",
     "mi/baseline/border-all",
+    "mi/baseline/cancel",
     "mi/baseline/check-box",
     "mi/baseline/check-box-outline-blank",
     "mi/baseline/check-circle",
-    "mi/baseline/check-circle-outline",
     "mi/baseline/close",
     "mi/baseline/css",
     "mi/baseline/description",
     "mi/baseline/done",
     "mi/baseline/eco",
     "mi/baseline/email",
-    "mi/baseline/error-outline",
+    "mi/baseline/error",
     "mi/baseline/explore",
     "mi/baseline/folder-zip",
     "mi/baseline/groups",

package/src/types/typography.ts

@@ -1,7 +1,7 @@
 export type TypographyType =
   | 'action'
   | 'caption'
-  | 'code'
+  | 'snippet'
   | 'detail'
   | 'h1'
   | 'h2'
@@ -19,7 +19,7 @@ export type TypographyVariants =
   | 'title'
   | 'info'
   | 'read'
-  | 'mono'
+  | 'code'
 
 export type TypographyTitleType =
   | 'action'
@@ -48,7 +48,7 @@ export type TypographySmallerType =
   | 'option'
 
 export type TypographyMonoType =
-  | 'code'
+  | 'snippet'
   | 'hack'
 
 export type TypographyTooltipType =

package/www/build/mds-modal.esm.js

@@ -1 +1 @@
-import{p as e,b as o}from"./p-b8cb7be9.js";(()=>{const o=import.meta.url,s={};return""!==o&&(s.resourcesUrl=new URL(".",o).href),e(s)})().then((e=>o([["p-f8c5b0c2",[[1,"mds-modal",{opened:[1540],position:[1537],stateOpened:[32]},[[4,"close","onCloseListener"]]]]]],e)));
+import{p as e,b as o}from"./p-931319fa.js";(()=>{const o=import.meta.url,s={};return""!==o&&(s.resourcesUrl=new URL(".",o).href),e(s)})().then((e=>o([["p-4fe02e5f",[[1,"mds-modal",{opened:[1540],position:[1537],stateOpened:[32]},[[4,"close","onCloseListener"]]]]]],e)));

package/www/build/mds-modal.js

@@ -114,7 +114,8 @@ DOMTokenList
 
   var resourcesUrl = scriptElm ? scriptElm.getAttribute('data-resources-url') || scriptElm.src : '';
   var start = function() {
-    var url = new URL('./p-bd6bb90a.system.js', new URL(resourcesUrl, window.location.origin));
+    // if src is not present then origin is "null", and new URL() throws TypeError: Failed to construct 'URL': Invalid base URL
+    var url = new URL('./p-a2cf985e.system.js', new URL(resourcesUrl, window.location.origin !== 'null' ? window.location.origin : undefined));
     System.import(url.href);
   };