@thewaver/ss-components 0.0.1 → 0.0.2

package/dist/Exotics/Viewport/Viewport.utils.js

@@ -0,0 +1,28 @@
+import { DOMUtils } from "@thewaver/ss-utils";
+//#region src/Exotics/Viewport/Viewport.utils.ts
+var ViewportUtils;
+(function(_ViewportUtils) {
+	_ViewportUtils.getAdjustedBoundingClientRect = (child, viewportContext) => {
+		const viewportRect = viewportContext.getScaledRect();
+		const viewportScale = 1 / viewportContext.getScale();
+		return DOMUtils.scaleDOMRect(DOMUtils.offsetDOMRect(child.getBoundingClientRect(), viewportRect), viewportScale);
+	};
+	_ViewportUtils.getAdjustedClientPoint = (point, viewportContext) => {
+		const viewportRect = viewportContext.getScaledRect();
+		const viewportScale = 1 / viewportContext.getScale();
+		return {
+			x: (point.x - viewportRect.x) * viewportScale,
+			y: (point.y - viewportRect.y) * viewportScale
+		};
+	};
+	_ViewportUtils.composeScaledRect = (rect, parentRect, parentScale) => ({
+		x: parentRect.x + rect.x * parentScale,
+		y: parentRect.y + rect.y * parentScale,
+		width: rect.width * parentScale,
+		height: rect.height * parentScale
+	});
+})(ViewportUtils || (ViewportUtils = {}));
+//#endregion
+export { ViewportUtils };
+
+//# sourceMappingURL=Viewport.utils.js.map

package/dist/Exotics/Viewport/Viewport.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Viewport.utils.js","names":[],"sources":["../../../src/Exotics/Viewport/Viewport.utils.ts"],"sourcesContent":["import { DOMUtils, type Point2d, type Rect } from \"@thewaver/ss-utils\";\n\nimport type { ViewportContextType } from \"./Viewport.context.types\";\n\nexport namespace ViewportUtils {\n    export const getAdjustedBoundingClientRect = (child: Element, viewportContext: ViewportContextType) => {\n        const viewportRect = viewportContext.getScaledRect();\n        const viewportScale = 1 / viewportContext.getScale();\n\n        return DOMUtils.scaleDOMRect(\n            DOMUtils.offsetDOMRect(child.getBoundingClientRect(), viewportRect),\n            viewportScale,\n        )!;\n    };\n\n    export const getAdjustedClientPoint = (point: Point2d, viewportContext: ViewportContextType): Point2d => {\n        const viewportRect = viewportContext.getScaledRect();\n        const viewportScale = 1 / viewportContext.getScale();\n\n        return {\n            x: (point.x - viewportRect.x) * viewportScale,\n            y: (point.y - viewportRect.y) * viewportScale,\n        };\n    };\n\n    export const composeScaledRect = (rect: Rect, parentRect: Rect, parentScale: number): Rect => ({\n        x: parentRect.x + rect.x * parentScale,\n        y: parentRect.y + rect.y * parentScale,\n        width: rect.width * parentScale,\n        height: rect.height * parentScale,\n    });\n}\n"],"mappings":";;AAIO,IAAU;CAAV,SAAA,gBAAA;CACU,eAAA,iCAAiC,OAAgB,oBAAyC;EACnG,MAAM,eAAe,gBAAgB,cAAc;EACnD,MAAM,gBAAgB,IAAI,gBAAgB,SAAS;EAEnD,OAAO,SAAS,aACZ,SAAS,cAAc,MAAM,sBAAsB,GAAG,YAAY,GAClE,aACJ;CACJ;CAEa,eAAA,0BAA0B,OAAgB,oBAAkD;EACrG,MAAM,eAAe,gBAAgB,cAAc;EACnD,MAAM,gBAAgB,IAAI,gBAAgB,SAAS;EAEnD,OAAO;GACH,IAAI,MAAM,IAAI,aAAa,KAAK;GAChC,IAAI,MAAM,IAAI,aAAa,KAAK;EACpC;CACJ;CAEa,eAAA,qBAAqB,MAAY,YAAkB,iBAA+B;EAC3F,GAAG,WAAW,IAAI,KAAK,IAAI;EAC3B,GAAG,WAAW,IAAI,KAAK,IAAI;EAC3B,OAAO,KAAK,QAAQ;EACpB,QAAQ,KAAK,SAAS;CAC1B;AACH,EAAA,CAAA,kBAAA,gBAAA,CAAA,EAAD"}

package/dist/Exotics/Wheel/Wheel.css.js

@@ -0,0 +1,9 @@
+/* empty css                         */
+//#region src/Exotics/Wheel/Wheel.css.ts
+var overheadWheelRoot = "_189tea10";
+var overheadWheelWedge = "_189tea11";
+var drumWheelRoot = "_189tea12";
+//#endregion
+export { drumWheelRoot, overheadWheelRoot, overheadWheelWedge };
+
+//# sourceMappingURL=Wheel.css.js.map

package/dist/Exotics/Wheel/Wheel.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Wheel.css.js","names":[],"sources":["../../../src/Exotics/Wheel/Wheel.css.ts"],"sourcesContent":["import { style } from \"@vanilla-extract/css\";\n\nexport const overheadWheelRoot = style({\n    position: \"relative\",\n    width: \"100%\",\n    aspectRatio: \"1 / 1\",\n});\n\nexport const overheadWheelWedge = style({\n    position: \"absolute\",\n    inset: 0,\n    transformOrigin: \"center center\",\n});\n\nexport const drumWheelRoot = style({\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n});\n"],"mappings":""}

package/dist/Exotics/Wheel/Wheel.js

