@maggioli-design-system/mds-modal 4.4.2 → 4.7.0

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

@@ -1,52 +1,26 @@
-/* stylelint-disable */
-@tailwind components;
-@tailwind utilities;
-
-
-.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);
+@keyframes focus-bounce {
+  0%, 75%, 100% {
+    outline-offset: var(--magma-outline-focus-offset);
   }
 
-
-.focus-light-on,
-  .focusable-light:focus-visible {
-
-    --magma-outline-blur: 2px solid rgb(var(--tone-neutral));
+  50% {
+    outline-offset: var(--magma-outline-blur-offset);
   }
-
-
-.svg{
-
-    display: flex;
 }
+ /* included for focus effect */
+@tailwind components;
+@tailwind utilities;
 
 
-.svg svg{
-
-    aspect-ratio: 1 / 1;
+.svg {
+  display: flex;
+}
 
-    height: 100%;
 
-    width: 100%;
+.svg svg {
+  aspect-ratio: 1 / 1;
+  height: 100%;
+  width: 100%;
 }
 
 
@@ -54,113 +28,82 @@
   .animate-right-outro {
     transform: translateX(calc(100% + 50px));
   }
-.fixed{
-
-    position: fixed;
+.fixed {
+  position: fixed;
 }
-.absolute{
-
-    position: absolute;
+.absolute {
+  position: absolute;
 }
-.mx-6{
-
-    margin-left: 1.5rem;
-
-    margin-right: 1.5rem;
+.mx-6 {
+  margin-left: 1.5rem;
+  margin-right: 1.5rem;
 }
-.ml-auto{
-
-    margin-left: auto;
+.ml-auto {
+  margin-left: auto;
 }
-.flex{
-
-    display: flex;
+.flex {
+  display: flex;
 }
-.w-16{
-
-    width: 4rem;
+.w-16 {
+  width: 4rem;
 }
-.min-w-0{
-
-    min-width: 0px;
+.min-w-0 {
+  min-width: 0px;
 }
-.max-w-lg{
-
-    max-width: 32rem;
+.max-w-lg {
+  max-width: 32rem;
 }
-.max-w-xl{
-
-    max-width: 36rem;
+.max-w-xl {
+  max-width: 36rem;
 }
-.items-center{
-
-    align-items: center;
+.items-center {
+  align-items: center;
 }
-.gap-4{
-
-    gap: 1rem;
+.gap-4 {
+  gap: 1rem;
 }
-.truncate{
-
-    overflow: hidden;
-
-    text-overflow: ellipsis;
-
-    white-space: nowrap;
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.rounded-full{
-
-    border-radius: 9999px;
+.rounded-full {
+  border-radius: 9999px;
 }
-.border{
-
-    border-width: 1px;
+.border {
+  border-width: 1px;
 }
-.border-b{
-
-    border-bottom-width: 1px;
+.border-b {
+  border-bottom-width: 1px;
 }
-.border-t{
-
-    border-top-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));
+.border-tone-neutral-09 {
+  --tw-border-opacity: 1;
+  border-color: rgb(var(--tone-neutral-09) / var(--tw-border-opacity));
 }
-.bg-transparent{
-
-    background-color: transparent;
+.bg-transparent {
+  background-color: transparent;
 }
-.p-4{
-
-    padding: 1rem;
+.p-4 {
+  padding: 1rem;
 }
-.p-8{
-
-    padding: 2rem;
+.p-8 {
+  padding: 2rem;
 }
-.text-tone-neutral-02{
-
-    --tw-text-opacity: 1;
-
-    color: rgba(var(--tone-neutral-02), var(--tw-text-opacity));
+.text-tone-neutral-02 {
+  --tw-text-opacity: 1;
+  color: rgb(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));
+.text-tone-neutral-04 {
+  --tw-text-opacity: 1;
+  color: rgb(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);
+.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);
 }
 
 /**
@@ -195,12 +138,12 @@
   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;
 }
@@ -209,47 +152,35 @@
 :host( .to-center-opened ),
 :host( .to-left-opened ),
 :host( .to-right-opened ),
-:host( .to-top-opened ){
-
-    transition-duration: 500ms;
+:host( .to-top-opened ) {
+  transition-duration: 500ms;
 
   background-color: rgba(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity));
   pointer-events: auto;
 }
 
-.close{
-
-    top: 0px;
-
-    height: 2.25rem;
-
-    width: 2.25rem;
-
-    border-radius: 9999px;
-
-    font-size: 2.25rem;
-
-    line-height: 2.5rem;
-
-    opacity: 0;
-
-    transition-duration: 500ms;
-
-    transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
+.close {
+  top: 0px;
+  height: 2.25rem;
+  width: 2.25rem;
+  border-radius: 9999px;
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+  opacity: 0;
+  transition-duration: 500ms;
+  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
 
   cursor: pointer;
   fill: inherit;
   position: absolute;
-  transform-origin: center;
   transform: translate(0, 24px) rotate(90deg);
+  transform-origin: center;
   transition-property: opacity, outline, outline-offset, transform;
 }
 
-.window{
-
-    height: 100%;
-
-    gap: 0px;
+.window {
+  height: 100%;
+  gap: 0px;
 
   background-color: var(--mds-modal-window-background);
   box-shadow: var(--mds-modal-window-shadow);
@@ -271,18 +202,14 @@
   grid-template-rows: auto 1fr auto;
 }
 
-:host( .to-bottom ){
-
-    padding: 2rem;
+:host( .to-bottom ) {
+  padding: 2rem;
 }
 
-@media (max-width: 767px){
-
-
-    :host( .to-bottom ){
-
-        padding: 1rem;
-    }
+@media (max-width: 767px) {
+  :host( .to-bottom ) {
+    padding: 1rem;
+  }
 }
 
 :host( .to-bottom ) {
@@ -291,17 +218,12 @@
 }
 
 :host( .to-bottom ) .window,
-:host( .to-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);
+:host( .to-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);
 }
 
 :host( .to-bottom-intro ) .window,
@@ -312,9 +234,8 @@
 :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;
+:host( .to-bottom-opened ) > ::slotted( [slot="window"] ) {
+  opacity: 1;
 
     transform: rotateX(0) scale(1) translateY(0);
 }
@@ -324,18 +245,14 @@
     transform: rotateX(-22deg) scale(0.5) translateY(-40%);
   }
 
-:host( .to-center ){
-
-    padding: 2rem;
+:host( .to-center ) {
+  padding: 2rem;
 }
 
-@media (max-width: 767px){
-
-
-    :host( .to-center ){
-
-        padding: 1rem;
-    }
+@media (max-width: 767px) {
+  :host( .to-center ) {
+    padding: 1rem;
+  }
 }
 
 :host( .to-center ) {
@@ -344,17 +261,12 @@
 }
 
 :host( .to-center ) .window,
-:host( .to-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);
+:host( .to-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);
 }
 
 :host( .to-center-intro ) .window,
@@ -365,9 +277,8 @@
 :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;
+:host( .to-center-opened ) > ::slotted( [slot="window"] ) {
+  opacity: 1;
 
     transform: rotateX(0) scale(1) translateY(0);
 }
@@ -382,17 +293,12 @@
 }
 
 :host( .to-left ) .window,
-:host( .to-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);
+:host( .to-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);
 }
 
 :host( .to-left-intro ) .window,
@@ -403,17 +309,15 @@
 :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;
+:host( .to-left-opened ) > ::slotted( [slot="window"] ) {
+  opacity: 1;
 
     transform: translateX(0);
 }
 
 :host( .to-left-opened ) .close,
-:host( .to-left-opened.to-left-outro ) .close{
-
-    opacity: 1;
+:host( .to-left-opened.to-left-outro ) .close {
+  opacity: 1;
 
   transform: translate(-24px, 24px) rotate(0);
 }
@@ -427,9 +331,8 @@
   transform: translate(24px, 24px) rotate(-90deg);
 }
 
-:host( .to-left ) .close{
-
-    right: 0px;
+:host( .to-left ) .close {
+  right: 0px;
 
   transform: translate(36px, 24px) rotate(90deg);
 }
@@ -439,17 +342,12 @@
 }
 
 :host( .to-right ) .window,
-:host( .to-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);
+:host( .to-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);
 }
 
 :host( .to-right-intro ) .window,
@@ -460,17 +358,15 @@
 :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;
+:host( .to-right-opened ) > ::slotted( [slot="window"] ) {
+  opacity: 1;
 
     transform: translateX(0);
 }
 
 :host( .to-right-opened ) .close,
-:host( .to-right-opened.to-right-outro ) .close{
-
-    opacity: 1;
+:host( .to-right-opened.to-right-outro ) .close {
+  opacity: 1;
 
   transform: translate(24px, 24px) rotate(0);
 }
@@ -484,25 +380,20 @@
   transform: translate(-24px, 24px) rotate(90deg);
 }
 
-:host( .to-right ) .close{
-
-    left: 0px;
+:host( .to-right ) .close {
+  left: 0px;
 
   transform: translate(-36px, 24px) rotate(-90deg);
 }
 
-:host( .to-top ){
-
-    padding: 2rem;
+:host( .to-top ) {
+  padding: 2rem;
 }
 
-@media (max-width: 767px){
-
-
-    :host( .to-top ){
-
-        padding: 1rem;
-    }
+@media (max-width: 767px) {
+  :host( .to-top ) {
+    padding: 1rem;
+  }
 }
 
 :host( .to-top ) {
@@ -511,17 +402,12 @@
 }
 
 :host( .to-top ) .window,
-:host( .to-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);
+:host( .to-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);
 }
 
 :host( .to-top-intro ) .window,
@@ -532,9 +418,8 @@
 :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;
+:host( .to-top-opened ) > ::slotted( [slot="window"] ) {
+  opacity: 1;
 
     transform: rotateX(0) scale(1) translateY(0);
 }
@@ -544,13 +429,10 @@
     transform: rotateX(-22deg) scale(0.5) translateY(-40%);
   }
 
-@media (max-width: 767px){
-
-
-    .mobile\:w-12{
-
-        width: 3rem;
-    }
+@media (max-width: 767px) {
+  .mobile\:w-12 {
+    width: 3rem;
+  }
 }
 
 

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

@@ -91,7 +91,7 @@ export class MdsModal {
       ? 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" })));
+        h("slot", { name: "bottom" })), !this.window && h("i", { innerHTML: miBaselineClose, tabindex: "0", onClick: (e) => { this.closeModal(e); }, class: "svg close focus-bounce-light" })));
   }
   static get is() { return "mds-modal"; }
   static get encapsulation() { return "shadow"; }

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

@@ -15,7 +15,7 @@ describe('mds-modal', () => {
       <div class="window" part="window" role="dialog">
         <slot></slot>
       </div>
-      <i class="close focusable-light svg" tabindex="0">
+      <i class="close focus-bounce-light svg" tabindex="0">
         <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
           <path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"></path>
         </svg>
@@ -31,7 +31,7 @@ describe('mds-modal', () => {
       <div class="window" part="window" role="dialog">
         <slot></slot>
       </div>
-      <i class="close focusable-light svg" tabindex="0">
+      <i class="close focus-bounce-light svg" tabindex="0">
         <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
           <path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"></path>
         </svg>

package/dist/collection/dictionary/input.js

@@ -0,0 +1,21 @@
+const inputTextTypeDictionary = [
+  'date',
+  'email',
+  'number',
+  'password',
+  'search',
+  'tel',
+  'text',
+  'textarea',
+  'time',
+  'url',
+];
+const inputControlsLayoutDictionary = [
+  'horizontal',
+  'vertical',
+];
+const inputControlsIconDictionary = [
+  'arrow',
+  'arithmetic',
+];
+export { inputControlsIconDictionary, inputControlsLayoutDictionary, inputTextTypeDictionary, };

package/dist/collection/dictionary/typography.js

@@ -60,4 +60,8 @@ const typographyTooltipDictionary = [
   'detail',
   'tip',
 ];
-export { typographyDictionary, typographyInfoDictionary, typographyReadingVariationsDictionary, typographyMonoDictionary, typographyReadDictionary, typographySmallerDictionary, typographyTitleDictionary, typographyTooltipDictionary, typographyVariationsDictionary, };
+const typographyInputDictionary = [
+  'snippet',
+  'detail',
+];
+export { typographyDictionary, typographyInfoDictionary, typographyInputDictionary, typographyMonoDictionary, typographyReadDictionary, typographyReadingVariationsDictionary, typographySmallerDictionary, typographyTitleDictionary, typographyTooltipDictionary, typographyVariationsDictionary, };