@nova-design-system/nova-base 3.15.0 → 3.16.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 (22) hide show
  1. package/assets/icons/icon-sprite.svg +1 -1
  2. package/dist/cjs/generated/nova-tailwind-components.js +205 -3
  3. package/dist/cjs/plugin/nova-plugin.js +49 -49
  4. package/dist/cjs/plugin/nova-theme.js +26 -0
  5. package/dist/css/nova-utils.css +207 -4
  6. package/dist/css/ocean.css +29 -4
  7. package/dist/css/spark.css +29 -4
  8. package/dist/generated/nova-tailwind-components.d.ts +199 -0
  9. package/dist/generated/nova-tailwind-components.js +205 -3
  10. package/dist/js/ocean_dark.d.ts +10 -0
  11. package/dist/js/ocean_dark.js +10 -0
  12. package/dist/js/ocean_light.d.ts +10 -0
  13. package/dist/js/ocean_light.js +12 -2
  14. package/dist/js/primitives.d.ts +5 -0
  15. package/dist/js/primitives.js +5 -0
  16. package/dist/js/spark_dark.d.ts +10 -0
  17. package/dist/js/spark_dark.js +10 -0
  18. package/dist/js/spark_light.d.ts +10 -0
  19. package/dist/js/spark_light.js +12 -2
  20. package/dist/plugin/nova-plugin.js +49 -49
  21. package/dist/plugin/nova-theme.js +26 -0
  22. package/package.json +1 -1
package/dist/css/nova-utils.css CHANGED
@@ -468,7 +468,7 @@ button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visib
468
468
  a {
469
469
  color: var(--color-interaction-link-high-text);
470
470
  text-decoration: underline;
471
- font-weight: 700;
471
+ font-weight: var(--font-weight-high-emphasis);
472
472
  }
473
473
 
