@turquoisehealth/pit-viper 2.244.1 → 2.244.3

package/_site/assets/css/pit-viper.css

@@ -1581,6 +1581,14 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
 .pv-ghost-input {
   display: flex;
   align-items: center;
+  border: 1px solid transparent;
+  border-radius: var(--ghost-input-radius, 0.25rem);
+}
+.pv-ghost-input:focus-within {
+  border-color: var(--ghost-input-focus-border-color, #176F6F);
+}
+.pv-ghost-input[data-invalid] {
+  border-color: var(--ghost-input-error-border-color, #A2191F);
 }
 .pv-ghost-input input {
   padding: 0.25rem 0.125rem;
@@ -3319,13 +3327,34 @@ button.pv-tag-secondary:active {
   padding-block-start: var(--tab-list-padding-top, 1.5rem);
   border-block-end: var(--tab-list-border-width, 1px) solid var(--tab-list-border-color, #DCDFE4);
 }
-[class*=pv-tab-list] :where(li) {
+[class*=pv-tab-list] > :where(li) {
   position: relative;
+  display: flex;
+  align-items: center;
   white-space: nowrap;
   transition-duration: 0.125s;
   transition-property: color;
 }
-[class*=pv-tab-list] :where(li) a, [class*=pv-tab-list] :where(li) button {
+[class*=pv-tab-list] > :where(li) .pv-tab-options {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: var(--tab-list-hover-background-color, transparent);
+  opacity: 0;
+  pointer-events: none;
+  transition-duration: 0.125s;
+  transition-property: opacity;
+}
+[class*=pv-tab-list] > :where(li) .pv-tab-options .pv-button-ghost {
+  color: var(--tab-list-hover-text-color, #02363D);
+}
+[class*=pv-tab-list] > :where(li):hover .pv-tab-options,
+[class*=pv-tab-list] > :where(li) .pv-tab-options:focus-within {
+  opacity: 1;
+  pointer-events: auto;
+}
+[class*=pv-tab-list] > :where(li) > a, [class*=pv-tab-list] > :where(li) > button {
   display: flex;
   align-items: center;
   gap: 0.25rem;
@@ -3340,15 +3369,32 @@ button.pv-tag-secondary:active {
   background-color: transparent;
   cursor: pointer;
 }
-[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) > 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 {
   text-decoration: none;
   color: var(--tab-list-hover-text-color, #02363D);
   background-color: var(--tab-list-hover-background-color, transparent);
 }
-[class*=pv-tab-list] :where(li) a:active, [class*=pv-tab-list] :where(li) button:active {
+[class*=pv-tab-list] > :where(li) > a:active, [class*=pv-tab-list] > :where(li) > button:active {
   background-color: var(--tab-list-pressed-background-color, transparent);
 }
-[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 {
+  align-items: center;
+  padding: 7px 8px;
+  border-radius: var(--tab-list-item-radius, 0) var(--tab-list-item-radius, 0) 0 0;
+  background-color: var(--tab-list-hover-background-color, transparent);
+}
+[class*=pv-tab-list] > :where(li) > .pv-tab-input .pv-ghost-input {
+  height: 16px;
+  padding: 3px 2px;
+}
+[class*=pv-tab-list] > :where(li) > .pv-tab-input .pv-ghost-input input {
+  color: var(--tab-list-text-color, #6E7784);
+  font-weight: var(--tab-list-font-weight, 600);
+  font-size: var(--tab-list-font-size, inherit);
+  line-height: var(--tab-list-line-height, inherit);
+  background-color: transparent;
+}
+[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 {
   content: "";
   display: block;
   height: var(--tab-list-indicator-size, 4px);
@@ -3359,22 +3405,31 @@ button.pv-tag-secondary:active {
   right: 0;
   background-color: var(--tab-list-indicator-inactive-color, transparent);
 }
-[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] > a, [class*=pv-tab-list] > :where(li)[data-active] > button {
+  color: var(--tab-list-active-text-color, #176F6F);
+}
+[class*=pv-tab-list] > :where(li)[data-active] > .pv-tab-input .pv-ghost-input input {
+  color: var(--tab-list-active-text-color, #176F6F);
+}
+[class*=pv-tab-list] > :where(li)[data-active] .pv-tab-options .pv-button-ghost {
   color: var(--tab-list-active-text-color, #176F6F);
 }
-[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] > a:after, [class*=pv-tab-list] > :where(li)[data-active] > button:after, [class*=pv-tab-list] > :where(li)[data-active] > .pv-tab-input:after {
   border-radius: var(--tab-list-indicator-radius, 4px 4px 0 0);
   background-color: var(--tab-list-indicator-color, #176F6F);
 }
 
-.pv-tab-list-small :where(li) a, .pv-tab-list-small :where(li) button {
+.pv-tab-list-small > :where(li) > a, .pv-tab-list-small > :where(li) > button {
   padding: var(--tab-list-small-item-padding, 0 0 0.75rem 0);
 }
+.pv-tab-list-small > :where(li) > .pv-tab-input {
+  padding: 3px 8px;
+}
 
 :where(ol.pv-tab-list) {
   counter-reset: item;
 }
-:where(ol.pv-tab-list) :where(li) > a:before {
+:where(ol.pv-tab-list) > :where(li) > a:before {
   counter-increment: item;
   content: counter(item);
   display: inline-block;
@@ -5182,13 +5237,15 @@ pv-data-grid.ag-theme-pv {
   padding-block: 0;
 }
 
-[class*=pv-stepper] {
+.pv-stepper-active,
+.pv-stepper-inactive {
   height: 8px;
   flex-shrink: 0;
   cursor: default;
   transition: width 0.15s ease-in-out, background-color 0.15s ease-in-out, border-radius 0.15s ease-in-out;
 }
-[class*=pv-stepper][data-clickable=true] {
+.pv-stepper-active[data-clickable=true],
+.pv-stepper-inactive[data-clickable=true] {
   cursor: pointer;
 }
 
@@ -5204,6 +5261,58 @@ pv-data-grid.ag-theme-pv {
   background-color: var(--stepper-inactive-background-color, #E0E5E4);
 }
 
+.pv-stepper-progress-divider {
+  flex: 1 1 auto;
+  height: 1px;
+  align-self: center;
+}
+
+.pv-stepper-progress-divider-default {
+  background-color: var(--stepper-progress-divider-color, #E0E5E4);
+}
+
+.pv-stepper-progress-divider-success {
+  background-color: var(--stepper-progress-divider-success-color, #0E8019);
+}
+
+[class*=pv-stepper-button] {
+  padding: var(--button-large-padding, calc(0.5rem - 1px) 0.75rem);
+  border-radius: var(--stepper-button-radius, 12px);
+  border: 1px solid transparent;
+  font-family: inherit;
+  font-size: var(--button-font-size, 1rem);
+  font-weight: var(--button-font-weight, 600);
+  line-height: var(--button-line-height, inherit);
+  cursor: pointer;
+  transition-duration: 0.125s;
+  transition-property: background-color, color;
+}
+[class*=pv-stepper-button][data-clickable=false] {
+  cursor: default;
+}
+
+.pv-stepper-button-active {
+  background-color: var(--stepper-button-active-background-color, #F3F1EB);
+  color: var(--stepper-button-active-text-color, #121313);
+}
+.pv-stepper-button-active:hover, .pv-stepper-button-active:active {
+  background-color: var(--stepper-button-active-background-color, #F3F1EB);
+  color: var(--stepper-button-active-text-color, #121313);
+}
+
+.pv-stepper-button-inactive {
+  background-color: transparent;
+  color: var(--stepper-button-inactive-text-color, #6E8081);
+}
+.pv-stepper-button-inactive:hover {
+  background-color: var(--stepper-button-inactive-background-color, #E8F2F4);
+  color: var(--stepper-button-inactive-text-color, #6E8081);
+}
+.pv-stepper-button-inactive:active {
+  background-color: var(--stepper-button-inactive-active-background-color, #C7D8DB);
+  color: var(--stepper-button-inactive-text-color, #6E8081);
+}
+
 .pv-step-list {
   list-style: none;
   margin: 0;