@mantine/core 9.4.2 → 9.5.0

package/styles/ScrollArea.layer.css

@@ -40,6 +40,26 @@
         padding-inline-start: unset;
       }
 
+.m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='y']):where(
+      [data-offset-scrollbars='xy'],
+      [data-offset-scrollbars='y'],
+      [data-offset-scrollbars='present']
+    ):not([data-vertical-hidden]):where([data-vertical-scrollbar-position='left']) {
+          padding-inline-end: unset;
+          padding-left: var(--scrollarea-scrollbar-size);
+          padding-right: unset;
+        }
+
+.m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='y']):where(
+      [data-offset-scrollbars='xy'],
+      [data-offset-scrollbars='y'],
+      [data-offset-scrollbars='present']
+    ):not([data-vertical-hidden]):where([data-vertical-scrollbar-position='right']) {
+          padding-inline-end: unset;
+          padding-left: unset;
+          padding-right: var(--scrollarea-scrollbar-size);
+        }
+
 .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where(
       [data-offset-scrollbars='xy'],
       [data-offset-scrollbars='x'],
@@ -122,6 +142,18 @@
     inset-inline-end: 0;
   }
 
+.m_c44ba933:where([data-orientation='vertical']):where([data-vertical-scrollbar-position='left']) {
+      inset-inline-end: auto;
+      left: 0;
+      right: auto;
+    }
+
+.m_c44ba933:where([data-orientation='vertical']):where([data-vertical-scrollbar-position='right']) {
+      inset-inline-end: auto;
+      left: auto;
+      right: 0;
+    }
+
 .m_c44ba933:where([data-orientation='horizontal']) {
     height: var(--scrollarea-scrollbar-size);
     flex-direction: column;
@@ -130,6 +162,20 @@
     inset-inline-end: var(--sa-corner-width);
   }
 
+.m_c44ba933:where([data-orientation='horizontal']):where([data-vertical-scrollbar-position='left']) {
+      inset-inline-start: auto;
+      inset-inline-end: auto;
+      left: var(--sa-corner-width);
+      right: 0;
+    }
+
+.m_c44ba933:where([data-orientation='horizontal']):where([data-vertical-scrollbar-position='right']) {
+      inset-inline-start: auto;
+      inset-inline-end: auto;
+      left: 0;
+      right: var(--sa-corner-width);
+    }
+
 .m_d8b5e363 {
   flex: 1;
   border-radius: var(--scrollarea-scrollbar-size);
@@ -168,6 +214,18 @@
   bottom: 0;
 }
 
+.m_21657268:where([data-vertical-scrollbar-position='left']) {
+    inset-inline-end: auto;
+    left: 0;
+    right: auto;
+  }
+
+.m_21657268:where([data-vertical-scrollbar-position='right']) {
+    inset-inline-end: auto;
+    left: auto;
+    right: 0;
+  }
+
 :where([data-mantine-color-scheme='light']) .m_21657268 {
     background-color: var(--mantine-color-gray-0);
 }

package/styles/Timeline.css

@@ -6,13 +6,13 @@
   --tl-color: var(--mantine-primary-color-filled);
 }
 
-  .m_43657ece:where([data-align='left']) {
-    padding-inline-start: var(--offset);
-  }
+  .m_43657ece:where(:not([data-opposite])):where([data-align='left']) {
+      padding-inline-start: var(--offset);
+    }
 
-  .m_43657ece:where([data-align='right']) {
-    padding-inline-end: var(--offset);
-  }
+  .m_43657ece:where(:not([data-opposite])):where([data-align='right']) {
+      padding-inline-end: var(--offset);
+    }
 
 .m_2ebe8099 {
   font-weight: var(--mantine-font-weight-medium);
@@ -39,26 +39,36 @@
     display: var(--timeline-line-display, none);
   }
 
