@turquoisehealth/pit-viper 2.259.0 → 2.260.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/_site/assets/css/pit-viper-a11y-v3.css +91 -44
  2. package/_site/assets/css/pit-viper-a11y.css +80 -33
  3. package/_site/assets/css/pit-viper-consumer.css +79 -32
  4. package/_site/assets/css/pit-viper-v2-scoped.css +75 -32
  5. package/_site/assets/css/pit-viper-v2.css +80 -33
  6. package/_site/assets/css/pit-viper-v3.css +91 -44
  7. package/_site/assets/css/pit-viper.css +79 -32
  8. package/package.json +1 -1
  9. package/pv-components/dist/stats/vue/base/stats.html +1 -1
  10. package/pv-components/dist/stats/vue/visualizations/stats.html +1 -1
  11. package/pv-components/dist/stats/web/pv-filter-panel-stats.html +1 -1
  12. package/pv-components/dist/stats/web/pv-tabs-stats.html +1 -1
  13. package/pv-components/dist/vue/ai/components/base/PvTabs/PvTabs.vue.d.ts +2 -2
  14. package/pv-components/dist/vue/base/components/base/PvTabs/PvTabs.vue.d.ts +2 -2
  15. package/pv-components/dist/vue/base/pv-components-base.mjs +1046 -1012
  16. package/pv-components/dist/vue/base/pv-components-base.mjs.map +1 -1
  17. package/pv-components/dist/vue/visualizations/components/base/PvTabs/PvTabs.vue.d.ts +2 -2
  18. package/pv-components/dist/vue/visualizations/pv-components-visualizations.mjs +5 -5
  19. package/pv-components/dist/vue/visualizations/pv-components-visualizations.mjs.map +1 -1
  20. package/pv-components/dist/web/components/pv-filter-panel/pv-filter-panel.js +1 -1
  21. package/pv-components/dist/web/components/pv-tabs/pv-tabs.js +1054 -1020
  22. package/pv-components/dist/web/pv-components.iife.js +13 -13
  23. package/pv-components/dist/web/pv-components.iife.js.map +1 -1
