@maggioli-design-system/mds-modal 3.5.0 → 3.6.0

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

@@ -1,102 +1,171 @@
 @tailwind components;
+
+.focus-off,
+  .focusable,
+  .focusable-light,
+  .focusable-light-off{
+
+    transition-duration: 200ms;
+
+    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+
+    outline-offset: var(--magma-outline-blur-offset);
+    outline: var(--magma-outline-blur);
+    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;
+
+    height: 100%;
+
+    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 {
+    transform: translateX(calc(100% + 50px));
+  }
 .fixed{
+
     position: fixed;
 }
 .absolute{
+
     position: absolute;
 }
 .mx-6{
+
     margin-left: 1.5rem;
+
     margin-right: 1.5rem;
 }
 .ml-auto{
+
     margin-left: auto;
 }
 .flex{
+
     display: flex;
 }
 .w-16{
+
     width: 4rem;
 }
 .min-w-0{
+
     min-width: 0px;
 }
 .max-w-lg{
+
     max-width: 32rem;
 }
 .max-w-xl{
+
     max-width: 36rem;
 }
 .items-center{
+
     align-items: center;
 }
 .gap-4{
+
     gap: 1rem;
 }
 .truncate{
+
     overflow: hidden;
+
     text-overflow: ellipsis;
+
     white-space: nowrap;
 }
 .rounded-full{
+
     border-radius: 9999px;
 }
 .border{
+
     border-width: 1px;
 }
 .border-b{
+
     border-bottom-width: 1px;
 }
 .border-t{
+
     border-top-width: 1px;
 }
 .border-tone-neutral-09{
+
     --tw-border-opacity: 1;
+
     border-color: rgba(var(--tone-neutral-09), var(--tw-border-opacity));
 }
 .bg-transparent{
+
     background-color: transparent;
 }
 .p-8{
+
     padding: 2rem;
 }
 .p-4{
+
     padding: 1rem;
 }
 .text-tone-neutral-02{
+
     --tw-text-opacity: 1;
+
     color: rgba(var(--tone-neutral-02), var(--tw-text-opacity));
 }
 .text-tone-neutral-04{
+
     --tw-text-opacity: 1;
+
     color: rgba(var(--tone-neutral-04), var(--tw-text-opacity));
 }
 .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);