@@ -0,0 +1,114 @@
+import { access } from "../../Utils/propUtils.js";
+import { Barrel } from "../../Abstracts/Barrel/Barrel.js";
+import { Rotator } from "../../Abstracts/Rotator/Rotator.js";
+import { drumWheelRoot, overheadWheelRoot, overheadWheelWedge } from "./Wheel.css.js";
+import { Index, Show, createMemo, onMount } from "solid-js";
+import { className, createComponent, effect, insert, setAttribute, setStyleProperty, template } from "solid-js/web";
+//#region src/Exotics/Wheel/Wheel.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div role=group aria-roledescription=wheel>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div role=group aria-roledescription=wedge>`);
+var DEFAULT_WHEEL_AXIS = "row";
+var DEFAULT_WHEEL_WEDGE_SIZE = {
+	width: 0,
+	height: 0
+};
+var WEDGE_ROLE_DESCRIPTION = "wedge";
+var Wheel = (props) => {
+	const getWedgeCount = createMemo(() => access(props.wedges).length);
+	const getIsDisabled = createMemo(() => access(props.isDisabled) ?? false);
+	const getAxis = createMemo(() => access(props.axis) ?? DEFAULT_WHEEL_AXIS);
+	const getWedgeSize = createMemo(() => access(props.wedgeSize) ?? DEFAULT_WHEEL_WEDGE_SIZE);
+	const rotation = Rotator.createRotator(getIsDisabled, {
+		stepCount: getWedgeCount,
+		spinDurationMs: props.spinDurationMs,
+		settleDurationMs: props.settleDurationMs,
+		restDurationMs: props.restDurationMs,
+		idleDelayMs: props.idleDelayMs,
+		computeSpinTarget: props.computeSpinTarget,
+		computeSpinDefs: props.computeSpinDefs,
+		computeStepLabel: props.computeWedgeLabel,
+		onStepChange: props.onSelectedWedgeChange,
+		indexSignal: props.indexSignal,
+		autoSpinSignal: props.autoSpinSignal,
+		onSpinEnd: props.onSpinEnd
+	});
+	const getWedgeLabel = (index) => props.computeWedgeLabel?.(index, getWedgeCount()) ?? `${index + 1} of ${getWedgeCount()}`;
+	const getSelectedIndex = createMemo(() => rotation.getPhase() === "idling" ? void 0 : rotation.getSelectedIndex());
+	const getWedgeState = (index, face) => ({
+		index,
+		wedgeCount: getWedgeCount(),
+		face,
+		isSelected: index === getSelectedIndex()
+	});
+	const controller = {
+		getIndex: rotation.getIndex,
+		getPhase: rotation.getPhase,
+		getIsSpinnable: rotation.getIsSpinnable,
+		getIsAutoSpinning: () => rotation.getPhase() === "idling",
+		getIsUserSpinning: () => rotation.getIsAwaitingTarget() || rotation.getPhase() === "spinning" || rotation.getPhase() === "settling",
+		spin: rotation.spin
+	};
+	const renderWedge = (getWedge, index, face) => face === "back" ? props.renderWedgeBack?.(getWedge, () => getWedgeState(index, face)) : props.renderWedge(getWedge, () => getWedgeState(index, face));
+	onMount(() => {
+		props.onMount?.(controller);
+	});
+	return createComponent(Show, {
+		get when() {
+			return access(props.variant) === "overhead";
+		},
+		get fallback() {
+			return (() => {
+				var _el$2 = _tmpl$();
+				className(_el$2, drumWheelRoot);
+				insert(_el$2, createComponent(Barrel, {
+					get faces() {
+						return props.wedges;
+					},
+					axis: getAxis,
+					faceSize: getWedgeSize,
+					get angle() {
+						return rotation.getAngle;
+					},
+					faceRoleDescription: WEDGE_ROLE_DESCRIPTION,
+					computeFaceDefs: (index, face) => ({
+						ariaLabel: getWedgeLabel(index),
+						isHidden: face === "back" || index !== rotation.getIndex()
+					}),
+					renderFace: renderWedge
+				}));
+				effect(() => setAttribute(_el$2, "aria-label", access(props.ariaLabel)));
+				return _el$2;
+			})();
+		},
+		get children() {
+			var _el$ = _tmpl$();
+			className(_el$, overheadWheelRoot);
+			insert(_el$, createComponent(Index, {
+				get each() {
+					return access(props.wedges);
+				},
+				children: (getWedge, index) => (() => {
+					var _el$3 = _tmpl$2();
+					className(_el$3, overheadWheelWedge);
+					insert(_el$3, () => renderWedge(getWedge, index, "front"));
+					effect((_p$) => {
+						var _v$ = `rotate(${index * rotation.getStepAngle() + rotation.getAngle()}deg)`, _v$2 = getWedgeLabel(index);
+						_v$ !== _p$.e && setStyleProperty(_el$3, "transform", _p$.e = _v$);
+						_v$2 !== _p$.t && setAttribute(_el$3, "aria-label", _p$.t = _v$2);
+						return _p$;
+					}, {
+						e: void 0,
+						t: void 0
+					});
+					return _el$3;
+				})()
+			}));
+			effect(() => setAttribute(_el$, "aria-label", access(props.ariaLabel)));
+			return _el$;
+		}
+	});
+};
+//#endregion
+export { Wheel };
+
+//# sourceMappingURL=Wheel.js.map

