@mantine/core 8.3.0 → 8.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/cjs/components/Combobox/use-combobox/use-combobox.cjs +2 -2
  2. package/cjs/components/Combobox/use-combobox/use-combobox.cjs.map +1 -1
  3. package/cjs/components/Input/InputClearButton/InputClearButton.cjs +1 -1
  4. package/cjs/components/Input/InputClearButton/InputClearButton.cjs.map +1 -1
  5. package/cjs/components/Menu/MenuSub/MenuSub.cjs +1 -1
  6. package/cjs/components/Menu/MenuSub/MenuSub.cjs.map +1 -1
  7. package/cjs/components/NavLink/NavLink.cjs +4 -2
  8. package/cjs/components/NavLink/NavLink.cjs.map +1 -1
  9. package/cjs/components/Tabs/TabsPanel/TabsPanel.cjs +1 -1
  10. package/cjs/components/Tabs/TabsPanel/TabsPanel.cjs.map +1 -1
  11. package/cjs/core/factory/factory.cjs.map +1 -1
  12. package/esm/components/Combobox/use-combobox/use-combobox.mjs +2 -2
  13. package/esm/components/Combobox/use-combobox/use-combobox.mjs.map +1 -1
  14. package/esm/components/Input/InputClearButton/InputClearButton.mjs +1 -1
  15. package/esm/components/Input/InputClearButton/InputClearButton.mjs.map +1 -1
  16. package/esm/components/Menu/MenuSub/MenuSub.mjs +1 -1
  17. package/esm/components/Menu/MenuSub/MenuSub.mjs.map +1 -1
  18. package/esm/components/NavLink/NavLink.mjs +4 -2
  19. package/esm/components/NavLink/NavLink.mjs.map +1 -1
  20. package/esm/components/Tabs/TabsPanel/TabsPanel.mjs +1 -1
  21. package/esm/components/Tabs/TabsPanel/TabsPanel.mjs.map +1 -1
  22. package/esm/core/factory/factory.mjs.map +1 -1
  23. package/lib/components/Menu/MenuSub/MenuSub.d.ts +2 -0
  24. package/lib/components/NavLink/NavLink.d.ts +4 -0
  25. package/lib/core/factory/factory.d.ts +3 -1
  26. package/package.json +2 -2
  27. package/styles/ColorPicker.css +4 -0
  28. package/styles/ColorPicker.layer.css +4 -0
  29. package/styles/Input.css +39 -3
  30. package/styles/Input.layer.css +39 -3
  31. package/styles/List.css +5 -3
  32. package/styles/List.layer.css +5 -3
  33. package/styles.css +48 -6
  34. package/styles.layer.css +48 -6
package/styles/Input.css CHANGED
@@ -76,6 +76,26 @@
76
76
  --input-padding-inline-end: var(--input-right-section-size);
77
77
  }
78
78
 
79
+ .m_6c018570[data-size='xs'] .m_6c018570[data-with-right-section]:has([data-combined-clear-section]) {
80
+ --input-padding-inline-end: 41px;
81
+ }
82
+
83
+ .m_6c018570[data-size='sm'] .m_6c018570[data-with-right-section]:has([data-combined-clear-section]) {
84
+ --input-padding-inline-end: 50px;
85
+ }
86
+
87
+ .m_6c018570[data-size='md'] .m_6c018570[data-with-right-section]:has([data-combined-clear-section]) {
88
+ --input-padding-inline-end: 60px;
89
+ }
90
+
91
+ .m_6c018570[data-size='lg'] .m_6c018570[data-with-right-section]:has([data-combined-clear-section]) {
92
+ --input-padding-inline-end: 72px;
93
+ }
94
+
95
+ .m_6c018570[data-size='xl'] .m_6c018570[data-with-right-section]:has([data-combined-clear-section]) {
96
+ --input-padding-inline-end: 89px;
97
+ }
98
+
79
99
  [data-mantine-color-scheme='light'] .m_6c018570[data-variant='default'] {
80
100
  --input-bd: var(--mantine-color-gray-4);
81
101
  --input-bg: var(--mantine-color-white);
@@ -240,9 +260,25 @@
240
260
  --section-border-radius: var(--right-section-border-radius);
241
261
  }
242
262
 
243
- .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
244
- --section-size: auto;
245
- }
263
+ .m_6c018570[data-size='xs'] .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
264
+ --section-size: 41px;
265
+ }
266
+
267
+ .m_6c018570[data-size='sm'] .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
268
+ --section-size: 50px;
269
+ }
270
+
271
+ .m_6c018570[data-size='md'] .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
272
+ --section-size: 60px;
273
+ }
274
+
275
+ .m_6c018570[data-size='lg'] .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
276
+ --section-size: 72px;
277
+ }
278
+
279
+ .m_6c018570[data-size='xl'] .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
280
+ --section-size: 89px;
281
+ }
246
282
 
