@thewaver/ss-components 0.0.1 → 0.0.2

package/dist/Fundamentals/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,138 @@
+import { access } from "../../Utils/propUtils.js";
+import { InteractionWrapper } from "../InteractionWrapper/InteractionWrapper.js";
+import { breadcrumbsEntry, breadcrumbsItem, breadcrumbsList, breadcrumbsRoot, breadcrumbsSeparator } from "./Breadcrumbs.css.js";
+import { Index, Show, createMemo } from "solid-js";
+import { Dynamic, className, createComponent, effect, insert, memo, mergeProps, setAttribute, setStyleProperty, spread, template, use } from "solid-js/web";
+//#region src/Fundamentals/Breadcrumbs/Breadcrumbs.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<span aria-current=page>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<button type=button>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<nav><ol>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<span aria-hidden=true>`);
+var _tmpl$5 = /*#__PURE__*/ template(`<li>`);
+var DEFAULT_BREADCRUMBS_GAP = 0;
+var BreadcrumbsItem = (props) => {
+	const getIsDisabled = () => access(props.flags).isDisabled ?? false;
+	const handleClick = (e) => {
+		if (getIsDisabled()) {
+			e.preventDefault();
+			return;
+		}
+		props.onSelect(access(props.crumb).value);
+	};
+	const commonProps = {
+		"class": breadcrumbsItem,
+		get "id"() {
+			return access(props.crumb).id;
+		},
+		get "aria-disabled"() {
+			return getIsDisabled() || void 0;
+		}
+	};
+	return createComponent(Show, {
+		get when() {
+			return !access(props.flags).isCurrent;
+		},
+		get fallback() {
+			return (() => {
+				var _el$ = _tmpl$();
+				use((element) => props.ref?.(element), _el$);
+				className(_el$, breadcrumbsItem);
+				insert(_el$, () => props.renderContent(() => access(props.flags)));
+				effect(() => setAttribute(_el$, "id", access(props.crumb).id));
+				return _el$;
+			})();
+		},
+		get children() {
+			return createComponent(Show, {
+				get when() {
+					return access(props.crumb).href;
+				},
+				get fallback() {
+					return (() => {
+						var _el$2 = _tmpl$2();
+						use((element) => props.ref?.(element), _el$2);
+						spread(_el$2, mergeProps(commonProps, { "onClick": handleClick }), false, true);
+						insert(_el$2, () => props.renderContent(() => access(props.flags)));
+						return _el$2;
+					})();
+				},
+				get children() {
+					return createComponent(Dynamic, mergeProps({
+						get component() {
+							return props.linkComponent ?? "a";
+						},
+						ref: (element) => props.ref?.(element),
+						get href() {
+							return access(props.crumb).href;
+						}
+					}, commonProps, {
+						onClick: handleClick,
+						get children() {
+							return props.renderContent(() => access(props.flags));
+						}
+					}));
+				}
+			});
+		}
+	});
+};
+var Breadcrumbs = (props) => {
+	const getLastIndex = createMemo(() => access(props.crumbs).length - 1);
+	return (() => {
+		var _el$3 = _tmpl$3(), _el$4 = _el$3.firstChild;
+		className(_el$3, breadcrumbsRoot);
+		className(_el$4, breadcrumbsList);
+		insert(_el$4, createComponent(Index, {
+			get each() {
+				return access(props.crumbs);
+			},
+			children: (getCrumb, index) => (() => {
+				var _el$5 = _tmpl$5();
+				className(_el$5, breadcrumbsEntry);
+				insert(_el$5, createComponent(InteractionWrapper, {
+					isDisabled: () => getCrumb().isDisabled ?? false,
+					extraFlags: () => ({ isCurrent: index === getLastIndex() }),
+					renderControl: (setElementRef, getFlags) => createComponent(BreadcrumbsItem, {
+						ref(r$) {
+							var _ref$ = setElementRef;
+							typeof _ref$ === "function" ? _ref$(r$) : setElementRef = r$;
+						},
+						crumb: getCrumb,
+						flags: getFlags,
+						get linkComponent() {
+							return props.linkComponent;
+						},
+						renderContent: (getItemFlags) => props.renderCrumb(getCrumb, getItemFlags),
+						onSelect: (value) => props.onSelect?.(value)
+					})
+				}), null);
+				insert(_el$5, createComponent(Show, {
+					get when() {
+						return memo(() => !!props.renderSeparator)() && index !== getLastIndex();
+					},
+					get children() {
+						var _el$6 = _tmpl$4();
+						className(_el$6, breadcrumbsSeparator);
+						insert(_el$6, props.renderSeparator);
+						return _el$6;
+					}
+				}), null);
+				return _el$5;
+			})()
+		}));
+		effect((_p$) => {
+			var _v$ = access(props.ariaLabel), _v$2 = `${access(props.gap) ?? DEFAULT_BREADCRUMBS_GAP}px`;
+			_v$ !== _p$.e && setAttribute(_el$3, "aria-label", _p$.e = _v$);
+			_v$2 !== _p$.t && setStyleProperty(_el$4, "gap", _p$.t = _v$2);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0
+		});
+		return _el$3;
+	})();
+};
+//#endregion
+export { Breadcrumbs };
+
+//# sourceMappingURL=Breadcrumbs.js.map

