@turquoisehealth/pit-viper 2.244.2 → 2.244.4

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 (48) hide show
  1. package/_site/assets/css/pit-viper-a11y.css +415 -21
  2. package/_site/assets/css/pit-viper-consumer.css +65 -9
  3. package/_site/assets/css/pit-viper-v2-scoped.css +65 -9
  4. package/_site/assets/css/pit-viper-v2.css +65 -9
  5. package/_site/assets/css/pit-viper.css +65 -9
  6. package/_src/assets/sprite-v2.svg +1 -1
  7. package/_src/assets/sprite.svg +1 -1
  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-distribution-bar-stats.html +1 -1
  12. package/pv-components/dist/stats/web/pv-ghost-input-stats.html +1 -1
  13. package/pv-components/dist/stats/web/pv-stepper-stats.html +1 -1
  14. package/pv-components/dist/stats/web/pv-tabs-stats.html +1 -1
  15. package/pv-components/dist/vue/ai/components/base/PvDistributionBar/PvDistributionBar.vue.d.ts +4 -5
  16. package/pv-components/dist/vue/ai/components/base/PvDistributionBar/types.d.ts +8 -0
  17. package/pv-components/dist/vue/ai/components/base/PvGhostInput/PvGhostInput.vue.d.ts +4 -0
  18. package/pv-components/dist/vue/ai/components/base/PvStepper/PvStepper.vue.d.ts +2 -2
  19. package/pv-components/dist/vue/ai/components/base/PvStepper/types.d.ts +2 -5
  20. package/pv-components/dist/vue/ai/components/base/PvTabs/PvTabs.vue.d.ts +4 -0
  21. package/pv-components/dist/vue/ai/components/base/PvTabs/types.d.ts +10 -2
  22. package/pv-components/dist/vue/ai/components/base/index.d.ts +1 -0
  23. package/pv-components/dist/vue/base/components/base/PvDistributionBar/PvDistributionBar.vue.d.ts +4 -5
  24. package/pv-components/dist/vue/base/components/base/PvDistributionBar/types.d.ts +8 -0
  25. package/pv-components/dist/vue/base/components/base/PvGhostInput/PvGhostInput.vue.d.ts +4 -0
  26. package/pv-components/dist/vue/base/components/base/PvStepper/PvStepper.vue.d.ts +2 -2
  27. package/pv-components/dist/vue/base/components/base/PvStepper/types.d.ts +2 -5
  28. package/pv-components/dist/vue/base/components/base/PvTabs/PvTabs.vue.d.ts +4 -0
  29. package/pv-components/dist/vue/base/components/base/PvTabs/types.d.ts +10 -2
  30. package/pv-components/dist/vue/base/components/base/index.d.ts +1 -0
  31. package/pv-components/dist/vue/base/pv-components-base.mjs +1453 -1375
  32. package/pv-components/dist/vue/base/pv-components-base.mjs.map +1 -1
  33. package/pv-components/dist/vue/visualizations/components/base/PvDistributionBar/PvDistributionBar.vue.d.ts +4 -5
  34. package/pv-components/dist/vue/visualizations/components/base/PvDistributionBar/types.d.ts +8 -0
  35. package/pv-components/dist/vue/visualizations/components/base/PvGhostInput/PvGhostInput.vue.d.ts +4 -0
  36. package/pv-components/dist/vue/visualizations/components/base/PvStepper/PvStepper.vue.d.ts +2 -2
  37. package/pv-components/dist/vue/visualizations/components/base/PvStepper/types.d.ts +2 -5
  38. package/pv-components/dist/vue/visualizations/components/base/PvTabs/PvTabs.vue.d.ts +4 -0
  39. package/pv-components/dist/vue/visualizations/components/base/PvTabs/types.d.ts +10 -2
  40. package/pv-components/dist/vue/visualizations/components/base/index.d.ts +1 -0
  41. package/pv-components/dist/vue/visualizations/pv-components-visualizations.mjs +9 -6
  42. package/pv-components/dist/vue/visualizations/pv-components-visualizations.mjs.map +1 -1
  43. package/pv-components/dist/web/components/pv-distribution-bar/pv-distribution-bar.js +459 -446
  44. package/pv-components/dist/web/components/pv-ghost-input/pv-ghost-input.js +7 -4
  45. package/pv-components/dist/web/components/pv-stepper/pv-stepper.js +424 -420
  46. package/pv-components/dist/web/components/pv-tabs/pv-tabs.js +2204 -555
  47. package/pv-components/dist/web/pv-components.iife.js +13 -13
  48. package/pv-components/dist/web/pv-components.iife.js.map +1 -1
