@mantine/core 9.5.1 → 9.6.0

package/styles.css

@@ -42,47 +42,6 @@ body,
 }
   }
 
-@media (prefers-reduced-motion: reduce) {
-    [data-respect-reduced-motion] [data-reduce-motion] {
-      transition: none;
-      animation: none;
-    }
-  }
-
-[data-mantine-color-scheme='light'] .mantine-light-hidden {
-    display: none;
-}
-
-[data-mantine-color-scheme='dark'] .mantine-dark-hidden {
-    display: none;
-}
-
-.mantine-focus-auto:focus-visible {
-    outline: 2px solid var(--mantine-primary-color-filled);
-    outline-offset: calc(0.125rem * var(--mantine-scale));
-  }
-
-.mantine-focus-always:focus {
-    outline: 2px solid var(--mantine-primary-color-filled);
-    outline-offset: calc(0.125rem * var(--mantine-scale));
-  }
-
-.mantine-focus-never:focus {
-    outline: none;
-  }
-
-.mantine-active:active {
-    transform: translateY(calc(0.0625rem * var(--mantine-scale)));
-  }
-
-fieldset:disabled .mantine-active:active {
-    transform: none;
-  }
-
-:where([dir="rtl"]) .mantine-rotate-rtl {
-    transform: rotate(180deg);
-}
-
 /* This file is automatically generated, do not modify it directly. */
 :root,
 :host {
@@ -611,6 +570,47 @@ fieldset:disabled .mantine-active:active {
   --mantine-color-orange-outline-hover: rgba(253, 126, 20, 0.05);
 }
 
+@media (prefers-reduced-motion: reduce) {
+    [data-respect-reduced-motion] [data-reduce-motion] {
+      transition: none;
+      animation: none;
+    }
+  }
+
+[data-mantine-color-scheme='light'] .mantine-light-hidden {
+    display: none;
+}
+
+[data-mantine-color-scheme='dark'] .mantine-dark-hidden {
+    display: none;
+}
+
+.mantine-focus-auto:focus-visible {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: calc(0.125rem * var(--mantine-scale));
+  }
+
+.mantine-focus-always:focus {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: calc(0.125rem * var(--mantine-scale));
+  }
+
+.mantine-focus-never:focus {
+    outline: none;
+  }
+
+.mantine-active:active {
+    transform: translateY(calc(0.0625rem * var(--mantine-scale)));
+  }
+
+fieldset:disabled .mantine-active:active {
+    transform: none;
+  }
+
+:where([dir="rtl"]) .mantine-rotate-rtl {
+    transform: rotate(180deg);
+}
+
 .m_d57069b5 {
   --scrollarea-scrollbar-size: calc(0.75rem * var(--mantine-scale));
 
@@ -1994,6 +1994,20 @@ fieldset:disabled .mantine-active:active {
   bottom: var(--affix-bottom);
 }
 
+.m_de09d2d2 {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-sm);
+  width: fit-content;
+  margin-inline: auto;
+}
+
+.m_eab73b29 {
+  width: calc(0.0625rem * var(--mantine-scale));
+  align-self: stretch;
+  background-color: var(--mantine-color-default-border);
+}
+
 .m_66836ed3 {
   --alert-radius: var(--mantine-radius-default);
   --alert-bg: var(--mantine-primary-color-light);
@@ -6626,6 +6640,7 @@ fieldset:disabled .m_8ee546b8,
 }
 
 .m_47dd3981 {
+  position: relative;
   display: inline-flex;
   align-items: baseline;
   overflow: hidden;
@@ -6635,12 +6650,27 @@ fieldset:disabled .m_8ee546b8,
     font-variant-numeric: tabular-nums;
   }
 
+.m_ccf525bd {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  overflow: hidden;
+  white-space: pre;
+  color: transparent;
+  forced-color-adjust: none;
+}
+
 .m_b301d46e {
+  position: relative;
+  z-index: 2;
   display: inline-block;
   width: 1ch;
   height: 1em;
   overflow: hidden;
   line-height: 1;
+  pointer-events: none;
+  user-select: none;
+  -webkit-user-select: none;
   transition:
     width var(--rn-duration) var(--rn-timing-function),
     opacity var(--rn-duration) var(--rn-timing-function);
@@ -6665,9 +6695,14 @@ fieldset:disabled .m_8ee546b8,
   }
 
 .m_47d64bf5 {
+  position: relative;
+  z-index: 2;
   display: inline-block;
   overflow: hidden;
   white-space: pre;
+  pointer-events: none;
+  user-select: none;
+  -webkit-user-select: none;
   transition: opacity var(--rn-duration) var(--rn-timing-function);
 }
 
@@ -7630,6 +7665,10 @@ fieldset:disabled .m_38aeed47:where(:not([data-inverted])),
     gap: var(--mantine-spacing-md) 0;
   }
 