package/dist/Fundamentals/Breadcrumbs/Breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.js","names":["Index","JSX","Show","createMemo","Dynamic","access","InteractionWrapper","BreadcrumbsItemProps","BreadcrumbsProps","styles","DEFAULT_BREADCRUMBS_GAP","BreadcrumbsItem","props","T","getIsDisabled","flags","isDisabled","handleClick","e","MouseEvent","preventDefault","onSelect","crumb","value","commonProps","Omit","HTMLAttributes","HTMLElement","breadcrumbsItem","id","aria-disabled","undefined","_$createComponent","when","isCurrent","fallback","_el$","_tmpl$","_$use","element","ref","_$className","_$insert","renderContent","_$effect","_$setAttribute","children","href","_el$2","_tmpl$2","_$spread","_$mergeProps","component","linkComponent","onClick","Breadcrumbs","getLastIndex","crumbs","length","_el$3","_tmpl$3","_el$4","firstChild","breadcrumbsRoot","breadcrumbsList","each","getCrumb","index","_el$5","_tmpl$5","breadcrumbsEntry","extraFlags","renderControl","setElementRef","getFlags","r$","_ref$","getItemFlags","renderCrumb","_$memo","renderSeparator","_el$6","_tmpl$4","breadcrumbsSeparator","_p$","_v$","ariaLabel","_v$2","gap","t","_$setStyleProperty"],"sources":["../../../src/Fundamentals/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import { Index, type JSX, Show, createMemo } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\n\nimport { access } from \"../../Utils/propUtils\";\nimport { InteractionWrapper } from \"../InteractionWrapper/InteractionWrapper\";\nimport type { BreadcrumbsItemProps, BreadcrumbsProps } from \"./Breadcrumbs.types\";\n\nimport * as styles from \"./Breadcrumbs.css\";\n\nconst DEFAULT_BREADCRUMBS_GAP = 0;\n\nconst BreadcrumbsItem = <T,>(props: BreadcrumbsItemProps<T>) => {\n    const getIsDisabled = () => access(props.flags).isDisabled ?? false;\n\n    const handleClick = (e: MouseEvent) => {\n        if (getIsDisabled()) {\n            e.preventDefault();\n            return;\n        }\n\n        props.onSelect(access(props.crumb).value);\n    };\n\n    const commonProps: Omit<JSX.HTMLAttributes<HTMLElement>, \"ref\"> = {\n        \"class\": styles.breadcrumbsItem,\n        get \"id\"() {\n            return access(props.crumb).id;\n        },\n        get \"aria-disabled\"() {\n            return getIsDisabled() || undefined;\n        },\n    };\n\n    return (\n        <Show\n            when={!access(props.flags).isCurrent}\n            fallback={\n                <span\n                    ref={(element) => props.ref?.(element)}\n                    class={styles.breadcrumbsItem}\n                    id={access(props.crumb).id}\n                    aria-current=\"page\"\n                >\n                    {props.renderContent(() => access(props.flags))}\n                </span>\n            }\n        >\n            <Show\n                when={access(props.crumb).href}\n                fallback={\n                    <button\n                        type=\"button\"\n                        ref={(element) => props.ref?.(element)}\n                        {...commonProps}\n                        onClick={handleClick}\n                    >\n                        {props.renderContent(() => access(props.flags))}\n                    </button>\n                }\n            >\n                <Dynamic\n                    component={props.linkComponent ?? \"a\"}\n                    ref={(element: HTMLElement) => props.ref?.(element)}\n                    href={access(props.crumb).href!}\n                    {...commonProps}\n                    onClick={handleClick}\n                >\n                    {props.renderContent(() => access(props.flags))}\n                </Dynamic>\n            </Show>\n        </Show>\n    );\n};\n\nexport const Breadcrumbs = <T,>(props: BreadcrumbsProps<T>) => {\n    const getLastIndex = createMemo(() => access(props.crumbs).length - 1);\n\n    return (\n        <nav class={styles.breadcrumbsRoot} aria-label={access(props.ariaLabel)}>\n            <ol class={styles.breadcrumbsList} style={{ gap: `${access(props.gap) ?? DEFAULT_BREADCRUMBS_GAP}px` }}>\n                <Index each={access(props.crumbs)}>\n                    {(getCrumb, index) => (\n                        <li class={styles.breadcrumbsEntry}>\n                            <InteractionWrapper\n                                isDisabled={() => getCrumb().isDisabled ?? false}\n                                extraFlags={() => ({ isCurrent: index === getLastIndex() })}\n                                renderControl={(setElementRef, getFlags) => (\n                                    <BreadcrumbsItem\n                                        ref={setElementRef}\n                                        crumb={getCrumb}\n                                        flags={getFlags}\n                                        linkComponent={props.linkComponent}\n                                        renderContent={(getItemFlags) => props.renderCrumb(getCrumb, getItemFlags)}\n                                        onSelect={(value) => props.onSelect?.(value)}\n                                    />\n                                )}\n                            />\n\n                            <Show when={props.renderSeparator && index !== getLastIndex()}>\n                                <span class={styles.breadcrumbsSeparator} aria-hidden=\"true\">\n                                    {props.renderSeparator!()}\n                                </span>\n                            </Show>\n                        </li>\n                    )}\n                </Index>\n            </ol>\n        </nav>\n    );\n};\n"],"mappings":"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"}

