@mantine/core 7.6.1 → 7.7.0

package/styles/Notification.css

@@ -98,38 +98,38 @@
   text-overflow: ellipsis;
 }
 
-[data-mantine-color-scheme='light'] .m-3d733a3a {
+:where([data-mantine-color-scheme='light']) .m-3d733a3a {
     color: var(--mantine-color-black);
 }
 
-[data-mantine-color-scheme='dark'] .m-3d733a3a {
+:where([data-mantine-color-scheme='dark']) .m-3d733a3a {
     color: var(--mantine-color-dark-0);
 }
 
-[data-mantine-color-scheme='light'] .m-3d733a3a:where([data-with-title]) {
+:where([data-mantine-color-scheme='light']) .m-3d733a3a:where([data-with-title]) {
       color: var(--mantine-color-gray-6);
 }
 
-[data-mantine-color-scheme='dark'] .m-3d733a3a:where([data-with-title]) {
+:where([data-mantine-color-scheme='dark']) .m-3d733a3a:where([data-with-title]) {
       color: var(--mantine-color-dark-2);
 }
 
 @media (hover: hover) {
-    [data-mantine-color-scheme='light'] .m-919a4d88:hover {
+    :where([data-mantine-color-scheme='light']) .m-919a4d88:hover {
       background-color: var(--mantine-color-gray-0);
   }
 
-    [data-mantine-color-scheme='dark'] .m-919a4d88:hover {
+    :where([data-mantine-color-scheme='dark']) .m-919a4d88:hover {
       background-color: var(--mantine-color-dark-8);
   }
 }
 
 @media (hover: none) {
-    [data-mantine-color-scheme='light'] .m-919a4d88:active {
+    :where([data-mantine-color-scheme='light']) .m-919a4d88:active {
       background-color: var(--mantine-color-gray-0);
   }
 
-    [data-mantine-color-scheme='dark'] .m-919a4d88:active {
+    :where([data-mantine-color-scheme='dark']) .m-919a4d88:active {
       background-color: var(--mantine-color-dark-8);
   }
 }

package/styles/Notification.layer.css

@@ -98,38 +98,38 @@
   text-overflow: ellipsis;
 }
 
-[data-mantine-color-scheme='light'] .m-3d733a3a {
+:where([data-mantine-color-scheme='light']) .m-3d733a3a {
     color: var(--mantine-color-black);
 }
 
-[data-mantine-color-scheme='dark'] .m-3d733a3a {
+:where([data-mantine-color-scheme='dark']) .m-3d733a3a {
     color: var(--mantine-color-dark-0);
 }
 
-[data-mantine-color-scheme='light'] .m-3d733a3a:where([data-with-title]) {
+:where([data-mantine-color-scheme='light']) .m-3d733a3a:where([data-with-title]) {
       color: var(--mantine-color-gray-6);
 }
 
-[data-mantine-color-scheme='dark'] .m-3d733a3a:where([data-with-title]) {
+:where([data-mantine-color-scheme='dark']) .m-3d733a3a:where([data-with-title]) {
       color: var(--mantine-color-dark-2);
 }
 
 @media (hover: hover) {
-    [data-mantine-color-scheme='light'] .m-919a4d88:hover {
+    :where([data-mantine-color-scheme='light']) .m-919a4d88:hover {
       background-color: var(--mantine-color-gray-0);
   }
 
-    [data-mantine-color-scheme='dark'] .m-919a4d88:hover {
+    :where([data-mantine-color-scheme='dark']) .m-919a4d88:hover {
       background-color: var(--mantine-color-dark-8);
   }
 }
 
 @media (hover: none) {
-    [data-mantine-color-scheme='light'] .m-919a4d88:active {
+    :where([data-mantine-color-scheme='light']) .m-919a4d88:active {
       background-color: var(--mantine-color-gray-0);
   }
 
-    [data-mantine-color-scheme='dark'] .m-919a4d88:active {
+    :where([data-mantine-color-scheme='dark']) .m-919a4d88:active {
       background-color: var(--mantine-color-dark-8);
   }
 }

package/styles/Popover.css

@@ -10,12 +10,12 @@
     outline: none;
   }
 
-  [data-mantine-color-scheme='light'] .m-38a85659 {
+  :where([data-mantine-color-scheme='light']) .m-38a85659 {
     --popover-border-color: var(--mantine-color-gray-2);
     background-color: var(--mantine-color-white);
 }
 
-  [data-mantine-color-scheme='dark'] .m-38a85659 {
+  :where([data-mantine-color-scheme='dark']) .m-38a85659 {
     --popover-border-color: var(--mantine-color-dark-4);
     background-color: var(--mantine-color-dark-6);
 }

package/styles/Popover.layer.css

@@ -10,12 +10,12 @@
     outline: none;
   }
 
-  [data-mantine-color-scheme='light'] .m-38a85659 {
+  :where([data-mantine-color-scheme='light']) .m-38a85659 {
     --popover-border-color: var(--mantine-color-gray-2);
     background-color: var(--mantine-color-white);
 }
 
-  [data-mantine-color-scheme='dark'] .m-38a85659 {
+  :where([data-mantine-color-scheme='dark']) .m-38a85659 {
     --popover-border-color: var(--mantine-color-dark-4);
     background-color: var(--mantine-color-dark-6);
 }

package/styles/Radio.css

@@ -64,7 +64,7 @@
     border-color: var(--mantine-color-gray-4);
 }
 
-[data-mantine-color-scheme='dark'] .m-8a3dbb89 {
+:where([data-mantine-color-scheme='dark']) .m-8a3dbb89 {
     background-color: var(--mantine-color-dark-6);
     border-color: var(--mantine-color-dark-4);
 }

package/styles/Radio.layer.css

@@ -64,7 +64,7 @@
     border-color: var(--mantine-color-gray-4);
 }
 
-[data-mantine-color-scheme='dark'] .m-8a3dbb89 {
+:where([data-mantine-color-scheme='dark']) .m-8a3dbb89 {
     background-color: var(--mantine-color-dark-6);
     border-color: var(--mantine-color-dark-4);
 }

package/styles/ScrollArea.css

@@ -120,11 +120,11 @@
     min-height: calc(2.75rem * var(--mantine-scale));
   }
 
-[data-mantine-color-scheme='light'] .m-d8b5e363 {
+:where([data-mantine-color-scheme='light']) .m-d8b5e363 {
     background-color: rgba(0, 0, 0, 0.4);
 }
 
-[data-mantine-color-scheme='dark'] .m-d8b5e363 {
+:where([data-mantine-color-scheme='dark']) .m-d8b5e363 {
     background-color: rgba(255, 255, 255, 0.4);
 }
 

package/styles/ScrollArea.layer.css

@@ -120,11 +120,11 @@
     min-height: calc(2.75rem * var(--mantine-scale));
   }
 
-[data-mantine-color-scheme='light'] .m-d8b5e363 {
+:where([data-mantine-color-scheme='light']) .m-d8b5e363 {
     background-color: rgba(0, 0, 0, 0.4);
 }
 
-[data-mantine-color-scheme='dark'] .m-d8b5e363 {
+:where([data-mantine-color-scheme='dark']) .m-d8b5e363 {
     background-color: rgba(255, 255, 255, 0.4);
 }
 

package/styles/SegmentedControl.css

@@ -19,10 +19,6 @@
   padding: 4px;
 } /* px required for correct indicator calculations */
 
-  .m-cf365364[data-initialization] {
-    --sc-transition-duration: 0ms !important;
-  }
-
   .m-cf365364:where([data-full-width]) {
     display: flex;
   }
@@ -50,12 +46,6 @@
   display: block;
   z-index: 1;
   border-radius: var(--sc-radius, var(--mantine-radius-default));
-  width: var(--sc-indicator-width);
-  height: var(--sc-indicator-height);
-  transform: var(--sc-indicator-transform);
-  transition:
-    transform var(--sc-transition-duration) var(--sc-transition-timing-function),
-    width var(--sc-transition-duration) var(--sc-transition-timing-function);
 }
 
 :where([data-mantine-color-scheme='light']) .m-9e182ccd {
@@ -120,6 +110,28 @@ fieldset:disabled .m-1738fcb2,
       color: var(--sc-label-color, var(--mantine-color-white));
 }
 
+.m-cf365364:where([data-initialized]) .m-1738fcb2:where([data-active])::before {
+        display: none;
+      }
+
+.m-1738fcb2:where([data-active])::before {
+      content: '';
+      inset: 0;
+      z-index: 0;
+      position: absolute;
+      border-radius: var(--sc-radius, var(--mantine-radius-default));
+}
+
+:where([data-mantine-color-scheme='light']) .m-1738fcb2:where([data-active])::before {
+        box-shadow: var(--sc-shadow, none);
+        background-color: var(--sc-color, var(--mantine-color-white));
+}
+
+:where([data-mantine-color-scheme='dark']) .m-1738fcb2:where([data-active])::before {
+        box-shadow: none;
+        background-color: var(--sc-color, var(--mantine-color-dark-5));
+}
+
 @media (hover: hover) {
       :where([data-mantine-color-scheme='light']) .m-1738fcb2:where(:not([data-disabled], [data-active], [data-read-only])):hover {
         color: var(--mantine-color-black);
@@ -218,3 +230,8 @@ fieldset:disabled .m-1738fcb2,
 [data-mantine-color-scheme] .m-69686b9b[data-active]::before, [data-mantine-color-scheme] .m-69686b9b[data-active] + .m-69686b9b::before {
           --separator-color: transparent;
         }
+
+.m-78882f40 {
+  position: relative;
+  z-index: 2;
+}

package/styles/SegmentedControl.layer.css

@@ -19,10 +19,6 @@
   padding: 4px;
 } /* px required for correct indicator calculations */
 
-  .m-cf365364[data-initialization] {
-    --sc-transition-duration: 0ms !important;
-  }
-
   .m-cf365364:where([data-full-width]) {
     display: flex;
   }
@@ -50,12 +46,6 @@
   display: block;
   z-index: 1;
   border-radius: var(--sc-radius, var(--mantine-radius-default));
-  width: var(--sc-indicator-width);
-  height: var(--sc-indicator-height);
-  transform: var(--sc-indicator-transform);
-  transition:
-    transform var(--sc-transition-duration) var(--sc-transition-timing-function),
-    width var(--sc-transition-duration) var(--sc-transition-timing-function);
 }
 
 :where([data-mantine-color-scheme='light']) .m-9e182ccd {
@@ -120,6 +110,28 @@ fieldset:disabled .m-1738fcb2,
       color: var(--sc-label-color, var(--mantine-color-white));
 }
 
+.m-cf365364:where([data-initialized]) .m-1738fcb2:where([data-active])::before {
+        display: none;
+      }
+
+.m-1738fcb2:where([data-active])::before {
+      content: '';
+      inset: 0;
+      z-index: 0;
+      position: absolute;
+      border-radius: var(--sc-radius, var(--mantine-radius-default));
+}
+
+:where([data-mantine-color-scheme='light']) .m-1738fcb2:where([data-active])::before {
+        box-shadow: var(--sc-shadow, none);
+        background-color: var(--sc-color, var(--mantine-color-white));
+}
+
+:where([data-mantine-color-scheme='dark']) .m-1738fcb2:where([data-active])::before {
+        box-shadow: none;
+        background-color: var(--sc-color, var(--mantine-color-dark-5));
+}
+
 @media (hover: hover) {
       :where([data-mantine-color-scheme='light']) .m-1738fcb2:where(:not([data-disabled], [data-active], [data-read-only])):hover {
         color: var(--mantine-color-black);
@@ -218,4 +230,9 @@ fieldset:disabled .m-1738fcb2,
 [data-mantine-color-scheme] .m-69686b9b[data-active]::before, [data-mantine-color-scheme] .m-69686b9b[data-active] + .m-69686b9b::before {
           --separator-color: transparent;
         }
+
+.m-78882f40 {
+  position: relative;
+  z-index: 2;
+}
 }

package/styles/Slider.css

@@ -192,11 +192,11 @@ fieldset:disabled .m-c9ade57f:where([data-inverted]),
     border-color: var(--slider-color);
   }
 
-[data-mantine-color-scheme='light'] .m-dd33bc19:where([data-filled])[data-disabled] {
+:where([data-mantine-color-scheme='light']) .m-dd33bc19:where([data-filled]):where([data-disabled]) {
         border-color: var(--mantine-color-gray-4);
 }
 
-[data-mantine-color-scheme='dark'] .m-dd33bc19:where([data-filled])[data-disabled] {
+:where([data-mantine-color-scheme='dark']) .m-dd33bc19:where([data-filled]):where([data-disabled]) {
         border-color: var(--mantine-color-dark-3);
 }
 

package/styles/Slider.layer.css

@@ -192,11 +192,11 @@ fieldset:disabled .m-c9ade57f:where([data-inverted]),
     border-color: var(--slider-color);
   }
 
-[data-mantine-color-scheme='light'] .m-dd33bc19:where([data-filled])[data-disabled] {
+:where([data-mantine-color-scheme='light']) .m-dd33bc19:where([data-filled]):where([data-disabled]) {
         border-color: var(--mantine-color-gray-4);
 }
 
-[data-mantine-color-scheme='dark'] .m-dd33bc19:where([data-filled])[data-disabled] {
+:where([data-mantine-color-scheme='dark']) .m-dd33bc19:where([data-filled]):where([data-disabled]) {
         border-color: var(--mantine-color-dark-3);
 }
 

package/styles/TypographyStylesProvider.css

@@ -52,11 +52,11 @@
     margin-top: 0;
     margin-bottom: var(--mantine-spacing-lg);
   }
-  [data-mantine-color-scheme='light'] .m-d6493fad :where(mark) {
+  :where([data-mantine-color-scheme='light']) .m-d6493fad :where(mark) {
       background-color: var(--mantine-color-yellow-2);
       color: inherit;
 }
-  [data-mantine-color-scheme='dark'] .m-d6493fad :where(mark) {
+  :where([data-mantine-color-scheme='dark']) .m-d6493fad :where(mark) {
       background-color: var(--mantine-color-yellow-5);
       color: var(--mantine-color-black);
 }
@@ -80,10 +80,10 @@
     border: 0;
     border-top: calc(0.0625rem * var(--mantine-scale)) solid;
   }
-  [data-mantine-color-scheme='light'] .m-d6493fad :where(hr) {
+  :where([data-mantine-color-scheme='light']) .m-d6493fad :where(hr) {
       border-color: var(--mantine-color-gray-3);
 }
-  [data-mantine-color-scheme='dark'] .m-d6493fad :where(hr) {
+  :where([data-mantine-color-scheme='dark']) .m-d6493fad :where(hr) {
       border-color: var(--mantine-color-dark-3);
 }
   .m-d6493fad :where(pre) {
@@ -97,10 +97,10 @@
     font-size: var(--mantine-font-size-xs);
     border-radius: var(--mantine-radius-sm);
   }
-  [data-mantine-color-scheme='light'] .m-d6493fad :where(pre) {
+  :where([data-mantine-color-scheme='light']) .m-d6493fad :where(pre) {
       background-color: var(--mantine-color-gray-0);
 }
-  [data-mantine-color-scheme='dark'] .m-d6493fad :where(pre) {
+  :where([data-mantine-color-scheme='dark']) .m-d6493fad :where(pre) {
       background-color: var(--mantine-color-dark-8);
 }
   .m-d6493fad :where(pre) :where(code) {
@@ -128,7 +128,7 @@
       color: var(--mantine-color-gray-7);
       background-color: var(--mantine-color-gray-0);
 }
-  [data-mantine-color-scheme='dark'] .m-d6493fad :where(kbd) {
+  :where([data-mantine-color-scheme='dark']) .m-d6493fad :where(kbd) {
       border-color: var(--mantine-color-dark-3);
       color: var(--mantine-color-dark-0);
       background-color: var(--mantine-color-dark-5);
@@ -140,11 +140,11 @@
     font-family: var(--mantine-font-family-monospace);
     font-size: var(--mantine-font-size-xs);
   }
-  [data-mantine-color-scheme='light'] .m-d6493fad :where(code) {
+  :where([data-mantine-color-scheme='light']) .m-d6493fad :where(code) {
       background-color: var(--mantine-color-gray-0);
       color: var(--mantine-color-black);
 }
-  [data-mantine-color-scheme='dark'] .m-d6493fad :where(code) {
+  :where([data-mantine-color-scheme='dark']) .m-d6493fad :where(code) {
       background-color: var(--mantine-color-dark-5);
       color: var(--mantine-color-white);
 }

package/styles/TypographyStylesProvider.layer.css

@@ -52,11 +52,11 @@
     margin-top: 0;
     margin-bottom: var(--mantine-spacing-lg);
   }
-  [data-mantine-color-scheme='light'] .m-d6493fad :where(mark) {
+  :where([data-mantine-color-scheme='light']) .m-d6493fad :where(mark) {
       background-color: var(--mantine-color-yellow-2);
       color: inherit;
 }
-  [data-mantine-color-scheme='dark'] .m-d6493fad :where(mark) {
+  :where([data-mantine-color-scheme='dark']) .m-d6493fad :where(mark) {
       background-color: var(--mantine-color-yellow-5);
       color: var(--mantine-color-black);
 }
@@ -80,10 +80,10 @@
     border: 0;
     border-top: calc(0.0625rem * var(--mantine-scale)) solid;
   }
-  [data-mantine-color-scheme='light'] .m-d6493fad :where(hr) {
+  :where([data-mantine-color-scheme='light']) .m-d6493fad :where(hr) {
       border-color: var(--mantine-color-gray-3);
 }
-  [data-mantine-color-scheme='dark'] .m-d6493fad :where(hr) {
+  :where([data-mantine-color-scheme='dark']) .m-d6493fad :where(hr) {
       border-color: var(--mantine-color-dark-3);
 }
   .m-d6493fad :where(pre) {
@@ -97,10 +97,10 @@
     font-size: var(--mantine-font-size-xs);
     border-radius: var(--mantine-radius-sm);
   }
-  [data-mantine-color-scheme='light'] .m-d6493fad :where(pre) {
+  :where([data-mantine-color-scheme='light']) .m-d6493fad :where(pre) {
       background-color: var(--mantine-color-gray-0);
 }
-  [data-mantine-color-scheme='dark'] .m-d6493fad :where(pre) {
+  :where([data-mantine-color-scheme='dark']) .m-d6493fad :where(pre) {
       background-color: var(--mantine-color-dark-8);
 }
   .m-d6493fad :where(pre) :where(code) {
@@ -128,7 +128,7 @@
       color: var(--mantine-color-gray-7);
       background-color: var(--mantine-color-gray-0);
 }
-  [data-mantine-color-scheme='dark'] .m-d6493fad :where(kbd) {
+  :where([data-mantine-color-scheme='dark']) .m-d6493fad :where(kbd) {
       border-color: var(--mantine-color-dark-3);
       color: var(--mantine-color-dark-0);
       background-color: var(--mantine-color-dark-5);
@@ -140,11 +140,11 @@
     font-family: var(--mantine-font-family-monospace);
     font-size: var(--mantine-font-size-xs);
   }
-  [data-mantine-color-scheme='light'] .m-d6493fad :where(code) {
+  :where([data-mantine-color-scheme='light']) .m-d6493fad :where(code) {
       background-color: var(--mantine-color-gray-0);
       color: var(--mantine-color-black);
 }
-  [data-mantine-color-scheme='dark'] .m-d6493fad :where(code) {
+  :where([data-mantine-color-scheme='dark']) .m-d6493fad :where(code) {
       background-color: var(--mantine-color-dark-5);
       color: var(--mantine-color-white);
 }