@brytdesigns/web-component-keen-slider-scrollbar 1.0.20 → 1.1.0

package/dist/esm/index.js

@@ -1,11 +1,22 @@
-import { customShadowlessElement, correctElementType } from '@brytdesigns/web-component-utils';
+import { customShadowlessElement, correctElementType } from '@brytdesigns/web-component-core/utils';
 import html from 'solid-js/html';
-import { createMemo, createSignal, on, createEffect, onCleanup, Show, For } from 'solid-js';
-import { addPlugin } from '@brytdesigns/web-component-keen-slider';
+import { createSignal, createMemo, on, createEffect, onCleanup, batch, Show, For } from 'solid-js';
+import { withKeenSliderElementContext } from '@brytdesigns/web-component-keen-slider';
 import { Draggable } from '@neodrag/vanilla';
 import { animate } from 'popmotion';
 
-// src/index.ts
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/components/keen-slider-scrollbar.ts
+var keen_slider_scrollbar_exports = {};
+__export(keen_slider_scrollbar_exports, {
+  Component: () => Component,
+  Name: () => Name
+});
 
 // src/utils.ts
 var 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;`;
@@ -64,26 +75,12 @@ function getRelativeBreakpoint(slider, breakpoints) {
 }
 
 // src/components/keen-slider-scrollbar.ts
-var KeenSliderScrollbar = (props, { element }) => {
+var Name = `keen-slider-scrollbar`;
+var Component = (props, { element }) => {
   if (!props.target)
     return console.warn(
-      "keen-slider-scrollbar: Needs a proper target in order to properly extend a keen slider."
+      `${Name}: Needs a proper target in order to properly extend a keen slider.`
     );
-  const target = createMemo(() => {
-    let targetEl = element;
-    if (props.target) targetEl = document.querySelector(props.target);
-    if (!targetEl)
-      return console.warn(
-        "keen-slider-scrollbar: Could not find the target element. Make sure it exists and is a keen-slider element."
-      );
-    if (targetEl.tagName !== "KEEN-SLIDER")
-      targetEl = targetEl.querySelector("keen-slider");
-    if (!targetEl)
-      return console.warn(
-        "keen-slider-scrollbar: Could not find the target element. Make sure it exists and is a keen-slider element."
-      );
-    return targetEl;
-  });
   const [slider, setSlider] = createSignal();
   const [thumb, setThumb] = createSignal(null);
   const [position, setPosition] = createSignal({ x: 0, y: 0 });
@@ -247,26 +244,34 @@ var KeenSliderScrollbar = (props, { element }) => {
       else element.setAttribute("is-hidden", `${false}`);
     })
   );
-  createEffect(() => {
-    const t = target();
-    if (!t) return;
-    const controller = new AbortController();
-    function plugin(slider2) {
-      setSlider(slider2);
-      slider2.on("created", function(slider3) {
-        setMaxIdx(slider3.track.details.maxIdx);
+  withKeenSliderElementContext(
+    () => {
+      const selector = props.target;
+      return () => {
+        let targetEl = element;
+        if (props.target) targetEl = document.querySelector(selector);
+        if (targetEl?.tagName !== "KEEN-SLIDER")
+          targetEl = targetEl.querySelector("keen-slider");
+        return targetEl;
+      };
+    },
+    () => null,
+    ([_, { addPlugin }]) => {
+      addPlugin((slider2) => {
+        setSlider(slider2);
+        slider2.on("created", function(slider3) {
+          setMaxIdx(slider3.track.details.maxIdx);
+        });
+        slider2.on(
+          "destroyed",
+          () => batch(() => {
+            setMaxIdx(0);
+            setSlider();
+          })
+        );
       });
     }
-    addPlugin({
-      target: t,
-      plugin,
-      controller
-    });
-    return onCleanup(() => {
-      controller.abort();
-      setSlider(void 0);
-    });
-  });
+  );
   function animateScrollbarPosition(p) {
     animate({
       from: position().x,
@@ -317,13 +322,13 @@ var KeenSliderScrollbar = (props, { element }) => {
 
 // src/index.ts
 customShadowlessElement(
-  "keen-slider-scrollbar",
+  keen_slider_scrollbar_exports.Name,
   {
     target: "",
     isHidden: true,
     isVertical: false
   },
-  correctElementType(KeenSliderScrollbar)
+  correctElementType(keen_slider_scrollbar_exports.Component)
 );
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils.ts","../../src/components/keen-slider-scrollbar.ts","../../src/index.ts"],"names":["perScroll","result","maxIdx","thumb","position","draggable","slider","maxSlides","p"],"mappings":"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","file":"index.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 perView = (slider.options?.slides as any)?.perView || 1;\n  if (perView === \"auto\") {\n    const maxIdx = slider?.track?.details?.maxIdx || 1;\n    const perScroll = (slider.options?.slides as any)?.perScroll || 1;\n    const result = Math.ceil((slider.slides.length - maxIdx) / perScroll) + 1;\n    return result;\n  }\n  const perScroll = (slider.options?.slides as any)?.perScroll || 1;\n  const result = Math.ceil((slider.slides.length - perView) / perScroll) + 1;\n  if (perScroll === 1 && perView === 1) return slider.slides.length;\n\n  return result;\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","import type { CorrectComponentType } from \"@brytdesigns/web-component-utils\";\n\nimport html from \"solid-js/html\";\nimport {\n  createEffect,\n  createSignal,\n  createMemo,\n  on,\n  onCleanup,\n  Show,\n  For,\n  type Accessor,\n} from \"solid-js\";\nimport {\n  addPlugin,\n  type KeenSliderInstance,\n} from \"@brytdesigns/web-component-keen-slider\";\nimport { Draggable } from \"@neodrag/vanilla\";\nimport { animate } from \"popmotion\";\n\nimport {\n  getRelativeBreakpoint,\n  calculateMidpointPositionFromBP,\n  findClosestBreakpoint,\n  getMaxSlides,\n  constrain,\n  srOnly,\n} from \"../utils.js\";\n\ntype KeenSliderScrollbarProps = {\n  target: string;\n  isHidden: boolean;\n  isVertical: boolean;\n};\n\nexport const KeenSliderScrollbar: CorrectComponentType<\n  KeenSliderScrollbarProps\n> = (props, { element }) => {\n  if (!props.target)\n    return console.warn(\n      \"keen-slider-scrollbar: Needs a proper target in order to properly extend a keen slider.\",\n    );\n  const target = createMemo(() => {\n    let targetEl: HTMLElement | null = element;\n    if (props.target) targetEl = document.querySelector(props.target);\n    if (!targetEl)\n      return console.warn(\n        \"keen-slider-scrollbar: Could not find the target element. Make sure it exists and is a keen-slider element.\",\n      );\n    if (targetEl.tagName !== \"KEEN-SLIDER\")\n      targetEl = targetEl.querySelector(\"keen-slider\");\n    if (!targetEl)\n      return console.warn(\n        \"keen-slider-scrollbar: Could not find the target element. Make sure it exists and is a keen-slider element.\",\n      );\n\n    return targetEl;\n  });\n\n  const [slider, setSlider] = createSignal<KeenSliderInstance>();\n\n  const [thumb, setThumb] = createSignal<HTMLElement | null>(null);\n  const [position, setPosition] = createSignal({ x: 0, y: 0 });\n  const [maxIdx, setMaxIdx] = createSignal(\n    slider()?.track?.details?.maxIdx || 0,\n  );\n  const [currentIdx, setCurrentIdx] = createSignal(0);\n\n  let breakpointsContainer: HTMLElement | null = null;\n\n  const maxSlides = createMemo(\n    on(maxIdx, (maxIdx) => {\n      if (!maxIdx) return 0;\n      const s = slider();\n      if (!s) return 0;\n      return getMaxSlides(s);\n    }),\n  );\n\n  const draggable = createMemo(\n    on(thumb, (thumb) => {\n      if (!thumb) return null;\n      const instance = new Draggable(thumb, {\n        axis: props.isVertical ? \"y\" : \"x\",\n        bounds: \"parent\",\n        gpuAcceleration: true,\n        position: position(),\n        transform({ offsetX, offsetY }) {\n          if (props.isVertical) return `translate3d(-50%, ${offsetY}px, 0)`;\n          return `translate3d(${offsetX}px, -50%, 0)`;\n        },\n        onDrag: ({ offsetX, offsetY }) =>\n          setPosition((p) => ({ ...p, x: offsetX, y: offsetY })),\n        onDragEnd: (position) => {\n          if (!breakpointsContainer) return;\n          const s = slider();\n          if (!s) return;\n          const bp = findClosestBreakpoint(\n            position,\n            breakpointsContainer.children,\n            element,\n            thumb,\n          );\n          if (!bp) return;\n          const p = calculateMidpointPositionFromBP(bp, element, thumb);\n          animateScrollbarPosition(p);\n          updateSliderPosition(bp, s);\n          setCurrentIdx(parseInt(bp.getAttribute(\"data-index\") || \"0\"));\n        },\n        ignoreMultitouch: true,\n      });\n\n      createEffect(\n        on(position, (position) => {\n          instance.updateOptions({\n            position,\n          });\n        }),\n      );\n\n      return instance;\n    }),\n  );\n\n  createEffect(\n    on(draggable, (draggable) => {\n      if (!draggable) return;\n      onCleanup(() => {\n        draggable.destroy();\n      });\n    }),\n  );\n\n  createEffect(\n    on(slider, (slider) => {\n      if (!slider) return;\n      element.setAttribute(\n        \"is-vertical\",\n        `${slider.options?.vertical || false}`,\n      );\n\n      function handleDetailsChanged(slider: KeenSliderInstance) {\n        element.setAttribute(\n          \"is-vertical\",\n          `${slider.options?.vertical || false}`,\n        );\n      }\n\n      slider.on(\"detailsChanged\", handleDetailsChanged);\n\n      return onCleanup(() => {\n        slider.on(\"detailsChanged\", handleDetailsChanged, true);\n      });\n    }),\n  );\n\n  createEffect(\n    on(maxSlides, (maxSlides) => {\n      const s = slider();\n      if (!s) return;\n      if (!maxSlides) return;\n      element.style.setProperty(\n        \"--keen-slider-scrollbar--total-slides\",\n        `${maxSlides}`,\n      );\n\n      function updateDetails(slider: KeenSliderInstance) {\n        setMaxIdx(slider.track.details.maxIdx);\n      }\n\n      function handleUpdate(slider: KeenSliderInstance) {\n        if (!breakpointsContainer) return;\n        const bp = breakpointsContainer.children[currentIdx()];\n        if (!bp) return;\n        const t = thumb();\n        if (!t) return;\n        const p = calculateMidpointPositionFromBP(bp, element, t);\n        setPosition(p);\n        setMaxIdx(slider.track.details.maxIdx);\n      }\n\n      s.on(\"created\", handleUpdate);\n      s.on(\"detailsChanged\", updateDetails);\n      s.on(\"updated\", handleUpdate);\n\n      return onCleanup(() => {\n        s.on(\"created\", handleUpdate, true);\n        s.on(\"detailsChanged\", updateDetails, true);\n        s.on(\"updated\", handleUpdate, true);\n      });\n    }),\n  );\n\n  createEffect(\n    on(\n      () => ({ thumb: thumb(), slider: slider() }),\n      ({ thumb, slider }) => {\n        if (!thumb || !slider) return;\n        function updateScrollbarPosition(slider: KeenSliderInstance) {\n          if (!breakpointsContainer) return;\n          const bp = getRelativeBreakpoint(\n            slider,\n            breakpointsContainer.children,\n          );\n          if (!bp) return;\n          if (!thumb) return;\n          const position = calculateMidpointPositionFromBP(bp, element, thumb);\n          animateScrollbarPosition(position);\n          setCurrentIdx(parseInt(bp.getAttribute(\"data-index\") || \"0\"));\n        }\n        slider.on(\"slideChanged\", updateScrollbarPosition);\n      },\n    ),\n  );\n\n  createEffect(\n    on(\n      () => ({ thumb: thumb(), slider: slider() }),\n      ({ thumb, slider }) => {\n        if (!thumb || !slider) return;\n\n        function handleClick(e: Event) {\n          const bp = e.target as HTMLElement | null;\n          if (!bp) return;\n          if (!bp.classList.contains(\"keen-slider-scrollbar__breakpoint\"))\n            return;\n          setCurrentIdx(parseInt(bp.getAttribute(\"data-index\") || \"0\"));\n          updateSliderPosition(bp, slider!);\n        }\n\n        element.addEventListener(\"click\", handleClick);\n\n        return onCleanup(() => {\n          element.removeEventListener(\"click\", handleClick);\n        });\n      },\n    ),\n  );\n\n  createEffect(\n    on(maxIdx, (maxIdx) => {\n      if (maxIdx === 0) element.setAttribute(\"is-hidden\", `${true}`);\n      else element.setAttribute(\"is-hidden\", `${false}`);\n    }),\n  );\n\n  createEffect(() => {\n    const t = target();\n    if (!t) return;\n\n    const controller = new AbortController();\n\n    function plugin(slider: KeenSliderInstance) {\n      setSlider(slider);\n      slider.on(\"created\", function (slider) {\n        setMaxIdx(slider.track.details.maxIdx);\n      });\n    }\n\n    addPlugin({\n      target: t,\n      plugin,\n      controller,\n    });\n\n    return onCleanup(() => {\n      controller.abort();\n      setSlider(undefined);\n    });\n  });\n\n  function animateScrollbarPosition(p: { x: number; y: number }) {\n    animate({\n      from: position().x,\n      to: p.x,\n      onUpdate(latest) {\n        return setPosition((p) => ({ ...p, x: latest }));\n      },\n    });\n    animate({\n      from: position().y,\n      to: p.y,\n      onUpdate(latest) {\n        return setPosition((p) => ({ ...p, y: latest }));\n      },\n    });\n  }\n\n  function updateSliderPosition(bp: Element, slider: KeenSliderInstance) {\n    const idx = constrain(\n      parseInt(bp.getAttribute(\"data-index\") || \"0\") *\n      ((slider?.options?.slides as any)?.perScroll || 1),\n      0,\n      slider.track.details.maxIdx,\n    );\n    slider.moveToIdx(idx);\n  }\n\n  return html`\n    <${Show} when=${() => maxSlides() > 1}>\n      <div\n        class=\"keen-slider-scrollbar__thumb\"\n        ref=${(el: HTMLElement) => setThumb(el)}\n      ></div>\n      <ul\n        class=\"keen-slider-scrollbar__breakpoints\"\n        ref=${(el: HTMLElement) => (breakpointsContainer = el)}\n      >\n        <${For} each=${() => Array(maxSlides()).fill(0)}>\n          ${(_: number, idx: Accessor<number>) => html`\n            <li class=\"keen-slider-scrollbar__breakpoint\" data-index=${idx}>\n              <button type=\"button\" style=${srOnly}>\n                <span style=${srOnly}> Breakpoint ${idx} </span>\n              </button>\n            </li>\n          `}\n        <//>\n      </ul>\n    <//>\n  `;\n};\n","import {\n  customShadowlessElement,\n  correctElementType,\n} from \"@brytdesigns/web-component-utils\";\nimport { KeenSliderScrollbar } from \"./components/keen-slider-scrollbar.js\";\n\ncustomShadowlessElement(\n  \"keen-slider-scrollbar\",\n  {\n    target: \"\",\n    isHidden: true,\n    isVertical: false,\n  },\n  correctElementType(KeenSliderScrollbar)\n);\n"]}
+{"version":3,"sources":["../../src/components/keen-slider-scrollbar.ts","../../src/utils.ts","../../src/index.ts"],"names":["perScroll","result","maxIdx","thumb","position","draggable","slider","maxSlides","p"],"mappings":"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","file":"index.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\n\nimport html from \"solid-js/html\";\nimport {\n  createEffect,\n  createSignal,\n  createMemo,\n  on,\n  onCleanup,\n  batch,\n  Show,\n  For,\n  type Accessor,\n} from \"solid-js\";\nimport {\n  withKeenSliderElementContext,\n  type KeenSliderInstance,\n} from \"@brytdesigns/web-component-keen-slider\";\nimport { Draggable } from \"@neodrag/vanilla\";\nimport { animate } from \"popmotion\";\n\nimport {\n  getRelativeBreakpoint,\n  calculateMidpointPositionFromBP,\n  findClosestBreakpoint,\n  getMaxSlides,\n  constrain,\n  srOnly,\n} from \"../utils.js\";\n\ntype Props = {\n  target: string;\n  isHidden: boolean;\n  isVertical: boolean;\n};\n\nexport const Name = `keen-slider-scrollbar`;\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n  if (!props.target)\n    return console.warn(\n      `${Name}: Needs a proper target in order to properly extend a keen slider.`,\n    );\n\n  const [slider, setSlider] = createSignal<KeenSliderInstance>();\n\n  const [thumb, setThumb] = createSignal<HTMLElement | null>(null);\n  const [position, setPosition] = createSignal({ x: 0, y: 0 });\n  const [maxIdx, setMaxIdx] = createSignal(\n    slider()?.track?.details?.maxIdx || 0,\n  );\n  const [currentIdx, setCurrentIdx] = createSignal(0);\n\n  let breakpointsContainer: HTMLElement | null = null;\n\n  const maxSlides = createMemo(\n    on(maxIdx, (maxIdx) => {\n      if (!maxIdx) return 0;\n      const s = slider();\n      if (!s) return 0;\n      return getMaxSlides(s);\n    }),\n  );\n\n  const draggable = createMemo(\n    on(thumb, (thumb) => {\n      if (!thumb) return null;\n      const instance = new Draggable(thumb, {\n        axis: props.isVertical ? \"y\" : \"x\",\n        bounds: \"parent\",\n        gpuAcceleration: true,\n        position: position(),\n        transform({ offsetX, offsetY }) {\n          if (props.isVertical) return `translate3d(-50%, ${offsetY}px, 0)`;\n          return `translate3d(${offsetX}px, -50%, 0)`;\n        },\n        onDrag: ({ offsetX, offsetY }) =>\n          setPosition((p) => ({ ...p, x: offsetX, y: offsetY })),\n        onDragEnd: (position) => {\n          if (!breakpointsContainer) return;\n          const s = slider();\n          if (!s) return;\n          const bp = findClosestBreakpoint(\n            position,\n            breakpointsContainer.children,\n            element,\n            thumb,\n          );\n          if (!bp) return;\n          const p = calculateMidpointPositionFromBP(bp, element, thumb);\n          animateScrollbarPosition(p);\n          updateSliderPosition(bp, s);\n          setCurrentIdx(parseInt(bp.getAttribute(\"data-index\") || \"0\"));\n        },\n        ignoreMultitouch: true,\n      });\n\n      createEffect(\n        on(position, (position) => {\n          instance.updateOptions({\n            position,\n          });\n        }),\n      );\n\n      return instance;\n    }),\n  );\n\n  createEffect(\n    on(draggable, (draggable) => {\n      if (!draggable) return;\n      onCleanup(() => {\n        draggable.destroy();\n      });\n    }),\n  );\n\n  createEffect(\n    on(slider, (slider) => {\n      if (!slider) return;\n      element.setAttribute(\n        \"is-vertical\",\n        `${slider.options?.vertical || false}`,\n      );\n\n      function handleDetailsChanged(slider: KeenSliderInstance) {\n        element.setAttribute(\n          \"is-vertical\",\n          `${slider.options?.vertical || false}`,\n        );\n      }\n\n      slider.on(\"detailsChanged\", handleDetailsChanged);\n\n      return onCleanup(() => {\n        slider.on(\"detailsChanged\", handleDetailsChanged, true);\n      });\n    }),\n  );\n\n  createEffect(\n    on(maxSlides, (maxSlides) => {\n      const s = slider();\n      if (!s) return;\n      if (!maxSlides) return;\n      element.style.setProperty(\n        \"--keen-slider-scrollbar--total-slides\",\n        `${maxSlides}`,\n      );\n\n      function updateDetails(slider: KeenSliderInstance) {\n        setMaxIdx(slider.track.details.maxIdx);\n      }\n\n      function handleUpdate(slider: KeenSliderInstance) {\n        if (!breakpointsContainer) return;\n        const bp = breakpointsContainer.children[currentIdx()];\n        if (!bp) return;\n        const t = thumb();\n        if (!t) return;\n        const p = calculateMidpointPositionFromBP(bp, element, t);\n        setPosition(p);\n        setMaxIdx(slider.track.details.maxIdx);\n      }\n\n      s.on(\"created\", handleUpdate);\n      s.on(\"detailsChanged\", updateDetails);\n      s.on(\"updated\", handleUpdate);\n\n      return onCleanup(() => {\n        s.on(\"created\", handleUpdate, true);\n        s.on(\"detailsChanged\", updateDetails, true);\n        s.on(\"updated\", handleUpdate, true);\n      });\n    }),\n  );\n\n  createEffect(\n    on(\n      () => ({ thumb: thumb(), slider: slider() }),\n      ({ thumb, slider }) => {\n        if (!thumb || !slider) return;\n        function updateScrollbarPosition(slider: KeenSliderInstance) {\n          if (!breakpointsContainer) return;\n          const bp = getRelativeBreakpoint(\n            slider,\n            breakpointsContainer.children,\n          );\n          if (!bp) return;\n          if (!thumb) return;\n          const position = calculateMidpointPositionFromBP(bp, element, thumb);\n          animateScrollbarPosition(position);\n          setCurrentIdx(parseInt(bp.getAttribute(\"data-index\") || \"0\"));\n        }\n        slider.on(\"slideChanged\", updateScrollbarPosition);\n      },\n    ),\n  );\n\n  createEffect(\n    on(\n      () => ({ thumb: thumb(), slider: slider() }),\n      ({ thumb, slider }) => {\n        if (!thumb || !slider) return;\n\n        function handleClick(e: Event) {\n          const bp = e.target as HTMLElement | null;\n          if (!bp) return;\n          if (!bp.classList.contains(\"keen-slider-scrollbar__breakpoint\"))\n            return;\n          setCurrentIdx(parseInt(bp.getAttribute(\"data-index\") || \"0\"));\n          updateSliderPosition(bp, slider!);\n        }\n\n        element.addEventListener(\"click\", handleClick);\n\n        return onCleanup(() => {\n          element.removeEventListener(\"click\", handleClick);\n        });\n      },\n    ),\n  );\n\n  createEffect(\n    on(maxIdx, (maxIdx) => {\n      if (maxIdx === 0) element.setAttribute(\"is-hidden\", `${true}`);\n      else element.setAttribute(\"is-hidden\", `${false}`);\n    }),\n  );\n\n  withKeenSliderElementContext(\n    () => {\n      const selector = props.target;\n      return () => {\n        let targetEl: Element | null = element;\n        if (props.target) targetEl = document.querySelector(selector);\n        if (targetEl?.tagName !== \"KEEN-SLIDER\")\n          targetEl = targetEl!.querySelector(\"keen-slider\");\n        return targetEl!;\n      };\n    },\n    () => null,\n    ([_, { addPlugin }]) => {\n      addPlugin((slider) => {\n        setSlider(slider);\n\n        slider.on(\"created\", function (slider) {\n          setMaxIdx(slider.track.details.maxIdx);\n        });\n\n        slider.on(\"destroyed\", () =>\n          batch(() => {\n            setMaxIdx(0);\n            setSlider();\n          }),\n        );\n      });\n    },\n  );\n\n  function animateScrollbarPosition(p: { x: number; y: number }) {\n    animate({\n      from: position().x,\n      to: p.x,\n      onUpdate(latest) {\n        return setPosition((p) => ({ ...p, x: latest }));\n      },\n    });\n    animate({\n      from: position().y,\n      to: p.y,\n      onUpdate(latest) {\n        return setPosition((p) => ({ ...p, y: latest }));\n      },\n    });\n  }\n\n  function updateSliderPosition(bp: Element, slider: KeenSliderInstance) {\n    const idx = constrain(\n      parseInt(bp.getAttribute(\"data-index\") || \"0\") *\n        ((slider?.options?.slides as any)?.perScroll || 1),\n      0,\n      slider.track.details.maxIdx,\n    );\n    slider.moveToIdx(idx);\n  }\n\n  return html`\n    <${Show} when=${() => maxSlides() > 1}>\n      <div\n        class=\"keen-slider-scrollbar__thumb\"\n        ref=${(el: HTMLElement) => setThumb(el)}\n      ></div>\n      <ul\n        class=\"keen-slider-scrollbar__breakpoints\"\n        ref=${(el: HTMLElement) => (breakpointsContainer = el)}\n      >\n        <${For} each=${() => Array(maxSlides()).fill(0)}>\n          ${(_: number, idx: Accessor<number>) => html`\n            <li class=\"keen-slider-scrollbar__breakpoint\" data-index=${idx}>\n              <button type=\"button\" style=${srOnly}>\n                <span style=${srOnly}> Breakpoint ${idx} </span>\n              </button>\n            </li>\n          `}\n        <//>\n      </ul>\n    <//>\n  `;\n};\n","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 perView = (slider.options?.slides as any)?.perView || 1;\n  if (perView === \"auto\") {\n    const maxIdx = slider?.track?.details?.maxIdx || 1;\n    const perScroll = (slider.options?.slides as any)?.perScroll || 1;\n    const result = Math.ceil((slider.slides.length - maxIdx) / perScroll) + 1;\n    return result;\n  }\n  const perScroll = (slider.options?.slides as any)?.perScroll || 1;\n  const result = Math.ceil((slider.slides.length - perView) / perScroll) + 1;\n  if (perScroll === 1 && perView === 1) return slider.slides.length;\n\n  return result;\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","import {\n  customShadowlessElement,\n  correctElementType,\n} from \"@brytdesigns/web-component-core/utils\";\nimport { KeenSliderScrollbar } from \"./components/index.js\";\n\ncustomShadowlessElement(\n  KeenSliderScrollbar.Name,\n  {\n    target: \"\",\n    isHidden: true,\n    isVertical: false,\n  },\n  correctElementType(KeenSliderScrollbar.Component),\n);\n"]}

