@thewaver/ss-components 0.0.1 → 0.0.2

package/dist/Fundamentals/Popover/Popover.js

@@ -0,0 +1,95 @@
+import { useViewportContext } from "../../Exotics/Viewport/Viewport.context.js";
+import { Anchor } from "../../Abstracts/Anchor/Anchor.js";
+import { access } from "../../Utils/propUtils.js";
+import { DismisserStack } from "../../Abstracts/Dismisser/DismisserStack.js";
+import { ElementFader } from "../../Abstracts/ElementFader/ElementFader.js";
+import { FocusManager } from "../../Abstracts/FocusManager/FocusManager.js";
+import { popoverRoot } from "./Popover.css.js";
+import { Show, createEffect, createMemo, createSignal } from "solid-js";
+import { Portal, className, createComponent, insert, mergeProps, spread, template, use } from "solid-js/web";
+//#region src/Fundamentals/Popover/Popover.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div tabindex=-1>`);
+var DEFAULT_POPOVER_PLACEMENT = {
+	x: "left-in",
+	y: "bottom-out"
+};
+var DEFAULT_POPOVER_TRANSITION_DURATION_MS = 200;
+var Popover = (props) => {
+	const viewportContext = useViewportContext();
+	const [getRootRef, setRootRef] = createSignal();
+	const getTransitionDurationMs = createMemo(() => access(props.transitionDurationMs) ?? DEFAULT_POPOVER_TRANSITION_DURATION_MS);
+	const { getIsVisible, getTransitionTarget, getHasTransitionFinished } = ElementFader.createFader(() => access(props.isOpen), { getTransitionDurationMs });
+	const { getAnchorRect, getPlacement, getPosition, getZIndex, setContentRef } = Anchor.createPortalPosition(() => access(props.anchorRef), getIsVisible, {
+		getPlacement: () => access(props.placement) ?? DEFAULT_POPOVER_PLACEMENT,
+		getOffset: props.offset === void 0 ? void 0 : () => access(props.offset),
+		getReservedScreenSize: props.reservedScreenSize === void 0 ? void 0 : () => access(props.reservedScreenSize),
+		getAnchorRect: props.anchorRect === void 0 ? void 0 : () => access(props.anchorRect)
+	});
+	const getMinWidth = createMemo(() => access(props.hasAnchorMinWidth) ? `${getAnchorRect()?.width ?? 0}px` : void 0);
+	const getAnchorColor = createMemo(() => {
+		const anchor = access(props.anchorRef);
+		return anchor && getIsVisible() ? getComputedStyle(anchor).color : void 0;
+	});
+	const getHasFocus = createMemo(() => (access(props.hasAutoFocus) ?? false) && access(props.isOpen) && getPosition() !== void 0);
+	FocusManager.autoFocus(getRootRef, getHasFocus, { getInitialRef: getRootRef });
+	DismisserStack.createLayer(() => access(props.isOpen), {
+		getRoots: () => [getRootRef(), props.anchorRect === void 0 ? access(props.anchorRef) : void 0],
+		onDismiss: (reason) => props.onDismiss?.(reason)
+	});
+	createEffect(() => {
+		props.onTransitionStatusChange?.(getHasTransitionFinished());
+	});
+	return createComponent(Show, {
+		get when() {
+			return getIsVisible();
+		},
+		get children() {
+			return createComponent(Portal, {
+				get mount() {
+					return viewportContext.getPortalRef();
+				},
+				get children() {
+					var _el$ = _tmpl$();
+					use((element) => {
+						setContentRef(element);
+						setRootRef(element);
+					}, _el$);
+					className(_el$, popoverRoot);
+					spread(_el$, mergeProps({
+						get id() {
+							return access(props.id);
+						},
+						get style() {
+							return {
+								"visibility": getPosition() ? "visible" : "hidden",
+								"transform": `translate(${getPosition()?.x ?? 0}px, ${getPosition()?.y ?? 0}px)`,
+								"min-width": getMinWidth(),
+								"color": getAnchorColor(),
+								"z-index": getZIndex()
+							};
+						},
+						get inert() {
+							return !access(props.isOpen);
+						},
+						get role() {
+							return access(props.role);
+						}
+					}, () => access(props.ariaAttributes), {
+						"onKeyDown": (e) => props.onKeyDown?.(e),
+						"onBlur": (e) => props.onBlur?.(e),
+						"onMouseDown": (e) => {
+							if (access(props.role) === "dialog") return;
+							e.preventDefault();
+						}
+					}), false, true);
+					insert(_el$, () => props.renderContent(getTransitionTarget, getTransitionDurationMs, getPlacement));
+					return _el$;
+				}
+			});
+		}
+	});
+};
+//#endregion
+export { Popover };
+
+//# sourceMappingURL=Popover.js.map