package/dist/Exotics/Wheel/Wheel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Wheel.js","names":["Accessor","Index","Show","createMemo","onMount","Size2d","Barrel","Rotator","access","WheelAxis","WheelController","WheelFace","WheelProps","WheelWedgeState","styles","DEFAULT_WHEEL_AXIS","DEFAULT_WHEEL_WEDGE_SIZE","width","height","WHEEL_ROLE_DESCRIPTION","WEDGE_ROLE_DESCRIPTION","Wheel","props","T","getWedgeCount","wedges","length","getIsDisabled","isDisabled","getAxis","axis","getWedgeSize","wedgeSize","rotation","createRotator","stepCount","spinDurationMs","settleDurationMs","restDurationMs","idleDelayMs","computeSpinTarget","computeSpinDefs","computeStepLabel","computeWedgeLabel","onStepChange","onSelectedWedgeChange","indexSignal","autoSpinSignal","onSpinEnd","getWedgeLabel","index","getSelectedIndex","getPhase","undefined","getWedgeState","face","wedgeCount","isSelected","controller","getIndex","getIsSpinnable","getIsAutoSpinning","getIsUserSpinning","getIsAwaitingTarget","spin","renderWedge","getWedge","renderWedgeBack","_$createComponent","when","variant","fallback","_el$2","_tmpl$","_$className","drumWheelRoot","_$insert","faces","faceSize","angle","getAngle","faceRoleDescription","computeFaceDefs","ariaLabel","isHidden","renderFace","_$effect","_$setAttribute","children","_el$","overheadWheelRoot","each","_el$3","_tmpl$2","overheadWheelWedge","_p$","_v$","getStepAngle","_v$2","e","_$setStyleProperty","t"],"sources":["../../../src/Exotics/Wheel/Wheel.tsx"],"sourcesContent":["import type { Accessor } from \"solid-js\";\nimport { Index, Show, createMemo, onMount } from \"solid-js\";\n\nimport type { Size2d } from \"@thewaver/ss-utils\";\n\nimport { Barrel } from \"../../Abstracts/Barrel/Barrel\";\nimport { Rotator } from \"../../Abstracts/Rotator/Rotator\";\nimport { access } from \"../../Utils/propUtils\";\nimport type { WheelAxis, WheelController, WheelFace, WheelProps, WheelWedgeState } from \"./Wheel.types\";\n\nimport * as styles from \"./Wheel.css\";\n\nconst DEFAULT_WHEEL_AXIS: WheelAxis = \"row\";\nconst DEFAULT_WHEEL_WEDGE_SIZE: Size2d = { width: 0, height: 0 };\n\nconst WHEEL_ROLE_DESCRIPTION = \"wheel\";\nconst WEDGE_ROLE_DESCRIPTION = \"wedge\";\n\nexport const Wheel = <T,>(props: WheelProps<T>) => {\n    const getWedgeCount = createMemo(() => access(props.wedges).length);\n\n    const getIsDisabled = createMemo(() => access(props.isDisabled) ?? false);\n\n    const getAxis = createMemo(() => access(props.axis) ?? DEFAULT_WHEEL_AXIS);\n\n    const getWedgeSize = createMemo(() => access(props.wedgeSize) ?? DEFAULT_WHEEL_WEDGE_SIZE);\n\n    const rotation = Rotator.createRotator(getIsDisabled, {\n        stepCount: getWedgeCount,\n        spinDurationMs: props.spinDurationMs,\n        settleDurationMs: props.settleDurationMs,\n        restDurationMs: props.restDurationMs,\n        idleDelayMs: props.idleDelayMs,\n        computeSpinTarget: props.computeSpinTarget,\n        computeSpinDefs: props.computeSpinDefs,\n        computeStepLabel: props.computeWedgeLabel,\n        onStepChange: props.onSelectedWedgeChange,\n        indexSignal: props.indexSignal,\n        autoSpinSignal: props.autoSpinSignal,\n        onSpinEnd: props.onSpinEnd,\n    });\n\n    const getWedgeLabel = (index: number) =>\n        props.computeWedgeLabel?.(index, getWedgeCount()) ?? `${index + 1} of ${getWedgeCount()}`;\n\n    const getSelectedIndex = createMemo(() =>\n        rotation.getPhase() === \"idling\" ? undefined : rotation.getSelectedIndex(),\n    );\n\n    const getWedgeState = (index: number, face: WheelFace): WheelWedgeState => ({\n        index,\n        wedgeCount: getWedgeCount(),\n        face,\n        isSelected: index === getSelectedIndex(),\n    });\n\n    const controller: WheelController = {\n        getIndex: rotation.getIndex,\n        getPhase: rotation.getPhase,\n        getIsSpinnable: rotation.getIsSpinnable,\n        getIsAutoSpinning: () => rotation.getPhase() === \"idling\",\n        getIsUserSpinning: () =>\n            rotation.getIsAwaitingTarget() || rotation.getPhase() === \"spinning\" || rotation.getPhase() === \"settling\",\n        spin: rotation.spin,\n    };\n\n    const renderWedge = (getWedge: Accessor<T>, index: number, face: WheelFace) =>\n        face === \"back\"\n            ? props.renderWedgeBack?.(getWedge, () => getWedgeState(index, face))\n            : props.renderWedge(getWedge, () => getWedgeState(index, face));\n\n    onMount(() => {\n        props.onMount?.(controller);\n    });\n\n    return (\n        <Show\n            when={access(props.variant) === \"overhead\"}\n            fallback={\n                <div\n                    class={styles.drumWheelRoot}\n                    role=\"group\"\n                    aria-roledescription={WHEEL_ROLE_DESCRIPTION}\n                    aria-label={access(props.ariaLabel)}\n                >\n                    <Barrel<T>\n                        faces={props.wedges}\n                        axis={getAxis}\n                        faceSize={getWedgeSize}\n                        angle={rotation.getAngle}\n                        faceRoleDescription={WEDGE_ROLE_DESCRIPTION}\n                        computeFaceDefs={(index, face) => ({\n                            ariaLabel: getWedgeLabel(index),\n                            isHidden: face === \"back\" || index !== rotation.getIndex(),\n                        })}\n                        renderFace={renderWedge}\n                    />\n                </div>\n            }\n        >\n            <div\n                class={styles.overheadWheelRoot}\n                role=\"group\"\n                aria-roledescription={WHEEL_ROLE_DESCRIPTION}\n                aria-label={access(props.ariaLabel)}\n            >\n                <Index each={access(props.wedges)}>\n                    {(getWedge, index) => (\n                        <div\n                            class={styles.overheadWheelWedge}\n                            style={{\n                                transform: `rotate(${index * rotation.getStepAngle() + rotation.getAngle()}deg)`,\n                            }}\n                            role=\"group\"\n                            aria-roledescription={WEDGE_ROLE_DESCRIPTION}\n                            aria-label={getWedgeLabel(index)}\n                        >\n                            {renderWedge(getWedge, index, \"front\")}\n                        </div>\n                    )}\n                </Index>\n            </div>\n        </Show>\n    );\n};\n"],"mappings":"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"}

package/dist/Exotics/Wheel/Wheel.utils.js