package/_site/assets/css/pit-viper-v2-scoped.css CHANGED
@@ -1450,6 +1450,14 @@
1450
1450
  .pv-v2 .pv-ghost-input {
1451
1451
  display: flex;
1452
1452
  align-items: center;
1453
+ border: 1px solid transparent;
1454
+ border-radius: var(--ghost-input-radius, 4px);
1455
+ }
1456
+ .pv-v2 .pv-ghost-input:focus-within {
1457
+ border-color: var(--ghost-input-focus-border-color, #36C5BA);
1458
+ }
1459
+ .pv-v2 .pv-ghost-input[data-invalid] {
1460
+ border-color: var(--ghost-input-error-border-color, #FF471A);
1453
1461
  }
1454
1462
  .pv-v2 .pv-ghost-input input {
1455
1463
  padding: 0.25rem 0.125rem;
@@ -3017,13 +3025,35 @@
3017
3025
  padding-block-start: var(--tab-list-padding-top, 0);
3018
3026
  border-block-end: var(--tab-list-border-width, 2px) solid var(--tab-list-border-color, #E3E7EA);
3019
3027
  }
3020
- .pv-v2 [class*=pv-tab-list] :where(li) {
3028
+ .pv-v2 [class*=pv-tab-list] > :where(li) {
3021
3029
  position: relative;
3030
+ display: flex;
3031
+ align-items: center;
3022
3032
  white-space: nowrap;
3023
3033
  transition-duration: 0.125s;
3024
3034
  transition-property: color;
3025
3035
  }
3026
- .pv-v2 [class*=pv-tab-list] :where(li) a, .pv-v2 [class*=pv-tab-list] :where(li) button {
3036
+ .pv-v2 [class*=pv-tab-list] > :where(li) .pv-tab-options {
3037
+ position: absolute;
3038
+ right: 0;
3039
+ top: 50%;
3040
+ transform: translateY(-50%);
3041
+ background-color: var(--tab-list-hover-background-color, #E8F2F4);
3042
+ opacity: 0;
3043
+ pointer-events: none;
3044
+ transition-duration: 0.125s;
3045
+ transition-property: opacity;
3046
+ }
3047
+ .pv-v2 [class*=pv-tab-list] > :where(li) .pv-tab-options .pv-button-ghost {
3048
+ color: var(--tab-list-hover-text-color, #121313);
3049
+ }
3050
+ .pv-v2 [class*=pv-tab-list] > :where(li):hover .pv-tab-options,
3051
+ .pv-v2 [class*=pv-tab-list] > :where(li) .pv-tab-options:focus-within,
3052
+ .pv-v2 [class*=pv-tab-list] > :where(li) .pv-tab-options:has(.pv-floating:popover-open) {
3053
+ opacity: 1;
3054
+ pointer-events: auto;
3055
+ }
3056
+ .pv-v2 [class*=pv-tab-list] > :where(li) > a, .pv-v2 [class*=pv-tab-list] > :where(li) > button {
3027
3057
  display: flex;
3028
3058
  align-items: center;
3029
3059
  gap: 0.25rem;
@@ -3038,15 +3068,32 @@
3038
3068
  background-color: transparent;
3039
3069
  cursor: pointer;
3040
3070
  }
3041
- .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 {
3071
+ .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 {
3042
3072
  text-decoration: none;
3043
3073
  color: var(--tab-list-hover-text-color, #121313);
3044
3074
  background-color: var(--tab-list-hover-background-color, #E8F2F4);
3045
3075
  }
3046
- .pv-v2 [class*=pv-tab-list] :where(li) a:active, .pv-v2 [class*=pv-tab-list] :where(li) button:active {
3076
+ .pv-v2 [class*=pv-tab-list] > :where(li) > a:active, .pv-v2 [class*=pv-tab-list] > :where(li) > button:active {
3047
3077
  background-color: var(--tab-list-pressed-background-color, #C7D8DB);
3048
3078
  }
3049
- .pv-v2 [class*=pv-tab-list] :where(li) a:after, .pv-v2 [class*=pv-tab-list] :where(li) button:after {
3079
+ .pv-v2 [class*=pv-tab-list] > :where(li) > .pv-tab-input {
3080
+ align-items: center;
3081
+ padding: 7px 8px;
3082
+ border-radius: var(--tab-list-item-radius, 4px) var(--tab-list-item-radius, 4px) 0 0;
3083
+ background-color: var(--tab-list-hover-background-color, #E8F2F4);
3084
+ }
3085
+ .pv-v2 [class*=pv-tab-list] > :where(li) > .pv-tab-input .pv-ghost-input {
3086
+ height: 16px;
3087
+ padding: 3px 2px;
3088
+ }
3089
+ .pv-v2 [class*=pv-tab-list] > :where(li) > .pv-tab-input .pv-ghost-input input {
3090
+ color: var(--tab-list-text-color, #6E8081);
3091
+ font-weight: var(--tab-list-font-weight, 500);
3092
+ font-size: var(--tab-list-font-size, 0.75rem);
3093
+ line-height: var(--tab-list-line-height, 1.33333333);
3094
+ background-color: transparent;
3095
+ }
3096
+ .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 {
3050
3097
  content: "";
3051
3098
  display: block;
3052
3099
  height: var(--tab-list-indicator-size, 2px);
@@ -3057,20 +3104,29 @@
3057
3104
  right: 0;
3058
3105
  background-color: var(--tab-list-indicator-inactive-color, #E3E7EA);
3059
3106
  }
3060
- .pv-v2 [class*=pv-tab-list] :where(li)[data-active] a, .pv-v2 [class*=pv-tab-list] :where(li)[data-active] button {
3107
+ .pv-v2 [class*=pv-tab-list] > :where(li)[data-active] > a, .pv-v2 [class*=pv-tab-list] > :where(li)[data-active] > button {
3061
3108
  color: var(--tab-list-active-text-color, #16696D);
3062
3109
  }
3063
- .pv-v2 [class*=pv-tab-list] :where(li)[data-active] a:after, .pv-v2 [class*=pv-tab-list] :where(li)[data-active] button:after {
3110
+ .pv-v2 [class*=pv-tab-list] > :where(li)[data-active] > .pv-tab-input .pv-ghost-input input {
3111
+ color: var(--tab-list-active-text-color, #16696D);
3112
+ }
3113
+ .pv-v2 [class*=pv-tab-list] > :where(li)[data-active] .pv-tab-options .pv-button-ghost {
3114
+ color: var(--tab-list-active-text-color, #16696D);
3115
+ }
3116
+ .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 {
3064
3117
  border-radius: var(--tab-list-indicator-radius, 2px);
3065
3118
  background-color: var(--tab-list-indicator-color, #16696D);
3066
3119
  }
3067
- .pv-v2 .pv-tab-list-small :where(li) a, .pv-v2 .pv-tab-list-small :where(li) button {
3120
+ .pv-v2 .pv-tab-list-small > :where(li) > a, .pv-v2 .pv-tab-list-small > :where(li) > button {
3068
3121
  padding: var(--tab-list-small-item-padding, 0.1875rem 0.5rem);
3069
3122
  }
3123
+ .pv-v2 .pv-tab-list-small > :where(li) > .pv-tab-input {
3124
+ padding: 3px 8px;
3125
+ }
3070
3126
  .pv-v2 :where(ol.pv-tab-list) {
3071
3127
  counter-reset: item;
3072
3128
  }
3073
- .pv-v2 :where(ol.pv-tab-list) :where(li) > a:before {
3129
+ .pv-v2 :where(ol.pv-tab-list) > :where(li) > a:before {
3074
3130
  counter-increment: item;
3075
3131
  content: counter(item);
3076
3132
  display: inline-block;
package/_site/assets/css/pit-viper-v2.css CHANGED
@@ -1576,6 +1576,14 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
1576
1576
  .pv-ghost-input {
1577
1577
  display: flex;
1578
1578
  align-items: center;
1579
+ border: 1px solid transparent;
1580
+ border-radius: var(--ghost-input-radius, 4px);
1581
+ }
1582
+ .pv-ghost-input:focus-within {
1583
+ border-color: var(--ghost-input-focus-border-color, #36C5BA);
1584
+ }
1585
+ .pv-ghost-input[data-invalid] {
1586
+ border-color: var(--ghost-input-error-border-color, #FF471A);
1579
1587
  }
1580
1588
  .pv-ghost-input input {
1581
1589
  padding: 0.25rem 0.125rem;
@@ -3314,13 +3322,35 @@ button.pv-tag-secondary:active {
3314
3322
  padding-block-start: var(--tab-list-padding-top, 0);
3315
3323
  border-block-end: var(--tab-list-border-width, 2px) solid var(--tab-list-border-color, #E3E7EA);
3316
3324
  }
3317
- [class*=pv-tab-list] :where(li) {
3325
+ [class*=pv-tab-list] > :where(li) {
3318
3326
  position: relative;
3327
+ display: flex;
3328
+ align-items: center;
3319
3329
  white-space: nowrap;
3320
3330
  transition-duration: 0.125s;
3321
3331
  transition-property: color;
3322
3332
  }
3323
- [class*=pv-tab-list] :where(li) a, [class*=pv-tab-list] :where(li) button {
3333
+ [class*=pv-tab-list] > :where(li) .pv-tab-options {
3334
+ position: absolute;
3335
+ right: 0;
3336
+ top: 50%;
3337
+ transform: translateY(-50%);
3338
+ background-color: var(--tab-list-hover-background-color, #E8F2F4);
3339
+ opacity: 0;
3340
+ pointer-events: none;
3341
+ transition-duration: 0.125s;
3342
+ transition-property: opacity;
3343
+ }
3344
+ [class*=pv-tab-list] > :where(li) .pv-tab-options .pv-button-ghost {
3345
+ color: var(--tab-list-hover-text-color, #121313);
3346
+ }
3347
+ [class*=pv-tab-list] > :where(li):hover .pv-tab-options,
3348
+ [class*=pv-tab-list] > :where(li) .pv-tab-options:focus-within,
3349
+ [class*=pv-tab-list] > :where(li) .pv-tab-options:has(.pv-floating:popover-open) {
3350
+ opacity: 1;
3351
+ pointer-events: auto;
3352
+ }
3353
+ [class*=pv-tab-list] > :where(li) > a, [class*=pv-tab-list] > :where(li) > button {
3324
3354
  display: flex;
3325
3355
  align-items: center;
3326
3356
  gap: 0.25rem;
@@ -3335,15 +3365,32 @@ button.pv-tag-secondary:active {
3335
3365
  background-color: transparent;
3336
3366
  cursor: pointer;
3337
3367
  }
3338
- [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 {
3368
+ [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 {
3339
3369
  text-decoration: none;
3340
3370
  color: var(--tab-list-hover-text-color, #121313);
3341
3371
  background-color: var(--tab-list-hover-background-color, #E8F2F4);
3342
3372
  }
3343
- [class*=pv-tab-list] :where(li) a:active, [class*=pv-tab-list] :where(li) button:active {
3373
+ [class*=pv-tab-list] > :where(li) > a:active, [class*=pv-tab-list] > :where(li) > button:active {
3344
3374
  background-color: var(--tab-list-pressed-background-color, #C7D8DB);
3345
3375
  }
3346
- [class*=pv-tab-list] :where(li) a:after, [class*=pv-tab-list] :where(li) button:after {
3376
+ [class*=pv-tab-list] > :where(li) > .pv-tab-input {
3377
+ align-items: center;
3378
+ padding: 7px 8px;
3379
+ border-radius: var(--tab-list-item-radius, 4px) var(--tab-list-item-radius, 4px) 0 0;
3380
+ background-color: var(--tab-list-hover-background-color, #E8F2F4);
3381
+ }
3382
+ [class*=pv-tab-list] > :where(li) > .pv-tab-input .pv-ghost-input {
3383
+ height: 16px;
3384
+ padding: 3px 2px;
3385
+ }
3386
+ [class*=pv-tab-list] > :where(li) > .pv-tab-input .pv-ghost-input input {
3387
+ color: var(--tab-list-text-color, #6E8081);
3388
+ font-weight: var(--tab-list-font-weight, 500);
3389
+ font-size: var(--tab-list-font-size, 0.75rem);
3390
+ line-height: var(--tab-list-line-height, 1.33333333);
3391
+ background-color: transparent;
3392
+ }
3393
+ [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 {
3347
3394
  content: "";
3348
3395
  display: block;
3349
3396
  height: var(--tab-list-indicator-size, 2px);
@@ -3354,22 +3401,31 @@ button.pv-tag-secondary:active {
3354
3401
  right: 0;
3355
3402
  background-color: var(--tab-list-indicator-inactive-color, #E3E7EA);
3356
3403
  }
3357
- [class*=pv-tab-list] :where(li)[data-active] a, [class*=pv-tab-list] :where(li)[data-active] button {
3404
+ [class*=pv-tab-list] > :where(li)[data-active] > a, [class*=pv-tab-list] > :where(li)[data-active] > button {
3358
3405
  color: var(--tab-list-active-text-color, #16696D);
3359
3406
  }
3360
- [class*=pv-tab-list] :where(li)[data-active] a:after, [class*=pv-tab-list] :where(li)[data-active] button:after {
3407
+ [class*=pv-tab-list] > :where(li)[data-active] > .pv-tab-input .pv-ghost-input input {
3408
+ color: var(--tab-list-active-text-color, #16696D);
3409
+ }
3410
+ [class*=pv-tab-list] > :where(li)[data-active] .pv-tab-options .pv-button-ghost {
3411
+ color: var(--tab-list-active-text-color, #16696D);
3412
+ }
3413
+ [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 {
3361
3414
  border-radius: var(--tab-list-indicator-radius, 2px);
3362
3415
  background-color: var(--tab-list-indicator-color, #16696D);
3363
3416
  }
3364
3417
 
3365
- .pv-tab-list-small :where(li) a, .pv-tab-list-small :where(li) button {
3418
+ .pv-tab-list-small > :where(li) > a, .pv-tab-list-small > :where(li) > button {
3366
3419
  padding: var(--tab-list-small-item-padding, 0.1875rem 0.5rem);
3367
3420
  }
3421
+ .pv-tab-list-small > :where(li) > .pv-tab-input {
3422
+ padding: 3px 8px;
3423
+ }
3368
3424
 
3369
3425
  :where(ol.pv-tab-list) {
3370
3426
  counter-reset: item;
3371
3427
  }
3372
- :where(ol.pv-tab-list) :where(li) > a:before {
3428
+ :where(ol.pv-tab-list) > :where(li) > a:before {
3373
3429
  counter-increment: item;
3374
3430
  content: counter(item);
3375
3431
  display: inline-block;
package/_site/assets/css/pit-viper.css CHANGED
@@ -1581,6 +1581,14 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
1581
1581
  .pv-ghost-input {
1582
1582
  display: flex;
1583
1583
  align-items: center;
1584
+ border: 1px solid transparent;
1585
+ border-radius: var(--ghost-input-radius, 0.25rem);
1586
+ }
1587
+ .pv-ghost-input:focus-within {
1588
+ border-color: var(--ghost-input-focus-border-color, #176F6F);
1589
+ }
1590
+ .pv-ghost-input[data-invalid] {
1591
+ border-color: var(--ghost-input-error-border-color, #A2191F);
1584
1592
  }
1585
1593
  .pv-ghost-input input {
1586
1594
  padding: 0.25rem 0.125rem;
@@ -3319,13 +3327,35 @@ button.pv-tag-secondary:active {
3319
3327
  padding-block-start: var(--tab-list-padding-top, 1.5rem);
3320
3328
  border-block-end: var(--tab-list-border-width, 1px) solid var(--tab-list-border-color, #DCDFE4);
3321
3329
  }
3322
- [class*=pv-tab-list] :where(li) {
3330
+ [class*=pv-tab-list] > :where(li) {
3323
3331
  position: relative;
3332
+ display: flex;
3333
+ align-items: center;
3324
3334
  white-space: nowrap;
3325
3335
  transition-duration: 0.125s;
3326
3336
  transition-property: color;
3327
3337
  }
3328
- [class*=pv-tab-list] :where(li) a, [class*=pv-tab-list] :where(li) button {
3338
+ [class*=pv-tab-list] > :where(li) .pv-tab-options {
3339
+ position: absolute;
3340
+ right: 0;
3341
+ top: 50%;
3342
+ transform: translateY(-50%);
3343
+ background-color: var(--tab-list-hover-background-color, transparent);
3344
+ opacity: 0;
3345
+ pointer-events: none;
3346
+ transition-duration: 0.125s;
3347
+ transition-property: opacity;
3348
+ }
3349
+ [class*=pv-tab-list] > :where(li) .pv-tab-options .pv-button-ghost {
3350
+ color: var(--tab-list-hover-text-color, #02363D);
3351
+ }
3352
+ [class*=pv-tab-list] > :where(li):hover .pv-tab-options,
3353
+ [class*=pv-tab-list] > :where(li) .pv-tab-options:focus-within,
3354
+ [class*=pv-tab-list] > :where(li) .pv-tab-options:has(.pv-floating:popover-open) {
3355
+ opacity: 1;
3356
+ pointer-events: auto;
3357
+ }
3358
+ [class*=pv-tab-list] > :where(li) > a, [class*=pv-tab-list] > :where(li) > button {
3329
3359
  display: flex;
3330
3360
  align-items: center;
3331
3361
  gap: 0.25rem;
@@ -3340,15 +3370,32 @@ button.pv-tag-secondary:active {
3340
3370
  background-color: transparent;
3341
3371
  cursor: pointer;
3342
3372
  }
3343
- [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 {
3373
+ [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 {
3344
3374
  text-decoration: none;
3345
3375
  color: var(--tab-list-hover-text-color, #02363D);
3346
3376
  background-color: var(--tab-list-hover-background-color, transparent);
3347
3377
  }
3348
- [class*=pv-tab-list] :where(li) a:active, [class*=pv-tab-list] :where(li) button:active {
3378
+ [class*=pv-tab-list] > :where(li) > a:active, [class*=pv-tab-list] > :where(li) > button:active {
3349
3379
  background-color: var(--tab-list-pressed-background-color, transparent);
3350
3380
  }
3351
- [class*=pv-tab-list] :where(li) a:after, [class*=pv-tab-list] :where(li) button:after {
3381
+ [class*=pv-tab-list] > :where(li) > .pv-tab-input {
3382
+ align-items: center;
3383
+ padding: 7px 8px;
3384
+ border-radius: var(--tab-list-item-radius, 0) var(--tab-list-item-radius, 0) 0 0;
3385
+ background-color: var(--tab-list-hover-background-color, transparent);
3386
+ }
3387
+ [class*=pv-tab-list] > :where(li) > .pv-tab-input .pv-ghost-input {
3388
+ height: 16px;
3389
+ padding: 3px 2px;
3390
+ }
3391
+ [class*=pv-tab-list] > :where(li) > .pv-tab-input .pv-ghost-input input {
3392
+ color: var(--tab-list-text-color, #6E7784);
3393
+ font-weight: var(--tab-list-font-weight, 600);
3394
+ font-size: var(--tab-list-font-size, inherit);
3395
+ line-height: var(--tab-list-line-height, inherit);
3396
+ background-color: transparent;
3397
+ }
3398
+ [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 {
3352
3399
  content: "";
3353
3400
  display: block;
3354
3401
  height: var(--tab-list-indicator-size, 4px);
@@ -3359,22 +3406,31 @@ button.pv-tag-secondary:active {
3359
3406
  right: 0;
3360
3407
  background-color: var(--tab-list-indicator-inactive-color, transparent);
3361
3408
  }
3362
- [class*=pv-tab-list] :where(li)[data-active] a, [class*=pv-tab-list] :where(li)[data-active] button {
3409
+ [class*=pv-tab-list] > :where(li)[data-active] > a, [class*=pv-tab-list] > :where(li)[data-active] > button {
3363
3410
  color: var(--tab-list-active-text-color, #176F6F);
3364
3411
  }
3365
- [class*=pv-tab-list] :where(li)[data-active] a:after, [class*=pv-tab-list] :where(li)[data-active] button:after {
3412
+ [class*=pv-tab-list] > :where(li)[data-active] > .pv-tab-input .pv-ghost-input input {
3413
+ color: var(--tab-list-active-text-color, #176F6F);
3414
+ }
3415
+ [class*=pv-tab-list] > :where(li)[data-active] .pv-tab-options .pv-button-ghost {
3416
+ color: var(--tab-list-active-text-color, #176F6F);
3417
+ }
3418
+ [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 {
3366
3419
  border-radius: var(--tab-list-indicator-radius, 4px 4px 0 0);
3367
3420
  background-color: var(--tab-list-indicator-color, #176F6F);
3368
3421
  }
3369
3422
 
3370
- .pv-tab-list-small :where(li) a, .pv-tab-list-small :where(li) button {
3423
+ .pv-tab-list-small > :where(li) > a, .pv-tab-list-small > :where(li) > button {
3371
3424
  padding: var(--tab-list-small-item-padding, 0 0 0.75rem 0);
3372
3425
  }
3426
+ .pv-tab-list-small > :where(li) > .pv-tab-input {
3427
+ padding: 3px 8px;
3428
+ }
3373
3429
 
3374
3430
  :where(ol.pv-tab-list) {
3375
3431
  counter-reset: item;
3376
3432
  }
3377
- :where(ol.pv-tab-list) :where(li) > a:before {
3433
+ :where(ol.pv-tab-list) > :where(li) > a:before {
3378
3434
  counter-increment: item;
3379
3435
  content: counter(item);
3380
3436
  display: inline-block;