@turquoisehealth/pit-viper 2.194.3-dev.1 → 2.194.4

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

@@ -1555,38 +1555,211 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
 }
 
 .pv-range {
+  --range-fill-color: #36c5ba;
+  --range-thumb-border-width: 3px;
+  --range-thumb-size: 20px;
+  --range-track-color: var(--color-border, #e3e7ea);
+  --range-track-height: 6px;
   --value: 0%;
   -webkit-appearance: none;
   appearance: none;
   cursor: pointer;
   width: 100%;
-  background: #36C5BA linear-gradient(90deg, rgb(54, 197, 186) var(--value), rgb(22, 105, 109) var(--value));
+  background: linear-gradient(90deg, var(--range-fill-color) var(--value), var(--range-track-color) var(--value));
   border-radius: 2rem;
-  height: 8px;
+  height: var(--range-track-height);
 }
 .pv-range::-webkit-slider-thumb {
   -webkit-appearance: none;
   background-color: white;
-  border: 4px solid #36C5BA;
-  width: 16px;
-  height: 16px;
+  border: var(--range-thumb-border-width) solid var(--range-fill-color);
+  width: var(--range-thumb-size);
+  height: var(--range-thumb-size);
   border-radius: 50%;
 }
 .pv-range::-moz-range-thumb {
   background-color: white;
-  border: 4px solid #36C5BA;
-  width: 12px;
-  height: 12px;
+  border: var(--range-thumb-border-width) solid var(--range-fill-color);
+  width: calc(var(--range-thumb-size) - var(--range-thumb-border-width) * 2);
+  height: calc(var(--range-thumb-size) - var(--range-thumb-border-width) * 2);
   border-radius: 50%;
 }
 .pv-range:focus-visible {
   outline: none;
 }
 .pv-range:focus-visible::-webkit-slider-thumb {
-  outline: 2px solid red;
+  outline: 2px solid var(--color-border-brand, #36c5ba);
+  outline-offset: 2px;
 }
 .pv-range:focus-visible::-moz-range-thumb {
-  outline: 2px solid red;
+  outline: 2px solid var(--color-border-brand, #36c5ba);
+  outline-offset: 2px;
+}
+
+.pv-range-sm {
+  --range-thumb-border-width: 2px;
+  --range-thumb-size: 16px;
+  --range-track-height: 4px;
+}
+
+.pv-range-lg {
+  --range-thumb-border-width: 4px;
+  --range-thumb-size: 28px;
+  --range-track-height: 8px;
+}
+
+.pv-range-single-slider {
+  position: relative;
+  width: 100%;
+}
+
+.pv-range-single-slider .pv-range {
+  display: block;
+}
+
+.pv-range-dual-slider {
+  --range-dual-moz-thumb-size: 0.875rem;
+  --range-dual-slider-height: 2.5rem;
+  --range-dual-thumb-border-width: 0.1875rem;
+  --range-dual-thumb-size: 1.25rem;
+  --range-dual-track-height: 0.375rem;
+  --range-fill-color: var(--color-background-brand-inverse, #36c5ba);
+  --range-track-color: var(--color-border, #e3e7ea);
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  height: var(--range-dual-slider-height);
+  margin-top: 0.25rem;
+  position: relative;
+}
+
+.pv-range-dual-slider-sm {
+  --range-dual-moz-thumb-size: 0.75rem;
+  --range-dual-slider-height: 2rem;
+  --range-dual-thumb-border-width: 0.125rem;
+  --range-dual-thumb-size: 1rem;
+  --range-dual-track-height: 0.25rem;
+}
+
+.pv-range-dual-slider-lg {
+  --range-dual-moz-thumb-size: 1.25rem;
+  --range-dual-slider-height: 3rem;
+  --range-dual-thumb-border-width: 0.25rem;
+  --range-dual-thumb-size: 1.75rem;
+  --range-dual-track-height: 0.5rem;
+}
+
+.pv-range-dual-slider-disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.pv-range-dual-slider::before {
+  background: var(--range-track-color);
+  border-radius: 999px;
+  content: "";
+  height: var(--range-dual-track-height);
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.pv-range-dual-fill {
+  background: var(--range-fill-color);
+  border-radius: 999px;
+  height: var(--range-dual-track-height);
+  left: var(--value-min);
+  pointer-events: none;
+  position: absolute;
+  right: calc(100% - var(--value-max));
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.pv-range-dual-native {
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  height: var(--range-dual-slider-height);
+  margin: 0;
+  pointer-events: none;
+  position: absolute;
+  width: 100%;
+}
+
+.pv-range-dual-native::-webkit-slider-runnable-track {
+  background: transparent;
+  border: 0;
+}
+
+.pv-range-dual-native::-moz-range-track {
+  background: transparent;
+  border: 0;
+}
+
+.pv-range-dual-native::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: #ffffff;
+  border: var(--range-dual-thumb-border-width) solid var(--range-fill-color);
+  border-radius: 50%;
+  box-shadow: var(--elevation-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
+  cursor: pointer;
+  height: var(--range-dual-thumb-size);
+  pointer-events: auto;
+  width: var(--range-dual-thumb-size);
+}
+
+.pv-range-dual-native::-moz-range-thumb {
+  background-color: #ffffff;
+  border: var(--range-dual-thumb-border-width) solid var(--range-fill-color);
+  border-radius: 50%;
+  box-shadow: var(--elevation-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
+  cursor: pointer;
+  height: var(--range-dual-moz-thumb-size);
+  pointer-events: auto;
+  width: var(--range-dual-moz-thumb-size);
+}
+
+.pv-range-dual-native:focus-visible {
+  outline: none;
+}
+
+.pv-range-dual-native:focus-visible::-webkit-slider-thumb {
+  outline: 2px solid var(--color-border-brand, #36c5ba);
+  outline-offset: 2px;
+}
+
+.pv-range-dual-native:focus-visible::-moz-range-thumb {
+  outline: 2px solid var(--color-border-brand, #36c5ba);
+  outline-offset: 2px;
+}
+
+.pv-range-dual-native-min {
+  z-index: 2;
+}
+
+.pv-range-dual-native-max {
+  z-index: 3;
+}
+
+.pv-range-tooltip,
+.pv-range-dual-tooltip {
+  background: var(--color-background-inverse, #242626);
+  border-radius: 0.25rem;
+  color: var(--color-text-inverse, #ffffff);
+  font-size: 0.75rem;
+  line-height: 1;
+  padding: 0.5rem;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  transform: translate(-50%, -70%);
+  white-space: nowrap;
+  z-index: 4;
 }
 
 .pv-nav-container {
@@ -3253,6 +3426,81 @@ pv-dropdown-auto-close.pv-dropdown > [class*=pv-button][data-dropdown] {
   overflow: auto;
 }
 
+.pv-horizontal-scroller {
+  min-width: 0;
+  position: relative;
+}
+
+.pv-horizontal-scroller-scroll {
+  min-width: 0;
+  overflow-x: auto;
+  padding: var(--pv-horizontal-scroller-padding, 0);
+}
+
+.pv-horizontal-scroller-scroll-hidden-scrollbar {
+  scrollbar-width: none;
+}
+
+.pv-horizontal-scroller-scroll-hidden-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+.pv-horizontal-scroller-content {
+  align-items: center;
+  display: flex;
+  gap: var(--pv-horizontal-scroller-gap, 0);
+  min-width: max-content;
+  width: max-content;
+}
+
+.pv-horizontal-scroller-content > * {
+  flex: 0 0 auto;
+}
+
+.pv-horizontal-scroller-content > slot::slotted(*) {
+  flex: 0 0 auto;
+}
+
+.pv-horizontal-scroller-control {
+  align-items: center;
+  bottom: 0;
+  display: flex;
+  opacity: 1;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  transition: opacity 150ms ease;
+  width: var(--pv-horizontal-scroller-fade-width, 56px);
+}
+
+.pv-horizontal-scroller-control > * {
+  pointer-events: auto;
+}
+
+.pv-horizontal-scroller-control-hidden {
+  opacity: 0;
+}
+
+.pv-horizontal-scroller-control-left {
+  justify-content: flex-start;
+  left: 0;
+  padding-left: var(--pv-horizontal-scroller-control-padding, 8px);
+}
+
+.pv-horizontal-scroller-control-right {
+  justify-content: flex-end;
+  padding-right: var(--pv-horizontal-scroller-control-padding, 8px);
+  right: 0;
+}
+
+.pv-horizontal-scroller-control-left-fade {
+  background: linear-gradient(90deg, var(--pv-horizontal-scroller-fade-background, #fff) 0%, transparent 100%);
+}
+
+.pv-horizontal-scroller-control-right-fade {
+  background: linear-gradient(270deg, var(--pv-horizontal-scroller-fade-background, #fff) 0%, transparent 100%);
+}
+
 .pv-org-switch {
   width: 100%;
   border: none;

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

@@ -1561,38 +1561,211 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
 }
 
 .pv-range {
+  --range-fill-color: #36c5ba;
+  --range-thumb-border-width: 3px;
+  --range-thumb-size: 20px;
+  --range-track-color: var(--color-border, #e3e7ea);
+  --range-track-height: 6px;
   --value: 0%;
   -webkit-appearance: none;
   appearance: none;
   cursor: pointer;
   width: 100%;
-  background: #36C5BA linear-gradient(90deg, rgb(54, 197, 186) var(--value), rgb(22, 105, 109) var(--value));
+  background: linear-gradient(90deg, var(--range-fill-color) var(--value), var(--range-track-color) var(--value));
   border-radius: 2rem;
-  height: 8px;
+  height: var(--range-track-height);
 }
 .pv-range::-webkit-slider-thumb {
   -webkit-appearance: none;
   background-color: white;
-  border: 4px solid #36C5BA;
-  width: 16px;
-  height: 16px;
+  border: var(--range-thumb-border-width) solid var(--range-fill-color);
+  width: var(--range-thumb-size);
+  height: var(--range-thumb-size);
   border-radius: 50%;
 }
 .pv-range::-moz-range-thumb {
   background-color: white;
-  border: 4px solid #36C5BA;
-  width: 12px;
-  height: 12px;
+  border: var(--range-thumb-border-width) solid var(--range-fill-color);
+  width: calc(var(--range-thumb-size) - var(--range-thumb-border-width) * 2);
+  height: calc(var(--range-thumb-size) - var(--range-thumb-border-width) * 2);
   border-radius: 50%;
 }
 .pv-range:focus-visible {
   outline: none;
 }
 .pv-range:focus-visible::-webkit-slider-thumb {
-  outline: 2px solid red;
+  outline: 2px solid var(--color-border-brand, #36c5ba);
+  outline-offset: 2px;
 }
 .pv-range:focus-visible::-moz-range-thumb {
-  outline: 2px solid red;
+  outline: 2px solid var(--color-border-brand, #36c5ba);
+  outline-offset: 2px;
+}
+
+.pv-range-sm {
+  --range-thumb-border-width: 2px;
+  --range-thumb-size: 16px;
+  --range-track-height: 4px;
+}
+
+.pv-range-lg {
+  --range-thumb-border-width: 4px;
+  --range-thumb-size: 28px;
+  --range-track-height: 8px;
+}
+
+.pv-range-single-slider {
+  position: relative;
+  width: 100%;
+}
+
+.pv-range-single-slider .pv-range {
+  display: block;
+}
+
+.pv-range-dual-slider {
+  --range-dual-moz-thumb-size: 0.875rem;
+  --range-dual-slider-height: 2.5rem;
+  --range-dual-thumb-border-width: 0.1875rem;
+  --range-dual-thumb-size: 1.25rem;
+  --range-dual-track-height: 0.375rem;
+  --range-fill-color: var(--color-background-brand-inverse, #36c5ba);
+  --range-track-color: var(--color-border, #e3e7ea);
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  height: var(--range-dual-slider-height);
+  margin-top: 0.25rem;
+  position: relative;
+}
+
+.pv-range-dual-slider-sm {
+  --range-dual-moz-thumb-size: 0.75rem;
+  --range-dual-slider-height: 2rem;
+  --range-dual-thumb-border-width: 0.125rem;
+  --range-dual-thumb-size: 1rem;
+  --range-dual-track-height: 0.25rem;
+}
+
+.pv-range-dual-slider-lg {
+  --range-dual-moz-thumb-size: 1.25rem;
+  --range-dual-slider-height: 3rem;
+  --range-dual-thumb-border-width: 0.25rem;
+  --range-dual-thumb-size: 1.75rem;
+  --range-dual-track-height: 0.5rem;
+}
+
+.pv-range-dual-slider-disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.pv-range-dual-slider::before {
+  background: var(--range-track-color);
+  border-radius: 999px;
+  content: "";
+  height: var(--range-dual-track-height);
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.pv-range-dual-fill {
+  background: var(--range-fill-color);
+  border-radius: 999px;
+  height: var(--range-dual-track-height);
+  left: var(--value-min);
+  pointer-events: none;
+  position: absolute;
+  right: calc(100% - var(--value-max));
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.pv-range-dual-native {
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  height: var(--range-dual-slider-height);
+  margin: 0;
+  pointer-events: none;
+  position: absolute;
+  width: 100%;
+}
+
+.pv-range-dual-native::-webkit-slider-runnable-track {
+  background: transparent;
+  border: 0;
+}
+
+.pv-range-dual-native::-moz-range-track {
+  background: transparent;
+  border: 0;
+}
+
+.pv-range-dual-native::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: #ffffff;
+  border: var(--range-dual-thumb-border-width) solid var(--range-fill-color);
+  border-radius: 50%;
+  box-shadow: var(--elevation-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
+  cursor: pointer;
+  height: var(--range-dual-thumb-size);
+  pointer-events: auto;
+  width: var(--range-dual-thumb-size);
+}
+
+.pv-range-dual-native::-moz-range-thumb {
+  background-color: #ffffff;
+  border: var(--range-dual-thumb-border-width) solid var(--range-fill-color);
+  border-radius: 50%;
+  box-shadow: var(--elevation-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
+  cursor: pointer;
+  height: var(--range-dual-moz-thumb-size);
+  pointer-events: auto;
+  width: var(--range-dual-moz-thumb-size);
+}
+
+.pv-range-dual-native:focus-visible {
+  outline: none;
+}
+
+.pv-range-dual-native:focus-visible::-webkit-slider-thumb {
+  outline: 2px solid var(--color-border-brand, #36c5ba);
+  outline-offset: 2px;
+}
+
+.pv-range-dual-native:focus-visible::-moz-range-thumb {
+  outline: 2px solid var(--color-border-brand, #36c5ba);
+  outline-offset: 2px;
+}
+
+.pv-range-dual-native-min {
+  z-index: 2;
+}
+
+.pv-range-dual-native-max {
+  z-index: 3;
+}
+
+.pv-range-tooltip,
+.pv-range-dual-tooltip {
+  background: var(--color-background-inverse, #242626);
+  border-radius: 0.25rem;
+  color: var(--color-text-inverse, #ffffff);
+  font-size: 0.75rem;
+  line-height: 1;
+  padding: 0.5rem;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  transform: translate(-50%, -70%);
+  white-space: nowrap;
+  z-index: 4;
 }
 
 .pv-nav-container {
@@ -3259,6 +3432,81 @@ pv-dropdown-auto-close.pv-dropdown > [class*=pv-button][data-dropdown] {
   overflow: auto;
 }
 
+.pv-horizontal-scroller {
+  min-width: 0;
+  position: relative;
+}
+
+.pv-horizontal-scroller-scroll {
+  min-width: 0;
+  overflow-x: auto;
+  padding: var(--pv-horizontal-scroller-padding, 0);
+}
+
+.pv-horizontal-scroller-scroll-hidden-scrollbar {
+  scrollbar-width: none;
+}
+
+.pv-horizontal-scroller-scroll-hidden-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+.pv-horizontal-scroller-content {
+  align-items: center;
+  display: flex;
+  gap: var(--pv-horizontal-scroller-gap, 0);
+  min-width: max-content;
+  width: max-content;
+}
+
+.pv-horizontal-scroller-content > * {
+  flex: 0 0 auto;
+}
+
+.pv-horizontal-scroller-content > slot::slotted(*) {
+  flex: 0 0 auto;
+}
+
+.pv-horizontal-scroller-control {
+  align-items: center;
+  bottom: 0;
+  display: flex;
+  opacity: 1;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  transition: opacity 150ms ease;
+  width: var(--pv-horizontal-scroller-fade-width, 56px);
+}
+
+.pv-horizontal-scroller-control > * {
+  pointer-events: auto;
+}
+
+.pv-horizontal-scroller-control-hidden {
+  opacity: 0;
+}
+
+.pv-horizontal-scroller-control-left {
+  justify-content: flex-start;
+  left: 0;
+  padding-left: var(--pv-horizontal-scroller-control-padding, 8px);
+}
+
+.pv-horizontal-scroller-control-right {
+  justify-content: flex-end;
+  padding-right: var(--pv-horizontal-scroller-control-padding, 8px);
+  right: 0;
+}
+
+.pv-horizontal-scroller-control-left-fade {
+  background: linear-gradient(90deg, var(--pv-horizontal-scroller-fade-background, #fff) 0%, transparent 100%);
+}
+
+.pv-horizontal-scroller-control-right-fade {
+  background: linear-gradient(270deg, var(--pv-horizontal-scroller-fade-background, #fff) 0%, transparent 100%);
+}
+
 .pv-org-switch {
   width: 100%;
   border: none;