package/dist/Fundamentals/Popover/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","names":["Show","createEffect","createMemo","createSignal","Portal","Anchor","AnchorPlacement","DismisserStack","ElementFader","FocusManager","useViewportContext","access","PopoverProps","styles","DEFAULT_POPOVER_PLACEMENT","x","y","DEFAULT_POPOVER_TRANSITION_DURATION_MS","Popover","props","viewportContext","getRootRef","setRootRef","HTMLElement","getTransitionDurationMs","transitionDurationMs","getIsVisible","getTransitionTarget","getHasTransitionFinished","createFader","isOpen","getAnchorRect","getPlacement","getPosition","getZIndex","setContentRef","createPortalPosition","anchorRef","placement","getOffset","offset","undefined","getReservedScreenSize","reservedScreenSize","anchorRect","getMinWidth","hasAnchorMinWidth","width","getAnchorColor","anchor","getComputedStyle","color","getHasFocus","hasAutoFocus","autoFocus","getInitialRef","createLayer","getRoots","onDismiss","reason","onTransitionStatusChange","_$createComponent","when","children","mount","getPortalRef","_el$","_tmpl$","_$use","element","_$className","popoverRoot","_$spread","_$mergeProps","id","style","inert","role","ariaAttributes","e","onKeyDown","onBlur","preventDefault","_$insert","renderContent"],"sources":["../../../src/Fundamentals/Popover/Popover.tsx"],"sourcesContent":["import { Show, createEffect, createMemo, createSignal } from \"solid-js\";\nimport { Portal } from \"solid-js/web\";\n\nimport { Anchor } from \"../../Abstracts/Anchor/Anchor\";\nimport type { AnchorPlacement } from \"../../Abstracts/Anchor/Anchor.types\";\nimport { DismisserStack } from \"../../Abstracts/Dismisser/DismisserStack\";\nimport { ElementFader } from \"../../Abstracts/ElementFader/ElementFader\";\nimport { FocusManager } from \"../../Abstracts/FocusManager/FocusManager\";\nimport { useViewportContext } from \"../../Exotics/Viewport/Viewport.context\";\nimport { access } from \"../../Utils/propUtils\";\nimport type { PopoverProps } from \"./Popover.types\";\n\nimport * as styles from \"./Popover.css\";\n\nconst DEFAULT_POPOVER_PLACEMENT: AnchorPlacement = { x: \"left-in\", y: \"bottom-out\" };\nconst DEFAULT_POPOVER_TRANSITION_DURATION_MS = 200;\n\nexport const Popover = (props: PopoverProps) => {\n    const viewportContext = useViewportContext();\n\n    const [getRootRef, setRootRef] = createSignal<HTMLElement>();\n\n    const getTransitionDurationMs = createMemo(\n        () => access(props.transitionDurationMs) ?? DEFAULT_POPOVER_TRANSITION_DURATION_MS,\n    );\n\n    const { getIsVisible, getTransitionTarget, getHasTransitionFinished } = ElementFader.createFader(\n        () => access(props.isOpen),\n        {\n            getTransitionDurationMs,\n        },\n    );\n\n    const { getAnchorRect, getPlacement, getPosition, getZIndex, setContentRef } = Anchor.createPortalPosition(\n        () => access(props.anchorRef),\n        getIsVisible,\n        {\n            getPlacement: () => access(props.placement) ?? DEFAULT_POPOVER_PLACEMENT,\n            getOffset: props.offset === undefined ? undefined : () => access(props.offset)!,\n            getReservedScreenSize:\n                props.reservedScreenSize === undefined ? undefined : () => access(props.reservedScreenSize)!,\n            getAnchorRect: props.anchorRect === undefined ? undefined : () => access(props.anchorRect),\n        },\n    );\n\n    const getMinWidth = createMemo(() =>\n        access(props.hasAnchorMinWidth) ? `${getAnchorRect()?.width ?? 0}px` : undefined,\n    );\n\n    const getAnchorColor = createMemo(() => {\n        const anchor = access(props.anchorRef);\n\n        return anchor && getIsVisible() ? getComputedStyle(anchor).color : undefined;\n    });\n\n    const getHasFocus = createMemo(\n        () => (access(props.hasAutoFocus) ?? false) && access(props.isOpen) && getPosition() !== undefined,\n    );\n\n    FocusManager.autoFocus(getRootRef, getHasFocus, { getInitialRef: getRootRef });\n\n    DismisserStack.createLayer(() => access(props.isOpen), {\n        getRoots: () => [getRootRef(), props.anchorRect === undefined ? access(props.anchorRef) : undefined],\n        onDismiss: (reason) => props.onDismiss?.(reason),\n    });\n\n    createEffect(() => {\n        props.onTransitionStatusChange?.(getHasTransitionFinished());\n    });\n\n    return (\n        <Show when={getIsVisible()}>\n            <Portal mount={viewportContext.getPortalRef()}>\n                <div\n                    ref={(element) => {\n                        setContentRef(element);\n                        setRootRef(element);\n                    }}\n                    id={access(props.id)}\n                    class={styles.popoverRoot}\n                    style={{\n                        \"visibility\": getPosition() ? \"visible\" : \"hidden\",\n                        \"transform\": `translate(${getPosition()?.x ?? 0}px, ${getPosition()?.y ?? 0}px)`,\n                        \"min-width\": getMinWidth(),\n                        \"color\": getAnchorColor(),\n                        \"z-index\": getZIndex(),\n                    }}\n                    tabIndex={-1}\n                    inert={!access(props.isOpen)}\n                    role={access(props.role)}\n                    {...access(props.ariaAttributes)}\n                    onKeyDown={(e) => props.onKeyDown?.(e)}\n                    onBlur={(e) => props.onBlur?.(e)}\n                    onMouseDown={(e) => {\n                        if (access(props.role) === \"dialog\") return;\n\n                        e.preventDefault();\n                    }}\n                >\n                    {props.renderContent(getTransitionTarget, getTransitionDurationMs, getPlacement)}\n                </div>\n            </Portal>\n        </Show>\n    );\n};\n"],"mappings":"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"}

package/dist/Fundamentals/Preview/Preview.css.js

@@ -0,0 +1,14 @@
+/* empty css                           */
+//#region src/Fundamentals/Preview/Preview.css.ts
+var previewSizingVariants = {
+	"fit-content": "oe1xjq0",
+	fill: "oe1xjq1"
+};
+var previewRoot = "oe1xjq2";
+var previewContent = "oe1xjq3";
+var previewOverlay = "oe1xjq4";
+var previewTrigger = "oe1xjq5";
+//#endregion
+export { previewContent, previewOverlay, previewRoot, previewSizingVariants, previewTrigger };
+
+//# sourceMappingURL=Preview.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Preview.css.js","names":[],"sources":["../../../src/Fundamentals/Preview/Preview.css.ts"],"sourcesContent":["import { style, styleVariants } from \"@vanilla-extract/css\";\n\nexport const previewSizingVariants = styleVariants({\n    \"fit-content\": {\n        width: \"fit-content\",\n    },\n    \"fill\": {\n        width: \"100%\",\n    },\n});\n\nexport const previewRoot = style({\n    display: \"flex\",\n    flexDirection: \"column\",\n});\n\nexport const previewContent = style({\n    position: \"relative\",\n    overflow: \"hidden\",\n});\n\nexport const previewOverlay = style({\n    position: \"absolute\",\n    right: 0,\n    bottom: 0,\n    left: 0,\n    pointerEvents: \"none\",\n});\n\nexport const previewTrigger = style({\n    display: \"flex\",\n    pointerEvents: \"all\",\n    border: \"none\",\n    padding: 0,\n    background: \"none\",\n    font: \"inherit\",\n    color: \"inherit\",\n    textAlign: \"inherit\",\n});\n"],"mappings":""}

package/dist/Fundamentals/Preview/Preview.js

