@maggioli-design-system/mds-modal 4.1.0 → 4.3.0

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

@@ -1,4 +1,7 @@
+/* stylelint-disable */
 @tailwind components;
+@tailwind utilities;
+
 
 .focus-off,
   .focusable,
@@ -14,23 +17,29 @@
     transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;
 }
 
+
 .focus-on,
   .focusable-light:focus-visible,
   .focusable:focus-visible {
+
     --magma-outline-blur-offset: var(--magma-outline-focus-offset);
     --magma-outline-blur: var(--magma-outline-focus);
   }
 
+
 .focus-light-on,
   .focusable-light:focus-visible {
+
     --magma-outline-blur: 2px solid rgb(var(--tone-neutral));
   }
 
+
 .svg{
 
     display: flex;
 }
 
+
 .svg svg{
 
     aspect-ratio: 1 / 1;
@@ -40,19 +49,6 @@
     width: 100%;
 }
 
-.animate-left,
-  .animate-right{
-
-    opacity: 0;
-
-    transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
-
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-
-    transition-duration: 500ms;
-
-    transition-timing-function: cubic-bezier(1, 0, 0, 1);
-}
 
 .animate-right-intro,
   .animate-right-outro {
@@ -138,14 +134,14 @@
 
     background-color: transparent;
 }
-.p-8{
-
-    padding: 2rem;
-}
 .p-4{
 
     padding: 1rem;
 }
+.p-8{
+
+    padding: 2rem;
+}
 .text-tone-neutral-02{
 
     --tw-text-opacity: 1;
@@ -186,10 +182,7 @@
   --mds-modal-z-index: var(--magma-modal-z-index);
   pointer-events: none;
   position: fixed;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
+  inset: 0px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -197,29 +190,30 @@
   transition-timing-function: cubic-bezier(1, 0, 0, 1);
 
   background-color: rgba(var(--mds-modal-overlay-color) / 0);
+  fill: rgb(var(--tone-neutral));
   perspective: 600px;
-  z-index: var(--z-index, 1000);
+  z-index: var(--mds-modal-z-index, 1000);
 }
 