package/dist/main/components/index.js

@@ -1,3 +1,4 @@
-export * from './keen-slider-scrollbar.js';
+import * as keenSliderScrollbar_js from './keen-slider-scrollbar.js';
+export { keenSliderScrollbar_js as KeenSliderScrollbar };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/main/components/keen-slider-scrollbar.js

@@ -1,30 +1,16 @@
 import html from 'solid-js/html';
-import { createMemo, createSignal, on, createEffect, onCleanup, Show, For } from 'solid-js';
-import { addPlugin } from '@brytdesigns/web-component-keen-slider';
+import { createSignal, createMemo, on, createEffect, onCleanup, batch, Show, For } from 'solid-js';
+import { withKeenSliderElementContext } from '@brytdesigns/web-component-keen-slider';
 import { Draggable } from '@neodrag/vanilla';
 import { animate } from 'popmotion';
 import { getMaxSlides, srOnly, findClosestBreakpoint, calculateMidpointPositionFromBP, getRelativeBreakpoint, constrain } from '../utils.js';
 
-const KeenSliderScrollbar = (props, { element }) => {
+const Name = `keen-slider-scrollbar`;
+const Component = (props, { element }) => {
   if (!props.target)
     return console.warn(
-      "keen-slider-scrollbar: Needs a proper target in order to properly extend a keen slider."
+      `${Name}: Needs a proper target in order to properly extend a keen slider.`
     );
-  const target = createMemo(() => {
-    let targetEl = element;
-    if (props.target) targetEl = document.querySelector(props.target);
-    if (!targetEl)
-      return console.warn(
-        "keen-slider-scrollbar: Could not find the target element. Make sure it exists and is a keen-slider element."
-      );
-    if (targetEl.tagName !== "KEEN-SLIDER")
-      targetEl = targetEl.querySelector("keen-slider");
-    if (!targetEl)
-      return console.warn(
-        "keen-slider-scrollbar: Could not find the target element. Make sure it exists and is a keen-slider element."
-      );
-    return targetEl;
-  });
   const [slider, setSlider] = createSignal();
   const [thumb, setThumb] = createSignal(null);
   const [position, setPosition] = createSignal({ x: 0, y: 0 });
@@ -188,26 +174,34 @@ const KeenSliderScrollbar = (props, { element }) => {
       else element.setAttribute("is-hidden", `${false}`);
     })
   );