+.m_aaf89d0b:where([data-label-position='bottom']) {
+    align-items: flex-start;
+  }
+
 .m_aaf89d0b:where([data-orientation='vertical']) {
     flex-direction: column;
   }
@@ -7658,6 +7697,10 @@ fieldset:disabled .m_38aeed47:where(:not([data-inverted])),
     background-color: var(--stepper-color);
   }
 
+.m_aaf89d0b:where([data-label-position='bottom']) .m_2a371ac9 {
+    margin-top: calc((var(--stepper-icon-size) - var(--stepper-outline-thickness)) / 2);
+  }
+
 .m_78da155d {
   padding-top: var(--stepper-content-padding);
 }
@@ -7681,6 +7724,22 @@ fieldset:disabled .m_38aeed47:where(:not([data-inverted])),
     flex-direction: row-reverse;
   }
 
+.m_cbb57068:where([data-label-position='bottom']) {
+    flex-direction: column;
+    align-items: center;
+    min-width: var(--stepper-icon-size);
+    max-width: calc(var(--stepper-icon-size) * 4);
+    overflow: visible;
+  }
+
+/* `labelPosition="bottom"` wins over `iconPosition`: the two describe the same axis, and
+       `column-reverse` here would move the label above the icon – the opposite of what the
+       prop name promises. */
+
+.m_cbb57068:where([data-label-position='bottom']):where([data-icon-position='right']) {
+      flex-direction: column;
+    }
+
 .m_f56b1e2c {
   align-items: center;
 }
@@ -7786,6 +7845,12 @@ fieldset:disabled .m_38aeed47:where(:not([data-inverted])),
     margin-inline-end: var(--mantine-spacing-sm);
   }
 