package/dist/Fundamentals/Button/Button.css.js

@@ -0,0 +1,7 @@
+/* empty css                          */
+//#region src/Fundamentals/Button/Button.css.ts
+var buttonElement = "_1lgjca40";
+//#endregion
+export { buttonElement };
+
+//# sourceMappingURL=Button.css.js.map

package/dist/Fundamentals/Button/Button.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.css.js","names":[],"sources":["../../../src/Fundamentals/Button/Button.css.ts"],"sourcesContent":["import { style } from \"@vanilla-extract/css\";\n\nexport const buttonElement = style({\n    appearance: \"none\",\n    background: \"transparent\",\n    width: \"100%\",\n    margin: 0,\n    padding: 0,\n    border: \"none\",\n    color: \"inherit !important\",\n    fontSize: \"inherit !important\",\n    fontWeight: \"inherit !important\",\n    fontFamily: \"inherit !important\",\n    lineHeight: \"inherit !important\",\n    pointerEvents: \"all\",\n    cursor: \"pointer\",\n\n    selectors: {\n        \"&:disabled, &[aria-disabled='true']\": {\n            cursor: \"not-allowed\",\n        },\n    },\n});\n"],"mappings":""}

package/dist/Fundamentals/Button/Button.js

@@ -0,0 +1,103 @@
+import { access } from "../../Utils/propUtils.js";
+import { LabelUtils } from "../Input/Label/Label.utils.js";
+import { InteractionWrapper } from "../InteractionWrapper/InteractionWrapper.js";
+import { buttonElement } from "./Button.css.js";
+import { className, createComponent, delegateEvents, effect, insert, mergeProps, setAttribute, template, use } from "solid-js/web";
+//#region src/Fundamentals/Button/Button.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<button>`);
+var DEFAULT_BUTTON_TYPE = "button";
+var ButtonElement = (props) => {
+	const getAriaLabel = LabelUtils.resolveAriaLabel(props.ariaLabel === void 0 ? void 0 : () => access(props.ariaLabel));
+	const getIsDisabled = () => access(props.flags).isDisabled ?? false;
+	return (() => {
+		var _el$ = _tmpl$();
+		_el$.addEventListener("mouseleave", (e) => {
+			if (getIsDisabled()) return;
+			props.onMouseLeave?.(e);
+		});
+		_el$.addEventListener("mouseenter", (e) => {
+			if (getIsDisabled()) return;
+			props.onMouseEnter?.(e);
+		});
+		_el$.addEventListener("pointercancel", (e) => {
+			if (getIsDisabled()) return;
+			props.onPointerUp?.(e);
+		});
+		_el$.$$pointerup = (e) => {
+			if (getIsDisabled()) return;
+			props.onPointerUp?.(e);
+		};
+		_el$.$$pointerdown = (e) => {
+			if (getIsDisabled()) return;
+			props.onPointerDown?.(e);
+		};
+		_el$.$$click = (e) => {
+			if (getIsDisabled()) return;
+			props.onClick?.(e);
+		};
+		use((element) => props.ref?.(element), _el$);
+		className(_el$, buttonElement);
+		insert(_el$, () => props.renderContent(() => access(props.flags)));
+		effect((_p$) => {
+			var _v$ = access(props.id), _v$2 = access(props.type) ?? DEFAULT_BUTTON_TYPE, _v$3 = getAriaLabel(), _v$4 = getIsDisabled() || void 0, _v$5 = access(props.flags).isPressed;
+			_v$ !== _p$.e && setAttribute(_el$, "id", _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$, "type", _p$.t = _v$2);
+			_v$3 !== _p$.a && setAttribute(_el$, "aria-label", _p$.a = _v$3);
+			_v$4 !== _p$.o && setAttribute(_el$, "aria-disabled", _p$.o = _v$4);
+			_v$5 !== _p$.i && setAttribute(_el$, "aria-pressed", _p$.i = _v$5);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0
+		});
+		return _el$;
+	})();
+};
+var Button = (props) => {
+	return createComponent(InteractionWrapper, mergeProps(props, { renderControl: (setElementRef, getFlags) => createComponent(ButtonElement, {
+		ref(r$) {
+			var _ref$ = setElementRef;
+			typeof _ref$ === "function" ? _ref$(r$) : setElementRef = r$;
+		},
+		get ariaLabel() {
+			return props.ariaLabel;
+		},
+		get type() {
+			return props.type;
+		},
+		get id() {
+			return props.id;
+		},
+		flags: getFlags,
+		get renderContent() {
+			return props.renderContent;
+		},
+		get onClick() {
+			return props.onClick;
+		},
+		get onPointerDown() {
+			return props.onPointerDown;
+		},
+		get onPointerUp() {
+			return props.onPointerUp;
+		},
+		get onMouseEnter() {
+			return props.onMouseEnter;
+		},
+		get onMouseLeave() {
+			return props.onMouseLeave;
+		}
+	}) }));
+};
+delegateEvents([
+	"click",
+	"pointerdown",
+	"pointerup"
+]);
+//#endregion
+export { Button };
+
+//# sourceMappingURL=Button.js.map

