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

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

@@ -1560,38 +1560,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 {
@@ -3258,6 +3431,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@turquoisehealth/pit-viper",
-  "version": "2.194.3-dev.2",
+  "version": "2.194.4",
   "description": "Turquoise Health's design system.",
   "main": "README.md",
   "publishConfig": {
@@ -133,23 +133,23 @@
     }
   },
   "dependencies": {
-    "@11ty/eleventy": "^3.0.0",
-    "@11ty/eleventy-navigation": "^0.3.5",
-    "@11ty/eleventy-plugin-syntaxhighlight": "^4.2.0",
-    "@testing-library/user-event": "^14.6.1",
-    "dayjs": "^1.11.13",
-    "eleventy-plugin-svg-sprite": "^2.4.0",
-    "eleventy-plugin-toc": "^1.1.5",
-    "husky": "^9.1.7",
-    "markdown-it-anchor": "^8.6.6",
-    "markdown-it-attrs": "^4.1.6",
-    "npm-run-all": "^4.1.5",
+    "@11ty/eleventy": "3.1.5",
+    "@11ty/eleventy-navigation": "0.3.5",
+    "@11ty/eleventy-plugin-syntaxhighlight": "4.2.0",
+    "@testing-library/user-event": "14.6.1",
+    "dayjs": "1.11.20",
+    "eleventy-plugin-svg-sprite": "2.4.6",
+    "eleventy-plugin-toc": "1.1.5",
+    "husky": "9.1.7",
+    "markdown-it-anchor": "8.6.7",
+    "markdown-it-attrs": "4.3.1",
+    "npm-run-all": "4.1.5",
     "sass": "1.77.6"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.29.4",
-    "pagefind": "^1.3.0",
-    "tsx": "^4.0.0"
+    "@changesets/cli": "2.30.0",
+    "pagefind": "1.4.0",
+    "tsx": "4.21.0"
   },
   "pnpm": {
     "onlyBuiltDependencies": [