@nova-design-system/nova-base 3.9.0 → 3.10.0

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 (23) hide show
  1. package/assets/icons/icon-sprite.svg +1 -1
  2. package/dist/cjs/generated/nova-tailwind-components.js +20 -10
  3. package/dist/css/mccs.css +109 -17
  4. package/dist/css/nova-utils.css +10 -0
  5. package/dist/css/ocean.css +189 -97
  6. package/dist/css/spark.css +167 -75
  7. package/dist/generated/nova-tailwind-components.d.ts +10 -0
  8. package/dist/generated/nova-tailwind-components.js +20 -10
  9. package/dist/js/mccs_dark.d.ts +16 -1
  10. package/dist/js/mccs_dark.js +21 -6
  11. package/dist/js/mccs_light.d.ts +16 -1
  12. package/dist/js/mccs_light.js +18 -3
  13. package/dist/js/ocean_dark.d.ts +60 -45
  14. package/dist/js/ocean_dark.js +68 -53
  15. package/dist/js/ocean_light.d.ts +60 -45
  16. package/dist/js/ocean_light.js +66 -51
  17. package/dist/js/spacings.d.ts +67 -5
  18. package/dist/js/spacings.js +67 -5
  19. package/dist/js/spark_dark.d.ts +48 -33
  20. package/dist/js/spark_dark.js +57 -42
  21. package/dist/js/spark_light.d.ts +48 -33
  22. package/dist/js/spark_light.js +54 -39
  23. package/package.json +1 -1
package/dist/cjs/generated/nova-tailwind-components.js CHANGED
@@ -49,7 +49,8 @@ exports.NOVA_TAILWIND_COMPONENTS = {
49
49
  },
50
50
  '.nv-button:focus-visible, .nv-button:has(:focus-visible)': {
51
51
  'outline': 'calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand)',
52
- 'outlineOffset': 'calc(var(--focus-outline-offset) * 1)'
52
+ 'outlineOffset': 'calc(var(--focus-outline-offset) * 1)',
53
+ 'zIndex': '111'
53
54
  },