package/dist/Fundamentals/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","names":["access","LabelUtils","InteractionWrapper","ButtonElementProps","ButtonProps","ButtonType","styles","DEFAULT_BUTTON_TYPE","ButtonElement","props","getAriaLabel","resolveAriaLabel","ariaLabel","undefined","getIsDisabled","flags","isDisabled","_el$","_tmpl$","addEventListener","e","onMouseLeave","onMouseEnter","onPointerUp","$$pointerup","$$pointerdown","onPointerDown","$$click","onClick","_$use","element","ref","_$className","buttonElement","_$insert","renderContent","_$effect","_p$","_v$","id","_v$2","type","_v$3","_v$4","_v$5","isPressed","_$setAttribute","t","a","o","i","Button","_$createComponent","_$mergeProps","renderControl","setElementRef","getFlags","r$","_ref$","_$delegateEvents"],"sources":["../../../src/Fundamentals/Button/Button.tsx"],"sourcesContent":["import { access } from \"../../Utils/propUtils\";\nimport { LabelUtils } from \"../Input/Label/Label.utils\";\nimport { InteractionWrapper } from \"../InteractionWrapper/InteractionWrapper\";\nimport type { ButtonElementProps, ButtonProps, ButtonType } from \"./Button.types\";\n\nimport * as styles from \"./Button.css\";\n\nconst DEFAULT_BUTTON_TYPE: ButtonType = \"button\";\n\nconst ButtonElement = (props: ButtonElementProps) => {\n    const getAriaLabel = LabelUtils.resolveAriaLabel(\n        props.ariaLabel === undefined ? undefined : () => access(props.ariaLabel)!,\n    );\n\n    const getIsDisabled = () => access(props.flags).isDisabled ?? false;\n\n    return (\n        <button\n            id={access(props.id)}\n            ref={(element) => props.ref?.(element)}\n            type={access(props.type) ?? DEFAULT_BUTTON_TYPE}\n            class={styles.buttonElement}\n            aria-label={getAriaLabel()}\n            aria-disabled={getIsDisabled() || undefined}\n            aria-pressed={access(props.flags).isPressed}\n            onClick={(e) => {\n                if (getIsDisabled()) return;\n\n                void props.onClick?.(e);\n            }}\n            onPointerDown={(e) => {\n                if (getIsDisabled()) return;\n\n                void props.onPointerDown?.(e);\n            }}\n            onPointerUp={(e) => {\n                if (getIsDisabled()) return;\n\n                void props.onPointerUp?.(e);\n            }}\n            onPointerCancel={(e) => {\n                if (getIsDisabled()) return;\n\n                void props.onPointerUp?.(e);\n            }}\n            onMouseEnter={(e) => {\n                if (getIsDisabled()) return;\n\n                void props.onMouseEnter?.(e);\n            }}\n            onMouseLeave={(e) => {\n                if (getIsDisabled()) return;\n\n                void props.onMouseLeave?.(e);\n            }}\n        >\n            {props.renderContent(() => access(props.flags))}\n        </button>\n    );\n};\n\nexport const Button = (props: ButtonProps) => {\n    return (\n        <InteractionWrapper\n            {...props}\n            renderControl={(setElementRef, getFlags) => (\n                <ButtonElement\n                    ref={setElementRef}\n                    ariaLabel={props.ariaLabel}\n                    type={props.type}\n                    id={props.id}\n                    flags={getFlags}\n                    renderContent={props.renderContent}\n                    onClick={props.onClick}\n                    onPointerDown={props.onPointerDown}\n                    onPointerUp={props.onPointerUp}\n                    onMouseEnter={props.onMouseEnter}\n                    onMouseLeave={props.onMouseLeave}\n                />\n            )}\n        />\n    );\n};\n"],"mappings":"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"}