247
283
  .m_82577fc2[data-position='left'] {
248
284
  --section-pointer-events: var(--input-left-section-pointer-events);
package/styles/Input.layer.css CHANGED
@@ -76,6 +76,26 @@
76
76
  --input-padding-inline-end: var(--input-right-section-size);
77
77
  }
78
78
 
79
+ .m_6c018570[data-size='xs'] .m_6c018570[data-with-right-section]:has([data-combined-clear-section]) {
80
+ --input-padding-inline-end: 41px;
81
+ }
82
+
83
+ .m_6c018570[data-size='sm'] .m_6c018570[data-with-right-section]:has([data-combined-clear-section]) {
84
+ --input-padding-inline-end: 50px;
85
+ }
86
+
87
+ .m_6c018570[data-size='md'] .m_6c018570[data-with-right-section]:has([data-combined-clear-section]) {
88
+ --input-padding-inline-end: 60px;
89
+ }
90
+
91
+ .m_6c018570[data-size='lg'] .m_6c018570[data-with-right-section]:has([data-combined-clear-section]) {
92
+ --input-padding-inline-end: 72px;
93
+ }
94
+
95
+ .m_6c018570[data-size='xl'] .m_6c018570[data-with-right-section]:has([data-combined-clear-section]) {
96
+ --input-padding-inline-end: 89px;
97
+ }
98
+
79
99
  [data-mantine-color-scheme='light'] .m_6c018570[data-variant='default'] {
80
100
  --input-bd: var(--mantine-color-gray-4);
81
101
  --input-bg: var(--mantine-color-white);
@@ -240,9 +260,25 @@
240
260
  --section-border-radius: var(--right-section-border-radius);
241
261
  }
242
262
 
243
- .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
244
- --section-size: auto;
245
- }
263
+ .m_6c018570[data-size='xs'] .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
264
+ --section-size: 41px;
265
+ }
266
+
267
+ .m_6c018570[data-size='sm'] .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
268
+ --section-size: 50px;
269
+ }
270
+
271
+ .m_6c018570[data-size='md'] .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
272
+ --section-size: 60px;
273
+ }
274
+
275
+ .m_6c018570[data-size='lg'] .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
276
+ --section-size: 72px;
277
+ }
278
+
279
+ .m_6c018570[data-size='xl'] .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
280
+ --section-size: 89px;
281
+ }
246
282
 
