@mantine/core 8.0.0-alpha.1 → 8.0.0-alpha.3

package/styles/ScrollArea.layer.css

@@ -18,14 +18,39 @@
     display: none;
   }
 
-.m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='y']):where([data-offset-scrollbars='xy'], [data-offset-scrollbars='y']) {
-      padding-inline-end: var(--scrollarea-scrollbar-size);
-      padding-inline-start: unset;
-    }
-
-.m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where([data-offset-scrollbars='xy'], [data-offset-scrollbars='x']) {
-      padding-bottom: var(--scrollarea-scrollbar-size);
-    }
+.m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='y']):where(
+        [data-offset-scrollbars='xy'],
+        [data-offset-scrollbars='y'],
+        [data-offset-scrollbars='present']
+      ):where([data-vertical-hidden]) {
+        padding-inline-end: 0;
+        padding-inline-start: 0;
+      }
+
+.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]) {
+        padding-inline-end: var(--scrollarea-scrollbar-size);
+        padding-inline-start: unset;
+      }
+
+.m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where(
+        [data-offset-scrollbars='xy'],
+        [data-offset-scrollbars='x'],
+        [data-offset-scrollbars='present']
+      ):where([data-horizontal-hidden]) {
+        padding-bottom: 0;
+      }
+
+.m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where(
+        [data-offset-scrollbars='xy'],
+        [data-offset-scrollbars='x'],
+        [data-offset-scrollbars='present']
+      ):not([data-horizontal-hidden]) {
+        padding-bottom: var(--scrollarea-scrollbar-size);
+      }
 
 .m_f8f631dd {
   min-width: 100%;

package/styles/Table.css

@@ -102,9 +102,18 @@
 
 .m_b242d975:where([data-sticky]) {
     position: sticky;
-    background-color: var(--mantine-color-body);
   }
 
+.m_b242d975:where([data-sticky]) .m_4e7aa4f3 {
+      position: sticky;
+      top: var(--table-sticky-header-offset, 0);
+      background-color: var(--mantine-color-body);
+    }
+
+:where([data-with-table-border]) .m_b242d975[data-sticky] .m_4e7aa4f3 {
+  top: initial;
+}
+
 .m_9e5a3ac7 {
   color: var(--mantine-color-dimmed);
 }
@@ -123,4 +132,5 @@
 
 .m_62259741 {
   min-width: var(--table-min-width);
+  max-height: var(--table-max-height);
 }

package/styles/Table.layer.css

@@ -102,9 +102,18 @@
 
 .m_b242d975:where([data-sticky]) {
     position: sticky;
-    background-color: var(--mantine-color-body);
   }
 
+.m_b242d975:where([data-sticky]) .m_4e7aa4f3 {
+      position: sticky;
+      top: var(--table-sticky-header-offset, 0);
+      background-color: var(--mantine-color-body);
+    }
+
+:where([data-with-table-border]) .m_b242d975[data-sticky] .m_4e7aa4f3 {
+  top: initial;
+}
+
 .m_9e5a3ac7 {
   color: var(--mantine-color-dimmed);
 }
@@ -123,5 +132,6 @@
 
 .m_62259741 {
   min-width: var(--table-min-width);
+  max-height: var(--table-max-height);
 }
 }

package/styles/TypographyStylesProvider.css

@@ -7,6 +7,7 @@
   .m_d6493fad :where(h1, h2, h3, h4, h5, h6) {
     margin-bottom: var(--mantine-spacing-xs);
     text-wrap: var(--mantine-heading-text-wrap);
+    font-family: var(--mantine-font-family-headings);
   }
   .m_d6493fad :where(h1) {
     margin-top: calc(1.5 * var(--mantine-spacing-xl));

package/styles/TypographyStylesProvider.layer.css

@@ -7,6 +7,7 @@
   .m_d6493fad :where(h1, h2, h3, h4, h5, h6) {
     margin-bottom: var(--mantine-spacing-xs);
     text-wrap: var(--mantine-heading-text-wrap);
+    font-family: var(--mantine-font-family-headings);
   }
   .m_d6493fad :where(h1) {
     margin-top: calc(1.5 * var(--mantine-spacing-xl));

package/styles.css

@@ -608,14 +608,39 @@ fieldset:disabled .mantine-active:active {
     display: none;
   }
 
-.m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='y']):where([data-offset-scrollbars='xy'], [data-offset-scrollbars='y']) {
-      padding-inline-end: var(--scrollarea-scrollbar-size);
-      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']
+      ):where([data-vertical-hidden]) {
+        padding-inline-end: 0;
+        padding-inline-start: 0;
+      }
 
