@massimo-cassandro/minimo 1.16.2 → 1.17.1

package/src/components/modal-alert/modal-alert.module.css

@@ -0,0 +1,145 @@
+.malert {
+  width: 600px;
+  max-width: 90vw;
+  padding: 0;
+  background-color: var(--malert-background-color);
+  border: none;
+  border-radius: var(--malert-border-radius);
+  box-shadow: var(--malert-box-shadow, var(--default-box-shadow));
+  /* box-shadow: 2px 2px 12px #000; */
+
+  &::backdrop {
+    overscroll-behavior: contain;
+    background-color: var(--malert-backdrop);
+  }
+
+  &, * {
+    box-sizing: border-box;
+  }
+}
+
+.success {
+  --_malert-color: var(--malert-success-bg);
+  --_malert-color-fg: var(--malert-success-fg);
+}
+.info {
+  --_malert-color: var(--malert-info-bg);
+  --_malert-color-fg: var(--malert-info-fg);
+}
+.warning {
+  --_malert-color: var(--malert-warning-bg);
+  --_malert-color-fg: var(--malert-warning-fg);
+}
+.error {
+  --_malert-color: var(--malert-error-bg);
+  --_malert-color-fg: var(--malert-error-fg);
+}
+.confirm {
+  --_malert-color: var(--malert-confirm-bg);
+  --_malert-color-fg: var(--malert-confirm-fg);
+}
+
+
+.innerWrapper{
+  display: flex;
+  flex-flow: column nowrap;
+  /* gap: .7rem; */
+  align-items: stretch;
+  justify-content: flex-start;
+
+  @media screen and (min-width: 600px) {
+    flex-direction: row;
+  }
+}
+
+
+.mMark {
+  display: flex;
+  flex: 0;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: .4rem;
+  background-color: var(--_malert-color-bg);
+
+  svg {
+    width: 100px;
+    aspect-ratio: 1;
+    fill: var(--_malert-color-fg);
+  }
+
+  @media screen and (min-width: 600px) {
+    flex-direction: row;
+    align-items: flex-start;
+    width: auto;
+    padding: 1rem;
+    /* svg {
+      width: 100px;
+    } */
+  }
+}
+
+.mBody {
+  display: flex;
+  flex: 1;
+  flex-flow: column nowrap;
+  gap: .5rem;
+  align-items: stretch;
+  justify-content: flex-start;
+  padding: .5rem;
+
+  text-align: center;
+
+  @media screen and (min-width: 600px) {
+    padding: 1rem;
+    text-align: left;
+  }
+}
+
+.mHeading {
+  font-family: var(--malert-heading-font-family);
+  font-size: var(--malert-heading-font-size);
+  font-weight: var(--malert-heading-font-weight);
+  line-height: var(--malert-heading-line-height);
+}
+.mText {
+  font-family: var(--malert-text-font-family);
+  font-size: var(--malert-text-font-size);
+}
+
+.mBtns {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 1rem;
+  align-items: center;
+  justify-content: flex-start;
+
+  padding-top: 1rem;
+  margin-top: auto;
+
+  @media screen and (min-width: 600px) {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+
+
+.mAnimated {
+  transform: translateY(-500%);
+  animation: dialog-in .3s ease-out;
+
+  &[open] {
+    transform: none;
+  }
+}
+
+@keyframes dialog-in {
+  from {
+    opacity: 0;
+    transform: translateY(-50%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/src/components/modal-alert/svg/confirm.svg

@@ -1 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 132"><circle cx="66" cy="66" r="63"/><path d="M44 48a21.928 21.928 0 0 1 6.443-15.556A21.931 21.931 0 0 1 66 26c12.15 0 22 9.85 22 22 0 6.14-2.668 11.543-6.573 15.683-6.514 6.91-15.363 4.47-15.363 16.065v7.935M66 105.816v-6.975"/></svg>
+<svg width="134" height="134" viewBox="0 0 134 134" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M126.5 67C126.5 34.1391 99.8609 7.5 67 7.5C34.1391 7.5 7.5 34.1391 7.5 67C7.5 99.8609 34.1391 126.5 67 126.5C99.8609 126.5 126.5 99.8609 126.5 67ZM133.5 67C133.5 103.727 103.727 133.5 67 133.5C30.2731 133.5 0.5 103.727 0.5 67C0.5 30.2731 30.2731 0.5 67 0.5C103.727 0.5 133.5 30.2731 133.5 67Z" fill="#8720C5"/>
+<path d="M66.2711 92.088C70.854 92.0881 74.5417 95.761 74.569 100.238C74.5416 104.716 70.8539 108.389 66.2711 108.389C55.2711 107.989 55.2711 92.488 66.2711 92.088ZM74.5709 100.288C74.5709 100.272 74.5691 100.255 74.569 100.238C74.5691 100.222 74.5709 100.205 74.5709 100.189V100.288ZM43.4703 35.2882C52.9703 22.6882 80.7705 23.0887 90.1705 35.3887L90.4703 35.2882C94.4703 40.1882 95.2711 49.7885 92.2711 55.6885C91.0711 58.1885 89.4705 60.288 87.6705 62.088C84.2705 65.488 79.7707 68.0884 75.8707 70.4884C74.0708 71.5883 72.6705 72.6884 71.6705 73.9884C69.4707 77.0883 69.2711 80.1883 69.2711 84.2882H63.4703C60.9704 75.8883 61.6711 68.8887 69.0709 63.8887C75.2709 59.3887 82.8707 54.9882 82.3707 46.2882C82.4707 42.8883 81.6708 40.1883 80.0709 37.9884C78.5709 35.7884 76.4707 34.1885 73.8707 33.1885C68.7709 30.9886 61.5711 30.9881 56.2711 33.088C51.5712 34.7879 47.8706 38.1881 46.6705 43.088C48.9705 43.088 50.8707 43.4887 52.3707 44.3887C55.5705 46.1888 55.6707 50.9881 53.0709 53.2882C50.4709 55.5882 45.1703 55.2885 42.4703 52.6885C38.0705 48.5885 40.2704 39.2882 43.4703 35.2882Z" fill="#8720C5"/>
+</svg>

package/src/components/modal-alert/svg/danger.svg

@@ -0,0 +1,4 @@
+<svg width="134" height="134" viewBox="0 0 134 134" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M61.16 100.44C61.16 98.7867 61.72 97.4 62.84 96.28C63.96 95.16 65.32 94.6 66.92 94.6C68.5733 94.6 69.96 95.16 71.08 96.28C72.2 97.4 72.76 98.7867 72.76 100.44C72.76 102.04 72.2 103.4 71.08 104.52C69.96 105.64 68.5733 106.2 66.92 106.2C65.32 106.2 63.96 105.667 62.84 104.6C61.72 103.48 61.16 102.093 61.16 100.44ZM69.16 88.84H64.68C64.68 85.8533 64.6267 83.1867 64.52 80.84C64.4667 78.44 64.3333 76.3333 64.12 74.52C63.96 72.6533 63.7733 70.9467 63.56 69.4C63.3467 67.8 63.1333 66.2533 62.92 64.76C62.5467 62.6267 62.2267 60.7867 61.96 59.24C61.6933 57.64 61.4533 56.0933 61.24 54.6C61.08 53.1067 61 51.4267 61 49.56C61 47.48 61.5067 45.88 62.52 44.76C63.5333 43.5867 65 43 66.92 43C68.84 43 70.3067 43.5867 71.32 44.76C72.3333 45.88 72.84 47.48 72.84 49.56C72.84 51.3733 72.7333 53.0267 72.52 54.52C72.36 56.0133 72.1467 57.5867 71.88 59.24C71.6133 60.84 71.2933 62.7333 70.92 64.92C70.6533 66.3067 70.4133 67.8 70.2 69.4C69.9867 70.9467 69.8 72.6533 69.64 74.52C69.48 76.3867 69.3467 78.4933 69.24 80.84C69.1867 83.1333 69.16 85.8 69.16 88.84Z" fill="#CC0000"/>
+<path d="M62.8659 12.5C64.7904 9.16666 69.6015 9.16668 71.526 12.5L131.715 116.75C133.639 120.083 131.233 124.25 127.384 124.25H7.00747L6.65102 124.238C3.01218 123.991 0.812961 119.979 2.67739 116.75L62.8659 12.5ZM10.4713 117.25H123.921L67.1959 19L10.4713 117.25Z" fill="#CC0000"/>
+</svg>

package/src/components/modal-alert/svg/error.svg

@@ -1 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 132"><circle cx="66" cy="66" r="63"/><path d="M35 39l61.4 54.4m0-54.4L35 93.2"/></svg>
+<svg width="134" height="134" viewBox="0 0 134 134" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M126.5 67C126.5 34.1391 99.8609 7.5 67 7.5C34.1391 7.5 7.5 34.1391 7.5 67C7.5 99.8609 34.1391 126.5 67 126.5C99.8609 126.5 126.5 99.8609 126.5 67ZM133.5 67C133.5 103.727 103.727 133.5 67 133.5C30.2731 133.5 0.5 103.727 0.5 67C0.5 30.2731 30.2731 0.5 67 0.5C103.727 0.5 133.5 30.2731 133.5 67Z" fill="#CC0000"/>
+<path d="M33.3795 37.6783C34.6613 36.2317 36.8741 36.0981 38.3209 37.3795L66.6471 62.4762L95.0836 37.3756C96.5327 36.0967 98.7448 36.2345 100.024 37.6832C101.303 39.1324 101.165 41.3445 99.7155 42.6237L71.9264 67.1539L99.7203 91.7799C101.167 93.0617 101.301 95.2735 100.019 96.7203C98.7373 98.1672 96.5256 98.301 95.0787 97.0192L66.6383 71.8219L38.316 96.8239C36.8669 98.103 34.6548 97.9652 33.3756 96.5162C32.0968 95.0671 32.2344 92.8549 33.6832 91.5758L61.359 67.1442L33.6783 42.6198C32.2319 41.3379 32.0978 39.125 33.3795 37.6783Z" fill="#CC0000"/>
+</svg>

package/src/components/modal-alert/svg/info.svg

@@ -1 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 132"><circle cx="66" cy="66" r="63"/><path d="M74 105l-8.6.237V45.713L56 46m9.6-13.025V26"/></svg>
+<svg width="134" height="134" viewBox="0 0 134 134" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M127 67.5C127 34.6391 100.361 8 67.5 8C34.6391 8 8 34.6391 8 67.5C8 100.361 34.6391 127 67.5 127C100.361 127 127 100.361 127 67.5ZM134 67.5C134 104.227 104.227 134 67.5 134C30.7731 134 1 104.227 1 67.5C1 30.7731 30.7731 1 67.5 1C104.227 1 134 30.7731 134 67.5Z" fill="#0288D1"/>
+<path d="M71.1602 45.0811C73.1598 45.0811 74.6397 45.6812 75.5996 46.8809C76.6396 48.0008 77.1601 50.0812 77.1602 53.1211C77.1602 54.641 76.8401 56.5611 76.2002 58.8809C75.5602 61.1208 74.6795 63.801 73.5596 66.9209C70.7595 74.521 67.9462 82.1164 65.1602 89.7217C65.0001 90.2817 64.6801 91.1616 64.2002 92.3613C63.8002 93.5612 63.4401 94.8012 63.1201 96.0811C62.8001 97.2809 62.6397 98.2811 62.6396 99.0811C62.6396 99.801 62.8402 100.441 63.2402 101.001C63.6402 101.561 64.2802 101.842 65.1602 101.842C66.3601 101.842 67.6 101.361 68.8799 100.401C70.1598 99.4415 71.3997 98.2416 72.5996 96.8018C73.8796 95.3618 74.9599 93.9615 75.8398 92.6016C76.7998 91.2416 77.52 90.1613 78 89.3613L81.5996 91.4014C80.6396 93.3213 79.3196 95.4418 77.6396 97.7617C76.0398 100.002 74.1999 102.161 72.1201 104.241C70.0402 106.241 67.7601 107.881 65.2803 109.161C62.8003 110.441 60.2396 111.081 57.5996 111.081C55.2797 111.081 53.5193 110.481 52.3193 109.281C51.1995 108.001 50.6396 106.001 50.6396 103.281C50.6397 100.961 50.9998 98.4816 51.7197 95.8418C54.2588 87.2088 57.4964 78.7666 60.4795 70.2812C61.5994 67.1614 62.3999 64.6416 62.8799 62.7217C63.3599 60.7217 63.5996 59.2011 63.5996 58.1611C63.5996 57.0412 63.4 56.321 63 56.001C62.68 55.6011 62.3198 55.4014 61.9199 55.4014C60.7999 55.4014 59.4799 56.0814 57.96 57.4414C56.5201 58.8013 55.1999 60.281 54 61.8809C52.8 63.4809 51.9595 64.7216 51.4795 65.6016L48 63.4414C48.96 61.6014 50.28 59.6415 51.96 57.5615C53.7199 55.4816 55.6799 53.4815 57.8398 51.5615C60.0798 49.6415 62.3196 48.0809 64.5596 46.8809C66.8796 45.6809 69.0802 45.0811 71.1602 45.0811ZM78.7998 23C83.2181 23 86.7998 26.5817 86.7998 31C86.7998 35.4183 83.2181 39 78.7998 39C74.3815 39 70.7998 35.4183 70.7998 31C70.7998 26.5817 74.3815 23 78.7998 23Z" fill="#0288D1"/>
+</svg>

package/src/components/modal-alert/svg/success.svg

@@ -1 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 132"><circle cx="66" cy="66" r="63"/><path d="M101.4 42L52.7 90.6 31 69.3"/></svg>
+<svg width="134" height="134" viewBox="0 0 134 134" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M126.5 67C126.5 34.1391 99.8609 7.5 67 7.5C34.1391 7.5 7.5 34.1391 7.5 67C7.5 99.8609 34.1391 126.5 67 126.5C99.8609 126.5 126.5 99.8609 126.5 67ZM133.5 67C133.5 103.727 103.727 133.5 67 133.5C30.2731 133.5 0.5 103.727 0.5 67C0.5 30.2731 30.2731 0.5 67 0.5C103.727 0.5 133.5 30.2731 133.5 67Z" fill="#297E2D"/>
+<path d="M99.9277 40.5224C101.296 39.1572 103.512 39.1595 104.877 40.5273C106.242 41.8956 106.24 44.1121 104.872 45.4775L53.7207 96.5244L29.5478 72.7978C28.1686 71.4439 28.1483 69.2281 29.5019 67.8486C30.856 66.4691 33.0726 66.4477 34.4521 67.8017L53.6787 86.6758L99.9277 40.5224Z" fill="#388E3C"/>
+</svg>

package/src/components/modal-alert/svg/warning.svg

@@ -1 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 132"><circle cx="66" cy="66" r="63"/><path d="M41.839 72.475v-37.2c0-3.852 3.143-6.975 7.02-6.975s7.02 3.123 7.02 6.975V65.5m0-30.225v-9.3c0-3.852 3.143-6.975 7.02-6.975s7.02 3.123 7.02 6.975V65.5m0-30.225c0-3.852 3.143-6.975 7.02-6.975 3.878 0 7.02 3.123 7.02 6.975V65.5m0-20.925c0-3.852 3.144-6.975 7.02-6.975 3.878 0 7.021 3.123 7.021 6.975V84.1C98 99.509 85.428 112 69.92 112h-9.36c-9.896-1.357-18.517-6.496-23.401-13.95L24.522 73.637c-2.584-3.53-1.799-8.475 1.755-11.043 3.555-2.568 8.531-1.788 11.116 1.743l4.212 8.138"/></svg>
+<svg width="134" height="134" viewBox="0 0 134 134" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M126.5 67C126.5 34.1391 99.8609 7.5 67 7.5C34.1391 7.5 7.5 34.1391 7.5 67C7.5 99.8609 34.1391 126.5 67 126.5C99.8609 126.5 126.5 99.8609 126.5 67ZM133.5 67C133.5 103.727 103.727 133.5 67 133.5C30.2731 133.5 0.5 103.727 0.5 67C0.5 30.2731 30.2731 0.5 67 0.5C103.727 0.5 133.5 30.2731 133.5 67Z" fill="#CC0000"/>
+<path d="M53.8789 66.5V36.2754L53.874 36.0723C53.7675 33.9875 52.0278 32.3 49.8594 32.2998C47.6208 32.2998 45.8389 34.0983 45.8389 36.2754V73.4746C45.8389 75.1315 44.4957 76.4746 42.8389 76.4746C42.7884 76.4746 42.7383 76.4732 42.6885 76.4707C41.5744 76.501 40.4872 75.9106 39.9404 74.8545L35.8486 66.9482C34.21 64.8907 31.2001 64.4603 29.0342 66.0254C26.8936 67.5724 26.3767 70.4919 27.7998 72.6582L27.9434 72.8652L28.0723 73.0576C28.1128 73.1231 28.1511 73.1903 28.1865 73.2588L40.7451 97.5195C45.0778 104.05 52.7638 108.715 61.7832 110H70.9189C84.7888 110 96 98.8333 96 85.0996V45.5752C96 43.3981 94.218 41.5996 91.9795 41.5996C89.7411 41.5998 87.96 43.3982 87.96 45.5752V66.5C87.96 68.1568 86.6167 69.4999 84.96 69.5C83.3031 69.5 81.96 68.1569 81.96 66.5V36.2754C81.96 34.0983 80.178 32.2998 77.9394 32.2998C75.701 32.2999 73.9189 34.0983 73.9189 36.2754V66.5C73.9189 68.1569 72.5758 69.5 70.9189 69.5C69.2623 69.4998 67.9189 68.1567 67.9189 66.5V26.9746C67.9187 24.7977 66.1377 23.0001 63.8994 23C61.661 23 59.8791 24.7977 59.8789 26.9746V66.5C59.8789 68.1569 58.5358 69.5 56.8789 69.5C55.2221 69.4999 53.8789 68.1568 53.8789 66.5ZM73.9189 27.1377C75.151 26.5996 76.511 26.2998 77.9394 26.2998C83.4551 26.2998 87.96 30.7481 87.96 36.2754V36.4375C89.1918 35.8996 90.5514 35.5997 91.9795 35.5996C97.4952 35.5996 102 40.0479 102 45.5752V85.0996C102 102.183 88.066 116 70.9189 116H61.5596C61.4232 116 61.2864 115.991 61.1514 115.973C50.5128 114.514 41.0695 108.966 35.6494 100.694C35.5933 100.609 35.5412 100.52 35.4941 100.429L22.9453 76.1826C19.5685 71.3211 20.6969 64.6476 25.5205 61.1621C29.9932 57.9302 36.1038 58.5528 39.8389 62.4131V36.2754C39.8389 30.7481 44.3437 26.2998 49.8594 26.2998C51.2874 26.2999 52.647 26.5998 53.8789 27.1377V26.9746C53.8791 21.4475 58.3838 17 63.8994 17C69.4149 17.0001 73.9187 21.4476 73.9189 26.9746V27.1377Z" fill="#CC0000"/>
+</svg>

package/src/components/slide-up-down-toggle/slide-up-down-toggle.minimo.tokens.mjs

@@ -0,0 +1,9 @@
+export default {
+  'slide': {
+    'duration': {
+      $type: 'duration',
+      $value: '500ms'
+    },
+  }
+};
+

package/src/components/slide-up-down-toggle/slide-up-down-toggle.module.css

@@ -56,8 +56,8 @@
   height: auto;
   overflow: hidden;
   transition:
-    height var(--slide-duration, 500ms) ease,
-    display var(--slide-duration, 500ms) allow-discrete;
+    height var(--slide-duration) ease,
+    display var(--slide-duration) allow-discrete;
 }
 
 /* collapsed state: height animates to 0, then display snaps to none */

package/src/custom-properties.css

@@ -173,13 +173,17 @@
   --grid-cols: 3;
   --grid-min-col-width: 6rem;
   --headings-color: var(--text-color);
+  --headings-font-family: var(--font-family);
   --headings-font-weight: var(--font-weight-semibold);
   --headings-h1-font-size: var(--font-size-2xl);
   --headings-h1-font-weight: var(--headings-font-weight);
   --headings-h2-font-size: var(--font-size-xl);
   --headings-h3-font-size: var(--font-size-lg);
   --headings-h4-font-size: var(--font-size-md);
+  --headings-line-height: var(--line-height-xs);
   --headings-text-align: inherit;
+  --inner-nav-gap: var(--size-lg);
+  --inner-nav-margin-block: var(--size-base);
   --layout-container-max-width: 80rem;
   --line-height-base: 1.5;
   --line-height-sm: 1.4;
@@ -190,6 +194,27 @@
   --link-focus-outline-color: var(--link-color);
   --link-focus-outline-width: .125rem;
   --link-visited-color: #ae0da3;
+  --malert-backdrop: rgb(0 0 0 / .7);
+  --malert-background-color: #fff;
+  --malert-border-radius: var(--radius-xs);
+  --malert-box-shadow: 0 .025rem .25rem 0 color-mix(in srgb, var(--malert-box-shadow-color) 15%, transparent), -.01875rem .1875rem .20625rem -.03125rem color-mix(in srgb, var(--malert-box-shadow-color) 15%, transparent), -.03125rem .38125rem .4125rem -.05625rem color-mix(in srgb, var(--malert-box-shadow-color) 14%, transparent), -.05625rem .7rem .75625rem -.0875rem color-mix(in srgb, var(--malert-box-shadow-color) 14%, transparent), -.1rem 1.21875rem 1.31875rem -.11875rem color-mix(in srgb, var(--malert-box-shadow-color) 13%, transparent), -.16875rem 2.04375rem 2.2125rem -.14375rem color-mix(in srgb, var(--malert-box-shadow-color) 13%, transparent), -.26875rem 3.25rem 3.525rem -.175rem color-mix(in srgb, var(--malert-box-shadow-color) 12%, transparent);
+  --malert-box-shadow-color: #000;
+  --malert-confirm-bg: hsl(277deg 72% 45%);
+  --malert-confirm-fg: #fff;
+  --malert-error-bg: var(--status-danger-background-color);
+  --malert-error-fg: var(--status-danger-fg);
+  --malert-heading-font-family: var(--headings-font-family);
+  --malert-heading-font-size: var(--headings-h2-font-size);
+  --malert-heading-font-weight: var(--headings-font-weight);
+  --malert-heading-line-height: var(--headings-line-height);
+  --malert-info-bg: var(--status-info-background-color);
+  --malert-info-fg: var(--status-info-fg);
+  --malert-success-bg: var(--status-success-background-color);
+  --malert-success-fg: var(--status-success-fg);
+  --malert-text-font-family: var(--font-family);
+  --malert-text-font-size: var(--font-size-base);
+  --malert-warning-bg: var(--status-warning-background-color);
+  --malert-warning-fg: var(--status-warning-fg);
   --modal-popup-backdrop-color: rgb(0 0 0 / .6);
   --modal-popup-border-radius: var(--size-base);
   --modal-popup-btn-close-size: 1.6rem;
@@ -244,6 +269,7 @@
   --size-xl: 2rem;
   --size-xs: .5rem;
   --size-xxs: .25rem;
+  --slide-duration: 500ms;
   --snackbar-background-color: var(--secondary-100);
   --snackbar-border-radius: var(--radius-xs);
   --snackbar-btn-close-active-background-color: transparent;

package/src/components/modal-alert/TODO modal-alert-demo/demo.css

@@ -1,63 +0,0 @@
-@import '../src/modal-alert.css';
-
-:root {
-  /* comment to use defaults */
-  --malert-success-color: #09544b;
-  --malert-success-color-fg: #fff;
-  --malert-info-color: #0e2467;
-  --malert-info-color-fg: #fff;
-  --malert-warning-color: hsl(56deg 100% 30%);
-  --malert-warning-color-fg: #fff;
-  --malert-error-color: #c00;
-  --malert-error-color-fg: #fff;
-  --malert-confirm-color: #940b7f;
-  --malert-confirm-color-fg: #fff;
-
-  /* --malert-marks-stroke-width: 6px; */
-  /* --malert-backdrop */
-  /* --malert-border-radius */
-  /* --malert-box-shadow */
-  /* --malert-heading-font-family */
-  /* --malert-heading-font-size */
-  /* --malert-heading-font-weigth */
-  /* --malert-heading-line-height */
-  /* --malert-body-font-family */
-}
-html {
-  font-family: sans-serif;
-}
-
-.demo-buttons .btn {
-  --malert-color: rgb(16, 89, 162);
-  --malert-color-fg: #fff;
-  margin: 1rem;
-}
-
-
-/* applied to body on dialog opening */
-.modal-alert-is-open {
-  overflow: hidden;
-}
-
-.text-success {
-  color: var(--malert-success-color);
-}
-
-/* `--malert-color` & `--malert-color-fg` are set by main css */
-
-.btn {
-  padding: .5rem 1rem;
-  color: var(--malert-color-fg);
-  cursor: pointer;
-  background-color: var(--malert-color);
-  border: 1px solid  var(--malert-color);
-  border-radius: 4px;
-}
-.btn-outline {
-  color: var(--malert-color);
-  background-color: var(--malert-color-fg);
-}
-.btn:focus {
-  outline: 1px solid var(--malert-color);
-  outline-offset: 3px;
-}

package/src/components/modal-alert/TODO modal-alert-demo/demo.js

@@ -1,155 +0,0 @@
-import mAlert from '../src/modal-alert.js';
-
-const custom_defaults = {
-
-  //settings to be applied to all dialog types
-  globals: {
-    onOpen: () => {
-      // console.log('open'); // eslint-disable-line
-      document.body.classList.add('modal-alert-is-open');
-    },
-    onClose: () => {
-      // console.log('close'); // eslint-disable-line
-      document.body.classList.remove('modal-alert-is-open');
-    },
-    cssFile: null
-  },
-
-  success: {
-    title: 'Done!',
-    mes: null,
-    ok_btn_text: 'OK',
-    heading_class: 'text-success',
-    ok_btn_class: 'btn',
-    timer: 4000, // ms
-  },
-  error: {
-    title: 'An error has occurred',
-    mes: null,
-    ok_btn_text: 'OK',
-    heading_class: null,
-    text_class: null,
-    ok_btn_class: 'btn',
-    timer: null,
-  },
-  warning: {
-    title: 'Attention!',
-    mes: null,
-    ok_btn_text: 'OK',
-    heading_class: null,
-    text_class: null,
-    ok_btn_class: 'btn',
-    timer: null,
-  },
-  info: {
-    title: null,
-    mes: null,
-    ok_btn_text: 'OK',
-    heading_class: null,
-    text_class: null,
-    ok_btn_class: 'btn',
-    timer: null,
-  },
-  confirm: {
-    title: 'Do you confirm?',
-    mes: null,
-    ok_btn_text: 'OK',
-    cancel_btn_text: 'Cancel',
-    cancel_focus: true, // false to give focus to the ok button
-    heading_class: null,
-    text_class: null,
-    ok_btn_class: 'btn btn-outline',
-    cancel_btn_class: 'btn',
-    callback: null,
-    timer: null,
-  }
-};
-
-document.querySelector('.demo-success').addEventListener('click', () => {
-  mAlert({
-    type  : 'success',
-    mes: 'Lorem ipsum dolor sit amet',
-    callback: () => alert('callback')
-  }, custom_defaults);
-}, false);
-
-document.querySelector('.demo-info').addEventListener('click', () => {
-  mAlert({
-    type  : 'info',
-    title: 'Info',
-    mes: '<strong>Lorem ipsum</strong> dolor sit amet'
-  }, custom_defaults);
-}, false);
-
-document.querySelector('.demo-error').addEventListener('click', () => {
-  mAlert({
-    type  : 'error'
-  }, custom_defaults);
-}, false);
-
-document.querySelector('.demo-error-extra-btn').addEventListener('click', () => {
-  mAlert({
-    type  : 'error',
-    ok_btn_class: 'btn btn-error btn btn-outline',
-    extra_btn: '<button type="button" data-malert-result="extra-btn-result" class="btn btn-error extra-btn">Extra btn</button>',
-    extra_btn_selector: '.extra-btn',
-    extra_btn_focus: true,
-    callback: result => alert(result === 'extra-btn-result'? 'Extra button pressed' : 'OK button pressed')
-  }, custom_defaults);
-}, false);
-
-document.querySelector('.demo-warning').addEventListener('click', () => {
-  mAlert({
-    type  : 'warning',
-    mes: '<p>Quo dolorum cumque quo placeat aperiam doloribus dolorum animi. Sunt et dolores quas autem. Porro inventore ratione. Ex facere doloremque. Consectetur enim dolor. Sint ut facere quidem et et dicta natus itaque.</p> <p>Odit in eos repellat exercitationem tempore blanditiis voluptate. Dignissimos est tempora qui ducimus at et expedita esse.</p>'
-  }, custom_defaults);
-}, false);
-
-document.querySelector('.demo-confirm').addEventListener('click', () => {
-  mAlert({
-    type  : 'confirm',
-    callback: result => alert(`${result? 'OK' : 'Cancel'} button pressed`)
-  }, custom_defaults);
-}, false);
-
-
-// forms
-// Confirm on form submit
-document.getElementById('test-form').addEventListener('submit', e => {
-  let choiceIsNeeded = true;
-
-  if(choiceIsNeeded) {
-    e.preventDefault();
-    mAlert({
-      type  : 'confirm',
-      title: 'A choice is needed',
-      mes: 'Some message...',
-      ok_btn_text: 'Continue submit',
-      cancel_btn_text: 'Stop',
-      callback: result => {
-        if(result) {
-          alert('submit');
-          e.target.submit();
-        } else {
-          alert('submit canceled');
-        }
-      }
-    }, custom_defaults);
-  }
-
-}, false);
-
-// Error on form submit
-document.getElementById('test-form2').addEventListener('submit', e => {
-  let isError = true;
-
-  if(isError) {
-    e.preventDefault();
-    mAlert({
-      type  : 'error',
-      title: 'Oh my! There is an error...',
-      mes: 'Some message'
-    }, custom_defaults);
-  }
-
-}, false);

package/src/components/modal-alert/TODO.md

@@ -1,3 +0,0 @@
-da rivedere
-spostare custom props nel dictionary
-eliminare customization-templates, gestire tutto da tokens

package/src/components/modal-alert/customization-templates/custom-modal-alert.css

@@ -1,46 +0,0 @@
-
-@import '@massimo-cassandro/modal-alert';
-
-
-.modal-alert {
-  --malert-success-color: var(--status-success-color);
-  --malert-success-color-fg: var(--status-success-fg);
-
-  --malert-info-color: var(--status-info-color);
-  --malert-info-color-fg: var(--status-info-fg);
-
-  --malert-warning-color: var(--status-warning-color);
-  --malert-warning-color-fg: var(--status-warning-fg);
-
-  --malert-danger-color: var(--status-danger-color);
-  --malert-danger-color-fg: var(--status-danger-fg);
-
-  --malert-confirm-color: var(--status-warning-color);
-  --malert-confirm-color-fg: var(--status-warning-fg);
-
-  /* --malert-marks-stroke-width: 6px; */
-  --malert-backdrop: rgb(0 0 0 / .3);
-  --malert-border-radius: var(--radius-md);
-  /* --malert-box-shadow: var(--box-shadow); */
-  --malert-heading-font-family: var(--font-family);
-  /* --malert-heading-line-height: */
-  --malert-heading-font-size: 1.8rem;
-  --malert-heading-font-weigth: var(--font-size-base);
-  --malert-body-font-family: var(--font-family);
-
-  top: 50%;
-  left: 50%;
-  translate: -50% -50%;
-}
-
-
-
-.malert-mark {
-  svg {
-    width: 7rem;
-    max-width: none;
-    height: 7rem;
-    fill: var(--malert-color-fg);
-    stroke: none;
-  }
-}

package/src/components/modal-alert/customization-templates/custom-modal-alert.js

@@ -1,89 +0,0 @@
-// import './modal-alert.css'; // importato direttamente dal css principale per ottimizzarne l'uso
-
-import modalAlert from '@massimo-cassandro/modal-alert';
-
-import checkIcon from './svg/check-circle-duotone.svg?inline';
-import infoIcon from './svg/info-duotone.svg?inline';
-import confirmIcon from './svg/question-duotone.svg?inline';
-import warningIcon from './svg/warning-duotone.svg?inline';
-import errorIcon from './svg/x-circle-duotone.svg?inline';
-
-const custom_defaults = {
-
-  globals: {
-    onOpen: () => {
-      document.body.classList.add('overflow-hidden');
-    },
-    onClose: () => {
-      document.body.classList.remove('overflow-hidden');
-    },
-    cssFile: null,
-    animation: true,
-    showMarks: true,
-  },
-
-  success: {
-    title: 'Operazione completata',
-    mes: null,
-    ok_btn_text: 'OK',
-    heading_class: null,
-    ok_btn_class: 'btn btn-success',
-    timer: 4000, // ms
-  },
-  error: {
-    title: 'Si è verificato un errore',
-    mes: null,
-    ok_btn_text: 'OK',
-    heading_class: null,
-    text_class: null,
-    ok_btn_class: 'btn btn-danger',
-    timer: null,
-  },
-  warning: {
-    title: 'Attenzione!',
-    mes: null,
-    ok_btn_text: 'OK',
-    heading_class: null,
-    text_class: null,
-    ok_btn_class: 'btn btn-warning',
-    timer: null,
-  },
-  info: {
-    title: null,
-    mes: null,
-    ok_btn_text: 'OK',
-    heading_class: null,
-    text_class: null,
-    ok_btn_class: 'btn btn-info',
-    timer: null,
-  },
-  confirm: {
-    title: 'Confermi?',
-    mes: null,
-    ok_btn_text: 'OK',
-    cancel_btn_text: 'Cancel',
-    cancel_focus: true, // false to give focus to the ok button
-    heading_class: null,
-    text_class: null,
-    ok_btn_class: 'btn btn-warning',
-    cancel_btn_class: 'btn btn-outline-secondary',
-    callback: null,
-    timer: null
-  }
-};
-
-const marks = {
-  success: checkIcon,
-  error: errorIcon,
-  warning: warningIcon,
-  info: infoIcon,
-  confirm: confirmIcon
-};
-
-/**
- * @param {Record<string, *>} params
- * @returns {void}
- */
-export function mAlert(params) {
-  modalAlert(params, custom_defaults, marks);
-}