@maggioli-design-system/mds-progress 2.9.2 → 2.10.0

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

@@ -1,3 +1,76 @@
+@tailwind components;
+@tailwind utilities;
+
+
+/* @import '../../tailwind/static-components.css'; */
+
+.svg{
+    display: flex;
+}
+
+.svg svg{
+    aspect-ratio: 1/1;
+    height: 100%;
+    width: 100%;
+}
+
+.contrast-area {
+    border-radius: inherit;
+    box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;
+    display: none;
+    inset: 0;
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    transition-behavior: allow-discrete;
+    transition-property: display opacity;
+
+    box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;
+  }
+
+@container style(--magma-pref-contrast: more) {
+    .contrast-area,
+    .contrast-area-50{
+        display: block;
+        opacity: 1;
+
+      /* @starting-style {
+        opacity: 0;
+      } */
+    }
+  }
+
+@container style(--magma-pref-contrast: system) {
+
+    @media (prefers-contrast: more) {
+      .contrast-area,
+      .contrast-area-50{
+            display: block;
+            opacity: 1;
+
+        /* @starting-style {
+          opacity: 0;
+        } */
+        }
+    }
+  }
+
+@container style(--magma-pref-animation: reduce) {
+    .contrast-area,
+    .contrast-area-50{
+        transition-duration: 0s;
+    }
+  }
+
+@container style(--magma-pref-animation: system) {
+    
+    @media (prefers-reduced-motion) {
+      .contrast-area,
+      .contrast-area-50{
+            transition-duration: 0s;
+        }
+    }
+  }
 @tailwind utilities;
 
 /**
@@ -25,6 +98,7 @@
   height: var(--mds-progress-thickness);
   min-width: var(--mds-progress-thickness);
   overflow: hidden;
+  position: relative;
   width: 100%;
 }
 
@@ -36,8 +110,7 @@
 }
 
 .progress{
-
-  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
 
   background-color: var(--mds-progress-color);
   border-radius: var(--mds-progress-radius);
@@ -45,264 +118,297 @@
   transition-property: background-color, flex-grow;
 }
 
-.static{
+@tailwind utilities;
+
+:host( [variant="dark"] ) {
 
-  position: static;
+  --mds-progress-color: rgb(var(--tone-neutral-04));
+  --mds-progress-background: rgb(var(--tone-neutral-08));
 }
 
-.fixed{
+:host( [variant="light"] ) {
 
-  position: fixed;
+  --mds-progress-color: rgb(var(--tone-neutral));
+  --mds-progress-background: rgb(var(--tone-neutral-05));
 }
 
-.absolute{
+:host( [variant="error"] ) {
 
-  position: absolute;
+  --mds-progress-color: rgb(var(--status-error-06));
+  --mds-progress-background: rgb(var(--status-error-09));
 }
 
-.border{
+:host( [variant="warning"] ) {
 
-  border-width: 1px;
+  --mds-progress-color: rgb(var(--status-warning-06));
+  --mds-progress-background: rgb(var(--status-warning-09));
 }
 
-.bg-label-amaranth-10{
+:host( [variant="success"] ) {
+
+  --mds-progress-color: rgb(var(--status-success-06));
+  --mds-progress-background: rgb(var(--status-success-09));
+}
 
-  --tw-bg-opacity: 1;
+:host( [variant="info"] ) {
 
-  background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));
+  --mds-progress-color: rgb(var(--status-info-06));
+  --mds-progress-background: rgb(var(--status-info-09));
 }
 
-.bg-label-aqua-10{
+:host( [variant="primary"] ) {
 
-  --tw-bg-opacity: 1;
+  --mds-progress-color: rgb(var(--brand-maggioli-03));
+  --mds-progress-background: rgb(var(--tone-neutral-08));
+}
 
-  background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));
+@tailwind utilities;
+
+@container style(--magma-pref-animation: reduce) {
+  :host,
+  .progress {
+    transition-duration: 0s;
+  }
 }
 
-.bg-label-blue-10{
+@container style(--magma-pref-animation: system) {
 
-  --tw-bg-opacity: 1;
+  @media (prefers-reduced-motion) {
+    :host,
+    .progress {
+      transition-duration: 0s;
+    }
+  }
+}
 
-  background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));
+.static{
+    position: static;
 }
 
-.bg-label-green-10{
+.fixed{
+    position: fixed;
+}
 
-  --tw-bg-opacity: 1;
+.absolute{
+    position: absolute;
+}
 
-  background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));
+.border{
+    border-width: 1px;
 }
 
-.bg-label-lime-10{
+.bg-label-amaranth-10{
+    --tw-bg-opacity: 1;
+    background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));
+}
 
-  --tw-bg-opacity: 1;
+.bg-label-aqua-10{
+    --tw-bg-opacity: 1;
+    background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));
+}
 
-  background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));
+.bg-label-blue-10{
+    --tw-bg-opacity: 1;
+    background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));
 }
 
-.bg-label-orange-10{
+.bg-label-green-10{
+    --tw-bg-opacity: 1;
+    background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));
+}
 
-  --tw-bg-opacity: 1;
+.bg-label-lime-10{
+    --tw-bg-opacity: 1;
+    background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));
+}
 
-  background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));
+.bg-label-orange-10{
+    --tw-bg-opacity: 1;
+    background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));
 }
 
 .bg-label-orchid-10{
-
-  --tw-bg-opacity: 1;
-
-  background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));
+    --tw-bg-opacity: 1;
+    background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));
 }
 
 .bg-label-violet-10{
-
-  --tw-bg-opacity: 1;
-
-  background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));
+    --tw-bg-opacity: 1;
+    background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));
 }
 
 .bg-label-yellow-10{
-
-  --tw-bg-opacity: 1;
-
-  background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));
+    --tw-bg-opacity: 1;
+    background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));
 }
 
 .bg-tone-neutral-10{
-
-  --tw-bg-opacity: 1;
-
-  background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));
+    --tw-bg-opacity: 1;
+    background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));
 }
 
 .fill-label-amaranth-04{
-
-  fill: rgb(var(--label-amaranth-04));
+    fill: rgb(var(--label-amaranth-04));
 }
 
 .fill-label-aqua-04{
-
-  fill: rgb(var(--label-aqua-04));
+    fill: rgb(var(--label-aqua-04));
 }
 
 .fill-label-blue-04{
-
-  fill: rgb(var(--label-blue-04));
+    fill: rgb(var(--label-blue-04));
 }
 
 .fill-label-green-04{
-
-  fill: rgb(var(--label-green-04));
+    fill: rgb(var(--label-green-04));
 }
 
 .fill-label-lime-04{
-
-  fill: rgb(var(--label-lime-04));
+    fill: rgb(var(--label-lime-04));
 }
 
 .fill-label-orange-04{
-
-  fill: rgb(var(--label-orange-04));
+    fill: rgb(var(--label-orange-04));
 }
 
 .fill-label-orchid-04{
-
-  fill: rgb(var(--label-orchid-04));
+    fill: rgb(var(--label-orchid-04));
 }
 
 .fill-label-violet-04{
-
-  fill: rgb(var(--label-violet-04));
+    fill: rgb(var(--label-violet-04));
 }
 
 .fill-label-yellow-04{
-
-  fill: rgb(var(--label-yellow-04));
+    fill: rgb(var(--label-yellow-04));
 }
 
 .fill-tone-neutral-04{
-
-  fill: rgb(var(--tone-neutral-04));
+    fill: rgb(var(--tone-neutral-04));
 }
 
 .text-label-amaranth-04{
-
-  --tw-text-opacity: 1;
-
-  color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));
+    --tw-text-opacity: 1;
+    color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));
 }
 
 .text-label-aqua-04{
-
-  --tw-text-opacity: 1;
-
-  color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));
+    --tw-text-opacity: 1;
+    color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));
 }
 
 .text-label-blue-04{
-
-  --tw-text-opacity: 1;
-
-  color: rgb(var(--label-blue-04) / var(--tw-text-opacity));
+    --tw-text-opacity: 1;
+    color: rgb(var(--label-blue-04) / var(--tw-text-opacity));
 }
 
 .text-label-green-04{
-
-  --tw-text-opacity: 1;
-
-  color: rgb(var(--label-green-04) / var(--tw-text-opacity));
+    --tw-text-opacity: 1;
+    color: rgb(var(--label-green-04) / var(--tw-text-opacity));
 }
 
 .text-label-lime-04{
-
-  --tw-text-opacity: 1;
-
-  color: rgb(var(--label-lime-04) / var(--tw-text-opacity));
+    --tw-text-opacity: 1;
+    color: rgb(var(--label-lime-04) / var(--tw-text-opacity));
 }
 
 .text-label-orange-04{
-
-  --tw-text-opacity: 1;
-
-  color: rgb(var(--label-orange-04) / var(--tw-text-opacity));
+    --tw-text-opacity: 1;
+    color: rgb(var(--label-orange-04) / var(--tw-text-opacity));
 }
 
 .text-label-orchid-04{
-
-  --tw-text-opacity: 1;
-
-  color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));
+    --tw-text-opacity: 1;
+    color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));
 }
 
 .text-label-violet-04{
-
-  --tw-text-opacity: 1;
-
-  color: rgb(var(--label-violet-04) / var(--tw-text-opacity));
+    --tw-text-opacity: 1;
+    color: rgb(var(--label-violet-04) / var(--tw-text-opacity));
 }
 
 .text-label-yellow-04{
-
-  --tw-text-opacity: 1;
-
-  color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));
+    --tw-text-opacity: 1;
+    color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));
 }
 
 .text-tone-neutral-04{
-
-  --tw-text-opacity: 1;
-
-  color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));
+    --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);
-}
-
-:host( [variant="dark"] ) {
-
-  --mds-progress-color: rgb(var(--tone-neutral-04));
-  --mds-progress-background: rgb(var(--tone-neutral-08));
-}
-
-:host( [variant="light"] ) {
-
-  --mds-progress-color: rgb(var(--tone-neutral));
-  --mds-progress-background: rgb(var(--tone-neutral-05));
-}
-
-:host( [variant="error"] ) {
-
-  --mds-progress-color: rgb(var(--status-error-06));
-  --mds-progress-background: rgb(var(--status-error-09));
-}
-
-:host( [variant="warning"] ) {
-
-  --mds-progress-color: rgb(var(--status-warning-06));
-  --mds-progress-background: rgb(var(--status-warning-09));
-}
-
-:host( [variant="success"] ) {
-
-  --mds-progress-color: rgb(var(--status-success-06));
-  --mds-progress-background: rgb(var(--status-success-09));
-}
-
-:host( [variant="info"] ) {
-
-  --mds-progress-color: rgb(var(--status-info-06));
-  --mds-progress-background: rgb(var(--status-info-09));
-}
-
-:host( [variant="primary"] ) {
-
-  --mds-progress-color: rgb(var(--brand-maggioli-03));
-  --mds-progress-background: rgb(var(--tone-neutral-08));
+    --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);
+}
+
+@container style(--magma-pref-theme: dark) {
+  :host,
+  :host( [variant="primary"] ) {
+
+    --mds-progress-color: rgb(var(--brand-maggioli-05));
+    --mds-progress-background: rgb(var(--tone-neutral-07));
+  }
+
+  :host( [variant="error"] ) {
+
+    --mds-progress-color: rgb(var(--status-error-04));
+    --mds-progress-background: rgb(var(--status-error-07));
+  }
+  
+  :host( [variant="warning"] ) {
+  
+    --mds-progress-color: rgb(var(--status-warning-04));
+    --mds-progress-background: rgb(var(--status-warning-07));
+  }
+  
+  :host( [variant="success"] ) {
+  
+    --mds-progress-color: rgb(var(--status-success-04));
+    --mds-progress-background: rgb(var(--status-success-07));
+  }
+  
+  :host( [variant="info"] ) {
+  
+    --mds-progress-color: rgb(var(--status-info-04));
+    --mds-progress-background: rgb(var(--status-info-07));
+  }
+}
+
+@container style(--magma-pref-theme: system) {
+
+  @media (prefers-color-scheme: dark) {
+    :host,
+    :host( [variant="primary"] ) {
+
+      --mds-progress-color: rgb(var(--brand-maggioli-05));
+      --mds-progress-background: rgb(var(--tone-neutral-07));
+    }
+
+    :host( [variant="error"] ) {
+
+      --mds-progress-color: rgb(var(--status-error-04));
+      --mds-progress-background: rgb(var(--status-error-07));
+    }
+    
+    :host( [variant="warning"] ) {
+    
+      --mds-progress-color: rgb(var(--status-warning-04));
+      --mds-progress-background: rgb(var(--status-warning-07));
+    }
+    
+    :host( [variant="success"] ) {
+    
+      --mds-progress-color: rgb(var(--status-success-04));
+      --mds-progress-background: rgb(var(--status-success-07));
+    }
+    
+    :host( [variant="info"] ) {
+    
+      --mds-progress-color: rgb(var(--status-info-04));
+      --mds-progress-background: rgb(var(--status-info-07));
+    }
+  }
 }
 

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

@@ -25,7 +25,7 @@ export class MdsProgress {
         this.stepsList = steps.split(',');
     }
     render() {
-        return (h(Host, { "aria-valuemax": "100", "aria-valuemin": "0", "aria-valuenow": Math.round(this.progress * 100), role: "progressbar" }, h("div", { class: "progress", style: this.direction === 'horizontal'
+        return (h(Host, { key: 'fadd41ff24e30137a6998f2d6627fcd5d44c68ae', "aria-valuemax": "100", "aria-valuemin": "0", "aria-valuenow": Math.round(this.progress * 100), role: "progressbar" }, h("div", { key: '8e1cc488d34e9876b8e256e58c65c973a7fe7a11', class: "contrast-area" }), h("div", { key: '611728b4b0b6702b3f98e005a8de265e43f7cf7b', class: "progress", style: this.direction === 'horizontal'
                 ? { flexGrow: `${this.progress}` }
                 : { flexGrow: `${this.progress}`, width: '100%' } })));
     }

package/dist/collection/type/preference.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/type/variant-file-format.js

@@ -4,6 +4,15 @@ import baselineAudiotrack from "@icon/mi/baseline/audiotrack.svg";
 import baselineTerminal from "@icon/mi/baseline/terminal.svg";
 import baselineInsertDriveFile from "@icon/mi/baseline/insert-drive-file.svg";
 import mdiHardDisk from "@icon/mdi/harddisk.svg";
+import baselineEmail from "@icon/mi/baseline/email.svg";
+import baselineWysiwyg from "@icon/mi/baseline/wysiwyg.svg";
+import baselinePanorama from "@icon/mi/baseline/panorama.svg";
+import baselineWeb from "@icon/mi/baseline/web.svg";
+import baselineTV from "@icon/mi/baseline/tv.svg";
+import baselineBorderAll from "@icon/mi/baseline/border-all.svg";
+import baselineDescription from "@icon/mi/baseline/description.svg";
+import mdiVectorCurve from "@icon/mdi/vector-curve.svg";
+import baselineVideocam from "@icon/mi/baseline/videocam.svg";
 const fileFormatsVariant = {
     archive: {
         color: 'fill-label-amaranth-04 text-label-amaranth-04',
@@ -43,67 +52,67 @@ const fileFormatsVariant = {
     },
     email: {
         color: 'fill-label-blue-04 text-label-blue-04',
-        icon: 'mi/baseline/email',
+        icon: baselineEmail,
         iconBackground: 'bg-label-blue-10',
         variant: 'blue',
     },
     executable: {
         color: 'fill-label-amaranth-04 text-label-amaranth-04',
-        icon: 'mi/baseline/wysiwyg',
+        icon: baselineWysiwyg,
         iconBackground: 'bg-label-amaranth-10',
         variant: 'amaranth',
     },
     image: {
         color: 'fill-label-green-04 text-label-green-04',
-        icon: 'mi/baseline/panorama',
+        icon: baselinePanorama,
         iconBackground: 'bg-label-green-10',
         variant: 'green',
     },
     imageRaster: {
         color: 'fill-label-green-04 text-label-green-04',
-        icon: 'mi/baseline/panorama',
+        icon: baselinePanorama,
         iconBackground: 'bg-label-green-10',
         variant: 'green',
     },
     markup: {
         color: 'fill-label-yellow-04 text-label-yellow-04',
-        icon: 'mi/baseline/web',
+        icon: baselineWeb,
         iconBackground: 'bg-label-yellow-10',
         variant: 'yellow',
     },
     slide: {
         color: 'fill-label-orchid-04 text-label-orchid-04',
-        icon: 'mi/baseline/tv',
+        icon: baselineTV,
         iconBackground: 'bg-label-orchid-10',
         variant: 'orchid',
     },
     spreadsheet: {
         color: 'fill-label-lime-04 text-label-lime-04',
-        icon: 'mi/baseline/border-all',
+        icon: baselineBorderAll,
         iconBackground: 'bg-label-lime-10',
         variant: 'lime',
     },
     text: {
         color: 'fill-label-blue-04 text-label-blue-04',
-        icon: 'mi/baseline/description',
+        icon: baselineDescription,
         iconBackground: 'bg-label-blue-10',
         variant: 'blue',
     },
     vectorImage: {
         color: 'fill-label-aqua-04 text-label-aqua-04',
-        icon: 'mdi/vector-curve',
+        icon: mdiVectorCurve,
         iconBackground: 'bg-label-aqua-10',
         variant: 'aqua',
     },
     vector: {
         color: 'fill-label-aqua-04 text-label-aqua-04',
-        icon: 'mdi/vector-curve',
+        icon: mdiVectorCurve,
         iconBackground: 'bg-label-aqua-10',
         variant: 'aqua',
     },
     video: {
         color: 'fill-label-violet-04 text-label-violet-04',
-        icon: 'mi/baseline/videocam',
+        icon: baselineVideocam,
         iconBackground: 'bg-label-violet-10',
         variant: 'violet',
     },