247
283
  .m_82577fc2[data-position='left'] {
248
284
  --section-pointer-events: var(--input-left-section-pointer-events);
package/styles/List.css CHANGED
@@ -1,20 +1,22 @@
1
1
  .m_abbac491 {
2
2
  --list-fz: var(--mantine-font-size-md);
3
3
  --list-lh: var(--mantine-line-height-md);
4
+ --list-marker-gap: var(--mantine-spacing-lg);
4
5
 
5
- list-style-position: inside;
6
+ list-style-position: outside;
6
7
  font-size: var(--list-fz);
7
8
  line-height: var(--list-lh);
8
9
  margin: 0;
9
10
  padding: 0;
11
+ padding-inline-start: var(--list-marker-gap);
10
12
  }
11
13
 
12
14
  .m_abbac491:where([data-with-padding]) {
13
- padding-inline-start: var(--mantine-spacing-md);
15
+ padding-inline-start: calc(var(--list-marker-gap) + var(--mantine-spacing-md));
14
16
  }
15
17
 
16
18
  .m_abb6bec2 {
17
- white-space: nowrap;
19
+ white-space: normal;
18
20
  line-height: var(--list-lh);
19
21
  }
20
22
 
package/styles/List.layer.css CHANGED
@@ -1,20 +1,22 @@
1
1
  @layer mantine {.m_abbac491 {
2
2
  --list-fz: var(--mantine-font-size-md);
3
3
  --list-lh: var(--mantine-line-height-md);
4
+ --list-marker-gap: var(--mantine-spacing-lg);
4
5
 
5
- list-style-position: inside;
6
+ list-style-position: outside;
6
7
  font-size: var(--list-fz);
7
8
  line-height: var(--list-lh);
8
9
  margin: 0;
9
10
  padding: 0;
11
+ padding-inline-start: var(--list-marker-gap);
10
12
  }
11
13
 
12
14
  .m_abbac491:where([data-with-padding]) {
13
- padding-inline-start: var(--mantine-spacing-md);
15
+ padding-inline-start: calc(var(--list-marker-gap) + var(--mantine-spacing-md));
14
16
  }
15
17
 
16
18
  .m_abb6bec2 {
17
- white-space: nowrap;
19
+ white-space: normal;
18
20
  line-height: var(--list-lh);
19
21
  }
20
22
 
package/styles.css CHANGED
@@ -1414,6 +1414,26 @@ fieldset:disabled .mantine-active:active {
1414
1414
  --input-padding-inline-end: var(--input-right-section-size);
1415
1415
  }
1416
1416
 
1417
+ .m_6c018570[data-size='xs'] .m_6c018570[data-with-right-section]:has([data-combined-clear-section]) {
1418
+ --input-padding-inline-end: calc(2.5625rem * var(--mantine-scale));
1419
+ }
1420
+
1421
+ .m_6c018570[data-size='sm'] .m_6c018570[data-with-right-section]:has([data-combined-clear-section]) {
1422
+ --input-padding-inline-end: calc(3.125rem * var(--mantine-scale));
1423
+ }
1424
+
1425
+ .m_6c018570[data-size='md'] .m_6c018570[data-with-right-section]:has([data-combined-clear-section]) {
1426
+ --input-padding-inline-end: calc(3.75rem * var(--mantine-scale));
1427
+ }
1428
+
1429
+ .m_6c018570[data-size='lg'] .m_6c018570[data-with-right-section]:has([data-combined-clear-section]) {
1430
+ --input-padding-inline-end: calc(4.5rem * var(--mantine-scale));
1431
+ }
1432
+
1433
+ .m_6c018570[data-size='xl'] .m_6c018570[data-with-right-section]:has([data-combined-clear-section]) {
1434
+ --input-padding-inline-end: calc(5.5625rem * var(--mantine-scale));
1435
+ }
1436
+
1417
1437
  [data-mantine-color-scheme='light'] .m_6c018570[data-variant='default'] {
1418
1438
  --input-bd: var(--mantine-color-gray-4);
1419
1439
  --input-bg: var(--mantine-color-white);
@@ -1578,9 +1598,25 @@ fieldset:disabled .mantine-active:active {
1578
1598
  --section-border-radius: var(--right-section-border-radius);
1579
1599
  }
1580
1600
 
1581
- .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
1582
- --section-size: auto;
1583
- }
1601
+ .m_6c018570[data-size='xs'] .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
1602
+ --section-size: calc(2.5625rem * var(--mantine-scale));
1603
+ }
1604
+
1605
+ .m_6c018570[data-size='sm'] .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
1606
+ --section-size: calc(3.125rem * var(--mantine-scale));
1607
+ }
1608
+
1609
+ .m_6c018570[data-size='md'] .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
1610
+ --section-size: calc(3.75rem * var(--mantine-scale));
1611
+ }
1612
+
1613
+ .m_6c018570[data-size='lg'] .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
1614
+ --section-size: calc(4.5rem * var(--mantine-scale));
1615
+ }
1616
+
1617
+ .m_6c018570[data-size='xl'] .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
1618
+ --section-size: calc(5.5625rem * var(--mantine-scale));
1619
+ }
1584
1620
 
1585
1621
  .m_82577fc2[data-position='left'] {
1586
1622
  --section-pointer-events: var(--input-left-section-pointer-events);
@@ -3837,6 +3873,10 @@ fieldset:disabled .m_8ee546b8,
3837
3873
  flex-wrap: wrap;
3838
3874
  }
3839
3875
 