-  createEffect(() => {
-    const t = target();
-    if (!t) return;
-    const controller = new AbortController();
-    function plugin(slider2) {
-      setSlider(slider2);
-      slider2.on("created", function(slider3) {
-        setMaxIdx(slider3.track.details.maxIdx);
+  withKeenSliderElementContext(
+    () => {
+      const selector = props.target;
+      return () => {
+        let targetEl = element;
+        if (props.target) targetEl = document.querySelector(selector);
+        if (targetEl?.tagName !== "KEEN-SLIDER")
+          targetEl = targetEl.querySelector("keen-slider");
+        return targetEl;
+      };
+    },
+    () => null,
+    ([_, { addPlugin }]) => {
+      addPlugin((slider2) => {
+        setSlider(slider2);
+        slider2.on("created", function(slider3) {
+          setMaxIdx(slider3.track.details.maxIdx);
+        });
+        slider2.on(
+          "destroyed",
+          () => batch(() => {
+            setMaxIdx(0);
+            setSlider();
+          })
+        );
       });
     }
-    addPlugin({
-      target: t,
-      plugin,
-      controller
-    });
-    return onCleanup(() => {
-      controller.abort();
-      setSlider(void 0);
-    });
-  });
+  );
   function animateScrollbarPosition(p) {
     animate({
       from: position().x,
@@ -256,6 +250,6 @@ const KeenSliderScrollbar = (props, { element }) => {
   `;
 };
 
-export { KeenSliderScrollbar };
+export { Component, Name };
 //# sourceMappingURL=keen-slider-scrollbar.js.map
 //# sourceMappingURL=keen-slider-scrollbar.js.map

package/dist/main/components/keen-slider-scrollbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/keen-slider-scrollbar.ts"],"names":["maxIdx","thumb","position","draggable","slider","maxSlides","p"],"mappings":"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","file":"keen-slider-scrollbar.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-utils\";\n\nimport html from \"solid-js/html\";\nimport {\n  createEffect,\n  createSignal,\n  createMemo,\n  on,\n  onCleanup,\n  Show,\n  For,\n  type Accessor,\n} from \"solid-js\";\nimport {\n  addPlugin,\n  type KeenSliderInstance,\n} from \"@brytdesigns/web-component-keen-slider\";\nimport { Draggable } from \"@neodrag/vanilla\";\nimport { animate } from \"popmotion\";\n\nimport {\n  getRelativeBreakpoint,\n  calculateMidpointPositionFromBP,\n  findClosestBreakpoint,\n  getMaxSlides,\n  constrain,\n  srOnly,\n} from \"../utils.js\";\n\ntype KeenSliderScrollbarProps = {\n  target: string;\n  isHidden: boolean;\n  isVertical: boolean;\n};\n\nexport const KeenSliderScrollbar: CorrectComponentType<\n  KeenSliderScrollbarProps\n> = (props, { element }) => {\n  if (!props.target)\n    return console.warn(\n      \"keen-slider-scrollbar: Needs a proper target in order to properly extend a keen slider.\",\n    );\n  const target = createMemo(() => {\n    let targetEl: HTMLElement | null = element;\n    if (props.target) targetEl = document.querySelector(props.target);\n    if (!targetEl)\n      return console.warn(\n        \"keen-slider-scrollbar: Could not find the target element. Make sure it exists and is a keen-slider element.\",\n      );\n    if (targetEl.tagName !== \"KEEN-SLIDER\")\n      targetEl = targetEl.querySelector(\"keen-slider\");\n    if (!targetEl)\n      return console.warn(\n        \"keen-slider-scrollbar: Could not find the target element. Make sure it exists and is a keen-slider element.\",\n      );\n\n    return targetEl;\n  });\n\n  const [slider, setSlider] = createSignal<KeenSliderInstance>();\n\n  const [thumb, setThumb] = createSignal<HTMLElement | null>(null);\n  const [position, setPosition] = createSignal({ x: 0, y: 0 });\n  const [maxIdx, setMaxIdx] = createSignal(\n    slider()?.track?.details?.maxIdx || 0,\n  );\n  const [currentIdx, setCurrentIdx] = createSignal(0);\n\n  let breakpointsContainer: HTMLElement | null = null;\n\n  const maxSlides = createMemo(\n    on(maxIdx, (maxIdx) => {\n      if (!maxIdx) return 0;\n      const s = slider();\n      if (!s) return 0;\n      return getMaxSlides(s);\n    }),\n  );\n\n  const draggable = createMemo(\n    on(thumb, (thumb) => {\n      if (!thumb) return null;\n      const instance = new Draggable(thumb, {\n        axis: props.isVertical ? \"y\" : \"x\",\n        bounds: \"parent\",\n        gpuAcceleration: true,\n        position: position(),\n        transform({ offsetX, offsetY }) {\n          if (props.isVertical) return `translate3d(-50%, ${offsetY}px, 0)`;\n          return `translate3d(${offsetX}px, -50%, 0)`;\n        },\n        onDrag: ({ offsetX, offsetY }) =>\n          setPosition((p) => ({ ...p, x: offsetX, y: offsetY })),\n        onDragEnd: (position) => {\n          if (!breakpointsContainer) return;\n          const s = slider();\n          if (!s) return;\n          const bp = findClosestBreakpoint(\n            position,\n            breakpointsContainer.children,\n            element,\n            thumb,\n          );\n          if (!bp) return;\n          const p = calculateMidpointPositionFromBP(bp, element, thumb);\n          animateScrollbarPosition(p);\n          updateSliderPosition(bp, s);\n          setCurrentIdx(parseInt(bp.getAttribute(\"data-index\") || \"0\"));\n        },\n        ignoreMultitouch: true,\n      });\n\n      createEffect(\n        on(position, (position) => {\n          instance.updateOptions({\n            position,\n          });\n        }),\n      );\n\n      return instance;\n    }),\n  );\n\n  createEffect(\n    on(draggable, (draggable) => {\n      if (!draggable) return;\n      onCleanup(() => {\n        draggable.destroy();\n      });\n    }),\n  );\n\n  createEffect(\n    on(slider, (slider) => {\n      if (!slider) return;\n      element.setAttribute(\n        \"is-vertical\",\n        `${slider.options?.vertical || false}`,\n      );\n\n      function handleDetailsChanged(slider: KeenSliderInstance) {\n        element.setAttribute(\n          \"is-vertical\",\n          `${slider.options?.vertical || false}`,\n        );\n      }\n\n      slider.on(\"detailsChanged\", handleDetailsChanged);\n\n      return onCleanup(() => {\n        slider.on(\"detailsChanged\", handleDetailsChanged, true);\n      });\n    }),\n  );\n\n  createEffect(\n    on(maxSlides, (maxSlides) => {\n      const s = slider();\n      if (!s) return;\n      if (!maxSlides) return;\n      element.style.setProperty(\n        \"--keen-slider-scrollbar--total-slides\",\n        `${maxSlides}`,\n      );\n\n      function updateDetails(slider: KeenSliderInstance) {\n        setMaxIdx(slider.track.details.maxIdx);\n      }\n\n      function handleUpdate(slider: KeenSliderInstance) {\n        if (!breakpointsContainer) return;\n        const bp = breakpointsContainer.children[currentIdx()];\n        if (!bp) return;\n        const t = thumb();\n        if (!t) return;\n        const p = calculateMidpointPositionFromBP(bp, element, t);\n        setPosition(p);\n        setMaxIdx(slider.track.details.maxIdx);\n      }\n\n      s.on(\"created\", handleUpdate);\n      s.on(\"detailsChanged\", updateDetails);\n      s.on(\"updated\", handleUpdate);\n\n      return onCleanup(() => {\n        s.on(\"created\", handleUpdate, true);\n        s.on(\"detailsChanged\", updateDetails, true);\n        s.on(\"updated\", handleUpdate, true);\n      });\n    }),\n  );\n\n  createEffect(\n    on(\n      () => ({ thumb: thumb(), slider: slider() }),\n      ({ thumb, slider }) => {\n        if (!thumb || !slider) return;\n        function updateScrollbarPosition(slider: KeenSliderInstance) {\n          if (!breakpointsContainer) return;\n          const bp = getRelativeBreakpoint(\n            slider,\n            breakpointsContainer.children,\n          );\n          if (!bp) return;\n          if (!thumb) return;\n          const position = calculateMidpointPositionFromBP(bp, element, thumb);\n          animateScrollbarPosition(position);\n          setCurrentIdx(parseInt(bp.getAttribute(\"data-index\") || \"0\"));\n        }\n        slider.on(\"slideChanged\", updateScrollbarPosition);\n      },\n    ),\n  );\n\n  createEffect(\n    on(\n      () => ({ thumb: thumb(), slider: slider() }),\n      ({ thumb, slider }) => {\n        if (!thumb || !slider) return;\n\n        function handleClick(e: Event) {\n          const bp = e.target as HTMLElement | null;\n          if (!bp) return;\n          if (!bp.classList.contains(\"keen-slider-scrollbar__breakpoint\"))\n            return;\n          setCurrentIdx(parseInt(bp.getAttribute(\"data-index\") || \"0\"));\n          updateSliderPosition(bp, slider!);\n        }\n\n        element.addEventListener(\"click\", handleClick);\n\n        return onCleanup(() => {\n          element.removeEventListener(\"click\", handleClick);\n        });\n      },\n    ),\n  );\n\n  createEffect(\n    on(maxIdx, (maxIdx) => {\n      if (maxIdx === 0) element.setAttribute(\"is-hidden\", `${true}`);\n      else element.setAttribute(\"is-hidden\", `${false}`);\n    }),\n  );\n\n  createEffect(() => {\n    const t = target();\n    if (!t) return;\n\n    const controller = new AbortController();\n\n    function plugin(slider: KeenSliderInstance) {\n      setSlider(slider);\n      slider.on(\"created\", function (slider) {\n        setMaxIdx(slider.track.details.maxIdx);\n      });\n    }\n\n    addPlugin({\n      target: t,\n      plugin,\n      controller,\n    });\n\n    return onCleanup(() => {\n      controller.abort();\n      setSlider(undefined);\n    });\n  });\n\n  function animateScrollbarPosition(p: { x: number; y: number }) {\n    animate({\n      from: position().x,\n      to: p.x,\n      onUpdate(latest) {\n        return setPosition((p) => ({ ...p, x: latest }));\n      },\n    });\n    animate({\n      from: position().y,\n      to: p.y,\n      onUpdate(latest) {\n        return setPosition((p) => ({ ...p, y: latest }));\n      },\n    });\n  }\n\n  function updateSliderPosition(bp: Element, slider: KeenSliderInstance) {\n    const idx = constrain(\n      parseInt(bp.getAttribute(\"data-index\") || \"0\") *\n      ((slider?.options?.slides as any)?.perScroll || 1),\n      0,\n      slider.track.details.maxIdx,\n    );\n    slider.moveToIdx(idx);\n  }\n\n  return html`\n    <${Show} when=${() => maxSlides() > 1}>\n      <div\n        class=\"keen-slider-scrollbar__thumb\"\n        ref=${(el: HTMLElement) => setThumb(el)}\n      ></div>\n      <ul\n        class=\"keen-slider-scrollbar__breakpoints\"\n        ref=${(el: HTMLElement) => (breakpointsContainer = el)}\n      >\n        <${For} each=${() => Array(maxSlides()).fill(0)}>\n          ${(_: number, idx: Accessor<number>) => html`\n            <li class=\"keen-slider-scrollbar__breakpoint\" data-index=${idx}>\n              <button type=\"button\" style=${srOnly}>\n                <span style=${srOnly}> Breakpoint ${idx} </span>\n              </button>\n            </li>\n          `}\n        <//>\n      </ul>\n    <//>\n  `;\n};\n"]}
+{"version":3,"sources":["../../../src/components/keen-slider-scrollbar.ts"],"names":["maxIdx","thumb","position","draggable","slider","maxSlides","p"],"mappings":"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","file":"keen-slider-scrollbar.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\n\nimport html from \"solid-js/html\";\nimport {\n  createEffect,\n  createSignal,\n  createMemo,\n  on,\n  onCleanup,\n  batch,\n  Show,\n  For,\n  type Accessor,\n} from \"solid-js\";\nimport {\n  withKeenSliderElementContext,\n  type KeenSliderInstance,\n} from \"@brytdesigns/web-component-keen-slider\";\nimport { Draggable } from \"@neodrag/vanilla\";\nimport { animate } from \"popmotion\";\n\nimport {\n  getRelativeBreakpoint,\n  calculateMidpointPositionFromBP,\n  findClosestBreakpoint,\n  getMaxSlides,\n  constrain,\n  srOnly,\n} from \"../utils.js\";\n\ntype Props = {\n  target: string;\n  isHidden: boolean;\n  isVertical: boolean;\n};\n\nexport const Name = `keen-slider-scrollbar`;\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n  if (!props.target)\n    return console.warn(\n      `${Name}: Needs a proper target in order to properly extend a keen slider.`,\n    );\n\n  const [slider, setSlider] = createSignal<KeenSliderInstance>();\n\n  const [thumb, setThumb] = createSignal<HTMLElement | null>(null);\n  const [position, setPosition] = createSignal({ x: 0, y: 0 });\n  const [maxIdx, setMaxIdx] = createSignal(\n    slider()?.track?.details?.maxIdx || 0,\n  );\n  const [currentIdx, setCurrentIdx] = createSignal(0);\n\n  let breakpointsContainer: HTMLElement | null = null;\n\n  const maxSlides = createMemo(\n    on(maxIdx, (maxIdx) => {\n      if (!maxIdx) return 0;\n      const s = slider();\n      if (!s) return 0;\n      return getMaxSlides(s);\n    }),\n  );\n\n  const draggable = createMemo(\n    on(thumb, (thumb) => {\n      if (!thumb) return null;\n      const instance = new Draggable(thumb, {\n        axis: props.isVertical ? \"y\" : \"x\",\n        bounds: \"parent\",\n        gpuAcceleration: true,\n        position: position(),\n        transform({ offsetX, offsetY }) {\n          if (props.isVertical) return `translate3d(-50%, ${offsetY}px, 0)`;\n          return `translate3d(${offsetX}px, -50%, 0)`;\n        },\n        onDrag: ({ offsetX, offsetY }) =>\n          setPosition((p) => ({ ...p, x: offsetX, y: offsetY })),\n        onDragEnd: (position) => {\n          if (!breakpointsContainer) return;\n          const s = slider();\n          if (!s) return;\n          const bp = findClosestBreakpoint(\n            position,\n            breakpointsContainer.children,\n            element,\n            thumb,\n          );\n          if (!bp) return;\n          const p = calculateMidpointPositionFromBP(bp, element, thumb);\n          animateScrollbarPosition(p);\n          updateSliderPosition(bp, s);\n          setCurrentIdx(parseInt(bp.getAttribute(\"data-index\") || \"0\"));\n        },\n        ignoreMultitouch: true,\n      });\n\n      createEffect(\n        on(position, (position) => {\n          instance.updateOptions({\n            position,\n          });\n        }),\n      );\n\n      return instance;\n    }),\n  );\n\n  createEffect(\n    on(draggable, (draggable) => {\n      if (!draggable) return;\n      onCleanup(() => {\n        draggable.destroy();\n      });\n    }),\n  );\n\n  createEffect(\n    on(slider, (slider) => {\n      if (!slider) return;\n      element.setAttribute(\n        \"is-vertical\",\n        `${slider.options?.vertical || false}`,\n      );\n\n      function handleDetailsChanged(slider: KeenSliderInstance) {\n        element.setAttribute(\n          \"is-vertical\",\n          `${slider.options?.vertical || false}`,\n        );\n      }\n\n      slider.on(\"detailsChanged\", handleDetailsChanged);\n\n      return onCleanup(() => {\n        slider.on(\"detailsChanged\", handleDetailsChanged, true);\n      });\n    }),\n  );\n\n  createEffect(\n    on(maxSlides, (maxSlides) => {\n      const s = slider();\n      if (!s) return;\n      if (!maxSlides) return;\n      element.style.setProperty(\n        \"--keen-slider-scrollbar--total-slides\",\n        `${maxSlides}`,\n      );\n\n      function updateDetails(slider: KeenSliderInstance) {\n        setMaxIdx(slider.track.details.maxIdx);\n      }\n\n      function handleUpdate(slider: KeenSliderInstance) {\n        if (!breakpointsContainer) return;\n        const bp = breakpointsContainer.children[currentIdx()];\n        if (!bp) return;\n        const t = thumb();\n        if (!t) return;\n        const p = calculateMidpointPositionFromBP(bp, element, t);\n        setPosition(p);\n        setMaxIdx(slider.track.details.maxIdx);\n      }\n\n      s.on(\"created\", handleUpdate);\n      s.on(\"detailsChanged\", updateDetails);\n      s.on(\"updated\", handleUpdate);\n\n      return onCleanup(() => {\n        s.on(\"created\", handleUpdate, true);\n        s.on(\"detailsChanged\", updateDetails, true);\n        s.on(\"updated\", handleUpdate, true);\n      });\n    }),\n  );\n\n  createEffect(\n    on(\n      () => ({ thumb: thumb(), slider: slider() }),\n      ({ thumb, slider }) => {\n        if (!thumb || !slider) return;\n        function updateScrollbarPosition(slider: KeenSliderInstance) {\n          if (!breakpointsContainer) return;\n          const bp = getRelativeBreakpoint(\n            slider,\n            breakpointsContainer.children,\n          );\n          if (!bp) return;\n          if (!thumb) return;\n          const position = calculateMidpointPositionFromBP(bp, element, thumb);\n          animateScrollbarPosition(position);\n          setCurrentIdx(parseInt(bp.getAttribute(\"data-index\") || \"0\"));\n        }\n        slider.on(\"slideChanged\", updateScrollbarPosition);\n      },\n    ),\n  );\n\n  createEffect(\n    on(\n      () => ({ thumb: thumb(), slider: slider() }),\n      ({ thumb, slider }) => {\n        if (!thumb || !slider) return;\n\n        function handleClick(e: Event) {\n          const bp = e.target as HTMLElement | null;\n          if (!bp) return;\n          if (!bp.classList.contains(\"keen-slider-scrollbar__breakpoint\"))\n            return;\n          setCurrentIdx(parseInt(bp.getAttribute(\"data-index\") || \"0\"));\n          updateSliderPosition(bp, slider!);\n        }\n\n        element.addEventListener(\"click\", handleClick);\n\n        return onCleanup(() => {\n          element.removeEventListener(\"click\", handleClick);\n        });\n      },\n    ),\n  );\n\n  createEffect(\n    on(maxIdx, (maxIdx) => {\n      if (maxIdx === 0) element.setAttribute(\"is-hidden\", `${true}`);\n      else element.setAttribute(\"is-hidden\", `${false}`);\n    }),\n  );\n\n  withKeenSliderElementContext(\n    () => {\n      const selector = props.target;\n      return () => {\n        let targetEl: Element | null = element;\n        if (props.target) targetEl = document.querySelector(selector);\n        if (targetEl?.tagName !== \"KEEN-SLIDER\")\n          targetEl = targetEl!.querySelector(\"keen-slider\");\n        return targetEl!;\n      };\n    },\n    () => null,\n    ([_, { addPlugin }]) => {\n      addPlugin((slider) => {\n        setSlider(slider);\n\n        slider.on(\"created\", function (slider) {\n          setMaxIdx(slider.track.details.maxIdx);\n        });\n\n        slider.on(\"destroyed\", () =>\n          batch(() => {\n            setMaxIdx(0);\n            setSlider();\n          }),\n        );\n      });\n    },\n  );\n\n  function animateScrollbarPosition(p: { x: number; y: number }) {\n    animate({\n      from: position().x,\n      to: p.x,\n      onUpdate(latest) {\n        return setPosition((p) => ({ ...p, x: latest }));\n      },\n    });\n    animate({\n      from: position().y,\n      to: p.y,\n      onUpdate(latest) {\n        return setPosition((p) => ({ ...p, y: latest }));\n      },\n    });\n  }\n\n  function updateSliderPosition(bp: Element, slider: KeenSliderInstance) {\n    const idx = constrain(\n      parseInt(bp.getAttribute(\"data-index\") || \"0\") *\n        ((slider?.options?.slides as any)?.perScroll || 1),\n      0,\n      slider.track.details.maxIdx,\n    );\n    slider.moveToIdx(idx);\n  }\n\n  return html`\n    <${Show} when=${() => maxSlides() > 1}>\n      <div\n        class=\"keen-slider-scrollbar__thumb\"\n        ref=${(el: HTMLElement) => setThumb(el)}\n      ></div>\n      <ul\n        class=\"keen-slider-scrollbar__breakpoints\"\n        ref=${(el: HTMLElement) => (breakpointsContainer = el)}\n      >\n        <${For} each=${() => Array(maxSlides()).fill(0)}>\n          ${(_: number, idx: Accessor<number>) => html`\n            <li class=\"keen-slider-scrollbar__breakpoint\" data-index=${idx}>\n              <button type=\"button\" style=${srOnly}>\n                <span style=${srOnly}> Breakpoint ${idx} </span>\n              </button>\n            </li>\n          `}\n        <//>\n      </ul>\n    <//>\n  `;\n};\n"]}

package/dist/main/index.js

@@ -1,14 +1,14 @@
-import { customShadowlessElement, correctElementType } from '@brytdesigns/web-component-utils';
-import { KeenSliderScrollbar } from './components/keen-slider-scrollbar.js';
+import { customShadowlessElement, correctElementType } from '@brytdesigns/web-component-core/utils';
+import { KeenSliderScrollbar } from './components/index.js';
 
 customShadowlessElement(
-  "keen-slider-scrollbar",
+  KeenSliderScrollbar.Name,
   {
     target: "",
     isHidden: true,
     isVertical: false
   },
-  correctElementType(KeenSliderScrollbar)
+  correctElementType(KeenSliderScrollbar.Component)
 );
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/main/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"names":[],"mappings":";;;AAMA,uBAAA;AAAA,EACE,uBAAA;AAAA,EACA;AAAA,IACE,MAAQ,EAAA,EAAA;AAAA,IACR,QAAU,EAAA,IAAA;AAAA,IACV,UAAY,EAAA;AAAA,GACd;AAAA,EACA,mBAAmB,mBAAmB;AACxC,CAAA","file":"index.js","sourcesContent":["import {\n  customShadowlessElement,\n  correctElementType,\n} from \"@brytdesigns/web-component-utils\";\nimport { KeenSliderScrollbar } from \"./components/keen-slider-scrollbar.js\";\n\ncustomShadowlessElement(\n  \"keen-slider-scrollbar\",\n  {\n    target: \"\",\n    isHidden: true,\n    isVertical: false,\n  },\n  correctElementType(KeenSliderScrollbar)\n);\n"]}
+{"version":3,"sources":["../../src/index.ts"],"names":[],"mappings":";;;AAMA,uBAAA;AAAA,EACE,mBAAoB,CAAA,IAAA;AAAA,EACpB;AAAA,IACE,MAAQ,EAAA,EAAA;AAAA,IACR,QAAU,EAAA,IAAA;AAAA,IACV,UAAY,EAAA;AAAA,GACd;AAAA,EACA,kBAAA,CAAmB,oBAAoB,SAAS;AAClD,CAAA","file":"index.js","sourcesContent":["import {\n  customShadowlessElement,\n  correctElementType,\n} from \"@brytdesigns/web-component-core/utils\";\nimport { KeenSliderScrollbar } from \"./components/index.js\";\n\ncustomShadowlessElement(\n  KeenSliderScrollbar.Name,\n  {\n    target: \"\",\n    isHidden: true,\n    isVertical: false,\n  },\n  correctElementType(KeenSliderScrollbar.Component),\n);\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brytdesigns/web-component-keen-slider-scrollbar",
-  "version": "1.0.20",
+  "version": "1.1.0",
   "description": "Keen slider scrollbar web component",
   "main": "./dist/main/index.js",
   "module": "./dist/main/index.js",
@@ -10,7 +10,8 @@
     ".": {
       "types": "./dist/main/index.d.ts",
       "module": "./dist/main/index.js"
-    }
+    },
+    "./styles.css": "./dist/styles.css"
   },
   "files": [
     "dist"
@@ -24,8 +25,8 @@
     "popmotion": "^11.0.5",
     "solid-element": "^1.9.1",
     "solid-js": "^1.9.7",
-    "@brytdesigns/web-component-keen-slider": "1.0.14",
-    "@brytdesigns/web-component-utils": "0.1.14"
+    "@brytdesigns/web-component-keen-slider": "1.1.0",
+    "@brytdesigns/web-component-core": "1.1.2"
   },
   "devDependencies": {
     "dts-bundle-generator": "^9.5.1",