@@ -0,0 +1,141 @@
+import { ElementObserver } from "../../Abstracts/ElementObserver/ElementObserver.js";
+import { access, accessSignal } from "../../Utils/propUtils.js";
+import { ElementFader } from "../../Abstracts/ElementFader/ElementFader.js";
+import { InteractionWrapper } from "../InteractionWrapper/InteractionWrapper.js";
+import { previewContent, previewOverlay, previewRoot, previewSizingVariants, previewTrigger } from "./Preview.css.js";
+import { Show, createEffect, createMemo, createSignal, createUniqueId, on, onCleanup } from "solid-js";
+import { className, createComponent, delegateEvents, effect, insert, memo, mergeProps, setAttribute, setStyleProperty, template, use } from "solid-js/web";
+//#region src/Fundamentals/Preview/Preview.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<button type=button>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<div><div style=transition-property:height><div>`);
+var DEFAULT_PREVIEW_TRANSITION_DURATION_MS = 200;
+var DEFAULT_PREVIEW_SIZING = "fill";
+var PreviewTrigger = (props) => {
+	const getIsDisabled = () => access(props.flags).isDisabled ?? false;
+	return (() => {
+		var _el$ = _tmpl$();
+		_el$.$$click = () => {
+			if (getIsDisabled()) return;
+			props.onToggle();
+		};
+		use((element) => props.ref?.(element), _el$);
+		className(_el$, previewTrigger);
+		insert(_el$, () => props.renderTrigger(() => access(props.flags)));
+		effect((_p$) => {
+			var _v$ = access(props.id), _v$2 = access(props.isExpanded), _v$3 = access(props.contentId), _v$4 = getIsDisabled() || void 0;
+			_v$ !== _p$.e && setAttribute(_el$, "id", _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$, "aria-expanded", _p$.t = _v$2);
+			_v$3 !== _p$.a && setAttribute(_el$, "aria-controls", _p$.a = _v$3);
+			_v$4 !== _p$.o && setAttribute(_el$, "aria-disabled", _p$.o = _v$4);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0
+		});
+		return _el$;
+	})();
+};
+var Preview = (props) => {
+	const expandedSignal = accessSignal(() => props.expandedSignal);
+	const contentId = createUniqueId();
+	const [getRootRef, setRootRef] = createSignal();
+	const [getTriggerRef, setTriggerRef] = createSignal();
+	const [getContentRef, setContentRef] = createSignal();
+	const [getIsAwaitingScroll, setIsAwaitingScroll] = createSignal(false);
+	const getIsExpanded = () => expandedSignal[0]();
+	const getTransitionDurationMs = createMemo(() => access(props.transitionDurationMs) ?? DEFAULT_PREVIEW_TRANSITION_DURATION_MS);
+	const getSizing = createMemo(() => access(props.sizing) ?? DEFAULT_PREVIEW_SIZING);
+	const getContentHeight = ElementObserver.createBorderBoxHeightObserver(getContentRef);
+	const getHasMeasured = createMemo(() => getContentHeight() > 0);
+	const getIsOverflowing = createMemo(() => getHasMeasured() && getContentHeight() > access(props.collapsedHeight));
+	const { getTransitionTarget, getHasTransitionFinished } = ElementFader.createFader(getIsExpanded, { getTransitionDurationMs });
+	createEffect(on(getIsExpanded, (isExpanded) => setIsAwaitingScroll(!isExpanded), { defer: true }));
+	createEffect(() => {
+		if (!getIsAwaitingScroll() || !getHasTransitionFinished()) return;
+		setIsAwaitingScroll(false);
+		const root = getRootRef();
+		const trigger = getTriggerRef();
+		if (access(props.isScrolledIntoViewOnCollapse) !== true || !root || !trigger) return;
+		const scrollIntoView = () => {
+			root.scrollIntoView({ block: "nearest" });
+			trigger.scrollIntoView({ block: "nearest" });
+		};
+		scrollIntoView();
+		const frameId = requestAnimationFrame(scrollIntoView);
+		onCleanup(() => {
+			cancelAnimationFrame(frameId);
+		});
+	});
+	const getHeight = createMemo(() => {
+		if (!getHasMeasured()) return access(props.collapsedHeight);
+		return getTransitionTarget() === 1 || !getIsOverflowing() ? getContentHeight() : access(props.collapsedHeight);
+	});
+	const getOverlayTarget = createMemo(() => getTransitionTarget() === 1 ? 0 : 1);
+	return (() => {
+		var _el$2 = _tmpl$3(), _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild;
+		use(setRootRef, _el$2);
+		setAttribute(_el$3, "id", contentId);
+		className(_el$3, previewContent);
+		use(setContentRef, _el$4);
+		insert(_el$4, () => props.renderContent());
+		insert(_el$3, createComponent(Show, {
+			get when() {
+				return memo(() => !!props.renderOverlay)() && getIsOverflowing();
+			},
+			get children() {
+				var _el$5 = _tmpl$2();
+				className(_el$5, previewOverlay);
+				insert(_el$5, () => props.renderOverlay?.(getOverlayTarget, getTransitionDurationMs));
+				return _el$5;
+			}
+		}), null);
+		insert(_el$2, createComponent(Show, {
+			get when() {
+				return getIsOverflowing();
+			},
+			get children() {
+				return createComponent(InteractionWrapper, mergeProps(props, {
+					sizing: "fit-content",
+					extraFlags: () => ({ isExpanded: getIsExpanded() }),
+					renderControl: (setElementRef, getFlags) => createComponent(PreviewTrigger, {
+						ref: (element) => {
+							setElementRef(element);
+							setTriggerRef(element);
+							props.ref?.(element);
+						},
+						get id() {
+							return props.id;
+						},
+						contentId: () => contentId,
+						flags: getFlags,
+						isExpanded: getIsExpanded,
+						get renderTrigger() {
+							return props.renderTrigger;
+						},
+						onToggle: () => expandedSignal[1]((prev) => !prev)
+					})
+				}));
+			}
+		}), null);
+		effect((_p$) => {
+			var _v$5 = [previewRoot, previewSizingVariants[getSizing()]].join(" "), _v$6 = `${getHeight()}px`, _v$7 = `${getTransitionDurationMs()}ms`;
+			_v$5 !== _p$.e && className(_el$2, _p$.e = _v$5);
+			_v$6 !== _p$.t && setStyleProperty(_el$3, "height", _p$.t = _v$6);
+			_v$7 !== _p$.a && setStyleProperty(_el$3, "transition-duration", _p$.a = _v$7);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0
+		});
+		return _el$2;
+	})();
+};
+delegateEvents(["click"]);
+//#endregion
+export { Preview };
+
+//# sourceMappingURL=Preview.js.map