@@ -0,0 +1,15 @@
+import { BARREL_PERSPECTIVE_PX, BarrelUtils } from "../../Abstracts/Barrel/Barrel.utils.js";
+//#region src/Exotics/Wheel/Wheel.utils.ts
+var DRUM_PERSPECTIVE_PX = BARREL_PERSPECTIVE_PX;
+var WheelUtils;
+(function(_WheelUtils) {
+	_WheelUtils.getWedgeExtent = BarrelUtils.getFaceExtent;
+	_WheelUtils.getHasWedgeBacks = BarrelUtils.getHasBacks;
+	_WheelUtils.getApothem = BarrelUtils.getApothem;
+	_WheelUtils.getCircumdiameter = BarrelUtils.getCircumdiameter;
+	_WheelUtils.getGirth = BarrelUtils.getGirth;
+})(WheelUtils || (WheelUtils = {}));
+//#endregion
+export { DRUM_PERSPECTIVE_PX, WheelUtils };
+
+//# sourceMappingURL=Wheel.utils.js.map

package/dist/Exotics/Wheel/Wheel.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Wheel.utils.js","names":[],"sources":["../../../src/Exotics/Wheel/Wheel.utils.ts"],"sourcesContent":["import { BARREL_PERSPECTIVE_PX, BarrelUtils } from \"../../Abstracts/Barrel/Barrel.utils\";\n\nexport const DRUM_PERSPECTIVE_PX = BARREL_PERSPECTIVE_PX;\n\nexport namespace WheelUtils {\n    export const getWedgeExtent = BarrelUtils.getFaceExtent;\n\n    export const getHasWedgeBacks = BarrelUtils.getHasBacks;\n\n    export const getApothem = BarrelUtils.getApothem;\n\n    export const getCircumdiameter = BarrelUtils.getCircumdiameter;\n\n    export const getGirth = BarrelUtils.getGirth;\n}\n"],"mappings":";;AAEA,IAAa,sBAAsB;AAE5B,IAAU;CAAV,SAAA,aAAA;CACU,YAAA,iBAAiB,YAAY;CAE7B,YAAA,mBAAmB,YAAY;CAE/B,YAAA,aAAa,YAAY;CAEzB,YAAA,oBAAoB,YAAY;CAEhC,YAAA,WAAW,YAAY;AACvC,EAAA,CAAA,eAAA,aAAA,CAAA,EAAD"}

package/dist/Fundamentals/Accordion/Accordion.css.js

@@ -0,0 +1,11 @@
+/* empty css                             */
+//#region src/Fundamentals/Accordion/Accordion.css.ts
+var accordionSizingVariants = {
+	"fit-content": "_9wtbc00",
+	fill: "_9wtbc01"
+};
+var accordionRoot = "_9wtbc02";
+//#endregion
+export { accordionRoot, accordionSizingVariants };
+
+//# sourceMappingURL=Accordion.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.css.js","names":[],"sources":["../../../src/Fundamentals/Accordion/Accordion.css.ts"],"sourcesContent":["import { style, styleVariants } from \"@vanilla-extract/css\";\n\nexport const accordionSizingVariants = styleVariants({\n    \"fit-content\": {\n        width: \"fit-content\",\n    },\n    \"fill\": {\n        width: \"100%\",\n    },\n});\n\nexport const accordionRoot = style({\n    display: \"flex\",\n    flexDirection: \"column\",\n});\n\nexport const accordionSection = style({\n    display: \"flex\",\n    flexDirection: \"column\",\n});\n\nexport const accordionHeader = style({\n    display: \"flex\",\n    pointerEvents: \"all\",\n    width: \"100%\",\n    border: \"none\",\n    padding: 0,\n    background: \"none\",\n    font: \"inherit\",\n    color: \"inherit\",\n    textAlign: \"inherit\",\n});\n\nexport const accordionHeading = style({\n    margin: 0,\n    font: \"inherit\",\n    color: \"inherit\",\n});\n\nexport const accordionPanel = style({\n    overflow: \"hidden\",\n});\n"],"mappings":""}

package/dist/Fundamentals/Accordion/Accordion.js

