@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
package/_site/assets/css/pit-viper-a11y.css CHANGED
@@ -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: #13595D;
51
+ --color-text-tertiary: #4B595C;
52
+ --color-text-quaternary: #4B595C;
53
+ --color-border: #8F939E;
54
+ --color-border-brand: #13595D;
55
+ --color-background-body: #FFFFFF;
56
+ --color-background-accent: #F0F2F2;
57
+ --color-background-table-hover: #F0F2F2;
58
+ --color-background-brand: #13595D;
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.2857142857;
1643
1659
  }
1644
1660
  .pv-ghost-input input::placeholder, .pv-ghost-input input::-webkit-input-placeholder {
1645
- color: var(--color-text-quaternary, #4B595C);
1661
+ color: #4B595C;
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, #4B595C);
1673
+ color: #4B595C;
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.2857142857);
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, #8F939E);
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, #13595D);
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, #13595D);
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, #13595D);
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, #4B595C);
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, #4B595C);
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, #13595D);
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 #8F939E);
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;
package/_site/assets/css/pit-viper-consumer.css CHANGED
@@ -51,6 +51,21 @@
51
51
  interpolate-size: allow-keywords;
52
52
  }
53
53
 
54
+ :root {
55
+ --color-text-body: #1A3A39;
56
+ --color-text-brand: #147F85;
57
+ --color-text-tertiary: #768988;
58
+ --color-text-quaternary: #A3B0B0;
59
+ --color-border: #E8EBEB;
60
+ --color-border-brand: #147F85;
61
+ --color-background-body: #FFFFFF;
62
+ --color-background-accent: #F7F8F8;
63
+ --color-background-table-hover: #F7F8F8;
64
+ --color-background-brand: #147F85;
65
+ --color-background-highlight: #E4F8F6;
66
+ --color-background-disabled: #ECECEC;
67
+ }
68
+
54
69
  :where(html) {
55
70
  scroll-behavior: smooth;
56
71
  scroll-padding: 1rem;
@@ -894,14 +909,15 @@
894
909
  [class*=pv-segmented-control] button:hover:not(:disabled) {
895
910
  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.1);
896
911
  }