package/dist/Fundamentals/Preview/Preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Preview.js","names":["Show","createEffect","createMemo","createSignal","createUniqueId","on","onCleanup","ElementFader","ElementObserver","access","accessSignal","InteractionWrapper","PreviewFlags","PreviewProps","PreviewSizing","PreviewTriggerProps","styles","DEFAULT_PREVIEW_TRANSITION_DURATION_MS","DEFAULT_PREVIEW_SIZING","PreviewTrigger","props","getIsDisabled","flags","isDisabled","_el$","_tmpl$","$$click","onToggle","_$use","element","ref","_$className","previewTrigger","_$insert","renderTrigger","_$effect","_p$","_v$","id","_v$2","isExpanded","_v$3","contentId","_v$4","undefined","e","_$setAttribute","t","a","o","Preview","expandedSignal","getRootRef","setRootRef","HTMLElement","getTriggerRef","setTriggerRef","getContentRef","setContentRef","getIsAwaitingScroll","setIsAwaitingScroll","getIsExpanded","getTransitionDurationMs","transitionDurationMs","getSizing","sizing","getContentHeight","createBorderBoxHeightObserver","getHasMeasured","getIsOverflowing","collapsedHeight","getTransitionTarget","getHasTransitionFinished","createFader","defer","root","trigger","isScrolledIntoViewOnCollapse","scrollIntoView","block","frameId","requestAnimationFrame","cancelAnimationFrame","getHeight","getOverlayTarget","_el$2","_tmpl$3","_el$3","firstChild","_el$4","previewContent","renderContent","_$createComponent","when","_$memo","renderOverlay","children","_el$5","_tmpl$2","previewOverlay","_$mergeProps","extraFlags","renderControl","setElementRef","getFlags","prev","_v$5","previewRoot","previewSizingVariants","join","_v$6","_v$7","_$setStyleProperty","_$delegateEvents"],"sources":["../../../src/Fundamentals/Preview/Preview.tsx"],"sourcesContent":["import { Show, createEffect, createMemo, createSignal, createUniqueId, on, onCleanup } from \"solid-js\";\r\n\r\nimport { ElementFader } from \"../../Abstracts/ElementFader/ElementFader\";\r\nimport { ElementObserver } from \"../../Abstracts/ElementObserver/ElementObserver\";\r\nimport { access, accessSignal } from \"../../Utils/propUtils\";\r\nimport { InteractionWrapper } from \"../InteractionWrapper/InteractionWrapper\";\r\nimport type { PreviewFlags, PreviewProps, PreviewSizing, PreviewTriggerProps } from \"./Preview.types\";\r\n\r\nimport * as styles from \"./Preview.css\";\r\n\r\nconst DEFAULT_PREVIEW_TRANSITION_DURATION_MS = 200;\r\nconst DEFAULT_PREVIEW_SIZING: PreviewSizing = \"fill\";\r\n\r\nconst PreviewTrigger = (props: PreviewTriggerProps) => {\r\n    const getIsDisabled = () => access(props.flags).isDisabled ?? false;\r\n\r\n    return (\r\n        <button\r\n            id={access(props.id)}\r\n            ref={(element) => props.ref?.(element)}\r\n            type=\"button\"\r\n            class={styles.previewTrigger}\r\n            aria-expanded={access(props.isExpanded)}\r\n            aria-controls={access(props.contentId)}\r\n            aria-disabled={getIsDisabled() || undefined}\r\n            onClick={() => {\r\n                if (getIsDisabled()) return;\r\n\r\n                props.onToggle();\r\n            }}\r\n        >\r\n            {props.renderTrigger(() => access(props.flags))}\r\n        </button>\r\n    );\r\n};\r\n\r\nexport const Preview = (props: PreviewProps) => {\r\n    const expandedSignal = accessSignal(() => props.expandedSignal);\r\n\r\n    const contentId = createUniqueId();\r\n\r\n    const [getRootRef, setRootRef] = createSignal<HTMLElement>();\r\n    const [getTriggerRef, setTriggerRef] = createSignal<HTMLElement>();\r\n    const [getContentRef, setContentRef] = createSignal<HTMLElement>();\r\n    const [getIsAwaitingScroll, setIsAwaitingScroll] = createSignal(false);\r\n\r\n    const getIsExpanded = () => expandedSignal[0]();\r\n\r\n    const getTransitionDurationMs = createMemo(\r\n        () => access(props.transitionDurationMs) ?? DEFAULT_PREVIEW_TRANSITION_DURATION_MS,\r\n    );\r\n\r\n    const getSizing = createMemo(() => access(props.sizing) ?? DEFAULT_PREVIEW_SIZING);\r\n\r\n    const getContentHeight = ElementObserver.createBorderBoxHeightObserver(getContentRef);\r\n\r\n    const getHasMeasured = createMemo(() => getContentHeight() > 0);\r\n\r\n    const getIsOverflowing = createMemo(() => getHasMeasured() && getContentHeight() > access(props.collapsedHeight));\r\n\r\n    const { getTransitionTarget, getHasTransitionFinished } = ElementFader.createFader(getIsExpanded, {\r\n        getTransitionDurationMs,\r\n    });\r\n\r\n    createEffect(on(getIsExpanded, (isExpanded) => setIsAwaitingScroll(!isExpanded), { defer: true }));\r\n\r\n    createEffect(() => {\r\n        if (!getIsAwaitingScroll() || !getHasTransitionFinished()) return;\r\n\r\n        setIsAwaitingScroll(false);\r\n\r\n        const root = getRootRef();\r\n        const trigger = getTriggerRef();\r\n\r\n        if (access(props.isScrolledIntoViewOnCollapse) !== true || !root || !trigger) return;\r\n\r\n        const scrollIntoView = () => {\r\n            root.scrollIntoView({ block: \"nearest\" });\r\n            trigger.scrollIntoView({ block: \"nearest\" });\r\n        };\r\n\r\n        scrollIntoView();\r\n\r\n        const frameId = requestAnimationFrame(scrollIntoView);\r\n\r\n        onCleanup(() => {\r\n            cancelAnimationFrame(frameId);\r\n        });\r\n    });\r\n\r\n    const getHeight = createMemo(() => {\r\n        if (!getHasMeasured()) return access(props.collapsedHeight);\r\n\r\n        return getTransitionTarget() === 1 || !getIsOverflowing() ? getContentHeight() : access(props.collapsedHeight);\r\n    });\r\n\r\n    const getOverlayTarget = createMemo((): 0 | 1 => (getTransitionTarget() === 1 ? 0 : 1));\r\n\r\n    return (\r\n        <div ref={setRootRef} class={[styles.previewRoot, styles.previewSizingVariants[getSizing()]].join(\" \")}>\r\n            <div\r\n                id={contentId}\r\n                class={styles.previewContent}\r\n                style={{\r\n                    \"height\": `${getHeight()}px`,\r\n                    \"transition-property\": \"height\",\r\n                    \"transition-duration\": `${getTransitionDurationMs()}ms`,\r\n                }}\r\n            >\r\n                <div ref={setContentRef}>{props.renderContent()}</div>\r\n\r\n                <Show when={props.renderOverlay && getIsOverflowing()}>\r\n                    <div class={styles.previewOverlay}>\r\n                        {props.renderOverlay?.(getOverlayTarget, getTransitionDurationMs)}\r\n                    </div>\r\n                </Show>\r\n            </div>\r\n\r\n            <Show when={getIsOverflowing()}>\r\n                <InteractionWrapper\r\n                    {...props}\r\n                    sizing={\"fit-content\"}\r\n                    extraFlags={(): PreviewFlags => ({ isExpanded: getIsExpanded() })}\r\n                    renderControl={(setElementRef, getFlags) => (\r\n                        <PreviewTrigger\r\n                            ref={(element) => {\r\n                                setElementRef(element);\r\n                                setTriggerRef(element);\r\n                                props.ref?.(element);\r\n                            }}\r\n                            id={props.id}\r\n                            contentId={() => contentId}\r\n                            flags={getFlags}\r\n                            isExpanded={getIsExpanded}\r\n                            renderTrigger={props.renderTrigger}\r\n                            onToggle={() => expandedSignal[1]((prev) => !prev)}\r\n                        />\r\n                    )}\r\n                />\r\n            </Show>\r\n        </div>\r\n    );\r\n};\r\n"],"mappings":"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"}

package/dist/Fundamentals/Progress/Progress.css.js

@@ -0,0 +1,11 @@
+/* empty css                            */
+//#region src/Fundamentals/Progress/Progress.css.ts
+var progressSizingVariants = {
+	"fit-content": "ruoepn0",
+	fill: "ruoepn1"
+};
+var progressRoot = "ruoepn2";
+//#endregion
+export { progressRoot, progressSizingVariants };
+
+//# sourceMappingURL=Progress.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.css.js","names":[],"sources":["../../../src/Fundamentals/Progress/Progress.css.ts"],"sourcesContent":["import { style, styleVariants } from \"@vanilla-extract/css\";\n\nexport const progressSizingVariants = styleVariants({\n    \"fit-content\": {\n        width: \"fit-content\",\n    },\n    \"fill\": {\n        width: \"100%\",\n    },\n});\n\nexport const progressRoot = style({\n    display: \"flex\",\n});\n"],"mappings":""}

package/dist/Fundamentals/Progress/Progress.js

