@brytdesigns/web-component-keen-slider-scrollbar 1.1.9 → 3.0.0

package/dist/main/utils.js

@@ -1,53 +1,47 @@
-const srOnly = `border-width:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin-top:-1px !important;margin-bottom:-1px !important;margin-right:-1px !important;margin-left:-1px !important;overflow:hidden !important;padding-top:0 !important;padding-bottom:0 !important;padding-right:0 !important;padding-left:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important;`;
+//#region src/utils.ts
 function constrain(value, min = -Infinity, max = Infinity) {
-  return Math.max(Math.min(value, max), min);
+	return Math.max(Math.min(value, max), min);
 }
 function calculateMidpointPositionFromBP(bp, container, scrollbar) {
-  const bpRect = bp.getBoundingClientRect(), scrollbarRect = scrollbar.getBoundingClientRect(), containerRect = container.getBoundingClientRect(), relativeLeft = bpRect.left - containerRect.left, minX = 0, maxX = containerRect.width - scrollbarRect.width, relativeTop = bpRect.top - containerRect.top, minY = 0, maxY = containerRect.height - scrollbarRect.height, x = constrain(
-    relativeLeft + bpRect.width / 2 - scrollbarRect.width / 2,
-    minX,
-    maxX
-  ), y = constrain(
-    relativeTop + bpRect.height / 2 - scrollbarRect.height / 2,
-    minY,
-    maxY
-  );
-  return { x, y };
+	const bpRect = bp.getBoundingClientRect(), scrollbarRect = scrollbar.getBoundingClientRect(), containerRect = container.getBoundingClientRect(), relativeLeft = bpRect.left - containerRect.left, minX = 0, maxX = containerRect.width - scrollbarRect.width, relativeTop = bpRect.top - containerRect.top, minY = 0, maxY = containerRect.height - scrollbarRect.height;
+	return {
+		x: constrain(relativeLeft + bpRect.width / 2 - scrollbarRect.width / 2, minX, maxX),
+		y: constrain(relativeTop + bpRect.height / 2 - scrollbarRect.height / 2, minY, maxY)
+	};
 }
 function findClosestBreakpoint(position, breakpoints, container, scrollbar) {
-  const min = 0, max = breakpoints.length - 1;
-  let closestDiff = { x: Infinity, y: Infinity }, bpIndex = min;
-  for (let i = min; i <= max; i++) {
-    const bp = breakpoints[i];
-    if (!bp) continue;
-    const midpointP = calculateMidpointPositionFromBP(bp, container, scrollbar);
-    const diffX = Math.abs(midpointP.x - position.offsetX);
-    const diffY = Math.abs(midpointP.y - position.offsetY);
-    if (diffX <= closestDiff.x && diffY <= closestDiff.y) {
-      closestDiff = { x: diffX, y: diffY };
-      bpIndex = i;
-    }
-  }
-  return breakpoints[bpIndex];
+	const min = 0, max = breakpoints.length - 1;
+	let closestDiff = {
+		x: Infinity,
+		y: Infinity
+	}, bpIndex = min;
+	for (let i = min; i <= max; i++) {
+		const bp = breakpoints[i];
+		if (!bp) continue;
+		const midpointP = calculateMidpointPositionFromBP(bp, container, scrollbar);
+		const diffX = Math.abs(midpointP.x - position.offsetX);
+		const diffY = Math.abs(midpointP.y - position.offsetY);
+		if (diffX <= closestDiff.x && diffY <= closestDiff.y) {
+			closestDiff = {
+				x: diffX,
+				y: diffY
+			};
+			bpIndex = i;
+		}
+	}
+	return breakpoints[bpIndex];
 }
 function getMaxSlides(slider) {
-  const maxIdx = slider?.track?.details?.maxIdx || 1;
-  const perScroll = slider.options?.slides?.perScroll || 1;
-  if (!Number.isFinite(maxIdx)) {
-    return Math.ceil(slider.slides.length / perScroll);
-  }
-  return Math.ceil(maxIdx / perScroll) + 1;
+	const maxIdx = slider?.track?.details?.maxIdx || 1;
+	const perScroll = (slider.options?.slides)?.perScroll || 1;
+	if (!Number.isFinite(maxIdx)) return Math.ceil(slider.slides.length / perScroll);
+	return Math.ceil(maxIdx / perScroll) + 1;
 }
 function getRelativeBreakpoint(slider, breakpoints) {
-  const maxSlides = getMaxSlides(slider), perScroll = slider.options?.slides?.perScroll || 1;
-  const relativeIdx = constrain(
-    Math.ceil(slider.track.details.rel / perScroll),
-    0,
-    maxSlides - 1
-  );
-  return breakpoints[relativeIdx];
+	const maxSlides = getMaxSlides(slider), perScroll = (slider.options?.slides)?.perScroll || 1;
+	return breakpoints[constrain(Math.ceil(slider.track.details.rel / perScroll), 0, maxSlides - 1)];
 }