@@ -0,0 +1,121 @@
+import { access, accessSignal } from "../../Utils/propUtils.js";
+import { NavigatorUtils } from "../../Abstracts/Navigator/Navigator.utils.js";
+import { SignalMirror } from "../../Abstracts/SignalMirror/SignalMirror.js";
+import { Collapsible } from "../Collapsible/Collapsible.js";
+import { accordionRoot, accordionSizingVariants } from "./Accordion.css.js";
+import { Index, createMemo, createSignal, createUniqueId } from "solid-js";
+import { className, createComponent, delegateEvents, effect, insert, setStyleProperty, template } from "solid-js/web";
+//#region src/Fundamentals/Accordion/Accordion.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+var DEFAULT_ACCORDION_HEADING_LEVEL = 3;
+var DEFAULT_ACCORDION_GAP = 0;
+var DEFAULT_ACCORDION_SIZING = "fill";
+var AccordionSection = (props) => {
+	const headerId = createUniqueId();
+	const expandedSignal = SignalMirror.createPassThrough(() => access(props.isExpanded), () => props.onToggle());
+	return createComponent(Collapsible, {
+		ref(r$) {
+			var _ref$ = props.ref;
+			typeof _ref$ === "function" ? _ref$(r$) : props.ref = r$;
+		},
+		id: () => headerId,
+		isDisabled: () => access(props.item).isDisabled ?? false,
+		get headingLevel() {
+			return props.headingLevel;
+		},
+		get isScrolledIntoViewOnExpand() {
+			return props.isScrolledIntoViewOnExpand;
+		},
+		get isPanelBuiltOnExpand() {
+			return props.isPanelBuiltOnExpand;
+		},
+		get transitionDurationMs() {
+			return props.transitionDurationMs;
+		},
+		panelRole: "region",
+		panelAriaAttributes: () => ({ "aria-labelledby": headerId }),
+		expandedSignal,
+		renderTrigger: (getFlags) => props.renderHeader(() => access(props.item), getFlags),
+		renderPanel: (getVisibilityTarget, getTransitionDurationMs) => props.renderPanel(() => access(props.item), getVisibilityTarget, getTransitionDurationMs)
+	});
+};
+var Accordion = (props) => {
+	const expandedSignal = accessSignal(() => props.expandedSignal);
+	const [getHeaderRefs, setHeaderRefs] = createSignal([]);
+	const getHeadingLevel = createMemo(() => access(props.headingLevel) ?? DEFAULT_ACCORDION_HEADING_LEVEL);
+	const getSizing = createMemo(() => access(props.sizing) ?? DEFAULT_ACCORDION_SIZING);
+	const setHeaderRef = (index, element) => {
+		setHeaderRefs((prev) => {
+			const next = [...prev];
+			next[index] = element;
+			return next;
+		});
+	};
+	const getNavigableIndexes = createMemo(() => access(props.items).reduce((acc, item, index) => {
+		if (!item.isDisabled) acc.push(index);
+		return acc;
+	}, []));
+	const handleToggle = (value) => {
+		expandedSignal[1]((prev) => {
+			const isExpanded = prev.includes(value);
+			if (isExpanded && prev.length === 1 && (access(props.isExpandRequired) ?? false)) return prev;
+			if (access(props.isSingleExpand)) return isExpanded ? [] : [value];
+			return isExpanded ? prev.filter((expanded) => expanded !== value) : [...prev, value];
+		});
+	};
+	const handleKeyDown = (e) => {
+		const navigable = getNavigableIndexes();
+		const focused = getHeaderRefs().findIndex((ref) => ref === document.activeElement);
+		if (navigable.length < 1 || focused < 0) return;
+		const position = NavigatorUtils.computeNextPosition(e.key, navigable.indexOf(focused), navigable.length);
+		if (position === void 0) return;
+		e.preventDefault();
+		getHeaderRefs()[navigable[position]]?.focus();
+	};
+	return (() => {
+		var _el$ = _tmpl$();
+		_el$.$$keydown = handleKeyDown;
+		insert(_el$, createComponent(Index, {
+			get each() {
+				return access(props.items);
+			},
+			children: (getItem, index) => createComponent(AccordionSection, {
+				ref: (element) => setHeaderRef(index, element),
+				item: getItem,
+				headingLevel: getHeadingLevel,
+				isExpanded: () => expandedSignal[0]().includes(getItem().value),
+				get isScrolledIntoViewOnExpand() {
+					return props.isScrolledIntoViewOnExpand;
+				},
+				get isPanelBuiltOnExpand() {
+					return props.isPanelBuiltOnExpand;
+				},
+				get transitionDurationMs() {
+					return props.transitionDurationMs;
+				},
+				get renderHeader() {
+					return props.renderHeader;
+				},
+				get renderPanel() {
+					return props.renderPanel;
+				},
+				onToggle: () => handleToggle(getItem().value)
+			})
+		}));
+		effect((_p$) => {
+			var _v$ = [accordionRoot, accordionSizingVariants[getSizing()]].join(" "), _v$2 = `${access(props.gap) ?? DEFAULT_ACCORDION_GAP}px`;
+			_v$ !== _p$.e && className(_el$, _p$.e = _v$);
+			_v$2 !== _p$.t && setStyleProperty(_el$, "gap", _p$.t = _v$2);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0
+		});
+		return _el$;
+	})();
+};
+delegateEvents(["keydown"]);
+//#endregion
+export { Accordion };
+
+//# sourceMappingURL=Accordion.js.map