@@ -0,0 +1,62 @@
+import { access } from "../../Utils/propUtils.js";
+import { progressRoot, progressSizingVariants } from "./Progress.css.js";
+import { createMemo } from "solid-js";
+import { MathUtils } from "@thewaver/ss-utils";
+import { className, effect, insert, setAttribute, template } from "solid-js/web";
+//#region src/Fundamentals/Progress/Progress.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div role=progressbar>`);
+var DEFAULT_PROGRESS_SIZING = "fill";
+var DEFAULT_PROGRESS_MIN = 0;
+var DEFAULT_PROGRESS_MAX = 1;
+var COMPLETE_RATIO = 1;
+var Progress = (props) => {
+	const getSizing = createMemo(() => access(props.sizing) ?? DEFAULT_PROGRESS_SIZING);
+	const getMin = createMemo(() => access(props.min) ?? DEFAULT_PROGRESS_MIN);
+	const getMax = createMemo(() => access(props.max) ?? DEFAULT_PROGRESS_MAX);
+	const getState = createMemo(() => {
+		const min = getMin();
+		const max = getMax();
+		const span = max - min;
+		const value = access(props.value);
+		return {
+			value,
+			min,
+			max,
+			ratio: value === void 0 ? void 0 : span > 0 ? MathUtils.clamp(MathUtils.normalize(value, min, max), 0, COMPLETE_RATIO) : COMPLETE_RATIO,
+			hasError: access(props.hasError) ?? false
+		};
+	});
+	if (getMax() <= getMin()) console.warn("Progress: getMax is not greater than getMin, so the range is empty and every value reads as complete. aria-valuemax must exceed aria-valuemin.");
+	return (() => {
+		var _el$ = _tmpl$();
+		insert(_el$, () => props.renderContent(getState));
+		effect((_p$) => {
+			var _v$ = access(props.id), _v$2 = [progressRoot, progressSizingVariants[getSizing()]].join(" "), _v$3 = access(props.ariaLabel), _v$4 = access(props.ariaLabelledBy), _v$5 = getMin(), _v$6 = getMax(), _v$7 = getState().value, _v$8 = access(props.ariaValueText), _v$9 = getState().hasError || void 0;
+			_v$ !== _p$.e && setAttribute(_el$, "id", _p$.e = _v$);
+			_v$2 !== _p$.t && className(_el$, _p$.t = _v$2);
+			_v$3 !== _p$.a && setAttribute(_el$, "aria-label", _p$.a = _v$3);
+			_v$4 !== _p$.o && setAttribute(_el$, "aria-labelledby", _p$.o = _v$4);
+			_v$5 !== _p$.i && setAttribute(_el$, "aria-valuemin", _p$.i = _v$5);
+			_v$6 !== _p$.n && setAttribute(_el$, "aria-valuemax", _p$.n = _v$6);
+			_v$7 !== _p$.s && setAttribute(_el$, "aria-valuenow", _p$.s = _v$7);
+			_v$8 !== _p$.h && setAttribute(_el$, "aria-valuetext", _p$.h = _v$8);
+			_v$9 !== _p$.r && setAttribute(_el$, "aria-invalid", _p$.r = _v$9);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0,
+			n: void 0,
+			s: void 0,
+			h: void 0,
+			r: void 0
+		});
+		return _el$;
+	})();
+};
+//#endregion
+export { Progress };
+
+//# sourceMappingURL=Progress.js.map

package/dist/Fundamentals/Progress/Progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.js","names":["createMemo","MathUtils","access","ProgressProps","ProgressSizing","ProgressState","styles","DEFAULT_PROGRESS_SIZING","DEFAULT_PROGRESS_MIN","DEFAULT_PROGRESS_MAX","COMPLETE_RATIO","Progress","props","getSizing","sizing","getMin","min","getMax","max","getState","span","value","ratio","undefined","clamp","normalize","hasError","console","warn","_el$","_tmpl$","_$insert","renderContent","_$effect","_p$","_v$","id","_v$2","progressRoot","progressSizingVariants","join","_v$3","ariaLabel","_v$4","ariaLabelledBy","_v$5","_v$6","_v$7","_v$8","ariaValueText","_v$9","e","_$setAttribute","t","_$className","a","o","i","n","s","h","r"],"sources":["../../../src/Fundamentals/Progress/Progress.tsx"],"sourcesContent":["import { createMemo } from \"solid-js\";\n\nimport { MathUtils } from \"@thewaver/ss-utils\";\n\nimport { access } from \"../../Utils/propUtils\";\nimport type { ProgressProps, ProgressSizing, ProgressState } from \"./Progress.types\";\n\nimport * as styles from \"./Progress.css\";\n\nconst DEFAULT_PROGRESS_SIZING: ProgressSizing = \"fill\";\nconst DEFAULT_PROGRESS_MIN = 0;\nconst DEFAULT_PROGRESS_MAX = 1;\nconst COMPLETE_RATIO = 1;\n\nexport const Progress = (props: ProgressProps) => {\n    const getSizing = createMemo(() => access(props.sizing) ?? DEFAULT_PROGRESS_SIZING);\n\n    const getMin = createMemo(() => access(props.min) ?? DEFAULT_PROGRESS_MIN);\n\n    const getMax = createMemo(() => access(props.max) ?? DEFAULT_PROGRESS_MAX);\n\n    const getState = createMemo((): ProgressState => {\n        const min = getMin();\n        const max = getMax();\n        const span = max - min;\n        const value = access(props.value);\n\n        return {\n            value,\n            min,\n            max,\n            ratio:\n                value === undefined\n                    ? undefined\n                    : span > 0\n                      ? MathUtils.clamp(MathUtils.normalize(value, min, max), 0, COMPLETE_RATIO)\n                      : COMPLETE_RATIO,\n            hasError: access(props.hasError) ?? false,\n        };\n    });\n\n    if (getMax() <= getMin()) {\n        console.warn(\n            \"Progress: getMax is not greater than getMin, so the range is empty and every value reads as complete. aria-valuemax must exceed aria-valuemin.\",\n        );\n    }\n\n    return (\n        <div\n            id={access(props.id)}\n            class={[styles.progressRoot, styles.progressSizingVariants[getSizing()]].join(\" \")}\n            role=\"progressbar\"\n            aria-label={access(props.ariaLabel)}\n            aria-labelledby={access(props.ariaLabelledBy)}\n            aria-valuemin={getMin()}\n            aria-valuemax={getMax()}\n            aria-valuenow={getState().value}\n            aria-valuetext={access(props.ariaValueText)}\n            aria-invalid={getState().hasError || undefined}\n        >\n            {props.renderContent(getState)}\n        </div>\n    );\n};\n"],"mappings":";;;;;;;AASA,IAAMO,0BAA0C;AAChD,IAAMC,uBAAuB;AAC7B,IAAMC,uBAAuB;AAC7B,IAAMC,iBAAiB;AAEvB,IAAaC,YAAYC,UAAyB;CAC9C,MAAMC,YAAYb,iBAAiBE,OAAOU,MAAME,MAAM,KAAKP,uBAAuB;CAElF,MAAMQ,SAASf,iBAAiBE,OAAOU,MAAMI,GAAG,KAAKR,oBAAoB;CAEzE,MAAMS,SAASjB,iBAAiBE,OAAOU,MAAMM,GAAG,KAAKT,oBAAoB;CAEzE,MAAMU,WAAWnB,iBAAgC;EAC7C,MAAMgB,MAAMD,OAAO;EACnB,MAAMG,MAAMD,OAAO;EACnB,MAAMG,OAAOF,MAAMF;EACnB,MAAMK,QAAQnB,OAAOU,MAAMS,KAAK;EAEhC,OAAO;GACHA;GACAL;GACAE;GACAI,OACID,UAAUE,KAAAA,IACJA,KAAAA,IACAH,OAAO,IACLnB,UAAUuB,MAAMvB,UAAUwB,UAAUJ,OAAOL,KAAKE,GAAG,GAAG,GAAGR,cAAc,IACvEA;GACZgB,UAAUxB,OAAOU,MAAMc,QAAQ,KAAK;EACxC;CACJ,CAAC;CAED,IAAIT,OAAO,KAAKF,OAAO,GACnBY,QAAQC,KACJ,gJACJ;CAGJ,cAAA;EAAA,IAAAC,OAAAC,OAAA;EAAAC,OAAAF,YAaSjB,MAAMoB,cAAcb,QAAQ,CAAC;EAAAc,QAAAC,QAAA;GAAA,IAAAC,MAX1BjC,OAAOU,MAAMwB,EAAE,GAACC,OACb,CAAC/B,cAAqBA,uBAA8BO,UAAU,EAAE,CAAC,CAAC2B,KAAK,GAAG,GAACC,OAEtEvC,OAAOU,MAAM8B,SAAS,GAACC,OAClBzC,OAAOU,MAAMgC,cAAc,GAACC,OAC9B9B,OAAO,GAAC+B,OACR7B,OAAO,GAAC8B,OACR5B,SAAS,CAAC,CAACE,OAAK2B,OACf9C,OAAOU,MAAMqC,aAAa,GAACC,OAC7B/B,SAAS,CAAC,CAACO,YAAYH,KAAAA;GAASY,QAAAD,IAAAiB,KAAAC,aAAAvB,MAAA,MAAAK,IAAAiB,IAAAhB,GAAA;GAAAE,SAAAH,IAAAmB,KAAAC,UAAAzB,MAAAK,IAAAmB,IAAAhB,IAAA;GAAAI,SAAAP,IAAAqB,KAAAH,aAAAvB,MAAA,cAAAK,IAAAqB,IAAAd,IAAA;GAAAE,SAAAT,IAAAsB,KAAAJ,aAAAvB,MAAA,mBAAAK,IAAAsB,IAAAb,IAAA;GAAAE,SAAAX,IAAAuB,KAAAL,aAAAvB,MAAA,iBAAAK,IAAAuB,IAAAZ,IAAA;GAAAC,SAAAZ,IAAAwB,KAAAN,aAAAvB,MAAA,iBAAAK,IAAAwB,IAAAZ,IAAA;GAAAC,SAAAb,IAAAyB,KAAAP,aAAAvB,MAAA,iBAAAK,IAAAyB,IAAAZ,IAAA;GAAAC,SAAAd,IAAA0B,KAAAR,aAAAvB,MAAA,kBAAAK,IAAA0B,IAAAZ,IAAA;GAAAE,SAAAhB,IAAA2B,KAAAT,aAAAvB,MAAA,gBAAAK,IAAA2B,IAAAX,IAAA;GAAA,OAAAhB;EAAA,GAAA;GAAAiB,GAAA5B,KAAAA;GAAA8B,GAAA9B,KAAAA;GAAAgC,GAAAhC,KAAAA;GAAAiC,GAAAjC,KAAAA;GAAAkC,GAAAlC,KAAAA;GAAAmC,GAAAnC,KAAAA;GAAAoC,GAAApC,KAAAA;GAAAqC,GAAArC,KAAAA;GAAAsC,GAAAtC,KAAAA;EAAA,CAAA;EAAA,OAAAM;CAAA,EAAA,CAAA;AAK1D"}