+
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.svg{
-    display: flex;
-}
-.svg svg{
-    aspect-ratio: 1 / 1;
-    height: 100%;
-    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 {
-    transform: translateX(calc(100% + 50px));
-  }
-
 
 /**
   * @prop --mds-modal-overlay-color: Set the overlay color of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.
@@ -132,12 +201,16 @@
 }
 
 :host ( [position=top] ){
+
     align-items: flex-start;
+
     justify-content: center;
 }
 
 :host ( [position=bottom] ){
+
     align-items: flex-end;
+
     justify-content: center;
 }
 
@@ -146,34 +219,52 @@
 :host ( .animate-left-opened ),
 :host ( .animate-right-opened ),
 :host ( .animate-top-opened ){
+
     pointer-events: auto;
+
     transition-duration: 500ms;
 
   background-color: rgba(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity));
 }
 
 .close{
+
     position: absolute;
+
     top: 0px;
+
     height: 2.25rem;
+
     width: 2.25rem;
+
     transform-origin: center;
+
     cursor: pointer;
+
+    border-radius: 9999px;
+
     fill: rgb(var(--tone-neutral-10));
+
     font-size: 2.25rem;
+
     line-height: 2.5rem;
+
     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(0.77, 0, 0.175, 1);
 
+  transition-property: opacity, outline, outline-offset, transform;
   transform: translate(0, 24px) rotate(90deg);
 }
 
 .window{
+
     display: grid;
+
     height: 100%;
+
     gap: 0px;
 
   background-color: var(--mds-modal-window-background);
@@ -196,22 +287,31 @@
 }
 
 :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, 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);
 }
 
@@ -224,6 +324,7 @@
 :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);
@@ -235,22 +336,31 @@
   }
 
 :host ( .animate-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;
+
     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);
 }
 
@@ -263,6 +373,7 @@
 :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);
@@ -274,15 +385,21 @@
   }
 
 :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, 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);
 }
 
@@ -295,6 +412,7 @@
 :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);
@@ -302,6 +420,7 @@
 
 :host ( .animate-left-opened ) .close,
 :host ( .animate-left-opened.animate-left-outro ) .close{
+
     opacity: 1;
 
   transform: translate(-24px, 24px) rotate(0);
@@ -317,21 +436,28 @@
 }
 
 :host ( .animate-left ) .close{
+
     right: 0px;
 
   transform: translate(36px, 24px) rotate(90deg);
 }
 
 :host ( .animate-right ){
+
     justify-content: flex-end;
 }
 
 :host ( .animate-right ) .window,
 :host ( .animate-right ) > ::slotted ( [slot=window] ){
+
     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);
 }
 
@@ -344,6 +470,7 @@
 :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);
@@ -351,6 +478,7 @@
 
 :host ( .animate-right-opened ) .close,
 :host ( .animate-right-opened.animate-right-outro ) .close{
+
     opacity: 1;
 
   transform: translate(24px, 24px) rotate(0);
@@ -366,28 +494,38 @@
 }
 
 :host ( .animate-right ) .close{
+
     left: 0px;
 
   transform: translate(-36px, 24px) rotate(-90deg);
 }
 
 :host ( .animate-top ){
+
     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;
+
     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);
 }
 
@@ -400,6 +538,7 @@
 :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: rotateX(0) scale(1) translateY(0);
@@ -411,7 +550,9 @@
   }
 
 @media (max-width: 767px){
+
     .mobile\:w-12{
+
         width: 3rem;
     }
 }

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

@@ -1,20 +1,23 @@
 import { Host, h } from '@stencil/core';
 import clsx from 'clsx';
 import miBaselineClose from '@icon/mi/baseline/close.svg';
+import { KeyboardManager } from '@common/keyboard-manager';
 export class MdsModal {
   constructor() {
     this.window = null;
     this.top = null;
     this.bottom = null;
     this.animationState = 'intro';
+    this.km = new KeyboardManager();
+    this.componentDidLoad = () => {
+      this.km.addElement(this.host, 'host');
+      this.km.addElement(this.host.shadowRoot.querySelector('.close'), 'close');
+      this.km.attachEscapeBehavior(() => this.close.emit());
+      this.km.attachClickBehavior('close');
+    };
     this.animationName = (customState = null, customPosition = null) => {
       return `animate-${customPosition !== null ? customPosition : this.position}${customState !== null ? '-' + customState : ''}`;
     };
-    this.checkKeyboardEscape = (event) => {
-      if (event.code === 'Escape') {
-        this.close.emit();
-      }
-    };
     this.closeModal = (e = null) => {
       var _a;
       if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.localName) !== 'mds-modal') {
@@ -30,9 +33,9 @@ export class MdsModal {
     this.position = null;
   }
   componentWillLoad() {
-    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.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';
@@ -41,50 +44,35 @@ export class MdsModal {
       this.position = 'right';
     }
     if (this.window) {
-      const modal = this.hostElement.querySelector('[slot="window"]');
+      const modal = this.host.querySelector('[slot="window"]');
       modal.setAttribute('role', 'modal');
     }
   }
   componentWillRender() {
     this.animationState = this.opened ? 'intro' : 'outro';
-    this.hostElement.classList.add(this.animationName());
+    this.host.classList.add(this.animationName());
   }
   componentDidRender() {
     this.animationDeelay = window.setTimeout(() => {
       this.animationState = this.animationState === 'intro' ? 'outro' : 'intro';
-      this.hostElement.classList.remove(this.animationName(this.animationState === 'intro' ? 'outro' : 'intro'));
-      this.hostElement.classList.add(this.animationName(this.animationState));
+      this.host.classList.remove(this.animationName(this.animationState === 'intro' ? 'outro' : 'intro'));
+      this.host.classList.add(this.animationName(this.animationState));
       window.clearTimeout(this.animationDeelay);
     }, 500);
-    if (this.opened) {
-      this.addKeyboardEscapeListener();
-      return;
-    }
-    this.removeKeyboardEscapeListener();
   }
   disconnectedCallback() {
-    this.removeKeyboardEscapeListener();
+    this.km.detachEscapeBehavior();
+    this.km.detachClickBehavior('close');
   }
   positionChange(_newValue, oldValue) {
     window.clearTimeout(this.animationDeelay);
-    this.hostElement.classList.remove(this.animationName(null, oldValue));
-    this.hostElement.classList.remove(this.animationName('intro', oldValue));
-    this.hostElement.classList.remove(this.animationName('outro', oldValue));
-  }
-  addKeyboardEscapeListener() {
-    window.addEventListener('keydown', this.checkKeyboardEscape.bind(this));
-  }
-  removeKeyboardEscapeListener() {
-    window.removeEventListener('keydown', this.checkKeyboardEscape.bind(this));
+    this.host.classList.remove(this.animationName(null, oldValue));
+    this.host.classList.remove(this.animationName('intro', oldValue));
+    this.host.classList.remove(this.animationName('outro', oldValue));
   }
   openedChange(newValue) {
     this.stateOpened = newValue;
     window.clearTimeout(this.animationDeelay);
-    if (newValue) {
-      this.addKeyboardEscapeListener();
-      return;
-    }
-    this.removeKeyboardEscapeListener();
   }
   onCloseListener() {
     this.opened = false;
@@ -96,7 +84,7 @@ export class MdsModal {
       :
         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, class: "svg close" })));
+          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"; }
@@ -177,7 +165,7 @@ export class MdsModal {
         }
       }];
   }
-  static get elementRef() { return "hostElement"; }
+  static get elementRef() { return "host"; }
   static get watchers() {
     return [{
         "propName": "position",

package/dist/collection/dictionary/typography.js

@@ -21,6 +21,10 @@ const typographyVariationsDictionary = [
   'read',
   'code',
 ];
+const typographyReadingVariationsDictionary = [
+  'info',
+  'read',
+];
 const typographyMonoDictionary = [
   'snippet',
   'hack',
@@ -56,4 +60,4 @@ const typographyTooltipDictionary = [
   'detail',
   'tip',
 ];
-export { typographyDictionary, typographyVariationsDictionary, typographyMonoDictionary, typographyTitleDictionary, typographyInfoDictionary, typographyReadDictionary, typographySmallerDictionary, typographyTooltipDictionary, };
+export { typographyDictionary, typographyInfoDictionary, typographyReadingVariationsDictionary, typographyMonoDictionary, typographyReadDictionary, typographySmallerDictionary, typographyTitleDictionary, typographyTooltipDictionary, typographyVariationsDictionary, };