package/dist/Fundamentals/Accordion/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","names":["Index","createMemo","createSignal","createUniqueId","NavigatorUtils","SignalMirror","access","accessSignal","Collapsible","AccordionProps","AccordionSectionProps","AccordionSizing","styles","DEFAULT_ACCORDION_HEADING_LEVEL","DEFAULT_ACCORDION_GAP","DEFAULT_ACCORDION_SIZING","AccordionSection","props","T","headerId","expandedSignal","createPassThrough","isExpanded","onToggle","_$createComponent","ref","r$","_ref$","id","isDisabled","item","headingLevel","isScrolledIntoViewOnExpand","isPanelBuiltOnExpand","transitionDurationMs","panelRole","panelAriaAttributes","renderTrigger","getFlags","renderHeader","renderPanel","getVisibilityTarget","getTransitionDurationMs","Accordion","getHeaderRefs","setHeaderRefs","HTMLElement","getHeadingLevel","getSizing","sizing","setHeaderRef","index","element","prev","next","getNavigableIndexes","items","reduce","acc","push","handleToggle","value","includes","isLastExpanded","length","isExpandRequired","isSingleExpand","filter","expanded","handleKeyDown","e","KeyboardEvent","navigable","focused","findIndex","document","activeElement","position","computeNextPosition","key","indexOf","undefined","preventDefault","focus","_el$","_tmpl$","$$keydown","_$insert","each","children","getItem","_$effect","_p$","_v$","accordionRoot","accordionSizingVariants","join","_v$2","gap","_$className","t","_$setStyleProperty","_$delegateEvents"],"sources":["../../../src/Fundamentals/Accordion/Accordion.tsx"],"sourcesContent":["import { Index, createMemo, createSignal, createUniqueId } from \"solid-js\";\r\n\r\nimport { NavigatorUtils } from \"../../Abstracts/Navigator/Navigator.utils\";\r\nimport { SignalMirror } from \"../../Abstracts/SignalMirror/SignalMirror\";\r\nimport { access, accessSignal } from \"../../Utils/propUtils\";\r\nimport { Collapsible } from \"../Collapsible/Collapsible\";\r\nimport type { AccordionProps, AccordionSectionProps, AccordionSizing } from \"./Accordion.types\";\r\n\r\nimport * as styles from \"./Accordion.css\";\r\n\r\nconst DEFAULT_ACCORDION_HEADING_LEVEL = 3;\r\nconst DEFAULT_ACCORDION_GAP = 0;\r\nconst DEFAULT_ACCORDION_SIZING: AccordionSizing = \"fill\";\r\n\r\nconst AccordionSection = <T,>(props: AccordionSectionProps<T>) => {\r\n    const headerId = createUniqueId();\r\n\r\n    const expandedSignal = SignalMirror.createPassThrough(\r\n        () => access(props.isExpanded),\r\n        () => props.onToggle(),\r\n    );\r\n\r\n    return (\r\n        <Collapsible\r\n            ref={props.ref}\r\n            id={() => headerId}\r\n            isDisabled={() => access(props.item).isDisabled ?? false}\r\n            headingLevel={props.headingLevel}\r\n            isScrolledIntoViewOnExpand={props.isScrolledIntoViewOnExpand}\r\n            isPanelBuiltOnExpand={props.isPanelBuiltOnExpand}\r\n            transitionDurationMs={props.transitionDurationMs}\r\n            panelRole={\"region\"}\r\n            panelAriaAttributes={() => ({ \"aria-labelledby\": headerId })}\r\n            expandedSignal={expandedSignal}\r\n            renderTrigger={(getFlags) => props.renderHeader(() => access(props.item), getFlags)}\r\n            renderPanel={(getVisibilityTarget, getTransitionDurationMs) =>\r\n                props.renderPanel(() => access(props.item), getVisibilityTarget, getTransitionDurationMs)\r\n            }\r\n        />\r\n    );\r\n};\r\n\r\nexport const Accordion = <T,>(props: AccordionProps<T>) => {\r\n    const expandedSignal = accessSignal(() => props.expandedSignal);\r\n\r\n    const [getHeaderRefs, setHeaderRefs] = createSignal<(HTMLElement | undefined)[]>([]);\r\n\r\n    const getHeadingLevel = createMemo(() => access(props.headingLevel) ?? DEFAULT_ACCORDION_HEADING_LEVEL);\r\n\r\n    const getSizing = createMemo(() => access(props.sizing) ?? DEFAULT_ACCORDION_SIZING);\r\n\r\n    const setHeaderRef = (index: number, element: HTMLElement) => {\r\n        setHeaderRefs((prev) => {\r\n            const next = [...prev];\r\n\r\n            next[index] = element;\r\n\r\n            return next;\r\n        });\r\n    };\r\n\r\n    const getNavigableIndexes = createMemo(() =>\r\n        access(props.items).reduce<number[]>((acc, item, index) => {\r\n            if (!item.isDisabled) acc.push(index);\r\n\r\n            return acc;\r\n        }, []),\r\n    );\r\n\r\n    const handleToggle = (value: T) => {\r\n        expandedSignal[1]((prev) => {\r\n            const isExpanded = prev.includes(value);\r\n            const isLastExpanded = isExpanded && prev.length === 1;\r\n\r\n            if (isLastExpanded && (access(props.isExpandRequired) ?? false)) return prev;\r\n\r\n            if (access(props.isSingleExpand)) return isExpanded ? [] : [value];\r\n\r\n            return isExpanded ? prev.filter((expanded) => expanded !== value) : [...prev, value];\r\n        });\r\n    };\r\n\r\n    const handleKeyDown = (e: KeyboardEvent) => {\r\n        const navigable = getNavigableIndexes();\r\n        const focused = getHeaderRefs().findIndex((ref) => ref === document.activeElement);\r\n\r\n        if (navigable.length < 1 || focused < 0) return;\r\n\r\n        const position = NavigatorUtils.computeNextPosition(e.key, navigable.indexOf(focused), navigable.length);\r\n\r\n        if (position === undefined) return;\r\n\r\n        e.preventDefault();\r\n\r\n        getHeaderRefs()[navigable[position]]?.focus();\r\n    };\r\n\r\n    return (\r\n        <div\r\n            class={[styles.accordionRoot, styles.accordionSizingVariants[getSizing()]].join(\" \")}\r\n            style={{ gap: `${access(props.gap) ?? DEFAULT_ACCORDION_GAP}px` }}\r\n            onKeyDown={handleKeyDown}\r\n        >\r\n            <Index each={access(props.items)}>\r\n                {(getItem, index) => (\r\n                    <AccordionSection\r\n                        ref={(element) => setHeaderRef(index, element)}\r\n                        item={getItem}\r\n                        headingLevel={getHeadingLevel}\r\n                        isExpanded={() => expandedSignal[0]().includes(getItem().value)}\r\n                        isScrolledIntoViewOnExpand={props.isScrolledIntoViewOnExpand}\r\n                        isPanelBuiltOnExpand={props.isPanelBuiltOnExpand}\r\n                        transitionDurationMs={props.transitionDurationMs}\r\n                        renderHeader={props.renderHeader}\r\n                        renderPanel={props.renderPanel}\r\n                        onToggle={() => handleToggle(getItem().value)}\r\n                    />\r\n                )}\r\n            </Index>\r\n        </div>\r\n    );\r\n};\r\n"],"mappings":"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"}

package/dist/Fundamentals/AudioSwitcher/AudioSwitcher.js