+.m_cbb57068:where([data-label-position='bottom']) .m_1956aa2a {
+    align-items: center;
+    text-align: center;
+    margin: calc(var(--mantine-spacing-xs) / 2) 0 0;
+  }
+
 .m_12051f6c {
   font-weight: var(--mantine-font-weight-medium);
   font-size: var(--stepper-fz);
@@ -9273,6 +9338,65 @@ fieldset:disabled .m_38aeed47:where(:not([data-inverted])),
   .m_d08caa0 :where(table) :where(tr:last-of-type td) {
       border-bottom: 0;
     }
+  .m_d08caa0 :where(details) {
+    margin-bottom: var(--mantine-spacing-md);
+    padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
+    border: 1px solid var(--details-border-color);
+    border-radius: var(--mantine-radius-default);
+  }
+  :where([data-mantine-color-scheme='light']) .m_d08caa0 :where(details) {
+      --details-border-color: var(--mantine-color-gray-3);
+      --details-summary-hover: var(--mantine-color-gray-1);
+}
+  :where([data-mantine-color-scheme='dark']) .m_d08caa0 :where(details) {
+      --details-border-color: var(--mantine-color-dark-4);
+      --details-summary-hover: var(--mantine-color-dark-5);
+}
+  /* The native marker is hidden and replaced with a small triangle control so only the control –
+       not the whole summary text – gets the hover affordance, matching the editor toggle button. */
+  .m_d08caa0 :where(details) :where(summary) {
+      position: relative;
+      display: flex;
+      align-items: center;
+      gap: var(--mantine-spacing-xs);
+      cursor: pointer;
+      font-weight: 600;
+      list-style: none;
+    }
+  .m_d08caa0 :where(details) :where(summary)::-webkit-details-marker {
+      display: none;
+    }
+  /* Control box: reserves space for the triangle and carries the hover background. */
+  .m_d08caa0 :where(details) :where(summary)::before {
+      content: '';
+      flex-shrink: 0;
+      width: 1.25rem;
+      height: calc(1em * var(--mantine-line-height));
+      border-radius: var(--mantine-radius-sm);
+    }
+  .m_d08caa0 :where(details) :where(summary:hover)::before {
+      background-color: var(--details-summary-hover);
+    }
+  /* Disclosure triangle centered over the control box (7px = half of the 20px box minus the 6px
+       triangle); rotates to point down when the details is open. */
+  .m_d08caa0 :where(details) :where(summary)::after {
+      content: '';
+      position: absolute;
+      inset-inline-start: calc(0.4375rem * var(--mantine-scale));
+      top: 50%;
+      width: 0;
+      height: 0;
+      border-style: solid;
+      border-width: calc(0.3125rem * var(--mantine-scale)) 0 calc(0.3125rem * var(--mantine-scale)) calc(0.375rem * var(--mantine-scale));
+      border-color: transparent transparent transparent currentColor;
+      transform: translateY(-50%);
+    }
+  .m_d08caa0 :where(details):where([open]) > :where(summary)::after {
+      transform: translateY(-50%) rotate(90deg);
+    }
+  .m_d08caa0 :where(details) > :where(*:last-child) {
+      margin-bottom: 0;
+    }
   .m_d08caa0 :where(blockquote) {
     font-size: var(--mantine-font-size-lg);
     line-height: var(--mantine-line-height);

package/styles.layer.css

@@ -42,47 +42,6 @@ body,
 }
   }
 