package/dist/Fundamentals/Scroller/Scroller.css.js

@@ -0,0 +1,9 @@
+/* empty css                            */
+//#region src/Fundamentals/Scroller/Scroller.css.ts
+var scrollerRoot = "_1y21pqa0";
+var scrollerTrack = "_1y21pqa1";
+var scrollerTrackEnd = "_1y21pqa2";
+//#endregion
+export { scrollerRoot, scrollerTrack, scrollerTrackEnd };
+
+//# sourceMappingURL=Scroller.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Scroller.css.js","names":[],"sources":["../../../src/Fundamentals/Scroller/Scroller.css.ts"],"sourcesContent":["import { globalStyle, style } from \"@vanilla-extract/css\";\n\nexport const scrollerRoot = style({\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n    minWidth: 0,\n    maxWidth: \"100%\",\n});\n\nexport const scrollerTrack = style({\n    \"position\": \"relative\",\n    \"display\": \"flex\",\n    \"flexGrow\": 1,\n    \"minWidth\": 0,\n    \"overflowX\": \"auto\",\n    \"overflowY\": \"hidden\",\n    \"scrollbarWidth\": \"none\",\n    \"scrollBehavior\": \"smooth\",\n\n    \"@media\": {\n        \"(prefers-reduced-motion: reduce)\": {\n            scrollBehavior: \"auto\",\n        },\n    },\n});\n\nglobalStyle(`${scrollerTrack}::-webkit-scrollbar`, {\n    display: \"none\",\n});\n\nexport const scrollerTrackEnd = style({\n    flexGrow: 0,\n    flexShrink: 0,\n});\n"],"mappings":""}

package/dist/Fundamentals/Scroller/Scroller.js