-:host ( [position=top] ){
+:host( [position=top] ){
 
     align-items: flex-start;
 
     justify-content: center;
 }
 
-:host ( [position=bottom] ){
+: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 ){
+:host( .to-bottom-opened ),
+:host( .to-center-opened ),
+:host( .to-left-opened ),
+:host( .to-right-opened ),
+:host( .to-top-opened ){
 
     pointer-events: auto;
 
@@ -244,8 +238,6 @@
 
     border-radius: 9999px;
 
-    fill: rgb(var(--tone-neutral-10));
-
     font-size: 2.25rem;
 
     line-height: 2.5rem;
@@ -256,6 +248,7 @@
 
     transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
 
+  fill: inherit;
   transform: translate(0, 24px) rotate(90deg);
   transition-property: opacity, outline, outline-offset, transform;
 }
@@ -287,7 +280,7 @@
   grid-template-rows: auto 1fr auto;
 }
 
-:host ( .animate-bottom ){
+:host( .to-bottom ){
 
     justify-content: center;
 
@@ -296,14 +289,15 @@
 
 @media (max-width: 767px){
 
-    :host ( .animate-bottom ){
+
+    :host( .to-bottom ){
 
         padding: 1rem;
     }
 }
 
-:host ( .animate-bottom ) .window,
-:host ( .animate-bottom ) > ::slotted ( [slot=window] ){
+:host( .to-bottom ) .window,
+:host( .to-bottom ) > ::slotted( [slot="window"] ){
 
     opacity: 0;
 
@@ -316,27 +310,27 @@
     transition-timing-function: cubic-bezier(1, 0, 0, 1);
 }
 
-:host ( .animate-bottom-intro ) .window,
-:host ( .animate-bottom-intro ) > ::slotted ( [slot=window] ) {
+:host( .to-bottom-intro ) .window,
+:host( .to-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] ){
+:host( .to-bottom-opened.to-bottom-outro ) .window,
+:host( .to-bottom-opened.to-bottom-outro ) > ::slotted( [slot="window"] ),
+:host( .to-bottom-opened ) .window,
+:host( .to-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] ) {
+:host( .to-bottom-outro ) .window,
+:host( .to-bottom-outro ) > ::slotted( [slot="window"] ) {
     transform: rotateX(-22deg) scale(0.5) translateY(-40%);
   }
 
-:host ( .animate-center ){
+:host( .to-center ){
 
     justify-content: center;
 
@@ -345,14 +339,15 @@
 
 @media (max-width: 767px){
 
-    :host ( .animate-center ){
+
+    :host( .to-center ){
 
         padding: 1rem;
     }
 }
 
-:host ( .animate-center ) .window,
-:host ( .animate-center ) > ::slotted ( [slot=window] ){
+:host( .to-center ) .window,
+:host( .to-center ) > ::slotted( [slot="window"] ){
 
     opacity: 0;
 
@@ -365,33 +360,33 @@
     transition-timing-function: cubic-bezier(1, 0, 0, 1);
 }
 
-:host ( .animate-center-intro ) .window,
-:host ( .animate-center-intro ) > ::slotted ( [slot=window] ) {
+:host( .to-center-intro ) .window,
+:host( .to-center-intro ) > ::slotted( [slot="window"] ) {
     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] ){
+:host( .to-center-opened.to-center-outro ) .window,
+:host( .to-center-opened.to-center-outro ) > ::slotted( [slot="window"] ),
+:host( .to-center-opened ) .window,
+:host( .to-center-opened ) > ::slotted( [slot="window"] ){
 
     opacity: 1;
 
     transform: rotateX(0) scale(1) translateY(0);
 }
 
-:host ( .animate-center-outro ) .window,
-:host ( .animate-center-outro ) > ::slotted ( [slot=window] ) {
+:host( .to-center-outro ) .window,
+:host( .to-center-outro ) > ::slotted( [slot="window"] ) {
     transform: rotateX(-22deg) scale(0.5) translateY(-40%);
   }
 
-:host ( .animate-left ){
+:host( .to-left ){
 
     justify-content: flex-start;
 }
 
-:host ( .animate-left ) .window,
-:host ( .animate-left ) > ::slotted ( [slot=window] ){
+:host( .to-left ) .window,
+:host( .to-left ) > ::slotted( [slot="window"] ){
 
     opacity: 0;
 
@@ -404,52 +399,52 @@
     transition-timing-function: cubic-bezier(1, 0, 0, 1);
 }
 
-:host ( .animate-left-intro ) .window,
-:host ( .animate-left-intro ) > ::slotted ( [slot=window] ) {
+:host( .to-left-intro ) .window,
+:host( .to-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] ){
+:host( .to-left-opened.to-left-outro ) .window,
+:host( .to-left-opened.to-left-outro ) > ::slotted( [slot="window"] ),
+:host( .to-left-opened ) .window,
+:host( .to-left-opened ) > ::slotted( [slot="window"] ){
 
     opacity: 1;
 
     transform: translateX(0);
 }
 
-:host ( .animate-left-opened ) .close,
-:host ( .animate-left-opened.animate-left-outro ) .close{
+:host( .to-left-opened ) .close,
+:host( .to-left-opened.to-left-outro ) .close{
 
     opacity: 1;
 
   transform: translate(-24px, 24px) rotate(0);
 }
 
-:host ( .animate-left-outro ) .window,
-:host ( .animate-left-outro ) > ::slotted ( [slot=window] ) {
+:host( .to-left-outro ) .window,
+:host( .to-left-outro ) > ::slotted( [slot="window"] ) {
     transform: translateX(calc(-100% - 50px));
   }
 
-:host ( .animate-left-outro ) .close {
+:host( .to-left-outro ) .close {
   transform: translate(24px, 24px) rotate(-90deg);
 }
 
-:host ( .animate-left ) .close{
+:host( .to-left ) .close{
 
     right: 0px;
 
   transform: translate(36px, 24px) rotate(90deg);
 }
 
-:host ( .animate-right ){
+:host( .to-right ){
 
     justify-content: flex-end;
 }
 
-:host ( .animate-right ) .window,
-:host ( .animate-right ) > ::slotted ( [slot=window] ){
+:host( .to-right ) .window,
+:host( .to-right ) > ::slotted([slot="window"]){
 
     opacity: 0;
 
@@ -462,46 +457,46 @@
     transition-timing-function: cubic-bezier(1, 0, 0, 1);
 }
 
-:host ( .animate-right-intro ) .window,
-:host ( .animate-right-intro ) > ::slotted ( [slot=window] ) {
+:host( .to-right-intro ) .window,
+:host( .to-right-intro ) > ::slotted( [slot="window"] ) {
     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] ){
+:host( .to-right-opened.to-right-outro ) .window,
+:host( .to-right-opened.to-right-outro ) > ::slotted( [slot="window"] ),
+:host( .to-right-opened ) .window,
+:host( .to-right-opened ) > ::slotted( [slot="window"] ){
 
     opacity: 1;
 
     transform: translateX(0);
 }
 
-:host ( .animate-right-opened ) .close,
-:host ( .animate-right-opened.animate-right-outro ) .close{
+:host( .to-right-opened ) .close,
+:host( .to-right-opened.to-right-outro ) .close{
 
     opacity: 1;
 
   transform: translate(24px, 24px) rotate(0);
 }
 
-:host ( .animate-right-outro ) .window,
-:host ( .animate-right-outro ) > ::slotted ( [slot=window] ) {
+:host( .to-right-outro ) .window,
+:host( .to-right-outro ) > ::slotted( [slot="window"] ) {
     transform: translateX(calc(100% + 50px));
   }
 
-:host ( .animate-right-outro ) .close {
+:host( .to-right-outro ) .close {
   transform: translate(-24px, 24px) rotate(90deg);
 }
 
-:host ( .animate-right ) .close{
+:host( .to-right ) .close{
 
     left: 0px;
 
   transform: translate(-36px, 24px) rotate(-90deg);
 }
 
-:host ( .animate-top ){
+:host( .to-top ){
 
     justify-content: center;
 
@@ -510,14 +505,15 @@
 
 @media (max-width: 767px){
 
-    :host ( .animate-top ){
+
+    :host( .to-top ){
 
         padding: 1rem;
     }
 }
 
-:host ( .animate-top ) .window,
-:host ( .animate-top ) > ::slotted ( [slot=window] ){
+:host( .to-top ) .window,
+:host( .to-top ) > ::slotted( [slot="window"] ){
 
     opacity: 0;
 
@@ -530,31 +526,33 @@
     transition-timing-function: cubic-bezier(1, 0, 0, 1);
 }
 
-:host ( .animate-top-intro ) .window,
-:host ( .animate-top-intro ) > ::slotted ( [slot=window] ) {
+:host( .to-top-intro ) .window,
+:host( .to-top-intro ) > ::slotted( [slot="window"] ) {
     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] ){
+:host( .to-top-opened.to-top-outro ) .window,
+:host( .to-top-opened.to-top-outro ) > ::slotted( [slot="window"] ),
+:host( .to-top-opened ) .window,
+:host( .to-top-opened ) > ::slotted( [slot="window"] ){
 
     opacity: 1;
 
     transform: rotateX(0) scale(1) translateY(0);
 }
 
-:host ( .animate-top-outro ) .window,
-:host ( .animate-top-outro ) > ::slotted ( [slot=window] ) {
+:host( .to-top-outro ) .window,
+:host( .to-top-outro ) > ::slotted( [slot="window"] ) {
     transform: rotateX(-22deg) scale(0.5) translateY(-40%);
   }
 
 @media (max-width: 767px){
 
+
     .mobile\:w-12{
 
         width: 3rem;
     }
 }
 
+

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

@@ -4,21 +4,24 @@ import { Host, h } from '@stencil/core';
 import { KeyboardManager } from '@common/keyboard-manager';
 export class MdsModal {
   constructor() {
-    this.window = null;
-    this.top = null;
-    this.bottom = null;
+    this.window = false;
+    this.top = false;
+    this.bottom = false;
     this.animationState = 'intro';
     this.km = new KeyboardManager();
     this.componentDidLoad = () => {
+      var _a;
       this.km.addElement(this.host, 'host');
-      this.km.addElement(this.host.shadowRoot.querySelector('.close'), 'close');
+      const close = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.close');
+      if (close)
+        this.km.addElement(close, 'close');
       this.km.attachEscapeBehavior(() => this.closeEvent.emit());
       this.km.attachClickBehavior('close');
     };
-    this.animationName = (customState = null, customPosition = null) => {
-      return `animate-${customPosition !== null ? customPosition : this.position}${customState !== null ? '-' + customState : ''}`;
+    this.animationName = (customState = '', customPosition = '') => {
+      return `to-${customPosition !== '' ? customPosition : this.position}${customState !== '' ? '-' + customState : ''}`;
     };
-    this.closeModal = (e = null) => {
+    this.closeModal = (e) => {
       var _a;
       if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.localName) !== 'mds-modal') {
         return;
@@ -29,23 +32,20 @@ export class MdsModal {
       }
     };
     this.stateOpened = undefined;
-    this.opened = undefined;
-    this.position = null;
+    this.opened = false;
+    this.position = 'center';
   }
   componentWillLoad() {
+    var _a;
     this.bottom = this.host.querySelector('[slot="bottom"]') !== null;
     this.top = this.host.querySelector('[slot="top"]') !== null;
     this.window = this.host.querySelector('[slot="window"]') !== null;
     this.stateOpened = this.opened;
-    if (this.window && this.position === null) {
-      this.position = 'center';
-    }
-    if (this.position === null) {
+    if (!this.window) {
       this.position = 'right';
     }
     if (this.window) {
-      const modal = this.host.querySelector('[slot="window"]');
-      modal.setAttribute('role', 'modal');
+      (_a = this.host.querySelector('[slot="window"]')) === null || _a === void 0 ? void 0 : _a.setAttribute('role', 'modal');
     }
   }
   componentWillRender() {
@@ -66,7 +66,7 @@ export class MdsModal {
   }
   positionChange(_newValue, oldValue) {
     window.clearTimeout(this.animationDeelay);
-    this.host.classList.remove(this.animationName(null, oldValue));
+    this.host.classList.remove(this.animationName('', oldValue));
     this.host.classList.remove(this.animationName('intro', oldValue));
     this.host.classList.remove(this.animationName('outro', oldValue));
   }
@@ -82,12 +82,10 @@ export class MdsModal {
   }
   render() {
     return (h(Host, { "aria-modal": clsx(this.opened ? 'true' : 'false'), class: clsx(this.stateOpened && this.animationName('opened')), onClick: (e) => { this.closeModal(e); } }, this.window
-      ?
-        h("slot", { name: "window" })
-      :
-        h("div", { class: clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`), role: "dialog" }, this.top &&
-          h("slot", { name: "top" }), h("slot", null), this.bottom &&
-          h("slot", { name: "bottom" })), !this.window && h("i", { innerHTML: miBaselineClose, tabindex: "0", onClick: (e) => { this.closeModal(e); }, class: "svg close focusable-light" })));
+      ? h("slot", { name: "window" })
+      : h("div", { class: clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`), role: "dialog", part: "window" }, this.top &&
+        h("slot", { name: "top" }), h("slot", null), this.bottom &&
+        h("slot", { name: "bottom" })), !this.window && h("i", { innerHTML: miBaselineClose, tabindex: "0", onClick: (e) => { this.closeModal(e); }, class: "svg close focusable-light" })));
   }
   static get is() { return "mds-modal"; }
   static get encapsulation() { return "shadow"; }
@@ -112,20 +110,21 @@ export class MdsModal {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "Specifies if the modal is opened or not"
         },
         "attribute": "opened",
-        "reflect": true
+        "reflect": true,
+        "defaultValue": "false"
       },
       "position": {
         "type": "string",
         "mutable": true,
         "complexType": {
           "original": "ModalPositionType",
-          "resolved": "\"bottom\" | \"center\" | \"left\" | \"right\" | \"top\"",
+          "resolved": "\"bottom\" | \"center\" | \"left\" | \"right\" | \"top\" | undefined",
           "references": {
             "ModalPositionType": {
               "location": "import",
@@ -141,7 +140,7 @@ export class MdsModal {
         },
         "attribute": "position",
         "reflect": true,
-        "defaultValue": "null"
+        "defaultValue": "'center'"
       }
     };
   }

package/dist/collection/dictionary/button.js

@@ -13,6 +13,10 @@ const buttonToneVariantDictionary = [
   'ghost',
   'quiet',
 ];
+const buttonTargetDictionary = [
+  'blank',
+  'self',
+];
 const buttonSizeDictionary = [
   'sm',
   'md',
@@ -23,4 +27,4 @@ const buttonIconPositionDictionary = [
   'left',
   'right',
 ];
-export { buttonSizeDictionary, buttonToneVariantDictionary, buttonVariantDictionary, buttonIconPositionDictionary, };
+export { buttonIconPositionDictionary, buttonSizeDictionary, buttonTargetDictionary, buttonToneVariantDictionary, buttonVariantDictionary, };

package/dist/collection/dictionary/variant.js

@@ -53,6 +53,14 @@ const toneVariantDictionary = [
   'ghost',
   'quiet',
 ];
+const toneActionVariantDictionary = [
+  'primary',
+  'secondary',
+  'tertiary',
+  'strong',
+  'weak',
+  'quiet',
+];
 const toneSimpleVariantDictionary = [
   'strong',
   'weak',
@@ -62,4 +70,4 @@ const toneMinimalVariantDictionary = [
   'strong',
   'weak',
 ];
-export { themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantDictionary, toneMinimalVariantDictionary, toneSimpleVariantDictionary, toneVariantDictionary, };
+export { themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantDictionary, toneActionVariantDictionary, toneMinimalVariantDictionary, toneSimpleVariantDictionary, toneVariantDictionary, };