+//#endregion
+export { calculateMidpointPositionFromBP, constrain, findClosestBreakpoint, getMaxSlides, getRelativeBreakpoint };
 
-export { calculateMidpointPositionFromBP, constrain, findClosestBreakpoint, getMaxSlides, getRelativeBreakpoint, srOnly };
-//# sourceMappingURL=utils.js.map
 //# sourceMappingURL=utils.js.map

package/dist/main/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils.ts"],"names":[],"mappings":"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","file":"utils.js","sourcesContent":["import type { KeenSliderInstance } from \"@brytdesigns/web-component-keen-slider\";\nimport type { ICustomElement } from \"component-register\";\nimport type { DragEventData } from \"@neodrag/vanilla\";\n\nexport const srOnly = `border-width:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin-top:-1px !important;margin-bottom:-1px !important;margin-right:-1px !important;margin-left:-1px !important;overflow:hidden !important;padding-top:0 !important;padding-bottom:0 !important;padding-right:0 !important;padding-left:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important;`;\n\nexport function constrain(value: number, min = -Infinity, max = Infinity) {\n  return Math.max(Math.min(value, max), min);\n}\n\nexport function calculateMidpointPositionFromBP(\n  bp: Element,\n  container: HTMLElement,\n  scrollbar: HTMLElement,\n) {\n  const bpRect = bp.getBoundingClientRect(),\n    scrollbarRect = scrollbar.getBoundingClientRect(),\n    containerRect = container.getBoundingClientRect(),\n    relativeLeft = bpRect.left - containerRect.left,\n    minX = 0,\n    maxX = containerRect.width - scrollbarRect.width,\n    relativeTop = bpRect.top - containerRect.top,\n    minY = 0,\n    maxY = containerRect.height - scrollbarRect.height,\n    x = constrain(\n      relativeLeft + bpRect.width / 2 - scrollbarRect.width / 2,\n      minX,\n      maxX,\n    ),\n    y = constrain(\n      relativeTop + bpRect.height / 2 - scrollbarRect.height / 2,\n      minY,\n      maxY,\n    );\n\n  return { x, y };\n}\n\nexport function findClosestBreakpoint(\n  position: DragEventData,\n  breakpoints: HTMLCollection,\n  container: HTMLElement,\n  scrollbar: HTMLElement,\n) {\n  const min = 0,\n    max = breakpoints.length - 1;\n\n  let closestDiff = { x: Infinity, y: Infinity },\n    bpIndex = min;\n\n  for (let i = min; i <= max; i++) {\n    const bp = breakpoints[i];\n    if (!bp) continue;\n    const midpointP = calculateMidpointPositionFromBP(bp, container, scrollbar);\n    const diffX = Math.abs(midpointP.x - position.offsetX);\n    const diffY = Math.abs(midpointP.y - position.offsetY);\n    if (diffX <= closestDiff.x && diffY <= closestDiff.y) {\n      closestDiff = { x: diffX, y: diffY };\n      bpIndex = i;\n    }\n  }\n\n  return breakpoints[bpIndex];\n}\n\nexport function getMaxSlides(slider: KeenSliderInstance) {\n  const maxIdx = slider?.track?.details?.maxIdx || 1;\n  const perScroll = (slider.options?.slides as any)?.perScroll || 1;\n\n  if (!Number.isFinite(maxIdx)) {\n    return Math.ceil(slider.slides.length / perScroll);\n  }\n\n  return Math.ceil(maxIdx / perScroll) + 1;\n}\n\nexport function getRelativeBreakpoint(\n  slider: KeenSliderInstance,\n  breakpoints: HTMLCollection,\n) {\n  const maxSlides = getMaxSlides(slider),\n    perScroll = (slider.options?.slides as any)?.perScroll || 1;\n\n  const relativeIdx = constrain(\n    Math.ceil(slider.track.details.rel / perScroll),\n    0,\n    maxSlides - 1,\n  );\n\n  return breakpoints[relativeIdx];\n}\n"]}
+{"version":3,"file":"utils.js","names":[],"sources":["../../src/utils.ts"],"sourcesContent":["import type { KeenSliderInstance } from \"@brytdesigns/web-component-keen-slider\";\nimport type { DragEventData } from \"@neodrag/vanilla\";\nimport type { ICustomElement } from \"component-register\";\n\nexport function constrain(value: number, min = -Infinity, max = Infinity) {\n\treturn Math.max(Math.min(value, max), min);\n}\n\nexport function calculateMidpointPositionFromBP(\n\tbp: Element,\n\tcontainer: HTMLElement,\n\tscrollbar: HTMLElement,\n) {\n\tconst bpRect = bp.getBoundingClientRect(),\n\t\tscrollbarRect = scrollbar.getBoundingClientRect(),\n\t\tcontainerRect = container.getBoundingClientRect(),\n\t\trelativeLeft = bpRect.left - containerRect.left,\n\t\tminX = 0,\n\t\tmaxX = containerRect.width - scrollbarRect.width,\n\t\trelativeTop = bpRect.top - containerRect.top,\n\t\tminY = 0,\n\t\tmaxY = containerRect.height - scrollbarRect.height,\n\t\tx = constrain(\n\t\t\trelativeLeft + bpRect.width / 2 - scrollbarRect.width / 2,\n\t\t\tminX,\n\t\t\tmaxX,\n\t\t),\n\t\ty = constrain(\n\t\t\trelativeTop + bpRect.height / 2 - scrollbarRect.height / 2,\n\t\t\tminY,\n\t\t\tmaxY,\n\t\t);\n\n\treturn { x, y };\n}\n\nexport function findClosestBreakpoint(\n\tposition: DragEventData,\n\tbreakpoints: HTMLCollection,\n\tcontainer: HTMLElement,\n\tscrollbar: HTMLElement,\n) {\n\tconst min = 0,\n\t\tmax = breakpoints.length - 1;\n\n\tlet closestDiff = { x: Infinity, y: Infinity },\n\t\tbpIndex = min;\n\n\tfor (let i = min; i <= max; i++) {\n\t\tconst bp = breakpoints[i];\n\t\tif (!bp) continue;\n\t\tconst midpointP = calculateMidpointPositionFromBP(bp, container, scrollbar);\n\t\tconst diffX = Math.abs(midpointP.x - position.offsetX);\n\t\tconst diffY = Math.abs(midpointP.y - position.offsetY);\n\t\tif (diffX <= closestDiff.x && diffY <= closestDiff.y) {\n\t\t\tclosestDiff = { x: diffX, y: diffY };\n\t\t\tbpIndex = i;\n\t\t}\n\t}\n\n\treturn breakpoints[bpIndex];\n}\n\nexport function getMaxSlides(slider: KeenSliderInstance) {\n\tconst maxIdx = slider?.track?.details?.maxIdx || 1;\n\tconst perScroll = (slider.options?.slides as any)?.perScroll || 1;\n\n\tif (!Number.isFinite(maxIdx)) {\n\t\treturn Math.ceil(slider.slides.length / perScroll);\n\t}\n\n\treturn Math.ceil(maxIdx / perScroll) + 1;\n}\n\nexport function getRelativeBreakpoint(\n\tslider: KeenSliderInstance,\n\tbreakpoints: HTMLCollection,\n) {\n\tconst maxSlides = getMaxSlides(slider),\n\t\tperScroll = (slider.options?.slides as any)?.perScroll || 1;\n\n\tconst relativeIdx = constrain(\n\t\tMath.ceil(slider.track.details.rel / perScroll),\n\t\t0,\n\t\tmaxSlides - 1,\n\t);\n\n\treturn breakpoints[relativeIdx];\n}\n"],"mappings":";AAIA,SAAgB,UAAU,OAAe,MAAM,WAAW,MAAM,UAAU;CACzE,OAAO,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,GAAG;AAC1C;AAEA,SAAgB,gCACf,IACA,WACA,WACC;CACD,MAAM,SAAS,GAAG,sBAAsB,GACvC,gBAAgB,UAAU,sBAAsB,GAChD,gBAAgB,UAAU,sBAAsB,GAChD,eAAe,OAAO,OAAO,cAAc,MAC3C,OAAO,GACP,OAAO,cAAc,QAAQ,cAAc,OAC3C,cAAc,OAAO,MAAM,cAAc,KACzC,OAAO,GACP,OAAO,cAAc,SAAS,cAAc;CAY7C,OAAO;EAAE,GAXJ,UACH,eAAe,OAAO,QAAQ,IAAI,cAAc,QAAQ,GACxD,MACA,IAQO;EAAG,GANP,UACH,cAAc,OAAO,SAAS,IAAI,cAAc,SAAS,GACzD,MACA,IAGU;CAAE;AACf;AAEA,SAAgB,sBACf,UACA,aACA,WACA,WACC;CACD,MAAM,MAAM,GACX,MAAM,YAAY,SAAS;CAE5B,IAAI,cAAc;EAAE,GAAG;EAAU,GAAG;CAAS,GAC5C,UAAU;CAEX,KAAK,IAAI,IAAI,KAAK,KAAK,KAAK,KAAK;EAChC,MAAM,KAAK,YAAY;EACvB,IAAI,CAAC,IAAI;EACT,MAAM,YAAY,gCAAgC,IAAI,WAAW,SAAS;EAC1E,MAAM,QAAQ,KAAK,IAAI,UAAU,IAAI,SAAS,OAAO;EACrD,MAAM,QAAQ,KAAK,IAAI,UAAU,IAAI,SAAS,OAAO;EACrD,IAAI,SAAS,YAAY,KAAK,SAAS,YAAY,GAAG;GACrD,cAAc;IAAE,GAAG;IAAO,GAAG;GAAM;GACnC,UAAU;EACX;CACD;CAEA,OAAO,YAAY;AACpB;AAEA,SAAgB,aAAa,QAA4B;CACxD,MAAM,SAAS,QAAQ,OAAO,SAAS,UAAU;CACjD,MAAM,aAAa,OAAO,SAAS,OAAA,EAAgB,aAAa;CAEhE,IAAI,CAAC,OAAO,SAAS,MAAM,GAC1B,OAAO,KAAK,KAAK,OAAO,OAAO,SAAS,SAAS;CAGlD,OAAO,KAAK,KAAK,SAAS,SAAS,IAAI;AACxC;AAEA,SAAgB,sBACf,QACA,aACC;CACD,MAAM,YAAY,aAAa,MAAM,GACpC,aAAa,OAAO,SAAS,OAAA,EAAgB,aAAa;CAQ3D,OAAO,YANa,UACnB,KAAK,KAAK,OAAO,MAAM,QAAQ,MAAM,SAAS,GAC9C,GACA,YAAY,CAGM;AACpB"}