@@ -0,0 +1,161 @@
+import { access } from "../../Utils/propUtils.js";
+import { SignalMirror } from "../../Abstracts/SignalMirror/SignalMirror.js";
+import { scrollerRoot, scrollerTrack, scrollerTrackEnd } from "./Scroller.css.js";
+import { Index, createEffect, createMemo, createSignal, onCleanup } from "solid-js";
+import { className, createComponent, delegateEvents, effect, insert, setStyleProperty, template, use } from "solid-js/web";
+//#region src/Fundamentals/Scroller/Scroller.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div><div><div>`);
+var DEFAULT_SCROLLER_GAP = 0;
+var DEFAULT_SCROLLER_PADDING = 0;
+var DEFAULT_SCROLLER_BUTTON_PLACEMENT = "split";
+var SCROLL_EPSILON = 1;
+var RATIO_MIN = 0;
+var readMetrics = (track) => ({
+	start: track.scrollLeft,
+	visible: track.clientWidth,
+	total: track.scrollWidth
+});
+var computeScrollRange = (metrics) => Math.max(metrics.total - metrics.visible, 0);
+var computeProgressRatio = (metrics) => {
+	const range = computeScrollRange(metrics);
+	return range === 0 ? RATIO_MIN : Math.min(Math.max(metrics.start / range, RATIO_MIN), 1);
+};
+var computeOffsetWithin = (element, ancestor) => {
+	let offset = 0;
+	let node = element;
+	while (node && node !== ancestor) {
+		offset += node.offsetLeft;
+		node = node.offsetParent;
+	}
+	return offset;
+};
+var computeRevealTarget = (track, offset, length, padding) => {
+	const { start, visible } = readMetrics(track);
+	if (offset - padding < start) return offset - padding;
+	return offset + length + padding > start + visible ? offset + length + padding - visible : start;
+};
+var computeStepTarget = (track, step) => {
+	const { start, visible } = readMetrics(track);
+	const offsets = [...track.children].map((child) => child.offsetLeft);
+	if (step === "next") {
+		const limit = start + visible;
+		return offsets.filter((offset) => offset > start + SCROLL_EPSILON && offset <= limit).pop() ?? limit;
+	}
+	const limit = start - visible;
+	return offsets.filter((offset) => offset < start - SCROLL_EPSILON && offset >= limit).shift() ?? limit;
+};
+var Scroller = (props) => {
+	const [getTrackRef, setTrackRef] = createSignal();
+	const [getMetrics, setMetrics] = createSignal({
+		start: 0,
+		visible: 0,
+		total: 0
+	});
+	const getGap = createMemo(() => access(props.gap) ?? DEFAULT_SCROLLER_GAP);
+	const getPadding = createMemo(() => access(props.padding) ?? DEFAULT_SCROLLER_PADDING);
+	const getButtonPlacement = createMemo(() => access(props.buttonPlacement) ?? DEFAULT_SCROLLER_BUTTON_PLACEMENT);
+	const stepper = {
+		getIsAtStart: () => getMetrics().start <= SCROLL_EPSILON,
+		getIsAtEnd: () => getMetrics().start + getMetrics().visible >= getMetrics().total - SCROLL_EPSILON,
+		stepToPrevious: () => {
+			const track = getTrackRef();
+			if (track) track.scrollTo({ left: computeStepTarget(track, "previous") });
+		},
+		stepToNext: () => {
+			const track = getTrackRef();
+			if (track) track.scrollTo({ left: computeStepTarget(track, "next") });
+		}
+	};
+	const getIsScrollable = createMemo(() => getMetrics().total > getMetrics().visible + SCROLL_EPSILON);
+	const [getProgressRatio, setProgressRatio] = SignalMirror.createOptional(() => props.progressSignal, RATIO_MIN);
+	let reportedRatio = RATIO_MIN;
+	createEffect(() => {
+		reportedRatio = computeProgressRatio(getMetrics());
+		setProgressRatio(reportedRatio);
+	});
+	createEffect(() => {
+		const ratio = getProgressRatio();
+		const track = getTrackRef();
+		if (!track || ratio === reportedRatio) return;
+		track.scrollTo({ left: ratio * computeScrollRange(readMetrics(track)) });
+	});
+	const getLeadingSteps = createMemo(() => {
+		const placement = getButtonPlacement();
+		if (!getIsScrollable()) return [];
+		if (placement === "start") return ["previous", "next"];
+		return placement === "split" ? ["previous"] : [];
+	});
+	const getTrailingSteps = createMemo(() => {
+		const placement = getButtonPlacement();
+		if (!getIsScrollable()) return [];
+		if (placement === "end") return ["previous", "next"];
+		return placement === "split" ? ["next"] : [];
+	});
+	createEffect(() => {
+		const track = getTrackRef();
+		if (!track) return;
+		const update = () => setMetrics(readMetrics(track));
+		const sizeObserver = new ResizeObserver(update);
+		const childObserver = new MutationObserver(() => {
+			for (const child of track.children) sizeObserver.observe(child);
+			update();
+		});
+		sizeObserver.observe(track);
+		for (const child of track.children) sizeObserver.observe(child);
+		childObserver.observe(track, { childList: true });
+		track.addEventListener("scroll", update, { passive: true });
+		onCleanup(() => {
+			sizeObserver.disconnect();
+			childObserver.disconnect();
+			track.removeEventListener("scroll", update);
+		});
+		update();
+	});
+	const handleFocusIn = (e) => {
+		const track = getTrackRef();
+		const target = e.target;
+		if (!track || !target || target === track) return;
+		const offset = computeOffsetWithin(target, track);
+		track.scrollTo({ left: computeRevealTarget(track, offset, target.offsetWidth, getPadding()) });
+	};
+	return (() => {
+		var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
+		className(_el$, scrollerRoot);
+		insert(_el$, createComponent(Index, {
+			get each() {
+				return getLeadingSteps();
+			},
+			children: (getStep) => props.renderButton(getStep, stepper)
+		}), _el$2);
+		_el$2.$$focusin = handleFocusIn;
+		use(setTrackRef, _el$2);
+		className(_el$2, scrollerTrack);
+		insert(_el$2, () => props.children, _el$3);
+		className(_el$3, scrollerTrackEnd);
+		insert(_el$, createComponent(Index, {
+			get each() {
+				return getTrailingSteps();
+			},
+			children: (getStep) => props.renderButton(getStep, stepper)
+		}), null);
+		effect((_p$) => {
+			var _v$ = `${getGap()}px`, _v$2 = `${getPadding()}px`, _v$3 = `${getPadding()}px`, _v$4 = `${getPadding()}px`;
+			_v$ !== _p$.e && setStyleProperty(_el$, "gap", _p$.e = _v$);
+			_v$2 !== _p$.t && setStyleProperty(_el$2, "padding-block", _p$.t = _v$2);
+			_v$3 !== _p$.a && setStyleProperty(_el$2, "padding-inline-start", _p$.a = _v$3);
+			_v$4 !== _p$.o && setStyleProperty(_el$3, "flex-basis", _p$.o = _v$4);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0
+		});
+		return _el$;
+	})();
+};
+delegateEvents(["focusin"]);
+//#endregion
+export { Scroller };
+
+//# sourceMappingURL=Scroller.js.map