-@media (prefers-reduced-motion: reduce) {
-    [data-respect-reduced-motion] [data-reduce-motion] {
-      transition: none;
-      animation: none;
-    }
-  }
-
-[data-mantine-color-scheme='light'] .mantine-light-hidden {
-    display: none;
-}
-
-[data-mantine-color-scheme='dark'] .mantine-dark-hidden {
-    display: none;
-}
-
-.mantine-focus-auto:focus-visible {
-    outline: 2px solid var(--mantine-primary-color-filled);
-    outline-offset: calc(0.125rem * var(--mantine-scale));
-  }
-
-.mantine-focus-always:focus {
-    outline: 2px solid var(--mantine-primary-color-filled);
-    outline-offset: calc(0.125rem * var(--mantine-scale));
-  }
-
-.mantine-focus-never:focus {
-    outline: none;
-  }
-
-.mantine-active:active {
-    transform: translateY(calc(0.0625rem * var(--mantine-scale)));
-  }
-
-fieldset:disabled .mantine-active:active {
-    transform: none;
-  }
-
-:where([dir="rtl"]) .mantine-rotate-rtl {
-    transform: rotate(180deg);
-}
-
 /* This file is automatically generated, do not modify it directly. */
 :root,
 :host {
@@ -611,6 +570,47 @@ fieldset:disabled .mantine-active:active {
   --mantine-color-orange-outline-hover: rgba(253, 126, 20, 0.05);
 }
 
+@media (prefers-reduced-motion: reduce) {
+    [data-respect-reduced-motion] [data-reduce-motion] {
+      transition: none;
+      animation: none;
+    }
+  }
+
+[data-mantine-color-scheme='light'] .mantine-light-hidden {
+    display: none;
+}
+
+[data-mantine-color-scheme='dark'] .mantine-dark-hidden {
+    display: none;
+}
+
+.mantine-focus-auto:focus-visible {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: calc(0.125rem * var(--mantine-scale));
+  }
+
+.mantine-focus-always:focus {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: calc(0.125rem * var(--mantine-scale));
+  }
+
+.mantine-focus-never:focus {
+    outline: none;
+  }
+
+.mantine-active:active {
+    transform: translateY(calc(0.0625rem * var(--mantine-scale)));
+  }
+
+fieldset:disabled .mantine-active:active {
+    transform: none;
+  }
+
+:where([dir="rtl"]) .mantine-rotate-rtl {
+    transform: rotate(180deg);
+}
+
 .m_d57069b5 {
   --scrollarea-scrollbar-size: calc(0.75rem * var(--mantine-scale));
 
@@ -1994,6 +1994,20 @@ fieldset:disabled .mantine-active:active {
   bottom: var(--affix-bottom);
 }
 
+.m_de09d2d2 {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-sm);
+  width: fit-content;
+  margin-inline: auto;
+}
+
+.m_eab73b29 {
+  width: calc(0.0625rem * var(--mantine-scale));
+  align-self: stretch;
+  background-color: var(--mantine-color-default-border);
+}
+
 .m_66836ed3 {
   --alert-radius: var(--mantine-radius-default);
   --alert-bg: var(--mantine-primary-color-light);
@@ -6626,6 +6640,7 @@ fieldset:disabled .m_8ee546b8,
 }
 
 .m_47dd3981 {
+  position: relative;
   display: inline-flex;
   align-items: baseline;
   overflow: hidden;
@@ -6635,12 +6650,27 @@ fieldset:disabled .m_8ee546b8,
     font-variant-numeric: tabular-nums;
   }
 
+.m_ccf525bd {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  overflow: hidden;
+  white-space: pre;
+  color: transparent;
+  forced-color-adjust: none;
+}
+
 .m_b301d46e {
+  position: relative;
+  z-index: 2;
   display: inline-block;
   width: 1ch;
   height: 1em;
   overflow: hidden;
   line-height: 1;
+  pointer-events: none;
+  user-select: none;
+  -webkit-user-select: none;
   transition:
     width var(--rn-duration) var(--rn-timing-function),
     opacity var(--rn-duration) var(--rn-timing-function);
@@ -6665,9 +6695,14 @@ fieldset:disabled .m_8ee546b8,
   }
 
 .m_47d64bf5 {
+  position: relative;
+  z-index: 2;
   display: inline-block;
   overflow: hidden;
   white-space: pre;
+  pointer-events: none;
+  user-select: none;
+  -webkit-user-select: none;
   transition: opacity var(--rn-duration) var(--rn-timing-function);
 }
 
@@ -7630,6 +7665,10 @@ fieldset:disabled .m_38aeed47:where(:not([data-inverted])),
     gap: var(--mantine-spacing-md) 0;
   }
 
+.m_aaf89d0b:where([data-label-position='bottom']) {
+    align-items: flex-start;
+  }
+
 .m_aaf89d0b:where([data-orientation='vertical']) {
     flex-direction: column;
   }
@@ -7658,6 +7697,10 @@ fieldset:disabled .m_38aeed47:where(:not([data-inverted])),
     background-color: var(--stepper-color);
   }
 
+.m_aaf89d0b:where([data-label-position='bottom']) .m_2a371ac9 {
+    margin-top: calc((var(--stepper-icon-size) - var(--stepper-outline-thickness)) / 2);
+  }
+
 .m_78da155d {
   padding-top: var(--stepper-content-padding);
 }
@@ -7681,6 +7724,22 @@ fieldset:disabled .m_38aeed47:where(:not([data-inverted])),
     flex-direction: row-reverse;
   }
 