package/dist/styles.css

@@ -1,123 +1,142 @@
 :root {
-  --keen-slider-scrollbar--thumb-color: #cbcbcb;
-  --keen-slider-scrollbar--track-color: #f8f8f8;
-  --keen-slider-scrollbar--padding: 0px;
-  --keen-slider-scrollbar--left: 0px;
-  --keen-slider-scrollbar--right: 0px;
-  --keen-slider-scrollbar--width: 100%;
-  --keen-slider-scrollbar--height: 5px;
-  --keen-slider-scrollbar--opacity: 1;
-  --keen-slider-scrollbar--mt: 2rem;
-  --keen-slider-scrollbar--mb: 2rem;
-  --keen-slider-scrollbar--ml: 2rem;
-  --keen-slider-scrollbar--mr: 2rem;
-  --keen-slider-scrollbar--border-radius: 1000rem;
-  --keen-slider-scrollbar--total-slides: 2;
+	--keen-slider-scrollbar--thumb-color: #cbcbcb;
+	--keen-slider-scrollbar--track-color: #f8f8f8;
+	--keen-slider-scrollbar--padding: 0px;
+	--keen-slider-scrollbar--left: 0px;
+	--keen-slider-scrollbar--right: 0px;
+	--keen-slider-scrollbar--width: 100%;
+	--keen-slider-scrollbar--height: 5px;
+	--keen-slider-scrollbar--opacity: 1;
+	--keen-slider-scrollbar--mt: 2rem;
+	--keen-slider-scrollbar--mb: 2rem;
+	--keen-slider-scrollbar--ml: 2rem;
+	--keen-slider-scrollbar--mr: 2rem;
+	--keen-slider-scrollbar--border-radius: 1000rem;
+	--keen-slider-scrollbar--total-slides: 2;
 }
 
 keen-slider-scrollbar {
-  display: block;
-  width: var(--keen-slider-scrollbar--width);
-  height: var(--keen-slider-scrollbar--height);
-  border-radius: var(--keen-slider-scrollbar--border-radius);
-  cursor: pointer;
-  position: relative;
-  opacity: var(--keen-slider-scrollbar--opacity);
-  transition: opacity 300ms ease;
-  box-sizing: border-box;
+	display: block;
+	width: var(--keen-slider-scrollbar--width);
+	height: var(--keen-slider-scrollbar--height);
+	border-radius: var(--keen-slider-scrollbar--border-radius);
+	cursor: pointer;
+	position: relative;
+	opacity: var(--keen-slider-scrollbar--opacity);
+	transition: opacity 300ms ease;
+	box-sizing: border-box;
 }
 
 keen-slider-scrollbar[is-vertical="false"] {
-  --keen-slider-scrollbar--width: 100%;
-  --keen-slider-scrollbar--height: 5px;
-  margin-top: var(--keen-slider-scrollbar--mt);
-  margin-bottom: var(--keen-slider-scrollbar--mb);
+	--keen-slider-scrollbar--width: 100%;
+	--keen-slider-scrollbar--height: 5px;
+	margin-top: var(--keen-slider-scrollbar--mt);
+	margin-bottom: var(--keen-slider-scrollbar--mb);
 }
 
 keen-slider-scrollbar[is-vertical="true"] {
-  --keen-slider-scrollbar--height: 100%;
-  --keen-slider-scrollbar--width: 5px;
-  margin-left: var(--keen-slider-scrollbar--ml);
-  margin-right: var(--keen-slider-scrollbar--mr);
+	--keen-slider-scrollbar--height: 100%;
+	--keen-slider-scrollbar--width: 5px;
+	margin-left: var(--keen-slider-scrollbar--ml);
+	margin-right: var(--keen-slider-scrollbar--mr);
 }
 
 keen-slider-scrollbar[is-hidden="true"] {
-  --keen-slider-scrollbar--opacity: 0;
+	--keen-slider-scrollbar--opacity: 0;
 
-  visibility: hidden;
+	visibility: hidden;
 }
 
 keen-slider-scrollbar::before {
-  content: "";
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background-color: var(--keen-slider-scrollbar--track-color);
-  border-radius: var(--keen-slider-scrollbar--border-radius);
-  top: 0;
-  box-sizing: border-box;
+	content: "";
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	background-color: var(--keen-slider-scrollbar--track-color);
+	border-radius: var(--keen-slider-scrollbar--border-radius);
+	top: 0;
+	box-sizing: border-box;
 }
 
 keen-slider-scrollbar .keen-slider-scrollbar__thumb {
-  display: block;
-  position: relative;
-  background: var(--keen-slider-scrollbar--thumb-color);
-  border-radius: var(--keen-slider-scrollbar--border-radius);
-  box-sizing: border-box;
-  z-index: 2;
+	display: block;
+	position: relative;
+	background: var(--keen-slider-scrollbar--thumb-color);
+	border-radius: var(--keen-slider-scrollbar--border-radius);
+	box-sizing: border-box;
+	z-index: 2;
 }
 
 keen-slider-scrollbar[is-vertical="false"] .keen-slider-scrollbar__thumb {
-  left: 0;
-  top: 50% !important;
-  transform: translate3d(0, -50%, 0);
-  max-width: calc(
-    var(--keen-slider-scrollbar--width) /
-      var(--keen-slider-scrollbar--total-slides)
-  );
-  width: 100%;
-  min-width: 10%;
-  height: 100%;
+	left: 0;
+	top: 50% !important;
+	transform: translate3d(0, -50%, 0);
+	max-width: calc(
+		var(--keen-slider-scrollbar--width) /
+		var(--keen-slider-scrollbar--total-slides)
+	);
+	width: 100%;
+	min-width: 10%;
+	height: 100%;
 }
 
 keen-slider-scrollbar[is-vertical="true"] .keen-slider-scrollbar__thumb {
-  left: 50% !important;
-  top: 0;
-  transform: translate3d(-50%, 0%, 0);
-  max-height: calc(
-    var(--keen-slider-scrollbar--height) /
-      var(--keen-slider-scrollbar--total-slides)
-  );
-  height: 100%;
-  min-height: 10%;
-  width: 100%;
+	left: 50% !important;
+	top: 0;
+	transform: translate3d(-50%, 0%, 0);
+	max-height: calc(
+		var(--keen-slider-scrollbar--height) /
+		var(--keen-slider-scrollbar--total-slides)
+	);
+	height: 100%;
+	min-height: 10%;
+	width: 100%;
 }
 
 keen-slider-scrollbar .keen-slider-scrollbar__breakpoints {
-  z-index: 1;
-  position: absolute;
-  display: grid;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  list-style: none;
-  margin: 0;
-  padding: 0;
+	z-index: 1;
+	position: absolute;
+	display: grid;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	list-style: none;
+	margin: 0;
+	padding: 0;
 }
 
 keen-slider-scrollbar[is-vertical="false"] .keen-slider-scrollbar__breakpoints {
-  grid-auto-rows: auto;
-  grid-template-columns: repeat(
-    var(--keen-slider-scrollbar--total-slides, 1),
-    1fr
-  );
+	grid-auto-rows: auto;
+	grid-template-columns: repeat(
+			var(--keen-slider-scrollbar--total-slides, 1),
+			1fr
+		);
 }
 
 keen-slider-scrollbar[is-vertical="true"] .keen-slider-scrollbar__breakpoints {
-  grid-auto-columns: auto;
-  grid-template-rows: repeat(
-    var(--keen-slider-scrollbar--total-slides, 1),
-    1fr
-  );
+	grid-auto-columns: auto;
+	grid-template-rows: repeat(
+			var(--keen-slider-scrollbar--total-slides, 1),
+			1fr
+		);
+}
+
+/* The breakpoint controls. The <li> is the grid cell; the button fills it so a
+   pointer or a focus ring lands on something the size of the breakpoint rather
+   than on a 1px visually-hidden box. */
+keen-slider-scrollbar .keen-slider-scrollbar__breakpoint {
+	display: block;
+}
+
+keen-slider-scrollbar .keen-slider-scrollbar__breakpoint > button {
+	display: block;
+	width: 100%;
+	height: 100%;
+	margin: 0;
+	padding: 0;
+	border: 0;
+	background: none;
+	cursor: pointer;
+	appearance: none;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brytdesigns/web-component-keen-slider-scrollbar",
-  "version": "1.1.9",
+  "version": "3.0.0",
   "description": "Keen slider scrollbar web component",
   "main": "./dist/main/index.js",
   "module": "./dist/main/index.js",
@@ -9,7 +9,7 @@
   "exports": {
     ".": {
       "types": "./dist/main/index.d.ts",
-      "module": "./dist/main/index.js"
+      "default": "./dist/main/index.js"
     },
     "./styles.css": "./dist/styles.css"
   },
@@ -20,21 +20,21 @@
   "author": "Bryt Designs",
   "license": "ISC",
   "dependencies": {
-    "@neodrag/vanilla": "^2.3.0",
+    "@brytdesigns/web-component-core": "3.0.0",
+    "@brytdesigns/web-component-keen-slider": "3.0.0",
+    "@neodrag/vanilla": "^2.3.1",
+    "@solidjs/web": "2.0.0-rc.14",
     "component-register": "0.8.7",
-    "motion": "^12.40.0",
+    "motion": "^12.43.0",
     "popmotion": "^11.0.5",
-    "solid-element": "^1.9.1",
-    "solid-js": "^1.9.9",
-    "@brytdesigns/web-component-core": "1.1.7",
-    "@brytdesigns/web-component-keen-slider": "1.2.3"
+    "solid-js": "2.0.0-rc.14"
   },
   "devDependencies": {
-    "dts-bundle-generator": "^9.5.1",
-    "tsup": "^8.4.0"
+    "@repo/vite-config": "0.0.0",
+    "vite": "^8.2.2"
   },
   "scripts": {
-    "build": "tsup --clean",
+    "build": "vite build",
     "typecheck": "tsc --noEmit"
   }
 }