3876
+ .m_5711e686:only-child {
3877
+ margin-top: 0;
3878
+ }
3879
+
3840
3880
  .m_202a296e {
3841
3881
  --cp-thumb-size-xs: calc(0.5rem * var(--mantine-scale));
3842
3882
  --cp-thumb-size-sm: calc(0.75rem * var(--mantine-scale));
@@ -4288,20 +4328,22 @@ fieldset:disabled .m_8ee546b8,
4288
4328
  .m_abbac491 {
4289
4329
  --list-fz: var(--mantine-font-size-md);
4290
4330
  --list-lh: var(--mantine-line-height-md);
4331
+ --list-marker-gap: var(--mantine-spacing-lg);
4291
4332
 
4292
- list-style-position: inside;
4333
+ list-style-position: outside;
4293
4334
  font-size: var(--list-fz);
4294
4335
  line-height: var(--list-lh);
4295
4336
  margin: 0;
4296
4337
  padding: 0;
4338
+ padding-inline-start: var(--list-marker-gap);
4297
4339
  }
4298
4340
 
4299
4341
  .m_abbac491:where([data-with-padding]) {
4300
- padding-inline-start: var(--mantine-spacing-md);
4342
+ padding-inline-start: calc(var(--list-marker-gap) + var(--mantine-spacing-md));
4301
4343
  }
4302
4344
 
4303
4345
  .m_abb6bec2 {
4304
- white-space: nowrap;
4346
+ white-space: normal;
4305
4347
  line-height: var(--list-lh);
4306
4348
  }
4307
4349
 
package/styles.layer.css CHANGED
@@ -1414,6 +1414,26 @@ fieldset:disabled .mantine-active:active {
1414
1414
  --input-padding-inline-end: var(--input-right-section-size);
1415
1415
  }
1416
1416
 
1417
+ .m_6c018570[data-size='xs'] .m_6c018570[data-with-right-section]:has([data-combined-clear-section]) {
1418
+ --input-padding-inline-end: calc(2.5625rem * var(--mantine-scale));
1419
+ }
1420
+
1421
+ .m_6c018570[data-size='sm'] .m_6c018570[data-with-right-section]:has([data-combined-clear-section]) {
1422
+ --input-padding-inline-end: calc(3.125rem * var(--mantine-scale));
1423
+ }
1424
+
1425
+ .m_6c018570[data-size='md'] .m_6c018570[data-with-right-section]:has([data-combined-clear-section]) {
1426
+ --input-padding-inline-end: calc(3.75rem * var(--mantine-scale));
1427
+ }
1428
+
1429
+ .m_6c018570[data-size='lg'] .m_6c018570[data-with-right-section]:has([data-combined-clear-section]) {
1430
+ --input-padding-inline-end: calc(4.5rem * var(--mantine-scale));
1431
+ }
1432
+
1433
+ .m_6c018570[data-size='xl'] .m_6c018570[data-with-right-section]:has([data-combined-clear-section]) {
1434
+ --input-padding-inline-end: calc(5.5625rem * var(--mantine-scale));
1435
+ }
1436
+
1417
1437
  [data-mantine-color-scheme='light'] .m_6c018570[data-variant='default'] {
1418
1438
  --input-bd: var(--mantine-color-gray-4);
1419
1439
  --input-bg: var(--mantine-color-white);
@@ -1578,9 +1598,25 @@ fieldset:disabled .mantine-active:active {
1578
1598
  --section-border-radius: var(--right-section-border-radius);
1579
1599
  }
1580
1600
 
1581
- .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
1582
- --section-size: auto;
1583
- }
1601
+ .m_6c018570[data-size='xs'] .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
1602
+ --section-size: calc(2.5625rem * var(--mantine-scale));
1603
+ }
1604
+
1605
+ .m_6c018570[data-size='sm'] .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
1606
+ --section-size: calc(3.125rem * var(--mantine-scale));
1607
+ }
1608
+
1609
+ .m_6c018570[data-size='md'] .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
1610
+ --section-size: calc(3.75rem * var(--mantine-scale));
1611
+ }
1612
+
1613
+ .m_6c018570[data-size='lg'] .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
1614
+ --section-size: calc(4.5rem * var(--mantine-scale));
1615
+ }
1616
+
1617
+ .m_6c018570[data-size='xl'] .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
1618
+ --section-size: calc(5.5625rem * var(--mantine-scale));
1619
+ }
1584
1620
 
1585
1621
  .m_82577fc2[data-position='left'] {
1586
1622
  --section-pointer-events: var(--input-left-section-pointer-events);
@@ -3837,6 +3873,10 @@ fieldset:disabled .m_8ee546b8,
3837
3873
  flex-wrap: wrap;
3838
3874
  }
3839
3875
 
3876
+ .m_5711e686:only-child {
3877
+ margin-top: 0;
3878
+ }
3879
+
3840
3880
  .m_202a296e {
3841
3881
  --cp-thumb-size-xs: calc(0.5rem * var(--mantine-scale));
3842
3882
  --cp-thumb-size-sm: calc(0.75rem * var(--mantine-scale));
@@ -4288,20 +4328,22 @@ fieldset:disabled .m_8ee546b8,
4288
4328
  .m_abbac491 {
4289
4329
  --list-fz: var(--mantine-font-size-md);
4290
4330
  --list-lh: var(--mantine-line-height-md);
4331
+ --list-marker-gap: var(--mantine-spacing-lg);
4291
4332
 
4292
- list-style-position: inside;
4333
+ list-style-position: outside;
4293
4334
  font-size: var(--list-fz);
4294
4335
  line-height: var(--list-lh);
4295
4336
  margin: 0;
4296
4337
  padding: 0;
4338
+ padding-inline-start: var(--list-marker-gap);
4297
4339
  }
4298
4340
 
4299
4341
  .m_abbac491:where([data-with-padding]) {
4300
- padding-inline-start: var(--mantine-spacing-md);
4342
+ padding-inline-start: calc(var(--list-marker-gap) + var(--mantine-spacing-md));
4301
4343
  }
4302
4344
 
4303
4345
  .m_abb6bec2 {
4304
- white-space: nowrap;
4346
+ white-space: normal;
4305
4347
  line-height: var(--list-lh);
4306
4348
  }
4307
4349