package/dist/Fundamentals/Carousel/Carousel.css.js

@@ -0,0 +1,13 @@
+/* empty css                                  */
+/* empty css                            */
+//#region src/Fundamentals/Carousel/Carousel.css.ts
+var carouselRoot = "a8fios0";
+var carouselViewport = "a8fios1";
+var carouselStage = "a8fios2";
+var carouselTrack = "a8fios3";
+var carouselSlide = "a8fios4";
+var carouselControl = "a8fios5 _1lgjca40";
+//#endregion
+export { carouselControl, carouselRoot, carouselSlide, carouselStage, carouselTrack, carouselViewport };
+
+//# sourceMappingURL=Carousel.css.js.map

package/dist/Fundamentals/Carousel/Carousel.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.css.js","names":[],"sources":["../../../src/Fundamentals/Carousel/Carousel.css.ts"],"sourcesContent":["import { style } from \"@vanilla-extract/css\";\n\nimport { buttonElement } from \"../Button/Button.css\";\n\nexport const carouselRoot = style({\n    display: \"flex\",\n    flexDirection: \"column\",\n});\n\nexport const carouselViewport = style({\n    position: \"relative\",\n    flexGrow: 1,\n    minHeight: 0,\n    overflow: \"hidden\",\n});\n\nexport const carouselStage = style({\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n});\n\nexport const carouselTrack = style({\n    display: \"flex\",\n    transitionProperty: \"transform\",\n});\n\nexport const carouselSlide = style({\n    flex: \"0 0 100%\",\n    minWidth: 0,\n    minHeight: 0,\n});\n\nexport const carouselControl = style([buttonElement, {}]);\n"],"mappings":""}

package/dist/Fundamentals/Carousel/Carousel.js