474
474
  a:hover {
@@ -7512,6 +7512,209 @@ h6 {
7512
7512
  width: unset;
7513
7513
  }
7514
7514
 
7515
+ .nv-fieldtext {
7516
+ --nv-field-border-default: var(--components-form-field-border-default);
7517
+ --nv-field-border-hover: var(--components-form-field-border-hover);
7518
+ --nv-field-border-focus: var(--components-form-field-border-focus);
7519
+ --nv-field-border-disabled: var(--components-form-field-border-default);
7520
+ --nv-field-border-readonly: var(--components-form-field-border-default);
7521
+ --nv-field-focus-box-shadow: var(--color-focus-brand);
7522
+ --nv-field-background: var(--components-form-field-background-default);
7523
+ display: flex;
7524
+ flex-direction: column;
7525
+ align-items: flex-start;
7526
+ gap: var(--form-gap-y);
7527
+ box-sizing: border-box;
7528
+ max-width: 480px;
7529
+ }
7530
+
7531
+ .nv-fieldtext.fluid {
7532
+ max-width: unset;
7533
+ }
7534
+
7535
+ .nv-fieldtext.readonly {
7536
+ --nv-field-border-default: var(--components-form-field-border-readonly);
7537
+ --nv-field-border-hover: var(--nv-field-border-default);
7538
+ --nv-field-border-focus: var(--components-form-field-border-focus);
7539
+ --nv-field-border-disabled: var(--nv-field-border-default);
7540
+ --nv-field-border-readonly: var(--nv-field-border-default);
7541
+ --nv-field-background: var(--components-form-field-background-readonly);
7542
+ }
7543
+
7544
+ .nv-fieldtext.error {
7545
+ --nv-field-border-default: var(--components-form-field-border-error);
7546
+ --nv-field-border-hover: var(--nv-field-border-default);
7547
+ --nv-field-border-focus: var(--nv-field-border-default);
7548
+ --nv-field-border-disabled: var(--nv-field-border-default);
7549
+ --nv-field-border-readonly: var(--nv-field-border-default);
7550
+ --nv-field-focus-box-shadow: var(--color-focus-destructive-in-field);
7551
+ }
7552
+
7553
+ .nv-fieldtext.success {
7554
+ --nv-field-border-default: var(--components-form-field-border-success);
7555
+ --nv-field-border-hover: var(--nv-field-border-default);
7556
+ --nv-field-border-focus: var(--nv-field-border-default);
7557
+ --nv-field-border-disabled: var(--nv-field-border-default);
7558
+ --nv-field-border-readonly: var(--nv-field-border-default);
7559
+ --nv-field-focus-box-shadow: var(--color-focus-success);
7560
+ }
7561
+
7562
+ .nv-fieldtext.required label::after {
7563
+ content: '*';
7564
+ color: var(--components-form-text-required);
7565
+ font-weight: var(--font-weight-high-emphasis);
7566
+ }
7567
+
7568
+ .nv-fieldtext > label {
7569
+ display: flex;
7570
+ align-items: center;
7571
+ gap: var(--form-label-gap);
7572
+ align-self: stretch;
7573
+ color: var(--components-form-text-label-default);
7574
+ font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
7575
+ font-size: var(--form-label-font-size);
7576
+ font-style: normal;
7577
+ font-weight: var(--font-weight-medium-emphasis);
7578
+ line-height: var(--form-label-line-height);
7579
+ }
7580
+
7581
+ .nv-fieldtext > .input-wrapper {
7582
+ display: flex;
7583
+ flex-wrap: wrap;
7584
+ gap: var(--form-gap-x);
7585
+ align-items: stretch;
7586
+ align-self: stretch;
7587
+ }
7588
+
7589
+ .nv-fieldtext > .input-wrapper .input-container {
7590
+ display: flex;
7591
+ flex-grow: 1;
7592
+ justify-content: center;
7593
+ align-items: center;
7594
+ align-self: stretch;
7595
+ border-radius: var(--form-field-radius);
7596
+ border-width: 1px;
7597
+ border-style: solid;
7598
+ border-color: var(--nv-field-border-default);
7599
+ opacity: var(--components-form-opacity-default, 1);
7600
+ background: var(--nv-field-background);
7601
+ transition: all 150ms ease-out;
7602
+ }
7603
+
7604
+ .nv-fieldtext > .input-wrapper .input-container:hover {
7605
+ border-color: var(--nv-field-border-hover);
7606
+ }
7607
+
7608
+ .nv-fieldtext > .input-wrapper .input-container:focus-within, .nv-fieldtext > .input-wrapper .input-container:focus-within:hover, .nv-fieldtext > .input-wrapper .input-container:focus, .nv-fieldtext > .input-wrapper .input-container:focus:hover {
7609
+ border-color: var(--nv-field-border-focus);
7610
+ box-shadow: 0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow);
7611
+ }
7612
+
7613
+ .nv-fieldtext > .input-wrapper .input-container:has(input:-moz-read-only) {
7614
+ opacity: 0.5;
7615
+ background-color: var(--components-form-field-background-readonly);
7616
+ border-color: var(--nv-field-border-readonly);
7617
+ }
7618
+
7619
+ .nv-fieldtext > .input-wrapper .input-container:has(input:read-only) {
7620
+ opacity: 0.5;
7621
+ background-color: var(--components-form-field-background-readonly);
7622
+ border-color: var(--nv-field-border-readonly);
7623
+ }
7624
+
7625
+ .nv-fieldtext > .input-wrapper .input-container:has(input:disabled) {
7626
+ opacity: 0.5;
7627
+ background-color: var(--components-form-field-background-disabled);
7628
+ border-color: var(--nv-field-border-disabled);
7629
+ }
7630
+
7631
+ .nv-fieldtext > .input-wrapper .input-container > .leading-input {
7632
+ display: block;
7633
+ margin-left: var(--form-field-padding-x);
7634
+ }
7635
+
7636
+ .nv-fieldtext > .input-wrapper .input-container input {
7637
+ display: flex;
7638
+ align-items: center;
7639
+ flex: 1 0 0;
7640
+ overflow: hidden;
7641
+ background-color: transparent;
7642
+ color: var(--components-form-field-content-text);
7643
+ padding: var(--form-field-padding-y) var(--form-field-padding-x);
7644
+ font-size: var(--form-field-font-size);
7645
+ font-style: normal;
7646
+ font-weight: var(--font-weight-medium-emphasis);
7647
+ line-height: var(--form-field-line-height);
7648
+ width: 100%;
7649
+ }
7650
+
7651
+ .nv-fieldtext > .input-wrapper .input-container input:focus {
7652
+ outline: none;
7653
+ }
7654
+
7655
+ .nv-fieldtext > .input-wrapper .input-container input::-moz-placeholder {
7656
+ overflow: hidden;
7657
+ color: var(--components-form-field-content-placeholder);
7658
+ text-overflow: ellipsis;
7659
+ font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
7660
+ font-size: var(--form-field-font-size);
7661
+ font-style: normal;
7662
+ font-weight: var(--font-weight-low-emphasis);
7663
+ line-height: var(--form-field-line-height);
7664
+ }
7665
+
7666
+ .nv-fieldtext > .input-wrapper .input-container input::placeholder {
7667
+ overflow: hidden;
7668
+ color: var(--components-form-field-content-placeholder);
7669
+ text-overflow: ellipsis;
7670
+ font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
7671
+ font-size: var(--form-field-font-size);
7672
+ font-style: normal;
7673
+ font-weight: var(--font-weight-low-emphasis);
7674
+ line-height: var(--form-field-line-height);
7675
+ }
7676
+
7677
+ .nv-fieldtext > .input-wrapper .input-container input[type=password]::-ms-clear, .nv-fieldtext > .input-wrapper .input-container input[type=password]::-ms-reveal {
7678
+ display: none;
7679
+ width: 0;
7680
+ height: 0;
7681
+ }
7682
+
7683
+ .nv-fieldtext > .input-wrapper .input-container nv-icon.validation {
7684
+ color: var(--nv-field-border-default);
7685
+ margin-right: var(--form-gap-x);
7686
+ }
7687
+
7688
+ .nv-fieldtext > .input-wrapper .input-container > .trailing-input {
7689
+ display: block;
7690
+ margin-right: var(--form-field-padding-x);
7691
+ }
7692
+
7693
+ .nv-fieldtext > .description {
7694
+ display: flex;
7695
+ align-items: center;
7696
+ align-self: stretch;
7697
+ gap: var(--spacing-1);
7698
+ color: var(--components-form-text-description-default);
7699
+ font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
7700
+ font-size: var(--form-description-font-size);
7701
+ font-style: normal;
7702
+ line-height: var(--form-description-line-height);
7703
+ }
7704
+
7705
+ .nv-fieldtext > .error-description {
7706
+ display: flex;
7707
+ align-items: center;
7708
+ align-self: stretch;
7709
+ gap: var(--spacing-1);
7710
+ color: var(--components-form-text-description-default);
7711
+ color: var(--components-form-text-description-error);
7712
+ font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
7713
+ font-size: var(--form-description-font-size);
7714
+ font-style: normal;
7715
+ line-height: var(--form-description-line-height);
7716
+ }
7717
+
7515
7718
  .nv-button {
7516
7719
  text-decoration: none;
7517
7720
  display: inline-flex;
@@ -7519,7 +7722,7 @@ h6 {
7519
7722
  align-items: center;
7520
7723
  font-style: normal;
7521
7724
  font-weight: var(--font-weight-medium-emphasis);
7522
- font-family: 'TT Norms Pro', sans-serif;
7725
+ font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
7523
7726
  transition: background-color 150ms ease-out;
7524
7727
  -webkit-user-select: none;
7525
7728
  -moz-user-select: none;
@@ -7901,7 +8104,7 @@ h6 {
7901
8104
 
7902
8105
  .nv-link, .nv-link-low, .nv-link-high {
7903
8106
  color: var(--color-interaction-link-high-text);
7904
- font-weight: 500;
8107
+ font-weight: var(--font-weight-medium-emphasis);
7905
8108
  text-decoration: none;
7906
8109
  }
7907
8110
 
@@ -7951,7 +8154,7 @@ h6 {
7951
8154
  color: var(--color-interaction-container-neutral-text);
7952
8155
  background-color: var(--color-interaction-container-neutral-background);
7953
8156
  text-decoration: none;
7954
- font-weight: 500;
8157
+ font-weight: var(--font-weight-medium-emphasis);
7955
8158
  padding: var(--spacing-2) var(--spacing-3);
7956
8159
  -moz-column-gap: var(--spacing-2);
7957
8160
  column-gap: var(--spacing-2);
package/dist/css/ocean.css CHANGED
@@ -241,6 +241,16 @@
241
241
  --color-chart-3: var(--color-petrol-500);
242
242
  --color-chart-2: var(--color-dark-gray-500);
243
243
  --color-chart-1: var(--color-amber-500);
244
+ --color-brand-900: var(--color-petrol-50);
245
+ --color-brand-800: var(--color-petrol-100);
246
+ --color-brand-700: var(--color-petrol-200);
247
+ --color-brand-600: var(--color-petrol-300);
248
+ --color-brand-500: var(--color-petrol-400);
249
+ --color-brand-400: var(--color-petrol-500);
250
+ --color-brand-300: var(--color-petrol-600);
251
+ --color-brand-200: var(--color-petrol-700);
252
+ --color-brand-100: var(--color-petrol-800);
253
+ --color-brand-50: var(--color-petrol-900);
244
254
  --color-accent-900: var(--color-orange-50);
245
255
  --color-accent-800: var(--color-orange-100);
246
256
  --color-accent-700: var(--color-orange-200);
@@ -463,14 +473,14 @@
463
473
  --components-list-dropdown-item-border-active: var(--color-interaction-container-neutral-border-active);
464
474
  --components-list-dropdown-header-background: var(--color-level-10-background);
465
475
  --components-list-dropdown-background: var(--color-level-00-background);
466
- --components-form-shape-foreground-disabled-error: var(--color-feedback-error-high-background);
476
+ --components-form-shape-foreground-disabled-error: var(--color-feedback-error-low-icon);
467
477
  --components-form-shape-foreground-switch-dot: var(--color-content-medium-border);
468
478
  --components-form-shape-border-success: var(--color-feedback-success-low-border);
469
479
  --components-form-shape-border-error: var(--color-feedback-error-low-border);
470
480
  --components-form-shape-border-focus: var(--color-focus-brand);
471
481
  --components-form-shape-border-hover: var(--color-content-high-border);
472
482
  --components-form-shape-border-default: var(--color-content-medium-border);
473
- --components-form-shape-background-error: var(--color-feedback-error-high-background);
483
+ --components-form-shape-background-error: var(--color-feedback-error-low-icon);
474
484
  --components-form-field-icon-success: var(--color-feedback-success-low-icon);
475
485
  --components-form-field-icon-error: var(--color-feedback-error-low-icon);
476
486
  --components-form-field-icon-disabled: var(--color-content-medium-border);
@@ -865,6 +875,16 @@
865
875
  --color-chart-3: var(--color-petrol-500);
866
876
  --color-chart-2: var(--color-dark-gray-500);
867
877
  --color-chart-1: var(--color-amber-500);
878
+ --color-brand-900: var(--color-petrol-900);
879
+ --color-brand-800: var(--color-petrol-800);
880
+ --color-brand-700: var(--color-petrol-700);
881
+ --color-brand-600: var(--color-petrol-600);
882
+ --color-brand-500: var(--color-petrol-500);
883
+ --color-brand-400: var(--color-petrol-400);
884
+ --color-brand-300: var(--color-petrol-300);
885
+ --color-brand-200: var(--color-petrol-200);
886
+ --color-brand-100: var(--color-petrol-100);
887
+ --color-brand-50: var(--color-petrol-100);
868
888
  --color-accent-900: var(--color-orange-900);
869
889
  --color-accent-800: var(--color-orange-800);
870
890
  --color-accent-700: var(--color-orange-700);
@@ -1087,14 +1107,14 @@
1087
1107
  --components-list-dropdown-item-border-active: var(--color-interaction-container-neutral-border-active);
1088
1108
  --components-list-dropdown-header-background: var(--color-level-10-background);
1089
1109
  --components-list-dropdown-background: var(--color-level-00-background);
1090
- --components-form-shape-foreground-disabled-error: var(--color-feedback-error-high-background);
1110
+ --components-form-shape-foreground-disabled-error: var(--color-feedback-error-low-icon);
1091
1111
  --components-form-shape-foreground-switch-dot: var(--color-content-medium-border);
1092
1112
  --components-form-shape-border-success: var(--color-feedback-success-low-border);
1093
1113
  --components-form-shape-border-error: var(--color-feedback-error-low-border);
1094
1114
  --components-form-shape-border-focus: var(--color-focus-brand);
1095
1115
  --components-form-shape-border-hover: var(--color-content-high-border);
1096
1116
  --components-form-shape-border-default: var(--color-content-medium-border);
1097
- --components-form-shape-background-error: var(--color-feedback-error-high-background);
1117
+ --components-form-shape-background-error: var(--color-feedback-error-low-icon);
1098
1118
  --components-form-field-icon-success: var(--color-feedback-success-low-icon);
1099
1119
  --components-form-field-icon-error: var(--color-feedback-error-low-icon);
1100
1120
  --components-form-field-icon-disabled: var(--color-content-medium-border);
@@ -1304,6 +1324,9 @@
1304
1324
  --leading-px-5: 20.0000px;
1305
1325
  --leading-px-4: 16.0000px;
1306
1326
  --leading-px-3: 12.0000px;
1327
+ --font-weight-high-emphasis-700: Bold;
1328
+ --font-weight-medium-emphasis-500: Medium;
1329
+ --font-weight-low-emphasis-400: Regular;
1307
1330
  --font-weight-low-emphasis: 400;
1308
1331
  --font-weight-medium-emphasis: 500;
1309
1332
  --font-weight-high-emphasis: 700;
@@ -1320,6 +1343,8 @@
1320
1343
  --font-size-md: 16.0000px;
1321
1344
  --font-size-sm: 14.0000px;
1322
1345
  --font-size-xs: 12.0000px;
1346
+ --font-family-fallback: Arial;
1347
+ --font-family-default: TT Norms Pro;
1323
1348
  --color-yellow-900: #4d3a00;
1324
1349
  --color-yellow-800: #795c00;
1325
1350
  --color-yellow-700: #a67d00;
package/dist/css/spark.css CHANGED
@@ -242,6 +242,16 @@
242
242
  --color-chart-3: var(--color-petrol-500);
243
243
  --color-chart-2: var(--color-dark-gray-500);
244
244
  --color-chart-1: var(--color-amber-500);
245
+ --color-brand-900: var(--color-amber-50);
246
+ --color-brand-800: var(--color-amber-100);
247
+ --color-brand-700: var(--color-amber-200);
248
+ --color-brand-600: var(--color-amber-300);
249
+ --color-brand-500: var(--color-amber-400);
250
+ --color-brand-400: var(--color-amber-500);
251
+ --color-brand-300: var(--color-amber-600);
252
+ --color-brand-200: var(--color-amber-700);
253
+ --color-brand-100: var(--color-amber-800);
254
+ --color-brand-50: var(--color-amber-900);
245
255
  --color-accent-900: var(--color-petrol-50);
246
256
  --color-accent-800: var(--color-petrol-100);
247
257
  --color-accent-700: var(--color-petrol-200);
@@ -464,14 +474,14 @@
464
474
  --components-list-dropdown-item-border-active: var(--color-interaction-container-neutral-border-active);
465
475
  --components-list-dropdown-header-background: var(--color-level-10-background);
466
476
  --components-list-dropdown-background: var(--color-level-00-background);
467
- --components-form-shape-foreground-disabled-error: var(--color-feedback-error-high-background);
477
+ --components-form-shape-foreground-disabled-error: var(--color-feedback-error-low-icon);
468
478
  --components-form-shape-foreground-switch-dot: var(--color-content-medium-border);
469
479
  --components-form-shape-border-success: var(--color-feedback-success-low-border);
470
480
  --components-form-shape-border-error: var(--color-feedback-error-low-border);
471
481
  --components-form-shape-border-focus: var(--color-focus-brand);
472
482
  --components-form-shape-border-hover: var(--color-content-high-border);
473
483
  --components-form-shape-border-default: var(--color-content-medium-border);
474
- --components-form-shape-background-error: var(--color-feedback-error-high-background);
484
+ --components-form-shape-background-error: var(--color-feedback-error-low-icon);
475
485
  --components-form-field-icon-success: var(--color-feedback-success-low-icon);
476
486
  --components-form-field-icon-error: var(--color-feedback-error-low-icon);
477
487
  --components-form-field-icon-disabled: var(--color-content-medium-border);
@@ -864,6 +874,16 @@
864
874
  --color-chart-3: var(--color-petrol-500);
865
875
  --color-chart-2: var(--color-dark-gray-500);
866
876
  --color-chart-1: var(--color-amber-500);
877
+ --color-brand-900: var(--color-amber-900);
878
+ --color-brand-800: var(--color-amber-800);
879
+ --color-brand-700: var(--color-amber-700);
880
+ --color-brand-600: var(--color-amber-600);
881
+ --color-brand-500: var(--color-amber-500);
882
+ --color-brand-400: var(--color-amber-400);
883
+ --color-brand-300: var(--color-amber-300);
884
+ --color-brand-200: var(--color-amber-200);
885
+ --color-brand-100: var(--color-amber-100);
886
+ --color-brand-50: var(--color-amber-50);
867
887
  --color-accent-900: var(--color-petrol-900);
868
888
  --color-accent-800: var(--color-petrol-800);
869
889
  --color-accent-700: var(--color-petrol-700);
@@ -1085,14 +1105,14 @@
1085
1105
  --components-list-dropdown-item-border-active: var(--color-interaction-container-neutral-border-active);
1086
1106
  --components-list-dropdown-header-background: var(--color-level-10-background);
1087
1107
  --components-list-dropdown-background: var(--color-level-00-background);
1088
- --components-form-shape-foreground-disabled-error: var(--color-feedback-error-high-background);
1108
+ --components-form-shape-foreground-disabled-error: var(--color-feedback-error-low-icon);
1089
1109
  --components-form-shape-foreground-switch-dot: var(--color-content-medium-border);
1090
1110
  --components-form-shape-border-success: var(--color-feedback-success-low-border);
1091
1111
  --components-form-shape-border-error: var(--color-feedback-error-low-border);
1092
1112
  --components-form-shape-border-focus: var(--color-focus-brand);
1093
1113
  --components-form-shape-border-hover: var(--color-content-high-border);
1094
1114
  --components-form-shape-border-default: var(--color-content-medium-border);
1095
- --components-form-shape-background-error: var(--color-feedback-error-high-background);
1115
+ --components-form-shape-background-error: var(--color-feedback-error-low-icon);
1096
1116
  --components-form-field-icon-success: var(--color-feedback-success-low-icon);
1097
1117
  --components-form-field-icon-error: var(--color-feedback-error-low-icon);
1098
1118
  --components-form-field-icon-disabled: var(--color-content-medium-border);
@@ -1304,6 +1324,9 @@
1304
1324
  --leading-px-5: 20.0000px;
1305
1325
  --leading-px-4: 16.0000px;
1306
1326
  --leading-px-3: 12.0000px;
1327
+ --font-weight-high-emphasis-700: Bold;
1328
+ --font-weight-medium-emphasis-500: Medium;
1329
+ --font-weight-low-emphasis-400: Regular;
1307
1330
  --font-weight-low-emphasis: 400;
1308
1331
  --font-weight-medium-emphasis: 500;
1309
1332
  --font-weight-high-emphasis: 700;
@@ -1320,6 +1343,8 @@
1320
1343
  --font-size-md: 16.0000px;
1321
1344
  --font-size-sm: 14.0000px;
1322
1345
  --font-size-xs: 12.0000px;
1346
+ --font-family-fallback: Arial;
1347
+ --font-family-default: TT Norms Pro;
1323
1348
  --color-yellow-900: #4d3a00;
1324
1349
  --color-yellow-800: #795c00;
1325
1350
  --color-yellow-700: #a67d00;
package/dist/generated/nova-tailwind-components.d.ts CHANGED
@@ -3,6 +3,205 @@
3
3
  * @ref generate-tailwind-components.ts
4
4
  */
5
5
  export declare const NOVA_TAILWIND_COMPONENTS: {
6
+ 'nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range': {
7
+ background: string;
8
+ };
9
+ 'nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb': {
10
+ borderColor: string;
11
+ };
12
+ 'nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range': {
13
+ background: string;
14
+ };
15
+ 'nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb': {
16
+ borderColor: string;
17
+ };
18
+ 'nv-fieldslider[error] .slider-container .track-container .track .track-range': {
19
+ background: string;
20
+ };
21
+ 'nv-fieldslider[error] .slider-container .track-container .track .thumb': {
22
+ borderColor: string;
23
+ };
24
+ 'nv-fieldslider[error] .slider-container .track-container .track .thumb:hover': {
25
+ borderColor: string;
26
+ outline: string;
27
+ outlineOffset: string;
28
+ backgroundColor: string;
29
+ };
30
+ 'nv-fieldslider[error] .slider-container .track-container .track .thumb:focus': {
31
+ borderColor: string;
32
+ outline: string;
33
+ outlineOffset: string;
34
+ backgroundColor: string;
35
+ };
36
+ 'nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range': {
37
+ background: string;
38
+ };
39
+ 'nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb': {
40
+ borderColor: string;
41
+ };
42
+ '.nv-fieldtext': {
43
+ '--nv-field-border-default': string;
44
+ '--nv-field-border-hover': string;
45
+ '--nv-field-border-focus': string;
46
+ '--nv-field-border-disabled': string;
47
+ '--nv-field-border-readonly': string;
48
+ '--nv-field-focus-box-shadow': string;
49
+ '--nv-field-background': string;
50
+ display: string;
51
+ flexDirection: string;
52
+ alignItems: string;
53
+ gap: string;
54
+ boxSizing: string;
55
+ maxWidth: string;
56
+ };
57
+ '.nv-fieldtext.fluid': {
58
+ maxWidth: string;
59
+ };
60
+ '.nv-fieldtext.readonly': {
61
+ '--nv-field-border-default': string;
62
+ '--nv-field-border-hover': string;
63
+ '--nv-field-border-focus': string;
64
+ '--nv-field-border-disabled': string;
65
+ '--nv-field-border-readonly': string;
66
+ '--nv-field-background': string;
67
+ };
68
+ '.nv-fieldtext.error': {
69
+ '--nv-field-border-default': string;
70
+ '--nv-field-border-hover': string;
71
+ '--nv-field-border-focus': string;
72
+ '--nv-field-border-disabled': string;
73
+ '--nv-field-border-readonly': string;
74
+ '--nv-field-focus-box-shadow': string;
75
+ };
76
+ '.nv-fieldtext.success': {
77
+ '--nv-field-border-default': string;
78
+ '--nv-field-border-hover': string;
79
+ '--nv-field-border-focus': string;
80
+ '--nv-field-border-disabled': string;
81
+ '--nv-field-border-readonly': string;
82
+ '--nv-field-focus-box-shadow': string;
83
+ };
84
+ '.nv-fieldtext.required label::after': {
85
+ content: string;
86
+ color: string;
87
+ fontWeight: string;
88
+ };
89
+ '.nv-fieldtext > label': {
90
+ display: string;
91
+ alignItems: string;
92
+ gap: string;
93
+ alignSelf: string;
94
+ color: string;
95
+ fontFamily: string;
96
+ fontSize: string;
97
+ fontStyle: string;
98
+ fontWeight: string;
99
+ lineHeight: string;
100
+ };
101
+ '.nv-fieldtext > .input-wrapper': {
102
+ display: string;
103
+ flexWrap: string;
104
+ gap: string;
105
+ alignItems: string;
106
+ alignSelf: string;
107
+ };
108
+ '.nv-fieldtext > .input-wrapper .input-container': {
109
+ display: string;
110
+ flexGrow: string;
111
+ justifyContent: string;
112
+ alignItems: string;
113
+ alignSelf: string;
114
+ borderRadius: string;
115
+ borderWidth: string;
116
+ borderStyle: string;
117
+ borderColor: string;
118
+ opacity: string;
119
+ background: string;
120
+ transition: string;
121
+ };
122
+ '.nv-fieldtext > .input-wrapper .input-container:hover': {
123
+ borderColor: string;
124
+ };
125
+ '.nv-fieldtext > .input-wrapper .input-container:focus-within, .nv-fieldtext > .input-wrapper .input-container:focus-within:hover, .nv-fieldtext > .input-wrapper .input-container:focus, .nv-fieldtext > .input-wrapper .input-container:focus:hover': {
126
+ borderColor: string;
127
+ boxShadow: string;
128
+ };
129
+ '.nv-fieldtext > .input-wrapper .input-container:has(input:read-only)': {
130
+ opacity: string;
131
+ backgroundColor: string;
132
+ borderColor: string;
133
+ };
134
+ '.nv-fieldtext > .input-wrapper .input-container:has(input:disabled)': {
135
+ opacity: string;
136
+ backgroundColor: string;
137
+ borderColor: string;
138
+ };
139
+ '.nv-fieldtext > .input-wrapper .input-container > .leading-input': {
140
+ display: string;
141
+ marginLeft: string;
142
+ };
143
+ '.nv-fieldtext > .input-wrapper .input-container input': {
144
+ display: string;
145
+ alignItems: string;
146
+ flex: string;
147
+ overflow: string;
148
+ backgroundColor: string;
149
+ color: string;
150
+ padding: string;
151
+ fontSize: string;
152
+ fontStyle: string;
153
+ fontWeight: string;
154
+ lineHeight: string;
155
+ width: string;
156
+ };
157
+ '.nv-fieldtext > .input-wrapper .input-container input:focus': {
158
+ outline: string;
159
+ };
160
+ '.nv-fieldtext > .input-wrapper .input-container input::placeholder': {
161
+ overflow: string;
162
+ color: string;
163
+ textOverflow: string;
164
+ fontFamily: string;
165
+ fontSize: string;
166
+ fontStyle: string;
167
+ fontWeight: string;
168
+ lineHeight: string;
169
+ };
170
+ '.nv-fieldtext > .input-wrapper .input-container input[type=password]::-ms-clear, .nv-fieldtext > .input-wrapper .input-container input[type=password]::-ms-reveal': {
171
+ display: string;
172
+ width: string;
173
+ height: string;
174
+ };
175
+ '.nv-fieldtext > .input-wrapper .input-container nv-icon.validation': {
176
+ color: string;
177
+ marginRight: string;
178
+ };
179
+ '.nv-fieldtext > .input-wrapper .input-container > .trailing-input': {
180
+ display: string;
181
+ marginRight: string;
182
+ };
183
+ '.nv-fieldtext > .description': {
184
+ display: string;
185
+ alignItems: string;
186
+ alignSelf: string;
187
+ gap: string;
188
+ color: string;
189
+ fontFamily: string;
190
+ fontSize: string;
191
+ fontStyle: string;
192
+ lineHeight: string;
193
+ };
194
+ '.nv-fieldtext > .error-description': {
195
+ display: string;
196
+ alignItems: string;
197
+ alignSelf: string;
198
+ gap: string;
199
+ color: string[];
200
+ fontFamily: string;
201
+ fontSize: string;
202
+ fontStyle: string;
203
+ lineHeight: string;
204
+ };
6
205
  '.nv-button': {
7
206
  textDecoration: string;
8
207
  display: string;