package/dist/Fundamentals/Scroller/Scroller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scroller.js","names":["Index","createEffect","createMemo","createSignal","onCleanup","SignalMirror","access","ScrollerButtonPlacement","ScrollerProps","ScrollerStep","ScrollerStepper","styles","DEFAULT_SCROLLER_GAP","DEFAULT_SCROLLER_PADDING","DEFAULT_SCROLLER_BUTTON_PLACEMENT","SCROLL_EPSILON","RATIO_MIN","readMetrics","track","HTMLElement","start","scrollLeft","visible","clientWidth","total","scrollWidth","computeScrollRange","metrics","Math","max","computeProgressRatio","range","min","computeOffsetWithin","element","ancestor","offset","node","offsetLeft","offsetParent","computeRevealTarget","length","padding","computeStepTarget","step","offsets","children","map","child","limit","filter","pop","shift","Scroller","props","getTrackRef","setTrackRef","getMetrics","setMetrics","getGap","gap","getPadding","getButtonPlacement","buttonPlacement","stepper","getIsAtStart","getIsAtEnd","stepToPrevious","scrollTo","left","stepToNext","getIsScrollable","getProgressRatio","setProgressRatio","createOptional","progressSignal","reportedRatio","ratio","getLeadingSteps","placement","getTrailingSteps","update","sizeObserver","ResizeObserver","childObserver","MutationObserver","observe","childList","addEventListener","passive","disconnect","removeEventListener","handleFocusIn","e","FocusEvent","target","offsetWidth","_el$","_tmpl$","_el$2","firstChild","_el$3","_$className","scrollerRoot","_$insert","_$createComponent","each","getStep","renderButton","$$focusin","_$use","scrollerTrack","scrollerTrackEnd","_$effect","_p$","_v$","_v$2","_v$3","_v$4","_$setStyleProperty","t","a","o","undefined","_$delegateEvents"],"sources":["../../../src/Fundamentals/Scroller/Scroller.tsx"],"sourcesContent":["import { Index, createEffect, createMemo, createSignal, onCleanup } from \"solid-js\";\n\nimport { SignalMirror } from \"../../Abstracts/SignalMirror/SignalMirror\";\nimport { access } from \"../../Utils/propUtils\";\nimport type { ScrollerButtonPlacement, ScrollerProps, ScrollerStep, ScrollerStepper } from \"./Scroller.types\";\n\nimport * as styles from \"./Scroller.css\";\n\nconst DEFAULT_SCROLLER_GAP = 0;\nconst DEFAULT_SCROLLER_PADDING = 0;\nconst DEFAULT_SCROLLER_BUTTON_PLACEMENT: ScrollerButtonPlacement = \"split\";\n\nconst SCROLL_EPSILON = 1;\nconst RATIO_MIN = 0;\n\nconst readMetrics = (track: HTMLElement) => ({\n    start: track.scrollLeft,\n    visible: track.clientWidth,\n    total: track.scrollWidth,\n});\n\nconst computeScrollRange = (metrics: { visible: number; total: number }) =>\n    Math.max(metrics.total - metrics.visible, 0);\n\nconst computeProgressRatio = (metrics: { start: number; visible: number; total: number }) => {\n    const range = computeScrollRange(metrics);\n\n    return range === 0 ? RATIO_MIN : Math.min(Math.max(metrics.start / range, RATIO_MIN), 1);\n};\n\nconst computeOffsetWithin = (element: HTMLElement, ancestor: HTMLElement) => {\n    let offset = 0;\n    let node: HTMLElement | null = element;\n\n    while (node && node !== ancestor) {\n        offset += node.offsetLeft;\n        node = node.offsetParent as HTMLElement | null;\n    }\n\n    return offset;\n};\n\nconst computeRevealTarget = (track: HTMLElement, offset: number, length: number, padding: number) => {\n    const { start, visible } = readMetrics(track);\n\n    if (offset - padding < start) return offset - padding;\n\n    return offset + length + padding > start + visible ? offset + length + padding - visible : start;\n};\n\nconst computeStepTarget = (track: HTMLElement, step: ScrollerStep) => {\n    const { start, visible } = readMetrics(track);\n    const offsets = [...track.children].map((child) => (child as HTMLElement).offsetLeft);\n\n    if (step === \"next\") {\n        const limit = start + visible;\n\n        return offsets.filter((offset) => offset > start + SCROLL_EPSILON && offset <= limit).pop() ?? limit;\n    }\n\n    const limit = start - visible;\n\n    return offsets.filter((offset) => offset < start - SCROLL_EPSILON && offset >= limit).shift() ?? limit;\n};\n\nexport const Scroller = (props: ScrollerProps) => {\n    const [getTrackRef, setTrackRef] = createSignal<HTMLElement>();\n    const [getMetrics, setMetrics] = createSignal({ start: 0, visible: 0, total: 0 });\n\n    const getGap = createMemo(() => access(props.gap) ?? DEFAULT_SCROLLER_GAP);\n\n    const getPadding = createMemo(() => access(props.padding) ?? DEFAULT_SCROLLER_PADDING);\n\n    const getButtonPlacement = createMemo(() => access(props.buttonPlacement) ?? DEFAULT_SCROLLER_BUTTON_PLACEMENT);\n\n    const stepper: ScrollerStepper = {\n        getIsAtStart: () => getMetrics().start <= SCROLL_EPSILON,\n        getIsAtEnd: () => getMetrics().start + getMetrics().visible >= getMetrics().total - SCROLL_EPSILON,\n        stepToPrevious: () => {\n            const track = getTrackRef();\n\n            if (track) track.scrollTo({ left: computeStepTarget(track, \"previous\") });\n        },\n        stepToNext: () => {\n            const track = getTrackRef();\n\n            if (track) track.scrollTo({ left: computeStepTarget(track, \"next\") });\n        },\n    };\n\n    const getIsScrollable = createMemo(() => getMetrics().total > getMetrics().visible + SCROLL_EPSILON);\n\n    const [getProgressRatio, setProgressRatio] = SignalMirror.createOptional(() => props.progressSignal, RATIO_MIN);\n\n    let reportedRatio = RATIO_MIN;\n\n    createEffect(() => {\n        reportedRatio = computeProgressRatio(getMetrics());\n\n        setProgressRatio(reportedRatio);\n    });\n\n    createEffect(() => {\n        const ratio = getProgressRatio();\n        const track = getTrackRef();\n\n        if (!track || ratio === reportedRatio) return;\n\n        track.scrollTo({ left: ratio * computeScrollRange(readMetrics(track)) });\n    });\n\n    const getLeadingSteps = createMemo((): ScrollerStep[] => {\n        const placement = getButtonPlacement();\n\n        if (!getIsScrollable()) return [];\n        if (placement === \"start\") return [\"previous\", \"next\"];\n\n        return placement === \"split\" ? [\"previous\"] : [];\n    });\n\n    const getTrailingSteps = createMemo((): ScrollerStep[] => {\n        const placement = getButtonPlacement();\n\n        if (!getIsScrollable()) return [];\n        if (placement === \"end\") return [\"previous\", \"next\"];\n\n        return placement === \"split\" ? [\"next\"] : [];\n    });\n\n    createEffect(() => {\n        const track = getTrackRef();\n\n        if (!track) return;\n\n        const update = () => setMetrics(readMetrics(track));\n        const sizeObserver = new ResizeObserver(update);\n        const childObserver = new MutationObserver(() => {\n            for (const child of track.children) sizeObserver.observe(child);\n\n            update();\n        });\n\n        sizeObserver.observe(track);\n\n        for (const child of track.children) sizeObserver.observe(child);\n\n        childObserver.observe(track, { childList: true });\n        track.addEventListener(\"scroll\", update, { passive: true });\n\n        onCleanup(() => {\n            sizeObserver.disconnect();\n            childObserver.disconnect();\n            track.removeEventListener(\"scroll\", update);\n        });\n\n        update();\n    });\n\n    const handleFocusIn = (e: FocusEvent) => {\n        const track = getTrackRef();\n        const target = e.target as HTMLElement | null;\n\n        if (!track || !target || target === track) return;\n\n        const offset = computeOffsetWithin(target, track);\n\n        track.scrollTo({ left: computeRevealTarget(track, offset, target.offsetWidth, getPadding()) });\n    };\n\n    return (\n        <div class={styles.scrollerRoot} style={{ gap: `${getGap()}px` }}>\n            <Index each={getLeadingSteps()}>{(getStep) => props.renderButton(getStep, stepper)}</Index>\n\n            <div\n                ref={setTrackRef}\n                class={styles.scrollerTrack}\n                style={{\n                    \"padding-block\": `${getPadding()}px`,\n                    \"padding-inline-start\": `${getPadding()}px`,\n                }}\n                onFocusIn={handleFocusIn}\n            >\n                {props.children}\n\n                <div class={styles.scrollerTrackEnd} style={{ \"flex-basis\": `${getPadding()}px` }} />\n            </div>\n\n            <Index each={getTrailingSteps()}>{(getStep) => props.renderButton(getStep, stepper)}</Index>\n        </div>\n    );\n};\n"],"mappings":"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"}

package/dist/Fundamentals/SlideButton/SlideButton.css.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SlideButton.css.js","names":[],"sources":["../../../src/Fundamentals/SlideButton/SlideButton.css.ts"],"sourcesContent":["import { style } from \"@vanilla-extract/css\";\n\nexport const slideButtonElement = 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    touchAction: \"none\",\n\n    selectors: {\n        \"&:disabled, &[aria-disabled='true']\": {\n            cursor: \"not-allowed\",\n        },\n    },\n});\n"],"mappings":""}