@@ -0,0 +1,121 @@
+import { access } from "../../Utils/propUtils.js";
+import { SignalMirror } from "../../Abstracts/SignalMirror/SignalMirror.js";
+import { createEffect, createMemo, createSignal, on, onCleanup, onMount } from "solid-js";
+import { AudioUtils, MathUtils } from "@thewaver/ss-utils";
+//#region src/Fundamentals/AudioSwitcher/AudioSwitcher.tsx
+var DEFAULT_AUDIO_SWITCHER_CROSSFADE_MS = 500;
+var DEFAULT_AUDIO_SWITCHER_CROSSFADE_STEPS = 25;
+var DEFAULT_AUDIO_SWITCHER_VOLUME = .5;
+var AudioSwitcher = (props) => {
+	const fades = /* @__PURE__ */ new Map();
+	let isMounted = false;
+	const audioA = new Audio();
+	const audioB = new Audio();
+	const [getCurrentSrc, setCurrentSrc] = createSignal();
+	const [getVersion, setVersion] = createSignal(0);
+	const isEven = createMemo(() => MathUtils.isEven(getVersion()));
+	const getVolume = createMemo(() => access(props.volume) ?? DEFAULT_AUDIO_SWITCHER_VOLUME);
+	const getStep = createMemo(() => getVolume() / DEFAULT_AUDIO_SWITCHER_CROSSFADE_STEPS);
+	const getIntervalMs = createMemo(() => (access(props.crossfadeMs) ?? DEFAULT_AUDIO_SWITCHER_CROSSFADE_MS) / DEFAULT_AUDIO_SWITCHER_CROSSFADE_STEPS);
+	const getActiveElement = createMemo(() => isEven() ? audioA : audioB);
+	const getInactiveElement = createMemo(() => !isEven() ? audioA : audioB);
+	const getFadeDirection = (element) => fades.get(element)?.direction;
+	const clearFade = (element) => {
+		const fade = fades.get(element);
+		if (!fade) return;
+		clearInterval(fade.handle);
+		fades.delete(element);
+	};
+	const startFade = (element, direction, tick) => {
+		clearFade(element);
+		fades.set(element, {
+			handle: setInterval(tick, getIntervalMs()),
+			direction
+		});
+	};
+	const fadeIn = (element) => {
+		const step = getStep();
+		const volume = getVolume();
+		const fadeInTick = () => {
+			element.volume = Math.min(element.volume + step, volume);
+			if (element.volume === volume) clearFade(element);
+		};
+		clearFade(element);
+		element.volume = 0;
+		element.play().then(() => {
+			if (!isMounted || element !== getActiveElement()) return;
+			if (getFadeDirection(element) === "out") return;
+			startFade(element, "in", fadeInTick);
+		}).catch((err) => {
+			console.warn("Playback prevented by browser autoplay restrictions:", err);
+			clearFade(element);
+		});
+	};
+	const fadeOut = (element) => {
+		const step = getStep();
+		const fadeOutTick = () => {
+			element.volume = Math.max(element.volume - step, 0);
+			if (element.volume === 0) {
+				element.pause();
+				clearFade(element);
+			}
+		};
+		startFade(element, "out", fadeOutTick);
+	};
+	const [getIsPlaying] = SignalMirror.createOptional(() => props.playbackSignal, false);
+	createEffect(() => {
+		const active = getActiveElement();
+		if (!active) return;
+		if (getIsPlaying()) {
+			if (!AudioUtils.isPlaying(active) || getFadeDirection(active) === "out") fadeIn(active);
+			return;
+		}
+		if (AudioUtils.isPlaying(active) && getFadeDirection(active) !== "out") fadeOut(active);
+	});
+	const controller = createMemo(() => ({ reset: () => {
+		const active = getActiveElement();
+		if (active) {
+			active.currentTime = 0;
+			return true;
+		}
+		return false;
+	} }));
+	createEffect(on(getVolume, (volume) => {
+		const active = getActiveElement();
+		if (active && !fades.has(active)) active.volume = volume;
+	}));
+	createEffect(() => {
+		const src = access(props.src);
+		if (src !== getCurrentSrc()) {
+			setCurrentSrc(src);
+			setVersion((v) => v + 1);
+			const active = getActiveElement();
+			const inactive = getInactiveElement();
+			if (AudioUtils.isPlaying(inactive)) fadeOut(inactive);
+			if (src) {
+				active.src = src;
+				active.loop = true;
+				active.currentTime = 0;
+				fadeIn(active);
+			}
+		}
+	});
+	onCleanup(() => {
+		isMounted = false;
+		for (const element of [audioA, audioB]) {
+			clearFade(element);
+			element.pause();
+			element.src = "";
+			element.load();
+		}
+	});
+	onMount(() => {
+		isMounted = true;
+		props.onMount?.(controller());
+	});
+	return null;
+};
+//#endregion
+export { AudioSwitcher };
+
+//# sourceMappingURL=AudioSwitcher.js.map

