@mantine/core 9.2.2 → 9.3.0

package/styles/Tree.css

@@ -1,7 +1,10 @@
-.m_f698e191 {
+:where([data-tree-root]) {
   --level-offset: var(--mantine-spacing-lg);
   --tree-line-width: calc(0.0625rem * var(--mantine-scale));
   --tree-line-color: var(--mantine-color-default-border);
+}
+
+.m_f698e191 {
   margin: 0;
   padding: 0;
   user-select: none;
@@ -74,16 +77,22 @@
     position: relative;
   }
 
-:where([data-with-lines]) .m_75f3ecf > .m_f6970eb1::before {
-      content: '';
-      position: absolute;
-      top: calc(0.75rem * var(--mantine-scale));
-      inset-inline-start: calc(var(--label-offset) - var(--level-offset) / 2);
-      width: calc(var(--level-offset) / 2);
-      height: 0;
-      border-top: var(--tree-line-width) solid var(--tree-line-color);
-      pointer-events: none;
-    }
+/* Horizontal connector at the node's own level — applies to both nested and flat layouts */
+
+:where([data-with-lines]) .m_f6970eb1:not([data-level='1'])::before {
+    content: '';
+    position: absolute;
+    top: calc(0.75rem * var(--mantine-scale));
+    inset-inline-start: calc(var(--label-offset) - var(--level-offset) / 2);
+    width: calc(var(--level-offset) / 2);
+    height: 0;
+    border-top: var(--tree-line-width) solid var(--tree-line-color);
+    pointer-events: none;
+    z-index: 1;
+  }
+
+/* Vertical line for nested layout (regular Tree): the line spans the parent <li>'s
+     full height — including descendants — so ancestor columns stay continuous. */
 
 :where([data-with-lines]) .m_75f3ecf > .m_f6970eb1::after {
       content: '';
@@ -94,9 +103,44 @@
       width: 0;
       border-inline-start: var(--tree-line-width) solid var(--tree-line-color);
       pointer-events: none;
+      z-index: 1;
     }
 
 :where([data-with-lines]) .m_75f3ecf > .m_f6970eb1:last-child::after {
       bottom: auto;
       height: calc(0.75rem * var(--mantine-scale));
     }
+
+:where([data-with-lines]) .m_f6970eb1:where([data-dragging])::before,
+    :where([data-with-lines]) .m_f6970eb1:where([data-dragging])::after {
+      display: none;
+    }
+
+:where([data-with-lines]) .m_f6970eb1:where([data-dragging]) .m_c03b303c {
+      display: none;
+    }
+
+/* Vertical line markers rendered as DOM children by `FlatTreeNode` for flat layouts
+   (e.g. virtualized trees) where ::after on a single node can't span ancestor rows.
+   Each marker is positioned at column `--flat-line-column` and is only visible
+   inside a `[data-with-lines]` tree. */
+.m_c03b303c {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 0;
+  inset-inline-start: calc((var(--flat-line-column) - 1.5) * var(--level-offset));
+  border-inline-start: var(--tree-line-width) solid var(--tree-line-color);
+  pointer-events: none;
+  z-index: 1;
+  display: none;
+}
+
+:where([data-with-lines]) .m_c03b303c {
+  display: block;
+}
+
+.m_bf7448d9 {
+  bottom: auto;
+  height: calc(0.75rem * var(--mantine-scale));
+}

package/styles/Tree.layer.css

@@ -1,7 +1,10 @@
-@layer mantine {.m_f698e191 {
+@layer mantine {:where([data-tree-root]) {
   --level-offset: var(--mantine-spacing-lg);
   --tree-line-width: calc(0.0625rem * var(--mantine-scale));
   --tree-line-color: var(--mantine-color-default-border);
+}
+
+.m_f698e191 {
   margin: 0;
   padding: 0;
   user-select: none;
@@ -74,16 +77,22 @@
     position: relative;
   }
 
-:where([data-with-lines]) .m_75f3ecf > .m_f6970eb1::before {
-      content: '';
-      position: absolute;
-      top: calc(0.75rem * var(--mantine-scale));
-      inset-inline-start: calc(var(--label-offset) - var(--level-offset) / 2);
-      width: calc(var(--level-offset) / 2);
-      height: 0;
-      border-top: var(--tree-line-width) solid var(--tree-line-color);
-      pointer-events: none;
-    }
+/* Horizontal connector at the node's own level — applies to both nested and flat layouts */
+
+:where([data-with-lines]) .m_f6970eb1:not([data-level='1'])::before {
+    content: '';
+    position: absolute;
+    top: calc(0.75rem * var(--mantine-scale));
+    inset-inline-start: calc(var(--label-offset) - var(--level-offset) / 2);
+    width: calc(var(--level-offset) / 2);
+    height: 0;
+    border-top: var(--tree-line-width) solid var(--tree-line-color);
+    pointer-events: none;
+    z-index: 1;
+  }
+
+/* Vertical line for nested layout (regular Tree): the line spans the parent <li>'s
+     full height — including descendants — so ancestor columns stay continuous. */
 
 :where([data-with-lines]) .m_75f3ecf > .m_f6970eb1::after {
       content: '';
@@ -94,10 +103,45 @@
       width: 0;
       border-inline-start: var(--tree-line-width) solid var(--tree-line-color);
       pointer-events: none;
+      z-index: 1;
     }
 
 :where([data-with-lines]) .m_75f3ecf > .m_f6970eb1:last-child::after {
       bottom: auto;
       height: calc(0.75rem * var(--mantine-scale));
     }
+
+:where([data-with-lines]) .m_f6970eb1:where([data-dragging])::before,
+    :where([data-with-lines]) .m_f6970eb1:where([data-dragging])::after {
+      display: none;
+    }
+
+:where([data-with-lines]) .m_f6970eb1:where([data-dragging]) .m_c03b303c {
+      display: none;
+    }
+
+/* Vertical line markers rendered as DOM children by `FlatTreeNode` for flat layouts
+   (e.g. virtualized trees) where ::after on a single node can't span ancestor rows.
+   Each marker is positioned at column `--flat-line-column` and is only visible
+   inside a `[data-with-lines]` tree. */
+.m_c03b303c {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 0;
+  inset-inline-start: calc((var(--flat-line-column) - 1.5) * var(--level-offset));
+  border-inline-start: var(--tree-line-width) solid var(--tree-line-color);
+  pointer-events: none;
+  z-index: 1;
+  display: none;
+}
+
+:where([data-with-lines]) .m_c03b303c {
+  display: block;
+}
+
+.m_bf7448d9 {
+  bottom: auto;
+  height: calc(0.75rem * var(--mantine-scale));
+}
 }

package/styles/Typography.css

@@ -172,7 +172,7 @@
       color: var(--mantine-color-dimmed);
     }
   .m_d08caa0 :where(table) :where(th) {
-      text-align: left;
+      text-align: start;
       font-weight: bold;
       font-size: var(--mantine-font-size-sm);
       padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);

package/styles/Typography.layer.css

@@ -172,7 +172,7 @@
       color: var(--mantine-color-dimmed);
     }
   .m_d08caa0 :where(table) :where(th) {
-      text-align: left;
+      text-align: start;
       font-weight: bold;
       font-size: var(--mantine-font-size-sm);
       padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);

package/styles/UnstyledButton.css

@@ -5,13 +5,9 @@
   padding: 0;
   appearance: none;
   font-size: var(--mantine-font-size-md);
-  text-align: left;
+  text-align: start;
   text-decoration: none;
   color: inherit;
   touch-action: manipulation;
   -webkit-tap-highlight-color: transparent;
 }
-
-  :where([dir="rtl"]) .m_87cf2631 {
-    text-align: right;
-}

package/styles/UnstyledButton.layer.css

@@ -5,14 +5,10 @@
   padding: 0;
   appearance: none;
   font-size: var(--mantine-font-size-md);
-  text-align: left;
+  text-align: start;
   text-decoration: none;
   color: inherit;
   touch-action: manipulation;
   -webkit-tap-highlight-color: transparent;
 }
-
-  :where([dir="rtl"]) .m_87cf2631 {
-    text-align: right;
-}
 }