+.m_cbb57068:where([data-label-position='bottom']) {
+    flex-direction: column;
+    align-items: center;
+    min-width: var(--stepper-icon-size);
+    max-width: calc(var(--stepper-icon-size) * 4);
+    overflow: visible;
+  }
+
+/* `labelPosition="bottom"` wins over `iconPosition`: the two describe the same axis, and
+       `column-reverse` here would move the label above the icon – the opposite of what the
+       prop name promises. */
+
+.m_cbb57068:where([data-label-position='bottom']):where([data-icon-position='right']) {
+      flex-direction: column;
+    }
+
 .m_f56b1e2c {
   align-items: center;
 }
@@ -7786,6 +7845,12 @@ fieldset:disabled .m_38aeed47:where(:not([data-inverted])),
     margin-inline-end: var(--mantine-spacing-sm);
   }
 
+.m_cbb57068:where([data-label-position='bottom']) .m_1956aa2a {
+    align-items: center;
+    text-align: center;
+    margin: calc(var(--mantine-spacing-xs) / 2) 0 0;
+  }
+
 .m_12051f6c {
   font-weight: var(--mantine-font-weight-medium);
   font-size: var(--stepper-fz);
@@ -9273,6 +9338,65 @@ fieldset:disabled .m_38aeed47:where(:not([data-inverted])),
   .m_d08caa0 :where(table) :where(tr:last-of-type td) {
       border-bottom: 0;
     }
+  .m_d08caa0 :where(details) {
+    margin-bottom: var(--mantine-spacing-md);
+    padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
+    border: 1px solid var(--details-border-color);
+    border-radius: var(--mantine-radius-default);
+  }
+  :where([data-mantine-color-scheme='light']) .m_d08caa0 :where(details) {
+      --details-border-color: var(--mantine-color-gray-3);
+      --details-summary-hover: var(--mantine-color-gray-1);
+}
+  :where([data-mantine-color-scheme='dark']) .m_d08caa0 :where(details) {
+      --details-border-color: var(--mantine-color-dark-4);
+      --details-summary-hover: var(--mantine-color-dark-5);
+}
+  /* The native marker is hidden and replaced with a small triangle control so only the control –
+       not the whole summary text – gets the hover affordance, matching the editor toggle button. */
+  .m_d08caa0 :where(details) :where(summary) {
+      position: relative;
+      display: flex;
+      align-items: center;
+      gap: var(--mantine-spacing-xs);
+      cursor: pointer;
+      font-weight: 600;
+      list-style: none;
+    }
+  .m_d08caa0 :where(details) :where(summary)::-webkit-details-marker {
+      display: none;
+    }
+  /* Control box: reserves space for the triangle and carries the hover background. */
+  .m_d08caa0 :where(details) :where(summary)::before {
+      content: '';
+      flex-shrink: 0;
+      width: 1.25rem;
+      height: calc(1em * var(--mantine-line-height));
+      border-radius: var(--mantine-radius-sm);
+    }
+  .m_d08caa0 :where(details) :where(summary:hover)::before {
+      background-color: var(--details-summary-hover);
+    }
+  /* Disclosure triangle centered over the control box (7px = half of the 20px box minus the 6px
+       triangle); rotates to point down when the details is open. */
+  .m_d08caa0 :where(details) :where(summary)::after {
+      content: '';
+      position: absolute;
+      inset-inline-start: calc(0.4375rem * var(--mantine-scale));
+      top: 50%;
+      width: 0;
+      height: 0;
+      border-style: solid;
+      border-width: calc(0.3125rem * var(--mantine-scale)) 0 calc(0.3125rem * var(--mantine-scale)) calc(0.375rem * var(--mantine-scale));
+      border-color: transparent transparent transparent currentColor;
+      transform: translateY(-50%);
+    }
+  .m_d08caa0 :where(details):where([open]) > :where(summary)::after {
+      transform: translateY(-50%) rotate(90deg);
+    }
+  .m_d08caa0 :where(details) > :where(*:last-child) {
+      margin-bottom: 0;
+    }
   .m_d08caa0 :where(blockquote) {
     font-size: var(--mantine-font-size-lg);
     line-height: var(--mantine-line-height);