@turquoisehealth/pit-viper 2.244.2 → 2.244.3

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 (40) hide show
  1. package/_site/assets/css/pit-viper-a11y.css +414 -21
  2. package/_site/assets/css/pit-viper-consumer.css +64 -9
  3. package/_site/assets/css/pit-viper-v2-scoped.css +64 -9
  4. package/_site/assets/css/pit-viper-v2.css +64 -9
  5. package/_site/assets/css/pit-viper.css +64 -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-ghost-input-stats.html +1 -1
  12. package/pv-components/dist/stats/web/pv-stepper-stats.html +1 -1
  13. package/pv-components/dist/stats/web/pv-tabs-stats.html +1 -1
  14. package/pv-components/dist/vue/ai/components/base/PvGhostInput/PvGhostInput.vue.d.ts +6 -2
  15. package/pv-components/dist/vue/ai/components/base/PvStepper/PvStepper.vue.d.ts +2 -2
  16. package/pv-components/dist/vue/ai/components/base/PvStepper/types.d.ts +2 -5
  17. package/pv-components/dist/vue/ai/components/base/PvTabs/PvTabs.vue.d.ts +4 -0
  18. package/pv-components/dist/vue/ai/components/base/PvTabs/types.d.ts +10 -2
  19. package/pv-components/dist/vue/ai/components/base/index.d.ts +1 -0
  20. package/pv-components/dist/vue/base/components/base/PvGhostInput/PvGhostInput.vue.d.ts +6 -2
  21. package/pv-components/dist/vue/base/components/base/PvStepper/PvStepper.vue.d.ts +2 -2
  22. package/pv-components/dist/vue/base/components/base/PvStepper/types.d.ts +2 -5
  23. package/pv-components/dist/vue/base/components/base/PvTabs/PvTabs.vue.d.ts +4 -0
  24. package/pv-components/dist/vue/base/components/base/PvTabs/types.d.ts +10 -2
  25. package/pv-components/dist/vue/base/components/base/index.d.ts +1 -0
  26. package/pv-components/dist/vue/base/pv-components-base.mjs +1434 -1364
  27. package/pv-components/dist/vue/base/pv-components-base.mjs.map +1 -1
  28. package/pv-components/dist/vue/visualizations/components/base/PvGhostInput/PvGhostInput.vue.d.ts +6 -2
  29. package/pv-components/dist/vue/visualizations/components/base/PvStepper/PvStepper.vue.d.ts +2 -2
  30. package/pv-components/dist/vue/visualizations/components/base/PvStepper/types.d.ts +2 -5
  31. package/pv-components/dist/vue/visualizations/components/base/PvTabs/PvTabs.vue.d.ts +4 -0
  32. package/pv-components/dist/vue/visualizations/components/base/PvTabs/types.d.ts +10 -2
  33. package/pv-components/dist/vue/visualizations/components/base/index.d.ts +1 -0
  34. package/pv-components/dist/vue/visualizations/pv-components-visualizations.mjs +9 -6
  35. package/pv-components/dist/vue/visualizations/pv-components-visualizations.mjs.map +1 -1
  36. package/pv-components/dist/web/components/pv-ghost-input/pv-ghost-input.js +14 -5
  37. package/pv-components/dist/web/components/pv-stepper/pv-stepper.js +422 -418
  38. package/pv-components/dist/web/components/pv-tabs/pv-tabs.js +2037 -549
  39. package/pv-components/dist/web/pv-components.iife.js +13 -13
  40. 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,34 @@
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
+ opacity: 1;
3053
+ pointer-events: auto;
3054
+ }
3055
+ .pv-v2 [class*=pv-tab-list] > :where(li) > a, .pv-v2 [class*=pv-tab-list] > :where(li) > button {
3027
3056
  display: flex;
3028
3057
  align-items: center;
3029
3058
  gap: 0.25rem;
@@ -3038,15 +3067,32 @@
3038
3067
  background-color: transparent;
3039
3068
  cursor: pointer;
3040
3069
  }
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 {
3070
+ .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
3071
  text-decoration: none;
3043
3072
  color: var(--tab-list-hover-text-color, #121313);
3044
3073
  background-color: var(--tab-list-hover-background-color, #E8F2F4);
3045
3074
  }
3046
- .pv-v2 [class*=pv-tab-list] :where(li) a:active, .pv-v2 [class*=pv-tab-list] :where(li) button:active {
3075
+ .pv-v2 [class*=pv-tab-list] > :where(li) > a:active, .pv-v2 [class*=pv-tab-list] > :where(li) > button:active {
3047
3076
  background-color: var(--tab-list-pressed-background-color, #C7D8DB);
3048
3077
  }
3049
- .pv-v2 [class*=pv-tab-list] :where(li) a:after, .pv-v2 [class*=pv-tab-list] :where(li) button:after {
3078
+ .pv-v2 [class*=pv-tab-list] > :where(li) > .pv-tab-input {
3079
+ align-items: center;
3080
+ padding: 7px 8px;
3081
+ border-radius: var(--tab-list-item-radius, 4px) var(--tab-list-item-radius, 4px) 0 0;
3082
+ background-color: var(--tab-list-hover-background-color, #E8F2F4);
3083
+ }
3084
+ .pv-v2 [class*=pv-tab-list] > :where(li) > .pv-tab-input .pv-ghost-input {
3085
+ height: 16px;
3086
+ padding: 3px 2px;
3087
+ }
3088
+ .pv-v2 [class*=pv-tab-list] > :where(li) > .pv-tab-input .pv-ghost-input input {
3089
+ color: var(--tab-list-text-color, #6E8081);
3090
+ font-weight: var(--tab-list-font-weight, 500);
3091
+ font-size: var(--tab-list-font-size, 0.75rem);
3092
+ line-height: var(--tab-list-line-height, 1.33333333);
3093
+ background-color: transparent;
3094
+ }
3095
+ .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
3096
  content: "";
3051
3097
  display: block;
3052
3098
  height: var(--tab-list-indicator-size, 2px);
@@ -3057,20 +3103,29 @@
3057
3103
  right: 0;
3058
3104
  background-color: var(--tab-list-indicator-inactive-color, #E3E7EA);
3059
3105
  }
3060
- .pv-v2 [class*=pv-tab-list] :where(li)[data-active] a, .pv-v2 [class*=pv-tab-list] :where(li)[data-active] button {
3106
+ .pv-v2 [class*=pv-tab-list] > :where(li)[data-active] > a, .pv-v2 [class*=pv-tab-list] > :where(li)[data-active] > button {
3061
3107
  color: var(--tab-list-active-text-color, #16696D);
3062
3108
  }
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 {
3109
+ .pv-v2 [class*=pv-tab-list] > :where(li)[data-active] > .pv-tab-input .pv-ghost-input input {
3110
+ color: var(--tab-list-active-text-color, #16696D);
3111
+ }
3112
+ .pv-v2 [class*=pv-tab-list] > :where(li)[data-active] .pv-tab-options .pv-button-ghost {
3113
+ color: var(--tab-list-active-text-color, #16696D);
3114
+ }
3115
+ .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
3116
  border-radius: var(--tab-list-indicator-radius, 2px);
3065
3117
  background-color: var(--tab-list-indicator-color, #16696D);
3066
3118
  }
3067
- .pv-v2 .pv-tab-list-small :where(li) a, .pv-v2 .pv-tab-list-small :where(li) button {
3119
+ .pv-v2 .pv-tab-list-small > :where(li) > a, .pv-v2 .pv-tab-list-small > :where(li) > button {
3068
3120
  padding: var(--tab-list-small-item-padding, 0.1875rem 0.5rem);
3069
3121
  }
3122
+ .pv-v2 .pv-tab-list-small > :where(li) > .pv-tab-input {
3123
+ padding: 3px 8px;
3124
+ }
3070
3125
  .pv-v2 :where(ol.pv-tab-list) {
3071
3126
  counter-reset: item;
3072
3127
  }
3073
- .pv-v2 :where(ol.pv-tab-list) :where(li) > a:before {
3128
+ .pv-v2 :where(ol.pv-tab-list) > :where(li) > a:before {
3074
3129
  counter-increment: item;
3075
3130
  content: counter(item);
3076
3131
  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,34 @@ 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
+ opacity: 1;
3350
+ pointer-events: auto;
3351
+ }
3352
+ [class*=pv-tab-list] > :where(li) > a, [class*=pv-tab-list] > :where(li) > button {
3324
3353
  display: flex;
3325
3354
  align-items: center;
3326
3355
  gap: 0.25rem;
@@ -3335,15 +3364,32 @@ button.pv-tag-secondary:active {
3335
3364
  background-color: transparent;
3336
3365
  cursor: pointer;
3337
3366
  }
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 {
3367
+ [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
3368
  text-decoration: none;
3340
3369
  color: var(--tab-list-hover-text-color, #121313);
3341
3370
  background-color: var(--tab-list-hover-background-color, #E8F2F4);
3342
3371
  }
3343
- [class*=pv-tab-list] :where(li) a:active, [class*=pv-tab-list] :where(li) button:active {
3372
+ [class*=pv-tab-list] > :where(li) > a:active, [class*=pv-tab-list] > :where(li) > button:active {
3344
3373
  background-color: var(--tab-list-pressed-background-color, #C7D8DB);
3345
3374
  }
3346
- [class*=pv-tab-list] :where(li) a:after, [class*=pv-tab-list] :where(li) button:after {
3375
+ [class*=pv-tab-list] > :where(li) > .pv-tab-input {
3376
+ align-items: center;
3377
+ padding: 7px 8px;
3378
+ border-radius: var(--tab-list-item-radius, 4px) var(--tab-list-item-radius, 4px) 0 0;
3379
+ background-color: var(--tab-list-hover-background-color, #E8F2F4);
3380
+ }
3381
+ [class*=pv-tab-list] > :where(li) > .pv-tab-input .pv-ghost-input {
3382
+ height: 16px;
3383
+ padding: 3px 2px;
3384
+ }
3385
+ [class*=pv-tab-list] > :where(li) > .pv-tab-input .pv-ghost-input input {
3386
+ color: var(--tab-list-text-color, #6E8081);
3387
+ font-weight: var(--tab-list-font-weight, 500);
3388
+ font-size: var(--tab-list-font-size, 0.75rem);
3389
+ line-height: var(--tab-list-line-height, 1.33333333);
3390
+ background-color: transparent;
3391
+ }
3392
+ [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
3393
  content: "";
3348
3394
  display: block;
3349
3395
  height: var(--tab-list-indicator-size, 2px);
@@ -3354,22 +3400,31 @@ button.pv-tag-secondary:active {
3354
3400
  right: 0;
3355
3401
  background-color: var(--tab-list-indicator-inactive-color, #E3E7EA);
3356
3402
  }
3357
- [class*=pv-tab-list] :where(li)[data-active] a, [class*=pv-tab-list] :where(li)[data-active] button {
3403
+ [class*=pv-tab-list] > :where(li)[data-active] > a, [class*=pv-tab-list] > :where(li)[data-active] > button {
3358
3404
  color: var(--tab-list-active-text-color, #16696D);
3359
3405
  }
3360
- [class*=pv-tab-list] :where(li)[data-active] a:after, [class*=pv-tab-list] :where(li)[data-active] button:after {
3406
+ [class*=pv-tab-list] > :where(li)[data-active] > .pv-tab-input .pv-ghost-input input {
3407
+ color: var(--tab-list-active-text-color, #16696D);
3408
+ }
3409
+ [class*=pv-tab-list] > :where(li)[data-active] .pv-tab-options .pv-button-ghost {
3410
+ color: var(--tab-list-active-text-color, #16696D);
3411
+ }
3412
+ [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
3413
  border-radius: var(--tab-list-indicator-radius, 2px);
3362
3414
  background-color: var(--tab-list-indicator-color, #16696D);
3363
3415
  }
3364
3416
 
3365
- .pv-tab-list-small :where(li) a, .pv-tab-list-small :where(li) button {
3417
+ .pv-tab-list-small > :where(li) > a, .pv-tab-list-small > :where(li) > button {
3366
3418
  padding: var(--tab-list-small-item-padding, 0.1875rem 0.5rem);
3367
3419
  }
3420
+ .pv-tab-list-small > :where(li) > .pv-tab-input {
3421
+ padding: 3px 8px;
3422
+ }
3368
3423
 
3369
3424
  :where(ol.pv-tab-list) {
3370
3425
  counter-reset: item;
3371
3426
  }
3372
- :where(ol.pv-tab-list) :where(li) > a:before {
3427
+ :where(ol.pv-tab-list) > :where(li) > a:before {
3373
3428
  counter-increment: item;
3374
3429
  content: counter(item);
3375
3430
  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,34 @@ 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
+ opacity: 1;
3355
+ pointer-events: auto;
3356
+ }
3357
+ [class*=pv-tab-list] > :where(li) > a, [class*=pv-tab-list] > :where(li) > button {
3329
3358
  display: flex;
3330
3359
  align-items: center;
3331
3360
  gap: 0.25rem;
@@ -3340,15 +3369,32 @@ button.pv-tag-secondary:active {
3340
3369
  background-color: transparent;
3341
3370
  cursor: pointer;
3342
3371
  }
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 {
3372
+ [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
3373
  text-decoration: none;
3345
3374
  color: var(--tab-list-hover-text-color, #02363D);
3346
3375
  background-color: var(--tab-list-hover-background-color, transparent);
3347
3376
  }
3348
- [class*=pv-tab-list] :where(li) a:active, [class*=pv-tab-list] :where(li) button:active {
3377
+ [class*=pv-tab-list] > :where(li) > a:active, [class*=pv-tab-list] > :where(li) > button:active {
3349
3378
  background-color: var(--tab-list-pressed-background-color, transparent);
3350
3379
  }
3351
- [class*=pv-tab-list] :where(li) a:after, [class*=pv-tab-list] :where(li) button:after {
3380
+ [class*=pv-tab-list] > :where(li) > .pv-tab-input {
3381
+ align-items: center;
3382
+ padding: 7px 8px;
3383
+ border-radius: var(--tab-list-item-radius, 0) var(--tab-list-item-radius, 0) 0 0;
3384
+ background-color: var(--tab-list-hover-background-color, transparent);
3385
+ }
3386
+ [class*=pv-tab-list] > :where(li) > .pv-tab-input .pv-ghost-input {
3387
+ height: 16px;
3388
+ padding: 3px 2px;
3389
+ }
3390
+ [class*=pv-tab-list] > :where(li) > .pv-tab-input .pv-ghost-input input {
3391
+ color: var(--tab-list-text-color, #6E7784);
3392
+ font-weight: var(--tab-list-font-weight, 600);
3393
+ font-size: var(--tab-list-font-size, inherit);
3394
+ line-height: var(--tab-list-line-height, inherit);
3395
+ background-color: transparent;
3396
+ }
3397
+ [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
3398
  content: "";
3353
3399
  display: block;
3354
3400
  height: var(--tab-list-indicator-size, 4px);
@@ -3359,22 +3405,31 @@ button.pv-tag-secondary:active {
3359
3405
  right: 0;
3360
3406
  background-color: var(--tab-list-indicator-inactive-color, transparent);
3361
3407
  }
3362
- [class*=pv-tab-list] :where(li)[data-active] a, [class*=pv-tab-list] :where(li)[data-active] button {
3408
+ [class*=pv-tab-list] > :where(li)[data-active] > a, [class*=pv-tab-list] > :where(li)[data-active] > button {
3363
3409
  color: var(--tab-list-active-text-color, #176F6F);
3364
3410
  }
3365
- [class*=pv-tab-list] :where(li)[data-active] a:after, [class*=pv-tab-list] :where(li)[data-active] button:after {
3411
+ [class*=pv-tab-list] > :where(li)[data-active] > .pv-tab-input .pv-ghost-input input {
3412
+ color: var(--tab-list-active-text-color, #176F6F);
3413
+ }
3414
+ [class*=pv-tab-list] > :where(li)[data-active] .pv-tab-options .pv-button-ghost {
3415
+ color: var(--tab-list-active-text-color, #176F6F);
3416
+ }
3417
+ [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
3418
  border-radius: var(--tab-list-indicator-radius, 4px 4px 0 0);
3367
3419
  background-color: var(--tab-list-indicator-color, #176F6F);
3368
3420
  }
3369
3421
 
3370
- .pv-tab-list-small :where(li) a, .pv-tab-list-small :where(li) button {
3422
+ .pv-tab-list-small > :where(li) > a, .pv-tab-list-small > :where(li) > button {
3371
3423
  padding: var(--tab-list-small-item-padding, 0 0 0.75rem 0);
3372
3424
  }
3425
+ .pv-tab-list-small > :where(li) > .pv-tab-input {
3426
+ padding: 3px 8px;
3427
+ }
3373
3428
 
3374
3429
  :where(ol.pv-tab-list) {
3375
3430
  counter-reset: item;
3376
3431
  }
3377
- :where(ol.pv-tab-list) :where(li) > a:before {
3432
+ :where(ol.pv-tab-list) > :where(li) > a:before {
3378
3433
  counter-increment: item;
3379
3434
  content: counter(item);
3380
3435
  display: inline-block;