-.m_43657ece[data-align='left'] .m_436178ff::before {
+.m_43657ece:where(:not([data-opposite]))[data-align='left'] .m_436178ff::before {
       --timeline-line-start: calc(var(--tl-line-width) * -1);
       --timeline-line-end: auto;
     }
 
-.m_43657ece[data-align='right'] .m_436178ff::before {
+.m_43657ece:where(:not([data-opposite]))[data-align='right'] .m_436178ff::before {
       --timeline-line-start: auto;
       --timeline-line-end: calc(var(--tl-line-width) * -1);
     }
 
-.m_43657ece:where([data-align='left']) .m_436178ff {
+.m_43657ece:where([data-opposite]) .m_436178ff::before {
+      --timeline-line-start: calc(50% - var(--tl-line-width) / 2);
+      --timeline-line-end: auto;
+    }
+
+.m_43657ece:where(:not([data-opposite])):where([data-align='left']) .m_436178ff {
     padding-inline-start: var(--offset);
     text-align: start;
   }
 
-.m_43657ece:where([data-align='right']) .m_436178ff {
+.m_43657ece:where(:not([data-opposite])):where([data-align='right']) .m_436178ff {
     padding-inline-end: var(--offset);
     text-align: end;
   }
 
+.m_43657ece:where([data-opposite]) .m_436178ff {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  }
+
 :where([data-mantine-color-scheme='light']) .m_436178ff {
     --item-border-color: var(--mantine-color-gray-3);
 }
@@ -101,16 +111,24 @@
     border-color: var(--mantine-color-dark-4);
 }
 
-.m_43657ece:where([data-align='left']) .m_8affcee1 {
+.m_43657ece:where(:not([data-opposite])):where([data-align='left']) .m_8affcee1 {
     inset-inline-start: calc((var(--tl-bullet-size) / 2 + var(--tl-line-width) / 2) * -1);
     inset-inline-end: auto;
   }
 
-.m_43657ece:where([data-align='right']) .m_8affcee1 {
+.m_43657ece:where(:not([data-opposite])):where([data-align='right']) .m_8affcee1 {
     inset-inline-start: auto;
     inset-inline-end: calc((var(--tl-bullet-size) / 2 + var(--tl-line-width) / 2) * -1);
   }
 
+.m_43657ece:where([data-opposite]) .m_8affcee1 {
+    position: relative;
+    inset-inline-start: unset;
+    inset-inline-end: unset;
+    grid-column: 2;
+    grid-row: 1;
+  }
+
 .m_8affcee1:where([data-with-child]) {
     border-width: var(--tl-line-width);
   }
@@ -134,12 +152,68 @@
       color: var(--tl-icon-color, var(--mantine-color-white));
     }
 
-.m_43657ece:where([data-align='left']) .m_540e8f41 {
+.m_43657ece:where(:not([data-opposite])):where([data-align='left']) .m_540e8f41 {
+    padding-inline-start: var(--offset);
+    text-align: start;
+  }
+
+.m_43657ece:where(:not([data-opposite])):where([data-align='right']) .m_540e8f41 {
+    padding-inline-end: var(--offset);
+    text-align: end;
+  }
+
+.m_43657ece:where([data-opposite]):where([data-align='left']) .m_540e8f41 {
+    grid-column: 3;
+    grid-row: 1;
+    padding-inline-start: var(--offset);
+    text-align: start;
+  }
+
+.m_43657ece:where([data-opposite]):where([data-align='right']) .m_540e8f41 {
+    grid-column: 1;
+    grid-row: 1;
+    padding-inline-end: var(--offset);
+    text-align: end;
+  }
+
+.m_43657ece:where([data-opposite]):where([data-align='left']) .m_436178ff:where([data-alternate]) .m_540e8f41 {
+    grid-column: 1;
+    padding-inline-start: 0;
+    padding-inline-end: var(--offset);
+    text-align: end;
+  }
+
+.m_43657ece:where([data-opposite]):where([data-align='right']) .m_436178ff:where([data-alternate]) .m_540e8f41 {
+    grid-column: 3;
+    padding-inline-end: 0;
+    padding-inline-start: var(--offset);
+    text-align: start;
+  }
+
+.m_43657ece:where([data-align='left']) .m_f3ba506 {
+    grid-column: 1;
+    grid-row: 1;
+    padding-inline-end: var(--offset);
+    text-align: end;
+  }
+
+.m_43657ece:where([data-align='right']) .m_f3ba506 {
+    grid-column: 3;
+    grid-row: 1;
+    padding-inline-start: var(--offset);
+    text-align: start;
+  }
+
+.m_43657ece:where([data-align='left']) .m_436178ff:where([data-alternate]) .m_f3ba506 {
+    grid-column: 3;
+    padding-inline-end: 0;
     padding-inline-start: var(--offset);
     text-align: start;
   }
 
-.m_43657ece:where([data-align='right']) .m_540e8f41 {
+.m_43657ece:where([data-align='right']) .m_436178ff:where([data-alternate]) .m_f3ba506 {
+    grid-column: 1;
+    padding-inline-start: 0;
     padding-inline-end: var(--offset);
     text-align: end;
   }

package/styles/Timeline.layer.css

@@ -6,13 +6,13 @@
   --tl-color: var(--mantine-primary-color-filled);
 }
 
-  .m_43657ece:where([data-align='left']) {
-    padding-inline-start: var(--offset);
-  }
+  .m_43657ece:where(:not([data-opposite])):where([data-align='left']) {
+      padding-inline-start: var(--offset);
+    }
 
-  .m_43657ece:where([data-align='right']) {
-    padding-inline-end: var(--offset);
-  }
+  .m_43657ece:where(:not([data-opposite])):where([data-align='right']) {
+      padding-inline-end: var(--offset);
+    }
 
 .m_2ebe8099 {
   font-weight: var(--mantine-font-weight-medium);
@@ -39,26 +39,36 @@
     display: var(--timeline-line-display, none);
   }
 
-.m_43657ece[data-align='left'] .m_436178ff::before {
+.m_43657ece:where(:not([data-opposite]))[data-align='left'] .m_436178ff::before {
       --timeline-line-start: calc(var(--tl-line-width) * -1);
       --timeline-line-end: auto;
     }
 
-.m_43657ece[data-align='right'] .m_436178ff::before {
+.m_43657ece:where(:not([data-opposite]))[data-align='right'] .m_436178ff::before {
       --timeline-line-start: auto;
       --timeline-line-end: calc(var(--tl-line-width) * -1);
     }
 
-.m_43657ece:where([data-align='left']) .m_436178ff {
+.m_43657ece:where([data-opposite]) .m_436178ff::before {
+      --timeline-line-start: calc(50% - var(--tl-line-width) / 2);
+      --timeline-line-end: auto;
+    }
+
+.m_43657ece:where(:not([data-opposite])):where([data-align='left']) .m_436178ff {
     padding-inline-start: var(--offset);
     text-align: start;
   }
 
-.m_43657ece:where([data-align='right']) .m_436178ff {
+.m_43657ece:where(:not([data-opposite])):where([data-align='right']) .m_436178ff {
     padding-inline-end: var(--offset);
     text-align: end;
   }
 
+.m_43657ece:where([data-opposite]) .m_436178ff {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  }
+
 :where([data-mantine-color-scheme='light']) .m_436178ff {
     --item-border-color: var(--mantine-color-gray-3);
 }
@@ -101,16 +111,24 @@
     border-color: var(--mantine-color-dark-4);
 }
 
-.m_43657ece:where([data-align='left']) .m_8affcee1 {
+.m_43657ece:where(:not([data-opposite])):where([data-align='left']) .m_8affcee1 {
     inset-inline-start: calc((var(--tl-bullet-size) / 2 + var(--tl-line-width) / 2) * -1);
     inset-inline-end: auto;
   }
 
-.m_43657ece:where([data-align='right']) .m_8affcee1 {
+.m_43657ece:where(:not([data-opposite])):where([data-align='right']) .m_8affcee1 {
     inset-inline-start: auto;
     inset-inline-end: calc((var(--tl-bullet-size) / 2 + var(--tl-line-width) / 2) * -1);
   }
 
+.m_43657ece:where([data-opposite]) .m_8affcee1 {
+    position: relative;
+    inset-inline-start: unset;
+    inset-inline-end: unset;
+    grid-column: 2;
+    grid-row: 1;
+  }
+
 .m_8affcee1:where([data-with-child]) {
     border-width: var(--tl-line-width);
   }
@@ -134,12 +152,68 @@
       color: var(--tl-icon-color, var(--mantine-color-white));
     }
 
-.m_43657ece:where([data-align='left']) .m_540e8f41 {
+.m_43657ece:where(:not([data-opposite])):where([data-align='left']) .m_540e8f41 {
+    padding-inline-start: var(--offset);
+    text-align: start;
+  }
+
+.m_43657ece:where(:not([data-opposite])):where([data-align='right']) .m_540e8f41 {
+    padding-inline-end: var(--offset);
+    text-align: end;
+  }
+
+.m_43657ece:where([data-opposite]):where([data-align='left']) .m_540e8f41 {
+    grid-column: 3;
+    grid-row: 1;
+    padding-inline-start: var(--offset);
+    text-align: start;
+  }
+
+.m_43657ece:where([data-opposite]):where([data-align='right']) .m_540e8f41 {
+    grid-column: 1;
+    grid-row: 1;
+    padding-inline-end: var(--offset);
+    text-align: end;
+  }
+
+.m_43657ece:where([data-opposite]):where([data-align='left']) .m_436178ff:where([data-alternate]) .m_540e8f41 {
+    grid-column: 1;
+    padding-inline-start: 0;
+    padding-inline-end: var(--offset);
+    text-align: end;
+  }
+
+.m_43657ece:where([data-opposite]):where([data-align='right']) .m_436178ff:where([data-alternate]) .m_540e8f41 {
+    grid-column: 3;
+    padding-inline-end: 0;
+    padding-inline-start: var(--offset);
+    text-align: start;
+  }
+
+.m_43657ece:where([data-align='left']) .m_f3ba506 {
+    grid-column: 1;
+    grid-row: 1;
+    padding-inline-end: var(--offset);
+    text-align: end;
+  }
+
+.m_43657ece:where([data-align='right']) .m_f3ba506 {
+    grid-column: 3;
+    grid-row: 1;
+    padding-inline-start: var(--offset);
+    text-align: start;
+  }
+
+.m_43657ece:where([data-align='left']) .m_436178ff:where([data-alternate]) .m_f3ba506 {
+    grid-column: 3;
+    padding-inline-end: 0;
     padding-inline-start: var(--offset);
     text-align: start;
   }
 
-.m_43657ece:where([data-align='right']) .m_540e8f41 {
+.m_43657ece:where([data-align='right']) .m_436178ff:where([data-alternate]) .m_f3ba506 {
+    grid-column: 1;
+    padding-inline-start: 0;
     padding-inline-end: var(--offset);
     text-align: end;
   }