897
- [class*=pv-segmented-control] button[data-active] {
912
+ [class*=pv-segmented-control] button[data-active],
913
+ [class*=pv-segmented-control] button[data-active]:is(:hover, :focus-visible, :active):not(:disabled) {
898
914
  background-color: var(--segmented-control-button-selected-background, #FFFFFF);
899
915
  }
900
- [class*=pv-segmented-control] button:hover:not(:disabled),
916
+ [class*=pv-segmented-control] button:hover:not(:disabled, [data-active]),
901
917
  [class*=pv-segmented-control] button:focus-visible:not(:disabled) {
902
918
  background-color: var(--segmented-control-button-hover-background, #F8F7F1);
903
919
  }
904
- [class*=pv-segmented-control] button:active:not(:disabled) {
920
+ [class*=pv-segmented-control] button:active:not(:disabled, [data-active]) {
905
921
  background-color: var(--segmented-control-button-active-background, #C7D8DB);
906
922
  }
907
923
  [class*=pv-segmented-control] button:has(svg:is(:only-child)) {
@@ -1648,7 +1664,7 @@ div > .pv-input-text.pv-input-text[data-suffix="%"] {
1648
1664
  line-height: 1.5;
1649
1665
  }
1650
1666
  .pv-ghost-input input::placeholder, .pv-ghost-input input::-webkit-input-placeholder {
1651
- color: var(--color-text-quaternary, #A3B0B0);
1667
+ color: #A3B0B0;
1652
1668
  }
1653
1669
  .pv-ghost-input button {
1654
1670
  opacity: 0;
@@ -1660,7 +1676,7 @@ div > .pv-input-text.pv-input-text[data-suffix="%"] {
1660
1676
  outline: 0;
1661
1677
  }
1662
1678
  .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 {
1663
- color: var(--color-text-tertiary, #768988);
1679
+ color: #768988;
1664
1680
  }
1665
1681
  .pv-ghost-input[data-style=h1] input {
1666
1682
  font-weight: 600;
@@ -1707,7 +1723,7 @@ div > .pv-input-text.pv-input-text[data-suffix="%"] {
1707
1723
  --range-fill-color: var(--color-background-brand-inverse, #36C5BA);
1708
1724
  --range-thumb-border-width: 3px;
1709
1725
  --range-thumb-size: 20px;
1710
- --range-track-color: var(--color-border, #E3E7EA);
1726
+ --range-track-color: #E3E7EA;
1711
1727
  --range-track-height: 6px;
1712
1728
  --value: 0%;
1713
1729
  -webkit-appearance: none;
@@ -1737,11 +1753,11 @@ div > .pv-input-text.pv-input-text[data-suffix="%"] {
1737
1753
  outline: none;
1738
1754
  }
1739
1755
  .pv-range:focus-visible::-webkit-slider-thumb {
1740
- outline: 2px solid var(--color-border-brand, #36C5BA);
1756
+ outline: 2px solid #36C5BA;
1741
1757
  outline-offset: 2px;
1742
1758
  }
1743
1759
  .pv-range:focus-visible::-moz-range-thumb {
1744
- outline: 2px solid var(--color-border-brand, #36C5BA);
1760
+ outline: 2px solid #36C5BA;
1745
1761
  outline-offset: 2px;
1746
1762
  }
1747
1763
 
@@ -1773,7 +1789,7 @@ div > .pv-input-text.pv-input-text[data-suffix="%"] {
1773
1789
  --range-dual-thumb-size: 1.25rem;
1774
1790
  --range-dual-track-height: 0.375rem;
1775
1791
  --range-fill-color: var(--color-background-brand-inverse, #36C5BA);
1776
- --range-track-color: var(--color-border, #E3E7EA);
1792
+ --range-track-color: #E3E7EA;
1777
1793
  align-items: center;
1778
1794
  cursor: pointer;
1779
1795
  display: flex;
@@ -1878,12 +1894,12 @@ div > .pv-input-text.pv-input-text[data-suffix="%"] {
1878
1894
  }
1879
1895
 
1880
1896
  .pv-range-dual-native:focus-visible::-webkit-slider-thumb {
1881
- outline: 2px solid var(--color-border-brand, #36C5BA);
1897
+ outline: 2px solid #36C5BA;
1882
1898
  outline-offset: 2px;
1883
1899
  }
1884
1900
 
1885
1901
  .pv-range-dual-native:focus-visible::-moz-range-thumb {
1886
- outline: 2px solid var(--color-border-brand, #36C5BA);
1902
+ outline: 2px solid #36C5BA;
1887
1903
  outline-offset: 2px;
1888
1904
  }
1889
1905
 
@@ -2211,7 +2227,7 @@ div > .pv-input-text.pv-input-text[data-suffix="%"] {
2211
2227
  }
2212
2228
  .pv-avatar-group > li, .pv-avatar-group[data-more]:after {
2213
2229
  margin-inline-start: -0.5rem;
2214
- outline: 2px solid var(--color-background-body, white);
2230
+ outline: 2px solid var(--color-background-body, #FFFFFF);
2215
2231
  }
2216
2232
  .pv-avatar-group[data-more]:after {
2217
2233
  content: "+" attr(data-more);
@@ -3512,7 +3528,7 @@ button.pv-tag-secondary:active {
3512
3528
  opacity: 1;
3513
3529
  pointer-events: auto;
3514
3530
  }
3515
- [class*=pv-tab-list] > :where(li) > a, [class*=pv-tab-list] > :where(li) > button, [class*=pv-tab-list] > :where(li) > .pv-tab-overflow button {
3531
+ [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 {
3516
3532
  display: flex;
3517
3533
  align-items: center;
3518
3534
  gap: 0.25rem;
@@ -3527,15 +3543,15 @@ button.pv-tag-secondary:active {
3527
3543
  background-color: transparent;
3528
3544
  cursor: pointer;
3529
3545
  }
3530
- [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 {
3546
+ [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 {
3531
3547
  text-decoration: none;
3532
3548
  color: var(--tab-list-hover-text-color, #1A3A39);
3533
3549
  background-color: var(--tab-list-hover-background-color, #F8F7F1);
3534
3550
  }
3535
- [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 {
3551
+ [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 {
3536
3552
  background-color: var(--tab-list-pressed-background-color, #C7D8DB);
3537
3553
  }
3538
- [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 {
3554
+ [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 {
3539
3555
  color: var(--tab-list-disabled-text-color, #A3B0B0);
3540
3556
  background-color: transparent;
3541
3557
  cursor: unset;
@@ -3561,7 +3577,7 @@ button.pv-tag-secondary:active {
3561
3577
  line-height: var(--tab-list-line-height, 1.5);
3562
3578
  background-color: transparent;
3563
3579
  }
3564
- [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 {
3580
+ [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 {
3565
3581
  content: "";
3566
3582
  display: block;
3567
3583
  height: var(--tab-list-indicator-size, 2px);
@@ -3572,7 +3588,7 @@ button.pv-tag-secondary:active {
3572
3588
  right: 0;
3573
3589
  background-color: var(--tab-list-indicator-inactive-color, #E8EBEB);
3574
3590
  }
3575
- [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 {
3591
+ [class*=pv-tab-list] > :where(li)[data-active] > a, [class*=pv-tab-list] > :where(li)[data-active] > button {
3576
3592
  color: var(--tab-list-active-text-color, #147F85);
3577
3593
  }
3578
3594
  [class*=pv-tab-list] > :where(li)[data-active] > .pv-tab-input .pv-ghost-input input {
@@ -3581,7 +3597,7 @@ button.pv-tag-secondary:active {
3581
3597
  [class*=pv-tab-list] > :where(li)[data-active] .pv-tab-options .pv-button-ghost {
3582
3598
  color: var(--tab-list-active-text-color, #147F85);
3583
3599
  }
3584
- [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 {
3600
+ [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 {
3585
3601
  border-radius: var(--tab-list-indicator-radius, 2px);
3586
3602
  background-color: var(--tab-list-indicator-color, #147F85);
3587
3603
  }
@@ -3612,13 +3628,36 @@ button.pv-tag-secondary:active {
3612
3628
  min-width: 0;
3613
3629
  }
3614
3630
 
3615
- .pv-tab-list-small > :where(li) > a, .pv-tab-list-small > :where(li) > button, .pv-tab-list-small > :where(li) > .pv-tab-overflow button {
3631
+ .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 {
3616
3632
  padding: var(--tab-list-small-item-padding, 0.1875rem 0.5rem);
3617
3633
  }
3618
3634
  .pv-tab-list-small > :where(li) > .pv-tab-input {
3619
3635
  padding: 3px 8px;
3620
3636
  }
3621
3637
 
3638
+ ol.pv-tab-list {
3639
+ gap: 0.25rem;
3640
+ border-block-end: 0;
3641
+ }
3642
+ ol.pv-tab-list > li > a {
3643
+ border-radius: var(--stepper-button-radius, 8px);
3644
+ color: var(--stepper-button-inactive-text-color, #768988);
3645
+ }
3646
+ ol.pv-tab-list > li > a:hover, ol.pv-tab-list > li > a:focus-visible {
3647
+ color: var(--stepper-button-inactive-text-color, #768988);
3648
+ background-color: var(--stepper-button-inactive-background-color, #F8F7F1);
3649
+ }
3650
+ ol.pv-tab-list > li > a:active {
3651
+ background-color: var(--stepper-button-inactive-active-background-color, #C7D8DB);
3652
+ }
3653
+ ol.pv-tab-list > li > a:after {
3654
+ display: none;
3655
+ }
3656
+ 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 {
3657
+ color: var(--stepper-button-active-text-color, #1A3A39);
3658
+ background-color: var(--stepper-button-active-background-color, #F3F1EB);
3659
+ }
3660
+
3622
3661
  :where(ol.pv-tab-list) {
3623
3662
  counter-reset: item;
3624
3663
  }
@@ -3628,8 +3667,8 @@ button.pv-tag-secondary:active {
3628
3667
  display: inline-block;
3629
3668
  width: 1.5rem;
3630
3669
  height: 1.5rem;
3631
- color: var(--color-text-inverse, #FFFFFF);
3632
- background-color: var(--tab-list-counter-background-color, #ADB5C0);
3670
+ color: var(--tab-list-counter-color, #486161);
3671
+ background-color: var(--tab-list-counter-background-color, #E0E5E4);
3633
3672
  margin-inline-end: 0.5rem;
3634
3673
  text-align: center;
3635
3674
  border-radius: 50%;
@@ -3637,6 +3676,7 @@ button.pv-tag-secondary:active {
3637
3676
  line-height: 2;
3638
3677
  }
3639
3678
  :where(ol.pv-tab-list) [data-active] > a:before {
3679
+ color: var(--color-text-inverse, #FFFFFF);
3640
3680
  background-color: var(--tab-list-indicator-color, #147F85);
3641
3681
  }
3642
3682
  :where(ol.pv-tab-list) [data-complete] {
@@ -3762,6 +3802,13 @@ button.pv-tag-secondary:active {
3762
3802
  .pv-select-multiple {
3763
3803
  font-weight: 600;
3764
3804
  }
3805
+ .pv-select-multiple:not(:disabled, [data-invalid], [data-dropdown]):hover {
3806
+ color: var(--select-multiple-hover-color, #1A3A39);
3807
+ background-color: var(--select-multiple-hover-background-color, #E8EBEB);
3808
+ }
3809
+ .pv-select-multiple:disabled {
3810
+ color: var(--select-multiple-disabled-color, #486161);
3811
+ }
3765
3812
  .pv-select-multiple[data-dropdown] {
3766
3813
  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"));
3767
3814
  background-color: #ECECEC;
@@ -3932,15 +3979,15 @@ pv-dropdown-auto-close.pv-dropdown > [class*=pv-button][data-dropdown] {
3932
3979
  }
3933
3980
 
3934
3981
  .pv-tree-item.pv-drop-indicator-top {
3935
- border-top: 1px solid var(--color-border, #1A3A39);
3982
+ border-top: 1px solid #1A3A39;
3936
3983
  }
3937
3984
 
3938
3985
  .pv-tree-item.pv-drop-indicator-bottom {
3939
- border-bottom: 1px solid var(--color-border, #1A3A39);
3986
+ border-bottom: 1px solid #1A3A39;
3940
3987
  }
3941
3988
 
3942
3989
  .pv-drop-indicator-parent {
3943
- border: 1px solid var(--color-border, #36C5BA);
3990
+ border: 1px solid #36C5BA;
3944
3991
  }
3945
3992
 
3946
3993
  .pv-tree-empty-accordion {
@@ -5541,7 +5588,7 @@ div.pv-drawer[open] {
5541
5588
  padding: 0.5rem;
5542
5589
  font-size: 16px;
5543
5590
  line-height: 1.5;
5544
- border: 2px solid var(--color-border, #DCDFE4);
5591
+ border: 2px solid #DCDFE4;
5545
5592
  border-radius: 2px;
5546
5593
  appearance: none;
5547
5594
  background-color: var(--color-background-body, #FFFFFF);
@@ -5723,7 +5770,7 @@ pv-data-grid.ag-theme-pv {
5723
5770
  appearance: none;
5724
5771
  width: 1rem !important;
5725
5772
  height: 1rem !important;
5726
- background-color: var(--color-background-body, white);
5773
+ background-color: var(--color-background-body, #FFFFFF);
5727
5774
  border: 2px solid var(--checkbox-border, #DCDFE4);
5728
5775
  flex-shrink: 0;
5729
5776
  border-radius: 2px !important;
@@ -7552,7 +7599,7 @@ svg.pv-text-inherit {
7552
7599
  }
7553
7600
  }
7554
7601
  .pv-scrollbar-visible {
7555
- scrollbar-color: var(--color-border, #C1C1C1) transparent;
7602
+ scrollbar-color: #C1C1C1 transparent;
7556
7603
  scrollbar-gutter: stable;
7557
7604
  scrollbar-width: thin;
7558
7605
  }
@@ -7569,7 +7616,7 @@ svg.pv-text-inherit {
7569
7616
  }
7570
7617
  .pv-scrollbar-visible::-webkit-scrollbar-thumb {
7571
7618
  border-radius: 8px;
7572
- background-color: var(--color-border, #C1C1C1);
7619
+ background-color: #C1C1C1;
7573
7620
  }
7574
7621
  .pv-scrollbar-visible::-webkit-scrollbar-thumb:hover {
7575
7622
  background-color: var(--color-text-subdued, #7C7C7C);
@@ -7826,7 +7873,7 @@ svg.pv-text-inherit {
7826
7873
  }
7827
7874
 
7828
7875
  .select2-selection--multiple {
7829
- background-color: var(--color-background-body, white);
7876
+ background-color: var(--color-background-body, #FFFFFF);
7830
7877
  border: var(--select2-border, 1px solid #E8EBEB);
7831
7878
  border-radius: 6px;
7832
7879
  cursor: text;
@@ -7857,7 +7904,7 @@ svg.pv-text-inherit {
7857
7904
  }
7858
7905
 
7859
7906
  .select2-dropdown {
7860
- background-color: var(--color-background-body, white);
7907
+ background-color: var(--color-background-body, #FFFFFF);
7861
7908
  border-radius: 6px;
7862
7909
  padding-block: 0.5rem;
7863
7910
  display: block;
@@ -7882,7 +7929,7 @@ svg.pv-text-inherit {
7882
7929
  position: absolute;
7883
7930
  top: -33px;
7884
7931
  left: 0;
7885
- background-color: var(--color-background-body, white);
7932
+ background-color: var(--color-background-body, #FFFFFF);
7886
7933
  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");
7887
7934
  background-repeat: no-repeat;
7888
7935
  background-size: 1rem 1rem;