-.m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where([data-offset-scrollbars='xy'], [data-offset-scrollbars='x']) {
-      padding-bottom: var(--scrollarea-scrollbar-size);
-    }
+.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]) {
+        padding-inline-end: var(--scrollarea-scrollbar-size);
+        padding-inline-start: unset;
+      }
+
+.m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where(
+        [data-offset-scrollbars='xy'],
+        [data-offset-scrollbars='x'],
+        [data-offset-scrollbars='present']
+      ):where([data-horizontal-hidden]) {
+        padding-bottom: 0;
+      }
+
+.m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where(
+        [data-offset-scrollbars='xy'],
+        [data-offset-scrollbars='x'],
+        [data-offset-scrollbars='present']
+      ):not([data-horizontal-hidden]) {
+        padding-bottom: var(--scrollarea-scrollbar-size);
+      }
 
 .m_f8f631dd {
   min-width: 100%;
@@ -792,14 +817,18 @@ fieldset:disabled .mantine-active:active {
   background-color: var(--mantine-color-body);
 }
 
-  :where([data-mantine-color-scheme='light']) .m_1b7284a3:where([data-with-border]) {
-      border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-gray-3);
+  [data-mantine-color-scheme='light'] .m_1b7284a3 {
+    --paper-border-color: var(--mantine-color-gray-3);
 }
 
-  :where([data-mantine-color-scheme='dark']) .m_1b7284a3:where([data-with-border]) {
-      border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-dark-4);
+  [data-mantine-color-scheme='dark'] .m_1b7284a3 {
+    --paper-border-color: var(--mantine-color-dark-4);
 }
 
+  .m_1b7284a3:where([data-with-border]) {
+    border: calc(0.0625rem * var(--mantine-scale)) solid var(--paper-border-color);
+  }
+
 .m_9814e45f {
   inset: 0;
   position: absolute;
@@ -1523,14 +1552,6 @@ fieldset:disabled .mantine-active:active {
     color: var(--input-disabled-color);
   }
 
-/* Fixes odd Firefox behavior in Select – https://github.com/mantinedev/mantine/issues/7476 */
-
-@supports (-moz-appearance: none) {
-    .m_8fb7ebe7[readonly][aria-haspopup] {
-      pointer-events: none;
-    }
-  }
-
 .m_82577fc2 {
   pointer-events: var(--section-pointer-events);
   position: absolute;
@@ -2132,6 +2153,8 @@ fieldset:disabled .mantine-active:active {
   .m_89ab340[data-disabled] {
     --app-shell-header-offset: 0rem !important;
     --app-shell-navbar-offset: 0rem !important;
+    --app-shell-aside-offset: 0rem !important;
+    --app-shell-footer-offset: 0rem !important;
   }
   [data-mantine-color-scheme='light'] .m_89ab340 {
     --app-shell-border-color: var(--mantine-color-gray-3);
@@ -4811,10 +4834,6 @@ fieldset:disabled .m_d3ea56bb,
     background-color: var(--mantine-color-dark-6);
 }
 
-  .m_a513464:where([data-with-icon]) {
-    padding-inline-start: var(--mantine-spacing-xs);
-  }
-
   .m_a513464:where([data-with-icon])::before {
       display: none;
     }
@@ -6780,9 +6799,18 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
 
 .m_b242d975:where([data-sticky]) {
     position: sticky;
-    background-color: var(--mantine-color-body);
   }
 
+.m_b242d975:where([data-sticky]) .m_4e7aa4f3 {
+      position: sticky;
+      top: var(--table-sticky-header-offset, 0);
+      background-color: var(--mantine-color-body);
+    }
+
+:where([data-with-table-border]) .m_b242d975[data-sticky] .m_4e7aa4f3 {
+  top: initial;
+}
+
 .m_9e5a3ac7 {
   color: var(--mantine-color-dimmed);
 }
@@ -6801,6 +6829,7 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
 
 .m_62259741 {
   min-width: var(--table-min-width);
+  max-height: var(--table-max-height);
 }
 
 .m_bcaa9990 {
@@ -7468,6 +7497,7 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
   .m_d6493fad :where(h1, h2, h3, h4, h5, h6) {
     margin-bottom: var(--mantine-spacing-xs);
     text-wrap: var(--mantine-heading-text-wrap);
+    font-family: var(--mantine-font-family-headings);
   }
   .m_d6493fad :where(h1) {
     margin-top: calc(1.5 * var(--mantine-spacing-xl));

package/styles.layer.css

@@ -608,14 +608,39 @@ fieldset:disabled .mantine-active:active {
     display: none;
   }
 
-.m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='y']):where([data-offset-scrollbars='xy'], [data-offset-scrollbars='y']) {
-      padding-inline-end: var(--scrollarea-scrollbar-size);
-      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']
+      ):where([data-vertical-hidden]) {
+        padding-inline-end: 0;
+        padding-inline-start: 0;
+      }
 
-.m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where([data-offset-scrollbars='xy'], [data-offset-scrollbars='x']) {
-      padding-bottom: var(--scrollarea-scrollbar-size);
-    }
+.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]) {
+        padding-inline-end: var(--scrollarea-scrollbar-size);
+        padding-inline-start: unset;
+      }
+
+.m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where(
+        [data-offset-scrollbars='xy'],
+        [data-offset-scrollbars='x'],
+        [data-offset-scrollbars='present']
+      ):where([data-horizontal-hidden]) {
+        padding-bottom: 0;
+      }
+
+.m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where(
+        [data-offset-scrollbars='xy'],
+        [data-offset-scrollbars='x'],
+        [data-offset-scrollbars='present']
+      ):not([data-horizontal-hidden]) {
+        padding-bottom: var(--scrollarea-scrollbar-size);
+      }
 
 .m_f8f631dd {
   min-width: 100%;
@@ -792,14 +817,18 @@ fieldset:disabled .mantine-active:active {
   background-color: var(--mantine-color-body);
 }
 
-  :where([data-mantine-color-scheme='light']) .m_1b7284a3:where([data-with-border]) {
-      border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-gray-3);
+  [data-mantine-color-scheme='light'] .m_1b7284a3 {
+    --paper-border-color: var(--mantine-color-gray-3);
 }
 
-  :where([data-mantine-color-scheme='dark']) .m_1b7284a3:where([data-with-border]) {
-      border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-dark-4);
+  [data-mantine-color-scheme='dark'] .m_1b7284a3 {
+    --paper-border-color: var(--mantine-color-dark-4);
 }
 
+  .m_1b7284a3:where([data-with-border]) {
+    border: calc(0.0625rem * var(--mantine-scale)) solid var(--paper-border-color);
+  }
+
 .m_9814e45f {
   inset: 0;
   position: absolute;
@@ -1523,14 +1552,6 @@ fieldset:disabled .mantine-active:active {
     color: var(--input-disabled-color);
   }
 
-/* Fixes odd Firefox behavior in Select – https://github.com/mantinedev/mantine/issues/7476 */
-
-@supports (-moz-appearance: none) {
-    .m_8fb7ebe7[readonly][aria-haspopup] {
-      pointer-events: none;
-    }
-  }
-
 .m_82577fc2 {
   pointer-events: var(--section-pointer-events);
   position: absolute;
@@ -2132,6 +2153,8 @@ fieldset:disabled .mantine-active:active {
   .m_89ab340[data-disabled] {
     --app-shell-header-offset: 0rem !important;
     --app-shell-navbar-offset: 0rem !important;
+    --app-shell-aside-offset: 0rem !important;
+    --app-shell-footer-offset: 0rem !important;
   }
   [data-mantine-color-scheme='light'] .m_89ab340 {
     --app-shell-border-color: var(--mantine-color-gray-3);
@@ -4811,10 +4834,6 @@ fieldset:disabled .m_d3ea56bb,
     background-color: var(--mantine-color-dark-6);
 }
 
-  .m_a513464:where([data-with-icon]) {
-    padding-inline-start: var(--mantine-spacing-xs);
-  }
-
   .m_a513464:where([data-with-icon])::before {
       display: none;
     }
@@ -6780,9 +6799,18 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
 
 .m_b242d975:where([data-sticky]) {
     position: sticky;
-    background-color: var(--mantine-color-body);
   }
 
+.m_b242d975:where([data-sticky]) .m_4e7aa4f3 {
+      position: sticky;
+      top: var(--table-sticky-header-offset, 0);
+      background-color: var(--mantine-color-body);
+    }
+
+:where([data-with-table-border]) .m_b242d975[data-sticky] .m_4e7aa4f3 {
+  top: initial;
+}
+
 .m_9e5a3ac7 {
   color: var(--mantine-color-dimmed);
 }
@@ -6801,6 +6829,7 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
 
 .m_62259741 {
   min-width: var(--table-min-width);
+  max-height: var(--table-max-height);
 }
 
 .m_bcaa9990 {
@@ -7468,6 +7497,7 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
   .m_d6493fad :where(h1, h2, h3, h4, h5, h6) {
     margin-bottom: var(--mantine-spacing-xs);
     text-wrap: var(--mantine-heading-text-wrap);
+    font-family: var(--mantine-font-family-headings);
   }
   .m_d6493fad :where(h1) {
     margin-top: calc(1.5 * var(--mantine-spacing-xl));