@@ -26,6 +26,18 @@
26
26
  background-color: var(--color-background-body, #FFFFFF);
27
27
  -webkit-font-smoothing: antialiased;
28
28
  /* Remove all animations and transitions for people that prefer not to see them */
29
+ --color-text-body: #121313;
30
+ --color-text-brand: #16696D;
31
+ --color-text-tertiary: #6E8081;
32
+ --color-text-quaternary: #89989B;
33
+ --color-border: #E3E7EA;
34
+ --color-border-brand: #16696D;
35
+ --color-background-body: #FFFFFF;
36
+ --color-background-accent: #F7F8F8;
37
+ --color-background-table-hover: #F7F8F8;
38
+ --color-background-brand: #16696D;
39
+ --color-background-highlight: #E4F8F6;
40
+ --color-background-disabled: #ECECEC;
29
41
  /* Tooltips mount on body, outside .pv-data-table. Skip AG Grid's 1s fade-out so a hidden tooltip disappears at once. */
30
42
  /*
31
43
  * Reasoning is an aside in a transcript, not a card, so it paints no surface of
@@ -816,14 +828,15 @@
816
828
  .pv-v2 [class*=pv-segmented-control] button:hover:not(:disabled) {
817
829
  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.1);
818
830
  }
819
- .pv-v2 [class*=pv-segmented-control] button[data-active] {
831
+ .pv-v2 [class*=pv-segmented-control] button[data-active],
832
+ .pv-v2 [class*=pv-segmented-control] button[data-active]:is(:hover, :focus-visible, :active):not(:disabled) {
820
833
  background-color: var(--segmented-control-button-selected-background, #FFFFFF);
821
834
  }
822
- .pv-v2 [class*=pv-segmented-control] button:hover:not(:disabled),
835
+ .pv-v2 [class*=pv-segmented-control] button:hover:not(:disabled, [data-active]),
823
836
  .pv-v2 [class*=pv-segmented-control] button:focus-visible:not(:disabled) {
824
837
  background-color: var(--segmented-control-button-hover-background, #E8F2F4);
825
838
  }
826
- .pv-v2 [class*=pv-segmented-control] button:active:not(:disabled) {
839
+ .pv-v2 [class*=pv-segmented-control] button:active:not(:disabled, [data-active]) {
827
840
  background-color: var(--segmented-control-button-active-background, #C7D8DB);
828
841
  }
829
842
  .pv-v2 [class*=pv-segmented-control] button:has(svg:is(:only-child)) {
@@ -1527,7 +1540,7 @@
1527
1540
  line-height: 1.33333333;
1528
1541
  }
1529
1542
  .pv-v2 .pv-ghost-input input::placeholder, .pv-v2 .pv-ghost-input input::-webkit-input-placeholder {
1530
- color: var(--color-text-quaternary, #89989B);
1543
+ color: #89989B;
1531
1544
  }
1532
1545
  .pv-v2 .pv-ghost-input button {
1533
1546
  opacity: 0;
@@ -1539,7 +1552,7 @@
1539
1552
  outline: 0;
1540
1553
  }
1541
1554
  .pv-v2 .pv-ghost-input:hover input::placeholder, .pv-v2 .pv-ghost-input:hover input::-webkit-input-placeholder, .pv-v2 .pv-ghost-input:focus-visible input::placeholder, .pv-v2 .pv-ghost-input:focus-visible input::-webkit-input-placeholder, .pv-v2 .pv-ghost-input:focus-within input::placeholder, .pv-v2 .pv-ghost-input:focus-within input::-webkit-input-placeholder {
1542
- color: var(--color-text-tertiary, #6E8081);
1555
+ color: #6E8081;
1543
1556
  }
1544
1557
  .pv-v2 .pv-ghost-input[data-style=h1] input {
1545
1558
  font-weight: 600;
@@ -1585,7 +1598,7 @@
1585
1598
  --range-fill-color: var(--color-background-brand-inverse, #36C5BA);
1586
1599
  --range-thumb-border-width: 3px;
1587
1600
  --range-thumb-size: 20px;
1588
- --range-track-color: var(--color-border, #E3E7EA);
1601
+ --range-track-color: #E3E7EA;
1589
1602
  --range-track-height: 6px;
1590
1603
  --value: 0%;
1591
1604
  -webkit-appearance: none;
@@ -1615,11 +1628,11 @@
1615
1628
  outline: none;
1616
1629
  }
1617
1630
  .pv-v2 .pv-range:focus-visible::-webkit-slider-thumb {
1618
- outline: 2px solid var(--color-border-brand, #36C5BA);
1631
+ outline: 2px solid #36C5BA;
1619
1632
  outline-offset: 2px;
1620
1633
  }
1621
1634
  .pv-v2 .pv-range:focus-visible::-moz-range-thumb {
1622
- outline: 2px solid var(--color-border-brand, #36C5BA);
1635
+ outline: 2px solid #36C5BA;
1623
1636
  outline-offset: 2px;
1624
1637
  }
1625
1638
  .pv-v2 .pv-range-sm {
@@ -1646,7 +1659,7 @@
1646
1659
  --range-dual-thumb-size: 1.25rem;
1647
1660
  --range-dual-track-height: 0.375rem;
1648
1661
  --range-fill-color: var(--color-background-brand-inverse, #36C5BA);
1649
- --range-track-color: var(--color-border, #E3E7EA);
1662
+ --range-track-color: #E3E7EA;
1650
1663
  align-items: center;
1651
1664
  cursor: pointer;
1652
1665
  display: flex;
@@ -1739,11 +1752,11 @@
1739
1752
  outline: none;
1740
1753
  }
1741
1754
  .pv-v2 .pv-range-dual-native:focus-visible::-webkit-slider-thumb {
1742
- outline: 2px solid var(--color-border-brand, #36C5BA);
1755
+ outline: 2px solid #36C5BA;
1743
1756
  outline-offset: 2px;
1744
1757
  }
1745
1758
  .pv-v2 .pv-range-dual-native:focus-visible::-moz-range-thumb {
1746
- outline: 2px solid var(--color-border-brand, #36C5BA);
1759
+ outline: 2px solid #36C5BA;
1747
1760
  outline-offset: 2px;
1748
1761
  }
1749
1762
  .pv-v2 .pv-range-dual-native-min {
@@ -2032,7 +2045,7 @@
2032
2045
  }
2033
2046
  .pv-v2 .pv-avatar-group > li, .pv-v2 .pv-avatar-group[data-more]:after {
2034
2047
  margin-inline-start: -0.5rem;
2035
- outline: 2px solid var(--color-background-body, white);
2048
+ outline: 2px solid var(--color-background-body, #FFFFFF);
2036
2049
  }
2037
2050
  .pv-v2 .pv-avatar-group[data-more]:after {
2038
2051
  content: "+" attr(data-more);
@@ -3206,7 +3219,7 @@
3206
3219
  opacity: 1;
3207
3220
  pointer-events: auto;
3208
3221
  }
3209
- .pv-v2 [class*=pv-tab-list] > :where(li) > a, .pv-v2 [class*=pv-tab-list] > :where(li) > button, .pv-v2 [class*=pv-tab-list] > :where(li) > .pv-tab-overflow button {
3222
+ .pv-v2 [class*=pv-tab-list] > :where(li) > a, .pv-v2 [class*=pv-tab-list] > :where(li) > button, .pv-v2 [class*=pv-tab-list] > :where(li) > :is(.pv-tab-overflow, .pv-tab-add-menu) button {
3210
3223
  display: flex;
3211
3224
  align-items: center;
3212
3225
  gap: 0.25rem;
@@ -3221,15 +3234,15 @@
3221
3234
  background-color: transparent;
3222
3235
  cursor: pointer;
3223
3236
  }
3224
- .pv-v2 [class*=pv-tab-list] > :where(li) > a:hover, .pv-v2 [class*=pv-tab-list] > :where(li) > a:focus-visible, .pv-v2 [class*=pv-tab-list] > :where(li) > button:hover, .pv-v2 [class*=pv-tab-list] > :where(li) > button:focus-visible, .pv-v2 [class*=pv-tab-list] > :where(li) > .pv-tab-overflow button:hover, .pv-v2 [class*=pv-tab-list] > :where(li) > .pv-tab-overflow button:focus-visible {
3237
+ .pv-v2 [class*=pv-tab-list] > :where(li) > a:hover, .pv-v2 [class*=pv-tab-list] > :where(li) > a:focus-visible, .pv-v2 [class*=pv-tab-list] > :where(li) > button:hover, .pv-v2 [class*=pv-tab-list] > :where(li) > button:focus-visible, .pv-v2 [class*=pv-tab-list] > :where(li) > :is(.pv-tab-overflow, .pv-tab-add-menu) button:hover, .pv-v2 [class*=pv-tab-list] > :where(li) > :is(.pv-tab-overflow, .pv-tab-add-menu) button:focus-visible {
3225
3238
  text-decoration: none;
3226
3239
  color: var(--tab-list-hover-text-color, #121313);
3227
3240
  background-color: var(--tab-list-hover-background-color, #E8F2F4);
3228
3241
  }
3229
- .pv-v2 [class*=pv-tab-list] > :where(li) > a:active, .pv-v2 [class*=pv-tab-list] > :where(li) > button:active, .pv-v2 [class*=pv-tab-list] > :where(li) > .pv-tab-overflow button:active {
3242
+ .pv-v2 [class*=pv-tab-list] > :where(li) > a:active, .pv-v2 [class*=pv-tab-list] > :where(li) > button:active, .pv-v2 [class*=pv-tab-list] > :where(li) > :is(.pv-tab-overflow, .pv-tab-add-menu) button:active {
3230
3243
  background-color: var(--tab-list-pressed-background-color, #C7D8DB);
3231
3244
  }
3232
- .pv-v2 [class*=pv-tab-list] > :where(li) > a:disabled, .pv-v2 [class*=pv-tab-list] > :where(li) > button:disabled, .pv-v2 [class*=pv-tab-list] > :where(li) > .pv-tab-overflow button:disabled {
3245
+ .pv-v2 [class*=pv-tab-list] > :where(li) > a:disabled, .pv-v2 [class*=pv-tab-list] > :where(li) > button:disabled, .pv-v2 [class*=pv-tab-list] > :where(li) > :is(.pv-tab-overflow, .pv-tab-add-menu) button:disabled {
3233
3246
  color: var(--tab-list-disabled-text-color, #7D898D);
3234
3247
  background-color: transparent;
3235
3248
  cursor: unset;
@@ -3255,7 +3268,7 @@
3255
3268
  line-height: var(--tab-list-line-height, 1.33333333);
3256
3269
  background-color: transparent;
3257
3270
  }
3258
- .pv-v2 [class*=pv-tab-list] > :where(li) > a:after, .pv-v2 [class*=pv-tab-list] > :where(li) > button:after, .pv-v2 [class*=pv-tab-list] > :where(li) > .pv-tab-input:after, .pv-v2 [class*=pv-tab-list] > :where(li) > .pv-tab-overflow button:after {
3271
+ .pv-v2 [class*=pv-tab-list] > :where(li) > a:after, .pv-v2 [class*=pv-tab-list] > :where(li) > button:after, .pv-v2 [class*=pv-tab-list] > :where(li) > .pv-tab-input:after, .pv-v2 [class*=pv-tab-list] > :where(li) > :is(.pv-tab-overflow, .pv-tab-add-menu) button:after {
3259
3272
  content: "";
3260
3273
  display: block;
3261
3274
  height: var(--tab-list-indicator-size, 2px);
@@ -3266,7 +3279,7 @@
3266
3279
  right: 0;
3267
3280
  background-color: var(--tab-list-indicator-inactive-color, #E3E7EA);
3268
3281
  }
3269
- .pv-v2 [class*=pv-tab-list] > :where(li)[data-active] > a, .pv-v2 [class*=pv-tab-list] > :where(li)[data-active] > button, .pv-v2 [class*=pv-tab-list] > :where(li)[data-active] > .pv-tab-overflow button {
3282
+ .pv-v2 [class*=pv-tab-list] > :where(li)[data-active] > a, .pv-v2 [class*=pv-tab-list] > :where(li)[data-active] > button {
3270
3283
  color: var(--tab-list-active-text-color, #16696D);
3271
3284
  }
3272
3285
  .pv-v2 [class*=pv-tab-list] > :where(li)[data-active] > .pv-tab-input .pv-ghost-input input {
@@ -3275,7 +3288,7 @@
3275
3288
  .pv-v2 [class*=pv-tab-list] > :where(li)[data-active] .pv-tab-options .pv-button-ghost {
3276
3289
  color: var(--tab-list-active-text-color, #16696D);
3277
3290
  }
3278
- .pv-v2 [class*=pv-tab-list] > :where(li)[data-active] > a:after, .pv-v2 [class*=pv-tab-list] > :where(li)[data-active] > button:after, .pv-v2 [class*=pv-tab-list] > :where(li)[data-active] > .pv-tab-input:after, .pv-v2 [class*=pv-tab-list] > :where(li)[data-active] > .pv-tab-overflow button:after {
3291
+ .pv-v2 [class*=pv-tab-list] > :where(li)[data-active] > a:after, .pv-v2 [class*=pv-tab-list] > :where(li)[data-active] > button:after, .pv-v2 [class*=pv-tab-list] > :where(li)[data-active] > .pv-tab-input:after {
3279
3292
  border-radius: var(--tab-list-indicator-radius, 2px);
3280
3293
  background-color: var(--tab-list-indicator-color, #16696D);
3281
3294
  }
@@ -3302,12 +3315,34 @@
3302
3315
  width: 100%;
3303
3316
  min-width: 0;
3304
3317
  }
3305
- .pv-v2 .pv-tab-list-small > :where(li) > a, .pv-v2 .pv-tab-list-small > :where(li) > button, .pv-v2 .pv-tab-list-small > :where(li) > .pv-tab-overflow button {
3318
+ .pv-v2 .pv-tab-list-small > :where(li) > a, .pv-v2 .pv-tab-list-small > :where(li) > button, .pv-v2 .pv-tab-list-small > :where(li) > :is(.pv-tab-overflow, .pv-tab-add-menu) button {
3306
3319
  padding: var(--tab-list-small-item-padding, 0.1875rem 0.5rem);
3307
3320
  }
3308
3321
  .pv-v2 .pv-tab-list-small > :where(li) > .pv-tab-input {
3309
3322
  padding: 3px 8px;
3310
3323
  }
3324
+ .pv-v2 ol.pv-tab-list {
3325
+ gap: 0.25rem;
3326
+ border-block-end: 0;
3327
+ }
3328
+ .pv-v2 ol.pv-tab-list > li > a {
3329
+ border-radius: var(--stepper-button-radius, 8px);
3330
+ color: var(--stepper-button-inactive-text-color, #6E8081);
3331
+ }
3332
+ .pv-v2 ol.pv-tab-list > li > a:hover, .pv-v2 ol.pv-tab-list > li > a:focus-visible {
3333
+ color: var(--stepper-button-inactive-text-color, #6E8081);
3334
+ background-color: var(--stepper-button-inactive-background-color, #E8F2F4);
3335
+ }
3336
+ .pv-v2 ol.pv-tab-list > li > a:active {
3337
+ background-color: var(--stepper-button-inactive-active-background-color, #C7D8DB);
3338
+ }
3339
+ .pv-v2 ol.pv-tab-list > li > a:after {
3340
+ display: none;
3341
+ }
3342
+ .pv-v2 ol.pv-tab-list > li[data-active] > a, .pv-v2 ol.pv-tab-list > li[data-active] > a:hover, .pv-v2 ol.pv-tab-list > li[data-active] > a:focus-visible, .pv-v2 ol.pv-tab-list > li[data-active] > a:active {
3343
+ color: var(--stepper-button-active-text-color, #121313);
3344
+ background-color: var(--stepper-button-active-background-color, #F3F1EB);
3345
+ }
3311
3346
  .pv-v2 :where(ol.pv-tab-list) {
3312
3347
  counter-reset: item;
3313
3348
  }
@@ -3317,8 +3352,8 @@
3317
3352
  display: inline-block;
3318
3353
  width: 1.5rem;
3319
3354
  height: 1.5rem;
3320
- color: var(--color-text-inverse, #FFFFFF);
3321
- background-color: var(--tab-list-counter-background-color, #ADB5C0);
3355
+ color: var(--tab-list-counter-color, #4B595C);
3356
+ background-color: var(--tab-list-counter-background-color, #E0E5E4);
3322
3357
  margin-inline-end: 0.5rem;
3323
3358
  text-align: center;
3324
3359
  border-radius: 50%;
@@ -3326,6 +3361,7 @@
3326
3361
  line-height: 2;
3327
3362
  }
3328
3363
  .pv-v2 :where(ol.pv-tab-list) [data-active] > a:before {
3364
+ color: var(--color-text-inverse, #FFFFFF);
3329
3365
  background-color: var(--tab-list-indicator-color, #16696D);
3330
3366
  }
3331
3367
  .pv-v2 :where(ol.pv-tab-list) [data-complete] {
@@ -3444,6 +3480,13 @@
3444
3480
  .pv-v2 .pv-select-multiple {
3445
3481
  font-weight: 600;
3446
3482
  }
3483
+ .pv-v2 .pv-select-multiple:not(:disabled, [data-invalid], [data-dropdown]):hover {
3484
+ color: var(--select-multiple-hover-color, #121313);
3485
+ background-color: var(--select-multiple-hover-background-color, #E8F2F4);
3486
+ }
3487
+ .pv-v2 .pv-select-multiple:disabled {
3488
+ color: var(--select-multiple-disabled-color, #4B595C);
3489
+ }
3447
3490
  .pv-v2 .pv-select-multiple[data-dropdown] {
3448
3491
  background-image: var(--select-multiple-open-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.151 15.848a1.2 1.2 0 0 0 1.698 0L12 10.698l5.151 5.15a1.2 1.2 0 1 0 1.698-1.697l-6-6a1.2 1.2 0 0 0-1.697 0l-6 6a1.2 1.2 0 0 0 0 1.697Z' fill='%234B595C'/%3E%3C/svg%3E"));
3449
3492
  background-color: #ECECEC;
@@ -3590,13 +3633,13 @@
3590
3633
  cursor: default !important;
3591
3634
  }
3592
3635
  .pv-v2 .pv-tree-item.pv-drop-indicator-top {
3593
- border-top: 1px solid var(--color-border, #121313);
3636
+ border-top: 1px solid #121313;
3594
3637
  }
3595
3638
  .pv-v2 .pv-tree-item.pv-drop-indicator-bottom {
3596
- border-bottom: 1px solid var(--color-border, #121313);
3639
+ border-bottom: 1px solid #121313;
3597
3640
  }
3598
3641
  .pv-v2 .pv-drop-indicator-parent {
3599
- border: 1px solid var(--color-border, #36C5BA);
3642
+ border: 1px solid #36C5BA;
3600
3643
  }
3601
3644
  .pv-v2 .pv-tree-empty-accordion {
3602
3645
  padding-block: 0.1875rem;
@@ -5036,7 +5079,7 @@
5036
5079
  padding: 0.5rem;
5037
5080
  font-size: 16px;
5038
5081
  line-height: 1.5;
5039
- border: 2px solid var(--color-border, #DCDFE4);
5082
+ border: 2px solid #DCDFE4;
5040
5083
  border-radius: 2px;
5041
5084
  appearance: none;
5042
5085
  background-color: var(--color-background-body, #FFFFFF);
@@ -5207,7 +5250,7 @@
5207
5250
  appearance: none;
5208
5251
  width: 1rem !important;
5209
5252
  height: 1rem !important;
5210
- background-color: var(--color-background-body, white);
5253
+ background-color: var(--color-background-body, #FFFFFF);
5211
5254
  border: 2px solid var(--checkbox-border, #DCDFE4);
5212
5255
  flex-shrink: 0;
5213
5256
  border-radius: 2px !important;
@@ -6725,7 +6768,7 @@
6725
6768
  }
6726
6769
  }
6727
6770
  .pv-v2 .pv-scrollbar-visible {
6728
- scrollbar-color: var(--color-border, #C1C1C1) transparent;
6771
+ scrollbar-color: #C1C1C1 transparent;
6729
6772
  scrollbar-gutter: stable;
6730
6773
  scrollbar-width: thin;
6731
6774
  }
@@ -6742,7 +6785,7 @@
6742
6785
  }
6743
6786
  .pv-v2 .pv-scrollbar-visible::-webkit-scrollbar-thumb {
6744
6787
  border-radius: 8px;
6745
- background-color: var(--color-border, #C1C1C1);
6788
+ background-color: #C1C1C1;
6746
6789
  }
6747
6790
  .pv-v2 .pv-scrollbar-visible::-webkit-scrollbar-thumb:hover {
6748
6791
  background-color: var(--color-text-subdued, #7C7C7C);
@@ -6976,7 +7019,7 @@
6976
7019
  display: none;
6977
7020
  }
6978
7021
  .pv-v2 .select2-selection--multiple {
6979
- background-color: var(--color-background-body, white);
7022
+ background-color: var(--color-background-body, #FFFFFF);
6980
7023
  border: var(--select2-border, 1px solid #E3E7EA);
6981
7024
  border-radius: 4px;
6982
7025
  cursor: text;
@@ -7003,7 +7046,7 @@
7003
7046
  -webkit-appearance: none;
7004
7047
  }
7005
7048
  .pv-v2 .select2-dropdown {
7006
- background-color: var(--color-background-body, white);
7049
+ background-color: var(--color-background-body, #FFFFFF);
7007
7050
  border-radius: 4px;
7008
7051
  padding-block: 0.5rem;
7009
7052
  display: block;
@@ -7026,7 +7069,7 @@
7026
7069
  position: absolute;
7027
7070
  top: -33px;
7028
7071
  left: 0;
7029
- background-color: var(--color-background-body, white);
7072
+ background-color: var(--color-background-body, #FFFFFF);
7030
7073
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.151 15.848a1.2 1.2 0 0 0 1.698 0L12 10.698l5.151 5.15a1.2 1.2 0 1 0 1.698-1.697l-6-6a1.2 1.2 0 0 0-1.697 0l-6 6a1.2 1.2 0 0 0 0 1.697Z' fill='%2302363D'/%3E%3C/svg%3E");
7031
7074
  background-repeat: no-repeat;
7032
7075
  background-size: 1rem 1rem;
@@ -45,6 +45,21 @@
45
45
  interpolate-size: allow-keywords;
46
46
  }
47
47
 
48
+ :root {
49
+ --color-text-body: #121313;
50
+ --color-text-brand: #16696D;
51
+ --color-text-tertiary: #6E8081;
52
+ --color-text-quaternary: #89989B;
53
+ --color-border: #E3E7EA;
54
+ --color-border-brand: #16696D;
55
+ --color-background-body: #FFFFFF;
56
+ --color-background-accent: #F7F8F8;
57
+ --color-background-table-hover: #F7F8F8;
58
+ --color-background-brand: #16696D;
59
+ --color-background-highlight: #E4F8F6;
60
+ --color-background-disabled: #ECECEC;
61
+ }
62
+
48
63
  :where(html) {
49
64
  scroll-behavior: smooth;
50
65
  scroll-padding: 1rem;
@@ -888,14 +903,15 @@
888
903
  [class*=pv-segmented-control] button:hover:not(:disabled) {
889
904
  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.1);
890
905
  }
891
- [class*=pv-segmented-control] button[data-active] {
906
+ [class*=pv-segmented-control] button[data-active],
907
+ [class*=pv-segmented-control] button[data-active]:is(:hover, :focus-visible, :active):not(:disabled) {
892
908
  background-color: var(--segmented-control-button-selected-background, #FFFFFF);
893
909
  }
894
- [class*=pv-segmented-control] button:hover:not(:disabled),
910
+ [class*=pv-segmented-control] button:hover:not(:disabled, [data-active]),
895
911
  [class*=pv-segmented-control] button:focus-visible:not(:disabled) {
896
912
  background-color: var(--segmented-control-button-hover-background, #E8F2F4);
897
913
  }
898
- [class*=pv-segmented-control] button:active:not(:disabled) {
914
+ [class*=pv-segmented-control] button:active:not(:disabled, [data-active]) {
899
915
  background-color: var(--segmented-control-button-active-background, #C7D8DB);
900
916
  }
901
917
  [class*=pv-segmented-control] button:has(svg:is(:only-child)) {
@@ -1642,7 +1658,7 @@ div > .pv-input-text.pv-input-text[data-suffix="%"] {
1642
1658
  line-height: 1.33333333;
1643
1659
  }
1644
1660
  .pv-ghost-input input::placeholder, .pv-ghost-input input::-webkit-input-placeholder {
1645
- color: var(--color-text-quaternary, #89989B);
1661
+ color: #89989B;
1646
1662
  }
1647
1663
  .pv-ghost-input button {
1648
1664
  opacity: 0;
@@ -1654,7 +1670,7 @@ div > .pv-input-text.pv-input-text[data-suffix="%"] {
1654
1670
  outline: 0;
1655
1671
  }
1656
1672
  .pv-ghost-input:hover input::placeholder, .pv-ghost-input:hover input::-webkit-input-placeholder, .pv-ghost-input:focus-visible input::placeholder, .pv-ghost-input:focus-visible input::-webkit-input-placeholder, .pv-ghost-input:focus-within input::placeholder, .pv-ghost-input:focus-within input::-webkit-input-placeholder {
1657
- color: var(--color-text-tertiary, #6E8081);
1673
+ color: #6E8081;
1658
1674
  }
1659
1675
  .pv-ghost-input[data-style=h1] input {
1660
1676
  font-weight: 600;
@@ -1701,7 +1717,7 @@ div > .pv-input-text.pv-input-text[data-suffix="%"] {
1701
1717
  --range-fill-color: var(--color-background-brand-inverse, #36C5BA);
1702
1718
  --range-thumb-border-width: 3px;
1703
1719
  --range-thumb-size: 20px;
1704
- --range-track-color: var(--color-border, #E3E7EA);
1720
+ --range-track-color: #E3E7EA;
1705
1721
  --range-track-height: 6px;
1706
1722
  --value: 0%;
1707
1723
  -webkit-appearance: none;
@@ -1731,11 +1747,11 @@ div > .pv-input-text.pv-input-text[data-suffix="%"] {
1731
1747
  outline: none;
1732
1748
  }
1733
1749
  .pv-range:focus-visible::-webkit-slider-thumb {
1734
- outline: 2px solid var(--color-border-brand, #36C5BA);
1750
+ outline: 2px solid #36C5BA;
1735
1751
  outline-offset: 2px;
1736
1752
  }
1737
1753
  .pv-range:focus-visible::-moz-range-thumb {
1738
- outline: 2px solid var(--color-border-brand, #36C5BA);
1754
+ outline: 2px solid #36C5BA;
1739
1755
  outline-offset: 2px;
1740
1756
  }
1741
1757
 
@@ -1767,7 +1783,7 @@ div > .pv-input-text.pv-input-text[data-suffix="%"] {
1767
1783
  --range-dual-thumb-size: 1.25rem;
1768
1784
  --range-dual-track-height: 0.375rem;
1769
1785
  --range-fill-color: var(--color-background-brand-inverse, #36C5BA);
1770
- --range-track-color: var(--color-border, #E3E7EA);
1786
+ --range-track-color: #E3E7EA;
1771
1787
  align-items: center;
1772
1788
  cursor: pointer;
1773
1789
  display: flex;
@@ -1872,12 +1888,12 @@ div > .pv-input-text.pv-input-text[data-suffix="%"] {
1872
1888
  }
1873
1889
 
1874
1890
  .pv-range-dual-native:focus-visible::-webkit-slider-thumb {
1875
- outline: 2px solid var(--color-border-brand, #36C5BA);
1891
+ outline: 2px solid #36C5BA;
1876
1892
  outline-offset: 2px;
1877
1893
  }
1878
1894
 
1879
1895
  .pv-range-dual-native:focus-visible::-moz-range-thumb {
1880
- outline: 2px solid var(--color-border-brand, #36C5BA);
1896
+ outline: 2px solid #36C5BA;
1881
1897
  outline-offset: 2px;
1882
1898
  }
1883
1899
 
@@ -2205,7 +2221,7 @@ div > .pv-input-text.pv-input-text[data-suffix="%"] {
2205
2221
  }
2206
2222
  .pv-avatar-group > li, .pv-avatar-group[data-more]:after {
2207
2223
  margin-inline-start: -0.5rem;
2208
- outline: 2px solid var(--color-background-body, white);
2224
+ outline: 2px solid var(--color-background-body, #FFFFFF);
2209
2225
  }
2210
2226
  .pv-avatar-group[data-more]:after {
2211
2227
  content: "+" attr(data-more);
@@ -3506,7 +3522,7 @@ button.pv-tag-secondary:active {
3506
3522
  opacity: 1;
3507
3523
  pointer-events: auto;
3508
3524
  }
3509
- [class*=pv-tab-list] > :where(li) > a, [class*=pv-tab-list] > :where(li) > button, [class*=pv-tab-list] > :where(li) > .pv-tab-overflow button {
3525
+ [class*=pv-tab-list] > :where(li) > a, [class*=pv-tab-list] > :where(li) > button, [class*=pv-tab-list] > :where(li) > :is(.pv-tab-overflow, .pv-tab-add-menu) button {
3510
3526
  display: flex;
3511
3527
  align-items: center;
3512
3528
  gap: 0.25rem;
@@ -3521,15 +3537,15 @@ button.pv-tag-secondary:active {
3521
3537
  background-color: transparent;
3522
3538
  cursor: pointer;
3523
3539
  }
3524
- [class*=pv-tab-list] > :where(li) > a:hover, [class*=pv-tab-list] > :where(li) > a:focus-visible, [class*=pv-tab-list] > :where(li) > button:hover, [class*=pv-tab-list] > :where(li) > button:focus-visible, [class*=pv-tab-list] > :where(li) > .pv-tab-overflow button:hover, [class*=pv-tab-list] > :where(li) > .pv-tab-overflow button:focus-visible {
3540
+ [class*=pv-tab-list] > :where(li) > a:hover, [class*=pv-tab-list] > :where(li) > a:focus-visible, [class*=pv-tab-list] > :where(li) > button:hover, [class*=pv-tab-list] > :where(li) > button:focus-visible, [class*=pv-tab-list] > :where(li) > :is(.pv-tab-overflow, .pv-tab-add-menu) button:hover, [class*=pv-tab-list] > :where(li) > :is(.pv-tab-overflow, .pv-tab-add-menu) button:focus-visible {
3525
3541
  text-decoration: none;
3526
3542
  color: var(--tab-list-hover-text-color, #121313);
3527
3543
  background-color: var(--tab-list-hover-background-color, #E8F2F4);
3528
3544
  }
3529
- [class*=pv-tab-list] > :where(li) > a:active, [class*=pv-tab-list] > :where(li) > button:active, [class*=pv-tab-list] > :where(li) > .pv-tab-overflow button:active {
3545
+ [class*=pv-tab-list] > :where(li) > a:active, [class*=pv-tab-list] > :where(li) > button:active, [class*=pv-tab-list] > :where(li) > :is(.pv-tab-overflow, .pv-tab-add-menu) button:active {
3530
3546
  background-color: var(--tab-list-pressed-background-color, #C7D8DB);
3531
3547
  }
3532
- [class*=pv-tab-list] > :where(li) > a:disabled, [class*=pv-tab-list] > :where(li) > button:disabled, [class*=pv-tab-list] > :where(li) > .pv-tab-overflow button:disabled {
3548
+ [class*=pv-tab-list] > :where(li) > a:disabled, [class*=pv-tab-list] > :where(li) > button:disabled, [class*=pv-tab-list] > :where(li) > :is(.pv-tab-overflow, .pv-tab-add-menu) button:disabled {
3533
3549
  color: var(--tab-list-disabled-text-color, #7D898D);
3534
3550
  background-color: transparent;
3535
3551
  cursor: unset;
@@ -3555,7 +3571,7 @@ button.pv-tag-secondary:active {
3555
3571
  line-height: var(--tab-list-line-height, 1.33333333);
3556
3572
  background-color: transparent;
3557
3573
  }
3558
- [class*=pv-tab-list] > :where(li) > a:after, [class*=pv-tab-list] > :where(li) > button:after, [class*=pv-tab-list] > :where(li) > .pv-tab-input:after, [class*=pv-tab-list] > :where(li) > .pv-tab-overflow button:after {
3574
+ [class*=pv-tab-list] > :where(li) > a:after, [class*=pv-tab-list] > :where(li) > button:after, [class*=pv-tab-list] > :where(li) > .pv-tab-input:after, [class*=pv-tab-list] > :where(li) > :is(.pv-tab-overflow, .pv-tab-add-menu) button:after {
3559
3575
  content: "";
3560
3576
  display: block;
3561
3577
  height: var(--tab-list-indicator-size, 2px);
@@ -3566,7 +3582,7 @@ button.pv-tag-secondary:active {
3566
3582
  right: 0;
3567
3583
  background-color: var(--tab-list-indicator-inactive-color, #E3E7EA);
3568
3584
  }
3569
- [class*=pv-tab-list] > :where(li)[data-active] > a, [class*=pv-tab-list] > :where(li)[data-active] > button, [class*=pv-tab-list] > :where(li)[data-active] > .pv-tab-overflow button {
3585
+ [class*=pv-tab-list] > :where(li)[data-active] > a, [class*=pv-tab-list] > :where(li)[data-active] > button {
3570
3586
  color: var(--tab-list-active-text-color, #16696D);
3571
3587
  }
3572
3588
  [class*=pv-tab-list] > :where(li)[data-active] > .pv-tab-input .pv-ghost-input input {
@@ -3575,7 +3591,7 @@ button.pv-tag-secondary:active {
3575
3591
  [class*=pv-tab-list] > :where(li)[data-active] .pv-tab-options .pv-button-ghost {
3576
3592
  color: var(--tab-list-active-text-color, #16696D);
3577
3593
  }
3578
- [class*=pv-tab-list] > :where(li)[data-active] > a:after, [class*=pv-tab-list] > :where(li)[data-active] > button:after, [class*=pv-tab-list] > :where(li)[data-active] > .pv-tab-input:after, [class*=pv-tab-list] > :where(li)[data-active] > .pv-tab-overflow button:after {
3594
+ [class*=pv-tab-list] > :where(li)[data-active] > a:after, [class*=pv-tab-list] > :where(li)[data-active] > button:after, [class*=pv-tab-list] > :where(li)[data-active] > .pv-tab-input:after {
3579
3595
  border-radius: var(--tab-list-indicator-radius, 2px);
3580
3596
  background-color: var(--tab-list-indicator-color, #16696D);
3581
3597
  }
@@ -3606,13 +3622,36 @@ button.pv-tag-secondary:active {
3606
3622
  min-width: 0;
3607
3623
  }
3608
3624
 
3609
- .pv-tab-list-small > :where(li) > a, .pv-tab-list-small > :where(li) > button, .pv-tab-list-small > :where(li) > .pv-tab-overflow button {
3625
+ .pv-tab-list-small > :where(li) > a, .pv-tab-list-small > :where(li) > button, .pv-tab-list-small > :where(li) > :is(.pv-tab-overflow, .pv-tab-add-menu) button {
3610
3626
  padding: var(--tab-list-small-item-padding, 0.1875rem 0.5rem);
3611
3627
  }
3612
3628
  .pv-tab-list-small > :where(li) > .pv-tab-input {
3613
3629
  padding: 3px 8px;
3614
3630
  }
3615
3631
 
3632
+ ol.pv-tab-list {
3633
+ gap: 0.25rem;
3634
+ border-block-end: 0;
3635
+ }
3636
+ ol.pv-tab-list > li > a {
3637
+ border-radius: var(--stepper-button-radius, 8px);
3638
+ color: var(--stepper-button-inactive-text-color, #6E8081);
3639
+ }
3640
+ ol.pv-tab-list > li > a:hover, ol.pv-tab-list > li > a:focus-visible {
3641
+ color: var(--stepper-button-inactive-text-color, #6E8081);
3642
+ background-color: var(--stepper-button-inactive-background-color, #E8F2F4);
3643
+ }
3644
+ ol.pv-tab-list > li > a:active {
3645
+ background-color: var(--stepper-button-inactive-active-background-color, #C7D8DB);
3646
+ }
3647
+ ol.pv-tab-list > li > a:after {
3648
+ display: none;
3649
+ }
3650
+ ol.pv-tab-list > li[data-active] > a, ol.pv-tab-list > li[data-active] > a:hover, ol.pv-tab-list > li[data-active] > a:focus-visible, ol.pv-tab-list > li[data-active] > a:active {
3651
+ color: var(--stepper-button-active-text-color, #121313);
3652
+ background-color: var(--stepper-button-active-background-color, #F3F1EB);
3653
+ }
3654
+
3616
3655
  :where(ol.pv-tab-list) {
3617
3656
  counter-reset: item;
3618
3657
  }
@@ -3622,8 +3661,8 @@ button.pv-tag-secondary:active {
3622
3661
  display: inline-block;
3623
3662
  width: 1.5rem;
3624
3663
  height: 1.5rem;
3625
- color: var(--color-text-inverse, #FFFFFF);
3626
- background-color: var(--tab-list-counter-background-color, #ADB5C0);
3664
+ color: var(--tab-list-counter-color, #4B595C);
3665
+ background-color: var(--tab-list-counter-background-color, #E0E5E4);
3627
3666
  margin-inline-end: 0.5rem;
3628
3667
  text-align: center;
3629
3668
  border-radius: 50%;
@@ -3631,6 +3670,7 @@ button.pv-tag-secondary:active {
3631
3670
  line-height: 2;
3632
3671
  }
3633
3672
  :where(ol.pv-tab-list) [data-active] > a:before {
3673
+ color: var(--color-text-inverse, #FFFFFF);
3634
3674
  background-color: var(--tab-list-indicator-color, #16696D);
3635
3675
  }
3636
3676
  :where(ol.pv-tab-list) [data-complete] {
@@ -3756,6 +3796,13 @@ button.pv-tag-secondary:active {
3756
3796
  .pv-select-multiple {
3757
3797
  font-weight: 600;
3758
3798
  }
3799
+ .pv-select-multiple:not(:disabled, [data-invalid], [data-dropdown]):hover {
3800
+ color: var(--select-multiple-hover-color, #121313);
3801
+ background-color: var(--select-multiple-hover-background-color, #E8F2F4);
3802
+ }
3803
+ .pv-select-multiple:disabled {
3804
+ color: var(--select-multiple-disabled-color, #4B595C);
3805
+ }
3759
3806
  .pv-select-multiple[data-dropdown] {
3760
3807
  background-image: var(--select-multiple-open-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.151 15.848a1.2 1.2 0 0 0 1.698 0L12 10.698l5.151 5.15a1.2 1.2 0 1 0 1.698-1.697l-6-6a1.2 1.2 0 0 0-1.697 0l-6 6a1.2 1.2 0 0 0 0 1.697Z' fill='%234B595C'/%3E%3C/svg%3E"));
3761
3808
  background-color: #ECECEC;
@@ -3926,15 +3973,15 @@ pv-dropdown-auto-close.pv-dropdown > [class*=pv-button][data-dropdown] {
3926
3973
  }
3927
3974
 
3928
3975
  .pv-tree-item.pv-drop-indicator-top {
3929
- border-top: 1px solid var(--color-border, #121313);
3976
+ border-top: 1px solid #121313;
3930
3977
  }
3931
3978
 
3932
3979
  .pv-tree-item.pv-drop-indicator-bottom {
3933
- border-bottom: 1px solid var(--color-border, #121313);
3980
+ border-bottom: 1px solid #121313;
3934
3981
  }
3935
3982
 
3936
3983
  .pv-drop-indicator-parent {
3937
- border: 1px solid var(--color-border, #36C5BA);
3984
+ border: 1px solid #36C5BA;
3938
3985
  }
3939
3986
 
3940
3987
  .pv-tree-empty-accordion {
@@ -5557,7 +5604,7 @@ div.pv-drawer[open] {
5557
5604
  padding: 0.5rem;
5558
5605
  font-size: 16px;
5559
5606
  line-height: 1.5;
5560
- border: 2px solid var(--color-border, #DCDFE4);
5607
+ border: 2px solid #DCDFE4;
5561
5608
  border-radius: 2px;
5562
5609
  appearance: none;
5563
5610
  background-color: var(--color-background-body, #FFFFFF);
@@ -5739,7 +5786,7 @@ pv-data-grid.ag-theme-pv {
5739
5786
  appearance: none;
5740
5787
  width: 1rem !important;
5741
5788
  height: 1rem !important;
5742
- background-color: var(--color-background-body, white);
5789
+ background-color: var(--color-background-body, #FFFFFF);
5743
5790
  border: 2px solid var(--checkbox-border, #DCDFE4);
5744
5791
  flex-shrink: 0;
5745
5792
  border-radius: 2px !important;
@@ -6673,7 +6720,7 @@ pv-data-grid.ag-theme-pv {
6673
6720
  }
6674
6721
 
6675
6722
  .pv-chart-benchmark-chip:not([data-loading]):hover {
6676
- border-color: var(--color-border, #E3E7EA);
6723
+ border-color: #E3E7EA;
6677
6724
  background: var(--surface-card-hover, #ECE8E2);
6678
6725
  }
6679
6726
 
@@ -8076,7 +8123,7 @@ svg.pv-text-inherit {
8076
8123
  }
8077
8124
  }
8078
8125
  .pv-scrollbar-visible {
8079
- scrollbar-color: var(--color-border, #C1C1C1) transparent;
8126
+ scrollbar-color: #C1C1C1 transparent;
8080
8127
  scrollbar-gutter: stable;
8081
8128
  scrollbar-width: thin;
8082
8129
  }
@@ -8093,7 +8140,7 @@ svg.pv-text-inherit {
8093
8140
  }
8094
8141
  .pv-scrollbar-visible::-webkit-scrollbar-thumb {
8095
8142
  border-radius: 8px;
8096
- background-color: var(--color-border, #C1C1C1);
8143
+ background-color: #C1C1C1;
8097
8144
  }
8098
8145
  .pv-scrollbar-visible::-webkit-scrollbar-thumb:hover {
8099
8146
  background-color: var(--color-text-subdued, #7C7C7C);
@@ -8350,7 +8397,7 @@ svg.pv-text-inherit {
8350
8397
  }
8351
8398
 
8352
8399
  .select2-selection--multiple {
8353
- background-color: var(--color-background-body, white);
8400
+ background-color: var(--color-background-body, #FFFFFF);
8354
8401
  border: var(--select2-border, 1px solid #E3E7EA);
8355
8402
  border-radius: 4px;
8356
8403
  cursor: text;
@@ -8381,7 +8428,7 @@ svg.pv-text-inherit {
8381
8428
  }
8382
8429
 
8383
8430
  .select2-dropdown {
8384
- background-color: var(--color-background-body, white);
8431
+ background-color: var(--color-background-body, #FFFFFF);
8385
8432
  border-radius: 4px;
8386
8433
  padding-block: 0.5rem;
8387
8434
  display: block;
@@ -8406,7 +8453,7 @@ svg.pv-text-inherit {
8406
8453
  position: absolute;
8407
8454
  top: -33px;
8408
8455
  left: 0;
8409
- background-color: var(--color-background-body, white);
8456
+ background-color: var(--color-background-body, #FFFFFF);
8410
8457
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.151 15.848a1.2 1.2 0 0 0 1.698 0L12 10.698l5.151 5.15a1.2 1.2 0 1 0 1.698-1.697l-6-6a1.2 1.2 0 0 0-1.697 0l-6 6a1.2 1.2 0 0 0 0 1.697Z' fill='%2302363D'/%3E%3C/svg%3E");
8411
8458
  background-repeat: no-repeat;
8412
8459
  background-size: 1rem 1rem;