@brytdesigns/web-component-keen-slider 1.2.3 → 3.1.0

package/dist/main/hooks/useKeenSlider.js

@@ -1,132 +1,100 @@
-import { createContext, provide, consume } from 'component-register';
-import { splitProps, createSignal, createMemo, onCleanup, createEffect, on, mergeProps } from 'solid-js';
-import { createWithElementContext, getContextFromProvider, invokeOnLoaded } from '@brytdesigns/web-component-core/utils';
-import KeenSlider from '../KeenSlider';
-
+import KeenSlider from "../KeenSlider.js";
+import { createGuardedEffect, createRemoteContext, getContextFromProvider, invokeOnLoaded } from "@brytdesigns/web-component-core/utils";
+import { createMemo, createSignal, merge, omit, onCleanup } from "solid-js";
+import { consume, createContext, provide } from "component-register";
+//#region src/hooks/useKeenSlider.ts
 function initializeKeenSliderContext(props) {
-  const [privateProps, publicProps] = splitProps(props, [
-    "root",
-    "centerSlides",
-    "refreshOnChildrenChange"
-  ]);
-  const [plugins, setPlugins] = createSignal([]);
-  const [forceSliderRebuild, setForceSliderRebuild] = createSignal(false);
-  const mutObserver = createMemo(() => {
-    if (props.refreshOnChildrenChange)
-      return new MutationObserver(function(mutations) {
-        mutations.forEach(function(_) {
-          setForceSliderRebuild((v) => !v);
-        });
-      });
-    return null;
-  });
-  const slider = createMemo(() => {
-    privateProps.root.setAttribute("data-initialized", "true");
-    const slider2 = new KeenSlider(
-      privateProps.root,
-      publicProps.config || {},
-      plugins()
-    );
-    const m = mutObserver();
-    if (m) {
-      m.observe(slider2.container, { childList: true });
-      forceSliderRebuild();
-    }
-    onCleanup(() => {
-      slider2.destroy();
-      privateProps.root.setAttribute("data-initialized", "false");
-      if (m) m.disconnect();
-    });
-    return slider2;
-  });
-  function addPlugin2(plugin) {
-    let index = -1;
-    setPlugins((plugins2) => {
-      index = plugins2.length;
-      return [...plugins2, plugin];
-    });
-    return function() {
-      setPlugins((plugins2) => {
-        return [...plugins2.slice(0, index), ...plugins2.slice(index + 1)];
-      });
-    };
-  }
-  const centeredPlugin = (slider2) => {
-    function centerSlides(slider3) {
-      if (slider3.track.details.maxIdx > 0) {
-        slider3.container.style.justifyContent = null;
-        slider3.container.style.transform = null;
-      } else {
-        slider3.container.style.cssText = `
+	const publicProps = omit(props, "root", "centerSlides", "refreshOnChildrenChange", "slideLabel");
+	const [plugins, setPlugins] = createSignal([]);
+	const [forceSliderRebuild, setForceSliderRebuild] = createSignal(false);
+	const mutObserver = createMemo(() => {
+		if (props.refreshOnChildrenChange) return new MutationObserver((mutations) => {
+			mutations.forEach((_) => {
+				setForceSliderRebuild((v) => !v);
+			});
+		});
+		return null;
+	});
+	const slider = createMemo(() => {
+		props.root.setAttribute("data-initialized", "true");
+		const slider = new KeenSlider(props.root, publicProps.config || {}, plugins(), { slideLabel: props.slideLabel });
+		const m = mutObserver();
+		if (m) {
+			m.observe(slider.container, { childList: true });
+			forceSliderRebuild();
+		}
+		onCleanup(() => {
+			slider.destroy();
+			props.root.setAttribute("data-initialized", "false");
+			if (m) m.disconnect();
+		});
+		return slider;
+	});
+	function addPlugin(plugin) {
+		let index = -1;
+		setPlugins((plugins) => {
+			index = plugins.length;
+			return [...plugins, plugin];
+		});
+		return () => {
+			setPlugins((plugins) => {
+				return [...plugins.slice(0, index), ...plugins.slice(index + 1)];
+			});
+		};
+	}
+	const centeredPlugin = (slider) => {
+		function centerSlides(slider) {
+			if (slider.track.details.maxIdx > 0) {
+				slider.container.style.justifyContent = null;
+				slider.container.style.transform = null;
+			} else slider.container.style.cssText = `
           justify-content: center;
-          transform: translateX(-${slider3.options.slides?.spacing || 16}px)
+          transform: translateX(-${slider.options.slides?.spacing || 16}px)
         `;
-      }
-    }
-    slider2.on("created", centerSlides);
-    slider2.on("optionsChanged", centerSlides);
-  };
-  createEffect(
-    on(
-      () => props.centerSlides,
-      (centerSlides) => {
-        if (!centerSlides) return;
-        const remove = addPlugin2(centeredPlugin);
-        return onCleanup(remove);
-      }
-    )
-  );
-  createEffect(
-    on(plugins, (plugins2) => {
-      if (plugins2.length === 0) return;
-      console.log(
-        `Registered a new plugin on element.
-`,
-        `Total slider plugins: ${plugins2.length}`
-      );
-    })
-  );
-  return [slider, { addPlugin: addPlugin2 }];
+		}
+		slider.on("created", centerSlides);
+		slider.on("optionsChanged", centerSlides);
+	};
+	createGuardedEffect(() => props.centerSlides, (centerSlides) => {
+		if (!centerSlides) return;
+		return addPlugin(centeredPlugin);
+	});
+	createGuardedEffect(plugins, (plugins) => {
+		if (plugins.length === 0) return;
+		console.log(`Registered a new plugin on element.\n`, `Total slider plugins: ${plugins.length}`);
+	});
+	return [slider, { addPlugin }];
 }
-const KeenSliderContextState = createContext(initializeKeenSliderContext);
-const provideKeenSliderContext = (initialState, element) => {
-  const props = mergeProps(initialState, { root: element });
-  return provide(KeenSliderContextState, props, element);
+var KeenSliderContextState = createContext(initializeKeenSliderContext);
+var provideKeenSliderContext = (initialState, element) => {
+	const props = merge(initialState, { root: element });
+	return provide(KeenSliderContextState, props, element);
 };
-const useKeenSliderContext = (context) => {
-  return context;
+var useKeenSliderContext = (context) => {
+	return context;
 };
-const useKeenSlider = (element) => {
-  const context = consume(KeenSliderContextState, element);
-  if (!context) {
-    throw console.error(
-      "KeenSliderContext not found! Please ensure to wrap your custom element with keen-slider element."
-    );
-  }
-  return useKeenSliderContext(context);
+var useKeenSlider = (element) => {
+	const context = consume(KeenSliderContextState, element);
+	if (!context) throw new Error("KeenSliderContext not found! Please ensure to wrap your custom element with keen-slider element.");
+	return useKeenSliderContext(context);
 };
-const getKeenSliderContext = (element) => {
-  const context = getContextFromProvider(
-    KeenSliderContextState,
-    element
-  );
-  return useKeenSliderContext(context);
+var getKeenSliderContext = (element) => {
+	return useKeenSliderContext(getContextFromProvider(KeenSliderContextState, element));
 };
 function addPlugin({ target, plugin, controller }) {
-  if (!target) return;
-  invokeOnLoaded(
-    () => {
-      const [_, { addPlugin: addPlugin2 }] = getKeenSliderContext(target);
-      const removePlugin = addPlugin2(plugin);
-      controller?.signal?.addEventListener("abort", removePlugin);
-    },
-    {
-      signal: controller?.signal
-    }
-  );
+	if (!target) return;
+	invokeOnLoaded(() => {
+		const [_, { addPlugin }] = getKeenSliderContext(target);
+		const removePlugin = addPlugin(plugin);
+		controller?.signal?.addEventListener("abort", removePlugin);
+	}, { signal: controller?.signal });
 }
-const withKeenSliderElementContext = createWithElementContext(KeenSliderContextState);
+var useKeenSliderAt = createRemoteContext(KeenSliderContextState, { resolve: (target, host) => {
+	const el = target ? document.querySelector(target) : host;
+	if (!el) return null;
+	return el.tagName === "KEEN-SLIDER" ? el : el.querySelector("keen-slider");
+} });
+//#endregion
+export { addPlugin, getKeenSliderContext, provideKeenSliderContext, useKeenSlider, useKeenSliderAt, useKeenSliderContext };
 
-export { addPlugin, getKeenSliderContext, provideKeenSliderContext, useKeenSlider, useKeenSliderContext, withKeenSliderElementContext };
-//# sourceMappingURL=useKeenSlider.js.map
 //# sourceMappingURL=useKeenSlider.js.map

package/dist/main/hooks/useKeenSlider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useKeenSlider.ts"],"names":["slider","addPlugin","plugins"],"mappings":"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","file":"useKeenSlider.js","sourcesContent":["import {\r\n  type ICustomElement,\r\n  createContext,\r\n  provide,\r\n  consume,\r\n} from \"component-register\";\r\nimport {\r\n  createEffect,\r\n  mergeProps,\r\n  createSignal,\r\n  createMemo,\r\n  onCleanup,\r\n  on,\r\n  splitProps,\r\n} from \"solid-js\";\r\nimport {\r\n  createWithElementContext,\r\n  getContextFromProvider,\r\n  invokeOnLoaded,\r\n} from \"@brytdesigns/web-component-core/utils\";\r\n\r\nimport KeenSlider, {\r\n  type KeenSliderInstance,\r\n  type KeenSliderOptions,\r\n  type KeenSliderPlugin,\r\n} from \"../KeenSlider\";\r\n\r\ntype CreateContextOptions = {\r\n  root: HTMLElement & ICustomElement;\r\n  config?: KeenSliderOptions;\r\n  centerSlides?: boolean;\r\n  refreshOnChildrenChange?: boolean;\r\n};\r\n\r\ntype WalkableNode = Parameters<typeof provide>[2];\r\n\r\ntype KeenSliderContext = ReturnType<typeof initializeKeenSliderContext>;\r\n\r\nfunction initializeKeenSliderContext(props: CreateContextOptions) {\r\n  const [privateProps, publicProps] = splitProps(props, [\r\n    \"root\",\r\n    \"centerSlides\",\r\n    \"refreshOnChildrenChange\",\r\n  ]);\r\n\r\n  const [plugins, setPlugins] = createSignal<KeenSliderPlugin[]>([]);\r\n  const [forceSliderRebuild, setForceSliderRebuild] = createSignal(false);\r\n\r\n  const mutObserver = createMemo(() => {\r\n    if (props.refreshOnChildrenChange)\r\n      return new MutationObserver(function (mutations) {\r\n        mutations.forEach(function (_) {\r\n          setForceSliderRebuild((v) => !v);\r\n        });\r\n      });\r\n    return null;\r\n  });\r\n\r\n  const slider = createMemo(() => {\r\n    privateProps.root.setAttribute(\"data-initialized\", \"true\");\r\n    const slider = new KeenSlider(\r\n      privateProps.root,\r\n      publicProps.config || ({} as any),\r\n      plugins(),\r\n    );\r\n    const m = mutObserver();\r\n\r\n    if (m) {\r\n      m.observe(slider.container, { childList: true });\r\n      forceSliderRebuild();\r\n    }\r\n\r\n    onCleanup(() => {\r\n      slider.destroy();\r\n      privateProps.root.setAttribute(\"data-initialized\", \"false\");\r\n      if (m) m.disconnect();\r\n    });\r\n\r\n    return slider;\r\n  });\r\n\r\n  function addPlugin(plugin: KeenSliderPlugin) {\r\n    let index = -1;\r\n\r\n    setPlugins((plugins) => {\r\n      index = plugins.length;\r\n      return [...plugins, plugin];\r\n    });\r\n\r\n    return function () {\r\n      setPlugins((plugins) => {\r\n        return [...plugins.slice(0, index), ...plugins.slice(index + 1)];\r\n      });\r\n    };\r\n  }\r\n\r\n  const centeredPlugin: KeenSliderPlugin = (slider) => {\r\n    function centerSlides(slider: KeenSliderInstance) {\r\n      if (slider.track.details.maxIdx > 0) {\r\n        //@ts-ignore\r\n        slider.container.style.justifyContent = null;\r\n        //@ts-ignore\r\n        slider.container.style.transform = null;\r\n      } else {\r\n        slider.container.style.cssText = `\r\n          justify-content: center;\r\n          transform: translateX(-${(slider.options.slides as any)?.spacing || 16}px)\r\n        `;\r\n      }\r\n    }\r\n\r\n    slider.on(\"created\", centerSlides);\r\n    slider.on(\"optionsChanged\", centerSlides);\r\n  };\r\n\r\n  createEffect(\r\n    on(\r\n      () => props.centerSlides,\r\n      (centerSlides) => {\r\n        if (!centerSlides) return;\r\n        const remove = addPlugin(centeredPlugin);\r\n        return onCleanup(remove);\r\n      },\r\n    ),\r\n  );\r\n\r\n  createEffect(\r\n    on(plugins, (plugins) => {\r\n      if (plugins.length === 0) return;\r\n      console.log(\r\n        `Registered a new plugin on element.\\n`,\r\n        `Total slider plugins: ${plugins.length}`,\r\n      );\r\n    }),\r\n  );\r\n\r\n  return [slider, { addPlugin }] as const;\r\n}\r\n\r\nconst KeenSliderContextState = createContext(initializeKeenSliderContext);\r\n\r\nexport const provideKeenSliderContext = (\r\n  initialState: Omit<CreateContextOptions, \"root\">,\r\n  element: WalkableNode,\r\n): KeenSliderContext => {\r\n  const props = mergeProps(initialState, { root: element });\r\n  return provide(KeenSliderContextState, props, element);\r\n};\r\n\r\nexport const useKeenSliderContext = (context: KeenSliderContext) => {\r\n  return context;\r\n};\r\n\r\nexport const useKeenSlider = (element: HTMLElement & ICustomElement) => {\r\n  const context: KeenSliderContext = consume(KeenSliderContextState, element);\r\n\r\n  if (!context) {\r\n    throw console.error(\r\n      \"KeenSliderContext not found! Please ensure to wrap your custom element with keen-slider element.\",\r\n    );\r\n  }\r\n\r\n  return useKeenSliderContext(context);\r\n};\r\n\r\nexport const getKeenSliderContext = (element: Element) => {\r\n  const context = getContextFromProvider<KeenSliderContext>(\r\n    KeenSliderContextState,\r\n    element,\r\n  );\r\n  return useKeenSliderContext(context);\r\n};\r\n\r\ntype AddPluginOptions = {\r\n  target: void | HTMLElement;\r\n  plugin: KeenSliderPlugin;\r\n  controller?: AbortController;\r\n};\r\n\r\nexport function addPlugin({ target, plugin, controller }: AddPluginOptions) {\r\n  if (!target) return;\r\n\r\n  invokeOnLoaded(\r\n    () => {\r\n      const [_, { addPlugin }] = getKeenSliderContext(target);\r\n      const removePlugin = addPlugin(plugin);\r\n      controller?.signal?.addEventListener(\"abort\", removePlugin);\r\n    },\r\n    {\r\n      signal: controller?.signal,\r\n    },\r\n  );\r\n}\r\n\r\nexport const withKeenSliderElementContext = createWithElementContext<\r\n  typeof KeenSliderContextState,\r\n  KeenSliderContext\r\n>(KeenSliderContextState);\r\n"]}
+{"version":3,"file":"useKeenSlider.js","names":[],"sources":["../../../src/hooks/useKeenSlider.ts"],"sourcesContent":["import {\n\tcreateGuardedEffect,\n\tcreateRemoteContext,\n\tgetContextFromProvider,\n\tinvokeOnLoaded,\n} from \"@brytdesigns/web-component-core/utils\";\nimport {\n\tconsume,\n\tcreateContext,\n\ttype ICustomElement,\n\tprovide,\n} from \"component-register\";\nimport { createMemo, createSignal, merge, omit, onCleanup } from \"solid-js\";\n\nimport KeenSlider, {\n\ttype KeenSliderInstance,\n\ttype KeenSliderOptions,\n\ttype KeenSliderPlugin,\n} from \"../KeenSlider\";\n\ntype CreateContextOptions = {\n\troot: HTMLElement & ICustomElement;\n\tconfig?: KeenSliderOptions;\n\tcenterSlides?: boolean;\n\trefreshOnChildrenChange?: boolean;\n\tslideLabel?: string;\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype KeenSliderContext = ReturnType<typeof initializeKeenSliderContext>;\n\nfunction initializeKeenSliderContext(props: CreateContextOptions) {\n\t// `omit` returns only the rest; picked keys are read straight off `props`.\n\tconst publicProps = omit(\n\t\tprops,\n\t\t\"root\",\n\t\t\"centerSlides\",\n\t\t\"refreshOnChildrenChange\",\n\t\t\"slideLabel\",\n\t);\n\n\tconst [plugins, setPlugins] = createSignal<KeenSliderPlugin[]>([]);\n\tconst [forceSliderRebuild, setForceSliderRebuild] = createSignal(false);\n\n\tconst mutObserver = createMemo(() => {\n\t\tif (props.refreshOnChildrenChange)\n\t\t\treturn new MutationObserver((mutations) => {\n\t\t\t\tmutations.forEach((_) => {\n\t\t\t\t\tsetForceSliderRebuild((v) => !v);\n\t\t\t\t});\n\t\t\t});\n\t\treturn null;\n\t});\n\n\tconst slider = createMemo(() => {\n\t\tprops.root.setAttribute(\"data-initialized\", \"true\");\n\t\t// Read here, so it is tracked: the template is captured when the\n\t\t// slider is built, so a new one rebuilds it, the same as a new\n\t\t// `config` does.\n\t\tconst slider = new KeenSlider(\n\t\t\tprops.root,\n\t\t\tpublicProps.config || ({} as any),\n\t\t\tplugins(),\n\t\t\t{ slideLabel: props.slideLabel },\n\t\t);\n\t\tconst m = mutObserver();\n\n\t\tif (m) {\n\t\t\tm.observe(slider.container, { childList: true });\n\t\t\tforceSliderRebuild();\n\t\t}\n\n\t\tonCleanup(() => {\n\t\t\tslider.destroy();\n\t\t\tprops.root.setAttribute(\"data-initialized\", \"false\");\n\t\t\tif (m) m.disconnect();\n\t\t});\n\n\t\treturn slider;\n\t});\n\n\tfunction addPlugin(plugin: KeenSliderPlugin) {\n\t\tlet index = -1;\n\n\t\tsetPlugins((plugins) => {\n\t\t\tindex = plugins.length;\n\t\t\treturn [...plugins, plugin];\n\t\t});\n\n\t\treturn () => {\n\t\t\tsetPlugins((plugins) => {\n\t\t\t\treturn [...plugins.slice(0, index), ...plugins.slice(index + 1)];\n\t\t\t});\n\t\t};\n\t}\n\n\tconst centeredPlugin: KeenSliderPlugin = (slider) => {\n\t\tfunction centerSlides(slider: KeenSliderInstance) {\n\t\t\tif (slider.track.details.maxIdx > 0) {\n\t\t\t\t//@ts-expect-error\n\t\t\t\tslider.container.style.justifyContent = null;\n\t\t\t\t//@ts-expect-error\n\t\t\t\tslider.container.style.transform = null;\n\t\t\t} else {\n\t\t\t\tslider.container.style.cssText = `\n          justify-content: center;\n          transform: translateX(-${(slider.options.slides as any)?.spacing || 16}px)\n        `;\n\t\t\t}\n\t\t}\n\n\t\tslider.on(\"created\", centerSlides);\n\t\tslider.on(\"optionsChanged\", centerSlides);\n\t};\n\n\tcreateGuardedEffect(\n\t\t() => props.centerSlides,\n\t\t(centerSlides) => {\n\t\t\tif (!centerSlides) return;\n\t\t\tconst remove = addPlugin(centeredPlugin);\n\t\t\treturn remove;\n\t\t},\n\t);\n\n\tcreateGuardedEffect(plugins, (plugins) => {\n\t\tif (plugins.length === 0) return;\n\t\tconsole.log(\n\t\t\t`Registered a new plugin on element.\\n`,\n\t\t\t`Total slider plugins: ${plugins.length}`,\n\t\t);\n\t});\n\n\treturn [slider, { addPlugin }] as const;\n}\n\nconst KeenSliderContextState = createContext(initializeKeenSliderContext);\n\nexport const provideKeenSliderContext = (\n\tinitialState: Omit<CreateContextOptions, \"root\">,\n\telement: WalkableNode,\n): KeenSliderContext => {\n\tconst props = merge(initialState, { root: element });\n\treturn provide(KeenSliderContextState, props, element);\n};\n\nexport const useKeenSliderContext = (context: KeenSliderContext) => {\n\treturn context;\n};\n\nexport const useKeenSlider = (element: HTMLElement & ICustomElement) => {\n\tconst context: KeenSliderContext = consume(KeenSliderContextState, element);\n\n\tif (!context) {\n\t\tthrow new Error(\n\t\t\t\"KeenSliderContext not found! Please ensure to wrap your custom element with keen-slider element.\",\n\t\t);\n\t}\n\n\treturn useKeenSliderContext(context);\n};\n\nexport const getKeenSliderContext = (element: Element) => {\n\tconst context = getContextFromProvider<KeenSliderContext>(\n\t\tKeenSliderContextState,\n\t\telement,\n\t);\n\treturn useKeenSliderContext(context);\n};\n\ntype AddPluginOptions = {\n\ttarget: void | HTMLElement;\n\tplugin: KeenSliderPlugin;\n\tcontroller?: AbortController;\n};\n\nexport function addPlugin({ target, plugin, controller }: AddPluginOptions) {\n\tif (!target) return;\n\n\tinvokeOnLoaded(\n\t\t() => {\n\t\t\tconst [_, { addPlugin }] = getKeenSliderContext(target);\n\t\t\tconst removePlugin = addPlugin(plugin);\n\t\t\tcontroller?.signal?.addEventListener(\"abort\", removePlugin);\n\t\t},\n\t\t{\n\t\t\tsignal: controller?.signal,\n\t\t},\n\t);\n}\n\nexport const useKeenSliderAt = createRemoteContext<KeenSliderContext>(\n\tKeenSliderContextState,\n\t{\n\t\t// A target may name the slider itself or an ancestor of it. Stated once\n\t\t// here instead of the identical ten-line thunk that was copy-pasted into\n\t\t// all six extension packages.\n\t\tresolve: (target, host) => {\n\t\t\tconst el = target ? document.querySelector(target) : host;\n\t\t\tif (!el) return null;\n\t\t\treturn el.tagName === \"KEEN-SLIDER\"\n\t\t\t\t? el\n\t\t\t\t: el.querySelector(\"keen-slider\");\n\t\t},\n\t},\n);\n"],"mappings":"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"}

package/dist/main/index.d.ts

@@ -4,6 +4,11 @@ import { ICustomElement } from 'component-register';
 import _KeenSlider from 'keen-slider';
 import { KeenSliderHooks as _KeenSliderHooks, KeenSliderInstance as _KeenSliderInstance, KeenSliderOptions as _KeenSliderOptions, KeenSliderPlugin as _KeenSliderPlugin } from 'keen-slider';
 
+/**
+ * `component-register` types `options.element` as a bare `ICustomElement`, but
+ * at runtime it is always also an `HTMLElement`. Every component in this repo
+ * needs the DOM half.
+ */
 export type CorrectComponentOptions = {
 	element: HTMLElement & ICustomElement;
 };
@@ -15,25 +20,35 @@ export type KeenSliderOptions<O = {}, P = {}, H extends _KeenSliderHooks = _Keen
 	} & _KeenSliderOptions<O, P, H>["slides"];
 };
 export type KeenSliderPlugin<O = {}, P = {}, H extends _KeenSliderHooks = _KeenSliderHooks> = _KeenSliderPlugin<O, P, H>;
+export type KeenSliderAccessibilityOptions = {
+	/** Template for each slide's `aria-label`: `{n}` and `{total}`. */
+	slideLabel?: string;
+};
 declare class KeenSlider extends _KeenSlider {
 	direction: "forward" | "backward" | null;
-	constructor(element: ICustomElement & HTMLElement, config: KeenSliderOptions, plugins?: _KeenSliderPlugin[]);
+	constructor(element: ICustomElement & HTMLElement, config: KeenSliderOptions, plugins?: _KeenSliderPlugin[], accessibility?: KeenSliderAccessibilityOptions);
 }
 export type Props = {
 	config?: KeenSliderOptions;
 	centerSlides: boolean;
 	refreshOnChildrenChange: boolean;
+	/**
+	 * Each slide's `aria-label`. `{n}` is replaced with the slide number and
+	 * `{total}` with the slide count. Translate it rather than reaching in from
+	 * a theme. Slides that already carry an `aria-label` keep their own.
+	 */
+	slideLabel: string;
 };
 declare const Name = "keen-slider";
 declare const Component: CorrectComponentType<Props>;
 export declare const useKeenSlider: (element: HTMLElement & ICustomElement) => readonly [
-	import("solid-js").Accessor<KeenSlider>,
+	import("solid-js").SourceAccessor<KeenSlider>,
 	{
 		readonly addPlugin: (plugin: KeenSliderPlugin) => () => void;
 	}
 ];
 export declare const getKeenSliderContext: (element: Element) => readonly [
-	import("solid-js").Accessor<KeenSlider>,
+	import("solid-js").SourceAccessor<KeenSlider>,
 	{
 		readonly addPlugin: (plugin: KeenSliderPlugin) => () => void;
 	}
@@ -44,12 +59,12 @@ export type AddPluginOptions = {
 	controller?: AbortController;
 };
 export declare function addPlugin({ target, plugin, controller }: AddPluginOptions): void;
-export declare const withKeenSliderElementContext: <D extends unknown>(target: string | import("solid-js").Accessor<string> | import("solid-js").Accessor<() => Element>, dependencies: import("solid-js").Accessor<D> | undefined, cb: (context: readonly [
-	import("solid-js").Accessor<KeenSlider>,
+export declare const useKeenSliderAt: (target: () => string | undefined, host: HTMLElement) => import("solid-js").SourceAccessor<readonly [
+	import("solid-js").SourceAccessor<KeenSlider>,
 	{
 		readonly addPlugin: (plugin: KeenSliderPlugin) => () => void;
 	}
-], dependencies: D) => void | (() => void)) => void;
+]>;
 export type KeenSliderProps = KeenSlider$1.Props;
 
 declare namespace KeenSlider$1 {

package/dist/main/index.js

@@ -1,16 +1,17 @@
-import { customShadowlessElement, correctElementType } from '@brytdesigns/web-component-core/utils';
-import { KeenSlider } from './components/index.js';
-export { addPlugin, getKeenSliderContext, useKeenSlider, withKeenSliderElementContext } from './hooks/index.js';
+import { DEFAULT_SLIDE_LABEL } from "./utils.js";
+import { addPlugin, getKeenSliderContext, useKeenSlider, useKeenSliderAt } from "./hooks/useKeenSlider.js";
+import "./hooks/index.js";
+import { Component, Name } from "./components/keen-slider.js";
+import "./components/index.js";
+import { customShadowlessElement } from "@brytdesigns/web-component-core/utils";
+//#region src/index.ts
+customShadowlessElement(Name, {
+	config: {},
+	centerSlides: false,
+	refreshOnChildrenChange: false,
+	slideLabel: DEFAULT_SLIDE_LABEL
+}, Component);
+//#endregion
+export { addPlugin, getKeenSliderContext, useKeenSlider, useKeenSliderAt };
 
-customShadowlessElement(
-  KeenSlider.Name,
-  {
-    // @ts-ignore
-    config: {},
-    centerSlides: false,
-    refreshOnChildrenChange: false
-  },
-  correctElementType(KeenSlider.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":";;;;AAqBA,uBAAA;AAAA,EACC,UAAW,CAAA,IAAA;AAAA,EACX;AAAA;AAAA,IAEC,QAAQ,EAAC;AAAA,IACT,YAAc,EAAA,KAAA;AAAA,IACd,uBAAyB,EAAA;AAAA,GAC1B;AAAA,EACA,kBAAA,CAAmB,WAAW,SAAS;AACxC,CAAA","file":"index.js","sourcesContent":["import {\r\n\tcustomShadowlessElement,\r\n\tcorrectElementType,\r\n} from \"@brytdesigns/web-component-core/utils\";\r\nimport { KeenSlider } from \"./components/index.js\";\r\n\r\nexport type {\r\n\tKeenSliderInstance,\r\n\tKeenSliderOptions,\r\n\tKeenSliderPlugin,\r\n} from \"./KeenSlider.js\";\r\n\r\nexport type KeenSliderProps = KeenSlider.Props;\r\n\r\nexport {\r\n\tuseKeenSlider,\r\n\taddPlugin,\r\n\tgetKeenSliderContext,\r\n\twithKeenSliderElementContext,\r\n} from \"./hooks/index.js\";\r\n\r\ncustomShadowlessElement(\r\n\tKeenSlider.Name,\r\n\t{\r\n\t\t// @ts-ignore\r\n\t\tconfig: {},\r\n\t\tcenterSlides: false,\r\n\t\trefreshOnChildrenChange: false,\r\n\t},\r\n\tcorrectElementType(KeenSlider.Component),\r\n);\r\n"]}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/index.ts"],"sourcesContent":["import { customShadowlessElement } from \"@brytdesigns/web-component-core/utils\";\nimport { KeenSlider } from \"./components/index.js\";\nimport { DEFAULT_SLIDE_LABEL } from \"./utils.js\";\n\nexport type {\n\tKeenSliderInstance,\n\tKeenSliderOptions,\n\tKeenSliderPlugin,\n} from \"./KeenSlider.js\";\n\nexport type KeenSliderProps = KeenSlider.Props;\n\nexport {\n\taddPlugin,\n\tgetKeenSliderContext,\n\tuseKeenSlider,\n\tuseKeenSliderAt,\n} from \"./hooks/index.js\";\n\ncustomShadowlessElement(\n\tKeenSlider.Name,\n\t{\n\t\t// @ts-expect-error\n\t\tconfig: {},\n\t\tcenterSlides: false,\n\t\trefreshOnChildrenChange: false,\n\t\tslideLabel: DEFAULT_SLIDE_LABEL,\n\t},\n\tKeenSlider.Component,\n);\n"],"mappings":";;;;;;;AAmBA,wBACC,MACA;CAEC,QAAQ,CAAC;CACT,cAAc;CACd,yBAAyB;CACzB,YAAY;AACb,GACA,SACD"}

package/dist/main/utils.js

@@ -1,18 +1,23 @@
+//#region src/utils.ts
 function constrain(value, min = -Infinity, max = Infinity) {
-  return Math.min(Math.max(value, min), max);
+	return Math.min(Math.max(value, min), max);
 }
-function initializeSliderClasses(ComponentType = (props, options) => {
-}) {
-  return (props, options) => {
-    const { element } = options;
-    element.classList.add("keen-slider");
-    Array.from(element.children).forEach(
-      (child) => child.classList.add("keen-slider__slide")
-    );
-    return ComponentType(props, options);
-  };
+/** What every slide was labelled before `slide-label` existed: "1 of 4". */
+var DEFAULT_SLIDE_LABEL = "{n} of {total}";
+/**
+* Fills a slide-label template. `{n}` is the 1-based slide number and
+* `{total}` the slide count, the same placeholder `dot-label` and
+* `breakpoint-label` use for their own numbers.
+*
+* Every occurrence is replaced, not just the first, so a template may repeat
+* one. Anything that is not a non-empty string falls back to the default: an
+* empty `slide-label=""` would otherwise give every slide an empty accessible
+* name, which is worse than the English one.
+*/
+function formatSlideLabel(template, n, total) {
+	return (typeof template === "string" && template.trim() !== "" ? template : DEFAULT_SLIDE_LABEL).replaceAll("{n}", `${n}`).replaceAll("{total}", `${total}`);
 }
+//#endregion
+export { DEFAULT_SLIDE_LABEL, constrain, formatSlideLabel };
 
-export { constrain, initializeSliderClasses };
-//# sourceMappingURL=utils.js.map
 //# sourceMappingURL=utils.js.map

package/dist/main/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils.ts"],"names":[],"mappings":"AAEO,SAAS,SAAU,CAAA,KAAA,EAAe,GAAM,GAAA,CAAA,QAAA,EAAW,MAAM,QAAU,EAAA;AACxE,EAAA,OAAO,KAAK,GAAI,CAAA,IAAA,CAAK,IAAI,KAAO,EAAA,GAAG,GAAG,GAAG,CAAA;AAC3C;AAMO,SAAS,uBACd,CAAA,aAAA,GAAgB,CAAC,KAAA,EAAc,OAAqB,KAAA;AAAC,CACrD,EAAA;AACA,EAAO,OAAA,CAAC,OAAc,OAAqB,KAAA;AACzC,IAAM,MAAA,EAAE,SAAY,GAAA,OAAA;AACpB,IAAQ,OAAA,CAAA,SAAA,CAAU,IAAI,aAAa,CAAA;AACnC,IAAM,KAAA,CAAA,IAAA,CAAK,OAAQ,CAAA,QAAQ,CAAE,CAAA,OAAA;AAAA,MAAQ,CAAC,KAAA,KACpC,KAAM,CAAA,SAAA,CAAU,IAAI,oBAAoB;AAAA,KAC1C;AACA,IAAO,OAAA,aAAA,CAAc,OAAO,OAAO,CAAA;AAAA,GACrC;AACF","file":"utils.js","sourcesContent":["import type { ICustomElement } from \"component-register\";\r\n\r\nexport function constrain(value: number, min = -Infinity, max = Infinity) {\r\n  return Math.min(Math.max(value, min), max);\r\n}\r\n\r\ntype Options = {\r\n  element: HTMLElement & ICustomElement;\r\n};\r\n\r\nexport function initializeSliderClasses<Props>(\r\n  ComponentType = (props: Props, options: Options) => {}\r\n) {\r\n  return (props: Props, options: Options) => {\r\n    const { element } = options;\r\n    element.classList.add(\"keen-slider\");\r\n    Array.from(element.children).forEach((child) =>\r\n      child.classList.add(\"keen-slider__slide\")\r\n    );\r\n    return ComponentType(props, options);\r\n  };\r\n}\r\n"]}
+{"version":3,"file":"utils.js","names":[],"sources":["../../src/utils.ts"],"sourcesContent":["import type { ICustomElement } from \"component-register\";\n\nexport function constrain(value: number, min = -Infinity, max = Infinity) {\n\treturn Math.min(Math.max(value, min), max);\n}\n\n/** What every slide was labelled before `slide-label` existed: \"1 of 4\". */\nexport const DEFAULT_SLIDE_LABEL = \"{n} of {total}\";\n\n/**\n * Fills a slide-label template. `{n}` is the 1-based slide number and\n * `{total}` the slide count, the same placeholder `dot-label` and\n * `breakpoint-label` use for their own numbers.\n *\n * Every occurrence is replaced, not just the first, so a template may repeat\n * one. Anything that is not a non-empty string falls back to the default: an\n * empty `slide-label=\"\"` would otherwise give every slide an empty accessible\n * name, which is worse than the English one.\n */\nexport function formatSlideLabel(\n\ttemplate: string | undefined,\n\tn: number,\n\ttotal: number,\n) {\n\tconst usable =\n\t\ttypeof template === \"string\" && template.trim() !== \"\"\n\t\t\t? template\n\t\t\t: DEFAULT_SLIDE_LABEL;\n\treturn usable.replaceAll(\"{n}\", `${n}`).replaceAll(\"{total}\", `${total}`);\n}\n\ntype Options = {\n\telement: HTMLElement & ICustomElement;\n};\n\nexport function initializeSliderClasses<Props>(\n\tComponentType = (props: Props, options: Options) => {},\n) {\n\treturn (props: Props, options: Options) => {\n\t\tconst { element } = options;\n\t\telement.classList.add(\"keen-slider\");\n\t\tArray.from(element.children).forEach((child) => {\n\t\t\tchild.classList.add(\"keen-slider__slide\");\n\t\t});\n\t\treturn ComponentType(props, options);\n\t};\n}\n"],"mappings":";AAEA,SAAgB,UAAU,OAAe,MAAM,WAAW,MAAM,UAAU;CACzE,OAAO,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,GAAG;AAC1C;;AAGA,IAAa,sBAAsB;;;;;;;;;;;AAYnC,SAAgB,iBACf,UACA,GACA,OACC;CAKD,QAHC,OAAO,aAAa,YAAY,SAAS,KAAK,MAAM,KACjD,WACA,oBAAA,CACU,WAAW,OAAO,GAAG,GAAG,CAAC,CAAC,WAAW,WAAW,GAAG,OAAO;AACzE"}

package/dist/styles.css

@@ -1,51 +1,55 @@
-keen-slider:not([data-keen-slider-disabled]) {
-  -webkit-touch-callout: none;
-  -webkit-tap-highlight-color: transparent;
-  align-content: flex-start;
-  display: flex;
-  overflow: hidden;
-  position: relative;
-  touch-action: pan-y;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -khtml-user-select: none;
-  width: 100%;
-}
-
-keen-slider:not([data-keen-slider-disabled]):not([config*='"perView": "auto"'])
-  .keen-slider__slide {
-  position: relative;
-  overflow: hidden;
-  min-width: calc(
-    calc(100% / var(--slides-per-view, 1)) - var(--slides-spacing, 0px)
-  );
-  min-height: 100%;
-}
-
-keen-slider[config*='"vertical": true']:not([data-keen-slider-disabled])
-  .keen-slider__slide {
-  position: relative;
-  overflow: hidden;
-  min-height: calc(
-    calc(100% / var(--slides-per-view, 1)) - var(--slides-spacing, 0px)
-  );
-  min-width: 100%;
-}
-
-keen-slider:not([data-initialized]) {
-  gap: var(--slides-spacing, 0px);
-}
-
-keen-slider:not([data-keen-slider-disabled])[data-keen-slider-reverse] {
-  flex-direction: row-reverse;
-}
-
-keen-slider:not([data-keen-slider-disabled])[config*='"vertical": true'] {
-  flex-wrap: wrap;
-}
-
-keen-slider:not([data-keen-slider-disabled])[data-keen-slider-moves] * {
-  pointer-events: none;
-}
+keen-slider:not([data-keen-slider-disabled]) {
+	-webkit-touch-callout: none;
+	-webkit-tap-highlight-color: transparent;
+	align-content: flex-start;
+	display: flex;
+	overflow: hidden;
+	position: relative;
+	touch-action: pan-y;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	/* biome-ignore lint/correctness/noUnknownProperty: KHTML prefix is obsolete
+     but harmless; kept so the published stylesheet stays byte-stable. */
+	-khtml-user-select: none;
+	width: 100%;
+}
+
+keen-slider:not([data-keen-slider-disabled]):not([config*='"perView": "auto"'])
+	.keen-slider__slide {
+	position: relative;
+	overflow: hidden;
+	min-width: calc(
+		calc(100% / var(--slides-per-view, 1)) -
+		var(--slides-spacing, 0px)
+	);
+	min-height: 100%;
+}
+
+keen-slider[config*='"vertical": true']:not([data-keen-slider-disabled])
+	.keen-slider__slide {
+	position: relative;
+	overflow: hidden;
+	min-height: calc(
+		calc(100% / var(--slides-per-view, 1)) -
+		var(--slides-spacing, 0px)
+	);
+	min-width: 100%;
+}
+
+keen-slider:not([data-initialized]) {
+	gap: var(--slides-spacing, 0px);
+}
+
+keen-slider:not([data-keen-slider-disabled])[data-keen-slider-reverse] {
+	flex-direction: row-reverse;
+}
+
+keen-slider:not([data-keen-slider-disabled])[config*='"vertical": true'] {
+	flex-wrap: wrap;
+}
+
+keen-slider:not([data-keen-slider-disabled])[data-keen-slider-moves] * {
+	pointer-events: none;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brytdesigns/web-component-keen-slider",
-  "version": "1.2.3",
+  "version": "3.1.0",
   "description": "Keen slider 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,18 +20,17 @@
   "author": "Bryt Designs",
   "license": "ISC",
   "dependencies": {
+    "@brytdesigns/web-component-core": "3.1.0",
     "component-register": "0.8.7",
     "keen-slider": "^6.8.6",
-    "solid-element": "^1.9.1",
-    "solid-js": "^1.9.9",
-    "@brytdesigns/web-component-core": "1.1.7"
+    "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"
   }
 }