@@ -0,0 +1,294 @@
+import { access } from "../../Utils/propUtils.js";
+import { Barrel } from "../../Abstracts/Barrel/Barrel.js";
+import { LiveAnnouncer } from "../../Abstracts/LiveAnnouncer/LiveAnnouncer.js";
+import { InteractionTracker } from "../../Abstracts/InteractionTracker/InteractionTracker.js";
+import { SignalMirror } from "../../Abstracts/SignalMirror/SignalMirror.js";
+import { InteractionWrapper } from "../InteractionWrapper/InteractionWrapper.js";
+import { CarouselUtils } from "./Carousel.utils.js";
+import { carouselControl, carouselRoot, carouselSlide, carouselStage, carouselTrack, carouselViewport } from "./Carousel.css.js";
+import { Index, Show, createEffect, createMemo, createSignal, onCleanup } from "solid-js";
+import { MathUtils, RotationUtils } from "@thewaver/ss-utils";
+import { className, createComponent, delegateEvents, effect, insert, setAttribute, setStyleProperty, template, use } from "solid-js/web";
+//#region src/Fundamentals/Carousel/Carousel.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<button type=button>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<div role=region aria-roledescription=carousel>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<div><div>`);
+var _tmpl$5 = /*#__PURE__*/ template(`<div role=group aria-roledescription=slide>`);
+var DEFAULT_CAROUSEL_DIR = "row";
+var DEFAULT_CAROUSEL_AXIS = "row";
+var DEFAULT_CAROUSEL_SLIDE_SIZE = {
+	width: 0,
+	height: 0
+};
+var DEFAULT_CAROUSEL_TRANSITION_DURATION_MS = 400;
+var DEFAULT_CAROUSEL_GAP = 0;
+var CAROUSEL_SWIPE_COMMIT_RATIO = .2;
+var SLIDE_ROLE_DESCRIPTION = "slide";
+var MIN_ROTATABLE_COUNT = 2;
+var SLIDE_PERCENT = 100;
+var SWIPE_RATIO_LIMIT = 1;
+var STEP_LABELS = {
+	previous: "Previous slide",
+	next: "Next slide"
+};
+var ROTATION_LABELS = {
+	playing: "Stop automatic slide show",
+	stopped: "Start automatic slide show"
+};
+var CarouselControl = (props) => {
+	const getIsDisabled = () => access(props.flags).isDisabled ?? false;
+	return (() => {
+		var _el$ = _tmpl$();
+		_el$.$$click = () => {
+			if (getIsDisabled()) return;
+			props.onActivate();
+		};
+		use((element) => props.ref?.(element), _el$);
+		className(_el$, carouselControl);
+		insert(_el$, () => props.renderContent(() => access(props.flags)));
+		effect((_p$) => {
+			var _v$ = access(props.ariaLabel), _v$2 = getIsDisabled() || void 0, _v$3 = access(props.isCurrent) || void 0;
+			_v$ !== _p$.e && setAttribute(_el$, "aria-label", _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$, "aria-disabled", _p$.t = _v$2);
+			_v$3 !== _p$.a && setAttribute(_el$, "aria-current", _p$.a = _v$3);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0
+		});
+		return _el$;
+	})();
+};
+var Carousel = (props) => {
+	const [getRootRef, setRootRef] = createSignal();
+	const [getViewportRef, setViewportRef] = createSignal();
+	const [getSwipeRatio, setSwipeRatio] = createSignal(0);
+	const [getTurnAngle, setTurnAngle] = createSignal(0);
+	const [getIndex, setIndex] = SignalMirror.createOptional(() => props.indexSignal, 0);
+	const [getIsPlaying, setIsPlaying] = SignalMirror.createOptional(() => props.playingSignal, true);
+	const getCount = createMemo(() => access(props.slides).length);
+	const getCurrentIndex = createMemo(() => CarouselUtils.wrapIndex(getIndex(), getCount()));
+	const getIsDisabled = createMemo(() => access(props.isDisabled) ?? false);
+	const getIsDrum = createMemo(() => access(props.variant) === "drum");
+	const getDir = createMemo(() => access(props.dir) ?? DEFAULT_CAROUSEL_DIR);
+	const getAxis = createMemo(() => access(props.axis) ?? DEFAULT_CAROUSEL_AXIS);
+	const getSlideSize = createMemo(() => access(props.slideSize) ?? DEFAULT_CAROUSEL_SLIDE_SIZE);
+	const getTravelsAcross = createMemo(() => (getIsDrum() ? getAxis() : getDir()) === "row");
+	const getTransitionDurationMs = createMemo(() => access(props.transitionDurationMs) ?? DEFAULT_CAROUSEL_TRANSITION_DURATION_MS);
+	const getAutoplayDelayMs = createMemo(() => access(props.autoplayDelayMs));
+	const getIsHeld = InteractionTracker.trackHold(getRootRef);
+	const goTo = (index) => {
+		const next = CarouselUtils.wrapIndex(index, getCount());
+		if (next === getCurrentIndex()) return;
+		setIndex(next);
+		props.onIndexChange?.(next);
+	};
+	const { getIsSwiping } = InteractionTracker.trackSwipe(getViewportRef, () => props.renderControls === void 0 || getIsDisabled() || getCount() < MIN_ROTATABLE_COUNT, {
+		getAxis: () => getTravelsAcross() ? "horizontal" : "vertical",
+		getCommitRatio: () => CAROUSEL_SWIPE_COMMIT_RATIO,
+		onSwipe: (progressRatio) => {
+			setSwipeRatio(MathUtils.clamp(progressRatio, -1, SWIPE_RATIO_LIMIT));
+		},
+		onSwipeEnd: (direction) => {
+			setSwipeRatio(0);
+			if (direction === void 0) return;
+			goTo(getCurrentIndex() + (direction === "left" || direction === "up" ? 1 : -1));
+		}
+	});
+	const getIsRotating = createMemo(() => getAutoplayDelayMs() !== void 0 && getIsPlaying() && !getIsHeld() && !getIsSwiping() && !getIsDisabled() && getCount() >= MIN_ROTATABLE_COUNT);
+	const getAngle = createMemo(() => getTurnAngle() + getSwipeRatio() * RotationUtils.getStepAngle(getCount()));
+	const getSlideLabel = (index) => props.computeSlideLabel?.(index + 1, getCount()) ?? `${index + 1} of ${getCount()}`;
+	const getSlideState = (index, face) => ({
+		index,
+		count: getCount(),
+		face,
+		isCurrent: index === getCurrentIndex()
+	});
+	createEffect((previous) => {
+		const index = getCurrentIndex();
+		const count = getCount();
+		const stepAngle = RotationUtils.getStepAngle(count);
+		if (previous === void 0 || previous.count !== count) setTurnAngle(-stepAngle * index);
+		else if (previous.index !== index) setTurnAngle((angle) => angle - CarouselUtils.getTurnSteps(previous.index, index, count) * stepAngle);
+		return {
+			index,
+			count
+		};
+	});
+	createEffect(() => {
+		const delayMs = getAutoplayDelayMs();
+		if (!getIsRotating() || delayMs === void 0) return;
+		const from = getCurrentIndex();
+		const advance = setTimeout(() => goTo(from + 1), delayMs);
+		onCleanup(() => {
+			clearTimeout(advance);
+		});
+	});
+	createEffect((previous) => {
+		const index = getCurrentIndex();
+		if (previous !== void 0 && previous !== index && !getIsRotating()) LiveAnnouncer.announce(getSlideLabel(index));
+		return index;
+	});
+	const renderStepControl = (step) => {
+		const getTargetIndex = () => CarouselUtils.getStepTarget(step, getCurrentIndex(), getCount());
+		return createComponent(InteractionWrapper, {
+			isDisabled: () => getIsDisabled() || getCount() < MIN_ROTATABLE_COUNT,
+			extraFlags: () => ({
+				step,
+				targetIndex: getTargetIndex()
+			}),
+			renderControl: (setElementRef, getRenderProps) => createComponent(CarouselControl, {
+				ref(r$) {
+					var _ref$ = setElementRef;
+					typeof _ref$ === "function" ? _ref$(r$) : setElementRef = r$;
+				},
+				isCurrent: false,
+				ariaLabel: () => props.computeStepLabel?.(step) ?? STEP_LABELS[step],
+				flags: getRenderProps,
+				renderContent: () => props.renderStep?.(() => step, getRenderProps),
+				onActivate: () => goTo(getTargetIndex())
+			})
+		});
+	};
+	const renderPickControl = (index) => createComponent(InteractionWrapper, {
+		isDisabled: getIsDisabled,
+		extraFlags: () => ({
+			index,
+			isCurrent: index === getCurrentIndex()
+		}),
+		renderControl: (setElementRef, getRenderProps) => createComponent(CarouselControl, {
+			ref(r$) {
+				var _ref$2 = setElementRef;
+				typeof _ref$2 === "function" ? _ref$2(r$) : setElementRef = r$;
+			},
+			isCurrent: () => getRenderProps().isCurrent,
+			ariaLabel: () => getSlideLabel(index),
+			flags: getRenderProps,
+			renderContent: () => props.renderPick?.(() => index, getRenderProps),
+			onActivate: () => goTo(index)
+		})
+	});
+	const renderRotationControl = () => createComponent(InteractionWrapper, {
+		isDisabled: getIsDisabled,
+		extraFlags: () => ({
+			isPlaying: getIsPlaying(),
+			isHeld: getIsHeld()
+		}),
+		renderControl: (setElementRef, getFlags) => createComponent(CarouselControl, {
+			ref(r$) {
+				var _ref$3 = setElementRef;
+				typeof _ref$3 === "function" ? _ref$3(r$) : setElementRef = r$;
+			},
+			isCurrent: false,
+			ariaLabel: () => props.computeRotationLabel?.(getIsPlaying()) ?? (getIsPlaying() ? ROTATION_LABELS.playing : ROTATION_LABELS.stopped),
+			flags: getFlags,
+			renderContent: () => props.renderRotationControl?.(getFlags),
+			onActivate: () => setIsPlaying((prev) => !prev)
+		})
+	});
+	const controls = {
+		getIndex: getCurrentIndex,
+		getCount,
+		getIsPlaying,
+		getIsHeld,
+		renderStep: renderStepControl,
+		renderPick: renderPickControl,
+		renderRotationControl
+	};
+	const renderSlide = (getSlide, index, face) => face === "back" ? props.renderSlideBack?.(getSlide, () => getSlideState(index, face)) : props.renderSlide(getSlide, () => getSlideState(index, face));
+	return (() => {
+		var _el$2 = _tmpl$3();
+		use(setRootRef, _el$2);
+		className(_el$2, carouselRoot);
+		insert(_el$2, createComponent(Show, {
+			get when() {
+				return getIsDrum();
+			},
+			get fallback() {
+				return (() => {
+					var _el$4 = _tmpl$4(), _el$5 = _el$4.firstChild;
+					use(setViewportRef, _el$4);
+					className(_el$4, carouselViewport);
+					className(_el$5, carouselTrack);
+					insert(_el$5, createComponent(Index, {
+						get each() {
+							return access(props.slides);
+						},
+						children: (getSlide, index) => (() => {
+							var _el$6 = _tmpl$5();
+							className(_el$6, carouselSlide);
+							insert(_el$6, () => renderSlide(getSlide, index, "front"));
+							effect((_p$) => {
+								var _v$1 = getSlideLabel(index), _v$10 = index !== getCurrentIndex() || void 0, _v$11 = index !== getCurrentIndex();
+								_v$1 !== _p$.e && setAttribute(_el$6, "aria-label", _p$.e = _v$1);
+								_v$10 !== _p$.t && setAttribute(_el$6, "aria-hidden", _p$.t = _v$10);
+								_v$11 !== _p$.a && (_el$6.inert = _p$.a = _v$11);
+								return _p$;
+							}, {
+								e: void 0,
+								t: void 0,
+								a: void 0
+							});
+							return _el$6;
+						})()
+					}));
+					effect((_p$) => {
+						var _v$7 = getDir(), _v$8 = getDir() === "column" ? "100%" : void 0, _v$9 = `translate${getTravelsAcross() ? "X" : "Y"}(${(getSwipeRatio() - getCurrentIndex()) * SLIDE_PERCENT}%)`, _v$0 = `${getIsSwiping() ? 0 : getTransitionDurationMs()}ms`;
+						_v$7 !== _p$.e && setStyleProperty(_el$5, "flex-direction", _p$.e = _v$7);
+						_v$8 !== _p$.t && setStyleProperty(_el$5, "height", _p$.t = _v$8);
+						_v$9 !== _p$.a && setStyleProperty(_el$5, "transform", _p$.a = _v$9);
+						_v$0 !== _p$.o && setStyleProperty(_el$5, "transition-duration", _p$.o = _v$0);
+						return _p$;
+					}, {
+						e: void 0,
+						t: void 0,
+						a: void 0,
+						o: void 0
+					});
+					return _el$4;
+				})();
+			},
+			get children() {
+				var _el$3 = _tmpl$2();
+				use(setViewportRef, _el$3);
+				className(_el$3, carouselStage);
+				insert(_el$3, createComponent(Barrel, {
+					get faces() {
+						return props.slides;
+					},
+					axis: getAxis,
+					faceSize: getSlideSize,
+					angle: getAngle,
+					transitionDurationMs: () => getIsSwiping() ? 0 : getTransitionDurationMs(),
+					faceRoleDescription: SLIDE_ROLE_DESCRIPTION,
+					computeFaceDefs: (index, face) => ({
+						ariaLabel: getSlideLabel(index),
+						isHidden: face === "back" || index !== getCurrentIndex()
+					}),
+					renderFace: renderSlide
+				}));
+				return _el$3;
+			}
+		}), null);
+		insert(_el$2, () => props.renderControls?.(controls), null);
+		effect((_p$) => {
+			var _v$4 = !getIsDrum() && getDir() === "column" ? "100%" : void 0, _v$5 = `${access(props.gap) ?? DEFAULT_CAROUSEL_GAP}px`, _v$6 = access(props.ariaLabel);
+			_v$4 !== _p$.e && setStyleProperty(_el$2, "height", _p$.e = _v$4);
+			_v$5 !== _p$.t && setStyleProperty(_el$2, "gap", _p$.t = _v$5);
+			_v$6 !== _p$.a && setAttribute(_el$2, "aria-label", _p$.a = _v$6);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0
+		});
+		return _el$2;
+	})();
+};
+delegateEvents(["click"]);
+//#endregion
+export { Carousel };
+
+//# sourceMappingURL=Carousel.js.map