@maggioli-design-system/mds-modal 1.0.1 → 1.2.0

package/dist/cjs/{index-ced1b9b6.js → index-8c1a6a17.js}

@@ -50,7 +50,7 @@ const supportsConstructibleStylesheets = /*@__PURE__*/ (() => {
 const addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
     if (listeners) {
         listeners.map(([flags, name, method]) => {
-            const target = elm;
+            const target = getHostListenerTarget(elm, flags) ;
             const handler = hostListenerProxy(hostRef, method);
             const opts = hostListenerOpts(flags);
             plt.ael(target, name, handler, opts);
@@ -74,6 +74,11 @@ const hostListenerProxy = (hostRef, methodName) => (ev) => {
         consoleError(e);
     }
 };
+const getHostListenerTarget = (elm, flags) => {
+    if (flags & 4 /* TargetDocument */)
+        return doc;
+    return elm;
+};
 // prettier-ignore
 const hostListenerOpts = (flags) => (flags & 2 /* Capture */) !== 0;
 const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
@@ -754,6 +759,29 @@ const then = (promise, thenFn) => {
 };
 const addHydratedFlag = (elm) => elm.classList.add('hydrated')
     ;
+/**
+ * Parse a new property value for a given property type.
+ *
+ * While the prop value can reasonably be expected to be of `any` type as far as TypeScript's type checker is concerned,
+ * it is not safe to assume that the string returned by evaluating `typeof propValue` matches:
+ *   1. `any`, the type given to `propValue` in the function signature
+ *   2. the type stored from `propType`.
+ *
+ * This function provides the capability to parse/coerce a property's value to potentially any other JavaScript type.
+ *
+ * Property values represented in TSX preserve their type information. In the example below, the number 0 is passed to
+ * a component. This `propValue` will preserve its type information (`typeof propValue === 'number'`). Note that is
+ * based on the type of the value being passed in, not the type declared of the class member decorated with `@Prop`.
+ * ```tsx
+ * <my-cmp prop-val={0}></my-cmp>
+ * ```
+ *
+ * HTML prop values on the other hand, will always a string
+ *
+ * @param propValue the new value to coerce to some type
+ * @param propType the type of the prop, expressed as a binary number
+ * @returns the parsed/coerced value
+ */
 const parsePropertyValue = (propValue, propType) => {
     // ensure this value is of the correct prop type
     if (propValue != null && !isComplexType(propValue)) {

package/dist/cjs/loader.cjs.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ced1b9b6.js');
+const index = require('./index-8c1a6a17.js');
 
 /*
- Stencil Client Patch Esm v2.10.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.14.0 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return index.promiseResolve();
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["mds-modal.cjs",[[1,"mds-modal",{"opened":[1540],"position":[1537]},[[0,"close","onCloseListener"]]]]]], options);
+  return index.bootstrapLazy([["mds-modal.cjs",[[1,"mds-modal",{"opened":[1540],"position":[1537],"stateOpened":[32]},[[4,"close","onCloseListener"]]]]]], options);
   });
 };
 

package/dist/cjs/mds-modal.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ced1b9b6.js');
+const index = require('./index-8c1a6a17.js');
 
 function toVal(mix) {
 	var k, y, str='';
@@ -45,7 +45,7 @@ function clsx () {
 	return str;
 }
 
-const mdsModalCss = ".animate-left,.animate-right{opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}.animate-right-intro,.animate-right-outro{-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{pointer-events:none;position:fixed;top:0px;right:0px;bottom:0px;left:0px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;--tw-bg-opacity:1;background-color:rgba(var(--adjust-tone-01), var(--tw-bg-opacity));--tw-bg-opacity:0;-webkit-transition-duration:700ms;transition-duration:700ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1);-webkit-perspective:600px;perspective:600px}:host(.animate-center-opened),:host(.animate-left-opened),:host(.animate-right-opened){pointer-events:auto;--tw-bg-opacity:0.5;-webkit-transition-duration:500ms;transition-duration:500ms}.close{position:absolute;top:0px;height:2.25rem;width:2.25rem;-webkit-transform-origin:center;transform-origin:center;cursor:pointer;font-size:2.25rem;line-height:2.5rem;--tw-text-opacity:1;color:rgba(var(--adjust-tone-10), var(--tw-text-opacity));opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(0.77, 0, 0.175, 1);transition-timing-function:cubic-bezier(0.77, 0, 0.175, 1);text-shadow:0px 0px 1px rgb(0 0 0 / 20%), 0px 0px 1px rgb(1 0 5 / 10%);-webkit-transform:translate(0, 24px) rotate(90deg);transform:translate(0, 24px) rotate(90deg)}.window{display:grid;height:100%;gap:0px;overflow:auto;background-color:var(--window-background, rgb(var(--adjust-tone)));-webkit-box-shadow:var(--window-shadow, 0 25px 50px -12px rgba(0, 0, 0, 0.25));box-shadow:var(--window-shadow, 0 25px 50px -12px rgba(0, 0, 0, 0.25));grid-template-rows:1fr;max-width:calc(100vw - 80px)}.window--top{grid-template-rows:auto 1fr}.window--bottom{grid-template-rows:1fr auto}.window--top-bottom{grid-template-rows:auto 1fr auto}:host(.animate-center){-ms-flex-pack:center;justify-content:center;padding:2rem}@media (max-width: 767px){:host(.animate-center){padding:1rem}}:host(.animate-center) .window,:host(.animate-center)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.animate-center-intro) .window,:host(.animate-center-intro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(40%);transform:rotateX(-22deg) scale(0.5) translateY(40%)}:host(.animate-center-opened.animate-center-outro) .window,:host(.animate-center-opened.animate-center-outro)>::slotted([slot=window]),:host(.animate-center-opened) .window,:host(.animate-center-opened)>::slotted([slot=window]){-webkit-transform:rotateX(0) scale(1) translateY(0);transform:rotateX(0) scale(1) translateY(0);opacity:1}:host(.animate-center-outro) .window,:host(.animate-center-outro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(-40%);transform:rotateX(-22deg) scale(0.5) translateY(-40%)}:host(.animate-right){-ms-flex-pack:end;justify-content:flex-end}:host(.animate-right) .window,:host(.animate-right)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.animate-right-intro) .window,:host(.animate-right-intro)>::slotted([slot=window]){-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}:host(.animate-right-opened.animate-right-outro) .window,:host(.animate-right-opened.animate-right-outro)>::slotted([slot=window]),:host(.animate-right-opened) .window,:host(.animate-right-opened)>::slotted([slot=window]){-webkit-transform:translateX(0);transform:translateX(0);opacity:1}:host(.animate-right-opened) .close,:host(.animate-right-opened.animate-right-outro) .close{opacity:1;-webkit-transform:translate(24px, 24px) rotate(0);transform:translate(24px, 24px) rotate(0)}:host(.animate-right-outro) .window,:host(.animate-right-outro)>::slotted([slot=window]){-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}:host(.animate-right-outro) .close{-webkit-transform:translate(-24px, 24px) rotate(90deg);transform:translate(-24px, 24px) rotate(90deg)}:host(.animate-right) .close{left:0px;-webkit-transform:translate(-36px, 24px) rotate(-90deg);transform:translate(-36px, 24px) rotate(-90deg)}:host(.animate-left){-ms-flex-pack:start;justify-content:flex-start}:host(.animate-left) .window,:host(.animate-left)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.animate-left-intro) .window,:host(.animate-left-intro)>::slotted([slot=window]){-webkit-transform:translateX(calc(-100% - 50px));transform:translateX(calc(-100% - 50px))}:host(.animate-left-opened.animate-left-outro) .window,:host(.animate-left-opened.animate-left-outro)>::slotted([slot=window]),:host(.animate-left-opened) .window,:host(.animate-left-opened)>::slotted([slot=window]){-webkit-transform:translateX(0);transform:translateX(0);opacity:1}:host(.animate-left-opened) .close,:host(.animate-left-opened.animate-left-outro) .close{opacity:1;-webkit-transform:translate(-24px, 24px) rotate(0);transform:translate(-24px, 24px) rotate(0)}:host(.animate-left-outro) .window,:host(.animate-left-outro)>::slotted([slot=window]){-webkit-transform:translateX(calc(-100% - 50px));transform:translateX(calc(-100% - 50px))}:host(.animate-left-outro) .close{-webkit-transform:translate(24px, 24px) rotate(-90deg);transform:translate(24px, 24px) rotate(-90deg)}:host(.animate-left) .close{right:0px;-webkit-transform:translate(36px, 24px) rotate(90deg);transform:translate(36px, 24px) rotate(90deg)}";
+const mdsModalCss = ".animate-left,.animate-right{opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}.animate-right-intro,.animate-right-outro{-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{pointer-events:none;position:fixed;top:0px;right:0px;bottom:0px;left:0px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:rgba(var(--adjust-tone-01), var(--tw-bg-opacity));--tw-bg-opacity:0;-webkit-transition-duration:700ms;transition-duration:700ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1);-webkit-perspective:600px;perspective:600px}:host([position=top]){-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center}:host([position=bottom]){-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center}:host(.animate-bottom-opened),:host(.animate-center-opened),:host(.animate-left-opened),:host(.animate-right-opened),:host(.animate-top-opened){pointer-events:auto;--tw-bg-opacity:0.5;-webkit-transition-duration:500ms;transition-duration:500ms}.close{position:absolute;top:0px;height:2.25rem;width:2.25rem;-webkit-transform-origin:center;transform-origin:center;cursor:pointer;font-size:2.25rem;line-height:2.5rem;--tw-text-opacity:1;color:rgba(var(--adjust-tone-10), var(--tw-text-opacity));opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(0.77, 0, 0.175, 1);transition-timing-function:cubic-bezier(0.77, 0, 0.175, 1);-webkit-transform:translate(0, 24px) rotate(90deg);transform:translate(0, 24px) rotate(90deg)}.window{display:grid;height:100%;gap:0px;overflow:auto;background-color:var(--window-background, rgb(var(--adjust-tone)));-webkit-box-shadow:var(--window-shadow, 0 25px 50px -12px rgb(0 0 0 / 0.25));box-shadow:var(--window-shadow, 0 25px 50px -12px rgb(0 0 0 / 0.25));grid-template-rows:1fr;max-width:calc(100vw - 80px)}.window--top{grid-template-rows:auto 1fr}.window--bottom{grid-template-rows:1fr auto}.window--top-bottom{grid-template-rows:auto 1fr auto}:host(.animate-bottom){-ms-flex-pack:center;justify-content:center;padding:2rem}@media (max-width: 767px){:host(.animate-bottom){padding:1rem}}:host(.animate-bottom) .window,:host(.animate-bottom)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.animate-bottom-intro) .window,:host(.animate-bottom-intro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(40%);transform:rotateX(-22deg) scale(0.5) translateY(40%)}:host(.animate-bottom-opened.animate-bottom-outro) .window,:host(.animate-bottom-opened.animate-bottom-outro)>::slotted([slot=window]),:host(.animate-bottom-opened) .window,:host(.animate-bottom-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:rotateX(0) scale(1) translateY(0);transform:rotateX(0) scale(1) translateY(0)}:host(.animate-bottom-outro) .window,:host(.animate-bottom-outro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(-40%);transform:rotateX(-22deg) scale(0.5) translateY(-40%)}:host(.animate-center){-ms-flex-pack:center;justify-content:center;padding:2rem}@media (max-width: 767px){:host(.animate-center){padding:1rem}}:host(.animate-center) .window,:host(.animate-center)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.animate-center-intro) .window,:host(.animate-center-intro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(40%);transform:rotateX(-22deg) scale(0.5) translateY(40%)}:host(.animate-center-opened.animate-center-outro) .window,:host(.animate-center-opened.animate-center-outro)>::slotted([slot=window]),:host(.animate-center-opened) .window,:host(.animate-center-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:rotateX(0) scale(1) translateY(0);transform:rotateX(0) scale(1) translateY(0)}:host(.animate-center-outro) .window,:host(.animate-center-outro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(-40%);transform:rotateX(-22deg) scale(0.5) translateY(-40%)}:host(.animate-left){-ms-flex-pack:start;justify-content:flex-start}:host(.animate-left) .window,:host(.animate-left)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.animate-left-intro) .window,:host(.animate-left-intro)>::slotted([slot=window]){-webkit-transform:translateX(calc(-100% - 50px));transform:translateX(calc(-100% - 50px))}:host(.animate-left-opened.animate-left-outro) .window,:host(.animate-left-opened.animate-left-outro)>::slotted([slot=window]),:host(.animate-left-opened) .window,:host(.animate-left-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}:host(.animate-left-opened) .close,:host(.animate-left-opened.animate-left-outro) .close{opacity:1;-webkit-transform:translate(-24px, 24px) rotate(0);transform:translate(-24px, 24px) rotate(0)}:host(.animate-left-outro) .window,:host(.animate-left-outro)>::slotted([slot=window]){-webkit-transform:translateX(calc(-100% - 50px));transform:translateX(calc(-100% - 50px))}:host(.animate-left-outro) .close{-webkit-transform:translate(24px, 24px) rotate(-90deg);transform:translate(24px, 24px) rotate(-90deg)}:host(.animate-left) .close{right:0px;-webkit-transform:translate(36px, 24px) rotate(90deg);transform:translate(36px, 24px) rotate(90deg)}:host(.animate-right){-ms-flex-pack:end;justify-content:flex-end}:host(.animate-right) .window,:host(.animate-right)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.animate-right-intro) .window,:host(.animate-right-intro)>::slotted([slot=window]){-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}:host(.animate-right-opened.animate-right-outro) .window,:host(.animate-right-opened.animate-right-outro)>::slotted([slot=window]),:host(.animate-right-opened) .window,:host(.animate-right-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}:host(.animate-right-opened) .close,:host(.animate-right-opened.animate-right-outro) .close{opacity:1;-webkit-transform:translate(24px, 24px) rotate(0);transform:translate(24px, 24px) rotate(0)}:host(.animate-right-outro) .window,:host(.animate-right-outro)>::slotted([slot=window]){-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}:host(.animate-right-outro) .close{-webkit-transform:translate(-24px, 24px) rotate(90deg);transform:translate(-24px, 24px) rotate(90deg)}:host(.animate-right) .close{left:0px;-webkit-transform:translate(-36px, 24px) rotate(-90deg);transform:translate(-36px, 24px) rotate(-90deg)}:host(.animate-top){-ms-flex-pack:center;justify-content:center;padding:2rem}@media (max-width: 767px){:host(.animate-top){padding:1rem}}:host(.animate-top) .window,:host(.animate-top)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.animate-top-intro) .window,:host(.animate-top-intro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(40%);transform:rotateX(-22deg) scale(0.5) translateY(40%)}:host(.animate-top-opened.animate-top-outro) .window,:host(.animate-top-opened.animate-top-outro)>::slotted([slot=window]),:host(.animate-top-opened) .window,:host(.animate-top-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:rotateX(0) scale(1) translateY(0);transform:rotateX(0) scale(1) translateY(0)}:host(.animate-top-outro) .window,:host(.animate-top-outro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(-40%);transform:rotateX(-22deg) scale(0.5) translateY(-40%)}";
 
 let MdsModal = class {
   constructor(hostRef) {
@@ -63,6 +63,10 @@ let MdsModal = class {
       return `animate-${customPosition !== null ? customPosition : this.position}${customState !== null ? '-' + customState : ''}`;
     };
     this.closeModal = (e = null) => {
+      var _a;
+      if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.localName) !== 'mds-modal') {
+        return;
+      }
       this.opened = e.target !== e.currentTarget;
       if (!this.opened) {
         this.close.emit();
@@ -73,6 +77,7 @@ let MdsModal = class {
     this.bottom = this.hostElement.querySelector('[slot="bottom"]') !== null;
     this.top = this.hostElement.querySelector('[slot="top"]') !== null;
     this.window = this.hostElement.querySelector('[slot="window"]') !== null;
+    this.stateOpened = this.opened;
     if (this.window && this.position === null) {
       this.position = 'center';
     }
@@ -98,14 +103,15 @@ let MdsModal = class {
     this.hostElement.classList.remove(this.animationName('intro', oldValue));
     this.hostElement.classList.remove(this.animationName('outro', oldValue));
   }
-  openedChange() {
+  openedChange(newValue) {
+    this.stateOpened = newValue;
     window.clearTimeout(this.animationDeelay);
   }
   onCloseListener() {
     this.opened = false;
   }
   render() {
-    return (index.h(index.Host, { class: clsx(this.opened && this.animationName('opened')), onClick: (e) => { this.closeModal(e); } }, this.window
+    return (index.h(index.Host, { class: clsx(this.stateOpened && this.animationName('opened')), onClick: (e) => { this.closeModal(e); } }, this.window
       ?
         index.h("slot", { name: "window" })
       :

package/dist/cjs/mds-modal.cjs.js

@@ -1,9 +1,9 @@
 'use strict';
 
-const index = require('./index-ced1b9b6.js');
+const index = require('./index-8c1a6a17.js');
 
 /*
- Stencil Client Patch Browser v2.10.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.14.0 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('mds-modal.cjs.js', document.baseURI).href));
@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["mds-modal.cjs",[[1,"mds-modal",{"opened":[1540],"position":[1537]},[[0,"close","onCloseListener"]]]]]], options);
+  return index.bootstrapLazy([["mds-modal.cjs",[[1,"mds-modal",{"opened":[1540],"position":[1537],"stateOpened":[32]},[[4,"close","onCloseListener"]]]]]], options);
 });

package/dist/collection/collection-manifest.json

@@ -4,8 +4,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.10.0",
-    "typescriptVersion": "4.3.5"
+    "version": "2.14.0",
+    "typescriptVersion": "4.5.4"
   },
   "collections": [],
   "bundles": []

package/dist/collection/components/mds-modal/mds-modal.css

@@ -3,7 +3,6 @@
   .animate-left, .animate-right {
     opacity: 0;
     transition-property: background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;
-    transition-duration: 150ms;
     transition-duration: 500ms;
     transition-timing-function: cubic-bezier(1, 0, 0, 1);
 }
@@ -16,7 +15,8 @@
     border-width: 1px;
 }
 .shadow {
-    --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
@@ -30,7 +30,6 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    --tw-bg-opacity: 1;
     background-color: rgba(var(--adjust-tone-01), var(--tw-bg-opacity));
     --tw-bg-opacity: 0;
     transition-duration: 700ms;
@@ -39,7 +38,17 @@
   perspective: 600px;
 }
 
-:host ( .animate-center-opened ), :host ( .animate-left-opened ), :host ( .animate-right-opened ) {
+:host ( [position=top] ) {
+    align-items: flex-start;
+    justify-content: center;
+}
+
+:host ( [position=bottom] ) {
+    align-items: flex-end;
+    justify-content: center;
+}
+
+:host ( .animate-bottom-opened ), :host ( .animate-center-opened ), :host ( .animate-left-opened ), :host ( .animate-right-opened ), :host ( .animate-top-opened ) {
     pointer-events: auto;
     --tw-bg-opacity: 0.5;
     transition-duration: 500ms;
@@ -58,10 +67,8 @@
     color: rgba(var(--adjust-tone-10), var(--tw-text-opacity));
     opacity: 0;
     transition-property: background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;
-    transition-duration: 150ms;
     transition-duration: 500ms;
     transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-    text-shadow: 0px 0px 1px rgb(0 0 0 / 20%), 0px 0px 1px rgb(1 0 5 / 10%);
 
   transform: translate(0, 24px) rotate(90deg);
 }
@@ -73,7 +80,7 @@
     overflow: auto;
 
   background-color: var(--window-background, rgb(var(--adjust-tone)));
-  box-shadow: var(--window-shadow, 0 25px 50px -12px rgba(0, 0, 0, 0.25));
+  box-shadow: var(--window-shadow, 0 25px 50px -12px rgb(0 0 0 / 0.25));
   grid-template-rows: 1fr;
 
   /* grid-template-rows: var(--grid-template-rows, auto 1fr auto); */
@@ -92,6 +99,39 @@
   grid-template-rows: auto 1fr auto;
 }
 
+:host ( .animate-bottom ) {
+    justify-content: center;
+    padding: 2rem;
+}
+
+@media (max-width: 767px) {
+
+    :host ( .animate-bottom ) {
+        padding: 1rem;
+    }
+}
+
+:host ( .animate-bottom ) .window, :host ( .animate-bottom ) > ::slotted ( [slot=window] ) {
+    opacity: 0;
+    transition-property: background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;
+    transition-duration: 500ms;
+    transition-timing-function: cubic-bezier(1, 0, 0, 1);
+}
+
+:host ( .animate-bottom-intro ) .window, :host ( .animate-bottom-intro ) > ::slotted ( [slot=window] ) {
+    transform: rotateX(-22deg) scale(0.5) translateY(40%);
+  }
+
+:host ( .animate-bottom-opened.animate-bottom-outro ) .window, :host ( .animate-bottom-opened.animate-bottom-outro ) > ::slotted ( [slot=window] ), :host ( .animate-bottom-opened ) .window, :host ( .animate-bottom-opened ) > ::slotted ( [slot=window] ) {
+    opacity: 1;
+
+    transform: rotateX(0) scale(1) translateY(0);
+}
+
+:host ( .animate-bottom-outro ) .window, :host ( .animate-bottom-outro ) > ::slotted ( [slot=window] ) {
+    transform: rotateX(-22deg) scale(0.5) translateY(-40%);
+  }
+
 :host ( .animate-center ) {
     justify-content: center;
     padding: 2rem;
@@ -107,7 +147,6 @@
 :host ( .animate-center ) .window, :host ( .animate-center ) > ::slotted ( [slot=window] ) {
     opacity: 0;
     transition-property: background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;
-    transition-duration: 150ms;
     transition-duration: 500ms;
     transition-timing-function: cubic-bezier(1, 0, 0, 1);
 }
@@ -117,16 +156,56 @@
   }
 
 :host ( .animate-center-opened.animate-center-outro ) .window, :host ( .animate-center-opened.animate-center-outro ) > ::slotted ( [slot=window] ), :host ( .animate-center-opened ) .window, :host ( .animate-center-opened ) > ::slotted ( [slot=window] ) {
+    opacity: 1;
 
     transform: rotateX(0) scale(1) translateY(0);
-
-    opacity: 1;
-  }
+}
 
 :host ( .animate-center-outro ) .window, :host ( .animate-center-outro ) > ::slotted ( [slot=window] ) {
     transform: rotateX(-22deg) scale(0.5) translateY(-40%);
   }
 
+:host ( .animate-left ) {
+    justify-content: flex-start;
+}
+
+:host ( .animate-left ) .window, :host ( .animate-left ) > ::slotted ( [slot=window] ) {
+    opacity: 0;
+    transition-property: background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;
+    transition-duration: 500ms;
+    transition-timing-function: cubic-bezier(1, 0, 0, 1);
+}
+
+:host ( .animate-left-intro ) .window, :host ( .animate-left-intro ) > ::slotted ( [slot=window] ) {
+    transform: translateX(calc(-100% - 50px));
+  }
+
+:host ( .animate-left-opened.animate-left-outro ) .window, :host ( .animate-left-opened.animate-left-outro ) > ::slotted ( [slot=window] ), :host ( .animate-left-opened ) .window, :host ( .animate-left-opened ) > ::slotted ( [slot=window] ) {
+    opacity: 1;
+
+    transform: translateX(0);
+}
+
+:host ( .animate-left-opened ) .close, :host ( .animate-left-opened.animate-left-outro ) .close {
+    opacity: 1;
+
+  transform: translate(-24px, 24px) rotate(0);
+}
+
+:host ( .animate-left-outro ) .window, :host ( .animate-left-outro ) > ::slotted ( [slot=window] ) {
+    transform: translateX(calc(-100% - 50px));
+  }
+
+:host ( .animate-left-outro ) .close {
+  transform: translate(24px, 24px) rotate(-90deg);
+}
+
+:host ( .animate-left ) .close {
+    right: 0px;
+
+  transform: translate(36px, 24px) rotate(90deg);
+}
+
 :host ( .animate-right ) {
     justify-content: flex-end;
 }
@@ -134,7 +213,6 @@
 :host ( .animate-right ) .window, :host ( .animate-right ) > ::slotted ( [slot=window] ) {
     opacity: 0;
     transition-property: background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;
-    transition-duration: 150ms;
     transition-duration: 500ms;
     transition-timing-function: cubic-bezier(1, 0, 0, 1);
 }
@@ -144,11 +222,10 @@
   }
 
 :host ( .animate-right-opened.animate-right-outro ) .window, :host ( .animate-right-opened.animate-right-outro ) > ::slotted ( [slot=window] ), :host ( .animate-right-opened ) .window, :host ( .animate-right-opened ) > ::slotted ( [slot=window] ) {
+    opacity: 1;
 
     transform: translateX(0);
-
-    opacity: 1;
-  }
+}
 
 :host ( .animate-right-opened ) .close, :host ( .animate-right-opened.animate-right-outro ) .close {
     opacity: 1;
@@ -170,46 +247,36 @@
   transform: translate(-36px, 24px) rotate(-90deg);
 }
 
-:host ( .animate-left ) {
-    justify-content: flex-start;
+:host ( .animate-top ) {
+    justify-content: center;
+    padding: 2rem;
 }
 
-:host ( .animate-left ) .window, :host ( .animate-left ) > ::slotted ( [slot=window] ) {
+@media (max-width: 767px) {
+
+    :host ( .animate-top ) {
+        padding: 1rem;
+    }
+}
+
+:host ( .animate-top ) .window, :host ( .animate-top ) > ::slotted ( [slot=window] ) {
     opacity: 0;
     transition-property: background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;
-    transition-duration: 150ms;
     transition-duration: 500ms;
     transition-timing-function: cubic-bezier(1, 0, 0, 1);
 }
 
-:host ( .animate-left-intro ) .window, :host ( .animate-left-intro ) > ::slotted ( [slot=window] ) {
-    transform: translateX(calc(-100% - 50px));
-  }
-
-:host ( .animate-left-opened.animate-left-outro ) .window, :host ( .animate-left-opened.animate-left-outro ) > ::slotted ( [slot=window] ), :host ( .animate-left-opened ) .window, :host ( .animate-left-opened ) > ::slotted ( [slot=window] ) {
-
-    transform: translateX(0);
-
-    opacity: 1;
+:host ( .animate-top-intro ) .window, :host ( .animate-top-intro ) > ::slotted ( [slot=window] ) {
+    transform: rotateX(-22deg) scale(0.5) translateY(40%);
   }
 
-:host ( .animate-left-opened ) .close, :host ( .animate-left-opened.animate-left-outro ) .close {
+:host ( .animate-top-opened.animate-top-outro ) .window, :host ( .animate-top-opened.animate-top-outro ) > ::slotted ( [slot=window] ), :host ( .animate-top-opened ) .window, :host ( .animate-top-opened ) > ::slotted ( [slot=window] ) {
     opacity: 1;
 
-  transform: translate(-24px, 24px) rotate(0);
+    transform: rotateX(0) scale(1) translateY(0);
 }
 
-:host ( .animate-left-outro ) .window, :host ( .animate-left-outro ) > ::slotted ( [slot=window] ) {
-    transform: translateX(calc(-100% - 50px));
+:host ( .animate-top-outro ) .window, :host ( .animate-top-outro ) > ::slotted ( [slot=window] ) {
+    transform: rotateX(-22deg) scale(0.5) translateY(-40%);
   }
 
-:host ( .animate-left-outro ) .close {
-  transform: translate(24px, 24px) rotate(-90deg);
-}
-
-:host ( .animate-left ) .close {
-    right: 0px;
-
-  transform: translate(36px, 24px) rotate(90deg);
-}
-

package/dist/collection/components/mds-modal/mds-modal.js

@@ -1,4 +1,4 @@
-import { Component, Element, Event, Host, h, Listen, Prop, Watch } from '@stencil/core';
+import { Component, Element, Event, Host, h, Listen, Prop, Watch, State } from '@stencil/core';
 import clsx from 'clsx';
 export class MdsModal {
   constructor() {
@@ -14,6 +14,10 @@ export class MdsModal {
       return `animate-${customPosition !== null ? customPosition : this.position}${customState !== null ? '-' + customState : ''}`;
     };
     this.closeModal = (e = null) => {
+      var _a;
+      if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.localName) !== 'mds-modal') {
+        return;
+      }
       this.opened = e.target !== e.currentTarget;
       if (!this.opened) {
         this.close.emit();
@@ -24,6 +28,7 @@ export class MdsModal {
     this.bottom = this.hostElement.querySelector('[slot="bottom"]') !== null;
     this.top = this.hostElement.querySelector('[slot="top"]') !== null;
     this.window = this.hostElement.querySelector('[slot="window"]') !== null;
+    this.stateOpened = this.opened;
     if (this.window && this.position === null) {
       this.position = 'center';
     }
@@ -49,14 +54,15 @@ export class MdsModal {
     this.hostElement.classList.remove(this.animationName('intro', oldValue));
     this.hostElement.classList.remove(this.animationName('outro', oldValue));
   }
-  openedChange() {
+  openedChange(newValue) {
+    this.stateOpened = newValue;
     window.clearTimeout(this.animationDeelay);
   }
   onCloseListener() {
     this.opened = false;
   }
   render() {
-    return (h(Host, { class: clsx(this.opened && this.animationName('opened')), onClick: (e) => { this.closeModal(e); } },
+    return (h(Host, { class: clsx(this.stateOpened && this.animationName('opened')), onClick: (e) => { this.closeModal(e); } },
       this.window
         ?
           h("slot", { name: "window" })
@@ -100,7 +106,7 @@ export class MdsModal {
       "mutable": true,
       "complexType": {
         "original": "ModalPositionType",
-        "resolved": "\"center\" | \"left\" | \"right\"",
+        "resolved": "\"bottom\" | \"center\" | \"left\" | \"right\" | \"top\"",
         "references": {
           "ModalPositionType": {
             "location": "import",
@@ -119,6 +125,9 @@ export class MdsModal {
       "defaultValue": "null"
     }
   }; }
+  static get states() { return {
+    "stateOpened": {}
+  }; }
   static get events() { return [{
       "method": "close",
       "name": "close",
@@ -146,7 +155,7 @@ export class MdsModal {
   static get listeners() { return [{
       "name": "close",
       "method": "onCloseListener",
-      "target": undefined,
+      "target": "document",
       "capture": false,
       "passive": false
     }]; }

package/dist/collection/components/mds-modal/meta/dictionary.js

@@ -1,6 +1,8 @@
 const modalPositionDictionary = [
+  'bottom',
   'center',
   'left',
   'right',
+  'top',
 ];
 export { modalPositionDictionary, };

package/dist/collection/components/mds-modal/test/mds-modal.stories.js

@@ -1,5 +1,4 @@
 import React from 'react'
-import faker from 'faker'
 import MdsModal from '@component/mds-modal/mds-modal'
 
 import { modalPositionDictionary } from '../meta/dictionary'
@@ -21,13 +20,10 @@ export default {
   },
 }
 
-const buttonA = faker.hacker.verb()
-const buttonB = faker.hacker.verb()
-const text = faker.lorem.paragraphs(3)
-const firstName = faker.name.firstName(1)
-const lastName = faker.name.lastName(1)
+const firstName = 'Mario'
+const lastName = 'Rossi'
 const fullName = `${firstName} ${lastName}`
-const email = faker.internet.email(firstName, lastName)
+const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@nintendo.com`
 
 const Template = args =>
   <mds-modal {...args}>
@@ -40,7 +36,7 @@ const Template = args =>
     </header>
     <div className="p-8 max-w-lg">
       <mds-text>
-        { text }
+        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>
     </div>
     <footer slot="bottom" className="p-8 max-w-lg flex gap-4 text-adjust-tone-02 border-t border-adjust-tone-09">
@@ -57,7 +53,7 @@ const CustomTemplate = args =>
   <mds-modal {...args}>
     <mds-banner slot="window" class="max-w-xl" deletable headline="Action required">
       <mds-text typography="detail">
-        { text }
+        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="primary" tone="quiet">Cancel</mds-button>
       <mds-button slot="actions" variant="primary">Confirm</mds-button>

package/dist/collection/dictionary/icon.js

@@ -1,3 +1,3 @@
-import mggIconsDictionary from '@maggioli-design-system/icons/original/dictionary.json';
+import mggIconsDictionary from '@maggioli-design-system/icons/dist/original/dictionary.json';
 const iconsDictionary = Object.keys(mggIconsDictionary).sort();
 export { iconsDictionary, };

package/dist/collection/dictionary/typography.js

@@ -13,6 +13,7 @@ const typographyDictionary = [
   'label',
   'option',
   'paragraph',
+  'tip',
 ];
 const typographyMonoDictionary = [
   'code',
@@ -33,5 +34,10 @@ const typographySecondaryDictionary = [
   'label',
   'option',
   'paragraph',
+  'tip',
 ];
-export { typographyDictionary, typographyMonoDictionary, typographyPrimaryDictionary, typographySecondaryDictionary, };
+const typographySmallerDictionary = [
+  'option',
+  'tip',
+];
+export { typographyDictionary, typographyMonoDictionary, typographyPrimaryDictionary, typographySecondaryDictionary, typographySmallerDictionary, };

package/dist/collection/dictionary/variant.js

@@ -3,6 +3,7 @@ const themeVariantDictionary = [
   'error',
   'info',
   'light',
+  'primary',
   'success',
   'warning',
 ];

package/dist/{custom-elements → components}/index.d.ts

@@ -1,25 +1,7 @@
-/* MdsModal custom elements bundle */
+/* MdsModal custom elements */
 
 import type { Components, JSX } from "../types/components";
 
-interface MdsModal extends Components.MdsModal, HTMLElement {}
-export const MdsModal: {
-  prototype: MdsModal;
-  new (): MdsModal;
-};
-
-/**
- * Utility to define all custom elements within this package using the tag name provided in the component's source. 
- * When defining each custom element, it will also check it's safe to define by:
- *
- * 1. Ensuring the "customElements" registry is available in the global context (window).
- * 2. The component tag name is not already defined.
- *
- * Use the standard [customElements.define()](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define) 
- * method instead to define custom elements individually, or to provide a different tag name.
- */
-export declare const defineCustomElements: (opts?: any) => void;
-
 /**
  * Used to manually set the base path where assets can be found.
  * If the script is used as "module", it's recommended to use "import.meta.url",
@@ -36,7 +18,6 @@ export interface SetPlatformOptions {
   raf?: (c: FrameRequestCallback) => number;
   ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
   rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
-  ce?: (eventName: string, opts?: any) => CustomEvent;
 }
 export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
 

package/dist/components/index.js

@@ -0,0 +1 @@
+export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';