54
55
  '.nv-button:disabled:not([disabled=false])': {
55
56
  'opacity': '0.5',
@@ -76,7 +77,8 @@ exports.NOVA_TAILWIND_COMPONENTS = {
76
77
  },
77
78
  '.nv-button.danger:focus-visible, .nv-button.danger:has(:focus-visible)': {
78
79
  'outline': 'calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive)',
79
- 'outlineOffset': 'calc(var(--focus-outline-offset) * 1)'
80
+ 'outlineOffset': 'calc(var(--focus-outline-offset) * 1)',
81
+ 'zIndex': '111'
80
82
  },
81
83
  '.nv-button.size-xs': {
82
84
  'padding': 'var(--button-xs-padding-y) var(--button-xs-padding-x)',
@@ -146,7 +148,8 @@ exports.NOVA_TAILWIND_COMPONENTS = {
146
148
  },
147
149
  '.nv-button.emphasis-high:focus-visible, .nv-button.emphasis-high:has(:focus-visible)': {
148
150
  'outline': 'calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand)',
149
- 'outlineOffset': 'calc(var(--focus-outline-offset) * 1)'
151
+ 'outlineOffset': 'calc(var(--focus-outline-offset) * 1)',
152
+ 'zIndex': '111'
150
153
  },
151
154
  '.nv-button.emphasis-high:disabled:not([disabled=false])': {
152
155
  'opacity': '0.5',
@@ -173,7 +176,8 @@ exports.NOVA_TAILWIND_COMPONENTS = {
173
176
  },
174
177
  '.nv-button.emphasis-high.danger:focus-visible, .nv-button.emphasis-high.danger:has(:focus-visible)': {
175
178
  'outline': 'calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive)',
176
- 'outlineOffset': 'calc(var(--focus-outline-offset) * 1)'
179
+ 'outlineOffset': 'calc(var(--focus-outline-offset) * 1)',
180
+ 'zIndex': '111'
177
181
  },
178
182
  '.nv-button.emphasis-medium': {
179
183
  'background': 'var(--components-button-medium-background)',
@@ -195,7 +199,8 @@ exports.NOVA_TAILWIND_COMPONENTS = {
195
199
  },
196
200
  '.nv-button.emphasis-medium:focus-visible, .nv-button.emphasis-medium:has(:focus-visible)': {
197
201
  'outline': 'calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand)',
198
- 'outlineOffset': 'calc(var(--focus-outline-offset) * 1)'
202
+ 'outlineOffset': 'calc(var(--focus-outline-offset) * 1)',
203
+ 'zIndex': '111'
199
204
  },
200
205
  '.nv-button.emphasis-medium:disabled:not([disabled=false])': {
201
206
  'opacity': '0.5',
@@ -222,7 +227,8 @@ exports.NOVA_TAILWIND_COMPONENTS = {
222
227
  },
223
228
  '.nv-button.emphasis-medium.danger:focus-visible, .nv-button.emphasis-medium.danger:has(:focus-visible)': {
224
229
  'outline': 'calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive)',
225
- 'outlineOffset': 'calc(var(--focus-outline-offset) * 1)'
230
+ 'outlineOffset': 'calc(var(--focus-outline-offset) * 1)',
231
+ 'zIndex': '111'
226
232
  },
227
233
  '.nv-button.emphasis-low': {
228
234
  'background': 'var(--components-button-low-background)',
@@ -244,7 +250,8 @@ exports.NOVA_TAILWIND_COMPONENTS = {
244
250
  },
245
251
  '.nv-button.emphasis-low:focus-visible, .nv-button.emphasis-low:has(:focus-visible)': {
246
252
  'outline': 'calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand)',
247
- 'outlineOffset': 'calc(var(--focus-outline-offset) * 1)'
253
+ 'outlineOffset': 'calc(var(--focus-outline-offset) * 1)',
254
+ 'zIndex': '111'
248
255
  },
249
256
  '.nv-button.emphasis-low:disabled:not([disabled=false])': {
250
257
  'opacity': '0.5',
@@ -271,7 +278,8 @@ exports.NOVA_TAILWIND_COMPONENTS = {
271
278
  },
272
279
  '.nv-button.emphasis-low.danger:focus-visible, .nv-button.emphasis-low.danger:has(:focus-visible)': {
273
280
  'outline': 'calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive)',
274
- 'outlineOffset': 'calc(var(--focus-outline-offset) * 1)'
281
+ 'outlineOffset': 'calc(var(--focus-outline-offset) * 1)',
282
+ 'zIndex': '111'
275
283
  },
276
284
  '.nv-button.emphasis-lower': {
277
285
  'background': 'var(--components-button-lower-background)',
@@ -293,7 +301,8 @@ exports.NOVA_TAILWIND_COMPONENTS = {
293
301
  },
294
302
  '.nv-button.emphasis-lower:focus-visible, .nv-button.emphasis-lower:has(:focus-visible)': {
295
303
  'outline': 'calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand)',
296
- 'outlineOffset': 'calc(var(--focus-outline-offset) * 1)'
304
+ 'outlineOffset': 'calc(var(--focus-outline-offset) * 1)',
305
+ 'zIndex': '111'
297
306
  },
298
307
  '.nv-button.emphasis-lower:disabled:not([disabled=false])': {
299
308
  'opacity': '0.5',
@@ -320,7 +329,8 @@ exports.NOVA_TAILWIND_COMPONENTS = {
320
329
  },
321
330
  '.nv-button.emphasis-lower.danger:focus-visible, .nv-button.emphasis-lower.danger:has(:focus-visible)': {
322
331
  'outline': 'calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive)',
323
- 'outlineOffset': 'calc(var(--focus-outline-offset) * 1)'
332
+ 'outlineOffset': 'calc(var(--focus-outline-offset) * 1)',
333
+ 'zIndex': '111'
324
334
  },
325
335
  '.nv-button.fluid': {
326
336
  'width': '100%'
package/dist/css/mccs.css CHANGED
@@ -72,16 +72,13 @@
72
72
  --color-interaction-container-neutral-background: rgba(255, 255, 255, 0);
73
73
  --color-interaction-container-branded-low-background-hover: rgba(255, 255, 255, 0.12);
74
74
  --color-interaction-container-branded-low-background-active: rgba(255, 255, 255, 0.12);
75
- --color-interaction-container-branded-low-background: rgba(255, 255, 255, 0);
76
75
  --components-tooltip-border: var(--color-gray-ocean-50);
77
76
  --components-tooltip-background: var(--color-gray-ocean-50);
78
77
  --components-popover-background: var(--color-gray-ocean-900);
79
78
  --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
80
79
  --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
81
- --components-calendar-cell-background-today: var(--color-interaction-container-branded-low-background);
82
80
  --components-calendar-cell-background-hover: var(--color-interaction-container-branded-low-background-hover);
83
81
  --components-calendar-cell-background-in-range: var(--color-interaction-container-branded-low-background-active);
84
- --components-calendar-cell-background: var(--color-interaction-container-branded-low-background);
85
82
  --components-field-time-background-active: var(--color-interaction-container-neutral-background-active);
86
83
  --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
87
84
  --components-field-time-background-default: var(--color-interaction-container-neutral-background);
@@ -133,7 +130,6 @@
133
130
  --components-button-gr-as-complementary-background: var(--color-gray-ocean-450);
134
131
  --components-button-lower-background-hover: var(--color-interaction-container-neutral-background-hover);
135
132
  --components-button-lower-background-active: var(--color-interaction-container-neutral-background-active);
136
- --components-button-lower-background: var(--color-interaction-container-branded-low-background);
137
133
  --components-button-low-background-hover: var(--color-interaction-container-branded-low-background-hover);
138
134
  --components-button-low-background-active: var(--color-interaction-container-branded-low-background-active);
139
135
  --color-dont-use-background: var(--color-gray-ocean-900);
@@ -308,6 +304,7 @@
308
304
  --color-interaction-container-branded-low-border-hover: var(--color-petrol-300);
309
305
  --color-interaction-container-branded-low-border-active: var(--color-petrol-300);
310
306
  --color-interaction-container-branded-low-border: var(--color-petrol-400);
307
+ --components-togglegroup-high-border: var(--color-interaction-container-branded-low-border);
311
308
  --components-tooltip-supporting-text: var(--color-content-inverted-medium-text);
312
309
  --components-tooltip-text: var(--color-content-inverted-high-text);
313
310
  --components-slider-handler-border-focus: var(--components-form-field-background-checked);
@@ -354,14 +351,20 @@
354
351
  --components-calendar-border: var(--color-content-low-border);
355
352
  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
356
353
  --components-field-time-text-active: var(--color-interaction-container-neutral-text-active);
354
+ --components-datagrid-expander-expander-background: var(--color-level-10-background);
355
+ --components-datagrid-expander-border: var(--color-content-low-border);
356
+ --components-datagrid-expander-content-background: var(--color-level-00-background);
357
357
  --components-datagrid-body-subtext: var(--color-content-low-text);
358
358
  --components-datagrid-body-text: var(--color-content-high-text);
359
359
  --components-datagrid-body-border: var(--color-content-low-border);
360
360
  --components-datagrid-header-text: var(--color-content-low-text);
361
361
  --components-datagrid-header-border: var(--color-content-low-border);
362
+ --components-buttongroup-low-border: var(--color-interaction-container-branded-low-border);
363
+ --components-buttongroup-medium-border: var(--color-interaction-container-branded-low-border);
364
+ --components-buttongroup-high-background: var(--color-interaction-container-branded-high-background);
365
+ --components-buttongroup-high-border: var(--color-interaction-container-branded-high-border);
362
366
  --components-breadcrumb-text-hover: var(--color-interaction-link-low-text-hover);
363
- --components-breadcrumb-text-active: var(--color-content-medium-text);
364
- --components-breadcrumb-text: var(--color-content-low-text);
367
+ --components-breadcrumb-text-active: var(--color-content-high-text);
365
368
  --components-avatar-content-10: var(--color-rainbow-10-icon);
366
369
  --components-avatar-content-9: var(--color-rainbow-9-text);
367
370
  --components-avatar-content-8: var(--color-rainbow-8-text);
@@ -517,6 +520,10 @@
517
520
  --color-interaction-container-neutral-icon: var(--color-content-low-text);
518
521
  --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
519
522
  --color-interaction-container-neutral-border: var(--color-content-low-text);
523
+ --color-interaction-container-branded-low-background: var(--color-level-00-background);
524
+ --components-togglegroup-low-background: var(--color-interaction-container-branded-low-background);
525
+ --components-togglegroup-low-border: var(--color-interaction-container-neutral-border);
526
+ --components-togglegroup-high-background: var(--color-interaction-container-branded-low-background);
520
527
  --components-slider-handler-border-readonly: var(--components-form-field-background-readonly);
521
528
  --components-slider-handler-border-disabled: var(--components-form-field-background-disabled);
522
529
  --components-slider-handler-border-error: var(--components-form-field-background-error);
@@ -537,9 +544,17 @@
537
544
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
538
545
  --components-calendar-cell-text-hover: var(--color-interaction-container-neutral-text-hover);
539
546
  --components-calendar-cell-text: var(--color-interaction-container-neutral-text);
547
+ --components-calendar-cell-background-today: var(--color-interaction-container-branded-low-background);
548
+ --components-calendar-cell-background: var(--color-interaction-container-branded-low-background);
540
549
  --components-field-time-text-hover: var(--color-interaction-container-neutral-text-hover);
541
550
  --components-field-time-text-default: var(--color-interaction-container-neutral-text);
551
+ --components-buttongroup-lower-background: var(--color-interaction-container-branded-low-background);
552
+ --components-buttongroup-lower-border: var(--color-interaction-container-neutral-border);
553
+ --components-buttongroup-low-background: var(--color-interaction-container-branded-low-background);
554
+ --components-buttongroup-medium-background: var(--color-interaction-container-branded-low-background);
555
+ --components-breadcrumb-text: var(--color-interaction-link-low-text);
542
556
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
557
+ --components-button-lower-background: var(--color-interaction-container-branded-low-background);
543
558
  }
544
559
 
545
560
  :root {
@@ -618,16 +633,13 @@
618
633
  --color-interaction-container-neutral-background: rgba(255, 255, 255, 0);
619
634
  --color-interaction-container-branded-low-background-hover: rgba(11, 15, 17, 0.08);
620
635
  --color-interaction-container-branded-low-background-active: rgba(11, 15, 17, 0.08);
621
- --color-interaction-container-branded-low-background: rgba(255, 255, 255, 0);
622
636
  --components-tooltip-border: var(--color-gray-ocean-900);
623
637
  --components-tooltip-background: var(--color-gray-ocean-900);
624
638
  --components-popover-background: var(--color-gray-ocean-00);
625
639
  --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
626
640
  --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
627
- --components-calendar-cell-background-today: var(--color-interaction-container-branded-low-background);
628
641
  --components-calendar-cell-background-hover: var(--color-interaction-container-branded-low-background-hover);
629
642
  --components-calendar-cell-background-in-range: var(--color-interaction-container-branded-low-background-active);
630
- --components-calendar-cell-background: var(--color-interaction-container-branded-low-background);
631
643
  --components-field-time-background-active: var(--color-interaction-container-neutral-background-active);
632
644
  --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
633
645
  --components-field-time-background-default: var(--color-interaction-container-neutral-background);
@@ -679,7 +691,6 @@
679
691
  --components-button-gr-as-complementary-background: var(--color-gray-ocean-200);
680
692
  --components-button-lower-background-hover: var(--color-interaction-container-neutral-background-hover);
681
693
  --components-button-lower-background-active: var(--color-interaction-container-neutral-background-active);
682
- --components-button-lower-background: var(--color-interaction-container-branded-low-background);
683
694
  --components-button-low-background-hover: var(--color-interaction-container-branded-low-background-hover);
684
695
  --components-button-low-background-active: var(--color-interaction-container-branded-low-background-active);
685
696
  --color-dont-use-background: var(--color-gray-ocean-50);
@@ -854,6 +865,7 @@
854
865
  --color-interaction-container-branded-low-border-hover: var(--color-petrol-700);
855
866
  --color-interaction-container-branded-low-border-active: var(--color-petrol-700);
856
867
  --color-interaction-container-branded-low-border: var(--color-petrol-600);
868
+ --components-togglegroup-high-border: var(--color-interaction-container-branded-low-border);
857
869
  --components-tooltip-supporting-text: var(--color-content-inverted-medium-text);
858
870
  --components-tooltip-text: var(--color-content-inverted-high-text);
859
871
  --components-slider-handler-border-focus: var(--components-form-field-background-checked);
@@ -900,14 +912,20 @@
900
912
  --components-calendar-border: var(--color-content-low-border);
901
913
  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
902
914
  --components-field-time-text-active: var(--color-interaction-container-neutral-text-active);
915
+ --components-datagrid-expander-expander-background: var(--color-level-10-background);
916
+ --components-datagrid-expander-border: var(--color-content-low-border);
917
+ --components-datagrid-expander-content-background: var(--color-level-00-background);
903
918
  --components-datagrid-body-subtext: var(--color-content-low-text);
904
919
  --components-datagrid-body-text: var(--color-content-high-text);
905
920
  --components-datagrid-body-border: var(--color-content-low-border);
906
921
  --components-datagrid-header-text: var(--color-content-low-text);
907
922
  --components-datagrid-header-border: var(--color-content-medium-border);
923
+ --components-buttongroup-low-border: var(--color-interaction-container-branded-low-border);
924
+ --components-buttongroup-medium-border: var(--color-interaction-container-branded-low-border);
925
+ --components-buttongroup-high-background: var(--color-interaction-container-branded-high-background);
926
+ --components-buttongroup-high-border: var(--color-interaction-container-branded-high-border);
908
927
  --components-breadcrumb-text-hover: var(--color-interaction-link-low-text-hover);
909
- --components-breadcrumb-text-active: var(--color-content-medium-text);
910
- --components-breadcrumb-text: var(--color-content-low-text);
928
+ --components-breadcrumb-text-active: var(--color-content-high-text);
911
929
  --components-avatar-content-10: var(--color-rainbow-10-icon);
912
930
  --components-avatar-content-9: var(--color-rainbow-9-text);
913
931
  --components-avatar-content-8: var(--color-rainbow-8-text);
@@ -1062,6 +1080,10 @@
1062
1080
  --color-interaction-container-neutral-icon: var(--color-content-low-text);
1063
1081
  --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
1064
1082
  --color-interaction-container-neutral-border: var(--color-content-inverted-low-text);
1083
+ --color-interaction-container-branded-low-background: var(--color-level-00-background);
1084
+ --components-togglegroup-low-background: var(--color-interaction-container-branded-low-background);
1085
+ --components-togglegroup-low-border: var(--color-interaction-container-neutral-border);
1086
+ --components-togglegroup-high-background: var(--color-interaction-container-branded-low-background);
1065
1087
  --components-slider-handler-border-readonly: var(--components-form-field-background-readonly);
1066
1088
  --components-slider-handler-border-disabled: var(--components-form-field-background-disabled);
1067
1089
  --components-slider-handler-border-error: var(--components-form-field-background-error);
@@ -1082,10 +1104,18 @@
1082
1104
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
1083
1105
  --components-calendar-cell-text-hover: var(--color-interaction-container-neutral-text-hover);
1084
1106
  --components-calendar-cell-text: var(--color-interaction-container-neutral-text);
1107
+ --components-calendar-cell-background-today: var(--color-interaction-container-branded-low-background);
1108
+ --components-calendar-cell-background: var(--color-interaction-container-branded-low-background);
1085
1109
  --components-field-time-text-hover: var(--color-interaction-container-neutral-text-hover);
1086
1110
  --components-field-time-text-default: var(--color-interaction-container-neutral-text);
1111
+ --components-buttongroup-lower-background: var(--color-interaction-container-branded-low-background);
1112
+ --components-buttongroup-lower-border: var(--color-interaction-container-neutral-border);
1113
+ --components-buttongroup-low-background: var(--color-interaction-container-branded-low-background);
1114
+ --components-buttongroup-medium-background: var(--color-interaction-container-branded-low-background);
1115
+ --components-breadcrumb-text: var(--color-interaction-link-low-text);
1087
1116
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
1088
1117
  --components-button-lower-icon-hover: var(--color-interaction-container-neutral-icon-hover);
1118
+ --components-button-lower-background: var(--color-interaction-container-branded-low-background);
1089
1119
  }
1090
1120
 
1091
1121
  /**
@@ -1372,6 +1402,22 @@
1372
1402
  */
1373
1403
 
1374
1404
  :root {
1405
+ --togglegroup-md-iconbutton-padding-y: 7px;
1406
+ --togglegroup-md-button-radius: 3px;
1407
+ --togglegroup-md-button-padding-y: 5px;
1408
+ --togglegroup-md-padding: 3px;
1409
+ --togglegroup-lg-iconbutton-padding-y: 9px;
1410
+ --togglegroup-lg-button-radius: 5px;
1411
+ --togglegroup-lg-button-padding-y: 7px;
1412
+ --togglegroup-lg-padding: 3px;
1413
+ --togglegroup-sm-padding: 3px;
1414
+ --togglegroup-sm-iconbutton-padding-y: 5px;
1415
+ --togglegroup-sm-button-radius: 2px;
1416
+ --togglegroup-sm-button-padding-y: 3px;
1417
+ --togglegroup-xs-iconbutton-padding-y: 3px;
1418
+ --togglegroup-xs-button-radius: 1px;
1419
+ --togglegroup-xs-button-padding-y: 1px;
1420
+ --togglegroup-xs-padding: 3px;
1375
1421
  --slider-tick-radius: 1px;
1376
1422
  --global-typography-legend-font-style: uppercase;
1377
1423
  --global-typography-label-font-style: normal;
@@ -1394,11 +1440,27 @@
1394
1440
  --form-field-badge-gap: 0px;
1395
1441
  --list-native-separator-padding-y: 3px;
1396
1442
  --list-native-separator-padding-x: 9px;
1443
+ --icon-stroke-xl: 1.899999976158142px;
1444
+ --icon-stroke-lg: 1.7999999523162842px;
1445
+ --icon-stroke-md: 1.600000023841858px;
1446
+ --icon-stroke-sm: 1.399999976158142px;
1447
+ --icon-stroke-xs: 1.2000000476837158px;
1397
1448
  --calendar-cell-dot-size: 3px;
1398
1449
  --button-lg-ring-radius: 9px;
1399
1450
  --button-md-ring-radius: 7px;
1400
1451
  --button-sm-ring-radius: 5px;
1401
1452
  --button-xs-ring-radius: 3px;
1453
+ --buttongroup-md-button-radius: 3px;
1454
+ --buttongroup-md-button-padding-y: 5px;
1455
+ --buttongroup-md-padding: 3px;
1456
+ --buttongroup-lg-button-radius: 4px;
1457
+ --buttongroup-lg-button-padding-y: 6px;
1458
+ --buttongroup-lg-padding: 4px;
1459
+ --buttongroup-sm-padding: 2px;
1460
+ --buttongroup-sm-button-radius: 2px;
1461
+ --buttongroup-sm-button-padding-y: 4px;
1462
+ --buttongroup-xs-button-radius: 1px;
1463
+ --buttongroup-xs-padding: 2px;
1402
1464
  --notification-title-line-height: var(--line-height-sm);
1403
1465
  --notification-title-font-weight: var(--font-weight-medium-emphasis);
1404
1466
  --notification-title-font-size: var(--font-size-sm);
@@ -1424,11 +1486,6 @@
1424
1486
  --navigation-primary-item-padding-y: var(--spacing-2);
1425
1487
  --navigation-primary-item-padding-x: var(--spacing-3);
1426
1488
  --navigation-primary-item-gap-x: var(--spacing-2);
1427
- --icon-xl: var(--spacing-7);
1428
- --icon-lg: var(--spacing-6);
1429
- --icon-md: var(--spacing-5);
1430
- --icon-sm: var(--spacing-4);
1431
- --icon-xs: var(--spacing-3);
1432
1489
  --loader-size-xl: var(--spacing-8);
1433
1490
  --loader-size-lg: var(--spacing-7);
1434
1491
  --loader-size-md: var(--spacing-6);
@@ -1449,9 +1506,14 @@
1449
1506
  --dialog-header-gap-y: var(--spacing-0);
1450
1507
  --dialog-dismissible-position-right: var(--spacing-3);
1451
1508
  --dialog-dismissible-position-top: var(--spacing-5);
1509
+ --datagrid-expanded-padding-left: var(--spacing-14);
1510
+ --datagrid-expanded-padding-y: var(--spacing-4);
1511
+ --datagrid-expanded-padding-right: var(--spacing-4);
1512
+ --datagrid-cell-header-chevron-padding-x: var(--spacing-0);
1452
1513
  --datagrid-cell-header-padding-y: var(--spacing-3);
1453
1514
  --datagrid-cell-header-padding-right: var(--spacing-2);
1454
1515
  --datagrid-cell-header-padding-x: var(--spacing-4);
1516
+ --datagrid-cell-body-chevron-padding-x: var(--spacing-0);
1455
1517
  --datagrid-cell-body-actions-padding-y: var(--spacing-1);
1456
1518
  --datagrid-cell-body-padding-y: var(--spacing-2);
1457
1519
  --datagrid-cell-body-actions-gap-x: var(--spacing-2);
@@ -1493,6 +1555,18 @@
1493
1555
  --alert-icon-position-x: var(--spacing-4);
1494
1556
  --alert-gap-x: var(--spacing-3);
1495
1557
  --alert-icon-size: var(--spacing-5);
1558
+ --togglegroup-md-height: var(--spacing-10);
1559
+ --togglegroup-md-gap: var(--spacing-0-5);
1560
+ --togglegroup-md-radius: var(--radius-rounded-md);
1561
+ --togglegroup-lg-height: var(--spacing-12);
1562
+ --togglegroup-lg-gap: var(--spacing-0-5);
1563
+ --togglegroup-lg-radius: var(--radius-rounded-lg);
1564
+ --togglegroup-sm-height: var(--spacing-8);
1565
+ --togglegroup-sm-gap: var(--spacing-0-5);
1566
+ --togglegroup-sm-radius: var(--radius-rounded);
1567
+ --togglegroup-xs-height: var(--spacing-6);
1568
+ --togglegroup-xs-gap: var(--spacing-0-5);
1569
+ --togglegroup-xs-radius: var(--radius-rounded-sm);
1496
1570
  --slider-track-radius: var(--radius-rounded-sm);
1497
1571
  --slider-track-padding-x: var(--spacing-3);
1498
1572
  --slider-track-height: var(--spacing-1);
@@ -1636,6 +1710,11 @@
1636
1710
  --list-native-line-height: var(--line-height-base);
1637
1711
  --list-native-font-size: var(--font-size-md);
1638
1712
  --list-native-icon-size: var(--spacing-5);
1713
+ --icon-xl: var(--spacing-7);
1714
+ --icon-lg: var(--spacing-6);
1715
+ --icon-md: var(--spacing-5);
1716
+ --icon-sm: var(--spacing-4);
1717
+ --icon-xs: var(--spacing-3);
1639
1718
  --calendar-navigation-buttons-gap: var(--spacing-1);
1640
1719
  --calendar-controls-padding-top: var(--spacing-2);
1641
1720
  --calendar-controls-margin-top: var(--spacing-1);
@@ -1691,5 +1770,18 @@
1691
1770
  --button-xs-gap: var(--spacing-1);
1692
1771
  --button-xs-font-size: var(--font-size-xs);
1693
1772
  --button-xs-border-radius: var(--radius-rounded-sm);
1773
+ --buttongroup-md-height: var(--spacing-10);
1774
+ --buttongroup-md-gap: var(--spacing-px);
1775
+ --buttongroup-md-radius: var(--radius-rounded-md);
1776
+ --buttongroup-lg-height: var(--spacing-12);
1777
+ --buttongroup-lg-gap: var(--spacing-px);
1778
+ --buttongroup-lg-radius: var(--radius-rounded-lg);
1779
+ --buttongroup-sm-height: var(--spacing-8);
1780
+ --buttongroup-sm-gap: var(--spacing-px);
1781
+ --buttongroup-sm-radius: var(--radius-rounded);
1782
+ --buttongroup-xs-height: var(--spacing-6);
1783
+ --buttongroup-xs-gap: var(--spacing-px);
1784
+ --buttongroup-xs-radius: var(--radius-rounded-sm);
1785
+ --buttongroup-xs-button-padding-y: var(--spacing-0-5);
1694
1786
  }
1695
1787
 
package/dist/css/nova-utils.css CHANGED
@@ -7484,6 +7484,7 @@ h6 {
7484
7484
  .nv-button:focus-visible, .nv-button:has(:focus-visible) {
7485
7485
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);
7486
7486
  outline-offset: calc(var(--focus-outline-offset) * 1);
7487
+ z-index: 111;
7487
7488
  }
7488
7489
 
7489
7490
  .nv-button:disabled:not([disabled=false]) {
@@ -7517,6 +7518,7 @@ h6 {
7517
7518
  .nv-button.danger:focus-visible, .nv-button.danger:has(:focus-visible) {
7518
7519
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);
7519
7520
  outline-offset: calc(var(--focus-outline-offset) * 1);
7521
+ z-index: 111;
7520
7522
  }
7521
7523
 
7522
7524
  .nv-button.size-xs {
@@ -7600,6 +7602,7 @@ h6 {
7600
7602
  .nv-button.emphasis-high:focus-visible, .nv-button.emphasis-high:has(:focus-visible) {
7601
7603
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);
7602
7604
  outline-offset: calc(var(--focus-outline-offset) * 1);
7605
+ z-index: 111;
7603
7606
  }
7604
7607
 
7605
7608
  .nv-button.emphasis-high:disabled:not([disabled=false]) {
@@ -7633,6 +7636,7 @@ h6 {
7633
7636
  .nv-button.emphasis-high.danger:focus-visible, .nv-button.emphasis-high.danger:has(:focus-visible) {
7634
7637
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);
7635
7638
  outline-offset: calc(var(--focus-outline-offset) * 1);
7639
+ z-index: 111;
7636
7640
  }
7637
7641
 
7638
7642
  .nv-button.emphasis-medium {
@@ -7660,6 +7664,7 @@ h6 {
7660
7664
  .nv-button.emphasis-medium:focus-visible, .nv-button.emphasis-medium:has(:focus-visible) {
7661
7665
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);
7662
7666
  outline-offset: calc(var(--focus-outline-offset) * 1);
7667
+ z-index: 111;
7663
7668
  }
7664
7669
 
7665
7670
  .nv-button.emphasis-medium:disabled:not([disabled=false]) {
@@ -7693,6 +7698,7 @@ h6 {
7693
7698
  .nv-button.emphasis-medium.danger:focus-visible, .nv-button.emphasis-medium.danger:has(:focus-visible) {
7694
7699
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);
7695
7700
  outline-offset: calc(var(--focus-outline-offset) * 1);
7701
+ z-index: 111;
7696
7702
  }
7697
7703
 
7698
7704
  .nv-button.emphasis-low {
@@ -7720,6 +7726,7 @@ h6 {
7720
7726
  .nv-button.emphasis-low:focus-visible, .nv-button.emphasis-low:has(:focus-visible) {
7721
7727
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);
7722
7728
  outline-offset: calc(var(--focus-outline-offset) * 1);
7729
+ z-index: 111;
7723
7730
  }
7724
7731
 
7725
7732
  .nv-button.emphasis-low:disabled:not([disabled=false]) {
@@ -7753,6 +7760,7 @@ h6 {
7753
7760
  .nv-button.emphasis-low.danger:focus-visible, .nv-button.emphasis-low.danger:has(:focus-visible) {
7754
7761
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);
7755
7762
  outline-offset: calc(var(--focus-outline-offset) * 1);
7763
+ z-index: 111;
7756
7764
  }
7757
7765
 
7758
7766
  .nv-button.emphasis-lower {
@@ -7780,6 +7788,7 @@ h6 {
7780
7788
  .nv-button.emphasis-lower:focus-visible, .nv-button.emphasis-lower:has(:focus-visible) {
7781
7789
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);
7782
7790
  outline-offset: calc(var(--focus-outline-offset) * 1);
7791
+ z-index: 111;
7783
7792
  }
7784
7793
 
7785
7794
  .nv-button.emphasis-lower:disabled:not([disabled=false]) {
@@ -7813,6 +7822,7 @@ h6 {
7813
7822
  .nv-button.emphasis-lower.danger:focus-visible, .nv-button.emphasis-lower.danger:has(:focus-visible) {
7814
7823
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);
7815
7824
  outline-offset: calc(var(--focus-outline-offset) * 1);
7825
+ z-index: 111;
7816
7826
  }
7817
7827
 
7818
7828
  .nv-button.fluid {