package/dist/Fundamentals/AudioSwitcher/AudioSwitcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudioSwitcher.js","names":["createEffect","createMemo","createSignal","on","onCleanup","onMount","AudioUtils","MathUtils","SignalMirror","access","AudioSwitcherProps","DEFAULT_AUDIO_SWITCHER_CROSSFADE_MS","DEFAULT_AUDIO_SWITCHER_CROSSFADE_STEPS","DEFAULT_AUDIO_SWITCHER_VOLUME","FadeDirection","Fade","handle","ReturnType","setInterval","direction","AudioSwitcher","props","fades","Map","HTMLAudioElement","isMounted","audioA","Audio","audioB","getCurrentSrc","setCurrentSrc","getVersion","setVersion","isEven","getVolume","volume","getStep","getIntervalMs","crossfadeMs","getActiveElement","getInactiveElement","getFadeDirection","element","get","clearFade","fade","clearInterval","delete","startFade","tick","set","fadeIn","step","fadeInTick","Math","min","play","then","catch","err","console","warn","fadeOut","fadeOutTick","max","pause","getIsPlaying","createOptional","playbackSignal","active","isPlaying","controller","reset","currentTime","has","src","v","inactive","loop","load"],"sources":["../../../src/Fundamentals/AudioSwitcher/AudioSwitcher.tsx"],"sourcesContent":["import { createEffect, createMemo, createSignal, on, onCleanup, onMount } from \"solid-js\";\n\nimport { AudioUtils } from \"@thewaver/ss-utils\";\nimport { MathUtils } from \"@thewaver/ss-utils\";\n\nimport { SignalMirror } from \"../../Abstracts/SignalMirror/SignalMirror\";\nimport { access } from \"../../Utils/propUtils\";\nimport type { AudioSwitcherProps } from \"./AudioSwitcher.types\";\n\nconst DEFAULT_AUDIO_SWITCHER_CROSSFADE_MS = 500;\nconst DEFAULT_AUDIO_SWITCHER_CROSSFADE_STEPS = 25;\nconst DEFAULT_AUDIO_SWITCHER_VOLUME = 0.5;\n\ntype FadeDirection = \"in\" | \"out\";\n\ntype Fade = {\n    handle: ReturnType<typeof setInterval>;\n    direction: FadeDirection;\n};\n\nexport const AudioSwitcher = (props: AudioSwitcherProps) => {\n    const fades = new Map<HTMLAudioElement, Fade>();\n\n    let isMounted = false;\n\n    const audioA = new Audio();\n    const audioB = new Audio();\n\n    const [getCurrentSrc, setCurrentSrc] = createSignal<string>();\n    const [getVersion, setVersion] = createSignal(0);\n\n    const isEven = createMemo(() => MathUtils.isEven(getVersion()));\n    const getVolume = createMemo(() => access(props.volume) ?? DEFAULT_AUDIO_SWITCHER_VOLUME);\n    const getStep = createMemo(() => getVolume() / DEFAULT_AUDIO_SWITCHER_CROSSFADE_STEPS);\n\n    const getIntervalMs = createMemo(\n        () =>\n            (access(props.crossfadeMs) ?? DEFAULT_AUDIO_SWITCHER_CROSSFADE_MS) / DEFAULT_AUDIO_SWITCHER_CROSSFADE_STEPS,\n    );\n\n    const getActiveElement = createMemo(() => (isEven() ? audioA : audioB));\n\n    const getInactiveElement = createMemo(() => (!isEven() ? audioA : audioB));\n\n    const getFadeDirection = (element: HTMLAudioElement) => fades.get(element)?.direction;\n\n    const clearFade = (element: HTMLAudioElement) => {\n        const fade = fades.get(element);\n\n        if (!fade) return;\n\n        clearInterval(fade.handle);\n        fades.delete(element);\n    };\n\n    const startFade = (element: HTMLAudioElement, direction: FadeDirection, tick: () => void) => {\n        clearFade(element);\n\n        fades.set(element, { handle: setInterval(tick, getIntervalMs()), direction });\n    };\n\n    const fadeIn = (element: HTMLAudioElement) => {\n        const step = getStep();\n        const volume = getVolume();\n\n        const fadeInTick = () => {\n            element.volume = Math.min(element.volume + step, volume);\n\n            if (element.volume === volume) {\n                clearFade(element);\n            }\n        };\n\n        clearFade(element);\n\n        element.volume = 0;\n        element\n            .play()\n            .then(() => {\n                if (!isMounted || element !== getActiveElement()) return;\n                if (getFadeDirection(element) === \"out\") return;\n\n                startFade(element, \"in\", fadeInTick);\n            })\n            .catch((err) => {\n                console.warn(\"Playback prevented by browser autoplay restrictions:\", err);\n                clearFade(element);\n            });\n    };\n\n    const fadeOut = (element: HTMLAudioElement) => {\n        const step = getStep();\n\n        const fadeOutTick = () => {\n            element.volume = Math.max(element.volume - step, 0);\n\n            if (element.volume === 0) {\n                element.pause();\n                clearFade(element);\n            }\n        };\n\n        startFade(element, \"out\", fadeOutTick);\n    };\n\n    const [getIsPlaying] = SignalMirror.createOptional(() => props.playbackSignal, false);\n\n    createEffect(() => {\n        const active = getActiveElement();\n\n        if (!active) return;\n\n        if (getIsPlaying()) {\n            if (!AudioUtils.isPlaying(active) || getFadeDirection(active) === \"out\") fadeIn(active);\n\n            return;\n        }\n\n        if (AudioUtils.isPlaying(active) && getFadeDirection(active) !== \"out\") fadeOut(active);\n    });\n\n    const controller = createMemo(() => ({\n        reset: () => {\n            const active = getActiveElement();\n\n            if (active) {\n                active.currentTime = 0;\n\n                return true;\n            }\n            return false;\n        },\n    }));\n\n    createEffect(\n        on(getVolume, (volume) => {\n            const active = getActiveElement();\n\n            if (active && !fades.has(active)) {\n                active.volume = volume;\n            }\n        }),\n    );\n\n    createEffect(() => {\n        const src = access(props.src);\n\n        if (src !== getCurrentSrc()) {\n            setCurrentSrc(src);\n            setVersion((v) => v + 1);\n\n            const active = getActiveElement();\n            const inactive = getInactiveElement();\n\n            if (AudioUtils.isPlaying(inactive)) {\n                fadeOut(inactive);\n            }\n\n            if (src) {\n                active.src = src;\n                active.loop = true;\n                active.currentTime = 0;\n\n                fadeIn(active);\n            }\n        }\n    });\n\n    onCleanup(() => {\n        isMounted = false;\n\n        for (const element of [audioA, audioB]) {\n            clearFade(element);\n            element.pause();\n            element.src = \"\";\n            element.load();\n        }\n    });\n\n    onMount(() => {\n        isMounted = true;\n        props.onMount?.(controller());\n    });\n\n    return null;\n};\n"],"mappings":"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"}

package/dist/Fundamentals/Breadcrumbs/Breadcrumbs.css.js

@@ -0,0 +1,12 @@
+/* empty css                                  */
+/* empty css                               */
+//#region src/Fundamentals/Breadcrumbs/Breadcrumbs.css.ts
+var breadcrumbsRoot = "_1biwlg0";
+var breadcrumbsList = "_1biwlg1";
+var breadcrumbsEntry = "_1biwlg2";
+var breadcrumbsSeparator = "_1biwlg3";
+var breadcrumbsItem = "_1biwlg4 _1lgjca40";
+//#endregion
+export { breadcrumbsEntry, breadcrumbsItem, breadcrumbsList, breadcrumbsRoot, breadcrumbsSeparator };
+
+//# sourceMappingURL=Breadcrumbs.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.css.js","names":[],"sources":["../../../src/Fundamentals/Breadcrumbs/Breadcrumbs.css.ts"],"sourcesContent":["import { style } from \"@vanilla-extract/css\";\n\nimport { buttonElement } from \"../Button/Button.css\";\n\nexport const breadcrumbsRoot = style({\n    display: \"flex\",\n});\n\nexport const breadcrumbsList = style({\n    display: \"flex\",\n    alignItems: \"center\",\n    margin: 0,\n    padding: 0,\n    listStyle: \"none\",\n});\n\nexport const breadcrumbsEntry = style({\n    display: \"flex\",\n    alignItems: \"center\",\n});\n\nexport const breadcrumbsSeparator = style({\n    display: \"flex\",\n    alignItems: \"center\",\n});\n\nexport const breadcrumbsItem = style([buttonElement, {}]);\n"],"mappings":""}